Adobe DREAMWEAVER CS3 Mode d'emploi

ADOBE

®

DREAMWEAVER

GUIDE DE L’UTILISATEUR

®

CS

3

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

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

Personnalisation de l'espace de travail de Dreamweaver CS3

. . . .26

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

Synchronisation de fichiers

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .88

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

Création et gestion CSS

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .117

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

Présentation de contenu à l'aide de tableaux

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .167

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .170

iii

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

Ajout de contenu Flash Video

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .245

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

Etablissement de liens

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .267

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .269

Menus de reroutage

Barres de navigation

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .277

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

Rédaction et modification de code

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .296

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

Gestion des bibliothèques de balises

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .326

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

Utilisation de Flash

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .358

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

iv

Création d'un modèle Dreamweaver

Création de régions modifiables

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .378

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

Syntaxe des modèles

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .396

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

Utilisation du widget Validation de la sélection

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .446

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

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

. . . . . . . . . . . . . . . . . . . .483

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

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

Suppression de scripts de connexion

. . . . . . . . . . . . . . . . . . . . . . . . . . .495

. . . . . . . . . . . . . . . . . . . . . . . . . . .499

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

v

Chapitre 19 : Ajout de contenu dynamique aux pages Web

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

Conception de pages dynamiques

. . . . . . . . . . . . . . . . . . . . . . . . .512

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .515

Présentation des sources de contenu dynamique

Panneaux de contenu dynamique

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .517

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .520

Définition de sources de contenu dynamique

Ajout de contenu dynamique dans les pages

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .521

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .537

Modification d'un contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .540

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

Affichage des données dynamiques

Utilisation des services Web

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .552

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

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . .630

. . . . . . . . . . . . . . . . . . . . . . . . . .632

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

Utilisation des composants ColdFusion (ColdFusion)

. . . . . . . . . . . . . . . . . . . . . . . . . . . .635

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

vi

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

1

DREAMWEAVER CS3

Guide de l'utilisateur

2

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 .

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.

DREAMWEAVER CS3


3

• 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

C

D

B

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

DREAMWEAVER CS3


4

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.

DREAMWEAVER CS3


5

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.

DREAMWEAVER CS3


6

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 et personnalisation de mises en page basées sur CSS

• Utilisation de widgets Spry

• Formatage de formulaires avec CSS

• Dépannage de problèmes de publication

• Création de boutons animés

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]

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

DREAMWEAVER CS3


7

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.

E T COSET

ERO E

DUO D

OLORE

ETUR

SADIP

SCING

T JUS TO

ACCU

SAM E

EA RE

BUM.

CLITA

01

Y our

Are you

Investment

Guide table

?

Typi non habent clarita legunt saepius.

C tem insitam; est usus le nes demonstraverunt le us. gentis in iis qui facit eo

C

V

O RE I

N VES

ME NT

et iusto odio dignissim

SPEC

qui.

T RUM

t nulla facilisis at vero e ros et accumsan rum uod ii

RE

V

T IREME

NT

N

et iusto odio dignissim

G

qui.

PLA

N

t nulla facilisis at vero e ros et accumsan

01

Pelletir

Inc.

Vel: Ad : Vulputate:

Travel Earth

Best 100 places to see on the planet in your lifetime

CC a

S p o

A p i a

NU

vero

L C

H

E et ad lorp erit

agiam et ad

atin

utet

$35 lorper

agiam eum

nu agaim et ad ma

eum

it su

llam

lorp erit ver

S

U

CC

I nulche

o di

sum

VER

eum a

O

S

S

U

RV

I

CE

ME

NU

$15

N eum

$35

nul lam

eum nul

nulche et ad

eum

sucicver

nulche io eu a m vero d imet ad e a m um

O

S

volute ipsummy

, commy re eugiarud tem

eraes-

exer n ullutet

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.

DREAMWEAVER CS3


8

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.

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.

DREAMWEAVER CS3


9

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

DREAMWEAVER CS3


10

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.

DREAMWEAVER CS3


11

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.

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

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

12

DREAMWEAVER CS3


13

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

T est et publication

Le test de vos pages est un processus continu qui se déroule tout au long du cycle de développement. A la fin de ce cycle, vous publiez le site sur un serveur. De nombreux développeurs programment également une maintenance régulière pour

s'assurer que le site reste à jour et est opérationnel. (Voir « Acquisition et placement de fichiers depuis ou vers votre serveur » à la page 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.

A B C D

DREAMWEAVER CS3


14

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

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

E F G

A.

Barre Insertion

B.

Barre d'outils du document

C.

Fenêtre de document

D.

Groupes de panneaux

E.


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 .

DREAMWEAVER CS3


15

Voir aussi

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

de codage standard.

Affichée en mode Code uniquement. Regroupe des boutons couvrant la plupart des opérations

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

DREAMWEAVER CS3


16

Voir aussi

« Utilisation de la fenêtre de document » à la page 23

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

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.

DREAMWEAVER CS3


17

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.

T itre 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

navigateurs.

Permet de vérifier si votre code CSS est compatible avec différents

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


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.

DREAMWEAVER CS3


18

A B C D E F G

A.


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

<body>

pour sélectionner tout le corps du document. Pour définir les attributs class

ou id

d'une balise dans le sélecteur de balises, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Option enfoncée (Macintosh) sur la balise et choisissez une classe ou un ID dans le menu contextuel.

O util Sélectionner

Active et désactive l'outil Main.

O util Main

Permet de cliquer sur le document et de le glisser jusque dans la fenêtre de document.

O util Zoom et le menu contextuel Définir le facteur de zoom

document.

Permettent de définir un taux d'agrandissement pour votre

Menu contextuel

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

T aille 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

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.

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

DREAMWEAVER CS3


19

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

T exte

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.

DREAMWEAVER CS3


20

Voir aussi


« 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

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

téléphone mobile et un BlackBerry.

Indique comment la page apparaît sur un appareil portatif comme un

Rendu pour le type de support Projection

Indique comment la page apparaît sur un projecteur.


TTY

Indique comment la page apparaît sur un appareil de type télétype.


T

V

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


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

DREAMWEAVER CS3


21

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

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

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

DREAMWEAVER CS3


22

Présentation du panneau Styles CSS

Il vous permet de suivre les règles CSS et les propriétés qui affectent un élément de page sélectionné (mode Current (ou

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

Vous pouvez redimensionner n'importe quel volet en faisant glisser les cadres entre les volets.

En mode Current (Sélection), le panneau Styles CSS présente trois volets : un volet Summary for Selection (Récapitulatif de la sélection) qui présente les propriétés CSS de la sélection en cours dans le document; un volet Rules (Règles) qui précise l'emplacement des propriétés sélectionnées (ou une cascade de règles pour la balise sélectionnée, selon votre sélection); et un volet Propriétés qui vous permet de modifier les propriétés CSS de la règle définissant la sélection.

En mode All (Tout), le panneau Styles CSS présente deux volets : un volet All Rules (Toutes les règles) (en haut) et un volet

Propriétés (en bas). Le volet Toutes les règles présente la liste des règles définies dans le document actif, ainsi que l'ensemble des règles définies dans les feuilles de styles jointes à ce document. Le volet Propriétés permet de modifier les propriétés

CSS de toute règle sélectionnée dans le volet Toutes les règles.

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

Voir aussi

« Création et gestion 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

DREAMWEAVER CS3


23

•

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


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

•

Dans la barre d'outils du document, cliquez sur le bouton Afficher le mode Code .

Activation du mode Création

❖


•

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

❖


•

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.

DREAMWEAVER CS3


24

Voir aussi

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

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

T aille 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

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

DREAMWEAVER CS3


25

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

T aille 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 F

T

P

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

DREAMWEAVER CS3


26

« Acquisition de fichiers depuis un serveur distant » à la page 85

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.

DREAMWEAVER CS3


27

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


•

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


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.

DREAMWEAVER CS3


28

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électionnezla 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

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

DREAMWEAVER CS3


29

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.

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 de panneaux, plutôt qu'à cette étroite barre vide.

DREAMWEAVER CS3


30

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 .

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

DREAMWEAVER CS3


31

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.

DREAMWEAVER CS3


32

•

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.

DREAMWEAVER CS3


33

O uverture 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

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


DREAMWEAVER CS3


34

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\Configuration (qui peut se trouver dans un dossier caché).

Sous Mac OS X, ils sont situés dans votre dossier personnel, dans Utilisateurs/ nom_utilisateur /Bibliothèque/Application

Support/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


2


O uvrir 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

document n'est ouvert.

Affiche l'écran d'accueil de Dreamweaver lorsque vous démarrez Dreamweaver ou qu'aucun

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

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

DREAMWEAVER CS3


35

même balise de titre (ce qui vous permet de saisir plusieurs titres à la suite les uns des autres, puis d'ajouter les détails ultérieurement).

Autoriser plusieurs espaces consécutifs

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

Utiliser <strong> et <em> au lieu de <b> et <i>

Détermine que Dreamweaver applique la balise strong

lorsque vous effectuez une action qui appliquerait normalement la balise b

, et la balise em

lorsque vous effectuez une action qui appliquerait normalement la balise i

. Ces actions incluent notamment le fait de cliquer sur les boutons Gras ou Italique 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 H

T

ML

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 <p> ou <h1><h6>

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

Centrer

Spécifie si 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.

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

DREAMWEAVER CS3


36

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

1


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.

DREAMWEAVER CS3


37

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.

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

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

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

38

DREAMWEAVER CS3


39

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 sousdossier du dossier distant ou à des dossiers situés au-dessus du dossier distant dans la structure des répertoires.

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

N ouveau

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

DREAMWEAVER CS3


40

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


« 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

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

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

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

DREAMWEAVER CS3


41

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.

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 H

TT

P

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.

F

T

P

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

DREAMWEAVER CS3


42

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


« Utilisation de WebDAV pour archiver et extraire des fichiers » à la page 89

« Gestion des fichiers et des dossiers » à la page 74

Définition d'options pour l'accès F

T

P

1


2


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.

DREAMWEAVER CS3


43

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 F

T

P

❖

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


2


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



7


8

Cliquez sur OK.

Définition d'options pour l'accès WebDAV

1


2


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.

DREAMWEAVER CS3


44

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



10


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


2


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



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


2


3

Sélectionnez l'onglet Avancé, cliquez sur la catégorie Infos distantes et sélectionnez Microsoft Visual SourceSafe.

DREAMWEAVER CS3


45

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



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 «

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.

DREAMWEAVER CS3


46

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.

DREAMWEAVER CS3


47

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

C o l d

F usion

MX 7

II

S

A pache

(W indo w s

)

J a k arta

T omcat

(W indo w s

)

Préfixe de l'URL

http

://l oca l host

:8500/w arehouse

/ http

://l oca l host

/w arehouse

/ http

://l oca l host

:80/w arehouse

/ http

://l oca l host

:8080/w arehouse

/

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 lors, le préfixe d'URL utilisé par défaut dans Dreamweaver se présente de la manière suivante :

DREAMWEAVER CS3


48

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


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.

DREAMWEAVER CS3


49

•

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


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.

DREAMWEAVER CS3


50

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.

•

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

DREAMWEAVER CS3


51

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 :

N ombre 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

dans la carte du site.

Affiche les fichiers HTML que vous avez marqués comme étant masqués

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


•

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.

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

DREAMWEAVER CS3


52

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

DREAMWEAVER CS3


53

•

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.

DREAMWEAVER CS3


54

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

DREAMWEAVER CS3


55

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


« Utilisation des inclusions côté serveur » à la page 326

T

ransfert 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

DREAMWEAVER CS3


56

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

DREAMWEAVER CS3


57

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 notifie CPS dès que vous exécutez une opération réseau, telle que l'archivage, la restauration ou la publication d'un fichier. Le CPS conserve une trace de ces événements, que vous pouvez afficher dans la console d'administration CPS. (Si vous désactivez CPS, ces

événements ne sont pas consignés.)

Remarque :

CPS est activé avec Contribute. Pour plus d'informations, voir Administration de Contribute dans l'aide de

Contribute.

1


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

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.

DREAMWEAVER CS3


58

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

CSS nécessaires au site.

1


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


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


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

DREAMWEAVER CS3


59

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

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.

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


•

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.

DREAMWEAVER CS3


60

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 F

T

P 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


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 parefeu, 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 authentification 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.

DREAMWEAVER CS3


61

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


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


O

ptions 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 CS3


62

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


Définition des options de modification des fichiers de l'onglet Elémentaire

T

roisiè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 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/.

DREAMWEAVER CS3


63

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


F

T

P


Local/Réseau


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.




WebDAV




Voir aussi


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

DREAMWEAVER CS3


64

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


F

T

P


Local/Réseau


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.




WebDAV




Voir aussi


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.

DREAMWEAVER CS3


65

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


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

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

T

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

66

DREAMWEAVER CS3


67

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.

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

).

DREAMWEAVER CS3


68

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


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.

Fixe


DREAMWEAVER CS3


69

Elastique


Liquide


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.




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.


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



8


9


10


11

Enregistrez la page (Fichier > Enregistrer). Si vous n'avez pas encore ajouté de régions modifiables au modèle, une boîte

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.

DREAMWEAVER CS3


70

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



« Création et gestion des modèles » à la page 371

« Configuration d'un site Dreamweaver » à la page 38


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



Création d'un document basé sur un modèle

1


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


6


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.

DREAMWEAVER CS3


71

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


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


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


« 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


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


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.

DREAMWEAVER CS3


72

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

vous créerez.

Indiquez l'extension de fichier que vous préférez (.htm ou .html) pour les nouvelles pages HTML que

Remarque :

cette option est désactivée pour d'autres types de fichier.

T ype de document par défaut (DD

T

)

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

aucun codage.

Spécifie le codage à utiliser lorsque vous créez une page ou que vous ouvrez un document ne spécifiant 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

Formulaire de normalisation Unicode

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

N ouveau document si Ctrl+

N

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

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


« Description de l'encodage de document » à la page 208

Définition de l'extension de fichier par défaut de nouveaux documents H

T

ML

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


DREAMWEAVER CS3


73

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.

O

uverture 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


N

ettoyage de fichiers H

T

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

DREAMWEAVER CS3


74

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

N ettoyer CSS

Supprime de l'en-tête toutes les feuilles de style spécifiques à Word, y compris les styles CSS incorporés si 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é.

N ettoyer les balises <font>

Supprime les balises HTML, en convertissant le corps du texte par défaut en HTML de taille 2.

Corriger les imbrications de balises non valides

Supprime les balises de définition des polices de caractères insérées par

Word en dehors des balises de paragraphe et d'en-tête (au niveau du bloc).

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

le nettoyage est terminé.

Affiche un message d'avertissement détaillant les modifications apportées au document dès que

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


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.

DREAMWEAVER CS3


75

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 :

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.

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

DREAMWEAVER CS3


76

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


« Archivage et extraction de fichiers dans un dossier distant » à la page 89



« 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




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

DREAMWEAVER CS3


77

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)

❖

•

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.

• 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

B C

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.

DREAMWEAVER CS3


78

Voir aussi


O uverture 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


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


Déplacement d’un fichier ou d’un dossier

1

Sélectionnez le fichier à déplacer dans le panneau Fichiers (Fenêtre > Fichiers).

2


•

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.

DREAMWEAVER CS3


79

Actualisation du panneau Actifs

❖

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


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


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.


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 CS3


80

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.

DREAMWEAVER CS3


81

Voir aussi


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

O uverture d'un dossier sur un serveur F

T

P ou RDS distant

1

Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un nom de serveur dans le menu (dans lequel le site, le serveur ou le disque dur en cours d'utilisation s'affiche).

Remarque :

Les noms des serveurs que vous avez configurés pour fonctionner avec Dreamweaver apparaissent.

2

Naviguez vers ces fichiers et modifiez-les comme vous le faites habituellement.

Accès à un disque local ou à votre bureau

1

Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez Bureau, disque local ou disque compact dans le menu (dans lequel le site, le serveur ou le disque dur s'affiche).

2

Recherchez le fichier de votre choix, puis effectuez l'une des opérations suivantes :

•

Ouverture de fichiers dans Dreamweaver ou dans une autre application

•

Renommer des fichiers

•

Copier des fichiers

•

Supprimer des fichiers

•

Faire glisser des fichiers

Lorsque vous faites glisser un fichier d'un site Dreamweaver à un autre site ou à un dossier non lié à un site Dreamweaver,

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.

DREAMWEAVER CS3


82

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


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

T oujours 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 F

T

P

Détermine si la connexion avec le site distant doit être interrompue après le délai d'inactivité spécifié.

Délai F

T

P

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.

O ptions de transfert F

T

P

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.

O ptions 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


DREAMWEAVER CS3


83

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


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.

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

DREAMWEAVER CS3


84

Acquisition et placement de fichiers depuis ou vers votre serveur

T

ransfert 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


« 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 ;

DREAMWEAVER CS3


85

• 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



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.

DREAMWEAVER CS3


86

•

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 F

T

P

❖

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


« 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

DREAMWEAVER CS3


87

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 F

T

P

❖

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.

DREAMWEAVER CS3


88

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


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.

DREAMWEAVER CS3


89

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 :

N om 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


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.

DREAMWEAVER CS3


90

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 :


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


•

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.

DREAMWEAVER CS3


91

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 :


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




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

DREAMWEAVER CS3


92

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.

O btenir les fichiers plus récents depuis l'hôte distant

qui ont été modifiés depuis le dernier téléchargement.

Télécharge tous les fichiers distants qui n'existent pas localement ou

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

synchronisés.

Cette option vous permet d'indiquer que le ou les fichiers sélectionnés sont déjà

DREAMWEAVER CS3


93

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

Voir aussi


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


•

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

Si vous utilisez

F i l e

M erge

BBE dit

T e x t

W rang l er

Sélectionnez le fichier suivant

usr

/ bin

/ opendiff usr / bin / bbdiff usr

/ bin

/ t w diff

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.

DREAMWEAVER CS3


94

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.


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.


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.

DREAMWEAVER CS3


95


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.


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


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.

DREAMWEAVER CS3


96

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.

DREAMWEAVER CS3


97

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

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.

DREAMWEAVER CS3


98

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


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


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

N

otes

A propos des Design

N

otes

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.

DREAMWEAVER CS3


99

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


Activation et désactivation des Design

N

otes 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


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écharge pas avec les fichiers. Si vous travaillez seul sur le site, vous pouvez désactiver cette option afin d'améliorer les performances. Les

Design Notes ne seront pas transférées sur le site distant lorsque vous archiverez ou placerez vos fichiers. En outre, il vous sera toujours possible d'ajouter et de modifier les Design Notes pour votre site local.

DREAMWEAVER CS3


100

Association de Design

N

otes à 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


•

Ouvrez le fichier dans la fenêtre du document, puis sélectionnez Fichier > Design Notes.

•


(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


Utilisation des Design

N

otes

Après avoir associé des Design Notes à un fichier, vous pouvez ouvrir le fichier Design Notes, modifier son état ou le supprimer.

O uvrez les Design

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

•


(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

N otes personnalisé

1

Ouvrez les Design Notes du fichier ou de l'objet concerné (voir la procédure ci-dessus).

DREAMWEAVER CS3


101

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

N otes non associées

1


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.

T

est 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 :

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.

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.

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.

DREAMWEAVER CS3


102

Pour les pages constituées d'un grand tableau, n'oubliez pas que, sous certains navigateurs, les visiteurs ne voient rien tant 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

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.

La publication d'un site peut être accomplie de différentes manières et constitue un processus continu. La définition et l'implémentation d'un système de contrôle de version constituent une partie importante du processus, que ce soit avec les outils intégrés à Dreamweaver ou par le biais d'une application de contrôle de version externe.

Utilisez les forums de discussion Dreamweaver du site Web 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


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

DREAMWEAVER CS3


103

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


« 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

N otes

Crée un rapport qui dresse la liste de l'ensemble des Design Notes pour les documents sélectionnés ou le site.

Entrez une ou plusieurs paires nom/valeur, puis sélectionnez des valeurs de comparaison dans les menus contextuels correspondants. Cliquez sur OK pour revenir à la boîte de dialogue Rapports.

Modifiés récemment

Crée un rapport qui dresse la liste des fichiers qui ont été modifiés durant une période donnée. Entrez les plages de dates et l'emplacement des fichiers à afficher.

4

Si vous avez sélectionné un rapport HTML, choisissez l'un des rapports suivants

Balises de polices imbriquées combinables

Crée un rapport qui dresse la liste de toutes les balises de polices imbriquées pouvant être combinées pour nettoyer le code.

Par exemple,

<font color="#FF0000"><font size="4">STOP!</font></font>

est inclus dans le rapport.

T exte secondaire manquant

secondaire (sec/alt).

Crée un rapport qui dresse la liste de toutes les balises img

qui ne possèdent pas de texte

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,

<i> En Espagne, <i> il pleut</i> principalement dans les plaines</i>

est inclus dans le rapport.

Balises vides amovibles

nettoyer le code HTML.

Crée un rapport qui dresse la liste de toutes les balises vides pouvant être supprimées afin de

DREAMWEAVER CS3


104

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.

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

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.

105

DREAMWEAVER CS3


106

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.

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.

DREAMWEAVER CS3


107

Le panneau Actifs vous propose deux vues différentes des actifs :

la liste Site

de votre site.

Elle présente tous les actifs de votre site, y compris les couleurs et les adresses URL utilisées dans les documents

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èreplans 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

Films

Fichiers dans n'importe quelle version d'Adobe Shockwave.

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.

Eléments de bibliothèque

Des éléments que vous utilisez dans plusieurs pages. Lorsque vous modifiez un élément de bibliothèque, toutes les pages qui le contiennent sont mises à jour.

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


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.

T rier les actifs

❖

Cliquez sur une en-tête de colonne.

DREAMWEAVER CS3


108

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


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

DREAMWEAVER CS3


109

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


•

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


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.

DREAMWEAVER CS3


110

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.

DREAMWEAVER CS3


111

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


Ajouter des actifs à la liste Favoris


•

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


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

DREAMWEAVER CS3


112

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


•

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


•

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.

DREAMWEAVER CS3


113

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


3


•

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


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.

DREAMWEAVER CS3


114

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


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


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


Modifier la couleur de surbrillance des éléments de bibliothèque

1


2

Sélectionnez la catégorie Surbrillance dans la liste située à gauche dans la boîte de dialogue Préférences.

DREAMWEAVER CS3


115

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.

O uvrir

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


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.

DREAMWEAVER CS3


116

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

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


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;

}

117

DREAMWEAVER CS3


118

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.

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"

).

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)

d'un document HTML.

Ensembles de règles CSS incluses dans une balise style

de la section head

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.

DREAMWEAVER CS3


119

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 (

<p>

). Par défaut, les navigateurs comportent des feuilles de style qui définissent la police et la taille de police du texte des paragraphes, c'est-à-dire le texte placé entre balises

<p>

dans le code HTML. Ainsi, dans Internet Explorer, tout le texte du corps, y compris celui des paragraphes, s'affiche par défaut dans la police Times New Roman de taille moyenne.

Toutefois, si vous êtes l'auteur d'une page Web, vous pouvez créer une feuille de style qui remplace le style par défaut du navigateur pour ce qui est de la police et de la taille de police. Par exemple, vous pouvez créer la règle suivante dans votre feuille de style : p { font-family: Arial; font-size: small;

}

Lorsqu'un utilisateur charge la page, les paramètres de police du paragraphe et de taille de police que vous, auteur, avez définis, remplacent les paramètres par défaut du navigateur en la matière.

Les utilisateurs peuvent effectuer des sélections pour personnaliser l'affichage du navigateur selon leurs attentes. Par exemple, dans Internet Explorer, l'utilisateur peut choisir Affichage > Taille du texte > La plus grande, de manière à agrandir la police et la rendre plus lisible. En fin de compte (du moins, dans ce cas), la sélection de l'utilisateur remplace à la fois les styles par défaut du navigateur pour la taille de police par défaut dans les paragraphes, et les styles de pargraphe créés par l'auteur de la page Web.

L'héritage est un autre élément important de la cascade. Les propriétés de la plupart des éléments d'une page Web sont héritées. Par exemple, les balises de paragraphe héritent de certaines propriétés des balises body, les balises 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;

}

DREAMWEAVER CS3


120

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 :

DREAMWEAVER CS3


121

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.

DREAMWEAVER CS3


122

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.

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.

.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

.)

DREAMWEAVER CS3


123

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.


Voir aussi

« Ouverture du panneau Styles CSS » à la page 125

DREAMWEAVER CS3


124

Panneau Styles CSS en mode

T

ous

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.

Vous pouvez redimensionner l'un quelconque des volets en faisant glisser les cadres entre les volets et redimensionner les colonnes Propriétés en faisant glisser les séparateurs.

Lorsque vous sélectionnez une règle dans le volet Toutes les règles, toutes les propriétés s'appliquant à cette règle s'affiche au-dessous dans le volet Propriétés. Vous pouvez alors utiliser le volet Propriétés pour modifier rapidement votre style CSS, qu'il soit intégré dans le document en cours ou relié via par une feuille de style. Par défaut, le volet Propriétés ne présente que les propriétés précédemment définies et les classe par ordre alphabétique.

Vous pouvez choisir d'afficher les propriétés dans deux autres vues. La vue Catégorie regroupe les propriétés en catégories, telles que Police, Arrière-plan, Bloc, Bordure, etc., les propriétés définies placées en haut de chaque catégorie. La vue Liste présente la liste alphabétique de toutes les propriétés disponibles, les propriétés définies également placées en haut de chaque catégorie. Pour passer d'une vue à l'autre, cliquez sur les boutons Afficher la vue par catégorie, Afficher la vue sous forme de liste ou Afficher uniquement les propriétés définies, situés dans le coin inférieur droit du volet Propriétés. Dans toutes les vues, les propriétés utilisées dans la sélection s'affichent en bleu.


Voir aussi


Boutons et vues du panneau Styles CSS

Dans les modes Tous et Actuel, le panneau Styles CSS présente trois boutons qui vous permettent de modifier l'affichage du volet Propriétés (volet inférieur) :

DREAMWEAVER CS3


125

A

B C

A.

Vue Catégorie

B.

La vue Liste

C.

La vue Définition des propriétés

Vue Catégorie

Répartit les propriétés CSS prises en charge par Dreamweaver en huit catégories distinctes : police, arrièreplan, bloc, bordure, boîte, liste, positionnement et extensions. Les propriétés de chaque catégorie sont conservées dans une liste que vous pouvez développer ou réduire en cliquant sur le bouton plus (+) en regard de la catégorie de votre choix. Les propriétés définies s'affichent en bleu en haut de la liste.

Vue Liste

Affiche l'ensemble des propriétés CSS prises en charge par Dreamweaver par ordre alphabétique. Les propriétés définies s'affichent en bleu en haut de la liste.

Vue Définition des propriétés

N'affiche que les propriétés déjà définies et constitue la vue par défaut.

A

B C D

A.

Attacher une feuille de style

B.

Nouvelle règle de CSS

C.

Modifier le style

D.

Supprimer règle de CSS

Attacher une feuille de style

Ouvre la boîte de dialogue Ajouter une feuille de style externe. Sélectionnez une feuille de style externe pour créer un lien vers le document actif ou l'importer dans celui-ci.

N ouvelle règle de CSS

Ouvre une boîte de dialogue qui permet de sélectionner le type du style que vous créez, par exemple, pour créer un style de classe, redéfinir une balise HTML ou pour définir un sélecteur CSS.

Modifier le style

Ouvre une boîte de dialogue qui permet de modifier les styles dans le document actuel ou dans une feuille de style externe.

Supprimer règle de CSS

Supprime la règle ou la propriété sélectionnée du panneau Styles CSS et la mise en forme de tous les éléments auxquels elle est appliquée. (Les références à ce style ne sont cependant pas supprimées.) Le bouton Supprimer règle de CSS peut également détacher (ou rompre le lien de) une feuille de style CSS associée.

Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur le panneau Styles CSS pour ouvrir un menu contextuel d'options disponibles pour l'exécution des commandes de feuilles de style CSS.

O

uverture du panneau Styles CSS

Le panneau Styles CSS vous permet d'afficher, de créer, de modifier et de supprimer des styles CSS, mais également de joindre des feuilles de style externes aux documents.

❖

Effectuez l’une des tâches suivantes :

•

Choisissez Fenêtre > Styles CSS.

•

Appuyez sur les touches Maj+F11.

•

Cliquez sur le bouton CSS de l'inspecteur Propriétés.

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

Les préférences de styles CSS contrôlent la façon dont Dreamweaver rédige le code qui définit les styles CSS. Les styles CSS peuvent être rédigés sous une forme abrégée, que certains développeurs estiment plus facile à utiliser. Toutefois, certaines versions anciennes des navigateurs n'interprètent pas correctement la forme abrégée des attributs de styles.

1

Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), puis sélectionnez Styles CSS dans la liste Catégorie.

2

Définissez les options de style CSS que vous voulez appliquer :

A la création de règles de CSS - Utilisez Forme courte pour

Dreamweaver rédige en abrégé.

Vous permet de sélectionner les propriétés de style CSS que

DREAMWEAVER CS3


126

A la modification de règles de CSS - Utilisez Forme courte pour

abrégé.

Détermine si Dreamweaver réécrit les styles existants en

Choisissez l'option Si l'original utilise Forme courte pour que les styles ne soient pas modifiés.

Choisissez En fonction des paramètres ci-dessus pour réécrire en forme abrégée les styles des propriétés sélectionnées dans la zone Utiliser Forme courte pour.

Sur double-clic dans le panneau CSS :

Vous permet de sélectionner un outil pour modifier les règles CSS.

3

Cliquez sur OK.

Création d'une nouvelle règle CSS

Vous pouvez créer une règle CSS pour automatiser la mise en forme de balises HTML ou d'une plage de texte identifiée par un attribut class

.

1

Placez le point d'insertion dans le document, puis procédez de l'une des manières suivantes pour ouvrir la boîte de dialogue Nouvelle règle CSS :

•

Choisissez Texte > Styles CSS > Nouveau.

•

Dans le panneau Styles CSS (Fenêtre > Styles CSS), cliquez sur le bouton Nouvelle règle CSS inférieure droite du panneau.

(+), situé dans la partie

2

Définissez le type de style CSS que vous souhaitez créer :

•

Pour créer un style personnalisé applicable en tant qu'attribut class

à une plage ou un bloc de texte, choisissez l'option

Classe, puis entrez le nom du style dans la zone de texte Nom.

Remarque :

Les noms de classe doivent commencer par un point et peuvent contenir n'importe quelle combinaison de lettres et de chiffres (par exemple, .monentete1). Si vous omettez le point, Dreamweaver l'insère à votre place.

•

Pour redéfinir la mise en forme par défaut d'une balise HTML spécifique, choisissez Balise, puis entrez une balise HTML dans le champ Balise ou choisissez-en une dans le menu déroulant.

•

Pour définir la mise en forme d'une combinaison particulière de balises ou de toutes les balises contenant un attribut

Id spécifique, choisissez Utiliser le sélecteur CSS, puis entrez une ou plusieurs balises HTML dans le champ Sélecteur ou choisissez-en une dans le menu déroulant. Les sélecteurs (appelés sélecteurs de pseudo-classe) disponibles dans le menu déroulant sont a:active

, a:hover

, a:link

et a:visited

.

3

Sélectionnez l'emplacement dans lequel définir le style et cliquez sur OK

•

Pour placer le style dans une feuille de style qui est déjà associée au document, sélectionnez la feuille de style.

•

Pour créer une feuille de style externe, choisissez Nouveau fichier feuille de style.

•

Pour incorporer le style dans le document actif, choisissez Seulement ce document.

4

Dans la boîte de dialogue Définition des règles de CSS, choisissez les options à définir pour la nouvelle règle CSS. Pour plus d'informations, consultez la section suivante.

5

Lorsque vous avez défini les propriétés de style, cliquez sur OK.

Remarque :

Le fait de cliquer sur OK sans définir d'options de style entraîne la création d'une nouvelle règle vide.

Définition des propriétés CSS

Vous pouvez définir des propriétés pour les règles CSS, telles que les propriétés de police de caractères, d'image et de couleur d'arrière-plan, d'espacement et de mise en page ainsi que l'aspect des éléments de la liste. Créez d'abord une nouvelle règle, puis définissez les propriétés suivantes.

Définition des propriétés de type CSS

La catégorie Type de la boîte de dialogue Définition des règles de CSS vous permet de définir les paramètres élémentaires de police et de type pour un style CSS.

1

Ouvrez le panneau Styles CSS (Maj+F11), si nécessaire.

DREAMWEAVER CS3


127

2

Double-cliquez sur une règle ou une propriété existante dans le volet supérieur du panneau Styles CSS.

3

Dans la boîte de dialogue Définition des règles de CSS, choisissez Type, puis définissez les propriétés de style.

Laissez les propriétés suivantes vides si elles ne sont pas importantes pour ce style :

Police

Permet de définir la famille de polices (ou la série de familles) de ce style. Les navigateurs affichent le texte en utilisant la première police installée sur l'ordinateur de l'utilisateur au sein de la combinaison de polices choisie. Pour assurer la compatibilité avec Internet Explorer 3.0, utilisez une police Windows en premier. Cet attribut est pris en charge par les deux navigateurs.

T aille

Définit la taille du texte. Vous pouvez choisir une taille spécifique en cliquant sur une valeur et une unité de mesure, ou une taille relative. Les pixels fonctionnent correctement pour empêcher la déformation du texte par les navigateurs. Cet attribut est pris en charge par les deux navigateurs.

Style

permet de spécifier la variation Normal, Italique ou Oblique comme style de la police. La valeur par défaut est

Normal. Cet attribut est pris en charge par les deux navigateurs.

Hauteur de ligne

Définit la hauteur de la ligne sur laquelle le texte est placé. Ce paramètre fait généralement référence à la notion d' interligne . Choisissez Normal pour que la hauteur de ligne soit calculée automatiquement en fonction de la taille de la police ou entrez une valeur fixe et sélectionnez une unité de mesure. Cet attribut est pris en charge par les deux navigateurs.

Décoration

Ajoute un effet de soulignement, de barre supérieure, de texte barré ou de clignotement du texte. La valeur par défaut pour le texte normal est Aucune. La valeur par défaut pour le texte des liens est Souligné. Si vous définissez le paramètre de lien sur aucun, vous pouvez supprimer le soulignement des liens en définissant une classe spéciale. Cet attribut est pris en charge par les deux navigateurs.

Epaisseur

Applique aux caractères un niveau d'épaisseur spécifié en valeur relative ou absolue. Normal équivaut à une valeur de 400 ; Gras équivaut à une valeur de 700. Cet attribut est pris en charge par les deux navigateurs.

Variante

Définit la variante en petites capitales du texte. Dreamweaver n'affiche pas cet attribut dans la fenêtre de

Casse

Permet de mettre en capitale la première lettre de chaque mot de la sélection ou de passer l'ensemble du texte en majuscules ou minuscules. Cet attribut est pris en charge par les deux navigateurs.

Couleur

Définit la couleur du texte. Cet attribut est pris en charge par les deux navigateurs.

4

Une fois les options définies, sélectionnez une autre catégorie CSS dans la partie gauche du panneau pour définir des

Définition des propriétés d'arrière-plan de style CSS

Utilisez la catégorie Arrière-plan de la boîte de dialogue Définition des règles CSS pour définir les paramètres d'arrière-plan d'un style CSS. Les propriétés d'arrière-plan s'appliquent à tout élément d'une page Web. Rien ne vous empêche d'assortir un élément de page d'une couleur ou d'une image d'arrière-plan (derrière le texte, la page, un tableau, etc.). Il vous est

également possible de définir la position d'une image d'arrière-plan.

1


2


3

Dans la boîte de dialogue Définition des règles de CSS, choisissez Arrière-plan, puis définissez les propriétés de style.


Couleur d'arrière-plan

Définit la couleur d'arrière-plan de l'élément. Cet attribut est pris en charge par les deux navigateurs.

Image d’arrière-plan

Définit l'image d'arrière-plan pour l'élément. Cet attribut est pris en charge par les deux navigateurs.

Répétition

Détermine comment l'image d'arrière-plan doit être répétée, le cas échéant. Cet attribut est pris en charge par les deux navigateurs.

• Pas de répétition affiche l'image une seule fois, dans le coin supérieur gauche de l'élément.

• Répéter crée une mosaïque horizontale et verticale de l'image derrière l'élément.

DREAMWEAVER CS3


128

•

Répéter-x et Répéter-y affichent respectivement un bandeau horizontal ou vertical. Les dernières images sont coupées pour s'adapter aux dimensions exactes de l'élément.

Remarque :

La propriété Répétition vous permet de redéfinir la balise

body

et de définir une image d'arrière-plan sans mosaïque ni répétition.

Fixation

Détermine si l'image d'arrière-plan reste fixe par rapport à sa position d'origine ou défile avec le contenu. Notez mais non par Netscape Navigator.

Position horizontale et Position verticale

Spécifient la position initiale de l'image d'arrière-plan par rapport à l'élément.

Cette propriété peut être utilisée pour aligner une image d'arrière-plan sur le centre de la page, verticalement et horizontalement. Si la propriété Fixation est réglée sur Fixe, cette position est relative à la fenêtre de document, pas à

4


Définition des propriétés de bloc de style CSS

La catégorie Bloc de la boîte de dialogue Définition des règles CSS vous permet de définir les paramètres d'espacement et d'alignement des balises et des propriétés.

1


2


3

Dans la boîte de dialogue Définition des règles de CSS, choisissez Bloc, puis définissez les propriétés de style suivantes.

(Ne définissez pas la propriété si elle n'est pas importante pour le style.)

Espacement des mots

Définit l'espace devant séparer les mots. Pour définir une valeur spécifique, choisissez Valeur dans le menu déroulant, puis entrez une valeur numérique. Dans le deuxième menu contextuel, choisissez une unité de mesure

(par exemple, pixels, points, etc.).

Remarque :

Vous pouvez indiquer des valeurs négatives, mais le résultat final variera selon le navigateur. Dreamweaver n'affiche pas cet attribut dans la fenêtre de document.

Espacement des lettres

Augmente ou réduit l'interlettrage. Une valeur négative (par exemple, -4) réduit l'espacement entre les caractères. Les paramètres d'interlettrage ont priorité sur les paramètres de justification du texte. Cet attribut est pris en

Alignement vertical

Détermine l'alignement vertical de l'élément auquel il s'applique. Dreamweaver n'affiche cet attribut dans la fenêtre de document que lorsqu'il est appliqué à la balise

<img>

.

Alignement du texte

navigateurs.

Détermine l'alignement du texte au sein de l'élément. Cet attribut est pris en charge par les deux

Retrait du texte

Détermine le retrait de texte sur la première ligne. Vous pouvez utiliser une valeur négative pour créer un retrait négatif, mais le résultat final variera selon le navigateur. Dreamweaver n'affiche cet attribut dans la fenêtre de document que lorsqu'il est appliqué aux éléments de niveau bloc. Cet attribut est pris en charge par les deux navigateurs.

Espace blanc

Détermine la gestion des espaces au sein de l'élément. Choisissez parmi les trois options suivantes : Normal réduit à un seul espace une suite éventuelle de plusieurs caractères d'espacement ; Pre gère les espaces comme si le texte était inséré à l'intérieur d'une balise pre

(tous les caractères d'espacement, notamment les espaces, tabulations et retours chariot, sont respectés) br

.

Dreamweaver n'affiche pas cet attribut dans la fenêtre de document. Cet attribut est pris en charge par Netscape Navigator

Afficher

Détermine le mode d'affichage d'un élément, le cas échéant. Aucune désactive l'affichage d'un élément.

4


DREAMWEAVER CS3


129

Définition des propriétés de boîte de style CSS

La catégorie Boîte de la boîte de dialogue Définition des règles CSS vous permet de définir les paramètres des balises et des propriétés pour le positionnement des éléments sur la page.

Vous pouvez appliquer des paramètres individuels aux côtés d'un élément lors de la définition du remplissage et des marges ou utiliser l'option Idem pour tous pour appliquer le même paramètre à tous les côtés d'un élément.

1


2


3

Dans la boîte de dialogue Définition des règles de CSS, choisissez Boîte, puis définissez les propriétés de style suivantes.

Ne définissez pas la propriété si elle n'est pas importante pour le style.

Largeur et Hauteur

Définissent la largeur et la hauteur de l'élément.

Flottante

Détermine de quel côté les autres éléments, tels que le texte, les divs PA, les tableaux, etc., flottent autour d'un

élément. Les autres éléments sont affichés autour de l'élément flottant, suivant la méthode habituelle. Cet attribut est pris en charge par les deux navigateurs.

Effacer

Définit les côtés sur lesquels les éléments PA ne sont pas autorisés. Si un élément PA apparaît du côté marqué dans

Effacer, l'élément possédant cet attribut passera sous le cadre. Cet attribut est pris en charge par les deux navigateurs.

Remplissage

Définit la marge intérieure, c'est-à-dire l'espace qui sépare le contenu de l'élément de sa bordure (ou sa marge s'il ne comporte pas de bordure). Désactivez l'option Idem pour tous si vous voulez définir un remplissage différent pour chaque côté de l'élément.

Idem pour tous

Applique le même remplissage aux bords supérieur, droit, inférieur et gauche de l'élément.

Marge

Définit l'espace qui sépare la bordure d'un élément (ou son remplissage s'il ne comporte pas de bordure) d'un autre

élément. Dreamweaver n'affiche cet attribut dans la fenêtre de document que lorsqu'il est appliqué aux éléments de niveau bloc (paragraphes, en-têtes, listes, etc.). Désactivez l'option Idem pour tous si vous voulez définir une marge différente pour chaque côté de l'élément.

Idem pour tous

Applique la même marge aux bords supérieur, droit, inférieur et gauche de l'élément.

4


Définition des propriétés de bordure de style CSS

Le panneau Bordure de la boîte de dialogue Définition des règles CSS vous permet de définir les paramètres des bordures des éléments, par exemple leur épaisseur, leur couleur et leur style.

1


2


3

Dans la boîte de dialogue Définition des règles de CSS, choisissez Bordure, puis définissez les propriétés de style suivantes. Ne définissez pas la propriété si elle n'est pas importante pour le style.

Style

Définit l'aspect de la bordure. L'affichage du style dépend du navigateur. Dreamweaver restitue tous les styles en aplat dans la fenêtre de document. Cet attribut est pris en charge par les deux navigateurs. Désactivez l'option Idem pour tous si vous voulez définir un style de bordure différent pour chaque côté de l'élément.

Idem pour tous

Applique le même style de bordure aux bords supérieur, droit, inférieur et gauche de l'élément.

Largeur

Détermine l'épaisseur de la bordure de l'élément. Cet attribut est pris en charge par les deux navigateurs.

Désactivez l'option Idem pour tous si vous voulez définir une épaisseur différente pour chaque côté de l'élément.

Idem pour tous

Applique la même largeur de bordure aux bords supérieur, droit, inférieur et gauche de l'élément.

Couleur

Définit la couleur de la bordure. Vous pouvez indiquer une couleur différente pour chaque côté, mais le résultat final variera selon le navigateur. Désactivez l'option Idem pour tous si vous voulez définir une couleur différente pour chaque côté de l'élément.

Idem pour tous

Applique la même couleur de bordure aux bords supérieur, droit, inférieur et gauche de l'élément.

DREAMWEAVER CS3


130

4


Définition des propriétés de liste de style CSS

La catégorie Liste de la boîte de dialogue Définition des règles CSS vous permet de définir les paramètres des balises de liste, tels que la taille et le type des puces.

1


2


3

Dans la boîte de dialogue Définition des règles de CSS, choisissez Liste, puis définissez les propriétés de style suivantes.

Ne définissez pas la propriété si elle n'est pas importante pour le style.

T ype

Détermine l'aspect des puces ou des numéros. Cet attribut est pris en charge par les deux navigateurs.

Illustration de la puce

Permet de choisir une image personnalisée pour les puces. Cliquez sur Parcourir (Windows) ou

Choisir (Macintosh) pour sélectionner une image ou tapez le chemin d'accès à celle-ci.

Position

Détermine si le texte de l'élément de la liste est habillé et mis en retrait (extérieure) ou si le texte habille la marge de gauche (intérieure).

4


Définition des propriétés de positionnement de style CSS

Les propriétés de style Positionnement déterminent la façon dont le contenu associé au style CSS sélectionné est positionné dans la page.

1


2


3

Dans la boîte de dialogue Définition des règles de CSS, choisissez Positionnement, puis définissez les propriétés de style qui vous conviennent.


T ype

Détermine la façon dont le navigateur doit positionner l'élément sélectionné, avec les options suivantes :

•

Absolu place le contenu en fonction des coordonnées indiquées dans les zones Emplacement par rapport à l'ancêtre PA ou relatif le plus proche, et à défaut, par rapport au coin supérieur gauche de la page.

•

Relatif place le bloc de contenu en fonction des coordonnées indiquées dans les zones Emplacement, par rapport à la position du bloc dans le flux de texte du document. Par exemple, si vous définissez pour un élément une position relative et des coordonnées d'origine (en haut à gauche) de 20 px chacune, l'élément sera déplacé de 20 px vers la droite et de relative, avec ou sans coordonnées haut, gauche, droite ou bas, afin d'établir un contexte pour les enfants PA.

•

Fixe place le contenu en fonction des coordonnées indiquées dans les zones Emplacement, par rapport au coin supérieur gauche du navigateur. Le contenu restera fixé dans cette position tandis que l'utilisateur fera défiler la page.

•

Statique place le contenu à son emplacement dans le flux de texte. Il s'agit de la position par défaut de tous les éléments

HTML positionnables.

Visibilité

Détermine la condition de l'affichage initial du contenu. Si vous ne spécifiez pas de propriété de visibilité, le contenu hérite par défaut de la valeur de cette propriété pour l'objet parent. La visibilité par défaut de la balise body est visible. Sélectionnez l'une des options de visibilité suivantes :

•

Hériter (défaut) hérite de la propriété de visibilité de l'objet parent du contenu.

•

Visible affiche le contenu, quelle que soit la valeur du parent.

•

Masqué masque le contenu, quelle que soit la valeur du parent.

Index Z

Détermine l'ordre de superposition du contenu. Les éléments ayant une valeur d'index Z supérieure s'affichent par dessus les éléments ayant une valeur d'index Z inférieure (ou aucune valeur d'index Z). Les valeurs peuvent être positives

DREAMWEAVER CS3


131

ou négatives. (Si votre contenu est à position absolue, il est plus facile de modifier l'ordre de superposition à l'aide du panneau Eléments PA.

Débordement

Détermine ce qui se passe si le contenu d'un conteneur (par exemple, une balise DIV ou P) dépasse la taille de ce dernier. Ces propriétés contrôlent l'extension de la manière suivante :

•

Visible augmente la taille du conteneur pour que tout son contenu soit visible. Le conteneur s'agrandit vers le bas et vers la droite.

•

Masqué conserve la taille du contenu et coupe tout contenu dépassant la taille. Aucune barre de défilement n'est affichée.

•

Défilement ajoute des barres de défilement au conteneur, que le contenu dépasse ou non la taille du conteneur. Le fait d'intégrer des barres de défilement évite la confusion causée par l'apparition et la disparition de barres de défilement dans un environnement dynamique. Dreamweaver n'affiche pas cette option dans la fenêtre de document.

•

Auto ne fait apparaître les barres de défilement que lorsque le contenu du conteneur dépasse les limites de ce dernier.

Dreamweaver n'affiche pas cette option dans la fenêtre de document.

Emplacement

Définit l'emplacement et la taille du bloc de contenu. La façon dont le navigateur interprète l'emplacement dépend de l'option choisie pour l'attribut Type. Les valeurs relatives à la taille ne sont pas prises en compte si le contenu du bloc de contenu excède la taille spécifiée.

Les unités par défaut pour l'emplacement et la taille sont les pixels. Vous pouvez également choisir les unités suivantes : pc

(picas), pt (points), in (pouces), mm (millimètres), cm (centimètres) ou % (pourcentage de la valeur équivalente de l'objet parent). Les abréviations doivent suivre la valeur sans espace : par exemple,

3mm

.

Détourage

Définit la partie du contenu qui est visible. Si vous indiquez une zone de détourage, vous pouvez la gérer à l'aide d'un langage de script tel que Java Script et modifier ces propriétés pour créer des effets spéciaux, par exemple un effet de volet à l'ouverture. Ces effets de volet peuvent être configurés via le comportement Changer la propriété.

4


Définition des propriétés d'extension de style CSS

Les propriétés de style d'extensions comprennent les filtres, les sauts de page et les options de pointeur.

Remarque :

Un certain nombre d'autres propriétés d'extension sont disponibles dans Dreamweaver, mais vous devez passer par le panneau Styles CSS pour y accéder. Vous pouvez afficher facilement une liste des propriétés d'extension disponibles en ouvrant le panneau Styles CSS (Fenêtre > Styles CSS), en cliquant sur le bouton Afficher la vue par catégorie en bas du panneau et en développant la catégorie Extensions.

1


2


3

Dans la boîte de dialogue Définition des règles de CSS, choisissez Extensions, puis définissez les propriétés de style suivantes. Ne définissez pas la propriété si elle n'est pas importante pour le style.

Saut de page

Force un saut de page en cas d'impression de la page, avant ou après l'objet contrôlé par ce style. Choisissez l'option que vous voulez définir dans le menu déroulant. Cet attribut n'est pas pris en charge par la version 4.0 des navigateurs, mais peut l'être dans les versions ultérieures.

Curseur

Modifie l'aspect du pointeur lorsque celui-ci passe au-dessus de l'objet contrôlé par ce style. Choisissez l'option que et par Netscape Navigator 6.

Filtre

Applique des effets spéciaux, dont des effets de flou et de négatif, à l'objet contrôlé par ce style. Sélectionnez un effet dans le menu contextuel.

4


Modification d'une règle CSS

Vous pouvez facilement modifier les règles internes et externes appliquées à un document.

DREAMWEAVER CS3


132

Lorsque vous modifiez une feuille de style CSS qui contrôle du texte dans votre document, vous reformatez instantanément tout ce texte. Les modifications apportées à une feuille de style externe se répercutent sur tous les documents auxquels elle est liée.

Libre à vous de définir un éditeur externe à utiliser pour la modification des feuilles de style.

Modification d'une règle dans le panneau Styles CSS (mode Actuel)

1

Ouvrez le panneau Styles CSS en sélectionnant Fenêtre > Styles CSS.

2

Cliquez sur le bouton Actuel, situé en haut du panneau Styles CSS.

3

Sélectionnez un élément de texte dans la page pour afficher ses propriétés.

4


• Pour afficher la boîte de dialogue Définition des règles de CSS et effectuer vos modifications, double-cliquez sur une propriété du volet Résumé de la sélection.

• Sélectionnez une propriété dans le volet Résumé de la sélection et modifiez-la dans le volet Propriétés inférieur.

• Sélectionnez une règle dans le volet Toutes les règles, puis modifiez ses propriétés dans le volet Propriétés inférieur.

Remarque :

Vous pouvez changer le comportement du double-clic lors de la modification CSS, ainsi que les autres comportements, en changeant les préférences de Dreamweaver.

Modification d'une règle dans le panneau Styles CSS (mode

T ous)

1

Ouvrez le panneau Styles CSS en sélectionnant Fenêtre > Styles CSS.

2

Cliquez sur le bouton Tous, situé en haut du panneau Styles CSS.

3


•

Pour afficher la boîte de dialogue Définition des règles de CSS et effectuer vos modifications, double-cliquez sur une règle du volet Toutes les règles.

•

Sélectionnez une règle dans le volet Toutes les règles, puis modifiez ses propriétés dans le volet Propriétés inférieur.

•

Sélectionnez une règle dans le volet Toutes les règles, puis cliquez sur le bouton Modifier le style situé dans le coin inférieur droit du panneau Styles CSS.

Remarque :

Vous pouvez changer le comportement du double-clic lors de la modification CSS, ainsi que les autres comportements, en changeant les préférences de Dreamweaver.

Modification du nom d'un sélecteur CSS

1

Dans le panneau Styles CSS (mode Tous), sélectionnez le sélecteur à modifier.

2

Cliquez à nouveau sur le sélecteur afin de pouvoir en modifier le nom.

3

Apportez vos modifications, puis appuyez sur Entrée (Windows) ou sur Retour (Macintosh).

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

Vous pouvez utiliser le panneau de styles CSS pour ajouter des propriétés aux règles.

1

Dans le panneau Styles CSS (Fenêtre > CSS), sélectionnez une règle dans le volet Toutes les règles (mode Tous) ou une propriété dans le volet Résumé de la sélection (mode Actuel).

2


• Si la vue Afficher uniquement les propriétés définies est activée dans le volet Propriétés, cliquez sur le lien Ajouter des propriétés et ajoutez une propriété.

• Si la vue Catégorie ou Liste est sélectionnée dans le volet Propriétés, donnez une valeur à la propriété sélectionnée.

DREAMWEAVER CS3


133

Application, suppression ou changement du nom de styles de classe

Les styles de classe sont le seul type de style CSS qui peut être appliqué à n'importe quel texte dans un document, quelles que soient les balises qui contrôlent ce texte. Tous les styles de classe associés au document actif sont affichés dans le panneau Styles CSS (leur nom est précédé d'un point [.]) ainsi que dans le menu déroulant Style dans l'inspecteur Propriétés de texte.

Même si la plupart des styles sont actualisés immédiatement, il est conseillé d'afficher votre page dans un navigateur et de vérifier que le style a été appliqué comme prévu. Lorsque vous appliquez plusieurs styles au même texte, ils risquent d'être contradictoires et de produire des résultats inattendus.

Lorsque vous affichez un aperçu des styles définis dans une feuille de style CSS externe, n'oubliez pas d'enregistrer la feuille de style afin que vos modifications soient appliquées lorsque vous afficherez la page dans un navigateur.

Voir aussi

« A propos des feuilles de style en cascade » à la page 117

« A propos des styles en cascade » à la page 119

« A propos du panneau Styles CSS » à la page 121

Application d'un style de classe CSS

1

Sélectionnez le texte du document auquel vous voulez appliquer un style CSS.

Placez le curseur dans un paragraphe pour appliquer le style au paragraphe entier.

Si vous sélectionnez une plage de texte au sein d'un même paragraphe, le style CSS n'affectera que cette sélection.

Pour indiquer la balise précise à laquelle le style CSS doit être appliqué, sélectionnez cette balise dans le sélecteur situé dans la partie inférieure gauche de la fenêtre de document.

2

Pour appliquer un style de classe, procédez de l'une des manières suivantes :

•

Dans le panneau Styles CSS (Fenêtre > Styles CSS), sélectionnez le mode Tous, cliquez avec le bouton droit de la souris sur le nom du style à appliquer et choisissez Appliquer dans le menu contextuel.

•

Dans l'inspecteur Propriétés de texte, choisissez le style de classe à appliquer dans le menu déroulant Style.

•

Dans la fenêtre de document, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le texte sélectionné, choisissez Styles CSS dans le menu contextuel, puis choisissez le style à appliquer.

•

Choisissez Texte > Styles CSS, puis sélectionnez le style à appliquer dans le sous-menu.

Suppression d'un style de classe d'une sélection

1

Sélectionnez l'objet ou le texte auquel le style ne doit plus être appliqué.

2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), choisissez Aucun dans le menu déroulant Style.

Changement de nom d'un style de classe

1

Dans le panneau Styles CSS, cliquez avec le bouton droit de la souris sur le style de classe CSS que vous souhaitez renommer et sélectionnez Renommer la classe.

Vous pouvez également renommer une classe en sélectionnant Renommer la classe dans le menu d'options du panneau

Styles CSS.

2

Dans la boîte de dialogue Renommer la classe, assurez-vous que la classe que vous souhaitez renommer est sélectionnée dans le menu déroulant Renommer la classe.

3

Dans la zone de texte Nouveau nom, saisissez le nouveau nom de la nouvelle classe et cliquez sur OK.

DREAMWEAVER CS3


134

Si la classe que vous renommez se trouve dans la section head du document actif, Dreamweaver modifie le nom de la classe ainsi que toutes les instances du nom de la classe se trouvant dans le document actif. Si la classe que vous renommez est un fichier CSS externe, Dreamweaver s'ouvre et modifie le nom de la classe dans le fichier. Dreamweaver lance également une boîte de dialogue Rechercher et remplacer à l'échelle du site pour vous permettre de rechercher toutes les instances de l'ancien nom de la classe pouvant exister dans votre site.

Déplacement des règles CSS

Les fonctions de gestion des feuilles de styles CSS de Dreamweaver vous permettent de déplacer facilement les règles CSS vers des emplacements différents. Vous pouvez déplacer des règles d'un document vers un autre, de la section head d'un document vers une feuille de style externe, entre des fichiers CSS externes, etc.

Remarque :

Si la règle que vous essayez de déplacer est en conflit avec une règle de la feuille de style de destination,

Dreamweaver affiche la boîte de dialogue Il existe déjà une règle de ce nom. Si vous décidez de déplacer la règle en conflit,

Dreamweaver place la règle déplacée à proximité immédiate de la règle avec laquelle elle est en conflit dans la feuille de style de destination.

Voir aussi


Déplacement des règles CSS vers une nouvelle feuille de style

1


•

Dans le panneau Styles CSS, sélectionnez la ou les règles que vous souhaitez déplacer. Cliquez ensuite sur la sélection avec le bouton droit de la souris et choisissez Déplacer les règles CSS dans le menu contextuel. Pour sélectionner plusieurs règles, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur les règles à sélectionner

•

En vue Code, sélectionnez la ou les règles à déplacer. Cliquez ensuite sur la sélection avec le bouton droit de la souris et sélectionnez Styles CSS > Déplacer les règles CSS dans le menu contextuel.

Remarque :

La sélection partielle d'une règle se traduit par le déplacement de l'ensemble de la règle.

2

Dans la boîte de dialogue Déplacer dans une feuille de style externe, sélectionnez l'option de nouvelle feuille de style et cliquez sur OK.

3

Dans la boîte de dialogue Enregistrer la feuille de style sous, entrez un nom pour la nouvelle feuille de style et cliquez sur

Enregistrer.

Lorsque vous cliquez sur Enregistrer, Dreamweaver enregistre une nouvelle feuille de style contenant les règles que vous avez sélectionnées et l'associe au document actif.

Vous pouvez également déplacer des règles à l'aide de la barre d'outils de codage. La barre d'outil de codage est disponible uniquement en mode Code.

Déplacement des règles CSS vers une feuille de style existante

1


• Dans le panneau Styles CSS, sélectionnez la ou les règles que vous souhaitez déplacer. Cliquez ensuite sur la sélection avec le bouton droit de la souris et choisissez Déplacer les règles CSS dans le menu contextuel. Pour sélectionner plusieurs règles, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur les règles à sélectionner

• En vue Code, sélectionnez la ou les règles à déplacer. Cliquez ensuite sur la sélection avec le bouton droit de la souris et sélectionnez Styles CSS > Déplacer les règles CSS dans le menu contextuel.

Remarque :

La sélection partielle d'une règle se traduit par le déplacement de l'ensemble de la règle.

2

Dans la boîte de dialogue Déplacer dans une feuille de style externe, sélectionnez une feuille de style existante dans le menu déroulant ou naviguez jusqu'à une feuille de style existante et cliquez sur OK.

Remarque :

Le menu déroulant affiche toutes les feuilles de style qui sont liées au document actif.

DREAMWEAVER CS3


135

Vous pouvez également déplacer des règles à l'aide de la barre d'outils de codage. La barre d'outil de codage est disponible uniquement en mode Code.

Réorganisation ou déplacement des règles CSS en les faisant glisser

❖

Dans le panneau Styles CSS (mode Tous), sélectionnez une règle et faites-la glisser jusqu'à l'emplacement désiré. Vous pouvez sélectionner des règles et les faire glisser pour les réorganiser à l'intérieur d'une feuille de style, ou déplacer une règle vers une autre feuille de style ou dans la section head du document.

Vous pouvez déplacer plusieurs règles à la fois en appuyant sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur plusieurs règles pour les sélectionner.

Sélection de plusieurs règles avant de les déplacer

❖

Dans le panneau Styles CSS, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur les règles que vous souhaitez sélectionner.

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

L'utilisation de styles intégrés ne constitue pas une meilleure pratique recommandée. Pour que vos styles CSS soient plus clairs et mieux organisés, vous pouvez convertir des styles intégrés en règles CSS résidant dans la section head du document ou dans une feuille de style externe.

1

En mode Code (Affichage > Code), sélectionnez l'ensemble de la balise

<style>

qui contient le style CSS intégré que vous souhaitez convertir.

2

Cliquez dessus avec le bouton droit de la souris et sélectionnez Styles CSS > Convertir en règle les styles CSS intégrés.

3

Dans la boîte de dialogue Convertir style CSS, saisissez un nom de classe pour la nouvelle règle, puis procédez de l'une des façons suivantes :

•

Spécifiez une feuille de style dans laquelle vous souhaitez que la nouvelle règle CSS apparaisse et cliquez sur OK.

•

Sélectionnez la section head du document en tant qu'emplacement dans lequel vous souhaitez que la nouvelle règle CSS apparaisse et cliquez sur OK.

Vous pouvez également convertir des règles à l'aide de la barre d'outils de codage. La barre d'outil de codage est disponible uniquement en mode Code.

Voir aussi


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

Si vous modifiez une feuille de style CSS externe, les changements sont reflétés dans tous les documents liés à cette feuille de style. Vous pouvez exporter les styles CSS trouvés dans un document afin de créer une nouvelle feuille de style CSS, et attacher ou créer un lien vers une feuille de style externe pour appliquer les styles trouvés à cet endroit.

Vous pouvez attacher toute feuille de style de votre création à vos pages ou copier ces feuilles dans votre site. De plus,

Dreamweaver est fourni avec des feuilles de style prédéfinies qui peuvent être automatiquement placées dans votre site et attachées à vos pages.

1

Ouvrez le panneau Styles CSS en procédant de l'une des manières suivantes :

•


•

Appuyez sur les touches Maj + F11.

2

Dans le panneau Styles CSS, cliquez sur le bouton Attacher une feuille de style. Il se trouve dans le coin inférieur droit du panneau.

3


•

Cliquez sur le bouton Parcourir pour rechercher une feuille de style CSS externe.

•

Entrez le chemin de la feuille de style dans le champ Fichier/URL.

DREAMWEAVER CS3


136

4

Dans la zone Ajouter sous, sélectionnez une des options suivantes :

•

Pour créer un lien entre le document actif et une feuille de style externe, choisissez Lien. Cette sélection a pour effet de créer une balise de lien href

dans le code HTML et de référencer l'URL de l'emplacement de la feuille de style publiée.

Microsoft Internet Explorer et Netscape Navigator prennent tous deux en charge cette méthode.

•

Vous ne pouvez pas utiliser une balise de lien pour ajouter une référence d'une feuille de style externe à une autre. Pour imbriquer des feuilles de style, vous devez utiliser une directive d'importation. La plupart des navigateurs reconnaissent

également la directive d'importation dans une page (plutôt que simplement dans des feuilles de style). Il existe quelques différences dans la méthode de résolution des conflits entre propriétés lorsque des règles se chevauchent dans des feuilles de style externes liées et des feuilles importées dans une page. Pour importer une feuille de style externe, plutôt que d'y créer un lien, choisissez Importer.

5

Dans le menu contextuel Médias, spécifiez le média cible de la feuille de style.

Pour plus d'informations sur les feuilles de style dépendantes du média, consultez le site Web du World Wide Web

Consortium à l'adresse www.w3.org/TR/CSS21/media.html

.

6

Cliquez sur le bouton d'aperçu pour vérifier que la feuille de style applique effectivement les styles de votre choix à la page active.

Si les styles appliqués ne sont pas ceux attendus, cliquez sur Annuler pour supprimer la feuille de style. La page retrouve son aspect précédent.

7

Cliquez sur OK.

Voir aussi

« Création d'un document basé sur un fichier d'exemple Dreamweaver » à la page 71

Modification d'une feuille de style CSS

En règle générale, une feuille de style CSS comprend une ou plusieurs règles. Vous pouvez modifier les différentes règles d'une feuille de style CSS à l'aide du panneau Styles CSS, ou bien vous pouvez travailler directement dans la feuille de style CSS.

1

Dans le panneau Styles CSS (Fenêtre > Styles CSS), sélectionnez le mode Tous.

2

Dans le volet Toutes les règles, double-cliquez sur le nom du style à modifier.

3

Dans la fenêtre Document, modifiez la feuille de style en fonction des besoins, puis enregistrez-la.

Mise en forme du code CSS

Vous pouvez définir des préférences qui contrôlent le formatage de votre code CSS chaque fois que vous créez ou modifiez une règle CSS à l'aide de l'interface Dreamweaver. Par exemple, vous pouvez définir des préférences qui placeront toutes les propriétés CSS sur des lignes séparées, insérer une ligne vierge entre les règles CSS, etc.

Lorsque vous définissez des préférences de formatage de code CSS, les préférences que vous sélectionnez sont automatiquement appliquées à toutes les nouvelles règles CSS que vous créez. Toutefois, vous pouvez également appliquer ces préférences manuellement à des documents individuels. Cela peut être utile si vous possédez un document HTML ou

CSS plus ancien ayant besoin d'une mise en forme.

Remarque :

Les préférences de formatage de code CSS s'appliquent uniquement aux règles CSS de feuilles de style externes ou intégrées (mais pas aux styles intégrés).

Voir aussi

« Modification du format du code » à la page 296

Définition des préférences de formatage du code CSS

1

Choisissez Edition > Préférences.

2

Dans la boîte de dialogue Préférences, sélectionnez la catégorie Format du code.

DREAMWEAVER CS3


137

3

En regard de l'option Formatage avancé, cliquez sur le bouton CSS.

4

Dans la boîte de dialogue Options de mise en forme de la source CSS, sélectionnez les options que vous souhaitez appliquer à votre code source CSS. Un aperçu de la feuille de style CSS telle qu'elle est modifiée par les options sélectionnées s'affiche dans la fenêtre Aperçu plus bas.

Mettre les propriétés en retrait avec

Définit la valeur de mise en retrait des propriétés au sein d'une règle. Vous pouvez spécifier des tabulations ou des espaces.

Chaque propriété sur une ligne séparée

Place chaque propriété au sein d'une règle sur une ligne séparée.

Accolade d’ouverture sur une ligne séparée

Place l'accolade d'ouverture pour une règle sur une ligne séparée de celle du sélecteur.

Seulement si plusieurs propriétés

Place les règles à une seule propriété sur la même ligne que le sélecteur.

T ous les sélecteurs d’une règle sur la même ligne

Place tous les sélecteurs d’une règle sur la même ligne.

Ligne vierge pour séparer les règles

Insère une ligne vierge entre chaque règle.

5

Cliquez sur OK.

Remarque :

Le formatage de code CSS hérite également de la préférence Type de saut de ligne que vous avez définie dans la catégorie Format de code de la boîte de dialogue Préférences.

Formatage manuel du code CSS dans une feuille de style CSS

1

Ouvrez une feuille de style CSS

2

Choisissez Commandes > Appliquer le format source.

Les options de formatage que vous définissez dans les préférences de formatage de code CSS s'appliquent à l'ensemble du document. Vous ne pouvez pas formater de sélections individuelles.

Formatage manuel du code CSS intégré

1

Ouvrez une page HTML contenant du code CSS intégré dans la section head du document.

2

Sélectionnez une partie quelconque du code CSS.

3

Choisissez Commandes > Appliquer le format source à la sélection.

Les options de formatage que vous définissez dans les préférences de formatage de code CSS s'appliquent uniquement à l'ensemble des règles CSS de la section Head du document.

Remarque :

Vous pouvez sélectionner Commandes > Appliquer le format source pour formater l'ensemble du document en fonction des préférences de formatage de code que vous avez spécifiées.

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

Les fonctions de vérification de la compatibilité avec les navigateurs vous permettent de rechercher les combinaisons de

HTML et de feuilles de style CSS pouvant présenter des problèmes dans certains navigateurs. Lorsque vous exécutez une vérification de compatibilité avec les navigateurs sur un fichier ouvert, Dreamweaver analyse le fichier et signale tous les problèmes de rendu CSS potentiels dans le panneau Résultats. Une estimation de confiance, illustrée par un quart de cercle, un demi cercle, trois-quarts de cercle ou un cercle plein, indique la probabilité d'occurrence d'un bogue (un quart de cercle plein indique une occurrence possible et un cercle complet plein indique une occurrence très probable). Pour chaque bogue potentiel détecté, Dreamweaver fournit également un lien direct à la documentation relative au bogue sur Adobe CSS

Advisor, un site Web qui détaille les bogues de rendu de navigateur connus et propose des solutions pour les corriger.

Par défaut, la fonction de vérification de la compatibilité avec les navigateurs effectue une vérification par rapport aux

; Internet Explorer (Windows) 6.0 et 7.0

; Internet Explorer (Macintosh) 5.2

; Netscape

Navigator 8.0

; Opera 8.0 et 9.0

; Safari 2.0.

Cette fonction remplace l'ancienne fonction de vérification du navigateur cible, mais conserve la fonctionnalité CSS de cette fonction. Cela signifie que la nouvelle fonction de vérification de compatibilité avec les navigateurs teste le code de vos documents et détermine s'il contient des propriétés ou des valeurs CSS non prises en charge par les navigateurs cibles.

DREAMWEAVER CS3


138

Trois niveaux de problèmes potentiels de prise en charge de navigateur peuvent se présenter :

•

Une erreur signale du code CSS pouvant causer un problème grave et visible au niveau du fonctionnement de certains navigateurs, par exemple, en faisant disparaître une partie d'une page (une erreur désigne par défaut les problèmes de prise en charge de navigateur, de sorte que dans certains cas, du code ayant un effet inconnu peut être signalé comme une erreur).

•

Un avertissement indique une portion de code CSS qui n'est pas prise en charge dans certains navigateurs, mais sans pour autant causer de sérieux problème d'affichage.

•

Un message d'information indique du code qui n'est pas pris en charge dans certains navigateurs, mais n'a pas d'effet visible.

Les vérifications de compatibilité avec les navigateurs n'altèrent en rien le document.

Voir aussi


Exécution d'une vérification de compatibilité avec les navigateurs

❖

Sélectionnez Fichier > Vérifier la page > Compatibilité avec les navigateurs.

Sélectionnez l'élément affecté par un problème détecté.

❖

Double-cliquez sur le problème dans le panneau Résultats.

Accès au problème suivant/précédent détecté dans le code

❖

Dans le menu Vérification de la compatibilité avec les navigateurs de la barre d'outils du document, sélectionnez

Problème suivant ou Problème précédent.

Sélection des navigateurs à faire vérifier par Dreamweaver

1

Dans le panneau Résultats (Fenêtre > Résultats), sélectionnez l'onglet Vérification de la compatibilité avec les navigateurs.

2

Cliquez sur la flèche verte dans le coin supérieur gauche du panneau Résultats, puis choisissez Paramètres.

3

Sélectionnez la case à cocher située en regard des navigateurs à vérifier.

4

Dans le menu déroulant correspondant aux navigateurs sélectionnés, vous devez indiquer la version minimale devant

être vérifiée.

Par exemple, pour vérifier si la restitution CSS peut s'afficher dans Internet Explorer 5.0 et versions ultérieures et dans

Netscape Navigator 7.0 et versions ultérieures, cochez les cases correspondant aux noms de ces navigateurs, puis sélectionnez 5.0 dans le menu déroulant Internet Explorer et

7.0 dans le menu déroulant Netscape.

Exclusion d'un problème de la vérification de compatibilité avec les navigateurs

1

Exécutez une vérification de compatibilité avec les navigateurs.

2

Dans le panneau Résultats, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée

(Macintosh) sur le problème que vous souhaitez exclure des vérifications futures.

3

Cliquez sur Ignorer le problème dans le menu contextuel.

DREAMWEAVER CS3


139

Modification de la liste des problèmes ignorés

1


2

Cliquez sur la flèche verte dans le coin supérieur gauche du panneau Résultats, puis choisissez Modifier la liste des problèmes ignorés.

3

Dans le fichier Exceptions.xml, recherchez le problème que vous souhaitez supprimer de la liste des problèmes ignorés et supprimez-le.

4

Enregistrez et fermez le fichier Exceptions.xml.

Sauvegarde d'un rapport de vérification de compatibilité avec les navigateurs

1


2

Cliquez sur le bouton Enregistrer le rapport dans le côté gauche du panneau Résultats.

Amenez le pointeur de la souris sur les boutons du panneau Résultats pour afficher les info-bulles relatives à chaque bouton.

Remarque :

Les rapports ne sont pas enregistrés automatiquement ; si vous souhaitez conserver une copie d'un rapport, vous devez suivre la procédure ci-dessus pour l'enregistrer.

Affichage d'un rapport de vérification de compatibilité avec les navigateurs dans un navigateur

1


2

Cliquez sur le bouton Parcourir le rapport dans le côté gauche du panneau Résultats.

Amenez le pointeur de la souris sur les boutons du panneau Résultats pour afficher les info-bulles relatives à chaque bouton.

O uverture du site Web Adobe CSS Advisor

1


2

Cliquez sur le texte du lien situé dans l'angle inférieur droit du panneau.

Utilisation des feuilles de style à la conception

Les feuilles de style à la conception permettent d'afficher ou de masquer la conception appliquée par une feuille de style CSS lorsque vous travaillez dans un document Dreamweaver. Vous pouvez par exemple utiliser cette fonction pour inclure ou exclure l'effet d'une feuille de style Macintosh ou Windows pendant la création d'une page.

Les feuilles de style à la conception s'appliquent uniquement lorsque vous travaillez dans un document ; lorsque la page est affichée dans une fenêtre de navigateur, seuls les styles réellement attachés au document ou qui y sont incorporés apparaissent.

Remarque :

Vous pouvez également activer ou désactiver des styles pour l'ensemble d'une page à l'aide de la barre d'outils

Intervertir l'affichage des Styles CSS (le plus à droite) fonctionne indépendamment des autres boutons de support de la barre d'outils.

Pour utiliser une feuille de style à la conception, procédez comme suit.

1

Ouvrez la boîte de dialogue Feuilles de style à la conception en procédant de l'une des manières suivantes :

•

Cliquez avec le bouton droit de la souris dans le panneau Styles CSS et choisissez Conception dans le menu contextuel.

•

Choisissez Texte > Styles CSS > Conception.

2

Dans la boîte de dialogue, définissez les options d'affichage ou de masquage de la feuille de style sélectionnée :

•

Pour afficher une feuille de style CSS à la conception, cliquez sur le bouton plus (+) situé au-dessus d'Afficher à la conception uniquement, puis recherchez la feuille de style CSS à afficher dans la boîte de dialogue Sélectionner une feuille de style.

DREAMWEAVER CS3


140

•

Pour masquer une feuille de style CSS, cliquez sur le bouton plus (+) situé au-dessus de Masquer à la conception, puis recherchez la feuille de style CSS à masquer dans la boîte de dialogue Sélectionner une feuille de style.

•

Pour supprimer une feuille de style de l'une ou l'autre des listes, cliquez sur la feuille de style que vous voulez supprimer, puis cliquez sur le bouton moins (–) approprié.

3

Cliquez sur

Voir aussi

« Présentation de la barre d'outils Rendu de style » à la page 20

Utilisation des exemples de feuilles de style de Dreamweaver

Dreamweaver est fourni avec des exemples de feuilles de style que vous pouvez appliquer à vos pages ou que vous pouvez utiliser comme points de départ pour créer vos propres styles.

1

Ouvrez le panneau Styles CSS en procédant de l'une des manières suivantes :

•


•

Appuyez sur les touches Maj+F11.

2

Dans le panneau Styles CSS, cliquez sur le bouton Attacher une feuille de style. (Dans le coin inférieur droit du panneau.)

3

Dans la boîte de dialogue Ajouter une feuille de style externe, cliquez sur Exemples de feuilles de style.

4

Dans la boîte de dialogue Exemples de feuilles de style, sélectionnez une feuille de style dans la liste déroulante.

Lorsque vous sélectionnez des feuilles de style dans la zone de liste, le formatage du texte et des couleurs s'affiche dans le panneau d'aperçu.

5

Cliquez sur le bouton Aperçu pour appliquer la feuille de style et vérifier que le style de votre choix est bien appliqué à la page active.

Si les styles appliqués ne sont pas ceux que vous escomptiez, sélectionnez une autre feuille de style dans la liste et cliquez sur le bouton Aperçu pour visualiser les styles correspondants.

6

Par défaut, Dreamweaver enregistre la feuille de style dans un dossier nommé CSS au niveau juste en dessous de la racine du site défini pour votre page. Si ce dossier n'existe pas, Dreamweaver le crée. Vous pouvez enregistrer le fichier dans un autre emplacement en cliquant sur le bouton Parcourir pour rechercher un autre dossier.

7

Lorsque vous trouvez une feuille de style dont les règles correspondent à vos critères, cliquez sur OK.

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

Les utilisateurs de Adobe Contribute ne peuvent pas apporter de modifications à une feuille de style CSS. Pour modifier une feuille de style pour un site Contribute, utilisez Dreamweaver.

1

Utilisez les outils de modification de feuille de style présents dans Dreamweaver pour modifier les feuilles de style.

2

Avertissez les utilisateurs de Contribute qui travaillent à la publication des pages que vous utilisez une feuille de style définie. Modifiez ensuite à nouveau ces pages pour voir la nouvelle feuille de style.

Les facteurs suivants doivent être pris en compte lors de la mise à jour de feuilles de style pour un site Contribute :

• Si vous apportez des modifications à une feuille de style alors qu'un utilisateur de Contribute modifie une page qui utilise cette feuille de style, l'utilisateur ne pourra pas observer les changements apportés à la feuille de style tant que la page ne sera pas publiée.

• Si vous supprimez un style d'une feuille de style, le nom du style en question n'est pas supprimé des pages qui utilisent cette feuille, mais, puisque le style n'existe plus, il n'est pas appliqué à la page comme l'utilisateur de Contribute pourrait s'y attendre. Ainsi, si un utilisateur vous déclare que rien ne se passe lorsque celui-ci applique un style donné, il est possible que le style ait été supprimé de la feuille de style.

DREAMWEAVER CS3


141

Mise en forme des pages avec CSS

A propos de la mise en page CSS

Une mise en page CSS utilise le format de feuilles de style CSS, au lieu de tables ou de cadres HTML traditionnels, pour organiser le contenu d'une page Web. Les éléments de base de la mise en forme CSS est la balise div : il s'agit d'une balise

HTML qui, la plupart du temps, sert de conteneur pour du texte, des images et d'autres éléments de page. Lorsque vous créez une mise en forme CSS, vous placez des balises div dans la page, leur ajoutez du contenu et les positionnez en différents endroits. A la différence des cellules de tableau, qui ne peuvent exister qu'à l'intérieur de lignes et de colonnes d'un tableau, les balises div peut figurer n'importe où sur une page Web. Vous pouvez positionner des balises div de façon absolue (en indiquant des coordonnées x et y) ou de façon relative (en spécifiant leur distance par rapport à d'autres

éléments de page).

La création de mises en forme CSS entièrement nouvelles peut s'avérer difficile car il existe de très nombreux moyens de procéder. Vous pouvez créer une mise en forme CSS simple à deux colonnes en définissant des éléments flottants, des marges, des remplissages et d'autres propriétés CSS dans un nombre de combinaisons quasi illimité. En outre, le problème de restitution sur différents types de navigateurs entraîne un affichage aléatoire de certaines mises en forme CSS qui sont correctement ou incorrectement restituées en fonction du navigateur utilisé. Dreamweaver vous permet de créer facilement des pages à l'aide de mises en forme CSS en fournissant plus de 30 mises en forme prédéfinies qui fonctionnent sur différents types de navigateurs.

L'utilisation de mises en forme CSS prédéfinies fournies avec Dreamweaver constitue la façon la plus simple de créer une page avec une mise en forme, mais vous pouvez également créer des mises en forme CSS à l'aide d'éléments à positionnement absolu (éléments PA) de Dreamweaver. Dans Dreamweaver, un élément PA est un élément de page HTML

(plus précisément, une balise div

ou toute autre balise) auquel une position absolue est attribuée. Toutefois, du fait de leur positionnement absolu, les éléments PA de Dreamweaver présentent l'inconvénient de ne jamais adapter leur position à la page en fonction de la taille de la fenêtre du navigateur.

Si vous êtes un utilisateur chevronné, vous pouvez également insérer des balises div

manuellement et leur appliquer des styles de positionnement CSS pour créer des mises en page.

Pour accéder à un didacticiel relatif à la création de mises en page CSS, consultez le site Web de Adobe à l'adresse www.adobe.com/go/vid0155_fr .

Voir aussi

« Utilisation des balises Div » à la page 157

A propos de la structure de mise en page CSS

Avant de lire cette section, vous devez vous être familiarisé avec les concepts CSS de base.

Les éléments de base de la mise en forme CSS est la balise div : il s'agit d'une balise HTML qui, la plupart du temps, sert de conteneur pour du texte, des images et d'autres éléments de page. L'exemple ci-dessous montre une page HTML qui contient trois balises div distinctes : une balise container de grande taille, et deux autres balises (une balise sidebar et une balise main content) situées à l'intérieur de la balise container.

DREAMWEAVER CS3


142

B

A

C

A.

Div Container

B.

Div sidebar

C.

Div Main Content

Voici le code correspondant à ces trois balises div dans le code HTML :



<div id="container">



<div id="sidebar">

<h3>Sidebar Content</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>

</div>



<div id="mainContent">

<h1> Main Content </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p>

<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

<h2>H2 level heading </h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>

</div>

</div>

Dans l'exemple ci-dessus, aucun style n'est associé aux balises div. Si aucune règle CSS n'est définie, chaque balise div et son contenu prend un emplacement par défaut sur la page. Toutefois, si chaque balise div possède un ID unique (comme dans l'exemple ci-dessus), vous pouvez utiliser ces identificateurs pour créer des règles CSS qui, une fois appliquées, modifient le style et le positionnement des balises div.

La règle CSS suivante, qui peut résider dans la section head du document ou dans un fichier CSS externe, crée des règles de style pour la première balise div (container) de la page :

#container { width: 780px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left;

}

La règle #container applique un style à la balise div container qui lui donne une largeur de 780 pixels, un arrière-plan blanc, aucune marge (depuis la gauche de la page), une bordure noire continue de 1 pixel et un texte aligné à gauche. Les résultats

DREAMWEAVER CS3


143

A B

C

Balise div Container, 780 pixels, pas de marge

A.

Texte aligné à gauche

B.

Arrière-plan blanc

C.

Bordure noire pleine d'un pixel

La règle CSS suivante crée des règles de style pour la balise div sidebar :

#sidebar { float: left; width: 200px; background: #EBEBEB; padding: 15px 10px 15px 20px;

}

La règle #sidebar applique un style à la balise div sidebar qui lui donne une largeur de 200 pixels, un arrière-plan gris, un remplissage haut et bas de 15 pixels, un remplissage droite de 10 pixels et un remplissage gauche de 20 pixels. En outre, la règle positionne la balise div sidebar avec float: left, propriété qui pousse la balise div sidebar vers le côté gauche de la balise

A

B

B

Div sidebar, flottante à gache

A.

Largeur de 200 pixels

B.

Remplissage haut et bas de 15 pixels

Finalement, la règle CSS pour la balise div container principale termine la mise en forme :

#mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px;

}

La règle #mainContent applique un style à la balise div main qui lui donne une marge gauche de 250 pixels, ce qui correspond à un espace de 250 pixels entre le côté gauche de la balise div container et le côté gauche de la balise div main

DREAMWEAVER CS3


144

A B

C

Div main content, marge gauche de 250 pixels

A.

remplissage gauche de 20 pixels

B.

remplissage droit de 20 pixels

C.

remplissage bas de 20 pixels

Le code complet ressemble à ce qui suit :

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

#container { width: 780px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left;

}

#sidebar { float: left; width: 200px; background: #EBEBEB; padding: 15px 10px 15px 20px;

}

#mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px;

}

</style>

</head>

<body>



<div id="container">



<div id="sidebar">

<h3>Sidebar Content</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>

</div>



<div id="mainContent">

<h1> Main Content </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p>

<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

<h2>H2 level heading </h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>

</div>

</div>

</body>

DREAMWEAVER CS3


145

Remarque :

L'exemple code ci-dessus est une version simplifiée du code qui crée la mise en forme à deux colonnes avec encadré

à gauche fixe lorsque vous créez un nouveau document à l'aide des mises en formes prédéfinies fournies avec Dreamweaver.

Voir aussi


Création d'une page avec une mise en page CSS

Lors de la création d'une nouvelle page dans Dreamweaver, vous pouvez en créer une qui contient déjà une mise en forme mises en forme CSS et les ajouter au dossier de configuration pour qu'elles figurent parmi les choix de mise en forme dans la boîte de dialogue Nouveau Document.

Macintosh) 1.0, 1.5 et 2.0, Internet Explorer (Windows) 5.5, 6.0, 7.0, Opera (Windows et Macintosh) 8.0, 9.0, et Safari 2.0.

Voir aussi

« Création d'une page vierge » à la page 67


« Etablissement d'un lien vers une feuille de style CSS externe » à la page 135

Création d'une page avec une mise en page CSS

1


2

Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Modèle vierge. Il s'agit de la sélection par défaut.

3

Pour Type de page, sélectionnez le type de page à créer.

Remarque :

Vous devez sélectionner un type de page HTML pour la mise en forme. Par exemple, vous pouvez sélectionner

HTML, ColdFusion®, JSP, etc. Vous ne pouvez pas créer de page ActionScript™, CSS, Library Item, JavaScript, XML, XSLT ou

ColdFusion Component avec une mise en forme CSS. Les types de page de la catégorie Autre dans la boîte de dialogue Nouveau document ne peuvent pas non plus inclure de mises en page CSS.

4

Pour Mise en forme, sélectionnez la mise en forme CSS à utiliser. Vous pouvez choisir parmi plus de 30 mises en forme différentes. La fenêtre Aperçu montre la mise en forme sélectionnée et en donne une brève description.

Fixe


Elastique


Liquide


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.

6

Sélectionnez un emplacement pour le fichier CSS de la mise en forme dans le menu déroulant CSS de mise en forme dans.




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.

DREAMWEAVER CS3


146


Permet d'indiquer un fichier CSS existant qui contient déjà les règles CSS requises pour la mise en forme. Cette option est particulièrement utile si vous voulez utiliser la même mise en forme CSS (les règles CSS figurant dans un fichier) dans plusieurs documents.

7


•

Si vous avez sélectionné Ajouter à l'en-tête dans le menu déroulant CSS de mise en forme dans (l'option par défaut), cliquez sur Créer.

•

Si vous avez sélectionné Créer un nouveau fichier dans le menu déroulant CSS de mise en forme, cliquez sur Créer, puis spécifiez un nouveau nom pour le nouveau fichier externe dans la boîte de dialogue Enregistrer la feuille de style sous.

•

Si vous avez sélectionné Lier au fichier existant dans le menu déroulant CSS de mise en forme dans, ajoutez le fichier externe dans la zone de texte Lier le fichier CSS en cliquant sur l'icône d'ajout de feuille de style, en renseignant la boîte de dialogue Associer feuille de style externe et en cliquant sur OK. Une fois que vous avez terminé, cliquez sur Créer dans la boîte de dialogue Nouveau document.

Remarque :

Lorsque vous sélectionnez l'option Lier au fichier existant, le fichier que vous spécifiez doit déjà contenir les règles correspondant au fichier CSS.

Lorsque vous placez le CSS de mise en forme dans un nouveau fichier ou lorsque vous le liez à un fichier existant,

Dreamweaver lie immédiatement le fichier à la page HTML que vous créez.

Remarque :

Les Commentaires conditionnels pour Internet Explorer, qui permettent de contourner les problèmes de rendu dans IE, restent incorporés dans la section head du nouveau document de mise en forme CSS, même si vous sélectionnez

Nouveau fichier externe ou Fichier externe existant en tant qu'emplacement pour votre fichier CSS de mise en forme;

8



Ajout de mises en forme CSS personnalisées à la liste de choix

1

Créez une page HTML contenant la mise en forme CSS que vous souhaitez ajouter à la liste de choix de la boîte de dialogue

Nouveau document Le fichier CSS correspondant à la mise en forme doit résider dans la section head de la page HTML.

Pour uniformiser votre mise en forme CSS personnalisée avec les autres mises en formes fournies avec Dreamweaver, vous devez enregistrer votre fichier HTML avec une extension .htm.

2

Ajoutez la page HTML au dossier Adobe Dreamweaver CS3\Configuration\BuiltIn\Layouts.

3

(Facultatif) Ajoutez une image d'aperçu de votre mise en forme (par exemple, un fichier .gif ou .png) au dossier Adobe

Dreamweaver CS3\Configuration\BuiltIn\Layouts. Les images par défaut fournies avec Dreamweaver sont des fichiers

PNG de 227 pixels de large x 193 pixels de haut.

Donnez à votre image d'aperçu le même nom de fichier que votre fichier de façon à pouvoir l'identifier facilement. Par exemple, si votre fichier HTML est nommé myCustomLayout.htm, appelez votre image d'aperçu myCustomLayout.png.

4

(Facultatif) Créez un fichier de notes pour votre mise en forme personnalisée en ouvrant le dossier Adobe Dreamweaver

CS3\Configuration\BuiltIn\Layouts\_notes, en copiant et en collant les fichiers de notes existants dans le même dossier, et en renommant la copie en fonction de votre mise en forme personnalisée. Par exemple, vous pouvez copier le fichier oneColElsCtr.htm.mno et le renommer myCustomLayout.htm.mno.

5

(Facultatif) Après avoir créé un fichier de notes pour votre mise en forme personnalisée, vous pouvez ouvrir le fichier et spécifier le nom de la mise en forme, sa description et une image d'aperçu.

A propos des éléments PA dans Dreamweaver

Un élément PA (élément à positionnement absolu) est un élément de page HTML (plus précisément, une balise div

ou toute autre balise) auquel une position absolue est attribuée. Les éléments PA peuvent comporter du texte, des images ou tout autre contenu à placer au sein d'un document HTML.

DREAMWEAVER CS3


147

Dreamweaver vous permet d'effectuer la mise en forme d'une page à l'aide d'éléments PA. Vous pouvez placer les éléments

PA devant ou derrière d'autres éléments PA, masquer certains d'entre eux et en montrer d'autres ou encore déplacer les

éléments PA à travers l'écran. Vous pouvez placer une image d'arrière-plan dans un élément PA, puis placer un deuxième

élément PA contenant du texte avec un arrière-plan transparent devant ce dernier.

Les éléments PA sont généralement des balises div PA. (Ce sont les types d'éléments PA que Dreamweaver insère par défaut.

Mais n'oubliez pas que vous pouvez classifier tout élément HTML (par exemple, une image) en tant qu'élément PA en lui affectant une position absolue. Tous les éléments PA (et pas uniquement les balises div PA) s'affichent dans le panneau

Eléments PA.

Code H

T

ML pour éléments Div PA

Dreamweaver crée des éléments PA en utilisant la balise div

. Lorsque vous créez un élément PA à l'aide de l'outil Tracer un div pour un élément PA, Dreamweaver insère une balise div

dans le document et attribue à la balise div une valeur ID

(DivAP1 par défaut au premier div que vous tracez, DivAP2, au deuxième div que vous tracez, etc.). Vous pouvez renommer la div PA à votre guise par la suite au moyen du panneau Eléments PA ou de l'inspecteur Propriétés. Dreamweaver utilise

également des styles CSS intégrés dans la section head du document pour positionner la balise div PA et pour lui affecter ses dimensions exactes.

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Sample AP Div Page</title>

<style type="text/css">



}

</style>

</head> top:67px; width:421px; height:188px; z-index:1;

<body>

<div id="apDiv1">

</div>

</body>

</html>

Vous pouvez définir les propriétés des balises div PA (ou tout élément PA) de votre page, y compris les coordonnées x et y, l'index z (également appelé ordre de superposition) et la visibilité.

Insertion d'une balise div PA

Dreamweaver vous permet de créer facilement des balises div PA sur votre page et de les positionner. Vous pouvez

également créer des balises div PA imbriquées.

Lorsque vous insérez une div PA, Dreamweaver affiche par défaut sa bordure en mode Création et met le bloc en surbrillance lorsque vous passez le pointeur dessus. Vous pouvez désactiver l'assistance visuelle qui affiche les contours des divs PA (ou de tout élément PA) en désactivant Contours des éléments PA et Contours en feuille CSS dans le menu

Affichage > Assistances visuelles. Vous pouvez également activer les arrière-plans et le modèle de boîte pour les éléments

PA en guise d'aide visuelle lors de la conception.

Une fois une balise div PA créée, vous pouvez y ajouter du contenu en plaçant simplement votre point d'insertion dessus, puis en ajoutant le contenu comme vous le feriez pour celui d'une page.

DREAMWEAVER CS3


148

Voir aussi

« Modification de la couleur de surbrillance des balises div » à la page 159

« Visualisation des blocs de mise en forme CSS » à la page 159

T raçage d'une seule balise div PA ou de plusieurs balises div PA à la suite

1

Dans la catégorie Mise en forme de la barre Insertion, cliquez sur le bouton Tracer un div pour un élément PA .

2

Dans la fenêtre de création du document, procédez de l'une des manières suivantes :

•

Faites glisser le pointeur pour dessiner une seule div PA.

•

Maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée pour dessiner plusieurs divs PA à la suite.

Vous pouvez continuer à tracer des divs PA tant que vous n'avez pas relâché les touches Ctrl ou Commande.

Insertion d'une div PA à un endroit précis du document

❖

Placez le point d'insertion dans la fenêtre de document, puis choisissez Insertion > Objets mise en forme > Div PA.

Remarque :

La balise associée à la div PA est placée à l'emplacement sur lequel vous avez cliqué dans la fenêtre de document.

Le rendu visuel de la balise div PA est donc susceptible d'affecter les autres éléments de page (le texte par exemple) qui l'entourent.

Placement du point d'insertion dans une div PA

❖

Cliquez n'importe où à l'intérieur des bordures de la balise div PA.

Le contour de la div PA est en surbrillance et la poignée de sélection apparaît, mais la balise elle-même n'est pas sélectionnée.

Affichage des bordures d'une div PA

❖

Choisissez Affichage > Assistances visuelles, puis sélectionnez Contours des divs PA ou Contours en feuille CSS.

Remarque :

La sélection simultanée des deux options a le même effet.

Masquage des bordures d'une div PA

❖

Choisissez Affichage > Assistances visuelles, puis désélectionnez Contours des divs PA et Contours en feuille CSS.

Utilisation de divs PA imbriquées

Une div PA imbriquée est une balise div PA dont le code est contenu à l'intérieur des balises d'une autre div PA. Par exemple, le code suivant montre deux div PA qui ne sont pas imbriquées, et deux divs PA qui le sont :

<div id="apDiv1"></div>


<div id="apDiv3">


</div>

La représentation graphique de ces deux groupes de balises div PA pourrait ressembler à ce qui suit :

DREAMWEAVER CS3


149

Dans le premier groupe de balises div, une div se trouve au dessus de l'autre dans la page. Dans le deuxième groupe, la balise div apDiv4 se trouve effectivement à l'intérieur de la balise div apDiv3. (Vous pouvez modifier l'ordre de superposition des divs PA dans le panneau Eléments PA.)

L'imbrication est souvent utilisée pour regrouper des balises div PA. Une balise div PA imbriquée se déplace avec sa div PA parent et peut être configurée pour hériter de la visibilité de son parent.

Vous pouvez activer l'option Imbrication si vous voulez que les divs PA que vous dessinez à l'intérieur d'autres div PA soient automatiquement imbriquées. Pour créer une div PA à l'intérieur ou par dessus une autre div PA, vous devez aussi désélectionner l'option Empêcher les chevauchements.

Dessin d'une div PA imbriquée

1

Assurez-vous que l'option Empêcher les chevauchements est désélectionnée dans le panneau Eléments PA (Fenêtre >

Eléments PA).

2

Dans la catégorie Mise en forme de la barre Insertion, cliquez sur le bouton Tracer un div pour un élément PA .

3

Dans la fenêtre de création du document, dessinez une balise div PA à l'intérieur d'une div PA existante en faisant glisser la souris.

Si l'option Imbrication est désactivée dans les préférences des éléments PA, maintenez la touche Alt (Windows) ou Option

(Macintosh) enfoncée et faites glisser une div PA pour l'imbriquer dans une div PA existante.

Les divs PA imbriquées peuvent s'afficher différemment suivant les navigateurs. Lorsque vous créez des divs PA imbriquées, contrôlez régulièrement leur affichage dans différents navigateurs au cours du processus de création.

Insertion d'une div PA imbriquée

1

Assurez-vous que l'option Empêcher les chevauchements est désélectionnée.

2

Placez le point d'insertion à l'intérieur d'une div PA existante dans la fenêtre de création du document, puis choisissez

Insertion > Objets mise en forme > Div PA.

Imbrication d'un élément PA existant dans un autre à l'aide du panneau Eléments PA

1

Sélectionnez Fenêtre > Eléments PA pour ouvrir le panneau Eléments PA.

2

Sélectionnez un élément PA dans le panneau Eléments PA, puis maintenez la touche Ctrl (Windows) ou Commande

(Macintosh) enfoncée tout en faisant glisser la souris pour diriger l'élément PA vers l'élément PA cible, dans le panneau

Eléments PA.

3

Relâchez le bouton de la souris lorsque le nom de l'élément PA cible est mis en surbrillance.

Imbrication des balises div PA automatiquement lorsque vous dessinez une div PA à l'intérieur d'une autre div PA

❖

Sélectionnez l'option Imbrication dans les préférences des éléments PA.

Affichage ou définition des préférences des éléments PA

Utilisez la catégorie Eléments PA dans la boîte de dialogue Préférences pour indiquer les paramètres par défaut des nouveaux éléments PA créés.

1


2

Sélectionnez la catégorie Eléments PA dans la liste à gauche, sélectionnez des éléments PA et définissez les préférences suivantes, puis cliquez sur OK.

Visibilité

Détermine si les éléments PA sont visibles par défaut. Les options sont par défaut, hériter, visible et masqué.

Largeur et Hauteur

Indiquez une largeur et une hauteur par défaut (en pixels) pour les éléments PA que vous créez à l'aide du menu Insertion > Objets mise en forme > div PA.


couleur.

Spécifie une couleur d’arrière-plan par défaut. Sélectionnez une couleur à l'aide du sélecteur de

DREAMWEAVER CS3


150


sur votre ordinateur.

Spécifie une image d’arrière-plan par défaut. Cliquez sur Parcourir pour trouver le fichier de l'image

Imbrication: Imbriquer en cas de création dans une div PA

Indique si une div PA que vous dessinez à partir d'un point situé dans les limites d'une div PA existante doit être une div PA imbriquée. Maintenez la touche Alt (Windows) ou Option

(Macintosh) enfoncée pour modifier temporairement ce paramètre lorsque vous dessinez une div PA.

Compatibilité avec

N etscape 4: Ajouter la correction pour le redimensionnement des calques si créés dans un conteneur PA

Insère le code JavaScript dans la section head du document pour résoudre un problème touchant les navigateurs Netscape 4

(les éléments PA perdent leur emplacement lorsqu'un visiteur redimensionne la fenêtre du navigateur).

JavaScript contraint la page à se recharger chaque fois que la fenêtre du navigateur est redimensionnée, replaçant ainsi les

éléments PA à la bonne position. Vous pouvez ajouter ou supprimer ce code JavaScript manuellement en sélectionnant

Commandes > Ajouter/Supprimer correction pour le redimensionnement dans Netscape.

Affichage ou définition des propriétés pour un seul élément PA

Lorsque vous sélectionnez un élément PA, l'inspecteur Propriétés affiche les propriétés de cet élément.

1

Sélectionnez un élément PA.

2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur la flèche d'agrandissement située dans le coin inférieur droit (si l'inspecteur est affiché en mode réduit) pour visualiser l'ensemble des propriétés.

3


Elément CSS-P

Spécifie un identificateur pour l'élément PA sélectionné. Cet ID identifie l'élément PA dans le panneau

Eléments PA et dans le code JavaScript.

Seuls les caractères alphanumériques sont acceptés ; n'utilisez aucun caractère spécial comme les espaces, les traits d'union, les barres obliques ou les points. Chaque élément PA doit avoir un ID unique.

Remarque :

L'inspecteur Propriétés CSS-P présente les mêmes options pour les éléments à positionnement relatif.

G et S (gauche et haut)

Indiquez la position du coin supérieur gauche de l'élément PA par rapport au coin supérieur gauche de la page, ou de l'élément PA parent s'il est imbriqué.

L et H

Indiquez la largeur et la hauteur de l'élément PA.

Remarque :

Si le contenu d'un élément PA dépasse la taille indiquée, le bord inférieur de cet élément PA (tel qu'il apparaît en mode Création dans Dreamweaver) s'étire proportionnellement. (Le bord inférieur ne s'étend pas lorsque l'élément PA apparaît dans un navigateur, sauf si la propriété Débordement est définie sur Visible).

L'unité par défaut de la position et de la taille est le pixel (px). Vous pouvez également choisir les unités suivantes : pc (picas), pt (points), in (pouces), mm (millimètres), cm (centimètres) ou% (pourcentage de la valeur équivalente de l'élément PA parent). Les abréviations doivent suivre la valeur sans espace : par exemple, 3mm.

Index Z

Détermine l'index z ou ordre de superposition, de l'élément PA.

Dans un navigateur, les éléments PA portant les valeurs les plus élevées se superposent aux éléments PA portant les valeurs moins élevées. Les valeurs peuvent être positives ou négatives. Il est plus facile de modifier l'ordre de superposition des

éléments PA à l'aide du panneau Eléments PA qu'en saisissant des valeurs d'index z spécifiques.

Vis

Indique si l'élément PA est initialement visible ou non. Faites votre choix parmi les options suivantes :

•

Aucune propriété de visibilité n'est définie par défaut. Lorsque aucune visibilité n'est précisée, la plupart des navigateurs choisissent Hériter.

•

L'option Hériter utilise la propriété de visibilité de l'objet parent de l'élément PA.

DREAMWEAVER CS3


151

•

Visible affiche le contenu de l'élément PA, quelle que soit la valeur du parent.

•

Masqué dissimule le contenu de l'élément PA, quelle que soit la valeur du parent.

Utilisez un langage de script, par exemple JavaScript, pour contrôler la propriété de visibilité et afficher le contenu des

éléments PA de façon dynamique.

Image ar-pl

Spécifie une image d'arrière-plan pour l'élément PA.

Cliquez sur l'icône du dossier à parcourir et sélectionnez un fichier d'image.

Couleur d'ar-pl.

Spécifie une couleur d'arrière-plan pour l'élément PA.

Laissez cette option vide pour spécifier un arrière-plan transparent.

Classe

Indique la classe CSS utilisée pour créer l'élément PA.

Débordement

Contrôle la manière dont les éléments PA apparaissent dans un navigateur lorsque le contenu dépasse la taille spécifiée de l'élément PA. proportionnellement. Masqué signifie que le contenu supplémentaire ne sera pas affiché dans le navigateur. Défilement indique que le navigateur devra ajouter des barres de défilement dans l'élément PA, qu'elles soient nécessaires ou non. Auto entraîne l'affichage des barres de défilement de l'élément PA dans le navigateur uniquement lorsque cela est nécessaire

(c'est-à-dire lorsque le contenu de l'élément PA dépasse ses limites).

Remarque :

La prise en charge de l'option

Débordement

est inégale suivant les navigateurs.

Détourage

Définit la zone visible de l'élément PA.

Indiquez les coordonnées gauche, haut, droite et bas pour définir un rectangle dans le champ des coordonnées de l'élément soit visible. Par exemple, pour rendre le contenu d'un élément PA invisible à l'exception d'un rectangle visible d'une largeur de 50 pixels et d'une hauteur de 75 pixels dans le coin supérieur gauche de l'élément PA, définissez G sur 0, S sur 0, D sur

50 et B sur 75.

Remarque :

Bien que les feuilles de style en cascade utilisent des termes différents pour le détourage, Dreamweaver interprète le détourage de la même manière que la plupart des navigateurs.

4

Si vous avez tapé une valeur dans une zone de texte, appuyez sur Tab ou Entrée (Windows) ou Retour (Macintosh) pour l'appliquer.

Affichage ou définition des propriétés pour plusieurs éléments PA

Lorsque vous sélectionnez plusieurs éléments PA, l'inspecteur Propriétés affiche les propriétés du texte et un sous-ensemble de propriétés d'élément PA standard, ce qui vous permet de modifier plusieurs éléments PA simultanément.

Sélectionner plusieurs éléments PA

❖

Sélectionnez les éléments PA tout en maintenant la touche Maj enfoncée.

Affichage et définition des propriétés pour plusieurs éléments PA

1

Sélectionnez plusieurs éléments PA.

2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur la flèche d'agrandissement située dans le coin inférieur droit (si l'inspecteur est affiché en mode réduit) pour visualiser l'ensemble des propriétés.

DREAMWEAVER CS3


152

3

Définissez les propriétés suivantes pour plusieurs éléments PA

G et S (gauche et haut)

Indiquez la position du coin supérieur gauche des éléments PA par rapport au coin supérieur gauche de la page, ou de l'élément PA parent s'ils sont imbriqués.

L et H

Indiquez la largeur et la hauteur des éléments PA.

Remarque :

Si le contenu de l'un des éléments PA dépasse la taille indiquée, le bord inférieur de cet élément PA (tel qu'il apparaît en mode Création dans Dreamweaver) s'étire proportionnellement. (Le bord inférieur ne s'étend pas lorsque l'élément

PA apparaît dans un navigateur, sauf si la propriété Débordement est définie sur Visible).

L'unité par défaut de la position et de la taille est le pixel (px). Vous pouvez également choisir les unités suivantes : pc (picas), pt (points), in (pouces), mm (millimètres), cm (centimètres) ou% (pourcentage de la valeur équivalente de l'élément PA parent). Les abréviations doivent suivre la valeur sans espace : par exemple, 3mm.

Vis

Indique si les éléments PA sont initialement visibles ou non. Faites votre choix parmi les options suivantes :

•

Aucune propriété de visibilité n'est définie par défaut. Lorsque aucune visibilité n'est précisée, la plupart des navigateurs choisissent Hériter.

•

L'option Hériter utilise la propriété de visibilité de l'objet parent des éléments PA.

•

Visible affiche le contenu des éléments PA, quelle que soit la valeur du parent.

•

Masqué dissimule le contenu de l'élément PA, quelle que soit la valeur du parent.

Utilisez un langage de script, par exemple JavaScript, pour contrôler la propriété de visibilité et afficher le contenu des

éléments PA de façon dynamique.

Balise

Indique la balise HTML utilisée pour définir les éléments PA.

Image ar-pl

Spécifie une image d'arrière-plan pour les éléments PA.

Cliquez sur l'icône du dossier à parcourir et sélectionnez un fichier d'image.


Spécifie une couleur d'arrière-plan pour les éléments PA. Laissez cette option vide pour spécifier un arrière-plan transparent.

4


Présentation du panneau Eléments PA

Vous utilisez le panneau Eléments PA (Fenêtre > Eléments PA) pour gérer les éléments PA de votre document. Utilisez le panneau Eléments PA pour empêcher les éléments PA de se chevaucher, pour en modifier la visibilité, pour les imbriquer ou les superposer et pour en sélectionner un ou plusieurs.

Remarque :

Dans Dreamweaver, un élément PA est un élément de page HTML (plus précisément, une balise

div

ou toute autre balise) auquel une position absolue est attribuée. Le panneau Eléments PA n'affiche pas les éléments à positionnement relatif.

Les éléments PA sont affichés sous la forme d'une liste de noms, dans l'ordre de l'index z ; le premier élément PA créé (doté d'un index z de 1) apparaît par défaut en bas de la liste et le dernier élément PA créé apparaît en haut de la liste. Vous pouvez toutefois modifier l'index z d'un élément PA en changeant sa place dans l'ordre de superposition. Par exemple, si vous créez huit éléments PA et souhaitez déplacer le quatrième élément PA en haut de la liste, vous pouvez lui affecter un index z supérieur à celui des autres éléments PA.

Sélection d'éléments PA

Vous pouvez sélectionner un ou plusieurs éléments PA pour les manipuler ou en modifier les propriétés.

Sélection d'un élément PA dans le panneau Eléments PA

❖

Dans le panneau Eléments PA (Fenêtre > Eléments PA), cliquez sur le nom de l'élément PA.

DREAMWEAVER CS3


153

Sélection d'un élément PA dans la fenêtre de document

❖


• Cliquez sur la poignée de sélection d'un élément PA.

Si la poignée n'est pas visible, cliquez n'importe où dans l'élément PA pour la faire apparaître.

• Cliquez sur une bordure d'un élément PA.

• Cliquez à l'intérieur d'un élément PA en appuyant sur les touches Ctrl et Maj (Windows) ou Commande et Maj

(Macintosh).

• Pour sélectionner le contenu d'un élément PA, cliquez à l'intérieur de celui-ci et appuyez sur les touches Ctrl+A

(Windows) ou Commande+A (Macintosh). Appuyez à nouveau sur Ctrl+A ou Commande+A pour sélectionner l'élément PA.

• Cliquez à l'intérieur d'un élément PA et sélectionnez sa balise dans le sélecteur de balises.

Sélectionner plusieurs éléments PA

❖


•

Dans le panneau Eléments PA (Fenêtre > Eléments PA), appuyez sur la touche Maj tout en cliquant sur le nom de deux

éléments PA ou plus.

•

Dans la fenêtre de document, appuyez sur la touche Maj tout en cliquant à l'intérieur d'un ou de plusieurs éléments PA ou sur leur bordure.

Modification de l'ordre de superposition des éléments PA

Utilisez l'inspecteur Propriétés ou le panneau Eléments PA pour modifier l'ordre de superposition des éléments PA.

L'élément PA situé en haut de la liste du panneau Calques Eléments PA se trouve au premier rang de l'ordre de superposition et apparaît avant les autres éléments PA.

En code HTML, l'ordre de superposition, ou index z , des éléments PA détermine l'ordre dans lequel ils sont dessinés dans un navigateur. Plus l'index z d'un élément PA est élevé, et plus sa position dans l'ordre de superposition est élevée. Vous pouvez modifier l'index z de chaque élément PA à l'aide du panneau Eléments PA ou de l'inspecteur Propriétés.

Modification de l'ordre de superposition des éléments PA à l'aide du panneau Eléments PA

1


2

Faites glisser un élément PA à l'emplacement désiré dans la hiérarchie de l'ordre de superposition.

Une ligne indiquant le futur emplacement de l'élément PA apparaît tandis que vous déplacez l'élément PA. Relâchez le bouton de la souris lorsque la ligne apparaît à l'emplacement souhaité dans l'ordre de superposition.

Modification de l'ordre de superposition des éléments PA à l'aide de l'inspecteur Propriétés

1

Choisissez Fenêtre

2

Sélectionnez un élément PA dans le panneau Eléments PA ou dans la fenêtre de document.

3

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), tapez un nombre dans la zone de texte Index Z.

•

Tapez une valeur supérieure afin de déplacer l'élément PA vers le haut dans l'ordre de superposition.

•

Tapez une valeur inférieure afin de déplacer l'élément PA vers le bas dans l'ordre de superposition.

Affichage et masquage des éléments PA

Lorsque vous travaillez sur votre document, vous pouvez afficher ou masquer les éléments PA manuellement, à l'aide du panneau Eléments PA, pour voir comment la page apparaîtra dans différentes situations.

Remarque :

L'élément PA actuellement sélectionné devient toujours visible et apparaît devant les autres éléments PA.

Modification de la visibilité d'un élément PA

1


DREAMWEAVER CS3


154

2

Cliquez dans la colonne de l'icône en forme d'oeil pour changer la visibilité d'un élément PA.

•

Un oeil ouvert signifie que l'élément PA est visible.

•

Un oeil fermé signifie que l'élément PA est invisible.

•

Si l'icône de l'oeil n'apparaît pas, l'élément PA hérite de la visibilité de son parent (lorsque les éléments PA ne sont pas imbriqués, le parent correspond au corps du document, qui est toujours visible).

Aucune icône en forme d'oeil ne s'affiche lorsque la visibilité n'est pas indiquée (apparaît dans l'inspecteur Propriétés comme Visibilité par défaut).

Modification de la visibilité de tous les éléments PA à la fois

❖

Remarque :

Cette procédure permet de définir la visibilité ou la non-visibilité de tous les éléments PA, mais elle ne leur permet pas d'hériter.

Redimensionnement des éléments PA

Vous pouvez redimensionner un seul ou plusieurs éléments PA à la fois pour qu'ils aient tous la même largeur et la même hauteur.

Si l'option Empêcher le chevauchement est activée, vous ne pourrez pas redimensionner un élément PA s'il doit pour cela en chevaucher un autre.

Voir aussi

« Utilisation de la grille de mise en forme » à la page 169

Redimensionnement d'un élément PA

1

En mode Création, sélectionnez un élément PA.

2

Pour redimensionner l'élément PA, procédez de l'une des manières suivantes :

• Pour redimensionner l'élément PA en le faisant glisser, faites glisser l'une de ses poignées.

• Pour redimensionner l'élément PA par incréments d'un pixel, maintenez la touche Ctrl (Windows) ou Option

(Macintosh) enfoncée tout en utilisant les touches fléchées.

l'élément PA en utilisant les bords supérieur et gauche.

• Pour redimensionner en alignant sur la grille, appuyez sur Maj-Ctrl-flèche (Windows) ou Maj-Option-flèche

(Macintosh).

• Dans l'inspecteur Propriétés (Fenêtre > Propriétés), tapez les valeurs de largeur (L) et de hauteur (H).

Le redimensionnement d'un élément PA en modifie la largeur et la hauteur. Cette action ne définit pas la partie visible du contenu de l'élément PA. Vous pouvez définir la zone visible d'un élément PA dans les préférences.

Redimensionner plusieurs éléments PA à la fois

1

En mode Création, sélectionnez au moins deux éléments PA.

2


•

Choisissez Modifier > Réorganiser > Même largeur ou Modifier > Réorganiser > Même hauteur.

Les premiers éléments PA sélectionnés prendront la largeur ou la hauteur du dernier sélectionné.

•

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sous Plusieurs éléments CSS-P, tapez les valeurs de largeur et de hauteur.

Ces valeurs sont appliquées à tous les éléments PA sélectionnés.

DREAMWEAVER CS3


155

Déplacement des éléments PA

Vous pouvez déplacer les éléments PA en mode Création de la même manière que les objets dans la plupart des applications graphiques de base.

Si l'option Empêcher le chevauchement est activée, vous ne pourrez pas déplacer un élément PA s'il doit pour cela en chevaucher un autre.

1

En mode Création, sélectionnez un ou plusieurs éléments PA.

2


•

Pour déplacer des éléments PA en les faisant glisser, sélectionnez-les et faites glisser la poignée de sélection du dernier

élément PA sélectionné (en surbrillance noire).

•

Pour déplacer l'image par incréments d'un pixel, utilisez les touches fléchées.

Maintenez la touche Maj enfoncée tout en appuyant sur les touches fléchées pour déplacer l'élément PA par incréments de la grille.

Voir aussi

« Utilisation de la grille de mise en forme » à la page 169

Alignement des éléments PA

Utilisez les commandes d'alignement pour aligner un ou plusieurs éléments PA sur l'un des bords du dernier élément PA sélectionné.

Lors de l'alignement, les éléments PA enfants qui ne sont pas sélectionnés seront déplacés en même temps que leur parent, si celui-ci est sélectionné et déplacé. Pour éviter ce déplacement, n'utilisez pas d'éléments PA imbriqués.

1

En mode Création, sélectionnez un élément PA.

2

Choisissez Modifier > Réorganiser, puis sélectionnez une option d'alignement.

Par exemple, si vous sélectionnez Haut, tous les éléments PA se déplacent de façon telle que leurs bordures supérieures sont au même niveau que celle du dernier élément PA sélectionné (en surbrillance noire).

Conversion des éléments PA en tableau

Au lieu d'utiliser des tableaux ou le mode Mise en forme pour créer une mise en forme, certains concepteurs de sites Web préfèrent utiliser des éléments PA. Dreamweaver vous permet de créer votre mise en forme à l'aide d'éléments PA, puis, si vous le souhaitez, de les convertir en tableaux. Par exemple, il peut être nécessaire de convertir les éléments PA en tableaux pour pouvoir prendre en charge les navigateurs antérieurs à la version 4.0. La conversion des éléments PA en tableaux est toutefois déconseillée parce qu'elle peut générer des tableaux contenant un grand nombre de cellules vides, sans parler les problèmes de code pléthorique. Si vous avez besoin d'une mise en page utilisant des tableaux, il est préférable de la créer à l'aide des outils standard de mise en forme des tableaux disponibles dans Dreamweaver.

Vous pouvez aussi passer des éléments PA aux tableaux, et vice-versa, pour peaufiner la mise en forme et optimiser la présentation de la page. (Toutefois, lorsque vous reconvertissez un tableau en éléments PA, Dreamweaver convertit le tableau en balises div PA, quel que soit le type de l'élément PA qui se trouvait dans la page avant d'être converti en tableau.)

Vous ne pouvez pas convertir un tableau ou un éléments PA spécifique figurant sur une page. Il n'est possible de convertir des éléments PA en tableaux, et des tableaux en divs PA que pour la totalité d'une page.

Remarque :

Il est impossible de convertir des éléments PA en tableaux, ou des tableaux en divs PA, dans un modèle de document ou dans un document auquel un modèle a été appliqué. Dans ce cas, vous devez créer votre mise en forme dans un document sans modèle et le convertir avant de l'enregistrer comme modèle.

Conversion des éléments PA en tableaux

Créez votre mise en forme à l'aide d'éléments PA, puis convertissez les éléments PA en tableaux afin que votre mise en forme puisse s'afficher dans les navigateurs les moins récents.

DREAMWEAVER CS3


156

Avant de convertir vos éléments PA en tableaux, assurez-vous qu'ils ne se chevauchent pas.

Conversion des éléments PA en tableau

1

Sélectionnez Modifier > Convertir > Divs PA en tableau.

2

Parmi les options suivantes, définissez celles de votre choix et cliquez sur OK

La plus précise

Crée une cellule de tableau pour chaque élément PA et ajoute les cellules nécessaires pour préserver l'espace entre les éléments PA.

La plus petite : Réduit les cellules vides.

Indique que les bords des éléments PA doivent être alignés s'ils sont positionnés dans la limite du nombre de pixels défini.

Si vous choisissez cette option, le tableau que vous obtiendrez aura moins de lignes et de colonnes vides, mais ne correspondra pas nécessairement exactement à votre mise en forme.

Utiliser les GIF transparents

Remplit la dernière ligne du tableau d'images GIF transparentes. Sélectionner cette option permet d'être sûr que le tableau s'affichera avec les mêmes largeurs de colonne dans tous les navigateurs.

Lorsque cette option est activée, vous ne pouvez pas modifier le tableau obtenu en faisant glisser ses colonnes. Lorsque cette option est désactivée, le tableau obtenu ne contient pas les GIF transparents, mais les largeurs des colonnes peuvent varier suivant le navigateur.

Centrer dans la page

gauche de la page.

Centre le tableau obtenu dans la page. Si cette option est désactivée, le tableau commence sur le bord

Conversion des tableaux en divs PA

1

Sélectionnez Modifier > Convertir > Tableaux en divs PA.

2


Empêcher le chevauchement des éléments PA

Limite la position des éléments PA lorsqu'ils sont créés, déplacés et redimensionnés, afin d'éviter tout chevauchement.

Afficher le panneau Eléments PA

Affiche le panneau Eléments PA.

Afficher la grille et Aligner sur la grille

Vous permettent d'utiliser une grille pour faciliter le positionnement des éléments PA.

Les tableaux sont convertis en divs PA. Les cellules vides ne sont pas converties en éléments PA, sauf si elles possèdent une couleur d'arrière-plan.

Remarque :

Les éléments de la page qui se trouvaient en dehors des tableaux sont également placés dans les balises div PA.

Empêchement du chevauchement des éléments PA

Les cellules d'un tableau ne peuvent pas se chevaucher. Dreamweaver ne peut donc pas créer de tableau à partir d'éléments

PA qui se chevauchent. Si vous envisagez de convertir les éléments PA d'un document en tableaux, activez l'option

Empêcher le chevauchement pour restreindre le déplacement et le positionnement des éléments PA et en éviter le chevauchement.

Si cette option est activée, aucun élément PA ne peut être créé, déplacé ou redimensionné au-dessus d'un élément PA existant, ni être imbriqué dans ce dernier. Si vous activez cette option après avoir créé des éléments PA se chevauchant, faites glisser chaque élément PA concerné de façon à l'éloigner des autres éléments PA. Dreamweaver ne corrige pas automatiquement les éléments PA existants se chevauchant dans la page lorsque vous activez l'option Empêcher le chevauchement des éléments PA.

Si cette option et l'option d'alignement sont activées, aucun élément PA ne sera aligné sur la grille si cela doit causer un chevauchement de deux éléments PA. Dans ce cas, l'élément PA sera aligné sur le bord de l'élément PA le plus proche.

DREAMWEAVER CS3


157

Remarque :

Certaines opérations autorisent le chevauchement des éléments PA, même lorsque l'option Empêcher le chevauchement est activée. Si vous insérez un élément PA en utilisant le menu Insertion, si vous entrez des valeurs dans l'inspecteur Propriétés ou si vous repositionnez des éléments PA en modifiant le code source HTML, les éléments PA risquent de se chevaucher ou de s'imbriquer lorsque cette option est activée. En cas de chevauchement, faites glisser les éléments PA qui se chevauchent en mode Création pour les séparer.

•

Dans le panneau Eléments PA (Fenêtre > Eléments PA), activez l'option Empêcher le chevauchement.

•

Dans la fenêtre de document, choisissez Modifier > Réorganiser > Empêcher le chevauchement des éléments PA.

Utilisation des balises Div

A propos de l'utilisation des balises Div

Vous pouvez créer des mises en page en insérant manuellement des balises div

et en leur appliquant des styles de positionnement CSS. Une balise div

est une balise qui définit les divisions logiques dans le contenu d'une page Web. Vous pouvez utiliser des balises div

pour centrer des blocs de contenu, créer des effets de colonne, créer différentes zones de couleur, etc.

Si vous ne connaissez pas bien l'utilisation des balises div

et des feuilles de style CSS pour créer des pages Web, vous pouvez créer une mise en forme CSS à partir de l'une des mises en forme prédéfinies fournies avec Dreamweaver. Si vous n'êtes pas

à l'aise dans l'utilisation des feuilles de style CSS, mais que vous connaissez bien l'utilisation des tableaux, vous pouvez

également essayer d'utiliser des tableaux.

Remarque :

Dreamweaver considère comme des éléments à positionnement absolu (éléments PA) toutes les balises div, même si vous n'avez pas créé ces balises div à l'aide de l'outil de dessin Div PA.

Voir aussi

« A propos des éléments PA dans Dreamweaver » à la page 146

« Création d'une page avec une mise en page CSS » à la page 145

Insertion de balises div

Vous pouvez utiliser des balises div

pour créer des blocs de mise en forme CSS et les placer dans votre document. Cette méthode est utile si une feuille de style CSS existante contenant des styles de positionnement est associée à votre document.

Dreamweaver vous permet d'insérer rapidement une balise div et de lui appliquer des styles existants.

1

Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous voulez insérer la balise div

.

2


• Choisissez Insertion > Objets mise en forme > Balise Div.

• Dans la catégorie Mise en forme de la barre Insertion, cliquez sur le bouton Insérer la balise Div .

3


Insérer

Vous permet de sélectionner l'emplacement de la balise div

(au point d'insertion, avant ou après la balise, ou avant ou après le début de la balise) et le nom de la balise s'il ne s'agit pas d'une nouvelle balise.

Classe

Affiche le style de classe actuellement appliqué à la balise. Si vous avez associé une feuille de style, les classes qui y sont définies s'affichent dans la liste. Ce menu déroulant permet d'effectuer les opérations suivantes :

•

Sélectionner le style à appliquer à la balise.

•

Choisissez Aucun pour ne plus appliquer le style sélectionné.

•

Sélectionner Attacher une feuille de style pour ouvrir une boîte de dialogue qui vous permet d'attacher une feuille de style externe.

DREAMWEAVER CS3


158

ID Div

Vous permet de modifier le nom utilisé pour identifier la balise div

. Si vous avez associé une feuille de style, les ID qui y sont définis s'affichent dans la liste. Les ID des blocs déjà présents dans votre document ne sont pas répertoriés.

Remarque :

Dreamweaver vous avertit si vous tapez un ID déjà affecté à une autre balise dans votre document.

Modifier CSS

Ouvre le panneau Styles CSS

4

Cliquez sur OK.

La balise div

s'affiche dans votre document sous la forme d'une zone contenant du texte d'espace réservé. Lorsque vous déplacez le pointeur sur le bord de cette zone, Dreamweaver la met en surbrillance.

Si la balise div

est placée de manière absolue, elle devient un élément PA. (Vous pouvez modifier les balises div

qui ne sont pas PA.)

Voir aussi


« Création d'une page avec une mise en page CSS » à la page 145

Modification des balises div

Après avoir inséré une balise div

, vous pouvez la manipuler ou lui ajouter du contenu.

Remarque :

Les balises div qui sont positionnées de manière absolue deviennent des éléments PA.

Les balises div

ont des bordures visibles lorsque vous leur attribuez des bordures ou lorsque vous avez sélectionné Contours en feuille CSS. (L'option Contours en feuille CSS est sélectionnée par défaut dans le menu Affichage > Assistances visuelles.)

Lorsque vous faites passer le pointeur sur une balise div

, Dreamweaver la met en surbrillance. Vous pouvez modifier la couleur de la mise en surbrillance ou désactiver la mise en surbrillance.

Lorsque vous sélectionnez une balise div

, vous pouvez afficher et modifier les règles correspondantes dans le panneau

Styles CSS. Vous pouvez aussi ajouter du contenu à la balise div

: placez simplement le point d'insertion à l'intérieur de la balise div

, puis procédez à l'ajout du contenu comme vous le feriez pour celui d'une page.

Voir aussi



Affichage et modification des règles appliquées à une balise div

1

Procédez de l'une des manières suivantes pour sélectionner la balise div

:

•

Cliquez sur la bordure de la balise div

.

Recherchez la surbrillance afin de voir les bordures.

•

Cliquez à l'intérieur de la balise div

et appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh) à deux reprises.

•

Cliquez à l'intérieur de la balise div

, puis sélectionnez-laà partir du sélecteur de balises figurant au bas de la fenêtre du document.

2

Choisissez Fenêtre > Styles CSS pour afficher le panneau Styles CSS, si besoin est.

Les règles appliquées à la balise div

s'affichent dans le panneau.

3

Effectuez les modifications nécessaires.

Placement du point d'insertion dans une balise div afin d'y ajouter du contenu

❖

Cliquez n'importe où à l'intérieur des bordures de la balise.

DREAMWEAVER CS3


159

Modification du texte de l'espace réservé dans une balise div

❖

Sélectionnez le texte, puis tapez un nouveau texte par-dessus ou appuyez sur la touche Suppr.

Remarque :

Vous pouvez ajouter du contenu à la balise

div

exactement comme vous le feriez dans une page.

Modification de la couleur de surbrillance des balises div

Lorsque vous faites passer le pointeur sur le pourtour d'une balise div

en mode Création, Dreamweaver met ses bordures en surbrillance. Vous pouvez activer ou désactiver la surbrillance à votre convenance ou en modifier la couleur de surbrillance dans la boîte de dialogue Préférences.

1


2

Sélectionnez la catégorie Surbrillance dans la liste de gauche.

3

Effectuez l'une des modifications suivantes, puis cliquez sur OK

•

Pour modifier la couleur de surbrillance des balises div

, cliquez dans la case de couleur Survol et sélectionnez une couleur de surbrillance à l'aide du sélecteur de couleur (ou tapez la valeur hexadécimale correspondant à la couleur de surbrillance dans la zone de texte).

•

Pour activer ou désactiver la surbrillance des balises div

, activez ou désactivez la case à cocher Afficher de l'option

Survol.

Remarque :

Ces options ont un impact sur tous les objets (tableaux, par exemple) que Dreamweaver met en surbrillance lorsque vous y déplacez le pointeur.

Visualisation des blocs de mise en forme CSS

Vous pouvez visualiser les blocs de mise en forme CSS pendant que vous travaillez en mode Création. Un bloc de mise en forme CSS est un élément de page HTML que vous pouvez positionner n'importe où sur votre page. Un bloc de mise en forme CSS est plus précisément soit une balise div

sans display:inline

, soit un autre élément de page qui inclut les déclarations CSS display:block

, position:absolute

ou position:relative

. Les éléments suivants, par exemple, sont considérés comme des blocs de mise en forme CSS dans Dreamweaver:

• Une balise div

• Une image à laquelle est affectée une position relative ou absolue

• Une balise a

à laquelle le style display:block

est affecté.

• Un paragraphe auquel une position relative ou absolue est affectée

Remarque :

Pour des raisons de rendu visuel, les blocs de mise en forme CSS n'incluent pas d'éléments en ligne (c'est-à-dire d'éléments dont le code est défini dans une ligne de texte) ni d'éléments de blocs simples tels que des paragraphes.

Dreamweaver fournit de nombreuses assistances visuelles pour afficher les blocs de mise en forme CSS. Vous pouvez par exemple activer des contours, des arrière-plans et le modèle de boîte pour les blocs de mise en forme CSS en mode Création.

Vous pouvez aussi afficher des info-bulles qui indiquent les propriétés du bloc de mise en forme CSS sélectionné lorsque vous placez le pointeur dessus.

La liste suivante d'assistances visuelles de bloc de mise en forme CSS décrit ce que Dreamweaver rend visible pour chacune d'elles :

Contours en feuille CSS

Affiche les contours de tous les blocs de mise en forme CSS sur la page.

Arrière-plans de mise en forme CSS

Affiche les couleurs d'arrière-plan affectées temporairement de chaque bloc de mise en forme CSS et masque toutes les autres couleurs d'arrière-plan ou images qui apparaissent normalement sur la page.

Lorsque vous activez les assistances visuelles pour afficher les arrière-plans de blocs de mise en forme CSS, Dreamweaver affecte automatiquement une couleur d'arrière-plan distincte à chaque bloc de mise en forme CSS. ((Dreamweaver sélectionne les couleurs à l'aide d'un processus algorithmique. Vous n'avez aucun moyen d'attribuer vous-même les couleurs.) Les couleurs attribuées sont visuellement différentes et sont conçues pour vous aider à distinguer les blocs de mise en forme CSS les uns des autres.

DREAMWEAVER CS3


160

Modèle de boîte de mise en forme CSS

sélectionné.

Affiche le modèle de boîte (remplissages et marges) du bloc de mise en forme CSS

Affichage des blocs de mise en forme CSS

Vous pouvez activer ou désactiver les assistances visuelles des blocs de calques CSS en fonction des besoins.

Affichage des contours des blocs de mise en forme CSS

❖

Choisissez Affichage > Assistances visuelles > Contours en feuille CSS.

Affichage des arrière-plans de blocs de mise en forme CSS

❖

Choisissez Affichage > Assistances visuelles > Arrière-plans de mise en forme CSS.

Affichage des modèles de boîte de blocs de mise en forme CSS

❖

Choisissez Affichage > Assistances visuelles > Modèle de boîte de mise en forme CSS.

Pour accéder aux options d'assistances visuelles des blocs de mise en forme CSS, vous pouvez aussi cliquer sur le bouton

Assistances visuelles de la barre d'outils du document.

Utilisation des assistances visuelles avec des éléments de blocs de mise en forme non-CSS

Vous pouvez utiliser une feuille de style à la conception pour afficher les arrière-plans, les bordures ou le modèle de boîte d'éléments qui ne sont pas normalement considérés comme des blocs de mise en forme CSS. Pour ce faire, vous devez d'abord créer une feuille de style à la conception qui affecte l'attribut display:block

à l'élément de page approprié.

1

Créez une feuille de style en cascade (CSS) externe. Pour ce faire, choisissez Fichier > Nouveau, puis sélectionnez Page de base dans la colonne Catégorie et CSS dans la colonne Page de base. Cliquez ensuite sur Créer.

2

Dans la nouvelle feuille de style, créez des règles qui affectent l'attribut display:block

aux éléments de page à afficher en tant que blocs de mise en forme CSS.

Si, par exemple, vous souhaitez appliquer une couleur d'arrière-plan aux paragraphes ou aux éléments de liste, vous pouvez créer une feuille de style comprenant les règles suivantes : p{ display:block;

} li{ display:block;

}

3

Enregistrez le fichier.

4

En mode Création, ouvrez la page à laquelle vous souhaitez associer les nouveaux styles.

5

Choisissez Texte > Styles CSS > Conception.

6

Dans la boîte de dialogue Feuilles de style à la conception, cliquez sur le bouton plus (+) situé au-dessus de la zone de texte Afficher à la conception uniquement, sélectionnez la feuille de style que vous venez de créer et cliquez sur OK.

7

Cliquez sur OK pour fermer la boîte de dialogue Feuilles de style à la conception.

La feuille de style est associée à votre document. Si vous avez créé une feuille de style en suivant l'exemple précédent, tous les paragraphes et éléments de liste seront formatés au moyen de l'attribut display:block

. Vous pouvez ainsi activer ou désactiver les assistances visuelles de bloc de mise en forme CSS pour les paragraphes et les éléments de liste.

Voir aussi

« Utilisation des feuilles de style à la conception » à la page 139

D

E

DREAMWEAVER CS3


161

Animation des éléments PA

A propos de l'animation des éléments PA

Le langage HTML dynamique, ou DHTML, est une combinaison du langage HTML et d'un langage de script qui permet de modifier les propriétés de style ou de positionnement d'éléments HTML. Dans Dreamweaver, les scénarios utilisent le langage HTML dynamique pour modifier les propriétés des éléments PA et des images dans le temps. Utilisez les scénarios pour créer des animations qui ne nécessitent pas de contrôles ActiveX, de plug-ins ni d'applets Java (mais requièrent

JavaScript).

Remarque :

Le terme « dynamique » a des sens différents selon le contexte Web. Le langage HTML dynamique n'a rien à voir avec le concept de page Web dynamique, autrement dit, une page Web générée dynamiquement par du code côté serveur avant d'être affichée pour un visiteur.

Les scénarios vous permettent de modifier la position, la taille, la visibilité et l'ordre de superposition d'un élément PA. (Les fonctions des éléments PA relatives aux scénarios sont uniquement prises en charge dans la version 4.0 ou ultérieure des navigateurs.) Les scénarios vous permettent également d'exécuter d'autres actions que vous souhaitez déclencher après le chargement d'une page. Ainsi, les scénarios peuvent modifier le fichier source d'une balise d'image afin que différentes images apparaissent sur la page dans le temps.

Pour consulter le code JavaScript généré par un scénario, ouvrez la fenêtre de document en mode Code. Le code du scénario réside dans la fonction

MM_initTimelines()

, au sein d'une balise de script dans la section head du document.

Lorsque vous modifiez le code HTML d'un document contenant des scénarios, veillez à ne pas déplacer, renommer ni supprimer les éléments auxquels un scénario fait référence.

Voir aussi


Présentation du panneau Scénarios

Le panneau Scénarios indique l'évolution des propriétés des éléments PA et des images dans le temps. Sélectionnez

Fenêtre > Scénarios pour ouvrir le panneau du même nom.

A B C

F G

A.

Images-clés

B.

Menu contextuel Scénarios

C.

Numéros d'image

D.

Canal de comportements

E.

Canal d'animation

F.

Barres d'animation

G.

Tête de lecture

Images-clés

Définissent des images d'une barre dans laquelle vous avez spécifié des propriétés (par exemple, la position) pour l'objet. Dreamweaver calcule des valeurs intermédiaires pour les images situées entre des images-clés. Les images-clés sont signalées par des cercles de petite taille.

Canal de comportements

Affiche les comportements qui doivent être exécutés au niveau d'une image déterminée d'un scénario.

Menu contextuel Scénarios

Indique quel scénario du document est actuellement affiché dans le panneau Scénarios.

Canal d'animation

Affiche les barres permettant d'animer des éléments PA et des images.

DREAMWEAVER CS3


162

Barres d'animation

Indiquent la durée de l'animation de chaque objet. Une même ligne peut regrouper plusieurs barres représentant différents objets. Des barres différentes ne peuvent pas contrôler un même objet dans une même image.

T

ête de lecture

Indique quelle image du scénario est actuellement affichée dans la fenêtre de document.

N uméros d'image

Indiquent le numéro séquentiel des images. Le numéro qui figure entre les boutons Retour et Lecture correspond au numéro de l'image actuelle. Vous contrôlez la durée de l'animation en définissant le nombre total d'images et le nombre d'images par seconde. Le paramètre par défaut, 15 images par seconde, constitue une moyenne adaptée à la plupart des navigateurs qui s'exécutent sur les systèmes Windows et Macintosh courants.

Remarque :

Une cadence plus élevée n'améliore pas nécessairement les performances. Les navigateurs lisent systématiquement chaque image d'une animation, même s'ils ne parviennent pas atteindre la cadence spécifiée. La cadence est ignorée si elle est supérieure à la valeur prise en charge par le navigateur.

Le menu contextuel

Contient différentes commandes relatives au scénario.

O

ptions de lecture

Les options de lecture suivantes permettent de visionner l'animation.

Rembobiner

Amène la tête de lecture sur la première image du scénario.

Retour

Déplace la tête de lecture d'une image vers la gauche. Cliquez sur Retour tout en maintenant le bouton de la souris enfoncé pour lire le scénario en arrière.

Lire

Déplace la tête de lecture d'une image vers la droite. Cliquez sur Lecture tout en maintenant le bouton de la souris enfoncé pour lire le scénario vers l'avant.

Lecture automatique

Entraîne la lecture automatique d'un scénario lorsque la page en cours est chargée dans un navigateur.

L'option Lecture auto associe un comportement à la balise body de la page. Cette balise exécute l'action Lire le scénario au chargement de la page.

Boucle

Entraîne la lecture en boucle infinie du scénario en cours tant que la page est ouverte dans un navigateur. L'option

Boucle insère le comportement Atteindre l'image du scénario dans le canal de comportements après la dernière image de l'animation. Double-cliquez sur le repère du comportement dans le canal de comportements pour modifier les paramètres correspondants et modifier le nombre de boucle.

A

B

Animation d'un élément PA à l'aide du scénario

Le type d'animation de scénario le plus courant consiste à déplacer un élément PA sur un chemin. Les scénarios peuvent uniquement déplacer des éléments PA. Pour déplacer des images ou du texte, créez un élément PA à l'aide du bouton Tracer un div pour un élément PA de la barre Insertion, puis insérez les images, le texte ou tout autre type de contenu dans la balise div PA.

Les scénarios peuvent également modifier d'autres propriétés d'éléments PA et d'images.

1

Placez l'élément PA à l'emplacement auquel vous souhaitez qu'il se trouve lorsque l'animation commencera.

2

Choisissez Fenêtre

3

Sélectionnez l'élément PA que vous souhaitez animer.

Assurez-vous que vous avez sélectionné l'élément souhaité : Pour sélectionner un élément PA, cliquez sur le repère ou sur la poignée de sélection correspondant ou utilisez le panneau Eléments PA. Lorsqu'un élément PA est sélectionné, des poignées s'affichent sur son pourtour, comme illustré ci-dessous.

A.

Cliquez sur la poignée de sélection de l'élément PA pour le sélectionner.

B.

Elément PA sélectionné contenant une image

DREAMWEAVER CS3


163

Lorsque vous cliquez dans l'élément PA, un point d'insertion clignotant apparaît à l'intérieur de cet élément PA, qui n'est toutefois pas sélectionné.

4

Sélectionnez Modifier > Scénario > Ajouter un objet au scénario ou faites simplement glisser l'élément PA sélectionné vers le panneau Scénarios.

Une barre s'affiche dans le premier canal du scénario. Le nom de l'élément PA apparaît dans la barre.

5

Cliquez sur le repère de l'image-clé à l'extrémité de la barre.

6

Placez l'élément PA sur la page, à l'emplacement auquel vous souhaitez qu'il se trouve à la fin de l'animation.

Une ligne indiquant le chemin de l'animation s'affiche dans la fenêtre de document.

7

Pour que l'élément PA décrive une courbe, sélectionnez la barre d'animation correspondante, puis cliquez sur une image au milieu de la barre tout en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée pour ajouter une image-clé à l'emplacement de cette image. Vous pouvez aussi cliquer sur l'image requise au milieu de la barre d'animation et sélectionner Ajouter une image-clé dans le menu contextuel.

Répétez cette étape pour définir des images-clés supplémentaires.

8

Maintenez le bouton Lecture enfoncé pour afficher un aperçu de l'animation sur la page.

Répétez la procédure pour ajouter d'autres éléments PA et images au scénario et créer une animation plus complexe.

Voir aussi

Création d'un scénario en faisant glisser un chemin

Si vous désirez créer une animation comportant un chemin complexe, il est souvent plus facile d'enregistrer celui-ci au fur et à mesure que vous faites glisser l'élément PA plutôt que de créer des images-clés individuelles.

1

Sélectionnez un élément PA.

2

Amenez l'élément PA jusqu'à l'emplacement auquel vous souhaitez qu'il se trouve lorsque l'animation commencera.

Assurez-vous que vous avez sélectionné l'élément PA. Si le point d'insertion se trouve dans l'élément PA, celui-ci n'est pas sélectionné. Pour sélectionner un élément PA, cliquez sur le repère ou sur la poignée de sélection correspondant ou utilisez le panneau Eléments PA.

3

Choisissez Modifier > Scénario

4

Faites glisser l'élément PA dans la page pour créer un chemin.

5

Arrêtez de le faire glisser à l'emplacement où l'animation doit s'arrêter.

Dreamweaver ajoute au scénario une barre d'animation contenant le nombre approprié d'images-clés.

6

Dans le panneau Scénarios, cliquez sur le bouton Rembobiner, puis maintenez le bouton Lecture enfoncé pour afficher un aperçu de l'animation.

Voir aussi

Modification d'un scénario

Une fois les composants de base d'un scénario défini, vous pouvez effectuer diverses modifications : ajouter ou supprimer des images, modifier l'heure de début de l'animation, etc.

• Pour allonger la durée de l'animation, faites glisser le repère de la dernière image vers la droite. Toutes les images-clés de l'animation sont déplacées afin de respecter leur position relative. Pour empêcher le déplacement des autres images-clés, maintenez la touche Ctrl enfoncée lorsque vous faites glisser le repère de la dernière image.

DREAMWEAVER CS3


164

•

Pour que l'élément PA atteigne une image-clé plus tôt ou plus tard, déplacez le repère de cette dernière vers la gauche ou la droite sur la barre.

•

Pour changer l'heure de début d'une animation, sélectionnez une ou plusieurs des barres qui lui sont associées (appuyez sur Maj pour sélectionner plusieurs barres simultanément) et faites glisser la sélection vers la droite ou la gauche.

•

Pour déplacer la totalité du chemin d'une animation, sélectionnez intégralement la barre, puis faites glisser l'objet sur la page. Dreamweaver adapte la position de toutes les images-clés. Toute modification effectuée lorsqu'une barre entière est sélectionnée a une incidence sur la totalité des images-clés.

•

Pour ajouter ou supprimer des images dans le scénario, sélectionnez Modifier > Scénario > Ajouter une image ou

Modifier > Scénario > Supprimer une image.

•

Pour qu'un scénario soit lu automatiquement à l'ouverture de la page dans un navigateur, cliquez sur Lecture auto.

L'option Lecture auto associe un comportement à la page. Ce comportement exécute l'action Lire le scénario au chargement de la page.

•

Pour qu'un scénario soit lu en boucle indéfiniment, cliquez sur Boucle. L'option Boucle insère l'action Atteindre l'image du scénario dans le canal de comportements après la dernière image de l'animation. Vous pouvez modifier les paramètres de ce comportement pour définir le nombre de boucles.

Modification des propriétés d'images et d'éléments PA au moyen de scénarios

Outre déplacer un élément PA au moyen d'un scénario, vous pouvez modifier sa visibilité, sa taille et son ordre de superposition. Vous pouvez aussi changer le fichier source d'une image.

1

Dans le panneau Scénarios, procédez de l'une des manières suivantes :

•

Sélectionnez une image-clé existante dans la barre contrôlant l'objet à modifier. (La première et la dernière images sont toujours des images-clés.)

•

Créez une image-clé en cliquant sur une image au milieu de la barre d'animation et en choisissant Modifier > Scénario >

Ajouter une image-clé. Vous pouvez aussi créer une image-clé en cliquant sur une image dans la barre d'animation tout en appuyant sur la touche Ctrl (Windows) ou Commande (Macintosh).

2

Pour définir les nouvelles propriétés de l'objet, procédez de l'une des manières suivantes :

•

Pour changer le fichier source d'une image, cliquez sur l'icône de dossier en regard de la zone de texte Src dans l'inspecteur Propriétés, puis localisez et sélectionnez une nouvelle image.

•

Pour modifier la visibilité d'un élément PA, sélectionnez hériter, visible ou masqué dans le menu déroulant de la zone de texte Vis, dans l'inspecteur Propriétés. Vous pouvez aussi utiliser les icônes en forme d'oeil du panneau Eléments PA.

•

Pour modifier la taille d'un élément PA, faites glisser ses poignées de redimensionnement ou tapez de nouvelles valeurs dans les zones de texte Largeur et Hauteur de l'inspecteur Propriétés. Certains navigateurs ne peuvent pas redimensionner les éléments PA dynamiquement.

•

Pour modifier l'ordre de superposition d'un élément PA, tapez une nouvelle valeur dans la zone de texte Index Z ou utilisez le panneau Eléments PA pour changer l'ordre de superposition de l'élément PA en cours.

3

Maintenez le bouton Lecture enfoncé pour afficher l'animation.

Voir aussi

Utilisation de plusieurs scénarios

Plutôt que d'essayer de contrôler toutes les actions sur une page par le biais d'un scénario unique, il est plus facile d'utiliser plusieurs scénarios distincts qui contrôlent des parties discrètes de la page. Une page peut par exemple comprendre plusieurs éléments interactifs qui déclenchent chacun un scénario différent.

• Pour créer un scénario, choisissez Modifier > Scénario

DREAMWEAVER CS3


165

•

Pour supprimer le scénario sélectionné, choisissez Modifier > Scénario supprime définitivement toutes les animations du scénario sélectionné.

•

Pour renommer le scénario sélectionné, choisissez Modifier > Scénario > Renommer le scénario ou tapez un nouveau nom dans le menu déroulant Scénario du panneau Scénarios.

•

Pour afficher un autre scénario dans le panneau Scénarios, sélectionnez-le dans le menu déroulant Scénario du panneau

Scénarios.

Copie et collage des animations

Une fois la séquence d'animation souhaitée obtenue, vous pouvez la copier et la coller dans une autre zone du scénario en cours ou dans un autre scénario du même document ou d'un autre document. Vous pouvez également copier et coller plusieurs séquences à la fois.

1

Cliquez sur une barre d'animation pour sélectionner une séquence. Pour sélectionner plusieurs séquences, cliquez sur les barres d'animations correspondantes tout en maintenant la touche Maj enfoncée. Pour sélectionner toutes les séquences, appuyez sur les touches Ctrl-A (Windows) ou Commande-A (Macintosh).

2

Copiez ou coupez la sélection.

3


•

Placez la tête de lecture à un autre emplacement dans le scénario en cours.

•

Sélectionnez un autre scénario dans le menu déroulant Scénario.

•

Ouvrez un autre document, ou créez-en un nouveau, puis cliquez dans le panneau Scénarios.

4

Collez la sélection dans le scénario.

Les barres d'animation d'un même objet ne peuvent pas se chevaucher car un élément PA ne peut pas se trouver à deux endroits en même temps (de même, une image ne peut pas avoir deux sources différentes simultanément). Si la barre d'animation que vous collez est susceptible de chevaucher une autre barre d'animation associée au même objet,

Dreamweaver déplace automatiquement la sélection vers la première image qui n'en chevauche pas une autre.

Lorsque vous collez des séquences d'animation dans un autre document, gardez les deux principes suivants à l'esprit :

•

Si vous copiez une séquence d'animation associée à un élément PA et que le nouveau document contient un élément PA du même nom, Dreamweaver applique les propriétés d'animation à l'élément PA existant du nouveau document.

•

Si vous copiez une séquence d'animation associée à un élément PA et que le nouveau document ne contient pas d'élément

PA du même nom, Dreamweaver colle l'élément PA et son contenu à partir du document d'origine, en plus de la séquence d'animation. Pour appliquer la séquence d'animation collée à un autre élément PA du nouveau document, sélectionnez

Changer d'objet dans le menu déroulant, puis sélectionnez le nom de l'autre élément PA dans le menu déroulant.

Supprimez l'élément PA collé si besoin est.

Application d'une séquence d'animation à un autre objet

Pour gagner du temps, vous pouvez créer une séquence d'animation une fois, puis l'appliquer à chacun des éléments PA restants de votre document.

1

Dans le panneau Scénarios, cliquez sur la séquence d'animation et sélectionnez-la.

2

Sélectionnez Edition > Copier pour copier la séquence.

3

Cliquez sur n'importe quelle image du panneau Scénarios et collez la séquence (Edition > Coller) au niveau de cette image.

4

Cliquez avec le bouton droit de la souris (Windows) sur la séquence d'animation collée ou en maintenant la touche

Contrôle enfoncée (Macintosh), puis choisissez Changer d'objet dans le menu contextuel.

5

Dans la boîte de dialogue qui s'affiche, sélectionnez un autre objet dans le menu déroulant et cliquez sur OK.

6

Répétez les étapes 2 à

Vous pouvez aussi changer d'avis quant à l'élément PA à animer après avoir créé une séquence d'animation. Suivez simplement les étapes 3 et 4 ci-dessus (sans copier ni coller).

DREAMWEAVER CS3


166

Modification du nom du scénario

1

Sélectionnez Modifier > Scénario > Renommer le scénario.

2

Entrez un nouveau nom.

Si votre document contient l'action de comportement Lire le scénario (si, par exemple, il contient un bouton sur lequel l'utilisateur doit cliquer pour démarrer le scénario), vous devez modifier ce comportement conformément au nouveau nom.

Conseils relatifs aux animations et aux scénarios

Les suggestions suivantes sont susceptibles d'optimiser les performances de vos animations et de simplifier la procédure de création d'animations :

•

Affichez et masquez des éléments PA au lieu de changer le fichier source des animations comportant plusieurs images.

Changer le fichier source d'une image est susceptible de ralentir l'animation car il est nécessaire de télécharger la nouvelle image. Si toutes les images sont téléchargées simultanément dans des éléments PA masqués avant le début de l'animation, il n'y aura pas de pause ni d'images manquantes.

•

Etendez les barres d'animation pour optimiser la fluidité du mouvement. Si l'animation est hachée et que les images sautent d'une position à une autre, faites glisser la dernière image de la barre d'animation de l'élément PA pour que le mouvement s'étende sur un plus grand nombre d'images. L'allongement de la barre d'animation crée un plus grand nombre de points de données entre les points de début et de fin du mouvement et ralentit le déplacement de l'objet. Pour améliorer la cadence, augmentez le nombre d'images par seconde. N'oubliez pas cependant que la plupart des navigateurs tournant sur des systèmes moyens ne prennent pas en charge plus de 15 images par seconde. Testez l'animation sur des systèmes différents en utilisant des navigateurs différents pour déterminer les paramètres optimaux.

•

N'animez pas les bitmaps de grande taille, car vous risquez d'obtenir des animations lentes. Créez plutôt des images composées et animez-en de petites parties. Vous pouvez par exemple donner l'impression qu'une voiture se déplace en animant uniquement les roues.

•

Créez des animations simples. Ne créez pas des animations qui exigent plus de fonctionnalités que les navigateurs n'en offrent actuellement. Les navigateurs lisent systématiquement chaque image d'une animation de scénario, mais en cas de baisse des performances du système ou d'Internet.

Chapitre 7 : Mise en forme des pages avec

HTML

Adobe® Dreamweaver® CS3 inclut des outils de mise en forme qui vous permettent de créer des pages Web à l'aide de tableaux ou de cadres HTML. L'application propose également des règles, des repères et une grille qui vous permettent d'effectuer des mises en page et de positionner des éléments de façon précise.

Utilisation d'assistances visuelles pour la mise en forme

Définir des règles

Les règles vous aident à mesurer, organiser et planifier votre mise en forme. Vous pouvez afficher les règles graduées en pixels, pouces ou centimètres sur les bords gauche et supérieur de la page.

•

Pour activer et désactiver les règles, choisissez Affichage > Règles > Afficher.

•

Pour changer l'origine, faites glisser l'icône de l'origine de la règle, située dans le coin supérieur gauche de la fenêtre de document en mode Création, sur un point de la page.

•

Pour rétablir la position par défaut de l'origine, choisissez Affichage > Règles > Rétablir origine.

•

Pour changer d'unité de mesure, choisissez Affichage > Règles, puis sélectionnez Pixels, Pouces ou Centimètres.

Définition de repères de mise en forme

Les repères sont les lignes que vous faites glisser sur le document à partir des règles. Ils vous aident à placer et à aligner des objets de façon plus précise Vous pouvez également utiliser les repères pour mesurer la taille des éléments d'une page ou simuler les plis (zones visibles) des navigateurs Web.

Pour faciliter l'alignement des éléments, vous avez la possibilité de les aligner sur les repères et d'aligner des repères sur des

éléments. (les éléments doivent être à positionnement absolu pour que l'alignement puisse fonctionner). Vous pouvez

également verrouiller les repères pour qu'ils ne soient pas déplacés de façon accidentelle par un autre utilisateur.

Créer un repère horizontal ou vertical

1

Faites glisser le repère à partir de la règle correspondante.

2

Positionnez le repère dans la fenêtre de document et relâchez le bouton de la souris (repositionnez le repère en le faisant glisser de nouveau).

Remarque :

Par défaut, les repères sont enregistrés en tant que mesures en pixels absolues depuis le côté supérieur ou gauche du document et sont affichés par rapport à l'origine de la règle. Pour enregistrer le repère sous la forme d'un pourcentage, appuyez sur la touche Maj lorsque vous créez ou déplacez le repère.

Afficher ou masquer un repère

❖

Choisissez Affichage > Repères > Afficher les repères.

Aligner des éléments sur les repères

• Pour aligner des éléments sur les repères, sélectionnez Affichage > Repères > Magnétiser les repères.

• Pour aligner les repères sur des éléments, sélectionnez Affichage > Repères > Accrocher les repères aux éléments.

Remarque :

Lorsque vous redimensionnez des éléments, tels que des éléments à positionnement absolu, des tableaux et des images, ils sont alignés sur les repères.

167

DREAMWEAVER CS3


168

Verrouillage ou déverrouillage de tous les repères

❖

Choisissez Affichage > Repères > Verrouiller les repères.

Afficher et déplacer un repère vers une position spécifique

1

Maintenez le pointeur de la souris sur le repère afin d'afficher sa position.

2

Double-cliquez sur le repère.

3

Entrez la nouvelle position dans la boîte de dialogue Déplacer le repère et cliquez sur OK.

Afficher la distance entre les repères

❖

Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) et déplacez le pointeur de la souris n'importe où entre les deux repères.

Remarque :

L'unité de mesure est la même que celle utilisée pour les règles.

Simuler le pli (zone visible) d'un navigateur Web

❖

Choisissez Affichage > Repères puis sélectionnez une taille de navigateur prédéfini dans le menu.

Supprimer un repère

❖

Faites glisser le repère hors du document.

Modifier les paramètres des repères

❖

Sélectionnez Affichage > Repères > Modifier les repères, définissez les options suivantes et cliquez sur OK.

Couleur des repères

Indique la couleur des lignes du repère. Cliquez sur la palette de couleurs et choisissez une couleur dans le Sélecteur de couleur ou tapez un nombre hexadécimal dans la zone de texte.

Couleur distance

Indique la couleur des lignes qui apparaissent comme des indicateurs de distance lorsque vous déplacez le pointeur de la souris entre les repères. Cliquez sur la palette de couleurs et choisissez une couleur dans le Sélecteur de couleur ou tapez un nombre hexadécimal dans la zone de texte.

Afficher les repères

Affiche les repères en mode Création.

Magnétiser les repères

Aligne les éléments d'une page sur les repères à mesure que vous déplacez ces éléments dans la page.

Verrouiller les repères

Verrouille les repères en place.

Accrocher les repères aux éléments

Aligne les repères sur les éléments sur la page à mesure que vous faites glisser les repères.

Effacer tout

Efface tous les repères de la page.

Utilisation des repères avec des modèles

Lorsque des repères sont ajoutés à un modèle Dreamweaver, toutes les instances du modèle héritent de ces repères. Les repères des instances de modèle sont toutefois traités comme des régions modifiables par les utilisateurs. Les repères modifiés dans les instances de modèle sont restaurés à leur emplacement d'origine chaque fois que l'instance est mise à jour avec le modèle principal.

Vous pouvez aussi ajouter vos propres repères aux instances d'un modèle. Les guides ajoutés de cette manière ne sont pas

écrasés lorsque l'instance du modèle est mise à jour avec le modèle principal.

Voir aussi

DREAMWEAVER CS3


169

Utilisation de la grille de mise en forme

La grille affiche un système de lignes horizontales et verticales dans la fenêtre de document. Cette fonction est utile pour placer des objets de façon précise. Vous pouvez aligner automatiquement des éléments de page à positionnement absolu sur la grille en les déplaçant, et changer la grille ou définir le comportement d'alignement en indiquant des paramètres spécifiques pour la grille. L'alignement fonctionne, que la grille soit visible ou non.

Voir aussi

Afficher ou masquer la grille

❖

Activer ou désactiver l'alignement

❖

Modifier les paramètres de la grille

1

Choisissez Affichage > Grille > Paramètres de la grille.

2

Définissez les options et cliquez sur OK pour appliquer les modifications.

Couleur

Spécifie la couleur des lignes de la grille. Cliquez sur la palette de couleurs et choisissez une couleur dans le

Sélecteur de couleur ou tapez un nombre hexadécimal dans la zone de texte.

Afficher la grille

Affiche la grille en mode Création.

Aligner sur la grille

Permet d'aligner les éléments de la page sur les lignes de la grille.

Espacement

Détermine l'espacement entre les lignes de la grille. Tapez une valeur et sélectionnez Pixels, Pouces ou

Centimètres dans le menu.

Afficher

Détermine si les lignes de la grille apparaissent sous forme de lignes ou de pointillés.

Remarque :

Si l'option Afficher la grille n'est pas sélectionnée, la grille n'apparaît pas et aucune modification n'est visible.

Utilisation d'un tracé d'image

Vous pouvez utiliser un tracé de l'image comme guide pour reproduire une mise en page ayant été créée dans une application graphique telle qu'Adobe Freehand ou Fireworks.

Un tracé d'image est une image JPG, GIF ou PNG qui apparaît à l'arrière-plan de la fenêtre de document. Vous pouvez masquer cette image, définir son opacité et la déplacer.

Le tracé de l'image est uniquement visible dans Dreamweaver ; il n'est pas visible lorsque vous affichez la page dans un navigateur. Lorsque le tracé de l'image est visible, les véritables image et couleur d'arrière-plan de la page ne sont pas visibles dans la fenêtre de document, mais le sont lorsque la page est affichée dans un navigateur.

Placer un tracé de l'image dans la fenêtre de document

1


•

Choisissez Affichage > Tracé de l'image > Charger.

•

Choisissez Modifier > Propriétés de la page, puis cliquez sur le bouton Parcourir situé à côté de la zone de texte Tracé de l'image.

2

Sélectionnez un fichier d'image, puis cliquez sur Sélectionner (Windows) ou Choisir (Macintosh).

3

Définissez la transparence de l'image en ajustant le curseur Transparence, puis cliquez sur OK.

Pour passer à un autre tracé ou modifier à tout moment la transparence du tracé en cours, choisissez Modifier > Propriétés de la page.

DREAMWEAVER CS3


170

Afficher ou masquer le tracé de l'image

❖

Choisissez Affichage > Tracé de l'image > Afficher.

Déplacer un tracé de l'image

❖

Sélectionnez Affichage > Tracé de l'image > Ajuster la position.

•

Pour définir avec précision la position du tracé de l'image, indiquez les valeurs des coordonnées dans les zones de texte X et

•

Pour déplacer l'image par incréments de 1 pixel, utilisez les touches fléchées.

•

Pour déplacer l'image par incrément de 5 fléchées.

Rétablir la position du tracé de l'image

❖

Choisissez Affichage > Tracé de l'image > Rétablir la position.

Le tracé de l'image se replace dans le coin supérieur gauche de la fenêtre de document (0,0).

Aligner le tracé de l'image sur un élément sélectionné

1

Sélectionnez un élément dans la fenêtre de document.

2

Choisissez Affichage > Tracé de l'image > Aligner l'image avec la sélection.

Le coin supérieur gauche du tracé de l'image est aligné avec le coin supérieur gauche de l'élément sélectionné.

Présentation de contenu à l'aide de tableaux

A propos des tableaux

Les tableaux sont très utiles pour présenter des données tabulaires et mettre en forme du texte et des images dans une page

HTML. Un tableau comprend au moins une ligne ; chaque ligne comporte au moins une cellule. Bien que les colonnes ne soient généralement pas spécifiées explicitement en code HTML, Dreamweaver vous permet de manipuler les colonnes, les lignes et les cellules.

présentés comme une grille de lignes et de colonnes, et le mode Mise en forme, qui permet de dessiner, redimensionner et déplacer des rectangles sur la page tout en continuant d'utiliser les tableaux comme structure sous-jacente.

Dreamweaver affiche la largeur du tableau et de chaque colonne du tableau lorsque le tableau est sélectionné ou que le point d'insertion se trouve dedans. En regard des largeurs se trouvent les flèches du menu des en-têtes de tableau et des menus des en-têtes de colonne. Utilisez les menus pour accéder rapidement à des commandes standard relatives aux tableaux. Vous pouvez activer et désactiver les largeurs et les menus.

Si vous ne voyez pas la largeur d'un tableau ou d'une colonne, cela signifie qu'elle n'est pas spécifiée dans le code HTML. Si deux nombres s'affichent, cela signifie que la largeur visuelle qui apparaît en mode Création est différente de la largeur spécifiée dans le code HTML. Cela peut se produire lorsque vous redimensionnez un tableau en faisant glisser son coin inférieur droit ou lorsque vous ajoutez du contenu à une cellule plus grande que sa valeur définie.

Par exemple, si vous définissez une largeur de colonne de 200 pixels, puis que vous ajoutez du contenu qui étend la largeur

à 250 pixels, deux nombres s'affichent pour cette colonne : 200 (la largeur spécifiée dans le code) et (250) entre parenthèses

(la largeur visuelle de la colonne telle qu'elle apparaît à l'écran).

Remarque :

Vous avez aussi la possibilité de mettre vos pages en forme à l'aide du positionnement par feuilles de style en cascade CSS.

Voir aussi


« Mise en forme des pages avec le mode Mise en forme » à la page 184

DREAMWEAVER CS3


171

Priorité de mise en forme des tableaux dans le code H

T

ML

Lorsque vous mettez des tableaux en forme en mode Création, vous pouvez définir des propriétés s'appliquant au tableau tout entier ou à une série de lignes, de colonnes ou de cellules sélectionnées dans le tableau. Lorsqu'une propriété (une couleur d'arrière-plan ou un alignement, par exemple) est définie par une valeur pour tout le tableau et par une autre valeur pour chaque cellule, les propriétés de mise en forme des cellules prévalent sur les propriétés de mise en forme de lignes, qui

à leur tour prévalent sur les propriétés de mise en forme du tableau.

L'ordre de priorité pour la mise en forme de tableau est le suivant :

1

Cellules

2

Lignes

3

Tableau

Par exemple, si vous définissez une couleur bleue pour l'arrière-plan d'une cellule, puis la couleur jaune pour celui du tableau, la couleur de la cellule bleue ne changera pas, puisque la propriété de mise en forme de cellule a la priorité sur la propriété de mise en forme du tableau.

Remarque :

Lorsque vous définissez les propriétés d'une colonne, Dreamweaver modifie les attributs de la balise

td

correspondant à chaque cellule de la colonne.

A propos du fractionnement et de la fusion de cellules de tableau

Vous pouvez fusionner n'importe quel nombre de cellules adjacentes (tant que la sélection correspond à une ligne ou à un rectangle de cellules) pour produire une cellule unique s'étendant sur plusieurs colonnes ou lignes. Vous pouvez fractionner une cellule en un nombre quelconque de lignes et de colonnes, qu'elle ait été précédemment fusionnée ou non.

Dreamweaver restructure automatiquement le tableau (en ajoutant les attributs colspan

ou rowspan

nécessaires) pour obtenir l'agencement spécifié.

Dans l'exemple ci-dessous, les cellules au milieu des deux premières lignes ont été fusionnées en une seule cellule qui s'étend sur deux lignes.

Insertion d'un tableau et ajout de contenu

Utilisez la barre ou le menu Insérer pour créer un nouveau tableau. Ajoutez ensuite du texte et des images aux cellules du tableau de la même façon que vous le faites en dehors d'un tableau.

1

Dans la fenêtre de document en mode Création, placez le point d'insertion à l'endroit où vous voulez que le tableau apparaisse.

Remarque :

Si votre document est vide, le point d'insertion peut uniquement être placé au début du document.

• Choisissez Insertion > Tableau.

• Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Tableau.

2

Définissez les attributs dans la boîte de dialogue Tableau et cliquez sur OK pour créer le tableau.

Lignes

Détermine le nombre de lignes du tableau.

Colonnes

Détermine le nombre de colonnes du tableau.

Largeur du tableau

Indique la largeur du tableau en pixels ou en pourcentage de la largeur de fenêtre du navigateur.

Largeur de la bordure

Indique la largeur, en pixels, des bordures du tableau.

Espacement des cellules

Détermine le nombre de pixels séparant les cellules contiguës d'un tableau.

DREAMWEAVER CS3


172

Lorsque vous n'affectez pas explicitement de valeur pour la largeur de la bordure, l'espacement entre les cellules et la marge intérieure des cellules, la plupart des navigateurs affichent une largeur de bordure et une marge intérieure des cellules définies sur 1, ainsi qu'un espacement entre les cellules défini sur 2. Pour être sûr que les navigateurs afficheront le tableau sans bordure, marge intérieure ni espacement, définissez Marge intérieure des cellules et Espacement entre les cellules sur 0.

Marge intérieure des cellules

Indique le nombre de pixels qui sépare la bordure d'une cellule et son contenu.

Aucun

N'autorise pas les en-têtes de colonne ou de ligne pour le tableau.

Gauche

Transforme la première colonne du tableau en colonne d'en-têtes pour vous permettre d'entrer un en-tête pour ligne du tableau.

Haut

Transforme la première ligne du tableau en ligne d'en-têtes pour vous permettre d'entrer un en-tête pour chaque colonne du tableau.

Les deux

Vous permet d'entrer des en-têtes de colonne et de ligne dans le tableau.

Il est judicieux d'employer des en-têtes au cas où l'un des visiteurs de votre site Web utiliserait un lecteur d'écran. Les lecteurs d'écran lisent les en-têtes de tableau et aident les utilisateurs à garder une trace des informations de tableau.

Légende

Fournit un titre de tableau qui s'affiche en dehors du tableau.

Aligner la légende

Indique où la légende du tableau apparaît par rapport au tableau.

Résumé

Fournit une description du tableau. Les lecteurs d'écran lisent le texte de résumé mais le texte n'apparaît pas dans le navigateur de l'utilisateur.

Voir aussi


« Ajout et modification d'images » à la page 233

Importer et exporter de données tabulaires

Vous pouvez importer des données tabulaires créées dans une autre application (par exemple, Microsoft Excel) et enregistrées dans un format texte délimité (éléments séparés par des tabulations, virgules, deux-points, points-virgules ou autres délimiteurs) dans Dreamweaver et les mettre en forme dans un tableau.

Vous pouvez également exporter les données d'un tableau depuis Dreamweaver vers un fichier texte, avec le contenu de cellules contiguës séparé par un délimiteur. Les caractères que vous pouvez utiliser comme délimiteurs sont la virgule, les deux-points, le point-virgule ou l'espace. Lorsque vous exportez un tableau, tout le tableau est exporté ; vous ne pouvez pas exporter certaines parties du tableau seulement.

Si vous souhaitez ne récupérer qu'une partie des données d'un tableau, par exemple les six premières lignes ou les six premières colonnes, copiez les cellules contenant ces données et collez-les hors du tableau (pour créer un nouveau tableau) avant d'exporter le nouveau tableau.

Importer des données tabulaires

1


•

Choisissez Fichier > Importer > Données tabulaires.

•

Dans la catégorie Données de la barre Insertion, cliquez sur l'icône Importer les données tabulaires.

•

Choisissez Insertion

2

Définissez les options relatives aux données tabulaires, puis cliquez sur OK.

Fichier de données

Correspond au nom du fichier à importer. Cliquez sur le bouton Parcourir pour choisir le fichier.

Délimiteur

Correspond au délimiteur utilisé dans le fichier que vous importez.

Si vous choisissez Autre, une zone de texte apparaît à droite du menu contextuel. Entrez le délimiteur utilisé dans votre fichier.

DREAMWEAVER CS3


173

Remarque :

Spécifiez le délimiteur utilisé lors de l'enregistrement du fichier de données. Dans le cas contraire, le fichier ne pourra pas être importé correctement et vos données ne seront pas formatées convenablement dans un tableau.

Largeur du tableau

Correspond à la largeur du tableau.

•

Sélectionnez Adapter au contenu pour adapter la largeur de chaque colonne à la plus longue chaîne de texte qu'elle contient.

•

Sélectionnez Fixe pour spécifier une largeur de tableau fixe, en pixels ou en pourcentage de la largeur de fenêtre du navigateur.

Bordure



Détermine l'espace (en pixels) entre le contenu d'une cellule et son contour.



Lorsque vous n'affectez pas explicitement de valeur pour les bordures, l'espacement entre les cellules et la marge intérieure des cellules, la plupart des navigateurs affichent des bordures et une marge intérieure des cellules définies sur 1, ainsi qu'un espacement entre les cellules défini sur 2. Pour être sûr que les navigateurs afficheront le tableau sans marge intérieure ni espacement, définissez Marge intérieure des cellules et Espacement entre les cellules sur 0. Pour visualiser les contours des cellules et du tableau lorsque la bordure est définie sur 0, sélectionnez Affichage > Assistances visuelles > Bordures de tableau.

Formatage ligne supérieure

Détermine la mise en forme appliquée, le cas échéant, à la ligne supérieure du tableau.

Choisissez parmi quatre options de formatage : pas de formatage, gras, italique ou gras italique.

Exporter un tableau

1

Placez le point d'insertion dans l'une des cellules du tableau.

2

Choisissez Fichier > Exporter > Tableau.

3

Définissez les options suivantes :

Délimiteur

Indique quel caractère délimiteur doit être utilisé pour séparer des éléments dans le fichier exporté.

Sauts de ligne

Indique sous quel système d'exploitation vous allez ouvrir le fichier exporté : Windows, Macintosh ou

UNIX. Les différents systèmes d'exploitation utilisent des méthodes différentes pour indiquer la fin d'une ligne de texte.

4

Cliquez sur Exporter.

5

Saisissez un nom pour le fichier et cliquez sur

Sélectionner des éléments de tableau

Vous pouvez sélectionner un tableau entier ou encore l'ensemble d'une ligne ou d'une colonne. Vous pouvez également sélectionner une ou plusieurs cellules individuelles.

Lorsque vous déplacez le pointeur sur un tableau, une ligne, une colonne ou une cellule, Dreamweaver met toutes les cellules de cette sélection en surbrillance afin que vous sachiez quelles cellules seront sélectionnées. Ceci est utile pour les tableaux sans bordures, les cellules comprenant plusieurs colonnes ou lignes ou dans le cas de tableaux imbriqués. Vous pouvez modifier la couleur de la mise en surbrillance dans les préférences.

Si vous placez le pointeur sur une bordure du tableau, puis que vous maintenez la touche Ctrl (Windows) ou Commande

(Macintosh) enfoncée, la totalité de la structure du tableau (c'est-à-dire toutes les cellules) est mise en surbrillance. Ceci peut

être utile lorsque vous disposez de tableaux imbriqués et que vous souhaitez afficher la structure de l'un d'eux.

Sélectionner un tableau entier

❖


•

Cliquez dans le coin supérieur gauche du tableau, sur le bord supérieur ou inférieur du tableau ou sur une ligne ou une bordure de colonne.

Remarque :

Le pointeur prend la forme de l'icône de grille du tableau pour vous indiquer que vous pouvez sélectionner le tableau (sauf si vous cliquez sur la bordure d'une ligne ou d'une colonne).

DREAMWEAVER CS3


174

•

Cliquez dans une cellule du tableau, puis sélectionnez la balise

<table>

dans le sélecteur de balises dans le coin inférieur gauche de la fenêtre de document.

•

Cliquez dans une cellule du tableau, puis choisissez Modifier > Tableau

•

Cliquez dans une cellule du tableau, puis sur le menu d'en-tête du tableau et choisissez Sélectionner le tableau. Des poignées de sélection apparaissent sur les bords inférieurs et droits du tableau sélectionné .

Sélectionner une ou plusieurs lignes ou colonnes

1

Positionnez le pointeur sur le bord gauche d'une ligne ou le bord supérieur d'une colonne.

2

Lorsque le pointeur se transforme en flèche de sélection, cliquez pour sélectionner une ligne ou une colonne ou faitesle glisser pour sélectionner plusieurs lignes ou colonnes.

Sélectionner une seule colonne

1

Cliquez dans la colonne.

2

Cliquez sur le menu des en-têtes de colonne, puis choisissez Sélectionner la colonne.

Sélectionner une seule cellule

❖


•

Cliquez dans la cellule, puis sélectionnez la balise

<td>

dans le sélecteur de balises dans le coin inférieur gauche de la fenêtre de document.

•

Cliquez dans la cellule en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée.

•

Cliquez dans la cellule, puis choisissez Edition > Sélectionner tout.

Sélectionner une ligne ou un bloc rectangulaire de cellules

❖


•

Faites glisser la souris d'une cellule vers une autre.

•

Cliquez sur une cellule. Tout en appuyant sur la touche Ctrl (Windows) ou Commande (Macintosh), cliquez sur la même cellule, puis cliquez dans une autre cellule en maintenant la touche Maj enfoncée.

Toutes les cellules se trouvant à l'intérieur de la zone rectangulaire ou linéaire ainsi délimitée par les deux cellules sont sélectionnées.

DREAMWEAVER CS3


175

Sélectionner des cellules non adjacentes

❖

Appuyez sur Ctrl (Windows) ou Commande (Macintosh), puis cliquez sur les cellules, les lignes ou les colonnes que vous voulez sélectionner.

Si chaque cellule, ligne ou colonne sur laquelle vous cliquez après avoir appuyé sur Ctrl ou sur Commande n'est pas déjà sélectionnée, elle est ajoutée à la sélection. Si elle est déjà sélectionnée, elle est retirée de la sélection.

Modification de la couleur de surbrillance pour les éléments d'un tableau

1


2

Sélectionnez la catégorie Surbrillance dans la liste à gauche, effectuez l'une des modifications suivantes, puis cliquez sur OK.

•

Pour modifier la couleur de surbrillance des éléments du tableau, cliquez dans la case de couleur Survol et sélectionnez une couleur de surbrillance à l'aide du sélecteur de couleur (ou tapez la valeur hexadécimale correspondant à la couleur de surbrillance dans la zone de texte).

•

Pour activer ou désactiver la sélection d'éléments du tableau, activez ou désactivez l'option Afficher de l'option Survol.

Remarque :

Ces options ont un impact sur tous les objets, tels que les éléments à positionnement absolu ou encore les tableaux et cellules en mode Mise en forme, que Dreamweaver met en surbrillance lorsque vous déplacez le pointeur au-dessus.

Définition des propriétés des tableaux

Vous pouvez utiliser l'inspecteur Propriétés pour modifier les tableaux.

1

Sélectionnez un tableau.

2

Dans l'inspecteur Propriétés (Fenêtre droit et modifiez les propriétés en fonction de vos besoins.

ID de tableau

Un identificateur du tableau.

Lignes et colonnes

Le nombre de lignes et de colonnes dans le tableau.

L et H

La largeur et la hauteur du tableau en pixels ou en pourcentage de la largeur de fenêtre du navigateur.

Remarque :

Il est rarement utile de définir la hauteur d'un tableau.

Bordure


Lorsque vous n'affectez pas explicitement de valeur pour la bordure, l'espacement entre les cellules et la marge intérieure des cellules, la plupart des navigateurs affichent la bordure et une marge intérieure des cellules définies sur 1, ainsi qu'un espacement entre les cellules défini sur 2. Pour être sûr que les navigateurs afficheront le tableau sans marge intérieure ni espacement, définissez Bordure sur 0, Marge intérieure des cellules et Espacement entre les cellules sur 0. Pour visualiser les contours des cellules et du tableau lorsque la bordure est définie sur 0, sélectionnez Affichage > Assistances visuelles > Bordures de tableau.

Remplissage


Espac. de cellule


Alignement

Détermine la position du tableau par rapport aux autres éléments du même paragraphe (texte ou images).

Gauche aligne le tableau sur la gauche des autres éléments (pour que le texte situé dans le même paragraphe apparaisse à

Centrer centre le tableau (le texte apparaissant au-dessus et/ou en dessous du tableau). Par défaut indique que le navigateur doit utiliser son alignement par défaut.

Lorsque l'alignement est défini sur Par défaut, le reste du contenu n'est pas affiché à côté du tableau. Pour afficher un tableau à côté du contenu, utilisez l'alignement à droite ou à gauche.

Effacer largeurs de colonne

et Effacer hauteurs de ligne suppriment toutes les valeurs de hauteur de ligne ou de largeur de colonne du tableau explicitement spécifiées.

Convertir largeurs de tableau en pixels

et Convertir les hauteurs de tableau en pixels définissent la largeur ou la hauteur de chaque colonne du tableau sur sa largeur en pixels (définit également la largeur du tableau sur sa largeur en pixels).

DREAMWEAVER CS3


176

Convertir largeurs de tableau en pourcentage

et Convertir les hauteurs de tableau en pourcentages définissent la largeur ou la hauteur de chaque colonne du tableau sur sa largeur exprimée en pourcentage de la largeur de la fenêtre de document

(définit également la largeur du tableau sur sa largeur en pourcentage de la largeur de la fenêtre de document).


La couleur d'arrière-plan du tableau.

Couleur contour

La couleur des bordures du tableau.

Image ar-pl

L'image d'arrière-plan du tableau.


Définition des propriétés de cellule, de ligne ou de colonne

Vous pouvez utiliser l'inspecteur Propriétés pour modifier des cellules et des lignes dans un tableau.

1

Sélectionnez une ligne ou une colonne.

2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), définissez les options suivantes :

Horiz

Indique l'alignement horizontal du contenu d'une cellule, d'une ligne ou d'une colonne. Vous pouvez aligner le contenu de la cellule sur la gauche, la droite ou le centre des cellules ou vous pouvez indiquer au navigateur d'utiliser l'alignement par défaut (en général à gauche pour les cellules normales et au centre pour les cellules d'en-tête).

Vert.

Indique l'alignement vertical du contenu d'une cellule, d'une ligne ou d'une colonne. Vous pouvez aligner le contenu de la cellule sur le haut, le centre ou le bas des cellules, sur la ligne de base ou encore indiquer au navigateur d'utiliser l'alignement par défaut (en général le centre).

L et H

La largeur et la hauteur des cellules sélectionnées en pixels ou en pourcentage de la largeur ou de la hauteur de tout le tableau. Pour spécifier un pourcentage, faites suivre la valeur du signe de pourcentage (%). Pour laisser au navigateur le soin de déterminer la largeur et la hauteur appropriées, en fonction du contenu de la cellule et des largeurs et hauteurs des autres colonnes et lignes, laissez le champ vide (paramétrage par défaut).

Par défaut, un navigateur choisit une hauteur de ligne et une largeur de colonne correspondant à l'image la plus large ou à la ligne la plus longue dans une colonne. C'est pourquoi il arrive qu'une colonne de tableau devienne beaucoup plus large que les autres lorsque vous y ajoutez du contenu.

Remarque :

Vous pouvez spécifier une hauteur en pourcentage de la hauteur totale du tableau, mais il se peut que la ligne ne s'affiche pas au pourcentage de hauteur spécifié dans les navigateurs.

Ar-pl

(partie supérieure du champ de texte) Le nom de fichier de l'image d'arrière-plan d'une cellule, d'une colonne ou d'une ligne. Cliquez sur l'icône de dossier pour rechercher et sélectionner un fichier d'image.

Ar-pl

(partie inférieure du sélecteur de couleur et du champ de texte) La couleur d'arrière-plan d'une cellule, d'une colonne ou d'une ligne choisie à l'aide du sélecteur de couleur.

Brdre

La couleur de la bordure des cellules.

Fusionner les cellules

Combine les cellules, lignes ou colonnes sélectionnées en une seule cellule. Vous pouvez fusionner des cellules uniquement si elles forment un bloc rectangulaire ou linéaire.

Fractionner la cellule

Divise une cellule en deux ou plusieurs cellules. Vous ne pouvez fractionner qu'une cellule à la fois : ce bouton est désactivé si plusieurs cellules sont sélectionnées.

Pas de retour à la ligne auto

Evite tout renvoi automatique à la ligne, en conservant tout le texte d'une cellule donnée sur une seule ligne. Si Pas de retour à la ligne auto est activé, les cellules s'élargissent en fonction de la taille des données que vous tapez ou collez. (Normalement, les cellules s'élargissent horizontalement pour accueillir le mot le plus long ou l'image la plus large, puis s'étirent verticalement autant que nécessaire pour intégrer tout autre contenu).

En-tête

Met en forme les cellules sélectionnées comme des cellules d'en-tête de tableau. Par défaut, le contenu des cellules de titre de tableau est en caractères gras et centré.

Vous pouvez spécifier la largeur ou la hauteur par des pixels ou des pourcentages. Vous pouvez convertir les pixels en pourcentages et inversement.

DREAMWEAVER CS3


177

Remarque :


td

correspondant à chaque cellule de la colonne. Lorsque vous définissez certaines propriétés d'une ligne, Dreamweaver modifie les attributs de la balise

tr

plutôt que de modifier les attributs de chaque balise

td

dans la ligne. Lorsque vous appliquez le même format à toutes les cellules d'une ligne, en appliquant le format à la balise

tr

, vous obtenez un code HTML plus net et plus concis.

3

Appuyez sur Tab ou Entrée (Windows) ou Retour (Macintosh) pour appliquer la valeur.

Utiliser le mode

T

ableaux développés pour une modification de tableau plus simple

Le mode Tableaux développés ajoute provisoirement de la marge à l'intérieur des cellules et de l'espacement à tous les tableaux d'un document, et augmente les bordures des tableaux afin de rendre les modifications plus faciles. Ce mode vous permet de choisir des éléments dans les tableaux ou de placer le point d'insertion de manière précise.

Par exemple, vous pouvez développer un tableau pour placer le point d'insertion à gauche ou à droite d'une image, sans sélectionner l'image ou la cellule du tableau par inadvertance.

Remarque :

Après avoir choisi ou placé le point d'insertion, vous devez revenir au mode Standard du mode Création pour effectuer vos modifications. En mode Tableaux développés, certaines opérations, telles que le redimensionnement, ne produisent pas les résultats attendus.

Basuler en mode

T ableaux développés

1

Si vous travaillez en mode Code, sélectionnez Affichage > Création ou Affichage > Code et création (vous ne pouvez pas passer en mode Tableaux développés lorsque vous êtes en mode Code).

2


•

Choisissez Affichage > Mode Tableau > Mode Tableaux développés.

•

Dans la catégorie Mise en forme de la barre Insertion, cliquez sur Développé.

Une barre étiquetée Mode Tableaux développés s'affiche en haut de la fenêtre de document. Dreamweaver ajoute une marge intérieure des cellules et de l'espacement entre les cellules à tous les tableaux de la page et augmente l'épaisseur des bordures des tableaux.

Quitter le mode

T ableaux développés

❖


•

Cliquez sur [quitter] dans la barre intitulée Mode Tableaux développés en haut de la fenêtre de document.

•

Choisissez Affichage > Mode Tableau > Mode Standard.

•

Dans la catégorie Mise en forme de la barre Insertion, cliquez sur Standard.

Mise en forme des tableaux et des cellules

Vous pouvez modifier l'aspect des tableaux en définissant des propriétés pour l'ensemble ou une partie de leurs cellules, ou en leur appliquant une mise en forme prédéfinie. Avant de définir les propriétés d'un tableau ou de cellules, vous devez savoir que l'ordre de priorité pour la mise en forme est le suivant : cellules, lignes et tableaux.

Pour formater le texte dans une cellule de tableau, suivez la même procédure que pour formater du texte en dehors d'un tableau.

Voir aussi


Modification du format d'un tableau, d'une cellule, d'une ligne ou d'une colonne.

1

Sélectionnez un tableau, une cellule, une ligne ou une colonne.

2

Dans l'inspecteur Propriétés (Fenêtre droit et modifiez les propriétés en fonction de vos besoins.

DREAMWEAVER CS3


178

3

Modifiez les propriétés de votre choix.

Pour plus d'informations sur les options, cliquez sur l'icône Aide de l'inspecteur Propriétés.

Remarque :


td

correspondant à chaque cellule de la colonne. Lorsque vous définissez certaines propriétés d'une ligne, Dreamweaver modifie les attributs de la balise

tr

plutôt que de modifier les attributs de chaque balise

td

dans la ligne. Lorsque vous appliquez le même format à toutes les cellules d'une ligne, en appliquant le format à la balise

tr

, vous obtenez un code HTML plus net et plus concis.

Ajouter ou modifier les valeurs d'accessibilité d'un tableau en mode Code

❖

Modifiez les attributs dans le code.

Pour repérer rapidement les balises dans le code, cliquez dans le tableau, puis sélectionnez la balise

<table>

dans le sélecteur de balises situé au bas de la fenêtre de document.

Ajouter ou modifier les valeurs d'accessibilité d'un tableau en mode Création

•

Pour modifier la légende du tableau, mettez-la en surbrillance, puis tapez une nouvelle légende.

•

Pour modifier l'alignement de la légende du tableau, placez le point d'insertion dans la légende, cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Modifier le code de la balise.

•

Pour modifier le résumé du tableau, sélectionnez le tableau, cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Modifier le code de la balise.

Redimensionnement des tableaux, des colonnes et des lignes

Redimensionnement des tableaux

Vous pouvez redimensionner tout un tableau ou seulement certaines cellules ou certaines colonnes individuelles. Lorsque vous redimensionnez tout un tableau, toutes ses cellules changent de taille en proportion. Si les cellules d'un tableau ont une largeur ou une hauteur spécifiées explicitement, le redimensionnement du tableau modifie la taille visuelle des cellules dans la fenêtre de document mais ne modifie pas la largeur et la hauteur spécifiées des cellules.

Vous pouvez redimensionner un tableau en faisant glisser l'une de ses poignées de sélection. Dreamweaver affiche la largeur du tableau, ainsi qu'un menu des en-têtes de tableau, en haut ou en bas du tableau lorsque le tableau est sélectionné ou que le point d'insertion se trouve dedans.

Les largeurs de colonne définies dans le code HTML ne correspondent pas nécessairement aux largeurs apparentes à l'écran.

Dans ce cas, vous pouvez uniformiser les largeurs. Dreamweaver affiche les largeurs de colonne et de tableau ainsi que les menus d'en-têtes pour vous aider à mettre les tableaux en forme. Vous pouvez activer ou désactiver ces informations à votre convenance.

Redimensionnement des colonnes et des lignes

Vous pouvez modifier la largeur d'une colonne ou la hauteur d'une ligne dans l'inspecteur Propriétés ou en faisant glisser les bordures de la colonne ou de la ligne. Si vous avez des problèmes pour le redimensionnement, vous pouvez effacer la largeur des colonnes ou la hauteur des lignes et recommencer.

Remarque :

Vous pouvez aussi modifier la largeur et la hauteur des cellules directement dans le code HTML à l'aide du mode Code.

Dreamweaver affiche la largeur des colonnes, ainsi que les menus des en-têtes de colonne, en haut ou en bas des colonnes lorsque le tableau est sélectionné ou que le point d'insertion se trouve dedans. Vous pouvez activer ou désactiver les menus d'en-têtes de colonne à votre convenance.

Voir aussi

« Utilisation de code de page » à la page 288

DREAMWEAVER CS3


179

Redimensionner des tableaux, des colonnes et des lignes

Redimensionner un tableau

❖

Sélectionnez le tableau.

•

Pour redimensionner le tableau horizontalement, faites glisser la poignée de sélection vers la droite.

•

Pour redimensionner le tableau verticalement, faites glisser la poignée de sélection vers le bas.

•

Pour redimensionner le tableau verticalement et horizontalement, faites glisser la poignée de sélection vers le coin inférieur droit.

Modifier la largeur d'une colonne tout en conservant la même largeur de tableau

❖

Faites glisser la bordure droite de la colonne à modifier.

La largeur de la colonne contiguë est également modifiée, si bien que vous redimensionnez deux colonnes. L'affichage visuel vous montre la manière dont les colonnes seront ajustées, la largeur totale du tableau ne variant pas.

Remarque :

Dans les tableaux avec des largeurs en pourcentage (et non en pixels), si vous faites glisser la bordure droite de l'extrême droite du tableau, la largeur globale du tableau est modifiée et toutes les colonnes s'adaptent proportionnellement.

Modifier la largeur d'une colonne en conservant les dimensions des autres colonnes

❖

Maintenez la touche Maj enfoncée, puis faites glisser la bordure de la colonne.

Seule la largeur de cette colonne change. L'affichage visuel vous montre la manière dont les colonnes seront ajustées, la largeur totale du tableau variant en fonction de la colonne redimensionnée.

Modifier la hauteur d'une ligne visuellement

❖

Faites glisser la bordure inférieure de la ligne.

Uniformiser des largeurs de colonne en mode Code avec les largeurs visuelles

1

Cliquez dans une cellule.

2

Cliquez sur le menu des en-têtes de tableau, puis choisissez Uniformiser toutes les largeurs.

Dreamweaver redéfinit la largeur spécifiée dans le code sur la largeur visuelle.

Effacer toutes les largeurs et les hauteurs définies dans un tableau

1


DREAMWEAVER CS3


180

2


•

Choisissez Modifier > Tableau cellules.

•

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur le bouton Effacer les hauteurs de ligne ou sur le bouton Effacer les largeurs de colonne .

•

Cliquez sur le menu des en-têtes de colonne, puis choisissez Effacer toutes les hauteurs ou Effacer toutes les largeurs.

Effacer une largeur de colonne définie

❖

Cliquez sur le menu des en-têtes de colonne, puis choisissez Effacer les largeurs de colonne.

Activer ou désactiver les menus et la largeur d'un tableau et des colonnes

1

Choisissez Affichage > Assistances visuelles > Largeurs de tableau.

2

Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) dans le tableau, puis choisissez Tableau > Largeurs de tableau.

Ajouter et supprimer des lignes et des colonnes

de colonne.

Le fait d'appuyer sur la touche de tabulation lorsque le curseur se trouve dans la dernière cellule d'un tableau ajoute automatiquement une ligne.

Ajouter une ligne ou une colonne individuelle

❖

Cliquez dans une cellule, puis procédez de l'une des manières suivantes :

•

Choisissez Modifier > Tableau > Insérer une ligne ou Modifier > Tableau > Insérer une colonne.

Une ligne apparaît au-dessus du point d'insertion ou une colonne apparaît à gauche du point d'insertion.

•

Cliquez sur le menu des en-têtes de colonne, puis choisissez Insérer une colonne à gauche ou Insérer une colonne à droite.

Ajouter plusieurs lignes ou colonnes

1

Cliquez dans une cellule.

2

Choisissez Modifier > Tableau > Insérer des lignes ou des colonnes et cliquez sur OK.

Insérer

Indique les lignes ou les colonnes à insérer.

N ombre de lignes

ou Nombre de colonnes indique le nombre de lignes ou de colonnes à insérer.

O

ù

Indique si les nouvelles lignes ou colonnes doivent apparaître avant ou après la ligne ou la colonne de la cellule sélectionnée.

DREAMWEAVER CS3


181

Supprimer une ligne ou une colonne

❖


• Cliquez sur une cellule de la ligne ou de la colonne que vous voulez supprimer, puis choisissez Modifier > Tableau >

Supprimer la ligne ou Modifier > Tableau > Supprimer la colonne.

• Sélectionnez une ligne ou une colonne entière, puis choisissez Edition > Effacer ou appuyez sur Suppr.

Ajouter ou supprimer des lignes ou des colonnes en utilisant l'inspecteur Propriétés

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), procédez de l'une des manières suivantes :

•

Pour ajouter ou supprimer des lignes, augmentez ou réduisez la valeur indiquant le nombre de lignes.

•

Pour ajouter ou supprimer des colonnes, augmentez ou réduisez la valeur indiquant le nombre de colonnes.

Remarque :

Dreamweaver ne vous avertit pas si vous supprimez des lignes et des colonnes contenant des données.

Fractionner et fusionner de cellules

Utilisez l'inspecteur Propriétés ou les commandes du sous-menu Modifier > Tableau pour fractionner ou fusionner des cellules.

Pour fusionner ou fractionner des cellules, Dreamweaver permet également d'augmenter ou de réduire le nombre de lignes et de colonnes occupées par une cellule.

Fusionner deux cellules ou plus d'un tableau

1

Sélectionnez les cellules dans une ligne contiguë et sous forme rectangulaire.

Dans l'illustration ci-dessous, la sélection est un rectangle de cellules ; les cellules peuvent donc être fusionnées.

Dans l'illustration ci-dessous, la sélection n'est pas un rectangle ; les cellules ne peuvent donc pas être fusionnées.

2


• Choisissez Modifier > Tableau > Fusionner les cellules.

• Dans l'inspecteur Propriétés (Fenêtre > Propriétés) en mode agrandi, cliquez sur le bouton Fusionner les cellules .

Remarque :

Si le bouton n'est pas visible, cliquez sur la flèche dans le coin inférieur droit de l'inspecteur Propriétés pour afficher toutes les options.

Le contenu des cellules individuelles est placé dans la cellule produite par la fusion. Les propriétés de la première cellule sélectionnée sont appliquées à la cellule fusionnée.

DREAMWEAVER CS3


182

Fractionner une cellule

1

Cliquez dans une cellule, puis procédez de l'une des manières suivantes :

• Choisissez Modifier > Tableau > Fractionner la cellule.

• Dans l'inspecteur Propriétés (Fenêtre > Propriétés) en mode agrandi, cliquez sur le bouton Fractionner les cellules .

Remarque :

Si le bouton n'est pas visible, cliquez sur la flèche dans le coin inférieur droit de l'inspecteur Propriétés pour afficher toutes les options.

2

Dans la boîte de dialogue Fractionner la cellule, spécifiez comment vous voulez fractionner la cellule :

Fractionner la cellule

Indique comment la cellule doit être fractionnée, en lignes ou en colonnes.

N ombre de lignes/

N ombre de colonnes

Indique en combien de colonnes ou de lignes la cellule doit être fractionnée.

Augmenter ou réduire le nombre de lignes ou de colonnes occupées par une cellule

❖


•

Choisissez Modifier > Tableau > Augmenter l'étendue de ligne ou Modifier > Tableau > Augmenter l'étendue de colonne.

•

Choisissez Modifier > Tableau > Réduire l'étendue de ligne ou Modifier > Tableau > Réduire l'étendue de colonne.

Copier, coller et supprimer des cellules

Vous pouvez copier, coller ou supprimer une ou plusieurs cellules tout en préservant leur mise en forme.

Vous pouvez coller les cellules au niveau d'un point d'insertion ou à la place d'une sélection dans un tableau existant. Pour coller plusieurs cellules de tableau, il faut que le contenu du Presse-papiers soit compatible avec la structure du tableau ou de la sélection du tableau dans laquelle les cellules seront collées.

Couper ou copier les cellules d'un tableau

1

Sélectionnez une ou plusieurs cellules dans une ligne contiguë et sous forme rectangulaire.

Dans l'illustration ci-dessous, la sélection est un rectangle de cellules ; les cellules peuvent donc être coupées ou copiées.

Dans l'illustration ci-dessous, la sélection n'est pas un rectangle ; les cellules ne peuvent donc pas être coupées ou copiées.

2

Choisissez Edition > Couper ou Edition > Copier.

Remarque :

Si vous avez sélectionné une ligne ou une colonne entière et que vous choisissez Edition > Couper, la ligne ou la colonne entière est supprimée du tableau (et non pas seulement le contenu des cellules).

DREAMWEAVER CS3


183

Coller des cellules d'un tableau

1

Choisissez l'emplacement où coller les cellules :

• Pour remplacer des cellules existantes par les cellules que vous collez, sélectionnez une série de cellules existantes dont la mise en forme est la même que celle des cellules du Presse-papiers. (Par exemple, si vous avez copié ou coupé un bloc

• Pour coller une ligne entière de cellules au-dessus d'une cellule spécifique, cliquez dans celle-ci.

• Pour coller une colonne entière de cellules à gauche d'une cellule spécifique, cliquez dans celle-ci.

Remarque :

Si vous avez placé moins d'une ligne ou d'une colonne entière dans le Presse-papiers et que vous cliquez dans une cellule puis collez les cellules figurant dans le Presse-papiers, alors il se peut que la cellule dans laquelle vous avez cliqué et les cellules voisines (selon leur emplacement dans le tableau) soient remplacées par les cellules que vous avez collées.

• Pour créer un nouveau tableau avec les cellules collées, placez le point d'insertion hors du tableau.

2

Choisissez Edition > Coller.

Si vous collez des lignes ou des colonnes entières dans un tableau existant, celles-ci s'ajoutent au tableau. Si vous ne collez qu'une seule cellule, le contenu de la cellule sélectionnée est remplacé. Si vous collez le contenu du Presse-papiers en dehors d'un tableau, les lignes, colonnes ou cellules que vous collez sont utilisées pour définir un nouveau tableau.

Supprimer le contenu d'une cellule en conservant les cellules intactes

1

Sélectionnez une ou plusieurs cellules.

Remarque :

Veillez à ce que la sélection ne comprenne pas de lignes ou de colonnes entières.

2

Choisissez Edition > Effacer ou appuyez sur la touche Suppr.

Remarque :

Si seules des lignes ou des colonnes entières sont sélectionnées lorsque vous choisissez Edition vous appuyez sur Suppr, les lignes ou les colonnes entières (pas seulement leurs contenus) sont supprimées du tableau.

Effacer des lignes ou des colonnes contenant des cellules fusionnées

1

Sélectionnez une ligne ou une colonne.

2

Choisissez Modifier > Tableau > Supprimer la ligne ou Modifier > Tableau > Supprimer la colonne.

Imbriquer des tableaux

Un tableau imbriqué est un tableau à l'intérieur d'une cellule d'un autre tableau. Vous pouvez le mettre en forme comme n'importe quel tableau, mais sa largeur est limitée par la largeur de la cellule dans laquelle il se trouve.

1

Cliquez dans une cellule du tableau.

2

Sélectionnez Insérer > Tableau, définissez les options Tableau et cliquez sur OK.

T

rier des tableaux

Vous pouvez trier les lignes d'un tableau selon le contenu d'une seule colonne. Vous pouvez également effectuer un tri plus complexe, selon le contenu de deux colonnes.

Vous ne pouvez pas trier les tableaux contenant colspan

ou rowspan

, c'est-à-dire les tableaux qui contiennent des cellules fusionnées.

1

Sélectionnez le tableau ou cliquez dans une cellule.

2

Sélectionnez Commandes > Trier le tableau, définissez les options de la boîte de dialogue et cliquez sur OK.

T rier par

Détermine quelles valeurs de colonne utiliser pour trier les lignes du tableau.

O rdre

Détermine comment la colonne doit être triée (dans l'ordre alphabétique ou numérique) et si elle doit être triée par ordre croissant (de A à Z, du chiffre le plus bas au plus élevé) ou par ordre décroissant.

Lorsque le contenu d'une colonne est constitué de chiffres, choisissez Numérique. Un tri par ordre alphabétique appliqué à une liste de nombres à un ou deux chiffres a pour effet de trier les nombres comme s'il s'agissait de mots (ayant pour résultat un ordre du type 1, 10, 2, 20, 3, 30) plutôt que comme des nombres (ayant pour résultat un ordre du type 1, 2, 3, 10, 20, 30).

DREAMWEAVER CS3


184

Puis/

O rdre

Détermine l'ordre de tri du tri secondaire sur une colonne différente. Indiquez la colonne de tri secondaire dans le menu contextuel Puis et l'ordre de tri secondaire dans les menus contextuels Ordre.

Le tri inclut la première ligne

Indique que la première ligne du tableau doit être incluse dans le tri. Si la première ligne correspond à un titre à ne pas déplacer, n'activez pas cette option.

T rier les lignes d'en-tête

Indique que toutes les lignes de la section thead

du tableau (si elle existe) doivent être triées en utilisant les mêmes critères que pour les lignes de la section body. (Les lignes thead

restent dans la section thead

et apparaissent encore en haut du tableau, même après le tri). Pour plus d'informations sur la balise thead

, consultez le panneau Référence (choisissez Aide > Référence).

T rier les lignes de pied de page

Indique que toutes les lignes de la section thead

du tableau (si elle existe) doivent être triées en utilisant les mêmes critères que pour les lignes de la section body. (Les lignes tfoot

restent dans la section tfoot

et apparaissent encore en bas du tableau, même après le tri). Pour plus d'informations sur la balise tfoot

, consultez le panneau

Référence (choisissez Aide > Référence).

Conserver les couleurs des lignes après le tri

Spécifie que les attributs des lignes du tableau (tels que la couleur) doivent rester associés au même contenu après le tri. Si les lignes de votre tableau sont mises en forme avec deux couleurs alternées, n'activez pas cette option pour vous assurer que les lignes du tableau trié s'affichent toujours avec des couleurs alternées. Si les attributs de ligne sont spécifiques au contenu de chaque ligne, sélectionnez cette option pour vous assurer que ces attributs restent associés aux lignes appropriées dans le tableau trié.

Mise en forme des pages avec le mode Mise en forme

A propos du mode Mise en forme

Une méthode courante pour créer une mise en page consiste à utiliser des tableaux HTML pour positionner les éléments.

Les tableaux ont été créés à l'origine pour afficher des données tabulaires et non pour mettre en forme des pages

Web ;Dreamweaver propose un mode Mise en forme pour simplifier l'utilisation de tableaux pour la mise en page.

En mode Mise en forme, effectuez la mise en page à l'aide de cellules et de tableaux de mise en forme, avant d'ajouter du contenu sur votre page. Par exemple, vous pouvez dessiner une cellule le long du bord supérieur de votre page pour y placer une image d'en-tête, une autre cellule sur le côté gauche pour y placer une barre de navigation et une troisième cellule sur la droite pour les contenus. Lorsque vous ajoutez du contenu, vous pouvez déplacer les cellules afin d'ajuster la mise en forme.

Pour bénéficier d'une flexibilité maximale, vous pouvez dessiner chaque cellule uniquement lorsque vous êtes sur le point d'y placer du contenu. Vous pouvez ainsi laisser davantage d'espace vide dans le tableau de mise en forme, afin de pouvoir déplacer ou redimensionner les cellules plus facilement.

DREAMWEAVER CS3


185

Les tableaux de mise en forme s'affichent avec un contour vert et les cellules de mise en forme avec un contour bleu sur votre page. Lorsque vous faites passer le pointeur sur une cellule de tableau, Dreamweaver met la cellule en surbrillance.

(Vous pouvez modifier les couleurs de contour et de surbrillance par défaut dans les préférences.)

Vous pouvez effectuer la mise en forme de votre page à l'aide de plusieurs cellules de mise en forme à l'intérieur d'un même tableau. Il s'agit de la méthode la plus utilisée sur les pages Web. Vous pouvez également effectuer une mise en forme plus sophistiquée à l'aide de plusieurs tableaux. L'utilisation de plusieurs tableaux permet d'isoler certaines zones afin qu'elles ne soient pas affectées par les changements opérés dans d'autres.

Vous pouvez également imbriquer des tableaux, c'est-à-dire insérer un nouveau tableau de mise en forme dans un tableau existant. Ce procédé permet de simplifier la structure du tableau lorsque les lignes ou les colonnes d'une partie de la mise en forme ne sont pas alignées avec celles qui figurent ailleurs dans la mise en forme. Par exemple, en utilisant des tableaux imbriqués, vous pouvez facilement créer une mise en forme à deux colonnes avec quatre lignes dans la colonne gauche et trois lignes dans la colonne droite.

Remarque :

Vous pouvez également effectuer la mise en page à l'aide du positionnement CSS au lieu d'utiliser des tableaux en mode Standard ou Mise en forme.

Voir aussi


Affichage de la largeur des tableaux et des cellules en mode Mise en forme

La largeur des tableaux et des cellules de mise en forme (en pixels ou en pourcentage de la largeur de la page) s'affiche en haut ou en bas du tableau lorsque celui-ci est sélectionné ou lorsque le point d'insertion se trouve à l'intérieur. Près de la largeur se trouvent des flèches permettant d'ouvrir les menus d'en-tête de tableau et de colonne. Vous pouvez accéder rapidement à des commandes courantes à l'aide de ces menus.

Remarque :

Pour désactiver la largeur des colonnes, ainsi que les onglets de tableau et les menus d'en-tête, vous devez désactiver toutes les assistances visuelles (Affichage > Assistances visuelles > Masquer tout).

•

Absence de largeur. Si vous ne voyez pas la largeur d'un tableau ou d'une colonne, cela signifie qu'elle n'est pas spécifiée dans le code HTML.

DREAMWEAVER CS3


186

•

Deux nombres. Si deux nombres s'affichent, cela signifie que la largeur visuelle qui apparaît en mode Création est différente de la largeur spécifiée dans le code HTML. Cela peut se produire lorsque vous redimensionnez un tableau en faisant glisser son coin inférieur droit ou lorsque vous ajoutez du contenu à une cellule plus grande que sa valeur définie.

Par exemple, si vous définissez une largeur de colonne de 200 pixels, puis que vous ajoutez du contenu qui étend la largeur

à 250 pixels, deux nombres s'affichent en haut de la colonne : 200 (la largeur spécifiée dans le code) et (250) entre parenthèses (la largeur visuelle de la colonne telle qu'elle apparaît à l'écran).

•

Ligne ondulée. Une ligne ondulée s'affiche pour les colonnes dont l'option Extension automatique est activée.

•

Barre double. La largeur des colonnes qui contiennent des images d'espacement est entourée d'une barre double.

T

ableau de mise en forme et lignes de grille de cellules

Lorsque vous dessinez une cellule de mise en forme dans un tableau, une fine grille de lignes s'affiche, prolongeant les bords de la nouvelle cellule jusqu'aux bords du tableau qui la contient. Ces lignes vous aident à aligner les nouvelles cellules avec les anciennes et à visualiser la structure du tableau HTML sous-jacent. La grille Dreamweaver est fixe et ne change pas en fonction de la disposition des cellules ; vous pouvez donc l'utiliser pour la mise en forme de votre page.

Dreamweaver aligne automatiquement les bords des nouvelles cellules sur ceux des anciennes. Les cellules de mise en forme ne peuvent pas se chevaucher. Les bords des cellules sont automatiquement alignés sur ceux du tableau de mise en forme qui les contient si vous dessinez une cellule à proximité du bord d'un tableau.

Voir aussi


Largeur de colonne fixe et colonnes à extension automatique

En mode Mise en forme, une colonne peut avoir une largeur fixe ou une largeur qui s'étend automatiquement pour remplir autant que possible la fenêtre du navigateur ( extension automatique ).

Les colonnes à largeur fixe

Ont une largeur numérique spécifique, par exemple 300 pixels. Dreamweaver affiche la largeur de chaque colonne à largeur fixe en haut ou en bas de la colonne.

Les colonnes à extension automatique

Changent automatiquement selon la largeur de la fenêtre du navigateur. Si votre mise en forme inclut une colonne d'extension automatique, elle remplit toujours la largeur totale de la fenêtre de navigateur de l'utilisateur. Dans un tableau de mise en forme, vous ne pouvez appliquer l'extension automatique qu'à une seule colonne.

Une ligne ondulée s'affiche dans la zone de largeur des colonnes à extension automatique.

La mise en page la plus courante consiste à appliquer l'extension automatique à la colonne qui contient le plus grand nombre de données, la largeur fixe étant attribuée à toutes les autres colonnes. Supposons, par exemple, que votre mise en page comporte une grande image sur le côté gauche de votre page et une colonne de texte sur la droite. Vous pouvez dans ce cas définir une largeur fixe pour la colonne de gauche et une extension automatique pour la zone d'encadré.

Lorsque vous attribuez une extension automatique à une colonne, Dreamweaver insère des images d'espacement dans les colonnes à largeur fixe pour garantir que ces colonnes conservent une largeur appropriée, sauf si vous désactivez cette option. Une image d'espacement est une image transparente, donc invisible dans la fenêtre du navigateur, utilisée pour contrôler l'espacement.

Images d'espacement

Une image d'espacement (également appelée GIF d'espacement ) est une image transparente utilisée pour contrôler l'espacement dans des tableaux à extension automatique. Il s'agit d'une image GIF transparente d'un seul pixel, qu'il est possible d'étendre à une largeur bien précise en termes de pixels. Un navigateur ne peut pas dessiner une colonne de tableau plus étroite que l'image la plus large contenue dans une des cellules de cette colonne. Par conséquent, placer une image d'espacement dans la colonne d'un tableau nécessite des navigateurs pour conserver une largeur de colonne au moins aussi large que l'image.

DREAMWEAVER CS3


187

Dreamweaver ajoute automatiquement des images d'espacement lorsque vous appliquez l'extension automatique à une colonne, sauf si vous spécifiez qu'aucune image d'espacement ne doit être utilisée. Vous pouvez également insérer et supprimer manuellement des images d'espacement dans chaque colonne. Les colonnes qui contiennent des images d'espacement ont une barre double dans la zone de largeur.

Vous pouvez insérer et supprimer manuellement des images d'espacement dans des colonnes spécifiques ou supprimer toutes les images d'espacement de la page.

Basculer du mode Standard au mode Mise en forme

Avant de dessiner des tableaux ou des cellules de mise en forme, vous devez passer du mode Standard au mode Mise en forme. Il est plus facile de créer des tableaux de mise en forme en mode Mise en forme qu'en mode Standard, mais il est judicieux de revenir en mode Standard avant d'ajouter du contenu à vos tableaux ou de les modifier.

Remarque :

Si vous créez un tableau en mode Standard, puis que vous basculez en mode Mise en forme, le tableau créé peut contenir des cellules de mise en forme vides. Vous devrez peut-être supprimer ces cellules vides avant de créer ou de déplacer des cellules.

Basculer en mode Mise en page :

1

Si vous travaillez en mode Code, basculez en mode Création en choisissant Affichage > Création ou Affichage >Code et création.

Remarque :

Vous ne pouvez pas passer du mode Code au mode Mise en forme.

2

Choisissez Affichage > Mode Tableau > Mode Mise en forme.

Une barre étiquetée Mode Mise en forme s'affiche en haut de la fenêtre de document. Si votre page comporte des tableaux, ceux-ci s'affichent sous forme de tableaux de mise en forme.

Quitter le mode Mise en forme :

❖


•

Cliquez sur [quitter] sur la barre étiquetée Mode Mise en forme située en haut de la fenêtre de document.

•

Choisissez Affichage > Mode Tableau > Mode Standard.

•

Dans la catégorie Mise en forme de la barre Insertion, cliquez sur le bouton Standard.

Dreamweaver repasse en mode Standard.

Réaliser des dessins en mode Mise en forme

Le mode Mise en forme vous permet de dessiner des cellules et des tableaux, y compris des tableaux imbriqués dans d'autres tableaux. La grille d'alignement vous aide à aligner les cellules.

Lorsque vous créez une cellule de mise en forme à l'extérieur d'un tableau de mise en forme, Dreamweaver crée automatiquement un tableau de mise en forme pour contenir cette cellule, Une cellule de mise en forme ne peut pas exister en dehors d'un tableau.

Remarque :

En mode Mise en forme, vous ne pouvez pas utiliser les outils Insérer un tableau et Tracer un div pour un élément

PA, disponibles uniquement en mode Standard. Pour utiliser ces outils, vous devez d'abord basculer en mode Standard.

Si Dreamweaver crée automatiquement un tableau de mise en forme, celui-ci remplit la page entière du mode Création, même si vous modifiez la taille de votre fenêtre de document. Ce tableau vous permet de dessiner des cellules de mise en forme à n'importe quel endroit en mode Création. Vous pouvez définir une taille spécifique pour le tableau en cliquant sur une bordure et en faisant glisser les poignées de redimensionnement.

Lorsque vous faites passer le pointeur sur une cellule de mise en forme, Dreamweaver la met en surbrillance. Vous pouvez activer ou désactiver la surbrillance ou en changer la couleur dans les préférences.

DREAMWEAVER CS3


188

Vous pouvez dessiner un tableau de mise en forme à l'intérieur d'un autre tableau de mise en forme pour créer un tableau imbriqué. Les cellules qui se trouvent à l'intérieur d'un tableau imbriqué ne sont pas affectées par les modifications apportées au tableau externe. Par exemple, lorsque vous modifiez la taille d'une ligne ou d'une colonne dans ce tableau, la taille des cellules du tableau interne ne change pas.

Vous pouvez constituer plusieurs niveaux de tableaux imbriqués. Un tableau de mise en forme imbriqué ne peut pas être plus grand que le tableau qui le contient.

Remarque :

Si vous dessinez un tableau de mise en forme au milieu de votre page avant de dessiner une cellule de mise en forme, ce tableau est automatiquement imbriqué dans un tableau plus grand.

Voir aussi


Créer une cellule de mise en forme

1

Assurez-vous que vous êtes en mode Mise en forme (et non en mode Standard).

2

Choisissez Insertion > Objets mise en forme > Cellule de Mise en forme.

3

Positionnez le pointeur en réticule (+) à l'endroit où vous souhaitez placer la cellule sur la page, puis faites glisser le pointeur pour créer la cellule de mise en forme.

Pour dessiner plusieurs cellules de mise en forme sans avoir à sélectionner plusieurs fois l'élément de menu, maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée pendant que vous dessinez plusieurs cellules de mise en forme

à la suite. Tant que vous maintenez la touche Ctrl ou Commande enfoncée, vous pouvez dessiner des cellules de mise en forme les unes après les autres

Si vous dessinez la cellule près du bord du tableau de mise en forme, les bords de la cellule s'alignent automatiquement sur les bords du tableau. Pour désactiver temporairement l'alignement, maintenez la touche Alt (Windows) ou Option

(Macintosh) enfoncée pendant que vous dessinez la cellule.

La cellule s'affiche sur votre page avec un contour bleu (vous pouvez modifier la couleur de la mise en surbrillance dans les préférences).

Dessiner un tableau de mise en forme

1


2

Choisissez Insertion > Objets mise en forme > Tableau de Mise en forme.

3

Placez le pointeur en réticule (+) sur la page, puis faites-le glisser pour créer le tableau de mise en forme.

Pour dessiner plusieurs tableaux de mise en forme sans avoir à sélectionner plusieurs fois l'élément de menu, maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée pendant que vous dessinez plusieurs tableaux de mise en forme à la suite. Tant que vous maintenez la touche Ctrl ou Commande enfoncée, vous pouvez dessiner des tableaux de mise en forme les uns après les autres

Vous pouvez créer un tableau de mise en forme dans une zone vide de votre mise en page, autour d'autres cellules et tableaux ou à l'intérieur d'un tableau existant. Si votre page contient des éléments et que vous souhaitez ajouter un tableau de mise en forme dans une zone vide de votre mise en page, vous pouvez dessiner un nouveau tableau de mise en forme uniquement sous le contenu existant.

Si vous essayez de dessiner un tableau de mise en forme sous du contenu existant et que le pointeur ne vous le permet pas, redimensionnez la fenêtre de document pour créer davantage d'espace vide entre le bas du contenu existant et celui de la fenêtre.

Remarque :

Les tableaux ne peuvent pas se chevaucher, mais un tableau peut en contenir un autre.

Le tableau de mise en forme s'affiche sur votre page avec un contour vert (vous pouvez modifier la couleur de la mise en surbrillance dans les préférences).

Modifier les préférences de surbrillance des cellules de mise en forme

1


DREAMWEAVER CS3


189

2

Sélectionnez la catégorie Surbrillance dans la liste.

3

Effectuez l'une des modifications suivantes, puis cliquez sur OK.

•

Pour changer la couleur de surbrillance, cliquez sur la case de couleur Survol, puis sélectionnez une couleur de surbrillance à l'aide du sélecteur de couleur (ou entrez la valeur hexadécimale correspondant à la couleur de surbrillance dans la zone de texte).

•

Pour activer ou désactiver la mise en surbrillance, activez ou désactivez l'option Afficher de la case Survol.

Remarque :

Ces options s'appliquent à tous les objets, tels que les tableaux et les éléments à positionnement absolu, qui sont mis en surbrillance lorsque vous faites passer le pointeur dessus.

Dessiner un tableau de mise en forme imbriqué

1


2


3

Placez le pointeur en réticule (+) dans une zone vide (grise) d'un tableau de mise en forme existant, puis faites-le glisser afin de créer le tableau imbriqué.

Remarque :

Vous ne pouvez pas créer de tableau à l'intérieur d'une cellule de mise en forme. Vous pouvez créer un tableau de mise en forme imbriqué uniquement dans une zone vide d'un tableau existant ou autour de cellules existantes.

Dessiner un tableau de mise en forme autour de cellules ou de tableaux de mise en forme existants

1


2


3

Faites glisser le pointeur en réticule (+) pour dessiner un rectangle autour d'un ensemble de cellules ou de tableaux de mise en forme existants. Un nouveau tableau imbriqué apparaît autour des cellules ou tableaux existants.

Si vous souhaitez qu'une cellule de mise en forme existante s'adapte parfaitement à un coin du nouveau tableau imbriqué, faites-la glisser vers l'emplacement souhaité ; le coin du nouveau tableau s'aligne avec celui de la cellule. Vous ne pouvez pas opérer de glissement à partir du milieu d'une cellule de mise en forme, car il est impossible de créer de tableau à l'intérieur d'une cellule de mise en forme.

Ajouter un contenu dans une cellule de mise en forme

En mode Mise en forme, vous pouvez ajouter du texte, des images ou tout autre contenu à des cellules de mise en forme tout comme vous le feriez en mode Standard. Cliquez dans la cellule où vous souhaitez insérer un contenu, puis entrez du texte ou insérez un autre contenu.

Vous ne pouvez pas insérer du contenu dans une zone vide (grise) d'un tableau de mise en forme, c'est pourquoi vous devez créer des cellules de mise en forme avant d'ajouter du contenu.

La cellule de mise en forme s'étend automatiquement au fur et à mesure que vous y ajoutez des données. Lorsque la cellule s'étend, la colonne contenant cette cellule s'étend également, ce qui peut modifier la taille des cellules voisines. La largeur de cette colonne affiche la largeur qui apparaît dans le code, suivie de la largeur visuelle de la colonne (telle qu'elle apparaît sur votre écran) entre parenthèses.

Voir aussi


Ajouter du texte dans une cellule de mise en forme

1

Placez le point d'insertion dans la cellule de mise en forme où vous souhaitez ajouter du texte.

2


•

Tapez un texte dans la cellule (la cellule s'étend automatiquement au fur et à mesure de la saisie).

•

Collez du texte copié depuis un autre document.

DREAMWEAVER CS3


190

Ajouter une image dans une cellule de mise en forme

1

Placez le point d'insertion dans la cellule de mise en forme où vous souhaitez ajouter l'image.

2

Choisissez Insertion > Image.

3

Sélectionnez un fichier d'image et cliquez sur OK.

Effacer les hauteurs de cellules

Lorsque vous créez une cellule de mise en forme, Dreamweaver spécifie automatiquement une hauteur pour la cellule, afin que celle-ci, même vide, s'affiche à la hauteur que vous avez dessinée. Une fois que vous avez inséré du contenu dans la cellule, il n'est pas forcément nécessaire de spécifier la hauteur. Vous pouvez alors supprimer les hauteurs de cellule explicites du tableau.

❖

Sélectionnez un tableau de mise en forme en cliquant sur l'onglet en haut du tableau, puis cliquez sur Effacer les hauteurs de ligne dans l'inspecteur Propriétés (Fenêtre > Propriétés) .

Dreamweaver efface toutes les hauteurs spécifiées dans le tableau. Il se peut que certaines cellules se rétrécissent verticalement.

Redimensionner et déplacer des cellules et des tableaux de mise en forme

Afin d'ajuster la mise en page, vous pouvez déplacer et redimensionner des cellules de mise en forme et des tableaux de mise en forme imbriqués. (Le tableau de mise en forme le plus à l'extérieur peut uniquement être redimensionné.)

Lorsque vous redimensionnez ou déplacez des cellules de mise en forme, vous ne pouvez pas les faire se chevaucher. Par ailleurs, vous ne pouvez pas déplacer ou redimensionner une cellule au-delà des limites du tableau qui la contient. La taille d'une cellule de mise en forme ne peut pas être inférieure à son contenu.

Voir aussi


Redimensionner une cellule de mise en forme

1

Pour sélectionner la cellule, cliquez sur un de ses bords ou maintenez la touche Ctrl (Windows) ou Commande

(Macintosh) enfoncée, puis cliquez n'importe où dans la cellule.

2

Faites glisser l'une des poignées de sélection pour redimensionner la cellule.

Les bords de la cellule s'alignent automatiquement sur ceux des autres cellules.

Déplacer une cellule de mise en forme

1



2


•

Faites glisser la cellule vers un autre emplacement à l'intérieur du tableau de mise en forme.

•

Appuyez sur les touches fléchées pour déplacer la cellule par incréments de 1

Maintenez la touche Maj enfoncée tout en appuyant sur une touche directionnelle pour déplacer la cellule par incréments de 10 pixels.

DREAMWEAVER CS3


191

Redimensionner un tableau de mise en forme

1

Sélectionnez un tableau en cliquant sur l'onglet en haut du tableau.

2

Faites glisser ces poignées de sélection pour redimensionner le tableau.

Les bords du tableau s'alignent automatiquement sur ceux des autres cellules et tableaux.

Déplacer un tableau de mise en forme

1


Remarque :

Vous pouvez déplacer un tableau de mise en forme uniquement si celui-ci est imbriqué dans un autre tableau de mise en forme.

2


•

Faites glisser le tableau vers un autre emplacement sur la page.

•

Appuyez sur les touches fléchées pour déplacer le tableau par incréments de 1

Maintenez la touche Maj enfoncée tout en appuyant sur une touche directionnelle pour déplacer le tableau par incréments de 10 pixels.

Formater les cellules et les tableaux de mise en forme

Dans l'inspecteur Propriétés, vous pouvez définir différents attributs pour votre cellule de mise en forme, notamment la largeur et la hauteur, la couleur d'arrière-plan et l'alignement du contenu.

Formater une cellule de mise en forme dans l'inspecteur Propriétés

1



2

Ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés), et définissez les propriétés de formatage de la cellule.

Fixe

Définit une largeur fixe pour la cellule. Saisissez une largeur (en pixels) dans la zone de texte voisine.

Extension auto

Entraîne l'extension automatique de la cellule.

Hauteur

Définit la hauteur de la cellule (en pixels).

Ar-pl

Désigne la couleur d'arrière-plan de la cellule de mise en forme. Cliquez sur la case de couleur et choisissez une couleur dans le sélecteur de couleur ou saisissez un nombre hexadécimal correspondant à une couleur dans la zone de texte voisine.

Horiz

Définit l'alignement horizontal du contenu de la cellule. Vous pouvez définir l'alignement sur Gauche, Centre,

Droit ou Par défaut.

Vert.

Définit l'alignement vertical du contenu de la cellule. Vous pouvez définir l'alignement sur Haut, Milieu, Bas, Ligne de base ou Par défaut.

Pas de retour à la ligne auto

Empêche le renvoi des mots à la ligne. Lorsque cette option est sélectionnée, la cellule de mise en forme s'élargit de manière à intégrer l'ensemble du texte au lieu de renvoyer celui-ci à la ligne.

3


Définir les propriétés d'un tableau de mise en forme

1


2

Ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés), et définissez les propriétés de formatage du tableau, et appuyez sur

Tab ou Entrée (Windows) ou Retour (Macintosh) pour l'appliquer.

Fixe

Définit une largeur fixe en pixels pour le tableau.

Extension auto

Entraîne l'extension automatique de la colonne la plus à droite du tableau.

Hauteur

Désigne la hauteur du tableau (en pixels).

DREAMWEAVER CS3


192

Remplissage

Correspond à l'espace entre le contenu de la cellule de mise en forme et son contour (en pixels). Si vous modifiez le remplissage des cellules et qu'une largeur de colonne est affichée entre parenthèses pour votre tableau de mise en forme, choisissez l'option Uniformiser toutes les largeurs.

Espac. de cellule

Correspond à l'espace entre les cellules de mise en forme voisines (en pixels). Si vous modifiez l'espacement des cellules et qu'une largeur de colonne est affichée entre parenthèses pour votre tableau de mise en forme, choisissez l'option Uniformiser toutes les largeurs.

Effacer hauteurs de ligne

Supprime les paramètres de hauteur pour toutes les cellules du tableau de mise en forme.

Dreamweaver spécifie des hauteurs de cellule afin d'afficher votre mise en forme telle que vous l'avez dessinée, même si certaines cellules sont vides. Par conséquent, vous devez sélectionner cette option uniquement après avoir placé du contenu dans les cellules de mise en forme, sinon les cellules vides risquent de se réduire verticalement.

Remarque :

L'effacement des hauteurs de ligne peut avoir des effets inattendus sur les zones vides (grises) du tableau de mise en forme (c'est-à-dire les zones qui ne contiennent pas de cellules). En particulier, certaines lignes vides peuvent être totalement supprimées du tableau et celui-ci est susceptible de se réduire verticalement.

Uniformiser toutes les largeurs

Redéfinit la largeur spécifiée dans le code HTML pour chaque cellule du tableau afin qu'elle corresponde à la largeur du contenu à l'intérieur de cette cellule, si votre mise en forme comporte des cellules à largeur fixe.

Supprimer toutes les images d'espacement

Supprime les images d'espacement (les images transparentes utilisées pour contrôler l'espacement dans votre mise en forme) de votre tableau de mise en forme.

Remarque :

La suppression des images d'espacement peut entraîner un rétrécissement important de certaines colonnes de votre tableau. De manière générale, évitez de modifier l'emplacement des images d'espacement, à moins que chaque colonne contienne d'autres données permettant de maintenir la colonne à la largeur désirée.

Supprimer l'imbrication

Supprime un tableau de mise en forme imbriqué dans un autre, tout en préservant son contenu.

Le tableau de mise en forme interne disparaît ; les cellules de mise en forme qu'il contient deviennent partie intégrante du tableau externe.

Définir la largeur d'une colonne

Vous pouvez attribuer une largeur spécifique à une colonne ou la laisser s'étendre automatiquement pour remplir autant que possible la fenêtre du navigateur (extension automatique). Vous pouvez également attribuer une largeur minimale à une colonne à l'aide d'une image d'espacement.

La première fois que vous insérez une image d'espacement, vous devez en définir une pour le site. Vous pouvez définir des préférences pour les images d'espacement.

L'application de l'extension automatique à une colonne avant d'avoir terminé la mise en forme peut avoir des effets inattendus sur la mise en forme du tableau. Pour empêcher les colonnes de s'élargir ou de rétrécir inopinément, créez votre mise en forme avant d'appliquer l'extension automatique à une colonne, et utilisez des images d'espacement à ce moment.

(Cependant, si chaque colonne contient des données susceptibles de maintenir la colonne à la largeur désirée, vous n'avez pas besoin d'utiliser d'images d'espacement.)

Si vous voyez deux nombres indiquant la largeur d'une colonne, cela signifie que la largeur de colonne définie dans le code

HTML est différente de la largeur apparente à l'écran. Vous pouvez uniformiser la largeur spécifiée dans le code et la largeur visuelle.

Remarque :

Vous devez être en mode Mise en forme pour utiliser ces options. Notez également que le menu des colonnes se trouve pas fois au niveau du bord inférieur des colonnes.

Appliquer l'extension automatique à une colonne

1


• Cliquez sur le menu des en-têtes de colonne, puis choisissez Extension automatique de la colonne.

DREAMWEAVER CS3


193

• Pour sélectionner une cellule dans la colonne, cliquez sur l'un des bords de la cellule, et choisissez Extension automatique dans l'inspecteur Propriétés.

Remarque :

Dans un tableau, vous ne pouvez appliquer l'extension automatique qu'à une seule colonne.

2

(Facultatif) Si vous n'avez pas défini d'image d'espacement pour ce site, la boîte de dialogue Choisissez l'image d'espacement s'affiche et vous pouvez définir quelle image utiliser, puis cliquez sur OK.

Une ligne ondulée apparaît en haut ou en bas de la colonne à extension automatique. Une double barre apparaît en haut ou en bas des colonnes qui contiennent des images d'espacement.

Définir une largeur fixe pour une colonne

❖


•

Cliquez sur le menu des en-têtes de colonne, puis choisissez Créer une colonne Largeur fixe. L'option Créer une colonne

Largeur fixe attribue une largeur à la colonne (dans le code) correspondant à sa largeur visuelle actuelle.

•

Pour sélectionner une cellule dans la colonne, cliquez sur l'un des bords de la cellule, puis sélectionnez Fixe et tapez une valeur numérique dans l'inspecteur Propriétés. Si vous entrez une valeur inférieure à la largeur du contenu de la colonne,

Dreamweaver définit une largeur correspondant à celle du contenu.

La largeur de la colonne apparaît en haut ou en bas de la colonne.

Insérer une image d'espacement dans une colonne

Si vous appliquez une extension automatique à une colonne, vous pouvez choisir d'utiliser une image d'espacement et décider quelle image d'espacement utiliser. L'image ne s'affiche pas à l'écran, mais la colonne peut se décaler légèrement et une double barre s'affiche en haut ou en bas de la colonne pour indiquer qu'elle contient une image d'espacement.

1

Cliquez sur le menu des en-têtes de colonne, puis choisissez Ajouter image d'espacement.

2

Si vous n'avez pas défini d'image d'espacement pour ce site, dans la boîte de dialogue Choisissez l'image d'espacement, sélectionnez l'image à utiliser, puis cliquez sur OK.

Créer un fichier image d'espacement

Crée une image GIF que vous pourrez utiliser comme image d'espacement, et vous permet de choisir un dossier où stocker le fichier image d'espacement, tel que le dossier d'images de votre site. Cette option est recommandée, sauf si vous avez déjà créé un fichier image d'espacement pour votre site.

Utiliser un fichier image d'espacement existant

Vous permet de spécifier un fichier d'image existant que vous pourrez utiliser dans les tableaux avec extension automatique. L'image d'espacement doit être une image GIF transparente de

1 pixel.

N e pas utiliser d'images d'espacement pour les tableaux d'extension automatique

Spécifie que Dreamweaver ne doit pas automatiquement ajouter des images d'espacement aux tableaux.. (Cette option ne s'affiche pas si vous insérez une image d'espacement sans appliquer l'extension automatique à une colonne.) Si vous activez cette option, les colonnes à largeur fixe

DREAMWEAVER CS3


194

de votre mise en forme risquent de devenir très étroites ou même de disparaître. Les images d'espacement permettent de préserver la structure originale de votre mise en forme. Utilisez cette option uniquement si vous avez déjà placé un contenu suffisant dans vos colonnes à largeur fixe pour les empêcher de se réduire ou si vous avez déjà ajouté manuellement des images d'espacement.

Supprimer une image d'espacement d'une seule colonne

❖

Cliquez sur le menu des en-têtes de colonne et choisissez Supprimer image d'espacement.

Remarque :

Il est possible que la colonne se déplace une fois que l'image d'espacement est supprimée.

Supprimer toutes les images d'espacement d'un tableau

❖


•

Cliquez sur le menu des en-têtes de tableau et sélectionnez Supprimer toutes les images d'espacement.

•

Sélectionnez le tableau et cliquez sur Supprimer toutes les images d'espacement dans l'inspecteur Propriétés (Fenêtre >

Propriétés) .

Remarque :

La mise en forme de votre tableau peut changer. Si certaines colonnes sont vides, elles risquent de disparaître complètement en mode Création.

Uniformiser toutes les largeurs

❖


•

Cliquez sur le menu des en-têtes de tableau et sélectionnez Uniformiser toutes les largeurs.

•

Sélectionnez le tableau et cliquez sur Supprimer toutes les images d'espacement dans l'inspecteur Propriétés (Fenêtre >

Propriétés) .

Dreamweaver redéfinit la largeur spécifiée dans le code sur la largeur visuelle.

Définir des préférences pour le mode Mise en forme

Vous pouvez spécifier des préférences pour les fichiers d'image d'espacement et les couleurs utilisées par Dreamweaver pour dessiner les tableaux et les cellules de mise en forme.

1


2

Sélectionnez la catégorie Mode Mise en forme dans la liste, définissez les préférences pour le mode Mise en forme, et cliquez sur OK.

Insertion auto d'images d'espacement

spécifie si Dreamweaver doit insérer des images d'espacement automatiquement lorsque vous appliquez l'extension automatique à une colonne.

Remarque :

Si vous choisissez de ne pas utiliser d'images d'espacement dans les tableaux à extension automatique, les colonnes

à largeur fixe peuvent changer de taille, voire disparaître complètement en mode Création si elles ne contiennent pas de données.

(Les colonnes continuent d'exister dans le code, même si elles n'apparaissent pas en mode Création.)

Image d'espacement

Définit le fichier image d'espacement de vos sites.

Choisissez un site dans le menu Pour le site, puis cliquez sur le bouton Créer pour créer un nouveau fichier image d'espacement ou cliquez sur le bouton Parcourir pour rechercher un fichier image d'espacement existant dans ce site.

Contour des cellules

Définit la couleur utilisée pour dessiner le contour des cellules de mise en forme.

Mise en surbrillance des cellules

pointeur dessus.

Définit la couleur utilisée pour mettre une cellule en surbrillance lorsque vous placez le

DREAMWEAVER CS3


195

Contour de tableau

Définit la couleur utilisée pour dessiner le contour des tableaux de mise en forme.

Arrière-plan de tableau

forme.

Définit la couleur utilisée pour les zones des tableaux ne contenant aucune cellule de mise en

Utilisation de cadres

Fonctionnement des cadres et des jeux de cadres

La partie d'une fenêtre du navigateur pouvant afficher un document HTML indépendamment de ce qui apparaît dans le reste de la fenêtre constitue un cadre . Les cadres permettent de diviser une fenêtre du navigateur en plusieurs zones, chacune d'entre elles pouvant afficher un document HTML distinct. En règle générale, un premier cadre affiche un document avec des commandes de navigation tandis qu'un autre cadre affiche un document avec le contenu principal.

Un jeu de cadres est un fichier HTML qui définit la mise en forme et les propriétés de plusieurs cadres, dont le nombre, la taille et l'emplacement des cadres, ainsi que l'URL de la page qui s'affiche initialement dans chaque cadre. Le fichier du jeu de cadres ne contient pas de contenu HTML qui s'affiche dans un navigateur, à l'exception de la section noframes

; il fournit simplement au navigateur des informations sur la mise en forme d'un jeu de cadres et les documents qu'il doit afficher.

Pour afficher un jeu de cadres dans un navigateur, tapez l'URL du fichier correspondant. Le navigateur ouvre ensuite les documents qui devront être affichés dans les cadres. Le fichier du jeu de cadres relatif à un site s'appelle généralement index.html et s'affiche par défaut si le visiteur ne spécifie pas de nom de fichier.

L'exemple suivant présente une mise en forme de cadre contenant trois cadres : un cadre étroit qui contient la barre de navigation dans la partie latérale, un cadre en haut du document contenant le logo et le titre d'un site Web et un grand cadre avec le contenu principal qui occupe le reste de la page. Chacun de ces cadres affiche un document HTML distinct.

Dans cet exemple, le document affiché dans le cadre supérieur ne change jamais lorsque les visiteurs consultent le site. La barre de navigation du cadre latéral contient des liens qui, lorsqu'ils sont activés, modifient le contenu du cadre principal, mais pas le contenu du cadre latéral. Le cadre de contenu principal à droite affiche le document correspondant à tous les liens activés par le visiteur dans la partie gauche.

Un cadre n'est pas un fichier ; on pourrait croire que le document affiché dans un cadre fait partie intégrante de ce dernier, mais ce n'est pas le cas. Le cadre contient le document.

DREAMWEAVER CS3


196

Remarque :

Une « page » peut désigner un seul document HTML ou l'ensemble du contenu d'une fenêtre du navigateur à un utilise des cadres » s'applique généralement à un jeu de cadres et aux documents qui y figurent.

Tout site affiché dans un navigateur sous forme d'une page unique constituée de trois cadres contient en fait au moins quatre documents HTML, à savoir, le fichier du jeu de cadres et les trois documents incluant le contenu qui s'affiche initialement dans les cadres. Lorsque vous concevez une page à l'aide de jeux de cadres dans Dreamweaver, vous devez enregistrer chacun de ces quatre fichiers pour que la page s'affiche correctement dans le navigateur.

Choix de l'utilisation des cadres

Les cadres sont le plus souvent utilisés pour la navigation. Un jeu de cadres inclut généralement un cadre contenant une barre de navigation et un cadre destiné à afficher le contenu principal.

Dans la plupart des cas, vous pouvez créer une page Web sans cadre qui permet d'obtenir les mêmes résultats qu'avec un jeu de cadres. Par exemple, si vous voulez afficher une barre de navigation à gauche de la page, vous pouvez remplacer la page par un jeu de cadres ou simplement inclure la barre de navigation sur chacune des pages du site (Dreamweaver vous permet de créer plusieurs pages dont la mise en forme est identique.) Dans l'exemple suivant, la mise en forme de la page ressemble à une mise en forme avec cadres, mais elle n'en contient pas.

Les sites Web mal conçus utilisent des cadres de façon inutile, avec, par exemple, un jeu de cadres qui recharge le contenu des cadres de navigation chaque fois que le visiteur clique sur un bouton de navigation. S'ils sont correctement utilisés (par exemple, pour immobiliser les commandes de navigation dans un cadre tout en permettant de modifier le contenu d'un autre cadre), les cadres peuvent être très utiles dans un site.

La prise en charge des cadres varie en fonction du navigateur utilisé. En outre, la navigation des cadres peut s'avérer difficile pour les visiteurs souffrant de handicaps. Par conséquent, si vous utilisez des cadres, incorporez systématiquement une section noframes

dans votre jeu de cadres pour les visiteurs qui ne peuvent pas les visualiser. Vous pouvez également fournir un lien explicite vers une version sans cadre du site.

Avantages de l'utilisation de cadres :

•

Le navigateur d'un visiteur n'a pas besoin de recharger les graphiques liés à la navigation à chaque page.

•

Chaque cadre possède sa propre barre de défilement (si le contenu ne tient pas entièrement dans une fenêtre) pour que le visiteur puisse faire défiler les cadres indépendamment les uns des autres. Par exemple, un visiteur ayant fait défiler une longue page de contenu jusqu'en bas n'est pas obligé de la faire défiler à nouveau vers le haut pour afficher la barre de navigation si celle-ci figure dans un autre cadre.

DREAMWEAVER CS3


197

Inconvénients de l'utilisation de cadres :

•

L'alignement graphique des éléments de différents cadres n'est pas toujours précis.

•

Le test de la navigation peut être long.

•

Comme l'URL de chacune des pages contenues dans les cadres n'est pas affichée dans le navigateur, les visiteurs risquent de ne pas pouvoir ajouter de signet à une page donnée (à moins que vous ne fournissiez le code du serveur permettant de charger la version avec cadres d'une page).

Jeux de cadres imbriqués

Un jeu de cadres imbriqué est un jeu de cadres situé à l'intérieur d'un autre jeu de cadres. Un fichier de jeu de cadres peut contenir plusieurs jeux de cadres imbriqués. La plupart des pages Web avec des cadres utilisent en fait des cadres imbriqués, de même que la plupart des jeux de cadres prédéfinis dans Dreamweaver. Tout jeu de cadres comportant un nombre différent de cadres dans différentes lignes ou colonnes doit être imbriqué.

Par exemple, la mise en forme de cadre la plus courante affiche un cadre sur la ligne supérieure (où figure le logo de l'entreprise) et deux cadres sur la ligne inférieure (cadre de navigation et cadre de contenu). Dans ce cas, un jeu de cadres doit être imbriqué : vous obtenez alors un jeu de cadres de deux lignes et un jeu de cadres de deux colonnes imbriqué dans la deuxième ligne.

A

B

A.

Jeu de cadres principal

B.

Le cadre de menus et le cadre de contenu sont imbriqués dans le jeu de cadres principal.

Dreamweaver gère automatiquement l'imbrication des jeux de cadres. Si vous faites appel aux outils de fractionnement de cadre dans Dreamweaver, le programme se charge de définir les cadres qui doivent être imbriqués et ceux qui doivent rester tels quels.

Vous pouvez imbriquer les jeux de cadres de deux façons dans HTML : le jeu de cadres interne peut être défini dans le même fichier que le jeu de cadres externe, ou dans un fichier distinct. Chaque jeu de cadres prédéfini dans Dreamweaver définit tous ses jeux de cadres dans le même fichier.

Les deux types d'imbrication produisent des résultats visuels identiques. A moins d'examiner le code, il n'est pas facile de savoir quel type d'imbrication est utilisé. En règle générale, Dreamweaver utilise un fichier de jeu de cadres externe lorsque vous exécutez la commande Ouvrir dans un cadre pour ouvrir un fichier de jeu de cadres à l'intérieur d'un cadre. Dans ce cas, vous risquez de ne pas pouvoir définir correctement les cibles des liens. Il est souvent plus simple de garder tous les jeux de cadres définis dans un seul fichier.

Utiliser des jeux de cadres dans la fenêtre de document

Dreamweaver permet d'afficher et de modifier tous les documents associés à un jeu de cadres dans une seule fenêtre de document. Vous pouvez ainsi afficher un aperçu approximatif des pages insérées dans des cadres et les modifier à votre convenance dans le navigateur. Toutefois, certains aspects de cette approche peuvent être déroutants si vous ne les maîtrisez

DREAMWEAVER CS3


198

pas parfaitement. En particulier, chaque cadre affiche un document HTML distinct. Même si les documents sont vides, vous devez les enregistrer avant de les prévisualiser. En effet, vous ne pouvez afficher un aperçu précis du jeu de cadres que s'il contient l'URL d'un document à afficher dans chaque cadre.

Pour vous assurer que le jeu de cadres s'affiche correctement dans les navigateurs, exécutez la procédure suivante :

1

Créez un jeu de cadres et spécifiez le document qui devra apparaître dans chaque cadre.

2

Enregistrez chaque fichier qui apparaîtra dans un cadre. N'oubliez pas que chaque cadre affiche un document HTML différent et que vous devez enregistrer chaque document avec le fichier de jeu de cadres.

3

Définissez les propriétés de chaque cadre et du jeu de cadres (notamment, nommez chaque cadre, définissez les options de défilement et d'absence de défilement).

4

Dans l'inspecteur Propriétés, définissez la propriété Cible pour tous les liens afin que le contenu lié apparaisse dans la zone appropriée.

Création de cadres et de jeux de cadres

Il y a deux façons de créer un jeu de cadres dans Dreamweaver : vous pouvez sélectionner un jeu de cadres prédéfini ou le concevoir vous-même.

Si vous choisissez un jeu de cadres prédéfini, tous les jeux de cadres et cadres nécessaires à la création de la mise en forme sont configurés, ce qui représente le moyen le plus simple d'insérer rapidement une mise en forme avec des cadres dans la page. Vous pouvez uniquement insérer un jeu de cadres prédéfini dans la fenêtre de document en mode Création.

Avant de créer un jeu de cadres ou d'utiliser des cadres, affichez les bordures de cadres en mode Création dans la fenêtre de

Voir aussi

« Conception de pages dans un souci d'accessibilité » à la page 677

Créer un jeu de cadres prédéfini et afficher un document existant dans un cadre

1

Placez le point d’insertion dans un document et procédez de l’une des manières suivantes :

•

Choisissez Insertion > HTML > Cadres et sélectionnez un jeu de cadres prédéfini.

•

Dans la catégorie Mise en forme de la barre Insertion, cliquez sur la flèche du bouton Cadres et choisissez un jeu de cadres prédéfini.

Les icônes de jeu de cadres fournissent une représentation visuelle de chaque jeu de cadres appliqué au document en cours.

La zone bleue de l'icône du jeu de cadres représente le document courant et la zone blanche les cadres qui afficheront d'autres documents.

DREAMWEAVER CS3


199

2

Si vous avez configuré Dreamweaver pour qu'il vous invite à définir des attributs d'accessibilité des cadres, sélectionnez un cadre dans le menu déroulant, entrez un nom pour la cadre et cliquez sur OK. (Pour les visiteurs qui en utilisent un, le lecteur d'écran lit ce nom lorsqu'il rencontre le cadre sur une page.)

Remarque :

Si vous cliquez sur OK sans entrer de nouveau nom, Dreamweaver donne au cadre un nom qui correspond à sa position (cadre de gauche, cadre de droite, etc.) dans le jeu de cadres.

Remarque :

Si vous cliquez sur Annuler, le jeu de cadres s'affiche dans le document, mais Dreamweaver ne lui associe ni les balises ni les attributs d'accessibilité.

Choisissez Fenêtre > Cadres pour afficher un diagramme des cadres que vous nommez.

Créer un jeu de cadres prédéfini vide

1


2

Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Exemple de page.

3

Sélectionnez le dossier Jeu de cadres dans la colonne Dossier exemple.

4

Sélectionnez un jeu de cadres dans la colonne Exemple de page, puis cliquez sur Créer.

5

Si vous avez activé les attributs d'accessibilité aux cadres dans Préférences, la boîte de dialogue Attributs d'accessibilité aux balises de cadre s'affiche ; renseignez la boîte de dialogue pour chaque cadre et cliquez sur OK.

Remarque :

Si vous cliquez sur Annuler, le jeu de cadres s'affiche dans le document, mais Dreamweaver ne lui associe ni les balises ni les attributs d'accessibilité.

Créer un jeu de cadres

❖

Dans le sous-menu Modifier > Jeu de cadres, choisissez une option de fractionnement (par exemple, Fractionner le cadre

à gauche ou Fractionner le cadre à droite).

Dreamweaver fractionne la fenêtre en cadres. Si vous aviez un document existant ouvert, il apparaît dans l'un des cadres.

Fractionnement d'un cadre en cadres plus petits

•

Pour fractionner le cadre au niveau du point d'insertion, choisissez une option de fractionnement dans le sous-menu

Modifier > Jeu de cadres.

•

Pour fractionner un cadre ou un jeu de cadres verticalement ou horizontalement, faites glisser une bordure de cadre du bord vers le centre de la fenêtre en mode Création.

•

Pour fractionner un cadre à l'aide d'une bordure de cadre qui ne se trouve pas sur le bord de la fenêtre en mode Création, faites glisser une bordure de cadre tout en maintenant la touche Alt (Windows) ou Option (Macintosh) enfoncée.

•

Pour diviser un cadre en quatre, faites glisser une bordure de cadre de l'un des coins de la fenêtre en mode Création vers le centre d'un cadre.

Pour créer trois cadres, créez-en d'abord deux, puis fractionnez l'un d'eux. L'opération de fusion de deux cadres adjacents sans modifier le code du jeu de cadres étant relativement ardue, il est plus difficile de convertir quatre cadres en trois cadres que deux cadres en trois cadres.

Suppression d'un cadre

❖

Faites glisser une bordure de cadre en dehors de la page ou vers une bordure du cadre parent.

Si vous supprimez un cadre dans lequel se trouve un document qui n'a pas été enregistré, Dreamweaver vous invite à enregistrer ce dernier.

Remarque :

Vous ne pouvez pas entièrement supprimer un jeu de cadres en faisant glisser ses bordures. Pour le supprimer complètement, fermez la fenêtre de document qui l'affiche. Si le fichier du jeu de cadres a été enregistré, supprimez le fichier.

Redimensionner un cadre

• Pour définir la taille approximative des cadres, faites glisser une bordure de cadre dans la fenêtre de document en mode

Création.

DREAMWEAVER CS3


200

•

Pour définir des tailles exactes et spécifier l'espace alloué par le navigateur à une ligne ou une colonne de cadres lorsque la taille de la fenêtre du navigateur ne permet pas d'afficher les cadres dans leur totalité, utilisez l'inspecteur Propriétés.

Sélection de cadres et de jeux de cadres

Pour modifier les propriétés d'un cadre ou d'un jeu de cadres, vous devez au préalable le sélectionner dans la fenêtre de document ou en utilisant le panneau Cadres.

Le panneau Cadres donne une représentation visuelle des cadres dans un jeu de cadres. Il affiche la hiérarchie de la structure du jeu de cadres qui n'apparaît pas forcément dans la fenêtre de document. Dans le panneau Cadres, une épaisse bordure entoure le jeu de cadres, une fine ligne grise entoure chaque cadre et chaque cadre est identifié par un nom.

Lorsqu'un cadre est sélectionné dans la fenêtre de document, en mode Création, sa bordure s'affiche avec une ligne en pointillé ; lorsqu'un jeu de cadres est sélectionné, toutes les bordures des cadres à l'intérieur de ce jeu s'affichent avec une ligne en pointillé plus fine.

Remarque :

La sélection d'un cadre et le placement d'un point d'insertion dans un document affiché dans un cadre sont deux opérations différentes. Vous serez amené à sélectionner un cadre dans de nombreux cas (par exemple, lorsque vous définissez les propriétés d'un cadre).

Sélectionner un cadre ou un jeu de cadres dans le panneau Cadres

1

Choisissez Fenêtre > Cadres.

2

Dans le panneau Cadres :

• Pour sélectionner un cadre, cliquez sur le cadre. Des lignes de sélection apparaissent autour du cadre dans le panneau

Cadres et dans la fenêtre de document, en mode Création.

• Pour sélectionner un jeu de cadres, cliquez sur la bordure qui l'entoure.

Sélection d'un cadre ou d'un jeu de cadres dans la fenêtre de document

•

En mode Création, pour sélectionner un cadre, cliquez dans le cadre tout en maintenant les touches Alt (Windows) ou

Option+Maj (Macintosh) enfoncées.

•

En mode Création, pour sélectionner un jeu de cadres, cliquez sur l'une des bordures du cadre interne du jeu de cadres.

Bordures de cadre.

Remarque :

Il est souvent plus simple de sélectionner les jeux de cadres dans le panneau Cadres que dans la fenêtre de document. Pour plus d'informations, consultez les rubriques ci-dessus.

Sélection d'un cadre ou d'un jeu de cadre différent

•

Pour sélectionner le cadre ou le jeu de cadres suivant ou précédent au même niveau hiérarchique que la sélection en cours, appuyez sur la flèche gauche ou droite tout en maintenant la touche Alt (Windows) ou Commande (Macintosh)

DREAMWEAVER CS3


201

enfoncée. Ces touches vous permettent de parcourir les cadres et jeux de cadres dans l'ordre dans lequel ils sont définis dans le fichier du jeu de cadres.

•

Pour sélectionner le jeu de cadres parent (celui qui contient la sélection en cours), appuyez sur la flèche haut tout en maintenant la touche Alt (Windows) ou Commande (Macintosh) enfoncée.

•

Pour sélectionner le premier cadre ou jeu de cadres enfant de la sélection courante (en respectant l'ordre dans lequel ils sont définis dans le fichier du jeu de cadres), appuyez sur la flèche bas tout en maintenant la touche Alt (Windows) ou

Commande (Macintosh) enfoncée.

O

uverture d'un document dans un cadre

Vous pouvez spécifier le contenu initial d'un cadre en insérant un nouveau contenu dans un document vide ou en ouvrant un document dans un cadre.

1

Placez le point d'insertion dans un cadre.

2

Choisissez Fichier > Ouvrir dans un cadre.

3

Sélectionnez un document à ouvrir dans le cadre et cliquez sur OK (Windows) ou Choisir (Macintosh).

4

(Facultatif) Si vous voulez afficher ce document par défaut dans le cadre lorsque le jeu de cadres est ouvert dans un navigateur, enregistrez le jeu de cadres.

Enregistrement des fichiers du cadre et du jeu de cadres

Avant d'afficher l'aperçu d'un jeu de cadres dans un navigateur, vous devez enregistrer le fichier correspondant et tous les documents qui seront affichés dans les cadres. Vous pouvez enregistrer le fichier du jeu de cadres et chacun des documents contenus dans les cadres individuellement ou enregistrer le fichier du jeu de cadres et tous les fichiers contenus dans les cadres simultanément.

Remarque :

Si vous faites appel aux outils visuels de Dreamweaver pour créer un jeu de cadres, un nom de fichier par défaut est attribué à chaque nouveau document apparaissant dans un cadre. Par exemple, le premier fichier du jeu de cadres s'appelle

Jeu de cadres sans nom-1, tandis que le premier document d'un cadre s'intitule Cadre sans nom-1.

Enregistrement d'un fichier de jeu de cadres

❖

Sélectionnez le jeu de cadres dans le panneau Cadres ou dans la fenêtre de document.

• Pour enregistrer le fichier de jeu de cadres, choisissez Fichier > Enregistrer le jeu de cadres.

• Pour enregistrer le fichier de jeu de cadres en tant que nouveau fichier, choisissez Fichier > Enregistrer le jeu de cadres sous.

Remarque :

Si le fichier du jeu de cadres n'a pas été enregistré, ces deux commandes sont équivalentes.

Enregistrement d'un document qui apparaît à l'intérieur d'un cadre

❖

Cliquez dans le cadre, puis choisissez Fichier > Enregistrer le cadre ou Fichier > Enregistrer le cadre sous.

Enregistrer tous les fichiers associés à un jeu de cadres

❖

Choisissez Fichier > Enregistrer tous les cadres.

Cette commande enregistre tous les documents ouverts dans le jeu de cadres, y compris le fichier du jeu de cadres et tous les documents encadrés. Si le fichier du jeu de cadres n'a pas été enregistré, une épaisse bordure entoure le jeu de cadres (ou le cadre non enregistré) en mode Création et vous pouvez sélectionner un nom de fichier.

Remarque :

Si vous avez utilisé la commande Fichier > Ouvrir dans un cadre pour ouvrir un document dans un cadre, lorsque vous enregistrez le jeu de cadres, le document ouvert devient le document par défaut qui sera affiché dans ce cadre. N'enregistrez pas le fichier du jeu de cadres si vous ne voulez pas que ce document soit utilisé par défaut.

Affichage et définition des des propriétés et des attributs de cadre

Utilisez l'inspecteur Propriétés pour afficher et définir la plupart des propriétés de cadre, notamment les bordures, les marges et l'affichage ou non de barres de défilement dans les cadres. La définition d'une propriété de cadre est prépondérante sur la définition de cette propriété pour le jeu de cadres.

DREAMWEAVER CS3


202

Si vous le souhaitez, définissez des attributs de cadre, comme l'attribut title (qui est différent de l'attribut name), pour améliorer l'accessibilité. Vous pouvez activer l'option de programmation de l'accessibilité pour les cadres afin de définir des attributs lorsque vous créez des cadres ou bien définir des attributs après avoir inséré un cadre. Pour modifier les attributs d'accessibilité d'un cadre, utilisez l'inspecteur de balises afin de modifier directement le code HTML.

Voir aussi

« Conception de pages dans un souci d'accessibilité » à la page 677

Affichage ou définition des propriétés des cadres

1

Sélectionnez un cadre en utilisant l'une des méthodes suivantes :

•

Dans la fenêtre de document (mode Création), cliquez dans le cadre tout en maintenant les touches Alt (Windows) ou

Maj+Option (Macintosh) enfoncées.

•

Cliquez sur le cadre dans le panneau Cadres (Fenêtre > Cadres).

2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur la flèche d'agrandissement située dans le coin inférieur droit pour visualiser toutes les propriétés des cadres.

3

Définition des options de l'inspecteur Propriétés des cadres

N om du cadre

Nom du cadre est le nom utilisé par l'attribut target

d'un lien ou par un script pour référencer le cadre. Un nom de cadre ne doit contenir qu'un seul mot. Les traits de soulignement (_) sont autorisés, mais pas les tirets (–), points

(.) et espaces. Les noms de cadres doivent commencer par une lettre (et non un chiffre). Ils tiennent compte des majuscules et des minuscules. N'utilisez pas de termes réservés dans JavaScript (tels que les mots top ou navigator ) comme noms de cadre.

Pour qu'un lien modifie le contenu d'un autre cadre, vous devez attribuer un nom au cadre cible. Pour faciliter la création de liens entre plusieurs cadres, donnez un nom à chaque cadre que vous créez.

Src

Spécifie le document source à afficher dans le cadre. Cliquez sur l'icône de dossier pour rechercher et sélectionner un fichier.

Défiler

Détermine si des barres de défilement apparaissent dans le cadre. La définition de cette option sur Par défaut n'affecte aucune valeur à l'attribut correspondant, si bien que chaque navigateur peut utiliser sa valeur par défaut. Dans la plupart des navigateurs, la valeur par défaut est Auto. Par conséquent, les barres de défilement n'apparaissent que si la fenêtre du navigateur ne peut pas afficher la totalité du contenu du cadre courant.

N e pas redimens.

navigateur.

Empêche les visiteurs de déplacer les bordures du cadre pour redimensionner ce dernier dans un

Remarque :

Vous pouvez toujours redimensionner les cadres dans Dreamweaver ; cette option ne s'applique qu'aux visiteurs qui souhaitent afficher les cadres dans un navigateur.

Bordures

Affiche ou masque les bordures du cadre courant lorsqu'il est affiché dans un navigateur. L'option Bordures remplace les paramètres de bordure du jeu de cadres.

Les options de bordure sont Oui (afficher les bordures), Non (masquer les bordures) et Par défaut. Dans la plupart des navigateurs, la valeur proposée est Oui, à moins que l'option Bordures du jeu de cadres parent ne soit définie sur Non. Si plusieurs cadres partagent une même bordure, celle-ci n'est masquée que lorsque l'option Bordures est définie sur Non pour tous les cadres ou lorsque la propriété Bordures du jeu de cadres parent est définie sur Non et l'option Bordures sur Par défaut.

Couleur de la bordure

Définit la couleur de toutes les bordures du cadre. Cette couleur s'applique à toutes les bordures adjacentes au cadre et remplace celle du jeu de cadres.

Largeur de marge

Définit la largeur en pixels des marges gauche et droite (c'est-à-dire l'espace séparant la bordure du cadre de son contenu).

Hauteur de marge

Définit la hauteur en pixels des marges supérieure et inférieure (c'est-à-dire l'espace séparant la bordure du cadre de son contenu).

DREAMWEAVER CS3


203

Remarque :

La définition de la largeur et de la hauteur d'un cadre et la définition des marges dans la boîte de dialogue

Modifier > Propriétés de la page sont deux opérations différentes.

Pour modifier la couleur d'arrière-plan d'un cadre, vous devez définir la couleur d'arrière-plan du document dans le cadre dans les propriétés de la page.

Définition des valeurs d'accessibilité d'un cadre

1

Dans le panneau Cadres (Fenêtre > Cadres), sélectionnez un cadre en plaçant le point d'insertion dans l'un des cadres.

2

Choisissez Modifier > Modifier la balise.

3

Sélectionnez Feuille de style/Accessibilité dans la liste de catégories située à gauche, entrez des valeurs et cliquez sur OK.

Définition des valeurs d'accessibilité d'un cadre

1

Affichez votre document en mode Code ou Code et création si vous êtes en mode Création.

2

Dans le panneau Cadres (Fenêtre > Cadres), sélectionnez un cadre en plaçant le point d'insertion dans l'un des cadres.

Dreamweaver met en surbrillance la balise du cadre dans le code.

3

Cliquez dans le code du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), et choisissez Modifier la balise.

4

Dans l'éditeur de balises, effectuez les modifications nécessaires et cliquez sur OK.

Modification de la couleur d'arrière-plan d'un document dans un cadre

1

Placez le point d'insertion dans le cadre.

2

Choisissez Modifier > Propriétés de la page.

3

Dans la boîte de dialogue Propriétés de la page, cliquez sur le menu déroulant Couleur d'arrière-plan, puis sélectionnez une couleur.

Afficher et définir les propriétés des jeux de cadres

Utilisez l'inspecteur Propriétés pour afficher et définir la plupart des propriétés de jeu de cadres, notamment le titre du jeu de cadre, les bordures et les tailles des cadres.

Définition du titre du document d'un jeu de cadres

1

Sélectionnez un jeu de cadres en utilisant l'une des méthodes suivantes :

•

Cliquez sur une bordure entre deux cadres du jeu de cadres dans la fenêtre de document en mode Création.

•

Cliquez sur la bordure d'un jeu de cadres dans le panneau Cadres (Fenêtre > Cadres).

2

Dans la zone Titre de la barre d'outils du document, tapez le nom du document de jeu de cadres.

Lorsqu'un visiteur affiche le jeu de cadres dans un navigateur, le titre apparaît dans la barre de titre.

Afficher ou définir les propriétés des jeux de cadres

1

Sélectionnez un jeu de cadres en utilisant l'une des méthodes suivantes :

•

Cliquez sur une bordure entre deux cadres du jeu de cadres dans la fenêtre de document en mode Création.

•

Cliquez sur la bordure d'un jeu de cadres dans le panneau Cadres (Fenêtre > Cadres).

2

Dans l'inspecteur Propriétés (Fenêtre droit et définissez les options de jeu de cadres.

Bordures

Détermine si des bordures apparaissent ou non autour des cadres lorsque le document est affiché dans un l'affichage des bordures, sélectionnez Par défaut.

Largeur de bord

Spécifie la largeur de toutes les bordures du jeu de cadres.

DREAMWEAVER CS3


204

Couleur de la bordure

Définit la couleur des bordures. Sélectionnez une couleur avec le sélecteur de couleur ou entrez la valeur hexadécimale de la couleur.

Sélection lig./col.

Définit la taille des cadres des lignes et colonnes du jeu de cadres sélectionné ; cliquez sur un onglet du côté gauche ou en haut de la zone Sélection lig./col., puis tapez une hauteur ou une largeur dans la zone de texte Valeur.

3

Pour définir l'espace alloué par le navigateur à chaque cadre, choisissez l'une des options suivantes dans le menu Unités :

Pixels

Définit la taille de la colonne ou de la ligne sélectionnée en lui attribuant une valeur absolue. Choisissez cette option pour les cadres dont la taille ne change pas, comme la barre de navigation. Un espace est alloué aux cadres dont la taille est spécifiée en pixels, puis aux cadres dont la taille est relative ou spécifiée en pourcentage. En règle générale, il est recommandé de définir une largeur fixe en pixels pour le cadre de gauche et une largeur relative pour le cadre de droite afin que ce dernier puisse occuper l'espace restant une fois la largeur en pixels allouée.

Remarque :

Si toutes les largeurs sont en pixels et qu'un visiteur affiche le jeu de cadres dans un navigateur dont la largeur est inférieure ou supérieure à celle que vous avez spécifiée, les cadres sont automatiquement redimensionnés en fonction de l'espace disponible. Ceci s'applique également aux hauteurs spécifiées en pixels. Par conséquent, il est recommandé de spécifier au moins une largeur et une hauteur relatives.

Pourcent

Définit la colonne ou la ligne sélectionnée comme pourcentage de la largeur ou de la hauteur totale de son jeu de cadres. L'espace des cadres définis avec cette option est alloué après celui des cadres définis en pixels, mais avant celui des cadres définis avec l'option Relatif.

Relatif

Indique qu'une fois l'espace des cadres définis en Pixel et en Pour-cent attribué, l'espace restant doit être alloué à la colonne ou à la ligne sélectionnée. Cet espace est réparti proportionnellement entre les cadres de taille relative.

Remarque :

Lorsque vous choisissez l'option Relatif dans le menu Unités, tout nombre figurant dans le champ Valeur disparaît.

Pour le spécifier, vous devez le taper de nouveau. En revanche, si une seule ligne ou colonne est définie sur Relatif, vous n'avez pas besoin de retaper un nombre, car tout l'espace restant lui est alloué, une fois celui des autres lignes et colonnes a été attribué.

Pour garantir la compatibilité inter-navigateurs, vous pouvez taper 1 dans le champ Valeur. Cela revient à ne pas spécifier de valeur du tout.

Contrôle des contenus de cadre avec des liens

Pour utiliser un lien dans un cadre en vue d'ouvrir un document dans un autre cadre, vous devez définir la cible du lien.

L'attribut target

d'un lien spécifie le cadre ou la fenêtre dans lequel ou laquelle le contenu associé au lien s'ouvre.

Par exemple, si la barre de navigation se trouve dans le cadre gauche et que vous voulez afficher le document lié dans le cadre de contenu principal à droite, vous devez définir le nom de ce dernier comme la cible de chacun des liens de la barre de navigation. Lorsqu'un visiteur clique sur un lien de navigation, le contenu spécifié s'ouvre dans le cadre principal.

1

En mode Création, choisissez un texte ou un objet.

2

Dans la zone Lien de l'inspecteur Propriétés (Fenêtre > Propriétés), procédez de l'une des manières suivantes :

•

Cliquez sur l'icône de dossier et sélectionnez le fichier avec lequel établir le lien.

•

Faites glisser l'icône Pointer vers un fichier dans le panneau Fichiers et sélectionnez le fichier avec lequel établir le lien.

3

Dans le menu déroulant Cible de l'inspecteur Propriétés, sélectionnez la fenêtre ou le cadre dans lequel doit s'afficher le document lié :

•

_blank

ouvre le document lié dans une nouvelle fenêtre du navigateur sans toucher à la fenêtre courante.

•

_parent

ouvre le document lié dans le jeu de cadres parent du cadre dans lequel figure le lien, en remplaçant tout le jeu de cadres.

•

_self

ouvre le lien dans le cadre en cours, en remplaçant le contenu de ce cadre.

•

_top

ouvre le document lié dans la fenêtre du navigateur courant, en remplaçant tous les cadres.

DREAMWEAVER CS3


205

Les noms des cadres apparaissent également dans ce menu. Sélectionnez un cadre nommé dans lequel s'ouvrira le document lié.

Remarque :

Les noms des cadres s'affichent uniquement lorsque vous modifiez un document dans un jeu de cadres. Si vous modifiez un document dans sa propre fenêtre, les noms des cadres n'apparaissent pas dans le menu déroulant Cible. Si vous modifiez un document en dehors du jeu de cadres, vous pouvez taper le nom du cadre cible dans la zone de texte Cible.

Si vous établissez un lien vers une page située en dehors de votre site, utilisez toujours

target="_top"

ou

target="_blank"

pour vous assurer que la page ne soit pas considérée comme faisant partie de votre site.

Fourniture de contenu pour les navigateurs ne prenant pas les cadres en charge

Dreamweaver vous permet de définir le contenu à afficher dans les navigateurs graphiques plus anciens et basés sur le texte qui ne prennent pas en charge les cadres. Ce contenu, encadré de balises noframes

, est stocké dans le fichier du jeu de cadres.

Lorsqu'un navigateur qui ne gère pas les cadres charge un fichier de jeu de cadres, il affiche uniquement le contenu des balises noframes

.

Remarque :

La zone

noframes

doit contenir un texte plus détaillé que « pouvoir utiliser des cadres ». Certains visiteurs de sites utilisent des systèmes qui ne leur permettent pas d'afficher les cadres.

1

Choisissez Modifier > Jeu de cadres > Modifier le contenu sans cadres.

Dreamweaver efface ce qui se trouve dans la fenêtre en mode Création et les mots « Contenu sans cadres » apparaissent dans la zone supérieure.

2


•

Dans la fenêtre de document, tapez ou insérez le contenu, comme vous le feriez pour un document ordinaire.

•

Sélectionnez Fenêtre > Inspecteur de code, placez le point d'insertion entre les balises body

qui se trouvent à l'intérieur des balises noframes

, puis tapez le code HTML pour le contenu

3

Choisissez de nouveau Modifier > Jeu de cadres > Modifier le contenu sans cadres pour revenir au mode normal du document jeu de cadres.

Utilisation des comportements JavaScript avec les cadres

Plusieurs comportements JavaScript et commandes de navigation sont particulièrement bien adaptés à l'utilisation de cadres :

T exte du cadre

Remplace le contenu et le formatage d'un cadre par le contenu que vous spécifiez. Ce contenu peut être n'importe quel texte valide en HTML Cette action permet d'afficher les informations dans un cadre de façon dynamique

Atteindre l'URL

Ouvre une nouvelle page dans la fenêtre en cours ou dans le cadre indiqué. Cette action est particulièrement utile pour modifier d'un seul clic le contenu de deux cadres ou plus

Insérer une barre de navigation

Ajoute une barre de navigation à une page. Ceci étant fait, vous pouvez ajouter des comportements à ses images et définir l'image qui s'affiche en fonction des actions des visiteurs. Vous pouvez, par exemple, afficher une image de bouton à l'état actif ou inactif afin que l'utilisateur sache sur quelle page du site il se trouve

Insérer menu de reroutage

Permet de configurer une liste de liens, dans un menu, qui ouvrent des fichiers dans une fenêtre du navigateur lorsque l'on clique dessus. Vous pouvez également cibler une fenêtre ou un cadre particuliers dans lesquels le document s'ouvrira.

Voir aussi

« Application du comportement Texte d'un cadre » à la page 344

« Application du comportement Atteindre l'URL » à la page 340

« Application du comportement Définir image barre de navigation » à la page 343

« Application du comportement Menu de reroutage » à la page 341

Chapitre 8 pages

Vous pouvez ajouter visuellement du contenu à vos pages Web sans devoir connaître le langage HTML. Vous pouvez ajouter du texte, des images, de la vidéo Flash, du son et d'autres objets multimédias à vos pages, ainsi que définir les propriétés des pages.

Utilisation des pages

A propos de l'utilisation des pages

Adobe® Dreamweaver® CS3 comporte de nombreuses fonctionnalités qui vous permettent de définir aisément de nombreuses propriétés de page (titre, image et couleur d'arrière-plan, couleur des textes et des liens, etc.). De plus, des outils vous permettent d'optimiser les performances de votre site Web et de tester les pages pour garantir leur compatibilité avec différents navigateurs Web

Lors de la création d'une nouvelle page Web, vous devez considérer les navigateurs et systèmes d'exploitation des visiteurs qui consulteront votre site et, éventuellement, les langues à utiliser. Avec Dreamweaver, vous pouvez choisir les couleurs qui s'afficheront de manière identique sur différents navigateurs Web, définir l'encodage de divers caractères pour certaines langues ou encore la vérification de la compatibilité d'un navigateur défini avec votre site.

A propos de la définition des propriétés de page

Pour chaque page que vous créez dans Dreamweaver, vous pouvez spécifier les propriétés de mise en forme dans la boîte de dialogue Propriétés de la page (Modifier > Propriétés de la page). Cette boîte de dialogue permet de spécifier la famille et la taille par défaut de la police, la couleur d'arrière-plan, les marges, le style des liens ainsi que d'autres aspects de la conception de page. Vous pouvez attribuer de nouvelles propriétés à chaque nouvelle page que vous créez et modifier celles des pages existantes.

Par défaut, Dreamweaver met le texte en forme à l'aide de feuilles de style en cascade (Cascading Style Sheets, CSS). Vous pouvez choisir d'utiliser le langage HTML pour mettre les pages en forme par le biais de la boîte de dialogue Préférences

(Edition > Préférences). Lors de l'utilisation des propriétés de page CSS, des balises CSS sont employées pour l'ensemble des propriétés définies dans les catégories Aspect, Liens et En-têtes de la boîte de dialogue Propriétés de la page. Les balises CSS qui définissent ces attributs sont intégrées dans la section head

de la page.

Remarque :

Les propriétés de page que vous choisissez ne s'appliquent qu'au document actif. Si une page utilise une feuille de style CSS externe, Dreamweaver n'écrase pas les balises définies dans la feuille de style, car ceci affecterait les autres pages qui utilisent cette feuille.

Comparaison des propriétés de page CSS et H

T

ML

Par défaut, des balises CSS sont utilisées pour attribuer les propriétés de page. Si vous souhaitez utiliser des balises HTML

à la place, vous devez le spécifier dans la boîte de dialogue Préférences.

Si vous choisissez d'utiliser des balises HTML au lieu des styles CSS, l'inspecteur Propriétés affiche le menu déroulant Style.

Cependant, les commandes de police, taille, couleur et alignement indiquent uniquement les propriétés qui utilisent les balises HTML. Les valeurs des propriétés CSS appliquées à la sélection en cours ne sont plus visibles et le menu déroulant

Taille est désactivé.

206

DREAMWEAVER CS3


207

Voir aussi

« Spécification de balises HTML au lieu de CSS » à la page 213

« Définition des propriétés de page » à la page 208

Conversion de contenu actif

Dreamweaver répare les pages Web contenant du contenu actif , c'est-à-dire du contenu dont l'interaction réclame des clics de souris de la part des utilisateurs dans les dernières versions d'Internet Explorer. Le contenu actif peut être d'un des types

• Adobe® Flash®, Adobe® Flash® Video, ou Adobe® FlashPaper™

• Shockwave® ou Authorware®

• applets Java

• contenu Real Media

• animations QuickTime

• contrôles ActiveX personnalisés

• autres contrôles ActiveX ou plug-ins

Lorsque vous ouvrez une page dans Dreamweaver, une recherche de contenu actif y est effectuée. Selon le type de contenu actif de votre page, vous pouvez alors choisir l'une des trois options.

• Si le contenu actif de votre page est intégré à

Dreamweaver propose de convertir tout le contenu actif de la page pour vous.

• Si votre page correspond à contenant d'autres types de balises, Dreamweaver propose uniquement de convertir les balises object contenant des balises param et/ou embed.

• Si le contenu actif de votre page est uniquement intégré à des balises object contenant autre chose que des balises param ou embed, Dreamweaver signale, dans un message, qu'il ne peut pas les convertir.

Si l'utilisateur clique sur Oui dans l'une des deux boîtes de dialogue de conversion du contenu actif, Dreamweaver localise les balises object existantes qui contiennent des balises param et/ou embed, les enveloppe dans des balises noscript et ajoute des balises script qui activent le comportement attendu du contenu actif en appelant des fonctions JavaScript dans un fichier externe. Dreamweaver crée ce fichier externe (AC_RunActiveContent.js) et le place dans un nouveau dossier (appelé

Scripts et placé à la racine de votre site) lorsque vous enregistrez le fichier mis à jour. Vous devez charger le fichier

AC_RunActiveContent.js en même temps que la page actualisée, soit manuellement, soit en cliquant sur Oui dans la boîte de dialogue Copier les fichiers dépendants.

Remarque :

Lorsqu'il insère un objet Active X dans un document, Dreamweaver crée deux fichiers externes :

AC_RunActiveContent.js et AC_ ActiveX.js. Vous devez charger des deux fichiers en même temps que la page actualisée, soit manuellement, soit en cliquant sur Oui dans la boîte de dialogue Copier les fichiers dépendants.

Dreamweaver ajuste uniquement les balises object et pas les balises embed ni applet indépendantes susceptibles d'avoir servi à insérer du contenu actif dans des pages plus anciennes (bien que les balises embed enveloppées dans des balises object soient ajustées par l'enveloppement de la balise object). Si vos pages Web contiennent des balises embed ou applet, il est conseillé de convertir ces dernières en balises object, puis d'ouvrir les pages concernées afin que Dreamweaver puisse exécuter la conversion pour vous. Une recherche permet de localiser facilement les balises embed et applet présentes dans vos pages Web.

Cette fonction est extensible et vous permet d'utiliser des extensions tierces pour convertir les pages Web qui ont besoin de plug-ins spéciaux (par exemple le contenu RealPlayer ou Windows Media Player).

Vous pouvez également accéder à la fonction Conversion de contenu actif en choisissant Fichier > Convertir > Contenu actif.

DREAMWEAVER CS3


208

Remarque :

Le contenu actif doit être mis à jour page par page. Il est impossible de mettre à jour toutes les pages d'un site en même temps. Il est préférable d'effectuer une recherche des balises object dans tout le site, puis d'ouvrir les pages qui en contiennent et de laisser Dreamweaver se charger de la réparation.

Pour plus d'informations sur le contenu actif, consultez le site www.adobe.com/devnet/activecontent/ .

Conversion du contenu personnalisé

Dreamweaver ne convertit que les balises param et embed contenues dans les balises object identifiées. Si vous avez personnalisé votre code (en ajoutant par exemple une balise img ou toute autre balise dans votre balise object), les fonctions

JavaScript n'écrivent pas les chaînes appropriées à ce contenu lors de l'exécution, car la fonction JavaScript de Dreamweaver ne génère que des paires attribut/valeur pour les balises param et embed. Pour que votre code soit restitué correctement lors de l'exécution et fonctionne comme prévu dans Internet Explorer, procédez de l'une des manières suivantes :

• Rédigez votre propre fonction JavaScript capable de gérer du code personnalisé. Au besoin, vous pouvez également désactiver la fonction Conversion de contenu actif de Dreamweaver en sélectionnant Edition > Préférences > Correction du code.

• Développez une extension qui permette à la fonction generateScript()

de rechercher d'autres types d'informations à l'intérieur de la balise object et qui les transmette à une fonction JavaScript pour le traitement de différents types d'arguments.

Pour plus d'informations sur le contenu actif, consultez le site www.adobe.com/devnet/activecontent/ .

Voir aussi

« Recherche et remplacement de texte » à la page 220

Description de l'encodage de document

L'encodage de document précise le codage utilisé pour les caractères dans le document. L'encodage du document est spécifié dans une balise meta

, insérée dans l'en-tête du document ; il indique au navigateur et à Dreamweaver le mode de décodage du document et les polices à utiliser pour afficher le texte décodé.

Par exemple, si vous spécifiez Occidental (Latin1), la balise meta

suivante est insérée :

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

. Le document affiché dans Dreamweaver contient les polices que vous spécifiez dans Préférences de polices pour l'encodage Occidental (Latin1) ; ce même document affiché dans un navigateur contient les polices que l'utilisateur du navigateur précise pour l'encodage Occidental (Latin1).

Si vous spécifiez Japonais (Maj JIS), la balise meta

suivante est insérée :

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

. Le document affiché dans Dreamweaver contient les polices que vous spécifiez pour les encodages du japonais ; ce même document affiché dans un navigateur contient les polices que l'utilisateur du navigateur précise pour les encodages du japonais.

Vous modifier l'encodage du document dans une page et modifier l'encodage utilisé par défaut par Dreamweaver pour créer de nouveaux documents, y compris les polices utilisées pour afficher chaque encodage.

Voir aussi


Définition des propriétés de page

Les propriétés de base des documents Web sont les suivantes : titre de la page, images et couleurs d'arrière-plan, couleur de base du texte et des liens et marges. Vous pouvez définir ou modifier ces propriétés et spécifier le type de codage propre à la langue de création de la page Web. Vous pouvez également spécifier le formulaire de normalisation Unicode à appliquer

à ce type de codage, à l'aide de la boîte de dialogue Propriétés de la page.

DREAMWEAVER CS3


209

Si vous utilisez à la fois une image et une couleur d'arrière-plan, la couleur apparaît pendant le téléchargement de l'image, puis elle est recouverte par l'image. Toutefois, si l'image d'arrière-plan comprend des pixels transparents, la couleur d'arrière-plan reste visible dans ces zones.

1

Choisissez Modifier > Propriétés de la page ou cliquez sur le bouton Propriétés de la page de l'inspecteur Propriétés.

2

Modifiez les propriétés de la page puis cliquez sur OK.

T ype de document (D

T

D)

Spécifie une définition de type de document. Par exemple, vous pouvez rendre un document

HTML compatible XHTML en sélectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu déroulant.

Encodage du document

Précise le codage utilisé pour les caractères du document.


quatre Formulaires de normalisation Unicode. Le plus important est le Formulaire de normalisation Unicode C car il est le plus utilisé dans le Modèle de caractères lié au World Wide Web, mais Adobe fournit également les trois autres Formulaires de normalisation Unicode.

Certains caractères Unicode semblent visuellement similaires mais peuvent être stockés de différentes manières dans le document. Par exemple, ë (e tréma) peut être représenté sous la forme d'un seul caractère, « e tréma » ou de deux caractères,

« e Latin ordinaire » + « tréma ». Un caractère Unicode de combinaison est un caractère associé au caractère précédent, ce 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

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



« Définition des propriétés CSS » à la page 126

Définition de la police, de la couleur de fond et de l'image de fond d'une page

La boîte de dialogue Propriétés de la page permet de spécifier diverses options de base de mise en forme des pages Web, comme la police, la couleur de fond et l'image de fond.

1


2

Sélectionnez la catégorie Apparence et définissez les options.

Police

Spécifie la famille de polices par défaut à utiliser dans vos pages Web. Dreamweaver utilise la famille de polices spécifiée sauf si une autre police est désignée pour un élément de texte donné.

T aille

Spécifie la taille de police par défaut à utiliser dans vos pages Web. Dreamweaver utilise la taille de police spécifiée sauf si une autre taille est désignée pour un élément de texte donné.

Couleur du texte

Spécifie la couleur d'affichage des polices par défaut.


Définit la couleur d'arrière-plan de la page. Activez l'option Couleur d'arrière-plan puis choisissez une couleur dans le sélecteur.


Définit une image d'arrière-plan Cliquez sur le bouton Parcourir puis accédez à l'image et sélectionnez-la. Vous pouvez également indiquer le chemin de l'image d'arrière-plan dans le champ Image d'arrière-plan.

Dreamweaver génère une mosaïque (multiplication) de l'image d'arrière-plan si elle ne remplit pas entièrement sa fenêtre, comme le font les navigateurs. Pour éviter la création de cette mosaïque, désactivez cette fonction à l'aide des feuilles de style en cascade.

DREAMWEAVER CS3


210

Répétition

Indique comment l'image d'arrière-plan sera affichée sur la page :

•

Sélectionnez l'option Pas de répétition pour n'afficher l'image d'arrière-plan qu'une seule fois.

•

Sélectionnez l'option Répétition pour répéter, ou mettre en mosaïque, l'image à l'horizontale et la verticale.

•

Sélectionnez l'option Répéter-x pour former une mosaïque horizontale.

•

Sélectionnez l'option Répéter-y pour former une mosaïque verticale.

Marge gauche et Marge droite

Spécifie la taille des marges à gauche et à droite de la page.

Marge haut et Marge bas

Spécifie la taille des marges en haut et en bas de la page.

Définition des propriétés des liens

Vous pouvez définir le type et la taille de la police par défaut, ainsi que les couleurs utilisées pour les liens, les liens visités et les liens actifs

1


2

Sélectionnez la catégorie Liens et définissez les options.

Police du lien

Définit la famille de polices par défaut à utiliser pour les liens. Par défaut, Dreamweaver utilise la police définie pour la page entière, sauf si une autre police est spécifiée.

T aille

Définit la taille de police par défaut à utiliser pour les liens.

Couleur des liens

Spécifie la couleur à appliquer au texte qui constitue le lien.

Liens visités

Spécifie la couleur à appliquer aux liens visités.

Liens de survol

Spécifie la couleur à appliquer lorsque la souris ou le curseur est placé sur un lien.

Liens actifs

Spécifie la couleur à appliquer lorsque la souris ou le curseur clique sur un lien.

Style souligné

Spécifie le style de soulignement à appliquer aux liens. Si un style de soulignement est déjà défini pour votre modifier ». Cette mention vous informe d'un style de lien qui a été défini. Si vous modifiez le style de soulignement à l'aide de la boîte de dialogue Propriétés de la page, Dreamweaver modifiera la définition de lien précédente.

Définition des propriétés d'en-tête de page

Vous pouvez définir le type et la taille de la police par défaut, ainsi que les couleurs utilisées pour les liens, les liens visités et les liens actifs

1


2

Sélectionnez la catégorie En-têtes et définissez les options.

Police

Spécifie la famille de polices par défaut à utiliser dans vos pages Web. Dreamweaver utilise la famille de polices spécifiée sauf si une autre police est désignée pour un élément de texte donné.

En-tête 1 à En-tête 6

Spécifie les tailles et couleurs à utiliser pour chaque niveau de balises d'en-tête.

Définition des propriétés du titre et de codage de la page

Vous pouvez définir le type et la taille de la police par défaut, ainsi que les couleurs utilisées pour les liens, les liens visités et les liens actifs La catégorie Titre/codage de la boîte de dialogue Propriétés de la page permet de définir le type de codage de document spécifique au langage utilisé pour créer vos pages Web, ainsi que le Formulaire de normalisation Unicode à utiliser avec ce type de codage.

1


2

Sélectionnez la catégorie Titre/codage et définissez les options.

T itre

Spécifie le titre de la page, qui s'affiche dans la barre de titre de la fenêtre de document et dans la plupart des fenêtres du navigateur.

T ype de document (D

T

D)

Spécifie une définition de type de document. Par exemple, vous pouvez rendre un document

HTML compatible XHTML en sélectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu déroulant.

DREAMWEAVER CS3


211

Codage

Précise le codage utilisé pour les caractères du document. 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

.


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, Les trois autres Formulaires de normalisation Unicode sont également fournis.

Inclure une signature Unicode (B

O

M)

Inclut une marque d'ordre d'octet (BOM, byte order mark) dans le document. Il s'agit d'une marque constituée de 2 à 4 octets placés au début d'un fichier texte identifiant un fichier comme étant au format

Recharger

Convertit le document existant ou de l'ouvrir de nouveau avec le nouveau codage.

Utilisation d'un tracé d'image pour créer la page

Vous pouvez insérer un fichier image à utiliser comme guide dans la création de votre page :

1


2

Sélectionnez la catégorie Tracé de l’image et définissez les options.

T racé de l'image

Permet de spécifier l'image à utiliser comme guide pour reproduire une mise en page. Cette image sert uniquement de référence et n'apparaît pas lorsque le document s'affiche dans un navigateur.

T ransparence

Détermine l'opacité du tracé de l'image, de complètement transparent à complètement opaque.

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

Pour sélectionner un élément dans le mode Création de la fenêtre de document, cliquez dessus. Si un élément est invisible, vous devez le rendre visible pour le sélectionner.

Certains codes HTML ne sont pas visibles dans un navigateur, comme, par exemple, les balises comment

. Il est cependant utile de pouvoir sélectionner, modifier, déplacer et supprimer ces éléments invisibles lorsque vous créez une page.

Dreamweaver permet d'afficher des icônes à l'emplacement de ces éléments invisibles dans la fenêtre de document en mode

Création. Pour indiquer les marqueurs d'élément qui doivent s'afficher, définissez les préférences liées aux éléments invisibles. Par exemple, vous pouvez spécifier que les ancres nommées soient visibles, mais pas les sauts de ligne.

Vous pouvez créer certains éléments invisibles (tels que les commentaires et les ancres nommées) à l'aide des boutons dans la catégorie Commun de la barre Insertion. Vous pouvez ensuite modifier ces éléments à l'aide de l'inspecteur Propriétés.

Voir aussi

« Affichage du code » à la page 294

« Utilisation de la barre Insertion » à la page 26

Sélection d'éléments

• Pour sélectionner un élément visible dans la fenêtre de document, cliquez dessus ou entourez-le du rectangle de sélection.

• Pour sélectionner un élément invisible, choisissez Affichage > Assistances visuelles > Eléments invisibles (si ce n'est pas déjà fait), puis cliquez sur le marqueur de l'élément dans la fenêtre de document.

Certains objets apparaissent sur la page à un endroit différent de celui dans lequel leur code est inséré. Par exemple, en mode conception, un élément PA peut se trouver n'importe où dans la page, mais en vue Code, le code définissant l'élément PA se trouve dans un emplacement fixe. Lorsque les éléments invisibles sont affichés, Dreamweaver affiche des marqueurs dans

DREAMWEAVER CS3


212

la fenêtre de document pour indiquer l'emplacement du code de ces éléments. En sélectionnant le marqueur, vous sélectionnez tout l'élément : si, par exemple, vous sélectionnez le marqueur d'un élément PA, tout l'élément PA est sélectionné

•

Pour sélectionner une balise complète (avec son contenu, le cas échéant), cliquez sur son symbole dans le sélecteur de balise, dans la partie inférieure gauche de la fenêtre de document. Le sélecteur de balises apparaît en mode Création et en mode Code. Le sélecteur de balises affiche toujours les balises qui contiennent la sélection ou le point d'insertion en cours. La balise à l'extrême gauche est la balise ultrapériphérique contenant la sélection ou le point d'insertion en cours.

La balise suivante est contenue dans cette balise ultrapériphérique, et ainsi de suite. La balise à l'extrême droite est la balise la plus à l'intérieur contenant la sélection ou le point d'insertion en cours.

Dans l'exemple suivant, le point d'insertion est situé dans une balise de paragraphe,

<p>

. Pour sélectionner le tableau contenant le paragraphe que vous souhaitez sélectionner, sélectionnez la balise

<table>

à gauche de la balise

<p>

.

Affichage du code H

T

ML associé au texte ou à l'objet sélectionné

❖


•

Dans la barre d'outils du document, cliquez sur le bouton Afficher le mode Code.

•

Choisissez Affichage

•

Dans la barre d'outils du document, cliquez sur le bouton Afficher les modes Code et Création.

•


•

Choisissez Fenêtre > Inspecteur de code.

Lorsque vous sélectionnez un élément dans l'un des deux éditeurs de code (mode Code ou inspecteur de code), il est

également sélectionné dans la fenêtre de document. Il est parfois nécessaire de synchroniser les deux affichages pour que la sélection apparaisse.

Affichage ou masquage des icônes des éléments invisibles

❖

Choisissez Affichage > Assistances visuelles > Eléments invisibles.

Remarque :

L'affichage des éléments invisibles risque de modifier légèrement la mise en page, en déplaçant d'autres éléments de quelques pixels. Pour conserver une mise en page précise, vous devez donc masquer ces éléments invisibles.

Définition des préférences des éléments invisibles

Utilisez les préférences des éléments invisibles pour déterminer les types d'éléments devant être affichés lorsque l'option

Affichage > Assistances visuelles > Eléments invisibles est activée.

1

Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), puis cliquez sur Eléments invisibles.

2

Sélectionnez les éléments à rendre visibles, puis cliquez sur OK.

Remarque :

Une coche à côté du nom de l'élément dans la boîte de dialogue signifie que l'élément est visible lorsque l'option

Affichage > Assistances visuelles > Eléments invisibles est activée.

Ancres nommées

Affiche une icône marquant l'emplacement de chaque ancre nommée ( a name =""

) dans le document.

Scripts

Affiche une icône marquant l'emplacement de code Java Script ou VBScript dans le corps du document.

Sélectionnez cette icône pour modifier le script dans l'inspecteur Propriétés, ou pour créer un lien vers un fichier script externe.

Commentaires

Affiche une icône marquant l'emplacement d’un commentaire HTML. Sélectionnez cette icône pour consultez le commentaire dans l'inspecteur Propriétés.

Sauts de ligne

défaut.

Affiche une icône marquant l'emplacement de chaque saut de ligne (

BR

). Cette option est désélectionnée par

Cartes graphiques côté client

Affiche une icône marquant l'emplacement de chaque carte graphique du document.

DREAMWEAVER CS3


213

Styles incorporés

Affiche une icône marquant l'emplacement de styles CSS incorporés dans le corps du document. Les styles CSS placés dans l'en-tête du document n'apparaissent pas dans la fenêtre de document.

Champs de formulaire masqués

est fixé à

"hidden"

.

Affiche une icône marquant l'emplacement de champs de formulaire dont l'attribut type

Séparateur de formulaire

Affiche une bordure délimitant le formulaire pour vous aider à y insérer des éléments. La bordure indique l'étendue de la balise form

; ainsi, tous les éléments de formulaire à l'intérieur de cette bordure sont correctement inclus dans les balises form

.

Points d'ancrage des éléments PA

Affiche une icône marquant l'emplacement du code définissant un élément PA.

L'élément PA lui-même peut être positionné n'importe où dans la page. Les éléments PA ne constituent pas des éléments invisibles ; seul le code qui les définit est invisible. Sélectionnez l'icône afin de sélectionner l'élément PA. Vous pouvez ainsi afficher le contenu de l'élément PA, même s'il est marqué comme masqué.

Points d'ancrage des éléments alignés

Affiche une icône marquant l'emplacement du code HTML des éléments qui acceptent l'attribut align

. Ces éléments sont les suivants : images, tableaux, objets ActiveX, plug-ins et applets. Dans certains cas, le code de l'élément peut être séparé de l'objet visible.

Balises de marquage de serveur visuel

Affiche l'emplacement des balises de marquage de serveur (telles que les balises

ASP (Active Server Pages) et ColdFusion) dont le contenu ne peut pas être affiché dans la fenêtre de document.

Balises de marquage de serveur non visuel

Affiche l'emplacement des balises de marquage de serveur (telles que les balises

ASP (Active Server Pages) et ColdFusion) dont le contenu ne peut pas être affiché dans la fenêtre de document.

Affichage CSS: Aucun

Affiche une icône qui montre l'emplacement du contenu masqué par la propriété display:none de la feuille de style liée ou incorporée.

Afficher le texte dynamique sous

Affiche le texte dynamique de la page dans le format {Recordset:Field} par défaut. Si la longueur de ces valeurs perturbe la mise en forme de la page, vous pouvez choisir le type d'affichage {}.

Inclusions côté serveur

Affiche le contenu réel de chaque fichier d'inclusion côté serveur.

Spécification de balises H

T

ML au lieu de CSS

Par défaut, Dreamweaver utilise les balises CSS pour attribuer les propriétés de page. Si vous préférez utiliser des balises

HTML, désactivez l'option Utiliser des balises CSS au lieu de balises HTML dans la catégorie Général de la boîte de dialogue

Préférences.

1


2

Dans la catégorie Général de la boîte de dialogue Propriétés de la page, désactivez l'option Utiliser des balises CSS au lieu de balises HTML (dans la catégorie Options d'édition du panneau Préférences générales) puis cliquez sur OK.

Définition des options d'aspect H

T

ML de la page

La catégorie Aspect HTML de la boîte de dialogue Propriétés de la page permet de spécifier diverses options de mise en forme des pages Web :

Image d'arrière-plan et Arrière-plan

Spécifient une image et une couleur d'arrière-plan pour la page.

T exte et Liens

Définissent les couleurs par défaut du texte, des liens, des liens visités et des liens actifs. Vous pouvez

également définir ces couleurs à l'aide des feuilles de style CSS.

Marge gauche et Marge haut

Spécifient la taille des marges de la page dans la balise body, pour Microsoft Internet Explorer uniquement. Netscape Navigator ignore ces valeurs et utilise à la place Largeur de marge et Hauteur de marge. Pour des résultats optimaux sur tous types de navigateurs, définissez les quatre valeurs de marge (au lieu de deux seulement). Pour

être certain qu'aucune marge n'apparaîtra dans aucun des navigateurs, définissez les quatre valeurs sur 0. Dreamweaver n'affiche pas les marges de la page dans la fenêtre de document ; pour les voir, utilisez la commande Aperçu dans le navigateur.

Largeur de marge et Hauteur de marge

Spécifient la taille des marges de la page dans la balise body, pour Netscape

Navigator uniquement. Internet Explorer ignore ces valeurs et utilise à la place Marge gauche et Marge haut. Pour des résultats optimaux sur tous types de navigateurs, définissez les quatre valeurs de marge (au lieu de deux seulement). Pour

DREAMWEAVER CS3


214

être certain qu'aucune marge n'apparaîtra dans aucun des navigateurs, définissez les quatre valeurs sur 0. Dreamweaver n'affiche pas les marges de la page dans la fenêtre de document ; pour les voir, utilisez la commande Aperçu dans le navigateur.

Voir aussi

« Application, suppression ou changement du nom de styles de classe » à la page 133

« A propos de la définition des propriétés de page » à la page 206


Couleurs Web sécurisées

En HTML, les couleurs sont exprimées par leur valeur hexadécimale (par exemple,

#FF0000

) ou, pour les principales, par leur nom en anglais ( red

). Une couleur sécurisée pour le Web est une couleur qui, en mode 256 couleurs, reste toujours la même dans Netscape Navigator et Microsoft Internet Explorer, sous Windows comme sous Macintosh. Par convention, il y a 216 couleurs communes, et toute valeur hexadécimale combinant les paires 00, 33, 66, 99, CC ou FF (correspondant respectivement aux niveaux RVB 0, 51, 102, 153, 204 et 255) représente une couleur sécurisée pour le Web.

Des tests approfondis ont cependant révélé qu'en réalité seules 212 couleurs sont sécurisées pour le Web. Sous Windows,

Internet Explorer ne restitue pas correctement les couleurs #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) et

#33FF00 (51,255,0).

Lorsque les navigateurs Web ont fait leur apparition, la plupart des ordinateurs n'affichaient que 265 couleurs (8 bits par canal, bpc). Aujourd'hui, la plupart des ordinateurs affichent des milliers ou des millions de couleurs (16 et 32 bpc). L'utilité de la palette adaptée à tous les navigateurs est donc bien moindre si vous développez votre site pour les utilisateurs de systèmes informatiques modernes.

La palette de couleurs sécurisée pour le Web peut s'avérer utile si vous créez des sites pour des appareils différents, comme les organisateurs personnels et les téléphones mobiles. Un grand nombre de ces appareils sont équipés d'un écran noir et blanc (1 bpc) ou 256 couleurs (8 bpc).

Les palettes Cubes de couleur (valeur par défaut) et Ton continu de Dreamweaver utilisent la palette sécurisée pour le Web de 216 couleurs ; lorsque vous sélectionnez une couleur dans ces palettes, c'est la valeur hexadécimale correspondante qui s'affiche.

Pour choisir une couleur en dehors de la gamme sécurisée pour le Web, ouvrez le nuancier du système en cliquant sur le bouton Roue chromatique en haut à droite du sélecteur de couleurs de Dreamweaver. Celle-ci n'est pas limitée aux couleurs sécurisées pour le Web.

Les versions UNIX de Netscape Navigator utilisent une palette de couleurs différente de celle des versions Windows et

Macintosh. Si vous développez exclusivement pour des plates-formes UNIX (ou si le public visé est composé d'utilisateurs de Windows ou de Macintosh équipés de moniteurs 24 bpc), vous pouvez utiliser des valeurs hexadécimales combinant les paires 00, 40, 80, BF ou FF, qui produisent des couleurs sécurisées pour le Web sur les ordinateurs exécutant SunOS.

Utilisation du sélecteur de couleur

Dans Dreamweaver, les inspecteurs de propriétés de la plupart des éléments de page, ainsi que de nombreuses boîtes de dialogue, comportent une icône permettant d'ouvrir un sélecteur de couleur. Choisissez la couleur d'un élément de page dans le sélecteur. Vous pouvez également définir la couleur par défaut du texte des éléments de votre page.

1

Cliquez sur l'icône des couleurs dans n'importe quelle boîte de dialogue ou dans l'inspecteur Propriétés.

Le sélecteur de couleur s'affiche à l'écran.

2


• Utilisez la pipette pour sélectionner une nuance de couleur dans la palette. Toutes les couleurs des palettes Cubes de couleur (valeur par défaut) et Ton continu sont sécurisées pour le Web ; les autres palettes ne le sont pas.

DREAMWEAVER CS3


215

•

Utilisez la pipette pour sélectionner une couleur à partir d'un point visible à l'écran, même à l'extérieur de la fenêtre de

Dreamweaver. Pour sélectionner une couleur sur le bureau ou dans une autre application, appuyez sur le bouton de la souris et maintenez-le enfoncé. La pipette peut ainsi rester active et sélectionner une couleur en dehors de Dreamweaver.

Si vous cliquez sur le bureau ou sur une autre application, Dreamweaver sélectionne la couleur de l'emplacement où vous avez cliqué. Cependant, si vous passez à une autre application, il peut s'avérer nécessaire de cliquer sur une fenêtre de

Dreamweaver pour continuer à travailler dans Dreamweaver.

•

Pour élargir plus amplement la sélection, utilisez le menu déroulant en haut à droite du nuancier. Vous pouvez sélectionner les palettes Cubes de couleur, Ton continu, Système d'exploitation Windows, Mac OS, Niveaux de gris et

Couleurs Web.

Remarque :

Les palettes Cubes de couleur et Ton continu sont sécurisées pour le Web, contrairement aux palettes Système d'exploitation Windows, Mac OS et Niveaux de gris. Si la palette que vous utilisez n'est pas sécurisée pour le Web et que vous cliquez sur Couleurs Web, Dreamweaver remplace la couleur sélectionnée par la couleur sécurisée pour le Web la plus proche.

Autrement dit, la couleur que vous voyez n'est pas forcément celle que vous avez choisie.

•

Pour effacer la couleur en cours sans devoir en choisir une autre, cliquez sur le bouton Couleur par défaut .

•

Pour ouvrir le nuancier du système, cliquez sur le bouton Roue chromatique .

Zoom avant et arrière

Dreamweaver permet d'agrandir (zoom avant) l'affichage de la fenêtre de document de manière à pouvoir vérifier la précision des graphiques, sélectionner plus aisément de petits éléments, concevoir des pages avec un texte en petite taille, concevoir de très grande pages, etc.

Remarque :

Les outils de zoom ne sont disponibles qu'en mode Création.

Voir aussi

« Présentation de la barre d'état » à la page 17

Zoom avant ou arrière sur une page

1

Sélectionnez l'outil Zoom (la loupe) située dans le coin inférieur droit de la fenêtre du document.

2


•

Cliquez sur la zone de la page que vous souhaitez agrandir jusqu'à obtenir l'affichage désiré.

•

Tracez un cadre autour de la zone de la page que vous souhaitez agrandir, puis relâchez le bouton de la souris.

•

Sélectionnez une échelle d'agrandissement prédéfini dans le menu déroulant Zoom.

•

Saisissez une échelle d'agrandissement dans le champ Zoom.

Vous pouvez également effectuer un grossissement avec l'outil Zoom en appuyant sur Ctrl+= (Windows) ou Commande+=

(Macintosh).

3

Pour effectuer un zoom arrière (réduire le taux d'agrandissement), appuyez sur la touche Alt (Windows) ou Option

(Macintosh), puis cliquez sur la page.

Vous pouvez également effectuer une réduction avec l'outil Zoom en appuyant sur Ctrl+- (Windows) ou Commande+-

(Macintosh).

Modification d'une page après un zoom

❖

Sélectionnez l'outil Pointeur (icône en forme de flèche) située dans le coin inférieur droit de la fenêtre du document, puis cliquez dans la page.

Défilement d'une page après un zoom

1

Sélectionnez l'outil Main (icône en forme de main) située dans le coin inférieur droit de la fenêtre du document.

2

Faites glisser la page.

DREAMWEAVER CS3


216

Adaptation de la fenêtre du document à la sélection

1

Sélectionnez un élément de la page.

2

Sélectionnez Affichage > Ajuster à la sélection.

Adaptation de la fenêtre du document à une page entière

❖

Sélectionnez Affichage > Ajuster à la page.

Adaptation de la fenêtre du document à la largeur d'une page

❖

Sélectionnez Affichage > Ajuster à la largeur.

Utilisation de comportements Java Script pour détecter le type et la version des navigateurs et des plug-ins

Vous pouvez utiliser des comportements pour déterminer le type de navigateur utilisé par vos visiteurs, et savoir s'ils disposent d'un plug-in particulier.

Vérifier le navigateur

Permet d'envoyer les visiteurs sur des pages différentes selon le type et la version de leur navigateur.

Par exemple, vous pouvez envoyer les utilisateurs de Netscape Navigator 4.0 ou version ultérieure sur une page, les utilisateurs de Microsoft Internet Explorer 4.0 ou version ultérieure sur une autre, et les utilisateurs d'un autre type de navigateur sur la page en cours.

Vérifier le Plug-in

Permet d'envoyer les visiteurs sur des pages différentes selon qu'ils disposent ou non du plug-in indiqué.

Par exemple, vous pouvez envoyer les utilisateurs disposant de Shockwave™ sur une page et les autres sur une page différente.

Voir aussi


« Application du comportement Vérifier le navigateur » à la page 337

« Application du comportement Vérifier le plug-in » à la page 338

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

Dreamweaver calcule la taille sur la base du contenu de toute la page, y compris tous les objets liés, tels que les images et les plug-ins. Dreamweaver estime la durée de téléchargement en fonction de la vitesse de connexion entrée dans les préférences de la Barre d'état. Le temps de téléchargement réel dépend de l'état du trafic sur Internet,

Pour vérifier les durées de téléchargement pour une page Web particulière, il est intéressant d'utiliser la « règle des 8 secondes » ; c'est-à-dire que la plupart des utilisateurs n'attendront pas plus de huit secondes pour le téléchargement d'une page.

1


2

Sélectionnez la catégorie Barre d'état dans la liste de gauche.

3

Choisissez la vitesse de connexion à partir de laquelle le temps de téléchargement sera calculé, puis cliquez sur OK.

Voir aussi

« Définition de la taille des fenêtres et de la vitesse de connexion » à la page 25

Définition des préférences d'aperçu dans un navigateur

Vous pouvez définir les préférences que les navigateurs emploieront lors de l'affichage de l'aperçu d'un site, ainsi que définir les navigateurs principaux et secondaires.

1

Choisissez Fichier > Aperçu dans le navigateur > Modifier la liste des navigateurs.

2

Pour ajouter un navigateur dans la liste, cliquez sur le bouton plus (+), complétez la boîte de dialogue Navigateurs, puis cliquez sur OK.

DREAMWEAVER CS3


217

3

Pour supprimer un navigateur de la liste, sélectionnez-le, puis cliquez sur le bouton moins (-).

4

Pour modifier les paramètres d'un navigateur sélectionné, cliquez sur le bouton Modifier, effectuez les modifications dans la boîte de dialogue Modifier le navigateur, puis cliquez sur OK.

5

Sélectionnez l'option Navigateur principal ou Navigateur secondaire pour indiquer si le navigateur sélectionné est le navigateur primaire ou secondaire.

Appuyez sur F12 (Windows) ou Option+F12 (Macintosh) pour ouvrir le navigateur principal et sur Ctrl+F12 (Windows) ou Commande+F12 (Macintosh) pour ouvrir le navigateur secondaire.

6

Sélectionnez Aperçu à l'aide d'un fichier temporaire pour créer une copie temporaire qui sera utilisée pour l'aperçu et le déboguage. Désélectionnez cette option si vous souhaitez mettre le document directement à jour.

Enregistrement de pages Web et retour à leur version d'origine

Vous pouvez enregistrer un document en utilisant son nom et son emplacement actuels ou enregistrer une copie du document sous un nouveau nom, dans un autre emplacement.

Evitez tout espace ou caractère spécial dans les noms de fichier ou de dossier. En particulier, n'utilisez pas de caractères spéciaux (par exemple é, ç ou ¥) ou de signes de ponctuation (deux points, barres obliques ou points) dans le nom des fichiers que vous avez l'intention de placer sur un serveur distant. En effet, la plupart des serveurs transforment ces caractères lors du transfert, rendant ainsi inopérants les liens vers ces fichiers. En outre, ne commencez pas le nom de fichier par un numéro.

Voir aussi

« Création d'une page vierge » à la page 67

Enregistrement d'un document

1


•

Pour écraser la version présente sur le disque et enregistrer toute modification effectuée, sélectionnez Fichier >

Enregistrer.

•

Pour enregistrer le fichier dans un dossier différent ou sous un autre nom, sélectionnez Fichier > Enregistrer sous.

2

Dans la boîte de dialogue Enregistrer sous qui s'affiche, recherchez le dossier dans lequel vous voulez enregistrer le fichier.

3

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

4

Cliquez sur Enregistrer pour enregistrer le fichier.

Enregistrement de tous les documents ouverts

1

Choisissez Fichier > Enregistrer tout.

2

Si des documents non enregistrés sont ouverts, la boîte de dialogue Enregistrer sous s'affiche pour chacun d'entre eux.

Dans la boîte de dialogue qui s'affiche, recherchez le dossier où vous voulez enregistrer le fichier.

3

Dans la zone de texte Nom de fichier, entrez le nom du fichier puis cliquez sur Enregistrer.

Rétablissement de la dernière version enregistrée d'un document

1

Sélectionnez Fichier > Rétablir.

Une boîte de dialogue vous invite à confirmer l'annulation de vos modifications et le retour à la version précédemment enregistrée.

2

Cliquez sur Oui pour revenir à la version précédente ou sur Non pour appliquer les modifications.

Remarque :

Si vous enregistrez un document, puis que vous quittez Dreamweaver, il ne sera pas possible de revenir à la version précédente lors de la prochaine utilisation de Dreamweaver.

DREAMWEAVER CS3


218

Ajout et mise en forme de texte

A propos de l'insertion de texte

Dreamweaver permet d'ajouter du texte directement dans une page, de copier et de coller du texte provenant d'un autre document ou de faire glisser du texte depuis une autre application. Vous pouvez également importer du texte ou établir des liens avec d'autres types de documents, comme les fichiers de texte ASCII, les fichiers .rtf (rich text format) et les documents

Microsoft Office.

Ajout de texte dans un document

Pour ajouter du texte dans un document Dreamweaver, vous pouvez le saisir directement dans la fenêtre du document ou effectuer un copier/coller. Vous pouvez également importer du texte à partir d’autres documents.

Pour coller du texte dans un document Dreamweaver, vous pouvez utiliser la commande Coller ou Collage spécial. La commande Collage spécial permet de préciser le format du texte collé de différentes façons. Par exemple, lorsque vous souhaitez coller le texte d'un document Microsoft Word déjà formaté dans votre document Dreamweaver en ignorant sa mise en forme initiale afin d'appliquer votre propre feuille de style CSS, sélectionnez le texte dans Word, copiez-le dans le presse-papiers, puis utilisez la commande Collage spécial pour sélectionner l'option qui permet de ne coller que le texte.

Lorsque vous utilisez la commande Coller pour coller un texte issu d'une autre application, vous pouvez définir des préférences de collage comme options par défaut.

Remarque :

Dans la vue Code, Ctrl-V (Windows) et Commande-V (Macintosh) collent toujours le texte seulement (sans mise en forme).

❖

Pour ajouter du texte dans un document, procédez de l'une des manières suivantes :

•

Tapez le texte directement dans la fenêtre de document.

•

Copiez du texte à partir d'une autre application, passez dans Dreamweaver, placez le point d'insertion dans la fenêtre du document en mode Création, puis choisissez Edition > Coller ou Edition > Collage spécial.

Lorsque vous choisissez Edition > Collage spécial, vous pouvez choisir plusieurs options de formatage du texte collé.

O ption de collage

C o ll er

C o ll age sp

é cia l

Raccourci clavier

C tr l+V (W indo w s

)

C ommande +V (M acintosh )

C tr l+M a j+V (W indo w s

)

C ommande +M a j+V (M acintosh )

Insertion de caractères spéciaux

Certains caractères spéciaux sont représentés en HTML par un nom ou par un numéro, qui est alors appelé

entité

. Le langage HTML prévoit des noms d'entités pour de nombreux caractères spéciaux, par exemple le symbole de copyright

(

©

), l'esperluette (

&

) et le symbole Marque déposée (

®

). Chaque entité est représentée à la fois par un nom HTML

(par exemple

—

pour le tiret cadratin) et son équivalent numérique (dans ce cas, ).

Le langage HTML utilise des crochets <> dans son code, mais vous devez exprimer les caractères spéciaux supérieur à et inférieur à sans que Dreamweaver les interprète comme du code. Dans ce cas, utilisez > pour le signe supérieur à (>) et <

Malheureusement, certains navigateurs (certaines versions anciennes, ainsi que les navigateurs autres que Netscape

Navigator et Internet Explorer) n'affichent pas correctement la plupart de ces entités.

1

Dans la fenêtre de document, placez le curseur là où vous voulez insérer un caractère spécial.

DREAMWEAVER CS3


219

2


•

Choisissez le nom du caractère dans le sous-menu Insertion > HTML > Caractères spéciaux.

•

Dans la catégorie Texte de la barre Insertion, cliquez sur le bouton Caractères et choisissez le caractère désiré dans le sous-menu.

Un grand nombre d'autres caractères spéciaux sont disponibles. Pour en sélectionner un, choisissez Insertion > HTML >

Caractères spéciaux > Autre ou cliquez sur le bouton Caractères de la catégorie Texte de la barre Insertion, puis choisissez

Autres caractères. Choisissez un caractère dans la boîte de dialogue Insérer autre caractère et cliquez sur OK.

Ajout d'espacements entre les caractères

Le langage HTML n'autorisant qu'un seul espace entre les caractères, il convient d'insérer un espace insécable afin d'ajouter un espace supplémentaire dans un document. Vous pouvez définir une préférence pour l'insertion automatique d'un espace insécable dans un document.

Insertion d'un espace insécable

❖


•

Choisissez Insertion > HTML > Caractères spéciaux > Espace insécable.

•

Appuyez sur les touches Ctrl+Maj+Espace (Windows) ou Option+Espace (Macintosh).

•

Dans la catégorie Texte de la barre Insertion, cliquez sur le bouton Caractères et cliquez sur l'icône Espace insécable.

Définition d'une préférence pour l'ajout d'espaces insécables

1


2

Dans la catégorie Général, assurez-vous que l'option Autoriser plusieurs espaces consécutifs soit activée.

Création de listes à puces ou numérotées

Vous pouvez créer des listes numérotées (triées), des listes à puces (non triées) et des listes de définitions à partir d'un texte existant ou d'un nouveau texte que vous tapez dans la fenêtre de document.

Les listes de définitions n'utilisent pas de caractères d'en-tête tels que des puces ou des nombres et sont souvent utilisées dans les glossaires ou les descriptions. Les listes peuvent également être imbriquées, c'est-à-dire qu'elles contiennent d'autres listes. Par exemple, vous pouvez imbriquer une liste numérotée ou à puces au sein d'une autre liste de même type.

La boîte de dialogue Propriétés de liste vous permet de définir l'aspect d'une liste complète ou d'un élément de liste. Vous pouvez définir le style de numérotation, remettre à zéro la numérotation ou définir les options du style de puce d'éléments individuels de la liste ou de la liste complète.

Voir aussi


Création d'une nouvelle liste

1

Dans le document Dreamweaver, placez le point d'insertion à l'emplacement où insérer la liste, puis procédez de l'une des manières suivantes :

•

Cliquez sur le bouton Liste simple ou Liste numérotée dans l'inspecteur Propriétés.

•

Choisissez Texte > Liste, puis sélectionnez le type de liste qui vous convient : Liste simple (à puces), Liste numérotée ou

Liste de définitions.

Le caractère de tête de l'élément de liste spécifié apparaît dans la fenêtre de document.

2

Tapez le texte de l'élément de la liste, puis appuyez sur la touche Entrée (Windows) ou Retour (Macintosh) pour créer un autre élément de liste.

3

Pour marquer la fin de la liste, appuyez à deux reprises sur la touche Entrée (Windows) ou Retour (Macintosh).

DREAMWEAVER CS3


220

Création d'une liste à partir d'un texte existant

1

Sélectionnez une suite de paragraphes pour les transformer en liste.

2

Cliquez sur le bouton Liste simple ou Liste numérotée dans l'inspecteur Propriétés ou choisissez Texte > Liste, puis sélectionnez le type de liste désiré : Liste simple, Liste numérotée ou Liste de définitions.

Création d'une liste imbriquée

1

Sélectionnez les éléments de liste à imbriquer.

2

Cliquez sur le bouton Retrait de l'inspecteur Propriétés ou choisissez Texte > Retrait.

Dreamweaver met le texte en retrait et crée une liste individuelle avec les attributs HTML de la liste d'origine.

3

Appliquez un nouveau style ou type de liste au texte en retrait en suivant la même procédure que celle utilisée ci-dessus.

Définition des propriétés d'une liste complète

1

Dans la fenêtre de document, créez au moins un élément de liste. Le nouveau style s'applique automatiquement aux nouveaux éléments ajoutés à la liste.

2

Placez le point d'insertion dans le texte de l'élément de la liste, puis choisissez Texte > Liste > Propriétés de la liste pour ouvrir la boîte de dialogue Propriétés de liste.

3

Sélectionnez les options que vous voulez appliquer à la liste :

T ype de liste

Spécifie les propriétés de la liste, tandis que Elément de liste caractérise un élément individuel d'une liste. Dans le menu déroulant, sélectionnez une liste simple, une liste numérotée, une liste des répertoires ou une liste des menus. Les options disponibles dans la boîte de dialogue varient selon le type de liste choisi.

Style

Définit le style des numéros ou des puces utilisés avec une liste numérotée ou à puces. Tous les éléments de la liste prendront ce style, sauf si vous attribuez un nouveau style à certains éléments.

Démarrer le comptage

Définit la valeur à attribuer au premier élément d'une liste numérotée.

4

Cliquez sur OK pour définir les options.

Définition des propriétés d'un élément de liste

1

Dans la fenêtre de document, placez le point d'insertion dans le texte d'un élément de la liste.

2

Choisissez Texte > Liste > Propriétés de la liste.

3

Dans Elément de liste, sélectionnez les options que vous voulez définir

N ouveau style

Caractérise le style de l'élément de liste sélectionné. Les styles du menu Nouveau style sont apparentés au type de liste affiché dans le menu Type de liste. Si, par exemple, vous avez choisi l'option Liste simple dans le menu Type de liste, seules les options de puce sont disponibles dans le menu Nouveau style.

Réinitialiser le compte à

Définit un numéro spécifique à partir duquel numéroter les éléments de liste.

4

Cliquez sur OK pour définir les options.

Recherche et remplacement de texte

Vous pouvez utiliser la commande Rechercher et remplacer pour rechercher du texte ainsi que des attributs et des balises

HTML dans un ou plusieurs documents. Le panneau Recherche, situé dans le groupe de panneaux Résultats, indique les résultats des recherches pour lesquelles l'option Rechercher tout est sélectionnée.

Remarque :

Pour rechercher des fichiers dans un site, utilisez les commandes suivantes : Retrouver sur le site local et Retrouver sur le site distant.

Voir aussi


DREAMWEAVER CS3


221

Recherche et remplacement de texte

1

Ouvrez le document dans lequel la recherche doit être effectuée ou sélectionnez des documents ou un dossier dans le panneau Fichiers.

2

Sélectionnez la commande Edition

3

L'option Rechercher dans vous permet de définir les fichiers dans lesquels effectuer la recherche :

T exte sélectionné

Permet de limiter la recherche au texte alors sélectionné dans le document actif.

Document actif

Permet de limiter la recherche au document actif.

O uvrir les documents

Permet d'effectuer la recherche dans tous les documents alors ouverts.

Dossier

Permet de limiter la recherche à un dossier spécifique. Après avoir choisi Dossier, cliquez sur l'icône représentant un dossier pour sélectionner le dossier dans lequel effectuer votre recherche.

Fichiers sélectionnés dans le site

panneau Fichiers.

Permet de limiter la recherche aux fichiers et dossiers actuellement sélectionnés dans le

Site local en cours entier

Permet d'étendre la recherche à l'ensemble des documents HTML, des fichiers de bibliothèque et des documents texte du site courant.

4

Le menu déroulant Rechercher permet de spécifier le type de recherche à effectuer :

Code source

Permet de rechercher des chaînes de texte spécifiques dans le code source HTML. Vous pouvez rechercher des balises spécifiques à l'aide de cette option, mais la recherche Balise spécifique offre une approche plus flexible pour ce type d'opération.

T exte

Permet de rechercher des chaînes spécifiques de texte au sein du document. Une recherche sur du texte ignore tout code HTML qui interromprait la chaîne indiquée. Par exemple, si vous recherchez

le chien noir

, vous trouverez aussi bien le chien noir

que le chien <i>noir</i>

.

T exte (avancé)

Permet de rechercher des chaînes de texte spécifiques se trouvant à l'intérieur ou à l'extérieur d'une ou plusieurs balises. Par exemple, dans un document qui contient le code HTML suivant, la recherche de

essaie

en précisant

Pas de balise interne et la balise i

renvoie uniquement la seconde occurrence du mot essaie

:

Jean <i>essaie</i> de terminer son travail à temps, mais n'y arrive pas toujours. Il essaie cependant farouchement.

.

Balise spécifique

Permet de rechercher des balises, attributs et valeurs d'attribut spécifiques, telles que toutes les balises td où valign

est défini sur top

.

Remarque :

Appuyez sur Ctrl+Entrée ou Maj+Entrée (Windows) ou sur Contrôle+Retour, Maj+Retour ou

Commande+Retour (Macintosh) pour insérer des sauts de ligne au sein des champs de recherche, ce qui permet de rechercher un caractère de retour chariot. Lorsque vous effectuez une telle recherche, désactivez l'option Ignorer les différences entre les espaces blancs si vous n'utilisez pas d'expressions régulières. Cette recherche porte sur un caractère de retour chariot en particulier, et non sur l'occurrence d'un saut de ligne ; par exemple, elle ne trouvera pas de balise

<br>

ou

<p>

. Les caractères de retour chariot apparaissent en tant qu'espaces en mode Création, et non en tant que sauts de ligne.

5

Utilisez les options suivantes pour élargir ou limiter la recherche :

Respecter la casse

Limite la recherche au texte dont la casse correspond à celle du texte recherché. Par exemple, si vous recherchez

le français

, vous ne trouverez pas le Français

.

Ignorer les différences entre les espaces blancs

Traite tout espace blanc comme s'il s'agissait d'un simple espace pour les besoins de la recherche. Par exemple, si cette option est activée,

ce texte

correspond à ce texte

et à ce texte

, mais pas à cetexte

. Cette option n'est pas disponible lorsque l'option Utiliser les expressions régulières est sélectionnée ; vous devez écrire explicitement l'expression régulière pour ignorer les espaces blancs. Notez que les balises

<p>

et

<br>

ne sont pas comptées comme des espaces blancs.

Mot entier

Limite la recherche aux occurrences contenant un ou plusieurs mots entiers.

Remarque :

L'utilisation de cette option équivaut à effectuer une recherche classique d'une chaîne commençant et terminant par \b, l'expression régulière de limite entre les mots.

DREAMWEAVER CS3


222

Utiliser les expressions régulières

Fait en sorte que certains caractères et chaînes courtes (tels que ?, *, \w et \b) de la chaîne recherchée soient interprétés comme des opérateurs d'expression régulières. Par exemple, une recherche sur

le c\w*\b noir

trouvera aussi bien le chien noir que le chapeau noir

Remarque :

Si vous travaillez dans l'Affichage de code et modifiez le document, puis essayez de rechercher et de remplacer tout

élément autre que du code source, une boîte de dialogue s'affiche et vous informe que Dreamweaver synchronise les deux fenêtres avant d'effectuer la recherche.

6

Pour rechercher des chaînes sans les remplacer, cliquez sur Rechercher suivant ou sur Rechercher tout :

Suivant

Permet de passer à l'occurrence suivante dans le document actif et de la sélectionner. S'il s'agit de la dernière occurrence de la chaîne recherchée, Dreamweaver passe au document suivant si la recherche porte sur plusieurs documents.

Rechercher tout

Ouvre le panneau Recherche du groupe de panneaux Résultats. Si la recherche ne porte que sur un document, toutes les occurrences de la chaîne recherchée s'affichent avec leur contexte. Si la recherche porte sur un dossier ou un site, Rechercher tout affiche la liste des documents contenant la chaîne recherchée.

7

Pour remplacer les chaînes trouvées, cliquez sur Remplacer ou sur Remplacer tout.

8

Cliquez sur Fermer lorsque vous avez terminé.

N ouvelle recherche sans afficher la boîte de dialogue Rechercher et remplacer

❖

Appuyez sur F3 (Windows) ou Commande+G (Macintosh).

Affichage du contexte d'un résultat donné

1

Choisissez Fenêtre > Résultats pour afficher le panneau Rechercher.

2

Double-cliquez sur une ligne du panneau Rechercher.

Si vous effectuez une recherche dans le document actif, la fenêtre du document affiche la ligne contenant le résultat de la recherche.

Si la recherche porte sur plusieurs fichiers, le fichier contenant ce résultat s'ouvre.

N ouvelle exécution d'une même recherche

❖

Cliquez sur le bouton Rechercher et remplacer.

Arrêt d'une recherche en cours

❖

Cliquez sur le bouton Arrêter.

Recherche d'une balise spécifique

La boîte de dialogue Rechercher et remplacer vous permet de rechercher du texte et des balises dans un document et de remplacer les occurrences trouvées par un autre texte ou d'autres balises.

1


2

Dans le menu déroulant Rechercher, sélectionnez Balise spécifique.

3

Sélectionnez une balise spécifique ou

[toute balise]

dans le menu déroulant situé près du menu déroulant Rechercher ou tapez un nom de balise dans la zone de texte.

4

(Facultatif) Limitez la recherche à l'aide de l'un des modificateurs de balise suivants

Avec attribut

Permet de sélectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit trouvée. Vous pouvez spécifier une valeur particulière pour cet attribut ou choisir

[toute valeur]

.

Sans attribut

Permet de sélectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit trouvée. Par exemple, vous pouvez rechercher toutes les balises img

n'ayant pas l'attribut alt

.

Contenant

Indique un texte ou une balise qui doit figurer dans la balise d'origine pour que la correspondance soit trouvée.

Par exemple, dans le code

<b><font size="4">heading 1</font></b>

, labalise font

est placée à l'intérieur de la balise b

.

DREAMWEAVER CS3


223

N e contenant pas

soit trouvée.

Indique un texte ou une balise qui ne doit pas figurer dans la balise d'origine pour que la correspondance

Balise interne

trouvée.

Spécifie une balise à l'intérieur de laquelle la balise cible doit être incluse pour que la correspondance soit

Pas de balise interne

Spécifie une balise à l'intérieur de laquelle la balise cible ne doit pas se trouver pour que la correspondance soit trouvée.

5

(Facultatif) Pour cibler encore la recherche, cliquez sur le bouton plus (+) et répétez l'étape 3.

6

Si aucun modificateur de balise n'a été appliqué aux étapes 3 et 4, cliquez sur le bouton moins (-) pour réduire le menu de modificateur de balise.

7

Si vous devez exécuter une action lorsque la balise est trouvée (telle que le retrait ou le remplacement de cette balise), sélectionnez cette action dans le menu contextuel Action, puis, si nécessaire, spécifiez l'action à effectuer.

Recherche de texte spécifique (avancée)

La boîte de dialogue Rechercher et remplacer vous permet de rechercher du texte et des balises dans un document et de remplacer les occurrences trouvées par un autre texte ou d'autres balises.

1


2

Dans le menu déroulant Rechercher, choisissez Texte (avancé).

3

Tapez le texte dans la zone de texte situé près du menu déroulant Rechercher.

Par exemple, tapez le mot

Indéfini

.

4

Sélectionnez l'option balise interne ou pas de balise interne, puis choisissez une balise dans le menu déroulant adjacent.

Par exemple, cliquez sur Dans la balise, puis sélectionnez title

.

5

(Facultatif) Cliquez sur le bouton plus (+) pour limiter la recherche à l'aide d'un des modificateurs de balise suivants :

Avec attribut

Permet de sélectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit trouvée. Vous pouvez spécifier une valeur particulière pour cet attribut ou choisir

[toute valeur]

.

Sans attribut

Permet de sélectionner un attribut qui ne doit pas figurer dans la balise pour que la correspondance soit trouvée. Par exemple, vous pouvez rechercher toutes les balises img


.

Contenant

Indique un texte ou une balise qui doit figurer dans la balise d'origine pour que la correspondance soit trouvée.

Par exemple, dans le code

<b><font size="4">heading 1</font></b>

, labalise font

est placée à l'intérieur de la balise b

.

N e contenant pas

soit trouvée.

Indique un texte ou une balise qui ne doit pas figurer dans la balise d'origine pour que la correspondance

Balise interne

trouvée.

Spécifie une balise à l'intérieur de laquelle la balise cible doit être incluse pour que la correspondance soit

Pas de balise interne

Spécifie une balise à l'intérieur de laquelle la balise cible ne doit pas se trouver pour que la correspondance soit trouvée.

6

(Facultatif) Pour cibler encore plus la recherche, répétez l'étape 4.

Définition d'abréviations et d'acronymes

Le langage HTML fournit des balises qui permettent de définir les abréviations et les acronymes que vous employez sur votre page pour les moteurs de recherche, les correcteurs orthographiques, les programmes de traduction automatique ou

1

Sélectionnez l'abréviation ou l'acronyme dans le text de la page.

2

Choisissez Insertion > HTML > Objets texte > Acronyme.

3

Saisissez la forme développée de l'acronyme ou de l'abréviation.

4

Entrez la langue, comme en pour l'anglais, de pour l'allemand ou it pour l'italien.

DREAMWEAVER CS3


224

Définition des préférences de copie/collage

Vous pouvez configurer des préférences de collage spécial à utiliser par défaut avec la commande Edition > Coller lorsque vous collez du texte provenant d'autres applications. Par exemple, si vous souhaitez coller systématiquement le texte uniquement, ou le texte avec une mise en forme de base, définissez l'option par défaut dans la boîte de dialogue Préférences de copie/collage.

Remarque :

Pour coller du texte dans un document Dreamweaver, vous pouvez utiliser la commande Coller ou Collage spécial.

La commande Collage spécial permet de préciser le format du texte collé de différentes façons. Par exemple, lorsque vous souhaitez coller le texte d'un document Microsoft Word déjà formaté dans votre document Dreamweaver en ignorant sa mise en forme initiale afin d'appliquer votre propre feuille de style CSS, sélectionnez le texte dans Word, copiez-le dans le pressepapiers, puis utilisez la commande Collage spécial pour sélectionner l'option qui permet de ne coller que le texte.

Remarque :

Les préférences définies dans la boîte de dialogue Préférences de copie/collage ne s'appliquent qu'aux éléments collés dans la vue Création.

1


2

Cliquez sur la catégorie Copier/Coller.

3

Définissez les options suivantes, puis cliquez sur

T exte seul

Permet de coller du texte non formaté. Si le texte d'origine est mis en forme, cette dernière, y compris les sauts de ligne et de paragraphes, est supprimée.

T exte structuré

Permet de coller du texte en conservant sa structure, mais sans la mise en forme de base. Par exemple, vous pouvez coller un texte et conserver la structure des paragraphes, des listes et des tableaux, mais pas les mises en gras, italiques et autres mises en forme.

T exte structuré avec formatage de base

Permet de coller du texte structuré et du texte HTML avec une mise en forme simple (tel que des paragraphes et des tableaux, ainsi que du texte mis en forme avec les balises b

, i

, u

, strong

, em

, hr

, abbr ou acronym

).

T exte structuré avec formatage complet

styles CSS.

Permet de coller du texte conservant toute sa structure, mise en forme HTML et

Remarque :

L'option Mise en forme complète ne permet pas de conserver les styles CSS provenant d'une feuille de style externe, ni les styles provenant d'applications qui ne les conservent pas lors d'une copie dans le presse-papiers.

Conserver les sauts de ligne

avez sélectionné Texte seul.

Permet de conserver les sauts de ligne dans le texte collé. Cette option est désactivée si vous

N ettoyage des espaces inter-paragraphes de Word

Sélectionnez cette option lorsque vous avez sélectionné Texte structuré ou Mise en forme de base et souhaitez éliminer l'espace supplémentaire qui sépare les paragraphes lorsque vous collez votre texte.

Vérification et correction orthographiques

Dans le menu Texte, la commande Orthographe permet de vérifier l'orthographe du document actif. La commande

Orthographe ignore les balises HTML et les valeurs d'attributs.

Par défaut, le correcteur orthographique utilise le dictionnaire Anglais US. Pour changer de dictionnaire, choisissez Edition

> Préférences > Général (Windows) ou Dreamweaver > Préférences > Général (Macintosh), puis choisissez le dictionnaire que vous souhaitez utiliser dans le menu déroulant Dictionnaire du correcteur d'orthographe. Vous pouvez télécharger des dictionnaires dans d'autres langues sur le centre de support de Dreamweaver, à l'adresse suivante : www.adobe.com/go/dreamweaver_support_fr .

1

Choisissez Texte > Orthographe ou appuyez sur les touches Maj+F7.

Lorsque Dreamweaver ne reconnaît pas un mot, la boîte de dialogue Vérifier l'orthographe s'affiche.

2

Sélectionnez l'option correspondant au traitement que vous souhaitez appliquer à l'occurrence.

Ajouter

Ajoute le mot non reconnu à votre dictionnaire personnel.

Ignorer

Ignore cette occurrence du mot non reconnu.

DREAMWEAVER CS3


225

T out ignorer

Ignore toutes les occurrences du mot non reconnu.

Remplacer

Remplace cette occurrence du mot non reconnu par le texte que vous tapez dans la zone de texte Remplacer par, ou par le mot sélectionné dans la liste Suggestions.

T out remplacer

Remplace toutes les occurrences du mot non reconnu.

Importation de données tabulaires

Vous pouvez importer des données tabulaires dans un document en enregistrant d'abord ces fichiers (tels que des fichiers

Microsoft Excel ou d'une base de données) sous forme de fichiers texte délimités.

Vous pouvez importer et mettre en forme des données tabulaires, ainsi qu'importer du text à partir de documents HTML

Microsoft Word.

Vous pouvez également ajouter du texte provenant d'un document Microsoft Excel dans un document Dreamweaver en important le contenu du fichier Excel dans une page Web.

1

Choisissez Fichier > Importer > Importer les données tabulaires ou Insertion > Objets du tableau > Importer les données tabulaires.

2

Recherchez le fichier souhaité ou entrez son nom dans la zone de texte.

3

Sélectionnez le délimiteur utilisé lors de l'enregistrement du fichier en tant que texte délimité. Les options sont Tab,

Virgule, Point-virgule, Deux points et Autre.

Si vous sélectionnez Autre, un champ vierge s'affiche à côté de l'option. Entrez le caractère utilisé comme délimiteur.

4

Utilisez les options restantes pour formater ou définir le tableau dans lequel importer les données, puis cliquez sur OK.

Voir aussi

« Importer et exporter de données tabulaires » à la page 172

Importation de documents Microsoft

O

ffice (Windows uniquement)

Vous pouvez insérer le contenu d'un document Microsoft Word ou Excel dans une page Web nouvelle ou existante. Lorsque vous importez un document Word ou Excel, Dreamweaver reçoit le code HTML converti et l'insère dans votre page Web.

La taille du fichier, après réception du code HTML converti par Dreamweaver, doit être inférieure à 300 Ko.

Au lieu d'importer tout le contenu d'un fichier, vous pouvez également coller une partie du document Word et protéger sa mise en forme.

Remarque :

Si vous utilisez Microsoft Office 97, il n'est pas possible d'importer le contenu d'un document Word ou Excel. Vous devez insérer un lien vers le document.

1

Ouvrez la page Web dans laquelle vous souhaitez copier le document Word ou Excel.

2

En mode Création, procédez de l'une des manières suivantes pour sélectionner le fichier :

• Déplacez le fichier de son emplacement actuel vers la page où le contenu doit s'afficher.

• Choisissez Fichier > Importer > Document Word ou Fichier > Importer > Document Excel.

3

Dans la boîte de dialogue Insérer un document, recherchez le fichier à ajouter, sélectionnez une option de mise en forme dans le menu Mise en forme situé dans le bas de la boîte de dialogue, puis cliquez sur Ouvrir.

T exte seul

Permet d'insérer du texte non formaté. Si le texte d'origine est mis en forme, toute mise en forme est supprimée.

T exte structuré

Permet d'insérer du texte en conservant sa structure, mais sans la mise en forme de base. Par exemple, vous pouvez coller un texte et conserver la structure des paragraphes, des listes et des tableaux, mais pas les mises en gras, italiques et autres mises en forme.

DREAMWEAVER CS3


226

T exte structuré avec formatage de base

Permet d'insérer du texte structuré et du texte HTML avec une mise en forme simple (tel que des paragraphes et des tableaux, ainsi que du texte mis en forme avec les balises b

, i

, u

, strong

, em

, hr

, abbr ou acronym

tag).

T exte structuré avec formatage complet

styles CSS.

Permet d'insérer du texte conservant toute sa structure, mise en forme HTML et

N ettoyage des espaces inter-paragraphes de Word

Permet d'éliminer les espaces superflus entre les paragraphes lorsque vous collez le texte alors que l'option Texte structuré ou Mise en forme de base est sélectionnée.

Le contenu du document Word ou Excel s'affiche dans votre page.

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

Vous pouvez insérer un lien vers un document Microsoft Word ou Excel dans une page existante.

1

Ouvrez la page où le lien doit être affiché.

2

Faites glisser le fichier de son emplacement actuel vers la page Dreamweaver, en plaçant le lien à l'emplacement voulu.

3

Sélectionnez Créer un lien, puis cliquez sur OK.

4

Si le document vers lequel vous créez un lien réside hors du dossier racine de votre site, Dreamweaver vous invite à le copier dans ce dossier.

En copiant le document dans le dossier racine du site, vous êtes assuré que le document sera disponible lors de la publication du site Web.

5

Lorsque vous chargez votre page sur le serveur Web, vous devez également charger le fichier Word ou Excel.

Votre page contient désormais un lien vers le document Word ou Excel. Le texte du lien reprend le nom du fichier lié ; vous pouvez modifier ce texte.

Voir aussi

« Gestion des liens dans la carte du site » à la page 275

A propos de la mise en forme de texte (CSS et H

T

ML)

Les méthodes de mise en forme du texte dans Dreamweaver s'apparentent à celles d'un logiciel de traitement de texte standard. Vous pouvez définir le style de mise en forme par défaut (Paragraphe, En-tête 1, En-tête 2, etc.) pour un bloc de texte, modifier la police, la taille la couleur et l'alignement du texte sélectionné ou appliquer des styles de texte tels que gras, italique, code (texte à chasse fixe) et souligné.

Par défaut, Dreamweaver met le texte en forme à l'aide de feuilles de style en cascade (.CSS). Les styles CSS offrent aux concepteurs et développeurs Web un meilleur contrôle de l'aspect de la page Web tout en proposant des fonctions qui permettent d'améliorer l'accessibilité et de réduire la taille des fichiers. Les règles CSS sont intégrées au document au fur et

à mesure que vous mettez votre texte en forme ou que vous faites appel à des styles intégrés de Dreamweaver. Vous pouvez ainsi plus facilement réutiliser les styles existants et nommer ceux que vous créez. CSS est aujourd'hui la méthode la plus utilisée pour mettre en forme textes et pages Web.

Si vous le préférez, vous pouvez mettre en forme et aligner le texte de vos pages Web à l'aide de balises de marquage HTML.

Pour utiliser des balises HTML au lieu de styles CSS, vous devez modifier les préférences de mise en forme par défaut de

Dreamweaver.

CSS permet de modifier le style d'une page Web sans compromettre sa structure. En séparant les éléments de conception visuelle (polices, couleurs, marges, etc.) des éléments logiques internes à la structure d'une page Web, CSS offre aux concepteurs un contrôle à la fois visuel et typographique sans nuire à l'intégrité du contenu. De plus, définir une conception typographique et une mise en page depuis un bloc unique de code (sans avoir recours aux cartes graphiques, aux balises font

, aux tableaux et aux GIF d'espacement) permet un chargement plus rapide, simplifie la maintenance du site et fournit un point central à partir duquel il est possible de contrôler les attributs de conception sur plusieurs pages Web.

En revanche, les styles CSS définissent une mise en forme pour tout le texte appartenant à une classe particulière ou redéfinissent le format d'une balise HTML spécifique (par exemple h1

, h2

, p

ou li

).

DREAMWEAVER CS3


227

Vous pouvez stocker les styles créés avec CSS directement dans le document (par défaut lorsque vous formatez le texte avec l'inspecteur Propriétés) ou, pour plus de souplesse et de contrôle, stocker les styles dans une feuille de style externe. Si vous associez une feuille de style externe à plusieurs pages Web, toutes les pages s'adapteront automatiquement si vous effectuez une modification dans cette feuille de style. Pour accéder à toutes les règles CSS d'une page, utilisez le panneau Styles CSS

(Fenêtre > Styles CSS).

Remarque :

Vous pouvez combiner des mises en forme CSS et HTML 3.2 dans une même page. Le formatage est appliqué de façon hiérarchique : Le formatage HTML 3.2 supplante celui appliqué par des feuilles de style CSS externes et le formatage CSS intégré dans un document supplante les styles CSS externes.

Voir aussi




Utilisation de l'inspecteur Propriétés pour mettre en forme du texte

L'inspecteur Propriétés vous permet de mettre en forme le texte sélectionné. Il vous suffit de définir de nouvelles options pour modifier la mise en forme. Le style est immédiatement appliqué au texte.

Lorsque vous effectuez ces opérations, Dreamweaver conserve en mémoire les propriétés de formatage appliquées à chaque

élément de texte et attribue à chacun une étiquette en les nommant de la manière suivante : Style1, Style2, Style3, Style n . Si vous appliquez les mêmes attributs de formatage à plusieurs éléments de texte, Dreamweaver leur donne le même titre d'étiquette, éliminant ainsi toute redondance dans les noms de style. L'étiquette appliquée par Dreamweaver à un corps de texte donné peut alors être appliquée à l'aide du menu déroulant Style. Vous pouvez ainsi constituer une bibliothèque de styles à l'intérieur d'une page et appliquer ces styles en sélectionnant simplement l'élément de texte sur la page et un style dans le menu Style. Vous pouvez renommer les styles afin d'en faciliter l'identification, par exemple En-tête1, En-tête2,

Corps et Tableau.

Le menu Style de l'inspecteur Propriétés affiche les deux noms du style de votre page et propose un aperçu des propriétés du style. Les propriétés indiquées dans l'aperçu sont la famille, la taille et l'épaisseur de la police, ainsi que la couleur du texte et de l'arrière-plan.

Lorsque vous utilisez l'inspecteur Propriétés pour appliquer un style gras ou italique, Dreamweaver applique automatiquement la balise

<strong>

ou

<em>

, respectivement. Si vous concevez des pages pour des utilisateurs disposant de navigateurs de version 3.0 ou ultérieure, vous devez modifier cette préférence dans la catégorie Général de la boîte de dialogue Préférences (Edition > Préférences).

Vous trouverez un didacticiel consacré à la mise en forme de texte à l'aide de l'inspecteur Propriétés à l'adresse www.adobe.com/go/vid0147_fr .

Voir aussi



« Définition des préférences générales de Dreamweaver » à la page 34

DREAMWEAVER CS3


228

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

Vous pouvez utiliser l'inspecteur Propriétés de texte pour appliquer un formatage HTML ou CSS. Le formatage HTML vous permet de sélectionner les options de mise en forme du texte, telles que la police de caractères, la taille de la police et les styles gras et italique, tandis que le formatage CSS vous permet d'appliquer un style de classe existant au texte sélectionné.

Définition de mise en forme CSS dans l'inspecteur Propriétés

1

Ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés), si nécessaire.

2

Sélectionnez le texte que vous souhaitez mettre en forme.

3

Définissez les options CSS que vous voulez appliquer au texte sélectionné :

Format

Définit le style de paragraphe du texte sélectionné. Paragraphe applique un format par défaut pour une balise

<p>

,

En-tête 1 ajoute une balise

H1

, et ainsi de suite.

Style

Affiche le style de classe appliqué au texte sélectionné. Si aucun style n'est appliqué à la sélection, la mention Aucun styleCSS apparaît dans le menu déroulant. Si plusieurs styles sont appliqués à la sélection, le menu est vide.

Le menu Style permet d'effectuer les opérations suivantes :

•

Sélectionnez le style à appliquer à la sélection.

•

Choisissez Aucun pour ne plus appliquer le style sélectionné.

•

Sélectionner Attacher une feuille de style pour ouvrir une boîte de dialogue qui vous permet d'attacher une feuille de style externe.

Gras

Applique soit

<b>

soit

<strong>

au texte sélectionné en fonction de la préférence de style définie dans la catégorie

Général de la boîte de dialogue Préférences.

Italique

Applique soit

<i>

soit

<em>



Définition de mise en forme H

T

ML dans l'inspecteur Propriétés

1


2

Sélectionnez le texte que vous souhaitez mettre en forme.

3

Définissez les options que vous voulez appliquer au texte sélectionné :

Format

Définit le style de paragraphe du texte sélectionné. Paragraphe applique un format par défaut pour une balise

<p>

,

En-tête 1 ajoute une balise

H1

, et ainsi de suite.

Combinaison de polices

Applique au texte la combinaison de polices sélectionnée. Choisissez la combinaison de polices qui vous convient dans ce menu déroulant ou choisissez Modifier la liste des polices pour créer ou modifier une combinaison de polices.

T aille

Applique soit une taille de police spécifique (de 1 à 7), soit une taille de police relative (de +/- 1 à +/- 7) à la taille de

BASEFONT (dont la valeur par défaut est 3).

Couleur du texte

Affiche le texte dans la couleur sélectionnée. Sélectionnez une couleur sécurisée pour le Web en cliquant sur le sélecteur de couleur ou tapez directement une valeur hexadécimale (par exemple, #FF0000) dans le champ de texte adjacent.

Gras

Applique soit

<b>

soit

<strong>



Italique

Applique soit

<i>

soit

<em>



Aligner à gauche, Centrer et Aligner à droite

Appliquent ces alignements respectifs.

Lien

Crée une liste à puces à partir du texte sélectionné. Cliquez sur l'icône de dossier pour rechercher un fichier de votre site, faites glisser l'icône Pointer vers un fichier sur un fichier du panneau Fichiers ou faites glisser un fichier du panneau Fichiers sur la zone.

DREAMWEAVER CS3


229

Cible

Spécifie la fenêtre ou le cadre dans lequel sera chargé le document lié :

•

_blank

charge le document lié dans une nouvelle fenêtre, sans nom, du navigateur.

•

_parent

charge le document lié dans le jeu de cadres parent (ou dans la fenêtre parente) du cadre contenant le lien. Si le cadre contenant le lien n'est pas imbriqué, le document lié sera chargé dans la fenêtre de base du navigateur.

•

_self

charge le document lié dans le même cadre (ou la même fenêtre) que le lien. Il s'agit de la cible par défaut, de sorte qu'il est le plus souvent inutile de la spécifier.

•

_top

charge le document lié dans la fenêtre de base du navigateur, en supprimant tous les cadres.

Liste non ordonnée

à puces est ouverte.

Crée une liste à puces à partir du texte sélectionné. Si aucun texte n'est sélectionné, une nouvelle liste

Liste numérotée

Crée une liste numérotée à partir du texte sélectionné. Si aucun texte n'est sélectionné, une nouvelle liste numérotée est ouverte.

Elément de liste

Ouvre la boîte de dialogue Propriétés de la liste.

Retrait et retrait négatif

Augmente ou supprime la mise en retrait du texte sélectionné, en insérant ou supprimant la balise blockquote

. Au sein d'une liste, l'ajout d'un retrait crée une liste imbriquée et sa suppression ramène les éléments de la liste au niveau parent.

Mise en forme des paragraphes

Dreamweaver prend en charge l'ensemble des éléments de mise en forme de page et d'objet standard.

Utilisez le menu déroulant Format de l'inspecteur Propriétés ou le sous-menu Texte > Format de paragraphe pour appliquer des balises standard de paragraphe et d'en-tête.

1

Placez le point d'insertion dans le paragraphe, ou sélectionnez une partie du texte du paragraphe.

2

Sélectionnez Texte > Format de paragraphe ou le menu déroulant Format de l'inspecteur Propriétés, puis sélectionnez une option :

•

Choisissez un format de paragraphe (par exemple, En-tête 1, En-tête 2, Texte pré-formaté, etc.). La balise HTML associée au style choisi (par exemple, h1

pour En-tête 1, h2

pour En-tête 2, pre

pour Texte pré-formaté, etc.) est appliquée à tout le paragraphe.

•

Choisissez Aucun pour supprimer un format de paragraphe.

Lorsque vous appliquez une balise d'en-tête à un paragraphe, Dreamweaver insère automatiquement la ligne de texte suivante comme un paragraphe. Pour modifier ce paramètre, choisissez Edition > Préférences (Windows) ou Dreamweaver

> Préférences (Macintosh), puis assurez-vous que l'option Passer en paragraphe normal après le titre est désactivée dans les

Options d'édition de la catégorie Général.

Voir aussi

« Définition des propriétés de texte dans l'inspecteur Propriétés » à la page 228


Modification de la couleur du texte

Vous pouvez modifier la couleur par défaut de tout le texte d'une page, ou la couleur du texte sélectionné sur la page.

Voir aussi


Définition des couleurs par défaut du texte sur une page

❖

Choisissez Modifier > Propriétés de la page > Apparence ou Liens, puis choisissez la couleur pour les options Couleur du texte, Couleur du lien, Liens visités et Liens actifs.

DREAMWEAVER CS3


230

Remarque :

La couleur du lien actif est la couleur que prend un lien lorsque l'utilisateur clique dessus. Il est possible que certains navigateurs Web n'utilisent pas la couleur que vous avez spécifiée.

Modification de la couleur du texte sélectionné

❖

Sélectionnez le texte, puis procédez de l'une des façons suivantes :

• Choisissez une couleur en cliquant sur le sélecteur de couleur dans l'inspecteur Propriétés.

• Choisissez Texte > Couleur, sélectionnez une couleur dans le sélecteur système, puis cliquez sur OK.

• Entrez le nom de la couleur ou une valeur hexadécimale directement dans le champ de l'inspecteur Propriétés.

Rétablissement de la couleur par défaut du texte

1

Dans l'inspecteur Propriétés, cliquez sur la case de couleur du texte pour ouvrir la palette de couleurs sécurisées pour le Web.

2

Cliquez sur le bouton Barré (le carré blanc barré d'une ligne rouge, situé dans l'angle supérieur droit).

Alignement du texte

Vous pouvez aligner le texte sur la page en utilisant l'inspecteur Propriétés ou à partir du sous-menu Texte > Aligner. Vous pouvez centrer un élément sur la page à l'aide de la commande Texte > Aligner > Centre.

Alignement de text sur une page

1

Sélectionnez le texte à aligner ou insérez le pointeur au début du texte.

2

Cliquez sur l'une des options d'alignement (Gauche, Droite ou Centre) dans l'inspecteur Propriétés ou choisissez Texte

> Aligner, puis une commande d'alignement.

Centrage des éléments de page

1

Sélectionnez l'élément (image, plug-in, tableau ou tout autre élément de la page) que vous désirez aligner au centre.

2

Choisissez Texte > Aligner > Centre.

Remarque :

Vous pouvez aligner et centrer des blocs de texte complets ; par contre, vous ne pouvez pas aligner ou centrer une partie d'un en-tête ou d'un paragraphe.

Mise en retrait du texte

La commande Retrait applique la balise HTML blockquote

à un paragraphe de texte, ce qui a pour effet de mettre en retrait le texte de chaque côté de la page.

1

Placez le point d'insertion à l'emplacement où insérer le retrait.

2

Dans l'inspecteur Propriétés, cliquez sur le bouton Retrait ou Retrait négatif, choisissez Texte

Remarque :

Un paragraphe accepte plusieurs indentations. Chaque application de cette commande produit un retrait supplémentaire du texte de chaque côté du document.

Ajout d'espacements de paragraphe

Dreamweaver fonctionne comme une application classique de traitement de texte : Appuyez sur la touche Entrée

(Windows) ou Retour (Macintosh) pour commencer un nouveau paragraphe. Les navigateurs Web insèrent automatiquement une ligne vierge entre les paragraphes. Vous pouvez vous-même espacer les paragraphes d'une ligne vierge en insérant un saut de ligne.

Ajout d'un saut de paragraphe

❖


DREAMWEAVER CS3


231

Ajout d'un saut de ligne

❖


• Appuyez sur les touches Maj+Entrée (Windows) ou Maj+Retour (Macintosh).

• Choisissez Insertion > HTML > Caractères spéciaux > Saut de ligne.

• Dans la catégorie Texte de la barre Insertion, cliquez sur le bouton Caractères et cliquez sur l'icône Saut de ligne.

Utilisation de barres horizontales

Les barres (lignes) horizontales sont utiles pour organiser les informations. Sur une page, le texte et les objets peuvent être visuellement séparés par une ou plusieurs barres.

Création d'une barre horizontale

1

Dans la fenêtre de document, placez le curseur là où vous voulez insérer une barre horizontale.

2

Choisissez Insertion > HTML > Barre horizontale.

Modification d'une barre horizontale

1

Dans la fenêtre de document, sélectionnez la barre horizontale.

2

Choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur Propriétés et modifier les propriétés selon vos besoins :

L et H

Spécifient la largeur et la hauteur de la barre, en pixels ou en pourcentage de la taille de la page.

Alignement

Spécifie l'alignement de la barre (Par défaut, Gauche, Centre ou Droite). Ce paramétrage ne s'applique que si la largeur de la barre est inférieure à celle de la fenêtre du navigateur.

O mbrage

Spécifie si la barre est accompagnée d'un effet d'ombre portée. Désactivez cette option pour dessiner la barre en couleur pleine.

Application de styles de police

Vous pouvez appliquer un formatage de texte à une seule lettre, à des paragraphes entiers du site ou encore à des blocs de texte. Utilisez l'inspecteur Propriétés ou le menu Texte pour définir ou modifier les caractéristiques de la police du texte sélectionné. Vous pouvez définir le type, le style (par exemple, gras ou italique) et la taille d'une police de caractères.

1

Sélectionnez le texte. Si aucun texte n'est sélectionné, l'option s'appliquera au texte que vous taperez ensuite.

2

Faites votre choix parmi les options suivantes :

•

Pour changer de police de caractères, choisissez une combinaison de polices dans l'inspecteur Propriétés ou dans Texte

> Police. Choisissez Par défaut pour supprimer les polices préalablement appliquées. Cette option applique la police par défaut au texte sélectionné (en l'occurrence, la police par défaut du navigateur ou la police affectée à cette balise dans une feuille de style CSS).

•

Pour changer de style de police, cliquez sur Gras ou Italique dans l'inspecteur Propriétés ou choisissez un style de police

(Gras, Italique, Souligné, etc.) dans le sous-menu Texte > Style.

Remarque :

Lorsque vous utilisez l'inspecteur Propriétés pour appliquer un style gras ou italique, Dreamweaver applique la balise

<strong>

ou

<em>

, respectivement. Si vous concevez des pages pour des utilisateurs disposant de navigateurs de version 3.0 ou ultérieure, vous devez modifier cette préférence dans la catégorie Général de la boîte de dialogue Préférences

(Edition > Préférences).

•

Pour changer la taille de la police de caractères, choisissez une taille (de 1 à 7) dans l'inspecteur Propriétés ou dans Texte

> Taille.

En langage HTML, les tailles de polices sont exprimées en valeurs relatives, et non spécifiques, de points. L'utilisateur définit la taille, en points, de la police par défaut de son navigateur ; c'est cette taille de police qui est utilisée si vous choisissez Par défaut ou 3 dans l'inspecteur Propriétés ou via le sous-menu Texte > Taille. Les tailles 1 et 2 sont plus petites que la taille par défaut; les tailles 4 à 7 sont plus grandes. De plus, les polices semblent généralement plus grandes sous

Windows que sous Mac OS, bien qu'Internet Explorer 5 pour Macintosh utilise la même taille de police par défaut que

Windows.

DREAMWEAVER CS3


232

Afin que la taille de la police reste homogène, vous pouvez utiliser des feuilles de style CSS pour définir la taille en pixels.

•

Pour augmenter ou diminuer la taille de la police du texte sélectionné, choisissez une taille relative (de + ou -1 à +4 ou -

3) dans l'inspecteur Propriétés ou via Texte > Modification des dimensions.

Remarque :

Ces valeurs indiquent une différence relative par rapport à la taille définie par basefont. La valeur par défaut de basefont est 3. Ainsi, une valeur de +4 donne une taille de police de 3 + 4, soit 7. 7 est la somme maximale des valeurs de taille de police. Si vous essayez de définir des valeurs plus élevées, elles s'affichent en tant que 7. Dreamweaver n'affiche pas la balise

basefont

(qui se trouve dans la section

head

), mais la taille de police doit s'afficher correctement dans un navigateur. Pour tester ceci, comparez un texte défini sur 3 et un texte défini sur +3.

Voir aussi

« Création de pages avec CSS » à la page 117


Changement de nom d'un style

Lors de la mise en forme de texte, Dreamweaver conserve en mémoire les styles créés sur chaque page et constitue une bibliothèque de styles pouvant être réutilisés. Ceci facilite l'application d'un même style à plusieurs blocs de texte. La présentation de vos pages est ainsi plus cohérente.

1

Choisissez Renommer dans le menu déroulant Style de l'inspecteur Propriétés du texte.

2

Sélectionnez le style à renommer dans le menu contextuel Renommer un style.

3

Entrez un nouveau nom dans la zone Nouveau nom, puis cliquez sur OK.

Modification des combinaisons de polices

Pour définir la combinaison de polices qui apparaît dans l'inspecteur Propriétés et dans Texte > Police, utilisez la commande

Modifier la liste des polices.

Les combinaisons de polices de caractères déterminent la façon dont le texte des pages Web est affiché par les navigateurs.

Ces derniers utilisent, au sein de la combinaison de polices choisie, la première police installée sur l'ordinateur de l'utilisateur. Si aucune des polices de cette combinaison n'est installée, le navigateur affiche le texte avec la police par défaut indiquée dans ses préférences.

Modification des combinaisons de polices

1

Choisissez Texte > Police > Modifier la liste des polices.

2

Choisissez la combinaison de polices dans la liste qui apparaît en haut de la boîte de dialogue.

Les polices de la combinaison sélectionnée apparaissent dans la liste Polices choisies, dans le coin inférieur gauche de la boîte de dialogue. Une liste de toutes les polices disponibles installées sur votre système se trouve à sa droite.

3


•

Pour ajouter ou retirer des polices d'une combinaison, cliquez selon le cas sur l'un des boutons << ou >> qui se trouvent entre les listes Polices choisies et Polices disponibles.

•

Pour ajouter ou supprimer une combinaison de polices, cliquez selon le cas sur l'un des boutons plus (+) ou moins (-) qui se trouvent dans la partie supérieure de la boîte de dialogue.

•

Pour ajouter une police qui n'est pas installée sur votre ordinateur, tapez son nom dans le champ de texte en dessous de la liste Polices disponibles, et cliquez sur le bouton<< pour ajouter cette police à la combinaison courante. Il peut être utile d'ajouter une police qui n'est pas installée sur votre système, par exemple pour indiquer une police spécifique à

Windows lorsque vous travaillez sur un Macintosh.

•

Pour déplacer la combinaison de polices au sein de la liste, cliquez sur les boutons fléchés en haut de la boîte de dialogue.

DREAMWEAVER CS3


233

Ajout d'une nouvelle combinaison à la liste des polices

1

Choisissez Texte > Police > Modifier la liste des polices.

2

Sélectionnez une police dans la liste Polices disponibles, et cliquez sur le bouton << pour l'insérer dans la liste Polices choisies.

3

Répétez l'étape 2 pour chaque police nécessaire dans la combinaison.

Pour ajouter une police qui n'est pas installée sur votre ordinateur, tapez son nom dans le champ de texte en dessous de la liste Polices disponibles, et cliquez sur le bouton<< pour ajouter cette police à la combinaison courante. Il peut être utile d'ajouter une police qui n'est pas installée sur votre système, par exemple pour indiquer une police spécifique à Windows lorsque vous travaillez sur un Macintosh.

4

Lorsque vous avez fini de choisir des polices, sélectionnez une famille de polices générique dans la liste Polices disponibles et cliquez sur le bouton << pour l'insérer dans la liste Polices choisies.

Les familles génériques de polices sont les suivantes : cursive, fantaisie, monospace (espacement non proportionnel), sansserif (espacement proportionnel sans empattement) et serif (espacement proportionnel avec empattement). Si aucune des polices de la liste Polices disponibles n'est disponible sur l'ordinateur de l'utilisateur, le texte apparaît dans la police par défaut associée à la famille de polices générique. Par exemple, avec la plupart des systèmes d'exploitation, la police non proportionnelle (monospace) par défaut est Courier.

Insertion de dates

Dreamweaver comporte un objet Date pratique qui insère la date actuelle dans le format de votre choix (avec ou sans heure), ainsi qu'une option pour mettre à jour cette date lorsque vous enregistrez le fichier.

Remarque :

Les dates et heures affichées dans la boîte de dialogue Insérer date ne représentent pas la date actuelle ni ne reflètent les dates/heures visualisées par un visiteur lorsqu'il affiche votre site. Elles ne sont qu'un exemple de la manière dont vous souhaitez afficher ces informations.

1

Dans la fenêtre de document, placez le curseur là où vous désirez insérer la date.

2


•

Choisissez Insertion > Date.

•

Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Date.

3

Dans la boîte de dialogue qui apparaît alors, sélectionnez un format d'affichage pour le jour de la semaine, pour la date et pour l'heure.

4

Si vous désirez que cette date soit actualisée à chaque nouvel enregistrement du document, activez l'option Mettre à jour automatiquement lors de l'enregistrement. Si vous préférez que la date soit insérée comme du texte normal et ne soit jamais actualisée, désactivez cette option.

5

Cliquez sur OK pour insérer la date.

Si vous avez sélectionné Mettre à jour automatiquement lors de l'enregistrement, vous pouvez modifier le format de la date après l'avoir insérée dans le document, en cliquant sur le texte mis en forme et en sélectionnant Modifier le format de date dans l'inspecteur Propriétés.

Ajout et modification d'images

A propos des images

Différents types de formats de fichiers graphiques existent, mais trois formats de fichiers graphiques sont généralement utilisés dans les pages Web : GIF, JPEG et PNG. Les formats de fichier GIF et JPEG sont les plus répandus ; ils peuvent être affichés dans la plupart des navigateurs.

DREAMWEAVER CS3


234

Les fichiers PNG sont les plus adaptés pour la plupart des types de graphiques Web en raison de leur souplesse et de leur taille réduite ; toutefois, l'affichage d'images PNG n'est que partiellement pris en charge dans Microsoft Internet Explorer

(4.0 et versions ultérieures) et dans Netscape Navigator (4.04 et versions ultérieures). A moins que votre site ne soit spécifiquement destiné à des navigateurs prenant en charge le format PNG, utilisez des fichiers GIF ou JPEG afin de cibler un plus large public.

GIF (Graphic Interchange Format)

Les fichiers GIF utilisent un maximum de 256 couleurs et sont destinés à l'affichage d'images à tons non continus ou d'images comportant de larges zones de couleurs unies, telles que les barres de navigation, les boutons, les icônes, les logos ou d'autres images contenant des tons et des couleurs uniformes.

JPEG (Joint Photographic Experts Group)

Le format de fichier JPEG est le format supérieur destiné aux photographies ou aux images à tons continus, car de tels fichiers peuvent contenir des millions de couleurs. Lorsque la qualité d'un fichier

JPEG augmente, sa taille et son temps de téléchargement augmentent également. Il est souvent possible d'obtenir un bon compromis entre la qualité de l'image et sa taille de fichier en compressant un fichier JPEG.

Le format de fichier P

N

G (Portable

N etwork Group)

Le format de fichier PNG est un format de remplacement non breveté pour les fichiers GIF, qui inclut la prise en charge des images à couleurs indexées, en niveaux de gris et en couleurs vraies ainsi que la prise en charge du canal alpha pour la transparence. PNG est le format de fichier natif de Adobe® Fireworks®.

Les fichiers PNG conservent toutes les informations d'origine sur les calques, les vecteurs, les couleurs et les effets (comme par exemple des ombres portées) et tous ces éléments peuvent être modifiés à tout moment. Les fichiers doivent avoir l'extension .png pour être reconnus comme fichiers PNG par Dreamweaver.

Insertion d'une image

Lorsque vous insérez une image dans un document Dreamweaver, le programme crée une référence à ce fichier d'image dans le code source HTML. Pour que cette référence soit correcte, le fichier d'image doit résider sur le site. Dans le cas contraire, Dreamweaver vous invite à copier le fichier sur le site.

Vous pouvez également insérer des images de façon dynamique. Les images dynamiques sont des images qui changent souvent ; par exemple, les systèmes de rotation de bannières publicitaires qui sélectionnent les bannières de manière aléatoire, puis affichent l'image de la bannière sélectionnée lors de l'affichage d'une page.

Après avoir inséré une image, vous pouvez définir les options d'accessibilité aux balises d'image qui pourront être lues par les lecteurs d'écran destinés aux utilisateurs malvoyants. Ces attributs peuvent être modifiés dans le code HTML.

Vous trouverez un didacticiel consacré à l'insertion d'images à l'adresse www.adobe.com/go/vid0148_fr .

1

Placez le point d'insertion à l'endroit où doit apparaître l'image dans la fenêtre de document, puis procédez de l'une des manières suivantes :

•

Dans la catégorie Commun de la barre Insertion, cliquez sur l'icône Images .

•

Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Images et sélectionnez l'icône Image. Lorsque l'icône Image est affichée dans la barre Insertion, vous pouvez la faire glisser vers la fenêtre du document (ou la fenêtre du mode Code si vous travaillez sur le code).

•


•

Faites glisser une image à partir du panneau Actifs (Fenêtre > Actifs) vers l'emplacement souhaité dans la fenêtre de document, puis passez à l'étape 3.

•

Faites glisser une image à partir du panneau Fichiers vers l'emplacement souhaité dans la fenêtre de document, puis passez à l'étape 3.

•

Faites glisser une image à partir du bureau vers l'emplacement désiré sur la page, puis passez à l'étape 3.

2

Dans la boîte de dialogue qui s'affiche, procédez de l'une des manières suivantes :

•

Sélectionnez Système de fichiers pour choisir un fichier d'image.

•

Sélectionnez Source de données pour choisir une source d'images dynamiques.

•

Cliquez sur le bouton Sites et serveurs pour choisir un fichier d'image dans un dossier distant de l'un de vos sites

Dreamweaver.

3

Parcourez l'arborescence pour sélectionner l'image ou la source de contenu à insérer.

DREAMWEAVER CS3


235

Tant que le document sur lequel vous travaillez n'a pas encore été enregistré, Dreamweaver crée automatiquement une référence d'emplacement de fichier de type file://. Lorsque vous enregistrez le document sur le site, Dreamweaver convertit cette référence en indiquant un chemin relatif au document.

Remarque :

Lors de l'insertion d'images, vous pouvez également utiliser un chemin absolu vers une image qui réside sur un serveur distant (c'est-à-dire une image qui n'est pas disponible sur le disque dur local). Toutefois, si vous constatez des problèmes de performances lorsque vous travaillez, vous pouvez décider de désactiver l'affichage de l'image en mode Création en désélectionnant l'option Commandes > Afficher les fichiers externes.

4

Cliquez sur OK. La boîte de dialogue Attributs d'accessibilité aux balises d'image s'affiche si elle a été activée dans les préférences (Edition > Préférences).

5

Tapez des valeurs dans les zones Texte secondaire et Description longue, puis cliquez sur OK.

•

Dans la zone Texte secondaire, entrez un nom ou une brève description de l'image. Le lecteur d'écran lit les informations texte Description longue, un lien vers un fichier donnant davantage d'informations à propos de l'image.

•

Dans la zone de texte Description longue, saisissez l'emplacement du fichier à afficher lorsque l'utilisateur clique sur l'image ou cliquez sur l'icône du dossier pour naviguer jusqu'à un fichier. Cette zone de texte fournit un lien vers un fichier qui concerne ou donne davantage d'informations sur l'image.

Remarque :

Vous pouvez entrer les informations dans une seule zone de texte ou les deux, selon vos besoins. Le lecteur d'écran lit l'attribut Alt de l'image.

Remarque :

Si vous cliquez sur Annuler, l'image s'affiche dans le document, mais Dreamweaver ne lui associe ni balises ni attributs d'accessibilité.

6

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), définissez les propriétés de l'image.

Voir aussi

« Création d'images dynamiques » à la page 538

« Cartes graphiques » à la page 280

« Optimisation de l'espace de travail pour la conception de pages accessibles » à la page 677

« Définition des propriétés de page » à la page 208

Définition des propriétés de l'image

L'inspecteur Propriétés Images vous permet de définir les propriétés d'une image. Pour voir toutes les propriétés illustrées, cliquez sur la flèche d'agrandissement, dans le coin inférieur droit de l'inspecteur Propriétés.

1

Choisissez la commande Fenêtre > Propriétés pour afficher l'inspecteur Propriétés pour une image sélectionnée.

2

Dans la zone de texte située au-dessous de l'image miniature, définissez un nom d'image auquel vous pouvez faire référence lors de l'utilisation d'un comportement Dreamweaver (tel que Permuter une image) ou lors de l'utilisation d'un langage de script tel que JavaScript ou VBScript.

3

Définissez les options de l'image.

L et H

La largeur et la hauteur de l'image, en pixels. Dreamweaver met automatiquement à jour ces zones de texte avec les dimensions d'origine de l'image lorsque vous insérez une image dans une page.

Si vous définissez pour L (largeur) et H (hauteur) des valeurs qui ne correspondent pas aux dimensions réelles de l'image, celle-ci risque de ne pas s'afficher correctement dans un navigateur (Pour revenir aux valeurs d'origine, cliquez sur les

DREAMWEAVER CS3


236

étiquettes de zone de texte L et H ou sur le bouton Rétablir la taille originale de l'image qui apparaît à droite des zones de texte L et H une fois que vous avez tapé de nouvelles valeurs.

Remarque :

Vous pouvez modifier ces valeurs pour modifier l'échelle d'affichage de cette instance de l'image, mais cette technique ne diminuera pas le temps de chargement, puisque le navigateur chargera la totalité de l'image à son échelle normale avant de la réduire. Pour réduire le temps de téléchargement et être sûr que toutes les instances de l'image sont affichées aux mêmes dimensions, utilisez une application de retouche d'image pour adapter les proportions de l'image.

Src

Spécifie le fichier source de l'image. Tapez le chemin d'accès ou cliquez sur l'icône du dossier pour trouver le fichier source et le sélectionner.

Lien

Spécifie un lien hypertexte pour l'image. Faites glisser l'icône Pointer vers un fichier dans le panneau Fichiers, cliquez sur l'icône de dossier pour rechercher et sélectionner un document de votre site ou tapez directement l'URL.

Alignement

Aligne l'image et le texte sur la même ligne.

Sec

Spécifie le texte secondaire qui apparaîtra à la place de l'image dans les navigateurs de type texte seulement, ou dans les navigateurs dont l'utilisateur a désactivé le téléchargement automatique des images. Pour les utilisateurs malvoyants qui utilisent un synthétiseur vocal avec un navigateur en mode texte, le texte est lu. Dans certains navigateurs, ce texte apparaît

également lorsque le pointeur se trouve sur l'image.

N om de la carte et outils Zone réactive

Permettent de nommer et de créer une carte graphique côté client

Espace V. et Espace H.

Ajoutent un espace, en pixels, le long des côtés de l'image. Espace V ajoute un espace le long des bords supérieur et inférieur d'une image. Espace H ajoute un espace le long des bords gauche et droit d'une image.

Cible

Spécifie la fenêtre ou le cadre dans lequel la page liée devrait être chargée. Cette option n'est pas disponible lorsque l'image n'est pas liée à un autre fichier. Les noms de tous les cadres dans le jeu de cadres actuel s'affichent dans la liste Cible.

•

_blank

charge le fichier lié dans une nouvelle fenêtre, sans nom, du navigateur.

•

_parent

charge le fichier lié dans le jeu de cadres parent, ou dans la fenêtre parente du cadre contenant le lien. Si le cadre contenant le lien n'est pas imbriqué, le document lié sera chargé dans la fenêtre de base du navigateur.

•

_self

charge le fichier lié dans le même cadre, ou dans la même fenêtre, que le lien. Cette cible étant celle par défaut, vous n'avez généralement pas à la spécifier.

•

_top

charge le fichier lié dans la fenêtre de base du navigateur, supprimant ainsi tous les cadres.

Src faible

Spécifie l'image qui doit être chargée avant l'image principale. Un grand nombre de concepteurs utilisent une version 2 bpc (noir et blanc) de l'image principale car son chargement est rapide et permet aux visiteurs d'avoir une idée de l'affichage.

Bordure

Correspond à la largeur, en pixels, de la bordure de l'image. La valeur par défaut est Pas de bordure.

Modifier

Lance l'éditeur d'image que vous avez indiqué dans les préférences d'éditeurs externes et ouvre l'image sélectionnée.

O ptimisation

Recadrer

Ouvre la boîte de dialogue d'optimisation.

Permet de rogner une image en supprimant les zones indésirables de l'image sélectionnée.

Rééchantillonner

taille et forme.

Permet de rééchantillonner une image redimensionnée et d'en améliorer la qualité dans ses nouvelles

Luminosité et contraste

Accentuer

Ajuste la luminosité et le contraste d'une image

Permet d'ajuster la netteté d'une image.

Rétablir la taille

Ramène les valeurs L et H à la taille originale de l'image. Ce bouton apparaît à droite des zones de texte

L et H lorsque vous ajustez les valeurs de l'image sélectionnée.

Modification des attributs d'accessibilité d'une image dans le code

Si vous avez inséré des attributs d'accessibilité pour une image, vous pouvez modifier ces valeurs dans le code HTML.

1

Sélectionnez l'image dans la fenêtre de document.

DREAMWEAVER CS3


237

2


•

Modifiez les attributs de l'image en mode Code.

•

Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez

Modifier la balise.

•

Modifiez la valeur Alt dans l'inspecteur Propriétés.

Modification d'images dans Dreamweaver

Dreamweaver comprend des fonctions basiques de retouche d'image, ce qui vous évite de devoir lancer une application externe pour effectuer cette tâche (par exemple, Fireworks). Les outils de retouche d'image de Dreamweaver sont conçus pour un travail simplifié avec les concepteurs de contenu responsables de la création des fichiers d'image utilisés sur votre site Web.

Remarque :

Vous n'avez pas besoin d'avoir installé Fireworks sur votre ordinateur pour utiliser les fonctions de retouche d'image de Dreamweaver.

❖

Choisissez Modifier > Image. Définissez l'une des fonctions de retouche d'image Dreamweaver suivantes :

Rééchantillonner

Ajoute ou enlève des pixels d'images JPEG ou GIF redimensionnées afin qu'elles correspondent le mieux possible à l'aspect des images originales. Le rééchantillonnage d'une image réduit la taille de son fichier, ce qui permet d'en accélérer le téléchargement.

Lorsque vous redimensionnez une image dans Dreamweaver, vous pouvez la rééchantillonner afin de l'adapter à ses nouvelles dimensions. Lorsqu'un objet bitmap est rééchantillonné, des pixels sont ajoutés à l'image ou en sont enlevés afin de l'agrandir ou de la réduire. En général, le rééchantillonnage d'une image à une résolution supérieure provoque une faible perte de qualité. Le rééchantillonnage à une résolution inférieure, en revanche, provoque toujours une perte de données et donne une moins bonne qualité.

Recadrer

Permet de réduire la surface des images. En général, il est utile pour mettre en évidence le sujet de l'image et supprimer les aspects indésirables qui entourent le centre d'intérêt de l'image.

Luminosité et contraste

Modifie la luminosité et le contraste des pixels qui composent l'image. Ceci affecte les surbrillances, les ombres et les demi-tons d'une image. Cette fonction est utilisée pour corriger les images trop sombres ou trop claires.

Accentuer

Ajuste la mise au point d'une image en augmentant le contraste des bords sur l'image. Lorsque vous scannez une image ou que vous prenez une photo numérique, la plupart des logiciels de capture d'images estompent par défaut les bords des objets photographiés. Cela empêche les détails extrêmement précis de se perdre dans les pixels dont sont constituées les images numériques. Cependant, il est souvent nécessaire d'accentuer l'image pour faire ressortir les détails dans les fichiers d'image numérique, ce qui augmente le contraste des bords et rend l'image encore plus nette.

Remarque :

Les fonctions de retouche d'image de Dreamweaver s'appliquent uniquement aux formats de fichiers d'image

JPEG et GIF. Les autres formats de fichiers d'image bitmap ne peuvent pas être modifiés à l'aide de ces fonctions.

Insertion d'un espace réservé pour l'image

Un espace réservé pour une image est un graphique que vous utilisez jusqu'à ce que le dessin final soit prêt pour être ajouté

à une page Web. Vous pouvez définir la taille et la couleur de l'espace réservé et lui donner une étiquette de texte.

1

Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous voulez insérer un espace réservé pour un graphique.

2

Choisissez Insertion > Objets image > Espace réservé pour l'image.

3

Dans la zone de texte Nom (facultatif), tapez le texte que vous souhaitez voir apparaître comme étiquette de l'espace réservé pour l'image. Laissez la zone de texte vide si vous ne voulez pas faire apparaître d'étiquette. Le nom doit commencer par une lettre et ne peut contenir que des lettres ou des chiffres : les espaces et les caractères ASCII étendu ne sont pas autorisés.

4

(Obligatoire) Dans les zones de texte Largeur et Hauteur, saisissez un nombre pour définir la taille de l'image en pixels.

DREAMWEAVER CS3


238

5

(Facultatif) Pour Couleur, procédez de l'une des manières suivantes pour appliquer une couleur :

•

Utilisez le sélecteur de couleur pour sélectionner une couleur.

•

Entrez la valeur hexadécimale de la couleur (par exemple #FF0000).

•

Entrez le nom d'une couleur sécurisée pour le Web (par exemple rouge).

6

(Facultatif) Dans Texte secondaire, entrez une description de l'image pour les personnes utilisant un navigateur en mode texte.

Remarque :

Une balise image est insérée automatiquement dans le code HTML, avec un attribut

src

vide.

7

Cliquez sur OK.

Les attributs de couleur et de taille ainsi que l'étiquette de l'espace réservé s'affichent comme suit :

Lorsqu'ils sont visualisés dans un navigateur, le texte de l'étiquette et celui de la taille ne s'affichent pas.

Voir aussi

« Redimensionnement visuel d'une image » à la page 240

« Utilisation de Fireworks pour modifier les espaces réservés pour les images Dreamweaver » à la page 353

Définition des propriétés de l'espace réservé pour l'image

Pour définir les propriétés d'un espace réservé pour l'image, sélectionnez l'espace réservé dans la fenêtre de document, puis choisissez la commande Fenêtre > Propriétés pour afficher l'inspecteur Propriétés. Cliquez sur la flèche d'agrandissement dans l'angle inférieur droit pour afficher toutes les propriétés.

Utilisez l'inspecteur Propriétés pour définir un nom, une largeur, une hauteur, une source d'image, une autre description de texte, un alignement ou une couleur pour l'espace réservé pour l'image.

Dans l'inspecteur Propriétés de l'espace réservé, la zone de texte grise et la zone de texte Aligner sont désactivées. Vous pouvez définir ces propriétés dans l'inspecteur Propriétés de l'image lorsque vous remplacez l'espace réservé par une image.

❖

L et H

Définissent la largeur et la hauteur de l'espace réservé pour l'image, en pixels.

Src

Spécifie le fichier source de l'image. Pour un espace réservé pour une image, cette zone de texte est vide. Cliquez sur le bouton Parcourir pour sélectionner une image à utiliser en remplacement du graphique de l'espace réservé.

Lien

Spécifie un lien hypertexte pour l'espace réservé de l'image. Faites glisser l'icône Pointer vers un fichier dans le panneau Fichiers, cliquez sur l'icône de dossier pour rechercher et sélectionner un document de votre site ou tapez directement l'URL.

Sec

Spécifie le texte secondaire qui apparaîtra à la place de l'image dans les navigateurs de type texte seulement, ou dans les navigateurs dont l'utilisateur a désactivé le téléchargement automatique des images. Pour les utilisateurs malvoyants qui utilisent un synthétiseur vocal avec un navigateur en mode texte, le texte est lu. Dans certains navigateurs, ce texte apparaît

également lorsque le pointeur se trouve sur l'image.

DREAMWEAVER CS3


239

Créer

Permet de lancer Fireworks pour créer une image de remplacement. Le bouton Créer est désactivé sauf si Fireworks est également installé sur votre ordinateur.


Ramène les valeurs L et H à la taille originale de l'image.

Couleur

Spécifie une couleur pour l'espace réservé de l'image.

Voir aussi


Remplacement d'un espace réservé pour une image

Un espace réservé pour l'image n'affiche pas d'image dans un navigateur. Avant de publier votre site, il convient de remplacer tous les espaces réservés pour une image que vous avez ajoutés par des fichiers d'image adaptés au Web, tels que des images GIF ou JPEG.

Si vous possédez Fireworks, vous pouvez créer un nouveau graphique à partir d'un espace réservé pour image dans

Dreamweaver. La nouvelle image reprend la même taille que celle de l'espace réservé pour l'image. Vous pouvez modifier l'image, puis la remplacer dans Dreamweaver.

1

Dans la fenêtre Document, procédez de l'une des manières suivantes :

•

Double-cliquez sur l'espace réservé pour l'image.

•

Cliquez sur l'espace réservé pour l'image pour le sélectionner, puis dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur l'icône du dossier à côté de la zone de texte Src.

2

Dans la boîte de dialogue Source de l'image, localisez l'image que vous voulez utiliser pour remplacer l'espace réservé, puis cliquez sur OK.

Voir aussi


Alignement d'une image

Vous pouvez aligner une image sur du texte, sur une autre image, sur un plug-in ou sur d'autres éléments de la ligne. Vous pouvez également définir l'alignement horizontal d'une image.

1

Sélectionnez l'image dans le mode Création.

2

Définissez les attributs d'alignement de l'image dans l'inspecteur Propriétés, à l'aide du menu Alignement.

Vous pouvez définir l'alignement selon d'autres éléments situés dans le même paragraphe ou la même ligne.

Remarque :

Le langage HTML ne permet pas de placer un texte autour des contours d'une image, contrairement à certaines applications de traitement de texte.

Les options d'alignement sont les suivantes :

Par défaut

Provoque un alignement sur la ligne de base. La valeur par défaut varie selon le navigateur du visiteur du site.

Ligne de base et Bas

sélectionné.

Alignent la ligne de base du texte (ou de tout autre élément du même paragraphe) sur le bas de l'objet

Haut

Aligne le haut d'une image sur le haut de l'élément le plus élevé (image ou texte) dans la ligne.

Milieu

Aligne le milieu de l'image avec la ligne de base de la ligne.

Haut du texte

Aligne le haut de l'image avec le haut du plus grand caractère de la ligne de texte.

Milieu absolu

Aligne le milieu de l'image avec le milieu du texte dans la ligne actuelle.

Bas absolu

Aligne le bas de l'image avec le bas de la ligne de texte (y compris les jambages inférieurs comme dans la lettre g ).

DREAMWEAVER CS3


240

Gauche

Aligne l'image sélectionnée sur la marge de gauche et place le texte qui l'entoure à sa droite. Si le texte aligné à gauche précède l'objet sur la ligne, les objets alignés à gauche sont généralement placés automatiquement sur une nouvelle ligne.

Droite

Aligne l'image sur la marge de droite et place le texte qui l'entoure à sa gauche. Si le texte aligné à droite précède l'objet sur la ligne, les objets alignés à droite sont généralement placés automatiquement sur une nouvelle ligne.

Redimensionnement visuel d'une image

Dans Dreamweaver, vous pouvez redimensionner visuellement certains éléments comme des images, des plug-ins, des fichiers Shockwave ou Flash, des applets et des contrôles ActiveX.

Le redimensionnement visuel d'une image permet de mieux voir comment l'image affecte la mise en forme en différentes dimensions. Il n'adapte pas les dimensions de l'image aux proportions que vous avez spécifiées. Si vous redimensionnez visuellement une image dans Dreamweaver, mais que vous n'utilisez pas d'application de retouche d'image (comme

Fireworks) pour en adapter les proportions aux dimensions désirées, le navigateur de l'utilisateur devra le faire lorsque la page sera chargée. Cela risque d'entraîner l'allongement du temps de téléchargement de la page et l'affichage incorrect de l'image dans le navigateur. Pour réduire le temps de téléchargement et être sûr que toutes les instances de l'image sont affichées aux mêmes dimensions, utilisez une application de retouche d'image pour adapter les proportions de l'image.

Lorsque vous redimensionnez une image dans Dreamweaver, vous pouvez la rééchantillonner afin de l'adapter à ses nouvelles dimensions. Le rééchantillonnage ajoute ou enlève des pixels d'images JPEG ou GIF redimensionnées afin qu'elles correspondent le mieux possible à l'aspect des images originales. Le rééchantillonnage d'une image réduit la taille de son fichier, ce qui permet d'en accélérer le téléchargement.

Voir aussi

« Modification d'images dans Dreamweaver » à la page 237

Redimensionnement visuel d'un élément

1

Sélectionnez l'élément (par exemple, une image ou un fichier SWF) dans la fenêtre de document.

Des poignées de redimensionnement apparaissent à droite et en bas de l'élément, et dans le coin inférieur droit. Si ces poignées n'apparaissent pas, cliquez à l'extérieur de l'élément à redimensionner, puis sélectionnez-le à nouveau ou cliquez sur la balise correspondante dans le sélecteur de balises.

2

Pour redimensionner l'élément, utilisez l'une des méthodes suivantes :

•

Pour ajuster la largeur de l'élément, déplacez la poignée à droite de la sélection.

•

Pour ajuster la hauteur de l'élément, déplacez la poignée au bas de la sélection.

•

Pour ajuster simultanément la largeur et la hauteur de l'élément, faites glisser la poignée de l'angle de la sélection.

•

Pour conserver les proportions de l'élément (rapport largeur/hauteur) lorsque vous modifiez ses dimensions, faites glisser la poignée de l'angle de la sélection tout en appuyant sur la touche Maj.

•

Pour ajuster la largeur et la hauteur d'un élément à une taille précise, (par exemple, 1x1 pixel), utilisez l'inspecteur

Propriétés pour entrer une valeur numérique. Les éléments peuvent être redimensionnés visuellement à une taille

3

Pour rétablir la taille originale d'un élément redimensionné, supprimez les valeurs des zones de texte L et H ou cliquez sur le bouton Rétablir la taille dans l'inspecteur Propriétés.

Rétablissement de la taille originale d'une image

❖

Cliquez sur le bouton Rétablir la taille dans l'inspecteur Propriétés des images.

Rééchantillonnage d'une image redimensionnée

1

Redimensionnez l'image de la manière décrite ci-dessus.

2

Cliquez sur le bouton Rééchantillonner dans l'inspecteur Propriétés des images.

DREAMWEAVER CS3


241

Remarque :

Vous ne pouvez pas rééchantillonner les espaces réservés pour une image ou les éléments autres que les images bitmap.

Recadrage d'une image

Dreamweaver permet de recadrer (ou rogner) les images bitmap.

Remarque :

Lorsque vous recadrez une image, le fichier d'image source est modifié sur le disque. Il peut donc s'avérer utile de conserver une copie de sauvegarde du fichier d'image au cas où vous auriez besoin de revenir à l'image d'origine.

1

Ouvrez la page qui contient l'image à recadrer, sélectionnez l'image et procédez de l'une des manières suivantes :

•

Cliquez sur l'icône Recadrer dans l'inspecteur Propriétés des images.

•

Choisissez Modifier > Image > Recadrer.

Des poignées de recadrage apparaissent autour de l'image sélectionnée.

2

Ajustez-les jusqu'à ce que la surface de l'image à conserver soit entourée d'une zone limite.

3

Double-cliquez dans cette zone ou appuyez sur Entrée pour recadrer la sélection.

4

Une boîte de dialogue vous informe que le fichier image que vous recadrez sera modifié sur le disque. Cliquez sur OK.

Chaque pixel de l'image bitmap situé hors de la zone limite est supprimé mais les autres objets de l'image ne sont pas affectés.

5

Vérifiez à l'aide de l'aperçu que l'image correspond à vos attentes. Si ce n'est pas le cas, choisissez Edition > Annuler

Recadrer pour revenir à l'image d'origine.

Remarque :

Vous pouvez annuler l'effet de la commande Recadrer (et revenir au fichier d'image d'origine) jusqu'au moment où vous quittez Dreamweaver ou alors modifiez le fichier dans une application de retouche d'image.

O

ptimisation d'une image à l'aide de Fireworks

Vous pouvez optimiser des images sur vos pages Web dans Dreamweaver.

1

Ouvrez la page qui contient l'image à optimiser, sélectionnez l'image et procédez de l'une des manières suivantes :

•

Cliquez sur le bouton Optimiser dans Fireworks dans l'inspecteur Propriétés des images.

•

Choisissez Modifier > Image > Optimiser l'image dans Fireworks.

2

Décidez si l'optimisation doit produire un fichier PNG ou utiliser le fichier d'image ouvert.

3

Modifiez le fichier d'image, cliquez sur Mettre à jour puis enregistrez le fichier.

Ajustement de la luminosité et du contraste d'une image

La fonction Luminosité/Contraste modifie la luminosité ou le contraste des pixels qui composent l'image. Ceci affecte les surbrillances, les ombres et les demi-tons d'une image. Cette fonction est utilisée pour corriger les images trop sombres ou trop claires.

1

Ouvrez la page qui contient l'image à ajuster, sélectionnez l'image et procédez de l'une des manières suivantes :

•

Cliquez sur le bouton Luminosité/Contraste dans l'inspecteur Propriétés des images.

•

Choisissez Modifier > Image > Luminosité/Contraste.

2

Déplacez les curseurs de luminosité et de contraste pour modifier les valeurs à votre convenance. Les valeurs sont comprises entre -100 et 100.

3

Cliquez sur OK.

Accentuation d'une image

L'accentuation augmente le contraste des pixels autour des objets pour augmenter la définition de l'image et obtenir une meilleure netteté.

1

Ouvrez la page qui contient l'image à accentuer, sélectionnez l'image et procédez de l'une des manières suivantes :

•

Cliquez sur le bouton Accentuer dans l'inspecteur Propriétés des images.

DREAMWEAVER CS3


242

•

Choisissez Modifier > Image > Accentuer.

2

Pour spécifier le degré d'accentuation appliqué par Dreamweaver à l'image, déplacez le curseur ou tapez une valeur comprise entre 0 et 10 dans la zone de texte. Lorsque vous ajustez la netteté de l'image à l'aide de la boîte de dialogue

Accentuer, vous pouvez afficher un aperçu de l'image modifiée.

3

Lorsque vous êtes satisfait de l'image, cliquez sur

4

Enregistrez vos modifications en choisissant Fichier > Enregistrer ou revenez à l'image d'origine en choisissant Edition

> Annuler Accentuer.

Remarque :

Vous pouvez annuler l'effet de la commande Accentuer (et revenir au fichier d'image d'origine) uniquement avant d'enregistrer la page qui contient l'image. Une fois que vous avez enregistré la page, les modifications apportées à l'image sont définitivement enregistrées.

Création d'une image survolée

Vous pouvez insérer des images survolées dans votre page. Une image survolée est une image qui, lorsqu'elle est visualisée dans un navigateur, change lorsque le pointeur vient se placer au-dessus d’elle.

Vous devez disposer de deux images pour créer l'image survolée : l'image principale (affichée au chargement de la page) et l'image secondaire (qui apparaît lorsque le pointeur est placé au-dessus de l'image principale). Les deux images utilisées doivent avoir les mêmes dimensions ; si ce n'est pas le cas, Dreamweaver redimensionne la seconde image en fonction de la taille de la première.

Les images survolées sont automatiquement définies pour répondre à l'événement onMouseOver

. Vous pouvez configurer une image pour qu'elle réponde à un événement différent (par exemple, un clic de souris) ou modifier une image survolée.

Vous trouverez un didacticiel consacré à la création d'images survolées à l'adresse www.adobe.com/go/vid0159_fr .

1

Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous voulez insérer l'image survolée.

2

Insérez l'image survolée à l'aide de l'une des méthodes suivantes :

•

Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Images et sélectionnez l'icône Image survolée.

Lorsque l'icône Image survolée s'affiche dans la barre Insertion, vous pouvez la faire glisser jusqu'à la fenêtre du document.

•

Sélectionnez Insertion > Objets image > Image survolée.

3

Définissez les options, puis cliquez sur

N om de l'image

Nom de l'image survolée.

Image d’origine

L'image qui doit s'afficher au chargement de la page. Entrez le chemin d'accès dans la zone de texte ou cliquez sur Parcourir et sélectionnez l'image.

Image survolée

L'image à afficher lorsque le pointeur est placé au-dessus de l'image originale. Entrez le chemin d'accès de l'image ou cliquez sur Parcourir pour la sélectionner.

Précharger l'image survolée

Précharge les images dans la mémoire cache du navigateur afin d'éviter tout délai lorsque vous faites passer le pointeur de la souris par-dessus l'image.

T exte secondaire

(Facultatif) Texte qui décrit l'image à l'intention des personnes utilisant un navigateur en mode texte.

Si cliqué, aller à l'URL

Le fichier à ouvrir lorsqu'un utilisateur clique sur l'image survolée. Entrez le chemin d'accès du fichier ou cliquez sur Parcourir pour le sélectionner.

Remarque :

Si vous ne définissez pas un lien pour l'image, Dreamweaver insère un lien nul (#) dans le code source HTML auquel le comportement de survol est attaché. Si vous supprimez le lien nul, l'image survolée ne fonctionne plus.

4

Choisissez Fichier > Aperçu dans le navigateur ou appuyez sur la touche F12.

5

Dans le navigateur, placez le pointeur au-dessus de l'image d'origine pour voir l'image survolée.

Remarque :

Il est impossible de voir l'effet d'une image survolée dans le mode Création.

DREAMWEAVER CS3


243

Voir aussi

« Application du comportement Permuter une image » à la page 349

« Insertion d'une barre de navigation » à la page 279

Utilisation d'un éditeur d'image externe

Dans Dreamweaver, vous pouvez ouvrir une image sélectionnée dans un éditeur d'image externe. Lorsque vous revenez dans Dreamweaver après avoir enregistré le fichier d'image modifié, toutes les modifications apportées à l'image sont visibles dans la fenêtre de document.

Vous pouvez définir Fireworks comme principal éditeur d'image. Vous pouvez également définir quels types de fichier un

éditeur peut ouvrir et vous pouvez sélectionner plusieurs éditeurs d'image. Par exemple, vous pouvez définir des préférences afin de démarrer Fireworks pour modifier les fichiers GIF et de lancer un éditeur d'image différent pour modifier les fichiers JPG ou JPEG.

Voir aussi

« Utilisation de Photoshop » à la page 358


Démarrage de l'éditeur d'image externe

❖


•

Double-cliquez sur l'image à modifier.

•

Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur l'image à modifier, choisissez l'option Modifier avec > Parcourir et sélectionnez un éditeur.

•

Sélectionnez l'image à modifier, puis cliquez sur Modifier dans l'inspecteur Propriétés.

•

Double-cliquez sur le fichier d'image dans le panneau Fichiers pour lancer l'éditeur d'image principal. Si vous n'avez pas indiqué d'éditeur d'image, Dreamweaver exécute l'éditeur par défaut de ce type de fichier.

Remarque :

Lorsque vous ouvrez directement une image à partir du panneau Fichiers, les fonctionnalités d'intégration de

Fireworks sont inopérantes ; Fireworks n'ouvre pas le fichier original PNG. Pour utiliser ces fonctionnalités d'intégration de

Fireworks, ouvrez les images à partir de la fenêtre de document.

Si l'image mise à jour n'apparaît pas une fois de retour dans la fenêtre Dreamweaver, sélectionnez l'image et cliquez sur le bouton Actualiser dans l'inspecteur Propriétés.

Définition d'un éditeur d'image externe pour un type de fichier existant

Vous pouvez sélectionner l'éditeur d'image à utiliser pour ouvrir et modifier les fichiers graphiques.

1

Ouvrez la boîte de dialogue Types de fichiers/Editeurs en effectuant l'une des opérations suivantes :

•

Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh) et sélectionnez la catégorie

Types de fichiers/Editeurs dans la liste de gauche.

•

Choisissez la commande Edition > Modifier avec éditeur externe, puis sélectionnez Types de fichiers/Editeurs.

2

Dans la liste Extensions, sélectionnez l'extension de fichier pour laquelle définir un éditeur externe.

3

Cliquez sur le bouton Ajouter (+) au-dessus de la liste Editeurs.

4

Dans la boîte de dialogue Sélectionner un éditeur externe, recherchez l'application à démarrer en tant qu'éditeur pour ce type de fichier.

5

Dans la boîte de dialogue Préférences, cliquez sur Principal si vous souhaitez que cet éditeur soit l'éditeur principal pour ce type de fichier.

6

Si vous souhaitez configurer un éditeur supplémentaire pour ce type de fichier, répétez les étapes 3 et 4.

DREAMWEAVER CS3


244

Dreamweaver utilise automatiquement l'éditeur principal lorsque vous modifiez ce type d'image. Vous pouvez choisir l'un des autres éditeurs figurant dans la liste, à partir du menu déroulant de l'image, dans la fenêtre de document.

Ajout d'un nouveau type de fichier à la liste Extensions

1


• Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh) et sélectionnez la catégorie


• Choisissez la commande Edition > Modifier avec éditeur externe, puis sélectionnez Types de fichiers/Editeurs.

2

Dans la boîte de dialogue Types de fichiers/Editeurs, cliquez sur le bouton Ajouter (+) au-dessus de la liste Extensions.

Une zone de texte s'affiche dans la liste Extensions.

3

Tapez l'extension de fichier pour le type de fichier que vous voulez ouvrir avec l'éditeur.

4

Pour sélectionner un éditeur externe pour le type de fichier, cliquez sur le bouton Ajouter (+) au-dessus de la liste

Editeurs.

5

Dans la boîte de dialogue qui apparaît alors, sélectionnez l'application à utiliser pour modifier ce type d'image.

6

Cliquez sur Principal si vous désirez que ce programme soit l'éditeur principal pour ce type d'image.

Modification d'une préférence d'éditeur existante

1


•

Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh) et sélectionnez la catégorie


•

Choisissez la commande Edition > Modifier avec éditeur externe, puis sélectionnez Types de fichiers/Editeurs.

2

Dans la boîte de dialogue Types de fichiers/Editeurs, sélectionnez dans la liste Extensions le type de fichier que vous souhaitez modifier pour visualiser les éditeurs actuellement définis.

3

Dans la liste Editeurs, sélectionnez l'éditeur que vous désirez affecter à ce type de fichier, puis procédez de l'une des manières suivantes :

•

Cliquez sur le bouton Ajouter (+) ou Supprimer (-), au-dessus de la liste Editeurs, pour ajouter ou supprimer un éditeur.

•

Cliquez sur le bouton Rendre principal pour définir l'éditeur à lancer par défaut pour la retouche.

Application de comportements aux images

Vous pouvez appliquer l'un des comportements disponibles à une image ou à la zone réactive d'une image. Lorsque vous appliquez un comportement à une zone réactive, Dreamweaver insère le code source HTML nécessaire dans la balise area

.

Il existe trois comportements qui s'appliquent spécifiquement aux images : Précharger les images, Permuter une image et

Restaurer l'interversion d'images.

Précharger les images

Place dans la mémoire cache du navigateur les images qui ne sont pas immédiatement affichées lors du chargement de la page (par exemple, les images de substitution appelées par un comportement, un élément PA ou une fonction en JavaScript). Cela évite à l'utilisateur d'attendre que ces images soient chargées, lorsqu'un événement déclenche leur apparition

Permuter une image

Remplace une image par une autre, en modifiant l'attribut

SRC

de la balise img

. Utilisez cette action pour créer des substitutions de boutons et autres effets sur des images (y compris la substitution de plusieurs images à la fois)

Restaurer l'image intervertie

Rétablit la dernière interversion d'images à son état d'origine. Cette action est pas besoin d'y faire appel manuellement

Vous pouvez également utiliser les comportements pour créer des structures de navigation sophistiquées, par exemple une barre de navigation ou un menu de liens

DREAMWEAVER CS3


245

Voir aussi

« Insertion d'un menu de reroutage » à la page 277

« Insertion d'une barre de navigation » à la page 279

« Application du comportement Permuter une image » à la page 349

« Application du comportement Précharger les images » à la page 343

Insertion de contenu Flash

A propos des types de fichier Flash

Dreamweaver est fourni avec des objets Flash que vous pouvez utiliser même si Flash n'est pas installé sur votre ordinateur.

Avant d'utiliser les commandes disponibles dans Dreamweaver, il est recommandé de connaître les différents types de fichiers :

Le fichier Flash (.fla)

Est le fichier source pour tout projet et est créé dans le programme Flash. Ce type de fichier peut uniquement être ouvert dans comportement Flash (il ne peut pas l'être dans Dreamweaver ni dans des navigateurs). Vous pouvez ouvrir le fichier Flash dans Flash, puis l'exporter en tant que fichier SWF ou SWT pour l'utiliser dans des navigateurs.

Le fichier Flash SWF (.swf)

Est une version compressée du fichier Flash (.fla), optimisée pour l'affichage sur le Web. Ce fichier peut être lu dans les navigateurs et prévisualisé dans Dreamweaver, mais il ne peut pas être modifié dans Flash. Il s'agit du type de fichier que vous créez lors de l'utilisation des objets de bouton Flash ou de texte Flash.

Les fichiers de modèle Flash (.swt)

Permettent de modifier et de remplacer des informations dans un fichier SWF Flash. Ces fichiers sont utilisés dans l'objet de bouton Flash, ce qui vous permet de modifier le modèle avec votre propre texte ou vos propres liens afin de créer un fichier SWF personnalisé à insérer dans votre document. Dans Dreamweaver, ces fichiers de modèle peuvent être trouvés dans les dossiers Dreamweaver/Configuration/Flash Objects/Flash Buttons et Flash Text.

Vous pouvez également télécharger de nouveaux modèles de bouton à partir du site Web Adobe Exchange pour

Dreamweaver ( www.adobe.com/go/Dreamweaver_exchange_fr ) et les placer dans votre dossier de boutons Flash. Pour plus d'informations sur la création de modèles de bouton, consultez l'article correspondant sur le site www.adobe.com/go/flash_buttons_fr .

Le fichier d'élément Flash (.swc)

Est un fichier Flash SWF vous permettant de créer des applications Web enrichies incorporées à une page Web. Les éléments Flash comportent des paramètres personnalisables, que vous pouvez modifier pour qu'ils accomplissent diverses fonctions.

Le format de fichier Flash Video (.flv)

Est un fichier vidéo qui contient des données audio et vidéo codées, lisibles par Flash®

Player. Par exemple, si vous utilisez un fichier vidéo QuickTime ou Windows Media, vous devez utiliser un encodeur (tel que Flash® 8 Video Encoder ou Sorensen Squeeze) pour convertir le fichier vidéo en fichier FLV. Pour plus d'informations, consultez le Centre des développeurs Flash Video à l'adresse www.adobe.com/go/flv_devcenter_fr .

Voir aussi

« Utilisation de Flash » à la page 366

« Création et insertion d'un bouton Flash » à la page 247

« Modification d'un objet de bouton Flash » à la page 247

« Ajout de contenu Flash Video » à la page 254

DREAMWEAVER CS3


246

Insertion et aperçu de contenu Flash

Dreamweaver permet d'ajouter du contenu Flash (fichiers SWF et animations Shockwave) dans vos pages, puis d'en consulter un aperçu dans un document et dans un navigateur. Vous pouvez également définir les propriétés du contenu

Flash dans l'inspecteur Propriétés.

Vous trouverez un didacticiel consacré à l'ajout de contenu Flash à des pages Web à l'adresse www.adobe.com/go/vid0150_fr .

Voir aussi


« Modification d'un fichier SWF de Dreamweaver dans Flash » à la page 366

« Insertion d'animations Shockwave » à la page 262

« Ajout de contenu Flash Video » à la page 254

Insertion d'un fichier SWF (animation Flash)

1

Dans la fenêtre de document (mode Création), placez le point d'insertion à l'endroit où vous souhaitez insérer le contenu, puis procédez de l'une des manières suivantes :

•

Dans la catégorie Commun de la barre Insertion, choisissez Médias et cliquez sur l'icône Flash .

•

Sélectionnez Insertion > Médias > Flash.

2

Dans la boîte de dialogue qui s'affiche, sélectionnez un fichier d'animation Flash (.swf).

Un espace réservé Flash s'affiche dans la fenêtre de document (contrairement aux objets de texte et de bouton Flash).

Aperçu du contenu Flash dans la fenêtre de document

1

Dans cette fenêtre, cliquez sur l'espace réservé Flash afin de sélectionner le contenu Flash à prévisualiser.

2

Dans l'inspecteur Propriétés, cliquez sur le bouton Lecture. Cliquez sur le bouton Arrêt pour arrêter la prévisualisation.

Vous pouvez également prévisualiser le contenu Flash dans un navigateur en appuyant sur la touche F12.

Pour prévisualiser tout le contenu Flash dans une page, appuyez sur les touches Ctrl+Alt+Maj+P (Windows) ou

Maj+Option+Commande+P (Macintosh). Tous les objets Flash et les fichiers SWF sont définis sur le mode de lecture.

Définition des propriétés d'une animation Flash et Shockwave

Pour optimiser les résultats dans Internet Explorer comme dans Netscape Navigator, Dreamweaver insère les animations

Flash et Shockwave en utilisant des balises object

et embed

(La balise object

est définie par Microsoft pour les contrôles

ActiveX embed

est définie par Netscape Navigator pour les plug-ins.) Pour voir les propriétés suivantes de l'inspecteur

Propriétés, sélectionnez un fichier Flash SWF ou une animation Shockwave.

❖

Sélectionnez un fichier Flash SWF ou une animation Shockwave et définissez ses options dans l'inspecteur Propriétés.

Pour voir toutes les propriétés d'un fichier Flash SWF, cliquez sur la flèche d'agrandissement, dans l'angle inférieur droit de l'inspecteur Propriétés.

N om

Spécifie un nom permettant d'identifier l'animation dans un script. Tapez un nom dans la zone de texte sans titre, à l'extrême gauche de l'inspecteur Propriétés.

L et H

Spécifient la largeur et la hauteur de l'animation, en pixels.

Fichier

Spécifie le chemin d'accès au fichier Flash ou Shockwave. Cliquez sur l'icône de dossier pour rechercher un fichier ou entrez le chemin d'accès.

Src

Indique le chemin d'accès à un document source Flash (FLA), lorsque Dreamweaver et Flash sont tous deux installés sur votre ordinateur. Pour modifier un fichier Flash (SWF), mettez à jour le document source de l'animation.

Modifier

Permet de démarrer Flash pour mettre à jour un fichier FLA (fichier créé dans le programme de création Flash).

Cette option est désactivée si Flash n'est pas chargé sur votre ordinateur.


Restaure l'animation sélectionnée sur sa taille d'origine.

DREAMWEAVER CS3


247

Boucle

Force l'animation à être lue en continu. Lorsque l'option est désactivée, l'animation est lue une seule fois.


Lit automatiquement l'animation lors du chargement de la page.


Spécifient le nombre de pixels d'espace blanc au-dessus, au-dessous et de chaque côté de l'animation.

Qualité

Contrôle l'anticrénelage pendant la lecture de l'animation. Un paramètre élevé entraîne un meilleur aspect de l'animation mais requiert un processeur plus rapide pour obtenir un rendu correct à l'écran. Un paramètre faible améliore la vitesse au détriment de l'apparence, alors qu'un paramètre élevé favorise l'aspect par rapport à la vitesse. Basse automatiquement améliore la vitesse au départ, mais également l'apparence lorsque cela est possible. Elevée automatiquement améliore les deux qualités au départ mais sacrifie l'apparence pour la vitesse si nécessaire.

Echelle

Détermine comment l'animation s'adapte aux dimensions définies dans les zones de largeur et de hauteur. Le paramètre par défaut affiche l'animation entière.

Pas de bordures

Adapte l'animation aux dimensions définies afin qu'aucune bordure n'apparaisse et que le rapport largeur/hauteur soit préservé.

Ajuster

Met l'animation à l'échelle en fonction des dimensions définies, quel que soit le rapport largeur/hauteur.

Alignement

Détermine l'alignement de l'animation sur la page.

Ar-pl

Spécifie une couleur d'arrière-plan pour la zone d'animation. Cette couleur apparaît également lorsque l'animation n'est pas en lecture (au cours du chargement et à la fin de la lecture).

Paramètres

Ouvre une boîte de dialogue dans laquelle vous pouvez indiquer des paramètres supplémentaires à transmettre

à l'animation. L'animation doit avoir été conçue pour recevoir ces paramètres supplémentaires.

Création et insertion d'un bouton Flash

Vous pouvez créer et insérer des boutons Flash dans vos documents lorsque les modes Création ou Code sont activés. Il n'est pas nécessaire d'installer Flash pour ce faire. L'objet de bouton Flash est un bouton pouvant être mis à jour. Il est basé sur un modèle Flash.

Remarque :

Vous devez enregistrer le document avant d'insérer un objet de bouton ou de texte Flash.

1

Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous voulez insérer le bouton Flash.

2

Pour ouvrir la boîte de dialogue Insertion d'objets Flash, procédez de l'une des manières suivantes :

•

Dans la catégorie Commun de la barre Insertion, choisissez Médias et cliquez sur l'icône Bouton Flash .

•

Sélectionnez Insérer > Supports > Bouton Flash.

3

Renseignez la boîte de dialogue Insérer le bouton Flash et cliquez sur Appliquer ou OK pour insérer le bouton Flash dans la fenêtre de document.

Pour afficher un aperçu du bouton en mode Création, cliquez sur Appliquer. La boîte de dialogue reste ouverte et vous pouvez afficher un aperçu du bouton dans votre document.

Modification d'un objet de bouton Flash

Vous pouvez modifier les propriétés et le contenu d'un objet de bouton Flash.

L'inspecteur Propriétés affiche les propriétés du bouton Flash. Il permet de définir les attributs HTML physiques du bouton, tels que la largeur, la hauteur et la couleur d'arrière-plan. Cliquez sur la flèche d'agrandissement dans l'angle inférieur droit pour afficher plus de propriétés.

Pour modifier d'autres propriétés de contenu d'un bouton Flash, comme son texte, sa couleur et l'URL que le navigateur ouvre en cas de clic sur le bouton, utilisez la ï»¿ï»¿ï»¿boîte de dialogue Insérer le bouton Flash.

Voir aussi

« Insertion d'un objet de texte Flash » à la page 249

« Alignement d'une image » à la page 239

DREAMWEAVER CS3


248


« Utilisation de paramètres pour contrôler des objets multimédia » à la page 266


Modification des propriétés d'un objet Flash dans l'inspecteur Propriétés

1

Dans la fenêtre de document, cliquez sur l'objet de bouton Flash pour le sélectionner.

2

Ouvrez l'inspecteur Propriétés, le cas échéant. Cliquez sur la flèche d'agrandissement dans l'angle inférieur droit pour afficher plus de propriétés.

3

Définissez les options dans l'inspecteur Propriétés.

N om

Spécifie le nom permettant d'identifier le bouton pour un script. Tapez un nom dans la zone de texte sans titre, à l'extrême gauche de l'inspecteur Propriétés.

L et H

Spécifient la largeur et la hauteur de l'objet, en pixels. Dans la fenêtre Création, vous pouvez redimensionner l'objet

à l'aide des poignées de redimensionnement. Vous pouvez rendre à l'objet sa taille d'origine en sélectionnant Rétablir la taille dans l'inspecteur Propriétés.

Fichier

Spécifie le chemin d'accès au fichier d'objet Flash. Cliquez sur l'icône de dossier pour rechercher un fichier ou entrez le chemin d'accès.

Modifier

Ouvre la boîte de dialogue de l'objet Flash pour qu'il soit modifié.


Rend à l'objet sélectionné sa taille d'origine.


Spécifient le nombre de pixels d'espace blanc au-dessus, au-dessous et de chaque côté du bouton.

Qualité

Définit le paramètre quality

pour les balises object

et embed

qui définissent le bouton. Un paramètre élevé entraîne un meilleur aspect du contenu Flash mais requiert un processeur plus rapide pour obtenir un rendu correct à l'écran. Un paramètre faible améliore la vitesse au détriment de l'apparence, alors qu'un paramètre élevé favorise l'aspect par rapport à la vitesse. Basse automatiquement améliore la vitesse au départ, mais également l'apparence lorsque cela est possible. Elevée automatiquement améliore les deux qualités au départ mais sacrifie l'apparence pour la vitesse si nécessaire.

Echelle

Spécifie le paramètre scale

pour les balises object

et embed

qui définissent l'objet de texte ou de bouton. Ce paramètre définit l'affichage du contenu Flash dans la zone définie pour le fichier SWF à l'aide des valeurs width

et height

.

Les choix sont Par défaut (Afficher tout), Pas de bordure et Ajuster. Afficher tout rend l'ensemble du fichier SWF visible dans la zone spécifiée, en conservant le rapport hauteur/largeur de ce fichier et en évitant toute déformation. Les bordures de la couleur d'arrière-plan peuvent apparaître sur les deux côtés du fichier SWF. Pas de bordure est similaire à Afficher tout, mais des portions du fichier SWF peuvent être tronquées. Avec l'option Ajuster, l'ensemble du fichier SWF remplit la zone spécifiée, mais le rapport hauteur/largeur du fichier n'est pas conservé et des déformations peuvent se produire.

Alignement

Détermine l'alignement de l'objet sur la page.

Ar-pl

Spécifie une couleur d'arrière-plan pour l'objet.

Lecture / Arrêt

Prévisualise l'objet Flash dans la fenêtre de document. Cliquez sur le bouton de lecture (bouton vert) pour visualiser l'objet en mode Lecture ; cliquez sur le bouton d'arrêt (bouton rouge) pour arrêter la lecture de l'objet et le modifier.

Paramètres

Affiche une boîte de dialogue permettant d'entrer des paramètres supplémentaires.

Modification du contenu d'un objet Flash

1

Pour apporter des modifications au contenu, affichez la boîte de dialogue Insérer le bouton Flash en utilisant l'une des méthodes suivantes :

•

Double-cliquez sur l'objet de bouton Flash.

•

Cliquez sur le bouton Modifier dans l'inspecteur Propriétés.

•

Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh), puis choisissez Modifier dans le menu contextuel.

2

Sélectionnez un style de bouton dans la liste Style.

DREAMWEAVER CS3


249

Vous pouvez afficher un exemple du bouton dans la zone de texte Echantillon. Cliquez sur l'échantillon pour découvrir comment il fonctionne dans le navigateur.

Remarque :

Lorsque vous définissez le bouton Flash (par exemple, en modifiant le texte ou la police), la zone de texte

Echantillon n'est pas automatiquement mise à jour pour refléter les modifications apportées. Ces modifications seront prises en compte lorsque vous fermerez la boîte de dialogue et afficherez le bouton en mode Création.

3

(Facultatif) Dans le champ de texte de bouton, tapez le texte à afficher.

Cette zone de texte accepte uniquement des modifications si le bouton sélectionné possède un paramètre {Texte de bouton} défini. Cela s'affiche dans la zone de texte Echantillon. Le texte que vous tapez remplace le paramètre {Texte de bouton} lorsque vous prévisualisez le fichier.

4

Dans le menu Police, sélectionnez la police du texte du bouton.

Si la police par défaut d'un bouton n'est pas disponible sur le système, sélectionnez une autre police dans le menu. La police sélectionnée n'est pas visible dans la zone de texte Echantillon, mais vous pouvez cliquer sur Appliquer pour insérer le bouton et prévisualiser le texte.

5

Dans la zone de texte Taille, entrez une valeur numérique pour la taille de la police.

6

(Facultatif) Dans la zone de texte Lien, entrez un lien relatif au document ou un lien absolu pour le bouton.

C'est cette URL que le navigateur ouvre lorsque le visiteur clique sur le bouton.

7

(Facultatif) Dans la zone de texte Cible, indiquez l'endroit où le document lié doit s'ouvrir. Vous pouvez sélectionner une option de cadre ou de fenêtre dans le menu déroulant. Les noms de cadres ne sont répertoriés que si l'objet Flash est modifié dans un jeu de cadres.

8

(Facultatif) Dans la zone de texte Couleur d'ar-pl., définissez la couleur d'arrière-plan du fichier SWF de Flash. Utilisez le sélecteur de couleur ou entrez une valeur hexadécimale Web (telle que #FFFFFF).

9

Dans la zone de texte Enregistrer sous, entrez un nom de fichier sous lequel enregistrer le nouveau fichier SWF.

Vous pouvez utiliser le nom de fichier par défaut (par exemple, button1.swf) ou entrer un nouveau nom. Si le fichier contient un lien relatif au document, vous devez enregistrer le fichier dans le même répertoire que le document HTML courant pour conserver les liens relatifs au document.

10

Cliquez sur le bouton Acquérir plus de styles pour atteindre le site Adobe Exchange et télécharger des styles de bouton supplémentaires.

11

Cliquez sur le bouton Appliquer ou OK pour insérer le bouton Flash dans la fenêtre de document.

Cliquez sur le bouton Appliquer pour visualiser les modifications en mode Création, tout en conservant la boîte de dialogue ouverte. Vous pouvez alors continuer à apporter des modifications au bouton.

Aperçu d'un objet de bouton Flash dans le document

Vous pouvez prévisualiser un bouton Flash dans la fenêtre de document Dreamweaver. Il est toujours judicieux d'afficher un aperçu du document dans le navigateur pour obtenir une représentation exacte du bouton Flash.

1

En mode Création, sélectionnez l'objet de bouton Flash dans le document.

2

Dans l'inspecteur Propriétés, cliquez sur Lecture.

3

Cliquez sur le bouton Arrêt pour arrêter la prévisualisation.

Remarque :

Vous ne pouvez pas modifier l'objet de bouton Flash pendant sa lecture.

Insertion d'un objet de texte Flash

L'objet de texte Flash permet de créer et d'insérer un fichier SWF Flash contenant uniquement du texte. Vous pouvez ainsi créer une petite animation graphique vectorielle avec les polices et le texte de votre choix.

1

Dans la fenêtre de document, placez le point d'insertion là où vous souhaitez insérer le texte Flash.

2

Pour ouvrir la boîte de dialogue Insérer le texte Flash, procédez de l'une des manières suivantes :

•

Dans la catégorie Commun de la barre Insertion, choisissez Médias et cliquez sur l'icône Texte Flash.

DREAMWEAVER CS3


250

•

Sélectionnez Insérer > Supports > Texte Flash.

3

Renseignez la boîte de dialogue Insérer le texte Flash et cliquez sur Appliquer ou OK pour insérer le texte Flash dans la fenêtre de document.

Si vous cliquez sur le bouton Appliquer, la boîte de dialogue reste ouverte et vous pouvez prévisualiser le texte dans le document.

Pour modifier ou lire l'objet de texte Flash, suivez la même procédure que pour un bouton Flash.

Voir aussi

« Modification d'un objet de bouton Flash » à la page 247


T

éléchargement et installation des éléments Flash

Avant d'utiliser des éléments Flash dans vos pages Web, vous devez commencer par les ajouter à Dreamweaver à l'aide du logiciel Adobe® Extension Manager. Le logiciel Extension Manager est une application indépendante permettant d'installer et de gérer les extensions dans les applications Adobe. Vous pouvez lancer Extension Manager à partir de Dreamweaver en choisissant Commandes > Gérer les extensions.

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

Manager avant de pouvoir installer de nouveaux éléments Flash ou d'autres extensions Dreamweaver.

Vous pouvez utiliser Extension Manager pour installer des éléments Flash (ainsi que d'autres extensions Dreamweaver).

Voir aussi


Insertion d'éléments Flash

Dreamweaver vous permet d'insérer des éléments Flash dans vos documents. Les éléments Flash vous permettent de créer aisément et rapidement des applications Web enrichies à l'aide d'éléments précréés.

1

Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous souhaitez insérer un élément Flash et procédez de l'une des manières suivantes :

• Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Médias et sélectionnez l'élément Flash à insérer.

• Sélectionnez Insertion > Médias > nom de l'élément Flash .

Dreamweaver inclut un élément Flash appelé Visualiseur d'images.

La boîte de dialogue Enregistrer l'élément Flash s'affiche alors.

2

Tapez le nom de fichier choisi pour l'élément Flash et enregistrez-le à l'endroit voulu de votre site.

3

Cliquez sur OK.

L'espace réservé à l'élément Flash apparaît dans le document. Vous pouvez modifier les propriétés de l'élément Flash à l'aide des inspecteurs de balises ou de propriétés.

4

Choisissez Fichier > Aperçu dans le navigateur pour afficher un aperçu de l'élément Flash.

Modification d'éléments Flash

Il est possible de modifier les attributs d'un élément Flash à l'aide des inspecteurs de balises ou de propriétés.

DREAMWEAVER CS3


251

L'Inspecteur de balises et l'inspecteur Propriétés permettent d'afficher et de modifier les attributs des éléments Flash.

L'Inspecteur de balises permet d'afficher et de modifier les attributs (ou paramètres) personnalisables associés à un composant donné. L'inspecteur Propriétés permet de modifier la hauteur, la largeur et les attributs SRC d'un élément Flash, mais aussi de visualiser un aperçu de l'élément en mode Création.

1

Dans la fenêtre de document, effectuez l'une des procédures suivantes :

•

En mode Création, sélectionnez l'élément Flash.

•

En mode Code, cliquez n'importe où sur le nom de l'élément Flash ou sur son contenu.

2

Ouvrez l'Inspecteur de balises si ce n'est déjà fait (Fenêtre > Inspecteur de balises).

3

Modifiez les attributs de l'élément Flash à l'aide de l'Inspecteur de balises et de l'inspecteur Propriétés.

•

Saisissez votre valeur dans la colonne des valeurs d'attribut située à droite du nom de l'attribut.

•

Pour modifier la valeur d'un attribut, sélectionnez cette valeur puis modifiez-la.

•

Pour ajouter une valeur à un attribut qui n'en a pas, cliquez dans la colonne des valeurs d'attribut située à droite de l'attribut, puis indiquez votre valeur (voir procédure ci-après).

•

Si la valeur de l'attribut correspond à une URL, tapez l'URL.

•

Si l'attribut accepte les valeurs prédéfinies, sélectionnez une valeur dans le menu déroulant (ou le sélecteur de couleur) situé à droite de la colonne des valeurs d'attribut.

•

Si la valeur de l'attribut correspond à une source de contenu dynamique (par exemple, une base de données), cliquez sur le bouton Données dynamiques situé à droite de la colonne des valeurs d'attribut. Sélectionnez ensuite votre source.

4

Pour que les modifications apportées soient prises en compte dans votre document, appuyez sur la touche Entrée

(Windows) ou Retour (Macintosh) ou cliquez à un autre endroit de l'inspecteur de balises.

Voir aussi

« Définition de sources de contenu dynamique » à la page 521

Utilisation de l'élément Image Viewer de Flash

Adobe Dreamweaver CS3 contient un élément Flash que vous pouvez employer dans vos pages : un visualisateur d'images

Flash qui peut faire office d'album photos pour le Web.

L'élément Image Viewer est une application redimensionnable permettant de charger et de visualiser une série d'images

JPEG ou SWF. Vous définissez une liste d'images, ainsi qu'un lien et une légende pour chaque image.

Les utilisateurs peuvent visualiser les images dans l'ordre à l'aide des boutons précédent et suivant, ou accéder directement

à une image spécifique en entrant le numéro de cette image. Vous pouvez également définir les images pour qu'elles soient lues sous forme d'un diaporama.

Remarque :

Les visiteurs du site Web doivent avoir installé Flash® Player 7 ou une version supérieure pour voir les éléments

Image Viewer dans vos pages.

1

Placez le point d'insertion dans votre page à l'endroit où vous souhaitez que le visualisateur d'images apparaisse et sélectionnez Insertion > Médias > Visualisateur d'images.

2

Dans la boîte de dialogue Enregistrer l'élément Flash, recherchez un emplacement de votre site dans lequel enregistrer l'élément, entrez un nom et cliquez sur Enregistrer.

Remarque :

Il est recommandé d'enregistrer l'élément Flash dans le même site Dreamweaver que celui de la page dans laquelle vous ajoutez le visualisateur d'images.

L'espace réservé de l'élément Flash apparaît dans votre page et l'inspecteur de balises s'ouvre.

3

Sélectionnez l'espace réservé de l'élément Flash s'il n'est pas déjà sélectionné.

4

Dans l'inspecteur de balises (Fenêtre > Inspecteur de balises), cliquez dans le champ situé en regard du paramètre imageURLs

, et cliquez sur l'icône Modifier les valeurs des tableaux située au bout de la ligne.

DREAMWEAVER CS3


252

5

Dans la boîte de dialogue Modifier le tableau imageURLs, cliquez sur le bouton Moins (-) pour supprimer les éléments d'espace réservé ; pour ajouter des images, cliquez sur le bouton Plus (+), cliquez sur l'icône de dossier située en regard de la ligne de valeur vide qui apparaît, puis sélectionnez l'image que vous souhaitez ajouter. Vous pouvez ajouter des fichiers

JPEG ou SWF.

Remarque :

Il est recommandé d'utiliser des fichiers qui se trouvent dans le même site Dreamweaver que celui de la page dans laquelle vous ajoutez le visualisateur d'images.

6

Cliquez sur OK pour fermer la boîte de dialogue Modifier le tableau imageURLs.

7

(Facultatif) Utilisez l'inspecteur de balises pour définir d'autres paramètres pour le visualisateur d'images.

Remarque :

Vous pouvez également définir les propriétés du visualisateur d'images dans l'inspecteur Propriétés. Pour plus d'informations, sélectionnez l'élément Flash et cliquez sur l'icône d'aide dans l'inspecteur Propriétés.

8

Après avoir sélectionné l'espace réservé de l'élément Image Viewer, cliquez sur le bouton de lecture de l'inspecteur

Propriétés pour lancer le visualisateur d'images, et utilisez les commandes suivantes pour visualiser les images :

•

Cliquez sur le bouton Suivant ou Précédent pour visualiser la séquence d'images.

•

Entrez un nombre dans la zone de texte pour accéder directement à une image spécifique.

•

Cliquez sur le bouton de lecture pour afficher les images sous forme de diaporama ; cliquez sur le bouton d'arrêt pour interrompre le diaporama.

9

Cliquez sur le bouton d'arrêt dans l'inspecteur Propriétés en mode agrandi pour arrêter la lecture du visualisateur d'images.

Paramètres du visualisateur d'images

Paramètre

bgColor frameColor frameShow frameThickness captionColor captionFont captionSize imageCaptions imageLinks imageURLs imgLinkTarget showControls

Description

S p

é cifie

l a cou l eur d

’ arri

è re

p l an.

Dé finit

l a cou l eur du contour des images.

Ré g l e z l e param

è tre frameShow sur Oui pour afficher

l e contour.

Indique si un contour s

' affiche autour de chaque image.

Dé finit

l a tai ll e

, en pie xl s

, du contour qui entoure chaque image.

Dé finit

l a cou l eur des

lé gendes de

l' image

, qui figurent dans imageCaptions

.

Dé finit

l a po l ice des

lé gendes de

l' image


.

Dé finit

l a tai ll e

, en points

, des

lé gendes de

l' image


.

C ontient

l es

lé gendes de chaque image d

é finie dans imageURLs

.

D es

lé gendes peuvent

ê tre emp l oy

é es pour certaines images

, toutes ou aucune.

C ontient une U

R

L pour chaque image d

é finie dans imageURLs

.

D es U

R

L peuvent

ê tre emp l oy

é es pour certaines images

, toutes ou aucune.

C ontient

l' emp l acement des images

à afficher dans

l e visua l isateur d

' images.

I l n

' est possib l e d

' emp l oyer que des fichiers

JPEG non progressifs ou

SWF

.

Dé finit

l a fen

ê tre de navigateur dans

l aque ll e doivent

ê tre charg

é es

l es U

R

L d

é finies dans linkURLs

.

C e param

è tre peut

ê tre r

é g lé sur

_blank , _self , _top , ou

_parent

.

Indique si

l es contr

ôl es du visua l isateur d

' images s

' affichent l orsque

l' uti l isateur

l it

l'élé ment

Fl ash.

DREAMWEAVER CS3


253

Paramètre

slideAutoPlay slideDelay slideLoop title titleColor titleFont titleSize transitionsType

Description

Dé termine si

l es images doivent

ê tre affich

é es sous

l a forme d ' un diaporama.

S i ce param è tre est r é g lé sur true , l a l ecture du diaporama d

é bute d

è s que

l a premi

è re image est charg é e.

Indique

l e d

él ai d

' attente entre chaque image

, en secondes

, l orsque l' uti l isateur c l ique sur l e bouton de l ecture ou si l e param

è tre autoPlay est activ

é

.

Le changement d

' image peut prendre p l us de temps que l e d él ai d é fini dans ce param

è tre si

l e chargement des images dure p l us l ongtemps.

Dé termine que

l e diaporama des images est

l u en bouc l e continue.

Dé finit

l e titre qui appara

î t en haut de

l a fen

ê tre du visua l isateur d ' image.

Dé finit

l a cou l eur du titre qui figure dans title

.

Dé finit l a po l ice du titre du visua l isateur d ' image , qui figure dans title

.

Dé finit l a tai ll e , en points , du titre du visua l isateur d ' image , qui figure dans title

.

Indique l a fa ç on dont l es images s ' affichent dans l e visua l isateur d

' image.

V ous pouve z choisir parmi p l usieurs options de chargement.

Insertion de documents FlashPaper

Vous pouvez insérer des documents Adobe® FlashPaper™ dans vos pages Web. Lorsqu'une page contenant le document

FlashPaper est ouverte dans un navigateur, l'utilisateur peut parcourir l'ensemble des pages du document FlashPaper sans charger de nouvelles pages Web. L'utilisateur peut également effectuer une recherche dans le document, l'imprimer, l'agrandir et le réduire.

Pour plus d'informations sur FlashPaper, consultez le site Web de Adobe à l'adresse www.adobe.com/go/flashpaper_fr .

1

Dans la fenêtre Document, placez le point d'insertion à l'endroit où vous souhaitez afficher le document FlashPaper, puis sélectionnez Insertion > Médias > FlashPaper.

2

Dans la boîte de dialogue Insérer FlashPaper, sélectionnez un document FlashPaper.

3

Si nécessaire, spécifiez les dimensions de l'objet FlashPaper sur la page Web en donnant sa largeur et sa hauteur en pixels.

FlashPaper redimensionne le document pour occuper la largeur de la page.

4

Cliquez sur OK pour insérer le document dans la page.

Dans la mesure où un document FlashPaper est un objet Flash, un espace réservé Flash s'affiche sur la page.

5

Pour obtenir un aperçu du document FlashPaper, cliquez sur l'espace réservé, puis cliquez sur le bouton Lire dans l'inspecteur Propriétés.

6

Cliquez sur le bouton Arrêt pour arrêter la prévisualisation. Vous pouvez également prévisualiser le document dans un navigateur en appuyant sur la touche F12. La barre d'outils FlashPaper du navigateur dispose de fonctionnalités complètes.

Pour prévisualiser tout le contenu Flash dans une page, appuyez sur les touches Ctrl+Alt+Maj+P (Windows) ou

Maj+Option+Commande+P (Macintosh). Tous les objets Flash et les fichiers SWF sont définis sur le mode de lecture.

7

Si nécessaire, définissez d'autres propriétés dans l'inspecteur Propriétés.

En tant qu'objet Flash, l'objet FlashPaper partage l'inspecteur Propriétés de l'objet Flash. Pour plus d'informations sur la définition des propriétés, cliquez sur le bouton Aide de l'inspecteur Propriétés.

DREAMWEAVER CS3


254

Ajout de contenu Flash Video

Insérez une vidéo Flash

Vous pouvez insérer facilement du contenu Flash Video dans vos pages Web sans avoir recours à l'outil de programmation

Flash. Vous devez disposer d'un fichier Flash Video (FLV) codé avant de commencer.

Dreamweaver insère le composant Flash Video, qui affiche le contenu vidéo Flash sélectionné, ainsi qu'une série de commandes de lecture, lorsqu'il est visualisé dans un navigateur.

Dreamweaver dispose des options suivantes pour proposer des documents Flash Video aux visiteurs de votre site :

Vidéo en téléchargement progressif

Télécharge le fichier Flash Video (FLV) sur le disque dur du visiteur, puis lance sa téléchargement progressif permet de lancer la lecture du fichier vidéo avant la fin de son téléchargement.

Vidéo en flux continu

Diffuse en continu le contenu vidéo Flash et le lit sur une page Web suite à une courte période de mise en mémoire tampon, ce qui assure une lecture homogène. Pour activer la diffusion vidéo en continu sur vos pages

Web, vous devez avoir accès à Adobe® Flash® Media Server.

Vous devez disposer d'un fichier Flash Video (FLV) codé avant d'utiliser ce dernier dans Dreamweaver. Vous pouvez insérer

•

Si vous avez créé la vidéo avec le codec Sorenson Squeeze, les visiteurs du site nécessitent Flash® Player 7 d'Adobe ou une version plus récente pour lire les vidéos en téléchargement progressif ; ils doivent disposer de Flash Player 6.0.79 ou d'une version plus récente pour lire les vidéos en flux continu.

•

Si vous avez créé votre vidéo avec le codec On2, les visiteurs de votre site nécessitent Flash Player 8 ou une version plus récente.

Après avoir inséré le fichier Flash Video dans une page, vous pouvez insérer du code dans cette page pour déterminer si l'utilisateur dispose de la version de Flash Player requise pour afficher le document Flash Video. S'il ne dispose pas de la bonne version, il lui est alors recommandé de télécharger la dernière version de Flash Player.

Pour plus d'informations sur Flash Video, consultez le Centre des développeurs Flash Video à l'adresse www.adobe.com/go/flv_devcenter_fr .

Insertion d'un document Flash Video

1

Sélectionnez Insérer > Supports > Flash Video.

2

Dans la boîte de dialogue Insérer un fichier Flash Video, choisissez Vidéo en téléchargement progressif dans le menu

Type de vidéo.

3

Renseignez les autres sections de la boîte de dialogue selon les besoins puis cliquez sur OK.

DREAMWEAVER CS3


255

Définition des options pour la vidéo en téléchargement progressif

La boîte de dialogue Insert Flash Video (Insérer Flash Video) permet de définir des options pour la remise par téléchargement progressif d'un fichier Flash Video (FLV) inséré dans une page Web.

1

Cliquez sur Insertion > Médias > Flash Video ou cliquez sur l'icône Flash Video dans la catégorie Commun de la barre

Insertion.

2

Dans la boîte de dialogue Insérer un fichier Flash Video, choisissez Vidéo en téléchargement progressif dans le menu

Type de vidéo.

3

Définissez les options suivantes :

URL

Spécifie le chemin absolu ou relatif du fichier FLV. Pour spécifier un chemin relatif (par exemple, monchemin/mavideo.flv), cliquez sur le bouton Parcourir, accédez au fichier FLV et sélectionnez-le. Pour spécifier un chemin absolu, tapez l'URL (par exemple, http://www.exemple.com/mavideo.flv) du fichier FLV.

Remarque :

Pour que le lecteur vidéo fonctionne correctement, le fichier FLV doit contenir des métadonnées. Les fichiers FLV créés avec Flash Communication Server 1.5.2, FLV Exporter version 1.2 et Sorenson Squeeze 4.0 contiennent automatiquement les métadonnées nécessaires.

Sur le Macintosh, vous devez utiliser un chemin absolu si vous pointez vers des fichiers FLV dans des répertoires situés à au moins deux niveaux au-dessus du fichier HTML.

Enveloppe

Permet de spécifier l'aspect du composant Flash Video. Un aperçu de l’enveloppe sélectionnée apparaît sous le menu contextuel Enveloppe.

Largeur

Indique la largeur (en pixels) du fichier FLV. Cliquez sur le bouton Détecter la taille pour connaître la largeur exacte du fichier FLV. Si Dreamweaver ne peut pas déterminer la largeur, tapez une valeur.

Hauteur

Indique la hauteur (en pixels) du fichier FLV. Cliquez sur le bouton Détecter la taille pour connaître la hauteur exacte du fichier FLV. Si Dreamweaver ne peut pas déterminer la hauteur, tapez une valeur.

Remarque :

Total avec enveloppe indique la largeur et la hauteur du fichier FLV plus la largeur et la hauteur de l'enveloppe sélectionnée.

Respecter les proportions

défaut.

Préserve le rapport hauteur/largeur du composant Flash Video. Cette option est sélectionnée par


Indique si la lecture de la vidéo doit démarrer ou non dès l’ouverture de la page Web.

Rembobinage automatique

la vidéo.

Détermine si le contrôle de lecture doit revenir en position de départ au terme de la lecture de

Inviter les utilisateurs à télécharger Flash Player si nécessaire

Insère du code dans la page de détection de la version de

Flash Player requise pour afficher la vidéo Flash. L'utilisateur peut alors télécharger la dernière version Flash Player, si nécessaire.

Message

Spécifie le message à afficher si l'utilisateur doit télécharger la dernière version de Flash Player pour afficher la vidéo Flash.

4

Cliquez sur OK pour fermer la boîte de dialogue et ajouter le contenu Flash Video à votre page Web.

La commande Insert Flash Video (Insérer une vidéo Flash) génère un fichier SWF de lecteur vidéo et un fichier SWF d'habillage qui serviront à afficher votre contenu vidéo Flash sur une page Web. (Il est parfois nécessaire de cliquer sur le bouton Actualiser pour afficher les nouveaux fichiers dans le panneau Fichiers). Ces fichiers sont stockés dans le même répertoire que le fichier HTML auquel vous ajoutez du contenu vidéo Flash. Lorsque vous chargez la page HTML incluant le contenu Flash Video, Dreamweaver transfère ces fichiers en tant que fichiers dépendants (à condition de cliquer sur Oui dans la boîte de dialogue Placer les fichiers dépendants).

Définition des options pour la vidéo en flux continu

La boîte de dialogue Insérer un fichier Flash Video permet de définir des options pour le téléchargement de vidéo en flux contenu d'un fichier Flash Video (FLV) inséré dans une page Web.

1

Cliquez sur Insertion > Médias > Flash Video ou cliquez sur l'icône Flash Video dans la catégorie Commun de la barre

Insertion.

DREAMWEAVER CS3


256

2

Activez l’option Vidéo en flux continu dans le menu contextuel Type de vidéo.

URI du serveur

Indique le nom du serveur FCS, le nom de l’application et le nom de l’instance dans le formulaire rtmp://www.example.com/app_name/instance_name.

N om du flux

Spécifie le nom du fichier FLV à lire (par exemple, mavideo.flv). L'extension .flv est facultative.

Remarque :

Pour que le lecteur vidéo fonctionne correctement, le fichier FLV doit contenir des métadonnées. Les fichiers FLV créés avec Flash® Communication Server 1.5.2, FLV Exporter version 1.2 et Sorenson Squeeze 4.0 contiennent automatiquement les métadonnées nécessaires.

Enveloppe

Permet de spécifier l'aspect du composant Flash Video. Un aperçu de l’enveloppe sélectionnée apparaît sous le menu contextuel Enveloppe.

Largeur

Indique la largeur (en pixels) du fichier FLV. Cliquez sur le bouton Détecter la taille pour connaître la largeur exacte du fichier FLV. Si Dreamweaver ne peut pas déterminer la largeur, tapez une valeur.

Hauteur

Indique la hauteur (en pixels) du fichier FLV. Cliquez sur le bouton Détecter la taille pour connaître la hauteur exacte du fichier FLV. Si Dreamweaver ne peut pas déterminer la hauteur, tapez une valeur.

Remarque :

Total avec enveloppe indique la largeur et la hauteur du fichier FLV plus la largeur et la hauteur de l'enveloppe sélectionnée.

Respecter les proportions

défaut.

Préserve le rapport hauteur/largeur du composant Flash Video. Cette option est sélectionnée par

Vidéo en temps réel

Indique si le contenu Flash Video est en temps réel ou non. Si vous sélectionnez Vidéo en temps réel,

Flash Player diffuse en continu un flux vidéo provenant de Flash® Media Server. Le nom de la vidéo en temps réel est le nom indiqué dans la zone Nom du flux.

Remarque :

Si vous activez l’option Vidéo en temps réel, seul le contrôle de volume apparaît sur l’enveloppe du composant, car il est impossible d’intervenir sur de la vidéo en temps réel. De plus, les options Lecture automatique et Rembobinage automatique sont sans effet.


Indique si la lecture de la vidéo doit démarrer ou non dès l’ouverture de la page Web.

Rembobinage automatique

la vidéo.

Détermine si le contrôle de lecture doit revenir en position de départ au terme de la lecture de

Délai mise en tampon

Indique le délai (en secondes) de mise en tampon avant le début de la lecture de la vidéo. Par défaut, la mise en tampon est paramétrée sur 0, si bien que la lecture de la vidéo débute instantanément après un clic sur le bouton de lecture. (Si l'option Lecture automatique est activée, la lecture de la vidéo débute dès que la connexion avec le serveur est

établie.) Il peut également être nécessaire de définir un délai de mise en mémoire tampon si vous fournissez une vidéo dont le débit en bits est supérieur à celui de la connexion du visiteur du site ou lorsque le volume de trafic Internet risque d'engendrer des problèmes de bande passante ou de connectivité. Par exemple, si vous souhaitez envoyer 15 secondes de vidéo à la page Web avant que cette dernière ne lise la vidéo, définissez le délai de mise en mémoire tampon sur 15.

Inviter les utilisateurs à télécharger Flash Player si nécessaire

Insère du code dans la page de détection de la version de

Flash Player requise pour afficher la vidéo Flash. L'utilisateur peut alors télécharger la dernière version Flash Player, si nécessaire.

Message

Spécifie le message à afficher si l'utilisateur doit télécharger la dernière version de Flash Player pour afficher la vidéo Flash.

3

Cliquez sur OK pour fermer la boîte de dialogue et ajouter le contenu Flash Video à votre page Web.

La commande Insérer un fichier Flash Video génère un fichier SWF de lecteur vidéo et un fichier SWF d'habillage qui serviront à afficher votre contenu Flash Video sur une page Web. La commande génère également un fichier main.asc que vous devez transférer sur votre serveur Flash Media Server. (Il est parfois nécessaire de cliquer sur le bouton Actualiser pour afficher les nouveaux fichiers dans le panneau Fichiers). Ces fichiers sont stockés dans le même répertoire que le fichier

HTML auquel vous ajoutez du contenu vidéo Flash. Lorsque vous transférez sur votre serveur la page HTML contenant la vidéo Flash Video, n’oubliez pas de transférer également ces fichiers SWF, et de transférer le fichier main.asc sur votre serveur Flash Media Server.

DREAMWEAVER CS3


257

Remarque :

Si un fichier main.asc se trouve déjà sur votre serveur, consultez l’administrateur de ce serveur avant de transférer le fichier main.asc généré par la commande Insérer un fichier Flash Video.

Vous pouvez charger facilement tous les fichiers médias requis en sélectionnant l'espace réservé pour le composant Flash

Video dans la fenêtre Document de Dreamweaver puis en cliquant sur le bouton Transférer multimédia dans l'inspecteur

Propriétés (Fenêtre > Propriétés). Pour voir la liste des fichiers nécessaires, cliquez sur le bouton Afficher les fichiers nécessaires.

Remarque :

Le bouton Transférer multimédia ne transfère pas le fichier HTML qui contient le composant Flash Video.

Détection de la version de Flash Player pour afficher le contenu Flash Video

Après avoir inséré le fichier Flash Video dans une page, vous pouvez insérer du code dans cette page pour déterminer si l'utilisateur dispose de la version de Flash Player requise pour afficher le document Flash Video. S'il ne dispose pas de la bonne version, il lui est alors recommandé de télécharger la dernière version de Flash Player.

Une autre version de Flash Player peut être requise pour afficher du contenu Flash Video selon le codec utilisé pour créer la vidéo. Si la vidéo a été créée avec le codec Sorenson Squeeze, les visiteurs du site nécessitent Flash Player 7 ou une version plus récente pour lire les vidéos en téléchargement progressif ; ils doivent disposer de Flash Player 6.0.79 ou d'une version plus récente pour lire les vidéos en flux continu. Si vous avez créé votre vidéo avec le codec On2, les visiteurs de votre site nécessitent Flash Player 8 ou une version plus récente.

Insertion du code de détection de la version de Flash Player

1

Lors de l'insertion du contenu Flash Video dans une page, sélectionnez l'option Inviter les utilisateurs à télécharger Flash

Player si nécessaire de la boîte de dialogue Insertion d'une vidéo Flash.

Si le contenu Flash Video figure déjà sur votre page, supprimez-le et insérez-le de nouveau en vous assurant que cette option est bien sélectionnée.

Remarque :

Si vous avez inséré un autre contenu Flash Video nécessitant une version plus récente de Flash Player, le code de détection suggère à l'utilisateur de la télécharger.

2

Acceptez le message d'avertissement par défaut ou créez votre propre message.

Si vous décidez de supprimer le contenu Flash Video de votre page, vous n'avez plus besoin du code de détection. Vous pouvez alors utiliser Dreamweaver pour le supprimer.

Suppression du code de détection de la version de Flash Player

❖

Sélectionnez Commandes > Supprimer la détection Flash Video.

Modification ou suppression d'un composant Flash Video

Pour modifier le paramétrage du contenu Flash Video dans votre page Web, vous devez soit sélectionner l’espace réservé du composant Flash Video dans la fenêtre du document Dreamweaver et utiliser l’inspecteur Propriétés, soit supprimer le composant Flash Video et le réinsérer en choisissant Insertion > Médias > Flash Video.

Modification du composant Flash Video

1

Dans la fenêtre du document Dreamweaver, sélectionnez l'espace réservé pour le composant Flash Video en cliquant sur l’icône Flash Video dans le centre de l’espace réservé.

2

Ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés) et apportez les modifications désirées.

Remarque :

Il est impossible de modifier le type de vidéo (de téléchargement progressif à diffusion en continu, par exemple) dans l'inspecteur Propriétés. Pour modifier le type de vidéo, vous devez supprimer le composant Flash Video, puis le réinsérer en choisissant Insertion > Médias > Flash Video.

Suppression du composant Flash Video

❖

Dans la fenêtre du document Dreamweaver, sélectionnez l’espace réservé pour le composant Flash Video et appuyez sur la touche Suppr.

DREAMWEAVER CS3


258

Ajout de séquences audio

Formats de fichiers audio

Il est possible d'ajouter du son à une page Web. Il existe de nombreux types de fichiers et de formats audio, par exemple, les fichiers .wav, .midi et .mp3. Certains facteurs sont à considérer avant de décider d'un format et d'une méthode d'ajout de son : son objectif, son public, la taille du fichier, la qualité du son et les différences entre les navigateurs.

Remarque :

Le traitement des fichiers son est très différent et incohérent suivant les navigateurs. Vous pouvez ajouter un fichier audio à un fichier SWF Flash, puis incorporer le fichier SWF pour assurer une meilleure cohérence.

La liste ci-dessous décrit les formats de fichiers audio les plus courants et présente certains avantages et inconvénients de chaque conception Web.

Le format .midi ou .mid (Musical Instrument Digital Interface)

est destiné à la musique instrumentale. Les fichiers MIDI sont reconnus par plusieurs navigateurs et ne requièrent pas de plug-in. Bien que leur qualité sonore soit très bonne, elle peut varier en fonction de la carte son du visiteur. Un petit fichier MIDI peut offrir un clip audio de longue durée. Les fichiers MIDI ne peuvent pas être enregistrés et doivent être synthétisés sur un ordinateur équipé d'un matériel et d'un logiciel spéciaux.

Le format .wav (Waveform Extension),

qui offre une bonne qualité sonore, est pris en charge par plusieurs navigateurs et ne requiert pas de plug-in. Vous pouvez enregistrer vos propres fichiers WAV à partir d'un CD, d'une cassette, d'un microphone, etc. Toutefois, la taille importante des fichiers limite sérieusement la longueur des clips audio que vous pouvez utiliser dans vos pages Web.

Le format .aif (Audio Interchange File Format ou AIFF),

tout comme le format WAV, offre une bonne qualité sonore, est pris en charge par plusieurs navigateurs et ne requiert pas de plug-in. Vous pouvez également enregistrer des fichiers AIFF à partir d'un CD, d'une cassette, d'un microphone, etc. Toutefois, la taille importante des fichiers limite sérieusement la longueur des clips audio que vous pouvez utiliser dans vos pages Web.

Le format .mp3 (Motion Picture Experts Group Audio, ou MPEG-Audio Layer-3)

est un format compressé qui diminue de manière significative la taille des fichiers audio. La qualité sonore est excellente : si un fichier MP3 est correctement enregistré et compressé, sa qualité peut être équivalente à celle d'un CD. La technologie MP3 permet de lire le fichier « en transit » afin que les visiteurs n'aient pas à attendre le téléchargement du fichier entier avant de pouvoir l'écouter. Mais le fichier est plus gros qu'un fichier Real Audio, ce qui signifie que le téléchargement d'une chanson entière peut s'avérer assez long si l'on utilise une connexion à Internet par modem. Pour lire des fichiers MP3, les visiteurs doivent télécharger et installer une application d'aide ou un plug-in tel que QuickTime, Windows Media Player ou RealPlayer.

Le format .ra, .ram, .rpm ou Real Audio

offre un degré très élevé de compression avec une taille de fichier inférieure à celle du format MP3. Le téléchargement de fichiers de chanson peut être effectué dans un laps de temps raisonnable. Les fichiers du téléchargement. Les visiteurs doivent télécharger et installer l'application d'aide ou le plug-in RealPlayer afin de lire ces fichiers.

.qt, .qtm, .mov ou Quick

T ime

est un format à la fois audio et vidéo mis au point par Apple Computer. QuickTime est inclus dans le système d'exploitation des ordinateurs Apple Macintosh. Il est utilisé par la plupart des applications Macintosh utilisant l'audio, la vidéo ou des animations. Les PC aussi peuvent lancer les fichiers au format QuickTime, mais cela nécessite le pilote approprié. QuickTime prend en charge la plupart des formats de codage, notamment Cinepak, JPEG et MPEG.

Remarque :

En plus des formats les plus courants, mentionnés ci-dessus, il existe de nombreux formats audio et vidéo utilisables sur le Web. Si vous rencontrez un fichier audio ou vidéo dont le format vous est inconnu, retrouvez son créateur afin d'apprendre comment l'utiliser au mieux.

Voir aussi

« Insertion et modification d'objets multimédias » à la page 259

DREAMWEAVER CS3


259

Lien vers un fichier audio

Un lien vers un fichier audio est une méthode simple et efficace pour ajouter du son à une page Web. Cette méthode d'incorporation de fichiers audio permet aux visiteurs de choisir s'ils veulent écouter le fichier et rend le fichier disponible pour un plus vaste public.

1

Sélectionnez le texte ou l'image à utiliser comme lien vers le fichier audio.

2

Dans l'inspecteur Propriétés, cliquez sur l'icône de dossier, à côté de la zone Lien, pour rechercher le fichier audio, ou tapez le nom et le chemin d'accès au fichier dans la zone Lien.

Incorporation d'un fichier son

L'opération consistant à incorporer un son intègre le fichier audio directement dans la page, mais le son est uniquement lu si les visiteurs du site disposent du plug-in approprié pour le fichier audio choisi. Incorporez des fichiers si vous souhaitez utiliser le son en tant que musique de fond ou pour contrôler le volume, l'apparence du lecteur sur votre page ou encore les points de démarrage et d'arrêt du fichier audio.

Lorsque vous incorporez des fichiers son à vos pages Web, réfléchissez bien à l'usage qu'il est possible d'en faire et de quelle façon les visiteurs pourraient s'en servir. Proposez toujours une commande permettant d'activer ou de couper le son, au cas où certains visiteurs ne souhaiteraient pas entendre le contenu audio.

1

En mode Création, placez le point d'insertion à l'endroit où vous souhaitez incorporer le fichier et procédez de l'une des manières suivantes :

•

Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Médias et sélectionnez l'icône Plug-in dans le menu.

•

Sélectionnez Insertion > Médias > Plug-in.

2

Dans l'inspecteur Propriétés, cliquez sur l'icône de dossier, à côté de la zone Lien, pour rechercher le fichier audio, ou tapez le nom et le chemin d'accès au fichier dans la zone Lien.

3

Entrez la largeur et la hauteur en saisissant les valeurs dans les zones de texte appropriées ou en redimensionnant l'espace réservé au plug-in dans la fenêtre de document.

Ces valeurs déterminent la taille à laquelle les contrôles audio sont affichés dans le navigateur.

Voir aussi

« Insertion du contenu d'un plug-in Netscape Navigator » à la page 262

Ajout d'autres objets multimédias

Insertion et modification d'objets multimédias

Vous pouvez insérer des fichiers SWF ou des objets Flash, des animations QuickTime ou Shockwave, des applets Java, des contrôles ActiveX ou d'autres objets audio ou vidéo dans un document Dreamweaver. Si vous insérez des attributs d'accessibilité avec un objet multimédia, vous pouvez définir les attributs d'accessibilité et modifier ces valeurs dans le code HTML.

1

Placez le point d'insertion dans la fenêtre de document à l'endroit où vous souhaitez insérer l'objet.

2

Pour insérer l'objet souhaité, procédez de l'une des manières suivantes :

•

Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Médias et sélectionnez l'icône correspondant au type d'objet que vous souhaitez insérer.

•

Choisissez l'objet approprié dans le sous-menu Insertion > Médias.

•

Si l'objet à insérer n'est pas un objet Flash, Shockwave, Applet ou ActiveX, choisissez Plug-in dans le sous-menu

Insertion > Médias.

Une boîte de dialogue permet alors de choisir un fichier source et de spécifier certains paramètres de l'objet multimédia.

DREAMWEAVER CS3


260

Pour éviter que ces boîtes de dialogue ne s'affichent, choisissez Edition > Préférences > Général (Windows) ou

Dreamweaver > Préférences > Général (Macintosh) et désactivez l'option Afficher la boîte de dialogue lors de l'insertion d'objets. Pour remplacer la préférence d'affichage des boîtes de dialogue, maintenez enfoncée la touche Ctrl (Windows) ou

Option (Macintosh) tout en insérant l'objet. Par exemple, pour insérer un espace réservé pour une animation Shockwave sans spécifier le fichier correspondant, maintenez la touche Ctrl ou Option enfoncée et cliquez sur le bouton Shockwave à partir du menu déroulant Support de la catégorie Commun de la barre Insertion ou sélectionnez Insertion > Médias > Shockwave.

3

Renseignez la boîte de dialogue Sélectionner un fichier ou Insérer Flash, puis cliquez sur OK.

Remarque :

La boîte de dialogue Attributs d'accessibilité s'affiche si vous avez décidé d'afficher les attributs lors de l'insertion de médias dans la boîte de dialogue Edition > Préférences.

4

Définissez les attributs d'accessibilité.

Remarque :

Vous pouvez également modifier les attributs d'un objet multimédia. Pour ce faire, sélectionnez l'objet et modifiez le code HTML en mode Code, ou cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh), puis sélectionnez Modifier le code de la balise.

T itre

Entrez un titre pour l'objet multimédia.

Clé d'accès

Entrez un équivalent clavier (une lettre) dans la zone de texte pour sélectionner l'objet de formulaire dans le navigateur. Cela permet aux visiteurs du site d'utiliser la touche Ctrl (Windows) conjointement à la clé d'accès pour accéder

à l'objet. Par exemple, si vous entrez B comme Clé d'accès, utilisez Ctrl+B pour sélectionner l'objet dans le navigateur.

O rdre des tabulations

Entrez un nombre pour définir l'ordre de tabulation de l'objet. La définition d'un ordre d'apparition peut se révéler utile lorsque la page contient d'autres liens et d'autres objets de formulaire et que vous voulez que l'utilisateur passe de l'un à l'autre dans un ordre particulier. Si vous définissez un ordre d'apparition pour un objet, assurez-vous de le faire également pour tous les autres objets.

5

Cliquez sur OK pour insérer l'objet multimédia.

Remarque :

Si vous cliquez sur Annuler, un espace réservé pour l'objet multimédia s'affiche dans le document, mais

Dreamweaver ne lui associe ni balises ni attributs d'accessibilité.

Pour spécifier un fichier source, définir les dimensions et d'autres paramètres et attributs, utilisez l'inspecteur Propriétés pour chaque objet. Vous pouvez modifier les attributs d'accessibilité d'un objet.

Voir aussi

« Optimisation de l'espace de travail pour la conception de pages accessibles » à la page 677

« Insertion du contenu d'un plug-in Netscape Navigator » à la page 262

Lancement d'un éditeur externe pour des fichiers multimédia

Vous pouvez lancer un éditeur externe depuis Dreamweaver pour modifier la plupart des fichiers multimédias. Vous pouvez également décider de l'éditeur que doit lancer Dreamweaver pour modifier le fichier.

1

Assurez-vous que le type du fichier multimédia est associé à un éditeur sur votre système.

fichiers/Editeurs dans la liste Catégorie. Cliquez sur l'extension de fichier dans la colonne Extensions pour consulter le ou les éditeurs associés dans la colonne Editeurs. Vous pouvez modifier l'éditeur associé à un type de fichier.

2

Double-cliquez sur le fichier multimédia dans le panneau Fichiers pour lancer l'éditeur externe et ouvrir le fichier.

vous double-cliquez sur un fichier image, par exemple, Dreamweaver ouvre le fichier dans l'application principale de retouche d'image définie, par exemple Adobe Fireworks.

3

Si vous ne souhaitez pas utiliser l'éditeur externe principal pour modifier le fichier, vous pouvez effectuer l'une des opérations suivantes pour utiliser un autre éditeur :

•


(Macintosh) sur le nom du fichier concerné et sélectionnez Ouvrir avec dans le menu qui s'affiche.

DREAMWEAVER CS3


261

•

En mode Création, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée

(Macintosh) sur l'élément multimédia de la page affichée, puis sélectionnez Modifier avec dans le menu contextuel.

Spécification de l'éditeur à lancer depuis Dreamweaver

Vous pouvez définir l'éditeur à lancer par Dreamweaver pour modifier un type de fichier et pour ajouter ou supprimer des types de fichiers reconnus par Dreamweaver.

Indication explicite des éditeurs externes à lancer pour un type de fichier donné

1

Choisissez Edition

Les extensions de fichiers, par exemple .gif, .wav et .mpg, apparaissent dans la liste de gauche, sous le titre Extensions. Les

éditeurs associés à une extension apparaissent dans la liste de droite, sous le titre Editeurs.

2

Sélectionnez l'extension de type de fichier dans la liste Extensions, puis effectuez l'une des opérations suivantes :

•

Pour associer un nouvel éditeur au type de fichier, cliquez sur le bouton plus (+), au-dessus de la liste Editeurs et renseignez la boîte de dialogue qui s'affiche.

Par exemple, sélectionnez l'icône de l'application Acrobat pour l'associer au type de fichier.

•

Pour faire d'un éditeur l'éditeur principal pour un type de fichier donné (c'est-à-dire celui qui s'ouvre automatiquement lorsque vous double-cliquez sur un fichier de ce type dans le panneau Fichiers), sélectionnez cet éditeur dans la liste

Editeurs, puis cliquez sur Rendre principal.

•

Pour qu'un éditeur ne soit plus lié à un type de fichier donné, sélectionnez cet éditeur dans la liste Editeurs et cliquez sur le bouton moins (-) au-dessus de la liste.

Ajout d'un nouveau type de fichier et un éditeur associé

1

Cliquez sur le bouton plus (+), au-dessus de la liste Extensions et entrez une extension de type de fichier (saisissez le point précédent l'extension) ou plusieurs extensions liées et séparées par des espaces.

Vous pouvez, par exemple, entrer

.xml .xsl

si vous souhaitez associer ces fichiers avec un éditeur XML installé sur votre système.

2

Pour sélectionner un éditeur pour le type de fichier, cliquez sur le bouton plus (+), au-dessus de la liste Editeurs et renseignez la boîte de dialogue qui s'affiche.

Suppression d'un type de fichier

❖

Sélectionnez le type de fichier dans la liste Extensions et cliquez sur le bouton moins (-) au-dessus de la liste Extensions

Remarque :

L'annulation de la suppression d'un type de fichier étant impossible, soyez prudent lors d'une telle opération.

Utilisation des Design

N

otes avec les objets multimédias

Comme pour la plupart des objets dans Dreamweaver, vous pouvez ajouter des Design Notes à un objet multimédia. Les

Design Notes sont des notes associées à un fichier particulier et stockées dans un fichier séparé. Les Design Notes vous permettent de conserver des informations supplémentaires sur les documents, par exemple, des commentaires sur l'état des fichiers ou le nom des fichiers source des images.

1

Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur l'objet dans la fenêtre de document.

Remarque :

Vous devez définir votre site avant d'ajouter des Design Notes à un objet.

2

Cliquez sur Design Notes dans le menu contextuel.

3

Entrez les informations souhaitées dans la Design Note.

Vous pouvez également ajouter une Design Note à un objet multimédia à partir du panneau Fichiers en sélectionnant le fichier, en affichant le menu contextuel, puis en choisissant l'option Design Notes dans ce dernier.

DREAMWEAVER CS3


262

Voir aussi

« Activation et désactivation des Design Notes pour un site » à la page 99

« Stockage des informations sur les fichiers dans des Design Notes » à la page 98

Insertion d'animations Shockwave

Vous pouvez utiliser Dreamweaver pour insérer des animations Shockwave dans vos documents. Adobe® Shockwave®, une norme pour les éléments multimédia interactifs sur le Web, est un format compressé qui autorise le téléchargement rapide des fichiers multimédia créés dans Macromedia® Director® d'Adobe , ainsi que leur lecture dans la plupart des navigateurs.

1

Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous souhaitez insérer une animation Shockwave et procédez de l'une des manières suivantes :

• Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Médias et sélectionnez l'icône Shockwave dans le menu.

• Choisissez Insertion > Médias > Shockwave.

2

Dans la boîte de dialogue qui s'affiche, sélectionnez un fichier d'animation.

3

Dans l'inspecteur Propriétés, tapez la largeur et la hauteur de l'animation dans les zones L et H.

Voir aussi

« Insertion et aperçu de contenu Flash » à la page 246

Ajout de contenu vidéo (non Flash)

Plusieurs méthodes vous permettent d'ajouter une vidéo à votre page Web et vous pouvez faire appel à divers formats.

L'utilisateur peut télécharger les vidéos ou elles peuvent être diffusées et lues pendant leur téléchargement.

1

Placez le fichier vidéo dans le dossier de votre site.

Ces clips se présentent souvent au format AVI ou MPEG.

2

Insérez un lien vers la séquence ou incorporez-la dans votre page.

texte et cliquez sur l'icône de dossier dans l'inspecteur de sélections. Recherchez le fichier vidéo et sélectionnez-le.

Remarque :

L'utilisateur doit télécharger une application d'aide (un plug-in) pour visualiser les formats lus en transit, comme

Real Media, QuickTime et Windows Media.

Insertion du contenu d'un plug-in

N

etscape

N

avigator

Vous pouvez créer du contenu, par exemple une séquence vidéo QuickTime pour un plug-in Netscape Navigator, puis utiliser Dreamweaver pour insérer ce contenu dans un document HTML. Par exemple, RealPlayer et QuickTime sont des plug-ins par défaut, alors que les fichiers MP3 et les animations QuickTime sont des fichiers de contenu.

Vous pouvez afficher un aperçu des animations qui font directement appel aux plug-ins Netscape Navigator dans le mode

Création dans la fenêtre de document. Vous pouvez lire simultanément tous les éléments des plug-ins pour savoir comment la page s'affichera sur le poste de l'utilisateur ou lire chaque élément individuellement pour vous assurer que vous avez incorporé le bon élément multimédia.

Remarque :

Il n'est pas possible d'afficher un aperçu des films ou animations basées sur des contrôles ActiveX.

Après avoir inséré le contenu d'un plug-in Netscape Navigator, utilisez l'inspecteur Propriétés pour en définir les paramètres. Pour afficher les propriétés suivantes dans l'inspecteur Propriétés, sélectionnez un objet plug-in Netscape

Navigator.

Lors de son ouverture, l'inspecteur Propriétés affiche les propriétés les plus couramment utilisées. Cliquez sur la flèche d'agrandissement, dans le coin inférieur droit, pour afficher toutes les propriétés.

DREAMWEAVER CS3


263

Insertion du contenu d'un plug-in

N etscape

N avigator et définition de ses propriétés

1

Dans la fenêtre de document (mode Création), placez le point d'insertion à l'endroit où vous souhaitez insérer le contenu, puis procédez de l'une des manières suivantes :

• Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Médias et sélectionnez l'icône Plug-in dans le menu.

• Sélectionnez Insertion > Médias > Plug-in.

2

Dans la boîte de dialogue qui s'affiche, sélectionnez un fichier de contenu pour un plug-in Netscape Navigator, puis cliquez sur OK.

3

Définissez les options du plug-in dans l'inspecteur Propriétés.

N om

Spécifie un nom permettant d'identifier le plug-in dans un script. Tapez un nom dans la zone de texte sans titre, à l'extrême gauche de l'inspecteur Propriétés.

L et H

Spécifient, en pixels, la largeur et la hauteur allouées à l'objet sur la page.

Src

Spécifie le fichier des données source. Cliquez sur l'icône de dossier pour rechercher un fichier ou entrez un nom de fichier.

URL du plug-in

Spécifie l'URL pour l'attribut pluginspace

. Indiquez l'URL complète du site à partir duquel les utilisateurs peuvent télécharger le plug-in. Si l'utilisateur qui consulte votre page ne possède pas le plug-in nécessaire, le navigateur essaie de le télécharger à partir de cette URL.

Alignement



Spécifient la quantité d'espace blanc, en pixels, au-dessus, au-dessous et de chaque côté du plug-in.

Bordure

Spécifie la largeur de la bordure autour du plug-in.

Paramètres

Ouvre une boîte de dialogue permettant d'indiquer des paramètres supplémentaires à transmettre au plug-in

Netscape Navigator. Nombreux sont les plug-ins qui répondent à des paramètres particuliers. Le plug-in Flash, par exemple, inclut des paramètres pour bgcolor

, salign

et scale

.

Vous pouvez également afficher les attributs affectés au plug-in sélectionné en cliquant sur le bouton Attribut. Vous pouvez modifier, ajouter ou supprimer des attributs tels que la hauteur et la largeur dans cette boîte de dialogue.

Lecture de contenu d'un plug-in dans la fenêtre de document

1

Insérez un ou plusieurs éléments multimédia en choisissant la commande Insertion > Médias > Shockwave, Insertion >

Médias > Flash ou Insertion > Médias > Plug-in.

2


•

Sélectionnez un des éléments multimédia que vous avez insérés, puis choisissez la commande Affichage

Lire ou cliquez sur le bouton de lecture de l'inspecteur Propriétés.

•

Choisissez la commande Affichage > Plug-ins > Lire tout pour lire tous les éléments multimédia de la page sélectionnée qui font appel à des plug-ins.

Remarque :

L'option Lire tout s'applique uniquement au document actif. Elle ne s'applique pas aux autres documents dans un ensemble de cadres par exemple.

Arrêt de la lecture du contenu d'un plug-in

❖

Sélectionnez un élément multimédia, puis choisissez la commande Affichage > Plug-ins > Arrêter ou cliquez sur le bouton d'arrêt dans l'inspecteur Propriétés.

Vous pouvez également sélectionner Affichage > Plug-ins > Arrêter tout pour interrompre la lecture de tous les contenus des plug-ins.

DREAMWEAVER CS3


264

Dépannage des plug-ins de

N

etscape

N

avigator

Vous avez suivi les étapes permettant de lire le contenu d'un plug-in dans la fenêtre de document, mais constatez qu'une partie ne fonctionne pas. Essayez l'opération suivante :

•

Vérifiez que le plug-in associé est bien installé sur votre ordinateur et que sa version est compatible avec le contenu chargé.

•

Ouvrez le fichier Configuration/Plugins/UnsupportedPlugins.txt dans un éditeur de texte et vérifiez si le plug-in posant problème est répertorié. Ce fichier conserve la trace des plug-ins étant la source de problèmes dans Dreamweaver et qui ne sont donc pas pris en charge. Si vous constatez des problèmes avec un plug-in particulier, il est souhaitable de l'ajouter

à ce fichier.

•

Vérifiez que vous avez suffisamment de mémoire. Certains plug-ins nécessitent de 2 à 5 Mo de mémoire supplémentaire pour fonctionner.

Insertion d'un contrôle ActiveX

Vous pouvez ajouter un contrôle ActiveX à votre page. Les contrôles ActiveX (autrefois appelés commandes OLE) sont des composants réutilisables, un peu comme des applications miniatures, qui peuvent fonctionner comme des plug-ins de navigateurs. Ils fonctionnent dans Internet Explorer sous Windows, mais pas sur Macintosh ni dans Netscape Navigator.

L'objet ActiveX de Dreamweaver vous permet de fournir les attributs et paramètres d'un contrôle ActiveX chargé par le navigateur du visiteur.

Une fois un objet ActiveX inséré, utilisez l'inspecteur Propriétés pour définir les attributs de la balise object

et les paramètres du contrôle ActiveX. Cliquez sur Paramètres dans l'inspecteur Propriétés pour indiquer des noms et des valeurs de propriétés qui n'apparaissent pas dans l'inspecteur Propriétés. Il n'existe pas de format standard unanimement accepté pour les paramètres des contrôles ActiveX. Consultez la documentation sur le contrôle ActiveX que vous utilisez pour savoir quels paramètres choisir.

❖

Dans la fenêtre de document, positionnez le curseur à l'emplacement où insérer le contenu et procédez de l'une des manières suivantes :

•

Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Médias et sélectionnez l'icône ActiveX .

•

Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Médias et sélectionnez l'icône ActiveX. Lorsque l'icône ActiveX s'affiche dans la barre Insertion, vous pouvez la faire glisser jusqu'à la fenêtre du document.

•

Choisissez Insertion > Médias > ActiveX. Une icône indique l'emplacement de la page où apparaîtra le contrôle ActiveX dans Internet Explorer.

Propriétés d'ActiveX


N om

Spécifie un nom qui permet d'identifier l'objet ActiveX pour les scripts. Tapez un nom dans la zone de texte sans titre,

à l'extrême gauche de l'inspecteur Propriétés.

L et H

Spécifient la largeur et la hauteur de l'objet, en pixels.

ID de classe

Identifie le contrôle ActiveX pour le navigateur. Tapez la valeur ou choisissez-en une dans le menu contextuel.

Lorsque la page est chargée, le navigateur utilise l'ID de classe pour localiser le contrôle ActiveX requis par l'objet ActiveX associé à la page. Si le navigateur ne peut pas localiser le contrôle ActiveX spécifié, il essaie de le télécharger à partir de l'emplacement spécifié dans le champ Base.

Incorporer

Ajoute une balise embed

dans la balise object

pour le contrôle ActiveX. S'il existe un plug-in Netscape Navigator

équivalent au contrôle ActiveX, la balise embed

active ce plug-in. Dreamweaver affecte les valeurs que vous avez saisies comme propriétés d'objets ActiveX aux plug-ins équivalents de Netscape Navigator.

Alignement


Paramètres


à l'objet ActiveX. Nombreux sont les contrôles ActiveX qui possèdent des paramètres particuliers.

DREAMWEAVER CS3


265

Src

Définit le fichier de données à utiliser pour un plug-in Netscape Navigator, si l'option Incorporer est activée. Si vous n'entrez pas de valeur, Dreamweaver essaie d'en déterminer une à partir des propriétés d'ActiveX entrées précédemment.


Spécifient la quantité d'espace blanc, en pixels, au-dessus, au-dessous et de chaque côté de l'objet.

Base

Spécifie l'URL qui contient le contrôle ActiveX. Internet Explorer télécharge le contrôle ActiveX à partir de cet emplacement s'il n'a pas été installé sur le système du visiteur. Si vous ne précisez pas le paramètre Base et que le contrôle

ActiveX nécessaire n'est pas déjà installé sur l'ordinateur du visiteur, son navigateur ne pourra pas afficher l'objet ActiveX.

Img sec.

Spécifie une image à afficher si le navigateur ne prend pas en charge la balise object

. Cette option n'est disponible que si l'option Incorporer est désélectionnée.

Données

Spécifie un fichier de données que le contrôle ActiveX doit charger. De nombreux contrôles ActiveX, tels que

Shockwave et RealPlayer, n'utilisent pas ce paramètre.

Insertion d'une applet Java

Vous pouvez insérer une applet Java dans un document HTML à l'aide de Dreamweaver. Java est un langage de programmation qui permet de développer des applications légères ( applets ) pouvant être incorporées dans des pages Web.

Une fois une applet Java insérée, utilisez l'inspecteur Propriétés pour définir les paramètres. Sélectionnez une applet Java pour afficher ses propriétés dans l'inspecteur Propriétés.

1

Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous souhaitez insérer l'applet, puis procédez de l'une des manières suivantes :

•

Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Médias et sélectionnez l'icône Applet .

•

Choisissez Insertion > Médias > Applet.

2

Sélectionnez un fichier contenant une applet Java.

Propriétés des applets Java


N om

Spécifie un nom permettant d'identifier l'applet dans un script. Tapez un nom dans la zone de texte sans titre, à l'extrême gauche de l'inspecteur Propriétés.

L et H

Spécifient la largeur et la hauteur de l'applet, en pixels.

Code

Spécifie le fichier contenant le code Java de l'applet. Cliquez sur l'icône de dossier pour rechercher un fichier ou entrez un nom de fichier.

Base

Identifie le dossier contenant l'applet sélectionnée. Lorsque vous choisissez une applet, cette zone de texte est renseignée automatiquement.

Alignement


Sec

Spécifie un contenu de remplacement (généralement une image) à afficher si le navigateur de l'utilisateur ne prend pas en charge les applets Java ou si Java y est désactivé. Si vous tapez du texte, Dreamweaver insère le texte comme étant la valeur de l'attribut alt

de l'applet. Si vous sélectionnez une image, Dreamweaver insère une balise img

entre les balises applet d'ouverture et de fermeture.

Remarque :

Pour spécifier un contenu de remplacement visible dans Netscape Navigator (avec JavaScript désactivé) comme dans Lynx (navigateur basé sur le texte), sélectionnez une image, puis ajoutez manuellement un attribut

alt

à la balise

img

dans l'inspecteur de code.


Spécifient la quantité d'espace blanc, en pixels, au-dessus, au-dessous et de chaque côté de l'applet.

Paramètres


à l'applet. Nombreuses sont les applets qui répondent à des paramètres particuliers.

DREAMWEAVER CS3


266

Utilisation de comportements pour contrôler les objets multimédias

Vous pouvez ajouter des comportements à votre page pour commencer ou arrêter la lecture de divers objets multimédia.

Contrôler Shockwave ou Flash

Permet de lire, d'arrêter, de rembobiner ou d'atteindre un cadre dans une animation

Shockwave ou un fichier SWF Flash.

Lire le son

la souris.

Permet de jouer un son. Vous pouvez ainsi jouer un effet sonore dès que l'utilisateur survole un lien à l'aide de

Vérifier le Plug-in

Permet de vérifier si les visiteurs de votre site disposent du plug-in requis, puis de les diriger vers différentes URL, en fonction du résultat. Cela s'applique uniquement aux plug-ins de Netscape Navigator, car ce comportement ne vérifie pas les contrôles ActiveX.

Voir aussi

« Application du comportement Contrôler Shockwave ou Flash » à la page 338

« Application du comportement Lire le son » à la page 342

« Application du comportement Vérifier le plug-in » à la page 338

Utilisation de paramètres pour contrôler des objets multimédia

Définissez les paramètres spéciaux pour contrôler les fichiers Shockwave et Flash SWF, les contrôles ActiveX, les plug-ins

Netscape Navigator et les applets Java. Les paramètres sont utilisés avec les balises object

, embed

et applet

. Les paramètres définissent des attributs spécifiques aux différents types d'objets. Par exemple, un objet Flash peut disposer du paramètre qualité

<paramname="quality"value="best">

pour la balise objet. La boîte de dialogue Paramètre est disponible à partir de l'inspecteur Propriétés. Consultez la documentation sur l'objet que vous utilisez pour connaître les paramètres requis.

Remarque :

Il n'existe pas de standard unanimement accepté pour l'identification des fichiers de données des contrôles

ActiveX. Consultez la documentation sur le contrôle ActiveX que vous utilisez pour savoir quels paramètres choisir.

Saisie du nom et de la valeur d'un paramètre

1

Sélectionnez un objet pouvant être associé à des paramètres (par exemple, une animation Shockwave, un contrôle

ActiveX, un plug-in Netscape Navigator ou une applet Java) dans la fenêtre de document.

2

Ouvrez la boîte de dialogue en procédant de l'une des manières suivantes :

•

Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur l'objet et cliquez sur Paramètres dans le menu contextuel.

•

Ouvrez l'inspecteur Propriétés s'il n'est pas déjà ouvert, puis cliquez sur le bouton Paramètres situé dans la section inférieure de l'inspecteur Propriétés. Assurez-vous que l'inspecteur Propriétés est développé.

3

Cliquez sur le bouton Plug (+) et entrez le nom et la valeur du paramètre dans les colonnes appropriées.

Suppression d'un paramètre

❖

Sélectionnez un paramètre et cliquez sur le bouton Moins (-).

Réorganisation de paramètres

❖

Sélectionnez un paramètre et utilisez les boutons fléchés vers le haut ou vers le bas.

Après avoir défini un site, vous pouvez relier les pages entre elles. Vous pouvez créer des liens HTML, des menus de reroutage, des barres de navigation et des cartes graphiques.

A propos des liens et de la navigation

A propos des liens

Une fois que vous avez défini un site Dreamweaver dans lequel stocker les documents de votre site Web et que vous avez créé des pages HTML, il vous reste à établir des connexions entre vos documents et d'autres types de documents.

Dreamweaver propose plusieurs méthodes pour créer des liens vers des documents, des images, des fichiers multimédias ou des logiciels pouvant être téléchargés. Vous pouvez établir des liens vers n'importe quel texte ou n'importe quelle image d'un document, même s'ils se trouvent dans un en-tête, une liste, un tableau, un élément à positionnement absolu (élément

PA) ou un cadre.

La carte du site fournit une représentation visuelle de la manière dont vos fichiers sont liés. Dans la carte du site, vous pouvez ajouter de nouveaux documents à votre site, créer et supprimer des liens entre des documents et vérifier les liens entre des fichiers interdépendants.

Il existe différentes méthodes de création et de gestion de liens. Certains concepteurs de pages Web préfèrent créer des liens vers des pages ou des fichiers qui n'existent pas encore, alors que d'autres préfèrent créer d'abord tous les fichiers et pages, puis ajouter les liens. Une autre méthode de gestion des liens consiste à créer des pages de type « espace réservé » qui vous permettent d'ajouter des liens rapidement et de les vérifier avant de terminer toutes les pages de votre site.

Voir aussi

« Utilisation des cartes de site » à la page 49


Emplacements et chemins d'accès des documents

Pour créer des liens, il est indispensable de comprendre le chemin d'accès qui s'établit entre le document à partir duquel vous établissez un lien et le document pointé par ce lien.

Chaque page Web possède une adresse unique, appelée URL (Uniform Resource Locator) Cependant, lorsque vous créez un lien local (entre deux documents du même site), vous n'avez en général pas besoin de spécifier l'URL complète du document vers lequel vous créez le lien ; il est préférable d'indiquer un chemin relatif, à partir du document actif ou de la racine du site.

Il existe trois types de chemins d'accès de liaison :

•

Chemins absolus (par exemple, http://www.adobe.com/support/dreamweaver/contents.html).

•

Chemins relatifs au document (par exemple dreamweaver/contents.html).

•

Chemins relatifs à la racine du site (par exemple /support/dreamweaver/contents.html).

Dreamweaver vous permet de choisir aisément le type de chemin à créer pour vos liens.

Remarque :

Il est préférable d'utiliser le type de lien qui vous convient le mieux, qu'il soit relatif au site ou au document.

L'exploration des liens, contrairement à la saisie des chemins, garantit que vous entrez toujours le chemin correct.

267

DREAMWEAVER CS3


268

Chemins absolus

Les chemins absolus indiquent l'URL complète du document lié, y compris le protocole à utiliser (en général http:// pour les pages Web), par exemple, http://www.adobe.com/support/dreamweaver/contents.html.

Vous devez utiliser un chemin absolu lorsque vous créez un lien vers un fichier situé en dehors du site courant. Vous pouvez

également utiliser des liens de chemins absolus pour les liens locaux (vers des documents sur le même site), mais cette approche est déconseillée. Si vous déplacez le site vers un autre domaine, tous les liens de chemins absolus locaux seront rompus. De plus, l'utilisation de chemins relatifs pour les liens locaux offre une plus grande souplesse si vous devez déplacer des fichiers au sein de votre site.

Remarque :

Lors de l'insertion d'images (et non de liens), vous pouvez utiliser un chemin absolu vers une image qui réside sur un serveur distant (c'est-à-dire, une image qui n'est pas disponible sur le disque dur local).

Chemins relatifs au document

Les chemins relatifs au document sont généralement préférables pour les liens locaux dans la plupart des sites Web. Ils sont particulièrement utiles lorsque le document actif et le document pointé par le lien se trouvent dans le même dossier et le resteront vraisemblablement. Vous pouvez également utiliser un chemin relatif au document pour pointer sur un document situé dans un autre dossier, en indiquant le chemin entre le document actif et le document lié, au sein de la hiérarchie de dossiers.

Indiquer un chemin relatif au document consiste tout simplement à laisser de côté la partie du chemin absolu qui est identique pour les deux documents, en n'indiquant que la partie du chemin qui diffère.

Par exemple, supposons que la structure de votre site soit la suivante :

•

Pour établir un lien depuis contents.html vers hours.html (ces deux fichiers sont dans le même dossier), utilisez le chemin relatif hours.html :

•

Pour établir un lien vers tips.html (qui se trouve dans le sous-dossier « ressources/tips.html. A chaque barre oblique (/..), vous descendez d'un niveau dans la hiérarchie des dossiers.

•

Pour établir un lien vers index.html (qui se trouve dans le dossier parent, un niveau au-dessus de contents.html), utilisez le chemin relatif ../index.html. A chaque barre oblique (../), vous montez d'un niveau dans la hiérarchie des dossiers.

DREAMWEAVER CS3


269

•

Pour établir un lien vers catalog.html (qui se trouve dans un autre sous-dossier du dossier parent), utilisez le chemin relatif ../produits/catalog.html. Ici, la séquence ../ fait remonter au dossier parent, et produits/ fait redescendre dans le

Lorsque vous déplacez des fichiers sous la forme d'un groupe (par exemple, lorsque vous déplacez un dossier entier, afin que tous les fichiers au sein de ce dossier conservent les mêmes chemins relatifs entre eux), il n'est pas nécessaire de mettre

à jour les liens relatifs au document entre ces fichiers. Toutefois, si vous déplacez individuellement un fichier qui contient des liens relatifs au document, ou un fichier sur lequel pointe un lien relatif à partir d'un autre document, il est nécessaire de mettre ces liens à jour (si vous déplacez ou renommez des fichiers dans le panneau Fichiers, Dreamweaver met automatiquement à jour tous les liens concernés).

Voir aussi



Chemins relatifs à la racine du site

Les chemins relatifs à la racine du site représentent le chemin d'accès à un document à partir du dossier racine du site. Ces chemins peuvent être utiles si vous travaillez sur un grand site Web qui utilise plusieurs serveurs ou un seul serveur qui est l'hôte de plusieurs sites. Toutefois, si vous n'êtes pas familier avec ce type de chemin, adoptez plutôt les chemins relatifs au document.

Un chemin relatif à la racine commence par une barre oblique, qui représente le dossier racine du site. Par exemple,

/support/tips.html est le chemin relatif à la racine d'un fichier (tips.html) situé dans le sous-dossier « support » de la racine du site.

Un chemin relatif à la racine représente souvent le meilleur moyen d'indiquer les liens si vous déplacez fréquemment des fichiers HTML d'un dossier à un autre dans votre site Web. Lorsque vous déplacez un document qui contient des liens relatifs à la racine du site, il n'est pas nécessaire de modifier les liens ; par exemple, si vos fichiers HTML utilisent des liens relatifs à la racine du site pour les fichiers dépendants (les images en particulier), les liens des fichiers dépendants restent valides si vous déplacez les fichiers HTML.

Toutefois, si vous déplacez ou renommez les documents sur lesquels pointent des liens relatifs à la racine du site, vous devrez mettre ces liens à jour, même si les chemins relatifs de ces documents entre eux n'ont pas changé. Par exemple, si vous déplacez un dossier, vous devez mettre à jour tous les liens relatifs à la racine du site vers les fichiers que ce dossier contient

(si vous déplacez ou renommez des fichiers dans le panneau Fichiers, Dreamweaver met automatiquement à jour tous les liens concernés).

Voir aussi


Etablissement de liens

Liens entre fichiers et documents

Avant de créer des liens, assurez-vous de bien comprendre le fonctionnement des chemins relatifs au document, des chemins relatifs à la racine du site et des chemins absolus. Vous pouvez créer plusieurs types de liens dans un document :

• Un lien vers un autre document ou fichier, tel que le fichier d'une image, d'une animation ou d'un son

• Un lien vers une ancre nommée, qui permet de sauter à un emplacement spécifique au sein d'un document

• Un lien de courriel, qui crée un courriel vierge avec l'adresse du destinataire déjà indiquée.

• Des liens nuls et de script, qui permettent d'affecter des comportements à un objet ou de créer un lien qui exécute un code JavaScript

DREAMWEAVER CS3


270

Utilisez l'inspecteur Propriétés et l'icône Pointer vers un fichier pour créer des liens à partir d'une image, d'un objet ou de texte vers un autre document ou fichier.

Dreamweaver crée les liens vers d'autres pages de votre site à l'aide de chemins relatifs au document. Vous pouvez toutefois demander à Dreamweaver de créer les nouveaux liens à l'aide de chemins relatifs à la racine du site.

Important :

Il est conseillé de toujours enregistrer un nouveau fichier avant de créer un chemin relatif au document, car ce dernier n'est pas valide sans point de départ bien défini. Si vous créez un chemin relatif au document avant d'enregistrer le fichier, Dreamweaver utilise provisoirement un chemin absolu commençant par file:// jusqu'à ce que le fichier soit enregistré.

Dreamweaver convertit alors le chemin file:// en chemin relatif.

Vous trouverez un didacticiel consacré à la création de liens à l'adresse www.adobe.com/go/vid0149_fr .

Voir aussi

Association de comportements JavaScript à des liens

Vous pouvez associer un comportement à n'importe quel lien d'un document. Les comportements décrits ci-dessous peuvent être très intéressants lorsque vous insérez des éléments liés dans vos documents.

T exte de la barre d'état

Permet de spécifier le texte d'un message et de l'afficher dans la barre d'état dans la partie inférieure gauche de la fenêtre du navigateur. Par exemple, vous pouvez utiliser ce comportement pour décrire la destination d'un lien dans la barre d'état, au lieu d'afficher l'URL associée

O uvrir la fenêtre

N avigateur

Ouvre une URL dans une nouvelle fenêtre. Vous pouvez spécifier les propriétés de la nouvelle fenêtre, notamment son nom, sa taille et ses attributs (redimensionnable ou non, dispose d'une barre de menu ou non, etc.).

Menu de reroutage

modifie un menu de reroutage. Vous pouvez modifier la liste du menu, spécifier un fichier lié différent ou changer l'emplacement du navigateur dans lequel ouvrir le document lié.

Définir image barre de navigation

permet de personnaliser l'affichage des images dans une barre de navigation. Par exemple, vous pouvez utiliser ce comportement pour afficher une image spécifique dans la barre de navigation ou dans la page lorsque le pointeur passe au-dessus d'une partie spécifique de la barre de navigation.

Voir aussi

« Application de comportements Dreamweaver intégrés » à la page 336

Créer un lien vers des documents à l'aide de l'inspecteur Propriétés

Vous pouvez utiliser l'icône de dossier de l'inspecteur Propriétés ou la zone Lien pour créer des liens à partir d'une image, un objet, du texte ou tout autre document ou fichier.

1

Sélectionnez le texte ou une image dans la fenêtre de document en mode Création.

2

Ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés) et procédez de l'une des manières suivantes :

• Cliquez sur l'icône représentant un dossier située à droite de la zone Lien pour rechercher et sélectionner un fichier.

Le chemin d'accès du document pointé par le lien s'affiche dans la zone URL. Utilisez le menu déroulant Relatif à dans la boîte de dialogue Sélectionner fichier HTML pour spécifier si le chemin est relatif à la racine ou au document, puis cliquez sur Sélectionner. Le type de chemin sélectionné ne s'applique qu'au lien actif. Vous pouvez modifier le paramètre par défaut de la zone Relatif à pour le site.

• Tapez le chemin et le nom de fichier du document dans la zone Lien.

Pour créer un lien vers un document de votre site, indiquez un chemin relatif au document ou à la racine du site. Pour créer un lien vers un document situé en dehors du site, indiquez un chemin absolu, avec le type de protocole (par exemple, http://). Vous pouvez utiliser cette approche pour entrer un lien vers un fichier n'ayant pas encore été créé.

DREAMWEAVER CS3


271

3

Dans le menu déroulant Cible, sélectionnez un emplacement dans lequel ouvrir le document :

•

_blank


•

_parent

charge le document lié dans le cadre parent ou dans la fenêtre parente du cadre contenant le lien. Si le cadre contenant le lien n'est pas imbriqué, le document lié est chargé dans la fenêtre de base du navigateur.

•

_self

charge le document lié dans le même cadre (ou la même fenêtre) que le lien. Il s'agit de la cible par défaut, il est donc en général inutile de la spécifier.

•

_top


Si tous les liens de la page doivent être définis sur la même cible, vous pouvez spécifier celle-ci une fois pour toutes en choisissant la commande Insertion > HTML > Balises d'en-tête > Base et en sélectionnant les informations cible. Pour plus

Voir aussi

Création d'un lien vers des documents en utilisant l'icône Pointer vers un fichier

1


2

Créez un lien de l'une des deux façons suivantes :

•

Faites glisser l'icône du pointeur (en forme de cible) à droite de la zone Lien de l'inspecteur Propriétés et pointez vers un autre document ouvert, une ancre visible dans un document ouvert ou un document du panneau Fichiers.

•

Faites glisser la sélection, en maintenant la touche Maj enfoncée et pointez vers un autre document ouvert, une ancre visible dans un document ouvert ou un fichier du panneau Fichiers.

Remarque :

Vous pouvez créer un lien vers un document ouvert à condition que vos documents ne soient pas agrandis dans la fenêtre de document. Pour afficher les documents en mosaïque, sélectionnez Fenêtre > Cascade ou Fenêtre > Mosaïque.

Lorsque vous pointez vers un document ouvert, celui-ci passe au premier plan de votre écran pendant que vous effectuez votre sélection.

Créer un lien vers des documents à l'aide de la carte du site

Les liens que vous créez dans la carte du site sont placés en bas des fichiers HTML sélectionnés, ce qui vous permet de créer rapidement des liens à travers un site.

Créer un lien vers des documents en utilisant la carte du site et l'icône Pointer vers un fichier

Cette méthode fonctionne correctement lorsque vous construisez votre site et que vous souhaitez créer rapidement des liens au niveau du site.

1

Dans le panneau Fichiers, sélectionnez Affichage de la carte dans le menu contextuel Vue du site.

2

Sélectionnez un fichier HTML dans la carte du site.

3

Faites glisser l'icône Pointer vers un fichier (en forme de cible) du fichier sélectionné et pointez vers un autre fichier dans la carte du site ou vers un fichier local dans la vue Fichiers du site.

Un lien portant le nom du fichier lié apparaît en bas du fichier HTML sélectionné.

Créer un lien vers des documents dans la carte du site

❖


•

Faites glisser une page depuis l'Explorateur de Windows ou le Sélecteur du Macintosh vers une page dans la carte du site.

•

Sélectionnez une page HTML dans la carte du site, et sélectionnez Lier au fichier existant dans le menu contextuel.

•

Sélectionnez une page HTML dans la carte du site, et sélectionnez Lier au nouveau fichier dans le menu contextuel.

DREAMWEAVER CS3


272

Ajout d'un lien en utilisant la commande Hyperlien

La commande Hyperlien vous permet de créer un lien vers une image, un objet ou vers un autre document ou fichier.

1

Placez le curseur à l'endroit du document où vous souhaitez que le lien apparaisse.

2

Procédez de l'une des manières suivantes pour afficher la boîte de dialogue Hyperlien :

•

Choisissez Insertion > Hyperlien.

•

Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Hyperlien.

3

Tapez le texte du lien et, après la zone Lien, tapez le nom du fichier vers lequel un lien va être établi (ou cliquez sur l'icône du dossier pour rechercher et sélectionner le fichier).

4

Dans le menu déroulant Cible, choisissez la fenêtre dans laquelle le fichier devra s'ouvrir ou tapez son nom

Les noms de tous les cadres du document actif apparaissent dans la liste déroulante. Si vous spécifiez un cadre inexistant, la page liée s'ouvre dans une nouvelle fenêtre portant le nom que vous avez spécifié. Vous pouvez également choisir parmi

•

_blank


•

_parent


•

_self


•

_top


5

Dans la zone Ordre des tabulations, tapez une valeur correspondant à l'ordre de l'onglet.

6

Dans la zone Titre, tapez un titre pour le lien.

7

Dans la zone Clé d'accès, tapez une équivalence de clavier (une lettre) pour sélectionner le lien dans le navigateur.

8

Cliquez sur OK.

Définir le chemin relatif des nouveaux liens

Par défaut, Dreamweaver crée les liens vers d'autres pages de votre site à l'aide de chemins relatifs au document. Pour utiliser des chemins relatifs à la racine, vous devez d'abord définir un dossier local dans Dreamweaver en choisissant un dossier racine local qui servira d'équivalent à la racine des documents sur le serveur. Dreamweaver utilise ce dossier pour déterminer les chemins relatifs à la racine pointant vers des fichiers.

1


2

Dans la boîte de dialogue Gérer les sites, double-cliquez sur votre site dans la liste.

3

Dans la boîte de dialogue Définition de site, cliquez sur l'onglet Avancé si les réglages correspondants ne paraissent pas.

L'onglet Avancé de la boîte de dialogue Définition du site affiche le contenu de la catégorie Infos locales.

4

Définissez le chemin relatif des nouveaux liens en sélectionnant l'option Document ou Racine du site.

Lorsque vous cliquez sur OK, la modification de ce paramètre ne convertit pas le chemin des liens existants. Le paramètre ne s'applique qu'aux nouveaux liens créés avec Dreamweaver.

Remarque :

Le contenu lié à un chemin relatif à la racine n'apparaît pas lorsque vous lancez l'aperçu de documents dans un navigateur local, sauf si vous spécifiez un serveur de test ou activez l'option Aperçu à l'aide d'un fichier temporaire dans Edition

> Préférences > Aperçu dans le navigateur. En effet, à la différence des serveurs, les navigateurs ne reconnaissent pas les racines de sites. Un moyen rapide de lancer l'aperçu d'un contenu lié à des chemins relatifs à la racine consiste à placer le fichier sur un serveur distant, puis à sélectionner Fichier > Aperçu dans le navigateur.

5

Pour les chemins relatifs à la racine, entrez l'URL de votre site Web dans la zone Adresse HTTP.

Dreamweaver utilise cette adresse pour s'assurer que les liens relatifs à la racine fonctionnent sur le serveur distant, ce dernier pouvant présenter une racine de site distincte. Par exemple, si vous liez un fichier d'image de votre disque dur dans le dossier C:\Ventes\images\ (où Ventes correspond à votre dossier racine local) et que l'URL de votre site définitif est

DREAMWEAVER CS3


273

http://www.monsite.com/VentesApp/ (où VentesApp est votre dossier racine distant), la saisie de l'URL dans la zone

Adresse HTTP permettra de vérifier que le chemin conduisant au fichier sur le serveur distant est en réalité

/VentesApp/images/.

Remarque :

Les versions précédentes de Dreamweaver ne permettaient pas d'associer le dossier racine distant approprié, ce qui entraînait parfois des erreurs d'exécution pour certaines pages.

6

Cliquez sur OK.

Le paramètre du nouveau chemin ne s'applique qu'au site actif.

Voir aussi


Créer un lien vers un emplacement spécifique au sein d'un document

Vous pouvez utiliser l'inspecteur Propriétés pour établir un lien vers une section donnée d'un document en créant au préalable des ancres nommées. Les ancres nommées permettent de définir des marqueurs dans un document et sont souvent placées au niveau d'une rubrique spécifique ou en haut d'un document. Vous pouvez ensuite créer des liens vers ces ancres nommées, qui amènent rapidement le visiteur à la position spécifiée.

La création d'un lien vers une ancre nommée s'effectue en deux étapes : il faut d'abord créer l'ancre nommée, puis créer un lien pointant sur elle.

Remarque :

Vous ne pouvez pas placer d'ancre nommée dans un élément PA (à positionnement absolu).

Créer une ancre nommée

1

Dans la fenêtre de document, en mode Création, placez le curseur à l'endroit où insérer l'ancre nommée.

2


•

Choisissez Insertion > Ancre nommée.

•

Appuyez sur Ctrl+A (Windows) ou Commande+Option+A (Macintosh).

•

Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Ancre nommée.

3

Dans la zone Ancre nommée, entrez le nom de l'ancre puis cliquez sur OK (le nom de l'ancre ne peut pas contenir d'espaces).

Le marqueur de l'ancre apparaît au niveau du point d'insertion.

Remarque :

Si vous ne voyez pas le marqueur de l'ancre, choisissez Affichage

Créer un lien vers une ancre nommée

1

Dans la fenêtre de document en mode Création, sélectionnez le texte ou l'image à partir desquels créer le lien.

2

Dans la zone Lien de l'inspecteur Propriétés, tapez le signe dièse (#) et le nom de l'ancre. Par exemple, pour créer un lien vers une ancre nommée « début » dans le document actif, tapez

#top.

Pour créer un lien vers une ancre nommée «début» dans un autre document figurant dans le même dossier, tapez

filename.html#top

.

Remarque :

La casse (majuscules/minuscules) est importante dans les noms d'ancre.

Créer un lien vers une ancre nommée à l'aide de la méthode Pointer vers un fichier

1

Ouvrez le document contenant l'ancre nommée.

Remarque :

Choisissez Affichage > Assistances visuelles > Eléments invisibles pour faire apparaître l'ancre, le cas échéant.

2

Dans la fenêtre de création du document, sélectionnez le texte ou l'image à partir desquels créer le lien (s'il s'agit d'un autre document ouvert, vous devez basculer sur celui-ci).

DREAMWEAVER CS3


274

3


•

Cliquez sur l'icône du pointeur (icône cible) à droite de la zone Lien de l'inspecteur Propriétés et faites-la glisser sur l'ancre vers laquelle vous souhaitez créer un lien, sur l'ancre vers laquelle vous souhaitez créer un lien, dans le même document ou dans tout autre document ouvert.

•

En maintenant la touche Maj enfoncée, dans la fenêtre de document, faites glisser l'image ou le texte sélectionné : sur l'ancre vers laquelle vous souhaitez créer un lien, dans le même document ou dans tout autre document ouvert.

Créer un lien de messagerie électronique

Un lien de message électronique ouvre une nouvelle fenêtre de message (dans le programme de messagerie associé au navigateur de l'utilisateur) lorsque l'utilisateur clique dessus. La zone A : de la fenêtre du courriel est automatiquement complétée par l'adresse indiquée dans le lien.

Création d'un lien de courriel à l'aide de la commande Insertion - Lien de messagerie

1

Dans la fenêtre de document, placez le curseur à l'endroit où afficher le lien de message électronique ou sélectionnez le texte ou l'image qui doit représenter ce lien.

2

Procédez de l'une des manières suivantes pour insérer le lien :

•

Choisissez Insertion > Lien de messagerie.

•

Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Lien de messagerie.

3

Dans la zone Texte, saisissez ou modifiez le corps du courriel.

4

Dans la zone Adresse électronique, tapez l'adresse électronique, puis cliquez sur OK.

Créer un lien de messagerie électronique à l'aide de l'inspecteur Propriétés

1


2

Dans la zone Lien de l'inspecteur Propriétés, tapez

mailto:

suivi d'une adresse électronique.

N'insérez pas d'espaces entre le signe deux points et l'adresse électronique.

Créer des liens nuls et de liens de script

Un lien nul est un lien non désigné. Utilisez des liens nuls pour attacher des comportements à des objets ou du texte sur une page. Par exemple, vous pouvez attacher un comportement à un lien nul pour intervertir une image ou afficher un élément

PA lorsque le pointeur passe au-dessus du lien.

Les liens de script exécutent un code JavaScript ou appellent une fonction JavaScript et permettent de fournir aux utilisateurs des informations supplémentaires sur un élément sans quitter la page en cours. Les liens de scripts permettent également d'exécuter des calculs, de valider des formulaires et d'effectuer d'autres tâches de traitement lorsqu'un visiteur clique sur un

élément spécifique.

Voir aussi

« Application d'un comportement » à la page 335

Créer un lien nul

1

Sélectionnez du texte, un objet ou une image dans la fenêtre de document en mode Création.

2

Dans l'inspecteur Propriétés, tapez

javascript:;

(le mot javascript suivi par deux points puis par un point-virgule) dans la zone Lien.

Créer un lien de script

1

Sélectionnez du texte, un objet ou une image dans la fenêtre de document en mode Création.

2

Dans la zone Lien de l'inspecteur Propriétés, tapez

javascript:

suivi du code JavaScript ou d'un appel de fonction

JavaScript. (N'insérez pas d'espace entre le signe deux points et le code ou l'appel.)

DREAMWEAVER CS3


275

Mettre les liens à jour automatiquement

Dreamweaver peut mettre à jour les liens vers un document et à partir de ce dernier lorsque vous le déplacez ou renommez au sein d'un site local. Cette fonction fonctionne de façon optimale lorsqu'un site tout entier (ou une section entière de celui-ci) est stocké sur votre disque dur local. Dreamweaver ne modifie pas les fichiers du dossier distant avant que vous y placiez les fichiers locaux ou que vous les archiviez dans le serveur distant.

Pour accélérer le processus de mise à jour, Dreamweaver peut créer un fichier cache dans lequel il conservera la liste de tous les liens du site local. Le fichier cache est mis à jour chaque fois que vous ajoutez, modifiez ou supprimez des liens sur votre site local.

Activer les mises à jour automatiques des liens

1


2

Dans la boîte de dialogue Préférences, sélectionnez la catégorie Général dans la liste de gauche.

3

Dans la section Options de document des préférences Général, sélectionnez une option dans le menu déroulant Mettre

à jour les liens lors du déplacement de fichiers.

T oujours

Met automatiquement à jour tous les liens vers un document sélectionné et à partir de ce dernier lorsque vous le déplacez ou le renommez

Jamais

Ne met pas automatiquement à jour tous les liens vers un document sélectionné et à partir de ce dernier lorsque vous le déplacez ou le renommez.

Invite

Affiche d'abord une boîte de dialogue qui répertorie tous les fichiers affectés par le changement. Cliquez sur Mettre

à jour pour mettre à jour les liens de ces fichiers, ou sur Ne pas mettre à jour pour laisser les fichiers intacts.

4

Cliquez sur OK.

Créer un fichier cache pour votre site

1


2

Sélectionnez un site, puis cliquez sur Modifier.

3

Cliquez sur l'onglet Avancé pour faire apparaître la catégorie Avancé de la boîte de dialogue Définition du site.

4

Sélectionnez la catégorie Infos locales dans la liste de gauche.

5

Dans la catégorie Infos locales, sélectionnez l'option Activer le cache.

Après avoir lancé Dreamweaver, la première fois que vous modifiez ou supprimez des liens vers des fichiers de votre dossier local, Dreamweaver vous invite à charger le cache. Si vous cliquez sur Oui, Dreamweaver charge le cache et met à jour tous les liens vers le fichier que vous venez de modifier. Si vous cliquez sur le bouton Non, la modification est consignée dans le cache, mais Dreamweaver ne charge pas le cache et ne met pas les liens à jour.

Sur les sites de grande taille, le chargement du cache peut prendre quelques minutes du fait que Dreamweaver doit déterminer si le cache est périmé en comparant l'heure et la date des fichiers qui se trouvent sur le site local à celles enregistrées dans le cache. Si vous n'avez pas modifié de fichiers hors de Dreamweaver, vous pouvez cliquer sur le bouton d'arrêt en toute sécurité lorsque le bouton apparaît.

Recréer le cache

❖

Dans le panneau Fichiers, sélectionnez Site > Avancé > Recréer le cache du site.

Gestion des liens dans la carte du site

Vous pouvez modifier la structure du site dans la carte du site en ajoutant, modifiant et supprimant des liens. Dreamweaver met automatiquement le site à jour pour afficher les modifications apportées au site.

Voir aussi


DREAMWEAVER CS3


276

Changer un lien

1

Dans la carte du site, sélectionnez une page contenant le lien cible que vous souhaitez changer (de sorte que le document qui possède un lien vers cette page pointe vers une autre page), puis cliquez avec le bouton droit de la souris (Windows) ou en appuyant sur le bouton Contrôle (Macintosh) et choisissez Modifier le lien dans le menu contextuel.

2

Naviguez jusqu'au nouveau fichier cible ou tapez son URL.

3

Cliquez sur OK.

Supprimer un lien

1

Sélectionnez la page dans la carte du site.

2

Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Supprimer le lien dans le menu contextuel.

La suppression d'un lien ne supprime pas le fichier, mais supprime le lien provenant de la source HTML sur la page qui pointe vers le fichier désormais non lié.

O uvrir la source d'un lien

1

Sélectionnez un fichier dans la carte du site.

2


•

Choisissez Site > Ouvrir à la source du lien (Windows) ou Site > Affichage de la carte du site > Ouvrir à la source du lien

(Macintosh).

•

Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) et choisissez

Ouvrir à la source du lien dans le menu contextuel.

L'inspecteur Propriétés et le fichier source contenant le lien s'ouvrent dans la fenêtre de document. Le lien y est en surbrillance.

Modifier un lien au niveau du site

Outre la mise à jour automatique des liens que Dreamweaver effectue chaque fois que vous déplacez ou renommez un fichier, vous pouvez modifier manuellement tous les liens (y compris les liens de messagerie électronique, ftp, nuls et de scripts) pour qu'ils pointent sur un autre chemin.

Cette option est surtout utile lorsque vous souhaitez supprimer un fichier auquel d'autres fichiers sont liés, mais pouvez l'utiliser à d'autres fins. Par exemple, supposons que vous ayez établi un lien entre les mots "films du mois" et

/films/juillet.html dans l'ensemble de votre site. Le 1er août, vous voudrez modifier ces liens pour qu'ils pointent vers

/films/aout.html.

1

Sélectionnez un fichier dans l'affichage local du panneau Fichiers.

Remarque :

Si vous changez un lien de messagerie électronique, ftp, nul ou de script, vous n'avez pas besoin de sélectionner de fichier.

2

Choisissez Site > Modifier le lien au niveau du site.

3

Complétez les options suivantes dans la boîte de dialogue Modifier le lien au niveau du site :

Modifier tous les liens à

Cliquez sur l'icône du dossier à parcourir et sélectionnez le fichier cible vers lequel les liens doivent

être rompus. Si vous changez un lien de messagerie électronique, ftp, nul ou de script, tapez le texte complet du lien à changer.

En liens à

Cliquez sur l'icône de dossier à parcourir et sélectionnez le nouveau fichier vers lequel établir un lien. Si vous changez un lien de messagerie électronique, ftp, nul ou de script, tapez le texte complet du lien de remplacement.

4

Cliquez sur OK.

Dreamweaver met à jour tous les documents qui pointent vers le fichier sélectionné, en les faisant pointer vers le nouveau fichier suivant le format de chemin d'accès existant (par exemple, si l'ancien chemin était relatif au document, le nouveau l'est également).

DREAMWEAVER CS3


277

Lorsqu'un lien a été changé au niveau de tout le site, le fichier sélectionné devient orphelin (plus aucun fichier du disque local ne pointe vers lui). Vous pouvez le supprimer en toute sécurité sans risque d'altérer des liens sur le site local

Dreamweaver.

Important :

Ces modifications se produisant localement, vous devez supprimer manuellement le fichier orphelin correspondant dans le dossier distant et placer ou archiver tous les fichiers dans lesquels les liens ont été modifiés, sinon les visiteurs ne pourront pas visualiser les modifications.

T

est de liens dans Dreamweaver

Les liens ne sont pas actifs dans Dreamweaver ; c'est-à-dire que vous ne pouvez pas ouvrir les documents liés en cliquant sur le lien dans la fenêtre de document.

❖


•

Sélectionnez le lien et choisissez Modifier > Ouvrir la page liée.

•

Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh), puis double-cliquez sur le lien.

Remarque :

Le document lié doit résider sur le disque local.

Voir aussi

« Rechercher les liens rompus, externes et orphelins » à la page 282

« Correction de liens rompus » à la page 283

Menus de reroutage

Insertion de menus de reroutage

Un menu de reroutage est un menu déroulant dans un document, visible pour tous les visiteurs du site et répertoriant les liens vers des documents ou des fichiers. Vous pouvez créer des liens vers des documents de votre site Web ou d'un autre site, des liens de messagerie électronique, des liens vers des images ou vers tout type de fichier pouvant être ouvert dans un navigateur.

Chaque option d'un menu de reroutage est associée à une URL. Lorsque les utilisateurs choisissent une option, ils sont redirigés (« reroutés ») vers l'URL associée. Ces menus sont insérés à l'aide de l'objet de formulaire Menu de reroutage.

• (Facultatif) Une invite de sélection au sein du menu, par exemple une description de catégorie pour les éléments du menu

• (Obligatoire) Une liste d'éléments de menu de reroutage : l'utilisateur choisit une option et le document ou le fichier lié s'affiche.

• (Facultatif) Un bouton Aller.

Voir aussi


« Application du comportement Menu de reroutage Aller » à la page 341

Insertion d'un menu de reroutage

1

Ouvrez un document, puis placez le curseur dans la fenêtre de document.

2


•

Choisissez Insertion > Formulaire > Menu de reroutage.

DREAMWEAVER CS3


278

•

Cliquez sur le bouton Menu de reroutage de la catégorie Formulaires de la barre Insertion.

3

Complétez les options de la boîte de dialogue Insérer menu de reroutage, puis cliquez sur OK. Voici une liste partielle des options :

Boutons Plus (+) et Moins (-)

Cliquez sur Plus pour insérer un élément ; cliquez à nouveau sur Plus pour en ajouter un autre.

Pour supprimer un élément, sélectionnez-le et cliquez sur Moins.

Boutons fléchés

Sélectionnez un élément et cliquez sur les boutons fléchés pour le déplacer vers le haut ou le bas de la liste.

T exte

tapez-la ici en tant que premier élément de menu (dans ce cas, vous devez aussi sélectionner l'option Sélectionner le premier

élément après le changement d'URL située en bas).

Si sélectionné, aller à l'URL

Naviguez jusqu'au fichier cible ou tapez son chemin.

O uvrir les URL dans

Spécifiez si le fichier doit être ouvert dans la même fenêtre ou dans un cadre. Si le cadre à désigner comme cible n'apparaît pas dans le menu déroulant, fermez la boîte de dialogue Insérer menu de reroutage, puis donnez un nom au cadre.

Insérer bouton Aller

Choisissez d'insérer un bouton Aller au lieu d'une invite de sélection de menu.

Sélectionner le premier élément après le changement d'URL

Sélectionnez cette option si vous avez inséré une invite de sélection de menu (« ») en tant que premier élément du menu.

Voir aussi

« Affichage et définition des des propriétés et des attributs de cadre » à la page 201

Modifier les éléments d'un menu de reroutage

Vous pouvez modifier l'ordre des éléments dans le menu ou le fichier auquel un élément est lié, et vous pouvez ajouter, supprimer ou renommer un élément.

Pour modifier l'emplacement d'ouverture d'un fichier lié ou pour ajouter ou modifier une invite de sélection de menu, vous devez appliquer le comportement Menu de reroutage du panneau Comportements.

1

Ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés), s'il n'est pas déjà ouvert.

2

Dans la fenêtre de création du document, cliquez sur l'objet Menu de reroutage pour le sélectionner.

3

Dans l'inspecteur Propriétés, cliquez sur le bouton Valeurs de la liste.

4

Utilisez la boîte de dialogue Valeurs de la liste pour apporter vos modifications aux éléments de menu et cliquer sur OK.

Voir aussi


Dépannage des menus de reroutage

Lorsqu'un élément de menu a été sélectionné, il n'est plus possible de le sélectionner à nouveau si le visiteur revient à cette page ou si la zone Ouvrir les URL dans pointe sur un cadre. Il existe deux méthodes pour contourner ce problème :

• Utiliser une invite de sélection au sein du menu, par exemple une catégorie ou une instruction, du type «

• Utiliser un bouton Aller, qui permet à l'utilisateur de visiter à nouveau le lien déjà sélectionné. Lorsque vous utilisez un bouton Aller associé à un menu de reroutage, le bouton Aller devient le seul mécanisme permettant à l'utilisateur d'accéder à l'URL associée à la sélection dans le menu. La sélection d'un élément de menu dans le menu de reroutage n'a plus pour effet de rediriger l'utilisateur automatiquement vers une autre page ou un autre cadre.

Remarque :

Dans la boîte de dialogue Insérer menu de reroutage, vous ne devez sélectionner qu'une option pour chaque menu de reroutage, car elles s'appliquent à la totalité du menu de reroutage.

DREAMWEAVER CS3


279

Barres de navigation

A propos des barres de navigation

Une barre de navigation est composée d'une image ou d'une série d'images dont l'affichage change en réponse aux actions de l'utilisateur. Les barres de navigation constituent souvent une méthode simple pour se déplacer entre des pages et des fichiers sur un site.

•

Image Haut : l'image qui s'affiche lorsque l'utilisateur n'a pas encore cliqué ou interagi avec l'élément.

•

Image Dessus : l'image qui s'affiche lorsque l'utilisateur fait passer le pointeur de la souris au-dessus de l'image Haut.

L'aspect de l'élément change (par exemple, il peut paraître plus clair) pour spécifier à l'utilisateur qu'il peut interagir avec celui-ci.

•

Image Abaissée : l'image qui s'affiche une fois que l'utilisateur a cliqué sur l'élément. Par exemple, lorsqu'un utilisateur clique sur un élément, une nouvelle page est chargée et la barre de navigation est toujours affichée, mais l'élément cliqué peut être assombri pour indiquer qu'il est sélectionné.

•

Image Au-dessus lorsque Abaissée : l'image qui s'affiche lorsque l'utilisateur fait passer le pointeur de la souris au-dessus de l'image Abaissée après avoir cliqué sur l'élément. Par exemple, l'élément peut être estompé. Cet état donne aux utilisateurs une indication visuelle selon laquelle ils ne peuvent pas cliquer sur cet élément une nouvelle fois tant qu'ils se trouvent dans cette partie du site.

Vous n'avez pas à inclure des images de barre de navigation pour les quatre états. Par exemple, vous pouvez uniquement définir les états Haut et Abaissée.

Après avoir créé une barre de navigation pour un document, vous pouvez ajouter des images dans cette barre de navigation ou en supprimer à l'aide de la commande Modifier la barre de navigation. Cette commande permet de modifier une image ou un ensemble d'images, de changer le fichier qui s'ouvre lorsque l'utilisateur clique sur un élément, de sélectionner un autre cadre ou une autre fenêtre cible pour l'ouverture de ce fichier et de réorganiser la position des images.

Insertion d'une barre de navigation

Avant d'utiliser la commande Insérer une barre de navigation, créez un ensemble d'images pour les états d'affichage de chaque élément de navigation (il peut être utile d'imaginer un élément de barre de navigation comme étant un bouton car, lorsque celui-ci est cliqué, il amène l'utilisateur à une autre page).

Vous pouvez créer une barre de navigation, la copier dans d'autres pages de votre site, l'utiliser avec des cadres et modifier les comportements dans chaque page pour afficher les différents états en fonction de la page en cours.

1


•

Sélectionnez Insertion > Objets image > Barre de navigation.

•

Dans la catégorie Commun de la barre d'insertion, cliquez sur le bouton Images et sélectionnez Insérer une barre de navigation.

DREAMWEAVER CS3


280

2

Complétez les options de la boîte de dialogue Insérer une barre de navigation, puis cliquez sur OK. Voici une liste partielle des options :

Boutons Plus (+) et Moins (-)

Cliquez sur Plus pour insérer un élément ; cliquez à nouveau sur Plus pour en ajouter un autre.

Pour supprimer un élément, sélectionnez-le et cliquez sur Moins.

N om d'élément :

Tapez un nom pour un élément de la barre de navigation, par exemple,

Accueil

. Chaque élément correspond à un bouton pouvant posséder jusqu'à quatre états d'image. Les noms des éléments sont affichés dans la liste

Eléments de la barre de navigation. Utilisez les boutons fléchés pour disposer les éléments sur la barre de navigation.

Image Haut, Image Dessus, Image Abaissée et Image Au-dessus lorsque Abaissée

Cliquez sur Parcourir pour sélectionner des images pour ces quatre états. Seule l'état Image Haut est requis ; les autres états d'image sont facultatifs.

T exte secondaire

Entrez un nom descriptif pour l'élément. Le texte secondaire apparaît à la place des images dans les navigateurs qui affichent seulement du texte ou qui téléchargent les images manuellement. Les lecteurs d'écran lisent le texte secondaire et certains navigateurs l'affichent lorsque l'utilisateur fait passer le pointeur de la souris sur l'élément de la barre de navigation.

Si cliqué, aller à l'URL

Cliquez sur le bouton Parcourir pour sélectionner un fichier lié à ouvrir, puis spécifiez si ce fichier doit s'ouvrir dans la même fenêtre ou dans un cadre. Si le cadre à désigner comme cible n'apparaît pas dans le menu, fermez la boîte de dialogue Insérer une barre de navigation, puis donnez un nom au cadre dans votre document.

Précharger les images

Sélectionnez cette option pour télécharger les images pendant le téléchargement de la page. Cette option évite à l'utilisateur d'attendre lorsqu'il fait passer le pointeur sur les images survolées.

Montrer "Image Abaissée" initialement

Sélectionnez cette option pour les éléments que vous souhaitez afficher initialement à l'état Image Abaissée au lieu de l'état par défaut Image Haut. Par exemple, l'élément « Accueil » de la barre de navigation doit être à l'état Image Abaissée lorsque la page vient d'être téléchargée. Lorsque vous appliquez cette option à un élément, un astérisque apparaît après son nom dans la liste Eléments de la barre de navigation.

Insérer

Indiquez si les éléments doivent être insérés verticalement ou horizontalement.

Utiliser tableaux

Sélectionnez cette option pour insérer les élément sous forme de tableau.

Voir aussi

« Affichage et définition des des propriétés et des attributs de cadre » à la page 201

Modifier une barre de navigation

1

Sélectionnez la barre de navigation de la page active.

2

Choisissez Modifier > Barre de navigation.

3

Dans la liste des éléments de la barre de navigation, sélectionnez l'élément à modifier.

4

Apportez les modifications souhaitées et cliquez sur OK.

Cartes graphiques

A propos des cartes graphiques

Une carte graphique est une image ayant été divisée en régions appelées zones réactives . Lorsque vous cliquez sur une zone réactive, une action est exécutée, par exemple, l'ouverture d'un nouveau fichier.

Les cartes graphiques côté client stockent les informations relatives aux liens hypertextes dans le document HTML, alors que les cartes graphiques côté serveur conservent ces informations dans un fichier de carte séparé. Lorsqu'un visiteur de site clique sur une zone réactive dans l'image, l'URL associée est envoyée directement au serveur. Ceci rend les cartes graphiques côté client plus rapides que leurs équivalents sur le serveur, car celui-ci n'a pas à interpréter les coordonnées du point sur lequel l'utilisateur a cliqué. Les cartes graphiques côté client sont prises en charge par Netscape Navigator à partir de sa version 2.0, par NCSA Mosaic 2.1 et 3.0, et par toutes les versions de Microsoft Internet Explorer.

DREAMWEAVER CS3


281

Dreamweaver ne modifie pas les références aux cartes graphiques sur le serveur, dans les documents existants. Vous pouvez utiliser les cartes graphiques côté client et côté serveur dans le même document. Les navigateurs qui prennent en charge les deux types de cartes donnent la priorité aux cartes graphiques côté client. Pour inclure une carte graphique sur le serveur dans un document, vous devez écrire le code HTML approprié.

Insérer des cartes graphiques côté client

Pour insérer une carte graphique côté client, créez une zone réactive, puis définissez un lien qui s'ouvre lorsqu'un utilisateur clique sur la zone réactive.

Remarque :

Vous pouvez créer plusieurs zones réactives, mais elles font toutes partie de la même carte graphique.

1

Sélectionnez l'image dans la fenêtre de document.

2

Dans l'inspecteur Propriétés, cliquez sur la flèche d'agrandissement située dans le coin inférieur droit pour visualiser toutes les propriétés.

3

Dans la zone Nom de la carte, entrez un nom unique pour la carte graphique. Si vous utilisez plusieurs cartes graphiques dans le même document, veillez à donner à chaque carte un nom unique.

4

Pour définir les zones de la carte graphique, procédez de l'une des manières suivantes :

•

Sélectionnez l'outil Cercle et faites glisser le pointeur sur l'image pour créer une zone réactive circulaire.

•

Sélectionnez l'outil Rectangle et faites glisser le pointeur sur l'image pour créer une zone réactive rectangulaire.

•

Sélectionnez l'outil Polygone pour définir une zone réactive de forme irrégulière en cliquant pour chaque point de segment de droite. Cliquez sur l'outil Flèche pour fermer la forme.

Après avoir créé la zone réactive, l'inspecteur Propriétés de cette zone apparaît.

5

Dans la zone Lien de l'inspecteur Propriétés de la zone réactive, cliquez sur l'icône du dossier pour rechercher le fichier

à ouvrir lorsque l'utilisateur clique sur la zone réactive, ou tapez le chemin.

6

Dans le menu déroulant Cible, choisissez la fenêtre dans laquelle le fichier devra s'ouvrir ou tapez son nom

Les noms de tous les cadres du document actif apparaissent dans la liste déroulante. Si vous spécifiez un cadre inexistant, la page liée est chargée dans une nouvelle fenêtre portant le nom que vous avez spécifié. Vous pouvez également choisir

•

_blank


•

_parent


•

_self


•

_top


Remarque :

L'option Cible n'est disponible que lorsque la zone réactive sélectionnée contient un lien.

7

Dans la zone Alt, tapez un texte secondaire à afficher dans les navigateurs qui affichent seulement du texte ou qui téléchargent les images manuellement. Certains navigateurs affichent ce texte sous forme d'une info-bulle lorsque l'utilisateur fait passer le pointeur de la souris au-dessus de la zone réactive.

8

Répétez les étapes 4 à 7 pour définir d'autres zones réactives dans la carte graphique.

9

Une fois la définition de la carte de l'image terminée, cliquez sur une zone vierge du document pour modifier l'inspecteur

Propriétés.

Modifier les zones réactives d'une carte graphique

Vous pouvez facilement modifier les zones réactives que vous créez dans une carte graphique. Vous pouvez déplacer un groupe de zones réactives, redimensionner des zones réactives ou déplacer une zone réactive vers l'avant ou l'arrière dans un élément à positionnement absolu.

DREAMWEAVER CS3


282

Vous pouvez également copier une image contenant des zones réactives d'un document vers un autre ou copier une ou plusieurs zones réactives d'une image et les coller vers une autre image. Les zones réactives associées à l'image sont

également copiées vers le nouveau document.

Sélectionner plusieurs zones réactives dans une carte graphique

1

Utilisez le pointeur de zone réactive pour sélectionner une zone réactive.

2


• En maintenant la touche Maj enfoncée, cliquez tour à tour sur les autres zones réactives à sélectionner.

• Appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh) pour sélectionner toutes les zones réactives.

Déplacer une zone réactive

1

Utilisez le pointeur de zone réactive pour sélectionner la zone réactive.

2


•

Faites glisser la zone réactive vers une nouvelle zone.

•

Utilisez la touche Maj et une touche fléchée pour déplacer une zone réactive de 10 pixels dans le sens sélectionné.

•

Utilisez les touches fléchées pour déplacer une zone réactive de 1

Redimensionner une zone réactive

1

Utilisez le pointeur de zone réactive pour sélectionner la zone réactive.

2

Faites glisser une poignée de sélection de la zone réactive pour modifier la taille ou la forme de celle-ci.

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

Rechercher les liens rompus, externes et orphelins

Utilisez la fonction Vérifier les liens pour rechercher les liens rompus et les fichiers orphelins (les fichiers qui existent toujours dans le site mais vers lesquels aucun lien ne pointe dans le site). Vous pouvez faire porter la recherche sur un fichier ouvert, sur une partie ou sur l'ensemble d'un site local.

Dreamweaver vérifie uniquement les liens qui pointent vers des documents au sein du même site. Dreamweaver dresse une liste des liens externes qui apparaissent dans le ou les documents sélectionnés, mais ne les vérifie pas.

Vous pouvez identifier et supprimer les fichiers qui ne sont plus utilisés par les autres fichiers de votre site.

Voir aussi

« Identification et suppression des fichiers non utilisés » à la page 80

Vérifier les liens au sein du document actif

1

Enregistrez le fichier dans un emplacement de votre site Dreamweaver local.

2

Choisissez Fichier > Vérifier la page > Liens.

Le rapport Liens brisés apparaît dans le panneau Vérificateur de lien (dans le groupe de panneaux Résultats).

3

Dans le panneau Vérificateur de lien, sélectionnez Liens externes dans le menu déroulant Afficher pour afficher un autre rapport.

Le rapport apparaît dans le panneau Vérificateur de lien (dans le groupe de panneaux Résultats).

Vous pouvez vérifier les fichiers orphelins lorsque vous vérifiez les liens dans un site entier.

4

Pour enregistrer le rapport, cliquez sur le bouton Enregistrer le rapport dans le panneau Vérificateur de lien. Le rapport est un fichier temporaire ; il sera perdu si vous ne l'enregistrez pas.

DREAMWEAVER CS3


283

Vérifier les liens dans une partie d'un site local

1

Dans le panneau Fichiers, choisissez un site dans le menu déroulant Sites en cours.

2

Dans Affichage local, sélectionnez les fichiers ou les dossiers à vérifier.

3

Suivez l'une des procédures suivantes pour accéder aux options :

• Cliquez avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contrôle (Macintosh) sur l'un des fichiers sélectionnés et cliquez sur Vérifier les liens > Fichiers/Dossiers sélectionnés dans le menu contextuel.

• Choisissez Fichier > Vérifier la page > Liens.


4

Dans le panneau Vérificateur de lien, sélectionnez Liens externes dans le menu déroulant Afficher pour afficher un autre rapport.

Le rapport apparaît dans le panneau Vérificateur de lien (dans le groupe de panneaux Résultats).

Vous pouvez vérifier les fichiers orphelins lorsque vous vérifiez les liens dans un site entier.

5

Pour enregistrer un rapport, cliquez sur le bouton Enregistrer rapport dans le panneau Vérificateur de lien.

Vérifier les liens dans tout le site

1

Dans le panneau Fichiers, choisissez un site dans le menu déroulant Sites en cours.

2

Choisissez Site > Vérifier tous les liens du site.


3

Dans le panneau Vérificateur de lien, sélectionnez Liens externes ou Fichiers orphelins dans le menu déroulant Afficher pour afficher un autre rapport.

Une liste des fichiers correspondant au type du rapport sélectionné s'affiche dans la boîte de dialogue Vérificateur de lien.

Remarque :

Si vous avez sélectionné Fichiers orphelins comme type de rapport, vous pouvez directement supprimer des fichiers orphelins du panneau Vérificateur de lien en sélectionnant un fichier dans la liste et en appuyant sur la touche Supprimer.

4

Pour enregistrer un rapport, cliquez sur le bouton Enregistrer rapport dans le panneau Vérificateur de lien.

Correction de liens rompus

Une fois le rapport de liens exécuté, vous pouvez corriger les liens rompus et les références d'images directement dans la boîte de dialogue Vérificateur de lien, ou ouvrir les fichiers de la liste et réparer les liens dans l'inspecteur Propriétés.

Réparer des liens dans le panneau Vérificateur de lien

1

Exécutez un rapport de vérification des liens.

2

Sélectionnez le lien rompu dans la colonne Liens brisés (pas dans la colonne Fichiers) du panneau Vérificateur de lien

(dans le groupe de panneaux Résultats).

Une icône de dossier s'affiche à côté du lien rompu.

3

Cliquez sur l'icône de dossier située en face du lien rompu et naviguez jusqu'au fichier approprié pour le sélectionner, ou entrez le chemin d'accès et le nom de fichier corrects.

4

Appuyez sur Tab ou Entrée (Windows) ou Retour (Macintosh).

S'il y a d'autres liens rompus vers le même fichier, le système vous invite à réparer également les références dans les autres fichiers. Cliquez sur Oui pour que Dreamweaver mette à jour tous les documents de la liste faisant référence à ce fichier.

Cliquez sur Non pour que Dreamweaver mette uniquement à jour la référence actuelle.

Remarque :

Si l'option Activer l'archivage et l'extraction de fichier est activée pour ce site, Dreamweaver essaie d'extraire les fichiers qui nécessitent des modifications. S'il ne peut pas extraire un fichier, Dreamweaver affiche un avertissement et laisse les références rompues inchangées.

DREAMWEAVER CS3


284

Corriger des liens dans l'inspecteur Propriétés

1

Exécutez un rapport de vérification des liens.

2

Double-cliquez sur une entrée de la colonne Fichier dans le panneau Vérificateur de lien (dans le groupe de panneaux

Résultats).

Dreamweaver ouvre le document, sélectionne l'image ou le lien rompu, et met en surbrillance le chemin d'accès et le nom de fichier dans l'inspecteur Propriétés (si l'inspecteur Propriétés n'est pas ouvert, choisissez Fenêtre > Propriétés pour l'ouvrir).

3

Pour définir un nouveau chemin d'accès et un nouveau nom de fichier, tapez directement sur le texte en surbrillance ou cliquez sur l'icône du dossier pour naviguer vers le fichier.

Si vous mettez à jour une référence d'image, et si la nouvelle image s'affiche avec une taille incorrecte, cliquez sur L et H (ou sur le bouton Actualiser) dans l'inspecteur Propriétés pour réinitialiser les valeurs de hauteur et de largeur.

4


Dès que les liens sont réparés, leur entrée disparaît de la liste des liens rompus. Si une entrée figure toujours dans la liste après que vous avez indiqué un nouveau chemin d'accès ou nom de fichier dans le vérificateur de lien (ou après avoir enregistré des changements apportés à l'inspecteur Propriétés), Dreamweaver ne peut pas trouver le nouveau fichier et considère toujours que le lien est rompu.

Chapitre 10 : Aperçu des pages

Le mode Création vous donne une idée de l'aspect qu'aura votre page sur le Web, mais il ne restitue pas les pages de la même façon que les navigateurs. La fonction Aperçu dans le navigateur vous permet de voir la façon dont vos pages vont s'afficher dans des navigateurs spécifiques au fur et à mesure du processus de création.

Aperçu des pages dans les navigateurs

Affichage d'un aperçu dans un navigateur

Vous pouvez obtenir un aperçu d'une page dans un navigateur à la demande. Il n'est pas nécessaire de la transférer au préalable sur un serveur Web. Lorsque vous affichez un aperçu d'une page, toutes les fonctions liées au navigateur doivent

être opérationnelles, y compris les comportements JavaScript, les liens absolus et relatifs au document, les contrôles

ActiveX® et les plug-ins Netscape Navigator, à condition que vous ayez installé les plug-ins ou les contrôles ActiveX requis dans vos navigateurs.

Avant d'afficher un aperçu d'un document, enregistrez-le, sinon le navigateur n'affiche pas vos modifications les plus récentes.

1

Procédez de l'une des manières suivantes pour afficher un aperçu de la page :

•

Choisissez Fichier > Aperçu dans le navigateur, puis sélectionnez un navigateur dans la liste.

Remarque :

Si aucun navigateur ne figure dans la liste, choisissez Edition > Préférences ou Dreamweaver > Préférences

(Macintosh), puis sélectionnez la catégorie Aperçu située dans la partie gauche du navigateur pour sélectionner un navigateur

•

Appuyez sur la touche F12 (Windows) ou Option+F12 (Macintosh) pour afficher la page en cours dans votre navigateur par défaut.

•

Appuyez sur la combinaison de touches Ctrl+F12 (Windows) ou Commande+F12 (Macintosh) pour afficher la page en cours dans votre navigateur secondaire.

2

Cliquez sur les liens et testez le contenu de votre page.

Si vous utilisez Internet Explorer sous Windows XP avec le Service Pack 2, le navigateur peut renvoyer un message indiquant que le contenu actif ne sera pas affiché. Pour résoudre ce problème, incluez le code Mark of the Web dans le fichier.

Remarque :

Le contenu lié à un chemin relatif à la racine n'apparaît pas lorsque vous lancez l'aperçu de documents dans un navigateur local, sauf si vous spécifiez un serveur de test ou activez l'option Aperçu à l'aide d'un fichier temporaire dans Edition

> Préférences > Aperçu dans le navigateur. En effet, à la différence des serveurs, les navigateurs ne reconnaissent pas les racines de sites.

Pour lancer l'aperçu d'un contenu lié à des chemins relatifs à la racine, placez le fichier sur un serveur distant, puis choisissez

Fichier > Aperçu dans le navigateur pour l'afficher.

3

Fermez la page dans le navigateur après avoir effectué le test.

Voir aussi

« Chemins relatifs à la racine du site » à la page 269

Affichage de l'aperçu du contenu actif dans Internet Explorer (Windows)

Si vous affichez un aperçu d'un document incluant du contenu actif dans Internet Explorer après avoir installé le Service

Pack 2 de Windows XP, le navigateur n'affiche pas le contenu actif. Pour résoudre ce problème, incluez le code Mark of the

Web dans le document.

285

DREAMWEAVER CS3


286

Internet Explorer bloque le contenu actif et les scripts qui tentent de s'exécuter dans la zone de la machine locale. Pour des raisons de sécurité, Microsoft a renforcé les restrictions portant sur ce qui peut s'exécuter dans cette zone par défaut. Le code Mark of the Web demande au navigateur d'exécuter du contenu actif dans une autre zone, dans ce cas, la zone Internet.


Insertion du code Mark of the Web

❖

Une fois le document ouvert dans Dreamweaver, sélectionnez Commandes > Insérer Mark of the Web.

Dreamweaver insère la ligne suivante dans votre code :



Cette ligne permet au navigateur de contourner la zone Machine locale et d'exécuter le contenu actif dans la zone Internet.

Suppression du code Mark of the Web

1

Dans Dreamweaver, ouvrez le document contenant le code Mark of the Web.

2

Sélectionnez Commands > Supprimer Mark of the Web.

Désignation des navigateurs d'aperçu

Vous pouvez définir jusqu'à 20 navigateurs à utiliser pour afficher un aperçu, et vous pouvez désigner des navigateurs principaux et secondaires. Il est conseillé de demander un aperçu de votre site pour les navigateurs suivants : Internet

Explorer 6.0, Netscape Navigator 7.0 et le navigateur Safari pour Macintosh. Si vous le souhaitez, vous pouvez tester vos pages sur un navigateur en mode texte, comme Lynx, en plus de ces navigateurs graphiques les plus courants.

1

Procédez de l'une des manières suivantes pour ouvrir les options Aperçu dans le navigateur :

•

Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), puis sélectionnez la catégorie

Aperçu dans le navigateur dans la liste de gauche.

•

Choisissez Fichier > Aperçu dans le navigateur > Modifier la liste des navigateurs.

2

Pour ajouter un navigateur dans la liste, cliquez sur le bouton plus (+), complétez la boîte de dialogue Navigateurs, puis cliquez sur OK.

3

Pour supprimer un navigateur de la liste, sélectionnez-le, puis cliquez sur le bouton moins (-).

4

Pour modifier les paramètres d'un navigateur sélectionné, cliquez sur le bouton Modifier, effectuez les modifications dans la boîte de dialogue Modifier le navigateur, puis cliquez sur OK.

5

Sélectionnez l'option Navigateur principal ou Navigateur secondaire pour indiquer si le navigateur sélectionné est le navigateur primaire ou secondaire.

Appuyez sur F12 (Windows) ou Option+F12 (Macintosh) pour ouvrir le navigateur principal et sur Ctrl+F12 (Windows) ou Commande+F12 (Macintosh) pour ouvrir le navigateur secondaire.

6

Sélectionnez Aperçu à l'aide d'un fichier temporaire pour créer une copie temporaire qui sera utilisée pour l'aperçu et le déboguage. Désélectionnez cette option si vous souhaitez mettre le document directement à jour.

Aperçu des pages sur les appareils mobiles

Prévisualisation d'un contenu mobile avec Adobe Device Central et Dreamweaver

Pour prévisualiser des pages créées dans Dreamweaver sur différents périphériques mobiles, utilisez Device Central avec sa fonction intégrée Small-Screen Rendering d'Opera. Des navigateurs différents sont installés sur les différents périphériques, mais la prévisualisation peut vous donner un bon aperçu du contenu et de son comportement sur un périphérique donné.

1

Lancez Dreamweaver.

2

Ouvrez un fichier.

DREAMWEAVER CS3


287

3


•

Sélectionnez Fichier > Aperçu dans le navigateur > Device Central.

•

Dans la barre d'outils de la fenêtre du document, cliquez et maintenez enfoncé le bouton du navigateur Aperçu/débogage dans le navigateur et sélectionnez Aperçu dans Device Central.

Le fichier est affiché dans l'onglet Emulateur de Device Central. Pour poursuivre le test, cliquez deux fois sur le nom d'un autre périphérique dans les listes Jeux de périphériques ou Périphériques disponibles.

Chapitre 11 : Utilisation de code de page

Adobe® Dreamweaver® CS3 est un outil de conception visuelle et un éditeur de code fiable, qui fournit des fonctionnalités d'indication de code, de réduction de code, de débogage de code et d'autres fonctions d'édition de code.

A propos du codage dans Dreamweaver

Langages pris en charge

Adobe® Dreamweaver® CS3 contient à la fois des options permettant de lancer des éditeurs de texte et des options conçues

•

HTML

•

XHTML

•

CSS

•

JavaScript

•

CFML (ColdFusion Markup Language)

•

Visual Basic (pour ASP et ASP.NET)

•

C# (pour ASP.NET)

•

JSP

•

PHP

D'autres langages, par exemple le langage Perl, ne sont pas pris en charge par les fonctions de codage spécifiques au langage de Dreamweaver ; vous pouvez par exemple créer et modifier des fichiers Perl, mais vous ne pourrez pas accéder aux indicateurs de code.

Voir aussi

« Modification automatique du code dans Dreamweaver » à la page 289

« Utilisation des indicateurs de code » à la page 301

A propos de la correction du marquage non valide

Si votre document contient du code non valide, Dreamweaver l'affiche en mode Création et, si les options adéquates sont activées, le met en surbrillance en mode Code. Si vous sélectionnez ces éléments dans l'un des deux modes, l'inspecteur

Propriétés affiche des informations sur les causes de leur non-validité et sur la manière de corriger les erreurs.

Vous pouvez indiquer vos préférences concernant la correction automatique de certains types d'éléments de code erronés lorsque vous ouvrez un document.

Voir aussi


« Définition des préférences de correction de code » à la page 298

288

DREAMWEAVER CS3


289

Modification automatique du code dans Dreamweaver

Certaines options de Dreamweaver permettent de nettoyer automatiquement votre code selon vos propres critères.

Toutefois, le code n'est corrige que si vous activez les options correspondantes ou si l'une de vos opérations entraîne une modification du code. Par exemple, Dreamweaver modifie vos espaces blancs et la casse des attributs uniquement si vous sélectionnez la commande Appliquer le format source.

Quelques-unes des options de réécriture du code sont activées par défaut.

Les fonctions Roundtrip HTML de Dreamweaver permettent d'échanger des documents entre un éditeur HTML en mode texte et Dreamweaver, moyennant un impact nul ou infime sur le contenu et la structure du code source HTML original du document. Parmi ces fonctionnalités, on compte les suivantes :

•

Vous pouvez lancer un éditeur de texte tiers pour modifier le document actif.

•

Par défaut, Dreamweaver ne modifie pas le code créé ou modifié par un autre éditeur HTML, même s'il est incorrect, à moins que vous n'ayez activé les options de réécriture.

•

En l'absence de critères de référence, Dreamweaver conserve telles quelles les balises qu'il ne reconnaît pas, notamment les balises XML. Si une balise non reconnue encadre une autre balise (par exemple,

<MyNewTag><em>text</MyNewTag></em>)

, Dreamweaver la marque comme erronée, mais ne modifie pas le code.

•

Vous pouvez activer certaines options de Dreamweaver pour mettre les éléments de code HTML incorrects en surligné

(jaune) dans le mode Code. Si vous sélectionnez une section en surbrillance, l'inspecteur Propriétés affiche des informations sur l'erreur et la manière de la corriger.

Voir aussi


« Définition des préférences de correction de code » à la page 298

« Personnalisation des raccourcis clavier » à la page 295

« A propos du code de comportement de serveur » à la page 293

A propos du code XH

T

ML généré par Dreamweaver

Dreamweaver génère du nouveau code XHTML et nettoie le code XHTML existant, conformément à la plupart des spécifications XHTML. Vous disposez également des outils permettant de se conformer aux rares spécifications XHTML ignorées lors de ce type d'opération.

Remarque :

Certaines de ces spécifications sont également exigées dans diverses versions du langage HTML.

Le tableau ci-dessous répertorie les spécifications XHTML automatiquement observées par Dreamweaver :

Spécification XH

T

ML Actions effectuées par Dreamweaver

Une d

é c l aration

D

O

CTYPE doit pr

é c

é der

l'élé ment racine dans l e document , l aque ll e doit faire r

é f

é rence

à l' un des trois fichiers

DTD (D ocument

T ype D efinition ) pour ou

j eu de cadres

)

.

X H TM L ( strict , transitionne l

Aj oute une d

é c l aration

X

H

TM

L

D

O

CTYPE à un document X H TM L :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">

Ou

, si

l e document

X

H

TM

L comporte un

j eu de cadres

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">

L 'élé ment racine du document doit ê tre html

, et l'élé ment html doit d

é signer

l' espace de noms X H TM L.

L

' imbrication de tous

l es

élé ments du document doit ê tre correcte

<p>Voici un <i>exemple incorrect.</p></i> <p>Voici un

<i>exemple incorrect.</i></p>

Aj oute l' attribut namespace

à l'élé ment html comme suit :

<html xmlns="http://www.w3.org/1999/xhtml">

Un document standard doit comporter

l es

élé ments structure l s head

, title et body

.

Un document de

j eu de cadres doit comporter

l es


, title et frameset

.

D ans un document standard

, inc l ut

l es


, title et body

.

D ans un document de j eu de cadres , inc l ut

l es

élé ments head , title et frameset

.

Gé n

è re correctement

l e code imbriqu

é et

, pendant

l e nettoyage du code X H TM L , corrige l' imbrication du code non g

é n

é r

é par

D ream w eaver.

T ous l es noms d 'élé ments et d ' attributs doivent ê tre r

é dig

é s en minuscu l es.

Impose l' usage des minuscu l es dans l es noms d 'élé ments et d

' attributs H

TM

L du code

X

H

TM

L g

é n

é r

é par ses soins et pendant l e nettoyage du code X H TM L , ind é pendamment des pr

é f

é rences de casse d

é finies pour

l a ba l ise et

l' attribut.

T ous l es élé ments doivent se terminer par une ba l ise de fin

, à moins qu

' i l s ne soient d

é c l ar

é s dans l e fichier DTD comme EMPTY .

Ins è re des ba l ises de fin dans l e code g é n é r é par ses soins , ainsi que pendant

l e nettoyage du code

X

H

TM

L.

Les

élé ments vides doivent se terminer par une ba l ise de fin ou l a ba l ise de d é but doit ê tre ferm é e avec

l e code

/>

.

P ar e x emp l e

, <br> est incorrect ;

l a forme correcte de l a ba l ise est soit

<br></br>

, soit

<br/>

.

Les

élé ments vides sont

l es suivants area

, base

, basefont

, br

, col

, frame

, hr

, img , input , isindex , link , meta et param

.

Ins

è re

l es

élé ments vides avec un espace avant

l a barre ob l ique de fermeture des ba l ises vides dans l e code g é n é r é par ses soins ainsi que pendant


X

H

TM

L.

P our garantir l a r é trocompatibi l it é avec l es navigateurs non

XM

L

, un espace doit pr

é c

é der

l e code

/>

( par e x emp l e ,

<br /> et non

<br/>

) .

I l est impossib l e d

' abr

é ger

l es attributs

<td

<td

; ainsi

, nowrap> est incorrect ; l a forme correcte est nowrap="nowrap">

.

Ins

è re des paires attribut

/ va l eur comp lè tes dans

l e code g é n é r é par ses soins , ainsi que pendant l e nettoyage du code

X

H

TM

L.

C ette r è g l e s ' app l ique au x attributs suivants checked , compact , declare , defer , disabled

, ismap

, multiple

, noresize

, noshade , nowrap , readonly et selected

.

R emarque : Un navigateur H TM L ne prenant pas en charge

H

TM

L

4 risque de ne pas pouvoir interpr

é ter ces attributs boo lé ens sous l eur forme comp lè te.

T ous l es attributs doivent ê tre p l ac é s entre gui ll emets.

M et l es va l eurs d ' attribut entre gui ll emets dans l e code g

é n

é r

é par ses soins

, ainsi que pendant

l e nettoyage du code X H TM L.

DREAMWEAVER CS3


290

DREAMWEAVER CS3


291

Spécification XH

T

ML Actions effectuées par Dreamweaver

Les

élé ments suivants doivent comporter un attribut id et un attribut name

: a

, applet

, form

, frame , iframe , img et map

.

P ar e x emp l e

, <a name="intro">Introduction</a> est incorrect ;

l a forme correcte est

A ffecte

l a m

ê me va l eur au x attributs name et id , toutes

l es fois o ù l' attribut name est d é fini par un inspecteur P ropri é t é s , dans

l e code g

é n

é r

é par

D ream w eaver

, ainsi que pendant

l e nettoyage du code X H TM L.

<a id="intro">Introduction</a> ou

<a id="section1" name="intro">

Introduction</a>

.

D ans

l e cas d

' attributs dont

l es va l eurs sont de type

E num é r é, ce ll es ci doivent figurer en minuscu l es.

Impose

l' uti l isation des minuscu l es pour

l es va l eurs de type

E num é r é dans l e code g é n é r é par ses soins , ainsi que pendant


X

H

TM

L.

Une va l eur de type

E num

é r

é est une va l eur appartenant à une l iste donn é e de va l eurs autoris

é es ; par e x emp l e

, l' attribut align comprend l es va l eurs autoris é es suivantes center , justify , left et right

.

T ous l es élé comporter ments un de attribut script et type

.

de sty l e doivent

( La n é cessit é de l' attribut de type d ' un élé ment de script a

é t

é introduite avec H

TM

L

4, l ors de

l a d é pr é ciation de l' attribut de language

.

)

Dé finit l es attributs de type et de langage dans l es

élé ments de script ainsi que

l' attribut de type dans

l es

élé ments de style

, mais aussi dans l e code g é n é r é par ses soins et pendant


X

H

TM

L.

T ous

l es

élé ments img et area doivent comprendre un attribut alt

.

Dé finit ces attributs dans

l e code g

é n

é r

é par ses soins et

, pendant l e nettoyage du code X H TM L , signa l e l es attributs alt manquants.

Voir aussi

« Conformité des pages avec le langage XHTML » à la page 315

$

*

A propos des expressions régulières

Les expressions régulières sont des modèles décrivant des combinaisons de caractères dans un texte. Utilisez-les dans vos nombre ».

Le tableau ci-dessous présente les caractères spéciaux des expressions régulières, leur signification et des exemples d'utilisation. Pour rechercher du texte contenant un des caractères spéciaux présentés dans le tableau, indiquez qu'il s'agit d'un caractère spécial à l'aide d'une barre oblique inversée. Par exemple, pour rechercher l'astérisque dans la phrase conditions spéciales*

, vous pouvez utiliser un modèle de recherche tel que celui-ci : spéciales\* . Si vous n'indiquez pas

« spécialess » et « spécialesss »), et pas seulement celles qui sont suivies d'un astérisque.

Caractère

^

+

?

trouve

Dé but de saisie ou de

l igne.

Exemple

^T trouve

« T » dans

« T onnerre de

B rest

», mais pas dans

«

La case de

l' onc l e

T om

» n$ trouve

« » dans

« ma l in

» mais pas dans

« noir

» F in de saisie ou de

l igne.

Le caract

è re pr

é c

é dent

, 0 ou p l usieurs fois.

um* trouve

« u dans

«

« um

» bouge dans

»

« rhum

», « umm

» dans

« yummy et

Le caract

è re pr

é c

é dent

, 1 ou p l usieurs fois.

um+ trouve rien dans

«

« um bouge

»

» dans

« rhum

», « umm

» dans

« yummy mais

Le caract

è re pr

é c

é dent

, une fois au ma x imum

( en d

' autres termes

, l e caract

è re pr

é c

é dent est facu l tatif

)

.

st?on

trouve

« J ohnston

« son

» dans

«

», mais rien dans

«

J ohnson

» et

« ston

A pp l eton ou

« dans tension

»

\B

\ d

\D

\S

\ t

DREAMWEAVER CS3


292

DREAMWEAVER CS3


293

Caractère

\w

trouve Exemple

T out caract

è re a l phanum é rique , y compris l e caract

è re de sou l ignement.

C' est l'é quiva l ent de [A-Z a -z0-

9_]

.

c

\w* trouve

« chien

« chien » dans «

» dans

« e chien l e cou du chien noir » noir

.

», ainsi que

« cou et

\W T out caract è re non a l phanum

é rique.

C' est l'é quiva l ent de [^A-Z a -z0-9_] .

\W trouve « » dans « T intin &M i l ou » et « % dans « 100% » .

C tr l+E ntr

é e ou

M a j+E ntr é e

(W indo w s

), ou

C ontr ôl e +

R etour ou

M a j+R etour ou

C ommande

+R etour

(M acintosh

)

R etour chariot.

V ei ll e z à d é sactiver l' option Ignorer l es diff

é rences entre

l es espaces b l ancs l orsque vous effectue z ce type de recherche si vous n ' uti l ise z pas des e x pressions r

é gu l i

è res.

Note z que cette recherche porte sur un caract

è re particu l ier et non sur l a notion de retour à l a l igne ; par e x emp l e

, e ll e ne trouvera pas une ba l ise

<br> ou

<p>

.

Les caract

è res de retour chariot apparaissent en tant qu

' espaces en mode

C r é ation , et non en tant que sauts de

l igne.

Utilisez des parenthèses pour définir au sein de l'expression régulière des groupes auxquels il sera fait référence plus tard ; utilisez $1, $2, $3, etc. dans le champ Remplacer pour faire référence au premier, deuxième, troisième, etc., groupe entre parenthèses.

Remarque :

Dans la zone de texte Rechercher, faites référence au groupe entre parenthèses mentionné plus tôt dans l'expression régulière en indiquant \1, \2, \3 etc. au lieu de $1, $2, $3.

Par exemple, la recherche de (\d+)\/(\d+)\/(\d+) et le remplacement par $2/$1/$3 échangent le jour et le mois dans une date séparée par des barres obliques permettant ainsi la conversion entre les dates de style américain et les dates de style européen.

Voir aussi

« Recherche de balises, d'attributs ou de chaînes de texte dans le code » à la page 307

« Enregistrement et chargement de modèles de recherche » à la page 308

A propos du code de comportement de serveur

Lorsque vous sélectionnez un comportement de serveur dans le panneau Comportements de serveur pendant le développement d'une page dynamique, Dreamweaver insère un ou plusieurs blocs de code dans la page pour faire fonctionner le comportement de serveur.

Si vous modifiez manuellement le code contenu dans un bloc de code, les panneaux, par exemple le panneau Liaisons et le panneau Comportements de serveur, ne sont plus accessibles pour la modification du comportement du serveur.

Dreamweaver détecte les comportements de serveur en se repérant à des modèles de code spécifiques dans la page, puis les affiche dans le panneau correspondant. Toute modification du code d'un bloc de code empêche dès lors Dreamweaver de détecter le comportement de serveur et de l'afficher dans le panneau Comportements de serveur. Le comportement de serveur subsiste toutefois dans la page : vous pouvez donc le corriger dans l'environnement de codage de Dreamweaver.

DREAMWEAVER CS3


294

Voir aussi


« Optimisation de l'espace de travail pour le développement visuel » à la page 512

« Affichage des enregistrements de base de données » à la page 543

Configuration d'un environnement de codage

Modification d'un environnement de codage

Vous pouvez modifier l'environnement de codage de Dreamweaver pour l'adapter à la façon dont vous travaillez. Vous pouvez par exemple changer le mode d'affichage du code, définir différents raccourcis clavier ou importer et utiliser votre bibliothèque de balises de prédilection.

Affichage du code

Vous pouvez visualiser le code source du document actif de plusieurs façons : en l'affichant dans la fenêtre de document après avoir activé le mode Code, en fractionnant la fenêtre de document pour afficher à la fois la page et son code, ou encore en travaillant dans l'Inspecteur de code, qui forme une fenêtre de code distincte. L'inspecteur de code fonctionne comme le mode Code; il peut être considéré comme un mode Code détachable pour le document actif.

Voir aussi


« Définition des indicateurs de code » à la page 298

« Définition des couleurs du code » à la page 300

Affichage du code dans la fenêtre de document

❖

Codage et modification simultanée d'une page dans la fenêtre de document

1


Le code apparaît dans le volet supérieur, et la page dans le volet inférieur.

2

Pour afficher la page au premier plan, choisissez Mode Création au premier plan dans le menu Affichage de la barre d'outils du document.

3

Pour redimensionner les volets dans la fenêtre de document, faites glisser la barre de division à l'endroit approprié. La barre de division est intercalée entre les deux volets.

Toutes les modifications apportées dans le mode Création se répercutent automatiquement dans le mode Code. Toutefois, après avoir effectué des modifications en mode Code, vous devez mettre à jour manuellement le document dans le mode

Création ; il vous suffit pour cela de cliquer dans ce mode ou d'appuyer sur la touche F5.

Affichage du code dans une fenêtre distincte dans l'inspecteur de code

L'inspecteur de code permet de travailler dans une fenêtre de code distincte, comme vous le faites en mode Code.

❖

Choisissez Fenêtre > Inspecteur de code. La barre d'outils contient les options suivantes :

Gestion des fichiers

Permet de placer ou d'acquérir le fichier.

Aperçu/Débogage dans le navigateur

Permet de prévisualiser ou de déboguer votre document dans un navigateur.

Actualiser mode Création

Met à jour le document en mode Création, de façon à ce qu'il applique les modifications apportées dans le code. Les modifications apportées dans le code n'apparaissent pas automatiquement dans le mode

Création : vous devez exécuter tout d'abord certaines opérations, comme enregistrer le fichier ou utiliser ce bouton.

DREAMWEAVER CS3


295

Référence

la page 309.

Ouvre le panneau Référence. Consultez la section « Utilisation des documents de référence sur les langages » à

N avigation par code

Permet de se déplacer rapidement dans le code. Consultez la section « Accès à une fonction JavaScript ou VBScript » à la page 307.

Afficher les options

Permet de déterminer la façon dont le code est affiché. Consultez la section « Définition de l'apparence du code » à la page 296.

barre d'outils de codage » à la page 303.

Utilisation de l'espace de travail orienté en mode Code (Windows uniquement)

Sous Windows, vous pouvez utiliser un espace de travail semblable à celui de Adobe Macromedia® HomeSite®, avec les groupes de panneaux rangés à gauche de la fenêtre principale et non à droite. Dans cette présentation de l'espace de travail, l'inspecteur Propriétés est réduit par défaut et la fenêtre de document s'affiche en mode Code par défaut.

Voir aussi

Personnalisation des raccourcis clavier

Rien ne vous empêche d'utiliser vos raccourcis clavier préférés dans Dreamweaver. Si vous êtes habitué à utiliser des raccourcis clavier spécifiques (par exemple, Ctrl+Entrée pour insérer un saut de ligne, Ctrl+G pour atteindre un code précis ou Maj+F6 pour valider un fichier), vous pouvez les intégrer dans Dreamweaver au moyen de l'éditeur de raccourcis clavier.

Pour plus d'informations, reportez-vous à la section « Personnalisation des raccourcis clavier » à la page 678.

Voir aussi

« Manipulation de fragments de code » à la page 302

O

uverture de fichiers en mode Code par défaut

Lorsque vous ouvrez un fichier qui ne contient normalement aucun code HTML (par exemple, un fichier JavaScript), il s'ouvre en mode Code (ou dans l'Inspecteur de code), et non pas en mode Création. Vous pouvez définir les types de fichiers à ouvrir en mode Code.

1


2

Sélectionnez la catégorie Types de fichiers/Editeurs dans la liste de gauche.

3

Dans la zone de texte Ouvrir en mode Code, entrez les extensions des types de fichier que vous voulez ouvrir automatiquement en mode Code.

Insérez un espace entre les extensions. Vous pouvez en ajouter autant que vous le souhaitez.

Voir aussi

« Utilisation d'un éditeur externe » à la page 300

« Recherche d'erreurs de codage à l'aide du validateur » à la page 312

DREAMWEAVER CS3


296

Personnalisation de l'environnement de codage

A propos des préférences de codage

Vous pouvez personnaliser l'environnement de codage de Dreamweaver afin de l'adapter à vos besoins en définissant, par exemple, les préférences de formatage de code, de correction et de couleur.

Remarque :

Pour définir les préférences avancées, utilisez l'éditeur de la bibliothèque de balises (consultez la section « Gestion des bibliothèques de balises » à la page 328).

Définition de l'apparence du code

Le menu Affichage > Options d'affichage de code permet de configurer le renvoi à la ligne des mots, l'affichage du numéro des lignes de code, la mise en surbrillance du code HTML incorrect, la coloration de la syntaxe des éléments de code, la mise en retrait du code, ainsi que l’affichage des caractères masqués .

1

Affichez le document dans le mode Code ou l'Inspecteur de code.

2


•

Choisissez Affichage > Code et création

•

Cliquez sur le bouton Options d'affichage dans la barre d'outils située en haut du mode Code ou de l'Inspecteur de code.

3

Activez ou désactivez l’une des options suivantes :

Renvoi à la ligne

Renvoie le code à la ligne pour le rendre visible sans qu'il soit nécessaire de le faire défiler horizontalement.

Cette option n'insère aucun saut de ligne ; elle a pour seule fonction de simplifier la consultation du code.

N uméros de lignes

Affiche le numéro des lignes de code sur le côté.

Caractères masqués

Permet d’afficher les caractères spéciaux au lieu d’un simple espace blanc. Par exemple, un point apparaît pour masquer chaque espace, un double chevron remplace chaque tabulation, et une marque de paragraphe remplace chaque saut de ligne.

Remarque :

Les retours à la ligne contextuels que Dreamweaver utilise pour le renvoi du texte à la ligne ne sont pas symbolisés par une marque de paragraphe.

Surligner le code non valide

Active, dans Dreamweaver, le surlignage en jaune du code HTML non valide. Dès la sélection d'une balise incorrecte, l'inspecteur Propriétés affiche des instructions pour corriger l'erreur.

Coloration de la syntaxe

Active ou désactive la mise en couleurs du code. Pour plus d'informations sur la modification des

Retrait auto

Automatise la mise en retrait du code lorsque vous appuyez sur la touche Entrée pendant la rédaction du code.

La nouvelle ligne de code s'aligne au même niveau que la ligne qui la précède. Pour plus d'informations sur la modification

Voir aussi



Modification du format du code

Vous pouvez modifier l'aspect de votre code en définissant des préférences de formatage telles que la mise en retrait, la longueur de ligne et la casse des noms de balises et d'attributs.

Toutes les options de formatage de code, à l'exception de l'option Remplacer la casse de, ne s'appliquent automatiquement qu'aux nouveaux documents et aux additions à des documents que vous créez par la suite.

DREAMWEAVER CS3


297

Pour modifier la mise en forme d'un document HTML existant, ouvrez ce document puis cliquez sur Commandes >

Appliquer le format source.

1


2

Sélectionnez la catégorie Format du code dans la liste de gauche.

3


Retrait

Indique si le code généré par Dreamweaver doit être mis en retrait (en conformité avec les règles de retrait définies dans ces préférences) ou non.

Remarque :

La majorité des options de retrait de cette boîte de dialogue ne s'appliquent qu'au code généré par Dreamweaver et non au code entré par vos soins. Pour que chaque nouvelle ligne entrée s'aligne au même niveau que la précédente, utilisez

l'option Retrait auto dans les options d'affichage du mode Code. Pour plus d'informations, consultez la section « Définition de l'apparence du code » à la page 296.

Avec

(Zone de texte ou menu contextuel) Spécifie le nombre d'espaces ou de tabulations que Dreamweaver doit utiliser afin de mettre en retrait le code généré. Par exemple, si vous tapez 3 dans la zone de texte et si vous sélectionnez Tabulations dans le menu contextuel, le code généré par Dreamweaver sera mis en retrait de trois tabulations à chaque niveau de mise en retrait.

T aille de la tabulation

Détermine la taille, en caractères, de chaque tabulation dans le mode Code. Par exemple, si cette taille taille du retrait est définie sur 3 et que les caractères utilisés sont des tabulations, le code généré par Dreamweaver est mis en retrait de trois tabulations par niveau de mise en retrait, ce qui correspond à un espace de 12 caractères en mode Code.

Remarque :

Dreamweaver effectue les mises en retrait à l'aide de tabulations ou d'espaces mais ne convertit pas une série d'espaces en tabulation lors de l'insertion de code.

Renvoi à la ligne auto

Insère un retour de chariot (ou retour à la ligne forcé) lorsqu'une ligne atteint la largeur de colonne spécifiée. (Dreamweaver insère des retours de chariot uniquement lorsqu'ils ne modifient pas l'apparence du document dans un navigateur. Certaines lignes peuvent donc être plus longues que la valeur indiquée dans l'option Renvoi à la ligne auto). A l'inverse, l'option Retour à la ligne du mode Code affiche les lignes dont la longueur dépasse la largeur de la fenêtre comme si elles contenaient des retours de chariot, sans en insérer véritablement.

T ype de saut de ligne

Permet d'indiquer le type de serveur distant (Windows, Macintosh ou UNIX) qui hébergera votre site. Le choix du type de caractères de saut de ligne approprié (CR, CR/LF, LF) garantit que votre code source HTML s'affiche correctement lorsqu'il est affiché à partir du serveur distant. Ce paramètre est également utile lorsque vous travaillez avec un éditeur de texte externe qui ne reconnaît que certains types de retours de chariot. Par exemple, utilisez

CR/LF (Windows), si votre éditeur de texte est le Bloc-Notes de Windows, et CR (Macintosh) s'il s'agit de SimpleText.

Remarque :

Pour les serveurs auxquels vous vous connectez via FTP, cette option ne s'applique qu'en mode de transfert binaire ; le mode de transfert ASCII de Dreamweaver ignore cette option. Si vous téléchargez (en réception) des fichiers en mode

ASCII, Dreamweaver définit les sauts de ligne en fonction du système d'exploitation de votre ordinateur ; si vous transférez des fichiers en mode ASCII, les sauts de ligne sont toujours définis comme CR/LF.

Casse de balise par défaut et Casse d'attribut par défaut

contrôlent l'usage des majuscules dans les noms de balises et d'attributs. Ces options s'appliquent aux balises et aux attributs que vous insérez ou que vous modifiez dans le mode

Création, mais pas aux balises ou attributs que vous entrez directement dans le mode Code (ou l'Inspecteur de code), ni aux balises ou attributs déjà contenus dans un document que vous ouvrez (sauf, dans ce dernier cas, si vous avez également activé l'une des options Remplacer la casse de).

Remarque :

Cette préférence s'applique uniquement aux pages HTML. Dreamweaver l'ignore pour les pages XHTML étant donné que les balises et les attributs en majuscules sont incorrects dans XHTML.

Remplacer la casse de : Balises et Attributs

Spécifie s'il faut toujours convertir les noms de balises et d'attributs dans la casse spécifiée, même lors de l'ouverture d'un document HTML existant. Lorsque vous activez l'une de ces options et que vous cliquez sur OK pour fermer la boîte de dialogue, les balises et les attributs du document actif sont immédiatement convertis dans la casse indiquée et il en sera de même dans tous les documents que vous ouvrirez par la suite (du moins tant que vous n'aurez pas désactivé cette option). Les balises et les attributs que vous tapez en mode Code (ou dans l'Inspecteur de code) ou dans Quick Tag Editor ou bien que vous insérez à partir de la barre Insertion, sont également convertis dans la casse spécifiée. Par exemple, si vous voulez que les noms des balises soient toujours convertis en minuscules, spécifiez minuscules

DREAMWEAVER CS3


298

dans l'option Casse de balise par défaut et activez l'option Remplacer la casse de : Balises. Lorsque vous ouvrez ensuite un document contenant des noms de balises en majuscules, Dreamweaver les convertit en minuscules.

Remarque :

D'anciennes versions du code HTML permettaient d'écrire les noms d'attributs et les balises en majuscules ou en minuscules, mais le XHTML requiert des minuscules. L'usage du XHTML étant de plus en plus répandu, il est conseillé d'utiliser des minuscules pour ces éléments.

Balise

T

D :

N e pas inclure de saut de ligne dans la balise

T

D

Résout un problème de rendu qui se rencontre dans certains anciens navigateurs, si un espace blanc ou des sauts de ligne sont placés immédiatement après une balise <td> ou juste avant une balise </td>. Si vous activez cette option, Dreamweaver ne place pas de saut de ligne après une balise <td> ou avant une balise </td>, même si la mise en forme de la bibliothèque de balises indique qu'un saut de ligne devrait être inséré.

Formatage avancé

Permet de définir des options de mise en forme pour le code CSS (Cascading Style Sheets, feuilles de style en cascade) et pour les différents attributs et balises dans l'éditeur de la bibliothèque de balises.

Espace blanc

(version japonaise uniquement) Permet de sélectionner un espace insécable ( ) ou un espace Zenkaku pour votre code HTML. L'espace blanc sélectionné avec cette option est utilisé pour les balises vides lors de la création d'un

Voir aussi

« Mise en forme du code CSS » à la page 136

Définition des indicateurs de code

Les indicateurs de code vous permettent d'insérer rapidement des noms de balises, des attributs et des valeurs à mesure que vous entrez du code en mode Code ou dans Quick Tag Editor.

Même si l'affichage des indicateurs de code est désactivé, vous pouvez afficher un indicateur en mode Code en appuyant sur les touches Ctrl+Barre d'espace.

1


2

Sélectionnez la catégorie Indicateurs de code dans la liste de gauche.

3


Même si l'affichage des indicateurs de code est désactivé, vous pouvez afficher un indicateur en mode Code en appuyant sur les touches Ctrl+Barre d'espace.

Balises de fermeture

Permet de spécifier le mode d'insertion des balises de fermeture par Dreamweaver. Par défaut,

Dreamweaver insère la balise de fermeture automatiquement lorsque vous tapez les caractères

</

. Vous pouvez modifier ce comportement par défaut, de façon à ce que Dreamweaver insère une balise de fermeture suite au crochet fermant (>) de la balise d'ouverture, ou de façon à omettre les balises de fin.

Activer les indicateurs de code

Entraîne l'affichage des indicateurs de code lorsque vous entrez du code en mode Code.

Réglez le curseur Délai pour définir le délai (en secondes) qui s'écoule avant l'apparition des indicateurs appropriés.

Menus

Définit précisément le type d'indicateurs de code à afficher pendant la saisie. Libre à vous d'utiliser tous les menus ou une partie seulement.

Voir aussi

« Utilisation des indicateurs de code » à la page 301

« Utilisation des menus d'indication dans Quick Tag Editor » à la page 319

Définition des préférences de correction de code

Les préférences de correction de code permettent de spécifier les préférences de modification de code par Dreamweaver lors de l'ouverture de documents, lorsque vous copiez et collez des éléments de formulaires ou que vous entrez des valeurs et adresses URL à l'aide des outils (par exemple, l'inspecteur Propriétés). Ces préférences sont sans effet lorsque vous modifiez du code HTML ou des scripts dans le mode Code.

DREAMWEAVER CS3


299

Si vous désactivez ces options de correction, les éléments de marquage non valides sont affichés dans la fenêtre de document pour le code HTML qu'il aurait corrigé.

1


2

Sélectionnez la catégorie Correction du code dans la liste de gauche.

3


Corriger les balises incorrectement imbriquées et non fermées

Corrige les balises qui se chevauchent. Par exemple,

<b><i>texte</b></i>

est réécrit comme

<b><i>texte</i></b>.

Cette option insère également des guillemets et des crochets de fermeture s'ils sont absents.

Renommer les éléments de formulaire lors du collage

option est activée par défaut.

Garantit l'absence de noms d'objets de formulaire en double. Cette

Remarque :

Contrairement à d'autres options de cette boîte de dialogue de préférences, cette option ne s'applique pas à l'ouverture d'un document, mais uniquement lorsque vous copiez et collez un élément de formulaire.

Supprimer les balises de fermeture superflues

correspond.

Supprime les balises de fermeture auxquelles aucune balise d'ouverture ne

M'avertir lors de la correction ou de la suppression de balises

Affiche un récapitulatif des codes HTML techniquement non valides que Dreamweaver a tenté de corriger. Ce récapitulatif indique l'emplacement du problème (à l'aide des numéros de ligne et de colonne), pour vous permettre de vérifier la correction et veiller à ce qu'elle produise l'effet voulu.

N e jamais corriger le code : Dans les fichiers avec extensions.

Permet d'empêcher Dreamweaver de corriger le code dans les fichiers portant les extensions indiquées. Cette option est particulièrement utile pour les fichiers contenant des balises propriétaires.

Coder <, >, & et " dans les valeurs d'attributs à l'aide de &

Garantit que les valeurs d'attribut entrées ou modifiées à l'aide des outils Dreamweaver (par exemple, l'inspecteur Propriétés) ne contiennent que des caractères autorisés. Cette option est activée par défaut.

Remarque :

Cette option et les options suivantes ne s'appliquent pas aux adresses URL entrées dans le mode Code. De plus, ces options n'entraînent pas de modification dans le code déjà présent dans un fichier.

N e pas coder les caractères spéciaux

Empêche toute modification des adresses URL par Dreamweaver en vue de n'utiliser que des caractères autorisés. Cette option est activée par défaut.

Coder caractères spéciaux dans les URL à l'aide de &#

Garantit que, lorsque vous entrez ou modifiez des adresses URL à l'aide des outils Dreamweaver (par exemple, l'inspecteur Propriétés), ces URL ne contiennent que des caractères autorisés.

Coder caractères spéciaux dans les URL à l'aide de %

Fonctionne de façon identique à l'option ci-dessus, mais utilise une autre méthode pour coder les caractères spéciaux. Cette méthode d'encodage (à l'aide du signe %) offre une meilleure compatibilité avec les navigateurs plus anciens, mais ne se montre pas aussi efficace avec les caractères utilisés dans certaines langues.

Insérer à l'aide de scripts adaptés aux navigateurs

Garantit que le contenu actif que vous insérez avec Dreamweaver utilise des balises qui afficheront correctement le contenu dans les versions les plus récentes d'Internet Explorer. Par défaut,

Dreamweaver n'utilise que des scripts adaptés aux navigateurs pour le contenu actif Flash et Shockwave. Cette fonctionnalité est toutefois extensible et permet d'employer des extensions tierces afin d'insérer correctement d'autres types de contenu actif.

Convertir les balises en scripts à l'ouverture de fichier

Les balises

<object>

,

<embed>

et

<applet>

nulles et ajoute les balises

JavaScript appropriées lors de l'ouverture de fichiers possédant du contenu actif.

Voir aussi

« Nettoyage de fichiers HTML créés avec Microsoft Word » à la page 73

DREAMWEAVER CS3


300

Définition des couleurs du code

Utilisez les préférences de coloration du code pour spécifier les couleurs des principales catégories de balises et d'éléments de code, par exemple les balises liées à la mise en forme ou les identificateurs JavaScript. Pour définir les préférences de coloration d'une balise spécifique, modifiez sa définition dans l'éditeur de la bibliothèque de balises.

1


2

Sélectionnez la catégorie Coloration du code dans la liste de gauche.

3

Sélectionnez une couleur d'arrière-plan par défaut pour le mode Code et pour l'Inspecteur de code.

4

Sélectionnez un type de document et cliquez sur Modifier le modèle de coloration.

5

Sélectionnez un élément, puis définissez la couleur de son texte, celle de son arrière-plan et éventuellement son style

(gras, italique ou souligné). Cliquez ensuite sur OK.

L'échantillon de code affiché dans le volet d'aperçu est modifié pour correspondre aux nouveaux styles et couleurs.

6

Cliquez sur OK.

Voir aussi

« Personnalisation des préférences de coloration de code d'un modèle » à la page 399

Utilisation d'un éditeur externe

Vous pouvez spécifier un éditeur externe à utiliser pour l'édition de fichiers possédant des extensions précises. Par exemple, vous pouvez lancer un éditeur de texte comme BBEdit, le Bloc-Notes ou TextEdit à partir de Dreamweaver pour modifier les fichiers JavaScript (JS).

Vous pouvez attribuer différents éditeurs externes pour différentes extensions de nom de fichier.

Voir aussi

« Ouverture de fichiers en mode Code par défaut » à la page 295

Définition d'un éditeur externe pour un type de fichier

1


2

Sélectionnez la catégorie Types de fichiers/Editeurs dans la liste de gauche, puis cliquez sur OK.

O uvrir en mode Code

Dreamweaver.

Précise les extensions de noms de fichiers à ouvrir automatiquement en mode Code dans

Editeur de code externe

Spécifie l'éditeur de texte à utiliser.

Recharger les fichiers modifiés

Indiquez ce que Dreamweaver doit faire lorsqu'il détecte que des changements ont été apportés de l'extérieur à un document déjà ouvert dans Dreamweaver.

Enregistrer au démarrage

Permet d'indiquer si Dreamweaver doit systématiquement enregistrer le document actif avant d'exécuter l'éditeur, ne jamais enregistrer le document ou vous demander s'il doit l'enregistrer ou non à chaque lancement de l'éditeur externe.

Fireworks

Spécifiez les éditeurs pour divers types de fichiers multimédia.

Démarrage d'un éditeur de code externe

❖

Choisissez Edition > Modifier avec éditeur externe.

DREAMWEAVER CS3


301

Rédaction et modification de code

Utilisation des indicateurs de code

Les indicateurs de code vous permettent d'insérer et de modifier le code rapidement et sans erreur de saisie. Une liste de suggestions apparaît lorsque vous tapez certains caractères, par exemple les premières lettres d'une balise, d'un attribut ou d'un nom de propriété CSS. Cette fonction est aussi pratique pour insérer ou modifier du code que pour consulter simplement les attributs disponibles pour une balise, les paramètres associés à une fonction ou les méthodes spécifiques à un objet.

Les indicateurs de code sont disponibles pour différents types de code. Une liste d'éléments correspondant au code saisi s'affiche lorsque vous entrez un caractère spécifique indiquant le début d'un segment de ce code ; par exemple, pour afficher une liste d'indicateurs de code correspondant aux noms de balise HTML, tapez un crochet ouvrant (<).

Pour exploiter pleinement cette fonctionnalité, en particulier lorsque vous l'utilisez pour des fonctions et des objets,

Pour faire disparaître la liste des indicateurs de code, appuyez sur la touche Retour arrière (Windows) ou Arrière

(Macintosh).

Voir aussi

« Définition des indicateurs de code » à la page 298

Affichage d'un menu d'indicateurs de code

❖

Appuyez sur Ctrl + Barre d'espace.

Insertion d'un marqueur ou d'autres éléments de code à l'aide des indicateurs en mode Code

1

Saisissez le premier caractère du segment de code. Par exemple, pour insérer une balise, tapez un crochet ouvrant (

<

) ; pour insérer un attribut, placez le point d'insertion juste après le nom de la balise, puis appuyez sur la barre d'espace.

Une liste d'éléments (par exemple les noms des différentes balises ou des différents attributs) s'affiche.

Vous pouvez fermer cette liste à tout moment en appuyant sur la touche Echap.

2

Faites défiler les éléments de la liste à l'aide de la barre de défilement ou des touches fléchées vers le haut et vers le bas.

3

Double-cliquez sur l'un des éléments de cette liste pour l'insérer ; vous pouvez également le sélectionner, puis appuyer sur la touche Entrée (Windows) ou Retour (Macintosh).

Si vous avez créé un style CSS et que celui-ci ne figure pas dans la liste des indicateurs de code correspondant aux styles CSS, cliquez sur Actualiser la liste des styles. Si l'application passe en mode Création, il se peut que cette opération ait entraîné la génération temporaire d'éléments de code non valides ; pour supprimer ces éléments du mode Création, insérez votre style, puis actualisez la page en appuyant sur la touche F5.

4

Pour insérer une balise de fin, tapez

</

(barre oblique).

Remarque :

Par défaut, Dreamweaver détermine la balise à fermer et la ferme automatiquement. Vous pouvez modifier ce comportement par défaut, de façon à ce que Dreamweaver insère une balise de fermeture suite au crochet fermant (>) de la balise d'ouverture, ou de façon à omettre les balises de fin. Sélectionnez Edition > Préférences > Indicateurs de code, puis sélectionnez l'une des options de Balises de fermeture.

Modification d'une balise à l'aide des indicateurs de code

•

Pour remplacer un attribut par un autre, supprimez l'attribut concerné ainsi que sa valeur, puis ajoutez le nouvel attribut et la valeur associée en suivant la procédure ci-avant.

•

Pour modifier une valeur, supprimez la valeur concernée, puis ajoutez une nouvelle valeur en suivant la procédure ciavant.

DREAMWEAVER CS3


302

Modification d'une balise de langage de serveur à l'aide de l'inspecteur Propriétés

Vous pouvez modifier le code dans une balise de langage de serveur (comme une balise ASP) sans accéder au mode Code, grâce à l'inspecteur Propriétés du code.

1

En mode Création, sélectionnez l'icône visuelle de balise de langage de serveur.

2

Dans l'inspecteur Propriétés, cliquez sur le bouton Edition.

3

Apportez les modifications requises au code de la balise puis cliquez sur OK.

Voir aussi


Manipulation de fragments de code

Les fragments de code permettent de stocker des contenus en vue de pouvoir les réutiliser rapidement. Vous pouvez créer, insérer, modifier ou supprimer des fragments de code HTML, JavaScript, CFML, ASP, JSP, etc. Vous pouvez également gérer et partager vos fragments de code avec les autres membres de l'équipe. Vous disposez de quelques fragments prédéfinis que vous pouvez employer comme point de départ.

Les fragments de code contenant des balises <font> et d'autres éléments et attributs déconseillés ont été déplacés dans le dossier Anciennes versions du panneau Fragments de code.

Insertion d'un fragment de code

1

Placez le point d'insertion à l'endroit où vous souhaitez insérer le fragment de code ou sélectionnez le code à combiner avec le fragment choisi.

2

Dans le panneau Fragments de code (Fenêtre > Fragments de code), double-cliquez sur le fragment de code.

Vous pouvez également cliquer avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée

(Macintosh) sur le fragment de code, puis sélectionner Insérer dans le menu contextuel.

Création d'un fragment de code

1

Cliquez sur l'icône Nouveau fragment de code situé au bas du panneau Fragments de code

2

Donnez un nom au fragment de code.

Remarque :

Les noms de fragments de code ne peuvent pas comporter les caractères qui sont interdits dans les noms de fichiers

(barres obliques (/ ou \), caractères spéciaux ou guillemets doubles (“)).

3

(Facultatif) Entrez la description du fragment de code sous forme de texte. qui permettra aux autres membres de l'équipe de l'utiliser plus facilement.

4

Pour l'option Type de fragment de code, sélectionnez Envelopper la sélection ou Insérer le bloc.

a

Si vous avez opté pour l'enveloppement de la sélection, ajoutez du code aux options suivantes :

Insérer avant

Tapez ou collez le code à insérer avant la sélection en cours.

Insérer après

Tapez ou collez le code à insérer après la sélection en cours.

Pour définir un espacement par défaut entre les blocs, utilisez des sauts de ligne ; appuyez sur Entrée (Windows) ou Retour

(Macintosh) à l'intérieur des zones de texte.

Remarque :

Dans la mesure où les fragments de code peuvent être créés en début ou en fin de bloc, vous pouvez les utiliser pour encadrer d'autres balises et contenus. Ce procédé est pratique pour insérer une mise en forme, des liens, des éléments de navigation et des blocs de script spéciaux. Il vous suffit de mettre en surbrillance l'élément à entourer puis d'insérer le fragment de code.

b

Si vous avez opté pour l'insertion du bloc, tapez ou collez le code à insérer.

5

(Facultatif) Sélectionnez le type d'aperçu : Code ou Création.

Création

Restitue le code et l'affiche dans le volet d'aperçu du panneau Fragment de code.

DREAMWEAVER CS3


303

Code

Affiche le code dans le volet d'aperçu.

6

Cliquez sur OK.

Modification ou suppression d'un fragment de code

❖

Dans le panneau Fragments de code, sélectionnez un fragment de code, puis cliquez sur le bouton Modifier le fragment de code ou sur le bouton Supprimer, dans le bas du panneau.

Création de dossiers de fragments de code et gestion de fragments

1

Cliquez sur le bouton Nouveau dossier de fragments de code situé au bas du panneau Fragments de code.

2

Faites glisser des fragments de code vers le nouveau dossier ou d'autres dossiers, à votre convenance.

Ajout ou modification d'un raccourci clavier pour un fragment de code

1

Dans le panneau Fragments de code, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche

Ctrl enfoncée (Macintosh) et sélectionnez Modifier les raccourcis clavier.

L'éditeur de raccourcis clavier s'ouvre.

2

Dans le menu contextuel Commandes, choisissez Fragments de code.

Une liste de fragments de code s'affiche.

3

Sélectionnez celui qui vous intéresse et affectez-lui le raccourci clavier de votre choix.

Partage d'un fragment de code avec d'autres membres de l'équipe

1

Recherchez le fichier correspondant au fragment de code à partager dans le sous-dossier Configuration/Snippets du dossier de l'application Dreamweaver.

2

Copiez le fichier du fragment de code dans un dossier partagé sur votre ordinateur ou sur un ordinateur en réseau.

3

Veillez à ce que les autres membres de l'équipe copient le fichier du fragment de code dans leurs dossiers

Configuration/Snippets respectifs.

Insertion de code avec la barre d'outils de codage

1

Assurez-vous que vous êtes en mode Code (Affichage > Code).

2

Placez le curseur dans le code, ou sélectionnez un bloc de code.

3

Cliquez sur un bouton de la barre d'outils de codage, ou sélectionnez un élément de l'un des menus contextuels de la barre d'outils.

Pour connaître la fonction de chaque bouton, positionnez le pointeur sur ce bouton jusqu'à ce qu'une info-bulle apparaisse.

O uvrir les documents

Affiche la liste des documents ouverts. Lorsque cette option est sélectionnée, elle s'affiche dans la fenêtre Document.

Réduire balises entières

Réduit tout le contenu compris entre une balise d’ouverture et sa balise de fermeture (par exemple, tout le code compris entre

<table>

et

</table>

). Pour réduire tout le contenu d'une balise complète, placez le point d'insertion sur la balise d'ouverture ou de fermeture, puis cliquez sur le bouton Réduire balise entière.

Il est également possible de réduire le code situé à l'extérieur d'une balise complète, en plaçant le point d'insertion dans une balise d'ouverture ou de fermeture avant de cliquer sur le bouton Réduire balise entière tout en maintenant la touche Alt enfoncée (Windows) ou la touche Option (Macintosh). Par ailleurs, vous pouvez maintenir la touche Ctrl enfoncée tout en cliquant sur ce bouton pour désactiver la réduction intelligente. Dans ce cas, Dreamweaver n’ajuste pas le contenu réduit à

l’extérieur de la paire de balises. Pour plus d'informations sur le mode Code, consultez la section « A propos de la réduction du code » à la page 310.

Réduire la sélection

Réduit le code sélectionné.

DREAMWEAVER CS3


304

Vous pouvez également réduire le code en dehors d'une sélection en cliquant tout en maintenant enfoncée la touche Alt

(Windows) ou Option (Macintosh) sur le bouton Réduire sélection. Par ailleurs, vous pouvez maintenir la touche Ctrl enfoncée tout en cliquant sur ce bouton pour désactiver la réduction intelligente. Dans ce cas, Dreamweaver n’ajuste pas le

contenu et réduit exactement le code sélectionné. Pour plus d'informations sur le mode Code, consultez la section « A propos de la réduction du code » à la page 310.

Développer tout

Rétablit tout le code réduit.

Sélectionner une balise parent

Sélectionne le contenu et les balises d’ouverture et de fermeture qui encadrent la ligne dans laquelle est placé le point d’insertion. Si vous cliquez plusieurs fois sur ce bouton et que toutes vos balises sont équilibrées,

Dreamweaver sélectionne finalement les balises html

et

/html

situées aux extrémités.

Equilibrer les accolades

Sélectionne tout le code se trouvant à l'intérieur des parenthèses, des accolades ou des crochets qui encadrent la ligne dans laquelle est placé le point d’insertion. Si vous cliquez plusieurs fois sur ce bouton et que toutes vos balises sont équilibrées, Dreamweaver sélectionne finalement les parenthèses, accolades ou crochets les plus extérieur(e)s du document.

N uméros de lignes

Permet d'afficher ou masquer les numéros de lignes au début de chaque ligne de code.

Surligner le code non valide

Surligne le code non valide en jaune.

Appliquer commentaire

balises de commentaires.

Permet d'encadrer le code sélectionné avec des balises de commentaires, ou d'ouvrir de nouvelles

•

Appliquer Commentaire HTML encadre le code sélectionné de balises



sera supprimé, mais



ne le sera pas, car il s'agit d'un commentaire Dreamweaver qui marque le début d'une zone modifiable dans un modèle.

Supprimer Marqueur spécial Dreamweaver

Supprime les commentaires ajoutés par Dreamweaver. De cette manière, les documents sont automatiquement mis à jour en même temps que les modèles et les éléments de la bibliothèque. Si vous activez cette option lors du nettoyage du code d'un document créé à partir d'un modèle, le document et son modèle sont

Supprimer Balise(s)

Supprime les balises spécifiées dans la zone de texte adjacente. Utilisez cette option pour supprimer des balises personnalisées insérées par d'autres éditeurs visuels, ainsi que les autres balises que vous ne voulez pas voir apparaître sur votre site (par exemple, blink

). Séparez les différentes balises par des virgules (par exemple, font, blink

).

Combiner les balises <font> imbriquées lorsque possible

Combine deux ou plusieurs balises font

se rapportant à la même section de texte. Par exemple,

<font size="7"><font color="#FF0000">rouge</font></font>

sera remplacé par

<font size="7" color="#FF0000">rouge</font>

.

Afficher le journal à la fin

le nettoyage est terminé.

Affiche un message d'avertissement détaillant les modifications apportées au document dès que

Voir aussi


« Définition des couleurs du code » à la page 300

DREAMWEAVER CS3


314

Vérification de l'équilibre des balises et des accolades

la page, autrement dit qu'à chaque balise, parenthèse, accolade ou crochet d'ouverture correspond une balise, une parenthèse, une accolade ou un crochet de fermeture, et inversement.

Vérification de l’équilibrage des accolades

1

Ouvrez le document en mode Code.

2

Placez le point d'insertion dans le code imbriqué à vérifier.

3


Les balises correspondantes de délimitation (ainsi que leur contenu) sont sélectionnées dans le code. Si vous choisissez plusieurs fois Edition > Sélectionner balise parente et que toutes vos balises sont équilibrées, Dreamweaver sélectionne finalement les balises html

et

/html

qui ouvrent et ferment le document.

Vérification de l'équilibre de paires de parenthèses, d'accolades ou de crochets

1

Ouvrez le document en mode Code.

2

Placez le point d'insertion dans le code à vérifier.

3


Equilibrer les accolades pour sélectionner le code qui se trouve à l'intérieur des parenthèses, des accolades ou des crochets délimitant la nouvelle sélection.

Vérification de la compatibilité du navigateur

Les fonctions de vérification de la compatibilité avec les navigateurs vous permettent de rechercher les combinaisons de

HTML et de feuilles de style CSS pouvant déclencher des problèmes de restitution dans des navigateurs. Cette fonctionnalité teste également le code de vos documents et détermine s'il contient des propriétés ou des valeurs CSS non prises en charge par les navigateurs cibles.

Remarque :

Cette fonction remplace l'ancienne fonction de vérification du navigateur cible, mais conserve la fonctionnalité

CSS de cette fonction.

Voir aussi

« Vérification de problèmes de restitution CSS entre les navigateurs » à la page 137

Validation des balises

Recherchez les erreurs de balises ou de syntaxe dans le document courant ou dans une balise sélectionnée. Dreamweaver peut valider des documents dans de nombreux langages comme HTML, XHTML, ColdFusion Markup Language (CFML),

JavaServer Pages (JSP), Wireless Markup Language (WML) et XML.

Vous pouvez définir les préférences du validateur, notamment spécifier les langages de balise qui serviront de référence au validateur lors des vérifications, les problèmes spécifiques que le validateur doit relever, ainsi que les types d'erreurs qu'il doit signaler. Pour plus d'informations, consultez la section Définition des préférences du validateur.

Remarque :

Pour valider les critères d'accessibilité de votre document, consultez la section «

1


• Dans le cas d'un fichier XML ou XHTML, sélectionnez Fichier > Vérifier la page > Valider en XML.

• Sélectionnez Fichier > Vérifier la page > Valider le marqueur. syntaxe relevées.

2

Double-cliquez sur le message d'erreur pour mettre l'erreur en surbrillance dans le document.

DREAMWEAVER CS3


315

3

Pour enregistrer un rapport au format XML, cliquez sur le bouton Enregistrer le rapport.

4

Pour afficher le rapport dans votre navigateur principal (et pouvoir l'imprimer), cliquez sur le bouton Parcourir le rapport.

Conformité des pages avec le langage XH

T

ML

Lorsque vous créez une page, vous pouvez faire en sorte qu'elle soit compatible avec le langage XHTML. Cette opération est

également possible avec les documents HTML existants.

Voir aussi


Création de documents conformes au code XH

T

ML

1


2

Sélectionnez une catégorie et un type de page à créer.

3

Sélectionnez l'une des définitions de type de document (DTD) XHTML dans le menu déroulant Type de document

(DTD) à l'extrême droite de la boîte de dialogue, puis cliquez sur Créer.

Par exemple, vous pouvez rendre un document HTML compatible XHTML en sélectionnant XHTML 1.0 transitionnel ou

XHTML 1.0 Strict dans le menu déroulant.

Remarque :

Cette opération est impossible pour certains types de documents.

Création de documents conformes au code XH

T

ML par défaut

1

Choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS document.

2

Sélectionnez un document par défaut et l'une des définitions de type de document XHTML dans le menu déroulant Type de document (DTD), puis cliquez sur OK.



Conformité d'un document H

T

ML avec le langage XH

T

ML

1

Ouvrez un document, puis effectuez l'une des opérations suivantes :

•

Pour un document sans cadres, sélectionnez Fichier > Convertir, puis sélectionnez l'une des définitions de type de document XHTML.



•

Pour un document avec cadres, sélectionnez un cadre, puis Fichier > Convertir, puis sélectionnez l'une des définitions de type de document XHTML.

2

Pour convertir le document entier, répétez cette étape pour chacun des cadres et pour le document de jeu de cadres.

Remarque :

Il est impossible de convertir une instance d'un modèle, puisqu'elle doit reprendre le même langage que le modèle d'après lequel elle a été créée. Par exemple, un document conçu d'après un modèle XHTML restera toujours en XHTML ; de même, un document conçu d'après un modèle HTML non conforme au langage XHTML restera toujours en HTML et ne pourra pas être converti en XHTML ni dans aucun autre langage.

Utilisation du débogueur ColdFusion (Windows uniquement)

Si vous utilisez ColdFusion pour tester Dreamweaver, vous pouvez afficher les informations de débogage ColdFusion sans quitter Dreamweaver.

DREAMWEAVER CS3


316

Remarque :

Cette fonction n'est pas prise en charge sur Macintosh. Les développeurs Macintosh peuvent ouvrir une page

ColdFusion dans un autre navigateur au moyen de la commande Aperçu dans le navigateur (F12). Si la page contient des erreurs, les informations relatives aux causes possibles s'affichent au bas de la page.

Si vous utilisez ColdFusion MX 6.1 ou une version antérieure, commencez par vérifier que le débogage est activé dans

ColdFusion Administrator. Si vous utilisez ColdFusion MX 7 ou une version ultérieure, Dreamweaver active automatiquement ce paramétrage.

Vérifiez également que ColdFusion est en cours d’exécution sur le serveur d’évaluation de Dreamweaver. Pour plus

d'informations, consultez la section « Configuration d'un serveur d'évaluation » à la page 45.

Pour garantir l'actualisation des informations de débogage à chaque fois qu'une page est affichée dans le navigateur interne, veillez à ce que Internet Explorer recherche les versions plus récentes du fichier à chaque fois que celui-ci est demandé. Dans

Internet Explorer, sélectionnez Outils > Options Internet, sélectionnez l'onglet Général, puis cliquez sur le bouton Paramètres dans la zone Fichiers Internet temporaires. Dans la boîte de dialogue Paramètres, sélectionnez le bouton radio A chaque visite de la page.

1

Ouvrez la page ColdFusion dans Dreamweaver.

2

Cliquez sur l'icône Débogage du serveur dans la barre d'outils du document.

Dreamweaver demande la page hébergée sur le serveur ColdFusion et l'affiche dans une fenêtre interne du navigateur

Internet Explorer. Si la page contient des erreurs, leurs causes possibles s'affichent au bas de la page.

Le panneau Débogage de serveur qui s'ouvre simultanément regroupe de nombreuses informations utiles, telles que toutes les pages traitées par le serveur pour la restitution de la page, toutes les requêtes SQL exécutées sur la page, ainsi que toutes les variables du serveur et leur valeur respective, le cas échéant. Ce panneau récapitule également les durées d'exécution.

3

Si une catégorie Exceptions apparaît dans le panneau Débogage de serveur, cliquez sur le bouton Plus (+) pour la développer.

Cette catégorie s'affiche lorsque le serveur détecte un ou plusieurs problèmes sur la page. Développez-la pour obtenir des informations sur le problème.

4

Dans la colonne Position du panneau Débogage de serveur, ouvrez la page en mode Code en cliquant sur son URL, puis corrigez les erreurs.

Si Dreamweaver repère et ouvre cette page, la ou les lignes erronées apparaissent en surbrillance. A défaut, Dreamweaver vous demande de préciser l'emplacement de la page.

5

Corrigez l'erreur, enregistrez le fichier sur le serveur, puis cliquez sur

Dreamweaver restitue une nouvelle fois la page dans le navigateur interne et actualise le panneau Débogage de serveur. Si tous les problèmes sont résolus sur la page, la catégorie Exceptions ne réapparaît pas dans le panneau.

6

Pour quitter le mode de débogage, passez en mode Code (Affichage > Code) ou en mode Création (Affichage >

Création).

Voir aussi

Modification de code en mode Création

A propos de la modification de code en mode Création

Dreamweaver permet de créer et de modifier visuellement des pages Web sans se soucier du code source sous-jacent.

Toutefois, vous serez peut-être amené à modifier ce code afin de contrôler pleinement les opérations effectuées sur vos pages ou de corriger les éventuels problèmes. Dreamweaver vous permet de modifier une partie du code en mode Création.

Cette section est destinée aux personnes qui préfèrent travailler en mode Création, mais qui souhaitent également disposer d'un accès rapide au code.

DREAMWEAVER CS3


317

Sélection de balises enfants en mode Création

En mode Création, si vous sélectionnez un objet contenant des balises enfants, par exemple un tableau HTML, vous pouvez sélectionner rapidement la première balise enfant de cet objet en choisissant Edition > Sélectionner enfant.

Remarque :

Cette commande est disponible uniquement en mode Création.

Par exemple, la balise

<table>

comporte normalement des balises enfants

<tr>

. Si vous sélectionnez une balise

<table> dans le sélecteur de balises, vous pouvez sélectionner la première ligne du tableau en choisissant Edition> Sélectionner enfant. Dreamweaver sélectionne la première balise

<tr>

dans le sélecteur de balises. Etant donné que la balise

<tr> comporte elle-même des balises enfants,

<td>

(délimiteur de cellule), vous pouvez choisir à nouveau Edition > Sélectionner enfant pour sélectionner la première cellule du tableau.

Modification de code avec l'inspecteur Propriétés

Vous pouvez utiliser l'inspecteur Propriétés pour examiner et modifier les attributs du texte ou des objets dans votre page.

Souvent, les propriétés affichées dans l'inspecteur Propriétés correspondent aux attributs des balises ; la modification de l'une de ces propriétés dans l'inspecteur revient en principe à modifier l'attribut correspondant en mode Code.

Remarque :

L'inspecteur de balises et l'inspecteur Propriétés permettent d'afficher et de modifier les attributs des balises.

L'inspecteur de balises permet d'afficher et de modifier l'ensemble des attributs associés à une balise donnée. L'inspecteur

Propriétés affiche uniquement les attributs les plus fréquents. En revanche, il contient un nombre plus important de commandes permettant de modifier les valeurs de ces attributs et permet également de modifier certains objets (par exemple les colonnes des tableaux) ne correspondant à aucune balise spécifique.

1

Cliquez sur le texte ou sélectionnez un objet dans la page.

L'inspecteur Propriétés pour le texte ou l'objet s'affiche sous la fenêtre de document. Si l'inspecteur Propriétés n'est pas

2

Utilisez l'inspecteur Propriétés pour modifier vos attributs.

Modification de code CFML avec l'inspecteur Propriétés

L'inspecteur Propriétés permet d'examiner et de modifier le code CFML (ColdFusion markup language) en mode Création.

1

Cliquez sur le bouton Attributs pour modifier les attributs de la balise ou pour en ajouter de nouveaux.

2

Si la balise présente un contenu entre ses balises d'ouverture et de fermeture, cliquez sur le bouton Contenu pour modifier ce contenu.

Le bouton Contenu s'affiche uniquement si la balise sélectionnée n'est pas vide (c'est-à-dire, si elle possède une balise d'ouverture et une balise de fermeture).

3

Si la balise contient une expression conditionnelle, apportez vos changements dans la zone Expression.

Modification d'attributs dans l'inspecteur de balises

L'inspecteur de balises permet de modifier et d'ajouter des attributs et des valeurs d'attributs. L'inspecteur de balises permet de modifier balises et objets en utilisant une fiche de propriétés semblable à celles que l'on trouve dans d'autres environnements de développement intégrés (integrated development environments, IDE).

1

Dans la fenêtre de document, effectuez l'une des procédures suivantes :

•

En mode Code (ou dans l'inspecteur de code), cliquez sur le nom d'une balise ou sur son contenu.

•

En mode Création, sélectionnez un objet ou sélectionnez une balise dans le sélecteur de balises.

2

Ouvrez l'inspecteur de balises (Fenêtre

Les attributs de la sélection et les valeurs actuellement définies s'affichent dans l'inspecteur de balises.

3

Dans l'inspecteur de balises, effectuez l'une des opérations suivantes :

•

Pour afficher les attributs par catégories, cliquez sur le bouton Afficher la vue par catégorie .

•

Pour afficher les attributs par ordre alphabétique, cliquez sur le bouton Afficher la vue sous forme de liste .

DREAMWEAVER CS3


318

•

Pour modifier la valeur de l'attribut, sélectionnez cette valeur puis modifiez-la.

•

Pour ajouter une valeur à un attribut qui n'en a pas, cliquez dans la colonne des valeurs d'attribut située à droite de l'attribut, puis indiquez votre valeur.

•

Si l'attribut accepte les valeurs prédéfinies, sélectionnez une valeur dans le menu déroulant (ou le sélecteur de couleur) situé à droite de la colonne des valeurs d'attribut.

•

Si la valeur de l'attribut correspond à une URL, cliquez sur le bouton Parcourir, utilisez l'icône du pointeur pour sélectionner un fichier, ou tapez le nom de l'URL dans la zone de texte.

•

Si la valeur de l'attribut correspond à une source de contenu dynamique (par exemple, une base de données), cliquez sur le bouton Données dynamiques situé à droite de la colonne des valeurs d'attribut. Sélectionnez ensuite votre source.

•

Pour supprimer la valeur de l'attribut, sélectionnez la valeur à supprimer, puis appuyez sur la touche Retour arrière

(Windows) ou Retour (Macintosh).

•

Pour modifier le nom d'un attribut, sélectionnez le nom d'attribut souhaité, puis modifiez-le.

Remarque :

Si vous modifiez le nom d'un attribut standard et que vous lui attribuez une nouvelle valeur, le nouvel attribut et la valeur qui lui est associée sont automatiquement déplacés dans la catégorie appropriée.

•

Pour ajouter un attribut ne figurant pas sur la liste, cliquez sur l'espace vide au bas de cette liste, puis saisissez le nom de l'attribut à ajouter.

4

Pour que les modifications apportées soient prises en compte dans votre document, appuyez sur la touche Entrée

(Windows) ou Retour (Macintosh) ou cliquez à un autre endroit de l'inspecteur de balises.

Voir aussi




Présentation de Quick

T

ag Editor

Vous pouvez utiliser Quick Tag Editor pour examiner, insérer et modifier rapidement des balises HTML sans quitter le mode Création.

Si vous tapez des éléments de code HTML non valides dans Quick Tag Editor, Dreamweaver tente de les corriger en insérant au besoin des guillemets ou des crochets de fermeture.

Pour définir les options de Quick Tag Editor, ouvrez-le en appuyant sur Ctrl+T (Windows) ou sur Commande+T

(Macintosh).

Quick Tag Editor comporte trois modes :

•

Insérer HTML, qui permet d'insérer de nouveaux éléments de code HTML ;

•

Modifier la balise, qui permet de modifier une balise existante ;

•

Envelopper avec balise, qui permet d'insérer une nouvelle balise de part et d'autre d'une sélection.

Remarque :

Le mode dans lequel s'ouvre Quick Tag Editor dépend de la sélection en cours en mode Création.

Dans les trois modes, le fonctionnement de base de Quick Tag Editor reste le même : ouvrez l'éditeur, saisissez ou modifiez des balises et des attributs, puis fermez l'éditeur.

Lorsque Quick Tag Editor est actif, vous pouvez passer d'un mode à l'autre en appuyant sur Ctrl+T (Windows) ou

Commande+T (Macintosh).

Voir aussi

« Utilisation des menus d'indication dans Quick Tag Editor » à la page 319

DREAMWEAVER CS3


319

Modification de code avec Quick

T

ag Editor

Quick Tag Editor permet d'examiner et de modifier rapidement les balises HTML sans quitter le mode Création.

Voir aussi

« Rédaction et modification de scripts en mode Création » à la page 321

Insertion d'une balise H

T

ML

1

En mode Création, cliquez dans la page pour placer le point d'insertion à l'endroit où vous voulez insérer le code.

2

Appuyez sur Ctrl+T (Windows) ou Commande+T (Macintosh).

Quick Tag Editor s'ouvre en mode Insérer HTML.

3

Saisissez la balise HTML, puis appuyez sur Entrée.

La balise est insérée dans votre code. Le cas échéant, la balise de fermeture correspondante est également insérée.

4

Appuyez sur la touche Echap pour quitter Quick Tag Editor sans apporter aucun changement.

Modification d'une balise H

T

ML

1

Sélectionnez un objet en mode Création.

Vous pouvez également sélectionner la balise que vous voulez modifier à partir du sélecteur de balise figurant au bas de la

fenêtre de document. Pour plus d'informations, consultez la section « Modification de code à l'aide du sélecteur de balises »

à la page 320.

2

Appuyez sur Ctrl+T (Windows) ou Commande+T (Macintosh).

Quick Tag Editor s'ouvre en mode Modifier la balise.

3

Saisissez de nouveaux attributs, modifiez les attributs existants ou modifiez le nom de la balise.

4

Appuyez sur Tab pour passer d'un attribut à l'autre et sur Maj+Tab pour revenir en arrière.

Remarque :

Par défaut, les modifications sont appliquées au document lorsque vous appuyez sur Tab ou Maj+Tab.

5

Pour fermer Quick Tag Editor et appliquer toutes les modifications, appuyez sur Entrée.

6

Pour quitter Quick Tag Editor sans apporter d'autres changements, appuyez sur Echap.

Insertion de balises H

T

ML de part et d'autre d'une sélection

1

Sélectionnez du texte ou un objet non mis en forme en mode Création.

Remarque :

Si vous sélectionnez une chaîne de texte ou un objet comportant une balise HTML d'ouverture ou de fermeture,

Quick Tag Editor s'affiche en mode Modifier la balise et non en mode de balise enveloppante.

2

Appuyez sur Ctrl+T (Windows) ou Commande+T (Macintosh), ou cliquez sur le bouton Quick Tag Editor dans l'inspecteur Propriétés.

Quick Tag Editor s'ouvre en mode Envelopper avec balise.

3

Saisissez une balise d'ouverture, par exemple

strong

, puis appuyez sur Entrée (Windows) ou Retour (Macintosh).

La balise est insérée au début de la sélection en cours et une balise de fermeture correspondante est insérée à la fin.

4

Pour quitter Quick Tag Editor sans apporter de changements, appuyez sur Echap.

Utilisation des menus d'indication dans Quick

T

ag Editor

Dans Quick Tag Editor, vous pouvez accéder à un menu contextuel d'attributs répertoriant tous les attributs valides de la balise que vous modifiez ou insérez.

DREAMWEAVER CS3


320

Vous pouvez également désactiver le menu contextuel ou modifier le délai s'écoulant avant l'apparition du menu déroulant dans Quick Tag Editor.

Pour afficher un menu contextuel répertoriant les attributs de balise valides, arrêtez-vous quelques secondes pendant la modification d'un nom d'attribut dans Quick Tag Editor. Un menu contextuel apparaît, répertoriant tous les attributs valides de la balise que vous modifiez.

De même, arrêtez-vous quelques secondes pendant la saisie ou la modification d'un nom de balise dans Quick Tag Editor pour afficher le menu contextuel correspondant aux balises.

Remarque :

Les préférences d'indication de code de Quick Tag Editor sont régies par les préférences générales d'indication de

Voir aussi

« Présentation de Quick Tag Editor » à la page 318

Utilisation d'un menu d'indicateurs de code

1


•

Commencez la saisie d'une balise ou d'un attribut. Le menu Indicateurs de code affiche le premier élément commençant par les lettres que vous venez de taper.

•

Appuyez sur les touches fléchées Haut et Bas de votre clavier pour sélectionner un élément.

•

Recherchez un élément à l'aide de la barre de défilement.

2

Pour insérer un élément, sélectionnez-le, puis appuyez sur la touche Entrée ou double-cliquez dessus.

3

Pour fermer le menu contextuel sans sélectionner d'élément, appuyez sur la touche Echap ou poursuivez la saisie de votre texte.

Désactivation du menu contextuel ou modification du délai s'écoulant avant l'apparition du menu contextuel

1


Tag Editor.

La boîte de dialogue Préférences de Quick Tag Editor s'affiche.

2

Pour désactiver le menu contextuel, désélectionnez l'option Activer le menu contextuel de balises.

3

Pour modifier le délai avant l'apparition du menu, réglez le curseur Délai, puis cliquez sur OK.

Modification de code à l'aide du sélecteur de balises

Vous pouvez utiliser le sélecteur de balises pour sélectionner, modifier ou supprimer les balises sans quitter le mode

Création. Le sélecteur de balises se trouve dans la barre d'état en bas de la fenêtre de document, et présente une série de balises, comme suit :

Modification ou suppression d'une balise

1

Cliquez dans le document.

Les balises qui s'appliquent au niveau du point d'insertion s'affichent dans le sélecteur de balises.

2

Cliquez à l'aide du bouton droit (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur une balise dans le sélecteur de balises.

3

Pour modifier une balise, choisissez Modifier la balise dans le menu. Apportez les modifications requises dans Quick Tag

4

Pour supprimer une balise, choisissez Supprimer la balise dans le menu.

DREAMWEAVER CS3


321

Sélection d'un objet correspondant à une balise

1

Cliquez dans le document.

Les balises qui s'appliquent au niveau du point d'insertion s'affichent dans le sélecteur de balises.

2

Cliquez sur une balise dans le sélecteur de balises.

L'objet représenté par la balise est sélectionné sur la page.

Utilisez cette technique pour sélectionner des lignes de tableau (balises

tr

) ou des cellules (balises

td

).

Rédaction et modification de scripts en mode Création

Vous pouvez travailler avec des scripts JavaScript et VBScript côté client en mode Création ou Code, en procédant des manières suivantes :

•

Vous pouvez écrire un script JavaScript ou VBScript pour votre page sans quitter le mode Création.

•

Vous pouvez créer un lien dans votre document vers un fichier script externe sans quitter le mode Création.

•

Vous pouvez modifier un script sans quitter le mode Création.

Assistances visuelles > Eléments invisibles.

Rédaction d'un script côté client

1

Placez le point d'insertion à l'endroit où vous voulez insérer le script.

2

Choisissez Insertion > HTML > Objets Script > Script.

3

Choisissez le langage de script dans le menu déroulant Langage.

Si vous utilisez JavaScript sans être certain de la version, choisissez JavaScript plutôt que JavaScript1.1 ou JavaScript1.2.

4

Saisissez ou collez le code de script dans la zone Contenu.

Vous n'avez pas besoin d'inclure les balises script

de fermeture et d'ouverture.

5

Saisissez ou collez le code HTML dans la zone Aucun script. Les navigateurs ne prenant pas en charge le langage de script sélectionné affichent ce code au lieu d'exécuter le script.

6

Cliquez sur OK.

Création d'un lien vers un fichier script externe

1

Placez le point d'insertion à l'endroit où vous voulez insérer le script.

2

Choisissez Insertion > HTML > Objets Script > Script.

3

Cliquez sur OK sans compléter la zone de texte Contenu.

4

Sélectionnez le marqueur de script dans le mode Création de la fenêtre de document.

5

Dans l'inspecteur Propriétés, cliquez sur l'icône de dossier pour rechercher et sélectionner le fichier de script externe ou tapez le nom de fichier dans la zone Source.

Modification d'un script

1

Sélectionnez le marqueur de script.

2

Dans l'inspecteur Propriétés, cliquez sur le bouton Edition.

Le script s'affiche dans la boîte de dialogue Propriétés du script.

Si vous avez créé un lien vers un fichier de script externe, le fichier s'ouvre en mode Code ; vous pouvez alors apporter vos modifications.

Remarque :

Si les balises script renferment des éléments de code, la boîte de dialogue Propriétés du script s'affiche, même si vous avez créé un lien vers un fichier de script externe.

DREAMWEAVER CS3


322

3

Dans la zone Langage, indiquez soit JavaScript soit VBScript comme langage de script.

4

Dans le menu déroulant Type, indiquez le type de script, soit côté client, soit côté serveur.

5

(Facultatif) Dans la zone Source, indiquez un fichier de script externe lié.

Tapez le chemin d'accès au fichier ou cliquez sur l'icône de dossier ou sur le bouton Parcourir pour rechercher le fichier.

6

Modifiez le script, puis cliquez sur OK.

Modification de scripts ASP côté serveur en mode Création

L'inspecteur Propriétés de script ASP permet d'examiner et de modifier les scripts ASP côté serveur en mode Création.

1

En mode Création, sélectionnez l'icône visuelle de balise de langage de serveur.

2

Dans l'inspecteur Propriétés de script ASP, cliquez sur le bouton Modifier

3

Modifiez le script ASP côté serveur, puis cliquez sur OK.

Modification de scripts sur la page à l'aide de l'inspecteur Propriétés

1

Dans le menu déroulant Langage de l'inspecteur Propriétés, sélectionnez le langage de script souhaité ou saisissez directement son nom dans la zone de texte Langage.

Remarque :

Si vous utilisez JavaScript sans être certain de la version, choisissez JavaScript plutôt que JavaScript1.1 ou

JavaScript1.2.

2

Dans le menu déroulant Type, indiquez le type de script, soit côté client, soit côté serveur.

3

(Facultatif) Dans la zone Source, indiquez un fichier de script externe lié. Tapez le chemin d'accès ou cliquez sur l'icône du dossier pour sélectionner le fichier.

4

Cliquez sur Modifier pour modifier le script.

Voir aussi

« Rédaction et modification de scripts en mode Création » à la page 321

Utilisation des comportements JavaScript

L'onglet Comportements de l'inspecteur de balises permet d'associer aisément des comportements JavaScript (côté client)

aux éléments d'une page. Pour plus d'informations, consultez la section « Application de comportements Dreamweaver intégrés » à la page 336.

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

Les pages contiennent des éléments qui décrivent les informations figurant sur la page ; ces éléments sont utilisés par les moteurs de recherche. Vous pouvez définir les propriétés des éléments head

pour contrôler la façon dont vos pages sont identifiées.

Affichage et modification de contenu d'en-tête

Vous pouvez afficher les éléments de l'en-tête head

d'un document via le menu Affichage, le mode Code de la fenêtre de document ou l'inspecteur de code.

Pour afficher les éléments de la section d'en-tête d'un document :

❖

Sélectionnez Affichage > Contenu de l'en-tête. Pour chaque élément de la section head

, un marqueur s'affiche dans le haut de la fenêtre de document en mode Création.

Remarque :

Si la fenêtre de document affiche uniquement le mode Code, la commande Affichage > Contenu de l'en-tête est grisée.

DREAMWEAVER CS3


323

Insertion d'un élément dans la section d'en-tête d'un document

1

Sélectionnez un élément du sous-menu Insertion > HTML > Balises d'en-tête.

2

Choisissez les options applicables à l'élément dans la boîte de dialogue qui s'affiche alors, ou dans l'inspecteur Propriétés.

Modification d'un élément de la section d'en-tête d'un document

1

Sélectionnez Affichage > Contenu de l'en-tête.

2

Cliquez sur l'une des icônes de la section head

pour la sélectionner.

3

Définissez ou modifiez les propriétés de l'élément dans l'inspecteur Propriétés.

Définition des propriétés meta pour la page

Une balise meta

est un élément de la section head

qui enregistre des informations sur la page en cours, comme l'encodage des caractères, l'auteur, le copyright ou les mots-clés. Ces balises permettent également de transmettre des informations au serveur, par exemple une date d'expiration de la page, son intervalle de réactualisation et sa classification PICS. Le format de classification PICS (Platform For Internet Content Selection) permet de définir un niveau d'interdiction d'accès pour des raisons morales (comme la classification des films) aux pages Web.

Ajout d'une balise meta

1

Choisissez Insertion > HTML > Balises d'en-tête > Meta.

2

Définissez les propriétés dans la boîte de dialogue qui s'affiche.

Modification d'une balise meta existante

1


2

Sélectionnez le marqueur Meta qui apparaît en haut de la fenêtre de document.

3

Définissez les propriétés dans l'inspecteur Propriétés.

Propriétés d'une d'une balise meta

❖

Définissez les propriétés de la balise meta comme suit :

Attribut

Indique si la balise meta

contient des informations descriptives sur la page ( name

) ou des informations d'en-tête

HTTP ( http-equiv

).

Valeur

Indique le type d'informations que vous donnez dans cette balise. Certaines valeurs, telles que description

, keywords

et refresh

, sont déjà bien définies (et disposent de leurs propres inspecteurs de propriétés dans Dreamweaver), mais vous pouvez indiquer pratiquement n'importe quelle valeur (par exemple creationdate

, documentID

ou level

).

Contenu

Est l’information elle-même. Si, par exemple, vous spécifiez level pour Valeur, vous pouvez spécifier beginner

, intermediate

ou advanced pour Contenu.

Définition du titre de la page

Le titre ne possède qu'une propriété : le titre de la page. Le titre apparaît dans la barre de titre de la fenêtre de document dans Dreamweaver, ainsi que dans la barre de titre de la plupart des navigateurs. Le titre apparaît également dans la barre d'outils de la fenêtre de document.

Définition du titre dans la fenêtre de document

❖

Entrez le titre dans la zone Titre de la barre d'outils de la fenêtre de document.

Définition du titre dans le contenu de l'en-tête

1


2

Sélectionnez le marqueur Title qui apparaît en haut de la fenêtre de document.

3

Définissez le titre de la page dans l'inspecteur Propriétés.

DREAMWEAVER CS3


324

Définition de mots-clés pour la page

De nombreux robots de moteurs de recherche (programmes parcourant automatiquement le Web pour collecter les informations ensuite indexées par les moteurs de recherche) lisent le contenu de la balise meta

Keywords, et utilisent ces informations pour indexer les pages dans leur base de données. Comme certains moteurs de recherche limitent le nombre de mots-clés ou de caractères qu'ils indexent, ou ignorent tous les mots-clés si vous dépassez la limite, il est judicieux de n'en utiliser que quelques-uns qui soient bien ciblés.

Ajout d'une balise meta Keywords

1

Choisissez Insertion > HTML > Balises d'en-tête > Keywords.

2

Définissez les mots-clés, séparés par des virgules, dans la boîte de dialogue qui s'affiche.

Modification d'une balise meta Keywords

1


2

Sélectionnez le marqueur Keywords qui apparaît en haut de la fenêtre de document.

3

Dans l'inspecteur Propriétés, consultez, modifiez ou supprimez des mots-clés. Vous pouvez également ajouter des motsclés en les séparant par des virgules.

Définition de descriptions pour la page

De nombreux robots de moteurs de recherche (programmes parcourant automatiquement le Web pour collecter les informations ensuite indexées par les moteurs de recherche) lisent le contenu de la balise meta

Description. Certains utilisent ces informations pour indexer vos pages dans leurs bases de données, et certains affichent également ces informations sur la page de résultats de la recherche (au lieu d'afficher les premières lignes du document). Certains moteurs de recherche limitant le nombre de caractères qu'ils indexent, il est judicieux de limiter votre description à quelques mots

(par exemple,

Spécialitésde grilladesde porcàAlbany,Géorgie

, ou conceptionde sitesWebà des prixraisonnablesdansle mondeentier

).

Ajout d'une balise meta Description

1

Choisissez Insertion > HTML > Balises d'en-tête > Description.

2

Tapez le descriptif de votre site dans la boîte de dialogue qui s'affiche.

Modification d'une balise meta Description

1


2

Sélectionnez le marqueur Description qui apparaît en haut de la fenêtre de document.

3

Dans l'inspecteur Propriétés, consultez, modifiez ou supprimez le texte de la description.

Définition des propriétés d'actualisation de la page

L'élément Refresh (Actualisation) permet d'indiquer au navigateur s'il doit actualiser automatiquement votre page (en rechargeant la page en cours ou en affichant une autre page) après un certain laps de temps. Cet élément est fréquemment utilisé pour rediriger les utilisateurs vers une autre URL, notamment après avoir affiché un message indiquant que l'URL a changé.

Ajout d'une balise meta Refresh

1

Choisissez Insertion > HTML > Balises d'en-tête > Refresh.

2

Définissez les propriétés de la balise meta Refresh dans la boîte de dialogue qui s'affiche.

Modification d'une balise meta Refresh

1


2

Sélectionnez le marqueur Refresh qui apparaît en haut de la fenêtre de document.

3

Dans l'inspecteur Propriétés, définissez les propriétés de la balise meta Refresh.

DREAMWEAVER CS3


325

Définition des propriétés d'une balise meta Refresh

❖

Définissez les propriétés de la balise meta Refresh comme suit :

Délai

Durée, exprimée en secondes, qui s'écoule avant que la page ne soit actualisée par le navigateur. Pour que le navigateur actualise la page immédiatement après l'avoir chargée, saisissez 0 dans cette zone.

URL ou Action

Indique si le navigateur doit se diriger vers une autre URL ou actualiser la page en cours, après le délai spécifié. Pour ouvrir une autre URL (plutôt que d'actualiser la page en cours), cliquez sur le bouton Parcourir, puis naviguez vers et sélectionnez la page à charger.

Définition des propriétés d'URL de base de la page

L’élément Base permet de définir l'URL de base à laquelle tous les chemins relatifs du document font référence.

Ajout d'une balise meta Base

1

Choisissez Insertion > HTML > Balises d'en-tête > Base.

2

Définissez les propriétés de la balise meta Base dans la boîte de dialogue qui s'affiche.

Modification d'une balise meta Base

1


2

Sélectionnez le marqueur Base qui apparaît en haut de la fenêtre de document.

3

Dans l'inspecteur Propriétés, définissez les propriétés de la balise meta Base.

Définition des propriétés d'une balise meta Base

❖

Définissez les propriétés de la balise meta Base comme suit :

Href

L’URL de base. Cliquez sur le bouton Parcourir pour naviguer vers et sélectionner un fichier, ou saisissez le chemin du fichier dans la zone.

Cible

Indique le cadre ou la fenêtre où tous les documents liés doivent s'ouvrir. Choisissez l'un des cadres du jeu de cadres actif, ou l'un des noms de fenêtre réservés ci-dessous :

•

_blank


•

_parent

charge le document lié dans le jeu de cadres parent ou dans la fenêtre parente du cadre contenant le lien. Si le cadre contenant le lien n'est pas imbriqué, alors il est équivalent à

_top

: le document lié est chargé dans la fenêtre de base du navigateur.

•

_self

charge le document lié dans le même cadre (ou la même fenêtre) que le lien. Il s'agit de la cible par défaut, il est donc en général inutile de la spécifier.

•

_top


Définition des propriétés de liaison de la page

La balise link

permet de définir une relation entre le document actif et une autre page.

Remarque :

La balise

link

de la section

head

agit différemment d'un lien HTML inséré dans la section

body

et joignant des documents.

Ajout d'une balise meta Link

1

Choisissez Insertion > HTML > Balises d'en-tête > Link.

2

Définissez les propriétés de la balise meta Link dans la boîte de dialogue qui s'affiche.

Modification d'une balise meta Link

1


2

Sélectionnez le marqueur Link qui apparaît en haut de la fenêtre de document.

3

Dans l'inspecteur Propriétés, définissez les propriétés de la balise meta Link.

DREAMWEAVER CS3


326

Définition des propriétés d'une balise meta Link

❖

Définissez les propriétés de la balise meta Link comme suit :

Href

L'URL (adresse Internet) du fichier vers laquelle vous définissez une relation. Cliquez sur le bouton Parcourir pour naviguer vers et sélectionner un fichier, ou saisissez le chemin du fichier dans la zone. Notez que cet attribut n'indique pas un fichier vers lequel vous établissez un lien, au sens où on l'entend généralement en HTML ; les relations définies dans un

élément Lien sont plus complexes.

ID

Spécifie un identificateur unique pour le lien.

T itre

Décrit cette relation. Cet attribut est particulièrement utilisé pour les feuilles de style liées. Pour plus d'informations sur les feuilles de style externes, consultez les spécifications HTML 4.0 sur le site du World Wide Web Consortium, www.w3.org/TR/REC-html40/present/styles.html#style-external .

Rel

Spécifie la relation entre le document actif et celui indiqué dans la zone Href. Les valeurs possibles sont les suivantes :

Alternate

,

Stylesheet

,

Start

,

Next

,

Prev

,

Contents

,

Index

,

Glossary

,

Copyright

,

Chapter

,

Section

,

Subsection

,

Appendix

,

Help

et

Bookmark

. Pour préciser plusieurs relations, séparez les valeurs par un espace.

Rev

Spécifie la relation inverse (l'opposé de Rel) entre le document actif et celui indiqué dans la zone Href. Les valeurs possibles sont les mêmes que pour Rel.

Utilisation des inclusions côté serveur

A propos des inclusions côté serveur

Dreamweaver permet d'insérer des inclusions côté serveur dans vos pages, de modifier ces inclusions ou d'afficher un aperçu des pages contenant des inclusions.

Une inclusion côté serveur correspond à un fichier incorporé dans un document par un serveur lorsque ce document est sollicité par un navigateur.

Lorsque le navigateur du visiteur sollicite le document contenant l'instruction d'inclusion, le serveur traite cette dernière en créant un nouveau document dans lequel le contenu du fichier inclus remplace l'instruction d'inclusion. Le serveur envoie ensuite ce nouveau document au navigateur du visiteur. Cependant, lorsque vous ouvrez un document local directement dans un navigateur, c'est-à-dire sans utiliser le serveur pour traiter les instructions d'inclusion dans ce document, le navigateur ouvre le document sans traiter ces instructions et le fichier censé être inclus n'apparaît pas dans le navigateur. Il peut donc s'avérer difficile, sans Dreamweaver, de consulter les fichiers locaux et de les voir tels qu'ils apparaîtront une fois que vous les aurez placés sur le serveur.

Grâce à Dreamweaver, vous pouvez prévisualiser les documents tels qu'ils apparaissent sur le serveur, à la fois dans le mode

Création et lorsque vous affichez un aperçu dans un navigateur.

Placer une instruction côté serveur dans un document a pour effet d'insérer une référence à un fichier externe, sans insérer le contenu du fichier spécifié dans le document actif. Dreamweaver affiche le contenu du fichier externe en mode Création, ce qui facilite la création de pages.

Vous ne pouvez pas modifier le fichier inclus directement dans un document. Pour modifier le contenu d'une SSI, vous devez modifier directement le fichier que vous incluez. Toute modification apportée au fichier externe est automatiquement reflétée dans chaque document dans lequel il est inclus.

Il existe deux types d'inclusions à partir du serveur : les inclusions Virtuel et Fichier. Sélectionnez l'instruction correspondant au type de serveur Web utilisé :

•

Si votre serveur est un serveur Web Apache, sélectionnez Virtuel. Dans Apache, Virtuel fonctionne dans tous les cas, tandis que Fichier fonctionne seulement dans certains cas.

•

Si votre serveur est un serveur Microsoft IIS (Internet Information Server), sélectionnez Fichier Virtuel ne fonctionne avec IIS que dans des cas précis.

DREAMWEAVER CS3


327

Remarque :

Malheureusement, IIS ne permet pas d'inclure un fichier dans un dossier situé au-dessus du dossier en cours dans la hiérarchie des fichiers, à moins qu'un logiciel spécial n'ait été installé sur le serveur. Pour pouvoir inclure un fichier d'un dossier placé plus haut dans la hiérarchie des dossiers sur un serveur IIS, demandez à votre administrateur système si le logiciel nécessaire est installé.

•

Pour les autres types de serveurs, ou si vous ne savez pas quel type de serveur vous utilisez, demandez à votre administrateur système l’option à utiliser.

Certains serveurs sont configurés de façon à examiner tous les fichiers pour voir s'ils contiennent des inclusions côté serveur, et d'autres pour examiner uniquement les fichiers portant une extension particulière, telle que .shtml, .shtm ou .inc.

Si une inclusion côté serveur ne fonctionne pas, demandez à votre administrateur système si le nom du fichier utilisant l'inclusion doit avoir une extension spéciale. Par exemple, si le fichier porte le nom canoe.html, il vous faudra peut-être remplacer ce nom par canoe.shtml. Si vous voulez que vos fichiers conservent leurs extensions .html ou .htm, demandez à votre administrateur système de configurer le serveur de façon à ce qu'il examine tous les fichiers (et pas seulement les fichiers portant une certaine extension) pour les inclusions à partir du serveur. L'analyse des inclusions à partir du serveur demandant toutefois un peu plus de temps, les pages analysées par le serveur s'affichent un peu plus lentement que les autres pages. Pour cette raison, certains administrateurs système ne donnent pas la possibilité d'analyser tous les fichiers.

Insertion d'inclusions côté serveur

Dreamweaver permet d'insérer des inclusions côté serveur dans vos pages.

Insertion d'une inclusion côté serveur

1

Sélectionnez Insertion > Inclusion côté serveur.

2

Dans la boîte de dialogue qui s'affiche, recherchez le fichier et sélectionnez-le.

Par défaut, un type de fichier à inclure est inséré.

3

Pour modifier le type à inclure, sélectionnez l'inclusion côté serveur dans la fenêtre Document et modifiez son type dans l'inspecteur Propriétés (Fenêtre > Propriétés), comme suit :

•

Si votre serveur est un serveur Web Apache, sélectionnez Virtuel. Dans Apache, Virtuel fonctionne dans tous les cas, tandis que Fichier fonctionne seulement dans certains cas.

•

Si votre serveur est un serveur Microsoft IIS (Internet Information Server), sélectionnez Fichier (Virtuel ne fonctionne avec IIS que dans des cas précis).

Remarque :

Malheureusement, IIS ne permet pas d'inclure un fichier dans un dossier situé au-dessus du dossier en cours dans la hiérarchie des fichiers, à moins qu'un logiciel spécial n'ait été installé sur le serveur. Pour pouvoir inclure un fichier d'un dossier placé plus haut dans la hiérarchie des dossiers sur un serveur IIS, demandez à votre administrateur système si le logiciel nécessaire est installé.

•

Pour les autres types de serveurs, ou si vous ne savez pas quel type de serveur vous utilisez, demandez à votre administrateur système l’option à utiliser.

Changement de fichier inclus

1

Sélectionnez la SSI dans la fenêtre de document.

2

Ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés).

3


•

Cliquez sur l'icône de dossier et localisez puis sélectionnez le nouveau fichier à inclure.

•

Dans la zone de texte, tapez le chemin et le nom de fichier du nouveau fichier à inclure.

Modification du contenu d'une inclusion côté serveur

Dreamweaver permet de modifier des inclusions côté serveur. Pour modifier le contenu associé au fichier inclus, vous devez ouvrir le fichier.

1

Sélectionnez l'inclusion côté serveur soit en mode Création, soit en mode Code, et cliquez sur Modifier dans l'inspecteur

Propriétés.

DREAMWEAVER CS3


328

Le fichier inclus s'ouvre dans une nouvelle fenêtre de document.

2

Modifiez le fichier puis enregistrez-le.

Les modifications sont immédiatement reflétées dans le document actif et dans tous les autres documents ultérieurs qui incluent ce fichier.

3

Si nécessaire, téléchargez le fichier inclus vers le site distant.

Gestion des bibliothèques de balises

A propos des bibliothèques de balises de Dreamweaver

Une bibliothèque de balises de Dreamweaver est une collection de balises d'un type donné accompagnée d'informations sur le formatage des balises par Dreamweaver. Les bibliothèques de balises fournissent des informations à propos des balises utilisées par Dreamweaver pour les indicateurs de code, les vérifications de navigateurs cibles, le sélecteur de balises et autres options de codage. L'éditeur de la bibliothèque de balises vous permet d'ajouter et de supprimer des bibliothèques de balises, des balises, des attributs et des valeurs d'attribut, de définir les propriétés d'une bibliothèque de balises, y compris le format (pour faciliter l'identification dans le code), ainsi que de modifier les balises et les attributs.

Voir aussi

« Importation de balises personnalisées dans Dreamweaver » à la page 330


O

uverture et fermeture de l'éditeur de la bibliothèque de balises

1

Choisissez Edition

La boîte de dialogue Editeur de la bibliothèque de balises s'affiche. Le contenu de cette boîte de dialogue varie selon la balise sélectionnée.

2

Fermez l'éditeur de la bibliothèque de balises en procédant d'une des façons suivantes :

• Pour enregistrer les modifications, cliquez sur OK.

• Pour fermer l'éditeur sans enregistrer les modifications, cliquez sur Annuler.

Remarque :

Lorsque vous cliquez sur Annuler, toutes les modifications apportées à la bibliothèque de balises sont effacées. Si vos modifications incluaient la suppression d'une balise ou d'une bibliothèque, celle-ci est restaurée.

Ajout de bibliothèques, de balises et d'attributs

L'éditeur de la bibliothèque de balises permet d'ajouter des bibliothèques de balises ou des balises et des attributs aux bibliothèques de balises dans Dreamweaver.

Voir aussi


« Importation de balises personnalisées dans Dreamweaver » à la page 330

Ajout d'une bibliothèque de balises

1

Dans la boîte de dialogue Editeur de la bibliothèque de balises (Edition

Plus (+) et choisissez Nouvelle bibliothèque de balises.

2

Dans la zone de texte Nom de la bibliothèque, entrez un nom (par exemple,

balises diverses

), puis cliquez sur OK.

DREAMWEAVER CS3


329

Ajout de balises à une bibliothèque de balises

1


Plus (+) et choisissez Nouvelles balises.

2

Dans le menu déroulant Bibliothèque de balises, choisissez une bibliothèque de balises.

3

Saisissez le nom de la nouvelle balise. Pour ajouter plusieurs balises, séparez leurs noms par une virgule suivie d'un espace (par exemple :

cfgraph, cfgraphdata

).

4

Si les nouvelles balises ont des balises de fin correspondantes (

</...>

), sélectionnez Avoir des balises de fin correspondantes.

5

Cliquez sur OK.

Ajout d'attributs à une balise

1


Plus (+) et choisissez Nouveaux attributs.

2

Dans le menu déroulant Bibliothèque de balises, choisissez une bibliothèque de balises.

3

Sélectionnez une balise dans le menu contextuel Balise.

4

Saisissez le nom du nouvel attribut. Pour ajouter plusieurs attributs, séparez leurs noms par une virgule suivie d'un espace

(par exemple :

width, height

).

5

Cliquez sur OK.

Modification de bibliothèques, de balises et d'attributs

L'éditeur de la bibliothèque de balises vous permet de définir les propriétés d'une bibliothèque de balises ou modifier les balises et les attributs d'une bibliothèque.

Voir aussi


Définition des propriétés d'une bibliothèque de balises

1

Dans la boîte de dialogue Editeur de la bibliothèque de balises (Edition bibliothèque de balises (et non une balise) dans la liste des balises.

Remarque :

Les propriétés des bibliothèques de balises s'affichent uniquement quand une bibliothèque de balises est sélectionnée. Les bibliothèques de balises sont représentées par les dossiers de niveau supérieur dans la liste des balises. Par exemple, le dossier des balises HTML représente une bibliothèque de balises, et dans ce dossier, le sous-dossier abbr représente une balise.

2

Dans la liste Utilisé dans, sélectionnez tous les types de document qui seront utilisés par la bibliothèque de balises.

Les types de documents sélectionnés ici sont ceux qui fourniront les indicateurs de code pour la bibliothèque de balises spécifiée. Par exemple, si l'option HTML n'est pas sélectionnée pour une bibliothèque de balises, les indicateurs de code de cette balise ne s'affichent pas dans les fichiers HTML.

3

(Facultatif) Entrez le préfixe des balises dans la zone de texte Préfixe de balise.

Remarque :

Un préfixe est utilisé pour identifier l'appartenance d'une balise dans le code à une bibliothèque de balises définie.

Certaines bibliothèques n'utilisent pas de préfixes.

4

Cliquez sur OK.

Modification d'une balise dans une bibliothèque

1

Dans la boîte de dialogue Editeur de la bibliothèque de balises (Edition bibliothèque de balises dans la liste Balises et sélectionnez une balise.

2

Définissez les options de format de balise suivantes :

Sauts de ligne

Détermine l'endroit où Dreamweaver insère les sauts de ligne pour une balise.

DREAMWEAVER CS3


330

Contenu

Détermine comment Dreamweaver insère le contenu d'une balise, à savoir si le saut de ligne et les règles de formatage s'appliquent au contenu.

Casse

Indique la casse d'une balise spécifique. Choisissez Par défaut, Minuscules, Majuscules ou Minuscules/majuscules.

Si vous choisissez cette dernière option, la boîte de dialogue Nom de balise en minuscules/majuscules s'affiche. Saisissez la balise en utilisant que Dreamweaver doit utiliser lors de l'insertion de cette dernière (par exemple,

getProperty)

, puis cliquez sur OK.

Par défaut

Définit la casse par défaut de toutes les balises. Dans la boîte de dialogue Casse de balise par défaut qui s'affiche,

Il est préférable de définir les minuscules comme casse par défaut, conformément aux normes XML et XHTML.

Modification de l'attribut d'une balise

1

Dans la boîte de dialogue Editeur de la bibliothèque de balises (Edition bibliothèque de balises dans la zone Balises, développez une balise et sélectionnez un attribut.

2

Dans le menu déroulant Casse d'attribut, choisissez Par défaut, Minuscules, Majuscules ou Minuscules/majuscules.

Si vous choisissez cette dernière option, la boîte de dialogue Nom d'attribut en minuscules/majuscules s'affiche. Saisissez l'attribut en utilisant la casse dont doit se servir Dreamweaver lors de l'insertion de cet attribut (par exemple,

onClick


Cliquez sur le lien Défaut pour définir la casse par défaut pour tous les noms d'attributs.

3

Dans le menu déroulant Type d'attribut, sélectionnez le type de l'attribut.

Si vous choisissez Enuméré, entrez toutes les valeurs d'attribut autorisées dans la zone de texte Valeurs. Séparer les valeurs par des virgules, sans insérer d'espaces. Par exemple, les valeurs énumérées de l'attribut showborder

de la balise cfchart sont définies comme yes,no

.

Suppression de bibliothèques, de balises et d'attributs

1

Dans la boîte de dialogue Editeur de la bibliothèque de balises (Edition > Bibliothèques de balises), sélectionnez une bibliothèque de balises, une balise ou un attribut dans la boîte de dialogue Balises.

2

Cliquez sur le bouton Moins (-).

3

Cliquez sur OK pour confirmer la suppression définitive.

L'élément disparaît de la boîte de dialogue Balises.

4

Cliquez sur OK pour fermer l'éditeur de la bibliothèque de balises et terminer la procédure de suppression.

Voir aussi


Importation de balises personnalisées dans Dreamweaver

A propos de l'importation de balises personnalisées dans Dreamweaver

Une fois importées dans Dreamweaver, les balises personnalisées font partie intégrante de l'environnement de création de pages Web. Par exemple, lorsque vous commencez à taper une balise personnalisée importée en mode Code, un menu d'indicateurs de code s'affiche avec tous les attributs de balise et vous permet d'en sélectionner un.

Importation de balises à partir de fichiers XML

Vous pouvez importer des balises à partir d'un fichier DTD XML (Document Type Definition) ou d'un schéma.

1

Ouvrez l'éditeur de la bibliothèque de balises (Edition > Bibliothèques de balises).

DREAMWEAVER CS3


331

2

Cliquez sur le bouton Plus (+), puis choisissez DTD Schema

3

Entrez le nom ou l'URL du fichier DTD ou schéma.

4

Entrez le préfixe à utiliser avec les balises.

Remarque :

Un préfixe est utilisé pour identifier l'appartenance d'une balise dans le code à une bibliothèque de balises définie.

Certaines bibliothèques n'utilisent pas de préfixes.

5

Cliquez sur OK.

Importation de balises ASP.

N

E

T

personnalisées

Vous pouvez importer des balises ASP.NET personnalisées dans Dreamweaver.

Vérifiez tout d’abord que la balise personnalisée est installée sur le serveur d'évaluation défini dans la boîte de dialogue

Définition du site (voir « Configuration d'un serveur d'évaluation » à la page 45). Les balises compilées (fichiers DLL)

doivent être placées dans le dossier /bin de la racine du site. Les balises non compilées (fichiers ASCX) peuvent résider dans un répertoire ou un sous-répertoire virtuel sur le serveur. Pour plus d'informations, consultez la documentation

Microsoft ASP.NET.

1

Ouvrez une page ASP.NET dans Dreamweaver.

2


3

Cliquez sur le bouton Plus (+), définissez les options suivantes , puis cliquez sur OK

•

Pour importer toutes les balises ASP.NET personnalisées à partir du serveur d'application, choisissez ASP.NET

Importer toutes les balises personnalisées ASP.NET.

•

Pour n'importer que certaines balises personnalisées à partir du serveur d'application, choisissez ASP.NET les balises personnalisées ASP.NET sélectionnées. Tout en maintenant la touche Ctrl (Windows) ou Commande

(Macintosh) enfoncée, cliquez sur les balises dans la liste.

Importation de balises JSP à partir d'un serveur (web.xml)

Vous pouvez importer une bibliothèque de balises JSP dans Dreamweaver à partir de divers types de fichiers ou d'un serveur JSP.

1

Ouvrez une page JSP dans Dreamweaver.

2


3

Cliquez sur le bouton Plus (+), puis choisissez JSP > Importer depuis le fichier (*.tld, *.jar, *.zip) ou JSP > Importer depuis le serveur (web.xml).

4

Cliquez sur le bouton Parcourir ou entrez un nom de fichier pour spécifier le fichier contenant la bibliothèque de balises.

5

Entrez un URI pour identifier la bibliothèque de balises.

L'URI (Uniform Resource Identifier) désigne souvent l'URL de la société chargée de la maintenance de la bibliothèque de balises. L'URL n'est pas utilisée pour afficher le site Web de la société, mais uniquement à titre d'identification de la bibliothèque de balises.

6

(Facultatif) Entrez le préfixe à utiliser avec les balises. Certaines bibliothèques de balises emploient un préfixe pour identifier l'appartenance d'une balise dans le code à une bibliothèque de balises définie.

7

Cliquez sur OK.

Importation de balises JRun

Si vous travaillez avec Macromedia® JRun™ d'Adobe, vous pouvez importer vos balises JRun dans Dreamweaver.

1

Ouvrez une page JSP dans Dreamweaver.

2


3

Cliquez sur le bouton Plus (+), puis choisissez JSP > Importer les balises de serveur JRUN depuis le dossier.

4

Spécifiez le nom du dossier contenant les balises de serveur JRUN.

DREAMWEAVER CS3


332

5

Entrez un URI pour identifier la bibliothèque de balises.

L'URI (Uniform Resource Identifier) désigne souvent l'URL de la société chargée de la maintenance de la bibliothèque de balises. L'URL n'est pas utilisée pour afficher le site Web de la société, mais uniquement à titre d'identification de la bibliothèque de balises.

6

(Facultatif) Entrez le préfixe à utiliser avec les balises. Certaines bibliothèques de balises emploient un préfixe pour identifier l'appartenance d'une balise dans le code à une bibliothèque de balises définie.

7

Cliquez sur OK.

Chapitre 12 : Ajout de comportements

JavaScript

Vous pouvez utiliser les comportements intégrés pour améliorer l'aspect, la fonctionnalité et l'attrait de votre site Web. Vous pouvez associer ces comportements à des éléments de vos pages Web sans avoir à connaître JavaScript.

Utilisation des comportements JavaScript

A propos des comportements JavaScript

Les comportements Adobe® Dreamweaver® CS3 placent du code JavaScript dans des documents de façon à ce que les visiteurs puissent modifier une page Web de différentes façons ou lancer certaines tâches. Un comportement est la combinaison d'un événement et d'une action déclenchée par cet événement. Dans le panneau Comportements, vous pouvez ajouter un comportement à une page en spécifiant une action, puis l'événement qui déclenche cette action.

Remarque :

Le code de comportement est un code JavaScript côté client, c'est-à-dire qu'il s'exécute sur des navigateurs, mais pas sur des serveurs.

Les événements sont en réalité des messages générés par les navigateurs, indiquant qu'un utilisateur a fait quelque chose sur votre page. Par exemple, lorsqu'un visiteur déplace le pointeur sur un lien, le navigateur génère un événement onMouseOver pour ce lien ; le navigateur vérifie ensuite s'il doit appeler du code JavaScript (spécifié dans la page affichée) en guise de réponse. Ces événements sont définis pour différents éléments de la page ; par exemple, dans la plupart des navigateurs, onMouseOver

et onClick

sont des événements associés à des liens, tandis que onLoad

est un événement associé à des images et à la section body

du document.

Une action correspond à un code JavaScript pré-rédigé qui effectue une tâche spécifique, comme ouvrir une fenêtre de navigateur, afficher ou masquer un calque, diffuser un son ou arrêter une animation Adobe Shockwave. Les actions proposées dans Dreamweaver présentent une compatibilité inter-navigateurs maximale.

Une fois qu'un comportement est associé à un élément de page, le comportement appelle l'action (code JavaScript) associée

à un événement chaque fois que cet événement se produit pour cet élément. Les événements disponibles pour déclencher une action donnée varient d'un navigateur à l'autre. Par exemple, si vous associez l'action Message contextuel à un lien et spécifiez que l'action sera déclenchée par l'événement onMouseOver

, votre message s'affiche dans une boîte de dialogue lorsqu'un utilisateur pointe la souris sur ce lien dans le navigateur.

Un événement unique peut déclencher plusieurs actions différentes et vous pouvez définir l'ordre d'exécution de ces actions.

Dreamweaver propose plus d'une vingtaine d'actions ; des actions supplémentaires sont disponibles sur le site Web d'Exchange à l'adresse www.adobe.com/go/dreamweaver_exchange_fr , ainsi que sur les sites d'autres développeurs Vous pouvez écrire vos propres actions si vous maîtrisez le langage JavaScript.

Remarque :

Les termes comportement et action appartiennent à la terminologie Dreamweaver et non à la terminologie

HTML. Du point de vue du navigateur, une action est un élément de code JavaScript comme un autre.

Présentation du panneau Comportements

Utilisez le panneau Comportements (Fenêtre > Comportements) pour associer des comportements à des éléments de la page (plus précisément aux balises) et pour modifier les paramètres des comportements précédemment associés.

Les comportements déjà associés à l'élément de la page actuellement sélectionnée sont répertoriés dans la liste de comportements (la zone principale du panneau), établie par événement et par ordre alphabétique. Si plusieurs actions sont répertoriées pour le même événement, elles sont exécutées dans l'ordre dans lequel elles apparaissent dans la liste. Si aucun comportement n'apparaît dans la liste, cela signifie qu'aucun comportement n'est associé à l'élément sélectionné.

333

DREAMWEAVER CS3


334

Le panneau Comportements comprend les options suivantes :

Afficher les événements définis

Affiche uniquement les événements associés au document actif. Les événements sont organisés en catégorie client et serveur. Les événements de chaque catégorie se trouvent dans une liste que vous pouvez réduire. Afficher les événements définis constitue la vue par défaut.

Afficher tous les événements

Affiche une liste alphabétique de tous les événements d'une catégorie donnée.

Ajouter action (+)

Affiche un menu d'actions pouvant être associées à l'élément actuellement sélectionné. Lorsque vous sélectionnez une action dans la liste, une boîte de dialogue s'affiche, dans laquelle vous pouvez définir les paramètres pour cette action. Si toutes les actions s'affichent en grisé, cela signifie qu'aucun événement ne peut être généré par l'élément sélectionné.

Supprimer (–)

Supprime l'action et l'événement sélectionnés de la liste de comportements.

Boutons fléchés Haut et Bas

Déplacent l'action sélectionnée vers le haut ou vers le bas dans la liste des comportements pour un événement particulier. Vous ne pouvez modifier l'ordre des actions que pour un événement particulier ; par exemple, vous pouvez modifier l'ordre d'exécution de plusieurs actions pour l'événement onLoad

, mais toutes les actions onLoad restent groupées dans la liste de comportements. Les boutons fléchés sont désactivés pour les actions ne pouvant être déplacées dans la liste, vers le haut ou vers le bas.

Evénements

Affiche un menu déroulant, visible uniquement lorsqu'un événement est sélectionné, de tous les événements qui peuvent déclencher l'action (ce menu s'affiche lorsque vous cliquez sur la touche fléchée située en face du nom de l'événement sélectionné). Différents événements s'affichent, selon l'objet sélectionné. Si les événements attendus n'apparaissent pas, assurez-vous d'avoir sélectionné le bon élément de page ou la bonne balise. (Pour sélectionner une balise spécifique, utilisez le sélecteur de balises situé dans le coin inférieur gauche de la fenêtre de document.) Assurez-vous

également d'avoir sélectionné les navigateurs corrects dans le sous-menu Afficher les événements pour.

Remarque :

Les noms d'événement entre parenthèses sont disponibles uniquement pour les liens. En choisissant l'un de ces noms d'événement, vous ajoutez automatiquement un lien nul à l'élément sur la page sélectionnée et vous associez le comportement à ce lien et non à l'élément lui-même. Le lien nul est défini sous la forme href="javascript:;" dans le code HTML.

Afficher les événements pour

Indique les navigateurs dans lesquels le comportement en cours doit fonctionner (il s'agit du sous-menu du menu Evénements). La sélection effectuée dans ce menu détermine les événements qui apparaîtront dans le menu Evénements. Les navigateurs plus anciens prennent généralement en charge moins d'événements que les plus récents et, dans la plupart des cas, plus votre choix de navigateurs cible est général, plus le nombre d'événements affichés sera faible.

Par exemple, si vous sélectionnez un navigateur version 3.0 ou ultérieure, vous ne pourrez choisir que des événements disponibles pour toutes les versions postérieures à la version 3.0 de Netscape Navigator et de Microsoft Internet Explorer, ce qui constitue une liste d'événements très limitée.

A propos des événements

Chaque navigateur génère une série d'événements que vous pouvez associer aux actions répertoriées dans le menu Actions

(+) du panneau Comportements. Lorsqu'un visiteur de votre page Web déclenche une action interactive avec celle-ci, en cliquant sur une image par exemple, le navigateur génère un événement. Cet événement permet d'appeler une fonction

JavaScript exécutant une action quelconque. Dreamweaver fournit de nombreuses actions courantes que vous pouvez déclencher à l'aide de ces événements.

Pour obtenir les noms et les descriptions des événements fournis par chacun des navigateurs, consultez le centre de support de Dreamweaver à l'adresse www.adobe.com/go/dreamweaver_support_fr .

Différents événements apparaissent dans le menu Evénements, selon l'objet sélectionné et les navigateurs spécifiés dans le menu déroulant Afficher les événements pour. Pour savoir quels sont les événements pris en charge par un navigateur spécifique pour un élément de page donné, insérez l'élément de la page dans votre document et associez-lui un comportement, puis consultez le menu Evénements dans le panneau Comportements. (Par défaut, les événements proviennent de la liste d'événements HTML 4.01 et ils sont pris en charge par la plupart des navigateurs modernes.)

Certains événements peuvent apparaître en grisé (désactivés) si les objets pertinents n'existent pas encore dans la page ou si l'objet sélectionné ne peut pas recevoir d'événements. Si les événements désirés ne s'affichent pas, vérifiez que vous avez sélectionné l'objet correct ou modifiez les navigateurs cibles dans le sous-menu Afficher les événements pour.

DREAMWEAVER CS3


335

Si vous associez un comportement à une image, certains événements (par exemple onMouseOver

) apparaissent entre parenthèses. Ces événements ne sont disponibles que pour des liens. Lorsque vous en sélectionnez un, Dreamweaver entoure l'image d'une balise a pour définir un lien nul, Le lien nul est représenté par javascript:;

dans la zone de texte

Lien de l'inspecteur Propriétés. Vous pouvez modifier la valeur de ce lien pour le transformer en véritable lien vers une autre page, mais si vous effacez le lien JavaScript sans le remplacer par un autre lien, vous supprimerez le comportement.

Pour voir quelles balises peuvent être utilisées avec un événement donné dans un navigateur donné, recherchez l'événement dans l'un des fichiers de votre dossier Dreamweaver/Configuration/Behaviors/Events.

Application d'un comportement

Vous pouvez associer des comportements au document entier (à la balise

<body>

) ou à des liens, des images, des éléments de formulaire et divers autres éléments HTML.

Le navigateur cible que vous choisissez détermine les événements pris en charge pour un élément donné.

Vous pouvez attribuer plusieurs actions à chaque événement. Les actions sont exécutées dans l'ordre dans lequel elles sont répertoriées dans la colonne Actions du panneau Comportements, mais vous pouvez modifier cet ordre.

1

Sélectionnez un élément dans la page, tel qu'une image ou un lien.

Pour associer un comportement à l'ensemble de la page, cliquez sur la balise

<body>

dans le sélecteur de balises, situé dans le coin inférieur gauche de la fenêtre de document.

2

Choisissez Fenêtre > Comportements.

3

Cliquez sur le bouton plus (+) et choisissez une action dans le menu Actions.

Vous ne pouvez pas choisir les actions qui apparaissent en grisé dans le menu. Ces actions peuvent être grisées si un objet nécessaire n'existe pas dans le document actif Par exemple, l'action Contrôler Shockwave ou Flash s'affiche en grisé si le document ne contient pas de fichiers SWF Flash ou Shockwave.

Lorsque vous choisissez une action, une boîte de dialogue s'affiche avec les paramètres et les instructions pour cette action.

4

Saisissez les paramètres pour l'action et cliquez sur OK.

Toutes les actions proposées dans Dreamweaver fonctionnent dans les navigateurs modernes. Certaines actions ne fonctionnent pas dans les navigateurs plus anciens, mais elles n'entraîneront pas d'erreurs.

Remarque :

Les éléments cibles doivent posséder un ID unique. Par exemple, si vous souhaitez appliquer le comportement

Permuter une image à une image, cette image doit avoir un ID. Si vous n'avez pas spécifié d'ID pour l'élément, Dreamweaver le fait automatiquement à votre place.

5

L'événement par défaut qui déclenchera l'action apparaît dans la colonne Evénements. S'il ne s'agit pas de l'événement que vous désirez utiliser, sélectionnez-en un autre dans le menu contextuel Evénements. (Pour ouvrir le menu Evénements, sélectionnez un événement ou une action dans le panneau Comportements, puis cliquez sur la flèche noire pointée vers le bas qui apparaît entre le nom de l'événement et le nom de l'action.)

Modification ou suppression d'un comportement

Une fois le comportement associé, vous pouvez modifier l'événement qui déclenche l'action, ajouter ou supprimer des actions et modifier les paramètres des actions.

1

Sélectionnez un objet auquel un comportement a été associé.

2

Choisissez Fenêtre > Comportements.

3

Effectuez les modifications voulues :

•

Pour modifier les paramètres d'une action, double-cliquez sur son nom ou sélectionnez-le et appuyez sur la touche

•

Pour modifier l'ordre d'apparition des actions pour un événement donné, sélectionnez une action et cliquez sur la flèche

Haut ou Bas. Vous pouvez également sélectionner l'action, puis la copier et la coller à l'emplacement de votre choix parmi les autres actions.

DREAMWEAVER CS3


336

•

Pour supprimer un comportement, sélectionnez-le et cliquez sur le signe moins (-) ou appuyez sur Supprimer.

Mise à jour d'un comportement

1

Sélectionnez l'élément auquel est attaché le comportement.

2

Choisissez Fenêtre > Comportements et double-cliquez sur le comportement.

3

Effectuez vos modifications, puis cliquez sur OK dans la boîte de dialogue du comportement.

Toutes les occurrences de ce comportement sont actualisées. Si d'autres pages de votre site contiennent ce comportement, vous devez les mettre à jour page par page.

T

éléchargement et installation de comportements créés par des développeurs indépendants

De nombreuses extensions sont disponibles sur le site Web d'Exchange pour Dreamweaver

( www.adobe.com/go/dreamweaver_exchange_fr ).

1

Sélectionnez Fenêtre > Comportements et choisissez l'option Télécharger d'autres comportements dans le menu contextuel Actions.

Votre navigateur principal s'ouvre sur le site d'Exchange

2

Localisez les progiciels.

3

Téléchargez et installez le progiciel d'extension souhaité.

Voir aussi


Application de comportements Dreamweaver intégrés

Utilisation des comportements intégrés

Les comportements inclus dans Dreamweaver ont été conçus pour fonctionner dans les navigateurs modernes. Les comportements échouent dans les navigateurs plus anciens, sans que l'utilisateur en soit informé.

Remarque :

Les actions Dreamweaver ont été rédigées avec soin afin de fonctionner avec le plus grand nombre possible de navigateurs. Si vous supprimez manuellement le code d'une action Dreamweaver ou si vous le remplacez par votre propre code, vous risquez de perdre la compatibilité inter-navigateurs.

Bien que les actions Dreamweaver aient été rédigées pour augmenter la compatibilité inter-navigateurs, certains navigateurs ne prennent pas du tout en charge JavaScript et de nombreuses personnes désactivent JavaScript sur leur navigateur lorsqu'ils explorent la Toile. Pour optimiser les résultats inter-plates-formes, fournissez d'autres interfaces contenues dans des balises

<noscript>

afin que votre site reste accessible aux personnes qui n'utilisent pas JavaScript.

Application du comportement Appel JavaScript

Le comportement Appel JavaScript exécute une fonction ou une ligne de code JavaScript personnalisée lorsqu'un

événement se produit (vous pouvez rédiger le script vous-même, ou utiliser le code fourni gratuitement dans le cadre de plusieurs bibliothèques de JavaScript sur Internet).

1

Sélectionnez un objet et choisissez Appel JavaScript dans le menu Actions du panneau Comportements.

2

Tapez le code JavaScript à exécuter ou le nom de la fonction.

Par exemple, pour créer un bouton Retour, vous pouvez saisir

if (history.length

. Si vous avez encapsulé votre code dans une fonction, indiquez simplement le nom de la fonction (par exemple,

hGoBack()

).

DREAMWEAVER CS3


337

3

Cliquez sur OK et vérifiez que l'événement par défaut est correct. Si ce n'est pas le cas, sélectionnez un autre événement ou changez de navigateur cible dans le sous-menu Afficher les événements pour.

Application du comportement Changer la propriété

Utilisez le comportement Changer la propriété pour modifier la valeur d'une des propriétés d'un objet (par exemple, la couleur d'arrière-plan d'une balise div ou l'action d'un formulaire).

Remarque :

N'utilisez ce comportement que si vous êtes expert en HTML et en JavaScript.

1

Sélectionnez un objet et choisissez Changer la propriété dans le menu Actions du panneau Comportements.

2

Dans le menu Type d'élément, sélectionnez un type d'élément pour afficher tous les éléments nommés de ce type.

3

Sélectionnez un élément dans le menu ID d'élément.

4

Choisissez une propriété dans le menu Propriété ou tapez le nom de la propriété dans la zone de texte.

5

Entrez la nouvelle valeur pour la nouvelle propriété dans la zone Nouvelle valeur.

6


Application du comportement Vérifier le navigateur

Remarque :

Ce comportement est déconseillé à partir de Dreamweaver 9. Pour y accéder, vous devez sélectionner l'élément de menu ~Déprécié du menu Actions du panneau Comportements.

Utilisez le comportement Vérifier le navigateur pour aiguiller les visiteurs vers des pages différentes selon le modèle et la version de leur navigateur. Par exemple, vous pouvez décider de rediriger les visiteurs utilisant Netscape Navigator 4.0 vers une page différente de celle que vous destinez aux utilisateurs d'Internet Explorer 4.0.

Il est utile d'associer ce comportement à à la balise

<body>

d'une page qui est compatible avec presque tous les navigateurs quelque chose.

Une autre option consiste à associer ce comportement à un lien nul (tel que

<a href="javascript:;">

) pour que l'action détermine la page à laquelle le lien renvoie, selon le modèle et la version du navigateur du visiteur.

1

Sélectionnez un objet et choisissez ~Déconseillé > Vérifier le navigateur dans le menu Actions du panneau

Comportements.

2

Indiquez comment vous souhaitez distinguer les visiteurs : par modèle de navigateur, par version ou les deux.

3

Spécifiez une version de Netscape Navigator.

4

Dans les menus contextuels adjacents, sélectionnez des options de destination (Atteindre l'URL, Atteindre l'URL sec. ou

Rester sur cette page.) Là, sélectionnez les options respectives dans le cas où la version de Netscape Navigator est celle que vous avez spécifiée (ou une version plus récente) et dans le cas contraire.

5

Spécifiez une version d'Internet Explorer et sélectionnez les options de destination comme vous l'avez fait à l'étape 4.

6

Dans le menu Autres navigateurs, sélectionnez l'action qui sera exécutée si le navigateur n'est ni Netscape Navigator, ni

Internet Explorer

La meilleure option est Rester sur cette page pour les navigateurs autres que Netscape Navigator et Internet Explorer, car la plupart ne prennent pas en charge JavaScript – et s'ils ne peuvent pas gérer ce comportement, ils resteront sur cette page de toute façon.

7

Entrez le noms de fichier et le chemin d'accès à l'URL et à l'URL secondaire dans les zones de texte situées en bas de la boîte de dialogue. Si vous indiquez une URL distante, vous devez faire précéder l'adresse www du préfixe http://.

8


DREAMWEAVER CS3


338

Application du comportement Vérifier le plug-in

Utilisez le comportement Vérifier le plug-in pour envoyer les visiteurs sur des pages différentes selon que le plug-in spécifié est installé ou non. Par exemple, vous pouvez rerouter les visiteurs sur une page s'ils possèdent Shockwave, et sur une autre dans le cas contraire.

Remarque :

Il est impossible de détecter des plug-ins spécifiques dans Microsoft Internet Explorer (IE) à l'aide de JavaScript.

Toutefois, si vous sélectionnez les plug-ins Flash ou Director, le code VBScript approprié sera automatiquement ajouté à votre page pour les détecter dans Internet Explorer sous Windows. Il est impossible de détecter les plug-ins dans Internet Explorer sur

Mac OS.

1

Sélectionnez un objet et choisissez Vérifier le plug-in dans le menu Actions du panneau Comportements.

2

Sélectionnez un plug-in dans le menu Plug-in, ou cliquez sur Entrée et tapez le nom exact du plug-in dans la zone de texte adjacente.

Vous devez utiliser le nom exact du plug-in, tel qu'il apparaît en gras sur la page A propos des plug-ins dans Netscape

Navigator (dans Windows, choisissez la commande Aide > A propos des plug-ins dans le navigateur. Dans Mac OS, choisissez A propos des plug-ins dans le menu Pomme).

3

Dans la zone de texte Si trouvé, aller à l'URL, spécifiez l'URL destinée aux utilisateurs qui disposent du plug-in.

Si vous indiquez une URL distante, vous devez faire précéder l'adresse www du préfixe http://. Si vous ne renseignez pas la zone, les visiteurs resteront dans la même page.

4

Dans la zone de texte Sinon, aller à l'URL, indiquez une autre URL pour les visiteurs qui ne disposent pas du plug-in. Si vous ne renseignez pas la zone, les visiteurs resteront dans la même page.

5

Spécifiez la procédure à suivre si la détection de plug-in n'est pas possible. Par défaut, lorsque la détection est impossible, l'utilisateur est envoyé à l'URL indiquée dans la zone de texte Sinon. Pour que l'utilisateur soit envoyé vers la première URL

(Si trouvé), sélectionnez l'option Toujours aller à la première URL si la détection n'est pas possible. Lorsqu'elle est que ce n'est pas le cas ». En général, activez cette option si le contenu du plug-in est un élément essentiel de votre page ; dans le cas contraire, laissez-la désactivée.

Remarque :

Cette option ne concerne qu'Internet Explorer ; Netscape Navigator détecte toujours les plug-ins.

6


Application du comportement Contrôler Shockwave ou Flash

Remarque :


Utilisez cette fonction pour diffuser, arrêter ou rembobiner une animation Shockwave ou Flash ou pour aller à une image précise d'un fichier Shockwave ou Flash SWF.

1

Choisissez, selon le cas, Insertion > Médias > Shockwave ou Insertion > Médias > Flash pour insérer un fichier

Shockwave ou Flash SWF.

2

Choisissez Fenêtre > Propriétés et entrez un nom pour l'animation dans la zone de texte située en haut à gauche à côté de l'icône Shockwave ou Flash. Vous devez donner un nom à l'animation pour la contrôler à l'aide de ce comportement.

3

Sélectionnez l'élément (par exemple, un bouton de lecture) à utiliser pour contrôler l'animation Shockwave ou Flash SWF.

4

Choisissez ~Désuet > Contrôler Shockwave ou Flash dans le menu Actions du panneau Comportements.

5

Choisissez une animation dans le menu Animation.

Dreamweaver répertorie automatiquement les noms de toutes les animations Shockwave et Flash du document actif En particulier, Dreamweaver établit une liste des animations ayant une extension de fichier .dcr, .dir, .swf ou .spl se trouvant dans les balises

<object>

ou

<embed>

.

6

Spécifiez l'action de contrôle de l'animation désirée: Jouer, Arrêter, Rembobiner ou Atteindre l'image indiquée dans l'animation. L'option Jouer diffuse l'animation en commençant par l'image où le comportement a lieu.

DREAMWEAVER CS3


339

7


Application du comportement

T

irer l'élément PA

Le comportement Tirer l'élément PA permet au visiteur de faire glisser un élément à positionnement absolu. Utilisez ce comportement pour créer des puzzles, des contrôles de déplacement et autres éléments mobiles de l'interface.

Vous pouvez spécifier la direction vers laquelle l'utilisateur peut faire glisser l'élément PA (horizontalement, verticalement ou dans toutes les directions), une cible vers laquelle l'utilisateur doit faire glisser l'élément PA, si ce dernier doit être aimanté par la cible ou non lorsqu'il arrive à moins d'un certain nombre de pixels de la cible, l'action à déclencher lorsque l'élément PA touche la cible, etc.

Etant donné que le comportement Tirer l'élément PA doit être appelé avant que le visiteur puisse faire glisser l'élément PA, vous devez l'associer à l'objet body

(avec l'événement onLoad

).

1

Choisissez Insertion > Objets mise en forme > Div PA ou cliquez sur le bouton Tracer un div pour un élément PA de la barre Insertion, puis dessinez un div PA dans la vue Création de la fenêtre de document.

2

Cliquez sur

<body>

dans le sélecteur de balises situé dans le coin inférieur gauche de la fenêtre de document.

3

Choisissez Tirer l'élément PA dans le menu Actions du panneau Comportements.

Si l'option Tirer l'élément PA n'est pas disponible, cela signifie probablement qu'un élément PA est sélectionné.

4

Dans le menu déroulant Elément PA, sélectionnez l'élément PA.

5

Sélectionnez soit Contraint, soit Libre dans le menu contextuel Mouvement.

Les mouvements sans contrainte sont adaptés aux puzzles et aux autres jeux à base de glisser-déplacer. Pour les contrôles de déplacement et les objets mobiles (tiroirs, rideaux et stores), choisissez un mouvement contraint.

6

Pour la restriction de mouvement, indiquez les valeurs de déplacement admises (en pixels) dans les zones de texte Haut,

Bas, Gauche et Droite.

Ces valeurs sont relatives à la position de départ de l'élément PA. Pour restreindre les déplacements à l'intérieur d'une zone rectangulaire, indiquez des valeurs positives dans les quatre zones de texte. Pour permettre uniquement un mouvement vertical, indiquez des valeurs positives pour Haut et Bas et 0 pour Gauche et Droite. Pour permettre uniquement un mouvement horizontal, indiquez des valeurs positives pour Gauche et Droite et 0 pour Haut et Bas.

7

Indiquez les coordonnées (exprimées en pixels) de la cible de dépôt dans les zones de texte Gauche et Haut.

La cible de dépôt est le point sur lequel vous voulez que l'utilisateur dépose l'élément PA. Un élément PA est considéré comme ayant atteint la cible de dépôt lorsque ses coordonnées d'origine (en haut à gauche) correspondent aux valeurs indiquées dans les zones de texte Gauche et Haut. Ces coordonnées sont relatives à l'angle supérieur gauche de la fenêtre du navigateur. Cliquez sur Obtenir la position courante pour remplir automatiquement les zones de texte avec les coordonnées actuelles de l'élément PA.

8

Entrez une valeur (exprimée en pixels) dans la zone de texte Aligner si dans pour déterminer la distance minimale à laquelle le visiteur doit approcher de la cible pour que l'élément PA se place automatiquement sur celle-ci.

Les valeurs importantes permettent à l'utilisateur de trouver plus facilement la cible de dépôt.

9

Pour des puzzles simples et des défilements d'images, vous pouvez vous en tenir là. Pour définir la poignée de déplacement de l'élément PA, suivre le mouvement de l'élément PA pendant qu'il est déplacé et déclencher une action lorsqu'il est déposé, cliquez sur l'onglet Avancé.

10

Pour spécifier que l'utilisateur doit cliquer dans une zone particulière de l'élément PA pour pouvoir le déplacer, sélectionnez Zone dans l'élément dans le menu Poignée de déplacement, puis indiquez les coordonnées de l'origine (angle supérieur gauche) de la poignée de déplacement, ainsi que la largeur et la hauteur de celle-ci.

Cette option est utile lorsque l'image insérée à l'intérieur de l'élément PA contient un symbole de déplacement, par exemple une barre de titre ou une poignée de tiroir. N'activez pas cette option si vous voulez que l'utilisateur soit libre de cliquer n'importe où dans l'élément PA pour le déplacer.

DREAMWEAVER CS3


340

11

Choisissez, parmi les options de la zone En déplaçant, celles que vous désirez utiliser :

•

Activez l'option Placer l'élément au premier plan si l'élément PA doit être amené au niveau le plus haut de l'ordre de superposition lors de son déplacement. Si vous activez cette option, utilisez le menu déroulant qui apparaît pour indiquer si l'élément PA doit être laissé au niveau de visibilité le plus élevé ou si sa position d'origine dans l'ordre de superposition doit être rétablie.

•

Tapez un code JavaScript ou un nom de fonction (par exemple, monitorAPelement()

) dans la zone de texte Appel

JavaScript pour que ce code ou cette fonction soit exécuté en boucle pendant le déplacement de l'élément PA. Par exemple, vous pouvez écrire une fonction pour surveiller les coordonnées de l'élément PA et afficher des indications,

12

Indiquez un code JavaScript ou un nom de fonction (par exemple,

evaluateAPelementPos()

) dans la deuxième zone de texte Appel JavaScript si vous voulez que le code ou la fonction soit exécuté(e) lorsque l'élément PA est déposé. Activez l'option Uniquement si aligné si le code JavaScript indiqué ne doit être exécuté que si l'élément PA a atteint la cible de dépôt.

13


Collecte d'informations sur l'élément PA déplaçable

Lorsque vous associez le comportement Tirer l'élément PA à un objet, Dreamweaver insère la fonction

MM_dragLayer() dans la section d'en-tête ( head

) de votre document. (La fonction conserve l'ancienne convention d'attribution de nom pour les éléments PA (anciennement, calques) de façon à ce que les calques créés dans les versions précédentes de Dreamweaver restent modifiable.) Cette fonction enregistre l'élément PA comme déplaçable et définit trois propriétés pour chaque

élément PA déplaçable,

MM_LEFTRIGHT

,

MM_UPDOWN

et

MM_SNAPPED

, que vous pouvez utiliser dans vos propres fonctions

JavaScript pour déterminer les positions horizontale et verticale de l'élément PA et s'il a atteint la cible de dépôt.

Remarque :

Les informations fournies ici sont destinées uniquement aux programmeurs JavaScript expérimentés.

Par exemple, la fonction suivante affiche la valeur de la propriété

MM_UPDOWN

(la position verticale actuelle de l'élément PA) dans un champ de formulaire appelé curPosField

. Les champs de formulaires servent à afficher des informations pouvant

être continuellement mises à jour, parce qu'ils sont dynamiques. Ainsi, vous pouvez modifier leur contenu après le chargement de la page.

function getPos(layerId){ var layerRef = document.getElementById(layerId); var curVertPos = layerRef.MM_UPDOWN; document.tracking.curPosField.value = curVertPos;

}

Au lieu d'afficher la valeur des propriétés

MM_UPDOWN

ou

MM_LEFTRIGHT

dans un champ de formulaire, vous pouvez utiliser ces valeurs de différentes manières. Par exemple, vous pouvez écrire une fonction qui affiche un message dans ce champ selon la distance qui reste à parcourir jusqu'à la cible, ou appeler une autre fonction pour afficher ou masquer un élément

PA selon la valeur de cette distance.

Il est particulièrement utile de tester la propriété

MM_SNAPPED

lorsque vous disposez, sur une page, de plusieurs éléments PA qui doivent tous atteindre leur cible pour que l'utilisateur puisse passer à la page ou à la tâche suivante. Par exemple, vous pouvez écrire une fonction qui compte le nombre d'éléments PA ayant la valeur

MM_SNAPPED

définie sur true

et l'appeler chaque fois qu'un élément PA est déposé. Lorsque le nombre d'éléments PA arrivés sur leur cible atteint le nombre désiré, vous pouvez envoyer l'utilisateur à la page suivante ou afficher un message de félicitations.

Application du comportement Atteindre l'URL

Le comportement Atteindre l'URL ouvre une nouvelle page dans la fenêtre en cours ou dans le cadre indiqué. Ce comportement est utile pour modifier d'un seul clic le contenu de deux cadres ou plus

1

Sélectionnez un objet et choisissez Atteindre l'URL dans le menu Actions du panneau Comportements.

2

Choisissez une destination pour l'URL dans la liste Ouvrir dans.

La liste Ouvrir dans énumère automatiquement les noms de tous les cadres qui se trouvent dans le jeu de cadres actuel, ainsi que la fenêtre principale. S'il n'y a pas de cadres, cette dernière est la seule option.

DREAMWEAVER CS3


341

Remarque :

Ne donnez pas à vos cadres les noms top, blank, self ou parent, car cela pourrait produire des résultats inattendus.

En effet, certains navigateurs peuvent confondre ces noms avec les mots réservés utilisés dans le champ Cible.

3

Cliquez sur Parcourir pour sélectionner un document à ouvrir ou tapez le nom et le chemin d'accès au fichier recherché dans la zone de texte URL.

4

Répétez les étapes 2 et 3 pour ouvrir d'autres documents dans d'autres cadres.

5


Application du comportement Menu de reroutage

Lorsque vous créez un menu de reroutage en utilisant Insertion > Formulaire > Menu de reroutage, Dreamweaver crée un objet de menu et lui associe le comportement Menu de reroutage (ou Menu de reroutage Aller). En principe, il n'est pas nécessaire d'associer manuellement le comportement Menu de reroutage à un objet.

Vous pouvez modifier un menu de reroutage existant de deux manières différentes :

•

Vous pouvez modifier et réorganiser les éléments du menu, modifier les fichiers à rerouter et la fenêtre dans laquelle s'ouvrent ces fichiers, en double-cliquant sur un comportement Menu de reroutage existant dans le panneau

Comportements.

•

Vous pouvez modifier les éléments du menu comme vous modifieriez les éléments de n'importe quel menu, en sélectionnant le menu et en utilisant le bouton Valeurs de la liste dans l'inspecteur Propriétés.

1

Créez un objet Menu de reroutage s'il n'en existe pas déjà dans votre document.

2

Sélectionnez l'objet et choisissez Menu de reroutage dans le menu Actions du panneau Comportements.

3

Effectuez les modifications souhaitées dans la boîte de dialogue Menu de reroutage, puis cliquez sur

Voir aussi

« Menus de reroutage » à la page 277

« Insertion ou modification d'un menu de formulaire HTML dynamique » à la page 580

Application du comportement Menu de reroutage Aller

Le comportement Menu de reroutage Aller est étroitement associé à l'action Menu de reroutage ; il vous permet d'associer un bouton Aller avec un menu de reroutage (pour utiliser ce comportement, vous devez créer au préalable un menu de reroutage dans le document). Un clic sur le bouton Aller ouvre le lien actuellement sélectionné dans le menu de reroutage.

En principe, il n'est pas indispensable d'ajouter un bouton Aller à un menu de reroutage : le choix d'un élément de ce dernier provoque en général le chargement d'une nouvelle URL sans aucune intervention supplémentaire. Toutefois, si l'utilisateur choisit l'élément qui est déjà sélectionné dans le menu de reroutage, le reroutage ne se produira pas. En général cela n'a pas d'importance, mais si le menu de reroutage apparaît dans une image et que les éléments du menu assurent la liaison avec des pages dans d'autres images, un bouton Aller est souvent utile, pour permettre aux utilisateurs de choisir à nouveau un

élément déjà sélectionné dans le menu de reroutage.

Remarque :

Lorsque vous utilisez un bouton Aller associé à un menu de reroutage, le bouton Aller devient le seul mécanisme permettant à l'utilisateur d'accéder à l'URL associée à la sélection dans le menu. La sélection d'un élément de menu dans le menu de reroutage n'a plus pour effet de rediriger l'utilisateur automatiquement vers une autre page ou un autre cadre.

1

Sélectionnez un objet qui sera utilisé comme bouton Aller (en général une image) et choisissez Menu de reroutage Aller dans le menu Actions du panneau Comportements.

2

Dans le menu Choisissez un menu de reroutage, sélectionnez un menu que le bouton Aller activera et cliquez sur OK.

DREAMWEAVER CS3


342


O

uvrir la fenêtre

N

avigateur

Utilisez l'action Ouvrir la fenêtre Navigateur pour ouvrir une page dans une nouvelle fenêtre. Vous pouvez spécifier les propriétés de la nouvelle fenêtre, dont sa taille, ses attributs (redimensionnable ou non, dispose d'une barre de menu ou non, etc.), ainsi que son nom Par exemple, vous pouvez utiliser ce comportement pour ouvrir une image plus grande dans une fenêtre individuelle lorsque l'utilisateur clique sur l'image réduite ; avec ce comportement, vous pouvez adapter la fenêtre à la taille exacte de l'image.

Si vous ne spécifiez aucun attribut pour la fenêtre, elle s'ouvrira avec la taille et les attributs de la fenêtre à partir de laquelle elle a été lancée. Choisir des attributs pour la fenêtre désactive automatiquement tous ceux qui ne sont pas explicitement activés. Par exemple, si vous ne définissez aucun attribut pour la fenêtre, elle peut s'ouvrir en 1024 x 768 pixels et comporter une barre de navigation (affichant les boutons Précédente, Suivante, Démarrage et Actualiser), une barre d'adresse

(indiquant l'URL), une barre d'état (en bas, affichant les messages d'état) et une barre de menus (affichant les menus Fichier,

Edition, Affichage et d'autres menus). Si vous définissez explicitement une largeur de 640 et une hauteur de 480 pixels, sans aucun autre attribut, la fenêtre s'ouvrira en 640 x 480 pixels, sans aucune barre d'outils.

1

Sélectionnez un objet et choisissez Ouvrir la fenêtre Navigateur dans le menu Actions du panneau Comportements.

2

Tapez l'URL à afficher ou cliquez sur Parcourir pour sélectionner un fichier.

3

Définissez les options pour la largeur et la hauteur de la fenêtre (en pixels) et pour l'incorporation de différentes barres d'outils, barres de défilement, poignées de redimensionnement, etc. Donnez un nom à la fenêtre (n'utilisez pas d'espaces ni de caractères spéciaux) si vous souhaitez qu'elle soit la cible de liens ou qu'elle soit contrôlée en JavaScript.

4


Application du comportement Lire le son

Vous pouvez utiliser le comportement Lire le son pour déclencher un effet sonore lorsque le pointeur passe sur un lien, jouer une séquence musicale lorsque la page est en cours de chargement, etc.

Remarque :

Certains navigateurs nécessitent une prise en charge audio externe (par exemple, un plug-in audio) pour diffuser les sons. Du fait que les différents navigateurs utilisent des plug-ins différents, il est difficile de prévoir exactement l'effet sonore obtenu.

1

Sélectionnez un objet et choisissez Lire le son dans le menu Actions du panneau Comportements.

2

Cliquez sur Parcourir pour sélectionner un fichier son ou tapez le nom et le chemin d'accès à ce fichier dans la zone de texte Lire le son.

3


Application du comportement Message contextuel

Le comportement Message contextuel fait apparaître un message d'alerte JavaScript, avec le texte que vous avez spécifié.

Comme les alertes JavaScript ne disposent que d'un seul bouton (OK), utilisez ce comportement pour informer l'utilisateur plutôt que pour lui proposer un choix.

Vous pouvez incorporer au texte des appels de fonction, propriétés, variables globales ou autres expressions valides en

JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades (

{}

). Pour afficher une accolade, faitesla précéder d'une barre oblique inversée (

\{

).

Exemple :

The URL for this page is {window.location}, and today is {new Date()}.

Remarque :

Le navigateur contrôle l'aspect de l'alerte. Si vous désirez avoir davantage de contrôle sur l'apparence, pensez à utiliser le comportement Ouvrir la fenêtre Navigateur.

1

Sélectionnez un objet et choisissez Message contextuel dans le menu Actions du panneau Comportements.

2

Tapez votre message dans la zone de texte prévue à cet effet.

DREAMWEAVER CS3


343

3


Application du comportement Précharger les images

Le comportement Précharger les images raccourcit le délai d'affichage en mettant en mémoire cache les images qui ne sont pas visibles lors du premier affichage de la page (par exemple, les images qui vont être remplacées par des comportements ou des scripts).

Remarque :

Le comportement Permuter une image précharge automatiquement toutes les images sélectionnées lorsque vous choisissez l'option Précharger les images dans la boîte de dialogue Permuter une image ; il n'est donc pas nécessaire d'ajouter manuellement l'action Précharger les images lorsque vous utilisez l'action Permuter une image.

1

Sélectionnez un objet et choisissez Précharger les images dans le menu Actions du panneau Comportements.

2

Cliquez sur Parcourir pour sélectionner un fichier d'image ou tapez le chemin d'accès et le nom du fichier d'une image dans la zone de texte Fichier source des images.

3

Cliquez sur le bouton plus (+) en haut de la boîte de dialogue pour ajouter l'image à la liste Précharger les images.

4

Répétez les étapes 3 et 4 pour les autres images que vous désirez précharger dans la page en cours.

5

Pour supprimer une image de la liste Précharger les images, sélectionnez-la et cliquez sur le bouton (–) (signe moins).

6


Application du comportement Définir image barre de navigation

Utilisez le comportement Définir image barre de navigation pour transformer une image en image de barre de navigation ou pour modifier l'affichage et les actions des images d'une barre de navigation

L'onglet Base de la boîte de dialogue Définir image barre de navigation permet de créer ou de modifier une image d'une barre de navigation, de modifier l'URL cible des boutons de la barre de navigation et de sélectionner une autre fenêtre pour l'affichage d'une URL.

L'onglet Avancé de la boîte de dialogue Définir image barre de navigation permet de modifier l'état d'autres images du document, en fonction de l'état du bouton actuellement sélectionné. Par défaut, lors d'un clic sur un élément d'une barre de navigation, tous les autres éléments de celle-ci sont automatiquement restaurés dans leur état « Image normale » ; l'onglet

Avancé permet de définir un changement d'état pour une autre image lorsque l'image sélectionnée entre dans l'état « Image

Voir aussi

« Barres de navigation » à la page 279

Modification d'un comportement Définir image barre de navigation

1

Sélectionnez une image dans la barre de navigation et choisissez Fenêtre > Comportements.

2

Dans le menu Actions, sélectionnez le comportement Définir image barre de navigation associé à l'événement que vous désirez modifier.

3

Dans l'onglet Base de la boîte de dialogue Définir image barre de navigation, choisissez des options de modification.

Pour définir plusieurs images pour un bouton de barre de navigation

1

Sélectionnez une image dans la barre de navigation à modifier et choisissez Fenêtre > Comportements.

2

Dans le menu Actions, double-cliquez sur l'action Définir image barre de navigation associée à l'événement que vous désirez modifier.

3

Cliquez sur l'onglet Avancé de la boîte de dialogue Définir image barre de navigation.

DREAMWEAVER CS3


344

4

Dans le menu Lorsque l'élément « » s'affiche, sélectionnez un état d'image.

•

Choisissez Image Abaissée si vous désirez qu'une autre image change d'aspect après un clic de l'utilisateur sur l'image sélectionnée.

•

Choisissez Image Au-dessus ou Image Au-dessus lorsque Abaissée si vous désirez qu'une autre image change d'aspect lorsque le pointeur de la souris se trouve sur l'image sélectionnée.

5

Dans la liste Définir aussi image, sélectionnez une autre image de la page.

6

Cliquez sur Parcourir pour sélectionner le fichier d'image à afficher ou tapez le nom et le chemin d'accès au fichier d'image dans la zone de texte Vers le fichier image.

7

Si vous avez sélectionné l'état Image Au-dessus ou Image Au-dessus lorsqu'Abaissée à l'étape 4, vous disposez d'une possibilité supplémentaire. Dans la zone de texte Si abaissé, vers fichier image, cliquez sur Parcourir pour sélectionner le fichier d'image ou tapez le chemin d'accès et le nom de ce fichier.


T

exte d'un cadre

Le comportement Texte d'un cadre vous permet de définir de façon dynamique le texte d'un cadre, en remplaçant le contenu et le formatage d'un cadre par le contenu indiqué. Ce contenu peut être n'importe quel code source HTML valide. Ce comportement permet d'afficher les informations de façon dynamique.

Bien que le comportement Texte d'un cadre permette de remplacer le formatage d'un cadre, vous pouvez activer l'option

Préserver Couleur d'arrière-plan pour conserver les attributs actuels pour l'arrière-plan de la page et la couleur du texte.



{}


\{

).

Exemple :


1

Sélectionnez un objet et choisissez Texte > Texte du cadre dans le menu Actions du panneau Comportements.

2

Dans la boîte de dialogue qui s'affiche, sélectionnez le cadre cible dans le menu Cadre.

3

Cliquez sur le bouton Reprendre HTML courant pour copier les contenus actuels de la section body du cadre cible.

4

Entrez un message dans la zone de texte Nouveau HTML.

5


Voir aussi

« Création de cadres et de jeux de cadres » à la page 198


T

exte du conteneur

Le comportement Texte du conteneur remplace le contenu et le formatage d'un contenu existant (c'est-à-dire, tout élément pouvant contenir du texte ou d'autres éléments) d'une page par le contenu indiqué. Ce contenu peut être n'importe quel code source valide en HTML.



{}


\{

).

Exemple :


1

Sélectionnez un objet et choisissez Texte > Texte du conteneur dans le menu Actions du panneau Comportements.

2

Dans la boîte de dialogue qui s'affiche, sélectionnez l'élément cible dans le menu Conteneur.

3

Entrez le nouveau texte ou le nouveau code HTML dans la zone de texte Nouveau HTML.

DREAMWEAVER CS3


345

4


Voir aussi

Application du comportement Définir le texte de la barre d'état

Le comportement Définir le texte de la barre d'état affiche un message dans la barre d'état, dans la partie inférieure gauche de la fenêtre du navigateur. Par exemple, vous pouvez utiliser ce comportement pour décrire la destination d'un lien dans la barre d'état, au lieu d'afficher l'URL associée Cependant, il arrive fréquemment que les utilisateurs ne tiennent pas compte des messages de la barre d'état (certains navigateurs ne prennent pas en charge la définition du texte de la barre d'état). Si votre message est important, pensez à l'afficher sous la forme d'un message contextuel ou comme texte d'un élément PA.

Remarque :

Si vous utilisez le comportement Définir le texte de la barre d'état dans Dreamweaver, le texte de la barre d'état du navigateur ne va pas nécessairement changer du fait que certains navigateurs nécessitent des réglages spéciaux lors de la modification du texte de la barre d'état. Par exemple, dans Firefox, vous devez modifier une option Avancée qui permet à

JavaScript modifier le texte de la barre d'état. Pour plus de détails, reportez-vous à la documentation de votre navigateur.



{}


\{

).

Exemple :


1

Sélectionnez un objet et choisissez Texte > Définir le texte de la barre d'état dans le menu Actions du panneau

Comportements.

2

Dans la boîte de dialogue Définir le texte de la barre d'état, tapez un message dans la zone de texte Message.

Utilisez un message concis. Le navigateur tronquera le message s'il est trop long pour la barre d'état.

3



T

exte d'un champ de texte

Le comportement Texte d'un champ de texte remplace le contenu d'un champ de texte de formulaire par le contenu indiqué.



{}


\{

).

Exemple :


Création d'un champ de texte nommé

1

Sélectionnez Insertion > Formulaire > Champ de texte.

Si Dreamweaver vous invite à ajouter une balise de formulaire, cliquez sur Oui.

2

Dans l'inspecteur Propriétés, tapez le nom du champ de texte. Veillez à utiliser un nom unique dans cette page (n'utilisez pas le même nom pour plusieurs éléments appartenant à la même page, même s'ils se trouvent dans des formulaires différents).

Application de l'action

T exte d'un champ de texte

1

Sélectionnez un champ de texte et choisissez Texte > Texte d'un champ de texte dans le menu Actions du panneau

Comportements.

DREAMWEAVER CS3


346

2

Sélectionnez le champ de texte cible dans le menu Champ de texte et entrez votre nouveau texte.

3


Application du comportement Afficher-Masquer les éléments

Le comportement Afficher-Masquer les éléments affiche, masque ou rétablit la visibilité par défaut d'un ou plusieurs

éléments de page. Ce comportement permet d'afficher des informations en fonction des interactions de l'utilisateur avec la page. Par exemple, lorsque le pointeur passe sur l'image d'une plante, vous pouvez afficher un élément de page comportant des détails sur le climat idéal de la plante, l'ensoleillement dont elle a besoin, sa taille adulte, etc. Le comportement ne fait qu'afficher ou masquer l'élément pertinent, il ne supprime pas réellement l'élément du flux de la page lorsqu'il est masqué.

1

Sélectionnez un objet et choisissez Afficher-Masquer les éléments dans le menu Actions du panneau Comportements.

Si l'option Afficher-Masquer les éléments n'est pas disponible, cela signifie probablement qu'un élément PA est sélectionné.

Etant donné que les éléments PA n'acceptent pas les événements dans la version 4.0 des deux navigateurs, vous devez sélectionner un objet différent, tel que la balise

<body>

ou un lien (

<a>

).

2

Dans la liste Eléments, sélectionnez l'élément que vous souhaitez afficher ou masquer et cliquez sur Afficher, Masquer ou Restaurer (cette dernière option restaure la visibilité par défaut).

3

Répétez l'étape 2 pour les autres éléments dont vous voulez modifier la visibilité. Vous pouvez modifier la visibilité de plusieurs éléments avec un seul comportement.

4


Application du comportement Afficher le menu contextuel

Remarque :


Le comportement Afficher le menu contextuel permet de créer ou modifier un menu contextuel Dreamweaver ou d'ouvrir et modifier un menu contextuel Fireworks inséré dans un document Dreamweaver.

Remarque :

Dreamweaver fournit cette fonctionnalité pour faciliter le travail des personnes qui l’employaient dans

Dreamweaver 8 ou une version précédente. Pour créer et modifier des menus déroulants, utilisez le widget de barre de menus

Spry de la barre Insertion, de manière à créer du code dont la personnalisation et la gestion sont plus aisées. Pour plus

Définissez les options dans la boîte de dialogue Afficher le menu contextuel pour créer un menu contextuel horizontal ou vertical. Vous pouvez faire appel à cette boîte de dialogue pour définir ou modifier la couleur, le texte et la position d'un menu contextuel.

Remarque :

Vous devez cliquer sur le bouton Modifier de l'inspecteur Propriétés Dreamweaver pour modifier les images dans un menu contextuel basé sur des images Fireworks. Toutefois, vous pouvez exécuter la commande Afficher le menu contextuel pour modifier le texte d'un menu contextuel basé sur des images.

1

Sélectionnez un objet et choisissez ~Désuet > Afficher le menu contextuel dans le menu Actions du panneau

Comportements.

2

Utilisez les onglets suivants pour définir des options pour le menu contextuel :

Contenu

Définissez le nom, la structure, l'URL et la cible des éléments de menu individuels.

Aspect

menu.

Définissez l'apparence de l'Etat En haut et de l'Etat Survolé du menu et de définir la police du texte de l'élément de

Avancé

Définissez les propriétés des cellules de menu. Par exemple, vous pouvez définir la largeur et la hauteur des cellules, la couleur des cellules ou des bordures, le retrait du texte et le temps qui s'écoule entre le moment où l'utilisateur place le pointeur sur le déclencheur et l'apparition du menu correspondant.

Position

Positionnez le menu par rapport à l'image ou au lien de déclenchement.

DREAMWEAVER CS3


347

Voir aussi

Ajout, suppression et réorganisation d'éléments de menu contextuel

Vous pouvez utiliser l'onglet Sommaire de la boîte de dialogue Afficher le menu contextuel pour créer des éléments de menu.

Cet onglet permet également de supprimer des éléments ou de modifier l'ordre dans lequel ils apparaissent dans un menu.

Ajout d'éléments de menu contextuel

1

Dans l'onglet Sommaire, sélectionnez le texte par défaut (Nouvel élément), puis entrez le nom de l'élément de menu contextuel.

2

Si vous le souhaitez, définissez des options complémentaires :

•

Pour que l'élément de menu ouvre un autre fichier, tapez le chemin d'accès au fichier dans la zone de Lien, ou cliquez sur l'icône de dossier et sélectionnez le document.

•

Pour définir l'endroit où le document va s'ouvrir (une nouvelle fenêtre ou un cadre donné, par exemple), choisissez l'emplacement dans le menu Cible.

Remarque :

Si le cadre que vous voulez définir comme cible ne figure pas dans le menu Cible, fermez la boîte de dialogue

Afficher le menu contextuel, puis, dans la fenêtre de document, sélectionnez un cadre et attribuez-lui un nom.

3

Cliquez sur le bouton plus (+) pour continuer à ajouter des éléments de menu.

Une fois que vous avez terminé, cliquez sur OK pour accepter les paramètres par défaut ou sélectionnez un autre onglet de la boîte de dialogue Afficher le menu contextuel pour définir des options supplémentaires.

Création d'un élément de sous-menu par mise en retrait

❖

Dans la liste Afficher le menu contextuel, sélectionnez l'élément et cliquez sur Elément indenté. (Pour supprimer le retrait, cliquez sur le bouton Elément en retrait négatif.)

Remarque :

Vous ne pouvez pas mettre en retrait le premier élément de la liste.

Modification de l'ordre des éléments dans un menu

❖

Dans la liste Afficher le menu contextuel, sélectionnez l'élément et cliquez sur la flèche Haut ou Bas.

Suppression d'un élément du menu

❖

Dans la liste Afficher le menu contextuel, sélectionnez l'élément et cliquez sur le bouton moins (-).

Mise en forme d'un menu contextuel

Après avoir créé les éléments de menu, cliquez sur l'onglet Aspect de la boîte de dialogue Afficher le menu contextuel pour définir l'orientation, ainsi que les attributs de police et d'état des boutons du menu contextuel. Observez le volet d'aperçu à mesure que vous définissez les options pour voir la façon dont elles affectent l'aspect.

1

Pour définir l'orientation du menu, sélectionnez Menu vertical ou Menu horizontal dans le menu contextuel situé en haut de l'onglet Aspect.

2

Définissez les options de mise en forme du texte :

•

Dans le menu Police, sélectionnez une police de caractères pour les éléments de menu. Sélectionnez une police que vos visiteurs sont susceptibles d'avoir sur leurs systèmes.

•

Définissez la taille de la police, les attributs de style, ainsi que les options d'alignement et de justification du texte qui seront assignés au texte de l'élément de menu.

Remarque :

Si la police que vous souhaitez utiliser ne figure pas dans la liste, utilisez l'option Modifier la liste des polices pour l'ajouter.

3

Dans les zones Etat En haut et Etat Survolé, utilisez le sélecteur de couleur pour définir les couleurs du texte et des cellules des boutons d'élément de menu.

DREAMWEAVER CS3


348

4

Une fois que vous avez terminé, cliquez sur OK ou sélectionnez un autre onglet Afficher le menu contextuel pour définir des options supplémentaires.

O ptions d'apparence avancées

Largeur et hauteur des cellules

Définissez la largeur ou la hauteur, en pixels, des boutons de menu. La largeur des cellules est définie automatiquement en fonction de l'élément le plus large. Pour augmenter la largeur ou la hauteur des cellules, sélectionnez Pixels dans le menu déroulant et entrez une valeur supérieure à celle qui figure dans la zone de texte Largeur des cellules ou Hauteur des cellules.


Définissez le nombre de pixels qui sépare le contenu d'une cellule et ses limites.


Définissez le nombre de pixels séparant les cellules contiguës d'un tableau.

Retrait du texte

Définissez le retrait, en pixels, de l'élément de menu dans la cellule.

Délai de menu

Définissez la durée d'affichage du menu une fois que l'utilisateur éloigne le pointeur de l'image ou du lien

000 équivaut à 1 seconde. Pour un délai de 3 secondes, entrez 3000.

Bordures déroulantes

Détermine si les éléments de menu ont une bordure. Si vous souhaitez une bordure, assurez-vous que l'option Afficher les bordures.

Largeur de bord

Définissez la largeur de la bordure en pixels.

O mbre, Couleur de la bordure et Mettre en surbrillance

Choisissez une couleur pour ces options de bordure. Les options d'ombre et de mise en surbrillance n'apparaissent pas en mode d'aperçu.

Positionnement d'un menu contextuel dans un document

Utilisez les options de position pour spécifier l'emplacement de l'affichage du menu par rapport à l'image ou au lien de déclenchement. Vous pouvez également spécifier si le menu doit disparaître lorsque l'utilisateur éloigne le pointeur du déclencheur.

1

Dans la boîte de dialogue Afficher le menu contextuel, cliquez sur l'onglet Position.

2

Définissez l'emplacement du menu contextuel en utilisant l'une des méthodes suivantes :

•

Sélectionnez l'une des options prédéfinies.

•

Spécifiez un emplacement en tapant ses coordonnées verticale et horizontale respectivement dans les zones X et Y.

L'angle supérieur gauche du menu correspond à l'origine des coordonnées.

3

Pour masquer le menu contextuel lorsque le pointeur ne le survole pas, sélectionnez Masquer le menu suite à l'événement onMouseOut

. Sinon, le menu reste affiché.

4

Cliquez sur OK.

Modification d'un menu contextuel

Le comportement Afficher le menu contextuel permet de modifier ou de mettre à jour le contenu d'un menu contextuel.

Vous pouvez ajouter, supprimer ou modifier les éléments de menu et spécifier la position d'un menu par rapport à l'image ou au lien de déclenchement.

Remarque :

Dreamweaver fournit cette fonctionnalité pour faciliter le travail des personnes qui l’employaient dans

Dreamweaver 8 ou une version précédente. Pour créer et modifier des menus déroulants, utilisez le widget de barre de menus

Spry de la barre Insertion, de manière à créer du code dont la personnalisation et la gestion sont plus aisées. Pour plus

Pour ouvrir un menu contextuel HTML :

1

Dans le document Dreamweaver, sélectionnez le lien ou l'image qui déclenche le menu contextuel.

2

Sélectionnez Afficher le menu contextuel dans le menu Actions du panneau Comportements.

3

Effectuez vos modifications dans cette boîte de dialogue, puis cliquez sur OK.

DREAMWEAVER CS3


349

Application du comportement Permuter une image

Cette action remplace une image par une autre, en modifiant l'attribut src

de la balise

<img>

. Utilisez ce comportement pour créer des substitutions de boutons et autres effets sur des images (y compris la substitution de plusieurs images à la fois) L'insertion d'une image survolée ajoute automatiquement à votre page un comportement Permuter une image.

Remarque :

Etant donné que seul l'attribut

src

est affecté par ce comportement, l'image de substitution doit en principe avoir les mêmes dimensions (hauteur et largeur) que l'original. Faute de quoi, l'image intervertie apparaîtrait déformée (compactée ou élargie) de façon à s'adapter aux dimensions de l'image d'origine.

Il existe également le comportement Restaurer l'image intervertie qui restaure la dernière interversion d'images à son état principe, si vous avez laissé cette option activée en associant le comportement Permuter une image, vous n'avez pas besoin de l'utiliser manuellement.

1

Choisissez Insertion > Image ou cliquez sur le bouton Image de la barre Insertion pour insérer une image.

2

Dans l'inspecteur Propriétés, indiquez un nom pour l'image dans la zone de texte située à l'extrême gauche.

Il n'est pas nécessaire de nommer les images ; elles sont nommées automatiquement lorsque vous associez le comportement

à un objet. Toutefois, il vous sera plus facile de distinguer les images proposées dans la boîte de dialogue Permuter une image si vous avez vous-même attribué un nom à ces images.

3

Répétez les étapes 1 et 2 si vous souhaitez insérer des images supplémentaires.

4

Sélectionnez un objet (en général, l'image que vous voulez remplacer) et choisissez l'option Permuter une image dans le menu Actions du panneau Comportements.

5

Sélectionnez l'image dont vous voulez modifier la source dans la liste Images.

6

Cliquez sur Parcourir pour sélectionner le nouveau fichier d'image ou indiquez son chemin d'accès et son nom de fichier dans la zone de texte Définir la source à.

7

Répétez les étapes 5 et 6 si vous désirez ajouter d'autres images à modifier. Utilisez la même action Permuter l'image pour toutes les images que vous voulez modifier simultanément ; dans le cas contraire, l'action correspondante Restaurer l'image intervertie ne les restaurerait pas toutes.

8

Sélectionnez l'option Précharger les images pour mettre en mémoire cache les nouvelles images au moment du chargement de la page.

Cela évite le délai de téléchargement des images lorsqu'un événement déclenche leur apparition.

9


Application du comportement Valider le formulaire

Le comportement Valider le formulaire teste le contenu des champs de texte indiqués pour vérifier que l'utilisateur a entré le type de données correct. Associez ce comportement à des champs de texte individuels à l'aide de l'événement onBlur

pour valider ces champs au fur et à mesure que l'utilisateur remplit le formulaire ou associez-le au formulaire à l'aide de l'événement onSubmit

pour évaluer divers champs simultanément lorsque l'utilisateur clique sur le bouton d'envoi.

L'association de ce comportement à un formulaire empêche l'envoi de formulaires contenant des données non valides.

1

Pour insérer un formulaire, choisissez Insertion > Formulaire ou cliquez sur le bouton Formulaire de la barre Insertion.

2

Pour insérer un champ de texte, choisissez Insertion > Formulaire > Champ de texte ou cliquez sur le bouton Champ de texte de la barre Insertion.

Répétez cette étape pour insérer plusieurs champs de texte.

3

Choisissez une méthode de validation :

•

Pour valider les champs individuellement au fur et à mesure que l'utilisateur remplit le formulaire, sélectionnez un champ de texte et choisissez Fenêtre > Comportements.

•

Pour valider plusieurs champs lorsque l'utilisateur envoie le formulaire, cliquez sur la balise

<form>

dans le sélecteur de balises situé dans le coin inférieur gauche de la fenêtre de document, puis choisissez Fenêtre > Comportements.

DREAMWEAVER CS3


350

4

Sélectionnez Valider le formulaire dans le menu Actions.

5


•

Si vous validez des champs individuellement, sélectionnez dans la liste Champs le même champ que celui que vous avez sélectionné dans la fenêtre de document.

•

Si vous validez plusieurs champs à la fois, sélectionnez un champ de texte dans la liste Champs.

6

Activez l'option Obligatoire si le champ doit obligatoirement contenir des données.

7

Sélectionnez l'une des options d'acceptation suivantes :

T out

Vérifie qu'un champ obligatoire contient des données ; ces dernières peuvent être de n'importe quel type.

Adresse électronique

Vérifie que le champ contient un symbole @.

N ombre

Vérifie que le champ contient uniquement des valeurs numériques.

N ombre de

Vérifie que le champ contient une valeur numérique comprise dans la plage indiquée.

8

Si vous validez plusieurs champs, répétez les étapes 6 et 7 pour tout champ supplémentaire à valider.

9

Cliquez sur OK.

Si vous validez plusieurs champs lorsque l'utilisateur envoie le formulaire, l'événement onSubmit

apparaît automatiquement dans le menu déroulant Evénements.

10

Si vous validez des champs individuellement, vérifiez que l'événement par défaut est bien onBlur ou onChange

. Si ce n'est pas le cas, sélectionnez l'un de ces événements.

Ces deux événements déclenchent le comportement Valider le formulaire dès que l'utilisateur sort du champ concerné. La différence entre ces deux événements est que onBlur

est toujours déclenché, que l'utilisateur ait saisi ou non du texte dans le champ, alors que onChange

n'est déclenché que si l'utilisateur a modifié le contenu du champ. L'événement onBlur

est préférable si le champ est obligatoire.

Chapitre 13 : Utilisation d'autres applications

Adobe® Dreamweaver® CS3 s'intègre à de nombreuses applications Adobe dont Flash, Fireworks, Adobe® Photoshop® et

Adobe® Bridge. Vous pouvez utiliser directement d'autres applications Adobe, comme Adobe® Device Central, à partir de l'espace de travail de Dreamweaver.

Intégration entre les applications

A propos de l'intégration de Photoshop, Flash et Fireworks

Photoshop, Fireworks et Flash sont de puissants outils de développement Web qui permettent de créer et de gérer des graphismes et des fichiers SWF. Vous pouvez intégrer de façon étroite Dreamweaver avec ces outils au sein de votre

Remarque :

Une intégration limitée est également disponible avec quelques autres applications. Par exemple, vous pouvez exporter un fichier InDesign en format XHTML et continuer à le modifier dans Dreamweaver. Vous trouverez un didacticiel consacré à ce flux d'activités à l'adresse www.adobe.com/go/vid0202_fr .

Vous pouvez insérer aisément des images et des animations Flash (fichiers SWF) dans un document Dreamweaver. Vous pouvez également modifier une image ou un fichier Flash dans son éditeur d'origine après l'avoir insérée dans un document

Dreamweaver.

Remarque :

Pour qu'il soit possible d'utiliser Dreamweaver conjointement à ces applications Adobe, toutes ces applications doivent être installées sur votre ordinateur.

L'intégration des produits est réalisée grâce à l'édition Roundtrip, dans le cas de Fireworks et de Flash, et aux Design Notes.

L' édition Roundtrip permet de transférer de façon fiable les mises à jour de code entre Dreamweaver et les autres applications, en préservant par exemple les comportements de survol ou les liens vers d'autres fichiers.

Les Design Notes sont de petits fichiers permettant à Dreamweaver de localiser le document source correspondant à un fichier image ou à un fichier Flash exporté. Lorsque vous exportez des fichiers de Fireworks, Flash ou Photoshop directement vers un site défini par Dreamweaver, les Design Notes qui contiennent des références au fichier de programmation PSD, PNG ou Flash (FLA) sont automatiquement exportées vers le site avec le fichier Web (format GIF,

JPEG ou SWF).

Outre les informations relatives à l'emplacement, les Design Notes contiennent des informations pertinentes sur les fichiers exportés. Lorsque vous exportez une table Fireworks, par exemple, Fireworks rédige une Design Note pour chaque fichier d'image exporté dans la table. Si le fichier exporté contient des zones réactives ou des effets de survol, les Design Notes contiennent des informations sur les scripts les concernant.

Pendant l'exportation, Dreamweaver crée un dossier nommé _notes dans le même dossier. Ce dossier contient les Design

Notes nécessaires à l'intégration de Dreamweaver avec Photoshop ou Fireworks.

Remarque :

Pour pouvoir utiliser les Design Notes, vous devez vous assurer qu'elles ne sont pas désactivées pour votre site

Dreamweaver. Elles sont activées par défaut. Toutefois, même si elles sont désactivées, lorsque vous insérez un fichier d'image

Photoshop, Dreamweaver crée une Design Note pour stocker l'emplacement du fichier PSD source.

Vous trouverez un didacticiel consacré à l'intégration de Dreamweaver et Fireworks à l'adresse www.adobe.com/go/vid0188_fr .

Vous trouverez un didacticiel consacré à l'intégration de Dreamweaver et Photoshop à l'adresse www.adobe.com/go/vid0200_fr .

351

DREAMWEAVER CS3


352

Voir aussi

« A propos des Design Notes » à la page 98

« Activation et désactivation des Design Notes pour un site » à la page 99

Utilisation de Fireworks

Insertion d'une image Fireworks

Dreamweaver et Fireworks reconnaissent et partagent de nombreuses procédures de modifications apportées aux fichiers, parmi lesquelles celles apportées aux liens, aux cartes graphiques, aux découpes de tables et bien plus. Réunies, les deux applications rationalisent les tâches de développement consistant à modifier, optimiser et importer des fichiers graphiques

Web dans des pages HTML.

Vous pouvez placer une image exportée avec Fireworks directement dans un document Dreamweaver à l'aide de la commande Image (menu Insertion) ou vous pouvez créer une image Fireworks à partir d'un espace réservé pour l'image

Dreamweaver.

1

Dans le document Dreamweaver, placez le point d'insertion à l'emplacement où vous souhaitez insérer l'image, puis procédez de l'une des manières suivantes :

• Choisissez Insertion > Image.

• Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Image ou faites-le glisser vers le document.

2

Recherchez le fichier Fireworks exporté et cliquez sur OK (Windows) ou Ouvrir (Macintosh).

Remarque :

Si le fichier Fireworks ne se trouve pas dans le site courant de Dreamweaver, un message vous demande si vous souhaitez copier le fichier dans le dossier racine. Cliquez sur Oui.

Voir aussi

Modification d'une image ou d'un tableau Fireworks dans Dreamweaver

Quand vous ouvrez ou éditez une image ou une découpe d'image faisant partie d'une table Fireworks, Dreamweaver lance

Fireworks, ce qui ouvre le fichier PNG à partir duquel l'image ou la table a été exportée.

Remarque :

Ce principe suppose que Fireworks soit défini comme éditeur d'image externe principal pour les fichiers PNG. Par ailleurs, Fireworks est souvent défini comme éditeur par défaut pour les fichiers JPEG et GIF, bien qu'il puisse être utile de définir Photoshop comme éditeur par défaut pour ces types de fichiers.

Lorsque l'image fait partie d'une table Fireworks, vous pouvez ouvrir la table entière en vue de la modifier, pour autant que le commentaire



figure dans le code HTML. Si le fichier PNG source a été exporté à partir de Fireworks vers un site Dreamweaver à l'aide du paramètre Document HTML et image du style Dreamweaver, le commentaire de la table Fireworks est automatiquement inséré dans le code HTML.

1

Dans Dreamweaver, ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés), s'il n'est pas déjà ouvert.

2

Cliquez sur une image ou une découpe d'image pour la sélectionner.

Lorsque vous sélectionnez une image exportée depuis Fireworks, l'inspecteur Propriétés identifie la sélection comme image ou table Fireworks et affiche le nom du fichier source PNG.

3

Pour lancer Fireworks afin d'apporter des modifications, procédez de l'une des manières suivantes :

•

Dans l'inspecteur Propriétés, cliquez sur Modifier.

•

Maintenez enfoncée la touche Ctrl (Windows) ou Commande (Macintosh) et double-cliquez sur l'image sélectionnée.

•

Cliquez sur l'image sélectionnée avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) et choisissez Modifier avec Fireworks dans le menu contextuel.

DREAMWEAVER CS3


353

Remarque :

Si Fireworks ne trouve pas le fichier source, un message vous invite à le faire. Lorsque vous travaillez dans le fichier source Fireworks, les modifications sont enregistrées dans le fichier source et le fichier exporté, sinon seul le fichier exporté est mis à jour.

4

Dans Fireworks, modifiez le fichier PNG source puis cliquez sur Terminé.

Fireworks enregistre les modifications dans le fichier PNG, exporte l'image mise à jour (ou le document HTML et les images) et active de nouveau Dreamweaver. Dans Dreamweaver, l'image ou la table mise à jour apparaît.

Vous trouverez un didacticiel consacré à l'intégration de Dreamweaver et Fireworks à l'adresse www.adobe.com/go/vid0188_fr .

Voir aussi

« Utilisation d'un éditeur d'image externe » à la page 243

O

ptimisation d'une image Fireworks depuis Dreamweaver

Dreamweaver permet de modifier rapidement une image ou une animation Fireworks. Depuis Dreamweaver, vous pouvez modifier les paramètres d'optimisation et d'animation, ainsi que la taille et la zone de l'image exportée.

1

Dans Dreamweaver, sélectionnez l'image de votre choix et choisissez Commande > Optimiser l'image.

2

Apportez les modifications dans la boîte de dialogue Aperçu de l'image.

•

Pour modifier les paramètres d'optimisation, cliquez sur l'onglet Options.

•

Pour modifier la taille et la zone de l'image exportée, cliquez sur l'onglet Fichier.

3

Une fois terminé, cliquez sur

Voir aussi

« Choix des paramètres d'optimisation des images » à la page 362

Utilisation de Fireworks pour modifier les espaces réservés pour les images Dreamweaver

Vous pouvez créer un espace réservé dans un document Dreamweaver, puis lancer Fireworks pour créer une image graphique ou une table Fireworks à y placer.

Pour créer une image à partir d'un espace réservé, Dreamweaver et Fireworks doivent être installés sur votre système.

1

Veillez à ce que Fireworks soit défini comme éditeur d'image des fichiers PNG.

2

Dans la fenêtre de document, cliquez sur l'espace réservé pour l'image afin de le sélectionner.

3

Démarrez Fireworks en mode Modification depuis Dreamweaver en utilisant l'une des méthodes suivantes :

• Dans l'inspecteur Propriétés, cliquez sur Créer.

• Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh), puis double-cliquez sur l'espace réservé pour l'image.

• Cliquez sur l'espace réservé pour l'image avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis sélectionnez Créer une image dans Fireworks.

4

Utilisez les options de Fireworks pour créer l'image.

Fireworks reconnaît les paramètres suivants d'espace réservé pour l'image, qui sont définis lors de son utilisation dans

Dreamweaver : la taille de l'image (qui correspond à la taille de la zone de travail Fireworks), l'ID de l'image (utilisé par

Fireworks comme nom de document par défaut pour le fichier source et le fichier d'exportation créé) et l'alignement du texte. Fireworks reconnaît également les liens et certains comportements (permutation d'image, menu contextuel, barre de navigation et texte notamment) que vous avez associés à l'espace réservé pour l'image lorsque vous travaillez dans

Dreamweaver.

DREAMWEAVER CS3


354

Remarque :

Bien que les liens ajoutés à un espace réservé pour l'image soient invisibles dans Fireworks, ils sont conservés. Si vous dessinez une zone réactive et que vous ajoutez un lien dans Fireworks, le programme ne supprimera pas le lien ajouté à l'espace réservé pour l'image dans Dreamweaver. Toutefois, si dans Fireworks vous dessinez une découpe dans la nouvelle image, le lien sera supprimé du document Dreamweaver lors du remplacement de l'espace réservé pour l'image.

Fireworks ne reconnaît pas les paramètres suivants d'espace réservé pour l'image : alignement de l'image, couleur, espacement vertical et horizontal et cartes. Ils sont désactivés dans l'inspecteur Propriétés de l'espace réservé pour l'image.

5

Au terme de votre travail, cliquez sur Terminé afin d'afficher l'invite d'enregistrement.

6

Dans la zone de texte Enregistrer dans, sélectionnez le dossier défini comme dossier du site local Dreamweaver.

Si vous avez attribué un nom à l'espace réservé lors de son insertion dans le document Dreamweaver, Fireworks insère automatiquement ce nom dans la zone de texte Nom de fichier. Vous pouvez modifier le nom.

7

Cliquez sur Enregistrer pour enregistrer le fichier PNG.

La boîte de dialogue Exporter s'affiche. Cette boîte de dialogue vous permet d'exporter l'image au format GIF, JPEG ou, dans le cas d'images découpées, sous la forme de documents HTML et d'images.

8

Dans la zone Enregistrer dans, sélectionnez le dossier du site local Dreamweaver.

La zone de texte Nom affiche automatiquement le nom désignant le fichier PNG. Vous pouvez modifier le nom.

9

Dans la zone Enregistrer sous le type, sélectionnez le type de fichier(s) à exporter, par exemple Images uniquement ou

Documents HTML et images.

10

Cliquez sur Enregistrer pour enregistrer le fichier exporté.

Le fichier est enregistré et Dreamweaver est à nouveau actif. Dans le document Dreamweaver, le fichier exporté ou la table

Fireworks remplace l'espace réservé pour l'image.

Voir aussi


« Insertion d'une image » à la page 234

A propos des menus contextuels de Fireworks

Fireworks permet de créer facilement et rapidement des menus contextuels de type CSS.

Les menus contextuels créés avec Fireworks sont non seulement plus extensibles et plus rapides à télécharger, mais encore

• les éléments de menu peuvent être indexés par les moteurs de recherche ;

• les éléments de menu peuvent être lus par des lecteurs d'écran, ce qui rend vos pages plus accessibles ;

• le code généré par Fireworks est aux normes et peut être validé ; vous pouvez modifier les menus contextuels Fireworks avec Dreamweaver ou Fireworks, mais pas les deux. Les modifications apportées dans Dreamweaver ne sont pas conservées dans Fireworks.

Voir aussi

« Edition des menus contextuels de Fireworks dans Dreamweaver » à la page 354

Edition des menus contextuels de Fireworks dans Dreamweaver

Vous pouvez créer un menu contextuel dans Fireworks 8, ou une version plus récente, puis le modifier avec Dreamweaver ou Fireworks (à l'aide de l'édition Roundtrip), mais pas les deux. Si vous modifiez vos menus dans Dreamweaver, puis dans

Fireworks, vous perdez toutes les modifications précédentes, à l'exception du texte.

Si vous préférez modifier vos menus avec Dreamweaver, vous pouvez utiliser Fireworks pour créer le menu contextuel, puis

Dreamweaver de façon exclusive pour modifier le menu et le personnaliser.

DREAMWEAVER CS3


355

Si vous préférez modifier les menus dans Fireworks, vous pouvez utiliser la fonctionnalité d'édition Roundtrip de

Dreamweaver, mais vous ne devez pas modifier les menus directement dans Dreamweaver.

1

Dans Dreamweaver, sélectionnez le tableau Fireworks contenant le menu contextuel, puis cliquez sur Modifier dans l'inspecteur Propriétés.

Le fichier PNG source s'ouvre dans Fireworks.

2

Dans Fireworks, modifiez ce menu avec l'éditeur correspondant, puis cliquez sur Terminé dans la barre d'outils de

Fireworks.

Fireworks renvoie le menu modifié à Dreamweaver.

Si vous avez créé un menu contextuel dans Fireworks MX 2004 ou une version plus ancienne, vous pouvez le modifier dans

Dreamweaver avec la boîte de dialogue Afficher le menu contextuel, disponible à partir du panneau Comportements.

Voir aussi

Modification d'un menu contextuel créé dans Fireworks MX 2004 ou une version plus ancienne

1

Dans Dreamweaver, sélectionnez la zone réactive ou l'image qui déclenche le menu contextuel.

2

Dans le panneau Comportements (Maj+F3), double-cliquez sur Afficher le menu contextuel dans la liste Actions.

3

Apportez vos modifications dans la boîte de dialogue Menu contextuel puis cliquez sur OK.

Voir aussi

« Application du comportement Afficher le menu contextuel » à la page 346

Définition des préférences de lancement et de modification des fichiers source Fireworks

Lorsque vous modifiez des images dans Fireworks, les images placées dans vos pages Web sont normalement exportées par

Fireworks depuis un fichier source PNG. Lorsque vous ouvrez une image dans Dreamweaver pour la modifier, Fireworks ouvre automatiquement le fichier PNG source, vous invitant à préciser l'emplacement du fichier PNG si celui-ci ne peut pas

être localisé. Vous pouvez régler vos préférences sous Fireworks afin que Dreamweaver ouvre l'image insérée, à moins que vous ne préfériez que Fireworks vous offre la possibilité d'utiliser le fichier d'image insérée ou le fichier source Fireworks chaque fois que vous ouvrez une image sous Dreamweaver.

Remarque :

Dreamweaver ne reconnaît ces préférences que dans certains cas. Par exemple, vous devez lancer et optimiser les images qui ne font pas partie d'une table Fireworks et dont le chemin Design Notes vers un fichier PNG source est correct.

1

Dans Fireworks, choisissez Edition > Préférences (Windows) ou Fireworks > Préférences (Macintosh) et cliquez sur l'onglet Lancer et Modifier (Windows) ou choisissez Lancer et Modifier dans le menu déroulant (Macintosh).

2

Indiquez les préférences applicables lors de la modification ou de l'optimisation d'images Fireworks placées dans une application externe :

T oujours utiliser le fichier P

N

G source

Permet de lancer automatiquement le fichier PNG Fireworks défini dans la Design

Note comme fichier source de l'image placée. Les mises à jour sont appliquées au fichier PNG source et à l'image placée correspondante.

N e jamais utiliser le fichier P

N

G source

Permet de lancer automatiquement l'image Fireworks placée, qu'il existe ou non un fichier PNG source. Les mises à jour sont appliquées à l'image placée uniquement.

Demander lors du lancement

Affiche un message vous demandant si le fichier PNG source doit être ouvert. Vous pouvez

également déterminer les préférences globales de la fonction de lancement et d'édition dans cette fenêtre d'invite.

DREAMWEAVER CS3


356

Insertion de code H

T

ML Fireworks dans un document Dreamweaver

Dans Fireworks, la commande Exporter vous permet d'exporter et d'enregistrer des images optimisées et des fichiers

HTML dans le dossier du site Dreamweaver de votre choix. Vous pouvez ensuite insérer le fichier dans Dreamweaver.

Dreamweaver permet d'insérer dans un document du code HTML généré par Fireworks, intégrant des images, des découpes et du code JavaScript.

1

Dans le document Dreamweaver, placez le point d'insertion là où vous voulez insérer le code HTML Fireworks.

2


•

Choisissez Insertion > Objets image > HTML Fireworks.

•

Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Images et choisissez Insérer HTML Fireworks dans le menu.

3

Cliquez sur Parcourir pour sélectionner un fichier HTML Fireworks.

4

Si le fichier n'est plus nécessaire par la suite, activez l'option Supprimer fichier après insertion. Cette option n'a aucun effet sur le fichier PNG source associé au fichier HTML.

Remarque :

Si le fichier HTML se trouve sur un lecteur réseau, il est définitivement supprimé (il n'est pas placé dans la corbeille).

5

Cliquez sur OK pour insérer le code HTML, ainsi que les images associées, les découpes et le code JavaScript dans le document Dreamweaver.

Collage de code H

T

ML Fireworks dans Dreamweaver

Pour placer rapidement dans Dreamweaver des images et tables générées dans Fireworks, copiez et collez directement le code HTML Fireworks dans un document Dreamweaver.

Copie et collage de code H

T


1

Dans Fireworks, choisissez Edition > Copier le code HTML.

2

Suivez les instructions de l'assistant qui vous aide à effectuer la procédure d'exportation de votre code HTML et des images. Quand vous y êtes invité, indiquez le dossier du site Dreamweaver comme destination des images exportées.

L'assistant exporte les images à l'endroit indiqué et copie le code HTML dans le Presse-papiers.

3

Dans le document Dreamweaver, placez le point d'insertion à l'endroit du document où vous souhaitez coller le code

HTML et choisissez Edition > Coller.

Le code HTML et JavaScript associé aux fichiers Fireworks exportés est copié dans le document Dreamweaver et tous les liens vers les images sont mis à jour.

Exportation et collage de code H

T


1

Dans Fireworks, choisissez Fichier > Exporter.

2

Quand vous y êtes invité, indiquez le dossier du site Dreamweaver comme destination des images exportées.

3

Dans le menu déroulant Exporter, choisissez Documents HTML et Images.

4

Dans le menu déroulant HTML, choisissez Copier dans le Presse-papiers, puis cliquez sur Exporter.

5

Dans le document Dreamweaver, placez le point d'insertion à l'endroit du document où vous souhaitez coller le code

HTML exporté, puis choisissez Edition > Coller code HTML Fireworks.

Le code HTML et JavaScript associé aux fichiers Fireworks exportés est copié dans le document Dreamweaver et tous les liens vers des images sont mis à jour.

DREAMWEAVER CS3


357

Mise à jour du code H

T

ML Fireworks placé dans Dreamweaver

Outre la technique de lancement et de modification décrite ci-dessus, vous pouvez faire appel à la commande Fichier >

Mettre à jour le code HTML pour mettre à jour des fichiers Fireworks placés dans Dreamweaver. La commande Mettre à jour le code HTML vous permet de modifier l'image PNG source dans Fireworks et de mettre à jour automatiquement le code HTML et les fichiers d'image exportés placés dans un document Dreamweaver. Grâce à cette commande, vous pouvez mettre à jour les fichiers Dreamweaver même si Dreamweaver est inactif.

1

Dans Fireworks, ouvrez le fichier PNG source puis apportez les modifications désirées.

2

Choisissez Fichier > Enregistrer.

3

Dans Fireworks, choisissez Fichier > Mettre à jour le code HTML.

4

Recherchez le fichier Dreamweaver qui contient le code HTML à mettre à jour, puis cliquez sur Ouvrir.

5

Recherchez le dossier dans lequel placer les fichiers d'image mis à jour et cliquez sur Sélectionner (Windows) ou Choisir

(Macintosh).

Fireworks met à jour le code HTML et JavaScript du document Dreamweaver. Fireworks exporte également les images mises à jour associées au code HTML et les place dans le dossier de destination indiqué.

Si Fireworks ne trouve pas le code HTML correspondant, il vous propose d'insérer du nouveau code HTML dans le document Dreamweaver. Fireworks insère la section JavaScript du nouveau code au début du document et place la table

HTML ou le lien vers l'image à la fin du document.

Création d'un album photos pour le Web

Vous pouvez générer un site Web de façon automatique pour présenter un album photos présentant les images contenues dans un dossier donné. Dreamweaver utilise Fireworks pour créer une image miniature et une image de plus grande taille pour chaque image du dossier. Dreamweaver crée ensuite une page Web contenant toutes les miniatures, ainsi que les liens vers les images de plus grande taille. Pour créer un album photos pour le Web, vous devez avoir installé Dreamweaver et

Fireworks 4 ou une version ultérieure sur votre système.

Avant de commencer, placez toutes les images que vous souhaitez intégrer à l'album photos dans un dossier Le dossier ne doit pas nécessairement se trouver sur un site. Assurez-vous également que les noms des fichiers d'image portent les extensions suivantes : .gif, .jpg, .jpeg, .png, .psd, .tif ou .tiff. Les images portant des extensions de fichiers non reconnues ne figureront pas dans l'album.

1

Dans Dreamweaver, choisissez Commandes > Créer un album photos pour le Web.

2

Dans la zone Titre de l'album photos, entrez un titre. Ce dernier s'affiche dans un rectangle gris dans la partie supérieure de la page des miniatures.

Les zones de texte Infos de sous-titre et Autres infos permettent d'ajouter deux autres lignes de texte sous le titre.

3

Choisissez le dossier contenant les images sources en cliquant sur le bouton Parcourir, situé à côté de la zone de texte

Dossier images sources. Choisissez (ou créez) ensuite un dossier de destination dans lequel placer toutes les images exportées et les fichiers HTML en cliquant sur le bouton Parcourir, situé près de la zone de texte Dossier de destination.

Ce dernier ne doit pas contenir d'album photos. Dans le cas contraire, si les images portent les mêmes noms que celles que vous souhaitez ajouter, vous risquez d'écraser les fichiers d'image et les miniatures présents dans le dossier de destination.

4

Spécifiez les options d'affichage des images miniatures :

•

Choisissez une taille pour les images miniatures dans le menu Taille des vignettes. Les images sont mises à l'échelle proportionnellement, pour que les miniatures tiennent dans un carré possédant les dimensions (en pixels) indiquées.

•

Pour afficher le nom de fichier de chaque image d'origine sous sa miniature, choisissez Montrer les noms de fichiers.

•

Indiquez le nombre de colonnes de la table qui affiche les miniatures.

5

Choisissez un format pour les images miniatures dans le menu déroulant Format des vignettes : GIF (128 ou 256 couleurs) ou JPEG (meilleure qualité d'image ou taille de fichier plus réduite).

6

Dans le menu Format graphique des photos, choisissez un format pour les images de grande taille. Ce format ne doit pas nécessairement être identique à celui choisi pour les miniatures.

DREAMWEAVER CS3


358

Remarque :

Vous ne pouvez pas utiliser vos fichiers d'image originaux comme images de grande taille, car les images originales en formats autres que GIF et JPEG pourraient ne pas être affichées correctement dans tous les navigateurs. Si les images d'origine sont des fichiers JPEG, les images de grande taille peuvent présenter des tailles de fichier supérieures ou une qualité inférieure à celle des images d'origine.

7

Choisissez un pourcentage d'échelle pour les images de grande taille.

En utilisant une échelle de 100 %, vous créez des images de grande taille dont le format est identique à celui des originaux.

Le pourcentage d'échelle est appliqué à toutes les images. Par conséquent, si toutes les images d'origine ne sont pas de taille identique, vous risquez de ne pas obtenir les résultats escomptés en les mettant à l'échelle à l'aide d'un même pourcentage.

8

Sélectionnez l'option Créer des pages séparées pour chaque photo afin de créer une page Web contenant les liens de navigation Retour, Accueil et Suivant pour chaque image source.

Si vous sélectionnez cette option, le lien vers la miniature mène aux pages de navigation. Dans le cas contraire, le lien vers la miniature permet d'afficher directement les images de grande taille.

9

Cliquez sur OK pour créer les fichiers HTML et image de l'album photos pour le Web.

S'il n'est pas déjà actif, Fireworks est lancé et crée les miniatures et images de grande taille. L'opération peut durer plusieurs minutes si vous traitez un grand nombre de fichiers d'image. Une fois le traitement terminé, Dreamweaver est réactivé et génère la page contenant les miniatures.

10

L'album a été créé » s'affiche, cliquez sur OK.

Vous devrez peut-être attendre quelques secondes avant que la page de votre album photos n'apparaisse. Les miniatures sont classées dans l'ordre alphabétique des noms de fichier.

Remarque :

Si vous cliquez sur Annuler pendant que Dreamweaver crée l'album, vous n'arrêterez pas l'opération. Vous empêcherez simplement Dreamweaver d'afficher la page principale de l'album photos.

Utilisation de Photoshop

A propos de l'intégration de Photoshop

Vous pouvez insérer des fichiers d'image Photoshop (en format PSD) dans des pages Web de Dreamweaver, puis les faire optimiser parDreamweaver sous la forme d'images Web (en formats GIF, JPEG et PNG). Vous pouvez également coller une image Photoshop à calques multiples ou tranches multiples, en tout ou en partie, dans une page Web de Dreamweaver.

Remarque :

Si vous employez souvent cette fonctionna lité d'intégration, il peut être utile de stocker les images Photoshop sur votre site Web, de manière à y accéder plus aisément. Dans ce cas, veillez à les voiler de manière à éviter toute manipulation superflue entre le site local et le serveur distant.

Vous trouverez un didacticiel consacré à l'utilisation de Dreamweaver et de Photoshop à l'adresse www.adobe.com/go/vid0200_fr .

Voir aussi

« Voilage et suppression du voilage de certains types de fichier » à la page 97

T

ravailler avec Photoshop et Dreamweaver

Si vous utilisez Photoshop pour créer des images, vous pouvez recourir à Dreamweaver en vue de les optimiser pour le Web et de les insérer dans des pages Web. Vous pouvez également utiliser des tranches ou des calques dans une image Photoshop, puis utiliser Dreamweaver pour les insérer sous la forme d'images dans des pages Web. Après les avoir insérées dans des pages Web, vous pourrez modifier les fichiers source dans Photoshop et mettre à jour les images Web correspondantes dans

Dreamweaver.

DREAMWEAVER CS3


359

Procédez comme suit pour insérer, dans une page Web, une image créée dans Photoshop :

•

Dans Photoshop, enregistrez votre image sous la forme d'un fichier Photoshop normal (PSD). Il n'est pas nécessaire de convertir au préalable l'image au format JPEG, GIF ou PNG.

•

Dans Dreamweaver, sélectionnez le fichier PSD et insérez-le dans la page Web. Dreamweaver vous permet d'optimiser l'image pour le Web avant de l'insérer dans la page.

Procédez comme suit pour utiliser une tranche ou un calque d'une image Photoshop comme image dans une page Web :

•

Dans Photoshop, sélectionnez et copiez la tranche ou le calque dans le Presse-papiers.

•

Dans Dreamweaver, collez la tranche ou le calque dans la page Web. Dreamweaver vous permet d'optimiser l'image pour le Web avant de l'insérer dans la page.

Procédez comme suit pour mettre à jour des images Web créées initialement dans Photoshop :

•

Dans Dreamweaver, sélectionnez le fichier JPEG, GIF ou PNG que vous avez extrait d'un fichier PSD et inséré avec

Dreamweaver, puis cliquez sur le bouton de modification d'image. Dreamweaver ouvre le fichier PSD source dans

Photoshop.

•

Dans Photoshop, apportez les modifications de votre choix au fichier PSD et enregistrez-le. Sélectionnez ensuite toute ou une partie de l'image et copiez-la dans le Presse-papiers.

•

Dans Dreamweaver, collez l'image sur l'image Web de la page. Dreamweaver optimise l'image PSD dans le Presse-papiers

à l'aide des paramètres d'optimisation d'origine, puis remplace l'image de la page par la version actualisée.

Pour visualiser un didacticiel vidéo relatif à l'utilisation de Photoshop et de Dreamweaver, rendez-vous à l'adresse suivante : www.adobe.com/go/vid0200_fr .

Voir aussi

« Insertion d'une image Photoshop sur votre page » à la page 359

« Copie d'une sélection Photoshop sur votre page » à la page 360

« Utilisation de Photoshop pour modifier des images dans des pages Dreamweaver » à la page 361

Insertion d'une image Photoshop sur votre page

1

Dans Dreamweaver, placez le point d'insertion sur la page, à l'endroit où vous voulez insérer l'image.

2


3

Dans la boîte de dialogue Sélectionnez la source de l'image, recherchez votre fichier d'image PSD Photoshop en cliquant sur le bouton Parcourir et en accédant à ce fichier.

4

Dans la boîte de dialogue d'aperçu de l'image qui s'affiche, ajustez les paramètres d'optimisation requis puis cliquez sur OK.

5

Enregistrez le fichier d'image Web à un emplacement du dossier racine de votre site Web.

•

Si vous avez défini un dossier par défaut pour les images alors que vous enregistrez le fichier en dehors de votre dossier racine, le fichier est enregistré à cet endroit et est également copié dans le dossier par défaut pour les images.

•

Si vous n'avez pas défini de dossier par défaut pour les images alors que vous enregistrez le fichier en dehors de votre dossier racine, Dreamweaver l'enregistre à cet endroit et vous demande si vous voulez qu'une copie du fichier soit enregistrée dans votre dossier par défaut. En règle générale, il est conseillé d'accepter cette option. Si vous annulez l'opération à ce moment, le fichier n'est pas placé dans la page Dreamweaver, mais l'image Web est enregistrée dans l'emplacement externe que vous avez choisi.

Dreamweaver définit l'image conformément aux paramètres d'optimisation et en place une version Web sur votre page. Les informations relatives à l'image, comme le nom de fichier et l'emplacement du fichier PSD d'origine, sont enregistrées dans une Design Note, que vous ayez ou non activé les Design Notes pour votre site. La Design Note vous permet de revenir au fichier source Photoshop d'origine, afin d'y apporter des modifications, à partir de Dreamweaver.

Remarque :

Si vous décidez par la suite de modifier les paramètres d'optimisation d'une image insérée sur l'une de vos pages, vous pouvez cliquer sur le bouton Optimiser de l'inspecteur Propriétés de l'image, puis optimiser de nouveau l'image.

DREAMWEAVER CS3


360

Voir aussi

« Dreamweaver et l'accessibilité » à la page 674


Copie d'une sélection Photoshop sur votre page

Vous pouvez copier une image Photoshop, ou une partie de celle-ci, et coller la sélection dans votre page Dreamweaver sous la forme d'une image Web. Vous pouvez copier un calque ou un groupe de calques pour une partie sélectionnée de l'image, ou encore copier une tranche de l'image.

1

Dans Photoshop, effectuez l'une des opérations suivantes :

• Copiez la totalité ou une partie d'un calque. Pour ce faire, employez l'outil Rectangle de sélection pour sélectionner la partie à copier, puis choisissez Edition > Copier. Cette opération ne copie que le calque actif correspondant à la zone sélectionnée dans le presse-papiers. Si vous avez défini des effets basés sur des calques, ils ne sont pas copiés.

• Copiez et fusionnez plusieurs calques. Pour ce faire, employez l'outil Rectangle de sélection pour sélectionner la partie à copier, puis choisissez Edition > Copier avec fusion. Cette opération aplatit et copie tous les calques actifs et inférieurs de la zone sélectionnée dans le presse-papiers. Si des effets basés sur des calques sont associés à l'un de ces calques, ils sont copiés.

• Copiez une tranche. Pour ce faire, sélectionnez la tranche à l'aide de l'outil Sélection de tranche, puis choisissez Edition

> Copier. Cette opération aplatit et copie tous les calques actifs et inférieurs de la tranche dans le presse-papiers.

Vous pouvez choisir Sélection > Tout afin de sélectionner rapidement une image entière afin de la copie.

2

Dans Dreamweaver (mode Création ou Code), placez le point d'insertion sur la page, à l'endroit où vous voulez insérer l'image.

3


4

Dans la boîte de dialogue d'aperçu de l'image, ajustez les paramètres d'optimisation requis puis cliquez sur Exporter.

5

Enregistrez le fichier d'image Web à un emplacement du dossier racine de votre site Web.

• Si vous avez défini un dossier par défaut pour les images alors que vous enregistrez le fichier en dehors de votre dossier racine, le fichier est enregistré à cet endroit et est également copié dans le dossier par défaut pour les images.

• Si vous n'avez pas défini de dossier par défaut pour les images alors que vous enregistrez le fichier en dehors de votre dossier racine, Dreamweaver l'enregistre à cet endroit et vous demande si vous voulez qu'une copie du fichier soit enregistrée dans votre dossier par défaut. En règle générale, il est conseillé d'accepter cette option. Si vous annulez l'opération à ce moment, le fichier n'est pas placé dans la page Dreamweaver, mais l'image Web est enregistrée dans l'emplacement externe que vous avez choisi.

Dreamweaver définit l'image conformément aux paramètres d'optimisation et en place une version Web sur votre page. Les informations relatives à l'image, comme l'emplacement du fichier PSD d'origine, sont enregistrées dans une Design Note, que vous ayez ou non activé les Design Notes pour votre site. La Design vous permet de revenir au fichier Photoshop d'origine, afin d'y apporter des modifications, à partir de Dreamweaver.

Vous trouverez un didacticiel consacré à la copie et au collage entre différentes applications, dont Dreamweaver et

Photoshop, à l'adresse www.adobe.com/go/vid0193_fr .

Voir aussi

« Dreamweaver et l'accessibilité » à la page 674


DREAMWEAVER CS3


361

Utilisation de Photoshop pour modifier des images dans des pages Dreamweaver

Après avoir placé des images Photoshop dans vos pages Dreamweaver, vous pouvez modifier, dans Photoshop, l'image source PSD d'origine ou le fichier Web JPEG, GIF ou PNG qui s'affiche sur la page. Si vous apportez des modifications à la version Web du fichier, le fichier PSD source n'est pas mis à jour, et les deux versions vont diverger. Il est conseillé d'apporter les modifications au fichier PSD source, de manière à garantir l'identité de l'image avec sa source.

Remarque :

Assurez-vous que est bien défini comme l'éditeur principal pour le type de fichier à modifier.

Voir aussi

« Modification d'images dans Dreamweaver » à la page 237



« Réinsertion d'une image Photoshop depuis Dreamweaver » à la page 362

« Recopie d'une sélection d'image Photoshop » à la page 362


Modification du fichier source PSD d'origine dans Photoshop

1

Dans Dreamweaver, sélectionnez une image Web créée à l'origine dans Photoshop, puis effectuez l'une des actions suivantes :

•

Cliquez sur le bouton Modifier dans l'inspecteur Propriétés de l'image.

•

Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) lorsque vous double-cliquez sur le fichier.

•

Cliquez sur l'image avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), choisissez Modifier l'original avec dans le menu contextuel, puis choisissez Photoshop.

Remarque :

Ce principe suppose que Photoshop soit défini comme éditeur d'image externe principal pour les fichiers d'image

PSD. Il peut également être utile de définir Photoshop comme éditeur par défaut pour les fichiers de type JPEG, GIF et PNG.

2

Après avoir modifié le fichier dans Photoshop, vous pouvez effectuer l'une des actions suivantes pour mettre à jour l'image de votre page :

•

Réinsérez le fichier et définissez de nouveau les paramètres d'optimisation.

•

Collez l'image ou la sélection dans votre page. Dreamweaver emploie vos paramètres d'optimisation existants

Pour effectuer une nouvelle optimisation, cliquez sur le bouton Optimiser de l'inspecteur Propriétés afin d'ouvrir la boîte de dialogue d'aperçu de l'image. Si l'image a été créée dans Photoshop, l'image Photoshop est réimportée et vous pouvez lui appliquer de nouveau des paramètres d'optimisation. Si aucun fichier PSD Photoshop n'est associé à l'image, l'image Web s'affiche.

Modification du fichier d'image Web dans Photoshop

1

Dans Dreamweaver, choisissez Edition > Préférences > Types de fichiers et définissez Photoshop comme éditeur par défaut pour les fichiers de type JPEG, GIF et PNG. Par défaut, il est défini comme éditeur principal pour les fichiers PSD.

• Pour ajouter un nouveau type de fichier, cliquez sur le Plus (+) au-dessus du panneau de gauche.

• Pour ajouter ou modifier l'éditeur externe d'un type de fichier, sélectionnez ce type dans le panneau de gauche puis cliquez sur le Plus (+) au-dessus du panneau de droite. Vous accédez ainsi à la boîte de dialogue de recherche de fichier

Sélectionner un éditeur externe.

2

Sélectionnez une image créée dans Photoshop puis effectuez l'une des actions suivantes :

• Appuyez sur la touche Alt (Windows) ou Option (Macintosh) lorsque vous double-cliquez sur le fichier.

• Cliquez sur l'image sélectionnée avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée

(Macintosh), choisissez Modifier avec > Parcourir dans le menu contextuel, puis accédez au fichier de l'application

Photoshop.

• Choisissez Modifier > Image > Photoshop.

DREAMWEAVER CS3


362

3

Après avoir apporté les modifications requises dans Photoshop, enregistrez le fichier.

4

Dans Dreamweaver, le fichier est mis à jour afin d'intégrer vos modifications. Il peut toutefois être nécessaire de réinitialiser la taille de l'image.

Vous pouvez apporter des modifications mineures à vos images Web, comme le recadrage ou la réoptimisation, à l'aide des outils de retouche d'image de Dreamweaver, accessibles via l'inspecteur Propriétés de l'image ou des commandes du menu

Modifier > Image. Ces actions n'entraînent pas la mise à jour du fichier PSD source, mais uniquement de l'image Web.

Réinsertion d'une image Photoshop depuis Dreamweaver

Si vous remplacez une image provenant de Photoshop dans une page Dreamweaver en insérant un fichier PSD différent, la boîte de dialogue Aperçu de l'image s'affiche de nouveau. Vous devez y entrer de nouveau les paramètres d'optimisation de la nouvelle image.

1

Dans Dreamweaver, sélectionnez un fichier PSD Photoshop différent d'une des manières suivantes :

•

Utilisez l'icône Pointer vers un fichier afin de choisir un fichier PSD différent dans le panneau Fichiers.

•

Double-cliquez sur une image existante puis recherchez un nouveau fichier.

2

Le reste de la procédure est identique à celle d'insertion d'une nouvelle image, à savoir l'ajustement des paramètres d'optimisation et l'enregistrement du fichier dans votre site.

Recopie d'une sélection d'image Photoshop

Si vous remplacez une image provenant de Photoshop dans une page Dreamweaver par une sélection copiée depuis un fichier PSD, la boîte de dialogue Aperçu de l'image ne s'affiche pas. Au contraire, Dreamweaver réutilise les paramètres d'optimisation que vous avez définis pour cette image dans la page.

1

Dans Photoshop, modifiez une image puis copiez-la entièrement ou en partie.

2

Dans Dreamweaver, sélectionnez une image existante.

3


Choix des paramètres d'optimisation des images

La boîte de dialogue Aperçu de l'image comprend trois sections :

•

L'onglet Options permet de définir le format de fichier à utiliser et de définir des préférences telles que la couleur.

•

L'onglet Fichier permet de définir l'échelle et la taille de l'image.

•

Le panneau d'aperçu permet de voir une version de l'image avec vos paramètres.

Voir aussi

« Paramètres d'optimisation » à la page 363

Choix des options de fichiers d'image dans l'onglet

O ptions

1

Choisissez le type de fichier à utiliser dans le menu Format de l'onglet de l'onglet Options : JPEG, GIF ou PNG.

2

(Facultatif) Définissez d'autres paramètres de l'image dans l'onglet Options, en fonction du format de fichier choisi.

(Facultatif) Révision de vos paramètres dans la boîte de dialogue d'aperçu de l'image

1

Dans la boîte de dialogue Aperçu de l'image, activez l'option Aperçu si vous voulez voir comment l'image se présente si vos paramètres lui sont appliqués. Pour améliorer les performances, il peut être utile de désactiver cette option.

2

Sélectionnez dans le menu l'un des paramètres de palette de couleurs proposés si vous voulez utiliser un ensemble d'options prédéfinis.

3

Utilisez l'outil Pointeur pour saisir l'image dans l'aperçu et la faire défiler, de manière à voir ses différentes parties.

4

L'outil Recadrer permet de réduire la taille de l'image. Il peut être nécessaire d'effectuer un zoom arrière pour afficher l'image entière.

DREAMWEAVER CS3


363

5

Choisissez une valeur dans le menu Zoom pour agrandir ou réduire l'affichage de l'image dans l'aperçu. Vous pouvez

également choisir l'outil Zoom, puis cliquer pour effectuer un zoom avant ou cliquer tout en maintenant enfoncée la touche

Alt (Windows) ou Option (Macintosh) pour effectuer un zoom arrière.

6

Vous pouvez consulter un aperçu de deux ou quatre optimisations différentes en cliquant sur le bouton 2 vues ou 4 vues dans le bas du panneau d'aperçu et en choisissant des palettes de couleur différentes pour chaque volet.

7

Les contrôles d'animation ne s'appliquent pas aux images Photoshop.

(Facultatif) Modification des options d'échelle ou de zone d'exportation d'une image dans l'onglet Fichier

1

Sélectionnez l'onglet Fichier.

2

Réduisez ou développez l'image d'une des manières suivantes :

• Définissez un pourcentage de mise à l'échelle.

• Entrez des valeurs absolues, en pixels, pour la largeur ou la hauteur.

3

Activez l'option Contraindre pour préserver les proportions initiales de l'image lorsque vous la redimensionnez.

4

Modifiez la forme de l'image placée en activant l'option Exporter zone et en effectuant l'une des actions suivantes :

• Tirez la bordure pointillée autour de l'aperçu de l'image. Vous pouvez ramener l'image à l'intérieur du cadre d'affichage afin d'afficher les zones masquées.

• Entrez les coordonnées, en pixels, des limites de l'image.

Exportation et enregistrement de l'image

1

Lorsque vous avez défini tous les paramètres requis, cliquez sur OK.

2

Vous êtes invité à enregistrer le fichier dans le dossier d'images par défaut, si vous en avez défini un pour votre site ou, dans le cas contraire, dans le dossier racine du site. Accédez à l'emplacement désiré puis cliquez sur OK.

Pour effectuer une nouvelle optimisation, cliquez sur le bouton Optimiser de l'inspecteur Propriétés. La boîte de dialogue d'aperçu de l'image s'affiche. Si l'image provient de Photoshop, l'image Photoshop est réimportée et vous pouvez lui appliquer de nouveau des paramètres d'optimisation. Si aucun fichier PSD Photoshop n'est associé à l'image, l'image Web s'affiche.

Paramètres d'optimisation

Lorsque vous insérez un fichier d'image ou copiez une partie d'une image à partir de Photoshop, Dreamweaver affiche la boîte de dialogue Aperçu de l'image. Vous pouvez y définir et prévisualiser des paramètres pour une version Web de votre image, possédant la combinaison appropriée de couleurs, de compression et de qualité :

•

Format de fichier, avec les options de compression de l'image

•

(Facultatif) Ajustements de la palette de couleurs, pour éliminer des couleurs et réduire la taille du fichier

•

(Facultatif) Zone de mise à l'échelle ou d'exportation de l'image

DREAMWEAVER CS3


364

Une image Web est une image qui peut être affichée par tous les navigateurs Web modernes et qui possède la même apparence, quel que soit le système ou le navigateur utilisé. Lorsque vous insérez une image Photoshop, la boîte de dialogue

Aperçu de l'image vous permet d'ajuster divers paramètres pour optimiser la publication sur le Web. En règle générale, ces paramètres permettent de parvenir un compromis entre qualité et taille de fichier.

Remarque :

Les paramètres que vous sélectionnez n'influent que sur la version exportée du fichier d'image. Le fichier PSD

Photoshop d'origine n'est jamais modifié.

L'onglet Options comprend de nombreuses options relatives à l'image, qui varient selon le format de fichier choisi. Plusieurs jeux d'options pour les images GIF et JPEG sont proposés dans le menu Paramètres enregistrés de la boîte de dialogue

Aperçu de l'image.

O ptions des images JPEG

Vous pouvez optimiser une image JPEG en définissant ses paramètres de compression et de lissage. Il est impossible de modifier sa palette de couleurs.

Qualité

La glissière permet d'augmenter ou de réduire la qualité de l'image. Une qualité plus élevée produit un fichier de plus grande taille.

Lissage

Permet d'augmenter le degré de lissage en fonction de vos besoins. Une image de moins bonne qualité peut exiger l'emploi d'une valeur plus élevée.

Affichage progressif du navigateur

Affiche l'image tout d'abord en basse résolution, puis augmente progressivement cette résolution pendant le téléchargement. Cette option n'est pas activée par défaut.

Accentuer les bords des couleurs

Permet d'obtenir une image de qualité plus élevée.

Matage

Permet de définir l'arrière-plan de l'image. Vous pouvez conserver la transparence d'une image PNG 32 bpc (bits par canal) en cliquant sur l'icône de transparence de la boîte de dialogue Matage. Vous pouvez également utiliser cette boîte de dialogue pour activer l'anticrénelage d'objets à contours flous qui se trouvent directement au-dessus de la zone de document, en faisant correspondre la couleur du cache à l'arrière-plan de la cible.

DREAMWEAVER CS3


365

O ptimiser la taille

parvenir à la taille de fichier demandée en ajustant le nombre de couleurs ou en appliquant un tramage.

O ptions des images GIF et P

N

G

Dans l'onglet Options, vous pouvez définir la valeur de transparence de couleurs spécifiques des images GIF et PNG 8 bpc, de manière à ce que l'arrière-plan de la page Web soit visible à travers les zones possédant ces couleurs. Pour ce faire, ajustez la palette de couleurs sur la gauche de l'onglet Options. Les images PNG en format 32 bpc contiennent automatiquement de la transparence, même si l'option de transparence n'est pas visible pour ces fichiers dans le panneau Optimiser.

Palette

Réglée sur Adaptive par défaut.

Perte

Réglée sur 0 par défaut. Cette option n'est pas d'application pour les images PNG 8 bpc.

T ramer

Définit approximativement les couleurs qui ne figurent pas dans la palette actuelle, en alternant les pixels de couleurs similaires de façon à donner l'apparence d'un mélange produisant la couleur manquante. Le tramage est particulièrement utile lors de l'exportation d'images comportant des mélanges ou des dégradés complexes, ou en cas activée par défaut.

Remarque :

Le tramage peut accroître considérablement la taille du fichier.

Liste

N ombre de couleurs

Réglée sur 256 par défaut. Le nombre de couleurs dépend du comportement actuel de la palette.

» n'affiche que 216 couleurs.

Palette de couleurs

couleurs.

Les couleurs affichées varient selon le comportement de palette sélectionné et le nombre maximal de

O utils de palette

Cliquez sur un pixel de la palette puis sur l'une de ces icônes pour modifier, ajouter ou supprimer une couleur, ou pour rendre une couleur transparente, compatible Web ou verrouillée.

Icônes de sélection de la couleur de transparence

Ces icônes permettent de sélectionner, d'ajouter ou de supprimer une couleur de la palette. Par exemple, si vous choisissez l'option de sélection de la couleur de transparence, vous pouvez cliquer sur un pixel de la palette ou sur un point de couleur du panneau d'aperçu pour le rendre transparent.

Menu

T ransparence

Permet de choisir Transparence d'index, Transparence Alpha ou Pas de transparence. Un damier gris et blanc, sur les aperçus du document, indique les zones transparentes. Pour voir comment vos modifications influent sur l'image, cliquez sur 2 vues ou 4 vues dans l'aperçu de l'image, puis cliquez sur une image qui n'est pas l'originale.

•

T ransparence d'index

La transparence de type Index s'emploie lors de l'exportation d'images GIF contenant des zones transparentes. Avec la transparence d'index, vous pouvez choisir des couleurs précises qui seront transparentes lors de l'exportation. La transparence d'index active ou désactive les pixels possédant des valeurs de couleur spécifiques.

•

T ransparence Alpha

La transparence de type Alpha s'emploie lors de l'exportation d'images PNG 8 bpc contenant des zones transparentes. La transparence alpha permet d'obtenir un dégradé de transparence et des pixels semi-opaques.

Matage

Permet de définir l'arrière-plan de l'image. Vous pouvez conserver la transparence d'une image PNG 32 bpc en cliquant sur l'icône de transparence de la boîte de dialogue Matage. Vous pouvez également utiliser cette boîte de dialogue pour activer l'anticrénelage d'objets à contours flous qui se trouvent directement au-dessus de la zone de document, en faisant correspondre la couleur du cache à l'arrière-plan de la cible.

Supprimer les couleurs non utilisées

Réduit la taille du fichier en supprimant les couleurs non utilisées dans l'image.

Affichage entrelacé du navigateur

Affiche une image entrelacée tout d'abord en basse résolution, puis passe progressivement en pleine résolution pendant le téléchargement. Cette option n'est pas activée par défaut.

O ptimiser la taille

parvenir à la taille de fichier demandée en ajustant le nombre de couleurs ou en appliquant un tramage.

Paramètres enregistrés

Dreamweaver comporte plusieurs paramètres prédéfinis. En fonction des paramètres enregistrés que vous choisissez, les options spécifiques à un type de fichier, décrites ci-dessus, peuvent varier.

GIF Web 216

Force toutes les couleurs à être compatibles Web. La palette de couleurs contient 216 couleurs au maximum.

DREAMWEAVER CS3


366

GIF Websnap 256

Convertit les couleurs non compatibles avec le Web dans la couleur compatible avec le Web la plus proche. La palette de couleurs contient 256 couleurs au maximum.

GIF Websnap 128

Convertit les couleurs non compatibles avec le Web dans la couleur compatible avec le Web la plus proche. La palette de couleurs contient 128 couleurs au maximum.

GIF Adaptive 256

Palette de couleurs qui ne contient que les couleurs réellement utilisées dans le graphisme. La palette de couleurs contient 256 couleurs au maximum.

JPEG - Qualité supérieure

est de plus grande taille.

Fixe la qualité à 80 et le lissage à 0, ce qui produit une image de haute qualité mais dont le fichier

JPEG - Fichier réduit

Fixe la qualité à 60 et le lissage à 2, ce qui produit un fichier dont la taille vaut moins que la moitié d'un fichier JPEG de qualité supérieure, mais avec un niveau de qualité moins élevé.

GIF animé Websnap 128

Utilise le format de fichier GIF animé et convertit les couleurs non compatibles avec le Web dans la couleur compatible avec le Web la plus proche. La palette de couleurs contient 128 couleurs au maximum.

Voir aussi


Utilisation de Flash

Modification d'un fichier SWF de Dreamweaver dans Flash

Si Flash et Dreamweaver sont installés, vous pouvez sélectionner un fichier SWF dans un document Dreamweaver et utiliser Flash pour le modifier. Flash ne modifie pas directement le fichier SWF ; il modifie le document source (fichier

FLA), puis exporte à nouveau le fichier SWF.

1

Dans Dreamweaver, ouvrez l'inspecteur Propriété (Window

2

Dans le document Dreamweaver, procédez de l'une des manières suivantes :

•

Cliquez sur l'espace réservé du fichier SWF pour le sélectionner, puis sur Modifier dans l'inspecteur Propriétés.

•

Cliquez sur l'espace réservé du fichier SWF avec le bouton droit de la souris (Windows) ou en maintenant la touche

Contrôle enfoncée (Macintosh) et choisissez Modifier avec Flash dans le menu contextuel.

Dreamweaver passe sur Flash, qui tente à son tour de localiser le fichier de programmation Flash (.FLA) correspondant au fichier SWF sélectionné. Si Flash ne peut pas localiser le fichier de programmation Flash, un message vous invite à le faire.

Remarque :

Si le fichier FLA ou le fichier SWF est verrouillé, extrayez le fichier dans Dreamweaver.

3

Dans Flash, modifiez le fichier FLA. La fenêtre de document indique que vous êtes en train de modifier le fichier à partir de Dreamweaver.

4

Une fois les modifications effectuées, cliquez sur Terminé.

Flash met à jour le fichier FLA, le réexporte en tant que fichier SWF, se ferme et retourne sur le document Dreamweaver.

Remarque :

Pour mettre le fichier SWF à jour et garder Flash ouvert, choisissez, dans Flash, Fichier > Mettre à jour dans

Dreamweaver.

5

Pour afficher le fichier mis à jour dans le document, cliquez sur Lecture dans l'inspecteur Propriétés de Dreamweaver ou appuyez sur la touche F12 pour afficher un aperçu de votre page dans la fenêtre d'un navigateur.

Mise à jour des liens dans un fichier SWF

Dreamweaver vous permet de mettre à jour un lien URL dans une animation Flash (fichier SWF), puis d'insérer cette modification dans le document natif de Flash (fichier FLA).

1

Définissez une page d'accueil pour le site si ce n'est déjà fait.

DREAMWEAVER CS3


367

Pour pouvoir créer la carte d'un site, vous devez définir une page d'accueil. Pour pouvoir mettre à jour un lien dans un fichier SWF, vous devez afficher les fichiers dépendants dans la vue Carte du site. Par défaut, la carte du site n'affiche pas

2

Dans le panneau Fichiers, sélectionnez Affichage de la carte dans le menu contextuel Vue du site.

3

Pour afficher les fichiers dépendants, choisissez Vue dans le menu Options situé dans le coin supérieur droit du panneau

Fichiers, puis choisissez Options de la carte du site > Afficher les fichiers dépendants.

4

Dans la carte du site, modifiez le lien sous le fichier SWF en effectuant l'une des actions suivantes :

•

Pour modifier le lien dans le fichier SWF sélectionné, cliquez dessus avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Modifier le lien. Dans la boîte de dialogue qui s'affiche, entrez le nouveau chemin d'accès à l'URL.

•

Pour mettre à jour toutes les instances du lien, choisissez Site > Modifier le lien au niveau du site. Dans la zone de texte

Modifier tous les liens à, recherchez le lien à modifier à l'aide du bouton Parcourir ou tapez son chemin d'accès. Dans la zone de texte En liens à, recherchez la nouvelle URL ou tapez son chemin d'accès.

5

Cliquez sur OK.

Tous les liens mis à jour par Dreamweaver dans le fichier SWF sont intégrés au document source FLA lorsque vous démarrez Flash en vue d'une modification. Dreamweaver consigne automatiquement toutes les modifications de lien apportées au fichier SWF dans les Design Notes. Lorsque Flash répercute les modifications dans le fichier FLA, il les supprime des Design Notes.

Voir aussi

« Utilisation des cartes de site » à la page 49

« Affichage ou masquage des fichiers de la carte du site » à la page 52

Utilisation de Bridge

A propos d'Adobe Bridge

Dreamweaver dispose d'une intégration transparente à Adobe® Bridge, une application autonome de navigation dans les fichiers. Adobe® Bridge est une application inter-plates-formes jointe aux composants d'Adobe® Creative Suite® 3. Elle permet de rechercher, d'organiser et de parcourir les actifs requis pour créer du contenu imprimé, audio, vidéo et destiné au Web. Vous pouvez démarrer Bridge à partir de tout composant de Creative Suite (sauf Acrobat 8) et l'employer pour accéder à des actifs de type Adobe et non Adobe.

A partir d'Adobe Bridge, vous pouvez :

•

Gestion des fichiers d'image : aperçu, recherche, tri et traitement de fichiers dans Bridge sans ouvrir d'applications spécifiques. Vous pouvez également modifier les métadonnées des fichiers et utiliser Bridge pour placer des fichiers dans vos documents, projets ou compositions.

•

Gestion de vos photos : Vous pouvez importer et modifier les photos de la carte mémoire de votre appareil photo numérique, regrouper des photos associées en piles et ouvrir ou importer des fichiers bruts de votre appareil photo et modifier leurs paramètres sans démarrer Photoshop. Vous pouvez également rechercher des bibliothèques de stocks d’images et télécharger des images hors droit par le biais d’Adobe Stock Photos.

•

Utilisation d'actifs gérés par Adobe Version Cue®

•

Exécution de tâches automatisées, comme les commandes par lots

•

Synchronisation des paramètres de couleurs entre les composants de Creative Suite à gestion des couleurs.

Vous trouverez un didacticiel consacré à Adobe Bridge et aux activités de développement Web à l'adresse www.adobe.com/go/vid0192_fr .

DREAMWEAVER CS3


368

Démarrage de Bridge depuis Dreamweaver

Vous pouvez démarrer Bridge à partir de Dreamweaver afin de visualiser vos fichiers avant de les placer ou de les faire glisser dans votre page.

❖

Vous pouvez démarrer Bridge de différentes façons :

•

Choisissez Fichier > Parcourir dans Bridge.

•

Cliquez sur l'icône Parcourir dans Bridge de la barre d'outils standard.

•

Utilisez le raccourci clavier Parcourir dans Bridge : appuyez sur Ctrl+Alt+O (Windows) ou Commande+Option+O

(Macintosh).

Bridge s'affiche en mode Gestionnaire de fichiers et présente le contenu du dossier ouvert le plus récemment dans

Dreamweaver. Si Bridge était déjà ouvert, sa fenêtre devient la fenêtre active.

Remarque :

Si Bridge n'est pas installé, Dreamweaver affiche un message d'erreur. Vous devez installer l'application avant de pouvoir utiliser ces fonctionnalités.

Placement de fichiers dans Dreamweaver depuis Bridge

Vous pouvez insérer des fichiers dans des pages Dreamweaver en les insérant ou en les déposant de Bridge sur votre page.

Pour que vous puissiez utiliser cette fonctionnalité, le document Dreamweaver dans lequel vous voulez insérer le fichier doit

être ouvert et se trouver en mode Création.

Vous pouvez insérer la plupart des types de fichiers dans vos pages, mais Dreamweaver les traite différemment :

•

Si vous insérez une image Web (JPEG, GIF ou PNG)), Dreamweaver insère directement les fichiers d'image dans la page et en place une copie dans le dossier des images par défaut de votre site.

•

Si vous insérez un fichier PSD Photoshop, vous devez définir ses paramètres d'optimisation avant que Dreamweaver puisse le placer sur votre page.

•

Si vous insérez un fichier non graphique, comme un fichier MP3, PDF ou un fichier d'un type inconnu, Dreamweaver insère un lien vers le fichier source.

•

Si vous insérez un fichier HTML, Dreamweaver insère un lien vers le fichier source.

•

(Windows uniquement) Si Microsoft Office est installé et si vous insérez un fichier Microsoft Word ou Excel file, vous devez indiquer si vous voulez insérer le fichier proprement dit ou un lien vers le fichier source. Si vous voulez insérer le fichier, vous pouvez indiquer quelle proportion de mise en forme vous voulez conserver.

Voir aussi

« Insertion d'une image Photoshop sur votre page » à la page 359

« Utilisation de Photoshop » à la page 358

Placement d'un fichier Bridge sur votre page

1

Dans Dreamweaver (mode Création ou Code), placez le point d'insertion sur la page, à l'endroit où vous voulez insérer le fichier.

2

Dans Bridge, sélectionnez le fichier puis choisissez Fichier > Placer dans Dreamweaver.

3

Si le fichier ne se trouve pas dans le dossier racine du site, vous êtes invité à l'y copier.

4

Si vous avez configuré les préférences (Edition > Préférences > Accessibilité) de manière à afficher les attributs lors de l'insertion d'images, la boîte de dialogue Attributs d'accessibilité aux balises d'image s'affiche quand vous insérez des images

Web dans un format tel que JPEG ou GIF.

Remarque :

Si le point d'insertion se trouve en mode Code, Bridge démarre normalement mais est incapable de placer le fichier. Vous pouvez uniquement placer des fichiers en mode Création.

DREAMWEAVER CS3


369

Insertion d'un fichier Bridge sur votre page par glisser-déplacer

1

Dans Dreamweaver (mode Création ou Code), placez le point d'insertion sur la page, à l'endroit où vous voulez insérer l'image.

2

Si Bridge n'est pas déjà ouvert, démarrez-le.

3

Dans Bridge, sélectionnez un ou plusieurs fichiers et faites-les glisser dans votre page Dreamweaver.

4

Si un fichier ne se trouve pas dans le dossier racine du site, vous êtes invité à l'y copier.

5

Si vous avez configuré les préférences (Edition > Préférences > Accessibilité) de manière à afficher les attributs lors de l'insertion d'images, la boîte de dialogue Attributs d'accessibilité aux balises d'image s'affiche quand vous insérez des images

Web dans un format tel que JPEG ou GIF.

Remarque :

Si le point d'insertion se trouve en mode Code, Bridge démarre normalement mais est incapable de placer le fichier.

Vous pouvez uniquement placer des fichiers en mode Création.

Démarrage de Dreamweaver depuis Bridge

❖

Sélectionnez un fichier dans Bridge et effectuez l'une des opérations suivantes :

•

Choisissez Fichier > Ouvrir avec > Adobe Dreamweaver.

•

Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Ouvrir avec > Adobe Dreamweaver dans le menu contextuel.

Remarque :

Si Dreamweaver est déjà ouvert, cette action rend le programme actif. Si Dreamweaver n'est pas ouvert, Bridge le démarre en ignorant l'écran d'accueil.

Utilisation de Device Central

Utilisation d'Adobe Device Central avec Dreamweaver

Device Central permet aux concepteurs et développeurs Web travaillant sur Dreamweaver de prévisualiser des fichiers

Dreamweaver sur de nombreux périphériques mobiles. Device Central utilise la fonction Small-Screen Rendering™ d'Opera pour permettre aux concepteurs et aux développeurs de voir à quoi ressemblera leur page Web sur un petit écran. Les concepteurs et les développeurs peuvent aussi tester le comportement de leurs fichiers en format CSS.

Par exemple, un développeur Web peut travailler pour un client qui veut que le site Web soit disponible sur les téléphones portables. Le développeur Web peut utiliser Dreamweaver pour créer des pages préliminaires et Device Central pour tester l'affichage de ces pages sur différents périphériques.

Conseils pour la création de contenu Web Dreamweaver pour les périphériques mobiles

Device Central permet d'afficher des pages Web créées dans Dreamweaver à l'aide de la fonction Small-Screen Rendering d'Opera. Cette prévisualisation peut vous donner une très bonne idée de ce à quoi ressemblera une page Web sur un périphérique mobile.

Remarque :

La fonction Small-Screen Rendering d'Opéra peut être ou ne pas être pré-installée pour les périphériques virtuels.

Device Central donne simplement un aperçu de ce à quoi ressemblerait le contenu si la fonction Small-Screen Rendering d'Opera était installée.

Suivez les conseils ci-dessous pour vous assurer que les pages Web créées dans Dreamweaver s'affichent correctement sur les périphériques mobiles.

•

Si vous utilisez la structure Adobe® Spry pour développer un contenu, ajoutez la ligne HTML suivante à vos pages afin qu'elles s'affichent en CSS et exécutent les fonctions JavaScript™ correctement dans Device Central:

<link href="SpryAccordion.css" media="screen" rel="stylesheet" type="text/css"/>

<link href="SpryAccordion2.css" media="handheld" rel="stylesheet" type="text/css"/>

DREAMWEAVER CS3


370

•

La fonction Small-Screen Rendering d'Opera ne prend pas en charge les cadres, les listes déroulantes, les soulignements, les caractères barrés, les légendes, les clignotements ni les rectangles de sélection. Essayez d'éviter de dessiner ces

éléments.

•

Faites que les pages Web pour périphériques mobiles restent simples. En particulier, utilisez un nombre limité de polices, tailles et couleurs de polices.

•

La réduction de la taille des images et la réduction du nombre de couleurs permettent d'augmenter les chances que les images ressemblent à ce qui était prévu. Utilisez les formats CSS ou HTML pour spécifier la largeur et la hauteur exactes pour chaque image utilisée. Indiquez du texte de remplacement pour toutes les images.

Remarque :

Vous trouverez de très nombreuses informations sur l'optimisation des pages Web pour les périphériques mobiles sur le site Web du logiciel Opera.

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

L'utilisation d'un modèle vous permet de créer de nombreuses pages basées sur une seule conception, ou de créer des zones spécifiques d'une page que les utilisateurs peuvent modifier. Adobe® Dreamweaver® CS3 contient de nombreux outils de création et de gestion de modèles.

A propos des modèles Dreamweaver

Description des modèles Dreamweaver

Un modèle est un type spécial de document qui sert à concevoir une mise en page « fixe ». Il est alors possible de créer des documents basés sur le modèle, qui en héritent la mise en page. Lors de la conception d'un modèle, vous spécifiez comme créateurs de modèles peuvent contrôler les éléments de la page que les utilisateurs des modèles (rédacteurs, infographistes ou autres développeurs) pourront modifier. Le créateur peut inclure plusieurs types de régions de modèle dans un document.

Remarque :

Les modèles permettent de définir la conception d'une grande zone et de réutiliser des mises en page complètes. Si vous souhaitez réutiliser des éléments de conception individuels, tels que les informations sur le copyright d'un site ou un logo, créez des éléments de bibliothèque.

L'utilisation de modèles vous permet de mettre à jour plusieurs pages à la fois. Tout document créé à partir d'un modèle reste associé à ce modèle (sauf si vous décidez de détacher le document ultérieurement). Lorsque vous modifiez un modèle, la conception de tous les documents créés à partir de ce modèle est immédiatement mise à jour.

Remarque :

Les modèles de Dreamweaver sont différents des modèles de certains autres logiciels Adobe Creative Suite en ce sens que les sections de page des modèles Dreamweaver sont fixes (ou non modifiables) par défaut.

Voir aussi

« Gestion des actifs et des bibliothèques » à la page 105


T

ypes de régions de modèle

Lorsque vous enregistrez un document en tant que modèle, la plupart des régions d'un document sont verrouillées. En tant que créateur de modèles, vous devez insérer des régions ou paramètres modifiables dans un modèle pour définir les régions qui pourront être modifiées dans les documents basés sur ce modèle.

Lors de la création du modèle, vous pouvez apporter des modifications aux régions modifiables et aux régions verrouillées.

En revanche, dans le cas d'un document créé à partir d'un modèle, seules les régions modifiables peuvent subir des modifications ; les régions verrouillées ne peuvent pas être modifiées.

Il existe quatre types de régions de modèle :

Une région modifiable

Une région non verrouillée dans un document basé sur un modèle. Ce type de section peut être modifié par l'utilisateur. Le créateur du modèle peut définir toute région du modèle comme modifiable. Pour être fonctionnel, un modèle doit contenir au moins une région modifiable. S'il n'en contient pas, les pages créées à partir du modèle ne pourront pas être modifiées.

Une région répétée

Une section de la mise en forme du document qui est définie de façon à ce que l'utilisateur du modèle puisse ajouter ou supprimer des copies de la région répétée dans un document basé sur le modèle en fonction de ses besoins.

371

DREAMWEAVER CS3


372

Par exemple, vous pouvez définir une ligne de tableau à reproduire. En général, les sections répétées sont modifiables afin que l'utilisateur du modèle puisse modifier le contenu de l'élément répété, tandis que le créateur du modèle contrôle la conception elle-même.

Deux types de régions répétées peuvent être insérées dans un modèle : région répétée et tableau répété.

Une région facultative

Une section d'un modèle qui renferme un contenu, tel que du texte ou une image, pouvant apparaître ou non dans un document. Sur la page basée sur le modèle, l'utilisateur du modèle décide généralement si le contenu doit être affiché ou non.

Un attribut de balise modifiable

Permet de déverrouiller un attribut de balise dans un modèle afin que les utilisateurs contenues dans le document tout en permettant à l'utilisateur du modèle d'en définir l'alignement à gauche, à droite ou au centre.

Voir aussi

« Modification du contenu d'un document basé sur un modèle » à la page 396

« Création de régions modifiables » à la page 381

« Création de régions répétées » à la page 382

« Utilisation des régions facultatives » à la page 384

« Définition d'attributs de balise modifiables » à la page 387

Liens des modèles

Lorsque vous créez un fichier de modèle en enregistrant une page existante en tant que modèle, le nouveau modèle situé dans le dossier Templates, ainsi que tous les liens du fichier, sont mis à jour de façon à ce que leur chemin d'accès relatif au document soit correct. Par la suite, lorsque vous créez un nouveau document à partir de ce modèle et que vous enregistrez ce nouveau document, tous les liens relatifs au document sont de nouveau mis à jour pour qu'ils continuent de pointer vers les fichiers adéquats.

En revanche, si vous insérez un nouveau lien relatif à un document dans un fichier de modèle, il est facile de faire une faute de frappe lorsque vous tapez le chemin dans la zone de texte du lien de l'inspecteur Propriétés. Le chemin correct dans un fichier de modèle est le chemin d'accès au document lié à partir du dossier Templates, et non pas à partir du dossier du document basé sur le modèle. Assurez-vous que les chemins d'accès utilisés pour les liens sont corrects en utilisant l'icône de dossier ou l'icône Pointer vers un fichier dans l'inspecteur Propriétés lorsque vous créez des liens dans des modèles.

Préférence de mise à jour des liens dans Dreamweaver 8.01

Avant Dreamweaver 8 (c'est-à-dire, dans Dreamweaver version MX 2004 ou antérieure), Dreamweaver ne mettait pas à jour les liens vers des fichiers situés dans le dossier Templates. (Par exemple, si vous aviez un fichier intitulé main.css dans le dossier Templates, et si vous aviez écrit href=”main.css” en tant que lien dans le fichier du modèle, Dreamweaver ne mettait pas ce lien à jour lors de la création d'une page basée sur ce modèle.)

Certains utilisateurs ont tiré parti de la façon dont Dreamweaver traitait les liens vers les fichiers du dossier Templates et ont utilisé cette incohérence pour créer des liens qu'ils n'avaient pas l'intention de mettre à jour lors de la création de pages

à partir d'un modèle. Par exemple, supposons que vous utilisez Dreamweaver MX 2004, et que vous possédez un site comprenant différents dossiers pour différentes applications : Dreamweaver, Flash et Photoshop. Chaque dossier de produit contient une page index.html basée sur un modèle, et une version unique du fichier main.css au même niveau. Si le fichier du modèle contient le lien relatif au document href=”main.css” (un lien vers une version du fichier main.css située dans le dossier Templates), et que vous souhaitez que vos pages index.html basées sur le modèle contiennent également ce lien tel qu'il a été rédigé, vous pouvez créer des pages index.html basées sur le modèle sans avoir à vous préoccuper que

Dreamweaver mette à jour ces liens particuliers. Lorsque Dreamweaver MX 2004 crée des pages index.html basées sur le modèle, les liens href=”main.css” (non mis à jour) font référence aux fichiers main.css qui résident dans les dossiers

Dreamweaver, Flash et Photoshop, et non au fichier main.css qui réside dans le dossier Templates.

DREAMWEAVER CS3


373

Toutefois, dans Dreamweaver 8, ce comportement a été modifié de façon à ce que tous les liens relatifs à un document soient mis à jour lors de la création de pages basées sur un modèle, quel que soit l'emplacement apparent des fichiers liés. Dans ce scénario, Dreamweaver examine le lien dans le fichier du modèle (href="main.css") et crée dans la page basée sur le modèle un lien qui est relatif à l'emplacement du nouveau document . Par exemple, si vous créez un document basé sur un modèle un niveau au-dessus du dossier Templates, Dreamweaver rédigerait le lien dans le nouveau document de cette façon : href=”Templates/main.css”. Cette mise à jour Dreamweaver 8 a rompu des liens dans les pages créées par les concepteurs qui avaient tiré parti de l'ancienne pratique de Dreamweaver qui consistait à ne pas mettre à jour les liens vers des fichiers du dossier Templates.

Dreamweaver 8.01 a ajouté une préférence qui vous permet d'activer ou de désactiver le comportement de mise à jour des liens relatifs. (Cette préférence spéciale s'applique uniquement aux liens vers des fichiers du dossier Templates, mais pas aux liens en général.) Le comportement par défaut est de ne pas mettre à jour ces liens (comme c'était le cas dans

Dreamweaver version MX 2004 et antérieure), mais si vous souhaitez que Dreamweaver mette à jour ces types de liens lors de la création de pages basées sur un modèle, vous pouvez désélectionner la préférence. (Vous ne feriez cela que si, par exemple, vous aviez une page CSS (Cascading Style Sheets), main.css, dans votre dossier Templates, et que vous souhaitiez qu'un document basé sur un modèle contienne le lien href=”Templates/main.css”; mais cette pratique n'est pas recommandée car seuls les fichiers modèles de Dreamweaver (DWT) doivent résider dans le dossier Templates.)

Pour que Dreamweaver mette à jour des chemins relatifs au document vers des fichiers autres que des modèles situés dans le dossier Templates, sélectionnez la catégorie Modèles dans l'onglet Avancé de la boîte de dialogue Définition du site et désélectionnez l'option Ne pas corriger les chemins relatifs au document.

Pour plus d'informations, consultez la TechNote Dreamweaver sur le site Web de Adobe à l'adresse www.adobe.com/go/f55d8739_fr

Voir aussi

« Création d'un lien vers des documents en utilisant l'icône Pointer vers un fichier » à la page 271

« Chemins relatifs au document » à la page 268

Scripts de serveur dans un modèle et documents basés sur un modèle

Certains scripts de serveur sont insérés au tout début ou à la toute fin du document (avant la balise

<html>

ou après la balise

</html>

). Ces scripts requièrent un traitement spécial dans les modèles et les documents créés à partir de modèles. En règle générale, lorsque vous apportez des modifications au code de script situé avant la balise

<html>

ou après la balise

</html> dans un modèle, les modifications ne sont pas répercutées dans les documents créés à partir du modèle, ce qui peut entraîner des erreurs de serveur lorsqu'un script de serveur situé dans le corps principal du modèle dépend d'un script non mis à jour. Une alerte vous avertit lorsque vous tentez de modifier des scripts situés avant la balise

<html>

ou après la balise

</html>

dans un modèle.

Pour éviter ce problème, vous pouvez insérer le code suivant dans la section head

du modèle :



Lorsque vous insérez ce code dans un modèle, toutes les modifications apportées aux scripts situés avant la balise

<html> ou après la balise

</html>

sont répercutées dans les documents créés à partir du modèle. Toutefois, vous ne pourrez plus modifier ces scripts dans les documents créés à partir du modèle. Vous pouvez donc soit modifier les scripts dans le modèle, soit dans les documents créés à partir du modèle, mais pas dans les deux à la fois.

Paramètres de modèle

Les paramètres de modèle indiquent les valeurs qui permettent de personnaliser le contenu des documents basés sur le modèle. Ils permettent de définir des régions facultatives, des attributs de balise modifiables ou des valeurs à transmettre aux documents joints. Pour chaque paramètre, vous devez définir un nom, un type de donnée et une valeur par défaut. Vous devez attribuer un nom unique à chaque paramètre. En outre, les paramètres sont sensibles à la casse. Ils doivent posséder l'un des cinq types de données admis : texte, booléen, couleur, URL ou nombre.

DREAMWEAVER CS3


374

Les paramètres de modèle sont transmis au document sous forme de paramètres d'instance. En général, l'utilisateur d'un modèle est autorisé à modifier les valeurs par défaut du paramètre pour personnaliser le contenu du document basé sur le modèle. Dans d'autres cas, le créateur du modèle peut déterminer ce qui apparaît dans le document, selon la valeur d'une expression de modèle.

Remarque :

Un article utile à ce sujet est disponible en ligne à l'adresse http://www.adobe.com/devnet/dreamweaver/articles/template_parameters.html.

Voir aussi



Expressions de modèle

Les expressions de modèle sont des instructions qui calculent ou évaluent une valeur.

Vous pouvez utiliser une expression pour enregistrer une valeur et l'afficher dans un document. Vous pouvez notamment rédiger une expression simple se limitant à la valeur d'un paramètre, par exemple

@@(Param)@@

, ou bien une expression plus complexe permettant de calculer les valeurs qui feront alterner la couleur d'arrière-plan de la ligne d'un tableau, par exemple

@@((_index & 1) ? red : blue)@@

.

Vous pouvez aussi rédiger des expressions de modèle pour définir des conditions If et MultipleIf. Lorsqu'une instruction conditionnelle contient une expression, Dreamweaver évalue si celle-ci est true

ou false

. Si la condition est true, la région facultative s'affiche dans le document basé sur le modèle ; si elle est false, elle n'apparaît pas.

Vous pouvez définir des expressions en mode Code ou dans la boîte de dialogue de la région facultative que vous insérez.

En mode Code, il existe deux façons de définir des expressions de modèle : utilise le commentaire



ou

@@(votre expression)@@

. Lorsque vous insérez l'expression dans le code du modèle, un marqueur d'expression apparaît en mode Création. Lorsque vous appliquez le modèle, Dreamweaver évalue l'expression et affiche la valeur dans le document basé sur le modèle.

Voir aussi

« Langage d'expression de modèle » à la page 374

« La condition Multiple If dans le code du modèle » à la page 375

Langage d'expression de modèle

Le langage d'expression de modèle utilise la syntaxe et les règles de priorité de JavaScript, dont il constitue un sousensemble. Utilisez des opérateurs JavaScript pour rédiger des expressions, comme dans l'exemple suivant :

@@(firstName+lastName)@@

Les fonctions et opérateurs suivants sont pris en charge :

• constantes numériques, constantes de chaîne (syntaxe avec guillemets doubles uniquement), constantes booléennes

( true

ou false

)

• référence de variable (voir la liste des variables définies plus bas dans cette section)

• référence à un champ (opérateur « point »)

• opérateurs unaires : +, -, ~, !

• opérateurs binaires : +, -, *, /, %, &, |, ^, &&, ||, <, <=,

• opérateurs conditionnels : ?:

• parenthèses : ()

>>

DREAMWEAVER CS3


375

Les types de données suivants sont pris en charge : booléen, virgule flottante 64 bits IEEE, chaîne et objet. Les modèles undefined ». Ils ne permettent pas non plus de convertir implicitement les types scalaires en objet. Par conséquent, l'expression

"abc".length

provoquera une erreur au lieu de fournir la valeur 3.

Les seuls objets disponibles sont ceux qui sont définis par le modèle d'objet d'expression. Les variables suivantes sont définies :

_document

Contient les données de modèle de niveau document avec un champ pour chaque paramètre du modèle.

_repeat

Définie uniquement pour les expressions situées à l'intérieur d'une région répétée. Fournit des informations prédéfinies sur la région :

_index

L'index numérique (à partir de 0) de l'entrée en cours.

_numRows

Nombre total d'entrées dans la région répétée.

_isFirst

Vrai (true) si l'entrée en cours est la première entrée de la région répétée.

_isLast

Vrai (true) si l'entrée en cours est la première entrée de la région répétée.

_prevRecord

L'objet

_repeat

de l'entrée précédente. L'accès à cette propriété provoque une erreur si l'entrée est la première de la région.

_nextRecord

L'objet

_repeat

de l'entrée suivante. L'accès à cette propriété provoque une erreur si l'entrée est la dernière de la région.

_parent

Dans une région répétée imbriquée, donne l'objet _repeat correspondant à la région répétée extérieure. L'accès à cette propriété en dehors d'une région répétée imbriquée provoque une erreur.

Lors de l'évaluation de l'expression, tous les champs de l'objet _document et _repeat sont implicitement disponibles. Par exemple, vous pouvez saisir title

au lieu de

_document.title

pour accéder au paramètre de titre du document.

En cas de conflit de champ, les champs de l'objet _repeat ont la priorité sur les champs de l'objet _document. Vous n'avez donc pas à référencer explicitement _document ou _repeat. Toutefois, il se peut que _document soit nécessaire à l'intérieur d'une région répétée pour référencer les paramètres de document masqués par les paramètres de région répétée.

Dans le cas de régions répétées imbriquées, seuls les champs de la région répétée intérieure sont disponibles implicitement.

Les régions extérieures doivent être référencées explicitement à l'aide de _parent.

La condition Multiple If dans le code du modèle

Vous pouvez rédiger des expressions de modèle pour définir des conditions If et MultipleIf. Dans l'exemple suivant, un paramètre appelé "Dept" est créé, une valeur initiale est définie et une condition MultipleIf est utilisée pour déterminer le logo qui doit s'afficher.

Voici un exemple de code pouvant être inséré dans la section head

du modèle :



L'instruction conditionnelle suivante vérifie la valeur attribuée au paramètre

Dept

. Si la condition renvoie "true" ou la valeur correspondante, l'image adéquate s'affiche.





 <img src=".../sales.gif"> 

 <img src=".../support.gif"> 

 <img src=".../hr.gif"> 

 <img src=".../spacer.gif"> 



Lorsque vous créez un document basé sur un modèle, les paramètres du modèle lui sont automatiquement transmis.

L'utilisateur du modèle détermine l'image à afficher.

DREAMWEAVER CS3


376

Voir aussi

« Modification des propriétés d'un modèle » à la page 396

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

Reconnaissance des modèles en mode Création

En mode Création, les régions modifiables s'affichent dans la fenêtre de document entourées d'un cadre rectangulaire d'une couleur de surbrillance prédéfinie. Un petit onglet indiquant le nom de la région s'affiche dans le coin supérieur gauche de chaque région.

La barre de titre de la fenêtre de document permet d'identifier les fichiers de modèle. La barre de titre d'un fichier de modèle contient le mot <<Modèle>> et l'extension du nom du fichier est .dwt.

Reconnaissance des modèles en mode Code



Vous pouvez utiliser les préférences de couleur de code pour définir votre propre modèle de coloration afin de pouvoir distinguer facilement les régions du modèle lorsque vous affichez un document en mode Code.

Tous les éléments compris entre ces commentaires sont modifiables dans les documents créés à partir du modèle. Le code source HTML d'une région modifiable peut se présenter comme suit :

DREAMWEAVER CS3


377

<table width="75%" border="1" cellspacing="0" cellpadding="0">

<tr bgcolor="#333366">

<td>Name</td>

<td><font color="#FFFFFF">Address</font></td>

<td><font color="#FFFFFF">Telephone Number</font></td>

</tr>



<tr>

<td>Enter name</td>

<td>Enter Address</td>

<td>Enter Telephone</td>

</tr>


</table>

Remarque :

Lorsque vous modifiez le code du modèle en mode Code, prenez garde à ne pas modifier de balise de commentaire liée au modèle et utilisée par Dreamweaver.

Voir aussi


Reconnaissance d'un document basé sur un modèle en mode Création

En mode Création, dans un document basé sur un modèle, les régions modifiables s'affichent dans la fenêtre de document entourées d'un cadre rectangulaire d'une couleur de surbrillance prédéfinie. Un petit onglet indiquant le nom de la région s'affiche dans le coin supérieur gauche de chaque région.

Outre les régions modifiables, la page entière est entourée d'un cadre d'une couleur différente et un onglet dans le coin supérieur droit indique le nom du modèle sur lequel le document est basé. Ce cadre a pour fonction de vous rappeler que le document a été créé à partir d'un modèle et que vous ne pouvez rien changer en dehors des régions modifiables.

Voir aussi

« Définition des préférences de surbrillance pour des régions de modèle » à la page 400

DREAMWEAVER CS3


378

Reconnaissance d'un document basé sur un modèle en mode Code

En mode Code, les régions modifiables d'un document dérivé d'un modèle s'affichent dans une couleur différente du code dans les régions non modifiables. Vous pouvez modifier uniquement le code dans lesrégions ou les paramètres modifiables, mais vous ne pouvez pas effectuer de saisie dans les régions verrouillées.



Tous les éléments compris entre ces commentaires sont modifiables dans un document basé sur un modèle. Le code source

HTML d'une région modifiable peut se présenter comme suit :

<body bgcolor="#FFFFFF" leftmargin="0">


<tr bgcolor="#333366">

<td>Name</td>

<td><font color="#FFFFFF">Address</font></td>

<td><font color="#FFFFFF">Telephone Number</font></td>

</tr>



<tr>

<td>Enter name</td>

<td>Enter Address</td>

<td>Enter Telephone</td>

</tr>


</table>

</body>

La couleur par défaut du texte non modifiable est le gris. Vous pouvez associer des couleurs différentes aux régions modifiables et aux régions non modifiables à l'aide de la boîte de dialogue Préférences.

Voir aussi


Création d'un modèle Dreamweaver

A propos de la création de modèles Dreamweaver

Vous pouvez créer un modèle à partir d'un document existant (tel qu'un document HTML, Macromedia ColdFusion ou

Microsoft ASP) ou bien à partir d'un nouveau document.

Après avoir créé un modèle, vous pouvez insérer des régions de modèle et définir des préférences de modèle pour la couleur du code et la couleur de surbrillance des régions de modèle.

Si vous souhaitez enregistrer des informations supplémentaires sur un modèle (par exemple, le nom de la personne qui l'a créé, la date de sa dernière modification ou les raisons justifiant certaines décisions relatives à la mise en forme), vous pouvez créer un fichier Design Notes pour le modèle. Les documents basés sur un modèle n'héritent pas des Design Notes associées à ce dernier.

Remarque :

Les modèles de Adobe Dreamweaver sont différents des modèles de certains autres produits Adobe Creative Suite en ce sens que les sections de page des modèles Dreamweaver sont fixes (ou non modifiables) par défaut.

Vous trouverez un didacticiel consacré à la création de modèles à l'adresse www.adobe.com/go/vid0157_fr .

Vous trouverez un didacticiel consacré à l'utilisation de modèles à l'adresse www.adobe.com/go/vid0158_fr .

DREAMWEAVER CS3


379

Voir aussi

« Types de régions de modèle » à la page 371

« Définition de préférences de programmation pour les modèles » à la page 399

« Association de Design Notes à un fichier » à la page 100

Création d'un modèle à partir d'un document existant

Vous pouvez créer un modèle à partir d'un document existant.

1

Ouvrez le document que vous souhaitez enregistrer comme modèle.

2


• Choisissez Fichier > Enregistrer comme modèle.

• Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Modèles, puis choisissez Créer un modèle dans le menu déroulant.

Remarque :

Si vous n'avez pas sélectionné Ne plus afficher ce message, un message s'affiche vous indiquant que le document que vous enregistrez ne comporte aucune région modifiable. Cliquez sur OK pour enregistrer le document comme modèle, ou bien sur Annuler pour fermer la boîte de dialogue sans créer de modèle.

3

Sélectionnez le site dans lequel vous souhaitez enregistrer le modèle dans le menu déroulant Site, puis tapez un nom unique pour le modèle dans la zone Enregistrer sous.

4

Cliquez sur Enregistrer. Dreamweaver enregistre le fichier de modèle dans le dossier Templates du site, dans le dossier racine local du site, avec l'extension .dwt. Si ce dossier n'existe pas, Dreamweaver le crée automatiquement au moment de l'enregistrement du nouveau modèle.

Remarque :

Ne retirez pas vos modèles du dossier Templates et placez dans celui-ci uniquement des fichiers de modèles. Ne retirez pas non plus le dossier Templates de votre dossier racine local, car cela pourrait provoquer des erreurs dans les chemins d'accès des modèles.

Voir aussi

« Création d'un modèle vierge » à la page 68

Création d'un modèle à l'aide du panneau Actifs

1

Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie Modèles sur le côté gauche du panneau .

2

Cliquez sur le bouton Nouveau modèle en bas du panneau Actifs.

Un nouveau modèle, sans nom, est ajouté à la liste de modèles du panneau Actifs.

3

Le modèle étant toujours sélectionné, donnez-lui un nom, puis appuyez sur Entrée (Windows) ou Retour (Macintosh).

Dreamweaver crée un modèle vierge dans le panneau Actifs et dans le dossier Modèles.

A propos de la création de modèles pour les sites Contribute

A l'aide de Dreamweaver, vous pouvez créer des modèles afin d'aider les utilisateurs de Adobe ® Contribute® à créer de nouvelles pages, à définir l'aspect général du site et à mettre à jour la mise en forme de plusieurs pages à la fois.

Lorsque vous créez un modèle et que vous le chargez sur le serveur, il devient disponibles pour tous les utilisateurs se connectant à votre site, sauf si vous avez limité l'utilisation du modèle à certains rôles de Contribute. Si vous avez défini des restrictions sur l'utilisation des modèles, il peut s'avérer nécessaire d'ajouter chaque nouveau modèle à la liste des modèles accessibles par un utilisateur de Contribute (voir Administration de Contribute ).

Remarque :

Assurez-vous que le dossier racine de chaque site utilisateur de Contribute défini est le même que le dossier racine de votre définition de site dans Dreamweaver. Si un dossier racine de site utilisateur ne correspond pas au vôtre, cet utilisateur ne pourra pas utiliser les modèles.

DREAMWEAVER CS3


380

En complément des modèles Dreamweaver, vous pouvez créer des modèles non Dreamweaver à l'aide des outils d'administration de Contribute. Un modèle non-Dreamweaver est une page existante dont les utilisateurs de peuvent se servir pour créer de nouvelles pages. Cette page est similaire à un modèle Dreamweaver, à l'exception que les pages basées sur ce modèle ne se mettent pas à jour lorsque vous apportez des modifications à ce dernier. Les modèles non-

Dreamweaver ne peuvent pas contenir d'éléments de modèles Dreamweaver, tels que des régions modifiables ou verrouillées, des répétitions de régions ou autres régions facultatives.

Lorsqu'un utilisateur de Contribute crée un nouveau document au sein d'un site contenant des modèles Dreamweaver,

Contribute établit la liste des modèles disponibles (Dreamweaver et non-Dreamweaver) dans la boîte de dialogue Nouvelle page.

Pour inclure des pages qui utilisent des codages autres que Latin-1 dans votre site, vous devrez peut-être créer des modèles

(des modèles Dreamweaver ou non-Dreamweaver). Les utilisateurs de Contribute peuvent modifier des pages qui utilisent n'importe quel codage, mais lorsqu'un utilisateur Contribute créer une page vierge, il utilise le codage Latin-1. Pour créer une page utilisant un codage différent, l'utilisateur de Contribute peut créer une copie d'une page existante basée sur un encodage différent ou utiliser un modèle basé sur un encodage différent. Cela dit, si le site utilisant d'autres codages ne contient pas de pages ni de modèles, créez d'abord, dans Dreamweaver, une page ou un modèle utilisant cet autre codage.

Création d'un modèle pour un site Contribute

1


2

Sélectionnez un site et cliquez sur Modifier.

3

Dans la boîte de dialogue Définition du site, sélectionnez l'onglet Avancé.

4

Sélectionnez la catégorie Contribute dans la liste de gauche.

5

Si vous ne l'avez pas déjà fait, vous devez activer la compatibilité avec Contribute.

Activez l'option Activer la compatibilité avec Contribute, puis tapez l'URL de la racine du site.

6


7


8

Dans la catégorie Utilisateurs et rôles, sélectionnez un rôle, puis cliquez sur le bouton Modifier les paramètres de rôle.

9

Sélectionnez la catégorie Nouvelles pages, puis ajoutez les pages existantes à la liste située en dessous de l'option Créer une page en copiant une page de la liste ci-dessous.

DREAMWEAVER CS3


381

Pour plus d'informations, voir Administration de Contribute .

10

Cliquez à deux reprises sur OK pour fermer les boîtes de dialogue.

Voir aussi

« Préparation d'un site à utiliser avec Contribute » à la page 56

Création de régions modifiables

Insertion d'une région modifiable

Il est possible de créer des régions modifiables dans un modèle pour définir les zones qui pourront être modifiées dans les pages basées sur ce modèle. Avant d'insérer une région modifiable, enregistrez le document actif comme modèle.

Remarque :

Si vous insérez une région modifiable non pas dans un fichier de modèle mais dans un document, une alerte vous informe que le document sera automatiquement enregistré comme modèle.

Vous pouvez placer une région modifiable n'importe où sur votre page. Toutefois, tenez compte des informations suivantes si vous rendez possible la modification d'un tableau ou d'un élément à positionnement absolu :

•

Vous pouvez marquer un tableau entier ou une cellule de tableau individuelle comme modifiable, mais vous ne pouvez pas marquer plusieurs cellules d'un tableau comme une seule et même région modifiable. Si une balise <td> est sélectionnée, la région modifiable comprend la région située autour de la cellule. Dans le cas contraire, la région modifiable concerne uniquement le contenu de la cellule.

•

Les éléments PA et leur contenu sont deux éléments distincts. Rendre un élément PA modifiable permet de changer la position de l'élément PA et son contenu, alors que rendre le contenu d'un élément PA modifiable permet uniquement de modifier le contenu de l'élément PA, et non sa position.

1

Dans la fenêtre de document, procédez de l'une des manières suivantes pour sélectionner la région.

•

Sélectionnez le texte ou le contenu que vous souhaitez définir comme région modifiable.

•

Placez le point d'insertion à l'endroit où vous voulez insérer une région modifiable.

2

Procédez de l'une des manières suivantes pour insérer une région modifiable :

•

Choisissez Insertion > Objets de modèle > Région modifiable.

•

Cliquez du bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Modèles >

Nouvelle région modifiable.

•

Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Modèles, puis choisissez Région modifiable dans le menu déroulant.

3

Dans la zone Nom, tapez un nom unique pour la région. (vous ne pouvez pas utiliser le même nom pour plusieurs régions modifiables dans un modèle donné).

Remarque :

Ne tapez pas de caractères spéciaux dans la zone Nom.

4

Cliquez sur OK. La région modifiable est entourée d'un cadre rectangulaire dans le modèle, de la couleur de surbrillance définie dans les préférences. Dans le coin supérieur gauche de la région, un onglet indique le nom de la région. Si vous insérez une région modifiable vide dans le document, son nom s'affiche également dans le cadre qui la délimite.

Voir aussi


« Définition des préférences de surbrillance pour des régions de modèle » à la page 400

DREAMWEAVER CS3


382

Sélection de régions modifiables

Vous pouvez facilement identifier et sélectionner les différentes régions présentes dans un modèle et dans un document basé sur un modèle.

Sélection d'une région modifiable dans la fenêtre de document

❖

Cliquez sur l'onglet situé dans le coin supérieur gauche de la région modifiable.

Recherche d'une région modifiable et la sélectionner dans le document

❖

Choisissez Modifier > Modèles, puis le nom de la région dans la liste figurant en bas de ce sous-menu.

Remarque :

Les régions modifiables situées à l'intérieur d'une région répétée ne sont pas répertoriées dans le menu. Pour localiser ces régions, vous devez rechercher les cadres à onglet qui figurent dans la fenêtre de document.

La région modifiable est sélectionnée dans le document.

Suppression d'une région modifiable

Si vous avez marqué une région de votre fichier de modèle comme étant modifiable, vous pouvez la verrouiller (pour la rendre non modifiable dans les documents basés sur le modèle) à l'aide de la commande Supprimer le marqueur de modèle.

1

Cliquez sur l'onglet situé dans le coin supérieur gauche de la région modifiable pour la sélectionner.

2


•

Choisissez Modifier > Modèles > Supprimer le marqueur de modèle.

•


Modèles > Supprimer le marqueur de modèle.

La région n'est alors plus modifiable.

Modification du nom d'une région modifiable

Après avoir inséré une région modifiable, vous pouvez en modifier le nom.

1

Cliquez sur l'onglet situé dans le coin supérieur gauche de la région modifiable pour la sélectionner.

2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), tapez un nouveau nom.

3


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

A propos des régions répétées d'un modèle

Une région répétée est une section d'un modèle qui peut être reproduite de nombreuses fois dans les pages basées sur ce modèle. On utilise généralement les régions répétées dans le cas de tableaux. Toutefois, il est possible de définir des régions répétées pour d'autres éléments de page.

Les régions répétées permettent de définir la mise en page au moyen de la répétition de certains éléments (article de catalogue et description, par exemple) ou de lignes, par exemple dans le cas d'une liste d'éléments.

Il existe deux objets de modèle de région répétée : région répétée et tableau répété.

Voir aussi


DREAMWEAVER CS3


383

Création d'une région répétée dans un modèle

La répétition de régions permet de copier une région spécifique autant de fois que nécessaire dans un modèle. Une région répétée n'est pas nécessairement modifiable.

Pour rendre modifiable le contenu d'une région répétée (par exemple, pour autoriser un utilisateur à taper du texte dans une cellule de tableau dans un document basé sur un modèle), vous devez insérer une région modifiable dans la région répétée.

1


•

Sélectionnez le texte ou le contenu que vous souhaitez définir comme région répétée.

•

Placez le point d'insertion dans le document à l'endroit où vous souhaitez insérer la région répétée.

2


•

Choisissez Insertion > Objets de modèle > Région répétée.

•


Modèles > Nouvelle région répétée.

•

Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Modèles, puis choisissez Région répétée dans le menu déroulant.

3

Dans la zone Nom, tapez un nom unique pour la région de modèle. (Vous ne pouvez pas utiliser le même nom pour plusieurs régions répétées dans un modèle donné.)

Remarque :

N'insérez pas de caractères spéciaux dans un nom de région.

4

Cliquez sur OK.

Voir aussi

« Insertion d'une région modifiable » à la page 381

Insertion d'un tableau répété

Vous pouvez créer une région modifiable (sous forme de tableau) à lignes répétées à l'aide d'un tableau répété. Vous pouvez définir des attributs de tableau et indiquer les cellules du tableau pouvant être modifiées.

1

Placez le point d'insertion dans la fenêtre de document à l'endroit où vous souhaitez insérer le tableau répété.

2


• Choisissez Insertion > Objets de modèle > Tableau répété.

• Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Modèles, puis choisissez Tableau répété dans le menu déroulant.

3

Définissez les options suivantes, puis cliquez sur

Lignes

détermine le nombre de lignes du tableau.

Colonnes

Détermine le nombre de colonnes du tableau.





Lorsque vous n'affectez pas explicitement de valeur pour la marge intérieure et l'espacement des cellules, la plupart des navigateurs affichent le tableau comme si la marge intérieure des cellules était définie sur 1 et l'espacement entre les cellules défini sur 2. Pour être sûr que les navigateurs afficheront le tableau sans marge intérieure ni espacement, définissez Marge intérieure des cellules et Espacement entre les cellules sur 0.

Largeur

Indique la largeur du tableau en pixels ou en pourcentage de la largeur de fenêtre du navigateur.

Bordure


DREAMWEAVER CS3


384

Si vous n'affectez pas explicitement de valeur pour la bordure, la plupart des navigateurs affichent le tableau avec une bordure définie sur 1. Pour vous assurer que les navigateurs affichent le tableau sans bordure, définissez Bordure sur 0. Pour visualiser les contours des cellules et du tableau lorsque la bordure est définie sur 0, sélectionnez Affichage > Assistances visuelles > Bordures de tableau.

Répéter les lignes du tableau

Permet d'indiquer les lignes du tableau à inclure dans la région répétée.

Ligne de début

Permet d'indiquer le numéro de la première ligne à inclure dans la région répétée.

Ligne de fin

Permet d'indiquer le numéro de la première ligne à inclure dans la région répétée.

N om de région

Permet d'attribuer un nom unique à la région répétée.

Définition d'une couleur d'arrière-plan alternée dans un tableau répété

Après avoir inséré un tableau répété dans un modèle, vous pouvez le personnaliser en alternant la couleur d'arrière-plan des lignes du tableau.

1

Dans la fenêtre de document, sélectionnez une ligne du tableau répété.

2

Cliquez sur le bouton Afficher le mode code ou Afficher les modes Code et Création de la barre d'outils du document pour accéder au code de la ligne sélectionnée.

3

En mode Code, modifiez la balise

<tr>

pour qu'elle se présente de la façon suivante :

<tr bgcolor="@@( _index & 1 ? '#FFFFFF' : '#CCCCCC' )@@">

Vous pouvez modifier les valeurs hexadécimales #

FFFFFF

et #

CCCCCC

si vous souhaitez utiliser d'autres couleurs.

4

Enregistrez le modèle.

Exemple de code correspondant à un tableau dont la couleur d'arrière-plan des lignes est alternée :


<tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr>



<tr bgcolor="@@(_index & 1 ? '#FFFFFF' : '#CCCCCC')@@">

<td>  name 

</td>

<td>  phone 

</td>

<td>  email 

</td>

</tr>



</table>

Utilisation des régions facultatives

A propos des régions facultatives d'un modèle

Une région facultative est une région de modèle que les utilisateurs peuvent programmer pour qu'elle s'affiche ou reste masquée dans les documents basés sur ce modèle. Utilisez une région facultative si vous souhaitez définir les conditions suivant lesquelles certains éléments d'un document doivent s'afficher.

Lorsque vous insérez une région facultative, vous pouvez associer des valeurs spécifiques à un paramètre de modèle ou bien définir des instructions conditionnelles (instructions If...else) pour des régions de modèle. Vous pouvez utiliser des opérateurs simples (true/false) ou bien définir des instructions conditionnelles et des expressions plus complexes. Vous pouvez modifier la région facultative ultérieurement si nécessaire. Suivant les conditions définies, l'utilisateur du modèle peut modifier les paramètres dans les documents qu'il crée à partir du modèle et décider si la région facultative doit s'afficher ou non.

DREAMWEAVER CS3


385

Vous pouvez lier plusieurs régions facultatives à un paramètre nommé. Dans les documents basés sur un modèle, les régions liées entre elles forment un groupe qui s'affiche ou reste masqué. Vous pouvez par exemple associer à un article une image

Voir aussi



Insertion d'une région facultative

Une région facultative permet de décider si des éléments doivent s'afficher ou être masqués dans les documents basés sur un modèle. Il existe quatre types de régions facultatives :

•

Les régions facultatives non modifiables, qui permettent à l'utilisateur du modèle d'afficher ou de masquer des régions spécialement marquées sans lui permettre d'en modifier le contenu.

L'onglet d'une région facultative est précédé du mot if dans un modèle. Suivant la condition définie dans le modèle, l'utilisateur du modèle peut décider si la région doit apparaître dans les pages qu'il crée.

•

Les régions facultatives modifiables, qui permettent à l'utilisateur du modèle de décider si la région doit être affichée ou masquée et d'en modifier le contenu.

Par exemple, si la région facultative comprend une image ou du texte, l'utilisateur du modèle peut décider si le contenu doit s'afficher et peut y apporter des modifications si nécessaire. Une région modifiable est contrôlée par une instruction conditionnelle.

Voir aussi


Insertion d'une région facultative non modifiable

1

Dans la fenêtre de document, sélectionnez l'élément que vous souhaitez définir comme région facultative.

2


•

Choisissez Insertion > Objets de modèle > Région facultative.

•

Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le contenu sélectionné, puis choisissez Modèles > Nouvelle région facultative.

•

Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Modèles, puis choisissez Région facultative dans le menu déroulant.

3

Tapez un nom pour la région facultative, puis cliquez sur l'onglet Avancé si vous souhaitez définir des valeurs pour la région facultative, puis cliquez sur OK.

Insertion d'une région facultative modifiable

1

Dans la fenêtre de document, placez le point d'insertion là où vous voulez insérer la région facultative.

Il est impossible d'envelopper une sélection pour créer une région facultative modifiable. Insérez la région puis insérez le contenu dans la région.

2


• Choisissez Insertion > Objets de modèle > Région facultative modifiable.

• Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Modèles, puis choisissez Région facultative modifiable dans le menu déroulant.

3

Tapez un nom pour la région facultative, puis cliquez sur l'onglet Avancé si vous souhaitez définir des valeurs pour la région facultative, puis cliquez sur OK.

DREAMWEAVER CS3


386

Définition de valeurs pour une région facultative

Il est possible de modifier les paramètres d'une région facultative insérée dans un modèle. Par exemple, vous pouvez indiquer si le paramètre par défaut du contenu est d'être affiché ou non, de lier un paramètre à une région facultative existante ou de modifier une expression de modèle.

Créez des paramètres de modèle et définissez des instructions conditionnelles (instructions If...else) pour les régions de modèle. Vous pouvez utiliser des opérateurs simples (true/false) ou bien définir des instructions conditionnelles et des expressions plus complexes.

Les options de l'onglet Avancé vous permettent de lier plusieurs régions facultatives à un paramètre nommé. Dans les documents basés sur un modèle, les régions liées entre elles forment un groupe qui s'affiche ou reste masqué. Vous pouvez

Vous pouvez également utiliser l'onglet Avancé pour rédiger une expression de modèle permettant de calculer une valeur liée à la région facultative et d'afficher ou de masquer cette région selon la valeur obtenue.

1


•

En mode Création, cliquez sur l'onglet correspondant à la région facultative que vous souhaitez modifier.

•

En mode Création, placez le point d'insertion dans la région du modèle, puis, dans le sélecteur de balises situé en bas de la fenêtre de document, sélectionnez la balise de modèle

<mmtemplate:if>

.

•

En mode Code, cliquez sur la balise de commentaire de la région que vous souhaitez modifier.

2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur le bouton Modifier.

3

Dans l'onglet Base, tapez un nom pour le paramètre dans la zone Nom.

4

Sélectionnez Afficher par défaut si vous souhaitez que la région sélectionnée s'affiche dans le document. Désactivez-la pour définir la valeur par défaut sur false.

Remarque :

Pour attribuer une autre valeur au paramètre, recherchez le paramètre dans la section du document en mode

Code et modifiez la valeur.

5

(Facultatif) Cliquez sur l'onglet Avancé, puis définissez les options suivantes :

•

Si vous voulez lier des paramètres de régions facultatives, cliquez sur l'onglet Avancé, sélectionnez Utiliser le paramètre, puis choisissez dans le menu déroulant le paramètre auquel vous voulez lier le contenu sélectionné.

•

Si vous voulez rédiger une expression de modèle afin de contrôler l'affichage d'une région facultative, cliquez sur l'onglet

Avancé, sélectionnez Saisir une expression, puis tapez l'expression dans la zone.

Remarque :

Dreamweaver insère automatiquement des guillemets doubles avant et après le texte saisi.

6

Cliquez sur OK.

Lorsque vous utilisez l'objet de modèle Région facultative, Dreamweaver insère des commentaires de modèle dans le code.

Un paramètre de modèle est défini dans la section head

, comme dans l'exemple suivant :



Du code semblable à celui présenté ci-dessous s'affiche à l'emplacement de la région facultative :



<p><img src="/images/airfare_on.gif" width="85" height="22"> </p>



Vous pouvez accéder aux paramètres de modèle et les modifier dans le document basé sur ce modèle.

Voir aussi


« Expressions de modèle » à la page 374

DREAMWEAVER CS3


387

Définition d'attributs de balise modifiables

Définition des attributs de balise modifiables dans un modèle

Vous pouvez permettre aux utilisateurs d'un modèle de modifier des attributs de balise spécifiques dans les documents créés

à partir de ce modèle.

Vous pouvez par exemple appliquer une couleur d'arrière-plan au modèle tout en permettant aux utilisateurs du modèle d'appliquer une couleur d'arrière-plan différente aux pages qu'ils créent. Les utilisateurs peuvent mettre à jour uniquement les attributs que vous définissez comme étant modifiables.

Vous pouvez définir plusieurs attributs modifiables sur une page afin que les utilisateurs du modèle puissent modifier les attributs dans les documents basés sur ce modèle. Les types de données suivants sont pris en charge : texte, valeur booléenne

( true

/ false

), couleur et URL.

Lorsque vous créez un attribut de balise modifiable, un paramètre de modèle est inséré dans le code. L'attribut reçoit une valeur initiale dans le modèle. Tous les documents créés à partir du modèle héritent de ce paramètre. L'utilisateur du modèle peut alors modifier le paramètre dans le document basé sur le modèle.

Remarque :

Si vous créez un lien vers une feuille de style avec un attribut modifiable, alors les attributs de la feuille de style ne sont plus disponibles pour être affichés ou modifiés dans le fichier de modèle.

1

Dans la fenêtre de document, sélectionnez l'élément pour lequel vous souhaitez définir un attribut de balise modifiable.

2

Sélectionnez Modifier > Modèles > Rendre l'attribut modifiable.

3

Dans la zone Attribut, entrez un nom ou sélectionnez un attribut dans la boîte de dialogue Attributs de balise modifiables en procédant comme suit :

•

Si l'attribut que vous souhaitez rendre modifiable est répertorié dans le menu déroulant Attribut, sélectionnez-le.

•

Si l'attribut que vous souhaitez rendre modifiable n'est pas répertorié dans le menu déroulant Attribut, cliquez sur le bouton Ajouter, tapez le nom de l'attribut que vous souhaitez ajouter dans la boîte de dialogue qui s'affiche, puis cliquez sur OK.

4

Vérifiez que l'option Rendre l'attribut modifiable est activée.

5

Tapez un nom unique pour l'attribut dans la zone Etiquette.

Pour retrouver plus facilement un attribut de balise modifiable spécifique, faites en sorte que l'étiquette indique clairement l'élément et l'attribut concerné. Par exemple, vous pouvez attribuer l'étiquette logoSrc au code source modifiable d'une image ou bien l'étiquette bodyBgcolor à la couleur d'arrière-plan modifiable d'une balise body.

6

Dans le menu déroulant Type, sélectionnez le type de valeur autorisée pour cet attribut en définissant l'une des options suivantes :

•

Si vous souhaitez que l'utilisateur puisse taper du texte pour définir l'attribut, sélectionnez Texte. L'attribut align

peut par exemple être défini par du texte : l'utilisateur aura la possibilité de lui attribuer la valeur left , right ou center .

•

Pour insérer un lien vers un élément, tel qu'un chemin d'accès à un fichier vers une image, sélectionnez URL. Lorsque cette option est sélectionnée, le chemin utilisé dans un lien est automatiquement mis à jour. Lorsque l'utilisateur déplace l'image vers un nouveau dossier, la boîte de dialogue de mise à jour des liens s'affiche.

•

Si vous souhaitez que l'utilisateur puisse sélectionner une valeur au moyen du sélecteur de couleur, sélectionnez Couleur.

•

Si vous souhaitez que l'utilisateur d'un modèle puisse taper une valeur numérique pour mettre à jour un attribut (la hauteur ou la largeur d'une image par exemple), sélectionnez Nombre.

7

La zone Valeur par défaut indique la valeur de l'attribut de balise sélectionné dans le modèle. Tapez une autre valeur dans cette zone si vous souhaitez modifier la valeur initiale du paramètre dans les documents basés sur le modèle.

8

(Facultatif) Si vous souhaitez apporter des modifications à un autre attribut de la balise sélectionnée, sélectionnez-le, puis complétez-en la boîte de dialogue.

9

Cliquez sur OK.

DREAMWEAVER CS3


388

Voir aussi


Conversion d'un attribut de balise modifiable en attribut non modifiable

Une balise marquée comme modifiable peut être marquée comme non modifiable.

1

Dans le modèle, cliquez sur l'élément associé à l'attribut modifiable, ou bien sélectionnez la balise au moyen du sélecteur de balises.

2

Sélectionnez Modifier > Modèles > Rendre l'attribut modifiable.

3

Dans le menu déroulant Attributs, sélectionnez l'attribut que vous souhaitez affecter.

4

Désélectionnez Rendre l'attribut modifiable, puis cliquez sur OK.

5

Mettez à jour les documents basés sur le modèle.

Création d'un modèle imbriqué

A propos des modèles imbriqués

Un modèle imbriqué est un modèle dont la conception et les régions modifiables sont basées sur un autre modèle. Les modèles imbriqués sont utiles pour gérer le contenu de certaines pages d'un site qui ont de nombreux éléments de présentation en commun avec les autres pages du site mais qui présentent malgré tout quelques différences. Par exemple, vous pouvez créer un modèle de base définissant la conception de zones plus larges, qui sera utilisé par une grande partie des responsables du contenu du site, et créer un modèle imbriqué définissant de nouvelles régions modifiables dans les pages d'une section spécifique du site.

Les régions modifiables d'un modèle de base sont transmises aux modèles imbriqués et restent modifiables dans les pages créées à partir d'un modèle imbriqué, à moins que de nouvelles régions de modèle ne soient insérées dans ces régions.

Les modifications apportées à un modèle de base sont automatiquement répercutées dans les modèles basés sur ce modèle de base et dans tous les documents basés sur les modèles principal et imbriqué.

Dans l'exemple suivant, le modèle trioHome contient trois régions modifiables, nommées

Body

,

NavBar

et

Footer

:

DREAMWEAVER CS3


389

Pour créer un modèle imbriqué, nous avons créé un document à partir du modèle, puis nous avons enregistré ce document comme modèle que nous avons appelé TrioNested . Dans le modèle imbriqué, nous avons ajouté deux régions modifiables et du contenu dans la région nommée

Body

.

Lorsque vous insérez une nouvelle région modifiable dans une région modifiable transmise au modèle imbriqué, la couleur de surbrillance de la région modifiable devient orange. Le contenu que vous ajoutez en dehors de la région modifiable, par exemple l'image insérée dans editableColumn

, n'est plus modifiable dans les documents créés à partir du modèle imbriqué.

Qu'elles aient été ajoutées au modèle imbriqué ou qu'elles soient héritées du modèle de base, les régions modifiables entourées d'un cadre de surbrillance bleu restent modifiables dans les documents qui ont été créés à partir du modèle imbriqué. Les régions de modèle qui ne contiennent aucune région modifiable sont transmises sous la forme de régions modifiables aux documents basés sur le modèle.

Création d'un modèle imbriqué

Les modèles imbriqués permettent de créer des variantes du modèle de base. Vous pouvez créer une série de modèles imbriqués en chaîne pour obtenir une mise en forme chaque fois plus précise.

Par défaut, toutes les régions modifiables du modèle de base sont transmises, via le modèle imbriqué, aux documents basés sur ce modèle imbriqué. En d'autres termes, si vous définissez une région modifiable dans un modèle de base, puis que vous créez un modèle imbriqué, la région modifiable apparaîtra dans les documents basés sur le modèle imbriqué, à condition que vous n'ayez inséré aucune nouvelle région de modèle dans cette région du modèle imbriqué.

Remarque :

Vous pouvez insérer un marqueur de modèle à l'intérieur d'une région modifiable afin qu'elle ne soit pas modifiable dans les documents basés sur le modèle imbriqué. Ces régions ont un cadre orange au lieu de bleu.

1

Créez un document à partir du modèle sur lequel vous souhaitez baser le modèle imbriqué en procédant de l'une des façons suivantes :

•

Dans la catégorie Modèles du panneau Actifs, cliquez du bouton droit de la souris (Windows) ou en maintenant la touche

Ctrl enfoncée (Macintosh) sur le modèle à partir duquel vous souhaitez créer un document, puis choisissez Nouveau à partir d'un modèle dans le menu contextuel.

DREAMWEAVER CS3


390

•

Choisissez Fichier > Nouveau. Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Page issue d'un modèle, puis sélectionnez le site qui contient le modèle que vous souhaitez utiliser. Dans la liste Modèles, double-cliquez sur le modèle pour créer un document.

2

Sélectionnez Fichier > Enregistrer comme modèle pour enregistrer le nouveau document en tant que modèle imbriqué :

3

Tapez un nom dans la zone Enregistrer sous, puis cliquez sur OK.

Voir aussi

« Scripts de serveur dans un modèle et documents basés sur un modèle » à la page 373

Empêcher qu'une région modifiable d'un modèle imbriqué devienne non modifiable dans les documents basés sur ce modèle

Dans les modèles imbriqués, les régions modifiables qui seront transmises aux documents sont entourées d'un cadre bleu.

Vous pouvez insérer un marqueur de modèle à l'intérieur d'une région modifiable afin qu'elle ne soit pas modifiable dans les documents basés sur le modèle imbriqué. Ces régions ont un cadre orange au lieu de bleu.

1

En mode Code, localisez la région modifiable que vous souhaitez rendre non modifiable dans les documents basés sur ce modèle.

Les régions modifiables sont définies par les balises de commentaire du modèle.

2

Entourez la région modifiable (y compris les balises de commentaire) des marqueurs suivants

@@("")@@


Modification, mise à jour et suppression de modèles

A propos de la modification et de la mise à jour des modèles

Lorsque vous apportez des modifications à un modèle et que vous l'enregistrez, tous les documents basés sur ce modèle sont mis à jour. Vous pouvez également mettre à jour manuellement un document basé sur un modèle ou l'ensemble d'un site si nécessaire.

Remarque :

Pour modifier un modèle pour un site Contribute, vous devez utiliser Dreamweaver. Il est impossible de modifier des modèles dans Contribute.

Utilisez la catégorie Modèles du panneau Actifs pour gérer les modèles existants. Elle permet entre autres de renommer ou supprimer des fichiers de modèle.

Le panneau Actifs permet d'effectuer les tâches de gestion des modèles suivantes :

•

Création d'un modèle

•

Modification et mise à jour de modèles

•

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

Dreamweaver vérifie la syntaxe du modèle lorsque vous enregistrez un modèle, mais il est conseillé de vérifier la syntaxe du modèle manuellement à mesure que vous le modifiez.

Voir aussi


« Vérification de la syntaxe du modèle » à la page 399

« Application ou suppression d'un modèle depuis un document existant » à la page 394

DREAMWEAVER CS3


391

Modification du nom d'un modèle

1


2

Cliquez sur le nom du modèle pour le sélectionner.

3

Cliquez une nouvelle fois sur le nom de sorte que le texte soit modifiable, puis tapez le nouveau nom.

Cette méthode fonctionne de la même façon que celle utilisée dans l'Explorateur Windows ou dans le Finder (Macintosh).

Comme avec l'Explorateur Windows et le Finder, vous devez attendre un bref instant entre les deux clics. Ne double-cliquez pas sur le nom, car cela ouvrirait le modèle pour modification.

4

Cliquez sur une autre zone du panneau Actifs ou appuyez sur Entrée (Windows) ou Retour (Macintosh) pour appliquer la modification.

Une alerte vous demande si vous voulez mettre à jour les documents créés à partir de ce modèle.

5

Pour mettre à jour tous les documents du site créés à partir de ce modèle, cliquez sur mettre à jour si vous ne souhaitez pas mettre à jour les documents basés sur ce modèle.

Voir aussi



O

uverture d'un modèle à modifier

Vous pouvez ouvrir un fichier de modèle directement pour le modifier ou bien ouvrir un document basé sur un modèle, puis ouvrir le modèle joint pour le modifier.

Lorsque vous apportez des modifications à un modèle, Dreamweaver vous invite à mettre à jour les documents basés sur ce modèle.

Remarque :

Vous pouvez aussi manuellement mettre à jour les documents selon les modifications apportées au modèle, si nécessaire.

Voir aussi

« Vérification de la syntaxe du modèle » à la page 399

O uverture et modification d'un fichier de modèle

1


Le panneau Actifs contient tous les modèles disponibles pour votre site et affiche un aperçu du modèle sélectionné.

2

Dans la liste des modèles disponibles, procédez de l'une des manières suivantes :

•

Double-cliquez sur le nom du modèle à modifier.

•

Sélectionnez un modèle à modifier, puis cliquez sur le bouton Modifier en bas du panneau Actifs.

3

Modifiez le contenu du modèle.

Pour modifier les propriétés de page du modèle, choisissez Modifier > Propriétés de la page (les documents basés sur un modèle héritent des propriétés de page associées à ce dernier).

4

Enregistrez le modèle. Un message s'affiche, vous invitant à mettre à jour les pages basées sur le modèle.

5

Cliquez sur Mettre à jour pour mettre à jour tous les documents basés sur le modèle modifié ; cliquez sur Ne pas mettre

à jour si vous ne souhaitez pas mettre à jour les documents basés sur le modèle modifié.

Dreamweaver affiche un journal indiquant les fichiers mis à jour.

O uverture et modification du modèle joint au document en cours

1

Ouvrez le document basé sur le modèle dans la fenêtre de document.

DREAMWEAVER CS3


392

2


•

Choisissez Modifier > Modèles > Ouvrir le modèle joint.

•


Modèles > Ouvrir le modèle joint.

3

Modifiez le contenu du modèle.

Pour modifier les propriétés de page du modèle, choisissez Modifier > Propriétés de la page (les documents basés sur un modèle héritent des propriétés de page associées à ce dernier).

4

Enregistrez le modèle. Un message s'affiche, vous invitant à mettre à jour les pages basées sur le modèle.

5

Cliquez sur Mettre à jour pour mettre à jour tous les documents basés sur le modèle modifié ; cliquez sur Ne pas mettre

à jour si vous ne souhaitez pas mettre à jour les documents basés sur le modèle modifié.

Dreamweaver affiche un journal indiquant les fichiers mis à jour.

Mise à jour manuelle des documents basés sur des modèles

Lorsque vous modifiez un modèle, Dreamweaver vous invite à mettre à jour les documents basés sur ce modèle, mais vous pouvez mettre à jour manuellement le document en cours ou le site tout entier si nécessaire. La mise à jour manuelle des documents basés sur le modèle a le même effet qu'une nouvelle application du modèle.

Application des modifications apportées au modèle au document en cours

1

Ouvrez le document dans la fenêtre de document.

2

Choisissez Modifier > Modèles > Mettre à jour la page en cours.

Dreamweaver applique au document les modifications apportées au modèle.

Mise à jour du site entier ou de tous les documents utilisant le modèle spécifié

Vous pouvez mettre à jour toutes les pages du site ou bien uniquement les pages basées sur un modèle spécifique.

1

Choisissez Modifier > Modèles > Mettre à jour les pages.

2

Dans le menu Regarder dans, réalisez une des opérations suivantes :

•

Pour mettre à jour tous les fichiers du site sélectionné en fonction de leurs modèles correspondants, choisissez Site entier, puis sélectionnez le nom du site dans le menu déroulant adjacent.

•

Pour mettre à jour les fichiers basés sur un modèle spécifique, choisissez Fichiers utilisant, puis sélectionnez le nom du modèle dans le menu déroulant adjacent.

3

Dans la rubrique Mettre à jour, assurez-vous que l'option Modèles est activée.

4

Si vous ne souhaitez pas voir de journal des fichiers mis à jour par Dreamweaver, désactivez l'option Afficher le journal

; sinon, laissez-la activée.

5

Cliquez sur Démarrer pour mettre à jour les fichiers comme indiqué. Si vous avez sélectionné l'option Afficher le journal,

Dreamweaver affiche des informations sur les fichiers qu'il essaie de mettre à jour et précise si la mise à jour a réussi.

6

Cliquez sur Fermer.

Mise à jour des modèles pour un site Contribute

Les utilisateurs de Contribute ne peuvent pas modifier de modèles Dreamweaver. Vous pouvez cependant utiliser

Dreamweaver pour apporter des modifications dans un modèle de site Contribute.

Tenez compte des facteurs suivants lors de la mise à jour de modèles dans un site Contribute :

•

Contribute récupère les nouveaux modèles et les modèles modifiés depuis le site uniquement au lancement de

Contribute et lorsqu'un utilisateur de Contribute modifie ses informations de connexion. Si vous apportez des modifications à un modèle lorsqu'un utilisateur de Contribute modifie un fichier basé sur ce modèle, l'utilisateur ne peut pas visualiser vos modifications tant qu'il ne relance pas Contribute.

DREAMWEAVER CS3


393

•

Si vous supprimez une région modifiable d'un modèle lorsqu'un utilisateur de Contribute est en train de modifier une page basée sur ce modèle, le contenu de cette région modifiable peut troubler cet utilisateur.

Pour mettre à jour un modèle dans un site Contribute, exécutez les étapes suivantes.

1

Ouvrez le modèle Contribute dansDreamweaver, modifiez le formulaire et enregistrez le document. Pour obtenir des

instructions, voir « Ouverture d'un modèle à modifier » à la page 391.

2

Demandez à tous les utilisateurs Contribute qui travaillent sur le site de redémarrer Contribute.

Suppression d'un fichier de modèle

1


2

Cliquez sur le nom du modèle pour le sélectionner.

3

Cliquez sur le bouton Supprimer en bas du panneau, puis confirmez l'opération.

Important :

Une fois que vous avez supprimé un fichier de modèle, vous ne pouvez pas le récupérer. Le fichier de modèle est supprimé de votre site.

Les documents créés à partir de ce modèle ne sont pas détachés du modèle. Ils conservent la structure et les régions modifiables dont le fichier de modèle disposait avant d'être supprimé. Vous pouvez convertir un document de ce type en fichier HTML normal sans régions modifiables ou verrouillées .

Voir aussi

« Détachement d'un document d'un modèle » à la page 395



Exportation et importation du contenu d'un modèle

A propos du contenu XML d'un modèle

Vous pouvez imaginer qu'un document basé sur un modèle contient des données représentées par des paires nom/valeur.

Chaque paire se compose du nom d'une région modifiable et du contenu de cette région.

Vous pouvez exporter les paires nom/valeur dans un fichier XML pour que vous puissiez utiliser les données du document en dehors de Dreamweaver (par exemple dans un éditeur XML, dans un éditeur de texte ou même dans une application de base de données). Inversement, si vous disposez d'un document XML structuré de manière appropriée, vous pouvez importer ses données dans un document basé sur un modèle Dreamweaver.

Exportation des régions modifiables d'un document au format XML

1

Ouvrez un document basé sur un modèle qui contient des régions modifiables.

2

Choisissez Fichier > Exporter > Données du modèle en XML.

3

Activez l'une des options Notation :

•

Si le modèle contient des régions répétées ou des paramètres de modèle, choisissez Utiliser les balises XML standard de

Dreamweaver.

•

Si le modèle ne contient ni région répétée ni paramètre de modèle, choisissez Utiliser noms de régions modifiables comme balises XML.

4

Cliquez sur OK.

5

Dans la boîte de dialogue qui s'affiche, sélectionnez un dossier, nommez le fichier XML, puis cliquez sur le bouton

Enregistrer.

DREAMWEAVER CS3


394

Un fichier XML est généré : il contient le matériau des paramètres et des régions modifiables du document (y compris le matériau des régions facultatives et des régions modifiables situées à l'intérieur de régions répétées). Le fichier XML comporte le nom du modèle original, ainsi que le nom et le contenu de chaque région de modèle.

Remarque :

Le contenu des régions non modifiables n'est pas exporté vers le fichier XML.

Importation de contenu XML

1

Choisissez Fichier > Importer > XML dans le modèle.

2

Sélectionnez le fichier XML et cliquez sur Ouvrir.

Dreamweaver crée un nouveau document basé sur le modèle spécifié dans le fichier XML. Il remplit le contenu de chaque région modifiable de ce document à l'aide des données du fichier XML. Le document résultant apparaît dans une nouvelle fenêtre de document.

Si votre fichier XML n'est pas configuré exactement de la façon prévue par Dreamweaver, vous ne pourrez peut-être pas importer vos données. Une solution à ce problème consiste à exporter un fichier XML fictif de Dreamweaver, de façon à avoir un fichier XML ayant exactement la bonne structure, puis à copier les données de votre fichier XML original dans le fichier XML exporté. Vous obtenez ainsi un fichier XML ayant une structure correcte et contenant les données appropriées, prêtes à être importées.

Exportation d'un site sans marqueur de modèle

Vous pouvez exporter des documents basés sur un modèle d'un site vers un autre site sans inclure le marqueur de modèle.

1

Choisissez Modifier > Modèles > Exporter sans marqueur.

2

Dans la zone Dossier, tapez le chemin du dossier vers lequel vous souhaitez exporter le fichier, ou bien cliquez sur

Parcourir et sélectionnez le dossier.

Remarque :

Sélectionnez un dossier situé à l'extérieur du site courant.

3

Pour enregistrer une version XML des documents basés sur un modèle que vous exportez, sélectionnez Conserver les fichiers contenant les données du modèle.

4

Pour appliquer les modifications aux fichiers précédemment exportés, sélectionnez Extraire les fichiers modifiés uniquement.

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

Application d'un modèle à un document existant

Lorsque vous appliquez un modèle à un document contenant déjà des éléments, Dreamweaver tente de faire concorder le contenu existant avec une région du modèle. Si le modèle que vous appliquez au document est une version révisée de l'un des modèles existants, il est probable que les noms concordent.

Si vous appliquez un modèle à un document auquel aucun modèle n'a encore été appliqué, les régions modifiables ne peuvent pas être comparées et un cas de non-concordance se présente. Dreamweaver les localise et vous pouvez alors sélectionner la région ou les régions vers lesquelles le contenu de la page courante doit être transféré, ou bien décider de supprimer le contenu non cohérent.

Vous pouvez appliquer un modèle à un document existant à l'aide du panneau Actifs ou à partir de la fenêtre de document.

Vous pouvez annuler l'application d'un modèle si nécessaire.

Important :

Lorsque vous appliquez un modèle à un document existant, le modèle remplace le contenu du document par le contenu passe-partout du modèle. Sauvegardez toujours le contenu d'une page avant de lui appliquer un modèle.

DREAMWEAVER CS3


395

Application d'un modèle à un document existant à l'aide du panneau Actifs

1

Ouvrez le document auquel vous souhaitez appliquer le modèle.

2


3


• Faites glisser le modèle que vous souhaitez appliquer du panneau Actifs dans la fenêtre de document.

• Sélectionnez le modèle que vous souhaitez appliquer, puis cliquez sur le bouton Appliquer en bas du panneau Actifs.

Si le document comporte des éléments qui ne peuvent pas être automatiquement attribués à une région de modèle, la boîte de dialogue Noms de région incohérents s'affiche.

4

Sélectionnez une destination pour le contenu à l'aide du menu Déplacer le contenu vers la nouvelle région en sélectionnant l'une des options suivantes :

• Sélectionnez une région du nouveau modèle vers laquelle vous souhaitez déplacer le contenu existant.

• Sélectionnez Nulle part pour supprimer le contenu du document.

5

Cliquez sur Utiliser pour tout pour déplacer l'ensemble des éléments de contenu non concordants vers la région sélectionnée.

6

Cliquez sur OK pour appliquer le modèle ou sur Annuler pour annuler l'application du modèle au document.

Important :


Application d'un modèle à un document existant à partir de la fenêtre de document

1

Ouvrez le document auquel vous souhaitez appliquer le modèle.

2

Choisissez Modifier > Modèles > Appliquer le modèle à la page.

La boîte de dialogue Sélectionner le modèle s'affiche.

3

Sélectionnez un modèle dans la liste, puis cliquez sur le bouton Sélectionner.

Si le document comporte des éléments qui ne peuvent pas être automatiquement attribués à une région de modèle, la boîte de dialogue Noms de région incohérents s'affiche.

4

Sélectionnez une destination pour le contenu à l'aide du menu Déplacer le contenu vers la nouvelle région en sélectionnant l'une des options suivantes :

•

Sélectionnez une région du nouveau modèle vers laquelle vous souhaitez déplacer le contenu existant.

•

Sélectionnez Nulle part pour supprimer le contenu du document.

5

Cliquez sur Utiliser pour tout pour déplacer l'ensemble des éléments de contenu non concordants vers la région sélectionnée.

6

Cliquez sur OK pour appliquer le modèle ou sur Annuler pour annuler l'application du modèle au document.

Important :


Annulation des modifications apportées à un modèle

❖

Choisissez Edition > Annuler l'application du modèle.

Le document retrouve l'état dans lequel il se trouvait avant l'application du modèle.

Détachement d'un document d'un modèle

Pour apporter des modifications aux régions verrouillées d'un document basé sur un modèle, vous devez au préalable détacher le document du modèle. Lorsqu'un document est détaché, toutes les régions qui le composent deviennent modifiables.

1

Ouvrez le document basé sur un modèle que vous souhaitez détacher.

2

Choisissez Modifier > Modèles > Détacher du modèle .

DREAMWEAVER CS3


396

Le document est détaché du modèle et tout le code du modèle est supprimé.

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

A propos de la modification du contenu d'un document basé sur un modèle

Les modèles de Dreamweaver spécifient les régions qui sont verrouillées (non modifiables) et les autres qui sont modifiables dans les documents basés sur ces modèles.

Sur les pages basées sur un modèle, les utilisateurs peuvent modifier uniquement le contenu des régions modifiables. Vous pouvez facilement identifier et sélectionner les régions modifiables afin d'en modifier le contenu. Les utilisateurs du modèle ne peuvent pas modifier le contenu des régions verrouillées.

Remarque :

Si vous essayez de modifier une région verrouillée dans un document basé sur un modèle lorsque la surbrillance est désactivée, le pointeur de la souris se transforme pour indiquer que vous ne pouvez pas cliquer dans une région verrouillée.

Les utilisateurs du modèle peuvent également modifier les propriétés et les entrées d'une région répétée dans les documents basés sur ce modèle.

Voir aussi

« Création d'une page basée sur un modèle existant » à la page 70

« A propos des modèles Dreamweaver » à la page 371

« Sélection de régions modifiables » à la page 382

Modification des propriétés d'un modèle

Lorsque l'auteur crée des paramètres dans un modèle, les documents basés sur ce modèle héritent automatiquement des paramètres et de leur valeur initiale. L'utilisateur du modèle peut mettre à jour les attributs de balise modifiables et d'autres paramètres du modèle (ceux d'une région facultative, par exemple).

Voir aussi

« Paramètres de modèle » à la page 373



Modification d'un attribut de balise modifiable

1

Ouvrez le document basé sur un modèle.

2

Choisissez Modifier > Propriétés du modèle.

La boîte de dialogue Propriétés du modèle s'ouvre et affiche la liste des propriétés disponibles. Elle indique les régions facultatives et les attributs de balise modifiables.

3

Sélectionnez la propriété dans la liste Nom.

L'étiquette et la valeur de la propriété sélectionnée s'affichent dans la partie inférieure de la boîte de dialogue.

4

Si vous souhaitez modifier la valeur de la propriété dans le document courant, saisissez une autre valeur dans le champ situé à droite de l'étiquette de la propriété.

Remarque :

Le nom du champ et les valeurs modifiables sont définis dans le modèle. Les attributs non répertoriés dans la liste

Nom ne peuvent pas être modifiés dans le document basé sur un modèle.

DREAMWEAVER CS3


397

5

Sélectionnez Autoriser les modèles imbriqués pour contrôler ceci si vous souhaitez que la propriété modifiable soit transmise aux documents basés sur le modèle imbriqué.

Modification des paramètres de modèle des régions facultatives

1


2

Choisissez Modifier > Propriétés du modèle.

La boîte de dialogue Propriétés du modèle s'ouvre et affiche la liste des propriétés disponibles. Elle indique les régions facultatives et les attributs de balise modifiables.

3

Sélectionnez une propriété dans la liste Nom.

L'étiquette et la valeur de la propriété sélectionnée s'affichent dans la boîte de dialogue.

4

Sélectionnez Afficher si vous souhaitez que la région facultative apparaisse dans le document, ou bien désélectionnez cette option si vous souhaitez qu'elle soit masquée.

Remarque :

Le nom du champ et la valeur par défaut sont définis dans le modèle.

5

Sélectionnez Autoriser les modèles imbriqués pour contrôler ceci si vous souhaitez que la propriété modifiable soit transmise aux documents basés sur le modèle imbriqué.

Ajout, suppression et modification de l'ordre des entrées dans une région répétée

Vous pouvez ajouter ou supprimer des entrées ou bien modifier l'ordre des entrées dans une région répétée. Lorsque vous ajoutez une entrée de région répétée, l'ensemble de la région répétée est reproduit dans le document. La région répétée doit contenir une région modifiable dans le modèle original pour que l'utilisateur puisse en modifier le contenu.

Voir aussi

« Création de régions répétées » à la page 382

Ajout, suppression ou modification de l'ordre dans une région répétée

1


2

Placez le point d'insertion sur la région répétée pour la sélectionner.

3


•

Cliquez sur le bouton plus (+) pour ajouter une entrée de région répétée sous l'entrée sélectionnée.

•

Cliquez sur le bouton moins (–) pour supprimer l'entrée de région répétée sélectionnée.

•

Cliquez sur le bouton Flèche bas pour déplacer l'entrée sélectionnée d'un niveau vers le bas.

•

Cliquez sur le bouton Flèche haut pour déplacer l'entrée sélectionnée d'un niveau vers le haut.

Remarque :

Vous pouvez également choisir Modifier > Modèles, puis activer l'une des options d'entrée répétée près du bas du menu contextuel. Celui-ci permet d'insérer une nouvelle entrée de région répétée et de modifier l'emplacement de l'entrée sélectionnée.

Couper, copier et supprimer des entrées

1


2

Placez le point d'insertion sur la région répétée pour la sélectionner.

DREAMWEAVER CS3


398

3


•

Pour couper une entrée répétée, choisissez Edition > Entrées répétées > Couper l'entrée répétée.

•

Pour copier une entrée répétée, choisissez Edition > Entrées répétées > Couper l'entrée répétée.

•

Pour supprimer une entrée répétée, choisissez Edition > Entrées répétées > Supprimer l'entrée répétée.

•

Pour coller une entrée répétée, choisissez Edition > Coller.

Remarque :

Lorsque vous collez une entrée de région répétée, celle-ci s'insère dans le document sans écraser d'entrée existante.

Syntaxe des modèles

Règles générales de syntaxe

Dreamweaver fait appel à des balises de commentaire HTML pour définir des régions dans les modèles et dans les documents basés sur un modèle, de telle façon que les documents basés sur un modèle restent des fichiers HTML valides.

Lorsque vous insérez un objet de modèle, des balises de modèle sont insérées dans le code.

Les règles de syntaxe générale sont les suivantes :

•

Là où il y a un espace, vous pouvez en ajouter autant que vous voulez (sous la forme d'espaces, de tabulations, de sauts de ligne). L'espace blanc est obligatoire, sauf au tout début ou à la toute fin d'un commentaire.

•

Les attributs peuvent être saisis dans n'importe quel ordre. Par exemple, dans le cas de TemplateParam, vous pouvez spécifier le type avant le nom.

•

Les noms des commentaires et des attributs sont sensibles à la casse.

•

Tous les attributs doivent être entre guillemets. Il est possible d'utiliser des guillemets simples ou doubles.

Balises de modèle

Dreamweaver utilise les balises de modèle suivantes :


































 (equivalent to @@...@@)





Balises d'instance

Dreamweaver utilise les balises d'instance suivantes :

DREAMWEAVER CS3


399


















Vérification de la syntaxe du modèle

Dreamweaver vérifie la syntaxe du modèle lorsque vous l'enregistrez, mais vous pouvez la vérifier manuellement avant d'enregistrer le modèle. Par exemple, si vous ajoutez un paramètre ou une expression de modèle en mode Code, vous pouvez vérifier que le code suit la syntaxe correcte.

1

Ouvrez le document que vous souhaitez vérifier dans la fenêtre de document.

2

Choisissez Modifier > Modèles > Vérifier la syntaxe du modèle.

Un message d'erreur s'affiche lorsque cette syntaxe est incorrecte. Le message décrit l'erreur et indique la ligne du code à l'origine de cette erreur.

Voir aussi

« Reconnaissance des modèles et des documents basés sur un modèle » à la page 376

« Expressions de modèle » à la page 374

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

Personnalisation des préférences de coloration de code d'un modèle

Utilisez ces préférences pour définir la couleur des caractères, la couleur de l'arrière-plan et les attributs de style du texte affiché en mode Code. Vous pouvez définir votre propre modèle de couleur afin de pouvoir distinguer facilement les régions de modèle lorsque vous affichez un document en mode Code.

1


2

Sélectionnez la catégorie Coloration du code dans la liste de gauche.

3

Sélectionnez HTML dans la liste Type de document, puis cliquez sur le bouton Modifier le modèle de coloration.

4

Dans la liste Styles pour, sélectionnez Balises de modèle.

5

Définissez la couleur des caractères, la couleur de l'arrière-plan et les attributs de style du texte affiché en mode Code.

Pour ce faire, procédez de la manière suivante :

• Tapez dans la zone Couleur de texte la valeur hexadécimale de la couleur que vous souhaitez appliquer au texte sélectionné, ou bien utilisez le sélecteur de couleur pour sélectionner cette couleur. Procédez de la même manière pour le champ Couleur d'arrière-plan si vous souhaitez appliquer une couleur à l'arrière-plan du texte sélectionné, ou bien modifier la couleur courante.

• Si vous souhaitez appliquer un attribut de style au code sélectionné, utilisez les boutons B (gras), I (italique) ou U

(souligné) pour appliquer le format souhaité.

6

Cliquez sur OK.

Remarque :

Si vous souhaitez effectuer des modifications globales, vous pouvez modifier le fichier source dans lequel vos préférences sont enregistrées. Ce fichier se trouve dans C:\Documents and Settings\%nom d'utilisateur%\Application

Data\Adobe\Dreamweaver 9\Configuration\CodeColoring\Colors.xml (Windows).

DREAMWEAVER CS3


400

Définition des préférences de surbrillance pour des régions de modèle

Les préférences de surbrillance Dreamweaver permettent de personnaliser les couleurs de surbrillance appliquées aux cadres entourant les régions modifiables et les régions verrouillées d'un modèle en mode Création. La couleur de surbrillance des régions modifiables est utilisée dans le modèle, mais aussi dans les documents basés sur ce modèle.

Voir aussi

« Reconnaissance d'un document basé sur un modèle en mode Création » à la page 377

« Reconnaissance des modèles en mode Création » à la page 376

Modification des couleurs de surbrillance de modèle

1


2

Sélectionnez la catégorie Surbrillance dans la liste de gauche.

3

Cliquez dans la case de couleur Régions modifiables, Régions modifiables imbriquées ou Régions verrouillées, puis sélectionnez une couleur de surbrillance à l'aide de la pipette (ou tapez la valeur hexadécimale correspondant à la couleur de surbrillance dans la zone).

Pour plus d'informations sur l'utilisation du sélecteur de couleur, consultez la section « Utilisation du sélecteur de couleur »

à la page 214.

4

(Facultatif) Répétez cette opération pour les autres types de région de modèle, autant de fois que nécessaire.

5

Cochez la case Afficher pour activer l'affichage des couleurs dans la fenêtre de document ou décochez-la pour désactiver l'affichage.

Remarque :

La case de couleur Régions modifiables imbriquées ne s'accompagne pas de l'option Afficher : l'affichage des régions imbriquées est en effet contrôlé par l'option Régions modifiables.

6

Cliquez sur OK.

Affichage des couleurs de surbrillance dans la fenêtre de document

❖


Les couleurs de surbrillance apparaissent dans la fenêtre de document uniquement lorsque l'option Affichage > Assistances visuelles > Eléments invisibles est activée et que les options appropriées sont activées dans les préférences de surbrillance.

Remarque :

Si des éléments invisibles apparaissent mais pas les couleurs de surbrillance, choisissez Edition > Préférences

(Windows) ou Dreamweaver > Préférences (Macintosh), puis sélectionnez la catégorie Surbrillance. Vérifiez que l'option

Afficher est activée près de la couleur de surbrillance appropriée. Vérifiez également que la couleur souhaitée est contrastée par rapport à la couleur d'arrière-plan de votre page.

Chapitre 15 : Affichage de données XML

Adobe® Dreamweaver® CS3 comprend des outils permettant d'afficher des données XML (Extensible Markup Language) dans votre page Web et de créer des pages qui exécutent des transformations XSLT (Extensible Stylesheet Language

Transformations) sur le client ou sur le serveur.

A propos de XML et de XSL

T

Utilisation de XML et XSL dans des pages Web

Le langage XML (Extensible Markup Language) permet de structurer les informations. Tout comme HTML, XML utilise des balises pour structurer les informations, mais les balises XML ne sont pas prédéfinies comme c'est le cas des balises

HTML. En effet, XML permet de créer des balises sur mesure, adaptées à la structure des données (schéma). Les balises sont imbriquées dans d'autres balises afin de créer un schéma de balises parentes et enfants. Comme la plupart des balises

HTML, toutes les balises d’un schéma XML comprennent une balise d’ouverture et une balise de fermeture.

L'exemple suivant illustre la structure de base d'un fichier XML :

<?xml version=“1.0”>

<mybooks>

<book bookid=“1”>

<pubdate>03/01/2004</pubdate>

<title>Displaying XML Data with Adobe Dreamweaver</title>

<author>Charles Brown</author>

</book>

<book bookid=“2”>

<pubdate>04/08/2004</pubdate>

<title>Understanding XML</title>

<author>John Thompson</author>

</book>

</mybooks>

Dans cet exemple, chaque balise parente

<book>

contient trois balises enfants

<pubdate>

,

<title>

et

<author>

. Toutefois, chaque balise

<book>

est elle-même un enfant de la balise

<mybooks>

, qui se trouve à un niveau hiérarchique plus élevé du schéma. Vous pouvez nommer et structurer les balises XML à votre guise, sous réserve qu'elles soient imbriquées en conséquence et qu'une balise de fermeture corresponde à chaque balise d'ouverture.

Les documents XML ne contiennent pas d’instructions de mise en forme, ce sont de simples conteneurs d’informations structurées. Après avoir créé un schéma XML, vous pouvez utiliser le langage XSL (Extensible Stylesheet Language) pour afficher les informations. Tout comme les feuilles de style en cascade (CSS) permettent de formater le contenu HTML, le langage XSL permet de formater les données XML. Vous pouvez définir des styles, des éléments de page, la mise en page, etc. dans un fichier XSL, puis associer celui-ci à un fichier XML. Lorsqu'un utilisateur affiche les données XML dans un navigateur, elles sont mises en forme conformément aux éléments définis dans le fichier XSL. Le contenu (les données

XML) et la présentation (définie par le fichier XSL) sont entièrement séparés, ce qui offre un meilleur contrôle sur la façon dont les informations sont affichées dans une page Web. En bref, le langage XSL constitue une technologie de présentation pour les données XML, la sortie principale correspondant à une page HTML.

Le langage XSLT (Extensible Stylesheet Language Transformations) est un sous-ensemble du langage XSL qui permet lisibles et mises en forme au format HTML. Vous pouvez utiliser Dreamweaver pour créer des pages XSLT permettant d'effectuer des transformations XSL dans un serveur d'application ou un navigateur. Lorsqu'une transformation XSL est effectuée sur le serveur, ce dernier prend en charge toutes les opérations de transformation des données XML et XSL et de leur affichage dans la page. Lorsque cette transformation a lieu côté client, c’est le navigateur (par exemple, Internet

Explorer) qui se charge de ces opérations.

401

DREAMWEAVER CS3


402

La méthode que vous adoptez (transformations côté serveur ou client) dépend du résultat final que vous souhaitez obtenir, des technologies à votre disposition, du niveau d'accès aux fichiers XML source dont vous disposez et d'autres facteurs. Les deux méthodes présentent des avantages et des inconvénients. Les transformations côté serveur, par exemple, gèrent tous les navigateurs, alors que les transformations côté client prennent uniquement en charge les navigateurs modernes (Internet

Explorer 6, Netscape 8, Mozilla 1.8 et Firefox 1.0.2). Les transformations côté serveur vous permettent d'afficher les données XML dynamiquement à partir de votre propre serveur ou de n'importe où sur le Web. En revanche, les données

XML utilisées par les transformations côté client doivent impérativement être hébergées localement sur votre propre serveur Web. Enfin, les transformations côté serveur requièrent le déploiement des pages sur un serveur d'application configuré, tandis que les transformations côté client exigent uniquement l'accès à un serveur Web.

Vous trouverez un didacticiel consacré au langage XML à l'adresse www.adobe.com/go/vid0165_fr .

T

ransformations XSL côté serveur

Dreamweaver propose des méthodes de création de pages XSLT permettant d'effectuer des transformations XSL côté serveur. Lorsqu'un serveur d'application effectue la transformation XLS, le fichier contenant les données XML peut résider sur votre propre serveur ou n'importe où sur le Web. Par ailleurs, tout navigateur peut afficher les données transformées.

En revanche, le déploiement de pages pour les transformations côté serveur est plus complexe et nécessite un accès à un serveur d'application.

Lorsque vous faites appel à des transformations XSL côté serveur, vous pouvez utiliser Dreamweaver pour créer des pages

XSLT générant des documents HTML complets (des pages XSLT entières) ou des fragments XSLT générant une partie seulement d'un document HTML. Une page XSLT entière est semblable à une page HTML classique. Elle contient une balise

<body>

et une balise

<head>

, et permet d'afficher des données HTML et XML sur la page. Un fragment XSLT est un segment de code utilisé par un document distinct et qui affiche des données XML formatées. A la différence d’une page

XSLT, un fragment XSLT est un fichier indépendant qui ne contient pas de balises

<body>

ou

<head>

. Pour afficher des données XML sur une page distincte, vous pouvez créer une page XSLT entière et la lier à vos données XML. Si, en revanche, vous souhaitez afficher les données XML dans une section particulière d'une page dynamique existante (par exemple, la page d'accueil dynamique d'un magasin d'équipement sportif, sur laquelle des scores issus d'un fil RSS sont affichés sur le côté gauche), vous pouvez créer un fragment XSLT et insérer une référence à ce fragment dans la page dynamique. La création de fragments XSLT et leur utilisation avec d'autres pages dynamiques afin d'afficher des données XML constituent le cas de figure le plus courant.

La première étape de création de ces types de pages consiste à créer le fragment XSLT. il s'agit d'un fichier distinct qui contient la mise en page, le formatage etc. des données XML que vous souhaitez afficher dans la page dynamique. Une fois le fragment XSLT créé, vous insérez une référence à ce fichier dans la page dynamique (par exemple, une page PHP ou en forme (le fragment) résident dans un fichier distinct. En mode Création, un emplacement réservé au fragment apparaît

DREAMWEAVER CS3


403

dans la page dynamique. Lorsqu’un navigateur demande la page dynamique qui contient la référence au fragment, le serveur traite l’instruction d'inclusion et crée un nouveau document dans lequel le contenu mis en forme du fragment apparaît là où se trouvait l’emplacement réservé.

Pour insérer une référence à un fragment XSLT dans une page dynamique, utilisez le comportement de serveur

Transformation XSL. Lorsque vous insérez la référence, Dreamweaver crée dans le dossier racine du site le sous-dossier includes/MM_XSLTransform/ et y copie un fichier contenant une bibliothèque d’exécution. Le serveur d'application utilise les fonctions définies dans ce fichier lors de la transformation des données XML spécifiées. Le fichier extrait les données

XML et les fragments XSLT, exécute la transformation XSL et affiche le résultat sur la page Web.

Pour que la page puisse être affichée correctement, les fichiers contenant respectivement le fragment XSLT, vos données

XML et la bibliothèque d'exécution doivent tous les trois se trouver sur le serveur. (Si vous sélectionnez un fichier XML distant comme source de données, par exemple un fil RSS, celui-ci doit bien entendu résider ailleurs sur Internet.)

Vous pouvez également utiliser Dreamweaver pour créer des pages XSLT entières à utiliser dans les transformations côté serveur. Une page XSLT entière fonctionne exactement comme un fragment XSLT. Toutefois, lorsque vous insérez la référence à la page XSLT entière au moyen du comportement de serveur Transformation XSL, vous insérez le contenu intégral d'une page HTML. Par conséquent, vous devez effacer tout le contenu HTML de la page dynamique (la page .cfm,

.php, .asp ou .net qui sert de conteneur) avant d'insérer la référence.

Dreamweaver prend en charge les transformations XSL pour les pages ColdFusion, ASP, ASP.NET et PHP.

Remarque :

Pour exécuter des transformations côté serveur, votre serveur doit être correctement configuré. Pour plus d'informations, contactez l'administrateur du serveur ou consultez le site www.adobe.com/go/dw_xsl_fr .

Voir aussi

« Exécution de transformations XSL sur le serveur » à la page 408

DREAMWEAVER CS3


404

T

ransformations XSL côté client

Vous pouvez exécuter des transformations XSL sur le client, sans utiliser de serveur d'application. Dreamweaver permet de créer une page XSLT entière qui se chargera de cette opération. Toutefois, les transformations côté client nécessitent la manipulation du fichier XML contenant les données à afficher. Par ailleurs, les transformations côté client utilisent uniquement des navigateurs modernes (Internet Explorer 6, Netscape 8, Mozilla 1.8 et Firefox 1.0.2). Pour plus d'informations sur les navigateurs qui prennent en charge les transformations XSL, consultez le site www.w3schools.com/xsl/xsl_browsers.asp

.

Créez d'abord une page XLST entière et associez-lui une source de données XML. (Dreamweaver vous invite à associer la source de données à la création de la page.) Vous pouvez créer une page XSLT entièrement nouvelle ou convertir une page

HTML existante en page XSLT. Lorsque vous convertissez une page HTML existante en page XSLT, vous devez lui associer une source de données XML au moyen du panneau Liaisons (Fenêtre > Liaisons).

Une fois que vous avez créé votre page XSLT, vous devez la lier au fichier .xml qui contient les données XML en insérant une référence à la page XSLT dans le fichier XML (tout comme vous insérez une référence à une feuille de style en cascade

(CSS) externe dans la section

<head>

d'une page HTML). Les visiteurs de votre site doivent consulter le fichier XML (et non la page XSLT) dans un navigateur. Lorsqu'ils affichent la page, le navigateur exécute la transformation XSL et affiche les données XML, qui sont mises en forme par la page XSLT liée.

D'un point de vue conceptuel, la relation entre les pages XSLT et XML liées est similaire, tout en étant différente, au modèle de page CSS externe/HTML. Lorsqu'une page HTML contient du contenu (tel que du texte), vous utilisez une feuille de style externe pour formater ce contenu. La page HTML détermine le contenu, tandis que le code CSS externe, qui est totalement invisible pour l'utilisateur, détermine la présentation. Avec XSLT et XML, la situation est inversée. Le fichier

XML (que l'utilisateur ne voit jamais sous forme brute) détermine le contenu alors que la page XLST définit la présentation.

La page XSLT contient les tableaux, la mise en forme, les graphiques etc. que contient d'ordinaire le code HTML standard.

Lorsqu'un utilisateur affiche le fichier XML dans un navigateur, la page XSLT met le contenu en forme.

Lorsque vous utilisez Dreamweaver pour associer une page XSLT à une page XML, Dreamweaver insère le code approprié en haut de la page XML. Si la page XML liée vous appartient (autrement dit, si le fichier XML réside exclusivement sur votre serveur Web), il vous suffit d'utiliser Dreamweaver pour insérer le code approprié qui lie les deux pages. Lorsque vous êtes le propriétaire du fichier XML, les transformations XSL exécutées par le client sont totalement dynamiques. En d'autres termes, toute mise à jour des données du fichier XML est automatiquement répercutée sur toute sortie HTML utilisant la page XSLT liée.

DREAMWEAVER CS3


405

Remarque :

Les fichiers XML et XSL que vous utilisez dans les transformations côté client doivent résider dans un même répertoire. Si tel n'est pas le cas, le navigateur lit le fichier XML et trouve la page XLST à utiliser pour la transformation, mais ne peut pas localiser les actifs (feuilles de style, images etc.) définis par les liens relatifs dans la page XSLT.

Si la page XML liée ne vous appartient pas (si, par exemple, vous souhaitez utiliser des données XML provenant d'un fil RSS sur le Web), le processus est légèrement plus compliqué. Pour exécuter des transformations côté client utilisant des données

XML issues d'une source externe, vous devez d'abord télécharger le fichier XML source dans le répertoire contenant votre page XSLT. Une fois la page XML sur votre site local, vous pouvez utiliser Dreamweaver pour ajouter le code approprié afin de la lier à la page XSLT et envoyer les deux pages (la page XML téléchargée et la page XSLT liée) à votre serveur Web.

Lorsque l'utilisateur affiche la page XML dans un navigateur, la page XSLT met le contenu en forme, tout comme dans l'exemple précédent.

Les transformations XLS côté client de données XML provenant d'une source externe présentent toutefois un inconvénient : les données XML ne sont que partiellement « dynamiques ». Le fichier XML que vous téléchargez et modifiez est un simple

« instantané » du fichier qui réside autre part sur le Web. Si le fichier XML d'origine change sur le Web, vous devez à nouveau le télécharger, le lier à la page XSLT et envoyer le fichier XML à votre serveur Web. Le navigateur assure uniquement le rendu des données qu'il reçoit du fichier XML sur votre serveur Web, non des données que contient le fichier

XML source d'origine.

Voir aussi

« Exécution de transformations XSL sur le client » à la page 424

Données XML et éléments répétés

L'objet XSLT Région répétée permet d'afficher sur une page des éléments répétés provenant d'un fichier XML. Toute zone contenant un emplacement réservé pour données XML peut être convertie en région répétée. Les zones les plus courantes sont les tableaux, les lignes de tableau ou les séries de lignes de tableau.

DREAMWEAVER CS3


406

L'exemple ci-dessous indique comment l'objet XSLT Région répétée s'applique à une ligne de tableau qui affiche le menu d'un restaurant. La ligne initiale contient trois éléments différents du schéma XML : item (plat), description et price (prix).

Lorsque l'objet XSLT Région répétée est appliqué à la ligne et que la page est traitée par un serveur d'application, le tableau est répété et des données uniques sont insérées dans chaque nouvelle ligne.

Lorsque vous appliquez un objet XSLT Région répétée à un élément dans la fenêtre de document, un contour fin de couleur grise délimite la région répétée. Lors de l’affichage de l’aperçu dans un navigateur (Fichier > Aperçu dans le navigateur), le contour gris disparaît et la sélection est développée pour afficher les éléments répétés spécifiés dans le fichier XML, comme illustré ci-dessus.

Lorsque vous ajoutez l'objet XSLT Région répétée à la page, la longueur de l'emplacement réservé aux données XML dans la fenêtre de document est réduite. En effet, Dreamweaver met à jour le chemin XPath (XML Path language) de l'espace réservé aux données XML afin qu'il soit relatif au chemin de l'élément répété.

Le code suivant, par exemple, crée un tableau contenant deux espaces réservés dynamiques, sans appliquer d'objet XSLT

Région répétée au tableau:

<table width="500" border="1">

<tr>

<td><xsl:value-of select="rss/channel/item/title"/></td>

</tr>

<tr>

<td><xsl:value-of select="rss/channel/item/description"/></td>

</tr>

</table>

Le code suivant crée le même tableau et lui applique l'objet XSLT Région répétée :

DREAMWEAVER CS3


407

<xsl:for-each select="rss/channel/item">

<table width="500" border="1">

<tr>

<td><xsl:value-of select="title"/></td>

</tr>

<tr>

<td><xsl:value-of select="description"/></td>

</tr>

</table>

</xsl:for-each>

Dans l'exemple ci-dessus, Dreamweaver a mis à jour le chemin XPath des éléments qui sont compris dans la région répétée

(title et description) afin qu'il soit relatif au chemin XPath qui figure entre les balises

<xsl:for-each>

, plutôt qu'au document entier.

Dreamweaver génère également des expressions XPath relatives au contexte dans d'autres cas. Si, par exemple, vous faites glisser un espace réservé pour données XML vers un tableau auquel un objet Région répétée est déjà appliqué, Dreamweaver affiche automatiquement un chemin XPath relatif au chemin XPath existant qui figure entre les balises

<xsl:for-each>

.

Voir aussi

« Affichage des éléments répétés XML » à la page 412

Affichage d'un aperçu des données XML

Lorsque vous utilisez l'option Aperçu dans le navigateur (Fichier > Aperçu dans le navigateur) pour afficher un aperçu des données XML que vous avez insérées dans un fragment XSLT ou une page XSLT entière, le moteur qui exécute la transformation XSL varie d'une situation à l'autre. Pour les pages dynamiques contenant des fragments XSLT, c'est toujours le serveur d'application qui exécute la transformation. Dans d'autres cas, c'est soit Dreamweaver, soit le navigateur qui s'en charge.

Le tableau suivant passe en revue les cas de figure dans lesquels l'option Aperçu dans le navigateur est utilisée et indique le moteur qui exécute les transformations respectives :

T ype de page affichée dans le navigateur

P age dynamique contenant un fragment

XS

L

T

F ragment

XS

L

T ou page

XS

L

T enti

è re

F ichier

XM

L

l i

é à une page

XS

L

T enti

è re

Moteur exécutant la transformation des données

S erveur d

' app l ication

D ream w eaver

Navigateur

Les rubriques suivantes vous permettent de déterminer la méthode d'aperçu adaptée à vos besoins:

Aperçu de pages pour des transformations côté serveur

Dans le cas de transformations côté serveur, le contenu que le visiteur du site affiche est transformé par votre serveur d'application. Lors de la génération de fragments XSLT et de pages dynamiques à utiliser dans des transformations côté serveur, il est toujours préférable d'effectuer un aperçu de la page dynamique qui contient le fragment XSLT, plutôt que de ce dernier. Dans le premier cas, vous utilisez le serveur d'application et avez ainsi la garantie que votre aperçu représente le contenu qui s'affichera lorsque les visiteurs de votre site consulteront votre page. Dans le deuxième cas, Dreamweaver exécute la transformation et les résultats ne sont pas nécessairement garantis. Vous pouvez utiliser Dreamweaver pour afficher un aperçu du fragment XSLT pendant que vous le créez, mais pour obtenir un rendu précis des données, utilisez plutôt le serveur d'application pour afficher un aperçu de la page dynamique après y avoir inséré le fragment XSLT.

Aperçu de pages pour des transformations côté client

Dans le cas de transformations côté client, le contenu que le visiteur du site affiche est transformé par un navigateur. Pour ce faire, vous liez le fichier XML à la page XSLT. Si vous ouvrez le fichier XML dans Dreamweaver et en affichez un aperçu dans un navigateur, c'est ce dernier qui doit charger le fichier XML et exécuter la transformation. Vous obtenez donc le même résultat que le visiteur de votre site.

DREAMWEAVER CS3


408

Cette méthode présente toutefois un inconvénient : il vous en effet plus difficile de déboguer votre page car le navigateur transforme le fichier XML et génère le contenu HTML en interne. Si vous sélectionnez l'option Afficher la source du navigateur pour déboguer le contenu HTML généré, vous avez uniquement accès au code XML que le navigateur a reçu à l'origine et non à la totalité du code HTML (balises, styles, etc.) qui a effectué le rendu de la page. Pour afficher la totalité du code HTML lorsque vous consultez le code source, vous devez effectuer l'aperçu de la page XSLT dans un navigateur.

Aperçu de pages XSL

T

entières et de fragments XSL

T

Lorsque vous créez des pages XSLT entières et des fragments XSLT, il est souhaitable d'afficher un aperçu de votre travail pour vous assurer que les données s'affichent correctement. Si vous utilisez l'option Aperçu dans le navigateur pour afficher une page XSLT entière ou un fragment XSLT, Dreamweaver exécute la transformation au moyen d'un moteur de transformation intégré. Cette méthode garantit des résultats rapides et vous permet de facilement générer et de déboguer votre page au fur et à mesure. Elle vous permet aussi d'afficher la totalité du code HTML (balises, styles, etc.) par le biais de l'option Afficher la source du navigateur.

Remarque :

Cette méthode d'aperçu est couramment utilisée lorsque vous commencez à générer des pages XSLT, que vous utilisiez le client ou le serveur pour transformer vos données.

Exécution de transformations XSL sur le serveur

Processus d'exécution des transformations XSL côté serveur

Vous pouvez exécuter des transformations XLS côté serveur sur le serveur. Informez-vous sur les transformations XSL côté client et côté serveur et sur l'utilisation de XML et de XSL avec les pages Web avant de créer des page affichant des données XML.

Remarque :

Pour exécuter des transformations côté serveur, votre serveur doit être correctement configuré. Pour plus d'informations, contactez l'administrateur du serveur ou consultez le site www.adobe.com/go/dw_xsl_fr .

Le déroulement général de l'exécution des transformations XSL côté serveur est le suivant (chaque étape individuelle est

3.

T estez le serveur d'application.

Vous pouvez par exemple créer une page à traiter et vous assurer que le serveur d'application effectue l'opération requise.

Vous trouverez un didacticiel à ce sujet sur le site www.adobe.com/go/dw_xsl_fr .

4.

T

, ou convertissez une page H

T

ML en page XSL

T

.

•

Sur votre site Dreamweaver, créez un fragment XSLT ou une page XSLT entière.

•

Convertissez une page HTML existante en une page XSLT entière.

6.

T

ou à la page XSL

T

entière.

7.

T

Région répétée au tableau ou à la ligne de tableau contenant les espaces réservés pour données XML.

•

Pour insérer une référence au fragment XSLT dans votre page dynamique, utilisez le comportement de serveur

Transformation XSL.

DREAMWEAVER CS3


409

•

Pour insérer une référence à la page XSLT dans la page dynamique, supprimez tout le code HTML de la page dynamique, puis utilisez le comportement de serveur Transformation XSL.

Envoyez la page dynamique et le fragment XSLT (ou la page XSLT entière) à votre serveur d'application. Si vous utilisez un fichier XML local, envoyez-le également.

10.

Affichez la page dynamique dans un navigateur.

Le serveur d'application transforme alors les données XML, les insère dans la page dynamique et les affiche dans le navigateur.

Voir aussi



« Utilisation de XML et XSL dans des pages Web » à la page 401

« Transformations XSL côté client » à la page 404

« Transformations XSL côté serveur » à la page 402

Création d'une page XSL

T

Les pages XSLT permettent d'afficher des données XML sur des pages Web. Vous pouvez créer soit une page XSLT entière

(une page XSLT contenant une balise

<body>

et une balise

<head>

), soit un fragment XSLT. Lorsque vous créez un fragment

XSLT, vous créez en fait un fichier indépendant qui ne contient pas de balise body ni head, mais simplement du code qui sera ensuite inséré dans une page dynamique.

Remarque :

Si vous utilisez une page XSLT existante et devez lui associer une source de données XML.

1


2

Dans la catégorie Page vierge de la boîte de dialogue Nouveau document, sélectionnez l'une des options suivantes dans la colonne Type de page :

• Sélectionnez XSLT (page entière) pour créer une page XSLT entière.

• Sélectionnez XSLT (Fragment) pour créer un fragment XSLT.

3

Cliquez sur Créer et effectuez l'une des actions suivantes dans la boîte de dialogue Localiser source XML :

• Choisissez Associer un fichier local, cliquez sur le bouton Parcourir, recherchez le fichier XML local sur votre ordinateur et cliquez sur OK.

• Choisissez Associer un fichier distant, indiquez l'adresse URL d'un fichier XML sur Internet (par exemple un fil RSS), puis cliquez sur OK.

Remarque :

Cliquer sur le bouton Annuler entraîne la génération d'une nouvelle page XSLT à laquelle aucune source de données XML n'est associée.

Le schéma de votre source de données XML s'affiche dans le panneau Liaisons.

DREAMWEAVER CS3


410

Le tableau suivant décrit les différents éléments que le schéma est susceptible de contenir.

Elément

<>

<>+

<>+

N œ ud d 'élé ment en gras

Représente Détails

Elé ment

XM

L non r

é p

é t

é ob l igatoire

Elé ment qui appara

î t une fois seu l ement au sein de son n œ ud parent

Elé ment XM L r é p é t é

Elé ment

XM

L facu l tatif

Elé ment qui appara î t une ou p l usieurs fois au sein de son n

œ ud parent

Elé ment qui appara

î t

zé ro ou p l usieurs fois au sein de son n œ ud parent

Elé ment conte x tue l en cours E n r è g l e g é n é ra l e , l'élé ment r é p é t é l orsque

l e point d

' insertion se trouve au sein d ' une r é gion r é p é t é e

A ttribut

XM

L

@

4

Enregistrez la nouvelle page (Fichier > Enregistrer) en lui attribuant l'extension .xsl ou .xslt (l'extension par défaut est

.xsl).

Conversion des pages H

T

ML en pages XSL

T

Vous pouvez aussi convertir des pages HTML existantes en pages XSLT. Si, par exemple, vous disposez d'une page statique prédéfinie à laquelle vous souhaitez ajouter des données XML, vous pouvez la convertir en page XSLT, plutôt que de créer une page XSLT et de la redéfinir entièrement.

1

Ouvrez la page HTML à convertir.

2

Sélectionnez Fichier > Convertir

Une copie de la page s'ouvre dans la fenêtre de document. La nouvelle page est une feuille de style XSL, enregistrée avec l'extension .xsl.

DREAMWEAVER CS3


411

Association de sources de données XML

Si vous utilisez une page XSLT existante ou si vous en créez une dans Dreamweaver sans lui associer de source de données

XML, vous devez utiliser le panneau Liaisons pour associer une source de données XML.

1

Dans le panneau Liaisons (Fenêtre > Liaisons), cliquez sur la liaison XML.

Remarque :

Pour ajouter une source de données XML, vous pouvez aussi cliquer sur le lien Source, dans le coin supérieur droit du panneau Liaisons.

2


•

Choisissez Associer un fichier local, cliquez sur le bouton Parcourir, recherchez le fichier XML local sur votre ordinateur et cliquez sur OK.

•

Choisissez Associer un fichier distant, indiquez l'adresse URL d'un fichier XML sur Internet (par exemple un fil RSS).

3

Cliquez sur OK pour fermer la boîte de dialogue Localiser source XML.

Le schéma de votre source de données XML s'affiche dans le panneau Liaisons.

Affichage des données XML dans des pages XSL

T

Après avoir créé une page XSLT et lui avoir associé une source de données XML, vous pouvez lier des données à la page.

Pour ce faire, vous ajoutez un emplacement réservé pour données XML dans votre page, puis vous utilisez le Créateur d'expression XPATH ou l'inspecteur Propriétés pour mettre en forme les données sélectionnées qui vont s'afficher dans la page.

1

Ouvrez une page XSLT à laquelle est associée une source données XML.

2

(Facultatif) Choisissez Insertion > Tableau pour ajouter un tableau à la page. Un tableau permet d'organiser plus aisément les données XML.

Remarque :

En règle générale, il est conseillé d'utiliser l'objet XSLT Région répétée pour afficher des éléments XML répétés sur une page. Dans ce cas, vous pouvez créer un tableau d'une seule ligne avec une ou plusieurs colonnes, ou un tableau de deux lignes si vous avez l'intention d'insérer un en-tête.

DREAMWEAVER CS3


412

3

Dans le panneau Liaisons, sélectionnez un élément XML et faites-le glisser jusqu'à l'emplacement où vous souhaitez insérer des données sur la page.

Un espace réservé pour données XML est créé sur la page. Cet espace réservé est en surbrillance et encadré d'accolades. Il utilise la syntaxe XPath (XML Path Language) pour décrire la structure hiérarchique du schéma XML. Par exemple, si vous faites glisser l’élément enfant title sur la page, et si ses éléments parents sont rss , channel et item , la syntaxe de l’espace réservé dynamique sera \{rss/channel/item/title\}.

Double-cliquez sur l'emplacement réservé des données XML dans la page pour ouvrir le Créateur d'expression XPATH. Le

Créateur d'expression XPATH permet de mettre les données sélectionnées en forme ou de sélectionner d'autres éléments dans le schéma XML.

4

(Facultatif) Pour affecter des styles à vos données XML, sélectionnez un espace réservé pour données XML et appliquezlui des styles, comme s'il s'agissait d'un autre segment de contenu, à l'aide de l'inspecteur Propriétés ou du panneau Styles

CSS. Pour appliquer des styles aux fragments XSLT, vous pouvez aussi utiliser des feuilles de style au moment de la création.

Chacune de ces méthodes présente des avantages et des inconvénients.

5

Vérifiez le résultat dans un navigateur (Fichier > Aperçu dans le navigateur).

Remarque :

Lorsque vous utilisez la fonctionnalité Aperçu dans le navigateur, Dreamweaver effectue une transformation XSL en interne, sans faire appel à un serveur d'application.

Voir aussi

« Affichage d'un aperçu des données XML » à la page 407

Affichage des éléments répétés XML

L'objet XSLT Région répétée permet d'afficher sur une page Web des éléments répétés provenant d'une source de données

XML. Par exemple, si vous affichez des titres et descriptions d’articles à partir d’un fil d’informations contenant entre 10 et

20 articles, chaque titre et chaque description du fichier XML est probablement un élément enfant d'un élément répété.

En mode création, toute région contenant un emplacement réservé pour données XML peut être convertie en région répétée. Toutefois, les zones les plus fréquentes sont les tableaux, les lignes de tableau ou une série de lignes de tableau.

1

En mode Création, sélectionnez une région comportant un ou plusieurs espaces réservés pour données XML.

La sélection peut être de tout type, notamment tableau, ligne de tableau ou même paragraphe de texte.

DREAMWEAVER CS3


413

Pour sélectionner précisément une région sur une page, vous pouvez utiliser le sélecteur de balises dans le coin inférieur gauche de la fenêtre de document. Par exemple, si la région correspond à un tableau, cliquez dans ce tableau, puis cliquez sur la balise dans le sélecteur de balises.

2

Effectuez l'une des actions suivantes :

•

Choisissez Insertion > Objets XSLT > Région répétée.

•

Dans la catégorie XSLT de la barre Insertion, cliquez sur le bouton Région répétée.

3

Dans le Créateur d'expression XPATH, sélectionnez l'élément répété (il est indiqué par un signe plus de petite taille).

4

Cliquez sur OK.

Dans la fenêtre de document, un contour fin de couleur grise délimite la région répétée. Lors de l’affichage de l’aperçu dans un navigateur (Fichier > Aperçu dans le navigateur), le cadre gris disparaît et la sélection est développée pour afficher les

éléments répétés spécifiés dans le fichier XML.

Lorsque vous ajoutez l'objet XSLT Région répétée à la page, l'emplacement réservé pour données XML dans la fenêtre de document est tronqué. En effet, Dreamweaver met à jour le chemin XPath de l'espace réservé pour données XML afin qu'il soit relatif au chemin de l'élément répété.

Voir aussi

« Utilisation du Créateur d'expressions XPath pour ajouter des expressions pour les données XML » à la page 420

« Données XML et éléments répétés » à la page 405

DREAMWEAVER CS3


414

Définition des propriétés des régions répétées (XSL)

L'inspecteur Propriétés permet de sélectionner un autre noeud XML à répéter pour créer la région répétée.

❖

Dans la zone Sélection, tapez un nouveau noeud, puis appuyez sur l'icône en forme d'éclair et sélectionnez le noeud dans l'arborescence de schéma XML qui apparaît.

Modification d'un objet XSL

T

Région répétée

Après avoir inséré un objet XSLT Région répétée dans une région, vous pouvez le modifier à l’aide de l'inspecteur Propriétés.

1

Sélectionnez l'objet voulu en cliquant dans le cadre gris qui entoure la région répétée.

2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur l'icône dynamique située en regard de la zone de texte

Sélection.

3

Dans le Créateur d'expression XPATH, effectuez les modifications nécessaires et cliquez sur OK.

Insertion de fragments XSL

T

dans des pages dynamiques

Après avoir créé un fragment XSLT, vous pouvez l’insérer dans une page Web dynamique à l’aide du comportement de serveur Transformation XSL. Lorsque vous insérez ce comportement de serveur dans une page et affichez celle-ci dans un navigateur, un serveur d'application effectue une transformation qui affiche les données XML du fragment XSLT sélectionné. Dreamweaver prend en charge les transformations XSL pour les pages ColdFusion, ASP, ASP.NET et PHP.

Remarque :

La procédure d'insertion du contenu d'une page XSLT entière dans une page dynamique est identique. Avant d'utiliser le comportement de serveur Transformation XSL pour insérer la page XSLT entière, supprimez tout le code HTML de la page dynamique.

1

Ouvrez une page ColdFusion, ASP, ASP.NET ou PHP.

2

En mode Création, placez le curseur là où vous voulez insérer le fragment XSLT.

Remarque :

Lors de l'insertion de fragments XSLT, vous devez toujours cliquer sur le bouton Afficher les modes Code et

Création après avoir placé le point d'insertion sur la page, de façon à s'assurer que le point d'insertion est à l'emplacement voulu.

S'il n'y est pas, cliquez de nouveau dans l'écran Code pour placer le point d'insertion à l'endroit voulu.

3

Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+), puis choisissez Transformation XSL.

4

Dans la boîte de dialogue Transformation XSL, cliquez sur le bouton Parcourir et recherchez un fragment XSLT ou une page XSLT entière.

Dreamweaver renseigne le champ de texte suivant avec le chemin d'accès ou l'adresse URL du fichier XML associé à ce fragment. Pour modifier le contenu de ce champ, cliquez sur le bouton Parcourir et sélectionnez un autre fichier.

DREAMWEAVER CS3


415

5

(Facultatif) Cliquez sur le bouton Plus (+) pour ajouter un paramètre XSLT.

6

Cliquez sur OK pour insérer une référence au fragment XSLT dans la page. Il n'est pas possible de modifier ce fragment.

Si nécessaire, double-cliquez sur le fragment pour ouvrir son fichier source et le modifier.

Un sous-dossier includes/MM_XSLTransform/ contenant un fichier contenant une bibliothèque d'exécution est également créé dans le dossier racine du site. Le serveur d'application utilise les fonctions définies dans ce fichier lors de la transformation.

7

Transférez la page dynamique à votre serveur (Site > Placer) et cliquez sur Oui pour inclure les fichiers dépendants. Pour que la page puisse être affichée correctement, les fichiers contenant respectivement le fragment XSLT, vos données XML et la bibliothèque d'exécution doivent tous les trois se trouver sur le serveur. (Si vous sélectionnez un fichier XML distant comme source de données, celui-ci doit bien entendu résider ailleurs sur Internet.)

Voir aussi

« Création d'une page XSLT » à la page 409


Suppression de fragments XSL

T

de pages dynamiques

Pour supprimer un fragment XSLT d'une page, supprimez le comportement de serveur Transformation XSL qui a permis associés (XML, XSLT ou bibliothèque d’exécution) ne sont pas affectés.

1

Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), sélectionnez le comportement de serveur Transformation XSL à supprimer.

2


Remarque :

Vous devez toujours utiliser cette méthode pour supprimer un comportement de serveur. En effet, la suppression manuelle du code correspondant ne supprime que partiellement le comportement de serveur, même si celui-ci disparaît bien du panneau Comportements de serveur.

Modification des comportements de serveur

T

ransformation XLS

Après avoir ajouté un fragment XSLT à une page Web dynamique, vous pouvez à tout moment modifier le comportement de serveur Transformation XSL.

1

Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), double-cliquez sur le comportement de serveur Transformation XLS à modifier.

2

Effectuez les modifications requises, puis cliquez sur OK.

Création d'un lien dynamique

Vous pouvez créer un lien dynamique dans votre page XSLT qui établit un lien vers une URL spécifique lorsque l'utilisateur clique sur un mot ou un groupe de mots spécifié dans vos données XML. Pour plus d'informations, consultez les listes d'erreurs Dreamweaver à l'adresse www.adobe.com/go/dw_documentation_fr .

Application de styles aux fragments XSL

T

Lorsque vous créez une page XSLT entière (autrement dit, une page XSLT qui contient des balises

<body>

et

<head>

), vous pouvez afficher les données XML sur la page, puis les mettre en forme comme tout autre contenu à l'aide de l'inspecteur

Propriétés ou du panneau Styles CSS. Lorsque vous créez un fragment XSLT pour l'insertion dans une page dynamique, tel qu'un fragment à insérer dans une page ASP, PHP ou Cold Fusion), le rendu des styles du fragment et de la page dynamique devient plus compliqué. Bien que le fragment XSLT soit traité de façon indépendante par rapport à la page dynamique, il est important de conserver à l'esprit que le fragment est conçu pour cette page dynamique et que le code renvoyé par le fragment XSLT sera placé quelque part entre les balises

<body>

de la page dynamique. Etant donné ce processus, il est

DREAMWEAVER CS3


416

important de s'assurer qu'aucun élément

<head>

(tel que des définitions de style ou des liens vers des feuilles de style externes) n'est inclus dans des fragments XSLT. Sinon, le serveur d'application place ces éléments dans la section

<body>

de la page dynamique, ce qui débouche sur un marquage non valide.

Vous pouvez, par exemple, décider de créer un fragment XSLT à insérer dans une page dynamique et le mettre en forme au moyen de la même feuille de style externe que la page dynamique. Si vous attachez la même feuille de style au fragment, la page HTML résultante contient un lien en double à la feuille de style (un dans la section

<head>

de la page dynamique et un autre dans la section

<body>

de la page, là où le contenu du fragment XSLT apparaît). Une meilleure façon de procéder consiste à utiliser des feuilles de style à la conception pour référencer la feuille de style externe.

Lors du formatage du contenu des fragments XSLT, utilisez la procédure suivante :

•

Tout d'abord, attachez une feuille de style externe à la page dynamique. (Cette procédure reprend les meilleures pratiques d'application des styles au contenu d'une page Web.)

•

Ensuite, attachez la même feuille de style externe au fragment XSLT en tant que feuille de style à la conception. Comme leur nom l'indique, les feuilles de style à la conception fonctionnent uniquement en mode Création dans Dreamweaver.

Une fois les deux étapes précédentes terminées, vous pouvez créer de nouveaux styles dans votre fragment XSLT à l'aide de la feuille de style qui a été associée à votre page dynamique. Vous obtiendrez un code HTML mieux structuré (dans la mesure où la référence à la feuille de style n'est valide que dans Dreamweaver) et le fragment affichera toujours les styles requis en mode Création. De plus, tous vos styles sont appliqués au fragment et à la page dynamique lorsque vous affichez cette dernière en mode Création ou en affichez un aperçu dans un navigateur.

Remarque :

Si vous demandez un aperçu du fragment XSLT dans un navigateur, ce dernier n'affiche pas les styles. Par contre, vous devez afficher un aperçu de la page dynamique dans le navigateur afin de consulter le fragment XSLT dans le contexte de la page dynamique.

Pour plus d'informations sur l'utilisation de CSS pour formater les fragments XSLT, voir www.adobe.com/go/dw_xsl_styles_fr ..

Voir aussi

« Utilisation des feuilles de style à la conception » à la page 139

Utilisation des paramètres avec des transformations XSL

Lorsque vous ajoutez le comportement de serveur Transformation XLS à une page Web, vous pouvez définir des paramètres de transformation XSL. Un paramètre contrôle la façon dont les données XML sont traitées et affichées. Par exemple, vous pouvez utiliser un paramètre pour identifier et afficher un article spécifique d'un fil d'informations. Lorsque la page est chargée dans un navigateur, seul l’article spécifié par le paramètre est affiché.

Ajout d'un paramètre XSL

T

à une transformation XSL

1

Ouvrez la boîte de dialogue Transformation XSL. Pour ce faire, double-cliquez sur un comportement de serveur

Transformation XLS dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), ou ajoutez un nouveau comportement de serveur Transformation XLS.

2

Dans la boîte de dialogue Transformation XSL, cliquez sur le bouton Plus (+) à côté du libellé Paramètres XSLT.

DREAMWEAVER CS3


417

3

Dans la boîte de dialogue Ajouter un paramètre, tapez un nom pour le paramètre dans la zone Nom. Ce nom ne peut comporter que des caractères alphanumériques, et il ne doit pas contenir d'espace.

4


•

Pour utiliser une valeur statique, saisissez-la dans la zone Valeur.

•

Pour utiliser une valeur dynamique, cliquez sur l'icône Dynamique à côté de la zone Valeur, renseignez la boîte de dialogue Données dynamiques et cliquez sur le bouton OK. Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue Données dynamiques.

5

Dans la zone Valeur par défaut, indiquez la valeur que le paramètre doit utiliser si la page ne reçoit aucune valeur lors de son exécution, puis cliquez sur OK.

Modification d'un paramètre XSL

T

1



2

Sélectionnez un paramètre dans la liste des paramètres XSLT.

3

Cliquez sur le bouton Modifier.

4

Effectuez les modifications requises, puis cliquez sur OK.

Suppression d'un paramètre XSL

T

1



2

Sélectionnez un paramètre dans la liste des paramètres XSLT.

3


Création et modification des régions XSL

T

conditionnelles

Vous pouvez créer des régions conditionnelles simples ou multiples sur une page XSLT. Vous pouvez soit sélectionner un

élément en mode Création, puis appliquer une région conditionnelle à la sélection, soit insérer une région conditionnelle à l'emplacement du point d'insertion dans le document.

Supposons que vous souhaitiez afficher l'expression « Non disponible » en regard du prix d'un article lorsque celui-ci est en région conditionnelle. Dreamweaver entoure l'expression des balises

<xsl:if>

et affiche uniquement le mot « disponible » sur la page lorsque les données répondent aux conditions définies par l'expression conditionnelle.

Application d'une région XSL

T

conditionnelle

Vous pouvez rédiger une expression conditionnelle simple à insérer dans votre page XSLT. Tout contenu sélectionné à l'ouverture de la boîte de dialogue Région conditionnelle est entouré d'un bloc

<xsl:if>

. Si aucun contenu n'est sélectionné, le bloc

<xsl:if>

est entré au point d'insertion. Il est judicieux d'utiliser cette boîte de dialogue pour démarrer, puis de personnaliser l'expression en vue Code.

L'élément

<xsl:if>

est similaire à l'instruction if

d'autres langages. Il a pour fonction de tester une condition et de déclencher une action en fonction du résultat. L'élément

<xsl:if>

vous permet de tester si une expression est vraie ou fausse.

1

Choisissez Insertion > Objets XSLT > Région conditionnelle, ou cliquez sur l'icône Région conditionnelle de la catégorie

XSLT de la barre Insertion.

2

Dans la boîte de dialogue Région conditionnelle, entrez l'expression conditionnelle à utiliser pour la région.

L'exemple suivant vérifie si la valeur de l'attribut

@available

du nœud contextuel correspond à true

(vrai).

DREAMWEAVER CS3


418

3

Cliquez sur OK.

Le code suivant est inséré dans votre page XSLT :

<xsl:if test="@available='true'">

Content goes here

</xsl:if>

Remarque :

Vous devez placer les valeurs de chaîne telles que true entre guillemets. Dreamweaver code les guillemets (') à votre intention, afin qu'elles apparaissent dans un format XHTML valide.

Outre tester des noeuds pour des valeurs, vous pouvez utiliser toute fonction XSLT prise en charge dans votre instruction conditionnelle. La condition est testée pour le noeud en cours de votre fichier XML. L'exemple suivant teste le dernier

Pour plus d'informations et des exemples concernant l'écriture d'expressions conditionnelles, consultez la section

<xsl:if> du panneau Références (Aide > Référence).

Application de régions XSL

T

conditionnelles multiples

Vous pouvez rédiger une expression conditionnelle simple à insérer dans votre page XSLT. Tout contenu sélectionné à l'ouverture de la boîte de dialogue Région conditionnelle est entouré d'un bloc

<xsl:choose>

. Si vous ne sélectionnez pas de contenu, le bloc

<xsl:choose>

est entré au point d'insertion. Il est judicieux d'utiliser cette boîte de dialogue pour démarrer, puis de personnaliser l'expression en vue Code.

L'élément

<xsl:choose>

est similaire à l'instruction case

d'autres langages. Il a pour fonction de tester une condition et de déclencher une action en fonction du résultat. L'élément

<xsl:choose>

vous permet de tester plusieurs conditions.

1

Choisissez Insertion > Objets XSLT > Région conditionnelle multiple, ou cliquez sur l'icône Région conditionnelle multiple de la catégorie XSLT de la barre Insertion.

2

Entrez la première condition dans la boîte de dialogue Région conditionnelle multiple.

L'exemple suivant vérifie si la valeur du sous-élément price

du nœud contextuel est inférieure à 5.

DREAMWEAVER CS3


419

3

Cliquez sur OK.

Le code suivant est inséré dans votre page XSLT :

<xsl:choose>

<xsl:when test="price<5">

Content goes here

</xsl:when>

<xsl:otherwise>

Content goes here

</xsl:otherwise>

</xsl:choose>

4

Pour insérer une autre condition, placez le point d'insertion en mode Code entre les paires de balises

<xsl:when>

ou juste avant la balise

<xsl:otherwise>

, puis insérez une région conditionnelle (Insertion > Objets XSLT > Région conditionnelle).

Une fois que vous avez spécifié la condition et cliqué sur OK, une autre balise

<xsl:when>

est insérée dans le bloc

<xsl:choose>

.

Pour plus d'informations et des exemples concernant l'écriture d'expressions conditionnelles, consultez les sections

<xsl:choose>

du panneau Références (Aide > Référence).

Définition des propriétés des régions conditionnelles (If)

L'inspecteur de définition des propriétés des régions conditionnelles permet de modifier la condition utilisée dans une région conditionnelle dans votre page XSL. La région conditionnelle teste la condition et déclenche une action en fonction du résultat.

❖

Dans la zone Test, tapez une nouvelle condition et appuyez sur Entrée.

Définition des propriétés conditionnelles (When)

L'inspecteur de définition des propriétés des régions conditionnelles permet de modifier la condition utilisée dans une région conditionnelle multiple dans votre page XSL. La région conditionnelle multiple teste la condition et déclenche une action en fonction du résultat.

❖

Dans la zone Test, tapez une nouvelle condition et appuyez sur Entrée.

Insertion de commentaires XSL

Vous pouvez ajouter des balises de commentaires XSL à un document ou vous pouvez entourer une sélection de balises de commentaires XSL.

Ajout de balises de commentaires XSL à un document

❖


•

En mode Création, sélectionnez Insertion > Objets XSLT > Commentaires XSL, tapez les commentaires (ou ne remplissez pas la zone), puis cliquez sur OK.

•

En mode Code, sélectionnez Insertion > Objets XSLT > Commentaires XSL.

DREAMWEAVER CS3


420

Vous pouvez également cliquer sur l'icône Commentaire XSL de la catégorie XSLT de la barre Insertion.

Entourer une sélection de balises de commentaires XSL

T

1

Basculez en mode Code (Affichage > Code).

2

Sélectionnez le code auquel vous souhaitez ajouter des commentaires.

3

Dans la barre d'outils de codage, cliquez sur le bouton Appliquer commentaire et sélectionnez Appliquer commentaire

<xsl:comment></xsl:comment>.

Utilisation du Créateur d'expressions XPath pour ajouter des expressions pour les données

XML

XPath (XML Path Language) est une syntaxe non XML destinée à traiter des parties d'un document XML. Elle est essentiellement utilisée comme langage de requêtes pour des données XML, tout comme le langage SQL est utilisé pour des requêtes de bases de données. Pour plus d'informations sur XPath, consultez les spécifications du langage XPath sur le site

Web du W3C, à l'adresse www.w3.org/TR/xpath .

Le Créateur d'expression XPath est une fonction de Dreamweaver qui vous permet de créer des expressions XPath simples pour l'identification de noeuds de données spécifiques et pour les régions répétées. Cette méthode présente un avantage sur le glissement-déplacement de valeurs à partir de l'arborescence du schéma XML car elle vous permet de mettre en forme la valeur qui est affichée. Le contexte en cours est identifié en fonction de la position du point d'insertion dans le fichier XSL lors de l'ouverture de la boîte de dialogue Créateur d'expressions XPath. Le contexte en cours est affiché en gras dans l'arborescence du schéma XML. Au fur et à mesure que vous effectuez des sélections dans cette boîte de dialogue, les instructions XPATH correctes relatives à votre contexte en cours sont générées. Cette fonction simplifie le processus d'écriture d'expressions XPath correctes, tant pour les novices que les utilisateurs expérimentés.

Remarque :

Cette fonction a été conçue pour vous aider à créer des expressions XPath simples pour identifier un nœud spécifique ou pour les régions répétées. Elle ne vous permet pas de modifier les expressions manuellement. Si vous devez créer des expressions complexes, utilisez le Créateur d'expressions XPath pour démarrer, puis personnalisez vos expressions en mode

Code ou au moyen de l'inspecteur Propriétés.

Création d'une expression XPath pour identifier un nœud spécifique

1

Double-cliquez sur l'emplacement réservé des données XML dans la page pour ouvrir le Créateur d'expression XPATH.

2

Dans la boîte de dialogue Créateur d'expression XPATH (Texte dynamique), sélectionnez un nœud dans l'arborescence du schéma XML.

L'expression XPath appropriée est rédigée dans la zone Expression pour identifier le nœud.

Remarque :

Si vous sélectionnez un autre noeud dans l'arborescence du schéma XML, l'expression change en conséquence.

Dans l'exemple suivant, vous souhaitez afficher le sous-élément price

du noeud item

:

DREAMWEAVER CS3


421

Une telle sélection insère le code suivant dans votre page XSLT :

<xsl:value-of select="price"/>

3

(Facultatif) Sélectionnez une option de mise en forme dans le menu déroulant Format.

La mise en forme d'une sélection est utile lorsque la valeur du noeud renvoie un nombre. Dreamweaver propose une liste prédéfinie de fonctions de mise en forme. Vous trouverez la liste complète de ces fonctions, ainsi que des exemples, dans le panneau Références.

Dans l'exemple suivant, vous souhaitez afficher le sous-élément price

sous la forme d'une devise à deux décimales :

Ces options insèrent le code suivant dans votre page XSLT :

<xsl:value-of select="format-number(provider/store/items/item/price,'$#.00')"/>

4

Cliquez sur OK.

DREAMWEAVER CS3


422

5

Pour afficher la valeur de chaque nœud dans le fichier XML, appliquez une région répétée à l'élément contenant le texte dynamique (une ligne d'un tableau HTML ou un paragraphe, par exemple).

Pour plus d'informations et des exemples concernant la sélection de noeuds pour renvoyer une valeur, consultez la section

<xsl:value-of/>

du panneau Références.

Sélection d'un noeud à répéter

Vous pouvez sélectionner un nœud à répéter et, éventuellement, choisir de filtrer les résultats. Dans la boîte de dialogue

Créateur d'expressions XPath, votre contenu sélectionné sera entouré d'un bloc

<xsl:for-each>

. Si aucun contenu n'est sélectionné, le bloc

<xsl:for-each>

est entré au point d'insertion.

1

Double-cliquez sur l'emplacement réservé des données XML dans la page pour ouvrir le Créateur d'expression XPATH.

2

Dans la boîte de dialogue Créateur d'expressions XPATH (Région répétée), sélectionnez l'élément à répéter dans l'arborescence du schéma XML.

L'expression XPath appropriée est rédigée dans la zone Expression pour identifier le nœud.

Remarque :

Les éléments répétés sont identifiés par le symbole Plus (+) dans l'arborescence du schéma XML.

Dans l'exemple suivant, vous souhaitez répéter chaque nœud item

au sein du fichier XML.

<xsl:for-each select="provider/store/items/item">

Content goes here

</xsl:for-each>

Dans certains cas, vous souhaiterez peut-être utiliser un sous-ensemble des noeuds répétés. Ainsi, vous souhaiterez peut-

être utiliser uniquement les articles dotés d'un attribut d'une valeur spécifique. Vous devez alors créer un filtre.

Filtrage des données à répéter

Utilisez un filtre pour identifier les nœuds répétés possédant des valeurs d'attribut spécifiques.

1

Dans l'arborescence du schéma XML, sélectionnez un noeud à répéter.

2

Cliquez sur le bouton d'extension Créer un filtre.

3

Cliquez sur le bouton plus (+) pour créer un filtre vide.

4

Tapez les critères de filtre dans les champs suivants

Filtrer par

Indique le nœud répété contenant les données sur lesquelles fonder le filtre. Ce menu déroulant propose une liste de nœuds ancêtres relatifs au nœud sélectionné dans l'arborescence du schéma XML.

DREAMWEAVER CS3


423

O

ù

Spécifie l'attribut ou le sous-élément du nœud Filtrer par qui sera utilisé pour filtrer les résultats. Vous pouvez sélectionner un attribut ou un sous-élément dans le menu déroulant, ou vous pouvez entrer votre propre expression XPath dans ce champ pour identifier les enfants présents aux autres niveaux.

O pérateur

Spécifie l'opération de comparaison à utiliser dans l'expression de filtre.

Valeur

Spécifie la valeur à rechercher dans le nœud Filtrer par. Indiquez une valeur. Si des paramètres dynamiques sont définis pour votre page XSLT, vous pouvez en sélectionner un dans le menu déroulant.

5

Pour insérer un autre filtre, cliquez à nouveau sur le bouton Plus (+).

En fonction des valeurs que vous tapez ou sélectionnez dans les menus déroulants, l'expression XPath figurant dans la zone

Expression est modifiée.

L'exemple suivant renvoie uniquement les nœuds item

dans lesquels la valeur de l'attribut

@available

correspond à true

(vrai).

<xsl:for-each select="provider/store/items/item[@available = 'true']">

Content goes here

</xsl:for-each>

Remarque :

Vous devez placer les valeurs de chaîne telles que true entre guillemets. Dreamweaver code les guillemets (') à votre intention, afin qu'elles apparaissent dans un format XHTML valide.

DREAMWEAVER CS3


424

Vous pouvez créer des filtres plus complexes qui vous permettent de spécifier des nœuds parents dans vos critères de filtre.

L'exemple suivant affiche uniquement les noeuds item

pour lesquels l'attribut

@id

de store

est égal à price correspondant à item

est supérieur à 5.

<xsl:for-each select="provider/store[@id = 1]/items/item[price > 5]">

Content goes here

</xsl:for-each>

Pour plus d'informations et des exemples de régions répétées, consultez la section

<xsl:for-each>

du panneau Références.

Résolution des problèmes liés aux transformations XSL

Si vous ne parvenez pas à faire fonctionner vos transformations XSL, consultez le guide de dépannage disponible à l'adresse www.adobe.com/go/dw_xsl_faq_fr . Ce guide répond à de nombreuses questions posées fréquemment.

Exécution de transformations XSL sur le client

Processus d'exécution des transformations XSL côté client

Vous pouvez effectuez des transformations XSL côté client. Informez-vous sur les transformations XSL côté client et côté serveur et sur l'utilisation de XML et de XSL avec les pages Web avant de créer des page affichant des données XML.

Le déroulement général de l'exécution des transformations XSL côté client est le suivant (chaque étape individuelle est

2.

T

, ou convertissez une page H

T

ML en page XSL

T

.

•

Sur votre site Dreamweaver, créez une page XSLT entière.

•

Convertissez une page HTML existante en une page XSLT entière.

DREAMWEAVER CS3


425

Le fichier XML que vous associez doit se trouver dans le même répertoire que la page XSLT.

4.

T

.

5.

T

entière.

6.

T

Région répétée au tableau ou à la ligne de tableau contenant le ou les espaces réservés pour les données XML.

7.

T

à la page XML.

8.

T

liée à votre serveur Web.

Le navigateur transforme alors les données XML, les met en forme au moyen de la page XSLT et affiche la page résultante dans le navigateur.

Voir aussi



« Liaison d'une page XSLT à une page XML » à la page 425

« Utilisation de XML et XSL dans des pages Web » à la page 401

« Transformations XSL côté client » à la page 404


Création de pages XSL

T

entières et affichage des données

Vous devez utiliser une page XSLT entières pour les transformations côté client. Les fragments XSLT ne sont pas pris en charge par ce type de transformation. Suivez les instructions générales suivantes pour créer des pages XSLT, y lier des données XML et les mettre en forme pour des transformations côté client :

1.

T

.

2.

T

.

3.

T

.

Voir aussi

« Création d'une page XSLT » à la page 409

« Affichage des éléments répétés XML » à la page 412

« Résolution des problèmes liés aux transformations XSL » à la page 424

Liaison d'une page XSL

T

à une page XML

Une fois que vous avez créé une page XSLT entière contenant des espaces réservés de contenu dynamique pour vos données

XML, vous devez insérer une référence à la page XSLT dans la page XML.

DREAMWEAVER CS3


426

Remarque :

Les fichiers XML et XSL que vous utilisez dans les transformations côté client doivent résider dans un même répertoire. Si tel n'est pas le cas, le navigateur lit le fichier XML et trouve la page XLST à utiliser pour la transformation, mais ne peut pas localiser les actifs (feuilles de style, images etc.) définis par les liens relatifs dans la page XSLT.

1

Ouvrez le fichier XML que vous souhaitez lier à votre page XSLT

2

Sélectionnez Commandes > Associer une feuille de style XSLT.

3

Dans la boîte de dialogue, cliquez sur le bouton Parcourir, localisez la page XSLT à associer, sélectionnez-la et cliquez sur OK.

4

Cliquez sur OK pour fermer la boîte de dialogue et insérer la référence à la page XSLT en haut du document XML.

Résolution des problèmes liés aux transformations XSL

Si vous ne parvenez pas à faire fonctionner vos transformations XSL, consultez le guide de dépannage disponible à l'adresse www.adobe.com/go/dw_xsl_faq_fr . Ce guide répond à de nombreuses questions posées fréquemment.

Entités de caractère manquant

Spécification d'une entité de caractère manquant

Dans le langage XSLT, certains caractères ne sont pas pris en charge dans certains contextes. Il est par exemple impossible d'utiliser le signe inférieur à (<) et l'esperluette (&) dans du texte placé entre des balises ou dans une valeur d'attribut. Le moteur de transformation XSLT renvoie une erreur si ces caractères sont utilisés incorrectement. Pour résoudre ce problème, vous pouvez remplacer les caractères spéciaux par des entités de caractères.

Une entité de caractère est une chaîne de caractères représentant d'autres caractères. Les entités de caractères sont nommées ou numérotées. Une entité nommée commence par une esperluette (&) suivie du nom ou des caractères et se termine par un point-virgule (;). Par exemple,

<

représente le chevron gauche (<). Les entités numérotées commencent et se terminent de la même façon, mais le signe dièse (#) et un nombre spécifient le caractère.

XSLT propose cinq entités prédéfinies :

Caractère

< ( inf

é rieur

à)

& ( esper l uette )

> ( sup

é rieur

à)

" ( gui ll emets )

‘ ( apostrophe

)

Code d'entité

&l t;

& amp;

& gt;

& quot;

& apos;

Si vous utilisez d'autres entités de caractères dans un fichier XSL, vous devez les définir dans la section DTD du fichier XSL.

Dreamweaver fournit plusieurs définitions d'entité par défaut que vous pouvez voir en haut de tout fichier XSL créé dans

Dreamweaver. Ces entités par défaut couvrent un grand nombre de caractères courants.

Lorsque vous affichez un aperçu de votre fichier XSL dans un navigateur, Dreamweaver vérifie la présence d'entités indéfinies dans le fichier XSL et vous avertit si une telle entité est détectée.

Si vous affichez l'aperçu d'un fichier XML associé à un fichier XSLT ou une page côté serveur associée à une transformation

XSLT, c'est le serveur ou le navigateur (et non Dreamweaver) qui affiche ce message d'avertissement. L'exemple suivant illustre le message que Internet Explorer est susceptible de renvoyer lorsque vous demandez la transformation d'un fichier

XML par un fichier XLS dans lequel une entité n'est pas définie.

Reference to undefined entity 'auml'. Error processing resource 'http://localhost/testthis/list.xsl'.

Line 28, Position 20

<p class=''test''>ä</p>

-------------------^

Pour corriger l'erreur sur votre page, vous devez y ajouter la définition d'entité manuellement.

DREAMWEAVER CS3


427

Spécification d'une définition d'entité manquante

1

Recherchez le caractère manquant dans la page de référence des entités de caractères sur le site Web du W3C www.w3.org/TR/REC-html40/sgml/entities.html

.

Cette page Web contient les 252 entités prises en charge par les langages HTML 4 et XHTML 1.0.

W3C. Vous y trouverez les informations suivantes :

<!ENTITY Egrave CDATA "È" -- latin capital letter E with grave, U+00C8 ISOlat1 -->

2

Prenez note du nom et du code de l'entité.

Dans notre exemple,

Egrave

est le nom de l'entité et

&#200

est le code de l'entité.

3

Muni de ses informations, passez en mode Code et tapez la balise d'entité suivante en haut de votre fichier XSL (après la

<!ENTITY

entityname

"

entitycode

;">

Dans notre exemple, vous taperiez la balise d'entité suivante :

<!ENTITY Egrave "È">

4


Si vous utilisez régulièrement les mêmes entités de caractères, il est préférable d'ajouter leur définition dans les fichiers XSL créés par défaut par Dreamweaver lorsque vous utilisez Fichier > Nouveau.

Ajout de définitions d'entité dans les fichiers XSL créés par défaut par Dreamweaver

1

Localisez le fichier de configuration suivant dans le dossier d'application Dreamweaver et ouvrez-le dans un éditeur de texte :

Configuration/DocumentTypes/MMDocumentTypeDeclarations.xml

2

Localisez la déclaration mm_xslt_1 :

<documenttypedeclaration id="mm_xslt_1">

3

Tapez la ou les nouvelles balises d'entité dans la liste de balises d'entité, comme suit :

<!ENTITY

entityname

"

entitycode

;">

4

Enregistrez le fichier et redémarrez Dreamweaver.

Chapitre 16 : Création visuelle de pages

Spry

Le cadre applicatif Spry est une bibliothèque JavaScript et CSS qui vous permet de créer des pages Web plus riches. Vous pouvez employer ce cadre applicatif pour afficher des données XML et créer des éléments de page interactifs qui affichent des données dynamiques sans exiger l'actualisation de la page entière.

A propos du cadre applicatif Spry

A propos du cadre applicatif Spry

Le cadre applicatif Spry est une bibliothèque JavaScript qui permet aux concepteurs Web de créer des pages Web offrant une expérience enrichie aux visiteurs de leurs sites. Avec Spry, vous pouvez utiliser du code HTML et CSS, ainsi qu'une quantité minime de JavaScript, afin d'incorporer des données XML dans vos documents HTML, de créer des widgets tels que des accordéons et des barres de menus, ou encore ajouter différents effets à divers éléments de page. Le cadre applicatif

Spry est conçu de telle sorte que le marquage est simple et facile à utiliser pour toute personne possédant une connaissance de base du langage HTML, de CSS et de JavaScript.

Le cadre applicatif Spry est principalement destiné aux professionnels de la conception Web ou aux concepteurs Web amateurs expérimentés. Il n'est pas destiné à servir de cadre d'applications Web à part entière pour le développement Web au niveau de l'entreprise, bien qu'il puisse être employé en combinaison avec d'autres pages au niveau de l'entreprise.

Pour plus d'informations sur le cadre applicatif Spry, consultez le site www.adobe.com/go/learn_dw_spryframework_fr .

Vous trouverez un didacticiel consacré à l'utilisation de Spry pour créer des pages Web à l'adresse www.adobe.com/go/vid0166_fr ..

Ajout de widgets Spry

A propos des widgets Spry

Un widget Spry est un élément de page qui fournit une expérience utilisateur enrichie en permettant l'interaction de

Structure du widget

Bloc de code HTML qui définit la composition structurelle du widget.

Comportement du widget

JavaScript qui détermine comment le widget répond aux événements provoqués par l'utilisateur.

Style du Widget

CSS qui définit l'apparence du widget.

Le cadre applicatif Spry prend en charge un ensemble de widgets réutilisables rédigés en code HTML, CSS et JavaScript standard. Vous pouvez insérer aisément ces widgets, dont le code est du langage HTML et CSS extrêmement simple, puis définir le style du widget. Les comportements du cadre applicatif comprennent des fonctionnalités qui permettent aux utilisateurs d'afficher ou de masquer du contenu sur la page, de modifier l'apparence de la page (par exemple sa couleur), d'interagir avec des menus, et bien plus encore.

Chaque widget du cadre applicatif Spry est associé à des fichiers CSS et JavaScript uniques. Le fichier CSS contient toutes les informations requises pour définir le style du widget, alors que le fichier JavaScript lui confère ses fonctionnalités.

Lorsque vous insérez un widget à l'aide de l'interface Dreamweaver, Dreamweaver lie automatiquement ces fichiers à votre page, de sorte que votre widget contienne les fonctionnalités et le style requis.

428

DREAMWEAVER CS3


429

Les fichiers CSS et JavaScript associés à un widget sont nommés selon ce dernier. De la sorte, vous saurez aisément quels fichiers correspondent à chaque widget. Par exemple, les fichiers associés au widget Accordéon sont nommés

SpryAccordion.css et SpryAccordion.js. Lorsque vous insérez un widget dans une page enregistrée, Dreamweaver crée un répertoire SpryAssets dans votre site et y place les fichiers JavaScript et CSS correspondants.

Vous trouverez un didacticiel consacré à l'emploi des widgets Spry à l'adresse www.adobe.com/go/vid0167_fr .

Voir aussi


Insertion d'un widget Spry

❖

Choisissez Insertion > Spry puis sélectionnez le widget à insérer.

Lorsque vous insérez un widget, Dreamweaver ajoute automatiquement les fichiers JavaScript et CSS Spry requis dans votre site lorsque vous enregistrez la page.

Remarque :

Vous pouvez également insérer des widgets Spry par l'intermédiaire de la catégorie Spry de la barre Insertion.

Sélection d'un widget Spry

1

Maintenez le pointeur de la souris au-dessus du widget jusqu'à ce que le contour bleu du widget soit visible.

2

Cliquez sur l'onglet du widget, dans son coin supérieur gauche.

Modification d'un widget Spry

❖

Sélectionnez le widget à modifier puis apportez les modifications désirées dans l'inspecteur Propriétés (Fenêtre >

Propriétés).

Pour plus d'informations sur la modification de widgets spécifiques, consultez les sections relatives à chacun d'eux.

Définition du style d'un widget Spry

❖

Accédez le fichier CSS approprié pour le widget dans le dossier SpryAssets de votre site, puis modifiez ce fichier CSS selon vos préférences.

Pour plus d'informations sur la définition du style de widgets spécifiques, consultez les sections de personnalisation relatives à chacun d'eux.

Vous pouvez également définir le style d'un widget Spry en modifiant les styles dans le panneau CSS, comme vous le feriez pour tout autre élément de la page possédant un style.

Modification du dossier par défaut des actifs Spry

Lorsque vous insérez un widget, un jeu de données ou un effet Spry dans une page enregistrée, Dreamweaver crée un répertoire SpryAssets dans votre site et y place les fichiers JavaScript et CSS correspondants. Vous pouvez modifier l'emplacement par défaut où Dreamweaver enregistre les actifs Spry si vous préférez les enregistrer ailleurs.

1


2

Sélectionnez votre site dans la boîte de dialogue Gérer les sites, puis cliquez sur Modifier.

3

Sélectionnez la catégorie Spry dans la boîte de dialogue Gérer les sites.

4

Entrez le chemin d'accès au dossier à utiliser pour les actifs Spry, puis cliquez sur OK. Vous pouvez également cliquer sur l'icône du dossier afin d'accéder à l'emplacement désiré.

Voir aussi

« Définition d'un ensemble de données XML Spry » à la page 456

« Présentation des effets Spry » à la page 462

DREAMWEAVER CS3


430

B

Utilisation du widget accordéon

A propos du widget accordéon

Un widget Accordéon est un ensemble de panneaux réductibles pouvant stocker une grande quantité de contenu tout en restant compact. Les visiteurs du site affichent ou masquent le contenu stocké dans l'accordéon en cliquant sur l'onglet du panneau. Les panneaux de l'accordéon se développent ou se réduisent à mesure que le visiteur clique sur les différents onglets. Dans un accordéon, un seul panneau de contenu est ouvert et visible à tout moment. L'exemple suivant montre un widget Accordéon dont le deuxième panneau est développé :

A

C

A.

Onglet du panneau accordéon

B.

Contenu du panneau accordéon

C.

Panneau accordéon (ouvert)

Le code HTML par défaut du widget Accordéon comprend une balise div

extérieure contenant tous les panneaux, une balise div

pour chaque panneau, ainsi qu'une balise div

d'en-tête et une balise div

de contenu à l'intérieur de la balise pour chaque panneau. Un widget Accordéon peut contenir n'importe quel nombre de panneaux distincts. Le code HTML du widget Accordéon comprend également des balises script

dans l'en-tête du document et après le marquage HTML de l'accordéon.

Vous trouverez une explication plus détaillée du fonctionnement du widget Accordéon, ainsi qu'une description complète de son code, à l'adresse www.adobe.com/go/learn_dw_spryaccordion_fr .

Insertion du widget Accordéon

❖

Choisissez Insertion > Spry > Accordéon Spry.

Remarque :

Vous pouvez également insérer un widget Accordéon par l'intermédiaire de la catégorie Spry de la barre Insertion.

Ajout d'un panneau à un widget Accordéon

1

Sélectionnez un widget Accordéon dans la fenêtre de document.

2

Cliquez sur le bouton Plus (+) de l'inspecteur Propriétés (Fenêtre > Propriétés).

3

(Facultatif) Modifiez le nom du panneau en sélectionnant son texte en mode Création puis en apportant les modifications désirées.

Suppression d'un panneau d'un widget Accordéon

1


2

Dans le menu Panneaux de l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez le nom du panneau à supprimer puis cliquez sur le bouton Moins (-).

DREAMWEAVER CS3


431

O

uverture d'un panneau à modifier

❖

•

Placez le pointeur de la souris au-dessus de l'onglet du panneau pour l'ouvrir en mode création, puis cliquez sur l'icône représentant un oeil qui s'affiche sur la droite de l'onglet.

•

Sélectionnez un widget Accordéon dans la fenêtre de document, puis cliquez sur le nom du panneau pour le modifier dans le menu Panneaux de l'inspecteur Propriétés (Fenêtre > Propriétés).

Modification de l'ordre des panneaux

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez le nom du panneau accordéon à déplacer.

3

Cliquez sur les flèches vers le haut ou vers le bas pour monter ou descendre le panneau.

Personnalisation du widget Accordéon

Bien que l'inspecteur Propriétés permette d'apporter des modifications simples à un widget Accordéon, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget Accordéon de manière à créer un accordéon adapté à vos besoins. Vous trouverez la liste des tâches de définition de style avancées à l'adresse www.adobe.com/go/learn_dw_spryaccordion_custom_fr .

Toutes les règles CSS des sections suivantes font référence aux règles par défaut, qui figurent dans le fichier

SpryAccordion.css. Dreamweaver enregistre le fichier SpryAccordion.css dans le dossier SpryAssets de votre site dès que vous créez un widget Accordéon Spry. Ce fichier contient également des informations commentées au sujet de divers styles qui s'appliquent au widget. Il peut dès lors être utile de consulter également le fichier.

Même s'il est facile de modifier directement les règles du widget Accordéon dans le fichier CSS, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS de l'accordéon. Le panneau Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode Actuel du panneau.

Voir aussi

« Panneau Styles CSS en mode Actuel » à la page 122

Définition du style du widget Accordéon

Vous pouvez définir le style du texte d'un widget Accordéon en définissant des propriétés pour le conteneur entier du widget Accordéon, ou en définissant des propriétés distinctes pour chaque composant du widget.

❖

Pour modifier le style du texte d'un widget Accordéon, recherchez la règle CSS appropriée dans le tableau suivant, puis ajoutez vos propriétés et valeurs de style du texte.

T exte à modifier Règle CSS pertinente Exemple de propriétés et de valeurs à ajouter

font : A ria l ; font si z e : medium; T e x te dans l' accord é on entier ( ong l et et panneau de contenu

)

.

A ccordion ou .

A ccordion P ane l

T e x te dans l es ong l ets du panneau accord

é on uniquement

.

A ccordion P ane lT ab

T e x te dans l es panneau x de contenu de l' accord

é on uniquement

.

A ccordion P ane lC ontent font : A ria l ; font si z e : medium; font : A ria l ; font si z e : medium;

Modification des couleurs d'arrière-plan du widget Accordéon

❖

Pour modifier les couleurs d'arrière-plan des différentes parties d'un widget Accordéon, recherchez la règle CSS appropriée dans le tableau suivant, puis ajoutez ou modifiez les propriétés et les valeurs de couleur d'arrière-plan.

DREAMWEAVER CS3


432

Partie du widget à modifier Règle CSS pertinente

C ou l eur d ' arri è re p l an des ong l ets du panneau accord

é on

.

A ccordion P ane lT ab

C ou l eur d ' arri è re p l an des panneau x de contenu de

l' accord

é on

.

A ccordion P ane lC ontent

C ou l eur d ' arri è re p l an du panneau accord

é on ouvert

.

A ccordion P ane l Open

.

A ccordion

P ane lT ab

C ou l eur d ' arri è re p l an des ong l ets de panneau

l orsque

l e pointeur de

l a souris passe au dessus

.

A ccordion P ane lT abHover

C ou l eur d

' arri

è re

p l an de

l' ong l et de panneau ouvert l orsque l e pointeur de l a souris passe au

dessus

.

A ccordion

P ane l

Open

.

A ccordion P ane lT abHover

Exemple de propriété et de valeur à ajouter ou modifier

bac k ground co l or : #CCCCCC ; (V a l eur par d

é faut

) bac k ground co l or : #CCCCCC ; bac k ground co l or : #EEEEEE ; (V a l eur par d

é faut

) co l or : #555555 ; (V a l eur par d é faut ) co l or

: #555555

;

(V a l eur par d

é faut

)

Limitation de la largeur d'un accordéon

Par défaut, le widget Accordéon se développe pour occuper l'espace disponible. Vous pouvez toutefois limiter la largeur

1

Repérez la règle CSS .Accordion en ouvrant le fichier SpryAccordion.css. Il s'agit de la règle qui définit les propriétés de l'élément conteneur principal du widget Accordéon.

Vous pouvez également trouver cette règle en sélectionnant le widget Accordéon puis en examinant le panneau Styles CSS

(Fenêtre > Styles CSS). Assurez-vous que le panneau se trouve en mode Actuel.

2

Ajoutez une propriété et une valeur de largeur (width) à la règle, par exemple width: 300px;

.

Utilisation du widget de barre de menu

A propos du widget de barre de menu

Un widget Barre de menus est un ensemble de boutons de menu de navigation. Lorsque le visiteur d'un site place le pointeur de la souris au-dessus de ces boutons, ils affichent des sous-menus. Les barres de menus permettent d'afficher une grande quantité d'informations de navigation dans un espace compact et de donner aux visiteurs du site un aperçu de son contenu sans les contraindre à l'explorer dans ses moindres recoins.

Dreamweaver permet d'insérer deux types de widgets Barre de menus : une barre verticale et l'autre horizontale. L'exemple suivant montre un widget Barre de menus horizontale, dont le troisième élément de menu est développé :

A

B

Widget Barre de menus (consistant en balises <ul>, <li> et <a>)

A.

Elément de menu avec sous-menu

B.

Elément de sous-menu avec sous-menu

Le code HTML du widget Barre de menus comprend une balise ul

extérieure contenant une balise li

pour chaque élément de menu de niveau supérieur. Les éléments de menu de niveau supérieur (balises li

) contiennent à leur tous des balises ul et li

qui définissent les sous-menus de chacun d'eux. Ces sous-menus peuvent à leur tour comprendre des sous-menus. Les menus de niveau supérieur et les sous-menus peuvent contenir autant d'éléments de sous-menu que vous le souhaitez.

DREAMWEAVER CS3


433

Vous trouverez une explication plus détaillée du fonctionnement du widget Barre de menus, ainsi qu'une description complète de son code, à l'adresse www.adobe.com/go/learn_dw_sprymenubar_fr .

Vous trouverez un didacticiel consacré à la création d'une barre de menus Spry à l'adresse www.adobe.com/go/vid0168_fr .

Insertion du widget Barre de menus

1

Choisissez Insertion > Spry > Barre de menus Spry.

2

Sélectionnez Horizontale ou Verticale, puis cliquez sur OK.

Remarque :

Vous pouvez également insérer un widget Barre de menus par l'intermédiaire de la catégorie Spry de la barre

Insertion.

Remarque :

Le widget Barre de menus Spry emploie des calques DHTML pour afficher des sections de code HTML au-dessus d'autres sections. Si votre page comporte du contenu Flash, un problème peut se poser. Les animations Flash sont en effet toujours affichées au-dessus de tous les autres calques DHTML, si bien qu'il se peut que le contenu Flash s'affiche au-dessus de vos sous-menus. La solution à ce problème consiste à modifier les paramètres de l'animation Flash, de manière à employer

wmode="transparent"

. Pour plus d'informations, consultez le site www.adobe.com/go/15523_fr .

Ajout ou suppression de menus et de sous-menus

L'inspecteur Propriétés (Fenêtre > Propriétés) permet d'ajouter des éléments de menu au widget Barre de menus et d'en supprimer.

Ajout d'un élément de menu principal

1

Sélectionnez un widget Barre de menus dans la fenêtre de document.

2

Dans l'inspecteur Propriétés, cliquez sur le bouton Plus au-dessus de la première colonne.

3

(Facultatif) Renommez le nouvel élément de menu en modifiant son texte par défaut, dans la fenêtre de document ou dans la zone de texte de l'inspecteur Propriétés.

Ajout d'un élément de sous-menu

1


2

Dans l'inspecteur Propriétés, sélectionnez le nom de l'élément de menu principal auquel vous voulez ajouter le sous-menu.

3

Cliquez sur le bouton Plus au-dessus de la deuxième colonne.

4

(Facultatif) Renommez le nouvel élément de sous-menu en modifiant son texte par défaut, dans la fenêtre de document ou dans la zone de texte de l'inspecteur Propriétés.

Pour ajouter un sous-menu à un sous-menu, sélectionnez le nom de ce dernier, puis cliquez sur le bouton Plus au-dessus de la troisième colonne de l'inspecteur Propriétés.

Remarque :

Dreamweaver ne prend en charge que deux niveaux de sous-menus en mode Création, mais vous pouvez en ajouter autant que vous le voulez en mode Code.

Suppression d'un élément de menu principal ou de sous-menu

1


2

Dans l'inspecteur Propriétés, sélectionnez le nom de l'élément de menu principal ou de sous-menu à supprimer, puis cliquez sur le bouton Moins.

Modification de l'ordre des éléments de menu

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez le nom de l'élément de menu à déplacer.

3

Cliquez sur les flèches vers le haut ou vers le bas pour monter ou descendre l'élément de menu.

DREAMWEAVER CS3


434

Modification du texte d'un élément de menu

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez le nom de l'élément de menu dont vous voulez modifier le texte.

3

Apportez les modifications désirées dans la zone de texte.

Liaison d'un élément de menu

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez le nom de l'élément de menu auquel vous voulez appliquer un lien.

3

Entrez le lien dans la zone Lien ou cliquez sur l'icône représentant un dossier afin de rechercher un fichier.

Création d'une infobulle pour un élément de menu

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez le nom de l'élément de menu pour lequel vous voulez créer une infobulle.

3

Entrez le texte de l'infobulle dans la zone Titre.

Attribution d'un attribut cible à un élément de menu

L'attribut cible détermine l'endroit où une page liée doit être ouverte. Par exemple, vous pouvez attribuer un attribut cible

à un élément de menu de façon à ce que la page liée s'affiche dans une nouvelle fenêtre de navigateur lorsqu'un visiteur du site clique sur son lien. Si vous employez des jeux de cadres, vous pouvez également définir le nom d'un cadre dans lequel la page liée doit s'ouvrir.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez le nom de l'élément de menu auquel vous voulez attribuer un attribut cible.

3

Entrez l'un des quatre attributs dans la zone Cible :

_blank

Ouvre la page liée dans une nouvelle fenêtre du navigateur.

_self

Charge la page liée dans la même fenêtre de navigateur. Il s'agit de l'option par défaut. Si la page se trouve dans un cadre ou un jeu de cadres, elle se charge dans ce cadre.

_parent

Charge le document lié dans le parent de jeu de cadres immédiat du document.

_top

Charge la page liée dans la fenêtre supérieure d'un jeu de cadres.

Désactivation des styles

Vous pouvez désactiver le style d'un widget Barre de menus de manière à mieux voir sa structure HTML en mode Création.

Par exemple, lorsque vous désactivez les styles, les éléments de la barre de menus s'affichent sous la forme d'une liste à puces sur la page et pas sous la forme d'éléments mis en forme dans une barre de menus.

1


2

Cliquez sur le bouton Désactiver les styles de l'inspecteur Propriétés (Fenêtre > Propriétés).

Modification de l'orientation d'un widget Barre de menus

Vous pouvez modifier l'orientation d'un widget Barre de menus, de manière à transformer une barre horizontale en barre verticale et inversement. Il suffit pour ce faire de modifier le code HTML de la barre de menus et de vérifier que votre dossier SpryAssets contient bien le fichier CSS correct.

DREAMWEAVER CS3


435

L'exemple suivant transforme un widget Barre de menus horizontale en widget Barre de menus verticale.

1

Dans Dreamweaver, ouvrez la page qui contient un widget Barre de menus horizontale.

2

Insérez un widget Barre de menus verticale (Insertion > Spry > Barre de menus Spry) puis enregistrez la page. Cette

étape garantit l'inclusion du fichier CSS correct pour une barre de menus verticale dans votre site.

Remarque :

Si votre site comprend déjà un autre widget Barre de menus verticale, il n'est pas nécessaire d'en insérer un nouveau. Vous pouvez vous contenter de joindre le fichier SpryMenuBarVertical.css à la page au lieu de cliquer sur le bouton

Attacher une feuille de style du panneau Styles CSS (Fenêtre > Styles CSS).

3

Supprimez la barre de menus verticale.

4

En mode Code (Affichage > Code), accédez à la classe MenuBarHorizontal et remplacez-la par MenuBarVertical. La classe MenuBarHorizontal est définie dans la balise conteneur ul

de la barre de menus (

<ul id="MenuBar1" class="MenuBarHorizontal">

).

5

Après le code de la barre de menus, accédez au constructeur de la barre : var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

6

Supprimez l'option de préchargement imgDown

(et la virgule) du constructeur : var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

Remarque :

En cas de conversion d'une barre de menus verticale en barre horizontale, vous devez au contraire ajouter l'option de préchargement

imgDown

et la virgule.

7

(Facultatif) Si votre page ne comprend plus d'autres widgets Barre de menus horizontale, supprimez le lien vers l'ancien fichier MenuBarHorizontal.css dans l'en-tête du document.

8

Enregistrez la page.

Personnalisation du widget Barre de menus

Bien que l'inspecteur Propriétés permette d'apporter des modifications simples à un widget Barre de menus, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget Barre de menus de manière à créer une barre de menus adaptée à vos besoins. Vous trouverez la liste des tâches de définition de style avancées à l'adresse www.adobe.com/go/learn_dw_sprymenubar_custom_fr .


SpryMenuBarHorizontal.css ou SpryMenuBarVertical.css (selon l'option sélectionnée). Dreamweaver enregistre ces fichiers CSS dans le dossier SpryAssets de votre site dès que vous créez un widget Barre de menus Spry. Ces fichiers contiennent également des informations commentées au sujet de divers styles qui s'appliquent au widget.

Même s'il est facile de modifier directement les règles du widget Barre de menus dans le fichier CSS qui l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS de la barre de menus. Le panneau Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode

Actuel du panneau.

Voir aussi


Modification du style du texte d'un élément de menu

Le code CSS joint à la balise <a> contient les informations de style du texte. La balise <a> comprend également plusieurs valeurs de classe de style de texte pertinentes qui concernent différents états des menus.

❖

Pour modifier le style du texte d'un élément de menu, recherchez la règle CSS appropriée dans le tableau suivant, puis modifiez sa valeur par défaut :

DREAMWEAVER CS3


436

Style à modifier Règle CSS pour une barre de menus verticale ou horizontale

Propriétés correspondantes et valeurs par défaut

co l or : #333 ; te x t decoration : none; T e x te par d é faut

C ou l eur du te x te l orsque l e pointeur de l a souris se trouve au

dessus de ce l ui

ci u l .

M enu B ar V ertica l a : hover , u l

.

M enu

B arHori z onta l a

: hover

C ou l eur du te x te actif u l .

M enu B ar V ertica l a , u l

.

M enu

B arHori z onta l a u l .

M enu B ar V ertica l a : focus , u l

.

M enu

B arHori z onta l a

: focus co co l l or or

: #FFF

: #FFF ;

;

C ou l eur d ' un élé ment de l a barre de menus

l orsque

l e pointeur de

l a souris se trouve au dessus de ce l ui ci u l .

M enu B ar V ertica l a.

M enu

B arItemHover

, u l .

M enu B arHori z onta l a.

M enu

B arItemHover

C ou l eur d ' un élé ment de sous menu l orsque

l e pointeur de

l a souris se trouve au dessus de ce l ui ci u l .

M enu B ar V ertica l a.

M enu

B arItem

S ubmenuHover

, u l .

M enu B arHori z onta l a.

M enu

B arItem

S ubmenuHover co l or : #FFF ; co l or : #FFF ;

Modification de la couleur d'arrière-plan d'un élément de menu

Le code CSS joint à la balise <a> contient les informations de couleur d'arrière-plan d'un élément de menu. La balise <a> comprend également plusieurs valeurs de classe de couleur d'arrière-plan pertinentes qui concernent différents états des menus.

❖

Pour modifier la couleur d'arrière-plan d'un élément de menu, recherchez la règle CSS appropriée dans le tableau suivant, puis modifiez sa valeur par défaut :

Couleur à modifier Règle CSS pour une barre de menus verticale ou horizontale

Propriétés correspondantes et valeurs par défaut

bac k ground

co l or

: #EEE

;

A rri

è re

p l an par d

é faut

C ou l eur d

' arri

è re

p l an de

l'élé ment l orsque

l e pointeur de

l a souris se trouve au

dessus de ce l ui

ci u l

.

M enu

B ar

V ertica l a

, u l

.

M enu

B arHori z onta l a u u l l

.

.

M

M enu enu

B

B ar

V ertica arHori z l a onta

: hover l a

:

, hover

C ou l eur d

' arri

è re

p l an quand

l'élé ment est actif u l

.

M enu

B ar

V ertica l a

: focus

, u l

.

M enu

B arHori z onta l a

: focus bac bac k k ground ground

-

co co l l or or

: #33C

: #33C

;

; bac k ground

co l or

: #33C

;

C ou l eur d

' un

élé ment de

l a barre de menus

l orsque

l e pointeur de


dessus de ce l ui

ci u l

.

M enu

B ar

V ertica l a.

M enu

B arItemHover

, u l

.

M enu

B arHori z onta l a.

M enu

B arItemHover

C ou l eur d

' un

élé ment de sous

menu l orsque

l e pointeur de


dessus de ce l ui

ci u l

.

M enu

B ar

V ertica l a.

M enu

B arItem

S ubmenuHover

, u l

.

M enu

B arHori z onta l a.

M enu

B arItem

S ubmenuHover bac k ground

co l or

: #33C

;

Modification de la taille des éléments de menu

Vous pouvez modifier la taille des éléments de menu en modifiant les propriétés de largeur des balises li

et ul

de ces

éléments.

1

Accédez à la règle ul.MenuBarVertical li

ou ul.MenuBarHorizontal li

:

2

Modifiez la propriété « auto

pour supprimer une largeur fixe, puis ajoutez la propriété et la valeur white-space: nowrap;

à la règle).

3

Accédez à la règle ul.MenuBarVertical ul

ou ul.MenuBarHorizontal ul

.

4

Modifiez la propriété « auto

pour supprimer une largeur fixe).

5

Accédez à la règle ul.MenuBarVertical ul li

ou ul.MenuBarHorizontal ul li

:

DREAMWEAVER CS3


437

6

Ajoutez les propriétés suivantes à la règle : float: none;

et background-color: transparent;

.

7

Supprimez la propriété width: 8.2em;

et sa valeur.

Définition de la position des sous-menus

La position des sous-menus d'une barre de menus Spry est contrôlée par la propriété « margin ul

du sous-menu.

1

Accédez à la règle ul.MenuBarVertical ul

ou ul.MenuBarHorizontal ul

.

2

Remplacez les valeurs par défaut margin: -5% 0 0 95%;

par les valeurs désirées.

Utilisation du widget de panneau réductible

A propos du widget de panneau réductible

Un widget Panneau réductible est un panneau qui peut stocker du contenu en n'occupant que peu de place. Les utilisateurs affichent ou masquent le contenu stocké dans le panneau réductible en cliquant sur l'onglet du widget. L'exemple suivant montre un widget Panneau réductible développé et réduit :

A

A.

Développé

B.

Réduit

B

Le code HTML du widget Panneau réductible comprend une balise div

extérieure qui comprend la balise de contenu div et la balise conteneur d'onglet div

. Le code HTML du widget Panneau réductible comprend également des balises script dans l'en-tête du document et après le marquage HTML du panneau réductible.

Vous trouverez une explication plus détaillée du fonctionnement du widget Panneau réductible, ainsi qu'une description complète de son code, à l'adresse www.adobe.com/go/learn_dw_sprycollapsiblepanel_fr .

Insertion du widget Panneau réductible

❖

Choisissez Insertion > Spry > Panneau réductible Spry.

Remarque :

Vous pouvez également insérer un widget Panneau réductible par l'intermédiaire de la catégorie Spry de la barre

Insertion.

O

uverture ou fermeture du panneau réductible en mode création

❖

• Placez le pointeur de la souris au-dessus de l'onglet du panneau en mode création, puis cliquez sur l'icône représentant un oeil qui s'affiche sur la droite de l'onglet.

• Sélectionnez un widget Panneau réductible dans la fenêtre de document, puis choisissez Ouvert ou Fermé dans le menu

Affichage de l'inspecteur Propriétés (Fenêtre > Propriétés).

Définition de l'état par défaut d'un widget Panneau réductible

Vous pouvez définir l'état par défaut (ouvert ou fermé) d'un widget Panneau réductible lorsque la page Web est chargée dans un navigateur.

1

Sélectionnez un widget Panneau réductible dans la fenêtre de document.

DREAMWEAVER CS3


438

2

Dans l'inspecteur Propriétés (Fenêtre Propriétés), choisissez Ouvert ou Fermé dans le menu déroulant Par défaut.

Activation ou désactivation de l'animation du widget Panneau réductible

Par défaut, si vous activez l'animation d'un widget Panneau réductible, le panneau s'ouvre et se ferme progressivement, en douceur, lorsque le visiteur du site clique sur son onglet. Si vous désactivez l'animation, le panneau réductible s'ouvre et se ferme brusquement.

1

Sélectionnez un widget Panneau réductible dans la fenêtre de document.

2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez ou désactivez l'option Activer l’animation.

Personnalisation du widget Panneau réductible

Bien que l'inspecteur Propriétés permette d'apporter des modifications simples à un widget Panneau réductible, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget Panneau réductible de manière à créer un panneau réductible adapté à vos besoins. Vous trouverez la liste des tâches de définition de style avancées à l'adresse www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom_fr .


SpryCollapsiblePanel.css. Dreamweaver enregistre le fichier SpryCollapsiblePanel.css dans le dossier SpryAssets de votre site dès que vous créez un widget Panneau réductible. Ce fichier contient également des informations commentées au sujet de divers styles qui s'appliquent au widget.

Même s'il est facile de modifier directement les règles du widget Panneau réductible dans le fichier CSS qui l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du panneau réductible. Le panneau Styles

CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode

Actuel du panneau.

Voir aussi


Définition du style du texte d'un widget Panneau réductible

Vous pouvez définir le style du texte d'un widget Panneau réductible en définissant des propriétés pour le conteneur entier du widget Panneau réductible, ou en définissant des propriétés distinctes pour chaque composant du widget.

❖

Pour modifier le format du texte d'un widget Panneau réductible, recherchez la règle CSS appropriée dans le tableau suivant, puis ajoutez vos propriétés et valeurs de style du texte.

Style à modifier Règle CSS pertinente

T e x te du panneau r

é ductib l e entier

T e x te dans l' ong l et du panneau uniquement

T e x te dans l e panneau de contenu uniquement

.

C o ll apsib l e

P ane l

.

C o ll apsib l e P ane lT ab

.

C o ll apsib l e P ane lC ontent

Exemple de propriétés et de valeurs

à ajouter ou modifier

font

: A ria l

; font

si z e

: medium; font : bo l d 0 .

7 em sans serif; (V a l eur par d

é faut

) font : A ria l ; font si z e : medium;

Modification des couleurs d'arrière-plan du widget Panneau réductible

❖

Pour modifier les couleurs d'arrière-plan des différentes parties d'un widget Panneau réductible, recherchez la règle CSS appropriée dans le tableau suivant, puis ajoutez ou modifiez les propriétés et les valeurs de couleur d'arrière-plan.

DREAMWEAVER CS3


439

C

Couleur à modifier Règle CSS pertinente

C ou l eur d ' arri è re p l an de l' ong l et du panneau

C ou l eur d ' arri è re p l an du panneau de contenu

.

.

C

C o o ll ll apsib apsib l l e e

P

P ane ane lT lC ab ontent

C ou l eur d ' arri è re p l an de l' ong l et quand

l e panneau est ouvert

.

C o ll apsib l e P ane l Open

.

C o ll apsib l e

P ane lT ab

C ou l eur d ' arri è re p l an de l' ong l et d ' un panneau ouvert

l orsque

l e pointeur de l a souris passe au dessus

.

C o ll apsib l e P ane lT abHover ,

.

C o ll apsib l e

P ane l

Open

.

C o ll apsib l e P ane lT abHover


bac k ground co l or : #DDD ; (V a l eur par d

é faut

) bac k ground co l or : #DDD ; bac k ground co l or : #EEE ; (V a l eur par d

é faut

) bac k ground co l or : #CCC ; (V a l eur par d

é faut

)

Limitation de la largeur d'un panneau réductible

Par défaut, le widget Panneau réductible se développe pour occuper l'espace disponible. Vous pouvez toutefois limiter la

1

Recherchez la règle CSS .CollapsiblePanel en ouvrant le fichier SpryCollapsible Panel.css. Cette règle définit les propriétés de l'élément conteneur principal du widget Panneau réductible.

Vous pouvez également trouver cette règle en sélectionnant le widget Panneau réductible puis en examinant le panneau

Styles CSS (Fenêtre > Styles CSS). Assurez-vous que le panneau se trouve en mode Actuel.

2


.

Utilisation du widget de panneau à onglet

A propos du widget de panneau à onglet

Un widget Panneaux à onglet est un ensemble de panneaux qui peuvent stocker du contenu en n'occupant que peu de place.

Les visiteurs du site affichent ou masquent le contenu stocké dans les panneaux à onglet en cliquant sur l'onglet du panneau auquel ils veulent accéder. Les panneaux du widget s'ouvrent à mesure que le visiteur clique sur les différents onglets. Dans un widget Panneaux à onglet, un seul panneau de contenu est ouvert à tout moment. L'exemple suivant montre un widget

Panneaux à onglet dont le troisième panneau est ouvert :

A B

D

A.

Onglet

B.

Contenu

C.

Widget Panneaux à onglet

D.

Panneau à onglet

Le code HTML du widget Panneaux à onglet comprend une balise extérieure div

qui contient tous les panneaux, la liste des onglets, une div

comprenant les panneaux de contenu, ainsi qu'une div

pour chaque panneau de contenu. Le code HTML du widget Panneaux à onglet comprend également des balises script dans l'en-tête du document et après le marquage

HTML du widget Panneau à onglet.

Vous trouverez une explication plus détaillée du fonctionnement du widget Panneaux à onglet, ainsi qu'une description complète de son code, à l'adresse www.adobe.com/go/learn_dw_sprytabbedpanels_fr .

DREAMWEAVER CS3


440

Insertion du widget Panneaux à onglet

❖

Choisissez Insertion > Spry > Panneaux à onglet Spry.

Remarque :

Vous pouvez également insérer un widget Panneaux à onglet par l'intermédiaire de la catégorie Spry de la barre

Insertion.

Ajout d'un panneau à un widget Panneaux à onglet

1

Sélectionnez un widget Panneaux à onglet dans la fenêtre de document.

2

Cliquez sur le bouton Plus de l'inspecteur Propriétés (Fenêtre > Propriétés).

3

(Facultatif) Modifiez le nom de l'onglet en sélectionnant son texte en mode Création puis en apportant les modifications désirées.

Suppression d'un panneau d'un widget Panneaux à onglet

1


2

Dans le menu Panneaux de l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez le nom du panneau à supprimer puis cliquez sur le bouton Moins.

O

uverture d'un panneau à modifier

❖

•

Placez le pointeur de la souris au-dessus de l'onglet du panneau pour l'ouvrir en mode création, puis cliquez sur l'icône représentant un oeil qui s'affiche sur la droite de l'onglet.

•

Sélectionnez un widget Panneaux à onglet dans la fenêtre de document, puis cliquez sur le nom du panneau pour le modifier dans le menu Panneaux de l'inspecteur Propriétés (Fenêtre > Propriétés).

Modification de l'ordre des panneaux

1


2

Dans le menu Panneaux de l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez le nom du panneau à déplacer.

3

Cliquez sur les flèches vers le haut ou vers le bas pour monter ou descendre le panneau.

Définition du panneau ouvert par défaut

Vous pouvez déterminer quel panneau du widget Panneaux à onglet est ouvert par défaut lorsque la page est ouverte dans un navigateur.

1


2

Dans l'inspecteur Propriétés (Fenêtre Propriétés), sélectionnez le panneau à ouvrir par défaut dans le menu déroulant

Par défaut.

Personnalisation du widget Panneaux à onglet

Bien que l'inspecteur Propriétés permette d'apporter des modifications simples à un widget Panneaux à onglet, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget Panneaux à onglet de manière à créer un widget adapté à vos besoins. Vous trouverez la liste des tâches de définition de style avancées

à l'adresse www.adobe.com/go/learn_dw_sprytabbedpanels_custom_fr .


SpryTabbedPanels.css. Dreamweaver enregistre le fichier SpryTabbedPanels.css dans le dossier SpryAssets de votre site dès que vous créez un widget Panneaux à onglets. Ce fichier contient également des informations commentées au sujet de divers styles qui s'appliquent au widget.

DREAMWEAVER CS3


441

Même s'il est facile de modifier directement les règles du widget Panneaux à onglet dans le fichier CSS qui l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode Actuel du panneau.

Voir aussi


Définition du style du texte d'un widget Panneaux à onglet

Vous pouvez définir le style du texte d'un widget Panneaux à onglet en définissant des propriétés pour le conteneur entier du widget Panneaux à onglet, ou en définissant des propriétés distinctes pour chaque composant du widget.

❖

Pour modifier le style du texte d'un widget Panneaux à onglet, recherchez la règle CSS appropriée dans le tableau suivant, puis ajoutez vos propriétés et valeurs de style du texte.

T exte à modifier Règle CSS pertinente

T e x te dans

l e

w idget entier

T e x te dans l es ong l ets du panneau uniquement

T e x te dans l es panneau x de contenu uniquement

.

T abbed

P ane l s

.

T abbed P ane l s T ab G roup ou

.

T abbed

P ane l s

T ab

.

T abbed P ane l s C ontent G roup ou

.

T abbed

P ane l s

C ontent

Exemple de propriétés et de valeurs

à ajouter

font

: A ria l

; font

si z e

: medium; font : A ria l ; font si z e : medium; font : A ria l ; font si z e : medium;

Modification des couleurs d'arrière-plan du widget Panneaux à onglet

❖

Pour modifier les couleurs d'arrière-plan des différentes parties d'un widget Panneaux à onglet, recherchez la règle CSS appropriée dans le tableau suivant, puis ajoutez ou modifiez les propriétés et les valeurs de couleur d'arrière-plan.

Couleur à modifier Règle CSS pertinente

C ou l eur d

' arri

è re

p l an des ong l ets du panneau

C ou l eur d

' arri

è re

p l an de

l' ong l et s

él ectionn

é

.

T abbed

P ane l s

T ab

G roup ou

.

T abbed

P ane l s

T ab

C ou l eur d

' arri

è re

p l an des panneau x de contenu

.

T abbed

P ane l s

C ontent

G roup ou

.

T abbed

P ane l s

C ontent

.

T abbed

P ane l s

T ab

S e l ected

C ou l eur d

' arri

è re

p l an des ong l ets du panneau ouvert

l orsque

l e pointeur de l a souris passe au

dessus de ceu xci

.

T abbed

P ane l s

T abHover


bac k ground

co l or

: #DDD

;

(V a l eur par d

é faut

) bac k ground

co l or

: #EEE

;

(V a l eur par d

é faut

) bac k ground

co l or

: #EEE

;

(V a l eur par d

é faut

) bac k ground

co l or

: #CCC

;

(V a l eur par d

é faut

)

Limitation de la largeur de panneaux à onglet

Par défaut, le widget Panneaux à onglet se développe pour occuper l'espace disponible. Vous pouvez toutefois limiter la

1

Recherchez la règle CSS .TabbedPanels en ouvrant le fichier SpryTabbedPanels.css. Cette règle définit les propriétés de l'élément conteneur principal du widget Panneaux à onglet.

Vous pouvez également trouver cette règle en sélectionnant le widget Panneaux à onglet puis en examinant le panneau

Styles CSS (Fenêtre > Styles CSS). Assurez-vous que le panneau se trouve en mode Actuel.

2


.

DREAMWEAVER CS3


442

Utilisation du widget Validation de zone de texte

A propos du widget Validation de zone de texte

Le widget Validation Spry de champ de texte est un champ de texte qui affiche des états valides ou non valides lorsque le visiteur du site entre du texte. Par exemple, vous pouvez ajouter un widget Validation de zone de texte à un formulaire dans affiche un message qui indique que les informations entrées ne sont pas valides.

A

B

C

D

A.

Widget Champ de texte, conseil activé

B.

Widget Champ de texte, état valide

C.

Widget Champ de texte, état non valide

D.

Widget Champ de texte, état obligatoire

Le widget Validation de zone de texte peut posséder divers états (par exemple valide, non valide, valeur obligatoire, etc.).

Vous pouvez modifier les propriétés de ces états à l'aide de l'inspecteur Propriétés, en fonction des résultats de validation désirés. Un widget Validation de zone de texte peut effectuer une validation à différents moments, par exemple lorsque le visiteur clique en dehors du widget, pendant qu'il entre des données ou lorsqu'il tente d'envoyer le formulaire.

Etat initial

Etat du widget lorsque la page se charge dans le navigateur, ou lorsque l'utilisateur réinitialise le formulaire.

Etat actif

Etat du widget lorsque l'utilisateur place le point d'insertion à l'intérieur.

Etat valide

Etat du widget lorsque l'utilisateur a entré des informations correctes, ce qui permet l'envoi du formulaire.

Etat non valide

lieu de 2006.

Etat du widget si l'utilisateur a entré du texte dans un format non valide. Par exemple, 06 pour l'année au

Etat obligatoire

Etat du widget lorsque l'utilisateur n'a pas entré du texte obligatoire dans la zone de texte.

N ombre minimal de caractères

Etat du widget lorsque l'utilisateur a entré moins de caractères que le nombre minimal requis pour le champ de texte.

N ombre maximal de caractères

Etat du widget lorsque l'utilisateur a entré plus de caractères que le nombre maximal admis pour le champ de texte.

Valeur minimale

Etat du widget lorsque l'utilisateur a entré une valeur inférieure à la valeur requise par la zone de texte.

S'applique aux validations de type entier, réel et date.

Valeur maximale

Etat du widget lorsque l'utilisateur a entré une valeur supérieure à la valeur maximale admise par la zone de texte. S'applique aux validations de type entier, réel et date.

Lorsqu'un widget Validation de zone de texte passe dans l'un de ces états suite à l'interaction avec l'utilisateur, la logique du cadre applicatif Spry applique une classe CSS spécifique au conteneur HTML pour le widget lors de l'exécution. Par exemple, si un utilisateur tente d'envoyer un formulaire mais n'a pas entré de texte dans un champ obligatoire, Spry applique au widget une classe qui le force à afficher le message d'erreur « Vous devez entrer une valeur ». Les règles qui contrôlent le style et les états d'affichage de messages d'erreur se trouvent dans le fichier CSS qui accompagne le widget,

SpryValidationTextField.css.

DREAMWEAVER CS3


443

Le code HTML par défaut du widget Validation de zone de texte, généralement dans un formulaire, contient une balise conteneur <span> qui entoure la balise <input> du champ de texte. Le code HTML du widget Validation de zone de texte comprend également des balises script dans l'en-tête du document et après le marquage HTML du widget.

Vous trouverez une explication plus détaillée du fonctionnement du widget Validation de zone de texte, ainsi qu'une description complète de son code, à l'adresse www.adobe.com/go/learn_dw_sprytextfield_fr .

Insertion du widget Validation de zone de texte

1

Choisissez Insertion > Spry > Validation Spry de champ de texte.

2

Complétez la boîte de dialogue Attributs d'accessibilité à des balises objet, puis cliquez sur OK.

Remarque :

Vous pouvez également insérer un widget Validation de zone de texte par l'intermédiaire de la catégorie Spry de la barre Insertion.

Voir aussi

« Création de formulaires HTML accessibles » à la page 584

Définition d'un type de validation et d'un format

Vous pouvez définir différents types de validation pour le widget Validation de zone de texte. Par exemple, vous pouvez définir un type de validation Carte de crédit si la zone de texte est destinée à contenir des numéros de carte de crédit.

1

Sélectionnez un widget Validation de zone de texte dans la fenêtre de document.

2

Dans l'inspecteur Propriétés (Fenêtre Propriétés), choisissez un type de validation dans le menu déroulant Type.

3

Le cas échéant, sélectionnez un format dans le menu déroulant Format.

Pour la plupart des types de validation, la zone de texte attend un format standard. Par exemple, si vous appliquez le type de validation Entier à une zone de texte, le widget n'effectue de validation que si l'utilisateur a entré des chiffres dans la zone de texte. Toutefois, certains types de validation permettent de choisir le type de format que votre zone de texte acceptera.

Le tableau suivant énumère les types de validation et les formats disponibles dans l'inspecteur Propriétés :

T ype de validation

A ucun

Nombre entier

A dresse

él ectronique

D ate

Heure

C arte de cr

é dit

C ode posta l

Num

é ro de t

élé phone

Format

A ucun format particu l ier requis.

La

z one de te x te n

' accepte que des chiffres.

La

z one de te x te accepte

l es adresses

él ectroniques contenant un

@ et un point

(

.

) pr

é c

é d

é et suivi d

' au moins une

l ettre.

F ormats variab l es.

Sél ectionne zen un dans

l e menu

F ormat de

l' inspecteur

P ropri

é t

é s.



l e menu

F ormat de

l' inspecteur

P ropri

é t

é s.

« tt repr

é sente

l e format am

/ pm et

« t

» l e format a

/ p.



l e menu

F ormat de

l' inspecteur

P ropri

é t

é s.

V ous pouve z d

é cider d

' accepter toutes

l es cartes de cr

é dit ou sp

é cifier un type de carte particu l ier

(M aster

C ard

, V isa

, etc.

)

.

Le champ de te x te n

' accepte pas

l es espaces dans un num

é ro de carte de cr

é dit

( p.e

x

.

4321 3456 4567 4567)

.



l e menu

F ormat de

l' inspecteur

P ropri

é t

é s.

La


l es num

é ros de t

élé phone mis en forme pour

l es

E tats

-

Unis et

l e

C anada

, à savoir

(000) 000-

0000, ou

l es formats personna l is

é s.

S i vous s

él ectionne z l e format personna l is

é, entre z ce format

, par e x emp l e

000

.

00(00), dans

l a

z one

S ch

é ma.

DREAMWEAVER CS3


444

T ype de validation

Num

é ro de s

é curit

é socia l e

D evise

Nombre r

é e l/

Notation scientifique

A dresse I

P

U

R

L

P ersonna l is

é

Format

La


l es num

é ros de s

é curit

é socia l e en format 000-00-0000 .

La


l es devises en format

1,000,000

.

00 ou 1 .

000 .

000,00 .

V a l ide divers types de nombres es entiers

( par e x emp l e

1), l es va l eurs f l ottantes ( par e x emp l e 12,123) et l es va l eurs f l ottantes en notation scientifique

( par e x emp l e

1,212 e

+12,

1,221 e -12, o ù e repr é sente une puissance de 10) .



l e menu

F ormat de l' inspecteur P ropri é t é s.

La


l es U

R

L en format http

://xxx

.

xxx

.

xxx ou ftp ://xxx .

xxx .

xxx .

P ermet de choisir un type et un format de va l idation personna l is é .

E ntre z l e sch é ma du format ( et une indication , si n

é cessaire

), dans

l' inspecteur

P ropri

é t

é s.

Définition du moment de validation

Vous pouvez fixer le moment auquel la validation se produit : quand le visiteur du site clique en dehors du widget, pendant qu'il tape des données ou lorsqu'il tente d'envoyer le formulaire.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez l'option qui indique le moment où vous voulez que la validation se produise. Vous pouvez activer toutes les options ou n'en activer aucune.

Flou

Validation quand l'utilisateur clique en dehors de la zone de texte.

Remplacer

Validation lorsque l'utilisateur modifie du texte à l'intérieur de la zone de texte.

Envoyer

Validation lorsque l'utilisateur tente d'envoyer le formulaire.

Définition d'un nombre minimal et maximal de caractères

Cette option n'est disponible que pour les types de validation Aucun, Nombre entier, Adresse électronique et URL.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), entrez un nombre dans la zone Nbre min. de caract. ou Nbre max. de caract. Par exemple, si vous entrez 3 dans la zone Nbre min. de caract., le widget n'effectue la validation que si l'utilisateur entre au moins 3 caractères.

Définition des valeurs minimale et maximale

Cette option n'est disponible que pour les types de validation Nombre entier, Heure, Devise et Nombre réel/Notation scientifique.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), entrez un nombre dans la zone Valeur min. ou Valeur max. Par exemple, si vous entrez 3 dans la zone Valeur min., le widget n'effectue de validation que si l'utilisateur entre le chiffre 3 ou une valeur plus élevée (4, 5, 6 etc.) dans la zone de texte.

Affichage des états du widget en mode Création

1


2

Dans l'inspecteur Propriétés (Fenêtre Propriétés), sélectionnez l'état à afficher dans le menu déroulant Aperçu des états.

Par exemple, si vous voulez afficher le widget dans son état valide, sélectionnez Valide.

DREAMWEAVER CS3


445

Modification de l'état obligatoire d'une zone de texte

Par défaut, tous les widgets Validation de zone de texte que vous insérez à l'aide de Dreamweaver exigent que l'utilisateur y entre des données lorsqu'ils sont publiés sur une page Web. Vous pouvez toutefois rendre la saisie de texte dans certaines zones facultative pour l'utilisateur.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez ou désactivez l'option Obligatoire, en fonction de vos préférences.

Création d'un conseil pour une zone de texte

Comme les zones de texte peuvent posséder de multiples formats, il peut être utile de donner aux utilisateurs un conseil relatif aux données qu'ils doivent entrer. Par exemple, une zone de texte possédant le type de validation Numéro de téléphone n'accepte que les numéros en format (000) 000-0000. Vous pouvez entrer cet exemple de numéro sous la forme d'un conseil, de manière à ce que la zone affiche le format correct lorsque l'utilisateur charge la page dans un navigateur.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), entrez un conseil dans la zone Conseil.

Blocage des caractères incorrects

Vous pouvez empêcher les utilisateurs d'entrer des caractères non valides dans un widget Validation de zone de texte. Par exemple, si vous activez cette option pour un widget possédant le type de validation Nombre entier, rien ne s'affiche dans le champ si l'utilisateur tente d'y taper une lettre.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez l'option Imposer modèle.

Personnalisation du widget Validation de zone de texte

Bien que l'inspecteur Propriétés permette d'apporter des modifications simples à un widget Validation de zone de texte, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget

Validation de zone de texte de manière à créer un widget dont le style est adapté à vos besoins. Vous trouverez la liste des tâches de définition de style avancées à l'adresse www.adobe.com/go/learn_dw_sprytextfield_custom_fr .


SpryValidationTextField.css. Dreamweaver enregistre le fichier SpryValidationTextField.css dans le dossier SpryAssets de votre site dès que vous créez un widget Validation de zone de texte. La consultation de ce fichier peut s'avérer utile, car il contient des informations commentées au sujet de divers styles qui s'appliquent au widget.

Même s'il est facile de modifier directement les règles du widget Validation de zone de texte dans le fichier CSS qui l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau

Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode Actuel du panneau.

Voir aussi


Définition du style du texte de message d'erreur d'un widget Validation de zone de texte

Par défaut, les messages d'erreur du widget Validation de zone de texte s'affichent en rouge, entourés d'un bord épais de 1 pixel.

❖

Pour modifier le style des messages d'erreur d'un widget Validation de zone de texte, recherchez la règle CSS appropriée dans le tableau suivant, puis modifiez les propriétés par défaut ou ajoutez vos propriétés et valeurs de style du texte :

C

DREAMWEAVER CS3


446

T exte à modifier

T e x te de message d ' erreur

Règle CSS pertinente

.te

x tfie l d

R equired

S tate .te

x tfie l d

R equired

M sg

,

.te

x tfie l dInva l id F ormat S tate .te

x tfie l dInva l id F ormat M sg ,

.te

x tfie l d

M in

V a l ue

S tate .te

x tfie l d

M in

V a l ue

M sg

,

.te

x tfie l d M a xV a l ue S tate .te

x tfie l d M a xV a l ue M sg ,

.te

x tfie l d

M in

C hars

S tate .te

x tfie l d

M in

C hars

M sg

,

.te

x tfie l d M a xC hars S tate .te

x tfie l d M a xC hars M sg

Propriétés à modifier

co l or

: #CC3333

; border

: 1 p x so l id

#CC3333 ;

Modification des couleurs d'arrière-plan du widget Validation de zone de texte

❖

Pour modifier les couleurs d'arrière-plan du widget Validation de zone de texte dans différents états, recherchez la règle

CSS appropriée dans le tableau suivant, puis modifiez la couleur d'arrière-plan par défaut :

Couleur à modifier

C ou l eur d

' arri

è re

p l an du w idget actif


C ou l eur d

' arri

è re

p l an du w idget dans un

é tat va l ide

.te

x tfie l d

V a l id

S tate input

, input.te

x tfie l d

V a l id

S tate

C ou l eur d

' arri

è re

p l an du w idget dans un

é tat non va l ide input.te

x tfie l d

R equired

S tate

,

.te

x tfie l d

R equired

S tate input

, input.te

x tfie l dInva l id

F ormat

S tate

,

.te

x tfie l dInva l id

F ormat

S tate input

, input.te

x tfie l d

M in

V a l ue

S tate

,

.te

x tfie l d

M in

V a l ue

S tate input

, input.te

x tfie l d

M a xV a l ue

S tate

,

.te

x tfie l d

M a xV a l ue

S tate input

, input.te

x tfie l d

M in

C hars

S tate

,

.te

x tfie l d

M in

C hars

S tate input

, input.te

x tfie l d

M a xC hars

S tate

,

.te

x tfie l d

M a xC hars

S tate input

.te

x tfie l d

F ocus

S tate input

, input.te

x tfie l d

F ocus

S tate

Propriété à modifier

bac k ground

co l or

: #B8F5B1

; bac k ground

co l or

: #FF9F9F

; bac k ground

co l or

: #FFFFCC

;

B

Utilisation du widget Zone de texte de validation

A propos du widget Zone de texte de validation

Le widget Validation Spry de zone de texte est une zone de texte qui affiche des états valides ou non valides lorsque le visiteur du site entre quelques lignes de texte. Si la zone de texte est un champ obligatoire et que l'utilisateur n'y entre pas de texte, le widget affiche un message indiquant qu'une valeur est requise.

A

D

E

A.

Compteur de caractères restants

B.

Widget Zone de texte activé, nombre maximal de caractères

C.

Widget Zone de texte activé, état valide

D.

Widget Zone de texte, état obligatoire

E.

Compteur de caractères tapés

DREAMWEAVER CS3


447

Le widget Zone de texte de validation peut posséder divers états (par exemple valide, non valide, valeur obligatoire, etc.).

Vous pouvez modifier les propriétés de ces états à l'aide de l'inspecteur Propriétés, en fonction des résultats de validation désirés. Un widget Zone de texte de validation peut effectuer une validation à différents moments, par exemple lorsque le visiteur clique en dehors du widget, pendant qu'il entre des données ou lorsqu'il tente d'envoyer le formulaire.

Etat initial


Etat actif

Etat du widget lorsque l'utilisateur place le point d'insertion à l'intérieur.

Etat valide

Etat du widget lorsque l'utilisateur a entré des informations correctes, ce qui permet l'envoi du formulaire.


Etat du widget si l'utilisateur n'a pas entré de texte.

N ombre minimal de caractères

Etat du widget lorsque l'utilisateur a entré moins de caractères que le nombre minimal requis pour la zone de texte.

N ombre maximal de caractères

Etat du widget lorsque l'utilisateur a entré plus de caractères que le nombre maximal admis pour la zone de texte.

Lorsqu'un widget Zone de texte de validation passe dans l'un de ces états suite à l'interaction avec l'utilisateur, la logique du cadre applicatif Spry applique une classe CSS spécifique au conteneur HTML pour le widget lors de l'exécution. Par exemple, si un utilisateur tente d'envoyer un formulaire mais n'a pas entré de texte dans la zone de texte, Spry applique au widget une classe qui le force à afficher le message d'erreur « Vous devez entrer une valeur ». Les règles qui contrôlent le style et les états d'affichage de messages d'erreur se trouvent dans le fichier CSS qui accompagne le widget,

SpryValidationTextArea.css.

Le code HTML par défaut du widget Zone de texte de validation, généralement dans un formulaire, contient une balise conteneur <span> qui entoure la balise <textarea> de la zone de texte. Le code HTML du widget Zone de texte de validation comprend également des balises script dans l'en-tête du document et après le marquage HTML du widget.

Vous trouverez une explication plus détaillée du fonctionnement du widget Zone de texte de validation, ainsi qu'une description complète de son code, à l'adresse www.adobe.com/go/learn_dw_sprytextarea_fr .

Insertion du widget Zone de texte de validation

1

Choisissez Insertion > Spry > Validation Spry de zone de texte.

2


Remarque :

Vous pouvez également insérer un widget Zone de texte de validation par l'intermédiaire de la catégorie Spry de la barre Insertion.

Voir aussi




1

Sélectionnez un widget Zone de texte de validation dans la fenêtre de document.

2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez l'option Valider si qui indique le moment où vous voulez que la validation se produise. Vous pouvez activer toutes les options ou n'en activer aucune.

Flou

Validation quand l'utilisateur clique en dehors de la zone de texte.

Remplacer

Validation lorsque l'utilisateur modifie du texte à l'intérieur de la zone de texte.

Envoyer


Définition d'un nombre minimal et maximal de caractères

1


DREAMWEAVER CS3


448

2

Dans l'inspecteur Propriétés du calque (Fenêtre > Propriétés), entrez un nombre dans la zone Nbre min. de caract. ou

Nbre max. de caract. Par exemple, si vous entrez 20 dans la zone Nbre min. de caract., le widget n'effectue la validation que si l'utilisateur entre au moins 20 caractères dans la zone de texte.

Ajout d'un compteur de caractères

Vous pouvez ajouter un compteur de caractères qui indique à l'utilisateur combien de caractères il a tapé ou combien il lui reste de caractères lorsqu'il entre du texte dans la zone de texte. Par défaut, lorsque vous ajoutez un compteur de caractères, il s'affiche à l'extérieur du widget, près de son coin inférieur droit.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez l'option Nombre caract. ou Car. restants.

Remarque :

L'option Car. restants n'est disponible que si vous avez déjà fixe un nombre maximal de caractères autorisés.


1


2



Modification de l'état obligatoire d'une zone de texte

Par défaut, tous les widgets Zone de texte de validation que vous insérez à l'aide de Dreamweaver exigent que l'utilisateur y entre des données lorsqu'ils sont publiés sur une page Web. Vous pouvez toutefois stipuler que certaines zones de texte sont facultatives pour la validation.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez ou désactivez l'option Obligatoire, en fonction de vos préférences.

Création d'un conseil pour une zone de texte

utilisateurs le type d'informations qu'ils doivent y entrer. La zone de texte affiche le conseil lorsque l'utilisateur charge la page dans un navigateur.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), entrez un conseil dans la zone Conseil.

Blocage des caractères supplémentaires

Vous pouvez empêcher les utilisateurs d'entrer davantage de caractères que le nombre maximal admis dans un widget Zone de texte de validation. Par exemple, si vous activez cette option pour un widget configuré de manière à ne pas accepter plus de 20 caractères, l'utilisateur ne pourra pas entrer plus de 20 caractères dans la zone de texte.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez l'option Bloquer les caractères supplémentaires.

Personnalisation du widget Zone de texte de validation

Bien que l'inspecteur Propriétés permette d'apporter des modifications simples à un widget Zone de texte de validation, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget Zone de texte de validation de manière à créer un widget dont le style est adapté à vos besoins. Vous trouverez la liste des tâches de définition de style avancées à l'adresse www.adobe.com/go/learn_dw_sprytextarea_custom_fr .

DREAMWEAVER CS3


449


SpryValidationTextArea.css. Dreamweaver enregistre le fichier SpryValidationTextArea.css dans le dossier SpryAssets de votre site dès que vous créez un widget Zone de texte de validation. La consultation de ce fichier peut s'avérer utile, car il contient des informations commentées au sujet de divers styles qui s'appliquent au widget.

Même s'il est facile de modifier directement les règles du widget Zone de texte de validation dans le fichier CSS qui l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau


Voir aussi


Définition du style du texte de message d'erreur d'un widget Zone de texte de validation

Par défaut, les messages d'erreur du widget Zone de texte de validation s'affichent en rouge, entourés d'un bord épais de 1 pixel.

❖

Pour modifier le style des messages d'erreur d'un widget Zone de texte de validation, recherchez la règle CSS appropriée dans le tableau suivant, puis modifiez les propriétés par défaut ou ajoutez vos propriétés et valeurs de style du texte :

T exte à modifier



.te

x tarea R equired S tate

.te

x tarea

R equired

M sg

,

.te

x tarea M in C hars S tate

.te

x tarea

M in

C hars

M sg

,

.te

x tarea M a xC hars S tate

.te

x tarea

M a xC hars

M sg


co l or : #CC3333 ; border : 1 p x so l id

#CC3333

;

Modification des couleurs d'arrière-plan du widget Zone de texte de validation

❖

Pour modifier les couleurs d'arrière-plan du widget Zone de texte de validation dans différents états, recherchez la règle

CSS appropriée dans le tableau suivant, puis modifiez la couleur d'arrière-plan par défaut :

Couleur d'arrière-plan à modifier Règle CSS pertinente

C ou l eur d

' arri

è re

p l an du

w idget dans un

é tat va l ide

.te

x tarea

V a l id

S tate te x tarea

, te x tarea.te

x tarea

V a l id

S tate

C ou l eur d

' arri

è re

p l an du

w idget dans un

é tat non va l ide te x tarea.te

x tarea

R equired

S tate

,

.te

x tarea

R equired

S tate te x tarea

, te x tarea.te

x tarea

M in

C hars

S tate

,

.te

x tarea

M in

C hars

S tate te x tarea

, te x tarea.te

x tarea

M a xC hars

S tate

,

.te

x tarea

M a xC hars

S tate te x tarea

C ou l eur d

' arri

è re

p l an du

w idget actif .te

x tarea

F ocus

S tate te x tarea

, te x tarea.te

x tarea

F ocus

S tate


bac k ground

co l or

: #B8F5B1

; bac k ground

co l or

: #FF9F9F

; bac k ground

co l or

: #FFFFCC

;

Utilisation du widget Validation de la sélection

A propos du widget Validation de la sélection

Un widget Validation de sélection Spry est un menu déroulant qui affiche des états valides ou non valides lorsque l'utilisateur effectue une sélection. Par exemple, vous pouvez insérer un widget Validation de sélection contenant une liste d'états, regroupés en différentes sections et séparés par des lignes horizontales. Si l'utilisateur sélectionne par erreur l'une des lignes de séparation au lieu d'un des états, le widget Validation de sélection affiche un message pour indiquer que la sélection n'est pas valide.

DREAMWEAVER CS3


450

L'exemple suivant montre un widget Validation de sélection développé, ainsi que la forme réduite de ce widget dans divers

B

C

D

A

A.

Widget Validation de sélection activé

B.

Widget Validation de sélection, état valide

C.

Widget Validation de sélection, état obligatoire

D.

Widget Validation de sélection, état non valide

Le widget Validation de sélection peut posséder divers états (par exemple valide, non valide, valeur obligatoire, etc.). Vous pouvez modifier les propriétés de ces états à l'aide de l'inspecteur Propriétés, en fonction des résultats de validation désirés.

Un widget Validation de sélection peut effectuer une validation à différents moments, par exemple lorsque le visiteur clique en dehors du widget, pendant qu'il effectue une sélection ou lorsqu'il tente d'envoyer le formulaire.

Etat initial


Etat actif

Etat du widget lorsque l'utilisateur clique dessus.

Etat valide

Etat du widget lorsque l'utilisateur a sélectionné un élément valide, ce qui permet l'envoi du formulaire.

Etat non valide

Etat du widget si l'utilisateur a sélectionné un élément non valide.


Etat du widget si l'utilisateur n'a pas sélectionné d'élément valide.

Lorsqu'un widget Validation de sélection passe dans l'un de ces états suite à l'interaction avec l'utilisateur, la logique du cadre applicatif Spry applique une classe CSS spécifique au conteneur HTML pour le widget lors de l'exécution. Par exemple, si un utilisateur tente d'envoyer un formulaire mais n'a pas sélectionné d'élément dans le menu, Spry applique au widget une classe qui le force à afficher le message d'erreur « Vous devez sélectionner un élément ». Les règles qui contrôlent le style et les états d'affichage de messages d'erreur se trouvent dans le fichier CSS qui accompagne le widget,

SpryValidationSelect.css.

Le code HTML par défaut du widget Validation de sélection, généralement dans un formulaire, contient une balise conteneur <span> qui entoure la balise <select> de la zone de texte. Le code HTML du widget Validation de sélection comprend également des balises script dans l'en-tête du document et après le marquage HTML du widget.

Vous trouverez une explication plus détaillée du fonctionnement du widget Validation de sélection, ainsi qu'une description complète de son code, à l'adresse www.adobe.com/go/learn_dw_spryselect_fr .

Insertion du widget Validation de sélection

1

Choisissez Insertion > Spry > Validation de sélection Spry.

2


3

En mode Code, ajoutez des balises d'option contenant des éléments de menu et des valeurs. Dreamweaver ne s'en charge pas automatiquement. Pour plus d'informations, consultez la rubrique ci-dessus.

Remarque :

Vous pouvez également insérer un widget Validation de sélection par l'intermédiaire de la catégorie Spry de la barre Insertion.

Voir aussi


DREAMWEAVER CS3


451



1

Sélectionnez un widget Validation de sélection dans la fenêtre de document.

2


Flou

Validation quand l'utilisateur clique en dehors du widget.

Remplacer

Validation lorsque l'utilisateur effectue des sélections.

Envoyer



1


2



Interdiction ou autorisation de valeurs vides

Par défaut, tous les widgets Validation de sélection que vous insérez à l'aide de Dreamweaver exigent que l'utilisateur sélectionne des éléments de menu possédant une valeur associée lorsque le widget et publié sur une page Web. Vous pouvez toutefois désactiver cette option.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez ou désactivez l'option Ne pas autoriser Valeur vide, en fonction de vos préférences.

Spécification d'une valeur incorrecte

Vous pouvez définir une valeur qui est considérée comme non valide si l'utilisateur sélectionne un élément de menu associé

à cette valeur. Par exemple, si vous définissez -1 comme valeur non valide et si vous l'attribuez à une balise d'option, le widget affiche un message d'erreur si l'utilisateur sélectionne cet élément de menu.

<option value="-1"> ------------------- </option>

1


2

Dans l'inspecteur Propriétés du calque (Fenêtre > Propriétés), entrez un nombre à utiliser comme valeur non valide dans la zone Valeur non valide.

Personnalisation du widget Validation de sélection

Bien que l'inspecteur Propriétés permette d'apporter des modifications simples à un widget Validation de sélection, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget

Validation de sélection de manière à créer un widget dont le style est adapté à vos besoins. Vous trouverez la liste des tâches de définition de style avancées à l'adresse www.adobe.com/go/learn_dw_spryselect_custom_fr .


SpryValidationSelect.css. Dreamweaver enregistre le fichier SpryValidationSelect.css dans le dossier SpryAssets de votre site dès que vous créez un widget Validation de sélection. La consultation de ce fichier peut s'avérer utile, car il contient des informations commentées au sujet de divers styles qui s'appliquent au widget.

Même s'il est facile de modifier directement les règles du widget Validation de sélection dans le fichier CSS qui l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode Actuel du panneau.

A

DREAMWEAVER CS3


452

Voir aussi


Définition du style du texte de message d'erreur d'un widget Validation de sélection

Par défaut, les messages d'erreur du widget Validation de sélection s'affichent en rouge, entourés d'un bord épais de 1 pixel.

❖

Pour modifier le style des messages d'erreur d'un widget Validation de sélection, recherchez la règle CSS appropriée dans le tableau suivant, puis modifiez les propriétés par défaut ou ajoutez vos propriétés et valeurs de style du texte :

T exte à mettre en forme

T e x te de message d

' erreur

Règle CSS pertinente Propriétés à modifier

.se

l ect

R equired

S tate

.se

l ect R equired M sg , .se

l ectInva l id S tate

.se

l ectInva l id

M sg co l or

: #CC3333

; border

: 1 p x so l id

#CC3333 ;

Modification des couleurs d'arrière-plan du widget Validation de sélection

❖

Pour modifier les couleurs d'arrière-plan du widget Validation de sélection dans différents états, recherchez la règle CSS appropriée dans le tableau suivant, puis modifiez la couleur d'arrière-plan par défaut :

Couleur d'arrière-plan à modifier Règle CSS pertinente

C ou l eur d

' arri

è re

p l an du

w idget dans un

é tat va l ide

.se

l ect

V a l id

S tate se l ect

, se l ect.se

l ect

V a l id

S tate

C ou l eur d

' arri

è re

p l an du

w idget dans un

é tat non va l ide se l ect.se

l ect

R equired

S tate

,

.se

l ect

R equired

S tate se l ect

, se l ect.se

l ectInva l id

S tate

,

.se

l ectInva l id

S tate se l ect

C ou l eur d

' arri

è re

p l an du

w idget actif .se

l ect

F ocus

S tate se l ect

, se l ect.se

l ect

F ocus

S tate


bac k ground

co l or

: #B8F5B1

; bac k ground

co l or

: #FF9F9F

; bac k ground

co l or

: #FFFFCC

;

Utilisation du widget Validation de case à cocher

A propos du widget Validation de case à cocher

Le widget Validation de case à cocher Spry est une case à cocher ou un groupe de cases à cocher, dans un formulaire HTML, qui affiche des états valides ou non valide lorsque l'utilisateur active ou n'active pas une case à cocher. Par exemple, vous pouvez ajouter un widget Validation de case à cocher à un formulaire dans lequel l'utilisateur doit effectuer trois sélections.

Si l'utilisateur n'effectue pas ces trois sélections, le widget renvoie un message indiquant que le nombre minimal de sélections n'a pas été effectué.

B

A.

Groupe de widgets Validation de case à cocher, nombre minimal de sélections

B.

Widget Validation de case à cocher, état obligatoire

DREAMWEAVER CS3


453

Le widget Validation de case à cocher peut posséder divers états (par exemple valide, non valide, valeur obligatoire, etc.).

Vous pouvez modifier les propriétés de ces états à l'aide de l'inspecteur Propriétés, en fonction des résultats de validation désirés. Un widget Validation de case à cocher peut effectuer une validation à différents moments, par exemple lorsque le visiteur clique en dehors du widget, pendant qu'il effectue une sélection ou lorsqu'il tente d'envoyer le formulaire.

Etat initial


Etat valide

Etat du widget lorsque l'utilisateur a effectué une sélection ou le nombre correct de sélections, ce qui permet l'envoi du formulaire.


Etat du widget si l'utilisateur n'a pas effectué une sélection obligatoire.

N ombre minimal de sélections

minimal requis.

Etat du widget lorsque l'utilisateur a sélectionné moins de cases à cocher que le nombre

N ombre maximal de sélections

maximal admis.

Etat du widget lorsque l'utilisateur a sélectionné plus de cases à cocher que le nombre

Lorsqu'un widget Validation de case à cocher passe dans l'un de ces états suite à l'interaction avec l'utilisateur, la logique du cadre applicatif Spry applique une classe CSS spécifique au conteneur HTML pour le widget lors de l'exécution. Par exemple, si un utilisateur tente d'envoyer un formulaire mais n'a pas effectué de sélections, Spry applique au widget une classe qui le force à afficher le message d'erreur « Vous devez effectuer une sélection ». Les règles qui contrôlent le style et les états d'affichage de messages d'erreur se trouvent dans le fichier CSS qui accompagne le widget,

SpryValidationCheckbox.css.

Le code HTML par défaut du widget Validation de case à cocher, généralement dans un formulaire, contient une balise conteneur <span> qui entoure la balise <input type="checkbox"> de la zone de texte. Le code HTML du widget Validation de case à cocher comprend également des balises script dans l'en-tête du document et après le marquage HTML du widget.

Vous trouverez une explication plus détaillée du fonctionnement du widget Validation de case à cocher, ainsi qu'une description complète de son code, à l'adresse www.adobe.com/go/learn_dw_sprycheckbox_fr .

Insertion du widget Validation de case à cocher

1

Choisissez Insertion > Spry > Validation de case à cocher Spry.

2


Remarque :

Vous pouvez également insérer un widget Validation de case à cocher par l'intermédiaire de la catégorie Spry de la barre Insertion.

Voir aussi



Vous pouvez fixer le moment auquel la validation se produit : quand le visiteur du site clique en dehors du widget, pendant qu'il effectue des sélections ou lorsqu'il tente d'envoyer le formulaire.

1

Sélectionnez un widget Validation de case à cocher dans la fenêtre de document.

2


Flou

Validation quand l'utilisateur clique en dehors de la case à cocher.

Remplacer

Validation lorsque l'utilisateur effectue des sélections.

Envoyer


DREAMWEAVER CS3


454

Définition d'une plage de sélections minimale et maximale

Par défaut, un widget Validation de case à cocher est obligatoire. Si vous insérez plusieurs cases à cocher sur la page, il est toutefois possible de spécifier une plage de sélections minimale et maximale. Par exemple, si la balise <span> d'un widget

Validation de case à cocher contient six cases à cocher et si vous voulez que l'utilisateur en sélectionne au moins trois, vous pouvez définir une préférence de ce type pour le widget entier.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez l'option Imposer plage.

3

Entrez un nombre minimal ou maximal (voire les deux) de cases à cocher que l'utilisateur doit activer.


1


2


Par exemple, sélectionnez Initial pour afficher le widget dans son état initial.

Personnalisation des messages d'erreur d'un widget Validation de case à cocher

Par défaut, les messages d'erreur du widget Validation de case à cocher s'affichent en rouge, entourés d'un bord épais de 1 pixel. Vous pouvez modifier les règles CSS du widget Validation de case à cocher de manière à créer un widget dont le style est adapté à vos besoins. Vous trouverez la liste des tâches de définition de style avancées à l'adresse www.adobe.com/go/learn_dw_sprycheckbox_custom_fr .

1

Ouvrez le fichier SpryValidationCheckbox.css.

Dreamweaver enregistre le fichier SpryValidationCheckbox.css dans le dossier SpryAssets de votre site dès que vous créez un widget Validation de case à cocher. La consultation de ce fichier peut s'avérer utile, car il contient des informations commentées au sujet de divers styles qui s'appliquent au widget.

2

Recherchez la règle CSS appropriée dans le tableau suivant, puis modifiez les propriétés par défaut ou ajoutez vos propriétés et valeurs de style du texte :

T exte à mettre en forme



.chec

k bo xR equired S tate

.chec

k bo xR equired

M sg

,

.chec

k bo xM in S e l ections S tate

.chec

k bo xM in

S e l ections

M sg

,

.chec

k bo xM a xS e l ections S tate

.chec

k bo xM a xS e l ections

M sg


co l or : #CC3333 ; border : 1 p x so l id

#CC3333

;

Même s'il est facile de modifier directement les règles du widget Validation de case à cocher dans le fichier CSS qui l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau


Voir aussi


DREAMWEAVER CS3


455

Affichage de données à l'aide de Spry

A propos des ensembles de données Spry

Le cadre applicatif Spry permet d'insérer des objets de données grâce auxquels les utilisateurs peuvent interagir avec une page, de manière rapide et dynamique, à partir d'une fenêtre de navigateur. Par exemple, vous pouvez insérer un tableau triable que l'utilisateur peut réorganiser, ou inclure un objet de tableau dynamique Spry qui déclenche une mise à jour de données ailleurs sur la page sans exiger l'actualisation de la page entière.

Pour ce faire, vous devez tout d'abord identifier, dans Dreamweaver, un ou plusieurs fichiers source XML (« ensemble de données Spry ») contenant vos données, puis insérer un ou plusieurs objets de données Spry pour afficher ces données.

Lorsque l'utilisateur ouvre la page dans un navigateur, le jeu de données se charge sous la forme d'une plage aplatie de données XML qui ressemble à un tableau standard, contenant lignes et colonnes.

Par exemple, supposons que votre fichier XML possède la structure de données suivante :

<products>

<product>

<name>Adobe Photoshop CS2</name>

<category>Digital Imaging</category>

<boximage>images/photoshop.gif</boximage>

<descheader>The professional standard in desktop digital imaging</descheader>

<desc>Adobe Photoshop CS2 software, the professional image-editing ...</desc>

</product>

<product>

<name>Adobe Illustrator CS2</name>

<category>Print Publishing</category>

<boximage>images/illustrator.gif</boximage>

<descheader>Vector graphics reinvented</descheader>

<desc>Adobe Illustrator CS2 software gives you new creative freedom ...</desc>

</product>

</products>

Si vous sélectionnez <product> comme élément répété, le plage aplatie de données XML produit une colonne de données pour chaque élément de produit, comme <name>, dans l'ensemble de données :

Vous pouvez insérer des objets qui affichent ces données de diverses façons. L'exemple suivant montre comment créer un

N om

A dobe P hotoshop CS2

A dobe I ll ustrator CS2

Category

Imagerie num

é rique

P ub l ication imprim

é e

Descheader

La r é f é rence pour l a retouche d

’ images professionne ll e.

Une nouve ll e approche de l' i ll ustration vectorie ll e.

Avec Spry, vous pouvez ajouter aisément un tel tableau à une page Dreamweaver. Vous pouvez également rendre une ou plusieurs colonnes triables. Ainsi, il suffit à l'utilisateur de cliquer sur une colonne pour la trier.

DREAMWEAVER CS3


456

Vous pouvez également insérer un tableau dynamique et une région distincte (baptisée « région de détail Spry ») sur la page, puis lier des données à la région de détail qui n'affichent que l'élément <desc> (la description détaillée du produit) pour un produit. Lorsque les données ont été liées aux deux régions (le tableau dynamique et la région de détail), la région de détail affiche les détails du produit lorsque l'utilisateur clique sur une ligne du tableau dynamique :

Lorsque l'utilisateur clique sur un autre produit du tableau, la région de détail est mise à jour pour afficher les informations correspondantes. Aucune de ces actions (tri d'un tableau ou mise à jour d'une région de détail lorsque l'utilisateur clique dessus) n'exige que le navigateur actualise la page entière

Vous pouvez incorporer des objets de données Spry dans vos pages Dreamweaver de nombreuses manières, dont certaines exigent une connaissance plus approfondie du cadre applicatif Spry. Pour plus d'informations sur le cadre applicatif, consultez le site www.adobe.com/go/learn_dw_spryframework_fr . Pour plus d'informations sur les ensembles de données

Spry, consultez le site www.adobe.com/go/learn_dw_sprydataset_fr .

A propos des tableaux dynamiques Spry

L'une des fonctions les plus courantes des ensembles de données Spry consiste à créer un ou plusieurs tableaux HTML qui mettent à jour, de manière dynamique, une autre page en réponse à une action de l'utilisateur. Par exemple, si un utilisateur sélectionne un produit dans un tableau, Dreamweaver peut immédiatement mettre à jour des données ailleurs sur la page, afin d'afficher des informations détaillées sur ce produit, sans exiger l'actualisation de la page entière.

Ces régions dynamiques sont baptisées région principale et région de détail . En règle générale, une partie de la page (le tableau principal) affiche un ensemble de colonnes abrégées provenant de l'ensemble de données. Une autre partie (la région de détail) affiche davantage d'informations sur un enregistrement sélectionné. Comme la région de détail dépend du tableau principal, toute modification apportée aux données de ce tableau provoque la modification des données de la région de détail.

Lorsque vous travaillez sur des régions dynamiques, vous créez deux régions à chaque fois : le tableau principal et une région de détail. Vous devez en outre activer l'option Mettre à jour les régions détaillées en cas de clic sur une ligne lors de la création du tableau principal, de manière à y associer une région de détail.

Lorsque l'utilisateur sélectionne une ligne dans le tableau principal, Spry identifie la ligne actuelle, qui vient de subir une action, et applique une mise à jour dynamique des données affichées dans la région de détail associée.

Définition d'un ensemble de données XML Spry

Pour pouvoir ajouter des régions, des tableaux ou des listes Spry à une page HTML, vous devez tout d'abord identifier les données que vous voulez manipuler.

DREAMWEAVER CS3


457

Remarque :

Si vous ne disposez pas encore d'un ensemble de données XML à employer pour vos tests, les actifs Spry disponibles

à l'adresse www.adobe.com/go/learn_dw_spryframework_fr comprennent plusieurs exemples d'ensembles de données.

1

Choisissez Insertion > Spry > Ensemble de données XML Spry.

Vous pouvez également cliquer sur le bouton Ensemble de données XML Spry de la catégorie Spry de la barre Insertion.

2

Vous pouvez accepter le nom par défaut de l'ensemble de données Spry (ds1) ou entrer un nom plus significatif.

3

Si vous disposez d'un fichier de données XML, cliquez sur le bouton Parcourir pour le sélectionner.

4

Si vous voulez créer la page en employant un exemple de flux sur votre serveur d'évaluation, cliquez sur le lien Flux de temps de conception.

5

Après avoir identifié l'ensemble de données à utiliser, cliquez sur le bouton Obtenir schéma pour remplir le panneau subordonnés à d'autres (mis en retrait).

6

Dans le panneau Elément de ligne, sélectionnez l'élément qui contient les données à afficher. Il s'agit généralement d'un noeud répété, tel que <product>, qui comporte plusieurs champs subordonnés tels que <name>, <category> et

<descheader>.

7

La zone XPath affiche une expression qui indique l'emplacement du noeud sélectionné dans le fichier XML source. Par exemple, si vous employez un ensemble de données possédant un schéma similaire à celui de l'illustration ci-dessus, puis

DREAMWEAVER CS3


458

que vous sélectionnez le noeud répété <product>, la zone XPath contient « products/product

», afin d'indiquer que les données trouvées dans le noeud <product> répété dans l'ensemble de données <product> seront affichées.

Remarque :

XPath (XML Path Language) est une syntaxe destinée à traiter des parties d'un document XML. Elle est essentiellement utilisée comme langage de requêtes pour des données XML, tout comme le langage SQL est utilisé pour des requêtes de bases de données. Pour plus d’informations sur XPath, consultez les spécifications du langage XPath sur le site Web du W3C, à l’adresse www.w3.org/TR/xpath.

8

Pour déterminer comment vos données se présenteront dans un navigateur, cliquez sur le bouton Aperçu. Les vingt premières lignes de votre fichier de données XML sont affichées, avec une colonne pour chaque élément.

9

Il peut parfois être utile de définir un champ comme étant de type précis, par exemple numérique, afin de permettre la validation de l'entrée de données ou de définir un ordre de tri précis. Si vous voulez modifier le type de données d'un

élément, sélectionnez-le dans le panneau Colonnes de l'ensemble de données puis choisissez une valeur différente dans le menu Type de données.

10

Pour que vos données soient triées automatiquement lors de leur chargement, sélectionnez un élément dans le menu

Trier. Si vous insérez par la suite un tableau Spry triable possédant un ordre de tri différent, c'est ce dernier qui sera prioritaire.

11

Sélectionnez Croissant ou Décroissant dans le menu Direction afin d'indiquer le type de tri à effectuer.

12

Pour garantir l'absence de colonnes en double, activez l'option Action distincte au chargement.

13

Activez l'option Désactiver la mise en cache des données XML si vous voulez charger directement les données depuis le serveur. Par défaut, l'ensemble de données XML Spry est chargé dans un cache local sur l'ordinateur de l'utilisateur, afin d'améliorer les performances. Toutefois, si vos données sont très dynamiques, ce principe n'offre aucun avantage.

14

Activez l'option Actualiser automatiquement les données puis entrez une valeur en millisecondes. Si vous activez cette option, l'ensemble de données actualise automatiquement les données XML depuis le serveur selon l'intervalle indiqué.

Cette fonctionnalité peut être utile si les données changent souvent.

15

Cliquez sur OK pour associer cet ensemble de données à votre page.

Important :

Lorsque vous définissez un ensemble de données Spry, diverses lignes de code sont ajoutées à votre fichier afin d'identifier les actifs Spry : les fichiers xpath.js et SpryData.js. Ne supprimez pas ce code, faute de quoi les fonctions de l'ensemble de données Spry seront inopérantes.

Utilisation d'un flux de conception

Si vous travaillez sur des données en cours de développement, il peut être utile d'employer un flux de conception. Par exemple, si le développeur du serveur est en train de finaliser la base de données sous-jacente à votre fichier de données

XML, vous pouvez utiliser une version de test du fichier afin de mettre au point votre page indépendamment du développement de la base de données.

Pour utiliser un flux de conception, vous devez compléter la catégorie Serveur d'évaluation de la boîte de dialogue

Définition du site.

❖

Pour obtenir un flux de conception, utilisez le bouton parcourir pour trouver le fichier, puis cliquez sur OK. L'accès à cette boîte de dialogue se fait par un clic sur le lien de la boîte de dialogue Ensemble de données XML Spry.

Remarque :

Lorsque vous chargez votre fichier final, n'oubliez pas de modifier l'emplacement du fichier d'ensemble de données, de manière à utiliser celui qui se trouve sur le serveur.

Voir aussi


Création d'une région Spry

Le cadre applicatif Spry emploie deux types de régions. L'une est une région Spry qui entoure les objets de données, comme les tableaux et les listes répétées. L'autre est une région de détail Spry qui s'utilise en combinaison avec un objet de tableau principal afin de permettre la mise à jour dynamique de données sur une page Dreamweaver.

DREAMWEAVER CS3


459

Tous les objets de données Spry doivent être inclus dans une région Spry. Si vous tentez d'ajouter un objet de données Spry avant d'ajouter une région Spry à une page, Dreamweaver vous invite à ajouter une région Spry. Par défaut, les régions Spry se trouvent dans des conteneurs <div> HTML. Vous pouvez les ajouter avant d'ajouter un tableau, les ajouter automatiquement quand vous insérez un tableau ou une liste répétée, ou encore les placer autour d'objets de tableau ou de liste répétée existants.

En règle générale, si vous ajoutez une région de détail, vous ajouterez tout d'abord l'objet de tableau principal, puis vous activerez l'option Mettre à jour les régions détaillées. La seule valeur qui soit différente et spécifique pour une région de détail est l'option Type de la boîte de dialogue Insérer une région Spry.

1

Choisissez Insertion > Spry > Région Spry.

Vous pouvez également cliquer sur le bouton Région XML Spry de la catégorie Spry de la barre Insertion.

2

Comme conteneur de l'objet, vous pouvez sélectionner l'option <div> ou l'option <span>. Le conteneur <div> est utilisé par défaut.

3

Choisissez l'une des options suivantes :

•

Pour créer une région Spry, activez Région (l'option par défaut) comme type de région à insérer.

•

Pour créer une région de détail Spry, activez l'option Région Détail. Une région de détail ne s'emploie que si vous voulez lier des données dynamiques qui sont mises à jour lorsque les données d'une autre région Spry changent.

Important :

Vous devez insérer une région de détail dans une <div> différente de celle de la région de la table principale. Il peut être nécessaire de passer en mode Code pour placer précisément le point d'insertion.

4

Choisissez votre ensemble de données Spry dans le menu.

5

Si vous voulez créer ou modifier la région définie pour un objet, sélectionnez-le puis activez l'une des options suivantes :

Renvoi à la ligne de la sélection

Place une nouvelle région autour d'un objet.

Remplacer la sélection

Remplace une région existante pour un objet.

6

Lorsque vous cliquez sur OK, Dreamweaver place un espace réservé de région sur votre page, avec le texte « Placez ici le contenu de la région de détail Spry ». Vous pouvez remplacer ce texte d'espace réservé par un objet de données Spry, tel qu'un tableau ou une liste répétée, ou par des données dynamiques provenant du panneau Liaisons.

7

Pour remplacer le texte d'espace réservé par un objet de données Spry (par exemple un tableau Spry), cliquez sur le bouton de l'objet de données correspondant dans la catégorie Spry de la barre Insertion.

8

Pour remplacer le texte d'espace réservé par des données dynamiques, utilisez l'une des méthodes suivantes :

•

Tirez un ou plusieurs éléments du panneau Liaisons au-dessus du texte sélectionné.

Remarque :

Le panneau Liaisons contient quelques éléments Spry intégrés : ds_RowID, ds_CurrentRowID et ds_RowCount.

Spry les emploie pour définir la ligne dans laquelle un utilisateur a cliqué lorsqu'il détermine comment mettre à jour des régions de détail dynamiques.

•

En mode Code, tapez directement le code d'un ou plusieurs éléments. Utilisez le format suivant :

{nom-ensemble-dedonnées::nom-élément}

, comme dans

{ds1::category}

. ou

{dsProducts::desc}

. Si vous n'utilisez qu'un ensemble de

DREAMWEAVER CS3


460

données dans votre fichier, ou si vous employez des éléments du même ensemble de données que celui défini pour la région, vous pouvez omettre le nom de l'ensemble de données et simplement écrire

{category}

or

{desc}

.

Quelle que soit la méthode utilisée pour définir le contenu de votre région, les lignes suivantes sont ajoutées à votre code

HTML :

<div spry:region="ds1">{name}{category}</div>

<div spry:region="ds2">{ds1::name}{ds1::descheader}</div>

Création d'un tableau Spry

Il existe deux types de tableaux Spry : un tableau simple et un tableau principal dynamique qui s'associe une région de détail afin de permettre la mise à jour dynamique de données sur une page Dreamweaver.

Si vous créez un tableau simple, vous pouvez définir une ou plusieurs colonnes comme étant triables et définir des styles

CSS pour différents éléments du tableau.

Le processus de création d'un tableau principal dynamique est identique à celui d'un tableau simple. Toutefois, dans le cas d'un tableau principal, vous pouvez lier une région de détail dynamique au tableau. De la sorte, lorsqu'un utilisateur clique sur une ligne du tableau principal, les données de la région de détail sont mises à jour de façon dynamique.

Pour créer un tableau principal dynamique Spry, vous devez tout d'abord insérer un tableau principal, qui affiche les données utilisées pour déclencher les modifications dynamiques, après quoi vous devez insérer une région de détail contenant les données qui subissent les modifications.

1

Choisissez Insertion > Spry > Table Spry.

Vous pouvez également cliquer sur le bouton Table Spry de la catégorie Spry de la barre Insertion.

2


Remarque :

Si vous tentez d'insérer un tableau sans avoir créé de région, Dreamweaver vous invite à en ajouter une avant d'insérer le tableau. Tous les objets de données Spry doivent se trouver à l'intérieur de régions.

3

Dans le panneau Colonnes, ajustez les colonnes du tableau en procédant comme suit :

•

Cliquez sur les symboles Plus (+) ou Moins (-) pour ajouter ou retirer des colonnes.

•

Cliquez sur les flèches haut ou bas pour déplacer une colonne. Si vous faites monter une colonne, elle se trouvera davantage sur la gauche du tableau affiché, et sur la droite si vous la faites descendre.

4

Pour définir une colonne selon laquelle les données seront triées, sélectionnez-la dans le panneau Colonnes, puis activez l'option Trier la colonne en cas de clic sur l'en-tête. Répétez cette opération pour chaque colonne à trier.

5

Si des styles CSS sont associés à votre page, sous la forme d'une feuille de style jointe ou d'un ensemble de styles individuels dans la page HTML, vous pouvez choisir une classe CSS pour une ou plusieurs des options suivantes :

Classe de ligne impaire

Modifie l'apparence des lignes impaires.

Classe de ligne paire

Modifie l'apparence des lignes paires.

Classe de survol

Modifie l'apparence d'une ligne lorsque vous placez le pointeur de la souris au-dessus d'elle.

Sélectionner une classe

Modifie l'apparence d'une ligne lorsque vous cliquez dessus.

6

Si vous créez un tableau Spry simple, désactivez l'option par défaut, Mettre à jour les régions détaillées en cas de clic sur une ligne. Laissez cette option activée si vous créez un tableau principal dynamique Spry.

Remarque :

Si vous insérez un tableau principal dynamique, vous pouvez voir, en mode Code, que Dreamweaver a inséré des balises de tableau HTML et une balise « spry:repeat » avec une opération « onClick » pour la ligne actuelle. C'est ainsi que Spry détermine où l'utilisateur a cliqué et quelles données doivent être mises à jour de manière dynamique.

7

Cliquez sur OK pour faire apparaître le tableau en mode Création, avec une ligne d'en-têtes et une ligne de références de données, entourées d'accolades ({}), pour chacun des éléments inclus. En mode Code, des balises de tableau HTML sont insérés dans votre fichier, avec du code qui identifie le nom triable et les colonnes de catégorie.

DREAMWEAVER CS3


461

Création d'une région répétée Spry

Vous pouvez ajouter des régions répétées pour afficher vos données. Une région répétée est une structure de données simple que vous pouvez mettre en forme comme bon vous semble pour présenter les données. C'est par exemple le cas si vous disposez d'une série de vignettes de photographies que vous voulez placer l'une à la suite de l'autre dans un objet de mise en forme de page, comme un élément div

PA.

1

Choisissez Insertion > Spry > Répétition Spry.

Vous pouvez également cliquer sur le bouton Répétition XML Spry de la catégorie Spry de la barre Insertion.

2

Comme conteneur de l'objet, vous pouvez sélectionner l'option <div> ou l'option <span>, en fonction du type de balise désirée. Le conteneur <div> est utilisé par défaut.

3

Activez l'option Répéter (par défaut) ou Répéter les enfants.

Pour disposer d'une souplesse accrue, vous pouvez utiliser l'option Répéter les enfants, où la validation des données est effectuée pour chaque ligne d'une liste au niveau des enfants. Par exemple, dans une liste <ul>, les données sont vérifiées au niveau <li>. Si vous activez l'option Répéter, les données sont vérifiées au niveau <ul>. L'option Répéter les enfants peut s'avérer particulièrement utile si vous employez des expressions conditionnelles dans le code.

4


5

Si vous avez déjà sélectionné du texte ou des éléments, vous pouvez les entourer ou les remplacer.

6

Cliquez sur OK pour afficher une région répétée sur votre page.

Remarque :

Si vous tentez d'insérer une région répétée sans avoir créé de région, Dreamweaver vous invite à en ajouter une avant d'insérer le tableau. Tous les objets de données Spry doivent se trouver à l'intérieur de régions.

7

Lorsque vous cliquez sur OK, Dreamweaver insère un espace réservé de région sur votre page, avec le texte « le contenu de la région de détail Spry ». Vous pouvez remplacer ce texte d'espace réservé par un objet de données Spry, tel qu'un tableau ou une liste répétée, ou par des données dynamiques provenant du panneau Liaisons.

8

Pour remplacer le texte d'espace réservé par un objet de données Spry, cliquez sur le bouton de l'objet de données approprié dans la barre Insertion.

9

Pour remplacer le texte d'espace réservé par une ou plusieurs données dynamiques, utilisez l'une des méthodes suivantes :

•

Tirez un ou plusieurs éléments du panneau Liaisons au-dessus du texte sélectionné.

Remarque :

Le panneau Liaisons contient quelques éléments Spry intégrés : ds_RowID, ds_CurrentRowID et ds_RowCount.

Spry les emploie pour définir la ligne dans laquelle un utilisateur a cliqué lorsqu'il détermine comment mettre à jour des régions de détail dynamiques.

•

En mode Code, tapez directement le code d'un ou plusieurs éléments. Utilisez le format suivant :

{nom-ensemble-dedonnées::nom-élément}

, comme dans

{ds1::category}

. ou

{dsProducts::desc}

. Si vous n'utilisez qu'un ensemble de données dans votre fichier, ou si vous employez des éléments du même ensemble de données que celui défini pour la région, vous pouvez omettre le nom de l'ensemble de données et simplement écrire

{category}

or

{desc}

.

DREAMWEAVER CS3


462

Quelle que soit la méthode utilisée pour définir le contenu de votre région, les lignes suivantes sont ajoutées à votre code

HTML :

<div spry:region="ds1">{name}{category}</div>

<div spry:region="ds2">{ds1::name}{ds1::descheader}</div>

Création d'une liste de répétition Spry

Vous pouvez ajouter des listes de répétition pour afficher vos données sous la forme d'une liste ordonnée, d'une liste non ordonnée (à puces) ou d'une liste déroulante.

1

Choisissez Insertion > Spry > Liste de répétition Spry.

Vous pouvez également cliquer sur le bouton Liste de répétition XML Spry de la catégorie Spry de la barre Insertion.

2

Choisissez la balise conteneur à utiliser : UL, OL, DL ou SELECT. Les autres options varient en fonction du conteneur choisi. Si vous choisissez SELECT, vous devez compléter les zones suivantes :

•

Colonne affichée : Il s'agit de ce que les utilisateurs voient lorsqu'ils affichent la page dans leur navigateur.

•

Colonne de valeurs : Il s'agit de la valeur envoyée au serveur d'arrière-plan.

« support/products/dreamweaver.html » et «

Adobe Acrobat » aux utilisateurs, tout en envoyant des URL telles que support/products/acrobat.html » au serveur.

3


4

Choisissez les colonnes à afficher.

5

Cliquez sur OK pour afficher une liste de répétition sur votre page. En mode Code, vous pouvez voir que des balises de sélection <ul>, <ol>, <dl> ou FORM ont été insérées dans le fichier.

Remarque :

Si vous tentez d'insérer une liste de répétition sans avoir créé de région, Dreamweaver vous invite à en ajouter une avant d'insérer le tableau. Tous les objets de données Spry doivent se trouver à l'intérieur de régions.

Ajout d'effets Spry

Présentation des effets Spry

Les effets Spry sont des améliorations visuelles que vous pouvez appliquer à pratiquement n'importe quel élément d'une page

HTML à l'aide de JavaScript. Les effets sont souvent utilisés pour surligner des informations, créer des transitions animées ou modifier visuellement un élément de page pendant un certain délai. Vous pouvez appliquer des effets aux éléments

HTML sans devoir employer de balises personnalisées supplémentaires.

Remarque :

Pour appliquer un effet à un élément, il doit être sélectionné ou posséder un ID. Si, par exemple, vous surlignez une balise

div

qui n'est pas sélectionnée, elle doit posséder une valeur ID valide. Si ce n'est pas encore le cas, vous devez en ajouter un au code HTML.

Les effets peuvent modifier les propriétés d'opacité, d'échelle, de position et de style d'un élément, comme sa couleur d'arrière-plan. Vous pouvez créer d'intéressants effets visuels en combinant plusieurs propriétés.

Ces effets sont basés sur Spry. Dès lors, lorsqu'un utilisateur clique sur un objet possédant un effet, seul l'objet est mis à jour de manière dynamique. La page HTML n'est pas entièrement actualisée.

Apparition/Fondu

Fait apparaître ou disparaître lentement un élément.

Surligner

Modifie la couleur d'arrière-plan d'un élément.

Store monté/Store baissé

Simule l'effet d'un store qui monte ou descend pour afficher ou masquer l'élément.

DREAMWEAVER CS3


463

Glisser vers le haut/Glisser vers le bas

Fait monter ou descendre l'élément.

Agrandissement/Réduction

Augmente ou diminue la taille de l'élément.

Secouer

Donne l'impression que l'élément est secoué de gauche à droite.

Ecraser

Fait disparaître l'élément dans le coin supérieur gauche de la page.

Important :

Lorsque vous utilisez un effet, diverses lignes de code sont ajoutées au fichier en mode Code. Une ligne identifie le fichier SpryEffects.js, qui est nécessaire à l'inclusion des effets. Ne supprimez pas cette ligne du code, faute de quoi les effets ne fonctionneront pas.

Vous trouverez la liste détaillée des effets Spry disponibles dans le cadre applicatif Spry à l'adresse www.adobe.com/go/learn_dw_spryeffects_fr .

Application d'un effet Apparition/Fondu

Remarque :

Vous pouvez utiliser cet effet avec n'importe quel objet HTML, sauf applet, body, iframe, object, tr, tbody et th.

1

(Facultatif) Sélectionnez le contenu ou l'objet de mise en forme auquel vous voulez appliquer l'effet.

2

Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+) puis choisissez Effets >

Apparition/Fondu dans le menu.

3

Sélectionnez l'ID de l'objet dans le menu de l'élément cible. Si vous avez déjà sélectionné un objet, choisissez <Sélection actuelle>.

4

Dans la zone Durée de l’effet, définissez le délai (en millisecondes) nécessaire pour que l'effet se produise.

5

Sélectionnez l'effet à appliquer : Fondu ou Apparition.

6

Dans la zone Début du fondu, définissez le pourcentage d'opacité que l'effet doit posséder lorsqu'il apparaît.

7

Dans la zone Fin du fondu, définissez le pourcentage d'opacité à atteindre.

8

Cliquez sur Effet de bascule si vous voulez que l'effet soit réversible, en apparaissant lentement puis en disparaissant de nouveau à chaque clic de souris.

Application d'un effet Store monté/Store baissé

Remarque :

Cet effet ne peut être utilisé que sur les objets HTML suivants h6, p, ol, ul, li, applet, center, dir, menu ou pre.

1


2


Store dans le menu.

3


4


5

Sélectionnez l'effet à appliquer : Store monté ou Store baissé.

6

Dans la zone Store monté depuis/Store baissé depuis, définissez le point de départ du déroulement du store, sous la forme d'un pourcentage ou d'un nombre de pixels. Ces valeurs sont calculées à partir du dessus de l'objet.

7

Dans la zone Store monté jusqu'à/Store baissé jusqu'à, définissez le point final du déroulement du store, sous la forme d'un pourcentage ou d'un nombre de pixels. Ces valeurs sont calculées à partir du dessus de l'objet.

8

Cliquez sur Effet de bascule si vous voulez que l'effet soit réversible, en remontant puis en redescendant à chaque clic de souris.

DREAMWEAVER CS3


464

Application d'un effet Agrandissement/Réduction

Remarque :

Cet effet peut être utilisé sur les objets HTML suivants menu ou pre.

1


2


Agrandissement/Réduction dans le menu.

3


4


5

Sélectionnez l'effet à appliquer : Agrandissement ou Réduction.

6

Dans la zone Début agrandissement/Début réduction, définissez la taille de l'objet au début de l'effet. Il s'agit d'un pourcentage de la taille ou d'un nombre de pixels.

7

Dans la zone Fin agrandissement/Fin réduction, définissez la taille de l'objet à la fin de l'effet. Il s'agit d'un pourcentage de la taille ou d'un nombre de pixels.

8

Si vous choisissez les pixels pour l'une des zones Début ou Fin agrandissement/réduction, la zone largeur/hauteur devient visible. En fonction de l'option choisie, l'élément sera agrandi ou réduit de manière proportionnelle.

9

Indiquez si vous voulez que l'élément soit agrandi ou réduit vers le coin supérieur gauche de la page ou le centre de la page.

10

Cliquez sur Effet de bascule si vous voulez que l'effet soit réversible, en étant agrandi puis réduit à chaque clic de souris.

Application d'un effet Surligner

Remarque :

Vous pouvez utiliser cet effet avec n'importe quel objet HTML, sauf applet, body, frame, frameset et noframes.

1


2


Surligner dans le menu.

3


4

Dans la zone Durée de l’effet, définissez le délai (en millisecondes) pendant lequel l'effet doit durer.

5

Sélectionnez la couleur de début du surlignage.

6

Sélectionnez la couleur de fin du surlignage. Cette couleur ne dure que pendant le délai défini dans la zone Durée de l'effet.

7

Sélectionnez la couleur de l'objet à la fin du surlignage.

8

Cliquez sur Effet de bascule si vous voulez que l'effet soit réversible, en recevant successivement les différentes couleurs de surlignage à chaque clic de souris.

Application d'un effet Secouer

Remarque :

Cet effet peut être utilisé sur les objets HTML suivants h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu, pre ou table.

1


2


Secouer dans le menu.

3


DREAMWEAVER CS3


465

Application d'un effet Glisser vers le haut/Glisser vers le bas

Remarque :

Cet effet ne peut être utilisé que sur les objets HTML suivants glissement exige qu'une balise <div> entoure le contenu qui coulisse.

1


2


Glisser dans le menu.

3


4


5

Sélectionnez l'effet à appliquer : Glisser vers le haut ou Glisser vers le bas.

6

Dans la zone Glisser vers le haut depuis/Glisser vers le bas depuis, définissez le point de départ du coulissement, sous la forme d'un pourcentage ou d'un nombre de pixels.

7

Dans la zone Glisser vers le haut jusqu'à/Glisser vers le bas jusqu'à, définissez le point final du coulissement, sous la forme d'un pourcentage ou d'un nombre de pixels positif.

8

Cliquez sur Effet de bascule si vous voulez que l'effet soit réversible, en coulissant vers le haut puis vers le bas à chaque clic de souris.

Application d'un effet Ecraser

Remarque :

Cet effet ne peut être utilisé que sur les objets HTML suivants center, dir, menu ou pre.

1


2


Ecraser dans le menu.

3


Ajout d'un effet supplémentaire

Vous pouvez associer plusieurs comportements d'effets au même objet, de manière à produire des effets intéressants.

1


2

Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+) puis choisissez un effet dans le menu Effets.

3


Suppression d'un effet

Vous pouvez supprimer un ou plusieurs comportements d'effet d'un objet.

1


2

Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur l'effet à supprimer de la liste de comportements.

3


•

Cliquez sur le bouton Supprimer un événement (-) de la barre de titre du panneau secondaire.

•

Cliquez sur le comportement avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée

(Macintosh), puis choisissez Supprimer le comportement.

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

Avant d'entreprendre la création de pages Web dynamiques, vous devez effectuer un certain nombre de tâches de préparation, notamment la configuration d'un serveur d'application Web et la connexion à une base de données pour les applications Coldfusion, ASP, ASP.NET, JSP et PHP. Adobe® Dreamweaver® CS3 gère les connexions aux bases de données différemment suivant la technologie de serveur que vous utilisez.

Description des applications Web

Présentation des applications Web

Une application Web est un site Web dont le contenu des pages est partiellement ou entièrement indéterminé. Le contenu final d'une page est déterminé uniquement lorsque l'utilisateur requiert une page depuis le serveur Web. Le contenu final d'une page variant d'une requête à une autre en fonction des actions de l'utilisateur, ce type de page est appelé page dynamique.

Les applications Web sont construites de manière à répondre à différents types de défis et de problèmes. Cette section décrit les utilisations courantes des applications Web et présente un exemple simple.

Utilisations courantes des applications Web

Les applications Web peuvent être utilisées de diverses façons par les visiteurs d'un site et les développeurs, notamment

•

Permettre aux utilisateurs de trouver rapidement et facilement des informations sur un site Web riche en contenu.

Ce type d'applications Web permet aux visiteurs du site de rechercher, d'organiser et de parcourir le contenu à leur convenance. Les exemples incluent des réseaux intranet d'entreprises, tels Microsoft MSDN ( www.msdn.microsoft.com

), et Amazon.com ( www.amazon.com

).

•

Collecter, enregistrer et analyser des données fournies par les visiteurs du site.

Auparavant, les données saisies dans des formulaires HTML étaient envoyées sous forme de courriels aux employés ou sous forme d'applications CGI pour le traitement. Une application Web peut enregistrer les données d'un formulaire directement dans une base de données, ainsi qu'extraire les données et créer des rapports Web pour l'analyse. Les exemples incluent des pages de banque en ligne et de contrôle des stocks, ainsi que des sondages et des formulaires de commentaires.

•

Mettre à jour des sites Web dont le contenu change souvent.

Une application Web évite au créateur d'avoir à mettre fréquemment à jour le code HTML du site. Les fournisseurs de contenu, tels que les rédacteurs en chef, alimentent l'application Web et celle-ci met automatiquement le site à jour, Il peut s'agir de The Economist ( www.economist.com

) et de CNN ( www.cnn.com

).

Exemple d'application Web

Julie, professionnelle de la création Web, utilise Dreamweaver depuis de nombreuses années. Elle est chargée de la

000 employés. Christophe, du service des Ressources humaines, lui soumet un jour un problème. Ce service gère un programme de mise en forme qui attribue des points aux employés pour chaque kilomètre parcouru en marchant, en courant ou à vélo. Tous les mois, chaque employé doit communiquer à Christophe le nombre total de kilomètres parcourus, par courriel. A la fin du mois,

Christophe rassemble tous les courriels et récompense chaque employé avec des prix en espèces, en fonction de leur total de points.

466

DREAMWEAVER CS3


467

Le problème est que ce programme de mise en forme a suscité de plus en plus d'enthousiasme. Le nombre de participants est si important que Christophe est submergé de courriels à chaque fin de mois. Il demande donc à Julie si une solution Web serait envisageable.

Julie suggère une application Web basée sur un réseau intranet exécutant les tâches suivantes :

• permettre aux employés de saisir leur kilométrage sur une page Web au moyen d'un simple formulaire HTML ;

• stocker le kilométrage des employés dans une base de données ;

• calculer les points de mise en forme en fonction du kilométrage ;

• permettre aux employés de suivre leurs progrès au fil des mois ;

• permettre à Christophe d'accéder au total des points en un seul clic à chaque fin de mois.

Julie met rapidement en place l'application à l'aide de Dreamweaver, logiciel doté des outils nécessaires à la création rapide et facile de ce type d'applications.

Fonctionnement d'une application Web

Une application Web est un ensemble de pages statiques et dynamiques. Une page statique n'est pas modifiée lorsqu'un visiteur la consulte : Le serveur Web transmet la page au navigateur qui la sollicite sans la modifier. A l'inverse, une page

Web dynamique est modifiée par le serveur avant d'être transmise au navigateur qui la sollicite. C'est pourquoi cette page est dite dynamique.

Vous pouvez par exemple créer une page pour afficher les résultats du programme de mise en forme et faire en sorte que certaines informations (telles le nom et les résultats de l'employé) soient déterminées lorsqu'une page est sollicitée par un employé donné.

Les sections suivantes décrivent en plus de détails la façon dont les applications Web fonctionnent.

T

raitement des pages Web statiques

Un site Web statique comprend un jeu de pages et fichiers HTML associés hébergés sur un ordinateur exécutant un serveur Web.

Un serveur Web est un logiciel qui fournit des pages Web en réponse à des requêtes de navigateurs Web. Une requête de page est générée lorsqu'un utilisateur clique sur un lien d'une page Web, choisit un signet dans le navigateur ou saisit une

URL dans le champ Adresse du navigateur.

Le contenu final d'une page Web statique est déterminé par le créateur de la page et n'est pas modifié lorsqu'un utilisateur la demande. Exemple :

<html>

<head>

<title>Trio Motors Information Page</title>

</head>

<body>

<h1>About Trio Motors</h1>

<p>Trio Motors is a leading automobile manufacturer.</p>

</body>

</html>

Chaque ligne du code HTML de la page est rédigée par le créateur avant que la page ne soit placée sur le serveur. Ce code

HTML n'étant pas modifié une fois la page sur le serveur, cette page est dite statique.

Remarque :

Au sens strict du terme, une page dite « animation Flash (un fichier SWF), par exemple, peuvent animer une page statique. Cependant, ce guide qualifie une page de statique si elle est adressée au navigateur sans modifications.

Lorsqu'un serveur Web reçoit une requête de page statique, il lit la requête, localise la page et la transmet au navigateur qui l'a sollicitée, comme le montre l'exemple suivant :

DREAMWEAVER CS3


468

A

C

B

A.

Etape 1 - Le navigateur Web demande une page statique.

B.

Etape 2 - Le serveur Web recherche la page.

C.

Etape 3 - Le serveur Web envoie la page au navigateur demandeur.

Dans le cas des applications Web, certaines lignes de code ne sont pas déterminées au moment où l'utilisateur sollicite la page. Ces lignes doivent être déterminées via un mécanisme avant que la page ne soit transmise au navigateur. Ce mécanisme est présenté dans la section suivante.

T

raitement des pages dynamiques

Lorsqu'un serveur Web reçoit une requête de page Web statique, il transmet directement cette page au navigateur qui la demande. Le serveur Web réagit différemment lorsqu'il reçoit une requête de page dynamique : Il transmet la page à un logiciel spécial chargé de terminer la page. Ce logiciel spécial est appelé un serveur d'application.

Le serveur d'application lit le code de la page, termine cette page en fonction des instructions figurant dans le code, puis en retire le code. Il en résulte une page statique que le serveur d'application renvoie au serveur Web, lequel transmet alors cette page au navigateur demandeur. Le navigateur reçoit uniquement du code HTML pur lorsque la page lui est transmise. Voici un aperçu du processus :

A

E

B

D

C

A.

Etape 1 - Le navigateur Web demande une page dynamique.

B.

Etape 2 - Le serveur Web recherche la page et la transmet au serveur d'application.

C.

Etape 3- Le serveur d'application analyse la page à la recherche d'instructions et la termine.

D.

Etape 4 - Le serveur d'application transmet la page terminée au serveur Web.

E.

Etape 5 - Le serveur Web envoie la page achevée au navigateur requérant.

DREAMWEAVER CS3


469

Accès à une base de données

Un serveur d'application vous permet de travailler avec des ressources côté serveur telles que les bases de données. Une page dynamique peut, par exemple, ordonner au serveur d'application d'extraire des données de la base de données et de les insérer dans le code HTML de la page. Pour plus d'informations, consultez le site www.adobe.com/go/learn_dw_dbguide_fr .

L'instruction d'extraction des données de la base est nommée requête de base de données . Une requête est composée de critères de recherche rédigés dans un langage de base de données appelé SQL (Structured Query Language). La requête SQL est rédigée dans les scripts ou les balises de la page côté serveur.

Un serveur d'application ne peut pas communiquer directement avec une base de données car le format propriétaire de cette dernière rend les données indéchiffrables, de la même manière qu'un document Microsoft Word ouvert dans Blocnotes ou BBEdit peut être indéchiffrable. Le serveur d'application peut communiquer avec la base de données uniquement via un pilote de base de données, logiciel faisant office d'interprète entre le serveur d'application et la base de données.

Une fois que le pilote a établi la communication, la requête est exécutée par rapport à la base de données et un jeu d'enregistrements est créé. Un jeu d'enregistrements est un ensemble de données extraites d'une ou de plusieurs tables de base de données. Le jeu d'enregistrements est renvoyé au serveur d'application, lequel utilise les données pour terminer la page.

Voici un exemple simple de requête de base de données rédigée en SQL :

SELECT lastname, firstname, fitpoints

FROM employees

Cette instruction crée un jeu d'enregistrements à trois colonnes et le remplit de lignes comportant le nom, le prénom et les points de mise en forme de tous les employés de la base de données. Pour plus d'informations, consultez le site www.adobe.com/go/learn_dw_sqlprimer_fr .

L'exemple suivant illustre le processus d'interrogation de la base de données via des requêtes et de la transmission des données au navigateur :

DREAMWEAVER CS3


470

A

B

C

D

E

I

H

G

F

A.

Etape 1 - Le navigateur Web demande une page dynamique.

B.

Etape 2 - Le serveur Web recherche la page et la transmet au serveur d'application.

C.

Etape 3 - Le serveur d'application analyse la page à la recherche d'instructions.

D.

Etape 4 - Le serveur d'application envoie une requête au pilote de la base de données.

E.

Etape 5 - Le pilote exécute la requête au niveau de la base de données.

F.

Etape 6 - Le jeu d'enregistrements est renvoyé au pilote.

G.

Etape 7 - Le pilote transmet le jeu d'enregistrements au serveur d'application.

H.

Etape 8 - Le serveur d'application insère les données dans la page, puis transmet la page au serveur Web.

I.

Etape 9 - Le serveur Web envoie la page achevée au navigateur requérant.

Vous pouvez utiliser pratiquement toutes les bases de données avec votre application Web, à condition que les pilotes de base de données appropriés soient installés sur le serveur.

Si vous prévoyez de créer de petites applications peu onéreuses, vous pouvez utiliser une base de données basée sur fichier, créée par exemple sous Microsoft Access. Si vous prévoyez de créer des applications stratégiques robustes, vous pouvez utiliser une base de données serveur, créée par exemple avec Microsoft SQL Server, Oracle 9i ou MySQL.

Si votre base de données réside sur un système autre que votre serveur Web, assurez-vous qu'il existe une connexion rapide entre les deux systèmes pour un fonctionnement efficace et rapide de votre application Web.

Création de pages dynamiques

La création d'une page dynamique consiste à écrire d'abord le code HTML, puis à ajouter les scripts ou les balises côté serveur au code HTML pour rendre la page dynamique. Lorsque vous visualisez le code obtenu, le langage apparaît incorporé dans le code HTML de la page. Par conséquent, ces langages sont appelés langages de programmation HTML

DREAMWEAVER CS3


471

<html>

<head>


</head>

<body>





<cfset department="Sales">

<cfoutput>

<p>Be sure to visit our #department# page.</p>

</cfoutput>



</body>

</html>

Les instructions incorporées dans cette page exécutent les actions suivantes :

1

Création d'une variable appelée department et affectation de la chaîne

"Service commercial"

à cette variable.

2

Insertion de la valeur de la variable,

"Service commercial"

, dans le code HTML.

Le serveur d'application renvoie la page suivante au serveur Web :

<html>

<head>


</head>

<body>



<p>Be sure to visit our Sales page.</p>

</body>

</html>

Le serveur Web transmet la page au navigateur requérant, lequel l'affiche de la manière suivante :

A propos de Trio Motors

Trio Motors est leader dans le domaine de la construction automobile.

Nous vous invitons à visiter la page de notre Service commercial.

Choisissez un langage de script ou de balise en fonction de la technologie de votre serveur. Les langages les plus employés pour les cinq technologies de serveur prises en charge par Dreamweaver sont :

T echnologie de serveur

C o l d

F usion

ASP .N

ET

P ages ASP (A ctive S erver P ages )

JSP (J ava S erver P ages )

P

H

P

Langage

CFM

L

(C o l d

F usion

M ar k up Language

)

V isua l B asic

C#

VBS cript

J ava

S cript

J ava

P

H

P

Dreamweaver peut créer les scripts ou les balises côté serveur nécessaires au bon fonctionnement de vos pages. Vous pouvez

également les rédiger manuellement dans l'environnement de codage de Dreamweaver.

Voir aussi


DREAMWEAVER CS3


472

T

erminologie du développement d'applications Web

Cette section regroupe la définition des termes relatifs aux applications Web fréquemment utilisés.

Un serveur d'application

est un logiciel qui aide un serveur Web à traiter des pages Web contenant des scripts ou des balises côté serveur. Lorsqu'une page de ce type est requise par le serveur, le serveur Web transmet cette page au serveur

d'application afin qu'il la traite avant de l'envoyer au navigateur. Pour plus d'informations, voir la section « Fonctionnement d'une application Web » à la page 467.

Les serveurs d'application les plus utilisés sont ColdFusion, Macromedia JRun Server, la plate-forme .NET de Microsoft,

IBM WebSphere et Apache Tomcat.

Une base de données

est un ensemble de données stockées sous forme de tables. Chaque ligne d'une table correspond à un enregistrement et chaque colonne correspond à un champ de l'enregistrement, tel qu'illustré dans l'exemple ci-dessous.

Un pilote de base de données

est un logiciel qui agit comme un interprète entre une application Web et une base de données. Les données d'une base de données sont stockées dans un format propriétaire. Un pilote de base de données permet à l'application Web de lire et de manipuler des données qui, sans cela, seraient indéchiffrables.

Un système de gestion de bases de données

(SGBD ou système de base de données) est un logiciel utilisé pour créer et manipuler des bases de données. Les systèmes de base de données les plus courants sont Microsoft Access, Oracle 9i

Une requête de base de données

désigne l'opération permettant d'extraire un jeu d'enregistrements d'une base de données.

Une requête est constituée de critères de recherche exprimés en langage de base de données appelé SQL. La requête peut, par exemple, spécifier que seules certaines colonnes ou certains enregistrements doivent être inclus dans le jeu d'enregistrements.

Une page dynamique

navigateur. est une page Web qui est personnalisée par un serveur d'application avant d'être transmise à un

Un jeu d'enregistrements

est un ensemble de données extraites d'une ou plusieurs tables de base de données, comme l'illustre l'exemple suivant :

DREAMWEAVER CS3


473

Une base de données relationnelle

est une base de données contenant plusieurs tables qui partagent des données. La base de données suivante est relationnelle car deux tables partagent la colonne DepartmentID.

Une technologie de serveur

est une technologie utilisée par un serveur d'application pour modifier des pages dynamiques lors de l'exécution.

L'environnement de développement de Dreamweaver prend en charge les technologies de serveur suivantes :

•

Macromedia® ColdFusion® d'Adobe

•

Microsoft ASP.NET

•

Pages ASP (Active Server Pages) de Microsoft

•

JSP Sun (Java Server Pages)

•

PHP: Hypertext Preprocessor (PHP)

Vous pouvez également utiliser l'environnement de codage de Dreamweaver pour développer des pages destinées à toute autre technologie de serveur non répertoriée ci-dessus.

Une page statique

est une page Web qui n'est pas modifiée par un serveur d'application avant d'être transmise à un

Une application Web

est un site Web dont le contenu des pages est partiellement ou entièrement indéterminé. Le contenu final de ces pages est déterminé uniquement lorsque l'utilisateur requiert une page depuis le serveur Web. Le contenu final d'une page variant d'une requête à une autre en fonction des actions de l'utilisateur, ce type de page est appelé page dynamique.

Un serveur Web

est un logiciel qui renvoie des pages Web en réponse aux requêtes de navigateurs Web. Une requête de page est générée lorsqu'un utilisateur clique sur un lien d'une page Web dans le navigateur, choisit un signet dans le navigateur ou saisit une URL dans le champ Adresse du navigateur.

Les serveurs Web les plus courants sont Microsoft Internet Information Server, Microsoft Personal Web Server, Apache

HTTP Server, Netscape Enterprise Server et Sun ONE Web Server.

Installation d'un serveur Web local

Fonctions élémentaires du serveur Web

Pour développer et tester des pages Web dynamiques, vous avez besoin d'un serveur Web opérationnel. Un serveur Web est un logiciel qui fournit des pages Web en réponse à des requêtes de navigateurs Web. Un serveur Web est parfois appelé serveur HTTP. Vous pouvez installer et utiliser un serveur Web sur votre ordinateur local.

Si vous travaillez sur Macintosh, vous pouvez utiliser le serveur Web Apache déjà installé sur votre machine.

Remarque :

Adobe ne fournit aucune assistance technique pour les logiciels tiers, tels que Microsoft Internet Information

Server. Si vous avez besoin d'aide pour un produit Microsoft, contactez le support technique de Microsoft.

Si vous utilisez Internet Information Server (IIS) pour développer des applications Web, le nom par défaut de votre serveur

Web est le nom de votre ordinateur. Vous pouvez modifier le nom du serveur en modifiant celui de votre ordinateur. Si votre

DREAMWEAVER CS3


474

Le nom du serveur correspond au dossier racine du serveur, lequel est généralement (sur un ordinateur fonctionnant sous l'URL suivante dans un navigateur en cours d'exécution sur votre ordinateur.

http:// nom_du_serveur / nom_de_fichier

Par exemple, si le nom du serveur est mer_noire et qu'une page Web intitulée soleil.html est stockée dans

C:\Inetput\wwwroot\, vous pouvez ouvrir cette page en tapant l'URL suivante dans le navigateur en cours d'exécution sur l'ordinateur local : http://mer_noire/soleil.html

Remarque :

Veillez à taper des barres obliques normales et non inverses dans les URL.

Vous pouvez également ouvrir une page Web quelconque stockée dans un sous-dossier du dossier racine en spécifiant ce sous-dossier dans l'URL. Par exemple, supposons que le fichier soleil.html est stocké dans un sous-dossier nommé gamelan, de la façon suivante :

C:\Inetput\wwwroot\gamelan\soleil.html

Vous pouvez ouvrir cette page en entrant l'URL suivante dans un navigateur en cours d'exécution sur votre ordinateur : http://mer_noire/gamelan/soleil.html

Lorsque le serveur Web est exécuté sur votre ordinateur, vous pouvez remplacer le nom du serveur par

localhost

. Par exemple, les URL suivantes ouvrent la même page dans un navigateur : http://mer_noire/gamelan/soleil.html

http://localhost/gamelan/soleil.html

Remarque :

Vous pouvez aussi utiliser une autre expression à la place du nom du serveur ou de localhost : 127.0.0.1 (par exemple, http://127.0.0.1/gamelan/soleil.html).

Voir aussi

« Installation d'un serveur Web local » à la page 473

Choix d'un serveur Web

(Microsoft Internet Information Server), Netscape Enterprise Server, Sun ONE Web Server et Apache HTTP Server.

Si vous n'utilisez pas de service d'hébergement Web, sélectionnez un serveur Web et installez-le sur un ordinateur local ou distant. Les utilisateurs souhaitant développer des applications Web ColdFusion sous Windows peuvent le faire grâce au serveur Web inclus dans l'édition développeur du serveur d'application ColdFusion MX gratuitement.

7. Cette édition est disponible

Les autres utilisateurs Windows peuvent exécuter un serveur Web sur leur ordinateur local en installant IIS. Ce serveur Web peut avoir déjà été installé sur votre ordinateur. Parcourez votre arborescence pour vérifier si elle comporte un dossier

C:\Inetpub ou D:\Inetpub. IIS crée ce dossier pendant l'installation.

Les pages ASP.NET sont prises en charge par un seul serveur Web : Microsoft IIS 5 ou version supérieure. IIS 5 étant un service des systèmes d'exploitation Windows 2000 et Windows XP Professionnel, vous pouvez utiliser l'une de ces deux versions de Windows pour héberger des applications ASP.NET. Toutefois, à défaut d'héberger des applications ASP.NET, vous pouvez les développer sur tous les types d'ordinateurs (Mac OS compris) exécutant Dreamweaver.

Pour Mac OS, vous pouvez avoir recours à un service d'hébergement Web ou installer les logiciels requis sur un ordinateur distant. Vous pouvez également développer des sites PHP sur votre ordinateur local à l'aide du serveur Web Apache et du serveur d'application PHP installés avec votre système d'exploitation

Pour plus d'informations sur l'installation et la configuration des autres serveurs Web, consultez la documentation de votre fournisseur ou consultez l'administrateur système.

DREAMWEAVER CS3


475

Installation d'Internet Information Server (Windows)

Remarque :

Si vous souhaitez développer des applications ColdFusion, vous pouvez utiliser à la place le serveur Web inclus dans l'édition développeur de ColdFusion MX 7. cela, recherchez le dossier C:\Inetpub. S'il n'existe pas, il est probable qu'IIS n'est pas installé sur votre système.

1

Sélectionnez Démarrer > Paramètres > Panneau de configuration

2

Cliquez sur Ajouter/Supprimer des composants Windows.

3

Sélectionnez Internet Information Services (IIS) et cliquez sur Suivant.

4

Suivez les instructions d'installation et testez le serveur Web.

T

est d'Internet Information Server (IIS)

1

Créez une page HTML simple intitulée monFichierTest.html, puis enregistrez-la dans le dossier Inetpub\wwwroot de l'ordinateur exécutant le serveur Web. Cette page HTML peut comporter une seule ligne :

<p>My web server is working.</p>

2

Ouvrez la page de test dans un navigateur Web avec une requête HTTP. Si IIS est exécuté sur votre ordinateur local, entrez l'URL suivante dans votre navigateur Web : http://localhost/monFichierTest.html

3

Si IIS est exécuté sur un ordinateur en réseau, utilisez le nom de l'ordinateur en réseau comme nom de domaine. Par exemple, si le nom de l'ordinateur qui exécute IIS est rockford-pc, entrez l'URL suivante dans votre navigateur : http://rockford-pc/monFichierTest.html

4

Si le navigateur affiche votre page, le serveur Web est exécuté normalement.

Si le navigateur ne peut pas afficher la page, assurez-vous que le serveur est en cours d'exécution. Si la page ne s'affiche toujours pas, assurez-vous que votre page de test est placée dans le dossier Inetpub\wwwroot et comporte une extension

.htm ou .html.

Démarage du serveur Web Macintosh

Vous pouvez utiliser le serveur Web Apache déjà installé sur votre Macintosh pour développer des applications PHP ou

ColdFusion.

Remarque :

Si vous souhaitez développer des applications ColdFusion, vous pouvez utiliser à la place le serveur Web inclus dans l'édition développeur de ColdFusion MX 7.

1

Sélectionnez Apple > Préférences système > Partage.

2

Sélectionnez l'option Partage Web personnel dans l'onglet Services.

3

Cliquez sur le bouton Démarrer et testez le serveur Web.

T

est du serveur Web Macintosh

1

Créez une page HTML simple appelée monFichierTest.html et enregistrez-la dans le dossier

/Users/ votre_nom_utilisateur /Sites/ de votre Macintosh (où votre_nom_utilisateur est votre nom d'utilisateur Macintosh).

Cette page HTML peut comporter une seule ligne, par exemple :

<p>My web server is working.</p>

2

Ouvrez la page de test dans un navigateur Web avec une requête HTTP. Pour cela, saisissez l'URL ci-dessous dans votre navigateur Web : http://localhost/~ votre_nom_utilisateur /monFichierTest.html

DREAMWEAVER CS3


476

3

Si le navigateur affiche votre page, le serveur Web est exécuté normalement. Si le navigateur ne parvient pas à afficher la page, vérifiez que vous avez bien indiqué votre nom d'utilisateur Macintosh en le préfixant du caractère ~.

Remarque :

Par défaut, le serveur Web Apache ne fonctionne pas avec PHP ; vous devez d'abord le configurer avant de pouvoir utiliser PHP.

Voir aussi

« Installation d'un serveur d'application PHP » à la page 477

Configuration d'une application Web

Eléments nécessaires à la création d'applications Web

•

Un serveur Web

•

Un serveur d'application exécuté sur votre serveur Web

Remarque :

Dans le contexte des applications Web, les termes serveur Web et serveur d'application font référence à des logiciels et non à du matériel.

Si vous souhaitez utiliser une base de données en conjonction avec votre application, vous devez également disposer des

•

Un système de base de données

•

Un pilote de base de données prenant en charge votre base de données

Plusieurs sociétés d'hébergement Web vous offrent la possibilité d'utiliser leurs logiciels pour tester et déployer des applications Web. Dans certains cas, il est possible d'installer le logiciel requis sur le même ordinateur que Dreamweaver à des fins de développement. Vous pouvez également installer les logiciels sur un ordinateur en réseau (le plus souvent un ordinateur fonctionnant sous Windows 2000 ou XP) pour rendre votre projet accessible aux autres développeurs de votre

équipe.

Si vous souhaitez utiliser une base de données avec votre application Web, vous devez au préalable établir une connexion avec cette base.

Voir aussi


Choix d'un serveur d'application

Un serveur d'application est un logiciel qui permet à un serveur Web de traiter les pages dynamiques. Lorsque vous souhaitez utiliser (ColdFusion, ASP.NET, ASP, JSP ou PHP) et le type serveur Web.

Budget

Certains fournisseurs proposent des applications haut de gamme dont le prix d'achat et les coûts de fonctionnement sont très élevés. D'autres vendeurs offrent des solutions plus simples et plus rentables (c'est le cas notamment des serveurs ColdFusion et JRun). Certains serveurs d'application sont intégrés aux serveurs Web (notamment


Les serveurs d'application utilisent différentes technologies. Dreamweaver prend en charge cinq technologies de serveur : ColdFusion, ASP.NET, ASP, JSP et PHP. Le tableau suivant indique les serveurs d'application courants axés sur l'une des cinq technologies de serveur prises en charge par Dreamweaver :

DREAMWEAVER CS3


477


C o l d

F usion

ASP .N

ET

ASP

JSP

Serveur d'application

M acromedia

C o l d

F usion

MX 7

M icrosoft II S 6 avec .N

ET F rame w or k

M icrosoft II

S

S un ON E, pages de serveur actif

M acromedia

JR un

A pache T omcat

S erveur

P

H

P P

H

P

Remarque :

Vérifiez que le serveur d'application est compatible avec votre serveur Web. Par exemple, .NET Framework est compatible uniquement avec IIS version 5 ou supérieure.

Pour en savoir davantage sur ColdFusion, sélectionnez ColdFusion dans le menu Aide.

Pour en savoir plus sur ASP.NET, visitez le site Web Microsoft à l'adresse suivante : http://msdn.microsoft.com/asp.net/ .

Pour en savoir plus sur ASP, visitez le site Web Microsoft à l'adresse suivante : http://msdn.microsoft.com/library/default.asp?url=/library/fr-fr/dnanchor/html/activeservpages.asp

.

Pour en savoir plus sur JSP, visitez le site Web de Sun Microsystems à l'adresse suivante : java.sun.com/products/jsp/ .

Pour en savoir plus sur PHP, visitez le site Web de PHP à l'adresse suivante : www.php.net/ .

Installation d'un serveur d'application ColdFusion

Pour exécuter des pages ColdFusion, vous devez disposer du serveur d'application ColdFusion. Il existe une version de ce serveur pour les systèmes Windows, Linux, Solaris et HP-UX.

Les utilisateurs de Windows et Macintosh ont la possibilité de télécharger et d'installer la version complète de

ColdFusion MX 7 édition développeur, disponible sur le site Web de Adobe, à l'adresse www.adobe.com/go/coldfusion_fr/ .

Remarque :

L'édition développeur est réservée au développement et à l'évaluation d'applications Web non commerciales. La licence accordée ne permet pas d'effectuer le déploiement. Cette édition prend en charge les requêtes provenant de l'hôte local et de deux adresses IP distantes. Vous pouvez l'utiliser pour développer et tester vos applications Web aussi longtemps que nécessaire, car la licence est permanente. Pour plus d'informations, consultez l'aide de ColdFusion (Aide > Aide de ColdFusion).

Pendant l'installation, vous pouvez configurer ColdFusion de manière à utiliser le serveur Web intégré au programme ou un autre serveur Web de votre système. En principe, il est préférable de faire correspondre du mieux possible votre environnement de développement et votre environnement de production. Par conséquent, si un serveur Web (par exemple,

Microsoft IIS) est installé sur l'ordinateur sur lequel vous développez vos applications, il est peut-être préférable de l'utiliser.

Après avoir installé le serveur d'application, vous devez créer un dossier racine pour votre application Web.

Installation d'un serveur d'application PHP

Pour exécuter des pages PHP, vous devez disposer du serveur d'application PHP, logiciel ouvert disponible sur le Web. Il existe une version de ce serveur d'application pour les systèmes Windows, Linux, UNIX, HP-UX, Solaris et Mac OS X.

Pour plus d'informations sur le serveur d'applications, consultez la documentation PHP, que vous pouvez également télécharger à partir du site Web PHP à l'adresse www.php.net/download-docs.php

.

Installation du serveur d'applications PHP sous Windows

1

Le cas échéant, connectez-vous à votre système Windows en utilisant le compte Administrateur.

2

Téléchargez Windows PHP 5.x Installer depuis le site Web PHP, à l'adresse www.php.net/downloads.php

.

3

Double-cliquez sur le fichier d'installation que vous avez téléchargé et suivez les instructions d'installation qui paraissent

à l'écran.

DREAMWEAVER CS3


478

4

Dans l'écran Choose Items To Install, cliquez sur le bouton Plus (+) en regard d'Extensions, accédez à MySQL dans la liste, puis activez l'option Will Be Installed On Local Hard Drive.

Avec PHP 5, l'extension MySQL qui permet à PHP de fonctionner avec un serveur de base de données MySQL n'est pas installé ou activé par défaut par le programme d'installation de Windows.

5

Dans le dossier d'installation de PHP (probablement C:\Program Files\PHP), repérez le fichier appelé php.ini et ouvrezle dans le Bloc-Notes.

Vous devez modifier ce fichier pour activer l'extension MySQL.

6

Trouvez la ligne suivante dans ce fichier :

;extension=php_mysql.dll

Le point-virgule en début de ligne demande à PHP d'ignorer cette ligne.

7

Supprimez le point-virgule en début de ligne pour activer l'extension.

extension=php_mysql.dll

8

Enregistrez et fermez le fichier php.ini.

9

Dans le dossier d'installation de PHP, repérez le dossier appelé libmysql.dll et copiez-le dans le dossier

C:\Windows\system32 .

Ce fichier est nécessaire pour que IIS puisse travailler avec PHP 5 et MySQL.

10

Redémarrez IIS.

Après avoir installé PHP, vous pouvez tester le serveur pour vous assurer qu'il fonctionne correctement Reportez-vous à la section suivante.

T est de l'installation PHP dans Windows

1

Dans Dreamweaver ou dans tout éditeur de texte, créez un fichier de texte brut intitulé timetest.php.

2

Tapez le code suivant dans le fichier :

<p>This page was created at <b>

<?php echo date("h:i:s a", time()); ?>

</b> on the computer running PHP.</p>

Ce code affiche l'heure à laquelle la page a été traitée sur le serveur.

3

Copiez le fichier dans le dossier C:Inetpub\wwwroot de l'ordinateur Windows qui exécute IIS.

4

Dans votre navigateur Web, tapez l'URL de votre page de test, puis appuyez sur Entrée.

Si vous avez installé PHP sur votre ordinateur local, vous pouvez taper l'URL suivante : http://localhost/timetest.php

La page de test doit s'ouvrir et indiquer l'heure.

L'heure indiquée correspond au contenu dynamique car elle change chaque fois que vous appelez la page. Cliquez sur le bouton Actualiser du navigateur pour générer une nouvelle page avec une heure différente.

Remarque :

En consultant le code source (Affichage > Source dans Internet Explorer), vous pourrez vérifier que la page n'utilise pas de code JavaScript côté client pour obtenir ce résultat.

Si la page ne fonctionne pas correctement, recherchez les erreurs potentielles suivantes :

• Le fichier n'a pas d'extension .php.

• Vous avez saisi le chemin du fichier de la page (C:\Inetput\wwwroot\timetest.asp) au lieu de son URL (par exemple, http://localhost/timetest.asp) dans le champ Adresse du navigateur.

Si vous tapez un chemin de fichier dans le navigateur (comme vous en avez peut-être l'habitude avec les pages HTML normales), vous contournez le serveur Web et le serveur d'application. Votre page n'est alors jamais traitée par le serveur.

DREAMWEAVER CS3


479

•

L'URL contient une faute de frappe. Recherchez les erreurs éventuelles et vérifiez que le nom de fichier n'est pas suivi d'une barre oblique, comme dans l'adresse suivante : http://localhost/timetest.php/.

•

Le code de la page contient une faute de frappe.

Après avoir installé et testé le logiciel de serveur, créez un dossier racine pour votre application Web Consultez la section

« Création d'un dossier racine pour l'application » à la page 481.

Installation du serveur d'applications PHP sur Macintosh

1

Le cas échéant, connectez-vous à votre système Macintosh en utilisant le compte Administrateur.

2

Créez un dossier nommé webapps dans votre dossier utilisateur principal, Users/ votre_nom /webapps).

3

Depuis le site Web d'Entropy, www.entropy.ch/software/macosx/php/ , téléchargez le package PHP 5.x for Apache 1.3

(par exemple, entropy-php-5.2.0-3.tar.gz) et enregistrez-le dans votre dossier webapps.

4

Sur le Macintosh, ouvrez Terminal (Applications/Utilitaires) et remplacez le dossier par défaut par webapps en entrant la ligne suivante sur la ligne de commande, puis en appuyant sur Entrée :

cd webapps

5

Dans Terminal, décompressez le fichier gz en tapant

gunzip

suivi du nom du fichier gz figurant dans votre dossier webapps.

Par exemple, si vous avez téléchargé entropy-php-5.2.0-3.tar.gz, tapez la commande suivante puis appuyez sur Entrée :

gunzip entropy-php-5.2.0-3.tar.gz

Remarque :

N'employez pas Stuffit Expander pour décompresser le fichier.

6

Dans Terminal, ouvrez l'archive tar que vous venez de décompresser en tapant

tar xf

suivi du nom du fichier tar.

Exemple :

tar xf entropy-php-5.2.0-3.tar

Un package d'installation nommé entropy-php.mpkg est extrait de l'archive.

7

Double-cliquez sur le package d'installation entropy-php.mpkg et suivez les instructions qui paraissent à l'écran.

Après avoir installé PHP, vous pouvez tester le serveur pour vous assurer qu'il fonctionne correctement Reportez-vous à la section suivante.

T est du serveur d'applications PHP sur Macintosh

1

Dans Dreamweaver ou dans tout éditeur de texte, créez un fichier de texte brut intitulé timetest.php.

2

Tapez le code suivant dans le fichier :

<p>This page was created at <b>

<?php echo date("h:i:s a", time()); ?>

</b> on the computer running PHP.</p>

Ce code affiche l'heure à laquelle la page a été traitée sur le serveur.

3

Copiez ce fichier dans le dossier /Utilisateurs/ votre_nom_d'utilisateur /Sites de votre Macintosh.

Le dossier Sites correspond à votre dossier racine personnel sur le serveur Web Apache.

4

Dans votre navigateur Web, saisissez l'URL ci-dessous, puis appuyez sur la touche Retour http://localhost/~ votre_nom_d'utilisateur /timetest.php

La page de test doit s'ouvrir et indiquer l'heure.

L'heure indiquée correspond au contenu dynamique car elle change chaque fois que vous appelez la page. Cliquez sur le bouton Actualiser du navigateur pour générer une nouvelle page avec une heure différente.

Remarque :

En consultant le code source (Présentation > Code source dans Safari), vous pourrez vérifier que la page n'utilise pas de code JavaScript côté client pour obtenir ce résultat.

DREAMWEAVER CS3


480

Si la page ne fonctionne pas correctement, recherchez les erreurs potentielles suivantes :

•

Le fichier n'a pas d'extension .php.

•

L'URL contient une faute de frappe. Recherchez les erreurs éventuelles et vérifiez que le nom de fichier n'est pas suivi d'une barre oblique, tel que dans l'adresse suivante : http://localhost/~ votre_nom_d'utilisateur /timetest.php/. Vérifiez

également que vous avez inséré le tilde (~) devant votre nom d'utilisateur.

•

Le code de la page contient une faute de frappe.

•

Le serveur Apache n'est pas en cours d'exécution. Vérifiez que l'option de partage Web est activée dans la catégorie

Partage des préférences système.

Après avoir installé et testé le logiciel de serveur, créez un dossier racine pour votre application Web Consultez la section

« Création d'un dossier racine pour l'application » à la page 481.

Installation d'un serveur d'application ASP

Pour accéder aux pages ASP, vous devez disposer d'une application prenant en charge Microsoft Active Server Pages 2.0., telle que Microsoft IIS, qui est fournie avec Windows 2000 et Windows XP Professionnel.

Les utilisateurs de Macintosh peuvent faire appel à un service d'hébergement Web offrant une solution ASP ou bien installer IIS sur un ordinateur distant.

Après avoir installé IIS, vous devez créer un dossier racine pour votre application Web.

Installation d'un serveur d'application ASP.

N

E

T

• un ordinateur Windows 2000 ou Windows XP Professionnel exécutant IIS version 5 ou ultérieure ;

• la plate-forme Microsoft .NET Framework 1.1 et Microsoft .NET Framework 1.1 SDK, que vous pouvez télécharger à partir du site Web Microsoft.

Remarque :

Assurez-vous que la plate-forme .NET et le SDK sont installés sur les systèmes Windows 2000 ou

Professionnel exécutant IIS 5 ou supérieur.

1

Contrôlez que la plate-forme .NET est installée sur votre système en parcourant la liste des applications dans la boîte de dialogue Ajout/Suppression de programmes (Démarrer > Panneau de configuration > Ajout/Suppression de programmes).

Si vous trouvez Microsoft .NET Framework 1.1 dans la liste, alors la plate-forme est déjà installée et vous pouvez passer directement à l'étape 3.

2

Si la plate-forme n'est pas installée sur votre système, téléchargez et installez le package redistributable .NET Framework version 1.1 à partir du site Web de Microsoft et suivez les instructions d'installation que vous trouverez sur ce site.

Remarque :

Vous installez la plate-forme comme une mise à jour de Windows.

3

Téléchargez le kit de développement Microsoft .NET Framework version 1.1 du site Web Microsoft et suivez les instructions d'installation.

Après avoir installé .NET Framework et le SDK, vous devez également installer le pack Microsoft Data Access Components

(MDAC) 2.8. Vous pouvez télécharger et installer le pack MDAC 2.7 gratuitement à partir du site Web de Microsoft à l'adresse http://msdn.microsoft.com/data/mdac/downloads/ .

Les utilisateurs de Macintosh ou de Windows 98 peuvent faire appel à un service d'hébergement Web offrant une solution

ASP.NET, ou bien installer .NET Framework et le SDK sur un ordinateur Windows 2000 ou Windows XP Professionnel distant exécutant IIS version 5 ou ultérieure.

Après avoir installé .NET Framework et le SDK, vous devez créer un dossier racine pour votre application Web.

DREAMWEAVER CS3


481

Installation d'un serveur d'application JSP

Pour exécuter des pages JSP, vous devez disposer d'un serveur d'application compatible avec JavaServer Pages (JSP). Voici

•

Macromedia JRun pour Windows, Mac OS X, Linux, Solaris ou UNIX. Vous pouvez télécharger une version d'évaluation de JRun depuis le site Web de Adobe, à l'adresse www.adobe.com/go/jrun_fr/ .

•

Tomcat pour Windows et UNIX (incluant Mac OS X). Vous pouvez télécharger un exemplaire de Tomcat depuis le site

Web Jakarta Project, à l'adresse http://tomcat.apache.org/ . Pour plus d'informations concernant l'installation de Tomcat sur le Macintosh, consultez le site Apple à l'adresse http://developer.apple.com/internet/java/tomcat1.html

.

Après avoir installé un serveur d'application JSP, vous devez créer un dossier racine pour votre application Web.

Création d'un dossier racine pour l'application

Après avoir trouvé une société d'hébergement de site Web ou avoir vous-même conçu votre serveur, créez un dossier racine pour votre application Web sur l'ordinateur où s'exécute votre serveur. Le dossier racine peut être un dossier local ou distant, suivant l'emplacement du serveur Web.

Le serveur Web répondra aux requêtes HTTP d'un navigateur Web en renvoyant les fichiers de ce dossier ou de ses sous-dossiers.

Par exemple, dans le cas d'un ordinateur exécutant ColdFusion MX 7, il convient de s'assurer que tous les fichiers contenus dans le dossier \CFusionMX7\wwwroot et dans chacun de ses sous-dossiers peuvent être transmis à un navigateur Web.

Le tableau ci-dessous répertorie les dossiers racine par défaut des différents serveurs Web :

Serveur Web

C o l d

F usion

MX 7

II S

A pache

(W indo w s

)

A pache (M acintosh )

J a k arta

T omcat

(W indo w s

)

Dossier racine par défaut

\CF usion

MX7\www root

\ Inetpub \www root

\ apache

\ htdocs

Users :M onNomd ' Uti l isateur :S ites

\j a k arta

tomcat

-4

.

x

.

x\w ebapps

\R

OO

T\

Pour tester le serveur Web, enregistrez une page HTML test dans le dossier racine par défaut, puis tentez de l'ouvrir en indiquant son URL dans un navigateur. L'URL est composée du nom de domaine et du nom du fichier correspondant à la pageHTML, comme dans l'exemple ci-dessous : www.exemple.com/testpage.htm

Si le serveur Web s'exécute sur votre ordinateur local, vous pouvez utiliser

localhost

au lieu d'un nom de domaine. Entrez l'une des URL d'hôte local suivantes correspondant à votre serveur Web :

Serveur Web

C o l d

F usion

MX 7

II S

A pache

(W indo w s

)

A pache (M acintosh )

URL d'hôte local

http

://l oca l host

:8500/ testpage.htm

http ://l oca l host / testpage.htm

http

://l oca l host

:80/ testpage.htm

http ://l oca l host /~M onNomd ' Uti l isateur / testpage.htm

( o ù

M onNomd

'

Uti l isateur est votre nom d

' uti l isateur

M acintosh

) http ://l oca l host :8080/ testpage.htm

J a k arta T omcat (W indo w s )

Remarque :

Par défaut, le serveur ColdFusion MX 7 est relié au port 8500, et le serveur Jakarta Tomcat au port 8080.

Si la page ne s'affiche pas correctement, recherchez les erreurs potentielles suivantes :

•

Le serveur Web n'est pas en cours d'exécution. Consultez les instructions de démarrage dans la documentation du serveur Web.

•

Le fichier n'a pas d'extension .htm ou .html.

DREAMWEAVER CS3


482

•

Vous avez indiqué le chemin du fichier contenant la page (par exemple, c:\CFusionMX7\wwwroot\testpage.htm) au lieu de son URL (par exemple, http://localhost:8500/testpage.htm) dans la zone d'adresse de votre navigateur.

•

L'URL contient une faute de frappe. Recherchez les erreurs éventuelles et vérifiez que le nom de fichier n'est pas suivi d'une barre oblique, comme dans l'adresse suivante : http://localhost:8080/testpage.htm/.

Après avoir créé un dossier racine pour votre application, définissez un site Dreamweaver pour la gestion des fichiers.

Voir aussi



A propos de la définition d'un site Dreamweaver

Après avoir configuré le système en vue du développement d'applications Web, vous devez définir un site Dreamweaver pour la gestion des fichiers.

Avant de commencer, vérifiez que les conditions suivantes sont réunies :

•

Vous avez accès à un serveur Web. Le serveur Web peut résider sur un ordinateur local, sur un ordinateur distant tel qu'un serveur de développement, ou sur un serveur géré par une société d'hébergement Web

•

Un serveur d'application est installé et exécuté sur le système où réside le serveur Web.

•

Vous avez créé un dossier racine pour votre application Web sur le système exécutant le serveur Web.

La définition d'un site Dreamweaver pour l'application Web se déroule en trois étapes :

1. Définition d'un dossier local

Ce dossier local est le dossier du disque dur dans lequel seront stockées les copies de travail des fichiers du site. Vous pouvez définir un dossier local pour chacune des applications Web créées. La définition d'un dossier local vous permet également de gérer vos fichiers et de les transférer aisément vers ou depuis le serveur Web.

2. Définition d'un dossier distant

Définissez un dossier situé sur l'ordinateur exécutant le serveur Web comme dossier distant Dreamweaver. Ce dossier distant est le dossier que vous avez créé sur le serveur Web pour l'application Web.

3. Définition d'un dossier de test

Dreamweaver utilise ce dossier pour générer et afficher du contenu dynamique et se connecter à des bases de données 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. Vous devez seulement vous assurer que le serveur sélectionné est en mesure de traiter le type de pages dynamiques que vous avez l'intention de développer.

Une fois le site Dreamweaver défini, vous pouvez procéder à la création de l'application Web.

Voir aussi





DREAMWEAVER CS3


483

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

ColdFusion

Connexion à une base de données ColdFusion

Pour développer une application Web ColdFusion sous Dreamweaver, vous devez vous connecter à une base de données en choisissant une source de données ColdFusion définie dans Dreamweaver ou la console de gestion du serveur ColdFusion

Administrator.

Avant d'établir une connexion à une base de données, vous devez configurer une application Web ColdFusion. Vous devez

également installer une base de données sur votre ordinateur local ou sur un système auquel vous pouvez accéder en réseau ou par FTP.

Assurez-vous également que Dreamweaver sait où aller chercher les sources de données ColdFusion. Pour récupérer les sources de données ColdFusion au moment de la conception, Dreamweaver place des scripts dans un dossier sur l'ordinateur exécutant ColdFusion. Vous devez indiquer ce dossier dans la catégorie Serveur d'évaluation de la boîte de dialogue Définition du site.

Ensuite, vous devez créer une source de données ColdFusion dans Dreamweaver ou le programme ColdFusion

Administrator (s'il n'en existe pas déjà une). Une fois la source de données ColdFusion créée, vous pouvez l'utiliser dans

Dreamweaver pour vous connecter à la base de données.

Création ou modification d'une source de données ColdFusion

Pour être en mesure d’utiliser les informations d’une base de données dans une page Web, vous devez d’abord créer une source de données ColdFusion. Si vous utilisez la version 7 ou ultérieure de ColdFusion MX, vous pouvez directement créer ou modifier la source de données dans Dreamweaver. Si vous utilisez ColdFusion MX, vous devez utiliser la console de gestion sur le serveur, ColdFusion MX Administrator, pour créer ou modifier la source de données. Dans ce cas, vous pouvez toutefois utiliser Dreamweaver pour ouvrir ColdFusion MX Administrator.

Voir aussi


« Activation des améliorations ColdFusion » à la page 644

Création ou modification d'une source de données ColdFusion avec ColdFusion MX 7 ou version ultérieure

1

Vérifiez qu'un ordinateur exécutant ColdFusion MX 7 ou version ultérieure est défini comme serveur d'évaluation pour votre site.

2

Ouvrez une page ColdFusion dans Dreamweaver.

3

Pour créer une source de données, cliquez sur le bouton Plus (+) dans le panneau Bases de données (Fenêtres > Bases de données) et saisissez les valeurs des paramètres spécifiques au pilote de base de données.

Remarque :

Dreamweaver n’affiche le bouton Plus que si vous exécutez ColdFusion MX 7 ou une version ultérieure.

4

Pour modifier une source de données, double-cliquez sur le bouton de connexion à la base de données dans le panneau

Bases de données, et modifiez les valeurs nécessaires.

Vous pouvez modifier tous les paramètres, sauf le nom de la source de données. Pour plus d'informations, consultez la documentation du fournisseur du pilote ou consultez votre administrateur système.

Création ou modification d'une source de données ColdFusion avec ColdFusion MX 6.1 ou 6.0

1


2

Dans le panneau Bases de données (Fenêtre > Bases de données) de Dreamweaver, cliquez sur Modifier les sources de données dans la barre d'outils.

3

Connectez-vous à ColdFusion MX Administrator et créez ou modifiez la source de données.

DREAMWEAVER CS3


484

Pour plus d'informations, consultez l'aide de ColdFusion (Aide > Aide de ColdFusion).

Vous devez fournir certaines valeurs de paramètres pour créer la source de données ColdFusion. Pour les valeurs de paramètres spécifiques à votre pilote de base de données, consultez la documentation de votre fournisseur ou contactez votre administrateur système.

Une fois que vous avez créé une source de données ColdFusion, vous pouvez l'utiliser dans Dreamweaver.

Connexion à la base de données dans Dreamweaver

Une fois la source de données ColdFusion créée, vous pouvez l'utiliser dans Dreamweaver pour vous connecter à la base de données.

Ouvrez n'importe quelle page ColdFusion dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre > Bases de données). Vos sources de données ColdFusion s'affichent dans le panneau.

Si ce n'est pas le cas, remplissez la liste de contrôle du panneau. Assurez-vous également que Dreamweaver sait où aller chercher les sources de données ColdFusion. Dans la catégorie Serveur d'évaluation de la boîte de dialogue Définition du site, indiquez le dossier racine du site sur l'ordinateur exécutant ColdFusion.

Voir aussi

« Résolution des problèmes de connexion aux bases de données » à la page 499


ASP

A propos des connexions aux bases de données ASP

Une application ASP doit se connecter à une base de données via un pilote ODBC ou un fournisseur de OLE DB. Le pilote ou le fournisseur joue le rôle de traducteur pour permettre à l'application Web de communiquer avec la base de données.

Le tableau suivant répertorie certains des pilotes que vous pouvez utiliser avec les bases de données Microsoft Access,

Microsoft SQL Server et Oracle :

Base de données

M icrosoft

A ccess

M icrosoft

SQ

L

S erver

Orac l e

Pilote de base de données

P i l ote

M icrosoft

A ccess

(

O

DBC)

M icrosoft

J et

P rovider pour

A ccess

(

OL

E DB)

P i l ote

M icrosoft

SQ

L

S erver

(

O

DBC)

F ournisseur

M icrosoft

SQ

L

S erver

(

OL

E DB)

P i l ote

M icrosoft Orac l e

(

O

DBC)

F ournisseur Orac l e pour OL

E DB

Vous pouvez utiliser un DSN (Data Source Name, nom de source de données) ou une chaîne de connexion pour vous connecter à la base de données. Vous devez utiliser une chaîne de connexion si vous vous connectez via un fournisseur OLE

DB ou via un pilote ODBC qui n 'est pas installé sur un système Windows.

Un DSN est un identificateur formé d'un seul mot (MaConnexion, par exemple), qui pointe vers la base de données et contient toutes les informations requises pour s'y connecter. Le DSN se définit dans Windows. Vous pouvez utiliser un DSN si vous vous connectez via un pilote ODBC installé sur un système Windows.

Une chaîne de connexion est une expression saisie à la main qui identifie la base de données et fournit les informations requises pour s'y connecter, comme le montre l'exemple suivant :

Driver={SQL Server};Server=Socrates;Database=AcmeMktg;

UID=wiley;PWD=roadrunner

DREAMWEAVER CS3


485

Remarque :

Vous pouvez également utiliser une chaîne de connexion si vous vous connectez via un pilote ODBC installé sur un système Windows, mais il est plus facile d'utiliser un DSN.

Voir aussi

« Accès à une base de données » à la page 469

A propos des connexions

O

LE DB

Vous pouvez utiliser un fournisseur OLE DB pour communiquer avec votre base de données (OLE DB n'est disponible que sous Windows NT, 2000 ou XP). Le fait de créer une connexion à une OLE DB directe et spécifique à la base de données peut augmenter la vitesse de connexion en éliminant l'intermédiaire ODBC entre votre application Web et la base de données.

Si vous ne précisez pas de fournisseur de OLE DB pour votre base de données, ASP utilisera le fournisseur par défaut pour les pilotes ODBC pour communiquer avec un pilote ODBC, lequel communiquera à son tour avec la base de données.

Différents fournisseurs de OLE DB existent pour différentes bases de données. Vous pouvez obtenir des fournisseurs de

OLE DB pour Microsoft Access et SQL Server en téléchargeant et en installant les packs Microsoft Data Access Components

(MDAC) 2.5 et 2.7 sur l'ordinateur Windows exécutant IIS. Vous pouvez télécharger et installer les packs MDAC gratuitement à partir du site Web de Microsoft à l'adresse http://msdn.microsoft.com/data/mdac/downloads/ .

Remarque :

Assurez-vous que vous disposez de MDAC 2.7.

Vous pouvez télécharger les fournisseurs de OLE DB pour les bases de données Oracle sur le site Web d'Oracle, à l'adresse www.oracle.com/technology/software/tech/windows/ole_db/index.html

(enregistrement obligatoire).

Pour créer une connexion OLE DB dans Dreamweaver, vous devez inclure un paramètre

Provider

(Fournisseur) dans une chaîne de connexion. Voici par exemple des paramètres de fournisseurs de OLE DB courants pour les bases de données

Access, SQL Server et Oracle, respectivement :

Provider=Microsoft.Jet.OLEDB.4.0;...

Provider=SQLOLEDB;...

Provider=OraOLEDB;...

Pour connaître le paramètre de votre fournisseur de OLE DB, consultez la documentation du fournisseur de votre pilote ou consultez votre administrateur système.

A propos des chaînes de connexion

Une chaîne de connexion regroupe toutes les informations dont votre application Web a besoin pour se connecter à une base de données. Dreamweaver insère cette chaîne dans vos scripts de page côté serveur afin que ceux-ci soient ultérieurement traités par votre serveur d'application.

Une chaîne de connexion aux bases de données Microsoft Access et SQL Server se compose des paramètres suivants, séparés par des points-virgules :

Provider (Fournisseur)

Indique le fournisseur OLE DB pour votre base de données. Voici par exemple des paramètres de fournisseurs de OLE DB courants pour les bases de données Access, SQL Server et Oracle, respectivement :

Provider=Microsoft.Jet.OLEDB.4.0;...

Provider=SQLOLEDB;...

Provider=OraOLEDB;...

Pour connaître le paramètre de votre fournisseur de OLE DB, consultez la documentation du fournisseur de votre pilote ou consultez votre administrateur système.

Si vous n'incluez pas le paramètre Provider (Fournisseur), le fournisseur de OLE DB par défaut pour ODBC sera utilisé et vous devrez préciser un pilote ODBC approprié pour votre base de données.

Driver (Pilote)

Indique le pilote ODBC à utiliser si vous ne spécifiez pas de fournisseur de OLE DB pour votre base de données.

DREAMWEAVER CS3


486

Server (Serveur)

serveur différent.

Indique le serveur hébergeant la base de données SQL Server si votre application Web est exécutée sur un

Database (base de données)

Est le nom d'une base de données SQL Server.

DBQ

Est le chemin à une base de données basée sur fichier (une base de données créée dans Microsoft Access, par exemple).

Le chemin est celui sur le serveur hébergeant le fichier de base de données.

UID

Indique le nom de l'utilisateur.

PWD

Indique le mot de passe de l'utilisateur.

DS

N

Est le nom de la source de données, si toutefois vous en utilisez une. Selon la façon dont vous définissez le DSN sur votre serveur, vous pouvez omettre les autres paramètres de la chaîne de connexion. Par exemple,

DSN=Results

peut constituer une chaîne de connexion valide si vous définissez les autres paramètres lorsque vous créez le DSN.

Il est également possible que ces paramètres aient un nom ou une utilisation différents pour d'autres types de bases de données. Pour plus d'informations, consultez la documentation du fournisseur de votre base de données ou consultez votre administrateur système.

Voici un exemple de chaîne de connexion créant une connexion ODBC à une base de données Access appelée arbres.mdb :

Driver={Microsoft Access Driver (*.mdb)};

DBQ=C:\Inetpub\wwwroot\Research\trees.mdb

Voici un exemple de chaîne de connexion créant une connexion OLE DB à un système de base de données SQL Server appelé Mothra et se trouvant sur un serveur du nom de Gojira :

Provider=SQLOLEDB;Server=Gojira;Database=Mothra;UID=jsmith;

PWD=orlando8

Créer une connexion en utilisant un DS

N

local

Remarque :

Pour réaliser les opérations présentées dans la présente section, vous devez avoir configuré une application ASP.

Une base de données doit également être installée sur votre ordinateur local ou sur un système auquel vous pouvez accéder en réseau ou par FTP.

Vous pouvez utiliser un DSN (Data Source Name, nom de source de données) pour créer une connexion ODBC entre votre application Web et votre base de données. Un DSN est un nom contenant tous les paramètres nécessaires pour établir la connexion à une base de données précise à l'aide d'un pilote ODBC.

Comme vous pouvez uniquement spécifier un pilote ODBC dans un DSN, vous devez utiliser une chaîne de connexion si vous souhaitez passer par un fournisseur de OLE DB.

Vous pouvez utiliser un DSN défini localement pour créer une connexion à une base de données dans Dreamweaver.

1

Définissez un DSN sur l'ordinateur Windows exécutant Dreamweaver.

Pour obtenir des instructions, consultez les articles suivants sur le site Web de Microsoft :

•

Si votre ordinateur fonctionne sous Windows 2000, consultez l'article 300596 de la base de connaissances Microsoft à l'adresse suivante : http://support.microsoft.com/default.aspx?scid=kb;fr-fr;300596

•

Si votre ordinateur fonctionne sous Windows XP, consultez l'article 305599 de la base de connaissances Microsoft à l'adresse suivante : http://support.microsoft.com/default.aspx?scid=kb;fr-fr;305599

2

Ouvrez une page ASP dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre

3

Cliquez sur le bouton Plus (+) dans le panneau et sélectionnez Nom de la source de données (DSN) dans le menu.

4

Entrez un nom pour la nouvelle connexion, sans espaces ni caractères spéciaux.

5

Activez l'option Utilisation du DSN local et choisissez le DSN que vous souhaitez utiliser dans le menu Nom de la source de données (DSN).

Si vous voulez utiliser un DSN local mais n'en avez pas encore défini, cliquez sur Définir pour ouvrir l'administrateur de sources de données ODBC Windows.

6

Renseignez les zones Nom d'utilisateur et Mot de passe.

DREAMWEAVER CS3


487

7

Vous pouvez limiter le nombre d'éléments de base de données récupérés par Dreamweaver au moment de la conception en cliquant sur Avancé puis en saisissant un nom de schéma ou de catalogue.

Remarque :

Vous ne pouvez pas créer de schéma ou de catalogue dans Microsoft Access.

8

Cliquez sur Tester pour vous connecter à la base de données, puis cliquez sur OK. Si la connexion n'aboutit pas, doublecliquez sur la chaîne de connexion ou vérifiez les paramètres du dossier d'évaluation utilisé par Dreamweaver pour traiter les pages dynamiques.

Voir aussi

« Limitation des informations de base de données affichées dans Dreamweaver » à la page 514



Créer une connexion en utilisant un DS

N

distant

Remarque :

Pour réaliser les opérations présentées dans la présente section, vous devez avoir configuré une application ASP.

Une base de données doit également être installée sur votre ordinateur local ou sur un système auquel vous pouvez accéder en réseau ou par FTP.

Remarque :

Dreamweaver ne peut récupérer que les DSN de serveur créés à l'aide de l'administrateur de source de données

ODBC Windows.

Vous pouvez utiliser un DSN défini sur un ordinateur distant pour créer une connexion à une base de données dans

Dreamweaver. Si vous souhaitez utiliser un DSN distant, celui-ci doit être défini sur l'ordinateur Windows exécutant votre serveur d'application (probablement IIS).

Remarque :

Comme vous pouvez uniquement spécifier un pilote ODBC dans un DSN, vous devez utiliser une chaîne de connexion si vous souhaitez passer par un fournisseur de OLE DB.

1

Définissez un DSN sur le système distant exécutant votre serveur d'application.


•

Si votre ordinateur fonctionne sous Windows 2000, consultez l'article 300596 de la base de connaissances Microsoft à l'adresse suivante : http://support.microsoft.com/default.aspx?scid=kb;fr-fr;300596

•

Si votre ordinateur fonctionne sous Windows XP, consultez l'article 305599 de la base de connaissances Microsoft à l'adresse suivante : http://support.microsoft.com/default.aspx?scid=kb;fr-fr;305599

2

Ouvrez une page ASP dans Dreamweaver, puis ouvrez le panneau Bases de données (Fenêtre > Bases de données).

3

Cliquez sur le bouton Plus (+) dans le panneau et sélectionnez Nom de la source de données (DSN) dans le menu.

4


5

Sélectionnez Utilisation de la DSN sur le serveur d'évaluation

Remarque :

Les utilisateurs Macintosh peuvent ignorer cette étape car toutes les connexions à des bases de données utilisent des DSN sur le serveur d'application.

6

Tapez le DSN or ou cliquez sur le bouton DSN pour vous connecter au serveur et sélectionnez le DSN pour la base de données de votre choix, puis définissez les options.

7

Renseignez les zones Nom d'utilisateur et Mot de passe.

8


Remarque :


9


DREAMWEAVER CS3


488

Voir aussi




Créer une connexion en utilisant une chaîne de connexion

Vous pouvez utiliser une connexion sans DSN pour créer une connexion ODBC ou OLE DB entre votre application Web et votre base de données. Il faut utiliser une chaîne de connexion pour créer ce type de connexion.

1


2

Cliquez sur le bouton Plus (+) dans le panneau et sélectionnez Chaîne de connexion personnalisée dans le menu.

Définissez les options, puis cliquez sur OK.

3


4

Tapez une chaîne de connexion vers la base de données. Si vous n'indiquez pas de fournisseur de BD OLE dans la chaîne de connexion, c'est-à-dire si vous ne saisissez pas de paramètre

Provider (Fournisseur)

, ASP utilisera automatiquement le fournisseur de BD OLE pour les pilotes ODBC. Dans ce cas, vous devrez indiquer un pilote ODBC approprié pour votre base de données.

Si votre site est hébergé par un fournisseur d'accès Internet et que vous ne connaissez pas le chemin d'accès complet à votre base de données, utilisez la méthode

MapPath

de l'objet de serveur ASP dans votre chaîne de connexion.

5

Si le pilote de base de données spécifié dans la chaîne de connexion n'est pas installé sur le même ordinateur que

Dreamweaver, sélectionnez Utilisation du pilote sur le serveur d'évaluation.

Remarque :

Les utilisateurs Macintosh peuvent ignorer cette étape car toutes les connexions aux bases de données utilisent le serveur d'application.

6


Remarque :


7


Voir aussi

« Connexion à une base de données ColdFusion » à la page 483



Connexion à une base de données via un fournisseur d'accès

Si vous êtes un développeur ASP travaillant pour un fournisseur d'accès Internet, il est probable que vous ne connaissez pas le chemin physique d'accès aux fichiers que vous chargez, y compris celui de vos fichiers de base de données.

Si votre fournisseur d'accès ne définit pas de DSN pour vous ou ne le fait pas assez rapidement, vous devez trouver un autre moyen de créer des connexions à vos fichiers de base de données. Vous pouvez créer une connexion sans DSN à un fichier de base de données, mais une telle connexion n'est possible que si vous connaissez le chemin d'accès physique du fichier de base de données sur le serveur du fournisseur d'accès.

Vous pouvez obtenir le chemin d'accès physique à un fichier de base de données présent sur un serveur en utilisant la méthode

MapPath

de l'objet serveur ASP.

Remarque :

Les techniques présentées dans la présente section sont valables uniquement si votre base de données est basée sur un fichier, comme par exemple, une base de données Microsoft Access, qui stocke les données dans un fichier .mdb.

DREAMWEAVER CS3


489

Description des chemins d'accès physiques et virtuels

Lorsque vous chargez vos fichiers sur un serveur distant en utilisant Dreamweaver, ces derniers sont placés dans un dossier situé dans l'arborescence locale du serveur. Par exemple, sur un serveur exécutant Microsoft IIS, le chemin d'accès vers votre page d'accueil peut se présenter comme suit : c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm

Il s'agit du chemin d'accès physique vers votre fichier.

En revanche, l'URL permettant d'ouvrir votre fichier n'utilise pas de chemin d'accès physique. Elle utilise le nom de serveur ou de domaine suivi d'un chemin d'accès virtuel, comme dans l'exemple suivant : www.plutoserve.com/jsmith/index.htm

Le chemin d'accès virtuel, /jsmith/index.htm, remplace le chemin d'accès physique, c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm.

Rechercher le chemin d'accès physique d'un fichier en utilisant le chemin virtuel

Si vous travaillez avec un fournisseur d'accès, il se peut que vous ne connaissiez pas le chemin d'accès physique des fichiers que vous chargez. Généralement, les fournisseurs d'accès vous fournissent un hôte FTP, parfois un répertoire hôte, ainsi qu'un nom de connexion et un mot de passe. Ils vous indiquent également une URL pour visualiser vos pages sur Internet, telle que www.plutoserve.com/jsmith/.

Si vous connaissez cette URL, vous pouvez obtenir le chemin d'accès virtuel d'un fichier : il s'agit du chemin qui suit le nom du serveur ou du domaine qui figure dans une URL. Une fois que vous connaissez le chemin d'accès virtuel, vous pouvez obtenir le chemin d'accès physique à un fichier présent sur le serveur en utilisant la méthode

MapPath

.

La méthode

MacPath

utilise le chemin d'accès virtuel comme argument et renvoie le chemin d'accès physique et le nom du fichier. Voici la syntaxe de la méthode :

Server.MapPath("

/virtualpath

")

Si le chemin virtuel d'un fichier est /jsmith/index.htm, l'expression suivante permet d'obtenir son chemin d'accès physique :

Server.MapPath("/jsmith/index.htm")

Vous pouvez utiliser la méthode

MacPath

comme suit.

1

Ouvrez une page ASP dans Dreamweaver et basculez en mode Code (Affichage > Code).

2

Saisissez l'expression suivante dans le code HTML de la page.

<%Response.Write(

stringvariable

)%>

3

Utilisez la méthode

MapPath

afin d'obtenir une valeur pour l'argument

stringvariable

.

Exemple :

<% Response.Write(Server.MapPath("/jsmith/index.htm")) %>

4

Basculez en mode Création (Affichage > Création) et activez le mode Données dynamiques (Affichage > Données dynamiques) pour afficher la page.

La page affiche le chemin physique du fichier sur le serveur d'application, par exemple : c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm

Pour plus d'informations sur la méthode

MapPath

, consultez la documentation en ligne disponible avec Microsoft IIS.

Utiliser un chemin d'accès virtuel pour établir une connexion à une base de données

Pour écrire une chaîne de connexion sans DSN dans un fichier de base de données situé sur un serveur distant, vous devez connaître le chemin d'accès physique au fichier. Par exemple, voici une chaîne de connexion sans DSN typique pour une base de données Microsoft Access :


DBQ=c:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb

DREAMWEAVER CS3


490

Si vous ne connaissez pas le chemin d'accès physique à vos fichiers sur le serveur distant, vous pouvez l'obtenir en utilisant la méthode

MapPath

dans votre chaîne de connexion.

1

Chargez le fichier de base de données le fichier de base de données sur le serveur distant et notez son chemin d'accès virtuel (par exemple, /jsmith/data/statistics.mdb).

2

Ouvrez une page ASP dans Dreamweaver, puis ouvrez le panneau Bases de données (Fenêtre > Bases de données).

3

Cliquez sur le bouton Plus (+) dans le panneau et sélectionnez Chaîne de connexion personnalisée dans le menu.

4


5

Tapez la chaîne de connexion et utilisez la méthode

MapPath

pour fournir le paramètre DBQ.

Supposons que le chemin virtuel vers votre base de données Microsoft Access soit /jsmith/data/statistics.mdb. La chaîne de connexion peut être exprimée comme suit si vous utilisez VBScript comme langage de script :

“Driver={Microsoft Access Driver (*.mdb)};DBQ=” & Server.MapPath¬

("/jsmith/data/statistics.mdb")

L'esperluette (&) est utilisée pour concaténer (combiner) deux chaînes. La première chaîne est entre guillemets et la deuxième est fournie par l'expression

Server.MapPath

. Lorsque les deux chaînes sont combinées, la chaîne suivante est créée :


DBQ=C:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb

Si vous utilisez JavaScript, l'expression est quasiment identique ; la seule différence réside dans l'utilisation d'un signe plus

(+) au lieu d'une esperluette (&) pour concaténer les deux chaînes :

“Driver={Microsoft Access Driver (*.mdb)};DBQ=” + Server.MapPath¬

("/jsmith/data/statistics.mdb")

6

Sélectionnez Utilisation du pilote sur le serveur d'évaluation, cliquez sur Tester, puis cliquez sur OK.

Remarque :


Remarque :

Si la connexion n'échoue, cliquez deux fois sur la chaîne de connexion ou contactez votre fournisseur d'accès pour vous assurer que le pilote de base de données que vous avez spécifié dans la chaîne de connexion est installé sur le serveur distant. Vérifiez également que le fournisseur d'accès dispose de la version la plus récente du pilote. Par exemple, une base de données créée dans Microsoft Access 2000 ne fonctionnera pas avec Microsoft Access Driver 3.5. Vous devez utiliser Microsoft

Access Driver, version 4.0 ou ultérieure.

7

Mettez à jour la connexion de base de données des pages dynamiques existantes (ouvrez la page dans Dreamweaver, double-cliquez sur le nom du jeu d'enregistrements dans le panneau Liaisons ou Comportements de serveur, et sélectionnez la connexion que vous venez de créer dans le menu Connexion), et utilisez la nouvelle connexion avec toutes les nouvelles pages que vous créerez.

Modifier ou supprimer une connexion à une base de données

Lorsque vous créez une connexion à une base de données, Dreamweaver enregistre les informations de connexion dans un fichier inclus, dans le sous-dossier Connections du dossier racine local du site. Vous pouvez les modifier ou les supprimer manuellement dans le fichier ou en procédant de la façon suivante :

Modifier une connexion

1


2

Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur la connexion et choisissez Modifier la connexion dans le menu.

3

Modifiez les informations de connexion, puis cliquez sur

Dreamweaver met automatiquement à jour le fichier inclus, ce qui actualise toutes les pages du site qui utilisent la connexion.

DREAMWEAVER CS3


491

Supprimer une connexion

1


2

Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur la connexion et choisissez Supprimer la connexion dans le menu.

3

Dans la boîte de dialogue qui s'affiche, confirmez que vous souhaitez supprimer la connexion.

Remarque :

Pour éviter de recevoir des erreurs dues à la suppression d'une connexion, mettez à jour tous les jeux d'enregistrements qui utilisent l'ancienne connexion en double-cliquant sur le nom du jeu d'enregistrements dans le panneau

Liaisons et en choisissant une nouvelle connexion.


PHP

A propos des connexions aux bases de données PHP

Pour le développement PHP, Dreamweaver prend uniquement en charge le système de base de données MySQL. Les autres systèmes de base de données, tels que Microsoft Access ou Oracle ne sont pas pris en charge. MySQL est un logiciel ouvert que vous pouvez télécharger gratuitement à partir d'Internet à des fins non commerciales. Pour plus d'informations, consultez le site Web MySQL, à l'adresse http://dev.mysql.com/downloads/ .

Pour réaliser les opérations présentées dans la présente section, vous devez avoir configuré une application PHP. Une base de données MySQL doit également être installée sur votre ordinateur local ou sur un système auquel vous pouvez accéder en réseau ou par FTP.

Pour les besoins du développement, téléchargez et installez la version Windows Essentials du serveur de base de données

MySQL.

Voir aussi


Etablir une connexion à une base de données

Pour établir une connexion à une base de données lors du développement d'une application PHP dans Dreamweaver, vous devez disposer d'une ou plusieurs bases de données MySQL et le serveur MySQL doit être démarré.

1

Ouvrez une page PHP dans Dreamweaver, puis ouvrez le panneau Bases de données (Fenêtre > Bases de données).

2

Cliquez sur le bouton Plus (+) dans le panneau, sélectionnez Connexion MySQL dans le menu et définissez les options de la boîte de dialogue.

•


•

Dans la zone Serveur MySQL, entrez une adresse IP ou un nom de serveur pour l'ordinateur qui héberge MySQL. Si

MySQL et PHP s'exécutent sur le même ordinateur, vous pouvez entrer localhost

.

•

Entrez votre nom d'utilisateur et mot de passe MySQL.

•

Dans la zone Base de données, entrez le nom de la base de données ou cliquez sur Sélectionner et choisissez une base de données dans la liste de bases de données MySQL, puis cliquez sur Tester.

Dreamweaver tente d'établir la connexion à la base de données. Si la connexion échoue, revérifiez le nom du serveur, le nom d'utilisateur et le mot de passe. Si la connexion n'aboutit toujours pas, vérifiez les paramètres du dossier d'évaluation utilisé par Dreamweaver pour traiter les pages dynamiques.

3

Cliquez sur OK.

DREAMWEAVER CS3


492

Remarque :

Si vous voyez le message d'erreur « Client does not support authentication protocol requested. Consider upgrading

MySQL client » (Le client ne prend pas en charge le protocole d'identification requis. Essayez de mettre à jour le client MySQL.)

d'erreur MySQL » à la page 504.




1


2


3




1


2


3


Remarque :

Pour éviter les erreurs consécutives à la suppression d'une connexion, mettez à jour chaque jeu d'enregistrements utilisant l'ancienne connexion en double-cliquant sur le nom du jeu dans le panneau Liaisons et en choisissant une nouvelle connexion dans la boîte de dialogue Jeu d'enregistrements.


ASP.

N

E

T

Connexion à une base de données ASP.

N

E

T

Avant de vous connecter à une base de données, vous devez disposer d'un fournisseur OLE DB pour celle-ci. Si vous souhaitez vous connecter à une base de données Microsoft SQL Server, vous pouvez utiliser le fournisseur de données gérées pour SQL Server qui est fourni avec le SDK de .NET Framework.

Avant d'établir une connexion à la base de données, vous devez configurer une application ASP.NET. Par ailleurs, la base de données doit être installée soit sur votre ordinateur local, soit sur un système auquel vous pouvez accéder en réseau ou par FTP.

Une fois le fournisseur de base de données installé, vous pouvez l'utiliser pour vous connecter à la base de données.

O

btention d'un fournisseur de

O

LE DB pour votre base de données

Une application ASP.NET doit établir une connexion à une base de données via un fournisseur de OLE DB. Le fournisseur joue le rôle de traducteur pour permettre l'application ASP.NET de communiquer avec la base de données.

Si vous souhaitez vous connecter à une base de données Microsoft SQL Server, vous pouvez utiliser le fournisseur de données gérées pour SQL Server qui est fourni avec le SDK .NET Framework 1.1. Ce fournisseur, très rapide et optimisé pour SQL Server, s'installe en même temps que le SDK.

DREAMWEAVER CS3


493

Si vous souhaitez vous connecter à une base de données autre que SQL Server, assurez-vous qu'un fournisseur de OLE DB pour votre base de données est installé sur l'ordinateur exécutant .NET Framework. Vous pouvez vous procurer un fournisseur de OLE DB pour Microsoft Access en téléchargeant et en installant le pack Microsoft Data Access Components

(MDAC) http://msdn.microsoft.com/data/mdac/downloads/ .

Vous pouvez télécharger les fournisseurs de OLE DB pour les bases de données Oracle sur le site Web d'Oracle, à l'adresse www.oracle.com/technology/software/tech/windows/ole_db/index.html

. Vous pouvez également acheter des fournisseurs de OLE DB auprès d'éditeurs tiers.

Voir aussi


Créer une connexion à une base de données ASP.

N

E

T

dans Dreamweaver

Après avoir obtenu un fournisseur de OLE DB pour votre base de données, utilisez-le pour créer une connexion à une base de données dans Dreamweaver.

Une autre solution consiste à utiliser la boîte de dialogue Propriétés des liaisons de données Microsoft pour vous aider à créer la connexion.

1

Ouvrez une page ASP.NET dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre données).

2

Cliquez sur le bouton Plus (+) dans le panneau, puis sélectionnez Connexion à OLE DB ou Connexion SQL Server dans le menu.

Remarque :

Sélectionnez Connexion SQL Server uniquement si vous souhaitez vous connecter à une base de données

Microsoft SQL Server.

3

Entrez un nom pour la nouvelle connexion, sans espaces ni caractères spéciaux, et entrez la chaîne de connexion.

Remarque :

Si vous avez besoin d'aide par rapport à une chaîne de connexion OLE DB, cliquez sur Modèles pour ouvrir la boîte de dialogue Modèle de chaîne de connexion, choisissez votre fournisseur de OLE DB, et cliquez sur OK.

4

Remplacez les espaces réservés dans la chaîne par les informations requises, cliquez sur Tester, puis sur OK.

Voir aussi


Créer une connexion en utilisant la boîte de dialogue Propriétés des liaisons de données

Après avoir obtenu un fournisseur de OLE DB pour votre base de données, vous pouvez créer une connexion à une base de données à l'aide de la boîte de dialogue Propriétés des liaisons de données dans Windows. Vous pouvez utiliser cette méthode uniquement si le fournisseur de OLE DB à utiliser est installé sur le même ordinateur Windows que Dreamweaver.

1

Ouvrez une page ASP.NET dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre données). Le panneau affiche les connexions définies pour ce site.

2

Cliquez sur le bouton Plus (+) dans le panneau, puis sélectionnez Connexion à OLE DB dans le menu.

3

Dans la boîte de dialogue Connexion à OLE DB, cliquez sur Générer. Les fournisseurs OLE DB actuellement installés sur l'ordinateur Windows exécutant Dreamweaver sont affichés.

4

Complétez la boîte de dialogue Propriétés des liaisons de données, puis cliquez sur OK pour insérer une chaîne de connexion.

5


DREAMWEAVER CS3


494

Voir aussi



Exemples de paramètres de connexion à

O

LE DB pour ASP.

N

E

T

Une chaîne de connexion à OLE DB combine toutes les informations dont votre application ASP.NET a besoin pour établir une connexion à une base de données. Dreamweaver insère cette chaîne dans vos scripts de page côté serveur afin que ceuxci soient ultérieurement traités par votre serveur d'application.

Dreamweaver vous fournit des modèles de chaînes pour créer des chaînes de connexion à OLE DB pour les applications

ASP.NET. Pour créer une chaîne de connexion, vous devez remplacer les espaces réservés dans le modèle par les valeurs de paramètres requises. Cette section offre des exemples de paramètres pour les bases de données Microsoft Access et SQL

Server.

Remarque :

Pour connaître les valeurs de paramètres spécifiques aux autres bases de données, consultez la documentation de votre fournisseur ou contactez votre administrateur système.

vous disposez de la structure .NET sur votre ordinateur local et vous souhaitez vous connecter à une base de c:\Inetpub\wwwroot\SkyDiveSchool\data\sdSchool.mdb. Voici les paramètres nécessaires pour créer cette chaîne de connexion :

Provider=Microsoft.Jet.OLEDB.4.0;

Data Source=c:\Inetpub\wwwroot\SkyDiveSchool\data\sdSchool.mdb; vous utilisez la structure .NET sur un serveur de développement distant et vous souhaitez vous connecter à une base de données Microsoft Access appelée mtnSchool.mdb, qui se trouve dans le dossier suivant sur le serveur : d:\users\tara\projects\MtnDrivingSchool\data\mtnSchool.mdb. Voici les paramètres nécessaires pour créer la chaîne de connexion :

Provider=Microsoft.Jet.OLEDB.4.0;

Data Source=d:\users\tara\projects\MtnDrivingSchool\data\mtnSchool.mdb; vous utilisez .NET Framework sur un serveur de développement en réseau appelé Savant et vous souhaitez vous connecter à une base de données Microsoft SQL Server appelée pubs sur le serveur. Votre nom d'utilisateur SQL Server est

« sa » et il n'existe pas de mot de passe. Si vous utilisez le fournisseur de données gérées pour SQL Server (c'est-à-dire, si vous avez choisi Connexion SQL Server dans le panneau Bases de données), voici les paramètres pour créer la chaîne de connexion :

Data Source=Savant;

Initial Catalog=pubs;

User ID=sa;

Password=;



Si vous renommez une connexion, vous devez mettre à jour tous les ensembles de données (jeux d'enregistrements) utilisant l'ancien nom de connexion en double-cliquant sur chaque ensemble dans le panneau Liaisons et en choisissant le nouveau nom de connexion dans la boîte de dialogue Ensemble de données.


1

Ouvrez une page ASP.NET dans Dreamweaver, puis ouvrez le panneau Bases de données (Fenêtre > Bases de données).

2


DREAMWEAVER CS3


495

3

Effectuez vos modifications puis cliquez sur OK. Dreamweaver met automatiquement à jour le fichier inclus, ce qui actualise toutes les pages du site qui utilisent la connexion.


1

Ouvrez une page ASP.NET dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre données).

2


3


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

A propos des connexions aux bases de données JSP

Une application JSP doit être connectée à une base de données via un pilote JDBC. Une fois installé, le pilote de base de données vous permet de vous connecter à la base de données. Vous devez indiquer certaines valeurs de paramètres pour vous connecter via votre pilote JDBC. Pour connaître les valeurs de paramètres spécifiques à votre pilote, consultez la documentation de votre fournisseur ou contactez votre administrateur système.

Vous pouvez également utiliser un pilote ODBC (et un DSN Windows) si vous employez un pilote JDBC-ODBC Bridge.

Remarque :

Votre serveur d'application JSP doit fonctionner sur un ordinateur local ou distant. Vous devez également avoir installé une base de données sur votre ordinateur local ou sur un système auquel vous pouvez accéder en réseau ou par FTP.

Voir aussi



Paramètres de connexion JDBC

Lorsque vous créez une connexion à une base de données JSP dans Dreamweaver, vous devez généralement entrer des paramètres de connexion JDBC. Les connexions JDBC se composent généralement de quatre paramètres : le pilote, le nom d'utilisateur, le mot de passe et l'URL (qui spécifie l'emplacement de la base de données). En général, les valeurs du paramètre Pilote et du paramètre URL dépendent du type de pilote.

Cet exemple montre comment définir des paramètres de connexion sous Dreamweaver en utilisant le pilote Oracle Thin

JDBC comme exemple. Pour connaître les paramètres de connexion d'autres pilotes, consultez la documentation du fournisseur du pilote.

Le pilote Oracle Thin JDBC prend en charge les bases de données Oracle. Si vous souhaitez utiliser ce pilote pour vous connecter à votre base de données Oracle, cliquez sur le bouton Plus (+) dans le panneau Bases de données et choisissez le pilote Oracle Thin Driver (Oracle) dans le menu déroulant. La boîte de dialogue Pilote Oracle Thin s'affiche.

Saisissez un nom de connexion et remplacez les espaces réservés (entre parenthèses) par des paramètres de connexion valides. Pour l'espace réservé

[nom d'hôte]

, saisissez l'adresse IP ou le nom attribué au serveur de base de données par l'administrateur système. Pour l'espace réservé

[sid]

, saisissez l'identificateur du système de base de données. Si vous avez plus d'une base de données Oracle sur le même système, utilisez le SID pour les distinguer.

DREAMWEAVER CS3


496

Par exemple, si votre serveur s'appelle Aristote, que la base de données utilise le port 1521 et que vous avez défini un SID de base de données appelé patients

sur ce serveur, entrez les valeurs de paramètres suivantes dans Dreamweaver :

O

btention d'un pilote JDBC pour votre base de données

Assurez-vous que vous disposez d'un pilote JDBC pour votre base de données avant d'essayer de créer une connexion à une base de données. Certains pilotes JDBC incluent le pilote Oracle Thin JDBC, le pilote Oracle Java et les pilotes i-net JDBC pour Microsoft SQL Server.

Les fournisseurs de systèmes de bases de données tels qu'Oracle incluent souvent des pilotes avec leurs systèmes. Vous pouvez également acheter des pilotes chez des fournisseurs tiers. Par exemple, vous pouvez obtenir un pilote JDBC pour

Microsoft SQL Server à partir du site i-net software à l'adresse www.inetsoftware.de/products/jdbc/ .

Sun fournit également une base de données de recherche des pilotes JDBC et de leurs fournisseurs sur son site Web à l'adresse http://developers.sun.com/product/jdbc/drivers .

Voir aussi

Créer une connexion à une base de données JSP

Après avoir installé un pilote JDBC adapté pour votre base de données sur l'ordinateur exécutant votre serveur d'application, vous pouvez créer une connexion à une base de données dans Dreamweaver.

1

Ouvrez une page JSP dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre > Bases de données).

2

Cliquez sur le bouton Plus (+) et choisissez votre pilote dans le menu. (Si votre pilote ne figure pas dans la liste, choisissez

Connexion JDBC personnalisée.)

3

Saisissez les paramètres de connexion dans la boîte de dialogue.

4

Indiquez l'emplacement du pilote JDBC que vous souhaitez utiliser.

•

Si votre pilote JDBC est installé sur le même ordinateur que Dreamweaver, sélectionnez Utilisation du pilote sur cette machine.

•

Si votre pilote JDBC n'est pas installé sur le même ordinateur que Dreamweaver, sélectionnez Utilisation du pilote sur le serveur d'évaluation.

Remarque :


5


Remarque :


6

Cliquez sur Tester, puis sur OK.

Dreamweaver tente d'établir la connexion à la base de données. Si la connexion échoue, vérifiez les paramètres de connexion. Si la connexion n'aboutit toujours pas, vérifiez les paramètres du dossier d'évaluation utilisé par Dreamweaver pour traiter les pages dynamiques.

DREAMWEAVER CS3


497

Voir aussi


« Obtention d'un pilote JDBC pour votre base de données » à la page 496


Connexion via un pilote

O

DBC

Bien que les applications JSP communiquent en principe avec les bases de données via des pilotes JDBC, elles peuvent communiquer via les pilotes ODBC si vous disposez d'un pilote de pont JDBC-ODBC. Le pilote de pont joue le rôle de traducteur entre votre application JSP, qui utilise la connectivité JDBC, et votre pilote ODBC, qui utilise la connectivité

ODBC. Ce canal de communication permet à votre application JSP de communiquer avec la base de données.

Ce type de connexion offre deux avantages aux utilisateurs de Windows. Tout d'abord, vous pouvez utiliser les pilotes

ODBC gratuits de Microsoft. Ensuite, vous pouvez utiliser un DSN pour simplifier le processus de création de la connexion.

• Votre serveur d'application JSP doit fonctionner sur un ordinateur exécutant Windows.

• Un pilote ODBC pour votre base de données doit être installé sur l'ordinateur exécutant Windows qui héberge le serveur d'application.

• Un pilote de pont JDBC-ODBC doit être installé sur l'ordinateur Windows qui héberge le serveur d'application.

Si ces conditions sont respectées, vous pouvez établir une connexion via un pilote ODBC.

Vérification du pilote

O

DBC

Assurez-vous qu'un pilote ODBC pour votre base de données est installé sur l'ordinateur exécutant Windows qui héberge le serveur d'application JSP. Si aucun pilote adapté n'est installé, vous pouvez télécharger et installer Microsoft Data Access

Components (MDAC) 2.5 et 2.7 sur l'ordinateur exécutant le serveur d'application JSP. Vous pouvez télécharger le pack

MDAC 2.7 gratuitement à partir du site Web de Microsoft à l'adresse http://msdn.microsoft.com/data/mdac/downloads/ .

Ces logiciels contiennent les derniers pilotes ODBC de Microsoft.

Remarque :

Vous devez installer le pack MDAC 2.7.

Installation du pilote JDBC-

O

DBC Bridge de Sun

Pour vous connecter via un pilote ODBC, vous devez installer le pilote JDBC-ODBC Bridge de Sun sur l'ordinateur

Windows exécutant le serveur d'application JSP. Ce pilote est fourni avec Java 2 SDK de Sun, Standard Edition, pour

Windows. jdk1.2, jdk1.3 ou j2sdk1.4.

Si vous ne disposez pas du SDK, vous pouvez le télécharger et l'installer à partir du site Web Sun à l'adresse http://java.sun.com/j2se/ ; le pilote sera également installé.

Bien qu'il soit parfaitement adapté au développement avec des systèmes de bases de données bas de gamme tels que

Microsoft Access, le pilote JDBC-ODBC Bridge de Sun n'est pas conçu pour la production. Par exemple, il ne permet la connexion à la base de données que d'une seule page JSP à la fois (en d'autres termes, il ne prend pas en charge l'utilisation simultanée par plusieurs threads). Pour plus d'informations sur les limites du pilote, consultez la TechNote 17392 du centre de support Adobe à l'adresse www.adobe.com/go/17392_fr .

Après avoir installé le pilote de pont, vous pouvez créer la connexion à une base de données.

DREAMWEAVER CS3


498

Créer une connexion

O

DBC

Avant de vous connecter via un pilote ODBC, assurez-vous que le pilote ODBC approprié et le pilote JDBC-ODBC Bridge de Sun sont installés sur l'ordinateur Windows exécutant le serveur d'application JSP.

1

Définissez un DSN sur le système Windows hébergeant votre serveur d'application.


•

Utilisateurs de Windows 2000, voir l'article 300596 de la Base de connaissances de Microsoft à l'adresse http://support.microsoft.com/default.aspx?scid=kb;fr-fr;300596

•

Utilisateurs de Windows XP, voir l'article 305599 de la Base de connaissances de Microsoft à l'adresse http://support.microsoft.com/default.aspx?scid=kb;fr-fr;305599

2

Ouvrez une page JSP dans Dreamweaver, puis ouvrez le panneau Bases de données (Fenêtre > Bases de données).

3

Cliquez sur le bouton Plus (+) dans le panneau et choisissez Pilote JDBC-ODBC Sun (Base de données ODBC) dans le menu.

4


5

Remplacez l'espace réservé

[odbc dsn]

dans le champ URL par le DSN que vous avez défini à l'étape 1. Dans le champ

URL, vous devez pouvoir lire ce qui suit : jdbc:odbc:

myDSN

6

Indiquez le nom d'utilisateur et le mot de passe pour accéder à la base de données.

Si vous n'avez pas besoin de nom d'utilisateur ou de mot de passe, laissez les champs vides. Par exemple, si votre DSN a pour nom Acme et que vous n'avez pas besoin d'un nom d'utilisateur ou d'un mot de passe pour accéder à la base de données, saisissez les valeurs de paramètres suivantes :

Pilote : sun.jdbc.odbc.JdbcOdbcDriver

URL : jdbc:odbc:Acme

7

Indiquez l'emplacement du pilote JDBC-ODBC Bridge.

•

Si le pilote est installé sur le même ordinateur que Dreamweaver, sélectionnez Utilisation du pilote sur cette machine.

•

Si le pilote n'est pas installé sur le même ordinateur que Dreamweaver, sélectionnez Utilisation du pilote sur le serveur d'évaluation.

Remarque :


8

Cliquez sur Tester, puis sur OK.

Dreamweaver tente d'établir la connexion à la base de données. Si la connexion échoue, vérifiez le DSN et les autres paramètres de connexion. Si la connexion n'aboutit toujours pas, vérifiez les paramètres du dossier d'évaluation utilisé par

Dreamweaver pour traiter les pages dynamiques.

Voir aussi






1

Ouvrez une page JSP dans Dreamweaver, puis ouvrez le panneau Bases de données (Fenêtre > Bases de données).

2


DREAMWEAVER CS3


499

3



Si vous renommez une connexion, mettez à jour tous les jeux d'enregistrements utilisant l'ancien nom de connexion en double-cliquant sur chaque jeu dans le panneau Liaisons et en choisissant le nouveau nom de connexion dans la boîte de dialogue Jeu d'enregistrements.


1

Ouvrez une page JSP dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre > Bases de données).

2


3


Remarque :

Pour éviter les erreurs consécutives à la suppression d'une connexion, mettez à jour chaque jeu d'enregistrements utilisant l'ancienne connexion en double-cliquant sur le nom du jeu dans le panneau Liaisons et en choisissant une nouvelle connexion dans la boîte de dialogue Jeu d'enregistrements.

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

Résolution des problèmes d'autorisation

Les problèmes d'autorisation sont la cause la plus fréquente des erreurs d'accès aux dossiers ou aux fichiers. Si votre base de données est installée sur un ordinateur équipé de Windows 2000 ou Windows XP et si vous recevez des messages d'erreur lorsque vous tentez d'afficher une page dynamique dans un navigateur Web ou en mode Live Data, l'erreur peut provenir d'un problème d'autorisation.

Le compte Windows qui tente d'accéder à la base de données ne dispose pas des droits suffisants. Le compte peut être le compte anonyme Windows (par défaut, IUSR_ computername ) ou un compte utilisateur spécifique si la page a été sécurisée pour un accès authentifié.

Vous devez modifier les autorisations afin d'attribuer les droits d'accès appropriés au compte IUSR_ computername pour que le serveur Web puisse accéder au fichier de base de données. En outre, le dossier contenant le fichier de base de données doit également disposer de certaines autorisations pour écrire dans cette base de données.

Si la page doit être accédée de manière anonyme, attribuez le contrôle complet au compte IUSR_ computername pour le dossier et le fichier de base de données, comme indiqué dans la procédure ci-dessous.

En outre, si le chemin d'accès à la base de données est référencé au moyen de la convention UNC (\\Serveur\Share), assurezvous que les Autorisations de partage attribuent les droits d'accès complets au compte IUSR_ computername . Cette étape s'applique même si le partage est situé au niveau du serveur Web local.

Si vous copiez la base de données depuis un autre emplacement, il est possible qu'elle n'hérite pas des autorisations d'accès de son dossier de destination et que vous deviez modifier les autorisations d'accès pour la base de données.

Vérifier ou modifier les autorisations de la base de données (WindowsXP)

1

Assurez-vous que vous avez des privilèges d'administrateur sur cet ordinateur.

2

Dans l'Explorateur Windows, localisez le fichier de la base de données ou le dossier contenant la base de données, cliquez sur ce fichier ou ce dossier avec le bouton droit de la souris, puis sélectionnez Propriétés.

3

Cliquez sur l'onglet Sécurité.

Remarque :

Cette étape s'applique uniquement si vous utilisez un système de fichiers NTFS. Si vous disposez d'un système de fichiers FAT, la boîte de dialogue n'a pas d'onglet Sécurité.

DREAMWEAVER CS3


500

4

Si le compte IUSR_ computername n'apparaît pas dans la liste des noms d'utilisateur ou de groupe, cliquez sur le bouton

Ajouter pour le rajouter.

5

Dans la boîte de dialogue de sélection des utilisateurs ou des groupes, cliquez sur Avancé.

La boîte de dialogue vous propose alors davantage d'options.

6

Cliquez sur le bouton des emplacements et sélectionnez le nom de l'ordinateur.

7

Cliquez sur le bouton de recherche pour afficher une liste des noms de compte associés à l'ordinateur.

8

Sélectionnez le compte IUSR_ computername et cliquez sur OK, puis cliquez une nouvelle fois sur OK pour refermer la boîte de dialogue.

9

Pour attribuer les droits d'accès complets au compte IUSR, cochez la case Contrôle total et cliquez sur OK.

Vérifier ou modifier les autorisations de la base de données (Windows 2000)

1

Assurez-vous que vous avez des privilèges d'administrateur sur cet ordinateur.

2

Dans l'Explorateur Windows, localisez le fichier de la base de données ou le dossier contenant la base de données, cliquez sur ce fichier ou ce dossier avec le bouton droit de la souris, puis sélectionnez Propriétés.

3

Cliquez sur l'onglet Sécurité.

Remarque :

Cette étape s'applique uniquement si vous utilisez un système de fichiers NTFS. Si vous disposez d'un système de fichiers FAT, la boîte de dialogue n'a pas d'onglet Sécurité.

4

Si le compte IUSR_ computername n'est pas répertorié parmi les comptes Windows dans la boîte de dialogue

Autorisations - Fichier, cliquez sur le bouton Ajouter pour l'ajouter.

5

Dans la boîte de dialogue de sélection des utilisateurs, ordinateurs ou groupes, choisissez le nom de l'ordinateur à partir du menu de recherche pour afficher une liste des noms de compte associés à l'ordinateur.

6

Sélectionnez le compte IUSR_ computername et cliquez sur Ajouter.

7

Pour attribuer les droits d'accès complets au compte IUSR, sélectionnez Contrôle total dans le menu Type d'accès, puis cliquez sur OK.

Pour une sécurité accrue, les autorisations peuvent être définies de façon à ce que le droit d'accès en lecture soit désactivé pour le dossier Web contenant la base de données. Il ne sera pas permis de parcourir ce dossier, mais les pages Web continueront d'accéder à la base de données.

Pour plus d'informations sur les autorisations du compte IUSR et du serveur Web, consultez les notes techniques du centre de support technique Adobe :

• Description de l'authentification anonyme et du compte IUSR à l'adresse www.adobe.com/go/authentication_fr

• Définition des autorisations d'un serveur Web IIS à l'adresse www.adobe.com/go/server_permissions_fr

Résolution des messages d'erreur Microsoft

Ces messages d'erreur Microsoft peuvent se produire lorsque vous demandez une page dynamique au serveur si vous utilisez Internet Information Server (IIS) avec un système de base de données Microsoft tel que SQL Server ou Access.

Remarque :

Adobe n'offre pas de support technique pour les logiciels tiers tels que Microsoft Windows et IIS. Si cette section ne vous permet pas de résoudre votre problème, contactez le support technique de Microsoft ou visitez le site Web de support technique Microsoft à l'adresse http://support.microsoft.com/ .

80004005 au niveau des composants Active Server Pages et Microsoft Data Access (Q306518)

à l'adresse http://support.microsoft.com/default.aspx?scid=kb;fr-fr;Q306518 .

» sur le site Web de Microsoft

DREAMWEAVER CS3


501

[Reference]80004005 - Data source name not found and no default driver specified (Le nom de la source de données est introuvable et aucun pilote par défaut n'est spécifié)

Cette erreur survient lorsque vous essayez de visualiser une page dynamique dans un navigateur Web ou en mode Live

Data. Le message d'erreur varie en fonction de votre base de données et de votre serveur Web. D'autres variantes de ce message d'erreur incluent :

•

80004005—Driver's SQLSetConnectAttr failed (Le paramètre SQLSetConnectAttr du pilote a échoué)

•

80004005 - General error Unable to open registry key 'DriverId' (Erreur générale. Impossible d'ouvrir la clé du registre

DriverId)

Les causes et les solutions possibles sont les suivantes :

•

La page ne parvient pas à trouver le DSN. Assurez-vous qu'un DSN a été créé sur le serveur Web et sur l'ordinateur local.

•

Le DSN peut avoir été défini en tant que DSN utilisateur, et non en tant que DSN système. Supprimez le DSN utilisateur et créez un DSN système pour le remplacer.

Remarque :

Si vous ne supprimez pas le DSN utilisateur, les noms DSN en double engendrent de nouvelles erreurs ODBC.

Si vous utilisez Microsoft Access, le fichier de base de données (.mdb) peut être verrouillé Ce verrouillage peut être la conséquence d'un DSN avec un nom différent accédant à la base de données. Dans l'Explorateur Windows, recherchez le fichier de verrouillage (.ldb) dans le dossier contenant le fichier de base de données (.mdb) et supprimez-le. Si un autre DSN pointe vers le même fichier de base de données, vous pouvez supprimer ce DSN pour empêcher tout risque d'erreur à l'avenir. Redémarrez l'ordinateur après avoir apporté des modifications.

[Reference]80004005—Couldn’t use ‘(unknown)’; file already in use (Impossible d'utiliser "(inconnu)" cours d'utilisation)

; fichier en

Cette erreur survient lorsque vous utilisez une base de données Microsoft Access et essayez de visualiser une page dynamique dans un navigateur Web ou en mode Live Data. Une variante de ce message d'erreur est « 80004005 - Microsoft

(inconnu)).

Ceci est probablement dû à un problème d'autorisations. Voici quelques causes et solutions spécifiques :

•

Le compte utilisé par Internet Information Server (généralement IUSR) peut ne pas disposer des droit d'accès Windows adéquats pour une base de données basée sur fichier ou pour le dossier contenant le fichier. Vérifiez les droits d'accès du

•

Il est possible que vous ne soyez pas autorisé à créer ou à supprimer des fichiers temporaires. Vérifiez les autorisations attribuées au fichier et au dossier. Assurez-vous que vous êtes autorisé à créer ou à supprimer des fichiers temporaires.

Les fichiers temporaires sont généralement créés dans le même dossier que la base de données, mais ils peuvent

également être créés dans d'autres dossiers tels que /Winnt.

•

Sous Windows 2000, il peut être nécessaire de modifier le délai d'expiration pour le DSN de la base de données Access.

Pour modifier ce délai, choisissez Démarrer > Paramètres > Panneau de configuration > Outils d'administration >

Sources de données (ODBC). Cliquez sur l'onglet Système, sélectionnez le DSN approprié puis cliquez sur le bouton

Configurer. Cliquez sur le bouton Options et fixez la valeur de délai d'expiration de la page à

5000

.

Si les problèmes persistent, consultez les points suivants dans la base de connaissances Microsoft :

•

PRB d'utilisation) à l'adresse http://support.microsoft.com/default.aspx?scid=kb;fr-fr;Q174943 .

•

PRB http://support.microsoft.com/default.aspx?scid=kb;fr-fr;Q253604 .

•

PRB Impossible d'ouvrir le fichier inconnu » lors de l'utilisation d'Access à l'adresse http://support.microsoft.com/default.aspx?scid=kb;fr-fr;Q166029 .

[Reference]80004005—Logon Failed() (Echec de connexion)

Cette erreur survient lorsque vous utilisez Microsoft SQL Server et essayez de visualiser une page dynamique dans un navigateur Web ou en mode Live Data.

DREAMWEAVER CS3


502

Cette erreur est générée par SQL Server s'il refuse ou ne reconnaît pas le compte ou le mot de passe de connexion soumis

(si vous utilisez une sécurité standard), ou si un compte Windows n'est pas associé à un compte SQL (si vous utilisez une sécurité intégrée).

Les solutions possibles sont les suivantes :

•

Si vous utilisez une sécurité standard, le nom de compte et le mot de passe peuvent être incorrects. Essayez le compte et le mot de passe de l'administrateur système (ID utilisateur sa » et aucun mot de passe), qui doivent être définis dans la ligne de chaîne de connexion. Les DSN ne conservent pas les noms d'utilisateurs et les mots de passe.

•

Si vous utilisez une sécurité intégrée, vérifiez le compte Windows appelant la page et localisez son compte SQL associé

(s'il existe).

•

SQL Server n'autorise pas le trait de soulignement dans les noms de compte SQL. Si un utilisateur connecte manuellement le compte Windows IUSR_nommachine à un compte SQL portant le même nom, il s'ensuivra automatiquement un échec. Connectez un compte quelconque qui utilise un trait de soulignement à un nom de compte

SQL qui n'en comporte aucun.

[Reference]80004005—

O peration must use an updateable query (L'opération doit utiliser une requête pouvant être mise à jour)

Cette erreur survient lorsqu'un événement met à jour un jeu d'enregistrements ou y insère des données.


•

Les autorisations définies pour le dossier contenant la base de données sont trop restrictives. Les droits d'accès IUSR doivent être définis sur lecture/écriture.

•

Le fichier de base de données lui-même ne dispose pas de droits d'accès en lecture/écriture complets.

•

La base de données est peut-être hors du répertoire Inetpub/wwwroot. Bien que vous puissiez visualiser et parcourir les données, vous risquez de ne pas pouvoir les mettre à jour, à moins que la base de données ne soit placée dans le répertoire wwwroot.

•

Le jeu d'enregistrements repose sur une requête ne pouvant pas être mise à jour. Les relations sont de bons exemples de requêtes ne pouvant être mises à jour dans une base de données. Restructurez vos requêtes de façon à ce qu'elles puissent

être mises à jour.

Pour plus d'informations sur cette erreur, voir « : Erreur ASP 'La requête ne peut pas être mise à jour' lorsque vous http://support.microsoft.com/default.aspx?scid=kb;fr-fr;Q174640 .

[Reference]80040e07—Data type mismatch in criteria expression (

T ypes de données non concordants dans l'expression des critères)

Cette erreur survient lorsque le serveur essaie de traiter une page contenant un comportement de serveur Insérer l'enregistrement ou Mettre à jour l'enregistrement et que le comportement du serveur tente de définir la valeur d'une colonne Date/Heure d'une base de données Microsoft Access sur une chaîne vide ("").

Microsoft Access utilise une saisie des caractères rigoureuse ; le logiciel impose un jeu de règles strictes pour les valeurs de certaines colonnes. La valeur d'une chaîne vide d'une requête SQL ne peut pas être stockée dans une colonne Date/Heure

Access. Actuellement, la seule solution connue consiste à éviter d'insérer ou de mettre à jour les colonnes Date/Heure

Access avec des chaînes vides ("") ou avec toute autre valeur ne correspondant pas à la gamme de valeurs spécifiées pour le type de données.

[Reference]80040e10—

T oo few parameters (

N ombre de paramètres insuffisant)

Cette erreur survient lorsqu'une colonne spécifiée dans votre requête SQL n'existe pas dans la table de la base de données.

Vérifiez les noms des colonnes de votre base de données par rapport à votre requête SQL. Cette erreur est souvent due à une typographie erronée.

DREAMWEAVER CS3


503

[Reference]80040e10—C

O

U

NT

field incorrect (Champ C

O

U

NT

incorrect)

Cette erreur survient lorsque vous prévisualisez une page contenant un comportement de serveur Insérer l'enregistrement dans un navigateur Web et que vous essayez de l'utiliser pour insérer un enregistrement dans une base de données Microsoft

Access.

Vous tentez peut-être d'insérer un enregistrement dans un champ de base de données qui comporte un point d'interrogation(?) dans son nom de champ. Le point d'interrogation est un caractère spécial pour certains moteurs de bases de données, notamment Microsoft Access, et il ne doit pas être utilisé pour les noms de tables de bases de données ou de champs.

Ouvrez votre système de base de données, supprimez le point d'interrogation (?) des noms de champs et mettez à jour les comportements de serveur sur la page qui se rapporte à ce champ.

[Reference]80040e14—Syntax error in I

N

SER

T

I

NTO

statement (Erreur de syntaxe dans l'instruction I

N

SER

T

I

NTO

)

Cette erreur survient lorsque le serveur tente de traiter une page contenant un comportement de serveur Insérer l'enregistrement.

Cette erreur résulte généralement d'un ou de plusieurs problèmes, cités ci-dessous, relatifs au nom d'un champ, d'un objet ou d'une variable de la base de données :

•

Utilisation d'un mot réservé en tant que nom. La majorité des bases de données disposent d'un jeu de mots réservés. Par

•

Utilisation de caractères spéciaux dans le nom, tels que ceux mentionnés ci-dessous :

. / * : ! # & - ?

•

Utilisation d'un espace dans le nom.

L'erreur peut également survenir lorsqu'un masque d'entrée est défini pour un objet de la base de données et que les données insérées ne sont pas conformes au masque.

date », « name » « where » et « level » lorsque vous spécifiez des noms de colonnes dans votre base de données. Eliminez également les espaces et les caractères spéciaux.

Consultez les pages Web suivantes pour des listes détaillées de mots réservés dans les systèmes de bases de données courants.

•

Microsoft Access à l'adresse http://support.microsoft.com/default.aspx?scid=kb;fr-fr;Q209187

•

Microsoft SQL Server à l'adresse http://msdn.microsoft.com/library/default.asp?url=/library/fr-fr/tsqlref/ts_rarz_9oj7.asp

•

MySQL à l'adresse http://dev.mysql.com/doc/mysql/en/reserved-words.html

[Reference]80040e21—

O

DBC error on Insert or Update (Erreur

O

BDC au moment d'insérer ou de mettre à jour)

Cette erreur survient lorsque le serveur tente de traiter une page contenant un comportement de serveur Mettre à jour l'enregistrement ou Insérer l'enregistrement. La base de données ne peut pas gérer la mise à jour ou l'insertion que le comportement de serveur tente de réaliser.


•

Le comportement de serveur tente de mettre à jour un champ de numérotation automatique d'une table de base de données ou d'insérer un enregistrement dans un champ de numérotation automatique. Les champs de numérotation automatique sont automatiquement complétés par le système de la base de données ; toute tentative faite pour les remplir manuellement est vouée à l'échec.

•

Le type de données que le comportement de serveur met à jour ou insère ne correspond pas à celui du champ de la base de données : insertion d'une date dans un champ booléen (oui/non), insertion d'une chaîne dans un champ numérique ou insertion d'une chaîne à la mise en forme incorrecte dans un champ Date/Heure.

DREAMWEAVER CS3


504

[Reference]800a0bcd—Either B

O

F or E

O

F is true (B

O

F ou E

O

F est égal à

T rue)

Cette erreur survient lorsque vous essayez de visualiser une page dynamique dans un navigateur Web ou en mode Live Data.

Ce problème survient lorsque la page tente d'afficher des données à partir d'un jeu d'enregistrements vide. Pour le résoudre, appliquez le comportement de serveur Afficher la région au contenu dynamique à afficher sur la page, de la manière suivante :

1

Sélectionnez le contenu dynamique de la page.

2

Dans le panneau Comportements de serveur, cliquez sur le bouton Plus (+) et choisissez Afficher la région > Afficher la région si le jeu d'enregistrements n'est pas vide.

3

Sélectionnez le jeu d'enregistrements dans lequel se trouve le contenu dynamique et cliquez sur OK.

4

Répétez les étapes 1 à 3 pour chaque élément de contenu dynamique sur la page.

Résolution des messages d'erreur MySQL

« Client does not support authentication protocol requested. Consider upgrading MySQL client » (Ce client ne prend pas en charge le protocole d'authentification demandé. Il peut être nécessaire de mettre à niveau le client MySQL).

Il peut être nécessaire de revenir à une version précédente de MySQL ou d'installer PHP 5 et copier certaines bibliothèques

de liaison dynamique (DLL). Pour obtenir des instructions, voir « Installation d'un serveur d'application PHP » à la page 477.

Voir également les notes techniques suivantes :

•

TechNote c45f8a29 à l'adresse www.adobe.com/go/c45f8a29_fr .

•

TechNote 16515 à l'adresse www.adobe.com/go/16515_fr .

Suppression de scripts de connexion

Utilisation de la commande Supprimer les scripts de connexion

Vous pouvez utiliser la commande Supprimer les scripts de connexion pour supprimer les scripts que Dreamweaver place dans un dossier distant pour accéder aux bases de données. Ces scripts ne sont nécessaires que lors de la phase de création dans Dreamweaver.

Lorsque vous sélectionnez l'option Utilisation du pilote sur le serveur d'évaluation ou Utilisation de la DSN sur le serveur d'évaluation dans la boîte de dialogue de connexion à une base de données, Dreamweaver charge un script MMHTTPDB sur le serveur d'évaluation. Ceci permet à Dreamweaver de manipuler le pilote de base de données distant avec le protocole

HTTP, ce qui permet en retour à Dreamweaver d'obtenir, dans la base de données, les informations nécessaires à la création de votre site. Toutefois, ce fichier ne permet pas de voir les noms des sources de données (DSN) définis sur l'ordinateur. Si les DSN et les bases de données ne sont pas protégés par un mot de passe, le script permet à une personne malveillante d'envoyer des commandes SQL à la base de données.

Les fichiers de scripts MMHTTPDB se trouvent dans le dossier _mmServerScripts, qui est lui-même situé à la racine du site Web.

Remarque :

Le navigateur de fichiers de Dreamweaver (le panneau Fichiers) ne montre pas le dossier _mmServerScripts.

Celui-ci n’est visible qu’à partir d’un client FTP tiers ou du navigateur de fichiers.

Avec certaines configurations, ces scripts sont inutiles. Comme ces scripts ne sont pas utilisés lors du transfert des pages

Web aux visiteurs du site, il est conseillé de ne pas les placer sur un serveur de production.

Si vous avez transféré le fichier de scripts MMHTTPDB sur un serveur de production, il est conseillé de le supprimer. La commande Supprimer les scripts de connexion efface automatiquement ces fichiers.


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

Vous pouvez afficher des données dans une page Web en utilisant un certain nombre de sources. Ces sources peuvent être notamment des bases de données, des paramètres de formulaire et d'URL et des variables de session. Vous pouvez utiliser ces sources de données de différentes façons pour collecter et afficher différents types de données.

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

Stockage de contenu dans des bases de données

Les applications Web et les sites Web dynamiques requièrent une source de contenu à partir de laquelle des données peuvent être récupérées. D'une manière générale, les données correspondent à des informations textuelles ou numériques renvoyées dans une page Web et affichées pour l'utilisateur sous une certaine forme. Vous pouvez utiliser Adobe®

Dreamweaver® CS3 pour créer des formulaires Web permettant d'insérer, de mettre à jour ou de supprimer des données dans une base de données.

L'utilisation d'une base de données pour stocker un contenu vous permet de séparer l'aspect conceptuel d'un site Web du contenu à afficher aux utilisateurs du site. Plutôt que de créer des fichiers HTML distincts pour chacune des pages, il vous suffit de créer une page (ou un modèle) pour les différents types d'informations que vous souhaitez présenter. Vous pouvez ensuite télécharger du contenu dans une base de données pour qu'ensuite le site Web puisse extraire ce contenu en réponse

à une demande d'un utilisateur. Vous pouvez également mettre à jour des informations dans une source unique, puis répercuter cette modification à travers le site Web sans avoir à modifier chaque page manuellement.

Les bases de données se présentent sous une multitude de formes, selon la quantité et la complexité des données qu'elles doivent stocker. Sur les ordinateurs Windows, Microsoft Access est le logiciel de base de données le plus répandu. Si vous n'êtes pas familiarisé avec les bases de données, sachez que Microsoft Access contient une interface conviviale pour travailler avec des tables de base de données. Vous pouvez utiliser Microsoft Access comme source de données pour la plupart des applications de site Web, mais notez que la taille maximale des fichiers y est limitée à 2 Go et l'accès simultané

à 255 utilisateurs. Access constitue donc une solution raisonnable pour le développement de sites Web et les groupes de travail d'entreprise. Toutefois, si vous pensez qu'une large communauté d'utilisateurs accédera à votre site Web, utilisez une base de données conçue pour prendre en charge l'ensemble des utilisateurs potentiels de votre site.

Lorsque les sites Web nécessitent une plus grande souplesse en termes de modélisation des données et doivent prendre en charge un très grand nombre d'utilisateurs simultanés, les concepteurs utilisent généralement des bases de données relationnelles serveur (communément désignées sous le nom de RDBMS), telles que MySQL, Microsoft SQL Server et

Oracle.

Accès aux données stockées dans une base de données

Les pages Web ne peuvent pas accéder directement aux données stockées dans une base de données. Au lieu de cela, elles interagissent avec un jeu d'enregistrements . Un jeu d'enregistrements correspond à un sous-ensemble d'informations (ou enregistrements) extraits de la base de données à l'aide d'une requête de base de données. Une requête est une instruction de recherche conçue pour trouver et extraire des informations précises stockées dans une base de données. Dreamweaver utilise le langage SQL (Structured Query Language) pour générer des requêtes. Bien que vous n'ayez pas à apprendre le langage SQL pour pouvoir créer des requêtes simples à l'aide de Dreamweaver, il peut être utile d'avoir des connaissances de base de ce langage pour créer des requêtes plus élaborées et bénéficier ainsi d'une plus grande souplesse dans la conception de pages dynamiques.

Une requête SQL peut générer un jeu d'enregistrements n'incluant que certaines colonnes, certains enregistrements ou encore une combinaison des deux. Un jeu d'enregistrements peut également inclure tous les enregistrements et toutes les colonnes d'une table de base de données. Toutefois, comme les applications n'ont généralement pas besoin de toutes les

505

DREAMWEAVER CS3


506

informations stockées dans une base de données, il est fortement conseillé d'essayer de limiter au maximum la taille des jeux d'enregistrements. De plus, comme le serveur Web stocke temporairement en mémoire le jeu d'enregistrements, l'utilisation d'un jeu de taille limitée économise de la mémoire et peut de ce fait améliorer les performances du serveur.

Collecte de données envoyées par les utilisateurs

A propos de la collecte de données

Vous pouvez vous servir des pages Web pour recueillir des informations provenant des utilisateurs, les stocker dans la mémoire du serveur et les utiliser pour générer des réponses dynamiques basées sur les données entrées par les utilisateurs.

Les outils les plus fréquemment utilisés pour recueillir des informations utilisateur sont les formulaires HTML et les liens hypertexte.

Les formulaires

T

ML

permettent de recueillir des informations provenant des utilisateurs et de les stocker dans la mémoire du serveur. Ils peuvent transmettre les informations sous forme de paramètres de formulaire ou de paramètres d'URL.

Les liens hypertextes

permettent de recueillir des informations provenant des utilisateurs et de les stocker dans la mémoire du serveur. Pour ce faire, vous devez spécifier une ou plusieurs valeurs à renvoyer lorsqu'un utilisateur clique sur un lien

(tel qu'une préférence) en annexant cette valeur à l'URL spécifiée dans la balise d'ancrage. Lorsqu'un utilisateur clique sur le lien concerné, le navigateur envoie alors l'URL et la valeur annexée au serveur.

Paramètres de formulaire H

T

ML

Les paramètres de formulaire sont envoyés au serveur au moyen d'un formulaire HTML qui utilise la méthode

POST

ou

GET

.

Si la méthode utilisée est

POST

, les paramètres sont envoyés dans le corps du message. La méthode

GET

, en revanche, annexe les paramètres à l'URL demandée.

Vous pouvez utiliser Dreamweaver pour concevoir rapidement des formulaires HTML qui envoient les paramètres de formulaire au serveur. Vous devez connaître la méthode que vous utilisez pour transmettre les informations du navigateur au serveur.

Les paramètres de formulaire prennent le nom des objets de formulaire correspondants. Ainsi, si un formulaire contient un champ de texte portant le nom txtLastName

, le paramètre de formulaire suivant est alors transmis au serveur lorsqu'un utilisateur clique sur le bouton Envoyer : txtLastName=

enteredvalue

Si une application Web s'attend à recevoir une valeur de paramètre précise (lorsqu'elle exécute une action en fonction d'une option parmi plusieurs options possibles, par exemple), utilisez un objet de formulaire de type bouton radio, case à cocher ou liste/menu afin de contrôler les valeurs susceptibles d'être envoyées par l'utilisateur. Cela évite que les utilisateurs ne commettent des erreurs lors de la saisie d'informations et empêche de ce fait toute erreur au niveau de l'application.

DREAMWEAVER CS3


507

Chaque choix du menu correspond à une valeur figée dans le code qui est envoyée au serveur en tant que paramètre de formulaire. La boîte de dialogue Valeurs de la liste présentée dans l'exemple suivant associe chaque élément de la liste à une

Une fois un paramètre de formulaire créé, Dreamweaver peut en récupérer la valeur et l'utiliser dans une application Web.

Après avoir défini un paramètre de formulaire dans Dreamweaver, vous pouvez en insérer la valeur dans une page.

Voir aussi

« Création de formulaires » à la page 572

« Ajout de contenu dynamique dans les pages » à la page 537

« Accès aux données stockées dans une base de données » à la page 505

Paramètres d'URL

Utilisez les paramètres d'URL pour transmettre du navigateur au serveur les informations fournies par les utilisateurs.

Lorsqu'il reçoit une demande et que des paramètres sont annexés à l'URL de la demande, le serveur met les paramètres à la disposition de la page demandée avant de fournir la page au navigateur.

Un paramètre d'URL est une paire nom-valeur (name-value) annexée à une URL. Le paramètre commence par un point d'interrogation (?) et prend la forme nom=valeur

. S'il existe plusieurs paramètres d'URL, ils sont séparés par une esperluette

(&). L'exemple ci-dessous décrit un paramètre d'URL doté de deux paires nom-valeur : http://server/path/document?

name1

=

value1

&

name2

=

value2

Dans cet exemple de processus, l'application est une boutique en ligne. Comme les développeurs souhaitent atteindre un public aussi large que possible, le site a été conçu pour prendre en charge plusieurs devises. Lorsque des utilisateurs se connectent au site, ils peuvent donc sélectionner la devise dans laquelle afficher les tarifs des articles disponibles.

1

Le navigateur demande la page report.cfm au serveur. Cette requête inclut le paramètre d'URL Currency="euro". La variable Currency="euro" indique que tous les montants récupérés doivent être affichés en euros.

2

Le serveur stocke temporairement en mémoire le paramètre d'URL.

3

La page report.cfm utilise le paramètre pour obtenir le tarif des articles en euros. Ces montants peuvent soit être stockés dans une table de base de données contenant des devises différentes, soit être convertis depuis la devise spécifique à chaque article (dans n'importe quelle devise prise en charge par l'application).

DREAMWEAVER CS3


508

4

Le serveur renvoie la page report.cfm au navigateur en affichant le montant des articles dans la devise demandée.

Lorsque cet utilisateur ferme la session, le serveur efface la valeur du paramètre d'URL et libère ainsi la mémoire du serveur qui peut stocker de nouvelles demandes d'utilisateur.

La création des paramètres d'URL a lieu lorsque la méthode

GET

du protocole HTTP est utilisée en conjonction avec un formulaire HTML. La méthode

GET

indique que la valeur du paramètre doit être annexée à la demande d'URL lors de l'envoi du formulaire.

La personnalisation d'un site Web en fonction des préférences d'un utilisateur constitue un exemple typique d'utilisation des paramètres d'URL. Un paramètre d'URL composé d'un nom d'utilisateur et d'un mot de passe, par exemple, peut être utilisé pour authentifier un utilisateur et n'afficher que les informations auxquelles il a souscrit. Les sites Web financiers affichant le cours d'actions particulières en fonction des symboles boursiers sélectionnés précédemment par un utilisateur ont recours à ce type de paramètres, par exemple. Les développeurs d'applications Web utilisent souvent les paramètres d'URL pour transmettre des valeurs aux variables au sein des applications. Vous pouvez, par exemple, transmettre des termes à rechercher à des variable SQL au sein d'une application Web afin de générer des résultats de recherche.

Création de paramètres d'URL à l'aide de liens H

T

ML

La création de paramètres d'URL au sein d'un lien HTML consiste à utiliser l'attribut href

de la balise d'ancrage HTML.

Vous pouvez entrer directement les paramètres d'URL dans l'attribut en passant en mode Code (Affichage > Code) ou en ajoutant les paramètres d'URL à la fin du lien d'URL de la zone Lien de l'inspecteur Propriétés.

Dans l'exemple ci-dessous, trois liens créent un même paramètre d'URL ( action

) pouvant avoir trois valeurs :

Add

(ajouter),

Update

(mettre à jour) et

Delete

(supprimer). Lorsque l'utilisateur clique sur un lien, une valeur de paramètre différente est envoyée au serveur et l'action demandée est exécutée.

<a href="http://www.mysite.com/index.cfm?action=Add">Add a record</a>

<a href="http://www.mysite.com/index.cfm?action=Update">Update a record</a>

<a href="http://www.mysite.com/index.cfm?action=Delete">Delete a record</a>

L'inspecteur Propriétés (Fenêtre > Propriétés) permet de créer les mêmes paramètres d'URL en sélectionnant le lien, puis en ajoutant les paramètres d'URL à la fin du lien d'URL de la zone Lien.

Une fois un paramètre d'URL créé, Dreamweaver peut en récupérer la valeur et l'utiliser dans une application Web. Après avoir défini un paramètre d'URL dans Dreamweaver, vous pouvez en insérer la valeur dans une page.

Voir aussi

« A propos des paramètres d'URL et de formulaire » à la page 518

« Définition de paramètres de formulaire » à la page 530

DREAMWEAVER CS3


509


« Accès aux données stockées dans une base de données » à la page 505

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

Fonctionnement des variables de session

Les variables de session stockent des informations (très souvent des paramètres de formulaire ou d'URL envoyés par les utilisateurs) et les rendent accessibles à toutes les pages de l'application pendant la durée de la visite d'un utilisateur. Ainsi, lorsqu'un utilisateur se connecte à un portail Web lui donnant accès à une messagerie, des cours boursiers, des bulletins météo et des dossiers d'actualité, l'application Web stocke les informations de connexion dans une variable de session qui identifie l'utilisateur dans toutes les pages du site. Cela permet à l'utilisateur de ne voir que le type de contenu qu'il a sélectionné pendant qu'il parcourt le site. Les variables de session peuvent également proposer un mécanisme de sécurité en mettant fin à la session d'un utilisateur si le compte reste inactif pendant un certain temps. Cette méthode présente aussi l'avantage de libérer les ressources de traitement et la mémoire du serveur lorsque les utilisateurs oublient de se déconnecter d'un site Web.

Les variables de session stockent les informations pendant toute la durée de la session d'un utilisateur. La session commence lorsque l'utilisateur ouvre une page dans l'application et se termine lorsqu'il n'ouvre pas d'autre page dans l'application pendant un laps de temps donné ou lorsqu'il met explicitement fin à la session (en général, en cliquant sur un lien de déconnexion). Tant qu'elle existe, la session est spécifique à un utilisateur donné ; chaque utilisateur dispose donc d'une session qui lui est propre.

Faites appel aux variables de session pour stocker des informations auxquelles chaque page de l'application Web doit pouvoir accéder. Ces informations peuvent aller du nom de l'utilisateur à ses préférences pour la taille des polices à l'écran, en passant par un indicateur signalant la réussite ou l'échec de sa connexion. Les variables de session sont également souvent utilisées pour assurer le suivi d'un comptage cumulatif, tel que le nombre de questions auxquelles un utilisateur a répondu correctement jusqu'à présent dans un quiz en ligne ou les produits qu'il a sélectionnés dans un catalogue en ligne.

Les variables de session ne peuvent fonctionner que si le navigateur de l'utilisateur est configuré pour accepter les cookies.

Le serveur crée un numéro d'ID de session qui permet l'identification univoque de l'utilisateur lors de l'initialisation de la première session, puis envoie au navigateur de l'utilisateur un cookie contenant ce numéro d'ID. Lorsque l'utilisateur demande une nouvelle page située sur le serveur, celui-ci lit le cookie dans le navigateur pour identifier l'utilisateur et récupérer ses variables de session personnelles, stockées en mémoire.

Collecte, stockage et récupération d'informations dans des variables de session

Avant de créer une variable de session, vous devez commencer par obtenir les informations à stocker, puis les envoyer au serveur pour stockage. Vous pouvez recueillir et envoyer des informations au serveur à l'aide de formulaires HTML ou de liens hypertexte contenant des paramètres d'URL. Vous pouvez également obtenir des informations à partir d'une base de données, des cookies stockés dans l'ordinateur d'un utilisateur ou des en-têtes HTTP envoyés par son navigateur avec une demande de page.

Un catalogue de produits utilisant des paramètres d'URL figés dans le code et créés à l'aide d'un lien pour renvoyer des informations sur les produits au serveur afin qu'elles soient stockées dans une variable de session est un exemple typique cart » (Ajouter au panier), l'ID du produit est stockée dans une variable de session pendant que l'utilisateur poursuit ses achats. Lorsqu'il passe à la page de paiement, l'ID du produit stockée dans la variable de session est récupérée.

Un sondage reposant sur un formulaire est un exemple typique de page stockant les paramètres de formulaire dans les variables de session. Le formulaire renvoie l'information sélectionnée au serveur, où une page d'application note le sondage et stocke les réponses dans une variable de session, afin, par exemple, de les transmettre à une application qui regroupe les réponses de toutes les personnes ayant répondu au sondage. Il est également possible que les informations soient stockées dans une base de données pour être utilisées ultérieurement.

DREAMWEAVER CS3


510

Une fois que vous avez envoyé les informations au serveur, vous pouvez les stocker dans des variables de session en ajoutant

à la page spécifiée par le paramètre de formulaire ou d'URL le code adapté à votre modèle de serveur. Appelée page de destination , cette page est spécifiée soit dans l'attribut action

du formulaire HTML, soit dans l'attribut href

du lien hypertexte situé dans la première page.

Après avoir stocké une valeur dans une variable de session, vous pouvez utiliser Dreamweaver pour la récupérer et l'utiliser dans une application Web. Après avoir défini la variable de session dans Dreamweaver, vous pouvez en insérer la valeur dans une page.

La syntaxe HTML de chaque attribut se présente comme suit :

<form action="

destination.html

" method="get" name="

myform

"> </form>

<param name="href"value="

destination.html

">

Le choix de la technologie serveur et de la méthode d'obtention des informations détermine le code utilisé pour stocker les informations dans une variable de session. La syntaxe de base de chaque technologie serveur se présente comme suit :

ColdFusion

<CFSET session.

variable_name

= value>

ASP et ASP.

N

E

T

<% Session("

variable_name

") = value %>

L'expression value

correspond en général à une expression de serveur telle que

Request.Form(“lastname”)

. Ainsi, si vous utilisez un paramètre d'URL appelé product

(ou un formulaire HTML avec la méthode

GET

et un champ de texte appelé product

) pour recueillir des informations, les instructions suivantes stockent les informations dans une variable de session appelée prodID

:

ColdFusion

<CFSET session.prodID = url.product>

ASP et ASP.

N

E

T

<% Session("prodID") = Request.QueryString("product") %>

Si vous utilisez un formulaire HTML avec la méthode post

et un champ de texte appelé txtProduct

pour recueillir les informations, les instructions suivantes stockent alors ces informations dans la variable de session :

ColdFusion

<CFSET session.prodID = form.txtProduct>

ASP et ASP.

N

E

T

<% Session("prodID") = Request.Form("txtProduct") %>

Voir aussi


« Définition de variables de session » à la page 531

DREAMWEAVER CS3


511

Exemple d'informations stockées dans des variables de session

Vous travaillez sur un site destiné à un vaste public de retraités. Dans Dreamweaver, ajoutez deux liens sur la page d'accueil du site pour que les utilisateurs puissent modifier la taille du texte affiché. Si l'utilisateur souhaite un affichage en caractères plus gros pour un texte plus facile à lire, il lui suffit de cliquer sur un lien ; s'il souhaite un texte de taille standard, il clique sur un autre lien.

Chaque lien comporte un paramètre d'URL appelé fontsize

. Ce paramètre envoie au serveur la préférence de texte de l'utilisateur, comme cela est indiqué dans l'exemple suivant spécifique à Macromedia ColdFusion® d'Adobe :

<a href="resort.cfm?fontsize=large">Larger Text</a><br>

<a href="resort.cfm?fontsize=small">Normal Text</a>

Stockez la préférence de texte de l'utilisateur dans une variable de session et de l'utiliser afin de définir la taille de police à utiliser dans chaque page demandée par l'utilisateur.

En haut de la page de destination, saisissez le code suivant pour créer une session appelée font_pref

qui stocke la préférence de l'utilisateur pour la taille de police.

ColdFusion

<CFSET session.font_pref = url.fontsize>

ASP et ASP.

N

E

T

<% Session("font_pref") = Request.QueryString("fontsize") %>

Lorsque l'utilisateur clique sur le lien hypertexte, la page envoie à la page de destination la préférence de texte de l'utilisateur dans un paramètre d'URL. Le code de la page de destination stocke le paramètre d'URL dans la variable de session font_pref

. Pendant la durée de la session de l'utilisateur, toutes les pages de l'application récupèrent cette valeur et affichent la taille de police sélectionnée.

Chapitre 19 : Ajout de contenu dynamique aux pages Web

Vous pouvez créer des pages dynamiques qui affichent des informations provenant de sources de contenu dynamiques, telles que des bases de données et des variables de session. Adobe® Dreamweaver® CS3 prend en charge le développement de pages dynamiques pour les modèles de serveurs ColdFusion, ASP, ASP.NET, JSP et PHP.

Vous pouvez également utiliser un cadre basé sur Ajax, baptisé Spry, pour créer des pages dynamiques qui affichent et traitent des données XML. L'emploi d'éléments de formulaire Spry prédéfinis permet de créer des pages dynamiques qui n'exigent pas d'actualisation globale.

O

ptimisation de l'espace de travail pour le développement visuel

Affichage de panneaux de développement d'applications Web

Cliquez sur l'onglet Données de la barre Insertion pour afficher un ensemble de boutons qui vous permettront d'ajouter du contenu dynamique et des comportements de serveur à votre page.

Le nombre et le type de boutons apparaissant varient en fonction du type de document ouvert dans la fenêtre de document.

Amenez la souris au-dessus d'une icône afin d'afficher une info-bulle décrivant la fonction de ce bouton.

La barre Insertion comprend des boutons qui permettent d'ajouter les éléments suivants sur la page :

•

Jeu d'enregistrements

•

Texte ou tableaux dynamiques

•

Barres de navigation d'un enregistrement

Si vous passez en mode Code (Affichage > Code), il est possible que des panneaux supplémentaires apparaissent dans la catégorie correspondante de la barre Insertion, ce qui vous permettra d'insérer du code dans la page. Par exemple, si vous visionnez une page ColdFusion en mode Code, un panneau CFML deviendra disponible dans la catégorie CFML de la barre

Insertion.

Plusieurs panneaux vous permettent de créer des pages dynamiques :

•

Sélectionnez le panneau Liaisons (Fenêtre > Liaisons) pour définir des sources de contenu dynamique pour votre page et ajouter le contenu dans la page.

•

Sélectionnez Comportements du serveur (Fenêtre > Comportements du serveur) pour ajouter une logique côté serveur dans vos pages dynamiques.

•

Sélectionnez le panneau Bases de données (Fenêtre > Bases de données) pour explorer les bases de données ou créer des connexions aux bases de données.

•

Sélectionnez le panneau Composants (Fenêtre > Composants) pour inspecter, ajouter ou modifier un code pour des

JavaBeans, des composants Adobe ColdFusion ou des services Web.

Remarque :

Le panneau Composants est activé uniquement si vous ouvrez une page ColdFusion, JSP ou ASP.NET. Il est possible que le document ne prenne pas certains composants en charge. Par exemple, les documents ColdFusion ne prennent pas JavaBeans en charge.

Un comportement de serveur est l'ensemble des instructions insérées dans une page dynamique au moment de la création et exécutées sur le serveur lors de l'exécution.

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

512

DREAMWEAVER CS3


513

Voir aussi

« Liaisons, panneau » à la page 520

« Panneau Comportements de serveur » à la page 520

« Panneau Bases de données » à la page 521

Affichage de votre base de données dans Dreamweaver

Une fois la connexion à la base de données réalisée, vous pouvez afficher sa structure et ses données dans Dreamweaver.

1

Ouvrez le panneau Base de données (Fenêtre > Bases de données).

Le panneau Base de données affiche toutes les bases de données pour lesquelles vous avez créé des connexions. Si vous développez un site ColdFusion, le panneau affiche toutes les bases de données pour lesquelles des sources de données ont

été définies dans ColdFusion Administrator.

Remarque :

Dreamweaver recherche le site en cours sur le serveur ColdFusion défini.

Si aucune base de données n'apparaît dans le panneau, vous devez créer une connexion de base de données.

2

Pour afficher les tables, les procédures stockées et les modes dans la base de données, cliquez sur le signe plus (+) située en regard de la connexion dans la liste.

3

Pour afficher les colonnes de la table, cliquez sur un nom de table.

Les icônes des colonnes reflètent le type de données et indiquent la clé primaire de la table.

4

Pour afficher les données dans une table, cliquez sur le nom de la table dans la liste avec le bouton droit de la souris

(Windows) ou en appuyant sur Contrôle (Macintosh) et choisissez Afficher les données dans le menu déroulant.

Voir aussi


Aperçu des pages dynamiques dans un navigateur

Les développeurs d'applications Web déboguent souvent leurs pages en les vérifiant régulièrement dans un navigateur Web.

Vous pouvez afficher rapidement vos pages dynamiques dans un navigateur sans avoir à les télécharger manuellement sur un serveur au préalable.

Pour lancer un aperçu des pages dynamiques, vous devez compléter la catégorie Serveur d'évaluation de la boîte de dialogue

Définition du site.

Vous pouvez également utiliser le mode Création pour effectuer une vérification rapide de vos pages tout en travaillant dessus. Le mode Création affiche une représentation entièrement modifiable de votre page, y compris les données dynamiques.

Vous pouvez configurer Dreamweaver pour utiliser des fichiers temporaires à la place des fichiers d'origine. Avec cette option, Dreamweaver exécute une copie de la page sur un serveur Web avant de l'afficher dans votre navigateur

(Dreamweaver efface ensuite le fichier temporaire du serveur.) Pour définir cette option, sélectionnez Edition >

Préférences > Aperçu dans le navigateur.

L'option Aperçu dans le navigateur ne télécharge pas les pages associées (pages de résultats ou d'informations détaillées), les fichiers dépendants (tels que fichiers d'image) ou les inclusions côté serveur. Pour télécharger un fichier manquant, choisissez Fenêtre > Site pour ouvrir le panneau Site, sélectionnez le fichier dans Dossier local et cliquez sur la flèche haut bleue de la barre d'outils pour copier le fichier dans le dossier du serveur Web.

DREAMWEAVER CS3


514

Voir aussi



Limitation des informations de base de données affichées dans Dreamweaver

Les utilisateurs chevronnés travaillant avec des systèmes de base de données de grande envergure tels qu'Oracle devront limiter le nombre d'éléments de base de données récupérés par Dreamweaver au moment de la conception. Une base de données Oracle peut contenir des éléments que Dreamweaver ne peut pas traiter au moment de la conception. Vous pouvez créer un schéma dans Oracle, puis l'utiliser dans Dreamweaver pour filtrer les éléments indésirables au moment de la conception.

Remarque :


D'autres utilisateurs peuvent avoir intérêt à limiter la quantité d'informations récupérées par Dreamweaver au moment de la conception. Certaines bases de données contiennent des douzaines, voire des centaines de tableaux, et vous pouvez préférer ne pas tous les répertorier tous pendant que vous travaillez. Un schéma ou catalogue peut limiter le nombre d'éléments de base de données récupérés au moment de la conception.

Pour commencer, créez un schéma ou un catalogue dans votre application de base de données pour pouvoir ensuite l'appliquer dans Dreamweaver. Consultez la documentation de votre système de base de données ou consultez votre administrateur système.

Remarque :

Vous ne pouvez pas appliquer un schéma ou un catalogue dans Dreamweaver si vous développez une application

ColdFusion,

1

Ouvrez une page dynamique dans Dreamweaver, puis la fenêtre Bases de données (Fenêtre > Bases de données).

• Si la connexion de base de données existe, cliquez sur cette connexion dans la liste avec le bouton droit de la souris

(Windows) ou en appuyant sur le bouton Contrôle (Macintosh) et choisissez Modifier la connexion dans le menu déroulant.

• Si la connexion n'existe pas, cliquez sur le bouton Plus (+) en haut du panneau afin de la créer.

2

Cliquez sur Avancé dans la boîte de dialogue de la connexion.

3

Indiquez votre schéma ou catalogue et cliquez sur OK.

Configuration de l'inspecteur Propriétés des procédures stockées ColdFusion, des commandes ASP et des objets appelables JSP

Modifiez la procédure stockée sélectionnée. Les options disponibles dépendent de la technologie de serveur utilisée.

❖

Modifiez les options à votre convenance. Lorsque vous sélectionnez une nouvelle option dans l'inspecteur, Dreamweaver met la page à jour.

Voir aussi

« Modification de contenu dynamique » à la page 541

Configuration de l'inspecteur Propriétés pour les instructions préparées JSP

Cet inspecteur Propriétés a pour fonction de modifier l'instruction préparée JSP sélectionnée.

❖


O

ptions de nom du champ

Cet inspecteur Propriétés s'affiche lorsque Dreamweaver rencontre un type d'entrée inconnu. En général, cela est dû à une erreur de frappe ou à autre problème lié à la saisie de données.

DREAMWEAVER CS3


515

Si vous modifiez le type de champ dans l'inspecteur Propriétés et placez une valeur reconnue par Dreamweaver (par exemple, si vous corrigez la faute d'orthographe) l'inspecteur Propriétés se met à jour pour afficher les propriétés du type reconnu. Définissez les options suivantes dans l'inspecteur Propriétés :

N om du champ

Attribue un nom au champ. Cette zone est obligatoire et le nom doit être unique.

T ype

Définit le type d'entrée du champ. Le contenu de cette zone reflète la valeur du type d'entrée apparaissant actuellement dans votre code source HTML.

Valeur

Définit la valeur du champ.

Paramètres

Ouvre la boîte de dialogue Paramètres pour que vous puissiez visualiser les attributs actuels du champ et ajouter ou supprimer des attributs.

Conception de pages dynamiques

Dreamweaver et la conception de pages dynamiques

Pour concevoir et créer un site Web dynamique avec succès, exécutez la procédure générale suivante.

1

Conception de la page

La conception visuelle de la page constitue l'une des étapes clés dans la conception d'un site Web, qu'il soit statique ou dynamique. En effet, lorsque vous ajoutez des éléments dynamiques à une page Web, son aspect fonctionnel dépend largement de sa conception. Réfléchissez attentivement à la façon dont les utilisateurs interagiront avec chacune des pages et avec le site Web dans son ensemble.

L'une des méthodes les plus courantes pour insérer un contenu dynamique dans une page Web consiste à créer un tableau pour présenter le contenu puis à importer le contenu dynamique dans une ou plusieurs des cellules du tableau. Cette méthode vous permet de présenter divers types d'informations dans un format structuré.

2

Création d'une source de contenu dynamique

Avant de pouvoir afficher des données dans une page, les sites Web dynamiques doivent être associés à une source de contenu d'où ils peuvent extraire les données. Avant de pouvoir utiliser des sources de contenu dans une page Web, effectuez les actions suivantes :

•

Créez une connexion avec la source de contenu dynamique (telle qu'une base de données) et avec le serveur d'application chargé du traitement de la page ; Créez la source de données à l'aide du panneau Liaisons. Vous pouvez ensuite sélectionner et insérer la source de données dans la page.

•

Précisez les informations de la base de données devant être affichées ou les variables devant être incluses dans la page en créant un jeu d'enregistrements. Vous avez également la possibilité de tester la requête depuis la boîte de dialogue Jeu d'enregistrements et de procéder à tous les réglages nécessaires avant de l'ajouter au panneau Liaisons.

•

Sélectionnez et insérez des éléments de contenu dynamique dans la page sélectionnée.

3

Ajout de contenu dynamique à une page Web

Après avoir défini un jeu d'enregistrements (ou toute autre source de données) et l'avoir ajouté au panneau Liaisons, vous pouvez insérer le contenu dynamique associé au jeu d'enregistrements dans la page. Grâce à l'interface à base de menus de

Dreamweaver, il suffit de sélectionner une source de contenu dynamique dans le panneau Liaisons et de l'insérer dans l'objet de texte, d'image ou de formulaire approprié au sein de la page en cours pour ajouter des éléments de contenu dynamique.

Lorsque vous insérez un élément de contenu dynamique ou un comportement de serveur dans une page, Dreamweaver insère un script côté serveur dans le code source de la page. Ce script donne pour instruction au serveur de récupérer des données à partir de la source définie et de les restituer dans la page Web. Pour insérer un contenu dynamique dans une page Web, procédez de l'une des manières suivantes :

•

Pour insérer un contenu dynamique dans une page Web, procédez de l'une des manières suivantes :

• placez ce contenu au niveau du point d'insertion en mode Code ou Création ;

• remplacez une chaîne de texte ou un autre espace réservé ;

DREAMWEAVER CS3


516

insérez le contenu dans un attribut HTML. Un contenu dynamique peut, par exemple, définir l'attribut src d'une image ou l'attribut de valeur d'un champ de formulaire.

4

Ajout de comportements de serveur à une page

En dehors de l'ajout de contenu dynamique, vous pouvez intégrer une logique applicative complexe dans des pages Web à l'aide des comportements de serveur. Les comportements de serveur correspondent à des sections de code prédéfinies côté serveur qui ajoutent une logique applicative aux pages Web, ce qui optimise leur interactivité et leurs fonctionnalités.

Les comportements de serveur de Dreamweaver vous permettent d'ajouter une logique applicative à un site Web sans que vous ayez à rédiger le code requis. Les comportements fournis avec Dreamweaver prennent en charge les types de document

ColdFusion, ASP, ASP.NET, JSP et PHP. Les comportements de serveur sont développés et testés de sorte à être rapides, fiables et solides. Les comportements de serveur intégrés prennent en charge des pages adaptées à différents types de platesformes et de navigateurs.

Grâce à l'interface pointer-cliquer de Dreamweaver, l'application de contenu dynamique et de comportements complexes à une page est aussi simple que l'insertion d'éléments de texte et de conception. Les comportements de serveur suivants sont disponibles :

•

Définition d'un jeu d'enregistrements à partir d'une base de données existante. Le jeu d'enregistrements que vous définissez est ensuite stocké dans le panneau Liaisons.

•

Affichage de plusieurs enregistrements dans une même page. Vous pouvez sélectionner soit un tableau entier, soit des cellules ou lignes précises renfermant un contenu dynamique, puis définir le nombre d'enregistrements à afficher sur chaque page.

•

Création et insertion d'un tableau dynamique dans une page, puis association du tableau à un jeu d'enregistrements.

Vous pouvez ensuite modifier l'apparence du tableau et de la région répétée à l'aide respectivement de l'inspecteur

Propriétés et du comportement de serveur Région répétée.

•

Insertion d'un objet de texte dynamique dans une page. L'objet de texte que vous insérez est un élément provenant d'un jeu d'enregistrements prédéfini auquel vous appliquez le format de données de votre choix.

•

Création de commandes de navigation entre enregistrements et d'état des enregistrements, création de pages

Principale/Détails et de formulaires destinés à mettre à jour les informations d'une base de données.

•

Affichage de plusieurs enregistrements à partir d'un enregistrement de base de données.

•

Création de liens de navigation de jeu d'enregistrements afin de permettre aux utilisateurs d'afficher les enregistrements précédant ou suivant un enregistrement de base de données.

•

Ajout d'un compteur d'enregistrements pour aider les utilisateurs à suivre le nombre d'enregistrements renvoyés et leur emplacement dans le résultat obtenu.

Vous pouvez également enrichir les comportements de serveur de Dreamweaver en rédigeant vos propres comportements ou en installant ceux rédigés par des tiers.

5

Test et débogage de la page

Avant de rendre une page dynamique (ou un site Web entier) accessible sur le Web, il est nécessaire d'en tester les fonctionnalités. Vous devriez également examiner la façon dont les fonctionnalités de votre application peuvent être adaptées aux personnes souffrant d'un handicap.

Vous trouverez un didacticiel consacré à la création de pages dynamiques à l'adresse www.adobe.com/go/learn_dw_webapp_fr .

Voir aussi


« Ajout et modification d'images » à la page 233

« Insertion de contenu Flash » à la page 245

« Sources de données d'applications Web » à la page 505

DREAMWEAVER CS3


517

Présentation des sources de contenu dynamique

A propos des sources de contenu dynamique

Une source de contenu dynamique est un stock d'informations à partir duquel il est possible de récupérer du contenu dynamique en vue de l'afficher dans une page Web. Différentes sources peuvent être utilisées comme sources de contenu dynamique : des informations enregistrées dans une base de données, mais aussi des valeurs envoyées au moyen d'un formulaire HTML, des valeurs contenues dans un objet de serveur, des valeurs de propriétés JavaBeans, etc.

Dreamweaver vous permet aisément d'établir une connexion à une base de données et de créer un jeu d'enregistrements à partir duquel extraire le contenu dynamique. Un jeu d'enregistrements correspond au résultat d'une requête de base de données. Il permet d'extraire les informations spécifiques demandées et de les afficher dans une page donnée. L'utilisateur définit le jeu d'enregistrements en fonction des informations présentes dans la base de données et du contenu qu'il souhaite afficher.

Certains fournisseurs de technologie utilisent une terminologie différente pour désigner un jeu d'enregistrements. Dans les technologies ASP et ColdFusion, un jeu d'enregistrements est défini comme requête . Dans la technologie JSP, un jeu d'enregistrements s'appelle un jeu de résultats . Dans la technologie ASP.NET, on parle de jeu de données ( DataSet ). Si vous utilisez d'autres sources de données, telles que des entrées utilisateur ou des variables de serveur, le nom de la source de données défini dans Dreamweaver est identique à celui de la source de données.

Les sites Web dynamiques requièrent une source de données à partir de laquelle le contenu dynamique peut être récupéré et affiché. Dreamweaver permet d'utiliser des bases de données, des procédures stockées, des variables de demande, d'URL, de serveur et de formulaire, ainsi que d'autres sources de contenu dynamique. Suivant la source de données, il est possible soit de récupérer un nouveau contenu pour répondre à une demande, soit de modifier la page pour satisfaire aux besoins des utilisateurs.

Toute source de contenu définie dans Dreamweaver est ajoutée à la liste des sources de contenu du panneau Liaisons. Vous pouvez ensuite insérer la source de contenu dans la page actuellement sélectionnée.

A propos des jeux d'enregistrements

Si vous utilisez une base de données comme source de contenu d'une page Web dynamique, vous devez tout d'abord créer un jeu d'enregistrements dans lequel seront stockées les données récupérées. Les jeux d'enregistrements servent d'intermédiaire entre la base de données dans laquelle le contenu est enregistré et le serveur d'application qui génère la page.

Ils se composent des données renvoyées par une requête de base de données et sont stockés temporairement dans la mémoire du serveur d'application pour que les données soient récupérées plus rapidement. Le serveur supprime un jeu d'enregistrements lorsqu'il n'est plus nécessaire.

Le jeu d'enregistrements proprement dit est un ensemble de données extrait d'une base de données spécifiée. Il peut se composer de l'intégralité d'une table de base de données, ou bien d'un sous-ensemble de lignes et de colonnes d'une table.

Les lignes et les colonnes sont récupérées au moyen d'une requête de base de données définie au niveau du jeu d'enregistrements. Les requêtes de base de données sont écrites en SQL (Structured Query Language), langage simple permettant de récupérer des informations d'une base de données, mais aussi d'ajouter des données à une base et d'en supprimer. Le générateur SQL fourni avec Dreamweaver permet de créer des requêtes simples sans maîtriser le langage

SQL. Toutefois, si vous souhaitez créer des requêtes SQL complexes, vous devrez vous familiariser avec SQL et rédiger manuellement les instructions SQL que vous souhaitez utiliser dans Dreamweaver.

Remarque :

Dans la technologie Microsoft ASP.NET, on parle d'ensemble de données (DataSet). Si vous utilisez des types de document ASP.NET, c'est le terme ensemble de données (DataSet) que vous trouverez dans les boîtes de dialogue et les options de menu spécifiques à ASP.NET. Dans la documentation de Dreamweaver, le terme jeu d'enregistrements fait généralement référence aux deux types de jeux d'enregistrements. Toutefois, lorsqu'il est spécifiquement question de fonctions ASP.NET, c'est le terme ensemble de données (DataSet) qui est utilisé.

Lorsque vous rédigez des instructions SQL pour ASP.NET, vous devez prendre en compte certaines conditions spécifiques

à ASP.NET.

DREAMWEAVER CS3


518

Avant de définir un jeu d'enregistrements pour l'utiliser dans Dreamweaver, vous devez créer une connexion à une base de données et saisir des données dans la base si celle-ci n'en contient pas. Si vous n'avez pas encore défini de connexion à une base de données pour votre site, consultez le chapitre consacré spécifiquement à la mise en place d'une connexion à une base de données dans le contexte de la technologie de serveur que vous utilisez, et suivez les instructions fournies.

Voir aussi

« Définition un jeu d'enregistrements sans rédiger d'instructions SQL » à la page 521

Rédaction d'instructions SQL pour ASP.

N

E

T

Lorsque vous rédigez des instructions SQL dans la boîte de dialogue Ensemble de données - Avancé vous devez garder à l'esprit certaines conditions spécifiques à ASP.NET. Ces conditions sont décrites dans les sections suivantes.

Paramètres

La syntaxe utilisée pour référencer les paramètres varie en fonction de la connexion à la base de données utilisée (par exemple, OLE DB ou Microsoft SQL Server).

•

OLE DB d'un point d'interrogation (?).. Par exemple :

SELECT * FROM Employees WHERE HireDate > ?

•

Microsoft SQL Server

Si vous établissez une connexion à Microsoft SQL Server au moyen du fournisseur de données gérées pour SQL Server fourni avec .NET Framework, tous les paramètres doivent être nommés. Par exemple :

SELECT * FROM Employees WHERE HireDate > @hireDate

Insertion de code dans des instructions SQL

Lorsque vous insérez du code dans une instruction SQL rédigée pour ASP.NET, vous devez mettre toutes les chaînes entre guillemets (" ") et le code entre parenthèses ( ).

SELECT * FROM Employees WHERE HireDate > "+ (Request.queryString("hireDate"))

Voir aussi

A propos des paramètres d'URL et de formulaire

Les paramètres d'URL permettent de stocker les informations saisies par les utilisateurs. Pour définir un paramètre d'URL, vous devez créer un formulaire ou un lien hypertexte utilisant la méthode

GET

pour l'envoi de données. Les informations sont annexées à l'URL de la page demandée et communiquées au serveur. Lorsque vous utilisez des variables d'URL, la chaîne de la requête contient une ou plusieurs paires nom-valeur associées aux champs du formulaire. Ces paires nomvaleur sont annexées à l'URL.

Les paramètres de formulaire permettent de stocker les informations récupérées dans la requête HTTP d'une page Web. Si vous créez un formulaire utilisant la méthode

POST

, les données envoyées par le formulaire sont transmises au serveur.

Avant de commencer, vérifiez que vous avez transmis un paramètre de formulaire au serveur.

Voir aussi

« Paramètres d'URL » à la page 507

« Définition de paramètres de formulaire » à la page 530

DREAMWEAVER CS3


519

A propos des variables de session

Les variables de session permettent de stocker et d'afficher des informations conservées pendant toute la durée de la visite

(ou session) de l'utilisateur. Le serveur crée un objet de session différent pour chaque utilisateur et le conserve pendant une période définie ou jusqu'à ce qu'il soit explicitement clos.

Comme les variables de session sont conservées pendant toute la session de l'utilisateur, même lorsque celui-ci passe d'une page à l'autre dans le site Web, elles conviennent parfaitement au stockage des préférences de l'utilisateur. Les variables de session peuvent également être utilisées pour insérer une valeur dans le code HTML de la page, attribuer une valeur à une variable locale ou fournir une valeur permettant d'évaluer une expression conditionnelle.

Avant de définir des variables de session pour une page, vous devez les créer dans le code source. Après avoir créé une variable de session dans le code source de l'application Web, vous pouvez utiliser Dreamweaver pour récupérer sa valeur et l'utiliser dans une page Web.

Voir aussi


Variables d'application d'ASP et de ColdFusion

Dans ASP et ColdFusion, les variables d'application permettent de mémoriser et d'afficher des informations conservées pendant toute la durée d'utilisation de l'application, quel que soit l'utilisateur. La durée d'utilisation de l'application commence dès que le premier utilisateur demande une page dans l'application et se termine avec l'arrêt du serveur Web.

(une application regroupe tous les fichiers se trouvant dans un répertoire virtuel et ses sous-répertoires).

Les variables d'application étant conservées pendant toute la durée d'utilisation de l'application, quel que soit l'utilisateur, elles conviennent parfaitement au stockage des informations nécessaires à tous les utilisateurs, telles que l'heure et la date courantes. La valeur de la variable d'application est définie dans le code de l'application.

Variables de serveur ASP

Vous pouvez définir les variables de serveur ASP suivantes comme sources de contenu dynamique :

Request.Cookie

,

Request.QueryString

,

Request.Form

,

Request.ServerVariables

et

Request.ClientCertificates

.

Voir aussi

« Définition de variables de serveur » à la page 533

Variables de serveur ColdFusion

Vous pouvez définir les variables de serveur ColdFusion suivantes :

Variables client

Associent des données à un client spécifique. Elles conservent l'état de l'application pendant que l'utilisateur passe d'une page à l'autre et d'une session à l'autre dans l'application. « Conserver l'état » signifie conserver les informations d'une page (ou session) sur la suivante, de façon à ce que l'application se souvienne de l'utilisateur et de ses précédents choix et préférences.

Variables cookie

Accèdent aux cookies transmis au serveur par le navigateur.

Variables CGI

Fournissent des informations sur le serveur exécutant ColdFusion et sur le navigateur à l'origine d'une demande de page, ainsi que d'autres informations sur l'environnement de traitement.

Variables de serveur

Sont accessibles à tous les clients et à toutes les applications du serveur. Elles sont conservées jusqu'à l'arrêt du serveur.

Variables locales

Créées à l'aide de la balise

CFSET

ou

CFPARAM

dans une page ColdFusion.

Voir aussi


DREAMWEAVER CS3


520

Panneaux de contenu dynamique

Liaisons, panneau

Le panneau Liaisons vous permet de définir et de modifier des sources de contenu dynamique, d'ajouter du contenu dynamique à une page et d'appliquer des formats de données à du texte dynamique.

Ce panneau permet d'effectuer les opérations suivantes :

•


•


•

« Modification ou suppression de sources de contenu » à la page 536

•

« Utilisation de formats de données prédéfinis » à la page 551

•

« Association de sources de données XML » à la page 411

•

« Affichage des données XML dans des pages XSLT

•


•


•

« Définition de variables d'application dans ASP et ColdFusion » à la page 532

•


•

« Mise en mémoire cache de sources de contenu » à la page 536

•

« Copie d'un jeu d'enregistrements d'une page vers une autre » à la page 537

•

« Création d'attributs HTML dynamiques » à la page 539

Panneau Comportements de serveur

Ce panneau vous permet d'ajouter les comportements de serveur Dreamweaver sur une page, de les modifier et d'en créer de nouveaux.


•

« Affichage des enregistrements de base de données » à la page 543

•


•

« Création de pages principale et de détails en une seule opération (ColdFusion, ASP, JSP, PHP) » à la page 594

•

« Création de pages de recherche et de résultats (ColdFusion, ASP, JSP, PHP) » à la page 595

•

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

•

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

•

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

•

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

•

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

•

« Création d'une page d'enregistrement (ColdFusion, ASP, JSP, PHP) » à la page 628

•

« Création d'une page de connexion (ColdFusion, ASP, JSP, PHP) » à la page 630

•


•

« Ajout d'une procédure stockée (ColdFusion)

•

« Ajout d'une procédure stockée (ASP.NET)

•

« Suppression de contenu dynamique » à la page 541

•

« Ajout de comportements de serveur personnalisés » à la page 562

DREAMWEAVER CS3


521

Panneau Bases de données

Le panneau Bases de données vous permet de créer des connexions de base de données, d'inspecter les bases de données et d'insérer un code de base de données dans vos pages.

Ce panneau vous permet de visualiser votre base de données et de vous y connecter :

•

« Affichage de votre base de données dans Dreamweaver » à la page 513

•

« Connexions aux bases de données pour les développeurs ColdFusion » à la page 483

•

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

•

« Connexions aux bases de données pour les développeurs ASP » à la page 484

•

« Connexions à des bases de données pour les développeurs JSP » à la page 495

•

« Connexions aux bases de données pour les développeurs PHP » à la page 491

Panneau Composants

Le panneau Composants vous permet de créer et d'inspecter les composants et d'insérer un code de composant dans vos pages.

Remarque :

Ce panneau ne s'ouvre pas en mode Création.


•

« Utilisation des composants ColdFusion (ColdFusion)

•

« Utilisation des services Web » à la page 556

Définition de sources de contenu dynamique

Définition un jeu d'enregistrements sans rédiger d'instructions SQL

Vous pouvez créer un jeu d'enregistrements sans avoir à entrer d'instructions SQL manuellement.

1

Dans la fenêtre de document, ouvrez la page devant utiliser le jeu d'enregistrements.

2

Choisissez Fenêtre > Liaisons pour afficher le panneau Liaisons.

3

Dans le panneau Liaisons, cliquez sur le bouton Plus (+) et choisissez Jeu d'enregistrements (Requête) dans le menu déroulant.

La boîte de dialogue Jeu d'enregistrements simplifiée s'affiche. Si vous développez un site ColdFusion ou ASP.NET, la boîte de dialogue Jeu d'enregistrements qui s'affiche est légèrement différente. (Si la boîte de dialogue Jeu d'enregistrements avancée s'affiche, cliquez sur le bouton Simple pour ouvrir sa version simplifiée.)

4

Complétez les options de la boîte de dialogue Jeu d'enregistrements pour votre type de document.

Pour obtenir des instructions, consultez les rubriques ci-dessous.

5

Cliquez sur le bouton Tester pour exécuter la requête et vérifier qu'elle récupère les informations attendues.

Si vous avez défini un filtre qui utilise les paramètres saisis par l'utilisateur, saisissez une valeur dans la zone Valeur test et cliquez sur OK. Si la création d'une instance du jeu d'enregistrements aboutit, une table contenant les données extraites du jeu d'enregistrements s'affiche.

6

Cliquez sur OK pour ajouter le jeu d'enregistrements à la liste des sources de contenu disponibles du panneau Liaisons.

Voir aussi

DREAMWEAVER CS3


522

O ptions de la boîte de dialogue Jeu d'enregistrements simplifiée (PHP, ASP, JSP)

1

Dans la zone Nom, saisissez le nom du jeu d'enregistrements.

Il est d'usage d'ajouter le préfixe rs aux noms des jeux d'enregistrements, afin de les distinguer des autres noms d'objet dans le code, par exemple : rsPressReleases

.

Les noms des jeux d'enregistrements ne peuvent contenir que des lettres, des chiffres et des caractères de soulignement (_).

Ils ne doivent pas comporter d'espaces ni de caractères spéciaux.

2

Sélectionnez une connexion dans le menu déroulant Connexion.

Si aucune connexion n'apparaît dans la liste, cliquez sur Définir pour en créer une.

3

Dans le menu déroulant Table, sélectionnez la table de base de données qui fournira des données au jeu d'enregistrements.

Ce menu déroulant répertorie toutes les tables de la base de données spécifiée.

4

Pour inclure un sous-ensemble des colonnes de la table dans le jeu d'enregistrements, cliquez sur Sélectionnées, puis cliquez sur les colonnes souhaitées tout en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée.

5

Pour limiter le nombre d'enregistrements renvoyés depuis la table, complétez la section Filtre :

• Dans le premier menu déroulant, sélectionnez un champ de la table à comparer à la valeur de référence définie.

• Dans le deuxième menu déroulant, sélectionnez une expression conditionnelle pour comparer la valeur sélectionnée dans chaque enregistrement à la valeur de référence.

• Dans le troisième menu déroulant, sélectionnez Valeur entrée.

• Dans la zone, saisissez la valeur test.

Si la valeur indiquée dans un enregistrement répond aux conditions de filtrage, l'enregistrement est inclus dans le jeu d'enregistrements.

6

(Facultatif) Pour trier les enregistrements, sélectionnez une colonne de tri, puis indiquez si les enregistrements doivent

être triés dans l'ordre croissant (1, 2, 3... ou A, B, C...) ou décroissant.

7

Cliquez sur Tester pour vous connecter à la base de données et créer une instance de la source de données, et cliquez sur

OK pour fermer la source de données.

Un tableau répertoriant les données renvoyées s'affiche. Chaque ligne contient un enregistrement et chaque colonne un champ de cet enregistrement.

8

Cliquez sur OK. Le jeu d'enregistrements que vous venez de définir s'affiche dans le panneau Liaisons.

O ptions de la boîte de dialogue Jeu d'enregistrements simplifiée (ColdFusion)

Définissez un jeu d'enregistrements pour les types de document ColdFusion comme source de contenu dynamique, sans qu'il soit nécessaire de rédiger manuellement des instructions SQL.

Remarque :

Pour créer des jeux d'enregistrements destinés à la version 5 de ColdFusion ou à une version antérieure, utilisez la boîte de dialogue Jeu d'enregistrements simplifiée commune aux autres types de document, tels que ASP et JSP.

1


Il est d'usage d'ajouter le préfixe rs aux noms des jeux d'enregistrements afin de les distinguer des autres noms d'objet dans le code. Par exemple : rsPressReleases



2

Si vous définissez un jeu d'enregistrements pour un composant ColdFusion (si un fichier CFC est ouvert dans

Dreamweaver), sélectionnez une fonction CFC existante dans le menu déroulant Fonction, ou cliquez sur le bouton

Nouvelle fonction pour créer une fonction.

Remarque :

Le menu déroulant Fonction n’est disponible que si le document actuel est un fichier CFC, et si vous pouvez accéder

à un ordinateur exécutant ColdFusion MX 7 ou version ultérieure.

Le jeu d'enregistrements sera défini dans cette fonction.

DREAMWEAVER CS3


523

3

Sélectionnez une source de données dans le menu déroulant Source de données.

Si le menu déroulant ne contient aucune source de données, vous devez créer une source de données ColdFusion.

4

Dans les zones Nom d'utilisateur et Mot de passe, tapez le nom d'utilisateur et le mot de passe permettant d'accéder au serveur d'application ColdFusion, le cas échéant.

Il se peut qu'un nom d'utilisateur et un mot de passe soient nécessaires pour accéder aux sources de données dans

ColdFusion. S'ils ne vous ont pas été communiqués, contactez l'administrateur ColdFusion de votre société.

5

Dans le menu déroulant Table, sélectionnez la table de base de données qui fournira des données au jeu d'enregistrements.


6

Pour inclure un sous-ensemble des colonnes de la table dans le jeu d'enregistrements, cliquez sur Sélectionnées, puis cliquez sur les colonnes souhaitées tout en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée.

7

Pour limiter le nombre d'enregistrements renvoyés depuis la table, complétez la section Filtre :

•

Dans le premier menu déroulant, sélectionnez un champ de la table à comparer à la valeur de référence définie.

•

Dans le deuxième menu déroulant, sélectionnez une expression conditionnelle pour comparer la valeur sélectionnée dans chaque enregistrement à la valeur de référence.

•

Dans le troisième menu déroulant, sélectionnez Valeur entrée.

•

Dans la zone, saisissez la valeur test.

Si la valeur indiquée dans un enregistrement répond aux conditions de filtrage, l'enregistrement est inclus dans le jeu d'enregistrements.

8



9

Cliquez sur Tester pour vous connecter à la base de données et créer une instance de la source de données.

Un tableau répertoriant les données renvoyées s'affiche. Chaque ligne contient un enregistrement et chaque colonne un champ de cet enregistrement. Cliquez sur OK pour fermer le jeu d'enregistrements test.

10

Cliquez sur OK. Le jeu d'enregistrements ColdFusion que vous venez de définir s'affiche dans le panneau Liaisons.

O ptions de la boîte de dialogue Ensemble de données simplifiée (ASP.

N

E

T

)

Définissez un ensemble de données ASP.NET comme source de contenu dynamique sans qu'il soit nécessaire de coder des instructions SQL manuellement.

1

Dans la zone Nom, saisissez le nom de l'ensemble de données.

Il est d'usage d'ajouter le préfixe ds aux noms des ensembles de données (DataSet) afin de les distinguer des autres noms d'objet dans le code, par exemple : dsPressReleases

.

Les noms des ensembles de données ne peuvent contenir que des lettres, des chiffres et des caractères de soulignement (_).


2


Si aucune connexion n'apparaît dans la liste, cliquez sur Définir pour en créer une.

3

Dans le menu déroulant Table, sélectionnez la table de base de données qui fournira des données à l'ensemble de données

(DataSet).


4

Pour inclure un sous-ensemble des colonnes de la table dans l'ensemble de données (DataSet), cliquez sur Sélectionnées, puis cliquez sur les colonnes souhaitées tout en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée.

5

Pour inclure uniquement certains enregistrements de la table, complétez la section Filtre en procédant de la façon suivante :

• Dans le premier menu déroulant, sélectionnez un champ de la table à comparer à la valeur de référence définie.

DREAMWEAVER CS3


524

•

Dans le deuxième menu déroulant, sélectionnez une expression conditionnelle pour comparer la valeur sélectionnée dans chaque enregistrement à la valeur de référence.

•

Dans le troisième menu déroulant, sélectionnez Valeur entrée.

•

Dans la zone, saisissez la valeur test.

Si la valeur indiquée dans un enregistrement répond aux conditions de filtrage, l'enregistrement est inclus dans l'ensemble de données (DataSet).

6



7

Vous pouvez définir une page vers laquelle les utilisateurs seront redirigés si la requête de l'ensemble de données

(DataSet) échoue pour une raison quelconque. Par exemple, vous pouvez faire en sorte qu'une page d'erreur contenant un lien vers la page d'accueil du site s'affiche si la base de données est indisponible au moment de la requête et que l'ensemble de données ne peut être renvoyé.

8

Cliquez sur Tester pour vous connecter à la base de données et créer une instance de la source de données.

Un tableau répertoriant les données renvoyées s'affiche. Chaque ligne contient un enregistrement et chaque colonne un champ de cet enregistrement. Cliquez sur OK pour fermer l'ensemble de données.

9

Cliquez sur OK. L'ensemble de données (DataSet) que vous venez de définir s'affiche dans le panneau Liaisons.

Rédaction d'instructions SQL en vue de la définition d'un jeu d'enregistrements avancé

Rédigez vos propres instructions SQL à l'aide de la boîte de dialogue Jeu d'enregistrements avancée, ou créez une instruction

SQL à l'aide de l'arborescence Eléments de base de données graphique.

Remarque :

Si vous rédigez des instructions SQL pour des types de document ASP.NET, consultez la section « d'instructions SQL pour ASP.NET » à la page 518 pour connaître les règles spécifiques à ASP.NET.

1

Dans la fenêtre de document, ouvrez la page devant utiliser le jeu d'enregistrements.

2


3

Dans le panneau Liaisons, cliquez sur le bouton Plus (+) et choisissez Jeu d'enregistrements (Requête) dans le menu déroulant.

La boîte de dialogue Jeu d'enregistrements avancée s'affiche. Si vous développez un site ColdFusion ou ASP.NET, la boîte de dialogue Jeu d'enregistrements qui s'affiche est légèrement différente. (Si la boîte de dialogue Jeu d'enregistrements simplifiée s'affiche à la place, cliquez sur le bouton Avancé pour en ouvrir la version avancée.)

4

Définissez les options de la boîte de dialogue Jeu d'enregistrements avancée.

Pour obtenir des instructions, consultez les rubriques ci-dessous.

5

Cliquez sur le bouton Tester pour exécuter la requête et vérifier qu'elle récupère les informations attendues.

Si vous avez défini un filtre qui utilise les paramètres saisis par l'utilisateur, la boîte de dialogue Valeur test s'affiche lorsque vous cliquez sur le bouton Tester. Saisissez une valeur dans la zone Valeur test et cliquez sur OK. Si la création d'une instance du jeu d'enregistrements aboutit, une table contenant les données du jeu d'enregistrements s'affiche.

6

Cliquez sur OK pour ajouter le jeu d'enregistrements à la liste des sources de contenu disponibles du panneau Liaisons.

Voir aussi

« Création de requêtes SQL à l'aide de l'arborescence Eléments de base de données » à la page 528

« Connexions aux bases de données pour les développeurs ASP » à la page 484

« Connexions aux bases de données pour les développeurs PHP » à la page 491


DREAMWEAVER CS3


525

O ptions de la boîte de dialogue Jeu d'enregistrements avancée (PHP, ASP, JSP)

Définissez un jeu d'enregistrements comme source de contenu dynamique en rédigeant une instruction SQL personnalisée ou en créant une instruction SQL au moyen de l'arborescence graphique Eléments de base de données.

1


Il est d'usage d'ajouter le préfixe rs aux noms des jeux d'enregistrements, afin de les distinguer des autres noms d'objet dans le code. Par exemple : rsPressRelease



2


3

Saisissez une instruction SQL dans la zone de texte SQL ou utilisez l'arborescence graphique Eléments de base de données située au bas de la boîte de dialogue pour créer une instruction SQL à partir du jeu d'enregistrements sélectionné.

Pour créer une instruction SQL à l'aide de l'arborescence Eléments de base de données, procédez comme suit :

• Vérifiez que la zone de texte SQL est vierge.

• Développez les branches de l'arborescence jusqu'à ce que vous trouviez l'objet de base de données souhaité, par exemple une colonne de table ou une procédure stockée dans la base de données.

• Sélectionnez l'objet de base de données et cliquez sur l'un des boutons situés à droite de l'arborescence.

Par exemple, si vous sélectionnez une colonne de table, les boutons disponibles sont SELECT, WHERE et ORDER BY.

Cliquez sur l'un de ces boutons pour insérer l'instruction associée dans l'instruction SQL.

Vous pouvez également utiliser une instruction SQL prédéfinie issue d'une procédure stockée en sélectionnant la procédure stockée dans l'arborescence Eléments de base de données et en cliquant sur le bouton Procédure. Dreamweaver remplit automatiquement les zones SQL et Variable.

4

Si l'instruction SQL contient des variables, définissez leurs valeurs dans la zone Variables en cliquant sur le bouton

Plus (+) et en saisissant le nom de la variable, sa valeur par défaut (celle que doit prendre la variable si aucune valeur d'exécution n'est renvoyée) et sa valeur d'exécution.

Si l'instruction SQL contient des variables, assurez-vous que la colonne Valeur par défaut de la section Variables contient des valeurs test correctes.

La valeur d'exécution correspond généralement à un paramètre d'URL ou de formulaire saisi par l'utilisateur dans un champ de formulaire HTML.

Paramètres d'URL dans la colonne Valeur d'exécution.

Modèle de serveur

ASP

JSP

P

H

P

Expression de la valeur d'exécution dans le cas d'un paramètre d'URL

R equest.

Q uery

S tring

(“ form

F ie l dName

”) request.get

P arameter

(" form

F ie l dName

")

# form

F ie l dName

#

Paramètres de formulaire dans la colonne Valeur d'exécution.

Modèle de serveur

ASP

JSP

P

H

P

Expression de la valeur d'exécution dans le cas d'un paramètre de formulaire

R equest.

F orm

(“ form

F ie l dName

”) request.getParameter(" form

F ie l dName

")

# form

F ie l dName

#

5

Cliquez sur Tester pour vous connecter à la base de données et créer une instance du jeu d'enregistrements.

Si l'instruction SQL contient des variables, vérifiez que la colonne Valeur par défaut de la section Variables contient des valeurs test correctes avant de cliquer sur Tester.

DREAMWEAVER CS3


526

Un tableau répertoriant les données de votre jeu d'enregistrements s'affiche alors. Chaque ligne contient un enregistrement

6

Si le résultat vous convient, cliquez sur

O ptions de la boîte de dialogue Jeu d'enregistrements avancée (ColdFusion)

La boîte de dialogue Jeu d'enregistrements avancée vous permet de rédiger des requêtes SQL personnalisées ou de créer des requêtes SQL au moyen de l'interface pointer-cliquer de l'arborescence Eléments de base de données.

Remarque :

Créez des jeux d'enregistrements avancés destinés à la version 5 de ColdFusion ou à une version antérieure à l'aide de la boîte de dialogue Jeu d'enregistrements avancée commune aux autres types de document tels qu'ASP et JSP.

1


Il est d'usage d'ajouter le préfixe rs aux noms des jeux d'enregistrements afin de les distinguer des autres noms d'objet dans le code. Par exemple : rsPressReleases



Si vous définissez un jeu d'enregistrements pour un composant ColdFusion (si un fichier CFC est ouvert dans

Dreamweaver), sélectionnez une fonction CFC existante dans le menu déroulant Fonction, ou cliquez sur le bouton

Nouvelle fonction pour créer une fonction.

Remarque :

Le menu déroulant Fonction n’est disponible que si le document actuel est un fichier CFC, et si vous pouvez accéder

à un ordinateur exécutant ColdFusion MX 7 ou version ultérieure.


2

Sélectionnez une source de données dans le menu déroulant Source de données.

Si le menu déroulant ne contient aucune source de données, vous devez au préalable créer une source de données

ColdFusion.

3

Dans les zones Nom d'utilisateur et Mot de passe, tapez le nom d'utilisateur et le mot de passe permettant d'accéder au serveur d'application ColdFusion, le cas échéant.

Il se peut qu'un nom d'utilisateur et un mot de passe soient nécessaires pour accéder aux sources de données dans

ColdFusion. S'ils ne vous ont pas été communiqués, contactez l'administrateur ColdFusion de votre société.

4

Saisissez une instruction SQL dans la zone de texte SQL ou utilisez l'arborescence graphique Eléments de base de données située au bas de la boîte de dialogue pour créer une instruction SQL à partir du jeu d'enregistrements sélectionné..

5

(Facultatif) Pour créer une instruction SQL à l'aide de l'arborescence Eléments de base de données, procédez comme suit :


• Développez les branches de l'arborescence jusqu'à ce que vous trouviez l'objet souhaité, par exemple une colonne de table.




Si l'instruction SQL contient des paramètres, définissez leurs valeurs dans la zone Paramètres en cliquant sur le bouton

Plus (+) et en saisissant le nom du paramètre et sa valeur par défaut (celle que doit prendre le paramètre si aucune valeur d'exécution n'est renvoyée).

Si l'instruction SQL contient des paramètres, vérifiez que la colonne Valeur par défaut de la zone Paramètres contient des valeurs test correctes.

DREAMWEAVER CS3


527

Les paramètres de la page vous permettent d'indiquer les valeurs par défaut des références aux valeurs d'exécution contenues dans vos instructions SQL. Par exemple, l'instruction SQL suivante sélectionne un enregistrement d'une base de données répertoriant les employés d'une entreprise suivant la valeur du matricule de l'employé. Vous pouvez attribuer une valeur par défaut à ce paramètre pour vous assurer qu'une valeur d'exécution sera toujours renvoyée. Dans l'exemple suivant,

FormFieldName

désigne un champ de formulaire dans lequel les utilisateurs saisissent leur matricule :

SELECT * FROM Employees WHERE EmpID = + (Request.Form(

#FormFieldName#)

)

La boîte de dialogue Add Page Parameters (Ajouter des paramètres de page) contiendrait alors une paire nom-valeur semblable à celle présentée ci-dessous :

N om

F orm

F ie l dName

Valeurs par défaut

0001


6


Si l'instruction SQL contient des références à des valeurs d'exécution, vérifiez que la colonne Valeur par défaut du champ

Paramètres de la page contient des valeurs test correctes avant de cliquer sur Tester.

Un tableau répertoriant les données de votre jeu d'enregistrements s'affiche alors. Chaque ligne contient un enregistrement

7


O ptions de la boîte de dialogue Ensemble de données avancée (ASP.

N

E

T

)

Définissez un ensemble de données comme source de contenu dynamique en rédigeant une instruction SQL personnalisée ou en créant une instruction SQL au moyen de l'arborescence Eléments de base de données.

1

Dans la zone Nom, saisissez le nom de l'ensemble de données.

Il est d'usage d'ajouter le préfixe ds aux noms des ensembles de données (DataSet) afin de les distinguer des autres noms d'objet dans le code. Par exemple : dsPressRelease

Les noms des ensembles de données ne peuvent contenir que des lettres, des chiffres et des caractères de soulignement (_).


2


3

Saisissez une instruction SQL dans la zone de texte SQL ou bien utilisez l'arborescence Eléments de base de données située au bas de la boîte de dialogue pour créer une instruction SQL à partir des tables de base de données sélectionnées.

Pour créer une instruction SQL à l'aide de l'arborescence Eléments de base de données, procédez comme suit :


• Développez les branches de l'arborescence jusqu'à ce que vous trouviez l'objet de base de données souhaité, par exemple une colonne de table ou une procédure stockée dans la base de données.




Vous pouvez également utiliser une instruction SQL prédéfinie issue d'une procédure stockée en sélectionnant la procédure stockée dans l'arborescence Eléments de base de données et en cliquant sur le bouton Procédure. Dreamweaver remplit automatiquement les zones SQL et Paramètres.

4

Vous pouvez définir une page vers laquelle les utilisateurs seront redirigés si la requête de l'ensemble de données

(DataSet) échoue pour une raison quelconque. Par exemple, vous pouvez faire en sorte qu'une page d'erreur contenant un lien vers la page d'accueil du site s'affiche si la base de données est indisponible au moment de la requête et que l'ensemble de données ne peut être renvoyé.

DREAMWEAVER CS3


528

5

Si l'instruction SQL contient des paramètres, définissez leurs valeurs dans la zone Paramètres en cliquant sur le bouton

Plus (+) et en saisissant le nom du paramètre et sa valeur par défaut (celle que doit prendre le paramètre si aucune valeur d'exécution n'est renvoyée).

Si l'instruction SQL contient des paramètres, vérifiez que la colonne Valeur par défaut de la zone Paramètres contient des valeurs test correctes.

Les paramètres de la page vous permettent d'indiquer les valeurs par défaut des références aux valeurs d'exécution contenues dans vos instructions SQL. Par exemple, l'instruction SQL suivante sélectionne un enregistrement d'une base de données répertoriant les employés d'une entreprise suivant la valeur du matricule de l'employé. Vous pouvez attribuer une valeur par défaut à ce paramètre pour vous assurer qu'une valeur d'exécution sera toujours renvoyée. Dans l'exemple suivant,

FormFieldName

désigne un champ de formulaire dans lequel les utilisateurs saisissent leur matricule :

“SELECT * FROM Employees WHERE EmpID = “ + (Request.Form(“

FormFieldName

”))

La boîte de dialogue Add Page Parameters (Ajouter des paramètres de page) contiendrait alors une paire nom-valeur semblable à celle présentée ci-dessous :

N om

F orm

F ie l dName

Valeur par défaut

0001


6


Si l'instruction SQL contient des références à des valeurs d'exécution, vérifiez que la colonne Valeur par défaut du champ

Paramètres de la page contient des valeurs test correctes avant de cliquer sur Tester.

Un tableau répertoriant les données de votre ensemble de données (DataSet) s'affiche alors. Chaque ligne contient un

7


Définition de paramètres dans une instruction SQL (ColdFusion, ASP.

N

E

T

)

Définissez des paramètres dans une instruction SQL ; la valeur par défaut est celle attribuée au paramètre lorsque aucune valeur d'exécution n'est renvoyée.

1

Sélectionnez un paramètre dans le menu déroulant Nom.

2

Dans la zone Paramètre par défaut, saisissez la valeur par défaut que vous souhaitez attribuer au paramètre, et cliquez sur OK.

Définition de paramètres dans une instruction SQL (PHP)

Définissez des paramètres dans une instruction SQL ; la valeur par défaut est celle attribuée au paramètre lorsque aucune valeur d'exécution n'est renvoyée.

1

Entrez un nom de paramètre dans la zone Nom.

2

Dans la zone Paramètre par défaut, saisissez la valeur par défaut que vous souhaitez attribuer au paramètre.

3

Tapez une valeur d'exécution dans la zone Valeur d'exécution puis sur OK.

Création de requêtes SQL à l'aide de l'arborescence Eléments de base de données

Au lieu de saisir manuellement des instructions SQL dans la zone SQL, vous pouvez utiliser l'interface pointer-cliquer de l'arborescence Eléments de base de données pour créer des requêtes complexes SQL. L'arborescence Eléments de base de données permet de sélectionner des objets de base de données et de les lier au moyen des instructions SQL SELECT,

WHERE et ORDER BY. Après avoir créé une requête SQL, vous pouvez définir des variables dans la section Variables de la boîte de dialogue.

DREAMWEAVER CS3


529

Les deux exemples suivants présentent deux instructions SQL et décrivent les étapes de création de ces instructions à l'aide de l'arborescence Eléments de base de données de la boîte de dialogue Jeu d'enregistrements avancée.

Exemple : Sélection d'une table

Dans cet exemple, la requête sélectionne l'intégralité de la table Employees. L'instruction SQL définissant la requête se présente de la façon suivante :

SELECT * FROM Employees

Pour créer cette requête, procédez comme suit.

1

Développez la branche Tables pour afficher toutes les tables de la base de données sélectionnée.

2

Sélectionnez la table Employees.

3

Cliquez sur le bouton Select.

4

Cliquez sur OK pour ajouter le jeu d'enregistrements au panneau Liaisons.

Exemple : Sélection de lignes spécifiques d'une table et classement des résultats

Dans l'exemple suivant, la requête sélectionne deux lignes de la table Employees, puis sélectionne le type de tâche (job) à l'aide d'une variable que vous devez définir. Les résultats sont ensuite classés par nom d'employé.

SELECT emplNo, emplName

FROM Employees

WHERE emplJob = 'varJob'

ORDER BY emplName

1

Développez la branche Tables pour afficher toutes les tables de la base de données sélectionnée, puis développez la table

Employees

pour afficher les lignes individuelles de la table.

2

Générez l'instruction SQL en procédant de la façon suivante :

•

Sélectionnez emplNo

et cliquez sur le bouton Select.

•

Sélectionnez emplName

et cliquez sur bouton Select.

•

Sélectionnez emplJob

et cliquez sur le bouton Where.

•

Sélectionnez emplName

et cliquez sur le bouton Order By.

3

Placez le point d'insertion après

WHERE emplJob

dans la zone de texte SQL et tapez

='varJob'

(y compris le signe égal).

4

Définissez la variable

'varJob'

en cliquant sur le bouton Plus (+) de la zone Variables et en saisissant les valeurs suivantes dans les colonnes Nom, Valeur par défaut et Valeur d'exécution : varJob

,

CLERK

,

Request("job")

.

5

Cliquez sur OK pour ajouter le jeu d'enregistrements au panneau Liaisons.

Définition de paramètres d'URL

Les paramètres d'URL permettent de stocker les informations saisies par les utilisateurs. Avant de commencer, vérifiez que vous avez transmis un paramètre de formulaire ou d'URL au serveur. Après avoir défini la variable d'URL, vous pouvez utiliser sa valeur dans la page sélectionnée.

1

Dans la fenêtre de document, ouvrez la page devant utiliser la variable.

2


3

Dans le panneau Liaisons, cliquez sur le bouton Plus (+) et choisissez l'une des options suivantes dans le menu déroulant :

T ypes de document

ASP

Elément du menu du panneau Liaisons permettant de définir une variable d'URL

V ariab l e de demande > R equest.

Q uery S tring

DREAMWEAVER CS3


530


C o l d F usion

JSP

P H P

Elément du menu du panneau Liaisons permettant de définir une variable d'URL

V ariab l e d ' U R L

V ariab l e de demande

V ariab l e d ' U R L

4

Dans la boîte de dialogue Variable d'URL, tapez le nom de la variable d'URL dans la zone puis cliquez sur OK.

En général, le nom de la variable d'URL correspond au nom du champ du formulaire HTML ou de l'objet utilisé pour obtenir sa valeur.

5

La variable d'URL s'affiche dans le panneau Liaisons.

Voir aussi




« Variables de serveur ColdFusion » à la page 519


Définition de paramètres de formulaire

Les paramètres de formulaire permettent de stocker les informations récupérées dans la requête HTTP d'une page Web. Si vous créez un formulaire utilisant la méthode

POST

, les données envoyées par le formulaire sont transmises au serveur.

Avant de commencer, vérifiez que vous avez transmis un paramètre de formulaire au serveur. Après avoir défini le paramètre de formulaire comme source de contenu, vous pouvez l'utiliser dans une page.

1

Dans la fenêtre de document, ouvrez la page devant utiliser la variable.

2


3

Dans le panneau Liaisons, cliquez sur le bouton Plus (+) et choisissez l'une des options suivantes dans le menu déroulant :


ASP

C o l d

F usion

JSP

P

H

P

Elément du menu du panneau Liaisons permettant de définir une variable de formulaire


> R equest.

F orm

V ariab l e de formu l aire


V ariab l e de formu l aire

4

Dans la boîte de dialogue Variable de formulaire, tapez le nom de la variable de formulaire et cliquez sur OK. En général, le nom du paramètre de formulaire correspond au nom du champ du formulaire HTML ou de l'objet utilisé pour obtenir sa valeur.

Le paramètre de formulaire s'affiche dans le panneau Liaisons.

DREAMWEAVER CS3


531

Voir aussi

« A propos des sources de contenu dynamique » à la page 517



Définition de variables de session

Les variables de session permettent de mémoriser et d'afficher des informations conservées pendant toute la durée de la visite de l'utilisateur (ou session). Le serveur crée un objet de session différent pour chaque utilisateur et le conserve pendant une période définie ou jusqu'à ce qu'il soit explicitement clos.

Avant de définir des variables de session pour une page, vous devez les créer dans le code source. Après avoir créé une variable de session dans le code source de l'application Web, vous pouvez utiliser Dreamweaver pour récupérer sa valeur et l'utiliser dans une page Web.

1

Créez une variable de session dans le code source et attribuez-lui une valeur.

Dans l'exemple suivant de ColdFusion, une instance de session appelée username

est créée, à laquelle est attribuée la valeur

Cornelius

:

<CFSET session.username = Cornelius>

2


3

Cliquez sur le bouton Plus (+) et choisissez Variable d'application dans le menu déroulant.

4

Tapez le nom de la variable que vous avez définie dans le code source de l'application, et cliquez sur OK.

Voir aussi

« Collecte de données envoyées par les utilisateurs » à la page 506

« Accès à des données stockées dans des variables de session » à la page 509

« Fonctionnement des variables de session » à la page 509

« Collecte, stockage et récupération d'informations dans des variables de session » à la page 509

DREAMWEAVER CS3


532

Définition de variables d'application dans ASP et ColdFusion

Dans ASP et ColdFusion, les variables d'application permettent de mémoriser et d'afficher des informations conservées pendant toute la durée d'utilisation de l'application, quel que soit l'utilisateur. Après avoir défini une variable d'application, vous pouvez utiliser sa valeur dans une page.

Remarque :

Il n'existe pas d'objets de variable d'application dans JSP ou PHP.

1

Ouvrez un type de document dynamique dans la fenêtre de document.

2


3


4

Tapez le nom de la variable que vous avez définie dans le code source de l'application, et cliquez sur OK.

La variable d'application s'affiche dans le panneau Liaisons, sous l'icône Application.

Voir aussi

« A propos de l'ajout de contenu dynamique » à la page 537


Utilisation d'une variable comme source de données pour un jeu d'enregistrements de

ColdFusion

Lorsque vous définissez un jeu d'enregistrements pour une page dans le panneau Liaisons, Dreamweaver entre le nom de la source de données ColdFusion dans la balise cfquery

sur la page. Pour plus de flexibilité, vous pouvez stocker un nom de source de données dans une variable et utiliser cette dernière dans la balise cfquery

. Dreamweaver permet de définir visuellement une variable de ce type dans vos jeux d'enregistrements.

1

Assurez-vous qu'une page ColdFusion est activée dans la fenêtre de document.

2

Dans le panneau Liaisons, cliquez sur le bouton Plus (+) et choisissez Variable du nom de source de données dans le menu déroulant.

La boîte de dialogue Variable du nom de source de données s'affiche.

3

Définissez une variable et cliquez sur OK.

4

Lorsque vous définissez le jeu d'enregistrements, sélectionnez la variable comme Source de données du jeu d'enregistrements.

Dans la boîte de dialogue Jeu d'enregistrements, la variable s'affiche dans le menu déroulant Source de données ainsi que les sources de données ColdFusion sur le serveur.

5

Complétez les options de la boîte de dialogue Jeu d'enregistrements, puis cliquez sur OK.

6

Initialisez la variable.

DREAMWEAVER CS3


533

Celle-ci n'est pas initialisée automatiquement par Dreamweaver afin que vous puissiez le faire vous-même à votre convenance. Vous pouvez initialiser la variable dans le code de la page (avant la balise cfquery

), dans un fichier inclus ou encore dans un autre fichier, comme variable d'application ou de session.

Définition de variables de serveur

Vous définissez des variables de serveur comme sources de contenu dynamique pouvant être utilisées dans une application

Web. Les variables de serveur varient d'un type de document à l'autre et comprennent notamment les variables de formulaire, les variables d'URL, les variables de session et les variables d'application.

Les variables de serveur sont accessibles à tous les clients qui accèdent au serveur et à toutes les applications exécutées sur le serveur. Les variables de serveur sont conservées jusqu'à l'arrêt du serveur.

Voir aussi



« Paramètres de formulaire HTML » à la page 506

« Variables de serveur ColdFusion » à la page 519

Définition de variables de serveur ColdFusion

1

Ouvrez le panneau Liaisons (Fenêtre > Liaisons). Dans la boîte de dialogue Variable de serveur, tapez le nom de la variable de serveur et cliquez sur OK.

2

Cliquez sur le bouton Plus (+) et choisissez la variable de serveur dans le menu déroulant.

3

Saisissez le nom de l’objet et cliquez sur

Le tableau ci-dessous répertorie les variables de serveur de ColdFusion intégrées :

Variable Description

S erver.

C o l d

F usion.

P roductName Nom de produit de

C o l d

F usion.

S erver.

C o l d F usion.

P roduct V ersi on

Num é ro de version de C o l d F usion.

S erver.

C o l d F usion.

P roductLeve l E dition de C o l d F usion (é dition entreprise ou professionne ll e ) .

S erver.

C o l d

F usion.

S eria l

Number Num

é ro de s

é rie de

l a version de

C o l d

F usion insta llé e.

S erver.O

S .Name

S n erver.O

S .

A dditiona l Informatio

Nom du syst è me d ' e x p l oitation e xé cut é sur l e serveur (W indo w s XP, W indo w s

2000,

Linu x)

Informations supp lé mentaires sur l e syst è me d ' e x p l oitation insta llé (S ervice

P ac k s

, mises

à j our

)

.

S erver.O

S .

V ersion

S erver.O

S

.

B ui l dNumber

V ersion du syst è me d ' e x p l oitation insta llé .

Num

é ro de compi l ation du syst

è me d

' e x p l oitation insta llé

.

Définition d'une variable locale ColdFusion

Les variables locales sont créées au moyen de la balise

CFSET

ou

CFPARAM

dans une page ColdFusion. La variable locale définie s'affiche dans le panneau Liaisons.

❖

Dans la boîte de dialogue Variable locale, tapez le nom de la variable locale et cliquez sur OK.

Définition de variables de serveur ASP

Vous pouvez définir les variables de serveur ASP suivantes comme sources de contenu dynamique :

Request.Cookie

,

Request.QueryString

,

Request.Form

,

Request.ServerVariables

et

Request.ClientCertificates

.

1

Ouvrez le panneau Liaisons (Fenêtre > Liaisons).

DREAMWEAVER CS3


534

2


3

Dans la boîte de dialogue Variable de demande,sélectionnez l'un des ensembles de demandes dans le menu déroulant Type.

L'ensemble QueryString

Récupère des informations annexées à l'URL de la page émettrice, par exemple lorsque la page comprend un formulaire HTML utilisant la méthode

GET

. La chaîne de requête est composée d'une ou de plusieurs paires nom/valeur (par exemple, last=Smith

, first=Winston

) annexées à l'URL avec un point d'interrogation (

?

). Si la chaîne de requête compte plusieurs paires nom/valeur, elles sont combinées avec des esperluettes (

&

).

L'ensemble Form

Récupère les informations de formulaire incluses dans le corps de la demande HTTP par un formulaire

HTML utilisant la méthode

POST

.

L'ensemble ServerVariables

Récupère les valeurs de variables d'environnement prédéfinies. Cet ensemble contient une longue liste de variables, notamment

CONTENT_LENGTH

(longueur du contenu envoyé dans la demande HTTP, qui permet de savoir si un formulaire est vierge) et

HTTP_USER_AGENT

(fournit des informations sur le navigateur de l'utilisateur).

Par exemple,

Request.ServerVariables("HTTP_USER_AGENT")

contient des informations sur le navigateur expéditeur, comme

Mozilla/4.07 [en] (WinNT; I)

, qui indique un navigateur Netscape Navigator 4.07.

La liste complète des variables d'environnement de serveur ASP figure dans la documentation en ligne fournie avec

Microsoft Personal Web Server (PWS) ou Internet Information Server (IIS).

L'ensemble Cookies

Récupère les valeurs des cookies envoyés dans une demande HTTP. Par exemple, supposez que la page lise un cookie appelé « readMe » sur l’ordinateur de l'utilisateur. Sur le serveur, les valeurs du cookie sont enregistrées dans la variable

Request.Cookies("readMe")

.

L'ensemble ClientCertificate

Récupère les zones de certification de la demande HTTP envoyée par le navigateur. Les zones de certification sont spécifiées dans la norme X.509.

4

Indiquez à quelle variable de l'ensemble vous souhaitez accéder, et cliquez sur OK.

Par exemple, si vous souhaitez accéder aux données contenues dans la

Request.ServerVariables("HTTP_USER_AGENT")

, tapez l'argument

HTTP_USER_AGENT

. Si vous souhaitez accéder aux informations de la variable

Request.Form("lastname")

, tapez l'argument lastname

.

La variable de demande s'affiche dans le panneau Liaisons.

Définition de variables de serveur PHP et JSP

Définissez des variables de serveur comme source de contenu dynamique pour les types de document PHP et les pages JSP.

Les variables de serveur PHP et JSP s'affichent dans le panneau Liaisons.

1


2

Cliquez sur le bouton Plus (+) et choisissez la variable de serveur dans le menu déroulant.

La variable de demande JSP correspond généralement à un paramètre de formulaire ou d'URL. Si le paramètre provient d'un formulaire HTML, le nom de la variable correspond au nom du champ du formulaire ou de l'objet utilisé pour obtenir sa valeur.

3

Dans la boîte de dialogue Variable de demande, tapez le nom de la variable et cliquez sur OK.

Définition d'une variable client ColdFusion

Définissez une variable client ColdFusion comme source de contenu dynamique pour une page. Les variables de client

ColdFusion que vous venez de définir s'affichent dans le panneau Liaisons.

❖

Dans la boîte de dialogue Variable client, tapez le nom de la variable client et cliquez sur OK.

Par exemple, pour accéder aux données contenues dans la

Client.LastVisit

, tapez

LastVisit

.

Les variables client sont des variables ajoutées au code pour associer des données à un client spécifique. Elles conservent l'état de l'application pendant que l'utilisateur passe d'une page à l'autre et d'une session à l'autre dans l'application.

Il existe deux types de variables serveur : les variables intégrées et les variables définies par l'utilisateur. Le tableau ci-dessous répertorie les variables client ColdFusion intégrées :

DREAMWEAVER CS3


535

Variable

Cl ient.

CF

I

D

Cl ient.

CFT O KE N

Cl ient.U

R L T o k en

Cl ient.Last

V isit

Cl ient.Hit

C ount

Cl ient.

T ime

C reated

Description

Identifiant incr

é mentie l attribu

é à chacun des c l ients se connectant au serveur.

Num é ro g é n é r é a lé atoirement et permettant d ' identifier un c l ient sp é cifique de fa

ç on univoque.

C ombinaison de CF I D et CFT O KE N devant ê tre transmise de mod èl e en mod èl e l orsque

l es coo k ies ne sont pas uti l is

é s.

E nregistre l a date de l a derni è re visite effectu é e par un c l ient.

Nombre de demandes de pages

l i

é es

à un m

ê me c l ient

( obtenu

à l' aide de

CF

I

D et CFT O KE N ) .

E nregistre

l' heure de

l a premi

è re cr

é ation de

CF

I

D et

CFT

O

KE

N pour un c l ient sp é cifique.

Définition d'une variable cookie ColdFusion

Les variables cookie sont créées au niveau du code et permettent d'accéder aux informations contenues dans les cookies transmis au serveur par un navigateur. La variable cookie définie s'affiche dans le panneau Liaisons.

❖

Dans la boîte de dialogue Variable cookie, tapez le nom de la variable client et cliquez sur OK.

Définition d'une variable CGI ColdFusion

La variable CGI définie s'affiche dans le panneau Liaisons.

❖

Dans la boîte de dialogue Variable CGI, tapez le nom de la variable et cliquez sur OK.

Par exemple, si vous souhaitez accéder aux données contenues dans la

CGI.HTTP_REFERER

, saisissez

HTTP_REFERER

.

Le tableau ci-dessous répertorie les variables CGI de ColdFusion les plus fréquemment créées sur le serveur :

Variable

SERVER_S

O

FTWARE

SERVER_

N

AME

GATEWAY_

IN

TERFACE

SERVER_PR O T O C OL

SERVER_P O RT

REQ

U

EST_MET

HO

D

PAT

H

_

IN

F

O

PAT H _TRA N S L ATED

SCR I PT_ N AME

Q

U

ERY_STR

IN

G

REM

O

TE_

HO

ST

REM

O

TE_ADDR

A U T H _TYPE

Description

Nom et version du

l ogicie l du serveur d

' informations r

é pondant

à l a demande

( et e xé cutant l a passere ll e ) .

F ormat : nom / version.

Nom d

' h

ô te

, a l ias

D

N

S ou adresse I

P du serveur te l qu

' i l/ e ll e se pr

é sente dans

l es U

R

L d ' appe l .

Ré vision de

l a sp

é cification

CG

I app l iqu

é e par

l e serveur.

F ormat

: CG

I

/ r

é vision.

Nom et r é vision du protoco l e d ' informations par l eque l l a demande a é t é transmise.

F ormat

: protoco l e

/ r

é vision.

Num é ro du port auque l l a demande a é t é envoy é e.

Mé thode uti l is

é e pour

l' e xé cution de

l a demande.

D ans

l e cas de H

TTP, i l s

' agit de

G et

,

Head , P ost , etc.

Informations de chemin comp lé mentaires

, te ll es qu

' e ll es sont fournies par

l e c l ient.

On acc è de au x scripts en uti l isant l eur nom de chemin virtue l suivi des informations comp lé mentaires.

C e ll es

ci sont envoy

é es en tant que

PAT

H

_

IN

F

O.

Le serveur fournit une version traduite de PAT H _ IN F O , r é su l tat de l a conversion du chemin virtue l en chemin physique.

C hemin virtue l vers l e script en cours d ' e xé cution.

V ariab l e uti l is é e pour l es U R L d ' appe l .

Informations de requ

ê te qui suivent

l e point d

' interrogation

(?) dans

l'

U

R

L r

é f

é ren

ç ant

l e script.

Nom de

l' h

ô te

à l' origine de

l a demande.

S i

l e serveur ne dispose pas de cette information

, i l d é finit REM O TE_ADDR mais pas REM O TE_ HO ST .

A dresse I

P de

l' h

ô te distant

à l' origine de

l a demande.

S i l e serveur prend en charge l' authentification de l' uti l isateur et que l e script est prot é g é, cette variab l e correspond

à l a m

é thode d

' authentification sp

é cifique au protoco l e uti l is

é e pour v é rifier l' identit é de l' uti l isateur.

DREAMWEAVER CS3


536

Variable

REM

O

TE_

U

SER A

U

T

H

_

U

SER

REM O TE_ I DE N T

C

ON

TE

N

T_TYPE

Description

S i

l e serveur prend en charge

l' authentification de

l' uti l isateur et que

l e script est prot

é g

é, cette variab l e correspond au nom saisi par l' uti l isateur l ors de l' authentification ( disponib l e

é ga l ement sous

l a forme

A

U

T

H

_

U

SER)

.

S i l e serveur H TTP prend en charge l' identification RFC 931, cette variab l e re ç oit comme va l eur

l e nom de

l' uti l isateur distant r

é cup

é r

é du serveur.

Uti l ise z cette variab l e uniquement pour l a conne x ion.

D ans

l e cas de requ

ê tes assorties d

' informations

, te ll es que H

TTP P

O

ST et

P

U

T, cette variab l e correspond au type de contenu des donn é es.

Longueur du contenu

, te l qu

' i l a

é t

é fourni par

l e c l ient.

C

ON

TE

N

T_

L

E

N

GT

H

Le tableau ci-dessous répertorie les variables CGI les plus fréquemment créées par le navigateur et transmises au serveur :

Variable

H

TTP_REFERER

H

TTP_

U

SER_AGE

N

T

H

TTP_

I

F_M

O

D

I

F

I

ED_S

IN

CE

Description

D ocument de r

é f

é rence.

I l s

' agit du document associ

é au x donn

é es de formu l aire ou qui l es envoie.

Navigateur uti l is

é par

l e c l ient pour envoyer

l a demande.

F ormat

: l ogicie l/ version bib l ioth è que / version.

D ate de

l a derni

è re modification de

l a page.

C ette variab l e est envoy

é e suivant

l a configuration du navigateur , g é n é ra l ement en r é ponse au serveur ayant envoy é l' en t ê te

L

AST_M

O

D

I

F

I

ED

H

TTP

.

P eut

ê tre uti l is

é e pour tirer parti des possibi l it

é s de mise en m é moire cache au niveau du navigateur.

Mise en mémoire cache de sources de contenu

Vous pouvez stocker des sources de contenu dynamique dans une Design Note. Cette opération vous permet de travailler sur un site même lorsque vous n'avez pas accès à la base de données ou au serveur d'application contenant les sources de contenu dynamique. La mise en mémoire cache permet également d'accélérer le processus de développement puisqu'elle

évite de se connecter en continu à la base de données et au serveur d'application via le réseau.

❖

Cliquez sur la touche fléchée dans le coin supérieur droit du panneau Liaisons et choisissez Cache dans le menu déroulant.

Si vous modifiez l'une de vos sources de contenu, vous pouvez actualiser le cache en cliquant sur le bouton Actualiser (icône représentant une flèche en forme de cercle), dans le coin supérieur droit du panneau Liaisons Agrandissez l'affichage si ce bouton n'apparaît pas.

Modification ou suppression de sources de contenu

Vous pouvez modifier ou supprimer n'importe quelle source de contenu dynamique, autrement dit n'importe quelle source de contenu figurant dans le panneau Liaisons.

La modification ou la suppression d'une source de contenu dans le panneau Liaisons ne change ni ne supprime les instances de cette source sur la page. Cela affecte uniquement son rôle de source de contenu pour la page.

Modification d'une source de contenu dans le panneau Liaisons

1

Dans le panneau Liaisons (Fenêtre > Liaisons), double-cliquez sur le nom de la source de contenu à modifier.

2

Procédez aux modifications dans la boîte de dialogue qui s'affiche.

3


Suppression d'une source de contenu dans le panneau Liaisons

1

Sélectionnez la source souhaitée dans le panneau Liaisons (Fenêtre > Liaisons).

2


DREAMWEAVER CS3


537

Copie d'un jeu d'enregistrements d'une page vers une autre

Vous pouvez copier un jeu d'enregistrements d'une page à une autre dans un site défini.

1

Sélectionnez le jeu d'enregistrements dans le panneau Liaisons ou dans le panneau Comportements de serveur.

2

Cliquez sur le jeu d'enregistrements avec le bouton droit de la souris et choisissez Copier dans le menu déroulant.

3

Ouvrez la page dans laquelle vous souhaitez coller le jeu d'enregistrements.

4

Cliquez avec le bouton droit de la souris dans le panneau Liaisons ou sur la barre d'outils Comportements de serveur, et choisissez Coller dans le menu déroulant.

Voir aussi

« A propos des sources de contenu dynamique » à la page 517

« Modification ou suppression de sources de contenu » à la page 536

Ajout de contenu dynamique dans les pages

A propos de l'ajout de contenu dynamique

Après avoir défini une ou plusieurs sources de contenu dynamique, vous pouvez les utiliser pour ajouter un contenu dynamique à la page. Les sources de contenu peuvent être une colonne dans un jeu d'enregistrements, une valeur envoyée par un formulaire HTML, la valeur d'un objet de serveur, etc.

Dans Dreamweaver, vous pouvez placer du contenu dynamique quasiment n'importe où dans une page Web ou dans son code source HTML. Il est possible de placer le contenu dynamique au niveau du point d'insertion, de remplacer une chaîne de texte ou d'insérer le contenu en tant qu'attributHTML. Un contenu dynamique peut, par exemple, définir l'attribut src d'une image ou l'attribut value

d'un champ de formulaire.

Vous pouvez ajouter du contenu dynamique à une page en sélectionnant une source de contenu dans le panneau Liaisons.

Dreamweaver insère alors dans le code source de la page un script côté serveur indiquant au serveur de transférer les données de la source de contenu sélectionnée vers le code source HTML de la page lorsqu'un navigateur appelle la page.

Il existe souvent différentes méthodes pour rendre dynamique un élément d'une page. Dans le cas d'une image, par exemple, vous pouvez utiliser le panneau Liaisons, l'inspecteur Propriétés ou la commande Image du menu Insertion.

Par défaut, une page HTML ne peut afficher qu'un enregistrement à la fois. Pour afficher les autres enregistrements du jeu, ajoutez un lien afin d'explorer les enregistrements un à un ou créez une région répétée pour afficher plusieurs enregistrements sur une seule page.

Voir aussi


« Application d'éléments typographiques et de mise en forme de page à des données dynamiques » à la page 543


A propos du texte dynamique

Le texte dynamique adopte la mise en forme du texte initial ou du point d'insertion. Le contenu dynamique conserve ainsi le style de feuille de style en cascade (CSS, Cascading Style Sheet) du texte sélectionné qu'il remplace. Vous pouvez

également ajouter ou modifier le format du texte d'un contenu dynamique à l'aide des outils de mise en forme de texte de

Dreamweaver

DREAMWEAVER CS3


538

Vous pouvez également appliquer un format de données à un texte dynamique. Par exemple, si vos données sont des dates, vous pouvez déterminer un format spécifique tel que 04/17/00 pour les visiteurs américains ou 17/04/00 pour les visiteurs français

Création de texte dynamique

Vous pouvez substituer un texte dynamique à un texte existant ou le placer à un point d'insertion donné de la page.

Voir aussi


Ajout de texte dynamique

1

En mode Création, sélectionnez du texte sur la page ou cliquez à l'endroit où insérer le texte dynamique.

2

Sélectionnez une source de contenu dans le panneau Liaisons (Fenêtre > Liaisons). Si vous sélectionnez un jeu d'enregistrements, indiquez la colonne de votre choix dans le jeu d'enregistrements.

Cette source doit contenir du texte brut (texte ASCII), ce qui inclut HTML. Si aucune source de contenu n'apparaît dans la liste ou si aucune des sources disponibles ne correspond à vos besoins, cliquez sur le bouton Plus (+) pour définir une nouvelle source de contenu

3

(Facultatif) Sélectionnez un format de données pour le texte.

4

Cliquez sur Insertion ou faites glisser la source de contenu sur la page.

Si vous travaillez en mode Création et que Live Data est activé (Affichage > Live Data), le contenu dynamique s'affiche sur la page.

Si Live Data est désactivé, le contenu est remplacé par un espace réservé (tout texte sélectionné dans la page est remplacé par l'espace réservé). La syntaxe de l'espace réservé pour le contenu d'un jeu d'enregistrements est

{RecordsetName.ColumnName}

, où

Recordset

est le nom du jeu d'enregistrements et

ColumnName

le nom de la colonne choisie dans ce jeu.

Il arrive que la longueur de l'espace réservé d'un texte dynamique déforme la mise en page dans la fenêtre de document.

Dans ce cas, utilisez des accolades vides pour représenter les espaces réservés, comme l'explique la section suivante.

Affichage d'espaces réservés pour le texte dynamique

1

Choisissez Edition > Préférences > Eléments invisibles (Windows) ou Dreamweaver > Préférences > Eléments invisibles

(Macintosh).

2

Dans le menu déroulant Afficher le texte dynamique sous, choisissez { } et cliquez sur OK.

Création d'images dynamiques

Vous pouvez ajouter des images dynamiques à votre page. Supposons que vous conceviez une page qui affiche les articles d'une vente de charité. Chaque page doit contenir un texte descriptif, ainsi qu'une photo de l'article. La mise en forme générale de la page doit rester la même pour chaque article, mais la photo (et le texte) peuvent changer.

1

Ouvrez la page en mode Création (Affichage > Création) et placez le point d'insertion à l'endroit où l'image doit apparaître sur la page.

2


La boîte de dialogue Sélectionnez la source de l'image s'affiche.

3

Cliquez sur l'option Sources de données (Windows) ou sur le bouton Source de données (Macintosh).

La liste des sources de contenu s'affiche.

4

Sélectionnez une source de contenu dans la liste, puis cliquez sur OK.

DREAMWEAVER CS3


539

La source de données doit être un jeu d'enregistrements qui contient les chemins d'accès de vos fichiers d'image. En fonction de la structure de fichiers de votre site, ces chemins peuvent être absolus, relatifs au document ou relatifs à la racine.

Remarque :

A l'heure actuelle, Dreamweaver ne prend pas en charge les images binaires stockées dans une base de données.

Si aucun jeu d'enregistrements n'apparaît dans la liste ou si aucun des jeux disponibles ne correspond à vos besoins, définissez un nouveau jeu.

Voir aussi


Création d'attributs H

T

ML dynamiques

Vous pouvez modifier l'apparence d'une page de manière dynamique en liant des attributs HTML aux données. Par exemple, modifiez l'image d'arrière-plan d'un tableau en liant l'attribut background

de ce tableau au champ d'un jeu d'enregistrements.

Vous pouvez lier des attributs HTML à l'aide du panneau Liaisons ou de l'inspecteur Propriétés.

Création d'attributs H

T

ML dynamiques avec le panneau Liaisons

1


2

Assurez-vous qu'il contient la source de données à utiliser.

Cette source de contenu doit contenir les données appropriées pour l'attribut HTML à lier. Si aucune source de contenu n'apparaît dans la liste ou si aucune des sources disponibles ne correspond à vos besoins, cliquez sur le bouton Plus (+) pour définir une nouvelle source de données.

3

En mode Création, sélectionnez un objet HTML.

Par exemple, pour sélectionner un tableau HTML, cliquez dedans, puis cliquez sur la balise

<table>

du sélecteur de balises qui figure en bas à gauche dans la fenêtre de document.

4

Dans la liste du panneau Liaisons, sélectionnez une source de contenu.

5

Dans le champ Lier à, sélectionnez un attribut HTML dans le menu contextuel.

6

Cliquez sur Lier.

Lors de la prochaine exécution de la page sur le serveur d'applications, la valeur de la source de données sera affectée à l'attribut HTML.

Ajout d'attributs H

T

ML dynamiques avec l'inspecteur Propriétés

1

En mode Création, sélectionnez un objet HTML, puis ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés).

Par exemple, pour sélectionner un tableau HTML, cliquez dedans, puis cliquez sur la balise

<table>

du sélecteur de balises qui figure en bas à gauche dans la fenêtre de document.

2

La manière dont il faut lier une source de contenu dynamique à l'attribut HTML dépend de l'endroit où ce dernier est situé.

• Si une icône de dossier est visible à côté de l'attribut que vous souhaitez lier dans l'inspecteur Propriétés, cliquez sur l'icône du dossier afin d'ouvrir une boîte de dialogue de sélection de fichier, puis activez l'option Sources de données pour afficher la liste des sources de données.

• Si aucune icône de dossier n'apparaît à côté de l'attribut que vous souhaitez lier, cliquez sur l'onglet Liste (onglet du bas)

à gauche de l'inspecteur.

La liste de l'inspecteur Propriétés s'affiche.

• Si l'attribut à lier n'apparaît pas dans ce mode, cliquez sur le bouton Plus (+), puis tapez le nom de l'attribut ou cliquez sur le petit bouton fléché et sélectionnez l'attribut dans le menu déroulant.

3

Pour rendre la valeur de l'attribut dynamique, cliquez sur l'attribut, puis sur l'icône représentant un éclair ou sur l'icône de dossier située à la fin de la ligne de l'attribut.

DREAMWEAVER CS3


540

Si vous cliquez sur l'icône représentant un éclair, une liste de sources de données s'affiche.

Si vous avez cliqué sur l'icône de dossier, une boîte de dialogue affiche une sélection de fichiers. Cliquez sur l'option Sources de données pour afficher la liste des sources de contenu.

4

Sélectionnez une source de contenu dans la liste et cliquez sur OK.

Cette source de contenu doit comprendre les données appropriées pour l'attribut HTML à lier. Si aucune source de contenu n'apparaît dans la liste ou si aucune des sources disponibles ne correspond à vos besoins, définissez une nouvelle source.

Lors de la prochaine exécution de la page sur le serveur d'applications, la valeur de la source de données sera affectée à l'attribut HTML.

Création de paramètres d'objet (ActiveX, Flash, etc.) dynamiques

Vous pouvez rendre dynamiques les paramètres des plug-ins et des applets Java, ainsi que les paramètres des objets ActiveX,

Flash, Shockwave, Director et Generator.

Assurez-vous au préalable que les champs de votre jeu d'enregistrements contiennent des données appropriées pour les paramètres d'objet que vous voulez lier.

1

En mode Création, sélectionnez un objet sur la page et ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés).

2

Cliquez sur le bouton Paramètres.

3

Si votre paramètre ne s'affiche pas dans la liste, cliquez sur le bouton Plus (+), puis saisissez son nom dans la colonne

Paramètre.

4

Pour déterminer une valeur dynamique, cliquez sur la colonne Valeur du paramètre, puis sur l'icône représentant un

éclair.

La liste des sources de données s'affiche.

5

Sélectionnez une source de données dans la liste, puis cliquez sur OK.

Cette source doit contenir des données appropriées pour le paramètre d'objet que vous voulez lier. Si aucune source de données n'apparaît dans la liste ou si aucune des sources disponibles ne correspond à vos besoins, définissez une nouvelle source.

Voir aussi


Modification d'un contenu dynamique

A propos du contenu dynamique

Vous pouvez changer le contenu dynamique de votre page en modifiant le comportement de serveur qui fournit ce contenu.

Vous pouvez, par exemple, modifier le comportement de serveur d'un jeu d'enregistrements pour fournir plus d'enregistrements à votre page.

Le contenu dynamique de la page est répertorié dans le panneau Comportements de serveur. Si vous ajoutez, par exemple, un jeu d'enregistrements à votre page, le panneau Comportements de serveur l'affiche sous forme de liste :

Recordset(

myRecordset

)

Si vous ajoutez un autre jeu d'enregistrements à votre page, le panneau Comportements de serveur les affiche tous deux sous forme de liste, comme suit :

Recordset(

mySecondRecordset

)Recordset(

myRecordset

)

DREAMWEAVER CS3


541

Modification de contenu dynamique

1

Ouvrez le panneau Comportements de serveur (Fenêtre > Comportements de serveur).

2

Cliquez sur le bouton Plus (+) pour afficher les comportements de serveur, puis double-cliquez sur le comportement de serveur dans le panneau.

La boîte de dialogue dans laquelle vous avez défini la source de données d'origine s'ouvre.

3

Effectuez vos modifications dans cette boîte de dialogue, puis cliquez sur OK.

Suppression de contenu dynamique

❖

Après avoir ajouté un contenu dynamique à une page, vous pouvez le supprimer de l'une des façons suivantes :

•

Sélectionnez le contenu dynamique de la page et appuyez sur Suppr.

•

Sélectionnez le contenu dynamique dans le panneau Comportements de serveur et cliquez sur le bouton moins(-).

Remarque :

Cette opération supprime de la page le script côté serveur qui récupère le contenu dynamique de la base de données, mais ne supprime pas les données dans la base.

T

est de contenu dynamique

Vous pouvez afficher un aperçu d'un contenu dynamique et de le modifier à l'aide de la fenêtre Live Data.

Remarque :

Les liens ne fonctionnent pas dans la fenêtre Live Data. Pour les tester, utilisez la fonction Aperçu Dreamweaver dans le navigateur.

Pendant que le contenu dynamique est affiché, vous pouvez effectuer les opérations suivantes :

• améliorer la présentation de la page avec les outils de conception ;

• ajouter, modifier ou effacer un contenu dynamique ;

• ajouter, modifier ou effacer des comportements de serveur.

Pour obtenir le résultat souhaité, Dreamweaver exécute la page dynamique sur le serveur avant de l'afficher dans la fenêtre

Live Data. Chaque fois que vous basculez vers la fenêtre Live Data, une copie temporaire du document ouvert est transférée au serveur d'application pour traitement. La page obtenue est ensuite renvoyée et s'affiche dans la fenêtre Live Data, et la copie temporaire est effacée du serveur.

Vous pouvez basculer entre la fenêtre du document et la fenêtre Live Data (Affichage > Live Data). Si une page requiert des données de l'utilisateur (telles que le numéro d'ID d'un enregistrement sélectionné dans une page principale), vous pouvez communiquer vous-même ces données à l'aide de la boîte de dialogue Paramètres Live Data.

1

Effectuez les modifications nécessaires dans la page.

2

Si la page doit recevoir des paramètres d'URL provenant d'un formulaire HTML utilisant la méthode GET, saisissez les paires nom/valeur (name/value) dans la zone de la barre d'outils, puis cliquez sur le bouton Actualiser (icône de flèche en forme de cercle).

Entrez les données de test dans le format suivant : nom=valeur; où nom est le nom de paramètre d'URL attendu par votre page et valeur la valeur de ce paramètre.

Vous pouvez également définir les paires nom-valeur dans la boîte de dialogue Paramètres Live Data (Affichage >

Paramètres Live Data) et les enregistrer avec la page.

3

Cliquez sur le bouton Actualiser pour actualiser votre page.

Voir aussi

« Fourniture des paramètres attendus à la page » à la page 554


DREAMWEAVER CS3


542

« Paramètres de formulaire HTML » à la page 506


« Fonctionnement des variables de session » à la page 509

Autorisation de la modification de contenu dynamique par les utilisateurs d'Adobe

Contribute

Lorsqu'un utilisateur de Contribute modifie une page comportant un contenu dynamique ou des éléments invisibles (tels que des scripts ou des commentaires), Contribute affiche le contenu dynamique et les éléments invisibles sous forme de marqueurs jaunes. Par défaut, les utilisateurs de Contribute ne peuvent ni sélectionner ni supprimer ces marqueurs.

Pour que les utilisateurs de Contribute puissent sélectionner et supprimer un contenu dynamique ou d'autres éléments invisibles sur une page, vous pouvez modifier les paramètres du groupe d'autorisations en conséquence. Normalement, les utilisateurs de Contribute ne peuvent en aucun cas modifier un contenu dynamique, même s'ils sont autorisés à le sélectionner.

Remarque :

Grâce à certaines technologies de serveur, vous pouvez afficher du texte statique à l'aide d'une fonction ou d'une balise de serveur. Pour permettre aux utilisateurs de Contribute de modifier le texte statique d'une page dynamique qui utilise une technologie de serveur de ce type, placez le texte statique en dehors des balises de serveur. Pour plus d'informations, voir

Administration de Contribute.

1

Sélectionnez Site > Administrer le site Contribute.

2

Si certaines options requises pour des raisons de compatibilité avec Contribute ne sont pas activées, une boîte de dialogue vous invitant à activer ces options s'affiche. Cliquez sur OK pour activer ces options et la compatibilité avec Contribute.

3


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

4

Dans la catégorie Utilisateurs et rôles, sélectionnez un rôle, puis cliquez sur le bouton Modifier les paramètres de rôle.

5

Sélectionnez la catégorie Modification et désélectionnez l'option de protection des scripts et des formulaires.

6

Cliquez sur OK pour fermer la boîte de dialogue Modification des paramètres.

7

Cliquez sur Fermer pour fermer la boîte de dialogue Administration du site Web.

Voir aussi

« Gestion des sites Contribute avec Dreamweaver » à la page 54

« Création d'un modèle pour un site Contribute » à la page 380

Modification de jeux d'enregistrements à l'aide de l'inspecteur Propriétés

Utilisez l'inspecteur Propriétés pour modifier le jeu d'enregistrements sélectionné. Les options disponibles dépendent du modèle de serveur utilisé.

1

Ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés), puis sélectionnez le jeu d'enregistrements dans le panneau

Comportements de serveur (Fenêtre > Comportements de serveur).

2


Voir aussi


DREAMWEAVER CS3


543

Affichage des enregistrements de base de données

A propos des enregistrements de base de données

Pour afficher des enregistrements de base de données, il faut récupérer des informations stockées dans une source de contenu, telle qu'une base de données, et en effectuer le rendu dans une page Web. Dreamweaver offre de nombreuses méthodes d'affichage de contenu dynamique et propose plusieurs comportements de serveur intégrés. Ces derniers permettent d'améliorer la présentation du contenu dynamique, de faciliter les recherches et de naviguer parmi les informations renvoyées par une base de données.

Les bases de données et les autres sources de contenu dynamique permettent d'obtenir de meilleurs résultats lors des opérations de recherche, de tri ou de consultation de volumes d'informations importants. L'utilisation d'une base de données pour stocker le contenu de sites Web est particulièrement recommandée lorsque vous souhaitez stocker des quantités importantes de données, puis les récupérer pour les afficher d'une manière spécifique. Dreamweaver fournit différents outils et comportements prédéfinis qui permettent de récupérer et d'afficher efficacement les informations d'une base de données.

Comportements de serveur et éléments de mise en forme

Les comportements de serveur et les éléments de mise en forme proposés par Dreamweaver pour enrichir la présentation

Formats

Les formats permettent d'appliquer différents types de valeurs numériques, monétaires, de date/heure et de pourcentage à un texte dynamique.

Par exemple, si le prix d'un élément dans un jeu d'enregistrements est de 10,989, vous pouvez l'afficher sur votre page sous la forme 10,99

€

en choisissant le format Devise - 2 décimales de Dreamweaver. Dans ce format, les nombres s'affichent avec deux chiffres après la virgule. Si le nombre a plus de deux chiffres après la virgule, il est arrondi au nombre le plus proche. Si le nombre est un entier, il est suivi d'une virgule et de deux zéros.

Région répétée

Ces comportements de serveur permettent d'afficher plusieurs éléments renvoyés par une requête de base de données et d'indiquer le nombre d'enregistrements à afficher par page.

N avigation de jeu d'enregistrements

Ces comportements de serveur permettent d'insérer des éléments de navigation dont les utilisateurs peuvent se servir pour passer au groupe d'enregistrements précédent ou suivant renvoyé par le jeu d'enregistrements. Supposons que vous choisissiez d'afficher dix enregistrements par page à l'aide de l'objet de serveur par groupe de dix.

Barre d'état du jeu d'enregistrements

Ces comportements de serveur permettent d'ajouter un compteur qui indique aux utilisateurs la position dans laquelle ils se trouvent au sein d'un groupe d'enregistrements par rapport au nombre total d'enregistrements renvoyés.

Afficher la région

Ces comportements de serveur permettent d'afficher ou de masquer des éléments de la page en fonction de la pertinence des enregistrements affichés. Par exemple, si un utilisateur consulte le dernier enregistrement d'un jeu, vous pouvez choisir de n'afficher que le lien Précédent ; le lien Suivant est alors masqué.

Application d'éléments typographiques et de mise en forme de page à des données dynamiques

Dreamweaver permet de présenter des données dynamiques au sein d'une page structurée et d'appliquer un formatage typographique à l'aide de HTML et des feuilles de style en cascade. Pour appliquer des formats à des données dynamiques dans Dreamweaver, mettez en forme les tableaux et les espaces réservés des données dynamiques à l'aide des outils de mise en forme de Dreamweaver. Lors de leur insertion à partir d'une source, les données adoptent automatiquement le formatage

(police, style de paragraphe et tableau) spécifié.

DREAMWEAVER CS3


544

Voir aussi


N

avigation parmi les résultats d'un jeu d'enregistrements de base de données

Les liens de navigation de jeu d'enregistrements permettent de se déplacer d'un enregistrement à un autre ou d'un jeu d'enregistrements à un autre. Après avoir créé une page devant afficher cinq enregistrements à la fois, par exemple, vous pouvez ajouter des liens tels que Suivant ou Précédent pour que l'utilisateur puisse afficher les cinq enregistrements suivants ou précédents.

Dernier. Une page peut contenir un nombre illimité de liens, à condition que tous agissent sur un même jeu

• Un jeu d'enregistrements dans lequel naviguer.

• Un contenu dynamique sur la page pour afficher le ou les enregistrements.

• Du texte ou des images sur la page pour servir de barre de navigation cliquable.

• Un jeu de comportements serveur Déplacer vers l'enregistrement pour naviguer dans le jeu d'enregistrements.

Vous pouvez ajouter simultanément les deux derniers éléments en utilisant l'objet dynamique Barre de navigation des enregistrements ou bien les ajouter séparément en utilisant les outils de conception et le panneau Comportements de serveur.

Création d'une barre de navigation de jeu d'enregistrements

Vous pouvez créer en une seule opération une barre de navigation de jeu d'enregistrements à l'aide du comportement de serveur correspondant. Cet objet de serveur ajoute les éléments suivants à la page :

•

Un tableau HTML comportant des liens texte ou image.

•

Un jeu de comportements de serveur Déplacer vers.

•

Un jeu de comportements de serveur Afficher la région.

La version texte de la barre de navigation du jeu d'enregistrements a l’aspect suivant :

La version image de la barre de navigation du jeu d'enregistrements a l’aspect suivant :

Avant de placer la barre de navigation dans la page, assurez-vous que la page contient un jeu d'enregistrements dans lequel naviguer et une mise en forme pour afficher les enregistrements.

Après avoir placé la barre de navigation sur la page, vous pouvez personnaliser la barre à votre gré à l'aide des outils de conception. Vous pouvez également modifier les comportements de serveur Déplacer vers et Afficher la région en doublecliquant dessus dans le panneau Comportements de serveur.

Dreamweaver crée un tableau qui contient des liens texte ou image permettant à l'utilisateur, lorsqu'il clique dessus, de se déplacer dans le jeu d'enregistrements sélectionné. Lorsque le premier enregistrement du jeu s'affiche, les liens ou images

Premier et Précédent sont masqués. Lorsque le dernier enregistrement du jeu s'affiche, les liens ou images Suivant et Dernier sont masqués.

DREAMWEAVER CS3


545

Vous pouvez personnaliser la mise en forme de la barre de navigation à l'aide des outils de conception et du panneau

Comportements de serveur.

1

En mode Création, placez le point d'insertion à l'endroit de la page où vous souhaitez que la barre de navigation apparaisse.

2

Ouvrez la boîte de dialogue Barre de navigation du jeu d'enregistrements (Insertion > Objets de données > Pagination du jeu d'enregistrements > Barre de navigation du jeu d'enregistrements).

3

Dans le menu déroulant Jeu d'enregistrements, sélectionnez le jeu d'enregistrements dans lequel naviguer.

4

Dans la section Afficher à l'aide de, sélectionnez le format d'affichage des liens de navigation sur la page et cliquez sur OK.

T exte

Place des liens texte sur la page.

Images

Inclut des images graphiques en tant que liens. Dreamweaver utilise ses propres fichiers d'image. Lorsque la barre se trouve sur la page, vous pouvez néanmoins les remplacer par les vôtres.

Barres de navigation de jeu d'enregistrements personnalisées

Vous pouvez créer votre propre barre de navigation de jeu d'enregistrements qui utilise des styles de mise en forme plus complexes que ceux qu'offre la table simple créée par l'objet de serveur Barre de navigation du jeu d'enregistrements.

Pour créer votre propre barre de navigation de jeu d'enregistrements, vous devez :

• créer des liens de navigation dans du texte ou des image ;

• placer les liens sur la page en mode Création ;

• attribuer un comportement de serveur distinct à chaque lien de navigation.

Cette section explique comment assigner un comportement de serveur distinct à chaque lien de navigation.

Création et attribution de comportements de serveur à un lien de navigation

1

En mode Création, sélectionnez sur la page la chaîne de texte ou l'image qui servira de lien de navigation entre les enregistrements.

2

Ouvrez le panneau Comportements de serveur (Fenêtre > Comportements de serveur), puis cliquez sur le bouton

Plus (+).

3

Choisissez Pagination du jeu d'enregistrements dans le menu déroulant, puis sélectionnez le comportement qui convient dans la liste des comportements de serveur.

Si le jeu contient un nombre important d'enregistrements, le comportement de serveur Déplacer vers le dernier enregistrement peut être long à s'exécuter lorsque l'utilisateur clique sur le lien.

4

Dans le menu déroulant Jeu d'enregistrements, sélectionnez le jeu contenant les enregistrements et cliquez sur OK.

Le comportement de serveur est assigné au lien de navigation.

Définition des options de la boîte de dialogue Déplacer vers (comportement de serveur)

Ajouter des liens permettant à l'utilisateur de naviguer parmi les enregistrements d'un jeu d'enregistrements

1

Si vous n'avez rien sélectionné sur la page, sélectionnez un lien dans le menu déroulant.

2

Sélectionnez le jeu contenant les enregistrements à parcourir et cliquez sur OK.

Remarque :

Si le jeu contient un nombre important d'enregistrements, le comportement de serveur Déplacer vers le dernier enregistrement peut être long à s'exécuter lorsque l'utilisateur clique sur le lien.

T

âches de création d'une barre de navigation

Pour concevoir une barre de navigation personnalisée, commencez par en créer la représentation visuelle à l'aide des outils de conception de page de Dreamweaver. Il est inutile de créer un lien pour la chaîne de texte ou l'image, car Dreamweaver s'en charge à votre place.

DREAMWEAVER CS3


546

La page sur laquelle créer la barre de navigation doit contenir un jeu d'enregistrements dans lequel naviguer. Une barre de navigation de jeu d'enregistrements simple, c'est-à-dire une barre dont les boutons sont créés à partir d'éléments de contenu

Après avoir ajouté un jeu d'enregistrements à une page et créé la barre de navigation, vous devez appliquer les comportements de serveur individuels à chaque élément de navigation. Par exemple, une barre de navigation de jeu d'enregistrements typique contient la représentation des liens suivants, associée au comportement approprié :

Lien de navigation

A cc é der à l a premi è re page

A cc

é der

à l a page pr

é c

é dente

A cc é der à l a page suivante

A cc

é der

à l a derni

è re page

Comportement de serveur

Dé p l acer vers l a premi è re page

Dé p l acer vers

l a page pr

é c

é dente

Dé p l acer vers l a page suivante

Dé p l acer vers

l a derni

è re page

Voir aussi

Affichage et masquage des régions en fonction des résultats du jeu d'enregistrements

Vous pouvez également indiquer qu'une région soit affichée ou masquée selon que le jeu d'enregistrements est vide ou non.

Si un jeu d'enregistrements est vide (aucun enregistrement ne correspond à la requête, par exemple), vous pouvez afficher un message informant l'utilisateur de l'absence de résultats. Cette fonction est particulièrement utile lors de la création de pages de recherche reposant sur des termes que l'utilisateur doit entrer. De même, vous pouvez afficher un message d'erreur lorsqu'un problème survient au cours de la connexion à une base de données ou lorsque le nom et le mot de passe de l'utilisateur ne correspondent pas à ceux reconnus par le serveur.

•

Afficher si le jeu d'enregistrements est vide

•

Afficher si le jeu d'enregistrements n'est pas vide

•

Afficher s'il s'agit de la première page

•

Afficher si ce n'est pas la première page

•

Afficher s'il s'agit de la dernière page

•

Afficher si ce n'est pas la dernière page

1

En mode Création, sélectionnez sur la page la région à afficher ou masquer.

2

Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+).

3

Dans le menu déroulant, sélectionnez Afficher la région, puis choisissez l'un des comportements de serveur proposés et cliquez sur OK.

Voir aussi

« A propos des enregistrements de base de données » à la page 543

« Création d'un tableau dynamique » à la page 548

DREAMWEAVER CS3


547

Affichage de plusieurs résultats d'un jeu d'enregistrements

Le comportement de serveur Région répétée vous permet d'afficher sur une page plusieurs enregistrements d'un jeu. Toute sélection de données dynamique peut être convertie en région répétée. Les zones les plus courantes sont les tableaux, les lignes de tableau ou les séries de lignes de tableau.

1

En mode Création, sélectionnez une région comportant un contenu dynamique.

La sélection peut être de tout type, notamment tableau, ligne de tableau ou même paragraphe de texte.

Pour sélectionner précisément une région sur une page, vous pouvez utiliser le sélecteur de balises dans le coin gauche de la fenêtre de document. Par exemple, si la région correspond à une ligne de tableau, cliquez sur la ligne, puis cliquez sur la balise

<tr>

située le plus à droite dans le sélecteur de balises pour sélectionner la ligne du tableau.

2

Pour afficher le panneau Comportements de serveur, choisissez Fenêtre > Comportements de serveur.

3

Cliquez sur le bouton Plus (+) et choisissez Région répétée.

4

Sélectionnez le nom du jeu d'enregistrements à utiliser dans le menu déroulant.

5

Sélectionnez le nombre d'enregistrements à afficher sur chaque page et cliquez sur OK.

Dans la fenêtre de document, un contour fin de couleur grise délimite la région répétée. Dans la fenêtre Live Data

(Affichage > Live Data), le contour gris disparaît et la sélection s'agrandit, afin d'afficher le nombre d'enregistrements spécifiés.

Voir aussi

« A propos des enregistrements de base de données » à la page 543


Modification de régions répétées dans l'inspecteur Propriétés

❖

Modifiez la région répétée sélectionnée en modifiant les options suivantes :

•

Jeu d'enregistrements contenant les enregistrements pour la région répétée

•

Nombre d'enregistrements affichés

Lorsque vous sélectionnez une nouvelle option, Dreamweaver met la page à jour.

Création et ajoute d'une région répétée pour afficher plusieurs enregistrements sur une page

1

Spécifiez le jeu d'enregistrements contenant les données à afficher dans la région répétée.

2

Spécifiez le nombre d'enregistrements à afficher sur chaque page et cliquez sur OK.

Si vous indiquez un nombre limité d'enregistrements par page et que le nombre d'enregistrements demandé risque d'être supérieur, ajoutez des liens de navigation afin que l'utilisateur puisse visualiser les autres enregistrements.

DREAMWEAVER CS3


548

Création d'un tableau dynamique

L'exemple ci-dessous illustre comment le comportement de serveur Région répétée s'applique à une ligne de tableau et indique qu'il est possible d'afficher un maximum de neuf enregistrements par page. La ligne elle-même affiche quatre

Pour créer un tableau semblable à celui de l'exemple précédent, vous devez créer un tableau contenant un contenu dynamique et appliquer le comportement de serveur Région répétée à la ligne renfermant le contenu dynamique. Lorsque la page est traitée par le serveur d'application, la ligne est répétée autant de fois que le nombre spécifié dans l'objet de serveur

Région répétée, avec un enregistrement différent inséré dans chaque ligne.

Remarque :

L'objet de serveur Tableau dynamique n'est pas disponible avec les types de document ASP.NET.

1

Procédez de l'une des manières suivantes pour insérer un tableau dynamique :

•

Choisissez Insertion > Objets de données > Données dynamiques > Tableau dynamique pour afficher la boîte de dialogue Tableau dynamique.

•

Dans la catégorie Données de la barre Insertion, cliquez sur le bouton Données dynamiques et sélectionnez l'icône

Tableau dynamique dans le menu contextuel.

2

Sélectionnez le jeu d'enregistrements dans le menu déroulant Jeu d'enregistrements.

3

Sélectionnez le nombre d'enregistrements à afficher sur chaque page.

4

(Facultatif) Entrez les valeurs des bordures du tableau, de la marge intérieure des cellules et de l'espacement entre les cellules.

La boîte de dialogue Tableau dynamique mémorise les valeurs spécifiées pour les bordures du tableau, la marge intérieure des cellules et l'espacement entre les cellules.

Remarque :

Si vous travaillez sur un projet nécessitant plusieurs tableaux dynamiques d'aspect semblable, tapez les valeurs de mise en forme du tableau pour simplifier le développement des pages. Une fois le tableau inséré, vous pouvez toutefois ajuster ces valeurs à l'aide de l'inspecteur Propriétés du tableau.

5

Cliquez sur OK.

DREAMWEAVER CS3


549

Un tableau et des espaces réservés destinés au contenu dynamique défini dans le jeu d'enregistrements associé s'insèrent sur la page.

Dans cet exemple, le jeu d'enregistrements contient quatre colonnes : AUTHORID, FIRSTNAME, LASTNAME et BIO. Le nom de chaque colonne se place dans la ligne de titre du tableau. Vous pouvez remplacer les titres par tout texte descriptif ou image pertinente.

Création de compteurs d'enregistrements

Les compteurs d'enregistrements permettent aux utilisateurs de connaître leur position relative dans un jeu d'enregistrements. Ils affichent généralement le nombre total d'enregistrements renvoyés et le nombre actuel d'enregistrements affichés. Prenons l'exemple d'un jeu d'enregistrements renvoyant 40 enregistrements individuels, avec enregistrements 1 à 8 sur 40 ».

Avant de créer un compteur d'enregistrements pour une page, vous devez d'abord créer un jeu d'enregistrements pour la page, une mise en forme appropriée pour la présentation du contenu dynamique et une barre de navigation de jeu d'enregistrements.

Voir aussi


Création de compteurs d'enregistrements simples

Un compteur d'enregistrements indique aux utilisateurs la position dans laquelle ils se trouvent au sein d'un groupe d'enregistrements, par rapport au nombre total d'enregistrements renvoyés. Il constitue donc un comportement utile permettant d'améliorer considérablement l'aspect fonctionnel d'un site Web.

L'objet de serveur Etat de navigation du jeu d'enregistrements permet de créer un compteur d'enregistrements simple. Cet objet de serveur crée une entrée de texte sur la page pour afficher l'état de l'enregistrement actif. Vous pouvez personnaliser votre compteur d'enregistrements à l'aide des outils de création de page de Dreamweaver.

1

Placez le point d'insertion à l'endroit où vous souhaitez insérer le compteur d'enregistrements.

2

Choisissez Insertion > Objets de données > Afficher le nombre d'enregistrements > Etat de navigation du jeu d'enregistrements, sélectionnez le jeu d'enregistrements dans le menu déroulant Jeu d'enregistrements, puis cliquez sur OK.

L'objet de serveur Etat de navigation du jeu d'enregistrements insère un compteur d'enregistrements texte qui ressemble à l'exemple suivant :

Dans la fenêtre Live Data ou dans un navigateur, le compteur ressemble à l'exemple suivant :

DREAMWEAVER CS3


550

Création et ajout du compteur d'enregistrements à la page

❖

Dans la boîte de dialogue Insérer l'état de navigation du jeu d'enregistrements, sélectionnez le jeu d'enregistrements à surveiller, puis cliquez sur OK.

Création de compteurs d'enregistrements personnalisés

Vous faites appel à des comportements de comptage d'enregistrements individuels pour créer des compteurs d'enregistrements personnalisés. Les compteurs d'enregistrements personnalisés sont plus sophistiqués que le simple tableau à une seule ligne inséré par l'objet de serveur Etat de navigation du jeu d'enregistrements. Vous pouvez organiser les éléments de manières variées et créatives et appliquer un comportement de serveur approprié à chaque élément.

•

Afficher le numéro de l'enregistrement de début

•

Afficher le numéro de l'enregistrement de fin

•

Afficher le nombre total d'enregistrements

Avant de créer un compteur d'enregistrements personnalisé sur une page, vous devez d'abord créer un jeu d'enregistrements pour la page, une mise en forme appropriée pour la présentation du contenu dynamique et une barre de navigation de jeu d'enregistrements. d'enregistrements simples » est créé. Dans cet exemple, le texte mis en forme avec la police sans-serif représente les espaces réservés aux nombres d'enregistrements qui seront insérés dans la page. Le compteur d'enregistrements de cet exemple se présente comme suit :

Affichage des enregistrements Affichage des enregistrements

StartRow

à

EndRow

sur

RecordSet.RecordCount

.

1

En mode Création, tapez le texte du compteur sur la page. Il peut s'agir de n'importe quel texte. Par exemple :

Displaying records thru of .

2

Placez le point d'insertion à la fin de la chaîne de texte.

3

Ouvrez le panneau Comportements de serveur (Fenêtre > Comportements de serveur).

4

Cliquez sur le bouton Plus(+) dans le coin supérieur gauche, puis cliquez sur Afficher le nombre d'enregistrements. Dans ce sous-menu, choisissez Afficher le nombre total des enregistrements. Le comportement Afficher le nombre total des enregistrements s'insère sur la page et un espace réservé se place au niveau du point d'insertion. La chaîne de texte ressemble maintenant à ce qui suit :

Displaying records thru of

{Recordset1.RecordCount}

.

5

Placez le point d'insertion après le mot records

, et sélectionnez Afficher le numéro de l'enregistrement de début dans le panneau Nombre d'enregistrements (Comportements de serveur > Plus (+) > Nombre d'enregistrements. La chaîne de texte ressemble maintenant à ce qui suit :

Displaying records

{StartRow_Recordset1}

thru of


.

6

Placez maintenant le point d'insertion entre les mots thru

et of

, et sélectionnez Afficher le numéro de l'enregistrement de début dans le panneau Nombre d'enregistrements (Comportements de serveur > Nombre d'enregistrements.

La chaîne de texte ressemble maintenant à ce qui suit :

Displaying records

{StartRow_Recordset1}

thru

{EndRow_Recordset1}

of


.

7

Pour vérifier que le compteur fonctionne correctement, affichez la page dans la fenêtre Live Data (Affichage > Live

Data). Le compteur est similaire à l'exemple suivant :

Displaying records 1 thru 8 of 40.

Si la page de résultats comporte un lien de navigation permettant d'accéder au groupe d'enregistrements suivant, il suffit de cliquer sur ce lien pour mettre à jour le compteur d'enregistrements comme suit :

Showing records 9 thru 16 of 40.

DREAMWEAVER CS3


551

Les liens ne fonctionnent pas dans la fenêtre Live Data. Pour les tester, utilisez la fonction Aperçu dans le navigateur. Vérifiez que l'option Aperçu à l'aide d'un serveur Live Data est activée dans Préférences (Edition > Préférences > Aperçu dans le navigateur (Windows) ou Dreamweaver > Préférences > Aperçu dans le navigateur (Macintosh)), puis choisissez Fichier >

Aperçu dans le navigateur.

Affichage du numéro de page actuel de l'ensemble de données (ASP.

N

E

T

)

La page Ensemble de données d'ASP.NET est un sous-ensemble de d'enregistrements répartis dans une grille ou une liste de données. Vous pouvez ajouter du code dans votre page ASP.NET qui affiche le numéro de page actuel de l'ensemble de données. Par exemple, pour afficher uniquement 10 enregistrements alors que l'ensemble de données en contient 24, l'ensemble de données comporte trois pages (comprenant 10, 10 et 4 enregistrements).

1

Placez le point d'insertion dans la page Ensemble de données, à l'emplacement où le numéro de page doit apparaître.

2

Choisissez Insertion > Objets de données > Afficher le nombre d'enregistrements > Numéro de la page en cours.

3

Dans la boîte de dialogue Définir le numéro de page en cours, sélectionnez l'ensemble de données et cliquez sur OK.

Utilisation de formats de données prédéfinis

Dreamweaver contient plusieurs formats de données prédéfinis que vous pouvez appliquer à des éléments de données

Application d'un format de données à un contenu dynamique

1

Sélectionnez le contenu dynamique dans la fenêtre Live Data ou son espace réservé dans la fenêtre de document.

2


3

Dans la colonne Format, cliquez sur le bouton fléché pointant vers le bas.

Si la flèche vers le bas n'est pas visible, agrandissez le panneau.

4

Dans le menu déroulant Format, sélectionnez la catégorie de format de données souhaitée.

Assurez-vous que le format de données convient au type de données à formater. Les formats Devise, par exemple, ne fonctionnent que pour des données numériques. En outre, il est impossible d'appliquer plusieurs formats aux mêmes données.

5

Faites un aperçu de la page dans la fenêtre Live Data ou dans un navigateur pour vérifier que le format s'est appliqué correctement.

Personnalissation d'un format de données

1

Ouvrez une page contenant des données dynamiques en mode Création.

2

Sélectionnez les données dynamiques dont vous souhaitez personnaliser le format.

L'élément de données liées dont vous avez sélectionné le texte dynamique se met en surbrillance. Le panneau affiche deux colonnes pour l'élément sélectionné : Liaison et Format. Si la colonne Format n'est pas visible, élargissez le panneau Liaisons afin de l'afficher.

3

Dans le panneau Liaisons, cliquez sur la flèche vers le bas de la colonne Format pour développer le menu déroulant des formats de données disponibles.

Si la flèche vers le bas n'est pas visible, agrandissez davantage le panneau Liaisons.

4

Dans le menu déroulant, choisissez Modifier la liste de formats.

5

Complétez les options de la boîte de dialogue, puis cliquez sur OK.

a

Sélectionnez le format dans la liste, puis cliquez sur Modifier.

b

Modifiez un ou plusieurs des paramètres suivants dans les boîtes de dialogue Devise, Nombre ou Pourcentage, puis cliquez sur OK.

• Nombre de chiffres à afficher après la virgule

• Affichage ou absence d'un zéro devant les nombres décimaux inférieurs à un

DREAMWEAVER CS3


552

•

Affichage ou absence de parenthèses ou d'un signe moins pour les valeurs négatives

•

Regroupement ou non des chiffres

c

Pour supprimer un format de données, cliquez sur le format dans la liste, puis sur le bouton Moins (-).

Création d'un format de données

1

Ouvrez une page contenant des données dynamiques en mode Création.

2

Sélectionnez les données dynamiques pour lesquelles créer le format personnalisé.

3

Choisissez Fenêtre > Liaisons pour afficher le panneau Liaisons, puis cliquez sur la flèche vers le bas dans la colonne

Format. Si la flèche vers le bas n'est pas visible, agrandissez le panneau.

4

Dans le menu déroulant, choisissez Modifier la liste de formats.

5

Cliquez sur le bouton Plus (+) et sélectionnez un type de format.

Remarque :

Dreamweaver prend uniquement en charge la création de formats de données pour les modèles de serveur ASP et

JSP. Les utilisateurs ColdFusion, PHP et ASP.NET ne peuvent pas créer de formats de données à partir de Dreamweaver.

6

Définissez le format et cliquez sur OK.

7

Entrez un nom pour le nouveau format dans la colonne Nom et cliquez sur OK.

Remarque :

Si vous êtes un développeur d'extensions ColdFusion, PHP, or ASP.NET, vous pouvez télécharger des formats que d'autres développeurs ont créés, ainsi que créer des formats de serveur et les envoyer à Dreamweaver Exchange. Pour plus d'informations sur l'API de formats de serveur, voir Extension de Dreamweaver (Aide> Extension de Dreamweaver > API d'extension > Formats de serveur

Affichage des données dynamiques

Affichage de données dynamiques en mode Création

Dans Dreamweaver, vous pouvez afficher le contenu dynamique d'une page alors que le mode Création est activé.

1

Assurez-vous que votre configuration de Dreamweaver permet d'afficher des données dynamiques.

2

Choisissez Affichage> Données dynamiques.

La page s'affiche en mode Création, contenu dynamique inclus.

Lorsque Live Data est activé en mode Création, vous pouvez :

• améliorer la présentation de la page avec les outils de conception ;

• ajouter, modifier ou effacer un contenu dynamique ;

• ajouter, modifier ou effacer des comportements de serveur.

Remarque :

Les liens ne fonctionnent pas en mode Création. Pour les tester, utilisez la fonction Aperçu dans le navigateur

Lorsque vous effectuez une modification qui touche le contenu dynamique de la page, vous pouvez actualiser la page en cliquant sur le bouton Actualiser (l'icône représentant un cercle constitué de flèches). Dreamweaver peut également actualiser automatiquement la page.

L'exemple suivant présente une page dynamique lorsque Live Data est désactivé :

DREAMWEAVER CS3


553

L'exemple suivant présente la même page avec Live Data activé :

Conditions d'affichage des données dynamiques

Pour afficher des données dynamiques en mode Création, vous devez procéder de la façon suivante :

•

Définissez un dossier dans lequel traiter les pages dynamiques.

Lorsque vous activez Live Data, une copie temporaire du document ouvert est envoyée au dossier pour y être traitée. La page obtenue est renvoyée et affichée en mode Création et la copie temporaire est supprimée sur le serveur.

Si la page affiche un message d'erreur lorsque vous activez la fonction Live Data, assurez-vous que le préfixe de l'URL est correct dans la boîte de dialogue Définition du site.

•

Copiez les fichiers associés (le cas échéant) dans le dossier.

•

Fournissez tous les paramètres de la page qu'un utilisateur fournirait normalement.

En cas de difficultés à faire fonctionner l'affichage des données dynamiques, consultez la section « Dépannage de l'affichage des données dynamiques » à la page 555.

Fourniture de données dynamiques à une page en mode Création

1

Ouvrez la boîte de dialogue Paramètres Live Data (Affichage > Paramètres Live Data).

DREAMWEAVER CS3


554

2

Dans la zone Demande d'URL, cliquez sur le bouton plus (+) pour entrer un paramètre attendu par votre page.

3

Indiquez un nom et une valeur test pour chaque paramètre.

4

Dans le menu déroulant Méthode, sélectionnez la méthode de formulaire HTML attendue par votre page :

POST

ou

GET

.

5

Dans la zone de texte Script d'initialisation, entrez le code source que vous souhaitez insérer au début de la page avant de l'exécuter.

Le script d'initialisation comporte généralement un code qui définit les variables de session.

6

Cliquez sur Enregistrer les paramètres de ce document pour enregistrer les paramètres de la page sur laquelle vous travaillez, et cliquez sur OK.

Remarque :

Pour que les paramètres puissent être enregistrés, vous devez activer Design Notes (Fichier > Design Notes).

Voir aussi

« Basculement d'un mode à un autre dans la fenêtre de document » à la page 23

« Aperçu des pages dynamiques dans un navigateur » à la page 513

Copie de fichiers dépendants

Certaines pages dynamiques s'appuient sur d'autres fichiers pour fonctionner normalement. Vous devez télécharger tous les fichiers associés, y compris les inclusions côté serveur et les fichiers dépendants tels que les fichiers d'image et les fichiers de classe JSP, vers le dossier défini pour le traitement des pages dynamiques. Dreamweaver ne copie pas automatiquement les fichiers dépendants dans le dossier lorsque Live Data est activé en mode Création.

Remarque :

Live Data prend en charge le code des inclusions côté serveur et les fichiers d'application tels que global.asa (ASP) et application.cfm (ColdFusion). Vérifiez que ces fichiers ont été téléchargés sur le serveur avant d'activer la fonction Live Data.

1

Ouvrez le panneau Site (Fenêtre > Fichiers du site) et cliquez sur le bouton Etendre (la dernière icône sur la barre d'outils du panneau).

La fenêtre Site adopte sa taille maximale.

2

Cliquez sur l'icône Serveur d'application située sur la barre d'outils du panneau Site agrandie (la deuxième icône à partir de la gauche).

Le dossier racine du serveur d'application s'affiche dans la zone Site distant.

3

Dans la zone Répertoire local, sélectionnez les fichiers dépendants.

4

Cliquez sur la flèche bleue vers le haut, située sur la barre d'outils, pour copier les fichiers vers le serveur d'application, ou faites glisser les fichiers vers le dossier approprié dans la zone Site distant.

Cette opération n'a besoin d'être effectuée qu'une seule fois pour le site, à moins que vous n'ajoutiez d'autres fichiers dépendants. Dans ce cas, ces derniers doivent également être copiés dans le dossier.

Voir aussi


Fourniture des paramètres attendus à la page

Pour générer un contenu dynamique, certaines pages nécessitent la participation de l'utilisateur qui doit fournir certains paramètres ; par exemple, une page peut avoir besoin du numéro d'ID d'un enregistrement pour trouver et afficher cet enregistrement. Sans ces données, Dreamweaver ne peut pas générer le contenu dynamique à afficher en mode Création.

Si une page nécessite des paramètres de la part de l'utilisateur, vous devez les fournir de la manière suivante.

1

Dans la fenêtre de document, choisissez Affichage > Paramètres Live Data.

2


DREAMWEAVER CS3


555

Si vous spécifiez la méthode

GET

dans la boîte de dialogue Paramètres Live Data, une zone de texte apparaît sur la barre d'outils du mode Création. Utilisez cette zone pour y entrer les différents paramètres de l'URL, puis cliquez sur le bouton

Actualiser (cercle constitué de flèches) pour voir la manière dont les paramètres affectent la page.

Entrez chaque paramètre d'URL dans le format suivant : name=value; où

nom

est le nom de paramètre d'URL attendu par votre page et

valeur

la valeur de ce paramètre.

Voir aussi


Actualisation de la page

•

Avec Live Data activé, cliquez sur le bouton Actualiser (cercle constitué de flèches) de la barre d'outils du document pour actualiser la page après avoir effectué une modification touchant au contenu dynamique.

•

Sélectionnez l'option Actualisation automatique dans la barre d'outils pour actualiser la page chaque fois que vous apportez une modification qui affecter le contenu dynamique. Si la connexion à votre base de données est lente, vous pouvez ignorer cette option lorsque vous travaillez dans la fenêtre Live Data.

Dépannage de l'affichage des données dynamiques

Bon nombre de problèmes d'affichage des données dynamiques sont liés à des valeurs manquantes ou incorrectes dans la boîte de dialogue Définition du site (Site > Modifier les sites).

Vérifiez la catégorie Serveur d'évaluation de la boîte de dialogue Définition du site. La zone de dossier distant doit spécifier un dossier capable de traiter des pages dynamiques. Voici un exemple de dossier distant approprié si vous exécutez IIS ou

C:\Inetpub\wwwroot\ myapp \

Vérifiez que la case Préfixe de l'URL spécifie une URL qui correspond au dossier distant. Par exemple, si PWS ou IIS est

Dossier distant

C:\

Inetpub

\www root

\

C:\

Inetpub

\www root

\ myapp

\

C:\

Inetpub

\www root

\ fs

\ p l anes

Préfixe de l'URL

http

://l oca l host

/ http

://l oca l host

/ myapp

/ http

://l oca l host

/ fs

/ p l anes

T

ravail en mode Création sans données dynamiques

Si Live Data est désactivé ou si vous êtes temporairement déconnecté de votre serveur d'application, vous pouvez tout de même travailler sur vos pages dynamiques en mode Création. Dreamweaver utilise des espaces réservés pour représenter le contenu dynamique sur la page. Par exemple, l'espace réservé au texte dynamique extrait de la base de données utilise la syntaxe

{RecordsetName.ColumnName}

, où

Recordset

est le nom du jeu d'enregistrements et

ColumnName

le nom de la colonne choisie dans ce jeu.

Il arrive que la longueur de l'espace réservé d'un texte dynamique déforme la mise en page en mode Création. Dans ce cas, utilisez des accolades vides pour représenter les espaces réservés.

1

Choisissez Edition > Préférences > Eléments invisibles ou Dreamweaver > Préférences > Eléments invisibles (Mac OS X).

2

Dans le menu déroulant Afficher le texte dynamique sous, choisissez { } et cliquez sur OK.

DREAMWEAVER CS3


556

Utilisation des services Web

A propos des services Web

Les services Web sont une nouvelle technologie permettant aux pages Web d'accéder à des applications distribuées. En offrant la fonctionnalité d'un service auquel une page Web peut se connecter en fonction des besoins, les services Web procurent aux développeurs et aux fournisseurs de services une plus grande liberté au niveau de la conception et du déploiement d'applications distribuées puissantes. Les services Web sont fournis et vendus en tant que flux de services auxquels il est possible d'accéder à partir de n'importe quelle plate-forme, quels que soient le système d'exploitation et le langage de programmation utilisés. Voici quelques exemples de services Web, accompagnés des informations et des fonctionnalités qu'ils offrent :

•

Authentification et autorisation des utilisateurs

•

Validation de cartes de crédit

•

Services pour les marchés financiers, qui renvoient le prix des actions assorti du symbole d'action spécifié

•

Services d'achats qui permettent aux utilisateurs de commander des produits en ligne

•

Services d'informations qui fournissent divers types de données (bulletins d'actualité, par exemple) en fonction d'un centre d'intérêt, d'un endroit ou de toute autre information personnelle sélectionnée

Avant de créer une page Web utilisant un service Web, vous devez vous familiariser avec la technologie de serveur sousjacente de votre application et avec les structures de programmation qu'elle requiert.

La page Web qui se connecte au service Web s'appelle généralement un consommateur tandis que le service même s'appelle un fournisseur . Dreamweaver permet de créer des pages et des sites qui sont consommateurs de services Web. Dreamweaver permet de créer des consommateurs de services Web utilisant des types de document ColdFusion, ASP.NET et Java Server

Pages (JSP), et de publier et déployer des services Web à l'aide de ColdFusion. Plus particulièrement, Dreamweaver permet d'effectuer les tâches de développement de services Web suivantes :

• sélectionner les services Web disponibles sur Internet

• créer un proxy de services Web qui permet à la page Web de communiquer avec le fournisseur de services Web.

Le proxy (également appelé classe d'abstraction) contient les champs, les méthodes et les propriétés du service Web et les rend accessibles à la page Web hébergée localement. Vous pouvez afficher un proxy que vous créez pour votre page dans le panneau Composants de Dreamweaver.

• faire glisser les méthodes et les types de données sur le code de la page Web.

Déroulement du travail des services Web dans Dreamweaver

Pour créer une page ou un site consommateur d'un service Web à l'aide de Dreamweaver, vous devez suivre la procédure ci-dessous :

Dans Dreamweaver, Axis, le générateur de proxy Apache SOAP qui prend en charge le développement de services Web JSP, est préconfiguré. Pour le développement de pages ColdFusion, le générateur de proxy de services Web est inclus dans le serveur ColdFusion. En établissant une connexion au serveur ColdFusion, vous pouvez accéder au générateur de proxy.

Pour développer des pages de services Web à utiliser avec ASP.NET, vous devez installer le SDK de ASP.NET, disponible auprès de Microsoft.

Il existe plusieurs sources de services Web, allant des sites d'annuaires de services aux simples listes. Les annuaires font appel

à UDDI, norme qui permet aux fournisseurs de services et aux consommateurs de se trouver les uns les autres et de communiquer. UDDI permet aux entreprises de rechercher des services sur le Web qui conviennent à leurs besoins. A l'aide d'UDDI, vous pouvez, par exemple, spécifier certains critères, tels que le prix le plus bas pour un service particulier ou le renvoi de certaines informations.

DREAMWEAVER CS3


557 un service Web.

Pour incorporer un service Web à une page Web, vous devez créer un proxy. Le proxy fournit à la page Web les informations nécessaires pour communiquer avec le service Web et lui permet d'accéder aux méthodes fournies par le service Web.

Pour créer un proxy à partir du fichier WSDL, utilisez un générateur de proxy. Une fois le proxy créé, vous pouvez l'installer

• ordinateur local sur lequel vous développez le consommateur de services Web ;

• ordinateur serveur exécutant le serveur d'application. Pour déployer une page Web et établir la communication avec le fournisseur du service Web, vous devez installer le proxy sur le serveur.

la fonctionnalité du service opérationnelle.

Voir aussi

« Ajout d'un service Web à une page » à la page 560

Recherche de fournisseurs de services Web

Ce sont les fournisseurs de services qui donnent accès aux services Web. En général, le fournisseur de services permet aux pages Web d'accéder à son service Web par l'intermédiaire d'un annuaire Web qui gère un répertoire des services auxquels vous pouvez accéder. Voici quelques-uns des sites Web (en anglais) qui fournissent ce genre d'annuaire :

•

X Methods à l'adresse http://www.xmethods.net

•

Annuaire Microsoft UDDI à l'adresse http://uddi.microsoft.com/default.aspx

Ces annuaires font appel au service UDDI (Universal Description, Discovery and Integration). Il s'agit d'un annuaire de services de commerce électronique ouvert qui forme un forum dans lequel les entreprises peuvent se présenter et décrire les biens ou services qu'elles ont à offrir aux autres entreprises. L'administration de l'annuaire s'effectue par un groupe de sociétés appelées opérateurs . Les opérateurs s'engagent à partager toute information publique sur les inscrits avec les autres opérateurs et les utilisateurs du service, et à gérer l'interfonctionnement des multiples nœuds hôtes du réseau de services

UDDI. Parallèlement aux services Web publics, il existe également des annuaires UDDI privés disponibles sur abonnement.

La spécification UDDI repose sur les normes Internet existantes pour garantir qu'elle est indépendante des diverses platesformes et mises en œuvre.

Composants logiciels des services Web

Pour qu'une page Web puisse accéder à un service Web et l'utiliser, elle doit être capable de communiquer avec le service et connaître la description de la fonctionnalité offerte, les méthodes qu'elle peut appeler et les paramètres que le service renvoie. Le langage WSDL (Web Service Description Language) permet d'établir la description XML du service. Chaque service Web fournit un WSDL qui décrit le mode de liaison au service, les méthodes que la page Web peut appeler, ainsi que les entrées et sorties de données. Le WSDL peut résider dans un fichier ou être généré par le service Web au moment de l'exécution.

La communication entre la page Web demandant le service et le service Web se fait par l'intermédiaire du protocole SOAP

(Simple Object Access Protocol). Ce protocole XML permet à un client Web d'accéder aux méthodes et paramètres du service Web et de les appeler.

Voir aussi

« Ajout d'un proxy de services Web à l'aide de la description WSDL » à la page 559

DREAMWEAVER CS3


558

Références sur les services Web

Pour plus d'informations sur les services Web et les technologies sous-jacentes qui leurs sont associées, visitez les sites Web

•

Spécifications WSDL à l'adresse http://www.w3.org/TR/wsdl

•

Spécifications UDDI à l'adresse http://www.uddi.org/specification.html

•

Spécifications XML à l'adresse http://www.w3.org/TR/REC-xml

•

Spécifications SOAP à l'adresse http://www.w3.org/TR/SOAP/

A propos des générateurs de proxy

Les générateurs de proxy créent un proxy de services Web. Il s'agit d'un composant logiciel dont une page Web se sert pour communiquer avec le fournisseur du service Web. Le proxy est créé à partir du langage WSDL (Web Service Description

Language) qui décrit le service Web. Selon la technologie de serveur pour laquelle vous souhaitez développer les consommateurs de services Web, il vous faudra peut-être installer et configurer un générateur de proxy qui prend en charge cette technologie.

Dreamweaver installe le générateur de proxy Axis, qui prend en charge les services Web JSP. Axis est un générateur de proxy source ouvert qui est distribué au sein du projet Apache SOAP. De plus, Dreamweaver vous permet d'ajouter des générateurs de proxy qui prennent en charge les implémentations de services Web d'autres fournisseurs ou de nouvelles technologies de services Web.

Remarque :

Dreamweaver installe par défaut tous les logiciels nécessaires à l'utilisation d'Axis.

Pour plus d'informations sur Axis, consultez le site Web Apache Axis à l'adresse http://ws.apache.org/axis/ .

O

btention de générateurs de proxy supplémentaires

Pour installer un générateur de proxy qui n'est pas livré avec Dreamweaver, vous devez vous procurer le générateur de proxy et tout composant logiciel connexe auprès du fournisseur. En général, il est possible de télécharger les fichiers nécessaires à partir du site Web du fournisseur.

Certains générateurs de proxy créent des proxy qui dépendent d'autres bibliothèques de logiciels ; pour que le générateur de proxy puisse y accéder, ces dernières doivent être correctement installées. Par exemple, le générateur de proxy Axis crée des proxy qui dépendent de la bibliothèque Apache SOAP, qui elle-même dépend d'autres bibliothèques de logiciels.

Lorsque vous sélectionnez un générateur de proxy, consultez la documentation d'accompagnement et vérifiez que vous disposez de l'ensemble des composants et bibliothèques de logiciels pour pouvoir les installer et les configurer.

Une fois le générateur de proxy installé et configuré, vous devez le configurer pour qu'il fonctionne avec Dreamweaver.

Remarque :

A l'heure actuelle, le développement de services Web avec Dreamweaver ne peut se faire que dans un environnement Windows. Pour développer des pages accédant à des services Web sous Macintosh, il vous faut utiliser un autre serveur d'application sous Windows NT/2000/XP ou UNIX, sur lequel exécuter le proxy de services Web et son environnement d'application.

Configuration d'un générateur de proxy pour qu'il fonctionne avec Dreamweaver

Lorsque vous installez un générateur de proxy de services Web, vous devez le configurer pour qu'il fonctionne avec

Dreamweaver.

1

Choisissez Fenêtre > Composants pour ouvrir le panneau Composants.

2

Dans le panneau Composants, choisissez Services Web dans le menu déroulant figurant dans le coin supérieur gauche du panneau, puis cliquez sur le bouton Plus (+) et sélectionnez Ajouter à l'aide de WSDL.

3

Dans la boîte de dialogue Ajouter à l'aide de WSDL, choisissez Modifier la liste des générateurs de proxy dans le menu déroulant Générateur de proxy.

4

Cliquez sur Nouveau, sélectionnez un générateur de proxy dans le menu déroulant, puis cliquez sur Terminé.

•

Pour supprimer un générateur de proxy de la liste, sélectionnez-le, puis cliquez sur le bouton Supprimer.

DREAMWEAVER CS3


559

•

Pour modifier un générateur de proxy, sélectionnez-le dans la liste, puis cliquez sur Modifier. Effectuez vos modifications dans la boîte de dialogue qui s'affiche.

•

Pour créer une copie du générateur de proxy, sélectionnez-le dans la liste, puis cliquez sur Dupliquer.

Remarque :

Le générateur de proxy de ColdFusion MX n'est pas modifiable.

5

Sélectionnez Générateur de proxy par défaut pour configurer le générateur de proxy sélectionné ou pour en configurer

N om

nom de l'instance du générateur de proxy à afficher dans le menu déroulant.

Modèles de serveur pris en charge

liste des modèles de serveur que le générateur de proxy prend en charge. Modifiez la liste

à l'aide des boutons Plus (+) et Moins (-).

Cliquez sur le bouton Plus (+) pour afficher la boîte de dialogue Sélectionner les modèles de serveur. Sélectionnez un modèle de serveur dans la liste des modèles disponibles, puis cliquez sur OK. Pour en sélectionner plusieurs, maintenez la touche Ctrl enfoncée et effectuez vos sélections dans la liste.

Commande de génération de proxy

génère le code source du proxy à partir des informations WSDL. Vous pouvez utiliser

Commande de compilation proxy

compile le code source du proxy en code exécutable.

Introspection du proxy compilé

introspecte le proxy compilé en sélectionnant un introspecteur dans le menu déroulant.

Dossier de destination

dossier dans lequel placer le proxy de services Web compilé et son code source.

Lorsque Dreamweaver lit la description WSDL d'un service Web, Dreamweaver effectue les opérations suivantes sur les champs du générateur de proxy par défaut :

•

Il lit le WSDL sous forme d'entrée pour trouver le service Web.

•

Il crée un proxy de services Web à l'aide de l'environnement d'exécution spécifié.

•

Il compile le proxy à l'aide du compilateur spécifié.

•

Il renvoie le code source du proxy et le proxy compilé dans le dossier de destination spécifié.

Ajout d'un proxy de services Web à l'aide de la description WSDL

Après avoir spécifié un générateur de proxy et configuré les modèles de serveur de services Web à prendre en charge, vous devez identifier un service Web qui fournit la fonctionnalité souhaitée et générer le proxy correspondant.

1

Ouvrez la page à laquelle ajouter le service Web.

2

Dans le panneau Composants (Fenêtre > Composants), choisissez Services Web dans le menu déroulant figurant dans le coin supérieur gauche du panneau, puis cliquez sur le bouton Plus (+) et sélectionnez Ajouter à l'aide de WSDL.

3

Indiquez l'URL du fichier WSDL à utiliser de l'une des manières suivantes :

•

Si vous connaissez l'URL du fichier WSDL, saisissez-la dans la zone URL de la section WSDL. Cette URL sert à générer le proxy et les informations de script du service Web.

•

Si vous ne connaissez pas l'URL du fichier WSDL, cliquez sur le bouton de navigation UDDI (icône en forme de globe) pour naviguer jusqu'à un répertoire de services Web, sélectionnez l'un des annuaires de services Web, ou copiez et collez l'URL du service Web dans la zone de texte WSDL.

Remarque :

Vous pouvez modifier la liste des annuaires de services Web pour inclure des répertoires de services Web supplémentaires ou des fournisseurs de services Web particuliers.

4

Dans le menu déroulant Générateur de proxy, sélectionnez un générateur de proxy prenant en charge votre modèle de serveur des services Web.

5

Assurez-vous que le générateur de proxy est installé et configuré sur le système, puis cliquez sur OK.

Le générateur de proxy crée un proxy pour le service Web et l'introspecte. L' introspection est le processus au cours duquel le générateur de proxy interroge la structure interne du proxy de services Web et rend ses interfaces, méthodes et propriétés accessibles par l'intermédiaire de Dreamweaver.

DREAMWEAVER CS3


560

Le service Web peut désormais être utilisé dans le site et s'affiche dans le panneau Composants. Vous pouvez à présent ajouter le service Web à une page.

Voir aussi

« Composants logiciels des services Web » à la page 557

Modification de la liste de sites des services Web UDDI

Le sélecteur des services Web fournit une liste d'annuaires de services Web UDDI à partir desquels vous pouvez sélectionner des services Web. Vous pouvez modifier cette liste en ajoutant ou en modifiant des annuaires de services Web.

1

Dans le panneau Composants (Fenêtre > Composants), choisissez Services Web dans le menu déroulant figurant dans le coin supérieur gauche du panneau, puis cliquez sur le bouton Plus(+) pour ajouter un service Web.

2

Dans le sélecteur des services Web, cliquez sur l'icône en forme de globe, puis choisissez Modifier la liste des sites UDDI dans le menu déroulant.

3

Complétez les options de la boîte de dialogue Site UDDI, puis cliquez sur Terminé.

•

Pour ajouter un nouveau site ou modifier un site existant, cliquez sur le bouton Nouveau ou Modifier. Entrez le nom et l'URL d'un site Web UDDI, puis cliquez sur OK.

•

Pour supprimer un site existant, sélectionnez le site concerné dans la liste, puis cliquez sur le bouton Supprimer.

Ajout d'un service Web à une page

Après avoir sélectionné un service Web, généré son proxy et ajouté ce dernier au panneau Composants, insérez-le dans une page.

L'exemple suivant montre le panneau Composants dans lequel le proxy de services Web

Helloworld

a été ajouté. Le proxy

Helloworld

fournit une méthode, sayHello

Hello World ».

L'exemple ci-dessous permet de lancer le service Web

HelloWorld

à l'aide de ColdFusion.

1

Dans la fenêtre de document, passez en mode Code, puis faites glisser la méthode sayHello

sur le code HTML.

Dreamweaver ajoute la méthode et les paramètres fictifs à la page.

2

Modifiez le code inséré en utilisant les noms d'instances de service, les types de données et les valeurs de paramètre qui conviennent au service Web. Le service Web fournit des descriptions des types de données et des valeurs de paramètre.

Dans l'exemple ColdFusion suivant, le service Web est placé entre des balises cfinvoke

. Lors du développement d'un service

Web dans ColdFusion, lancez le service Web et appelez ses méthodes à l'aide de

<cfinvoke>

.

DREAMWEAVER CS3


561

<html>

<head>

<title>Web Service</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<cfinvoke webservice="http://www.mysite.com:8500:8500/helloworld/HelloWorld.cfc?wsdl" method="sayHello" returnvariable="aString">

</cfinvoke>

</body>

</html>

3

Pour lier une valeur renvoyée à un élément visuel, basculez en mode Création et insérez sur la page un élément visuel compatible avec les liaisons de données. Revenez au mode Code, puis tapez le code approprié pour lier la valeur renvoyée

à l'élément visuel. Lors de la création de services Web, consultez la documentation du fournisseur de technologie pour connaître la syntaxe permettant de lancer le service et d'afficher les valeurs renvoyées à la page.

Dans cet exemple, la valeur de la variable aString

est renvoyée à l'aide de la balise ColdFusion

<cfoutput>

. Le message «

The web service says: Hello world!

» s'affiche alors dans la page.

<html>

<head>

<title>Web Service</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<cfinvoke webservice="http://www.mysite.com:8500/helloworld/HelloWorld.cfc?wsdl" method="sayHello" returnvariable="aString">

</cfinvoke>

The web service says: <cfoutput>#aString#</cfoutput>

</body>

</html>

4

Lorsque vous déployez des pages Web sur un serveur de production, Dreamweaver copie automatiquement les pages, le proxy et les bibliothèques requises sur le serveur Web.

Remarque :

Si vous développez l'application alors que le proxy est installé sur un ordinateur différent de celui sur lequel les pages ont été créées ou si vous utilisez un outil de gestion de site qui ne copie pas tous les fichiers connexes sur le serveur, veillez

à bien déployer le proxy et tous les fichiers de bibliothèque associés. Dans le cas contraire, vos pages ne pourront pas communiquer avec l'application de service Web.

Ajout d'un service Web à l'aide d'une classe de proxy

Sélectionnez un lecteur .NET DLL Reader ou JSP local pour introspecter des proxy de services Web lors de l'utilisation de la plate-forme de développement .NET ou JSP.

1

Choisissez Fenêtre > Composants pour ouvrir le panneau Composants.

2

Dans le panneau Composants, choisissez Services Web dans le menu déroulant figurant dans le coin supérieur gauche du panneau, puis cliquez sur le bouton Plus (+) et sélectionnez Ajouter à l'aide des classes de proxy.

3

Saisissez l'emplacement du lecteur de classes de proxy dans la zone de texte ou recherchez le fichier.

4

Sélectionnez un lecteur de proxy dans le menu déroulant et cliquez sur OK.

Il existe deux lecteurs de proxy par défaut :

• le lecteur .NET DLL Reader pour les types de document ASP .NET ;

• le lecteur de classes Java pour les types de document JSP.

DREAMWEAVER CS3


562

Ajout de comportements de serveur personnalisés

A propos des comportements de serveur personnalisés

Dreamweaver est livré avec un ensemble de comportements de serveur qui vous permettent d'ajouter aisément des options dynamiques à un site. Si vous souhaitez accroître les fonctionnalités de Dreamweaver, vous pouvez créer de nouveaux comportements de serveur en fonction de vos besoins spécifiques ou en télécharger depuis le site Web de Dreamweaver

Exchange.

Avant de créer vos propres comportements de serveur, vérifiez sur le site Web de Dreamweaver Exchange que le comportement de serveur offrant la fonctionnalité que vous souhaitez ajouter à votre site Web n'a pas déjà été créé par un autre développeur. Il est fréquent que des développeurs tiers créent et testent des comportements de serveur qui répondent aux besoins d'autres personnes.

Accès à Dreamweaver Exchange

1

Dans Dreamweaver accédez à Dreamweaver Exchange de l'une des façons suivantes :

•

Sélectionnez Aide > Dreamweaver Exchange.

•

Sélectionnez Fenêtre > Comportements de serveur, cliquez sur le bouton Plus (+), puis choisissez Obtenir d'autres comportements de serveur.

La page Web de Dreamweaver Exchange apparaît dans votre navigateur.

2

Connectez-vous à Exchange en utilisant votre ID Adobe personnel ou, si vous n'avez pas encore créé d'ID Dreamweaver

Exchange, suivez les instructions d'ouverture d'un compte Adobe.

Installation d'un comportement de serveur ou d'une autre extension dans Dreamweaver

1

Pour démarrer Extension Manager, choisissez Commandes > Gérer les extensions.

2

Choisissez Fichier > Installer un paquet dans Extension Manager.

Pour plus d'informations, voir Utilisation de Extension Manager .

Déroulement du travail des comportements de serveur personnalisés

Si vous êtes développeur et que vous maîtrisez la technologie ColdFusion, ASP.NET, JavaScript, VBScript, PHP ou Java, vous pouvez rédiger vos propres comportements de serveur. La création d'un comportement de serveur implique les opérations suivantes :

•

Rédiger un ou plusieurs blocs de code exécutant l'action requise.

•

Indiquer le point d’insertion du bloc de code dans le code HTML de la page.

•

Si le comportement de serveur requiert que la valeur d'un paramètre soit spécifiée, créer une boîte de dialogue invitant le développeur Web qui applique le comportement à fournir la valeur appropriée.

•

Tester le comportement de serveur avant de le rendre disponible à d'autres utilisateurs.

Voir aussi

« Demande d'un paramètre pour le comportement de serveur » à la page 569

« Test des comportements de serveur » à la page 571

Utilisation du Créateur de comportements de serveur

Utilisez le Créateur de comportements de serveur pour ajouter le ou les blocs de code que le comportement doit insérer dans la page.

1

Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+), puis choisissez Nouveau comportement de serveur.

DREAMWEAVER CS3


563

2

Dans le menu déroulant Type de document, sélectionnez le type de document pour lequel vous développez le comportement de serveur.

3

Dans la zone Nom, entrez le nom du comportement de serveur.

4

(Facultatif) Pour copier un comportement de serveur existant pour l'ajouter au comportement en cours de création, activez l'option Copier un comportement de serveur existant, puis sélectionnez le comportement voulu dans le menu déroulant Comportement à copier. Cliquez sur OK.

La boîte de dialogue Créateur de comportements de serveur s'affiche.

5

Pour ajouter un nouveau bloc de code, cliquez sur le bouton Plus (+), nommez le bloc de code, puis cliquez sur OK.

Le nom que vous avez entré apparaît dans le Créateur de comportements de serveur, tandis que les balises de script appropriées s'affichent dans la zone Bloc de code.

6

Dans la zone Bloc de code, tapez le code d'exécution nécessaire pour implémenter le comportement de serveur.

Remarque :

Lorsque vous entrez le code dans la zone Bloc de code, vous ne pouvez insérer qu'une balise ou qu'un bloc de code pour chaque bloc de code nommé (par exemple,

monComportement_bloc1

,

monComportement_bloc2

,

monComportement_blocn

, etc.). Pour saisir plusieurs balises ou blocs de code, créez un bloc de code individuel pour chaque

élément. Vous pouvez également copier et coller le code d'autres pages.

7

Placez le point d'insertion dans le bloc de code à l'endroit où vous souhaitez insérer le paramètre, ou sélectionnez une chaîne à remplacer par un paramètre.

8

Cliquez sur le bouton Insérer le paramètre dans le bloc de code.

9

Tapez le nom du paramètre dans la zone Nom de paramètre (par exemple,

Session


Le paramètre vient s'insérer dans le bloc de code à l'endroit où vous avez placé le point d'insertion avant la définition du paramètre. Si vous avez sélectionnez une chaîne, chaque occurrence de la chaîne sélectionnée dans le bloc de code est remplacée par un marqueur de paramètre (par exemple,

@@Session@@

).

10

Dans le menu déroulant Insérer code, choisissez une option indiquant l'endroit où incorporer les blocs de code.

11

(Facultatif) Pour spécifier des informations supplémentaires sur le comportement de serveur, cliquez sur le bouton

Avancé.

12

Pour créer d'avantage de blocs de code, répétez les étapes 5 à 11.

13

Si le comportement de serveur requiert que des paramètres lui soient fournis, vous devez créer une boîte de dialogue qui accepte les paramètres de la personne appliquant le comportement. Reportez-vous au lien ci-dessous.

14

Après avoir exécuté les étapes requises pour créer le comportement de serveur, cliquez sur OK.

Le panneau Comportements de serveur répertorie le comportement de serveur.

15

Testez-le pour vous assurer qu'il fonctionne correctement.

Voir aussi

« Répétitions des blocs de code avec la directive de boucle » à la page 567

« Instructions pour le codage » à la page 571


« Ajout de comportements de serveur personnalisés » à la page 562

O ptions avancées

Une fois le code source spécifié et l'emplacement de chaque bloc de code inséré, le comportement de serveur est complètement défini. Dans la plupart des cas, il est inutile de spécifier d'autres informations.

Si vous êtes un utilisateur chevronné, vous pouvez définir les options suivantes :

Identificateur

Indique si le bloc de code doit être traité comme un identificateur.

DREAMWEAVER CS3


564

Par défaut, chaque bloc de code constitue un identificateur. Si Dreamweaver trouve un bloc de code identificateur dans un document, il affiche le comportement dans le panneau Comportements de serveur. Activez l'option Identificateur pour indiquer si le bloc de code doit être traité comme tel.

Au moins un des blocs de code du comportement de serveur doit être un identificateur. Ne définissez pas comme identificateur un bloc de code répondant aux conditions suivantes : ce même bloc de code est utilisé dans d'autres comportements de serveur ; il s'agit d'un bloc de code tellement simple qu'il peut se produire naturellement dans la page.

T itre du comportement de serveur

Indique le titre du comportement dans le panneau Comportements de serveur.

Lorsque le créateur de la page clique sur le bouton Plus (+) du panneau Comportements de serveur, le titre du nouveau comportement s'affiche dans le menu déroulant. Lorsqu'un créateur applique une occurrence d'un comportement de serveur à un document, le comportement est répertorié dans la liste des comportements appliqués du panneau

Comportements de serveur. Dans la zone Titre du comportement de serveur, spécifiez le contenu du menu déroulant

Plus (+) et de la liste de comportements appliqués.

Le champ comporte par défaut la valeur du nom que vous avez indiqué dans la boîte de dialogue Nouveau comportement entre parenthèses après le nom du comportement de serveur.

Set Session Variable (@@Name@@, @@Value@@)

Si l'utilisateur accepte la valeur par défaut, tout ce qui précède les parenthèses s'affiche dans le menu déroulant Plus (+) (par exemple, Set Session Variable). Le nom et les paramètres sont répertoriés dans la liste des comportements appliqués, par exemple, Set Session Variable (« abcd », « 5 »).

Bloc de code à sélectionner

Sélectionner indique le bloc de code sélectionné lorsque l'utilisateur choisit le comportement dans le panneau Comportements de serveur.

à sélectionner ». Si vous appliquez le comportement de serveur, puis que vous le sélectionnez dans le panneau

Comportements de serveur, le bloc désigné est sélectionné dans la fenêtre de document. Par défaut, Dreamweaver sélectionne le premier bloc de code ne se trouvant pas au-dessus de la balise html

. Si tous les blocs de code se trouvent audessus de la balise html

, le premier est sélectionné. Les utilisateurs chevronnés peuvent indiquer le bloc de code devant être sélectionné.

Création de blocs de code

Les blocs de code ajoutés dans le Créateur de comportements de serveur sont encapsulés dans un comportement de serveur figurant dans le panneau Comportements de serveur. Le code peut correspondre à tout code d'exécution conforme au modèle de serveur spécifié. Si vous choisissez ColdFusion comme type de document pour votre comportement de serveur personnalisé, par exemple, le code rédigé doit correspondre à un code ColdFusion valide pouvant s'exécuter sur un serveur d'application ColdFusion.

Vous pouvez créer les blocs de code soit directement depuis le Créateur de comportements de serveur, soit en les copiant et les collant depuis d'autres sources. Chaque bloc de code ajouté dans le Créateur de comportements de serveur doit représenter une balise ou un bloc de script unique. Si vous devez insérer plusieurs blocs de balise, divisez-les en blocs de code distincts.

Conditions dans les blocs de code

Dreamweaver permet de créer des blocs de code contenant des instructions de contrôle à exécution conditionnelle. Le

Créateur de comportements de serveur utilise des instructions if

, elseif

et else

et peut contenir des paramètres de comportement de serveur. Cela permet d'insérer plusieurs blocs de texte secondaire selon les valeurs des relations OR entre les paramètres de comportement de serveur.

L'exemple suivant montre les instructions if

, elseif

et else

. Les crochets ([ ]) indiquent que le code est facultatif, alors que l'astérisque (*) signale qu'il existe zéro occurrence ou davantage. Pour n'exécuter un bloc de code, ou une partie de celui-ci, que si certaines conditions sont remplies, utilisez la syntaxe suivante :

<@ if (

expression1

) @>

conditional text1

[<@ elseif (

expression2

) @>

conditional text2

]*[<@ else @>

conditional text3

]<@ endif @>

DREAMWEAVER CS3


565

Les expressions de condition peuvent correspondre à toute expression JavaScript évaluable à l'aide de la fonction eval()

de

JavaScript, et peuvent inclure un paramètre de comportement de serveur indiqué par des symboles @@. (Ces symboles sont nécessaires pour distinguer le paramètre des variables et mots-clés JavaScript.)

Utilisation efficace des expressions conditionnelles

En utilisant les directives if

, else

et elseif

au sein d'une balise XML insertText

, le texte participant est prétraité pour résoudre les directives if

et déterminer le texte à inclure dans le résultat. Les directives if

et elseif

interprètent l'expression comme un argument. L'expression de condition est identique aux expressions de condition JavaScript et peut également contenir des paramètres de comportement de serveur. Les directives de ce type permettent d'effectuer un choix parmi plusieurs blocs de code possibles, et ce en fonction des valeurs des paramètres de comportement de serveur ou des relations entre ces paramètres.

Le code JSP indiqué ci-dessous, par exemple, provient d'un comportement de serveur Dreamweaver utilisant le bloc de code conditionnel :

@@rsName@@.close();

<@ if (@@callableName@@ != '') @>

@@callableName@@.execute();

@@rsName@@ = @@callableName@@.getResultSet();<@ else @>

@@rsName@@ = Statement@@rsName@@.executeQuery();

<@ endif @>

@@rsName@@_hasData = @@rsName@@.next();

Le bloc de code conditionnel débute par

<@ if (@@callableName@@ != '') @>

et se termine par

<@ endif @>

. Selon le code, si l'utilisateur entre une valeur pour le paramètre

@@callableName@@

dans la boîte de dialogue Paramètre du comportement de serveur, c'est-à-dire si la valeur du paramètre

@@callableName@@

n'est ps nulle, ou

(@@callableName@@

!= '')

, le bloc de code conditionnel est remplacé par les instructions suivantes :

@@callableName@@.execute();

@@rsName@@ = @@callableName@@.getResultSet();

Dans le cas contraire, le bloc de code est remplacé par l'instruction suivante :

@@rsName@@ = Statement@@rsName@@.executeQuery();

Voir aussi

« Répétitions des blocs de code avec la directive de boucle » à la page 567

Positionnement d'un bloc de code

Lorsque vous créez des blocs de code à l'aide du Créateur de comportements de serveur, vous devez préciser l'endroit où les insérer dans le code HTML de la page.

Par exemple, si vous insérez un bloc de code au-dessus de la balise

<html>

d'ouverture, vous devez ensuite en indiquer la position par rapport aux autres balises, scripts et comportements de serveur figurant dans cette section du code HTML de la page. Il peut s'agir, par exemple, de placer un comportement avant ou après une requête portant sur des jeux d'enregistrements, qui pourrait déjà figurer dans le code de la page au-dessus de la balise

<html>

d'ouverture.

Les options disponibles dans le menu déroulant Position relative varient en fonction de la position sélectionnée dans le menu déroulant Insérer code. Il ne s'agit donc que des options pertinentes pour la partie concernée de la page. Par exemple, lorsque vous activez l'option Au-dessus de la balise

<html>

dans le menu déroulant Insérer code, les options de positionnement disponibles dans le menu déroulant Position relative reflètent les choix pertinents pour la partie concernée de la page.

Le tableau suivant présente les options d'insertion des blocs de code et les positions relatives correspondantes :

DREAMWEAVER CS3


566

O ptions du menu Insérer code

O ptions de position relative

A u

dessus de

l a ba l ise

< htm l>

A u dessous de l a ba l ise </ htm l>

•

A u d

é but du fichier

•

J uste avant l es j eu x d ' enregistrements

•

J uste apr

è s

l es

j eu x d

' enregistrements

•

J uste au dessus de l a ba l ise

<html>

•

P osition personna l is

é e

•

A vant l a fin du fichier

•

A vant

l a fermeture du

j eu d

' enregistrements

•

A pr è s l a fermeture du j eu d ' enregistrements

•

A pr

è s

l a ba l ise

</html>

•

P osition personna l is é e

R e l atif

à une ba l ise sp

é cifique

R e l atif

à l a s

él ection

C hoisisse z une ba l ise dans

l e menu d

é rou l ant

B a l ise

, puis choisisse z parmi

l es options de positionnement des ba l ises.

A vant

l a s

él ection

A pr è s l a s él ection

R emp l acer

l a s

él ection

E nve l opper l a s él ection

Pour indiquer une position personnalisée, vous devez attribuer une épaisseur au bloc de code. Utilisez l'option Position personnalisée lorsque vous voulez insérer plusieurs blocs de code dans un ordre particulier. Par exemple, pour insérer une série de trois blocs de code dans un certain ordre après les blocs de code qui ouvrent des jeux d'enregistrements, tapez une

épaisseur de 60 pour le premier bloc, de 65 pour le deuxième et de 70 pour le troisième.

Par défaut, Dreamweaver attribue une épaisseur de 50 à tous les blocs de code d'ouverture de jeux d'enregistrement insérés au-dessus de la balise

<html>

. Si plusieurs blocs ont la même épaisseur, Dreamweaver les classe de façon aléatoire.

Voir aussi


« Instructions pour le codage » à la page 571

« A propos des comportements de serveur personnalisés » à la page 562

« Création de blocs de code » à la page 564

« Test des comportements de serveur » à la page 571

Placement d'un bloc de code (instructions générales)

1

A l'aide du Créateur de comportements de serveur, rédigez un bloc de code.

2

Dans la boîte de dialogue Créateur de comportements de serveur, sélectionnez la position dans laquelle insérer le bloc de code dans le menu déroulant Insérer code.

3

Dans la boîte de dialogue Créateur de comportements de serveur, sélectionnez une position relative à celle qui est sélectionnée dans le menu déroulant Insérer code.

4

Si vous avez terminé la création du bloc de code, cliquez sur OK.

Le comportement de serveur est répertorié dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur) ; cliquez sur le bouton Plus (+) pour l'afficher.

5

Testez-le pour vous assurer qu'il fonctionne correctement.

Positionnement d'un bloc de code par rapport à une autre balise de la page

1

Dans le menu déroulant Insérer code, choisissez Relatif à une balise spécifique.

DREAMWEAVER CS3


567

2

Dans la zone Balise, saisissez la balise ou sélectionnez-en une dans le menu déroulant.

N'entrez pas les crochets de la balise (

<>

).

3

Spécifiez un emplacement relatif à la balise en choisissant une option dans le menu déroulant Position relative.

Positionnement d'un bloc de code par rapport à une balise sélectionnée par le créateur de la page

1

Dans le menu déroulant Insérer code, choisissez Relatif à la sélection.

2

Spécifiez un emplacement relatif à la balise en choisissant une option dans le menu déroulant Position relative.

Vous pouvez insérer votre bloc de code immédiatement avant ou après la sélection. Vous pouvez également remplacer la sélection par votre bloc de code ou renvoyer le bloc de code à la ligne autour de la sélection.

Pour envelopper le bloc de code autour d'une sélection, cette dernière doit se composer d'une balise d'ouverture et d'une balise de fermeture juxtaposées, comme suit:

<CFIF Day=”Monday”></CFIF>

Insérez la balise d'ouverture du bloc de code s'insère avant la balise d'ouverture de la sélection et sa balise de fermeture après la balise de fermeture de la sélection.

Répétitions des blocs de code avec la directive de boucle

Pour répéter un bloc de code, ou une partie de celui-ci, un certain nombre de fois, utilisez la syntaxe suivante :

<@ loop (

@@param1@@,@@param2@@

) @>

code block

<@ endloop @>

Lors de la création de comportements de serveur, vous pouvez utiliser des structures de boucle pour répéter un bloc de code un nombre défini de fois.

<@ loop (

@@param1@@,@@param2@@,@@param3@@,@@param_n@@

) @>code block

<@ endloop @>

La directive de boucle accepte des arguments se présentant sous la forme d'une liste de tableaux de paramètre séparés par des virgules. Dans ce cas, les arguments des tableaux de paramètre permettent aux utilisateurs de fournir plusieurs valeurs pour un même paramètre. Le texte répétitif sera dupliqué n fois, n correspondant à la longueur des arguments des tableaux de paramètre. Si plusieurs arguments de tableaux de paramètre sont indiqués, tous les tableaux doivent être de la même longueur. Lors de la n ième évaluation de la boucle, les n ièmes éléments des tableaux de paramètre remplacent les occurrences du paramètre correspondant dans le bloc de code.

Lorsque vous créez une boîte de dialogue pour le comportement de serveur, vous pouvez ajouter une commande à la boîte de dialogue qui permet au concepteur de la page de créer des tableaux de paramètre. Dreamweaver inclut une commande de tableau simple que vous pouvez utiliser pour créer des boîtes de dialogue. Cette commande, qui s'appelle Liste de champs de texte séparés par des virgules, est accessible à partir du Créateur de comportements de serveur. Pour créer des éléments d'interface utilisateur plus complexes et apprendre à concevoir une boîte de dialogue contenant une commande de création de tableaux (commande de grille, par exemple), consultez la documentation API.

Vous pouvez imbriquer autant de directives conditionnelles ou de boucle que vous le souhaitez au sein d'une même directive conditionnelle. Ainsi pouvez-vous préciser, par exemple, que si une expression est vraie, la boucle doit être exécutée.

L'exemple suivant montre comment utiliser des blocs de code répétitifs pour créer des comportements de serveur (cet

<CFSTOREDPROC procedure="AddNewBook" datasource=#MM_connection_DSN# username=#MM_connection_USERNAME# password=#MM_connection_PASSWORD#>

<CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryID#" cfsqltype="CF_SQL_INTEGER">

<CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#" cfsqltype="CF_SQL_VARCHAR">

</CFSTOREDPROC>

DREAMWEAVER CS3


568

Dans cet exemple, la balise

CFSTOREDPROC

peut comprendre zéro ou davantage de balises

CFPROCPARAM

. Toutefois, sans prise en charge de la directive de boucle, il est impossible d'inclure les balises

CFPROCPARAM

au sein de la balise

CFSTOREDPROC insérée. Si vous vous inspiriez de cet exemple pour créer un comportement de serveur sans la directive de boucle, il vous faudrait le diviser en deux participants

CFSTOREDPROC

principale et une balise

CFPROCPARAM

dont le type de participant serait multiple.

Avec la directive de boucle, il est possible de rédiger cette même procédure comme suit :

<CFSTOREDPROC procedure="@@procedure@@" datasource=#MM_@@conn@@_DSN# username=#MM_@@conn@@_USERNAME# password=#MM_@@conn@@_PASSWORD#>

<@ loop (@@paramName@@,@@value@@,@@type@@) @>

<CFPROCPARAM type="IN" dbvarname="@@paramName@@" value="@@value@@" cfsqltype="@@type@@">

<@ endloop @>

</CFSTOREDPROC>

Remarque :

Les nouvelles lignes situées après chaque élément « » sont ignorées.

Supposons que l'utilisateur ait tapé les valeurs de paramètre suivantes dans la boîte de dialogue Créateur de comportements de serveur : procedure = "proc1" conn = "connection1" paramName = ["@CategoryId", "@Year", "@ISBN"] value = ["#Form.CategoryId#", "#Form.Year#", "#Form.ISBN#"] type = ["CF_SQL_INTEGER", "CF_SQL_INTEGER", "CF_SQL_VARCHAR"]

Le comportement de serveur insérerait alors le code d'exécution suivant dans la page :

<CFSTOREDPROC procedure="proc1" datasource=#MM_connection1_DSN# username=#MM_connection1_USERNAME# password=#MM_connection1_PASSWORD#>

<CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryId#" cfsqltype="CF_SQL_INTEGER">

<CFPROCPARAM type="IN" dbvarname="@Year" value="#Form.Year#" cfsqltype="CF_SQL_INTEGER">

<CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#" cfsqltype="CF_SQL_VARCHAR">

</CFSTOREDPROC>

Remarque :

Il est impossible d'utiliser les tableaux de paramètre en dehors d'une boucle, sauf en tant que composants d'une expression de directive conditionnelle.

Utilisation des variables _length et _index de la directive de boucle

La directive de boucle comprend deux variables intégrées utilisables dans les conditions if

incorporées. Ces variables sont les suivantes :

_length

et

_index

. La variable

_length

se rapporte à la longueur des tableaux traités par la directive de boucle, alors que la variable

_index

se rapporte à l'index actuel de la directive loop elle-même. Pour que ces variables ne soient reconnues qu'en tant que directives et non en tant que paramètres à faire passer par la boucle, ne les insérez pas entre des symboles

@@

.

Un exemple d'utilisation des variables intégrées consiste à les appliquer à l'attribut import

de la directive de page. L'attribut import

requiert que les paquets soient séparés par des virgules. Si la directive loop

englobe l'intégralité de l'attribut import

, le nom d'attribut import=

ne doit sortir qu'à la première itération de la boucle (les guillemets fermants (") sont alors inclus) et aucune virgule n'apparaît à la dernière itération de la boucle. Pour ce faire, vous pouvez utiliser la variable intégrée comme suit :

DREAMWEAVER CS3


569

<@loop (@@Import@@)@>

<@ if(_index == 0)@>import="

<@endif@>@@Import@@<@if (_index == _length-1)@>"<@else@>,

<@ endif @>

<@endloop@>

Demande d'un paramètre pour le comportement de serveur

Les comportements de serveur requièrent souvent que le concepteur de la page fournisse une valeur de paramètre. Cette valeur doit être insérée avant que le code du comportement de serveur ne soit inséré dans la page.

Pour créer la boîte de dialogue, définissez dans le code les paramètres devant être fournis par le concepteur. Vous générez ensuite une boîte de dialogue pour le comportement de serveur qui invite le concepteur de la page à entrer une valeur de paramètre.

Remarque :

Un paramètre est ajouté à votre bloc de code sans votre intervention si vous spécifiez que votre code doit être inséré par rapport à une balise précise choisie par le créateur de la page (en d'autres termes, si vous choisissez Relatif à une balise spécifique dans le menu déroulant Insérer code). Le paramètre ajoute un menu Balise à la boîte de dialogue du comportement pour permettre au créateur de la page de sélectionner une balise.

Définition du paramètre dans le code de comportement de serveur

1

Saisissez un marqueur de paramètre à l'endroit du code où vous souhaitez insérer la valeur du paramètre fournie par le concepteur. Le paramètre utilise la syntaxe suivante :

@@parameterName@@

2

Insérez la chaîne formParam

entre des marqueurs de paramètre (

@@

) :

<% Session(“lang_pref”) = Request.Form(“@@formParam@@”); %>

Supposons que le comportement de serveur contienne le bloc de code suivant :

<% Session(“lang_pref”) = Request.Form(“

Form_Object_Name

”); %>

Pour imposer au concepteur de la page de fournir la valeur du paramètre

Form_Object_Name

, entourez la chaîne de marqueurs de paramètre (

@@

) :

<% Session(“lang_pref”) = Request.Form(“@@Form_Object_Name@@”); %>

Vous pouvez également mettre la chaîne en surbrillance, puis cliquer sur le bouton Insérer le paramètre dans le bloc de code.

Entrez un nom de paramètre, puis cliquez sur OK. Dreamweaver remplace toutes les occurrences de la chaîne mise en surbrillance par le nom du paramètre entouré de marqueurs.

Dreamweaver utilise les chaînes placées entre les marqueurs de paramètre comme libellé des commandes de la boîte de dialogue qu'il génère (voir la procédure ci-dessous). Dans l'exemple ci-dessus, Dreamweaver crée une boîte de dialogue avec le libellé suivant :

Remarque :

Les noms des paramètres du code de comportement de serveur ne peuvent pas comporter d'espaces. Aussi les libellés de la boîte de dialogue ne peuvent-ils pas non plus comporter d'espaces. Pour inclure des espaces dans un libellé, vous devez modifier le fichier HTML généré.

Création d'une boîte de dialogue pour votre comportement de serveur afin de demander la valeur d'un paramètre

1

Dans le Créateur de comportements de serveur, cliquez sur Suivant.

2

Pour modifier l'ordre d'affichage des commandes de la boîte de dialogue, sélectionnez un paramètre, puis cliquez sur les flèches vers le bas et vers le haut.

DREAMWEAVER CS3


570

3

Pour modifier la commande d'un paramètre, sélectionnez le paramètre voulu, puis sélectionnez une autre commande dans la colonne Afficher en tant que.

4

Cliquez sur OK.

Dreamweaver génère une boîte de dialogue comportant une commande pour chacun des paramètres définis comme devant

être fournis par le concepteur.

Affichage de la boîte de dialogue

❖

Cliquez sur le bouton Plus (+) du panneau Comportements de serveur (Fenêtre > Comportements de serveur), puis sélectionnez votre comportement de serveur personnalisé dans le menu déroulant.

Modification de la boîte de dialogue créée pour le comportement de serveur

1

Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+) et choisissez Modifier les comportements de serveur dans le menu déroulant.

2

Sélectionnez votre comportement de serveur dans la liste, puis cliquez sur Ouvrir.

3

Cliquez sur Suivant.

Une boîte de dialogue s'affiche, répertoriant tous les paramètres fournis par le créateur que vous avez définis dans votre code.

4

Pour modifier l'ordre d'affichage des commandes de la boîte de dialogue, sélectionnez un paramètre, puis cliquez sur les flèches vers le bas et vers le haut.

5

Pour modifier la commande d'un paramètre, sélectionnez le paramètre voulu, puis sélectionnez une autre commande dans la colonne Afficher en tant que.

6

Cliquez sur OK.

Modification d'un comportement de serveur

Vous pouvez modifier tout comportement de serveur créé à l'aide du Créateur de comportements de serveur, y compris les comportements de serveur que vous avez téléchargé depuis le site Web de Dreamweaver Exchange et d'autres développeurs tiers.

Si vous appliquez un comportement à une page puis le modifiez dans Dreamweaver, les occurrences de l'ancien comportement disparaissent du panneau Comportements de serveur. Le panneau Comportements de serveur recherche dans la page le code correspondant au code des comportements de serveur connus. Si le code d'un comportement de serveur change, le panneau ne reconnaît pas les versions antérieures du comportement sur la page.

Voir aussi

« Utilisation du Créateur de comportements de serveur » à la page 562

« Positionnement d'un bloc de code » à la page 565

Conservation des anciennes et les nouvelles versions du comportement dans le panneau

❖

Cliquez sur le bouton Plus (+) du panneau Comportements de serveur (Fenêtre > Comportements de serveur), choisissez Nouveau comportement de serveur, puis créez une copie de l'ancien comportement de serveur.

Modification du code d'exécution d'un comportement de serveur créé à l'aide du Créateur de comportements de serveur

1

Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+) et choisissez Modifier les comportements de serveur dans le menu déroulant.

La boîte de dialogue Modifier les comportements de serveur affiche tous les comportements de la technologie serveur courante.

2

Sélectionnez le comportement de serveur et cliquez sur Modifier.

3

Sélectionnez le bloc de code approprié et modifiez le code, les marqueurs de paramètre ou la position du bloc de code à insérer dans les pages.

DREAMWEAVER CS3


571

4

Si le code modifié ne contient pas de paramètres fournis par le créateur, cliquez sur OK.

Dreamweaver génère une nouvelle fois le comportement de serveur sans boîte de dialogue. Le nouveau comportement de serveur s'affiche dans le menu déroulant Plus (+) du panneau Comportements de serveur.

5

Si le code modifié contient des paramètres fournis par le créateur, cliquez sur Suivant.

Dreamweaver vous demande si vous voulez créer une nouvelle boîte de dialogue qui écrasera la précédente. Effectuez les modifications requises, puis cliquez sur OK.

Dreamweaver enregistre tous les changements apportés dans le fichier EDML du comportement de serveur.

Instructions pour le codage

D'une façon générale, le code de votre comportement de serveur doit être compact et robuste. Les développeurs d'applications Web sont très sensibles au code ajouté à leurs pages. Respectez les règles de codage généralement appliquées pour le langage du type de document concerné (ColdFusion, ASP.NET, JavaScript, VBScript, PHP, Visual Basic ou Java). Si vous ajoutez des commentaires, tenez compte des différents publics qui devront comprendre le code, tels que les concepteurs de pages Web et d'éléments interactifs ou tout autre développeur d'applications Web. Incluez des commentaires précis décrivant le but du code et ajoutez toutes les instructions utiles pour l'inclure dans une page.

Tenez compte des instructions de codage suivantes lors de la création de comportements de serveur :

Le contrôle des erreurs

L'un des éléments indispensables. Le code du comportement de serveur doit être en mesure de traiter les cas d'erreur avec élégance. Essayez de prévoir toutes les éventualités. Exemple : Que se passe-t-il si une demande de paramètre échoue ? Si aucun enregistrement n'est envoyé suite à une requête ?

L'utilisation de noms uniques

Permet de s'assurer que le code est clairement identifiable et d'éviter tout conflit entre le nom employé et un nom déjà utilisé dans le code existant. Si la page contient une fonction appelée hideLayer()

, une variable globale appelée

ERROR_STRING

et que le comportement de serveur insère un code utilisant ces mêmes noms, par exemple, ce comportement risque d'entrer en conflit avec le code existant.

Les préfixes de code

Permettent d'identifier les fonctions d'exécution et les variables globales insérées dans une page. Une convention consiste à employer vos propres initiales. N'utilisez jamais le préfixe

MM_

qui est exclusivement réservé à l'usage de Macromedia. Adobe a fait précéder toutes les fonctions et variables globales du préfixe

MM_

pour les empêcher d'entrer en conflit avec le code que vous écrivez. var MM_ERROR_STRING = "..."; function MM_hideLayer() {

Evitez les blocs de code similaires

de sorte que votre bloc ne ressemble pas trop au code d'autres blocs. En effet, si un bloc de code ressemble un peu trop à un autre bloc figurant sur la page, le panneau Comportements de serveur risque d'identifier par erreur ce premier bloc comme une occurrence du deuxième (ou l'inverse). Pour éviter ce problème, ajoutez par exemple un commentaire à un bloc de code pour le rendre plus unique.

Voir aussi

« A propos des comportements de serveur personnalisés » à la page 562

« Déroulement du travail des comportements de serveur personnalisés » à la page 562

T

est des comportements de serveur

Dreamweaver Exchange conseille de tester chacun des comportements de serveur que vous créez de la manière suivante :

• Appliquez le comportement à partir du panneau Comportements de serveur. S'il possède une boîte de dialogue, saisissez des données valides dans chaque champ et cliquez sur OK. Vérifiez qu'aucune erreur ne se produit lorsque le comportement est appliqué. Vérifiez que le code d'exécution du comportement de serveur apparaît dans l'inspecteur de code.

• Appliquez une nouvelle fois le comportement de serveur et saisissez des données incorrectes dans chaque champ de la boîte de dialogue. Essayez de laisser le champ vierge, de saisir des chiffres élevés ou négatifs ou des caractères non autorisés (tels que /, ?, :, *, etc.) ou d'entrer des lettres dans les champs numériques. Vous avez la possibilité de rédiger des

DREAMWEAVER CS3


572

routines de validation de formulaire pour gérer les données non valides (les routines de validation exigent un codage manuel, technique qui dépasse le cadre de cet ouvrage).

Une fois votre comportement de serveur appliqué à la page, vérifiez ce qui suit :

•

Dans le panneau Comportements de serveur, vérifiez que le nom du comportement s'affiche dans la liste des comportements ajoutés à la page.

•

Le cas échéant, vérifiez que les icônes de script côté serveur apparaissent sur la page. Les icônes de script côté serveur génériques se présentent sous la forme de blasons dorés. Pour voir ces icônes, activez Eléments invisibles (Affichage >

Assistances visuelles > Eléments invisibles).

•

En mode Code (Affichage > Code), vérifiez qu'aucun code incorrect n'a été généré.

En outre, si votre comportement de serveur insère dans le document un code établissant une connexion à une base de données, créez une base de données d'évaluation pour tester le code inséré dans le document. Vérifiez la connexion en définissant des requêtes produisant des jeux de données de différents types et de différentes tailles.

Enfin, chargez la page sur le serveur et ouvrez-la dans un navigateur. Affichez le code source de la page et vérifiez qu'aucun code HTML non valide n'a été généré par les scripts côté serveur.

Création de formulaires

A propos des formulaires

Vous pouvez utiliser Dreamweaver pour créer des formulaires contenant des champs de texte, des champs de mot de passe, des boutons radio, des cases à cocher, des menus déroulants, des boutons cliquables et d'autres objets de formulaire.

Dreamweaver permet également de rédiger le code qui valide les informations fournies par un visiteur. Par exemple, vous pouvez vérifier qu'une adresse électronique saisie par un utilisateur contient bien un symbole @ (a commercial) ou qu'un champ de texte obligatoire a bien été renseigné.

Pour plus d'informations sur les formulaires ColdFusion et ASP.NET, consultez les sections « Création de formulaires

ColdFusion MX 7

» à la page 644 et « Création de formulaires ASP.NET » à la page 655.

Rôle des formulaires côté client

Les formulaires prennent en charge le côté client de la relation client serveur. Lorsqu'un visiteur saisit des informations dans un formulaire affiché dans un navigateur Web (le client) et clique sur le bouton d'envoi, les informations sont transmises au serveur où une application ou un script côté serveur les traite. Le serveur répond en renvoyant les informations demandées à l'utilisateur (ou client) ou en exécutant une action déterminée par le contenu du formulaire.

Remarque :

Vous pouvez également envoyer des données de formulaire directement à une adresse électronique.

DREAMWEAVER CS3


573

O

bjets de formulaire

Dans Dreamweaver, les types d'entrées de formulaire sont appelés des objets de formulaire . Les objets de formulaire sont les

éléments qui permettent aux utilisateurs d'entrer des données. Vous avez la possibilité d'ajouter les objets de formulaire suivants à un formulaire :

Champs de texte

Acceptent tout type d'entrée alphanumérique. Vous pouvez afficher le texte sur une seule ligne, sur plusieurs lignes et sous la forme d'un champ de mot de passe dans lequel le texte saisi est remplacé par des astérisques ou des puces afin d'être masqué.

Remarque :

Les mots de passe et tout autre type d'informations envoyés à un serveur à l'aide d'un champ de mot de passe ne sont pas cryptés. Les données transférées peuvent donc être interceptées et lues en tant que texte alphanumérique. Aussi devezvous prévoir le cryptage systématique des données que vous souhaitez protéger.

Champs masqués

Stockent des informations saisies par un utilisateur, telles qu'un nom, une adresse électronique ou une préférence d'affichage, puis réutilisent ces informations lors de la prochaine visite de l'utilisateur sur le site.

Boutons

Exécutent des actions lorsque l'utilisateur clique dessus. Vous pouvez ajouter une étiquette ou un nom personnalisé à un bouton ou utiliser l'une des étiquettes prédéfinies : Envoyer ou Rétablir. Utilisez un bouton pour l'envoi des données du formulaire au serveur ou pour la réinitialisation du formulaire. Vous pouvez également attribuer à un bouton d'autres tâches de traitement préalablement définies dans un script. Un bouton peut ainsi calculer le montant total des éléments sélectionnés en fonction des valeurs que vous leur avez attribuées.

Cases à cocher

Permettent les réponses multiples au sein d'un même groupe d'options. Un utilisateur peut sélectionner toutes les options qu'il juge nécessaires. L'exemple suivant montre trois éléments case à cocher sélectionnés : Surfing,

Mountain biking et Rafting sont activées.

Boutons radio

Représentent des choix exclusifs. Lorsqu'un utilisateur clique sur un bouton dans un groupe de boutons radio, cela désélectionne tous les autres boutons du groupe (un groupe comprend plusieurs boutons dotés du même nom).

DREAMWEAVER CS3


574

Dans l'exemple ci-dessous, Rafting est l'option sélectionnée. Si l'utilisateur clique sur Surfing , l'option Rafting est automatiquement désactivée.

Listes déroulantes

Affichent des valeurs d'option au sein d'une liste déroulante qui permet aux utilisateurs de sélectionner plusieurs options. L'option Liste affiche les valeurs d'option dans un menu et permet aux utilisateurs de sélectionner un seul

élément. Utilisez des menus lorsque vous disposez d'un espace réduit et que vous devez afficher de nombreux éléments, ou lorsque vous souhaitez contrôler les valeurs renvoyées au serveur.. A la différence des champs de texte, dans lesquels les utilisateurs peuvent taper ce qu'ils veulent, y compris des données non valides, c'est à vous de définir les valeurs exactes renvoyées par un menu.

Remarque :

Un menu déroulant de formulaire HTML est différent d'un menu déroulant graphique. Pour plus d'informations sur la création, la modification, l'affichage et le masquage d'un menu déroulant graphique, cliquez sur le lien à la fin de cette section.

Menus de reroutage

Sont des listes de navigation ou des menus déroulants qui vous permettent d'insérer un menu dans lequel chaque option est reliée à un document ou à un fichier.

Champs de fichier

Permettent aux utilisateurs de rechercher un fichier sur leur ordinateur et de le télécharger en tant que données de formulaire.

Champs d'image

Permettent d'insérer une image dans un formulaire. Utilisez les champs d'image pour créer des boutons graphiques (bouton Envoyer ou Réinitialiser, par exemple). Vous devez associer un comportement à l'objet de formulaire pour pouvoir utiliser une image afin d'effectuer une tâche autre que l'envoi de données.

Voir aussi

« Application du comportement Afficher le menu contextuel » à la page 346

Création d'un formulaire H

T

ML

1

Ouvrez une page et placez le point d'insertion à l'endroit où vous souhaitez insérer le formulaire.

2

Sélectionnez Insertion > Formulaire ou, dans la barre Insertion, cliquez sur la catégorie Formulaires, puis sur l'icône

Formulaire.

Dans une page affichée en mode Création, les formulaires sont indiqués par une bordure rouge en pointillé. Si vous ne voyez pas cette bordure, choisissez Affichage > Assistances visuelles > Eléments invisibles.

3

Définissez les propriétés du formulaire HTML dans l'inspecteur Propriétés (Fenêtre > Propriétés)

a

Dans la fenêtre de document, cliquez sur la bordure du formulaire afin de le sélectionner.

b

Dans la zone Nom du formulaire, tapez un nom unique afin d'identifier le formulaire.

Vous rendez ainsi possible son référencement ou son contrôle à l'aide d'un langage de script, tel que JavaScript ou VBScript.

Si vous n'attribuez aucun nom au formulaire, Dreamweaver génère un nom en utilisant la syntaxe formn

et augmente la valeur de

n

pour chaque nouveau formulaire ajouté à la page.

c

Dans la zone Action, indiquez la page ou le script qui va traiter les données du formulaire en entrant son chemin d'accès ou en cliquant sur l'icône du dossier pour naviguer jusqu'à la page ou jusqu'au script approprié.

DREAMWEAVER CS3


575 d

Dans le menu déroulant Méthode, spécifiez la méthode permettant de transmettre les données du formulaire au serveur.

Par défaut

Permet de se baser sur le paramétrage par défaut du navigateur pour envoyer les données du formulaire au serveur. En général, la valeur par défaut est la méthode

GET

.

GE

T

Permet d'annexer la valeur à l'URL demandant la page.

P

O

S

T

Permet d'incorporer les données du formulaire dans la requête HTTP.

N'utilisez pas la méthode

GET

pour envoyer des formulaires longs. Les URL sont limitées à 8192 caractères. Si la quantité de données envoyées est trop importante, celles-ci seront tronquées, ce qui peut produire des résultats inattendus ou un échec du traitement.

Il est possible d'ajouter des signets aux pages dynamiques générées par des paramètres transmis par la méthode

GET

, car toutes les valeurs nécessaires pour régénérer la page sont contenues dans l'URL affichée dans la zone Adresse du navigateur.

En revanche, il n'est pas possible d'ajouter de signet aux pages dynamiques générées par des paramètres transmis par la méthode

POST

.

Si vous rassemblez des noms d'utilisateur et des mots de passe, des numéros de cartes de crédit ou d'autres informations confidentielles, la méthode

POST

peut sembler plus sûre que la méthode

GET

. Toutefois, les informations envoyées par la méthode

POST

ne sont pas codées. Par conséquent, les pirates peuvent les récupérer facilement. Pour garantir leur sécurité, utilisez une connexion sécurisée à un serveur sécurisé.

e

(Facultatif) Utilisez le menu déroulant Enctype pour définir le type de codage MIME des données envoyées au serveur pour traitement.

Le paramètre par défaut application/x-www-form-urlencode est généralement utilisé en conjonction avec la méthode

POST

. Si vous créez un champ de téléchargement de fichier, spécifiez le type de codage MIME multipart/form-data

.

f

(Facultatif) Utilisez le menu déroulant Cible pour spécifier la fenêtre dans laquelle les données renvoyées par le programme appelé s'affichent.

Si la fenêtre indiquée n'est pas encore ouverte, une nouvelle fenêtre du même nom apparaît. Définissez l'une des valeurs cible suivantes :

_blank

Ouvre le document de destination dans une nouvelle fenêtre sans nom.

_parent

Ouvre le document de destination dans la fenêtre parente de celle affichant le document actif.

_self

Ouvre le document de destination dans la même fenêtre que celle dans laquelle le formulaire a été envoyé.

_top

Ouvre le document de destination au sein de la fenêtre en cours. Cette valeur permet de s'assurer que le document de destination occupe la fenêtre entière, même si le document d'origine était affiché dans un cadre.

4

Insérez des objets de formulaire dans la page :

a

Placez le point d'insertion à l'endroit où l'objet de formulaire doit s'afficher dans le formulaire.

b

Sélectionnez l'objet dans le menu Insertion > Formulaire, ou dans la catégorie Formulaires dans la barre Insertion.

c

Définissez les propriétés des objets.

d

Entrez un nom pour l'objet dans l'inspecteur Propriétés.

Chaque objet champ de texte, champ caché, case à cocher et liste/menu doit posséder un nom unique identifiant l'objet dans le formulaire. Les noms d'objets de formulaire ne peuvent comporter ni espaces, ni caractères spéciaux. Vous pouvez utiliser toutes les combinaisons de caractères alphanumériques ainsi qu'un caractère de soulignement (_). L'étiquette que vous attribuez à l'objet correspond au nom de la variable où la valeur du champ (les données saisies) sera stockée. Il s'agit de la valeur envoyée au serveur pour traitement.

Remarque :

Tous les boutons radio d'un même groupe doivent porter le même nom.

e

Pour attribuer une étiquette à l'objet champ de texte, case à cocher ou bouton radio dans la page, cliquez en regard de l'objet et tapez le texte souhaité.

5

Améliorez la mise en forme du formulaire.

DREAMWEAVER CS3


576

Utilisez des sauts de ligne, des sauts de paragraphes, du texte préformaté ou des tableaux pour mettre en forme vos formulaires. Vous ne pouvez pas insérer un formulaire dans un autre formulaire (c'est-à-dire superposer des balises), mais vous pouvez inclure plusieurs formulaires dans une même page.

Lors de la conception de formulaires, n'oubliez pas de libeller les champs du formulaire sous forme de texte descriptif, afin

Utilisez des tableaux pour fournir une structure pour les objets et les étiquettes de champ. Assurez-vous, lorsque vous utilisez des tableaux dans un formulaire, que toutes les balises table

sont incluses entre les balises form

.

Vous trouverez un didacticiel consacré à la création de formulaires à l'adresse www.adobe.com/go/vid0160_fr .

Vous trouverez un didacticiel consacré à la mise en page de formulaires à l'aide de CSS à l'adresse www.adobe.com/go/vid0161_fr .

Voir aussi

« Création de formulaires ASP.NET » à la page 655

« Création de formulaires ColdFusion MX 7 » à la page 644

« A propos des objets de formulaire dynamiques » à la page 580

« Liaison de comportements JavaScript à des objets de formulaire HTML » à la page 583

« Liaison de scripts personnalisés à des boutons de formulaire HTML » à la page 583

Insertion d'un groupe de boutons radio

1

Placez le point d'insertion dans la bordure du formulaire.

2

Sélectionnez Insertion > Formulaire > Groupe de boutons radio.

3


a

Dans la zone de texte Nom, tapez le nom du groupe de boutons radio.

Si vous définissez les boutons radio pour qu'il renvoient des paramètres au serveur, ces derniers seront associés au nom du groupe. Par exemple, si vous attribuez le nom myGroup

au groupe de boutons radio et définissez la méthode du formulaire sur

GET

(en d'autres termes, vous souhaitez que le formulaire transmette au serveur des paramètres d'URL plutôt que des paramètres de formulaire lorsque l'utilisateur clique sur le bouton d'envoi), l'expression myGroup=”

CheckedValue

”

sera transmise au serveur via l'URL.

b

Cliquez sur le bouton Plus (+) pour ajouter un bouton radio au groupe. Saisissez l'étiquette et la valeur du nouveau bouton.

c

Cliquez sur les flèches haut ou bas pour réorganiser les boutons.

d

Pour définir un bouton radio précis de façon à ce qu'il soit sélectionné à l'ouverture de la page dans un navigateur, dans la zone de texte Sélectionner une valeur égale à, saisissez une valeur égale à celle du bouton radio.

Saisissez une valeur statique ou dynamique. Pour saisir une valeur dynamique, cliquez sur l'icône représentant un éclair (en regard de la zone de texte), puis sélectionnez un jeu d'enregistrements contenant des valeurs possibles. Dans les deux cas de figure, le valeur indiquée doit correspondre à celle de l'un des boutons radio du groupe. Pour afficher les valeurs des boutons radio, sélectionnez chaque bouton, puis ouvrez son inspecteur Propriétés (Fenêtre > Propriétés).

e

Sélectionnez la mise en forme que Dreamweaver doit utiliser pour mettre en forme les boutons.

Utilisez soit des sauts de ligne, soit un tableau pour mettre les boutons en forme. Si vous activez l'option du tableau,

Dreamweaver crée un tableau à une seule colonne en plaçant les boutons radio sur la gauche et les étiquettes sur la droite.

Vous pouvez également définir les propriétés à l'aide de l'inspecteur Propriétés ou directement en mode Code.

DREAMWEAVER CS3


577

Insertion d'un bouton d'image

Vous pouvez utiliser des images en qualité d'icônes de bouton. Vous devez associer un comportement à l'objet de formulaire pour pouvoir utiliser une image afin d'effectuer une tâche autre que l'envoi de données.

1

Dans le document, placez le point d'insertion dans la bordure du formulaire.

2

Sélectionnez Insertion > Formulaire > Champ d'image.

La boîte de dialogue Source de l'image s'affiche.

3

Sélectionnez l'image souhaitée pour le bouton dans la boîte de dialogue Sélectionnez la source de l'image et cliquez sur OK.

4

Définissez les options suivantes dans l'inspecteur Propriétés :

Zone_image

Attribue un nom au bouton. Les deux noms réservés, Envoyer et Réinitialiser, indiquent respectivement au formulaire d'envoyer les données du formulaire à l'application ou au script de traitement et de réinitialiser les valeurs initiales des champs du formulaire.

Src

Spécifie l'image à utiliser pour le bouton.

Sec

Permet de saisir un texte descriptif au cas où l'image ne parvient pas à se charger dans le navigateur.

Alignement

Définit l'attribut d'alignement de l'objet.

Modifier image

lance votre éditeur d'image par défaut et ouvre le fichier d'image afin que vous puissiez le modifier.

Classe

Permet d'appliquer des règles CSS à l'objet.

5

Pour associer un comportement JavaScript au bouton, sélectionnez l'image, puis sélectionnez le comportement dans le panneau Comportements (Fenêtre > Comportements).

Insertion de champs de téléchargement de fichier

Vous pouvez créer un champ de téléchargement de fichier permettant aux utilisateurs de sélectionner un fichier sur leur ordinateur (tel qu'un document de traitement de texte ou un fichier graphique) et de le télécharger sur le serveur. Un champ de fichier est similaire à un champ de texte, mais contient également un bouton Parcourir. L'utilisateur peut soit saisir manuellement le chemin d'accès au fichier à télécharger, soit cliquer sur le bouton Parcourir pour le rechercher et le sélectionner.

Avant d'utiliser les champs de téléchargement de fichiers, vous devez disposer d'un script côté serveur ou d'une page capable de traiter les soumissions de fichiers. Consultez la documentation de la technologie serveur à utiliser pour traiter les téléchargements de fichiers) dans le manuel PHP à l'adresse http://us2.php.net/features.file-upload.php

.

Les champs de fichier nécessitent l'utilisation de la méthode

POST

pour transmettre des fichiers depuis un navigateur vers le serveur. Le fichier est transféré à l'adresse indiquée dans la zone de texte Action du formulaire.

Remarque :

Avant d'utiliser le champ de fichier, vérifiez auprès de votre administrateur de serveur que le téléchargement anonyme de fichiers est autorisé.

1

Insérez un formulaire dans la page (Insertion > Formulaire).

2

Sélectionnez le formulaire pour en afficher l'inspecteur Propriétés.

3

Dans le menu déroulant Méthode, sélectionnez

POST

.

4

Dans le menu déroulant Enctype, sélectionnez multipart/form-data

.

5

Dans la zone de texte Action, spécifiez le script côté serveur ou la page capable de traiter le fichier téléchargé.

6

Placez le point d'insertion à l'intérieur de la bordure du formulaire et sélectionnez Insertion > Formulaire > Champ de fichier.

7

Définissez les options suivantes dans l'inspecteur Propriétés :

Champ de fichier

Indique le nom de l'objet champ de fichier.

Largeur car.

Définit le nombre maximal de caractères pouvant être affichés dans le champ.

N bre max. de caract.

Indique le nombre maximum de caractères que peut contenir le champ. Si l'utilisateur parcourt l'arborescence pour trouver le fichier, le nom du fichier et son chemin d'accès risquent de comporter un nombre de

DREAMWEAVER CS3


578

caractères supérieur à celui indiqué dans le champ Nbre max. de caract. Par contre, si l'utilisateur tente de taper le nom du fichier et son chemin d'accès, le champ de fichier ne lui permet pas d'entrer un nombre de caractères supérieur à celui indiqué.

Propriétés de l'objet champ de texte H

T

ML

Sélectionnez l'objet champ de texte et définissez les options suivantes dans l'inspecteur Propriétés :

Largeur car.

Définit le nombre maximal de caractères pouvant être affichés dans le champ. Ce nombre peut être inférieur

à Nbre max. de caract., qui définit le nombre maximal de caractères pouvant être entrés dans le champ. Ainsi, si le champ

Largeur de caractère est défini sur la valeur par défaut 20 et qu'un utilisateur saisit 100 caractères, ce dernier ne pourra voir que 20 de ces caractères dans le champ de texte. Bien que l'utilisateur ne voie pas tous les caractères saisis dans le champ, ils sont reconnus par l'objet de champ et envoyés au serveur pour traitement.

N bre max. de caract.

Définit le nombre maximum de caractères qu'il est possible de saisir dans le champ pour les champs de texte à une seule ligne. Utilisez Nbre max. de caract. pour limiter un code postal à 5 chiffres, un mot de passe à 10 caractères, etc. Si vous ne renseignez pas la zone de texte Nbre max. de caract., les utilisateurs peuvent saisir un texte d'une longueur illimitée. Si l'entrée de l'utilisateur dépasse la largeur des caractères du champ, le texte défile. Si l'entrée de l'utilisateur dépasse le nombre maximum de caractères, le formulaire émet un son d'alerte.

N bre lignes

(Disponible lorsque l'option Multiligne est sélectionnée) Définit la hauteur du champ pour les champs de texte

à plusieurs lignes.

Wrap

(Disponible lorsque l'option Multiligne est sélectionnée) Indique la manière dont les données saisies par l'utilisateur sont affichées lorsqu'il saisit plus d'informations que celles que la zone de texte définie peut afficher. Les options de retour

à la ligne sont les suivantes :

•

Désactivé(e) ou Par défaut

Empêche le retour à la ligne automatique du texte. Lorsque l'entrée dépasse la limite droite de la zone de texte, le texte défile vers la gauche. L'utilisateur doit appuyer sur la touche Retour pour déplacer le point d'insertion sur la ligne suivante de la zone de texte.

•

Virtuel

Définit un retour à la ligne automatique dans la zone de texte. Lorsque l'entrée dépasse la limite droite de la zone de texte, le texte est renvoyé automatiquement à la ligne. Lors de l'envoi des données pour traitement, le retour à la ligne n'est pas appliqué. Les données sont envoyées en tant que chaîne unique.

•

Physique

traitement.

Définit un retour à la ligne automatique des données dans la zone de texte ainsi que lors de leur envoi pour

T ype

Désigne le type de champ : ligne simple, multiligne ou mot de passe.

•

Ligne simple

Permet de positionner une balise input

dont l'attribut type

est fixé à text

. Le paramètre Larg. des caractères représente l'attribut size

; Nbre max. de caract. représente l'attribut maxlength

.

•

Lignes multiples

Permet de positionner une balise textarea

. Le paramètre Larg. des caractères est relié à l'attribut cols

;

Nbre caract. max. est relié à l'attribut rows

.

•

Mot de passe

Permet de positionner une balise input

dont l'attribut type

est fixé à password

. Les paramètres Larg. des caractères et Nbre max. de caract. sont reliés aux mêmes attributs que les champs de texte à une seule ligne. Lorsqu'un utilisateur entre des données dans un champ mot de passe, le texte apparaît sous forme de puces ou d'astérisques pour le protéger du regard de tiers.

Val. init.

Attribue la valeur affichée dans le champ lors du premier chargement du formulaire. Ainsi pouvez-vous indiquer, par exemple, que l'utilisateur doit saisir des informations de type remarque ou exemple dans le champ.

Classe


O ptions de l'objet Bouton

N om de bouton

Attribue un nom au bouton. Les deux noms réservés, Envoyer et Réinitialiser, indiquent respectivement au formulaire d'envoyer les données du formulaire à l'application ou au script de traitement et de réinitialiser les valeurs initiales des champs du formulaire.

Etiquette

Détermine le texte apparaissant sur le bouton.

DREAMWEAVER CS3


579

Action

Détermine ce qui se passe lorsque le bouton est cliqué.

•

Envoyer le formulaire

Envoie les données du formulaire pour traitement lorsque l'utilisateur clique sur le bouton. Les données sont envoyées à la page ou au script spécifié par la propriété Action du formulaire.

•

Réinitialiser le formulaire

Rétablit le contenu à ses valeurs par défaut lorsque l'utilisateur clique sur le bouton.

•

Aucun

Spécifie l'action a éxécuter lorsque l'utilisateur clique sur le bouton. Par exemple, vous pouvez ajouter un comportement JavaScript qui ouvre une autre page lorsque l'utilisateur clique sur le bouton.

Classe

Applique des règles CSS à l'objet.

O ptions de l'objet Case à cocher H

T

ML

Valeur

Définit la valeur à envoyer au serveur lorsque la case à cocher est activée. Par exemple, dans un sondage, vous

pour « approuve fortement » et une valeur de 1 désapprouve fortement ».

Etat initial

Détermine si la case à cocher est sélectionnée lorsque le formulaire est chargé dans le navigateur.

Dynamique

Permet au serveur de déterminer de façon dynamique l'état initial de la case à cocher. Par exemple, vous pouvez présenter visuellement les informations Oui/Non stockées dans un enregistrement de base de données à l'aide de cases à cocher. Au stade de la conception, vous ne connaissez pas ces informations. Au moment de l'exécution, le serveur lit l'enregistrement de base de données et active la case à cocher si la valeur est Oui.

Classe

Applique des règles CSS (Cascading Style Sheets, feuilles de style en cascade) à l'objet.

O ptions de l'objet Bouton radio unique

Valeur

Définit la valeur à envoyer au serveur lorsque le bouton radio est sélectionné. Par exemple, vous pouvez taper

ski

dans la zone de texte Valeur pour indiquer qu'un utilisateur a choisi le ski.

Etat initial

Détermine si le bouton radio est sélectionnée lorsque le formulaire est chargé dans le navigateur.

Dynamique

Permet au serveur de déterminer de façon dynamique l'état initial du bouton radio. Par exemple, vous pouvez présenter visuellement des informations stockées dans un enregistrement de base de données à l'aide de boutons radio. Au stade de la conception, vous ne connaissez pas ces informations. Au moment de l'exécution, le serveur lit l'enregistrement de base de données et vérifie si la valeur du bouton radio correspond à celle que vous avez spécifiée.

Classe


O ptions du menu

Liste/Menu

Attribue un nom au menu. Ce nom doit être unique.

T ype

Indique si le menu se déroule lorsque l'utilisateur clique dessus (option Menu) ou s'il affiche une liste déroulante d'éléments (option Liste). Sélectionnez l'option Menu si vous souhaitez qu'un seul choix soit visible lorsque le formulaire s'affiche dans un navigateur. Pour afficher les autres choix, l'utilisateur doit cliquer sur la flèche vers le bas.

Sélectionnez l'option Liste pour afficher quelques-unes ou l'ensemble des options lorsque le formulaire s'affiche dans un navigateur, afin de permettre aux utilisateurs de sélectionner plusieurs éléments.

Hauteur

(Type Liste uniquement) Définit le nombre d'éléments affichés dans le menu.

Sélections

(Type Liste uniquement) Indique si l'utilisateur peut sélectionner plusieurs éléments dans la liste.

Valeurs de la liste

Ouvre une boîte de dialogue qui vous permet d'ajouter les éléments à un menu de formulaire :

1

Utilisez les boutons plus (+) et moins (-) pour ajouter et supprimer des éléments de la liste.

2

Tapez un libellé ainsi qu'une valeur optionnelle pour chaque élément de menu.

Chaque élément de la liste possède un libellé (le texte qui apparaît dans la liste) et une valeur (la valeur envoyée à l'application de traitement si l'élément est sélectionné). Si aucune valeur n'est spécifiée, le libellé est envoyé à l'application de traitement.

3

Utilisez les boutons fléchés Haut et Bas pour réorganiser les éléments de la liste.

Les éléments apparaissent dans le menu dans le même ordre qu'ils apparaissent dans la boîte de dialogue Valeurs de la liste.

Le premier élément sur la liste est l'élément sélectionné lorsque la page est chargée dans un navigateur.

DREAMWEAVER CS3


580

Dynamique

Permet au serveur de sélectionner de façon dynamique un élément dans le menu lors de son affichage initial.

Classe


Initialement sélectionné

dans la liste.

Définit les éléments sélectionnés par défaut dans la liste. Cliquez sur un ou plusieurs éléments

O ptions de l'objet Champ masqué

Champ masqué

Indique le nom du champ.

Valeur

Attribue une valeur au champ. Cette valeur est transmise au serveur lors de l'envoi du formulaire.

Classe


A propos des objets de formulaire dynamiques

Un objet de formulaire dynamique est un objet de formulaire dont l'état initial est déterminé par le serveur lorsque la page est demandée au serveur, et non par le concepteur du formulaire lors de sa création. Par exemple, lorsqu'un utilisateur recherche une page PHP contenant un formulaire dans lequel se trouve un menu, un script PHP inséré dans la page renseigne automatiquement le menu par des valeurs stockées dans une base de données. Le serveur envoie ensuite la page terminée au navigateur de l'utilisateur.

Le fait de rendre les objets de formulaire dynamiques permet de simplifier la maintenance d'un site. Par exemple, de nombreux sites utilisent des menus pour présenter aux utilisateurs un ensemble d'options. Si un menu est dynamique, vous pouvez ajouter, supprimer ou modifier des éléments de menu en un seul endroit (la table de base de données dans laquelle sont stockés ces éléments) afin de mettre à jour toutes les instances de ce même menu sur le site.

Voir aussi


Insertion ou modification d'un menu de formulaire H

T

ML dynamique

Vous avez la possibilité de renseigner un menu de formulaire ou une liste déroulante HTML de façon dynamique à l'aide des entrées d'une base de données. Pour la majorité des pages, vous pouvez utiliser un objet de menu HTML.

Remarque :

Dans le cas de pages ASP.NET, il vous faut en revanche employer un contrôle de formulaire Liste déroulante ou

Zone de liste.

Avant de commencer, vous devez insérer le formulaire HTML dans une page ColdFusion, PHP, ASP ou JSP, puis définir un jeu d'enregistrements ou une autre source de contenu dynamique pour ce menu.

1

Insertion d'un objet de formulaire Liste/Menu HTML dans votre page

a

Cliquez à l'intérieur du formulaire HTML sur la page (Insertion > Formulaire > Formulaire).

b

Choisissez Insertion > Formulaire > Liste/Menu pour insérer l'objet de formulaire.

2


•

Sélectionnez le nouvel objet de formulaire Liste/Menu HTML ou un objet existant, puis cliquez sur le bouton Dynamique de l'inspecteur Propriétés.

•

Choisissez Choisissez Insertion > Objets de données > Données dynamiques > Liste de sélection dynamique.

3

Complétez les options de la boîte de dialogue Liste/Menu dynamique, puis cliquez sur OK.

a

Dans le menu déroulant Options du jeu d'enregistrements, choisissez le jeu d'enregistrements à utiliser comme source de contenu. Ce menu vous permet également de modifier ultérieurement les éléments de menu ou de liste statiques et dynamiques.

b

La zone Options statiques vous permet de saisir un élément par défaut dans la liste ou le menu. Cette option vous permet aussi de modifier les entrées statiques d'un objet de formulaire de liste ou de menu après que vous avez ajouté un contenu dynamique.

DREAMWEAVER CS3


581 c

(Facultatif) Utilisez les boutons plus (+) et moins (-) pour ajouter et supprimer des éléments de la liste. Les éléments sont dans le même ordre que dans la boîte de dialogue Valeur de la liste. Le premier élément sur la liste est l'élément sélectionné lorsque la page est chargée dans un navigateur. Utilisez les boutons fléchés Haut et Bas pour réorganiser les

éléments de la liste.

d

Dans le menu déroulant Valeurs, sélectionnez le champ contenant les valeurs des éléments de menu.

e

Dans le menu déroulant Etiquettes, sélectionnez le champ contenant les étiquettes des éléments de menu.

f

(Facultatif) Pour spécifier qu'un élément de menu particulier soit sélectionné à l'ouverture de la page dans un navigateur ou lorsqu'un enregistrement est affiché dans le formulaire, indiquez une valeur égale à celle de l'élément de menu dans la zone de texte Sélectionner une valeur égale à.

Vous pouvez indiquer une valeur statique ou dynamique, en cliquant sur l'icône représentant un éclair (à côté de la zone de texte), puis en sélectionnant une valeur dynamique dans la liste des sources de données. Dans les deux cas, la valeur indiquée doit correspondre à l'une des valeurs des éléments de menu.

Ajout de la fonctionnalité dynamique à des menus de formulaire H

T

ML existants

1

En mode Création, sélectionnez l'objet de formulaire liste/menu.

2

Dans l'inspecteur Propriétés, cliquez sur le bouton Dynamique.

3


Affichage de contenu dynamique dans des champs de texte H

T

ML

Vous pouvez afficher un contenu dynamique dans des champs de texte HTML lorsque le formulaire est affiché dans un navigateur.

Remarque :

Dans le cas de pages ASP.NET, vous devez employer le contrôle ASP.NET Zone de texte.

Avant de commencer, vous devez créer le formulaire HTML dans une page ColdFusion, PHP, ASP ou JSP, puis définir un jeu d'enregistrements ou une autre source de contenu dynamique pour ce champ de texte.

1

Sélectionnez le champ de texte dans le formulaire HTML de votre page.

2

Dans l'inspecteur Propriétés, cliquez sur l'icône en forme d'éclair située en regard de la zone de texte Val. init. pour afficher la boîte de dialogue Données dynamiques.

3

Sélectionnez la colonne du jeu d'enregistrements qui doit fournir une valeur au champ de texte, puis cliquez sur OK.

Définition des options de la boîte de dialogue Champ de texte dynamique

1

Dans le menu déroulant Champ de texte, sélectionnez le champ de texte que vous souhaitez rendre dynamique.

2

Cliquez sur l'icône en forme d'éclair située en regard de la zone de texte Définir la valeur à, puis sélectionnez une source de données dans la liste des sources disponibles.

Cette source doit contenir des informations textuelles. Si aucune source de données n'apparaît dans la liste ou si aucune des sources disponibles ne correspond à vos besoins, cliquez sur le bouton Plus (+) pour définir une nouvelle source.

Voir aussi


Activation dynamique d'une case à cocher H

T

ML

Vous pouvez laisser le serveur déterminer l'éventuelle activation d'une case à cocher lors de l'affichage du formulaire dans un navigateur.

Avant de commencer, vous devez créer le formulaire HTML dans une page ColdFusion, PHP, ASP ou JSP, puis définir un jeu d'enregistrements ou une autre source de contenu dynamique pour ces cases à cocher. L'idéal serait que la source de contenu contienne des données booléennes, telles que Yes/No ou true/false.

DREAMWEAVER CS3


582

Remarque :

Dans le cas de pages ASP.NET, vous devez employer le contrôle ASP.NET Case à cocher.

1

Sélectionnez un objet de formulaire correspondant à une case à cocher dans votre page.

2


3

Renseignez la boîte de dialogue Case à cocher dynamique, puis cliquez sur OK.

•

Sélectionnez l'icône représentant un éclair, à côté de la zone de texte Cocher si, puis sélectionnez le champ dans la liste des sources de données.

La source de données doit contenir des données booléennes telles que

Yes

et

No

, ou true

et false

. Si aucune source de données n'apparaît dans la liste ou si aucune des sources disponibles ne correspond à vos besoins, cliquez sur le bouton

Plus (+) pour définir une nouvelle source.

•

Dans la zone de texte Egal à, tapez la valeur que le champ doit contenir pour que la case à cocher soit activée.

Par exemple, pour que la case soit activée lorsqu'un champ donné d'un enregistrement a la valeur

Yes

, tapez

Yes

dans la zone de texte Egal à.

Remarque :

Cette valeur est également renvoyée au serveur si l'utilisateur clique sur le bouton Envoyer du formulaire.

Activation dynamique d'un bouton radio H

T

ML

Activez dynamiquement un bouton radio HTML lorsqu'un enregistrements s'affiche dans le formulaire HTML dans un navigateur.

Avant de commencer, vous devez créer le formulaire dans une page ColdFusion, PHP, ASP ou JSP, puis insérer au moins un groupe de boutons radio HTML (Insertion > Formulaire > Groupe de boutons radio). Vous devez également définir un jeu d'enregistrements ou une autre source de contenu dynamique pour les boutons radio. L'idéal serait que la source de contenu contienne des données booléennes, telles que Yes/No ou true/false.

Remarque :

Dans le cas de pages ASP.NET, vous devez employer le contrôle Liste de boutons radio ASP.NET.

1

En mode Création, sélectionnez un bouton radio dans le groupe.

2


3

Complétez les options de la boîte de dialogue Groupe de boutons radio dynamiques, puis cliquez sur OK.

Définition des options de la boîte de dialogue Groupe de boutons radio dynamiques

1

Dans le menu déroulant Groupe de boutons radio dynamiques, sélectionnez un formulaire et un groupe de boutons radio de la page.

La zone Valeurs de boutons radio affiche la valeur de chaque bouton radio du groupe.

2

Dans la liste des valeurs affichées, sélectionnez la valeur à présélectionner dynamiquement. Cette valeur s'affiche dans la zone de texte Valeur.

3

Cliquez sur l'icône en forme d'éclair située en regard de la zone de texte Sélectionner une valeur égale à, puis sélectionnez un jeu d'enregistrements contenant des valeurs possibles pour les boutons radio du groupe.

Le jeu d'enregistrements que vous sélectionnez contient des valeurs correspondant à celles des boutons radio. Pour afficher les valeurs des boutons radio, sélectionnez chaque bouton, puis ouvrez son inspecteur Propriétés (Fenêtre > Propriétés).

4

Cliquez sur OK.

Définition des options de la boîte de dialogue Groupe de boutons radio dynamiques (ColdFusion, ASP.

N

E

T

)

1

Dans le menu déroulant Groupe de boutons radio, sélectionnez un groupe de boutons radio et un formulaire.

2

Cliquez sur l'icône en forme d'éclair en regard de la zone de texte Sélectionner une valeur égale à.

3

Renseignez la boîte de dialogue Données dynamiques, puis cliquez sur OK.

a

Sélectionnez une source de données dans la liste.

b

(Facultatif) Sélectionnez un format de données pour le texte.

c

(Facultatif) Modifiez le code que Dreamweaver insère dans votre page pour afficher le texte dynamique.

DREAMWEAVER CS3


583

4

Cliquez sur OK pour fermer la boîte de dialogue Groupe de boutons radio dynamiques et insérer l'espace réservé du contenu dynamique.

Validation de données de formulaire H

T

ML

Dreamweaver permet d'ajouter un code JavaScript permettant de vérifier le contenu des champs de texte spécifiés afin de garantir que l'utilisateur a bien saisi le type de données approprié.

Vous pouvez utiliser des widgets de formulaire Spry pour créer vos formulaires et valider le contenu d'éléments de formulaires spécifiques. Pour plus d'informations, consultez les rubriques consacrées à Spry ci-dessous.

Vous pouvez également créer dans Dreamweaver des formulaires ColdFusion et ASP.NET comportant une validation du contenu de certains champs. Pour les formulaires ASP.NET, vous pouvez insérer des contrôles de validation ASP.NET en mode Code. Pour plus d'informations, consultez le chapitre consacré à ColdFusion et ASP.NET ci-dessous.

1

Créez un formulaire HTML qui comprend au moins un champ de texte et un bouton Envoyer.

Assurez-vous que chaque champ de texte que vous souhaitez valider porte un nom unique.

2

Sélectionnez le bouton Envoyer.

3

Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+) et sélectionnez le comportement Valider le formulaire dans la liste.

4

Définissez les règles de validation de chaque champ de texte et cliquez sur OK.

Par exemple, vous pouvez spécifier qu'un champ de texte utilisé pour l'âge d'une personne n'accepte que les chiffres.

Remarque :

Le comportement Valider le formulaire est uniquement disponible lorsqu'un champ de texte a été inséré dans le document.

Voir aussi

« Utilisation du widget Validation de zone de texte » à la page 442

« Utilisation du widget Zone de texte de validation » à la page 446

« Utilisation du widget Validation de la sélection » à la page 449

« Utilisation du widget Validation de case à cocher » à la page 452

« Création de formulaires ASP.NET et ColdFusion » à la page 644

« Validation des données de formulaire ColdFusion » à la page 655

Liaison de comportements JavaScript à des objets de formulaire H

T

ML

Vous pouvez associer des comportements JavaScript stockés dans Dreamweaver à des objets de formulaire HTML tels que des boutons.

Remarque :

Cette fonction n'est pas compatible avec les contrôles de formulaire ASP.NET, car ces derniers sont traités sur le serveur.

1

Sélectionnez l'objet de formulaire HTML.

2

Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+) et sélectionnez un comportement dans la liste.

Liaison de scripts personnalisés à des boutons de formulaire H

T

ML

Certains formulaires utilisent JavaScript ou VBScript pour effectuer des actions (traitement du formulaire, par exemple) côté client, plutôt que d'envoyer les données de formulaire au serveur pour leur traitement. Avec Dreamweaver, vous pouvez configurer un bouton de formulaire pour exécuter un script particulier côté client lorsqu'un utilisateur clique sur le bouton.

DREAMWEAVER CS3


584

Remarque :

Cette fonction n'est pas compatible avec les formulaires ASP.NET.

1

Sélectionnez un bouton Envoyer dans un formulaire.

2

Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+) et choisissez Appel

JavaScript dans la liste.

3

Dans la zone Appel JavaScript, tapez le nom de la fonction JavaScript à exécuter lorsque l'utilisateur clique sur le bouton, puis cliquez sur OK.

Vous pouvez, par exemple, indiquer le nom d'une fonction qui n'existe pas encore, comme processMyForm()

.

4

Si la fonction JavaScript ne figure pas encore dans la section head

du document, ajoutez-la maintenant.

Par exemple, vous pouvez définir la fonction JavaScript suivante dans la section head

du document afin d'afficher un message lorsque l'utilisateur clique sur le bouton Envoyer.

function processMyForm(){ alert('Thanks for your order!');

}

Voir aussi

« Application du comportement Appel JavaScript » à la page 336

Création de formulaires H

T

ML accessibles

Lorsque vous insérez un objet de formulaire HTML, vous pouvez rendre l'objet de formulaire accessible et modifier les attributs d'accessibilité ultérieurement.

Ajout d'un objet de formulaire accessible

1

La première fois que vous ajoutez des objets de formulaire accessibles, activez la boîte de dialogue Accessibilité pour les

page 512).

Vous devez effectuer cette opération une seule fois.

2

Dans le document, placez le point d'insertion à l'endroit où l'objet de formulaire doit apparaître.

3

Choisissez Insertion > Formulaire, puis l'objet de formulaire à insérer.

La boîte de dialogue Attributs d'accessibilité aux balises d'entrée s'affiche.

4

Complétez les options de la boîte de dialogue, puis cliquez sur OK. Voici une liste partielle des options :

Remarque :

Le lecteur d'écran lit le nom que vous avez entré en tant qu'attribut Label de l'objet.

ID

attribue un ID au champ de formulaire. Cette valeur peut être utilisée pour faire référence au champ à partir de

JavaScript. Elle est également utilisée comme valeur de l'attribut for

si vous activez l'option Joindre une balise d'étiquette à l'aide de l'attribut For du groupe Style.

Envelopper avec une balise d'étiquette

Entoure l'élément de formulaire d'une balise d'étiquette, comme suit :

<label>

<input type="radio" name="radiobutton" value="radiobutton">

RadioButton1</label>

Joindre une balise d'étiquette à l'aide de l'attribut 'for'

Utilise l'attribut for

pour entourer l'élément de formulaire d'une balise d'étiquette, comme suit :

<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton">

<label for="radiobutton">RadioButton2</label>

Si vous choisissez cette option, le navigateur place un rectangle de sélection sur le texte associé à une case à cocher ou à un bouton radio et permet à l'utilisateur d'activer la case à cocher ou le bouton radio en cliquant n'importe où dans le texte associé.

Remarque :

Il s'agit de l'option d'accessibilité la plus courante. Toutefois, cette fonction peut varier selon le navigateur utilisé.

DREAMWEAVER CS3


585

Aucune balise d'étiquette

N'utilise pas de balise d'étiquette, comme suit:

<input type="radio" name="radiobutton" value="radiobutton">

RadioButton3

Clé d'accès

Utilise un équivalent clavier (une lettre) et la touche Alt (Windows) ou Ctrl (Macintosh) pour sélectionner l'objet de formulaire dans le navigateur. Par exemple, si vous entrez

B

comme Clé d'accès, les utilisateurs de Macintosh peuvent appuyer sur Ctrl+B pour sélectionner l'objet de formulaire.

O rdre des tabulations

Indique l'ordre d'apparition des objets de formulaire. Si vous définissez un ordre d'apparition pour un objet, assurez-vous de le faire également pour tous les autres objets.

La définition d'un ordre d'apparition peut se révéler utile lorsque la page contient d'autres liens et d'autres objets de formulaire et que vous voulez que l'utilisateur passe de l'un à l'autre dans un ordre particulier.

5

Cliquez sur Oui pour insérer une balise de formulaire.

L'objet de formulaire apparaît dans le document.

Remarque :

Si vous cliquez sur Annuler, l'objet de formulaire s'affiche dans le document, mais Dreamweaver ne lui associe ni les balises ni les attributs d'accessibilité.

Modification des valeurs d'accessibilité pour un objet de formulaire

1

Dans la fenêtre de document, sélectionnez l'objet.

2


• Modifiez les attributs en mode Code.

• Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez

Modifier la balise.

Chapitre 20 : Création visuelle d'applications

Dans Adobe® Dreamweaver® CS3, vous pouvez utiliser Adobe ColdFusion, PHP, JSP, ASP ou ASP. NET pour créer des pages permettant de rechercher, insérer, mettre à jour ou supprimer des enregistrements dans une base de données, d'afficher des informations principales et détaillées, ainsi que de limiter l'accès à certains utilisateurs.

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

A propos des pages principales et détaillées

Les pages principales et détaillées sont des ensembles de pages utilisées pour organiser et afficher les données d'un jeu d'enregistrements. Ces pages fournissent aux visiteurs de votre site une vue d'ensemble et une vue détaillée. La page principale présente tous les enregistrements et contient des liens vers des pages de détails qui fournissent des informations complémentaires sur chaque enregistrement.

586

Page principale

DREAMWEAVER CS3


587

Page de détails

Vous pouvez créer des pages principales et des pages de détails en insérant un objet de données destiné à créer une page principale et une page de détails en une seule opération, ou en utilisant des comportements de serveur pour créer ces pages d'une manière plus personnalisée. Si vous employez des comportements de serveur pour créer des pages principales et détaillées, vous devez tout d'abord créer une page principale contenant la liste des enregistrements, puis ajouter des liens vers les pages de détails depuis cette liste.

Voir aussi

Création d'une page principale

Avant de commencer, vérifiez que vous avez défini une connexion de base de données pour le site.

1

Pour créer une page vierge, choisissez Fichier > Nouveau > Page vierge, sélectionnez un type de page puis cliquez sur

Créer. Cette page devient la page principale.

2

Définissez un jeu d'enregistrements.

Dans le panneau Liaisons (Fenêtre > Liaisons), cliquez sur le bouton Plus (+), sélectionnez Jeu d'enregistrements

(ColdFusion, PHP) ou Jeu de données (ASP.NET) puis choisissez les options désirées. Si vous voulez rédiger votre propre instruction SQL, cliquez sur Avancé.

Vérifiez que le jeu d'enregistrements contient toutes les colonnes de table nécessaires à la création de la page principale. Le jeu d'enregistrements doit contenir la colonne comportant la clé unique de chacun des enregistrements, à savoir la colonne d'ID d'enregistrement. Dans l'exemple suivant, la colonne Code contient la clé unique de chaque enregistrement.

DREAMWEAVER CS3


588

Colonnes de jeu d'enregistrements sélectionnées pour une page principale

En général, le jeu d'enregistrements de la page principale extrait quelques colonnes d'un tableau de base de données tandis que celui de la page de détails extrait davantage de colonnes du même tableau afin de fournir des détails supplémentaires.

Le jeu d'enregistrements peut être défini par l'utilisateur au moment de l'exécution. Pour plus d'informations, consultez la

rubrique « Création de pages de recherche et de résultats (ColdFusion, ASP, JSP, PHP) » à la page 595.

3

(ColdFusion, PHP) Insérez un tableau dynamique afin d'afficher les enregistrements.

Placez le point d'insertion où vous voulez placer le tableau dynamique sur la page. Choisissez Insertion > Objets de données

> Données dynamiques > Tableau dynamique, définissez les options puis cliquez sur OK.

Si vous souhaitez que les utilisateurs ne puissent pas voir les ID d'enregistrement, supprimez la colonne correspondante du tableau dynamique. Cliquez dans la page afin de la rendre active. Déplacez le curseur vers le haut de la colonne dans le tableau dynamique jusqu'à ce que les cellules de la colonne s'affichent avec un contour rouge, puis cliquez sur la colonne.

Appuyez sur la touche Suppr pour supprimer la colonne du tableau.

4

(ASP.NET) Créez une grille de données pour afficher les enregistrements.

Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+), puis choisissez Grille de données. Acceptez le type de colonne par défaut (Champ de données simple) pour chaque colonne de la grille de données. L'exemple suivant illustre trois colonnes définies pour une grille de données :

DREAMWEAVER CS3


589

Voir aussi


« Rédaction d'instructions SQL en vue de la définition d'un jeu d'enregistrements avancé » à la page 524


Création de liens vers la page de détails

Après avoir créé la page principale et ajouté le jeu d'enregistrements, vous devez créer des liens permettant d'ouvrir la page de détails. Vous devez ensuite modifier les liens de manière à transmettre les ID des enregistrements sélectionnés par l'utilisateur. La page de détails utilise cet ID pour rechercher l'enregistrement demandé dans la base de données et l'afficher.

Remarque :

La création de liens vers les pages de mises à jour s'effectue de la même manière. La page de résultats est similaire

à une page principale, et la page de mises à jour à une page de détails.

Voir aussi

O uverture de la page de détails et transfert d'un ID d'enregistrement (ColdFusion, PHP)

1

Dans le tableau dynamique, sélectionnez l'espace réservé pour le texte qui servira de lien.

Les liens appliqués à l'espace réservé sont sélectionnés.

2

Dans l'inspecteur Propriétés, cliquez sur l'icône du dossier située en regard de la zone Lien.

3

Parcourez vos fichiers afin de sélectionner la page de détails. Celle-ci apparaît dans la zone Lien de l'inspecteur

Propriétés.

Dans le tableau dynamique, le texte sélectionné apparaît lié. Lorsque la page s'exécute sur le serveur, le lien s'applique au texte de chaque ligne du tableau.

4

Dans la page principale, sélectionnez le lien dans le tableau dynamique.

Si le mode Live Data est activé, sélectionnez le lien situé dans la première ligne.

5

(ColdFusion) Dans la zone Lien de l'inspecteur Propriétés, ajoutez la chaîne suivante à la fin de l'URL :

?recordID=#recordsetName.fieldName#

Le point d'interrogation indique au serveur que ce qui suit correspond à un ou plusieurs paramètres d'URL. Le mot recordID correspond au nom du paramètre d'URL (vous pouvez inventer n'importe quel nom de votre choix). Notez le nom du paramètre d'URL : vous devrez en effet l'utiliser ultérieurement au niveau de la page de détails.

L'expression qui suit le signe égal correspond à la valeur du paramètre. Dans ce cas, la valeur est générée par une expression

ColdFusion qui renvoie un ID d'enregistrement du jeu d'enregistrements. Un ID différent est généré pour chaque ligne du tableau dynamique. Dans l'expression ColdFusion, remplacez recordsetName par le nom de votre jeu d'enregistrements et remplacez fieldName par le nom du champ de votre jeu d'enregistrements qui permet d'identifier chaque enregistrement de façon univoque. Dans la plupart des cas, le champ correspond à un numéro d'ID d'enregistrement. Dans l'exemple suivant, le champ correspond à des codes de location uniques.

locationDetail.cfm?recordID=#rsLocations.CODE#

Lorsque la page s'exécute, les valeurs du champ CODE du jeu d'enregistrements sont insérées dans les lignes correspondantes du tableau dynamique. Par exemple, si le point de location Canberra, Australia, possède le code CBR, l'URL suivante est utilisée dans la ligne Canberra du tableau dynamique :

DREAMWEAVER CS3


590

locationDetail.cfm?recordID=CBR

6

(PHP) Dans le champ Lien de l'inspecteur Propriétés, ajoutez la chaîne suivante à la fin de l'URL :

?recordID=<?php echo $row_

recordsetName

['

fieldName

']; ?>

Le point d'interrogation indique au serveur que ce qui suit correspond à un ou plusieurs paramètres d'URL. Le mot recordID

correspond au nom du paramètre d'URL. (Vous pouvez utiliser le nom de votre choix.) Notez le nom du paramètre d'URL : vous devrez en effet l'utiliser ultérieurement au niveau de la page de détails.


PHP qui renvoie un ID d'enregistrement du jeu d'enregistrements. Un ID différent est généré pour chaque ligne du tableau dynamique. Dans l'expression PHP, remplacez

recordsetName

par le nom de votre jeu d'enregistrements et

fieldName

par le nom du champ de votre jeu d'enregistrements qui permet d'identifier chaque enregistrement de façon univoque. Dans la plupart des cas, le champ correspond à un numéro d'ID d'enregistrement. Dans l'exemple suivant, le champ correspond à des codes de location uniques.

locationDetail.php?recordID=<?php echo $row_rsLocations['CODE']; ?>

Lorsque la page s'exécute, les valeurs du champ CODE du jeu d'enregistrements sont insérées dans les lignes correspondantes du tableau dynamique. Par exemple, si le point de location Canberra, Australia, possède le code CBR, l'URL suivante est utilisée dans la ligne Canberra du tableau dynamique : locationDetail.php?recordID=CBR

7


O uverture de la page de détails et transfert d'un ID d'enregistrement (ASP, JSP)

1

Sélectionnez le contenu dynamique devant assurer la fonction de lien.

2

Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+) et choisissez Aller à la page de détails dans le menu déroulant.

3

Dans la boîte de dialogue page de détails, cliquez sur Parcourir et recherchez la page.

4

Indiquez la valeur à lui transmettre en sélectionnant un jeu d'enregistrements et une colonne dans les menus déroulants

Jeu d'enregistrements et Colonne. Cette valeur, telle que l'ID de clé unique, est généralement propre à l'enregistrement.

5

Si vous le souhaitez, vous pouvez transmettre les paramètres de page existants à la page de détails en sélectionnant les options Paramètres d'URL ou Paramètres de formulaire.

6

Cliquez sur OK.

Un lien spécial entoure le texte sélectionné. Lorsque l'utilisateur clique sur le lien, le comportement de serveur Aller à la page de détails transmet à cette même page un paramètre d'URL contenant l'ID de l'enregistrement. Prenons l'exemple d'un paramètre d'URL appelé id et d'une page de détails appelée customerdetail.asp ; lorsque l'utilisateur clique sur le lien, l'URL se présente comme suit : http://www.mysite.com/customerdetail.asp?id=43

La première partie de l'URL, http://www.mysite.com/customerdetail.asp, ouvre la page. La deuxième partie, ?id=43, constitue le paramètre d'URL. Elle précise à la page de détails quel enregistrement trouver et afficher. Le terme id est le nom du paramètre d'URL et sa valeur est 43. Dans cet exemple, le paramètre d'URL contient le numéro d'ID de l'enregistrement, soit 43.

O uverture d'une page de détails et transmission d'un ID d'enregistrement (ASP.

N

E

T

)

1

Double-cliquez votre grille de données dans le panneau Comportements de serveur (Fenêtre serveur).

2

Dans le champ Colonnes, sélectionnez l'intitulé de la colonne devant contenir les liens.

3

Cliquez sur le bouton Changer le type de colonne et choisissez Hyperlien dans le menu déroulant. La boîte de dialogue

Colonne Hyperlien s'affiche.

DREAMWEAVER CS3


591

4

Dans la zone Texte de l'hyperlien, indiquez le texte devant s'afficher dans la colonne hyperlien.

T exte statique

Entrez le texte du lien afin de créer un lien générique, comme Détails, pour chaque ligne de la grille de données. Le même texte (par exemple Détails) s'affiche sur toutes les lignes de la colonne hyperlien.

Champ de données

Sélectionnez un champ de données dans l'ensemble de données afin d'ajouter des liens aux données affichées dans la colonne. La valeur du champ de données est utilisée comme texte du lien dans la colonne hyperlien. Dans l'exemple ci-dessous, chacune des lignes de la grille de données affiche un nom de point de location :

5

Dans la zone Page associée, définissez l'URL à associer au texte de la colonne hyperlien.

L'URL doit non seulement permettre d'ouvrir la page de détails, mais aussi d'identifier de façon univoque l'enregistrement

à afficher sur cette page.

Pour permettre l'identification de l'enregistrement à afficher sur la page de détails, choisissez l'option Champ de données, puis sélectionnez dans l'ensemble de données un champ permettant d'identifier chaque enregistrement de façon univoque.

Dans la plupart des cas, le champ correspond à un numéro d'ID d'enregistrement. Dans l'exemple ci-dessous, le champ correspond à des codes de location uniques :

6

Dans la zone Chaîne de mise en forme de la zone Page associée, cliquez sur le bouton Parcourir, puis recherchez et sélectionnez la page de détails.

Dreamweaver crée une URL vers la page de détails. Cette URL comprend un paramètre identifiant l'enregistrement devant

être présenté sur la page de détails. Notez le nom du paramètre d'URL : vous devrez en effet l'utiliser ultérieurement au niveau de la page de détails.

Par exemple, si vous avez défini locationDetail.aspx comme page de détails, l'URL suivante est créée :

Dans ce cas, le paramètre d'URL est nommé

CODE

. Dreamweaver copie le nom du champ de données mais ce nom n'est pas indispensable. Vous pouvez le remplacer par un nom plus évocateur (« recordID » dans l'exemple ci-dessous).

L'élément

{0}

est un espace réservé correspondant à la valeur du champ de données. Lorsque la page s'exécute, les valeurs du champ CODE de l'ensemble de données sont insérées dans les lignes correspondantes de la grille de données. Par exemple, si le point de location Canberra, Australie, possède le code CBR, l'URL suivante est utilisée dans la ligne Canberra de la grille de données : locationDetail.aspx?recordID=CBR

7

Cliquez sur OK pour fermer la boîte de dialogue Hyperlien, puis de nouveau sur OK pour fermer la boîte de dialogue

Grille de données.

DREAMWEAVER CS3


592

La grille de données sur la page est mise à jour.

Recherche de l'enregistrement demandé et affichage dans la page de détails

Pour pouvoir afficher l'enregistrement demandé par la page principale, vous devez définir un ensemble de données devant contenir un seul enregistrement, et lier les colonnes de l'ensemble de données à la page de détails.

1

Passez à la page de détails. Si vous n'avez pas encore créé une page de détails, créez une page ColdFusion vierge (Fichier

> Nouveau).

2

Dans le panneau Liaisons (Fenêtre > Liaisons), cliquez sur le bouton Plus (+) et sélectionnez Jeu d'enregistrements

(Requête) ou Jeu de données (Requête) dans le menu déroulant.

La boîte de dialogue Jeu d'enregistrements ou Jeu de données simplifiée s'affiche. Si la boîte de dialogue avancée s'affiche, cliquez sur Simple.

3

Donnez un nom au jeu d'enregistrements, puis sélectionnez la source de données et la table de base de données qui fourniront les données de votre jeu d'enregistrements.

4

Dans la zone Colonnes, sélectionnez les colonnes du tableau à inclure dans le jeu d'enregistrements.

Le jeu d'enregistrements peut être identique ou différent du jeu de la page principale. Le jeu d'enregistrements d'une page de détails possède généralement davantage de colonnes afin d'afficher plus de détails.

Si les jeux d'enregistrements sont différents, le jeu d'enregistrements de la page de détails doit avoir au moins une colonne en commun avec celui de la page principale. La colonne commune est généralement la colonne d'ID de l'enregistrement, mais elle peut également être le champ commun aux tableaux reliés.

Pour inclure uniquement certaines colonnes de la table dans le jeu d'enregistrements, cliquez sur Sélectionnées, puis cliquez sur les colonnes souhaitées tout en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée.

5

Pour rechercher et afficher l'enregistrement spécifié dans le paramètre d'URL transmis par la page principale, renseignez la section Filtre comme suit :

•

Dans le premier menu déroulant de la zone Filtre, sélectionnez la colonne du jeu d'enregistrements contenant les valeurs correspondant à celle du paramètre d'URL transmis par la page principale. Par exemple, si le paramètre d'URL contient un numéro d'ID d'enregistrement, sélectionnez la colonne contenant les numéros d'ID d'enregistrement. Dans l'exemple de la section précédente, la colonne intitulée CODE contient les valeurs correspondant à celle du paramètre d'URL transmis par la page principale.

•

Dans le menu déroulant situé à côté du premier menu, sélectionnez le signe égal (=) (si cela n'est pas déjà fait).

•

Dans le troisième menu déroulant, choisissez Paramètre d'URL. La page principale utilise un paramètre d'URL pour transmettre des informations à la page de détails.

•

Dans la quatrième zone, tapez le nom du paramètre d'URL transmis par la page principale.

6

Cliquez sur OK. Le jeu d'enregistrements s'affiche dans le panneau Liaisons.

7

Liez les colonnes du jeu d'enregistrements à la page de détails ; pour ce faire, sélectionnez les colonnes dans le panneau

Liaisons (Fenêtre > Liaisons) et faites-les glisser sur la page.

Après avoir téléchargé la page principale et la page de détails sur le serveur, vous pouvez ouvrir la page principale dans un navigateur. Lorsque vous cliquez sur un lien dans la page principale, la page de détails correspondante s'ouvre et affiche des informations sur l'enregistrement sélectionné.

Voir aussi


Création d'un lien qui ouvre une page associée (ASP, JSP)

Vous pouvez créer un lien qui ouvre une page associée et transmet à cette dernière les paramètres existants. Vous ne pouvez recourir au comportement de serveur que si vous utilisez les modèles de serveur ASP ou JSP.

DREAMWEAVER CS3


593

Avant d'ajouter un comportement de serveur Aller à la page associée à une page, assurez-vous que la page reçoit les paramètres de formulaire ou d'URL d'une autre page. Le rôle du comportement de serveur consiste à transmettre ces paramètres à une troisième page. Vous pouvez, par exemple, communiquer les critères de recherche reçus par une page de résultats à une autre page, de manière à ce que l'utilisateur n'ait pas à les taper plusieurs fois.

Sur la page, vous pouvez également sélectionner du texte ou une image devant assurer la fonction de lien ou placer le pointeur sans ne rien sélectionner pour que le texte du lien soit inséré.

1

Dans la zone de texte Aller à la page associée, cliquez sur Parcourir et localisez le fichier de la page associée.

Si la page active s'envoie des données à elle-même, tapez son nom de fichier.

2

Si les critères à communiquer ont été directement reçus d'un formulaire HTML via la méthode

GET

ou qu'ils figurent dans l'URL de la page, choisissez l'option Paramètres d'URL.

3

Si les critères à communiquer ont été directement reçus d'un formulaire HTML via la méthode

POST

, choisissez l'option

Paramètres de formulaire.

4

Cliquez sur OK.

Lorsque vous cliquez sur le nouveau lien, la page transmet les critères à la page associée par le biais d'une chaîne de requête.

Voir aussi

« Collecte de données envoyées par les utilisateurs » à la page 506

Recherche d'un enregistrement précis et affichage sur une page (ASP, JSP)

Vous pouvez ajouter un comportement de serveur permettant de rechercher un enregistrement spécifique dans le jeu d'enregistrements, de manière à afficher les données de l'enregistrement sur la page. Vous ne pouvez recourir au comportement de serveur que si vous utilisez les modèles de serveur ASP ou JSP.

1

Créez une page répondant aux conditions suivantes :

•

Un ID d'enregistrement contenu dans un paramètre d'URL a été transmis à la page courante par une autre page. Vous pouvez créer des paramètres d'URL sur l'autre page avec des hyperliens HTML ou un formulaire HTML. Pour plus

•

Un jeu d'enregistrements a été défini pour la page courante. Le comportement de serveur extrait les détails

d'enregistrement de ce jeu. Pour obtenir des instructions, consultez la section « Définition un jeu d'enregistrements sans

d'enregistrements avancé » à la page 524.

•

Des colonnes de jeu d'enregistrements ont été liées à la page. L'enregistrement spécifique doit être affiché sur la page.

Pour plus d'informations, voir « Création de texte dynamique » à la page 538.

2

Ajoutez le comportement de serveur afin de trouver l'enregistrement spécifié par le paramètre d'URL. Pour ce faire, cliquez sur le bouton Plus (+) du panneau Comportements de serveurs (Fenêtre > Comportements de serveur), puis choisissez Pagination du jeu d'enregistrements > Déplacer vers un enregistrement spécifique.

3

Dans le menu déroulant Déplacer vers l'enregistrement dans, sélectionnez le jeu que vous avez défini pour la page.

4

Dans le menu déroulant Où la colonne, sélectionnez la colonne contenant la valeur transmise par l'autre page.

Par exemple, si cette page transmet un numéro d'ID d'enregistrement, sélectionnez la colonne contenant les numéros d'ID d'enregistrement.

5

Dans la zone Correspond au paramètre d'URL, entrez le nom du paramètre d'URL transmis par l'autre page.

Par exemple, si celle-ci a utilisé l'URL id=43 pour ouvrir la page d'informations détaillées, tapez

id

dans la zone Correspond au paramètre d'URL.

6

Cliquez sur OK.

Lorsque le navigateur enverra une nouvelle requête en vue d'obtenir la page, le comportement de serveur lira l'ID d'enregistrement dans le paramètre d'URL transmis par l'autre page et passera à l'enregistrement spécifié dans le jeu d'enregistrements.

DREAMWEAVER CS3


594

Création de pages principale et de détails en une seule opération (ColdFusion, ASP, JSP,

PHP)

Lorsque vous développez des applications Web, vous pouvez créer rapidement des pages principales et de détails à l'aide de l'objet de données Ensemble de pages Principale-Détails.

1

Pour créer une page dynamique vierge, choisissez Fichier > Nouveau > Page vierge, sélectionnez une page dynamique dans la liste Type de page, puis cliquez sur Créer.

Cette page devient la page principale.

2

Définissez un jeu d'enregistrements pour la page.

Assurez-vous que le jeu d'enregistrements contient non seulement toutes les colonnes nécessaires pour la page principale, mais également celles nécessaires pour la page de détails. En général, le jeu d'enregistrements de la page principale extrait quelques colonnes d'un tableau de base de données tandis que celui de la page de détails extrait davantage de colonnes du même tableau afin de fournir des détails supplémentaires.

3

Ouvrez la page principale en mode Création, puis sélectionnez Insertion > Objets de données > Ensemble de pages

Principale Détails.

4

Dans le menu déroulant Jeu d'enregistrements, assurez-vous d'avoir sélectionné le jeu contenant les enregistrements que vous souhaitez afficher dans la page principale.

5

Dans la zone Champs de la page principale, sélectionnez les colonnes du jeu d'enregistrements à afficher dans la page principale.

Par défaut, toutes les colonnes du jeu d'enregistrements sont sélectionnées. Si le jeu contient une colonne à clé unique, telle que recordID

, sélectionnez-la et cliquez sur le bouton Moins (-) afin qu'elle ne s'affiche pas sur votre page.

6

Pour modifier l'ordre d'apparition des colonnes dans la page principale, sélectionnez une colonne dans la liste et cliquez sur la flèche vers le bas ou vers le haut.

Dans la page principale, les colonnes du jeu d'enregistrements sont disposées horizontalement dans un tableau. Un clic sur la flèche vers le haut déplace la colonne vers la gauche ; un clic sur la flèche vers le bas déplace la colonne vers la droite.

7

Dans le menu déroulant Lier à la page de détails depuis, sélectionnez la colonne du jeu d'enregistrements qui affichera une valeur servant également de lien vers la page de détails.

Par exemple, si vous souhaitez que chaque nom de produit de la page principale ait un lien vers la page de détails, sélectionnez la colonne du jeu d'enregistrements contenant les noms de produit.

8

Dans le menu déroulant Passer la clé unique, sélectionnez la colonne du jeu d'enregistrements contenant les valeurs identifiant les enregistrements.

En général, la colonne choisie est le numéro d'identification de l'enregistrement. Cette valeur est transmise à la page de détails afin d'identifier l'enregistrement choisi par l'utilisateur.

9

Si la colonne à clé unique n'est pas numérique, désactivez l'option Numérique.

Remarque :

Cette option est sélectionnée par défaut ; elle existe seulement pour certains modèles de serveur.

10

Spécifiez le nombre d'enregistrements devant s'afficher dans la page principale.

11

Dans la zone Nom de la page de détails, cliquez sur Parcourir et localisez le fichier de page de détails que vous avez créé ou bien entrez un nom et laissez à l'objet de données le soin d'en créer un pour vous.

12

Dans la zone Champs de la page de détails, sélectionnez les colonnes à afficher dans la page de détails.

Par défaut, toutes les colonnes du jeu d'enregistrements de la page principale sont sélectionnées. Si le jeu d'enregistrements contient une colonne clé unique, telle que recordID

, sélectionnez-la et cliquez sur le bouton Moins (-) afin qu'elle ne s'affiche pas dans la page d'informations détaillées.

13

Pour modifier l'ordre d'apparition des colonnes dans la page de détails, sélectionnez une colonne dans la liste et cliquez sur la flèche vers le bas ou vers le haut.

Dans la page de détails, les colonnes du jeu d'enregistrements sont disposées verticalement dans un tableau. Un clic sur la flèche vers le haut déplace la colonne vers le haut ; un clic sur la flèche vers le bas déplace la colonne vers le bas.

DREAMWEAVER CS3


595

14

Cliquez sur OK.

L'objet de données crée une page de détails (si vous ne l'avez déjà fait) et ajoute un contenu de page dynamique ainsi que des comportements de serveur à la page principale et à la page de détails.

15

Personnalisez la mise en forme de la page principale et de la page de détails en fonction de vos besoins.

Vous pouvez personnaliser la mise en forme de chaque page à l'aide des outils de conception de page de Dreamweaver. Vous pouvez également modifier les comportements de serveur en double-cliquant dessus dans le panneau Comportements de serveur.

Après avoir créé l'ensemble de pages principales et de détails à l'aide de l'objet de données, utilisez le panneau

Comportements de serveur (Fenêtre > Comportements de serveur) pour modifier les divers éléments que l'objet de données insère dans les pages.

Voir aussi



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

(ColdFusion, ASP, JSP, PHP)

A propos des pages de recherche et de résultats

Vous avez la possibilité d'utiliser Dreamweaver pour créer un ensemble de pages permettant aux utilisateurs d'effectuer des recherches dans votre base de données et d'afficher les résultats de la recherche. La méthode utilisée est la même pour les pages ColdFusion, ASP, JSP et PHP.

Dans la plupart des cas, pour intégrer cette nouvelle fonction dans votre application Web, un minimum de deux pages s'impose. La première page contient un formulaire HTML qui va servir à la saisie des critères de recherche. Même si aucune

La deuxième page indispensable à la recherche est la page de résultats, qui permet d'effectuer la plupart du travail. La page de résultats exécute les tâches suivantes :

• analyse des critères de recherche envoyés par la page de recherche ;

• connexion à la base de données et recherche d'enregistrements

• création d'un jeu composé des enregistrements trouvés ;

• affichage du contenu du jeu d'enregistrements.

L'insertion d'une page d'informations détaillées est également possible, en option. Une page d'informations détaillées donne des informations supplémentaires sur un enregistrement figurant dans une page de résultats.

Si vous utilisez ASP.NET, vous pouvez regrouper la page de recherche et la page de résultats dans une seule page.

Si la recherche se fait sur la base d'un seul critère, Dreamweaver vous permet d'ajouter des fonctions de recherche à votre application Web sans utiliser de requêtes ni de variables SQL. Contentez-vous de créer vos pages et de compléter les champs des quelques boîtes de dialogue qui s'affichent à l'écran. Si la recherche dépend de plusieurs critères, il vous faut rédiger une instruction SQL pour laquelle vous définissez de multiples variables.

Dreamweaver insère la requête SQL dans la page. Lorsque la page s'exécute sur le serveur, chaque enregistrement de la table de base de données est vérifié. Si la valeur du champ indiqué dans un enregistrement répond aux conditions de la requête

SQL, l'enregistrement sera inclus dans le jeu d'enregistrements. La requête SQL en cours crée un jeu d'enregistrements contenant uniquement les résultats de la recherche.

DREAMWEAVER CS3


596

Par exemple, le service commercial peut détenir des renseignements sur les clients d'une zone particulière dont les revenus sont supérieurs à un niveau donné. Dans le formulaire d'une page de recherche, le responsable des ventes saisit un secteur géographique et un niveau de revenu minimum, puis clique sur le bouton Envoyer pour envoyer les deux valeurs à un serveur. Sur le serveur, les valeurs sont communiquées à l'instruction SQL de la page de résultats, qui crée ensuite le jeu d'enregistrements contenant uniquement les clients du secteur indiqué avec des revenus supérieurs au niveau donné.

Voir aussi



Création de la page de recherche (ColdFusion, ASP, JSP, PHP)

Une page de recherche sur le Web se compose normalement de champs destinés à la saisie de critères particuliers. La page de recherche doit contenir au minimum un formulaire HTML et un bouton Envoyer.

Pour ajouter un formulaire HTML à une page de recherche, procédez comme suit :

1

Ouvrez la page de recherche ou créez une nouvelle page, puis choisissez Insertion > Formulaire > Formulaire.

Un formulaire vierge est créé sur la page. Il est parfois nécessaire d'activer les éléments invisibles (Affichage > Assistances visuelles > Eléments invisibles) pour afficher les contours du formulaire, représentés par de fines lignes rouges.

2

Insérez des objets de formulaire afin de permettre aux utilisateurs de taper leurs critères de recherche en choisissant la commande Formulaire dans le menu Insertion.

Les objets de formulaire sont de formes diverses : champs de texte, menus, options et boutons radio. La quantité d'objets qu'il est possible d'insérer dans un formulaire pour aider les utilisateurs à mieux cerner leurs recherches est quasi illimitée.

Toutefois, n'oubliez pas que, plus le nombre de critères sur la page de recherche est grand, plus votre instruction SQL sera complexe.

3

Ajoutez un bouton Envoyer au formulaire (Insertion > Formulaire > Bouton).

4

(Facultatif) Pour changer l'étiquette du bouton Envoyer, sélectionnez ce bouton, ouvrez l'inspecteur Propriétés (Fenêtre

> Propriétés) et entrez une nouvelle valeur dans la zone de texte Valeur.

A présent, il convient d'informer le formulaire du lieu où envoyer les critères de recherche lorsque l'utilisateur clique sur le bouton Envoyer.

5

Sélectionnez le formulaire à l'aide de la balise

<form>

dans le sélecteur de balises situé en bas de la fenêtre de document, comme le montre l'illustration suivante :

6

Dans la zone Action de l'inspecteur Propriétés du formulaire, tapez le nom de fichier de la page de résultats effectuant la recherche proprement dite dans la base de données.

7

Dans le menu déroulant Méthode, sélectionnez l'une des options suivantes pour déterminer comment les données du formulaire doivent être envoyées au serveur :

•

GET

envoie les données en les annexant à l'URL, sous forme de chaîne de requête. Cependant, la taille des URL étant limitée à 8192 caractères, vous ne pouvez pas utiliser la méthode

GET

avec les formulaires longs.

•

POST

envoie les données dans le corps d'un message.

•

Default

utilise la méthode par défaut du navigateur (

GET

, généralement).

La page de recherche est terminée.

DREAMWEAVER CS3


597

Voir aussi


Création d'une page de résultats de base (ColdFusion, ASP, JSP, PHP)

Lorsque l'utilisateur clique sur le bouton Rechercher du formulaire, les critères sont envoyés à une page de résultats sur le serveur. La charge de récupération des enregistrements dans la base de données incombe non pas à la page de recherche sur le navigateur, mais à la page de résultats sur le serveur. Si la page de recherche envoie un critère unique au serveur, vous pouvez créer la page de résultats sans requête ni aucune variable SQL. Vous créez un jeu d'enregistrements élémentaire auquel vous ajoutez un filtre qui supprime tous les enregistrements non conformes au critère envoyés par la page de recherche.

Remarque :

Si vous appliquez plusieurs conditions de recherche, utilisez la boîte de dialogue Jeu d'enregistrements avancée

Création d'une page de résultats avancée (ColdFusion, ASP, JSP, PHP) » à la page 599).

Voir aussi

« Création de la page de recherche (ColdFusion, ASP, JSP, PHP) » à la page 596

« Création d'une page de détails pour une page de résultats (ColdFusion, ASP, JSP, PHP) » à la page 600

Création du jeu d'enregistrements contenant les résultats de la recherche

1

Ouvrez la page de résultats dans la fenêtre de document.

Si vous n'avez pas encore créé de page de résultats, créez une page dynamique vierge (Fichier > Nouveau > Page vierge).

2

Créez un jeu d'enregistrements

Plus (+) et sélectionnez Jeu d'enregistrements dans le menu déroulant.

3

Assurez-vous que la boîte de dialogue Jeu d'enregistrements simplifiée s'affiche à l'écran.

Si la boîte de dialogue avancée s'affiche à la place, cliquez sur le bouton Simple pour ouvrir sa version simplifiée.

4

Attribuez un nom au jeu d'enregistrements et sélectionnez une connexion.

La connexion doit être établie avec une base de données contenant des informations susceptibles d'intéresser l'utilisateur.

5

Dans le menu déroulant Table, sélectionnez le tableau à consulter dans la base de données.

DREAMWEAVER CS3


598

Remarque :

Si la recherche implique un seul critère, vous ne pouvez consulter des enregistrements que dans un seul tableau.

Pour consulter plusieurs tableaux simultanément, utilisez la boîte de dialogue Jeu d'enregistrements avancée et définissez une requête SQL.

6

Pour inclure uniquement certaines colonnes de la table dans le jeu d'enregistrements, cliquez sur Sélectionnées, puis sélectionnez les colonnes souhaitées dans la liste tout en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée.

Il est préférable d'inclure uniquement les colonnes qui contiennent des informations que vous souhaitez afficher dans la page de résultats.

Pour le moment, ne fermez pas la boîte de dialogue Jeu d'enregistrements. Vous l'utiliserez lors de l'étape suivante pour récupérer les critères envoyés par la page de recherche et pour créer un filtre destiné à exclure tous les enregistrements non conformes aux critères de recherche.

Création du filtre du jeu d'enregistrements

1

Dans le premier menu déroulant de la zone Filtre, sélectionnez la colonne de la table de base de données dans laquelle effectuer la recherche.

Par exemple, si la valeur envoyée par la page de recherche est le nom d'une ville, sélectionnez la colonne qui répertorie des noms de ville.

2

Dans le menu déroulant situé à côté du premier menu, sélectionnez le signe égal (=) (en principe, la valeur par défaut).

3

Dans le troisième menu déroulant, choisissez Variable de formulaire ou Paramètre d'URL, selon que vous empruntez les méthodes

POST

ou

GET

, respectivement.

La page de recherche utilise soit une variable de formulaire, soit un paramètre d'URL pour transmettre des informations à la page de résultats.

4

Dans la quatrième zone, entrez le nom de l'objet de formulaire qui accepte le critère sur la page de recherche.

Le nom de l'objet fait aussi fonction de nom pour la variable de formulaire ou le paramètre d'URL. Pour obtenir ce nom, revenez à la page de recherche, cliquez sur l'objet de formulaire pour le sélectionner et prenez note du nom qui s'affiche dans l'inspecteur Propriétés.

Par exemple, vous désirez créer un jeu d'enregistrements comprenant uniquement les raids et randonnées dans un pays particulier. Supposons qu'une colonne du tableau se nomme

TRIPLOCATION

et que le formulaire HTML de votre page de recherche utilise la méthode

GET

et contienne un objet de menu nommé Location qui affiche une liste de pays. L'exemple suivant indique à quoi peut ressembler votre section de filtre :

5

(Facultatif) Cliquez sur Tester, tapez une valeur test et cliquez sur OK pour vous connecter à la base de données et créer une instance du jeu d'enregistrements.

La valeur test est une simulation de la valeur qui sans cela aurait été renvoyée de la page de recherche. Cliquez sur OK pour fermer le jeu d'enregistrements test.

6

Si le jeu d'enregistrements vous convient, cliquez sur OK.

Un script côté serveur est inséré sur votre page ; lorsqu'il est exécuté sur le serveur, il vérifie chaque enregistrement de la table de base de données. Si la valeur du champ indiqué dans un enregistrement répond aux conditions de filtrage, l'enregistrement sera inclus dans le jeu d'enregistrements. Le script crée un jeu d'enregistrements qui ne contient que les résultats de la recherche.

L'étape suivante consiste à afficher le jeu d'enregistrements sur la page de résultats. Pour plus d'informations, consultez la

rubrique « Affichage des résultats de la recherche (ColdFusion, ASP, JSP, PHP) » à la page 600.

DREAMWEAVER CS3


599

Création d'une page de résultats avancée (ColdFusion, ASP, JSP, PHP)

Si la page de recherche envoie plusieurs critères au serveur, il vous faut formuler une requête SQL pour la page de résultats et intégrer les critères de recherche dans les variables SQL.

Remarque :

Si vous n'appliquez qu'une seule condition de recherche, utilisez la boîte de dialogue Jeu d'enregistrements

simplifiée pour définir votre jeu (consultez la section « Création d'une page de résultats de base (ColdFusion, ASP, JSP, PHP) »

à la page 597).

1

Ouvrez la page de résultats dans Dreamweaver, puis créez un jeu d'enregistrements

Liaisons (Fenêtre > Liaisons), cliquez sur le bouton Plus (+) et choisissez Jeu d'enregistrements dans le menu déroulant.

2

Assurez-vous que la boîte de dialogue Jeu d'enregistrements avancée s'affiche à l'écran.

La boîte de dialogue avancée comporte une zone de texte qui permet la saisie d'instructions SQL. Si la boîte de dialogue simplifiée s'affiche à la place, cliquez sur le bouton Avancé pour ouvrir sa version avancée.

3

Attribuez un nom au jeu d'enregistrements et sélectionnez une connexion.


4

Saisissez l'instruction Select dans la zone de texte SQL.

Assurez-vous que l'instruction comporte une clause WHERE avec des variables pour stocker les critères de recherche. Dans l'exemple suivant, les variables sont varLastName

et varDept

:

SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION ¬

FROM EMPLOYEE WHERE LASTNAME LIKE 'varLastName' AND DEPARTMENT ¬

LIKE 'varDept'

Pour limiter la frappe, utilisez l'arborescence des éléments de la base de données située dans la partie inférieure de la boîte

de dialogue Jeu d'enregistrements avancée. Pour obtenir des instructions, consultez la section « Rédaction d'instructions

SQL en vue de la définition d'un jeu d'enregistrements avancé » à la page 524.

Pour plus d'informations sur la syntaxe SQL, consultez le guide Initiation à SQL www.adobe.com/go/learn_dw_sqlprimer .

5

Donnez aux variables SQL les valeurs des critères de recherche. Pour ce faire, cliquez sur le bouton Plus (+) dans la zone

Variables, puis tapez le nom de la variable, sa valeur par défaut (valeur que doit prendre la variable si aucune valeur d'exécution n'est renvoyée) et sa valeur d'exécution (généralement un objet de serveur renfermant une valeur envoyée par un navigateur, telle qu'une variable de demande).

Dans l'exemple ASP suivant, le formulaire HTML sur la page de recherche utilise la méthode

GET

et contient deux champs

Department ».

Dans un environnement ColdFusion, les valeurs d'exécution seraient

#LastName#

et

#Department#

. Dans un environnement JSP, les valeurs d'exécution seraient request.getParameter("LastName")

et request.getParameter("Department")

.

6

(Facultatif) Cliquez sur Tester pour créer une instance du jeu d'enregistrements à l'aide des valeurs de variable par défaut.

Les valeurs par défaut sont une simulation des valeurs qui sans cela auraient été renvoyées de la page de recherche. Cliquez sur OK pour fermer le jeu d'enregistrements test.

7

Si le jeu d'enregistrements vous convient, cliquez sur OK.

La requête SQL est insérée dans votre page.

L'étape suivante consiste à afficher le jeu d'enregistrements sur la page de résultats.

DREAMWEAVER CS3


600

Affichage des résultats de la recherche (ColdFusion, ASP, JSP, PHP)

Après avoir créé un jeu d'enregistrements pour y insérer les résultats de la recherche, vous devez afficher les informations sur la page de résultats. L'affichage des enregistrements est une opération simple : il suffit de faire glisser des colonnes individuelles du panneau Liaisons vers la page de résultats. Ajoutez au choix des liens de navigation pour aller et venir dans le jeu d'enregistrements, ou créez une région répétée si vous préférez afficher plusieurs enregistrements sur la page. Vous pouvez également insérer des liens sur une page d'informations détaillées.

Pour plus d'informations sur les méthodes d'affichage du contenu dynamique sur une page autres que l'affichage de résultats

dans un tableau dynamique, consultez la section « Affichage des enregistrements de base de données » à la page 543.

1

Placez le point d'insertion à l'endroit où vous souhaitez que le tableau dynamique apparaisse dans la page de résultats, puis sélectionnez Insertion > Objets de données > Données dynamiques > Tableau dynamique.

2

Dans la boîte de dialogue Tableau dynamique, sélectionnez le jeu d'enregistrements que vous avez défini afin de présenter les résultats de recherche.

3

Cliquez sur OK. Un tableau dynamique contenant les résultats de la recherche est inséré sur la page de résultats.

Création d'une page de détails pour une page de résultats (ColdFusion, ASP, JSP, PHP)

Vos pages de recherche et de résultats peuvent inclure une page comportant des informations détaillées à propos d'enregistrements spécifiques répertoriés dans la page de résultats. Dans ce cas, la page de résultats fait également fonction de page principale dans un ensemble de pages principale/détails.

Voir aussi

« Création de pages principale et de détails en une seule opération (ColdFusion, ASP, JSP, PHP) » à la page 594

« Création de la page de recherche (ColdFusion, ASP, JSP, PHP) » à la page 596

« Création d'une page de résultats de base (ColdFusion, ASP, JSP, PHP) » à la page 597

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

N

E

T

)

A propos d'une page de recherche dans une base de données (ASP.

N

E

T

)

Vous pouvez utiliser Dreamweaver pour créer une page permettant d'effectuer des recherches dans une base de données et d'afficher les résultats dans une grille de données. Vous pouvez déterminer comment l'utilisateur peut chercher dans la base de données en ajoutant des contrôles de formulaire, ainsi que définir le mode d'affichage des résultats.

Voir aussi

A propos des contrôles de recherche (ASP.

N

E

T

)

Une page de recherche sur le Web se compose normalement de champs destinés à la saisie de critères particuliers. Lorsque l'utilisateur clique sur un bouton, les résultats de la recherche s'affichent.

1

Ouvrez la page de recherche et sélectionnez Insertion > Formulaire > Formulaire.


Dans l'inspecteur Propriétés du formulaire, sélectionnez l'attribut de Method

POST

. Il n'est pas nécessaire de définir un attribut

Action. La page ASP.NET s'autotransmet les données et les résultats de la recherche sont affichés sur cette même page.

DREAMWEAVER CS3


601

2

Insérez les contrôles de formulaire permettant aux utilisateurs d'entrer leurs critères de recherche (Insertion > Objets

ASP.NET).

Il est possible d'insérer n'importe quel type de contrôle de formulaire ASP.NET, notamment les contrôles TextBox,

CheckBox, RadioButton, ListBox et DropDownList. La quantité de contrôles qu'il est possible d'insérer dans un formulaire pour aider les utilisateurs à mieux cerner leurs recherches est quasi illimitée. Toutefois, n'oubliez pas que, plus le nombre de critères sur la page de recherche est grand, plus votre instruction SQL sera complexe.

Veillez à donner un attribut ID à chaque contrôle (par exemple, txtVille à un contrôle de type TextBox ou lbxPays à un

contrôle de type ListBox). Pour plus d'informations, consultez la section « Ajout de contrôles de formulaire ASP.NET à une page » à la page 655.

3

Insérez un bouton ASP.NET dans le formulaire (Insertion > Objets ASP.NET > asp:bouton).

Veillez à donner un attribut ID (par exemple, btnRechercher ) et un libellé (par exemple, Rechercher) au bouton.

Le formulaire de recherche est créé. L'étape suivante de la procédure de création d'une page de recherche consiste à définir l'ensemble de données dans lequel les résultats de la recherche seront enregistrés.

Recherche sur la base d'un seul critère (ASP.

N

E

T

)

Lorsque l'utilisateur clique sur le bouton Rechercher de la page, le critère de recherche est envoyé au serveur. Celui-ci traite la demande, génère un ensemble de données filtré sur la base du critère, renseigne une grille de données et renvoie la page au navigateur.

Avant d'insérer la grille de données, vous devez définir l'ensemble de données dans lequel les enregistrements répondant aux critères de recherche seront stockés.

Création d'un ensemble de données destiné à recevoir les résultats de la recherche

1

Dans le panneau Liaisons (Fenêtre > Liaisons), cliquez sur le bouton Plus (+), puis choisissez Ensemble de données

(Requête).

Si la boîte de dialogue avancée s'affiche, cliquez sur le bouton Simple pour ouvrir sa version simplifiée. La boîte de dialogue avancée comporte une zone de texte qui permet la saisie d'instructions SQL, contrairement à la boîte de dialogue simplifiée.

2

Donnez un nom à l'ensemble de données, puis sélectionnez la connexion et la table de base de données dans laquelle les utilisateurs doivent pouvoir effectuer des recherches.

3

Dans la zone Colonnes, cliquez sur l'option Sélectionnées et choisissez une colonne à clé (généralement la colonne d'ID d'enregistrement), ainsi que les colonnes contenant les données devant s'afficher dans la grille de données.

Ne fermez pas la boîte de dialogue Ensemble de données ; vous l'utiliserez lors de l'étape suivante pour récupérer les critères de recherche envoyés au serveur et pour créer un filtre destiné à exclure tous les enregistrements non conformes aux critères de recherche.

Création d’un filtre d'ensemble de données

1

Dans le premier menu déroulant de la zone Filtre, sélectionnez une colonne de la table à comparer au critère envoyé par la page de recherche.

Par exemple, si la valeur envoyée par la page de recherche est le nom d'une ville, sélectionnez la colonne qui répertorie des noms de ville.

2

Dans le menu déroulant situé à côté du premier menu, sélectionnez le signe égal (=) (en principe, la valeur par défaut).

Cette sélection indique que l'utilisateur ne souhaite inclure que les enregistrements dont les valeurs dans la colonne sélectionnée correspondent exactement à celle spécifiée sur la page de recherche. Vous pouvez utiliser une option moins

3

Dans le troisième menu déroulant, choisissez Variable de formulaire.

Le critère est envoyé au serveur par le biais d'un formulaire utilisant la méthode POST.

4

Dans la quatrième zone, entrez le nom du contrôle de formulaire qui a envoyé le critère de recherche au serveur.

DREAMWEAVER CS3


602

Pour obtenir ce nom, cliquez sur le contrôle au niveau du formulaire pour le sélectionner, puis prenez note de l'ID qui s'affiche dans l'inspecteur Propriétés.

5

Cliquez sur Tester, tapez une valeur test, puis cliquez sur OK pour vous connecter à la base de données et créer une instance de l'ensemble de données.

La valeur test est une simulation de la valeur qui sans cela aurait été renvoyée de la page de recherche. Cliquez sur OK pour fermer l'ensemble de données.

6

Si l'ensemble de données vous convient, cliquez sur OK.

Du code est inséré sur votre page. Lorsque le code s'exécute sur le serveur, il vérifie chaque enregistrement de la table de base de données. Si la valeur du champ indiqué dans un enregistrement répond aux conditions de filtrage, l'enregistrement est inclus dans l'ensemble de données. Le code crée un jeu d'enregistrements qui ne contient que les résultats de la recherche.

L'étape suivante de la procédure de création d'une page de recherche consiste à afficher les résultats de la recherche dans

Recherche sur la base de plusieurs critères (ASP.

N

E

T

)

Si la page de recherche envoie plusieurs critères au serveur, il vous faut formuler une requête SQL et intégrer les critères de recherche dans les variables SQL.

Remarque :

Si vous n'appliquez qu'une seule condition de recherche, utilisez la boîte de dialogue Ensemble de données

page 601).

1

Ouvrez la page de résultats dans Dreamweaver, puis créez un ensemble de données ; pour ce faire, ouvrez le panneau

Liaisons (Fenêtre > Liaisons), cliquez sur le bouton Plus (+) et choisissez Ensemble de données dans le menu déroulant.

2

Assurez-vous que la boîte de dialogue Ensemble de données avancée s'affiche à l'écran.

Si la boîte de dialogue simplifiée s'affiche à la place, cliquez sur le bouton Avancé pour ouvrir sa version avancée. La boîte de dialogue avancée comporte une zone de texte qui permet la saisie d'instructions SQL.

3

Attribuez un nom à l'ensemble de données et sélectionnez une connexion.


4

Saisissez l'instruction Select dans la zone de texte SQL.

Vérifiez que l'instruction comporte une clause WHERE contenant des espaces réservés sous forme de points d'interrogation

(?) destinés aux critères de recherche. L'exemple suivant contient deux espaces réservés :

SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION

FROM EMPLOYEE WHERE LASTNAME LIKE ?

AND DEPARTMENT LIKE ?

5

Attribuez aux espaces réservés les valeurs des critères de recherche ; pour ce faire, cliquez sur le bouton Plus (+) de la zone Paramètres et entrez le nom, le type et la valeur des critères.

Les critères doivent être répertoriés dans le même ordre que dans l'instruction SQL.

Dans la zone Nom, entrez un nom de critère correct. Le nom ne doit pas contenir d'espaces ni de caractères spéciaux.

Dans le menu déroulant Type, sélectionnez un type de données. Par exemple, si le critère est de type texte, sélectionnez

WChar.

Dans le champ Valeur, entrez la variable de serveur dans laquelle la valeur du critère sera stockée. Par exemple, si le nom du contrôle de formulaire sur la page de recherche est txtVille, une variable de serveur intitulée Request.Form(“txtVille”) sera créée et une valeur y sera stockée.

Vous pouvez également entrer une expression plus complète indiquant la valeur par défaut à utiliser lorsque la variable de serveur n'existe pas. Par exemple, en cas de recherche dans une base de données Microsoft Access, vous pouvez utiliser % comme valeur par défaut. L'expression suivante permet de vérifier si la variable de serveur Request.Form(

"txtVille"

) existe. Le cas échéant (c'est-à-dire si la variable est égale à une valeur), l'expression renvoie la valeur de la variable ; dans le cas contraire, l'expression renvoie la valeur par défaut

%

.

DREAMWEAVER CS3


603

(IIf((Request.Form("txtCity") <> Nothing),

Request.Form("txtCity"), "")) + "%"

Pour plus d'informations, voir de la documentation sur les langages Visual Basic ou C#.

6

Si nécessaire, cliquez sur Tester pour créer une instance de l'ensemble de données à l'aide des valeurs de variable par défaut.

Les valeurs par défaut sont une simulation des valeurs qui sans cela auraient été renvoyées de la page de recherche. Cliquez sur OK pour fermer l'ensemble de données test.

7

Si l'ensemble de données vous convient, cliquez sur OK.

La requête SQL est insérée dans votre page.

L'étape suivante consiste à afficher les résultats de la recherche dans une grille de données.

Affichage des résultats dans une grille de données (ASP.

N

E

T

)

Après avoir créé l'ensemble de données destiné à recevoir les résultats de la recherche, vous pouvez afficher les informations sur la page par le biais d'une grille de données.

1

Placez le point d'insertion dans la page de recherche, à l'emplacement où la grille de données doit apparaître.

2

Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+), puis choisissez Grille de données.

La boîte de dialogue Grille de données s'affiche.

3

Dans la zone ID, entrez le nom que vous souhaitez attribuer à la grille de données, par exemple dgLocation.

4

Dans le menu déroulant Ensemble de données, sélectionnez l'ensemble de données destiné à recevoir les résultats de la recherche.

5

Renseignez les autres sections de la boîte de dialogue selon les besoins.

L'exemple suivant présente une boîte de dialogue Grille de données qui a pour effet de créer une grille de données composée de trois colonnes et de dix lignes, ainsi que des liens vers les pages de résultats précédentes et suivantes :

La grille de données s'affiche lors du premier chargement de la page de recherche, même si l'utilisateur n'a pas encore lancé de recherche. Vous pouvez faire en sorte que la grille de données soit masquée lors du premier chargement de la page.

DREAMWEAVER CS3


604

Voir aussi

Masquage de la grille de données lors du premier chargement de la page (ASP.

N

E

T

)

Vous pouvez faire en sorte que la grille de données dans laquelle les résultats de la recherche s'afficheront soit masquée lors du premier chargement de la page de recherche.

1

Ouvrez la page de recherche en mode Code (Affichage > Code).

2

Si la page est écrite en Visual Basic, entrez le bloc de code suivant immédiatement après la directive Register en haut de la page :

<script runat="server">

Sub Page_Load()

If Not IsPostBack Then

dgName

.Visible = falseElse

dgName

.Visible = trueEnd IfEnd Sub

</script> où

dgName

correspond à l'ID de la grille de données.

Si la page est écrite en C#, entrez le code suivant :

<script runat="server"> void Page_Load() { if (!IsPostBack) {

dgName

.Visible = false;} else {

dgName

.Visible = true;}}

</script>

3


Création d'une page d'informations détaillées (ASP.

N

E

T

)

Votre page de recherche peut comporter une page d'informations détaillées permettant d'obtenir des informations supplémentaires sur des enregistrements spécifiques répertoriés dans la grille de données. Dans ce cas, la page de recherche fait office de page principale dans un ensemble de pages principale/détails. Pour plus d'informations, consultez la section

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

A propos de la création de pages d'insertion d'enregistrements

Votre application peut contenir une page permettant à l'utilisateur d'insérer de nouveaux enregistrements dans une base de données.

Vous trouverez un didacticiel consacré à la création d'une page d'insertion d'enregistrements à l'adresse www.adobe.com/go/learn_dw_webapp .

• un formulaire HTML permettant aux utilisateurs de saisir des données ;

• un comportement de serveur Insérer l'enregistrement pour mettre à jour la base de données.

Lorsque l'utilisateur clique sur le bouton Envoyer d'un formulaire, le comportement de serveur insère des enregistrements dans une table de base de données.

DREAMWEAVER CS3


605

Vous pouvez inclure ces éléments dans la page en une seule opération à l'aide de l'objet de données Formulaire d'insertion d'enregistrement ou les insérer individuellement à l'aide des outils de formulaire de Dreamweaver et du panneau

Comportements de serveur.

Remarque :

La page d'insertion ne peut pas contenir plus d'un comportement de serveur de modification d'enregistrement à la fois. Par exemple, vous ne pouvez pas y inclure également un comportement de serveur Mettre à jour l'enregistrement ou

Supprimer l'enregistrement.

Création d'une page d'insertion élément par élément

Vous pouvez également créer une page d'insertion à l'aide des outils de formulaires et des comportements de serveur.

Voir aussi


Ajout d'un formulaire H

T

ML dans une page d'insertion

1

Créez une page dynamique (Fichier > Nouveau > Page vierge) et effectuez-en la mise en forme à l'aide des outils de création de Dreamweaver.

2

Pour ajouter le formulaire HTML, placez le point d'insertion à l'endroit où le formulaire doit apparaître, puis sélectionnez Insertion > Formulaire > Formulaire.


3

Pour nommer le formulaire HTML, commencez par le sélectionner en cliquant sur la balise

<form>

au bas de la fenêtre de document, ouvrez l'inspecteur Propriétés (Fenêtre > Propriétés), puis entrez un nom dans la zone Nom du formulaire.

Vous n'avez pas besoin de définir l'attribut action

ou method

du formulaire pour lui indiquer où et comment envoyer les données d'enregistrement lorsque l'utilisateur clique sur le bouton Envoyer. Le comportement de serveur Insérer un enregistrement définit automatiquement ces attributs.

4

Insérez un objet de formulaire tel qu'un champ de texte (Insertion > Formulaire > Champ de texte) pour chaque colonne de la table de base de données dans laquelle insérer des enregistrements.

Les objets de formulaire sont destinés à la saisie de données. On utilise souvent des champs de texte dans ce but, mais rien ne vous empêche d'utiliser des menus, des options et des boutons radio.

5


Vous pouvez modifier l'étiquette du bouton Envoyer ; pour ce faire, sélectionnez ce bouton, ouvrez l'inspecteur Propriétés

(Fenêtre > Propriétés) et entrez une nouvelle valeur dans la zone Etiquette.

Ajout d'un comportement de serveur destiné à l'insertion d'enregistrements dans une base de données (ColdFusion)

1

Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+) et choisissez Insérer l'enregistrement dans le menu déroulant.

2

Dans le menu déroulant Envoyer les valeurs à partir de, sélectionnez un formulaire.

3

Dans le menu déroulant Source de données, sélectionnez une connexion à la base de données.

4

Saisissez votre nom d'utilisateur et votre mot de passe.

5

Dans le menu déroulant Insérer dans la table, sélectionnez la table de base de données dans laquelle insérer l'enregistrement.

6

Indiquez la colonne de base de données dans laquelle vous souhaitez insérer l'enregistrement. Dans le menu déroulant

Valeur, sélectionnez l'objet de formulaire devant insérer l'enregistrement. Dans le menu déroulant Envoyer en tant que, sélectionnez ensuite le type de données de l'objet de formulaire.

Le type de données est celui qu'attend la colonne de la table de base de données (texte, numérique, valeurs d'option booléennes).

Répétez cette procédure pour chaque objet du formulaire.

DREAMWEAVER CS3


606

7

Dans la zone Après l'insertion, aller à, indiquez la page à ouvrir après insertion de l'enregistrement dans la table ou cliquez sur le bouton Parcourir pour naviguer jusqu'au fichier.

8

Cliquez sur OK.

Dreamweaver ajoute à la page un comportement de serveur qui permet aux utilisateurs d'insérer des enregistrements dans une table de base de données. Pour ce faire, il leur suffit de compléter le formulaire HTML et de cliquer sur le bouton

Envoyer.

Ajout d'un comportement de serveur destiné à l'insertion d'enregistrements dans une base de données (ASP, JSP)

1


2

Dans le menu déroulant Connexion, sélectionnez une connexion à la base de données.

Cliquez sur le bouton Définir si vous devez définir une connexion.

3

Dans le menu déroulant Insérer dans la table, sélectionnez la table de base de données dans laquelle vous souhaitez insérer l'enregistrement.

4


5

Dans le menu déroulant Obtenir les valeurs de, sélectionnez le formulaire HTML à utiliser pour la saisie des données.

Dreamweaver sélectionne automatiquement le premier formulaire apparaissant sur votre page.

6





7

Cliquez sur OK.


Envoyer.

Pour modifier le comportement de serveur, ouvrez le panneau Comportements de serveur (Fenêtre > Comportements de serveur) et double-cliquez sur le comportement Insérer un enregistrement.

Ajout d'un comportement de serveur destiné à l'insertion d'enregistrements dans une base de données (ASP.

N

E

T

)

1


2


3



4

Dans le menu déroulant Insérer dans la table, sélectionnez la table de base de données dans laquelle insérer l'enregistrement.

5





DREAMWEAVER CS3


607

6

Dans la zone En cas de réussite, aller à, indiquez l'emplacement de la page à afficher lorsque le comportement de serveur s'exécute avec succès ou cliquez sur le bouton Parcourir pour naviguer jusqu'à l'emplacement.

7

Dans la zone En cas de défaillance, aller à, indiquez l'emplacement de la page à afficher lorsque le comportement de serveur échoue ou cliquez sur le bouton Parcourir pour naviguer jusqu'à l'emplacement.

8

Activez l'option Afficher les informations de débogage suite à une défaillance pour que les informations de débogage s'affichent en cas d'échec du comportement de serveur.

Lorsque cette option est sélectionnée, Dreamweaver ignore l'option En cas de défaillance, aller à.

Utilisez l'option de débogage au cours du développement, puis l'option En cas de défaillance, aller à lorsque votre site est actif.

9

Cliquez sur OK.


Envoyer.

Ajout d'un comportement de serveur destiné à l'insertion d'enregistrements dans une base de données (PHP)

1


2


3


4

Dans le menu déroulant Insérer un tableau, sélectionnez la table de base de données dans laquelle vous souhaitez insérer l'enregistrement.

5





6


7

Cliquez sur OK.


Envoyer.

Création de la page d'insertion en une seule opération

1

Ouvrez la page en mode Création, puis sélectionnez Insertion > Objets de données > Insérer un enregistrement >

Assistant de formulaire d'insertion d'enregistrement.

2

Dans le menu déroulant Connexion, sélectionnez une connexion à la base de données. Cliquez sur le bouton Définir si vous devez définir une connexion.

3

Dans le menu déroulant Insérer dans la table, sélectionnez la table de base de données dans laquelle vous souhaitez insérer l'enregistrement.

4

Si vous utilisez ColdFusion, saisissez le nom d'utilisateur et le mot de passe.

5


6

Si vous utilisez ASP.NET, vous pouvez indiquer une page à afficher en cas de succès et une autre page à afficher en cas d'échec. Vous pouvez aussi décider d'afficher les informations de débogage en cas d'échec.

DREAMWEAVER CS3


608

Lorsque vous sélectionnez Afficher les informations de débogage suite à une défaillance, Dreamweaver ignore l'option En cas de défaillance, aller à.

Utilisez l'option Afficher les informations de débogage suite à une défaillance au cours du développement, puis l'option En cas de défaillance, aller à lorsque votre page est publiée.

7

Dans la zone Champs de formulaire, spécifiez les objets de formulaire que vous souhaitez inclure dans le formulaire

HTML de la page d'insertion, ainsi que les colonnes de la base de données que chaque objet de formulaire devra mettre à jour.

Par défaut, Dreamweaver crée un objet de formulaire pour chaque colonne de la table de base de données. Si votre base de données génère automatiquement un ID de clé unique pour chaque enregistrement créé, supprimez l'objet de formulaire correspondant à la colonne à clé ; pour ce faire, sélectionnez l'objet dans la liste et cliquez sur le bouton Moins (-). Ainsi, l'utilisateur du formulaire ne pourra pas entrer une valeur d'ID qui existe déjà.

Vous pouvez également modifier l'ordre des objets de formulaire dans le formulaire HTML ; il vous suffit de sélectionner un objet dans la liste et de le déplacer dans cette dernière en cliquant sur la flèche vers le haut ou vers le bas située sur la droite de la boîte de dialogue.

8

Définissez la façon dont chaque champ de saisie de données devra être affiché dans le formulaire HTML en cliquant sur une ligne du tableau Champs de formulaire et en entrant les informations suivantes dans les zones affichées sous le tableau :

•

Dans la zone Etiquette, saisissez la description à afficher à côté du champ de saisie de données. Par défaut, Dreamweaver affiche dans ce champ le nom de la colonne de la table.

•

Dans le menu déroulant Afficher comme, sélectionnez l'objet de formulaire à utiliser comme champ de saisie de données.

Vous avez le choix entre Champ de texte, Zone de texte, Menu, Case à cocher, Groupe de boutons radio et Texte. Pour les entrées en lecture seule, choisissez Texte. Vous pouvez également choisir Champ Mot de passe, Champ de fichier et

Champ masqué.

Remarque :

Les champs masqués sont insérés à la fin du formulaire.

•

Dans le menu déroulant Envoyer en tant que, sélectionnez le format de données accepté par la table de base de données.

Par exemple, si les données numériques sont les seules admises, choisissez Numérique.

•

Définissez les propriétés de l'objet de formulaire. Vous avez le choix entre plusieurs possibilités, en fonction de l'objet de formulaire sélectionné comme champ de saisie de données. Pour les champs de texte, les zones de texte et le texte, vous pouvez entrer une valeur initiale. Pour les menus et les groupes de boutons radio, ouvrez une autre boîte de dialogue afin de définir des propriétés. Pour les options, sélectionnez l'option Cochée ou Non cochée.

•

Dans ASP.NET, vous pouvez utiliser les contrôles de formulaire Web.

9

Cliquez sur OK.

Dreamweaver insère dans la page un formulaire HTML et un comportement de serveur Insérer l'enregistrement. Les objets de formulaire sont disposés sur la page sous forme d'un tableau simple, que vous pouvez ensuite personnaliser à l'aide des outils de conception de page de Dreamweaver (assurez-vous qu'aucun objet de formulaire ne dépasse les limites du formulaire).

Pour modifier le comportement de serveur, ouvrez le panneau Comportements de serveur (Fenêtre > Comportements de serveur) et double-cliquez sur le comportement Insérer un enregistrement.

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

A propos des pages de mise à jour d'enregistrements

Votre application peut contenir un ensemble de pages permettant à l'utilisateur de mettre à jour les enregistrements existants d'une table de base de données. L'ensemble de pages se compose normalement d'une page de recherche, d'une page de résultats et d'une page de mise à jour. La page de recherche et la page de résultats permettent aux utilisateurs de récupérer un enregistrement et la page de mise à jour de le modifier.

DREAMWEAVER CS3


609

Recherche de l'enregistrement à mettre à jour

Lorsqu'un utilisateur veut mettre à jour un enregistrement, il doit d'abord localiser celui-ci dans la base de données. Vous devez donc créer une page de recherche et de résultats qui fonctionnera en tandem avec la page de mise à jour. L'utilisateur entre des critères de recherche dans la page de recherche et sélectionne l'enregistrement dans la page de résultats. Lorsqu'il clique sur l'enregistrement sur la page de résultats, la page de mise à jour s'ouvre et affiche l'enregistrement dans un formulaire HTML.

Voir aussi


Création de liens vers la page de mise à jour

Après avoir créé les pages de recherche et de résultats, vous devez ajouter des liens à la page de résultats afin d'ouvrir la page de mise à jour. Vous devez ensuite modifier les liens de manière à transmettre les ID des enregistrements sélectionnés par l'utilisateur. La page de mise à jour utilise cet ID pour rechercher l'enregistrement demandé dans la base de données et l'afficher.

Le processus destiné à ouvrir la page de mise à jour et à la transmission d'un ID d'enregistrement est identique à celui d'ouverture d'une page de détails et à la transmission d'un ID d'enregistrement. Pour plus d'informations, consultez la

section « Création de liens vers la page de détails » à la page 589.

Voir aussi


Récupération de l'enregistrement à mettre à jour

Une fois que la page d’actualisation a reçu de la page de résultats le paramètre d'URL identifiant l'enregistrement à mettre

à jour, elle doit récupérer cet enregistrement à partir de la table de base de données et le stocker provisoirement dans un jeu d'enregistrements.

1

Créez une page dans Dreamweaver et enregistrez-la.

Cette page est alors utilisée comme page de mise à jour.

2

Dans le panneau Liaisons (Fenêtre > Liaisons), cliquez sur le bouton Plus (+) et sélectionnez Jeu d'enregistrements.

Si la boîte de dialogue avancée s'affiche, cliquez sur Simple. La boîte de dialogue avancée comporte une zone de texte qui permet la saisie d'instructions SQL, contrairement à la boîte de dialogue simplifiée.

3

Nommez le jeu d'enregistrements et indiquez où se trouvent les données à mettre à jour à l'aide des menus déroulants

Connexion et Table.

4

Cliquez sur l'option Sélectionnées et choisissez une colonne à clé (généralement la colonne ID de l'enregistrement), ainsi que les colonnes contenant les données devant être mises à jour.

5

Configurez la zone Filtre de manière à ce que la valeur de votre colonne à clé soit égale à celle du paramètre d'URL correspondant transmis par la page de résultats.

Ce type de filtre crée un jeu d'enregistrements ne contenant que l'enregistrement spécifié par la page de résultats. Par exemple, si votre colonne à clé contient des informations d'ID d'enregistrement et s'appelle PRID, et si la page principale transmet les informations d'ID d'enregistrement correspondantes dans le paramètre d'URL appelé id

, votre zone Filtre doit avoir l'aspect suivant :

DREAMWEAVER CS3


610

6

Cliquez sur OK.

Lorsque l'utilisateur sélectionne un enregistrement sur la page de résultats, la page de mise à jour génère un jeu d'enregistrements contenant uniquement l'enregistrement sélectionné.

Finalisation de la page d'actualisation élément par élément

• un jeu d'enregistrements filtré permettant de récupérer l'enregistrement à partir d'une table de base de données ;

• un formulaire HTML permettant aux utilisateurs de modifier les données de l'enregistrement ;

• un comportement de serveur Mettre à jour l'enregistrement permettant de mettre à jour la base de données.

Vous pouvez insérer séparément les deux derniers éléments de base d'une page de mise à jour à l'aide des outils de formulaire et du panneau Comportements de serveur.

Voir aussi



T

ML dans une page d'actualisation

1

Créez une page (Fichier > Nouveau > Page vierge) Cette page devient la page de mise à jour.

2

Mettez la page en forme à l'aide des outils de conception de Dreamweaver.

3

Pour ajouter le formulaire HTML, placez le point d'insertion à l'endroit où le formulaire doit apparaître, puis sélectionnez Insertion > Formulaire > Formulaire.


4


<form>



ou method

du formulaire pour lui indiquer où et comment envoyer les données d'enregistrement lorsque l'utilisateur clique sur le bouton Envoyer. Le comportement de serveur Mettre à jour un enregistrement définit automatiquement ces attributs.

5

Insérez un objet de formulaire tel qu'un champ de texte (Insertion > Formulaire > Champ de texte) pour chaque colonne

à mettre à jour dans la table de base de données.

Les objets de formulaire sont destinés à la saisie de données. On utilise souvent des champs de texte dans ce but, mais rien ne vous empêche d'utiliser des menus, des options et des boutons radio.

A chaque objet de formulaire doit correspondre une colonne dans le jeu d'enregistrements défini précédemment. La seule exception est la colonne à clé unique, qui ne doit pas avoir d'objet de formulaire correspondant.

6




Affichage de l'enregistrement dans le formulaire

1

Assurez-vous que vous avez défini au préalable un jeu d'enregistrements pour stocker l'enregistrement à mettre à jour.

2

Liez chaque objet du formulaire à des données du jeu d'enregistrements, comme décrit dans les sections suivantes :

•

« Affichage de contenu dynamique dans des champs de texte HTML » à la page 581

•

« Activation dynamique d'une case à cocher HTML » à la page 581

•

« Activation dynamique d'un bouton radio HTML » à la page 582

DREAMWEAVER CS3


611

•


•

« Ajout de la fonctionnalité dynamique à des menus de formulaire HTML existants

Ajout d'un comportement de serveur destiné à la mise à jour de la base de données

1

Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+) et choisissez Mettre à jour l'enregistrement dans le menu déroulant.

La boîte de dialogue Mettre à jour l'enregistrement s'affiche.

2


3

Dans le menu déroulant Source de données ou Connexion, sélectionnez une connexion à la base de données.

4

Tapez votre nom d'utilisateur et votre mot de passe, le cas échéant.

5

Dans le menu déroulant Mettre à jour la table, sélectionnez la table de base de données qui contient l'enregistrement à mettre à jour.

6

(ColdFusion, PHP, ASP.NET) Indiquez la colonne de base de données à mettre à jour. Dans le menu déroulant Valeur, sélectionnez l'objet de formulaire devant mettre à jour la colonne. Dans le menu déroulant Envoyer en tant que, sélectionnez le type de données de l'objet de formulaire, puis choisissez Clé primaire si vous souhaitez définir cette colonne comme étant la clé primaire.



7

(ASP, JSP) Dans le menu déroulant Sélectionner un enregistrement dans, indiquez le jeu contenant l'enregistrement affiché dans le formulaire HTML. Dans le menu déroulant Colonne à clé unique, sélectionnez une colonne à clé

(généralement le champ d'ID de l'enregistrement) devant identifier l'enregistrement dans la table de la base de données. Si la valeur est un nombre, sélectionnez l'option Numérique. Une colonne à clé n'accepte généralement que des valeurs numériques, mais dans certains cas, elle accepte également du texte.

8

Dans la zone Après la mise à jour, aller à ou En cas de réussite, aller à, indiquez la page à ouvrir après mise à jour de l'enregistrement dans la table ou cliquez sur le bouton Parcourir pour naviguer jusqu'au fichier.

9

(ASP.NET) Dans la zone En cas de défaillance, aller à, indiquez l'emplacement de la page à afficher lorsque le comportement de serveur échoue ou cliquez sur le bouton Parcourir pour naviguer jusqu'à l'emplacement.

10

(ASP.NET) Activez l'option Afficher les informations de débogage suite à une défaillance pour que les informations de débogage s'affichent en cas d'échec du comportement de serveur. Lorsque cette option est sélectionnée, Dreamweaver ignore l'option En cas de défaillance, aller à.


11

(ASP, JSP) Indiquez la colonne de base de données à mettre à jour. Dans le menu déroulant Valeur, sélectionnez l'objet de formulaire devant mettre à jour la colonne. Dans le menu déroulant Envoyer en tant que, sélectionnez ensuite le type de données de l'objet de formulaire. Le type de données est celui qu'attend la colonne de la table de base de données (texte, numérique, valeurs d'option booléennes). Répétez cette procédure pour chaque objet du formulaire.

12

Cliquez sur OK.

Dreamweaver ajoute à la page un comportement de serveur qui permet aux utilisateurs de mettre à jour les enregistrements d'une table de base de données ; pour ce faire, il leur suffit de modifier les informations affichées dans le formulaire HTML et de cliquer sur le bouton Envoyer.

Pour modifier le comportement de serveur, ouvrez le panneau Comportements de serveur (Fenêtre > Comportements de serveur) et double-cliquez sur le comportement Mettre à jour l'enregistrement.

Finalisation de la page de mise à jour en une seule opération

• un jeu d'enregistrements filtré permettant de récupérer l'enregistrement à partir d'une table de base de données ;

DREAMWEAVER CS3


612

• un formulaire HTML permettant aux utilisateurs de modifier les données de l'enregistrement ;

• un comportement de serveur Mettre à jour l'enregistrement permettant de mettre à jour la base de données.

Vous pouvez insérer les deux derniers éléments d'une page de mise à jour en une seule étape à l'aide de l'objet de données

Formulaire de mise à jour des enregistrements. Cet objet insère dans la page un formulaire HTML et un comportement de serveur Mettre à jour l'enregistrement.

Pour que vous puissiez utiliser l'objet de données, il faut que votre application Web soit capable d'identifier l'enregistrement

à mettre à jour et que votre page de mise à jour soit en mesure de le récupérer.

Après avoir inséré les éléments sur la page au moyen de l'objet de données, vous pouvez utiliser les outils de conception de

Dreamweaver pour personnaliser le formulaire ou le panneau Comportements de serveur pour modifier le comportement de serveur Mettre à jour l'enregistrement.

Remarque :

La page de mise à jour ne peut pas contenir plus d'un comportement de serveur de modification d'enregistrement

à la fois. Par exemple, vous ne pouvez pas y inclure également un comportement de serveur Insérer un enregistrement ou

Supprimer l'enregistrement.

1

Ouvrez la page en mode Création, puis choisissez Insertion > Objets de données > Mettre à jour l'enregistrement >

Assistant de formulaire de mise à jour des enregistrements.

La boîte de dialogue Formulaire de mise à jour des enregistrements s'affiche.

2



3

Dans le menu déroulant Table à mettre à jour, sélectionnez la table de base de données qui contient l'enregistrement à mettre à jour.

4

Dans le menu déroulant Sélectionner un enregistrement dans, indiquez le jeu contenant l'enregistrement affiché dans le formulaire HTML.

5

Dans le menu déroulant Colonne à clé unique, sélectionnez une colonne à clé (généralement le champ d'ID de l'enregistrement) devant identifier l'enregistrement dans la table de la base de données.

Si la valeur est un nombre, sélectionnez l'option Numérique. Une colonne à clé n'accepte généralement que des valeurs numériques, mais dans certains cas, elle accepte également du texte.

6

Dans la zone Après la mise à jour, aller à (En cas de réussite, aller à pour ASP.NET), indiquez la page à ouvrir après la mise à jour de l'enregistrement dans la table.

7

(ASP.NET) Si la mise à jour échoue, vous pouvez décider d'afficher une page Web ou des informations de débogage relatives à l'échec.

Utilisez l'option de débogage au cours du développement, puis l'option En cas de défaillance, aller à lorsque votre site est actif. Lorsque l'option de débogage est sélectionnée, Dreamweaver ignore l'option En cas de défaillance, aller à.

8

Dans la zone Champs du formulaire, indiquez les colonnes de la table de base de données que chaque objet de formulaire doit mettre à jour.

Par défaut, Dreamweaver crée un objet de formulaire pour chaque colonne de la table de base de données. Si votre base de données génère automatiquement un ID de clé unique pour chaque enregistrement créé, supprimez l'objet de formulaire correspondant à la colonne à clé ; pour ce faire, sélectionnez l'objet dans la liste et cliquez sur le bouton Moins (-). Ainsi, l'utilisateur du formulaire ne pourra pas entrer une valeur d'ID qui existe déjà.

Vous pouvez également modifier l'ordre des objets de formulaire dans le formulaire HTML ; il vous suffit de sélectionner un objet dans la liste et de le déplacer dans cette dernière en cliquant sur la flèche vers le haut ou vers le bas située sur la droite de la boîte de dialogue.

9

Définissez la façon dont chaque champ de saisie de données doit s'afficher sur le formulaire HTML. Pour ce faire, cliquez sur une ligne du tableau Champs de formulaire et indiquez les informations suivantes dans les zones affichées sous la table :

•

Dans la zone Etiquette, saisissez la description à afficher à côté du champ de saisie de données. Par défaut, Dreamweaver affiche dans ce champ le nom de la colonne de la table.

DREAMWEAVER CS3


613

•

Dans le menu déroulant Afficher comme, sélectionnez l'objet de formulaire à utiliser comme champ de saisie de données.

Vous avez le choix entre Champ de texte, Zone de texte, Menu, Case à cocher, Groupe de boutons radio et Texte. Pour les entrées en lecture seule, choisissez Texte. Vous pouvez également choisir Champ Mot de passe, Champ de fichier et

Champ masqué.

Remarque :

Les champs masqués sont insérés à la fin du formulaire.

•

Dans le menu déroulant Envoyer en tant que, sélectionnez le format de données qui sera accepté par cette colonne de la table de base de données. Par exemple, si les données numériques sont les seules admises, choisissez Numérique.

•

Définissez les propriétés de l'objet de formulaire. Vous avez le choix entre plusieurs possibilités, en fonction de l'objet de formulaire sélectionné comme champ de saisie de données. Pour les champs de texte, les zones de texte et le texte, vous pouvez entrer une valeur initiale. Pour les menus et les groupes de boutons radio, ouvrez une autre boîte de dialogue afin de définir des propriétés. Pour les options, sélectionnez l'option Cochée ou Non cochée.

10

Définissez les propriétés des autres objets de formulaire en sélectionnant une autre ligne Champs du formulaire et en saisissant une étiquette, une valeur Afficher en tant que et une valeur Envoyer en tant que.

Pour les menus et les groupes de boutons radio, ouvrez une autre boîte de dialogue pour définir les propriétés. Pour les options, définissez une comparaison entre la valeur actuelle de l'enregistrement pour l'option et une valeur donnée afin de déterminer si l'option doit être activée ou désactivée lorsque l'enregistrement est affiché.

11

Cliquez sur OK.

Dreamweaver insère dans la page un formulaire HTML et un comportement de serveur Mettre à jour l'enregistrement.

L'objet de données insère dans la page un formulaire HTML et un comportement de serveur Mettre à jour l'enregistrement.

Les objets de formulaire sont disposés sur la page sous forme d'un tableau simple, que vous pouvez ensuite personnaliser à l'aide des outils de conception de page de Dreamweaver (assurez-vous qu'aucun objet de formulaire ne dépasse les limites du formulaire).

Pour modifier le comportement de serveur, ouvrez le panneau Comportements de serveur (Fenêtre > Comportements de serveur) et double-cliquez sur le comportement Mettre à jour l'enregistrement.

Voir aussi


O

ptions des propriétés d'élément de formulaire

La boîte de dialogue Propriétés d'élément de formulaire a pour fonction de définir les options des éléments de formulaire figurant sur des pages qui permettent aux utilisateurs de mettre à jour les enregistrements d'une base de données.

1

Choisissez Manuellement ou Depuis la base de données selon la manière dont vous envisagez de créer l'élément de formulaire.

2

Cliquez sur le bouton Plus (+) pour ajouter un élément.

3

Saisissez l'étiquette et la valeur de l'élément.

4

Pour qu'un élément particulier soit sélectionné à l'ouverture de la page dans un navigateur ou lorsqu'un enregistrement s'affiche dans le formulaire, indiquez une valeur égale à celle de l'élément dans la zone Sélectionner une valeur égale à.

Pour choisir une valeur statique ou dynamique, cliquez sur l'icône représentant un éclair, puis sélectionnez une valeur dynamique dans la liste des sources de données. Dans les deux cas, la valeur indiquée doit correspondre à l'une des valeurs de l'élément.

DREAMWEAVER CS3


614

Création de pages de suppression d'un enregistrement

(tous les serveurs)

A propos des pages de suppression d'enregistrements

Votre application peut comporter un ensemble de pages permettant à l'utilisateur de supprimer des enregistrements d'une base de données. L'ensemble de pages se compose normalement d'une page de recherche, d'une page de résultats et d'une page de suppression. Ce type de page est généralement une page d'informations détaillées fonctionnant en tandem avec une page de résultats. Les pages de recherche et de résultats permettent aux utilisateurs de récupérer l'enregistrement et la page de suppression de le confirmer puis de le supprimer.

Après avoir créé les pages de recherche et de résultats, vous devez ajouter des liens à la page de résultats, de manière à ouvrir la page de suppression, puis créer une page de suppression qui affiche les enregistrements et un bouton Envoyer.

Recherche de l'enregistrement à supprimer

Lorsqu'un utilisateur veut supprimer un enregistrement, il doit d'abord localiser celui-ci dans la base de données. Vous devez donc créer une page de recherche et de résultats qui fonctionnera en tandem avec la page de suppression. L'utilisateur entre des critères de recherche dans la page de recherche et sélectionne l'enregistrement dans la page de résultats. Lorsque l'utilisateur clique sur l'enregistrement, la page de suppression s'ouvre et l'enregistrement s'affiche dans un formulaire

HTML sur cette page.

Voir aussi


Création de liens vers une page de suppression (ColdFusion, PHP, ASP.

N

E

T

)

Après avoir créé les pages de recherche et de résultats, vous devez ajouter des liens à la page de résultats afin d'ouvrir la page de suppression. Vous devez ensuite modifier les liens de manière à transmettre les ID des enregistrements que l'utilisateur veut supprimer. La page de suppression utilise cet ID pour rechercher l'enregistrement et l'afficher.

Voir aussi


O uverture de la page de suppression et transfert d'un ID d'enregistrement (ColdFusion, PHP)

1

Dans la page de résultats, créez une colonne dans le tableau utilisé pour afficher les enregistrements. Pour ce faire, cliquez

à l'intérieur de la dernière colonne du tableau et sélectionnez Modifier > Tableau > Insérer des lignes ou des colonnes.

2

Activez l'option Colonnes et l'option Après la colonne courante, puis cliquez sur OK.

Une colonne est ajoutée au tableau.

3

Dans la colonne que vous venez de créer, entrez la chaîne

Delete

dans la ligne contenant les espaces réservés pour le contenu dynamique. Vous devez entrer la chaîne dans la région répétée à onglets.

Vous pouvez également insérer une image comprenant un mot ou un symbole évoquant une suppression.

Si le mode Live Data est activé, tapez la chaîne dans la première ligne d'enregistrements, puis cliquez sur l'icône Actualiser.

4

Sélectionnez la chaîne

Delete

afin de lui appliquer un lien.

Si le mode Live Data est activé, sélectionnez la chaîne située dans la première ligne d'enregistrements.

5

Dans l'inspecteur Propriétés, entrez le nom de la page de suppression dans la zone Lien. Vous pouvez entrer le nom de fichier de votre choix.

DREAMWEAVER CS3


615

Une fois que vous avez cliqué en dehors de la zone Lien, la chaîne

Delete

apparaît liée dans le tableau. Si vous activez le mode des données dynamiques (Affichage > Live Data), vous pouvez observer que le lien s'applique au même texte dans chaque ligne du tableau. Si le mode Live Data est déjà activé, cliquez sur l'icône Actualiser pour appliquer les liens à chaque ligne.

6

Sélectionnez le lien de suppression dans la page de résultats.

Si le mode Live Data est activé, sélectionnez le lien situé dans la première ligne.

7

(ColdFusion, PHP) Dans la zone Lien de l'inspecteur Propriétés, ajoutez la chaîne suivante à la fin de l'URL :

?recordID=#recordsetName.fieldName#

Le point d'interrogation indique au serveur que ce qui suit correspond à un ou plusieurs paramètres d'URL. Le mot recordID correspond au nom du paramètre d'URL (vous pouvez inventer n'importe quel nom de votre choix). Notez le nom du paramètre d'URL : vous devrez en effet l'utiliser ultérieurement au niveau de la page de suppression.


ColdFusion qui renvoie un ID d'enregistrement du jeu d'enregistrements. Un ID différent est généré pour chaque ligne du tableau dynamique. Dans l'expression ColdFusion, remplacez recordsetName

par le nom de votre jeu d'enregistrements et fieldName

par le nom du champ de votre jeu d'enregistrements qui permet d'identifier chaque enregistrement de façon univoque. Dans la plupart des cas, le champ correspond à un numéro d'ID d'enregistrement. Dans l'exemple ci-dessous, le champ correspond à des codes de location uniques : confirmDelete.cfm?recordID=#rsLocations.CODE#

Lorsque la page s'exécute, les valeurs du champ CODE du jeu d'enregistrements sont insérées dans les lignes correspondantes du tableau dynamique. Par exemple, si le point de location Canberra, Australia, possède le code CBR, l'URL suivante est utilisée dans la ligne Canberra du tableau dynamique : confirmDelete.cfm?recordID=CBR

8

(PHP) Dans le champ Lien de l'inspecteur Propriétés, ajoutez la chaîne suivante à la fin de l'URL :

?recordID=<?php echo $row_recordsetName['fieldName']; ?>

Le point d'interrogation indique au serveur que ce qui suit correspond à un ou plusieurs paramètres d'URL. Le mot recordID correspond au nom du paramètre d'URL (vous pouvez inventer n'importe quel nom de votre choix). Notez le nom du paramètre d'URL : vous devrez en effet l'utiliser ultérieurement au niveau de la page de suppression.


PHP qui renvoie un ID d'enregistrement du jeu d'enregistrements. Un ID différent est généré pour chaque ligne du tableau dynamique. Dans l'expression PHP, remplacez recordsetName

par le nom de votre jeu d'enregistrements et fieldName

par

DREAMWEAVER CS3


616

le nom du champ de votre jeu d'enregistrements qui permet d'identifier chaque enregistrement de façon univoque. Dans la plupart des cas, le champ correspond à un numéro d'ID d'enregistrement. Dans l'exemple ci-dessous, le champ correspond

à des codes de location uniques : confirmDelete.php?recordID=<?php echo $row_rsLocations['CODE']; ?>

Lorsque la page s'exécute, les valeurs du champ CODE du jeu d'enregistrements sont insérées dans les lignes correspondantes du tableau dynamique. Par exemple, si le point de location Canberra, Australia, possède le code CBR, l'URL suivante est utilisée dans la ligne Canberra du tableau dynamique : confirmDelete.php?recordID=CBR

9


O uverture de la page de suppression et transmission d'un ID d'enregistrement (ASP.

N

E

T

)

Pour créer les liens de suppression dans la grille de données, ajoutez une colonne hyperlien et définissez ses attributs.

1

Double-cliquez votre grille de données dans le panneau Comportements de serveur.

2

Ajoutez la colonne de liens ; pour ce faire, cliquez sur le bouton Plus (+) et choisissez Hyperlien.

3

Dans la zone Titre, entrez le nom que vous souhaitez attribuer à la colonne, par exemple Supprimer.

Ce titre s'affiche dans l'en-tête de la colonne.

4

Sélectionnez l'option Texte statique, et entrez le texte du lien, par exemple,

Supprimer l'enregistrement

.

Le même texte s'affiche sur toutes les lignes de la colonne hyperlien.

5

Dans la zone Page associée, définissez l'URL à associer au texte de la colonne hyperlien.

L'URL doit non seulement permettre d'ouvrir la page de suppression, mais aussi d'identifier de façon univoque l'enregistrement à afficher sur cette page.

Pour permettre l'identification de l'enregistrement à afficher sur la page de suppression, choisissez l'option Champ de données, puis sélectionnez dans l'ensemble de données un champ permettant d'identifier chaque enregistrement de façon univoque. Dans la plupart des cas, le champ correspond à un numéro d'ID d'enregistrement.

6

Dans la zone Chaîne de mise en forme de la zone Page associée, cliquez sur le bouton Parcourir, puis recherchez et sélectionnez la page de suppression.

Une URL vers la page de suppression est créée. Cette URL comprend un paramètre identifiant l'enregistrement devant être présenté sur la page de suppression. Relevez le nom du paramètre d'URL : vous en aurez en effet besoin ultérieurement au niveau de la page de suppression.

Par exemple, si vous avez défini locationDelete.aspx comme page de suppression et sélectionné le champ CODE comme champ permettant d'identifier de façon univoque chaque enregistrement, l'URL suivante est créée :

Dans ce cas, un paramètre d'URL nommé

CODE

est créé. Dreamweaver copie le nom du champ de données mais ce nom n'est pas indispensable. Vous pouvez le remplacer par un nom plus évocateur (« recordID » dans l'exemple ci-dessous).

locationDelete.aspx?recordID={0}

L'élément

{0}

est un espace réservé correspondant à la valeur du champ de données. Lorsque la page s'exécute, les valeurs du champ CODE de l'ensemble de données sont insérées dans les lignes correspondantes de la grille de données. Par exemple, si le point de location Canberra, Australie, possède le code CBR, l'URL suivante est utilisée dans la ligne Canberra de la grille de données : locationDelete.aspx?recordID=CBR

7

Cliquez sur OK pour fermer la boîte de dialogue Hyperlien, puis de nouveau sur OK pour fermer la boîte de dialogue

Grille de données.

DREAMWEAVER CS3


617

La grille de données est mise à jour sur la page. La grille de données présentée ci-dessous s'affiche dans un navigateur lorsqu'un utilisateur lance une recherche afin d'obtenir toutes les villes commençant par la lettre c :

Création de la page de suppression

Après avoir créé la page répertoriant les enregistrements, passez à la page de suppression. La page de suppression affiche l'enregistrement et invite l'utilisateur à confirmer sa suppression. Lorsque l'utilisateur confirme l'opération en cliquant sur le bouton du formulaire, l'application Web supprime l'enregistrement de la base de données.

La création de cette page consiste à créer un formulaire HTML, à récupérer l'enregistrement à afficher dans le formulaire,

à l'afficher dans le formulaire et à ajouter la logique permettant de supprimer l'enregistrement de la base de données. Les opérations de récupération et d'affichage de l'enregistrement impliquent de définir un jeu d'enregistrements destiné à recevoir cet enregistrement (celui que l'utilisateur souhaite supprimer) et de lier les colonnes du jeu d'enregistrements au formulaire.

Remarque :

La page de suppression ne peut pas contenir plus d'un comportement de serveur de modification d'enregistrement

à la fois. Par exemple, vous ne pouvez pas y inclure également un comportement de serveur Insérer un enregistrement ou Mettre

à jour l'enregistrement.

Création d'un formulaire H

T

ML permettant d'afficher l'enregistrement

1

Créez une page et enregistrez-la de sorte qu'elle devienne la page de suppression définie dans la section précédente.

Vous avez défini une page de suppression lors de la création du lien de suppression (voir la section précédente). Utilisez le nom de cette page lorsque vous enregistrez le fichier pour la première fois (par exemple, deleteConfirm.cfm).

2

Insérez un formulaire HTML dans la page (Insertion > Formulaire > Formulaire).

3

Ajoutez un champ masqué au formulaire.

Le champ masqué est nécessaire pour stocker l'ID d'enregistrement transmis par le paramètre d'URL. Pour insérer un champ masqué, placez le point d'insertion dans le formulaire et choisissez Insertion > Formulaire > Champ masqué.

4

Ajoutez un bouton au formulaire.

Ce bouton permet à l'utilisateur de confirmer la suppression de l'enregistrement affiché. Pour insérer un bouton, placez le point d'insertion dans le formulaire et choisissez Insertion > Formulaire > Bouton.

5

Modifiez la présentation de la page selon les besoins et enregistrez-la.

Récupération de l'enregistrement à supprimer

1


(Requête) dans le menu déroulant.

La boîte de dialogue Jeu d'enregistrements ou Jeu de données simplifiée s'affiche. Si la boîte de dialogue Jeu d'enregistrements avancée s'affiche, cliquez sur Simple.

DREAMWEAVER CS3


618

2

Attribuez un nom au jeu d'enregistrements, puis sélectionnez une source de données ainsi que la table de base de données contenant les enregistrements que les utilisateurs peuvent supprimer.

3

Dans la zone Colonnes, sélectionnez les colonnes (champs d'enregistrement) à afficher sur la page.

Pour n'afficher que certains champs de l'enregistrement, cliquez sur Sélectionnées, puis cliquez sur les champs souhaités tout en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée.

Assurez-vous que le champ d'ID d'enregistrement est compris dans la sélection, même si vous ne souhaitez pas l'afficher.

4

Renseignez la section Filtre comme suit, pour rechercher et afficher l'enregistrement spécifié dans le paramètre d'URL

•

Dans le premier menu déroulant de la zone Filtre, sélectionnez la colonne du jeu d'enregistrements contenant les valeurs correspondant à celle du paramètre d'URL transmis par la page comportant les liens Supprimer. Par exemple, si le paramètre d'URL contient un numéro d'ID d'enregistrement, sélectionnez la colonne contenant les numéros d'ID d'enregistrement. Dans l'exemple de la section précédente, la colonne intitulée CODE contient les valeurs correspondant

à celle du paramètre d'URL transmis par la page contenant les liens de suppression.

•

Dans le menu déroulant situé en regard du premier menu, sélectionnez le signe égal (=) (si cela n'est pas déjà fait).

•

Dans le troisième menu déroulant, choisissez Paramètre d'URL. La page contenant les liens de suppression utilise un paramètre d'URL pour transmettre des informations à la page de suppression.

•

Dans le quatrième champ, entez le nom du paramètre d'URL transmis par la page contenant les liens de suppression.

5

Cliquez sur OK.

Le jeu d'enregistrements s'affiche dans le panneau Liaisons.

Affichage de l'enregistrement à supprimer

1

Sélectionnez les colonnes de jeu de données (champs d'enregistrement) dans le panneau Liaisons et faites-les glisser vers la page de suppression.

Veillez à insérer le contenu dynamique en lecture seule au sein des limites du formulaire. Pour plus d'informations sur

l'insertion de contenu dynamique dans une page, consultez la section « Création de texte dynamique » à la page 538.

Vous devez ensuite lier la colonne d'ID d'enregistrement au champ de formulaire masqué.

2

Vérifiez que l'option Eléments invisibles est activée (Affichage > Assistances visuelles > Eléments invisibles), puis cliquez sur l'icône en forme de bouclier jaune représentant le champ masqué.

Le champ masqué est sélectionné.

3

Dans l'inspecteur Propriétés, cliquez sur l'icône en forme d'éclair située en regard de la zone Valeur.

4

Dans la boîte de dialogue Données dynamiques, sélectionnez la colonne d'ID d'enregistrement dans le jeu d'enregistrements.

Dans l'exemple suivant, la colonne d'ID d'enregistrement, CODE, contient des codes de magasin uniques.

DREAMWEAVER CS3


619

Colonne d'ID de l'enregistrement sélectionnée

5

Cliquez sur OK et enregistrez la page.

Page de suppression terminée

Insertion de la logique permettant de supprimer l'enregistrement (ColdFusion, PHP,

ASP.

N

E

T

)

Après avoir affiché l'enregistrement sélectionné sur la page de suppression, vous devez insérer sur cette page la logique permettant de supprimer l'enregistrement de la base de données lorsque l'utilisateur clique sur le bouton de confirmation de la suppression. Le comportement de serveur Supprimer l'enregistrement permet d'insérer rapidement cette logique.

1

Vérifiez que la page de suppression est ouverte dans Dreamweaver.

2

Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+), puis choisissez Supprimer l'enregistrement.

3

Vérifiez que l'option Valeur de la clé primaire est sélectionnée dans la zone Vérifier au préalable si la variable est définie.

Vous définirez la valeur de la clé primaire ultérieurement dans cette boîte de dialogue.

DREAMWEAVER CS3


620

4

Dans le menu Connexion ou Source de données (ColdFusion), sélectionnez une connexion à la base de données de sorte que le comportement de serveur puisse se connecter à la base de données concernée.

5

Dans le menu déroulant Table, sélectionnez la table de base de données contenant les enregistrements à supprimer.

6

Dans le menu déroulant Colonne de la clé primaire, sélectionnez la colonne contenant les ID d'enregistrement.

Le comportement de serveur Supprimer l'enregistrement recherche une correspondance dans cette colonne. Cette dernière doit contenir les mêmes ID d'enregistrement que la colonne du jeu d'enregistrements que vous avez liée au formulaire masqué sur la page.

Si l'ID d'enregistrement est numérique, sélectionnez l'option Numérique.

7

(ASP.NET) Dans le menu déroulant Envoyer la clé primaire en tant que, sélectionnez le type des données de la colonne de clé primaire.

8

(PHP) Dans le menu déroulant Valeur de la clé primaire, sélectionnez la variable de la page contenant l'ID d'enregistrement identifiant l'enregistrement à supprimer.

La variable est générée par le champ de formulaire masqué. Son nom correspond à l'attribut name du champ masqué.

Suivant l'attribut method du formulaire, elle se présente sous la forme d'un paramètre de formulaire ou d'un paramètre d'URL.

9

Dans la zone Après la suppression, aller à ou En cas de réussite, aller à, indiquez la page à ouvrir après la suppression de l'enregistrement de la table.

Cette page peut par exemple présenter un bref message indiquant à l'utilisateur que l'opération a réussi, ou bien répertorier les enregistrements restants afin que l'utilisateur puisse vérifier que l'enregistrement a bien été supprimé.

10

(ASP.NET) (Facultatif) Si nécessaire, activez l'option Afficher les informations de débogage suite à une défaillance. Les informations de débogage sont générées par le serveur. Si vous souhaitez qu'un message d'erreur personnalisé s'affiche, désactivez l'option Afficher les informations de débogage suite à une défaillance et indiquez la page à ouvrir dans la zone

En cas de défaillance, aller à.

11

Cliquez sur OK et enregistrez votre travail.

Chargez les pages sur votre serveur Web, ouvrez un navigateur et recherchez l'enregistrement à supprimer. Cliquez sur un lien de suppression sur la page de résultats. La page de suppression s'affiche. Cliquez sur le bouton Confirmer pour supprimer l'enregistrement de la base de données. Pour vérifier que l'enregistrement a bien été supprimé, ouvrez de nouveau la page contenant les liens de suppression. L'enregistrement ne figure plus dans la liste.

Remarque :

Cliquez sur Actualiser s'il apparaît toujours dans la page.

DREAMWEAVER CS3


621

Insertion de la logique permettant de supprimer l'enregistrement (ASP, JSP)

Après avoir inséré un bouton permettant à l'utilisateur de supprimer l'enregistrement, vous pouvez passer à l'étape finale qui consiste à ajouter le comportement de serveur Supprimer l'enregistrement destiné à mettre à jour la base de données lorsque l'utilisateur clique sur le bouton Envoyer.

1

Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+) et choisissez Supprimer l'enregistrement dans le menu déroulant.

2



3

Dans le menu déroulant Supprimer de la table, sélectionnez la table de base de données qui contient l'enregistrement à supprimer.

4

Dans le menu déroulant Sélectionner un enregistrement dans, indiquez le jeu contenant l'enregistrement à supprimer.

5

Dans le menu déroulant Colonne à clé unique, sélectionnez une colonne à clé (généralement le champ d'ID de l'enregistrement) devant identifier l'enregistrement dans la table de la base de données.

Si la valeur est un nombre, sélectionnez l'option Numérique. Une colonne à clé n'accepte généralement que des valeurs numériques, mais dans certains cas, elle accepte également du texte.

6

Dans le menu déroulant Supprimer en envoyant, spécifiez le formulaire HTML contenant le bouton Envoyer qui envoie la commande de suppression au serveur.

7

Dans la zone de texte Après la suppression, aller à, indiquez la page à ouvrir après suppression de l'enregistrement dans la table de base de données ou cliquez sur le bouton Parcourir pour naviguer jusqu'au fichier.

Dreamweaver ajoute à la page un comportement de serveur qui permet aux utilisateurs de supprimer des enregistrements d'une table de base de données en cliquant sur le bouton Envoyer du formulaire.

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

N

E

T

, JSP)

A propos des objets de commande ASP

Un objet de commande ASP est un objet de serveur qui effectue une opération donnée dans une base de données. Il peut contenir toute instruction SQL valide, y compris une instruction qui renvoie un jeu d'enregistrements, ou qui insère, met à jour ou supprime des enregistrements dans une base de données. Un objet de commande peut modifier la structure d'une base de données si l'instruction SQL ajoute ou supprime une colonne dans la table. Il peut également servir à exécuter une procédure stockée dans une base de données.

Un objet de commande est dit réutilisable car le serveur peut exécuter plusieurs fois la commande à l'aide d'une seule version compilée de l'objet. Pour qu'une commande soit réutilisable, définissez la propriété Préparé de l'objet de commande sur true

, comme dans l'instruction VBScript suivante : mycommand.Prepared = true

Si vous savez que la commande sera exécutée un grand nombre de fois, il est conseillé d'utiliser une seule version compilée de l'objet pour améliorer l'efficacité des opérations effectuées dans la base de données.

Remarque :

Les commandes préparées ne sont pas prises en charge par tous les fournisseurs de base de données. Si votre base de données ne les prend pas en charge, elle risque de renvoyer une erreur lorsque vous définissez cette propriété sur

true

. Elle pourrait même ignorer la requête de préparation de la commande et définir la propriété Préparé sur

false

.

Sur une page ASP, un objet de commande est créé par l'intermédiaire de scripts. Cependant, Dreamweaver vous permet de créer des objets de commande sans avoir à écrire une seule ligne de code ASP.

DREAMWEAVER CS3


622

Modification d'une base de données à l'aide des commandes ASP

A l'aide de Dreamweaver, vous pouvez créer des objets de commande ASP qui insèrent, mettent à jour et suppriment des enregistrements dans une base de données. Il vous suffit d'indiquer à l'objet de commande l'instruction ou la procédure stockée SQL qui effectue l'opération dans la base de données.

1

Dans Dreamweaver, ouvrez la page ASP qui doit exécuter la commande.

2

Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+), puis choisissez Commande.

3

Saisissez le nom de la commande, choisissez une connexion à modifier, puis sélectionnez l'opération de modification que la commande doit effectuer (Insérer, Mettre à jour ou

Supprimer).

Dreamweaver rédige le début de l'instruction SQL en fonction du type d'opération sélectionné. Par exemple, voici la boîte de dialogue qui s'affiche lorsque vous sélectionnez le type Insérer :

4

Complétez l'instruction SQL.

Pour plus d'informations sur la rédaction d'instructions SQL modifiant des bases de données, consultez un manuel

Transact-SQL.

5

Définissez les variables SQL dans la zone Variables. Fournissez le nom et la valeur d'exécution. La définition du type et de la taille de chaque variable empêche les attaques par injection.

L'exemple ci-dessous illustre une instruction Insert qui contient trois variables SQL. Les valeurs de ces variables sont fournies par des paramètres d'URL transmis à la page, dont la définition s'affiche dans la colonne Valeur d'exécution de la zone Variables.

Pour obtenir la valeur de taille, utilisez le volet Bases de données de Dreamweaver. Dans le volet Bases de données, trouvez votre base de données et développez-la. Trouvez ensuite la table que vous utilisez et développez-la. La table contient les tailles de vos champs. Par exemple, elle peut indiquer ADDRESS (WChar 50). Dans cet exemple, la taille vaut 50. Vous pouvez également trouver la taille dans votre application de base de données.

Remarque :

Les types de données Numérique, Booléen et date/heure emploient toujours la taille -1.

Pour déterminer la valeur Type, reportez-vous au tableau suivant :

DREAMWEAVER CS3


623

T ype dans la base de données

T ype dans Dreamweaver

Num

é rique

(MS A ccess

, MS SQ

L

S erver

,

M y SQ L )

D oub l e

B oo lé en

,

Oui

/

Non

(MS A ccess

, MS SQ

L

S erver , M y SQ L )

D oub l e

D ate

/

Heure

(MS A ccess

, MS SQ

L

S erver

,

M y SQ L )

DBT ime

S tamp

T ous

l es autres types de champ de te x te , y compris l es types de donn é es te x te

M y

SQ

L char

, varchar et

l ongte x t

Long

V ar

C har

V ar WC har T e x te (MS A ccess ) ou nvarchar , nchar

(MS SQ

L

S erver

)

Mé mo (MS A ccess ), nte x t (MS SQ L

S erver

), ou champs acceptant de grandes quantit é s de te x te

Long V ar WC har

T aille

-1

-1

-1 reporte zvous

à l a tab l e de base de donn é es reporte zvous à l a tab l e de base de donn

é es

1073741823

Pour plus d'informations sur le type et la taille des variables SQL, consultez le site Web de Adobe à l'adresse www.adobe.com/go/4e6b330a .

6

Fermez la boîte de dialogue.

Dreamweaver insère dans votre page un code ASP qui, lorsqu'il s'exécute sur le serveur, crée une commande qui insère, met

à jour ou supprime des enregistrements dans la base de données.

Par défaut, la propriété Préparé de l'objet de commande est définie sur true

, ce qui permet au serveur d'application de réutiliser une seule version compilée de l'objet chaque fois que la commande est exécutée. Pour modifier ce paramètre, basculez en mode Code et définissez la propriété Préparé sur false

.

7

Créez une page avec un formulaire HTML, de manière à permettre aux utilisateurs d'entrer des données sur les enregistrements. Dans le formulaire HTML, ajoutez trois champs de texte (txtVille, txtAdresse et txtTéléphone) et un bouton Envoyer. Le formulaire utilise la méthode

GET

et envoie les valeurs des champs de texte à la page contenant votre commande.

A propos des instructions préparées JSP

Une instruction préparée JSP est un objet de serveur réutilisable qui contient une instruction SQL. Vous pouvez y insérer n'importe quelle instruction SQL valide. Par exemple, une instruction préparée peut contenir une instruction SQL qui renvoie un jeu d'enregistrements ou qui insère, met à jour ou supprime des enregistrements dans une base de données.

Une instruction préparée est dite réutilisable car le serveur d'application peut interroger la base de données plusieurs fois à l'aide d'une seule instance de l'objet d'instruction préparée. Contrairement à l'objet d'instruction JSP, une nouvelle instance de l'objet d'instruction préparée n'est pas créée pour chaque nouvelle requête de base de données. Si vous savez que l'instruction sera exécutée un grand nombre de fois, il est conseillé d'utiliser une seule instance de l'objet pour améliorer l'efficacité des opérations effectuées dans la base de données et réduire la mémoire occupée sur le serveur.

Sur une page JSP, les objets d'instruction préparée sont créés par l'intermédiaire d'un scriptlet Java. Cependant,

Dreamweaver vous permet de créer des instructions préparées sans avoir à écrire une seule ligne de code Java.

Si vous souhaitez néanmoins connaître le code nécessaire, étudiez le scriptlet suivant, qui permet de créer une instruction préparée :

String myquery = “SELECT * FROM EMPLOYEES WHERE DEPARTMENT = ?”;

PreparedStatement mystatement = connection.prepareStatement(myquery);

La première ligne stocke l'instruction SQL dans une variable de chaîne appelée myquery

; le point d'interrogation sert d'espace réservé à la valeur de la variable SQL. La deuxième ligne crée un objet d'instruction préparée appelé mystatement

.

Vous devez ensuite attribuer une valeur à la variable SQL, comme suit : mystatement.setString(1, request.getParameter(“myURLparam”));

DREAMWEAVER CS3


624

La méthode setString

attribue la valeur à la variable et accepte deux arguments. Le premier argument spécifie la variable attribuée en fonction de sa position (dans ce cas, la première position dans l'instruction SQL). Le deuxième argument spécifie la valeur de la variable. Dans cet exemple, la valeur est fournie par un paramètre URL transmis à la page.

Remarque :

Les méthodes à utiliser pour attribuer des valeurs aux variables SQL diffèrent en fonction du type de valeur nonchaîne. Par exemple, pour attribuer un entier à une variable, vous devez utiliser la méthode

mystatement.setInt()

.

Pour terminer, vous devez générer un jeu d'enregistrements, comme suit :

ResultSet myresults = mystatement.execute();

Modification d'une base de données à l'aide d'instructions préparées JSP

A l'aide de Dreamweaver, vous pouvez créer des instructions préparées JSP qui insèrent, mettent à jour et suppriment des enregistrements dans une base de données. Une instruction préparée JSP est un objet de serveur réutilisable qui contient une instruction SQL. Il vous suffit d'indiquer dans l'instruction préparée l'instruction SQL qui effectue l'opération dans la base de données.

1

Dans Dreamweaver, ouvrez la page JSP qui doit exécuter la commande.

2

Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+), puis choisissez Préparé (Insertion, Mise à jour, Suppression)

La boîte de dialogue Préparé (Insertion, Mise à jour, Suppression) s'affiche.

3

Saisissez le nom de l'instruction préparée, sélectionnez une connexion à une base de données contenant les enregistrements à modifier, puis choisissez l'opération de modification que l'instruction préparée doit effectuer (Insérer,

Mettre à jour ou Supprimer).

Dreamweaver rédige le début de l'instruction SQL en fonction du type d'opération sélectionné.

4

Complétez l'instruction SQL.

Pour plus d'informations sur la rédaction d'instructions SQL modifiant des bases de données, consultez un manuel

Transact-SQL.

5

Définissez les variables SQL dans la zone Variables.

Dans la colonne Paramètre, indiquez le nom des paramètres SQL utilisés dans l'instruction SQL. Dans la colonne Valeur d'exécution, entrez le paramètre de formulaire ou d'URL fournissant une valeur à chaque paramètre SQL. Par exemple, si la valeur à attribuer à un paramètre SQL est fournie par un paramètre d'URL appelé txtVille, entrez la valeur d'exécution suivante : request.getParameter(“txtCity”)

6

Cliquez sur OK.

Une fois la boîte de dialogue fermée, le code JSP est inséré dans votre page. Lorsqu'il s'exécute sur le serveur, ce code crée une instruction préparée qui insère, met à jour ou supprime des enregistrements dans la base de données.

A propos des procédures stockées

Bien qu'il soit possible d'utiliser des comportements de serveur pour créer des pages qui modifient des bases de données, vous pouvez également créer des pages en utilisant des objets de manipulation de base de données, tels que des procédures stockées, des objets de commande ASP ou des instructions préparées JSP.

Une procédure stockée est un élément de base de données réutilisable qui effectue des opérations dans une base de données.

Elle contient du code SQL qui permet notamment d'insérer, de mettre à jour ou de supprimer des enregistrements. Elle peut

également modifier la structure de la base de données. Une procédure stockée peut ainsi servir à ajouter une colonne ou encore à supprimer une table.

Elle peut également appeler une autre procédure stockée, accepter des paramètres d'entrée et renvoyer à la procédure d'appel plusieurs valeurs sous la forme de paramètres de sortie.

DREAMWEAVER CS3


625

Une procédure stockée est dite réutilisable car vous pouvez effectuer une opération dans la base de données plusieurs fois

à l'aide d'une seule version compilée de la procédure. Si vous savez qu'une tâche de base de données sera exécutée un grand nombre de fois ou qu'elle sera exécutée par différentes applications, il est conseillé d'utiliser une procédure stockée pour améliorer l'efficacité des opérations effectuées dans la base de données.

Remarque :

Les bases de données MySQL et Microsoft Access ne prennent pas en charge les procédures stockées.

Ajout d'une procédure stockée (ColdFusion)

Vous pouvez modifier une base de données à l'aide d'une procédure stockée. Une procédure stockée est un élément de base de données réutilisable qui effectue des opérations dans une base de données.

Remarque :

Les bases de données MySQL et Microsoft Access ne prennent pas en charge les procédures stockées.

Avant de modifier une base de données à l'aide d'une procédure stockée, assurez-vous que cette dernière contient un code

SQL qui modifie la base de données d'une manière ou d'une autre. Pour créer et stocker une procédure stockée dans une base de données, consultez la documentation de la base de données et un bon manuel Transact-SQL.

1

Dans Dreamweaver, ouvrez la page qui doit exécuter la procédure stockée.

2

Dans le panneau Liaisons (Fenêtre > Liaisons), cliquez sur le bouton Plus (+), puis choisissez Procédure stockée.

3

Dans le menu déroulant Source de données, sélectionnez une connexion à une base de données contenant la procédure stockée.

4

Saisissez le nom d'utilisateur et le mot de passe pour la source de données ColdFusion.

5

Sélectionnez une procédure stockée dans le menu déroulant Procédure.

Dreamweaver remplit automatiquement tous les paramètres.

6

Sélectionnez un paramètre et cliquez sur Modifier si vous voulez y apporter des modifications.

La boîte de dialogue Modifier la variable de la procédure stockée s'affiche. Le nom de la variable à modifier s'affiche dans la zone Nom.

Remarque :

Vous devez indiquer des valeurs test pour tout paramètre d'entrée d'une procédure stockée.

7

Apportez les modifications de votre choix

•

Sélectionnez une direction dans le menu déroulant. Une procédure stockée peut comporter des valeurs d'entrée, des valeurs de sortie ou les deux.

•

Sélectionnez un type SQL dans le menu déroulant. Entrez une variable de renvoi, une valeur d'exécution et une valeur test.

8

Si la procédure stockée accepte un paramètre, cliquez sur le bouton Plus (+) pour ajouter un paramètre de page.

Remarque :

Vous devez indiquer les paramètres de page correspondant à chaque valeur de retour de paramètre d'une procédure stockée. Il est inutile d'ajouter les paramètres de page s'il n'y a pas de valeur de retour correspondante.

Cliquez de nouveau sur le bouton Plus (+) pour ajouter un autre paramètre de page, si nécessaire.

9

Sélectionnez un paramètre de page, puis cliquez sur le bouton Moins (-) pour supprimer le paramètre si besoin ou sur

Modifier pour y apporter des modifications.

10

Activez l'option Renvoie le jeu d'enregistrements nommé, puis tapez le nom du jeu d'enregistrements. Si la procédure stockée renvoie un jeu d'enregistrements, cliquez sur le bouton Tester pour l'afficher.

Dreamweaver exécute la procédure stockée et affiche le jeu d'enregistrements, le cas échéant.

Remarque :

Si la procédure stockée renvoie un jeu d'enregistrements et accepte des paramètres, vous devez indiquer une valeur dans la colonne Valeur par défaut de la zone Variables pour tester la procédure stockée.

Vous pouvez utiliser différentes valeurs test pour générer divers jeux d'enregistrements. Pour modifier une valeur test, cliquez sur le bouton Modifier correspondant au paramètre, puis modifiez la valeur test ou cliquez sur le bouton Modifier correspondant au paramètre de page, puis modifiez la valeur par défaut.

11

Activez l'option Renvoie le code d'état nommé, puis saisissez le nom du code d'état si la procédure stockée renvoie une valeur de retour de code d'état. Cliquez sur OK.

DREAMWEAVER CS3


626

Lorsque vous fermez la boîte de dialogue, Dreamweaver insère dans votre page un code ColdFusion qui, lorsqu'il s'exécute sur le serveur, appelle une procédure stockée dans la base de données. La procédure stockée effectue alors une opération dans la base de données, telle que l'insertion d'un enregistrement.

Si la procédure stockée accepte des paramètres, vous pouvez créer une page qui recueille les valeurs de paramètre et les envoie à la page en même temps que la procédure stockée. Ainsi, il est possible de créer une page qui recueille des valeurs de paramètre auprès des utilisateurs à l'aide de paramètres d'URL ou d'un formulaire HTML.

Voir aussi


Ajout d'une procédure stockée (ASP.

N

E

T

)

Vous pouvez modifier une base de données à l'aide d'une procédure stockée. Une procédure stockée est un élément de base de données réutilisable qui effectue des opérations dans une base de données.

Remarque :

Les bases de données Microsoft Access et MySQL ne prennent pas en charge les procédures stockées.

Avant de modifier une base de données à l'aide d'une procédure stockée, assurez-vous que cette dernière contient un code

SQL qui modifie la base de données d'une manière ou d'une autre. Pour créer et stocker une procédure stockée dans une base de données, consultez la documentation de la base de données et un bon manuel Transact-SQL.

1


2

Dans le panneau Liaisons (Fenêtre > Liaisons), cliquez sur le bouton Plus (+), puis sélectionnez Procédure stockée.

3

Dans la boîte de dialogue Procédures stockées, entrez le nom de la procédure stockée.

4

Dans le menu déroulant Connexion, sélectionnez une connexion à une base de données contenant la procédure stockée.


5

Sélectionnez une procédure stockée dans le menu déroulant Procédure.

Dreamweaver remplit automatiquement tous les paramètres.

6

Si la procédure stockée renvoie un ensemble de données, activez l'option Renvoie l'ensemble de données, puis cliquez sur le bouton Tester pour afficher l'ensemble de données renvoyé.

7

Sélectionnez un paramètre, puis cliquez sur le bouton Modifier s'il est nécessaire d'y apporter des modifications.

8

Dans la boîte de dialogue Modifier la variable de la procédure stockée, apportez les modifications requises :

•

Le nom de la variable à modifier s'affiche dans la zone Nom.

•

Sélectionnez le type de la variable dans le menu déroulant. Indiquez la taille de la variable.

•

Sélectionnez une direction dans le menu déroulant. Une procédure stockée peut comporter des valeurs d'entrée, des valeurs de sortie ou les deux.

•

Indiquez une valeur test.

•

Cliquez sur le bouton Générer pour créer la valeur. Dans la boîte de dialogue Générer la valeur, sélectionnez une source dans le menu déroulant, entrez une valeur par défaut puis cliquez sur OK.

•

Cliquez sur OK pour fermer la boîte de dialogue Modifier la variable de la procédure stockée et accepter vos modifications.

9

Dans la zone de texte En cas de réussite, aller à de la boîte de dialogue Procédure stockée, indiquez l'emplacement de la page à afficher lorsque la procédure stockée s'exécute avec succès ou cliquez sur le bouton Parcourir pour naviguer jusqu'à l'emplacement.

10

Dans la zone En cas de défaillance, aller à, indiquez l'emplacement de la page à afficher lorsque la procédure stockée

échoue ou cliquez sur le bouton Parcourir pour naviguer jusqu'à l'emplacement.

11

Activez l'option Afficher les informations de débogage suite à une défaillance pour obtenir les informations de débogage en cas d'échec de la procédure stockée.

Lorsque cette option est sélectionnée, Dreamweaver ignore l'option En cas de défaillance, aller à.

DREAMWEAVER CS3


627


12

Cliquez sur OK.

Une fois la boîte de dialogue fermée, Dreamweaver insère dans votre page un code ASP.NET qui, lorsqu'il s'exécute sur le serveur, exécute une procédure stockée dans la base de données. La procédure stockée effectue alors une opération dans la base de données, telle que l'insertion d'un enregistrement ou l'exécution d'une requête.


Voir aussi


Exécution d'une procédure stockée (ASP)

Dans le cas de pages ASP, l'exécution d'une procédure stockée requiert l'ajout d'un objet de commande. Pour plus

d'informations sur les objets de commande, consultez la section « A propos des objets de commande ASP » à la page 621.

1


2

Dans le panneau Liaisons (Fenêtre > Liaisons), cliquez sur le bouton Plus (+), puis choisissez Commande (Procédure stockée).

La boîte de dialogue Commande s'affiche.

3

Saisissez le nom de la commande, sélectionnez une connexion à une base de données contenant la procédure stockée, puis choisissez Procédure stockée dans le menu déroulant Type.

4

Pour sélectionner votre procédure stockée, développez la branche Procédures stockées dans la zone Eléments de base de données, choisissez la procédure stockée dans la liste, puis cliquez sur le bouton Procédure.

5

Entrez tous les paramètres requis dans le tableau Variables.

Il est inutile d'indiquer des paramètres pour les variables

RETURN_VALUE

.

6

Cliquez sur OK.

Une fois la boîte de dialogue fermée, un code ASP est inséré dans votre page. Lorsqu'il s'exécute sur le serveur, ce code crée un objet de commande qui exécute une procédure stockée dans la base de données. La procédure stockée effectue alors une opération dans la base de données, telle que l'insertion d'un enregistrement.

Par défaut, la propriété Préparé de l'objet de commande est définie sur true

, ce qui permet au serveur d'application de réutiliser une version compilée de l'objet chaque fois que la procédure stockée est exécutée. Si vous savez que la commande sera exécutée un grand nombre de fois, il est conseillé d'utiliser une seule version compilée de l'objet pour améliorer l'efficacité des opérations effectuées dans la base de données. Cependant, si la commande n'est exécutée qu'une ou deux fois, ceci risque de ralentir votre application Web car le système doit s'interrompre pour compiler la commande. Pour modifier ce paramètre, basculez en mode Code et définissez la propriété Préparé sur false

.

Remarque :

Les commandes préparées ne sont pas prises en charge par tous les fournisseurs de base de données. Si votre base de données ne les prend pas en charge, vous risquez de recevoir un message d'erreur lors de l'exécution de la page. Basculez en mode Code et définissez la propriété Préparé sur

false

.


Exécution d'une procédure stockée (JSP)

Dans le cas de pages JSP, l'exécution d'une procédure stockée requiert l'ajout d'un comportement de serveur Appelable.

1


DREAMWEAVER CS3


628

2

Dans le panneau Liaisons (Fenêtre > Liaisons), cliquez sur le bouton Plus (+), puis choisissez Appelable (Procédure stockée).

3

Dans la boîte de dialogue Appelable (Procédure stockée), entrez le nom de la procédure stockée.

4

Dans le menu déroulant Connexions, sélectionnez une connexion à une base de données contenant la procédure stockée.

5

Dans la zone Eléments de base de données, développez la branche Procédures stockées, sélectionnez la procédure stockée dans la liste, puis cliquez sur le bouton Procédure.

Dreamweaver remplit automatiquement les zones Texte appelable et Variables.

6

Activez l'option Renvoie le jeu d'enregistrements nommé, puis tapez le nom du jeu d'enregistrements. Si la procédure stockée renvoie un jeu d'enregistrements, cliquez sur le bouton Tester pour l'afficher.

Dreamweaver exécute la procédure stockée et affiche le jeu d'enregistrements, le cas échéant.

Remarque :

Si la procédure stockée renvoie un jeu d'enregistrements et accepte des paramètres, vous devez indiquer une valeur dans la colonne Valeur par défaut de la zone Variables pour tester la procédure stockée.

7

Cliquez sur OK.

Une fois la boîte de dialogue Appelable (Procédure stockée) fermée, un code JSP est inséré dans votre page. Lorsqu'il s'exécute sur le serveur, ce code appelle une procédure stockée dans la base de données. La procédure stockée effectue alors une opération dans la base de données, telle que l'insertion d'un enregistrement.


Création d'une page d'enregistrement (ColdFusion, ASP,

JSP, PHP)

A propos des pages d'enregistrement

Vous pouvez inclure dans votre application Web une page qui oblige les utilisateurs à s'enregistrer la première fois qu'ils visitent votre site.

• une table de base de données pour stocker les informations de connexion des utilisateurs ;

• un formulaire HTML qui permet aux utilisateurs de sélectionner un nom d'utilisateur et un mot de passe et qui peut également être utilisé pour obtenir d'autres informations personnelles de la part des utilisateurs ;

• un comportement de serveur Insérer un enregistrement pour mettre à jour la table de base de données des utilisateurs du site ;

• un comportement de serveur Vérifier le nouveau nom d'utilisateur pour vérifier que le nom tapé par l'utilisateur n'est pas déjà utilisé.

La méthode utilisée est la même pour les pages ColdFusion, ASP, JSP et PHP. Dreamweaver ne dispose pas de comportements de serveur d'authentification pour les pages ASP.NET.

Voir aussi

« Ajout de formulaire HTML pour la sélection de nom d'utilisateur et de mot de passe (ColdFusion, ASP, JSP, PHP) » à la page 629

« Mise à jour de la table de base de données des utilisateurs (ColdFusion, ASP, JSP, PHP) » à la page 630

« Ajout d'un comportement de serveur pour garantir l'unicité des noms d'utilisateur (ColdFusion, ASP, JSP, PHP) » à la page 630

DREAMWEAVER CS3


629

Stockage des informations de connexion des utilisateurs (ColdFusion, ASP, JSP, PHP)

Une page d'enregistrement nécessite une table de base de données dans laquelle stocker toutes les informations de connexion saisies par les utilisateurs.

•

Assurez-vous que cette table contient bien une colonne nom d'utilisateur et mot de passe. Si vous voulez octroyer différents droits d'accès aux utilisateurs, ajoutez une colonne droit d'accès.

•

Si vous voulez définir un mot de passe commun à tous les utilisateurs du site, configurez votre application de base de données (Microsoft Access, Microsoft SQL Server, Oracle, etc.) de façon à entrer par défaut ce mot de passe dans chaque nouvel enregistrement utilisateur. Dans la plupart des applications de base de données, vous avez la possibilité d'affecter une valeur par défaut à une colonne pour chaque nouvel enregistrement créé. Définissez le mot de passe par défaut.

•

La table de base de données permet également de stocker d'autres informations utiles sur l'utilisateur.

L'étape suivante de la création d'une page d'enregistrement consiste à ajouter un formulaire HTML à cette page afin de permettre aux utilisateurs de choisir un nom d'utilisateur et un mot de passe (le cas échéant).

Voir aussi

« Stockage des privilèges d'accès dans la base de données des utilisateurs (ColdFusion, ASP, JSP, PHP) » à la page 634

Ajout de formulaire H

T

ML pour la sélection de nom d'utilisateur et de mot de passe


Pour permettre à l'utilisateur de sélectionner son nom d'utilisateur et son mot de passe, vous devez ajouter un formulaire

HTML à la page d'enregistrement (le cas échéant).

1

Créez une page (Fichier > Nouveau > Page vierge) et mettez en forme votre page d'enregistrement à l'aide des outils de création de Dreamweaver.

2

Pour ajouter un formulaire HTML, placez le point d'insertion à l'endroit où le formulaire doit apparaître, puis choisissez

Formulaire dans le menu Insertion.


3


<form>



ou method

du formulaire pour lui indiquer où et comment envoyer les données d'enregistrement lorsque l'utilisateur clique sur le bouton Envoyer. Le comportement de serveur Insérer un enregistrement définit automatiquement ces attributs.

4

Ajoutez des champs de texte (Insertion > Formulaire > Champ de texte) afin de permettre à l'utilisateur d'entrer un nom d'utilisateur et un mot de passe.

Le formulaire peut également comporter d'autres objets permettant d'enregistrer d'autres données personnelles.

Il est conseillé d'ajouter des étiquettes (texte ou images) à côté de chaque objet de formulaire, afin d'indiquer à l'utilisateur de quoi il s'agit. Il est également conseillé d'organiser les objets de formulaire en les plaçant dans un tableau HTML. Pour

plus d'informations sur les objets de formulaire, consultez la section « Création de formulaires » à la page 572.

5



(Fenêtre > Propriétés) et entrez une nouvelle valeur dans la zone Valeur.

L'étape suivante de la création d'une page d'enregistrement consiste à ajouter le comportement de serveur Insérer un enregistrement pour insérer des enregistrements dans la table des utilisateurs de la base de données.

DREAMWEAVER CS3


630

Mise à jour de la table de base de données des utilisateurs (ColdFusion, ASP, JSP, PHP)

Vous devez ajouter le comportement de serveur Insérer un enregistrement à la page d'enregistrement pour mettre à jour la table des utilisateurs dans la base de données.

1


La boîte de dialogue Insérer un enregistrement s'affiche.

2

Complétez la boîte de dialogue en veillant à bien indiquer la table des utilisateurs dans la base de données dans laquelle insérer les données des utilisateurs. Cliquez sur OK.

La dernière étape de la création d'une page d'enregistrement consiste à s'assurer que le nom d'utilisateur n'est pas déjà utilisé par un autre utilisateur enregistré.

Voir aussi

« Création d'une page d'insertion élément par élément » à la page 605

Ajout d'un comportement de serveur pour garantir l'unicité des noms d'utilisateur


Vous pouvez ajouter un comportement de serveur à une page d'enregistrement d'utilisateur. Le comportement vérifie que le nom d'utilisateur envoyé par le visiteur est unique avant d'ajouter ce dernier dans votre base de données des utilisateurs enregistrés.

Lorsque l'utilisateur clique sur le bouton Envoyer, sur la page d'enregistrement, le comportement de serveur compare le nom d'utilisateur entré à tous les autres noms déjà enregistrés dans la table de la base de données. Si aucun doublon n'est trouvé, le comportement de serveur poursuit normalement l'insertion de l'enregistrement. En cas de doublon, le comportement de serveur annule l'insertion de l'enregistrement et ouvre une nouvelle page (qui alerte généralement l'utilisateur que le nom choisi est déjà pris).

1


Dans le menu déroulant, sélectionnez Authentification de l'utilisateur > Vérifier le nouveau nom d'utilisateur.

2

Dans le menu déroulant Champ Nom d'utilisateur, sélectionnez la zone de texte du formulaire dans laquelle l'utilisateur devra entrer son nom d'utilisateur.

3

Dans la zone Si existe déjà, aller à, indiquez la page à ouvrir si un doublon est trouvé dans la table de la base de données, puis cliquez sur OK.

Cette page doit alerter l'utilisateur que le nom qu'il a choisi est déjà pris et lui permettre d'en entrer un autre.

Création d'une page de connexion (ColdFusion, ASP, JSP,

PHP)

A propos des pages de connexion

Votre application Web peut contenir une page qui permettra aux utilisateurs enregistrés de se connecter au site.

• une table de base de données regroupant les utilisateurs déjà enregistrés ;

• un formulaire HTML permettant aux utilisateurs d'entrer leur nom d'utilisateur et leur mot de passe ;

• un comportement de serveur Connecter l'utilisateur qui vérifie que le nom d'utilisateur et le mot de passe saisis sont valides ; une variable de session correspondant au nom d'utilisateur est créée pour l'utilisateur lorsqu'il se connecte avec succès.

DREAMWEAVER CS3


631


Voir aussi

« Ajout d'un formulaire HTML permettant aux utilisateurs de se connecter (ColdFusion, ASP, JSP, PHP) » à la page 631

« Vérification du nom d'utilisateur et du mot de passe (ColdFusion, ASP, JSP, PHP) » à la page 631

Création d'une table de base de données des utilisateurs enregistrés (ColdFusion, ASP, JSP,

PHP)

Vous avez besoin d'une table de base de données regroupant les utilisateurs déjà enregistrés pour vérifier que le nom d'utilisateur et le mot de passe saisis dans la page de connexion sont valides.

❖

Pour créer cette table, utilisez votre application de base de données et une page d'enregistrement.

L'étape suivante de la création d'une page de connexion consiste à ajouter un formulaire HTML à la page afin de permettre aux utilisateurs de se connecter.

Voir aussi

« Création d'une page de connexion (ColdFusion, ASP, JSP, PHP) » à la page 630


T

ML permettant aux utilisateurs de se connecter (ColdFusion, ASP,

JSP, PHP)

Ajoutez un formulaire HTML à la page afin de permettre aux utilisateurs de se connecter en entrant un nom d'utilisateur et un mot de passe.

1

Créez une page (Fichier > Nouveau > Page vierge) et mettez en forme votre page de connexion à l'aide des outils de création de Dreamweaver.

2

Pour ajouter le formulaire HTML, placez le point d'insertion à l'endroit où le formulaire doit apparaître, puis choisissez

Insertion > Formulaire.


3


<form>



ou method

du formulaire pour lui indiquer où et comment envoyer les données d'enregistrement lorsque l'utilisateur clique sur le bouton Envoyer. En effet, le comportement de serveur

Connecter l'utilisateur définit automatiquement ces attributs.

4

Ajoutez au formulaire les champs de texte Nom d'utilisateur et Mot de passe (Insertion > Formulaire > Champ de texte).

Ajoutez des étiquettes (texte ou images) à côté de chaque zone de texte, puis organisez ces zones en les plaçant dans un tableau HTML et en donnant à l'attribut

BORDER

de la table la valeur 0.

5




L'étape suivante de la création d'une page de connexion consiste à ajouter le comportement de serveur Connecter l'utilisateur pour vérifier que le nom d'utilisateur et le mot de passe saisis sont valides.

Vérification du nom d'utilisateur et du mot de passe (ColdFusion, ASP, JSP, PHP)

Vous devez ajouter le comportement de serveur Connecter l'utilisateur à la page de connexion pour vérifier la validité du nom d'utilisateur et du mot de passe tapés par un utilisateur.

DREAMWEAVER CS3


632

Lorsqu'un utilisateur clique sur le bouton Envoyer, sur la page de connexion, le comportement de serveur Connecter l'utilisateur compare les valeurs saisies par l'utilisateur à celles des utilisateurs déjà enregistrés. Si les valeurs correspondent, le comportement de serveur ouvre une page (généralement la page d'accueil du site). Si elles ne correspondent pas, le comportement de serveur ouvre une autre page (qui alerte généralement l'utilisateur que la connexion a échoué).

1


Dans le menu déroulant, sélectionnez Authentification de l'utilisateur > Connecter l'utilisateur.

2

Définissez le formulaire et les objets de formulaire que les visiteurs utilisent pour entrer leur nom d'utilisateur et leur mot de passe.

3

(ColdFusion) Tapez votre nom d'utilisateur et votre mot de passe, le cas échéant.

4

Définissez la table de la base de données et les colonnes qui contiennent les noms d'utilisateur et les mots de passe de tous les utilisateurs déjà enregistrés.

Le comportement de serveur compare le nom d'utilisateur et le mot de passe entrés par le visiteur sur la page de connexion aux valeurs de ces colonnes.

5

Indiquez la page à ouvrir si la connexion est établie.

Cette page est généralement la page d'accueil du site.

6

Indiquez la page à ouvrir si la connexion échoue.

Cette page alerte généralement l'utilisateur que la connexion a échoué et lui permet un nouvel essai.

7

Si vous voulez que les utilisateurs envoyés vers la page de connexion après avoir essayé d'accéder à la page retournent à cette page d'accès restreint après la connexion, choisissez l'option Aller à l'URL précédente.

Si un utilisateur essaie d'accéder à votre site en ouvrant une page à l'accès restreint sans s'être préalablement connecté, la page à accès restreint peut l'envoyer vers la page de connexion. Une fois l'utilisateur connecté, la page de connexion le redirige vers la page à accès restreint qui l'a préalablement envoyé vers la page de connexion.

Lorsque vous saisissez les informations relatives au comportement de serveur Restreindre l'accès à la page dans la boîte de dialogue, prenez soin de préciser la page de connexion dans la zone de texte Si l'accès est refusé, aller à.

8

Indiquez si l'accès à la page est accordé selon le nom d'utilisateur et le mot de passe uniquement ou également selon un niveau de privilèges, puis cliquez sur OK.

Un comportement de serveur est ajouté à la page de connexion. Il est destiné à vérifier que le nom d'utilisateur et le mot de passe saisis par le visiteur sont valides.

Voir aussi

« Renvoi des utilisateurs non autorisés (ColdFusion, ASP, JSP, PHP) » à la page 633


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

PHP)

A propos des pages protégées

Votre application Web peut contenir une page protégée à laquelle seuls les utilisateurs autorisés ont accès.

Remarque :

Dreamweaver ne dispose pas de comportements de serveur d'authentification pour les pages ASP.NET.

Si un utilisateur essaie, par exemple, de contourner la page de connexion en entrant l'URL de la page protégée dans le navigateur, il est redirigé vers une autre page. De même, si vous donnez à une page le niveau d'accès Administrateur, alors seuls les utilisateurs ayant les privilèges d'accès Administrateur peuvent la consulter. Si un utilisateur connecté tente d'accéder à la page protégée alors qu'il ne possède pas les privilèges d'accès requis, il est redirigé vers une autre page.

DREAMWEAVER CS3


633

Les niveaux d'accès vous permettent aussi de ne pas octroyer immédiatement l'accès à la totalité du site aux utilisateurs récemment enregistrés. Ainsi, vous pouvez, par exemple, attendre de recevoir un paiement avant d'octroyer l'accès aux pages membre du site. Pour cela, protégez les pages membre avec un niveau d'accès Membre et n'octroyez que les privilèges d'accès Visiteur aux utilisateurs récemment enregistrés. Après réception du paiement, vous pouvez octroyer à l'utilisateur les privilèges d'accès supérieurs, c'est-à-dire Membre (dans la table de base de données des utilisateurs enregistrés).

Si vous n'envisagez pas d'utiliser des niveaux d'accès, vous pouvez néanmoins protéger une page de votre site en ajoutant simplement à la page le comportement de serveur Restreindre l'accès à la page. Ce comportement redirige vers une autre page tout utilisateur n'ayant pas réussi à établir la connexion.

Si vous envisagez d'utiliser des niveaux d'accès, vous pouvez protéger une page de votre site à l'aide des blocs structurels

• un comportement de serveur Restreindre l'accès à la page, pour rediriger les utilisateurs non autorisés vers une autre page ;

• une colonne supplémentaire dans la table de base de données des utilisateurs, pour enregistrer les privilèges d'accès de chaque utilisateur.

Que vous utilisiez les niveaux d'accès ou non, vous pouvez ajouter un lien à la page protégée pour permettre à l'utilisateur de se déconnecter et d'effacer toutes les variables de session.


Voir aussi

Renvoi des utilisateurs non autorisés (ColdFusion, ASP, JSP, PHP)

Pour empêcher les utilisateurs non autorisés d'accéder à une page, ajoutez-lui le comportement de serveur Restreindre l'accès à la page. Ce comportement redirige l'utilisateur vers une autre page s'il tente de contourner la page de connexion en entrant l'URL de la page protégée dans le navigateur, ou s'il est connecté mais tente d'accéder à la page protégée sans avoir les privilèges requis.

Remarque :

Le comportement de serveur Restreindre l'accès à la page ne protège que les pages HTML, et non les autres ressources du site telles que les fichiers d'images et audio.

Si vous voulez attribuer à plusieurs pages du site les mêmes droits d'accès, vous pouvez copier-coller ces droits d'une page vers une autre.

Renvoi des utilisateurs non autorisés vers une autre page

1

Ouvrez la page à protéger.

2


Dans le menu déroulant, sélectionnez Authentification de l'utilisateur > Restreindre l'accès à la page.

3

Sélectionnez le niveau d'accès pour la page. Si vous voulez que seuls les utilisateurs ayant certains privilèges puissent afficher la page, sélectionnez l'option Nom d'utilisateur, mot de passe et niveau d'accès et spécifiez le niveau d'accès de la page.

Vous pouvez par exemple stipuler que seuls les utilisateurs disposant des privilèges Administrateur peuvent afficher la page, en sélectionnant Administrateur dans la liste des niveaux d'autorisation.

4

Pour ajouter des niveaux d'autorisation à la liste, cliquez sur Définir. Dans la liste Définir les niveaux d'accès qui s'affiche, entrez un nouveau niveau d'accès, puis cliquez sur le bouton Plus (+). Le nouveau niveau d'autorisation est stocké de manière à pouvoir être utilisé avec les autres pages.

Vérifiez que la chaîne du niveau d'autorisation correspond exactement à la chaîne stockée dans votre base de données des utilisateurs. Par exemple, si la colonne autorisation de votre base de données contient la valeur

Administrator

, tapez

Administrator

, et non

Admin

, dans la zone de texte Nom.

DREAMWEAVER CS3


634

5

Si vous voulez définir plusieurs niveaux d'autorisation pour une page, cliquez sur les niveaux de la liste tout en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée.

Vous pouvez par exemple stipuler que tout utilisateur possédant les privilèges Visiteur, Membre ou Administrateur peut consulter la page.

6

Indiquez la page à ouvrir si un utilisateur non autorisé tente d'ouvrir la page protégée.

Vérifiez bien que la page choisie n'est pas protégée.

7

Cliquez sur OK.

Copie et collage des droits d'accès d'une page sur d'autres pages du site

1

Ouvrez la page protégée et sélectionnez le comportement Restreindre l'accès à la page dans le panneau Comportements de serveur, et non dans le menu déroulant Plus (+).

2

Cliquez sur la flèche dans le coin supérieur droit du panneau et sélectionnez Copier dans le menu déroulant.

Le comportement de serveur Restreindre l'accès à la page est copié dans le Presse-papiers de votre système.

3

Ouvrez une autre page à protéger de la même façon.

4

Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur la flèche dans le coin supérieur droit et sélectionnez Coller dans le menu déroulant.

5

Répétez les étapes 3 et 4 pour chaque page à protéger.

Stockage des privilèges d'accès dans la base de données des utilisateurs (ColdFusion, ASP,

JSP, PHP)

Ce bloc structurel n'est nécessaire que si vous voulez octroyer différents privilèges à certains des utilisateurs connectés. Si vous voulez simplement que l'utilisateur se connecte, il n’est pas nécessaire de stocker des privilèges d'accès.

1

Si vous voulez que certains utilisateurs connectés aient différents privilèges d'accès, assurez-vous que votre table de base de données des utilisateurs contient une colonne spécifiant les privilèges d'accès de chaque utilisateur (Visiteur, Utilisateur,

Administrateur, etc.). Les privilèges d'accès de chaque utilisateur doivent être entrés dans la base de données par l'administrateur du site.

Dans la plupart des applications de base de données, vous avez la possibilité d'affecter une valeur par défaut à une colonne pour chaque nouvel enregistrement créé. Choisissez comme valeur par défaut les privilèges d'accès les plus courants de votre site (Invité, par exemple), puis changez manuellement les exceptions (en remplaçant Invité par Administrateur, par exemple). L'utilisateur a maintenant accès à toutes les pages administrateur.

2

Vérifiez que chaque utilisateur dans la base de données n'a qu'un seul privilège d'accès, comme Invité ou Administrateur, et non plusieurs. Si vous voulez définir plusieurs privilèges d'accès pour vos pages (en octroyant l'accès d'une page à tous les invités et tous les administrateurs, par exemple), vous devez définir ces privilèges au niveau de la page, et non de la base de données.

Déconnexion d'utilisateurs (ColdFusion, ASP, JSP, PHP)

Lorsque l'utilisateur établit la connexion avec succès, une variable de session composée du nom d'utilisateur est créée.

Lorsque l'utilisateur quitte votre site, vous pouvez utiliser le comportement de serveur Déconnecter l'utilisateur pour effacer cette variable de session et rediriger l'utilisateur vers une autre page (généralement une page de fin de session ou de remerciement).

Vous pouvez appeler le comportement de serveur Déconnecter l'utilisateur lorsque l'utilisateur clique sur un lien ou qu'une page spécifique est chargée.

Ajout d'un lien permettant à l'utilisateur de se déconnecter

1

Sélectionnez le texte ou l'image à utiliser comme lien dans la page.

2

Dans le panneau Comportements de serveur (Fenêtre > Comportements), cliquez sur le bouton Plus (+) et sélectionnez

Authentification de l'utilisateur > Déconnecter l'utilisateur.

DREAMWEAVER CS3


635

3

Indiquez une page à ouvrir lorsque l'utilisateur clique sur le lien, puis cliquez sur OK.

Il s'agit généralement d'une page de fin de session ou de remerciement.

Déconnexion des utilisateurs lors du chargement d'une page spécifique

1

Ouvrez la page qui se chargera dans Dreamweaver.

Il s'agit généralement d'une page de fin de session ou de remerciement.

2

Dans le panneau Comportements de serveur, cliquez sur le bouton Plus (+) et sélectionnez Authentification de l'utilisateur > Déconnecter l'utilisateur.

3

Sélectionnez l'option Se déconnecter au chargement de la page, puis cliquez sur OK.

Sécurisation d’un dossier dans votre application

(ColdFusion)

Sécurisation d'un dossier ou d'un site sur le serveur (ColdFusion)

Dreamweaver permet de protéger à l’aide d’un mot de passe un dossier spécifique de l’application ColdFusion, y compris le dossier racine de l’application. Dans ce cas, lorsqu’un visiteur demande une page figurant dans ce dossier, ColdFusion demande un nom d’utilisateur et un mot de passe. ColdFusion enregistre le nom d’utilisateur et le mot de passe dans des variables de session, de sorte que le visiteur ne se les voit plus demander au cours de la même session.

Remarque :

Cette fonctionnalité n’est disponible que si vous pouvez accéder à un ordinateur exécutant ColdFusion MX 7 ou version ultérieure.

1

Ouvrez un document ColdFusion dans Dreamweaver, et choisissez Commandes > Assistant d’ouverture de session

ColdFusion

2

Saisissez les paramètres voulus dans l’assistant d’ouverture de session ColdFusion

a

Indiquez le chemin d’accès complet du répertoire à sécuriser.

b

:

Authentification simple

Sécurise l’application à l’aide d’un nom et d’un mot de passe identiques pour tous les utilisateurs.

Authentification Windows

NT

Sécurise l’application avec les noms d’utilisateur et mots de passe de Windows NT.

Authentification LDAP

Sécurise l’application avec les noms d’utilisateur et mots de passe enregistrés sur un serveur LDAP.

c

Indiquez si vous souhaitez que les utilisateurs se connectent à l’aide d’une page d’ouverture de session ColdFusion ou d’un menu déroulant.

d

Dans l’écran suivant, définissez les options ci-dessous :

•

Si vous avez choisi l’authentification simple, indiquez le nom et le mot de passe que chaque utilisateur doit saisir.

•

Si vous avez choisi l’authentification Windows NT, indiquez le domaine NT à utiliser pour la validation.

•

Si vous avez choisi l’authentification LDAP, indiquez le serveur LDAP à utiliser pour la validation.

3

Transférez les nouveaux fichiers sur le site distant. Ces fichiers se trouvent dans le dossier local de votre site.

Voir aussi



DREAMWEAVER CS3


636

Utilisation des composants ColdFusion (ColdFusion)

A propos des composants ColdFusion

Les fichiers de composants ColdFusion (CFC) permettent d'encapsuler la logique d'application et d'entreprise au sein d'unités autonomes réutilisables. Ils permettent également de créer rapidement des services Web.

Un composant ColdFusion est une unité logicielle réutilisable écrite en CFML (ColdFusion markup language), qui facilite la réutilisation et la maintenance du code.

Vous pouvez utiliser Dreamweaver pour travailler avec des CFC. Pour plus d'informations sur les balises et la syntaxe des

CFC, consultez la documentation de ColdFusion dans Dreamweaver (Aide > Utilisation de ColdFusion).

Remarque :

Les CFC ne peuvent être utilisés qu’avec ColdFusion MX ou une version ultérieure. Les CFC ne sont pas pris en charge par la version 5 de ColdFusion.

Les CFC sont conçus pour offrir aux développeurs une méthode d'encapsulage des éléments de leurs sites Web, qui soit à la fois simple et puissante. Ces composants s'utilisent généralement pour la logique d'application ou d'entreprise. Utilisez des balises personnalisées pour introduire des éléments de présentation tels que des messages personnalisés ou des menus dynamiques.

L'ajout de parties interchangeables peut rendre les sites dynamiques plus efficaces, comme c'est le cas pour bon nombre d'autres types de structures. Il peut arriver, par exemple, qu'un site dynamique doive exécuter la même requête à maintes reprises ou recalculer le prix total d'un panier d'achats à chaque fois qu'un article est ajouté. Les composants peuvent se charger de ces tâches. Vous pouvez réparer, améliorer, développer, voire remplacer un composant sans que cela ait un grand impact sur le reste de l'application.

Prenons l'exemple d'un magasin en ligne qui calcule les frais de port en fonction du total de la commande passée. Pour les commandes inférieures à 20

€

, les frais de port sont de 4

€

; pour les commandes comprises entre 20

€

et 40

€

, ils sont de

6

€

, etc. Vous pourriez insérer la logique de calcul des frais de port sur la page du panier d'achats et sur la page de règlement. Vous seriez alors amené à mélanger du code de présentation HTML et du code de logique CFML. Avec cette méthode, il est cependant souvent difficile de réutiliser et de gérer le code.

Il vaut donc mieux créer un CFC appelé Pricing, incluant entre autres une fonction appelée

ShippingCharge

. La fonction accepte un argument représentant un prix et renvoie les frais de port. Ainsi, si la valeur de l'argument est de 32,80, la fonction renvoie 6.

Sur les pages du panier d'achats et de règlement, il vous reste à insérer une balise spéciale appelant la fonction

ShippingCharge

. Lorsque la page est demandée, la fonction est appelée et les frais de port sont renvoyés à la page.

Supposons que le magasin fasse ultérieurement une offre promotionnelle : livraison gratuite pour toute commande d'un montant supérieur à 100

€

. Il vous suffit alors de modifier les frais de port à un seul endroit, à savoir la fonction

ShippingCharge

du composant Pricing, pour que les frais de port soient mis à jour sur toutes les pages utilisant la fonction.

Présentation du panneau Composants (ColdFusion)

Le panneau Composants (Fenêtre > Composants) permet d'afficher et de modifier les composants ColdFusion, ainsi que d'écrire dans la page un code qui appelle la fonction lorsque la page CFM est demandée.

Remarque :

Le panneau Composants est uniquement disponible lors de l'affichage d'une page ColdFusion dans Dreamweaver.

Voir aussi

« Création de pages Web qui emploient des CFC » à la page 639

Création ou suppression d'un CFC dans Dreamweaver

Vous pouvez utiliser Dreamweaver pour définir visuellement un CFC et ses fonctions. Dreamweaver crée un fichier .cfc et insère automatiquement les balises CFML nécessaires.

DREAMWEAVER CS3


637

Remarque :

Selon le composant, il vous faudra peut-être compléter le code manuellement.

1


2

Dans le panneau Composants (Fenêtre > Composants), choisissez Composants CF dans le menu déroulant.

3

Cliquez sur le bouton plus (+), complétez la boîte de dialogue Créer un composant, puis cliquez sur OK.

a

Dans la section Composants, saisissez les détails du composant. Voici une liste partielle :

N om

Spécifie le nom de fichier du composant. Ce nom ne peut contenir que des caractères alphanumériques et des caractères de soulignement (_). Il est inutile d'ajouter l'extension de fichier .cfc au nom.

Répertoire des composants

Indique l'endroit dans lequel le composant sera enregistré. Sélectionnez le dossier racine de l'application Web (\Inetpub\wwwroot\monapp\, par exemple) ou l'un de ses sous-dossiers.

b

Pour définir une ou plusieurs fonctions pour le composant, choisissez Fonctions dans la liste Section, cliquez sur le bouton Plus (+), puis saisissez les détails de la nouvelle fonction.

Veillez à bien définir le type de valeur renvoyée par la fonction dans l'option Type de renvoi.

c

Pour définir un ou plusieurs arguments pour une fonction, choisissez Arguments dans la liste Section, sélectionnez la fonction dans le menu déroulant, cliquez sur le bouton Plus (+), puis saisissez les détails du nouvel argument sur la droite.

4

Si vous utilisez un serveur de développement distant, téléchargez vers le serveur distant le fichier CFC et tous les fichiers indépendants (tels que ceux utilisés pour mettre en œuvre une fonction ou inclure des fichiers).

Le téléchargement des fichiers vers le serveur garantit que les fonctionnalités de Dreamweaver, telles que le mode Live Data et Aperçu dans le navigateur, fonctionnent correctement.

Dreamweaver écrit un fichier .cfc et l'enregistre dans le dossier spécifié. Le nouveau composant s'affiche également dans le panneau Composants (il vous suffit de cliquer sur Actualiser).

5

Pour supprimer un composant, vous devez supprimer manuellement le fichier CFC du serveur.

Voir aussi


« A propos des composants ColdFusion » à la page 636

Affichage de CFC dans Dreamweaver

Dreamweaver permet d’examiner visuellement et globalement les composants ColdFusion (CFC) situés dans le dossier de votre site ou sur le serveur. Dreamweaver lit les fichiers CFC et affiche les informations qui les concernent dans une arborescence qu'il est facile de parcourir dans le panneau Composants.

données dans Dreamweaver » à la page 484). Si vous créez des CFC ou modifiez des CFC existants, veillez à les transférer

sur le serveur d’évaluation afin qu’ils apparaissent dans le panneau Composants.

Pour afficher les composants situés sur un autre serveur, modifiez les paramètres du serveur d'évaluation.

• dresser la liste de tous les composants ColdFusion définis pour le site ;

•

(si vous exécutez ColdFusion MX 7 ou version ultérieure) filtrer la liste pour afficher uniquement les CFC situés dans le dossier de votre site ;

•

étudier les fonctions et arguments de chaque composant ;

• examiner les propriétés des fonctions qui servent de services Web.

DREAMWEAVER CS3


638

Si vous voulez utiliser Dreamweaver pour inspecter les CFC résidant dans la racine du serveur tout en gérant les fichiers du site dans une racine de site Web différente, vous pouvez définir deux sites Dreamweaver. Configurez le premier site de façon

à ce qu'il renvoie à la racine du serveur et le second pour qu'il renvoie à la racine du site Web. Utilisez le menu Site du panneau

Fichiers pour passer rapidement d'un site à l'autre.

Pour afficher les CFC dans Dreamweaver, procédez comme suit :

1


2

Dans le panneau Composants (Fenêtre > Composants), choisissez Composants CF dans le menu déroulant.

3

Dans le panneau, cliquez sur le bouton Actualiser pour récupérer les composants.

Les composants sont affichés sur le serveur. Les fichiers CFC des composants s'affichent dans des dossiers .

Si les composants existants n'apparaissent pas, cliquez sur le bouton Actualiser dans la barre d'outils du panneau.

4

Pour afficher uniquement les CFC situés dans le dossier de votre site, cliquez sur le bouton Afficher uniquement les fichiers CFC du site actuel, dans la barre d’outils du panneau Composants.

Remarque :

Cette fonctionnalité n’est disponible que si vous avez défini un ordinateur exécutant ColdFusion MX 6 ou une version ultérieure comme serveur d’évaluation de Dreamweaver.

Remarque :

Si le site actuel apparaît dans un dossier virtuel sur le serveur distant, le filtrage n’est pas opérationnel.

5

Cliquez sur le bouton Plus (+) en regard du nom du dossier pour afficher les composants qu'il contient.

•

Pour dresser la liste des fonctions d'un composant, cliquez sur le bouton Plus (+) en regard du nom du composant.

•

Pour connaître les arguments qu'une fonction accepte, ainsi que leur type et leur caractère facultatif ou obligatoire, développez la branche de la fonction dans l'arborescence.

Aucun bouton Plus (+) ne figure en regard des fonctions sans argument.

•

Pour afficher rapidement les détails d'un argument, d'une fonction ou d'un composant, sélectionnez l'élément dans l'arborescence, puis cliquez sur le bouton Obtenir des détails dans la barre d'outils du panneau.

Vous pouvez également cliquer sur l'élément avec le bouton droit de la souris (Windows) ou en maintenant la touche

Contrôle enfoncée (Macintosh) et choisir Obtenir des détails dans le menu déroulant qui s'affiche.

Les détails de l'élément sont affichés dans une boîte de message.

Voir aussi




Modification de CFC dans Dreamweaver

Dreamweaver permet de modifier de façon rationalisée le code des composants ColdFusion définis dans un site. Vous pouvez, par exemple, ajouter, modifier ou supprimer toute fonction d'un composant sans quitter Dreamweaver.

Pour ce faire, votre environnement de développement doit être configuré comme suit :

•

ColdFusion doit s'exécuter localement.

•

Dans l'onglet Avancé de la boîte de dialogue Définition du site de Dreamweaver, le type d'accès spécifié dans la catégorie du serveur d'évaluation doit être Local/Réseau.

•

Dans l'onglet Avancé de la boîte de dialogue Définition du site, le chemin d'accès à votre dossier racine local doit être identique au chemin d'accès au dossier du serveur d'évaluation (par exemple, c:\Inetpub\wwwroot\cf_projects\myNewApp\). Pour consulter et modifier ces chemins d'accès, choisissez Site >

Modifier les sites.

•

Le composant doit être stocké dans le dossier local du site ou dans l'un de ses sous-dossiers sur votre disque dur.

DREAMWEAVER CS3


639

Ouvrez une page ColdFusion dans Dreamweaver et affichez les composants dans le panneau Composants. Pour afficher les composants, ouvrez le panneau Composants (Fenêtre > Composants), choisissez Composants CF dans le menu déroulant du panneau, puis cliquez sur le bouton Actualiser dans le panneau.

Comme ColdFusion s'exécute localement, Dreamweaver affiche les composants figurant sur votre disque dur.

Procédez comme suit pour modifier un composant.

1

Ouvrez une page ColdFusion dans Dreamweaver et affichez les composants dans le panneau Composants (Fenêtre >

Composants).

2

Dans le menu déroulant du panneau, choisissez Composants CF, puis cliquez sur le bouton Actualiser la liste des composants ColdFusion (CFC).

Comme ColdFusion s'exécute localement, Dreamweaver affiche les composants figurant sur votre disque dur.

Remarque :

Pour modifier visuellement le jeu d’enregistrements du CFC, double-cliquez sur son nom dans le panneau

Liaisons.

3

Pour modifier un fichier du composant de façon générale, ouvrez le dossier dans lequel il réside et double-cliquez sur le nom du composant dans l'arborescence.

Le fichier du composant est ouvert en mode Code.

4

Pour modifier une fonction, un argument ou une propriété spécifique, double-cliquez sur l'élément dans l'arborescence.

5

Effectuez les modifications manuellement en mode Code.

6

Enregistrez le fichier (Fichier > Enregistrer).

7

Pour qu'une nouvelle fonction apparaisse dans le panneau Composants, actualisez la vue en cliquant sur le bouton

Actualiser dans la barre d'outils du panneau.

Voir aussi

« Affichage de CFC dans Dreamweaver » à la page 637

Création de pages Web qui emploient des CFC

Pour utiliser la fonction d'un composant dans vos pages Web, vous pouvez écrire dans la page un code qui appelle la fonction lorsque la page est demandée. Dreamweaver peut vous aider à effectuer cette opération.

Remarque :

Pour connaître d'autres modes d'utilisation des composants, consultez la documentation de ColdFusion dans

Dreamweaver (Aide > Utilisation de ColdFusion).

1

Dans Dreamweaver, ouvrez la page ColdFusion qui doit utiliser la fonction de composant.

2

Basculez en mode Code (Affichage > Code).

3

Ouvrez le panneau Composants (Fenêtre > Composants), puis choisissez Composants CF dans le menu déroulant.

4

Recherchez le composant à utiliser et insérez-le à l'aide de l'une des méthodes suivantes :

•

A partir de l'arborescence, faites glisser une fonction sur la page. Du code permettant d'appeler la fonction est inséré dans la page.

•

Sélectionnez la fonction dans le panneau et cliquez sur le bouton Insérer de la barre d'outils du panneau (deuxième bouton à partir de la droite). Dreamweaver insère le code dans la page au niveau du point d'insertion.

5

Si vous insérez une fonction possédant des arguments, complétez manuellement le code des arguments.

Pour plus d'informations, consultez la documentation de ColdFusion dans Dreamweaver (Aide > Utilisation de

ColdFusion).

6

Enregistrez la page (Fichier > Enregistrer).

DREAMWEAVER CS3


640

Définition d'un jeu d'enregistrements dans un CFC

Dreamweaver permet de définir un jeu d’enregistrements (requête ColdFusion) dans un composant ColdFusion (CFC). En définissant un jeu d’enregistrements dans un CFC, il n’est plus nécessaire de le définir dans chaque page qui l’utilise. Le jeu d’enregistrements est défini une fois pour toutes dans le CFC, qui est utilisé dans les différentes pages.

Remarque :

Cette fonctionnalité n’est disponible que si vous pouvez accéder à un ordinateur exécutant ColdFusion MX 7 ou

1

Créez ou ouvrez un fichier CFC dans Dreamweaver.

2



La boîte de dialogue Jeu d’enregistrements s'affiche. Vous pouvez choisir de travailler dans la boîte de dialogue simple ou avancée.

3

Pour utiliser une fonction existante du CFC, sélectionnez cette fonction dans le menu déroulant Fonction, puis passez à


4

Pour définir une nouvelle fonction dans le CFC, cliquez sur le bouton Nouvelle fonction, saisissez le nom de la fonction dans la boîte de dialogue qui apparaît alors, et cliquez sur OK.

Ce nom ne peut contenir que des caractères alphanumériques et des caractères de soulignement (_).

5

Pour définir un jeu d'enregistrements pour la fonction, définissez les options de la boîte de dialogue Jeu d'enregistrements.

La nouvelle fonction est insérée dans le CFC qui définit le jeu d'enregistrements.

Voir aussi

« Création ou suppression d'un CFC dans Dreamweaver » à la page 636

Utilisation d’un jeu d’enregistrements dans un CFC comme source de contenu dynamique

Il est possible d’utiliser un composant ColdFusion (CFC) comme source de contenu dynamique des pages, si ce composant contient une fonction définissant un jeu d’enregistrements.

Remarque :

Cette fonctionnalité n’est disponible que si vous pouvez accéder à un ordinateur exécutant ColdFusion MX 7 ou version ultérieure. Pour plus d’informations, consultez la section Activation des améliorations ColdFusion.

1


2



La boîte de dialogue Jeu d’enregistrements s'affiche. Vous pouvez choisir de travailler dans la boîte de dialogue simple ou avancée.

3

Cliquez sur le bouton Requête CFC.

4

Remplissez la boîte de dialogue Requête CFC, cliquez sur OK, puis cliquez à nouveau sur OK pour ajouter le jeu d'enregistrements CFC à la liste des sources de contenu disponibles dans le panneau Liaisons.

5

Utilisez le panneau Liaisons pour lier le jeu d’enregistrements aux divers éléments de la page.

Définition de contenu dynamique à l'aide d'un CFC

Vous pouvez définir un jeu d’enregistrements comme source de contenu dynamique dans Dreamweaver en utilisant un CFC qui contient une définition de jeu d’enregistrements.

1

Dans la zone Nom, saisissez le nom du jeu d'enregistrements CFC.

DREAMWEAVER CS3


641

Il est d'usage d'ajouter le préfixe rs aux noms des jeux d'enregistrements, afin de les distinguer des autres noms d'objet dans le code, par exemple : rsPressRelease

Le nom d'un jeu d'enregistrements ne peut contenir que des caractères alphanumériques et des caractères de soulignement

(_). Ils ne doivent pas comporter d'espaces ni de caractères spéciaux.

2

Sélectionnez un dossier parmi ceux qui sont définis sur le serveur.

Si le dossier n’apparaît pas dans le menu déroulant, actualisez la liste en cliquant sur le bouton Actualiser à côté du menu.

Auparavant, vérifiez que vous avez bien transféré vos CFC sur le serveur d’évaluation. Seuls les fichiers CFC sur le serveur d’évaluation sont affichés.

3

Sélectionnez un composant parmi ceux qui sont définis dans le dossier sélectionné.

Si le menu déroulant des composant ne contient aucun composant, or u si aucun des composants que vous avez créés précédemment n’apparaît, transférez vos fichiers CFC sur le serveur d’évaluation.

4

(Facultatif) Pour créer un nouveau composant, cliquez sur le bouton Créer un nouveau composant.

a

Dans la zone Nom, saisissez le nom du nouveau CFC. Ce nom ne peut contenir que des caractères alphanumériques et des caractères de soulignement (_).

b

Dans la zone Répertoire des composants, saisissez l’emplacement du CFC, ou recherchez le dossier correspondant.

Remarque :

Ce dossier doit être le chemin relatif au dossier racine du site.

5

Dans le menu déroulant Fonction, sélectionnez la fonction contenant la définition du jeu d’enregistrements.

Le menu déroulant Fonction ne contient que les fonctions définies dans le composant sélectionné. Si aucune fonction n’apparaît dans le menu déroulant, ou si vos derniers changements n’apparaissent pas dans les fonctions affichées, vérifiez que les derniers changements ont bien été enregistrés et transférés sur le serveur.

Remarque :

Les zones Connexion et SQL sont toutes les deux en lecture seule.

6

Cliquez sur le bouton Modifier pour modifier chaque paramètre (type, valeur, valeur par défaut) qui doit être passé en argument à la fonction.

a

Saisissez une valeur pour le paramètre actuel en sélectionnant le type de valeur dans le menu déroulant Valeur et en saisissant la valeur voulue dans la zone située à sa droite.

Le type de valeur peut être un paramètre d’URL, une variable de formulaire, un cookie, une variable de session, une variable d’application ou une valeur fixe que vous saisissez.

b

Dans la zone Valeur par défaut, saisissez la valeur par défaut que vous souhaitez attribuer au paramètre.

Si aucune valeur n’est renvoyée à l'exécution, la valeur par défaut est utilisée.

c

Cliquez sur OK.

Il est impossible de modifier la connexion de base de données et la requête SQL du jeu d’enregistrements. Ces champs sont toujours désactivés, et ces données ne sont affichées ici qu’à titre d’information.

7


Si l'instruction SQL contient des paramètres de page, vérifiez que la colonne Valeur par défaut de la zone Paramètres contient des valeurs test correctes avant de cliquer sur Tester.

Si la requête a été correctement exécutée, le jeu d’enregistrements est affiché dans un tableau. Chaque ligne contient un enregistrement et chaque colonne un champ de cet enregistrement.

Cliquez sur OK pour effacer la requête.

8

Cliquez sur OK.

DREAMWEAVER CS3


642

Utilisation de JavaBeans (JSP)

Utilisation de JavaBeans

Les composants JavaBeans sont des éléments architecturaux des applications JSP à plusieurs niveaux. Ils sont généralement utilisés dans une bibliothèque de composants métier, qui permet de séparer la logique de présentation de la logique d'accès contiennent la logique qui permettant d'accéder directement à la base de données.

Dans Dreamweaver, les composants JavaBeans sont considérés comme des sources de contenu dynamique de pages JSP et s'affichent dans le panneau Liaisons. Vous pouvez double-cliquer sur des JavaBeans dans le panneau Liaisons pour afficher leurs propriétés, puis faire glisser les propriétés vers la page pour créer des références à des données dynamiques.

Vous pouvez également définir un ensemble JavaBeans (groupe de JavaBeans) comme source de contenu dynamique.

Toutefois, dans le cas d'ensembles JavaBeans, Dreamweaver ne prend en charge que les régions répétées et les liaisons dynamiques.

Accès aux fichiers de classe JavaBeans

Des copies de la classe de bean (ou du fichier ZIP ou JAR contenant la catégorie de bean) doivent résider dans les

•

Sur l’ordinateur qui exécute Dreamweaver, une copie de la classe de bean doit résider dans le dossier Dreamweaver

Configuration/classes ou dans le chemin de classe du système. (Dreamweaver utilise cette copie pendant la création.

•

Sur l’ordinateur qui exécute le serveur d'application JSP, la classe de bean doit résider dans le chemin de classe du serveur d'application. (votre serveur d'application utilise cette copie pendant l'exécution). Le chemin de classe du serveur d'application varie selon le serveur d'application, mais il s'agit généralement d'un dossier WEB-INF comportant un sousdossier classes/bean.

Si Dreamweaver et le serveur d'application s'exécutent tous deux sur le même système et que le serveur d'application utilise le chemin de classe du système (et non un chemin de classe interne), une seule copie de la classe du JavaBean pourra résider dans le chemin de classe du système sur l'ordinateur. Le serveur d'application et Dreamweaver utiliseront tous deux cette copie. Sinon, les copies de la classe des JavaBeans doivent résider dans deux chemins différents sur un même ordinateur, comme indiqué précédemment.

La structure du dossier doit correspondre au paquet du JavaBean. Par exemple, si le paquet du JavaBean se nomme com.ardvark.myBean

, vous devez l'enregistrer dans /com/ardvark/ dans le chemin de classe ou dans le dossier Dreamweaver

Configuration/classes.

Définition d'un JavaBean pour une page JSP

1


2

Cliquez sur le bouton Plus (+) et choisissez JavaBean dans le menu déroulant.

3

Dans la boîte de dialogue JavaBean, tapez le nom du bean.

4

Sélectionnez l'étendue du bean.

5

Sélectionnez la classe du bean. Pour obtenir la liste des classes d'un fichier ZIP ou JAR, cliquez sur le bouton Parcourir et sélectionnez le fichier.

La classe se présente sous le format suivant :

packagename.classname

6

Si vous souhaitez attribuer une valeur par défaut à l'une des propriétés de JavaBean, sélectionnez cette propriété dans la liste et saisissez une valeur dans la zone Valeur par défaut située sous la liste. Pour définir une propriété avec une valeur par défaut dynamique, cliquez sur l'icône qui se trouve à côté de la zone Valeur par défaut.

7

Cliquez sur OK. Le JavaBean que vous venez de définir s'affiche dans le panneau Liaisons.

DREAMWEAVER CS3


643

Définition d'un ensemble JavaBean pour une page JSP

1


2

Cliquez sur le bouton Plus (+) et choisissez JavaBean dans le menu déroulant.

3

Dans la boîte de dialogue Ensemble JavaBean, sélectionnez la classe de l'ensemble dans le menu déroulant Classe de collecte.

La classe se présente sous le format suivant : packagename.classname

Pour obtenir la liste des classes d'un fichier ZIP ou JAR, cliquez sur le bouton Parcourir et sélectionnez le fichier.

4

Sélectionnez l'une des propriétés indexées de l'ensemble dans le menu déroulant Propriété indexée.

5

(Facultatif) Modifiez le nom par défaut qui figure dans la zone Classe d'élément.

6

Sélectionnez l'étendue du bean dans le menu déroulant Etendue.

7

Cliquez sur OK. L'ensemble JavaBean que vous venez de définir s'affiche dans le panneau Liaisons.

Chapitre 21 : Création de formulaires

ASP.NET et ColdFusion

Vous pouvez créer des pages permettant de rechercher, insérer, mettre à jour ou supprimer des enregistrements dans une base de données, d'afficher des informations principales et détaillées, ainsi que de limiter l'accès à certains utilisateurs. Vous pouvez créer des pages de ce type pour les modèles de serveur ASP.NET et ColdFusion. En règle générale, ces informations sont incluses dans un formulaire sur la page de l'application Web. Pour les serveurs ASP.NET et ColdFusion, vous devez utiliser sur ces formulaires des contrôles spécifiques au serveur.

Création de formulaires ColdFusion MX 7

A propos des améliorations ColdFusion

Dreamweaver comporte de nombreuses améliorations facilitant la tâche des développeurs ColdFusion qui utilisent

ColdFusion MX 7 ou version ultérieure comme serveur de développement. Ces améliorations se présentent sous la forme d'un plus grand nombre de boutons dans la barre Insertion, d'éléments de menu et d'inspecteurs de propriétés qui permettent de créer rapidement des formulaires ColdFusion et d'en définir les propriétés . Vous pouvez également générer du code qui valide les informations fournies par les visiteurs du site. Par exemple, vous pouvez vérifier qu'une adresse

électronique saisie par un utilisateur contient bien un symbole @ (a commercial) ou qu'un champ de texte obligatoire a bien

été renseigné.

Remarque :

Ces améliorations ne sont disponibles que si vous pouvez accéder à un ordinateur exécutant ColdFusion MX 7 ou une version ultérieure.

Activation des améliorations ColdFusion

Certaines de ces améliorations nécessitent de définir un ordinateur exécutant ColdFusion MX 7 ou une version ultérieure comme serveur d'évaluation de Dreamweaver. Par exemple, les inspecteurs de propriétés destinés aux contrôles de formulaires ne sont disponibles que si vous spécifiez le serveur d’évaluation correct.

Il n’est nécessaire de définir le serveur d’évaluation que la première fois. Dreamweaver détecte ensuite automatiquement la version du serveur d'évaluation et rend les améliorations disponibles si ColdFusion est détecté.

1

Si ce n’est déjà fait, définissez un site Dreamweaver pour votre projet ColdFusion.

2

Choisissez Site > Gérer les sites, sélectionnez votre site dans la liste de l'onglet Avancé de la boîte de dialogue Définition du site, puis cliquez sur Modifier.

Si la boîte de dialogue s'ouvre sur l'onglet Elémentaire, cliquez sur l'onglet Avancé.

3

Sélectionnez la catégorie Serveur d’évaluation et choisissez un ordinateur exécutant ColdFusion MX 7 ou une version ultérieure comme serveur d’évaluation de votre site Dreamweaver. Veillez à indiquer un préfixe d’adresse URL valide.

4

Ouvrez un document ColdFusion.

Les changements de l’espace de travail de Dreamweaver ne sont visibles qu’après ouverture d’un document ColdFusion.

Voir aussi



644

DREAMWEAVER CS3


645

Création de formulaires ColdFusion

Vous pouvez utiliser dans Dreamweaver un plus grand nombre de boutons dans la barre Insertion, d'éléments de menu et d'inspecteurs de propriétés pour créer rapidement des formulaires ColdFusion et définir leurs propriétés.

Remarque :


1

Ouvrez une page ColdFusion et placez le point d'insertion à l'endroit où vous souhaitez insérer le formulaire.

2

Sélectionnez Insertion > Objets ColdFusion > Formulaire > Formulaire, ou sélectionnez la catégorie Formulaires dans la barre Insertion et cliquez sur l'icône Formulaire CF.

Dreamweaver insère un formulaire ColdFusion vierge. Dans une page affichée en mode Création, les formulaires sont indiqués par une bordure rouge en pointillé. Si vous ne voyez pas la bordure, vérifiez que l'option Affichage > Assistances visuelles > Eléments invisibles est activée.

3

En veillant à ce que le formulaire soit toujours sélectionné, utilisez l’inspecteur Propriétés pour définir les propriétés de formulaire suivantes.

Formulaire CF

Définit le nom du formulaire.

Action

Permet d’indiquer le nom de la page ColdFusion à traiter lorsque le formulaire est envoyé.

Méthode

Permet d’indiquer la méthode à utiliser pour envoyer les données du formulaire au serveur:

•

P

O

S

T

Envoie les données à l’aide de la méthode HTTP post

, qui envoie les données au serveur dans un message séparé.

•

GE

T

Envoie les données à l’aide de la méthode HTTP get

, qui place le contenu des champs du formulaire dans le corps de la chaîne de la requête d’URL.

Cible

T ype de codage

Précise la méthode de codage utilisée pour transmettre les données du formulaire.

Remarque :

Le type de codage n’a rien à voir avec le codage des caractères. Cet attribut indique le type de contenu utilisé pour envoyer le formulaire au serveur (lorsque la méthode

post

est utilisée). S'il n'est pas spécifié, il prend par défaut la valeur

« application/x-www-form-urlencoded ».

Format

Détermine le type de formulaire à créer :

•

H

T

ML

Génère un formulaire HTML et le transmet au client. Les contrôles enfants cfgrid et cftree peuvent être au format

Flash ou applet.

•

Flash

Génère un formulaire Flash et le transmet au client. Tous les contrôles sont au format Flash.

•

XML

Génère un formulaire XML XForms et place les résultats dans une variable avec le nom du formulaire ColdFusion.

Rien n'est envoyé au client. Les contrôles enfants cfgrid et cftree peuvent être au format Flash ou applet.

Style

Permet d’indiquer un style pour le formulaire. Pour plus d'informations, consultez la documentation ColdFusion.

Enveloppe Flash/XML

Permet d’indiquer la couleur de halo Macromedia pour donner un style au résultat. Le thème détermine la couleur utilisée pour les éléments activés et sélectionnés.

Préserver les données

Détermine si les valeurs initiales des contrôles doivent être remplacées ou non par les nouvelles valeurs lorsque le formulaire s'autotransmet les données.

•

Si cette option a la valeur Faux, les valeurs spécifiées dans les attributs de la balise du contrôle sont utilisées.

•

Si elle a la valeur Vrai, ce sont les valeurs saisies qui sont utilisées.

Source scripts

Indique l’adresse URL (relative à la racine du site) du fichier JavaScript qui contient le code côté client utilisé par la balise et ses balises enfants. Cet attribut est utile si le fichier ne se trouve pas dans l'emplacement par défaut. Cet attribut peut être nécessaire dans certains environnements et configurations qui bloquent l'accès au dossier /CFIDE.

L’emplacement par défaut, qui peut être modifié par l’administrateur ColdFusion, est /CFIDE/scripts/cfform.js.

Archive

Indique l’adresse URL des classes Java téléchargeables pour les contrôles d’applet cfgrid, cfslider et cftree. Leur emplacement par défaut est /CFIDE/classes/cfapplets.jar.

Hauteur

Indique la hauteur du formulaire.

DREAMWEAVER CS3


646

Largeur

Indique la largeur du formulaire.

Afficher l'éditeur de balises

Permet de modifier les propriétés qui n’apparaissent pas dans l’inspecteur Propriétés.

4

Insérez des contrôles de formulaire ColdFusion.

Placez le point d'insertion à l'endroit où vous souhaitez insérer le contrôle de formulaire ColdFusion dans le formulaire, puis sélectionnez le contrôle voulu dans le menu Insertion (Insertion > Objets ColdFusion > Formulaire) ou dans la catégorie Formulaires de la barre Insertion.

5

Si nécessaire, définissez les propriétés du contrôle dans l'inspecteur Propriétés.

Avant de définir les propriétés dans l'inspecteur Propriétés, vérifiez que le contrôle est sélectionné en mode Création. Pour plus d'informations sur les propriétés, cliquez sur l'icône Aide de l'inspecteur Propriétés.

6

Améliorez la mise en forme du formulaire ColdFusion.

Si vous créez un formulaire HTML, vous pouvez utiliser des sauts de ligne, des sauts de paragraphes, du texte préformaté ou des tableaux pour mettre en forme vos formulaires. Vous ne pouvez pas insérer un formulaire ColdFusion dans un autre formulaire ColdFusion (c'est-à-dire faire se chevaucher des balises), mais vous pouvez inclure plusieurs formulaires

ColdFusion dans une même page.

Si vous créez un formulaire Flash, utilisez les styles CSS (feuilles de style en cascade ) pour le mettre en page. ColdFusion ignore les balises HTML du formulaire.

N’oubliez pas de donner un libellé avec un texte descriptif aux champs du formulaire ColdFusion, pour aider les utilisateurs.

Voir aussi


« Création d'un formulaire HTML » à la page 574

Insertion de contrôles de formulaire ColdFusion

La barre Insertion et le menu Insérer permettent d'insérer rapidement des contrôles dans un formulaire ColdFusion. Vous devez créer un formulaire ColdFusion vierge avant d’y insérer des contrôles.

Remarque :


1

En mode Création, placez le point d'insertion à l'intérieur de la bordure du formulaire.

2

Sélectionnez le contrôle dans le menu Insertion (Insertion > Objets ColdFusion > Formulaire) ou dans la catégorie

Formulaires de la barre Insertion.

3

Cliquez sur le contrôle sur la page pour le sélectionner, puis définissez ses propriétés dans l'inspecteur Propriétés.

Pour plus d'informations sur les propriétés de contrôles spécifiques, consultez les rubriques consacrées à chacun d'eux.

Voir aussi

« Modification de contrôles de formulaire ColdFusion » à la page 655


Insertion de champs de texte ColdFusion

Vous pouvez insérer visuellement dans votre formulaire un champ de texte ou de mot de passe ColdFusion, puis définir ses options.

Remarque :

Cette amélioration n’est disponible que si vous pouvez accéder à un ordinateur exécutant ColdFusion MX 7 ou une version ultérieure.

DREAMWEAVER CS3


647

Insertion visuelle d'un champ de texte ColdFusion

1


2

Dans la catégorie Formulaire de la barre Insertion, cliquez sur l'icône Champ de texte CF, ou sélectionnez Insertion >

Objets ColdFusion > Formulaire > Champ de texte CF.

Un champ de texte apparaît dans le formulaire.

3

Sélectionnez le champ de texte et définissez ses options dans l'inspecteur Propriétés.

4

Pour attribuer une étiquette au champ de texte dans la page, cliquez en regard du champ de texte et tapez le texte souhaité.

Insertion visuelle d'un champ de mot de passe

1

Répétez les étapes 1 et 2 de la procédure précédente (insertion d’un champ de texte).

2

Sélectionnez le champ de texte que vous venez d’insérer pour l’afficher dans l’inspecteur Propriétés.

3

Dans l'inspecteur Propriétés, sélectionnez la valeur Mot de passe dans le menu déroulant Mode texte.

O ptions des champs de texte (ColdFusion)

Pour définir les options d'un champ de texte ou de mot de passe ColdFusion, définissez les options suivantes dans l'inspecteur Propriétés :

CFtextfield

(Ch. Texte CF) Définit l’attribut id

de la balise

<cfinput>

.

Valeur

Permet d’indiquer le texte à afficher dans ce champ lorsque la page s’ouvre dans un navigateur. Cette chaîne peut

être statique ou dynamique.

Pour indiquer une valeur dynamique, cliquez sur l'icône représentant un éclair à côté de la zone Valeur, et sélectionnez la colonne d'un jeu d'enregistrements dans la boîte de dialogue Données dynamiques. Les jeux d’enregistrements de cette colonne fournissent les valeurs affichées dans le champ de texte lorsque le formulaire est affiché dans un navigateur.

Mode texte

Permet de passer d’un champ de saisie de texte standard à un champ de saisie de mot de passe, et inversement.

L’attribut modifié par ce contrôle est type

.

Lecture seule

Permet de mettre le texte affiché en lecture seule.

Long. max.

Indique le nombre maximum de caractères que peut contenir le champ.

Masque

Permet d’indiquer un masque de texte. Cette propriété permet de valider la saisie des utilisateurs Le format du masque est composé de caractères A, 9, X et ? .

Remarque :

L’attribut de masque est ignoré pour la balise cfinput type="password".

Valider

Spécifie le type de validation du champ actuel.

Valider à

Spécifie le moment de validation : onSubmit, onBlur ou onServer.

Etiquette

Permet d’indiquer un libellé pour le champ de texte.

Schéma

Permet d’indiquer un modèle d’expression régulière en JavaScript pour valider la saisie. Les barres obliques de début ou de fin sont ignorées. Pour plus d'informations, consultez la documentation ColdFusion.

Hauteur

Permet d’indiquer la hauteur du contrôle, en pixels.

Largeur

Permet d’indiquer la largeur du contrôle, en pixels.

T aille

Permet d’indiquer la taille du contrôle.

O bligatoire

serveur.

Permet de préciser si le champ de texte doit contenir des données pour que le formulaire soit transmis au



DREAMWEAVER CS3


648

Insertion de champs masqués ColdFusion

Vous pouvez insérer visuellement dans votre formulaire un champ masqué ColdFusion, puis définir ses propriétés. Les champs masqués permettent de conserver et transmettre des informations qui ne sont pas saisies par l’utilisateur. Ces informations sont masquées afin que l'utilisateur ne puisse pas les voir.

Remarque :


1


2

Dans la catégorie Formulaire de la barre Insertion, cliquez sur l'icône Champ caché CF.

Un marqueur apparaît dans le formulaire ColdFusion. Si vous ne voyez pas le marqueur, choisissez Affichage > Assistances visuelles > Eléments invisibles.

3

Sélectionnez le champ masqué sur la page et définissez les options suivantes dans l'inspecteur Propriétés :

Cfhiddenfield

(Champ masqué) Indique le nom unique du champ masqué.

Valeur

Permet d’indiquer la valeur du champ masqué. Cette chaîne peut être statique ou dynamique.

Pour indiquer une valeur dynamique, cliquez sur l'icône représentant un éclair à côté de la zone Valeur, et sélectionnez la colonne d'un jeu d'enregistrements dans la boîte de dialogue Données dynamiques. Les jeux d’enregistrements de cette colonne fournissent les valeurs affichées dans le champ de texte lorsque le formulaire est affiché dans un navigateur.

Valider


Valider à


Etiquette

Permet d’indiquer un libellé pour le contrôle. A l'exécution, ce paramètre est ignoré par le serveur ColdFusion.

Schéma


Hauteur

Permet d’indiquer la hauteur du contrôle, en pixels. A l'exécution, ce paramètre est ignoré par le serveur

ColdFusion.

Largeur

Permet d’indiquer la largeur du contrôle, en pixels. A l'exécution, ce paramètre est ignoré par le serveur

ColdFusion.

T aille

Permet d’indiquer la taille du contrôle. A l'exécution, ce paramètre est ignoré par le serveur ColdFusion.

O bligatoire

serveur.

Permet de préciser si le champ masqué doit contenir des données pour que le formulaire soit transmis au



Voir aussi


Insertion de zones de texte ColdFusion

Vous pouvez insérer visuellement dans votre formulaire une zone de texte ColdFusion, puis définir ses propriétés. Une zone de texte est un élément de saisie composé de plusieurs lignes de texte.

Remarque :


1


2

Dans la catégorie Formulaire de la barre Insertion, cliquez sur l'icône Zone de texte CF.

Une zone de texte apparaît dans le formulaire ColdFusion.

3

Sélectionnez la zone de texte sur la page et définissez les options suivantes dans l'inspecteur Propriétés :

Cftextarea

(Zone de texte) Permet d’indiquer un nom unique pour le contrôle.

DREAMWEAVER CS3


649

Largeur car.

Indique le nombre de caractères par ligne.

N bre lignes

Permet d’indiquer le nombre de lignes à afficher dans la zone de texte.

Wrap

(Renvoi à la ligne) Permet d’indiquer comment le texte saisi par les utilisateurs doit être renvoyé à la ligne.

O bligatoire

Permet d’indiquer si la saisie de texte dans ce contrôle est obligatoire (case cochée) ou non (case non cochée).

Valeur initiale

Permet d’indiquer le texte à afficher dans la zone de texte lorsque la page s’ouvre dans un navigateur.

Valider


Valider à


Etiquette

Permet d’indiquer un libellé pour le contrôle.

Style

Permet d’indiquer un style pour le contrôle. Pour plus d'informations, consultez la documentation ColdFusion.

Hauteur


ColdFusion.

Largeur


ColdFusion.



4

Pour attribuer une étiquette à la zone de texte, cliquez en regard de la zone et tapez le texte souhaité.

Voir aussi



Insertion de boutons ColdFusion

Vous pouvez insérer visuellement dans votre formulaire un bouton ColdFusion, puis définir ses propriétés. Les boutons contrôlent les différentes opérations du formulaire ColdFusion. Les boutons permettent d'envoyer les données du formulaire au serveur ou de réinitialiser le formulaire. Il s'agit en général des boutons Envoyer et Réinitialiser. Vous pouvez

également attribuer à un bouton d'autres tâches de traitement préalablement définies dans un script. Un bouton peut ainsi calculer le montant total des éléments sélectionnés en fonction des valeurs que vous leur avez attribuées.

Remarque :


1

Placez le point d'insertion dans la bordure du formulaire ColdFusion.

2

Dans la catégorie Formulaire de la barre Insertion, cliquez sur l'icône Bouton CF.

Un bouton apparaît dans le formulaire ColdFusion.

3

Sélectionnez le bouton sur la page et définissez les options suivantes dans l'inspecteur Propriétés :

Cfbutton


Action

Permet d’indiquer le type de bouton à créer.



A l'exécution, les autres propriétés sont ignorées par le serveur ColdFusion.

Voir aussi


DREAMWEAVER CS3


650

Insertion de cases à cocher ColdFusion

Vous pouvez insérer visuellement dans votre formulaire une case à cocher ColdFusion, puis définir ses propriétés. Utilisez des cases à cocher pour permettre aux utilisateurs d'activer plusieurs options dans un groupe.

Remarque :


1


2

Dans la catégorie Formulaire de la barre Insertion, cliquez sur l'icône Case à cocher CF.

Une case à cocher apparaît dans le formulaire ColdFusion.

3

Sélectionnez la case à cocher sur la page et définissez les options suivantes dans l'inspecteur Propriétés :

Cfcheckbox


Valeur

Permet d’indiquer la valeur renvoyée par la case à cocher si l’utilisateur l’active.

Etat initial

Permet d’indiquer si la case à cocher est déjà activée lorsque la page s’ouvre dans un navigateur.

Valider

Spécifie le type de validation de la case à cocher.

Valider à

Spécifie le moment de validation de la case à cocher : onSubmit, onBlur ou onServer.

Etiquette

Permet d’indiquer un libellé pour la case à cocher.

Schéma


Hauteur


ColdFusion.

Largeur


ColdFusion.

T aille


O bligatoire

Permet de préciser si la case à cocher doit être cochée pour que le formulaire soit transmis au serveur.



4

Pour attribuer une étiquette à la case à cocher, cliquez en regard de la case sur la page et tapez l'étiquette souhaitée.

Voir aussi



Insertion de boutons radio ColdFusion

Vous pouvez insérer visuellement dans votre formulaire un bouton radio ColdFusion, puis définir ses propriétés. Utilisez des boutons radio lorsque vous souhaitez que les utilisateurs ne sélectionnent qu'une seule option dans un groupe. Elles sont généralement utilisées en groupe. Tous les boutons radio d'un même groupe doivent porter le même nom.

Remarque :


1


2

Choisissez Insertion > Objets ColdFusion > Formulaire > Bouton radio.

Un bouton radio apparaît dans le formulaire ColdFusion.

3

Sélectionnez le bouton radio sur la page et définissez les options suivantes dans l'inspecteur Propriétés :

Cfradiobutton


Valeur

Permet d’indiquer la valeur renvoyée par le bouton radio si l’utilisateur l’active.

DREAMWEAVER CS3


651

Etat initial

Permet d’indiquer si le bouton radio est déjà activé lorsque la page s’ouvre dans un navigateur.

Valider

Spécifie le type de validation du bouton radio.

Valider à


Etiquette

Permet d’indiquer un libellé pour le bouton radio.

Schéma


Hauteur


ColdFusion.

Largeur


ColdFusion.

T aille


O bligatoire

Permet de préciser si le bouton radio doit être activé pour que le formulaire soit transmis au serveur.



4

Pour attribuer une étiquette au bouton radio, cliquez en regard du bouton et tapez le texte souhaité.

Voir aussi



Insertion de zones de liste ColdFusion

Vous pouvez insérer visuellement dans votre formulaire une zone de liste ColdFusion, puis définir ses propriétés. Une zone de liste permet à un visiteur de sélectionner un ou plusieurs éléments dans une liste. Les zones de liste sont utiles lorsque vous disposez d'un espace réduit et devez afficher de nombreux éléments. Elles s'avèrent également pratiques lorsque vous souhaitez contrôler les valeurs renvoyées au serveur. A la différence des champs de texte, dans lesquels les utilisateurs peuvent taper ce qu'ils veulent, y compris des données non valides, c'est à vous de définir les valeurs exactes renvoyées par un menu.

clique dessus, ou un menu qui affiche une liste d'éléments que vous pouvez faire défiler et sélectionner.

Remarque :


1


2

Dans la catégorie Formulaire de la barre Insertion, cliquez sur l'icône Sélection CF.

Une zone de liste apparaît dans le formulaire ColdFusion.

3

Sélectionnez la zone de liste sur la page et définissez les options suivantes dans l'inspecteur Propriétés :

Cfselect

(Zone de liste) Permet d’indiquer un nom unique pour le contrôle.

T ype

Permet de choisir entre un menu déroulant ou une liste. Si vous choisissez le type Liste, les options Hauteur liste et

Autoriser la sélection de plusieurs listes deviennent disponibles.

Hauteur liste

Liste.

Permet d’indiquer le nombre de lignes à afficher dans la liste. Cette propriété n’est disponible qu’avec le type

Autoriser la sélection de plusieurs listes

Permet d’indiquer si l’utilisateur peut sélectionner plusieurs options à la fois dans la liste. Cette propriété n’est disponible qu’avec le type Liste.

Modifier les valeurs

Ouvre une boîte de dialogue qui permet d'ajouter, modifier ou supprimer des options à la zone de liste.

DREAMWEAVER CS3


652

Initialement sélectionné

Définit les éléments sélectionnés par défaut dans la liste. Si vous avez activé l’option Autoriser la sélection de plusieurs listes, vous pouvez sélectionner plusieurs options.

Jeu d'enregistrements

Permet d’indiquer le nom de la requête ColdFusion à utiliser pour remplir la liste ou le menu.

Afficher colonne

Permet d’indiquer la colonne du jeu d’enregistrements qui doit fournir le libellé de chaque élément de la liste. Cette propriété est utilisée de concert avec la propriété Jeu d’enregistrements.

Colonne valeurs

Permet d’indiquer la colonne du jeu d’enregistrements qui doit fournir la valeur de chaque élément de la liste. Cette propriété est utilisée de concert avec la propriété Jeu d’enregistrements.

Etiquette Flash

Permet d’indiquer un libellé pour la zone de liste.

Hauteur Flash

ColdFusion.


Largeur Flash

ColdFusion.


Message

Permet d’indiquer le message à afficher si la propriété Obligatoire est activée et si l’utilisateur n’a pas effectué de sélection avant de tenter d’envoyer le formulaire.

O bligatoire

Permet de préciser si un élément de menu doit être sélectionné pour que le formulaire soit transmis au serveur.



Voir aussi



Insertion de champs d’image ColdFusion

Vous pouvez insérer visuellement dans votre formulaire un champ d’image ColdFusion, puis définir ses options. Les champs d’image permettent de créer des boutons personnalisés.

Remarque :


1


2

Dans la catégorie Formulaire de la barre Insertion, cliquez sur l'icône Champ d’image CF. Recherchez l’image à insérer, puis cliquez sur OK. Vous pouvez aussi entrer directement le chemin d’accès du fichier image dans la zone Src.

Remarque :

Si le fichier d’image se trouve à l’extérieur du dossier racine du site, il est préférable de copier cette image dans le dossier racine. En effet, les images situées à l’extérieur du dossier racine risquent d’être inaccessible après publication du site.

3

Sélectionnez le champ d'image sur la page et définissez les options suivantes dans l'inspecteur Propriétés :

Cfimagefield


Src

Permet d’indiquer l’adresse URL de l’image à insérer.

Sec

Permet d'indiquer un message qui apparaîtra lorsque l'image ne peut pas être affichée.

Alignement

Permet d’indiquer l’alignement de l’image.

Bordure

Permet d’indiquer la largeur de la bordure de l’image.

Modifier image

Ouvre l’image dans votre logiciel de retouche d’images par défaut.

Pour définir votre logiciel de retouche d’images par défaut, choisissez Edition > Préférences > Types de fichiers/Editeurs.

Si ce logiciel n’est pas défini, le bouton Modifier l’image est sans effet.

Valider

Spécifie le type de validation du champ d’image.

Valider à


DREAMWEAVER CS3


653

Etiquette

Permet d’indiquer un libellé pour le bouton radio.

Schéma


Hauteur


Largeur


T aille


O bligatoire

Permet de préciser si le contrôle doit contenir des données pour que le formulaire soit transmis au serveur.



Voir aussi



Insertion de champs de fichier ColdFusion

Vous pouvez insérer visuellement dans votre formulaire un champ de fichier ColdFusion, puis définir ses propriétés. Vous pouvez créer un champ de fichier pour permettre aux utilisateurs de sélectionner un fichier sur leur ordinateur (tel qu'un document de traitement de texte ou un fichier graphique) et de le transférer sur le serveur. Un champ de fichier ColdFusion est similaire à un champ de texte, mais contient également un bouton Parcourir. L'utilisateur peut soit saisir manuellement le chemin d'accès au fichier à transférer, soit cliquer sur le bouton Parcourir pour le rechercher et le sélectionner.

Les champs de fichier nécessitent l'utilisation de la méthode

POST

pour transmettre des fichiers depuis un navigateur vers le serveur. Le fichier est transféré à l'adresse indiquée dans la zone de texte Action du formulaire. Avant d'utiliser le champ de fichier, vérifiez auprès de votre administrateur de serveur que le transfert anonyme de fichiers est autorisé.

active automatiquement ce paramètre lorsque vous insérez un contrôle de champ de fichier.

Remarque :


1

En mode Création, sélectionnez le formulaire ColdFusion pour l’afficher dans l’inspecteur Propriétés.

Pour sélectionner rapidement le formulaire, cliquez n'importe où dans son cadre, puis cliquez sur la balise

<cfform>

dans le sélecteur de balises figurant dans le coin inférieur de la fenêtre de document.

2

Dans l'inspecteur Propriétés, définissez la méthode du formulaire comme «

3

Dans le menu déroulant Enctype, sélectionnez multipart/form-data.

4

Placez le point d'insertion à l'intérieur de la bordure du formulaire, à l’endroit où le champ de fichier doit apparaître.

5

Choisissez Insertion > Objets ColdFusion > Formulaire > Champ fichier.

Un champ de fichier apparaît dans le document.

6

Sélectionnez le champ de fichier sur la page et définissez les propriétés suivantes dans l'inspecteur Propriétés :

Cffilefield


Long. max.

Indique le nombre maximum de caractères que peut contenir le chemin d’accès du fichier.

Valider


Valider à


Etiquette

Permet d’indiquer un libellé pour le champ.

Schéma


DREAMWEAVER CS3


654

Hauteur


ColdFusion.

Largeur


ColdFusion.

T aille


O bligatoire

serveur.

Permet de préciser si le champ de fichier doit contenir des données pour que le formulaire soit transmis au



Voir aussi



Insertion de champs de date ColdFusion

Vous ne pouvez pas insérer visuellement dans votre formulaire un champ de date ColdFusion, mais vous pouvez définir visuellement ses propriétés. Un champ de date ColdFusion est un type spécial de champ de texte qui permet de sélectionner une date dans un mini-calendrier afin de l’insérer dans le champ de texte.

Remarque :


1

En mode Création, sélectionnez le formulaire ColdFusion pour l’afficher dans l’inspecteur Propriétés.

Pour sélectionner rapidement le formulaire, cliquez n'importe où dans son cadre, puis cliquez sur la balise

<cfform>

dans le sélecteur de balises figurant dans le coin inférieur de la fenêtre de document.

2

Dans l'inspecteur Propriétés, définissez le format du formulaire comme «

Le contrôle de champ de date ne peut apparaître que dans des formulaires ColdFusion en mode Flash.

3

Passez en mode d’affichage Code (Affichage > Code) et insérez la balise suivante en un point quelconque entre les balises

CFForm d’ouverture et de fermeture :

<cfinput name="datefield" type="datefield">

4

Passez en mode Création, sélectionnez le champ de date sur la page, puis définissez les options suivantes dans l'inspecteur Propriétés :

Cfdatefield


Valeur

Permet d’indiquer la date à afficher dans ce champ lorsque la page s’ouvre dans un navigateur. Cette date peut être statique ou dynamique.

Pour indiquer une valeur dynamique, cliquez sur l'icône représentant un éclair à côté de la zone Valeur, et sélectionnez la colonne d'un jeu d'enregistrements dans la boîte de dialogue Données dynamiques. Les jeux d’enregistrements de cette colonne fournissent les valeurs affichées dans le champ de date lorsque le formulaire est affiché dans un navigateur.

Valider


Valider à


Etiquette

Permet d’indiquer un libellé pour le champ.

Schéma


Hauteur


Largeur


T aille


DREAMWEAVER CS3


655

O bligatoire

serveur.

Permet de préciser si le champ de date doit contenir des données pour que le formulaire soit transmis au



Voir aussi


Modification de contrôles de formulaire ColdFusion

Vous pouvez modifier visuellement les propriétés des contrôles de formulaires ColdFusion, que vous travailliez en mode

Création ou Code.

Remarque :


1

En mode Création, sélectionnez le contrôle de formulaire ; en mode Code, cliquez dans la balise du contrôle concerné.

L'inspecteur Propriétés affiche les propriétés du contrôle de formulaire.

2

Modifiez ces propriétés dans l'inspecteur Propriétés.

Pour plus d'informations, cliquez sur l'icône Aide de l'inspecteur Propriétés.

3

Pour définir d'autres propriétés, cliquez sur le bouton Afficher l'éditeur de balises dans l'inspecteur Propriétés, et définissez les propriétés dans l'éditeur de balises qui s'affiche.

Validation des données de formulaire ColdFusion

Dreamweaver permet de créer des formulaires ColdFusion permettant de vérifier dans le contenu des champs de texte spécifiés que l'utilisateur a bien saisi le type de données approprié.

Remarque :


1

Créez un formulaire ColdFusion comprenant au moins un champ de saisie et un bouton Envoyer. Assurez-vous que chaque champ ColdFusion que vous souhaitez valider porte un nom unique.

2

Dans le formulaire, sélectionnez le champ à valider.

3

Dans l’inspecteur Propriétés, indiquez comment le champ doit être validé.

La partie inférieure de chaque inspecteur Propriétés contient des contrôles qui permettent de définir une règle de validation spécifique. Par exemple, vous pouvez spécifier qu’un champ de texte donné doit contenir un numéro de téléphone. Pour ce faire, choisissez Téléphone dans le menu déroulant Valeur de l'inspecteur Propriétés. Vous pouvez aussi indiquer le moment de la validation dans le menu local Valider à.

Création de formulaires ASP.

N

E

T

Ajout de contrôles de formulaire ASP.

N

E

T

à une page

Dreamweaver permet d'ajouter des contrôles de formulaire ASP.NET à votre page à l'aide de l'environnement de création visuel.

1

Ouvrez une page ASP.NET en mode Création (Affichage > Création).

2

Placez le point d'insertion à l'endroit où vous souhaitez que le contrôle de formulaire apparaisse dans la page.

DREAMWEAVER CS3


656

Les contrôles de formulaire doivent être insérés dans un formulaire dont la balise possède l'attribut runat='server'

. Si la page ne contient pas de formulaire lors de l'insertion du premier contrôle de formulaire ASP.NET, Dreamweaver en crée automatiquement un qui comprend l'attribut runat='server'

. Si la page contient déjà un formulaire HTML, Dreamweaver ajoute automatiquement l'attribut runat='server'

à la balise de formulaire existante lors de l'insertion du premier contrôle de formulaire.

3


•

Choisissez Insertion > Objets ASP.NET, puis sélectionnez le contrôle de formulaire dans le sous-menu.

•

Dans la catégorie ASP.NET de la barre Insertion, sélectionnez l'icône du contrôle de formulaire.

4

Définissez les options du contrôle de formulaire dans la boîte de dialogue qui s'affiche, puis cliquez sur OK.

Pour plus d'informations sur les propriétés de chaque contrôle, consultez la documentation disponible sur le site Web de

Microsoft à l'adresse http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconaspsyntaxforwebcontrols.asp

.

Veillez à donner un attribut ID à chaque contrôle (par exemple, txtVille à un contrôle de type TextBox ou lbxPays à un contrôle de type ListBox).

Voir aussi

« Création d'un menu ASP.NET dynamique » à la page 656

« Insertion d'un contrôle CheckBoxList ASP.NET » à la page 659

Modification des propriétés des contrôles de formulaire ASP.

N

E

T

1

En mode Création, sélectionnez le contrôle de formulaire dans la page.

2

Modifiez ces propriétés dans l'inspecteur Propriétés.

Pour plus d'informations sur les propriétés de chaque contrôle, consultez la documentation disponible sur le site Web de

Microsoft à l'adresse http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconaspsyntaxforwebcontrols.asp

.

3

Pour définir d'autres propriétés ou événements, cliquez sur le bouton Editeur de balises dans l'inspecteur Propriétés et définissez les propriétés dans l'éditeur de balises.

Création d'un menu ASP.

N

E

T

dynamique

Il est possible de remplir un contrôle de menu ASP.NET, tel que Liste déroulante ou Zone de liste, avec les entrées d'une base de données.

Remarque :

Avant de commencer, vous devez définir un ensemble de données ou une autre source de contenu dynamique pour ce menu.

1

Ouvrez la page ASP.NET, puis placez le point d'insertion à l'endroit où le menu doit apparaître.

2

Choisissez Insertion > Objets ASP.NET, puis asp:DropDownList ou asp:ListBox.

3

Définissez les options du contrôle de formulaire puis cliquez sur OK.

Dreamweaver insère le contrôle de formulaire à l'endroit où le point d'insertion se trouve dans la page. Si vous n'avez pas inséré de formulaire, Dreamweaver en crée un qui comprend l'attribut runat=”server”

.

Voir aussi


DREAMWEAVER CS3


657

ASP.

N

E

T

:Liste déroulante, options

ID

Spécifie le nom à donner au contrôle de formulaire. La valeur ID est obligatoire.

Ensemble de données

Indique la source de données à utiliser pour renseigner les éléments du contrôle de liste. Si vous n'indiquez pas d'ensemble de données, vous pouvez le faire ultérieurement ou définir les éléments de la liste de façon statique en cliquant sur le bouton Eléments de la liste de l'inspecteur Propriétés.

O btenir les étiquettes de

la liste.

Indique le champ de l'ensemble de données sélectionné qui fournit les étiquettes des éléments de

O btenir les valeurs de

liste.

Indique le champ de l'ensemble de données sélectionné qui fournit les valeurs des éléments de la

Sélectionner une valeur égale à

Indique la valeur que le serveur utilise pour déterminer l'élément de la liste qui est sélectionné lors de l'affichage de la liste déroulante dans un navigateur. Le serveur compare la valeur de chaque élément à la valeur spécifiée. Si ces valeurs correspondent, l'élément correspondant est sélectionné.

Clé d'accès

Crée un raccourci clavier qui permet aux utilisateurs de naviguer rapidement vers le contrôle de formulaire dans un navigateur. Par exemple, si vous tapez K, l'utilisateur peut naviguer vers le contrôle en tapant Alt+K. La clé d'accès ne peut être constituée que d'un caractère.

Post-retour automatique

Indique si un post-retour vers le serveur se produit automatiquement lorsque l'utilisateur modifie la sélection de la liste. Sélectionnez l'option afin d'autoriser les post-retours.

Pour plus d'informations sur les propriétés du contrôle Liste déroulante ASP.NET, consultez la documentation disponible sur le site Web de Microsoft à l'adresse http://msdn.microsoft.com/library/enus/cpgenref/html/cpcondropdownlistwebservercontrol.asp

.

O ptions de zone de liste ASP.

N

E

T

ID

Spécifie le nom à donner au contrôle de formulaire. La valeur ID est obligatoire.




la liste.



liste.


Clé d'accès




Pour plus d'informations sur les propriétés du contrôle Zone de liste ASP.NET, consultez la documentation disponible sur le site Web de Microsoft à l'adresse http://msdn.microsoft.com/library/enus/cpgenref/html/cpconlistboxwebservercontrol.asp

.

Ajout de la fonctionnalité dynamique à un menu ASP.

N

E

T

Vous pouvez rendre dynamique un objet de menu ASP.NET existant. Les objets de menu ASP.NET comprennent notamment les contrôles Liste déroulante et Zone de liste.

1

En mode Création, sélectionnez l'objet Liste déroulante ou Zone de liste à rendre dynamique.

2

Dans l'inspecteur Propriétés, cliquez sur le bouton Eléments de la liste.

3

Sélectionnez Manuellement ou Depuis la base de données selon la manière dont vous envisagez de renseigner la liste.

DREAMWEAVER CS3


658

4

Si vous sélectionnez Manuellement, procédez comme suit :

•

Pour ajouter un élément à la liste, cliquez sur le bouton Plus (+), puis indiquez une étiquette et une valeur dans les zones

Etiquette et Valeur.

•

Pour supprimer un élément de la liste, sélectionnez-le, puis cliquez sur le bouton Moins (–).

•

Pour modifier un élément de la liste, sélectionnez-le, puis modifiez l'étiquette ou la valeur figurant dans les zones

Etiquette et Valeur.

•

Pour indiquer un élément à afficher par défaut lorsque la liste s'affiche pour la première fois, tapez la valeur de l'élément dans la zone Sélectionner une valeur égale à.

5

Si vous sélectionnez Depuis la base de données, procédez comme suit :

•

Sélectionnez l'ensemble de données qui doit renseigner la liste.

•

Indiquez la colonne de l'ensemble de données qui doit fournir les étiquettes des éléments de la liste.

•

Indiquez la colonne de l'ensemble de données qui doit fournir les valeurs des éléments de la liste.

•

Pour indiquer un élément à afficher par défaut lorsque la liste s'affiche pour la première fois, tapez la valeur de l'élément dans la zone Sélectionner une valeur égale à.

Voir aussi


« Création d'un menu ASP.NET dynamique » à la page 656

Affichage de contenu dynamique dans un contrôle Zone de texte ASP.

N

E

T

Vous pouvez afficher un contenu dynamique dans des contrôles de formulaire Zone de texte ASP.NET lorsque la page

ASP.NET est affichée dans un navigateur.

Avant de commencer, vous devez définir un ensemble de données ou une autre source de contenu dynamique pour ce contrôle.

1

En mode Création, sélectionnez le contrôle Zone de texte sur la page.

2

Dans l'inspecteur Propriétés, cliquez sur l'icône en forme d'éclair située en regard de la zone Texte.

La boîte de dialogue Données dynamiques s'affiche.

3

Sélectionnez la colonne du jeu d'enregistrements qui doit fournir une valeur à l'objet Zone de texte, puis cliquez sur OK.

Voir aussi

« Affichage de contenu dynamique dans des champs de texte HTML » à la page 581


Activation dynamique de contrôles Case à cocher ASP.

N

E

T

Vous pouvez laisser le serveur déterminer si le contrôle Case à cocher est activé. Au moment de l'exécution, le serveur compare la valeur que vous avez spécifiée à celle de l'ensemble de données. Si les valeurs correspondent, le serveur active la case à cocher lorsque la page ASP.NET est chargée dans un navigateur.

Remarque :

Avant de commencer, vous devez définir un ensemble de données ou une autre source de contenu dynamique pour ces cases à cocher. L'idéal serait que la source de contenu contienne des données booléennes, telles que Yes/No ou true/false.

1

Sélectionnez un contrôle de formulaire Case à cocher sur la page ASP.NET.

2

Dans l'inspecteur Propriétés, activez l'option Dynamique.

3

Activez les options Case à cocher dynamique, puis cliquez sur OK.

DREAMWEAVER CS3


659

Pour plus d'informations sur les propriétés du contrôle Case à cocher ASP.NET, consultez la documentation disponible sur le site Web de Microsoft à l'adresse http://msdn.microsoft.com/library/enus/cpgenref/html/cpconcheckboxwebservercontrol.asp

.

Voir aussi

« Activation dynamique d'une case à cocher HTML » à la page 581


Insertion d'un contrôle CheckBoxList ASP.

N

E

T

1

Choisissez Insertion > Objets ASP.NET > asp:CheckBoxList.

2

Dans la boîte de dialogue asp:RadioButtonList, définissez les options comme suit :

ID

spécifie le nom à donner au contrôle de formulaire. La valeur ID est obligatoire.

Info-bulle

Indique le texte affiché lorsque le pointeur de la souris survole le contrôle de formulaire dans un navigateur.




la liste.



liste.


Clé d'accès




Pour plus d'informations sur les propriétés du contrôle Liste de cases à cocher ASP.NET, consultez la documentation disponible sur le site Web de Microsoft à l'adresse http://msdn.microsoft.com/library/enus/cpgenref/html/cpconcheckboxlistwebservercontrol.asp

.

Insertion d'un contrôle RadioButtonList ASP.

N

E

T

1

Choisissez Insertion > Objets ASP.NET > asp:RadioButtonList.

2

Dans la boîte de dialogue asp:RadioButtonList, définissez les options comme suit :

ID

Indique le nom du contrôle de formulaire. La valeur ID est obligatoire.

Info-bulle

Indique le texte affiché lorsque le pointeur de la souris survole le contrôle de formulaire dans un navigateur.




la liste. indique le champ de l'ensemble de données sélectionné qui fournit les étiquettes des éléments de


liste. indique le champ de l'ensemble de données sélectionné qui fournit les valeurs des éléments de la

Sélectionner une valeur égale à

indique la valeur que le serveur utilise pour déterminer l'élément de la liste qui est sélectionné lors de l'affichage de la liste de boutons radio dans un navigateur. Le serveur compare la valeur de chaque

élément à la valeur spécifiée. Si ces valeurs correspondent, l'élément correspondant est sélectionné.

DREAMWEAVER CS3


660

Clé d'accès

crée un raccourci clavier qui permet aux utilisateurs de naviguer rapidement vers le contrôle de formulaire dans un navigateur. Par exemple, si vous tapez K, l'utilisateur peut naviguer vers le contrôle en tapant Alt+K. La clé d'accès ne peut être constituée que d'un caractère.


indique si un post-retour vers le serveur se produit automatiquement lorsque l'utilisateur modifie la sélection de la liste. Sélectionnez l'option afin d'autoriser les post-retours.

Pour plus d'informations sur les propriétés du contrôle Liste de boutons radio ASP.NET, consultez la documentation disponible sur le site Web de Microsoft à l'adresse http://msdn.microsoft.com/library/enus/cpgenref/html/cpconradiobuttonlistwebservercontrol.asp

.

Activation d'un élément dans un contrôle Liste de boutons radio ASP.

N

E

T

Vous pouvez laisser le serveur décider si un bouton radio doit être activé ou non dans un contrôle Liste de boutons radio lors du chargement de la page ASP.NET dans un navigateur.

Remarque :

Avant de commencer, vous devez insérer au moins un contrôle Liste de bouton radio ASP.NET dans votre page.

Vous devez également définir un ensemble de données ou une autre source de contenu dynamique pour les boutons radio.

L'idéal serait que la source de contenu contienne des données booléennes, telles que Yes/No ou true/false.

1

En mode Création, sélectionnez le contrôle Liste de boutons radio.

2

Dans l'inspecteur Propriétés, cliquez sur le bouton Eléments de la liste.

3

Activez l'option Depuis la base de données puis l'une des options suivantes :

Voir aussi

« Activation dynamique d'un bouton radio HTML » à la page 582


Activation d'un contrôle Bouton radio ASP.

N

E

T

Vous pouvez laisser le serveur déterminer quel bouton radio est sélectionné dans un groupe. Au moment de l'exécution, le serveur compare chaque valeur sélectionnée que vous avez spécifiée à celle de l'ensemble de données. Si ces valeurs correspondent, le serveur sélectionne le bouton radio.

Pour plus d'informations sur les propriétés du contrôle Bouton radio ASP.NET, consultez la documentation disponible sur le site Web de Microsoft à l'adresse http://msdn.microsoft.com/library/enus/cpgenref/html/cpconradiobuttonwebservercontrol.asp

.

❖

Activez l'option dynamique dans l'inspecteur Propriétés et définissez les options de la zone Groupe de boutons radio dynamiques.

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

N

E

T

Comparaison des contrôles ASP.

N

E

T

Grille de données et Liste de données

Les contrôles Grille de données et Liste de données ASP.NET offrent de nombreuses options permettant d'afficher différents types de données (en particulier un contenu dynamique à partir d'une base de données) et de simplifier le processus de liaison des sources de données aux contrôles. Dreamweaver prend en charge les contrôles Grille de données et Liste de données en tant que comportements de serveur. Ces contrôles possèdent les caractéristiques suivantes :

Grille de données

crée une grille à plusieurs colonnes qui est liée aux données. Il permet de définir divers types de colonnes,

à la fois pour mettre en forme le contenu de la grille et ajouter une fonctionnalité particulière (colonnes Bouton Modifier, colonnes Hyperlien, etc.).

DREAMWEAVER CS3


661

Liste de données

affiche les éléments d'une source de données à l'aide de modèles. Vous pouvez personnaliser l'aspect du contrôle en modifiant les modèles formant ses différents composants.

A propos du contrôle Grille de données ASP.

N

E

T

L'option Grille de données de Dreamweaver vous permet d'insérer un contrôle Web Grille de données ASP.NET. Le contrôle

Grille de données présente les tableaux sous forme de grilles à plusieurs colonnes et peut contenir différents types de colonnes (colonnes hétérogènes) pour définir la mise en forme du contenu des cellules. Citons notamment les colonnes liées, de bouton et de modèle. Il prend également en charge des fonctionnalités interactives, telles que le tri des colonnes, la modification et les commandes. Le tableau suivant présente les types de colonnes disponibles dans la grille de données :

T ype de colonne dans une grille de données

C hamp de donn

é es simp l e

Description

F orme

Hyper l

l ibre ien

A ppe lé e

« co l onne

l i

é e

» dans

ASP

.N

ET, l a co l onne

C hamp de donn

é es simp l e vous permet de sp é cifier l e champ de l a source de donn é es à afficher et l e format de donn

é es

à uti l iser par

l e champ avec une e x pression de mise en forme

.N

ET .

A ppe lé e

« co l onne mod

èl e

» dans

ASP

.N

ET, l a co l onne de forme

l ibre permet de cr é er des combinaisons de contr ôl es de serveur et de te x te H TM L afin de d é finir une mise en forme personna l is

é e pour une co l onne.

Les contr

ôl es au sein d

' une co l onne de forme l ibre peuvent ê tre l i é s au x donn é es.

C e type de co l onne offre une p l us grande

l ibert

é au niveau de

l a mise en forme et de

l a fonctionna l it

é du contenu de l a gri ll e , car vous d é cide z enti è rement de l a fa ç on dont l es donn é es s

' affichent et de ce qui se passe

l orsque

l es uti l isateurs interagissent avec

l es l ignes de l a gri ll e.

La co l onne Hyper l ien affiche des informations sous forme de

l iens hyperte x te.

Ell e sert g é n é ra l ement à afficher des donn é es ( num é ro de c l ient ou nom de produit

, par e x emp l e

) sous forme d

' un hyper l ien sur

l eque l l es uti l isateurs peuvent c l iquer pour acc é der à une autre page affichant des d é tai l s sur cet

élé ment.

B outons M odifier , M ettre à j our ,

A nnu l er

A ppe lé e « co l onne de commande d 'é dition » dans ASP .N

ET, l a co l onne B outons

M odifier

, M ettre

à j our

, A nnu l er permet au x uti l isateurs de modifier directement l es informations figurant dans l es l ignes de l a gri ll e de donn é es.

I l suffit pour ce l a de cr

é er une co l onne

B outons

M odifier

, M ettre

à j our

, A nnu l er.

A u moment de l' e xé cution , cette co l onne affiche un bouton intitu lé M odifier.

Lorsque l' uti l isateur c l ique dessus

, l es donn

é es de

l a

l igne s

' affichent dans des contr

ôl es modifiab l es , te l s que des z ones de te x te , et l e bouton M odifier est remp l ac é par l es boutons

M ettre

à j our et

A nnu l er.

B outon S upprimer Le bouton S upprimer permet à un uti l isateur de supprimer une l igne particu l i

è re en c l iquant sur un bouton.

Avant d'utiliser le comportement de serveur Grille de données, vous devez définir un ensemble de données (appelé jeu d'enregistrements dans d'autres types de documents) pour la grille de données.

Pour plus de détails sur le contrôle Grille de données et son utilisation pour mettre en forme les données dynamiques, consultez le site Web de Microsoft à l'adresse http://msdn.microsoft.com/library/enus/cpgenref/html/cpcondatagridwebservercontrol.asp

.

Voir aussi

Ajout d'un contrôle Grille de données ASP.

N

E

T

à une page

Les contrôles Grille de données permettent de mettre en forme et d'afficher les données dynamiques dans des grilles constituées de plusieurs colonnes et rendues sous la forme de tableaux.

DREAMWEAVER CS3


662

Remarque :

Avant d'insérer le comportement de serveur Grille de données, vous devez définir un ensemble de données (appelé jeu d'enregistrements dans d'autres types de documents) pour la grille de données.

1

Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+), puis choisissez Grille de données.

2

Sélectionnez l'attribut (ou étiquette) ID du contrôle Grille de données.

Une valeur s'affiche automatiquement dans ce champ. Vous pouvez modifier la valeur du champ Grille de données.

Toutefois, si vous la remplacez par un ID existant, vous devez entrer une nouvelle valeur d'attribut.

3

Sélectionnez un ensemble de données à associer à la grille de données.

Il s'agit de l'ensemble de données à partir duquel la grille de données récupère des informations. Dreamweaver insère dans la zone Colonnes de la grille les colonnes liées de tous les champs figurant dans l'ensemble de données sélectionné.

4

Spécifiez le nombre d'enregistrements à afficher.

5

Sélectionnez le type de lien de navigation entre pages à utiliser.

•

L'élément Liens vers les pages précédente et suivante ajoute les liens Suivant et Précédent.

•

L'élément Liens vers chaque page numérotés ajoute des liens de numéros de page, par exemple « n ...

6

Supprimez les colonnes superflues de la grille. Pour ce faire, sélectionnez-les dans la zone Colonnes de la grille, puis cliquez sur le bouton Moins (-).

7

Pour modifier les colonnes restantes, sélectionnez une colonne dans la zone Colonnes de la grille, puis définissez ses propriétés.

Pour modifier le type de colonne Grille de données, cliquez sur le bouton Modifier, puis sélectionnez un type de colonne dans le menu déroulant. La boîte de dialogue qui s'affiche dépend du type de colonne choisi. Spécifiez le contenu et la mise en forme de la colonne de la grille de données sélectionnée. Le tableau suivant présente les types de colonnes :


C hamp de donn é es simp l e

Description

F orme

l ibre

A ppe lé e « co l onne l i é e » dans ASP .N

ET, l a co l onne C hamp de donn é es simp l e vous permet de sp

é cifier

l e champ de

l a source de donn

é es

à afficher et

l e format de donn é es à uti l iser par l e champ avec une e x pression de mise en forme

.N

ET

.

P our p l us d

' informations

, consu l te z l a section

« Dé finition d

' un format et d ' un champ de source de donn é es dans une gri ll e de donn é es » à l a page 664 .

A ppe lé e

« co l onne mod

èl e

» dans

ASP

.N

ET, l a co l onne de forme

l ibre vous permet de cr é er des combinaisons de contr ôl es de serveur et de te x te H TM L afin de d

é finir une mise en forme personna l is

é e pour une co l onne.

Les contr

ôl es au sein d ' une co l onne de forme l ibre peuvent ê tre l i é s au x donn é es.

C e type de co l onne offre une p l us grande

l ibert

é au niveau de

l a mise en forme et de

l a fonctionna l it é du contenu , car vous d é cide z enti è rement de l a fa ç on dont l es donn

é es s

' affichent et de ce qui se passe

l orsque

l es uti l isateurs interagissent avec l es l ignes de l a gri ll e.

P our p l us d ' informations , consu l te z l a section

« C r

é ation d

' une mise en forme personna l is

é e pour une co l onne

G ri ll e de donn é es de forme l ibre a page 665

.

DREAMWEAVER CS3


663


Hyper l ien

Description

La co l onne Hyper l ien affiche des informations sous forme d ' hyper l iens.

Ell e sert g

é n

é ra l ement

à afficher des donn

é es

( num

é ro de c l ient ou nom de produit

, par e x emp l e ) sous forme d ' un hyper l ien sur l eque l l es uti l isateurs peuvent c l iquer pour acc

é der

à une autre page affichant des d

é tai l s sur cet

élé ment.

P our p l us d ' informations , consu l te z l a section

« A ffichage de donn é es en tant qu ' hyper l ien dans une gri ll e de donn

é es

» à l a page

665

.

B outons M odifier , M ettre à j our ,

A nnu l er

A ppe lé e « co l onne de commande d 'é dition » dans ASP .N

ET, l a co l onne B outons

M odifier

, M ettre

à j our

, A nnu l er permet au x uti l isateurs de modifier directement l es informations figurant dans l es l ignes de l a gri ll e de donn é es.

I l suffit pour ce l a de cr

é er une co l onne

B outons

M odifier

, M ettre

à j our

, A nnu l er.

A u moment de l' e xé cution , cette co l onne affiche un bouton intitu lé M odifier.

Lorsque l' uti l isateur c l ique dessus

, l es donn

é es de

l a

l igne s

' affichent dans des contr

ôl es modifiab l es , te l s que des champs , et l es boutons M ettre à j our et A nnu l er se substituent au bouton

M odifier.

P our p l us d

' informations


« A utorisation page

666

.

de modification des l ignes d ' une gri ll e de donn é es » à l a

B outon S upprimer Le bouton S upprimer permet à un uti l isateur de supprimer une l igne particu l i

è re en c l iquant sur un bouton.

P our p l us d

' informations


page

« A

666

.

utorisation de suppression d ' une l igne d ' une gri ll e de donn é es » à l a

8

Répétez l'étape précédente pour chaque colonne à modifier.

9

Pour modifier l'ordre d'apparition des colonnes dans la grille de données, sélectionnez une colonne dans la zone

Colonnes de la grille, puis cliquez sur la flèche vers le haut ou vers le bas pour déplacer la colonne vers la gauche ou vers la droite dans la grille de données.

Dans la fenêtre de document, la grille de données qui s'affiche est entourée d'un cadre gris comportant des onglets. Dans la données spécifiée.

Ajout d'un contrôle Liste de données ASP.

N

E

T

à une page

Le comportement de serveur Liste de données de Dreamweaverpermet d'insérer un objet Liste de données ASP.NET dans une page. Cet objet est uniquement disponible pour les types de documents ASP.NET.

Remarque :

Avant d'insérer le comportement de serveur Liste de données, vous devez définir un ensemble de données (appelé jeu d'enregistrements dans d'autres types de documents) pour la liste de données.

1

Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+), puis choisissez Liste de données.

2

(Facultatif) Modifiez le nom par défaut de la liste de données.

3

Associez un ensemble de données à la liste de données.

Vous pouvez choisir un ensemble de données existant ou une valeur arbitraire. Par défaut, c'est le premier ensemble de données de la liste qui est sélectionné.

4

Spécifiez les données à afficher dans la liste de données en procédant comme suit, dans l'ordre :

a

Sélectionnez d'abord un modèle d'élément dans la liste Modèles. Le modèle d'élément représente toutes les lignes de la liste, à l'exception des lignes d'en-tête et de pied de page.

b

Cliquez ensuite sur le bouton Ajouter un champ de données au contenu.

c

Dans la boîte de dialogue Ajouter un champ de données, sélectionnez une colonne d'ensemble de données, puis cliquez sur OK. Dreamweaver ajoute une expression de liaison de données appropriée à la zone de texte Contenu de la boîte de dialogue de l'objet de liste de données.

d

Pour terminer, mettez en forme les données à afficher en mettant l'expression de liaison entre des balises HTML dans la zone de texte Contenu.

5

Améliorez la mise en forme de la liste de données, comme il convient.

DREAMWEAVER CS3


664

Pour ce faire, sélectionnez un modèle dans la liste correspondante, puis ajoutez des balises HTML dans la zone Contenu.

Le tableau suivant présente les modèles disponibles :

Modèle

E n

t

ê te

Elé ment

Elé ment secondaire

M odifier l'élé ment

Elé ment s

él ectionn

é

Sé parateur

Description

T e x te et contr

ôl es

à ins

é rer au d

é but de

l a s

él ection.

Elé ments et contr ôl es H TM L à ins é rer une fois pour chaque l igne de l a source de donn

é es.

S emb l ab l e au mod èl e Elé ment , mais ins é r é pour une l igne sur deu x de l a l iste de donn

é es.

S i vous uti l ise z ce mod

èl e

, vous deve z g

é n

é ra l ement en personna l iser l' aspect , en choisissant une cou l eur d ' arri è re p l an diff é rente de ce ll e du mod èl e

Elé ment

, par e x emp l e.

M ise en forme d ' un élé ment en mode d 'é dition.

C e mod èl e contient g

é n

é ra l ement des contr

ôl es de modification

, te l s que des contr

ôl es de

z one de te x te.

Elé ments

à ins

é rer

l orsque

l' uti l isateur s

él ectionne un

élé ment dans

l a

l iste de donn é es.

C e mod èl e sert g é n é ra l ement à marquer visue ll ement l a l igne au moyen d

' une cou l eur d

' arri

è re

p l an ou de po l ice.

V ous pouve z é ga l ement d é ve l opper l'élé ment en affichant des champs supp lé mentaires de l a source de donn

é es.

Elé ments à ins é rer entre chaque élé ment.

Une l igne ( uti l isant un élé ment < H R>) en est un e x emp l e typique.

T e x te et contr ôl es à ins é rer à l a fin de l a l iste.

P ied de page

6

Pour organiser les éléments dans un tableau, choisissez l'option Organiser les éléments dans un tableau.

Si vous utilisez un tableau, spécifiez le nombre de colonnes. Si le nombre est supérieur à 1, indiquez l'ordre de remplissage des cellules du tableau : choisissez l'option Envelopper de haut en bas pour que les données se remplissent horizontalement ou l'option Envelopper de gauche à droite pour qu'elles se remplissent verticalement.

7

Cliquez sur OK pour fermer la boîte de dialogue et créer la liste de données.

Dans la fenêtre de document, l'objet Liste de données qui s'affiche est entouré d'un cadre gris comportant des onglets. Dans la fenêtre Live Data (Affichage > Live Data), le contour gris disparaît et l'espace réservé de l'objet est remplacé par la liste de données spécifiée.

Modification d'un contrôle Grille de données ou Liste de données ASP.

N

E

T

Vous pouvez toujours modifier les contrôles Grille de données et Liste de données en fonction de vos besoin de création de page.

•

En mode Création, cliquez sur l'icône du coin supérieur gauche de la grille de données ou de la liste de données pour passer en mode d'édition, puis ajoutez ou modifiez le contenu des régions à onglets qui s'affichent.

Remarque :

Vous pouvez également faire glisser les sources de contenu dynamique du panneau Liaisons vers une région à onglets.

•

En mode Création, sélectionnez le contrôle et modifiez-en les options à l'aide de l'inspecteur Propriétés.

•

Dans le panneau Comportements de serveur, double-cliquez sur l'objet et modifiez-en les propriétés dans la boîte de dialogue qui s'ouvre.

•

En mode Code, sélectionnez la grille de données ou la liste de données sur la page et modifiez-en les attributs à l'aide de la boîte de dialogue.

Définition d'un format et d'un champ de source de données dans une grille de données

Lors de la création ou de la modification d'une grille de données, la colonne Champ de données simple (appelée « colonne liée » dans ASP.NET) permet de spécifier le champ de la source de données à afficher et le format de données à utiliser par le champ avec une expression de mise en forme .NET.

1

Dans la boîte de dialogue Grille de données, sélectionnez la colonne Champ de données simple de la zone Colonnes.

DREAMWEAVER CS3


665

2

Dans la boîte de dialogue Champ de données simple, entrez le titre des lignes d'en-tête ou de pied de page de la grille.

C'est l'inspecteur Propriétés de la grille de données qui contrôle l'affichage des lignes d'en-tête ou de pied de page.

3

Dans le menu déroulant Champ de données, sélectionnez la colonne de l'ensemble de données devant être utilisée pour remplir la colonne Grille de données.

4

Activez l'option Lecture seule pour qu'il soit impossible d'ajouter, de mettre à jour ou de supprimer la grille de données.

5

Dans le menu déroulant Type, sélectionnez un type de données, puis cliquez sur OK.

Voir aussi

« Ajout d'un contrôle Grille de données ASP.NET à une page » à la page 661

Création d'une mise en forme personnalisée pour une colonne Grille de données de forme libre

ASP.NET) permet de créer des combinaisons de contrôles de serveur et de texte HTML afin de définir une mise en forme personnalisée pour une colonne. Les contrôles au sein d'une colonne de forme libre peuvent être liés aux données. Ce type de colonne offre une plus grande liberté au niveau de la mise en forme et de la fonctionnalité du contenu, car vous décidez entièrement de la façon dont les données s'affichent et de ce qui se passe lorsque les utilisateurs interagissent avec les lignes de la grille.

1

Dans la boîte de dialogue Grille de données, sélectionnez la colonne Forme libre de la zone Colonnes.

2

Dans la boîte de dialogue Forme libre, entrez le titre des lignes d'en-tête ou de pied de page de la grille. C'est l'inspecteur

Propriétés de la grille de données qui contrôle l'affichage des lignes d'en-tête ou de pied de page.

3

Dans le menu déroulant Modèle, sélectionnez le modèle à utiliser avec la grille de données de forme libre.

4

Cliquez sur le bouton Ajouter un champ de données puis sélectionnez la colonne de l'ensemble de données à utiliser pour remplir la colonne de la grille. Cliquez ensuite sur OK.

L'expression de liaison de données appropriée s'affiche dans la zone Contenu.

5

Mettez en forme la colonne de forme libre en mettant l'expression de liaison entre des balises HTML dans la zone

Contenu.

6


Voir aussi


Affichage de données en tant qu'hyperlien dans une grille de données

Lors de la création ou de la modification d'une grille de données, la colonne Hyperlien permet d'afficher des informations sous la forme d'hyperliens. Elle sert généralement à afficher des données (numéro de client ou nom de produit, par exemple) sous forme d'un hyperlien sur lequel les utilisateurs peuvent cliquer pour accéder à une autre page affichant des détails sur cet élément.

1

Dans la boîte de dialogue Grille de données, sélectionnez la colonne Hyperlien de la zone Colonnes.

2

Dans la boîte de dialogue Colonne Hyperlien, entrez le titre de la colonne.

3

Dans la section Texte de l'hyperlien, activez l'option Texte statique ou Champ de données.

•

Si vous choisissez Texte statique, saisissez le texte de l'hyperlien.

•

Si vous choisissez Champ de données, sélectionnez la colonne de l'ensemble de données devant fournir le texte de l'hyperlien.

DREAMWEAVER CS3


666

4

Dans la section Page associée, activez l'option URL statique ou Champ de données.

•

Si vous choisissez URL statique, saisissez l'URL de la page de destination ou recherchez la page de destination.

•

Si vous choisissez Champ de données, sélectionnez la colonne de l'ensemble de données devant fournir l'URL.

5

Lorsque vous créez l'hyperlien à l'aide de l'option Champ de données, spécifiez l'expression de mise en forme du texte de l'hyperlien dans la zone Formater la chaîne. Pour plus d'informations sur les expressions de format, consultez la documentation d'ASP.NET relative à la méthode String.Format pour les grilles de données.

6

Cliquez sur OK.

Voir aussi


Autorisation de modification des lignes d'une grille de données

Lors de la création ou de la modification d'une grille de données, la colonne Boutons Modifier, Mettre à jour, Annuler informations figurant dans les lignes de la grille de données. Au moment de l'exécution, cette colonne affiche un bouton intitulé Modifier. Lorsque l'utilisateur clique dessus, les données de la ligne s'affichent dans des contrôles modifiables, tels que des zones, et le bouton Modifier est remplacé par les boutons Mettre à jour et Annuler.

1

Dans la boîte de dialogue Grille de données, sélectionnez la colonne Boutons Modifier, Mettre à jour, Annuler de la zone

Colonnes.

2

Dans la boîte de dialogue Boutons Modifier, Mettre à jour, Annuler, entrez le titre de la colonne.

3

Dans le menu déroulant Type de bouton, choisissez Bouton Lien ou Bouton-poussoir. tandis que les boutons-poussoir utilisent des images.

4

Dans le menu déroulant Mettre à jour la table, choisissez la table de base de données dont l'utilisateur va modifier les données.

5

Dans le menu déroulant Clé primaire, choisissez une clé primaire associée à la table.

6

Sélectionnez un type de données dans le menu déroulant Type, puis cliquez sur OK.

Voir aussi


Autorisation de suppression d'une ligne d'une grille de données

Lors de la création ou de la modification d'une grille de données, le bouton Supprimer (également appelécolonne boutondans ASP.NET) permet d'autoriser un utilisateur à supprimer une ligne particulière en cliquant sur un bouton.

1

Dans la boîte de dialogue Grille de données, sélectionnez la colonne Bouton Supprimer de la zone Colonnes.

2

Dans la boîte de dialogue Bouton Supprimer, entrez le nom de la colonne.

3

Dans le menu déroulant Type de bouton, choisissez Bouton Lien ou Bouton-poussoir.

Au moment de l'exécution, cette colonne affiche un bouton intitulé Supprimer. Les boutons lien utilisent des liens texte tandis que les boutons-poussoir utilisent des images.

4

Dans le menu déroulant Supprimer depuis, choisissez la table de base de données dont l'utilisateur va supprimer des données.

5

Dans le menu déroulant Clé primaire, choisissez une clé primaire associée à la table.

6


Voir aussi


DREAMWEAVER CS3


667

A

Chapitre 22 : Automatisation des tâches

Vous pouvez automatiser les tâches en répétant les étapes enregistrées dans le panneau Historique ou en sauvegardant une série d'étapes en tant que commande. L'automatisation des tâches effectuées fréquemment permet un gain de temps et une

économie d'efforts.

Automatisation des tâches

Automatisation des tâches

Le panneau Historique mémorise les étapes que vous effectuez lors de l'exécution d'une tâche. Vous pouvez automatiser une tâche effectuée fréquemment en reproduisant les étapes correspondantes à partir du panneau Historique ou en créant une nouvelle commande qui effectue les étapes automatiquement.

Certains mouvements de la souris, tels qu'une sélection via un clic dans la fenêtre de document, ne peuvent pas être reproduits ou sauvegardés. Lorsque vous effectuez ce type de mouvements, un trait noir s'affiche dans le panneau

Historique (la présence de cette ligne ne devient évidente que lorsque vous effectuez une autre action). Pour éviter cela, déplacez le point d'insertion à l'aide des touches fléchées, et non de la souris, dans la fenêtre de document.

Il existe quelques autres actions qui ne peuvent pas être reproduites, par exemple le glisser-déplacer d'un élément de la page.

Lorsque vous effectuez ce type d'action, une icône contenant un petit X rouge s'affiche dans le panneau Historique.

Les commandes sauvegardées sont conservées en permanence (à moins que vous ne les supprimiez), tandis que les commandes enregistrées sont supprimées lorsque vous quittez Adobe® Dreamweaver® CS3 et les séquences d'étapes copiées sont supprimées lorsque vous copiez un autre élément

Utilisation du panneau Historique

Le panneau Historique (Fenêtre > Historique) affiche une liste des étapes que vous avez effectuées dans le document actif depuis que vous l'avez créé ou ouvert (mais pas les étapes effectuées dans d'autres cadres, d'autres fenêtres de document ou dans le panneau Site). Utilisez le panneau Historique pour annuler plusieurs étapes en même temps et pour automatiser des tâches.

B

C D E

A.

Curseur (index)

B.

Etapes

C.

Bouton Reproduire

D. Bouton Copier les étapes E.

Bouton Enregistrer comme commande

Lors de l'ouverture du panneau Historique, le curseur, ou index, pointe sur la dernière action que vous avez accomplie.

Remarque :

Il est impossible de modifier l'ordre dans lequel les étapes sont affichées dans le panneau Historique. Il ne faut pas voir dans le panneau Historique une collection arbitraire de commandes ; il vous permet de voir, dans l'ordre chronologique, la liste des actions déjà effectuées.

Annulation de la dernière étape

❖


•

Choisissez Edition > Annuler.

•

Déplacez le curseur du panneau Historique d'une étape vers le haut dans la liste.

668

DREAMWEAVER CS3


669

Remarque :

Pour provoquer un déplacement automatique vers une étape spécifique, cliquez à gauche de cette étape ; si vous cliquez sur l'étape elle-même, elle sera sélectionnée. La sélection d'une étape est une opération différente du retour à cette étape dans l'historique des actions.

Annulation de plusieurs étapes à la fois

❖

Faites glisser le curseur de façon à pointer sur une étape de la liste, ou cliquez à gauche d'une étape le long de la trajectoire du curseur.

Le curseur se dirige automatiquement vers cette étape en annulant toutes les étapes se trouvant sur son passage.

Remarque :

Tout comme pour l'annulation d'une seule action, si vous annulez une série d'étapes, puis effectuez une autre opération dans le document, il ne vous sera plus possible de rétablir les actions annulées : elles disparaissent du panneau

Historique.

Définition du nombre maximal d'étapes que le panneau Historique conserve et affiche

Le nombre d'étapes par défaut est suffisant pour la plupart des utilisateurs. Plus ce nombre est élevé, plus le panneau

Historique nécessite de la mémoire, ce qui peut affecter les performances et ralentir considérablement votre ordinateur.

1


2

Sélectionnez la catégorie Général dans la liste de gauche.

3

Tapez un chiffre dans la zone Nombre maximal d'étapes de l'historique.

Lorsque le panneau Historique atteint le nombre maximal d'étapes, les premières étapes sont supprimées.

Effacement de la liste des actions du panneau Historique pour le document actif

❖

Dans le menu contextuel du panneau Historique, sélectionnez Effacer l'historique.

Cette commande efface également toutes les informations permettant d'annuler les actions effectuées dans le document actif : après avoir cliqué sur Effacer l'historique, il vous est impossible d'annuler les actions dont la trace a été effacée. La fonction Effacer l'historique n'annule aucune action passée, mais se limite à supprimer la trace de ces étapes de la mémoire.

Répétition d'étapes

Vous pouvez répéter la dernière étape effectuée ou bien une série d'étapes contiguës ou non à l'aide du panneau Historique.

Reproduisez les étapes directement depuis le panneau Historique.

Répétition d'une étape

❖


•

Choisissez Edition > Répéter.

•

Dans le panneau Historique, sélectionnez une étape et cliquez sur le bouton Reproduire. L'étape est reproduite et une nouvelle instance de cette action apparaît dans le panneau Historique.

Répétition d'une série d'étapes

1

Sélectionnez les étapes désirées dans le panneau Historique :

•

Pour sélectionner des étapes adjacentes, faites glisser la souris d'une étape à une autre (ne faites pas glisser le curseur ; faites simplement glisser la souris de l'étiquette de texte d'une étape vers l'étiquette de texte d'une autre), ou sélectionnez la première étape et, tout en maintenant la touche Maj enfoncée, cliquez sur la dernière étape.

•

Pour sélectionner des étapes non adjacentes, sélectionnez une étape, puis tout en maintenant appuyée la touche Ctrl

(Windows) ou Commande (Macintosh), cliquez sur d'autres étapes de façon à les sélectionner (ou à les désélectionner le cas échéant).

Seules les actions sélectionnées (en surbrillance), et pas nécessairement celle sur laquelle se trouve le curseur, sont répétées.

Remarque :

Bien que vous puissiez sélectionner une série d'étapes contenant un trait noir signalant une action impossible à enregistrer, cette étape est ignorée lorsque vous reproduisez les étapes.

2

Cliquez sur Reproduire.

DREAMWEAVER CS3


670

Les étapes sont reproduites dans l'ordre chronologique et une nouvelle étape, Reproduire les étapes, apparaît dans le panneau Historique.

Réalisation ou extension d'une sélection

❖

Maintenez la touche Maj enfoncée tout en appuyant sur une touche fléchée.

Si un trait noir indiquant un mouvement de la souris apparaît pendant que vous effectuez une tâche que vous voulez réitérer ultérieurement, vous pouvez annuler cette dernière action et tenter une autre approche (utilisez les touches fléchées, par exemple).

Application d'étapes de l'historique à des objets

Vous pouvez appliquer un ensemble d'étapes affichées dans le panneau Historique à n'importe quel objet figurant dans la fenêtre de document.

Si vous sélectionnez plusieurs objets, puis leur appliquez des étapes à partir du panneau Historique, ces objets sont traités comme une sélection unique et Dreamweaver tente d'appliquer les étapes à cette sélection combinée ; toutefois, vous ne pouvez appliquer un ensemble d'étapes qu'à un seul objet à la fois.

Pour appliquer les étapes à chaque objet d'un ensemble d'objets, vous devez faire en sorte que la dernière étape de la série sélectionne l'objet suivant de l'ensemble. La deuxième procédure illustre ce principe dans un scénario particulier : définition de l'espacement vertical et horizontal d'une série d'images.

Application d'étapes à un autre objet

1

Sélectionnez l'objet.

2

Sélectionnez l'étape à appliquer dans le panneau Historique, puis cliquez sur Reproduire.

Application d'étapes à plusieurs objets

1

Ouvrez un document dans lequel chaque ligne est composée d'une petite image (par exemple une puce graphique ou une icône) suivie de texte.

L'objectif est d'espacer davantage ces images à la fois du texte et des autres images situées au-dessus et en dessous.

2


3

Sélectionnez la première image.

4

Dans l'inspecteur Propriétés, indiquez des valeurs dans les zones Espace V. et Espace H. pour définir l'espacement de l'image.

5

Cliquez sur l'image de nouveau pour activer la fenêtre de document sans déplacer le point d'insertion.

6

Appuyez sur la touche fléchée gauche pour amener le point d'insertion à gauche de l'image.

7

Appuyez sur la touche fléchée bas pour faire descendre le point d'insertion d'une ligne, tout en le laissant juste à gauche de la seconde image de la série.

8

Appuyez sur la touche fléchée droite tout en maintenant la touche Maj. enfoncée, pour sélectionner la seconde image.

Remarque :

Ne sélectionnez surtout pas l'image en cliquant dessus, car vous ne pourriez plus reproduire toutes les étapes.

DREAMWEAVER CS3


671

9

Dans le panneau Historique, sélectionnez les étapes correspondant à la modification de l'espacement de l'image et à la sélection de l'image suivante. Cliquez sur le bouton Reproduire pour reproduire ces actions.

L'espacement de l'image courante est modifié, et l'image suivante est sélectionnée.

10

Continuez à cliquer sur le bouton Reproduire jusqu'à ce que toutes les images soient correctement espacées.

Copie et collage d'étapes entre les documents

Chaque document ouvert possède son propre historique. Vous pouvez copier des étapes d'un document et les coller dans un autre document.

La fermeture d'un document supprime son historique. Si vous savez que vous voudrez utiliser des étapes d'un document ultérieurement, copiez ou sauvegardez ces étapes avant de fermer ce document.

1

Sélectionnez les étapes désirées dans le panneau Historique du document qui contient les étapes à réutiliser.

2

Cliquez sur Copier les étapes dans le panneau Historique .

Remarque :

Le bouton Copier les étapes (dans le panneau Historique) est différent de la commande Copier (dans le menu

Edition). Vous ne pouvez pas utiliser la commande Edition > Copier pour copier des étapes, mais vous pouvez utiliser la commande Edition > Coller pour les coller.

Soyez prudent lorsque vous copiez des étapes qui comportent une commande Copier ou Coller:

•

N'utilisez pas Copier les étapes si l'une des étapes contient une commande Copier, car le collage de ces étapes risque de ne pas s'effectuer comme souhaité.

•

Si vos étapes contiennent une commande Coller, vous ne pouvez pas les coller, à moins qu'elles ne comprennent

également une commande Copier avant la commande Coller.

3

Ouvrez l'autre document.

4

Placez le point d'insertion sur l'emplacement désiré, ou sélectionnez l'objet auquel vous voulez appliquer les étapes.

5


Les étapes sont reproduites dès qu'elles sont collées dans le panneau Historique du document. Le panneau Historique les affiche comme une seule étape, appelée Coller les étapes.

Si vous collez des étapes dans un éditeur de texte, en mode Code ou dans l'inspecteur de code, elles s'affichent sous forme de code Java Script. Ce point peut vous être très utile pour apprendre à écrire vos propres scripts.

Voir aussi

« Rédaction et modification de code » à la page 301

DREAMWEAVER CS3


672

Création et utilisation de commandes à partir d'étapes de l'historique

Sauvegardez un ensemble d'étapes de l'historique sous la forme d'une commande à laquelle vous donnerez un nom et qui deviendra alors disponible dans le menu Commandes. Créez et enregistrez une nouvelle commande si vous pensez devoir utiliser de nouveau un ensemble d'étapes, surtout après le prochain démarrage de Dreamweaver.

Création d'une commande

1

Sélectionnez la ou les étapes désirées dans le panneau Historique.

2

Cliquez sur le bouton Enregistrer comme commande ou choisissez l'option Enregistrer comme commande dans le menu contextuel du panneau Historique.

3

Indiquez le nom de la commande et cliquez sur OK.

La commande apparaît dans le menu Commandes.

Remarque :

La commande est sauvegardée sous la forme d'un fichier Java Script (ou parfois HTML) dans votre dossier

Dreamweaver/Configuration/Commandes. Si vous utilisez Dreamweaver sur un système d'exploitation à plusieurs utilisateurs, le fichier est enregistré dans le dossier Commandes de l'utilisateur spécifique.

Utilisation d'une commande sauvegardée

1

Sélectionnez l'objet auquel vous désirez appliquer la commande ou placez le point d'insertion à l'emplacement désiré.

2

Sélectionnez la commande de votre choix dans le menu Commandes.

Modification du nom d'une commande

1

Choisissez Commandes > Modifier la liste des commandes.

2

Sélectionnez la commande à renommer, indiquez son nouveau nom, puis cliquez sur Fermer.

Suppression d'un nom du menu Commandes

1

Choisissez Commandes > Modifier la liste des commandes.

2

Sélectionnez une commande.

3

Cliquez sur Supprimer, puis sur Fermer.

Enregistrement et sauvegarde de commandes

Enregistrez une commande temporaire pour une utilisation à court terme, ou enregistrez et sauvegardez une commande pour l'utiliser ultérieurement. Dreamweaver conserve uniquement une commande enregistrée à la fois ; dès que vous commencez à enregistrer une nouvelle commande, l'ancienne est perdue, à moins que vous ne la sauvegardiez avant de mémoriser la nouvelle commande.

Enregistrement provisoire une série d'étapes

1

Choisissez Commandes > Démarrer l'enregistrement ou appuyez sur la combinaison de touches Ctrl+Maj+X

(Windows) ou Commande+Maj+X (Macintosh).

Le pointeur change d'aspect pour indiquer que vous mémorisez une commande.

2

Lorsque l'opération est terminée, choisissez Commandes > Arrêter l'enregistrement ou appuyez à nouveau sur la combinaison de touches Ctrl+Maj+X (Windows) ou Commande+Maj+X (Macintosh).

Reproduction d'une commande enregistrée

❖

Choisissez Commandes > Reproduire la commande enregistrée ou appuyez sur la combinaison de touches Ctrl+Maj+R

(Windows) ou Commande+Maj+R (Macintosh).

DREAMWEAVER CS3


673

Sauvegarde d'une commande enregistrée

1

Sélectionnez Commandes > Reproduire la commande enregistrée.

2

Dans la liste d'étapes du panneau Historique, sélectionnez l'étape Exécuter commande et cliquez sur le bouton

Enregistrer comme commande.

3

Indiquez le nom de la commande et cliquez sur OK.

La commande apparaît dans le menu Commandes.

Chapitre 23 : Accessibilité

Adobe® Dreamweaver® CS3 comprend une série de fonctions permettant de concevoir et de développer des pages Web accessibles. En outre, l'application est elle-même accessible aux personnes souffrant de handicaps.

Dreamweaver et l'accessibilité

Contenu accessible

L'accessibilité consiste à faire en sorte que les sites ou les produits Web que vous créez puissent être utilisés par des personnes souffrant de handicaps visuels, auditifs, moteurs ou autres. Les fonctions d'accessibilité de produits logiciels et de sites Web peuvent être : la prise en charge de lecteurs d'écran, des équivalents textuels pour les graphiques, des raccourcis clavier, des modifications dans les couleurs d'affichage pour augmenter le contraste, etc. Dreamweaver inclut des outils qui facilitent son utilisation et vous permettent de créer un contenu accessible.

Pour les développeurs Dreamweaver qui doivent faire appel aux fonctions d'accessibilité, l'application prend en charge des lecteurs d'écran, la navigation avec le clavier et les fonctions d'accessibilité de votre système d'exploitation.

Pour les concepteurs Web qui souhaitent créer du contenu accessible, Dreamweaver vous aide à créer des pages accessibles au contenu utile pour les lecteurs d'écran et en conformité avec les directives gouvernementales. Par exemple, des boîtes de dialogue vous invitent à entrer des attributs d'accessibilité, tels que l'équivalent texte d'une image, lorsque vous insérez des

éléments de page. Ainsi, lorsque l'image s'affiche sur le système d'un utilisateur ayant des problèmes de vue, le lecteur d'écran lit la description.

Dreamweaver propose également des pages Web modèles conçues dans un souci d'accessibilité optimale et dispose d'un rapport d'accessibilité que vous pouvez exécuter pour vérifier si votre page ou votre site est conforme aux directives d'accessibilité de la Section 508.

Remarque :

Pour en savoir plus sur deux de ces importantes initiatives, consultez le site de la World Wide Web Consortium

Web Accessibility Initiative ( www.w3.org/wai ) et la Section 508 de la loi américaine Federal Rehabilitation Act

( www.section508.gov

).

Aucun outil de création Web ne peut automatiser entièrement le processus de développement. Pour concevoir des sites Web accessibles, vous devez comprendre les exigences liées à l'accessibilité et devez continuellement tenir compte lors de vos prises de décisions de la façon dont les personnes souffrant d'un handicap interagissent avec les pages Web. La meilleure façon de s'assurer qu'un site Web est accessible est de respecter toutes les procédures de préparation, de développement, de tests et d'évaluation.

Fonction de validation d'accessibilité de Dreamweaver

La fonction de validation d'accessibilité de Dreamweaver utilise la technologie de UsableNet. UsableNet est l'un des principaux développeurs de logiciels simples d'utilisation permettant d'automatiser les tests de fonctionnalité et d'accessibilité et les corrections. Pour une assistance supplémentaire concernant les tests d'accessibilité, essayez le service

UsableNet LIFT pour Macromedia Dreamweaver, une solution de développement de sites Web fonctionnels et accessibles.

UsableNet LIFT pour Macromedia Dreamweaver comprend un assistant de correction pour les tableaux, les formulaires et les images complexes, un éditeur ALT global, la génération de rapports personnalisés et un nouveau mode de contrôle actif qui assure l'accessibilité du contenu pendant la construction des pages. Demandez une version démo de LIFT pour

Macromedia Dreamweaver à l'adresse www.usablenet.com

.

674

DREAMWEAVER CS3


675

Fonctions d'accessibilité de Dreamweaver

Utilisation de lecteurs d'écran avec Dreamweaver

Un lecteur d'écran récite le texte qui s'affiche sur l'écran de l'ordinateur. Il lit aussi les informations non textuelles, telles que les étiquettes de boutons ou les descriptions d'images dans l'application, fournies dans les balises ou les attributs d'accessibilité lors de la création.

En tant que concepteur Dreamweaver, vous pouvez utiliser un lecteur d'écran pour vous assister dans la création de vos pages Web. Le lecteur d'écran commence sa lecture par le coin supérieur gauche de la fenêtre de document.

Dreamweaver prend en charge les lecteurs d'écran JAWS pour Windows de Freedom Scientific

( www.freedomscientific.com

), et Window-Eyes de GW Micro ( www.gwmicro.com

).

Prise en charge des fonctions d'accessibilité du système d'exploitation

Dreamweaver prend en charge les fonctionnalités d'accessibilité des systèmes d'exploitation Windows et Macintosh. Par exemple, sur le Macintosh, définissez les préférences visuelles dans la boîte de dialogue Préférences d'accès universelles

(Apple > Préférences système). Les paramètres sélectionnés sont alors repris par l'espace de travail de Dreamweaver.

Le paramètre de contraste élevé du système d'exploitation Windows est également pris en charge. Vous pouvez activer cette option à l'aide du Panneau de configuration de Windows et elle affecte Dreamweaver de la façon suivante :

•

Les boîtes de dialogue et les panneaux utilisent des paramètres de couleurs système. Par exemple, si vous fixez les couleurs à Blanc sur Noir, les boîtes de dialogue et les panneaux Dreamweaver utilisent du blanc comme couleur de premier plan et du noir en arrière-plan.

•

Le mode Code utilise les couleurs système des fenêtres et du texte de fenêtres. Par exemple, si vous avez fixé les couleurs système à Blanc sur Noir et que vous changez les couleurs de texte dans Edition > Préférences > Coloration du code,

Dreamweaver ignore ces paramètres de couleur et affiche le texte de code avec du blanc comme couleur de premier plan et du noir en arrière-plan.

•

Le mode Création utilise les couleurs d'arrière-plan et de texte que vous avez défini dans Modifier > Propriétés de la page pour que les pages que vous créez aient un rendu des couleurs similaire à celui d'un navigateur.

N

avigation dans Dreamweaver à l'aide du clavier

Vous pouvez utiliser le clavier pour parcourir les panneaux, les inspecteurs, les boîtes de dialogue, les cadres et les tableaux sans utiliser de souris.

Remarque :

L'utilisation de la touche de tabulation et des touches fléchées n'est prise en charge que sous Windows.

N avigation dans les panneaux

1

Dans la fenêtre de document, appuyez sur Ctrl+F6 pour activer un panneau.

Une ligne pointillée autour du titre du panneau indique que le panneau est actif. Le lecteur d'écran lit la barre de titre du panneau actif.

2

Appuyez de nouveau sur Ctrl+F6 jusqu'à ce que le panneau dans lequel vous voulez travailler soit actif. Appuyez sur

Ctrl+Maj+F6 pour activer le panneau précédent.

3

Si le panneau dans lequel vous voulez travailler n'est pas ouvert, utilisez les raccourcis clavier indiqués dans le menu

Fenêtre pour afficher le panneau approprié, puis appuyez sur Ctrl+F6.

Si le panneau dans lequel vous voulez travailler est ouvert, mais affiché sous sa forme réduite, activez la barre de titre du panneau et appuyez sur la barre d'espace. Appuyez de nouveau sur la barre d'espace pour réduire le panneau.

4

Appuyez sur la touche de tabulation pour passer d'une option à une autre dans le panneau.

5

Utilisez les touches fléchées de façon appropriée :

•

Si une option comporte des choix, utilisez les touches fléchées pour faire défiler ces choix, puis appuyez sur la barre d'espace pour valider la sélection.

DREAMWEAVER CS3


676

•

Si le groupe de panneaux comporte des onglets pour ouvrir d'autres panneaux, activez l'onglet ouvert puis utilisez la touche fléchée gauche ou droite pour ouvrir un autre onglet. Après avoir ouvert un nouvel onglet, appuyez sur la touche de tabulation pour faire défiler les options de ce panneau.

N avigation dans l'inspecteur Propriétés

1

Appuyez sur Ctrl+F3 (Windows uniquement) pour afficher l'inspecteur Propriétés, s'il n'est pas visible.

2

Appuyez sur Ctrl+Alt+Tab jusqu'à ce que l'inspecteur Propriétés soit actif.

3

Appuyez sur la touche de tabulation pour passer d'une option de l'inspecteur Propriétés à une autre.

4

Utilisez les touches fléchées pour parcourir les différentes options.

5

Appuyez sur Ctrl+Tab pour ouvrir et fermer la section développée de l'inspecteur Propriétés ou appuyez sur la barre d'espace lorsque la flèche d'agrandissement dans le coin inférieur droit est active.

N avigation dans une boîte de dialogue

1

Appuyez sur la touche de tabulation pour passer d'une option à une autre dans la boîte de dialogue.

2

Utilisez les touches fléchées pour faire défiler les choix d'une option.

3

Si la boîte de dialogue comporte une liste Catégorie, appuyez sur Ctrl+Tab (Windows) pour activer la liste Catégorie puis utilisez les touches fléchées pour vous déplacer vers le haut ou vers le bas dans la liste.

4

Appuyez de nouveau sur Ctrl+Tab pour afficher les options d'une catégorie.

5

Appuyez sur Entrée pour quitter la boîte de dialogue.

N avigation dans les cadres

❖

Si votre document contient des cadres, vous pouvez utiliser les touches fléchées pour activer un cadre.

Sélection d'un cadre

1

Appuyez sur Alt+Flèche vers le bas pour placer le point d'insertion dans la fenêtre de document.

2

Appuyez sur Alt+Flèche vers le haut pour sélectionner le cadre actif.

3

Continuez d'appuyer sur Alt+Flèche vers le haut pour activer le jeu de cadres, puis les jeux de cadres parents, s'il existe des jeux de cadres imbriqués.

4

Appuyez sur Alt+Flèche vers le bas pour activer un jeu de cadres enfant ou un seul cadre dans un jeu de cadres.

5

Lorsqu'un cadre est actif, appuyez sur Alt+Flèche gauche ou droite pour vous déplacer entre les cadres.

N avigation dans un tableau

1

Utilisez les touches fléchées ou appuyez sur la touche de tabulation pour vous déplacer vers d'autres cellules dans un tableau.

Si vous appuyez sur la touche de tabulation lorsque vous être dans la cellule la plus à droite, vous ajoutez une ligne au tableau.

2

Pour sélectionner une cellule, appuyez sur Ctrl+A (Windows uniquement) lorsque le point d'insertion est dans la cellule.

3

Pour sélectionner un tableau en entier, appuyez deux fois sur Ctrl+A (Windows) si le point d'insertion est dans une cellule ou une fois si une cellule est sélectionnée.

4

Pour quitter le tableau, appuyez trois fois sur Ctrl+A (Windows) lorsque le point d'insertion est dans une cellule, deux fois si la cellule est sélectionnée ou une fois si le tableau est sélectionné, puis appuyez sur les touches Haut, Gauche ou Droite.

DREAMWEAVER CS3


677

Conception de pages dans un souci d'accessibilité

O

ptimisation de l'espace de travail pour la conception de pages accessibles

Lorsque vous créez des pages accessibles, vous devez associer des informations aux objets présents sur les pages, telles que des étiquettes et des descriptions, pour rendre votre contenu accessible à tous les utilisateurs.

Pour ce faire, activez la boîte de dialogue Accessibilité de chaque objet, de façon à ce que Dreamweaver vous demande d'entrer les informations d'accessibilité lorsque vous insérez des objets. Vous pouvez activer une boîte de dialogue pour n'importe quel objet de la catégorie Accessibilité dans les préférences.

1


2

Sélectionnez la catégorie Accessibilité dans la liste à gauche, sélectionnez un objet, définissez les options suivantes, puis cliquez sur OK.

Affichage des attributs lors de l'insertion

Sélectionnez les objets pour lesquels vous souhaitez activer les boîtes de dialogue d'accessibilité. Par exemple, les objets de formulaire, les cadres, les médias et les images.

Laisser le focus sur le panneau

Conserve le panneau à l'état actif afin qu'il soit disponible pour le lecteur d'écran. Si vous ne sélectionnez pas cette option, le focus demeure en mode Création ou Code lorsqu'un utilisateur ouvre un panneau.

Restitution hors écran

Sélectionnez cette option lorsque vous utilisez un lecteur d'écran.

Remarque :

Les attributs d'accessibilité apparaissent dans la boîte de dialogue Tableau lors de l'insertion d'un nouveau tableau.

Voir aussi

« Insertion d'une image » à la page 234

« Insertion de contenu Flash » à la page 245

« Validation de données de formulaire HTML » à la page 583

« Création de cadres et de jeux de cadres » à la page 198

« Insertion d'un tableau et ajout de contenu » à la page 171

Chapitre 24 : Raccourcis et extensions

Vous pouvez personnaliser les raccourcis clavier (y compris des raccourcis pour fragments de code) et définir des jeux de raccourcis que vous utiliserez dans différents projets. Vous pouvez également ajouter et gérer de nouvelles fonctionnalités

(extensions), qui permettent de reformater des tableaux, d'écrire des compléments de scripts coté serveurs ou clients.

Raccourcis clavier

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

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

1

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

2

Cliquez sur le bouton Exporter le jeu au format HTML ; il s'agit du troisième bouton du jeu de quatre boutons situé en haut de la boîte de dialogue.

3

Dans la boîte de dialogue d'enregistrement, entrez le nom de la feuille de référence et sélectionnez l'emplacement approprié pour enregistrer le fichier.

Personnalisation des raccourcis clavier

Utilisez l'éditeur de raccourcis clavier pour créer vos propres touches de raccourci, y compris pour les fragments de code.

Vous pouvez également supprimer des raccourcis clavier, les modifier, et sélectionner un jeu prédéfini de raccourcis dans l'éditeur de raccourcis clavier.

Voir aussi

« Manipulation de fragments de code » à la page 302

Création d'un raccourci clavier

Créez vos propres touches de raccourci, modifiez des raccourcis existants ou sélectionnez un jeu de raccourcis prédéfini.

1


2


Jeu en cours

Vous permet de choisir un jeu de raccourcis prédéfinis livrés avec Dreamweaver, ou tout autre jeu personnalisé que vous avez vous-même défini. Les jeux prédéfinis sont répertoriés en haut du menu. Par exemple, si vous connaissez les raccourcis de HomeSite ou BBEdit, vous pouvez les utiliser en choisissant le jeu prédéfini correspondant.

Commands

Vous permet de sélectionner une catégorie de commandes à modifier. Par exemple, vous pouvez modifier des commandes de menu, telles que Ouvrir ou des commandes de modification du code, telles que Equilibrer les accolades.

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

La liste des commandes

affiche les commandes de la catégorie que vous avez choisie dans le menu contextuel Commandes, ainsi que les raccourcis clavier attribués. Les catégories de commandes Menu s'affichent sous une forme arborescente, suivant la structure des menus. Les autres catégories répertorient les commandes par leur nom (par exemple, Quitter l'application).

Raccourcis

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

Ajouter l'élément (+)

ajoute un nouveau raccourci pour la commande en cours. Cliquez sur ce bouton pour ajouter une nouvelle ligne vierge aux Raccourcis. Entrez une nouvelle combinaison de touches et cliquez sur Remplacer pour ajouter

678

DREAMWEAVER CS3


679

un nouveau raccourci clavier pour cette commande. Vous pouvez attribuer deux raccourcis clavier différents pour chaque commande. S'il en existe déjà deux, le bouton Ajouter l'élément (+) n'a aucun effet.

Supprimer l'élément (-)

supprime le raccourci sélectionné de la liste.

Appuyer sur la touche

affiche la combinaison de touches que vous saisissez lorsque vous ajoutez ou modifiez un raccourci.

Remplacer

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

Dupliquer le jeu

doté du suffixe copie .

Renommer le jeu

renomme le jeu actuel.

Exporter comme fichier H

T

ML

enregistre le jeu actuel dans un format de table HTML en vue d'un affichage et d'une impression simples. Vous pouvez ouvrir le fichier HTML dans votre navigateur et imprimer les raccourcis comme référence rapide.

Supprimer le jeu

supprime un jeu. Les jeux actifs ne peuvent pas être supprimés.

Suppression d'un raccourci d'une commande

1


2

Dans le menu contextuel Commandes, sélectionnez une catégorie.

3

Sélectionnez une commande dans la liste, puis sélectionnez un raccourci.

4

Cliquez sur le bouton Supprimer un élément (-).

Ajout d'un raccourci clavier à une commande

1


2


3

Sélectionnez une commande dans la liste.

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

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

4

Procédez de l'une des manières suivantes pour ajouter un raccourci

•

Si moins de deux raccourcis sont déjà attribués à la commande, cliquez sur le bouton Ajouter l'élément (+). Une nouvelle ligne vide apparaît dans la zone Raccourcis et le point d'insertion s'affiche dans la zone Appuyer sur la touche.

•

Si deux raccourcis sont déjà attribués à la commande, sélectionnez-en un (il sera remplacé par le nouveau raccourci).

Cliquez ensuite dans la zone Appuyer sur la touche.

5

Appuyez sur une combinaison de touches. Celle-ci apparaît dans la zone Appuyer sur la touche.

Remarque :

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

6

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

Modification d'un raccourci existant

1


2


3

Sélectionnez une commande dans la liste, puis sélectionnez un raccourci à modifier.

4

Cliquez dans la zone Appuyer sur la touche, et entrez une nouvelle combinaison de touches.

5

Cliquez sur le bouton Remplacer pour modifier le raccourci.

Remarque :

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

DREAMWEAVER CS3


680

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

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

mappages des raccourcis clavier » du manuel Extension de Dreamweaver .

Extensions

Ajout et gestion d'extensions dans Dreamweaver

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

Remarque :

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

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

Le logiciel Extension Manager est une application indépendante permettant d'installer et de gérer les extensions dans les applications Adobe. Vous pouvez lancer Extension Manager à partir de Dreamweaver en choisissant Commandes > Gérer les extensions.

1

Sur le site Web Adobe Exchange, cliquez sur le lien de téléchargement de l'extension qui vous intéresse.

Votre navigateur vous permet peut-être d'ouvrir et d'installer l'extension directement depuis le site ou de l'enregistrer sur votre disque.

•

Si vous l'ouvrez directement, Extension Manager traite automatiquement l'installation.

•

Si vous l'enregistrez sur votre disque, placez le fichier du logiciel d'extension (.mxp) dans le dossier des extensions téléchargées de l'application Dreamweaver sur votre ordinateur.

2

Double-cliquez sur le fichier du logiciel d'extension ou ouvrez Extension Manager et choisissez Fichier >

Installer l'extension. (Certaines extensions ne sont accessibles qu'une fois que vous avez redémarré l'application.

Remarque :

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

Voir aussi

« A propos de la personnalisation de Dreamweaver dans les systèmes multiutilisateurs » à la page 34

Index

Symboles

? dans les noms de champ 503

A

accès universel 675

accès WebDAV, configuration d'un site 89

Access.

Voir Microsoft Access accessibilité

activation 677

aide 3

attributs, modification 260

cadres 199, 202

clavier-navigation uniquement 675 fonctions du système d'exploitation 675

images 236

lecteurs d'écran 675

objets multimédias 259

objets, insertion 584

saisie des valeurs de balise d'image 235

utilitaire de validation 674

accolades, équilibrage

Accordéon, widget

314

à propos 430 ajout de panneaux 430 insertion 430

modification de l'ordre des panneaux 431 ouverture de panneaux à modifier 431 personnalisation 431

suppression de panneaux 430

Accueil Bridge 8

acquisition et placement de fichiers 85

fichiers dépendants 82

sur un serveur distant 84, 86

actifs

affichage 106

catégories 107

copier et coller 110

couleurs, création 111

dossier Favoris, création 112

édition

gestion

109

106

insertion 108

liste Favoris 107, 110 liste Site 107, 108

réutilisation dans un autre site 110

sélection de plusieurs 109

URL, création

utilisation 106

111

utilisation du panneau Actifs 107

Actifs, panneau

catégorie Modèles

actions

379

à propos 333

Voir aussi le nom des différentes actions

choix dans le panneau

Comportements 335

incluses dans Dreamweaver 336

modification dans les comportements 335

navigateurs compatibles

activation

336

Design Notes 99

voilage d'un site 96

activation du logiciel 1

Active Server Pages.

Voir ASP

Activité fichiers en arrière-plan, boîte de dialogue 87

activité réseau, suivi

actualisation

57

liste Site (panneau Actifs)

mode Création 294

108

panneau Fichiers

adition

79

actifs 109

Adobe Bridge

à propos 367

démarrage de Dreamweaver 369

démarrage depuis

Dreamweaver 368

intégration 351

placement de fichiers dans

Dreamweaver 368

Adobe ColdFusion. Voir

ColdFusion

Adobe Contribute.

Voir

Contribute

Adobe CSS Advisor 137

Adobe Design Center

Adobe Device Central

8

intégration 351

Adobe Dreamweaver

intégration à Contribute

intégration à Fireworks

54

352

intégration avec Flash 366

intégration avec Photoshop 358

optimisation du contenu

Dreamweaver pour périphériques mobiles 369

test d'un contenu mobile créé dans 286

utilisation avec Device Central 369

Adobe Fireworks

Design Notes 99

intégration à Dreamweaver 352

intégration à Flash et

Photoshop 351

menus contextuels 346, 354

préférences, ouvrir et modifier 355

Adobe Fireworks, intégration

copie de code HTML

Fireworks 356

création d'albums photos pour le

Web 357 mise à jour de code HTML

Fireworks 357

modification d'images

Fireworks 352

optimisation d'images depuis

Dreamweaver 353

préférences, ouvrir et modifier 355

Adobe Flash

Voir aussi les entrées débutant par

« Flash ».

intégration avec Dreamweaver 366

Adobe Flash Video

détection de Flash Player 257

insertion 254, 255

modification et suppression 257

options de diffusion vidéo 255

options de remise 254

options de téléchargement progressif 255

Adobe InDesign

intégration 351

Adobe Photoshop

copie et collage de découpes 360 copie et fusion d'images 360

insertion d'images PSD 359

intégration à Dreamweaver

361

358,

intégration à Flash et

Fireworks 351

intégration avec Dreamweaver 358

modification de fichiers 361

optimisation d'images pour

Dreamweaver 362

681

options d'aperçu d'image 362 recopie d'images 362 réinsertion d'images 362

Adresses IP et numéro IP

(127.0.0.1) 474 adresses réseau numériques 474

affichage

actifs

code

106

294

code de section d'en-tête 322

éléments invisibles 211

éléments PA 153

fichiers d'un site Dreamweaver 81 fichiers sur un disque ou sur votre bureau 81 fichiers sur un serveur 81

indicateurs de code 301

journal FTP 86

largeurs de tableau et de colonne 180

modèles en mode Code 376 modèles en mode Création 376

plusieurs enregistrements 547

tracés d'image 170

affichages du site dans le panneau

Fichiers, modification 77

Afficher la boîte de dialogue lors de l'insertion d'objets, option 34

Afficher le journal à la fin, option 74

Afficher le menu contextuel, comportement 346

Afficher les fichiers dépendants, option 53

Afficher-Masquer les calques, action 346

Aide 1 présentation 1

albums photo

création pour le Web 357

albums photo Web

création 357

alignement

éléments de page 239

éléments PA 155

images 230

options

texte 230

239

tracés d'image 170

Aller, association du bouton à un menu de reroutage 341

Ancre, objet (barre Insertion) 273

ancres nommées

affichage 212

création 273 ancres, nommées 273

animation 162

animations

amélioration 166

application à des objets 165 copie et collage 165

création 162

le long d'un chemin complexe 163

scénarios 161

animations MPEG

en tant qu'actifs. Voir

actifs animations QuickTime


actifs animations Shockwave


actifs

insertion 262

propriétés 246

annulation

commandes Accentuer

commandes Recadrer

242

241

extraction de fichiers 91

Aperçu dans le navigateur, commande 285

Aperçu dans le navigateur, préférences 216

aperçu dans les navigateurs 285

Appel JavaScript, action

applets Java

336

propriétés 265

rendre dynamiques 540

applets. Voir

applets Java applications Web

conditions requises 476

configuration d'un serveur Web et d'un serveur d'application 474

connexions aux bases de données 476

création d'un dossier racine 481

définies 473

définition d'un site

Dreamweaver 482

déroulement du travail de configuration 13

utilisations courantes 466

Appliquer le format source, option 74

Appliquer le modèle à la page, commande 395

Arborescence Eléments de base de données

527, 528

arborescence Eléments de base de données, définition de variables

SQL 525

Archivage/Extraction, système

à propos 88 configuration 88

arrière-plan

image et couleur d'arrière-plan, définition 127 image et couleur, définition

209

127, paramètres de style CSS 127 propriétés 127

transparence 209

ASP

connexion à ISP 488


connexions DSN 486

connexions OLE DB 485

connexions sans DSN 488

modification de scripts 322

objets de commande, utilisation 622

pages d'insertion, création 604

pages de connexion 630

pages de recherche, création 595

pages principale et de détails

procédures stockées 627

594

serveurs d'application 480

ASP.NET

boutons radio, activation 660

Case à cocher, contrôles 658

connexions de base de données 492

contrôles de formulaire, ajout 655

contrôles de formulaire, modification 656 dynamique 656

Grille de données, contrôle

661

660,

Grille de données, contrôle

Web 661

Grille de données, types de colonne 661

importation de balises 331

installation de .NET

Framework 480

langages utilisés avec 471

Liste de données, contrôle 660




rédaction d'instructions SQL pour 518

Supprimer Grille de données, boutons 661

Zone de liste, contrôle 656

Zone de texte, contrôle 658

Atelier vidéo Adobe 4

Attacher une feuille de style, icône 135

IN

DEX

682

Atteindre l'URL, action 340

attributs

Voir aussi code

modification avec l'inspecteur de balises 317

recherche 307

rendre dynamiques 539

valeurs de codage 299

attributs d'un objet multimédia

modification 260

attributs de balise modifiables

(modèles)

définition 387

modification dans les documents basés sur un modèle 396

rendre non modifiables 388

attributs HTML, liaison aux données 539

audio. Voir

son

autorisation, niveaux 633

autorisations

autorisations d'écriture sur les serveurs 55

création et destruction de fichiers temporaires 501

dépannage 499

dossier contenant une base de données 502

rôles de Contribute 58

sécurité 500

sur les serveurs 55 autorisations d'écriture sur les serveurs 55 autorisations de lecture sur les serveurs 55

avancée, boîte de dialogue Jeu d'enregistrements

arborescence Eléments de base de données 529

saisie de SQL 526, 528

Avertir à l'ouverture de fichiers en lecture seule, option 34 avertissement à l'ouverture d'un fichier en lecture seule 34

B

balise blockquote, application

balise code

balise d'en-tête

balise de lien href

balise de paragraphe

balise div, insertion

balise pre balise tt 36

36

36

229

135

229

157

230

balises

Voir aussi

code

ajout à une bibliothèque de balises 329

ASP 322

ASP.NET, importation 331

bibliothèques 328

CFML (ColdFusion markup)

chevauchement 289

317

code 36

côté serveur 469

fermeture 299, 301

imbriquées, combinaison 313

imbriquées, non valides 299

JRun, importation 331

JSP, importation 331

modification avec Quick Tag

Editor 318

modification avec un éditeur de balises 306

non valides 289

personnalisées, importation 330

pre 36

recherche

sélection

307

211, 320

suppression 308, 320

tt 36

vides, suppression 313

balises enfant, sélection 317

Balises head HTML

définition de liens vers la même cible 271

balises HTML, nettoyage 74

balises incorrectes, affichage

balises JRun 331

289

balises personnalisées, importation 330

balises vides, suppression 313

balises, conversion en espaces 308

Barré (couleur par défaut), bouton 215

barre d'état

à propos 17

définition du texte

(comportement) 345

préférences 25

redimensionnement de la fenêtre de document 18

Barre d'outils de codage 19, 303

barre d'outils de rendu de style

barre d'outils du document

20

15, 16 barre d'outils standard 15, 17

Barre de menus, widget

à propos 432

ajout et suppression de menus et de sous-menus 433

attribution d'attributs cible 434 création d'infobulles 434 désactivation des styles 434

insertion 433

liaison d'éléments de menu 434

modification de l'ordre des

éléments de menu 433

modification de l'orientation 434 modification du texte d'éléments de menu 434

personnalisation 435

barre de navigation

à propos 279 insertion 279

modification d'éléments 280

barre de navigation du jeu d'enregistrements

création 544 barre de navigation du jeu d'enregistrements, objet dynamique 544

barre Insertion

à propos 15

affichage des catégories sous forme d'onglets 27

catégories 18

insertion de code 305

utilisation 26

barres d'outils

affichage 26

codage 19, 303

document 16

Rendu de style 20

standard 17

base de connaissances Microsoft, articles 501

Base, propriétés 325

bases de données

à propos 472

affichage de données 469

autorisations, modification 499

connexions aux 476

fichier 470

jeux d'enregistrements 469

modification à l'aide de procédures stockées 625

MySQL 470, 491

pages d'insertion 604


pages de mise à jour, création 608


IN

DEX

683

pages de résultats 595

pages de résultats, création

pilotes 469, 472

600

procédures stockées 625, 626

relationnelles 473

requêtes 469

schémas et catalogues 514

sélection 470 serveur 470

stockage du contenu

tables 469

505

utilisation avec des applications

Web 466

verrouillées 501

bases de données relationnelles 473

Bloc, catégorie (style CSS)

blocs de code

128

instructions pour le codage 571

marqueurs de paramètres 569

positionnement

rédaction 562

565

blocs de mise en forme

affichage 159

et feuilles de style à la conception 160

insertion 157

préférences de surbrillance 159

blocs de mise en page

utilisation des balises Div 158

Boîte, options (définition des règles de CSS) 129

BOM 72

Bordure, options (définition des règles de CSS) 129

Bouton radio, contrôle 660

boutons

boutons Aller 341

insertion 573

boutons d'image 577

boutons radio 573

bureau, accès aux fichiers 81

C

C#, langage 471

cadres

à propos des 195

ajout d'attributs d'accessibilité 199

Cadres, panneau 200

changement du contenu avec des liens 204 ciblage 204

création 198

enregistrement 201

imbriqués 197

modification de la couleur d'arrière-plan 203

modifications des attributs d'accessibilité 202

navigateurs compatibles 205

planification de contenu avec

propriétés, définition 202

196

redimensionnement 199

sélection 200

suppression 199

utilisation avec les comportements 205

cadres de conception 196 cadres de planification 196

cadres, panneau 200

calques

copie depuis Photoshop 360

caractères incorrects dans les noms de comptes 502

Caractères masqués 296

caractères spéciaux

insertion 218

points d'interrogation dans les noms de champ 503

saut de ligne 230

caractères, valides dans les noms de comptes 502

carte du site

affichage 51

affichage des fichiers 52

affichage des fichiers dépendants 53

ajout de fichiers à un site 52

définition de la page d'accueil 50

enregistrement dans un fichier d'image 53

liens, utilisation 275

Lier au nouveau fichier, commande 52 masquage des fichiers 52

Mise en forme de la carte du site, catégorie 53

modification de la mise en forme 51

modification des liens dans 276 utilisation 276

utilisation de pages dans 49

cartes de site

définies 49

cartes graphiques

affichage dans un document 212

création côté client

présentation 280

281

sélection de plusieurs zones réactives 282

zones réactives 281

cartes graphiques côté client.

Voir cartes graphiques

cartes graphiques côté serveur 281

Case à cocher, contrôle 658

casse, modification 296, 308

Casse, option (définition des règles de

CSS) 126

catalogues, base de données 514

catégories, actifs 107

cellule d'en-tête, mise en forme

cellules de mise en forme

176

à propos 184

couleur d'arrière-plan 191

effacement des hauteurs 190

formatage 191

Pas de renvoi à la ligne auto, option 191

préférences 194


cellules de tableau

Voir aussi

cellules de mise en forme, tableaux de mise en forme

cellules d'en-tête, désignation 176 couleur d'arrière-plan et image, ajout 176

couper, copier et coller 182

fractionnement et fusion 171


cellules. Voir

cellules de mise en forme

CFML (ColdFusion Markup

Language) 470

débogage 180, 315

modification de balises CFML 317

CFML.

Voir ColdFusion Markup

Language chaînes de connexion

définition 485

OLE DB 494

champs de formulaire masqués

573

213,

champs de numérotation automatique, dépannage 503

champs de téléchargement de fichier 577

changement de nom

éléments de bibliothèque 114

fichiers et dossiers 78

groupes de panneaux 32

Changer la propriété, action 337

chemin d'accès virtuel 489

chemins

absolus 268

relatifs à la racine 269

relatifs au document 268

IN

DEX

684

chemins absolus 268

chemins d'accès

physiques 489

chemins relatifs 272

chemins relatifs à la racine

à propos

définition

269

272

chemins relatifs à la racine du site

Voir chemins relatifs à la racine chemins relatifs au document

à propos 268

définition 272

chevauchement de balises, dans le code 289

ciblage

liens 271

clés de connexion, exportation 58

codage

codage des entités 72, 211

types 36

code

affichage de la source 294

bibliothèques de balises 328

bibliothèques, fermeture 301

casse, modification 296

commentaires 306

comparaison de fichiers 93

comportements de serveur 293

copie et collage 306

correction automatique

écriture et modification

289

301

éditeurs de balises 306

éditeurs externes 300

encadrement d'une sélection à l'aide de Quick Tag Editor 319

environnement de codage, personnalisation 294

dans des fichiers externes

fragments 302

321

impression 310


langages, pris en charge

mise en retrait

288

296, 306, 309, 330

modification dans les modèles 373

navigation 307

nettoyage

non valide

313

288

numéros de ligne 296 options d'affichage 296

préférences de couleur 300

préférences de mise en forme 296

préférences de validation, définition 312

préférences, définition 296

recherche 307

réduction 310

Référence, panneau 309

renvoi à la ligne 296

section d'en-tête d'un document 322

sélection dans Contribute 542

XHTML 289

code HTML, généré par Word 73

code source

Voir aussi

code

copie et collage de Fireworks dans

Dreamweaver 356

mise à jour de code HTML

Fireworks dans

Dreamweaver 357

sélection dans la fenêtre de document 211

code, insertion

avec la barre Insertion

avec Quick Tag Editor

305

319

en mode Création 321

code, insertion de balises

avec le Sélecteur de balises

code, mise en retrait

330

305

296, 306, 309,

Code, mode

affichage 294

affichage d'un document basé sur un modèle 378

affichage des modèles 376

code, modification

avec Quick Tag Editor 319

inspecteur de balises 317 inspecteur Propriétés 317

ColdFusion

boutons 649

boutons radio 650 cases à cocher 650

champs de mot de passe

champs masqués 648

646

composants 636

composants, définition d'un jeu d'enregistrements 640 composants, jeu d’enregistrements comme source de données 640

composants, utilisation 637, 639


contrôles de formulaire, modification 655

formulaires 644

insertion de champs 652, 654

installation 477

langages utilisés avec 471


pages de connexion 630, 635

pages de mise à jour 608


pages de suppression 614

pages principale et de détails, création (ColdFusion, ASP, JSP et PHP) 594

pages utilisant des composants 639

pages, débogage 315

panneau Composants 639


sources de données, création 483

validation de données de formulaire 655

variables de client 519

zones de liste 651

zones de texte 648

ColdFusion MX 7, améliorations 644

collage

éléments de formulaire 299

collecte des données utilisateur

600

596,

coller

étapes de l'historique 671

Colonne Hyperlien (ASP.NET), boîte de dialogue 665

Colonnes mode Fichier, catégorie 83

colonnes, lignes et cellules

ajout et suppression 180

couleur d'arrière-plan, ajout 176

commande Enregistrer tout

commande source 88

217

commande source WebDAV 89

commandes

accès à partir du menu contextuel 29

création, à partir des étapes de l'historique 672 enregistrement 672

commentaires

ajout et suppression de balises de commentaires 308

insertion et modification 306

Commentaires, option 212

comparaison de fichiers 93

comportements

à propos 333

cadres, utilisation avec 205

compatibilité avec les navigateurs 336 créés par des développeurs tiers, installation 336

éléments de bibliothèque et 115

IN

DEX

685

formulaires, associer des comportements 583

images 244

JavaScript 333

liens, association 270

multimédia, ajout 266

utilisation 335

comportements de serveur

code 293

création 562

création de boîtes de dialogue 569

déplacement vers des enregistrements 545

installation d'autres 562


Mettre à jour l'enregistrement 611

modification des comportements personnalisés 570

régions répétées 547

test 571

comportements JavaScript 333

Comportements, panneau 333

composants

ColdFusion 636

composants Flash

modification des propriétés 250 utilisation 250

Composants, panneau 639

comptes, dépannage de la connexion

à un compte 502

compteur d'enregistrements, création 549

conditions requises, applications

Web 476

configuration 1

Connexion au serveur SQL, création 493

connexion aux bases de données 476

connexions à des sites Contribute, dépannage 59

connexions aux bases de données

ASP 484

chaînes de connexion 485

ColdFusion 483

JDBC 495

MySQL 491

paramètres OLE DB 494

PHP 491

connexions de base de données

ASP.NET

492

pour applications Web 476

connexions de bases de données

OLE DB 485, 492

contenu actif

conversion

dépannage

207

285 solution en cas de restriction 285

contenu dynamique

à propos de 517, 580

ajout dans les pages 537

attributs 539

boutons radio 582

cases à cocher de formulaire 581 champs de texte de formulaire 581

déroulement du travail pour 13

images 538

jeu d'enregistrements avancé, création 524

jeu d'enregistrements, création 521

jeux de résultats, à propos 517

liaison d'attributs HTML 540

menus de formulaire 580, 581

objets 540 remplacement 540

sélection dans Contribute 542

suppression 541

texte 538

contenu, ajout aux tableaux 171

Contribute

autorisations sur les serveurs 55

compatibilité avec, activation

contenu dynamique 542

57

définitions de sites, exportation 58

fichiers spéciaux, utilisation 56

fichiers, gestion 54, 55, 59 intégration à Dreamweaver 54

modèles 379, 392

paramètres administratifs, modification 58

restauration de fichiers 96

rôles, modification 58

sites, gestion avec

Dreamweaver

54, 57

structure du site, création 54

styles CSS 140

suivi des événements 57

URL racine du site, définition 57

Contribute Publishing Server

(CPS) 54, 57

Contrôler Shockwave ou Flash, action 338

contrôles ActiveX 264

contrôles de déplacement, création 339

contrôles de formulaire

ASP.NET

655

conversion des éléments PA en tableau 155

copie et collage

cellules de tableau 182

de Fireworks dans

Dreamweaver 360

copie et collage du code

réduction de code 312

copier et coller

actifs 110


côté serveur, inclusion 326

Couleur du texte, option 229

Couleur, option (définition des règles de CSS) 126

couleurs

ajout aux actifs 111

arrière-plan de la page 209

arrière-plan du cadre 203

code, préférences 300


actifs

nuanciers 214

par défaut pour le texte de la page 229

pipette, utilisation 214 sélection 214

texte, modification 230

Web sécurisées 214

Couleurs Web, palette de couleurs 215

courriel, fichiers 73

CPS (Contribute Publishing

Server) 57

créateur de comportements de serveur 562

Création, mode

affichage d'un document basé sur un modèle 377

affichage des modèles 376

sélection de balises enfant 317

Créer un album photos pour le Web, commande 357

Créer une image dans Fireworks, commande 353

CSS (feuilles de style en cascade)

conversion de styles CSS intégrés 135

déplacement des règles 134

mise à jour des règles dans un site

Contribute 140

panneau Styles CSS 22, 121

présentation 117

propriétés de la forme courte 120

rendu de style entre les navigateurs 137

suppression du style d'une sélection 133

IN

DEX

686

Curseur (pointeur), option 131

blocs de mise en forme CSS.

blocs de mise en forme

Voir

D

dans l'inspecteur Propriétés 28

dates

dépannage

insertion

502

233

débogage de pages ColdFusion 315

Débordement, option 130

déconnexion des utilisateurs 634

Décoration, option (définition des règles de CSS) 126

découpes

copie depuis Photoshop 360

défilement, image d'arrière-plan 128

Définir comme page d'accueil, commande 50

Définir couleur d'arrière-plan, option 74

Définir image barre de navigation, action 343

Définir le texte de la barre d'état, action 345

définition

document, propriétés 208

liste, propriétés 219

polices et modification des caractéristiques 231

propriétés de l'espace réservé pour l'image 238

propriétés de l'image 235

type par défaut d'un nouveau document 71

définition des propriétés de type

CSS 126

Définition du site, boîte de dialogue

Colonnes mode Fichier, catégorie 83

Design Notes, catégorie 99

Infos distantes, catégorie 41


Serveur d'évaluation, catégorie 46

définitions de styles (CSS)

balises et propriétés 128

bordures d'éléments 129 emplacement des éléments 129

extensions

listes 130

131

positionnement 130

type 126

Démarquer la région modifiable, commande 382

dépannage

à propos 480

archivage et extraction de sites

Contribute 59

autorisations 499

champ COUNT incorrect 503

clic dans les régions verrouillées 396

compatibilité avec Contribute, activation 57

Contribute 59

échec de la connexion

EOF erreur 504

501

erreur de correspondance entre les types de données 502

erreurs BOF 504

erreurs d'ODBC 503 erreurs de syntaxe

erreurs DSN 501

503

fichier en cours d'utilisation 501

fichiers verrouillés dans les sites

Contribute 59 liens, rompus, dans Contribute 59

messages d'erreur Microsoft

pages ne s'affichant pas 478

500

paramètres, insuffisants 502

PHP (Macintosh) 480

PHP (Windows) 478

plug-ins de Netscape

Navigator 264

requêtes pouvant être mises à jour 502

serveurs 473, 475

déplacement


fragments de code 312

Déplacement de calque, action 339

Déplacer vers un enregistrement, comportement 545

déroulement de travail du codage 13

déroulement du travail, présentation 12

déroulement du travail, rapports 102

déroulement, pages dynamiques

désactivation

515

Design Notes 99

voilage d'un site 96

désactivation du voilage

tous les dossiers et fichiers 98

Design Center 8

Design Notes

à propos 98, 99

activation et désactivation 99

ajout d'options d'état 100

configuration 99

enregistrement d'informations sur les fichiers 100

Infos de base, onglet 100

non associées, suppression 101

ouverture 100

pour les fichiers Fireworks ou

Flash 99

pour les fichiers Fireworks, Flash et

Photoshop 351

pour les fichiers Photoshop

360

359,

pour les objets multimédias 261

Toutes les infos, onglet 100

dessin

éléments PA 148

éléments PA imbriqués 149

destruction des fichiers temporaires, autorisations 501

détachement

documents de modèles 395

éléments de bibliothèque à rendre modifiables 115

détection de Adobe Flash Video, ajout et suppression 257 détection de Flash Player pour Flash

Video 257

Détourage, option 130

Device Central.

Voir

Adobe Device

Central

dictionnaires orthographiques 224

Director, création d'animations

Shockwave avec 262

disque local, accès aux fichiers 81

documents

affichage dans des onglets

(Macintosh) 32


application d'un modèle 394

création 67, 71

création d'un modèle vierge 68

création, basée sur un fichier de conception 71

création, basée sur un modèle 70

définition d'un type par défaut pour un nouveau document 71

définition des propriétés 208

Design Notes, utilisation 99

détachement d'un modèle 395

en cascade 24

enregistrement comme modèle 378

mosaïque 24

nettoyage de fichiers HTML

Word 73 ouverture d'autres types 73

recherche 220

IN

DEX

687

taille de téléchargement, temps 216

vérification des liens 282

documents Adobe FlashPaper, insertion 253

documents basés sur un modèle

en mode Code 378


joindre des modèles

modification

394, 395

396, 397

documents FlashPaper, insertion 253

documents liés, ouverture 277

documents Microsoft Word

collage 218, 224

importation 73 nettoyage de HTML 73

données tabulées, importation

225

172,

dossier distant

configuration 40

dépannage 45

structure 38

Dossier Favoris 112

dossier Legacy, pour fragments de code 302

dossier local, structure 38

dossiers 97 activation et désactivation du voilage 97

Favoris, pour les actifs 112

recherche

utilisation

220

78

Dreamweaver Exchange 562, 680

Dreamweaver. Voir

Adobe

Dreamweaver

DSN

connexions sans DSN

création de connexion

488

486

dépannage 501

DTD, fichiers 330

E

échecs de connexion, SQL Server 501

éditeur de la bibliothèque de balises 328

Editeurs de balises 306

éditeurs de texte

Voir aussi éditeurs externes définition 300

fichiers créés 73

éditeurs externes

définition de Photoshop pour les fichiers JPEG, GIF et PNG 361 définition de Photoshop pour les fichiers PSD 361

HTML 300

images 243

multimédias

préférences

260

300 texte 300

éditeurs HTML en mode texte. Voir

éditeurs externes.

éditeurs. Voir

éditeurs externes

édition

éléments de la bibliothèque 113

édition Roundtrip 351

HTML Roundtrip 289

effacement des largeurs de colonne 180

effets Spry

Agrandissement/Réduction 464

ajout d'un effet supplémentaire 465

Apparition/Fondu 463

Ecraser 465

Glisser vers le haut/Glisser vers le bas 465

Secouer 464

Store monté/Store baissé 463

suppression 465

Surligner 464

effets, avec Spry

élément PA

462

positionnement

éléments

150

alignement sur la grille

points d'ancrage 212

169

éléments de bibliothèque

à propos de 105

ajout à des pages 113

changement de nom 114

création 112

édition de comportements dans 115


actifs

préférences

propriétés

114

115

re-création 114

rendre modifiables dans les documents 115

éléments de bibliothèques

choix d'une autre couleur de surbrillance 114

éléments de la bibliothèque

édition 113

suppression 114

éléments invisibles

affichage et masquage

commentaires 306

211

préférences 212

scripts 321

sélection et visualisation 211

éléments multimédias

insertion 259

paramètres 266

éléments PA

à propos 146

affichage et définition des préférences 149

affichage et masquage des bordures 148

alignement 155

alignement sur la grille 169

conversion en tableaux 155 dans la conception d'un tableau 155

définis par les styles 130

déplaçables 340

déplacement 155

empêchement du chevauchement 156

imbriqués 148, 149

modification de l’ordre de superposition 153 modification de la visibilité à l'aide du panneau Eléments PA 153

modification de la visibilité avec des comportements 346

points d'ancrage 212

positionnement à l'aide de styles

CSS 130

préférences 157

propriétés pour plusieurs 151

propriétés pour un seul 150 propriétés, définition 150


sélection de plusieurs 151, 152

utilisation 147, 148

visibilité, modification 153

éléments, alignement 239

Empêcher le chevauchement des

éléments PA, commande 156

Emplacement, option 130

enregistrement

cartes de site 53

fichiers du cadre et du jeu de cadres 201

rapports 104

recherches 308

retour à la version précédemment enregistrée 217

enregistrement de commandes

enregistrement du logiciel 1

672

enregistrement, page 628

IN

DEX

688

enregistrements

affichage de plusieurs 547

création d'un compteur 549

insertion 604

liens de navigation 544

mise à jour 608

Enregistrer le chemin de l'élément

PA, commande 163

Enregistrer sous, commande 217

Ensembles de données XML Spry 455

environnements de travail, fenêtre

Live Data 552

Envoyer, boutons 573

Epaisseur, option (définition des règles de CSS) 126

équilibrage des accolades

erreurs d'ODBC 503

314

erreurs de syntaxe dans les instructions d'insertion 503

Espace blanc, option 128

espace de travail

à propos 13

enregistrement d'un agencement personnalisé

32, 33

présentation 32

présentation flottante 13

espace insécable, insertion 219

espace réservé pour l'image 238

Espacement des mots, option 128

espaces

conversion en balises 308

insertion d'espace insécable 219

espaces réservés pour images, modification dans

Fireworks 353

état de navigation du jeu d'enregistrements, objet dynamique 549

événements

à propos 333

déclenchement d'actions 335

disponibles pour différents navigateurs et objets 334

modification dans les comportements 335

suivi 57

Excel. Voir

Fichiers Microsoft Excel

exemples d'applications Web

exportation

466

clés de connexion de Contribute 58

données d'un tableau 172

enregistrement d'images

Photoshop optimisées 363

sites 48

Exporter tableau, commande 173

expressions de modèle 374

expressions régulières 291

extension automatique (mode Mise en forme) 186

Extension Manager 680

extension, comportements créés par des développeurs tiers 336

extensions

création 562

gestion 680

installation 562

externes, feuilles de style

création 135 création d'un lien vers 135

extraction de données des bases de données 469

Extras 6

F

fenêtre de document

affichage du code

agrandissement

23

216

barre d'état 17

barre de titre 16 concepts de base 16, 23

lecture des plug-ins de

Navigator 263

recherche de texte 220


sélecteur de balises 18

sélection d'éléments 211

Taille de fenêtre, menu contextuel 18 taille de la page et temps de téléchargement 18

zoom 215

fenêtre du site, recherche de texte 220

fermeture 301

feuilles de style

à la conception, utilisation 139

externes 135

modification 131

Modifier feuille de style, boîte de dialogue 136

feuilles de style à la conception, utilisation 139

feuilles de style en cascade (CSS)

création de règles 126 définition des propriétés 126

définition des propriétés d'arrièreplan 127

mise en forme de code à l'aide de règles CSS 136

mises en page, création 67, 145

préférences, définition 125 règles de la forme courte 125

utilisation de règles (de classe) 133

feuilles de style externes

modification 131

fichier SWF

modification dans Flash depuis

Dreamweaver 366

fichiers

accès sur des serveurs 81 accès sur des sites Dreamweaver 81 accès sur un disque local ou le bureau 81

activation et désactivation du voilage 97

changement de nom 78

comparaison 93

dépendants 82

déplacement 78


déverrouillage dans les sites

Contribute 59

diffs 93

éditeurs, préférences 300

extension, définition 72

gestion dans les sites Contribute 54

localiser 79, 80

non utilisés, recherche 80

ouverture 73, 78

ouverture en mode Code 295

placement 86

poursuite des activités pendant le transfert 84

recherche 220

restauration 96

suppression 78

synchronisation des sites locaux et distants 91

téléchargement 85

temporaires 501

texte 73

transfert 41, 42, 63, 64, 86

transfert avec WebDAV 42, 63, 64

transferts en arrière-plan 87

fichiers autres que HTML, ouverture 295

fichiers de conception 71

fichiers de paramètres partagés dans les sites Contribute 56

fichiers dépendants 52, 82, 84

Fichiers DTD (Document Type

Definition) 330

fichiers Flash SWF


actifs

fichiers masqués, affichage et masquage 52

IN

DEX

689

fichiers Microsoft Excel, importation 172

fichiers orphelins 80, 282

fichiers source PSD

modification depuis

Dreamweaver 361

fichiers SWF

mise à jour des liens 366

fichiers SWF Flash

Voir aussi Adobe Flash

fichiers temporaires, restrictions d'autorisation 501

fichiers tld 331

Fichiers, panneau

actualisation 79

cartes de site 49

déplacement de fichiers et de dossiers 78

Fichiers du site, vue 75

fichiers, affichage 76

Journal, bouton 88

modification de l'affichage 77

modification de l'affichage et de l'ordre des colonnes 83

options de la barre d'outils 75

ouverture de fichiers 78

ouverture et fermeture 76

préférences 82

recherche de fichiers 79

réduction et développement 76

utilisation de fichiers et de dossiers 78

films, insertion 259

filtre, jeu d'enregistrements

filtres

522

définition d'un style CSS 131

Fireworks.

Voir

Adobe Fireworks

Fireworks.

Voir

Adobe Fireworks

Flash SWF, fichiers

contrôle 338

insertion 246 propriétés 246

Flash Video. Voir

Adobe Flash Video

Flash Voir

Adobe Flash

Flash, contenu

à propos 245

Design Notes 99

Flash, objets bouton

modification 247 propriétés 247

Flash, objets texte

insertion et aperçu 249

propriétés 247

Flottante, option, style CSS 129

flux de conception, utilisation avec

Spry 457, 458

fonctions, affichage 307

formats de données

prédéfinis 551 utilisation de styles prédéfinis 551

formats de fichier, image 233

formulaire

JavaScript, utilisation 583

Formulaire CF 645

formulaire de mise à jour des enregistrements, objet de données 611

Formulaire de normalisation

Unicode 72

formulaires

à propos 572

à propos des objets dynamiques 580

accessibilité 584

ajout à un document 574

ASP.NET

655

boutons 573 boutons radio 573

boutons radio dynamiques 582

cases à cocher dynamiques 581

champs d'image 577

champs de fichier

champs de texte

574, 577

573

champs de texte dynamiques 581

champs masqués 573

champs, validation

ColdFusion 644

349

contrôles, ColdFusion

création 574

646

délimitation des bordures des

éléments 213

insertion ou modification d'objets dynamiques 580

menus de liste 574

menus de reroutage, création 277

menus dynamiques 580, 581

renommer les éléments lors du collage 299

scripts côté client 583

scripts côté serveur 572

utilisation pour collecter des données

596, 600

validation de formulaires

ColdFusion 655

validation HTML 583

Formulaires HTML. Voir

formulaire fragments

panneau Fragments de code 302

fragments de code

création de raccourcis clavier 303

dossier Legacy 302

Fragments de code, panneau 302

FTP

acquisition et placement de fichiers 84

dépannage 45

journal 85, 86

préférences 82

Utiliser FTP Passif, option 42

FTP passif, option 42

Fusionner les cellules, commande 181

G

gestionnaires d'événement.

Voir

événements

GIF, images

utilisation 233

glossaire de termes courants relatifs aux applications Web 472

GoLive

migration de sites 23

graphiques. Voir

image

gras, mise en forme du texte en 231

grille

affichage et masquage 169

grilles

alignement des éléments sur 169

guides visuels 23

guides visuels

à propos 22

règles 169 tracés d'image 169

H

Haut, alignement 239

hauteur de ligne 126

HTML

Voir aussi code

attributs, rapports 102

attributs, rendre dynamiques 539

code source, recherche 220

conversion en XHTML 315

définition de l'extension de fichier 72

édition Roundtrip 289

espace insécable 219

insertion et mise en forme 218

langages de programmation intégrés 470

HTML Word

suppression 74

IN

DEX

690

HTTP, serveurs. Voir aussi

serveurs

Hyperlien, boîte de dialogue 272

I

IIS (Internet Information Services), installation 475

Illustration de la puce, option 130

image Web

à propos 364

images

à propos de 233

ajout à un scénario

alignement 230

164

application de comportements 244

cartes graphiques 280

changement des fichiers sources avec les scénarios 164


actifs

extensibilité 240

formats, pris en charge 233

insertion 234

insertion depuis Fireworks

insertion depuis Photoshop

352

359

insertion en mode Mise en forme 189

luminosité et contraste 241

modification avec l'éditeur externe 243

optimisation à l'aide de

Fireworks

241, 353

optimisation d'images

Photoshop

359, 360, 362

permutation et restauration des images interverties

(comportement) 349

préchargement

(comportement) 343

propriétés 235

recadrage 241

rééchantillonnage

rendre dynamiques

240

538

renforcement 241

images bitmap

Voir aussi images redimensionnement 240

images GIF

comme tracé d'image 169

images JPEG


images PNG


images Web

modification dans Photoshop 361

images-clés

création 162

imbriqué

tableaux 183

Imbriquer en cas de création dans une div PA, option 157

imbriqués

éléments PA 148

éléments PA, préférences 149, 157

jeux de cadres, à propos

modèles, création 389

197

modèles, présentation 388

modèles, utilisation 389

Importation

fichiers Microsoft Word 73

importation

balises ASP.NET

331 balises JSP 331

balises personnalisées 330

balises JRun 331

données tabulaires 172, 225

feuille de style CSS externe

sites 48

135

texte à partir d'autres documents 225

Importer les données tabulaires, commande 172

Impression, code 310

inclusion de fichier côté serveur 326 inclusion virtuelle côté serveur

inclusions côté serveur

326

à propos 326

changement de type 327 changement de type (virtuel ou fichier) 327 insertion et modification 327

InDesign. Voir

Adobe InDesign

Index Z, option (pour les éléments

PA)

définition de style 130

modification de l'ordre de superposition 153

indicateurs de code

à propos 301

bibliothèques de balises 328

préférences 298

Quick Tag Editor 319

Infos de base, onglet (Design

Notes) 100

Infos distantes, catégorie

Insertion

41

inclusions côté serveur 327

insertion

actifs 108

animations Shockwave 262

balises div 157

balises head HTML 271

caractères spéciaux 218

commentaires 306

contrôles ActiveX 264

dates 233


éléments multimédias 259

éléments PA imbriqués 149

espaces réservés pour images 237

fichiers Flash SWF 246

Flash, objets texte

images 234

249

images Fireworks 352

images Photoshop 359

images survolées 242

Messagerie, liens 274

pages 604

Shockwave, animations 246

Inspecteur de balises 317

Inspecteur de code 294

définition des polices par défaut 36

Inspecteur Propriétés

affichage 28

rendre les attributs HTML dynamiques 539

inspecteur Propriétés

correction des liens rompus 284

définitions des propriétés d'une image 235


modification d'un jeu d'enregistrements 540, 541

modification de code 317

propriétés d'un contrôle

ActiveX 264

propriétés d'une animation

Shockwave 246

propriétés d'une applet Java 265

propriétés de Flash 246

propriétés des éléments de bibliothèque 115

propriétés des plug-ins Netscape

Navigator 262

inspecteurs

Inspecteur de balises 317

installation, IIS (Internet

Information Services) 475


instructions préparées, JSP 624

intégration d'applications, à d'autres logiciels Adobe 351

intégration Device Central

Dreamweaver 369

Interligne (hauteur de ligne) 126

IN

DEX

691

J

JAR, fichiers 331

Java, applets

insertion

Java, et JSP

259, 265

471

JavaScript 471

actions 334

alertes 342

comportement des menus contextuels 346

exécution 336

fichiers 73

insertion de code en mode

Création 321

liaison à des objets de formulaire 583 traitement des données de formulaire 583

JavaServer Pages.

Voir JSP

JDBC

paramètres de connexion 495

pilotes 496

JDBC-ODBC Bridge de Sun, pilote 497

jeu d'enregistrements, à propos 517

Jeu d'enregistrements, boîte de dialogue

avancée 524

simplifiée 521

jeu de résultats, JSP 517

jeux d'enregistrement

modification ou suppression

jeux d'enregistrements

536

Voir aussi bases de données


copier et coller 537

définition sans SQL

exemple 472

521

limite du nombre d'enregistrements 522

mise en mémoire cache 536

simples, création 521

SQL, rédaction d'instructions personnalisées 524

vide, dépannage 504

Internet Explorer

contenu actif 207

contenu restreint 285

Internet Protocol, version 6 (IPv6) 42

ISP 488

italique, mise en forme du texte

231

jeux de cadres

à propos des 195

Voir aussi cadres

affectation d'un nom 202

ciblage des liens 270

enregistrement

imbriqués 197

201

propriétés 203

sélection 200

journal

activité réseau 57

transferts de fichiers 88

JPEG, images

utilisation

JRun 331, 481

233

JSP (Java Server Pages)

comportement de serveur

Appelable 627

connexions ODBC 497

importation de balises

instructions préparées

331

623, 624

JavaBeans 642

jeux de résultats, à propos 517


pages de connexion, création 630


pages principale et de détails, création 594

pilotes JDBC 496



technologie de serveur 471

variables JSP 534

L

langages

langages de script côté serveur

langages pris en charge

largeurs de colonne

lecteurs d'écran, Window-Eyes et

JAWS pour Windows 675

lecture d'objets Flash

lecture en boucle de scénarios

liaison

côté serveur

référence 309

470, 471

pris en charge par

Dreamweaver

effacement 179

288

288

249

471

163

à des feuilles de style externes

ancres 273 vers une ancre nommée avec l'icône du pointeur 273

135

documents avec l'icône du pointeur 271

documents 270

vers une feuille de style CSS externe 135

navigation 267

Liaisons de données, propriétés 493

Liaisons, panneau

affichage d'éléments Spry intégrés

459, 461

ajout de texte dynamique 538

colonne Format 551

création d'un compteur d'enregistrements 550

rendre les attributs HTML dynamiques 539

rendre les formulaires dynamiques 580

suppression de sources de données 536

Lien de messagerie, boîte de dialogue 274

liens

vers des ancres 273

carte du site 275

ciblage 270

correction des liens rompus 283

création de liens nuls 274

définition de chemins relatifs 272

vers des feuilles de style 135

fichier cache 275

fichiers de la carte du site 52

mise à jour 275

modification au niveau du site 276

modification des cadres avec 204

ouverture de la source 275

Relatifs à la racine du site, option 270

Relatifs au document, option 270

rompus, recherche 282

sensibles à la casse 41

suppression 275

vérification 282

vers des documents Microsoft

Word ou Excel 226

liens actifs, option de couleur

(Propriétés de la page) 229

liens de courriel

insertion 274

liens de messagerie

création 274

modification 276

liens de navigation pour les enregistrements, définition 544

IN

DEX

692

liens de script

création 274

modification 276

liens externes 282

liens nuls

création 274

modification 276

liens relatifs, définition vers la même cible 271

liens rompus 282

liens visités, option de couleur 229 liens, définition de la couleur

(Propriétés de la page) 229

Ligne de base, alignement 239

ligne, renvoi en mode Code 296

lignes et colonnes, ajout et suppression 180

liens

vers des fichiers de script 321

links

propriétés 325

Lire le son, action 342

Liste de boutons radio, contrôle 660

Liste déroulante, contrôle 656

liste Favoris (panneau Actifs)

à propos de 107 affichage 107

ajout d'une couleur ajout d'une URL 111

111 ajout et suppression d'actifs 111

création d'un dossier Favoris 112 création de surnoms pour

liste Site (panneau Actifs)

112

à propos de 107

actualisation 108

affichage

listes

107

création 219

définition de styles 130

listes déroulantes

Live Data, fenêtre

574

à propos 541

Actualisation automatique 555

affichage 553

fichiers manquants 554 fourniture des paramètres attendus 554

paramètres d'URL sur la barre d'outils 541, 555

LiveDocs 1

localhost 473

logiciel

activation 1 enregistrement 1

logiciels, téléchargement 9

M

Mac OS, options de couleurs 215

Macintosh

accessibilité 675

documents en onglets

serveurs 475

32

macros, création de commandes 672

Map, balise 281

Marge, option (définition des règles de CSS) 129

Mark of the Web, code

marquage. Voir

code

285

marqueurs pour les éléments invisibles 211

masquage et affichage


menus contextuels 348

MDAC (Microsoft Data Access

Components) 493

menu d'en-têtes de colonne

suppression d'une image d'espacement 194

menu d'en-têtes de tableau

effacer les hauteurs et les largeurs 180

Supprimer toutes les images d'espacement 194

Uniformiser toutes les largeurs 179, 194

menu déroulant, objets de formulaire 574

menu des en-têtes de colonne

à propos

affichage

170

180, 185 insertion de colonnes 180

largeur des colonnes, définition 193 modification de l'espacement 193

Sélectionner la colonne 174

menu des en-têtes de tableau

à propos 170

affichage 180, 185

sélection d'éléments d'un tableau 174

Menu Options, pour les groupes de panneaux 30

menus contextuels 29

comportement JavaScript 346

Fireworks 346, 348, 354

formulaires HTML 574

menus d'indicateurs de code 301

menus de raccourcis. Voir

menus contextuels menus de reroutage

à propos 574

Aller, boutons 277, 341 création d'un message de sélection pour 277 insertion 277

modification 341

modification d'éléments de menu 278

Message contextuel, action 342

messages d'erreur

Voir aussi dépannage

fichier en cours d'utilisation 501

Microsoft, dépannage 500 messages d'erreur Microsoft, dépannage 500

Mettre à jour l'enregistrement 611

Mettre à jour la page en cours, commande 113, 392

Mettre à jour le code HTML, commande dans Fireworks 357

Mettre à jour les liens lors de la suppression de fichiers, option 34

Mettre à jour les pages, commande 392

Microsoft Access

base de données fichier 470

fichiers de base de données verrouillés 501

Microsoft IIS 480

Microsoft Personal Web Server

(PWS) 473

Microsoft SQL Server 470

Microsoft, support technique 500

migration de sites GoLive 23

mise à jour de modèles 392

mise en forme

code, préférences 296

tableaux et cellules 175, 177

texte, avec CSS et HTML 228


mise en forme, planification.

Voir

Mode Mise en forme

mise en mémoire cache des sources de données 536

mise en page. Voir

Mode Mise en forme

mises à jour 9

mode Code

affichage avec le mode Création 16

basculement en mode Création 23

IN

DEX

693

écriture et modification du code 301

ouverture de fichiers non

HTML 295

mode Création

actualisation 294 affichage avec le mode Code 294

basculement en mode Code 23

JavaScript, insertion 321

VBScript, insertion

mode Mise en forme

321

à propos des cellules et des tableaux de mise en forme 184

ajout de contenu 189

basculement entre le mode

Standard et un autre mode 187

définition de la largeur 186

effacement des hauteurs de cellules 190

espacement des cellules

extension automatique

191

186 images d'espacement, préférences 186 largeur fixe 186

menu des en-têtes de colonne 193

préférences 194

redimensionnement et déplacement de cellules et tableaux de mise en forme, utilisation 190

redimensionnement et déplacement des cellules et des tableaux de mise en forme 191 suppression de l'imbrication 191 suppression des images d'espacement 191

tableaux de mise en forme imbriqués 188

uniformiser la largeur des cellules 191

mode Standard

à propos 170

dans l'inspecteur Propriétés 539

mode Tableaux développés 177

Modèle d'objet d'expression

(modèles) 375

modèle de syntaxe de balise 398, 399

Modèles

à propos des 371

modèles

Actifs, panneau 379

annulation de l'application 395

application à un document existant 394

attributs de balise modifiables

388

387,


en mode Code 376

contenu XML

création 378

393

création pour les sites

Contribute 379


détachement d'un document

395


actifs

expressions

imbriqués

374

388, 389

mise à jour de documents 392 mise à jour de sites Contribute 392

modification 391

modification de code 373 modification de scripts de serveur 373

modification des couleurs de surbrillance de région 400

modification des propriétés dans les documents basés sur un modèle 396

modification du nom 391

paramètres 373

préférences 399, 400

recherche des régions modifiables 382

région facultative 385, 386

régions modifiables 381, 382

régions répétées 372, 383, 397

rendre une région non modifiable 382

suppressions 393

syntaxe des balises

tableaux répétés

398

383, 384

types de régions 371

vérification de la syntaxe 399

modèles de mise en forme, pour formater des tableaux 175, 177

modèles de serveur.

Voir technologies de serveur modes

mode Mise en forme 184

mode Standard 170

mode Tableaux développés 177

modification 536

ASP.NET, contrôles de formulaire 656

bases de données, à l'aide de procédures stockées 626

code 301

comportements de serveur 570

contenu sans cadres 205

feuilles de style CSS 136

feuilles de style, externes 131

fichiers d'un site Dreamweaver

fichiers PSD Photoshop 361

81 fichiers sur un serveur 81

Flash, objets bouton 247

formats de données 551


listes de polices 232

modèles 391

objet multimédia, attributs 260

raccourcis clavier 678

sites 39

sites Web, site distant existant 48

sites Web, site local existant 40

sources de données 536

modification dans Photoshop depuis

Dreamweaver 361

Modifier le lien au niveau du site, boîte de dialogue 276

Modifier le lien au niveau du site, commande 276

mosaïque de documents 24

Mot entier, option 221

mots de passe

définition par l'utilisateur 629

incorrects 502

stockage 629

vérification pendant l'ouverture de session 631

mots, renvoi à la ligne 296

mots-clés

définition 324

multimédia. Voir

éléments multimédias

MySQL

base de données pour PHP 491

base de données serveur 470

N

navigateurs

aperçu 285

compatibilité, avec les cadres 205

couleurs, sécurisées pour le

Web 214

principal, définition 286

versions, vérification 337

navigation au sein du code 307

Navigation dans le code, bouton 307

Netscape Enterprise Server 473

Netscape Navigator 4

compatibilité avec les éléments

149

compatibilité des éléments PA 157

Nettoyage du HTML Word, commande 73

IN

DEX

694

O

objet XSLT Région répétée 412, 414

objets

affichage de la boîte de dialogue lors de l'insertion 34

ajout à un scénario 162

ajout à une bibliothèque 112

insertion à l'aide de la barre

Insertion 26

rendre dynamiques 540 objets ActiveX 540

objets de commande, ASP

objets de données

622

Formulaire de mise à jour des enregistrements 611

objets de serveur

variables ColdFusion 519

variables d'application

variables de session 531

532

objets dynamiques

compteurs de jeu d'enregistrement 549

liens de navigation dans le jeu d'enregistrements 544

Objets Flash, rendre dynamiques 540

Objets Generator, rendre dynamiques 540

Objets Shockwave, rendre dynamiques 540

OLE DB

connexions 485

obtention d'un fournisseur 492

OLE DB Microsoft, fournisseurs 493

OLE DB Oracle, fournisseurs

onBlur, événement 349

493

optimisation d'images

à l'aide de Fireworks 353

à l'aide de Photoshop

aperçu 362

363

Nom de la source de données. Voir

DSN noms d'utilisateur

définition par l'utilisateur stockage 629

629

vérification de l'unicité 630

vérification pendant l'ouverture de session 631

Nuances de gris, option 215

nuanciers, couleurs

numéro IP 127.0.0.1

214

474

numéros de ligne dans le code 296 numérotation des lignes de code 296

images Photoshop pour le

Web

359, 360, 362

paramètres pour les images

Photoshop 362

option d'accès à la base de données

SourceSafe

42, 63, 64

option d'accès WebDAV 42, 63, 64

option Lecture auto (panneau

Scénarios) 162

Option Spry de mise en cache

XML 458

options d'accès, transfert de fichiers avec

base de données SourceSafe

64

42, 63,

FTP 41, 63, 64

Local/Réseau 42, 63, 64

WebDAV 42, 63, 64

options d'affichage

polices 36

options d'aperçu d'image, optimisation des images

Photoshop

359, 360, 363

options d'orthographe, définition 224

Oracle 9i, base de données 470

Oracle Thin, pilote 495

ordre de superposition

éléments PA 153

modification à l'aide d'un scénario 164

orthographe, vérification à l'aide de la commande Orthographe 125,

224

Outil Main

Outil Zoom

18, 215

215

outils diff 93

ouverture

documents existants

documents liés 277

73

fichiers 78

fichiers non HTML 295

fichiers texte 73

panneau Actifs 106

site Dreamweaver 81

Ouvrir et Modifier, préférences dans

Fireworks 355

Ouvrir la fenêtre Navigateur, action 342

Ouvrir la page liée, commande 277

Ouvrir le modèle attaché, commande 392

P

page d'accueil, définition pour une carte de site 50

pages

affichage de données des bases de données 469

affichage de données XML 411

ajout de contenu, déroulement du travail pour 12


couleurs par défaut du texte 229


dynamiques 466, 468, 470

dynamiques, déroulement du travail pour la création 13

enregistrement des utilisateurs 628

image ou couleur d'arrière-plan, définition 209

insertion, création 604

leur mise en forme, déroulement du travail pour 12

mise à jour d’enregistrements, création 608

redimensionnement en fonction du moniteur 24

restrictions d'accès 632

statiques 467

téléchargement, définition des préférences de durée et de taille 216

XHTML, création 315

pages de connexion

ColdFusion 635

création 630

pages de mise à jour, création

ColdFusion 608

pages de recherche, création

ASP 595

ASP.NET

600

ColdFusion 595

JSP 595

PHP 595

pages de suppression, création

ColdFusion 614

pages dynamiques

à propos 472

utilisation 468, 470

pages principale et de détails, création

(ColdFusion, ASP, JSP et

PHP) 594

pages statiques 467

Voir aussi pages

pages Web, enregistrement et retour

à la version d'origine 217

pages Web.

Voir pages

IN

DEX

695

panneau

Actifs, catégorie Modèles

panneau Actifs

379

ouverture 106

utilisation 107

Panneau Eléments PA

panneau Historique

152

commandes, création à partir des

étapes de l'historique 672

étapes, copier et coller 671

liste des actions, effacement 669 maximum d'étapes, définition

présentation 668

669

Panneau réductible, widget

à propos 437

activation de l'animation 438

définition de l'état par défaut 437 insertion 437 ouverture et fermeture 437

personnalisation

panneaux

438

Actifs 107

Cadres 200

Comportements 333

enregistrement d'un agencement personnalisé

32, 33

Fichiers 75

groupes de panneaux 15

Panneaux à onglet, widget

à propos 439

ajout de panneaux 440 définition du panneau ouvert par défaut 440 insertion 440 modification de l'ordre des panneaux 440 ouverture de panneaux à modifier 440 personnalisation 440 suppression de panneaux 440

panneaux flottants, combinaison 29

panneaux, couleurs

paragraphes

214

ajout d'un saut de ligne

mise en forme 229

230

paramètre

couleur du code 399

paramètres

définition dans une instruction

SQL 528

marqueurs 569

modèles 373

nombre insuffisant (erreur

SQL) 502

pour le contrôle d'éléments multimédias 266

rendre dynamique 540

paramètres de connexion, JDBC

paramètres de modèle

495

modification dans les documents basés sur un modèle 397

présentation 373

Paramètres Live Data, boîte de dialogue 554

pare-feu

définition pour l'hôte et le port

options 43, 60

82

périphériques mobiles

optimisation de contenu

Dreamweaver pour 369

Perl, fonctionnalités prises en charge 288

Permuter une image, action 349

personnalisation, environnement de codage 294

photographies 233

Photoshop. Voir

Adobe Photoshop

Photoshop.

Voir

Adobe Photoshop

PHP


dépannage (Macintosh)

dépannage (Windows)

480

478

installation de PHP 477

Mac OS X 477

pages d'insertion 604


pages de recherche 595

pages principale et de détails 594

technologie de serveur 471

pilotes pour bases de données

472

469,

pilotes, non spécifiés 501

pipette 214

pixels, transparents dans l'arrièreplan 209

placement des fichiers 86

Placer, commande

plug-ins 6

86

Adobe Store 9

dépannage 264

lecture dans la fenêtre de document 263

Netscape Navigator

rendre dynamiques

262

540

vérification 338

plug-ins de Netscape Navigator

dépannage 264

lecture dans la fenêtre de document 263

plug-ins Netscape Navigator

propriétés 262

PNG, images

utilisation 233

pointeur, modification de l'image 131

Points d'ancrage des calques, option 213

Points d'ancrage des éléments flottants, option 213

points d'interrogation, dans les champs de base de données 503

Police fixe, option 36

polices

codages, paramétrage des polices 36

modification des combinaisons 232

modification des styles 231

paramètres de base 126

préférences de codage 36 préférences, définition 36

positionnement

blocs de code 565

définition de styles 130

éléments de liste 130

Précharger les images, action

Préférences

343

site 82

préférences

Barre d'état 25

code 296, 298, 300

dictionnaire pour vérifier l'orthographe 125, 224

éditeurs externes 261


éléments PA 149, 157

générales 34

mise à jour des liens 275

mode Code 296

mode Mise en forme 194

modèle 400

modification de la surbrillance 159

nouveau document 71

Polices/Codage 36

styles CSS 125

surbrillance, bibliothèques 114

surbrillance, régions de modèle 400

surbrillance,blocs de mise en forme 159

IN

DEX

696

surbrillance,cellules de mise en forme 188

types de fichiers/éditeurs 261, 300

validateur 312

préférences d'un nouveau document 71

Préférences de Coloration du code des modèles 399

préférences de surbrillance

blocs de contenu 159

cellules de mise en forme 188

éléments de bibliothèque

tableaux 175

114

préférences de transfert des fichiers 82

Préférences générales 34

Préfixe de l'URL 47

privilèges d'accès

ajout à des pages 633

stockage dans une base de données 634

procédures stockées

à propos 624

ASP 627

ASP.NET

626

ColdFusion 625

JSP 627

modification de bases de données 625, 626

programme de validation de balises 314

proportion, conservation

propriétés

240

affichage 28

applets Java 265

cadre et jeu de cadres 202, 203

cellules et tableaux de mise en forme 191

changement avec les comportements 337

contrôle ActiveX 264

document basé sur un modèle 396

document, paramétrage 208



Flash 246

image 235

plusieurs éléments PA

Shockwave 246

151

tableau 175, 177

un seul élément PA 150

propriétés de bloc, définition

propriétés de bordure 129

128

propriétés de description, définition de la recherche 324

propriétés de l'espace réservé pour l'image 238

propriétés des balises META 323

propriétés des listes 130, 219

Propriétés du modèle, boîte de dialogue 397

PWS (Microsoft Personal Web

Server) 473

Q

Quick Tag Editor

menus d'indication

ouverture 318

319

QuickTime, animations

insertion 263

R

raccourcis clavier

dans l'aide 3

et claviers non-U.S.

680

modification et affichage 678

raccourcis de navigation

rapports

3

affichage 104 enregistrement 104

exécution 102 pour sites 102

validation de code

recherche

314

balises et attributs 307 code 307

enregistrement de modèles de recherche 308

expressions régulières

fichiers 220

291

recherche et remplacement 220 texte dans des fichiers 220

recherche des fichiers non utilisés 80

recherche et remplacement. Voir

recherche

Rechercher dans, options 221

Rechercher, options 221

rédaction de code 301, 562

redimensionnement

cadres 199

cellules de tableau 178


éléments PA 154

éléments, utilisation des poignées 240

réduction du code 310, 311, 312

réduction intelligente, fonctionnalité 311

réécriture du code 289, 299

référence, panneau 309

Refresh, propriétés 324

Région répétée, comportement 547

régions


régions de détail dans Spry 456, 458

régions facultatives (modèles)

définition des options 386

insertion 385

modification 386

régions modifiables (modèles)

contrôle dans les modèles imbriqués 389

création 381

modification du nom 382 utilisation 382

régions principale et de détail dans

Spry 456

régions répétées (modèles)

affichage 405

dans les documents basés sur un modèle 397

couleurs alternées 384

création 383

définies 372

tableau répété 383

régions verrouillées, clic dans 396

règles

à propos 169


règles horizontales, insertion et modification 231

remplacement d'un espace réservé pour une image 239

Remplissage, option (définition des règles de CSS) 129

renvoi à la ligne en mode Code 296

repères

utilisation avec des modèles 168

utilisation pour la mise en forme 167

répertoire virtuel 47

Répéter, option 127

requêtes

base de données 469

dépannage de SQL 502

ressources en ligne 6

restauration de fichiers 96

Restaurer l'image intervertie, action 349

restriction des accès au site 628

restriction des tableaux 514

Résultats, groupe de panneaux

panneau Validation 314

IN

DEX

697

S

Saut de page, option 131

sauts de ligne, préférence d'éléments invisibles 212

sauts de page, définition 131

scénarios

ajout d'objets 162

ajout et suppression d'images 163

changement du fichier source des images 164

chemins complexes 163

conseils relatifs aux animations 166

création 162 images-clés 162

lecture automatique 163 lecture en boucle 163 modification 163

modification des propriétés d'un

élément PA 164

modification du nom 166

multiples 164

schémas 330, 514

Script, options de la boîte de dialogue 321

scripts

accolades, vérification de l’équilibrage 314

affichage dans un document 212

affichage des fonctions 307

création de liens de script 274


actifs

insertion 321 liaison de fichiers externes 321 modification 321

scripts de connexion

suppression 504

scripts de serveur, dans les modèles 373

scripts, côté serveur 469

Scripts, option 212

résultats, pages de 595

Rétablir origine, commande

Rétablir, commande 217

169

retour à la version précédemment enregistrée 217

retour, ajout d'un paragraphe 230

réutilisation

actifs

code

110

302


recherches 308

Rouvrir les documents au démarrage, option 34

section head, affichage et modification 322

sécurité

autorisations d'accès à la base de données, définition 500

protection d'un dossier par mot de passe 635


insertion de balises 305

sélecteur de balises 15, 320

sélecteur de couleur

Dreamweaver

Mac OS 215

214

option pour Windows 215 système 215

Ton continu, option utilisation 215

215 sélecteur de couleur système

sélecteur de couleurs

215

Nuances de gris, option

sélection

215

balises 320

cadres 204

cadres et jeux de cadres 200


éléments de tableau 173

éléments PA 152

objets dans la fenêtre de document 211

plusieurs actifs 109

Sélectionner distants plus récents, commande 91

sensibles à la casse, liens 41

serveur d'application Jakarta Tomcat

(JSP) 481

Serveur d'application JRun 481

serveur d'évaluation

configuration 476

Serveur d'évaluation, catégorie 46

Serveur Web Apache sur Mac OS

475

serveurs

à propos 473

Voir aussi

serveurs Web, serveurs d'application

adresses IP 474

AppleTalk

dépannage

42, 63, 64

475

dépannage du dossier distant 45

HTTP 473

NFS 42, 63, 64

ouverture d'une connexion existante 81


serveurs Web, définis 473

téléchargement de pages 577

test 475

serveurs AppleTalk 42, 63, 64

serveurs d'application

à propos 468

configuration 476

serveurs HTTP 474

serveurs NFS 42, 63, 64

serveurs Web 473

Voir aussi serveurs, serveurs

d'application services Web

à propos 556

ajouter à une page 560

déroulement du travail 556

générateurs de proxy AXIS 558 générateurs de proxy, autres 558 générateurs de proxy, configuration 558 générateurs de proxy, installation 558

liste des sites UDDI, modification 560

répertoires UDDI 557

SOAP 557

SGBD.

Voir Systèmes de gestion de bases de données

Shockwave, animations

contrôle 338

insertion 246

Site Dreamweaver. Voir

sites 38

sites

actifs, réutilisation 110

affichage dans le panneau

Fichiers 76

affichage du panneau Fichiers, modification 83


carte de site, utilisation 49

création d'un nouveau site,

Assistant de définition de site 40


dossier distant, dépannage du dossier distant 45

étendus, actifs dans 110

fichier cache 275

fichiers, utilisation 77

gestion de vos fichiers, déroulement du travail pour 12

importation et exportation 48

instructions de test 101

liens rompus, correction 283

liens, modification au niveau du site 276

IN

DEX

698

liens, utilisation 267

liens, vérification

locaux et distants

282

38

migration de sites GoLive 23

modification de sites Web existants 40, 48

options de la catégorie Infos distantes 41

ouverture pour affichage 81

planification

rapports 102

12

recherche de fichiers 220

recherche de fichiers dans 79

sécurité 628

Serveur d'évaluation, options de la catégorie 46

structure du dossier 38

suppression de la liste des sites 48


voilage 96

sites locaux. Voir

sites 40

SOAP et services Web 557

son

ajout à une page 258

incorporation

lecture 342

259 lien vers un fichier audio 259

souligné 231

sources de données

à propos de 517

définition dans Dreamweaver 483

envoyées par les utilisateurs 506

JavaBeans 642

jeux d'enregistrements, à propos 517

jeux d'enregistrements, création

(simple) 521

mise en mémoire cache 536

paramètres d'URL, à propos 507

paramètres de formulaire, à propos 506

suppression 536

variables d'application

variables de session

532

509, 531

variables JSP 534

caractères spéciaux

dans les noms de compte SQL

Spry

502

affichage d'éléments intégrés dans le panneau Liaisons 459, 461

cadre applicatif, à propos 428

effets, à propos 462

ensembles de données, à propos 455

ensembles de données, définition 456

flux de conception 457, 458

listes de répétition 462

régions de détail, à propos

456, 458

régions enfants 461

régions principale/de détail 456

régions répétées

régions, création

461

458

tableaux dynamiques, à propos 456

tableaux, création 460

widgets, à propos 428

SQL 469


ASP.NET

518

définition de variables SQL de jeu d'enregistrements 525

jeu d'enregistrements, définition avec SQL 524

utilisation de variables 528

variables 525, 526

SQL (Structured Query

Language) 469

SQL Server, dépannage des pages dynamiques 501

Structured Query Language

(SQL) 469

Style, sous-menu 231

styles

Voir aussi feuilles de style

application, suppression et changement du nom de styles

CSS personnalisés 133

conversion de CSS intégré 135

CSS (feuilles de style en cascade) 126

définition des bordures 129

déplacement des règles CSS 134

emplacement des éléments 129

options d'alignement 128 options d'espacement

Styles CSS, panneau

128

22, 125

à propos 121

Styles incorporés, option 213

Sun ONE Web Server 473 support technique pour les serveurs 473

suppression

balises HTML vides 313

code HTML généré par Word 74

contenu dynamique 541

éléments de la bibliothèque 114

fichiers d'un site Contribute 58


fichiers non utilisés 80

images d'un scénario 162, 164


lignes et colonnes 180

scripts de connexion au moment de la création 504

sources de données 536

suppression du voilage

dossiers d'un site 97 types de fichier 97

Supprimer le scénario, commande 164

surbrillance, préférences

régions de modèle 400


système Archiver/Extraire

fichiers dépendants 82

Système d'archivage et d'extraction de fichiers

annulation de l'extraction d'un fichiers 91

archivage et extraction de fichiers 89

recherche des fichiers extraits 79

systèmes d'exploitation, multiutilisateurs 34

systèmes de gestion de bases de données 472

systèmes multiutilisateurs 34

T

tableaux

à propos 170

Voir aussi

colonnes, lignes et cellules

cellules, effacement de la largeur et de la hauteur 179

cellules, surbrillance 173, 185

cellules, surbrillance et fractionnement 181

création et ajout de contenu 171

données tabulées, importation 225

données, exportation 172

éléments PA, conversion à partir

155

éléments, sélection 173

formatage 175, 177

imbrication 183

importation 172

largeurs de colonne, ajustement

179, 180, 194

largeurs et hauteurs 179

lignes et colonnes, ajout et suppression 180

IN

DEX

699

mises en forme prédéfinies pour 175, 177

mode Tableaux développés

modification propriétés

restriction

175, 177 préférences de surbrillance

175, 177

redimensionnement

514

178

177

175

tableaux de mise en forme

à propos 184

imbriqués

préférences

188

194

tableaux dynamiques Spry

à propos 456

création 460

tableaux répétés (modèles)

couleurs alternées 384

insertion 383

tables

base de données 469

tâches, automatisation 668

taille du moniteur, redimensionnement des pages en fonction de 24

Tailles des fenêtres, option 25

technologies de serveur

compatibles

définies 473

471

téléchargement

comportements 336

fichiers 85

mises à jour, modules externes et versions d'essai 9

taille, durée estimée 18, 216

téléchargement de fichiers 86, 577

téléchargements 9

Télécharger d'autres comportements, commande 336

termes relatifs aux applications Web, définition 472 terminologie du développement d'applications Web 472

test d'un site 101, 102

test de serveurs

à propos 475

comportements 571

text

importation de données tabulaires 225

texte

ajout à un document 218

alignement sur une image 239

alignement sur une page

champs 573

230

champs, définition du texte avec des comportements 345

collage 218, 224

couleur par défaut dans les pages 229

espace insécable

fichiers,ouverture

219

73

importation à partir d'autres documents 225

insertion 218 mise en forme 218, 226, 231

mise en forme (avec l'inspecteur

Propriétés) 227

mise en retrait 230 mise en retrait négatif 230

modification de la couleur

108, 230

modification des combinaisons de polices 232

préférences de collage 224

recherche dans les documents

rendre dynamique 538

220

soulignement 126

Texte d'un cadre, action 344

Texte d'un champ de texte, action 345

texte de remplacement 235

Texte du calque, action 344

titres de pages 323 titres, des pages 323

Toutes les infos, onglet (Design

Notes) 100

tracés d'image

affichage 170 ajustement de la position 170

comme guides 169

traitements de texte, fichiers créés par 73

traits de soulignement dans les noms de comptes SQL 502

transfert de fichiers 84

transfert de fichiers depuis et vers des sites Contribute 55

transfert de fichiers en arrièreplan 84

transferts de fichiers

suivi 88

Transformation XSL, comportement de serveur

403, 414

transformations par souris

à propos de 242 création 242

transformations XSL

côté client 404, 424

côté serveur 402

modification 415

Utilisation de paramètres avec 416

transparents, pixels dans l'arrièreplan 209

Type de document par défaut

(DTD) 315

type par défaut du nouveau document, paramètre 71

types de données, erreur de correspondance 502, 503

types de fichier

à propos 66

fichiers Flash 245

préférences d'éditeur externe 300

types de fichiers / éditeurs, préférences 261

U

UDDI

liste des sites, modification 560

répertoires publics 557

URL

Voir aussi chemins

application à une sélection 109

création d'actifs, URL 111


actifs

URL de la racine du site, option 57

Usemap, attribut 281

UTF-8 72

Utiliser FTP Passif, option 60

Utiliser les expressions régulières, option 222

Utiliser un pare-feu, option 60

V

validateur

préférences 312

utilisation 314

Validation de case à cocher, widget

à propos 452

affichage des états en mode

Création 454 définition d'une plage de sélections minimale et maximale 454

définition du moment de validation 453 insertion 453


validation de formulaires

ColdFusion 655

HTML 583

Validation de sélection, widget

à propos 449


Création 451 autorisation ou interdiction des valeurs vides 451

IN

DEX

700

définition des valeurs non valides 451 définition du moment de validation 451

insertion 450


Validation de zone de texte, widget

à propos 442


Création 444

blocage des caractères incorrects 445 création de conseils 445

définition des valeurs minimale et maximale 444 définition du moment de validation 444 définition du nombre minimal et maximal de caractères 444

définition du type de validation et du format 443 insertion 443

modification de l'état obligatoire 445 personnalisation 445

Valider le formulaire, action 349

variables d'application 532

variables dans CFML

variables de session

471

à propos 509

définition 531

données, récupération données, stockage 510

510

paramètres de formulaire et d'URL 509

Variante, option (définition des règles de CSS) 126

VBScript 471

VBScript, insertion de code en mode

Création 321

Vérificateur de lien, panneau 283

Vérification de la compatibilité avec les navigateurs, fonction 137

Vérifier l'orthographe, commande 125, 224

Vérifier le navigateur, action

Vérifier le plug-in, action 338

337

Vérifier tous les liens du site, commande 283

verrouillés

fichiers de base de données 501

fichiers, avertissement à l'ouverture 34

versions d'essai 9

video, ajout d'objets multimédias

Flash et non Flash 259

Visibilité, option 130

Visual Basic 471

Vitesse de connexion, option

voilage, site

25

activation et désactivation 96

désactivation du voilage de tous les

éléments 98

fichiers 97

Vue Fichiers du site 75

W

Web widget Accordéon widget Barre de menus widget Panneau réductible

Voir aussi Spry

widget Panneaux à onglet

Voir aussi Spry

widget Validation de case à cocher

Voir aussi Spry

widget Validation de la sélection

Voir aussi Spry

widget Validation de zone de texte

Voir aussi Spry

widget Zone de texte de validation

Voir aussi Spry

X

hébergement de services

serveur, configuration

Voir aussi Spry

Voir aussi Spry

XHTML

code

XPath

289

474

conversion de HTML à

XHTML 315 création de pages

dans les modèles

fichiers DTD 330

315

488

XML (Extensible Markup Language)

a propos 401

affichage dans les pages dynamiques 402

affichage dans les pages Web 401

393

et éléments répétés 405

utilisation avec Spry 457

XSL (Extensible Stylesheet Language)

à propos 401

Voir aussi

XSLT

commentaires, insertion 419

XSLT (Extensible Stylesheet

Language Transformation)

à propos 401

création de régions conditionnelles 417

fragments 402, 414, 415

objet XSLT Région répétée

412, 414

405,

pages 402, 404, 410, 415

pages, liaison à des fichiers

XML 425

XSLT (Extensible Stylesheet

Language Transformations)

et transformations côté client

424

404,

et transformations côté serveur 402

liens dynamiques 415

pages 409

utilisation avec des pages dynamiques 402

Z

Zone de liste, contrôle 656

Zone de texte de validation, widget

à propos 446


Création 448 ajout d'un compteur de caractères 448 blocage des caractères excédentaires 448 création de conseils 448

définition du moment de validation 447 définition du nombre minimal et maximal de caractères 447 insertion 447

modification de l'état obligatoire 448 personnalisation 448

Zone de texte, contrôles 658

zones réactives

application de comportements 244

dans les cartes graphiques 281

redimensionnement 282 sélection de plusieurs dans une carte graphique 282

IN

DEX

701