MODE D'EMPLOI DREAMWEAVER MX 6 MACROMEDIA
Utilisation de Dreamweaver MX
Marques commerciales
Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio, Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, FreeHand Graphics Studio, Generator, Generator Developer's Studio, Generator Dynamic Graphics Server, Knowledge Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Flash, Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind et Xtra sont des marques commerciales de Macromedia, Inc. et peuvent être déposées aux États-Unis ou dans d'autres juridictions ou pays. Les autres noms de produit, logos, concepts, titres, mots ou phrases mentionnés dans cette publication peuvent être des marques commerciales, des marques de service ou des noms commerciaux de Macromedia, Inc. ou d'autres entités et peuvent être déposés dans certaines juridictions ou certains pays.
Ce manuel contient des liens vers des sites Web tiers qui ne sont pas contrôlés par Macromedia et Macromedia ne peut en aucun cas être tenu responsable du contentu de ces sites. Si vous accedez à l'un de ces sites, vous le faites à vos propres risques. Macromedia propose ces liens dans un but pratique uniquement et ne peut en aucun cas endosser ou accepter la responsabilité du contentu de ces sites tiers.
Dénégation de responsabilité d'Apple
APPLE COMPUTER, INC. N'ASSUME AUCUNE GARANTIE, IMPLICITE OU EXPLICITE, SUR LE LOGICIÉL INFORMATIQUE CI-INCLUS, SA COMMERCIABILITE OU SON ADEQUATION A UN OBJECTIF PARTICULIER. L'EXCLUSION DES GARANTIES IMPLICITES N'ETANT PAS AUTORISEE DANS CERTAINS ETATS, L'EXCLUSION CI-DESSUS PEUT DONC NE PAS S'APLIQUER A VOTRE CAS. CETTE GARANTIE VOUS OFFRE DES DROITS JURIDIQUES SPECIFIQUES. VOUS POUVEZ DISPOSER DE CERTAINS AUTRES DROITS, QUI VARIENT SELON LES ETATS.
Copyright © 2002 Macromedia, Inc. Tous droits réservés. Ce manuel ne peut pas être copie, photocopié, reproduit, traduit ou converti sous forme électronique ou informatique, en partie ou en totalité, sans l'autorisation écrite préalable de Macromedia, Inc. Vous trouvez des informations sur les logériels tiers et/ou d'autres conditions générales à l'adresse suivante : http://www.macromedia.com/go/thirdparty/. Numéro de reference ZDW60M300F
Remerciements
Gestion de projet : Sheila McGinn
Gestion de la production : Patrice O'Neill
Conception et production multimédia : Aaron Begley, Benjamin Salles et Noah Zilberberg
Conception et production de l'aide et de la documentation : Chris Basmajian, Caroline Branch, John Francis
Mise en forme et production du site Web : George Brown, Rebecca Godbois, Jeff Harmon, Jon Varese
Gestion de la localisation : Bonnie Loo
Remerciements particuliers à Luciano Arruda, Jake Cockrell, Kristin Conradi, George Comninos, David Deming, Tonya Estes, Sadia Bellal Faber, Stephanie Goss, David Halbakken, Nick Halbakken, Wanda Huang, Tim Hussey, Narciso (nj) Jaramillo, Craig Jennings, Florian de Joannes, Ken Karleskint, Sho Kuwamoto, David Lenoe, Raymond Lim, Jay London, Sam Mathews, Larry McLister, Susan Morrow, Masayo Noda, Dan Radigan, Nivesh Rajbhandari, Scott Richards, Yoko Shindo, Mike Sundermeyer, Heidi Bauer Williams, Jorge Taylor, Vincent Truong, Lawrence Teschmacher, Venu Venugopal, Yoko Vogt, et les équipés d'ingenierie et de contrôle qualité de Dreamweaver.
Première édition : juin 2002
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
TABLE DES MATIÈRES
Partie I
Notions de base de Dreamweaver
CHAPITRE 1
Bienvenue dans Dreamweaver 15
Prise en main de Dreamweaver 16
Processus de creation d'un site Web. 18
Par ou débuter. 22
Conventions typographiques. 25
Nouveautes de Dreamweaver MX 25
Ressources sur le langage HTML et les technologies Web 29
CHAPTER 2
Exploration de l'espace de travail 31
Utilisation de l'espace de travail de Dreamweaver 31
Utilisation des fenêtres et des panneaux dans Dreamweaver. 37
Utilisation de Dreamweaver avec d'autres applications 50
Personnalisation de Dreamweaver : notions de base 51
CHAPITRE 3
Planification et configuration de votre site 57
A propos de la planification et de la creation du site 57
Configuration d'un site Dreamweaver 62
Utilisation de l'assistant de définition d'un site 63
Configuration d'un dossier local 63
Configuration d'un dossier distant 64
Modification d'un site Dreamweaver. 67
Modification de sites Web existants dans Dreamweaver. 68
CHAPITRE 4
Gestion du site 71
A propos du panneau Site 72
A propos de la carte du site 83
Importation et exportation de sites 89
Suppression d'un site de votre liste de sites 89
Utilisation de l'archivage et de l'extraction. 90
Acquisition et placement de fichiers. 93
Synchronisation des fichiers entre le site local et le site distant 96
Voilage des dossiers et des fichiers du site. 97
Utilisation des Design Notes 101
Utilisation des rapportes pour améliorer le déroulement du travail 105
A propos du panneau Sitespring dans Dreamweaver 107
Utilisation du panneau Sitespring 108
CHAPITRE 5
Configuration d'un document. 111
Creation de documents Dreamweaver 111
Utilisation de la boite de dialogue Nouveau document 112
Ouverture de documents existants 115
Définition des propriétés du document 116
Utilisation des couleurs 118
Selection d'éléments dans la fenêtre de document 120
Utilisation de guides visuels durant la conception 121
Affichage et modification du contenu de l'en- 電 123
A propos de l'automatisation des tâches. 124
Partie II
Préparation à la création de sites dynamiques
CHAPITRE 6
Configuration d'une application Web 133
Remarque à l'attention des utilisateurs de Dreamweaver UltraDev 4. 133
Eléments nécessaires à la création d'applications Web 134
Configuration d'un serveur Web 135
Configuration d'un serveur d'application 135
Creation d'un dossier racine pour l'application 138
Definition d'un site Dreamweaver 138
Connexion a une base de données 142
Dépannage des erreurs de serveur d'application 142
CHAPITRE 7
Connexions à des bases de données pour les développpeurs
ColdFusion 145
Connexion a une base de données 145
Modification ou suppression d'une connexion à une base de données 147
Connexion au moyen de la connectivité UltraDev 4 147
CHAPITRE 8
Connexions à des bases de données pour les développpeurs ASP.NET 151
Connexion a une base de données 151
Modification ou suppression d'une connexion à une base de données 154
CHAPTER 9
Connexions à des bases de données pour les développpeurs ASP . 157
Description des connexions aux bases de données ASP 158
Creation d'une connexion DSN 158
Création d'une connexion sans DSN 161
Connexion à une base de données via un fournisseur d'accès. 164
Modification ou suppression d'une connexion à une base de données 167
CHAPITRE 10
Connexions à des bases de données pour les développpeurs JSP . 169
Description des connexions JSP 169
Connexion a une base de données 170
Connexion via un pilote ODBC 172
Modification ou suppression d'une connexion à une base de données 175
CHAPITRE 11
Connexions à des bases de données pour les développpeurs PHP . 177
Connexion a une base de données 177
Modification ou suppression d'une connexion à une base de données 178
Partie III
Utilisation du code de page
CHAPITRE 12
Configuration d'un environnement de codage 181
Affichage du code 181
Definition des préférences d'affichage 182
Définition des préférences de codage 183
Personnalisation des raccourcis clavier 187
Ouverture de fichiers en mode Code par défaut. 187
Definition des préférences du validateur 187
Gestion des bibliothèques de balises 188
Importation de balises personalisées dans Dreamweaver 191
Utilisation d'un éditeur HTML externe avec Dreamweaver 193
CHAPITRE 13
Codage dans Dreamweaver. 197
A propos de l'environnement de codage de Dreamweaver 197
Réduction et modification de code 199
Recherche et remplacement de balises et d'attributs. 205
Acces aux reférences de langue 210
CHAPITRE 14
Optimisation et débogage de code 211
Nettoyage de code 211
Vérification de l'équilibre des balises et des accolades 212
Validation de balises 213
Conformité des pages XHTML 213
Utilisation du débogueur JavaScript 217
Utilisation du débogueur ColdFusion 223
CHAPITRE 15
Modification du code en mode Creation. 225
Modification du code avec l'inspecteur de propriétés. 225
Modification du code avec un éditeur de balises 226
Modification du code avec Quick Tag Editor 226
Modification du code à l'aide du sélecteur de balises 229
Modification des scripts. 229
Utilisation des inclusions cote serveur 231
Partie IV
Conception de la mise en page
CHAPITRE 16
Présentation de contenu à l'aide de tableaux 237
Insertion d'un tableau 238
Ajout de contenu dans une cellule de tableau 238
Importation de données tabulaires 239
Selection d'éléments de tableau 239
Mise en forme des tableaux et des cellules 241
Redimensionnement de tableaux 244
Modification de la largeur des colonnes et de la hauteur des lignes 245
Ajout suppression de lignes et de colonnes. 246
Imbrication de tableaux 249
Couper, copier et coller des cellules 249
Tri des tableaux 251
Exportation des données d'un tableau 251
CHAPITRE 17
Le mode de Mise en forme. 253
A propos des cellules et des tableaux 254
Activation et déactivation du mode de Mise en forme 254
Dessen de cellules et de tableaux de Mise en forme 255
Ajout de contenu dans une cellule de Mise en forme 259
Déplacement et redimensionnement de cellules et de tableaux de Mise en forme 260
Formatage de cellules et de tableaux de Mise en forme 262
Définition de la largeur des colonnes 262
Définition des préférences du mode de Mise en forme. 266
CHAPITRE 18
Utilisation de cadres 267
A propos des cadres et des jours de cadres 268
Choix de l'utilisation des cadres 269
A propos de la creation de pages Web bases sur des cadres dans Dreamweaver . 270
Creation de cadres et de produits de cadres 271
Selection de cadres et de produits de cadres 273
Enregistrement des fichiers du cadre et du jeu de cadres 275
Affichage et definition des propriétés des cadres 277
Affichage et definition des propriétés des yeux de cadres. 277
Définition des contenus de cadre avec liens 278
Gestion des navigateurs qui ne peuvent pas afficher les cadres 279
Utilisation des comportements JavaScript avec les cadres 279
Partie V
Ajout de contenu
CHAPITRE 19
Insertion et mise en forme de texte 283
Insertion et mise en forme de texte HTML 283
Mise en forme de texte 286
Utilisation de styles HTML pour formater un texte 292
A propos des feuilles de style en cascade. 298
Conversion de styles CSS en balises HTML 307
Vérification orthographique 308
Recherche et remplacement de texte 308
CHAPITRE 20
Insertion d'images. 311
A propos des images 311
Insertion d'une image 312
Redimensionnement d'une image 315
Creation d'une image survolée. 316
Utilisation d'un éditeur d'image externe 317
Application de comportements aux images 318
CHAPITRE 21
Intégration de Dreamweaver à d'autres applications 321
Intégration de Fireworks et Flash 322
Utilisation de Dreamweaver et Fireworks. 322
Creation d'un album photos pour le Web 330
Utilisation de Dreamweaver et Flash 332
CHAPITRE 22
Insertion d'éléments multimédia 337
Insertion et lecture d'objects multimédia. 338
Lancement d'un éditeur externe pour des fichiers multimédia. 338
Utilisation des Design Notes (Notes de conception) avec les objets multimédia. 340
A propos du contenu Flash 340
Insertion d'un objet de bouton Flash. 341
Insertion d'un objet de texte Flash. 343
Insertion d'animations Flash 345
Insertion d'animations Shockwave. 346
Ajout d'une video 346
Ajout de son à une page. 346
Lien vers un fichier audio 347
Incorporation d'un fichier son. 348
Insertion du contenu d'un plug-in Netscape Navigator 348
Insertion d'un contrôle ActiveX. 350
Insertion d'une applet Java 350
Utilisation de comportements pour contrôler les objets multimédia 350
CHAPITRE 23
Dreamweaver et accessibilité 353
Utilisation des fonctions d'accessibilité de Dreamweaver 354
Creation de pages Web accessiblees 357
Test de l'accessibilité de votre site Web 364
Partie VI
Utilisation de comportements et d'animations
CHAPITRE 24
Utilisation des comportements JavaScript 369
Utilisation du panneau Comportements 370
A propos des événements. 370
Application d'un comportement 371
A propos des comportements et du texte 372
Association d'un comportement à un scenario. 373
Modification d'un comportement 373
Actualisation d'un comportement 374
Creation de nouvelles actions 374
Téléchargement et installation de comportements créés par des développementiers tiers . . . 374
Utilisation des actions de comportement livrées avec Dreamweaver 375
CHAPITRE 25
Animation de calques. 401
Code HTML pour les calques 402
Creation de calques sur une page 403
Imbrication des calques 405
Manipulation des calques 406
Ajout de contenu dans les calques 408
Afficheget definition des propriétés du calque. 408
Utilisation de tableaux et de calques pour la mise en forme 411
Animation de calques 413
Animation de calques à l'aide d'actions de comportement 421
Partie VII
Gestion du contentu sur plusieurs pages
CHAPITRE 26
Liens et navigation 425
Emplacements et chemins d'acces des documents 425
Creation de liens 428
Gestion des liens 436
Creation de menus de reroutage 439
Creation de barres de navigation 441
Creation de cartes graphiques 444
Association de comportements à des liens 446
CHAPITRE 27
Gestion des actifs de site, des bibliothèques et des modèles 447
Utilisation du panneau Actifs 448
Gestion du panneau Actifs. 456
Utilisation des éléments de bibliothèque 459
Creation, gestion et modification des éléments de bibliothèque. 459
A propos des modèles Dreamweaver 464
Creation d'un modele Dreamweaver 470
Creation de régions modifiables. 472
Creation de régions repétées 473
Définition d'attributs de balise modifiables 476
A propos des régions facultatives 478
Creation d'un document à partir d'un modele. 480
Modification du contenu dans une page basée sur un modele 481
A propos des modèles imbriqués 485
Creation d'un modele imbrique 487
Application d'un modele a un document existant 487
Modification et mise à jour des modèles 488
A propos de XML 490
CHAPITRE 28
Test d'un site 493
Vérification de la compatibilité du navigateur 494
Utilisation de comportements pour détecter le type et la version des navigateurs et des plugins 495
Aperçu de page dans les navigateurs 496
Vérification des liens dans une page ou un site 497
Correction des liens brises 499
Ouverture des documents liés dans Dreamweaver 500
Vérification du temps et de la taille de téléchargement 500
Utilisation des rapportes pour tester un site. 501
Partie VIII
Ajout de contenu dynamique aux pages Web
CHAPITRE 29
Optimisation de l'espace de travail pour tirer parti des fonctions de développement visuel. 505
Affichage de panneaux utiles 505
Affichage de la structure de votre base de données dans Dreamweaver. 507
Affichage des données dynamiques en mode Creation 508
Travail en mode Creation sans données dynamiques 512
Aperçu des pages dynamiques dans un navigateur 512
Limitation des informations de base de données affichées dans Dreamweaver 513
CHAPITRE 30
Conception de pages dynamiques dans Dreamweaver 515
Conception de la page 515
Creation d'une source de contenu dynamique 516
Ajout d'un contenu dynamique à une page Web 518
Amélioration des fonctionnalités d'une page dynamique 518
Test et débogage d'une page 520
CHAPITRE 31
Stockage et récapération des données spécifiques à une page 523
Utilisation d'une base de données pour stocker un contenu. 523
Collecte de données envoyées par les utilisateurs 524
Accès à des données stockées dans des variables de session 528
CHAPITRE 32
Définition de sources de contenu dynamique 535
Description des sources de contenu dynamique 535
Définition d'un jeu d'enregistrements 536
Definition de paramètres d'URL 541
Définition de paramètres de formulaire 542
Definition de variables de session 543
Definition de variables d'application 544
Definition de variables de serveur 545
Mise en mémoire cache de sources de contenu 550
Modification ou suppression de sources de contenu. 550
Copied'unjeud'enregistrementsd'une pageauneautre. 551
CHAPITRE 33
Ajout d'un contenu dynamique à une page Web 553
A propos de l'ajout d'un contenu dynamique 554
Ajout d'un texte dynamique 554
Creation d'images dynamiques 555
Creation d'attributs HTML dynamiques 557
Creation de paramètres d'objet (ActiveX, Flash, etc.) dynamiques 559
Modification d'un contenu dynamique 560
Suppression d'un contenu dynamique 560
CHAPITRE 34
Affichage des enregistrements de base de données 561
Application d'elements typographiques et de mise en forme de page à des données dynamiques 562
Application de formats à des données 562
Personnalisation des formats de données existants 562
Creation de liens de navigation de jeu d'enregistrements 563
Affichage et masquage des régions en fonction des résultats du jeu d'enregistrements. 567
Affichage de plusieurs comportements 568
Creation d'un tableau à l'aide du comportement de serveur Région repétée. 569
Creation d'un compteur d'enregistrements 570
Creation d'un contrôle Web Grille de données ou Liste de données ASP.NET 573
576
CHAPITRE 35
Utilisation des composants ColdFusion 577
Description des composants ColdFusion 577
Creation visuelle d'un composant dans Dreamweaver 578
Affichage de composants ColdFusion dans Dreamweaver 579
Modification de composants ColdFusion dans Dreamweaver 579
Creation de pages Web utilisant des composants ColdFusion 580
CHAPITRE 36
Utilisation des services Web 583
Installation et configuration de générateurs de proxy 586
Ajout d'un proxy de services Web à l'aide de la description WSDL 588
Ajout d'un service Web à une page 590
Modification de la liste de sites des services Web UDDI 591
CHAPITRE 37
Ajout de comportements de serveur personalisés. 593
Installation de comportements de serveur supplémentaires 593
Création de comportements de serveur 594
Réduction de blocs de code 597
Creation de blocs de code conditionnels 599
Modification d'un code de comportement de serveur 607
CHAPITRE 38
Creation de formulaires interactifs 611
A propos des objets de formulaire 612
Creation d'un-formulaire. 613
Description des objets de formulaire 615
Insertion de cases à cocher et de boutons radio 622
Ajout de listes et de menus 624
Ajout deboutons de formulaire 627
A propos de la conception de formulaires 629
Utilisation d'une fonction JavaScript côté client pour traiter un-formulaire. 629
Utilisation de comportements avec des formulaires 630
Creation d'objets de formulaire dynamiques 630
Partie IX
Développement rapide d'applications
CHAPTER 39
Creation d'un ensemble de pages Principale-Détails 637
A propos des ensembles de pages Principale-Détails. 637
Creation rapide d'un ensemble de pages Principale-Details 639
Creation d'un ensemble de pages Principale-Détails par élément 640
Modification d'un ensemble de pages Principale-Détails 644
CHAPITRE 40
Creation de pages pour l'exécution de recherches dans les bases de données 645
A propos des pages de recherche/de résultats 645
Creation de la page de recherche 646
Creation de la page de résultats 647
Creation d'une page d'informations détaillées pour une page de résultats 651
Utilisation des pages associées (utilisateurs ASP et JSP uniquement) 656
CHAPITRE 41
Creation de pages permettant de modifier des bases de données.... 659
Creation d'une page d'insertion d'enregistrements. 660
Creation d'une page de mise a jour d'enregistrements 663
Creation d'une page de suppression d'enregistrements. 668
Modification d'une base de données à l'aide de procédures stockées 671
Modification d'une base de données à l'aide des commandes ASP 676
Modification d'une base de données à l'aide d'instructions préparées JSP 678
CHAPTER 42
Creation de pages limitant l'accès à votre site 681
Creation d'une page d'enregistrement 681
Creation d'une page de connexion. 685
Creation d'une page à laquelle seuls les utilisateurs autorisés ont accès 687
Partie X
Annexes
ANNEXA
Guide du début en base de données 693
A propos des bases de données. 693
Principes fondamentaux pour la conception d'une base de données. 694
Description des connexions aux bases de données 700
ANNEXE B
Initiation à SQL 707
Notions de syntaxe élémentaires 707
Définition des colonnes d'un jeu d'enregistrements 708
Limin du nombre d'enregistrements dans un jeu 709
Tri des enregistements d'un jeu 712
Relationsentre tables. 712
ANNEXE C
Définition d'un DSN sous Windows. 715
Description des DSN 715
Cretioand'unDSN. 715
ANNEXED
Aide-mémoire : Balises ASP.NET Macromedia 719
INDEX 729
Partie I Notions de base de Dreamweaver
Apprenez à utiliser la documentation de Dreamweaver et d'autres ressources, puis configurez l'espace de travail de Dreamweaver en fonction de votre style de travail préféRED. Ensuite, planifiez et configurez un site et commencez à créé des pages.
Cette partie du manuel contient les chapitres suivants :
- Chapitre 1, « Bienvenue dans Dreamweaver »
- Chapitre 2, « Exploration de l'espace de travail »
- Chapitre 3, « Planification et configuration de votre site »
- Chapitre 4, « Gestion du site »
- Chapitre 5, « Configuration d'un document »
CHAPITRE 1
Bienvenue dans Dreamweaver
Macromedia Dreamweaver MX est un éditeur HTML professionnel destiné à la conception, au codage et au développement de sites, de pages et d'applications Web. Quel que soit l'environnement de travail utilisé (codage manuel HTML ou environnement d'édition visuel), Dreamweaver propose des outils qui vous aidont à créé des applications Web.
Les fonctions d'edition visuelle de Dreamweaver vous permettent deisser rapidement des pages sans rédigier une seule ligne de code. Vous pouvez afficher tous les éléments ou actifs de votre site et les faire glisser directement d'un panneau convivial dans un document. Rationalisez les tâches de développement en créant et en modifient les images dans Macromedia Fireworks, puis en les important directement dans Dreamweaver ou en ajoutant des objets Flash Macromedia créés directement dans Dreamweaver.
Dreamweaver intégre également de nombreux outils et fonctions de codage, y compris des outils de modification de code en mode Code (coloration de code et achèvement de balises), une définition HTML, CSS, JavaScript, CFML, ASP et JSP, et un débogueur JavaScript. La technologie Roundtrip HTML de Macromedia permet d'importer des documents HTML codés manuelsment sans en modifier le code pour que vous puissiez ensuite reformater ce dernier avec le style de formatting de votrechoix.
Dreamweaver intégre et étend désormais toutes les fonctions de Macromedia UltraDev pour vous aider à creator des applications Web dynamiques reposant sur des bases de données à l'aide de langages serveur tels que ASP, ASP.NET, ColdFusion Markup Language (CFML), JSP et PHP.
Dreamweaver est entierement personalisable. Vous pouvez creer vos propres objets et commandes, modifier les raccourcis clavier ou encore rédiger un code JavaScript pour intégrer de nouveaux comportements, inspecteurs de propriétés et rapportes de site aux fonctionnalités de Dreamweaver.
Ce chapitre contient les sections suivantes :
« Prise en main de Dreamweaver», page 16
« Processus de création d'un site Web», page 18
« Par où débuter», page 22
« Conventions typographiques », page 25
« Nouveautés de Dreamweaver MX », page 25
« Ressources sur le langage HTML et les technologies Web », page 29
Prise en main de Dreamweaver
Dreamweaver comprend diverses ressources qui vous aidont à vous familiariser rapidement avec le programme et à creer facilement vos propres sites et pages Web. Ces ressources incluent le guide imprimé Bien démarrer avec Dreamweaver MX, un système d'aide en ligne et des didacticiels. En outre, vous trouvrez des conseils, des notes techniques, des exemples et des informations régulièrement mis à jour dans le centre de support de Dreamweaver sur le site Web de Macromedia.
Guide Bien démarrer avec Dreamweaver MX
Le guide Bien démarrer avec Dreamweaver MX a été créé pour vous guider lors de la création d'un site Web simple mais fonctionnel à l'aide de Dreamweaver. Il s'adresse aux utilisateurs qui ont déjà créé des pages Web, mais qui ne connaissent que certains aspects de Dreamweaver. Il comporte des chapitres sur la création et la modification de pages statiques simples, la modification manuelle du code et la création d'applications Web dynamiques. Ce guide existe sous forme de manuel imprimé, d'aide en ligne et de fichier PDF.
Didacticiels
Les didacticiels proposent d'autres leçons traitant de sujets particuliers qui fournissent plus d'informations sur des domaines spécifiques que le reste du guide Bien démarrer avec Dreamweaver MX. Ces didacticiels indiquent comment modifier un exemple de site Web à l'aide de quelques-unes des fonctions de conception les plus utiles et les plus puissantes de Dreamweaver. Ils sont disponibles dans le manuel Bien démarrer avec Dreamweaver MX imprimé, dans l'aide de Dreamweaver (dans le menu Aide de Dreamweaver, désisseez Didacticiels) et dans le fjichier PDF Bien démarrer avec Dreamweaver MX.
Si les fonctions de conception de Dreamweaver vous sont déjà familières, mais que souhaitez en savoir plus sur la création d'applications Web, commencez par suivre les pages dynamiques des didactériels pour apprendre à creator des pages interactives et à vous connecter à des bases de données.
Aide de Dreamweaver
L'aide de Dreamweaver, optimise pour une utilisation en ligne, fournit des informations complètes sur toutes les fonctionnalités de Dreamweaver. L'aide de Dreamweaver s'affiche dans le visualisateur d'aide fourni avec votre système d'exploitation : Microsoft HTML Help (Windows) ou Aide Apple (Macintosh). Quelle que soit la plate-forme utilisée, vous pouvez trouvez les informations recherchées de quatre façon :
Le sommaire vous permet d'acceder à toutes les informations organises par sujets. Cliquez sur la ligne principale pour voir les sous-rubriques.
L'index peut être utilisé comme un index imprimé traditionnel : il permet de tracer des termes ou des concepts spécifique.
La fonction Recherche vous permet de tracer n'importe qu'elle chaîne de caractères dans le texte du système d'aide.
L'aide contextuelle permet d'ouvrir une rubrique d'aide relative à la boîte de dialogue, au panneau ou à l'inspecteur actifs. Pour afficher l'aide contextuelle, cliquez sur le bouton Aide d'une boîte de dialogue, choisissez Aide dans le menu d'options d'une barre de titre d'un groupe de panneaux ou cliquez sur l'icone de point d'interrogation dans un inspecteur ou une autre fenêtre.
Cliquez ici pour ouvrir l'aide
Chaque rubrique d'aide comporte des boutons sur lesquels vous pouvez cliquer pour passer d'une rubrique à l'autre. Les boutons représentant une flèche vers la gauche ou vers la croite permettent de passer aux rubriques précédente ou suivante de la même section (suivant l'ordre dans lequel les rubriques sont répertoriées dans la table des matières).
Extension de Dreamweaver
Le système d'aide Extension de Dreamweaver fournit des informations sur le modulo d'objet de document (DOM) de Dreamweaver et les interfaces de programmation d'application (API) qui permettent aux développpeurs JavaScript et C de creer des extensions pour Dreamweaver.
Centre de support de Dreamweaver
Un centre de support est à votre disposition sur le Web pour vous aider à optimiser votre utilisation de Dreamweaver. Le site Web du centre de support de Dreamweaver (http:// www.macromedia.com/support/dreamweaver/) est actualisé régulièrement. Il propose des informations à jour sur Dreamweaver, ainsi que des conseils donnés par des utilisateurs expériements, des examples, des conseils généraux, des mises à jour et des informations sur des sujets sophistiqués. Consultez régulièrement ce site Web pour partager les toutes dernières informations sur Dreamweaver et apprendre à en tirer le meilleur parti.
Centre pour concepteurs et développementés
Le centre pour concepteurs et développateurs de Macromedia (http://www.macromedia.com/fr/ desdev/) propose des outils, des didacticiels et bien plus encore pour tous les produits Macromedia.
Forums en ligne de Dreamweaver
Abordez les problèmes techniques et partagez des conseils utiles avec les autres utilisateurs de Dreamweaver en visitant les forums en ligne de Dreamweaver. Pour savoir comment acceder aux forums, consultez le site Web de Macromedia à l'adresse suivante : http://www.macromedia.com/go/dreamweaver_newsgroup.
Raccourcis clavier
Des tableaux de raccourcis clavier relatifs à la configuration Dreamweaver par défaut sont disponibles sur le site Web de Macromedia à l'adresse suivante : http://www.macromedia.com/go/ dreamweaver_mx_shortcuts.
Processus de creation d'un site Web
Vous peuvent creator un site Web de plusieurs façon. Dans cette documentation, vous allez commencer par définir une strategie de creation de site en précisant ses objectifs. Si vous développpez des applications Web, vousdez configurer les serveurs et bases de données en fonction de la route sate. Youdez ensuite definir l'aspect general du site.Ensuite, youdez create le site et coder les pages pour ajouter un contenu et définiir l'interactivité du site. You allez ensuite lier les pages les une aux autres et tester la fonctionnalite du site pour savoir s'il remplit les objectifs fixés.Vous pouze également inclure des pages dynamiques à votre site.Enfin, you allez publier le site sur un serveur. De nombreux développement programmment également une maintenance régulière pour s'assurer que le site reste à jour et est opérationnel.
Afin de faciliter la recherche des informations dont vous avez besoin pour développer vos sites Web, la documentation Utilisation de Dreamweaver a ete divisee en plusieurs sections correspondant a cette approche du développement Web : planification, conception, développement, test, publication et maintenance du site.
A propos de la planification de site
Organisez avec soin votre site : cela vous fera gagner beaucoup de temps par la suite.
L'organisation d'un site ne se réduit pas à déterminer l'emplacement des fichiers : elle inclut également l'analyse des besoin du site, des profils de ses utilisateurs et de ses objectifs. Il convient également d'examiner les conditions techniques requises, notamment l'accès utiliser et les restrictions en matière de navigateurs, de plug-ins ou de téléchargement.
Après avoir organisé vos informations et définie une structure, vous pouvez commencer la création du site.
- Déterminéz la stratégie à employer et les questions à examiner lors de la planification du site. Voir Chapitre 3, « Planification et configuration de votre site», page 57.
- Utilisez la carte du site de Dreamweaver pour configurer la structure organisationnelle de votre site. Dans le panneau Site, vous pouvez facilement ajouter, supprimer et renomer des fichiers et des dossiers afin de modifier l'organisation en fonction de vos besoin. Voir Chapitre 3, « Planification et configuration de votre site », page 57 et Chapitre 4, « Gestion du site », page 71.
- Vous pouvez commercier par creer des pages simples qui deviendront plus complexes au fur et à mesure de leur conception. Créez des pages vierges ou des pages reposant sur des conceptions prédéfines dans la boîte de dialogue Nouveau document. Voir Chapitre 5, « Configuration d'un document », page 111.
Si vous travailliez au sein d'une équipe de développement Web, les sujets suivants sont également susceptibles de vous interésser :
- Configuration d'un système pour empêcher les membres de l'équipe d'écraser les fichiers ; voir « Utilisation de l'archivage et de l'extraction », page 90.
- Utilisation de Design Notes pour communiquer avec les membres de l'equipe Web ; voir « Utilisation des Design Notes », page 101.
A propos de la configuration d'une application Web
De plus en plus de 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. Pourisser ces pages, vous devez d'abord suivre les étapes préparatoires suivantes :
- Configurez un serveur Web et un serveur d'application, puis creez ou modifiez un site Dreamweaver. Voir Chapitre 6, « Configuration d'une application Web», page 133.
- Connectez-vous à une base de données. Selon la technologie de serveur utilisé par le serveur d'application, voir Chapitre 7, « Connexions à des bases de données pour les développpeurs ColdFusion», page 145, Chapitre 8, « Connexions à des bases de données pour les développpeurs ASP.NET», page 151, Chapitre 9, « Connexions à des bases de données pour les développpeurs ASP», page 157, Chapitre 10, « Connexions à des bases de données pour les développpeurs JSP», page 169 ou Chapitre 11, « Connexions à des bases de données pour les développpeurs PHP», page 177.
A propos du codage manuel
Le codage manuel de pages Web n'est pas qu'une simple étape de création d'un site Web. Il faut只不过 le considérer comme une approche à la création de pages. Dreamweaver fournit des outils d'édition visuelle conviviaux et des outils de codage sophistiqués. Vous pouvez utiliser l'une ou l'autre de ces approches (ou bien les deux) pour créé et modifier vos pages.
- Vous pouvez travailler dans un environnement de codage sans faire appel aux outils visuels. En effet, les outils de codage permettent de creer, de modifier et de formater du code, de vérifier sa conformité aux normes et de déboguer le code JavaScript. Voir Chapitre 12, « Configuration d'un environnement de codage », page 181, Chapitre 13, « Codage dans Dreamweaver », page 197 et Chapitre 14, « Optimisation et débogage de code », page 211.
- Vous pouvez également utiliser des outils de codage Dreamweaver en mode Création (environnement de conception visuel). Voir Chapitre 15, « Modification du code en mode Création », page 225.
A propos de la mise en forme des pages Web
La plupart des projets de conception Web naissent de storyboards ou d'organigrammes convertis en exemple de pages. Utilisez Dreamweaver pour creer une maquette avec des pages fictives au fur et à mesure que vous progressez dans la conception. Les maquettes affichent généralement la conception de la mise en page, les possibilités de navigation sur le site, les composants techniques, les motifs et la couleur, ainsi que les images graphiques ou autres types d' éléments. En revanche, elles ne contiennent pas le contenu final de la page.
- Les outils de création de tableaux et le mode Mise en forme de Dreamweaver vous permettent de connaçoir rapidement des pages Web en dessinant, puis en réorganisant la structure des pages. Voir Chapitre 16, « Présentation de contenu à l'aide de tableaux», page 237 et Chapitre 17, « Le mode de Mise en forme», page 253.
- Si vous souhaitez afficher plusieurs documents simultanément dans un navigateur Web, vous pouvez définir leur mise en forme en utilisant des cadres. Voir Chapitre 18, « Utilisation de cadres », page 267.
A propos de l'ajout de contenu
Avec Dreamweaver, vous pouvez sans difficulté ajouter des contenus variés à vos pages Web. Ajoutez des actifs et des éléments de conception, par exemple des textes, des images, des couleurs, des animations, dessons et autres formes de données.
- Tapez directement du texte dans un document Dreamweaver ou importez du texte à partir d'autres documents, puis formatez-le avec l'inspecteur de propriétés de Dreamweaver ou le panneau Styles HTML. Vous pouvez également créé facilement vos propres feuilles de style en cascade. Voir Chapitre 19, « Insertion et mise en forme de texte», page 283.
Utilisez le panneau Actifs pour organiser facilement les actifs sur un site ; vous pouvez ensuite faire glisser la plupart des actifs directement du panneau vers un document Dreamweaver. Voir Chapitre 27, « Utilisation du panneau Actifs », page 448.
- Insérez des images, y compris des images survolées, des cartes graphiques et des images Fireworks. Utilisez les outils d'alignement pour positionner les images dans une page. Voir Chapitre 20, « Insertion d'images», page 311 et Chapitre 21, « Intégration de Dreamweaver à d'autres applications», page 321.
- Insérez d'autres types de ressources dans une page Web : animations Flash, Shockwave ou QuickTime, sons, applets. Voir Chapitre 22, « Insertion d' éléments multimédia », page 337.
- Définissez un contenu accessible à toutes les personnes souffrant de handicaps. Voir Chapitre 23, « Dreamweaver et accessibilité», page 353.
A propos de l'interaktivité et de l'animation
La plupart des pages Web sont statiques, c'est-à-dire qu'elles ne contiennent que du texte et des images. Dreamweaver vous permet de rendre vos pages plus vivantes, en ajoutant des éléments interactifs et des animations pour éveiller l'intérêt des visiteurs. Déclenchez des événements interactifs lorsque les visiteurs se déplacent dans votre site etclinquent dans vos pages,présentez des concepts,animez des éléments de page : en bref, aidez les visiteurs de votre site à faire des découvertes et des expériences passionnantes sans quitter vos pages.
Il existe plusieurs façon d'ajouter de l'interaktivité et de l'animation à vos pages, à l'aide de Dreamweaver :
- Utilisez les comportements pour exécuter des tâches en réponse à des événements spécifique, par exemple l'illumination d'un bouton lorsque l'utilisateur le survôle avec la souris, la validation d'un formulaire lorsque l'utilisateur clique sur le bouton Envoyer, ou l'ouverture d'une deuxième fenêtre lorsque la page principale a fini de se charger. Voir Chapitre 24, « Utilisation des comportements JavaScript», page 369.
- Utilisez des scénarios pour creer des animations qui ne nécessitent pas de plug-ins, de contrôle ActiveX ni d'applets Java. Les scénarios utilisent DHTML pour modifier de façon temporelle la position d'un calque ou la source d'une image, ou pour déclencher automatiquement des comportements après le chargement de la page. Voir Chapitre 25, « Animation de calques », page 401.
A propos de la connexion de pages de votre site
Pour utiliser cette site, vous doivent leçier les pages individuelles les uneux autres en créé des liens HTML et en réutilisant le contenu pour leur donner un aspect homogène.
-
Avec Dreamweaver, vous pouvez creer des liens HTML standard, y compris des ancres et des liens de messagerie, ou configurer facilement des systèmes de navigation graphiques, notamment des menus de reroutage et des barres de navigation. Voir Chapitre 26, « Liens et navigation», page 425.
-
Les modèles et les fichiers de bibliothèque Dreamweaver permettent d'appliquer facilement un contenu réutilisable et des conceptions de page dans votre site. Vous pouvez créé de nouvelles pages à partir d'un modèle Dreamweaver, puis actualiser automatiquement leur mise en forme lorsque le modele change. Voir Chapitre 27, « Gestion des actifs de site, des bibliothèques et des modèles», page 447.
A propos du test et de la publication de votre site
Votre site est terminé et pré à fonctionner ; toutfois, avant de le publier sur un serveur, vous devez le tester. Suivant la taille du projet, les specifications du client et les types de navigateurs utilisés par les visiteurs, déplacez, si besoin est, votre site sur un serveur intermédiaire pour le tester et le modifier. Une fois les corrections effectuees, publiez le site pour qu'il soit accessible aux internautes. ÀpRES la publication du site, mettez en place un cycle de maintenance pour garantir la qualité, répondre aux réactions des utilisateurs etmettre à jour les informations du site.
Utilisez les fonctionnalités de Dreamweaver suivantes pour tester et publier cette site :
-
Pour ajouter de nouvelles balises dans une page ou corriger votre code, recherche le code JavaScript, CSS et HTML en utilisant le panneau Récurrence de Dreamweaver. Voir Chapitre 13, « Accès aux références de langue», page 210.
-
Utilisez le débogueur JavaScript pour corriger les erreurs de JavaScript dans votre code. Cet outil vous permet de définir des points d'arrêt dans le code, puis d'afficher le code lorsqu'une page est mise au point directement dans Dreamweaver. Voir Chapitre 14, « Utilisation du débogueur JavaScript », page 217.
-
Procedez à des vérifications relatives aux navigateurs et aux plug-ins, testez et corriguez les liens dans vos documents et exécutez des rapportés de site pour rechercher les erreurs courantes dans les fichiers HTML. Voir Chapitre 28, « Test d'un site», page 493.
-
Dans le panneau Site de Dreamweaver, vous trouvez de nombreux outils qui vous aideront à gérer votre site, à transférer vos fichiers vers et depuis un serveur distant, à configurer un processus d'archivage/extraction pour empêcher l'écrasement des fichiers et à synchroniser les fichiers sur vos sites locaux et distants. Voir Chapitre 3, « Planification et configuration de votre site», page 57.
A propos de la création de pages dynamiques
Dans Dreamweaver, vous pouvez définir diverses sources de contenu dynamique, y compris des yeux d'enregistements extraits de bases de données, des paramètres de formulaire et des composants JavaBeans. Pour ajouter le contenu dynamique à une page, il suffit de le faire glisser vers cette dernière.
Vou puez définir une configuration de page qui affiche un ou plusieurs enregistements à la fois (ou plusieurs pages d'enregistements), ajoute des liens spéciaux permettant de passer d'une page d'enregistements à une autre et créé des compteurs d'enregistements pour faciliter la gestion de ces derniers.
- Pour savoir comment développer des applications Web dans Dreamweaver, apprenez à utiliser Dreamweaver et à créé des pages dynamiques. Voir Chapitre 29, « Optimisation de l'espace de travail pour tirer parti des fonctions de développement visuel », page 505 et Chapitre 30, « Conception de pages dynamiques dans Dreamweaver», page 515.
- Définissez et affichez un contenu dynamique dans vos pages. Voir Chapitre 31, « Stockage et récapération des données spécifiques à une page», page 523, Chapitre 32, « Définition de sources de contenu dynamique», page 535, Chapitre 33, « Ajout d'un contenu dynamique à une page Web », page 553 et Chapitre 34, « Affichage des enregistements de base de données», page 561.
- Encapsulez la logique d'application ou d'entreprise en faisant appel aux technologies de pointe, telles que les composants ColdFusion et les services Web. Voir Chapitre 35, « Utilisation des composants ColdFusion », page 579 et Chapitre 36, « Utilisation des services Web », page 585.
- Créez vos propres comportements de serveur et formulaires interactifs. Voir Chapitre 37, « Ajout de comportements de serveur personnalisés», page 595 et Chapitre 38, « Création de formulaires interactifs», page 613.
A propos du développement rapide d'applications
Dreamweaver propose différents outils de développement rapide d'applications, notamment les comportements de serveur et les objets d'application qui permettent de creator des applications Web sophistiquées sans avoir à rédigier du code côté serveur.
- Vous pouvez ainsi creer rapidement des pages qui recherchent et modifie des bases de données, puis affichent les résultats. Voir Chapitre 39, « Création d'un ensemble de pages Principale-Détails», page 639, Chapitre 40, «Création de pages pour l'execution de recherches dans les bases de données», page 647 et Chapitre 41, «Création de pages permettant de modifier des bases de données», page 661.
- Restreignez l'accès à vos pages pour garantir la sécurité des informations. Voir Chapitre 42, « Création de pages limitant l'accès à votre site», page 683.
Par ou débuter
Ce guide contient des informations destinées à des lecteurs ayant divers niveaux d'expérience. Pour tirer le meilleur parti de cette documentation, commencez par dire les sections qui correspondent le mieux à votre situation.
Pour les concepteurs Web qui début :
1 Commencez par litre les deux premiers chaprites du guide Bien demarrer avec Dreamweaver MX. Si ces chaprites contiennent des sections qui vous semble trop avances ou trop complexes, passez-les et revenez-y ulterieurement.
2 Dans Utilisation de Dreamweaver, lisez le Chapitre 2, « Exploration de l'espace de travail», page 31, le Chapitre 3, « Planification et configuration de votre site», page 57, Chapitre 4, « Gestion du site», page 71 et le Chapitre 5, « Configuration d'un document», page 111.
3 Lisez le Chapitre 17, « Le mode de Mise en forme», page 253 pour en savoir plus sur la mise en forme de pages.
4 Lisez le Chapitre 19, « Insertion et mise en forme de texte », page 283 et le Chapitre 20, « Insertion d'images », page 311 pour en savoir plus sur le formatage de texte et l'ajout d'images à vos pages.
5 C'est tout ce dont vous avez besoin pour commencer a réaliser des sites Web de qualite ; lorsque vous vous sentirez pret a utiliser des outils plus sophistiqués, liquez les autres chapitres dans l'ordre. Si vous le souhaitez, vous pouvez d'abord vous familiariser avec la creation de pages Web, puis dire ces chapitres.
Pour les concepteurs Web experimentés qui utilisent Dreamweaver pour la première fois :
1 Commencez par litre les deux premiers chapitres du guide Bien demarrer avec Dreamweaver MX.
2 Dans Utilisation de Dreamweaver, lisez le Chapitre 2, « Exploration de l'espace de travail», page 31 pour en savoir plus sur l'interface utilisateur de Dreamweaver.
3 Bien que vous connaissiez la plupart des sujets abordés dans le Chapitre 3, « Planification et configuration de votre site », page 57 et le Chapitre 4, « Gestion du site », page 71, parcourez ces chapitres pour savoir comment ces concepts sont implémentés dans Dreamweaver. Concentrez-vous sur les sections expliquant comment configurer un nouveau site dans Dreamweaver.
4 Suivez les étapes des didacticiels qui vous interèssent pour en savoir plus sur l'execution de tâches spécifiques dans Dreamweaver. Pour afficher les didactériels dans le système d'aide,CHOISSEZ Aide > Didacticiels.
5 Voir Chapitre 19, « Insertion et mise en forme de texte», page 283 et Chapitre 20, « Insertion d'images», page 311, pour obtenir des informations utiles sur la création de pages HTML simples dans Dreamweaver.
6 Lisez la presentation au début des autres chapitres pour savoir si les sujets abordés sont susceptibles de vous interesser.
Pour les codeurs manuels experimentés :
1 Commencez par litre les premier et troisieme chapitres du guide Bien demarrer avec Dreamweaver MX.
2 Dans Utilisation de Dreamweaver, lisez le Chapitre 2, « Exploration de l'espace de travail», page 31 pour en savoir plus sur l'interface utilisateur de Dreamweaver.
3 Bien que vous connaissiez la plupart des sujets abordés dans le Chapitre 3, « Planification et configuration de votre site », page 57 et le Chapitre 4, « Gestion du site », page 71, parcourez ces chapitres pour savoir comment ces concepts sont implémentés dans Dreamweaver. Concentrez-vous sur les sections expliquant comment configurer un nouveau site dans Dreamweaver.
4 Lisez le Chapitre 12, « Configuration d'un environnement de codage», page 181, le Chapitre 13, « Codage dans Dreamweaver», page 197, le Chapitre 14, « Optimisation et débogage de code», page 211 et le Chapitre 15, « Modification du code en mode Création», page 225 pour en savoir plus sur le codage dans Dreamweaver.
5 Lisez la presentation au début des autres chapitres pour savoir si les sujets abordés sont susceptibles de vous interesser.
Pour les concepteurs Web experimentés qui connaissent bien Dreamweaver et souhaitent en apprende davantage sur la création de pages dynamiques :
1 Commencez par litre les premier, quatrième et cinquième chapitres du guide Bien démarrer avec Dreamweaver MX:
2 Dans Utilisation de Dreamweaver, parcourez le Chapitre 2, « Exploration de l'espace de travail», page 31 pour en savoir plus sur les nouveaux aspects de l'interface utilisateur de Dreamweaver.
3 Configurez un serveur Web et un serveur d'application ; voir le Chapitre 6, « Configuration d'une application Web», page 133.
4 Connectez-vous à une base de données. Selon la technologie de serveur utilisé par le serveur d'application, voir le Chapitre 7, « Connexions à des bases de données pour les développpeurs ColdFusion», page 145, le Chapitre 8, « Connexions à des bases de données pour les développpeurs ASP.NET», page 151, le Chapitre 9, « Connexions à des bases de données pour les développpeurs ASP», page 157, le Chapitre 10, « Connexions à des bases de données pour les développpeurs JSP», page 169 ou le Chapitre 11, « Connexions à des bases de données pour les développpeurs PHP», page 177.
5 Lisez la presentation au début des autres chapitres pour savoir si les sujets abordés sont susceptibles de vous interesser.
6 Si vous souhaitez personneler Dreamweaver manuellement, consultez la section « Customizing Dreamweaver » du centre de support de Macromedia à l'adresse suivante : http://www.macromedia.com/go/customizing_dreamweaver. Si vous poulez écrire des extensions pour Dreamweaver, lisez Extension de Dreamweaver (Aide > Extension de Dreamweaver).
Pour les développpeurs d'applications Web experimentés qui n'ont jamais utilisé Dreamweaver ni UltraDev :
1 Commencez par parcourir le guide Bien démarrer avec Dreamweaver MX pour vous familiariser avec les notions de base de Dreamweaver.
2 Dans Utilisation de Dreamweaver, lisez le Chapitre 2, « Exploration de l'espace de travail», page 31 pour en savoir plus sur l'interface utilisateur de Dreamweaver.
3 Bien que vous connaissiez la plupart des sujets abordés dans le Chapitre 3, « Planification et configuration de votre site », page 57 et le Chapitre 4, « Gestion du site », page 71, parcourez ces chapitres pour savoir comment ces concepts sont implémentés dans Dreamweaver. Concentrez-vous sur les sections expliquant comment configurer un nouveau site dans Dreamweaver.
4 Suivez les étapes des didacticiels qui vous interèssent pour en savoir plus sur l'execution de tâches spécifiques dans Dreamweaver. Pour afficher les didactériels dans le système d'aide,CHOISSEZ Aide > Didacticiels.
5 Configurez un serveur Web et un serveur d'application à l'aide de Dreamweaver ; voir le Chapitre 6, « Configuration d'une application Web», page 133.
6 Connectez-vous à une base de données. Selon la technologie de serveur utilisé par le serveur d'application, voir le Chapitre 7, « Connexions à des bases de données pour les développpeurs ColdFusion», page 145, le Chapitre 8, « Connexions à des bases de données pour les développpeurs ASP.NET», page 151, le Chapitre 9, « Connexions à des bases de données pour les développpeurs ASP», page 157, le Chapitre 10, « Connexions à des bases de données pour les développpeurs JSP», page 169 ou le Chapitre 11, « Connexions à des bases de données pour les développpeurs PHP», page 177.
7 Lisez la presentation au début des autres chapitres pour savoir si les sujets abordés sont susceptibles de vous interesser.
Pour les développpeurs d'applications Web experimentés qui ont déjà utilisé UltraDev 4 :
1 Commencez par litre Chapitre 1, « Nouveautés de Dreamweaver MX », page 25.
2 Dans Utilisation de Dreamweaver, parcourez le Chapitre 2, « Exploration de l'espace de travail», page 31 pour en savoir plus sur les nouveaux aspects de l'interface utilisateur de Dreamweaver.
3 Si vous souhaitez personneler Dreamweaver manuellement, consultez la section « Customizing Dreamweaver » du centre de support de Macromedia à l'adresse suivante : http://www.macromedia.com/go/customizing_dreamweaver. Si vous voulez écrire des extensions pour Dreamweaver, lisez Extension de Dreamweaver (Aide > Extension de Dreamweaver).
Conventions typographiques
Ce manuel utilise les conventions typographiques suivantes :
- Les éléments de menus sont indiqués de la manière suivante : nom du menu > nom de l'objet de menu. Les éléments de sous-menus sont indiqués de la manière suivante : nom du menu > nom du sous-menu > nom de l'objet de menu.
- Police de code indique les noms des balises et attributs HTML, ainsi que le texte utilisé littéralement dans les exemples.
- Police de code en italieque indique les éléments replacables (parfois appelés métasymboles) dans le code.
- Texte en gras indique le texte que vous doivent saïr exactement à l'identique.
Nouveautés de Dreamweaver MX
Dreamweaver MX intégre de nombreuses nouvelles fonctions, telles que des modèles améliorés plus facies à utiliser par les concepteurs visuels et de nouvelles options de codage. Dreamweaver inclut également toutes les fonctions de développement d'application de Dreamweaver UltraDev 4 ainsi que de nouvelles fonctions, telles qu'un espace de travail centré sur le code extrait de Macromedia ColdFusion Studio, un code d'exécution amélioré et une prise en charge des technologies d'application Web les plus récentes.
Contrôle intégral du code et de la conception
Voupe ou creer le site de suaive choix en utilisant les outils de conception ou l'environnement de codage riche de Dreamweaver MX.
Un nouvel espace de travail intégré (Microsoft Windows uniquement) offre un environnement de travail plus convivial doté d'une interface MDI à plusieurs documents, y compris des panneaux ancrables et des fenêtres de document à anglets.
La gestion des panneaux Macromedia MX dans Dreamweaver MX est parfaitement adaptée au fonctionnement des panneaux dans Macromedia Flash MX et Fireworks MX. Vous pouvez regrouper des panneaux réductibles et ancrables ou les réduire et les développer pour faciliter le déroulement des opérations.
Des exemples de composants Web prédéfinis proposent des mises en forme de qualité que vous pouze utiliser pour creer immédiatement des conceptions professionnelles ainsi que des bibliothèques de fonctions JavaScript. Grâce à ces bibliothèques, vous pouze acceder directement à l'interface sophistiquée côté client sans devoir dire des centaines de pages de manuels.
Des modèles Dreamweaver améliorés vous permettent de définir des règles sophistiquées afin que les contributeurs puisent saïrir du contenu sans alterer la conception du site. L'héritage de modèle permet de nouveaux contrôle les mises en forme personalisées et les régions modifiables facilitent la saisie des données par les contributeurs.
L'assistant
L'assistant: L'assistant.
Les indicateurs de code permettent d'acceder facilement à des menus personalisés contenant des attributs de balises appropriés, des propriétés de méthode, des paramètres de fonction et des styles CSS lorsque vous apportez des modifications en mode Code.
La barre Insertion personnalisable, entierement extensible, permet d'acceder rapidement aux objets et comportements de Dreamweaver MX.
La barre d'outils de document peut désormais être personnalisée en fonction de vos besoin et de vos préférences, à l'aide de XML et JavaScript.
Un explorateur de fichiers est maintainant intégré au panneau Site pour que vous puissiez parcourir les actifs et les fichiers sur le bureau, ainsi que les volumes de réseau, sans quitter Dreamweaver pour utiliser l'explorateur de fichiers de votre système d'exploitation.
Le panneau Réponses vous connecte directement aux ressources en ligne du centre de support de Macromedia. Vous pouvez extraire les nouvelles informations quand bon vous semble et bénéficier des conseils et astuces les plus récents.
Une meilleure manipulation des tableaux permet de générer un code amélioré lorsque vous modifie des tableaux en modes Mise en forme et Standard, de rationaliser la gestion des attributs et d'homogénéisér toutes les mises en forme afin d'assurer une compatibilité entre navigateurs.
Les menus JavaScript en cascade peuvent désormais être créés directement dans Dreamweaver MX ( cette fonction n'étaitAAParavant disponible que dans Fireworks).
La coloration de syntaxe est maintainant entièrement configurable et personnalisable en fonction de vos besoin individuels.
La barre d'outils standard permet d'acceder rapidement aux commandes de fichiers usuelles (Ouvrir, Enregisterr et Nouveau) et aux commandes du Presse-papiers.
L'impression en mode Code permet désormais d'imprimer le code source sans appliquer de formatting.
Prise en charge améliorée des technologies de serveur les plus récentes
Creez rapidement des applications Web dynamiques reposant sur des bases de données, soit en faisant appel au codage manuel, soit en utilisant des objets et des comportements visuels.
Les bibliothèques de code serveur pour ColdFusion, ASP, ASP.NET, JSP et PHP vous permettent de creer des sites Web dynamiques à l'aide des technologies cote serveur les plus évoluées. Utilisez un environnement de développement pour faciliter l'intégration avec divers sites et technologies de pointe.
Le panneau Fragments de code vous permet de stocker des portions de code arbitraires afin de les réutiliser ultérieurement. Ainsi, vous pouvez facilement réutiliser des codes, mises en forme et fonctions complexes.
L'éditeur de la bibliothèque de balises fournit une base de données de balises intégrées dans laquelle sont stockées des informations sur les balises d'origine et les balises personalisées. Il permet de modifier les propriétés des balises existantes et d'en importer de nouvelles.
Des centaines d'éditeurs de balises permettent de modifier rapidement les attributs appropriés de balises spécifique HTML, CFML et ASP.NET lorsque le mode Code est activé.
La prise en charge des balises personnalisées ASP.NET vous permet d'importer des commandes de serveur ASP.NET (balises personnalisées) dans des pages ASP.NET, et d'afficher leur structure ainsi que leurs attributs dans le sélection de balises, les indicateurs de code et l'inspecteur de balises.
Les balises de formulaires Web ASP.NET sont maintenant rendues dans les environnementles Macintosh et Windows pour permettre une visualisation et une modification sophistiquées. Les éditeurs de balises de formulaires Web vous permettent de créé rapidement des formulaires Web ASP.NET à l'aide de commandes côté serveur et de validation.
Les objets ASP.NET Grille de données et Liste de données peuvent être créés facilement dans Dreamweaver MX pour réaliser des opérations complexes d'affichage et de manipulation des données.
Un panneau Base de données intégré vous permet de consulter rapidement la structure et le contenu de vos bases de données et de parcourir les tableaux, les procédures enregistrées et les modes avant de définir des requêtes.
Le Sélecteur de balises affiche la structure de toutes les balises disponibles dans Dreamweaver MX, y compris celles qui ont été importées via l'éditeur de la bibliothèque de balises. Utilisez-le pour placer et modifier rapidement les balises dans vos pages, et pour afficher les informations de référence correspondantes.
Une base de données de balises XML personnalisable enregistrre des informations sur la structure de toutes les balises disponibles. Ce mécanisme central de stockage des informations permet d'utiliser les indicateurs de code, le sélecteur de balises et l'inspecteur de balises avec des balises d'origine ou les balises personalisées que vous avez importées.
La détction ColdFusion MX autorise la configuration automatique de l'assistant de définition d'un site dans le cadre de la définition d'un site ColdFusion à partir d'une copie locale de Macromedia ColdFusion MX Developer Edition.
Le panneau Débogage du serveur pour ColdFusion MX rationalise le déroulement des opérations de débogage pour ColdFusion MX en affichtant les résultats du débogage directement dans Dreamweaver MX. Affichez des informations sur les variables ou les requêtes ou autres statistiques de page essentielles, et passez directement aux sections problématiques sans quitter l'environnement de développement.
Le code d'exécution ColdFusion géné ré par les comportements de serveur et les objets Dreamweaver MX a été remanié ; il est davantage orienté vers les balises, ce qui le rend pratiquement identique au code rédigé manuellement par un développement.
La prise en charge RDS vous permet de transférer des fichiers et de parcourir la structure des bases de données sur les serveurs ColdFusion via des connexions RDS.
Les bibliothèques de balises JSP facilitent le travail des développements en extrayant la logique de serveur des pages JSP. Dreamweaver MX peut importer des informations de la bibliothèque de balises JSP à partir de fichiers TLD (Tag Library Descriptor) et les afficher dans les indicateurs de code, le sélectionur de balises et l'inspecteur de balises.
L'introspection JavaBeans compte affiche les méthodes getProperty et setProperty de JavaBeans dans le panneau Liaisons. Elle peut également afficher toutes les méthodes et propriétés de JavaBeans dans le panneau Composants afin que les développpeurs puissant intégrer complètement les Beans dans leurs applications JSP.
Les objets de formulaire dynamiques vous permettent de creer des listedes de selection reposant sur des bases de données ainsi que d'autres éléments de formulaire en selectionnant l'objet de formulaire approprié dans la barre Insertion.
Le creator de comportements de serveur d'UltraDev 4 a eté amélioré pour permettre aux utilisateurs de creer des comportements de serveur avec des éléments d'interface utiliser plus complexes, tels que des cases à cocher, des groupes de boutons radio et des menus de connexion.
La combinaison intégrée de HomeSite 5 et ColdFusion Studio 5 fournit une version sous licence de HomeSite+ qui regroupe ColdFusion Studio et HomeSite 5, entière intérégés dans Dreamweaver MX.
Accès simplifié aux normes les plus récentes
Creez des sites Web conformes aux normes Web les plus récentes, y compris les services Web et XML, et mettez vos connaissances à jour en faisant appel à des technologies de développement de pointe.
L'introspection de services Web pour ASP.NET, ColdFusion et Java vous permet de tirer parti des dernières normes de service Web XML intégrées aux technologies de serveur les plus évoluées. Incorporez des fonctionnalités complexes dans vos applications Web en utilisant la fonction d'introspection de service Web de Dreamweaver MX.
La validation et la modification XML vous permettent d'importer des fichiers DTD et des schémas, et deisser des documents de qualité.
La prise en charge CSS améliorée, notamment l'intégration TopStyle, vous aide à creer des sites conformes aux normes de feuilles de styles CSS (Cascading Style Sheets). Le panneau CSS de Dreamweaver MX permet désormais d'afficher des styles définis en interne et en externe, et de créé des feuilles de style au moment de la conception. De nombreux éléments CSS2 sont également pris en charge. L'inspecteur de propriétés de texte peut également être utilisé pour appliquer des styles CSS.
La prise en charge XHTML vous permet d'utiliser des sites conformes aux toutes dernières normes de conception HTML en configurant Dreamweaver MX de sorte qu'il génére du code XHTML. En outre, cette prise en charge convertit rapidement les fichiers HTML hérités en fichiers XHTML à l'aide du convertisseur XHTML.
La génération de rapportes de site sur l'accessibilité (Section 508) vous aide à déterminer si votre site est conforme aux directives d'accessibilité et signale rapidement les problèmes.
La reférence d'accessibilité du panneau Réréquence fournit des informations contextuelles de base sur les更好地 pratiques utilisées pour reconvoir des sites accessibles.
L'option d'accessibilité utilisée pour la génération de code conforme vous aide à créé un code conforme aux directives d'accessibilité pendant la phase de modification. Configurez Dreamweaver de celle sorte qu'un message vous invite à saisir des attributs d'accessibilité spécifique lorsque des balises et objets appropriés sont insérés sur la page.
La prise en charge de composants ColdFusion offre une modularité et une portabilité de logique de serveur accrues en exposant les propriétés via CFML (service Web) ou la passerelle du serveur d'applications Flash. Dreamweaver MX prend en charge l'introspection, la création et la modification des composants ColdFusion.
Levalidateur de code assure la conformité de vos documents aux normes appropriées en générant un rapport de validation en fonction d'un profil de navigateur ou d'une version de norme spécifique (norme transitionnelle XHTML et HTML 4.0).
La fonction de lancement et de modification de Macromedia Flash MX et Fireworks MX accélère la modification des graphiques, des animations et des fischiers HTML entre Dreamweaver MX, Fireworks MX et Flash MX, si bien que vous pouvez lancer et optimiser directement vos images à partir de Dreamweaver.
L'inspecteur de balises utilisé pour afficher les balises XML, HTML et CFML vous permet de consulter rapidement la structure d'un document. Vous pouvez détecter et éliminer rapidement les relations de type parent et les niveaux d'imbrication incorrects sansaminer le code source brut.
La connexion FTP sécurisée s'intègre à MacSSH et PUTTY pour Windows pour permettre le transfert sécurisé SSH des informations de connexion à partir du client FTP Dreamweaver intégré.
Une prise en charge complète du jeu de caractères UTF-8 dans toutes les langues vous permet de créé et de convertir des pages à l'aide du codage UTF-8.
Une prise en charge complète Mac OS X et Windows XP permet à Dreamweaver MX de tourner à une vitesse maximale sur les systèmes d'exploitation les plus récents tout enPNant en charge les dernières améliorations apportées à l'interface utilisateur.
L'intégration Sitesprint de Macromedia vous permet de:gérer la production et les clients de manière optimale dans l'espace de travail Dreamweaver.
Ressources sur le langage HTML et les technologies Web
Voici quelques ressources utiles disponibles sur le Web :
La spécification HTML 4.01 (http://www.w3.org/TR/REC-html40/) est la spécification officielle du code HTML du World Wide Web Consortium.
Index DOT HTML (http://www.blooberry.com/indexdot/html/) affiche une liste complète des balises, attributs et valeurs HTML, ainsi que leur compatibilité respective avec les divers navigateurs.
La Specification XHTML 1.0 (http://www.w3.org/TR/xhtml1/) est la spécification officielle du langage XHTML (Extensible HyperText Markup Language).
Le site O'Reilly XML.com (http://www.xml.com) propose des informations, des didacticiels et des conseils sur XML (Extensible Markup Language) et autres technologies Web.
Les specifications Cascading Style Sheets, niveau 1 (CSS1) (http://www.w3.org/TR/REC-CSS1) et niveau 2 (CSS2) (http://www.w3.org/TR/REC-CSS2/) sont des spécifications officielles des feuilles de style CSS, par le World Wide Web Consortium.
Le guide de référence des feuilles de style de WebReview.com (http://www.webreview.com/style/index.shtml)TRAITE DES STYLES CSS et de leur compatibilité avec les divers navigateurs.
Les pages ASP de Microsoft (http://msdn.microsoft.com/workshop/server.asp/ASPower.asp) proposent des informations sur les pages de serveur actives ASP (Active Server Pages).
La page ASP.NET de Microsoft (http://www.asp.net/) propose des informations sur ASP.NET.
Page JSP de Sun (http://java.sun.com/products/jsp/): informations sur les pages JSP (pages JavaServer).
Les pages PHP (http://www.php.net/) proposent des informations sur PHP (PHP Hypertext Preprocessor).
Le site MySQL (http://www.mysql.com/) propose des informations sur MySQL.
Entities Table (http://www.bbsinc.com/iso8859.html) présente la liste des noms d'entities utilisées dans le codage ISO 8859-1 (Latin-1).
La page des événements HTML dynamiques (http://msdn.microsoft.com/workshop/author/dhtml/reference/events.asp#om40_event) offre des informations sur la gestion des événements dans Microsoft Internet Explorer.
La page sur le produit ColdFusion de Macromedia (http://www.macromedia.com/fr/software/coldfusion/) propose des informations sur ColdFusion.
La page sur le produit JRun Server de Macromedia (http://www.macromedia.com/fr/software/jrun/) propose des informations sur le serveur d'application JRun Java.
La page WebSphere d'IBM (http://www.ibm.com/software/webservers/appserv/) propose des informations sur le serveur d'application WebSphere.
La page Chili!Soft (http://www.Chilisoft.com/products/) propose des informations sur le serveur d'application Sun Chili!Soft ASP.
JavaScript Bible, par Danny Goodman (IDG Books), couvre de façon exhaustive le langage JavaScript 1.2.
JavaScript: The Definitive Guide, par David Flanagan (O'Reilly & Associates), propose des informations de referencia sur chaque fonction, objet, méthode, propriété et gestionnaire d'événements de JavaScript.
CGI Scripts for Fun and Profit (http://www.hotwired.lycos.com/webmonkey/99/26/index4a.html) est un article du site Hotwired Webmonkey sur l'incorporation de scripts CGI (Common Gateway Interface) prêts à l'emploi dans vos pages.
Le site CGI Resource Index (http://www.cgi-resources.com/) est un site de referencia sur tout ce qui concerne le CGI, avec des scripts prêts à l'emploi, de la documentation, des manuels et même des programmes à votre disposition.
Le site Common Gateway Interface (http://hoohoo.ncsa.uiuc.edu/cgi/) comporte une presentation des scripts CGI.
CHAPITRE 2
Exploration de l'espace de travail
Pour utiliser au moyen Macromedia Dreamweaver MX, vous doivent bien comprendre les concepts de base du fonctionnement de l'espace de travail de Dreamweaver afin de pouvoir désirir les options, utiliser les inspecteurs et les panneaux et définir les préférences qui convennent le mieux à votre façon de travailler.
Ce chapitre contient les rubriques suivantes :
- « Utilisation de l'espace de travail de Dreamweaver», page 31
- « Utilisation des fenêtres et des panneaux dans Dreamweaver», page 37
- « Utilisation de Dreamweaver avec d'autres applications», page 50
- « Personnalisation de Dreamweaver : notions de base», page 51
Utilisation de l'espace de travail de Dreamweaver
Cette section déscrit les principaux éléments de l'espace de travail sous Windows et Macintosh, et explique commentCHOISIR une PRESENTATION initiale de l'espace de travail sous Windows.
Sous Windows, Dreamweaver MX propose deux presentations: un espace de travail intégré en une seule fenêtre contenant tous les éléments et un espace de travail flottant ressemblant beaucoup à celui de la version 4 de Dreamweaver.
Sur Macintosh, seule la presentation d'espace de travail flottant est disponible. Voir « A propos de la presentation de l'espace de travail flottant (sous Windows et Macintosh)», page 35.
Choix de la presentation de l'espace de travail (sous Windows uniquement)
Sous Windows, la première fois que vous démarrez Dreamweaver, une boîte de dialogue s'ouvre, vous permettant deCHOISIR LA PRESENTATION DE L'espace de travail. Vous pourrezCHOISIR un autre type de presentation ultérieurement, à partir de la boîte de dialogue Preférences.
PourCHOISIR LA PRESENTATION DE I'ESPACE DE TRAVIL :
Selectionnez l'une des options suivantes :
Espace de travail Dreamweaver MX : il s'agit d'un espace de travail intégré utilisant l'interface MDI (Multiple Document Interface), dans laquelle toutes les fenêtres de document et tous les panneaux sont rassemblés dans une grande fenêtre d'application, les groupes de panneaux étant ancrés sur la droite. C'est la presentation recommendée pour la plupart des utilisateurs.
Remarque: ce guide de l'utilisateur suppose dans sa majeure partie que vous utilisez l'espace de travail Dreamweaver MX intégré.
Espace de travail Dreamweaver MX, HomeSite/Style Codeur : il s'agit du même espace de travail intégré, mais avec les groupes de panneaux ancrés sur la gauche, dans une presentation similaire à celle utilisée par Macromedia HomeSite et Macromedia ColdFusion Studio. Les fenêtres de document affichent le mode Code par défaut. Cette presentation est recommendée pour les utilisateurs de HomeSite ou ColdFusion Studio et les autres utilisateurs habitués au codage manuel qui préférent travailler dans un espace de travail familier. Pour désirir cette presentation,CHOISSEZ l'options Espace de travail Dreamweaver MX, puis choisissez l'options HomeSite/Style Codeur.
Remarque: ces deux espaces de travail intégrés autorisent l'ancrage des groupes de panneaux à droite ou à gauche.
Espace de travail Dreamweaver 4: il s'agit d'une presentation de l'espace de travail ressemblant à celle utilisée dans Dreamweaver 4, chaque document s'affichant dans une fenêtre flottante individuelle. Les groupes de panneaux sont ancrés ensemble, mais ils ne sont pas ancrés dans une même fenêtre d'application. Cette presentation est uniquement commandeé aux utilisateurs de Dreamweaver 4 qui préférent conserver un espace de travail qui leur est familier.
Pour changer la presentation de l'espace de travail après lechioix initial :
1 Choisissez Edition > Préférences.
2 Sélectionnéz la catégorie Général dans la liste de gauche, si cela n'est pas déjà fait.
3 Cliques sur le bouton Changer d'espace de travail.
4 Sélectionnez une presentation et cliquez sur OK.
Un message d'advertissement vous indique que la nouvelle presentation sera activée lors du prochain redémarrage de Dreamweaver.
5 Cliquez sur OK pour fermer la fenetre du message d'advertissement.
6 Cliquez sur OK pour fermer la boite de dialogue Preférences.
7 Quittez et redemarrez Dreamweaver.
A propos de l'espace de travail Dreamweaver MX intégré (sous Windows uniquely)
Dans l'espace de travail Dreamweaver MX intégré, sous Windows, toutes les fenêtres et tous les panneaux sont rassemblés dans une plus grande fenêtre d'application.
L'espace de travail HomeSite/Style Codeur contient les mêmes éléments, mais avec les groupes de panneaux ancrés sur la gauche (au lieu de la droite). Dans cette presentation de l'espace de travail, l'inspecteur de propriétés est réduit par défaut et la fenêtre de document s'affiche en mode Code par défaut.
L'espace de travail intégré n'est pas pris en charge sur Macintosh. L'espace de travail Macintosh se compose de fenêtres et de panneaux flottants. Sous Windows, les utilisateurs peuvent passer à la presentation de l'espace de travail flottant à partir de la boîte de dialogue Préférences. Pour plus d'informations, voir « Choix de la presentation de l'espace de travail (sous Windows uniquement)», page 32.
Pour une presentation rapide des fenêtres et des panneaux, voir « A propos des fenêtres et des panneaux», page 36. Pour plus d'informations sur des fenêtres et des panneaux spécifique, voir « Utilisation des fenêtres et des panneaux dans Dreamweaver», page 37.
A propos de la presentation de l'espace de travail flottant (sous Windows et Macintosh)
Dans la presentation de l'espace de travail de style Dreamweaver 4, chaque document est localisé dans une fenêtre individuelle. Les groupes de panneaux sont initialement ancrés ensemble, mais vous pouvez les séparer pour les faire apparaitre dans leur propre fenêtre.
Dans l'espace de travail flottant, les fenêtres s'alignent automatiquement les unes sur les autres sur les côtes de l'écran, et sur la fenêtre du document au fur et à mesure que vous les faites glisser ou que vous les redimensionné. Ceci facilitite le déplacement et la réorganisation des différents panneaux et fenêtres flottants dans Dreamweaver.
Sous Windows, les utilisateurs peuvent passer à l'espace de travail intégré (tous les éléments dans une fenêtre) à partir de la boîte de dialogue Préférences. Pour plus d'informations, voir « Utilisation de l'espace de travail de Dreamweaver », page 31.
Pour une presentation rapide des fenêtres et des panneaux, voir « A propos des fenêtres et des panneaux», page 36. Pour plus d'informations sur des fenêtres et des panneaux spécifique, voir « Utilisation des fenêtres et des panneaux dans Dreamweaver», page 37.
A propos des fenêtres et des panneaux
Cette section déscrit rapidement quelques éléments qui apparaissent dans les espaces de travail flottant et intégré. Pour plus d'informations sur des fenêtres et des panneaux spécifique, voir « Utilisation des fenêtres et des panneaux dans Dreamweaver», page 37.
La fenêtre Bienvenue fournit des conseils de configuration de l'espace de travail selon les besoin, ainsi que des informations sur les nouvelles fonctionnalités de Dreamweaver à l'attention des utilisateurs des versions précédentes du logiciel.
La barre Insertion contient des boutons permettant d'insérer divers types d'« objets », tels que des images, tableaux et calques dans un document. Chaque objet est une portion de code HTML vous permettant de définir des attributs lors de son insertion. Par exemple, vous pouvez insérer une image en cliquant sur l'icone Image dans la barre Insertion. Si vous le préférez, vous pouvez insérer les objets à partir du menu Insertion.
La barre d'outils du document contient des boutons et des menus déroulants permettant d'acceder aux différents modes d'affichage de la fenêtre du document (tehs que le mode Création ou le mode Code), de définir les différentes options d'affichage et d'effectuer certaines opérations courantes, telles que la prévisualisation dans un navigateur.
La barre d'outils standard (non visible dans la presentation de l'espace de travail par défaut) 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,CHOISSEZ AFFICHAGE > Barres d'outils > Standard.
La fenêtre de document affiche le document que vous creez et modifiez.
L'inspecteur de propriétés permet de visualiser et de modifier diverses propriétés de l'objet ou du textile sélectionné. Chaque objet contient des propriétés différentes. Par défaut, l'inspecteur de propriétés n'est pas développé dans la presentation de l'espace de travail Style Codeur.
Le sélecteur de balises dans la barre d'etat, au bas de la fenêtre de document, affiche la hierarchie des balises entourant la sélection courante en mode Création. Cliquez sur une balise quelconque dans la hierarchie pour la sélectionner avec son contenu. Le sélecteur de balises n'est pas visible en mode Code ; il n'est donc pas visible par défaut dans l'espace de travail Style Codeur. Pour plus d'informations, voir « Modification du code à l'aide du sélecteur de balises », page 229.
Les groupes de panneaux sont des ensembles de panneaux associés regroupés sous un même titre. Pour développer un groupe de panneaux, cliquez sur la flèche d'agrandissement située à gauche du nom du groupe; pour détacher un groupe de panneaux, faites glisser la poignée d'ancrage sur le côté gauche de la barre de titre du groupe.
Le panneau Site permet de:gérer les fichiers et les dossiers composant votre site. Pour plus d'informations,voir « A propos du panneau Site»,page 72. Il permet egressement d'afficher tous les fichiers situés sur votre disque local,tout comme l'Explorateur Windows (Windows) ou le Finder (Macintosh).
La barre du lanceur (non affichée dans la presentation de l'espace de travail par défaut) affiche des boutons dans la barre d'etat pour l'ouverture et la fermeture des panneaux et des inspecteurs les plus utilisés. Pour visualiser la barre du lanceur et spécifique les icones que vous pouzey afficher, voir « Définition des préférences des panneaux », page 48.
Dreamweaver propose de nombreux autres inspecteurs, panneaux et fenêtres qui ne sont pas illustrés ici, tels que le panneau Historique et l'inspecteur de code. La plupart des panneaux peuvent être anciés entre eux pour former des groupes de panneaux. Pour ouvrir les panneaux, inspecteurs et fenêtres Dreamweaver, utilisez le menu Fenêtre. Une coche en regard d'un élément dans le menu Fenêtre indique que l'élement est ouvert (il est possible qu'il n'apparaisse pas à l'écran s'il est masqué derrière d'autres fenêtres). Pour afficher un élément qui n'est pas déjà ouvert, cliquez sur son nom dans le menu.
Si vous n'arrivez pas à localiser un panneau, un inspecteur ou une fenêtre indiqués comme ouverts,CHOISSEZ Fenetre > Reorganiser les panneaux pour partager tous les panneaux ouverts a l'écran.
Utilisation des fenêtres et des panneaux dans Dreamweaver
Cette section explique comment utiliser les divers panneaux, fenêtres, barres d'outils, inspecteurs et autres éléments spécifique de l'espace de travail Dreamweaver.
A propos de la fenetre de document
La fenêtre de document affiche le document courant. Vous pouvez désirier parmi les modes d'affichage suivants :
- Mode Création: environnement de création pour la mise en forme visuelle des pages, l'édition visuelle et le développementrapide d'applications. Dans ce mode, Dreamweaver affiche une représentation visuelle entierement 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 dynamiquependant que vous travailliez sur le document (voir « Affichage des données dynamiques en mode Création », page 508).
- Mode Code : environnement de codage manuel pour rédigier et modifier du code HTML, JavaScript et de langage de serveur, tel que le langage ASP (Microsoft Active Server Pages) ou CFML (ColdFusion Markup Language), ou tout autre type de code. Pour plus d'informations, voir Chapitre 13, « Codage dans Dreamweaver», page 197.
Mode Code et Creation : environnement mixte affichant les modes Creation et Code du document dans une meme fenetre.
Pour passer rapidement entre les deux modes, appuyez sur les touches Ctrl+tilde (-) (Windows) ou Commande+guilmet simple d'ouverture (') (Macintosh).
Lorsque la fenêtre de document dispose d'une barre de titre, cette dernière affiche le titre de la page, et, entre parentheses, 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 presentation de l'espace de travail intégré (sous Windows uniquement), elle s'affiche sans barre de titre ; le titre de la page, ainsi que le chemin et le nom du fichier s'affichent dans la barre de titre de la fenêtre principale de l'espace de travail.
A propos de la barre d'etat
La barre d'etat, située au bas de la fenêtre de document, fournit des informations supplémentaires sur le document en cours de création.
Le sélecteur de balises affiche la hierarchie des balises entourant la sélection courante. Cliquez sur une balise quelconque dans la hierarchie pour la sélectionner avec son contenu. Cliquez sur
pour selectionner tout le corps du document. Pour définir les attributs class ou id'une balise dans le sélecteur de balises, cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Option enforcée (Macintosh) sur la balise etCHOISEZ une classe ou un ID dans le menu contextual.
Le menu dérounant Taille de fenêtre (visible uniquement en mode Création) permet de spécifique une taille personnalisée ou prédéfinie pour la fenêtre de document. Voir « Redimensionnement de la fenêtre de document », page 38.
A droite du menu déroulant Taille de fenêtre figurent une estimation de la taille du document et du temps de téléchargement de la page, ainsi que la liste de tous les fischiers dépendants, tels que les images et autres fischiers de données. Voir « Vérification du temps et de la taille de téléchargement», page 500.
Pour plus d'informations sur la création d'un nouveau document (et sur l'utilisation des documents prédéfinis fournis avec Dreamweaver), voir Chapitre 5, « Configuration d'un document», page 111.
Redimensionnement de la fenetre de document
La barre d'etat affiche les dimensions courantes de la fenêtre de document sélectionnée (en pixels). Vous pouvez définir la taille de fenêtre pour qu'elle s'adapte à la taille des moniteurs les plus courants en cliquant sur Taille de fenêtre et enCHOISIGANT une taille dans le menu déroulant. 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. Dans l'espace de travail intégré (sous Windows uniquement), vous pouvez agrandir la fenêtre de document pour qu'elle occupe tout l'espace de la zone de document.
Remarque : vous ne pouvez pas redimensionner une fenetre de document qui est agrandie dans l'espace de travail.
Lorsqu'une fenêtre de document est agrandie, des onglets s'affichent au bas de la zone de la fenêtre de document indiquant les noms de fichier de tous les documents ouverts. Pour passer à un autre document, cliquez sur son onglet.
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 créé de nouvelles tailles.
Remarque: la taille de la fenêtre correspond aux dimensions internes de la fenêtre de navigateur, cordures exclues; la résolution de l'écran est indiquée entre parentheses. Optez, par exemple, pour le format « 536 x 196 (640 x 480, valeur par défaut) » si les visiteurs de cette site utilisent Microsoft Internet Explorer ou Netscape Navigator par défaut sur un moniteur de 640 x 480.
Pour redimensionner la fenetre de document selon une taille prédéterminée :
Choisissez l'une des tailles affichées dans le menu dérouulant qui se trouve dans la barre d'etat de la fenêtre de document.
1 Cliquez sur Modifier les tailles dans le menu dérouulant Taille de fenêtre.
2 Cliquez sur une valeur de largeur ou de hauteur dans la liste Taille de la fenetre, puis entrez une nouvelle valeur.
Pour que la fenêtre de document adopte uniquement une largeur spécifique sans que sa hauteur change, Sélectionnez une valeur de hauteur et supprimez-la.
3 Cliques sur la zone de texte Description pour saisir un texte decrivant la taille spécifique.
4 Cliquez sur OK pour enregistrer la modification et revenir à la fenêtre de document.
1 Cliquez sur Modifier les tailles dans le menu dérouulant Taille de fenêtre.
2 Cliquez dans l'espace vierge qui apparait sous la derniere valeur de la colonne Largeur.
3 Indiquez les valeurs désirées pour Largeur et Hauteur. Pour définir soit la largeur, soit la hauteur, laissez l'un des champs vide.
4 Cliquez dans le champ Description pour saisir un texte décrivant la taille ajoutée.
5 Cliquez sur OK pour enregistrer la modification et revenir à la fenêtre de document.
Par exemple, vous pouvez taper SVGA ou PC standard à côté de l'entrée correspondant à un monitér d'une résolution de 800 × 600 pixels, et Mac 17 à côté de l'entrée correspondant à un monitér d'une résolution de 832 × 624 pixels. Diverses résolutions peuvent être régées sur la plupart des moniteurs.
Pour agrandir une fenêtre de document (espace de travail intégré sous Windows uniquement):
Cliquez sur le bouton d'agrandissement dans la barre de titre de la fenetre de document.
Définition des préférences de la barre d'État
Pour définiir les préférences de la barre d'objet, choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X), puis sélectionnez la catégorie Barre d'objet dans la liste de gauche. Pour plus d'informations, voir « A propos de la barre d'objet», page 38.
Taille de la fenêtre permet de personneliser les tailles de fenêtre qui s'affichent dans le menu dérouulant de la barre d'objet. Voir « Redimensionnement de la fenêtre de document », page 38.
Vitesse de connexion déterminée 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 apparait dans la barre d'etat. Celui des images est affiché dans l'inspecteur de propriétés lorsqu'une image est sélectionnée dans la fenêtre de document.
Utilisation de la barre du lanceur
La barre du lanceur s'affiche dans la barre d'etat et est composée de boutons qui permettent d'ouvrir et de fermer les différents panneaux, fenêtres et inspecteurs.
Pour afficher la barre du lanceur, activez l'option Afficher les icones dans les panneaux et le lanceur dans les préférences des panneaux. Vous pouvez préciser les éléments qui doiventfigurer sur la barre du lanceur. Pour plus d'informations, voir « Définition des préférences des panneaux», page 48.
Utilisation de la barre d'outils de document
La barre d'outils de document est composée de boutons qui vous permettent d'accederrapidement aux différents modes d'affichage : Code, Creation, un mode à deux volets combinantles modes Code et Creation, et le mode Live Data (voir « Affichage des données dynamiques enmode Creation », page 508). La barre d'outils contient également plusieurs commandes etoptions permettant d'afficher le document et de le transférer d'un site local vers un site distant,ainsi que de déboguer du code JavaScript.
Pour afficher ou masquer la barre d'outils de document,CHOISSEZ Affichage > Barre d'outils > Document.
Les options suivantes s'affichent dans la barre d'outils de document :
Mode Code pour afficher uniquement le mode Code dans la fenetre de document.
- Modes Code et Création pour afficher les deux modes simultanément dans deux volets distincts de la fenêtre de document.
Dans ce cas, l'option Mode Création en haut est activée dans le menu Options d'affichage. Utilisez cette option pour préciser quel mode doit s'afficher en haut de la fenêtre de document.
- Mode Création pour afficher uniquement le mode Création dans la fenêtre de document.
Vou puevez égalementCHOISIR un mode d'affichage dans le menu Affichage.
- Titre pour attribuer un titre à votre document et l'afficher dans la barre de titre du navigateur.
Si vous document possède déjà un titre, celui-ci s'affiche dans ce champ.
-
Gestion des fichiers pour afficher le menu dérouulant correspondant.
-
Aperçu/Débogage dans le navigateur pour prévisualiser ou déboguer un document dans un navigateur. Choisissez un navigateur dans le menu déroulant.
Pour ajouter ou modifier des navigateurs dans le menu,CHOISSEZ Modifier la liste des navigateurs.
Actualiser le mode Creation pour actualiser le mode Creation du document après avoir apporté des modifications dans le mode Code.
Les modifications apportées dans le mode Code n'apparaissent pas automatiquement dans le mode Création : vous doivent exécuter tout d'abord certaines opérations, comme enregistrer le fichier ou utiliser ce bouton.
- Référence pour afficher le panneau Récognition.
Ce panneau comporte des références sur HTML, CSS, le code JavaScript, CFML, ASP et JSP. Pour plus d'informations, voir « Accès aux références de langue», page 210.
-
Navigation dans le code pour naviguer dans votre code JavaScript. Pour plus d'informations, voir « Utilisation du débogueur JavaScript », page 217.
-
Options d'affichage pour définir les options d'affichage des modes Code et Création, notamment le mode devant s'afficher au-dessus de l'autre.
Pour plus d'informations sur les options d'affichage du mode Code, voir « Définition des préférences d'affichage », page 182.
Les options d'affichage du mode Création vous permettent de masquer toutes les assistances visuelles (telles que les cordures de tableau, de calque et de cadre) simultanément, ou de les masquer et les afficher individuellement selon vos besoin. Elles vous permettent également de visualiser le contenu de l'en- ^tê et les guides visuels. Pour plus d'informations sur ces options, disponibles également dans le menu Affichage, voir « Sélection d'éléments dans la fenêtre de document », page 120, « Affichage et modification du contenu de l'en- ^tê », page 123 et « Utilisation de guides visuels durant la conception », page 121.
Lorsque les modes Code et Création sont affichés en même temps, les deux groupes d'options sont disponibles dans le menu.
Utilisation 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. Pour plus d'informations sur les opérations telles que Ouvrir et Enregistrer, voir Chapitre 5, « Configuration d'un document », page 111.
Pour afficher la barre d'outils standard,CHOISSEZ Affichage > Barres d'outils > Standard.
Dreamweaver comporte beaucoup de menus contextuels, qui vous permettent d'accederrapidement aux commandes et propriétés les plus utiles relatives à l'objet ou à la fenêtre aveclesquels vous travailliez. Les menuscontextuels répertorient uniquement les commandes enrapport avec la seLECTION en cours.
1 Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enfoncée (Macintosh) sur l'objet ou la fenetre qui vous interesse.
Le menu contextual associé à l'objet ou à la fenêtre sélectionné(e) s'affiche.
2 Choisissez une commande dans le menu contextual.
Utilisation de la barre Insertion
Les boutons qui compose la barre Insertion permettent de creer et d'inserer des objets, tels que des tableaux, des calques et des images. Ces boutons sont organises dans des onglets.
Pour afficher ou masquer la barre Insertion :
Choisissez Fenetre > Insérer.
Pour développer ou réduire la barre Insertion :
Cliquez sur la flèche d'agrandissement dans le coin gauche de la barre de titre de la barre Insertion.
Pour modifier l'orientation de la barre Insertion, procedede l'une des manieres suivantes (Macintosh uniquement):
- Pour passer de l'orientation horizontal à l'orientation verticale, cliquez sur l'iconde d'orientation verticale située pres du coin droit supérieur.
- Pour passer de l'orientation verticale à l'orientation horizontale, cliquez sur l'icone d'orientation horizontale située pres du coin droit inférieur.
Pour afficher les boutons d'un onglet particulier, procedede l'une des manieres suivantes :
- Si la barre Insertion est dans sa position horizontale, cliquez sur un onglet.
- Si la barre Insertion est dans sa position verticale (Macintosh uniquement), cliquez sur une catégorie en haut de la barre etCHOISSEZ une option dans le menu déroulant.
Pour insérer un objet :
1 Sélectionnez un onglet dans la barre Insertion.
2 Cliquez sur un bouton d'objet ou faites glisser l'icone du bouton dans la fenêtre de document. 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écifique les paramètres d'un objet spécifique.
Pour contourer cette boite de dialogue et insérer un espace réservé vide :
Appuyez sur la touche Contrôle (Windows) ou Option (Macintosh) tout en cliquant avec la souris sur le bouton correspondant à l'objet.
Par exemple, pour insérer un espace réservé d'image sans spécifique de fichier d'image, appuyez sur la touche Contrôle ou Option tout en cliquant avec la souris sur le bouton Image.
Remarque : cette procEDURE ne contourne pas toutes les boites de dialogue d'insertion d'objet. De nombreux objets, y compris les barres de navigation, calques, boutons Flash etleans de cadres, n'inserent pas d'espaces réservés ni d'objets avec des valeurs par défaut.
La barre Insertion contient plusieurs onglets : Commun, Mise en forme, Texte, Tableaux, Cadres, Formulaires, Modèles, Caracteres, Média, En-tête, Script et Application. D'autres onglets s'affichent lorsque le document sélectionné contient du code serveur, tel que des documents ASP ou CFML.
L'onglet Application insère des éléments dynamiques, tels que les produits d'enregistements, régions répetées, et formulaires d'insertion d'enregistements et de mise à jour. Pour plus d'informations sur le contenu dynamique, voir Chapitre 33, « Ajout d'un contenu dynamique à une page Web », page 553.
- L'onget Caractères contient des caractères spéciaux, par exemple le symbole du copyright, les guillemets typographiques et le symbole de marque commerciale. Notez que certains symboles ne s'affichent pas toujours correctement dans les versions 3.0 ou antérieures des navigateurs Internet Explorer et Netscape.
- L'onglet Commun contient des boutons permettant de creer et d'insérer les objets les plus frequentlyment utilisés, tels que les images, les tableaux et les calques.
L'onglet Formulaires contient des boutons permettant de creer des formulaires et d'y inserer des éléments.
L'onglet Cadres contient les structures de produits de cadres courantes.
- L'onglet En-tête contient des boutons permettant d'ajouter divers éléments d'en-tête, tels que les balises meta et base.
- L'onglet Mise en forme insère des tableaux et des calques, et permet de désirer entre deux modes d'affichage des tableaux : le mode Standard (par défaut) et le mode Mise en forme. Lorsque le mode d'affichage Mise en forme est selectionné, vous pouvez utiliser les outils de mise en forme Dreamweaver : Dessiner la cellule de Mise en forme et Dessiner le tableau de Mise en forme. Pour plus d'informations, voir Chapitre 17, « Le mode de Mise en forme », page 253.
- L'onglet Média contient des boutons permettant d'insérer des objets animés ou des objets interactifs, tels que des objets ou du texte Flash, des applets Java et des objets ActiveX. Pour plus d'informations, voir Chapitre 22, « Insertion d'éléments multimédia», page 337.
L'onglet Script insère un script, une section noscript ou une inclusion cote serveur.
L'onglet Tableaux insere un tableau entier ou une balise de tableau spécifique (telle que tr, th, ou td).
L'onglet Modèle insère des régions répetées facultatives et pouvant être modifiées dans des fichiers modèle. Pour plus d'informations, voir « A propos des modèle Dreamweaver », page 464.
L'onglet Texte insere diverses balises de mise en forme de texte et de liste, telles que b, em, p, h1 et ul.
Remarque : bien que certains boutons de l'onglet Texte ressemblant à des boutons de l'inspecteur de propriétés, ils ont des fonctions différentes. Les boutons de l'onglet Texte servent à insérer du code, mais n'indiquent pas l'état de la sélection courante ; en effet, si la sélection est un texte en gras, le bouton Gras s'affiche en surbrillance dans l'inspecteur de propriétés, mais pas dans l'onglet Texte.
- Les onglets côté serveur, disponibles uniquement pour les pages utiliser un langage serveur spécifique, incluent ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP et PHP. Ces onglets proposent des objets de type code serveur que vous pouvez insérer en mode Code.
Pour plus d'informations sur les objets de ces onglets, voir les rubriques correspondantes dans l'aide de Dreamweaver.
Si tous les objets dans un oranglet donné ne sont pas visibles, une petite flèche s'affiche dans le coin inférieur gauche de la barre Insertion ; il suffit de cliquer sur la flèche pour afficher le reste des objets.
Lorsque vous cliquez sur un bouton d'objet, Dreamweaver insère du code dans le document. Dans certains cas, le code est inséré immédiatement, dans d'autres, un éditeur de balises (voir « Modification de balises avec deséditeurs de balises », page 202) ou autre boîte de dialogue s'affiche et vous invite à fournir d'autres informations avant d'insérer le code. Dans le cas de certains objets, aucune boîte de dialogue ne s'affiche si vous insérez les objets en mode Création, mais un éditeur de balises s'affiche si vous insérez les objets en mode Code. Pour d'autres objets, lorsque vous essayez d'insérer des objets en mode Création, Dreamweaver passée en mode Code avant de réaliser l'insertion.
Certain objects, tels que les ancre nommées, ne sont pas visibles lorsqu'vous visualisez la page dans la fenêtre d'un navigateur. Pour afficher des icones en mode Création indiquant l'emplacement de ces objets invisibles,CHOISSEZ AFFICHER >Assistances visuelles >Eléments invisibles. Pour selectionner les objets invisibles en mode Création, vousdez receer sur les icones correspondantes. Pour plus d'informations,voir « A propos des éléments invisibles », page 121.
Certains paramètres des préférences générales affectent la barre Insertion. Pour modifier ces préférences, choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X), puis Sélectionnéz la catégorie Général dans la liste de gauche.
- Lors de l'insertion d'objects, tels que des images, des tableaux, des scripts et des éléments d'en-tête, une boîte de dialogue vous demande des informations supplémentaires. Vous pouvez supprimer ces boîtes de dialogue en désactivant l'options Afficher la boîte de dialogue lors de l'insertion d'objects ou en Maintenant la touche Contrôle (Windows) ou Option (Macintosh) enforcée tandis que vous créez l'objet. Si cette option est désactivée lorsque vous insérez un objet, celui-ciaura des valeurs par défaut. Utilisez l'inspecteur de propriétés pour modifier les propriétés de l'objet après l'avoir inséré.
- L'option Barre Insertion vous permet d'afficher le contenu de la barre Insertion sous forme d'icones seulement, de texte seulement, ou de texte et d'icones.
Vous pouvez modifier les objets de la barre Insertion ou creer vos propres objets ; voir la section « Customizing Dreamweaver » du centre de support Macromedia, à l'adresse http:// www.macromedia.com/go/customizing_dreamweaver.
Utilisation de l'inspecteur de propriétés
L'inspecteur de propriétés permet d'examiner et de modifier les propriétés de l'élement de la page sélectionnée, tel que le texte ou un object inséré. Vous pouvez selectionner des éléments de page en mode Creation ou en mode Code.
Pour afficher ou masquer l'inspecteur de propriétés,CHOISSEZ Fenetre > Propriétés.
La plupart des changements apportés à une propriété sont immédiatement appliqués dans la fenêtre de document. Certains changements de propriétés ne prennt effet qu'au moment où vous cliquez hors des champs de texte de modification des propriétés, que vous appuyez sur la touche Entrée (Windows) ou Retour (Macintosh), ou sur la touche de tabulation pour passer à une autre propriété.
Le contenu de l'inspecteur de propriétés varie en fonction de l'élement sélectionné. 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 de propriétés.
Ce dernier affiche initialement la plupart des propriétés de l'objet selectionné. Pour voir les propriétés de l'objet selectionné les plus souvent utilisées, cliquez sur la flèche d'aggrandissement dans le coin inférieur droit de l'inspecteur de propriétés pour le réduire.
Conseil : il arrive que certaines propriétés masquées n'apparaissent pas, même si linspecteur de propriétés est sous sa forme agrandie. Dans ce cas, codez ces propriétés manuellement, à l'aide de linspecteur de code ou en mode Code, ou sélectionnez la balise en mode Code et choisissez Modifier > Modifier balise.
Gestion des panneaux et des groupes de panneaux
Dans Dreamweaver, les panneaux sont liés entre eux pour former des groupes de panneaux. 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 (espace de travail intégré sous Windows uniquement). Cela vous permet d'acceder aisément aux panneaux nécessaires sans encombrer votre espace de travail. Les panneaux à l'intérieur d'un groupe s'affichent sous forme d'onglets.
Remarque : lorsqu'un groupe de panneaux est flottant (détaché), une étroite barre vide apparait au-dessus du groupe. Dans cette documentation, le terme « barre de titre du groupe de panneaux » fait ↔reference à la zone où s'affiche le nom du groupe de panneaux, plutôt qu'à cette étroite barre vide.
Pour développer ou réduire un groupe de panneaux, procédez de l'une des manières suivantes :
- Cliquez sur la flèche d'agrandissement dans le coin gauche de la barre de titre du groupe de panneaux.
- Cliquez sur la barre de titre du groupe de panneaux.
Pour selectionner un panneau à l'intérieur d'un groupe de panneaux agrandi :
Cliquez sur l'onglet du panneau.
Pour détacher un groupe de panneaux :
Faites glisser le groupe de panneaux en le saississant par sa poignée d'ancrage (sur le côte gauche de la barre de titre) jusqu'à ce que son contour indique qu'il n'est plus ancre.
Pour ancrer un groupe de panneaux à d'autres groupes de panneaux (espace de travail flottant) ou à la fenêtre intégrée (sous Windows uniquement):
Faites glisser le groupe de panneaux en le saisissant par sa poignée d'ancrage jusqu'à ce que son contour indique qu'il est ancre.
La plupart des panneaux ne peuvent être ancrés que sur le côte gauche ou droit de la fenêtre de document dans l'espace de travail intégré, tandis que d'autres (l'inspecteur de 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.
Pour faire glisser un groupe de panneaux flottant (détaché) sans l'ancrer :
Faites glisser le groupe de panneaux par la barre située au-dessus de sa barre de titre. Le groupe de panneaux se s'ancre pas tant que vous ne le faites pas glisser par sa poignee d'ancrage.
Pour afficher le menu d'options du groupe de panneaux :
Développèz le groupe de panneaux en cliquant sur sa flèche d'agrandissement.
Le menu Options est visible uniquement lorsque le groupe de panneaux est développé.
Conseil : plusieurs options sont disponibles dans le menu contextuel du groupe de panneaux même lorsque celui-ci est réduit ; cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Contrôle enforcée (Macintosh), sur la barre de titre du groupe de panneaux pour afficher le menu contextuel.
Pour renommer un groupe de panneaux :
1 Choisissez Renommer le groupe de panneaux dans le menu Options sur le côté droit de la barre de titre du groupe de panneaux.
2 Entre le nouveau nom et cliquez sur OK.
Pour détacher un panneau d'un groupe de panneaux :
Faites glisser le panneau par son onglet jusqu'à ce que son contour indique qu'il n'est plus ancre. Le panneau s'affiche dans son propre groupe de pannaux.
Pour ancre un panneau à un groupe de panneaux :
Faites glisser le panneau par son onglet jusqu'à ce que son contour indique qu'il est ancre.
Pour développer un groupe de panneaux, procedede l'une des manieres suivantes :
- Choisissez Agrandir le groupe de panneaux dans le menu Options de la barre de titre du groupe de panneaux.
- Double-cliquez à n'importe quel endroit dans la barre de titre du groupe de panneaux. Le groupe de panneaux s'affiche verticalement et replit tout l'espace vertical disponible.
Pour fermer un groupe de panneaux, et le faire disparaitre complètement :
Choisissez Fermer le groupe de panneaux dans le menu Options de la barre de titre du groupe de panneaux.
Le groupe de panneaux disparait de l'écran.
Pour ouvrir un groupe de panneaux qui n'est pas visible à l'écran :
Choisissez le nom du panneau dans le menu Fenetre.
Pour modifier la taille de l'ensemble des groupes de panneaux (dans l'espace de travail flottant uniquement):
Afin de redimensionner l'ensemble des groupes de panneaux, faites-les glisser tout comme vous le faites pour redimensionner une fenêtre qualconque dans 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.
Définition des préférences des panneaux
Utilisez les préférences des panneaux pour indiquer les panneaux et les inspecteurs que vous voulez toujours afficher au premier plan dans la fenêtre de document, et ceux qui peuvent être masqués par la fenêtre de document. Vous pouvez également utiliser les préférences des panneaux pour spécifique ou pas l'affichage d'icones dans les anglets des panneaux, l'affichage de la barre du lanceur et les panneaux et inspecteurs devant apparaitre dans celle-ci.
Pour définit les préférences des panneaux,CHOISSEZ Edition > Préférences, puis seLECTIONnez la catégorie Panneaux dans la liste de gauche. Ensuite, seLECTIONnez l'une des options suivantes:
Toujours visible pour spécifique les panneaux devant apparaitre toujours au premier plan dans la fenêtre de document. Par défaut, les panneaux, les inspecteurs et autres fenêtres similaires s'affichent toujours comme « flottant » sur la fenêtre de document. Si vous déslectionné un élément dans cette liste, vous pouze alors déplacer la fenêtre de document devant cet élément.
Par exemple, pour permettre à la fenetre de document de masquer l'inspecteur de propriétés, vous nevez déslectionner l'option Propriétés. L'inspecteur de propriétés s'affiche alors devant la fenetre de document uniquement lorsqu'il est actif.
Pour permettre à la fenetre de document de masquer un panneau flottant quelconque (que vous avez ajouté en personnalisant Dreamweaver), vous doivent déslectionner l'option Tout autre panneau.
Remarque : l'option Toujours visible n'est pas applicable dans l'espace de travail intégré lorsqu'tous les panneaux sont ancrés.
Afficher les icones dans les panneaux et le lanceur déterminé si la barre du lanceur doit apparaitre. Lorsque cette option est seLECTIONnée, la barre du lanceur s'affiche dans la zone de barre d'etat, et une petite icône s'affiche dans l'onglet de chaque panneau. (Voir « A propos de la barre d'etat», page 38.) Les boutons dans la barre du lanceur permettent d'ouvrir les panneaux et les inspecteurs.
Afficher dans le lanceur indique les éléments qui doivent figurer sur la barre du lanceur.
Pour préciser les éléments qui doivent figurer sur la barre du lanceur :
1 Pour ajouter un élément sur la barre du lanceur, cliquez sur le bouton plus (+)
2 Pour supprimer un élément de la barre du lanceur, sélectionnez cet élément et cliquez sur le bouton moins (-).
3 Pour changer l'ordre dans lequel les éléments sont affichés sur la barre du lanceur, Sélectionnez un élément dans la liste, et cliquez sur un bouton fléché.
Par exemple, pour déplacer un élément vers la droite sur la barre du lanceur, faites-le descendre dans la liste.
4 Cliquez sur OK.
La barre du lanceur se transforme pour afficher les éléments que vous avez spécifiés.
A propos du panneau Site
Le panneau Site vous permet de définir un site,:gérer les fichiers locaux,telecharger des fichiers d'un site distant et rechercher les fichiers sur votre disque local hors de votre site. Pour plus d'informations sur l'utilisation du panneau Site, voir Chapitre 4, « Gestion du site », page 71.
A propos du panneau Historique
Le panneau Historique répertorie un nombre défini d'actions réalisées au sein du document actif depuis que vous l'avez créé ou ouvert (il n'affiche pas les actions réalisées dans d'autres cadres, d'autres fenêtres de document ou dans le panneau Site). Il vous permet d'annuler une ou plusieurs actions, de reproductive des actions et de créé de nouvelles commandes pour automatiser les tâches répetitives.
Lors de l'ouverture du panneau Historique, le curseur, ou index, pointe sur la dernière action que vous avezaccomplie.
Utilisation du panneau Historique
Le panneau Historique enregistre toutes les étapes de votre travail dans Dreamweaver. Vous pouvez utiliser le panneau Historique pour annuler plusieurs étapes simultanément.
Pour annuler la dernière opération effectuee dans un document, choisissez Edition > Annuler, comme dans la plupart des applications (dans le menu Edition, le nom de la commande Annuler change en fonction de la derniere operation executee).
Le panneau Historique permet également de reproductive des étapes déjà réalisées et d'automatiser des tâches en créant de nouvelles commandes. Pour plus d'informations, voir « A propos de l'automatisation des tâches», page 124.
Pour ouvrir le panneau Historique :
Choisissez Fenetre >Autres > Historique.
Pour annuler la dernière action :
Déplacez le curseur du panneau Historique d'une étape vers le haut dans la liste. Cette opération a le même effet que lorsque vous cliquez sur Edition > Annuler.
L' étape annulée apparait alors en grisé.
Pour annuler plusieurs opérations à la fois, procédez de l'une des manières suivantes :
- Déplacez le curseur jusqu'à une étape de la liste.
- Cliquez à gauche d'une étape le long de la trajectory du curseur; le curseur se dirige automatiquement vers cette étape, annulant toutes celles qui sont sur son passage.
Remarque : pour provoquer un déplacement automatique vers une étape spécifique, cliquez à gauche de cette étape ; si vous cliquez sur l' étape elle-même, elle sera sélectionnée. La sélection d'une étape est une opération différente du return à cette étape dans l' historique des actions.
Tout comme pour l'annulation d'une seule action, si vous annulez une série d'étapes, puis effectuez une autre opération dans le document, il ne vous sera plus possible de rétabrir les actions annulées : elles disparaissent du panneau Historique.
Pour définitir le nombre maximal d'étapes que le panneau Historique conserve et affiche :
1 Choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X), puis sélectionnez la catégorie Général dans la liste de gauche.
2 Tapez un chiffre dans la zone Nombre maximal d'étapes de l'histoire.
La valeur par défaut doit être suffisante pour les besoin de la plupart des utilisateurs. Plus ce chiffre est élevé, plus le panneau Historique utilisera de mémoire. Cela peut affercer les performances et ralentir considérablement votre système. Lorsque le panneau Historique atteint le nombre maximal d'étapes, les premières étapes sont supprimées.
Remarque : il est impossible de modifier l'ordre dans lequel les étapes sont affichées dans le panneau Historique. Il ne faut pas voir dans le panneau Historique une collection arbitraire de commandes ; il vous permet de voir, dans l'ordre chronologique, la liste des actions déjà effectuees.
Pour effacer la liste des actions du panneau Historique pour le document en cours :
Dans le menu contextuel du panneau Historique, choisissez Effacer l'historique.
Cette commande efface également toutes les informations permettant d'annuler les actions effectuees dans le document en cours : après avoir cliqué sur Effacer l'historique, il vous sera impossible d'annuler les actions dont la trace a ete effacee. (Notez bien que la fonction Effacer l'historique n'annule aucune action passee, mais se limite a supprimer l'enregistrement de ces etapes dans la memoire de Dreamweaver.)
A propos du panneau Réponses
Le panneau Réponses propose un accès rapide à des sources d'informations pouvant vous aider à travailler de manière plus efficace avec Dreamweaver. Ces sources incluent les didacticiels, notes techniques, extensions Dreamweaver et d'autres contenus utiles.
Pour obtenir les dernières informations sur Dreamweaver à partir du site macromedia.com, cliquez sur le bouton Mettre à jour.
Utilisation de Dreamweaver avec d'autres applications
Dreamweaver s'adapte à votre méthode de conception et de développement de site Web en vous permettant de travailler aisément avec d'autres applications. Pour plus d'informations sur le travail en collaboration avec d'autres applications (navigateurs, éditeurs HTML, programmes de retouche d'image et d'animation), voir les rubriques suivantes :
- Pour plus d'informations sur l'utilisation de Dreamweaver avec d'autres éditeurs HTML, telis que HomeSite ou BBEdit, voir « Utilisation d'un éditeur HTML externe avec Dreamweaver», page 193.
- Vous pouvez spécifique vos navigateurs favoris pour l'affichage de votre site. Voir « Aperçu de page dans les navigateurs», page 496.
- Vous pouvez lancer un éditeur d'image externe, tel que Macromedia Fireworks, depuis Dreamweaver. Voir « Utilisation d'un éditeur d'image externe », page 317.
- Vous pouvez configurer Dreamweaver pour qu'il lance un éditeur différent pour chaque type de fichier. Voir « Lancement d'un éditeur externe pour des fichiers multimédia», page 338.
- Pour plus d'informations sur l'ajout d'interaktivité à votre site à l'aide de Macromedia Flash, voir « A propos du contenu Flash», page 340.
Pour savoir comment rendre votre site interactif à l'aide d'animations Macromedia Shockwave, voir « Insertion d'animations Shockwave», page 346.
- Pour plus d'informations sur l'utilisation de ColdFusion, voir Chapitre 6, « Configuration d'une application Web », page 133.
Personnalisation de Dreamweaver : notions de base
VoussoupiezpersonnaliserDreamweaverenfonctiondevosbesoins，a l'aide de certaine techniques elementaires sans avoir a comprendre le code complexe nià modifier aucun fichier
texte.Parexample,vousoupvezdefinirdespreférences,crier desracccourcisclavier etajouterdes extensionsàDreamweaver.
Pour plus d'informations sur la personnalisation manuelle des fichiers de configuration, voir la section « Customizing Dreamweaver » du centre de support Macromedia, à l'adresse http:// www.macromedia.com/go/customizing_dreamweaver.
Définition des préférences
Dreamweaver intègre des paramètres de préférence qui commandent l'aspect général de l'interface utilisateur de Dreamweaver, ainsi que les options liées à des fonctions spécifique, par exemple les calques, les feuilles de style, l'affichage des codes HTML et JavaScript, les éditeurs externes et la prévisualisation de pages dans les navigateurs. Les informations relatives à certaines options de préférences spécifiques sont fournies dans ce guide de l'utilisateur, avec la rubrique ou la fonction associée.
Ce guide ne déscrit que les options de préférences les plus courantes. Pour plus d'informations sur une option de préférence spécifique non décrite dans ce document, voir la rubrique correspondante dans l'aide de Dreamweaver.
Définition des préférences générales
Les préférences générales commandent l'aspect général de Dreamweaver. Pour modifier ces préférences, choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X), puis cliquez sur Général. Les préférences générales sont divisées en deux sous-catégories : les options Document et les options Edition. Pour plus d'informations sur ces préférences, voir l'aide de Dreamweaver.
Utiliser et au lieu de et indicate que Dreamweaver doit appliquer la balise strong à chaque fois que vous effectuez une opération qui implique normalement l'application de la balise b, et qu'il doit appliquer la balise em à chaque fois que vous effectuez une opération qui implique normalement l'application de la balise i. Ces actions incluent notamment le fait de cliquer sur les boutons Gras ou Italique de l'inspecteur de propriétés de texte et de désirir Texte > Style > Gras ou Texte > Style > Italique. Pour utiliser les balises b et i dans vos documents, déslectionné cette option.
Remarque: le World Wide Web Consortium recommende d'éviter les balises b et i ; les balises strong et em fournissant des informations plus sémentiques que les balises b et i.
Définition des préférences de polices
Les préférences de polices permettent de définir les polices que Dreamweaver utilise pour afficher chaque codage de police. Le codage d'un document détermine la façon dont ce document est affché dans un navigateur. Les paramètres de polices de Dreamweaver vous permettent d'utiliser un texte affché dans la police et la taille de votrechoix, sans afferter l'aspect qu'aura le document dans un navigateur. Pour plus d'informations sur la définition d'un codage par défaut pour les nouveaux documents, voir « Configuration d'un document», page 111.
Pour définit la police à utiliser dans Dreamweaver pour chaque type de codage :
1 Choisissez Edition > Préférences, puis cliquez sur la catégorie Polices dans la liste de gauche.
2 Sélectionnez le type de codage désiré (par exemple Occidental (Latin1) ou Japonais) dans la liste Paramètres de la police, puis choisissez les polices à utiliser dans Dreamweaver pour ce codage dans les menus de polices, sous la liste Paramètres de la police.
Remarque: 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 les préférences de polices, voir l'aide de Dreamweaver.
Utilisation de l'éditeur de raccourcis clavier
Utilisez l'éditeur de raccourcis clavier pour creer ou modifier des touches de raccourci ou utilisez un jeu de raccourcis préalablement déterminés.
Remarque : des tableaux de raccourcis clavier relatifs à la configuration Dreamweaver par défaut sont disponibles sur le site Web de Macromedia à l'adresse suivante : http://www.macromedia.com/go/dreamweaver_mx_shortcuts.
Pour modifier les raccourcis clavier :
1 Choisissez Edition > Raccourcis clavier.
La boîte de dialogue Raccourcis clavier s'affiche.
2 Choisissez parmi les options suivantes :
Pour supprimer un raccourci d'une commande :
1 Dans le menu déroulant Commandes, Sélectionnez une catégorie.
Une liste apparait, repertoriant les commandes associées à cette catégorie.
2 Sélectionnez une commande dans la liste.
Les raccourcis attribués à la commande apparaissent dans zone Raccourcis.
3 Sélectionnéz un raccourci.
4 Cliquez sur le bouton Supprimer l'objet (-).
Pour ajouter un raccourci clavier à une commande :
1 Dans le menu déroulant Commandes, Sélectionnez une catégorie.
Une liste apparait, repertoriant les commandes associées à cette catégorie.
2 Sélectionnez une commande dans la liste.
Les raccourcis attribués à la commande apparaisent dans zone Raccourcis.
3 Procedez 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 apparait dans la zone de texte Raccourcis et le point d'insertion s'affiche dans la zone Appuyer sur la touche.
- Si deux raccourcis sont déjà attribués à la commande, Sélectionnez-en un (il sera replacé par le nouveau raccourci). Cliquez ensuite dans la zone Appuyer sur la touche.
4 Appuyez sur une combinaison de touches.
Celle-ci apparait 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.
5 Cliquez sur Remplacer. La nouvelle combinaison de touches est attribuée à la commande.
Pour modifier un raccourci existant :
1 Dans le menu déroulant Commandes, Sélectionnez une catégorie.
Uneisteapparait,repertioriantlescommandesassociéesautecescatégorie.
2 Sélectionnéz une commande dans la liste.
Les raccourcis attribués à la commande apparaisent dans zone Raccourcis.
3 Sélectionnéz le 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 deja 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.
Ajout d'extensions dans Dreamweaver
Les extensions sont de nouvelles fonctions, facies à intégrer dans Dreamweaver. Vous pouvez utiliser plusieurs types d'extensions ; il existe, par exemple, des extensions qui permettent de reformater des tableaux, de vous connecter à des bases de données d'arrière-plan ou qui vous aident à rédigier des scripts pour les navigateurs.
Remarque : pour installer des extensions accessibles à tous les utilisateurs dans un système d'exploitation multiutilisateur, vous doivent dispose des droits Administrateur (Windows) ou root (MACs OS X). Pour plus d'informations sur les systèmes multiutilisateurs, voir « Personnelisation de Dreamweaver dans les systèmes multiutilisateurs », page 56.
Pour rechercher les extensions de Dreamweaver les plus récentes, consultez le site Web de Macromedia Exchange à l'adresse suivante: http://www.macromedia.com/fr/exchange/dreamweaver/. 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 des utilisateurs et installer et exploiter Extension Manager. Vousdezestinstaller Extension Manager avant de pouvoir télécharger des extensions.
Le logiciel Extension Manager est une application independante permettant d'installer et deGERer les extensions dans les applications Macromedia. Vous pouze lancer Extension Manager a partir de Dreamweaver enCHOISSSANT Commandes > GERer les extensions.
Pour installer et gérer les extensions :
1 Sur le site Web Macromedia Exchange, cliquez sur le lien de telechargement de l'extension qui vous interesse.
Votre navigateur vous permet peut-être d'ouvrir et installer l'extension directement depuis le site ou de l'enregistrer sur votre disque.
-
Si vous l'ouvre directement, Extension Managertraite automatiquelement l'installation.
-
Si vous l'enregistrez sur votre disque, placez le fichier du logiciel d'extension (.mxp) 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.
Le fichier sera installe dans Dreamweaver. Certaines extensions ne sont accessibles qu'après avoir redemarré Dreamweaver ; un message vous invite à quitter et à redémarrer l'application.
Utilisez Extension Manager pour supprimer des extensions ou pour consulter des informations sur l'extension.
Personnalisation de Dreamweaver dans les systèmes multiutilisateurs
Vous personnelise Dreamweaver selon vos besoin dans les systèmes multiutilisateurs, tels que Windows NT, Windows 2000, Windows XP ou Mac OS X. Dreamweaver empêche que la configuration personnalisée d'un utiliser n'afecte 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 creée des copies de divers fjichiers de configuration à votre intention. Ces fjichiers sont enregistrés dans un dossier vous appartenant. Par exemple, sous Windows XP, ils sont enregistrés sous C:\Documents and Settings\UsernameApplication Data\Macromedia\Dreamweaver MX\Configuration (ce dossier peut être localisé dans un dossier masqué); sur Mac OS X, ils sont enregistrés dans votre dossier d'accueil, Users/name/Library/Application Support/Macromedia/Dreamweaver MX/Configuration.
Remarque : sur des systèmes d'exploitation plus anciens (Windows 98, Windows ME et Mac OS 9.x), un seul groupe de fichiers de configuration Dreamweaver est partagé par tous les utilisateurs, même si la configuration du système d'exploitation prend en charge plusieurs utilisateurs.
Si vous réinstallez ou mettez à niveau Dreamweaver, Dreamweaver create automatiquement des copies de sauvegarde des fichiers de configuration existants. Ainsi, si vous avez personnelisé manuellement ces fichiers, vos modifications restent disponibles.
CHAPITRE 3
Planification et configuration de votre site
Un site Web est un ensemble de documents liés les uns aux autres et partageant des attributs, par exemple une rubrique connexe, une conception similaire ou un objectif.
Outil logiciel de création et de gestion de sites, Macromedia Dreamweaver MX permet de réaliser des sites Web complets, en sus de documents individuels. Pour obtenir des résultats optimaux, attevez et planifiez votre site Web avant de creer les pages dont il sera constitue.
Remarque : si vous souhaitez creator des documents immédiatement, vous pouvez tester certains des outils de creation de documents de Dreamweaver et réaliser un document pilote (voir « Création d'un document vierge », page 113). Mais ne vous lancez pas dans le développement de documents sérieux avant d'avoir défini le site.
Pour creer un site Web, la premiere etape consiste a le planifier (voir « A propos de la planification et de la creation du site», page 57). L'etape suivante consiste a définir la structure de base du site (voir « Configuration d'un site Dreamweaver», page 62). Il peut etre judicieux de conceivevoir cette site d'apres un modele Dreamweaver (voir « A propos des modeles Dreamweaver», page 464 et « Creation d'un modele Dreamweaver», page 470) lors de la préparation de son contenu.
Si vous disposez déjà d'un site installé sur un serveur Web et désirezCOMMencer à utiliser Dreamweaver pour le modifier, voir « Modification d'un site Dreamweaver», page 67.
Ce chapitre contient les sections suivantes :
« A propos de la planification et de la création du site», page 57
« Configuration d'un site Dreamweaver», page 62
Configuration d'un dossier local », page 63
« Configuration d'un dossier distant», page 64
« Modification d'un site Dreamweaver », page 67
« Modification de sites Web existants dans Dreamweaver», page 68
A propos de la planification et de la création du site
Dans Dreamweaver, le terme site peut se rapporter aussi bien à un site Web qu'au dossier local dans lequel sont conservés tous les documents appartenant à un site Web. Lorsque se profile en vous l'envie de creer un site Web, il convient de bien planifier votre travail et de respecter un certain nombre de tâches indispensablees pourmettre toutes les chances de votre côte et veiller à ce que votre site remporte un franc succès. Meme si la page d'accueil que vous créez est personnelle et réservée à des proches, il est always de votre intérêt de bien planifier le site pour vous assurer que tous seront à même de l'utiliser sans rencontres de problème.
Définition des objectifs
Avant de creer votre site Web, déterminez précisément vos objectifs. Posez à vous-même ou à votre client des questions sur le site. Qu'attendez-vous d'un site Web? Mettez noir sur blanc tout ce à quoi vous aspirez, afin de ne rien oublier au moment de la réalisation. Cette étape préalable de définition des objectifs vous aide à focaliser et à cibler le site Web en fonction de vos besoin spécifiques.
Un site Web qui intègre des informations sur un sujet particulier n'est pasforcément construit ni structure de la même manière qu'un site concu pour vendre des produits. La complexité de vos objectifs affectera la navigation, les outils de création Web utilisés (Flash, Director, etc.), voire l'aspect général du site.
Choix du public ciblé
Vos objectifs désormais connus, il vous faut reflechir à qui le site Web s'adressera. La question pourrait qu'il ne peut simplier, puisque la plupart desgens souhaient attirer le plus d'internautes possible vers leur site Web. Il faut cependant admettre que la creation d'un site de renommée quasi internationale relève de l'exceptionnel. Les internautes utilisent des navigateurs variés, se connectent à des vitesses variables et ne disposent pas tous de plug-ins. Tous ces facteurs déterminants sont à prendre en compte. Le choix du public ciblé est, par conséquent, fondamental.
Demandez-vous qui visitera votre site ou à qui vous le destiné. A votre avis, quels types d'ordinateurs ces internautes possèdent-ils ? Quelles plates-formes exploitant-ils (Macintosh, Windows, Linux, etc.) ? Quelle est leur vitesse moyenne de connexion (modem 33,6 Kbps ou DSL) ? Quels types de navigateurs employant-ils et qu'elle est, en moyenne, la taille de leurs moniteurs ? Souhaitez-vous créé un site intranet où tout le monde utilise le même système d'exploitation et le même navigateur ? Tous ces facteurs peuvent affecter considérablement l'aspect et les performances de votre page Web.
Une fois que vous savez à quel public vous voulez vous adresser et connaissez l'environnement informatique utilisé, vous pouze cibler leur travail.
Supposons, par exemple, un public cible travaillant dans un environnement Windows, avec des moniteurs 17 pouces et Internet Explorer 3.0 ou ultérieur. Créez vos pages Web, puis testez votre site sous Windows, dans Internet Explorer, sur écran 800 × 600 pixels. N'oubliez pas non plus de tester votre site sur d'autres moniteurs, avec d'autres navigateurs (Netscape Navigator, par exemple) et sur Macintosh ; l'aspect des pages Web peut s'avérer moins précis que dans l'environnement préconisé pour le public cible.
Création de sites pour plusieurs types de navigateurs
Lorsque vous creez votre site, vous doivent prendre en compte le fait que les visiteurs de cette site utilisent une grande diversité de navigateurs Web. Dans la mesure du possible, créez des sites compatibles avec un maximum de navigateurs, selon les contraintes données.
Il existe plus d'une vingtaine de navigateurs Web différents en circulation, et la plupart ont fait l'objet de plusieurs versions. Meme si vous ne visez que Netscape Navigator et Microsoft Internet Explorer, qui sont utilisés par la très grande majorité des internautes, n'oubliez pas que tous n'utilisent pas la dernière version de ces deux navigateurs. Si votre site se trouve sur le Web, il recèvra probablement la visite d'un utiliser de Netscape Navigator 2.0 ou du navigateur qu'AOL fournit à ses clients, ou encore d'un navigateur en mode texte, tel que Lynx.
Dans certaines circonstances, il n'est pas nécessaire de creer des sites compatibles avec les divers navigateurs. Par exemple, si vous site n'est visible que sur le réseau intranet de votre entreprise et si vous savez que tous les employés utilisent le même navigateur, vous pouvez optimiser cette site pour tirer parti des caractéristiques de ce navigateur. De même, si vous creez du contenu HTML qui sera distribué sur CD-ROM et si vous distribuez un navigateur sur le CD, vous pouvez partir du principe que tous vos clients utiliseront ce navigateur bien précis.
La plupart du temps, pour les sites Web concus pour le grand public, il est préféable de rendre votre site visible pour le plus grand nombre possible de navigateurs. Concevez votre site pour un ou deux navigateurs spécifiques, en essayant toute fois d'explorer de temps en temps le site avec un autre navigateur, pour éviter de proposer trop de contenu non compatible. Vous pouvez également envoyer un message à un forum de discussion, pour demander à d'autres internautes de consulter votre site. Il est, en effet, toujours bon d'avoir l'avis d'un très vaste public.
Plus votre site sera sophistique – en termes de mise en page, animation, multimédia et interaction – et moins il sera compatible avec tous les navigateurs. Par exemple, certains navigateurs ne peuvent pas exécuter du JavaScript. Une page de texte pur, ne faisant appel àaucun enrichissement sophistiqué, s'affichera probablement sans problème dans n'importe quel navigateur, mais elle offrira évidemment beaucoup moins d'attrait, sur le plan esthétique, qu'une page utilisant efficacement des images, une mise en page soignée et des éléments interactifs. Essayez de tracer un juste milieu entre une conception orientée vers un maximum d'effets et une conception orientée vers une compatibilité maximale.
Une approche interessante consiste à creer plusieurs versions de certaines pages importantes, en particulier de la page d'accueil de votre site. Par exemple, vous pouvez concevoir une version avec cadres et une version sans cadre de cette page. Ensuite, vous pouvez intégrer dans votre page un comportement qui transfère automatiquement les internautes équipés de navigateurs ne prénant pas en charge les cadres vers une version sans cadre. Pour plus d'informations, voir « Utilisation des actions de comportement livrées avec Dreamweaver», page 375.
Organisation de la structure du site
Organisez avec soin votre site, cela vous fera gagner beaucoup de temps par la suite. Si vous commencerz à creator des documents sans avoirAAParavant reflechi à l'emplacement exact qu'ils occuperont au sein de la hierarchie du site, vous risquez de vous retrouver avec un enorme dossier désordonné, contenant des fischiers reliés les uns aux autres, mais éparpillés dans plusieurs dossiers aux noms plus ou moins identiques.
Habituèlement, la configuration d'un site passé par la création, sur votre disque dur local, d'un dossier distinct où sont stockés tous les fischiers servant à la structure de votre site (appelé, à ce niveau, site local) et par la création et la modification de documents au sein même de ce dossier. Ensuite, vous copiez les fischiers enfin préts pour la publication sur un serveur Web, pour lemettre à la disposition du grand public. Cette méthode parait mieux adaptée que le fait de créé et modifier les fischiers directement sur le site Web public ; elle permet, en effet, de tester les changements au niveau du site local avant de le rendre public et, une fois que vous avez terminé, vous pouvez simultanément télécharger les fischiers du site local etmettre à jour le site public entier.
Pour coordonnier votre site local avec Dreamweaver, voir « Configuration d'un site Dreamweaver», page 62. Lorsque vous configUREZ le site local à l'aide de Dreamweaver, les tâches de gestion des fichiers de votre site, de suivi des liens, de mise à jour des pages, etc. deviennent beaucoup plus simples.
Décompose chez la site en catégories. Placez l'ensemble des pages associées les une aux autres dans un même dossier. Mettez, par exemple, les communiqués de presse de votre entreprise, les coordonnées des personnes joignables et les postes à pouvoir dans un dossier, et toutes les pages de cette catalogue en ligne dans un autre. Utilisez des sous-dossiers si nécessaire. L'entretien du site et la navigation seront beaucoup plus facies avec ce type d'organisation.
Décidez du lieu de stockage des éléments tels que les images et les fichiers son. Il est pratique de placer toutes les images, par exemple, à un même endroit ; ainsi, lorsque vous désirez insérer une illustration dans une page, vous savez immédiatement où la trouver. Certains concepteurs placent tous les éléments non HTML d'un site dans un dossier appelé Assets. Ce dossier peut lui-mêmeContainir d'autres dossiers, par exemple un dossier Images, un dossier Shockwave et un dossier Son. Vous pouvez aussi créé un dossier Assets sépare pour chaque groupe de pages de votre site appartenant à un même domaine, s'il y a peu d' éléments commun à ces divers groupes.
SITE Distant
SITE LOCAL
Utilisez la même structure pour le site local et le site distant. Il est capital que votre site local et votre site Web distant soit pareillement structurés. Si vous creez un site local à l'aide de Dreamweaver, puis transférez tous les fichiers sur le site distant, Dreamweaver veillera à ce que la structure locale soit exactement dupliquée sur le site distant.
Creation de l'aspect de votre conception
En planissant au préalable correctement la conception et la mise en forme de votre site avant de commencer à utiliser Dreamweaver, vous gagnerez beaucoup de temps par la suite. Par exemple, il peut êtreMLSrant de schematiser d'emblée par écrit la maquette de la mise en page de votre site. Une approche plus avancée permet de réaliser un dessin composite de votre site au moyen de logiciels, tels que Macromedia Freehand ou Fireworks. L'important est d'avoir en main une maquette de la mise en forme et de la conception, que vous pourrez ensuite exploiter lorsque vous construirez cette site.
Il est essentiel de vérifier la cohérence de la mise en forme et de la conception de vos pages. Les internautes doivent pouvoir surfer avec aisance, appréhender sans confusion possible le contenu de votre site et acceder aisément aux différentes pages.
Conception du plan de navigation
S'il est un autre Domaine où la planification est fort utile, c'est celui de la navigation. Lorsque vous connaçez votre site, pensez à l'« expérience » que doivent connaître vos visiteurs. Imaginez comment ils sont pouvoir se déplacer d'un endroit à un autre. Prenez en compte les points suivants :
«-vous esti». Les internautes doivent toujours savoir où ils se trouvent sur leur site et comment revenir à la page d'accueil.
Recherche et index. Donnez aux internautes le moyen d'acceder facilement aux informations qu'ils recherchent.
Echos et réactions. Donnez aux internautes la possibilité de contacter l administrateur Web (s'il y en a un) si le site fonctionne mal, ainsi que toute autre personne associée à l'entreprise ou au site.
Soignez l'aspect de la navigation. La navigation doit rester cohérente dans tout le site. Si vous placez une barre de navigation dans la partie supérieure de votre page d'accueil, faites en sorte qu'elle figure également dans toutes les pages Web associées.
Dreamweaver a mis deux outils de navigation à votre disposition. Pour plus d'informations, voir « Liens et navigation », page 425.
Planification et regroupement des actifs
Une fois que vous savez à quoi va ressembler votre site, vous pouzecerer et regrouper les actifs dont vous aurez besoin. Les actifs sont des éléments tels que des images, du texte ou un support (Flash, Shockwave, etc.). Vérifiez que vous disposez de tous ces éléments avant de commencer le développement de votre site. Dans le cas contraire, vous risquez d'être constamment interrompu dans votre travail, par exemple pour chercher une image oucerer un bouton.
Si vous utilisez les images et les graphiques d'un site clip-art ou crees par un tiers, veillez à les recupérer et à les placer dans un dossier sur votre site (voir « Organisation de la structure du site », page 59). Si vous creez vous-même les actifs, assurez-vous de les avoir tous crees avant de commencer le développement de votre site, y compris les images nécessaires pour les effets de survol. Ensuite, organisez vos actifs de manière à pouvoir y acceder rapidement pendant la création de votre site dans Dreamweaver.
Dreamweaver facilité la réutilisation de mise en page et d'éléments de page dans divers documents grâce à des modèles et des bibliothèques. Il est toute fois plus facile de créé de nouvelles pages avec des modèles et des bibliothèques que de les appliquer à des documents existants.
Utilisez des modèles si un grand nombre de pages adoptent le même format : planifiez et conceivez un modele pour ce format, puis créez de nouvelles pages d'après ce modele. Si vous decidez, par la suite, de remanier le format de l'ensemble des pages, il vous suffira de changer le modele.
Remarque : il existe certaines restrictions quant aux changements que vous pouvez effectuer sur les documents basés sur des modèles. L'utilisation ideale des modèles est l'environnement de travail en équipe : vous avez ainsi la certitude que tout le monde utilise en permanence la même presentation. En dehors de ce type d'environnement de travail, les éléments de bibliothèques peuvent s'avérer plus flexibles.
Utilisez des éléments de bibliothèque si vous savez à l'avance que certaines images ou autres contenus vont appararaitre sur plusieurs pages; conceivez ces éléments à l'avance, puis faites-en des éléments de bibliothèque. Si vous modifiez ces éléments par la suite, leur nouvelle version apparaitra automatiquement sur toutes les pages qui y font appel.
Pour plus d'informations sur la réutilisation des mises en page et d'éléments de page, voir « Gestion des actifs de site, des bibliothèques et des modèles », page 447.
Configuration d'un site Dreamweaver
Une fois la structure de votre site planifiée (voir « Organisation de la structure du site », page 59), ou si vous disposez déjà d'un site, il vous faut désigner le nouveau site dans Dreamweaver avant de commencer son développement.
Un site Dreamweaver vous permet d'organiser tous les documents associés à un site Web. Pensez-y en termes de projet. Il convient de configurer un site pour chaque site Web à développer. L'organisation de vos fichiers dans un site vous permit d'exploiter Dreamweaver avec le FTP pour télécharger votre site sur le serveur Web, suivre et:gérer automatiquement vos liens, puis gérer et partager les fichiers en equipoise. Vous tirerez le meilleur parti des fonctions Dreamweaver uniquement en définissant un site.
Un site Dreamweaver se compose de trois parties, selon votre environnement de travail et le type de site Web en développement :
- Le dossier local représenté votre réseau de travail. Dreamweaver désigne ce dossier comme yours « site local », Pour plus d'informations, voir « Configuration d'un dossier local», page 63.
- Le dossier distant est le réseau dans lequel sont stockés les fichiers, selon votre environnement, que vous réservez aux évaluations, à la production, à la collaboration, etc. Dreamweaver désigne ce dossier comme votre « site distant ». Pour plus d'informations, voir « Configuration d'un dossier distant», page 64.
- Le dossier des pages dynamiques est l'emplacement dans lequel DreamweaverTRAITE les pages dynamiques. Pour plus d'informations, voir « Définition du dossier de traitement des pages dynamiques», page 140.
Pour commencer, vous avez le choix entre configurer entierement un site Dreamweaver et vous limiter à la première étape, à savoir configurer votre dossier local. Vous nevez impératifement réaliser cette première étape avant de vous attaquer à Dreamweaver.
Voupez configurer un site Dreamweaver de deux manieres : en suivant les étapes de l'assistant de definition d'un site ou en utilisant les parametres avances de definition du site, lesquels vous permettront de configurer individuellement des dossiers locaux, distants et d'évaluation, si nécessaire.
1 Choisissez Site > Nouveau site.
La boîte de dialogue Définition du site s'ouvre.
2 Cliquez sur l'onglet Elementaire pour utiliser l'assistant de definition d'un site ou sur l'onglet Avancé pour définir les paramètres avances.
3 Procedez à la configuration du site Dreamweaver :
- Répondez aux questions de l'assistant de définition d'un site, puis cliquez sur le bouton Suivant pour passer aux autres étapes de configuration (voir « Utilisation de l'assistant de définition d'un site », page 63).
- Complétez les catégories de paramètres avancesInfos locales (voir « Configuration d'un dossier local», page 63),Infos distances (voir « Configuration d'un dossier distant»,page 64) et Serveur d'évaluation (voir « Définition du dossier de traitement des pages dynamiques»,page 140), si nécessaire.
Remarque : les utilisateurs qui discoverrent Dreamweaver sont invites à suivre l'assistant de définition d'un site ; les utilisateurs chevronnés de Dreamweaver lui préféeront sans doute les paramètres avances.
Utilisation de l'assistant de définition d'un site
Vou puez utilisel a assistant de definition d'un site pour configurer un site Dreamweaver. Cet assistant a pour fonction de vous guider tout au long de la procedure de configuration. Il est conseilé aux débutants d'opter pour cette methode dans Dreamweaver.
L'assistant: L'assistant est le nombre d'écrans, appelés parties, varie selon les paramètres sélectionnés. Les trois sections principales sont les suivantes :
- Modification des fichiers : il s'agit de l'endetroit dans lequel vous configUREZ votre dossier local. Pour plus d'informations, voir « Configuration d'un dossier local», page 63.
- Test des fichiers : il s'agit de l'endetroit dans lequel vous configUREz le dossier qui sera utilisé par Dreamweaver pour le traitement des pages dynamiques. Pour plus d'informations, voir « Définition du dossier de traitement des pages dynamiques », page 140.
- Partage des fichiers : il s'agit de l'endetroit dans lequel vous configrez votre dossier distant. Pour plus d'informations, voir « Configuration d'un dossier distant », page 64.
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 n'aurez peut-être pas besoin de définir des dossiers dans les trois sections. Chacune d'entre elles est composée de questions destinées à identifier vos besoin.
Pour utiliser l'assistant de définition d'un site pour configurer un site Dreamweaver :
1 Choisissez Site > Nouveau site.
La boîte de dialogue Définition du site apparait.
2 Cliquez sur l'onglet Avance pour définir les paramétres avances.
3 Répondez aux questions de tous les écrans, puis cliquez sur le bouton Suivant pour continuer. Cliquez sur le bouton Précédent pour revenir en arrêté, si nécessaire.
Configuration d'un dossier local
Le dossier local représenté le réseau de travail de votre site Dreamweaver (voir « Configuration d'un site Dreamweaver», page 62). Il peut se couver sur un ordinateur local ou sur un serveur de réseau. Il s'agit de l'endetroit dans lequel sont stockés les fichiers « en développement » de votre site Dreamweaver.
Configurer un dossier local revient à étabir un site Dreamweaver. Vous pourrez par la suite y ajouter un dossier distant et un dossier d'évaluation (voir « Configuration d'un dossier distant », page 64 et « Création d'un dossier racine pour l'application », page 138); toute fois, il est indispensable de configurer un dossier local avant de vous consacrer au développement dans Dreamweaver.
Configuration d'un dossier local :
1 Choisissez Site > Nouveau site.
La boîte de dialogue Définition du site apparait.
2 Cliques sur le bouton Avancé si les paramètres avancés ne sont pas visibles.
L'onglet Avancé de la boîte de dialogue Définition du site affiche le contenu de la catégorieInfos locales.
3 Spectoriez les options relatives aux informations locales.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
4 Cliquez sur OK.
Dreamweaver create the cache initial du site, et le nouveau site Dreamweaver apparait dans le panneau Site. Pour plus d'informations sur le panneau Site et la gestion du site, voir « Gestion du site», page 71.
Par la suite, lorsque vous serez prét à publier le site sur un serveur distant, il vous faudra ajouter des informations sur le site. Pour plus d'informations, voir « Configuration d'un dossier distant», page 64.
Configuration d'un dossier distant
Une fois configuré le dossier local pour un site Dreamweaver (voir « Configuration d'un dossier local», page 63), il convient de configurer un dossier distant. Les dossiers local et distant vous permettent de transférer des fischiers entre votre disque local et un serveur Web, ce qui facilitate la gestion des fischiers sur vos sites Dreamweaver.
Selon votre environnement, les fichiers destinés aux évaluations, à la collaboration, à la production, au déploement et à un certain nombre d'autres scénarios sont stockés dans le dossier distant. En règle générale, votre dossier distant se trouve sur l'ordinaire à partir duquel vous executez votre serveur Web.
Remarque : vous n'avez pas besoin de specifier un dossier distant si le dossier defini comme dossier local dans la catégorie Infoles locales (voir « Configuration d'un dossier local », page 63) est le même dossier que celui créé pour les fichiers de cette site, sur le système exécutant votre serveur Web. Ce scenario suppose que le serveur Web s'exécute sur toute ordinateur local.
Déterminé le mode d'accès au dossier distant, puis prenez note des informations de connexion. Une fois ces informations obtenues, utilisez la commande Modifier les sites pour configurer votre dossier distant. En cas de problème, voir « Résolution des problèmes de configuration du dossier distant », page 66.
Une fois le dossier distant configuré, vous pouze vous y connecter, puis rechercher etGERER les fichiers de cette site Dreamweaver. Si vous developspez un site dynamique, il vous faut definir un dossier pour le traitement des pages dynamiques (voir « Definition du dossier de traitement des pages dynamiques », page 140).
1 Choisissez Site > Modifier les sites.
La boîte de dialogue Modifier les sites s'affiche.
2 Sélectionnez un site Dreamweaver préexistent.
Si vous n'avez pas encore définir de site Dreamweaver, creez un dossier local avant de poursuivre (voir « Configuration d'un dossier local», page 63).
3 Cliquez sur Modifier.
La boîte de dialogue Définition du site apparait.
4 Cliquez sur l'onglet Avancé si Dreamweaver affiche l'assistant de définition d'un site.
5 Sélectionnez la catégorieInfos distances dans la liste de gauche.
6 Choisissez une option d'accès.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
7 Cliquez sur OK.
Pour vous connecter à un dossier distant :
Dans le panneau Site,CHOISSEZ Site > Connecter ou cliquez sur le bouton Connecter a un hote distant dans la barre d'outils.
Remarque : si vous site utilise FTP avec un serveur SSH pour acceder à votre dossier distant, une invite de commande s'exécuté pour vous connecter au serveur SSH, lors de votre tentative de connexion au serveur distant. Cliquez sur OK dans la boîte de dialogue Dreamweaver après votre connexion.
Pour vous déconnecter d'un dossier distant :
Dans le panneau Site,CHOISSEZ Site > Deconnecter ou cliquez sur le bouton Deconnecter de l'hote distant dans la barre d'outils.
Définition du repertoire hôte pour l'accès par FTP
Si vous choisissez d'acceder à votre dossier distant par FTP (voir « Configuration d'un dossier distant », page 64), il vous faut en définir le réseau hôte. Le réseau hôte à spécifique doit correspondre au dossier racine du dossier local. Le schéma ci-dessous représenté un exemple de dossier local à gauche et un exemple de dossier distant à droite.
Si la structure de votre site de dossier ne correspond pas à celle de votre dossier local, les fichiers transférés par Dreamweaver ne seront pas stockés au bon endroit et ne seront pas visibles pour les visiteurs du site. De plus, les chemins de vos images et de vos liens sont rompus.
Le dossier racine distant doit déjà exister pour que Dreamweaver puisse s'y connecter. Si aucun repertoire racine n'este pour toute dossier distant, creez-en un ou demandez a l'administrateur du serveur de se charger de cette operation.
Si vous n'êtes pas sur de ce que vous doivent taper dans le champ Répertoire de l'hôte, contactez l'administrateur du serveur. Sinon, essayez de le laisser vierge. Sur certains serveurs, votre répertoire d'hôte est celui dans lequel la connexion FTP est établie. Pour en être sur, établissez une connexion avec le serveur. Si vous VOYZ apparaître dans le volet Affichage distant de votre panneau Site un dossier nommé public_html, www ou ayant votre nom d'utilisateur, il s'agit probablement du nom à indiquer dans la zone Répertoire hôte.
Utilisation de Secure Shell pour l'accès par FTP
Lorsque vous choisissez d'acceder à votre dossier distant par FTP dans la boîte de dialogue Définition du site, vous avez la possibilité d'utiliser la connexion sécurisée codee SSH (Secure Shell) sous Windows. Pour activer SSH sous Windows, cliquez sur le bouton Aide dans la boîte de dialogue.
Pour utiliser SSH sous Macintosh, téléchargez l'application SSH client pour Macintosh à partir du site Web du centre de support de Dreamweaver à l'adresse : http://www.macromedia.com/fr/support/.
Résolution des problèmes de configuration du dossier distant
Il existe de très nombreuses façon de configurer un serveur Web. Cette section vise à vous expliquer certains problèmes courants que vous pouvez rencontres en configurant un dossier distant, et à vous permettre de les résoudre.
- L'implémentation FTP de Dreamweaver peut ne pas fonctionner correctement avec certains serveurs proxy, pare-feu multi-niveau et autres formes d'accès indirect à un serveur.
Si vous avez des problèmes d'accès en FTP, demandez l'aide de votre administrateur système.
- Pour l'implémentation FTP de Dreamweaver, il est indispensable de se connecter au dossier racine du système distant. (dans de nombreuses applications, vous pouvez vous connecter à n'importe quel réseau distant, puis naviguer dans le système de fichiers distants pour rechercher un réseau).
Veillez à indiquer le dossier racine du système distant comme réseau hôte.
Si vous rencontres des problèmes de connexion et avons spécifié le repertoire hôte avec une seule barre oblique (/), c'est peut-être qu'il vous faut spécifique un chemin relatif à partir du repertoire auquel vous vous connectez et du dossier racine distant.
Si, par exemple, le dossier racine distant est un réseau de niveau supérieur, vous devez parfois spécifique .././ pour le réseau hote.
- Par ailleurs, les noms de dossiers et de fichiers qui contiennent des espaces ou des caractères spéciaux peuvent souvent occasionner des problèmes à l'occasion d'un transfert sur un site distant.
Utilisez des traits de soulignement à la place des espaces, et évitez, dans la mesure du possible, d'utiliser des caractères spéciaux pour les noms de fichiers et de dossiers. En particulier, les points, barres obliques, virgules et apostrophes sont à éviter dans les noms de fichiers et de dossiers. Il arrive que la présence de caractères spéciaux dans les noms de fichiers ou de dossiers empêche Dreamweaver de créé une carte du site.
-
En cas de problème avec un nom de fichier long, raccourcisse ce nom. Sur Macintosh, les noms de fichiers ne peuvent pas compter plus de 31 caractères.
-
Notez que certains serveurs utilisent ce qui est appelé, suivant le système d'exploitation, des liens symboliques (Unix), des raccourcis (Windows) ou des alias (Macintosh), pour connecter un dossier situé en un point du disque du serveur à un autre dossier situé autres.
Par exemple, le sous-repertoire public_html de votre réseau principal sur le serveur peut n'être qu'un simple lien pointant sur une toute autre partie du serveur. Dans la plupart des cas, ces alias n'ont pas d'effet négatif sur votre capacité à vous connecter au dossier ou réseau approprié, mais si vous ne pouvez vous connecter qu'à une partie du serveur, il s'agit peut-être d'un problème d'alias.
- Si vous découvert un message d'erreur du type « impossible de placer le fjichier», votre dossier distant peut-être sature. Pour plus d'informations, consultez le journal FTP.
En général, si vous avez un problème durant un transfert via FTP, examines le journal FTP enCHOIsissant Afficher > Journal FTP du site dans le panneau Site (Windows) ou Site > JournalFTP du site (Macintosh).
Modification d'un site Dreamweaver
Utilisez les paramètres avances de la boîte de dialogue Définition du site pour modifier vos sites Dreamweaver.
Pour modifier un site Dreamweaver, précédez de l'une des manières suivantes :
-
Choisissez Site > Modifier les sites, Sélectionné un site, puis cliquez sur Modifier.
-
Choisissez Site > Ouvrir le site, puis selectionné un site.
Modification de sites Web existants dans Dreamweaver
Vou puez utiliser Dreamweaver pour modifier des sites existants, même si vous n'avez pas utilisé Dreamweaver pour creer le site original. Ces sites peuvent se trouver sur votre système ou sur un système distant.
Modification d'un site Web local existant dans Dreamweaver
Vou puevez utiliser Dreamweaver pour modifier un site existant sur votre disque dur local, même si vous n'avez pas utilisé Dreamweaver pour creer le site original.
Pour modifier un site Web local existant :
1 Ouvrez la boite de dialogue Definition du site en procédant de l'une des façon suivantes :
- Choisissez Site > Modifier les sites, puis cliquez sur Nouveau.
- Choisissez Site > Ouvrir le site > Définir les sites.
La boîte de dialogue Définition du site affiche les options desInfos locales.
2 Complétez les options de la boîte de dialogue.
3 Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.Cliquez sur OK.
Modification d'un site Web distant existant dans Dreamweaver
Vou puevez 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 creer le site original.
Notez que même si vous avez l'intention de ne modifier qu'une partie du site distant, il est fortement conseilé de dupliquer localement la structure complète de la branche générée du site distant (du dossier racine du site distant jusqu'aux fichiers que vous désirez modifier).
Si, par exemple, le dossier racine de votre site distant, appelé public_html, contient deux sous-dossiers, Projetc1 et Projetc2, et si vous ne désirez modifier que les fischiers HTML contenus dans Project1, il n'est pas nécessaire de télécharger les fischiers contenus dans Project2, mais vousdezvez mapper vos detsior racine local sur public_html, et non pas sur Project1.
SITE Distant
SITE LOCAL
Pour modifier un site distant existant :
1 Creez un dossier local contenant le site existant, puis definissez-le en tant que dossier racine local du site (voir « Configuration d'un dossier local», page 63).
2 Configurez un dossier distant à partir des informations relatives à votre site existant (voir « Configuration d'un dossier distant », page 64). Veillez àCHOISIR le dossier racine correct pour le site distant.
3 Cliquez sur le bouton Connecter à un hote distant dans le panneau Site pour vous connecter au site distant.
4 Selon la taille de la partie du site distant que vous désirez modifier, précédez de l'une des manières suivantes :
- Si vous désirez retravailler le site tout entier, Sélectionnez le dossier racine du site distant et cliquez sur Acquerir pour télécharger le site complet sur votre disque dur local.
- Si vous désirez travailler sur un seul des fischiers ou dossiers du site, Sélectionnez ce fichier ou ce dossier dans le volet Affichage distant du panneau Site et cliquez sur Acquérir le(s) fichier(s) pour le télécharger sur votre disque dur local
Dreamweaver duplique automatiquement toute la partie de la structure du site distant nécessaire pour replacer le fichier télécharge au niveau ajustat dans la hierarchie du site. Si vous ne modifie qu'une partie d'un site, il est en général conseilé de charger également les fichiers dépendants.
5 Continuez comme pour creer un nouveau site : modifiez les documents, affichez-les et testezles, puis transferez-les sur le site distant.
Le panneau Site de Macromedia Dreamweaver MX vous permit d'organiser les fichiers se trouvant dans des dossiers locaux et distants (également appelés « sites »). Ce panneau vous permet de reproductive la structure d'un dossier local sur un serveur distant ou celle d'un dossier distant sur votre système local. Les liens relatifs que vous creez dans le site local continuant de fonctionner après transfert des fichiers sur le site distant, car la structure des deux sites est identique.
Pour creer un site local dans Dreamweaver, utilisez la commande Nouveau site, qui cree un dossier racine local pour le site, ou definissez un dossier existant en tant que dossier racine local (voir « Configuration d'un dossier local», page 63). La definition d'un site distant s'effectue lors de la creation d'un site ou par ajout ulterieur du site à l'aide de la commande Modifier les sites (voir « Configuration d'un dossier distant», page 64).
Dreamweaver comprehend une série de fonctions permettant de:gérer un site et de transférer des fichiers depuis et vers un serveur distant. Lorsque vous transferez des fichiers entre le site local et le site distant, Dreamweaver conserve la meme structure de fichiers et de dossiers sur les deux sites. Dreamweaver create automatiquement les dossiers nécessaires sils n'existent pas déjà sur le site de destination. Vous pouvez également synchroniser les fichiers entre le site local et le site distant. Dans ce cas, Dreamweaver copie les fichiers requis dans les deux sens et supprime, le cas échéant, les fichiers inutiles.
Certaines fonctions de Dreamweaver facilitent le travail en équipe sur tout projet de site Web. Vous pouvez archiver et extraire les fischiers d'un serveur distant afin que les autres membres de l'équipe Web puissant savoir qui travaille sur un filchier. Vous pouvez ajouter des Design Notes à vos fischiers afin de partager des informations avec d'autres membres de l'équipe sur l'état, la priorité ou autre d'un filchier. Vous pouvez également utiliser la fonction de rapportrs sur le déroulement du travail afin de générer des rapportrs sur votre site et Brokerir ainsi des informations sur l'état des archivages et des extractions ou rechercher les Design Notes jointes aux fischiers.
Une fois que vous avez publié le site, vous (ou tout membre de l'équipe) pouvez continuer à en assurer la maintenance. Par ailleurs, vous doivent en mesure de déspanner le site à tout moment, avant comme après sa publication (pour plus d'informations, voir « Test d'un site», page 493).
Ce chapitre contient les sections suivantes :
- « A propos du panneau Site», page 72
- « A propos de la carte du site», page 83
- « Importation et exportation de sites», page 89
- « Suppression d'un site de votre liste de sites », page 89
-
« Utilisation de l'archivage et de l'extraction », page 90
Acquisition et placement de fichiers page 93
-
« Synchronisation des fichiers entre le site local et le site distant», page 96
- « Voilage des dossiers et des fichiers du site», page 97
- « Utilisation des Design Notes», page 101
- « Utilisation des rapportes pour améliorer le déroulement du travail », page 105
· « A propos du panneau Sitespring dans Dreamweaver », page 107
- « Utilisation du panneau Sitespring», page 108
A propos du panneau Site
Le panneau Site vous permet de visualiser un site, c'est-à-dire tous les fichiers locaux, distants et du serveur d'évaluation associés au site sélectionné. Le site local apparait par défaut. Pour voir le site distant ou le serveur d'évaluation, modifier la disposition du panneau Site (voir « Modification de la disposition du panneau Site », page 78). Développèz le panneau Site afin d'obtenir un affchage à deux volets (voir « Utilisation du panneau Site », page 73).
Remarque: sur Macintosh, le panneau Site presente toujours deux volets; il ne se réduit pas.
Utilisez le panneau Site pour les opérations courantes de maintenance des fichiers, telles que celles indiquées ci-dessous :
- Création de documents HTML
- Affichage, ouverture et déplacement de fichiers
- Création de dossiers
- Suppression d'éléments
-
Transfert de fichiers entre des sites locaux et distants ou des serveurs d'évaluation
-
Conception de la navigation sur le site à l'aide d'une carte du site (voir « Configuration d'un dossier distant », page 64 et « Utilisation de la carte du site », page 83)
Le panneau Site contient un navigateur de fichiers intégré. En dehors du site en cours, il vous permet de parcourir le disque local et le réseau (voir « Utilisation du navigateur de fichiers intégré », page 82).
Utilisation du panneau Site
Le panneau Site fait partie de l'espace de travail intégré de Dreamweaver (voir « Exploration de l'espace de travail», page 31). Vous pouvez déplacer le panneau ou l'ouvrir et le fermer à votre gré (voir « Utilisation des fenêtres et des panneaux dans Dreamweaver», page 37). Vous avez également la possibilité de développer le panneau pour obtenir un affichage à deux volets du site. Dans ce mode, vous pouvez désigner d'afficher le site local ainsi que le site distant, le serveur d'évaluation ou la carte du site (voir « Modification de la disposition du panneau Site», page 78).
Pour ouvrir ou fermer le panneau Site :
Choisissez Fenetre > Site.
Pour développer ou réduire le panneau Site :
(Windows uniquely) Dans la barre d'outils du panneau Site, cliquez sur le bouton Developpper/Réduire.
Remarque : si vous cliquez sur le bouton Développper/Réduire pour développer le panneau alors qu'il est ancre, celui-ci s'agrandit et vous empêche de travailler dans la fenêtre de document. Pour revenir à la fenêtre de document, cliquez de nouveau sur le bouton Développper/Réduire afin de réduire le panneau. Si vous cliquez sur le bouton Développper/Réduire pour développer le panneau alors qu'il se trouve en mode flottant, celui-ci reste dans ce mode et vous pouvez continuer à travailler dans la fenêtre de document. Avant de pouvoir ancrer de nouveau le panneau, vous doivent le réduire.
Utilisez les options et boutons suivants de la barre d'outils du panneau Site pour définir ce qui doit s'afficher dans le panneau et pour transférer des fichiers :
Remarque : les boutons Fichiers du site, Serveur d'évaluation et Carte du site n'apparaissent que dans le panneau Site développé.
La vue Fichiers du site affiche la structure des fichiers présents sur les sites local et distant dans les volets du panneau Site. (Le site apparaissant dans le volet gauche et droit dépend d'un paramètre de préférence ; voir « Définition des préférences du panneau Site », page 75.) La vue Fichiers du site correspond au mode d'affichage par défaut du panneau Site.
La vue Serveur d'évaluation affiche la structure des répertoires du serveur d'évaluation et du site local.
La vue Carte du site ouvre une carte graphique du site basée sur la relation entre les documents. Maintenez ce bouton enforcé pourCHOISIR entre Carte seulement ou Carte et Fichiers dans le menu contextualuel.
Le menu déroulant Site répertorie les sites que vous avez définis. Pour changer de site, seLECTIONnez-en un autre dans la liste. Pour ajouter un site ou modifier les informations d'un site existant,CHOISSEZ Modifier les sites en bas du menu (voir « Configuration d'un dossier distant », page 64).
Connector ou Déconnecter (FTP, RDS, protocole WebDAV et SourceSafe) permet d'établier ou demettre 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,CHOISSEZ Edition > Preférences ou Dreamweaver > Preférences (Mac OS X), puis seLECTIONnez la catégorie Site dans la liste de gauche.
Actualiser met à jour les répertoires du site local et du site distant. Utilise ce bouton pour déclencher manuellement une mise à jour des répertoires si vous avez désactivé les options Actualiser automatiquement la liste des fischiers locaux ou Actualiser automatiquement la liste des fischiers distants dans la boîte de dialogue Définition du site (voir « Configuration d'un dossier distant », page 64).
Acquier le(s) fichier(s) copie les fichiers sclectionnes depuis le site distant ou le serveur d'évaluation 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, l'obtention d'un fichier consistera à transférer une copie accessible en lecture et écriture.
Les fichiers que Dreamweaver copie sur le site distant ou le serveur d'évaluation sont ceux scélectionnés dans le volet actif du panneau Site. Si le volet actif est Site distant ou Serveur d'évaluation, ce sont les fichiers scélectionnés sur le site distant ou le serveur d'évaluation qui sont copés; si le volet actif est Fichiers locaux, Dreamweaver copie la version presente sur le site distant ou le serveur d'évaluation des fichiers scélectionnés sur le site local. Pour plus d'informations, voir « Acquisition de fichiers provenant d'un site distant ou d'un serveur d'évaluation», page 93.
Remarque : vous pouvez accuperir des fichiers provenant du site distant et du serveur d'évaluation, mais la fonctionnalité d'extraction et d'archivage s'applique uniquement aux fichiers distants.
Placer le(s) fichier(s) copie les fichiers scélectionnés depuis le site local vers le site distant ou le serveur d'évaluation.
Les fichiers que Dreamweaver copie sur le site distant ou le serveur d'évaluation sont ceux scélectionnés dans le volet actif du panneau Site. Si le volet actif est Fichiers locaux, ce sont les fichiers scélectionnés sur le site local qui sont copés; si le volet actif est Site distant ou Serveur d'évaluation, Dreamweaver copie la version présente sur le site local des fichiers scélectionnés sur le site distant ou le serveur d'évaluation. Pour plus d'informations, voir « Placement de fichiers sur un site distant ou un serveur d'évaluation », page 95.
Remarque : vous pouvez placer des fichiers sur le site distant et le serveur d'evaluation, mais la fonctionnalité d'extraction et d'archivage s'applique uniquement aux fichiers distants.
Si vous placez un fjichier qui n'existe pas encore sur le site distant et que l'option Activer l'archivage et l'extraction de fjichier est activée, Dreamweaver ajoute le fjichier au site distant en lui attribuant l'etat « extrait ». Si vous ne voulez pas que le fjichier ajouté soit doté de cet état, cliquez sur le bouton Archiver.
Extraire fischié(r) transfère une copie du fischié du serveur distant vers le site local (en écrasant la copie locale de ce fischié, le cas échéant) et donne au fischié l'etat « extrait » sur le serveur. Ce bouton n'est pas disponible si l'option Activer l'archivage et l'extraction de fischié est désactivée pour le site en cours dans la boîte de dialogue Définition du site. Pour plus d'informations, voir « Archivage et extraction de fischiers sur un site distant », page 91.
Archiver fisier(s) transfere une copie du fisier local vers le serveur distant, de manière à ce qu'il puisse être modifié par d'autres membres de l'équipe. Le fisier local passe alors en lecture seule. Cette option n'est pas disponible si l'option Activer l'archivage et l'extraction de fisier est désactivée pour le site sélectionné dans la boîte de dialogue Définition du site. Pour plus d'informations, voir « Archivage et extraction de fisiers sur un site distant », page 91.
Le bouton Développier/Réduire (Windows uniquement) développement ou réduit le panneau Site afin d'afficher un ou deux volets.
Définition des préférences du panneau Site
Vou puez contrôler les fonctions de transfert de fichiers du panneau Site depuis la boîte de dialogue Préférences.
Pour modifier les préférences du panneau Site :
1 Choisissez Edition > Preférences ou Dreamweaver > Préférences (Mac OS X).
La boîte de dialogue Préférences s'affiche.
2 Sélectionnéz la catégorie Site dans la liste de gauche.
Les options des préférences Site s'affichent.
3 Modifiez les options de votrechoix.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
4 Cliquez sur OK.
Voupeu definir si les types de fichiers transfereuds doivent etre transfereus au format ASCII (texte) ou binaire, et ce en personalisant le fjchier FTPExtensionMap.txt situé dans le dossier Dreamweaver/Configuration (sur Macintosh, il s'agit du fjchier FTPExtensionMapMac.txt). Pour plus d'informations, voir « Bienvenue dans Dreamweaver », page 15.
Modification des colonnes d'affichage des fichiers
Vou puez personaliser les colonnes affichees dans les listedes vues Fichiers locaux et Site distant du panneau Site. You pouze effectuer les operations suivantes :
- Réorganiser les colonnes
- Ajouter des colonnes (jusqu'à 10 colonnes maximum)
- Supprimer des colonnes
- Masquer des colonnes
- Définir les colonnes devant être partagées entre tous les utilisateurs connectés à un site
Les colonnes par défaut sont Nom, Notes, Taille, Type, Modifie et Extrait par. Pour effectuer un tri en fonction d'une colonne, cliquez sur le titre de la colonne dans le panneau Site. Si vous cliquez plusieurs fois sur un même titre de colonne, l'ordre dans lequel Dreamweaver trie la colonne est inversé (ordre croissant ou décroissant).
Remarque : les colonnes par défaut ne peuvent pas etre supprimées, renommées ni associées à une Design Note. Vous pouze en revanche modifier l'ordre et l'alignement de ces colonnes, ou encore les masquer (a I'exception de la colonne Nom).
Pour ajouter, supprimer ou modifier des colonnes :
1 Dans le panneau Site, précédez de l'une des manières suivantes pour acceder aux options Colonnes en mode Fichier :
- Choisissez Afficher > Colonnes en mode Fichier (Windows) ou Site > Affichage des fichiers du site > Colonnes en mode Fichier (Macintosh).
- Choisissez Site > Modifier les sites, Sélectionné un site, puis cliquez sur Modifier.
Sélectionnez la catégorie Colonnes en mode Fichier dans la liste de gauche de la boîte de dialogue Définition du site.
La boîte de dialogue Définition du site affiche les options Colonnes en mode Fichier.
2 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
3 Cliquez sur OK.
Rubrique connexe
« Modification de la disposition du panneau Site», page 78
Ouverture et affichage des sites dans le panneau Site
Dans sa forme réduite, le panneau Site affiche le contenu du site local, du site distant ou du serveur d'évaluation sous la forme d'une liste de fichiers. Lorsqu'il est développé, il affiche le site local ainsi que le site distant ou le serveur d'évaluation dans deux volets. La forme développée du panneau Site peut également afficher une carte visuelle du site local.
Remarque : avant de pouvoir afficher un site distant ou un serveur d'evaluation, vous devez le configurer (voir « Configuration d'un dossier distant », page 64 ou « Définition du dosquier de traitement des pages dynamiques », page 140). Avant de pouvoir afficher une carte du site, vous devez avoir configuré une page d'accueil (voir « Utilisation de la carte du site », page 83).
Pour ouvrir un site Dreamweaver existant :
Dans le menu déroulant Site (menu où le nom du site en cours est affché) du panneau Site, Sélectionnéz un site.
Remarque : pour définiir un site Dreamweaver, voir « Configuration d'un site Dreamweaver », page 62.
Pour selectionner un autre site à afficher lorsque le panneau Site est réduit (Windows uniquement):
Dans le panneau Site, Sélectionnez Affichage local, Affichage distant ou Serveur d'évaluation dans le menu déroulant qui indique le type d'affichage en cours.
Remarque: l'option Affichage local apparait par défaut dans le menu déroulant.
Pour selectionner un autre site à afficher lorsque le panneau Site est développé :
Dans la barre d'outils du panneau Site, cliquez sur le bouton Fichiers du site (pour le site distant), Serveur d'évaluation ou Carte du site.
Remarque : si vous cliquez sur le bouton Carte du site, vous avez le besoin entre afficher la carte du site avec les fichiers du site et n'afficher que la carte du site. Pour plus d'informations, voir « Utilisation de la carte du site », page 83.
Modification de la disposition du panneau Site
Lorsque le panneau Site présente deux volets, le site local apparait par défaut dans le volet droit. Le site distant, le serveur d'évaluation ou la carte du site apparait par défaut dans le volet gauche. Vous pouvez inverser cet affichage.
Pour modifier la disposition du panneau Site :
1 (Windows uniquely) Dans le panneau Site, cliquez sur le bouton Developper/Réduire afin de développer le panneau s'il est affiché en mode réduit.
2 Choisissez Edition > Preférences ou Dreamweaver > Préférences Mac OS X.
La boîte de dialogue Préférences s'affiche.
3 Sélectionnéz la catégorie Site dans la liste de gauche.
Les options des préférences Site s'affichent.
4 Choisissez Fichiers locaux ou Fichiers distants dans le menu déroulant Toujours afficher.
5 Indiquez si les fichiers selectionnés dans le menu Toujours afficher doivent apparaitre dans le volet gauche ou droit du panneau Site développé en selectionnant l'option correspondante.
6 Cliquez sur OK.
Pour modifier la taille de la zone d'affichage :
Dans le panneau Site développé,procédez de l'une des manières suivantes:
- 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éfilament situées dans la partie inférieure du panneau Site pour faire défiler le contenu des volets.
- Dans la carte du site, faites glisser la flèche au-dessus d'un fjichier pour modifier l'espace entre les fjichiers.
Rubrique connexe
« Modification des colonnes d'affichage des fichiers », page 76
Utilisation des fichiers dans le panneau Site
Utilisez le panneau Site pour afficher les sites sous forme de listedes fichiers, ouvrir des fichiers, les denommer, ajouter des dossiers ou des fichiers à un site ou pour actualiser l'affichage d'un site après une modification.
Le panneau Site vous permet également d'identifier les fischiers (sur le site local ou distant) mis à jour depuis leur dernier transfert. Pour plus d'informations sur la synchronisation du site local et du site distant, voir « Synchronisation des fischiers entre le site local et le site distant», page 96.
Pour ouvrir un fichier depuis le panneau Site, procedez de l'une des manieres suivantes :
Double-cliquez sur l'icone du fichier.
- Cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enforcée (Macintosh) sur l'iconde du fichier, puis choisissez Ouvrir.
- Choisissez Fichier > Ouvrir (Windows) ou Site > Ouvrir (Macintosh).
Pour ajouter un fichier ou un dossier à un site :
1 Sélectionnez un fjichier ou un dossier dans le panneau Site.
Dreamweaver create le fichier ou le dossier dans le dossier selectionné actuellement ou dans le même dossier que celui dans lequel le fichier selectionné se trouve.
2 S'il s'agit d'un nouveau dossier, choisissez Fichier > Nouveau dossier dans le panneau Site (Windows) ou Site > Affichage des fichiers du site > Nouveau dossier (Macintosh).
S'il s'agit d'un nouveau fichier, choisissez Fichier > Nouveau fichier dans le panneau Site (Windows) ou Site > Affichage des fichiers du site > Nouveau fichier (Macintosh).
Remarque : vous pouvez égalementCHOIsir Nouveau fichier ou Nouveau dossier dans le menu contextual du panneau Site.
3 Saisissez le nom du nouveau fichier ou dossier.
4 Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
Pour renommer un fichier ou un dossier dans un site :
1 Dans le panneau Site, selectionnez le fjichier ou le dossier à renomer.
2 Procedez de l'une des manieres suivantes pour activer le nom du fichier ou du dossier :
- Choisissez Fichier > Renommer (Windows) ou Site > Renommer (Macintosh).
- 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 enforcée (Macintosh) sur l'icone du fichier, puis choisissez Renommer.
3 Tapez le nouveau nom.
4 Appuyez sur la touche Entre (Windows) ou Retour (Macintosh).
Pour actualiser le contenu du panneau Site, procedede l'une des manieres suivantes :
- Choisissez Afficher > Actualiser (Windows) ou Site > Affichage des fichiers du site > Actualiser (Macintosh).
- Cliquez sur le bouton Actualiser du panneau Site (celaactualiselecontenu des deux volets).
Remarque : Dreamweaver actualise automatiquement le contenu du panneau Site lorsque vous effectuez des modifications dans une autre application, puis revenez à Dreamweaver.
Pour localiser et selectionner des fichiers extrais :
Dans le panneau Site, choisissez Modifier > Sélectionner les fichiers extraits (Windows) ou Site > Affichage des fichiers du site > Sélectionner les fichiers extraits (Macintosh).
Pour localiser et selectionner des fichiers qui sont plus recents sur le site local que sur le site distant :
Dans le panneau Site, choisissez Modifier > Sélectionner locaux plus récent (Windows) ou Site > Affichage des fichiers du site > Sélectionner locaux plus récent (Macintosh).
Pour localiser et selectionner des fichiers qui sont plus recents sur le site distant que sur le site local :
Dans le panneau Site,CHOISSEZ Modifier > SeLECTIONNER distants plus recent (Windows) ou Site > Affichage des fichiers du site > SeLECTIONNER distants plus recent (Macintosh).
Recherche de fichiers dans le panneau Site
Vouss pouvez rechercher un fjichier sur les sites local et distant depuis le panneau Site. Pour plus d'informations sur la recherche et le remplacement de texte dans des fjichiers, voir « Recherche et remplacement de texte», page 308.
Pour retrouver un fichier dans votre site local :
1 Ouvrez le fjichier directement depuis le site distant ou seLECTIONnez-le dans l'affichage du site distant du panneau Site.
2 Procedez de l'une des manieres suivantes:
- Si vous avez ouvert le fjichier dans la fenêtre de document, choisissez Site > Repérer dans le site.
- Si vous avez sélectionné le fichier dans le panneau Site, cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enfonnée (Macintosh), puis choisissez Retrouver sur le site local.
Dreamweaver met le fichier en surbrillance dans l'affichage du site local du panneau Site.
Pour retrouver un fichier dans votre site distant :
1 Ouvrez le fichier directement depuis le site local ou seLECTIONnez-le dans l'affichage du site local du panneau Site.
2 Procedez de l'une des manieres suivantes:
- Si vous avez ouvert le fjichier dans la fenêtre de document, choisissez Site > Repérer dans le site.
- Si vous avez sélectionné le fichier dans le panneau Site, cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enfonnée (Macintosh), puis désissez Retrouver sur le site distant.
Dreamweaver met le fichier en surbrillance dans l'affichage du site distant du panneau Site.
Utilisation du navigateur de fichiers intégré
Le navigateur de fichiers intégré du panneau Site vous permet d'acceder à votre bureau et au réseau local, y compris aux autres sites définis et aux fichiers qui ne sont associés à chaque site. Utilisez le navigateur de fichiers intégré pour effectuer les opérations suivantes sur des fichiers ne se trouvant pas dans le site en cours :
- Faire glisser des fichiers
- Supprimer des fichiers
- Renommer des fichiers
- Parcourir le réseau
- Ouvrir des fichiers dans Dreamweaver ou dans d'autres applications
- Effectuer des opérations sur un site, telles que le transfert de fichiers
Remarque: ces opérations s'effectuent de la même façon que les opérations sur les fichiers d'un site défini (voir « A propos du panneau Site», page 72). Laffective facon de gerer des fichiers est de creer un site Dreamweaver (voir « Configuration d'un site Dreamweaver», page 62).
Lorsque vous faites glisser un fjichier d'un site à un autre site ou à un dosquier non associé à un site, Dreamweaver copie le fjichier, puis l'ajoute à l'emplacement où vous le déposez. Si vous faites glisser un fjichier et le déposez au sein du même site, Dreamweaver déplace le fjichier depuis son emplacement initial vers l'emplacement où vous le déposez.
Lorsque vous faites glisser vers un site un fisier qui n'est associé à chaque site, Dreamweaver copie le fisier à l'emplacement où vous le déposez. Lorsque vous faites glisser un fisier qui n'est associé à chaque site vers un dossier qui n'est pas non plus associé à un site, Dreamweaver déplace le fisier à 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) enforcée pendant que vous faites glisser et déposez le fichier. Pour copier un fichier que Dreamweaver déplace par défaut, maintenez la touche Ctrl (Windows) ou Option (Macintosh) enforcée pendant que vous faites glisser et déposez le fichier.
Afin de vous aider à les identifier, les dossiers associés à un site apparaissent dans une couleur différente de ceux n'appartenant pas à un site dans le navigateur de fichiers. Si vous essayez d'effectuer une opération disponible uniquement pour les sites sur un dossier ou un fichier qui n'est associé à chaque site, Dreamweaver vous demande de définir un site Dreamweaver avant d'effectuer l'opération.
Pour utiliser le navigateur de fichiers intégré :
Dans l'arborescence de fichiers du panneau Site, cliquez sur le signe plus (+) situé en regard du dossier Bureau (Windows) ou sur la flèche d'agrandissement située en regard du dossier Ordinateur (Macintosh)
A propos de la carte du site
Utilisez la carte du site pour qu'un dossier local du site Dreamweaver s'affiche sous la forme d'une carte visuelle d'icones reliées, pour ajouter des fichiers à un site Dreamweaver ou pour ajouter, modifier ou supprimer des liens. La carte du site est idéale pour agencer la structure d'un site. Vous pouvez définirrapidementla structured'ensembledu site,puiscreator uneimagegraphique de la carte du site.
Remarque : l'option de carte du site n'est disponible que pour les sites locaux. Pour creer la carte d'un site distant, copiez le contenu de ce site dans un dossier de votre disque local, puis utilisez la commande Modifier les sites pour définir le site en tant que site local. Pour plus d'informations, voir « Configuration d'un dossier local », page 63.
Utilisation de la carte du site
Vous doivent définir la « page d'accueil » du site avant de pouvoir en afficher la carte. Cette page d'accueil peut correspondre à toute page du site (il n'est pas nécessaire que ce soit la page principale du site). Dans le cas presente, la page d'accueil constitue simplement le point de départ de la carte.
Pour définit la page d'accueil de votre site :
1 Choisissez Site > Modifier les sites.
La boîte de dialogue Modifier les sites s'affiche.
2 Cliquez sur Modifier pour ouvrir un site existant.
La boîte de dialogue Définition du site s'ouvre.
3 Sélectionnéz la catégorie Mise en forme de la carte du site dans la liste de gauche.
La boîte de dialogue Définition du site affiche les options Mise en forme de la carte du site.
4 Cliquez sur l'icone de dossier pour selectionner la page d'accueil du site ou tapez le chemin de ce fichier dans la zone Page d'accueil.
5 Cliquez sur OK.
Pour afficher une carte du site :
1 (Windows uniquely) Dans le panneau Site, cliquez sur le bouton Developper/Réduire afin de développer le panneau s'il est affiché en mode réduit.
2 Choisissez Site > Carte du site ou cliquez sur le bouton Carte du site, puis choisissez Carte seulement ou Carte et fichiers.
Choisissez Carte seulement afin d'afficher la carte du site sans la structure des fichiers locaux ou Carte et fichiers afin d'afficher la carte du site avec cette structure.
Remarque: si vous n'avoz pas defini de page d'accueil ou que Dreamweaver ne trouve pas dans le site en cours une page index.html ou index.htm à utiliser comme page d'accueil, une boîte de dialogue s'ouvre et vous invite à seLECTIONner une page d'accueil enclistant sur Modifier les sites. Sélectionnez un site, cliquez sur Modifier, puis sélectionnez la catégorie Mise en forme de la carte du site dans la liste de gauche de la boîte de dialogue Définition du site.
Le panneau Site affiche soit une carte du site en cours simple, soit une carte du site en cours accompagnée de la structure des fichiers locaux.
Affichage de la carte du site
La carte du site affiche les fichiers HTML et les autres pages sous la forme d'icones. Elle affiche les liens dans l'ordre où ils se trouvent dans le code source HTML, selon le principe suivant :
- Le texte affché 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écifique ( comme un lien d'adresse électronique 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 fjichier est en lecture seule (Windows) ou verrouillé (Macintosh).
Par défaut, la carte du site affiche la structure du site, avec une profondeur de deux niveaux, en commençant par la page d'accueil. Cliquez sur les signes plus (+) et moins (-) en regard d'une page pour afficher ou masquer les pages liées sous le second niveau.
Par défaut, la carte du site n'affiche ni les fischiers masqués, ni les fischiers dépendants. Les fischiers masqués sont des fischiers HTML marqués comme tels. Les fischiers dépendants sont des éléments de contenu non HTML, tels que des images, des modèles, des fischiers Macromedia Shockwave ou Macromedia Flash. Pour plus d'informations, voir « Affichage et masquage des fischiers de la carte du site », page 87.
Utilisez les options de mise en forme de la carte du site pour personneliser son aspect. Vous pouvez spécifier la page d'accueil, indiquer le nombre de colonnes à afficher, préciser si les étiquettes des icones doivent afficher le nom du fichier ou le titre de la page et indiquer si les fichiers dépendants et masqués doivent être affichés.
Pour modifier la mise en forme de la carte du site :
1 Procedez de l'une des manieres suivantes pour ourir la boite de dialogue Definition du site :
- Choisissez Site > Modifier les sites, puis cliquez sur Modifier. Sélectionnez la catégorie Mise en forme de la carte du site dans la liste de gauche.
- Dans le panneau Site,CHOISSEZ Site > Mise en forme (Windows) ou Site > Affichage de la carte du site > Lier au nouveau fjichier (Macintosh).
La boîte de dialogue Définition du site affiche les options Mise en forme de la carte du site.
2 Apportez les modifications de votrechoix.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
3 Cliquez sur OK pour fermer la boite de dialogue Definition du site.
4 Cliquez sur Terminate pour fermer la boite de dialogue Modifier les sites, le cas échéant.
Utilisation des pages dans la carte du site
Lorsque vous travailliez dans la carte d'un site, vous pouvez selectionner des pages, ouvrir une page pour la modifier, ajouter des pages au site, creer des liens entre les fichiers et modifier le titre des pages.
Pour selectionner plusieurs pages dans la carte du site, procedede l'une des manieres suivantes:
-
Cliquez en maintainant la touche Maj enforcée pour seLECTIONner une série de pages consécutives.
-
En partant d'une partie vierge de l'affichage, faites glisser le curseur aujourd'un groupe de fichiers pour les selectionner.
- Cliquez en maintainant la touche Ctrl (Windows) ou Commande (Macintosh) enforcée pour sélectionner des pages non consécutives.
Pour ouvrir une page à modifier dans la carte du site, procédez de l'une des manières suivantes :
Double-cliquez sur le fichier.
- Sélectionnez le fichier, puis choisissez Fichier > Ouvrir (Windows) ou Site > Ouvrir (Macintosh).
Pour ajouter un fjichier existant au site, procedez de l'une des manieres suivantes :
- Faites glisser un fisier depuis l'Explorateur Windows ou le Finder Macintosh vers un fisier de la carte du site. La page est ajoutée au site et un lien est créé entre cette page et le fisier vers lequel vous l'avez fait glisser.
- Choisissez Site > Lier au fjichier existant (Windows) ou Site > Affichage de la carte du site > Lier au fjichier existant (Macintosh), puis recherche le fjichier.
Pour creer un fichier et ajouter un lien à la carte du site :
1 Sélectionnez un fisier HTML dans la carte du site, puis procédez de l'une des manières suivantes :
- Choisissez Site > Lier au nouveau fjichier (Windows) ou Site > Affichage de la carte du site > Lier au nouveau fjichier (Macintosh).
- Cliquez sur Lier au nouveau fjichier dans le menu contextual.
La boîte de dialogue Lier au nouveau fichier s'affiche.
2 Saisissez le nom, le titre et le texte du lien.
3 Cliquez sur OK.
Dreamweaver enregistre le fjichier dans le même dossier que le fjichier selectionné. Si vous ajoutez un fjichier à une branche masquée, le fjichier est également masqué (voir « Affichage et masquage des fjichiers de la carte du site », page 87).
Pour modifier le titre d'une page de la carte du site :
1 Assurez-vous que l'option Afficher les titres de page est bien selectionné. Pour ce faire, dans le panneau Site,CHOISSEZ AFFICHER > AFFICHER les titres de page (Windows) ou Site > Affichage de la carte du site > Afficher les titres de page (Macintosh).
2 Sélectionnez une page, puis procédez de l'une des manières suivantes :
- Cliquez sur le titre. Lorsque le titre devient modifiable, saisissez un nouveau titre.
- Choisissez Fichier > Renommer (Windows) ou Site > Renommer (Macintosh).
3 Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh) après avoir tape le nouveau nom.
Remarque : lorsque vous travailliez dans le panneau Site, Dreamweaver met automatiquement à jour tous les liens vers les fichiers renommés.
Pour utiliser une nouvelle page d'accueil dans la carte du site, procédez de l'une des manières suivantes :
- Dans l'affichage du site local du panneau Site, Sélectionnez un fichier, cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enfonnée (Macintosh), puis choisissez Définir comme page d'accueil.
- Dans l'affichage du site local du panneau Site, cliquez sur le fichier à utiliser comme nouvelle page d'accueil, puis choisissez Site > Définir comme page d'accueil (Windows) ou Site > Affichage de la carte du site > Définir comme page d'accueil (Macintosh).
- Sélectionnez un fjichier dans la carte du site, puis désisissez Site > Nouvelle page d'accueil (Windows) ou Site > Affichage de la carte du site > Nouvelle page d'accueil (Macintosh).
- Choisissez Site > Modifier les sites, puis cliquez sur Modifier. Choisissez Mise en forme de la carte du site parmi les catégories répertoriées dans la boîte de dialogue Définition du site. Recherche la nouvelle page d'accueil, puis cliquez sur OK.
Pourmettreàjourl'affichagede la cartedusiteapresavoireffectuedeschangements:
1 Cliquez n'importe ou dans la carte du site afin de déslectionner les fichiers.
2 Choisissez Afficher > Actualiser (Windows) ou Site > Affichage de la carte du site > Actualiser local (Macintosh).
Affichage et masquage des fichiers de la carte du site
Voupez modifier la presentation de la carte du site de façon à afficher ou masquer les fichiers masques et dépendants. Ceci est utile pourmettre l'accent sur des rubriques ou des éléments de contenu importants et ne pasprésenter des éléments de moindre intérêt.
Pour masquer un fichier en utilisant la carte du site, vous devez d'abord le marquer comme étant masqué. Lorsque vous masquez un fichier, ses liens sont également masqués. 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 italiques.
Remarque: par défaut, les fichiers dépendants sont déjà masqués.
Pour marquer des fichiers comme étant masqués dans la carte du site :
1 Dans la fenêtre de document, Sélectionnéz un ou plusieurs fichiers.
2 Choisissez Afficher > Afficher/Masquer le lien (Windows) ou Site > Affichage de la carte du site > Afficher/Masquer le lien (Macintosh).
Pour afficher ou masquer des fichiers marqués comme étant masqués dans la carte du site, procédez de l'une des manières suivantes:
-
Choisissez Afficher > Afficher les fichiers identifiés comme masqués (Windows) ou Site > Affichage de la carte du site > Afficher les fichiers identifiés comme masqués (Macintosh).
-
Choisissez Afficher > Mise en forme (Windows) ou Site > Affichage de la carte du site > Mise en forme (Macintosh) pour ouvrir la boîte de dialogue Définition du site, puis activez l'option Afficher les fichiers identifiés comme masqués.
Pour afficher les fichiers dépendants dans la carte du site, précédez de l'une des manières suivantes :
- Choisissez Afficher > Afficher les fichiers dépendants (Windows) ou Site > Affichage de la carte du site > Afficher les fichiers dépendants (Macintosh).
- Choisissez Afficher > Mise en forme (Windows) ou Site > Affichage de la carte du site > Mise en forme (Macintosh) pour ouvrir la boîte de dialogue Définition du site, puis Sélectionnez l'option Afficher les fichiers dépendants.
Pour désactiver le marquage de fichiers marqués comme étant masqués dans la carte du site :
1 Dans la fenêtre de document, Sélectionnez un ou plusieurs fichiers.
2 Choisissez Afficher > Afficher les fichiers identifiés comme masqués (Windows) ou Site > Affichage de la carte du site > Afficher les fichiers identifiés comme masqués (Macintosh).
3 Choisissez Afficher > Afficher/Masquer le lien (Windows) ou Site > Affichage de la carte du site > Afficher/Masquer le lien (Macintosh).
Affichage du site à partir d'une branche
Vou puez afficher les details d'une section spécifique d'un site en faisant d'une branche le centre de la carte du site.
Pour afficher une branche différente dans la carte du site :
Selectionnez la page à afficher, puis désisissez Afficher > Afficher comme racine (Windows) ou Site > Affichage de la carte du site > Afficher comme racine (Macintosh).
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électionné un élément du chemin pour afficher la carte du site à partir de ce niveau en cliquant dessus.
Pour développer et réduire les branches dans la carte du site :
Cliquez sur le signe plus (+) ou moins (-) en regard d'une branche.
Enregistrement de la carte du site
Vou puevez enregistrer la carte du site en tant qu'image, puis afficher cette image ou l'imprimer à partir d'un éditeur d'image.
Pour creer un fichier d'image de la carte du site :
1 Dans la carte du site, procedez de l'une des manieres suivantes :
-
Sous Windows, choisissez Fichier > Enregistrer la carte du site. Dans la boîte de dialogue Enregistrer la carte du site, tapez un nom de fichier dans la zone Nom du fichier. Dans le menu local Types de fichiers, choisissez .bmp ou .png.
-
Sur Macintosh, choisissez Site > Affichage de la carte du site > Enregisterer la carte du site > Enregisterer la carte du site en PICT ou Site > Affichage de la carte du site > Enregisterer la carte du site > Enregisterer la carte du site en JPEG.
2 Sélectionnéz l'emplacement où enregistrer le fichier, puis saisissez le nom de l'image.
3 Cliquez sur Enregistrer.
Importation et exportation de sites
Vou puez exporter un site en tant que fjchier XML depuis Dreamweaver, puis le reimporter dans Dreamweaver. Cela vous permit de deplacer des sites entre plusieurs ordinateurs et versions de produit ainsi que de les partager avec d'autres utilisateurs.
Pour exporter un site :
1 Choisissez Site > Modifier les sites.
La boîte de dialogue Modifier les sites s'affiche.
2 Cliquez sur le bouton Exporter.
La boîte de dialogue Exporter le site s'affiche.
3 Recherche l'emplacement ou enregistrer le site.
4 Cliquez sur Enregistrer.
Dreamweaver enregistr re site en tant que fjchier XML en lui attribuant l'extension STE et le place a l'endetroit indiqué.
5 Cliquez sur Terminate pour fermer la boite de dialogue Modifier les sites.
Pour importer un site :
1 Choisissez Site > Modifier les sites.
La boîte de dialogue Modifier les sites s'affiche.
2 Cliquez sur le bouton Importer.
La boîte de dialogue Importer le site s'affiche.
3 Recherche le site à importer (enregistré en tant que fichier XML), puis selectionnez-le.
Remarque : pour pouvoir importer un site, vous devez d'abord l'avoir exporté depuis Dreamweaver, qui l'enregistre en tant que fichier XML.
4 Cliquez sur Ouvrir.
Dreamweaver imports the site, don't le nom apparait dans la boite de dialogue Modifier les sites.
5 Cliquez sur Terminate pour fermer la boite de dialogue Modifier les sites.
Suppression d'un site de votre liste de sites
Si vous ne souhaitez plus utiliser un site dans Dreamweaver, vous pouvez le supprimer de votre liste de sites. Les fichiers du site ne sont pas effacés par cette opération.
Remarque : si vous supprimez un site de votre liste de sites, toutes les informations sur la configuration de ce site sont définitivement effacées.
Pour prisoner un site de la liste des sites :
1 Choisissez Site > Modifier les sites.
La boîte de dialogue Modifier les sites s'affiche.
2 Sélectionnéz le nom du site.
3 Cliquez sur Supprimer.
Une boîte de dialogue vous demande de confirmer la suppression.
4 Cliquez sur Oui pour supprimer le site de la liste ou sur Non pour conserver le site.
5 Cliquez sur Terminate pour fermer la boite de dialogue Modifier les sites.
Si vous travailliez en équipe, vous avez la possibilité d'archiver et d'extraire des fichiers sur les serveurs local et distant. Si vous étés la seule personne à travailler sur le serveur distant, vous pouze utiliser les commandes Acquerir et Placer pour transférer des fichiers sans avoir à les archiver ou à les extraire (voir « Acquisition et placement de fichiers », page 93).
L'extraction d'un fjichier équivaut à déclarer : « Je suis en train de travailler sur ce fjichier ; n'y touche pas ! » Lorsqu'un fjichier est extrait, Dreamweaver affiche le nom de la personne qui l'a extrait dans le panneau Site, ainsi qu'une coche rouge (si le fjichier a été extrait par un membre de l'équipe autre que vous-même) ou verte (si vous étés la personne à avoir extrait le fjichier) en regard de son icône.
L'archivage d'un fichier équivaut à lemettre à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 apparait en regard du fichier dans le panneau Site 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 fjchier LCK est visible pres du fjchier extrait dans la hierarchie de fichiers afin d'eviter ce type d'incident.
Pour activer ou désactiver les options d'archivage et d'extraction pour certains sites, voir « Configuration du système d'archivage et d'extraction de fichiers », page 90. Pour plus d'informations sur le transfert de fichiers entre les sites locaux et distants sans archivage ni extraction, voir « Acquisition de fichiers provenant d'un site distant ou d'un serveur d'évaluation», page 93 et « Placement de fichiers sur un site distant ou un serveur d'évaluation», page 95.
Remarque : vous pouvez utiliser la fonctionnalité d'acquisition et de placement de fichiers sur un serveur d'évaluation, mais le système d'archivage et d'extraction n'est pas disponible sur ce type de serveur.
Pour utiliser le système d'archivage et d'extraction, vous doivent associier votre site local à un serveur distant (voir « Configuration d'un dossier distant», page 64).
Pour configurer le système d'archivage et d'extraction de fichiers :
1 Choisissez Site > Modifier les sites.
La boîte de dialogue Modifier les sites s'affiche.
2 Sélectionnez un site, puis cliquez sur Modifier.
La boîte de dialogue Définition du site apparait.
3 Cliquez sur la categorie Info distance dans la liste de gauche.
La boîte de dialogue Définition du site affiche les options desInfos distances. La section Archiver/Extraire apparait dans le partie inférieure de la boîte de dialogue.
Remarque : si vous ne VOYEZ pas les options Archiver/Extraire,ILA signifie que vous n'avoz pas configuré le serveur distant (voir « Configuration d'un dossier distant », page 64).
4 Complétez la section Archiver/Extraire.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
5 Cliquez sur OK.
Utilisez le panneau Site ou la fenêtre de document pour archiver et extraire des fichiers sur un serveur distant.
Le système d'archivage et d'extraction de Dreamweaver utilise les symboles suivants dans le panneau Site :
- Une coche de couleur verte indique que vous disposez du fjichier extrait.
- Une coche de couleur rouge indique qu'un autre membre de l'equipe dispose du fichier extrait.
- Un symbole représentant un cadenas indique que le fichier est en lecture seule (Windows) ou verrouillé (Macintosh).
Si vous extrayez un fjichier et decidez ensuite de ne pas le modifier (ou d'annuler les modifications que vous avez apportées), vous pouvez annuler l'extraction.
1 Sélectionnez un site dans le menu déroulant Site.
2 Sélectionnéz les fichiers à extraire.
Remarque : vous pouvez seLECTIONner des fichiers depuis l'affichage du site local ou distant.
3 Procedez de l'une des manières suivantes pour extraire les fichiers :
- Cliquez sur le bouton Extraire dans la barre d'outils du panneau Site.
- Cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enforcée (Macintosh), puis désissez Extraire dans le menu contextualuel.
4 Lorsque le message d'invite apparait, cliquez sur Oui si vous souhaitez telecharger les fichiers dépendants associés aux fichiers selectionnés ou sur Non si vous ne voulez pas les telecharger.
Remarque : d'une manière générale, il est conseilé de télécharger les fichiers dépendants lorsque le fichier extrait est un nouveau fichier, mais c'est inutile si les versions les plus récentes des fichiers dépendants sont déjà presents sur le disque local.
Une coche de couleur verte apparait en regard de l'icone du fichier pour signaler que vous l'avez extrait.
Pour archiver des fichiers dans un serveur distant à partir du panneau Site :
1 Sélectionnez un site dans le menu déroulant Site.
2 Sélectionné les fichiers extrais ou nouveaux de votre choix.
Remarque : vous pouvez selectionner des fichiers depuis l'affichage du site local ou distant.
3 Procedez de l'une des manieres suivantes pour archiver les fichiers :
- Cliquez sur le bouton Archiver dans la barre d'outils du panneau Site.
- Cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enforcée (Macintosh), puis choisissez Archiver dans le menu contextualuel.
4 Lorsque le message d'invite apparait, cliquez sur Oui si vous souhaitez tlécharger les fichiers dépendants associés aux fichiers selectionnés ou sur Non si vous ne voulez pas les tlécharger.
Remarque : il est en général conseilé de transférer les fichiers dépendants lorsque vous archivez un nouveau fichier, mais si les versions les plus récentes des fichiers dépendants figurent déjà sur le serveur distant, il n'est pas utile de les transférer à nouveau.
Un cadenas apparait en regard de l'icone du fichier pour indiquer qu'il n'est accessible qu'en lecture seule à présent.
Pour archiver ou extraire un fichier ouvert depuis la fenetre de document, procédez de l'une des manières suivantes :
-
Choisissez Site > Archiver ou Site > Extraire.
-
Dans la barre d'outils de la fenêtre de document, cliquez sur l'icone Gestion des fichiers, puis choisissez Archiver ou Extraire dans le menu déroulant.
Remarque : si vous choisissez Site > Archiver ou Site > Extraire et que le fichier selectionné ne fait pas partie du site ouvert actuellement, Dreamweaver tente de déterminer le site auquel ce fichier appartient parmi les sites définis localement. Si ce fichier n'appartient qu'à un seul site local, Dreamweaver ouvre ce site, puis effectue l'opération d'archivage ou d'extraction.
Si vous extrayez le fjichier actif, la version ouverte du fjichier est écrasée par la nouvelle version extraite. Si vous ARCHivez le fjichier actif, il se peut que ce fjichier soit automatiquement enregistré avant d'être archivé, selon les options définies dans les préférences (voir « Définition des préférences du panneau Site », page 75).
1 Sélectionnéz le fichier.
2 Procedez de l'une des manieres suivantes pour annuler l'extraction :
- Choisissez Site > Annuler l'extraction.
- Dans le panneau Site, cliquez sur le fjichier avec le bouton droit de la souris (Windows) ou en Maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Annuler l'extraction dans le menu contextual.
La copie locale du fichier passe alors en lecture seule, et toutes les modifications que vous y avez apportées sont perdues.
Acquisition et placement de fichiers
Si vous travailliez au sein d'un groupe, vous pouvez utiliser le système d'extraction et d'archivage pour transférer des fichiers entre le serveur distant et l'ordinateur local (voir « Utilisation de l'archivage et de l'extraction », page 90). Si vous étés 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.
Remarque : si vous choisissez Site > Acquérir ou Site > Placer à partir de la fenêtre de document et que le fichier en cours ne fait pas partie du site ouvert actuellément, Dreamweaver tente de déterminer le site auquel ce fichier appaintient parmi les sites définis localement ; si ce fichier n'appartient qu'à un seul site local, Dreamweaver ouvre ce site, puis effectue l'opération d'acquisition ou de placement.
Acquisition de fichiers provenant d'un site distant ou d'un serveur d'évaluation
La commande Acquerir copie les fichiers du site distant ou du serveur d'évaluation sur le site local, en procédant comme suit :
- Si vous utilisez le système d'archivage et d'extraction (c'est-à-dire, si l'option Activer l'archivage et l'extraction de filchier est activée), l'acquisition d'un filchier vous permet d'obtenir une copie locale du filchier accessible en lecture seule; le filchier reste disponible sur le site distant ou le serveur d'évaluation pour que d'autres membres de l'équipe puissant l'extraire (voir « Utilisation de l'archivage et de l'extraction », page 90).
- Si vous n'utilise pas le système d'archivage et d'extraction (c'est-à-dire, si l'options Activier l'archivage et l'extraction de fichier n'est pas activée), l'acquisition d'un fichier consiste à transférer une copie accessible en lecture/écriture.
Remarque : si vous travailliez 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 doivent l'utiliser également.
Vou puez acquerir des fichiers en les selectionnant soit dans l'affichage du site local, soit dans l'affichage du site distant du panneau Site. Si la vue Site distant est active, Dreamweaver copie les fichiers distants selectionnés sur le site local ; si la vue Site local est active, Dreamweaver copie sur le site local la version distante des fichiers locaux selectionnés.
Pour n'acquerir que les fichiers dont la version distante est plus recente que la version locale, utilisez la commande Synchroniser (voir « Synchronisation des fichiers entre le site local et le site distant », page 96).
Dreamweaver enregistre l'activité de tous les transferts de fischiers en FTP. Si une erreur se produit lors du transfert d'un fisquier en FTP, le journal FTP du site peut vous aider à déterminer le problème.
Pour afficher le journal FTP :
Choisissez Afficher > Journal FTP du site.
Pour accérir des fichiers se trouvant sur un site distant ou un serveur d'évaluation :
1 Dans le menu déroulant Site du panneau Site, Sélectionnez un site.
2 Si vous utilisez le protocole FTP pour transférer les fichiers, cliquez sur le bouton Connecter pour étabir une connexion avec le serveur distant.
Si une connexion est déjà établie (ce qui est indiqué par la présence du bouton Déconnecter), ignorez cette étape.
Si les fichiers distants sont affichés dans le volet Site distant du fait d'une connexion antérieure, il n'est pas nécessaire de cliquer sur Connecter ; lorsque vous cliquez sur Acquérir, Dreamweaver se connecte automatiquement.
3 Sélectionné les fichiers à télécharger.
Les fichiers sont généralement selectionnés dans la vue Site distant ou Serveur d'évaluation, mais il est également possible de les selectionner dans la vue Site local.
4 Procedez de l'une des manières suivantes pour accuper un fichier :
- Cliquez sur le bouton Acquérir dans la barre d'outils du panneau Site.
- Choisissez Acquérir dans le menu contextual.
- Choisissez Site > Acquérir.
Remarque : si le fjichier est actuellément ouvert dans une fenetre de document, vous pouze égalementCHOISIR Site > Acquerir à partir de la fenetre de document.
Une boîte de dialogue s'affiche pour vous demander si vous souhaitez accérir les fichiers dépendants.
5 Pour télécharger également les fichiers dépendants, cliquez sur Oui ; pour les éviter, cliquez sur Non.
Si vous disposez déjà de copies locales des fichiers dépendants, cliquez sur Non.
Pour interrompre à tout moment le transfert de fichier, cliquez sur le bouton Annuler dans la boite de dialogue d'etat. Le transfert en cours peut ne pas s'internorme immediatement.
Placement de fichiers sur un site distant ou un serveur d'évaluation
D'une manière générale, la commande Placer copie un fichier depuis le site local vers le site distant sans changer l'etat d'extraction du fichier. Il existe deux types de circonstances dans lesquelles la commande Placer est préféable à la commande Archiver :
- Utilisez la commande Placer lorsque vous ne travailliez pas en equipoipe et n'utilisez pas le système d'archivage et d'extraction.
Remarque : si vous souhaitez placer un fisier sur un serveur distant et l'archiver, utilisez la commande Archiver (voir « Archivage et extraction de fisiers sur un site distant », page 91).
- Utilisez la commande Placer 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.
Pour ne placer que les fichiers dont la version locale est plus recente que la version distante, utilisez la commande Synchroniser ; voir « Synchronisation des fichiers entre le site local et le site distant », page 96.
Remarque : n'utilise pas de caractères spéciaux (tels que é, c ou ¥) ou de signes de ponctuation (virgules, points-virgules, barres obliques ou points) dans le nom des fischiers que vous avez l'intention de placer sur un site distant ou un serveur d'évaluation. La plupart des serveurs transformeront ces caractères lors du transfert, ce qui risque de rendre inopérants les liens vers ce fichier.
Pour placer des fichiers sur un site distant ou un serveur d'évaluation :
1 Dans le menu déroulant Site du panneau Site, Sélectionnez un site.
2 Si vous utilisez le protocole FTP pour transférer les fischers, vous pouvez cliquer sur Connecter pour étabir une connexion avec le serveur distant, ce qui vous permet de voir ce qui se trouve sur ce site avant de transférer les fischers.
Il n'est toute fois pas obligatoire de cliquer sur Connecter, car Dreamweaver se connecte automatiquement lorsque vous cliquez sur Placer.
3 Sélectionnéz les fichiers à télécharger
Les fichiers sont généralement selectionnés dans la vue Site local, mais il est également possible de les sélectionner dans la vue Site distant.
4 Procedez de l'une des manieres suivantes pour placer un fichier :
- Cliquez sur le bouton Placer dans la barre d'outils du panneau Site.
- Choisissez Placer dans le menu contextual.
- Choisissez Site > Placer.
Si le fichier est actuellément ouvert dans une fenetre de document, vous pouvez aussi désirer Site > Placer à partir de la fenetre de document.
5 Si le fichier n'a pas encore ete enregistré, il se peut qu'une boite de dialogue s'ouvre (selon les préférences définies dans le volet Site de la boite de dialogue Préférences) pour vous permettre de l'enregistrer avant de le placer sur le serveur distant.
Pour enregistrer le fjichier, cliquez sur Oui; pour placer la derniere version enregistrree de ce fjichier sur le serveur distant, cliquez sur Non. Si vous avez choisi de ne pas enregistrer le fjichier, aucune des modifications effectuees depuis le dernier enregistrement ne sera placee sur le serveur distant. Toutefois, le fjichier reste ouvert, ce qui vous permit encore d'enregistrer les changements apres avoir place le fjichier sur le serveur.
Une boîte de dialogue s'affiche pour vous demander si vous souhaïtez également placer les fichiers dépendants.
6 Pour transférer également les fichiers dépendants, cliquez sur Oui ; pour les éviter, cliquez sur Non.
Si le site distant contient déjà des copies des fichiers dépendants, cliquez sur Non. Pour éviter qu'il ne vous soit proposé à l'avenir de télécharger les fichiers dépendants, activez l'option Ne plus me demander.
Pour interrompre le transfert de fichier, cliquez sur le bouton Annuler de la boite de dialogue d'etat. Le transfert en cours peut ne pas s'interrompree immEDIatement.
Dreamweaver enregistré 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 FTP du site peut vous aider à déterminer le problème. Pour afficher le journal,CHOISSEZ AFFICHER > Journal FTP du site.
Synchronisation des fichiers entre le site local et le site distant
Après avoir créé des fischiers sur votre site local et votre site distant, il vous est possible de synchroniser les fischiers entre les deux sites. La commande Site > Synchroniser permet de transférer les versions les plus récentes de vos fischiers, vers et depuis votre site distant.
Si votre site distant est un serveur FTP (et non un serveur en réseau), la synchronisation de vos fichiers s'effectuera en FTP. Pour plus d'informations sur l'utilisation du protocole FTP, voir « Configuration d'un dossier distant », page 64.
Avant de synchroniser les sites, Dreamweaver vous permet de vérifier les fischiers à placer ou à accuperir sur le serveur distant. Par ailleurs, une fois la synchronisation effectue, Dreamweaver vous confirme les fischiers qui ont été mis à jour.
Pour identifier les fichiers qui sont plus récents sur le site local ou le site distant sans effectuer de synchronisation, procédez de l'une des manières suivantes :
- Dans le panneau Site, choisissez Modifier > Sélectionner locaux plus récent ou Modifier > Sélectionner distants plus récent (Windows).
- Choisissez Site > Affichage des fichiers du site > Sélectionner locaux plus récent ou Site > Affichage des fichiers du site > Sélectionner distants plus récent (Macintosh).
Pour synchroniser vos fichiers :
1 Dans le panneau Site, selectionnez un site dans le menu déroulant contenant la liste des sites en cours.
2 Sélectionnéz des fichiers ou des dossiers précis.
Si vous souhaitez synchroniser l'ensemble du site, ignorez cette étape.
3 Dans le panneau Site, procédez de l'une des manières suivantes pour effectuer la synchronisation :
-
Choisissez Site > Synchroniser.
-
Cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enforcée (Macintosh), puis choisissez Synchroniser dans le menu contextualuel.
La boîte de dialogue Synchroniser les fichiers s'affiche.
4 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
Dreamweaver synchronise automatiquement les fichiers. Si les fichiers sont déjà synchronisés, Dreamweaver vous informme qu'il n'est pas nécessaire de proceder à leur synchronisation.
Voilage des dossiers et des fichiers du 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 pouze voir 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 se rappelle tous les paramètres définis pour chaque site, vous n'avez pas à sélectionner le type de fichier youlu chaque fois que vous travailliez sur un site.
Ainsi, si vous travailliez sur un site de grande taille et ne souhaitez pas télécharger vos fichiers multimédias tous les jours, vous pouvez utiliser le 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.
Voupez 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 :
- Placement, acquisition, archivage et extraction
Rapports
- Sélection des fichiers locaux et distants les plus récents
- Opérations portant sur le site entier, telles que la vérification et la modification des liens ou la recherche et le remplacement d' éléments
- Synchronisation
- Contenu du panneau Actifs
- Mise à jour des modèles et 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 parlots, car cela pourrait les désynchroniser par rapport à leurs instances.
Voupez effectuer une operation sur un dossier voilé précis en leLECTIONnant dans le panneau Site, puis en effetuant l'opération voulue. Toute operation effectuée directement sur un fichier ou un dossier annule le voilage.
Activation et désactivation du voilage sur un site
Le voilage est activé par défaut sur un site. Vous pouvez le désactiver définitivement ou provisoirement afin d'effectuer une opération sur tous les fichiers, y compris les fichiers voilés. Lorsque vous désactivez le voilage sur un site, cela supprime tous les voiles des fichiers voilés. Lorsque vous le réactivez, tous les fichiers qui étaient précédemment voilés retrouvent cet état.
Remarque : vous pouvez également utiliser l'option Supprimer tous les voiles pour supprimer le voilage de tous les fichiers, mais cela ne désactive pas le voilage. De plus, cette option ne vous permet pas de rétablit automatiquement le voilage de tous les dossiers et fichiers qui étaientAAParavant voils ; il vous faut ensuite redéfinir manuellement le voilage de chaque dossier et type de fichier concerné.
Pour activer et désactiver le voilage sur un site :
1 Dans le menu déroulant Site du panneau Site, Sélectionnez un site.
2 Dans le panneau Site, procedez de l'une des manieres suivantes :
- Choisissez Site > Voilage pour acceder au sous-menu.
- Sélectionnez un dossier ou un fisier, clique avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enforcée (Macintosh) pour acceder au menu contextualuel.
3 Dans le sous-menu, procedede l'une des manieres suivantes:
- Sélectionnez Activer ou Déactiver le voilage.
- Choisissez Paramètres. Dans l'onglet Avancé de la boîte de dialogue Définition du site, sélectionné la catégorie Voilage dans la liste de gauche, activé ou désactiver l'options Activer le voilage, puis cliquez sur OK.
Cela active ou désactive le voilage sur le site.
Voilage et suppression du voilage pour les dossiers d'un site
Il est possible de voiler des dossiers spécifique, mais pas tous les dossiers existants ou un site entier. Il est toute fois possible de voiler plusieurs dossiers simultanément.
Pour voiler ou supprimer le voile de dossiers spécifiques au sein d'un site :
1 Dans le menu déroulant Site du panneau Site, Sélectionnez un site pour lequel le voilage est activé.
2 Sélectionnéz les dossiers de votrechioix auxquels appliquer un voile ou le supprimer.
3 Dans le panneau Site, procedez de l'une des manieres suivantes :
- Choisissez Site > Voilage > Voiler ou Site > Voilage > Supprimer le voile.
- Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Ctrl enforcée (Macintosh), puis choisissez Voilage > Voiler ou Voilage > Supprimer le voile dans le menu contextualuel.
Une ligne rouge apparait ou disparait sur l'icone du dossier pour indiquer que le dossier est voilé ou dévoilé.
Voilage et suppression du voilage de certains types de fichier
Vou puevez indiquer des types de fichier à voiler afin que Dreamweaver voile tous les fichiers se terminant d'une certaine maniere. 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 apparaisant à la fin d'un nom de fichier.
Pour voiler certains types de fichier au sein d'un site :
1 Dans le menu déroulant Site du panneau Site, Sélectionnez un site pour lequel le voilage est activé.
2 Procedez de l'une des manieres suivantes:
- Choisissez Site > Voilage > Paramètres.
- Cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enfoncée (Macintosh), puis désissez Paramètres.
La boîte de dialogue Définition du site s'ouvre et affiche l'onglet Avancé.
3 Activez la case à cocher Voiler les fichiers se terminant avec.
4 Saisissez les types de fichier à voiler dans la zone de texte.
Vou puez saisir, par exemple, .jpg afin de voiler tous les fichiers dont le nom se termine par .jpg dans le site.
Remarque : pour saisir plusieurs types de fichier, séparez chaque type par un espace ; n'utilisez ni virgule ni point-virgule.
5 Cliquez sur OK.
Une ligne rouge apparait sur les fichiers concernés pour indiquer qu'ils sont voilés.
Conseil : certains logiciels créé des fichiers de sauvegarde se terminant par un suffixe donné, tel que .bak. Vous pouvez voiler ces fichiers.
Pour supprimer le voile de certains types de fichier au sein d'un site :
1 Dans le menu déroulant Site du panneau Site, Sélectionnez un site pour lequel le voilage est activé.
2 Procedez de l'une des manieres suivantes :
- Choisissez Site > Voilage > Paramètres.
- Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Ctrl enforcée (Macintosh), puis Sélectionnéz Voilage > Paramètres.
La boîte de dialogue Définition du site s'ouvre et affiche l'onglet Avancé.
3 Procedez de l'une des manieres suivantes:
- Désactive la case à cocher Voiler les fichiers se terminant avec pour supprimer le voile de tous les types de fichier répertoriés dans la zone de texte.
- Dans la zone de texte, supprimez certains types de fichier pour ne supprimer le voile que sur ces types de fichier.
4 Cliquez sur OK.
Les lignes rouges disparaisent des fichiers concernés pour indiquer qu'ils ne sont plus voilés.
Suppression du voile de tous les dossiers et fichiers
Voupuez 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étabir le voile de tous les éléments qui étaientAAParavant voilés.Vous devrez revoiler les éléments un par un.
Remarque : si vous souhaitez supprimer provisoirement le voile de tous les dossiers et fichiers et les revoiler par la suite, désactivez le voilage sur le site (voir « Activation et désactivation du voilage sur un site », page 98).
Pour supprimer le voile de tous les dossiers et fichiers au sein d'un site :
1 Dans le menu déroulant Site du panneau Site, Sélectionnez un site pour lequel le voilage est activé.
2 Sélectionnez un fjichier ou un dossier quelconque du site.
3 Dans le panneau Site, procedez de l'une des manieres suivantes :
- Choisissez Site > Voilage > Supprimer tous les voiles.
- Cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Ctrl enforcée (Macintosh), puis seLECTIONnez Voilage > Supprimer tous les voiles.
Remarque : cela désactive également la case à cocher Voiler les fichiers se terminant avec, sous Site > Voilage > Paramètres.
Les lignes rouges sur les icônes des dossiers et des fichiers disparaisent pour indiquer que tous les fichiers et dossiers du site ne sont plus voilés.
Utilisation des Design Notes
Les Design Notes sont des notes créées pour un fichier donné. Les Design Notes sont associées au fichier qu'elles décrivent, mais stockées dans un autre fichier. 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 pouze ajouter à ce dernier des Design Notes contenant un commentaire expliquant que le document original se trouve dans le dossier de l'autre site. Par la suite, si ce document est modifié (par vous-même ou par quelqu'un d'autre), vous saurez que la page originale doit être mise à jour.
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é. Vous pouvez par exemple inclure des informations sur le processus de creation du document ou des notes sur la façon dont un devis a eté calculé ou dont une configuration a eté elaborée ou encore sur les facteurs de marketing qui ont influencé une décision de production.
Le panneau Site vous permet de voir les fichiers auxquels sont joints des Design Notes, car une icône spécifique s'affiche dans la colonne Notes.
Pour des informations plus générales sur l'utilisation des Design Notes, voir « Enregistrement d'informations sur les fichiers dans des Design Notes », page 102. Pour plus d'informations sur l'utilisation des Design Notes avec Fireworks, voir « Utilisation des Design Notes dans Fireworks ou Flash et Dreamweaver », page 104.
Activation et désactivation des Design Notes
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écidier de ne les utiliser que localement.
Pour activer ou désactiver les Design Notes sur un site ou pour ne les utiliser que localement :
1 Choisissez Site > Modifier les sites.
La boîte de dialogue Modifier les sites s'affiche.
2 Sélectionnez un site, puis cliquez sur Modifier.
La boîte de dialogue Définition du site apparait.
3 Sélectionnéz la catégorie Design Notes dans la liste de gauche.
La boîte de dialogue Définition du site affiche les options Design Notes.
4 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
5 Cliquez sur OK.
Vou puez creer un fisier de Design Notes pour chaque document ou modele de votre site. Vous pouze également creer des Design Notes pour des applets, des contrôles ActiveX, des images, des films 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 modele n'héritent pas des Design Notes.
Pour ajouter des Design Notes à un document :
1 Pendant que le document concerne est actif dans la fenetre de document, choisissez Fichier > Design Notes.
Vou puevez également sélectionner le fichier dans le panneau Site, puis désir Fichier > Design Notes.
Remarque : si le fichier se trouve sur un site distant, vous devez d'abord l'extraire ou l'acquérir, puis le sélectionner dans le dossier local (voir « Archivage et extraction de fichiers sur un site distant », page 91 ou « Acquisition et placement de fichiers », page 93).
La boîte de dialogue Design Notes s'ouvre.
2 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
3 Cliquez sur OK pour enregistrer les notes.
Dreamweaver enregistre les notes au même endroit que le fjichier en cours, dans un dossier portant le nom « _notes ». Le fjichierporte 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 »
Pour ajouter des Design Notes à un objet :
1 Sélectionnez l'objet.
2 Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Ctrl enforcée (Macintosh), puis choisissez Design Notes dans le menu contextual de l'objet.
La boîte de dialogue Design Notes s'ouvre.
3 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
4 Cliquez sur OK pour enregistrer les notes.
Dreamweaver enregistre le fisier de Design Notes spécifique à un objet dans un dossier _notes se trouvant dans le même répertoire que le fisier source de l'objet. Ce répertoire ne correspond pas nécessairement au répertoire du document dans lequel apparaît l'objet.
Pour ouvrir une Design Notes associée à un fichier, procédez de l'une des manières suivantes :
- Sélectionnéz le fichier dans le panneau Site ou ouvre le fichier, puis désissez Fichier > Design Notes.
- Dans la colonne Notes du panneau Site, double-cliquez sur l'icone jaune Design Notes.
Pour attribuer un état de Design Notes personnelé :
1 Ouvrez les Design Notes du fichier ou de l'objet concenné (voir procédure ci-dessus).
2 Cliquez sur I'onglet Toutes les infos.
3 Cliquez sur le bouton + (signe plus).
4 Dans le champ Nom, tapez Etat.
5 Dans le champ Valeur, tapez le nom du nouvel état.
S'il existe déjà une valeur d'etat, elle est replacée par la nouvelle.
6 Cliquez sur l'ongletInfos de base et remarquez que la nouvelle valeur de I'etat apparait dans le menu déroulant Etat.
Remarque : vous ne pouvez avoir qu'une valeur personnalisée à la fois dans le menu d'etat. Si vous suivez cette procédure une nouvelle fois, Dreamweaver remplace la valeur de l'état saisie la première fois par la nouvelle valeur.
Pour effacer de votre site des Design Notes non associées :
1 Choisissez Site > Modifier les sites.
La boîte de dialogue Modifier les sites s'affiche.
2 Sélectionnéz le site, puis cliquez sur Modifier.
La boîte de dialogue Définition du site apparait.
3 Cliques sur la catégorie Design Notes dans la liste de gauche.
4 Cliquez sur le bouton Nettoyer.
Dreamweaver you invite alors a vérifier que tous les fichiers de Design Notes qui ne sont plus associés à un fjichier dans le site doivent bien être supprimés.
Si vous utilisez Dreamweaver pour supprimer un fjichier auquel est associé un fjichier de Design Notes, Dreamweaver supprime également le fjichier de Design Notes. En général, il ne peut donc exister de fjichiers de Design Notes orphelins que si vous supprimez ou renommez un fjichier à l'extérieur de Dreamweaver.
Remarque : si vous désactiver z'option Gérer Design Notes avant de cliquer sur Nettoyer, Dreamweaver supprime tous les fichiers de Design Notes du site.
Utilisation des Design Notes dans Fireworks ou Flash et Dreamweaver
Si vous ouvrez un fisier dans Macromedia Fireworks ou Macromedia Flash, puis l'exportez dans un autre format, Fireworks ou Flash enregistre automatiquement le nom du fisier source d'origine dans un fisier de Design Notes.
Ainsi, si vous ouvrez le fichier myhouse.png dans Fireworks, puis l'exportez au format GIF en lui attribuant le nom myhouse.gif, Fireworks create un fichier de Design Notes du nom de myhouse.gif.mno. Ce fichier de Design Notes contient le nom du fichier d'origine, sous la forme d'une adresse absolue file: URL. Supposons que les Design Notes du fichier myhouse.gif contiennent la ligne suivante :
Supposons à présent qu'une Design Note Flash similaire contienne la ligne suivante :
Remarque : pour pouvoir partager des Design Notes, les utilisateurs doivent définir le même chemin d'accès pour la racine du site. Exemple : sites/ assets/orig.
Lorsque vous importez l'image dans Dreamweaver, le fisquier de Design Notes est automatiquement copie sur le site, en même temps que l'image. Si vous scélectionné cette image dans Dreamweaver et decide de la modifier à l'aide de Fireworks (voir « Lancement d'un éditeur externe pour des fischers multimédia », page 338), ce dernier ouvre directement le fisquier d'origine pour vous permettre de le modifier.
Utilisation des rapportes pour améliorer le déroulement du travail
Vou puez utiliser des rapport pour améliorer la collaboration entre les membres de l'équipe Web.
Voupeuvez générer des rapportes you indiquant qui a extrait un fichier et quels fichiers sont associés à des Design Notes. Voupeuz peaufiner davantage les rapportss sur les Design Note en specifiant des parametes nom/valeur.
Pour plus d'informations sur la génération des autres types de rapport, voir « Utilisation des rapportes pour tester un site », page 501.
Remarque : vous doivent avoir défini une connexion à un site distant pour exécuter des rapports sur le déroulement du travail.
1 Ouvrez un document.
2 Choisissez Site > Rapports.
La boîte de dialogue Rapports s'affiche.
3 Sélectionnéz la catégorie de rapport voulue ainsi que le type de rapport à exécuter.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
4 Cliquez sur le bouton Executer.
Suivant le sujet du rapport, vous pouvez être invité à enregistrer votre fichier, définir votre site ou selectionner un dossier (si ce n'est pas déjà fait).
Le rapport s'affiche dans le panneau Rapports du site (dans le groupe de pannaux Résultats).
Pour utiliser un rapport :
1 Dans le panneau Rapports du site, cliquez sur le titre de la colonne a utiliser comme base du tri des résultats.
Vou puez trier les résultats par nom de fichier, numero de ligne ou description. Vou pouze également executer plusieurs rapports et garder les différents panneaux de résultats ouverts.
2 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.
Les informations s'affichent dans le panneau Récurrence (dans le groupe de panneaux Code).
3 Double-cliquez sur une ligne qualconque du rapport pour afficher le code correspondant dans la fenetre de document.
Remarque: si vous vous trouvez en mode Creation, Dreamweaver passa à un affichage à deux volets et indique le problème identifié directement dans le code.
4 Cliques sur Enregistrer le rapport.
Lorsque vous enregistrez un rapport, vous pouze l'importer dans un fjichier modèle existant. Vous pouze alors soit importerer le fjichier dans une base de données ou un tableau puis l'imprimer, soit l'afficher sur un site Web.
A propos du panneau Sitespring dans Dreamweaver
Le panneau Sitespring vous permet de visualiser toutes les tâches Sitespring directement dans Dreamweaver. Vous pouze également sélectionner une tâche depuis le panneau et vous connecter à votre page Web Sitespring afin de modifier la tâche. Vous pouze enregistrer toutes les modifications apportées dans Sitespring, revenir à Dreamweaver, puis actualiser le panneau Sitespring pour voir ces modifications. Le panneau Sitespring affiche les tâches ainsi que leur priorité, leur état, leur échéance et le nom de leur projet.
Remarque : Sitespring n'est disponible qu'en angeais. Pour cette raison, les commandes de menu et les captures d'écran de l'interface apparaisant dans cette section sont en angeais.
Configuration système requise
Pour utiliser le panneau Sitespring avec Dreamweaver, Dreamweaver MX et Sitespring doivent être installés sur votre système ou serveur. Si vous ne disposez pas de Sitespring, vous pouvez en télécharger une version d'essay gratuite depuis le site Web de Macromedia Sitespring. Sitespring n'est pris en charge que par les nouveaux navigateurs compatibles Flash, comme Netscape Communicator version 4.06 et ultérieure ou Microsoft Internet Explorer version 5 et ultérieure.
Connexion à un serveur Sitespring
Pour utiliser le panneau Sitespring, vous devez d'abord vous connecter et ouvrir une session sur le serveur Sitespring.
Remarque : pour plus d'informations sur l'utilisation de Macromedia Sitespring, voir la documentation Sitespring.
Pour vous connecter à un serveur Sitespring à partir de Dreamweaver :
1 Dans la fenêtre de document,CHOISSEZ Fenetre >Autres >Sitespring ou appuyez sur la touche F7.
La boîte de dialogue Connexion Sitespring s'affiche.
2 Dans la zone de texte Serveur Sitespring, saisissez l'URL du serveur Sitespring avec lequel étabir la connexion. En cas de doute sur l'URL, contactez votre administrateur système.
3 Dans les champs Nom de l'utilisateur et Mot de passer, tapez vos nom d'utilisateur et mot de passer pour le serveur Sitespring. La zone de texte Nom de l'utilisateur tient compte des majuscules et des minuscules.
4 Si vous souhaitez enregistrer le mot de passer sur votre ordinateur, activez l'option Save Password and Login Automatically.
Remarque: cette option vous permet seulement de fermer et de rouvir le panneau Sitespring sans avoir à saisir d'informations de connexion. Si vous déconnectez complètement de Sitespring, soit à partir de Dreamweaver soit directement à partir de Sitespring, vous devez saisir ces informations une nouvelle fois.
5 Cliques sur Connecter pour étabir la connexion avec le serveur Sitespring.
L'etat de la connexion s'affiche au-dessus de la zone Serveur Sitespring. Une fois la connexion établie, le panneau Sitespring affiche les tâches en cours.
Si vous avez du mal à vous connecter à Sitespring, contactez votre administrateur système.
Utilisation du panneau Sitespring
Le panneau Sitespring vous permet de visualiser l'ensemble des tâches àaccomplir ou uniquement les tâches associées à un projet particulier. Vous pouvez modifier une tâche, puis actualiser la liste des tâches pour visualiser les modifications. La zone Tâches affiche les tâches àaccomplir, leur priorité, leur état, leur échéance et le nom de leur projet.
Pour utiliser le panneau Sitespring :
1 Dans la fenêtre de document,CHOISSEZ Fenetre >Autres >Sitespring ou appuyez sur la touche F7.
2 Connectez-vous au serveur Sitespring, si cela n'est pas deja fait (voir « Connexion à un serveur Sitespring », page 107).
Le panneau Sitespring affiche les tâches en cours. Il se compose d'une zone Tâches qui affiche les tâches ouvertes en cours, ainsi que d'un menu et d'icones permettant d'exécuter certaines actions. Les tâches sont triées par nom. Cliquez sur le titre d'une colonne pour les trier en fonction de cette colonne. Le panneau Sitespring n'affiche pas les tâches dotées de l'état Suspendu ou Terminate.
3 Faites votrechoix parmi les options suivantes:
-
Dans le menu déroulant Projet, choisissez un projet spécifique pour afficher uniquement les tâches qui lui sont associées ou choisissez Afficher toutes les tâches pour faire apparaitre la totalité des tâches en cours.
-
Cliquez sur l'icone Actualiser pour rafraîchir le panneau Sitespring et voir toutes les modifications apportées à la tâche.
Remarque : les modifications apportées n'apparaissent dans le panneau qu'après que vous les avez enregistrées dans Sitespring.
- Dans la colonne Nom, sélectionnez une tâche, puis cliquez sur le bouton Modifier la tâche pour apporder des modifications à la tâche.
Pour modifier des tâches, vous devez aussi vous connecter à Sitespring via la page Web de connexion. Si vous étés connecté, la page Modifier la tâche associée à la tâche apparait. Si vous n'étés pas encore connecté, la page Web de connexion s'affiche.
- Cliquez sur l'icone Sitespring pour atteindre directement une page Web Sitespring.
Si vous étés déjà connecté, votre page d'accueil Sitespring s'affiche. Si vous n'étés pas encore connecté, la page de connexion s'affiche.
- Pour fermer le panneau Sitespring, appuyez sur la touche F7 ou cliquez sur la case de fermetre.
Remarque : vous pouvez fermer le panneau Sitespring sans vous déconnecter complètement afin de ne pas avoir à vous reconnectcer à chaque fois.
- Cliquez sur le lien Déconnecter pour vous déconnecter de Sitespring ou pour changer d'utilisateur.
La boîte de dialogue Connexion Sitespring s'affiche. Vous pouvez soit saisir de nouveaux nom d'utilisateur et mot de passer pour changer d'utilisateur, soit fermer la boîte de dialogue pour vous déconnecter (voir « Déconnexion de Sitespring dans Dreamweaver», page 109).
Déconnexion de Sitespring dans Dreamweaver
Lorsque vous cliquez sur le lien Déconnecter dans le panneau Sitespring, cela vous déconnecté également de Sitespring dans Dreamweaver.
Pour vous déconnecter de Sitespring :
1 Dans le panneau Sitespring, cliquez sur le lien Déconnecter.
La boîte de dialogue Connexion Sitespring s'affiche.
2 Fermez cette boite de dialogue.
La prochaine fais que vous accéderez au panneau Sitespring, vous n'aurez pas à ressaisir l'URL pour vous connecter (sauf si vous voulez acceder à un serveur Sitespring différent), mais vous dévrez saisir votre mot de passer.
CHAPITRE 5
Configuration d'un document
Macromedia Dreamweaver MX propose a environment for work in Web and development documents. Outre les documents HTML, vous pouvez creer et ouvr des documents CFML, ASP, JavaScript, CSS ou texte.
La boîte de dialogue Nouveau document propose divers types de modèles à partir desquels vous pouvez creer des documents. Cette interface, simple à utiliser, vous permet de creer un document vide ou modèle, un document basé sur l'un de vos modèles existants ou un document ou modèle basé sur l'une des mises en forme de page inclues dans Dreamweaver. Ces modèles et conceptions de page vous serviront à commencerrapidement à développement des pages Web professionnelles.
D'autres options de document sont également disponibles dans la boîte de dialogue Nouveau document. Vous pouvez scélectionner des documents texte, tels que les documents JavaScript ou les feuilles de style en cascade (CSS), ainsi que les documents comportant des pages dynamiques, tels que Macromedia ColdFusion, Microsoft Active Server Pages (ASP) et PHP. Si vous avez l'habitude de travailler avec un type particulier de document, vous pouvez le définir comme type par défaut pour les nouvelles pages.
Dans Dreamweaver, il est facile de définir des propriétés de document, telles que les balises meta, le titre du document et la couleur de l'arrière-plan, ainsi que d'autres propriétés de page, en mode Création ou en mode Code.
Ce chapitre comprend les rubriques suivantes :
- « Utilisation de la boîte de dialogue Nouveau document », page 112
- « Ouverture de documents existants », page 115
- « Définition des propriétés du document», page 116
- « Sélection d' éléments dans la fenêtre de document», page 120
- « Utilisation de guides visuels durant la conception», page 121
- « A propos de l'automatisation des tâches», page 124
Creation de documents Dreamweaver
La boîte de dialogue Nouveau document offre divers types de documents à partir desquels vous pouvez créé une page. Vous ouvrez la boîte de dialogue Nouveau document de Dreamweaver enCHOISIGANT FICHIER > Nouveau. Si vous préférez utiliser un type de document particulier, par exemple les pages HTML, ColdFusion ou Active Server Pages, vous pourrez le définir comme type de document par défaut. Le type de document par défaut sera utilisé pour ouvrir tous les nouveaux documents sans passer par la boîte de dialogue Nouveau document.
Rubriques connexes
« Création d'un document vierge», page 113
« Ouverture de documents existants », page 115
« Création d'un document basé sur un modele existant», page 115
« Création d'un document basé sur un fichier de conception Dreamweaver», page 113
Utilisation de la boîte de dialogue Nouveau document
La boîte de dialogue Nouveau document propose divers modèles pour votre nouveau document. Vous pouvez créé un document de plusieurs façon :
- Vous pouvez commencer à partir d'un document vierge.
- Vous pouvez utiliser un modele avec un aspect prédéfini et indiquant les éléments que vous pouvez modifier.
Pour ouvrir la boite de dialogue Nouveau document :
- Choisissez Fichier > Nouveau.
La boîte de dialogue Nouveau document contient deux ontlets : Général et Modèles.
L'onglet Général contient divers types de document pouvant être utilisés pour creer une nouvelle page vierge. Vous pouvez selectionner un nouveau document vierge dans les catégories Page de base, Page dynamique et Jeu de cadres. Créez une page basée sur un type de fichier particulier tel que CSS, JavaScript, VBScript ou texte en selectionnant un document dans la catégorie Autres. La catégorie Modèle vous offre un vaste choix de types de documents pour creer des modèles vides : des modèles HTML ainsi que des modèles dans lesquels vous pouvez insérer des comportements de serveur.
Les catégories de feuilles de style CSS, Conception de page et Conception de page (Accessibility) fournissent des fichiers de conception prédéfinis que vous pouvez utiliser pourisser vos propres pages. Dans le cas de feuilles de style CSS, vous pouvez copier une feuille prédéfinie pour l'appliquer ensuite à votre document.
En fonction du type de document sélectionné, différentes options s'affichent dans la boîte de dialogue ; par exemple, si vous sélectionnez un document HTML vous pouvez rendre le document compatible avec XHTML ; de même, lorsque vous sélectionnez un fichier de conception de page, vous pouvez créé un document ou un modèle.
L'onglet Modèles contient la liste de vos sites Dreamweaver définis. Vous pouvez désirir un modèle à partir d'un sitequelconque de la liste pour créé de nouveaux documents basés sur ce modele.
Sélectionnez une catégorie pour afficher sa liste de types de documents disponibles. Cliquez sur un document dans la liste pour afficher sa description, et dans le cas des catégories de conceptions de page, feuilles de style en cascade et yeux de cadres, un aperçu du document sélectionné.
Vouss pouvez utiliser l'option Préférences, située au bas de la boîte de dialogue Nouveau document pour définit les préférences par défaut du document, telles que son type, codage et extension de fichier. En outre, vous pouvez définit une option pour ouvrir automatiquement un nouveau document sans passer par la boîte de dialogue Nouveau document. Pour plus d'informations sur la définition des préférences d'un document, voir Définition des préférences d'un nouveau document dans l'aide de Dreamweaver.
Cliquez sur le lien Obtenir plus de contenu dans la boite de dialogue Nouveau document pour passer à Dreamweaver Exchange et télécharger d'autres contenus de conception de pages.
Création d'un document vierge
Dans la boîte de dialogue Nouveau document, vous pouvez selectionner le type de document que vous pouze créé.
Si vous avez l'habitude de travailler avec un type de document spécifique, vous pouvez définir un document par défaut et baser le nouveau document automatiquement sur le document par défaut à l'ouverture. Pour plus d'informations, voir Définition des préférences d'un nouveau document dans l'aide de Dreamweaver.
Pour creer un nouveau document vierge :
1 Dans Dreamweaver, choisissez Fichier > Nouveau.
La boîte de dialogue Nouveau document s'affiche. L'onglet Général est déjà seLECTIONné.
2 Dans la liste Catégorie, selectionnez la catégorie de document que vous pouze créé.
Par exemple, Sélectionnéz Page de base pour creer un document HTML ou Sélectionnéz Page dynamique pour creer un document ColdFusion ou ASP, et ainsi de suite.
3 Dans la liste de documents, selectionnez le type de page à créé, puis procédez de l'une des manières suivantes :
- Cliquez sur Créer.
- Double-cliquez sur l'élément dans la liste de documents.
- Appuyez sur la touche Entrée.
La boîte de dialogue se ferme et le nouveau document s'affiche dans la fenêtre de document.
Creation d'un document basé sur un fichier de conception Dreamweaver
Dreamweaver inclut plusieurs mises en forme de page professionnelles, ainsi que des fichiers d' éléments de conception. Vous pouvez utiliser ces fichiers de conception comme point de départ pour la création de pages sur vos sites Web.
Les fichiers de conception complèment des documents et des modèle conformes aux standards d'accessibilité, de documents de mise en forme de page basés sur des tableaux, et de feuilles de styles en cascade (CSS). Vous pouvez prévisualiser un document et lire une brève description des éléments de conception d'un document pour les objets des catégories de feuilles de style CSS, Jeux de cadres, Conception de page et Conception de page (Accessibilité).
Lorsque vous creez un document basé sur un fjichier de conception, Dreamweaver create une copie du fjichier. Si le fjichier de conception inclut des liens aux fjichiers d'actifs (teils que des graphiques, éléments Flash ou feuille de style CSS externe), Dreamweaver vous invite à enregistrer une copie des fjichiers dépendants lorsque vous enregistrrez le document. Vous pouvez désirir l'emplacement des fjichiers dépendants ou enregistrer les fjichiers dans le dossier par défaut créé par Dreamweaver (ce dossier est créé en fonction du nom source du fjichier de conception).
Vou puez égarlement creator un modele base sur un fichier de conception. Le modele contient des régions modifiables prédéfinitions. Vous pouze creator de nouvelles régions modifiables.
Dreamweaver you invitera a enregister le fjichier comme modèle pour votre site courant. Les fjichiers liés sont également copiés vers votre site.
Remarque: si vous creez un document basé sur un jeu de cadres prédéfini, seule la structure du jeu de cadres est copiee, sans le contenu des cadres. En outre, vous devrez enregistrer chaque fichier de cadre séparément. Pour plus d'informations sur l'enregistrement de cadres, voir « Enregistrement des fichiers du cadre et du jeu de cadres », page 275.
Pour creer une feuille de style en cascade :
1 Ouvrez la boite de dialogue Nouveau document en choisissant Fichier > Nouveau.
2 Dans la liste Catégorie, Sélectionnez Feuilles de style CSS.
La liste de documents sur la dette est mise à jour avec une seLECTION de feuilles de style CSS.
3 Dans la liste de documents, Sélectionné une feuille de style pour visualiser ses propriétés et sa description, puis procédez de l'une des manières suivantes :
- Cliquez sur Créer.
- Double-cliquez sur l'objet dans la liste de documents.
- Appuyez sur la touche Entrée.
La boîte de dialogue se ferme et un nouveau document CSS s'affiche dans la liste. La feuille de style CSS s'ouvre en mode Code.
4 Choisissez Fichier > Enregistrer sous.
5 Dans la boîte de dialogue Enregistrer sous, recherchez l'emplacement où vous voulez enregistrer le fichier, entrez un nom de fichier unique pour le document et cliquez sur Enregistrer.
Pour creer un document Conception de page :
1 Ouvrez la boite de dialogue Nouveau document en choisisant Fichier > Nouveau.
2 Dans la liste Catégorie, Sélectionnéz Conception de page ou Conception de page (Accessibilityé), en fonction de vos besoin de création.
3 Dans la liste des conceptions de page, Sélectionnez le document sur lequel vous pouze baser la nouvelle page.
4 Procedez de l'une des manieres suivantes:
- Pour creer un document, selectionnez le bouton radio Document.
- Pour creer un modele, selectionnez le bouton radio Modèle.
5 Cliquez sur Creer.
Un nouveau document s'affiche dans la fenêtre de document. Si vous créez un modele, les régions modifiables sont visibles et vous âtes invite à enregistrer le document comme modele pour votre site courant.
6 Choisissez Fichier > Enregistrer pour enregistrer le document.
Si le fichier inclut des liens aux fichiers d'actifs, la boite de dialogue Copier les fichiers dépendants s'affiche.
7 Dans la boîte de dialogue Copier les fichiers dépendants, définisSEE des options pour copier les actifs vers votre site courant.
8 Cliquez sur Copier pour copier les actifs dans le dossier sélectionné et fermer la boîte de dialogue.
Creation d'un document basé sur un modele existant
Dans la boîte de dialogue Nouveau document, vous pouvez sélectionner, prévisualiser et créé un nouveau document à partir d'un modèle existant. Vous pouvez sélectionner un modele à partir de tous vos sites Dreamweaver.
Vou puez également creer des modèle à partir des documents de la catégorie Conception de page de la boite de dialogue Nouveau document. Une fois que vous enregistrez un document de conception de page comme modèle dans votre site, vous pouze utiliser ce modèle pour creer des pages. Pour plus d'informations, voir « Création d'un document basé sur un filchier de conception Dreamweaver», page 113.
Pour plus d'informations sur l'utilisation de modèles et de documents basés sur un modèle, voir Chapitre 27, « A propos des modèles Dreamweaver», page 464.
Pour creer un document basé sur un modele :
1 Choisissez Fichier > Nouveau pour ouvrir la boîte de dialogue Nouveau document.
2 Dans la liste Modèles de l'onglet Modèles, SéLECTIONNZ le site Dreamweaver contenant le modulo que vous pouze utiliser.
3 La liste Site affiche les modèles du site sélectionné, s'il en existe.
4 Sélectionné le modele que vous voulez utiliser.
5 Désélectionnéz l'options Mettre la page à jour quand le modele est modifié si vous poulez dissocier le nouveau document du modele.
6 Cliquez sur Creer.
Un nouveau document est créé.
7 Enregistrez le document.
Enregistrement d'un document
Lorsque vous enregistrez un document, évitez les espaces et les caractères spéciaux pour les noms de fichiers et de dossiers. En particulier, n'utilise pas de caractères spéciaux (par exemple é,ç ou ¥) ou de signes de ponctuation (deux points, barres obliques ou points) dans le nom des fichiers que vous avez l'intention de placer sur un serveur distant. En effet, la plupart des serveurs transforment ces caractères lors du transfert, rendant ainsi inopérants les liens vers ces fichiers. En outre, ne commencez pas le nom de fichier par un numéro.
Pour enregistrer un document :
1 Choisissez Fichier > Enregister.
2 Dans la boîte de dialogue qui s'affiche, recherche le dossier où vous poulez 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.
Ouverture de documents existants
Dans Dreamweaver, vous pouvez ouvrir un document HTML existant ou tout type de document dynamique, même s'il n'a pas ete creed dans Dreamweaver. Vous pouvez ouvrir le document et le modifier dans les modes de travail Creation et Code de Dreamweaver.
Vou puez égarlement ouvr des fichiers texte non HTML, comme des fichiers JavaScript, XML, feuilles de style CSS ou des fichiers texte enregistrés dans des traitements de texte ou des éditeurs de texte.
Certains fischiers, tels que les document CSS, s'ouvrent en mode Code uniquement et vous autorisent à modifier le code du fjichier. Vous pouvezmettre à jour le document pendant que vous travailliez dans Dreamweaver, puis enregistrer les modifications dans le fjichier.
Si vous souhaitez ouvrir un document Microsoft Word 97, Word 98 ou Word 2000 enregistré au format HTML, il est préféable d'importer le document dans Dreamweaver,只不过 que de l'ouvrir. Lorsque vous importez un fisier HTML enregistré sous Word, Dreamweaver vous invite à nettoyer les balises superflues, insérées par Word dans les fisiers HTML. Vous pouvez utiliser la commande Nettoyer HTML Word pour définir la couleur d'arrière-plan de la page et nettoyer le formatage de la feuille de style CSS dans le document importé.
Pour ouvrir un fichier existant, procedede l'une des manieres suivantes:
1 Dans Dreamweaver, choisissez Fichier > Ouvrir.
2 Dans la boîte de dialogue qui s'affiche, recherche le fichier à ouvrir.
3 Cliquez sur Ouvrir.
Le document s'ouvre dans la fenetre de document.
Remarque: par défaut, JavaScript, texte et les feuilles de style CSS s'ouvrent en mode Code. Pour plus d'informations sur la modification des paramètres d'un éditeur de texte externe afin de visualiser ces types de fichiers, voir « Lancement d'un éditeur externe pour des fichiers multimédia », page 338.
Pour ouvrir et importer un fichier HTML Microsoft Word :
1 Dans Dreamweaver, choisissez Fichier > Importer > HTML Word.
La boîte de dialogue Sélectionné le fichier HTML Word à importer s'ouvre.
2 Recherche et selectionnee le document que vous pouze ouvrir.
3 Cliquez sur Ouvrir.
Dreamweaver ouvre le document dans une nouvelle fenêtre et la boîte de dialogue Nettoyage du HTML Word s'affiche.
4 Choisissez les options de nettoyage à appliquer au document dans l'onglet Base ou Détaille.
Pour plus d'informations sur les options de nettoyage, voir la rubrique Nettoyage de HTML provenant de Microsoft Word dans l'aide de Dreamweaver.
5 Cliquez sur OK.
Dreamweaver applique les attributs de nettoyage au nouveau document et un journal affiche les modifications.
6 Enregistrez le document.
Définition des propriétés du document
Les propriétés de base des documents HTML sont les suivantes : titre de la page, images et couleurs d'arrière-plan, couleur de base du texte et des liens et marges. Le titre de page identifie et nomme le document. Une image ou une couleur d'arrière-plan définit l'aspect général du document. Les couleurs du texte et des liens aident les utilisateurs à désigner le texte ordinaire des liens hypertextes et à différencier les liens déjà visités de ceux qui ne l'on pass encore été.
Pour plus d'informations sur la specifications des options de la boîte de dialogue Propriétés de la page, voir la rubrique Sélection d'options de propriétés de page dans l'aide de Dreamweaver.
Modification du titre d'un document
Le titre d'une page HTML permet au visueur de connaître le sujet de la page qu'il vient d'afficher dans son navigateur et identifie cette page dans les listedes de l'histoire et des liens favoris (signets). Si vous n'attribuiez pas de titre à la page, elle apparaira sous le nom de Sans titre dans la fenêtre du navigateur, dans les signets et dans l'histoire. Notez que le nom de fichier que vous donnez au document (lorsque vous l'enregistrez) n'a rien à voir avec le titre de la page. Pour localiser tous les documents sans titre de votre site, utilisez la commande Site > Rapports. Voir « Utilisation des rapportes pour tester un site », page 501.
Pour changer le titre d'une page :
1 La fenêtre de document étant active, procédez de l'une des manières suivantes :
- Choisissez Modifier > Propriétés de la page.
- Choisissez Affichage > Barre d'outils (si celle-ci n'est pas deja visible).
- Cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Contrôle enforcée (Macintosh) sur une zone vide du document, puis selectionnez Propriétés de la page.
2 Dans la zone de texte Titre, entrez le titre de la page et appuyez sur la touche Entre ou Retour.
3 Si vous modifiez le titre dans la boîte de dialogue Propriétés de la page, cliquez sur OK.
Le titre apparait dans la barre de titre de la fenêtre de document (et dans la barre d'outils si elle est affichée). Le nom de fichier de la page, ainsi que le nom du dossier dans lequel ce fichier est enregistré, apparaissent entre parentheses à côté du titre, dans la barre de titre. Un astérisque indique que le document contient des modifications qui n'ont pas encore été enregistrées.
Définition d'une image ou d'une couleur d'arrière-plan de la page
Pour définir une image ou une couleur d'arrière-plan de la page, utilisez la boite de dialogue Propriétés de la page. Si vous utilisez à la fois une image et une couleur d'arrière-plan, la couleur apparait 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.
Pour définit une image ou une couleur d'arrière-plan :
1 Choisissez Modifier > Propriétés de la page ou sélectionnez Propriétés de la page dans le menu contextual du fenêtre de document en mode Création.
2 Pour définir une image d'arrière-plan, cliquez sur le bouton Parcourir, puis naviguez jusqu'à l'image et seLECTIONnez-la. Vous pouvez également indiquer le chemin de l'image d'arrière-plan dans le champ Image d'arrière-plan.
Comme les navigateurs, Dreamweaver génére une mosaïque (multiplication) de l'image d'arrière-plan si elle ne remplit pas entièrement sa fenêtre. Pour éviter la création de cette mosaïque, désactiver cette fonction à l'aide des feuilles de style en cascade. Voir la rubrique Définition des propriétés d'arrière-plan des styles CSS dans l'aide de Dreamweaver.
3 Pour définir une couleur d'arrière-plan, cliquez sur la case Couleur d'arrière-plan puisCHOISSEZ une couleur dans le selecteur.
Utilisation des couleurs
Dans Dreamweaver, les inspecteurs de propriétés de la plupart des éléments de page, ainsi que de nombreuses boîtes de dialogue, comportent une icône permettant d'ouvrir un sélecteur de couleur. Choisissez la couleur d'un élément de page dans le sélecteur.
Pour désir une couleur dans Dreamweaver :
1 Cliquez sur l'icone des couleurs dans n'importe quelle boite de dialogue ou dans l'inspecteur de propriétés.
Le sélecteur de couleur s'affiche à l'écran.
Icône des couleurs de l'inspecteur de propriétés
2 Procedez de l'une des manieres suivantes:
- Utilisez la pipette pour selectionner une nuance de couleur dans la palette. Toutes les couleurs des palettes Cubes de couleur (valeur par défaut) et Ton continu sont sécurisées pour le Web ; les autres palettes ne le sont pas. Pour plus d'informations, voir « A propos des couleurs sécurisées pour le Web », page 119.
- 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. Si vous cliquez sur le bureau ou sur une autre application, Dreamweaver sélectionne la couleur de la zone sur laquelle vous avez cliqué, mais vous pouvez, si vous le souhaitez, passer à l'autre application; dans ce cas, poursuivez votre travail en cliquant sur une fenêtre Dreamweaver ou maintainez le bouton de la souris enforcé et passez de Dreamweaver au bureau, afin d'éviter d'avoir à sortir de Dreamweaver.
- Pour élargir plus simplement la sélection, utilisez le menu déroulant en haut à droite du nuancier. Vous pouvez selectionner les palettes Cubes de couleur, Ton continu, Système d'exploitation Windows, Mac OS, Niveau des gris et Aligner au Web sécurisé.
Notez que les palettes Cubes de couleur et Ton continu sont sécurisées pour le Web, contrairement aux palettes Système d'exploitation Windows, Mac OS et Niveau des gris. Si la palette que vous utilisez n'est pas sécurisée pour le Web et que vous cliquez sur Aligner au Web sécurisé, Dreamweaver remplace la couleur selectionnée par la couleur sécurisée pour le Web la plus proche. Autrement dit, la couleur que vous Voyez n'est pasforcément celle que vous avez可以选择.
Pour effacer la couleur courante sans avoir a enCHOISIR une autre, cliquez sur le bouton Barre.
- Pour ouvrir le nuancier du système, cliquez sur le bouton Roue chromatique. Pour plus d'informations, voir « A propos des couleurs sécurisées pour le Web », page 119.
A propos des couleurs sécurisées pour le Web
En HTML, les couleurs sont exprimées par leur valeur hexadécimale (par exemple, #FF0000) ou, pour les principales, par leur nom en angeais (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ésentée une couleur sécurisée pour le Web.
Des tests approfondis ont cependant révélé qu'en réalité seules 212 couleurs sont sécurisées pour le Web. Sous Windows, Internet Explorer ne restitue pas correctement les couleurs #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) et #33FF00 (51,255,0).
Les palette 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 désirer une couleur en dehors de la gamme sécurisée pour le Web, ouvre le nuancier du système en cliquant sur le bouton Roue chromatique en haut à droite du/selecteur de couleurs de Dreamweaver. Celle-ci n'est pas limitée aux couleurs sécurisées pour le Web.
Les versions UNIX de Netscape Navigator utilise une palette de couleurs différente de celle des versions Windows et Macintosh. Si vous développpez exclusivement pour des plates-formes UNIX (ou si le public visé est composé d'utilisateurs de Windows ou de Macintosh équipés de moniteurs 24 bits et d'utilisateurs d'UNIX équipés de moniteurs 8 bits), vous pouvez utiliser des valeurs hexadécimales combinant les paires 00, 40, 80, BF ou FF, qui produit des couleurs sécurisées pour le Web sur les ordinateurs exécutant SunOS.
Définition des couleurs par défaut du texte
La boîte de dialogue Propriétés de la page permet de définir les couleurs par défaut pour le texte ordinaire, les liens, les liens visités et les liens actifs. Vous pouvez aussi désirir unepalette de couleurs prédéfinie pour les couleurs de l'arrière-plan et du texte. (voir « Utilisation des couleurs », page 118).
Remarque : la couleur du lien actif est la couleur que prend un lien lorsque l'utilitaire clique dessus. Il est possible que certains navigateurs Web n'utilisent pas la couleur que vous avez spécifique.
Pour définit les couleurs de texte par défaut, procédez de l'une des manières suivantes :
- Choisissez Modifier > Propriétés de la page, puisChoisissez la couleur pour les options
Couleur du texte, Couleur du lien, Liens visités et Liens actifs.
- Choisissez Commandes > Définir le modele de couleur, puis choisissez la couleur d'arriere-plan et les couleurs du texte et des liens.
La zone d'exemple affiche l'aspect qu'aura la palette de couleurs dans le navigateur.
Sélection d'éléments dans la fenêtre de document
Pour selectionner un élément dans le mode Création de la fenêtre de document, il suffit généralement de cliquer dessus. Si un élément est invisible, vous doivent le rendre visible pour le selectionner.
Pour selectionner des éléments, utilisez ces techniques :
- Pour sélectionner un élément visible dans la fenêtre de document, cliquez dessus ou entourez-le du rectangle de selection.
- Pour sélectionner un élément invisible,CHOISSEZ AFFICHAGE >Assistances visuelles >Elemenys invisibles (si ce n'est pas deja fait), puis cliquez sur le marqueur de I'elément dans la fenetre de document.
Certain objects apparaissent sur la page à un endroit différent de celui dans lequel leur code est inséré. Par exemple, un calque peut se tracer n'importe où sur la page, mais le code qui le définit se trouve à un emplacement fixe. Lorsque les éléments invisibles sont affichés, Dreamweaver affiche des marqueurs dans la fenêtre de document pour indiquer l'emplacement du code de ces éléments. En selectionnant le marqueur, vous selectionnez tout l'objet : si, par exemple, vous selectionnez le marqueur d'un calque, tout le calque est selectionné (voir « A propos des éléments invisibles », page 121).
- Pour sélectionner une balise complète (avec son contenu, le cas échéant), cliquez sur son symbole dans le sélection de balise, dans la partie inférieure gauche de la fenêtre de document. Le sélection de balises apparait en mode Création et en mode Code. Le sélection de balises affiche toujours les balises qui contiennent la sélection ou le point d'insertion en cours. La balise à l'extreme gauche est la balise ultrapériphérique contenant la sélection ou le point d'insertion en cours. La balise suivante est contenu dans cette balise ultrapériphérique, et ainsi de suite. La balise à l'extreme droite est la balise la plus à l'intérieur contenant la sélection ou le point d'insertion en cours.
Dans l'exemple suivant, le point d'insertion est situé dans une balise de paragraphe, p . Pour sélectionner le tableau dans lequel se trouve le marqueur de paragraphe, vous devez sélectionner la balise table située à gauche de la balise p .
<body><table><tr><td><table><tr><td><p>
Pour afficher le code HTML associé au texte ou à l'objet sélectionné, procédez de l'une des manières suivantes :
- Dans la barre d'outils du document, cliquez sur le bouton Afficher le mode Code.
- Choisissez Affichage > Code.
- Dans la barre d'outils du document, cliquez sur le bouton Afficher les modes Code et Création.
- Choisissez Affichage > Code et création.
- Choisissez Fenêtre > Autres > Inspecteur de code.
Pour plus d'informations sur l'Affichage de code, voir « Affichage du code», page 181.
Lorsque vous sélectionné un élément dans l'un des deux editeurs de code (l'Affichage de code ou linspecteur de code), il est généralement également sélectionné dans la fenêtre de document. Il est parfois nécessaire de synchroniser les deux affichages pour que la sélection apparaisse. Voir « Affichage du code», page 181.
A propos des éléments invisibles
Certsains codes HTML ne sont pas visibles dans un navigateur, comme par exemple les balises comment. Il est cependant utile de pouvoir selectionner, modifier, déplacer et supprimer ces éléments invisibles lorsque vous creez une page. Dreamweaver vous permet d'afficher des icones à l'emplacement de ces éléments invisibles dans la fenetre de document en mode Création.
Pour afficher ou masquer des éléments invisibles,CHOISSEZ AFFICHAGE >Assistances visuelles > Elements invisibles. L'affichage des éléments invisibles vous permet de lesLECTIONner et de modifier leurs propriétés dans l'inspecteur de propriétés. Si vous les masquez, la page s'affiche pratiquement comme dans un navigateur. Notez que I'affichage des éléments invisibles risque de quelque peu modifier la mise en page, en déplaçant d'autres éléments de quelques pixels. Pour conserver une mise en page précise, vous nevez donc masquer ces éléments invisibles.
Pour indiquer les marqueurs d'objet qui doivent s'afficher lorsqu vous choisissez Affichage > Assistance visuelles > Éléments invisibles, définisseez les options de préférences Éléments invisibles. Par exemple, vous pouvez demander que les ancre normées soient visibles, mais pas les sauts de ligne. Pour obtenir des explications sur chacune des préférences Éléments invisibles, voir la rubrique Définition des préférences des éléments invisibles dans l'aide de Dreamweaver.
Vous peuventisser certains elements invisibles (teils que les commentaires et les ancre nommées) à l'aide des boutons dans la catégorie Commun de la barre Insertion (voir « Utilisation de la barre Insertion », page 42). Vous pouvez ensuite modifier ces elements à l'aide de l'inspecteur de propriétés.
Utilisation de guides visuels durant la conception
Dreamweaver met à votre disposition plusieurs types de guides visuels pour vous aider à connaçoir vos documents et à savoir (approximativement) l'aspect qu'ils auront dans un navigateur. Vous pouvez effectuer toutes les opérations suivantes :
- Adapter instantanément la taille de la fenêtre de document à un format d'affichage donné, afin de contrôle la disposition des éléments sur la page. Voir « Redimensionnement de la fenêtre de document », page 38.
Utiliser des règles comme repère visuel pour le positionnement et le redimensionnement des calques et des tableaux. Voir « Affichage des règles », page 122.
- Utiliser un tracé d'image en arrêtre-plan de la page, de manière à pouvoir reproductive plus aisément une mise en forme créé dans une application graphique celle que Macromedia Fireworks. Voir « Utilisation du tracé de l'image», page 122.
- Si la fonction d'alignment automatique est activée, les calques s'alignent automatiquement sur le croisillon de grille le plus proche lorsqu'ils sont déplacés ou redimensionnés. (D'autres objets, par exemple les images et les paragraphs, ne sont pas aimantés par la grille). L'alignment fonctionne même si la grille n'est pas visible. Voir « Alignment des calques sur la grille», page 408.
Affichage des règles
Voussouvez afficher les regles sur les bords gauche et supérieur de la page, avec des graduations en pixels, en pouces ou en centimétres.
Pour modifier les paramètres des régles, procédez de l'une des manières suivantes :
- Pour activer et désactiver les régles,CHOISSEZ Affichage > Régles > Afficher.
- Pour changer l'origine, faites glisser l'icone de l'origine de la règle sur un point de la page (cette icône s'affiche dans le coin supérieur gauche de la fenêtre de document en mode Création, lorsque les règes sont affichées). Pour rétabrir la position par défaut de l'origine,CHOISES AFFICHAGE > Règles > Rétabrir origine.
- Pour changer d'unité de mesure,CHOISSES Affichage > Regles,puis selectionnee Pixels,Pouces ou Centimétres.
Utilisation du tracé de l'image
Utilisez un trace de l'image comme guide, pour reproductive une mise en page dont la maquette a ete creee dans une application graphique. Un trace est une image JPG, GIF ou PNG qui apparait a l'arriere-plan de la fenetre de document. Vous pouze masquer cette image, definir son opacite et la deplacer.
Le trace de l'image n'est visible que dans Dreamweaver. Il est toujours invisible lorsque vous affichez la page dans un navigateur. Lorsque le trace de l'image est visible, les vérables image et couleur d'arrière-plan de la page ne sont pas visibles dans la fenêtre de document, mais le sont lorsque la page est affichée dans un navigateur.
Pour placer un trace de l'image dans la fenêtre de document :
1 Procedez de l'une des manieres suivantes:
- Choisissez Affichage > Trace de l'image > Charger.
- Choisissez Modifier > Propriétés de la page, puis cliquez sur le bouton Parcourir situé à côté de la zone de texte Trace de l'image.
2 Dans la boîte de dialogue qui s'affiche, Sélectionnéz une image, puis cliquez sur Sélectionner (Windows) ou Choisir (Macintosh).
3 La boîte de dialogue Propriétés de la page s'affiche. Définissez la transparence de l'image, en faisant glisser le curseur Transparency de l'image, puis cliquez sur OK.
Pour passer à un autre trace ou modifier à tout moment la transparence du trace en cours,CHOISSEZ Modifier > Propriétés de la page.
Pour afficher ou masquer le trace de l'image :
Choisissez Affichage > Trace de l'image > Afficher.
Pour déplacer un trace de l'image :
Choisissez Affichage > Trace de l'image > Ajuster la position. Ensuite, procedede l'une des manieres suivantes:
- Pour définir avec précision la position du trace de l'image, indiquez les valeurs des coordonnées dans les zones de texte X et Y.
-
Pour déplacer l'image par incréments d'un pixel, utilisez les touches fléchées.
-
Pour déplacer l'image par incrément de cinq pixels, appuyez simultanément sur la touche Maj et sur l'une des touches fléchées.
Pour rétablit la position du tracé de l'image :
Choisissez Affichage > Trace de l'image > Rétablir la position. Le trace de l'image se replace dans le coin supérieur gauche de la fenêtre de document (0,0) .
Pour aligner le trace de l'image sur un élément sélectionné :
1 Sélectionné un élément dans la fenêtre de document.
2 Choisissez Affichage > Trace de l'image > Aligner l'image avec la selection.
Le coin supérieur gauche du trace de l'image est aligné avec le coin supérieur gauche de l'élément sélectionné.
Affichage et modification du contenu de l'en-tête
Les fichiers HTML complrennent deux sections principales : l'en-tête (head) et le corps (body). Le corps body constitue la partie principale du document, la partie visible contenant le texte, les images, etc. L'en-tête head est invisible, excepté le titre du document, qui apparait dans les barres de titre des fenêtres des navigateurs et de Dreamweaver. Donnez un titre à toutes vos pages.
L'en-tête head contient également d'autres informations importantes, notamment le type du document, l'encodage de la langue, des fonctions et des variables JavaScript et VBScript, des mots-clés et des indicateurs de contenu pour les moteurs de recherche, ainsi que des définitions de style. Il n'est pas nécessaire d'utiliser tous ces éléments dans toutes les pages ; par exemple, vous pouze n'utiliser les mots-clés et les indicateurs de contenu que dans la page d'accueil. Pour afficher les éléments de l'en-tête head, utilisez le menu Affichage, l'Affichage de code de la fenêtre de document ou l'inspecteur de code.
Pour afficher les éléments de la section head d'un document :
Choisissez 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 est en Affichage de code uniquement, la commande Affichage > Contenu de l'en-tête est grisée.
Pour insérer un élément dans la section head d'un document :
1 Procedez de l'une des manières suivantes:
- Choisissez En-tête dans la barre Insertion, puis cliquez sur l'un des boutons d'objet.
- Sélectionnez un élément dans le sous-menu Insertion > Balises d'en-tête.
2 Choisissez les options applicables à l'objet dans la boîte de dialogue qui s'affiche ou dans l'inspecteur de propriétés.
Pour modifier un élément de la section head d'un document :
1 Choisissez Affichage > Contenu de l'en- ete.
2 Cliquez sur l'une des icones de la section head pour la selectionner.
3 Définissez ou modifiez les propriétés de l'élement dans l'inspecteur de propriétés.
Pour plus d'informations sur les propriétés de certains éléments head, voir les rubriques suivantes dans l'aide Dreamweaver :
- Définition des propriétés meta
- Définition des propriétés de Titre
- Définition des propriétés de Mots-clés
- Définition des propriétés de Description
- Définition des propriétés de Refresh
- Définition des propriétés de Base
- Définition des propriétés de Lien
A propos de l'automatisation des tâches
Lors de la création de documents, vous avez parfois besoin d'effectuer de nombreuses fois la même opération. Cette section explique comment utiliser le panneau Historique pour automatiser les taches répetitives.
Pour recommencer une ou deux fois une série d'étapes, répétez-les directement depuis le panneau Historique, qui enregistre chaque étape de votre travail sur le document. Pour des informations de base sur le panneau Historique, voir « A propos du panneau Historique», page 49. En revanche, pour automatiser une tâche féquence, vous pouvez creator une nouvelle commande qui effectuera cette tâche automatiquement.
Notez qu'il est impossible de reproduce ou d'enregistrer (dans le cadre de commandes enregistrées) certains mouvements de la souris, comme par exemple la seLECTION d'un élément en cliquant avec la souris ou en la faisant glisser dans la fenêtre de document. Lorsque vous effectuez ce type de mouvements, un trait noir s'affiche dans le panneau Historique (cette ligne n'est cependant bien visible que lorsque vous avez accompli une autre action). Pour éviter des mouvements qui ne peuvent pas être produits, déplacez le point d'insertion à l'aide des touches fléchées, et non de la souris, dans la fenêtre de document. Pour effectuer ou éndre une selection, maintenez la touche Maj enforcée tout en appuyant sur les touches fléchées.
Remarque: si untrait noir indiquant un mouvement de la souris apparait pendant que vous effectuez une tâche que vous pouze réiterer ultérieurement, vous pouvez annuler cette dernière action et tenter une autre approche (utilisez les touches fléchéées, par exemple).
Il existe quelques autres actions qui ne peuvent pas etre reproduites, par exemple le glisser-deplacer d'un element de la page. Lorsque vous effectuez ce type d'action, une icone représentant une commande de menu barree d'un petit X rouge s'affiche dans le panneau Historique.
Les actions sont relues dans l'ordre exact où vous les avez effectuees et vous ne pouvez pas les modifier pendant leur execution. Par exemple, si vous avez modifie en rouge la couleur d'une cellule de tableau, l'application de cette etape dans une autre cellule de tableau la rend eglemente rouge ; vous ne pouvez pas specifier une autre couleur pendant l'application de cette etape a une nouvelle cellule.
Répertition d'étapes
Pour répéter la dernière action effectuee, utilisez la commande Edition > Répéter ou les raccourcis clavier Ctrl+Y (Windows) ou Commande+Y (Macintosh). Le nom de cette commande change dans le menu Edition pour refleter la dernière opération accomplie ; par exemple, si vous venez de taper du texte, le nom de la commande sera Répéter frappe (vous ne pouvez pas utiliser la commande Répéter juste après une opération Annuler ou Rétablir).
Pour répéter des actions antérieures à la dernière ou pour répéter plusieurs étapes à la fois, utilisez le panneau Historique. Pour toutes informations de base sur le panneau Historique, voir « A propos du panneau Historique», page 49.
Notez que lorsque vous repeteze des actions, seules les actions selectionnées (en surbrillance), et pas nécessairement celle sur laquelle se trouve le pointeur, sont repétées.
Pour répéter une étape :
Dans le panneau Historique, Sélectionné une étape et cliquez sur le bouton Reproduire. L'étape est reproduite et une nouvelle instance de cette action apparait dans le panneau Historique.
Pour répéter une série d'étapes contiguës :
1 Sélectionnez des étapes dans le panneau Historique, en utilisant l'une des méthodes suivantes :
-
Faites glisser la souris d'une étape à une autre (ne faites pas glisser le curseur; faites simplement glisser de l'étiquette de texte d'une étape vers l'étiquette de texte d'une autre).
-
Sélectionnéz la première étape, puis maintenez la touche Maj enforcée tout en cliquant sur la dernière étape ou selectionnéz la dernière étape, puis maintenez la touche Maj enforcée tout en cliquant sur la première.
Remarque : bien que vous pouvez selectionner une série d'étapes contenant un trait noir signalant un mouvement de la souris, ce mouvement est ignoré lorsque vous reproduizez les étapes.
2 Cliquez sur Reproduire.
Les étapes sont reproduites dans leur ordre chronologique et une nouvelle étape, libellée « Reproduire les étapes », apparait dans le panneau Historique.
Pour répéter des étapes non contiguès :
1 Sélectionnez une étape, puis cliquez tour à tour sur toutes les autres étapes désirées tout en maintainant appuyée la touche Contrôle (Windows) ou Commande (Macintosh).
Recliquez sur une étape sélectionnée en maintenant la touche Ctrl ou Commande appuyée pour la déslectionner.
2 Cliquez sur Reproduire.
Les étapes sélectionnées sont reproduites dans leur ordre chronologique et une nouvelle étape, libellée « Reproduire les étapes », apparait dans le panneau Historique.
Application d'étapes à un autre objet
Vou puevez appliquer un ensemble d'étapes affichées dans le panneau Historique à n'importe quel objet figurant dans la fenêtre de document.
Pour appliquer des étapes du panneau Historique à un nouvel objet :
1 Sélectionnez l'objet.
2 Sélectionnez l' étape à appliquer dans le panneau Historique, puis cliquez sur Reproduire
Application d'étapes à plusieurs objets
Si vous scélectionné plusieurs objets dans un document, puis leur appliquez des étapes à partir du panneau Historique, ces objets sont traités comme une scélection unique et Dreamweaver tente d'appliquer les étapes à cette scélection combinée. Vous ne pouvez pas, par exemple, scélectionner cinq images et leur appliquer simultanément le même redimensionnement : le redimensionnement doit être appliqué individuellement à chaque image.
Pour appliquer une série d'étapes à chaque objet d'un ensemble d'objects, vous devez faire en sorte que la dernière étapé de la série sélectionne l'objet suivant de l'ensemble. La procédure suivant illustrste ce principe dans un scenario particulier : définition de l'espacement vertical et horizontal d'une série d'images.
Pour définiir l'espacement vertical et horizontal d'une série d'images :
1 Ouvrez un document dans lequel chaque ligne est composée d'une petite image (par exemple une puce graphique ou une icône) suivie de texte. L'objet est d'espacer davantage ces images, à la fois du texte et des autres images situées au-dessus et en dessous.
2 Ouvrez l'inspecteur de propriétés (Fenêtre > Propriétés), si nécessaire.
3 Sélectionnéz la première image.
4 Dans l'inspecteur de propriétés, indiquez des valeurs dans les zones de texte Espace V. et Espace H. pour définir l'espacement de l'image.
5 Cliquez sur l'image de nouveau pour activer la fenetre 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. Appuyez ensuite sur la touche fléchéée bas pour descendre le point d'insertion d'une ligne, tout en le laissant juste à gauche de la seconde image de la série. Appuyez ensuite sur la touche fléchéée droite tout en maintainant la touche Maj enforcée, pour sélectionner cette seconde image.
Remarque: ne selectionnézURTout pas l'imag en cliquant dessus, car vous ne pourriez plus reproduce toutes les etapes.
7 Dans le panneau Historique, Sélectionnéz 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 réproduire ces actions.
L'espacement de l'image courante est modifie, et l'image suivante est selectionnée.
8 Continue à cliquer sur le bouton Reproduire jusqu'à ce que toutes les images soient correctement espacées.
Pour appliquer des étapes à un objet dans un autre document, cliquez sur le bouton Copier les étapes. Voir « Copie et collage d'étapes entre les documents », page 127.
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.
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.
La fermeture d'un document supprime son historique. Si vous prévoyez de réutiliser des étapes d'un document après l'avoir fermé, copiez ces étapes à l'aide du bouton Copier les étapes (ou enregistrez-les comme nouvelle commande, voir « Création de nouvelles commandes à partir d'étapes de l'historique »), page 128) avant de fermer le document.
Soyez prudent lorsque vous copiez des étapes qui comportent une commande Copier ou Coller :
- N'utilise 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 souhaïte.
- Si vos étapes contiennent une commande Coller, vous ne pouvez pas les coller, à moins qu'elles ne comprendnent également une commande Copier avant la commande Coller.
Si vous collez des étapes dans un editor de texte, en Affichage de code ou dans l'inspecteur de code, elles s'affichent sous forme de code JavaScript. Ce point peut vous être très utile pour apprendre à écrire vos propres scripts. Pour plus d'informations sur l'utilisation du JavaScript dans Dreamweaver, voir «Réduction et modification de code», page 199.
Pour réutiliser des étapes d'un document à un autre :
1 Activez le document contenant les étapes que vous désirez réutiliser.
2 Sélectionnez les étapes désirées dans le panneau Historique.
3 Dans le panneau Historique, cliquez sur le bouton Copier les étapes.
4 Ouvrez l'autre document.
5 Placez le curseur au point désiré ou seLECTIONnez l'objet auquel vous poulez appliquer les étapes.
6 Choisissez Edition > Coller pour coller les étapes.
Les étapes sont reproduites des 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 »
Création de nouvelles commandes à partir d'étapes de l'histoire
Vou puez enregistrer un ensemble d'étapes affichées dans la palette Historique, sous la forme d'une commande à laquelle vous donnerez un nom et qui devendra alors disponible dans le menu Commandes.
Si vous voulez réutiliser un ensemble d'étapes par la suite, créez et enregistrez une nouvelle commande, particulièrement si vous voulez réutiliser ces étapes la prochaine fois que vous démarrerez Dreamweaver. Les commandes enregistrées sont en effet conservées jusqu'à ce que vous les effaciez, tandis que les commande mémorisées sont perdues lorsque vous quittez Dreamweaver et les séquences d'étapes copiees sont supprimées lorsque vous copiez autre chose.
Vou puez modifier les noms des commandes que vous avez insérées dans le menu Commandes et supprimer ces commandes du menu Commandes à l'aide de la fonction Commandes > Modifier la liste des commandes. Il est plus difficile de modifier ou de supprimer les commandes originellement intégrées dans le menu Commandes (c'est-à-dire celles que vous n'avoz pas ajoutées vous-même).
Pour creer une commande :
1 Sélectionnéz la ou les étapes désirées dans le panneau Historique.
2 Cliquez sur le bouton Enregistrer comme commande ouCHOisissez 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 apparait dans le menu Commandes.
Remarque : la commande est enregistrée sous la forme d'un fisier JavaScript (ou parfois HTML) dans votre dossier Dreamweaver/Configuration/Commandes.
Pour utiliser une commande que vous avez enregistrée :
1 Sélectionnez l'objet auquel vous désirez appliquer la commande ou placez le curseur à l'emplacement désiré.
2 Choisissez la commande voulue dans le menu Commandes.
Pour modifier le nom d'une commande tel qu'il apparait dans le menu Commandes :
1 Choisissez Commandes > Modifier la liste des commandes.
2 Sélectionnez la commande à renomer et indiquez son nouveau nom.
3 Cliquez sur Fermer.
Pour supprimer un nom du menu Commandes :
1 Choisissez Commandes > Modifier la liste des commandes.
2 Sélectionnez une commande.
3 Cliquez sur Effacer, puis sur Fermer.
Mémorisation de commandes
Dreamweaver peut également memoriser de façon-temporaire une commande utilisé à court terme. Les principales différences entre cette approche et la reproduction d'étapes à partir du panneau Historique (voir « Répréciation d'étapes », page 124) sont les suivantes :
- Les étapes sont enregistrées au fur et à mesure que vous les effectuez, vous n'avez donc pas besoin de les sélectionnner dans le panneau Historique.
- Durant la mémorisation, Dreamweaver vous empêche d'effectuer des actions à l'aide de la souris lorsqu'il ne peut pas les mémoriser (par exemple, un clic pour sélectionner un objet dans une fenêtre ou glisser et déposer un élément sur une page).
- Si vous passez dans un autre document durant une mémorisation, Dreamweaver ne mérorise pas les actions effectuees dans l'autre document. Pour savoir a tout moment si vous est en train de mémoriser, regardez le pointeur de la souris.
Dreamweaver ne retient qu'une commande méorisée à la fois ;ès que vous commencez à méoriser une nouvelle commande, la précédente est oublée. Pour enregistrer une nouvelle commande sans perdre la commande actuellément méorisée, enregistrez cette commande à partir du panneau Historique.
Une fois la commande mémorée, vous pouvez l'enregistrer à l'aide du panneau Historique.
Pour mémoriser provisoirement une série d'étapes féquement utilisées :
1 Choisissez Commandes > Demarrer l'enregistrement ou appuyez sur la combinaison de touches Contrôle+Maj+X (Windows) ou Commande+Maj+X (Macintosh). Le pointeur change d'aspect pour indiquer que vous mémorisez une commande.
2 Lorsque l'opération est terminée, choisissez Commandes > Arreter l'enregistrement ou appuyez à nouveau sur la combinaison de touches Ctrl+Maj+X (Windows) ou Commande+Maj+X (Macintosh).
Pour reproductive une commande méorisée :
Choisissez Commandes > Reproduce la commande enregistrée ou appuyez sur la combinaison de touches Contrôle+Maj+R (Windows) ou Commande+Maj+R (Macintosh).
Pour enregistrer une commande méorisée :
1 Choisissez Commandes > Reproduce la commande enregistrée pour exécuter la commande. Une étape nommée Exécuter commande apparait dans la liste des étapes du panneau Historique.
2 Dans la palette Historique, Sélectionnez l' étape Exécuter commande et cliquez sur le bouton Enregistrer comme commande.
3 Indiquez le nom de la commande et cliquez sur OK. La commande apparait dans le menu Commandes.
Partie II Préparation à la création de sites dynamiques
Si vous souhaitez créé une application Web dynamique, commencez par configurer un serveur d'application puis établissez une connexion à la base de données.
Cette partie du manuel contient les chapitres suivants :
- Chapitre 6, « Configuration d'une application Web »
- Chapitre 7, « Connexions à des bases de données pour les développpeurs ColdFusion »
- Chapitre 8, « Connexions à des bases de données pour les développpeurs ASP.NET »
- Chapitre 9, « Connexions à des bases de données pour les développpeurs ASP »
- Chapitre 10, « Connexions à des bases de données pour les développpeurs JSP »
- Chapitre 11, « Connexions à des bases de données pour les développpeurs PHP »
CHAPITRE 6
Configuration d'une application Web
Ce chapitre explique comment configurer le système pour creer des applications Web dans Macromedia Dreamweaver MX.
Remarque : pour creer l'exemple d'application Web instalé avec Dreamweaver, voir l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver).
Ce chapitre contient les sections suivantes :
- « Remarque à l'attention des utilisateurs de Dreamweaver UltraDev 4», page 133
- « Éléments nécessaires à la création d'applications Web», page 134
- « Configuration d'un serveur Web», page 135
- « Configuration d'un serveur d'application», page 135
- « Création d'un dossier racine pour l'application», page 138
- « Définition d'un site Dreamweaver», page 138
- « Connexion à une base de données », page 142
- « Dépannage des erreurs de serveur d'application», page 142
Remarque à l'attention des utilisateurs de Dreamweaver UltraDev 4
Si vous utilise Macromedia Dreamweaver UltraDev 4, votre système est probablement déjà configuré pour creer des applications Web. Si vous avez installe conjointement Dreamweaver MX et UltraDev 4, tous vos sites UltraDev ont été automatiquement importés dans Dreamweaver. Vous n'avez donc pas à redéfinir les sites dans Dreamweaver MX.
Toutefois, si un site importé contient des pages Macromedia ColdFusion créées à l'aide de comportements de serveur UltraDev 4, vous doivent indiquer à Dreamweaver que le site contient des pages générées par UltraDev. En effet, Dreamweaver MX recherche des modèle de code sur la page pour identifier et afficher les comportements de serveur dans le panneau Comportements de serveur. Dans le cas de pages Microsoft Active Server Pages (ASP) et JavaServer Pages (JSP), Dreamweaver MX générale le même code que UltraDev et par conséquent, reconnaît et affiche les comportements de serveur ASP et JSP générés par UltraDev. Toutefois, dans le cas de pages ColdFusion, Dreamweaver MX générale du code amélioré et simplifié. comme Dreamweaver recherche par défaut ces nouveaux modèle de code, il ne reconnaît pas les comportements de serveur ColdFusion générés par UltraDev. Vous devez donc indiquer à Dreamweaver qu'il est nécessaire de rechercher les modèle de code UltraDev si vous souhaitez continuer d'utiliser les anciens comportements de serveur.
Pour indiquer à Dreamweaver qu'il est nécessaire de rechercher le code ColdFusion généra par UltraDev 4 :
1 Choisissez Site > Modifier les sites, sélectionnez votre site et cliquez sur Modifier pour ouvrir la boîte de dialogue Définition du site.
2 Si l'assistant s'affiche, cliquez sur Avancé puis seLECTIONnez la catégorie Serveur d'évaluation. La boîte de dialogue Serveur d'évaluation s'affiche.
3 A partir du menu déroulant Ce site contient,CHOISSEZ l'une des options suivantes :
- Si vous souhaitez que Dreamweaver continue de générer du code UltraDev dans les nouvelles pages,CHOISSEZ PAGES UltraDev 4 uniquement.
- Si vous souhaitez que Dreamweaver commence à utiliser le code amélioré dans les nouvelles pages, Sélectionné Les deux versions. Cette option aura pour effet de mettre progressivement à jour le site UltraDev 4 ; à terme, le site se composeira en majorité de pages générées par les nouveaux comportements de serveur.
4 Cliquez sur OK, puis sur Terminate.
Les connexions aux bases de données seront générées différemment si vous indiquez que le site contient uniquement des pages UltraDev 4. Pour plus d'informations, voir « Connexion au moyen de la connectivité UltraDev 4», page 147.
Éléments nécessaires à la création d'applications Web
Pour creer des applications Web à l'aide de Dreamweaver, vous doivent dispose des logiciels suivants :
- un serveur Web ;
- un serveur d'application executé sur votre serveur Web ou un serveur Web faisant aussi fonction de serveur d'application, tel que Microsoft PWS ou IIS.
Remarque : dans le contexte des applications Web, les termes « serveur Web » et « serveur d'application » font reference à des logiciels et non à du matériel.
Si vous souhaitez utiliser une base de données en conjunction avec votre application, vous doivent également dispose des logiciels suivants :
- une base de données ou un système de base de données;
- un pilote de base de données prénant en charge votre base de données.
Pour plus d'informations sur la procédure de configuration d'une base de données en vue de son utilisation avec une application Web, voir « Connexion à une base de données », page 142.
Plusieurs sociétés d'hébergement Web vous offrent la possibilité d'utiliser leurs logiciels pour tester et déployer des applications Web. Si vous utilisez Windows, vous pouvez installer les logiciels nécessaires sur le même ordinateur que Dreamweaver pour les besoin du développement. Vous pouvez également installer les logiciels sur un ordinateur en réseau (généralement un ordinateur Windows NT ou Windows 2000) de sorte que d'autres développpeurs de votre équipe puissant intervenir sur un projet.
Si vous utilisez un Macintosh, vous pouze avoir recours à un service d'hebergement Web ou installer les logiciels requis sur un ordinateur distant. Si vous utilisez Mac OS 10.1, vous pouze développer des sites PHP en local à l'aide du serveur Web Apache et du serveur d'application PHP fourni avec votre système d'exploitation. Pour plus d'informations sur la configuration, consultez les sites Web suivants :
http://developer.apple.com/internet/macosx/php.html
- http://www.entropy.ch/software/macosx/
- http://www-stepwise.com/Articles/Workbench/2001-10-11.01.html
Configuration d'un serveur Web
Pour executer des applications Web, vous doivent dispose d'un serveur Web. Un serveur Web est un calculi qui fournit des fichiers en response à des requêtes de navigateurs Web. Un serveur Web est parfais appelé serveur HTTP. Parmi les serveurs Web les plus courants, on trouve IIS, Netscape Enterprise Server, iPlanet Web Server et Apache HTTP Server.
Si vous n'utilise pas de service d'hebergement Web, selectionnez un serveur Web et installez-le sur un ordinateur local ou distant. Pour plus d'informations, reportez-vous à la documentation de votre fournisseur ou consultez l'administrateur système.
Si vous utilise Windows, vous pouvez installer PWS ou IIS pour obtenir rapidement un serveur Web fonctionnel. Il se peut que le serveur Web soit deja installé. Parcourez votre arborescence pour vérifier si elle compte un dossier C:\Inetpub ou D:\Inetpub. PWS et IIS créé ces dossiers lors de l'installation. Pour installer PWS ou IIS, voir l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver).
Les pages ASP.NET ne sont compatibles qu'avec un seul serveur Web : Microsoft IIS version 5 ou supérieure. PWS n'est pas pris en charge. En outre, comme IIS 5 est un service des systèmes d'exploitation Windows 2000 et Windows XP Professionnel, vousdezvez impératifement utiliser l'une des ces deux versions de Windows pour executer des applications ASP.NET. Windows 98, ME et NT ne sont pas pris en charge. Toutefois, vous pouvez développer (mais non executer) des applications ASP.NET sur tous les types d'ordinateurs (Macintosh compris) exécutant Dreamweaver MX.
Configuration d'un serveur d'application
Pour executer des applications Web, le serveur Web doit pouvoir utiliser le serveur d'application. Un serveur d'application est un logiciel qui permet à un serveur Web deTRAITER des pages Web portant une marque spécifique. Lorsqu'une page portant cette marque est demandée, le serveur Web envoie la page au serveur d'application pour que celui-ci la traite avant qu'elle ne soit envoyee au navigateur.
Parmi les serveurs d'application les plus courants, on trouve Macromedia ColdFusion MX, Macromedia JRun, la plate-forme Microsoft .NET, PHP, IBM WebSphere et Jakarta Tomcat. Les serveurs Web IIS et PWS font également office de serveurs d'application ASP. Généralement, le serveur d'application est installé sur le système exécutant le serveur Web.
Cette section contient les rubriques suivantes :
- « Choix d'un serveur d'application », page 136
- « Installation d'un serveur d'application ColdFusion», page 136
- « Installation d'un serveur d'application ASP.NET», page 136
- « Installation d'un serveur d'application ASP», page 137
- « Installation d'un serveur d'application JSP», page 137
- « Installation d'un serveur d'application PHP», page 138
Choix d'un serveur d'application
Le besoin d'un serveur d'application dépend de plusieurs critères : votre budget, la technologie de serveur que vous souhaitez utiliser (ColdFusion, ASP.NET, ASP, JSP ou PHP) et le serveur Web que vous avez sélectionné.
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 Macromedia ColdFusion et JRun). Certains serveurs d'application font office de serveurs Web (notamment Microsoft IIS et PWS) et d'autres peuvent être télécharges gratuite sur Internet (notamment Jakarta Tomcat et PHP).
Technologie de serveur : les serveurs d'application utilisent différentes technologies.
Dreamweaver prend en charge cinq technologies de serveur : ColdFusion, ASP.NET, ASP, JSP et PHP. Pour plus d'informations, voir l'aide de Dreamweaver (Aide > Utilisation de
Dreamweaver). Le tableau suivant indique les serveurs d'application courants axés sur l'une des cinq technologies de serveur prises en charge par Dreamweaver :
| Technologie de serveur | Serveur d'application |
| ColdFusion | Macromedia ColdFusion MX |
| ASP.NET | Microsoft IIS 5 avec plate-forme .NET |
| ASP | Microsoft IIS ou PWS
Sun ChiliSoft ASP |
| JSP | Macromedia JRun
IBM WebSphere
Apache Tomcat
BEA WebLogic |
| PHP | Serveur PHP |
Serveur Web : vous pouvez égalementCHOISIRVOTREServeur d'application en fonction du serveur Web que vous souhaitez utiliser. Vérifiez que l'application est compatible avec le serveur Web. Par exemple, la plate-forme .NET est compatible uniquement avec IIS version 5 ou supérieure.
Installation d'un serveur d'application ColdFusion
Pour exécuter des pages ColdFusion, vous doivent désposer du serveur d'application ColdFusion. Il existe une version de ce serveur pour les systèmes Windows, Linux, Solaris et HP-UX.
Voupe acceder au site Web de Macromedia, à l'adresse http://www.macromedia.com/fr/ software/coldfusion/, pour telécharger et installer la version complete de ColdFusion MX édition développement. Un exemplaire du serveur ColdFusion MX édition développement est également disponible sur le CD de Dreamweaver (version Windows uniquement).
Les utilisateurs de Macintosh peuvent avoir recours à un service d'hebergement Web offrant une solution ColdFusion ou bien installer ColdFusion sur un ordinateur Windows, Linux, Solaris ou HP-UX distant exécutant un serveur Web.
Après avoir installé le serveur d'application, vous devez creator un dossier racine pour votre application Web. Voir « Création d'un dossier racine pour l'application», page 138.
Installation d'un serveur d'application ASP.NET
Pour développer des pages ASP.NET, vous devez disposer des éléments suivants :
- un ordinateur Windows 2000 ou Windows XP Professionnel exécutant IIS version 5 ou ultérieure ;
- la plate-forme Microsoft .NET, que vous pouvez télécharger à partir du site Web Microsoft.
Téléchargez la plate-forme .NET à partir du site Web Microsoft, à l'adresse http://asp.net/download.aspx, et suive les instructions d'installation fournies sur le site.
Les utilisateurs de Macintosh peuvent avoir recours à un service d'hebergement Web offrant une solution ASP.NET ou bien installer la plate-forme .NET sur un ordinateur Windows 2000 ou Windows XP Professionnel distant exécutant IIS version 5 ou ultérieure.
Après avoir installé la plate-forme .NET, vous devez créé un dossier racine pour votre application Web. Voir « Création d'un dossier racine pour l'application», page 138.
Installation d'un serveur d'application ASP
Pour développer des pages ASP, vous doivent désposer d'un serveur d'application compatible avec Active Server Pages (ASP) 2.0 de Microsoft. Voici quelques choses parmi les plus courants :
- Microsoft IIS, fourni avec Windows NT Server, Windows 2000 et Windows XP Professionnel;
- Microsoft PWS, version réduite de IIS fonctionnant sous Windows 98 et NT Workstation ;
- Sun Chili!Soft ASP, dont il existe une version pour Windows, Linux, Solaris et d'autres plateformes. Pour plus d'informations, voir le site Web Chili!Soft, à l'adresse http://www.chilisoft.com/chiliasp/default.asp.
Les utilisateurs de Windows peuvent installer et executer IIS ou PWS sur leur ordinateur local. Pour Obtir des instructions, voir l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver).
Les utilisateurs de Macintosh peuvent avoir recours à un service d'hebergement Web offrant une solution ASP ou bien installer IIS ou PWS sur un ordinateur distant.
Après avoir installé IIS ou PWS, vous doivent creer un dossier racine pour votre application Web. Voir « Création d'un dossier racine pour l'application», page 138.
Installation d'un serveur d'application JSP
Pour développer des pages JSP, vous doivent désposer d'un serveur d'application compatible avec JavaServer Pages (JSP). Voici quelques choses queux parmi les plus courants :
- Macromedia JRun pour Windows, Linux, Solaris ou UNIX. Vous pouvez télécharger une version d'évaluation à partir du site Web de Macromedia, à l'adresse http:// www.macromedia.com/fr/software/jirun/.
- IBM WebSphere dont il existe une version pour différents systèmes d'exploitation. Vous pouvez télécharger une version d'évaluation à partir du site Web d'IBM, à l'adresse http://www-4.ibm.com/software/webservers/appsery/download.html.
- Tomcat pour Windows et UNIX. Vous pouvez télécharger un exemplaire de Tomcat à partir du site Web Jakarta Project, à l'adresse http://jakarta.apache.org/tomcat/.
Les utilisateurs de Macintosh peuvent avoir recours à un service d'hebergement Web offrant une solution JSP ou bien installer un serveur d'application JSP sur un ordinateur distant exécutant un serveur Web.
Après avoir installé un serveur d'application JSP, vous doivent acceder un dossier racine pour votre application Web. Voir « Création d'un dossier racine pour l'application», page 138.
Installation d'un serveur d'application PHP
Pour executer des pages PHP, vous doivent désposer 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. Ce serveur d'application est compatible avec les serveurs Web Apache, Microsoft IIS ou PWS, Netscape et iPlanet et avec praticement tous les serveurs Web qui prennten en charge l'interface CGI.
Vous pouvez télécharger le serveur d'application PHP à partir du site Web PHP, à l'adresse http:// www.php.net/downloads.php. Pour plus d'informations sur l'installation du serveur, reportez-vous à la documentation PHP que vous pouvez également télécharger à partir du site Web PHP, à l'adresse http://www.php.net/download-docs.php.
Les utilisateurs de Macintosh peuvent avoir recours à un service d'hebergement Web offrant une solution PHP ou bien installer PHP sur un ordinateur distant exécutant un serveur Web. Si vous utilisez Mac OS 10.1, vous pouvez écycler l'application PHP installée avec le système d'exploitation. Pour plus d'informations, voir les sites Web suivants :
http://developer.apple.com/internet/macosx/php.html
- http://www.entropy.ch/software/macosx/
- http://www stepwise.com/Articles/Workbench/2001-10-11.01.html
Après avoir installé le serveur d'application PHP, vous devez créé un dossier racine pour votre application Web.
Creation d'un dossier racine pour l'application
Après avoir installé le logiciel de serveur, vous doivent acceder un dossier racine pour l'application sur l'ordinateur exécutant le serveur Web.
Vérifiez que le dossier est publié par le serveur Web (en d'autres termes, que le serveur Web peut fournir tous les fichiers situés dans ce dossier ou chacun de ses sous-dossiers en réponse à une requête HTTP d'un navigateur Web). Par exemple, dans le cas d'un ordinateur exécutant PWS ou IIS, il faut s'assurer que tous les fichiers du dossier Inetpub\wwwroot et de chacun de ses sous-dossiers peuvent être fournis à un navigateur Web.
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.
Remarque : les utilisateurs de Macromedia HomeSite et de ColdFusion Studio peuvent considérer un site Dreamweaver comme un projet HomeSite ou Studio.
Avant de commencer, vérifie 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'hebergement Web. Voir « Configuration d'un serveur Web», page 135.
-
Un serveur d'application est installé et executé sur le système où resides le serveur Web. Voir « Configuration d'un serveur d'application », page 135.
-
Vous avez creeu un dossier racine pour votre application Web sur le systeme executant le serveur Web. Pour plus d'informations, voir « Creation d'un dossier racine pour l'application », page 138.
La définition d'un site Dreamweaver pour l'application Web se déroule en trois étapes :
1 Définition d'un dossieritué sur le disque dur comme dossier local Dreamweaver dans lequel seront stockées les copies de travail des fichiers du site (voir « Définition d'un dossier local », page 139).
2 Définition d'un dossieritué sur l'ordinateur exécutant le serveur Web comme dossier distant Dreamweaver (voir « Définition d'un dossier distant », page 140).
3 Définition de l'emplacement vers lequel Dreamweaver doit transférer les pages dynamiques devant être traitées pendant la procédure de création du site (voir « Définition du dossier de traitement des pages dynamiques », page 140).
Une fois le site Dreamweaver défini, vous pouvez partager à la création de l'application Web.
Définition d'un dossier local
Voupez definir un dossier local Dreamweaver pour chacune des applications Web créées. Ce dossier local est le dossier du disque dur dans lequel seront stockées les copies de travail des fichiers du site. Ce dossier local est indispensable au bon fonctionnement de Dreamweaver.
La définition d'un dossier local vous permet également de:gérer vos fichiers et de les transférer vers ou depuis le serveur Web d'un simple cli c de souris.
Pour définit un dossier local Dreamweaver :
1 Creez sur le disque dur un dossier dans lequel seront stockées les copies de travail des fichiers.
Voussoupiezeguallycrerdesous-dossiers pourstockervosfichiersd'imagouautres ressources.
2 Dans Dreamweaver, choisissez Site > Nouveau site.
La boîte de dialogue Définition du site s'ouvre.
3 Si l'assistant s'affiche, cliquez sur Avancé, puis selectionnez la catégorieInfos locales (normalement activée par défaut).
4 Tapez le nom que vous souhaitez attribuer au site Dreamweaver dans la zone Nom du site.
5 Dans la zone Dossier racine local, indiquez le dossier cree a l'etape 1.
Voussupoez taper un chemin ou cliquer sur l'icone de dossier pour rechercher le dossier et le selectionner.
6 Vou puez compléter les autres options de la catégorieInfos locales, mais cela n'est pas indispensable pour que le site fonctionne.
Pour plus d'informations sur ces options, cliquez sur le bouton Aide de la boite de dialogue.
Pour le moment, laissez ouverte la boite de dialogue Définition du site. Vous doivent ensuite définir un dossier distant.
Définition d'un dossier distant
Après avoir défini un dossier local, vous pouvez définir un dossier distant pour le site Dreamweaver. Ce dossier distant est le dossier que vous avez créé sur le serveur Web pour l'application Web (voir « Création d'un dossier racine pour l'application », page 138).
Vou n'avez pas à définir de dossier distant si le dossier local que vous avez définit (voir « Définition d'un dossier local », page 139) peut faire office de dossier racine pour l'application Web (ce qui suppose que le serveur Web resides sur l'ordinateur local).
Pour définit un dossier distant Dreamweaver :
1 Si la boite de dialogue Définition du site n'est pas ouverte, choisissez Site > Modifier les sites, sélectionnez votre site et cliquez sur Modifier afin de l'ouvrir.
La boîte de dialogue Définition du site apparait.
2 Si l'assistant s'affiche, cliquez sur Avancé, puis selectionnez la catégorieInfos distantes.
La boîte de dialogueInfosdistantes s'affiche.
3 A partir du menu déroulant Accès,CHOISSEZ Local/Réseau, FTP ou RDS.
Votre choix dépend de la méthode que vous souhaitez utiliser pour le transfert des fichiers entre le dossier local et le dossier distant.
Remarque : si vous souhaitez utiliser RDS, le dossier distant doit être situé sur un ordinateur exécutant ColdFusion.
Voupez egalent envoyer vos fichiers à une application SourceSafe en choisisant Base de données SourceSafe (les développpeurs utilisent SourceSafe afin de contrôler la version des fichiers). Si vous choisissez cette option, vous doivent un dossier différent. Pour obtenir des instructions, voir « Définition du dossier de traitement des pages dynamiques», page 140.
4 Aprese avoir selectionné une méthode d'accès, définiSEEz les options d'accès correspondantes.
Pour plus d'informations sur ces options, cliquez sur le bouton Aide de la boite de dialogue.
Laissez la boîte de dialogue Définition du site ouverte. Vous doivent ensuite définir un dossier pour le traitement des pages dynamiques.
Définition du dossier de traitement des pages dynamiques
Après avoir défini le dossier distant dans Dreamweaver, vous doivent indiquer le dossier dans lequel les pages dynamiques pourront être traitées. Dreamweaver utilise ce dossier pour générer du contenu dynamique et se connecter à des bases de données pendant que vous procédez à la création du site.
Du fait de l'interaction entre le serveur Web et le serveur d'application, c'est généralement le dossier racine créé sur le serveur Web qui est utilisé (voir « Création d'un dossier racine pour l'application », page 138).
Remarque: le dossier racine peut etre un dossier local ou distant, suivant l'emplacement du serveur Web.
Pour indiquer le dossier dans lequel les pages dynamiques peuvent etre traitées :
1 Si la boîte de dialogue Définition du site n'est pas ouverte,chosissez Site > Modifier les sites, sélectionné vosite et cliquez sur Modifier afin de l'ouvrir.
La boîte de dialogue Définition du site apparait.
2 Si l'assistant s'affiche, cliquez sur Avancé puis selectionnez la catégorie Serveur d'évaluation. La boîte de dialogue Serveur d'évaluation s'affiche. 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 peut se trouver sur votre ordinateur local, un serveur de développement, un serveur intermédiaire ou un serveur de production. Vous doivent仅仅 vous assurer que le serveur selectionné est en mesure de traiter le type de pages dynamiques que vous avez l'intention de développer.
3 Complétez les options de la boîte de dialogue, puis cliquez sur OK. Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
A propos du préfixe d'URL
Voudevez indiquer un preFixe d'URL de sort que Dreamweaver MX puisse recourir 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 le serveur d'évaluation pour générer le contenu dynamique affché dans la fenêtre Live Data et dans votre navigateur lorsque vous utilisez la commande Aperçu dans le navigateur.
Dreamweaver utilise également le serveur d'évaluation pour étabir des connexions à une base de données 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-repertoire ou d'un répertoire virtuel du réseau de base de votre site Web.
Remarque : la terminologie utilise dans cette section est celle de Microsoft IIS. Bien que cette terminologie puisse différer d'un serveur à l'autre, les mêmes concepts s'appliquent à la plupart des serveurs Web.
Le repertoire de base est le dossier qui, sur le serveur, est mapped sur le nom de Domaine de votre site. Supposons que le dossier que vous souhaitez utiliser pourrialer des pages dynamiques soit c:\sites\company\ et que ce dossier soit votre repertoire de base (c'est-à-dire que ce dossier soit mapped sur le nom de Domaine de votre site, par exemple www.mystartup.com). Dans ce cas, le préfixe d'URL est http://www.mystartup.com/.
Si le dossier que vous souhaitez utiliser pour le traitement des pages dynamiques est un sous-dossier du réseau de base, ajoutez ce sous-dossier à l'URL. Supposons que votre réseau de base soit c:\sites\company\, que le nom de Domaine de votre site soit www.mystartup.com et que le dossier à utiliser pourTRAITER les pages dynamiques soit c:\sites\company\inventory. Entrez le préfixé d'URL suivant:
Si le dossier à utiliser pour Traits les pages dynamiques n'est pas votre repertoire de base ni l'un de ses sous-repertoires, vous nevez creer un repertoire virtuel.
Un repertoire virtuel est un dossier qui ne se trouve pas physique dans le repertoire de base du serveur, même s'il apparait dans l'URL. Pour creer un repertoire virtuel, spécifie un alias représentant le chemin du dossier dans l'URL. Supposons que vous repertoires de base soit c:\sites\company et votre dossier de traitement d:\apps\inventory, et que vous ayez defini pour ce dossier l'alias « warehouse ». Entrez le préfixe d'URL suivant :
http://www.mystartup.com/warehouse/
Localhost est un terme qui peut être utilisé pour désigner le réseau de base dans vos URL lorsque le client (généralement un navigateur, mais dans ce cas Dreamweaver) resides sur le même système que vous serveur Web. Supposons que Dreamweaver résidence sur le même système que le serveur Web, que vous répertoire de base soit c:\sites\company et que vous ayez défini un réseau virtuel nommé « warehouse » désignant le dossier à utiliser pourrialier les pages dynamiques. Entrez le préfixe d'URL suivant :
Pour déterminer votre nom de Domaine et votre réseau de base dans PWS et IIS 4.0, cliquez sur l'icone Général dans le Personal Web Manager et notez la page d'accueil spécifique dans la zone Publication.
Connexion à une base de données
Si vous souhaitez utiliser une base de données avec votre application Web, vous doivent au préalable étabir une connexion avec cette base. Pour une presentation générale des connexions de base de données, voir « Description des connexions aux bases de données», page 702.
Dreamweaver MX gère les connexions aux bases de données différentment suivant la technologie de serveur sélectionnée. Voir les chapitres suivants :
- Chapitre 7, « Connexions à des bases de données pour les développpeurs ColdFusion», page 145
- Chapitre 8, « Connexions à des bases de données pour les développpeurs ASP.NET», page 151
- Chapitre 9, « Connexions à des bases de données pour les développpeurs ASP», page 157
- Chapitre 10, « Connexions à des bases de données pour les développpeurs JSP», page 169
- Chapitre 11, « Connexions à des bases de données pour les développpeurs PHP», page 177
Dépannage des erreurs de serveur d'application
Cette section presente certains messages d'erreur de serveur d'application courants ainsi que les solutions pour corriger ces erreurs.
Pour plus d'informations sur les serveurs d'application Macromedia, accededez au centre de support technique de ColdFusion et de JRun disponible sur le site Web de Macromedia à l'adresse http:// www.macromedia.com/fr/support/.
Pour plus d'informations sur les autres serveurs d'application, reportez-vous à la documentation du serveur, consultez le site Web du fournisseur ou contactez le support technique du fournisseur.
Cette section aborde les erreurs de serveur suivantes :
ColdFusion-405 Methode non autorise》，page 143
- « JRun - Erreur de syntaxe : Identifient attendu à la place de ce jeton», page 143
- « JRun - Erreur 2140», page 143
WebSphere-Error403 (forbidden by rule) page 143
WebSphere - Error 404 (File Not Found) , page 144
ColdFusion - 405 Méthode non autorisée
Cette erreur peut se produit dans ColdFusion 4 ou 5 lors de la vérification de l'installation. Le problème peut provenir du fait que vous disposez de la version FrontPage de PWS. Veillez à installer la version complète de PWS, et non pas la version FrontPage.
Si vous dispose de la version correcte de PWS, vérifie le nom du réseau virtuel de cfdocs et cfide. Dans PWS, cliquez sur l'icone Advanced, selectionnez le réseau virtuel dans la liste et cliquez sur Edit Properties. Dans la zone Alias, supprimez toute virgule du nom du réseau virtuel.
Il est également recommendé de stocker les fichiers de base de données en dehors du repertoire racine du serveur Web. Dans certains cas, les serveurs Web mettent les fichiers en mémoire cache et les verrouillent, ce qui peut entraîner des problèmes de droits d'écriture. En outre, le stockage des bases de données en dehors du dossier racine du serveur Web constitue une mesure de sécurité supplémentaire.
JRun - Erreur de syntaxe : Identifient attendu à la place de ce jeton
Cette erreur se produit en cas de tentative de traitement d'une page JSP appelée default.jsp.
Le terme « default » est un mot clé réservé dans JRun. Pour remédier à ce problème, attribués à la page le nom index.jsp ou home.jsp.
JRun - Erreur 2140
Cette erreur peut se produit pour différentes raisons :
- Le numero de licence n'a pas ete entree correctement. Pour eviter toute erreur, copiez et collez le numero de licence indique dans le message electronique de confirmation d'achat. Verifiez agement que le numero de licence n'est suivi d'aucun espace.
- Le jsm-default n'a pas ete installe correctement en tant que service NT.
Pour plus d'informations, voir l'article 12015 du centre de support JRun, à l'adresse http:// www.macromedia.com/go/error_2140.
Cette erreur peut se produit lorsqu'un servlet ou JSP est appelé. Les causes et les solutions possibles sont les suivantes :
- Le nom de fjichier utilise pour appeler le fjichier JSP est incorrect. Vérifiez le nom du fjichier JSP. Vérifiez que vous avez respecté la casse, que vous n'avoz pas fait de faute de frappe et que l'extension du nom de fjichier est correcte. Vérifiez que le nom du fjichier JSP se termine par .jsp.
- Si vous n'utilise pas le numero de port par défaut du serveur HTTP IBM pour AS/400 (port 80), vous avez omis l'alias host:port dans la liste des alias de l'hôte virtuel. Pour obtenir la liste des alias de l'hôte virtuel, cliquez sur l'onglet Advanced properties de l'hôte virtuel dans Administrative Console.
- L'application Web dans laquelle se trouve le fichier JSP ne contientaucunServlet d'activation de JSP. Verifie qu'un servlet d'activation de JSP a ete ajoute a l'application Web dans laquelle se trouve le fichier JSP.Creez un servlet d'activation de JSP si nécessaire.
-
Si le servit a été créé au sein d'une application Web, il doit-disposer d'un chemin URI (Uniform Resource Indicator). Vérifiez que le chemin URI est correct.
-
La directive Pass ou Redirect de la configuration active du serveur HTTP empêche le JSP ou le servlet d'appeler des fichiers. Vérifie que les directives Pass et Redirect de la configuration active du serveur HTTP IBM pour AS/400 sont correctes.
Pour plus d'informations, voir la section « Frequently Asked Questions » du site Web d'IBM à l'adresse http://www.ibm.com/support/techdocs/atsmastr.nsf/PubAllNum/FQ101338.
Pour les autres problèmes liés à WebSphere, visitez le centre de support IBM WebSphere à l'adresse http://www.ibm.com/software/webservers/appserv/support.html.
WebSphere - Error 404 (File Not Found)
Cette erreur peut se produit lorsqu'un servlet ou un fjichier JSP est appelé. Les causes et les solutions possibles sont les suivantes :
- Vérifiez que l'URL du fichier JSP ou du servlet est bien orthographie.
- Les autorisations associées au processus du serveur d'application ne permettent pas d'acceder au dossier contenant le code Java génére par JSP et le fidchier de classes. Vérifie que QEJBSVR dispose des droits d'accès à la structure de dossier /QIBM/UserData/WebASAdv/default/temp ou /QIBM/UserData/WebASAdv//temp.
- Cette erreur peut être due au fait qu'une classe utilisée par le servlet est introuvable. Vérifie que la variable du chemin de classe de l'application Web contient toutes les classes requises par le servlet.
- Cette erreur peut être due à une directive Pass mal place dans le filchier de configuration HTTP. Si la directive Service est précédée de la directive Pass (PASS /), elle ne sera jamais référencée. Pour.Remédier à ce problème, place la directive Pass à la fin des entrées de configuration HTTP ou précisez cette directive (par exemple, PASS /.html). Pour plus d'informations sur les directives de configuration HTTP, voir la section Editing the HTTP configuration file to add server directives de la documentation WebSphere.
Pour plus d'informations, visitez le centre de support IBM WebSphere à l'adresse http:// www.ibm.com/software/webservers/appserv/support.html.
CHAPITRE 7
Connexions à des bases de données pour les développpeurs ColdFusion
Ce chapitre explique comment se connecter aux bases de données lors du développement d'applications Macromedia ColdFusion avec Macromedia Dreamweaver MX. Pour les applications ColdFusion, vous devez vous connecter dans Dreamweaver enCHOISIGANT une source de données ColdFusion définie dans le programme ColdFusion Administrator, la console de gestion du serveur.
Pour réaliser les opérations représentées dans ce chapitre, vous doivent avoir configuré une application Web ColdFusion (voir « Configuration d'une application Web», page 133). Une base de données doit également être installée sur votre ordinateur local ou sur un système auquel vous pouvez acceder en réseau ou par FTP.
Ce chapitre contient les rubriques suivantes :
- « Connexion à une base de données», page 145
- « Modification ou suppression d'une connexion à une base de données», page 147
- « Connexion au moyen de la connectivité UltraDev 4», page 147
Pour tout complément d'information sur les bases de données et les connexions aux bases de données, voir « Guide du débutant en base de données », page 695.
Connexion à une base de données
Pour développer une application Web ColdFusion dans Dreamweaver, vous devez vous connecter à une base de données enCHOISIGANT une source de données ColdFusion définie dans le programme ColdFusion Administrator, la console de gestion du serveur.
Remarque : si vous exécutez ColdFusion 5 sous Windows, vous pouvez également configurer un DSN (Data Source Name, nom de la source de données) sur votre ordinateur. Les DSN système sont automatiquement considérés comme des sources de données par ColdFusion 4 ou 5.
Avant de vous connecter à une base de données, assurez-vous que Dreamweaver connait l'emplacement des sources de données ColdFusion. Pour recuperer 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 doivent indiquer ce dossier dans la catégorie Serveur d'évaluation de la boîte de dialogue Définition du site. Pour plus d'informations, voir « Définition du dossier de traitement des pages dynamiques», page 140.
Ensuite, vous doivent acceder une source de données ColdFusion dans le programme ColdFusion Administrator (s'il n'en existe pas déjà une). Pour plus d'informations, voir « Création d'une source de données ColdFusion», page 146.
Une fois la source de données ColdFusion créé, vous pouvez l'utiliser dans Dreamweaver pour vous connecter à la base de données. Pour plus d'informations, voir « Connexion à la base de données dans Dreamweaver», page 146.
Pour réaliser les opérations représentées dans cette section, vous doivent utiliser la connectivité Dreamweaver MX et non pas Dreamweaver UltraDev 4. Les connexions à des bases de données sont traitées différemment dans UltraDev 4. Pour plus d'informations, voir « Connexion au moyen de la connectivité UltraDev 4», page 147.
Creation d'une source de données ColdFusion
Avant de vous connecter à une base de données, vous doivent创建工作 une source de données ColdFusion dans le programme ColdFusion Administrator, la console de gestion du serveur.
Remarque : si vous exécutez ColdFusion 5 sous Windows, vous pouvez également configurer un DSN sur votre ordinateur. Les DSN système sont automatiquement considérés comme des sources de données par ColdFusion 5. Pour plus d'informations, voir « Définition d'un DSN sous Windows », page 717.
Pour creer une source de données ColdFusion :
1 Dans le panneau Bases de données (Fenetre > Bases de données) de Dreamweaver, cliquez sur l'icone Modifier les sources de données (la deuxieme icone a partir de la droite sur la barre d'outils du panneau).
ColdFusion Administrator s'ouvre dans un navigateur.
2 Connectez-vous à ColdFusion Administrator et creez la source de données.
Pour obtenir des instructions, voir la documentation relative à ColdFusion.
Voudevez fournir certaines valeurs de parametes pour creer la source de données ColdFusion. Pour les valeurs de parametes specifiques à votre pilote de base de données, reportez-vous à 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 create dans ColdFusion Administrator, vous pouvez l'utiliser pour vous connecter à la base de données dans Dreamweaver.
Ouvrez n'importe qu'elle page ColdFusion dans Dreamweaver, puis allez dans le panneau Bases de données (Fenetre > Bases de données). Vos sources de données ColdFusion s'affichent dans le panneau.
Si les sources de données ne s'affichent pas, assurez-vous que Dreamweaver connait l'emplacement des 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. Pour plus d'informations, voir « Définition du dossier de traitement des pages dynamiques», page 140.
Modification ou suppression d'une connexion à une base de données
Vous pouvez modifier ou supprimer des sources de données ColdFusion dans ColdFusion Administrator. Dans le panneau Bases de données (Fenetre > Bases de données) de Dreamweaver, cliquez sur l'icone Modifier les sources de données (la deuxieme icone a partir de la droite sur la barre d'outils du panneau). ColdFusion Administrator s'ouvre dans un navigateur. Connectez-vous et modifiez la source de données. Pour obtenir des instructions, voir la documentation relative à ColdFusion.
Pour éviter les erreurs qui peuvent se produit après avoir supprimé ou renommé une source de données ColdFusion, mettez à jour tous les yeux d'enregistrements utilisant les anciennes sources de données dans Dreamweaver en double-cliquant sur le nom du jeu d'enregistrements dans le panneau Liaisons et enChoosingant une nouvelle source de données.
Connexion au moyen de la connectivité UltraDev 4
Cette section explique comment se connecter à une base de données si vous avez créé votre application ColdFusion en utilisant les comportements de serveurs Dreamweaver UltraDev 4 ou si vous l'avez créé dans Dreamweaver MX en utilisant les comportements de serveurs UltraDev 4. Pour plus d'informations, voir « Remarque à l'attention des utilisateurs de Dreamweaver UltraDev 4 », page 133.
Dans cette section, le terme « UD4 ColdFusion » est utilisé en référence à la connectivité UltraDev 4.
Cette section contient les rubriques suivantes :
- « Exigences de connexion», page 147
- « Création d'une connexion UD4 ColdFusion normale», page 147
- « Création d'une connexion UD4 ColdFusion avancée (utilisateurs de Macintosh)», page 148
- « Modification ou suppression d'une connexion UD4 ColdFusion», page 149
Exigences de connexion
Avant de creer une connexion à une base de données UD4 ColdFusion, vousdezisposer des éléments suivants :
- un site Dreamweaver spécifique que le site contient uniquement des fischiers UltraDev 4. Pour plus d'informations, voir « Définition du dossier de traitement des pages dynamiques », page 140 ;
- une base de données installée sur votre ordinateur local ou sur un système auquel vous pouvez acceder en réseau ou par FTP ;
- un pilote de base de données approprié installé sur l'ordinaire exécutant ColdFusion ;
- une source de données ColdFusion définie pour la base de données. Pour plus d'informations, voir « Création d'une source de données ColdFusion», page 146.
Création d'une connexion UD4 ColdFusion normale
Cette section explique comment创建工作 une connexion à une base de données normale en utilisant la connectivité UltraDev 4.
La connectivité ColdFusion UltraDev 4 sur Macintosh ne prend pas en charge les procédures stockées dans les bases de données autres que SQL Server 7.0. Si vous travailliez sur un Macintosh et que vous pouze acceder à une Procedure enregistrée dans une base de données autre que SQL Server 7.0, créez une connexion ColdFusion avancée en utilisant JDBC pour étabir la connexion à la base de données au moment de la conception. Pour savoir comment procéder, voir « Création d'une connexion UD4 ColdFusion avancée (utilisateurs de Macintosh)», page 148.
Pour creer une connexion ColdFusion normale :
1 Ouvrez une page ColdFusion dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre > Bases de données).
2 Cliquez sur le bouton plus (+) dans le panneau et selectionnez Nom de la source de données dans le menu contextual.
3 S'il s'agit de la première connexion creée pour le site, Dreamweaver vous invite à taper votre nom d'utilisateur et votre mot de passer ColdFusion RDS (Remote Development Services).
Ensuite, Dreamweaver se connecte au serveur, recupere les sources de données ColdFusion et affiche la boîte de dialogue Nom de la source de données.
4 Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Pour obtenir des instructions, cliquez sur le bouton Aide de la boite de dialogue.
La nouvelle connexion s'affiche dans le panneau Bases de données.
Creation d'une connexion UD4 ColdFusion avancée (utilisateurs de Macintosh)
La connectivité UltraDev ColdFusion sur Macintosh ne prend pas en charge les procédures stockées dans des bases de données autres que SQL Server 7.0. Si vous travailliez sur un Macintosh et que vous poulez utiliser une Procedure enregistrée dans une base de données autre que SQL Server 7.0, vous doivent creer une connexion ColdFusion avancée.
Pour creer une connexion ColdFusion avancée dans Dreamweaver :
1 Ouvrez une page ColdFusion dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre > Bases de données).
2 Cliques sur le bouton plus (+) dans le panneau et seLECTIONnez Nom de la source de données - Avancé dans le menu contextual.
3 S'il s'agit de la première connexion createe pour le site, Dreamweaver you invite a taper voire nom d'utiliseur et voire mot de passse ColdFusion RDS (Remote Development Services).
Ensuite, Dreamweaver se connecte au serveur, récapère les DSN ColdFusion et affiche la boîte de dialogue Nom de la source de données - Avancé.
4 Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
La nouvelle connexion apparait dans le panneau Base de données.
Modification ou suppression d'une connexion UD4 ColdFusion
Lorsque vous creez une connexion à une base de données, Dreamweaver enregistre les informations de connexion dans un fisier, dans le sous-dossier Connexions du dossier racine local du site. Dreamweaver ne cree pas de connexion à une base de données pour votre application ColdFusion tant que vous n'avez pas defini de jeu d'enregistrements pour une page dans l'application (voir « Definition d'un jeu d'enregistrements », page 536). Dreamweaver écrit alors le code dans le fisier pour étabir la connexion et insère une directive d'inclusion dans votre page. Au moment de l'execution, le serveur insère le code de connexion dans le document.
Pourmettreàjourune connexion：
1 Ouvrez une page ColdFusion dans Dreamweaver MX, puis ouvrez le panneau Bases de données (Fenêtre > Bases de données).
Une liste de connexions s'affiche dans le panneau.
2 Cliquez avec le bouton droit de la souris (Windows) ou cliquez simultanément sur la souris et la touche Contrôle (Macintosh) sur la connexion etCHOisissez Modifier la connexion dans le menu contextualuel.
La boîte de dialogue que vous avez utilisé pour créé la connexion s'affiche.
3 Effectuez vos modifications, puis cliquez sur OK.
Dreamweaver met automatiquement à jour le fichier inclus, ce qui actualise automatiquement toutes les pages du site qui utilisent la connexion.
Pour supprimer une connexion :
1 Ouvrez une page ColdFusion dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre > Bases de données).
Une liste de connexions s'affiche dans le panneau.
2 Cliquez avec le bouton droit de la souris (Windows) ou cliquez simultanément sur la souris et la touche Contrôle (Macintosh) sur la connexion etCHOISEZ Supprimer la connexion dans le menu contextual.
La boîte de dialogue que vous avez utilisé pour créé la connexion s'affiche.
3 Confirmez la suppression.
Pour éviter les erreurs dues à la suppression d'une connexion, mettez à jour tous les yeux d'enregistrements qui utilisent l'ancienne connexion en double-cliquant sur le nom du jeu d'enregistrements dans le panneau Liaisons et en désissant une nouvelle connexion.
CHAPITRE 8
Connexions à des bases de données pour les développpeurs ASP.NET
Pour utiliser une base de données avec une application ASP.NET, vous doivent créé une connexion à une base de données dans Macromedia Dreamweaver MX. Ce chapitre vous indique la marche à suivre.
Remarque: si vous développpez des applications Microsoft Active Server Pages (ASP), voir « Connexions à des bases de données pour les développpeurs ASP», page 157.
Pour réaliser les opérations représentées dans ce chapitre, vous doivent avoir configuré une application ASP.NET (voir « Configuration d'une application Web », page 133). Une base de données doit également être installée sur votre ordinateur local ou sur un système auquel vous pouvez acceder en réseau ou par FTP.
Ce chapitre contient les sections suivantes :
- « Connexion à une base de données», page 151
- « Modification ou suppression d'une connexion à une base de données», page 154
Pour vous connecter à l'exemple de base de données installé avec Dreamweaver, voir l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver). Pour tout complément d'information sur les bases de données et les connexions aux bases de données, voir « Guide du débutant en base de données », page 695.
Connexion à une base de données
Cette section explique comment se connecter à une base de données dans le cadre du développement d'une application ASP.NET dans Dreamweaver MX.
Avant de vous connecter à une base de données, vous doivent��urer un fournisseur de BD OLE pour votre 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énérées pour SQL Server qui est fourni par la plate-forme .NET. Pour plus d'informations, voir « Obtention d'un fournisseur de BD OLE pour votre base de données », page 152.
Une fois le fournisseur de base de données installé, vous pouvez l'utiliser pour vous connecter à la base de données. Pour obtenir des instructions, voir les sections suivantes :
- « Création d'une connexion à une base de données dans Dreamweaver», page 152
- « Création d'une connexion en utilisant la boîte de dialogue Propriétés des liaisons de données», page 153
Obtention d'un fournisseur de BD OLE pour votre base de données
Une application ASP.NET doit étabir une connexion à une base de données via un fournisseur de BD OLE. Le fournisseur joue le role de traducteur pour permettre à l'application ASP.NET de communiquer avec la base de données. Pour plus d'informations sur la BD OLE et le role des fournisseurs de base de données, voir « Inter façge avec la base de données », page 702.
Si vous souhaitez vous connecter à une base de données Microsoft SQL Server, vous pouvez utiliser le fournisseur de données générées pour SQL Server qui est fourni par la plate-forme .NET. Ce fournisseur, très rapide et optimisé pour SQL Server, s'installe en même temps que la plate-forme .NET.
Si vous souhaitez vous connecter à une base de données autres que SQL Server, assurez-vous qu'un fournisseur de BD OLE pour votre base de données est installé sur l'ordinateur exécutant la plateforme .NET. Vous installez automatiquement le fournisseur de BD OLE pour Microsoft Access lorsque vous téléchargez et installez Microsoft Data Access Components (MDAC) 2.7 sur l'ordinateur.
Remarque : l'installation de MDAC 2.7 est hautement recommandée lorsque vous installez la structure .NET. Pour plus d'informations, voir « Installation d'un serveur d'application ASP.NET », page 136.
Vou puez telecharger les fournisseurs de BD OLE pour les bases de données Oracle9i et Oracle8i sur le site Web d'Oracle à l'adresse suivante: http://otn.oracle.com/software/tech/ windows/ole_db/content.html (enregistrement requis). Vou puez également acheter des fournisseurs de BD OLE auprès d'éditeurs tiers.
Une fois que vous disposez d'un fournisseur pour votre base de données, vous pouze l'utiliser pour creer des connexions à des bases de données dans Dreamweaver.
Creation d'une connexion à une base de données dans Dreamweaver
Après avoir obtenu un fournisseur de BD OLE pour votre base de données, vous pouze l'utiliser pour creer 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éé la connexion. Pour obtenir des instructions, voir « Création d'une connexion en utilisant la boîte de dialogue Propriétés des liaisons de données », page 153.
Pour creer une connexion a une base de données pour une application ASP.NET :
1 Ouvrez une page ASP.NET dans Dreamweaver, puis ouvrez le panneau Bases de données (Fenêtre > Bases de données).
Le panneau affiche les connexions définies pour ce site.
2 Cliquez sur le bouton plus (+) dans le panneau et selectionnez Connexion à la BD OLE ou Connexion SQL Server dans le menu contextual.
Remarque : selectionnez Connexion SQL Server uniquement si vous souhaitez vous connecter à une base de données Microsoft SQL Server.
La boîte de dialogue Connexion à la BD OLE ou Connexion SQL Server s'affiche.
3 Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
La nouvelle connexion s'affiche dans le panneau Bases de données.
Creation d'une connexion en utilisant la boîte de dialogue Propriétés des liaisons de données
Après avoir obtenu un fournisseur de BD OLE pour votre base de données (voir « Obtention d'un fournisseur de BD OLE pour votre base de données », page 152), vous pouvez creator 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.
Important : vous pouvez utiliser cette méthode uniquement si le fournisseur de BD OLE que vous souhaitez utiliser est installé sur le même ordinateur Windows que Dreamweaver.
Pour creer une connexion à une base de données en utilisant les propriétés de liaisons de données :
1 Ouvrez une page ASP.NET dans Dreamweaver, puis ouvre le panneau Bases de données (Fenêtre > Bases de données).
Le panneau affiche les connexions définies pour ce site.
2 Cliquez sur le bouton plus (+) dans le panneau et selectionnez Connexion à la BD OLE dans le menu contextualuel.
La boîte de dialogue Connexion à la BD OLE s'affiche.
3 Cliquez sur le bouton Générer.
La boîte de dialogue Propriétés des liaisons de données s'affiche. Cette boîte de dialogue Windows affiche les fournisseurs de BD OLE actuèlement installés sur l'ordinateur Windows exécutant Dreamweaver.
4 Complétez la boîte de dialogue Propriétés des liaisons de données, puis cliquez sur OK.
Dreamweaver insère une chaine de connexion dans la boîte de dialogue Connexion à la BD OLE.
5 Cliquez sur Tester.
Dreamweaver tente d'établier la connexion à la base de données. Si la connexion échoue, vérifie la chaîne de connexion. Si la connexion n'aboutit toujours pas, vérifie les paramètres du dossier utilisé par Dreamweaver pour Traitser les pages dynamiques (voir « Définition du dossier de traitement des pages dynamiques », page 140).
6 Cliquez sur OK.
La nouvelle connexion apparait dans le panneau Base de données.
Exemples de paramètres de connexion à la BD OLE pour ASP.NET
Une chaîne de connexion à la BD OLE combine toutes les informations dont votre application ASP.NET a besoin pour établier une connexion à 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 leur serveur d'application.
Dreamweaver you fournit des modèle de chaînes pour creer des chaînes de connexion à la BD OLE pour les applications ASP.NET (voir « Création d'une connexion à une base de données dans Dreamweaver», page 152). Pour creer une chaîne de connexion, vous devez replacer les espaces réservés dans le modele par les valeurs de paramètres requises. Cette section offre des exemple de paramètres pour Microsoft Access et les bases de données SQL Server.
Remarque : pour connaître les valeurs de paramètres spécifique aux autres bases de données, reportez-vous à la documentation de votre fournisseur ou contactez votre administrateur système.
Cas 1: vous dispose de la structure .NET sur votre ordinateur local et vous souhaitez vous connecter à une base de données Microsoft Access appelée sdSchool.mdb qui se trouve dans le dossier suivant sur votre disque dur : c:\Inetpub\wwwroot\SkyDiveSchool\Data\sdSchool.mdb. Voici les paramètres requis pour créé cette chaine de connexion :
Provider=Microsoft.Jet.OLEDB.4.0;
Data Source=c:\Inetpub\wwwroot\SkyDiveSchool\Data\sdSchool.mdb;
Cas 2 : 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 requis pour creer la chaîne de connexion :
Provider=Microsoft.Jet.OLEDB.4.0;
Data Source=d:\users\tara\projects\MtnDrivingSchool\databmtnSchool.mdb;
Cas 3: supposons que vous utilisiez la structure .NET sur un serveur de développement en réseau appelé Savant et que vous souhaitiez vous connecter à une base de données Microsoft SQL Server appelée pubs sur le serveur. Notre nom d'utilisateur SQL Server est "sa" et il n'este pas de mot de passer. Si vous utilisez le fournisseur de données generé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 creer la chaine de connexion :
Data Source=Savant;
Modification ou suppression d'une connexion à une base de données
Lorsque vous creez une connexion à une base de données, Dreamweaver enregistre les informations de connexion dans un fisier, dans le sous-dossier Connexions du dossier racine local du site. Dreamweaver ne cree pas de connexion à une base de données pour votre application ASP.NET tant que vous n'avez pas defini de jeu d'enregistements pour une page dans l'application (voir « Definition d'un jeu d'enregistements », page 536). Dreamweaver écrit alors le code dans le fisier pour étabir la connexion et insere une directive d'inclusion dans votre page. Au moment de l'exécution, le serveur insère le code de connexion dans le document.
Pourmettreàjouruneconnexion：
1 Ouvrez une page ASP.NET dans Dreamweaver, puis ouvre le panneau Bases de données (Fenêtre > Bases de données).
Une liste de connexions s'affiche dans le panneau.
2 Cliquez avec le bouton droit de la souris (Windows) ou cliquez simultanément sur la souris et la touche Contrôle (Macintosh) sur la connexion etCHOISEZ Modifier la connexion dans le menu contextual.
La boîte de dialogue que vous avez utilisé pour créé la connexion s'affiche.
3 Effectuez vos modifications puis cliquez sur OK.
Dreamweaver met automatiquement à jour le fichier inclus, ce qui actualise automatiquement toutes les pages du site qui utilisent la connexion.
Si vous renommez une connexion, mettez à jour tous les yeux d'enregistrements utilisant l'ancien nom de connexion enclinquant deux fois sur chaque jeu dans le panneau Liaisons de données et enCHOISILLANT le nouveau nom de connexion dans la boite de dialogue Jeu d'enregistrements.
Pour supprimer une connexion :
1 Ouvrez une page ASP.NET dans Dreamweaver, puis ouvre le panneau Bases de données (Fenêtre > Bases de données).
Une listede connexions s'affiche dans le panneau.
2 Cliquez avec le bouton droit de la souris (Windows) ou cliquez simultanement sur la souris et la touche Contrôle (Macintosh) sur la connexion etCHOISSEZ Supprimer la connexion dans le menu contextualuel.
La boîte de dialogue que vous avez utilisé pour créé la connexion s'affiche.
3 Confirmez la suppression.
Pour éviter les erreurs consécutives à la suppression d'une connexion, mettez à jour chaque jeu d'enregistements utilisant l'ancienne connexion enclistuant deux fois sur le nom du jeu dans le panneau Liaisons de données et enCHOISSSANT une nouvelle connexion dans la boite de dialogue Jeu d'enregistements.
CHAPITRE 9
Connexions à des bases de données pour les développpeurs ASP
Pour utiliser une base de données avec une application ASP (Active Server Pages) de Microsoft, vous doivent creer une connexion à une base de données dans Macromedia Dreamweaver MX. Ce chapitre vous indique la marche à suivre.
Remarque : si vous développpez des applications ASP.NET, voir « Connexions à des bases de données pour les développpeurs ASP.NET », page 151.
Pour réaliser les opérations représentées dans ce chapitre, vous doivent avoir configuré une application ASP (voir « Configuration d'une application Web », page 133). Une base de données doit également être installée sur toute ordinateur local ou sur un système auquel vous pouvez acceder en réseau ou par FTP.
Ce chapitre contient les sections suivantes :
- « Description des connexions aux bases de données ASP», page 158
- « Création d'une connexion DSN », page 158
- « Création d'une connexion sans DSN», page 161
- « Connexion à une base de données via un fournisseur d'accès», page 164
- « Modification ou suppression d'une connexion à une base de données», page 167
Pour vous connecter à l'exemple de base de données installé avec Dreamweaver, voir l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver). Pour tout complément d'information sur les bases de données et les connexions aux bases de données, voir Annexe A, « Guide du début en base de données », page 695.
Description 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 BD OLE. Le pilote ou le fournisseur joue le role de traducteur pour permettre à l'application Web de communiquer avec la base de données. Pour plus d'informations sur le role des pilotes de base de données, voir « Interfacage avec la base de données », page 702. 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 | Pilote de base de données |
| Microsoft Access | Pilote Microsoft Access (ODBC) |
| Microsoft SQL Server | Pilote Microsoft SQL Server (ODBC)
Fournisseur Microsoft SQL Server (OLE DB) |
| Oracle | Pilote Microsoft Oracle (ODBC)
Fournisseur Oracle pour OLE DB |
Vou puez 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.
Un DSN est un identificateur formé d'un seul mot (Acme 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. Pour obtenir des instructions, voir « Création d'une connexion DSN», page 158.
Une chaîne de connexion est une expression saisie à la main qui identifie la base de données et fournit les informations requisées pour s'y connecter. Exemple :
Driver= {SQL Server};Server=Socrates;Database=AcmeMktg;UID=wiley;PWD=roadrunner
Voudevasutiliser une chaine de connexion si vous youvessnectez par l'un des moyens suivants :
- Un fournisseur de BD OLE
- Un pilote ODBC qui n'est pas installé sur un système Windows
Pour obtenir des instructions détaillées, voir :
- « Création d'une connexion sans DSN», page 161
- « Connexion à une base de données via un fournisseur d'accès», page 164
Remarque : vous pouvez également utiliser une chaine 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.
Création d'une connexion DSN
Voupeuutiliser un DSN (Data Source Name, nom de source de données) pour creer une connexion ODBC entre voe application Web et voe base de donnees.Un DSN est un nom contenant tous les parametres necessaires pour etablr la connexion a une base de donnees precise à l'aide d'un pilote ODBC. Pour plus d'informations, voir « Description des DSN », page 717.
Remarque : comme vous pouvez uniquement spécifique un pilote ODBC dans un DSN, vous nevez utiliser une chaîne de connexion si vous souhaitez passer par un fournisseur de BD OLE. Pour plus d'informations, voir « Création d'une connexion OLE DB », page 163.
Voupeuz definir le DSN sur un ordinateur Windows local ou distant. Les rubriques suivantes décrivent les méthodes permettant de créé ces deux types de connexions :
- « Création d'une connexion en utilisant un DSN local», page 159
- « Création d'une connexion en utilisant un DSN distant», page 160
Création d'une connexion en utilisant un DSN local
Vou puez utiliser un DSN défini localement pour creer une connexion à une base de données dans Dreamweaver. Si vous souhaitez utiliser un DSN local, le DSN doit être défini sur l'ordinateur Windows exécutant Dreamweaver.
Pour creer une connexion à une base de données avec un DSN défini locality :
1 Définissez un DSN sur l'ordinateur Windows exécutant Dreamweaver.
Pour obtenir des instructions, voir « Création d'un DSN », page 717.
2 Ouvrez une page ASP dans Dreamweaver, puis ouvre le panneau Bases de données (Fenêtre > Bases de données).
Dreamweaver affiche toutes les connexions définies pour le site.
3 Cliquez sur le bouton plus (+) dans le panneau et seLECTIONnez Nom de la source de données (DSN) dans le menu contextual.
La boîte de dialogue Nom de la source de données (DSN) s'affiche.
4 Tapez le nom de la nouvelle connexion.
Remarque: n'utilise pas d'espaces ni de caractères spéciaux dans le nom.
5 Sélectionnéz l'options Utilisation du DSN local en bas de la boîte de dialogue.
6 Sélectionnez le DSN que vous souhaitez utiliser dans le menu contextuel Nom de la source de données (DSN).
Si vous voulez utiliser un DSN local mais que vous n'en ave pas encore définir, cliquez sur Définir pour ouvrir l'administrateur de sources de données ODBC Windows. Pour obtenir des instructions, voir « Création d'une connexion DSN», page 158.
7 Au besoin, renseignez les zones Nom d'utilisateur et Mot de passer.
8 Vous pouvez limiter le nombre d' éléments de base de données récapérés par Dreamweaver au moment de la conception enclinquant sur Avance puis en saississant un nom de schéma ou de catalogue.
Pour plus d'informations, voir « Limitation des informations de base de données affichées dans Dreamweaver», page 513.
Remarque : vous ne pouvez pas creer de schema ou de catalogue dans Microsoft Access.
9 Cliquez sur Tester.
Dreamweaver tente d'établier la connexion à la base de données. Si la connexion échoue, vérifie le DSN. Si la connexion n'aboutit toujours pas, vérifie les paramètres du dossier utilisé par Dreamweaver pour Traitser les pages dynamiques (voir « Définition du dossier de traitement des pages dynamiques », page 140).
10 Cliquez sur OK.
La nouvelle connexion s'affiche dans le panneau Bases de données.
Création d'une connexion en utilisant un DSN distant
Voupeus utilise un DSN defini sur un ordinateur distant pour creer une connexion a une base de données dans Dreamweaver. Si you souhaitez utilise un DSN distant, celui-ci doit etre defini sur l'ordinateur Windows executant yourserveur d'application (probablement IIS).
Pour creer une connexion a une base de donnees avec un DSN defini a distance :
1 Définisse un DSN sur le système distant exécutant votre serveur d'application.
Pour obtenir des instructions, voir « Création d'un DSN », page 717.
2 Ouvrez une page ASP dans Dreamweaver, puis ouvre le panneau Bases de données (Fenêtre > Bases de données).
Dreamweaver affiche toutes les connexions définies pour le site.
3 Cliquez sur le bouton plus (+) dans le panneau etCHOISSEZ Nom de la source de données (DSN) dans le menu contextualuel.
La boîte de dialogue Nom de la source de données (DSN) s'affiche.
4 Tapez le nom de la nouvelle connexion.
Remarque : n'utilise pas d'espaces ni de caractères spéciaux dans le nom.
5 Sélectionnez l'option Utilisation de la DSN sur le serveur d'évaluation en bas de la boîte de dialogue.
Les utilisateurs Macintosh peuvent ignore cette étape car toutes les connexions à des bases de données utilisent des DSN sur le serveur d'application.
6 Tapez le DSN.
Vou puez cliquer sur le bouton DSN pour étabir la connexion au serveur et faire votrechioix parmi les DSN qui y sont définis.
7 Au besoin, renseignez les zones Nom d'utilisateur et Mot de passer.
8 Vous pouvez limiter le nombre d' éléments de base de données récapérés par Dreamweaver au moment de la conception enclinquant sur Avancé puis en saississant un nom de schéma ou de catalogue.
Pour plus d'informations, voir « Limitation des informations de base de données affichées dans Dreamweaver», page 513.
Remarque : vous ne pouvez pas creer de schema ou de catalogue dans Microsoft Access.
9 Cliquez sur Tester.
Dreamweaveressaie de se connecter à la base de données. Si la connexion échoue,verifiez le DSN. Si la connexion n'aboutit tousjours pas,vérifiez les parametes du dossier utilisé par Dreamweaver pour Traitser les pages dynamiques (voir « Definition du dossier de traitement des pages dynamiques »,page 140).
10 Cliquez sur OK.
La nouvelle connexion apparait dans le panneau Base de données.
Création d'une connexion sans DSN
Voupez utiliser une connexion sans DSN pour creer une connexion ODBC ou OLE DB entre voe application Web et voe base de donnees.
Vous devez utiliser une chaîne de connexion pour créé la connexion. Une chaîne de connexion regroupe toutes les informations dont votre application Web a besoin sur le serveur 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.
La chaîne de connexion pourrait ressembler à ceci :
Driver = {MicrosoftAccessDriver ( .mdb) ；DBQ=C:\Inetpub\wwwroot\Academy\curriculum.mdb
ou a cela :
Driver= {SQL Server}; Server=Socrate; Database=CentreMed; UID=mwelby;PWD=realme
Cette section contient les rubriques suivantes :
- « Création d'une connexion à une base de données avec une chaîne de connexion», page 161
- « Définition d'une chaîne de connexion», page 162
- « Création d'une connexion OLE DB», page 163
Creation d'une connexion à une base de données avec une chaine de connexion
Vou puez utiliser une chaine de connexion pour creer une connexion à une base de données entre votre application Web et leur base de données.
Pour creer une connexion sans DSN :
1 Ouvrez une page ASP dans Dreamweaver, puis ouvre le panneau Bases de données (Fenêtre > Bases de données).
Dreamweaver affiche toutes les connexions définies pour le site, s'il y en a.
2 Cliquez sur le bouton plus (+) dans le panneau et selectionnez Chaine de connexion personnalisée dans le menu contextual.
La boîte de dialogue Châne de connexion personnalisée s'affiche comme suit.
3 Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Pour plus d'informations,procededezde l'une des manieres suivantes：
- Appuyez sur le bouton Aide dans la boîte de dialogue.
Voir « Définition d'une chaîne de connexion», page 162.
Définition d'une chaîne de connexion
Une chaine de connexion regroupe toutes les informations dont votre application Web a besoin sur le serveur pour se connecter à une base de données. Dreamweaver insère cette chaine dans vos scripts de page cote serveur afin que ceux-ci soient ultérieurement traités par leur 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 :
Fournisseur (Provider) indique le fournisseur de BD OLE pour votre base de données. Voici par exemple des paramètres de fournisseurs BD OLE courants pour les bases de données Access, SQL Server et Oracle, respectivement :
Provider=Microsoft.Jet.0LEDB.4.0;...
Provider=SQLOLEDB;...
Provider=Ora0LEDB;...
Pour connaître le paramètre de votre fournisseur de BD OLE, reportez-vous à 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 BD OLE par défaut pour ODBC sera utilisé et vous devrez préciser un pilote ODBC approprié pour votre base de données.
Pilote (Driver) indique le pilote ODBC à utiliser si vous ne spécifie pas de fournisseur de BD OLE pour votre base de données.
Serveur (Server) indique le serveur hébergeant la base de données SQL Server si vous application Web est executée sur un serveur différent.
Base de données (Database) 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éé 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 passer de l'utilisateur.
DSN est le nom de la source de données, si toute fois vous en utilisez une. Selon la façon dont vous définisse 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éfinisse les autres paramètres lorsque vous creez le DSN (voir « Création d'un DSN », page 717).
Il est également possible que ces paramètres aient un nom ou une utilisation différentes. Pour plus d'informations, reportez-vous à 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éé une connexion ODBC à une base de données Access appelée arbres.mdb :
Driver = {MicrosoftAccessDriver ( .mdb) ；DBQ C:\Inetpub\wwwroot\Recherche\arbres.mdb
Voici un exemple de chaine de connexion créé 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 or1ando8
Creation d'une connexion OLE DB
Voupez utilise un fournisseur de BD OLE pour communiquer avec votre base de données. Le fait de creer une connexion OLE DB directe peut augmenter la vitesse de connexion en eliminating l'intermediaire ODBC entre votre application Web et la base de données. En utilisant un fournisseur de BD OLE spécifique à la base de données, vous eliminez l'intermediaire ODBC.
Si vous ne précise pas de fournisseur de BD OLE pour votre base de données, ASP utilisera le fournisseur de BD OLE par défaut pour les pilotes ODBC pour communiquer avec un pilote ODBC, lequel communiquera à son tour avec la base de données.
OLE DB est disponible uniquement sous Windows NT, 2000 ou XP.
Différents fournisseurs OLE DB existent pour différentes bases de données. Vous pouvez obtenir des fournisseurs OLE DB pour Microsoft Access et SQL Server en téléchargeant et en installerant le calculiel Microsoft Data Access Components (MDAC) 2.5 et 2.6 sur l'ordinateur Windows exécutant IIS ou PWS (si nécessaire). Vous pouvez télécharger gratuitement le calculiel MDAC sur le site Web de Microsoft à l'adresse suivante: http://www.microsoft.com/data/download.htm.
Remarque: assurez-vous que vous dispose de MDAC 2.5 avant d'installer MDAC 2.6.
Vou puez telecharger les fournisseurs de BD OLE pour les bases de données Oracle9i et Oracle8i sur le site Web d'Oracle à l'adresse suivante: http://otn.Oracle.com/software/tech/ windows/ole_db/content.html (enregistrement requis).
Pour creer une connexion OLE DB dans Dreamweaver MX, vous devez inclure un parametre Provider (Fournisseur) dans une chaine de connexion. Voici par exemple des parametes de fournisseurs OLE DB courants pour les bases de données Access, SQL Server et Oracle, respectivement :
Provider=Microsoft.Jet.0LEDB.4.0;...
Provider=SQLOLEDB;...
Provider=OraOLEDB;...
Pour connaître le paramètre de votre fournisseur OLE DB, reportez-vous à la documentation du fournisseur de votre pilote ou consultez votre administrateur système.
Connexion à une base de données via un fournisseur d'accès
Si vous étés un développement ASP travaillant avec un fournisseur d'accès Internet, il est probable que vous ne connaissiez pas le chemin physique des fischiers que vous chargez, y compris celui de vos fischiers de base de données. Si votre fournisseur d'accès ne définit pas de DSN pour vous ou ne le fait pasASFrapidement,vousdeveztrouverunautre moyendecrerdesconnexionsa vos fischiers de base de données.Vous pouvez creer une connexion sans DSN a un fichier de base de données,mais une telle connexion n'est possible que si vous connaisssez le chemin d'acces physique du fichier de base de données sur le serveur du fournisseur d'accès.
Cette section explique comment obtenir le chemin d'accès physique d'un fichier de base de données sur un serveur en utilisant la méthode MapPath de l'objet serveur ASP. Cette section contient les rubriques suivantes :
- « Description des chemins d'accès physiques et virtuels», page 164
- « Recherche du chemin d'accès physique d'un fichier en utilisant le chemin virtuel», page 165
- « Utilisation d'un chemin d'accès virtuel pour établier une connexion à une base de données », page 165
Remarque : les techniques presentées dans ce chapitre sont uniquement valables si votre base de données est basée sur un:fichier, telle que la base de données Microsoft Access, qui stocke les données dans un:fichier .mdb.
Description des chemins d'accès physiques et virtuels
Lorsque you chargez vos fichiers sur un serveur distant en utilisant Dreamweaver, ces derniers sont places 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 dé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.
Recherche du chemin d'accès physique d'un fichier en utilisant le chemin virtuel
Si vous travailliez 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 fournissant un hôte FTP, parfois un réseau hôte, ainsi qu'un nom de connexion et un mot de passer. Ils vous indiquent également une URL pour visualiser vos pages sur Internet, telle que www.plutoserve.com/jsmith/.
Si vous connaissiez 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 connaissiez le chemin d'accès virtuel, vous pouvez obtenir le chemin d'accès physique d'un fichier sur le serveur en utilisant la méthode MapPath.
Celle-ci utilise notamment 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 permettra d'obtenir son chemin d'accès physique :
Server.MapPath("/jsmith/index.htm")
Vou pouvez utiliser la méthode MapPath comme suit :
1 Ouvrez une page ASP dans Dreamweaver et bascules en mode Code (Affichage > Code).
2 Saisissez l'expression suivante dans le code HTML de la page.
<%Response.Write(stringvariable) % >
3 Utilize la méthode MapPath afin d'obtenir une valeur pour l'argument stringvariable.
Example :
<% Response.Write(Server.MapPath("/jsmith/index.htm")) %>
4 Basculez en mode Creation (Affichage > Creation) 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. En utilisant l'exemple fourni dans cette section, la page affiche le chemin d'accès physique suivant :
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm
Pour plus d'informations sur la méthode MapPath, consultez la documentation en ligne fournie avec Microsoft IIS ou PWS.
Utilisation d'un chemin d'accès virtuel pour étabir une connexion à une base de données
Pour écrire une châne de connexion sans DSN dans un fisier de base de données situé sur un serveur distant, vous doivent connaître le chemin d'accès physique au fisier. Par exemple, voici une châne de connexion sans DSN typique pour une base de données Microsoft Access :
Driver = {Microsoft Access Driver ( .mdb) }; DBQ=c:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb
Si vous ne connaissiez pas le chemin d'accès physique de vos fichiers sur le serveur distant, vous pouvez l'obtenir en utilisant la méthode MapPath dans votre chaîne de connexion.
Pour creer une connexion sans DSN à l'aide de la methode MapPath :
1 Chargez le fichier de base de données sur le serveur distant.
Notez son chemin d'accès virtuel (par exemple, /jsmith/data/statistics.mdb).
2 Ouvrez une page ASP dans Dreamweaver, puis ouvre le panneau Bases de données (Fenêtre > Bases de données).
Dreamweaver affiche toutes les connexions définies pour le site.
3 Cliques sur le bouton plus (+) dans le panneau et selectionnez Chaine de connexion personnalisée dans le menu contextual.
4 Tapez le nom de la nouvelle connexion.
Remarque: n'utilise pas d'espaces ni de caractères spéciaux dans le nom.
5 Tapez la chaine 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 chaine 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é 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éé :
Driver = {Microsoft Access Driver ( .mdb) }; DBQ=C:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb
Si vous utilisez JavaScript, l'expression est identique, à ceci pris que vous utilisez 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électionnéz l'options Utilisation du pilote sur le serveur d'évaluation.
Les utilisateurs Macintosh peuvent ignore cette étape car toutes les connexions aux bases de données utilisent le serveur d'application.
7 Cliquez sur Tester.
Dreamweaveressaie de se connecter à la base de données. Si la connexion échoue, vérifie la chaîne de connexion.
Si la connexion n'aboutit toujours pas, contactez votre fournisseur d'accès pour vous assurer que le pilote de base de données que vous avez spécifique 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 doivent utiliser Microsoft Access Driver, version 4.0 ou ultérieure.
8 Cliquez sur OK.
La nouvelle connexion apparait dans le panneau Base de données.
9 Mettez à jour la connexion de base de données des pages dynamiques existantes et utilisez la nouvelle connexion avec toutes les nouvelles pages que vous créerez.
Pourmettrea jourlacconnexiond'unepage dynamique,ouvrela page dansDreamweaver, double-cliquezurle nom dujeud'enregistements dans le panneau Liaison ou Comportements de serveur,et selectionnezlaconnexionqueyouvenezdecrier dansle menu deroulantConnexion.
Modification ou suppression d'une connexion à une base de données
Lorsque vous creez une connexion à une base de données, Dreamweaver enregistre les informations de connexion dans un fisier, dans le sous-dossier Connexions du dossier racine local du site. Dreamweaver ne cree pas de connexion à la base de données pour votre application ASP tant que vous n'avez pas defini de jeu d'enregistements pour une page dans l'application (voir « Definition d'un jeu d'enregistements », page 536). Dreamweaver erit alors le code dans le fisier pour étabir la connexion et insere une directive d'inclusion dans votre page. Au moment de l'execution, le serveur insere le code de connexion dans le document.
Pourmettreàjouruneconnexion：
1 Ouvrez une page ASP dans Dreamweaver, puis ouvre le panneau Bases de données (Fenêtre > Bases de données).
Une liste de connexions s'affiche dans le panneau.
2 Cliquez avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contrôle (Macintosh) sur la connexion etCHOISSEZ Modifier la connexion dans le menu contextualuel, qui se presente comme suit.
La boîte de dialogue que vous avez utilisé pour créé la connexion s'affiche.
3 Effectuez vos modifications puis cliquez sur OK.
Dreamweaver met automatiquement à jour le fichier inclus, ce qui actualise automatiquement toutes les pages du site qui utilisent la connexion.
Pour supprimer une connexion :
1 Ouvrez une page ASP dans Dreamweaver, puis ouvre le panneau Bases de données (Fenêtre > Bases de données).
Une listede connexions s'affiche dans le panneau.
2 Cliquez avec le bouton droit de la souris (Windows) ou cliquez simultanément sur la souris et la touche Contrôle (Macintosh) sur la connexion etCHOisissez Supprimer la connexion dans le menu contextualuel.
La boîte de dialogue que vous avez utilisé pour créé la connexion s'affiche.
3 Confirmez la suppression.
Pour éviter les erreurs dues à la suppression d'une connexion, mettez à jour tous les yeux d'enregistrements qui utilisent l'ancienne connexion en double-cliquant sur le nom du jeu d'enregistrements dans le panneau Liaisons et en désissant une nouvelle connexion.
CHAPITRE 10
Connexions à des bases de données pour les développpeurs JSP
Pour utiliser une base de données avec une application JSP (JavaServer Pages), vous doivent créé une connexion à une base de données dans Macromedia Dreamweaver MX. Ce chapitre vous indique la marche à suivre.
Pour réaliser les opérations représentées dans ce chapitre, vous doivent avoir configuré une application JSP (voir « Configuration d'une application Web », page 133). Une base de données doit également être installée sur votre ordinateur local ou sur un système à partir duquel vous dispose d'un accès réseau ou FTP.
Ce chapitre contient les sections suivantes :
- « Description des connexions JSP», page 169
- « Connexion à une base de données», page 170
- « Connexion via un pilote ODBC», page 172
- « Modification ou suppression d'une connexion à une base de données», page 175
Pour vous connecter à l'exemple de base de données installé avec Dreamweaver, voir l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver). Pour tout complément d'information sur les bases de données et les connexions aux bases de données, voir « Guide du début en base de données », page 695.
Description des connexions JSP
Une application JSP doit être connectée à une base de données via un pilote JDBC. Le pilote joue le role de traducteur pour permettre à l'application JSP de communiquer avec la base de données. Pour plus d'informations sur JDBC et le role des pilotes de base de données, voir « Interfacage avec la base de données », page 702.
Voudevez indiquercertaines valeurs de parametes pour vous connecter via vouré pilote JDBC. Pour plus d'informations,voir « A propos des parametes de connexion JDBC»,page 171.Pour connaître les valeurs de parametes spécifiques à votre pilote, reportez-vous à la documentation de leur fournisseur ou contactez libre administrateur système.
Voupe ouvez également utiliser un pilote ODBC (et également un DSN Windows) si vous disposez d'un pilote JDBC-ODBC Bridge. Pour plus d'informations, voir « Connexion via un pilote ODBC», page 172.
Connexion à une base de données
Cette section explique comment se connecter à une base de données dans le cadre du développement d'une application JSP dans Dreamweaver MX.
Pour réaliser les opérations générées dans cette section, un serveur d'application JSP fonctionne sur un ordinateur local ou distant. (Pour la plupart des utilisateurs Macintosh et un grand nombre d'équipes de développement, le serveur d'application JSP fonctionne sur un serveur de développement distinct.) Pour plus d'informations, voir « Configuration d'une application Web», page 133.
Avant de vous connecter à une base de données, vous doivent disposer d'un pilote JDBC pour celleci.
Une fois installé, le pilote vous permet de vous connecter à la base de données. Pour obtenir des instructions, voir « Création d'une connexion à une base de données pour JSP», page 170.
Obtention 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 creer 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 obtaining un pilote JDBC pour Microsoft SQL Server à partir du site i-net software à l'adresse suivante : http://www.inetsoftware.de/English/Produkte/JDBC_Overview/default.htm.
Sun fournit également une base de données de recherche des pilotes JDBC et de leurs fournisseurs sur son site Web à l'adresse suivant: http://industry.java.sun.com/products/jdbc/drivers.
Une fois que vous disposez d'un pilote JDBC pour votre base de données, vous pouvez créé une connexion à une base de données.
Creation d'une connexion à une base de données pour 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éé une connexion à une base de données dans Dreamweaver.
Pour creer une connexion à une base de données pour JSP :
1 Ouvrez une page JSP dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre > Bases de données).
Dreamweaver affiche les connexions définies pour le site.
2 Cliquez sur le bouton plus (+) et choisissez votre pilote dans le menu contextual.
Si vous pilote ne figure pas dans la liste, choisissez Connexion JDBC personnalisée.
Une boîte de dialogue de connexion s'affiche.
3 Saisissez les paramètres de connexion dans la boîte de dialogue Connexion.
Pour plus d'informations, voir « A propos des paramètres de connexion JDBC», page 171.
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 l'options Utilisation du pilote sur cette machine.
- Si vous pilote JDBC n'est pas installé sur le même ordinaire que Dreamweaver, sélectionnez l'option Utilisation du pilote sur le serveur d'évaluation.
Les utilisateurs Macintosh peuvent ignore cette étape car toutes les connexions aux bases de données utilisent le serveur d'application.
5 Cliquez sur Tester.
Dreamweaver tente d'étabrir la connexion à la base de données. Si la connexion échoue, vérifie les paramètres de connexion. Si la connexion n'aboutit toujours pas, vérifie les paramètres du dossier utilisé par Dreamweaver pour Traits des pages dynamiques (voir « Définition du dossier de traitement des pages dynamiques », page 140).
6 Cliquez sur OK.
La nouvelle connexion s'affiche dans le panneau Bases de données.
A propos des paramètres de connexion JDBC
Les connexions JDBC se compose généralement de quatre paramêtres : le pilote, le nom d'utilisateur, le mot de passer 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 pilote.
Cette section explique comment définir des paramètres de connexion dans 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 etCHOISEZ le pilote Oracle Thin Driver (Oracle) dans le menu contextual. La boite de dialogue suivante, en partie renseignee, s'affiche :
Saisissez un nom de connexion et remplacez les espaces réservés (entre parentheses) par des paramètres de connexion valides. Pour [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 ave plus d'une base de données Oracle sur le même système, utilisez le SID pour les fournier.
Par exemple, si vous 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 :
Connexion via un pilote ODBC
Bien que les applications JSP communiquent en原則 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. L'utilisation d'un pilote ODBC vous permet d'utiliser un DSN Windows, ce qui simplifie le processus de création de la connexion. Le pilote de pont joue le role 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 présente deux grands avantages. Tout d'abord, vous pouvez utiliser les pilotes ODBC Gratis et de Microsoft. Ensuite, vous pouvez utiliser un DSN pour simplifier le processus de création de la connexion.
Voudevezvousconformerauxexigencessuivantes pouretabliruneconnexionviaun pilote ODBC:
- Voitr serveur d'application JSP doit fonctionner sur un ordinateur executant 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. Pour plus d'informations, voir « Vérification du pilote ODBC», page 173.
- Un pilote de pont JDBC-ODBC doit être installé sur l'ordinateur Windows qui héberge le serveur d'application. Pour plus d'informations, voir « Installation du pilote JDBC-ODBC Bridge de Sun», page 173.
Si ces conditions sont respectées, vous pouvez étabir une connexion via un pilote ODBC. Pour obtenir des instructions, voir « Création d'une connexion ODBC», page 173.
Vérification du pilote ODBC
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. Pour savoir si un pilote ODBC est installé, voir « Affichage des pilotes ODBC installés sur un système Windows», page 705. Si un pilote adapté n'est pas installé, vous pouvez télécharger et installer Microsoft Data Access Components (MDAC) 2.5 et 2.6 sur l'ordinateur exécutant le serveur d'application JSP. Vous pouvez télécharger gratuitement MDAC à partir du site Web de Microsoft à l'adresse suivante : http://www.microsoft.com/data/download.htm. Ces logiciels contiensent les derniers pilotes ODBC de Microsoft.
Remarque : installez MDAC 2.5 avant d'installer MDAC 2.6.
Si vous disposez d'un pilote ODBC pour votre base de données, vous pouvez installer un pilote JDBC-ODBC.
Installation du pilote JDBC-ODBC Bridge de Sun
Pour vous connecter via un pilote ODBC, vous devez installer le pilote JDBC-ODBC Bridge de Sun sur l'ordinateur Windows executant le serveur d'application JSP. Ce pilote est fourni avec Java 2 SDK de Sun, Standard Edition, pour Windows.
Pour savoir si vous disposez déjà de Java 2 SDK avec le pilote, vérifie dans les dossiers c:\jdk1.2.2 ou c:\jdk1.3 de votre disque dur.
Remarque: Java 1.2.2 et 1.3 sont les mêmes que Java 2.
Si vous ne disposez pas de SDK, vous pouvez le télécharger à partir du site Web de Sun à l'adresse suivante : http://java.sun.com/j2se/ et l'instructor. Le pilote s'installe automatiquement lorsque vous installez le SDK.
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 conscience 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, voir l'article 12409 sur le centre de support Macromedia à l'adresse suivante: http://www.macromedia.com/go/jdbc-odbc_problems.
Après avoir installé le pilote de pont, vous pouze creator la connexion à une base de données.
Creation d'une connexion ODBC
Avant de vous connecter via un pilote ODBC, assurez-vous que les pilotes ODBC et JDBC-ODBC Bridge de Sun sont installés sur l'ordinateur Windows executant le serveur d'application JSP.
Pour vous connecter à JSP via un pilote ODBC :
1 Définisse un DSN sur le système Windows hébergeant votre serveur d'application.
Pour obtenir des instructions, voir « Création d'un DSN », page 717.
2 Ouvrez une page JSP dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre > Bases de données).
Le panneau affiche les connexions définies pour ce site.
3 Cliquez sur le bouton plus (+) dans le panneau et choisissez Pilote JDBC-ODBC Sun (Base de données ODBC) dans le menu contextuel.
La boîte de dialogue Pilote JDBC-ODBC Sun (Base de données ODBC) s'affiche.
4 Tapez le nom de la nouvelle connexion.
Remarque : n'utilise pas d'espaces ni de caractères spéciaux dans le nom.
5 Remplacez l'espace réservé [odbc dsn] dans le champ URL par le DSN que vous avez définir à l'etape 1.
Dans le champ URL, vous devez pouvoir dire ce qui suit :
jdbc:odbc:myDSN
6 Indiquez le nom d'utilisateur et le mot de passage pour acceder à la base de données.
Si vous n'avez pas besoin de nom d'utilisateur ou de mot de passer, 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 passer pour acceder à la base de données, saisissez les valeurs de paramétres suivantes :
Pilot:sun.jdbc.odbc.JdbcOdbcDriver
URL: jdbc:odbc:Acme
Nom d'utilisateur :
Mot de passer :
7 Indiquez l'emplacement du pilote JDBC-ODBC Bridge.
-
Si le pilote est installé sur le même ordinateur que Dreamweaver, sélectionnez l'option Utilisation du pilote sur cette machine.
-
Si le pilote n'est pas installé sur le même ordinateur que Dreamweaver, sélectionnez l'option Utilisation du pilote sur le serveur d'évaluation.
Les utilisateurs Macintosh peuvent ignore cette étape car toutes les connexions à des bases de données utilisent le serveur d'application.
8 Cliquez sur Tester.
Dreamweaveressaie de se connecter à la base de données. Si la connexion échoue, vérifie le DSN et les autres paramètres de connexion. Si la connexion n'aboutit tousjours pas, vérifie les paramètres du dossier utilisé par Dreamweaver pour traiter les pages dynamiques (voir « Définition du dossier de traitement des pages dynamiques », page 140).
9 Cliqueur OK.
La nouvelle connexion apparait dans le panneau Base de données.
Modification ou suppression d'une connexion à une base de données
Lorsque vous creez une connexion à une base de données, Dreamweaver enregistre les informations de connexion dans un fisier, dans le sous-dossier Connexions du dossier racine local du site. Dreamweaver ne cree pas de connexion à une base de données pour votre application JSP tant que vous n'avez pas defini de jeu d'enregistements pour une page dans l'application (voir « Definition d'un jeu d'enregistements », page 536). Dreamweaver ercit alors le code dans le fisier pour étabir la connexion et insere une directive d'inclusion dans votre page. Au moment de l'execution, le serveur insere le code de connexion dans le document.
Pourmettreàjouruneconnexion：
1 Ouvrez une page JSP dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre > Bases de données).
Une listede connexions s'affiche dans le panneau.
2 Cliquez avec le bouton droit de la souris (Windows) ou cliquez simultanement sur la souris et la touche Contrôle (Macintosh) sur la connexion etCHOisissez Modifier la connexion dans le menu contextualuel.
La boîte de dialogue que vous avez utilisé pour créé la connexion s'affiche.
3 Effectuez vos modifications puis cliquez sur OK.
Dreamweaver met automatiquement à jour le fichier inclus, ce qui actualise automatiquement toutes les pages du site qui utilisent la connexion.
Si vous renommEZ une connexion, mettez a jour tous les yeux d'enregistrements utilisant l'ancien nom de connexion en double-cliquant sur chaque jeu dans le panneau Liaisons et en choisisant le nouveau nom de connexion dans la boite de dialogue Jeu d'enregistrements.
Pour supprimer une connexion :
1 Ouvrez une page JSP dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre > Bases de données).
Une listede connexions s'affiche dans le panneau.
2 Cliquez avec le bouton droit de la souris (Windows) ou cliquez simultanément sur la souris et la touche Contrôle (Macintosh) sur la connexion etCHOISEZ Supprimer la connexion dans le menu contextual.
La boîte de dialogue que vous avez utilisé pour créé la connexion s'affiche.
3 Confirmez la suppression.
Pour éviter les erreurs consécutives à la suppression d'une connexion, mettez à jour chaque jeu d'enregistements utilisant l'ancienne connexion en double-cliquant sur le nom du jeu dans le panneau Liaisons et enChoosing une nouvelle connexion dans la boîte de dialogue Jeu d'enregistements.
CHAPITRE 11
Connexions à des bases de données pour les développpeurs PHP
Pour utiliser une base de données avec une application PHP (Hypertext Preprocessor), vous doivent accorder une connexion à une base de données dans Macromedia Dreamweaver MX. Ce chapitre neufroit la marche à suivre.
Pour le développement PHP, Dreamweaver prend en charge uniquement 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 gratuite et partir d'Internet à des fins non commerciales. Pour plus d'informations, voir le site Web MySQL, à l'adresse http://www.mysql.com/downloads/mysql.html.
Ce chapitre suppose que vous avez configuré une application PHP (voir « Configuration d'une application Web », page 133). Une base de données MySQL doit également être installée sur votre ordinateur local ou sur un système auquel vous pouvez acceder en réseau ou par FTP.
Ce chapitre contient les sections suivantes :
- « Connexion à une base de données», page 177
- « Modification ou suppression d'une connexion à une base de données», page 178
Pour vous connecter à l'exemple de base de données installé avec Dreamweaver, voir l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver). Pour tout complément d'information sur les bases de données et les connexions aux bases de données, voir « Guide du débutant en base de données », page 695.
Connexion à une base de données
Cette section explique comment se connecter à une base de données dans le cadre du développement d'une application PHP dans Dreamweaver. Elle suppose que vous disposez d'une ou plusieurs bases de données MySQL et que le serveur MySQL est lancé.
Pour creer une connexion à une base de données à votre base de données MySQL :
1 Ouvrez une page PHP dans Dreamweaver, puis ouvre le panneau Bases de données (Fenêtre > Bases de données).
2 Cliquez sur le bouton plus (+) dans le panneau et choisissez Connexion MySQL dans le menu contextual.
La boîte de dialogue Connexion MySQL s'ouvre.
3 Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
La nouvelle connexion s'affiche dans le panneau Bases de données.
Modification ou suppression d'une connexion à une base de données
Lorsque vous creez une connexion à une base de données, Dreamweaver enregistre les informations de connexion dans un fisier, dans le sous-dossier Connexions du dossier racine local du site. Dreamweaver ne cree pas de connexion à une base de données pour votre application PHP tant que vous n'avez pas defini de jeu d'enregistrements pour une page dans l'application (voir « Definition d'un jeu d'enregistrements », page 536). Dreamweaver écrit alors le code dans le fisier pour étabir la connexion et insère une directive d'inclusion dans votre page. Au moment de l'exécution, le serveur insère le code de connexion dans le document.
Pourmettreàjouruneconnexion：
1 Ouvrez une page PHP dans Dreamweaver, puis ouvre le panneau Bases de données (Fenêtre > Bases de données).
Une liste de connexions s'affiche dans le panneau.
2 Cliquez avec le bouton droit de la souris (Windows) ou cliquez simultanément sur la souris et la touche Contrôle (Macintosh) sur la connexion etCHOISEZ Modifier la connexion dans le menu contextualuel.
La boîte de dialogue que vous avez utilisé pour creer la connexion s'affiche.
3 Effectuez vos modifications puis cliquez sur OK.
Dreamweaver met automatiquement à jour le fichier inclus, ce qui actualise automatiquement toutes les pages du site qui utilisent la connexion.
Pour supprimer une connexion :
1 Ouvrez une page PHP dans Dreamweaver, puis ouvre le panneau Bases de données (Fenêtre > Bases de données).
Une listede connexions s'affiche dans le panneau.
2 Cliquez avec le bouton droit de la souris (Windows) ou cliquez simultanément sur la souris et la touche Contrôle (Macintosh) sur la connexion etCHOISEZ Supprimer la connexion dans le menu contextual.
La boîte de dialogue que vous avez utilisé pour créé la connexion s'affiche.
3 Confirmez la suppression.
Pour éviter les erreurs consécutives à la suppression d'une connexion, mettez à jour chaque jeu d'enregistements utilisant l'ancienne connexion en double-cliquant sur le nom du jeu dans le panneau Liaisons et enCHOISANT une nouvelle connexion dans la boîte de dialogue Jeu d'enregistements.
Partie III Utilisation du code de page
Utilisez les outils de codage avancé de Dreamweaver pour creer ou modifier des pages.
Cette partie du manuel contient les chapitres suivants :
- Chapitre 12, « Configuration d'un environnement de codage »
- Chapitre 13, « Codage dans Dreamweaver »
- Chapitre 14, « Optimisation et débogage de code »
- Chapitre 15, « Modification du code en mode Création »
CHAPITRE 12
Configuration d'un environnement de codage
Vou pervez adapter I'environnement de codage de Macromedia Dreamweaver MX à vous propre méthode de travail. Vou 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.
Ce chapitre couvre les sujets suivants :
- « Affichage du code», page 181
- « Définition des préférences d'affichage», page 182
- « Définition des préférences de codage», page 183
- « Personnalisation des raccourcis clavier», page 187
- « Définition des préférences de codage», page 183
- « Définition des préférences du validateur», page 187
Gestion des bibliothèques de balises page 188
- « Importation de balises personnalisées dans Dreamweaver», page 191
- « Utilisation d'un éditeur HTML externe avec Dreamweaver», page 193
Affichage du code
Voupe visualiser le code source du document en cours de plusieurs fonctions : en l'affichant dans la fenetre de document après avoir activé le mode Code, en fractionnant la fenetre de document pour afficher à la fois la page et son code, ou encore en travaillant dans l'inspecteur de code, qui forme une fenetre de code distincte.
Remarque: le mode Code et l'inspecteur de code partagent la même fonctionnalité.
Cette section explique comment modifier le mode d'affichage du code.
Pour afficher le code dans la fenêtre de document :
Choisissez Affichage > Code.
Pour afficher le code dans une fenêtre distincte :
Choisissez Fenetre >Autres >Inspecteur de code.
Pour pouvoir coder tout en modifier visuellement une page dans la fenêtre de document :
1 Choisissez Affichage > Code et creation.
Le code apparait dans le volet supérieur, et la page dans le volet inférieur.
2 Pour afficher la page au premier plan,CHOISSEZ Affichage > Mode Creation en haut.
3 Pour redimensionner les volets dans la fenêtre de document, faites glisser la barre de division à l'endetroit 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 devezmettre à jour manuellement le document dans le mode Création ; il vous suffit pour cela de cliquer dans ce mode et d'appuyer sur la touche F5.
Définition des préférences d'affichage
Voupe configurer le revoi à la ligne des mots, l'affichage du numero des lignes de code, la mise en surbrillance du code HTML incorrect, la coloration de la syntaxe des éléments de code ainsi que la mise en retrait du code à partir du menu Affichage > Options d'affichage de code.
Pour définir les options dans le mode Code et dans l'inspecteur de code :
1 Affichez au moins une page en mode Code et dans l'inspecteur de code.
2 Choisissez Affichage > Options d'affichage de code.
Les options définies antérieurement sont precedées d'une coche dans le menu contextual qui apparaît.
3 Choisissez parmi les options suivantes :
- Retour automatique à la ligne renvoie le code à la ligne afin qu'il soit visible sans qu'il soit nécessaire de le faire défiler horizontallyment. Cette option n'insère aucun saut de ligne ; elle a pour chaque fonction de simplifier la consultation du code.
- Numérores de lignes affiche le numéro des lignes de code sur le côte.
- Mettre en surbrillance le code HTML incorrect active dans Dreamweaver le surlignage en jaune du code HTML incorrect non pris en charge par les navigateurs. Dès la sélection d'une balise incorrecte, l'inspecteur des propriétés affiche des instructions pour corriger l'erreur.
- Coloration de la syntaxe active et désactive l'application d'une couleur au code. Pour modifier le modèle de coloration, voir « Définition des préférences de coloration de code», page 186.
- Retrait auto automatise la mise en retrait du code lors que vous appuyez sur la touche Entrée pendant la réduction du code. Pour modifier l'espacement ou les balises de mise en retrait automatique, voir « Définition des préférences de formatage de code», page 183.
La seLECTION d'une option cochée la désactive. A défaut, l'option est définie.
Définition des préférences de codage
Dreamweaver yous permit de définir les prevalences de codage suivantes :
- Les préférences de formatage du code déterminent les options de formatage de code courantes, telles que la longueur de ligne et la mise en retrait. Voir « Définition des préférences de formatage de code », page 183. Vous pouvez également appliquer vos nouvelles préférences de mise en forme aux documents HTML existants. Voir « Application de nouvelles préférences de formatage aux documents existants », page 185.
- Les préférences d'indicateurs de code vous permettent d'activer ou de désactiver les indicateurs de code, mais aussi de les personneliser. Les indicateurs de code vous fournissent une aide immédiate pendant la saisie du code en mode Code. Si, par exemple, vous tapez un crochet ouvrant (<), un menu vous propose toutes les balises compatibles. Pour vous éviter de saisir le reste de la balise, Sélectionnez une entrée du menu et appuyez sur la touche Entrée pour l'insérer automatiquement. Voir « Définition des préférences d'indicateurs de code», page 185.
- Les préférences de correction du code déterminant les éventuelles modifications que Dreamweaver apporte au code lorsqu vous ouvrez un document HTML ou de script. Voir « Définition des préférences de correction de code », page 185.
- Les préférences de coloration du code définissent la mise en forme et la coloration de la syntaxe spécifique aux éléments de code tels que les balises, les commentaires et les scripts. Voir « Définition des préférences de coloration de code », page 186.
Pour définir les préférences avances, utilisez l'éditeur de la bibliothèque de balises (voir « Gestion des bibliothèques de balises », page 188).
Voupez 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.
Notez que toutes les préférences, à l'exception de Remplacer la casse de, affectent uniquement les nouveaux documents et les nouvelles additions aux documents existants. En d'autres termes, lorsque vous ouvrez un document HTMLdéjà créé, ces options de mise en forme ne lui sont pas appliquées. Pour modifier la mise en forme du code de documents HTML existants, utilisez la commande Appliquer le formatage de la source. Pour plus d'informations, voir « Application de nouvelles préférences de formatage aux documents existants», page 185.
Pour définiir les préférences de formatage de code :
1 Choisissez Edition > Préférences > Format de code ou Dreamweaver > Préférences > Format de code (Mac OS X).
La boîte de dialogue Format de code s'affiche.
2 Ajustez les paramètres suivants dans la boîte de dialogue :
Utiliser spécifique si les retraitu doivent etre composés d'espaces ou de tabulations.
Taille du retrait déterminé la taille des mises en retraits, en espaces ou en tabulations suivant le paramétrage du champ Utiliser.
Taille de tabulation déterminé la taille des tabulations (exprimées en espaces de caractères).
Renvoi à la ligne auto ajoute des retours de chariot « permanents » lorsqu'une ligne occappe toute la largeur de colonne spécifiée. (Dreamweaver insère des retours de chariot uniquement lorsqu'ils ne modifient pas l'apparce 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 Renvoi à la ligne du mode Code (ou de l'inspecteur de code) rengoie simplement à la ligne les lignes dont la longueur dépasse la largeur de la fenêtre.
Type de saut de ligne permet d'indiquer le type de serveur distant (Windows, Macintosh ou UNIX) qui hébergera votre site. Le besoin 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. (Pour les transferts par FTP, ce paramètre ne s'applique qu'en mode de transfert binaire; le mode de transfert ASCII de Dreamweaver ignore ce paramètre. 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.) Ce paramètre est également utile lorsque vous travailliez avec un editor de texte externe ne reconnaissant que certains types de saut de ligne. Par exemple, utilisez CR/LF (Windows) si votre editor de texte est le Bloc-Notes de Windows, et CR (Macintosh) s'il s'agit de SimpleText.
Casse de balise par défaut et Cassé d'attribut par défaut contrôle 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 la fenêtre de document, mais ni aux balises et attributs que vous tapez directement dans le mode Code (ou l'inspecteur de code), ni aux balises et attributs d'un document que vous ouvrez (sauf, dans ce dernier cas, si vous avez également activé l'une des options Remplacer la casse de).
Remplacer la casse de : Balises et Attributs spécifique s'il faut toujours convertir les noms de balises et d'attributs dans la casse spécifique, même lors de l'ouverture d'un document HTML existant. Lorsque vous activez l'une de ces options, les balises et les attributs des documents déjà ouverts sont immédiatement convertis dans la casse indiquée, et il en sera de même dans tous les documents que vous ouvrerez 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 que vous insérez à partir de la barre Insertion, sont également convertis dans la casse spécifique. Par exemple, si vous voulez que les noms des balises soient always convertis en minuscules, spécifie minuscules dans Casse des balises, et activez l'options Remplacer la casse de : Balises. Lorsque vous ouvre ensuite un document contenant des noms de balises en majuscules, Dreamweaver les convertit en minuscules.
Centrer spécifique si des éléments doivent être centrés à l'aide de div align="center" ou de center. Ces deux balises font partie de la spécification HTML 4.0 Transitional, mais center est pris en charge par un évventail plus large de navigateurs.
Les options de formatage de code définies dans les préférences Format de code ne s'appliquent qu'aux documents nouvellement créé dans Dreamweaver. Pour appliquer ces nouvelles préférences aux documents existants, utilisez la commande Appliquer le formatage de la source.
Pour appliquer les nouvelles préférences de formatage à un document existant :
1 Ouvrez le document dans Dreamweaver.
2 Choisissez Commandes > Appliquer le formatage de la source.
Définition des préférences d'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 tapez du code. Pour définir les préférences, choisissez Edition > Préférences > Indicateurs de code ou Dreamweaver > Préférences > Indicateurs de code (Mac OS X).
Conseil : même si l'affichage des indicateurs de code est désacté, vous pouvez afficher un indicateur en mode Code ou dans l'inspecteur de code en appuyant sur les touches Contrôle-Espace sous Windows.
Pour définiir les préférences d'indicateur de code :
1 Choisissez Edition > Préférences > Indicateurs de code ou Dreamweaver > Préférences > Indicateurs de code (Mac OS X).
La boîte de dialogue Indicateurs de code s'affiche.
2 Ajustez les paramètres suivants dans la boîte de dialogue :
Activer l'achèvement automatique des balises active l'achèvement automatique des balises.
Activer les indicateurs de code active les indicateurs de codependant la saisie du code dans le mode Code. Reglez le curseur Délai pour définir le déliat (en secondes) qui s'écoule avant l' apparition des indicateurs appropriés.
Menu définit précisé le type d'indicateur de code à afficher pendant la saisie. Libre à vous d'utiliser tous les menus ou une partie seulement.
Définition des préférences de correction de code
Les préférences de correction de code déterminent le comportement de Dreamweaver lors de l'ouverture de documents (ces préférences sont sans effet lorsque vous modifiez du code HTML ou des scripts dans le mode Code).
Si vous désactieve ces options de correction, Dreamweaver affiche les éléments de marquage non valides dans la fenêtre de document pour le code HTML qu'il aurait corrigé.
Si vous importez un document HTML depuis Microsoft Word, vous pouvez utiliser la commande Nettoyer HTML Word pour supprimer le code HTML inutil. Pour plus d'informations, voir « Nettoyage de Microsoft Word HTML » dans l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver).
Pour définiir les préférences de correction de code :
1 Choisissez Edition > Préférences > Correction du code ou Dreamweaver > Préférences > Correction du code (Mac OS X).
La boîte de dialogue Correction du code s'affiche.
2 Ajustez les paramètres suivants dans la boîte de dialogue :
Corriger les balises incorporement imbriquées et non fermées corrigé les balises qui se chevauchent. Par exemple, B I texte /B /I est réécrit comme B I texte /I /B . Cette option insère également des guillemets et des crochets de fermeture s'ils sont absents.
Renommer les éléments de formulaire lors du collage garantit l'absence de noms d'objets de formulaire en double.
Supprimer balises de fermeture superflues supprime les balises de fermeture auxquelles ne correspond pas de balise d'ouverture.
M'avertir lors de la correction ou de la suppression de balises affiche un récapitulatif des codes HTML techniquement non valides que Dreamweaver a tenté de corriger. Ce récapitulatif indique l'emplacement du problème (à l'aide des numérios de ligne et de colonne), pour vous permettre de vérifier la correction et veiller à ce qu'elle produit l'effect voulu.
Ne jamais corriger le code : Dans les fichiers avec extensions permet d'empêcher Dreamweaver de corriger le code dans les fichiers portant les extensions indiquées. Cette option est particulièrement utile pour les fichiers contenant des balises propriétaires.
Coder caractères spéciaux dans les URL à l'aide de % garantit la présence exclusive de caractères autorisés dans l'URL.
Coder , , & et " dans les valeurs d'attributs à l'aide de & garantit la présence exclusive de caractères autorisés dans l'URL.
Définition des préférences de coloration de code
La coloration de la syntaxe vous permet d'identifier les blocs de code dans des documents volumieux. Les préférences de coloration de la syntaxe s'appliquent aux éléments de code tels que les commentaires et les scripts, ainsi qu'aux balises en général. Pour définir les préférences de coloration de balises spécifiques, modifier la définition de cette balise dans l'éditeur de la bibliothèque de balises. Pour plus d'informations, voir « Modification de bibliothèques, de balises et d'attributs», page 189.
Pour définiir les préférences de coloration de code :
1 Choisissez Edition > Préférences > Coloration du code ou Dreamweaver > Préférences > Coloration du code (Mac OS X).
2 Choisissez un type de document, puis cliquez sur Modifier le modele de coloration. La boite de dialogue Modifier le modele de coloration s'affiche.
3 Sélectionnez un élément, puis définissez la couleur de son texte, celle de son arrêté-plan et son style (gras, italique ou souligné).
Vous pouvez prévisaler le modèle de coloration dans le volet Aperçu.
4 Lorsque vous avez terminé, cliquez sur OK.
Personnalisation des raccourcis clavier
Rien ne vous empêche d'utiliser vos raccourcis clavier préféres dans Dreamweaver. Si vous étés habitué à utiliser des raccourcis clavier spécifiques (par exemple, Contrôle-Entrée pour insérer un saut de ligne, Contrôle-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, voir « Utilisation de l'éditeur de raccourcis clavier», page 52.
Ouverture de fichiers en mode Code par défaut
Vou puez configurer Dreamweaver pour qu'il ouvre automatique les fichiers portant certaines extensions en mode Code, et non en mode Creation.
Lorsque vous ouvrez un fjichier qui ne contient normalementaucun code HTML (par exemple, un fjichier JavaScript), il s'ouvre en mode Code (ou dans l'inspecteur de code), et non pas en mode Creation. Vous pouvez modifier le fjichier et l'enregistrer en tant que fjichier HTML ou non HTML.
Pour définit le mode par défaut des fichiers non HTML :
1 Choisissez Edition > Préférences > Types de fichiers/Editeurs ou Dreamweaver > Préférences > Types de fichiers/Editeurs (Mac OS X).
2 Dans la zone de texte Ouvrir en mode Code, entrez les extensions de nom de fichier que vous pouze ouvoir automatiquement en mode Code. Insérez un espace entre chaque type de fichier.
Les extensions de fichier par défaut répertoriées sont .js, .txt et .asa. Vous pouvez en ajouter autant que vous le voulez.
Définition des préférences du validateur
Le validateur de Dreamweaver vous permet de repérer rapidement les erreurs de balise et de syntaxe générées dans le code (voir « Validation de balises », page 213). Vous pouvez spécifique les langages de balise qui serviront de référence au validateur pour ses vérifications, les problèmes spécifique que le validateur doit relever, ainsi que les types d'erreurs qu'il doit signaler.
Pour définiir les préférences du validateur :
1 Choisissez Edition > Préférences > Programme de validation ou Dreamweaver > Préférences > Programme de validation (Mac OS X).
2 Sélectionnéz les bibliothèques de balises à utiliser pour la validation.
Certaines bibliothèques de balises sont imbriquées. Si, par exemple, vous désissiez HTML 4.0, les entrées HTML 3.2 et HTML 2.0 sont sélectionnées automatiquement puisque, sans elles, la définition de HTML 4.0 demeure incomplète.
Remarque: si vous validez à la fois CFML et HTML dans un seul et même document, le validateur est incapable d'interpréter le dièse (#). En effet, dans le langage CFML, le signe # désigne une erreur tandis que le double signe ## est correct ; dans le langage HTML, à l'inverse, ## est une erreur tandis que # est correct.
3 Cliquez sur le bouton Options.
La boîte de dialogue Options du programme de validation s'affiche.
4 Activez l'options Afficher pour tous les types d'erreur que le validateur doit signaler dans son rapport.
5 Sélectionné les éléments à faire vérifier par le validateur.
6 Cliquez sur OK pour referrer la boîte de dialogue Options du programme de validation, puis de nouveau sur OK pour fermer la boîte de dialogue Préférences.
Gestion des bibliothèques de balises
Vou pOUZ utilise l'editeur de bibliothèques de balises pour gérer les bibliothèques de balises dans Dreamweaver. L'éditeur de bibliothèques de balises vous permet d'ajouter et de supprimer des bibliothèques de balises, des balises et des attributs, de définir les propriétés d'une bibliothèque de balises, mais aussi de modifier les balises et les attributs.
Pour ouvrir l'éditeur de bibliothèques de balises, choisissez Edition > Bibliothèques de balises. L'éditeur de la bibliothèque de balises s'affiche comme suit. Le contenu de cette boîte de dialogue varie selon la balise sélectionnée.)
Cette section contient les rubriques suivantes :
- « Ajout de bibliothèques, de balises et d'attributs », page 188
- « Modification de bibliothèques, de balises et d'attributs », page 189
- « Suppression de bibliothèques, de balises et d'attributs », page 191
Voir aussi « Importation de balises personalisées dans Dreamweaver», page 191.
Ajout debibliothèques, de balises et d'attributs
L'éditeur de bibliothèques de balises de Dreamweaver vous permet d'ajouter des bibliothèques de balises ou des balises et des attributs aux bibliothèques de balises.
Remarque : pour importer une balise, voir « Importation de balises personalisées dans Dreamweaver », page 191.
Pour ajouter une bibliothèque de balises :
1 Dans la boîte de dialogue Editeur de la bibliothèque de balises (Edition > Bibliothèques de balises), cliquez sur le bouton plus (+) et désisissez Nouvelle bibliothèque de balises. La boîte de dialogue Nouvelle bibliothèque de balises s'affiche.
2 Dans la zone de texte Nom de la bibliothèque, entrez un nom (par exemple, PHP Tags).
3 Cliquez sur OK.
Pour ajouter une ou plusieurs balises à la bibliothèque de balises :
1 Dans la boîte de dialogue Editeur de la bibliothèque de balises (Edition > Bibliothèques de balises), cliquez sur le bouton plus (+) et désissez Nouvelles balises. La boîte de dialogue Nouvelles balises s'affiche.
2 Dans le menu déroulant Bibliothèque de balises,CHOISEZ une bibliothèque de balises (par
exemplé, CFML Tags).
Par défaut, la bibliothèque de balises selectionnée dans l'éditeur de balises apparait dans la zone
Bibliothèque de balises.
3 Dans la zone de texte Noms des balises, entrez le nom de la balise. Si vous ajoutez plusieurs balises, séparez les noms de balises par une virgule suivie d'un espace (par exemple, cfgraph, cfgraphdata).
4 Pour ajouter chacune des balises avec la balise de fin correspondante (< / >) , activez la case à cocher Avoir des balises de fin correspondantes.
5 Cliquez sur OK.
Pour ajouter un ou plusieurs attributs à une balise :
1 Dans la boîte de dialogue Editeur de la bibliothèque de balises (Edition > Bibliothèques de balises), cliquez sur le bouton plus (+) et désissez Nouveaux attributs. La boîte de dialogue Nouveaux attributs s'affiche.
2 Dans le menu déroulant Bibliothèque de balises,CHOISSEZ une bibliothèque de balises. Par défaut, la bibliothèque de balises sélectionnée dans l'éditeur de balises apparait dans la zone de texte Bibliothèque de balises.
3 Dans le menu déroulant Balise,CHOISSEZ une balise (par exemple, cfigraph). Par défaut, la balise selectionnée dans l'éditeur de balises apparait dans la zone Balise.
4 Dans la zone de texte Noms des attributs, entrez le nom de l'attribut (par exemple, type). Si vous ajoutez plusieurs attributs, séparez les noms d'attributs par une virgule suivie d'un espace.
5 Cliquez sur OK.
Modification de bibliothèques, de balises et d'attributs
Vou puez utilise l'éditeur de bibliothèques de balises pour définir les propriétés d'une bibliothèque de balises ou modifier les balises et les attributs d'une bibliothèque — qu'il s'agisse de leurs attributs, de leurs valeurs ou de leur format (pour simplifier l'identification du code).
Pour définir les 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èques de balises), Sélectionnez une bibliothèque de balises dans le menu déroulant Balises.
2 Dans la zone de texte Utilisé dans, Sélectionnez tous les types de document qui seront utilisés par la bibliothèque de balises.
Les balises de la bibliothèque ne sont disponibles que dans les types de documents que vous venez deCHOISIR.
3 Si les balises de la bibliothèque nécessitent un préfixe, entrez-en un dans la zone de texte Préfixe de balise.
4 Une fois les modifications terminées dans l'éditeur de la bibliothèque de balises, cliquez sur OK.
Pour définit une balise dans une bibliothèque :
1 Dans la boîte de dialogue Editeur de la bibliothèque de balises (Edition > Bibliothèques de balises), ouvre une bibliothèque de balises dans le menu déroulant Balises et seLECTIONnez une balise.
2 Définissez les options de format de balise suivantes :
- Suits de ligne déterminé l'endetroit où Dreamweaver insère les sauts de ligne pour une balise.
- Sommaire déterminé comment Dreamweaver insère le contenu d'une balise, à savoir si le saut de ligne et les règes 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 vousCHOISSEZ cette derniere option, la boite de dialogue Nom de balise en minuscules/majuscules s'affiche. Precisez comment Dreamweaver insérer la balise (par exemple,GetProperty), puis cliquez sur OK.
- 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,CHOISSEZ ou , puis cliquez sur OK.
Conseil : il est préférible de définir les minuscules comme casse par défaut, conformément aux normes XML et XHTML.
Pour modifier l'attribut d'une balise :
1 Dans la boîte de dialogue Editeur de la bibliothèque de balises (Edition > Bibliothèques de balises), ouvrez une bibliothèque de balises dans le menu déroulant Balises et seLECTIONnez un attribut de balise.
2 Dans le menu déroulant Casse d'attribut,CHOISSEZ Par défaut, Minuscules, Majuscules ou Minuscules/majuscules.
Si vous choisissez cette dernière option, spécifiez dans la boîte de dialogue Nom d'attribut en minuscules/majuscules comment Dreamweaver insérera l'attribut (par exemple, onClick). Cliquez sur OK.
Cliquez sur le lien D'etat pour définir la casse par défaut pour tous les attributs.
3 Dans le menu déroulant Type d'attribut, Sélectionnez le type de l'attribut.
Si vous choisissez Enuméré, entreprises toutes les valeurs d'attribut autorisées dans la zone de texte Valeurs, en veillant à les séparer par une virgule suivie d'un espace. Par exemple, pour définir l'attribut de la balise cfgraph, entrez bar,horizontalBar,line,pie.
Suppression de bibliothèques, de balises et d'attributs
Vou puez utilise l'éditeur de bibliothèques de balises pour supprimer des bibliothèques de balises, des balises et des attributs.
Pour supprimer une bibliothèque, une balise ou un attribut :
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 le menu déroulant Balises.
2 Cliquez sur le bouton moins (-).
3 Le cas échéant, confirmez la suppression enclinquant sur OK.
L'objet disparait du menu déroulant Balises.
4 Si vous ne poulez pas supprimer définitivement cet élément, cliquez sur le bouton Annuler.
La boîte de dialogue Editeur de la bibliothèque de balises se refère sans supprimer l'objet ni valider les modifications effectuees depuis l'ouverture de l'éditeur.
5 Pour supprimer définitivement l'objet, cliquez sur OK.
Importation de balises personalisé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 dans le mode Code, la fonction Indicateurs de code repertorie automatiquement les attributs de la balise parmi lesquels vous pouvez faire votrechioix.
Cette section contient les rubriques suivantes :
- « Importation de balises à partir de fichiers XML», page 191
- « Importation de balises ASP.NET personnelisées », page 192
- « Importation de balises JSP à partir d'un fichier», page 192
- « Importation de balises JSP à partir d'un serveur (web.xml)», page 192
- « Importation de balises JRun», page 193
Importation de balises à partir de fichiers XML
Vouss pouvez importer des balises à partir d'un fichier XML DTD (Document Type Definition) ou Schema.
Pour importer des balises à partir d'un fichier XML DTD ou Schema :
1 Ouvrez l'éditeur de bibliothèques de balises (Edition > Bibliothèques de balises).
2 Cliquez sur le bouton plus (+), puis choisissez DTD Schema > Importer le fichier DTD ou Schema XML.
3 Entrez le nom ou l'URL du fichier DTD ou Schema.
4 Entrez le préfixe qui servira à identifier une balise sur une page, en tant que composant d'une bibliothèque de balise donnée.
5 Cliquez sur OK.
Importation de balises ASP.NET personalisées
Vou puevez importer des balises ASP.NET personalisées dans Dreamweaver.
Au préalable, assurez-vous que la balise personalisée est installée sur le serveur d'évaluation définis dans la boîte de dialogue Définition du site (voir « Définition du dossier de traitement des pages dynamiques », page 140). Les balises compilationes (fichiers .dll) doivent être placées dans le dossier Corbeille de la racine du site, tandis que les balises non compilationes (fichiers .ascx) peuvent résider dans un réseau ou un sous-repertoire virtuel sur le serveur. Pour plus d'informations, voir la documentation Microsoft ASP.NET.
Pour importer les balises ASP.NET personnelisées dans Dreamweaver :
1 Ouvrez une page ASP.NET dans Dreamweaver.
2 Ouvrez l'éditeur de bibliothèques de balises (Edition > Bibliothèques de balises).
3 Cliquez sur le bouton plus (+), puis choisissez l'une des options suivantes :
- Pour importer toutes les balises ASP.NET personnalisées à partir du serveur d'application, désisissez ASP.NET > Importer toutes les balises personnalisées ASP.NET.
- Pour n'importer que certaines balises personnalisées à partir du serveur d'application,CHOISSE ESP.NET > Importer les balises personnalisées ASP.NET sélectionnées.
La boîte de dialogue Importer les balises personalisées ASPNet scélectionnées qui s'affiché répertorie toutes les balises ASP.NET personalisées installées sur le serveur d'application. Tout en Maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enforcée cliquez sur les balises de la liste, puis sur OK.
Importation de balises JSP à partir d'un fichier
Vou puez importer une bibliothèque de balises JSP dans Dreamweaver, à partir d'une multitude de types de fichiers.
Pour importer une bibliothèque de balises JSP dans Dreamweaver :
1 Ouvrez une page JSP dans Dreamweaver.
2 Ouvrez l'éditeur de bibliothèques de balises (Edition > Bibliothèques de balises).
3 Cliques sur le bouton plus (+), puis choisissez JSP > Importer depuis le fichier (.tld, .jar, *.zip).
4 Specifiez le fichier .tld, .jar ou .zip 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é pour acceder à la société, mais uniquement à titre d'identification de la bibliothèque de balises.
6 Entrez le préfixe qui servira à identifier une balise sur une page, en tant que composant d'une bibliothèque de balise donnée.
7 Cliquez sur OK.
Importation de balises JSP à partir d'un serveur (web.xml)
Vou puevez importer des balises JSP à partir d'un serveur.
Pour importer des balises JSP à partir d'un serveur :
1 Ouvrez une page JSP dans Dreamweaver.
2 Ouvrez l'éditeur de bibliothèques de balises (Edition > Bibliothèques de balises).
3 Cliques sur le bouton plus (+), puis choisissez JSP > Importer depuis le serveur (web.xml).
La boîte de dialogue Importer depuis le serveur s'affiche.
4 Sélectionnéz une 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é pour acceder à la société, mais uniquement à titre d'identification de la bibliothèque de balises.
6 Cliquez sur OK.
Importation de balises JRun
Si vous travailliez avec Macromedia JRun, vous pouvez importer vos balises JRun dans Dreamweaver.
Pour importer des balises JRun dans Dreamweaver :
1 Ouvrez une page JSP dans Dreamweaver.
2 Ouvrez l'éditeur de bibliothèques de balises (Edition > Bibliothèques de balises).
3 Dans l'éditeur de bibliothèques de balises (Edition > Bibliothèques de balises), cliquez sur le bouton plus (+), puis choisissez JSP > Importer les balises de serveur JRUN depuis le dossier.
4 Spectoriez un dossier contenant des balises JRun.
5 Entrez un URI pour identifier la bibliothèque de balises.
6 Entrez le préfixe qui servira à identifier une balise sur une page, en tant que composant d'une bibliothèque de balise donnée.
7 Une fois les modifications terminées, cliquez sur OK pour referrer l'éditeur de bibliothèques de balises.
Utilisation d'un主编 HTML externe avec Dreamweaver
Vou puez lancer votre editeur HTML externe ou un editeur de texte depuis Dreamweaver pour editor le code source du document en cours, puis revenir dans Dreamweaver pour continuer à utiliser son interface graphique. Dreamweaver detecte toute modification enregistrée dans le document par l'éditeur externe, et vous invite dans ce cas à recharger le document.
Les éditeurs HTML intégrés suivants sont acceptés : Macromedia HomeSite (Windows seulement) ou BBEdit (Macintosh seulement). Vous pouvez également utiliser un autre éditeur de texte, par exemple Notepad, SimpleText, vi, Emacs et TextPad.
Utilisation d'un éditeur HTML intégré
Vou pouvez installer simultanement Dreamweaver et HomeSite sous Windows ou une version d'essay de BBEdit sur Macintosh.
Gréce à l'intégration étroite de Dreamweaver avec ces deux produits, vous pouvez modifier un document à la fois dans Dreamweaver et dans HomeSite/BBEdit, en passant d'une application à l'autre; le document reste automatiquement synchronisé dans les deux applications. Par ailleurs, ces deux programmes interagissent avec la sélection; ainsi le texte sélectionné dans Dreamweaver l'est également lorsque vous passez à BBEdit, et inversement.
Utilisation de HomeSite (Windows seulement)
Vou n'avez pas besoin d'activer l'intégration pour HomeSite ; cette fonction est intégrée automatiquement lors de l'installation du programme.
Pour utiliser HomeSite :
1 Choisissez Edition > Modifier avec HomeSite.
2 Modifiez le document dans HomeSite, puis enregistrez vos modifications.
3 Pour revenir dans Dreamweaver, cliquez sur le bouton Dreamweaver dans la barre d'outils de l'éditeur.
Utilisation de BBEdit (Macintosh seulement)
Voupez désactiver l'intégration de BBEdit si vous préférez travailler avec une version antérieure de BBEdit ou avec un autre éditeur de texte HTML. Les sélections ne sont pas supervisées si l'intégration de BBEdit est désactivée.
Pour utiliser BBEdit avec Dreamweaver :
1 Choisissez Edition > Modifier avec BBEdit.
2 Modifiez le document dans BBEdit.
3 Pour revenir dans Dreamweaver, cliquez sur le bouton Dreamweaver dans la palette d'outils HTML de BBEdit.
Pour désactiver l'intégration de BBEdit :
1 Choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X), puis Sélectionnéz Types de fichiers/Editeurs.
2 Désactivez Activer l'intégration de BBEdit, puis cliquez sur OK.
Utilisation d'éditeurs externes
Vou puevez ouvr d'autres éditeurs externes depuis Dreamweaver, mais le document n'est pas synchronisé dans les deux applications, contrairement à HomeSite ou BBEdit. Une fois les modifications terminées dans l'éditeur externe, pensez àactualiser manuellement le document dans Dreamweaver.
PourCHOISIR un editeur HTML externe :
1 Choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X), puis Sélectionnéz Types de fichiers/Editeurs.
2 (Macintosh uniquement) Pour utiliser un autre éditeur HTML que BBEdit, désactivez l'option Activer l'intégration de BBEdit. Pour utiliser BBEdit, laissez l'option Activer l'intégration de BBEdit, et passez les étapes ci-dessous.
3 Cliquez sur le bouton Parcourir a cote de la zone de texte Editeur de code externe pour selectionner un editeur de texte.
4 Dans l'option Recharger les fichiers modifiés, indique 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.
5 Dans l'option Enregistrer au démarriage, indiquez si Dreamweaver doit systématiquement enregistrer le document courant 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.
Pour lancer un éditeur HTML externe :
Choisissez Edition > Modifier avec [nom de I'éditeur].
CHAPITRE 13
Codage dans Dreamweaver
Macromedia Dreamweaver MX propose un environnement de codage complet conçu pour tout type de développement Web, de la réduction de pages HTML simples à la conception, au test et au déploiement d'applications Web complexes.
Ce chapitre contient les rubriques suivantes :
- « A propos de l'environnement de codage de Dreamweaver», page 197
- «Réduction et modification de code», page 199
- « Copie et collage du code », page 203
- « Recherche et remplacement de balises et d'attributs», page 205
- « Accès aux références de langue», page 210
Pour plus d'informations sur la migration de Macromedia HomeSite vers Dreamweaver, consultez le centre de support de Dreamweaver MX à l'adresse suivante : http://www.macromedia.com/go/migrate_from_homesite.
Rubriques connexes
« Configuration d'un environnement de codage», page 181
« Optimisation et débogage de code », page 211
« Modification du code en mode Création», page 225
A propos de l'environnement de codage de Dreamweaver
L'environnement de codage de Dreamweaver vous permet d'acceder librement au code de vos pages. Cette section contient les rubriques suivantes :
- « Types de fichiers pris en charge», page 198
- « Respect du code par Dreamweaver», page 198
- « Roundtrip HTML », page 198
- « A propos de l'insertion de code par les comportements de serveur», page 199
Rubrique connexe
« Affichage du code», page 181
Types de fichiers pris en charge
Dreamweaver propose de nombreux types de fichiers pour le codage côté client, notamment HTML, XML, Cascading Style Sheets (CSS), JavaScript, VBScript, Wireless Markup Language (WML), Extension Data Markup Language (EDML), modèle Dreamweaver (.dwt) et Texte.
Vou puez utilise les types de fichiers suivants pour le codage cote serveur : ColdFusion, composant ColdFusion (.cfc), ASP.NET Visual Basic, ASP.NET C#, ASP VBScript, ASP JavaScript, JSP et PHP. Vous avez par ailleurs la possibilité de creer des fichiers C#, Visual Basic et Java autonomies.
Respect du code par Dreamweaver
Dreamweaver génére du code valide et propre dans ses environnements de codage et visuels. Dreamweaver respecte également le code rédigé par vos soins ou généré par un autre éditeur. Il ne corige jamais votre code. Ainsi, Dreamweaver ne modifie ni vos espaces blancs, ni la casse des attributs. Si vous choisissez Affichage > Options d'affichage de code > Mettre en surbrillance le code HTML incorrect, Dreamweaver surlige en jaune les erreurs. Vous pouvez évientuellesment nettoyer votre code selon vos propres critères. Vous pouvez enfin personnelier la façon dont Dreamweaver formate le code. Pour plus d'informations, voir « Définition des préférences de codage», page 183.
Roundtrip HTML
La fonction Roundtrip HTML vous permet d'échanger des documents entre Dreamweaver et un éditeur HTML en mode texte, moyenant un impact nul ou infime sur le contenu et la structure du code source HTML original du document. Parmi ses fonctions clés, citons les suivantes :
- Par défaut, Dreamweaver réécrit les balises qui se chevauchent, ferme les balises qui ne doivent pas rester ouvertes et supprime les balises de fermeture superflues lorsque vous revenez dans Dreamweaver à partir d'un éditeur externe ou lorsque vous ouvrez un document HTML qui n'a pas été dans Dreamweaver. Dreamweaver n'apporte aucune autre rectification au code, même si celui-ci est incorrect, à condition que les navigateurs puisent restituer correctement le code incorrect.
Vou puez désactiver la correction du code (voir « Définition des préférences de correction de code », page 185).
Dreamweaver conserve telles quelles les balises qu'il ne reconnait pas, notamment les balises XML, en l'absence de critères de referencia. Si une balise non reconnaue encadre une autre balise (par exemple, texte), Dreamweaver la marque comme erronée, mais ne modifie pas le code.
- Rien ne vous empêche de définir dans Dreamweaver la mise en surbrillance en jaune du code HTML non pris en charge par les navigateurs. Si vous sélectionnez une section en surbrillance, l'inspecteur des propriétés affiche des informations sur l'erreur et la manière de la corriger.
Dreamweaver permit de lancer un éditeur de texte tiers pour modifier le document courant. Pour plus d'informations, voir « Utilisation d'un éditeur HTML externe avec Dreamweaver», page 193.
A propos de l'insertion de code par les comportements de serveur
Lorsque vous choisissez 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 (ou « participants ») dans la page pour faire fonctionner le comportement de serveur.
Dès lors que vous modifie le code dans un participant, il vous est impossible de modifier ou de supprimer le comportement de serveur avec un outil visuel. Dreamweaver détecte les comportements de serveur en se repérant à des modèles de code spécifique dans la page, puis les affiche dans le panneau correspondant. Toute modification du code d'un participant, y compris l'espacement des mots et les sauts de ligne, empêche Dreamweaver de détecter le comportement de serveur et de l'afficher dans le panneau Comportements de serveur. Le comportement de serveur subsiste toute fois dans la page : vous pouvez donc le corriger dans l'environnement de codage de Dreamweaver.
Réduction et modification de code
Dreamweaver met à votre disposition plusieurs fonctions qui vous aidont à rédigier et à corriger efficacement le code. Cette section traite des fonctions suivantes :
- « Utilisation des indicateurs de code», page 199
- « Manipulation des fragments de code», page 200
- « Insertion facile de code avec la barre Insertion», page 201
- « Insertion de balises avec le Sélecteur de balises », page 202
- « Modification de balises avec des éditeurs de balises », page 202
- « Modification de balises avec l'inspecteur de balises », page 203
- « Mise en retrait des blocs de code», page 203
- « Copie et collage du code », page 203
- « Insertion de commentaires HTML», page 204
- « Affichage de la liste des fonctions JavaScript et VBScript dans une page», page 204
Utilisation des indicateurs de code
Les indicateurs de code vous permettent d'insérer et de modifier le code à mesure que vous le saississez en mode Code (ou dans l'inspecteur de code). Une liste de suggestions apparaît lorsque vous tapez certains caractères. 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écifique à un objet.
Voupeuze definir le déali d'affichage de la liste d'options dans les indicateurs de code, spécifier les balises à inclure dans la liste des balises, voire même désactiver les indicateurs de code. Pour plus d'informations, voir « Définition des préférences d'indicateurs de code», page 185.
Pour insérer une balise à l'aide des indicateurs de code :
1 Tapez un crochet ouvrant (<) pour afficher une liste de balises.
2 Appuyez sur la touche Echap pour referrer cette liste.
3 Faites defiler la liste et double-cliquez sur une balise pour l'insérer.
4 Si la balise prend en charge les attributs, appuyez sur la barre d'espace pour afficher une liste des attributs autorisés pour une balise. Sélectionnez un attribut et appuyez sur la touche Entrée.
5 Tapez la valeur de l'attribut ou, si celui-ci n'accepte que certaines valeurs, selectionnez-en une dans la liste des valeurs autorisées.
6 Repetez les deux dernières etapes pour chacun des attributs à ajouter pour la balise, ennant soin de ne pas appuyer sur la barre d'espace entre une valeur et son guilmet de fin (").
7 Tapez le crochet fermant de la balise (> ) à la suite de la dernière paire attribut/ Valeur.
Pour modifier une balise, procedede l'une des manieres suivantes :
- Pour ajouter un attribut, placez le point d'insertion devant le crochet fermant (>) d'une balise et appuyez sur la barre d'espace pour afficher une liste des attributs pris en charge pour cette balise. Insérez l'attribut et sa valeur comme indiqué précédemment.
- Pour modifier un attribut, supprimez l'attribut et ajoutez un attribut, comme indiqué précédement.
- Pour modifier une valeur, supprimez la valeur et ajouter une valeur, comme indiqué précédemment.
Pour insérer ou modifier le code d'une fonction ou d'un objet :
1 Choisissez Edition > Préférences > Indicateurs de code ou Dreamweaver > Préférences > Indicateurs de code (Mac OS X), puis définissez les préférences à afficher sans attendre.
2 En mode Code (ou dans l'inspecteur de code), tapez le code de la fonction ou de l'objet suivant votre méthode habituelle.
Lorsque vous tapez un mot-clé ou un caractère auquel sont associés des indicateurs de code, un menu contextual s'affiche, contenant des suggestions pour compléter le code. Si un élément de la liste vous convient, Sélectionné-à et appuyez sur la touche Entrée.
Pour configurer ou désactiver les indicateurs de code, voir « Définition des préférences d'indicateurs de code », page 185.
Manipulation des fragments de code
Les fragments de code permettent de stocker des contenus en vue de pouvoir les réutiliserrapidement. Vous pouvez creer et insérer des fragments de code en HTML, JavaScript, CFML, ASP et JSP, notamment. Dreamweaver contient également quelques fragments de code prédéfinis qui vous serviront de point de départ.
Le fragment de code peut soit envelopper une sclection, soit seprésenter comme un bloc de code. Vous pouvez ainsi creer un lien vers une page qui apparait plusieurs fois sur votre site, mais qui est rattachée à différents objets et à du texte. Vous pouvez selectionner un objet, cliquer avec le bouton droit de la souris (Windows) ou enMAINANT la touche Contrôle enforcée sur un fragment de code dans le panneau Fragments de code, puis besoin Inséorer dans le menu contextual. Le code du lien enveloppe la sclection. Vous pouvez par ailleurs assorted vos fragments de code de commentaires destinés aux autres utilisateurs.
Pour insérer un fragment de code :
1 Placez le point d'insertion à l'endetroit du document qui vous convient; si nécessaire, délimitez la sélection à envelopper du fragment de code.
2 Dans le panneau Fragments de code (Fenêtre > Fragments de code), double-cliquez sur le fragment de code.
Vou puez é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 désir Insérer dans le menu contextualuel.
Pour creer un fragment de code :
1 Cliquez sur l'icone Nouveau fragment de code situé au bas du panneau Fragments de code. La boîte de dialogue Fragment de code s'affiche.
2 Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
Pour modifier ou supprimer un fragment de code :
1 Sélectionnez un fragment de code, puis cliquez sur l'icone Modifier le fragment de code ou Supprimer situé au bas du panneau Fragments de code.
Les iconées Modifier le fragment de code ou Supprimer sont repérables par leur info-bulle.
Pour creer des dossiers de fragments de code en vue de gerer ces fragments :
1 Cliquez sur l'icone 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.
Pour partir un fragment de code avec d'autres membres de l'équipe :
1 Recherche le fragment de code à partir dans le sous-dossier Configuration\Snippets du dossier de l'application Dreamweaver MX.
2 Copiez le 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 fragment de code dans leur dossier Configuration\Snippets respectif.
Quiconque ayant accès au dossier partagé peut alors ajouter, modifier et supprimer les fragments de code du dossier.
Insertion rapide de code avec la barre Insertion
Utilisez la barre Insertion pour ajouter rapidement du code dans une page. Il vous suffit de placer le point d'insertion dans le code, puis de cliquer sur une icône de la barre Insertion. Dès que vous cliquez sur une icône, le code peut apparaître immédiatement dans la page ou une boîte de dialogue peut vous demander de spécifique des informations supplémentaires pour terminer le code.
Pour connaître la fonction de chaque icone, placez le pointeur de la souris dessus jusqu'à ce qu'une info-bulle s'affiche. Le nombre et le type des icones de la barre Insertion varient selon le type de document ouvert dans Dreamweaver et selon que le mode Code ou Création est actif.
Bien que la barre Insertion regroupe les balises fréquement utilisées, son contenu n'est pas exhaustif. Vous trouvrez un besoin plus varié de balises dans le Sélecteur de balises.
Insertion de balises avec le Sélecteur de balises
Vou puez utilise le Selecteur de balises pour insérer dans une page une balise qualconque des bibliothèques de balises de Dreamweaver (notamment ColdFusion et ASP.NET). Pour plus d'informations sur les bibliothèques de balises, voir « Gestion des bibliothèques de balises », page 188.
Pour insérer une balise à l'aide du Sélecteur de balises :
1 Placez le point d'insertion dans le code, cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enfoncée (Macintosh), puis choisissez Insérer la balise.
Le Séclecteur de balises s'affiche. Le panneau de gauche répertorie les bibliothèques de balises prises en charge, tandis que le panneau de croite affiche les balises individuelles du dossier de bibliothèques de balises sélectionné.
2 Sélectionnez une balise dans la liste.
3 Pour afficher les informations relatives à la syntaxe et à l'emploi de la balise, cliquez sur le boutonInfos sur les balises.
Pour autant qu'elle soit disponible, une aide sur la balise s'affiche dans la boîte de dialogue.
4 Pour obtaining des informations de reference sur la balise, cliquez sur l'icone < ?>
Pour autant qu'elle soit disponible, une reférence sur la balise s'affiche dans le panneau Récurrence.
5 Cliquez sur le bouton Inserer pour insérer la balise selectionnée dans le code.
Les balises ne nécessitant aucune information complémentaire, qui figurent entre crochets dans le panneau de droite (par exemple, ), sont insérées au niveau du point d'insertion dans le document. Toutes les autres balises affichent leur propre éditeur de balises.
6 Le cas échéant, entrez les informations supplémentaires dans l'éditeur de balises, puis cliquez sur OK.
Voir « Modification de balises avec des éditeurs de balises », page 202.
Modification de balises avec des éditeurs de balises
Leséditeurs de balises vous permettent de spécifier ou de modifier les attributs d'une balise à partir d'une boîte de dialogue. Si vous désissez d'insérer à partir du Sélecteur de balises une balise qui nécessite des informations supplémentaires, sonéditeur s'affiche systématiquement. A défaut, la procédure suivant explique comment ouvrir l'éditeur d'une balise. Pour plus d'informations, voir « Insertion de balises avec le Sélecteur de balises », page 202.
Pour acceder à l'éditeur de balises d'une balise :
1 Placez le point d'insertion à l'intérieur d'une balise.
2 Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enfoncée (Macintosh), puis désisisse Modifier la balise dans le menu contextual.
3 Effectuez vos modifications, puis cliquez sur OK.
Conseil : pour obtenir davantage d'informations sur la balise à partir de l'éditeur de balises, cliquez sur l'option Info sur les balises.
Modification de balises avec l'inspecteur de balises
Vou puez utilise l'inspecteur de balises pour modifier les balises dans une fiche de propriétéssemblable à celles que l'on retrouve dans d'autres environnements de développement intégrés (integrated development environments, IDE).
Pour modifier une balise avec l'inspecteur de balises :
1 Assurez-vous que l'inspecteur de balises est ouvert (Fenêtre > Inspecteur de balises).
2 En mode Code (ou dans l'inspecteur de code), cliquez n'importe ou dans une balise.
Si la balise prend en charge les attributs, Dreamweaver les affiche ainsi que leur valeur en cours dans la fiche de propriétés de l'inspecteur de balises.
3 Modifie la balise à votre convenance dans la fiche de propriétés.
Cliquez sur le nom d'un attribut pour saisir sa valeur ou, si l'attribut accepte les valeurs prédéfinies, pour en selectionner une dans une liste.
4 Si l'attribut adopte une valeur d'une source de contenu dynamique (une base de données, par exemple), cliquez sur l'icone en forme d'éclair en bout de rangée de l'attribut sélectionné, puis Sélectionnéz la source.
Pour plus d'informations sur la définition des sources d'un contenu dynamique, voir « Définition de sources de contenu dynamique », page 535.
5 Cliquez ailleurs dans le panneau pourmettre à jour la balise dans le document.
Mise en retrait des blocs de code
Lorsque vous rédigez et modifiez votre code en mode Code ou dans l'inspecteur de code, vous pouvezmettre en retrait les blocs de code afin de les證明ur du reste et de les rendre plus visible.
Pourmettre en retrait un bloc de code:
1 Sélectionnez la ou les lignes du bloc de code àmettre en retrait. Veillez à selectionner la ligne entière.
2 Choisissez Edition > Code de retrait.
Le code est mis en retrait. Choisissez Edition > Code de retrait négatif pour faire reculer le code mis en retrait.
Copie et collage du code
Voussoupiezcopieretcolleruncode sourcea partird'uneautreapplicationoudu modeCode lui-meme.Vousoupiezchoisisrcopieretcollerlecodeentantquetexteouen tantquecode en conservantlesbalisesintactes.
Pour copier et coller le code en tant que texte :
1 Copiez le code à partir de Dreamweaver ou d'une autre application.
2 Placez le point d'insertion directement en mode Creation et choisissez Edition > Coller.
Pour copier et coller le code en conservant les balises intestes :
1 Copiez le code à partir de Dreamweaver ou d'une autre application.
Pour effectuer la copie à partir du mode Création,CHOISSEZ Edition > Copier HTML.
2 Procedez de l'une des manieres suivantes:
- En mode Code, positionnez le point d'insertion et choisissez Edition > Coller. Si vous travailliez en mode Création, appuyez sur la touche F5 pouractualiser l'affichage du document.
- En mode Creation, positionnez le point d'insertion et choisissez Edition > Coller HTML.
Un commentaire est un texte descriptif que vous insérez dans le code HTML pour expliciter le code ou fournir d'autres informations. Le commentaire apparait uniquement en mode Code ; il ne s'affiche pas sur la page Web du navigateur.
1 Placez le point d'insertion à l'endetroit où insérer le commentaire en mode Code ou Creation.
2 Cliquez sur l'icone Commentaire dans l'onglet Commun de la barre Insertion.
Aidez-vous de l'info-bulle pour identifier cette icône.
- En mode Code, Dreamweaver insère une balise < ! - - - > dans la page. Entrez un commentaire a l'intérieur de la balise.
- En mode Création, Dreamweaver affiche la boîte de dialogue Commentaire. Entrez votre commentaire, puis cliquez sur OK.
Pour afficher les marqueurs de commentaire en mode Creation, choisissez Affichage > Assistances visuelles > Éléments invisibles. Vérifiez que les commentaires sont sélectionnés dans les préférences des éléments invisibles. Dans le cas contraire, le marqueur de commentaire ne s'affiche pas.
Pour compléter un commentaire existant, procédez de l'une des manières suivantes :
- Sélectionnez le marqueur Commentaire en mode Création et tapez votre texte dans l'inspecteur de propriétés.
- Recherche le commentaire dans le code et ajoutez-y directement votre texte.
Affichage de la liste des fonctions JavaScript et VBScript dans une page
Le mode Création vous permet d'afficher toutes les fonctions JavaScript ou VBScript dans une page.
Pour afficher les fonctions de script dans une page :
1 Ouvrez le document en mode Code.
2 Assurez-vous que la barre d'outils Document est visible (Affichage > Barre d'outils > Document).
3 Cliquez sur l'icone Navigation dans le code de la barre d'outils.
Cette icône représenté deux accolades ({}).
Remarque: elle est désactivée en mode Création.
Si votre code contient des fonctions JavaScript ou VBScript, elles apparaissent dans le menu contextuel. Pour répertoirier les fonctions dans l'ordre alphabétique, maintenez la touche Contrôle (Windows) ou Option (Macintosh) enforcée tout en cliquant sur le bouton Navigation dans le code.
Pour acceder à une fonction de votre code :
Selectionnez une fonction dans le menu déroulant Navigation dans le code. La fonction apparait en surbrillance en mode Code (ou dans l'inspecteur de code).
Recherche et remplacement de balises et d'attributs
Dreamweaver you permit de rechercher et de replacer des balises et des attributs dans votre code. Cette section contient les rubriques suivantes :
- « Recherches dans du code source HTML», page 205
- « Recherche de balises et d'attributs », page 205
- « Recherche d'un texte contenu dans des balises spécifique », page 206
- « Enregistrement de modèles de recherche», page 207
- « A propos des expressions régulières», page 208
Recherches dans du code source HTML
Utilisez l'option Code source de la boîte de dialogue Rechercher ou Remplacer pour rechercher des chaînes de texte spécifique dans le code source HTML. Par exemple, si vous cherchez black dog dans le code suivant, vous trouvez deux occurrences (dans l'attribut à l't et dans la première phrase):
Les mots black dog apparaisent également dans la deuxième phrase, mais ils sont introuvables parce qu'ils sont séparés par un lien.
Pour plus d'informations, voir « Recherche et remplacement de texte », page 308.
Recherche de balises et d'attributs
Utilisez l'option Balise spécifique de la boite de dialogue Rechercher ou Remplacer pour rechercher des balises, attributs et valeurs d'attributs spécifique. Par exemple, vous pouvez rechercher toutes les balises img n'avant pas l'attribut alt.
Pour effectuer une recherche de balise :
1 Choisissez Edition > Rechner et replacer, puis spécifie les fichiers à rechercher.
2 Choisissez l'option Balise spécifique dans le menu dérouulant Rechercher.
3 Choisissez une balise spécifique dans le menu dérouulant situé à côté du menu dérounant Rechercher ouChoisissez [toute balise].
Si vous souhaitez uniquement rechercher toutes les occurrences de la balise spécifiée, appuyez sur le bouton moins (-) et passez à l' étape 6. Sinon, passerez à l' étape 4.
4 Limitez la recherche à l'aide de l'un des modifieurs de balise suivants :
- Avec attribut, pour désirer un attribut devant figurer dans la balise pour que la correspondance soit trouée. Vous pouvez spécifique une valeur particulière pour cet attribut ou désirir [toute valeur].
- Sans attribut, pour désirir 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 a l't.
- Contenant, pour indiquer 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 Heading 1, la balise font se trouve à l'intérieur de la balise b.
- Ne contenant pas, pour indiquer un texte ou une balise qui ne doit pas figurer dans la balise d'origine pour que la correspondance soit trouvée.
- Balise interne, pour specifier une balise à l'intérieur de laquelle la balise cible doit se trouver pour que la correspondance soit trouvée.
- Pas de balise interne, pour spécifique une balise à l'intérieur de laquelle la balise cible ne doit pas se trouver pour que la correspondance soit trouvée.
5 Cliquez sur le bouton plus (+) et repeteze l'etape 4 pour limiter davantage la recherche.
6 Lancez la recherche :
- Cliquez sur Recherche suivant pourmettre en surbrillance l'occurrence suivante de la balise recherche dans le document en cours, puis dans le document suivant, si vous recherche portes sur plusieurs documents.
- Cliquez sur Rechercheur tout pour générer une liste de toutes les occurrences de la balise recherchee dans le document en cours ou, si vous efectuez la recherche sur un repertoire ou un site, pour générer une liste des documents qui contiennent la balise. Cetteiste apparait dans l'onglet Recherche du panneau Résultats.
Recherche d'un texte contenu dans des balises spécifiques
Utilisez l'option Texte (avancé) de la boite de dialogue Rechercher ou Remplacer pour rechercher des chaînes de texte spécifique se trouvant à l'intérieur ou à l'extérieur d'un jeu de balises. Par exemple, vous pouvez rechercher le mot Untitled document entre les balises
pour追寻 toutes les pages sans titre du site.</p>
<h1 id="pour-effectuer-une-recherche-de-texte-avancée">Pour effectuer une recherche de texte avancée :</h1>
<p>1 Choisissez Edition > Rechercher et remplacer, puis spécifie les fichiers à rechercher. <br />
2 Sélectionnez Texte (avancé) dans le menu déroulant Rechercher. <br />
3 Tapez le texte à rechercher dans la zone de texte adjacente au menu contextual Rechercher. Par exemple, tapez le mot Untitled. <br />
4 Sélectionnéz l'options Dans la balise ou Pas dans la balise, puis choisissez une balise dans le menu déroulant adjacent.</p>
<p>Par exemple, cliquez sur Dans la balise, puis sur title.</p>
<p>5 Cliquez sur le bouton plus (+) pour limiter la recherche aux balises ayant un ou plusieurs attributs spécifique.</p>
<p>Comme la balise <title> est dépourvue d'attributs, il est inutil d'utiliser cette option pour rechercher toutes les pages sans titre du site.</p>
<p>6 Lancez la recherche :</p>
<ul>
<li>Cliquez sur Recherche suivant pourmettre en surbrillance l'occurrence suivante du texte recherche dans le document en cours, puis dans le document suivant, si vous recherche porte sur plusieurs documents. </li>
<li>Cliquez sur Recherche tout pour générer une liste de toutes les occurrences du texte recherche dans le document en cours ou, si vous effectue la recherche sur un réseau ou un site, pour générer une liste des documents qui contiennent la balise. Cette liste apparait dans l'onglet Recherche du panneau Résultats.</li>
</ul>
<h1 id="enregistrement-de-modèles-de-recherche">Enregistrement de modèles de recherche</h1>
<p>Voupe enregistrer des modles de recherche en vue d'un usage ultérieur, en cliuant sur l'icone Enregistrer la requête (reprsentant une disquette) dans la boite de dialogue Recherche et replacer. L'enregistrement d'une requête est judiciaux si vous effectuez régulierement la même recherche et ne souhaitez pas reconstruire le modele de recherche à chaque fois, par exemple pour supprimer les balises non standard des documents créé par un autre editor HTML visuel ou pour confirmer que toutes les images dans un fisier disposent des attributs height, width et alt avant que le document ne soit publié sur le Web.</p>
<h1 id="pour-enregistrer-un-modele-de-recherche">Pour enregistrer un modele de recherche :</h1>
<p>1 Dans la boîte de dialogue Rechercher et replacer (Edition > Rechercher et replacer), définièsez les paramètres de la recherche.</p>
<p>Si vous exécutez une recherche de balise ou de texte (avancé), voir « Recherche de balises et d'attributs», page 205 ou « Recherche d'un texte contenu dans des balises spécifique », page 206 pour plus d'informations sur la définition de paramètres de recherche supplémentaires.</p>
<p>2 Cliques sur l'icone Enregistrer la requête (reprsentant une disquette).</p>
<p>L'emplacement par défaut pour les enregistements de requêtes est le dossier Configuration/Queries, qui se trouve dans le repertoire de l'application Dreamweaver.</p>
<p>3 Dans la boîte de dialogue qui s'affiche, attribués au filchier un nom identifiant la requête, puis cliquez sur Enregistrer.</p>
<p>Par exemple, si le modele de recherche inclut la recherche de balises img sans l'attribut alt, vous pouze nommer la requête img_sans_alt.dwr. Les requêtes de recherche se terminent par l'extension dwq ; les requêtes de remplacement, par l'extension dwr.</p>
<h1 id="pour-rappeler-un-modele-de-recherche">Pour rappeler un modele de recherche :</h1>
<p>1 Choisissez la commande Edition > Rechercher et replacer.</p>
<p>2 Cliques sur l'icone Charger la requête (reprsentant un dossier).</p>
<p>La boîte de dialogue Charger la requête s'ouvre automatiquement dans le réseau Configuration/Queries. Vous pouvez naviguer vers un autre réseau si vous avez enregistré des requêtes ailleurs.</p>
<p>3 Sélectionnéz un fichier de requête, puis cliquez sur Ouvrir.</p>
<p>Si vous vous trouvez dans la boite de dialogue Rechercher,seules les requêtes de recherche (fichiers .dwq) sont disponibles. Si vous vous trouvez dans la boite de dialogue Remplacer,les requêtes de recherche (fichiers .dwq) et de remplacement (fichiers .dwr) sont toutes deux disponibles.</p>
<p>4 Cliquez sur Rechercher suivant, Rechercher tout, Remplacer ou Remplacer tout pour lancer la recherche.</p>
<h1 id="a-propos-des-expressions-régulières">A propos des expressions régulières</h1>
<p>Les expressions régulières sont des modèles décrivant des combinaisons de caractères dans un texte. Utilisez-les dans vos recherches pour déscrie des concepts tels que « phrases contenant le mot 'untel' » et « valeurs d'attribut contenant un nombre ». Le tableau ci-dessous présente les caractères spéciaux des expressions régulières, leur signification et des exemples d'utilisation.</p>
<p>Pour rechercher du texte contenant un des caractères spéciaux représentés dans le tableau, indiquez qu'il s'agit d'un caractère spécial à l'aide d'une barre oblique inversée. Par exemple, pour rechercher l'astérisque dans la phrase conditions spéciales*, vous pouvez utiliser un modèle de recherche tel que celui-ci : spéciales*. Si vous n'indiquez pas l'astérisque comme caractère spécial, vous trouverez toutes les occurrences de « spéciales » (de même que « spéciale », « spécialess » et « spécialessss »), et pas seulement celles qui sont suivies d'un astérisque.</p>
<table><tr><td>Caractère</td><td>trouve</td><td>Exemple</td></tr><tr><td>^</td><td>Début de saisie ou de ligne.</td><td>^T trouve « T » dans « Tonnerre de Brest » mais pas dans « La case de l'oncle Tom »</td></tr><tr><td></td><td>Fin de saisie ou de ligne.</td><td>n trouve « n » dans « malin » mais pas dans « noir »</td></tr><tr><td>*</td><td>Le caractère précédent, O ou plusieurs fois.</td><td>um* trouve « um » dans « rhum », « umm » dans « yummy » et « u » dans « rouge »</td></tr><tr><td>+</td><td>Le caractère précédent, une ou plusieurs fois.</td><td>um+ trouve « um » dans « rhum », « umm » dans « yummy » mais rien dans « rouge »</td></tr><tr><td>?</td><td>Le caractère précédent, une fois au maximum (en d'autres termes, le caractère précédent est facultatif).</td><td>st?on trouve « son » dans « Johnson » et « ston » dans « Johnston », mais rien dans « Appleton » ou « tension »</td></tr><tr><td>.</td><td>Tout caractère, sauf une nouvelle ligne (retour à la ligne).</td><td>. an trouve « ran » « tan » et « lan » dans le mot « rantanplan »</td></tr><tr><td>x|y</td><td>Soit x, soit y.</td><td>FF0000 | 0000FF trouve « FFO0000 » dans BGCOLOR="#FF0000" et « 0000FF » dans FONT COLOR="#0000FF".</td></tr><tr><td>{n}</td><td>Exactement n occurrences du caractère précédent.</td><td>1{2} trouve « II » dans « elle » et les deux premiers I de « éillle», mais ne trouve rien dans « léger »</td></tr><tr><td>{n,m}</td><td>Au moins n et au plus m occurrences du caractère précédent.</td><td>F{2,4} trouve « FF » dans « #FF0000 » et les quatre premiers F dans #FFFFFFF.</td></tr><tr><td>[abc]</td><td>L'un des caractères entourés de crochets. Spécifiez une plage de caractères à l'aide d'un trait d'union (par exemple, [a-f] équivaut à [abcdef]).</td><td>[e-g] trouve « e » dans « œil », « f » dans « fil » et « g » dans « garde »</td></tr><tr><td>[^abc]</td><td>Tout caractère non inclus entre les crochets. Spécifiez une plage de caractères à l'aide d'un trait d'union (par exemple, [^a-f] équivaut à [^abcdef]).</td><td>[^aeiou] trouve initialement « r » dans « orange », « b » dans « balle » et « k » dans « eek! »</td></tr><tr><td>\b</td><td>Limits de mot (par exemple un espace ou un retour chariot).</td><td>\bb trouve « b » dans « balle » mais pas dans « gober » ou « snob »</td></tr><tr><td>\B</td><td>Non limite de mot.</td><td>\Bb trouve « b » dans « gober » mais pas dans « balle »</td></tr><tr><td>\d</td><td>Tout chiffre. C'est l'équivalent de [0-9].</td><td>\dtrouve « 3 » dans « C3PO » et « 2 » dans « appartement 2G ».</td></tr><tr><td>\D</td><td>Tout caractère alphabétique et non numérique. C'est l'équivalent de [^0-9].</td><td>\Dtrouve « S » dans « 900S » et « Q » dans « Q45 ».</td></tr><tr><td>\f</td><td>Saut de page.</td><td></td></tr><tr><td>\n</td><td>Saut de ligne.</td><td></td></tr><tr><td>\r</td><td>Retour chariot.</td><td></td></tr><tr><td>\s</td><td>Tout « espace blanc », ou caractère d'espace : espace, tabulation, saut de page ou saut de ligne.</td><td>\svaltrouvê « val » dans « le val André » mais pas dans « aval »</td></tr><tr><td>\S</td><td>Tout caractère autre qu'un « espace blanc ».</td><td>\Svaltrouvê « val » dans « aval » mais pas dans « le val André »</td></tr><tr><td>\t</td><td>Tabulation.</td><td></td></tr><tr><td>\w</td><td>Tout caractère alphanumeric, y compris le caractère de soulignement. C'est l'équivalent de [A-Za-z0-9_].</td><td>c\w* trouve « chien » dans « le chien noir », ainsi que « cou » et « chien » dans « le cou du chien noir »</td></tr><tr><td>\W</td><td>Tout caractère non alphanumeric. C'est l'équivalent de [^A-Za-z0-9_].</td><td>\Wtrouvê « & » dans « Tintin & Milou » et « % » dans « 100 % »</td></tr><tr><td>Contrôle+Entrée ou Maj+Entrée (Windows), ou Contrôle+ Retour ou Maj+Retour ou Commande+Retour (Macintosh)</td><td>Retour chariot. Veiliez à désactiver l'options Ignorer les différences entre les espaces blancs lorsque vous effectuez ce type de recherche si vous n'utilise pas des expressions régulières. Notez que cette recherche porte sur un caractère particulier et non sur la notion de return à la ligne ; par exemple, elle ne trouvera pas une balise <br>ou <p>. Les retours chariot sont représentés par des espaces dans la fenêtre de document, et non par des sauts de ligne.</td><td></td></tr></table>
<p>Utilissez des parenthèses pour définir au sein de l'expression régulière des groupes auxquels il sera fait ↔reference plus tard; utilisez (1, )2, 3, etc. (utilisze () dans le champ Recherche et la barre oblique inverse () dans le champ Remplacer) pour faire ↔reference au premier, deuxième, troisisième, etc., groupe entre parenthèses. Par exemple, la recherche de (d+) (\backslash) (d+) (\backslash) (d+) et le remplacement par 2/1/$3 échangent le jour et le mois dans une date séparée par des barres obliques (pour effectuer une conversion entre des dates de style américain et des dates de style européen).</p>
<h1 id="accès-aux-références-de-langue">Accès aux références de langue</h1>
<p>Le panneau Récurrence vous permet de-disposer d'un outil de référence rapide pour les langages de marquage,les objets JavaScript et les styles CSS et leurs attributs.Le panneau Récurrence contient des informations sur les balises,les objets ou les styles spécifiques avec lesquels vous travailliez en mode Code (ou dans l'inspecteur de code).</p>
<h1 id="pour-ouvrir-le-panneau-rérémonce">Pour ouvrir le panneau Rérémonce :</h1>
<p>1 En mode Code, cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enfoncée (Macintosh) sur une balise, un attribut ou un mot-clé. <br />
2 Choisissez Reforence dans le menu contextual.</p>
<p>Le panneau Récurrence qui apparait affiche des informations sur la balise, l'attribut ou le mot-clé sur lequel vous avez cliué. Pour ajuster la taille du texte dans le panneau Récurrence,CHOISSEs Grande police, Police moyenne ou petite police dans le menu Options (petite flèche en haut à droite du panneau).</p>
<p>Le menu dérouulant Livre affiche le nom du manuel dont les documents de référence sont tirés. Pour afficher les balises, les objets ou les styles d'un autre ouvrage,CHOISSEZ-en un autre dans le menu dérouulant Livre.</p>
<p><img alt="" src="images/68ba9cb36dd86b0a0455f81c91bbae93ee315eb6a41614e1a196f2fd7eb0d5c1.jpg" /></p>
<p>Le menu dérounant Balise, Objet ou Style (selon l'ouvrage sélection) affiche la balise, l'objet ou le style que vous avez sélectionné dans l'Affichage de code (ou dans l'inspecteur de code). Pour voir les informations sur une autre balise, un autre object ou un autre style,CHOISSEZ-en un dans le menu.</p>
<p>A côté du menu dérouulant Balise, Objet ou Style se trouve un menu contenant une liste d'attributs pour la balise que vous avez可以选择. L'objet Description est selectionné par défaut. Il contient une description de la balise可以选择. Vous pouvez également selectionner un attribut dans le menu pour voir d'autres informations à son sujeit.</p>
<h1 id="chapitre-14-2">CHAPITRE 14</h1>
<h1 id="optimisation-et-débogage-de-code">Optimisation et débogage de code</h1>
<p>Macromedia Dreamweaver MX you permit d'optimiser et de déboguer votre code. Ainsi, vous pouvez valider des balises, rendre votre document conforme à l'XHTML ou déboguer des codes JavaScript.</p>
<p>Ce chapitre couvre les sujets suivants :</p>
<ul>
<li>« Nettoyage de code», page 211 </li>
<li>« Vérification de l'équilibre des balises et des accolades», page 212 </li>
<li>« Validation de balises», page 213 </li>
<li>« Conformité des pages XHTML», page 213 </li>
<li>« Utilisation du débogueur JavaScript», page 217 </li>
<li>« Utilisation du débogueur ColdFusion», page 223</li>
</ul>
<h1 id="nettoyage-de-code">Nettoyage de code</h1>
<p>Utilisez la commande Nettoyer le code HTML ou Nettoyer le code XHTML pour supprimer des balises vides, combiner des balises font imbriquées et nettoyer le code HTML/XHTML désordonné ou illisible.</p>
<p>La commande Nettoyer le code XHTML corrige les erreurs de syntaxe, définit les attributs de balise en minuscules et ajoute ou signale les attributs manquants d'une balise dans un document XHTML. ÀpRES l'exécution de la commande Nettoyage du code XHTML, une boîte de dialogue affiche le nombre de balises img et area qui ne sont pas associées à un attribut alt.</p>
<p>Pour nettoyer le code HTML généra à partir d'un document Microsoft Word, voir « Nettoyage de code HTML Microsoft Word » dans l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver).</p>
<h1 id="pour-nettoyer-le-code">Pour nettoyer le code :</h1>
<p>1 Ouvrez un document.</p>
<ul>
<li>S'il s'agit d'un document HTML, choisissez Commandes > Nettoyer le code HTML. </li>
<li>S'il s'agit d'un document XHTML,CHOISSEZ Commandes >Nettoyer le code XHTML.</li>
</ul>
<p>2 Dans la boîte de dialogue qui s'affiche, choisissez parmi les options suivantes :</p>
<ul>
<li>
<p>Supprimer Balises de contueur vides supprime toute paire de balises sans contenu. Par exemple, <b></b> et <font color="FF0000"></font> sont considérées comme des balises vides, alors que la balise <b> dans <b> texte</b> ne l'est pas.</p>
</li>
<li>
<p>Supprimer Balises redondantes imbriquées supprime toutes les occurrences redondantes d'une balise. Par exemple, dans le code <b>C'est ce que je voulais <b>vaientment</b> dire</b>, les balises b qui encadrrent le mot « vraiment » sont redondantes et seront supprimées. </p>
</li>
<li>Supprimer Commentaires HTML ne faisant pas partie de Dreamweaver supprime tous les commentaires qui n'ont pas ete insere s par Dreamweaver. Par exemple, <!--begin body text--> sera supprimé, mais <!-- #BeginEditable "doctitle" --> ne le sera pas, car il s'agit d'un commentaire Dreamweaver qui marque le début d'une zone modifiable dans un modele. </li>
<li>Supprimer Marqueur spécial Dreamweaver </li>
<li>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 pouze pas voir apparaitre sur votre site (par exemple, blink). Séparez les différentes balises par des virgules (par exemple, font, blink). </li>
<li>Combiner les balises de <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 remplaça par <font font="7" font="#FF0000">rouge</font>. </li>
<li>Afficher le journal à la fin affiche un message d'advertissement détaillant les modifications apportées au document des que le nettoyage est terminé. <br />
3 Cliquez sur OK.</li>
</ul>
<p>Selon la taille du document et le nombre d'options sélectionnées, le nettoyage peut prendre plusieurs secondes.</p>
<h1 id="vérification-de-léquilibre-des-balises-et-des-accolades">Vérification de l'équilibre des balises et des accolades</h1>
<p>Lorsque vous rédigez et modifiez votre code en mode Code ou dans l'inspecteur de code, vous pouvez vérifier que les balises et les accolades ({}) sont équilibrées dans la page. La vérification de l'équilibre des balises consiste à s'assurer qu'à chaque balise d'ouverture correspond une balise de fermetre, ce qui est particulièrement utile si vous utilise plusieurs niveaux d'imbrication dans votre code, notamment lorsque plusieurs tableaux sont imbriqués dans d'autres tableaux.</p>
<h1 id="pour-vérifier-si-les-balises-sont-équilibrées">Pour vérifier si les balises sont équilibrées :</h1>
<p>1 Ouvrez le document en mode Code. <br />
2 Placez le point d'insertion dans le code imbriqué à vérifier. <br />
3 Choisissez Edition > Sélectionner balise parente.</p>
<p>Les balises correspondantes de délimitation s'affichent en surbrillance dans votre code. Si vous choisissez de nouveau Edition > Sélectionner balise parente tandis que toutes vos balises sont équilibrées, Dreamweaver finit parmettre en surbrillance les balises <htm1> et </htm1> situées aux extrémités.</p>
<h1 id="pour-vérifier-si-les-accolades-sont-équilibrées">Pour vérifier si les accolades sont équilibrées :</h1>
<p>1 Ouvrez le document en mode Code. <br />
2 Placez le point d'insertion dans le code imbrique a vérifier.</p>
<p>3 Choisissez Edition > Equilibrer les accolades.</p>
<p>Les balises correspondantes de délimitation s'affichent en surbrillance dans votre code. Choisissez de nouveau Edition > Equilibrer les accolades pourmettre les balises correspondantes délimitant la seLECTION précédente en surbrillance.</p>
<h1 id="validation-de-balises">Validation de balises</h1>
<p>Le validateur de Dreamweaver vous permet de vérifier si des erreurs de balises ou de syntaxe sont presente dans le code. Le validateur prend en charge un grand nombre de langages de balise, notamment plusieurs versions de HTML, XHTML, ColdFusion Markup Language (CFML), JavaServer Pages (JSP) et Wireless Markup Language (WML). Vous pouvez également valider un document XML.</p>
<p>Remarque : pour valider l'accessibilité d'un document, voir « Test de l'accessibilité de votre site Web », page 364.</p>
<p>Vousspuvezdefinirlesprefencienduvalidateur,notamentspecifierleslangagesdebalisequiserviront de reference au validateur pour sesverifications,lesproblèmespecificquesquelevalidateurdoitrelever,aisqueltesypdes'erreursqu'ildoitsignaler.Pourplusd'informations,voir «Definition des préférences duvalidateur»,page187.</p>
<p>Vou puez executer le validateur pour le document en cours ou une balise selectionnee.</p>
<h1 id="pour-executer-le-validateur">Pour executer le validateur :</h1>
<p>1 Procedez de l'une des manieres suivantes: <br />
- Dans le cas d'un fichier XML (ou XHTML),CHOISSEZ Fichier > Vérifier la page > Valider en XML. <br />
- A défaut,CHOISSEZ Fichier > Verifier la page > Valider le marqueur.</p>
<p>L'onglet Validation du panneau Résultats affiche le message « Pas d'erreur ou d'advertissement » ou ennumère les erreurs de syntaxe relevantes.</p>
<p>2 Double-cliquez sur le message d'erreur pour lemettre en surbrillance dans le document. <br />
3 Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enfoncée (Macintosh) dans le rapport pour l'enregistrer sous forme de fichier XML ou pour l'afficher dans un navigateur (ce qui vous permet de l'imprimer).</p>
<h1 id="conformité-des-pages-xhtml">Conformité des pages XHTML</h1>
<p>Cette section présente le code XML et XHTML, la configuration requise pour le code XHTML et les feuilles de style en cascade (CSS) et explique comment creer des documents compatibles avec XHTML.</p>
<p>Cette section contient les rubriques suivantes :</p>
<ul>
<li>« A propos de XML et de XHTML», page 214 </li>
<li>« A propos du code XHTML génére par Dreamweaver», page 215 </li>
<li>« Utilisation des feuilles de style en cascade (CSS) avec XHTML », page 216 </li>
<li>« Conformité des documents XHTML», page 217</li>
</ul>
<h1 id="a-propos-de-xml-et-de-xhtml">A propos de XML et de XHTML</h1>
<p>Le langage XML (Extensible Markup Language) définit la structure des informations ainsi que leur stockage dans une base de données. Par exemple, un langage XML dédié à la cuisine pourrait compter une balise <recette>, laquelle pourrait à son tourprésenter les balises <en-tête>, <ingredients> et <instructions>. L'atout du langage XML repose sur le fait qu'il permet de stocker les informations dans une base de données et de les en extraire, de les restituer dans une multitude de formats et de les utiliser à des fins multiples (par exemple, sur une page Web, avec un ordinateur de poche ou un téléphone cellulaire, ou encore un livre de cuisine, une fiche de recette ou un ouvrage sur la coriandre).</p>
<p>Le langage XHTML (Extensible Hypertext Markup Language) n'est autre qu'une nouvelle mouture de HTML sous la forme d'une application XML. Quasiment identique à HTML 4.01, il est toute fois plus rigoureux et soigné.</p>
<h1 id="avantages-de-xhtml">Avantages de XHTML</h1>
<p>En règle générale, l'utilisation de XHTML révèle les avantages de XML et garantit la compatibilité descendante et ascendante de vos documents Web. Voici quelques arguments en faveur de l'utilisation de XHTML :</p>
<ul>
<li>XHTML s'announce comme le succesur de HTML. Si vous voulez qu'a l'avenir cette site Internet soit visible et impeccablement restitue, il serait judiciaux d'adopter le codage en XHTML dés maintainant. </li>
<li>XHTML est compatible avec tous les périhériques, et pas seulement les PC. </li>
<li>XHTML est un langage XML qui présente donc un potentiel d'extension. Vous pouvez également utiliser des outils XML standard pour afficher, modifier et valider vos documents XHTML. </li>
<li>Les documents XHTML peuvent utiliser des applications telles que des scripts et des applets, qui seront sur le modèle d'objet de document (DOM) HTML ou XML. </li>
<li>XHTML nécessite un code de qualité. Il réduit ainsi les différences de restitution d'un document Web observées entre plusieurs agents utilisateurs, tels que les navigateurs Web, puisque certaines de ces disparités s'expliquent par le formatage incorrect ou inadéquat du code.</li>
</ul>
<h1 id="migration-entre-html-et-xhtml">Migration entre HTML et XHTML</h1>
<p>XHTML est compatible avec les navigateurs et autres agents utilisateurs qui prennten en charge HTML 4 et XML. Il vous est donc possible d'adopter XHTML sans exclure quiconque et sans attendre que les agents utilisateurs XML se rependent davantage. Dans la mesure ou XHTML et HTML sont très similaires, la migration de HTML vers XHTML se fait en douceur.</p>
<h1 id="ressources-web-pour-xhtml">Ressources Web pour XHTML</h1>
<p>Pour plus d'informations sur XHTML, consultez le site Web du World Wide Web Consortium (W3C), lequel présente les specifications de XHTML 1.1 - Module-Based XHTML (http:// www.w3.org/TR/xhtml11/) et XHTML 1.0 (http://www.w3c.org/TR/xhtml1/), ainsi que les sites de validateur XHTML où vous trouvrez des fischiers Web (http://tokenizer.w3.org/) et des fischiers locaux (http://tokenizer.w3.org/file-upload.html).</p>
<h1 id="a-propos-du-code-xhtml-génére-par-dreamweaver">A propos du code XHTML génére par Dreamweaver</h1>
<p>Dreamweaver génére du code XHTML et nettoie le code XHTML existant, conformément à la plupart des specifications XHTML, et ce automatiquement. Quant aux autres specifications XHTML, Dreamweaver met à votre disposition les outils ajustés pour vous y conformer.</p>
<p>Remarque : certaines configurations décrites dans cette section sont communes à plusieurs versions de HTML.</p>
<p>Le tableau ci-dessous répertorie les specifications XHTML automatiquement observées par Dreamweaver.</p>
<table><tr><td>Spécification XHTML</td><td>Action de Dreamweaver</td></tr><tr><td>Si le codage de caractères d'un document est différent du mode UTF-8 par défaut, le document doit composer une déclaration XML.</td><td>Ajoute une déclaration XML à un document XHTML et spécifique le mode de codage ; par exemple : <?xml version="1.0" encoding="iso-8859-1"?></td></tr><tr><td>Une déclaration DOCTYPE doit précérer l'objet racine dans le document, laquelle doit faire référence à l'un des trois fichiers DTD (Document Type Definition) pour XHTML (strict, transitionnel ou jeu de cadres).</td><td>Ajoute une déclaration XHTML DOCTYPE à un document XHTML :."<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Ou, si le document XHTML compte un jeu de cadres :."<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"></td></tr><tr><td>L'objet racine du document doit être « html », et l'objet html doit désigner l'espace de noms XHTML.</td><td>Ajoute l'attribute namespace à l'objet html comme suit : <html xmlns="http://www.w3.org/1999/xhtml"></td></tr><tr><td>Un document standard doit composer les éléments structurels head, title et body. Un document de jeu de cadres doit composer les éléments structurels head, title, body and frameset.</td><td>Inclut les éléments head, title et body dans un document standard et les éléments head, title et frameset dans un document avec jeu de cadres.</td></tr><tr><td>L'imbrication de tous les éléments du document doit être correcte : <p>Voici un <i>exemple incorrect.</p></i><p>Voici un <i>exemple correct.</i></p></td><td>Génére correctement le code imbriqué et, pendant le nettoyage du code XHTML, corrighe l'imbrication du code non généré par Dreamweaver.</td></tr><tr><td>Tous les nombres d' éléments et d'attributs doivent être rédigés en minuscules.</td><td>Impose l'utilisation des minuscules dans les nombres d' éléments et d'attributs XHTML du code XHTML génééré par ses soins et pendant le nettoyage du code XHTML, indépendamment des préférences de casse définies pour la balise et l'attribut.</td></tr><tr><td>Tous les éléments doivent se terminer par une balise de fin, à moins qu'illes ne soient déclarées dans le fisier DTD comme EMPTY.</td><td>Insère des balises de fin dans le code génééré par ses soins, ainsi que pendant le nettoyage du code XHTML.</td></tr><tr><td>Les éléments vides doivent se terminer par une balise de fin ou la balise de début doit être fermée avec le code />. Par exemple, <br> est incorrect; la forme correcte de la balise est soit <br></br>, soit <br/>. Les éléments vides sont les suivants : area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta et, param. Pour garantir la rétrocompatibilité avec les navigateurs non XML, un espace doit précérer le code /> (par exemple, <br />, et pas <br />).</td><td>Insère les éléments vides avec un espace avant la barre oblique de fermeture des balises vides dans le code génééré par ses soins ainsi que pendant le nettoyage du code XHTML.</td></tr><tr><td>Il est impossible d'abréger les attributes ; ainsi, <td nowrap> est incorrect ; la forme correcte est <td nowrap="nowrap"> .
Cette règle s'applique aux éléments suivants : checked, compact, declare, defer, disabled, ismap, multiple, noysize, noshade, nowrap, readability et selected.</td><td>Insère des paires attribut/valeur complètes dans le code généré par ses soins, ainsi que pendant le nettoyage du code XHTML.
Remarque : un navigateur HTML ne prend pas en charge XHTML 4 risque de ne pas pouvoir interpréter ces attributs boolésns sous leur forme complète.</td></tr><tr><td>Tous les attributes doivent être placés entre guillemets.</td><td>Met les valeurs d'attribut entre guillemets dans le code généré par ses soins, ainsi que pendant le nettoyage du code XHTML.</td></tr><tr><td>Les éléments suivants doivent comporter un attribut id et un attribut name : a, applet, form, frame, iframe, img et map. Exemple : <a name="intro">Introduction</a> est incorrect; la forme correcte est <a id="intro">Introduction</a> or <a id="section1" name="intro">Introduction</a>.</td><td>Affecte la même valeur aux attributs name et id, toutes les fois où l'attribut name est défini par un inspecteur de propriétés, dans le code généré par ses soins, ainsi que pendant le nettoyage du code XHTML.</td></tr><tr><td>Dans le cas d'attributs dont les valeurs sont de type Enuméré, celles-ci doivent figurer en minuscules. Une valeur de type Enuméré est une valeur apparentant à une liste donnée de valeurs autorisées ; par exemple, l'attribut align comprend les valeurs autorisées suivantes : center, justify, left, et right.</td><td>Impose l'utilisation des minuscules pour les valeurs de type Enuméré dans le code généré par ses soins, ainsi que pendant le nettoyage du code XHTML.</td></tr><tr><td>Tous les éléments de script et de style doivent comporter un attribut de type. (La nécessite de l'attribut de type d'un élément de script a été introduite avec XHTML 4, lors de la dépréciation de l'attribut de langue.)</td><td>Définit les attributes de type et de langue dans les éléments de script ainsi que l'attribut de type dans les éléments de style, dans le code généré par ses soins, ainsi que pendant le nettoyage du code XHTML.</td></tr><tr><td>Tous les éléments img et area doit comprendre un attribut alt.</td><td>Définit ces attributes dans le code généré par ses soins et, pendant le nettoyage du code XHTML, signale les attributs alt manquants.</td></tr></table>
<h1 id="utilisation-des-feuilles-de-style-en-cascade-css-avec-xhtml">Utilisation des feuilles de style en cascade (CSS) avec XHTML</h1>
<p>En fonction de certains styles CSS, un agent utilisateur HTML (un navigateur Web, par exemple) peut produit des résultats visuels et sonores différents de ceux d'un agent utilisateur XML. Voici quelques règes à suivre pour réduire ces différences :</p>
<ul>
<li>Rédigez les noms d'éléments et d'attributs en minuscules dans les feuilles de styles CSS.</li>
</ul>
<p>Dreamweaver impose l'écriture des noms d'éléments et d'attributs en minuscules dans un document XHTML, independamment des préférences définies, dans le code géné par ses soins, ainsi que pendant le nettoyage du code XHTML.</p>
<ul>
<li>A la différence d'un programme d'analyse XML, le programme d'analyse HTML infère l'objet tbody. Si, par conséquent, vous définisse un style tbody, vous devez adjoindre l'objet tbody à vos tableaux. </li>
<li>Une feuille de style en cascade (CSS) définit diverses règes de conformité spécifique aux documents HTML et XML ; gardez donc à l'esprit que les règes HTML s'appliquent à un document XHTML diffusé au format HTML et, qu'à l'inverse, les règes XML s'appliquent à un document XHTML diffusé au format XML.</li>
</ul>
<p>Remarque : pour les documents qui spécifient l'espace de noms XHTML, les navigateurs et autres agents utilisateurs sont contraintes de continuer à reconnaître l'attribut class, et l'attribut id comme un attribut de type ID. Vous pouvez donc continuer d'employer la forme abrégée ". " pour réféencer une classe CSS d'un sélecteur (par exemple, P.note), et d'utiliser la syntaxe de sélecteur abrégée "#", même si l'agent utilisé ne peut pas interpréter le fichier DTD.</p>
<h1 id="conformité-des-documents-xhtml">Conformité des documents XHTML</h1>
<p>Cette section déscrit comment rendre un nouveau document conforme au code XHTML et comment rendre un document HTML existant conforme au code XHTML.</p>
<h1 id="pour-creer-un-nouveau-document-conforme-à-xhtml">Pour creer un nouveau document conforme à XHTML :</h1>
<p>1 Choisissez Fichier > Nouveau.</p>
<p>La boîte de dialogue Nouveau document s'affiche.</p>
<p>2 Choisissez un type de document. <br />
3 Activez la case à cocher Rendre le document conforme à l'XHTML. <br />
4 Cliquez sur OK.</p>
<h1 id="pour-creer-des-documents-conformes-au-code-xhtml-par-défaut">Pour creer des documents conformes au code XHTML par défaut :</h1>
<p>1 Choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X), puis sélectionnez la catégorie Nouveau document. <br />
2 Dans la catégorie Nouveau document,CHOISSEZ un type de document, puis activez la case a cocher Rendre le document conforme à l'XHTML. <br />
3 Cliquez sur OK.</p>
<h1 id="pour-rendre-un-document-html-existant-conforme-au-code-xhtml">Pour rendre un document HTML existant conforme au code XHTML :</h1>
<p>Ouvrez un document.</p>
<ul>
<li>S'il s'agit d'un document sans cadres, choisissez Fichier > Convertir > XHTML. </li>
<li>S'il s'agit d'un document avec cadres, Sélectionnez un cadre, puis désisissez Fichier > Convertir > XHTML. Pour convertir le document entier, repêtez cette étape pour chacun des cadres et pour le document de jeu de cadres.</li>
</ul>
<p>Remarque : il est impossible de convertir une instance d'un modele, puisqu'elle doit reprendre le même langage que le modele d'après lequel elle a ete createe. Par exemple, une instance d'un modele XHTML est always au format XHTML ; de meme , une instance d'un modele HTML reste au format HTML et ne peut donc pas etre convertier en XHTML ni dans un autre languege.</p>
<h1 id="utilisation-du-débogueur-javascript">Utilisation du débogueur JavaScript</h1>
<p>Le débogueur JavaScript vous permet d'isoler les erreurs dans le code JavaScript côté client. Vous pouvez rédigier votre code en mode Code (ou dans l'inspecteur de code), puis exécuter le débogueur pour vérifier qu'il ne contient pas d'erreurs de syntaxe ni d'erreurs logiques. Si la page contient une ou plusieurs erreurs de syntaxe, le navigateur affiche un message d'erreur; si la page contient une erreur logique, la page ne fonctionne pas correctement, mais le navigateur n'affiche pas de message.</p>
<p>Vou puez utiliser le débogueur JavaScript avec Microsoft Internet Explorer et Netscape Navigator 4.0 (mais pas Netscape Navigator 6.0).</p>
<p>Le débogueur commence par vérifier que votre code ne contient aucune erreur de syntaxe, puis exécuté le navigateur pour vous aider à identifier d'eventuelles erreurs logiques. En présence d'erreurs logiques, la boîte de dialogue Débogueur JavaScript vous permettra d'examiner les variables et les propriétés de document tandis que votre programme est en cours d'exécution. Vous pouvez définir des points d'accès (similaires à des instructions d'alerte) dans votre code pour arrêter l'exécution du programme et afficher les valeurs des objets et des propriétés JavaScript dans une liste de variables. Vous pouvez également passer à l'instruction suivante ou appeler une fonction pour voir la modification des valeurs de variable.</p>
<p>Cette section contient les rubriques suivantes :</p>
<ul>
<li>« Execution du débogueur JavaScript», page 218 </li>
<li>« Recherche d'erreurs de syntaxe», page 219 </li>
<li>« Recherche et correction des erreurs logiques», page 220 </li>
<li>« Définition de points d'arrêt», page 220 </li>
<li>« Examen du code», page 221 </li>
<li>« Observation et modification des valeurs de variables», page 222</li>
</ul>
<h1 id="exécution-du-débogueur-javascript">Exécution du débogueur JavaScript</h1>
<p>Après avoir rédigé votre code JavaScript, lancez le débogueur JavaScript pour vérifier s'il y a des erreurs. Le débogueur commence par vérifier s'il y a des erreurs de syntaxe, puis ouvre votre page dans le navigateur pour vous permettre de contrôle s'il y a des erreurs logiques.</p>
<h1 id="pour-lancer-le-débogage">Pour lancer le débogage :</h1>
<p>1 Choisissez Fichier > Débogage dans le navigateur, puis Sélectionnez un navigateur dans la liste.</p>
<p>Sous Windows, choisissez Internet Explorer ou Netscape Navigator. Sur Macintosh, choisissez Netscape.</p>
<p>Si le débogueur détecte des erreurs de syntaxe, il s'arrête et les énumère dans la fenêtre Erreurs de syntaxe dans JavaScript. Pour plus d'informations, voir « Recherche d'erreurs de syntaxe », page 219.</p>
<p>2 Si vous utilisez Netscape Navigator, cliquez sur OK dans la boite d'advertisement qui s'affiche, puis cliquez sur Autoriser dans la boite de dialogue Sécurité Java.</p>
<p>Remarque : la boîte de dialogue Sécurité Java peut ne pas s'afficher si vous avez déjà accepté un Certificat de sécurité Macromedia.</p>
<p>3 (Windows seulement) Si vous utilisez Internet Explorer, cliquez sur Oui dans la boite de dialogue Sécurité Java, puis sur OK dans la boîte d'ajretissement du débogueur.</p>
<p>Remarque : la boite de dialogue de sécurité est nécessaire dans la mesure ou le débogueur utilise un protocole Internet pour se connecter au navigateur ; en fait, il n'établit aucune connexion avec un réseau ou un serveur Internet.</p>
<p>La boîte de dialogue Débogueur JavaScript apparaît avec la fenêtre du navigateur. Le débogueur s'arrête automatiquement à la première ligne de code.</p>
<p>La figure suivante representa la barre d'outils de la boîte de dialogue Débogueur JavaScript.</p>
<p><img alt="" src="images/f701f3cd513f940aa195cac62cd87703516e38fa7aa28a32289cc162b0901b12.jpg" /></p>
<p>Pour exécuter le débogueur :</p>
<p>Cliquez sur le bouton Exécuter Situé en haut de la boîte de dialogue Débogueur JavaScript.</p>
<p>Pour arrêté le débogueur :</p>
<p>Cliquez sur le bouton Arrêteur le débogageitué en haut de la boîte de dialogue Débogueur JavaScript. La boîte de dialogue Débogueur JavaScript se refère.</p>
<h1 id="recherche-derreurs-de-syntaxe">Recherche d'erreurs de syntaxe</h1>
<p>Si le débogueur détecte des erreurs de syntaxe, il s'arrête et les écimume dans la boite de dialogue Erreurs de syntaxe dans JavaScript comme illustré par la figure suivante :</p>
<p><img alt="" src="images/b0a0ea20254574b7c93d02ad2e4b3e5bb2a06e9333badf6b31ac104c261d8662.jpg" /></p>
<p>Pour afficher la description des erreurs :</p>
<p>Selectionnez une erreur dans la boîte de dialogue Erreurs de syntaxe dans JavaScript. Une description de l'erreur s'affiche dans la zone Description détaillée.</p>
<p>Pour aller à l'erreur sélectionné dans votre code, procédez de l'une des manières suivantes :</p>
<ul>
<li>Double-cliquez sur l'erreur. </li>
<li>Cliquez sur Aller à la ligne.</li>
</ul>
<p>Le code apparait en surbrillance en mode Code ou, si ce mode est désacté, dans l'inspecteur de code.</p>
<h1 id="recherche-et-correction-des-erreurs-logiques">Recherche et correction des erreurs logiques</h1>
<p>Au démarrage du débogueur, la boîte de dialogue Débogueur JavaScript s'ouvre et interrupt l'exécution du navigateur au niveau de la première ligne de votre code. Vous pouvez définir des points d'arrêt supplémentaires sur toutes les lignes de code. Le débogueur s'arrête à chaque point d'arrêt pour vous permettre de consulter les valeurs des objets et des propriétés JavaScript dans le volet de liste des variables.</p>
<p><img alt="" src="images/231f6c9ffe69a9dd5d979bb3194250113e96c3d3913c9c5ea63d25c57762aa63.jpg" /></p>
<p>Une fois le débogueur à un point d'arrêt, vous pouvez examinerer votre code étape par étape (exéçuter une instruction à la fois) et vérifier ainsi si le programme s'exécute normalement. Le débogueur peut même passer en revue le code lié. Si, par exemple, votre code contient un lien vers un fisier source, le débogueur examine le fisier source et l'affiche dans la boîte de dialogue Débogueur JavaScript. Simultanément, vous pouvez voir les valeurs de vos variables changer dans cette programme.</p>
<h1 id="définition-de-points-darrêt">Définition de points d'arrêt</h1>
<p>Un point d'arrêt correspond à un endroit du code où l'exécution du programme doit s'arrêter. Lorsque vous définissez un point d'arrêt, un petit point rouge apparait dans la marge gauche de la boîte de dialogue Débogueur JavaScript, à titre de repère. Lorsque l'exécution du programme s'arrête à ce point d'arrêt, une petite flèche apparait sur le point et vous pouvezaminer les objets et les propriétés existant à ce point. Vous pouvez ainsi localiser rapidement la source du bogue dans le code JavaScript.</p>
<p>Vou ne pouvez définir de points d'arrêt que dans le code JavaScript (entre les balises script) ou sur une ligne dotée d'un gestionnaire d'évenement. Si vous le définisse ailleurs, Dreamweaver le place automatiquement sur la ligne de code valide suivante (ou y place le point d'insertion, si un point d'arrêt a déjà été défini sur cette ligne). S'il n'y a pas de ligne valide sur laquelle définir un point d'arrêt, vous entendrez un bip.</p>
<h1 id="pour-définiir-un-point-darrêt">Pour définiir un point d'arrêt :</h1>
<p>1 Dans la boîte de dialogue Débogueur JavaScript, placez le point d'insertion sur la ligne où ajouter le point d'arrêt. <br />
2 Dans la barre d'outils, cliquez sur le bouton Definir/Supprimer un point d'arret. <br />
3 Pour supprimer le point d'arrêt, cliquez une nouvelle fois sur le bouton Définir/Supprimer un point d'arrêt.</p>
<p>Pour supprimer tous les points d'arrêt, procédez de l'une des manières suivantes :</p>
<ul>
<li>Cliquez sur le bouton Supprimer tous les points d'arrêt situé en haut de la boîte de dialogue Débogueur JavaScript. </li>
<li>En mode Code (ou dans l'inspecteur de code),CHOISSEZ Edition > Supprimer tous les points d'arrêt.</li>
</ul>
<h1 id="examenducode">Examenducode</h1>
<p>Voussouspuezexaminervoretecodeetapeparetapeafind'executervosinstructionsune par une et en observer les résultats.Par exemple,vouspouvez sauter une condition ifetoirsi le programme s'arrêtea la premiere ligne de l'instruction conditionnelle oua la ligne executable suivante aresl'instructionif.</p>
<p>Lorsque le débogueur s'arrête à une instruction dotée d'un appel de fonction, vous pouvez vérifier la fonction pour contrôler qu'elle s'exécuté correctement. Si la fonction est correcte, vous pouvez ensorting pour permettre au débogueur d'être exécuté jusqu'àroutre de la fonction. Le programme s'arrête à la prochaine instruction rencontres après l'emplacement de l'appele de fonction. Si vous tentez d'entrée dans une instruction contenant une fonction JavaScript non standard, le débogueur JavaScript passera autre l'instruction.</p>
<h1 id="pour-passer-outre-une-instruction">Pour passer outre une instruction :</h1>
<p>Cliquez sur le bouton Sauter situé en haut de la boîte de dialogue Débogueur JavaScript.</p>
<p>Lorsque le programme s'arrête à une instruction (y compris celles dotées d'un appel de fonction), vous pouze ignorer cette instruction pour poursuivre et vous arrêté avant l'instruction suivante.</p>
<h1 id="pour-entrer-dans-une-fonction">Pour entrer dans une fonction :</h1>
<p>Cliquez sur le bouton Entrer situé en haut de la boîte de dialogue Débogueur JavaScript.</p>
<h1 id="pour-sortir-dune-fonction">Pour sortir d'une fonction :</h1>
<p>Cliquez sur le bouton Sortir situé en haut de la boîte de dialogue Débogueur JavaScript.</p>
<p>Vou puez ququement utilise I'option Sortir lorsque le debogueur se fouve dans une fonction definie par l'utiliser. Sortir d'une fonction declenché l'execution des instructions restantes dans la definition de la fonction a executer. Le debogueur s'arrête à la prochaine instruction rencontres.</p>
<h1 id="observation-et-modification-des-valeurs-de-variables">Observation et modification des valeurs de variables</h1>
<p>Pour vérifier les valeurs de vos variables tandis que vous passez le code en revue, utiliseze le volet de liste des variables situé dans la partie inférieure de la boîte de dialogue Débogueur JavaScript. Lors de l'ajout d'une variable, son nom apparait dans la colonne de gauche, tandis que la colonne de droite affiche sa valeur en cours au moment où le programme interrompt l'exécution sur un point d'arrêt ou après l'entrée dans le code.</p>
<p>La figure suivante representa la valeur en cours de plusieurs variables :</p>
<p><img alt="" src="images/c6109050f32105681ffcd64c094bda760d7701a9401e2c6b82fdad8b7146c407.jpg" /></p>
<p>Pour ajouter une variable à la liste des variables, procédez de l'une des manières suivantes :</p>
<ul>
<li>Sélectionnez le nom de la variable dans la partie Code de la boîte de dialogue Débogueur JavaScript. Cliquez sur le bouton plus (+) et appuyez sur Entrée. </li>
<li>Cliquez sur le bouton plus (+), saisissez le nom de la variable que vous voulez observer et appuyez sur Entrée.</li>
</ul>
<p>Les valeurs s'affichent en regard de chaque variable tandis que vous passez le code en revue. Si la variable est un objet doté de propriétés, développpez-la pour afficher ses propriétés et ses valeurs. Pour développer une variable, cliquez sur le bouton plus (+) (Windows) ou sur le bouton triangulaire (Macintosh), situé en regard de la variable dans la liste. La variable développée se réduit automatiquement des que vous examinez le code.</p>
<h1 id="pour-supprimer-une-variable-de-la-liste">Pour supprimer une variable de la liste :</h1>
<p>1 Sélectionnez l'élement dans la liste. <br />
2 Cliques sur le bouton moins (-).</p>
<h1 id="pour-modifier-une-valeur">Pour modifier une valeur :</h1>
<p>1 Sélectionnéz l'élement dans la liste.</p>
<p>2 Cliquez sur la valeur dans la liste des valeurs. <br />
3 Dans la zone de texte qui apparait, tapez une nouvelle valeur.</p>
<p><img alt="" src="images/082a061c0c265ec2fdb65f14d55496f9ac785b5df87442ee8261d3898f31a6e2.jpg" /></p>
<h1 id="utilisation-du-débogueur-coldfusion">Utilisation du débogueur ColdFusion</h1>
<p>Lors du développement d'applications Macromedia ColdFusion, vous pouvez configurer ColdFusion pour qu'il affiche dans un navigateur des informations qui vous seront utiles pour le débogage de l'application. Si, par exemple, une page contient une erreur, ColdFusion affiche les origines possibles de cette erreur au bas d'une page ColdFusion lors de l'ouverture de la page d'origine dans un navigateur. Si, en qualité de développement CoolFusion, vous faites de Macromedia ColdFusion MX votre serveur d'évaluation Dreamweaver, vous pouvez visualiser ces informations et corriger la page sans quitter Dreamweaver.</p>
<p>Remarque : cette fonction n'est pas prise en charge sur Macintosh. Les développpeurs 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.</p>
<p>Avant toute chose, assurez-vous que les paramètres de débogage sont actifs dans ColdFusion Administrator. Pour plus d'informations, voir l'aide de ColdFusion dans Dreamweaver (Aide > Utilisation de ColdFusion). Vérifiez également que le serveur d'évaluation Dreamweaver exécute ColdFusion MX. Pour plus d'informations sur le serveur d'évaluation de Dreamweaver, voir Choix d'un dossier pour le traitement des pages dynamiques.</p>
<h1 id="pour-déboguer-une-page-coldfusion">Pour déboguer une page ColdFusion :</h1>
<p>1 Ouvrez la page ColdFusion dans Dreamweaver.</p>
<p>2 Cliquez sur l'icone Debogage du serveur (reprsentant un globe et un éclair) dans la barre d'outils du document ouCHOISSEZ AFFICHAGE > Debogage de serveur.</p>
<p>Dreamweaver demande le filchier à partir du serveur ColdFusion MX 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.</p>
<p>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 executé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.</p>
<p>3 Si une catégorie Exceptions apparait dans le panneau Débogage de serveur, cliquez sur le bouton plus (+) pour la développement.</p>
<p>Cette catégorie s'affiche lorsque le serveur détecte un ou plusieurs problèmes sur la page. Développèze-la pour obtenir des informations sur le problème.</p>
<p>4 Dans la colonne Position du panneau Débogage de serveur, cliquez sur l'URL de la page pour ouvrir celle-ci et la corriger en mode Code.</p>
<p>Si Dreamweaver repère et ouvre cette page, la ou les lignes fautives apparaissent en surbrillance. A défaut, Dreamweaver vous demande de préciser l'emplacement de la page.</p>
<p>5 Corrigez l'erreur, enregistrez le fichier sur le serveur, puis cliquez sur Parcourir.</p>
<p>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éapparait pas dans le panneau.</p>
<p>6 Pour quitter le mode de débogage, passer en mode Code (Affichage > Code) ou en mode Création (Affichage > Création).</p>
<p>Pour garantir l'actualisation des informations de débophage à chaque fois qu'une page est affichée dans le navigateur interne, voirlez à ce que Internet Explorer recherche les versions plus récentes du filchier à chaque fois que celui-ci est demandé. Dans Internet Explorer, désisisse Outils > Options Internet, Sélectionné z'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électionné z'bouton radio A chaque visite de la page.</p>
<h1 id="chapitre-15-2">CHAPITRE 15</h1>
<h1 id="modification-du-code-en-mode-création">Modification du code en mode Création</h1>
<p>Bien que Macromedia Dreamweaver MX vous permette de créé et de modifier visuellement des pages Web sans vous soucie du code source sous-jacent, vous pouvez parfois dessentir la nécessite de modifier le code pour dispose d'un plus grand contrôle ou corriger les évventuels problèmes de votre page Web.</p>
<p>Supposons par exemple que vous scélectionniez du texte dans votre document et que vous lui appliquiez une nouvelle police, mais que cela n' affecte que la moitié de la phrase. En regardant le code, vous découvert que la balise de fermeture / font se trouve au milieu de la phrase. Pour résoudre le problème, déplacez la balise / font à la fin de la phrase.</p>
<p>Ce chapitre est concu pour les personnes qui préférent travailler en mode Création, mais qui souhaitent également disposer d'un accès rapide au code. Dreamweaver vous permet de modifier le code tout en travaillant en mode Création.</p>
<p>Ce chapitre contient les rubriques suivantes :</p>
<ul>
<li>« Modification du code avec l'inspecteur de propriétés», page 225 </li>
<li>« Modification du code avec un éditeur de balises », page 226 </li>
<li>« Modification du code avec Quick Tag Editor», page 226 </li>
<li>« Modification du code à l'aide du sélecteur de balises», page 229 </li>
<li>« Modification des scripts », page 229 </li>
<li>« Utilisation des inclusions côte serveur», page 231</li>
</ul>
<h1 id="modification-du-code-avec-linspecteur-de-propriétés">Modification du code avec l'inspecteur de propriétés</h1>
<p>Voussouvezutiliserl'inspecteurde propriétés pourexamineret modifierlesattributs dutexte ou desobjetsdansvotrepage.</p>
<h1 id="pour-utiliser-linspecteur-de-propriétés">Pour utiliser l'inspecteur de propriétés :</h1>
<p>1 Cliquez sur le texte ou selectionnez un objet dans la page.</p>
<ol>
<li>L'inspecteur de propriétés pour le texte ou l'objet s'affiche sous la fenêtre de document. Si l'inspecteur de propriétés n'est pas visible, choisissez Fenêtre > Propriétés.</li>
</ol>
<p>2 Utilisez l'inspecteur de propriétés pour modifier vos attributs.</p>
<h1 id="modification-du-code-avec-un-éditeur-de-balises">Modification du code avec un éditeur de balises</h1>
<p>Voupeuizutliser un editeur de balises pour examiner et modifier les attributs des objets dans voire page.</p>
<h1 id="pour-utiliser-un-éditeur-de-balises">Pour utiliser un éditeur de balises :</h1>
<p>1 Cliquez avec le bouton droit de la souris (Windows) ou cliquez simultanément sur la souris et la touche Contrôle (Macintosh) sur l'objet etCHOisissez Modifier la balise dans le menu contextual. L'éditeur de balises pour cet objet s'affiche. <br />
2 Modifiez les attributs de l'objet, puis cliquez sur OK.</p>
<h1 id="modification-du-code-avec-quick-tag-editor">Modification du code avec Quick Tag Editor</h1>
<p>Vou puez utilise Quick Tag Editor pour examiner et modifier rapidement les balises HTML sans quitter le mode Creation. Pour ouvrir Quick Tag Editor, appuyez sur Ctrl+T (Windows) ou Commande+T (Macintosh).</p>
<p>Cette section contient les rubriques suivantes :</p>
<ul>
<li>« A propos de Quick Tag Editor», page 226 </li>
<li>« Insertion d'une balise HTML à l'aide de Quick Tag Editor», page 226 </li>
<li>« Modification d'une balise HTML à l'aide de Quick Tag Editor», page 227 </li>
<li>« Application d'un style HTML à une sélection avec Quick Tag Editor», page 227 </li>
<li>« Utilisation du menu contextual », page 228</li>
</ul>
<h1 id="a-propos-de-quick-tag-editor">A propos de Quick Tag Editor</h1>
<p>Quick Tag Editor comporte trois modes :</p>
<ul>
<li>Insérer HTML, qui permet d'insérer du nouveau code HTML </li>
<li>Modifier balise, qui permet de modifier une balise existante </li>
<li>Envelopper avec balise, qui permet d'encadrer la seLECTION courante d'une nouvelle balise</li>
</ul>
<p>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 est le même : vous ouvrez l'éditeur, saississez ou modifiez des balises et des attributs, puis fermez l'éditeur.</p>
<p>Voupez activer tour à tour les différents modes en appuyant sur Ctrl+T (Windows) ou Commande+T (Macintosh) lorsque Quick Tag Editor est actif.</p>
<p>Si vous utilisez du code HTML non valide dans Quick Tag Editor, Dreamweaver tentera de le corriger en inscrant au besoin des guillemets fermants ou des crochets.</p>
<p>Pour effectuer des modifications HTML plus approfondies, utilisez le mode Code. Pour plus d'informations, voir « Codage dans Dreamweaver», page 197.</p>
<h1 id="insertion-dune-balise-html-à-laide-de-quick-tag-editor">Insertion d'une balise HTML à l'aide de Quick Tag Editor</h1>
<p>Vou puez utilise Quick Tag Editor pour insérer une balise HTML dans votre document.</p>
<p>Pour insérer une balise HTML à l'aide de Quick Tag editor :</p>
<p>1 En mode Création, cliquez dans la page pour placer le point d'insertion à l'endroit où vous poulez insérer le code. <br />
2 Appuyez sur Ctrl+T (Windows) ou Commande+T (Macintosh).</p>
<p>Quick Tag Editor s'ouvre en mode Insérer HTML.</p>
<p><img alt="" src="images/a0688cdde517b4abb112fbb69f68e31eb4c0646f4f633565f9c703467ef8cd5b.jpg" /></p>
<p>3 Saisissez la balise HTML, puis appuyez sur Entre.</p>
<p>La balise est insérée dans votre code.</p>
<p>4 Appuyez sur la touche Echap pour quitter Quick Tag Editor sans apporter aucun changement.</p>
<h1 id="modification-dune-balise-html-à-laide-de-quick-tag-editor">Modification d'une balise HTML à l'aide de Quick Tag Editor</h1>
<p>Vou pouvez utiliser Quick Tag Editor pour modifier une balise HTML dans votre document.</p>
<h1 id="pour-modifier-une-balise-html-à-laide-de-quick-tag-editor">Pour modifier une balise HTML à l'aide de Quick Tag Editor :</h1>
<p>1 Sélectionnez un objet en mode Création. <br />
Voussouvez é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, voir « Modification du code à l'aide du sélecteur de balises », page 229. <br />
2 Appuyez sur Ctrl+T (Windows) ou Commande+T (Macintosh). <br />
Quick Tag Editor s'ouvre en mode Modifier balise. <br />
3 Saisissez de nouveaux attributs, modifiez les attributs existants ou modifiez le nom de la balise. <br />
4 Appuyez sur Tab pour passer d'un attribut à l'autre et sur Maj+Tab pour revenir en arrêté. <br />
Par défaut, les modifications sont appliquées au document lorsque vous appuyez sur Tab ou Maj+Tab. Pour désactiver les mises à jour automatiques, choisissez Edition > Préférences > Quick Tag Editor ou Dreamweaver > Préférences > Quick tag Editor (Mac OS X). La boîte de dialogue Préférences de Quick Tag Editor s'affiche. Désélectionné l'option Appliquer changements immédiatement, puis cliquez sur OK. Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue. <br />
5 Pour fermer Quick Tag Editor et appliquer toutes les modifications, appuyez sur Entre. <br />
6 Pour quitter Quick Tag Editor sans apporder d'autres changements, appuyez sur Echap.</p>
<h1 id="application-dun-style-html-à-une-sélection-avec-quick-tag-editor">Application d'un style HTML à une sélection avec Quick Tag Editor</h1>
<p>VoussouspouceutilisqQuickTagEditor pour enveloppper uneselection dansvoiredocumenta l'aide de balises HTML d'ouverture et de fermeture.</p>
<p>Pour appliquer un style HTML à une sélection à l'aide de Quick Tag Editor :</p>
<p>1 Sélectionnez du texte ou un objet non mis en forme en mode Création.</p>
<p>Si vous scélectionné du texte ou un objet qui compte une balise HTML d'ouverture ou de fermetre, Quick Tag Editor s'ouvre en mode Modifier la balise.</p>
<p>2 Appuyez sur Ctrl+T (Windows) ou Commande+T (Macintosh), ou cliquez sur le bouton Quick Tag Editor dans l'inspecteur de propriétés.</p>
<p>Quick Tag Editor s'ouvre en mode Envelopper avec balise.</p>
<p>3 Saisissez une balise d'ouverture, tether que <font="verdana>", puis appuyez sur Entrée.</p>
<p>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.</p>
<p>4 Appuyez sur la touche Echap pour quitter Quick Tag Editor sans apporter aucun changement.</p>
<h1 id="utilisation-du-menu-contextualuel">Utilisation du menu contextualuel</h1>
<p>Dans Quick Tag Editor, vous pouvez acceder à un menu contextuel d'attributs répertioriant tous les attributs valides de la balise que vous modifie ou insérez. Si Dreamweaver ne reconnaît pas la balise que vous modifie, le menu contextuel contient tous les attributs reconnus par Dreamweaver pour toutes les balises.</p>
<p>Vou puez également désactiver le menu contextual ou modifier le délambda s'écoulant avant l' apparition du menu contextual dans Quick Tag Editor.</p>
<p>Pour afficher une liste des attributs valides pour une balise, arrêtez-vous quelques secondes pendant la modification d'un nom d'attribut dans Quick Tag Editor. Un menu contextual apparait, répertioriant tous les attributs valides de la balise que vous modifiez.</p>
<p>Utilizez le menu contextual comme suit :</p>
<ul>
<li>Lorsque vous commencez à entrer le nom d'un attribut, le menu contextualuel défile pourmettre en surbrillance le premier nom d'attribut qui commence par la ou les lettres déjà saisies. </li>
<li>Pour déplacer la surbrillance vers le haut ou vers le bas dans le menu, utilisez les touches fléchéées Haut ou Bas ou la barre de défilament. </li>
<li>Pour désirir le nom d'attribut en surbrillance, appuyez sur Entrée ou double-cliquez sur un nom d'attribut dans le menu. </li>
<li>Pour désactiver le menu contextual sans selectionner une de ses entrées, appuyez sur la touche Echap ou continuez tout simplement à taper du texte.</li>
</ul>
<p>Si vous vous arrêtez quelques secondes pendant la saisie ou la modification du nom d'une balise, un menu contextuel similaire s'affiche, répertioriant les noms de balises au lieu des noms d'attributs.</p>
<p>Pour désactiver le menu contextual ou modifier le salarié s'écoulant avant l' apparition du menu contextual :</p>
<p>1 Choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X) et scélectionnez Quick Tag Editor.</p>
<p>La boîte de dialogue Préférences de Quick Tag Editor s'affiche.</p>
<p>2 Pour désactiver le menu contextual, déslectionnez l'option Activer le menu contextual de balises.</p>
<p>3 Pour modifier le délambda avant l'apparition du menu, réglez le curseur Délambda. Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue. <br />
4 Cliquez sur OK.</p>
<h1 id="modification-du-code-à-laide-du-sélecteur-de-balises">Modification du code à l'aide du sélecteur de balises</h1>
<p>Voupeuizutiliserleselecteurdebalises pourselectionner,modifier ou supprimerlesbalises sans quitterle modeCreation.Leselecteurdebalisessetrouvendansbarredetanbasde la fenetre de document,etpresenteune sériedebalises, comme suit.</p>
<body><form><table><tr>
<h1 id="pour-modifier-une-balise">Pour modifier une balise :</h1>
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 Clique à l'aide du bouton droit (Windows) ou en maintainant la touche Contrôle enforcée (Macintosh) sur une balise dans le sélecteur de balises.
Un menu contextual s'affiche.
3 Sélectionnéz Modifier la balise dans le menu.
Quick Tag Editor s'affiche. Pour plus d'informations, voir « Modification d'une balise HTML à l'aide de Quick Tag Editor», page 227.
<h1 id="pour-supprimer-une-balise">Pour supprimer une balise :</h1>
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 maintainant la touche Contrôle enforcée (Macintosh) sur une balise dans le sélecteur de balises.
Un menu contextual s'affiche.
3 Sélectionnez Supprimer la balise dans le menu.
<h1 id="pour-sélectionner-un-objet-représenté-par-une-balise">Pour sélectionner un objet représenté par une balise :</h1>
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 selecteur de balises.
L'objet représenté par la balise est sélectionné sur la page.
Conseil : utilisez cette technique pour selectionner des lignes de tableau (balises tr) ou des cellules (balises td ).
<h1 id="modification-des-scripts">Modification des scripts</h1>
Voupez travailler avec des scripts JavaScript et VBScript cote client en mode Creation ou Code.
Cette section contient les rubriques suivantes :
- « Ecriture d'un script côte client en mode Création», page 230
- « Création d'un lien vers un fichier script externe», page 230
- « Modification d'un script en mode Création», page 230
<h1 id="ecriture-dun-script-côté-client-en-mode-création">Ecriture d'un script côté client en mode Création</h1>
Voupez écrire un script JavaScript ou VBScript pour votre page sans quitter le mode Création. Avant de commencer, assurez-vous que Dreamweaver affiche des marqueurs de script sur la page. Pour afficher des marqueurs de script, désisissez Affichage > Assistances visuelles > Éléments invisibles.
Pour insérer un script côté client en mode Création :
1 Placez le point d'insertion à l'endetroit où vous pouze insérer le script.
2 Choisissez Insertion > Objects Script > Script.
La boîte de dialogue Script s'affiche.
3 Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
<h1 id="creation-dun-lien-vers-un-fichier-script-externe">Creation d'un lien vers un fichier script externe</h1>
Vou puez creer un lien dans votre document vers un fichier script exter sans quitter le mode Creation. Avant de commencer, assurez-vous que Dreamweaver affiche des marqueurs de script sur la page. Pour afficher des marqueurs de script, choisissez Affichage > Assistances visuelles > Elements invisibles.
Pour lien un fichier de script externe :
1 Placez le point d'insertion à l'endetroit où vous pouze insérer le script.
2 Sélectionnéz Insertion > Objects Script > Script.
La boîte de dialogue Script s'affiche.
3 Cliquez sur OK sans compléter la zone de texte Contenu.
4 Sélectionné le marqueur de script dans le mode Création de la fenêtre de document.
5 Dans l'inspecteur de propriétés, cliquez sur l'icone de dossier pour rechercher et seLECTIONner le fichier de script externe ou tapez le nom de fichier dans la zone Source.
<h1 id="modification-dun-script-en-mode-création">Modification d'un script en mode Création</h1>
Vou puevez modifier un script sans quitter le mode Creation. Avant de commencer, assurez-vous que Dreamweaver affiche des marqueurs de script sur la page. Pour afficher des marqueurs de script, choisissez Affichage > Assistances visuelles > Éléments invisibles.
Pour modifier le script en mode Creation :
1 Sélectionnéz le marqueur de script.
2 Dans l'inspecteur de 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 fisier de script externe, le fisier s'ouvre automatiquement en mode Code, où vous pouvez apporder vos modifications.
Remarque : s'il n'y a pas de code entre les balises script, la boite de dialogue Propriétés du script s'ouvre, même s'il y existe également un lien vers un fichier de script externe.
3 Apportez vos modifications au script, puis cliquez sur OK.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue Propriétés du script.
<h1 id="utilisation-des-inclusions-côte-serveur">Utilisation des inclusions côte serveur</h1>
Les inclusions côté serveur sont des instructions données au serveur Web pour qu'il inclue un fichier spécifique dans une page Web avant d'envoyer la page au navigateur. Vous pouvez utiliser Dreamweaver pour insérer des inclusions côté serveur dans vos pages, modifier ces inclusions ou prévisualiser les pages contenant des inclusions.
Cette section contient les rubriques suivantes :
- « A propos des inclusions côte serveur», page 231
- « Insertion d'une inclusion côte serveur», page 232
- « Modification du contenu d'une inclusion à partir du serveur», page 232
<h1 id="a-propos-des-inclusions-côté-serveur">A propos des inclusions côté serveur</h1>
Lorsque vous ouvrez un document se trouvant sur un serveur Web, le serveur traite les instructions d'inclusion et create un document dans lequel ces instructions sont replacées par le contenu du fichier inclus. Le serveur envoie ensuite ce nouveau document à votre navigateur. Cependant, lorsque vous ouvrez un document local directement dans un navigateur, c'est-à-dire sans utiliser le serveur pourTRAITER les instructions d'inclusion dans ce document, le navigateur ouvre le document sansTRAITER ces instructions et le fichier cense estre inclus n'apparait pas dans le navigateur. Il peut donc s'aver dificile, sans Dreamweaver, de consulter les fichiers locaux et de les voir tels qu'ils apparaitront une fois que vous les aurez places sur le serveur.
Avec Dreamweaver, cependant, vous pouvez prévisualiser les documents tels qu'ils apparaisent sur le serveur, à la fois dans le mode Création et lorsque vous affiche un aperçu dans un navigateur.
Placer une instruction cote serveur dans un document a pour effet d'insérer une referrer a un fichier externe, sans insérer le contenu du fichier spécifique dans le document en cours. Dreamweaver affiche le contenu du fichier externe en mode Creation, ce qui facilite la creation de pages.
Vou ne pouvez pas modifier le fichier inclus directement dans un document. Pour modifier le contenu d'une SSI, vous doivent modifier directement le fichier que vous incluez. Toute modification apportée au fichier externe est automatiquement refletée dans chaque document dans lequel il est inclus.
Il existe deux types d'inclusions à partir du serveur : les inclusions Virtuel et Fichier. Choisissez-les en fonction du type de serveur Web que vous utilisez :
- Si vous serveur est un serveur Apache Web, choisissez Virtuel. (choix par défaut dans Dreamweaver). Dans Apache, Virtuel fonctionne dans tous les cas, tandis que Fichier fonctionne seulement dans certains cas.
- Si vous serveur est un serveur Microsoft IIS (Internet Information Server),CHOISEZ Fichier. (Virtuel ne fonctionne avec IIS que dans des cas précis). Malheureusement, IIS ne vous permet pas d'inclure un fichier dans un dossier situé au-dessus du dossier en cours dans la hierarchie des fichiers, à moins qu'un logiciel spécial n'ait ete Installe sur le serveur. Pour pouvoir inclure un fichier d'un dossier place plus haut dans la hierarchie des dossiers sur un serveur IIS, demandez a votre administrateur systeme si le logiciel nécessaire est instalé.
- Pour les autres types de serveurs ou si vous ne savez pas quel type de serveur vous utilisez, demandez à votre administrateur système在哪里 option utiliser.
Certaines serveurs sont configurés de façon à examiner tous les fischiers pour voir s'ils contiennent des inclusions côté serveur et d'autres pour examiner uniquement les fischiers portant une extension particulière, telle que .html, .shtm ou .inc. Si une inclusion côté serveur ne fonctionne pas, demandez à votre administrateur système si le nom du filchier utilisant l'inclusion doit avoir une extension spéciale (par exemple, si le filchier porte le nom canoe.html, il vous faudra peut-être replacer ce nom par canoe.shtml). Si vous voulez que vos filchiers conservent leurs extensions .html ou .htm, demandez à votre administrateur système de configurer le serveur de façon à ce qu'il examine tous les fischiers (et pas seulement les fischiers portant une certaine extension) pour les inclusions à partir du serveur. L'analyse des inclusions à partir du serveurDemandant 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 fischiers.
<h1 id="insertion-dune-inclusion-côte-serveur">Insertion d'une inclusion côte serveur</h1>
Vou pouve utiliser Dreamweaver pour insérer des inclusions cote serveur dans votre page.
<h1 id="pour-insérer-une-ssi">Pour insérer une SSI :</h1>
1 Choisissez Insertion > Objects Script > Inclusion cote serveur.
2 Dans la boite de dialogue qui s'affiche, recherche le fichier et selectionnez-le.
<h1 id="pour-changer-de-fichier-inclus">Pour changer de fichier inclus :</h1>
1 Sélectionnez la SSI dans la fenêtre de document.
2 Ouvrez l'inspecteur de propriétés (Fenêtre > Propriétés).
3 Procedez de l'une des manieres suivantes :
- Cliquez sur l'icone de dossier et localisez puis selectionné le nouveau fjchier à inclure.
- Dans la zone de texte, tapez le chemin et le nom de fichier du nouveau fichier à inclure.
<h1 id="modification-du-content-dune-inclusion-à-partir-du-serveur">Modification du content d'une inclusion à partir du serveur</h1>
Vou puez utiliser Dreamweaver pour modifier des inclusions cote serveur. Pour modifier le contenu associé au fjichier inclus, vousdez ouvrir le fjichier.
<h1 id="pour-modifier-une-ssi">Pour modifier une SSI :</h1>
1 Sélectionnez l'inclusion côté serveur soit en mode Création, soit en mode Code, et cliquez sur Modifier dans l'inspecteur de propriétés.
Le fichier inclus s'ouvre dans une nouvelle fenetre de document.
2 Modifiez le fichier, puis enregistrrez-le.
Les modifications sont immédiatement reflètées dans le document courant et dans tous les autres documents ultérieurs qui incluent ce fichier.
<h1 id="partie-iv-conception-de-la-mise-en-page">Partie IV Conception de la mise en page</h1>
Utilisez les outils de création visuelle de Dreamweaver pour creer des mises en page sophistiquées.
Cette partie du manuel contient les chapitres suivants :
- Chapitre 16, « Présentation de contenu à l'aide de tableaux »
- Chapitre 17, « Le mode de Mise en forme »
- Chapitre 18, « Utilisation de cadres »
<h1 id="chapitre-16-2">CHAPITRE 16</h1>
<h1 id="présentation-de-contenu-à-laide-de-tableaux">Présentation de contenu à l'aide de tableaux</h1>
Les tableaux sont très utiles pour partager des données tabulaires etmettre en forme du texte et des images dans une page HTML. Un tableau comprend au moins une ligne ; chaque ligne comporte au moins une cellule. Bien que les colonnes ne soient généralement pas spécifiées explicitement en code HTML, Dreamweaver vous permit de manipuler les colonnes, les lignes et les cellules.
Une fois un tableau créé, il est facile d'en modifier l'aspect et la structure. Vous pouvez effectuer les opérations suivantes :
- Ajouter un content
- Ajouter, supprimer, fractionner et fusionner des lignes ou des colonnes
- Modifier les propriétés de couleur ou d'alignement d'un tableau, d'une ligne ou d'une cellule
- Copier et coller des cellules
Remarque : un grand nombre de concepteurs utilisent des tableaux pourmettre des pages Web en forme. Dreamweaver offe deux methodes pour visualiser et manipuler les tableaux : le mode Standard, dans lequel les tableaux sont presentes comme une grille de lignes et de colonnes, et le mode Mise en forme, qui vous permit de dessiner, redimensionner et deplacer des rectangles sur la page tout en continuant d'utiliser les tableaux comme structure sous-jacente (voir « Le mode de Mise en forme », page 253).
Ce chapitre contient les sections suivantes :
- Insertion d'un tableau , page 238
- « Ajout de containu dans une cellule de tableau», page 238
- « Importation de données tabulaires », page 239
- « Sélection d' éléments de tableau », page 239
- « Mise en forme des tableaux et des cellules», page 241
- « Redimensionnement de tableaux », page 244
- « Modification de la largeur des colonnes et de la hauteur des lignes», page 245
- « Ajout et suppression de lignes et de colonnes », page 246
- « Imbrication de tableaux», page 249
Couper, copier et coller des cellules page 249
Tri des tableaux page 251
- « Exportation des données d'un tableau», page 251
<h1 id="insertion-dun-tableau">Insertion d'un tableau</h1>
Utilisez la barre ou le menu Insérer pour creer un nouveau tableau. Pour plus d'informations sur la creation de tableaux accessibles avec Dreamweaver, voir « Création de pages Web accessibles», page 357.
<h1 id="pour-insérer-un-tableau">Pour insérer un tableau :</h1>
1 Dans la fenêtre Création du document, placez le point d'insertion à l'endetroit où vous pouze que le tableau apparaisse.
Remarque : si vous document ne contient aucun contenu, le point d'insertion peut uniquement etre placé au début du document.
2 Procedez de l'une des manieres suivantes:
- Cliquez sur le bouton Tableau dans la catégorie Commun de la barre Insertion.
- Choisissez Insertion > Tableau.
La boîte de dialogue Insérer un tableau s'affiche.
3 Spécifiez les nouvelles valeurs de votrechoix.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
<h1 id="ajout-de-contenu-dans-une-cellule-de-tableau">Ajout de contenu dans une cellule de tableau</h1>
Vou puez ajouter du texte et des images aux cellules du tableau de la meme façon que vous le faites en dehors d'un tableau.
Pour plus d'informations, voir Chapitre 19, « Insertion et mise en forme de texte», page 283 et Chapitre 20, « Insertion d'images», page 311.
Lorsque vous ajoutez ou modifiez le contenu de votre tableau, vous pouvez aller plus vite en utilisant le clavier pour naviguer dans le tableau.
Pour vous déplacer d'une cellule à une autre en utilisant le clavier, effectuez les opérations suivantes :
- Appuyez sur la touche de tabulation pour acceder à la cellule suivante.
Le fait d'appuyer sur la touche de tabulation lorsque le CURSEUR SE TRIUE dans la derniere cellule d'un tableau ajoute automatiquement une ligne.
- Appuyez sur Maj+Tab pour acceder à la cellule précédente.
- Appuyez sur les touches flechéées pour vous déplacer vers le haut, le bas, la droite ou la gauche.
<h1 id="importation-de-données-tabulaires">Importation de données tabulaires</h1>
Vouss pouvez importer dans un tableau Dreamweaver des données tabulaires créées dans une autre application (par exemple Microsoft Excel) et enregistrées dans un format texte délimité (éléments séparés par des tabulations, virgules, deux-points, points-virgules ou autres délimiteurs).
<h1 id="pour-importer-les-données-dun-tableau">Pour importer les données d'un tableau :</h1>
1 Procedez de l'une des manieres suivantes:
- Choisissez Fichier > Importer > Données tabulées.
- Choisissez Insertion > Objets du tableau > Importer les données tabulaires.
La boîte de dialogue Importer les données tabulaires s'affiche.
2 Dans la boîte de dialogue, entrez des informations sur le fichier contenant vos données. Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
<h1 id="rubrique-connexe-4">Rubrique connexe</h1>
« Affichage des enregistements de base de données », page 561
<h1 id="sélection-déléments-de-tableau">Sélection d'éléments de tableau</h1>
Vou puez selectionner un tableau entier ou encore l'ensemble d'une ligne ou d'une colonne.
Vou puez également selectionner un bloc de cellules contiguës à l'intérieur d'un tableau. Àpès avoir selectionné un tableau ou des cellules, vous pouvez :
- Modifier l'aspect des cellules sélectionnées ou du texte qu'elles contiennent. Voir « Mise en forme des tableaux et des cellules », page 241.
- Copier et coller des plages de cellules contiguës. Voir « Couper, copier et coller des cellules », page 249.
Voupez egalent selectionner plusieurs cellules non contiguës dans un tableau et en modifier les propriétés. Il est en revanche impossible de copier ou coller des ensembles de cellules non contiguës.
Pour sélectionner un tableau entier, procédez de l'une des manières suivantes :
- Cliquez dans l'angle supérieur gauche du tableau ou n'importe où sur le bord croit ou inférieur.
- Cliquez dans une cellule du tableau, puis selectionnez la balise table dans le selecteur de balises dans le coin inférieur gauche de la fenêtre de document.
- Cliquez dans une cellule du tableau, puis choisissez Modifier > Tableau > Sélectionner le tableau.
- Cliquez dans une cellule du tableau, puis selectionnez la balise table dans l'inspecteur de balises.
Des poignées de selection apparaissent sur les bords inférieurs et droits du tableau sélectionné.
<h1 id="pour-selectionner-des-lignes-ou-des-colonnes">Pour selectionner des lignes ou des colonnes :</h1>
1 Positionnez le pointeur sur le bord gauche d'une ligne ou le bord supérieur d'une colonne.
2 Lorsque le pointeur se transforme en flèche de scélection, cliquez pour scélectionner une ligne ou une colonne ou faites-le glisser pour scélectionner plusieurs lignes ou colonnes.
<h1 id="pour-selectionner-une-seule-cellule-procedez-de-lune-des-manieres-suivantes">Pour selectionner une seule cellule, procedez de l'une des manieres suivantes :</h1>
- Cliquez dans la cellule, puis selectionnez la balise td dans le selecteur de balises dans le coin inférieur gauche de la fenetre de document.
- Cliquez dans la cellule, puis choisissez Edition > Sélectionner tout.
Conseil : choisissez Edition > Sélectionner tout à nouveau lorsqu'une cellule est sélectionnée pour sélectionner tout le tableau.
- Cliquez dans une cellule du tableau, puis selectionné la balise td dans l'inspecteur de balises.
<h1 id="pour-sélectionner-une-ligne-ou-un-bloc-rectangulaire-de-cellules-procédez-de-lune-des-manières-suivantes">Pour sélectionner une ligne ou un bloc rectangulaire de cellules, procédez de l'une des manières suivantes :</h1>
- Faites glisser la souris d'une cellule à une autre.
- Cliquez dans une cellule puis maintenez la touche Maj enforcée tout en cliquant dans une autre cellule.
Toutes les cellules se trouvant à l'intérieur de la zone rectangulaire ou linéaire ainsi déliminée par les deux cellules sont sélectionnées.
<h1 id="pour-selectionner-des-cellules-non-contiguës">Pour selectionner des cellules non contiguës :</h1>
Appuyez sur Ctrl (Windows) ou Commande (Macintosh), puis cliquez sur les cellules, les lignes ou les colonnes que vous poulez selectionner.
Si chaque cellule, ligne ou colonne sur laquelle vous cliquez après avoir appuyé sur Ctrl ou sur Commande n'est pas déjà seLECTIONnée, elle est ajoutée à la selection. Si elle est déjà seLECTIONnée, elle est retiree de la selection.
<h1 id="mise-en-forme-des-tableaux-et-des-cellules">Mise en forme des tableaux et des cellules</h1>
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. Voir « Affichage et paramétrage des propriétés des tableaux », page 242, « Affichage et définition des propriétés de cellule, de ligne et de colonne », page 242 et « Utilisation d'un modèle de mise en forme pour formater un tableau », page 243.
Pourmettre en forme du texte dans destableaux,vous pouvez appliquer une mise en forme au texte selectionné ou utiliser des styles.Voir Chapitre 19,« Insertion et mise en forme de texte », page 283.
<h1 id="a-propos-des-conflits-dans-la-mise-en-forme-de-tableaux">A propos des conflits dans la mise en forme de tableaux</h1>
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 définissez la couleur jaune pour l'arrière-plan du tableau entier, 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 t d correspondant à chaque cellule de la colonne.
<h1 id="affichage-et-paramétrage-des-propriétés-des-tableaux">Affichage et paramétrage des propriétés des tableaux</h1>
Lorsqu'un tableau est selectionné, l'inspecteur de propriétés vous permet de visualiser et de modifier ses propriétés.
Pour afficher les propriétés d'un tableau :
1 Sélectionnéz le tableau.
2 Choisissez Fenetre > Propriétés pour ouvrir l'inspecteur de propriétés.
Pour afficher toutes les propriétés d'un tableau :
Si l'inspecteur de propriétés n'est pas agrandi, cliquez sur la flèche d'agrandissement située dans le coin inférieur droit pour afficher toutes les propriétés.
Pourmettre en forme un tableau dans l'inspecteur de propriétés:
1 Sélectionnez un tableau. Pour plus d'informations, voir « Sélection d'éléments de tableau », page 239.
2 Choisissez Fenetre > Propriétés pour ouvrir l'inspecteur de propriétés.
3 Modifie le formatage du tableau en définissant des propriétés.
Pour plus d'informations, cliquez sur le bouton Aide de l'inspecteur de propriétés.
<h1 id="rubrique-connexe-5">Rubrique connexe</h1>
« Utilisation d'un modele de mise en forme pour formater un tableau », page 243
<h1 id="affichage-et-définition-des-propriétés-de-cellule-de-ligne-et-de-colonne">Affichage et définition des propriétés de cellule, de ligne et de colonne</h1>
Lorsqu'une cellule ou une série de cellules est selectionnée, l'inspecteur de propriétés vous permet de visualiser et de modifier les propriétés des cellules.
Remarque : lorsque vous définissez les propriétés d'une colonne, Dreamweaver modifie les attributs de la balise t d correspondant à chaque cellule de la colonne. Lorsque vous définissez certaines propriétés d'une ligne, Dreamweaver modifie les attributs de la balise t r只不过 que de modifier les attributs de chaque balise t d dans la ligne. Lorsque vous appliquez le même format à toutes les cellules d'une ligne, en appliquant le format à la balise t r, vous obtenez un code HTML plus net et plus concis.
<h1 id="pour-afficher-les-propriétés-dun-élément-de-tableau">Pour afficher les propriétés d'un élément de tableau :</h1>
1 Sélectionnez une cellule ou une série de cellule d'une ligne ou d'une colonne.
2 Choisissez Fenetre > Propriétés pour ouvrir l'inspecteur de propriétés.
<h1 id="pour-visualiser-toutes-les-propriétés-de-cellule-de-ligne-ou-de-colonne">Pour visualiser toutes les propriétés de cellule, de ligne ou de colonne :</h1>
Si l'inspecteur de propriétés n'est pas agrandi, cliquez sur la flèche d'agrandissement située dans le coin inférieur droit pour afficher toutes les propriétés.
<h1 id="pourmettre-en-forme-les-éléments-de-tableau-dans-linspecteur-de-propriétés">Pourmettre en forme les éléments de tableau dans l'inspecteur de propriétés:</h1>
1 Sélectionnez une cellule, une ligne ou une colonne. Pour plus d'informations, voir « Sélection d'éléments de tableau », page 239.
2 Choisissez Fenetre > Propriétés pour ouvrir l'inspecteur de propriétés.
3 Modifie la mise en forme de l'objet de tableau en définissant les propriétés. Pour plus d'informations, cliquez sur le bouton Aide de l'inspecteur de propriétés.
<h1 id="rubrique-connexe-6">Rubrique connexe</h1>
« Sélection d' éléments de tableau », page 239
<h1 id="utilisation-dun-modele-de-mise-en-forme-pour-formater-un-tableau">Utilisation d'un modele de mise en forme pour formater un tableau</h1>
Utilise la commande Formater le tableau pour appliquer rapidement une mise en forme prédéfinie à un tableau. Vous pouvez alors désirir des options de mise en forme.
Remarque : seuls les tableaux simples peuvent etre mis en forme a l'aide de conceptions prdefinies. Vous ne pouvez pas utiliser ces conceptions pourmettre en forme des tableaux contenant des cellules fusconnees (col span ou rowspan), des groupes de colonnes ou d'autres mises en forme inhabituelles qui differencient le tableau d'une simple grille rectangulare de cellules.
Pour utiliser une mise en forme de tableau prédéfinie :
1 Sélectionnez un tableau, puis choisissez Commandes > Formater le tableau.
La boîte de dialogue Formater le tableau s'affiche.
2 Personnelisez les options selon vos besoin.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
3 Cliquez sur Appliquer ou sur OK pourmettre en formeYOUR tableau avec la mise en forme selectionnee.
<h1 id="redimensionnement-de-tableaux">Redimensionnement de tableaux</h1>
Vou puez 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.
Remarque : si les cellules d'un tableau ont une largeur ou une hauteur spécifiées explicément, le redimensionnement du tableau modifie la taillie visuelle des cellules dans la fenetre de document mais ne modifie pas la largeur et la hauteur spécifiées des cellules.
<h1 id="pour-redimensionner-un-tableau">Pour redimensionner un tableau :</h1>
1 Sélectionnéz le tableau.
2 Procedez de l'une des manieres suivantes:
- Pour redimensionner le tableau horizontally, faites glisser la poignée de seLECTION vers la droite.
- Pour redimensionner le tableau verticalement, faites glisser la poignee de selection vers le bas.
- Pour redimensionner verticalément et horizontally, faites glisser la poignée de seLECTION vers le coin inférieur droit.
<h1 id="rubriques-connexes-3">Rubriques connexes</h1>
« Sélection d'éléments de tableau», page 239
<h1 id="modification-de-la-largeur-des-colonnes-et-de-la-hauteur-des-lignes">Modification de la largeur des colonnes et de la hauteur des lignes</h1>
Vous pouvez modifier la largeur d'une colonne ou la hauteur d'une ligne à l'aide de l'inspecteur de propriétés ou en faisant glisser les cordures de la colonne ou de la ligne. Vous pouvez aussi modifier la largeur et la hauteur des cellules directement dans le code HTML à l'aide du mode Code.
Si vous avez des problèmes pour le redimensionnement, vous pouvez effacer la largeur des colonnes ou la hauteur des lignes et recommencer.
Conseil : vous pouvez spécifique la largeur ou la hauteur par des pixels ou des pourcentages. Vous pouvez convertir les pixels en pourcentages et inversement. Pour plus d'informations, voir « Affichage et paramétrage des propriétés des tableaux », page 242.
<h1 id="pour-redimensionner-visuellement-une-colonne-ou-une-ligne-procedede-lune-des-manieres-suivantes">Pour redimensionner visuellement une colonne ou une ligne, procedede l'une des manieres suivantes:</h1>
- Pour modifier une largeur de colonne, selectionnez la colonne, puis faites glisser la cordure droite de la colonne.
Si la colonne n'est pas à l'extreme droit du tableau, la largeur de la colonne contiguè est également modifiée pour conserver la même largeur de tableau. Si la colonne est à l'extreme droite du tableau, la largeur du tableau est modifiée et toutes les colonnes s'adaptent proportionnellement.
- Pour modifier une hauteur de ligne, Sélectionnéz la ligne, puis faites glisser la cordure inférieure de la ligne.
<h1 id="pour-définiir-la-largeur-dune-colonne-ou-la-hauteur-dune-ligne-à-laide-de-linspecteur-de-propriétés">Pour définiir la largeur d'une colonne ou la hauteur d'une ligne à l'aide de l'inspecteur de propriétés :</h1>
1 Sélectionnéz une colonne ou une ligne.
2 Choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur de propriétés.
3 Modifie la mise en forme de l'objet de tableau en définissant les propriétés.
Pour plus d'informations, cliquez sur le bouton Aide de l'inspecteur de propriétés.
<h1 id="pour-effacer-toutes-les-largeurs-et-hauteurs-définies">Pour effacer toutes les largeurs et hauteurs définies :</h1>
1 Sélectionnéz le tableau.
2 Procedez de l'une des manieres suivantes:
- Pour effacer toutes les largeurs spécifiées,CHOISSEZ Modifier > Tableau > Effacer les largeurs de cellule ou, dans l'inspecteur de propriétés, cliquez sur le bouton Effacer les largeurs de colonne.
- Pour effacer toutes les hauteurs spécifiées, désisissez Modifier > Tableau > Effacer les hauteurs de cellule ou, dans l'inspecteur de propriétés, cliquez sur le bouton Effacer les hauteurs de ligne.
<h1 id="rubriques-connexes-4">Rubriques connexes</h1>
« Sélection d' éléments de tableau », page 239
« Redimensionnement de tableaux », page 244
«Codage dans Dreamweaver», page 197
<h1 id="ajout-et-suppression-de-lignes-et-de-colonnes">Ajout et suppression de lignes et de colonnes</h1>
Pour ajouter ou supprimer des lignes et des colonnes, utilisez les commandes du sous-menue Modifier > Tableau.
Conseil : le fait d'appuyer sur la touche de tabulation lorsque le point d'insertion se trouve dans la derniere cellule d'un tableau ajoute automatiquement une ligne.
<h1 id="pour-ajouter-des-lignes-ou-des-colonnes">Pour ajouter des lignes ou des colonnes :</h1>
1 Clique dans une cellule.
2 Procedez de l'une des manieres suivantes:
- Pour ajouter une ligne au-dessus de la cellule en cours,CHOISSEZ Modifier > Tableau > Insérer une ligne.
- Pour ajouter une colonne à gauche de la cellule en cours,CHOISSEZ Modifier > Tableau > Insérer une colonne.
- Pour ajouter plusieurs lignes ou colonnes à la fois ou pour ajouter une ligne sous la cellule en cours ou une colonne à droite de cette cellule,CHOISSEZ Modifier > Tableau > Insérer des lignes ou des colonnes.
La boîte de dialogue Insérer des lignes ou des colonnes s'affiche.
3 Si vous avez choisi Inserer des lignes ou des colonnes,rez les informations nécessaires dans la boite de dialogue, puis cliquez sur OK.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
<h1 id="pour-supprimer-une-ligne-ou-une-colonne">Pour supprimer une ligne ou une colonne :</h1>
1 Cliquez sur une cellule de la ligne ou de la colonne que vous pouze supprimer.
2 Procedez de l'une des manieres suivantes:
- Pour supprimer une ligne,CHOISSEZ Modifier >Tableau > Supprimer la ligne.
- Pour supprimer une colonne,CHOISISEZ Modifier > Tableau > Supprimer la colonne.
Conseil : vous pouvez également seLECTIONner une ligne ou une colonne entiere, puis désir Edition > Effacer ou appuyer sur la touche Suppr. La ligne ou la colonne entiere est supprimée du tableau.
<h1 id="pour-ajouter-ou-supprimer-des-lignes-ou-des-colonnes-en-utilisant-linspecteur-de-propriétés">Pour ajouter ou supprimer des lignes ou des colonnes en utilisant l'inspecteur de propriétés :</h1>
1 Sélectionnéz le tableau.
2 Dans l'inspecteur de propriétés, procédez de l'une des manières suivantes :
- Augmentez ou réduisez la valeur indiquant le nombre de lignes pour en ajouter ou en supprimer.
Dreamweaver ajoute ou supprime des lignes au bas du tableau.
- Augmentez ou réduisez la valeur indiquant le nombre de colonnes pour en ajouter ou en supprimer.
Dreamweaver ajoute ou supprime des colonnes à droite du tableau.
Remarque : Dreamweaver ne vous avertit pas si vous supprimez des lignes et des colonnes contenant des données.
<h1 id="rubriques-connexes-5">Rubriques connexes</h1>
« Sélection d'éléments de tableau», page 239
« Insertion d'un tableau repété », page 475
« Affichage de plusieurs comportements », page 568
<h1 id="fractionnement-et-fusion-de-cellules">Fractionnement et fusion de cellules</h1>
Utilisez l'inspecteur de propriétés ou les commandes du sous-menu Modifier > Tableau pour fractionner ou fusionner des cellules. Vous pouze fusionner n'importe quel nombre de cellules adjacentes (tant que la sélection correspond à une ligne ou à un rectangle de cellules) pour produit une cellule unique s'étendant sur plusieurs colonnes ou lignes. Vous pouze fractionner une cellule en un nombrequelconque de lignes et de colonnes, qu'elle ait été précédemment fusionnée ou non. Dreamweaver réorganise automatiquement le tableau (en ajoutant les attributs COLSPAN ou ROWSPAN nécessaires) pour obtenir l'arrangement spécifique.
Dans l'illustration ci-dessous, les cellules au milieu des deux premières lignes ont ete fusionnées de sorte qu'elles s'etendent sur deux lignes.
<table><tr><td></td><td rowspan="2"></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table>
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.
<h1 id="pour-fusionner-deux-cellules-ou-plus-dun-tableau">Pour fusionner deux cellules ou plus d'un tableau :</h1>
1 Sélectionnez les cellules. Les cellules selectionnées doivent être contiguës et désenter une forme rectangulaire.
Dans l'illustration ci-dessous, la selection est un rectangle de cellules ; les cellules peuvent donc etre fusionnées.
<table><tr><td>Location Name</td><td>City</td><td>State or Country</td></tr><tr><td>Baltimore-Washington International</td><td>Baltimore</td><td>MD</td></tr><tr><td>Cairo International</td><td>Cairo</td><td>Egypt</td></tr><tr><td>Canberra</td><td>Canberra</td><td>Australia</td></tr><tr><td>Cairns</td><td>Cairns</td><td>Queensland</td></tr><tr><td>Cape Town Airport</td><td>Cape Town</td><td>South Africa</td></tr></table>
Dans l'illustration ci-dessous, la selection n'est pas un rectangle ; les cellules ne peuvent donc pas etre fusionnées.
<table><tr><td>Location Name</td><td>City</td><td>State or Country</td></tr><tr><td>Baltimore-Washington International</td><td>Baltimore</td><td>MD</td></tr><tr><td>Cairo International</td><td>Cairo</td><td>Egypt</td></tr><tr><td>Canberra</td><td>Canberra</td><td>Australia</td></tr><tr><td>Cairns</td><td>Cairns</td><td>Queensland</td></tr><tr><td>Cape Town Airport</td><td>Cape Town</td><td>South Africa</td></tr></table>
2 Choisissez Modifier > Tableau > Fusionner les cellules ou, dans l'inspecteur de propriétés, cliquez sur le bouton Fusionner les cellules.
Le contenu des cellules individuelles est placé dans la cellule produit par la fusion. Les propriétés de la première cellule sélectionnée sont appliquées à la cellule fusionnée.
<h1 id="pour-fractionner-une-cellule">Pour fractionner une cellule :</h1>
1 Cliquez dans la cellule.
2 Choisissez Modifier > Tableau > Fractionner la cellule ou, dans l'inspecteur de propriétés, cliquez sur le bouton Fractionner la cellule.
3 Dans la boîte de dialogue Fractionner la cellule, spécifique comment vous pouze fractionner la cellule.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
Pour augmenter ou réduire le nombre de lignes ou de colonnes occupées par une cellule :
1 Sélectionnez une cellule.
2 Choisissez Modifier > Tableau > Augmenter l'étendue de ligne ou Modifier > Tableau > Augmenter l'étendue de colonne ou Modifier > Tableau > Réduire l'étendue de ligne ou Modifier > Tableau > Réduire l'étendue de colonne.
<h1 id="imbrication-de-tableaux">Imbrication de tableaux</h1>
Un tableau imbriqué est un tableau à l'intérieur d'une cellule d'un autre tableau. Vous pouvez lemettre en forme comme n'importe quei tableau, mais sa largeur est limite par la largeur de lacellule dans laquelle il se trouve.
Pour imbriquer un tableau à l'intérieur d'une cellule de tableau :
1 Cliquez dans une cellule du tableau.
2 Choisissez Insertion > Tableau.
3 Dans la boîte de dialogue Insérer un tableau, spécifie les propriétés du tableau imbriqué puis cliquez sur OK.
<h1 id="couper-copier-et-coller-des-cellules">Couper, copier et coller des cellules</h1>
Voues pouvez couper, copier ou coller une seule cellule de tableau ou plusieurs cellules à la fois, en preserving leur mise en forme.
Voues pouvez coller les cellules au niveau d'un point d'insertion ou à la place d'une seLECTION dans un tableau existant. Pour coller plusieurs cellules de tableau, il faut que le contenu du Presse-papiers soit compatible avec la structure du tableau ou de la seLECTION du tableau dans laquelle les cellules seront collées.
<h1 id="pour-couper-ou-copier-les-cellules-dun-tableau">Pour couper ou copier les cellules d'un tableau :</h1>
1 Sélectionnez une combinaison quelconque de cellules dans le tableau. Les cellules sélectionnées doivent être contiguës et désenter une forme rectangulaire.
Dans l'illustration ci-dessous, la sélection est un rectangle de cellules ; les cellules peuvent donc etre coupées ou copiees.
<table><tr><td>Location Name</td><td>City</td><td>State or Country</td></tr><tr><td>Baltimore-Washington International</td><td>Baltimore</td><td>MD</td></tr><tr><td>Cairo International</td><td>Cairo</td><td>Egypt</td></tr><tr><td>Canberra</td><td>Canberra</td><td>Australia</td></tr><tr><td>Cairns</td><td>Cairns</td><td>Queensland</td></tr><tr><td>Cape Town Airport</td><td>Cape Town</td><td>South Africa</td></tr></table>
Dans l'illustration ci-dessous, la selection n'est pas un rectangle ; les cellules ne peuvent donc pas etre coupées ou copiees.
<table><tr><td>Location Name</td><td>City</td><td>State or Country</td></tr><tr><td>Baltimore-Washington International</td><td>Baltimore</td><td>MD</td></tr><tr><td>Cairo International</td><td>Cairo</td><td>Egypt</td></tr><tr><td>Canberra</td><td>Canberra</td><td>Australia</td></tr><tr><td>Cairns</td><td>Cairns</td><td>Queensland</td></tr><tr><td>Cape Town Airport</td><td>Cape Town</td><td>South Africa</td></tr></table>
2 Coupe ou copiez les cellules en utilisant Edition > Couper ou Edition > Copier.
Si vous avez selectionné 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).
<h1 id="pour-coller-des-cellules-de-tableau">Pour coller des cellules de tableau :</h1>
1 Choisissez l'emplacement ou coller les cellules.
- Pour replacer des cellules existantes par les cellules que vous collez, Sélectionné une série de cellules existantes dont la mise en forme est la même que celle des cellules du Presse-papiers. Par exemple, si vous avez copié ou coupé un bloc de 3 × 2 cellules, vous pouvez Sélectionner un autre bloc de 3 × 2 cellules pour le replacer par les cellules coupées ou copies.
- 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 cellec ci.
- Pour creer un nouveau tableau avec les cellules collées, placez le point d'insertion hors du tableau.
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 avrez cliqué et les cellules voisines (selon leur emplacement dans le tableau) soient replacées par les cellules que vous avez colleés.
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 selectionnée est remplaced. Si vous collez le contenu du Presse-papiers en dehors d'un tableau, les lignes, colonnes ou cellules que vous collez sont utilisées pour définir un nouveau tableau.
Pour supprimer le contenu d'une cellule en conservant les cellules intactes :
1 Sélectionnez une ou plusieurs cellules. (en veillant à ce que la seLECTION ne comprendne 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 entieres sont selectionnez lorsque vous choisissez Edition > Effacer ou que vous appuyez sur Suppr, les lignes ou les colonnes entieres (pas seulement leurs contenus) sont supprimées du tableau.
Pour effacer des lignes ou des colonnes contenant des cellules fusionnées :
1 Sélectionnez la ligne ou la colonne à supprimer.
2 Choisissez Modifier > Tableau > Supprimer la ligne ou Modifier > Tableau > Supprimer la colonne.
<h1 id="tri-des-tableaux">Tri des tableaux</h1>
Vou puez 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.
Vou ne pouvez pas trier des tableaux contenant des attributs COLSPAN ou ROWSPAN, c'est-à-dire des tableaux contenant des cellules fusionnées. Pour plus d'informations, voir « Fractionnement et fusion de cellules», page 247.
<h1 id="pour-trier-un-tableau">Pour trier un tableau :</h1>
1 Sélectionnéz le tableau (ou cliquez sur n'importequelle cellule).
2 Choisissez Commandes > Trier le tableau.
La boîte de dialogue Trier le tableau s'affiche.
3 Dans la boîte de dialogue Trier le tableau, spécifiez comment vous poulez trier le tableau.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
<h1 id="exportation-des-données-dun-tableau">Exportation des données d'un tableau</h1>
Voupez exporter les données d'un tableau Dreamweaver vers un fichier texte, avec le contenu de cellules contiguès sépare par un délimueur. Les caractères que vous pouvez utiliser comme délimateurs 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 recupérer qu'une partie des données d'un tableau, par exemple les six premières lignes ou les six premières colonnes, copiez les cellules contenant ces données et collez-les hors du tableau (pourisser un nouveau tableau) avant d'exporter le nouveau tableau.
<h1 id="pour-exporter-un-tableau">Pour exporter un tableau :</h1>
1 Placez le point d'insertion dans l'une des cellules du tableau.
2 Choisissez Fichier > Exporter > Tableau.
La boîte de dialogue Exporter le tableau s'affiche.
3 Dans la boîte de dialogue Exporter le tableau, spécifie les options pour l'exportation du tableau.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
4 Cliquez sur Exporter.
5 Dans la boîte de dialogue qui s'affiche, attribués un nom au fichier puis cliquez sur Enregistrer.
<h1 id="chapitre-17-2">CHAPITRE 17</h1>
<h1 id="le-mode-de-mise-en-forme">Le mode de Mise en forme</h1>
Dreamweaver vous offre differents moyens de mettre vos pages Web en forme.
Une méthode courante pour creer une mise en page consiste à utiliser des tableaux HTML pour positionner les éléments. Cependant, il peut ettre difficile d'utiliser les tableaux pour les mises en page, car ils ont ete crees a l'origine pour afficher des données tabulaires et non pourmetre en forme des pages Web.
Pour simplifier l'utilisation de tableaux pour la mise en forme, Dreamweaver met à votre disposition un mode de Mise en forme. En mode de Mise en forme, vous pouze créé votre page en utilisant des tableaux comme structure sous-jacente, tout en évitant certains problèmes qui surgissent souvent pendant la création de pages fondée sur des tableaux à l'aide de méthodes traditionnelles. Par exemple, en mode de Mise en forme, vous pouze facilement dessiner des cellules de Mise en forme, puis les déplacer à l'endroit souhaite. Vous pouze également créé des mises en page à largeur fixe ou qui s'adaptent automatiquement à la largeur de la fenêtre du navigateur (voir « Définition de la largeur des colonnes», page 262).
Vou avez aussi la possibilité d'agencer vos pages en utilisant les tableaux de manière traditionnelle (voir « Présentation de contenu à l'aide de tableaux», page 237) ou des calques que vous convertissez en tableaux (voir « Utilisation de tableaux et de calques pour la mise en forme», page 411). Le mode de Mise en forme constitue cependant la méthode la plus facile pour organiser votre page.
Remarque : en mode de Mise en forme, vous ne pouvez pas utiliser les outils Insérer un tableau et Dessiner un calque disponibles en mode Standard. Pour utiliser ces outils, vous devez d'abord basculer en mode Standard.
Ce chapitre contient les sections suivantes :
- « A propos des cellules et des tableaux », page 254
- « Activation et désactivation du mode de Mise en forme», page 254
- « Dessin de cellules et de tableaux de Mise en forme», page 255
- « Ajout de containu dans une cellule de Mise en forme», page 259
- « Déplacement et redimensionnement de cellules et de tableaux de Mise en forme», page 260
- « Formatage de cellules et de tableaux de Mise en forme », page 262
- « Définition de la largeur des colonnes », page 262
- « Définition des préférences du mode de Mise en forme», page 266
<h1 id="a-propos-des-cellules-et-des-tableaux">A propos des cellules et des tableaux</h1>
En mode de Mise en forme, vous pouvezmettre en forme votre page avant d'ajouter du contenu. Par exemple, vous pouvez dessiner une cellule le long du bord supérieur de votre page pour y placer une image d'en-tete, une autre cellule sur le cote gauche pour y placer une barre de navigation et une troisieme cellule sur la droite pour les contenus.
(Une autre solution consiste à dessiner chaque cellule uniquement lorsque vous étés sur le point d'y placer du contenu. Cette méthode offre une plus grande souplesse en vous permettant de-disposer plus longtemps d'espace libre dans le tableau de Mise en forme, ce qui vous permet de déplacer ou de redimensionner les cellules plus facilement.)
Lorsque vous creez une cellule de Mise en forme à l'extérieur d'un tableau, Dreamweaver cree automatiquement un tableau de Mise en forme pour contirir cette cellule, qui ne peut pas exister en dehors d'un tableau.
Vous pouvezmettre en forme voitre page enutilisant plusieurs cellules de Mise en forme a l'intérieur d'un tableau. Il s'agit de la methode la plus utilisée pour organiser une page Web. Vous pouvez également utiliser plusieurs tableaux pour une mise en forme plus sophistiquée. 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 peuvent également imbriquer des tableaux, c'est-à-dire insérer un nouveau tableau de Mise en forme dans un tableau existant. Ce procédé vous 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éé une mise en forme à deux colonnes avec quatre lignes dans la colonne gauche et trois lignes dans la colonne droite. Pour plus d'informations, voir « Dessin d'un tableau de Mise en forme imbriqué », page 257.
<h1 id="activation-et-désactivation-du-mode-de-mise-en-forme">Activation et désactivation du mode de Mise en forme</h1>
Avant de dessiner des tableaux ou des cellules de Mise en forme, vous doivent passer du mode Standard en mode de Mise en forme.
Conseil: si vous creez un tableau en mode Standard puis que vous basculez en mode de Mise en forme, le tableau créé peut containir des cellules de Mise en forme vides. Vous devrez peut-etre supprimer ces cellules vides avant de creer ou de déplacer des cellules. Lorsque vous créEZ une mise en forme pour la modifier en mode de Mise en forme, il est préférible de creer le tableau en mode de Mise en forme plutot qu'en mode Standard.
Pour passer en mode Mise en forme :
1 Si le mode Création n'est pas visible,CHOISSEZ Affichage > Code ou Creation > Code et Creation.
En mode Code, il est impossible d'activer ou de désactiver le mode de Mise en forme.
2 Choisissez Affichage > Mode Tableau > Mode Mise en forme ou cliquez sur le bouton Mode de Mise en forme dans la catégorie Mise en forme de la barre Insertion. (Dans l'espace de travail flottant de type Dreamweaver 4, qui comporte une barre verticale Insérer, les éléments de mise en forme apparaisent en bas du panneau et non pas dans une catégorie distincte.)
Une barre grise intitulée Mode de Mise en forme apparait en haut du mode Création, pour indiquer que vous étés en mode de Mise en forme. Si votre page comporte des tableaux, ceux-ci s'affichent sous forme de tableaux de Mise en forme.
Pour basculer en mode de Mise en forme :
1 Si le mode Creation n'est pas visible,CHOisissez Affichage > Code ou Creation > Code et Creation.
En mode Code, il est impossible d'activer ou de désactiver le mode de Mise en forme.
2 Choisissez Affichage > Mode Tableau > Mode Standard ou cliquez sur le bouton Mode Standard dans la catégorie Mise en forme de la barre Insertion.
<h1 id="dessen-de-cellules-et-de-tableaux-de-mise-en-forme">Dessen de cellules et de tableaux de Mise en forme</h1>
En mode de Mise en forme, vous pouvez dessiner des cellules et des tableaux de Mise en forme. Lorsque vous creez une cellule de Mise en forme à l'extérieur d'un tableau, Dreamweaver create automatiquement un tableau de Mise en forme pour contirnir cette cellule, qui ne peut pas exister en dehors d'un tableau.
Remarque: si Dreamweaver create automatiquement un tableau de Mise en forme, celui-ci remplit la page entiere du mode Creation, même si vous modifie la taillie de votre fenetre de document. Ce tableau vous permet de dessiner des cellules de Mise en forme à n'importe quel endroit en mode Creation. Vous pouvez définir une taillie spécifique pour le tableau en cliquant sur une cordure et en faisant glisser les poignées de redimensionnement.
Pour dessiner une cellule de Mise en forme :
1 En mode de Mise en forme (voir « Activation et déactivation du mode de Mise en forme », page 254), cliquez sur le bouton Dessiner la cellule de Mise en forme dans la catégorie Mise en forme de la barre Insertion. (Dans l'espace de travail de type Dreamweaver 4, qui comporte une barre verticale Insérer, les éléments de mise en forme apparaissent en bas du panneau et non pas dans une catégorie distincte.)
Le pointeur prend la forme d'un signe plus (+) .
2 Cliquez à l'endetroit où vous souhaitez placer la cellule sur la page, puis faites glisser le pointeur pour créé la cellule. Pour creer plusieurs cellules sans cliquer à chaque fois sur le bouton Dessiner la cellule de Mise en forme, creez chaque cellule de Mise en forme en maintainant la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée, puis en faisant glisser le pointeur.
La cellule s'affiche sur votre page avec un contour bleu. (Le bleu est la couleur par défaut du contour des cellules de Mise en forme. Pour changer cette couleur, voir « Définition des préférences du mode de Mise en forme», page 266.) La largeur de chaque cellule est affichée dans la zone d'en-tête de la colonne, en haut de la cellule, si l'affichage des onglets des tableaux de Mise en forme est activé (voir « Définition des préférences du mode de Mise en forme», page 266). Pour plus d'informations sur la largeur des colonnes, voir « Définition de la largeur des colonnes», page 262.
Une fine grille de lignes apparait, depuis les bords de la nouvelle cellule de Mise en forme jusqu'aux bords du tableau qui la contient. Ces lignes vous aident à aligner les nouvelles cellules avec les anciennes et à visualiser la structure du tableau HTML sous-jacent.
Dreamweaver aligne automatique les bords des nouvelles cellules sur ceux des ancienne (Les cellules de Mise en forme ne peuvent pas se chevaucher.) Les bords des cellules sont automatique alignés sur ceux du tableau de Mise en forme qui les contient si vous dessinez une cellule à proximate du bord d'un tableau. Pour désactiver temporairement l'alignement, maintenez la touche Alt (Windows) ou Option (Macintosh) enforcée pendant que vous dessinez la cellule.
<h1 id="pour-dessiner-un-tableau-de-mise-en-forme">Pour dessiner un tableau de Mise en forme :</h1>
1 Assurez-vous que vous étés en mode de Mise en forme. Ensuite, précédez de l'une des manières suivantes:
- Pour dessiner un tableau de Mise en forme, cliquez sur le bouton Dessiner le tableau de Mise en forme dans la catégorie Mise en forme de la barre Insertion. Le pointeur prend la forme d'un signe plus (+).
- Pour dessiner plusieurs tableaux de Mise en forme sans cliquer plusieurs fois sur le bouton Dessiner le tableau de Mise en forme, maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enforcée tout en cliquant sur le bouton Dessiner le tableau de Mise en forme. Lorsque vous avez terminé de dessiner un tableau, vous pouvez en dessiner un autre immédiatement.
2 Placez le pointeur sur la page, puis faites-le glisser pour creer le tableau de Mise en forme.
Si la page ne contient pas d'autres éléments, le nouveau tableau est automatiquement placé dans le coin supérieur gauche de la page.
Le tableau s'affiche avec un contour vert. (Le vert est la couleur par défaut du contour des tableaux de Mise en forme. Pour changer cette couleur, voir « Définition des préférences du mode de Mise en forme », page 266.) Un onglet intitulé Tableau de Mise en forme s'affiche en haut de chaque tableau que vous dessinEZ, pour vous permettre de selectionner le tableau et de le désigner des autres éléments qui figurent sur votre page.
La largeur du tableau (en pixels ou en pourcentage de la largeur de la page) s'affiche dans la zone d'en-tête de la colonne, en haut du tableau, si l'affichage des onglets des tableaux de Mise en forme est activé (voir « Définition des préférences du mode de Mise en forme », page 266). Pour plus d'informations sur la largeur des tableaux et des colonnes, voir « Définition de la largeur des colonnes », page 262.
Vou puez creer 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. Les tableaux ne peuvent pas se chevaucher, mais un tableau peut enContainir un autre. Pour plus d'informations, voir « Dessin d'un tableau de Mise en forme imbrique», page 257.
Conseil : you ne pouvez pas dessiner de tableau de Mise en forme à proximé d'un contenu existant. Si votre page contient déjà des éléments, 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 mais que le pointeur ne vous le permet pas, redimensionné la fenêtre de document pour créé davantage d'espace vide entre le bas du contenu existant et celui de la fenêtre.
<h1 id="dessin-dun-tableau-de-mise-en-forme-imbriqué">Dessin d'un tableau de Mise en forme imbriqué</h1>
Vou puez dessiner un tableau de Mise en forme à l'intérieur d'une autre tableau pour creer 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 modifie la taille d'une ligne ou d'une colonne dans ce tableau, la taille des cellules du tableau interne ne change pas.
Vou puez constituer plusieurs niveaux de tableaux imbriqués. Un tableau de Mise en forme imbrique ne peut pas etre 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.
<h1 id="pour-dessiner-un-tableau-de-mise-en-forme-imbrique">Pour dessiner un tableau de Mise en forme imbrique :</h1>
1 En mode de Mise en forme, cliquez sur le bouton Dessiner le tableau de Mise en forme dans la catégorie Mise en forme de la barre Insertion.
Le pointeur prend la forme d'un signe plus (+) .
2 Placez le curseur dans une zone vide (grise) d'un tableau de Mise en forme existant, puis faites-le glisser afin de creer le tableau imbriqué.
Remarque : vous ne pouvez pas creer de tableau à l'intérieur d'une cellule de Mise en forme. Vous pouze creer un tableau de Mise en forme imbriqué uniquement dans une zone vide d'un tableau existant ou autour de cellules existantes.
Pour dessiner un tableau de Mise en forme autour de cellules ou de tableaux existants :
1 En mode de Mise en forme, cliquez sur le bouton Dessiner le tableau de Mise en forme dans la catégorie Mise en forme de la barre Insertion.
Le pointeur prend la forme d'un signe plus (+) .
2 Faites-le glisser pour dessiner un rectangle autour d'un ensemble de cellules ou de tableaux de Mise en forme existants.
Un nouveau tableau imbriqué apparait aussure des cellules ou tableaux existants.
Conseil : si vous souhaitez qu'une cellule de Mise en forme existante s'adapte parfaitement à un coin du nouveau tableau imbrique, 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 creer de tableau à l'intérieur d'une cellule de Mise en forme.
<h1 id="alignment-des-cellules-de-mise-en-forme-sur-la-grille">Alignment des cellules de Mise en forme sur la grille</h1>
Vou puez activer la grille Dreamweaver afin de l'utiliser comme guide visuel dans la mise en forme. Vous pouze aligner automatiquement des éléments de page sur la grille en les déplaçant, et changer la grille ou définir le comportement d'alignment en indiquant des paramétres spécifique pour la grille. L'alignment fonctionne, que la grille soit visible ou non.
Pour afficher ou masquer la grille :
Choisissez Affichage > Grille > Afficher la grille.
Pour activer l'alignement :
Choisissez Affichage > Grille > Aligner sur la grille.
Pour modifier les paramètres de la grille :
1 Choisissez Affichage > Grille > Afficher la grille.
La boîte de dialogue Paramètres de la grille apparait.
2 Définisse les options de votre choix.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
3 Cliquez sur OK.
<h1 id="ajout-de-contenu-dans-une-cellule-de-mise-en-forme">Ajout de contenu dans une cellule de Mise en forme</h1>
En mode de Mise en forme, vous pouvez ajouter du texte, des images ou tout autre contenu à des cellules de Mise en forme tout comme vous le fieriez en mode Standard. Cliquez dans la cellule où vous souhaitez insérer un contenu, puis entrez du texte ou insérez un autre contenu.
Vou puez inserer du contenu uniquement dans une cellule de Mise en forme et non dans une zone vide (grise) d'un tableau, c'est pourquoi vous nevez creer des cellules de Mise en forme avant d'ajouter du contenu (voir « Dessin de cellules et de tableaux de Mise en forme », page 255).
La cellule de Mise en forme s'etend automatiquement au fur et à mesure que vous y ajoutez des données. Lorsque la cellule s'etend, la colonne contenant cette cellule s'etend également, ce qui peut modifier la taille des cellules voisines. La zone d'en-tête de cette colonne affiche la largeur qui apparait dans le code, suivie par la largeur visuelle de la colonne (telle qu'elle apparait sur votre écran) entre parenthèses. (Pour plus d'informations sur la largeur des colonnes, voir « Définition de la largeur des colonnes », page 262.)
Mode de Mise en forme
Mode de Mise en forme
<h1 id="pour-ajouter-du-texte-dans-une-cellule-de-mise-en-forme">Pour ajouter du texte dans une cellule de Mise en forme :</h1>
Placez le point d'insertion dans la cellule de Mise en forme où vous souhaitez ajouter du texte, et procédez de l'une des manières suivantes:
- Tapez le texte dans la cellule. Si nécessaire, cette dernière s'étend automatiquement au fur et à mesure de la saisie.
- Collez du texte copiedé depuis un autre document. à l'aide de la commande Coller. Pour plus d'informations, voir « Insertion et mise en forme de texte HTML», page 283.
<h1 id="pour-ajouter-une-image-à-une-cellule-de-mise-en-forme">Pour ajouter une image à une cellule de Mise en forme :</h1>
1 Placez le point d'insertion dans la cellule de Mise en forme où vous souhaitez ajouter l'image.
2 Procedez de l'une des manieres suivantes:
- Cliquez sur le bouton Insérer une image dans la catégorie Commun de la barre Insertion.
- Choisissez Insertion > Image.
3 Dans la boîte de dialogue qui s'affiche, choisissez un fichier d'image.
Pour plus d'informations, voir « Insertion d'une image », page 312.
<h1 id="effacement-automatique-des-hauteurs-de-cellule">Effacement automatique des hauteurs de cellule</h1>
Lorsque vous creez 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. Àpres avoir inséré du contenu dans la cellule, il se peut que vous n'ayez plus besoin que la hauteur soit spécifiée. Vous pouvez alors supprimer les hauteurs de cellule du tableau.
Pour ce faire, procedede l'une des manieres suivantes:
- Sélectionnez Effacer les hauteurs de cellule dans le menu d'en-tête de colonne.
Dreamweaver efface toutes les hauteurs spécifiées dans le tableau. Il se peut que certaines cellules se rétrécissant verticalement.
- Sélectionnez un tableau de Mise en forme en cliquant sur l'onglet en haut du tableau, puis cliquez sur le bouton Effacer les hauteurs de ligne dans l'inspecteur de propriétés.
Dreamweaver efface toutes les hauteurs spécifiées dans le tableau.
<h1 id="déplacement-et-redimensionnement-de-cellules-et-de-tableaux-de-mise-en-forme">Déplacement et redimensionnement de cellules et de tableaux de Mise en forme</h1>
Afin d'ajuster la mise en page, vous pouze 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é.)
Les cellules de Mise en forme ne peuvent pas se chevaucher. Vous ne pouvez pas déplacer ou redimensionner une cellule en应该怎么 des limites du tableau qui la contient. La taille d'une cellule de Mise en forme ne peut pas etre inférieure a son contenu.
La fille d'un tableau de Mise en forme ne peut pas etre inférieure a celle du plus petit rectangle.
contenant toutes ses cellules. Un tableau ne doit pas non plus chevaucher les cellules et tableaux voisins.
<h1 id="pour-redimensionner-une-cellule-de-mise-en-forme">Pour redimensionner une cellule de Mise en forme :</h1>
1 Pour selectionner la cellule, cliquez sur un de ses bords ou maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée, puis cliquez n'imprime où dans la cellule.
Des poignées de selection s'affichent autour de la cellule.
2 Faites glisser l'une des poignées de seLECTION pour redimensionner la cellule.
Les bords de la cellule s'alignent automatiquement sur ceux des autres cellules.
<h1 id="pour-déplacer-une-cellule-de-mise-en-forme">Pour déplacer une cellule de Mise en forme :</h1>
1 Pour selectionner la cellule, cliquez sur un de ses bords ou maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée, puis cliquez n'impeze ou dans la cellule.
Des poignées de selection s'affichent autour de la cellule.
2 Procedez de l'une des manieres suivantes:
- Faites glisser la cellule vers un autre emplacement à l'intérieur du tableau de Mise en forme.
- Appuyez sur les touches fléchées pour déplacer la cellule par incréments de 1 pixel. Maintenez la touche Maj enforcée tout en appuyant sur une touche directionnelle pour déplacer la cellule par incréments de 10 pixels.
<h1 id="pour-redimensionner-un-tableau-de-mise-en-forme">Pour redimensionner un tableau de Mise en forme :</h1>
1 Sélectionnez un tableau en cliquant sur l'onglet en haut du tableau.
Des poignées de seLECTION s'affichent autour du tableau.
2 Faites glisser ces poignées de seLECTION pour redimensionner le tableau.
Les bords du tableau s'alignent automatiquement sur ceux des autres cellules et tableaux.
<h1 id="pour-déplacer-un-tableau-de-mise-en-forme">Pour déplacer un tableau de Mise en forme :</h1>
1 Sélectionnez un tableau en cliquant sur l'onglet en haut du tableau.
Des poignées de selection s'affichent autour du tableau.
2 Procedez de l'une des manières suivantes:
- Faites glisser le tableau vers un autre emplacement sur la page.
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.
- Appuyez sur les touches fléchées pour déplacer le tableau par incréements de 1 pixel. Maintenez la touche Maj enforcée tout en appuyant sur une touche directionnelle pour déplacer la tableau par incréments de 10 pixels.
<h1 id="rubrique-connexe-7">Rubrique connexe</h1>
Pour utiliser la grille Dreamweaver comme guide afin de déplacer ou de re dimensionner des cellules et des tableaux, voir « Alignment des cellules de Mise en forme sur la grille», page 258.
<h1 id="formatage-de-cellules-et-de-tableaux-de-mise-en-forme">Formatage de cellules et de tableaux de Mise en forme</h1>
Voussoupiezchanglerl'aspectd'unecelluleoud'untableudefise en formedansl'inspecteurdeproprietés.
<h1 id="formatage-des-cellules-de-mise-en-forme">Formatage des cellules de Mise en forme</h1>
Dans l'inspecteur de propriétés, vous pouvez définir différents attributs pour votre cellule de Mise en forme, notamment la largeur et la hauteur, la couleur d'arrière-plan et l'alignement du contenu.
Pour formater une cellule de Mise en forme dans l'inspecteur de propriétés :
1 Pour selectionner la cellule, cliquez sur un de ses bords ou maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée, puis cliquez n'importe où dans la cellule.
2 Ouvrez l'inspecteur de propriétés en choisisant Fenêtre > Propriétés.
3 Modifie le formatage de la cellule en définissant des propriétés.
Pour plus d'informations, cliquez sur le bouton Aide de l'inspecteur de propriétés.
<h1 id="formatage-des-tableaux-de-mise-en-forme">Formatage des tableaux de Mise en forme</h1>
Vou puez defineir differents attributs pour vos tableaux de Mise en forme dans l'inspecteur de propriétés, notamment la largeur, la hauteur, le replissage et l'espacement.
<h1 id="pour-formater-un-tableau-de-mise-en-forme">Pour formater un tableau de Mise en forme :</h1>
1 Sélectionnez un tableau enclistant sur l'onglet en haut du tableau ou sur la balise <table> dans le sélecteur de balises.
2 Ouvrez l'inspecteur de propriétés en choisisant Fenêtre > Propriétés.
3 Modifie le formatage du tableau en définissant des propriétés.
Pour plus d'informations, cliquez sur le bouton Aide de l'inspecteur de propriétés.
<h1 id="définition-de-la-largeur-des-colonnes">Définition de la largeur des colonnes</h1>
En mode de Mise en forme, une colonne peut avoir une largeur fixe ou une largeur qui s'etend automatiquement pour replir autant que possible la fenetre du navigateur (extension automatique). Les informations relatives à la largeur s'affichent dans la zone d'en-tête de colonne en haut de chaque colonne du tableau selectionné, si l'affichage des onglets des tableaux de Mise en forme est activé (voir « Définition des préférences du mode de Mise en forme », page 266).
Une valeur numérique spécifique, telle que 300 pixels, est attribuée à une colonne à largeur fixe; la largeur s'affiche dans la zone d'en- tê de colonne (sauf si la colonne est trop étroite pour que les nombres puissant s'afficher). La largeur d'une colonne à extension automatique change automatiquement en fonction de la largeur de la fenêtre du navigateur; la zone d'en- tê de la colonne pour une colonne d'extension automatique affiche une ligne ondulée au lieu d'un nombre. Si vous mise en forme inclut une colonne d'extension automatique, elle remplit toujours la largeur totale de la fenêtre de navigateur de l'utilisateur.
Remarque: la largeur que vous spécifiez pour une colonne s'applique à toutes les cellules de cette colonne.
Dans un tableau de Mise en forme, vous ne pouvez appliquer l'extension automatique qu'a une seule colonne. 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 vous mise en page comporte une grande image sur le côte 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 attribuées 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ésactiver 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. Pour plus d'informations, voir « Utilisation des images d'espacement », page 265.
Remarque: appliquer l'extension automatique à une colonne avant d'avoir terminé la mise en forme peut avoir des effets inattendus sur la mise en page. Pour empêcher les colonnes de s'élargir ou de rétrécir opiné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 content des données susceptibles de maintainir la colonne à la largeur désirée, vous n'avez pas besoin d'utiliser d'images d'espacement.)
Parfois, la largeur visuelle d'une colonne telle qu'elle apparait en mode de Mise en forme ne correspond pas à la largeur spécifiée dans le code HTML. Dans ce cas, deux nombres s'affichent dans la zone d'en-tête de la colonne. (Pour plus d'informations sur les différences de largeur, cliquez sur le bouton Aide dans l'inspecteur de propriétés du tableau de Mise en forme.)
Pour appliquer l'extension automatique à une colonne, procédez de l'une des manières suivantes :
- Dans la zone d'en-tête de colonne, en haut d'une colonne à largeur fixe, Sélectionnez l'options Extension automatique de la colonne dans le menu d'en-tête de colonne. Dans un tableau, vous ne pouvez appliquer l'extension automatique qu'à une seule colonne.
- Pour sélectionner une cellule dans la colonne, cliquez sur l'un des bords de la cellule ou maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enforcée en cliquant n'importe où dans la cellule. Ensuite, cliquez sur Extension automatique dans l'inspecteur de propriétés.
Pour attribuer une largeur fixe à une colonne,procédez de l'une des manières suivantes:
- Dans la zone d'en-tête de colonne, en haut d'une colonne à largeur fixe, Sélectionnez l'options Créer une colonne Largeur fixe dans le menu d'en-tête de colonne.
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 ou maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enforcée en cliquant n'importe où dans la cellule. Dans l'inspecteur de propriétés, cliquez sur Fixe et entrez une valeur numérique.
Si vous entrez une valeur inférieure à la largeur du contenu, Dreamweaver définit automatiquement une largeur correspondant à celle du contenu.
Pour définiir la largeur des cellules telle que spécifiée dans le code HTML pour qu'elle corresponde à la largeur visuelle des cellules :
Selectionnez Uniformiser les largeurs de cellule dans le menu d'en-tête de colonne de n'importe une colonne précise.
<h1 id="rubriques-connexes-6">Rubriques connexes</h1>
« Définition des préférences du mode de Mise en forme», page 266
<h1 id="utilisation-des-images-despacement">Utilisation des images d'espacement</h1>
Une image d'espacement (egalement appelée GIF d'espacement) est une image transparente utilisée pour contrôler l'espacement dans des tableaux d'extension automatique. Il s'agit d'une image GIF transparente d'un seul pixel, qu'il est possible d'étendre à une largeur bien précise en termes de pixels. Un navigateur ne peut pas dessiner une colonne de tableau plus etroite que l'image la plus large contenue dans une cellule de cette colonne. Par conséquent, placer une image d'espacement dans la colonne d'un tableau nécessite des navigateurs pour conserver une largeur de colonne au moins aussi large que l'image.
Dreamweaver ajoute automatiquement des images d'espacement lorsque vous appliquez l'extension automatique à une colonne, sauf si vous désactevez cette option. Vous pouvez également inserer 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 d'en-tete.
Remarque: si vous choisissez de ne pas utiliser d'images d'espacement dans les tableaux avec extension automatique, les colonies à largeur automatique peuvent changer de taille, voir dispararître complètement de l'écran en mode Création si elles ne contiennent pas de données. (Les colonies continuent d'exister dans le code, même si elles n'apparaissent pas en mode Création.)
Lorsque vous insérez une image d'espacement dans une colonne ou que vous appliquez l'extension automatique à une colonne, une boîte de dialogue s'ouvre pour vous permettre de configurer l'image d'espacement. Si vous avez déjà configuré l'image d'espacement du site dans les préférences de Dreamweaver, cette boîte de dialogue ne s'ouvre pas (voir « Définition des préférences du mode de Mise en forme », page 266).
Voupeinsupereretsupprimer manuellementdes imagesd'espacement dans des colonnes specifiques ou supprimertoutles images d'espacement de la page.
<h1 id="pour-configurer-une-image-despacement">Pour configurer une image d'espacement :</h1>
1 Appliquez l'extension automatique à une colonne ouCHOISEZ Ajouter image d'espacement dans le menu d'en-tete de colonne.
La boîte de dialogue Choisissez l'image d'espacement s'ouvre.
2 Sélectionnéz l'une des options proposées.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
3 Cliquez sur OK.
Pour insérer une image d'espacement dans une colonne :
Selectionnez Ajouter image d'espacement dans le menu d'en-tête de colonne.
L' image d'espacement est insereed dans la colonne. L' image ne s'affiche pas a l'écran, mais la colonne se décale légarement et une double barre s'affiche en haut pour indiquer qu'elle contient une image d'espacement.
Pour supprimer une image d'espacement d'une colonne :
Selectionnez Supprimer image d'espacement dans le menu d'en-tête de colonne.
L' image d'espacement est supprimée. Il se peut que la colonne se decale.
Pour supprimer toutes les images d'espacement du tableau :
Procedez de l'une des manières suivantes:
- Sélectionnez Supprimer toutes les images d'espacement dans le menu d'en-tête de n'importe qu'elle colonne du tableau.
- Cliquez sur le bouton Supprimer toutes les images d'espacement dans l'inspecteur des propriétés du tableau de Mise en forme.
La mise en forme du tableau peut changer. Si certaines colonnes sont vides, elles risquent de disparaître complètement en mode Création.
<h1 id="définition-des-préférences-du-mode-de-mise-en-forme">Définition des préférences du mode de Mise en forme</h1>
Utilisez la catégorie Mode de Mise en forme dans la boîte de dialogue Preférences pour spécifique des informations sur les fichiers d'image d'espacement et les couleurs utilisées par Dreamweaver pour dessiner des cellules et des tableaux de Mise en forme.
Par défaut, un onglet intitulé Tableau de Mise en forme s'affiche en haut de chaque tableau en mode de Mise en forme, et une série de commandes liées à la largeur des colonnes apparait en haut du tableau de Mise en forme actuellément sélectionné. Si vous le souhaitez, vous pouvez supprimer l'affichage des onglets et des commandes.
Remarque: même lorsque les onglets s'affichent, aucun onglet n'apparait dans le tableau de Mise en forme en haut de la page lorsque celui-ci est sélectionné. L'onglet du tableau de Mise en forme, qui se trouve en haut de la page, s'affiche uniquement si le tableau n'est pas sélectionné.
Pour définit les préférences du mode de Mise en forme :
1 Choisissez Edition > Préférences.
2 Sélectionnez Mode de Mise en forme dans la liste Catégorie.
3 Apportez les modifications de votre choix.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
4 Cliquez sur OK pour fermer la boite de dialogue.
Pour désactiver l'affichage des anglets du tableau de Mise en forme et des commandes liées à la largeur des colonnes en mode de Mise en forme :
Choisissez Affichage > Mode Tableau > Afficher les tabulations du tableau Mise en forme.
<h1 id="chapitre-18-2">CHAPITRE 18</h1>
<h1 id="utilisation-de-cadres">Utilisation de cadres</h1>
Les cadres permettent de divisor 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.
Par exemple, une mise en forme avec des cadres peut contenir 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 affché dans le cadre supérieur ne change jamais lorsque les visiteurs consultent le site. La barre de navigation du cadre l'etal contient des liens qui, lorsqu'ils sont activés, modifie le content du cadre principal, mais pas le contenu du cadre l'etal. Le cadre de contenu principal à droite affiche le document correspondant à tous les liens actifs par le visueur dans la partie gauche.
Ce chapitre n'a pas pour objet deprésenter de manière exhaustive toutes les méthodes permettant de concevoir et d'utiliser des cadres, ni le code requis pour les coder manuellement. Si vous souhaitez obtenir des informations détaillées sur le code utilisé dans les mises en forme de cadre avances, reportez-vous à un manuel traitant des cadres et des yeux de cadres.
Ce chapitre contient les sections suivantes :
- « A propos des cadres et des yeux de cadres», page 268
- « Choix de l'utilisation des cadres », page 269
- « A propos de la création de pages Web bases sur des cadres dans Dreamweaver», page 270
- « Création de cadres et de produits de cadres», page 271
- « Sélection de cadres et de produits de cadres », page 273
- « Enregistrement des fichiers du cadre et du jeu de cadres», page 275
- « Affichage et définition des propriétés des cadres », page 277
- « Affichage et définition des propriétés des yeux de cadres», page 277
- « Définition des contenus de cadre avec liens», page 278
- « Gestion des navigateurs qui ne peuvent pas afficher les cadres», page 279
- « Utilisation des comportements JavaScript avec les cadres», page 279
<h1 id="a-propos-des-cadres-et-des-jours-de-cadres">A propos des cadres et des jours de cadres</h1>
La partie d'une fenêtre du navigateur pouvant afficher un document HTML independamment de ce qui apparait dans le reste de la fenêtre constitue un cadre.
Un jeu de cadres est un fjichier HTML qui définit la mise en forme et les propriétés de plusieurs cadres (name, taille et emplacement, par exemple), ainsi que l'URL de la page qui s'affiche initialement dans chaque cadre. Le fjichier du jeu de cadres ne contient pas de contenu HTML, à l'exception de la section noframes (voir « Gestion des navigateurs qui ne peuvent pas afficher les cadres», page 279); 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 ettre affiches dans les cadres. Le fichier du jeu de cadres relat a un site s'appelle generalement index.html et s'affiche par defaut si le visiteur ne spécifie pas de nom de fichier.
Un cadre n'est pas un fisier. On pourrait croire que le document affiché dans un cadre fait partie intégrante de ce dernier, mais ce n'est pas le cas. En effet, les cadres peuvent afficher n'importe quel document.
Remarque : le mot page peut désigner un seul document HTML ou l'ensemble du contenu d'une fenêtre du navigateur à un moment donné, même si plusieurs documents HTML sont affichés simultanément. Par exemple, l'expression « une page qui utilise des cadres » s'applique généralement à un jeu de cadres et aux documents qui y figurent.
Dans Dreamweaver, vous pouvez creator un jeu de cadres enCHOISIGANT L'une des methodes suivantes :
- Pour creer un jeu dont l'un des cadres affiche le document courant, cliquez sur la catégorie Cadres de la barre Insertion.
- Pour creer un jeu constitué de cadres vierges, cliquez sur la catégorie Jeu de cadres dans la boîte de dialogue Nouveau document.
L'inspecteur de propriétés permet de formater tous les cadres et yeux de cadres. Vous pouvez activer ou désactiver le définition, définir la largeur et la hauteur, nommer chaque cadre, etc. Pour plus d'informations, voir « Affichage et définition des propriétés des cadres», page 277 et « Affichage et définition des propriétés des yeux de cadres», page 277.
Tout site affché dans un navigateur sous forme d'une page unique constituée de trois cadres contient en fait au moins quatre documents HTML distincts, à savoir le fjichier du jeu de cadres et les trois documents initialement affichés dans les cadres. Lorsque vous conceive une page à l'aide de yeux de cadres dans Dreamweaver, vous doivent enregistrer chacun de ces quatre fichiers pour que la page s'affiche correctement dans le navigateur. Pour plus d'informations sur la création de pages Web à l'aide des cadres, voir « A propos de la création de pages Web basées sur des cadres dans Dreamweaver», page 270.
<h1 id="choix-de-lutilisation-des-cadres">Choix de l'utilisation des cadres</h1>
Les cadres sont le plus souvent utilisés pour la navigation. Un jeu de cadres inclut généralement un cadre contenant une barre de navigation et un cadre destiné à afficher le contenu principal.
Cependant, la conception d'un site à l'aide de cadres peut s'avérer fastidieuse. Dans la plupart des cas, il est possible de créé une page Web sans faire appel à un jeu de cadres. Par exemple, si vous poulez afficher une barre de navigation à gauche de la page, vous pouvez replacer 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éé plusieurs pages dont la mise en forme est identique ; voir « A propos des modèles Dreamweaver », page 464). Dans l'illustration suivante, la mise en forme de la page ressemble à une mise en forme avec cadres, mais elle n'en contient pas.
Nombreux sont les concepteurs Web professionnels ou les visiteurs de sites Web qui préférent ne pas utiliser ni afficher de cadres. Ce rejet des cadres s'explique par une mauvaise'utilisation des cadres dans certains sites (par exemple, lorsque les yeux de cadres rechargent le contenu des cadres de navigation chaque fois que le visitectur clique sur un bouton de navigation). S'ils sont correctement utilisés (par exemple, lorsqu'ils permettent d'immobiliser les commandes de navigation dans un cadre et de modifier le contenu d'un autre cadre), les cadres peuvent être très utiles dans certains sites.
La prise en charge des cadres varie en fonction du navigateur utilisé. En outre, la navigation des cadres peut s'avérer difficile pour les visiteurs souffrant de handicaps. Par conséquent, si vous utilisez des cadres, incorporez systématiquement une section noframes dans votre jeu de cadres pour les visiteurs qui ne peuvent pas les visualiser. Vous pouvez également ajouter un lien explicite vers une version sans cadre du site pour les visiteurs qui n'aiment pas utiliser les cadres.
L'utilisation des cadres presente les avantages suivants :
- Le navigateur d'un visiteur n'a pas besoin de recharger les graphiques liés à la navigation à chaque page.
- Chaque cadre possè de sa propre barre de défilament pour que le visiter puisse faire défilier la totalité de son contenu. Par exemple, un visiter aurant fait défilier une longue page n'est pas obligé de la faire défilier à nouveau vers le haut pour afficher la barre de navigation si celle-ci figure dans un autre cadre.
L'utilisation des cadres presente les inconveniens suivants :
- L'alignment graphique des éléments de différents cadres n'est pas toujours précis.
- Le test de la navigation peut être long.
- Comme les URL de chacune des pages contenues dans les cadres ne sont pas affichées dans le navigateur, les visiteurs risquent de ne pas pouvoir ajouter un signet à une page générée, à moins que vous ne fournissiez le code du serveur permettant de charger la version avec cadres d'une page.
<h1 id="rubriques-connexes-7">Rubriques connexes</h1>
« Définition des contenus de cadre avec liens», page 278
«Gestion des navigateurs qui ne peuvent pas afficher les cadres», page 279
<h1 id="a-propos-de-la-création-de-pages-web-basées-sur-des-cadres-dans-dreamweaver">A propos de la création de pages Web basées sur des cadres dans Dreamweaver</h1>
Dreamweaver permit d'afficher et de modifier tous les documents associés à un jeu de cadres dans une seule fenêtre de document. Vous pouvez ainsi afficher un aperçu approximatif des pages insérées dans des cadres et les modifier à votre convenance dans le navigateur. Toutefois, certains aspects de cette approche peuvent être déroutants si vous ne les maitrisez pas parfaitement.
N'oubliez pas que chaque cadre affiche un document HTML distinct. Meme si les documents sont vides, vous nevez les enregistrer avant de les prévisualiser. En effet, vous ne pouvez afficher un aperçu précis du jeu de cadres que s'il contient l'URL d'un document à afficher dans chaque cadre.
Pour vous assurer que le jeu de cadres s'affiche correctement dans les navigateurs :
1 Creez un jeu de cadres et spécifie le document qui devra apparaitre dans chaque cadre (voir « Création de cadres et de produits de cadres», page 271).
2 Enregistrez chaque fischier que vous souhaitez afficher dans un cadre. N'oubliez pas que chaque cadre affiche un document HTML distinct et que vous doivent enregistrer tous les documents. Enregistrez également le fischier du jeu de cadres (voir « Enregistrement des fischiers du cadre et du jeu de cadres », page 275).
3 Définisse les propriétés de chaque cadre et jeu de cadres, notamment l'attribution d'un nom à chaque cadre, la définition des options de défilament et de non défilament, etc. (voir « Affichage et définition des propriétés des cadres», page 277 et « Affichage et définition des propriétés des yeux de cadres», page 277).
Conseil : si vous le souhaitez, définissez l'attribut title d'un cadre pour améliorer son accessibilité. Notez que l'attribut title est différent de l'attribut name. Pour définir l'attribut titre, sélectionnez le cadre et désisissez Modifier > Modifier la balise ; ensuite, Sélectionné la catégorie Feuille de style/Accessibilité et tapez un titre dans la zone de texte Titre. Vous pouvez également activer l'option de programmation de l'accessibilité pour les cadres. Pour plus d'informations, voir « Création de pages Web accessibles», page 357.
4 Dans l'inspecteur de propriétés, vérifie que la propriété Cible est définie pour tous les liens afin que le contenu lie apparaisse dans la zone appropriée (voir « Définition des contenus de cadre avec liens », page 278).
<h1 id="création-de-cadres-et-de-produits-de-cadres">Création de cadres et de produits de cadres</h1>
Il y a deux façon de creer un jeu de cadres dans Dreamweaver : vous pouze le/concevoir vous-meme ou selectionner un jeu de cadres predefini. Si vous choisissez un jeu de cadres predefini, tous les jours de cadres et cadres nécessaires à la creation de la mise en forme sont automatiquement configures, ce qui representation le moyen le plus simple d'insérerrapidement une mise en forme avec des cadres dans la page. Vous pouze uniquement insérer un jeu de cadres prdefini dans la fenetre de document en mode Creation.
<h1 id="creation-dun-jeu-de-cadres-prédéfini">Creation d'un jeu de cadres prédéfini</h1>
Les yeux de cadres prédéfinis vous permettent de selectionner facilement le type de jeu de cadres que vous pouze créé.
Il y a deux façon de creer un jeu de cadres prédéfini : à l'aide de la barre Insertion ou de la boite de dialogue Nouveau document. La barre Insertion permet de creer un jeu de cadres et d'afficher le document courant dans un des nouveaux cadres, tandis que la boite de dialogue Nouveau document create un jeu de cadres vide.
Les icones des jours de cadres prédéfinis dans la catégorie Cadres de la barre Insertion et dans la catégorie Jeux de cadres de la boite de dialogue Nouveau document fournissant une représentation visuelle de chaque jeu de cadres appliqué au document sélectionné.
Lorsque vous appliquez un jeu de cadres à l'aide de la barre Insertion, Dreamweaver définit automatiquement le jeu de cadres de sorte qu'il affiche le document courant (celui dans lequel se trouve le point d'insertion) dans un des cadres. La zone bleue de l'icone du jeu de cadres prédéfini représenté le document courant et la zone blanche les cadres qui afficheront d'autres documents.
Pour creator un jeu de cadres prédéfini et afficher un document existant dans un cadre :
1 Placez le point d'insertion dans le document.
2 Procedez de l'une des manieres suivantes:
- Dans la catégorie Cadres de la barre Insertion, cliquez sur l'icone correspondant à un jeu de cadres prédéfini.
- Choisissez un cadre prédéfini dans le sous-menu Insertion > Cadres.
Pour creer un jeu de cadres prédéfini vide :
1 Choisissez Fichier > Nouveau.
2 Dans la boîte de dialogue Nouveau document, Sélectionnez la catégorie Jeux de cadres.
3 Sélectionnez un jeu de cadres dans la liste Jeux de cadres.
4 Cliquez sur Creer.
<h1 id="creation-et-modification-dun-jeu-de-cadres">Creation et modification d'un jeu de cadres</h1>
Avant de creer un jeu de cadres ou d'utiliser des cadres, affichez les cordures de cadres en mode Creation dans la fenetre de document enCHOIsssant Affichage > Assistances visuelles > Bordures de cadre.
Pour creer un jeu de cadres :
Dans le sous-menu Modifier > Jeu de cadres,CHOISSEZ une option de fractionnement (par exemple, Fractionner le cadre a gauche ou Fractionner le cadre a droite).
La fenêtre est alors divisée en cadres, et le document initial apparait dans l'un d'eux.
Pour fractionner un cadre en cadres plus petits, procedede l'une des manieres suivantes :
- Pour fractionner le cadre au niveau du point d'insertion,CHOISSEZ une option de fractionnement dans le sous-menu Modifier > Jeu de cadres.
- Pour fractionner un cadre ou un jeu de cadres verticalement ou horizontally, faites glisser une cordure de cadre du bord vers le centre de la fenêtre en mode Création.
- Pour fractionner un cadre à l'aide d'une cordure de cadre qui ne se trouve pas sur le bord de la fenêtre en mode Création, faites glisser une cordure de cadre tout en maintainant la touche Alt (Windows) ou Option (Macintosh) enforcée.
- Pour divisor un cadre en quatre, faites glisser une cordure de cadre de l'un des coins de la fenêtre en mode Création vers le centre d'un cadre.
Conseil : pour creer trois cadres, creez-en d'abord deux, puis fractionnez l'un d'eux. L'opération de fusion de deux cadres adjacent 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.
<h1 id="pour-supprimer-un-cadre">Pour supprimer un cadre :</h1>
Faites glisser une cordure de cadre en dehors de la page ou vers une cordure du cadre parent.
Si vous supprimez un cadre dans lequel se trouve un document qui n'a pas ete enregistré, Dreamweaver vous invite a enregistrer ce dernier.
Remarque : vous ne pouvez pas entierement supprimer un jeu de cadres en faisant glisser ses cordures. Pour le supprimer complètement, fermez la fenêtre de document qui l'affiche. Si le fichier du jeu de cadres a été enregistré, supprimeze le fichier.
<h1 id="a-propos-des-jours-de-cadres-imbriqués">A propos des jours de cadres imbriqués</h1>
Un jeu de cadres imbriéqu est un jeu de cadres situé à l'intérieur d'un autre jeu de cadres. Un fichier de jeu de cadres peut conténir plusieurs jours de cadres imbriques. La plupart des pages Web avec des cadres utilisent en fait des cadres imbriques, de même que la plupart des jours de cadres prédéfinis dans Dreamweaver. Tout jeu de cadres compteant un nombre différent de cadres dans différentes lignes ou colonnes doit être imbriqué.
Par exemple, la mise en forme de cadre la plus courante affiche un cadre sur la ligne supérieure (ou figure le logo de l'entreprise) et deux cadres sur la ligne inférieure (cadre de navigation et cadre de contenu). Dans ce cas, un jeu de cadres doit être imbriqué : vous obtenez alors un jeu de cadres de deux lignes et un jeu de cadres de deux colonnes imbriqué dans la deuxième ligne.
Dreamweaver gère automatiquement l'imbrication des jours de cadres. Si vous faites appel aux outils de fractionnement de cadre dans Dreamweaver, le programme se charge de définir les cadres qui doivent être imbriqués et ceux qui doivent rester tels quels. Pour plus d'informations sur les outils de fractionnement de cadre, voir « Création et modification d'un jeu de cadres», page 272.
Vou puevez imbriquer les yeux de cadres de deux facons dans HTML: le jeu de cadres interne peut etre defini comme jeu de cadres externe dans le meme fichier ou dans un fichier distinct.
Chaque jeu de cadres predefini dans Dreamweaver definit tous ses yeux de cadres dans le meme fichier.
Les deux types d'imbrication produit des résultats visuels identiques. A moins d'examiner le code, il n'est pas facile de savoirquel type d'imbrication estutilisé.En rège générale, Dreamweaverutiliseunfichierdejeudecadresexternenqueyouexécutezlacommande 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 yeux de cadres définis dans un seul fichier.
<h1 id="sélection-de-cadres-et-de-quelques-de-cadres">Sélection de cadres et de quelques de cadres</h1>
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.
Lorsque vous sélectionné un cadre ou un jeu de cadres, des lignes de seLECTION apparaissent autour du cadre ou du jeu de cadres dans le panneau Cadres et dans la fenêtre de document, en mode Création.
<h1 id="sélection-de-cadres-et-de-produits-de-cadres-dans-le-panneau-cadres">Sélection de cadres et de produits de cadres dans le panneau Cadres</h1>
Le panneau Cadres donne une représentation visuelle des cadres dans un jeu de cadres. Si, dans le panneau Cadres, vous cliquez sur un cadre ou un jeu de cadres pour le sélectionner dans le document, vous pouvez ensuite afficher ou modifier les propriétés de l'élement sélectionné dans l'inspecteur de propriétés. Pour plus d'informations, voir « Affichage et définition des propriétés des cadres», page 277 et « Affichage et définition des propriétés des yeux de cadres», page 277.
Le panneau Cadres affiche la hierarchie de la structure du jeu de cadres qui n'apparait pasforcément dans la fenetre de document. Dans le panneau Cadres, une épaisse cordure entoure lejeu de cadres, une fine ligne grise entoure chaque cadre et chaque cadre est identifié par un nom.
Pour afficher le panneau Cadres :Choisissez Fenetre > Autres > Cad
Pour selectionner un cadre dans le panneau Cadres : Cliquez sur le cadre dans le panneau Cadres.
Pour selectionner un jeu de cadres dans le panneau Cadres : Cliquez sur la cordure du jeu de cadres dans le panneau Cadres.
<h1 id="sélection-de-cadres-et-de-produits-de-cadres-dans-la-fenêtre-de-document">Sélection de cadres et de produits de cadres dans la fenêtre de document</h1>
Lorsqu'un cadre est selectionné dans la fenêtre de document, en mode Création, sa cordure s'affiche avec une ligne en pointillé ; lorsqu'un jeu de cadres est selectionné, toutes les cordures des cadres à l'intérieur de ce jeu s'affichent avec une ligne en pointillé plus fine.
Remarque: la sélection d'un cadre et le placement d'un point d'insertion dans un document affché dans un cadre sont deux opérations différentes. Vous serez améné à-selectionner un cadre dans de nombreux cas (pas exemple, lorsque vous définisse les propriétés d'un cadre).
Lorsque vous sélectionnez un cadre ou un jeu de cadres, l'inspecteur de propriétés affiche les propriétés de l'élement sélectionné pour que vous puissiez les modifier (voir « Affichage et définition des propriétés des cadres », page 277 et « Affichage et définition des propriétés des jours de cadres », page 277).
Pour sélectionner un cadre dans la fenêtre de document :
En mode Création, cliquez dans le cadre tout en maintainant les touches Alt (Windows) ou Option+Maj (Macintosh) enforcées.
Pour selectionner un jeu de cadres dans la fenetre de document :
En mode Creation, cliquez sur l'une des cordures du cadre interne du jeu. Vous devez d'abord vous assurer que les cordures sont visibles ; pour cela, choisissez Affichage >Assistances visuelles > Bordures de cadre.
Remarque : il est souvent plus simple de selectionner les joys de cadres dans le panneau Cadres que dans la fenetre de document. Pour plus d'informations, voir « Sélection de cadres et de joys de cadres dans le panneau Cadres », page 274.
Pour selectionner un cadre ou un jeu de cadres différent, procedede l'une des manieres suivantes:
- Pour sélectionner le cadre ou le jeu de cadres suivant ou précédent au même niveau hierarchique que la sélection courante, appuyez sur la flèche gauche ou droite tout en Maintenant la touche Alt (Windows) ou Commande (Macintosh) enforcée. Ces touches vous permettent de parcourir les cadres et leurs de cadres dans l'ordre dans lequel ils sont définis dans le fichier du jeu de cadres.
- Pour sélectionner le jeu de cadres parent (celui qui contient la seLECTION courante), appuyez sur la flèche haut tout en maintainant la touche Alt (Windows) ou Commande (Macintosh) enforcée.
- Pour sélectionner le premier cadre ou jeu de cadres infant de la seLECTION courante (en respectant l'ordre dans lequel ils sont définis dans le fichier du jeu de cadres), appuyez sur la flèche bas tout en maintainant la touche Alt (Windows) ou Commande (Macintosh) enforcée.
<h1 id="ouverture-dun-document-dans-un-cadre">Ouverture d'un document dans un cadre</h1>
Vou puez spécifier le contenu initial d'un cadre en inserant un nouveau contenu dans un document vide ou en ouvrant un document dans un cadre.
Pour ouvrir un document dans un cadre :
1 Placez le point d'insertion dans un cadre.
2 Choisissez Fichier > Ouyrir dans un cadre.
3 Sélectionnéz le document que vous souhaitez ouvrir dans le cadre, puis cliquez sur OK (Windows), Choisir (Mac OS X) ou Ouvrir (Mac OS 9).
Le document apparait dans le cadre.
4 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.
<h1 id="enregistrement-des-fichiers-du-cadre-et-du-jeu-de-cadres">Enregistrement des fichiers du cadre et du jeu de cadres</h1>
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 contens dans les cadres simultanément.
Si vous faites appel aux outils visuels de Dreamweaver pour creer un jeu de cadres, un nom de fichier par défaut est attribué à chaque nouveau document apparaissant dans un cadre. Par exemple, le premier fichier du jeu de cadres s'appelle Jeu de cadres sans titre-1, tandis que le premier document d'un cadre s'intitule Cadre sans titre-1.
Lorsque vous sélectionné l'une des commandes d'enregistrement, une boîte de dialogue s'ouvre, préte à enregistrer un document avec son nom de fichier par défaut. comme les noms de fichier par défaut se ressemblant beaucoup, il est parfoids difficile de déterminer quel document vous enregistrrez. Pour identifier le cadre contenant le document en cours d'enregistrement, observez les lignes de sélection du cadre dans la fenêtre de document (en mode Création).
<h1 id="pour-enregistrer-un-fichier-de-jeu-de-cadres">Pour enregistrer un fichier de jeu de cadres :</h1>
1 Sélectionné le jeu de cadres dans le panneau Cadres ou dans la fenêtre de document.
2 Choisissez l'une des méthodes suivantes :
- Pour enregistrer le fichier de jeu de cadres,CHOISSEZ Fichier >Enregistrer le jeu de cadres.
- Pour enregistrer le fjichier de jeu de cadres en tant que nouveau fjichier,CHOISISSEF Fichier > Enregistrer le jeu de cadres sous.
Si le fichier du jeu de cadres n'a pas ete enregistré, ces deux commandes sont equivalentes.
Pour enregistrer le document qui apparait à l'intérieur d'un cadre :
Cliquez dans le cadre, puis choisissez Fichier > Enregister le cadre ou Fichier > Enregister le cadre sous.
Pour enregistrer tous les fichiers associés à un jeu de cadres :
Choisissez Fichier > Enregister tous les cadres.
Cette commande enregistre tous les documents ouverts dans le jeu de cadres, y compris le fichier du jeu de cadres et tous les documents encadrés. Si le fichier du jeu de cadres n'a pas été enregistré, une épaissse cordure entoure le jeu de cadres en mode Création. Dans la boîte de dialogue qui s'affiche, choisissez un nom de fichier. Chaque cadre non enregistré est entouré d'une épaissse cordure. Dans la boîte de dialogue qui s'affiche, choisissez un nom de fichier.
Remarque : si vous avez utilise la commande Fichier > Ouvrir dans un cadre pour ouvrir un document dans un cadre, lorsque vous enregistrez le jeu de cadres, le document ouvert devient le document par défaut qui sera affché dans ce cadre. N'enregistrez pas le fichier du jeu de cadres si vous ne voulez pas que ce document soit utilisé par défaut.
<h1 id="affichage-et-définition-des-propriétés-des-cadres">Affichage et définition des propriétés des cadres</h1>
Utilisez l'inspecteur de propriétés pour afficher et définir la plupart des propriétés de cadre. 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.
<h1 id="pour-afficher-ou-définir-les-propriétés-des-cadres">Pour afficher ou définir les propriétés des cadres :</h1>
1 Sélectionnez un cadre en utilisant l'une des méthodes suivantes :
- Dans la fenêtre de document (mode Création), cliquez dans le cadre tout en maintainant les touches Alt (Windows) ou Maj+Option (Macintosh) enforcées.
- Cliquez sur le cadre dans le panneau Cadres.
2 Choisissez Fenetre > Propriétés pour ouvrir l'inspecteur de propriétés, s'il n'est pas déjà ouvert.
3 Pour afficher toutes les propriétés, cliquez sur la flèche d'agrandissement, dans le coin inférieur croit de l'inspecteur de propriétés.
Pour plus d'informations, cliquez sur le bouton Aide de l'inspecteur de propriétés.
Pour modifier la couleur d'arrière-plan d'un document dans un cadre :
1 Placez le point d'insertion dans le cadre.
2 Choisissez Modifier > Propriétés de la page.
3 Cliques sur le menu contextualuel Arriere-plan pour selectionner une couleur.
<h1 id="rubriques-connexes-8">Rubriques connexes</h1>
« Affichage et définition des propriétés des jours de cadres», page 277
« Définition des propriétés du document », page 116
<h1 id="affichage-et-définition-des-propriétés-des-yeux-de-cadres">Affichage et définition des propriétés des yeux de cadres</h1>
Utilisez l'inspecteur de propriétés pour afficher et définir la plupart des propriétés de yeux de cadres. Pour définiir le titre du jeu de cadres sélectionné, utilisez la boîte de dialogue Propriétés de la page ou le champ Titre dans la barre d'outils de la fenêtre de document.
<h1 id="pour-afficher-ou-définir-les-propriétés-des-yeux-de-cadres">Pour afficher ou définir les propriétés des yeux de cadres :</h1>
1 Sélectionnez un jeu de cadres en utilisant l'une des méthodes suivantes :
- Cliquez sur une cordure entre deux cadres du jeu de cadres dans la fenêtre de document en mode Création.
- Cliquez sur la cordure du jeu de cadres dans le panneau Cadres.
2 Choisissez Fenetre > Propriétés pour ouvrir l'inspecteur de propriétés, s'il n'est pas déjà ouvert.
3 Pour voir toutes les propriétés enumeratedes ci-dessous, cliquez sur la flèche d'agrandissement, dans le coin inférieur droit de l'inspecteur de propriétés.
Pour plus d'informations, cliquez sur le bouton Aide de l'inspecteur de propriétés.
<h1 id="pour-définiir-le-titre-du-document-dun-jeu-de-cadres">Pour définiir le titre du document d'un jeu de cadres :</h1>
1 Sélectionnez un jeu de cadres en utilisant l'une des méthodes suivantes :
- Cliquez sur une cordure entre deux cadres du jeu de cadres dans la fenêtre de document en mode Création.
- Cliquez sur la cordure du jeu de cadres dans le panneau Cadres.
2 Dans le champ Titre de la barre d'outils du document, tapez le nom de ce dernier.
Lorsqu'un visiteur affiche le jeu de cadres dans un navigateur, le titre apparait dans la barre de titre.
<h1 id="rubriques-connexes-9">Rubriques connexes</h1>
« Affichage et définition des propriétés des cadres », page 277
« Définition des propriétés du document », page 116
« Utilisation de la barre d'outils de document», page 40
<h1 id="définition-des-contenus-de-cadre-avec-liens">Définition des contenus de cadre avec liens</h1>
Pour utiliser un lien dans un cadre en vue d'ouvrir un document dans un autre cadre, vous doivent définir la cible du lien. L'attribut target d'un lien spécifique le cadre ou la fenêtre dans lequel ou laquelle le contenu associé au lien s'ouvre. Par exemple, si la barre de navigation se trouve dans le cadre gauche et que vous pouze afficher le document lié dans le cadre de contenu principal à droite, vous doivent définir le nom de ce dernier comme la cible de chacun des liens de la barre de navigation. Lorsqu'un visiteur clique sur un lien de navigation, le contenu spécifique s'ouvre dans le cadre principal.
Pour selectionner le cadre dans lequel ouvr un fichier, utilisez le menu deroulant Cible dans l'inspecteur de propriétés. Vous pouvez définir un fichier à afficher à la place du document affché dans un autre cadre, à la place du jeu de cadres, dans le cadre dans lequel figurait le lien (en ne choisisistant pas de cible) ou encore dans une nouvelle fenêtre du navigateur.
<h1 id="pour-cibler-un-cadre">Pour cibler un cadre :</h1>
1 En mode Creation,CHOISSEZ un texte ou un objet.
2 Dans le champ Lien de l'inspecteur de propriétés, procédez de l'une des manières suivantes :
- Cliquez sur l'icone de dossier et seLECTIONnez le fichier avec lequel étabir le lien.
- Faites glisser l'icone Pointer vers un fichier pour selectionner le fichier avec lequel étabir le lien.
3 Dans le menu déroulant Cible,CHOISSEZ le cadre ou la fenetre dans lequel ou laquelle le document lie doit apparaitre.
- Si vous avez nommé les cadres dans l'inspecteur de propriétés, les noms des cadres apparaissent 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 fenetre, en dehors du jeu de cadres, 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 pouze taper le nom du cadre cible dans la zone de texte Cible.
- _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.
- _seIf ouvre le lien dans le cadre en cours, en replaçant le contenu de ce cadre.
- _top ouvre le document lie dans la fenêtre du navigateur courant, en remplaçant tous les cadres.
Conseil : si vous établiessez un lien avec une page qui ne se trouve pas sur votre site, utilisez target="__top" ou target="_blank" pour vous assurer que la page ne soit pas considérée comme faisant partie de votre site.
<h1 id="gestion-des-navigateurs-qui-ne-peuvent-pas-afficher-les-cadres">Gestion des navigateurs qui ne peuvent pas afficher les cadres</h1>
Dreamweaver you permit de définir le contenu à afficher dans les navigateurs graphiques plus anciens et basés sur le texte qui ne prennant 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 nof rames doit containir un texte plus détaillé que « Vous doivent restreer toute navigateur à jour pour pouvoir utiliser des cadres ». En effet, certaines personnes choisisent délibérément un système qui ne leur permet pas d'afficher de cadres. Essayez de définir un contenu accessible à ces visiteurs.
Pour définit un contenu pour les navigateurs qui ne prennt pas en charge 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 » apparaisent dans la zone supérieure.
2 Pour creer le Contenu sans cadres, procedez de l'une des manieres suivantes :
- Dans la fenêtre de document, tapez ou insérez le contenu, comme vous le fériez pour un document ordinaire.
- Choisissez Fenêtre > Inspecteur de code, placez le point d'insertion entre les balises body qui se trouvent à l'intérieur des balises noframes, puis tapez le code HTML du contenu.
3 Choisissez de nouveau Modifier > Jeu de cadres > Modifier le contenu sans cadres pour revenir au mode normal du document jeu de cadres.
<h1 id="utilisation-des-comportements-javascript-avec-les-cadres">Utilisation des comportements JavaScript avec les cadres</h1>
Plusieurs comportements JavaScript et commandes de navigation sont particulièrement bien adaptés à l'utilisation de cadres.
Texte du cadre remplace le contentu et le formatage d'un cadre par le contentu que vous specifyz. Ce contentu peut etre n'importe quel texte valide en HTML Cette action permet d'afficher les informations dans un cadre de façon dynamique (voir « Texte du cadre », page 388).
Aller à 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 cling le contenu de deux cadres ou plus. (voir « Atteindre l'URL», page 383).
L'option Insérer une barre de navigation ajoute une barre de navigation à une page. Ceci étant fait, vous pouvez ajouter des comportements à ses images et définir l'image qui s'affiche en fonction des actions des visiteurs. Vous pouvez, par exemple, afficher une image de bouton à l'état actif ou inactif afin que l'utilisateur sache sur chaque page du site il se trouve (voir « Insertion d'une barre de navigation», page 442).
Insérer menu de reroutage vous permet de configurer une liste de liens dans un menu qui ouvre des fichiers dans une fenêtre du navigateur lorsqu'on clique dessus. Vous pouvez également cibler une fenêtre ou un cadre particuliers dans lesquels le document s'ouvrira. (voir « Insertion d'un menu de reroutage», page 439).
<h1 id="partie-v-ajout-de-contenu">Partie V Ajout de contenu</h1>
Utilisez les outils visuels de Dreamweaver pour ajouter des contenus variés à vos pages Web. Ajoutez des textes, images, couleurs, animations, sons et autres formes de données, puis mettez-les en forme. Assurez-vous de prendre vos pages accessibles aux personnes souffrant de handicaps.
Cette partie du manuel contient les chapitres suivants :
- Chapitre 19, « Insertion et mise en forme de texte »
- Chapitre 20, « Insertion d'images »
- Chapitre 21, « Intégration de Dreamweaver à d'autres applications »
- Chapitre 22, « Insertion d' éléments multimédia »
- Chapitre 23, « Dreamweaver et accessibilité »
<h1 id="chapitre-19-2">CHAPITRE 19</h1>
<h1 id="insertion-et-mise-en-forme-de-texte">Insertion et mise en forme de texte</h1>
Macromedia Dreamweaver MX you permit d'ajouter et de mettre en forme du texte dans un document de plusieurs façon. Leprésent chapitre explique comment insérer du texte, définir un style de police, une taille de police, une couleur et des attributs d'alignement, creator et appliquer vos propres styles personnalisés à l'aide de styles HTML et de styles de feuilles de style en cascade (CSS).
Ce chapitre couvre les sujets suivants :
- « Insertion et mise en forme de texte HTML», page 283
- « Mise en forme de texte », page 286
- « Utilisation de styles HTML pour formater un texte», page 292
- « A propos des feuilles de style en cascade», page 298
- « Conversion de styles CSS en balises HTML», page 307
- « Recherche et remplacement de texte», page 308
<h1 id="insertion-et-mise-en-forme-de-texte-html">Insertion et mise en forme de texte HTML</h1>
Les méthodes de mise en forme du texte dans Dreamweaver s'apparentent à celles que vous avez l'habitude d'utiliser dans un logiciel de traitement de texte standard. Utilisez le sous-menue Texte > Format de paragraphe ou le menu dérouulant Format dans l'inspecteur de propriétés pour définir le style par défaut (Paragraphe, Pré-formaté, En-tête 1, En-tête 2, etc.) d'un bloc de texte. Pour modifier la police, la taille, la couleur et l'alignement du texte sélectionné, utilisez le menu Texte ou l'inspecteur de propriétés. Pour appliquer un style de police (gras, italique, code, souligné, etc.), utilisez le sous-menue Texte > Style.
Vous pouvez aussi combiner plusieurs balises HTML standard pour former un style unique, appelé style HTML. Par exemple, vous pouvez appliquer manuellement un formatage HTML à l'aide d'une combinaison de balises et d'attributs, puis enregistrer ce formatage comme style HTML, qui apparaître ensuite dans le panneau Styles HTML. Lorsque, par la suite, vous désirez formater du texte avec cette même combinaison de balises HTML, il vous suffit de selectionner le style enregistré dans le panneau Styles HTML. Les styles HTML sont pris en charge par quasiment tous les navigateurs Web et permettent de=gagner du temps en limitant le formatage manuel du texte.
Un autre type de style, appelé style CSS (Cascading Style Sheet - feuille de style en cascade) permet d'appliquer une mise en forme à du texte ou à une page, en offrant de plus l'avantage d'une mise à jour automatique. Vous pouvez définir les styles CSS directement dans le document ou, pour plus de puissance et de souplesse, dans des feuilles de style externes. Si vous associez une feuille de style externe à plusieurs pages Web, toutes les pages s'adapteront automatiquement si vous effectuez une modification dans cette feuille de style. Pour acceder aux styles CSS, utilisez le panneau Styles CSS ou le mode CSS de l'inspecteur de propriétés de texte. Pour plus d'informations sur l'utilisation de l'inspecteur de propriétés de texte pour appliquer des styles HTML ou CSS, voir Définition des options relatives aux propriétés du texte dans l'aide de Dreamweaver.
Le formatage HTML manuel et les styles HTML appliquent une mise en forme en utilisant des balises HTML standard (telles que b, i, font et code), qui sont reconnues par tous les navigateurs Web courants. En revanche, les styles CSS définissant une mise en forme pour tout le texte apparentant à une classe particulière ou redéfinissant le format d'une balise HTML spécifique (par exemple h1, h2, p ou 1i). Les styles CSS sont uniquement pris en charge par les navigateurs Web Netscape Navigator versions 4.0 et ultérieures et Microsoft Internet Explorer versions 4.0 et ultérieures.
Vous pouvez utiliser des styles CSS, des styles HTML et un formatage manuel du HTML au sein de la même page. Le formatage est appliqué de façon hierarchique, le formatage manuel du HTML est appliqué par un style HTML ou CSS, et les styles CSS incorporeés dans le corps d'un document sont prioritaires sur les styles CSS. Voir « A propos des feuilles de style en cascade», page 298.
<h1 id="ajout-de-texte-dans-un-document">Ajout de texte dans un document</h1>
Il existe plusieurs manières d'ajouter du texte dans un document Dreamweaver. Vous pouvez taper le texte directement dans la fenêtre de document Dreamweaver, copier et coller du texte ou en importer à partir d'autres documents.
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 de document en mode Création, puis désisesz Edition > Coller. Dreamweaver ne conserve pas la mise en forme du texte de l'autre application, mais les sauts de ligne sont réservés.
<h1 id="importation-de-texte-à-partir-dautres-documents">Importation de texte à partir d'autres documents</h1>
Vous pouvez importer des données tabulaires dans un document en enregistrant d'abord ces fichiers (teils que des fichiers Microsoft Excel ou d'une base de données) sous forme de fichiers texte délimités. Pour plus d'informations sur l'importation et le formatage des données d'un tableau, voir « Importation de données tabulaires », page 239 dans le Chapitre 19, « Insertion et mise en forme de texte », page 283.
Vou puevez également importer du texte à partir de documents HTML Microsoft Word. Pour plus d'informations sur l'importation de documents HTML Word, voir « Ouverture de documents existants », page 115.
Pour importer des données tabulaires :
1 Choisissez Fichier > Importer > Importer les données tabulaires ou Insertion > Données tabulaires.
La boîte de dialogue Importer le tableau s'affiche.
Recherche le fjichier souhaite ou entrez son nom dans la zone de texte.
2 Sélectionnez le délimiterut 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 scélectionné Autre, un champ vierge s'affiche à côté de l'option. Entrez le caractère utilisé comme délimueur.
3 Utilisez les options restantes pour formater ou définir le tableau dans lequel importer les données.
4 Une fois terminé, cliquez sur OK.
<h1 id="espacement-des-caractères">Espacement des caractères</h1>
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.
Vou puez definir une préférence pour l'insertion automatique d'un espace insécable dans un document. Pour ce faire, choisissez Édition > Préférences ou Dreamweaver > Préférences (Mac OS X), puis assurez-vous que la case Autoriser plusieurs espaces consécutifs est activée dans la catégorie Général.
Pour insérer un espace insécable, procédez de l'une des manières suivantes :
- Dans la barre Insertion, Sélectionnez Caractères, puis cliquez sur l'icone Espace insécable.
- Choisissez Insertion > Caracteres spéciaux > Espace insécable.
- Appuyez sur les touches Contrôle+Maj+Espace (Windows) ou Option+Espace (Macintosh).
<h1 id="espacement-des-paragraphs">Espacement des paragraphs</h1>
Dreamweaver fonctionne sur le même principe que la plupart des applications de traitement de texte : il vous suffit d'appuyer sur la touche Entrée (Windows) ou Retour (Macintosh) pour créé un paragraphe. Les navigateurs Web insèrent automatiquement une ligne vierge entre les paragraphs. Vous pouvez vous-même espacer les paragraphs d'une ligne vierge en insérant un saut de ligne.
<h1 id="pour-insérer-un-saut-de-paragraph">Pour insérer un saut de paragraph :</h1>
- Appuyez sur la touche Entre (Windows) ou Retour (Macintosh).
Pour insérer un saut de ligne, procedede l'une des manieres suivantes :
- Appuyez sur les touches Maj+Entrée (Windows) ou Maj+Retour (Macintosh).
- Dans la barre Insertion, Sélectionnéz Caractères, puis cliquez sur l'icone Saut de ligne.
- Choisissez Insertion > Caracteres spéciaux > Saut de ligne.
<h1 id="mise-en-forme-de-texte">Mise en forme de texte</h1>
Voussouspcaz applieur un formatage de texte HTML a une seule lette ou au contraire creer un site entier à l'aide des commandes Texte >Format de paragraphe ou des options de l'inspecteur de propriétés. Ce type de formatage manuel a la priorité sur (et donc remplace) la mise en forme définie par un style HTML ou CSS.
Pour appliquer un formatage de texte HTML, vous pouvez utiliser l'inspecteur de propriétés et les commandes du menu Texte, telles que Texte > Format de paragraphe et Texte > Style.
<h1 id="rubriques-connexes-10">Rubriques connexes</h1>
« Utilisation de styles HTML pour formater un texte », page 292
« Création d'un style HTML», page 295
« Création d'un style CSS », page 301
<h1 id="définition-et-modification-des-polices-et-styles">Définition et modification des polices et styles</h1>
Utilisez les options de l'inspecteur de 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.
Lorsque vous utilisez l'inspecteur de propriétés pour appliquer un style gras ou italique, Dreamweaver applique automatiquement la balise<strong> ou <em>, respectivement. Si vous conscience des pages pour des utilisateurs disposant de navigateurs de version 3.0 ou ultérieure, vous doivent 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).
En langage HTML, les tailles de polices sont exprimées en valeurs relatives, et non spécifique, 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é si vousCHOISSEZ Par défaut ou 3 dans l'inspecteur de 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 policessemblant généralement plus grandes sous Windows que sur Macintosh, bien qu'Internet Explorer 5 pour Macintosh utilise la même taille de police par défaut que Windows.
Conseil : afin que la taillie de la police reste homogène, vous pouvez utiliser des feuilles de style CSS pour définir la taillie en pixels. Pour plus d'informations sur les feuilles de style CSS, voir « A propos des feuilles de style en cascade », page 298.
<h1 id="rubrique-connexe-8">Rubrique connexe</h1>
« Modification des combinaisons de polices », page 287
<h1 id="pour-définit-ou-modifier-des-caractéristiques-de-police">Pour définit ou modifier des caractéristiques de police :</h1>
1 Sélectionnez le texte. Siaucun texte n'est seLECTIONné,le changement s'appliquera au texte que vous taperez ensuite.
2 Choisissez parmi les options suivantes :
- Pour changer de police de caractères,CHOISSEZ une combinaison de polices dans l'inspecteur de propriétés ou dans le sous-menu Texte >Police.
Choisissez Par défaut pour supprimer les polices préalablement appliquées. Cette option applique la police par défaut au texte seLECTIONné (en l'occurrence, la police par défaut du navigateur ou la police affectée à cette balise dans une feuille de style CSS).
- Pour changer de style de police de caractères, cliquez sur Gras ou Italieque dans l'inspecteur des propriétés ouCHOISSES un style de caractère (Gras, Italique, Souigné, etc.) dans le sous-menue Texte > Style.
- Pour changer la taille de la police de caractères,CHOISSEZ une taille (de 1 à 7) dans l'inspecteur de propriétés ou dans le sous-menu Texte > Taille.
- Pour augmenter ou diminuier la taille de la police du texte seLECTIONné,CHOISSEZ une taille relative (de + ou -1 à +4 ou -3) dans l'inspecteur de propriétés ou via le sous-menu 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. Àinsi, une valeur +4 résultat en une taile de police de 3 + 4 ou 7. 7 est la somme maximale pour les valeurs de taile de police : si vous essayez de définir une valeur plus élevé, elle s'affiche en tant que 7. Dreamweaver n'affiche pas la balise basefont (qui peutfigurer dans la section head), mais la taile de police doit s'afficher correctement dans un navigateur. Pour tester ceci, comparez un texte définir sur 3 et un texte défini sur +3.
<h1 id="modification-des-combinaisons-de-polices">Modification des combinaisons de polices</h1>
Pour définiir la combinaison de polices qui apparaît dans l'inspecteur de propriétés et dans le sous-menu 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 affché par les navigateurs. Ces derniers utilisent, au sein de la combinaison de polices choisisie, la première police installée sur l'ordinateur de l'utilateur. 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.
<h1 id="pour-modifier-les-combinaisons-de-polices">Pour modifier les combinaisons de polices :</h1>
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 choisis, 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 Choisissez parmi les options suivantes :
- Pour ajouter ou-retirer des polices d'une combinaison, cliquez selon le cas sur l'un des boutons << ou >> qui se trouvent entre les listedes Polices choisis et Polices disponibles.
- Pour ajouter ou supprimer une combinaison de polices de caractères, 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 texte en dessous de la liste Polices disponibles, et cliquez sur le bouton << pour ajouter cette police à la combinaison courante. Il peut être utile d'ajouter une police qui n'est pas installée sur votre système, par exemple pour indiquer une police spécifique à Windows lorsque vous travailliez sur un Macintosh.
- Pour déplacer la combinaison de polices au sein de la liste, cliquez sur les boutons fléchés en haut de la boîte de dialogue.
Pour ajouter une nouvelle combinaison à la liste des polices :
1 Choisissez Texte > Police > Modifier la liste des polices.
2 Sélectionnez une police dans la liste Polices disponibles, et cliquez sur le bouton << pour l'insérer dans la liste Polices choses.
3 Repetez les etapes 1 et 2 pour chaque cadre dans le jeu de cadres.
Pour ajouter une police qui n'est pas installée sur votre ordinateur, tapez son nom dans le champ texte en dessous de la liste Polices disponibles et cliquez sur le bouton << pour ajouter cette police à la combinaison courante. Il peut être utile d'ajouter une police qui n'est pas installée sur votre système, par exemple pour indiquer une police spécifique à Windows lorsque vous travailliez sur un Macintosh.
4 Lorsque vous avez fini deCHOISIR des polices, selectionnee une famille de polices generique dans la liste Polices disponibles et cliquez sur le bouton << pour l'inserer dans la liste Polices choisis.
Les familles génériques de polices sont les suivantes : cursive, fantastie, monospace (espacement non proportionnel), sans-serif (espacement proportionnel sans empâttement) et serif (espacement proportionnel avec empâttement). Si aucune des polices de la liste Polices disponibles n'est disponible sur l'ordinateur de l'utilisateur, le texte 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.
<h1 id="mise-en-forme-des-paragraphs">Mise en forme des paragraphs</h1>
Utilisez le menu déroulant Format de l'inspecteur de propriétés ou le sous-menu Texte > Format de paragraphe pour appliquer des balises standard de paragraphe et d'en-tête.
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,CHOISISEZ Edition > Prefenciences ou Dreamweaver > Prefenciences (Mac OS X), puis assurez-vous que la case Passer en paragraphe normal après le titre est desactivée dans la catégorie Général.
<h1 id="rubriques-connexes-11">Rubriques connexes</h1>
« Création d'un style HTML», page 295
Définition des options relatives aux propriétés du texte (dans l'aide de Dreamweaver)
Définition des propriétés du type CSS (dans l'aide de Dreamweaver)
<h1 id="pour-appliquer-une-balise-de-paragraphe-ou-den-tête">Pour appliquer une balise de paragraphe ou d'en-tête :</h1>
1 Placez le point d'insertion dans le paragraphe, ou selectionnez une partie du texte du paragraphe.
2 Utilisez le sous-menu Texte > Format de paragraphe ou le menu dérouulant Format de l'inspecteur de propriétés, puis désissez une option :
- Choisissez un format de paragraphe (par exemple, En-tête 1, En-tête 2, Texte pré-formaté, etc.). La balise HTML associée au style choisi (par exemple, h1 pour En-tête 1, h2 pour En-tête 2, pré pour Texte pré-formaté, etc.) est appliquée à tout le paragraphe.
- Choisissez Aucun pour supprimer un format de paragraphe.
<h1 id="alignement-du-texte">Alignement du texte</h1>
Vous pouvez aligner le texte sur la page en utilisant l'inspecteur de propriétés ou à partir du sousmenu Texte > Aligner. Vous pouvez centrer un élément sur la page à l'aide de la commande Texte > Aligner > Centre.
<h1 id="pour-aligner-du-texte">Pour aligner du texte :</h1>
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 des propriétés ou choisissez Texte > Aligner, puis une commande d'alignement.
<h1 id="pour-centrer-des-éléments">Pour centrer des éléments :</h1>
1 Sélectionnez l'objet (image, plug-in, tableau ou tout autre éléments 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.
<h1 id="mise-en-retrait-du-texte">Mise en retrait du texte</h1>
La commande Retrait applique la balise HTML blockquote à un paragraphe de texte, ce qui a pour effet de renforcer le texte de chaque côté de la page.
<h1 id="pour-insérer-un-retrait-ou-le-supprimer">Pour insérer un retrait ou le supprimer :</h1>
1 Placez le point d'insertion à l'emplacement où insérer le retrait.
2 Dans l'inspecteur de propriétés, cliquez sur le bouton Retrait ou Retrait négatif ou choisissez Texte > Retrait ou Retrait négatif ou choisissez Liste > Retrait ou Retrait négatif dans le menu contextualuel.
Remarque : un paragraphe accepte plusieurs indentations. Chaque application de cette commande produit un retrait supplémentaire du texte de chaque cote du document.
<h1 id="modification-de-la-couleur-du-texte">Modification de la couleur du texte</h1>
Vouss pouvez modifier la couleur du texte seLECTIONné. La nouvelle couleur prend alors le dessus sur la couleur de texte définie dans les propriétés de la page. (Si aucune couleur n'a été définie pour le texte dans Propriétés de la page, le texte possède la couleur par défaut, le noir).
<h1 id="pour-modifier-la-couleur-du-texte">Pour modifier la couleur du texte :</h1>
1 Sélectionnéz le texte.
2 Choisissez parmi les options suivantes :
- Choisissez une couleur dans lepalette de couleurs sécurisées pour le Web en cliquant sur la case de couleur du texte dans l'inspecteur de propriétés.
- Choisissez Texte > Couleur. Le sélection de couleur système s'affiche. Sélectionnez une couleur, puis cliquez sur OK.
- Entrez le nom de la couleur ou une valeur hexadécimale directement dans le champ de l'inspecteur de propriétés.
- Pour définir la couleur du texte par défaut, utilisez la commande Modifier > Propriétés de la page. Voir « Définition des couleurs par défaut du texte », page 119.
<h1 id="pour-permettre-au-texte-de-reprendre-la-couleur-par-défaut">Pour permettre au texte de reprendre la couleur par défaut :</h1>
1 Dans l'inspecteur de propriétés, cliquez sur la case de couleur du texte pour ouvrir la palette de couleurs sécurisées pour le Web.
2 Cliques sur le bouton Barre (le bouton doté d'un carré blanc et barré d'une ligne rouge, situé dans l'angle supérieur droit).
<h1 id="déception-de-liste-à-puce-ou-numéroétées">Déception de liste à puce ou numéroétées</h1>
Vous pouvez creer des listedes numérotiées (triées), des listedes à puces (non triées) et des listedes de définitions à partir d'un texte existant ou d'un nouveau texte que vous tapez dans la fenêtre de document. Les listedes 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 listedes peuvent également être imbriquées, c'est-à-dire qu'elle contiennent d'autres listedes. Par exemple, vous pouvez imbriquer une liste numérotée ou à puces au sein d'une autre liste de même type.
Pour plus d'informations sur la définition d'un type de liste spécifique et d'autres options de liste pour une liste complète ou un élément de liste donné (par exemple, la numération ou l'emploi des chiffres romains dans une liste numérative ou la définition de puces carreés), voir Définition des options relatives aux propriétés des listedes dans l'aide de Dreamweaver.
<h1 id="pour-creer-une-liste">Pour creer une liste :</h1>
1 Dans le document Dreamweaver, placez le point d'insertion à l'emplacement où insérer la liste, puis procedede 1'une des manieres suivantes :
- Cliquez sur le bouton Liste simple ou Liste numérotable dans l'inspecteur de propriétés.
- Choisissez Texte > Lieste, puis selectionné le type de liste qui vous convient : Lieste simple (à puce), Lieste numérotée ou Lieste de définitions.
Le caractère de tête de l'élement de liste spécifique apparaît dans la fenêtre de document.
2 Tapez le texte de l'objet de la liste, puis appuyez sur la touche Entrée (Windows) ou Retour (Macintosh) pour creer 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).
<h1 id="pour-creer-une-liste-à-partir-dun-texte-existant">Pour creer une liste à partir d'un texte existant :</h1>
1 Sélectionnez une suite de paragraphs pour les transformer en liste.
2 Cliquez sur le boutonisme simple ou Lese numerotée dans l'inspecteur de propriétés ouCHOISSEZ Texte >Leste,puis selectionnee le type deiste desired : Lste simple,Leste numeroteeou Leste de definiptions.
<h1 id="pour-creer-une-liste-imbriquee">Pour creer une liste imbriquee :</h1>
1 Sélectionné les éléments de liste à imbriquer.
2 Cliques sur le bouton Retrait de l'inspecteur de propriétés ou choisissez Texte > Retrait.
Dreamweaver met le texte en retrait et create une liste individuelle avec les attributs HTML de la liste d'origine.
3 Appliquez un nouveau style ou type de liste au texte en retrait en suivant la même procEDURE que celle utilisée ci-dessus.
<h1 id="insertion-de-dates">Insertion de dates</h1>
Dreamweaver compte un objet Date pratique qui insère la date actuelle dans le format de votrechoix (avec ou sans heures), ainsi qu'une option pourmettre à jour cette date lorsqu'yousenregistrez le fichier.
Remarque : les dates et heures affichées dans la boite 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.
<h1 id="pour-insérer-la-date-courante-dans-un-document">Pour insérer la date courante dans un document :</h1>
1 Dans la fenêtre de document, placez le curseur là où vous désirez insérer la date.
2 Procedez de l'une des manieres suivantes:
- Choisissez Insertion > Date.
- Dans la barre Insertion, Sélectionnéz Commun, puis cliquez sur le bouton Date.
3 Dans la boîte de dialogue qui apparait 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ésactive cette option.
5 Cliquez sur OK pour insérer la date.
Conseil : 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, enclinquant sur le texte mis en forme et en sélectionnant Modifier le format de date dans l'inspecteur de propriétés.
<h1 id="insertion-de-caractères-spéciaux">Insertion de caractères spéciaux</h1>
Cercais caracteres speciaux sont representes en HTML par un nom ou par un numero, qui est alors appelé entité. Le langage HTML prévoit des noms d'entities pour de nombreux caractères spéciaux, par exemple le symbole « Copyright » (©);, l«esperluette » (&) et le symbole « Marque déposée » (trademark, ®);). Chaque entité est représentée à la fois par un nom HTML (par exemple — pour le tiret cadratin) et son équivalent numérique (dans ce cas, —);.
Conseil: le langage HTML utilise des crochets « dans son code, mais vous doivent exprimer les caractères spéciaux supérieur à et inférieur à sans que Dreamweaver les interprête comme du code. Dans ce cas, utilisez > pour le signe supérieur à () et pour le signe inférieur à ()
Malheureusement, certains navigateurs (certaines versions anciennes, ainsi que les navigateurs autres que Navigator et Internet Explorer) n'affichent pas correctement la plupart de ces entités.
Voupez inserer plusieurs caractères spéciaux (sous la forme d'entités HTML) enCHOISANT LA categorie Caracteres dans la barre Insertion.
<h1 id="pour-insérer-un-caractère-spécial-dans-un-document">Pour insérer un caractère spécial dans un document :</h1>
1 Dans la fenêtre de document, placez le curseur la où vous pouze insérer un caractère spécial.
2 Procedez de l'une des manieres suivantes:
- Choisissez le nom du caractère dans le sous-menu Insertion > Caractères.
- Dans la barre Insertion,CHOISSEZ LA CatEGORIE Caracteres,puis selectionnee le caractere special qui vous convient.
Conseil : de nombreux caractères spéciaux sont disponibles ; pour en sélectionner un , choisissez Insertion >
speciaux > Autre ou cliquez sur l'icone Autre caractere dans la barre Insertion, selectionnez un caractere, puis cliquez sur OK.
<h1 id="utilisation-de-barres-horizontales">Utilisation de barres horizontales</h1>
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.
<h1 id="pour-creer-une-barre-horizontally">Pour creer une barre horizontally :</h1>
1 Dans la fenetre de document, placez le curseur la où vous pouze insérer une barre horizontally.
2 Procedez de l'une des manieres suivantes :
- Choisissez Insertion > Barre horizontally.
- Dans la barre Insertion, Sélectionnez Commun, puis cliquez sur le bouton Barre horizontally.
<h1 id="pour-modifier-une-barre-horizontally">Pour modifier une barre horizontally :</h1>
1 Dans la fenêtre de document, Sélectionnéz la barre horizontally.
2 Choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur de propriétés et modifier la barre selon vos besoins.
L et H : spécifique l'épaissur et la hauteur de la barre, en pixels ou en pourcentage de la taille de la page.
Aligner : spécifie l'alignment 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.
Omphage : spécifie si la barre est arrivagnée d'un effet d'ombre portée. Désactivez cette option pour dessiner la barre en couleur pleine.
<h1 id="utilisation-de-styles-html-pour-formater-un-texte">Utilisation de styles HTML pour formater un texte</h1>
La définition de styles HTML vous permet d'appliquer rapidement et de façon homogène une mise en forme à la police du texte de vos documents. Les styles HTML peuvent seprésenter sous la forme d'un ou plusieurs attributs de balise de police HTML tels que la couleur, le dessin, la taillie, ainsi que d'autres attributs de mise en forme tels que le gras et l'italique. Vous pouvez, par exemple, creator un style de texte HTML composé de la police de caractère Arial, de la taillie 4+ , de la couleur verte et du style italique. Pour appliquer rapidement ce style, il vous suffit ensuite de selectionner le texte auquel l'appliquer puis de selectionner le style HTML dans le panneau Styles HTML.
Dans la mesure où les styles HTML se compose unquielement de balises de police,ils peuvent etre affiches dans les navigateurs qui ne prennt pas en charge les feuilles de style en cascade (CSS),notamment les versions 3.0 et anterieures des navigateurs.
Les styles HTML représentent néanmoins un inconvenient : les modifications qui leur sont apportées ne se répécutent pas systématique dans le document. Si donc vous modifiez un style déjà appliqué, vous devez rappliquer le style au texte afin d'actualiser sa mise en forme.
A la différence des styles CSS, les styles HTML n' affectent que le texte auquel vous les appliquez ou le texte que vous creez à l'aide d'un style HTML spécifique. Pour avoir la possibilité de modifier une mise en forme et de voir toutes les instances de cette mise en forme modifiées automatiquement en conséquence, utilisez les feuilles de style CSS ; voir « A propos des feuilles de style en cascade », page 298.
Vou pousse utiliser le panneau Styles HTML pour définir les styles HTML utilisés sur votre site, puis les partager avec d'autres utilisateurs ou les appliquer à d'autres sites, locaux ou distants. Pour plus d'informations, voir « Utilisation de styles HTML dans d'autres sites », page 297.
Pour afficher le panneau Styles HTML, procédez de l'une des manières suivantes :
- Choisissez Fenêtre > Styles HTML.
- Appuyez sur les touches Ctrl + F11 (Windows) ou Commande + F11 (Macintosh).
- Cliquez sur l'icone Styles HTML dans le Lanceur.
<h1 id="utilisation-du-panneau-styles-html">Utilisation du panneau Styles HTML</h1>
Le panneau Styles HTML affiche les styles HTML disponibles pour le site local.
Il existe deux types de styles HTML : les styles de paragraphe et les styles de sélection. Ils sont identifiables par le symbole situé dans la première colonne du panneau Styles HTML :
Les styles de paragraphe, précédés d'un symbole de paragraphe, permettent de mettre en forme les paragraphs.
Les styles de selection, precedés de la dette a, permettent demettre en forme le texte seLECTIONné. Gráce aux deux premiers styles du panneau Styles HTML, Supprimer le style de la selection et Supprimer le style du paragraphe, vous pouvez supprimer toutes les balises de mise en forme du texte que vous seLECTIONnéz et auquel vous les appliquer.
Remarquez le style Gras dans le panneau Styles HTML ci-dessus. Le signe plus (+) qui précède le style indique qu'il s'agit d'un style de mise en forme du texte auquel il s'applique. En l'absence d'un signe plus, tout style préexistent est effacé avant l'application du style sélectionné. Ainsi, le style HTML « a+red » ajoute simplement la couleur rouge à une mise en forme déjà appliquée au texte sélectionné, tandis que le style HTML « Emphasis » efface toute mise en forme avant l'application de ce style.
Pour affiche les attributs de style d'un style HTML existant :
1 Dans le panneau Styles HTML, selectionnez un style.
2 Clique à l'aide du bouton droit (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh) sur le style HTML ou double-cliquez sur le style HTML, puis chosessez Edition dans le menu contextual.
3 Dans la boîte de dialogue Définir style HTML, définièsez les caractéristiques de ce style.
L'option Appliquer à déterminé si le style ainsi défini concerne le texte seLECTIONné (Selection) ou le bloc de texte courant (Paragraphe). L'option En appliquant déterminé si le style ainsi défini doit être ajouté à la mise en forme d'origine du texte (Ajouter à style existant) ou si celle ci doit être suprimée et remplaçaee par le nouveau style (Supprimer style existant).
<h1 id="pour-appliquer-un-style-html-existant">Pour appliquer un style HTML existant :</h1>
Dans le panneau Styles HTML, Sélectionnez un style.
- Vérifiez, dans l'angle inférieur gauche du panneau Styles HTML, que l'options Appliquées automatiquement est cochée. Si c'est le cas, cliquez une fois sur le style.
- Si ce n'est pas le cas, cliquez sur le style, puis cliquez sur Appliquer.
<h1 id="pour-supprimer-le-formatage-dun-texte-dans-votre-document">Pour supprimer le formatage d'un texte dans votre document :</h1>
1 Sélectionnéz le texte mis en forme.
2 Dans le panneau Styles HTML, cliquez sur Supprimer le style du paragraphe ou sur Supprimer le style de la selection.
Supprimer le style du paragraphe supprime toute mise en forme du bloc de texte courant dans le document. Supprimer le style de la seLECTION supprime toute mise en forme du texte sélectionné.
Remarque : ces deux options permettent de supprimer toute mise en forme (à l'exception de la mise en forme CSS), qu'elle que soit la façon dont cette mise en forme a ete appliquee a l'origine (par exemple, dans le panneau Styles HTML ou dans l'inspecteur de proprietes).
<h1 id="pour-supprimer-un-style-du-panneau-styles-html">Pour supprimer un style du panneau Styles HTML :</h1>
1 Dans le panneau Styles HTML, désactiver la case à cocher Appliquer automatiquement.
2 Sélectionnez un style HTML.
3 Cliquez sur l'icone Supprimer style (poubelle) dans l'angle inférieur droit du panneau.
<h1 id="creation-dun-style-html">Creation d'un style HTML</h1>
Vous peuvent creer des styles de deux manieres : vous pouvezmettre en forme le texte dans le document puis creer un style d'après le texte selectionné ou bien creer un style dans le panneau Styles HTML en selectionnant les attributs de mise en forme à appliquer.
<h1 id="pour-creer-un-nouveau-style-html">Pour creer un nouveau style HTML :</h1>
1 Dans le panneau Styles HTML, cliquez sur l'icone Nouveau style ouCHOisissez Texte > Styles HTML > Nouveau style.
La boîte de dialogue Définir style HTML apparait.
2 Dans la zone de texte Nom, tapez le nom du style.
3 Dans la zone Appliquer à,CHOISISEZ le type de style en procedant de l'une des manieres suivantes :
- Pour définir un style de seLECTION,CHOISSESELECTION.
- Pour définir un style de paragraphe,CHOISSEZ Paragraphe.
Remarque : un style de paragraphe s'applique à tout le bloc de texte dans lequel se trouve le point d'insertion, independamment du texte sélectionné.
4 Dans la zone En appliquant, indiquez si le style HTML doit etre ajoute au style existant du texte ou du paragraphe selectionné ou si cette mise en forme doit etre supprimée et replacée par le nouveau style HTML.
Remarque: gardez à l'esprit la hierarchie de l'application des styles : les styles HTML sont prioritaires sur les styles CSS, lesquels sont eux-memesprioritäresur les styles CSS externes. Pour plus d'informations,voir « A propos des feuilles de style en cascade »,page 298.
5 Sélectionnez les options de mise en forme qui vous convennent dans les menus déroulants de la zone Attributes de police.
6 Si vous définissez un style de paragraphe,CHOIssez une balise de paragraphe (par exemple, Paragraphe, En-tete1, Pré-formate) dans le menu derouulant Format de la zone Attributes de paragraphe.
7 Dans la zone Alignment, cliquez sur le bouton permettant d'aligner le texte a gauche, a droite ou de le centerer selon l'alignement de paragraphe recherche.
8 Cliquez sur OK.
Le style est ajoute à la liste Styles HTML.
<h1 id="pour-creer-un-nouveau-style-html-basé-sur-du-texte-existant">Pour creer un nouveau style HTML basé sur du texte existant :</h1>
1 Dans votre document, sélectionnez ou creez un texte dont la mise en forme sera réutilisée pour le nouveau style HTML.
Conseil : utilisez l'inspecteur de propriétés pour afficher et appliquer la mise en forme, puis enregistrez-la comme style HTML.
2 Dans l'angle inférieur droit du panneau Styles HTML, cliquez sur l'icone Nouveau style (+) . La boîte de dialogue Définir style HTML apparait.
3 Dans la zone de texte Nom, tapez le nom du style.
4 Dans la zone Appliquer à,CHOISSEZ le type de style en procédant de l'une des manières suivantes:
- Pour définir un style de sélection, choisissez Sélection.
- Pour définitir un style de paragraphe,CHOISSEZ Paragraphe.
Remarque : un style de paragraphe s'applique à tout le bloc de texte dans lequel se trouve le point d'insertion, independamment du texte sélectionné.
5 Dans la zone En appliquant, indiquez si le style HTML doit etre ajoute au style existant du texte ou du paragraphe selectionné ou si cette mise en forme doit etre supprimée et remplaçaee par le nouveau style HTML.
Remarque: gardez à l'esprit la hierarchie de l'application des styles : les styles HTML sont prioritaires sur les styles CSS, lesquels sont eux-memesprioritäresur les styles CSS externes. Pour plus d'informations,voir « A propos des feuilles de style en cascade »,page 298.
6 Si vous définissez un style de paragraphe,CHOIssez une balise de paragraphe (par exemple, Paragraphe, En-tete1, Pré-formate) dans le menu déroulant Format de la zone Attributes de paragraphe.
7 Dans la zone Alignment, cliquez sur le bouton permettant d'aligner le texte à gauche, à droite ou de le centerer selon l'alignement de paragraphe recherche.
8 Cliquez sur OK.
<h1 id="application-dun-style-html">Application d'un style HTML</h1>
L'application d'un style consiste simplement a selectionner le texte ou le paragraphe auquel appliquer le style, puis a selectionner le style dans le panneau Styles HTML.
<h1 id="pour-appliquer-un-style-html">Pour appliquer un style HTML :</h1>
1 Assurez-vous que la case Appliquer automatiquement est activée dans l'angle inférieur gauche du panneau Styles HTML, afin d'appliquer systématiquement le style selectionné.
2 Dans la fenêtre de document, procédez de l'une des manières suivantes pour sélectionner le texte auquel appliquer le style :
- Placez le point d'insertion n'importe où dans un paragraphe pour lui appliquer un style de paragraphe.
- A l'aide du cursesur, Sélectionnéz le texte auquel appliquer un style de sélection.
3 Dans le panneau Styles HTML, cliquez sur le style HTML à appliquer au texte.
Le texte est mis à jour automatiquement dans la fenêtre de document.
<h1 id="modification-dun-style-html">Modification d'un style HTML</h1>
Lorsque vous modifiez un style HTML, Dreamweaver n'actualise pas automatiquement le texte préalablement mis en forme avec un style HTML. Pourmettre à jour le style d'un texte mis en forme, il convient de rappliquer le style manuellement.
<h1 id="pour-modifier-un-style-html-existant">Pour modifier un style HTML existant :</h1>
1 Vérifiez qu'aucun texte n'est seLECTIONné dans la fenêtre de document.
2 Dans le panneau Styles HTML, vérifie que l'option Appliquer automatiquement est désactivée.
Si l'option Appliquer automatiquement est activée, le style HTML est appliqué lorsque vous le sclectionné dans le panneau Styles HTML.
3 Dans le panneau Styles HTML, procedez de l'une des manieres suivantes :
- Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh) sur le style, puisCHOisissez Modifier dans le menu contextualuel.
Double-cliquez sur le style.
La boîte de dialogue Définir style HTML apparait.
4 Dans la boîte de dialogue, définisse les options d'attributs du style.
5 Pour rendre à ce style ses attributs par défaut, cliquez sur Supprimer.
<h1 id="utilisation-de-styles-html-dans-dautres-sites">Utilisation de styles HTML dans d'autres sites</h1>
VoussupportezutiliserlepanneauStyleshtMLpourtenegristerlesstyleshtmuliséssurvotsite,puis lespartager avecd'autresutilisateursoules appliqueraàdautresites,locauxoudistants.
Les styles HTML sont automatiquement stockés dans le dossier Library de votre site local, dans un fjichier nommé Styles.xml. Il vous est possible de copier le fjichier Styles.xml du dossier Library d'un site local dans le dossier Library d'un autre site local afin de réutiliser les styles existants.
Remarque : un seul fjichier Styles.xml est admis par site ; si donc vous creez de nouveaux styles HTML sur le site vers lequel vous copiez un fjichier Styles.xml, le fjichier copiedé se substitue au fjichier existant. Toutes les modifications de mise en forme appliquées par vos soins sont conservées, et vous pouvez recréer les styles en scélectionnant le texte dans le document puis en définitissant un nouveau style HTML.
<h1 id="pour-partager-vos-styles-html-avec-dautres-sites-ou-utilisateurs">Pour partager vos styles HTML avec d'autres sites ou utilisateurs :</h1>
1 Choisissez Fenetre > Site ou Site > Fichiers du site pour ouvrir le panneau Site en mode Fichiers du site.
2 Dans le panneau Site, recherche puis ouvre le dossier Library.
Vous remarquerez un fjichier appelé « styles.xml ». Ce fjichier contient tous les styles HTML du site. Vous pouvez placer, acquérir, archiver, extraire et copier ce fjichier comme tout autre fjichier de cette site. Vous pouvez également créé des Design Notes (notes de conception) pour le fjichier « styles.xml ». Avant de créé ou modifier un style pour un site distant, vous devez d'abord extraire le fjichier styles.xml.
Pour plus d'informations sur ces options, voir « Configuration d'un dossier distant », page 64.
<h1 id="a-propos-des-feuilles-de-style-en-cascade">A propos des feuilles de style en cascade</h1>
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. Les styles CSS vous permettent de générer en souplesse l'aspect d'une page, tant en termes de précision de l'emplacement de la presentation qu'en termes de besoin de polices et de styles de caractères spécifique.
Par ailleurs, les styles CSS permettent de contrôler plusieurs propriétés qui ne peuvent pas être générées via le langage HTML seul. Par exemple, vous pouvez attribuer des puce de liste personnalisées et spécifier différentes tailles et unités de police (pixels, points, etc.). En utilisant des styles CSS et en définissant des tailles de police en pixels, vous garantissez un traitement plus homogène de la presentation et de l'aspect de votre page dans différents navigateurs. Outre la mise en forme du texte, vous étés à même de:gérer le format et le positionnement des éléments blocs d'une page Web. Vous pouvez ainsi définir des marges et des bordures, habiller du texte avec du texte, etc.
Une rècle de style CSS se compose de deux entités : le sélection et la déclaration. Le sélection correspond au nom du style (par exemple, TR ou P), tandis que la déclaration définit les éléments de ce style. La déclaration est composée de deux entités la propriété : (par exemple, font-family) et la valeur (par exemple, Helvetica). Le terme « en cascade » signifie qu'il est possible d'appliquer plusieurs feuilles de style à une même page Web. Vous pouvez, par exemple, creator une feuille de style pour définir la couleur et une autre pour définir les marges, puis les appliquer toutes les deux à la même page afin d'obtenir la conception recherchee.
Les styles CSS seront l'avantage major d'être facilement mis à jour ; lorsque vous modifier un style CSS, la mise en forme de tous les documents dotés de ce style reflète automatiquement le nouveau style.
Dans Dreamweaver, utilisez le panneau Styles CSS pour creer, afficher et associer des attributs de style à vos documents. Pour plus d'informations sur l'utilisation du panneau Styles CSS, voir « Utilisation du panneau Styles CSS», page 299. Outre les styles et feuilles de style de votre composition, libre à vous d'utiliser les feuilles de style livrées avec Dreamweaver pour styliser vos documents. Voir « Création d'un document basé sur un filchier de conception Dreamweaver», page 113.
Vou puevez définir les types de feuilles de style CSS suivants dans Dreamweaver :
- Les styles CSS personnalisés, également appelés styles de classe, définissant les attributs de styles d'une plage ou d'un bloc de texte. Voir « Application d'un style CSS personnalisé (classe)», page 302.
- Les styles appliqués aux balises HTML redéfinissent le formatage de ces balises, par exemple h1. Lorsque vous creez ou modifiez un style CSS pour la balise h1, tout le texte formaté à l'aide de cette balise h1 est immédiatement modifié en conséquence.
- Les styles des sélecteurs CSS redéfinissant le formatage d'une combinaison particulière de balises (par exemple, td h2 s'applique lorsque la balise d'en-tête h2 apparait dans une cellule de tableau) ou à toutes les balises contenant un attribut id spécifique (par exemple #monStyle s'applique à toutes les balises qui contiennent la paire attribut/ Valeur ID="monStyle").
Les feuilles de style CSS résident dans la zone head d'un document. Les styles CSS peuvent définir les attributs de mise en forme pour les balises HTML, plages de texte identifiées par un attribut class. Dreamweaver MX reconnaît les styles définis dans des documents existants, pour peu que ceux-ci soient conformes aux recommendations sur les feuilles de style CSS.
Conseil : pour afficher le manuel de reférence CSS O'Reilly inclus avec Dreamweaver, cliquez sur le bouton Référence situé sur la barre d'outils, puis choisissez l'options correspondante dans le menu déroulant.
La mise en forme manuelle du code HTML a toujours la priorité sur la mise en forme appliquée à l'aide de styles CSS (ou HTML). Pour permettre aux styles CSS de contrôle totalement la mise en forme d'un paragraphe, vous devez supprimer tout le formatage manuel du HTML et tous les styles HTML.
Vous pouvez afficher la plupart des attributs de style appliqués dans la fenêtre de document. Vous pouvez également afficher un aperçu du style appliqué au document dans une fenêtre de navigateur. Certains attributs de styles CSS s'affichent différemment dans Microsoft Internet Explorer 4.0 et dans Netscape Navigator 4.0, et quelques-uns ne sont encore pris en charge par chaque navigateur.
La fonction Feuilles de style à la conception de Dreamweaver est disponible à partir du panneau Styles CSS. Elle vous permet de masquer ou d'afficher des attributs de feuilles de style pendant la conception d'une page dans Dreamweaver (notamment pour visualiser un document avec une feuille de style conscience pour Navigator ou Internet Explorer). Pour plus d'informations sur l'utilisation de feuilles de style à la conception, voir « Utilisation de feuilles de style à la conception », page 305.
<h1 id="utilisation-du-panneau-styles-css">Utilisation du panneau Styles CSS</h1>
Utilissez le panneau Styles CSS pour creer des styles CSS, en afficher les propriétés puis les appliquer aux éléments d'un document.
Pour ouvrir le panneau Styles CSS, procedede l'une des manieres suivantes:
- Choisissez Fenêtre > Styles CSS.
- Appuyez sur les touches Maj+F11.
Les boutons radio Appliquer les styles et Modifier les styles, situés en haut du panneau Styles CSS, vous permettent deCHOISIR DIFFÉRÊNTS MODES D'AFFICHAGE des styles CSS associés au document en cours.
Activéz le mode Appliquer les styles pour sélectionner un style de classe à appliquer à un élément de votre document. Ce mode affiche uniquement les styles (de classe) personnalisés. Par conséquent, les styles HTML redéfinis et les styles de sélecteurs n'apparaissent pas dans ce panneau. Dans la mesure où ils sont associés à une balise HTML, leurs attributs de styles sont appliqués systématiquement à toutes les balises du document affecté par le style défini. Si, par exemple, vous définisse des attributs de styles pour la balise table, les définitions de style sélectionnées se répécutent automatiquement dans le tableau de votre document.
Le mode Modifier les styles vous permet d'observer la définition des styles associés au document en cours. Ce mode affiche la définition des styles CSS (de classe), des balises HTML redéfinies et des styles des sélecteurs CSS. Vous pouvez également l'utiliser pour afficher les feuilles de style à la conception que vous avez appliquées au document.
A mesure que vous creez ou associez une feuille de style CSS, le nom et les attributs du style apparaisent dans l'affichage Modifier les styles du panneau Styles CSS. Le mode Modifier les styles repertorie tous les selecteurs définis dans toutes les balises de styles et les feuilles de style externes ou importées. Le mode Appliquer les styles vous permet d'afficher les styles appliqués dans le document en cours, ainsi que les styles disponibles dans une feuille de style externe attachée.
Lorsque vous creez un style personnelé (une classe), il apparait dans le panneau de styles CSS et dans le sous-menu Texte > Styles CSS.
Les boutons suivants sont situés au bas du panneau Styles CSS:
Attacher une feuille de style : affiche la boîte de dialogue Ajouter une feuille de style externe. Sélectionné une feuille de style externe pour creer un lien vers le document en cours ou à importer dans celui-ci. Pour plus d'informations sur l'association d'une feuille de style externe, voir « Création ou liaison avec une feuille de style CSS externe», page 303.
Nouveau style CSS : affiche la boîte de dialogue Nouveau style CSS. Utilisez la boîte de dialogue Nouveau style CSS pour sélectionner le type du style que vous creez (par exemple, pour définir un style de classe, redéfinissez une balise HTML) ou pour définir un/selecteur CSS. Pour plus d'informations sur la création d'un nouveau style, voir « Création d'un style CSS », page 301.
Modifier une feuille de style : affiche la boîte de dialogue Définition du style CSS. Vous pouvez modifier l'un des styles du document courant ou un style contenu dans une feuille de style externe. Pour plus d'informations sur la mise à jour d'une feuille de style, voir « Modification d'un style CSS », page 304.
Supprimer le style CSS : supprime le style sélectionné du panneau Styles CSS et supprime la mise en forme de tous les éléments auxquels il est appliqué.
Remarque : cliquez avec le bouton croit de la souris (Windows) ou en maintainant la touche Contrôle enforcée (Macintosh) sur le panneau Styles CSS pour ouvrir un menu contextual d'options disponibles pour l'execution des commandes de feuilles de style CSS.
<h1 id="creation-dun-style-css">Creation d'un style CSS</h1>
Creez une feuille de style CSS pour automatiser la mise en forme de balises HTML ou d'une plage de texte identifié par un attribut class.
<h1 id="pour-creer-un-nouveau-style-css">Pour creer un nouveau style CSS :</h1>
1 Placez le point d'insertion dans le document, puis procédez de l'une des manières suivantes pour ouvrir la nouvelle boîte de dialogue Nouveau style CSS :
- Dans l'angle inférieur droit du panneau Styles CSS (Fenêtre > Styles CSS), cliquez sur le bouton Nouveau style CSS (+).
- Dans l'inspecteur de propriétés de texte, cliquez sur le bouton Basculer entre les modes CSS/HTML, si nécessaire, pour basculer en mode CSS, puis désissez Nouveau style CSS dans le menu dérouulant Style CSS.
- Choisissez Texte > Styles CSS > Nouveau style CSS.
La boîte de dialogue Nouveau style CSS apparait.
2 Définisse le type de style CSS que vous souhaitez créé :
- Pour creer un style personnelé applicable en tant qu'attribut class à une plage ou un bloc de texte, Sélectionnez Créer un style personnelé ( classe), puis entrez le nom du style dans le champ Nom.
Remarque : les noms de styles personalisés ( classe) doivent commencer par un point et peuvent contérer toute combinaison de lettres et de nombres. Par exemple, .monentête1. Si vous omettez le point, Dreamweaver l'insère à votre place.
- Pour redéfinir le formatage par défaut d'une balise HTML spécifique, Sélectionnez Redéfinir la balise HTML, puis entrez une balise HTML ou choisissez-en une dans le menu déroulant Balise.
- Pour définir la mise en forme d'une combinaison particulière de balises ou de toutes les balises contenant un attribut 1d spécifique, Sélectionnez Utiliser le sélectioneur CSS, puis entrez une ou plusieurs balises HTML ou choisissez-en une dans le menu déroulant. Les sélectionurs disponibles dans le menu déroulant sont a:active, a:hover, a:link et a:visited.
3 Sélectionnéz l'emplacement dans lequel définir le style :
- Pour creer une feuille de style externe, choisissez Nouveau fjchier feuille de style.
- Pour incorporer le style dans le document en cours, choisissez Seulement ce document.
4 Cliquez sur OK.
La boîte de dialogue Définition du style s'affiche.
5 Choisissez les options du nouveau style CSS.
6 Lorsque vous avez defini les attributs de style, cliquez sur OK.
Pour plus d'informations sur des paramètres de style CSS spécifique, voir les rubriques suivantes dans l'aide de Dreamweaver :
- Définition des propriétés de type CSS
- Définition des propriétés d'arrière-plan de style CSS
- Définition des propriétés de bloc de style CSS
- Définition des propriétés de boîte de style CSS
- Définition des propriétés de cordure de style CSS
- Définition des propriétés de liste de style CSS
- Définition des propriétés de positionnement de style CSS
- Définition des propriétés d'extensions de style CSS
<h1 id="application-dun-style-css-personnelé-classe">Application d'un style CSS personnelé ( classe)</h1>
Les styles CSS personnalisés, ou classes, sont le seul type de style CSS qui peut être appliqué à n'importe quel texte dans votre document, quelles que soient les balises qui contrôle ce texte. Tous les styles personnalisés (claque) associés au document en cours sont affichés dans le mode Appliquer les styles du panneau Styles CSS et dans le mode CSS de l'inspecteur de propriétés de texte.
Meme si la plupart des styles sont actualisés immédiatement, il est préconse 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 CSS au même texte, il peut y avoir entre ces styles un conflit qui produit des résultats inattendus. Voir « A propos des conflits de styles», page 306 pour plus d'informations.
<h1 id="pour-appliquer-un-style-css-personnelé">Pour appliquer un style CSS personnelé :</h1>
1 Sélectionnéz 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 scélectionné une plage de texte au sein d'un même paragraphe, le style CSS n'affectora que cette scélection.
Pour indiquer la balise précise à laquelle le style CSS doit être appliqué, Sélectionnez cette balise dans le sélecteur situé dans la partie inférieure gauche de la fenêtre de document.
2 Pour appliquer un style de classe, procedede l'une des manieres suivantes :
- Dans le panneau Styles CSS (Fenêtre > Styles CSS),CHOISSEZ Appliquer les styles,puis cliquez sur le nom du style que vous souhaitez appliquer dans la liste Styles CSS.
- Dans l'inspecteur des propriétés de texte, cliquez sur le bouton Basculer entre les modes CSS/HTML, si nécessaire, pour basculer en mode CSS, puis désissez le style de classe à appliquer dans le menu dérouulant Style CSS.
- Dans la fenêtre de document, cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh) sur le texte seLECTIONné,CHOISSEZ Styles CSS dans le menu contextualuel, puis choisissez le style à appliquer.
- Choisissez Texte > Styles CSS, puis selectionné le style à appliquer dans le sous-menu.
<h1 id="pour-supprimer-un-style-personnelé-de-la-selection">Pour supprimer un style personnelé de la seLECTION :</h1>
Selectionnez l'objet ou le texte dont vous souhaitez supprimer le style, puis procédez de l'une des manières suivantes :
- Dans l'inspecteur de propriétés de texte, cliquez sur le bouton Basculer entre les modes CSS/HTML, si nécessaire, pour basculer en mode CSS, puis désissez Aucun style CSS dans le menu dérouulant Style CSS.
- Dans le panneau Styles CSS, activez le mode Appliquer les styles, puis Aucun style CSS.
<h1 id="création-ou-liaison-avec-une-feuille-de-style-css-externe">Création ou liaison avec une feuille de style CSS externe</h1>
Une feuille de style CSS est un fichier texte externè à vos documents. Il contient toutes les indications de styles et de mises en forme. Si vous modifie une feuille de style CSS externe, les changements sont reflétés dans tous les documents liés à cette feuille de style. Vous pouvez exporter les styles CSS trouvés dans un document afin de créé une nouvelle feuille de style CSS, et attacher ou créer un lien vers une feuille de style externe pour appliquer les styles trouvés ici.
Outre les feuilles de style CSS de votre composition, vous pouze associier celles livrées avec Dreamweaver aux pages d'un site. Pour plus d'informations sur l'utilisation des feuilles de style à la conception livrées avec Dreamweaver, voir « Création d'un document basé sur un fichier de conception Dreamweaver», page 113.
Pour plus d'informations sur l'application d'un style, voir « Application d'un style CSS personnelisé ( classe)», page 302.
<h1 id="pour-creer-un-lien-vers-ou-importer-une-feuille-de-style-css-externe">Pour creer un lien vers ou importer une feuille de style CSS externe :</h1>
1 Ouvrez le panneau Styles CSS en procédant de l'une des manières suivantes :
- Choisissez Fenêtre > Styles CSS.
- Appuyez sur les touches Maj+F11.
- Cliquez sur l'icone Styles CSS dans le Lanceur.
2 Dans le panneau Styles CSS, cliquez sur le bouton Attacher une feuille de style.
La boîte de dialogue Ajouter une feuille de style exter s'affiche.
3 Dans la boîte de dialogue Ajouter une feuille de style externe, procédez de l'une des manières suivantes :
- Cliquez sur le bouton Parcourir (Windows) ou Choisir (Macintosh) pour sélectionner une feuille de style externe ou tapez son chemin d'accès dans la zone Fichier/URL.
4 Dans la zone Ajouter sous, selectionnez une des options suivantes :
- Pour creer un lien entre le document en cours et une feuille de style externe, choisissez Lien. Cette selection a pour effet de creer une balise a link href dans le code HTML et de referrer c 1'URL de l'emplacement de la feuille de style publiée. Microsoft Internet Explorer et Netscape Navigator prennent tous deux en charge cette methode.
- Pour référencer une feuille de style externe,CHOISISEZ Importer. Cette selection a pour effet de creer une balise @import dans le code HTML et de référencer l'URL de l'emplacement de la feuille de style publiée. Cette méthode n'est pas compatible avec Netscape Navigator.
5 Cliquez sur OK.
Le nom de la feuille de style CSS externe apparait dans la liste Modifier les styles du panneau Styles CSS, et les styles personnalisés (classe) s'affichent dans le mode Appliquer les styles, precedés de l'identificateur de feuille de style externe.
<h1 id="modification-dun-style-css">Modification d'un style CSS</h1>
Vouss pouvez facilement modifier les styles internes et externes appliqués à un document. Dans l'affichage Modifier les styles, Sélectionnéz le style que vous voulez modifier, puis ouvre la boîte de dialogue Définition du style CSS pour le modifier.
Lorsque vous modifie une feuille de style CSS qui contrôle du texte dans votre document, vous reformatez instantanément tout ce texte. Les modifications apportées à une feuille de style externe se réprecutent sur tous les documents auxquels elle est liée.
Libre à vous de définir un éditeur externe pour la modification des feuilles de style. Pour plus d'informations sur la définition d'un éditeur externe, voir « Lancement d'un éditeur externe pour des fichiers multimédia», page 338.
Remarque : si vous avez installe TopStyle, un editor CSS de Bradbury Software, sur votre ordinateur, Dreamweaver le détecte automatiquement et le définit comme editor exter pour les fichiers .css. Dreamweaver est livre avec une version d'évaluation de Topstyle.
<h1 id="pour-modifier-un-style-css">Pour modifier un style CSS :</h1>
1 Dans le panneau Styles CSS, cliquez sur le bouton radio Modifier les styles pour afficher les styles dans le document en cours.
2 Cliquez sur le style que vous poulez modifier pour le selectionner, puis procedede l'une des manieres suivantes :
- Double-cliquez sur le style seLECTIONné.
- Cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Contrôle enfoncée (Macintosh), puis désissez Modifier.
- Cliquez sur le bouton Modifier une feuille de style au bas du panneau Styles CSS.
La boîte de dialogue Définition du style CSS s'affiche.
3 Modifie le style à votre convenance, puis cliquez sur OK.
<h1 id="modification-dune-feuille-de-style-css">Modification d'une feuille de style CSS</h1>
En règle générale, une feuille de style CSS comprend un ou plusieurs styles. Vous pouvez modifier un style individuel dans une feuille de style CSS (voir « Modification d'un style CSS», page 304) ou en modifier plusieurs, si nécessaire.
La boîte de dialogue Modifier feuille de style vous permet de manipuler les feuilles de style de plusieurs manières. Utilisez-la pour creer un lien vers une feuille de style externe ou pour creer, modifier, dupliquer ou supprimer une feuille de style.
<h1 id="pour-modifier-une-feuille-de-style-css">Pour modifier une feuille de style CSS :</h1>
1 Dans le panneau Styles CSS, selectionnez Modifier les styles.
2 Dans la liste des styles, cliquez sur la feuille de style que vous pouze modifier pour la sélectionner, puis procedede l'une des manieres suivantes :
- Cliquez sur le bouton Modifier une feuille de style au bas du panneau Styles CSS.
- Cliquez avec le bouton droit de la souris sur la feuille de style,CHOISSEZ Modifier feuille de style, selectionnee la feuille de style à modifier dans la boite de dialogue qui s'affiche, puis cliquez sur Modifier.
Les styles de la feuille de style CSS selectionnée apparaissent dans la boîte de dialogue.
3 Dans la boîte de dialogue, Sélectionnez le style que vous poulez modifier, puis cliquez sur Modifier.
La boîte de dialogue Définition du style CSS s'affiche.
4 Modifie les styles à votre convenance, puis cliquez sur OK.
<h1 id="utilisation-de-feuilles-de-style-à-la-conception">Utilisation de feuilles de style à la conception</h1>
Les feuilles de style à la conception vous permettent d'afficher ou de masquer la conception appliquée par une feuille de style CSS lorsque vous travailliez dans un document Dreamweaver. Vous pouvez par exemple utiliser cette fonction pour inclure ou exclude l'effect d'une feuille de style Macintosh ou Windows pendant la création d'une page.
Les feuilles de style à la conception s'appliquent uniquement lorsque vous travailliez dans un document Dreamweaver ; lorsque la page est affichée dans une fenêtre de navigateur, seuls les styles réellement attachés au document ou qui y sont incorporens apparaisent dans un navigateur.
<h1 id="pour-afficher-ou-masquer-une-feuille-de-style-css-à-la-conception">Pour afficher ou masquer une feuille de style CSS à la conception :</h1>
1 Ouvrez la boite de dialogue Feuilles de style à la conception en procédant de l'une des manières suivantes :
- Cliquez avec le bouton droit de la souris dans le panneau Styles CSS, puis désisissez Feuilles de style à la conception dans le menu contextual.
- Choisissez Texte > Styles CSS > Feuilles de style à la conception.
2 Dans la boîte de dialogue, définisse les options d'affichage ou de masquage d'une feuille de style sélectionnée.
- Pour afficher une feuille de style CSS à la conception, cliquez sur le bouton plus (+) situé au-dessus de Afficher à la conception uniquement, puis recherchez la feuille de style CSS à afficher dans la boîte de dialogue Sélectionner une feuille de style.
- Pour masquer une feuille de style CSS, cliquez sur le bouton plus (+) situé au-dessus de Masquer à la conception, puis recherchez la feuille de style CSS à masquer dans la boîte de dialogue Sélectionner une feuille de style.
- Pour supprimer une feuille de style de l'une ou l'autre des listedes, cliquez sur la feuille de style que vous poulez supprimer, puis cliquez sur le bouton moins (-) approprié.
3 Cliquez sur OK pour fermer la boite de dialogue.
Le panneau Styles CSS est actualisé avec le nom de la feuille de style sélectionnée ainsi qu'un indicateur, « masqué » ou « concevoir », selon l'état de la feuille de style.
<h1 id="exportation-de-styles-pour-creer-une-feuille-de-style-css">Exportation de styles pour creer une feuille de style CSS</h1>
Voussouvezexporterdes stylesd'undocument pourcrier une feuille de styleCSS.Vous pouze ensuitecrier des liensvers d'autresdocuments pour appliquercesyles.
Pour exporter des styles CSS d'un document et creer une feuille de style CSS :
1 Choisissez Fichier > Exporter > Exporter les styles CSS ou Texte > Exporter feuille de style.
La boîte de dialogue Exporter les styles dans un fichier CSS s'affiche.
2 Entrez un nom pour le style et cliquez sur le bouton Enregister.
Le style est enregistré sous la forme d'une feuille de style CSS.
<h1 id="a-propos-des-conflits-de-styles">A propos des conflits de styles</h1>
Lorsque vous appliquez plusieurs styles CSS au même texte, il peut y avoir entre ces styles un conflit qui produit des résultats inattendus. Les navigateurs appliquent les attributs de style selon les règles suivantes :
- Si deux styles sont appliqués au même texte, le navigateur affiche tous les attributs des deux styles, sauf en cas de conflit entre deux attributs spécifique. Par exemple, un style peut spécifier le bleu comme couleur du texte, alors que l'autre style indiquera le rouge.
- Si des attributs de deux styles appliqués au même texte sont en conflit, le navigateur désira l'attribut du style en aval, c'est-à-dire celui qui est le plusprés du texte lui-même.
- En cas de conflit direct entre deux styles, les attributs des styles CSS (qui sont appliqués à l'aide de l'attribut class) sont prépondérants sur les attributs des styles de balises HTML.
Dans l'exemple qui suit, le style défini pour h1 peut spécifier la police, la taille et la couleur de tous les paragraphs h1, mais le style CSS personnelé .Bleu appliqué à ce paragraphe est prépondérant sur la valeur de couleur déclarée dans le style h1. Le second style CSS personnelé . Rouge l'emporte à son tour sur le style .Bleu, car il se trouve à l'intérieur du style .Bleu.
<H1><SPAN CLASS="Bleu">Ce paragraphe est contrôle par le style personnelisé. Bleu et par le style de balise HTML H1.
<SPAN CLASS="Rouge">... sauf cette phrase, qui est contrôle par le style. Rouge.</span>
Nous revenons maintain au style .Bleu.</SPAN></H1>
<h1 id="conversion-de-styles-css-en-balises-html">Conversion de styles CSS en balises HTML</h1>
Si vous avez utilisé des styles CSS pour assurer la mise en forme de texte (par exemple la famille, la taille, la couleur et la decoration des polices) et souhaitez par la suite que cette mise en forme soit également visible dans la version 3.0 des navigateurs, vous pouvez utiliser la commande Fichier > Convertir > Compatible avec les navigateurs 3.0 pour convertir la plus grande partie possible des informations de style en balises HTML.
Remarque : tous les styles CSS ne peuvent pas etre convertis en code HTML, car les balises HTML ne couvent pas ou ne prennet pas en charge tous les attributs possibles dans CSS.
Pour convertir un fisquier qui utilise des styles CSS en fisier compatible avec les navigateurs 3.0 :
1 Choisissez Fichier > Convertir > Compatible avec les navigateurs 3.0.
2 Dans la boîte de dialogue qui s'affiche, Sélectionnez l'option Styles CSS en balises HTML.
Si vous choisissez l'option Calques en tableaux, tous les calques sont replacés par un seul tableau qui préserve le positionnement d'origine.
Les styles CSS sont replacés, dans la mesure du possible, par des balises HTML, telles que b et font. Tout style CSS qui ne peut pas être converti en HTML est supprimé. Voir « Tableau de conversion de styles CSS en balises HTML », page 307 pour plus de détails sur les styles qui sont convertis et ceux qui sont supprimés.
3 Cliquez sur OK. Dreamweaver ouvre le fichier converti dans une nouvelle fenetre sans titre.
Remarque : vous doivent effectuer cette procEDURE de conversion à chaque modification du fichier d'origine, afin demettre à jour le fichier compatible avec les versions 3.0. C'est pourquoit il est préférible de n'effectuer cetteprocEDURE que lorsque vous étes totalement satisfait de votre fichier.
<h1 id="tableau-de-conversion-de-styles-css-en-balises-html">Tableau de conversion de styles CSS en balises HTML</h1>
Les attributs CSS indiqués dans le tableau ci-dessous sont convertis en balises HTML à l'aide de la commande Fichier > Convertir > Compatible avec les navigateurs 3.0. (Voir « Conversion de styles CSS en balises HTML », page 307.) Les attributs qui ne figurent pas dans cette liste sont supprimés.
<table><tr><td>Attribut CSS</td><td>Converti en</td></tr><tr><td>color</td><td>FONT COLOR</td></tr><tr><td>font-family</td><td>FONT FACE</td></tr><tr><td>font-size</td><td>FONT SIZE=[1-7]"</td></tr><tr><td>font-style: oblique</td><td>I</td></tr><tr><td>font-style: italic</td><td>I</td></tr><tr><td>font-weight</td><td>B</td></tr><tr><td>list-style-type: square</td><td>UL TYPE="square"</td></tr><tr><td>list-style-type: circle</td><td>UL TYPE="circle"</td></tr><tr><td>list-style-type: disc</td><td>UL TYPE="disc"</td></tr><tr><td>list-style-type: upper-roman</td><td>OL TYPE="I"</td></tr><tr><td>list-style-type: lower-roman</td><td>OL TYPE="i"</td></tr><tr><td>list-style-type: upper-alpha</td><td>OL TYPE="A"</td></tr><tr><td>list-style-type: lower-alpha</td><td>OL TYPE="a"</td></tr><tr><td>list-style</td><td>UL ou OL par TYPE suivant le cas</td></tr><tr><td>text-align</td><td>P ALIGN ou DIV ALIGN suivant le cas</td></tr><tr><td>text-decoration: underline</td><td>U</td></tr><tr><td>text-decoration: line-through</td><td>STRIKE</td></tr></table>
<h1 id="vérification-orthographique">Vérification orthographique</h1>
Dans le menu Texte, la commande Orthographe permet de vérifier l'orthographe du document en cours. 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 ou Dreamweaver > Préférences > Général (Mac OS X), puis sélectionnez le dictionnaire que vous pouze utiliser dans le menu dérouulant Dictionnaire du correcteur d'orthographe. Vous trouvez en téléchargement, sur le centre de support de Dreamweaver, des dictionnaires dans d'autres langues.
<h1 id="pour-vérifier-puis-corriger-lorthographe">Pour vérifier puis corriger l'orthographe :</h1>
1 Choisissez Texte > Orthographe ou appuyez sur les touches Maj+F7.
Lorsque Dreamweaver ne reconnait pas un mot, la boite de dialogue Vérifier l'orthographe s'affiche.
2 Dans la boîte de dialogue Vérifier l'orthographe,CHOISEZ L'option correspondant auTraitement que vous réserves à l'occurrence :
Ajouter à Personnel ajoute le mot non reconnu à votre dictionnaire personnel.
Ignore ignore cette occurrence du mot non reconnectnu.
Ignore tout 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 selectionné dans la liste Suggestions.
Remplacer tout remplace toutes les occurrences du mot non reconnu.
<h1 id="recherche-et-remplacement-de-texte">Recherche et remplacement de texte</h1>
Voupe qu'egalement rechercher du textile, du textile entoure de balises specifiques, des balises HTML et des attributs dans le document en cours, dans des fichiers selectionnés, dans un repertoire ou dans un site tout entier. Vou utilisez des commandes différentes pour rechercher des fichiers et pour rechercher du textile et/ou des balises HTML dans les fichiers : les commandes Retrouver sur le site local et Retrouver sur le site distant permettent de rechercher des fichiers, tandis que la commande Edition > Rechercher et replacer permit de rechercher du textile et des balises à l'intérieur des fichiers.
<h1 id="pour-rechercher-du-texte-et-ou-du-html-au-sein-des-documents">Pour rechercher du texte et / ou du HTML au sein des documents :</h1>
1 Choisissez parmi les options suivantes :
- En mode Creation,CHOISISEZ Edition > Rechercher et replacer a partir de la fenetre de document ou du panneau Site.
- Dans l'Affichage de code, cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh) et choisissez l'option Rechercher et replacer dans le menu contextuel.
2 Dans la boîte de dialogue Rechercher ou Remplacer, utilisez l'option Rechercher dans pour spécifier les fichiers sur lesquels la recherche doit porter :
- Choisissez Document courant pour limiter la recherche au document actif. Cette option n'est disponible que lorsque vous choisissez la commande Rechercheur ou Remplacer dans la fenêtre de document ou dans le menu contextualuel de l'inspecteur de code.
- Choisissez Site courant pour étendre la recherche à l'ensemble des documents HTML, fischiers de bibliothèque et documents texte du site courant. Lorsque vous choisissez Site courant, le nom du site s'affiche à droite du menu dérouulant. S'il ne s'agit pas du site dans lequel vous pouze effectuer une recherche,CHOisissez un autre site dans le menu dérounant du site actuel du panneau Site.
- Choisissez Fichiers sélectionnés dans le site pour limiter la recherche aux fischiers et dossiers actuellément sélectionnés dans le panneau Site. Cette option n'est disponible que lorsque vous choisissez la commande Rechercher ou Remplacer tandis que le panneau Site est actif (c'est-à-dire lorsque celui-ci est affché devant la fenêtre de document).
- Choisissez Répertoire pour limiter la recherche à un groupe de fichiers spécifique. Dans ce cas, cliquez sur l'icone de répertoire pour sélectionner le réseau dans lequel vous pouze effectuer la recherche.
3 Utilisez l'option Rechercher pour specifier le type de recherche à effectuer.
- L'option Code source permet de rechercher des chaînes de texte spécifique dans le code source HTML. Voir « Recherche et remplacement de balises et d'attributs », page 205.
- L'option Texte permet de rechercher des chaînes de texte spécifique dans la fenêtre de 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 trouvrez aussi bien le chien noir que le chien <i>noir</i>.
- L'option Texte (avancé) permet de rechercher des chaînes de texte spécifique se trouvant ou non à l'intérieur d'une ou plusieurs balises. Par exemple, dans un document qui contient le code HTML suivant, la recherche de essaie pas dans la balise i ne permet de才知道 que la seconde occurrence du mot essaie: Jean <i>essaie</i> de terminer son travail à temps, mais n'y arrivè pas toujours. Il essaie cependant farouchement. Voir « Recherche d'un texte contenu dans des balises spécifique », page 206.
- L'option Balise spécifique permet de rechercher des balises, attributs et valeurs d'attribut spécifique, telles que toutes les balises td avec valign définir sur top. Voir « Recherche de balises et d'attributs», page 205.
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. Prenez soit de déslectionner l'option Ignorer les différences entre les espaces blancs lorsque vous effectuez ce type de recherche, si vous n'utilise pas des expressions régulières. Note que cette recherche portera 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 une balise <br>ou <p>. Les caractères de retour chariot apparaissent en tant qu'espaces en mode Création, et non en tant que sauts de ligne.
4 Utilisez les options suivantes pour élargir ou limiter la recherche :
- L'option Respecter la casse limite la recherche au texte dont la casse (caracteres majuscules et/ ou minuscules) correspond à celle du texte indiqué. Par exemple, si vous recherchez le français, vous ne trouverez pas le Français.
Remarque: l'option Ignorer les différences entre les espaces blancs traite tout espace « blanc», c'est-à-dire non visible, comme s'il s'agissait d'un simple espace pour les besoins de la recherche. Par exemple, lorsque cette option est sélectionnée, une recherche sur ce texte trouvera ce texte mais pas cetexte. Cette option n'est pas disponible lorsque l'option Utiliser les expressions régulières est sélectionnée; vousdezvez écrire explicitement l'expression régulière pour ignorer les espaces blancs. Notez que les balises < p> et b r ne sont pas comptées comme des espaces blancs.
- Avec l'option Utiliser les expressions régulières, certains caractères et chaînes courtes (teils que ?, 串 w et b) de la chaine recherche sont interprétsé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. Voir « A propos des expressions régulières », page 208.
Si vous travailliez dans l'Affichage de code et modifiez le document, puis essayez de rechercher et de replacer tout élément autres que du code source, une boite de dialogue s'affiche et vous informe que Dreamweaver synchronise les deux fenêtres avant d'effectuer la recherche. Pour plus d'informations sur la synchronisation des fenêtres, voir « Affichage du code » page 181.
<h1 id="chapitre-20-2">CHAPITRE 20</h1>
<h1 id="insertion-dimages">Insertion d/images</h1>
Des images sont généralement utilisées pour ajouter des interfaces graphiques (teils que des boutons de navigation), un attrait visuel (par exemple avec des photographies), ou des éléments de conception interactive, tels que des images survolées ou une carte graphique.
Dans Macromedia Dreamweaver MX, vous pouvez travailler en mode Creation ou en mode Code pour insérer des images dans un document. Lorsque vous ajoutez des images dans un document Dreamweaver, vous pouvez définir ou modifier les propriétés d'image et visualiser les modifications directement dans la fenêtre de document.
Pour améliorer l'efficacité de votre environnement de conception, vous pouvez seLECTIONner une préférence pour l'éditeur d'image et le lancer automatiquement pour modifier des images lorsque vous travailliez dans Dreamweaver.
Ce chapitre contient les sections suivantes :
- « A propos des images», page 311
- « Insertion d'une image», page 312
- « Redimensionnement d'une image», page 315
- « Création d'une image survolée», page 316
- « Utilisation d'un éditeur d'image externe», page 317
- « Application de comportements aux images», page 318
<h1 id="a-propos-des-images">A propos des images</h1>
Différents types de formats de fischiers graphiques existent, mais trois formats de fischiers graphiques sont généralement utilisés dans les pages Web : GIF, JPEG et PNG. Actuellement, les formats de fischiers GIF et JPEG sont les formats les mieux pris en charge et peuvent être visualisés par la plupart des navigateurs.
Les fichiers PNG sont les plus adaptés pour la plupart des types de graphiques Web en raison de leur souplesse et de leur taille réduite ; toute fois, l'affchage 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 cette site ne soit spécifiquement destiné à des navigateurs prénant en charge le format PNG, utilisez des fichiers GIF ou JPEG afin de cibler un plus grand public.
Les fichiers GIF (Graphic Interchange Format) utilise un maximum de 256 couleurs et sont destinés à l'affichage d'images à tons non continus ou d'images comptant de larges zones de couleurs unies, telles que les barres de navigation, les boutons, les icones, les logos ou d'autres images contenant des tons et des couleurs uniformes.
Le format de fidier JPEG (Joint Photographic Experts Group) est le format supérieur destiné aux photographies ou aux images à tons continus, car de tels fidiers peuvent contérer des millions de couleurs. Lorsque la qualité d'un fidier 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 fidier en compressant un fidier JPEG.
Le format de fichier PNG (Portable Network Group) est un format de remplacement non breveté pour les fichiers GIF, qui inclut la prise en charge des images à couleurs indexées, en niveaux de gris et en couleurs vraies ainsi que la prise en charge du canal alpha pour la transparence. PNG est le format de fichier natif de Macromedia Fireworks MX. 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 Macromedia Dreamweaver MX.
Remarque : la prise en charge des fischiers PNG varie d'un navigateur à l'autre ; par conséquent, si vous travailliez avec des fischiers PNG, exportez-les au format GIF ou JPEG pour les adapter au Web.
<h1 id="insertion-dune-image">Insertion d'une image</h1>
Lorsque vous insérez une image dans un document Dreamweaver, le programme create automatiquement une reférence à ce fichier d'image dans le code source HTML. Pour que cette refé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.
Vou puevez également ajouter des images en tant que contenu dynamique ; pour plus d'informations, voir « Création d'images dynamiques », page 555.
<h1 id="pour-insérer-une-image">Pour insérer une image :</h1>
1 Placez le point d'insertion à l'endetroit où doit apparaitre 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'icone Image.
- Dans la catégorie Commun de la barre Insertion, faites glisser l'icone Image vers la fenetre du document (ou la fenêtre du mode Code si vous travailliez sur le code).
- Choisissez Insertion > Image.
- Faites glisser une image à partir du panneau Actifs (Fenêtre > Actifs) vers l'emplacement souhaité dans la fenêtre de document, puis passez à l'étape 3.
- Faites glisser une image à partir du panneau Site vers l'emplacement souhaité dans la fenêtre de document, puis passez à l' étape 3.
- Faites glisser une image à partir du bureau vers l'emplacement désiré sur la page, puis passez à l'objet 3.
2 Dans la boîte de dialogue qui s'affiche, procédez de l'une des manières suivantes :
- Choisissez Système de fichiers pour désirir un fichier graphique.
- Choisissez Source de données pourCHOISIR une source d'imagedynamique.
3 Parcourez l'arborescence pourCHOISIR L'IMAGE ou la source de contenu que vous voulez inserer. Tant que le document sur lequel vous travailliez n'a pas encore ete enregistrred, Dreamweaver create automatiquement une refecurrence d'emplacement de fichier de type file://. Lorsque you enregistrrez le document sur le site, Dreamweaver convertit cette refecurrence en indiquant un chemin relatif au document.
4 Dans l'inspecteur de propriétés (Fenêtre > Propriétés), définisse les propriétés de l'image. Pour plus d'informations, voir Définition des propriétés de l'image dans l'aide de Dreamweaver.
<h1 id="rubriques-connexes-12">Rubriques connexes</h1>
« Définition d'une image ou d'une couleur d'arrière-plan de la page», page 117
« Utilisation des images d'espacement », page 265
<h1 id="insertion-dun-espace-réservé-pour-une-image">Insertion d'un espace réservé pour une image</h1>
Un espace réservé pour une image est un graphique que vous utilisez jusqu'à ce que le dessin final soit prét pour être ajoute à une page Web.
Vou puez definir certains attributs de l'espace réservé ; comme sa taille et sa couleur, et lui donne une étiquette de texte. Les attributs de couleur et de taille ainsi que l'étiquette d'un espace réservé pour une image apparaisent lorsque l'espace réservé pour l'image est visualisé dans la fenêtre du document de Dreamweaver.
Lorsqu'ils sont visualisés dans la fenêtre d'un navigateur, le texte de l'étiquette et de la taille n'apparaissant pas.
<h1 id="pour-insérer-un-espace-réservé-pour-une-image">Pour insérer un espace réservé pour une image :</h1>
1 Dans la fenêtre de document, placez le point d'insertion à l'endetroit où vous pouze insérer un espace réservé pour un graphique.
2 Procedez de l'une des manieres suivantes:
- Dans la barre Insertion, Sélectionnez Commun puis cliquez sur l'icone Espace réservé pour l'image.
- Dans la barre Insertion, Sélectionnéz Commun puis faites glisser l'icone Espace réservé pour l'image vers la fenêtre du document.
- Choisissez Insertion > Espace réservé de l'image.
La boîte de dialogue Espace réservé pour l'image s'affiche.
3 Dans la boîte de dialogue, Sélectionné les options de l'espace réservé pour l'image.
Pour plus d'informations sur la définition des options de l'espace réservé pour l'image, cliquez sur le bouton Aide de la boîte de dialogue.
4 Cliquez sur OK.
<h1 id="rubriques-connexes-13">Rubriques connexes</h1>
« Remplacement d'un espace réservé pour une image », page 314
« Redimensionnement d'une image », page 315
« Mise à jour d'un espace réservé pour l'image Dreamweaver dans Fireworks», page 324
<h1 id="remplacement-dun-espace-réservé-pour-une-image">Remplacement d'un espace réservé pour une image</h1>
Un espace réservé pour l'image n'est pas une image qui s'affiche dans un navigateur. Avant de publier cette site, il convient de replacer tous les espaces réservés pour image que vous avez ajoutés par des fichiers graphiques adaptés au Web tels que des images GIF ou JPEG.
Si vous avez Fireworks MX, vous pouvez creer un nouveau graphique à partir d'un espace réservé pour image dans Dreamweaver. La nouvelle image reprend la même tille que celle de l'espace réservé pour l'image. Vous pouze modifier l'image, puis la replacer dans Dreamweaver. Pour plus d'informations sur la creation d'une image de remplacement dans Fireworks MX, voir « Mise à jour d'un espace réservé pour l'image Dreamweaver dans Fireworks », page 324.
<h1 id="pourmettreàjourla-source-dimage">Pourmettreàjourla source d'image:</h1>
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 seLECTIONner, puis dans l'inspecteur de propriétés (Fenêtre > Propriétés), cliquez sur l'icone du dossier à côté du champ Src.
La boîte de dialogue Source de l'image s'affiche.
2 Dans la boîte de dialogue, localisez l'image que vous poulez utiliser pour replacer l'espace réservé.
3 Cliquez sur OK.
L'image selectionnée apparait dans le document.
<h1 id="alignment-dune-image">Alignment d'une image</h1>
Utilisez l'inspecteur de propriétés de l'image pour spécifique l'alignement d'une image par rapport aux autres éléments du paragraphe ou de la ligne.
Remarque : le langage HTML ne permet pas de placer un texte autour des contours d'une image, contrairement a certaines applications de traitement de texte.
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 utiliser les boutons d'alignement (gauche, droite et centre) pour définir l'alignement horizontal d'une image.
Par défaut provoque généralement un alignement sur la ligne de base. La valeur par défaut varie selon le navigateur du visiteur du site.
Ligne de base et Bas alignent la ligne de base du texte (ou de tout autre élément du même paragraphe) sur le bas de l'objet sélectionné.
Haut aligne le haut d'une image sur le haut de l'objet 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 dette g ).
Gauge aligne l'image selectionnée sur la marge de gauche et place le texte qui l'entoure à sa droite. Si le texte aligné à gauche precedé 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 croite et place le texte qui l'entoure à sa gauche. Si le texte aligné à droite précédé l'objet sur la ligne, les objets alignés à droite sont généralement placés automatiquement sur une nouvelle ligne.
<h1 id="redimensionnement-dune-image">Redimensionnement d'une image</h1>
Dans le mode Création de la fenêtre de document de Dreamweaver, vous pouvez redimensionner visuellement les éléments, tels que les images, les plug-ins, les animations Macromedia Shockwave ou Flash, les applets et les contrôleux ActiveX. Le redimensionnement visuel aide à déterminer l'impact de la taille d'un élément sur la mise en page.
Le redimensionnement modifie les attributs de largeur et de hauteur de l'elément pour revenir à leur taille d'origine. Les champs L et H de l'inspecteur de propriétés affichent les nouvelles largeur et hauteur de l'elément lorsque vous le redimensionnéz. La taille du fichier de l'elément ne change pas.
Les éléments bitmap (images GIF, JPEG et PNG) peuvent être déformés si vous augmentez ou diminuEZ leurs attributs largeur et hauteur. Pour preserver les proportions (rapport largeur / hauteur), maintenez la touche Maj enforcée lorsque vous redimensionnez une image bitmap. Toutefois, il est recommendé de ne redimensionner ces éléments visuellement dans Dreamweaver que pour des essais de mise en page. Lorsque vous avez trouve la taille ideale de votre image, modifierze celle-ci en consquence dans une application de retouche d'image. La modification de l'imagetpermiet également de diminuier sa taille de fichier, et donc de réduire son temps de téléchargement.
<h1 id="pour-redimensionner-un-élément">Pour redimensionner un élément :</h1>
1 Sélectionnez l'objet (par exemple, une image ou une animation Shockwave) 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'élement à redimensionner, puis selectionnez-le à nouveau ou cliquez sur la balise correspondante dans le selector un balises.
2 Pour redimensionner l'objet, utilisez l'une des méthodes suivantes :
- Pour ajuster la largeur de l'élément, déplacez la poignée à droite de la seclusion.
- Pour ajuster la hauteur de l'élément, déplacez la poignée au bas de la selection.
- Pour ajuster simultanément la largeur et la hauteur de l'élément, faites glisser la poignée du coin de la seLECTION.
- 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 seLECTION tout en appuyant sur la touche Maj.
Les éléments peuvent être redimensionnés visuèlement à une taille minimale de 8 × 8 pixels. Pourajuster la largeur et la hauteur d'un élément à une taille inférieure, (par exemple, 1 × 1 pixel),utilizez l'inspecteur de propriétés pour entrer une valeur numérique.
Pour rétablit la taille d'origine d'un élément redimensionné, dans linspecteur de propriétés, supprimez les valeurs des champs L et H ou cliquez sur le bouton Rétablir la taille.
<h1 id="création-dune-image-survolée">Création d'une image survolée</h1>
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. Une image survolée est en fait composée de deux images: l'image principale (affichée au chargement de la page) et l'image secondaire (qui apparait 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 redimensionné automatiquement la seconde image en fonction de la taille de la première.
Il est impossible de voir l'effet d'une image survolée dans la fenêtre de document de Dreamweaver. Pour voir l'effet de survol, appuyez sur F12 pour afficher la page dans un navigateur, puis faites passer le pointeur de la souris au-dessus de l'image.
Les images survolées sont automatiquement définies pour répondre à l'évenement onMouseOver. Pour plus d'informations sur la configuration d'une image pour répondre à un événement différent (par exemple, un click de souris) ou sur la notification de l'image affichée par une image survolée, voir « Intervertir une image », page 397.
Une barre de navigation est une forme plus complexe d'image survolée. Pour creer une barre de navigation, utilisez la commande Insertion > Images interactives > Barre de navigation (voir « Insertion d'une barre de navigation », page 442).
<h1 id="pour-creer-une-image-survolée">Pour creer une image survolée :</h1>
1 Dans la fenêtre de document, placez le point d'insertion à l'endetroit où vous pouze insérer l'image survolée.
2 Insérez l'image survolée à l'aide de l'une des méthodes suivantes :
- Dans la barre Insertion, Sélectionnéz Commun puis cliquez sur l'icone Image survolée.
- Dans la barre Insertion, Sélectionnez Commun puis faites glisser l'icone Image survolée vers l'emplacement souhaité de la fenêtre du document.
- Choisissez la commande Insertion > Images interactives > Image survolée.
La boîte de dialogue Insérer l'image survolée s'affiche.
3 Dans la zone de texte Nom de l'image, attribuée un nom à l'image survolée.
4 Dans la zone de texte Image originale, cliquez sur le bouton Parcourir et selectionnez l'image à afficher lors du chargement de la page ou tapez le chemin d'accès du fichier d'image dans la zone de texte.
5 Dans la zone de texte Image survolée, cliquez sur le bouton Parcourir et selectionnez l'image à afficher lorsque le pointeur est place au-dessus de l'image originale ou tapez le chemin d'accès du fichier d'image dans la zone de texte.
6 Si vous souhaitez précharger les images dans la mémoire cache du navigateur afin d'éviter tout lié lorsque vous faites passer le pointeur de la souris par-dessus l'image, sélectionnez l'options Précharger les images.
7 Dans la zone de texte Si clique, aller à l'URL, cliquez sur le bouton Parcourir et seLECTIONnez le fichier ou tapez le chemin d'accès du fichier à ouvrir lorsqu'un utilisateur clique sur l'image survolée.
Remarque : si vous ne définissez pas de 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.
8 Cliquez sur le bouton OK pour fermer la boîte de dialogue Insérer l'image survolée.
9 Choisissez Fichier > Aperçu dans le navigateur ou appuyez sur la touche F12.
10 Dans le navigateur, placez le pointeur au-dessus de l'image d'origine.
Cette image doit alors être remplaçaee par l'image survoiee.
<h1 id="utilisation-dun-éditeur-dimage-externe">Utilisation d'un éditeur d'image externe</h1>
Dans Dreamweaver, vous pouvez ouvrir une image selectionné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.
Vouss pouvez utiliser Macromedia Fireworks comme éditeur d'image externe. Fireworks 3 et ses versions ultérieures utilisent les Design Notes pour repérer l'emplacement de stockage du fjichier PNG d'origine sur le disque dur local ; lorsque vous ouvrez l'image dans Fireworks, vous pouvez modifier le fjichier PNG d'origine.
Si vous choisissez une autre application comme éditeur d'image externe et que vous la lancez à partir de Dreamweaver, cette application ouvre l'image sélectionnée. Utilisez l'éditeur d'image pour modifier l'image, enregistrer vos modifications et visualiser l'image mise à jour dans Dreamweaver.
Si le fjichier d'image a ete creed a partir d'un fjichier PNG, you pouze ouvr manuellement le fjichier d'origine, effectuer des modifications et enregister l'image modifie. Lorsque vous revenez dans Dreamweaver, l'imagest actualisée dans la fenetre de document.
Si l'image mise à jour n' apparait pas une fois de return dans la fenêtre Dreamweaver, seLECTIONnez l'image et cliquez sur le bouton Actualiser dans l'inspecteur de propriétés.
<h1 id="démarrage-dun-éditeur-dimage-externe">Démarrage d'un éditeur d'image externe</h1>
Si vous souhaitez définir unéditeur d'image externe pour le type de fichier d'image indiqué, choisissez Edition > Préférences > Types de fichiers/Editeurs ou Dreamweaver > Préférences > Types de fichiers/Editeurs (Mac OS X). Pour plus d'informations sur le choix d'unéditeur d'image, voir Paramétrage des préférences pour les editeurs d'image externes dans l'aide de Dreamweaver.
Pour lancer l'éditeur d'image externe, procédez de l'une des manières suivantes :
- Double-cliquez sur l'image à modifier.
- Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh) sur l'image à modifier,CHOISSEZ L'option Modifier avec > Parcourir et seLECTIONnez un éditeur.
- Sélectionné l'image à modifier, puis cliquez sur Modifier dans l'inspecteur de propriétés.
- Double-cliquez sur le fichier d'image dans le panneau Site pour lancer l'éditeur d'image principal. Si vous n'avez pas indiqué d'éditeur d'image, Dreamweaver executera l'éditeur par défaut de ce type de fichier.
Remarque : lorsque vous ouvrez directement une image à partir du panneau Site, les fonctionnalités d'intégration de Fireworks sont inopérantes ; Fireworks n'ouvre pas le fichier original PNG. Pour utiliser ces fonctionnalités d'intégration de Fireworks, ouvrez les images à partir de la fenêtre de document.
<h1 id="application-de-comportements-aux-images">Application de comportements aux images</h1>
Vouss pouvez appliquer l'un des comportements disponibles à une image ou à la zone réactive d'une image. Lorsque vous appliquez un comportement à une zone réactive, Dreamweaver insère le code source HTML nécessaire dans la balise area. Il existe trois comportements qui s'appliquent spécifique aux images : Précharger les images, Intervertir une image et Restaurer l'image interverte.
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 scenario, un comportement, un calque ou une fonction en JavaScript). Cela évite à l'utilisateur d'attendre que ces images soient charges, lorsqu'un événement déclenché leur apparition. Voir « Précharger les images», page 387.
Intervertir une image remplace une image par une autre, en modifiant l'attribut src de la balise img. Utilisez cette action pour creer des substitutions de boutons et autres effets sur des images (y compris la substitution de plusieurs images à la fois). Voir « Intervertir une image», page 397.
Restaurer l'intervention d'images rétablit la dernière intervention d'images à son état d'origine. Cette action est automatiquement ajoutée par défaut lorsque vous associez l'action Intervention d'images à un objet ; en principe, vous n'avez pas besoin d'y faire appel manuellement. Voir « Restaurer l'image interverte », page 398.
Vou puez également utiliser les comportements pour creer des structures de navigation sophistiquées, par exemple une barre de navigation ou un menu de liens. Voir « Création de barres de navigation», page 441 et « Création de menus de reroutage», page 439.
<h1 id="chapitre-21-2">CHAPITRE 21</h1>
<h1 id="intégration-de-dreamweaver-à-dautres-applications">Intégration de Dreamweaver à d'autres applications</h1>
Macromedia Fireworks MX et Macromedia Flash MX sont des outils puissants de développement Web concus pour creator des graphiques et des animations SWF que vous pouvez afficher dans des pages Web. Macromedia Dreamweaver MX est parfaitement intégré à ces outils pour simplifier le déroulement de vos conceptions Web.
Pour assurer une intégration parfaite entre Dreamweaver et Flash ou Fireworks, activé les Design Notes lors de la définition des sites Dreamweaver. Par défaut, cette option est préselectionnée dans la configuration de la définition du site. Pour plus d'informations sur l'activation des Design Notes, voir « Activation et désactivation des Design Notes», page 101.
Lorsque vous exportez des fischiers de Fireworks ou Flash directement vers un site défini par Dreamweaver, les Design Notes qui contiennent des références au fischier de programmation PNG ou Flash (FLA) sont automatiquement exportées vers le site avec le fischier Web (format GIF, JPEG ou SWF).
VoussoupiezinsererdesimageoudestableFireworksetdesanimationsFlashdun undocumentDreamweaver.Vousoupzeguallyutiliserrafonctiond'integrationentreDreamweaveretFireworksouFlashpourtmodifieruneimageouuneanimationapresl'avoirinsereedansundocumentDreamweaver.
Dans Dreamweaver, vous pouvez lancer le processus de production de graphiques en inscrant et enmettant à jour un graphique d'espace réservé pour l'image. Pour plus d'informations sur les espaces réservés pour l'image, voir « Insertion d'un espace réservé pour une image», page 313. ÀpRES avoir inséré un espace réservé pour l'image dans Dreamweaver, vous pouvez lancer Fireworks MX pour creer un nouveau graphique. Dans Fireworks, vous pouze créé le graphique, ajouter des zones reactives ou des comportements ou tout élément de votrechoix. Vous pouze alors enregister le graphique au format PNG et l'exporter sous la forme d'un fisier graphique Web, au format GIF ou JPEG par exemple, ou dans le cas d'une table découverte, sous la forme de documents HTML et d'images.
Lorsque vous retournez dans Dreamweaver, l'image de remplacement ou la table Fireworks est mise à jour dans le document.
Ce chapitre contient les sections suivantes :
« Définition des préférences de lancement et de modification des fichiers source Fireworks», page 323
«Utilisation de Dreamweaver et Fireworks»,page 322
« Modification d'une image ou d'une table Fireworks », page 326
« Création d'un album photos pour le Web», page 330
« Utilisation de Dreamweaver et Flash », page 332
« Modification d'une animation Flash dans Dreamweaver », page 333
<h1 id="intégration-de-fireworks-et-flash">Intégration de Fireworks et Flash</h1>
Gracé à l'édition Roundtrip et aux Design Notes, Dreamweaver est capable d'intégrer des opérations avec Fireworks et Flash. L'édition Roundtrip permet de transférer de façon fiable les mises à jour de code entre Dreamweaver et les autres applications, en réserveant par exemple les comportements de survol ou les liens vers d'autres fischiers. Les Design Notes permettent quant à elles de localiser le document source correspondant à une image exportée ou à un fisier d'animation. Pour plus d'informations sur l'utilisation des Design Notes dans Dreamweaver, voir « Utilisation des Design Notes dans Fireworks ou Flash et Dreamweaver», page 104.
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 reactives ou des images survolées, le code JavaScript de ces éléments est inclus dans le document HTML exporté par Fireworks.
Pour obtenir de plusieurs résultats lorsque vous creez des graphiques et des animations destinés à une publication Web, enregistrez le code source de Fireworks et Flash et les fischiers Web dans un site défini Dreamweaver. De cette façon, tout utiliseur partageant le site pourra localiser le document source lorsqu'il modifie une image ou une table Fireworks ou une animation SWF dans Dreamweaver.
Pour intégrer parfaitement ces applications à vos tâches de développement, il convient de définir un environnement de travail. Pour plus d'informations sur la configuration de l'environnement de travail Dreamweaver et Fireworks, voir « Utilisation de Dreamweaver et Fireworks», page 322. Pour plus d'informations sur la configuration de l'environnement de travail Dreamweaver et Flash, voir « Utilisation de Dreamweaver et Flash», page 332.
<h1 id="utilisation-de-dreamweaver-et-fireworks">Utilisation de Dreamweaver et Fireworks</h1>
Dreamweaver and Fireworks reconnaissent et partagent de nombreuses modifications apportées aux fichiers, parmi lesquilles 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 constant à modifier, optimiser et importer des fichiers graphiques Web dans des pages HTML.
Pourmettre en place un environnement de travail intégre,vousdevez au préalable définiturun site local dans Dreamweaver et activer les Design Notes pour ce site. Les Design Notes sont automatiquement activées tant que vous ne modifie pas les paramétres par défaut.
Vou devez également définir Fireworks comme étant l'éditeur d'image externe principal de Dreamweaver pour qu'il s'ouvre automatiquement lors des tâches d'édition. Pour plus d'informations sur la configuration de Fireworks commeéditeur externe, voir « Utilisation d'unéditeur d'image externe», page 317.
Pour une bonne intégration de la fonction de lancement et d'édition, exportez les fischiers HTML et les fischiers graphiques Fireworks vers le dossier du site Dreamweaver. Lorsque vous exportez un fisier GIF ou JPEG de Fireworks vers le dossier du site Dreamweaver, Fireworks génére un dossier appelé _notes dans le même dossier. Il contient les Design Notes ; il s'agit de fischiers de petite taille portant l'extension (.mno) de Macromedia Note.
Les Design Notes contiennent des informations sur les fischiers graphiques exportés par Fireworks. Lorsque vous lancez et modifiez une image ou une table Fireworks dans Dreamweaver, le programme utilise ces informations pour localiser le fisier PNG source. Pour plus d'informations sur le lancement automatique du fisier PNG, voir « Définition des préférences de lancement et de modification des fisiers source Fireworks», page 323.
Lorsque vous sélectionnez une image dans un document Dreamweaver exporté à partir de Fireworks auquel correspond un fichier .mno, l'inspecteur de propriétés affiche l'icone Fireworks et le chemin source du fichier.
En paramétrant Fireworks comme l'éditeur d'image par défaut pour Dreamweaver, vous pouvez passer facilement de Dreamweaver à Fireworks pour modifier une image. Dans les préférences de Dreamweaver, paramétrez Fireworks commeéditeur principal des types de fichiers graphiques GIF, PNG et JPEG. Pour plus d'informations sur la définition d'unéditeur d'image, voir « Utilisation d'unéditeur d'image externe», page 317 ou Paramétrage des préférences pour les éditeurs d'image externes dans l'aide de Dreamweaver.
<h1 id="définition-des-préférences-de-lancement-et-de-modification-des-fichiers-source-fireworks">Définition des préférences de lancement et de modification des fichiers source Fireworks</h1>
Les préférences de lancement et de modification de Fireworks définissent comment manipuler les fichiers PNG source lorsque vous lancez des fichiers Fireworks à partir d'une autre application,TELLE que Dreamweaver.
Dreamweaver reconnait les préférences de lancement et de modification dans certains cas uniquement, lorsque vous lancez et optimisez une image Fireworks. 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 filchier PNG source est incorrect. Dans tous les autres cas, et ceci même lorsque vous lancez et modifiez des images Fireworks, Dreamweaver lance automatiquement le filchier PNG source ou vous invite à le localiser s'il ne le trouve pas.
Pour déterminer les préférences de lancement et de modification de Fireworks :
1 Dans Fireworks, choisissez Edition > Préférences ou Fireworks > Préférences (Mac OS X) et cliquez sur l'onglet Lancer et Modifier (Windows) ou choisissez Lancer et Modifier dans le menu déroulant (Macintosh).
2 Indiquez les options de préférences applicables lors de la modification ou de l'optimisation d'images Fireworks placées dans une application externe :
Toujours utiliser le fjichier PNG source permet de lancer automatiquement le fjichier PNG Fireworks défin dans la Design Note comme fjichier source de l'image placée. Les mises à jour sont appliquées au fjichier PNG source et à l'image placée correspondante.
Ne jamais utiliser le fjichier PNG source permet de lancer automatiquement l'image Fireworks placée, qu'un fjichier PNG source existe ou non. Les mises à jour sont appliquées à l'image placée uniquement.
Demandier lors du lancement vous permet d'indiquer chaque fois si le fjichier PNG source doit être lancé ou non. Lorsque vous modifiez ou optimisez une image placée, Fireworks affiche un message vous demandant si vous souhaitez lancer l'éditeur et modifier l'image. Vous pouvez également déterminer les préférences globales de la fonction de lancement et d'édition dans cette fenêtre d'invite.
<h1 id="insertion-dune-image-fireworks-dans-un-document-dreamweaver">Insertion d'une image Fireworks dans un document Dreamweaver</h1>
Plusieurs méthodes permettent de placer des graphiques Fireworks dans un document Dreamweaver. Vous pouvez placer un graphique Fireworks exporté dans un document Dreamweaver à l'aide de la commande Insérer une image ou créé un graphique Fireworks à partir d'un espace réservé pour l'image Dreamweaver.
Pour insérer une image Fireworks dans un document Dreamweaver :
1 Dans le document Dreamweaver, placez le point d'insertion à l'emplacement où vous souhaitez insérer l'image, puis procededez de l'une des manieres 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 Recherche 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.
<h1 id="mise-à-jour-dun-espace-réservé-pour-limage-dreamweaver-dans-fireworks">Mise à jour d'un espace réservé pour l'image Dreamweaver dans Fireworks</h1>
Vou puez creer un espace réservé pour l'image dans un document Dreamweaver, puis lancer Fireworks pour creer une image graphique ou une table Fireworks devant le remplacer. Pour plus d'informations sur l'insertion d'un espace réservé pour l'image, voir « Insertion d'un espace réservé pour une image », page 313.
Pour creer une image a partir d'un espace réservé, Dreamweaver MX et Fireworks MX doivent être installés sur votre système. Fireworks reconnait les paramètres suivants d'espace réservé pour l'image définis lors de son utilisation dans Dreamweaver : la taille de l'image correspondant à la taille du document Fireworks, l'ID de l'image utilisé par Fireworks comme nom de document par défaut pour le fischiier source et le fischier d'exportation que vous créez, l'alignement du texte et les comportements reconnus par Fireworks (tehs que l'intervention d'image, le menu contextual, la barre de navigation et le texte). Fireworks reconnait également les liens associés à l'espace réservé pour l'image lorsque vous travailliez dans Dreamweaver.
Remarque : bien que les liens ajoutés à un espace réservé pour l'image soient invisibles dans Fireworks, ils sont néanmoins conserveds. Si vous dessinez une zone réactive et ajoutez un lien dans Fireworks MX, le programme ne supprimera pas le lien ajouté à l'espace réservé pour l'image dans Dreamweaver. Toutefois, si dans Fireworks you dessezine une découverte dans la nouvelle image, le lien sera supprimé du document Dreamweaver si vous remplacez l'espace réservé pour l'image.
Les paramètres suivants d'espace réservé pour l'image sont désactivés dans l'inspecteur de propriétés correspondant puisqu'ils ne sont pas reconnus par Fireworks : alignment de l'image, couleur, espacement vertical et horizontal et cartes.
Dans Fireworks MX, créez la nouvelle image, puis cliquez sur Terminate. Fireworks vous demande d'enregistrer le fichier au format PNG (document source) et d'exporter le fichier dans un format Web, tels que les formats GIF, JPEG ou, dans le cas d'images découvertes, sous la forme de documents HTML et d'images. La nouvelle image ou la table Fireworks remplace automatiquement l'espace réservé pour l'image dans le document Dreamweaver.
Pour modifier un espace réservé pour l'image Dreamweaver dans Fireworks :
1 Veillez à ce que Fireworks soit l'éditeur d'image des fichiers .png. Pour plus d'informations, voir la section Paramétrage des préférences pour les éditeurs d'image externes dans l'aide de Dreamweaver.
2 Dans la fenêtre de document, cliquez sur l'espace réservé pour l'image pour le seLECTIONner.
3 Procedez de l'une des manieres suivantes pour lancer Fireworks et proceder à des opérations d'édition :
- Dans l'inspecteur de 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 avec le bouton droit de la souris sur l'espace réservé pour l'image, puis choisissez l'option Créeer une image dans Fireworks.
Fireworks est lancé en mode d'edition à partir de Dreamweaver.
4 Utilisez les options de Fireworks pour creer l'image.
5 Une fais l'opération terminée, cliquez sur Terminate.
La boîte de dialogue Enregistrer sous s'affiche. Fireworks vous invite à enregistrer le fjichier PNG.
6 Dans le champ 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 le nom dans le champ Nom de fichier. Vous pouvez modifier ce nom si vous le souhaitez.
7 Cliquez sur Enregister pour enregister le fichier PNG.
La boîte de dialogue Exporter s'affiche. Elle vous permet d'exporter l'image au format GIF.
8 Choisissez le dossier du site local de Dreamweaver dans le champ Enregister dans.
9 Le champ de texte Nom est automatiquement mis à jour pour adopter le nom désignant le fichier PNG. Entrez un nouveau nom si vous le souhaitez.
10 Dans la zone Enregistrer sous le type, Sélectionnez le type de fichier(s) à exporter comme Images uniquement ou Documents HTML et images.
11 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 replaces l'espace réservé pour l'image.
<h1 id="modification-dune-image-ou-dune-table-fireworks">Modification d'une image ou d'une table Fireworks</h1>
Vou puez lancer Fireworks pour modifier des images inserees dans un document
Dreamweaver. Lorsque vous lancez et modifiez une image ou une démarche d'image faisant partie d'une table Fireworks, Dreamweaver lance Fireworks et le fichier PNG à partir duquel l'image ou la table a été exportée.
Lorsque l'image fait partie d'une table Fireworks, vous pouvez lancer cette dernière pour la modifier tant que le commentaire < fw table--> est present dans le code HTML. Si le fjchier PNG source a eté 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.
<h1 id="pour-lancer-et-modifier-une-image-fireworks-placé-dans-dreamweaver">Pour lancer et modifier une image Fireworks placé dans Dreamweaver :</h1>
1 Dans Dreamweaver, choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur de propriétés, le cas échéant.
2 Cliquez sur une image ou une découpe d'image pour la sélectionner.
L'inspecteur de propriétés identifie la sélection comme une image ou table Fireworks en fonction de l'élement sélectionné et affiche le nom du fichier source PNG.
3 Pour lancer Fireworks afin d'apporter des modifications, précédez de l'une des manières suivantes :
- Dans l'inspecteur de propriétés, cliquez sur Modifier.
- Maintenez enforcée la touche Ctrl (Windows) ou Commande (Macintosh) et double-cliquez sur l'image selectionnée.
- Cliquez sur l'image sélectionnée avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh) et choisissez Modifier avec Fireworks dans le menu contextualuel.
Fireworks lance et ouvre le fichier PNG associé pour que vous puissiez le modifier.
Remarque : si Fireworks ne trouve pas le fjichier source, un message vous invite à le faire. Lorsque vous travailliez dans le fjichier source Fireworks, les modifications sont enregistrées dans le fjichier source et le fjichier exporté, sinon seul le fjichier exporté est mis à jour.
4 Dans Fireworks, modifiez le fichier PNG source.
5 Une fois les modifications effectuees, cliquez sur Terminate.
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 apparait.
<h1 id="ouverture-dun-menu-contextuel-fireworks-dans-dreamweaver">Ouverture d'un menu contextuel Fireworks dans Dreamweaver</h1>
Fireworks prend en charge les menus contextuels basés sur des images et sur du code HTML. Dreamweaver ne prend en charge que les menus contextuels basés sur du code HTML. Dans Dreamweaver, vous pouvez ouvrir un menu contextual Fireworks et modifier les propriétés de tous les éléments de menu, à l'exception des images d'arrière-plan des menus contextuels basés sur des images.
Dans Dreamweaver, le comportement Afficher le menu contextual vous permet de modifier ou demettre à jour le contenu d'un menu contextual Fireworks basé du code HTML. Vous pouvezajouter, supprimer ou modifier les éléments de menu, les reorganiser et les positionner dans une page. Pour plus d'informations sur la définition ou la modification des options des menuscontextuels dans Dreamweaver, voir « Afficher le menu contextual», page 393.
Si le menu contextuel à modifier repose sur une image et que vous souhaitez préserver les arrêtreplans de la cellule basés sur des images, il convient de modifier le menu contextuel dans Fireworks只不过 que dans Dreamweaver.
Pour modifier les images d'arrière-plan d'un menu contextual base sur des images, Sélectionnez l'image àmettre à jour, puis cliquez sur Modifier. Pour plus d'informations sur la modification d'une image Fireworks, voir « Modification d'une image ou d'une table Fireworks», page 326.
<h1 id="pour-ouvrir-le-menu-contextual-fireworks">Pour ouvrir le menu contextual Fireworks :</h1>
1 Dans le document Dreamweaver, Sélectionnez la zone réactive ou l'image qui déclenché le menu contextual.
2 Ouvrez le panneau Comportements (Maj+F3), si ce n'est déjà fait, puis dans la liste Actions, double-cliquez sur Afficher le menu contextualuel.
La boîte de dialogue Afficher le menu contextuel apparait.
3 Modifiez le menu contextual comme bon vous semble.
4 Lorsque vous avez modifie le menu contextuel, cliquez sur OK.
<h1 id="lancement-de-fireworks-pour-optimiser-une-image">Lancement de Fireworks pour optimiser une image</h1>
Vouss pouvez lancer Fireworks à partir de Dreamweaver pour modifier rapidement une image ou une animation Fireworks place et exportée en la redimensionnant ou en modifiant le type de fichier, par exemple. Fireworks vous permet de modifier les paramétres d'optimisation et d'animation, ainsi que la taille et la zone de l'image exportée.
<h1 id="pour-modifier-les-paramètres-doptimisation-dune-image-fireworks-placée-dans-dreamweaver">Pour modifier les paramètres d'optimisation d'une image Fireworks placée dans Dreamweaver :</h1>
1 Dans Dreamweaver, selectionnez l' image de votrechioix et choisissez Commandes > Optimiser l' image dans Fireworks.
2 Si un message vous y invite, indique si un fisier Fireworks source doit etre lancé pour l'image placee.
3 Dans Fireworks, procedez aux modifications requises dans la boite de dialogue d'optimisation :
- Pour modifier les paramètres d'optimisation, cliquez sur l'onglet Options. Pour plus d'informations, voir Utilisation de Fireworks.
- Pour modifier la taille et la zone de l'image exportée, cliquez sur l'onglet Fichier.
4 Une fois l'edition terminée, cliquez sur Mettre a jour.
Vousexportez ainsil image en adoptant les nouveaux parametes d'optimisation, mettez a jour le fichier GIF ou JPEG place dans Dreamweaver et enregistrez le fichier PNG source si un fichier source a ete selectionne.
Si vous avez modifie le format de l'image, le vérificateur de lien Dreamweaver vous invite àmettre à jour les références à l'image. Par exemple, si vous avez modifie le format d'une imageappelée my_image.GIF en my_image.JPG, toutes les références faites à my_image.gifdeviennent my_image.jpg lorsque vous cliquez sur OK.
<h1 id="insertion-de-code-html-fireworks-dans-un-document-dreamweaver">Insertion de code HTML Fireworks dans un document Dreamweaver</h1>
Dans Fireworks, la commande Exporter vous permet d'exporter et d'enregistrer des images optimisées et des fichiers HTML dans le dossier du site Dreamweaver de votre choix. Vous pouvez alors insérer le fjichier dans Dreamweaver.
Pour plus d'informations sur l'exportation de fichiers Fireworks au format HTML, voir Utilisation de Fireworks.
Dreamweaver you permit d'insérer dans un document du code HTML génére par Fireworks, intégrant des images, des découvertes et du code JavaScript. Vous pouvez ainsi facilement creator des éléments de conception dans Fireworks et les insérer dans un document Dreamweaver existant.
<h1 id="pour-insérer-du-code-html-fireworks-dans-un-document-dreamweaver">Pour insérer du code HTML Fireworks dans un document Dreamweaver :</h1>
1 Dans Dreamweaver, placez le point d'insertion à l'endetroit du document où vous souhaitez placer le code HTML Fireworks.
2 Procedez de l'une des manieres suivantes:
- Choisissez Insertion > Images interactives > HTML Fireworks.
- Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Insérer HTML Fireworks.
3 Dans la boîte de dialogue qui apparaît, cliquez sur Parcourir pour désir un fichier HTML Fireworks.
4 Choisissez l'options Supprimer fischi er après l'insertion pour placer le fischier HTML Fireworks d'origine dans la corbeille (Windows et Macintosh) à l'issue de l'opération.
Faites appel à cette option si vous n'avoz plus besoin du fjichier HTML Fireworks après l'avoir inséré. Elle n'a aucun effet sur le fjichier PNG source associé au fjichier 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 écoupes et le code JavaScript dans le document Dreamweaver.
<h1 id="collage-de-code-html-fireworks-dans-dreamweaver">Collage de code HTML Fireworks dans Dreamweaver</h1>
Pour placer rapidement dans Dreamweaver des images et tables générées dans Fireworks, copiez et collez directement le code HTML dans un document Dreamweaver.
<h1 id="pour-copier-et-coller-du-code-html-fireworks-dans-dreamweaver">Pour copier et coller du code HTML Fireworks dans Dreamweaver :</h1>
1 Dans Fireworks, choisissez Edition > Copier le code HTML.
2 Suivez les instructions de l'assistant pour selectionner les parametes d'exportation des images et du fjchier HTML. Lorsqu'un message vous y invite, identifiez le dossier du site Dreamweaver devant accueillir les images exportees.
L'assistant: L'assistant.
3 Dans Dreamweaver, placez le point d'insertion à l'endetroit du document où vous souhaitez coller le code HTML, etCHOisissez Edition > Coller.
Le code HTML et JavaScript associé aux fichiers Fireworks exportés est copié dans le document Dreamweaver et tous les liens vers des images sont mis à jour.
Pour exporter et coller du code HTML Fireworks dans Dreamweaver :
1 Dans Fireworks, choisissez Fichier > Exporter.
2 Dans la boîte de dialogue Exporter, indiquez le dossier du site Dreamweaver devant accueiller les images exportées.
3 Dans le menu dérouulant Enregistrer sous,CHOISSEZ Documents HTML et Images.
4 Dans le menu déroulant HTML,CHOISSEZ Copier dans le Presse-papiers, puis cliquez sur Enregistrer.
5 Dans Dreamweaver, placez le point d'insertion à l'endetroit du document où vous souhaitez coller le code HTML, et désisissez Edition > Coller.
Le code HTML et JavaScript associé aux fischiers Fireworks exportés est copié dans le document Dreamweaver et tous les liens vers des images sont mis à jour.
<h1 id="mise-à-jour-du-code-html-fireworks-placé-dans-dreamweaver">Mise à jour du code HTML Fireworks placé dans Dreamweaver</h1>
Outre la technique de lancement et de modification déscrie ci-dessus, vous pouvez faire appel à la commande Fichier > Mettre à jour le code HTML pourmettre à 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. Grace à cette commande, vous pouvezmettre à jour les fichiers Dreamweaver même si le programme est inactif.
Pourmettreà jour du code HTMLFireworks placédansDreamweaver :
1 Dans Fireworks, ouvre le fjichier PNG source et modifiez-le.
2 Choisissez Fichier > Enregister.
3 Dans Fireworks,CHOISSEZ Fichier > Mettre a jour le code HTML.
4 Recherche le fichier Dreamweaver qui contient le code HTML à partager à jour, puis cliquez sur Ouvrir.
5 Recherche le dossier dans lequel placer les fichiers d'image mis à jour et cliquez sur Sélectionner (Windows) ou Choiser (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.
<h1 id="creation-dun-album-photos-pour-le-web">Creation d'un album photos pour le Web</h1>
La commande Dreamweaver Créer un album photos pour le Web permet de générer automatiquement un site Web qui affiche un album d'images provenant d'un dossier donné. Cette commande utilise le script JavaScript pour appeler Fireworks qui create une miniature et une image de plus grande taille pour chaque image du dossier. Dreamweaver create ensuite une page Web contenant toutes les miniatures, ainsi que les liens vers les images de plus grande taille. Pour pouvoir utiliser la commande Créer un album photos pour le Web, vous doivent avoir installé Dreamweaver et Fireworks 4 ou une version ultérieure sur votre système.
Avant de commencer, placez toutes les images que vous souhaitez intégrer à l'album photos dans un dossier (il ne doit pas nécessairement se trouver sur un site). Assurez-vous également que les noms des fichiers d'image portent des extensions reconnues par la commande Créer un album photos pour le Web, à savoir .gif, .jpg, .jpeg, .png, .psd, .tif ou .tiff. Les images portant des extensions de fichiers non reconnues ne seront pas intégrées à l'album.
<h1 id="pour-creer-un-album-photos-pour-le-web">Pour creer un album photos pour le Web :</h1>
1 Dans Dreamweaver, choisissez Commandes > Créer un album photos pour le Web.
2 Dans le champ de texte Titre de l'album photos, entrez un titre. Il apparait alors dans un rectangle gris dans la partie supérieure de la page contenant les miniatures.
Si vous le souhaitez, vous pouvez faire figurer jusqu'à deux lignes de texte supplémentaire sous le titre en entrant le texte correspondant dans les champs de texteInfos de sous-titre et Autresinfos.
3 Choisissez le dossier contenant les images sources en cliquant sur le bouton Parcourir situé à côté du champ 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é pres du champ 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 fjichiers d'image et les miniatures présents dans le dossier de destination.
4 Spécifiez les options d'affichage des images miniatures :
- Choisissez une taille pour les images miniatures dans le menu dérouulant Taille des vignettes. Les images sont mises à l'échelle proportionnellement pour que les miniatures correspondantes soient intégrées dans un carré représentant les dimensions de pixels indiquées.
- Pour afficher le nom de fichier de chaque image d'origine sous la miniature correspondante,CHOISSEZ Montrer les nombres 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 WebSnap 128 create des miniatures GIF qui utilise une palette adaptative Web de 128 couleurs.
GIF WebSnap 256 create des miniatures GIF qui utilise une palette adaptative Web de 256 couleurs.
JPEG—Qualité supérieur creée des miniatures JPEG de qualité relativement supérieur dont la taille de fichier est plus importante.
JPEG—Fichier réduit cree des miniatures JPEG de qualité relativement inférieure dont la taille de fichier est réduite.
6 Choisissez un format pour les images de grande taille dans le menu déroulant Format graphique des photos. Une image de grande taille est générae au format spécifique pour chaque image d'origine. Vous pouze indiquer un format différent pour les images de grande taille et les miniatures correspondantes.
Remarque: la commande Creer un album photos pour le Web ne vous permet pas d'utiliser vos fichiers image d'origine comme images de grande taillie, car les formats des images d'origine autres que GIF et JPEG risquent de ne pas s'afficher correctement dans tous les navigateurs. Si les images d'origine sont des fichiers JPEG, les images de grande taillie qui sont générées peuvent partager des taillles de filcher superficieures et une qualite inférieure a cette des fichiers 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 risquiez 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 decréer une page Web contenant les liens de navigation Retour, Accueil et Suivant pour chaque image source.
Si vous scélectionné 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 creer les fichiers HTML et d'imagel de l'album photos pour le Web.
S'il n'est pas déjà actif, Fireworks est lancé et create les miniatures et images de grande taille. Ces opérations peuvent prendre quelques instant si le nombre de fichiers d'image est important. Une fois le traitement terminé, Dreamweaver est réactivé et générale la page contenant les miniatures.
10 Lorsqu'une boite de dialogue indiquant « L'album a ete creed » apparait, cliquez sur OK. Vous devrez peut-etre attendre quelques secondes avant que la page de votre album photos n'apparaisse. Les noms de fichiers des miniatures apparaisent dans l'ordre alphabetique.
Remarque : si vous cliquez sur le bouton Annuler dans la boite de dialogue Dreamweaver une fois le traitement lancé, vous n'interrompez pas la procEDURE de création de l'album photos, mais empêchez uniquement Dreamweaver d'afficher la page principale de l'album photos.
<h1 id="utilisation-de-dreamweaver-et-flash">Utilisation de Dreamweaver et Flash</h1>
Voupez facilement inserer une animation Flash (fichier SWF) dans un document Dreamweaver. L'inspecteur de propriétés vous permet de définir les options de lecture et d'affichage du fichier SWF dans la page Web. Pour plus d'informations sur l'insertion d'une animation Flash dans Dreamweaver, voir « Insertion d'animations Flash», page 345.
Dans Dreamweaver, le vérificateur de lien vous permet de modifier aisément les liens figurant dans les fischiers insérés dans un document Dreamweaver, y compris les animations Flash. Vous pouvez partager à jour un lien d'une animation SWF, puis répercuter la modification dans le document de programmation Flash. Pour plus d'informations, voir « Mise à jour des liens vers un fichier SWF», page 334.
Si Macromedia Flash MX et Dreamweaver MX sont installés sur votre système, vous pouvez également partager à jour une animation place dans un document Dreamweaver. Lorsque les deux applications sont instalées sur votre ordinateur et que vous scélectionnez une animation SWF dans le document Dreamweaver, l'inspecteur de propriétés affiche un bouton Modifier actif. Si Flash MX n'est pasinstalled, le bouton Modifier est désactivé.
Lorsque vous cliquez sur ce bouton, Dreamweaver lance Flash qui tente à son tour de localiser le fichier de programmation Flash (.FLA) correspondant au fichier SWF sélectionné. Les informations concernant le fichier source d'origine sont automatiquement stockées dans une Design Note associée au fichier SWF lorsque vous l'exportez vers un site Dreamweaver (si les Design Notes sont activées pour le site Dreamweaver). Si Flash ne peut pas localiser le fichier de programmation Flash, un message vous invite à le faire. Vous ne pouvez pasmettre à jour directement un fichier SWF. Il convient de modifier le fichier source et de l'exporter en tant que fichier d'animation SWF.
Après avoir lancé un document source à modifier, vous pouvez modifier une animation dans Flash. Cliquez sur Terminate une fois les modifications apportées. Flash met à jour le document de programmation Flash, exporte à nouveau le fjichier d'animation, se ferme et active le document Dreamweaver. Vous pouvez afficher le fjichier SWF mis à jour dans le document en cliquant sur Lecture dans l'inspecteur de propriétés ou appuyez sur F12 pour afficher un aperçu de votre page dans la fenêtre d'un navigateur.
<h1 id="rubriques-connexes-14">Rubriques connexes</h1>
« Modification d'une animation Flash dans Dreamweaver », page 333
« Mise à jour des liens vers un fichier SWF», page 334
<h1 id="modification-dune-animation-flash-dans-dreamweaver">Modification d'une animation Flash dans Dreamweaver</h1>
Vous ne pouvez pas modifier directement un fjichier SWF. Si vous souhaitez apporter des modifications à un fjichier SWF exporté, Sélectionnez un espace réservé pour une animation Flash dans le document Dreamweaver, puis cliquez sur Modifier dans l'inspecteur de propriétés. Le bouton Modifier lance Flash et le fjichier FLA si le chemin d'accès au document source (FLA) est disponible. Une fois les modifications effectuees, Flash les enregistritre dans le document source FLA et exporte à nouveau le fjichier d'animation SWF.
<h1 id="pour-lancer-et-modifier-une-animation-flash-à-partir-de-dreamweaver">Pour lancer et modifier une animation Flash à partir de Dreamweaver :</h1>
1 Dans Dreamweaver, choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur de propriétés, le cas échéant.
2 Dans le document Dreamweaver, procedez de l'une des manières suivantes:
- Cliquez sur l'espace réservé de l'animation Flash pour le sélectionner, puis sur Modifier dans l'inspecteur de propriétés.
- Maintenez enforcée la touche Ctrl (Windows) ou Commande (Macintosh) et double-cliquez sur l'espace réservé pour l'animation à modifier.
- Cliquez sur l'animation de votrechioix 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 contextualuel.
Dreamweaver lance Flash et ouvre le fjichier FLA que vous pouvez modifier ou vous demande de l'ouvrir s'il ne parvient pas à le trouver.
Remarque: si le fichier FLA ou le fichier SWF est verrouillé, Dreamweaver vous demande d'extraire le fichier du serveur, d'annuler la demande ou d'afficher le fichier.
3 Modifiez l'animation dans Flash. La fenêtre de document indique que vous âtes en train de modifier une animation provenant de Dreamweaver.
4 Une fois les modifications effectuees, cliquez sur Terminate.
En cliquant sur Terminate, vous enregistrez les modifications apportées au fichier FLA source et mettez à jour le fichier SWF.
<h1 id="mise-à-jour-des-liens-vers-un-fichier-swf">Mise à jour des liens vers un fichier SWF</h1>
Vous pouvezmettrea jour un lien dans un fichier SWF a partir de la fenetre Affichage de la carte du site de Dreamweaver. Pour plus d'informations sur l'affichage de la carte du site,voir «Utilisationde la carte du site»,page 83.Avant de creer une carte du site,vousdezecrer une page d'accueil pour votre site.Dans la fenetre Affichage de la carte du site,vousdezewficher les fichiers dependantsafin demettrea jour un lien dans un fichier SWF.Par defaut,la carte du site n'affiche pas les fichiers dependants.Pour plus d'informations sur l'affichage des fichiers dependants,voir «Affichage et masquage des fichiers de la carte du site»,page 87.
Selectionnez le lien à mettre à jour, puis choisissez une option de modification de lien correspondant aux changements que vous souhaitez apporter, puis modifiez un lien ou répercutez la modification du lien sur le site.
Tous les liens mis à jour par Dreamweaver dans le fjichier SWF sont intégrés au document source FLA lorsque vous procédez à une opération de lancement et de modification. Dreamweaver consigne automatiquement toutes les modifications de lien apportées au fjichier SWF dans les Design Notes et, lorsque Flash répècute les modifications dans le fjichier FLA, il les supprime des Design Notes.
<h1 id="pourmettreàjourunlienurldansunfichierswf">PourmettreàjourunlienURLdansunfichierSWF:</h1>
1 Définisse une page d'accueil pour le site si ce n'est déjà fait. Vous nevez définir une page d'accueil pour générer une carte du site.
2 Ouvrez la fenêtre de la carte du site.
3 Pour afficher les fichiers dépendants,CHOISSEZ Affichage > Afficher les fichiers dépendants (Windows) ou Site > Affichage de la carte du site > Afficher les fichiers dépendants (Macintosh).
Le lien apparait sous le fichier SWF.
4 Utilisez l'une des méthodes suivantes pour modifier le lien :
- Pour modifier le lien dans le fichier SWF selectionné, cliquez sur le lien avec le bouton droit de la souris, puis choisissez Modifier le lien. Dans la boîte de dialogue qui apparait, entrez le nouveau chemin d'accès à l'URL dans le champ URL.
Pourmettrea jour toutes les instances du lien,choisissez Site Modifier le lien au niveau du site,puis,dansle champ Modifier tous les liens a de la boite de dialogue qui apparait, recherche le lien a modifier a l'aide du bouton Parcourir ou tapez son chemin d'acces.Enfin, dans le champ En liens a,recherche la nouvelle URL a I'aide du bouton Parcourir ou tapez son chemin d'acces.
5 Cliquez sur OK.
<h1 id="chapitre-22-2">CHAPITRE 22</h1>
<h1 id="insertion-d-éléments-multimédia">Insertion d' éléments multimédia</h1>
Macromedia Dreamweaver permit d'ajouter rapidement et facilement du son et des animations à un site Web. Vous pouvez incorporer et modifier des fischiers multimédia et des objets comme des animations Macromedia Flash et Shockwave, des applets Java, QuickTime, Active X et des fischiers audio. Vous pouvez joindre des Design Notes à ces objets pour communiquer avec votre équipe. Il est également possible d'insérer des objets de texte et de bouton Flash à partir de l'application Dreamweaver elle-même.
Ce chapitre contient les sections suivantes :
- « Insertion et lecture d'objets multimédia», page 338
- « Lancement d'un主编 externe pour des fichiers multimédia», page 338
- « Utilisation des Design Notes (Notes de conception) avec les objets multimédia», page 340
- « A propos du contenu Flash», page 340
- « Insertion d'un objet de bouton Flash », page 341
- « Insertion d'un objet de texte Flash», page 343
- Insertion d' animations Flash page 345
- « Insertion d'animations Shockwave», page 346
- « Ajout d'une vente», page 346
- « Ajout de son à une page», page 346
- « Insertion du contenu d'un plug-in Netscape Navigator», page 348
- « Insertion d'un contrôle ActiveX», page 350
- Insertion d'une applet Java, page 350
- « Utilisation de comportements pour contrôler les objets multimédia», page 350
<h1 id="insertion-et-lecture-dobjets-multimédia">Insertion et lecture d'objets multimédia</h1>
Vou puez insérer une animation ou un objet Flash, une animation QuickTime ou Shockwave, une applet Java, un contrôle ActiveX ou d'autres objets audio ou video dans un document Dreamweaver.
La catégorie Médias de la barre Insertion ou du menu Insertion vous permet de sélectionner le type d'objet que vous poulez insérer dans un document. Les animations et objets Flash, Shockwave, les applets et les contrôleux ActiveX sont associés à des boutons. Le bouton Plug-in Netscape Navigator vous permit d'insérer d'autres fichiers multimédia. Pour plus d'informations, voir « Insertion du contenu d'un plug-in Netscape Navigator», page 348.
<h1 id="pour-insérer-un-objet-multimédia-dans-une-page">Pour insérer un objet multimédia dans une page :</h1>
1 Placez le point d'insertion dans la fenêtre de document dans laquelle vous souhaitez insérer l'objet, puis procédez de l'une des manières suivantes:
- Dans la barre Insertion, choisissez Medias et cliquez sur le bouton correspondant au type d'objet que vous souhaitez insérer ou faites-le glisser vers la fenetre de document.
- Choisissez l'objet ajustat dans le sous-menue Insertion > Medias ou Insertion > Images interactives.
Dans la plupart des cas, une boîte de dialogue permet alors de désirir un fichier source et de désfévrier certains paramètres de l'objet multimédia.
Conseil : pour éviter que ces boîtes de dialogue ne s'affichent, choisissez Edition > Préférences > Général ou Dreamweaver > Préférences > Général (Mac OS X) et désactiver l'options Afficher la boîte de dialogue lors de l'insertion d'objets. Pour replacer la préférencé d'affichage des boîtes de dialogue, maintenez enforcée la touche Ctrl (Windows) ou Option (Macintosh) tout en insérant l'objet. Par exemple, pour insérer un espace réservé pour une animation Shockwave sans spécifique le fischier, maintenez enforcée la touche Ctrl ou Option et cliquez sur le bouton Shockwave.
Dreamweaver insère automatiquement le code source HTML nécessaire à l'affichage de l'objet ou de l'espace réservé sur la page. Pour spécifique un fichier source, définir les dimensions et d'autres paramétres et attributs, utilisez l'inspecteur de propriétés pour chaque objet.
<h1 id="lancement-dun主编-extrer-pour-des-fichiers-multimédia">Lancement d'un主编 extrer pour des fichiers multimédia</h1>
Vou puez double-cliqueur sur la plupart des fichiers dans le panneau Site afin de les modifier directement. S'il s'agit d'un fichier HTML, il s'ouvrira dans Dreamweaver. S'il s'agit d'un autre type de fichier, tel qu'un fichier image, il s'ouvre dans un editor extrne approprié, tel que Macromedia Fireworks.
Chaque type de fichier non pris en charge directement par Dreamweaver peut etre associé a un ou plusieurs éditeurs externes installés sur votre système. L'éditeur qui est exécuté lorsqu vous double-cliquez sur le fichier du panneau Site est appelé l'éditeur principal. Vous pouvez spécifier l'éditeur associé à un type de fichier dans les préférences Types de fichiers/Editeurs.
Si plusieurséditeurs sont associés à un type de fichier, vous pouvez lancer un éditeur secondaire pour un fichier spécifique. Cliquez sur le nom de fichier se trouvant dans le panneau Site avec le bouton droit de la souris (Windows) ou en maintainant la touche Contrôle enfonnée (Macintosh) etCHOISSEZ un éditeur dans le sous-menu Ouvrir avec du menu contextualuel.
Pour indiquer explicitement leséditeurs externes à exécuter pour un type de fichier spécifique, choisissez la commande Edition > Préférences et sélectionnez la catégorie Types de fichiers/Editeurs. Les extensions de fichiers, par exemple .gif, .wav et .mpg, apparaisent dans la liste de gauche, sous le titre Extensions. Leséditeurs associés à une extension apparaisent dans la liste de droite, sous le titre Editeurs.
Vou puez également rechercher un éditeur externe pour modifier votre fichier. Cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Contrôle enfoncée (Macintosh) dans la fenêtre Création du document, puis choisissez la commande Modifier avec > Parcourir ou sélectionné le fichier et choisissez la commande Modifier > Modifier avec éditeur externe.
<h1 id="pour-ajouter-un-type-de-fichier-à-la-liste-des-extensions-dans-les-préférences-types-de-fichiersediteurs">Pour ajouter un type de fichier à la liste des extensions dans les préférences Types de fichiers/Editeurs :</h1>
1 Cliquez sur le bouton plus (+) , au-dessus de la liste Extensions.
2 Tâpez une extension de fichier (y compris le point au début de l'extension) ou plusieurs extensions connexes, en les séparant par des espaces.
Par exemple, vous pouvez entrer .css, .png .jpg.
<h1 id="pour-ajouter-un-éditeur-pour-un-type-de-fichier-donné">Pour ajouter un éditeur pour un type de fichier donné :</h1>
1 Sélectionnéz l'extension de ce type de filchier dans la liste Extensions.
2 Cliquez sur le bouton plus (+), au-dessus de la liste Editeurs.
3 Dans la boîte de dialogue qui apparait, choisissez une application à ajouter à la liste Editeurs. Par exemple, choisissez l'icone d'application pour Excel pour ajouter cette application à la liste Editeurs.
<h1 id="pour-supprimer-un-type-de-fichier-de-la-liste">Pour supprimer un type de fichier de la liste :</h1>
1 Sélectionnéz ce type de fichier dans la liste Extensions.
Remarque : l'annulation de la suppression d'un type de fichier étant impossible, soyez prudent lors d'une telle opération.
2 Cliquez sur le bouton moins (-) au-dessus de la liste Extensions.
<h1 id="pour-quun-éditeur-devienne-léditeur-principal-pour-un-type-de-fichier">Pour qu'un éditeur devienne l'éditeur principal pour un type de fichier :</h1>
1 Sélectionnéz le type de fichier.
2 Sélectionnez l'éditeur (ou ajoutez-le s'il ne figure pas dans la liste).
3 Cliquez sur Rendre principal.
<h1 id="pour-dissocier-un-éditeur-dun-type-de-fichier-donné">Pour dissocier un éditeur d'un type de fichier donné :</h1>
1 Sélectionnéz ce type de fichier dans la liste Extensions.
2 Sélectionnéz l'éditeur dans la liste Editeurs.
3 Cliques sur le bouton moins (-) au-dessus de la liste Editeurs.
<h1 id="utilisation-des-design-notes-notes-de-conception-avec-les-objets-multimédia">Utilisation des Design Notes (Notes de conception) avec les objets multimédia</h1>
Comme pour la plupart des objets dans Dreamweaver, vous pouvez ajouter des Design Notes à un objet multimédia. Pour plus d'informations sur l'utilisation des Design Notes, voir « Utilisation des Design Notes », page 101.
<h1 id="pour-ajouter-une-design-note-à-un-objet-multimédia">Pour ajouter une Design Note à un objet multimédia :</h1>
1 Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enfoncée (Macintosh) sur l'objet dans la fenetre de document.
Remarque : vous doivent désigner cette site avant d'ajouter des Design Notes à un objet (voir « Activation et déactivation des Design Notes », page 101).
2 Cliqueur Design Notes dans le menu contextual.
3 Entrez les informations souhaitées dans la Design Note.
Conseil : vous pouvez également ajouter une Design Note à un objet multimédia à partir du panneau Site en sélectionnant le fichier, en affichtant le menu contextualuel, puis enCHOISSSANT l'option Design Notes dans ce dernier.
<h1 id="a-propos-du-contentu-flash">A propos du contentu Flash</h1>
La technologie Flash de Macromedia est la solution la plus repandue pour la diffusion de graphismes et d'animations vectorielles. Flash Player est disponible sous forme de plug-in Netscape Navigator et de contrôle ActiveX pour Internet Explorer sur PC et est inclus dans les dernières versions de Netscape Navigator, Microsoft Windows et America Online.
Dreamweaver est fourni avec les objets Flash et vous pouvez l'utiliser que vous ayez Flash ou non. Vous pouvez utiliser ces objets pour creer des boutons Flash et du texte Flash que vous pouze insérer dans un document Dreamweaver. Si Flash est installé sur votre machine, voir « Utilisation de Dreamweaver et Flash », page 332 pour plus d'informations sur l'utilisation et l'intégration de ces applications.
Avant d'utiliser les commandes Flash disponibles dans Dreamweaver, prenez connaissance des trois types de fichiers Flash suivants :
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 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 d'animation Flash (.swf) est une version compressée du fichier Flash (.fla), optimisée pour la visualisation sur le Web. Ce fichier peut être lu dans les navigateurs et prévisualisé dans Dreamweaver, mais il ne peut pas être modifié dans Flash. Il s'agit du type de fichier que vous créez lors de l'utilisation des objets de bouton ou de texte Flash. Pour plus d'informations, voir « Insertion d'un objet de bouton Flash», page 341, « Insertion d'un objet de texte Flash», page 343 et « Insertion d'animations Flash», page 345.
Les fichiers de modele Flash (.swt) permettent de modifier et de remplacer des informations dans un fjichier d'animation Flash. Ces fichiers sont utilisés dans l'objet de bouton Flash, ce qui vous permet de modifier le modele avec votre propre texte ou vos propres liens ou de créé un fjichier SWF personnalisé à insérer dans votre document. Dans Dreamweaver, ces fichiers de modele peuvent être trouvés dans les dossiers Dreamweaver/Configuration/Flash Objects/Flash Buttons et Flash Text.
Vou puez egalent telecharger de nouveaux modeles de bouton a partir du site Web Macromedia Exchange pour Dreamweaver et les placer dans Your dossier de boutons Flash. Pour plus d'informations sur la creation de modeles de bouton, consultez l'article correspondant sur le site Web de Macromedia à l'adresse http://www.macromedia.com/go/flash Buttons.
<h1 id="insertion-dun-objet-de-bouton-flash">Insertion d'un objet de bouton Flash</h1>
L'objet de bouton Flash est un bouton basé sur un modèle Flash qui peut être mis à jour. Vous pouvez personnaliser un objet de bouton Flash en ajoutant du texte, une couleur d'arrière-plan et des liens vers d'autres fichiers. Les boutons Flash peuvent être insérés en mode Création ou en mode d'affichage de code.
Remarque : vous devez enregistrer le document avant d'insérer un objet de bouton ou de texte Flash.
Utilisez la boîte de dialogue Insérer le bouton Flash pour sélectionner un bouton dans un groupe de boutons Flash désignés. Vous pouvez afficher un exemple du bouton dans le champ Echantillon. Cliquez sur l'échantillon pour découvertir comment il fonctionne dans le navigateur. Lorsque vous définisse le bouton Flash (par exemple, en modifient le texte ou la police), le champ Echantillon n'est pas automatiquement mis à jour pour reflérer 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.
<h1 id="pour-insérer-un-objet-de-bouton-flash">Pour insérer un objet de bouton Flash :</h1>
1 Dans la fenêtre de document, placez le point d'insertion à l'endetroit où vous poulez 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 barre Insertion, Sélectionnéz Médias et cliquez sur l'icone Bouton Flash.
- Dans la barre Insertion, Sélectionnéz Médias et faites glisser l'icone Bouton Flash dans la fenêtre de document ou la fenêtre d'affichage de code si vous manipULE le code.
- Choisissez Insertion > Images interactives > Bouton Flash.
La boîte de dialogue Insérer le bouton Flash s'affiche.
3 Sélectionnez le style de bouton souhaïté dans la liste Style.
4 Dans le champ Texte de bouton (facultatif), tapez le texte à afficher.
Ce champ accepte uniquement des modifications si le bouton selectionné possède un paramètre {Button Text} définit. Ceci est affché dans la zone Echantillon. Le texte que vous tapez remplace le paramètre {Button Text} lorsque vous prévisualisez le fichier.
5 Dans le menu déroulant Police, Sélectionnez une police.
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 déroulant. Vous ne verrez pas la police sélectionnée dans le champ Echantillon, mais vous pouvez cliquer sur le bouton Appliquer pour insérer le bouton dans la page afin de visualiser l'aspect du texte.
6 Dans le champ Tàille, entrez une valeur numérique pour la taille de la police.
7 Dans le champ Lien (facultatif), entrez un lien relatif au document ou un lien absolu pour le bouton.
8 Dans le champ Cible (facultatif), indiquez l'endetroit où le document lie doit s'ouvrir. Vous pouvez selectionner une option de cadre ou de fenetre dans le menu déroulant. Les noms de cadres ne sont repertoriés que si l'objet Flash est modifie dans un jeu de cadres.
9 Dans le champ Couleur ar-pl. (facultatif), définièsez la couleur d'arrière-plan de l'animation Flash. Utilisé le sélecteur de couleur ou entrez une valeur hexadécimale Web (telle que #FFFFFFF).
10 Dans le champ Enregistrer sous, entrez un nom de fisquier sous lequel enregistrer le nouveau fisquier SWF.
Vou puez 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 doivent enregistrer le fichier dans le même réseau que le document HTML courant pour conserver les liens relatifs au document.
11 Cliquez sur le bouton Acquérir plus de styles pour atteindre le site Macromedia Exchange et télécharger des styles de bouton supplémentaires.
Pour plus d'informations, voir « Ajout d'extensions dans Dreamweaver », page 55.
12 Cliquez sur le bouton Appliquer ou OK pour insérer le bouton Flash dans la fenêtre de document.
Conseil : cliquez sur le bouton Applquier pour visualiser les modifications en mode Creation, tout en conservant la boite de dialogue ouverte. Vous pouvez alors continuer a apporter des modifications au bouton.
<h1 id="modification-dun-objet-de-bouton-flash">Modification d'un objet de bouton Flash</h1>
Vou puez modifier les propriétés et le contenu d'un objet de bouton Flash.
<h1 id="pour-modifier-un-objet-de-bouton-flash">Pour modifier un objet de bouton Flash :</h1>
1 Dans la fenêtre de document, cliquez sur l'objet de bouton Flash pour le selectionner.
2 Ouvrez l'inspecteur de propriétés, le cas échéant.
L'inspecteur de propriétés affiche les propriétés du bouton Flash. Il permet de modifier les attributs HTML du bouton, tels que la largeur, la hauteur et la couleur ar-pl.
3 Pour apporter des modifications au contenu, affiche la boite 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 de propriétés.
- Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh), puis désisisse Modifier dans le menu contextualuel.
4 Dans la boîte de dialogue Insérer le bouton Flash, modifiez le contenu des champs comme cela est décrit dans la procédure précédente « Insertion d'un objet de bouton Flash», page 341.
Dans la fenêtre Création, vous pouvez redimensionner l'objet à l'aide des poignées de redimensionnement. Vous pouvez restaurer l'objet à sa taille d'origine en selectionnant Rétabir la taille dans l'inspecteur de propriétés (voir « Redimensionnement d'une image», page 315).
<h1 id="lecture-dun-objet-de-bouton-flash-dans-le-document">Lecture d'un objet de bouton Flash dans le document</h1>
Vou puevez prévisualiser un bouton Flash dans la fenêtre de document Dreamweaver.
Pour afficher l'objet de bouton Flash dans la fenêtre de document :
1 En mode Creation, selectionnez l'objet de bouton Flash dans le document.
2 Dans l'inspecteur de propriétés, cliquez sur Lecture.
3 Cliquez sur le bouton Arrêt pour arrêter la prévisualisation.
Remarque : vous ne pouvez pas modifier l'objet de bouton Flash pendant sa lecture.
Il est toujours judicieux d'afficher un aperçu du document dans le navigateur pour obtenir une représentation exacte du bouton Flash.
<h1 id="insertion-dun-objet-de-texte-flash">Insertion d'un objet de texte Flash</h1>
L'objet de texte Flash permet de creator et d'insérer une animation Flash contenant uniquement du texte. Vous pouvez ainsi creator une petite animation graphique vectorielle avec les polices et le texte de votre choix.
<h1 id="pour-insérer-un-objet-de-texte-flash">Pour insérer un objet de texte Flash :</h1>
1 Dans la fenêtre de document, place le point d'insertion là où vous pouze 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 barre Insertion, Sélectionnéz Médias et cliquez sur l'icone Texte Flash.
- Dans la barre Insertion, Sélectionnez Médias et faites glisser l'icone Texte Flash dans la fenêtre de document ou la fenêtre d'affichage de code si vous manipuez le code.
- Choisissez Insertion > Images interactives > Texte Flash.
La boîte de dialogue Insérer le texte Flash s'affiche.
3 Sélectionnez une police dans le menu dérouulant Police.
Ce menu répertorie toutes les polices TrueType actuellément chargées sur le système.
4 Entrez une taille de police (en points) dans le champ Taille.
5 Spécifiez les attributs de style, tels que gras ou italique, et l'alignement du texte enclinquant sur les boutons de style appropriés.
6 Dans le champ Couleur, définièsez la couleur du texte en utilisant le selector de couleur ou en entrant une valeur hexadécimale Web (telle que #FFFFFFF).
7 Dans le champ Couleur de survol, définisse la couleur qui s'affiche lorsque le pointeur est placé au-dessus de l'objet de texte Flash. Utilisez le/selecteur de couleur ou entrez une valeur hexadécimale Web (telle que #FFFFFF).
8 Entre le texte souhaïte dans le champ Texte.
Pour visualiser le style de police affiché dans le champ Texte, Sélectionnez Afficher la police.
9 Pour associer un lien à l'objet de texte Flash, entrez un lien relatif au document ou un lien absolu dans le champ Lien.
Les liens relatifs au site ne sont pas acceptés car les navigateurs ne les reconnaissent pas au sein des animations Flash. Si vous utilisez un lien relatif au document, veilsz à enregistrer le fjichier SWF dans le même répertoire que le fjichier HTML. Les navigateurs varient dans leur interpretation des liens relatifs au document et l'enregistrement dans le même répertoire assure un fonctionnement correct des liens.
10 Si vous avez entree un lien, vous pouvez specifier dans le champ Lien une fenetre ou un cadre cible de destination pour ce lien.
11 Dans le champ Couleur ar-pl., définisse la couleur d'arrière-plan du texte. Utilisez le sélecteur de couleur ou entrez une valeur hexadécimale Web (telle que #FFFFFFF).
12 Dans le champ Enregistrer sous, entrez un nom pour le fjchier.
Vou puez utilise le nom de fichier par defaut (par exemple, tex1.swf) ou taper un nouveau nom. Si le fichier contient un lien relatif au document, vous devez enregister le fichier dans le même repertoire que le document HTML courant pour conserver les liens relatifs au document.
13 Cliquez sur le bouton 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 dire l'objet de texte Flash, suivez la même procédure que pour un bouton Flash (voir « Modification d'un objet de bouton Flash », page 342).
<h1 id="insertion-danimations-flash">Insertion d'animations Flash</h1>
Lorsque vous insérez une animation Flash dans un document, Dreamweaver utilise les deux balises object (définie par Internet Explorer pour les contrôleux ActiveX) et embed (définie par Netscape Navigator) afin d'obtenir des résultats optimaux dans tous les navigateurs. Lorsque vous modifie l'animation dans l'inspecteur de propriétés, Dreamweaver fait correspondre vos entrées aux paramètres appropriés pour les balises object et embed.
<h1 id="pour-insérer-une-animation-flash">Pour insérer une animation Flash :</h1>
1 Dans la fenêtre de document (mode Création), placez le point d'insertion à l'endetroit où vous souhaitez insérer l'animation, puis procédez de l'une des manières suivantes:
- Dans la barre Insertion, Sélectionnéz Médias et cliquez sur l'icone Insérer Flash.
- Dans la barre Insertion, Sélectionnez Médias et faites glisser l'icone Insérer Flash vers la fenêtre de document.
- Choisissez la commande 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). Pour plus d'informations sur la définition des propriétés d'une animation Flash, sélectionnez l'espace réservé et cliquez sur le bouton Aide dans l'inspecteur de propriétés.
<h1 id="pour-afficher-un-aperçu-dune-animation-flash-dans-la-fenêtre-de-document">Pour afficher un aperçu d'une animation Flash dans la fenêtre de document :</h1>
1 Dans cette fenêtre, cliquez sur l'espace réservé pour Flash afin de selectionner l'animation Flash à prévisualiser.
2 Dans l'inspecteur de propriétés, cliquez sur le bouton Lecture. Cliquez sur le bouton Arret pour arreter la prévisualisation. Vous pouvez également prévisualiser l'animation Flash dans un navigateur en appuyant sur la touche F12.
Conseil : pour prévisualiser tout le contenu Flash dans une page, appuyez sur les touches Ctrl+Alt+Maj+P (Windows) ou Maj+Option+Commande+P (Macintosh). Tous les objets et animations Flash sont définis sur le mode de lecture.
<h1 id="insertion-danimalations-shockwave">Insertion d/animalations Shockwave</h1>
Shockwave, la(norme Macromedia pour les éléments multimédia interactifs sur le Web, est un format compressé qui autorise le téléchargement rapide des fichiers multimédia créé dans Macromedia Director, ainsi que leur lecture dans la plupart des navigateurs.
Le logiciel qui permet d'executer les animations Shockwave est disponible sous forme de plug-in Netscape Navigator et de contrôle ActiveX. Lorsque vous insérez une animation Shockwave, Dreamweaver utilise les deux balises object (pour le contrôle ActiveX) et embed (pour le plug-in) afin d'optimiser les résultats dans tous les navigateurs. Lorsque vous modifie l'animation dans l'inspecteur de propriétés, Dreamweaver fait correspondre vos entrées aux paramètres appropriés pour les balises object et embed.
<h1 id="pour-insérer-une-animation-shockwave">Pour insérer une animation Shockwave :</h1>
1 Dans la fenêtre de document, placez le point d'insertion à l'endetroit où vous souhaitez insérer une animation Shockwave et procédez de l'une des manières suivantes :
- Dans la barre Insertion, Sélectionnéz Médias et cliquez sur l'icone Shockwave.
- Dans la barre Insertion, Sélectionnez Médias et faites glisser l'icone Shockwave dans la fenêtre de document ou la fenêtre d'affichage de code si vous manipuez le code.
- Choisissez la commande Insertion > Medias > Shockwave.
2 Dans la boîte de dialogue qui s'affiche, Sélectionnéz un filchier d'animation.
3 Dans l'inspecteur de propriétés, tapez la largeur et la hauteur de l'animation dans les boîtes L et H.
<h1 id="ajout-dune-video">Ajout d'une video</h1>
Plusieurs méthodes vous permettent d'ajouter une video à votre page Web et vous pouvez faire appel à divers formats. L'utilisateur peut télécharger les videos ou elles peuvent être diffusées et luespendant leur téléchargement. Les formats de diffusion les plus courants sur Internet pour transmettre des fichiers video sont les suivants : RealMedia, QuickTime et Windows Media. Vous nevez télécharger une application d'aide pour visualiser ces formats. Ces formats vous permettent de diffuser simultanément des fichiers audio et video.
Si vous souhaitez selectionner un clip court à télécharger只不过 qu'à diffuser, vous pouvez établier un lien vers la série ou l'incorpore dans votre page. Ces clips seprésentent souvent au format AVI ou MPEG.
Vouss pouvez utiliser Director pour creer des animations Shockwave ou Flash afin de générer des presentations multimédia interactives à faible largeur de bande à publier sur Internet. Avec Flash, la taille des fichiers est peu importante et cette technologie est reconnaue par de nombreuses plate-formes. (Dans un premier temps, les utilisateurs doivent télécharger le plug-in gratuite pour visualiser ces fichiers.)
<h1 id="ajout-de-son-à-une-page">Ajout de son à une page</h1>
Il existe plusieurs types et formats de fischiers son différents ainsi que plusieurs méthodes pour ajouter du son à une page Web. Certains facteurs sont à considérer avant de decide d'un format et d'une méthode d'ajout de son : son objectif, son public, la taille du fischier, la qualité du son et les différences entre les navigateurs.
Remarque: le traitement des fichiers est très différent et incohérent suivant les navigateurs. Vous pouvez, si vous le souhaitez, ajouter un fichier son à une animation Flash, puis incorporer le fichier SWF pour assurer une meilleure cohérence.
<h1 id="a-propos-des-formats-de-fichiers-audio">A propos des formats de fichiers audio</h1>
La liste ci-dessous décrit les formats de fichiers audio les plus courants et présente certains avantages et inconvenients 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 nécessrent 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 sonore 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) offre une belle qualite sonore, est pris en charge par plusieurs navigateurs et ne requiert pas de plug-in. Vous pouze enregistrer vos propres fischers WAV à partir d'un CD, d'une cassette, d'un microphone, etc. Toutefois, laaille importante des fischiers limite sérieusement la longueur des clips audio que vous pouze utiliser dans vos pages Web.
Le format .aif (Audio Interchange File Format ou AIFF), tout comme le format WAV, offre uneonne qualite sonore, est pris en charge par plusieurs navigateurs et ne requiert pas de plug-in. Vous pouze egalement enregister des fichiers AIFF a partir d'un CD, d'une cassette, d'un microphone, etc. Toutefois, laaille 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 fisier MP3 est correctement enregistré et compressé, sa qualité peut être équivalente à celle d'un CD. La nouvelle technologie permet de « diffuser » le fisier afin qu'un visiteur n'ait pas à attendre le téléchargement du fisier entier avant de pouvoir l'écouter. Toutefois, la taille d'un fisier MP3 étant supérieure à celle d'un fisier Real Audio, le téléchargement d'une chanson entière peut prendre un certain temps via une connexion téléphonique normale. Pour litre 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 taillé de fichier inférieure à celle du format MP3. Le téléchargement de fichiers de chanson peut être effectué dans un laps de temps raisonnable. Les fichiers pouvant être « diffusés » à partir d'un serveur Web normal, les visiteurs peuvent commencer à écouter le son avant la fin du téléchargement. La qualité sonore n'est pas aussi bonne que celle des fichiers MP3, mais de nouveaux lecteurs et encodeurs ont considérablement amélioré la qualité. Les visiteurs doivent télécharger et installer l'application d'aide ou le plug-in RealPlayer afin de dire ces fichiers.
<h1 id="lien-vers-un-fichier-audio">Lien vers un fichier audio</h1>
Un lien vers un fischi er audio est une methode simple et efficace pour ajouter du son a une page Web. Cette methode d'incorporation de fischiers audio permet aux visiteurs deCHOISIR s'ils veulent ecouter le fischi er rend le fischi er disponible pour un plus vaste public.Certains navigateurs peuvent ne pas prendre en charge les fischiers son incorpores.Voir « Incorporation d'un fischier son »,page 348.
Pour creer un lien vers un fichier audio :
1 Sélectionnéz le texte ou l'image à utiliser comme lien vers le fichier audio.
2 Dans l'inspecteur de propriétés, cliquez sur l'icone de dossier pour rechercher le fichier audio ou tapez le nom et le chemin d'accès du fichier dans le champ Lien.
<h1 id="incorporation-dun-fichier-son">Incorporation d'un fichier son</h1>
L'opération consitant à incorporer du son intégre le lecteur audio directement dans la page, mais le son est uniquement lu si les visiteurs du site disposent du plug-in approprié pour le fichier son besoin. Incorporez des fischiers si vous souhaitez utiliser le son en tant que musique de fond ou pour avoir un plus grand contrôle sur la presentation sonore elle-même. Par exemple, vous pouvez régler le volume, définir l'aspect du lecteur sur la page et spécifique les points de début et de fin du fichier audio.
<h1 id="pour-incorporer-un-fichier-audio">Pour incorporer un fichier audio :</h1>
1 En mode Creation, placez le point d'insertion à l'endetroit où vous souhaitez incorporer le fichier et procédez de l'une des manières suivantes:
- Dans la barre Insertion, Sélectionnéz Médias et cliquez sur l'icone Plug-in.
- Dans la barre Insertion, Sélectionnez Médias et faites glisser l'icone Plug-in dans la fenêtre de document ou la fenêtre d'affichage de code si vous manipuez le code.
- Choisissez la commande Insertion > Médias > Plug-in.
Pour plus d'informations sur l'objet Plug-in, voir « Insertion du contenu d'un plug-in Netscape Navigator», page 348.
2 Dans l'inspecteur de propriétés, cliquez sur l'icone de dossier pour rechercher le fichier audio ou tapez le nom et le chemin d'accès du fichier dans le champ Lien.
3 Entre la largeur et la hauteur en saississant les valeurs dans les champs appropriés ou en redimensionnant l'espace réservé du plug-in dans la fenêtre de document.
Ces valeurs déterminant la taille à laquelle les contrôleux audio sont affichés dans le navigateur. Par exemple, essayez une largeur de 144 pixels et une hauteur de 60 pixels pour observer comment le lecteur audio apparait dans Navigator et dans Internet Explorer.
<h1 id="insertion-du-contenu-dun-plug-in-netscape-navigator">Insertion du contenu d'un plug-in Netscape Navigator</h1>
Les plug-ins améliorent les fonctionnalités de Netscape Navigator, car ils permettent d'afficher du contenu multimédia dans divers formats. Les plug-ins permettent de dire et d'afficher les fischiers de contenu sur votre site Web. Par exemple, RealPlayer et QuickTime sont des plug-ins par défaut, alors que les fischiers MP3 et les animations QuickTime sont des fischiers de contenu.
Après avoir créé le contenu d'un plug-in Navigator, vous pouvez insérer ce contenu dans un document HTML à l'aide de Dreamweaver. Dreamweaver utilise la balise embed pour indiquer la reférence au filchier de contenu.
<h1 id="pour-insérer-le-contentu-dun-plug-in-navigator">Pour insérer le contentu d'un plug-in Navigator :</h1>
1 Dans la fenêtre de document (mode Création), placez le point d'insertion à l'endetroit où vous souhaitez insérer le contenu, puis procédez de l'une des manières suivantes :
- Dans la barre Insertion, Sélectionnéz Médias et cliquez sur l'icone Plug-in.
- Choisissez la commande Insertion > Médias > Plug-in.
2 Dans la boîte de dialogue qui s'affiche, Sélectionnez un filchier de contenu pour un plug-in Navigator.
<h1 id="lecture-de-plug-ins-dans-la-fenêtre-de-document">Lecture de plug-ins dans la fenêtre de document</h1>
Vous pouvez afficher un aperçu des animations qui font appel aux plug-ins Navigator (c'est-à-dire des éléments qui utilisent la balise embed), directement dans la fenêtre de document en mode Création (les animations faisant appel aux contrôleux ActiveX ne peuvent pas être prévisualisées dans la fenêtre de document). Vous pouvez dire simultanément tous les éléments des plug-ins pour savoir comment l'utilisateur verra la page ou les tire individuellement pour vous assurer que vous avoir incorpore le bon élément multimédia.
Pour lire des animations, les plug-ins ajustats doivent être installés sur votre ordinateur. Au démarrage, Dreamweaver recherche automatiquement tous les plug-ins installés, d'abord dans le dossier Configuration/Plugins, puis dans les DOSiers de plug-ins de tous les navigateurs installés.
<h1 id="pour-lire-le-contenu-du-plug-in-dans-la-fenetre-de-document">Pour lire le contenu du plug-in dans la fenetre de document :</h1>
1 Insérez un ou plusieurs éléments multimédia enCHOIsant la commande Insertion > Medias Shockwave, Insertion > Medias Flash ou Insertion Medias Plug-in.
2 Lisez le contenu du plug-in :
- Sélectionnez un des éléments multimédia que vous avez insérés, puis choisissez la commande Affichage > Plug-ins > Lire ou cliquez sur le bouton Lecture dans l'inspecteur de propriétés.
- Choisissez la commande Affichage > Plug-ins > Lire tout pour dire 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 courant. Elle ne s'applique pas aux autres documents dans un ensemble de cadres par exemple.
<h1 id="pour-arrêté-la-lecture-du-contenu-dun-plug-in">Pour arrêté la lecture du contenu d'un plug-in :</h1>
Selectionnez un élément multimédia, puis désisissez la commande Affichage > Plug-ins > Arrêt ou cliquez sur le bouton Arrête dans l'inspecteur de propriétés.
Vou puez également besoin la commande Affichage > Plug-ins > Arrêter tout pour arrêté la lecture du contenu de tous les plug-ins.
<h1 id="résolution-des-problèmes-des-plug-ins-navigator">Résolution des problèmes des plug-ins Navigator</h1>
Vouavesuivi les etapes permettant de direle contenu d'un plug-in dans la fenetre 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 charge.
- Ouvrez le fischier Configuration/Plugins/UnsupportedPlugins.txt dans un éditeur de texte et vérifie si le plug-in posant problème est répertorié. Ce fischier conserve la trace des plug-ins étant la source de problèmes dans Dreamweaver et qui ne sont donc pas pris en charge. Si vous constatiez des problèmes avec un plug-in particulier, il est souhaitable de l'ajouter à ce fischier.
- Vérifiez que vous disposez de suffisamment de mémoire (et, sur Macintosh, que suffisamment de mémoire est allouée à Dreamweaver). Certains plug-ins nécessitent de 2 à 5 Mo de mémoire supplémentaire pour fonctionner.
<h1 id="insertion-dun-contrôle-activex">Insertion d'un contrôle ActiveX</h1>
Les contrôle 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 charge par le navigateur du visiteur.
Dreamweaver utilise la balise object pour marquer l'emplacement sur la page ou afficher le contrôle ActiveX et pour passer des paramètres à ce dernier.
<h1 id="pour-insérer-du-contenu-de-contrôle-activex">Pour insérer du contenu de contrôle ActiveX :</h1>
1 Dans la fenêtre de document, positionné le curseur à l'emplacement où insérer le contenu et procédez de l'une des manières suivantes :
- Dans la barre Insertion, Sélectionnéz Médias et cliquez sur l'icone ActiveX.
- Dans la barre Insertion, Sélectionnez Médias et faites glisser l'icone ActiveX dans la fenêtre de document ou la fenêtre d'affichage de code si vous manipuez le code.
- Choisissez la commande Insertion > Medias > ActiveX.
Une icône indique l'emplacement de la page où apparaîtra le contrôle ActiveX dans Internet Explorer.
<h1 id="insertion-dune-applet-java">Insertion d'une applet Java</h1>
Java est un langage de programmation qui permet de développer des applications légères (applets) pouvant être incorporeées dans des pages Web.
Après avoir créé une applet Java, vous pouvez l'insérer dans un document HTML à l'aide de Dreamweaver. Dreamweaver utilise la balise applet pour indiquer la référence au filchier de l'applet.
<h1 id="pour-insérer-une-applet-java">Pour insérer une applet Java :</h1>
1 Dans la fenêtre de document (mode Création), placez le point d'insertion à l'endetroit où vous souhaitez insérer l'applet, puis procédez de l'une des manières suivantes:
- Dans la barre Insertion, Sélectionnéz Médias et cliquez sur l'icone Applet.
- Dans la barre Insertion, Sélectionnéz Médias et faites glisser l'icone Applet dans la fenêtre de document ou la fenêtre d'affichage de code si vous manipuez le code.
- Choisissez la commande Insertion > Medias > Applet. Vous pouvez également faire glisser l'icone Applet vers la fenetre de document.
2 Dans la boîte de dialogue qui s'affiche, Sélectionné un fichier contenant une applet Java.
<h1 id="utilisation-de-comportements-pour-contrôler-les-objets-multimédia">Utilisation de comportements pour contrôler les objets multimédia</h1>
Vou puez ajouter des comportements à votre page pour commencer ou arrêté la lecture de divers objets multimédia.
Contrôler Shockwave ou Flash permet de dire, d'arrêté, de rembobiner ou d'atteindre un cadre dans une animation Shockwave ou Flash (voir « Contrôler Shockwave ou Flash», page 378).
Jouer le son permet de jouer un son. Vous pouvez ainsi jouer un effet sonore dés que l'utilisateur survôle un lien à l'aide de la souris (voir « Jouer le son », page 386).
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. Ceci s'applique uniquement aux plugins de Netscape Navigator, car ce comportement ne vérifie pas les contrôleux ActiveX. Pour plus d'informations, voir « Vérifier le plug-in», page 377.
<h1 id="chapitre-23-2">CHAPITRE 23</h1>
<h1 id="dreamweaver-et-accessibilité">Dreamweaver et accessibilité</h1>
L'accessibilité consiste à faire en sorte que les sites ou les produits Web que vous creez puisent être utilisés par des personnes souffrant de handicaps visuels, auditifs, moteurs ou autres. Macromedia Dreamweaver MX inclut des outils qui le rendent accessible et vous permettent de créé un contenu accessible.
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.
Le nombre des personnes handicapées accédant au Web étant en constante augmentation, il devient de plus en plus important que les développpeurs s'assurent que leurs produits et sites Web sont accessibles à tous les utilisateurs potentiels. C'est pourquoit le gouvernement américain et d'autres institutions ont mis au point une législation et des directives afin de garantir que les développpeurs produit un contenu accessible. Pour en savoir plus sur deux de ces importantes initiaites, consultez le site de la World Wide Web Consortium Web Accessibility Initiative (http://www.w3.org/wai) et la Section 508 du Federal Rehabilitation Act (http://www.section508.gov).
Si vous étés un concepteur Web Dreamweaver et avons besoin d'utiliser les fonctions d'accessibilité de Dreamweaver, ce chapitre vous informe sur la prise en charge des lecteurs d'écran, la navigation avec le clavier et la prise en charge des fonctions d'accessibilité de votre système d'exploitation dans Dreamweaver.
Si vous étés un concepteur Web Dreamweaver et avez besoin de créé un contenu accessible, ce chapitre vous informe sur les boîtes de dialogue Accessibilité de Dreamweaver et sur les moyens de tester l'accessibilité de votre site.
Pour conceive des sites Web accessibles, vous doivent comprendre les exigences liées à l'accessibilité et doivent prendre plusieurs décisions faisant appel à votre subjectivité. Dreamweaver vous aide à créé des sites Web accessibles. Par exemple, Dreamweaver vous permet d'ajouter des équivalents textuels pour les graphiques ou vous rappelle de le faire si vous l'oubliez. Néanmoins, aucun outil de creation Web ne peut automatiser entièrement le processus de développement. Les concepteurs de sites Web ne doivent pas oublier de penser à la façon dont les personnes souffrant d'un handicap peuvent interagir avec les pages Web. La meilleure façon de s'assurer qu'un site Web est accessible est de respecter toutes les procédures de préparation, de développement, de tests et d'évaluation.
Ce chapitre couvre les sujets suivants :
- « Utilisation des fonctions d'accèsibilité de Dreamweaver », page 354
- « Création de pages Web accessibles», page 357
- « Test de l'accessibilité de votre site Web», page 364
<h1 id="utilisation-des-fonctions-daccessibilité-de-dreamweaver">Utilisation des fonctions d'accessibilité de Dreamweaver</h1>
Dreamweaver inclut des fonctions qui le rendent accessible aux utilisateurs souffrant d'un handicap. Il prend notamment en charge les lecteurs d'écran, les fonctions d'accessibilité du système d'exploitation et la navigation avec le clavier.
Remarque : les modes Espace de travail Dreamweaver 4 et Espace de travail Dreamweaver 5 prennt tous les deux en charge les fonctions d'accessibilité de Dreamweaver, mais il est recommendé d'utiliser le mode Espace de travail Dreamweaver 4. Pour changer de mode, choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X), puis sélectionnez la catégorie Général. Cliquez sur le bouton Changer d'espace de travail puis sélectionnez Espace de travail Dreamweaver 4 et enfin cliquez sur OK.
<h1 id="utilisation-de-lecteurs-décran-avec-dreamweaver">Utilisation de lecteurs d'écran avec Dreamweaver</h1>
Un lecteur d'écran récite le texte qui s'affiche sur l'écran de l'ordinateur. Il lit aussi les informations non textuelles, tels que les étiquettes de boutons ou les descriptions d'images dans l'application, fournis dans les balises ou les attributs d'accessibilité lors de la création.
Dreamweaver prend en charge les lecteurs d'écran JAWS pour Windows, de Freedom Scientific (http://www.freedomscientific.com) et Window Eyes, de GW Micro (http://www.gwmicro.com). En tant qu'utilisateur de Dreamweaver, vous pouvez utiliser un lecteur d'écran pour vous assister dans la création de vos pages Web. Le lecteur d'écran commence sa lecture par le coin supérieur gauche de la fenêtre de document.
<h1 id="utilisation-des-fonctions-daccessibilité-du-système-dexploitation">Utilisation des fonctions d'accessibilité du système d'exploitation</h1>
Dreamweaver prend en charge le paramètre de contraste élevé du système d'exploitation Windows. Vous pouvez activer cette option à l'aide du panneau de configuration de Windows. Lorsque le contraste élevé est activé, cela affecte Dreamweaver de la façon suivante :
- Les boîtes de dialogue et les panneaux utilisent des paramètres de couleurs système.
Par exemple, si vous définissez les couleurs sur Blanc sur Noir, les boîtes de dialogue et les panneaux Dreamweaver utilisent du blanc comme couleur de premier plan et du noir en arrêtre-plan.
- La coloration de la syntaxe en mode Code est désactivée.
Le mode Code utilise les couleurs système des fenêtres et du texte de fenêtres et ignore les paramètres de couleurs définis dans Préférences. Par exemple, si vous avez défini les couleurs système sur Blanc sur Noir et que vous changez les couleurs de texte dans Préférences > Coloration du Code, Dreamweaver ignore les couleurs définies dans Préférences et affiche le texte de code avec du blanc comme couleur de premier plan et du noir en arrêté-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.
<h1 id="utilisation-du-clavier-pour-naviguer-dans-dreamweaver">Utilisation du clavier pour naviguer dans Dreamweaver</h1>
Vou puez utilise le clavier pour parcourir les panneaux flottants, l'inspecteur de propriétés, les boites de dialogue, les cadres et les tableaux Dreamweaver sans utiliser de souris.
Cette section contient les rubriques suivantes :
- « Navigation dans les panneaux», page 355
- « Navigation dans l'inspecteur de propriétés », page 355
- « Navigation dans les boîtes de dialogue», page 356
- « Navigation dans les cadres», page 356
- « Navigation dans les tableaux», page 357
<h1 id="navigation-dans-les-panneaux">Navigation dans les panneaux</h1>
Vou puevez utiliser le clavier pour naviguer dans les panneaux.
Remarque : l'utilisation de la touche de tabulation et des touches fléchéées n'est prise en charge que sous Windows.
<h1 id="pour-naviguer-dans-les-panneaux">Pour naviguer dans les panneaux :</h1>
1 Dans la fenêtre de document, appuyez sur Ctrl+Alt+Tab pour activer un panneau.
Un contour blanc autour de la barre de titre du panneau indique que le panneau est actif. Le lecteur d'écran lit la barre de titre du panneau actif.
2 Appuyez sur Ctrl+Alt+Tab de nouveau pour activer le panneau suivant.
Continuez jusqu'à ce que le panneau dans lequel vous voulez travailler soit actif.
3 Appuyez sur Ctrl+Alt+Maj+Tab pour activer le panneau precedent, si nécessaire.
4 Si le panneau dans lequel vous voulez travailler n'est pas ouvert, utilisez les raccourcis clavier répertoriés dans le menu Fenêtre pour afficher le panneau approprié, puis appuyez sur Ctrl+Alt+Tab pour l'activer.
Si le panneau dans lequel vous voulez travailler est ouvert, mais affiché sous sa forme réduite, activez la barre de titre du panneau et appuyez sur la barre d'espace. Appuyez sur la barre d'espace de nouveau pour réduire le panneau.
5 Appuyez sur la touche de tabulation pour passer d'une option à une autre dans le panneau.
Un contour en pointillé indique que l'option est active.
6 Utilisez les touches fléchées de façon appropriée :
- Si une option comporte des可以选择, utilisez les touches fléchéées pour faire défiler ces可以选择, puis appuyez sur la barre d'espace pour valider la seLECTION.
- 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. Àpres avoir ouvert un nouvel onglet, appuyez sur la touche de tabulation pour faire défiler les options de ce panneau.
<h1 id="navigation-dans-linspecteur-de-propriétés">Navigation dans l'inspecteur de propriétés</h1>
Vou puez utilise le clavier pour naviguer dans l'inspecteur de propriétés et effectuer des modifications sur votre document.
Remarque : l'utilisation de la touche de tabulation et des touches fléchéées n'est prise en charge que sous Windows.
<h1 id="pour-naviguer-dans-linspecteur-de-propriétés">Pour naviguer dans l'inspecteur de propriétés :</h1>
1 Appuyez sur Ctrl+F3 pour afficher l'inspecteur de propriétés, s'il n'est pas visible.
2 Appuyez sur Ctrl+Alt+Tab jusqu'à ce que l'inspecteur de propriétés soit actif.
3 Appuyez sur la touche de tabulation pour passer d'une option de l'inspecteur de propriétés à une autre.
4 Utilisez les touches fléchées comme vous le désirez pour faire défiler les choix d'options et appuyez sur Entrée (Windows) ou Retour (Macintosh) pour effectuer une sélection.
5 Appuyez sur Ctrl+Tab (Windows) ou Option+Tab (Macintosh) pour ouvrir et fermer la section développée de l'inspecteur de propriétés ou appuyez sur la barre d'espace lorsque la flèche d'agrandissement en bas à droite est active.
<h1 id="navigation-dans-les-boites-de-dialogue">Navigation dans les boites de dialogue</h1>
Vou puevez utiliser le clavier pour naviguer dans les boites de dialogue.
Remarque : l'utilisation de la touche de tabulation et des touches fléchéées n'est prise en charge que sous Windows.
<h1 id="pour-naviguer-dans-une-boite-de-dialogue">Pour naviguer dans une boite de dialogue :</h1>
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.
Par exemple, si une option dispose d'un menu dérouulant, activez cette option puis utilisez la touche fléchée bas pour faire défiler les choix.
3 Si la boîte de dialogue comporte une liste Catégorie, appuyez sur Ctrl+Tab (Windows) ou Option+Tab (Macintosh) pour activer la liste Catégorie puis utilisez les touches fléchées pour vous déplacer vers le haut ou vers le bas dans la liste.
4 Appuyez de nouveau sur Ctrl+Tab (Windows) ou Option+Tab (Macintosh) pour afficher les options d'une catégorie.
5 Appuyez sur Entrée (Windows) ou sur Retour (Macintosh) pour quitter la boîte de dialogue.
<h1 id="navigation-dans-les-cadres">Navigation dans les cadres</h1>
Si vous document contient des cadres, vous pouvez utiliser les touches fléchées pour activer un cadre.
Remarque : l'utilisation de la touche de tabulation et des touches fléchées n'est prise en charge que sous Windows.
<h1 id="pour-sélectionner-un-cadre">Pour sélectionner un cadre :</h1>
1 Placez le point d'insertion dans la fenetre de document.
2 Appuyez sur Alt+Flèche vers le haut pour seLECTIONner le cadre actif.
Une ligne en pointillé indique quel cadre est actif.
3 Continue d'appuyer sur Alt+Flèche vers le haut pour activer le jeu de cadres, puis les yeux de cadres parents, s'il existe des yeux de cadres imbriqués.
4 Appuyez sur Alt+Flèche vers le bas pour activer un jeu de cadres infant 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.
6 Appuyez sur Alt+Flèche vers le bas pour placer le point d'insertion dans la fenêtre de document.
<h1 id="navigation-dans-les-tableaux">Navigation dans les tableaux</h1>
Après avoir sélectionné un tableau, vous pouvez utiliser le clavier pour le parcourir.
Remarque : l'utilisation de la touche de tabulation et des touches fléchéées n'est prise en charge que sous Windows.
<h1 id="pour-naviguer-dans-un-tableau">Pour naviguer dans un tableau :</h1>
1 Dans la fenêtre de document, précédez de l'une des manières suivantes pour sélectionner le tableau.
- Si le point d'insertion est situé sur la gauche de la cellule, appuyez sur Maj+Flché droite.
- Si le point d'insertion est situé sur la droite de la cellule, appuyez sur Maj+Flèche gauche.
2 Appuyez sur la touche fléchéée bas pour placer le curseur dans la première cellule.
3 Utilisez les touches fléchéées ou appuyez sur la touche de tabulation pour vous déplacer vers d'autres cellules.
Conseil : si vous appuyez sur la touche de tabulation lorsque vous etre dans la cellule la plus a droite, vous ajoutez une ligne au tableau.
4 Pour selectionner une cellule, appuyez sur Ctrl+A lorsque le point d'insertion est dans la cellule.
5 Pour sorting du tableau, utilisez la commande Sélectionner tout (Ctrl+A sous Windows ou Option+A sous Macintosh) deux fois puis appuyez sur la touche fléchée haut, gauche ou droite.
<h1 id="déciation-de-pages-web-accessibles">Déciation de pages Web accessibles</h1>
Dreamweaver you aide à creator des pages accessibles au contenu utile pour les lecteurs d'écran et en conformité avec les directives gouvernementales (voir http://www.section508.gov).
Lorsque vous activez les boîtes de dialogue Accessibilité (voir « Activation des boîtes de dialogue Accessibilité », page 358), Dreamweaver vous demande d'entrée des attributs d'accessibilité lorsque vous insérez des éléments de page.
Remarque : pour voir des exemples de pages conçues pour être accessibles, Sélectionnez Fichier > Nouveau. Dans la boîte de dialogue Nouveau document, Sélectionnez la catégorie Conception de page (Accessibility) puis sélectionné une page dans la liste Conception de page (Accessibility). Pour plus d'informations, voir « Utilisation de la boîte de dialogue Nouveau document », page 112.
<h1 id="développement-de-contenu-pour-les-lecteurs-décran">Développement de contenu pour les lecteurs d'écran</h1>
Pour rendre les informations accessibles aux lecteurs d'écran et aux utilisateurs de votre site Web, Dreamweaver facilité l'ajout d'équivalents textuels pour les éléments graphiques d'une page et vous permet de marquer les tableaux et les formulaires en HTML à l'attention des lecteurs d'écran et de toute autre technologie d'assistance.
Par exemple, vous pouvez ajouter une image de produit à votre document et associier une description de type « Veste garçon rouge taille L ». Lorsque l'image apparait sur une page pour un utilisateur souffrant d'un handicap visuel, le lecteur d'écran lit la description pour que l'utilisateur sache quel produit est affiché sur la page.
Dreamweaver you invite à ajouter des équivalents textuels pour les éléments graphiques et un marquage d'accessibilité lorsque vous activez les boîtes de dialogue Accessibilité (voir « Activation des boîtes de dialogue Accessibilité », page 358).
<h1 id="activation-des-boîtes-de-dialogue-accessibilité">Activation des boîtes de dialogue Accessibilité</h1>
Lorsque vous creez des pages accessibles, vous devez associier 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 les boîtes de dialogue Accessibilité pour que Dreamweaver vous invite à spécifique les informations nécessaires pour rendre le contenu accessible. Ces boîtes de dialogue apparaissent lorsque vous insérez un objet pour lequel vous avez activé la boîte de dialogue Accessibilité correspondante.
<h1 id="pour-activer-les-boites-de-dialogue-accessibilité">Pour activer les boites de dialogue Accessibilité :</h1>
1 Choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X).
La boîte de dialogue Préférences s'affiche.
2 Sélectionnéz la catégorie Accessibilité.
La boîte de dialogue Préférences affiche les options d'accessibilité.
3 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
4 Cliquez sur OK.
Pour chaque élément que vous sélectionnez, une boîte de dialogue Accessibilité vous invitera à entre les balises et les attributs d'accessibilité lorsque vous insérèze cet élément dans un document.
Pour plus d'informations sur l'ajout de contenu accessible à votre site Web, consultez les sections suivantes :
- « Insertion d'images accessibles », page 359
- Insertion d'objets de formulaire accessibles », page 360
- « Insertion de cadres accessibles», page 361
- « Insertion d'objects multimédia accessibles», page 362
- « Insertion de tableaux accessibles », page 363
<h1 id="insertion-dimages-accessesibles">Insertion d/images accessesibles</h1>
Lorsque vous insérez une image et que vous avez scéléctionné l'option Images dans les préférences d'accessibilité, Dreamweaver vous invite à entrer des informations pour rendre l'image accessible.
Remarque : pour rendre accessibles des espaces réservés pour les images et les images interactives, comme les images survolées ou les barres de navigation, entrez un texte secondaire lorsque vous insérez l'image. Pour plus d'informations, voir « Insertion d'images », page 311.
<h1 id="pour-insérer-une-image-accessible">Pour insérer une image accessible :</h1>
1 Dans la fenêtre de document, placez le point d'insertion à l'endetroit où vous poulez que l'image apparaisse.
2 Procedez de l'une des manieres suivantes:
- Choisissez Insertion > Image.
- Cliquez sur le bouton Image dans l'onglet Commun de la barre Insertion.
- Faites glisser l'icone Image depuis la barre Insertion vers le document.
La boîte de dialogue Source de l'image s'affiche.
3 Tapez le chemin d'accès au fichier d'image ou cliquez sur le bouton Parcourir pourCHOISIR un fichier.
Tant que le document sur lequel vous travailliez n'a pas encore ete enregistrre, Dreamweaver create automatiquement une referece d'emplacement de fichier. Lorsque vous enregistrrez le document sur le site, Dreamweaver convertit cette referece en indiquant un chemin relatif au document.
4 Cliquez sur OK.
La boîte de dialogue Attributes d'accessibilité aux balises d'image s'affiche.
5 Entrez des valeurs dans les zones Texte secondaire et Description longue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
Remarque : vous pouvez compléter une seule zone de texte ou les deux, selon vos besoins.
6 Cliquez sur OK.
L'image apparait dans votre document.
Remarque: si vousCLSiquez sur Annuler, l'imagesaffiche dans le document, mais Dreamweaver ne lui associe ni les balises ni les attributs d'accessibilité.
<h1 id="pour-modifier-les-valeurs-daccessibilité-dune-image">Pour modifier les valeurs d'accessibilité d'une image :</h1>
1 Sélectionnéz l'image dans la fenêtre de document.
2 Procedez de l'une des manieres suivantes:
- Modifiez les attributs de l'image en mode Code.
- Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh), puis désissez Modifier le code de la balise.
- Modifiez la valeur Alt dans l'inspecteur de propriétés.
<h1 id="insertion-dobjets-de-formulaire-accessibles">Insertion d'objets de-formulaire accessibles</h1>
Lorsque vous insérez un objet de formulaire et que vous avez scéléctionné l'option Objet de formulaire dans les préférences d'accessibilité, Dreamweaver vous invite à entraïr des informations pour rendre l'objet de formulaire accessible.
<h1 id="pour-ajouter-un-objet-de-formulaire-accessible">Pour ajouter un objet de formulaire accessible :</h1>
1 Dans le document, placez le point d'insertion à l'endetroit où vous pouze que le formulaire apparaisse.
2 Procedez de l'une des manieres suivantes pour insérer un objet de formulaire :
- Choisissez Insertion > Objet de formulaire, puis selectionnez un objet de formulaire à insérer.
- Sélectionnéz l'onglet Formulaires dans la barre Insertion, puis cliquez sur un bouton d'objet.
- Sélectionnez l'onglet Formulaires dans la barre Insertion puis faites glisser l'icone appropriée vers le document.
La boîte de dialogue Attributes d'accessibilité des balises d'entrée s'affiche.
3 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
4 Cliquez sur OK.
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é.
5 Si Dreamweaver vous demande si vous voulez insérer une balise de-formulaire, cliquez sur Oui. L'objet de formulaire apparait dans le document.
<h1 id="pour-modifier-les-valeurs-daccessibilité-dun-objet-de-formulaire">Pour modifier les valeurs d'accessibilité d'un objet de formulaire :</h1>
1 Dans la fenêtre de document, Sélectionnez l'objet.
2 Procedez de l'une des manieres suivantes :
- Modifiez les attributs en mode Code.
- Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh), puis désissez Modifier le code de la balise.
<h1 id="pour-rendre-un-objet-de-formulaire-accessible-dynamique">Pour rendre un objet de formulaire accessible dynamique :</h1>
1 Dans la fenêtre de document, Sélectionnez l'objet de formulaire que vous pouze rendre dynamique.
2 Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh), puis désisissez Modifier le code de la balise.
3 Modifiez les attributs selon vos besoin pour rendre l'objet dynamique.
Remarque : vous ne pouvez pas utiliser le panneau Liaisons pour ajouter un objet de formulaire dynamique accessible.
<h1 id="insertion-de-cadres-accessibles">Insertion de cadres accessibles</h1>
Lorsque vous insérez un jeu de cadres et que vous avez sélectionné l'option Images dans les préférences d'accèsibilité, Dreamweaver vous invite à attribuer un nom à chaque cadre pour le rendre accessible.
<h1 id="pour-insérer-un-jeu-de-cadres-accessible">Pour insérer un jeu de cadres accessible :</h1>
1 Placez le point d'insertion dans le document.
2 Procedez de l'une des manieres suivantes pour insérer un jeu de cadres :
- Choisissez Insertion > Cadres, puis selectionnez un jeu de cadres.
- Cliquez sur l'onglet Cadres dans la barre Insertion puis cliquez sur le bouton du jeu de cadres approprié.
- Cliquez sur l'onglet Cadres dans la barre Insertion puis faites glisser l'icone du jeu de cadres approprié vers le document.
Le jeu de cadres apparait dans votre document et la boîte de dialogue Attributes d'accessibilité des balises de cadre s'affiche.
3 Sélectionnez un cadre dans le menu déroulant, puis attribuez-lui un nom.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
Conseil : choisissez Fenetre > Autres > Cadres pour voir un diagramme des cadres que vous nommez
4 Repetez l'etape precedente jusqu'à ce que tous les cadres aient un nom.
<h1 id="5-cliquez-sur-ok">5 Cliquez sur OK.</h1>
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é.
<h1 id="pour-modifier-les-valeurs-daccessibilité-dun-cadre">Pour modifier les valeurs d'accessibilité d'un cadre :</h1>
1 Affichez le mode Code ou passes à un affichage en deux volets pour votre document, si vous est en mode Creation.
2 Choisissez Fenêtre > Autres > Cadres pour ouvrir le panneau Cadres.
3 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.
4 Procedez de l'une des manieres suivantes:
- Modifiez le code en mode Code.
- Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh), puis désissez Modifier le code de la balise.
<h1 id="insertion-dobjects-multimédia-accessibles">Insertion d'objects multimédia accessibles</h1>
Lorsque vous insérez un objet multimédia et que vous avez scéléctionné l'options Média dans les préférences d'accessibilité, Dreamweaver vous invite à entrser des informations pour rendre l'objet multimédia accessible.
<h1 id="pour-insérer-un-objet-multimédia-accessible">Pour insérer un objet multimédia accessible :</h1>
1 Placez le point d'insertion dans la fenêtre de document à l'endroit où vous pouze que l'objet multimédia apparaisse.
2 Procedez de l'une des manieres suivantes :
- Choisissez Insertion > Support, puis selectionnéz un élément.
- Cliquez sur l'onglet Média dans la barre Insertion puis cliquez sur un bouton d'objet.
- Cliquez sur l'onglet Media dans la barre Insertion puis faites glisser l'icone appropriée vers le document.
Une boîte de dialogue Sélectionner un fichier ou Insérer Flash s'affiche.
Remarque : pour les objets Active X, la boite de dialogue Accessibilité s'affiche. Vous pouvez annover l'etape suivante.
3 Complétez les options de la boîte de dialogue Sélectionner un fichier ou Insérer Flash, puis cliquez sur OK.
La boîte de dialogue Attributs d'accessibilité des balises d'objet s'affiche.
4 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
5 Cliquez sur OK.
L'objet multimédia apparait dans le document.
Remarque : si vous cliquez sur Annuler, un espace réservé pour l'objet multimédia s'affiche dans le document mais Dreamweaver ne lui associe ni les balises ni les attributs d'accessibilité.
Pour modifier les valeurs d'accessibilité pour un objet multimédia :
1 Dans la fenêtre de document, Sélectionnez l'objet.
2 Procedez de l'une des manieres suivantes:
- Modifiez les attributs en mode Code.
- Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh), puis désissez Modifier le code de la balise.
<h1 id="insertion-de-tableaux-accessibles">Insertion de tableaux accessibles</h1>
Lorsque vous insérez un tableau et que vous avez scéléctionné l'option Tableaux dans les préférences d'accessibilité, Dreamweaver vous invite à attribuer un nom à chaque tableau pour le rendre accessible.
<h1 id="pour-insérer-un-tableau-accessible">Pour insérer un tableau accessible :</h1>
1 Placez le point d'insertion dans la fenêtre de document à l'endetroit où vous pouze que le tableau apparaisse.
2 Procedez de l'une des manieres suivantes:
- Choisissez Insertion > Tableau.
- Cliquez sur le bouton Tableau dans l'onglet Commun de la barre Insertion.
- Faites glisser l'icone Tableau depuis l'onglet Commun de la barre Insertion vers le document. La boîte de dialogue Insérer un tableau avec des attributs d'accessibilité s'affiche.
3 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
4 Cliquez sur OK.
Le tableau apparaît dans le document.
Remarque: si vous cliquez sur Annuler, le tableau n'apparait pas dans le document.
<h1 id="pour-modifier-les-valeurs-daccessibilité-dun-tableau">Pour modifier les valeurs d'accessibilité d'un tableau :</h1>
1 Dans la fenêtre de document, Sélectionnez le tableau.
2 Procedez de l'une des manieres suivantes:
- Modifiez les attributs du tableau en mode Code.
- Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh), puis désissez Modifier le code de la balise.
<h1 id="test-de-laccessibilité-de-votre-site-web">Test de l'accessibilité de votre site Web</h1>
La meilleure façon de vous assurer que votre site est accessible à tous les utilisateurs est de reconvoir cette site en vous conformant aux directives d'accessibilité de la Section 508 du Rehabilitation Act de 1998. Puis, utilisez l'option Rapports de Dreamweaver pour vérifier la mise en œuvre de ces directives dans votre site.
Voupez executer un rapport d'accessibilité sur le document en cours, les fichiers sclectionnés, un dossier ou un site entier.
<h1 id="pour-executer-un-rapport-daccessibilité-sur-le-document-en-cours">Pour executer un rapport d'accessibilité sur le document en cours :</h1>
1 Ouvrez le document à vérifier.
2 Choisissez Fichier > Vérifier la page > Vérifier l'accessibilité.
Les résultats du rapport apparaissent dans le panneau Rapports du site (dans le groupe de panneaux Résultats).
<h1 id="pour-executer-un-rapport-daccessibilité-sur-le-contenu-sélection">Pour executer un rapport d'accessibilité sur le contenu sélection :</h1>
1 Procedez de l'une des manieres suivantes pour selectionner le contenu que vous pouze vérifier :
- Ouvrez un document.
- Sélectionné les fichiers dans le panneau Site.
- Sélectionnez un site à partir du menu dérouulant Site du panneau Site.
Remarque : pour executer un rapport d'accessibilité sur un dossier, vous n'avez pas besoin de selectionner le dossier tout de suite ; vous selectionnerez le dossier dans la boite de dialogue Rapports.
<h1 id="2-choisissez-site-rapports">2 Choisissez Site > Rapports.</h1>
La boîte de dialogue Rapports s'affiche.
3 Sélectionnez le contenu sur lequel vous souhaitez executer le rapport dans le menu dérounant Rapport puis sélectionnez Accessibilité.
Remarque : si vous sélectionnez Dossier dans le menu dérouulant Rapport, cliquez sur Parcourir pour sélectionner un dossier.
4 Cliquez sur le bouton Exécuter.
Les résultats du rapport apparaissent dans le panneau Rapports du site (dans le groupe de panneaux Résultats).
<h1 id="pour-voir-et-corriger-les-problèmes-signalés">Pour voir et corriger les problèmes signalés :</h1>
1 Executez un rapport d'accessibilité sur le contenu du site Web sélectionné, si ce n'est pas déjà fait.
Les résultats du rapport apparaisent dans le panneau Rapports du site (dans le groupe de pannaaux Résultats). Sélectionnez n'importe qu'elle ligne du rapport et cliquez sur le bouton Plus d'infos sur le côté gauche du panneau Rapports du site pour voir une description du problème et des suggestions pour le résoudre.
Les informations s'affichent dans le panneau Récurrence (dans le groupe de panneaux Code).
2 Double-cliquez sur une lignequelconque du rapport pour afficher le code correspondant dans la fenetre de document.
Remarque: si vous vous trouvez en mode Creation, Dreamweaver passé à un affichage à deux volets et indique le problème identifié directement dans le code.
3 Dans la fenêtre de document et en mode Code, modifier ou ajoutez des attributs aux balises appropriées pourmettrevoitrontenuenconformiteaveclesdirectivesd'accessibilité.
Si vous souhaitez utiliser l'éditeur de balises pour vous aider dans le processus de codage, Sélectionnez Code, cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh) et choisissez Editeur de balises. Pour plus d'informations sur les balises et les attributs, Sélectionnez Référence HTML O'Reilly dans le panneau Référence (dans le groupe de panneaux Code) puis Sélectionnez une balise.
Pour enregistrer un rapport d'accessibilité :
Cliquez sur le bouton Enregistrer sur le cotoe gauche du panneau Rapports du site.
<h1 id="a-propos-de-cette-fonction">A propos de cette fonction</h1>
La fonction de validation d'accessibilité de Dreamweaver MX utilise la technologie de UsableNet. UsableNet est l'un des principaux développpeurs de logiciels simples d'utilisation permettant d'automatiser les tests de fonctionnalité et d'accessibilité et les corrections. Pour une assistance supplémentaire concernant les tests d'accessibilité, essayez le service UsableNet LIFT pour Macromedia Dreamweaver, une solution complète pour le développement de sites Web fonctionnels et accessibles. UsableNet Lift pour Macromedia Dreamweaver comprend un assistant de correction pour les tableaux, les formulaires et les images complexes, un éditeur ALT global, la génération de rapports personnalisés et un nouveau mode de contrôle actif qui assure l'accessibilité du contenu pendant la construction des pages. Demandez une version démo de Lift pour Macromedia Dreamweaver à l'adresse http://www.usablenet.com.
UsableNet
<h1 id="partie-vi-utilisation-de-comportements-et-danimations">Partie VI Utilisation de comportements et d'animations</h1>
La plupart des pages Web se compose unquiemet de texte et d'images, et ne contiennent aucun élément interactif. Utilizez des comportements JavaScript et des scenarios d'animation de calque dans Dreamweaver pour creer des éléments interactifs et des animations qui éveilleront l'intérêt de vos visiteurs.
Cette partie du manuel contient les chapitres suivants :
- Chapitre 24, « Utilisation des comportements JavaScript »
- Chapitre 25, « Animation de calques »
<h1 id="chapitre-24-2">CHAPITRE 24</h1>
<h1 id="utilisation-des-comportements-javascript">Utilisation des comportements JavaScript</h1>
Les comportements Dreamweaver insèret du code JavaScript dans des documents pour permettre aux utilisateurs d'interagir avec une page Web afin de la modifier ou d'effectuer certaines tâches. Un comportement est la combinaison d'un événement et d'une action déclenchée par cet événement. Dans le panneau Comportements, vous pouvez ajouter un comportement à une page en spécifique une action, puis l'événement qui déclenché 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 utiliser a fait quelles chose sur votre page. Par exemple, lorsqu'un utiliser place le pointeur sur un lien, le navigateur géné ren un événement onMouseOver pour ce lien, puis il vérifie s'il existe un code JavaScript (specifié dans la page affichée) qu'il est censé appeler lorsqu'il générite cet événement pour ce lien. Ces événements sont définis pour différents éléments de la page; par exemple, dans la plupart des navigateurs, onMouseOver et onClick sont des événements associés à des liens, tandis que onLoad est un événement associé à des images et à la section body du document.
Une action consiste en un code JavaScript pré-rédigé qui effectue une tâche spécifique, comme ouvrir une fenêtre de navigateur, afficher ou masquer un calque, diffuser un son ou arrêter une animation Shockwave. Les actions proposées dans Macromedia Dreamweaver MX sont soignement rédigées par les ingénieurs Dreamweaver afin d'assurer une compatibilité internavigeurs maximale.
Une fois que vous avez associé un comportement à un élément de la page, lorsque l'évenement spécifique a lieu pour cet élément, le navigateur appelle l'action (le code JavaScript) associée à cet événement (les événements disponibles pour déclencher une action donnée varient d'un navigateur à l'autre). Par exemple, si vous associez l'action Message contextual à un lien et spécifique que l'action sera déclenchée par l'évenement onMouseOver, votre message s'affiche dans une boîte de dialogue lorsque qu'en un 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 MX propose une vingtaine d'actions de comportement ; des actions supplémentaires sont disponibles sur le site Web de Macromedia Exchange ainsi que sur les sites d'autres développpeurs (voir « Téléchargement et installation de comportements créé par des développpeurs tiers », page 374). Vous pouze également écrire vos propres actions de comportement si vous maîtrisez le langage JavaScript. Pour plus d'informations sur la création de comportements, voir Extension de Dreamweaver.
Remarque : les termes comportement et action appartiennent à la terminologie Dreamweaver et non à la terminologie HTML. Du point de vue du navigateur, une action est simplement un élément de code JavaScript.
Ce chapitre contient les sections suivantes :
- « Utilisation du panneau Comportements», page 370
- « A propos des événements», page 370
- « Application d'un comportement», page 371
- « A propos des comportements et du texte», page 372
- « Association d'un comportement à un scenario», page 373
- « Modification d'un comportement », page 373
- « Actualisation d'un comportement », page 374
- « Création de nouvelles actions», page 374
- « Téléchargement et installation de comportements créés par des développementiers tiers », page 374
- « Utilisation des actions de comportement livrées avec Dreamweaver», page 375
<h1 id="utilisation-du-panneau-comportements">Utilisation du panneau Comportements</h1>
Utilisez le panneau Comportements pour associer des comportements à des éléments de la page (plus précisé aux balises) et pour modifier les paramètres des comportements précédemment associés.
Pour ouvrir le panneau Comportements, selectionnez Fenetre > Comportements.
Les comportements déjà associés à l'objet de la page actuellément sélectionnée sont répertoriés dans la liste de comportements (la zone principale du panneau), établie par événement et par ordre alphabétique. Si un même événement est associé à plusieurs actions, ces dernières sont exécutées dans l'ordre dans lequel elles apparaissent dans la liste. Si chaque comportement n'apparait dans la liste, cela signifie qu'aucun comportement n'est associé à l'objet sélectionné.
Pour plus d'informations sur les options du panneau Comportements,CHOISSEZ Aide dans le menu Options qui se trouve dans la barre de titre du groupe de pannaaux.
<h1 id="a-propos-des-événements">A propos des événements</h1>
Chaque navigateur propose un série d'evénements que vous pouvez associier avec les actions répertoriées dans le menu contextuel Actions (+) du panneau Comportements. Lorsqu'un visiter de votre page Web déclenché une action interactive avec celle-ci, en cliquant sur une image par exemple, le navigateur géné ren un événement. Cet événement permet d'appeler une fonction JavaScript exécutant une actionquelconque. Certains événements peuvent aussi être générés sans interaction de la part de l'utilisateur, par exemple lorsque vous configurez la page pour qu'elle se recharge automatiquement toutes les 10 secondes. Dreamweaver intègre un certain nombre d'actions courantes que vous pouvez déclencher à l'aide de ces événements.
Pour obtenir les noms et descriptions des événements fournis par chacun des navigateurs, voir le centre de support Dreamweaver à l'adresse http://www.macromedia.com/fr/support/.
La plupart des événements ne peuvent être utilisés qu'vec certains éléments de la page. 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'objet de la page dans votre document et associez-lui un comportement, puis reportez-vous au menu contextuel Événements dans le panneau Comportements. Pour savoir précisé quelles balises peuvent être utilisées avec un événement donné dans un navigateur donné, recherchez l'évenement dans l'un des fischiers de votre dossier Dreamweaver/Configuration/Behaviors/Events.
<h1 id="application-dun-comportement">Application d'un comportement</h1>
Voussouvez associier des comportements au document entier (à la balise body) ou à des liens, des images, des éléments de formulaire ou divers autres éléments HTML. Le navigateur cible que vous désissez déterminé les événements pris en charge pour un élément donné. Internet Explorer 4.0, par exemple, propose pour chaque élément davantage d' événements que Netscape Navigator 4.0 ou que n'importe quel navigateur de la version 3.0.
Remarque : vous ne pouvez pas associer un comportement à un texte brut. Pour plus d'informations, voir « A propos des comportements et du texte », page 372.
Vous pouvez attribuer plusieurs actions à chaque événement. Les actions sont exécutées dans l'ordre dans lequel elles sont répertoriées dans la colonne Actions du panneau Comportements. Pour toute information sur la modification de l'ordre des actions, voir « Modification d'un comportement», page 373.
<h1 id="pour-associer-un-comportement">Pour associer un comportement :</h1>
1 Sélectionné 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 pour ourir le panneau Comportements.
3 Cliquez sur le bouton plus (+) etCHOISEZ une action dans le menu contextual Actions.
Vous ne pouvez pasCHOISIR les actions qui apparaissent grisées dans le menu. Ces actions peuvent etre grisées quand un objet obligatoire n'existe pas dans le document en cours.Par exemple,l'action Jouer le scenario s'affiche en grise si le document ne possede pas de scenario et l'action Contrcler Shockwave ou Flash apparait en grise si le document ne contient aucune animation Shockwave ou Flash. Si aucun événement n'est disponible pour I'objet selectionné, toutes les actions s'affichent en grise.
Lorsque vous choisissez une action, une boîte de dialogue s'affiche avec les paramètres et les instructions pour cette action.
4 Saisissez les paramétres pour l'action et cliquez sur OK.
Toutes les actions proposées dans Dreamweaver fonctionnent dans les versions 4.0 ou ultérieures des navigateurs. Certaines d'entre elles sont refusées pas les navigateurs moins récents. Voir « Utilisation des actions de comportement livrées avec Dreamweaver», page 375.
5 L'évenement par défaut qui déclenchera l'action apparait dans la colonne Evénements. S'il ne s'agit pas de l'évenement que vous désirez utiliser, sélectionnez-en un autre dans le menu contextual Evénements (pour ouvrir le menu contextual 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 apparait entre le nom de l'évenement et le nom de l'action).
Différents événements apparaissent dans le menu contextuel Événements, selon l'objet scLECTIONné et les navigateurs spécifiés dans le menu dérouulant Afficher les événements pour. Certains événements peuvent apparaître en grise si les objets pertinent n'existent pas encore dans la page ou si l'objet sclectionné ne peut pas receiveoir d'évenement. Si les événements désirés ne s'affichent pas, vérifie que vous avez sclectionné l'objet correct ou modifiez les navigateurs cibles dans le menu dérouulant Afficher les événements pour.
Si vous associez un comportement à une image, certains événements (par exemple onMouseOver) apparaissent entre parentheses. Ces événements ne sont disponibles que pour des liens. Lorsque vous en selectionnez un, Dreamweaver entoure l'image d'une balise à pour définir un lien nul, représenté par javascript: ; dans la zone de texte Lien de l'inspecteur de propriétés. Vous pouvez modifier la valeur de ce lien pour le transformer en veritable lien vers une autre page, mais si vous effacez le lien JavaScript sans le replacer par un autre lien, vous supprimerez le comportement.
<h1 id="a-propos-des-comportements-et-du-texte">A propos des comportements et du texte</h1>
Vou ne pouvez pas associier un comportement à un texte brut. Les balises telles que p et span ne seront pas d'evénements dans les navigateurs, il n'est donc pas possible de déclencher une action à partir de ces balises.
Toutefois, vous pouvez associier un comportement à un lien. La manière la plus simple d'associer un comportement à du texte consiste à ajouter un lien nul (qui ne correspond à rien) au texte, puis à associier le comportement au lien. Dans ce cas, le texte s'affiche en tant que lien (vous pouvez modifier la couleur du lien et supprimer le soulignement pour qu'il ne ressemble plus à un lien, cependant les utilisateurs risquent de ne pas se rendre compte qu'ils peuvent cliquer sur ce texte).
<h1 id="pour-associier-un-comportement-au-texte-selectionné">Pour associier un comportement au texte seLECTIONné :</h1>
1 Dans l'inspecteur de propriétés, entrez javascript: ; dans le champ Lien. N'oubliez pas les deux points (:) et le point-virgule (:).
Remarque : vous pouvez alternatively utiliser un signe dièse (#) dans le champ Lien. Dans ce cas, lorsqu'un utilisateur clique sur le lien, le navigateur revient en haut de la page. Le fait de cliquer sur le lien nul JavaScript n'aeldom effet sur la page et il est donc généralement préféable d'utiliser cette approche JavaScript.
2 Lorsque le texte est sélectionné, ouvre le panneau Comportements (Fenêtre > Comportements).
3 Choisissez une action dans le menu contextuel Actions, entrez les paramètres de l'action, puisCHOisissez un événement pour la déclencher. Pour plus de détails, voir « Application d'un comportement», page 371.
Pour modifier l'apparance du texte lié de sorte qu'il ne ressemble plus à un lien :
1 Choisissez Affichage > Code pour activer le mode Affichage de code de la fenêtre de document.
2 Trouvez le lien.
3 Dans la balise a href du lien, inserez l'attribut: style="text-decoration:none; color:black".
Ce paramètre désactive le soulignement et définit la couleur du texte sur noir (bien sûr, si le texte environnant est d'une couleur différente, utilisez cette couleur au lieu du noir).
Notez que cet attribut est un style CSS incorpore. Tout style CSS incorpore à un lien unique remplace les autres styles CSS appliqués à ce dernier, mais il n'a aucun impact en dehors de ce lien. Pour modifier l'apparance du texte lié dans toute une page ou sur votre site entier, utilisez les styles CSS pour creer un nouveau style pour les liens. Pour plus de détails, voir « Insertion et mise en forme de texte», page 283.
<h1 id="association-dun-comportement-à-un-scenario">Association d'un comportement à un scenario</h1>
Pour déclencher un comportement à une certaine image du scenario (plutôt que par interaction d'un utilisateur), placez le comportement dans le scenario (pour plus d'informations sur la création d'un scenario, voir « Animation de calques », page 413). Par exemple, vous pouvez diffuser un son à l'image 15 d'un scenario.
Un seul type d'évenement peut déclencher une action dans un scenario : l'arrivée de l'animation à un certain nombre d'image (un événement on Frame7, par exemple).
Le comportement peut avoir une influence sur n'importe quel object de la page, pas seulement sur leurs du scenario. Visualisez le scenario dans un navigateur pour voir le fonctionnement du comportement. Vous ne pouvez pas prévisualiser les comportements dans Dreamweaver.
<h1 id="pour-placer-un-comportement-dans-un-scenario">Pour placer un comportement dans un scenario :</h1>
1 Cliquez sur une image dans le canal Comportements du panneau Scenarios.
2 Utilisez le panneau Comportements pourCHOISIR l'action a executer sur cette image.
L'action apparait dans le panneau Comportements, avec un événement indiquant le numero d'image à laquelle l'action doit être déclenchée. Le signe moins (-) apparait dans le canal Comportements de l'image du scenario.
<h1 id="modification-dun-comportement">Modification d'un comportement</h1>
Une fois le comportement associé, vous pouvez modifier l'évenement qui déclenché l'action, ajouter ou supprimer des actions et modifier les paramètres des actions.
<h1 id="pour-modifier-un-comportement">Pour modifier un comportement :</h1>
1 Sélectionnez un objet auquel un comportement a été associé.
2 Choisissez Fenêtre > Comportements pour ouvrir le panneau Comportements.
Les comportements sont classés dans le panneau par ordre alphabetique des événements. Si un même événement dispose de plusieurs actions, ces dernières apparaissent dans l'ordre chronologique d'exécution.
3 Choisissez parmi les options suivantes :
- Pour modifier les paramètres d'une action, double-cliquez sur le nom du comportement ou Sélectionnez-le et appuyez sur la touche Entrée (Windows) ou Retour (Macintosh), modifiez les paramètres dans la boîte de dialogue, puis cliquez sur OK.
- Pour modifier l'ordre d'apparition des actions pour un événement donné, Sélectionnez une action et cliquez sur la touche directionnelle Haut ou Bas.
- Pour supprimer un comportement, Sélectionnez-le et cliquez sur le signe moins (-) ou appuyez sur Supprimer.
<h1 id="actualisation-dun-comportement">Actualisation d'un comportement</h1>
Si vos pages contiennent des comportements créés avec Dreamweaver 1 ou Dreamweaver 2, ces comportements ne sont pas automatiquement actualisés lorsque vous ouvrez les pages dans la version courante de Dreamweaver. Toutefois, lorsque vous actualisez une occurrence d'un comportement dans une page (en observant la procédure suivante), toutes les autres occurrences du même comportement de cette page sont également actualisées. Les comportements créés avec Dreamweaver 3 fonctionnent dans Dreamweaver 4 sans devoir être modifiés.
<h1 id="pouractualiseruncomportementdansunepage">Pouractualiseruncomportementdansunepage:</h1>
1 Sélectionnez l'élement auquel est attaché le comportement.
2 Ouvrez le panneau Comportements
3 Double-cliquez sur le comportement.
4 Cliquez sur OK dans la boite de dialogue du comportement.
Toutes les occurrences de ce comportement sont actualisées.
<h1 id="création-de-nouvelles-actions">Création de nouvelles actions</h1>
Les actions consistent en un code JavaScript et HTML. Si vous maitrisesz JavaScript, vous pouvez rédigier de nouvelles actions et les ajouter dans le menu contextual Actions du panneau Comportements. Pour plus d'informations, voir Extension de Dreamweaver.
<h1 id="téléchargement-et-installation-de-comportements-créé-par-des-développpeurs-tiers">Téléchargement et installation de comportements créé par des développpeurs tiers</h1>
L'une des fonctions les plus utiles de Dreamweaver est son extensibilité, c'est-à-dire qu'il offre aux utilisateurs maétrisant JavaScript la possibilité de rédigier du code JavaScript qui étend les capacité de Dreamweaver. Bon nombre de ces utilisateurs ont choisi de partager leurs extensions avec d'autres utilisateurs en les plaçant sur le site Web de Macromedia Exchange pour Dreamweaver.
<h1 id="pour-télécharger-et-installer-de-nouveaux-comportements-à-partir-du-site-dexchange">Pour télécharger et installer de nouveaux comportements à partir du site d'Exchange :</h1>
1 Ouvrez le panneau Comportements etCHOISSEZ l'option Tetecharger d'autres comportements dans le menu contextual Actions (+)
Votre navigateur principal s'ouvre sur le site d'Exchange (vous doivent connecté à Internet pour télécharger des comportements).
2 Localisez les propciels.
3 Téléchargez et installez le propiciel d'extension souhaite. Pour plus de détails, voir « Ajout d'extensions dans Dreamweaver», page 55.
<h1 id="utilisation-des-actions-de-comportement-livrées-avec-dreamweaver">Utilisation des actions de comportement livrées avec Dreamweaver</h1>
Les actions de comportement inclues dans Dreamweaver ont été conçues pour fonctionner avec les versions 4.0 et ultérieures de Netscape Navigator et Internet Explorer. La plupart des actions de comportement fonctionnent également dans Netscape Navigator version 3.0 et ultérieures (en revanche, les comportements associés aux calques ne fonctionnent pas dans Navigator 3.0). La plupart d'entre eux échouent sans que l'utilisateur en soit informé dans Internet Explorer version 3.0.
Remarque : les actions Dreamweaver ont eté 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 eté rédigées pour augmenter la compatibilité internavigeurs, certaines actions ne fonctionnent pas avec les navigateurs plus anciers. De même, certains navigateurs ne prennt pas en charge JavaScript et de nombreuses personnes désactivent JavaScript sur leur navigateur lorsqu'ils explorent la Toile. Pour optimiser les résultats inter-plates-formes, fournissez d'autres interfaces contenues dans des balises noscript afin que votre site reste accessible aux personnes qui n'utilisent pas JavaScript.
<h1 id="appel-javascript">Appel JavaScript</h1>
L'action Appel JavaScript vous permet d'utiliser le panneau Comportements pour spécifique qu'une fonction ou une ligne personalisée de code JavaScript doit être executée lorsqu'un événement se produit (vous pouvez rédigier le code JavaScript vous-même ou utiliser le code fourni gratuitement par plusieurs bibliothèques JavaScript sur Internet).
<h1 id="pour-utiliser-laction-appel-javascript">Pour utiliser l'action Appel JavaScript :</h1>
1 Sélectionnez un objet et ouvre le panneau Comportements.
2 Cliques sur le bouton plus (+) etCHOisissez Appel JavaScript dans le menu contextual Actions.
3 Tâpez le code JavaScript à exéçuter ou le nom de la fonction.
Par exemple, pour creer un bouton « Retour » vous pouvez saisir
if (history.length > 0) { history.back(); Si vous avez encapsulé votre code dans une fonction, indiquez simplement le nom de la fonction (par exemple, hogback());
4 Cliquez sur OK.
5 Verifiez que l'evénement par défaut est bien l'evénement désire.
Si ce n'est pas le cas, selectionnez-en un autre dans le menu dérounant. Si les événements désirés ne sont pas répertoriés, changez de navigateur cible dans le menu dérounant Afficher les événements pour.
<h1 id="changer-la-propriété">Changer la propriété</h1>
Utilisez cette action pour modifier la valeur d'une des propriétés d'un objet (par exemple, la couleur d'arrière-plan d'un calque ou l'action d'un-formulaire). C'est le navigateur qui détermine quelles propriétés sont modifiables. Beaucoup plus de propriétés peuvent être modifiées par ce comportement dans Microsoft Internet Explorer (IE) 4.0 que dans IE 3.0 ou Netscape Navigator 3.0 ou 4.0. Par exemple, vous pouvez modifier de façon dynamique la couleur d'arrière-plan d'un calque.
Remarque : n'utilisez cette action que si vous etes expert en HTML et en JavaScript.
<h1 id="pour-utiliser-laction-changer-la-propriété">Pour utiliser l'action Changer la propriété :</h1>
1 Sélectionnez un objet et ouvre le panneau Comportements.
2 Cliquez sur le bouton plus (+) etCHOisissez Changer la propriete dans le menu contextual Actions.
3 Dans le menu déroulant Type d'objet, Sélectionnez le type d'objet dont vous souhaitez modifier une propriété.
Tous les objets nommés du type d'objet sélectionné s'affichent dans le menu dérounant Objet nommé.
4 Sélectionnez un objet dans le menu dérouulant Object nommé.
5 Choisissez ensuite une propriété dans le menu déroulant Propriété ou tapez le nom de la propriété dans le champ texte.
Pour savoir quelles propriétés peuvent être modifiées pour chaque navigateur, désisissez différents navigateurs ou différentes versions de navigateurs dans le menu dérounant Navigateur. Si vous tapez directement le nom d'une propriété, voirlez à utiliser le nom JavaScript exact de la propriété (attention, les propriétés JavaScript tiennent compte des majuscules et minuscules).
6 Indiquez la nouvelle valeur de la propriété dans le champ Nouvelle valeur et cliquez sur OK.
7 Vérifiez que l'évenement par défaut est bien l'évenement désiré. (Lorsque cet événement se produit, l'action est executée et la propriété est modifiée.)
Si ce n'est pas le cas, selectionnez-en un autre dans le menu déroulant. Si les événements désirés ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant Afficher les événements pour.
<h1 id="vérifier-le-navigateur">Vérifier le navigateur</h1>
Utilisez cette action pour aiguiller les visiteurs vers des pages différentes selon la marque et la version de leur navigateur. Par exemple, vous pouze decide que les utilisateurs de Netscape Navigator 4.0 ou de versions ultérieures iront sur telle page, que les utilisateurs de Microsoft Internet Explorer 4.0 ou de versions ultérieures iront sur telle autre, et que les utilisateurs d'un autre type de navigateur resteront sur la page courante.
Il est utile d'associer ce comportement à la balise body d'une page qui est compatible avec presque tous les navigateurs (et qui n'utilise pas d'autre JavaScript); ainsi, les utilisateurs de la page qui ont déactivé JavaScript verront quand même quelque chose.
Une autre option consiste à associer ce comportement à un lien nul (tel que <a href="javascript:;<">) pour que l'action déterminée à chaque page le lien renvoie, selon la marque et la version du navigateur de l'utilisateur.
<h1 id="pour-utiliser-laction-vérifier-le-navigateur">Pour utiliser l'action Vérifier le navigateur :</h1>
1 Sélectionnez un objet et ouvre le panneau Comportements.
2 Cliques sur le bouton plus (+) etCHOisissez VErifier le navigateur dans le menu contextual Actions.
3 Indiquez comment vous souhaitez désigner les visiteurs : par marque de navigateur, par version ou les deux.
Par exemple, souhaitez-vous que tous les utilisateurs de la version 4.0 d'un navigateur,quel que soit son editor,voient telle page,et que tous les utilisateurs d'une marque ou d'une version differentes en voient une autre? Ou encore que les utilisateurs de Netscape Navigator voient une page et que les utilisateurs de Microsoft Internet Explorer (IE) en voient une autre?
4 Spectoriez une version de Netscape Navigator.
5 Dans les menus contextuels adjacent,CHOISSEZ les options respectives pour le cas ou la version de Netscape Navigator est celle que vous avez specifiée (ou une version plus recente) et pour le cas contraire.
Les options sont Aller à l'URL, Aller à l'URL sec. et Rester sur cette page.
6 Spécifiez une version de Microsoft Internet Explorer.
7 Dans les menus contextuels adjacent,CHOISSEZ les options respectives pour le cas ou la version d'Internet Explorer est cette que vous avez specifiée (ou une version plus recente) et pour le cas contraire.
Les options sont Aller à l'URL, Aller à l'URL sec. et Rester sur cette page.
8 Dans le menu dérouulant Autres navigateurs, choisissez l'action qui sera executée si le navigateur n'est ni Netscape Navigator, ni Microsoft Internet Explorer. (par exemple, l'utilisateur peut utiliser un navigateur basé sur du texte tel que Lynx).
La(Meilleure option estRester sur cette page pour les navigateurs autres que Navigator et IE, car la plupart ne prenne n pas en charge JavaScript - et s'ils ne peuvent pas gérer ce comportement,ils resteront sur cette page de toute façon.
9 Entrez les chemins et les noms de fichier de l'URL et de l'URL secondaire dans les champs de texte au bas de la boîte de dialogue. Si vous indiquez une URL distante, vous doivent事先 précéder l'adresse www du préfixe http://.
10 Cliquez sur OK.
11 Vérifiez que l'évenement par défaut est bien l'évenement désiré.
Si ce n'est pas le cas, sélectionnez-en un autre dans le menu déroulant. Si les événements désirés ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant Afficher les événements pour. Le but de ce comportement étant de vérifier les différentes versions du navigateur, il est préféable d'opter pour un événement qui fonctionne avec les versions 3.0 et ultérieures des navigateurs.
<h1 id="vérifier-le-plug-in">Vérifier le plug-in</h1>
Utilisez cette action pour envoyer les visiteurs sur des pages différentes selon que le plug-in spécifique 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étector des plug-ins spécifiques dans Microsoft Internet Explorer (IE) à l'aide de JavaScript. Toutefois, si vous sélectionné les plug-ins Flash ou Director, le code VBScript approprié sera automatiquement ajusté à votre page pour les détector dans IE sous Windows. Il est impossible de détector les plug-ins dans Internet Explorer sur Macintosh.
<h1 id="pour-utiliser-laction-vérifier-le-plug-in">Pour utiliser l'action Vérifier le plug-in :</h1>
1 Sélectionnez un objet et ouvre le panneau Comportements.
2 Cliquez sur le bouton plus (+) etCHOISEZ VERIFIER le plug-in dans le menu contextual Actions.
3 Sélectionnez un plug-in dans le menu dérouulant Plug-in, ou cliquez sur Entrée et tapez le nom exact du plug-in dans le champ adjacent.
Voudevezutiliserlenomexactduplug-in,telqu'ilappaiaientengrasurla pageAproposdes plug-ins dans Netscape Navigator (sousWindows,choisissezl'entree de menu? (Aide) A propos des plug-ins.Sur Macintosh,choisissez A propos des plug-ins dans le menu Pomme).
4 Dans le champ Si trouve, aller à l'URL, spécifiez l'URL destinée aux utilisateurs qui disposent du plug-in.
Si vous indiquez une URL distante, vous devez faire précéder l'adresse www du préfixe http://.
Pour que les utilisateurs disposant du plug-in restent sur la même page, laissez ce champ vide.
5 Dans le champ Sinon, aller à l'URL, indiquez une autre URL pour les utilisateurs qui ne disposent pas du plug-in.
Pour que les utilisateurs ne disposant pas du plug-in restent sur la même page, laissez ce champ vide.
6 Il est impossible de détecter les plug-ins dans Internet Explorer sur Macintosh, et la plupart des plug-ins ne peuvent pas être détectés dans Internet Explorer sous Windows. Par défaut, lorsque la détction est impossible, l'utilisateur est envoyé à l'URL indiquée dans le champ Sinon. Pour que l'utilisateur soit envoyé vers la première URL (Si trouve), activez la case à cocher Toujours aller à la première URL si la détction n'est pas possible. Lorsqu'elle est seLECTIONnée, cette option signifie « on suppose a priori que l'utilisateur possède le plug-in, sauf si le navigateur indique explicitement que ce n'est pas le cas »
En général, si le contenu du plug-in est un élément essentiel de votre page, activez l'option « Toujours aller à la première URL si la détction n'est pas possible ». Le plus souvent, les utilisateurs ne disposant pas de ce plug-in se verront proposer de le télécharger. Si le contenu du plug-in n'est pas un élément essentiel de votre page, laissez cette option désactivée.
Cette option ne concerne qu'Internet Explorer ; Netscape Navigator détecte les plug-ins.
7 Cliquez sur OK.
8 Verifiez que l'évenement par défaut est bien l'évenement désiré.
Si ce n'est pas le cas, selectionnez-en un autre dans le menu dérounant. Si les événements désirés ne sont pas répertoriés, changez de navigateur cible dans le menu dérounant Afficher les événements pour.
<h1 id="contrôler-shockwave-ou-flash">Contrôler Shockwave ou Flash</h1>
Utilisez cette action pour diffuser, arreter ou rembobiner une animation Shockwave ou Flash ou pour aller à une image précise de cette animation.
Pour utiliser l'action Contrôler Shockwave ou Flash :
1 Choisissez, selon le cas, Insertion > Medias > Shockwave ou Insertion > Medias > Flash pour insérer une animation Shockwave ou Flash.
2 Choisissez Fenêtre > Propriétés et entrez un nom pour l'animation dans le champ supérieur le plus à gauche (à côté de l'icone Shockwave ou Flash). Vous doiventnommer l'animation pour la contrôle avec l'action Contrcler Shockwave ou Flash.
3 Sélectionnez l'objet à utiliser pour contrôle l'animation Shockwave ou Flash. Par exemple, si vous disposez de l'image d'un bouton « Lecture » à utiliser pour diffuser l'animation, Sélectionnez cette image.
4 Ouvrez le panneau Comportements (Fenêtre > Comportements).
5 Cliquez sur le bouton plus (+) etCHOisissez Contrcler Shockwave ou Flash dans le menu contextual Actions.
Une boîte de dialogue de paramètres apparaît.
6 Choisissez une animation dans le menu déroulant Animation.
Dreamweaver répertorie automatiquement les noms de toutes les animations Shockwave et Flash du document courant. (en particulier, Dreamweaver établit une liste des animations ayant une extension de fichier .dcr, .dir, .swf ou .spl se trouvant dans les balises object ou embed).
7 Choisissez l'action de contrôle de l'animation désirée : Jouer, Arrête, Rembobiner ou Atteindre l'image indiquée dans l'animation. L'option Jouer diffuse l'animation en commençant par l'image où l'action a lieu.
8 Cliquez sur OK.
9 Verifiez que l'évenement par défaut est bien l'évenement déséré.
Si ce n'est pas le cas, selectionnez-en un autre dans le menu déroulant. Si les événements désirés ne sont pas repertoriés, modifie le navigateur cible dans le sous-menu Afficher les événements pour du menu Evénements.
<h1 id="déplacement-de-calque">Déplacement de calque</h1>
Cette action permet à l'utilisateur de déplacer un calque. Utilisez cette action pour créé des puzzles, des contrôleires de déplacement et autres éléments mobiles de l'interface.
Voupeupecifier la direction vers laquelle l'utiliseur peut faire glisser le calque (horizontalement, verticalement ou dans toutes les directions), une cible vers laquelle l'utiliseur doit faire glisser le calque, si ce dernier doit etre aimante par la cible ou non lorsqu'il arrive a moins d'un certain nombre de pixels de la cible, l'action a déclencher lorsque le calque touche la cible,etc.
L'action Déplacement de calque devant être appelée avant que le calque ne puisse être déplaced par l'utilisateur, assurez-vous que l'évenement qui déclenché l'action se produit avant que l'utilisateur ne tente de faire glisser le calque. Le最好的 est d'associer cette action à l'objet body (à l'aide de l'évenement onLoad), mais vous pouvez également l'associer à un lien replissant la totalité du calque (par exemple un lien autour d'une image), à l'aide de l'évenement onMouseOver.
<h1 id="pour-utiliser-laction-déplacement-de-calque">Pour utiliser l'action Déplacement de calque :</h1>
1 Choisissez Insertion > Calque ou cliquez sur le bouton Dessiner un calque de la barre Insertion, puis dessinez un calque dans le mode Creation de la fenetre de document.
2 Sélectionnéz la balise body en cliquant sur <body> dans le sélecteur de balises situé au bas de la fenêtre de document.
3 Ouvrez le panneau Comportements.
4 Cliquez sur le bouton plus (+) etCHOisissez l'action D'placement de calque dans le menu contextuel Actions.
Si cette action n'est pas disponible, un calque est probablement seLECTIONné. Etant donné que les calques ne prennant pas en compte les événements dans les navigateurs 4.0, vous devez selectionner un autre objet (la balise body ou un lien (balise a) par exemple) ou replacer le navigateur cible par IE 4.0 dans le menu déroulant Afficher les événements pour.
5 Dans le menu dérouulant Calque, Sélectionnez le calque que vous pouze rendre déplacable.
6 Dans le menu déroulant Mouvement, Sélectionnez Contraint ou Sans contrainte.
Les mouvements sans contrainte sont adaptés aux puzzles et aux autres produits à base de glisser-deplacer. Pour les contrôles de déplacement et les objets mobiles (tiroirs, ridesaux et stores),CHOISSES UN MOUvement contraint.
7 Pour la restriction de mouvement, indiquez les valeurs de déplacement admises (en pixels) dans les champs Haut, Bas, Gauche et Droite.
Ces valeurs sont relatives à la position de départ du calque. Pour contraindre un mouvement à l'intérieur d'une zone rectangulaire, indique des valeurs positives dans les quatre champs. Pour permettre uniquement un mouvement vertical, indique des valeurs positives pour Haut et Bas et 0 pour Gauche et Droite. Pour permettre uniquement un mouvement horizontal, indique des valeurs positives pour Gauche et Droite et 0 pour Haut et Bas.
8 Indiquez les coordonnées (exprimées en pixels) de la cible de dépôt dans les champs Gauche et Haut.
La cible de dépôt est le point sur lequel vous poulez que l'utilisateur « dépose » le calque. Un calque est considéré comme ayant atteint la cible de dépôt lorsqu ses coordonnées d'origine (en haut à gauche) correspondant aux valeurs indiquées dans les champs 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 replir automatiquement les champs avec les coordonnées actuelles du calque.
9 Entrez une valeur (exprimée en pixels) dans le champ Aligner si dans pour déterminer la distance minimale à laquelle l'utilisateur doit approcher le calque de la cible pour que le calque soit aimanté par celle-ci.
Les valeurs importantes permettent à l'utilisateur de trouver plus facilement la cible de dépôt.
10 Pour des puzzles simples et des défilements d'images, vous pouvez vous en tener là. Pour définir la poignée de déplacement du calque, suivre le mouvement du calque pendant qu'il est déplace et déclencher une action lorsqu'il est déposé, cliquez sur l'onglet Avancé.
11 Pour spécifique que l'utilisateur doit cliquer dans une zone particulière du calque pour pouvoir le déplacer,CHOISSEZ Zone dans le calque dans le menu déroulant Poignée de déplacement, puis indiquez les coordonnées de l'origine (angle supérieur gauche) de la poignée de déplacement, ainsi que la largeur et la hauteur de cette-ci.
Cette option est utile lorsquel'image inseree a l'intérieur du calque contient un symbole de déplacement, par exemple une barre de titre ou une poignee de tiroir. N'activez pas cette option si vous foulez que l'utilisateur soit libre de cliquer n'importe ou dans le calque pour le déplacer.
12 Choisissez, parmi les options de la zone En déplaçant, celles que vous désirez utiliser :
- Activez l'options Placer le calque au premier plan si le calque doit être amné 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 apparait pour indiquer si le calque doit être laissé au niveau de visibilité le plus élevé ou si sa position d'origine dans l'ordre de superposition doit être rétablie.
- Tapez un code JavaScript ou un nom de fonction (par exemple, monitorLayer()) dans le champ Appel JavaScript pour que ce code ou cette fonction soit executé en boucle pendant le déplacement du calque. Par exemple, vous pouvez écrire une fonction pour surveiller les coordonnées du calque et afficher des indications, telles que « tu brûles » ou « tu t'éloignes de la cible », dans un champ texte.
13 Indiquez un code JavaScript ou un nom de fonction (par exemple, evaluateLayerPos()) dans le second champ Appel JavaScript si vous poulez que le code ou la fonction soit executé(e) lorsque le calque est déposé. Activez l'option Uniquement si aligné si le code JavaScript indiqué ne doit être executé que si le calque a atteint la cible de dépôt.
14 Cliquez sur OK.
15 Verifiez que l'évenement par défaut est bien l'évenement déséré.
Si ce n'est pas le cas, selectionnez-en un autre dans le menu déroulant. Si les événements désirsés ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant Afficher les événements pour. N'oubliez pas que les calques ne sont pas pris en charge par la version 3.0 des navigateurs.
Remarque : vous ne pouvez pas associier l'action Déplacement de calque à un objet avec les événements onMouseDown ou onClick.
<h1 id="collecte-dinformations-sur-le-calque-déplacable">Collecte d'informations sur le calque déplacable</h1>
Lorsque vous associez l'action Déplacement de calque à un objet, Dreamweaver insère la fonction MM DragLayer() dans la section d'en-tête (head) de votre document. Cette fonction enregistre le calque comme déplacable et définit trois propriétés pour chaque calque déplacable,
MM_LEFTRIGHT, MM_UPDOWN et MM_SNAPPED, que vous pouvez utiliser dans vos propres fonctions JavaScript pour déterminer les positions horizontale et verticale du calque et s'il a atteint la cible de dépôt.
Remarque : les informations fournies ici sont destinées uniquement aux programmes JavaScript expérimétés.
Par exemple, la fonction suivante affiche la valeur de la propriété MM_UPDOWN (la position verticale courante du calque) dans un champ de formulaire appelé curPosField. (Les champs de formulaires seront à afficher des informations pouvant être continuèlement mises à jour, parce qu'ils sont dynamiques, c'est-à-dire que vous pouvez modifier leur contenu après le chargement de la page, dans Netscape Navigator et Microsoft Internet Explorer.)
function getPos(layername){ var layerRef = MM_findObj(layername); var curVertPos = LayerRef.MM_UPDOWN; document.tracking.curPosField.value = curVertPos; }
Au lieu d'afficher la valeur des propriétés MM_UPDOWN ou MM_LEFTRIGHT dans un champ de formulaire, vous pouze écrire une fonction qui affiche un message dans ce champ selon la distance qui reste à parcourir jusqu'à la cible, ou appeler une autre fonction pour afficher ou masquer un calque selon la valeur de cette distance. L'utilisation que vous faites de la valeur de MM_UPDOWN ou MM_LEFTRIGHT a pour seules limites votre imagination... et votre maîtrise de JavaScript.
Il est particulièrement utile de tester la propriété MM_SNAPPED lorsque vous disposez, sur une page, de plusieurs calques qui doivent tous atteindre leur cible pour que l'utilisateur puisse passer à la page ou à la tâche suivante. Par exemple, vous pouze écrire une fonction qui compte le nombre de calques ayant la valeur MM_SNAPPED à true et l'appler chaque fois qu'un calque est déposé. Lorsque le nombre de calques arrivés sur leur cible atteint le nombre déséré, vous pouze envoyer l'utilisateur à la page suivante ou afficher un message de felicitations.
Si vous avez associé l'action Déplacement de calque à des liens placés sur plusieurs calques à l'aide de l'évenement onMouseOver, vous devrez modifier légèrement la fonction MM DragLayer() pour éviter que la propriété MM_SNAPPED d'un calque aligné ne repasse à false lorsqu'il est survoly par la souris (cela peut se produit si vous avons utilisé l'action Déplacement de calque pour créé un Puzzle de photos, car la souris survolvera probablement des pieces déjà alignées lors du positionnement des autres). La fonction MM DragLayer() n'intérèt pas ce comportement, car il est parfois souhaitable (si par exemple vous désirez étabir plusieurs cibles pour un seul calque).
<h1 id="pour-éviter-le-ré-enregistrement-de-calques-alignés">Pour éviter le ré-enregistrement de calques alignés :</h1>
1 Effectuez une copie de sauvégarde de votre document avant de modifier le code (vous pouvez effectuer cette opération à partir du panneau Site dans Dreamweaver ou dans l'Explorative Windows ou le Finder de Macintosh).
2 Choisissez Edition > Rechercher.
3 Sélectionnez Source HTML dans le menu dérouulant Rechercher.
4 Tapez (!curDrag) dans le champ texte adjacent.
5 Cliquez sur Rechercher suivant.
Cliquez sur Oui si Dreamweaver vous demande si vous poulez continuer la recherche depuis le début du document. Dreamweaver trouve l'instruction :
if (!curDrag) return false ;
6 Fermez la boite de dialogue Rechercher, puis modifie l'instruction dans l'affichage de code de la fenetre de document ou dans l'inspecteur de code pour qu'il affiche :
if (!curDrag || curDrag.MM_SNAPPED != null) return false;
Les deux barres verticales (||) signifient « ou » et curDrag est une variable qui représenté le calque qui a été enregistré comme déplacable. En français, cette instruction signifie « si curDrag n'est pas un object, ou s'il a déjà la valeur MM_SNAPPED, ce n'est pas la peine d'exécuter le reste de la fonction »
<h1 id="atteindre-lurl">Atteindre l'URL</h1>
L'action Atteindre l'URL ouvre une nouvelle page dans la fenêtre en cours ou dans l'image indiquée. Cette action est particulièrement utile pour modifier d'un seul clic le contenu de deux cadres ou plus. Elle peut également être appelée dans un scenario pour ouvrir une nouvelle page après un délambda spécifique.
<h1 id="pour-utiliser-laction-atteindre-lurl">Pour utiliser l'action Atteindre l'URL :</h1>
1 Sélectionnez un objet et ouvre le panneau Comportements.
2 Cliquez sur le bouton plus (+) et choisisse Atteindre l'URL dans le menu contextual Actions.
3 Choisissez une destination pour l'URL dans la liste Ouvrir dans.
La liste Ouvrir dans énumère automatiquement les noms de tous les cadres qui se trouvent dans le jeu de cadres actuel, ainsi que la fenêtre principale. S'il n'y a pas de cadres, cette dernière est la seule option.
Remarque : ne donnez pas à vos cadres les noms top, blank, self ou parent, car cela pourrait produit des résultats inattendus. En effet, certains navigateurs peuvent confondre ces noms avec les mots réservés utilisés dans le champ Cible.
4 Cliquez sur Parcourir pour selectionner un document à ouvrir ou tapez le chemin et le nom du fichier recherche dans le champ URL.
5 Repetez les etapes 3 et 4 pour ouvrir d'autres documents dans d'autres cadres.
6 Cliquez sur OK.
7 Verifiez que l'évenement par défaut est bien l'évenement désire.
Si ce n'est pas le cas, selectionnez-en un autre dans le menu déroulant. Si les événements désirés ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant Afficher les événements pour.
<h1 id="menu-dereroutage">Menu dereroutage</h1>
Lorsque vous creez un menu de reroutage en utilisant Insertion > Objects de formulaire > Menu de reroutage, Dreamweaver create un objet de menu et lui associe le comportement Menu de reroutage (ou Menu de reroutage / Aller). En principe, il n'est pas nécessaire d'associer manuellement l'action Menu de reroutage à un objet. Pour plus d'informations sur les menus de reroutage et la façon de les créé, voir « Insertion d'un menu de reroutage», page 439.
Vou puez modifier un menu de reroutage existant de deux manieres différentes :
- Vous pouvez modifier et réorganiser les éléments du menu, modifier les fichiers à rerouter et la fenêtre dans laquelle s'ouvrent ces fichiers, en double-cliquant sur une action de Menu de reroutage existante dans le panneau Comportements.
- Vous pouvez modifier les éléments du menu comme vous modifieriez les éléments de n'importe quel menu, en selectionnant le menu et en utilisant le bouton Valeurs de la liste dans l'Inspecteur de propriétés. Voir « Création de menus déroulants», page 628 pour plus de détails.
Pour modifier un menu de reroutage à l'aide du panneau Comportements :
1 Creez un objet Menu de reroutage s'il n'en existe pas deja dans votre document.
2 Sélectionnez un objet et ouvre le panneau Comportements.
3 Double-cliquez sur Menu de reroutage dans la colonne Actions.
4 Effectuez les modifications souhaitées dans la boîte de dialogue Menu de reroutage, puis cliquez sur OK.
<h1 id="menu-de-reroutage-aller">Menu de reroutage / Aller</h1>
Cette action est étroitement associée à l'action Menu de reroutage ; elle vous permet d'associer un bouton Aller avec un menu de reroutage (pour utiliser cette action, vous nezvez avoir déjà créé un menu de reroutage dans le document). Un clrc sur le bouton Aller ouvre le lien actuellément selectionné 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'utiliseur choisit l'élement qui est déjà selectionné dans le menu de reroutage, le reroutage ne se produit pas. En général cela n'a pas d'importance, mais si le menu de reroutage apparait dans une image et que les éléments du menu de reroutage assurent la liaison avec des pages dans d'autres images, un bouton Aller est souvent utile, pour permettre aux utilisateurs deCHOISIR à nouveau un élément deja selectionné dans le menu de reroutage.
Pour ajouter une action Menu de reroutage / Aller :
1 Sélectionnez un objet qui sera utilisé comme bouton Aller (en général une image) et ouvre le panneau Comportements.
2 Cliquez sur le bouton plus (+) etCHOisissez Menu de reroutage / Aller dans le menu contextual Actions.
3 Dans le menu déroulant Choisissez un menu de reroutage, choisissez le menu qui activera le bouton Aller.
4 Cliquez sur OK.
<h1 id="ouvrir-la-fenêtre-navigateur">Ouvrir la fenêtre Navigateur</h1>
Utilisez l'action Ouvrir une fenêtre du navigateur pour ouvrir une URL dans une nouvelle fenêtre. Vous pouvez spécifique 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écifieaucun attribut,elle s'ouvrira avec la taille et les attributs de la fenetre a partir de laquelle elle a eté lancée.Choisir des attributs pour la fenetre déactive automatiquement tousCeux qui ne sont pas explicitement activés.Par exemple,si vous ne définissez pas d'attributs pour la fenetre,elle peut s'ouvrir en 640× 480 pixels et avoir une barre de navigation,une barred'adresse,une barre d'etat et une barre de menus.Si vous définissez explicitement une largeur de 640 et une hauteur de 480 pixels,sans aucun autre attribut,la fenetre s'ouvrira en 640× 480 pixels et n'aura pas de barre de navigation,pas de barre d'adresse ni de barre d'etat,pas de barre de menus, pas de poignées de redimensionnement et pas de barres de défilament.
<h1 id="pour-utiliser-laction-ouvrir-une-fenêtre-du-navigateur">Pour utiliser l'action Ouvrir une fenêtre du navigateur :</h1>
1 Sélectionnez un objet et ouvre le panneau Comportements.
2 Cliquez sur le bouton plus (+) etCHOisissez Ouvrir une fenetre du navigateur dans le menu contextual Actions.
3 Tapez l'URL à afficher ou cliquez sur Parcourir pour selectionner un fichier.
4 Choisissez parmi les options suivantes :
Largeur de fenetre spécifique la largeur de la fenetre en pixels.
Hauteur de fenêtre spécifique la hauteur de la fenêtre en pixels.
Barre d'outils de navigation est constituée de la barre de boutons de navigation qui comprend les boutons Précédente, Suivante, Demarrage et Actualiser.
Barre d'adresse est la barre d'outils qui contient le champ Adresse.
Barre d'etat est la zone au bas de la fenêtre du navigateur dans laquelle apparaissent des messages (par exemple la durée de chargement restante et les URL associées aux liens).
Barre de menus est la zone de la fenêtre du navigateur (Windows) ou du Bureau (Macintosh) où apparaissent les menus Fichier, Edition, Affiche, Aller et Aide. Vous doivent définir cette option si vous pouze que les utilisateurs puisent naviguer à partir de la nouvelle fenêtre. Sinon, les utilisateurs ne pourront que fermer ou réduire la fenêtre (Windows), fermer la fenêtre ou quitter l'application (Macintosh) à partir de la nouvelle fenêtre.
Barre de défilament si nécessaire permet de spécifier si les barres de défilament doivent apparaître si le contenu dépasse la zone visible. Si vous ne définisse pas explicitement cette option, les barres de défilament n'apparaitront pas. Si l'option Poignées de redimensionnement est également désactivée, les utilisateurs n'auront aucun moyen de visualiser le contenu situé en dehors de la taille d'origine de la fenêtre (bien qu'ils puissant agrandir la fenêtre en en déplaçant le bord).
Poignées de redimensionnement permet de spécifique si l'utilisateur pourra redimensionner la fenêtre, soit en tirant le coin inférieur droit de la fenêtre, soit en cliquant sur le bouton d'agrandissement en plein écran (Windows) ou sur la case de redimensionnement (Macintosh) dans l'angle supérieur droit. Si cette option n'a pas été définie explicitement, les contrôleles de redimensionnement ne sont pas disponibles et l'angle inférieur droit ne peut être déplaced.
Nom de la fenêtre est le nom de la nouvelle fenêtre. La nouvelle fenêtre doit posseder un nombre si elle doit être pointée par des liens ou contrôle en JavaScript. Ce nom ne peut conténir d'espaces ou de caractères spéciaux.
5 Cliquez sur OK.
6 Vérifiez que l'évenement par défaut est bien l'évenement désiré.
Si ce n'est pas le cas, selectionnez-en un autre dans le menu déroulant. Si les événements désirés ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant Afficher les événements pour.
<h1 id="jouer-le-son">Jouer le son</h1>
Utilisez cette action pour reproduce un son. Par exemple, vous pouvez déclencher un effet sonore lorsque l'utilisateur passse sur un lien ou journ une série musicale lorsque la page est en cours de chargement.
Remarque : certains navigateurs nécessitant une prise en charge audio externe (par exemple un plug-in audio) pour diffuser les sons. C'est pourquoit des navigateurs différents, possedant des plug-ins différents, diffusent souvent les sons de manière différente. Il est difficile de prévoir de manière fiable la façon dont les utilisateurs du site vont percevoir les sons.
<h1 id="pour-utiliser-laction-jouer-le-son">Pour utiliser l'action Jouer le son :</h1>
1 Sélectionnez un objet et ouvre le panneau Comportements.
2 Cliquez sur le bouton plus (+) etCHOisissez Jouer le son dans le menu contextual Actions.
3 Cliquez sur Parcourir pour selectionner un fichier son ou tapez le chemin et le nom de ce fichier dans le champ Jouer le son.
4 Cliquez sur OK.
5 Verifiez que l'évenement par défaut est bien l'évenement désire.
Si ce n'est pas le cas, selectionnez-en un autre dans le menu déroulant. Si les événements désirés ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant Afficher les événements pour.
<h1 id="message-contextuel">Message contextuel</h1>
Cette action fait apparaitre un message d'alerte JavaScript, avec le texte que vous avez spécifique. Comme les alertes JavaScript ne disposent que d'un seul bouton (OK), utilisez cette action pour informer l'utilisateur plutôt que pour lui proposer un besoin.
Vou puevez incorporeer au texte des appels de fonction, propriétés, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, place-la entre des accolades \\ . Pour afficher une accolade, faites-la preceder d'une barre oblique inversée \\ .
<h1 id="example">Example</h1>
L'URL de cette page est {window.location} et nous sommes le {new Date().}
Remarque : vous ne pouvez pas contrôler l'apparce d'une alerte JavaScript ; celle-ci est déterminée par le navigateur de l'utilisateur. Si vous désirez contrôler davantage l'apparce de votre message, pensez à utiliser le comportement Ouvrir la fenêtre Navigateur. Pour plus de détails, voir « Ouvrir la fenêtre Navigateur », page 384.
<h1 id="pour-utiliser-laction-message-contextual">Pour utiliser l'action Message contextual :</h1>
1 Sélectionnez un objet et ouvre le panneau Comportements.
2 Cliquez sur le bouton plus (+) etCHOisissez l'action Message contextuel dans le menu contextuel Actions.
3 Indiquez votre message dans le champ Message.
4 Cliquez sur OK.
5 Verifiez que l'évenement par défaut est bien l'évenement désire.
Si ce n'est pas le cas, selectionnez-en un autre dans le menu déroulant. Si les événements désirés ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant Afficher les événements pour.
<h1 id="precharger-les-images">Precharger les images</h1>
Cette action 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 scenario, un comportement ou une fonction en JavaScript). Cela évite à l'utilisateur d'attendre que ces images soient charges, lorsqu'un événement déclenché leur apparition.
Remarque : l'action Intervertir une image précharge automatiquement toutes les images sélectionnées lorsque vous désissez l'option Précharger les images dans la boîte de dialogue Intervertir une image ; dans ce cas, il n'est pas nécessaire d'ajouter manuellement l'action Précharger les images lorsque vous utilisez l'action Intervertir une image.
Pour utiliser l'action Précharger les images :
1 Sélectionnez un objet et ouvre le panneau Comportements.
2 Cliquez sur le bouton plus (+) etCHOisissez l'action Precharger les images dans le menu contextual Actions.
3 Cliquez sur Parcourir pour selectionner un fichier d'image a precharger ou tapez le chemin d'acces et le nom du fichier d'une image dans le champ Fichier source des images.
4 Cliquez sur le bouton plus (+) en haut de la boite de dialogue pour ajouter l'image à la liste Précharger les images.
Remarque : vous doivent pouvoir sur le bouton plus (+) avant d'indiquer l'image suivante, faute de quoi l'image que vous venez de désirsir sera remplaçée par la prochaine.
5 Repetez les étapes 3 et 4 pour les autres images que vous désirez précharger dans la page en cours.
6 Pour supprimer une image de la liste Précharger les images, Sélectionnez-la et cliquez sur le bouton - (signe moins).
7 Cliquez sur OK.
8 Verifiez que l'évenement par défaut est bien l'évenement désire.
Si ce n'est pas le cas, selectionnez-en un autre dans le menu déroulant. Si les événements désirés ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant Afficher les événements pour.
<h1 id="définir-image-barre-de-navigation">Définir image barre de navigation</h1>
Utilisez l'action 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 Pour plus d'informations, voir « Insertion d'une barre de navigation», page 442.
L'onglet Base de la boîte de dialogue Définir image barre de navigation permet de creer ou de modifier une ou plusieurs images d'une barre de navigation, de modifier l'URL cible des boutons de la barre de navigation et de selectionner une autre fenêtre pour l'affichage de l'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 actuellément sélectionné. Par défaut, lors d'un clic sur un élément d'une barre de navigation, tous les autres éléments de cette-ci sont automatiquement restaurés dans leur état « Image normale »; l'onglet Avancé vous permet de définir un changement d'état pour une autre image lorsque l'image sélectionnée passée à l'état « Image survolée » ou « Image cliquée »
<h1 id="pour-modifier-une-action-définir-image-barre-de-navigation">Pour modifier une action Définir image barre de navigation :</h1>
1 Sélectionnez une image dans la barre de navigation que vous voulez modifier et ouvre le panneau Comportements.
2 Dans la colonne Actions du panneau Comportements, double-cliquez sur l'action Définir image barre de navigation associée à l'évenement que vous désirez modifier.
3 Dans l'onglet Base de la boite de dialogue Définir image barre de navigation,CHOISSEZ des options de modification de l'image.
<h1 id="pour-définiter-plusieurs-images-pour-un-bouton-de-barre-de-navigation">Pour définiter plusieurs images pour un bouton de barre de navigation :</h1>
1 Sélectionnez une image dans la barre de navigation que vous poulez modifier et ouvre le panneau Comportements.
2 Dans la colonne Actions du panneau Comportements, double-cliquez sur l'action Definir image barre de navigation associée à l'évenement que vous désirez modifier.
3 Cliques sur l'onglet Avancé de la boîte de dialogue Définir image barre de navigation.
4 Dans le menu dérouulant Lorsque l'objet « xxx » s'affiche, choisissez un état d'image. Pour plus d'informations sur les états d'image, voir « Création de barres de navigation», page 441.
- Choisissez Image Abaissee si vous désirez qu'une autre image change d'aspect après que l'utilisateur a cliqué sur l'image seLECTIONnée.
- Choisissez Image Au-dessus ou Image Au-dessus lorsqu'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électionné une autre image de la page à définir.
6 Cliquez sur Parcourir pour selectionner le fichier d'image a afficher ou tapez le chemin d'acces et le nom du fichier d'imag dans le champ Vers le fichier image.
7 Si vous avez selectionné l'etat Image Au-dessus ou Image Au-dessus lorsqu'Abaissée à l'etape 4, vous disposez d'une possibilité supplémentaire. Dans le champ texte Si abaissé, vers fichier image, cliquez sur Parcourir pour selectionner le fichier d'image à afficher ou tapez le chemin d'accès et le nom de ce fichier.
<h1 id="texte-du-cadre">Texte du cadre</h1>
L'action Texte d'un cadre vous permet de définir de façon dynamique le texte d'un cadre, en remplaçant le contentu et le formatage d'un cadre par le contentu indiqué. Ce contentu peut etre n'importe quel code source HTML valide. Cette action permit d'afficher les informations de façon dynamique.
Bien que l'action Texte d'un cadre permette de replacer 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.
Vou puez incorperer au texte des appeals 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, faites-la preceder d'une barre oblique inversée (\{\}).
<h1 id="example-2">Example</h1>
L'URL de cette page est {window.location} et nous sommes le {new Date().}
<h1 id="pour-creer-un-jeu-de-cadres">Pour creer un jeu de cadres :</h1>
Choisissez Modifier > Jeu de cadres > Fractionner le cadre à gauche, à droite, vers le haut ou vers le bas.
Pour plus d'informations, voir « Création de cadres et de produits de cadres », page 271.
<h1 id="pour-utiliser-laction-texte-dun-cadre">Pour utiliser l'action Texte d'un cadre :</h1>
1 Sélectionnez un objet et ouvre le panneau Comportements.
2 Cliquez sur le bouton plus (+) etCHOISEZ l'action Texte d'un cadre dans le menu contextual Actions.
3 Dans la boîte de dialogue qui s'affiche, choisissez le cadre cible dans le menu déroulant Cadre.
4 Cliquez sur le bouton Reprendre HTML courant pour copier les contenus actuels de la section body du cadre cible.
5 Tapez un message dans le champ Nouveau HTML et cliquez sur OK.
6 Vérifiez que l'évenement par défaut est bien l'évenement déséré. Si ce n'est pas le cas, Sélectionnez-en un autre dans le menu déroulant.
Si les événements désirés n'apparaissent pas dans la liste, changez de navigateur cible dans le menu déroulant Afficher les événements pour.
<h1 id="texteducalque">Texteducalque</h1>
L'action Texte du calque remplace le contenu et le formatage d'un calque existant sur la page par le contenu indiqué. Ce contenu peut être n'importe quel code source valide en HTML.
L'action Texte du calque remplace le contentu et le formatage d'un calque existant par le contentu indiqué, mais conserve les attributs du calque, y compris la couleur. Vous pouvez formater le contenu en incorporent des balises HTML dans le champ Nouveau HTML de la boite de dialogue Texte du calque.
Vou puez incorporeer au texte des appel de fonction, propriétés,variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, place-la entre des accolades \ \ . Pour afficher une accolade, faites-la preceder d'une barre oblique inversee \1\
<h1 id="example-3">Example</h1>
L'URL de cette page est {window.location} et nous sommes le {new Date().}
<h1 id="pour-creer-un-calque">Pour creer un calque :</h1>
1 Choisissez Insertion > Calque.
Pour plus d'informations, voir « Création de calques sur une page», page 403.
2 Dans l'inspecteur de propriétés, tapez le nom du calque.
<h1 id="pour-associer-une-action-texte-du-calque">Pour associer une action Texte du calque :</h1>
1 Sélectionnez un objet et ouvre le panneau Comportements.
2 Cliques sur le bouton plus (+) etCHOisissez l'action Texte d'un calque dans le menu contextuel Actions.
3 Dans la boîte de dialogue qui s'affiche, choisissez le cadre cible dans le menu déroulant Calque.
4 Tapez un message dans le champ Nouveau HTML et cliquez sur OK.
5 Vérifiez que l'évenement par défaut est bien l'évenement déséré. Si ce n'est pas le cas, Sélectionnez-en un autre dans le menu déroulant.
Si les événements désirés n'apparaissent pas dans la liste, changez de navigateur cible dans le menu déroulant Afficher les événements pour.
<h1 id="texte-de-la-barre-detat">Texte de la barre d'etat</h1>
L'action Texte de la barre d'etat affiche un message dans la barre d'etat, dans la partie inférieure gauche de la fénêtre du navigateur. Par exemple, vous pouvez utiliser cette action pour déscrire la destination d'un lien dans la barre d'etat, au lieu d'afficher l'URL associée. Pour voir un exemple de message d'etat, amenez la souris sur n'importequel bouton de navigation dans les pages de l'aide de Dreamweaver. Cependant, il arrive frequentlyment que les utilisateurs ignorent les messages de la barre d'etat (certains navigateurs ne prennt pas en charge la définition du texte de la barre d'etat) ; si votre message est important, pensez à l'afficher sous la forme d'un message contextual ou comme texte d'un calque.
Vou puez incorperer au texte des appel de fonction, propriétés, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, place-la entre des accolades \\ . Pour afficher une accolade, faites-la preceder d'une barre oblique inversée .
<h1 id="example-4">Example</h1>
L'URL de cette page est {window.location} et nous sommes le {new Date().}
<h1 id="pour-utiliser-laction-texte-de-la-barre-detat">Pour utiliser l'action Texte de la barre d'etat :</h1>
1 Sélectionnez un objet et ouvre le panneau Comportements.
2 Cliquez sur le bouton plus (+) etCHOisissez l'action Texte de la barre d'etat dans le menu contextualuel Actions.
3 Dans la boîte de dialogue Texte de la barre d'etat, tapez un message dans le champ Message. Utilisez un message concis. Le navigateur tronquera le message s'il est trop long pour la barre d'etat.
4 Cliquez sur OK.
5 Verifiez que l'évenement par défaut est bien l'évenement désire.
Si ce n'est pas le cas, selectionnez-en un autre dans le menu dérounant. Si les événements désirés ne sont pas répertoriés, changez de navigateur cible dans le menu dérounant Afficher les événements pour.
<h1 id="texte-dun-champ-de-texte">Texte d'un champ de texte</h1>
L'action Texte d'un champ texte remplace le contenu d'un champ texte de formulaire par le contenu indiqué.
Vou puez incorperer au texte des appeals 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, faites-la preceder d'une barre oblique inversée (\{\}).
<h1 id="example-5">Example</h1>
L'URL de cette page est {window.location} et nous sommes le {new Date().}
<h1 id="pour-creer-un-champ-texte-nommé">Pour creer un champ texte nommé :</h1>
1 Choisissez Insertion > Objects de formulaire > Champ de texte.
Si Dreamweaver vous invite à ajouter une balise de-formulaire, cliquez sur Oui. Pour plus d'informations, voir « Création de formulaires interactifs», page 613.
2 Dans l'inspecteur de propriétés, tapez le nom du champ texte. Veiliez à 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).
<h1 id="pour-utiliser-laction-texte-dun-champ-texte">Pour utiliser l'action Texte d'un champ texte :</h1>
1 Sélectionnez un objet et ouvre le panneau Comportements.
2 Cliquez sur le bouton plus (+) etCHOisissez l'action Texte d'un champ texte dans le menu contextuel.
3 Dans la boîte de dialogue qui s'affiche,CHOISISEZ le champ texte cible dans le menu déroulant Champ texte.
4 Tapez le nouveau contenu dans le champ Nouveau texte et cliquez sur OK.
5 Vérifiez que l'évenement par défaut est bien l'évenement déséré. Si ce n'est pas le cas, Sélectionnez-en un autre dans le menu déroulant.
Si les événements désirés n'apparaissent pas dans la liste, changez de navigateur cible dans le menu déroulant Afficher les événements pour.
<h1 id="afficher-masquer-les-calques">Afficher-masquer les calques</h1>
L'action Afficher-masquer les calques affiche, masque ou rétablit la visibilité par défaut d'un ou plusieurs calques. Cette action permet d'afficher des informations en fonction des interactions de l'utilisateur avec la page. Par exemple, lorsque le curseur passse sur l'image d'une plante, vous pouvez afficher un calque comportant des détails sur le climat idéal de la plante, l'ensoleillement dont elle a besoin, sa taille adulte, etc.
L'action Afficher-masquer les calques sert également à créé un calque de préchargement, c'est-à-dire un grand calque qui cachera d'abord le contenu de la page, puis disparaître à la fin du chargement de tous les éléments de la page.
<h1 id="pour-utiliser-laction-afficher-masquer-les-calques">Pour utiliser l'action Afficher-masquer les calques :</h1>
1 Choisissez Insertion > Calque ou cliquez sur le bouton Calque de la barre Insertion, puis dessinez un calque dans la fenetre de document.
Répétez cette étape pour creer des calques supplémentaires.
2 Cliquez n'importe ou dans la fenetre de document pour déslectionner le calque, puis ouvre le panneau Comportements.
3 Cliquez sur le bouton plus (+) etCHOisissez Afficher-Masquer les calques dans le menu contextuel Actions.
Si cette action est indisponible, vous avez probablement seLECTIONné un calque. Etant donné que les calques ne prennt pas en compte les événements dans les navigateurs 4.0, vous devez seLECTIONner un autre objet (la balise body ou un lien (balise a) par exemple) ou replacer le navigateur cible par IE 4.0 dans le menu déroulant Afficher les événements pour.
4 Sélectionné le calque dont vous pouze modifier la visibilité dans la liste Calques nommés.
5 Cliquez sur Afficher pour afficher le calque, Masquer pour le masquer ou Par Default pour rétabrir la visibilité par défaut du calque.
6 Répétez les étapes 4 et 5 pour tous les autres calques dont vous voulez modifier la visibilité (vous pouvez modifier la visibilité des calques multiples avec un comportement unique).
7 Cliquez sur OK.
8 Verifiez que l'évenement par défaut est bien l'évenement déséré.
Si ce n'est pas le cas, selectionnez-en un autre dans le menu dérounant. Si les événements désirés ne sont pas repertoriés, changez de navigateur cible dans le menu dérounant Afficher les événements pour.
Dans la fenêtre d'un navigateur Netscape Navigator, les dimensions des calques peuvent être modifiées en fonction de leur content. Pour garder la maitrise des dimensions du calque, ajoutez-lui du texte ou des images ou définissez des valeurs de découpe.
<h1 id="pour-creer-un-calque-de-prechargement">Pour creer un calque de prechargeMENT :</h1>
1 Cliquez sur le bouton Dessiner un calque dans la catégorie Commun de la barre Insertion, puis dessinez un grand calque dans le mode Creation de la fenêtre de document.
Assurez-vous que le calque recouvre bien tout le contenu de la page.
2 Dans le panneau Calques, faites glisser le nom du calque vers le haut de la liste pour indiquer qu'il doit se trouver au sommet dans l'ordre de superposition.
3 Sélectionnez le calque s'il ne l'est pas et nommez-le chargement, en utilisant le champ le plus à gauche dans l'inspecteur de propriétés de calque.
4 Tout en gardant le calque seLECTIONné, définisseez dans l'inspecteur de propriétés sa couleur d'arrière-plan à la même valeur que l'arrière-plan de la page.
5 Cliquez à l'intérieur du calque (qui doit maintainant cacher le reste du contenu de la page) et tapez un message si vous désirez.
Par exemple, « Merci d'attendre la fin du chargement » ou « Chargement en cours... » sont des messages informatifs qui évient à l'utilisateur de croire que la page est vide.
6 Cliquez sur la balise <body> dans le selecteur de balises, situé dans l'angle inférieur gauche de la fenêtre de document.
7 Dans le panneau Comportements, selectionnez Afficher-Masquer les calques dans le menu contextualuel Actions.
8 Sélectionnez le calque appelé chargement dans la liste Calques nommés.
9 Cliquez sur Masquer.
10 Cliquez sur OK.
11 Assurez-vous que l'événement figurant dans la liste des comportements à côte de l'action Afficher-Masquer les calques est onLoad (si ce n'est pas le cas, Sélectionnez l'événement et cliquez sur le triangle orienté vers le bas qui apparait entre l'événement et l'action ; désissez onLoad dans la liste d'événements du menu contextual).
<h1 id="afficher-le-menu-contextuel">Afficher le menu contextuel</h1>
Utilisez le comportement Afficher le menu contextual pour creer ou modifier un menu contextual Dreamweaver ou pour ouvrir et modifier un menu contextual Fireworks inséré dans un document Dreamweaver.
Définisse les options dans la boîte de dialogue Afficher le menu contextual pour créé un menu contextual 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 contextual.
Remarque : you veez cliquer sur le bouton Modifier de linspecteur de propriétés Dreamweaver pour modifier les images dans un menu contextual basé sur des images Fireworks. Toutefois, vous pouvez exéçuter la commande Afficher le menu contextual pour modifier le texte d'un menu contextual basé sur des images. Pour plus d'informations sur la modification des images dans Fireworks MX, voir Chapitre 21, « Intégration de Dreamweaver à d'autres applications, », page 321.
Pour afficher un menu contextuel dans un document, vous doivent ouvrir ce dernier dans la fenêtre d'un navigateur, puis placer le pointeur sur l'image ou le lien de déclenchement.
<h1 id="pour-utiliser-laction-afficher-le-menu-contextuel">Pour utiliser l'action Afficher le menu contextuel :</h1>
1 Sélectionnez un objet à associer au comportement et ouvre le panneau Comportements (Maj+F3).
2 Cliques sur le bouton plus (+) etCHOisissez Afficher le menu contextual dans le menu contextual Actions.
3 Dans la boîte de dialogue Afficher le menu contextual qu i s'affiche, utilisez les onglets suivants pour définir les options du menu contextual :
Sommaire permet de définir le nom, la structure, l'URL et la cible des éléments de menu individuels.
Apparance permit de définir l'apparace de l'Etat En haut et de l'Etat Survolé du menu et de définir la police du texte de l'objet de menu.
Avance permet de définir les propriétés des cellules du menu. Par exemple, vous pouvez définir la largeur et la hauteur des cellules, la couleur des cellules ou des cordures, le retrait du texte et le délambda entre le moment où l'utilisateur place le pointeur sur le déclencheur et l' apparition du menu correspondant.
Position permet de définir l'emplacement du menu par rapport à l'image ou au lien de déclenchement.
<h1 id="ajout-suppression-et-modification-de-lordre-des-éléments-du-menu-contextuel">Ajout, suppression et modification de l'ordre des éléments du menu contextuel</h1>
Vou puez utilise l'onglet Sommaire de la boite de dialogue Afficher le menu contextual pour creer des éléments de menu. Cet ongel permet egalement de supprimer des éléments ou de modifier l'ordre dans lequel ils apparaissent dans un menu.
<h1 id="pour-ajouter-des-éléments-de-menu-contextual">Pour ajouter des éléments de menu contextual :</h1>
1 Dans l'onglet Sommaire, creez un élément de menu contextuel en suivant comme suit :
Dans le champ Texte, Sélectionnez le texte par défaut (Nouvel élément), puis tapez le texte qui doit apparaitre dans le menu contextuel.
2 Si vous le souhaitez, définissez des options complémentaires :
Si vous voulez que l'objet de menu ouvre un autre filchier lorsque vous cliquez dessus, dans le champ Lien, tapez le chemin d'accès au filchier ou cliquez sur l'icone Dossier et scélectionnez le document à ouvrir.
Si vous souhaitez définiir l'endetroit où le document va s'ouvrir (une nouvelle fenêtre ou un cadre donné, par exemple),CHOISSEZ L'emplacement de votrechoix dans le menu déroulant Cible.
Remarque: si l'image que vous pouze définir comme cible ne figure pas dans le menu dérounant Cible, fermez la boîte de dialogue Afficher le menu contextualuel puis, dans la fenêtre de document, Sélectionnez un cadre et attribuez-lui un nom.
3 Cliquez sur le bouton plus (+) pour ajouter des entrées à la liste d'aperçu Afficher le menu contextualuel.
Ensuite, 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 contextual pour définir des options supplémentaires.
<h1 id="pour-creer-un-élément-de-sous-menu">Pour creer un élément de sous-menu :</h1>
Dans la liste Afficher le menu contextual, selectionnez l'objet devant apparaitre dans un sousmenu, puis procédez de l'une des manières suivantes:
- Pourmettre un element de la liste en retrait,cliquez sur le bouton Element indenté.
- Pour supprimer le retrait, cliquez sur le bouton Element en retrait négatif.
Remarque: l'élément de menu principal d'une liste ne peut pas été définie comme élément de sous-menu.
<h1 id="pour-modifier-lordre-des-éléments-dans-un-menu">Pour modifier l'ordre des éléments dans un menu :</h1>
Dans la liste Afficher le menu contextual, selectionnez l'élément que vous voulez déplacer, puis cliquez sur la flèche haut ou bas pour le placer à l'endroit souhaité.
<h1 id="pour-supprimer-un-élément-du-menu">Pour supprimer un élément du menu :</h1>
1 Dans l'onglet Sommaire, selectionnez l'entrée de menu que vous voulez supprimer de la liste Afficher le menu contextualuel.
2 Cliquez sur le bouton moins (-).
<h1 id="définition-de-lapparce-dun-menu-contextuel">Définition de l'apparce d'un menu contextuel</h1>
Lorsque vous avez créé les éléments de menu, cliquez sur l'onglet Apparance de la boite de dialogue Afficher le menu contextual pour définir l'orientation, ainsi que les attributs de police et d'etat des boutons du menu contextual.
Remarque: le volet d'aperçu de l'onglet Apparance affiche un rendu approximatif des options définies dans cet onglet.
<h1 id="pour-définit-lapparance-dun-menu-contextuel">Pour définit l'apparance d'un menu contextuel :</h1>
1 Dans le menu dérouulant situé en haut de l'onglet Apparance,CHOISSEZ Menu vertical ou Menu horizontal pour définir l'orientation du menu.
2 Définissez les options de formatage du texte :
Dans le menu dérouulant Police, Sélectionnez la police que vous souhaitez appliquer aux éléments de menu.
Remarque : si la police que vous souhaitez utiliser ne figure pas dans la liste, selectionnez l'option Modifier la liste des polices pour ajouter la police de votre choix à la liste. Choisissez une police que les visiteurs du site sont susceptibles d'utiliser.
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'objet de menu.
3 Dans les zones Etat En haut et Etat Survolé, utilisez le sélectionur de couleur pour définir les couleurs du texte et des cellules des boutons d'objet de menu.
4 Ensuite, cliquez sur OK ou selectionnez un autre onglet Afficher le menu contextual pour définir des options supplémentaires..
<h1 id="définition-des-options-dapparce-avancées">Définition des options d'apparce avancées</h1>
Utilisez les options de l'onglet Avancé pour spécifique d'autres attributs pour les cellules de menu. Par exemple, vous pouvez définir la largeur, la hauteur, l'espacement ou le remplissage des cellules du bouton de menu, le retrait du texte et les attributs de bordure.
Pour définiir les attributs de formatage avancés d'un menu contextuel :
1 Cliquez sur l'onglet Avancé, puis définissez les options que vous souhaitez appliquer aux éléments de menu :
Largeur des cellules définit une largeur spécifique en pixels pour les boutons de menu. Cette largeur est automatiquement définie en fonction de l'objet le plus large. Pour l'augmenter, selectionnez Pixels dans le menu déroulant et entrez une valeur supérieure à celle qui figure dans la zone de texte Largeur des cellules.
Hauteur des cellules définit une hauteur spécifique en pixels pour les boutons de menu. Pour l'augmenter, selectionnez Pixels dans le menu dérouulant et entrez une valeur supérieure à celle qui figure dans la zone de texte Hauteur des cellules.
Marge entre les cellules indique le nombre de pixels qui sépare le contenu d'une cellule et ses limites.
Espacement entre les cellules indique le nombre de pixels qui sépare des cellules adjacentes.
Retrait du texte permet de spécifique le retrait du texte en pixels dans la cellule.
Délambda dénuifinit le délambda entre le moment où l'utilisateur place le pointeur sur l'image ou le lien de déclenchement et l' apparition du menu correspondant. Les valeurs étant en millisecond, le paramètre par défaut 1000 équivaut à 1 seconde. Ajoutez 000 pour chaque seconde de délambda supplémentaire ; par exemple, tapez 3000 pour définir un délambda de 3 secondes.
Bordures déroulantes détermine si une cordure apparait ou non autour des éléments du menu. Si vous souhaitez ajuster une cordure, assurez-vous que la case à cocher Afficher les cordures est activée.
Largeur de la cordure définit la largeur de la cordure en pixels.
Ombre, Couleur de la cordure et Mettre en surbrillance permettent de selectionner une couleur de cordure. Les options d'ombre et de mise en surbrillance n'apparaissent pas en mode d'aperçu.
2 Lorsque vous avez defini les options d'apparente avancées, cliquez sur OK ou seLECTIONnez un autre onglet Afficher le menu contextual pour définir des options supplémentaires.
<h1 id="définition-de-la-position-dun-menu-contextual-dans-un-document">Définition de la position d'un menu contextual dans un document</h1>
Utilisez les options de position pour définir l'emplacement de l'affichage du menu par rapport à l'image ou au lien de déclenchement. Vous pouvez également définir si le menu doit être masqué ou non lorsque l'utilisateur éloigne le pointeur du déclencheur.
Pour définiR les options de position du menu contextual :
1 Dans la boîte de dialogue Afficher le menu contextual, cliquez sur l'onglet Position.
2 Définisse la position du menu contextuel en utilisant l'une des méthodes suivantes :
- Sélectionnéz l'une des options prédéfinies.
- Définissez des coordonnées de position personalisées en tapant un nombre dans la zone de texte X (coordonnée horizontally) ou dans la zone de texte Y (coordonnée verticale). L'angle supérieur gauche du menu définit le point initial des coordonnées.
3 Pour masquer le menu contextuel lorsque le pointeur ne le survole pas, assurez-vous que l'option Masquer le menu suite à l'évenement onMouseOut est activée. Désélectionnez cette option si vous voulez que le menu reste affché.
4 Lorsque vous avez creé ou modifie le menu contextual, cliquez sur OK.
<h1 id="modification-dun-menu-contextuel">Modification d'un menu contextuel</h1>
Le comportement Afficher le menu contextualu permit de modifier ou demettre a jour le contenu d'un menu contextualu. Vous pouze ajouter, supprimer ou modifier les éléments de menu et définir la position d'un menu par rapport à l'image ou au lien de déclenchement.
<h1 id="pour-ouvrir-un-menu-contextual-html">Pour ouvrir un menu contextual HTML :</h1>
1 Dans le document Dreamweaver, selectionnez le lien ou l'image qui déclenché le menu contextualuel.
2 Le cas échéant, ouvre le panneau Comportements (Maj+F3) puis, dans la liste Actions, double-cliquez sur Afficher le menu contextualuel.
La boîte de dialogue Afficher le menu contextuel apparait.
3 Modifiez le menu contextual comme bon vous semble.
4 Lorsque vous avez modifie le menu contextualuel, cliquez sur OK.
Pour plus d'informations sur la définition des options de menu contextualuel, voir « Afficher le menu contextualuel », page 393.
<h1 id="intervertir-une-image">Intervertir une image</h1>
Cette action remplace une image par une autre, en modifient l'attribut src de la balise img. Utilisez cette action pour creer des substitutions de boutons et autres effets sur des images (y compris la substitution de plusieurs images à la fois). L'insertion d'une image survolée ajoute automatiquement à votre page un comportement Intervertir une image.
Remarque : seul l'attribut s r c étant affecté par cette action, l'image de substitution doit en principe avoir les mêmes dimensions (hauteur et largeur) que l'original. Sans cela, l'image interverteie apparaitrait déformée (compactee ou élargie) par rapport à l'original.
<h1 id="pour-utiliser-laction-intervertir-une-image">Pour utiliser l'action Intervertir une image :</h1>
1 Choisissez Insertion > Image ou cliquez sur le bouton Image de la barre Insertion pour insere une image.
2 Dans l'inspecteur de propriétés, indiquez un nom pour l'image dans la zone de texte située à l'extrème gauche.
L'action Intervertir une image fonctionnera même si vous ne donnez pas de nombres à vos images ; en effet, les images sans nom en recoivent automatiquement un lorsque vous associez de comportement à un objet. Toutefois, il vous sera plus facile de désigner les images proposées dans la boîte de dialogue Intervertir une image si vous avez vous-même attribué un nom à ces images.
3 Repetez 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 pouze remplacer) et ouvre le panneau Comportements.
5 Cliquez sur le bouton plus (+) etCHOisissez Intervertir une image dans le menu contextual Actions.
6 Sélectionnéz l'image dont vous voulez modifier la source dans la liste Images.
7 Cliques sur Parcourir pour selectionner 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 à.
8 Répétez les étapes 6 et 7 si vous désirez ajouter d'autres images à modifier. Utilisez la même action Intervertir l'image pour toutes les images que vous pouze modifier simultanément ; dans le cas contraire, l'action correspondante Restaurer l'image intervertie ne les restaurerait pas toutes.
9 Sélectionnéz l'options Précharger les images pour charger les nouvelles images dans la mémoire cache du navigateur lors du chargement de la page.
Cela évite à l'utilisateur d'attendre que ces images soient chargées, lorsqu'un événement déclenché leur apparition.
10 Cliquez sur OK.
11 Verifiez que l'évenement par défaut est bien l'évenement désiré.
Si ce n'est pas le cas, selectionnez-en un autre dans le menu dérounant. Si les événements désirs ne sont pas repertoriés, changez de navigateur cible dans le menu dérounant Afficher les événements pour.
<h1 id="restaurer-limage-interverte">Restaurer l'image interverte</h1>
L'action Restaurer l'image intervertie restaure la dernière interversion d'images à son état antérieur. Elle est automatiquement ajoutée lorsque vous associez l'action Intervertir une image à un objet ; en principe, si vous avez laissé cette option activée en associant l'action Intervertir une image, vous n'avez pas besoin de l'utiliser manuellement.
<h1 id="atteindre-limage-du-scenario">Atteindre l'image du scenario</h1>
Cette action amène la « tête de lecture » sur l'image indiquée. Vous pouze l'utiliser dans le canal Comportements du panneau Scenarios pour reproductive en boucle certaines parties du scenario, pour creer un lien ou un bouton Rembobiner ou pour permettre à l'utilisateur de passer directement à d'autres parties de l'animation.
<h1 id="pour-utiliser-laction-atteindre-limage-du-scenario">Pour utiliser l'action Atteindre l'image du scenario :</h1>
1 Choisissez Fenêtre > Scénarios pour ouvrir le panneau Scénarios. Voitre document doit composer un scenario.
Si vous ne VOYZ pas de barres d'animation violettes dans le panneau Scenarios, votre document ne contient pas de scenario. Voir « Déplacement d'un calque à l'aide d'une animation de scenario», page 415.
2 Sélectionnez un objet auquel associé le comportement.
Pour associier le comportement à une image du scenario, cliquez sur l'image désirée dans le canal Comportements.
3 Ouvrez le panneau Comportements
4 Cliquez sur le bouton plus (+) et choisissez Scenarios > Atteindre l'image du scenario dans le menu contextual Actions (si cette action s'affiche en grisé, votre document ne contient aucun scenario).
5 Choisissez un scenario dans le menu déroulant Scénario.
6 Indiquez un numero d'image dans la zone de texte Atteindre l'image.
7 Si vous ajoutez cette action au canal de comportement d'un scenario et désirez qu'une partie du scenario soit executée en boucle, indiquez le nombre de répetitions de ce segment dans la zone de texte Boucle.
Cette zone de texte doit rester vierge si vous n'associez pas l'action Atteindre l'image du scenario à une image située dans un scenario.
8 Cliquez sur OK.
9 Verifiez que l'évenement par défaut est bien l'évenement désiré.
Si ce n'est pas le cas, selectionnez-en un autre dans le menu déroulant. Si les événements désirés ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant Afficher les événements pour.
<h1 id="lire-le-scenario-et-arrête-le-scenario">Lire le scenario et Arrête le scenario</h1>
Utilisez les actions Jouer le scenario et Arrête le scenario pour permettre aux utilisateurs d'executer et d'arrêter un scenario en cliquant sur un lien ou un bouton ou pour démarrer et arrête un scenario automatique lors du survol d'un objet (lien, image, etc.). L'action Jouer le scenario est automatique associée à la balise body avec l'évenement onLoad lorsque vous sélectionnez l'options Lecture auto dans le panneau Scenarios.
<h1 id="pour-utiliser-les-actions-jouer-le-scenario-et-arrête-le-scenario">Pour utiliser les actions Jouer le scenario et Arrête le scenario :</h1>
1 Choisissez Fenêtre > Scénarios pour ouvrir le panneau Scénarios. Voitre document doit composer un scenario.
Si vous ne VOYZ pas de barres d'animation violettes dans le panneau Scénarios, votre document ne contient pas de scenario. Voir « Déplacement d'un calque à l'aide d'une animation de scenario », page 415.
2 Sélectionnez un objet et ouvre le panneau Comportements.
3 Cliquez sur le bouton plus (+) etCHOISEZ l'action Jouer le scenario ou Arreter le scenario dans le menu contextual.
4 Sélectionnez le scenario concerné ouCHOISSEZ d'arrête tous les scénarios dans le menu contextualuel.
5 Cliquez sur OK.
6 Vérifiez que l'évenement par défaut est bien l'évenement désiré.
Si ce n'est pas le cas, selectionnez-en un autre dans le menu déroulant. Si les événements désirés ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant Afficher les événements pour.
<h1 id="verifier-le-formulaire">Verifier le formulaire</h1>
Cette action teste le contenu des champs texte indiqués pour vérifier que l'utilitaire a tape le type de données correct. Associez cette action à des champs de texte individuels à l'aide de l'évenement onBlur pour valider ces champs au fur et à mesure que l'utilitaire remplit le formulaire ou associez-le au formulaire à l'aide de l'évenement onSubmit pour évaluer divers champs simultanément lorsque l'utilitaire clique sur le bouton d'envoi. Associiez cette action au formulaire pour éviter qu'il ne soit envoyé au serveur si l'un des champs de texte contient des données non valides.
<h1 id="pour-utiliser-laction-validator-le-formulaire">Pour utiliser l'action Validator le formulaire :</h1>
1 Choisissez Insertion > Formulaire ou cliquez sur le bouton Formulaire de la barre Insertion pour insérer un formulaire.
2 Pour insérer un champ texte,CHOISSEZ Insertion > Objects de formualeire > 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 texte.
3 Procedez de l'une des manières suivantes:
- Pour valider les champs individuellement au fur et à mesure que l'utilisateur replit le formulaire, Sélectionné un champ texte et désissez 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 l'angle inférieur gauche de la fenêtre de document, puis choisissez Fenêtre > Comportements.
4 Sélectionnez Valider le formulaire dans le menu contextuel Actions.
5 Procedez de l'une des manieres suivantes:
- Si vous validez des champs individuellement, Sélectionnez, dans la liste Champs nommés, le champ que vous avez sélectionné dans la fenêtre de document.
- Si vous validez plusieurs champs à la fois, Sélectionnez un champ texte dans la liste Champs nommés.
6 Activez l'option Necessaire si le champ doit obligatoirement contenir des données.
7 Dans la zone Accepter,CHOISSEZ parmi les options suivantes :
- Utilisez l'options Tout si le champ doit être rempli, sans pour autant contérer un type particulier de données (si l'option Nécessaire n'a pas été activée, cette option n'a aucun contrôle, puisque le résultat sera accepté dans tous les cas, comme si l'action Valider le formulaire n'était pas associée au champ).
- Utilisez l'option Adresse e-mail pour vérifier que le champ contient un symbole @.
- Utilisez Nombre pour vérifier que le champ ne contient que des caractères numériques.
- Utilisez Nombre de... à pour vérifier que le champ ne contient que des valeurs numériques comprises dans la plage indiquée.
8 Si vous validez plusieurs champs, repeteze 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'évenement on Submit apparaît automatiquement dans le menu déroulant Evénements.
10 Si vous valida des champs individuellement, vérifie que l'évenement par défaut est bien onBlur ou onChange.
Si ce n'est pas les cas, Sélectionné onBlur ou onChange dans le menu déroulant. Ces deux événements déclenchent l'action 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'évenement onBlur est préféable si vous avez spécifique que ce champ doit être rempli.
<h1 id="chapitre-25-2">CHAPITRE 25</h1>
<h1 id="animation-de-calques">Animation de calques</h1>
Un calque est un élément de page HTML que vous pouvez placer à l'endroit de votre choix sur votre page. Les calques peuvent compter du texte, des images ou tout autre contenu à placer au sein d'un document HTML.
Dreamweaver yous permit de placer et d'animer des calques sans aucun codage JavaScript ou HTML. Yous pouze placer les calques devant ou derriere d'autres calques, masquer certains d'entre eux et en monrer d'autres ou encore déplacer les calques à l'écran. Vous pouze placer une image d'arriere-plan dans un calque, puis placer un deuxième calque contenant du texte avec un arriere-plan transparent devant ce dernier. Il est aussi possible d'animer des calques avec un fondu avant et arriere.
Les calques offrent une grande souplesse dans le placement de contenu. Les navigateurs Web antérieurs à Microsoft Internet Explorer 4.0 et Netscape Navigator 4.0 ne les affichent cependant pas et les navigateurs de la version 4 ne les affichent pas toujours de la même façon. Pour que votre page Web puisse être visualisée par tous les utilisateurs, vous pouvez effectuer votre mise en page avec des calques, puis les convertir en tableaux. Pour plus d'informations, voir « Utilisation de tableaux et de calques pour la mise en forme», page 411. Néanmoins, si vous pensez que les visiteurs de votre site disposéreront de navigateurs plus récents, vous pouvez effectuer vos mises en page en utilisant uniquement des calques, sans les convertir en tableaux.
Remarque : si vous n'avez pas l'habitude d'utiliser des calques et CSS, nous vous recommendons d'utiliser des tableaux ou le mode Mise en forme pour la mise en page (voir « Présentation de contenu à l'aide de tableaux », page 237 et « Le mode de Mise en forme », page 253). Le mode Mise en forme facilité la conception de la mise en page en utilisant des tableaux comme structure sous-jacente.
Ce chapitre contient les sections suivantes :
- « Code HTML pour les calques», page 402
- « Création de calques sur une page», page 403
- « Imbrication des calques», page 405
- « Manipulation des calques», page 406
- « Ajout de contenu dans les calques», page 408
- « Affichage et définition des propriétés du calque», page 408
- « Utilisation de tableaux et de calques pour la mise en forme », page 411
- « Animation de calques», page 413
- « Animation de calques à l'aide d'actions de comportement», page 421
<h1 id="code-html-pour-les-calques">Code HTML pour les calques</h1>
Lorsque vous placez un calque dans un document, Dreamweaver insère la balise HTML correspondant à ce calque dans votre code. Selon vos préférences, Dreamweaver peut utiliser la balise div ou la balise span pour vos calques. Par défaut, Dreamweaver creée des calques en utilisant la balise div.
Remarque : deux autres balises peuvent etre utilisées pour creer des calques : layer et ilayer. Cependant, seul Netscape Navigator 4 prend ces balises en charge, contrairement à Internet Explorer et aux versions les plus récentes de Netscape. Dreamweaver reconnait les balises layer et ilayer, mais il ne s'en sert pas pour creer des calques.
Pour changer la balise par défaut, voir « Définition des préférences de calque», page 404.
Les balises div et span se distinguent par le fait que les navigateurs qui ne prennten pas en charge les calques placent des sauts de ligne supplémentaires avant et après la balise div ; la balise div est un élément au niveau du bloc, alors que la balise span est un élément incorpore. En général, dans les navigateurs qui ne prennten pas les calques en charge, il est préféable que le contenu de ces derniers apparaisse dans un paragraphe indépendant ; c'est pourquoit il est conseillé d'utiliser la balise div只不过 que la balise span. Pour améliorer la lisibilité du contenu dans les navigateurs plus anciens, il est important de bien placer le code du calque.
Le code qui définit le calque peut se trouver n'importe où dans le fischier HTML. Lorsque vous dessinEZ un calque dans Dreamweaver, il apparait à l'endetR du dessin, mais Dreamweaver insere le code du calque au début de la page, juste après la balise body (si vous utilisez la commande Insertion > Calque au lieu de dessiner un calque, le code du calque est insere à l'emplacement du curseur). Si vous creez un calque imbrique, Dreamweaver insere le code au sein de la balise qui définit le calque parent.
Remarque : quelle que soit la balise utilisée, les versions d'Internet Explorer et de Netscape Navigator antérieures à la version 4.0 affichent le contentu des calques, mais ne les positionnent pas. Le contentu du calque apparait a l'emplacement de son code sur la page ; par exemple, si le code se trouve en début de page, le contentu du calque apparait aussi en début de page dans les navigateurs qui ne prennt pas les calques en charge.
Ce qui suit est un échantillon de code HTML pour un calque :
<pre><code class="language-txt"><div id="Layer1" style="position: absolute; visibility: inherit; width:200px; height:115px; z-index:1">
</div>
</code></pre>
Ce qui suit est un échantillon de code HTML pour un calque imbriqué dans un autre calque :
<pre><code class="language-html"><div id="Parent" style="position:absolute; left:56px; top:54px; width:124px; height:158px; z-index:1;">
Contenu du calque parent.
<div id="Nested" style="position:absolute; left:97px; top:114px; width:54px; height:69px; z-index:1;">
Contenu du calque imbriqué.</div>
</div>
</code></pre>
Voupez definir les propriétés des calques de votre page, y compris les coordonnées x et y , l'index z (également appelé ordre de superposition) et la visibilité. Pour plus d'informations, voir « Affichage et définition des propriétés du calque», page 408.
<h1 id="creation-de-calques-sur-une-page">Creation de calques sur une page</h1>
Dreamweaver yous permit de creer facilement des calques sur voitre page et de les positionner avec precision.
Pour creer un calque, procedez de l'une des manieres suivantes:
- Pour dessiner un calque, cliquez sur le bouton Dessiner un calque de la barre Insertion, puis faites glisser la souris dans le mode Creation de la fenetre de document.
- Pour insérer le code d'un calque à un endroit particulier du document, placez le curseur dans la fenêtre de document, puis désissez Insertion > Calque.
Lorsque les éléments invisibles sont affichés, un marqueur de calque apparait dans le mode Création chaque fois que vous placez un calque sur la page. Si les marqueurs de calques ne sont pas visibles et que vous voulez les afficher,CHOISSEZ AFFICHAGE >Assistances visuelles >
Éléments invisibles.
Remarque : lorsque l'option Éléments invisibles est activée, les éléments de votre page peuvent sembler se décaler hors de la page. Cependant, les éléments invisibles n'apparaissent pas dans les navigateurs, ce qui signifie que tous les éléments visibles apparaissent au bon emplacement lorsque vous visualisez votre page dans un navigateur.
<h1 id="pour-dessiner-plusieurs-calques-à-la-suite">Pour dessiner plusieurs calques à la suite :</h1>
1 Cliquez sur le bouton Dessiner un calque de la barre Insertion.
2 Dessinez les calques en maintainant la touche Ctrl (Windows) ou Commande (Macintosh) enforcée tout en faisant glisser la souris.
Vou puez continuer à tracer des calques tant que vous n'avoz pas relâché les touches Ctrl ou Commande.
<h1 id="rubriques-connexes-15">Rubriques connexes</h1>
« Panneau Calques », page 403
« Définition des préférences de calque», page 404
« Comment empêcher le chevauchement des calques», page 412
<h1 id="panneau-calques">Panneau Calques</h1>
Le panneau Calques vous permet deGERER les calques dans voitre document. Pour l'ouvrir, choisissez Fenetre Autres Calques. Les calques sont affiches sous la forme d'une liste de noms, dans l'ordre de l'index Z; le premier calque creeed apparait en bas de la liste et le dernier calque creed apparait en haut de la liste. Les calques imbriques sont affiches comme des noms connectés a des calques parents. Cliquez sur le bouton plus (+) ou moins (-) (Windows) ou sur la flche d'agrandissement (Macintosh) pour afficher ou masquer les calques imbriques.
Utilisez le panneau Calques pour empêcher les calques de se chevaucher, pour en modifier la visibilité, pour les imbriquer ou les superposer et pour en selectionner un ou plusieurs.
<h1 id="rubriques-connexes-16">Rubriques connexes</h1>
« Création de calques sur une page», page 403
« Définition des préférences de calque », page 404
« Imbrication des calques », page 405
« Sélection des calques », page 406
« Affichage et définition des propriétés du calque », page 408
« Modification de l'ordre de superposition des calques », page 410
« Modification de la visibilité des calques », page 410
« Comment empêcher le chevauchement des calques », page 412
<h1 id="définition-des-préférences-de-calque">Définition des préférences de calque</h1>
Utilisez la catégorie Calques dans la boîte de dialogue Preférences pour indiquer les paramètres par défaut des nouveaux calques créés.
<h1 id="pour-afficher-ou-définir-les-préférences-de-calque">Pour afficher ou définir les préférences de calque :</h1>
1 Choisissez Edition > Préférences ou Dreamweaver MX > Préférences (Mac OS X).
2 Sélectionnéz la catégorie Calques.
3 Apportez les modifications de votrechoix.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
4 Cliquez sur OK pour fermer la boite de dialogue.
<h1 id="rubriques-connexes-17">Rubriques connexes</h1>
« Imbrication des calques », page 405
« Sélection des calques », page 406
« Modification de l'ordre de superposition des calques », page 410
« Modification de la visibilité des calques », page 410
« Comment empêcher le chevauchement des calques», page 412
<h1 id="imbrication-des-calques">Imbrication des calques</h1>
Un calque imbriqué est un calque dont le code est contenu dans un autre calque. L'imbrication est souvent utilisée pour regrouper des calques. Un calque imbriqué se déplace avec son calque parent et peut être configuré pour hériter de la visibilité de son parent.
Pour creer un calque imbrique, inserez ou dessinez un calque à l'intérieur d'un autre calque ou utilisez le panneau Calques. Pour forcer l'imbrication automatique des calques lorsque vous dessinez un calque à partir d'un autre calque, selectionnez l'options Imbrication dans les préférences de calque. Pour plus d'informations, voir « Définition des préférences de calque », page 404.
Remarque : utilisez l'option de correction du redimensionnement dans Netscape lorsque vous employez des calques imbriqués sur votre page (Commandes > Ajouter/Supprimer correction du redimensionnement dans Netscape). Si vous n'utilise pas cette option, les calques changent d'emplacement lorsqu'un visiter re dimensionne la fenetre du navigateur dans les versions 4 de Netscape Navigator. Vous pouvez définir une préférence de sorte que l'option de correction du redimensionnement de Netscape soit toujours insérée ; pour plus d'informations, voir l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver).
Pour creer un calque imbrique, procedez de l'une des manieres suivantes :
- Pour insérer un calque imbriqué, placez le curseur à l'intérieur d'un calque existant et choisissez Insertion > Calque.
- Pour dessiner un calque imbriqué, cliquez sur le bouton Dessiner un calque de la barre Insertion, puis dessinez le calque à l'intérieur d'un autre calque en faisant glisser la souris. Si l'option Imbriquer est désactivée dans les préférences de calque, maintenez la touche Alt (Windows) ou Option (Macintosh) enforcée lorsque vous dessinez un calque à l'intérieur d'un calque existant.
Conseil : les calques imbriqués peuvent êtreprésentés différemment suivant les navigateurs. Lorsque vous creez des calques imbriqués, contrôle régulièrement leur presentation dans les divers navigateurs au cours du processus de création.
Pour imbriquer un calque existant dans un autre calque en utilisant le panneau Calques :
1 Choisissez Fenêtre > Autres > Calques pour ouvrir le panneau Calques.
2 Sélectionnez un calque dans le panneau Calques, puis maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enforcée tout en faisant glisser la souris pour diriger le calque vers le calque cible, dans le panneau Calques. Relâchez le bouton de la souris lorsque le nom du calque cible est mis en surbrillance.
<h1 id="manipulation-des-calques">Manipulation des calques</h1>
Lorsque que vous travailliez sur une mise en forme, vous pouvez selectionner, déplacer, redimensionner et aligner des calques. Vous doivent selectionner un calque pour pouvoir le déplacer, le redimensionner ou l'aligner.
Pour empêcher les calques de se chevaucher lorsque vous les déplacez et redimensionné, utilisez l'option Empêcher le chevauchement (voir « Comment empêcher le chevauchement des calques », page 412).
<h1 id="sélection-des-calques">Sélection des calques</h1>
Pour manipuler des calques ou en modifier les propriétés, Sélectionnez-en un ou plusieurs.
Pour sélectionner un calque, procédez de l'une des manières suivantes :
- Cliquez sur le nom du calque dans le panneau Calques.
- Cliquez sur la poignée de selection d'un calque. Si la poignée n'est pas visible, cliquez n'importe où dans le calque pour la faire apparaitre.
- Cliquez sur la cordure d'un calque.
- Clique à l'intérieur du calque en appuyant sur les touches Contrôle et Maj (Windows) ou Commande et Maj (Macintosh). Si plusieurs calques étaient selectionnés, ils sont tous déslectionnés et seul le calque sur lequel vous avez cliué est selectionné.
- Cliquez sur le marqueur de calque (en mode Creation) qui representation l'emplacement du calque dans le code HTML. S'il n'est pas visible,CHOISSEZ Affichage > Assistances visuelles >
Eléments invisibles.
Pour sélectionner plusieurs calques, procédez de l'une des manières suivantes :
- Appuyez sur la touche Maj tout enclistuant sur plusieurs noms de calques dans le panneau Calques.
- Appuyez sur la touche Maj tout en cliquant à l'intérieur d'un ou plusieurs calques ou sur leur bordure.
Lorsque plusieurs calques sont selectionnés, les poignées du dernier calque selectionné apparaisent en surbrillance noire. Les poignées des autres calques apparaisent en blanc.
<h1 id="redimensionnement-des-calques">Redimensionnement des calques</h1>
Vou puez redimensionner un ou plusieurs calques à la fois pour qu'ils aient tous la même largeur et la même hauteur.
Si l'option Empêcher le chevauchement est activée, vous ne pourrez pas redimensionner un calque s'il doit pour cela en chevaucher un autre (voir « Comment empêcher le chevauchement des calques », page 412).
Pour redimensionner le calque selectionné, procédez de l'une des manières suivantes :
- Pour redimensionner le calque en le faisant glisser, faites glisser l'une des poignées.
- Pour redimensionner le calque par incréements d'un pixel, maintenez la touche Ctrl (Windows) ou Option (Macintosh) enforcée tout en utilisant les touches fléchéées.
Remarque : les flèches déplacent les bords droit et inférieur du calque ; cette technique ne permet pas de redimensionner le calque en utilisant les bords supérieur et gauche.
- Pour redimensionner en alignant sur la grille, appuyez sur Maj-Contrôle-flèche (Windows) ou Maj-Option-flèche (Macintosh). Pour plus d'informations sur la définition des incréements de la grille, voir « Alignment des calques sur la grille», page 408.
- Dans l'inspecteur de propriétés, tapez des valeurs de largeur (L) et de hauteur (H).
Le redimensionnement d'un calque en modifie la largeur et la hauteur. Cette action ne definit pas la partie visible du contenu du calque. Pour définir la région visible d'un calque, voir « Affichage et définition des propriétés du calque», page 408.
<h1 id="pour-redimensionner-plusieurs-calques-à-la-fois">Pour redimensionner plusieurs calques à la fois :</h1>
1 Dans le mode Creation, selectionnez au moins deux calques.
2 Procedez de l'une des manieres suivantes:
- Choisissez Modifier > Aligner > Mème largeur ou Modifier > Aligner > Mème hauteur.
Les premiers calques selectionnés prendront la largeur ou la hauteur du dernier seLECTIONné (dont le contour est affché en surbrillance noire).
- Dans l'inspecteur de propriétés, sous Calques multiples, tapez les valeurs de largeur et de hauteur. Ces valeurs sont appliquées à tous les calques sélectionnés.
<h1 id="déplacement-des-calques">Déplacement des calques</h1>
Vou puez déplacer les calques en mode Création de la même manière que les objets dans la plupart des applications graphiques de base.
Si l'option Empêcher le chevauchement est activée, vous ne pourrez pas déplacer un calque s'il doit pour cela en chevaucher un autre Voir « Comment empêcher le chevauchement des calques», page 412.
Pour déplacer un ou plusieurs calques, procédez de l'une des manières suivantes :
- Pour déplacer des calques en les faisant glisser, Sélectionnez-les et faites glisser la poignée de sélection du dernier calque sélectionné (en surbrillance noire).
- Pour déplacer l'image par incréments d'un pixel, utilisez les touches fléchéées. Maintenez la touche Maj enforcée tout en appuyant sur les touches fléchéées pour déplacer le calque par incréments de la grille. Pour plus d'informations sur la définition des incréments de la grille, voir « Alignment des calques sur la grille», page 408.
<h1 id="alignment-des-calques">Alignment des calques</h1>
Utilisez les commandes d'alignement pour aligner un ou plusieurs calques sur l'un des cotes du dernier calque selectionné.
Lors de l'alignement, les calques enfants qui ne sont pas seLECTIONnés seront déplacés en même que leur parent, si celui-ci est seLECTIONné. Pour éviter ce déplacement, n'utilise pas de calques imbriqués.
<h1 id="pour-aligner-plusieurs-calques">Pour aligner plusieurs calques :</h1>
1 Sélectionnéz les calques.
2 Choisissez Modifier > Aligner, puis seLECTIONnez une option d'alignement.
Par exemple, si vous sélectionnez Haut, tous les calques se déplacent de façon telle que leurs cordures supérieures sont au même niveau que celle du dernier calque sélectionné (en surbrillance noire).
<h1 id="alignment-des-calques-sur-la-grille">Alignment des calques sur la grille</h1>
Utilisez la grille comme guide visuel pour dessiner, positionner ou redimensionner des calques dans le mode Création de la fenêtre de document. Vous pouvez aligner automatiquement des éléments de page 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écifique pour la grille. L'alignement fonctionne, que la grille soit visible ou non.
Pour afficher ou masquer la grille :
Choisissez Affichage > Grille > Afficher la grille.
Pour activer l'alignment :
Choisissez Affichage > Grille > Aligner sur la grille.
Pour modifier les paramètres de la grille :
1 Choisissez Affichage > Grille > Afficher la grille.
La boîte de dialogue Paramètres de la grille apparaît.
2 Définissez les options de votrechoix.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
3 Cliquez sur OK.
<h1 id="ajout-de-contenu-dans-les-calques">Ajout de contenu dans les calques</h1>
Avant de placer des objets dans un calque, vous devez d'abord y placer le point d'insertion.
Pour placer le point d'insertion dans un calque :
Clique n'importe ou à l'intérieur du calque.
Le contour du calque est en surbrillance et la poignée de selection apparait, mais le calque lui-même n'est pas sélectionné. Pour plus d'informations sur la selection de calques, voir « Sélection des calques », page 406.
<h1 id="affichage-et-définition-des-propriétés-du-calque">Affichage et définition des propriétés du calque</h1>
Vou puez afficher et définir differents attributs d'un calque dans l'inspecteur de propriétés.
Pour afficher toutes les propriétés d'un calque :
1 Sélectionnez un calque. Pour plus d'informations sur la sélection de calques, voir « Sélection des calques », page 406.
2 Ouvrez l'inspecteur de propriétés en choisisant Fenêtre > Propriétés.
3 Si l'inspecteur de propriétés n'est pas agrandi, cliquez sur la flèche d'agrandissement située dans le coin inférieur droit pour afficher toutes les propriétés.
Pour définiir les propriétés du calque avec l'inspecteur de propriétés :
1 Sélectionnez un calque. Pour plus d'informations sur la sélection de calques, voir « Sélection des calques », page 406.
2 Ouvrez l'inspecteur de propriétés en choisisant Fenêtre > Propriétés.
3 Modifie les attributs du calque en définissant les propriétés. Pour plus d'informations, cliquez sur le bouton Aide de l'inspecteur de propriétés.
<h1 id="affichage-et-définition-des-propriétés-de-plusieurs-calques">Affichage et définition des propriétés de plusieurs calques</h1>
Lorsque vous sélectionné plusieurs calques, l'inspecteur de propriétés des calques affiche les propriétés du texte et un sous-ensemble de propriétés de calque standard, ce qui vous permet de modifier plusieurs calques simultanément.
<h1 id="pour-sélectionner-plusieurs-calques">Pour sélectionner plusieurs calques :</h1>
Sélectionnez les calques en Maintenant la touche Maj enforcée. Pour plus d'informations sur la seLECTION de calques, voir « Sélection des calques», page 406.
<h1 id="pour-afficher-toutes-les-propriétés-de-plusieurs-calques">Pour afficher toutes les propriétés de plusieurs calques :</h1>
1 Sélectionnéz plusieurs calques.
2 Ouvrez l'inspecteur de propriétés en choisisant Fenêtre > Propriétés.
3 Si l'inspecteur de propriétés n'est pas agrandi, cliquez sur la flèche d'agrandissement située dans le coin inférieur droit pour afficher toutes les propriétés.
<h1 id="pour-définit-les-propriétés-de-plusieurs-calques-en-même-temps-avec-linspecteur-de-propriétés">Pour définit les propriétés de plusieurs calques en même temps avec l'inspecteur de propriétés :</h1>
1 Sélectionnez plusieurs calques.
2 Ouvrez l'inspecteur de propriétés en choisisant Fenêtre > Propriétés.
3 Modifie les attributs des calques en définissant les propriétés. Pour plus d'informations, cliquez sur le bouton Aide de l'inspecteur de propriétés.
<h1 id="rubriques-connexes-18">Rubriques connexes</h1>
« Affichage et définition des propriétés du calque », page 408
« Sélection des calques», page 406
<h1 id="modification-de-lordre-de-superposition-des-calques">Modification de l'ordre de superposition des calques</h1>
Utilisez l'inspecteur de propriétés ou le panneau Calques pour modifier l'ordre de superposition des calques. Le calque situé dans le haut de la liste du panneau Calques est au premier rang de l'ordre de superposition et apparait avant les autres calques.
En code HTML, l'ordre de superposition, ou index Z , déterminé l'ordre dans lequel les calques sont dessinés dans un navigateur. Vous pouvez modifier l'index Z pour chaque calque dans le panneau Calques ou l'inspecteur de propriétés.
Pour modifier l'ordre de superposition des calques dans le panneau Calques :
Choisissez Fenêtre > Autres > Calques pour ouvrir le panneau Calques. Ensuite, procédez de l'une des manières suivantes :
- Sélectionnez un calque et faites-le glisser à l'emplacement désiré dans la hierarchie de l'ordre de superposition. Une ligne indiquant le futuror emplacement du calque apparait lorsque vous déplacez le calque. Relâchez le bouton de la souris lorsque la ligne apparait à l'emplacement souhaité dans l'ordre de superposition.
- Dans la colonne Z, cliquez sur le numero d'index Z du calque à modifier. Tâpez une valeur supérieure ou inférieure à la valeur existante pour déplacer le calque, selon le cas, vers le bas ou vers le haut de l'ordre de superposition.
Pour modifier l'ordre de superposition des calques à l'aide de l'inspecteur de propriétés :
1 Choisissez Fenetre > Autres > Calques pour ouvrir le panneau Calques et afficher l'ordre de superposition actuel.
2 Sélectionnéz un calque dans le panneau Calques ou dans la fenêtre de document.
3 Dans l'inspecteur de propriétés du calque, tapez un chiffre dans le champ Index Z.
- Tapez une valeur supérieure pour « monter » le calque dans l'ordre de superposition.
- Tapez une valeur inférieure pour « descendre » le calque dans l'ordre de superposition.
<h1 id="modification-de-la-visibilité-des-calques">Modification de la visibilité des calques</h1>
Lorsque vous travailliez sur votre document, vous pouvez afficher ou masquer les calques manuellement, à l'aide du panneau Calques, pour voir comment la page apparaitra dans différentes situations.
Remarque: le calque sélectionné devient toujours visible et apparait devant les autres calques.
Pour modifier la visibilité d'un calque :
1 Choisissez Fenêtre >Autres >Calques pour ouvrir le panneau Calques.
2 Cliquez sur l'icone en forme d'eel pour changer sa visibilité.
- Un œil ouvert signifie que le calque est visible.
- Un œil fermé signifie que le calque est invisible.
- Si l'icone de l'oeil n'apparait pas, le calque hérite de la visibilité de son parent (lorsque les calques ne sont pas imbriqués, le parent constitue le corps du document, ce qui signifie qu'il est toujours visible). Aucune icone de l'oeil n'apparait lorsque aucune visibilité n'est indiquée (apparait dans l'inspecteur de propriétés comme Visibilité par défaut).
<h1 id="pour-modifier-la-visibilité-de-tous-les-calques-à-la-fois">Pour modifier la visibilité de tous les calques à la fois :</h1>
1 Choisissez Fenetre >Autres >Calques pour ouvrir le panneau Calques.
2 Cliquez sur l'icone en forme d'ceil en haut de colonne pour modifier la visibilité de tous les calques.
Remarque: cette procédure permet de définir la visibilité ou la non-visibilité de tous les autres calques, mais elle ne leur permet pas d'hérit.
<h1 id="rubrique-connexe-9">Rubrique connexe</h1>
Pour plus d'informations sur la définition d'une visibilité par défaut pour les nouveaux calques, voir « Définition des préférences de calque », page 404.
<h1 id="utilisation-de-tableaux-et-de-calques-pour-la-mise-en-forme">Utilisation de tableaux et de calques pour la mise en forme</h1>
Certain concepteurs de pages Web préférent associier calques et tableaux plutôt que d'utiliser des tableaux et le mode Mise en forme pour creer leur mise en forme (voir « Présentation de contenu à l'aide de tableaux », page 237 et « Le mode de Mise en forme », page 253). Dreamweaver vous permet de creer votre mise en forme à l'aide de calques, puis (si vous le souhaitez) de les convertir en tableaux, les navigateurs de la version 3.0 ne prend pas en charge les calques. Vous pouvez aussi passer des calques aux tableaux et vice-versa pour peaufiner la mise en forme et optimiser la presentation de la page.
Il est impossible de convertir des calques en tableaux, ou vice-versa, dans un modele de document ou dans un document auquel un modele a eté appliqué. Dans ce cas, vous nevez creer votre mise en forme dans un document sans modele et le convertir avant de l'enregistrer comme modele.
Vou ne pouvez pas convertir un seul tableau ou calque. Il n'est possible de convertir des calques en tableaux et vice-versa que pour la totalité d'une page.
Si vous souhaitez générer des fischiers indépendants compatibles avec les navigateurs de version 3.0 à partir d'un fisquier compteant des calques, utilisez l'option Convertir du menu Fichier (voir « Conversion pour assurer la compatibilité avec les navigateurs de versions 3.0 », page 413).
Remarque : la conversion de calques en tableaux peut engendrer la creation de tableaux responsable des nombreuses cellules vides.
<h1 id="conversion-entre-calques-et-tableaux">Conversion entre calques et tableaux</h1>
Créez votre mise en forme à l'aide de calques, puis convertissez les calques en tableaux afin que votre mise en forme puisse s'afficher dans les navigateurs plus anciens.
<h1 id="pour-convertir-des-calques-en-tableau">Pour convertir des calques en tableau :</h1>
1 Choisissez Modifier > Convertir > Calques en tableau.
2 Dans la boîte de dialogue qui s'affiche, Sélectionnez les options désirées.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
3 Cliquez sur OK.
Les calques sont convertis en un tableau.
<h1 id="pour-convertir-des-tableaux-en-calques">Pour convertir des tableaux en calques :</h1>
1 Choisissez Modifier > Convertir > Tableaux en calques.
2 Dans la boîte de dialogue qui s'affiche, Sélectionné les options désirées.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
3 Cliquez sur OK.
Les tableaux sont convertis en calques. Les cellules vides ne sont pas converties en calques, sauf si elles possèdent une couleur d'arrête-plan.
Remarque : les éléments de la page qui se trouvaient en dehors des tableaux sont également placés dans les calques.
<h1 id="comment-empêcher-le-chevauchement-des-calques">Comment empêcher le chevauchement des calques</h1>
Les cellules d'un tableau ne peuvent pas se chevaucher. Dreamweaver ne peut donc pas creer de tableau à partir de calques qui se chevauchent. Si vous prévoyez de convertir les calques d'un document en tableaux pour qu'il y ait compatibilité avec les navigateurs 3.0, utilisez l'option Empécher le chevauchement afin que le déplacement et le positionnement des calques soient restreints et qu'aïs les calques ne se chevauchent pas.
Pour empêcher le chevauchement de calques, procédez de l'une des manières suivantes :
- Sélectionnez l'option Empêcher le chevauchement dans le panneau Calques.
- Choisissez Modifier > Réorganiser > Empêcher le chevauchement des calques.
Si cette option est activée,aucun calque ne peut etre créé, déplace ou redimensionné au-dessus d'un calque existant, ni y etre imbrique. Si cette option est activée après la creation de calques se chevauchant, faites glisser l'un des calques pour supprimer leur chevauchement. Dreamweaver ne corrige pas automatiquement les chevauchements de calques existants lorsque vous activez l'option Empecher le chevauchement.
Si cette option et l'option d'alignement sont activées,aucun calque ne sera aligné sur la grille si cela doit causer un chevauchement de calques.Dans ce cas,le calque sera aligné sur le bord du calque le plus proche.
Remarque: certaines opérations autorisent le chevauchement des calques, même lorsqu l'option Empecher le chevauchement est activée. Si vous insérez un calque en utilisant le menu Insertion, si vous entrez les valeurs dans l'inspecteur de propriétés ou si vous repositionnnez les calques en modifiant le code source HTML, les calques risquent de se chevaucher ou de s'imbriquer lorsque cette option est activée. En cas de chevauchement, faites glisser les calques qui se chevauchent dans le mode Création pour les séparer.
<h1 id="conversion-pour-assurer-la-compatibilité-avec-les-navigateurs-de-versions-30">Conversion pour assurer la compatibilité avec les navigateurs de versions 3.0</h1>
Vouss pouvez convertir une page qui utilise des calques ou des styles CSS de sorte qu'elle utilise des tableaux et balises HTML et soit compatible avec les navigateurs de version 3.0. Dreamweaver create un document converti independant, tout en preserving le document d'origine.
En général, ces conversions ne doivent être effectuees que lorsque vous etes totalement satisfait de votre fichier d'origine, car vous devrez repeter l'opération de conversion chaque fois que vous modifiez le fichier d'origine.
<h1 id="pour-convertir-un-fjichier-destiné-aux-navigateurs-30">Pour convertir un fjichier destiné aux navigateurs 3.0 :</h1>
1 Choisissez Fichier > Convertir > Compatible avec les navigateurs 3.0.
2 Dans la boîte de dialogue qui s'affiche, désisissez la conversion des calques en tableaux, des styles CSS en balises HTML (style des caractères) ou les deux.
3 Cliquez sur OK.
Dreamweaver ouvre le fichier converti dans une nouvelle fenetre sans titre. Si vous avez selectionné Convertir les calques en tableaux ou Les deux, tous les calques sont replacés par un seul tableau qui préserve le positionnement de l'original.
Remarque : ni les calques qui se chevauchent, ni leurs qui se trouvent en dehors de la page (à gauche ou en haut) ne peuvent être convertis.
Si vous avez sélectionné Convertir les styles CSS en balises HTML ou Les deux, la balise CSS est remplaçée, lorsque cela est possible, par des styles de caractères HTML. Tout style CSS qui ne peut pas être converti en HTML est supprimé. Voir « Tableau de conversion de styles CSS en balises HTML», page 307 pour plus d'informations sur les styles qui sont convertis et ceux qui sont supprimés.
Si un scenario anim des calques, il est supprimé. Un scenario non associé aux calques (par exemple, comportements ou modifications sur le fichier source d'une image) continue d'être exécuté de la manière préalablement spécifiée. Le scenario est automatiquement réinitialisé à la première image. Pour plus d'informations sur les scénarios, voir « Déplacement d'un calque à l'aide d'une animation de scenario», page 415.
<h1 id="animation-de-calques-2">Animation de calques</h1>
Le terme HTML dynamique, ou DHTML, se refère à l'association de HTML avec un langage de script qui vous permet de changer le style ou le positionnement des propriétés des éléments HTML. Dans Dreamweaver, les scénarios utilisent un HTML dynamique pour modifier les propriétés des calques et des images au fil du temps. Utilisez les scénarios pour créé des animations ne nécessitant pas de contrôle ActiveX, d'applets Java ni de plug-ins (mais nécessitant JavaScript).
Remarque: le terme dynamique peut avoir plusieurs significations suivant les contexts Web. Ne confonde pas HTML dynamique avec l'idée d'une page Web dynamique, qui correspond à une page Web générée de manière dynamique par un code côté serveur avant d'être servie à un visiteur. Pour plus d'informations sur la création de pages dynamiques, voir Chapitre 30, « Conception de pages dynamiques dans Dreamweaver, » à la page 515.
Les scénarios vous permettent de changer la position, la taille, la visibilité et l'ordre de superposition d'un calque (seules les versions 4.0 et ultérieures des navigateurs prènnant en charge les fonctions de calque des scénarios). Ils sont également pratiques pour d'autres actions à entreprises après les chargements de pages. Par exemple, les scénarios peuvent modifier le fjichier source d'une balise d'image afin que différentes images apparaissent sur la page au fil du temps.
Pour visualiser le code JavaScript génére par le scenario, ouvre la fenêtre de document en mode Code. Le code du scenario se trouve dans la fonction MM_initTimelines, à l'intérieur d'une balise script, dans la section head du document.
Lorsque vous modifiez le code HTML d'un document qui contient des scénarios, veillez à ne pas déplacer, renOMmer ou supPRimer des elements auxquels le scenario fait reference.
<h1 id="utilisation-du-panneau-scénarios">Utilisation du panneau Scénarios</h1>
Le panneau Scénario indique la maniere dont les propriétés des calques et des images changent au fil du temps. Choisissez Fenêtre >Autres >Scénarios pour ouvrir le panneau Scénarios.
Le menu déroulant Scénario indique le scenario du document actuellément affiché dans le panneau Scénarios.
La tete de lecture indique l'« image » du scenario qui est actuellément affichee dans la fenetre de document.
Les nombres d'image indiquent la numérotation séquentielles des images. Le nombre qui apparaît entre les boutons Retour et Lecture indique l'image en cours. Vous pouvez contrôler la durée de l'animation en définissant le nombre total d'images et le nombre d'images par seconde (i/s). La configuration par défaut (15 images/s) est une bonne vitesse moyen pour la plupart des navigateurs qui sont exécutés sur des ordinateurs Windows et Macintosh courants.
Remarque : des vitesses supérieures n'améliorent pasforcément les performances. Les navigateurs lisent toujours toutes les images de l'animation, même s'ils ne peuvent pas soutenir la cadence indiquée. La cadence d'image n'est pas prise en compte lorsqu'elle est supérieure à celle que le navigateur peutGER.
Le menu contextuel contient différentes commandes liées au scenario.
Le canal de comportements contient les comportements qui doivent etre executés avec une image particuliere du scenario.
Les barres d'animation indiquent la durée de l'animation de chaque objet. Une seule ligne peut comprendre plusieurs barres représentant différents objets. Un objet place à une image donnée ne peut pas être contrôle par plusieurs barres.
Les images-clés sont des images dans lesquelles vous avez spécifique les propriétés (telles que la position) de l'objet. Dreamweaver calculé les valeurs intermédiaires pour les images situées entre les images-clés. De petits cercles signaient les images-clés.
Canaux d'animation affichent les barres permettant d'animer les calques et les images.
<h1 id="options-de-lecture">Options de lecture</h1>
Voici les options de lecture pour l'affichage de l'animation.
Rembopiner amène la tete de lecture à la première image du scenario.
Retour déplace la tête de lecture d'une image vers la gauche. Cliquez sur Retour en maintenant le bouton de la souris enforcé pour jouer le scenario in sens inverse.
Lecture déplace la tête de lecture d'une image vers la droite. Cliquez sur Lecture en maintainant le bouton de la souris enforcé pour jouer le scenario in en continu.
Lecture auto entraîne la lecture automatique du scenario lors du chargement de la page en cours dans un navigateur. Lecture auto attache un comportement à la balise body de la page qui exécuté l'action de lecture du scenario lors du chargement de la page.
Boucle entraîne la lecture en boucle infinie du scenario en cours lorsqu'la page est ouverte dans un navigateur. L'option de lecture en boucle insère le comportement Atteindre l'image du scenario dans le canal des comportements après la première image de l'animation. Double-cliquez sur le marqueur de comportement dans le canal des comportements pour modifier les paramétres de ce comportement et changer le nombre de boucles.
<h1 id="déplacement-dun-calque-à-laide-dune-animation-de-scenario">Déplacement d'un calque à l'aide d'une animation de scenario</h1>
Le type le plus courant d'animation de scenario inclut le déplacement d'un calque sur un chemin. Les scénarios ne peuvent déplacer que des calques. Pour déplacer des images ou du texte, créez un calque à l'aide du bouton Dessiner un calque de la barre Insertion, puis insérez des images, du texte ou tout autre type de contenu sur le calque (voir « Création de calques sur une page», page 403).
Les scénarios peuvent également modifier d'autres attributs des calques et images ; pour plus d'informations, voir « Modification des propriétés d'une image ou d'un calque à l'aide de scénarios », page 418.
<h1 id="pour-animer-un-calque-en-utilisant-un-scenario">Pour animer un calque en utilisant un scenario :</h1>
1 Amenez le calque à sa position initiale au début de l'animation.
2 Choisissez Fenetre >Autres >Scenarios.
3 Sélectionnéz le calque à animer.
Vérifiez que vous avez bien sélectionné le bon élément. Sélectionnez un calque en cliquant sur le marqueur de calque, en cliquant sur la poignée de selection de calque ou en utilisant le panneau Calques. Pour plus d'informations, voir « Manipulation des calques », page 406. Lorsqu'un calque est sélectionné, des poignées apparaissent (voir l'illustration suivante).
Lorsque vous cliquez dans le calque, un curseur clignotant se place à l'intérieur du calque, mais cela n'entraine pas la selection du calque.
4 Choisissez Modifier > Scénario > Ajouter un objet au scenario ou faites tout simplement glisser l'objet selectionné dans le panneau Scénarios.
Une barre apparait dans le premier canal du scenario. Le nom du calque ou de l'image y sera affchéé.
5 Cliquez sur l'indicateur d'image-clé, à la fin de la barre.
6 Déplacez le calque sur la page à l'emplacement où il doit se trouver à la fin de l'animation.
Une ligne apparait pour indiquer la trajectory de l'animation dans la fenetre de document.
7 Si vous voulez que le calque déscrire une courbe, Sélectionné sa barre d'animation et, tout enainaient la touche Ctrl (Windows) ou Commande (Macintosh) enfoncé, cliquez sur uneimage au milieu de la barre pour lui ajouter une image-clé ou cliquez sur une image au milieude la barre d'animation etCHOISSEAzouter une image-clé dans le menu contextualuel.
Répétez cette étape pour définir des images-clés supplémentaires.
8 Maintenez le bouton Lecture enforcé pour avoir un aperçu de l'animation sur la page.
Répétez cette procédure pour ajouter des calques et des images supplémentaires au scenario et pour créé une animation plus complexe.
<h1 id="creation-dun-scenario-entraçant-un-chemin">Creation d'un scenario entraçant un chemin</h1>
Si vous désirez créé une animation suivant un parcours complexe, il peut être plus simple d'enregistrer ce parcours en déplaçant le calque,只不过 que de créé des images-clés individuelles.
Pour creer un scenario en decrivant un chemin :
1 Sélectionnéz un calque.
2 Amenez le calque à sa position initiale au début de l'animation.
Vérifiez que vous avons sélectionné le calque; si le CURSEUR SETrouve dans le calque, cela signifieque ce dernier n'est pas seLECTIONné. Sélectionnez un calque en cliquant sur le marqueur decalque, en cliquant sur la poignée de selection de calque ou en utilisant le panneau Calques. Pour plus d'informations, voir « Manipulation des calques », page 406.
3 Choisissez Modifier > ScENARIO > Enregistrer le chemin du calque.
4 Déplacez le calque sur la page pour déscrie son parcours.
5 Relachez la souris à l'emplacement où l'animation doit s'arrête.
Dreamweaver ajoute une barre d'animation au scenario, avec le nombre nécessaire d'images-clés.
6 Dans le panneau Scénarios, cliquez sur le bouton Rembobiner, puis maintenez le bouton Lecture enfoncé pour visualiser votre animation.
<h1 id="modification-de-scenarios">Modification de scenarios</h1>
Après avoir défini les composants de base d'un scenario, vous pouze y apporter des modifications comme par exemple ajouter et supprimer des images, modifier le moment du démarrage de l'animation, etc.
<h1 id="pour-modifier-un-scenario-utilisez-lune-des-méthodes-suivantes">Pour modifier un scenario, utilisez l'une des méthodes suivantes :</h1>
Pour prolonger la durée de lecture de l'animation, faites glisser le marqueur de l'image de fin vers la droite. Toutes les images-clés de l'animation seront déplacées en conséquence pour que leurs positions relatives restent constantes. Pour empêcher le déplacement des images-clés, faites glisser le marqueur de la dernière image tout en appuyant sur la touche Alt (Windows) ou Option (Macintosh).
- Pour que le calque atteneigne la position de l'image-clé plus tout ou plus tard, déplacez le marqueur d'image-clé vers la croite ou vers la gauche dans la barre.
- Pour modifier le moment de démarriage d'une animation, Sélectionnez une barre ou toutes les barres associées à l'animation (appuyez sur Maj pour Sélectionner plusieurs barres à la fois) et déplacez-les vers la gauche ou vers la droite.
- Pour déplacer de la même valeur toutes les positions d'un chemin d'animation, Sélectionnez la barre entière, puis faites glisser l'objet sur la page. Dreamweaver ajuste en conséquence la position de toutes les images-clés. Toute modification effectuée lorsqu'une barre entière est sélectionnée entraînera la modification de toutes les images-clés de cette barre.
- Pour ajouter ou supprimer des images du scenario,CHOISSEZ Modifier > Scenario > Ajouter une image ou Modifier > Scenario > Supprimer une image.
- Pour que le scenariois soit execute automatiquement à l'ouverture de la page dans un navigateur, cliquez sur Lecture auto. Cette option attache à la page un comportement qui execute l'action « Lecture du scenarioir » lors du chargement de la page.
- Pour une lecture en boucle du scenario, cliquez sur Boucle. L'option de lecture en boucle insere le comportement Atteindre l'image du scenario dans le canal des comportements après la derniere image de l'animation. Vous pouvez modifier les parametes de ce comportement pour définir le nombre de boucles.
<h1 id="modification-des-propriétés-dune-image-ou-dun-calque-à-laide-de-scenarios">Modification des propriétés d'une image ou d'un calque à l'aide de scenarios</h1>
Outre le déplacement des calques avec les scénarios, vous pouvez modifier la visibilité, la taille et l'ordre de superposition d'un calque ; vous pouvez également modifier le fichier source d'une image.
Pour modifier les propriétés d'une image ou d'un calque à l'aide d'un scenario:
1 Dans la fenêtre Scenarios, procedez de l'une des manieres suivantes :
- Sélectionnéz une image-clé existante dans la barre qui contrôle l'objet que vous souhaitez modifier (les images de début et de fin sont toujours des images-clés).
- Créez une nouvelle image-clé en cliquant sur un cadre au centre de la barre d'animation et enCHOISIGANT Modifier > Scénario > Ajouter une image-clé. Vous pouvez également creator une nouvelle image-clé en cliquant sur un cadre de la barre d'animation tout en appuyant sur la touche Ctrl (Windows) ou Commande (Macintosh).
2 Définissez les nouvelles propriétés de l'objet enCHOIsant l'une des options suivantes :
- Pour changer le fichier source d'une image, cliquez sur l'icone de dossier qui apparait a cote de la boite Src dans l'inspecteur de propriétés, afin de selectionner une nouvelle image.
- Pour modifier la visibilité d'un calque, cliquez sur Hériter, Visible ou Masqué ou dans le menu contextuel du champ Visibilité de l'inspecteur de propriétés. Si vous préférez, vous pouvez utiliser les icones d'œil du panneau Calques Voir « Modification de la visibilité des calques », page 410.
- Pour modifier la taille d'un calque, faites glisser ses poignées de redimensionnement ou indiquez de nouvelles valeurs dans les champs Largeur et Hauteur de l'inspecteur de propriétés. Certains navigateurs ne permettent pas de changer les dimensions d'un calque de manière dynamique.
- Pour modifier l'ordre de superposition de calques, indiquez une nouvelle valeur dans le champ Index Z ou utilisez le panneau Calques pour modifier l'ordre de superposition du calque en cours (voir « Modification de l'ordre de superposition des calques », page 410).
3 Maintenez le bouton Lecture enforcé pour afficher l'animation.
<h1 id="utilisation-de-plusieurs-scénarios">Utilisation de plusieurs scénarios</h1>
Au lieu d'essayer de contrôle toute l'animation d'une page à l'aide d'un seul scenario, il est plus facile de travailler avec des scénarios séparés contrôlant différentes parties de la page. Par exemple, la page peut composer des éléments interactifs déclenchant chacun un scenario différent.
Pour gérer plusieurs scénarios, procédez de l'une des manières suivantes :
- Pour creer un nouveau scenario,CHOISSEZ Modifier > Scenario > Ajouter un scenario.
- Pour supprimer le scenarioie selectionné,CHOISSEZ Modifier > Scenario > Supprimer le scenario. Toutes les animations sont définitivement supprimées de ce scenario.
- Pour renommer le scenarioie selectionné,CHOISEZ Modifier > Scenario > Renommer le scenario ou tapez un nouveau nom dans le menu déroulant Scenario du panneau Scenarios.
- Pour afficher un scenario different dans le panneau Scénarios,CHOISSEZ-en un autre dans le menu deroulant Scenario du panneau Scénarios.
<h1 id="copie-et-collage-dannimations">Copie et collage d'annimations</h1>
Une fois qu'une série d'animation vous convient, vous pouze la copier et la coller dans une autre zone du scenario en cours, dans un autre scenario du même document ou dans le SCNARIO d'un autre document. Il est possible de copier et de coller plusieurs séquences à la fois.
<h1 id="pour-couper-ou-copier-et-coller-des-séquences-danimation">Pour couper ou copier et coller des séquences d'animation :</h1>
1 Cliquez sur une barre d'animation pour selectionner une sequence. Pour selectionner plusieurs séquences, cliquez sur plusieurs barres d'animation en appuyant sur Maj ; pour les selectionner toutes, appuyez sur Ctrl+A (Windows) ou sur Commande+A (Macintosh).
2 Copiez ou coupe la selection.
3 Procedez de l'une des manieres suivantes :
- Déplacez la tête de lecture vers un autre emplacement du scenario en cours.
- Sélectionnez un autre scenario dans le menu contextual Scénario.
- Ouvrez un autre document ou créez-en un nouveau, puis cliquez sur le panneau Scénarios.
4 Collez la seLECTION dans le scenario.
Les barres d'animation d'un même object ne peuvent pas se chevaucher, puisqu'un calque ne peut pas se couver à deux endroits à la fois (de même, une image ne peut pas avoir deux sources différentes en même temps). Si la barre d'animation que vous collez doit chevaucher une autre barre d'animation concernant le même object, Dreamweaver décale automatiquement la sélection à la première image située hors de ce chevauchement.
Deux principes sont à garder à l'esprit lorsque l'on colle une série d'animation dans un autre document :
- Si vous copiez une série d'animation pour un calque et que le nouveau document contient déjà un calque du même nom, Dreamweaver appliquera les propriétés d'animation au calque existant dans le nouveau document.
- Si vous copiez une série d'animation pour un calque et que le nouveau document ne contient pas encore de calque du même nom, Dreamweaver collera le calque et son contenu à partir du document d'origine, en même temps que la série d'animation. Pour appliquer la série d'animation collée à un autre calque dans le nouveau document, désissez Modifier l'objet dans le menu contextuel et selectionnez le nom du deuxième calque dans le menu contextuel. Supprimez le calque collé si nécessaire.
<h1 id="application-dune-série-danimation-à-un-autre-objet">Application d'une série d'animation à un autre objet</h1>
Pour gagner du temps, vous pouvez创建工作 une série d'animation, puis l'appliquer aux autres calques de votre document.
<h1 id="pour-appliquer-une-série-danimation-existante-à-dautres-objets">Pour appliquer une série d'animation existante à d'autres objets :</h1>
1 Dans le panneau Scenarios, selectionnez la sequence d'animation et copiez-la.
2 Cliques sur une des images du panneau Scenarios et collez-y la série.
3 Cliquez à l'aide du bouton droit (Windows) ou appuyez sur la touche Contrôle (Macintosh) en cliquant sur la série d'animation collée et cliquez sur Modifier l'objet dans le menu contextualuel.
4 Choisissez un autre objet dans le menu de la boîte de dialogue qui apparaît, puis cliquez sur OK.
5 Repetez les étapes 2 à 4 pour tous les autres objets qui doivent suivre la même série d'animation.
Vou puez Change r d'avis sur le calque a animer apres la creation d'une sequence d'animation ; suivez simplement les etapes 3 et 4 ci-dessus (inutile de copier ou coller).
<h1 id="changement-de-nom-des-scénarios">Changement de nom des scénarios</h1>
Pour changer le nom du scenario actuellément affiché dans le panneau Scénarios :
1 Choisissez Modifier > Scénario > Renommer le scenario.
2 Tapez un nouveau nom dans la boîte de dialogue Renommer le scenario.
Si vous document contient l'action de comportement Lire le scenario (par exemple, s'il contient un bouton sur lequel l'utilisateur doitiquer pour démarrer le scenario), vous ne devez pas oublier de modifier le comportement pour qu'ilporte sur le nouveau nom de scenario.
<h1 id="conseils-pour-lanimation-des-scénarios">Conseils pour l'animation des scénarios</h1>
Les suggestions suivantes peuvent améliorer le fonctionnement de vos animations et faciliter leur création :
- Affichez et masquez des calques au lieu de modifier le fisier source lorsque vous travailliez avec des animations de plusieurs images. L'échange du fisier source d'une image peut ralentir l'animation, car la nouvelle image doit être téléchargeée. Il n'y aura pas de pause ou d'images manquantes si toutes les images sont téléchargeées en même temps dans des calques masques ayant l'exécution de l'animation.
- Prolongez les barres d'animation pour creer un mouvement plus fluide. Si l'animation parait saccadée et que les images sautent entre les positions, faites glisser la dernière image de la barre d'animation du calque pour éndre le mouvement sur plus d'images. La prolongation de la barre d'animation cree davantage de points de coordonnées entre les points de début et de fin du mouvement, et ralentit le déplacement de l'objet. Essayez d'accroître le nombre d'images par seconde (i/s) pour améliorer la vitesse, mais sachez que la plupart des navigateurs exécutés sur des systèmes moyens ne peuvent guère aller plus vite que 15 i/s. Testez l'animation sur différents ordinateurs et avec les différents navigateurs pour trouver la meilleure configuration
- N'essayez pas d'animer des images bitmap trop volumineuses. l'animation d'images volumineuses ralentit l'animation. Crééz plutôt des images composites, pour déplacer des images de petite taille. Par exemple, pour montré le déplacement d'une voiture, n'animez que les roues.
- Créez des animations simples. Ne créez pas d'animations qui demandent plus que ce que les navigateurs actuels sont capables de fournir. Les navigateurs lisent toujours toutes les images d'une animation de scenario, même si les performances de l'ordinateur ou d'Internet diminuuent.
<h1 id="animation-de-calques-à-laide-dactions-de-comportement">Animation de calques à l'aide d'actions de comportement</h1>
Associez les actions de comportement suivantes à un lien, à un bouton ou à tout autre object pour contrôler les scénarios et les calques. Pour creer des effets intéressants, vous pouze placer les comportements contenant ces actions dans le canal de comportements. Par exemple, vous pouze faire en sorte qu'un scenario s'arrête de lui-même. Pour plus d'informations, voir « Association d'un comportement à un scenario», page 373 et « Utilisation des comportements JavaScript», page 369.
Déplacement de calque permet à l'utilisateur de déplacer un calque. Utilisez cette action pour creer des puzzles, des commandes de défillement et autres éléments mobiles de l'interface Voir « Déplacement de calque», page 379.
Afficher-Masquer les calques affiche, masque ou rétablit la visibilité par défaut d'un ou plusieurs calques. Cette action permet d'afficher des informations en fonction des interactions de l'utilisateur avec la page Voir « Afficher-masquer les calques», page 391.
Lecture du scenario et Arrête le scenario permettent aux visiteurs de la page de dire et d'arrête un scenario en cliquant sur un lien ou sur un bouton. Ces actions permettent aussi de démarrer et d'arrête un scenario automatiquement lorsque l'utilisateur passse sur un lien, une image ou tout autre object Voir « Lire le scenario et Arrête le scenario», page 399.
Atteindre une image du scenario entraine un saut du scenario à une image donnée. La case à cocher Boucle du panneau Scénarios ajoute l'action Atteindre une image du scenario après la的最后一 image de l'animation, ce qui fera revenir cette dernière à la première image et la sera redémarrer Voir « Atteindre l'image du scenario», page 398.
Texte du calque remplace le contentu et le formatage d'un calque existant sur la page par le contentu indiqué. Ce contentu peut être n'importe quel texte valide en HTML Voir « Texte du calque », page 389.
<h1 id="partie-vii-gestion-du-content-sur-plusieurs-pages">Partie VII Gestion du content sur plusieurs pages</h1>
Vou puevez étabir des liens entre vos pages, réutiliser des éléments de conception et des mises en forme d'une page à l'autre, puis tester votre site.
Cette partie du manuel contient les chapitres suivants :
- Chapitre 26, « Liens et navigation »
- Chapitre 27, « Gestion des actifs de site, des bibliothèques et des modèles »
- Chapitre 28, « Test d'un site »
<h1 id="chapitre-26-2">CHAPITRE 26</h1>
<h1 id="liens-et-navigation">Liens et navigation</h1>
Une fois que vous avez établi un site Dreamweaver dans lequel stocker les documents de votre site Web et que vous avez créé des pages HTML, il vous reste à creator des connexions entre vos documents et d'autres types de documents.
Macromedia Dreamweaver MX propose plusieurs méthodes pour creer des liens hypertextes vers des documents, des images, des fichiers multimédias ou des logiciels pouvant être télécharges. Vous pouvez étabrir des liens vers n'importe quel texte ou n'importe celle image d'un document, même s'illes se trouvent dans un en-tête, une liste, un tableau, un calque ou un cadre.
Pour obtenir une représentation visuelle de la manière dont vos fischiers sont liés, utilisez la carte du site. Dans la carte du site, vous pouvez ajouter de nouveaux documents, créé et supprimer des liens entre des documents et vérifier les liens entre des fischiers interdépendants (voir « Utilisation de la carte du site », page 83).
Il existe différentes méthodes de création et de gestion de liens. Certains concepteurs de pages Web préférent créé des liens vers des pages ou des fischiers non existants durant leur travail, alors que d'autres préférent créé d'abord tous les fischiers et pages, puis ajouter les liens. Une autre méthode de gestion des liens consiste à créé des pages de type « espace réservé » qui replacent le fichier final et permettent d'ajouter des liens rapidement et de les vérifier avant de terminer toutes les pages. Pour plus d'informations sur la vérification de liens, voir « Vérification des liens dans une page ou un site», page 497.
Ce chapitre contient les sections suivantes :
« Emplacements et chemins d'accès des documents », page 425
« Création de liens», page 428
«Gestion des liens»,page 436
« Création de menus de reroutage», page 439
« Création de barres de navigation», page 441
« Création de cartes graphiques», page 444
« Association de comportements à des liens», page 446
<h1 id="emplacements-et-chemins-daccès-des-documents">Emplacements et chemins d'accès des documents</h1>
Pour creer des liens, il est indispensable de comprendre le chemin d'acces qui s'établit entre le document à partir duquel vous établissez un lien et le document pointé par ce lien.
Chaque page Web possède une adresse unique, appelée URL (Uniform Resource Locator) (pour plus d'informations sur les URL, consultez la page du World Wide Web Consortium consacrée aux noms et adresses des pages). Cependant, lorsque vous creez un lien local (entre deux documents du même site), vous n'avez en général pas besoin de specifier l'URL completé du document vers lequel vous creez le lien ; il est préféable d'indiquer un chemin relatif, à partir du document en cours ou de la racine du site.
Les trois types de chemins d'accès de liaison sont les suivants :
- Chemins absolus (par exemple http://www.macromedia.com/support/dreamweaver/contents.html).Voir « Chemins absolus», page 426.
- Chemins relatifs au document (par exemple dreamweaver/contents.html).Voir « Chemins relatifs au document », page 426.
- Chemins relatifs à la racine du site (par exemple /support/dreamweaver/contents.html).Voir « Chemins relatifs à la racine du site», page 427.
Dreamweaver you permit deCHOISERaisementle typedecheminacrereepourvos liens.Voir «Liensentrefichiersetdocuments»,page429.
Remarque : il est préférable d'utiliser le type de lien de votrechioix, 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.
<h1 id="chemins-absolutus">Chemins absolutus</h1>
Les chemins absolus indiquent le chemin complet du document lié, y compris le protocole à utiliser (en général http:// pour les pages Web). Par exemple, http://www.macromedia.com/support/dreamweaver/contents.html est un chemin absolu.
Vou devez utiliser un chemin absolu lorsque vous creez un lien vers un fichier situé en dehors du site courant. Vous pouvez également utiliser des liens de chemins absolus pour les liens locaux (vers des documents sur le même site), mais cette approche est déconseillée. Si vous déplacez le site vers un autre Domaine, tous les liens de chemins absolus locaux sont rompus. De plus, l'utilisation de chemins relatifs pour les liens locaux offre une plus grande souplesse si vous nevez déplacer des fichiers au sein de votre site.
Remarque : lors de l'insertion d'images (et non de liens) : si vous utilisez un chemin absolu vers une image qui reside sur un serveur distant et qui n'est pas disponible sur le lecteur de disque dur local, vous ne pourrez pas visualiser l'image dans la fenetre de document. Ainsi, vousdezvez prévisualiser le document dans un navigateur pour voir l'image. Si possible, utilisez des chemins relatifs au document ou à la racine pour les images. Pour plus d'informations, voir « Insertion d'une image », page 312.
<h1 id="chemins-relatifs-au-document">Chemins relatifs au document</h1>
Les chemins relatifs au document représentent le type de chemin le plus adapté aux liens locaux dans la plupart des sites Web. Ils sont particulièrement utiles lorsque le document en cours et le document pointé par le lien se trouvent dans le même dossier et le resteront faisemblablement. 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 en cours et le document lié, au sein de la hierarchie de dossiers.
Indiquer un chemin relatif au document consiste tout simplement à laisser de côte la partie de l'URL absolue qui est identique pour les deux documents, en n'indiquant que la partie du chemin qui differe.
- Pour creer un lien vers un autre fichier situé dans le même dossier que le document en cours, il suffit d'indiquer le nom de ce fichier.
- Pour creer un lien vers un fisier situé dans un sous-dossier du dossier qui contient le document en cours, indiquez le nom de ce sous-dossier, suivi d'une barre oblique (/) et du nom du fisier.
- Pour creer un lien vers un fichier dans le dossier parent du dossier du document en cours, faites preceder le nom de fichier par ../ (ou « .. » signifie « un niveau supérieur dans la hierarchie du dossier »).
Par exemple, supposons que la structure de votre site soit la suivante :
<h1 id="pour-étabir-un-lien-depuis-contentshtml-vers-dautres-fichiers">Pour étabir un lien depuis contents.html vers d'autres fichiers :</h1>
- Pour étabir un lien depuis contents.html vers hours.html (ces deux fichiers sont dans le même dossier), le nom de fichier est le chemin relatif : heures.html.
- Pour étabir un lien vers tips.html (qui se trouve dans le sous-dossier « ressources »), utilisez le chemin relatif resources/tips.html.
Chaque barre oblique (/) signifie « descendre d'un niveau dans la hierarchie du dossier »,
- Pour étabir 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.
Chaque série de deux points suivis d'une barre oblique (./) signifie « monter d'un niveau dans la hierarchie du dossier ».
- Pour étabir un lien vers catalog.html (qui se trouve dans un autre sous-dossier du dossier parent), utilisez le chemin relat ../products/catalog.html.
La séquence ../ fait remonter au dossier parent, puis la chaîne products/ fait redescendre dans le sous-dossier products.
Remarque : il est conseilé de tousjens enregistrer un nouveau fichier avant de creer un chemin relativ au document, car ce dernier n'est pas valide sans point de depart bien defini. Si vous creez un chemin relat au document avant d'enregistrer le fichier, Dreamweaver utilise provisoirement un chemin absolu commement par « file:// » jusqu'à ce que le fichier soit enregistré. Dreamweaver convertit alors le chemin file:/ en chemin relativ.
Lorsque vous déplacez un groupe de fischiers sous la forme d'un groupe (par exemple, lorsque vous déplacez un dossier entier, afin que tous les fischiers 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 fischiers. Toutefois, si vous déplacez individuellement un fisquier qui contient des liens relatifs au document, ou un fisquier 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 fischiers dans le panneau Site, Dreamweaver met automatiquement à jour tous les liens concernés).
<h1 id="chemins-relatifs-à-la-racine-du-site">Chemins relatifs à la racine du site</h1>
Les chemins relatifs à la racine du site représentent le chemin d'accès à un document à partir du dossier racine du site. Ces types de chemins peuvent être utiles si vous travailliez sur un grand site Web qui utilise plusieurs serveurs ou un seul serveur qui est l'hote de plusieurs sites différents. Toutefois, si vous n'étés pas familier avec ce type de chemin, adoptez plutôt les chemins relatifs au document.
Un chemin relat à la racine commence par une barre oblique, qui représenté le dossier racine du site. Par exemple, /support/tips.html est le chemin relat à la racine d'un fichier (tips.html) situé dans le sous-dossier « support » de la racine du site.
Un chemin relatif à la racine représenté souvent le meilleur moyen d'indiquer les liens dans un site Web sur lequel il vous faudra féquement déplacer des fichiers HTML d'un dossier à un autre. Lorsque vous déplacez un document qui contient des liens relatifs à la racine, il n'est pas nécessaire de modifier les liens ; par exemple, si vos fichiers HTML utilisent des liens relatifs à la racine pour les fichiers dépendants (les images en particulier), les liens des fichiers dépendants restent valides si vous déplacez les fichiers HTML. Toutefois, si vous déplacez ou renommez les documents qui sont pointés par des liens relatifs à la racine, il sera nécessaire demettre ces liens à jour, même si les chemins relatifs de ces documents entre eux n'ont pas changé.
Par exemple, si vous déplacez un dossier, tous les chemins relatifs à la racine des fichiers qu'il contient doivent être mis à jour (si vous déplacez ou renommez des fichiers dans le panneau Site, Dreamweaver met automatiquement à jour tous les liens concernés).
Pour utiliser des chemins relatifs à la racine, définissez un dossier local dans Dreamweaver enCHOISIGANT un dossier racine local qui servira d'équivalent à la racine des documents sur le serveur distant (voir « Configuration d'un site Dreamweaver », page 62).
Dreamweaver utilise ce dossier pour déterminer les chemins relatifs à la racine pointant vers des fichiers.
Remarque : les chemins relatifs à la racine sont interprétés par les serveurs, non par les navigateurs. En conséquence, si vous ouvrez dans votre navigateur une page locale qui utilise des liens relatifs à la racine (sans utiliser la fonction Aperçu dans le navigateur depuis Dreamweaver), les liens ne fonctionnent pas. Lorsque vous utilisez la fonction Aperçu dans le navigateur pour vérifier un document qui utilise des liens relatifs à la racine, Dreamweaver convertit temporairement ces liens (dans le document prévisualisé uniquement) en utilisant des chemins relatifs au document. Cependant, vous ne pouvez vérifier qu'une page de ce type à la fois : si vous suivez un lien à partir de la page affichée, les liens relatifs à la racine de la page suivante ne sont pas convertis et le navigateur ne peut pas les suivre. L'affichage de pages contenues dans des yeux de cadres et utiliser des liens relatifs à la racine provoque le même type de problème.
<h1 id="pour-vérifier-un-ensemble-de-pages-qui-utilise-des-liens-relatifs-à-la-racine-précédez-de-lune-des-manières-suivantes">Pour vérifier un ensemble de pages qui utilise des liens relatifs à la racine, précédez de l'une des manières suivantes :</h1>
- Placez les fichiers sur un serveur distant, et affichez-les à partir de celui-ci.
- (Windows uniquement) Choisissez Edition > Préférences, sélectionnez la catégorie Aperçu dans le navigateur dans la liste de gauche, puis Aperçu à l'aide du serveur local.
Remarque : pour utiliser cette option, vousdezexécuter un serveur Web sur voitré ordinateur local.
<h1 id="creation-de-liens">Creation de liens</h1>
La balise HTML qui permet de déclarer un lien hypertexte est appelée une ancre ou une balise à Dreamweaver créé une ancre pour les objets, les textes ou les images à partir desquels vous créez des liens. Vous pouvezcréer des liens vers d'autres documents et fichiers et des liens vers des emplacements spécifique dans un document unique en utilisant la balise à href.
Par exemple, si vous avez selectionné le texte Page d'accueil dans la fenêtre de document, puis si vous avez créé un lien vers un filchier nommé accueil.htm, le code source HTML du lien aura l'aspect suivant :
<pre><code class="language-txt"><a href="accueil.htm">Page d'accueil</a>
</code></pre>
Si vous créez un lien vers un emplacement spécifique dans un document, vous créez d'abord une ancre nommée (par exemple, a name="MenuPrincipal"). Vous créez ensuite un lien au sein de la page qui fait reference à cette ancre nommée (par exemple, a href="#MenuPrincipal").
Avant de creator des liens, assurez-vous de bien comprendre le fonctionnement des chemins relatifs au document, des chemins relatifs à la racine et des chemins absolus (voir « Emplacements et chemins d'accès des documents », page 425).
Vou puevez creer plusieurs types de liens dans un document :
- Un lien vers un autre document ou fichier, tel que le fichier d'une image, d'une animation ou d'un son. Voir « Liens entre fichiers et documents », page 429.
- Un lien vers une ancre nommée, qui permet de sauter à un emplacement spécifique au sein d'un document.Voir « Lien vers un emplacement spécifique au sein d'un document», page 432.
- Un lien de message électronique, qui create un message électronique vierge avec l'adresse du destinataire déjà indiquée. Voir « Création d'un hyperlien», page 433.
- Des liens nuls et de script, qui permettent d'affector des comportements à un objet ou de créé un lien qui exécute un code JavaScript. Voir « Création de liens nuls et de liens de script », page 435.
Dreamweaver propose différentes méthodes pour creer facilement des liens locaux (entre des documents du même site):
- Utilisez la carte du site pour afficher,maker,modifier ou supprimer des liens.
- Sélectionnéz du texte ou l'objet d'une page dans la fenêtre de document, puis Modifier > Créer le lien pour sélectionner un fisquier avec lequel étabir un lien.
- Utilisez l'inspecteur de propriétés, en sélectionnant du texte ou l'élement d'une page dans le document, puis en tapant le chemin du:fichier ou en utilisant l'icone du dossier Inspector de propriétés ou l'icone Pointer vers un:fichier pour sélectionner un:fichier avec lequel étabir un lien.
Remarque: la saisie de l'adresse ou du chemin d'accès vers un fichier peut amener à entrer des liens ou chemins incorrects qui ne fonctionnent pas. Pour vous assurer que le chemin est correct, utilisez l'icone de dossier pour rechercher le lien.
- Sélectionnéz du texte ou l'objet d'une page dans la fenêtre de document, choisissez Créer le lien dans le menu contextualuel, puis Sélectionnéz un filchier avec lequel étabir un lien.
Pour creer un lien externe (vers un document sur un autre site), vous devez taper le chemin d'accès absolu (avec le protocole correct) dans l'inspecteur de propriétés. Assurez-vous d'enter le chemin entier (y compris http://) lors de la création de liens externes.
<h1 id="liens-entre-fichiers-et-documents">Liens entre fichiers et documents</h1>
Utilisez l'inspecteur de propriétés et l'icone Pointer vers un fichier pour creator des liens à partir d'une image, d'un object ou de texte vers un autre document ou fichier. Pour plus d'informations sur l'utilisation de la carte du site pour creator des liens, voir « Création et modification de liens dans la carte du site», page 437.
Pour creer un lien vers des documents en utilisant l'icone du dossier Inspecteur de propriétés ou la zone de texte du lien :
1 Sélectionnéz le texte ou une image dans la fenêtre de création du document.
2 Ouvrez l'inspecteur de propriétés (Fenêtre > Propriétés) et procédez de l'une des manières suivantes :
- Cliquez sur l'icone représentant un dossier située à droite de la zone Lien pour rechercher et selectionner un fjichier.
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 un fjichier HTML pour spécifique si le chemin est relatif à la racine ou au document, puis cliquez sur Sélectionner.
Remarque : lorsque vous entrez le type de chemin dans le champ Relatif à, Dreamweaver utilise votre choix comme type de chemin par défaut pour tous les liens ultérieurs, jusqu'à ce que vous modifiez à nouveau le type de chemin.
- Tapez le chemin et le nom de fichier du document dans la zone Lien.
Pour creer un lien vers un document de sua site, indique un chemin relat au document ou a la racine. Pour creer un lien vers un document situé en dehors du site, indique un chemin absolu, avec le type de protocole (par exemple, http://). Vous pouvez utiliser cette approche pour entrer un lien vers un fichier n'ayant pas encore ete create.
3 Dans le menu déroulant Cible, Sélectionnez un emplacement dans lequel ouvrir le document.
Pour que le document lié s'affiche ailleurs que dans la fenetre ou le cadre en cours, seLECTIONnez une option dans le menu déroulant Cible de l'inspecteur de propriétés :
- _blank charge le document lié dans une nouvelle fenêtre, sans nom, du navigateur.
- _parent charge le document lié dans le cadre parent ou dans la fenêtre parente du cadre contenant le lien. Si le cadre contenant le lien n'est pas imbriqué, le document lié est chargé dans la fenêtre de base du navigateur.
- _self charge the document lied 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.
Conseil : si tous les liens sur la page seront définis sur la même cible, vous pouvez spécifique cette cible une fois enCHOISIGANT LA COMMANDE INSERTION > Balises d'en-tete > Base et en selectionnant les informations cible. Pour plus d'informations sur le ciblage de cadres, voir « Definition des contenus de cadre avec liens », page 278.
<h1 id="pour-creer-un-lien-vers-des-documents-en-utilisant-licone-pointer-vers-un-fichier">Pour creer un lien vers des documents en utilisant l'icone Pointer vers un fichier :</h1>
1 Sélectionnéz le texte ou une image dans la fenêtre de création du document.
2 Faites glisser l'icone Pointer vers un fichier (à droite de la zone Lien de l'inspecteur de propriétés) et pointez vers un autre document ouvert, une ancre visible dans un document ouvert ou un fichier dans le panneau Site.
La zone Lien est mise à jour pour indiquer le lien.
Remarque : vous pouvez creer un lien vers un document ouvert à condition que vos documents ne soient pas agrandis dans la fenetre de document. Lorsque vous pointez vers un document ouvert, celui-ci passé au premier plan de votre écran pendant que vous effectuez votre sélection.
<h1 id="3-relâchez-le-bouton-de-la-souris">3 Relâchez le bouton de la souris.</h1>
Déplacement de l'icone Pointer vers un fichier de l'inspecteur de propriétés vers un fichier dans le panneau Site
<h1 id="pour-creer-un-lien-à-partir-dune-selection-dans-un-document-ouvert">Pour creer un lien à partir d'une selection dans un document ouvert :</h1>
1 Sélectionnéz le texte dans la fenêtre de document.
2 Faites glisser la selection, en maintainant la touche Maj enforcée.
L'icone Pointer vers un fichier s'affiche lorsque vous commencez à faire glisser la souris.
3 Pointez vers un autre document ouvert, une ancre visible dans un document ouvert ou un fichier dans le panneau Site.
Remarque : vous pouvez creer un lien vers un document ouvert à condition que vos documents ne soient pas agrandis dans la fenetre de document. Lorsque vous pointez vers un document ouvert, celui-ci passes au premier plan de votre écran pendant que vous effectuez votre sélection.
4 Relâchez le bouton de la souris.
Déplacement de l'icone Pointer vers un fichier à partir d'un texte de la fénête de document vers un fichier du panneau Site
Pour creator un lien vers des documents en utilisant la carte du site et l'icone Pointer vers un fichier :
1 Dans le panneau Site, affichez les vues Fichiers du site et Carte du site en appuyant sur l'icone Carte du site et en choisisant Carte et fichiers.
2 Sélectionnez un fichier HTML dans la carte du site.
L'icone Pointer vers un fichier s'affiche a coto du fichier.
3 Faites glisser l'icone Pointer vers un fichier et pointez vers un autre fichier dans la carte du site ou vers un fichier local dans la vue Fichiers du site.
4 Relâchez le bouton de la souris.
Un lien hypertexte portant le nom du filchier lie est place au bas du filchier HTML selectionné. Cette méthode fonctionne correctement lorsque vous construisez votre site et que vous souhaitez créé rapidement des liens au niveau du site.
<h1 id="lien-vers-un-emplacement-spécifique-au-sein-dun-document">Lien vers un emplacement spécifique au sein d'un document</h1>
Vouss pouvez utiliser l'inspecteur de propriétés pour étabir un lien vers une section donnée d'un document en créé au préalable des ancre nommées. Les ancre nommées permettent de définir des marqueurs dans un document et sont souvent placées au niveau d'une rubrique spécifique ou en haut d'un document. Vous pouvez ensuite creator des liens vers ces ancre nommées, qui amènent rapidement le visitectur à 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éé l'ancre nommée, puis creer un lien pointant sur elle.
<h1 id="pour-creer-une-ancre-nommée">Pour creer une ancre nommée :</h1>
1 Dans la fenêtre de document, place le curseur à l'endroit où insérer l'ancre nommée.
2 Procedez de l'une des manieres suivantes:
- Choisissez Insertion > Ancre nommée.
- Appuyez sur Ctrl+A (Windows) ou Commande+Option+A (Macintosh).
- Sélectionnez l'onglet Commun de la barre Insertion, puis cliquez sur le bouton Ancre nommée.
La boîte de dialogue Ancre nommée apparait.
3 Dans le champ Nom de l'ancre, tapez le nom de l'ancre.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
Le marquee de l'ancre apparaît au niveau du point d'insertion.
Remarque : si vous ne VOYZ pas le marquee de I'ancre, choisissez Afficher > Assistance visuelles > Elements invisibles.
<h1 id="pour-creer-un-lien-vers-une-ancre-nommée">Pour creer un lien vers une ancre nommée :</h1>
1 Dans la fenêtre de création du document, Sélectionnez le texte ou l'image à partir desquels créé le lien.
2 Dans la zone Lien de l'inspecteur de propriétés, tapez le signe dièse (#) et le nom de l'ancre. Exemple :
- Pour creer un lien vers une ancre du document en cours nommée « début», tapez #début.
- Pour creer un lien vers une ancre nommée « début » dans un autre document figurant dans le même dossier, tapez NomDuFichier.html#début.
Remarque : les noms d'ancres respectent la casse.
<h1 id="pour-creer-un-lien-vers-une-ancre-nommée-à-laide-de-la-méthode-pointer-vers-un-fichier">Pour creer un lien vers une ancre nommée à l'aide de la méthode Pointer vers un fichier :</h1>
1 Ouvrez le document contenant l'ancre nommée souhaitee.
Remarque : choisissez Afficher > Assistance visuelles > Eléments invisibles pour faire apparaitre l'ancre, le cas échéant.
2 Dans la fenêtre de création du document, Sélectionné le texte ou l'image à partir desquels créé le lien (s'il s'agit d'un autre document ouvert, vous doivent basculer sur celui-ci).
3 Procedez de l'une des manieres suivantes :
- Cliquez sur l'icone Pointer vers un fisier (à droite de la zone Lien de l'inspecteur de propriétés) et faites-la glisser sur l'ancre vers laquelle vous souhaitez créé un lien, dans le même document ou dans tout autre document ouvert.
- En Maintenant la touche Maj enforcée, dans la fenêtre de document, faites glisser l'image ou le texte sélectionné vers l'ancré vers laquelle créé un lien, dans le même document ou dans un autre document ouvert.
<h1 id="creation-dun-hyperlien">Creation d'un hyperlien</h1>
Il est possible d'ajouter un hyperlien vers un autre fichier.
Pour ajouter un hyperlien en utilisant la commande Hyperlien :
1 Placez le curseur à l'endetroit du document où vous souhaitez que l'hyperlien apparaisse.
2 Procedez de l'une des manieres suivantes pour afficher la boite de dialogue Hyperlien :
- Choisissez Insertion > Hyperlien.
- Sélectionnéz l'onglet Commun sur la barre Insertion, puis cliquez sur le bouton Hyperlien.
La boîte de dialogue Hyperlien apparait.
3 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
4 Cliquez sur OK.
<h1 id="creation-dun-lien-de-messagerie-électronique">Creation d'un lien de messagerie électronique</h1>
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 message est automatiquement complétée par l'adresse indiquée dans le lien.
Pour creer un lien de messagerie electronique à l'aide de la commande Insérer lien message électronique :
1 Dans la fenêtre de document, placez le CURSEUR à l'endetroit où afficher le lien de message électronique ou Sélectionné que le texte ou l'image qui doit représenté ce lien.
2 Procedez de l'une des manières suivantes pour insérer le lien :
- Choisissez Insertion > Lien de messagerie.
- Sélectionnez l'onglet Commun sur la barre Insertion, puis cliquez sur le bouton Lien de messagerie.
La boîte de dialogue Lien de messagerie apparait.
3 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
4 Cliquez sur OK.
Pour creer un lien de messagerie electronique à l'aide de linspecteur de propriétés :
1 Sélectionnéz le texte ou une image dans la fenêtre de création du document.
2 Dans la zone Lien de l'inspecteur de propriétés, tapez mailto:, suivi d'une adresse électronique.
N'insérez pas d'espaces entre le signe deux points et l'adresse électronique. Par exemple, tapes mailto:jdoe@macromedia2.com.
<h1 id="creation-de-liens-nuls-et-de-liens-de-script">Creation de liens nuls et de liens de script</h1>
Les types de lien les plus courants sont ceux qui renvoient à des documents et à des ancrenommées (décrites respectivement dans « Liens entre fichiers et documents », page 429 et « Lien vers un emplacement spécifique au sein d'un document », page 432), mais il en existe d'autres.
Un lien nul est un lien non désigné. Utilisez des liens nuls pour attacher des comportements à des objets ou du texte sur une page. Une fois un lien nul créé, vous pouvez lui attacher un comportement pour intervertir une image ou pour afficher un calque lorsque le curseur est déplace au-dessus du lien. Pour plus d'informations sur l'association de comportements à des objets, voir « Application d'un comportement», page 371.
Les liens de script exécutent un code JavaScript ou appelant une fonction JavaScript et permettent de fournir aux utilisateurs des informations supplémentaires sur un élément sans quitter la page en cours. Les liens de scripts permettent également d'executer des calculs, des validations de formulaires et autres tâches de traitement lorsqu'un visiteur clique sur un élément spécifique.
<h1 id="pour-creer-un-lien-nul">Pour creer un lien nul :</h1>
1 Sélectionnez du texte, unobjet ou une image dans la fenêtre de création du document.
2 Dans l'inspecteur de propriétés, tapez javascript; (le mot javascript suivi par deux points puis par un point-virgule) dans la zone de texte Lien.
<h1 id="pour-creer-un-lien-de-script">Pour creer un lien de script :</h1>
1 Sélectionnez du texte, un objet ou une image dans la fenêtre de création du document.
2 Dans la zone Lien de l'inspecteur de propriétés, tapez javascript: suivi du code JavaScript ou d'un appel de fonction JavaScript.
Par exemple, la saisie de javascript:alert('Ce lien amène à l'index') dans la zone Lien créé un lien qui, lorsque l'on clique dessus, affiche une zone d'alerte JavaScript avec le message Ce lien amène à l'index.
Remarque: le code JavaScript étant inséré entre guillemets (en tant que valeur de l'attribut HREF), vous doivent utiliser des guillemets simples (apostrophes) dans le code du script ou désigner les guillemets évientuels comme faisant partie du code en les faisant précéder d'une barre oblique inversée (par exemple, \("C e\)lien amène à l'index\)".
<h1 id="gestion-des-liens">Gestion des liens</h1>
Dreamweaver peutmettreà jourles liensvers undocument eta partirde ce dernier lorsquvou le déplacez ou renommez au sein d'un site local. Cette fonction opere de façon optimale lorsqu'un site tout entier (ou une section entiere de celui-ci) est stocké sur vosiderque durlocal.
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.
<h1 id="pour-activer-la-gestion-des-liens-dans-dreamweaver">Pour activer la gestion des liens dans Dreamweaver :</h1>
1 Choisissez Edition > Preférences ou Dreamweaver > Préférences (Mac OS X).
La boîte de dialogue Préférences s'affiche.
2 Sélectionnéz la catégorie Général dans la liste de gauche.
Les options Préférences générales apparaissent.
3 Dans la section Options de document, Sélectionnez Toujours ou Invite dans le menu déroulant Mettre à jour les liens lors de la suppression de fichiers.
Si vous choisissez Toujours, Dreamweaver met automatiquement à jour les liens vers un document et à partir de ce dernier lorsque vous le déplacez ou le renommez (pour plus d'informations sur la marche à suivre pour supprimer un fichier, voir « Modification d'un lien au niveau du site », page 438).
Si vous choisissez Invite, Dreamweaver affiche d'abord une boîte de dialogue qui repertorie tous les fichiers affectés par le changement. Cliquez sur Mettre à jour pourmettre à jour les liens de ces fichiers, ou sur Ne pas mettre à jour pour laisser les fichiers intacts.
4 Cliquez sur OK.
Pour accélérer le processus de mise à jour, Dreamweaver peutmaker un fichier cache dans lequel il conservera la liste de tous les liens du site local. Ce fichier cache est créé lorsqu'vous scélectionné l'options Cache dans la boîte de dialogue Définition du site et il est mis à jour chaque fois que vous ajoutez, modifier ou supprimez des liens vers des fichiers du site local dans Dreamweaver.
Pour creer un fichier cache pour votre site :
1 Choisissez Site > Modifier les sites.
La boîte de dialogue Modifier les sites s'affiche.
2 Sélectionnez un site, puis cliquez sur Modifier.
3 Sélectionnéz la catégorieInfos locales dans la liste de gauche.
La boîte de dialogue Définition du site affiche les options desInfos locales.
4 Dans la catégorieInfos locales,selectionnez l'option Activer le cache.
La première fois que vous modifie ou supprimez des liens sur le site local après avoir lancé Dreamweaver, Dreamweaver vous invite à charger le cache. Si vous cliquez sur Oui, le cache se charge et Dreamweaver met à jour tous les liens vers le fjichier que vous venez de modifier. Si vous cliquez sur le bouton Non, la modification est consignée dans le cache, mais celui-ci ne se charge pas et Dreamweaver ne met pas les liens à jour.
Sur les sites de grande taille, le chargement du cache peut prendre quelques minutes; l'essentiel de ce temps est utilisé pour comparer l'heure et la date des fichiers qui se trouvent sur le site local à celles enregistrées dans le cache, afin de voir si le cache est périmé. Si vous n'avez pas modifié de fichiers hors de Dreamweaver, vous pouvez cliquer sur le bouton d'arrêt en toute sécurité lorsque le bouton apparait.
Pour recréer le cache pour votre site :
Dans le panneau Site,CHOISSEZ Site > Recreer le cache du site.
<h1 id="creation-et-modification-de-liens-dans-la-carte-du-site">Creation et modification de liens dans la carte du site</h1>
Vouss pouvez modifier la structure du site dans la carte du site, en ajoutant, modifier ou supprimant des liens. Dreamweaver met automatiquement à jour la carte du site pour indiquer les modifications apportées au site.
Pour ajouter un lien, procedede l'une des manieres suivantes:
- Faites glisser une page depuis l'Explorateur de Windows ou le Sélecteur du Macintosh vers une page dans la carte du site.
Remarque : vérifie que le panneau Site est ancre, puis cliquez sur la flèche Etendre. Sélectionnez Carte et fichiers en maintainant le bouton Carte du site enforcé.
- Sélectionnez une page HTML dans la carte du site, puis choisissez Site > Lier au fichier existant (Windows) ou Site > Affichage de la carte du site > Lier au fichier existant (Macintosh) ou choisissez Lier au fichier existant dans le menu contextualuel.
- Sélectionnez une page HTML dans la carte du plan, puis choisissez Site > Lier au nouveau fjichier (Windows) ou Site > Affichage de la carte du site > Lier au nouveau fjichier (Macintosh) ou choisissez Lier au nouveau fjichier dans le menu contextuel.
- Sélectionnez une page HTML dans la carte du site ; l'icone Pointer vers un fichier apparait. Faites glisser l'icone vers l'objet vers lequel créé un lien : il peut s'agir d'un fichier du mode Fichiers du site, d'un document Dreamweaver ouvert ou d'une ancre nommée dans un document ouvert sur le bureau.
Remarque : pour plus d'informations, voir « Liens entre fichiers et documents », page 429.
<h1 id="pour-changer-un-lien">Pour changer un lien :</h1>
1 Dans la carte du site, selectionnez une page dont vous souhaitez changer le lien (de sorte que le document qui possède un lien vers cette page pointe vers une autre page), puis procédez de l'une des manières suivantes :
- Choisissez Site > Modifier le lien (Windows) ou Site > Affichage de la carte du site > Modifier le lien (Macintosh).
Remarque : utilisez le menu Site de la fenetre Site.
- Clique à l'aide du bouton droit (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh), puis choisisse Modifier le lien dans le menu contextualuel.
2 Naviguez jusqu'au fichier vers lequel le lien devra pointer ou tapez une URL.
3 Cliquez sur OK.
<h1 id="pour-supprimer-un-lien-procedez-de-lune-des-manieres-suivantes">Pour supprimer un lien, procedez de l'une des manieres suivantes :</h1>
- Sélectionnez la page dans la carte du site, puis désisissez Site > Supprimer le lien (Windows) ou Site > Affichage de la carte du site > Supprimer le lien (Macintosh).
Remarque : utilisez le menu Site de la fenetre Site.
- Sélectionnez la page dans la carte du site, puis cliquez à l'aide du bouton droit (Windows) ou en maintainant la touche Contrôle enfonnée (Macintosh) etCHOISISEZ Supprimer le lien dans le menu contextualuel.
La suppression d'un lien ne supprime pas le fichier mais supprime le lien provenant de la source HTML sur la page qui pointe vers le lien.
<h1 id="pour-ouvrir-la-source-dun-lien">Pour ouvrir la source d'un lien :</h1>
Selectionnez un fjichier dans la carte du site, puis procédez de l'une des manières suivantes :
- Choisissez Site > Ouvrir la source du lien (Windows) ou Site > Affichage de la carte du site > Ouvrir la source du lien (Macintosh).
- Clique à l'aide du bouton droit (Windows) ou en maintainant la touche Contrôle enforcée (Macintosh) et choisissez Ouvrir source du lien dans le menu contextualuel.
L'inspecteur de propriétés et le fjichier source contenant le lien s'ouvre dans la fenêtre de document. Le lien y est en surbrillance.
<h1 id="modification-dun-lien-au-niveau-du-site">Modification d'un lien au niveau du site</h1>
Outre la mise à jour automatique des liens par Dreamweaver à chaque fois que vous déplacez ou renommez un fichier, vous pouvez modifier manuellement tous les liens (y compris les liens de messagerie électronique, ftp, nuls et de scripts) pour qu'ils pointent sur un autre chemin.
Vou puevez utiliser cette option à tout moment (par exemple, il se peut que les mots « au menu cette semaine » soient liés à /menus/32.html dans tout le site et que, la semaine suivante, vous deviez changer ces liens pour qu'ils pointent sur /menus/33.html); mais elle est particulièrement utile lorsque vous désirez supprimer un fisier vers lequel pointent des liens dans d'autres fisiers.
<h1 id="pour-changer-un-lien-à-léchelle-de-tout-le-site">Pour changer un lien à l'échelle de tout le site :</h1>
1 Sélectionnez un fjichier dans l'affichage local du panneau Site.
Remarque: si vous changez un lien de messagerie électronique, ftp, nul ou de script, vous n'avez pas besoin de sélectionner de fischier.
2 Choisissez Site > Modifier le lien au niveau du site.
La boîte de dialogue Modifier le lien au niveau du site apparait.
3 Complétez la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
4 Cliquez sur OK.
Dreamweaver met à jour tous les documents qui pointent vers le fichier sélectionné, en les faisant pointer vers le nouveau fichier suivant le format de chemin d'accès existant (par exemple, si l'ancien chemin était relatif au document, le nouveau l'est également). Le type de lien (relatif au document ou à la racine) n'a pas d'importance. Dreamweaver met automatiquement le lien à jour.
Lorsqu'un lien a eté changé au niveau de tout le site, le fichier seLECTIONné devient orphelin (plusaucun fichier du disque local ne pointe vers lui).Vous pouvez le supprimer en toute sécurité sans risque d'alterer des liens sur le site local Dreamweaver.
Remarque : ces modifications se produitant localement, vous doivent supprimer manuellement le fichier orphelin correspondant sur le site distant et placer ou archiver tous les fichiers dans lesquels les liens ont ete modifiés, sinon les visiteurs ne pourront pas visualiser les modifications.
<h1 id="création-de-menus-de-reroutage">Création de menus de reroutage</h1>
Un menu de reroutage est un menu dérouulant dans un document, visible pour tous les visiteurs du site et répertioriant les options quilient vers des documents ou fischiers. Vous pouvez créé des liens vers des documents de votre site Web ou d'un autre site, des liens de messagerie électronique, des liens vers des images ou vers tout type de fischier pouvant être ouvert dans un navigateur.
Un menu de reroutage peut composertrois composants de base :
- Une invite de selection au sein du menu, par exemple une description de catégorie pour les éléments du menu ou des instructions, du type « Faites votrechoix »
- Une liste d' éléments de menu de reroutage : l'utilisateur可以选择 une option et le document ou le fichier lie apparait (obligatoire).
- Un bouton Atteindre (facultatif).
<h1 id="insertion-dun-menu-de-reroutage">Insertion d'un menu de reroutage</h1>
Pour insérer un menu de reroutage dans un document, utilisez l'objet de formulaire Menu de reroutage.
<h1 id="pour-creer-un-menu-de-reroutage">Pour creer un menu de reroutage :</h1>
1 Ouvrez un document, puis placez le curseur dans la fenetre de document.
2 Procedez de l'une des manieres suivantes:
- Choisissez Insertion > Obj de formulaire > Menu de reroutage.
- Sélectionnez l'onglet Formulaire sur la barre Insertion, puis cliquez sur le bouton Menu dereroutage.
La boîte de dialogue Insérer un Menu de reroutage apparait.
3 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
4 Cliquez sur OK.
Le menu de reroutage apparait dans votre document.
<h1 id="modification-déléments-de-menu-de-reroutage">Modification d'éléments de menu de reroutage</h1>
Pour apporter des modifications aux éléments d'un menu de reroutage, utilisez l'inspecteur de propriétés ou le panneau Comportements. Vous pouvez changer l'ordre dans lequel les éléments apparaissent dans la liste, modifier le fjichier vers lequel pointe un élément, et ajouter, supprimer ou renomer un élément.
Pour modifier l'emplacement d'ouverture d'un fichier lie ou pour ajouter ou modifier une invite de selection de menu, vous doivent utiliser le panneau Comportements (voir « Menu de reroutage», page 383).
Pour modifier un menu de reroutage à l'aide de l'inspecteur de propriétés :
1 Choisissez Fenetre > Propriétés pour ouvrir l'inspecteur de 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 selectionner.
L'icônelige / Menu apparait dans linspecteur de propriétés.
3 Dans l'inspecteur de propriétés, cliquez sur le bouton Valeurs de la liste. La boîte de dialogue Valeurs de la liste s'affiche.
4 Apportez les modifications requises aux éléments du menu, puis cliquez sur OK.
<h1 id="dépannage-des-menus-de-reroutage">Dépannage des menus de reroutage</h1>
Lorsqu'un élément de menu a été sélectionné, il n'est plus possible de le sélectionner à nouveau si le visiteur revient à cette page ou si la zone Ouvrir les URL dans pointe sur un cadre. Il existe deux méthodes pour contourner ce problème :
- Utiliser une invite de sélection au sein du menu, par exemple une catégorie, ou une instruction, du type « Faites votrechioix ». Une invite de sélection au sein du menu est reseLECTIONnée après chaque sélection.
Utiliser un bouton Aller, qui permet à l'utilisateur de visiter à nouveau le lien déjà sélectionné.
Remarque : dans la boite de dialogue Insérer menu de reroutage, vous ne devez selectionner qu'une option pour chaque menu de reroutage, car elles s'appliquent à la totalité du menu de reroutage.
<h1 id="création-de-barres-de-navigation">Création de barres de navigation</h1>
Une barre de navigation est composée d'une image ou d'une série d/images qui changent en fonction des actions de l'utilisateur. Les barres de navigation constituent souvent une méthode simple pour se déplacer entre des pages et des fichiers sur un site.
Avant d'utiliser l'option Insérer une barre de navigation, créez un ensemble d'images pour les états d'affichage de chaque élément de navigation (il peut être utile d'imaginer un élément de barre de navigation en tant que bouton car, lorsque celui-ci est cliqué, il amène l'utilisateur à une autre page).
Un élément de barre de navigation peut avoir quatre états :
- Haut : l'image qui s'affiche lorsque l'utilisateur n'a pas encore cliqué ou interagi avec l'objet. Par exemple, l'objet dans cet état est tel qu'il n'est pas cliqué.
- Survolie : l'image qui s'affiche lorsque le pointeur de la souris est déplace au-dessus de l'image Haut. L'aspect de l'objet change (par exemple, il peut paraitre plus clair) pour spécifique à l'utilisateur qu'il peut interagir avec celui-ci.
- Bas : l'image qui s'affiche une fois l'élement cliqué.
Par exemple, lorsqu'un utilisateur clique sur un élément, une nouvelle page est chargée et la barre de navigation est toujours affichée, mais l'élement cliqué est asombri pour indiquer qu'il est seLECTIONné.
- Image Au-dessus lorsqu'Abaissée : l'image qui s'affiche lorsque le pointeur est place au-dessus de l'image Bas une fois l'objet cliqué.
Par exemple, l'objet peut apparaître estompé ou grise. Vous pouvez utiliser cet état comme indice visuel pour indiquer aux utilisateurs qu'il n'est pas possible de cliquer à nouveau sur cet élément lorsqu'ils se trouvent dans cette section du site.
Vous n'avez pas à inclure des images de barre de navigation pour les quatre états. Par exemple, vous pouvez uniquement définir les états Haut et Bas.
Vou puez creer 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érences etats en fonction de la page en cours.
<h1 id="insertion-dune-barre-de-navigation">Insertion d'une barre de navigation</h1>
Lorsque vous insérez une barre de navigation, vous nommez les éléments de celle-ci et seLECTIONné les images à utiliser pour ces derniers.
<h1 id="pour-creer-une-barre-de-navigation">Pour creer une barre de navigation :</h1>
1 Procedez de l'une des manieres suivantes:
- Choisissez la commande Insertion > Images interactives > Barre de navigation.
- Sélectionnéz l'onglet Commun sur la barre Insertion, puis cliquez sur le bouton Insérer une barre de navigation.
La boîte de dialogue Insérer une barre de navigation apparait.
2 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
3 Cliquez sur OK.
<h1 id="modification-dune-barre-de-navigation">Modification d'une barre de navigation</h1>
Après avoir créé une barre de navigation pour un document, vous pouze lui ajouter ou en supprimer des images à l'aide de l'options Modifier la barre de navigation. Cette option permet de modifier une image ou un ensemble d'images, de changer le nom du fichier qui s'ouvre lorsque l'utilisateur clique sur un des boutons, de selectionner un autre cadre ou une autre fenêtre cible pour l'ouverture de ce fichier et de réorganiser la position des images.
Pour modifier une barre de navigation :
1 Choisissez Modifier > Barre de navigation.
La boîte de dialogue Modifier la barre de navigation apparait.
2 Dans la liste des éléments de la barre de navigation, Sélectionnez celui à modifier.
3 Apportez les modifications de votrechoix.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
4 Cliquez sur OK.
<h1 id="creation-de-cartes-graphiques">Creation de cartes graphiques</h1>
Une carte graphique est une image ayant eté divisée en régions, ou « zones réactives ». Lorsque vous cliquez sur une zone réactive, une action est executée, telle que l'ouverture d'un nouveau fichier. Utilisez l'inspecteur de propriétés d'image pour créé et modifier graphiquement des cartes graphiques sur le client.
Les cartes graphiques sur le client conservent les informations propres aux liens hypertextes dans le corps du document HTML, alors que les cartes graphiques sur le serveur conservent ces informations dans un fichier de carte séparé. Lorsque l'utilisateur clique sur la zone réactive d'une image, l'URL associée est directement envoyée au serveur. Ceci rend les cartes graphiques sur le client plus rapides que leurs équivalents sur le serveur, car celui-ci n'a pas à interpréter les coordonnées du point sur lequel l'utilisateur a cliqué. Les cartes graphiques sur le client sont prises en charge par Netscape Navigator à partir de sa version 2.0, par NCSA Mosaic 2.1 et 3.0, et par toutes les versions de Microsoft Internet Explorer.
Dreamweaver ne modifie pas les références aux cartes graphiques sur le serveur, dans les documents existants. Vous pouvez utiliser les cartes graphiques côté client et côté serveur dans le même document. Les navigateurs qui prennten en charge les deux types de cartes donnant la priorité aux cartes graphiques sur le client. Pour inclure une carte graphique sur le serveur dans un document, vous doivent écrire le code HTML approprié.
<h1 id="insertion-de-cartes-graphiques-sur-le-client">Insertion de cartes graphiques sur le client</h1>
Pour insérer une carte graphique sur le client, creez une zone réactive, puis définitisse un lien qui s'ouvre lorsqu'un utilisateur clique sur la zone réactive.
<h1 id="pour-creer-une-carte-graphique-sur-le-client">Pour creer une carte graphique sur le client :</h1>
1 Sélectionnez l'image dans la fenêtre de document.
2 Dans l'inspecteur de 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 le champ Nom de la carte, tapez un nom unique pour la carte graphique.
Remarque: si vous utilisez plusieurs cartes graphiques dans le même document, voirlez à donner à chaque carte un nom unique.
4 Pour définir les zones de la carte graphique, procédez de l'une des manières suivantes :
- Sélectionnéz l'outil Cercle et tirez le pointeur sur l'image pour creer une zone réactive circulaire.
- Sélectionnez l'outil Rectangle et déplacez le pointeur sur l'image pour creer 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 de propriétés de cette zone apparait.
5 Complétez l'inspecteur de propriétés de la zone réactive.
Pour plus d'informations, cliquez sur le bouton Aide de l'inspecteur de propriétés.
6 Une fois la définition de la carte de l'image terminée, cliquez sur une zone vierge du document pour modifier l'inspecteur de propriétés.
<h1 id="modification-dune-carte-graphique">Modification d'une carte graphique</h1>
Vou puez facilement modifier les zones reactives que vous creez dans une carte graphique.
Vou pouze déplacer un groupe de zones reactives, redimensionner des zones reactives ou déplacer une zone reactive vers l'avant ou l'arriere dans un calque.
Voupez egelement copier une image contenant des zones reactives d'un document vers un autre ou copier une ou plusieurs zones reactives d'une image et les coller vers une autre image. Les zones reactives associées à l'imagé sont egelement copiees vers le nouveau document.
<h1 id="pour-sélectionner-plusieurs-zones-réactives-dans-une-carte-graphique">Pour sélectionner plusieurs zones réactives dans une carte graphique :</h1>
1 Utilisez le pointeur de zone réactive pour sélectionner une zone réactive.
2 Procedez de l'une des manieres suivantes:
- En maintainant la touche Maj enforcée, cliquez tour à tour sur les autres zones reactives à seLECTIONner.
- Appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh) pour sélectionner toutes les zones réactives.
<h1 id="pour-déplacer-une-zone-réactive">Pour déplacer une zone réACTIVE :</h1>
1 Utilisez le pointeur de zone réactive pour sélectionner la zone réactive à déplacer.
2 Procedez de l'une des manieres suivantes:
- Faites glisser la zone réactive vers une nouvelle zone.
- Utilisez la touche Maj et une touche fléchée pour déplacer une zone réACTIVE de 10 pixels dans le sens sélectionné.
- Utilisez les touches fléchéées pour déplacer une zone réactive de 1 pixel dans le sens seLECTIONné.
<h1 id="pour-redimensionner-une-zone-réactive">Pour redimensionner une zone réactive :</h1>
1 Utilisez le pointeur de zone réactive pour sélectionner la zone réactive à redimensionner.
2 Faites glisser une poignée de selection de la zone réactive pour modifier la taille ou la forme de cette-ci.
<h1 id="association-de-comportements-à-des-liens">Association de comportements à des liens</h1>
Voussousqueyouinserezdeselementsliésdansvoduments.
Texte de la barre d'etat permet de spécifier le texte d'un message et de l'afficher dans la barre d'etat dans la partie inférieure gauche de la fenêtre du navigateur. Par exemple, vous pouvez utiliser cette action pour déscrire la destination d'un lien dans la barre d'etat, au lieu d'afficher l'URL associée (voir « Texte de la barre d'etat», page 390).
Ouvrir la fenêtre Navigator ouvre une URL dans une nouvelle fenêtre. Vous pouvez spécifique les propriétés de la nouvelle fenêtre, dont sa taille, ses attributs (redimensionnement ou non, dispose d'une barre de menu ou non, etc.), ainsi que son nom (voir « Ouvrir la fenêtre Navigator», page 384).
Menu de reroutage modifie un menu de reroutage. Vous pouvez modifier la liste du menu, spécifique un fichier lié différent ou changer l'emplacement du navigateur dans lequel ouvrir le document lié (voir « Menu de reroutage », page 383).
Définir image barre de navigation modifie le comportement d'une barre de navigation. Ce comportement permet de modifier la façon dont les images s'affichent dans une barre de navigation. Par exemple, lorsque le pointeur survole une partie de la barre de navigation, l'affichage d'autres images de la barre de navigation ou du document peut changer (voir « Définir image barre de navigation», page 387).
<h1 id="chapitre-27-2">CHAPITRE 27</h1>
<h1 id="gestion-des-actifs-de-site-des-bibliothèques-et-des-modèles">Gestion des actifs de site, des bibliothèques et des modèles</h1>
A mesure que vous développpez des sites Web, vous assemblez un nombre croissant d'actifs. Dans certains cas, vous pouvez utiliser les mêmes actifs dans plusieurs sites ou recourir à un groupe d'actifs favoris dans tous vos sites. Dans Macromedia Dreamweaver MX, vous pouce utiliser le panneau Actifs pour:gérer les actifs de votre site. Le panneau Actifs permit de repertorier et de prévisualiser certains types d'actifs inclus dans un site, notamment les images, les animations, les couleurs, les scripts et les liens. Vous pouvez faire glisser un élément depuis le panneau Actifs vers le document courant pour l'insérer dans une page.
Le panneau Actifs permet également d'acceder à deux types d'actifs spéciaux : les bibliothèques et les modèles. Les éléments de bibliothèque et les modèles sont des actifs liés : lorsqu'une modification est apportée à un élément de bibliothèque ou à un modele, l'ensemble des documents contenant cet actif sont mis à jour. Utilisez des éléments de bibliothèque et des modèles si vous souhaitez insérer du contenu ou des éléments de presentation spécifique à différents emplacements d'un même site, ou bien dans plusieurs sites à la fois. Les éléments de bibliothèque constituent des éléments de conception individuels, tels que les informations de copyright d'un site ou un logo. Les modèles permettent de définir la conception de zones plus larges. Le creator d'un modele élabore une page et définit les régions de cette page dont la conception ou le contenu pourrait être modifiés.
Ce chapitre contient les rubriques suivantes :
- « Utilisation du panneau Actifs», page 448
Gestion du panneau Actifs page 456
- « Utilisation des éléments de bibliothèque», page 459
- « Création, gestion et modification des éléments de bibliothèque», page 459
- « A propos des modèles Dreamweaver», page 464
- « Création d'un modele Dreamweaver», page 470
- « A propos de la définition des régions de modulo», page 465
- « Création d'un document à partir d'un modele», page 480
- « Création d'un modele imbriqué», page 487
- « Modification et mise à jour des modèles », page 488
- « Exportation et importation du contenu XML d'un modele », page 490
<h1 id="utilisation-du-panneau-actifs">Utilisation du panneau Actifs</h1>
Le terme actif désigne un certain nombre d' éléments utilisés dans un site, tels qu'un fjichier d' image ou d'animation.
Voussouvezobtenirdesactifsa partirdedifferentesources.Parexample,vousoupezecrderdes actifs dans uneapplication,tellequeMacromediaFireworksouMacromediaFlash,lesrecevoir d'un collage ou d'un client,les copier a partir d'un CD-ROM de graphiques,ou bien encore les copier a partir d'un site Webd'images.Pourplusd'informations surla planification et le rassemblementd'actifs,voir «A proposde la planification et de la creation du site»,page 57.
VoupeusutiliserlepanneauActifsde deuxfacondfifferentes:en tantque listedesactifsdu sitefacementaccessible(lalistese Site)ouenantque listedesactifslesplusfrequementutilisés (la liste Favoris).Le panneau Actifs place automatiquement les actifs de vour site dans laiste Site.
Voupeazajouter touslesactifsqueyoussoushaitezàlaisteFavoris.
La plupart des fonctions du panneau Actifs peuvent etre utilisées à la fois dans les listedes Site et Favoris. Toutefois, il existe quelques tâches qui ne peuvent etre réalisées que dans la liste Favoris (voir « D'Etition d'une liste d'actifs favoris », page 457).
<h1 id="ouverture-du-panneau-actifs">Ouverture du panneau Actifs</h1>
Utilisez le panneau Actifs pour afficher les actifs du site courant ou pour visualiser les actifs qui ont ete enregistrres dans une liste Favoris.
Voudevezdefinirunsite local avantd'afficherlesactifs dansle panneauActifs.
Pour ouvrir le panneau Actifs :
Choisissez Fenetre > Actifs.
Le panneau Actifs s'affiche. La catégorie Images est selectionnée par défaut.
<h1 id="sélection-dune-catégorie-dactifs">Sélection d'une catégorie d'actifs</h1>
Le panneau Actifs permet de gérer et d'organiser les actifs du site plus facilement que le panneau Site. Les actifs sont classés en catégories et affichés sous forme de liste.
Pour afficher les actifs d'une catégorie spécifique, cliquez sur l'icone correspondante. Les catégories d'actifs suivantes sont disponibles dans Dreamweaver :
Les images sont des fichiers d'image, au format GIF, JPEG ou PNG. Pour plus d'informations sur les images, voir « Insertion d'images», page 311.
Les couleurs sont les couleurs utilisées dans les documents et feuilles de style du site, y compris les couleurs du texte, de l'arrête-plan et des liens.
Les URL sont les liens externes contenus dans les documents du site courant. Cette catégorie comprend les types de liens suivants: FTP, gopher, HTTP, HTTPS, JavaScript, message électronique (mailto) et filchier local (file://).
Les animations Flash sont des fichiers dans toute version du format Flash de Macromedia. Seuls les fichiers SWF (fichiers Flash compressés) s'affichent dans le panneau Actifs. Les fichiers FLA (source Flash) ne s'affichent pas. Voir « A propos du contenu Flash», page 340.
Les animations Shockwave sont des fichiers dans toute version du format Shockwave de Macromedia. Voir « Insertion d'animations Shockwave», page 346.
Les animations sont des fichiers au format QuickTime ou MPEG. Voir « Insertion d'éléments multimédia», page 337.
Les scripts sont des fischiers JavaScript ou VBScript. Notez que les scripts dans les fischiers HTML (plutôt que dans des fischiers JavaScript ou VBScript indépendants) n'apparaissent pas dans le panneau Actifs. Pour plus d'informations sur l'utilisation de JavaScript dans Macromedia Dreamweaver, voir « Utilisation du débogueur JavaScript», page 217.
Les modèles permettent d'utiliser la même mise en forme sur plusieurs pages. Lorsqu'une modification est apportée à un modele, Dreamweaver met à jour la mise en forme de toutes les pages associées à ce modele. Voir « A propos des modèles Dreamweaver», page 464.
Les éléments de bibliothèque sont 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. Voir « Utilisation des éléments de bibliothèque », page 459
Remarque : seuls les fichiers qui entrent dans ces catégories s'affichent dans le panneau Actifs. Il existe d'autres types de fichiers parfois appelés actifs, mais ils ne sont pas affichés dans le panneau.
<h1 id="visualisation-des-actifs-dans-le-panneau-actifs">Visualisation des actifs dans le panneau Actifs</h1>
Le panneau Actifs offre deux methodes de visualisation des actifs : la liste Site, qui repertorie tous les actifs du site et la liste Favoris, qui affiche uniquement les actifs explicitement selectionnés.
Les actifs sont classés en catégories dans les deux listes ; pour selectionner la catégorie d'actifs à répertorier, cliquez sur l'un des boutons de catégorie situés sur le côte gauche du panneau. Les listes Site et Favoris sont toutes deux disponibles pour toutes les catégories d'actifs à l'exception des modèles et éléments de bibliothèque.
La liste Site répertorie tous les actifs qui existent en tant que fichiers dans le site, ainsi que toutes les couleurs et URL utilisées dans tout document du site.
La plupart des procédures suivantes peuvent être executées dans la liste Site ou Favoris.
Pour afficher la liste Site :
Cliquez sur le bouton Site en haut du panneau Actifs.
Remarque : dans les catégories Modèles et Bibliothèque, leschiox Site et Favoris ne sont pas disponibles.
Pour afficher la liste Favoris :
Cliquez sur le bouton Favoris en haut du panneau Actifs.
La liste Favoris est vide tant que vous ne lui ajoutez pas explicitement des actifs.
Pour afficher les actifs d'une catégorie spécifique :
Cliquez sur l'icone de la catégorie appropriée, puis cliquez sur le bouton Site ou Favoris. Par exemple, pour afficher toutes les images du site, cliquez sur l'icone Images, puis sur le bouton Site.
Pour prévisualiser un actif :
Selectionnez l'actif dans le panneau Actifs.
La zone d'aperçu en haut du panneau affiche une prévisualisation de l'actif. Par exemple, lorsque vous Sélectionnéz un actif de type animation, une icône s'affiche dans la zone d'aperçu. Pour visualiser l'animation, cliquez sur le bouton Lecture (le triangle vert) dans l'angle supérieur droit de la zone d'aperçu.
Pour modifier la taille de la zone d'aperçu :
Faites glisser la barre de séparation (entre la zone d'aperçu et la liste des actifs) vers le haut ou vers le bas.
<h1 id="actualisation-du-panneau-actifs">Actualisation du panneau Actifs</h1>
La création de la liste Site par le panneau Actifs peut prendre quelques secondes, le panneau devant dire le cache du site pourisser la liste.
Certaines modifications n'apparaissent pas immédiatement dans le panneau Actifs :
- Lorsque vous ajoutez ou supprimez un actif du site, les modifications ne sont pas répercutées dans le panneau Actifs tant que vous n'actualisez pas la liste Site enclistant sur le bouton Actualiser la liste du site. Si vous ajoutez ou supprimez un actif en dehors de Dreamweaver (via l'Explorateur Windows ou le Finder, par exemple), vous doivent recreer 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 filchier contenant une couleur ou une URL n'ayant pas encore été utilisé dans le site, les modifications ne sont répercutées dans le panneau Actifs qu'une fois la liste Site actualisée.
PouractualisermanuellementlalisteSite：
1 Cliques sur Site dans le panneau Actifs pour afficher la liste Site.
2 Cliques sur le bouton Actualiser la liste du site en bas du panneau Actifs.
Le cache du site est créé ou mis à jour et le panneau Actifs est actualisé pour afficher tous les actifs du site.
Pour reconstruire manuellement le cache du site etactualiser la liste Site :
Appuyez sur Ctrl (Windows) ou Commande (Macintosh), et cliquez sur la liste du panneau Actifs. Choisissez Actualiser la liste des sites.
<h1 id="ajout-dun-actif-à-une-page">Ajout d'un actif à une page</h1>
Vous pouvez insérer la plupart des actifs dans un document en les faisant glisser dans la fenêtre de document en mode Code ou en mode Création, ou bien en utilisant le bouton Insérer. Vous pouvez insérer des couleurs et des URL ou les appliquer au texte sélectionné en mode Création (les URL peuvent également être appliquées aux autres éléments, telles que des images, en mode Création). Les modèles sont appliqués au document entier.
<h1 id="pour-insérer-un-actif-dans-un-document">Pour insérer un actif dans un document :</h1>
1 En mode Creation, placez le point d'insertion à l'endetroit où afficher l'actif.
2 Choisissez Fenêtre > Actifs pour ouvrir le panneau Actifs (s'il n'est pas déjà ouvert).
3 Sélectionnéz la catégorie de l'actif que vous souhaitez insérer.
Selectionnez toute catégorie autre que Modèles. Un modèle peut uniquement être appliqué à un document entier. Il ne peut pas être inséré dans un document.
4 Sélectionnez Site ou Favoris et recherche l'actif souhaité.
Il n'este pas de liste Site ou Favoris pour les éléments de bibliothèque. Omettez cette étape si vous insérez un tel élément.
5 Procedez de l'une des manieres suivantes:
- Faites glisser l'actif depuis le panneau vers le document. Vous pouvez faire glisser des scripts dans la zone du contenu de l'en-tête de la fenêtre de document. Si cette zone n'est pas visible,CHOISSEZ AFFICHAGE > Contenu de I'en-tête.
- Sélectionnéz l'actif dans le panneau, puis cliquez sur le bouton Insérer.
L'actif est inséré dans le document. Si l'actif est une couleur, son application commence au niveau du point d'insertion. Tout le texte à la suite de ce point apparait dans cette couleur.
<h1 id="application-dune-couleur-à-laide-du-panneau-actifs">Application d'une couleur à l'aide du panneau Actifs</h1>
Les couleurs répertoriées dans le panneau Actifs correspondant aux couleurs que vous avez appliquées aux différents éléments du site : texte, cordures de tableau, arrêté-plan, etc. La catégorie Couleurs permet d'appliquer de façon homogène les couleurs sélectionnées à plusieurs objets d'une même page.
Pour plus d'informations sur l'ajout de couleurs à la catégorie Couleurs, voir « Ajout d'une nouvelle couleur ou d'une nouvelle URL à la liste Favoris », page 457.
<h1 id="pour-modifier-la-couleur-du-texte-sélectionné-dans-un-document">Pour modifier la couleur du texte sélectionné dans un document :</h1>
1 Sélectionnéz du texte dans le document.
2 Sélectionnéz la catégorie Couleurs dans le panneau Actifs.
3 Sélectionnéz la couleur souhaïée.
4 Cliquez sur le bouton Appliquer.
<h1 id="insertion-dun-lien-url-dans-un-document-à-laide-du-panneau-actifs">Insertion d'un lien URL dans un document à l'aide du panneau Actifs</h1>
VoussouspoucezutiliserlepanneauActifs pourinsererun lienURLdans undocument ou pour convertir letexteselectionnéen lienURL.
Pour ajouter un lien à la seLECTION courante dans un document :
1 Sélectionnéz le texte ou l'image que vous souhaitez convertir en lien URL.
2 Sélectionnéz la catégorie URL dans le panneau Actifs, puis localisez l'URL souhaïée.
3 Procedez de l'une des manieres suivantes:
- Faites glisser l'URL depuis le panneau vers la sélection dans la fenêtre de document en mode Création.
- Sélectionnez l'URL et cliquez sur le bouton Insérer.
Pour ajouter un lien dans un document :
1 Placez le point d'insertion dans le document à l'endetroit où vous souhaitez ajouter l'URL.
2 Sélectionnéz la catégorie URL dans le panneau Actifs, puis localisez l'URL souhaïée.
3 Procedez de l'une des manieres suivantes:
- Faites glisser l'URL du panneau vers la sélection dans le mode Création.
- Sélectionnéz l'URL et cliquez sur le bouton Insérer.
<h1 id="selection-et-édition-dactifs">Selection et édition d'actifs</h1>
Le panneau Actifs permet de selectionner simultanement plusieurs actifs ; il offre également un moyen rapide pour commencer l'edition d'actifs.
Pour sélectionner plusieurs actifs :
Selectionnez l'un des actifs en cliquant dessus. Selectionnez ensuite les autres actifs à l'aide de l'une des méthodes suivantes :
- Cliquez en maintainant la touche Maj enforcée pour seLECTIONner une série consécutive d'actifs.
- Cliquez en maintainant la touche Contrôle (Windows) ou la touche Commande (Macintosh) enforcée pour ajouter un actif individuel à la seLECTION (qu'il soit adjacent ou non à la selection existante). Cliquez en maintainant la touche Contrôle (Windows) ou la touche Commande (Macintosh) enforcée sur un actif seLECTIONné pour le déslectionner.
<h1 id="pour-modifier-un-actif">Pour modifier un actif :</h1>
1 Procedez de l'une des manières suivantes:
- Double-cliquez sur l'actif.
- Sélectionnéz l'actif, puis cliquez sur Modifier.
Pour certains types d'actifs tels que les images, l'édition de l'actif démarre une application d'édition externe. Dans le cas des couleurs et des URL, l'édition des actifs permet uniquement de modifier la valeur d'un actif dans la liste Favoris (vous ne pouvez pas modifier les couleurs et les URL dans la liste Site). Dans le cas des modèles et des éléments de bibliothèque, l'édition des actifs permet d'apporter des modifications à un actif au sein de Dreamweaver.
Si aucun éditeur externe ne s'ouvre pour un actif censé en utiliser un, choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X), Sélectionnez la catégorie Types de fichiers/Editeurs, puis assurez-vous qu'un éditeur externe est définir pour le type de fichier de l'actif. Voir « Lancement d'un éditeur externe pour des fichiers multimédia», page 338.
2 Modifiez les actifs suivant vos besoin.
3 Une fois l'edition d'un actif terminée, procédez de l'une des manières suivantes :
- Si l'actif est un actif base sur un fisier (totl objecte autre qu'une couleur ou une URL), enregistrez-le (via l'éditeur utilisé pour le modifier), puis fermez-le.
- Si l'actif est une URL, cliquez sur OK une fois l'edition terminée dans la boite de dialogue Modifier l'URL.
Si l'actif est une couleur, le sélecteur de couleur de Dreamweaver est automatiquement fermé lorsqu'you sélectionné une couleur (pour fermer le sélecteur de couleur sans seLECTIONner de couleur, appuyez sur la touche Echap).
<h1 id="utilisation-de-la-catégorie-bibliothèque-du-panneau-actifs">Utilisation de la catégorie Bibliothèque du panneau Actifs</h1>
La catégorie Bibliothèque du panneau Actifs affiche tous les éléments de la bibliothèque du site en cours.
Pour plus d'informations sur la modification ou la mise à jour d'un élément de bibliothèque, voir « Modification d'un élément de bibliothèque», page 461.
Pour creer un nouvel élément de bibliothèque vide dans le panneau Actifs :
1 Verifiez que rien n'est seLECTIONné dans la fenêtre de document.
Si un élément est seLECTIONné, il est placé dans le nouvel élément de bibliothèque.
2 Cliquez sur le bouton Nouvel élément de bibliothèque au bas du panneau Actifs.
Un nouvel élément sans titre est ajusté à la liste du panneau.
3 AVEC I'elément tousjours selectionne, tapez le nom que vous voulez lui donnee.
<h1 id="pour-insérer-un-élément-de-bibliothèque-dans-un-document">Pour insérer un élément de bibliothèque dans un document :</h1>
1 Dans la fenêtre de document, placez le pointeur à l'endetroit où vous souhaitez insérer l'élement de bibliothèque.
2 Sélectionnéz la catégorie Bibliothèque dans le panneau Actifs, puis recherche l'objet de bibliothèque souhaité.
3 Procedez de l'une des manieres suivantes:
- Faites glisser l'objet de bibliothèque depuis le panneau vers la sélection en mode Création.
- Sélectionnéz l'élement de bibliothèque, puis cliquez sur le bouton Insérer.
<h1 id="pour-modifier-un-élément-de-bibliothèque">Pour modifier un élément de bibliothèque :</h1>
Selectionnez un élément de bibliothèque dans la liste et cliquez sur le bouton Modifier ou double-cliquez sur le nom de l'élément dans la liste.
<h1 id="pour-supprimer-un-élément-de-bibliothèque">Pour supprimer un élément de bibliothèque :</h1>
1 Sélectionnez l'élement de bibliothèque dans le panneau Actifs.
2 Cliquez sur le bouton Supprimer ou appuyez sur la touche Suppr puis confirmez que vous poulez supprimer l'objet de bibliothèque.
L'element de bibliothèque est supprimé de cette site.
<h1 id="rubrique-connexe-10">Rubrique connexe</h1>
«Utilisation du panneau Actifs»,page 448
<h1 id="utilisation-du-panneau-actifs-pour-la-gestion-des-modèles">Utilisation du panneau Actifs pour la gestion des modèles</h1>
Vou puez utilise la categorie Modles du panneau Actifs pour gerer les modeles existants et en creer de nouveaux.
Pour plus d'informations sur la creation et la modification de modèles, voir « Création d'un modulo Dreamweaver», page 470. Pour plus d'informations sur l'utilisation du panneau Actifs pour gérer vos actifs, voir « Utilisation du panneau Actifs», page 448.
<h1 id="pour-creer-un-modele-vide-a-laide-du-panneau-actifs">Pour creer un modele vide a l'aide du panneau Actifs</h1>
1 Choisissez Fenetre > Modèles.
Dans le panneau Actifs qui s'affiche, la catégorie Modèles est sélectionnée.
2 Cliques sur le bouton Nouveau modele, au bas du panneau Actifs.
Un nouveau modele, sans titre, estajoute à la listede modèles du panneau.
3 Tandis que le modele est encore selectionné, tapez un nom.
4 Cette opération a pour effet de creer un nouveau modele vide dans le panneau Actifs et dans le dossier Templates. Toutefois, aucun fichier .dwt n'est cree à ce stade. Pour definir des regions modifiables, cliquez sur le bouton Modifier au bas du panneau Actifs.
Pour plus d'informations sur la définition de régions modifiables dans un modele, voir « Insertion d'une région modifiable », page 472.
<h1 id="pour-modifier-un-fichier-de-modele">Pour modifier un fichier de modele:</h1>
1 Choisissez Fenetre > Actifs, puis cliquez sur l'icone Modèle pour afficher les modèle.
La liste de tous les modèles disponibles pour votre site apparaît dans la partie inférieure du panneau Actifs. Un aperçu du modele sélectionné apparaît dans la partie supérieure.
2 Dans la liste Nom, procedez de l'une des manieres suivantes :
Double-cliquez sur le nom du modele.
- Cliques sur le bouton Modifier le modele, au bas du panneau Actifs.
3 Modifiez le modele dans la fenetre de document. Creez des regions modifiables dans le modele, en fonction de vos besoin (voir « A propos de la definition des regions de modele », page 465).
4 Enregistrez le modele modifie en choisissant Fichier > Enregistrer.
Remarque : si vous n'avez défini aucune région modifiable, Dreamweaver vous signale que le modele ne contient aucune région modifiable. Vous pouze enregistrer ou modifier un modele même s'il ne contient aucune région modifiable. En revanche, vous ne pouvez pas modifier les documents créés à partir d'un modele si celui-ci ne contient aucune région modifiable.
<h1 id="pour-appliquer-un-modele-au-document-actif">Pour appliquer un modele au document actif :</h1>
1 Ouvrez le document auquel vous souhaitez appliquer le modele.
2 Sélectionnez la catégorie Modèle dans le panneau Actifs, puis recherche le modele que vous souhaitez appliquer.
3 Procedez de l'une des manieres suivantes:
- Faites glisser le modele depuis le panneau vers la fenetre de document.
- Sélectionnéz le modèle et cliquez sur le bouton Appliquer.
Remarque : vous doivent associier le contenu existant du document à une région modifiable du modele, sans quoi le contenu sera effacé.
<h1 id="pour-renomer-un-modele-dans-le-panneau-actifs">Pour renomer un modele dans le panneau Actifs :</h1>
1 Cliquez sur le nom du modele pour le selectionner.
2 Cliquez une nouvelle fois sur le nom de sorte que le texte soit modifiable, puis tapez le nouveau nom.
Remarque: cette méthode fonctionne de la même façon que celle utilisé dans l'Explorateur Windows ou dans le Finder (Macintosh). comme avec l'Explorateur Windows et le Finder, vous doivent attendre un bref instant entre les deux clicks. Ne double-cliquez pas sur le nom, car cela ouvrait le modele pour modification.
3 Cliques sur une autre zone du panneau Actifs ou appuyez sur Entre (Windows) ou Retour (Macintosh) pour appliquer la modification.
4 Un message apparait pour vous demander si vous voulezmettre a jour les documents crees a partir de ce modele.
- Pourmettreàjour tous les documents du sitecriés à partir de ce modèle,cliquez sur Mettre à jour.
- Pour neMETRE à jouraucun des documentscriésàpartirdecemodele,cliquez surNe pasmettreàjour.Undocument nonmisàjourresteassociéau modeleoriginal (il n'estpasdétaché).Pourmettreàjourledocumentulterieurement,ouvre-leetchoisissez Modifier>Modèles>Metreàjour.
<h1 id="pour-supprimer-un-fichier-de-modele">Pour supprimer un fichier de modele:</h1>
1 Sélectionnéz le modele dans le panneau Actifs.
2 Cliques sur le bouton Supprimer, puis confirmez que vous voulez supprimer le modele.
Lorsque vous supprimez un fisier de modèle, vous ne pouvez pas le recupérer. Le fisier 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 fisier de modèle disposait avant d'être supprimé.
Pour convertir un tel document en un fichier HTML normal, sans régions modifiables niverrouillées, Sélectionnez Modifier > Modèles > Détacher du modèle. Pour plus d'informations, voir « Détachment d'un document d'un modèle », page 488.
<h1 id="utilisation-des-actifs-et-des-sites">Utilisation des actifs et des sites</h1>
Vou puez localiser, dans le panneau Site, le fichier qui correspond à un actif dans le panneau Actifs. Ceci peut etre utile, par exemple, pour transférer l'actif vers ou hors du site distant.
Le panneau Actifs affiche tous les actifs (de types reconnus) dans le site actuel (le site actuel est le site qui contient le document actif). Pour utiliser un actif du site actuel dans un autre site, vous devez le copier vers l'autre site. Vous pouvez copier un actif individuel, un ensemble d'actifs individuels ou un dossier Favoris entier en une seule opération.
Remarque : le panneau Site peut afficher un site différent de celui presenté par le panneau Actifs, car le panneau Actifs est associé au document actif. Pour déterminer le site affché dans le panneau Actifs, consultez la barre de titre du panneau.
Pour localiser un fichier d'actif dans le panneau Site :
Cliquez avec le bouton droit (Windows) ou en maintainant la touche Contrôle enfoncée (Macintosh) sur l'icone ou le nom de l'actif dans le panneau Actifs, puis désissez l'options Repérer dans le site dans le menu contextualuel.
Le panneau Site s'affiche, avec le filchier d'actif seLECTIONné.
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.
Notez que l'option Repérer dans le site repère le fichier correspondant à l'actif lui-même, et non un fichier qui utilise cet actif.
Pour copier des actifs de la liste Site ou Favoris vers un autre site :
1 Cliquez avec le bouton droit (Windows) ou en Maintenant la touche Contrôle enfoncée (Macintosh) sur l'icone ou le nom du ou des actifs à copier.
Dans la liste Favoris, vous pouvez copier un dossier Favoris ainsi que des actifs individuels. Pour plus d'informations sur les dossiers Favoris, voir « Regroupement d'actifs dans un dossier Favoris», page 458.
2 Dans le menu contextual, choisissez l'option Copier dans le site, puis selectionnez le nom du site cible dans le sous-menu (le sous-menur repertorie tous les sites définis).
Les actifs sont copés dans le site spécifique, aux emplacements correspondant à leurs emplacements dans le site actuel. Dreamweaver create des dossiers dans la hierarchie du site cible suivant les besoin.
Les actifs sont également ajoutés à la liste Favoris du site spécifique.
Lorsque vous ouvrez un document dans le site cible, le panneau Actifs bascule sur ce site et affiche l'actif copiedé.
Remarque: si l'actif copié est une couleur ou une URL, il apparait uniquement dans la liste Favoris de l'autre site et non dans la liste Site de ce dernier. Dans la mesure où il n'este pas de fichier correspondant à la couleur ou à l'URL, aucun fichier n'est copie vers l'autre site.
<h1 id="gestion-du-panneau-actifs">Gestion du panneau Actifs</h1>
Par défaut, les actifs d'une catégorie donnée sont répertoriés suivant leur nom dans l'ordre alphabétique. Le nom d'actif peut être un nom de fichier (pour les images, par exemple), un nombre hexadecimal (pour les couleurs) ou une URL. Vous pouvez également trier les actifs suivant plusieurs autres critères.
Pour répertorier les actifs dans un ordre différent :
Cliquez sur l'un des en-têtes de colonne.
Par exemple, pour trier la liste des images par type (afin de regrouper toutes les images GIF, puis toutes les images JPEG, etc.), cliquez sur l'en-tête de la colonne Type.
Pour modifier la largeur d'une colonne :
1 Positionnez le pointeur sur la ligne qui sépare deux en-têtes de colonne.
2 Faites glisser cette ligne pour modifier la largeur de la colonne.
<h1 id="définition-dune-liste-dactifs-favoris">Définition d'une liste d'actifs favoris</h1>
La plupart des opérations du panneau Actifs sont identiques dans les listes Favoris et Site (voir « Utilisation du panneau Actifs », page 448). Toutefois, il existe plusieurs tâches que vous pouvez réaliser uniquement dans la liste Favoris.
La liste Site du panneau Actifs affichtant tous les actifs reconnnus dans le site, elle peut devenir enconnée pour certains sites volumineux. Si vous ajoutez des actifs fréquement utilisés à la liste Favoris, vous pouvez grouper des actifs connexes, leur attribuer des surnoms pour ménoriser leur object 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 reference aux actifs de la liste Site. Dreamweaver conserve la trace des actifs de la liste Site à afficher dans la liste Favoris.
<h1 id="ajout-et-suppression-dactifs-dans-la-liste-favoris">Ajout et suppression d'actifs dans la liste Favoris</h1>
Il existe plusieurs méthodes pour ajouter des actifs à la liste Favoris du site.
Pour ajouter des actifs à la liste Favoris, procédez de l'une des manières suivantes :
- Sélectionnez un ou plusieurs actifs dans la liste Site, puis cliquez sur le bouton Ajouter aux favors.
- Sélectionnez un ou plusieurs actifs dans la liste Site, puis désissez l'option Ajouter aux favoris dans le menu contextual.
- Cliquez avec le bouton droit (Windows) ou en maintainant la touche Contrôle enforcée (Macintosh) sur un élément dans la fenêtre de document en mode Création, puis désissez l'option du menu contextual pour ajouter l'élement à la catégorie de favors appropriée.
Par exemple, vous pouvez selectionner une image etCHOir l'option Ajouter aux favors Image dans le menu contextual. Notez que le menu contextual pour le texte contient soit l'option Ajouter aux favors Couleur, soit l'option Ajouter aux favors URL, selon qu'un lien est attaché au texte. Notez également que seuils les éléments appartenant aux catégories du panneau Actifs peuvent etre ajoutes a la liste Favoris.
- Sélectionnez un ou plusieurs fichiers dans le panneau Site et choisissez Ajouter aux favors dans le menu contextual. Les fichiers n'appartenant pas à une catégorie dans le panneau Actifs sont ignorés.
Quelle que soit la méthode可以选择, les actifs sont ajoutés à la liste Favoris, qui est affichée dans le panneau Actifs.
Remarque : il n'existe pas de liste Favoris pour les modeles et les éléments de bibliothèque.
<h1 id="pour-supprimer-des-actifs-de-la-liste-favoris">Pour supprimer des actifs de la liste Favoris :</h1>
1 Sélectionnez un ou plusieurs actifs (ou un dossier Favoris) dans la liste Favoris.
2 Cliquez sur le bouton Supprimer des favors au bas du panneau Actifs.
Les actifs sont supprimés de la liste Favoris, mais figurent toujours dans la liste Site. Si vous supprimez un dossier Favoris, le dossier et tous les actifs qu'il contient sont supprimés de la liste Favoris.
<h1 id="ajout-dune-nouvelle-couleur-ou-dune-nouvelle-url-à-la-liste-favoris">Ajout d'une nouvelle couleur ou d'une nouvelle URL à la liste Favoris</h1>
Vouss pouvez utiliser le panneau Actifs pour ajouter de nouvelles couleurs ou de nouvelles URL à la liste Favoris. Notez que vous ne poupez pas ajouter de nouvelles couleurs ou URL à la liste Site. Cette dernière contient uniquement les actifs déjà utilisés dans le site.
<h1 id="pour-creer-une-couleur">Pour creer une couleur :</h1>
1 Cliquez sur le bouton de catégorie Couleurs.
2 Cliques sur Favoris pour afficher la liste Favoris.
3 Cliquez sur le bouton Nouvelle couleur.
4 Sélectionnéz une couleur à l'aide du sélecteur de couleur.
Pour quitter le sélection de couleur sans selectionner de couleur, appuyez sur la touche Echap ou cliquez sur la barre de couleur grise en haut du sélection de couleur (pour plus d'informations sur l'utilisation du sélection de couleur, voir « Utilisation des couleurs », page 118).
5 Si vous le souhaitez, attribuez un surnom à la couleur.
<h1 id="pour-creer-une-url">Pour creer une URL :</h1>
1 Cliques sur le bouton de catégorie URL.
2 Cliques sur Favoris pour afficher la liste Favoris.
3 Cliquez sur le bouton Nouvelle URL.
4 Entrez une URL et un surnom dans la boîte de dialogue Ajouter URL, puis cliquez sur OK.
<h1 id="creation-dun-surnom-pour-un-actif-favori">Creation d'un surnom pour un actif favori</h1>
VoussouspuezattribuerdessurnomsauxactifsdelaistedeFavoris.Le surnomestaffichéaulieudela valeur ou du nom du fichier d'actif.Parexample,siyoussavozenuacouleurnommée#999900, youspouvezutiliserun surnomplusdescriptiftelqueCouleurArrierePlanPageou CouleurTexteImportant.
Voupez surnomer uniquement les actifs de la liste Favoris. Dans la liste Site, les actifs sont répertoriés suivant leur nom de fichier réel (ou valeur, dans le cas de couleurs et d'URL).
<h1 id="pour-attribuer-un-surnom-à-un-actif-favori">Pour attribuer un surnom à un actif favori :</h1>
1 Cliquez sur la catégorie qui contient l'actif.
2 Cliques sur le bouton Favoris pour afficher la liste Favoris.
3 Procedez de l'une des manieres suivantes:
- Clique à l'aide du bouton droit (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh+) sur l'icone ou le nom de l'actif dans le panneau Actifs, puis désissez l'options Modifier le surnom dans le menu contextual.
- Cliquez une fois sur le nom de l'actif, effectuez une pause, puis cliquez à nouveau (ne double-cliquez pas).
4 Tapez un surnom pour l'actif, puis appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
Le surnom apparait dans la colonne Pseudonyme.
<h1 id="regroupement-dactifs-dans-un-dossier-favoris">Regroupement d'actifs dans un dossier Favoris</h1>
Dans la liste Favoris, au sein d'une catégorie donnée, vous pouze creator des groupes nommés et des groupes d'actifs, appelés dossiers Favoris. Par exemple, si vous avez un ensemble d'images que vous utilisez sur de nombreuses pages de catalogue d'un site de commerce électronique, vous pouze les groupe dans un dossier nommé ImagesCatalogue.
Remarque : le fait de placer un actif dans un dossier Favoris ne modifie pas l'emplacement du fichier d'actif sur le disque.
<h1 id="pour-creer-un-dossier-favoris">Pour creer un dossier Favoris :</h1>
1 Cliquez sur Favoris (en haut du panneau Actifs) pour afficher la liste Favoris.
2 Cliquez sur le bouton Nouveau dossier Favoris.
3 Nommez le dossier.
4 Faites glisser les actifs vers le dossier.
<h1 id="utilisation-des-éléments-de-bibliothèque">Utilisation des éléments de bibliothèque</h1>
Une bibliothèque est un fjichier Dreamweaver spécifique regroupant l'ensemble des « actifs » individuels ou copies d'actifs créés en vue d'une insertion dans des pages Web. Si vous souhaitez simplement que vos pages aient le même en-tête et le même pied de page mais une mise en forme différente, utilisez des éléments de bibliothèque pour stocker votre en-tête et votre pied de page. Les éléments de bibliothèque sont des éléments de page stockés que vous pouvez réutiliser sur plusieurs pages. Vous pouvezmettre à jour toutes les pages qui utilisent un élément de bibliothèque chaque fois que vous modifiez le contenu de l'élément.
Vou puez stocker plusieurs types d'éléments de page dans une bibliothèque : images, tableaux, sons, animations Flash, etc.
Lorsque vous utilisez un élément de bibliothèque, Dreamweaver n'insère pas l'élement lui-même dans la page Web mais un lien vers cet élément. Si vous décidEZ d'apporter des modifications à un élément de bibliothèque (texte ou image par exemple), toutes les instances de l'élement sont automatiquement mises à jour sur l'ensemble des pages concernées.
<h1 id="rubriques-connexes-19">Rubriques connexes</h1>
« Création d'un élément de bibliothèque», page 460
« Insertion d'un élément de bibliothèque dans un document », page 460
« Modification d'un élément de bibliothèque», page 461
« Rendre des éléments de bibliothèque modifiables dans un document », page 463
<h1 id="creation-gestion-et-modification-des-éléments-de-bibliothèque">Creation, gestion et modification des éléments de bibliothèque</h1>
Les bibliothèques permettent de stocker les éléments de pages (images, texte et autres objets) que vous souhaitez réutiliser oumettre à jour féquement sur votre site Web. Ces éléments portent le nom d' éléments de bibliothèque.
Lorsque vous placez un élément de bibliothèque dans un document, 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'objet externe original. La référence à l'objet de bibliothèque externe rend possible la mise à jour du contenu d'un site entier en une seule fois, en modifiant l'objet de bibliothèque et en utilisant les commandes de mise à jour du menu Modifier > Bibliothèque.
Dreamweaver stocke les éléments de la bibliothèque dans un dossier nommé Library, au sein du dossier racine local de chaque site. Chaque site possède sa propre bibliothèque. Pour copier un élément de bibliothèque d'un site à un autre, utilisez la commande Copier vers le site du panneau Actifs. Pour plus d'informations, voir « Utilisation de la catégorie Bibliothèque du panneau Actifs», page 453.
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.
Voici un exemple de la façon dont vous pouvez utiliser un élément de bibliothèque. Supposons que vous construisiez un site de grande taille pour une société. Cette société souhaite que son slogan apparaisse sur chaque page du site. Or, le service marketing n'a pas encore finalisé le texte du slogan. Si vous créez un élément de bibliothèque destiné à containir le slogan et utilisez cet élément sur chaque page, vous pourrez, lorsque le service de marketing vous communiquera le slogan définitif, modifier l'élement de bibliothèque et automatiquementmettre à jour chaque page sur laquelle il figure.
Les éléments de la bibliothèque peuvent aussiContainir des comportements, mais la modification de ces comportements doit respecter certaines conditions (voir « Modification d'un comportement dans un élément de bibliothèque », page 463). Les éléments de bibliothèque ne peuvent pascontainir de scénarios ni de feuilles de style, car le code associé à ces éléments figure dans la section HEAD.
<h1 id="creation-dun-élément-de-bibliothèque">Creation d'un élément de bibliothèque</h1>
Voupez create un element de bibliothèque à partir de n'importe quel élément dans la section body d'un document, notamment du texte, des tableaux, des formulaires, des applets Java, des plug-ins, des éléments ActiveX, des barres de navigation et des images.
Pour les éléments liés tels que les images, la bibliothèque enregistrre uniquement une référence à l'objet. Le fjichier d'origine doit rester à l'emplacement spécifique pour que l'objet de la bibliothèque fonctionne correctement. Il peut s'avérer utile d'enregistrer une image d'un élément de bibliothèque. Par exemple, vous pouvez enregistrer une balise img complète dans un élément de bibliothèque, ce qui vous permettraient de facilement changer le texte alt de l'image, ou même son attribut src, sur tout le site (n'utilise pas cette technique pour modifier les attributs de largeur et de hauteur d'une image, sauf si vous utilisez également un éditeur d'image pour changer la taille réelle de l'image).
<h1 id="pour-creer-un-élément-de-bibliothèque">Pour creer un élément de bibliothèque :</h1>
1 Sélectionnez une partie d'un document que vous souhaitez enregistrer comme élément de la bibliothèque.
2 Procedez de l'une des manieres suivantes:
- Choisissez Fenêtre > Bibliothèque et faites glisser la sélection dans la catégorie Bibliothèque du panneau Actifs.
- Cliquez sur le bouton Nouvel élément de la bibliothèque au bas du panneau Actifs (dans la catégorie Bibliothèque).
- Choisissez Modifier > Bibliothèque > Ajouter un objet dans la bibliothèque.
3 Tapestz un nom pour le nouvel élément de la bibliothèque.
Chaque élément de bibliothèque est enregistré dans un fichier séparé (avec l'extension de fichier .lbi), dans le dossier Library du dossier racine local du site.
<h1 id="insertion-dun-élément-de-bibliothèque-dans-un-document">Insertion d'un élément de bibliothèque dans un document</h1>
Lorsque vous ajoutez un élément de bibliothèque à une page, le contenu réel est inséré dans le document avec une ↔équence à l'objet de bibliothèque.
Pour insérer un élément de bibliothèque dans un document :
1 Placez le point d'insertion dans la fenetre de document.
2 Choisessez Fenetre > Bibliothèque.
Dans le panneau Actifs qui s'affiche, la catégorie Bibliothèque est seLECTIONnée.
3 Faites glisser un élément de bibliothèque du panneau Actifs vers la fenêtre de document ou sélectionnez un élément et cliquez sur le bouton Appliquer.
Pour insérer le contenu d'un élément de bibliothèque sans inclure de référence à l'élement dans le document, appuyez sur la touche Contrôle (Windows) ou Option (Macintosh) tout en faisant glisser un élément de la catégorie Bibliothèque vers le 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.
<h1 id="modification-dun-élément-de-bibliothèque">Modification d'un élément de bibliothèque</h1>
Lorsque vous modifiez un élément de bibliothèque, vous pouvez désirir demettre à jour tous les documents qui utilisent cet élément. Si vous désissez de ne pas lesmettre à jour, les documents restent associés à l'élement de bibliothèque. Vous pouvez lesmettre à jour à un autre moment enCHOISSSANT Modifier > Bibliothèque > Mettre a jour les pages.
D'autres types de modifications peuvent être apportées aux éléments de bibliothèque : vous pouvez les renomer pour rompre leur lien avec des documents ou modèles, supprimer des éléments de la bibliothèque du site et recréer un élément de bibliothèque manquant.
Remarque : les panneaux Styles CSS et Scenarios ne sont pas disponibles lorsque vous modifie des éléments de bibliothèque : en effet, ceux-ci ne peuvent containir que des éléments body, alors que le code associé aux scénarios et aux feuilles de style CSS est inséré dans la section he a d'un document. La boite de dialogue Propriétés de la page est également indisponible : en effet, un élément de bibliothèque ne peut pas composer de balise body ni d'attributs de cette balise.
<h1 id="pour-modifier-un-élément-de-la-bibliothèque">Pour modifier un élément de la bibliothèque :</h1>
1 Choisissez Fenêtre > Bibliothèque.
La catégorie Bibliothèque du panneau Actifs s'affiche.
2 Sélectionnéz un élément de bibliothèque.
Un aperçu de l'objet de bibliothèque s'affiche en haut du panneau Actifs (vous ne pouvez rien modifier dans l'aperçu).
3 Cliquez sur le bouton Modifier, au bas du panneau Actifs ou double-cliquez sur l'objet de bibliothèque.
Dreamweaver ouvre une nouvelle fenêtre permettant de modifier l'objet de bibliothèque. Cette fenêtre ressemble beaucoup à la fenêtre de document, mais son mode Création possée un arrêté-plan gris pour indiquer que vous modifiez un élément de bibliothèque et non pas un document.
4 Modifiez l'objet de la bibliothèque, puis enregistrez les modifications.
5 Dans la boîte de dialogue qui s'affiche, choisissez demettre à jour ou non les documents du site local qui utilisent l'objet de bibliothèque modifié :
- Cliquez sur Oui pourmettre à jour tous les document du site local quiutilisent le modele modifie;
- Cliquez sur Non pour neMETtre à jour aucun document jusqu'à ce que vous utilisiez Modifier > Bibliothèque > Mettre à jour page en cours ou Mettre à jour les pages.
Pourmettrea jour le document en coursafin d'utiliser la version actuelle de tous les éléments de bibliothèque:
Choisissez Modifier > Modèles > Mettre à jour la page en cours.
Pourmettreàjourlesiteentierou touslesdocumentsutilisantunélementdebibliothèque particulier：
1 Choisissez Modifier > Bibliothèque > Mettre à jour les pages.
La boîte de dialogue Mettre à jour les pages s'affiche.
2 Dans le menu contextuel Regarder dans, procedez de l'une des manieres suivantes:
- Choisissez Site entier, puis choisissez le nom du site dans le menu dérouulant adjacent. Toutes les pages du site sélectionnè sont mises à jour en fonction de la version actuelle de tous les éléments de bibliothèque.
- Choisissez Fichiers utiliser, puis sélectionnez un nom d'objet de bibliothèque dans le menu dérouulant adjacent. Cette opération met à jour toutes les pages du site en cours qui utilisent l'objet de bibliothèque sélectionné.
3 Sous Mettre à jour, assurez-vous que l'option Eléments de bibliothèque est activée (pourmettre les modèle à jour en même temps, vérifie que Modèle est également seLECTIONné. Pour plus d'informations, voir « Mise à jour de documents basés sur un modele »,page 488.)
4 CliqueurDemarrer.
Dreamweaver met à jour les fichiers indiqués. Si vous avons scélectionné l'option Afficher le journal, Dreamweaver affiche des informations sur les fichiers qu'ilessaie demettre à jour et précise si la mise à jour a réussi.
Pour renomer un élément de bibliothèque dans le panneau Actifs :
1 Cliquez sur le nom de l'objet de bibliothèque une fois pour le seLECTIONner.
2Attendez un bref instant,uis cliquez une nouvelle fois.
3 Lorsque le nom devient modifiable, tapez un nouveau nom.
Remarque: cette méthode fonctionne de la même façon que celle utilisée dans l'Explorateur Windows ou dans le Finder (Macintosh). Comme avec l'Explorateur Windows et le Finder, vous doivent attendre un bref instant entre les deux clics. Ne double-cliquez pas sur le nom, car cela ouvrirait l'objet de bibliothèque pour modification.
4 Clique ailleurs ou appuyez sur Entre (Windows) ou sur Retour (Macintosh).
5 Dreamweaver you demande si you voulez metre a jour les documents qui utilisent I'element.
- Pourmettre à jour tous les documents du site quiutilisent l'élement,cliquez sur Mettre à jour.
- Pour ne soit à jour aucun des documents qui utilisent l'élement, cliquez sur Ne pas soit à jour.
Pour supprimer un élément d'une bibliothèque :
1 Sélectionnez l'élément dans la catégorie Bibliothèque du panneau Actifs.
2 Cliquez sur le bouton Supprimer, puis confirmez que vous voulez supprimer le modele.
Attention : si vous supprimez un élément de bibliothèque, vous ne pourrez pas utiliser Annuler pour le recupérer. Vous pourrez cependant le recreateur, comme expliqué dans la prochaine procédure.
La suppression d'un élément de bibliothèque le supprime de la bibliothèque mais ne modifie pas le contenu des documents qui l'utilisent.
Pour recreer un élément de bibliothèque manquant ou suprimé :
1 Sélectionnez une instance de l'objet dans un de vos documents.
2 Cliques sur le bouton Créer à nouveau de l'inspecteur de propriétés.
<h1 id="rendre-des-éléments-de-bibliothèque-modifiables-dans-un-document">Rendre des éléments de bibliothèque modifiables dans un document</h1>
Si vous avez inséré un élément de bibliothèque dans un document et que vous désirez modifier celui-ci uniquement sur cette page, vous doivent briser le lien qui existe entre cet élément et la bibliothèque. Lorsqu'une instance d'élement de bibliothèque a été rendue modifiable, elle ne peut plus être mise à jour quand l'élement de bibliothèque est modifié.
Pour rendre un élément de la bibliothèque modifiable :
1 Sélectionnez un élément de la bibliothèque dans le document courant.
2 Dans l'inspecteur de propriétés, cliquez sur Detacher de l'original.
L'instance seLECTIONnée de l'objet de bibliothèque perd sa surbrillance (si elle est visible) et ne peut plus être mise à jour lorsqu'el objetif de bibliothèque d'origine change.
<h1 id="modification-dun-comportement-dans-un-élément-de-bibliothèque">Modification d'un comportement dans un élément de bibliothèque</h1>
Lorsque vous creez un élément de bibliothèque comportant un élément auquel est attaché un comportement Dreamweaver, Dreamweaver copie l'élement et son gestionnaire d' événements (l'attribut qui spécifie l'évenement déclenchant l'action (tel que onClick, onLoad ou onMouseOver) et l'action à appeler lorsque l'évenement se produit) dans le fichier de l'élement de bibliothèque. Dreamweaver ne copie pas les fonctions JavaScript associées dans l'élement de la bibliothèque. Au lieu de cela, lorsque vous insérez l'élement de bibliothèque dans un document, Dreamweaver insère automatiquement les fonctions JavaScript appropriées dans la section head de ce document (si elles ne s'y trouvent pas déjà).
Remarque : si vous rédigez manuellement le code JavaScript (c'est-à-dire si vous le créez sans utiliser de comportements Dreamweaver), vous pouze l'intégrer à votre élément de bibliothèque à l'aide du comportement Appel JavaScript pour executer le code. Si vous n'utilise pas de comportement Dreamweaver pour executer le code, celui-ci n'est pas conservé dans l'élément de bibliothèque.
Pour modifier un comportement dans un élément de bibliothèque, vous devez tout d'abord insérer l'élement dans un document, puis le rendre modifiable dans ce document. Une fois les changements youlus apportés, vous pouze recréer l'élement de bibliothèque, en remplaçant l'élement de la bibliothèque par l'élement modifié de votre document.
Pour plus d'informations sur les comportements, voir « Utilisation des comportements JavaScript », page 369.
Pour modifier un comportement dans un élément de la bibliothèque :
1 Ouvrez un document contenant l'objet de la bibliothèque.
Notez le nom de l'objet de la bibliothèque, ainsi que les balises exactes qu'il contient. Ces informations vous seront nécessaires dans les étapes 8 et 9.
2 Sélectionnez l'élement de bibliothèque, et cliquez sur Detacher de l'original dans l'inspecteur de propriétés.
3 Sélectionnez l'élement auquel est attaché le comportement.
4 Choisissez Fenêtre > Comportements pour ouvrir le panneau Comportements. Double-cliquez sur l'action que vous poulez modifier.
5 Dans la boîte de dialogue des paramètres qui s'affiche, effectuez les modifications nécessaires et cliquez sur OK.
6 Choisissez Fenetre > Bibliothèque pour ouvrir la catégorie Bibliothèque du panneau Actifs.
7 Vérifiez que vous avez enregistré le nom exact de l'objet de bibliothèque d'origine, puis sélectionnez l'objet de bibliothèque d'origine et supprimez-le enclinquant sur le bouton Supprimer du panneau Actifs.
8 Dans la fenêtre de document, Sélectionnez tous les éléments qui constituent l'objet de bibliothèque.
Veillez à selectionner exactement les mêmes éléments que ceux qui se trouvaient dans l'objet de bibliothèque original.
9 Dans le panneau Actifs, cliquez sur le bouton Nouvel élément de bibliothèque et donnez au nouvel élément le même nom qu'a l'élément supprimé à l'étape 7.
Veillez à respecter la même orthographe et la même casse.
10 Pourmettreàjourl'élementde bibliothèque danslesautresdocumentsdevotsitre,choisissez Modifier > Bibliothèque > Mettre à jour les pages.
11 Dans la boîte de dialogue qui s'affiche, Sélectionnez Fichiers utilisant dans le menu déroulant Regarder dans.
12 Dans le menu déroulant adjacent, Sélectionnez le nom de l'élement de bibliothèque que vous venez de créé.
13 Sous Mettre à jour, vérifie que l'option Éléments de bibliothèque est sélectionnée, puis cliquez sur Demarrer.
14 Une fois les mises à jour effectuees, cliquez sur Fermer pour sortir de la boite de dialogue. Mettre a jour les pages.
<h1 id="a-propos-des-modèles-dreamweaver">A propos des modèles Dreamweaver</h1>
Un modele Dreamweaver est un type de document spécifique qu'il est possible d'utiliser pour reconvoir une mise en forme « verrouillée ». Le creator du modele élabore la mise en forme et définit les régions du modele qui pourront être modifiées dans les documents créés à partir de ce modele. Il contrôle ainsi les éléments de la page que les différents utilisateurs du modele (réducteurs, infographistes, autres développpeurs) pourront modifier. Pour plus d'informations sur la création d'un modele, voir « Création d'un modele Dreamweaver», page 470. Pour plus d'informations sur la création d'une page à partir d'un modele, voir « Création d'un document à partir d'un modele», page 480.
L'un des principaux avantages du modele est qu'il donne la possibilite de modifier plusieurs pages simultanement. Tout document create a partir d'un modele reste associé a ce modele (sauf si vous decidez de detacher le document ulterieurement). Lorsque vous modifie un modele, la conception de tous les documents crees a partir de ce modele est immeditatement mise a jour.
Un modele permet de définir les régions modifiables et les régions verrouillées des documents créés à partir de ce modele. Vous pouvez inclure plusieurs types de régions de modele dans un document. Pour plus d'informations sur ces types de régions de modele, voir « A propos de la définition des régions de modele», page 465.
Il est possible d'ajouter une feuille de style en cascade (CSS), un scenario ou un comportement à un document créé à partir d'un modèle : en effet, Dreamweaver insère automatiquement les régions modifiables dans la section head d'un document.
Les opérations liées aux modèles (telles que l'ajout de régions modifiables) peuvent être exécutées à la fois en mode Code et en mode Création. Certaines options de personnalisation d'un modulo ne sont disponibles qu'en mode Code. Pour plus d'informations sur l'ajout d'expressions de modulo, voir Réduction d'expressions de modulo.
Si vous souhaitez enregistrer des informations supplémentaires sur un modele (par exemple, le nom de la personne qui l'a creé, la date de sa dernière modification ou les raisons justifiant certaines décisions relatives à la mise en forme), vous pouze créé un fjichier Design Notes pour le modele. Les documents basés sur un modele n'héritent pas des Design Notes associées à ce dernier. Pour plus d'informations, voir « Enregistrement d'informations sur les fjichiers dans des Design Notes », page 102.
<h1 id="a-propos-de-la-définition-des-régions-de-modèle">A propos de la définition des régions de modèle</h1>
Un modele permet de définir la structure de base d'un document et contient des éléments tels que du texte, des images, une mise en forme, des styles et des régions modifiables.
Dreamweaver verrouille automatiquement la plupart des régions d'un document lorsque vous enregistrez celui-ci comme modèle. Vous doivent insérer des régions ou paramètres modifiables dans un module pour définir les régions qui pourront être modifiées dans les documents basés sur ce module. Lors de la création du module, vous pouze 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 module, 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 : les régions modifiables, les régions répétées, les régions facultatives et les attributs de balise modifiables.
Une région modifiable est une région non verrouillée dans un document basé sur un réseau. Ce type de section peut être modifié. Le creator du réseau peut définiir toute région du réseau comme modifiable. Pour être fonctionnel, un réseau doit contir au moins une région modifiable. S'il n'en contient pas, les pages créées à partir du réseau ne pourront pas être modifiées. Pour plus d'informations sur l'insertion d'une région modifiable, voir « Insertion d'une région modifiable», page 472.
Une région repétée est une section du document qu'il est possible de reproductive. Par exemple, une ligne de tableau peut être définie comme ligne repétée. Lorsque vous définissez une ligne de tableau comme ligne repétée, vous permette à l'utiliser du modele de creator une liste extensible, tout en l'empêchant de modifier la conception élaborée par le creator du modele. Les options de gestion des régions repétées permettent de donner aux utilisateurs d'un modele la possibilité de produit une région ou de supprimer les exemplaires d'une région dans les documents créés à partir de ce modele. Deux types de régions repétées peuvent être insérées dans un modele : les régions repétées et les tableaux repétés. Pour plus d'informations sur l'insertion de régions repétées dans un modele, voir « Création d'une région repétée dans un modele», page 474. Pour plus d'informations sur la création de tableaux repétées, voir « Insertion d'un tableau repété», page 475. Pour plus d'informations sur l'utilisation d'une région repétée dans un document basé sur un modele, voir « Ajout et suppression d'entrées et modification de l'ordre des entrées dans une région repétée», page 484
Une région facultative est une section d'un modele que le creatorudéfinit comme facultative, c'est-à-dire une section contenant des éléments facultatifs tels que du texte ou des images, qui apparaîtrent ou non dans les documents créés à partir du modele. C'est généralement le responsable du contenu qui decide si l'objet en question est conservé ou non sur la page finale. Pour plus d'informations sur la définition de régions facultatives dans un modele, voir « Insertion d'une région facultative», page 479. Pour plus d'informations sur la modification de régions facultatives dans une page basée sur un modele, voir « Modification des paramètres de modele des régions facultatives», page 483.
Les attributs de balise modifiables sont des attributs de balise d'un modele qui sont déverrouillés afin que les utilisateurs puissent les modifier dans les pages créées à partir de ce modele. Par exemple, vous pouvez « verrouiller » les images contenues dans le document tout en permettant à l'auteur de la page de définir l'alignment de ces images (à gauche, à droite ou au centre). Pour plus d'informations sur la définition des attributs de balise modifiables, voir « Définition d'attributs de balise modifiables dans un modele», page 477. Pour plus d'informations sur la modification de balises dans une page basée sur un modele, voir « Modification des propriétés du modele», page 481.
<h1 id="a-propos-des-paramètres-de-modèle">A propos des paramètres de modèle</h1>
Les paramètres de modèle permettent de définir des régions facultatives, des attributs de balise modifiables et des valeurs à transmettre aux documents attachés.
Utilisez les paramètres de modèle pour définir des valeurs qui vous permettront de personneliser le contenu des documents basés sur le modèle. Pour chaque paramètre, vous doivent définir un nom, un type de donnée et une valeur par défaut. Vous doivent attribuer un nom unique à chaque paramètre. En outre, les paramètres sont sensibles à la casse.
Les paramètres de modèle sont transmis au document sous la forme de paramètres d'instance. Vous pouvez y acceder à l'aide de la commande Modifier > Propriétés de modèle. En général, l'utilisateur d'un modèle est autorisé à modifier les valeurs par défaut du paramètre pour personneliser le contenu du document basé sur le modèle. Dans certains cas, le creator du modèle peut utiliser une expression de texte calculé, de sorte que le contenu qui s'affiche dans le document dépende de la valeur de l'expression. Pour plus d'informations, voir Réduction d'expressions de modèle dans l'aide de Dreamweaver.
<h1 id="modification-du-code-situé-en-dehors-des-balises-html">Modification du code situé en dehors des balises HTML</h1>
Certain scripts de serveur sont insérés au tout début ou à la toute fin du document (avant la balise <htm1> ou après la balise </htm1>). Ces scripts require un traitement spécial dans les modèles et les documents créés à partir de modèles. En règle générale, lorsque vous apportez des modifications au code situé avant la balise <htm1> ou après la balise </htm1> dans un modele, les modifications ne sont pas répercutées dans les documents créés à partir du modele, ce qui peut entraîner des erreurs de serveur lorsqu'un script de serveur situé dans le corps principal du modele dépend d'un script non mis à jour. C'est la raison pour laquelle Dreamweaver vous avertit lorsque vous tentez de modifier des scripts situés avant la balise <htm1> ou après la balise </htm1> dans un modele.
Pour éviter ce problème, vous pouvez insérer le code suivant dans la section head du modele :
<!-- TemplateInfo codeOutsideHTMLIsLocked="true" --->
Lorsque vous insérez ce code dans un module, toutes les modifications apportées aux scripts situés avant la balise <htm1> ou après la balise </htm1> seront réprecutées dans les documents créé à partir du modele. Toutefois, vous ne pourrez plus modifier ces scripts dans les documents créé à partir du modele. Vous peuvent donc soit modifier les scripts dans le modele, soit dans les documents créés à partir du modele, mais pas dans les deux à la fois.
<h1 id="liens-des-modèles">Liens des modèles</h1>
Pour creer un lien dans un fisier de modèle, cliquez sur l'icone de dossier ou sur l'icone Pointer vers un fisier dans l'inspecteur de propriétés. Ne tapez pas le nom du fisier à lien, car le lien pourrait ne pas fonctionner. Cette section explique comment Dreamweaver gère les liens dans les modèles.
Lorsque vous creez un fjichier de modèle à partir d'une page existante, puis que vous enregistrrez cette page comme modèle, Dreamweaver met à jour les liens de sorte qu'ils pointent vers les fjichiers d'origine. Les modèles étant enregistrés dans le dossier Templates, le chemin d'un lien relatif à un document change lorsque vous enregistrrez la page comme modèle. Lorsque vous creez un nouveau document à partir du modèle et que vous enregistrrez ce nouveau document, tous les liens relatifs à un document sont mis à jour pour qu'ils continuènt de pointer vers les fjichiers ajustés.
En revanche, si vous insérez un nouveau lien relatif à un document dans un fichier de modèle et que vous tapez le chemin dans la zone de texte du lien de l'inspecteur de propriétés, il est facile de faire une faute de frappe. Le chemin correct est le chemin d'accès au document lié à partir du dossier Templates, et non pas à partir du dossier du document basé sur le modele.
Pour plus d'informations sur l'établissement de liens à l'aide de l'icone Pointer vers un fichier, voir « Liens entre fichiers et documents », page 429.
Remarque : dans certains cas (notamment pour les chemins de fichiers des gestionnaires d'evénement des modèles), vous ne pouvez pas utiliser l'icone de dossier ni l'icone Pointer vers un filchier. Vous devez alors taper le chemin, en prénant garde à ne pas faire de faute de frappe.
<h1 id="affichage-dun-modele-en-mode-creation">Affichage d'un modele en mode Creation</h1>
En mode Création, les régions modifiables des fichiers de modulo et des documents créés à partir de modèles s'afficht dans la fenêtre de document entourées d'un cadre rectangulaire d'une couleur de surbrillance prédéfinie (pour plus d'informations sur la définition des préférences de couleur de surbrillance, voir Définition des préférences de surbrillance appliquées aux modèles dans l'aide de Dreamweaver). Un petit onglet indiquant le nom de la région s'affiche dans l'angle supérieur gauche de chacune des régions définies. Les régions de modulo sont également entourées d'un cadre de surbrillance. Vous pouvez apporter des modifications au contenu modifiable comme au contenu verrouillé.
Le titre <<Template>> et l'extension.dwt qui apparaissent dans la fenêtre de document permettent d'identifier un fisier de modèle.
<h1 id="affichage-dun-modele-en-mode-code">Affichage d'un modele en mode Code</h1>
En mode Code, vous pouvez apporter des modifications à la fois au contenu modifiable et au code source HTML verrouillé du modele. Le contenu modifiable est reperé dans le code HTML par les commentaires <!-- TemplateBeginEditable> et <!-- TemplateEndEditable -->. Tous les éléments compris entre ces commentaires sont modifiables dans les documents créé à partir du modele. Le code source HTML correspondant à la région modifiable de l'exemple ci-dessus se présente de la façon suivante :
<table width = "75%" border = "1"cellspacing "0"cellpadding "0"> <tr bgcolor = "#333366"> <td>Name</td> <td><font color "#FFFFFF">Address</font></td> <td><font color "#FFFFFF">Telephone Number</font></td> </tr> <!-- TemplateBeginEditable name "LocationList" --> <tr> <td>Enter name</td> <td>Enter Address</td> <td>Enter Telephone</td> </tr> <!-- TemplateEndEditable --> </table>
<h1 id="affichage-dun-document-basé-sur-un-modele-en-mode-creation">Affichage d'un document basé sur un modele en mode Creation</h1>
Dans un document basé sur un modèle, autres les régions modifiables, la page entière est entourée d'un cadre d'une couleur différente et un onglet en haut à droite indique le nom du modele sur lequel le document est basé. Ce cadre a pour fonction de vous rappeler que le document a été créé à partir d'un modele et que vous ne pouze rien changer en dehors des régions modifiables.
Remarque : si vous essayez de modifier une région verrouillée dans un document basé sur un modele lorsque la surbrilance est désactivée, le pointeur de la souris se transforme pour indiquer que vous ne pouvez pas cliquer dans une région modifiable.
<h1 id="affichage-dun-document-basé-sur-un-modele-en-mode-code">Affichage d'un document basé sur un modele en mode Code</h1>
En mode Code, les régions modifiables d'un document basé sur un modele s'affichent dans une couleur différente de celle du code des régions non modifiables. Vous ne pouvez modifier que le code des régions modifiables ou les paramétres modifiables.
Le contenu modifiable est repéré dans le code HTML par les commentaires Dreamweaver <!-- InstanceBeginEditable> et <!-- InstanceEndEditable -->). Tous les éléments compris entre ces commentaires peuvent être modifiés.
Le code source HTML d'une région modifiable peut se désenter comme suit :
<pre><code class="language-html"><!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body bgcolor="#FFFFFF" leftmargin="0">
<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr bgcolor="#333366">
<td>Name</td>
<td><font color="#FFFFFF">Address</font></td>
<td><font color="#FFFFFF">Telephone Number</font></td>
</tr>
<!-- InstanceBeginEditable name="LocationList" -->
<tr>
<td>Enter name</td>
<td>Enter Address</td>
<td>Enter Telephone</td>
</tr>
<!-- InstanceEndEditable -->
</table>
</body>
<!-- InstanceEnd -->
</code></pre>
La couleur par défaut du texte non modifiable est le gris. Vous pouvez associier des couleurs différentes aux régions modifiables et aux régions non modifiables en accédant à la boîte de dialogue Préférences. Pour ce faire, choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X), puis choisissez Coloration du code. Pour plus d'informations, voir Définition des préférences de couleur de code appliquées aux modèles dans l'aide de Dreamweaver.
Remarque : vous n'etes pas autorisé à taper du texte dans les régions verrouillées qui s'affichent dans la fenêtre de document en mode Code.
<h1 id="creation-dun-modele-dreamweaver">Creation d'un modele Dreamweaver</h1>
Vou puez creer 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 vide.
La boîte de dialogue Nouveau document (Fichier > Nouveau) comprend plusieurs options permettant de créé de nouveaux modèles et des pages basées sur un modèle existant. Pour plus d'informations, voir « Utilisation de la boîte de dialogue Nouveau document », page 112.
Les modèles portent l'extension de fichier .dwt. Ils sont enregistrés dans un dossier Templates spécifique situé dans le dossier racine local du site. Si ce dossier n'existe pas, Dreamweaver le create automatiquement au moment de l'enregistrement du nouveau modele.
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.
<h1 id="rubriques-connexes-20">Rubriques connexes</h1>
« Enregistrement d'un document comme modele »,page 471
« Insertion d'une région modifiable », page 472
« Création d'un modele imbrique», page 487
<h1 id="enregistrement-dun-document-comme-modele">Enregistrement d'un document comme modele</h1>
Vou puez creer un modèle à partir d'un nouveau document ou d'un document existant.
Si vous insérez une région de modèle dans un document n'ayant pas été enregistré comme modèle, Dreamweaver vous avertit que le document sera automatiquement enregistré comme modèle.
<h1 id="pour-creer-un-modele">Pour creer un modele:</h1>
1 Ouvrez le document que vous souhaitez enregistrer comme modèle dans la fenêtre de document. Pour ce faire, procédez de l'une des manières suivantes:
- Pour ouvrir un document existant,CHOISSEZ Fichier > Ouvrir et selectionnee le document.
- Pour ouvrir un document vide,CHOISSEF Fichier > Nouveau. Dans la boite de dialogue qui s'affiche,CHOISSEZ Page de base ou Page dynamique. Dans la liste de documents, selectionnez le type de page que vous souhaitez utiliser, puis cliquez sur Créer.
2 Lorsque le document s'ouvre,CHOISSEZ Fichier > Enregister comme modele.
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 compte aucune région modifiable. Cliquez sur OK pour enregistrer le document comme modèle, ou bien sur Annuler pour fermer la boite de dialogue sans créé de modèle.
3 Dans la boîte de dialogue qui s'affiche, Sélectionné le site dans lequel vous souhaitez enregistrer le modèle dans le menu contextuel Site, puis tapez un nom unique pour le modele dans la zone de texte Enregistrer sous.
4 Cliquez sur Enregistrer.
Le fichier de modele est enregistré dans le dossier Templates du site, avec l'extension.dwt.
Pour creer un nouveau modele dans le panneau Actifs :
1 Ouvrez le panneau Actifs (Fenêtre > Actifs ou F11), s'il n'est pas deja ouvert.
2 Sélectionnéz la catégorie Modèles.
3 Cliquez sur le bouton Nouveau modele du panneau Actifs.
Un nouveau document est ajouté à la liste Nom. Le nom du document s'affiche en surbrillance.
4 Tapez un nom pour le document.
5 Cliques sur le bouton Modifier du panneau Actifs.
Un document modèle s'ouvre dans la fenêtre de document.
Pour plus d'informations sur la création de régions modifiables dans un modele, voir « Insertion d'une région modifiable », page 472.
<h1 id="création-de-régions-modifiables">Création de régions modifiables</h1>
Il est possible de creer des regions modifiable dans un modele pour définir les zones qui pourront etre modifiees dans les pages basees sur ce modele.
Vou puez 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 <td>est sélectionné, la région modifiable comprend la région située autour de la cellule. Dans le cas contraire, la région modifiable concerne uniquement le contenu de la cellule.
Les calques et leur contenu sont deux éléments distincts. Rendre un calque modifiable vous permet de changer la position du calque et son contenu, alors que rendre le contenu d'un calque modifiable vous permet de modifier uniquement le contenu du calque, et non sa position. Pour sélectionner le contenu du calque, cliquez sur le calque et choisissez Edition > Sélectionner tout. Pour sélectionner le calque, vérifie que les éléments invisibles sont affichés, puis cliquez sur l'icone représentant l'emplacement du calque. Pour plus d'informations sur les calques, voir la section « Animation de calques», page 401.
<h1 id="insertion-dune-région-modifiable">Insertion d'une région modifiable</h1>
Avant d'insérer une région modifiable, il est conseilé d'enregistrer le document courant comme modèle. Si vous insérez une région modifiable non pas dans un fisier de modèle mais dans un document, Dreamweaver vous informe que le document sera automatiquement enregistré comme modèle.
<h1 id="pour-définit-une-région-modifiable">Pour définit une région modifiable :</h1>
1 Dans la fenêtre de document, procédez de l'une des manières suivantes pour sélectionner la région.
- Sélectionnéz le texte ou le contenu que vous souhaitez définir comme région modifiable.
- Placez le point d'insertion à l'endetroit où vous pouvez insérer une région modifiable.
2 Procedez de l'une des manieres suivantes pour insérer une région modifiable :
- Choisissez Insertion > Objects de mode > Région modifiable.
- Cliquez sur le texte ou l'objet sélectionné avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh), puis désissez Nouvelle région modifiable dans le menu contextualuel.
- Dans la barre Insertion,CHOISSEZ Modèle, puis cliquez sur le bouton Région modifiable. La boîte de dialogue Nouvelle région modifiable s'affiche.
3 Dans la zone de texte Nom, tapez un nom unique pour la région (vous ne pouvez pas utiliser le même nom pour plusieurs régions modifiables dans un modulo donné).
Remarque: ne tapez pas de caractères spéciaux dans le champ Nom.
<h1 id="4-cliquez-sur-ok-2">4 Cliquez sur OK.</h1>
La région modifiable est entourée d'un cadre rectangulaire dans le modele, de la couleur de surbrillance définie dans les différences. Pour plus d'informations sur les options de mise en surbrillance du contenu d'un modele, voir Definition des différences de surbrillance appliquées aux modeles de l'aide de Dreamweaver.
Dans l'angle supérieur gauche de la région, un onglet indique le nom de la région. Si vous ave inséré une région modifiable vide dans le document, son nom s'affiche également dans le cadre qui la délimite.
<h1 id="suppression-dune-région-modifiable">Suppression d'une région modifiable</h1>
Si vous avez marqué une région de votre fichier de modèle comme étant modifiable et pouze la verrouiller (la rendre non modifiable), utilisez la commande Supprimer le marqueur de modèle.
Remarque : vous ne pouvez pas verrouiller une région d'un fichier créé à partir d'un modele. Vous ne pouvez verrouiller de régions que dans les fichiers de modele.
<h1 id="pour-supprimer-une-région-modifiable">Pour supprimer une région modifiable :</h1>
1 Dans le document ou le sélecteur de balises, Sélectionnez la région modifiable que vous souhaitez modifier.
2 Choisissez Modifier > Modèles > Supprimer le marqueur de modèle.
La région n'est alors plus modifiable.
<h1 id="creation-de-régions-repétées">Creation de régions repétées</h1>
Les régions repétées sont des régions données d'un modele qu'il est possible de reproductive en plusieurs exemplaires dans les documents basés sur ce modele. Vous pouvez les utiliser pour contrôler la mise en forme des régions qui seront reproduites sur une page (article de catalogue ou description par exemple), et pour autoriser la reproduction de lignes, par exemple dans le cas d'une liste déléments.
Il existe deux objets de modèle de région repétée :
Région repétée : une région repétée peut être reproductive mais ne peut pas être modifiée. Il est nécessaire d'insérer une région modifiable dans une région repétée pour que le contenu de cette dernière puisse être modifié.
L'exemple ci-dessous présente une région repétée dans un modele. Dans tout document basé sur le modele, l'utilisateur a la possibilité de reproductive la ligne en surbrillance pour agrandir le tableau.
Tableau répété : lorsque vous creez un tableau répété, vous pouvez définir l'emplacement des régions modifiables dans chacune des cellules de la région répétée. Differentes options vous permettent de définir les lignes à inclure dans la région répétée.
<h1 id="rubriques-connexes-21">Rubriques connexes</h1>
« Création d'une région répetée dans un modele»,page 474
« Insertion d'un tableau répété », page 475
« Ajout et suppression d'entrées et modification de l'ordre des entrées dans une région repétée » page 484
<h1 id="creation-dune-région-repétée-dans-un-modele">Creation d'une région repétée dans un modele</h1>
Une région répétiée est une section d'un réseau qui peut être reproductive autant de fois qu'on le souhaite dans les pages basées sur ce réseau. On utilise généralement les régions répétiées dans le cas de tableaux. Toutefois, il est possible de définir des régions répétiées pour d'autres éléments de page.
Une région repétée n'est pas modifiable. Pour rendre modifiable le contenu d'une région repétée (par exemple pour autoriser un utiliser à taper du texte dans une cellule de tableau), vous devez insérer une région modifiable dans la région repétée. Pour plus d'informations sur la création de régions modifiables, voir « Insertion d'une région modifiable», page 472. Pour plus d'informations sur la création de tableaux repétés modifiables, voir « Insertion d'un tableau repété», page 475.
<h1 id="pour-insérer-une-région-repétée-dans-un-modele">Pour insérer une région repétée dans un modele :</h1>
1 Dans la fenêtre Document, précédez de l'une des manières suivantes :
- Sélectionnez le texte ou le contenu que vous souhaitez définir comme région repétée.
- Placez le point d'insertion dans le document à l'endroit où vous souhaitez insérer la région repétée.
2 Procedez de l'une des manières suivantes pour creer une région repeteee:
- Choisissez Insertion > Objets de cadre > Région répétée.
- Cliquez sur le contenu sélectionné avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh), puis choisissez Nouvelle région repétée dans le menu contextuel.
- Cliquez sur le bouton Région repétée de la catégorie Modèles ou de la barre Insertion.
La boîte de dialogue Nouvelle région répétée s'affiche.
3 Dans la zone de texte Nom, tapez un nom unique pour la région de modèle (vous ne pouvez pas utiliser le même nom pour plusieurs régions répertées dans un modele donné).
Remarque: n'insérez pas de caractères spéciaux dans un nom de région.
4 Cliquez sur OK.
Une région repétée est insérée dans le document.
Remarque : une région repétée ne peut pas être modifiée dans un document basé sur un modele si elle ne contient pas de région modifiable.
Pour plus d'informations sur l'insertion d'une région modifiable, voir « Insertion d'une région modifiable », page 472.
<h1 id="insertion-dun-tableau-repété">Insertion d'un tableau repété</h1>
Utilisez un tableau repété lorsque vous souhaitez définir une région repétée composée de régions modifiables sous forme de tableau. Vous pouvez définir des attributs de tableau et indiquer les cellules du tableau pouvant être modifiées.
<h1 id="pour-insérer-un-tableau-repété">Pour insérer un tableau repété :</h1>
1 Placez le point d'insertion dans la fenêtre de document à l'endroit où vous souhaitez insérer le tableau répétré.
2 Procedez de l'une des manieres suivantes:
- Choisissez Insertion > Objets de cadre > Région répetée.
- Cliquez sur le contenu sélectionné avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enforcée (Macintosh), puis choisissez Nouvelle région repétée dans le menu contextuel.
- Cliquez sur le bouton Tableau repété de la catégorie Modèles ou de la barre Insertion.
La boîte de dialogue Insérer un tableau répété s'affiche.
3 Spectoriez les nouvelles valeurs de votrechoix.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
4 Cliquez sur OK.
<h1 id="utilisation-dune-couleur-darrière-plan-alternée-dans-une-région-repétée">Utilisation d'une couleur d'arrière-plan alternée dans une région repétée</h1>
Vou puez personnaliser un tableau repete en faisant alterner la couleur d'arriere-plan des lignes.
Pour faire alterner la couleur d'arrière-plan des lignes d'un tableau :
1 Dans la fenêtre de document, sélectionnez la ligne de tableau de la région répetée.
2 Cliquez sur le bouton Afficher le mode code ou Afficher les modes Code et Creation de la barre d'outils du document pour acceder au code de la ligne selektionnee.
3 En mode Code, modifiez la balise <tr> pour qu'elle se présente de la façon suivante :
<tr bgcolor "@(@(_index&1)？'#FFFFFF'：'#CCCCC'@\*">
Vou puez modifier les valeurs hexadécimales #FFFFFF et #CCCCC si vous souhaitez utiliser d'autres couleurs.
Exemple de code correspondant à un tableau dont la couleur d'arrière-plan des lignes est alternée :
<table width="75%" border="1" cellspacing="0"cellpadding="0"> <tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr> <!-- TemplateBeginRepeat name="contacts" -- > <tr bgcolor = "@(_index&1)?'#FFFFFF':'#CCCCC'@@" <td><!-- TemplateBeginEditable name = "name" --> name <!-- TemplateEndEditable --> </td> <td><!-- TemplateBeginEditable name = "phone" --> phone <!-- TemplateEndEditable --> </td> <td><!-- TemplateBeginEditable name = "email" --> email <!-- TemplateEndEditable --> </td> </tr> <!-- TemplateEndRepeat --> </table>
<h1 id="définition-dattributs-de-balisé-modifiables">Définition d'attributs de balisé modifiables</h1>
Utilisez la commande Rendre l'attribut modifiable pour permettre aux utilisateurs d'un modele de modifier des attributs de balises specifiques dans les documents crees a partir de ce modele. Vous pouze par exemple appliquer une couleur d'arriere-plan au modele tout en permettant a l'utilateur du modele d'appliquer une couleur d'arriere-plan différente aux pages qu'il create. Seuls les attributs que vous definissez comme modifiables peuvent etre mis a jour par l'utilateur.
Lorsque vous creez un attribut de balise modifiable, un parametre de modele est insere dans le code. L'attribut reçoit une valeur initiale dans le modele. Tous les documents crees a partir du modele hériment de ce parametre. L'utilisateur peut ensuite modifier le parametre dans le document.
Les types de données suivants sont pris en charge : texte, valeur booléenne (true/false), couleur et URL. Pour plus d'informations sur la définition des attributs de balise modifiables, voir « Définition d'attributs de balise modifiables dans un modele », page 477.
Pour plus d'informations sur la modification des balises dans les documents basés sur un modele, voir « Modification des propriétés du modele », page 481.
<h1 id="définition-dattributs-de-balise-modifiables-dans-un-modele">Définition d'attributs de balise modifiables dans un modele</h1>
Vou puez définir plusieurs attributs modifiables pour un même élément de page. Le menu dérouulant Attribut contient uniquement les attributs de balise déjà définis pour l'élément, par exemple la largeur et la hauteur dans le cas d'une image.
Si l'attribut que vous souhaitez rendre modifiable n'est pas répertorié dans le menu déroulant Attribut, cliquez sur Ajouter pour ajouter l'attribut à la liste.
<h1 id="pour-définiir-un-attribut-de-balise-modifiable">Pour définiir un attribut de balise modifiable :</h1>
1 Dans la fenêtre de document, Sélectionnez l'objet pour lequel vous souhaitez définir un attribut de balise modifiable.
2 Choisissez Modifier > Modèles > Rendre l'attribut modifiable.
3 Dans la boîte de dialogue qui s'affiche, procédez de l'une des manières suivantes :
- Si l'attribut que vous souhaitez rendre modifiable est repertorié dans le menu déroulant Attribut, Sélectionnez-le.
- Si l'attribut que vous souhaitez rendre modifiable n'est pas repertorié dans le menu dérounant Attribut, cliquez sur Ajouter, saisissez le nom de l'attribut que vous souhaitez ajouter dans la boîte de dialogue qui s'affiche et cliquez sur OK.
4 Vérifiez que l'options Rendre l'attribut modifiable est activée.
Définissez les valeurs souhaitées dans les autres champs de la boîte de dialogue.
5 Tapestz un nom unique pour l'attribut dans la zone de texte Etiquette.
Conseil : pour retrouver plus facilement un attribut de balise modifiable spécifique, faites en sorte que l'étiquette indique clairment l'objet 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 :
- Si vous souhaitez que l'utiliseur puisse taper du texte pour définir l'attribut, choisissez Texte. L'attribut align peut par exemple être définir par du texte : l'utiliseur aura la possibilité de lui attribuer la valeur left, right ou center.
- Pour définir un lien vers un élément, tel qu'un chemin de fichier vers une image,CHOISSEZ URL. Lorsque cette option est seLECTIONnée, Dreamweaver met automatiquement à jour le chemin utilisé dans un lien. 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 selectionner une valeur au moyen du selecteur de couleur, choisissez Couleur.
- Si vous souhaitez que l'utilisateur puisse taper une valeur numérique pour définir un paramètre (la hauteur ou la largeur d'une image par exemple),CHOISSEZ NOMBRE.
7 Le champ Valeur par défaut indique la valeur de l'attribute de balise seLECTIONné dans le modele. Tapez une autre valeur dans ce champ si vous souhaitez modifier la valeur de départ du paramètre dans les documents basés sur le modele.
8 Si vous souhaitez modifier un autre attribut de la balise selectionnée, repêze les étapes 3 à 7.
<h1 id="9-cliquez-sur-ok">9 Cliquez sur OK.</h1>
<h1 id="conversion-dun-attribut-de-balise-modifiable-en-attribut-non-modifiable">Conversion d'un attribut de balise modifiable en attribut non modifiable</h1>
Une balise marquee comme modifiable peut être marquee comme non modifiable. Faites les changements nécessaires dans le cadre, puis mettez à jour les pages créées à partir de celui-ci.
<h1 id="pour-redéfinir-un-attribut-de-balise-modifiable">Pour redéfinir un attribut de balise modifiable :</h1>
1 Dans le modele, cliquez sur l'element associé à l'attribut modifiable, ou bien selectionnez la balise au moyen du selecteur de balises.
2 Choisissez Modifier > Modèles > Rendre l'attribut modifiable.
3 Dans le menu déroulant Attributes, Sélectionnéz l'attribut souhaité.
4 Decochez la case Rendre l'attribut modifiable.
5 Cliquez sur OK.
<h1 id="a-propos-des-régions-facultatives">A propos des régions facultatives</h1>
Une région facultative est une région d'un modele que vous pouvez programmer pour que celle-ci s'affiche ou reste masquee dans les documents basés sur ce modele. Utilisez une région facultative si vous souhaitez définir les conditions suivant lesquelles certains éléments d'un document doivent s'afficher. Vous pouvez associier des valeurs spécifiques à un paramètre de modele, ou bien définir des instructions conditionnelles dans un modele. Suivant les conditions définies, l'utilisateur du modele peut modifier les paramétres dans les documents qu'il cree et decide si la région facultative doit s'afficher ou non.
Vou puez creer des parametres de mode et des expressions dans la boite de dialogue Région facultative ou directement en mode Code. Lorsque vous utilisez l'objet de mode Région facultative, Dreamweaver insere des commentaires de mode dans le code.
Les paramètres de modèle sont définis dans la section head :
<pre><code class="language-twig"><!-- TemplateParam name="departmentImage" type="boolean" value="true" --->
</code></pre>
Du code semble à celuiprésenté ci-dessous s'affiche à l'emplacement de la région facultative.
<pre><code class="language-html"><!-- TemplateBeginIf cond="departmentImage" -->
<p><img src="/images/airfare_on.gif" width="85" height="22"> </p>
<!-- TemplateEndIf -->
</code></pre>
La boîte de dialogue Propriétés de modèle (Modifierer > Propriétés de modèle) permet d'afficher et de modifier les paramètres de modèle associés aux régions facultatives dans les documents basés sur un modèle.
Il existe deux types d'objets de région facultative. Le premier permet au creator du modele de définir les régions à afficher et celles à masquer, et d'empêcher l'utiliser de modifier le contenu. Le second permet aux utilisateurs du modele de modifier le contenu et de decide si la région doit s'afficher ou non.
<h1 id="rubriques-connexes-22">Rubriques connexes</h1>
« Insertion d'une région facultative», page 479
« Modification des propriétés du modele »,page 481
<h1 id="insertion-dune-région-facultative">Insertion d'une région facultative</h1>
Une région facultative permet de decide si des éléments doivent s'afficher ou être masqués dans les documents basés sur le modele. Une région facultative est contrôle par une instruction conditionnelle. L'onglet d'une région facultative est précédé du mot if dans un modele. Suivant la condition définie dans le modele, l'utilisateur du modele peut decide si la région doit apparaître dans les pages qu'il create.
Une région facultative modifiable permet à l'utiliser du modele de modifier le contenu de la région facultative. Par exemple, si la région facultative comprend une image ou du texte, l'utiliser du modele peut decide si le contenu doit s'afficher et peut y apporter des modifications si nécessaire. Les régions modifiables sont contrôlées par une instruction conditionnelle. Pour creer des paramètres de modele et des expressions, utilisez la boîte de dialogue Région facultative ou tapez les paramètres et les instructions conditionnelles en mode Code.
<h1 id="pour-insérer-une-région-facultative">Pour insérer une région facultative :</h1>
1 Dans la fenêtre de document, Sélectionnez l'élement que vous souhaitez définir comme région facultative.
2 Procedez de l'une des manières suivantes:
- Sélectionnez la catégorie Modèles dans la barre Insertion, puis cliquez sur le bouton Région facultative.
- Choisissez Insertion > Objects de modulo > Région facultative.
- Cliquez sur le contenu sélectionné avec le bouton droit de la souris, puis choisissez Nouvelle région facultative dans le menu contextual.
3 Définisse les options de la région facultative.
Pour plus d'informations sur la définition d'une région facultative, cliquez sur le bouton Aide de la boîte de dialogue.
4 Cliquez sur OK.
<h1 id="pour-insérer-une-région-facultative-modifiable">Pour insérer une région facultative modifiable :</h1>
1 Placez le pointeur à l'endetroit de la fenêtre de document où vous souhaitez insérer la région facultative.
Conseil : il est impossible d'envelopper une seLECTION pour creer une région facultative modifiable. Insérez la région puis insérez le contenu dans la région.
2 Procedez de l'une des manieres suivantes pour ouvrir la boite de dialogue Région facultative :
- Sélectionnéz la catégorie Modèles dans la barre Insertion, puis cliquez sur le bouton Région facultative modifiable.
- Choisissez Insertion > Objects de mode > Région facultative modifiable.
- Cliquez sur le contenu sélectionné avec le bouton droit de la souris, puis choisissez Région facultative modifiable dans le menu contextuel.
La boîte de dialogue Région facultative s'affiche.
3 Définisse les options de la région facultative.
Pour plus d'informations sur la définition d'une région facultative, cliquez sur le bouton Aide de la boite de dialogue.
<h1 id="4-cliquez-sur-ok-3">4 Cliquez sur OK.</h1>
<h1 id="modification-dune-région-facultative">Modification d'une région facultative</h1>
Il est possible de modifier les paramètres d'une région facultative insérée dans un réseau. Par exemple, vous pouvez indiquer si le contenu doit ou non s'afficher par défaut,lier un paramètre à une région facultative existante ou modifier une expression de réseau.
<h1 id="pour-acceder-à-la-boite-de-dialogue-région-facultative">Pour acceder à la boite de dialogue Région facultative :</h1>
1 Ouvrez l'inspecteur de propriétés, le cas échéant.
2 Dans la fenêtre Document, procédez de l'une des manières suivantes :
- En mode Création, cliquez sur l'onglet correspondant à la région modifiable que vous souhaitez modifier.
- En mode Création, cliquez sur un élément de la région, puis cliquez sur la balise de modèle <mmtemplate:if> dans le sélecteur de balises.
- En mode Code, cliquez sur la balise de commentaire de la région que vous souhaitez modifier.
3 Dans l'inspecteur de propriétés, cliquez sur Modifier.
La boîte de dialogue Région facultative s'ouvre.
4 Apportez les modifications souhaitées, puis cliquez sur OK.
<h1 id="création-dun-document-à-partir-dun-modele">Création d'un document à partir d'un modele</h1>
Après avoir défini la conception du modele, vous pouvez appliquer celui-ci à un document vide ou à un document contenant déjà des données.
Pour creer un document à partir d'un modele,utilisez le panneau Actifs ou bien la boite de dialogue Nouveau document. Le panneau Actifs repertorie les modèle disponibles dans le site Dreamweaver courant. Cliquez avec le bouton croit de la souris sur la categorie Modèle du panneau Actifs pour creer un modele ou pour creer un document à partir d'un modele.
Dans la boîte de dialogue Nouveau document, Sélectionnez un modèle dans l'un des sites Dreamweaver courants pour créé un document à partir de ce modele. Lorsque vous créez un document à partir d'un modele, vous pouvez decide de laisser le document attaché au modele ou non. Par défaut, les modifications apportées à un modele sont répercutées dans tous les documents attachés à ce modele. Si vous désactiver l'option Mettre la page à jour quand le modele est modifié lors de la création du document, le nouveau document est créé en tant que document statique, c'est-à-dire sous forme de filchier HTML indépendant, sans régions de modele. Dans ce cas, les modifications apportées au modele ne seront pas répercutées dans le document.
<h1 id="pour-creer-un-document-à-partir-dun-modele-à-laide-de-la-boite-de-dialogue-nouveau-document">Pour creer un document à partir d'un modele à l'aide de la boite de dialogue Nouveau document :</h1>
1 Choisissez Fichier > Nouveau pour ouvrir la boîte de dialogue Nouveau document.
2 Dans la boîte de dialogue Nouveau document, activé l'onglet Modèles.
3 Dans la liste Modèles pour, Sélectionnéz le site contenant le modèle que vous souhaïez utiliser.
Tous les modèles disponibles dans le site sélectionné s'affichent dans la liste des modèles du site.
4 Sélectionnéz dans cette liste le modele que vous souhaïez utiliser.
5 Cliquez sur Creer pour creer une page à partir de ce modele.
Le document s'ouvre dans la fenetre de document.
Pour creer un document à partir d'un modele à l'aide du panneau Actifs :
1 Ouvrez le panneau Actifs (F11) s'il n'est pas deja ouvert.
2 Cliquez sur l'icone Modèle du panneau Actifs pour afficher les modèle du site.
Conseil: si le modele que vous souhaitez utiliser vient d'être créé, il peut être nécessaire de cliquer sur le bouton Actualiser pour l'afficher.
3 Cliques sur le modele souhaite avec le bouton droit de la souris, puis choisissez Nouveau a partir d'un modele.
Le document s'ouvre dans la fenetre de document.
<h1 id="modification-du-contentu-dans-une-page-basée-sur-un-modele">Modification du contentu dans une page basée sur un modele</h1>
Vou puez facilement identier et selectionner les differentes regions presents dans un modele et dans un document basé sur un modele. Les regions de modele modifiables sont repertoriées au bas du sous-menu Modifier > Modèles.
Les régions modifiables situées à l'intérieur d'une région répetée ne sont pas repertoriées dans le menu. Pour localiser ces régions, vous devez rechercher les cadres à onglet qui figurent dans la fenêtre de document.
Pour plus d'informations sur la localisation et la modification de balises modifiables dans un document basé sur un modèle, voir « Modification des propriétés du modele », page 481.
Pour rechercher une région modifiable et la sélectionner dans le document :
Choisissez Modifier > Modèles, puis SéLECTIONnez le nom de la région dans la liste figurant au bas de ce sous-menù.
La région modifiable est selectionnée dans le document.
<h1 id="modification-des-propriétés-du-modele">Modification des propriétés du modele</h1>
Lorsque vous creez des parametes dans un modele, les documents bases sur ce modele hériment automatiquement des parametes et de leur valeur initiale. L'utilisateur d'un modele peut modifier les attributs de balise modifiables et les autres parametes de modele (parametes des régions facultatives par exemple) à l'aide de la boîte de dialogue Propriétés de modele.
Pour plus d'informations sur la creation d'une balise modifiable dans un modele, voir « Definition d'attributs de balise modifiables dans un modele », page 477. Pour plus d'informations sur la creation de regions facultatives, voir « Insertion d'une région facultative », page 479.
<h1 id="pour-modifier-un-attribut-de-balise-modifiable">Pour modifier un attribut de balise modifiable :</h1>
1 Ouvrez le document basé sur un modele, puis choisissez Modifier > Propriétés de modele.
La boîte de dialogue Propriétés de modèle s'affiche. L'exemple suivant présente deux propriétés de modèle : une région facultative et un attribut de balise modifiable correspondant à la couleur d'arrière-plan du modèle.
2 Sélectionné une propriété dans la liste Nom.
L'étiquette et la valeur de la propriété selectionnelle s'affichent dans la partie inférieure de la boîte de dialogue.
3 Si vous souhaitez modifier la valeur de la propriété dans le document courant, saississe 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 modele. Les attributs non répertoriés dans la liste Nom ne peuvent pas être modifiés dans le document.
4 Si vous définièsez un attribut de balise modifiable dans un modele imbriqué, procédez de l'une des manières suivantes pour indiquer si le paramètre doit être transmis aux documents basés sur ce modele imbriqué :
- Cochez la case Autoriser les modèle imbriqués pour contrôler ceci si vous souhaitez que la propriétémodifiable soit transmise aux documents basés sur le modele imbrique; le paramètre sera alors répertorié dans la boîte de dialogue Propriétés de modele associée aux documents basés sur ce modele imbrique.
- Si vous souhaitez que la propriété ne soit pas transmise aux documents, désactive cette option.
<h1 id="modification-des-paramètres-de-modèle-des-régions-facultatives">Modification des paramètres de modèle des régions facultatives</h1>
1 Ouvrez le document basé sur un modele, puis choisissez Modifier > Propriétés de modele.
La boîte de dialogue Propriétés de modulo s'affiche.
2 Sélectionnez une propriété dans la liste Nom.
L'étiquette et la valeur de la propriété selectionnelle s'affichent dans la boîte de dialogue.
3 Activez l'option Afficher si vous souhaitez que la région facultative apparaisse dans le document, ou bien désactive-à-si vous souhaitez qu'elle soit masquée.
Remarque : le nom du champ et la valeur par défaut sont définis dans le modele.
4 Activez l'option Autoriser les modèles imbriques pour contrôrler ceci si vous souhaitez que la propriété modifiable soit transmise aux documents basés sur le modele imbrique.
<h1 id="ajout-et-suppression-dentrées-et-modification-de-lordre-des-entrées-dans-une-région-repétée">Ajout et suppression d'entrées et modification de l'ordre des entrées dans une région repétée</h1>
Voupez ajouter ou supprimer des entrées ou bien modifier l'ordre des entrées dans une région repétée. Lorsque vous ajoutez une entrée de région repétée, l'ensemble de la région repétée est produit dans le document. La région repétée doit containir une région modifiable dans le modele original pour que l'utilisateur puisse modifier son contenu.
<table><tr><td>Product Name
Rêpêter:enterProducts +|−|−|+|</td><td>SKU#</td><td>Price</td></tr><tr><td>Macadamia nuts
updateProducts</td><td>Mac3423</td><td>12.00 lb.</td></tr><tr><td>Brazil nuts
updateProducts</td><td>Bra9302</td><td>9.00 lb.</td></tr></table>
Les menus Modifier > Modèles et Edition > Entrées répétées contiennent des options de modification des régions répétées.
<h1 id="pour-ajouter-et-supprimer-des-entrées-et-pour-modifier-lordre-des-entrées-dans-une-région-répétée">Pour ajouter et supprimer des entrées et pour modifier l'ordre des entrées dans une région répétée :</h1>
Placez le point d'insertion dans la région repétée pour la sélectionner, puis procédez de l'une des manières suivantes :
- Cliquez sur le bouton plus (+) pour ajouter une entrée de région repétée sous l'entrée selectionnée.
- Cliquez sur le bouton moins (-) pour supprimer l'entrée de région repétée selectionnée.
- Cliquez sur le bouton Flèche bas pour déplacer l'entrée scélectionnée d'un niveau vers le bas.
- Cliquez sur le bouton Flèche haut pour déplacer l'entrée scélectionnée d'un niveau vers le haut.
- Choisissez Modifier > Modèle > Entrées répetées, puis choisissez l'une des options du menu. Celui-ci permet d'insérer une nouvelle entrée de région répetée et de modifier l'emplacement de l'entrée sélectionnée.
<h1 id="pour-couper-copier-et-supprimer-des-entrées">Pour couper, copier et supprimer des entrées :</h1>
Placez le point d'insertion dans la région repétée pour la sélectionner, puis procédez de l'une des manières suivantes :
- Choisissez Edition > Entrées répetées > Couper l'entrée répetée pour couper l'entrée de région répetée.
- Choisissez Edition > Entrées répetées > Copier l'entrée répetée pour copier l'entrée de région répetée.
- Choisissez Edition > Entres repétées > Supprimer l'entrée repétée pour supprimer l'entrée de région repétée.
- Choisissez Edition > Coller pour coller l'entrée de région repétée.
Lorsque vous collez une entrée de région repétée, celle-ci s'insère dans le document sans écraser d'entrée existante.
<h1 id="a-propos-des-modèles-imbriqués">A propos des modèles imbriqués</h1>
Un modele imbriqué est un modele dont la conception et les régions modifiables sont basées sur un autre modele. Pour creer un modele imbriqué, vous devez au préalable enregister le modele de base ou le modele original, puis creer un document à partir de ce modele et enregister ce document comme modele. Vous pouvez ensuite définir dans le nouveau modele des régions modifiables supplémentaires au niveau des sections définies initialement comme modifiables dans le modele de base.
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 presentation en commun avec les autres pages du site mais quiprésent malgré tout quelques différences. Par exemple, vous pouvez creator un modele de base définissant la conception de zones plus larges, qui sera utilisé par une grande partie des responsables du contenu du site, et creator un modele imbriqué définissant de nouvelles régions modifiables dans les pages d'une section spécifique du site.
Les régions modifiables d'un modele de base sont transmises aux modèles imbriqués et restent modifiables dans les pages créées à partir d'un modele imbrique, à moins que de nouvelles régions de modele ne soient insérées dans ces régions.
Les modifications apportées à un réseau de base sont automatiquement répercutées dans les modèles basés sur ce réseau de base et dans tous les documents basés sur les modèles principal et imbriqué.
Exemple: le modele de base du site de la société Global Car Rental contient deux regions modifiables nommées body et footer :
Pour creer un modele imbrique, nous avons cree un document a partir du modele, puis nous avons enregistré ce document comme modele que nous avons appelé globalNested. Dans le modele imbrique, nous avons apportedes modifications à la région modifiable appelée body. Nous avons insere une image dans la colonne de gauche et une nouvelle région modifiable dans la colonne de droite.
Lorsque vous insérez une nouvelle région modifiable dans une région modifiable transmise au modulo imbriqué, la couleur de surbrillance de la région modifiable devient orange. Le contenu inséré dans une région modifiable, par exemple l'image insérée dans la colonne de gauche, n'est plus modifiable dans les documents créés à partir du modulo imbriqué. Qu'elles aient été ajoutées au modulo imbriqué ou qu'elles soient hériétées du modulo de base, les régions modifiables entourées d'un cadre de surbrillance bleu restent modifiables dans les documents créés à partir du modulo imbriqué. Les régions de modulo dans lesquilles aucune région modifiable n'a été insérée sont transmises sous la forme de régions modifiables aux documents basés sur le modulo.
<h1 id="création-dun-modele-imbriqué">Création d'un modele imbriqué</h1>
Pour creer un modele imbrique, vous pouze enregister un document basé sur un modele, puis creer un nouveau modele à partir de ce document. Les modeles imbriques permettent de creer des variantes du modele de base. Vous pouze creer une série de modeles imbriques en chaine pour obtenir une mise en forme chaque fois plus précise.
<h1 id="pour-creer-un-modele-imbrique">Pour creer un modele imbrique :</h1>
1 Creez un document à partir du modele sur lequel vous souhaitez baser le modele imbrique. Pour ce faire, procedez de l'une des manieres suivantes :
- Dans la catégorie Modèle du panneau Actifs, cliquez avec le bouton droit de la souris sur le modele à partir duquel vous souhaitez creator un nouveau document, puis choisissez Nouveau à partir d'un modele.
- Choisissez Fichier > Nouveau. Dans la boite de dialogue Nouveau document, cliquez sur l'onglet Modèle et Sélectionné le site qui contient le modele que vous souhaïez utiliser ; puis, dans la liste de documents, double-cliquez sur le modele pour créé un document.
Un nouveau document s'affiche dans la fenêtre de document.
2 Choisissez Fichier > Enregistrer comme modèle ou cliquez sur le bouton Crer un modele imbrique de la barre Insertion pour enregistrer le nouveau document comme modèle.
3 Ajoutez du contenu ou des régions modifiables au nouveau modele.
4 Enregistrez le modele.
Lorsque vous creez un document à partir d'un modele imbrique, vous pouze modifier et enrichir le contenu des régions modifiables hériétées du modele de base et des régions modifiables créées dans le nouveau modele.
<h1 id="application-dun-modele-à-un-document-existant">Application d'un modele à un document existant</h1>
Lorsque vous appliquez un modele à un document contenant déjà des éléments, Dreamweaver tente de faire concorder le contentu existant avec une région du modele. Si le modele que vous appliquez au document est une version revisée de l'un des modèles existants, il est probable que les noms concordent. Dreamweaver compare les noms des régions modifiables du document avec les noms des régions modifiables du nouveau modele. Lorsque les noms de régions concordent, Dreamweaver place le contentu existant de la région de départ dans la nouvelle région du même nom.
Si vous appliquez un modele à un document auquel aucun modele n'a encore eté appliqué, les régions modifiables ne peuvent pas etre comparées et un cas de non-concordance se presente.
Dreamweaver recherche les éléments non concordants et les répertorie dans la boîte de dialogue Noms de région incohérents. Vous pouvez alors sélectionner la région ou les régions vers lesquilles le contenu de la page courante doit être transféré, ou bien decide der supprimer le contenu non concordant. Si vous souhaitez conserver le contenu, sélectionnez le nom d'une région modifiable dans le menu contextuel de la boîte de dialogue. Sinon, sélectionnez l'option Nulle part qui a pour effet de supprimer le contenu non concordant.
<h1 id="pour-appliquer-un-modele-à-un-document-existant">Pour appliquer un modele à un document existant :</h1>
1 Choisissez Fichier > Ouvrir pour ouvrir le document auquel vous souhaitez appliquer le modele.
2 Procedez de l'une des manieres suivantes :
- Cliques dans la fenêtre de document, puis choisissez Modifier > Modèles > Appliquer le modèle à la page. Sélectionnéz un modèle dans la liste, puis cliques sur Sélectionner.
- Sélectionnez le modele dans la catégorie Modèles du panneau Actifs et cliquez sur le bouton Appliquer.
- Faites glisser le modele de la categorie Modles du panneau Actifs vers le mode Creation de la fenetre de document.
3 Si le document comporte des éléments qui ne peuvent pas etre automatiquement attribués a une région de modele, la boite de dialogue Noms de région incohorents s'affiche. Cette boite de dialogue repertorie toutes les régions modifiables du modele que vous appliqueez au document. Utilisez-la pour selectionner la destination du contenu.
Pour plus d'informations sur le transfert du contenu existant vers des régions modifiables, voir Résolution des incohérances de noms de région dans l'aide de Dreamweaver.
<h1 id="détachment-dun-document-dun-modele">Détachment d'un document d'un modele</h1>
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 modulo. Lorsqu'un document est détaché, toutes les régions qui le composent deviennent modifiables.
Pour détacher un document d'un modele :
1 Ouvrez le document basé sur un modele que vous souhaitez detacher.
2 Choisissez Modifier > Modèles > Détacher du modele.
Le document est détaché du modele et tout le code du modele est supprimé.
<h1 id="modification-et-mise-à-jour-des-modèles">Modification et mise à jour des modèles</h1>
Lorsque vous enregistrez un modele, Dreamweaver vous demande si tous les documents attachés au modele doivent etre mis a jour. Vous pouvez egalement utiliser la commande Modifier > Modetes > Mettre a jour les pages.Dreamweaver met a jour tous les documents bases sur le modele qui resident dans le meme site que ce modele. Les modetes imbriques crees a partir du modele sont egalement mis a jour.
<h1 id="mise-à-jour-de-modèles-dreamweaver-4">Mise à jour de modèles Dreamweaver 4</h1>
Vou puez continuer d'utiliser dans la version courante de Dreamweaver tous les modèle creés dans Dreamweaver 4. Dreamweaver ne modifie pas automatiquement la syntaxe des fichiers de modulo Dreamweaver 4, de sorte que ces derniers puissant ettre utilisés à la fois dans Dreamweaver 4 et dans Dreamweaver MX. Toutefois, si vous insérez une nouvelle région de modulo dans un modulo Dreamweaver 4 à partir de Dreamweaver MX, cette région s'appuiera sur la nouvelle syntaxe Dreamweaver MX et le modele ne pourra plus etre utilisé dans Dreamweaver 4.
<h1 id="mise-à-jour-de-documents-basés-sur-un-modele">Mise à jour de documents basés sur un modele</h1>
Lorsque vous apportez des modifications à un modèle, Dreamweaver vous invite àmettre à jour les documents basés sur ce modele. Vous pouvez également utiliser les commandes de mise à jour pourmettre manuellement à jour le document courant ou le site tout entier. L'utilisation des commandes de mise à jour a le même effet qu'une nouvelle application du modele.
Pour ouvrir et modifier un modele attaché:
1 Ouvrez un document basé sur le modele dans la fenêtre de document et choisissez Modifier > Modèles > Ouvrir le modele attaché.
2 Apportez les modifications souhaitées au contenu du modele. Pour modifier les propriétés de page du modele,choisissez Modifier > Propriétés de la page (les documents basés sur un modele hériment des propriétés de page associées à ce dernier).
3 Enregistrez votre document. Un message s'affiche, vous invitant àmettre à jour les pages basées sur le modele.
Pour que les modifications apportées au modele soient appliquées au document :
Choisissez Modifier > Modèles > Mettre à jour la page en cours.
Pourmettreà jourle siteentierou tous les documentsutilisantlemodeleattaché:
1 Choisissez Modifier > Modèles > Mettre à jour les pages.
La boîte de dialogue Mettre à jour les pages s'affiche.
2 Dans le menu contextuel Regarder dans, procedez de l'une des manieres suivantes :
- Choisissez Site entier, puis selectionné le nom du site dans le menu contextual adjacent. Cette opération met à jour toutes les pages du site selectionné en se basant sur leur modele.
- Choisissez Fichiers utiliser, puis sélectionnez le nom du modele dans le menu contextual adjacent. Cette opération met à jour toutes les pages du site en cours qui se basent sur le modele sélectionné.
3 Dans la rubrique Mettre à jour, assurez-vous que l'option Modèle est activée.
4 Cliquez sur Demarrer.
Dreamweaver met à jour les fichiers indiqués. Si vous avez scélectionné l'option Afficher le journal, Dreamweaver affiche des informations sur les fichiers qu'il essaie demettre à jour et précise si la mise à jour a réussi.
<h1 id="vérification-de-la-syntaxe-du-modele">Vérification de la syntaxe du modele</h1>
Lorsque vous enregistrez un modele, Dreamweaver vérifie automatiquement sa syntaxe. Un message d'erreur s'affiche lorsque cette syntaxe est incorrecte. Le message précrit l'erreur et indique la ligne du code à l'origine de cette erreur.
La commande Vérifier la syntaxe du modele permet de vérifier la syntaxe d'un modele avant d'enregister celui-ci. Par exemple, si vous ajoutez manuellement un paramètre de modele ou une expression en mode Code, utilisez cette commande pour vérifier si la syntaxe du code est correcte.
Pour vérifier si la syntaxe d'un modele est correcte,procededez comme suit :
Choisissez Modifier > Modèles > Vérifier la syntaxe du modele.
<h1 id="a-propos-de-xml">A propos de XML</h1>
XML (Extensible Markup Language) est un langage de balisage qui permet la création de documents structurés. Vous pouvez le considérer comme une généralisation de HTML vous permettant de définir des balises. XML dérive du langage SGML (Standard Generalized Markup Language). Il permet, comme celui-ci, de définir des ensembles de balises et les relations qui existent entre eux.
Les balises XML sont similaires aux balises HTML : elles sont constituées d'un nom de balise et d'un certain nombre d'attributs facultatifs, et déliminées par des crochets. Tout comme en HTML, le contente de la balise est délimité par une balise d'ouverture et une balise de fermeture (dans laquelle le nom de la balise est précédé d'une barre oblique). Une différence syntaxique est que dans XML, une balise vide (c'est-à-dire une balise composée d'une seule balise, celle que <img>, au lieu d'une balise d'ouverture et d'une balise de fermeture contenant du texte ou autre matériel) doit composer une barre oblique immédiatement avant le crochet de fermeture. Par exemple, une balise <img> en XML seprésentera comme dans l'exemple ci-dessous :
<img src="test.png" />
Le langage XML est beaucoup plus strict en termes de syntaxe que le langage HTML. Ainsi, les fichiers qui ne sont pas rigoureusement conformes à la syntaxe XML sont rejetés par les programmes d'analyse XML.
Le langage XML fournit une technique de marquage des chaînes litterales qui permet notamment de signaler les balises ne devant pas été analysées. Cette technique s'appuie sur un élément appelé section CDATA et qui comporte une chaîne litterale entre crochets. Aucun des éléments situés entre les crochets n'est pris en compte par le programme d'analyse XML. Le XML exporté de Dreamweaver utilise également les sections CDATA.
<h1 id="exportation-et-importation-du-contenu-xml-dun-modele">Exportation et importation du contenu XML d'un modele</h1>
Un document basé sur un modele contient un ensemble de 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. Supposons que votre modele contienne trois régions modifiables : item_number, item_price et item_color. Vous pouvez entierement déscrire un document basé sur ce modele en indiquant le nom du modele et les paires nom/valeur.
Dreamweaver you permit d'exporter les paires nom/valeur dans un fisier 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 structure de manière appropriée, vous pouvez importer ses données dans un document basé sur un module Dreamweaver. Pour plus d'informations, voir « A propos de XML», page 490.
<h1 id="pour-exporter-les-régions-modifiables-dun-document-sous-xml">Pour exporter les régions modifiables d'un document sous XML :</h1>
1 Choisissez Fichier > Ouvrir, puis ouvrez un document basé sur un modele et contenant des régions modifiables.
2 Choisissez Fichier > Exporter > Données du modele en XML.
3 Dans la zone Notation de la boite de dialogue Exporter les données du modele en XML,CHOisissez l'une des options ci-dessous :
- Si le document contient des régions répetées ou des paramètres de modèle, désisissez Utiliser les balises XML standard de Dreamweaver.
- Si le modele ne contient ni région repétée ni paramètre de modele, choisissez Utiliser région mod. et noms comme balises XML.
4 Cliquez sur OK.
5 Dans la boîte de dialogue qui s'affiche, tapez un nom pour le fichier XML, puis cliquez sur Enregistrer.
Dreamweaver génére un fjichier XML contenant le matériel des paramètres et des régions modifiables du document (y compris le matériel des régions facultatives et des régions modifiables situées à l'intérieur de régions répetées). Le fjichier XML comporte le nom du modèle original, ainsi que le nom et le contenu de chaque région de modulo.
Remarque: le contenu des régions non modifiables n'est pas exporté vers le fjichier XML.
<h1 id="pour-importer-du-contentu-xml">Pour importer du contentu XML :</h1>
1 Choisissez Fichier > Importer > Importer XML dans le modele.
2 Dans la boîte de dialogue Importer XML, Sélectionné le fjichier XML et cliquez sur Ouvrir.
Dreamweaver create a new document based on the module's specifications in the fichier XML. It recombines the content of each region with the document to provide a single document for all the documents. This document results in a new document that can be used by the user to create a new document.
Notez que si votre fjichier 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 fjichier XML fictif de Dreamweaver, de façon à avoir un fjichier XML ayant exactement la bonne structure, puis à copier les données de votre fjichier XML original dans le fjichier XML exporté. Vous obtenez ainsi un fjichier XML ayant une structure correcte et contenant les données appropriées, prêtes à être importées.
<h1 id="utilisation-des-notations-de-balises-xml">Utilisation des notations de balises XML</h1>
Dreamweaver you permit d'exporter un contenu XML à l'aide des balises XML Dreamweaver standard.
Le moyen le plus simple de comprendre les notations de balise, si vous maïtrizé la syntaxe XML, est d'examiner un exemple. Le code XML suivant a été exporté d'un document sur la base d'un modulo spécifique newstamplate. Le document contient une région modifiable définie, News STORY (et une région modifiable par défaut, doctitle, qui contient la balise title du document).
Les balises XML Dreamweaver standard utilise une balise appelée item. La balise item possède un attribut name qui indique le nom de la région modifiable ; la balise contient une section CDATA qui comporte le contenu de la région modifiable. Dans cet exemple, la balise item avec name="doctitle" identifie le titre du document et la balise item avec name="NewsStories" identifie la région modifiable.
<pre><code class="language-xml"><?xml version="1.0"?>
<templateItems template="/Templates/newtemplate.dwt">
<item name="doctest">
<!--[CDATA[<title>Le dossier du jour</title>]">
</item>
<item name="NewsStories">
<!--[CDATA[<p>Le dossier est inséré ici.</p>]">
</item>
</templateItems>
</item>
</xml>
</code></pre>
<h1 id="chapitre-28-2">CHAPITRE 28</h1>
<h1 id="test-dun-site">Test d'un site</h1>
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 judieux de tester et de résoudre les problèmes de votre site liéquement au cours de sonélaboration, afin de Traitser les problèmes avant qu'ils ne s'aggravent et de les empêcher de se répéter).
Voudevezyouassurerquevospagesontl'apparenteetlefonctionnementdésirés dans les navigateurs cibles,qu'iln'yapasde liensrompuset quelespageesontpas trop longuesa telecharger.Vouspouvezegalementtesterel'ensembledevoirtesiteetyreglerlesproblèmes éventuels eneffectuantanrapportdesite.
Les conseils suivants vous aideront à garantir aux visiteurs de votre site une expérience positive :
Assurez-vous que les pages fonctionnent comme prévu dans les navigateurs visés et qu'elles « échouent élégament » dans les autres.
Vos pages doivent être lisibles et fonctionnelles dans les navigateurs qui ne prennten pas en charge les styles, les calques, les plug-ins ou les éléments JavaScript (voir « Vérification de la compatibilité du navigateur», page 494). Pour les pages qui ne s'affichent pas dans des navigateurs anciers, songez à utiliser le comportement Vérifier le navigateur pour rediriger automatiquement les visiteurs vers une autre page (voir « Vérifier le navigateur», page 376).
- Affichez vos pages dans le plus grand nombre de navigateurs et sur le plus grand nombre de plates-formes possible.
Cela vous donna la possibilité de constater les différences de presentation, de couleur, de taille de police et de format de fenêtre par défaut, autant d' éléments qu'il est impossible de prévoir lors de la verification dans le navigateur cible (voir « Aperçu de page dans les navigateurs», page 496).
- Vérifiez que le site ne contient pas de liens brisés (réparez-les s'il en contient).
Les autres sites étant parfois modifiés et réorganisés, il peut arriver que certaines pages vers lesquelles vos liens pointent soient déplacées ou supprimées. Vous pouvez executer un rapport de vérification des liens pour les tester (voir « Vérification des liens dans une page ou un site », page 497, « Correction des liens brises », page 499, « Ouverture des documents liés dans Dreamweaver », page 500 ou « Utilisation des rapport pour tester un site », page 501).
- Contrôlez la taille de vos pages et leur durée de téléchargement (voir « Vérification du temps et de la taille de téléchargement», page 500).
Pour les pages qui contiennent un tableau de grande taille, n'oubliez pas que les visiteurs ne voient rien tant que le tableau n'est pas entièrement chargé. Envisagez de fragmenter les grands tableaux ; si c'est impossible, envisagez de placer du contentu, par exemple un message de bienvenue ou une banniere publicitaire, en dehors du tableau, en haut de la page, de maniere a ce que les utilisateurs puissant au moins voir ce contentu pendant le chargement du tableau
- Effectuez quelques rapportes sur le site pour tester et dépanner le site entier.
Voupez rechercher sur le site entier d'eventuels problèmes, tels que des documents sans titre, des balises vides ou des balises imbriquées redondantes (voir « Utilisation des rapports pour tester un site », page 501).
- Une fois que la plus grande partie du site a eté publiée, continuez à lemettre à jour et à en assurer la maintenance.
La publication d'un site (c'est-à-dire la publication et l'activation) peut être complie de différentes manières et constitue un processus continu. La définition et l'implémentation d'un système de contrôle de version constituent une partie importante du processus, que ce soit avec les outils intégrés à Macromedia Dreamweaver MX ou par le biais d'une application de contrôle de version externe.
- Consultez les forums de discussion sur Macromedia Dreamweaver accessibles à partir du site Web de Macromedia. Pour plus d'informations sur l'accès aux groupes de discussion, consultez le site http://www.macromedia.com/go/dreamweaver_newsgroup.
Vous y trouvrez nombre d'informations précieuses sur les différents navigateurs, plateformes, etc. Vous pouvez également discuter de questions techniques et échanger des informations utiles avec d'autres utilisateurs de Dreamweaver.
Ce chapitre contient les sections suivantes :
- « Vérification de la compatibilité du navigateur», page 494
- « Utilisation de comportements pour détecter le type et la version des navigateurs et des plug-ins », page 495
- « Aperçu de page dans les navigateurs», page 496
- « Vérification des liens dans une page ou un site», page 497
- « Correction des liens brises», page 499
- « Ouverture des documents liés dans Dreamweaver», page 500
- « Vérification du temps et de la taille de téléchargement», page 500
- « Utilisation des rapportes pour tester un site », page 501
<h1 id="vérification-de-la-compatibilité-du-navigateur">Vérification de la compatibilité du navigateur</h1>
Dreamweaver you permit de creer des pages Web a l'aide d'elements pris en charge par tous les navigateurs (des images et un paragraphe de texte, par exemple), mais aussi a l'aide d'elements qui ne sont pris en charge que par des navigateurs recents (par exemple, les styles et les calques).
La fonction Vérifier les navigateurs cibles teste le code HTML de vos documents pour voir s'il ne contient pas de balises et d'attributs non pris en charge par vos navigateurs cibles. Cette vérification n'alerte en rien le document.
La fonction Vérifier les navigateurs cibles utilise des fichiers texte appelés « profils de navigateurs » pour déterminer les balises prises en charge par tel ou tel navigateur. Dreamweaver compte des profils prédéfinis pour les versions 2.0 et ultérieures de Netscape Navigator, pour les versions 2.0 et ultérieures de Microsoft Internet Explorer et pour les versions 2.1 et ultérieures d'Opera. Pour modifier les profils existants ou en créé de nouveaux, consultez la section Customizing Dreamweaver (Personnalisation de Dreamweaver) du site http://www.macromedia.com/fr/support/.
Vou puez executer une verification du navigateur cible sur un document, un repertoire ou tout un site.
Remarque: cette vérification ne permet pas de contrôle les scripts de votre site.
<h1 id="pour-executer-une-vérification-dun-navigateur-cible">Pour executer une vérification d'un navigateur cible :</h1>
1 Choisissez parmi les options suivantes :
- Pour appliquer la vérification sur le document en cours, enregistrrez le fichier. Dreamweaver effectue la vérification sur la dernière version enregistrée du fichier, sans tener compte des changements non enregistrés.
- Pour lancer la vérification sur un réseau ou un site, sélectionnez un site dans le menu déroulant Sites en cours dans la fenêtre Site. Dreamweaver effectue la vérification du navigateur cible sur tous les fischiers HTML de ce dossier et de ses sous-dossiers. Les vérifications de navigateurs cibles ne sont possibles que sur les fischiers locaux.
2 Choisissez Fichier > Vérifier la page > Vérifier les navigateurs cibles.
Si vous n'avez pas encore indiqué de navigateur principal, Dreamweaver vous invite à le faire.
3 Dans la liste des navigateurs, Sélectionné le navigateur cible avec lequel vous souhaïez vérifier cette site.
4 Clique sur Verifier.
Le rapport apparait dans le panneau Vérification du navigateur cible (dans le groupe de panneaux Résultats).
5 Pour enregistrer le rapport, cliquez sur le bouton Enregistrer rapport dans le panneau Vérification du navigateur cible.
Remarque : le rapport sur le navigateur cible est un fichier temporaire ; il sera perdu si vous ne l'enregistrez pas.
<h1 id="utilisation-de-comportements-pour-détecter-le-type-et-la-version-des-navigateurs-et-des-plug-ins">Utilisation de comportements pour détecter le type et la version des navigateurs et des plug-ins</h1>
Voupeusutiliserdescomportementspourdeterminerle typede navigateurutiliseparvos visiteurs,et savoir s'ilsdisposentd'unplug-inparticulier.Pourplusd'informationssurles comportements,voir «UtilisationdescomportementsJavaScript»,page369.
Vérifier le navigateur permet d'envoyer les visiteurs sur des pages différentes selon le type et la version de leur navigateur (voir « Vérifier le navigateur», page 376). Par exemple, vous pouvez decide que les utilisateurs de Netscape Navigator 4.0 iront sur telle page, les utilisateurs de Microsoft Internet Explorer 4.0 ou 5.0 sur telle autre, et les utilisateurs d'un另一种 type de navigateur resteront 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é (voir « Vérifier le plug-in», page 377). Par exemple, vous pouvez rediriger les utilisateurs disposant de Macromedia Shockwave sur telle page et sur une autre dans le cas contraire.
<h1 id="aperçu-de-page-dans-les-navigateurs">Aperçu de page dans les navigateurs</h1>
Il est intereessant de tester vos pages en les previsualisant dans des navigateurs regulierement au cours du processus de conception et de creation du site. En suivant cette strategie, vous pouze reperer les erreurs et eviter de les repeter par la suite.
Voupez previsualiser des documents à tout moment dans vos navigateurs cibles ; il n'est pas nécessaire d'enregistrer au préalable le document. Toutes les fonctions liées au navigateur sont opérationnelles, y compris les comportements JavaScript, les liens absolus et relatifs au document, les contrôleux ActiveX et les plug-ins Netscape Navigator, à condition que vous ayez installé les plug-ins ou contrôleux ActiveX requis.
Le contenu lie à un chemin relatif à la racine n'apparait pas lorsque vous lancez l'aperçu de documents dans un navigateur local (sauf si vous sélectionnez l'options Aperçu à l'aide d'un fichier-temporaire dans Préférences ; voir « Aperçu de page dans les navigateurs », page 496). En effet, à la différence des serveurs, les navigateurs ne reconnaissent pas les racines de sites. Pour lancer l'aperçu d'un contenu lie à des chemins relatifs à la racine, placez le fichier sur un serveur distant, puis choisissez Fichier > Aperçu dans le navigateur pour l'afficher (voir « Chemins relatifs à la racine du site », page 427).
Vou puez définir jusqu'à 20 navigateurs pour avoir un aperçu des pages de votre site. Tous les navigateurs que vous définisse apparaissent dans l'objet de menu Aperçu dans le navigateur. Il est judiciaux d'effectuer un aperçu dans les navigateurs suivants: Internet Explorer 4.0, Netscape Navigator 4.0 et au moins un navigateur base sur du texte, tel que Lynx.
Pour prévisualiser votre document dans un navigateur, procédez de l'une des manières suivantes :
- Choisissez Fichier > Aperçu dans le navigateur, puis choisissez un navigateur dans la liste. Si vous n'avez pas encore sélectionné de navigateur, choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X), puis selectionné la catégorie Aperçu dans le navigateur située sur la gauche pour sélectionner un navigateur.
- Appuyez sur la touche F12 pour afficher la page en cours dans votre navigateur par défaut.
- Appuyez sur la combinaison de touches Contrôle+F12 (Windows) ou Commande+F12 (Macintosh) pour afficher la page en cours dans votre navigateur secondaire.
<h1 id="pour-tester-les-liens-dans-un-navigateur">Pour tester les liens dans un navigateur :</h1>
1 Choisissez Fichier > Aperçu dans le navigateur ou appuyez sur la touche F12.
2 Cliquez sur les liens actifs pour vérifier qu'ils fonctionnent correctement.
Pour définit ou modifier vos préférences pour le navigateur principal et le navigateur secondaire :
1 Procedez de l'une des manières suivantes pour ouvrir les options Aperçu dans le navigateur :
- Choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X), puis sélectionnez la catégorie Aperçu dans le navigateur dans la liste de gauche.
- Choisissez Fichier > Aperçu dans le navigateur > Modifier la liste des navigateurs.
La boîte de dialogue Préférences contenant les options Aperçu dans le navigateur apparait.
2 Apportez les modifications de votrechoix.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
3 Cliquez sur OK.
<h1 id="vérification-des-liens-dans-une-page-ou-un-site">Vérification des liens dans une page ou un site</h1>
La réparation de liens rompus (liens qui ne seront plus un chemin valide ou qui renvoie à un fichier inexistant) sur un grand site peut être un problème épineux et long à régler. En effet, un site de taille importante peut containir des centaines de liens vers des documents internes ou externes et ces liens peuvent changer avec le temps. Les fichiers orphelins (fichiers qui existent toujours dans le site mais qui ne sont plus reliés àaucun fichier du site) peuvent également poser un problème, car ils prennten de la place sur le disque dur et rendent le travail sur le site plus complexe pour les membres de l'équipe.
Utilisez la fonction Vérifier les liens pour rechercher les éventuels liens brises et les fischiers non référencés dans un fjichier ouvert, dans une partie du site local ou dans le site local tout entier. Les seuls liens que Dreamweaver vérifie sont ceux qui pointent vers des documents au sein du même site. Dreamweaver dresse une liste des liens externes qui apparaissent dans les documents sélectionnés, mais ne les vérifie pas.
Lorsque Dreamweaver a fini de vérifier les liens dans des fichiers spécifique, le programme ouvre le panneau Vérificateur de lien (dans le groupe de panneaux Résultats). Cette boîte de dialogue affiche une liste de liens brises, de liens externes (liens que Dreamweaver ne peut pas vérifier) et de liens orphelins. Pour plus d'informations, voir « Ouverture des documents liés dans Dreamweaver», page 500.
<h1 id="pour-vérifier-les-liens-au-sein-du-document-en-cours">Pour vérifier les liens au sein du document en cours :</h1>
1 Enregistrez le fjichier dans un emplacement du site Dreamweaver local.
2 Choisissez Fichier > Vérifier la page > Vérifier les liens.
Le rapport apparait dans le panneau Vérificateur de lien (dans le groupe de pannaux Résultats).
3 Pour enregistrer le rapport, cliquez sur le bouton Enregistrer rapport dans le panneau Vérificateur de lien.
Remarque : le rapport sur le navigateur cible est un filchier temporaire ; il sera perdu si vous ne l'enregistrez pas.
<h1 id="pour-vérifier-les-liens-à-lintérieur-dune-partie-du-site-local">Pour vérifier les liens à l'intérieur d'une partie du site local :</h1>
1 Dans la fenêtre Site, choisissez un site dans le menu dérouulant Sites en cours.
2 Dans Affichage local, selectionnez les fichiers ou les dossiers à vérifier.
3 Suivez l'une des procédures suivantes pour acceder aux options :
- Cliquez à l'aide du bouton droit (Windows) ou en appuyant sur la touche Contrôle (Macintosh) sur l'un des fichiers sélectionnés et cliquez sur Vérifier les liens > Fichiers/ Dossiers sélectionnés dans le menu contextual.
- Choisissez Fichier > Vérifier la page > Vérifier les liens.
Le rapport apparait dans le panneau Verificateur de lien (dans le groupe de panneaux Résultats).
4 Dans le panneau Vérificateur de lien, Sélectionnez un rapport de lien spécifique dans le menu déroulant Afficher pour afficher un autre rapport.
Vouaves le choix entre des rapport de Liens brises ou de Liens externes. Vou puez vérifier les fichiers orphelins uniquement lorsque vous vérifie les liens dans un site entier (voir la procedure suivante).
5 Pour enregistrer un rapport, cliquez sur le bouton Enregistrer rapport dans le panneau Vérificateur de lien.
<h1 id="pour-vérifier-les-liens-dans-tout-le-site">Pour vérifier les liens dans tout le site :</h1>
1 Dans la fenêtre Site,CHOISSEZ un site dans le menu derouulant Sites en cours.
2 Choisissez Site > Vérifier tous les liens du site.
Le rapport apparait dans le panneau Vérificateur de lien (dans le groupe de pannaux Résultats).
3 Dans le panneau Vérificateur de lien, Sélectionnez un rapport de lien spécifique dans le menu déroulant Afficher pour afficher un autre rapport.
Les différences options sont : Liens brises, Liens externes et Fichiers orphelins.
4 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 selectionné Fichiers orphelins comme type de rapport, vous pouvez supprimer les fichiers orphelins à partir de la boite de dialogue Vérificateur de lien directement en selectionnant un fichier dans la liste et en appuyant sur la touche Supprimer.
Une liste des fichiers correspondant au type du rapport sélectionné s'affiche dans la boîte de dialogue Vérificateur de lien.
5 Pour enregistrer un rapport, cliquez sur le bouton Enregistrer rapport dans le panneau Vérificateur de lien.
<h1 id="correction-des-liens-brisés">Correction des liens brisés</h1>
Lorsque vous vérifie des liens dans Dreamweaver, la boite de dialogue Vérificateur de lien affiche un rapport des liens brisés, des liens externes et, si vous avez besoin de vérifier le site tout entier, des fichiers orphelins (voir « Vérification des liens dans une page ou un site», page 497).
Voupez corriger les liens brises et les refrences d'imagines directement dans la boite de dialogue Verificateur de lien, ou ouvr les fichiers de la liste et reparer les liens dans l'inspecteur de propriétés.
<h1 id="pour-réparer-des-liens-dans-la-boîte-de-dialogue-vérificateur-de-lien">Pour réparer des liens dans la boîte de dialogue Vérificateur de lien :</h1>
1 Executeur un rapport de vérification de lien (voir « Vérification des liens dans une page ou un site », page 497).
2 Sélectionnez le lien brisé dans la colonne Liens brises (pas dans la colonne Fichiers) du panneau Vérificateur de lien (dans le groupe de pannaux Résultats).
Une icône de dossier s'affiche à côté du lien brisé.
3 Tapez le chemin d'accès et le nom du fichier ou cliquez sur l'icone de dossier pour trouver le fichier et le selectionner.
4 Appuyez sur Tab ou Entre (Windows) ou Retour (Macintosh).
S'il y a d'autres liens brises vers le même fjichier, une boite de dialogue vous invite à réparer également les références dans les autres fjichiers. Cliquez sur Oui pour que Dreamweaver mette à jour tous les documents de la liste faisant référence à ce fjichier. 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, Dreamweaveressaie d'extraire les fichiers qui nécessitant des modifications. S'il ne peut pas extraire un fichier, Dreamweaver affiche un avertissement et laisse les références brisées inchangées. Voir « Utilisation de l'archivage et de l'extraction », page 90.
<h1 id="pour-corriger-des-liens-dans-linspecteur-de-propriétés">Pour corriger des liens dans l'inspecteur de propriétés :</h1>
1 Executer un rapport de vérification de lien (voir « Vérification des liens dans une page ou un site », page 497).
2 Double-cliquez sur une entrée de la colonne Fichier dans le panneau Vérificateur de lien (dans le groupe de pannaux Résultats).
Dreamweaver ouvre le document, selectionne l'image ou le lien problématique, et met en surbrillance le chemin d'accès et le nom de fichier dans l'inspecteur de propriétés. (Si l'inspecteur de propriétés n'est pas ouvert,CHOISSEZ Fenêtre > Propriétés pour l'ouvrir.)
3 Pour définir un nouveau chemin d'accès et un nouveau nom de fichier, tapez directement sur le texte en surbrillance ou cliquez sur l'icone du dossier pour naviguer vers le fichier.
Si vous mettez à jour une refé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 de propriétés pour réinitialiser les valeurs de hauteur et de largeur. Les mentions L et H passent de caractère gras à caractère normal.
4 Enregistrez le fichier.
Dès que les liens sont réparés, leur entree disparait de la liste des liens brises. Si une entree figure toujours dans la liste après que vous avez indiqué un nouveau chemin d'accès ou nom de fjchier dans le vérificateur de lien (ou après avoir enregistrredes changements apportés à l'inspecteur de propriétés), cela signifie que Dreamweaver ne peut pas tracer le nouveau fjchier et qu'il considere toujours que le lien est brise.
<h1 id="ouverture-des-documents-liés-dans-dreamweaver">Ouverture des documents liés dans Dreamweaver</h1>
Les liens ne sont pas actifs dans Dreamweaver ; c'est-à-dire que vous ne pouvez pas ouvrir les documents liés en cliquant sur le lien de la fenêtre de document.
Pour ouvrir des documents liés dans Dreamweaver, précédez de l'une des manières suivantes :
- Sélectionnez le lien et choisissez Modifier > Ouvrir la page liée.
- Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh), puis double-cliquez sur le lien.
Remarque: le document lié doit résider sur le disque local.
<h1 id="vérification-du-temps-et-de-la-taille-de-téléchargement">Vérification du temps et de la taille de téléchargement</h1>
Dreamweaver calculates the taille on the base du contenu de toute la page, y compris tous les objets liés, tels que les images et les plug-ins. Dreamweaver estime la durée de téléchargement en fonction de la vitesse de connexion entree dans les prevalences de la Barre d'etat. Le temps de telechargement reel depend de I'etat du traffic sur Internet.
Pour vérifier les durées de téléchargement pour une page Web particulière, il estMLSant d'utiliser la « regle des huit secondes » ; c'est-à-dire que la plupart des utilisateurs n'attendront pas plus de huit secondes pour le telechargement d'une page.
Pour définit des préférences en matière de taille et de temps de téléchargement :
1 Choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X).
La boîte de dialogue Préférences s'affiche.
2 Sélectionnéz la catégorie Barre d'etat dans la liste de gauche.
Les options de la préférence Barre d'été apparaissent.
3 Choisissez la vitesse de connexion à partir de laquelle sera calculé le temps de téléchargement.
En Europe et aux USA, la vitesse de connexion la plus repandue est 28,8 Kb/s. Si vous connaçez ce site pour un intranet, vous pouvez seLECTIONner 1500 (vitesse T1).
Pour plus d'informations sur les préférences du site, voir « Définition des préférences de la barre d'objet », page 40.
4 Cliquez sur OK.
<h1 id="utilisation-des-rapportes-pour-tester-un-site">Utilisation des rapportes pour tester un site</h1>
Lorsque vous testez votre site, vous pouvez étabir et générer des rapports pour différents attributs HTML à l'aide de la commande Rapports. Cette commande permet de vérifier les liens externes, les balises de polices imbriquées combinables, les textes secondaires manquants, les balises imbriquées redondantes, les balises vides amovibles et les documents sans titre. Vous pouvez, avant la publication, tester et dépanner ces problèmes HTML dans les documents sélectionnés ou l'ensemble d'un site.
Après avoir exécuté un rapport, vous pouvez l'enregistrer au format XML, puis l'importer dans un réseau, une base de données ou une feuille de calcul et l'imprimer, ou encore l'afficher sur un site Web. Vous pouvez également ajouter différents types de rapport à Dreamweaver via le site Web de Macromedia Dreamweaver Exchange (voir « Ajout d'extensions dans Dreamweaver», page 55).
Pour utiliser la commande Rapports avec le système d'archivage et d'extraction et les Design Notes, voir « Utilisation des rapports pour améliorer le déroulement du travail», page 105.
Pour executer des rapportes afin de tester un site :
1 Choisissez Site > Rapports.
La boîte de dialogue Rapports s'affiche.
2 Choisissez une catégorie sur laquelle effectuer un rapport et un type de rapport à exécuter. Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
3 Cliques sur Executer pour creer le rapport.
Suivant le sujet du rapport, vous pouvez être invité à enregistrer votre fichier, définir votre site ou seLECTIONner un dossier (si ce n'est pas déjà fait).
Une liste de résultats apparaît dans le panneau Rapports du site (dans le groupe de panneaux Résultats).
<h1 id="pour-utiliser-et-enregistrer-un-rapport">Pour utiliser et enregistrer un rapport :</h1>
1 Pour trier les résultats, cliquez sur l'en-tête de la colonne en fonction de laquelle vous souhaitez trier les résultats.
Vou puez trier les résultats par nom de fichier, numero de ligne ou description.
2 Sélectionnez un élément dans le rapport, puis double-cliquez pour ouvrir le fichier dans la fenêtre de document.
3 Cliques sur Enregistrer le rapport.
Une fois le rapport enregistré, vous pouze l'importer dans un modele, une base de données ou une feuille de calcul et l'imprimer, ou encore l'afficher sur un site Web.
Conseil : après avoir exécuté les rapport HS HTML, utilisez la commande Nettoyer HTML pour corriger les erreurs HTML détectées.
<h1 id="partie-viii-ajout-de-contenu-dynamique-aux-pages-web">Partie VIII Ajout de contenu dynamique aux pages Web</h1>
Les outils de développement d'application de Dreamweaver permettent d'ajouter du contenu dynamique aux pages Web.
Cette partie du manuel contient les chapitres suivants :
- Chapitre 29, « Optimisation de l'espace de travail pour tirer parti des fonctions de développement visuel »
- Chapitre 30, « Conception de pages dynamiques dans Dreamweaver »
- Chapitre 31, « Stockage et récapération des données spécifiques à une page »
- Chapitre 32, « Définition de sources de contenu dynamique »
- Chapitre 33, « Ajout d'un contenu dynamique à une page Web »
- Chapitre 34, « Affichage des enregistements de base de données »
- Chapitre 35, « Utilisation des composants ColdFusion »
- Chapitre 36, « Utilisation des services Web »
- Chapitre 37, « Ajout de comportements de serveur personnelisés »
- Chapitre 38, « Création de formulaires interactifs »
<h1 id="chapitre-29-2">CHAPITRE 29</h1>
<h1 id="optimisation-de-lespace-de-travail-pour-tirer-parti-des-fonctions-de-développement-visuel">Optimisation de l'espace de travail pour tirer parti des fonctions de développement visuel</h1>
Vous pouvez optimiser l'espace de travail de Macromedia Dreamweaver MX afin de développer visuellement vos applications Web. Vous pouvez par exemple utiliser des panneaux pour creer rapidement des pages dynamiques et afficher des données dynamiques de vos pages tout en travaillant.
Ce chapitre contient les sections suivantes :
- « Affichage de panneaux utiles», page 505
- « Affichage de la structure de votre base de données dans Dreamweaver», page 507
- « Affichage des données dynamiques en mode Création», page 508
- «Travail en mode Creation sans données dynamiques», page 512
- « Aperçu des pages dynamiques dans un navigateur», page 512
- « Limitation des informations de base de données affichées dans Dreamweaver», page 513
<h1 id="affichage-de-panneaux-utiles">Affichage de panneaux utiles</h1>
Cliquez sur l'onglet Application de la barre Insertion pour afficher un ensemble de boutons qui vous permettright d'ajouter du contenu dynamique et des comportements de serveur à votre page.
Le nombre et le type d'icones apparaisent sur le type de document ouvert dans la fenêtre de document. La barre Insertion comprend des boutons qui permettent d'ajouter les éléments suivants sur la page :
- Jeu d'enregistements
- Texte ou tableaux dynamiques
- Formulaires permettant d'insérer ou demettre à jour les rapport dans une base de données
- Barres de navigation d'un enregistrement
Lorsque vous passez en mode Code (Affichage > Code), des panneaux supplémentaires peuvent apparaître pour vous permettre d'insérer du code dans la page. Par exemple, si vous visualisez une page JSP en mode Code, un panneau JSP apparait sur la barre Insertion, comme illustré ci-dessous:
Pour connaître la fonction de chacune des icones de la barre Insertion, passes la souris dessus. Une info-bulle apparait, comme illustré ci-dessous :
Si vous souhaitez définir des sources de contenu dynamique pour votre page et ajouter le contenu sur la page,CHOISSEZ Fenetre > Liaisons de données. Le panneau Liaisons apparait, comme illustré ci-dessous:
Pour plus d'informations,choisissezAide dans le menu contextuel du groupe de panneaux.
Si vous souhaitez ajouter une logique côté serveur dans vos pages dynamiques,CHOISSEFENÊTRE > Comportements du serveur. Le panneau Comportements du serveur apparait, comme illustré ci-dessous :
Un comportement de serveur est l'ensemble des instructions insérées dans une page dynamique au moment de la création et executées sur le serveur lors de l'exécution. Pour plus d'informations, choisissez Aide dans le menu contextuel du groupe de panneaux.
Si vous souhaitez explorer les bases de données ou créé des connexions de base de données,CHOISSEZ Fenetre > Bases de données. Le panneau Bases de données apparait, comme illustré ci-dessous:
Pour plus d'informations,CHOISSEZ Aide dans le menu contextuel du groupe de panneaux.
Si vous souhaitez inspector, ajouter ou modifier un code pour JavaBeans, des composants Macromedia ColdFusion ou des services Web,CHOISSEZ Fenetre > Composants. Le panneau Composants apparait, comme illustré ci-dessous:
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 prennet pas JavaBeans en charge.
Pour plus d'informations,CHOISSEZ Aide dans le menu contextuel du groupe de panneaux.
<h1 id="affichage-de-la-structure-de-votre-base-de-données-dans-dreamweaver">Affichage de la structure de votre base de données dans Dreamweaver</h1>
Une fois la connexion à la base de données réalisée, vous pouze afficher sa structure dans Dreamweaver. Vous pouze par exemple afficher les noms des tables, des colonnes, des modes et des procédures stockées dans la base de données. Dreamweaver identifie également la clé primaire de toutes les tables et les types de données de toutes les colonnes. Vous pouze même afficher les données stockées dans les tables de votre base de données.
Pour afficher la structure d'une base de données :
1 Ouvrez le panneau Base de données (Fenêtre > Bases de données).
Dreamweaver compte le panneau Bases de données avec toutes les bases de données pour lesquelles des connexions ont ete creedes. Si vous developpez un site ColdFusion, Dreamweaver compte le panneau avec toutes les bases de données pour lesquelles des sources de données ont ete definies dans ColdFusion Administrator.
Remarque: Dreamweaver recherche le site en cours sur le serveur ColdFusion défini Voir « Définition du dossier de traitement des pages dynamiques », page 140.
Si aucune base de données n' apparait dans le panneau, vous doivent creer une connexion de base de données. Pour plus d'informations, voir « Connexion à une base de données », page 142.
2 Pour afficher les tables, les procédures stockées et les modes dans la base de données, cliquez sur l'icone 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.
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 désissez Afficher les données dans le menu contextualuel.
<h1 id="affichage-des-données-dynamiques-en-mode-creation">Affichage des données dynamiques en mode Creation</h1>
Par défaut, le mode Création (Affichage > Création) fournit une représentation visuelle de la page sans contenu dynamique. L'affichage par défaut n'est pas adapté à la création d'une page dynamique, car le contenu dynamique peut modifier la mise en page du tout au tout.
Pour connaître la manière dont le contenu dynamique peut affecter la mise en page, choisissez Affichage > Live Data. Dreamweaver affiche la page en mode Création, contenu dynamique inclus. L'illustration suivante présente une page dynamique lorsque Live Data est désactisé :
L'illustration suivantepresentela mêmepageavecLiveDataactivated:
Lorsque Live Data est activé en mode Création, vous pouvez :
- améliorer la presentation 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 Creation. Pour les tester, utilisez la fonction Aperçu dans le navigateur (voir « Aperçu des pages dynamiques dans un navigateur », page 512).
Lorsque vous effectuez une modification qui touche le contenu dynamique de la page, vous pouvezactualiser la page en cliquant sur le bouton Actualiser (l'icone représentant un cercle constitué de flèches). Dreamweaver peut également actualiser automatiquement la page. Pour plus d'informations, voir « Actualisation de la page», page 511.
<h1 id="conditions-daffichage-des-données-dynamiques">Conditions d'affichage des données dynamiques</h1>
Pour afficher des données dynamiques en mode Creation, vous doivent procéder de la façon suivante :
- Définissez un dossier dans lequel Traits les pages dynamiques. Pour obtenir des instructions, voir « Définition du dossier de traitement des pages dynamiques», page 140.
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. Pour plus d'informations, voir « A propos du préfixe d'URL», page 141.
- Copiez les fichiers associés (le cas échéant) dans le dossier. Pour plus d'informations, voir « Copie de fichiers dépendants », page 510.
- Fournissez tous les paramètres de la page qu'un utilisateur fournirait normalement. Pour obtenir des instructions, voir « Attribution des paramètres attendus dans la page», page 510.
En cas de difficultés à faire fonctionner l'affichage des données dynamiques, voir « Dépannage de l'affichage des données dynamiques », page 511.
<h1 id="copie-de-fichiers-dépendants">Copie de fichiers dépendants</h1>
Certaines pages dynamiques s'appuient sur d'autres fichiers pour fonctionner normalement. Vous nevez télécharger tous les fichiers associés, y compris les inclusions cote 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 (voir « Définition du dossier de traitement des pages dynamiques», page 140). 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 cote serveur et les fichiers d'application tels que global.asa (ASP) et application.cfm (ColdFusion). Vérifiez que ces fichiers ont été téléchargeés sur le serveur avant d'activer la fonction Live Data.
Pour copier des fichiers dépendants vers le serveur d'application :
1 Ouvrez la fenêtre Site (Fenêtre > Fichiers du site) et cliquez sur le bouton Etendre (la dernière icône sur la barre d'outils de la fenêtre).
La fenêtre Site adoptsa taille maximale.
2 Cliquez sur l'icone Serveur d'application située sur la barre d'outils du panneau Site agrandie (la deuxieme icone a 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é 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.
<h1 id="attribution-des-paramètres-attendus-dans-la-page">Attribution des paramètres attendus dans la page</h1>
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.
Pour fournir à la page les données devant être fournies par l'utilisateur :
1 Dans la fenêtre de document,CHOISSEZ Affichage > Paramètres Live Data.
La boîte de dialogue Paramètres Live Data s'affiche.
2 Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
Si vous spécifie la méthode GET dans la boîte de dialogue Paramètres Live Data, une zone de texte apparait sur la barre d'outils du mode Création. Utilisez cette zone de texte 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 :
nom=valeur;
ou nom est le nom de paramètre d'URL attendu par votre page et valeur la valeur de ce paramètre. Pour plus d'informations, voir « Description des paramètres d'URL», page 526.
<h1 id="actualisation-de-la-page">Actualisation de la page</h1>
Avec Live Data activé, cliquez sur le bouton Actualiser (cercle constitué de flèches) de la barre d'outils du document si vous souhaitez actualiser la page après avoir effectué une modification touchant le contenu dynamique.
Vou puez également selectionner l'option Actualisation automatique de la barre d'outils. Avec cette option activée, la page s'actualise chaque fois que vous effectuez une modification qui touche le contenu dynamique. Si la connexion à votre base de données est lente, vous pouze ignorer cette option lorsque vous travailliez dans la fenêtre Live Data.
<h1 id="dépannage-de-laffichage-des-données-dynamiques">Dépannage de l'affichage des données dynamiques</h1>
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 case Répertoire distant doit specifier un dossier capable de Traits des pages dynamiques (voir « Définition du dossier de traitement des pages dynamiques », page 140). Voici un exemple de dossier distant approprié si vous executez IIS ou PWS sur leur disque dur :
C:\Inetpub\wwwroot\myapp\
Vérifiez que la case Préfixe de l'URL spécifique une URL qui correspond au dossier distant. Par exemple, si PWS ou IIS est exécuté sur votre ordinateur local, les dossiers distants suivants ont les préfixes d'URL suivants :
<table><tr><td>Répartoires distants</td><td>Préfixe de l'URL</td></tr><tr><td>C:\Inetpub\wwwroot</td><td>http://localhost/</td></tr><tr><td>C:\Inetpub\wwwroot\myapp\</td><td>http://localhost/myapp/</td></tr><tr><td>C:\Inetpub\wwwroot\fs\planes</td><td>http://localhost/fs/planes</td></tr></table>
Pour plus d'informations, voir « A propos du préfixe d'URL», page 141.
<h1 id="travail-en-mode-création-sans-données-dynamiques">Travail en mode Création sans données dynamiques</h1>
Si Live Data est désacté ou si vous étés 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ésentier 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{RecordsetType.Name.ColumnName}, où Recordset correspond au nom du jeu d'enregistrements et ColumnName correspond au nom de la colonne可以选择 dans le jeu d'enregistrements.
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ésentier les espaces réservés.
Pour utiliser des accolades vides comme espace réservé d'un texte dynamique :
1 Choisissez Edition > Préférences > Éléments invisibles ou Dreamweaver > Préférences > Éléments invisibles (Mac OS X).
2 Dans le menu dérouulant Afficher le texte dynamique sous,CHOISSE \\
3 Cliquez sur OK.
<h1 id="aperçu-des-pages-dynamiques-dans-un-navigateur">Aperçu des pages dynamiques dans un navigateur</h1>
Les développements d'applications Web débougues souvent leurs pages en les vérifiant rapidement et régulierément dans un navigateur Web. Dreamweaver prend ce type de travail en charge avec la commande Aperçu dans le navigateur (F12). Cette commande vous permet d'afficher rapidement vos pages dynamiques dans un navigateur sans les télécharger d'abord sur un serveur.
Conseil : 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. Pour plus d'informations, voir « Affichage des données dynamiques en mode Création », page 508.
Lorsque vous utilisez cette commande, 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 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. Pour plus d'informations, voir « Définition du dossier de traitement des pages dynamiques », page 140.
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 fischiers dépendants (tels que fischiers d'image) ou les inclusions côte serveur. Pour télécharger un fjichier manquant,CHOISSEZ Fenetre > Site pour ouvrir la fenetre Site, selectionnee le fjichier dans Dossier local et cliquez sur la flèche haut bleue de la barre d'outils pour copier le fjichier dans le dossier du serveur Web.
<h1 id="limitation-des-informations-de-base-de-données-affichées-dans-dreamweaver">Limitation des informations de base de données affichées dans Dreamweaver</h1>
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écapucrés par UltraDev au moment de la conception. Une base de données Oracle peut contoir des éléments que Dreamweaver ne peut pas traiter au moment de la conception. Vous pouvez creator un schéma dans Oracle, puis l'utiliser dans Dreamweaver pour filtrer les éléments indésirables au moment de la conception.
Remarque : vous ne pouvez pas creer de schéma ou de catalogue dans Microsoft Access.
D'autres utilisateurs peuvent avoir interet à limiter la quantité d'informations récapéées par Dreamweaver au moment de la conception. Certaines bases de données contiennent des douzaines, voire des centaines de tables. Vous ne souhaiterez pasforcément que Dreamweaver les enumère toutes au moment de la conception. Si, par exemple, vous cliquez sur le menu déroulant Tables de la boîte de dialogue Jeu d'enregistements de Dreamweaver, la liste de toutes les tables de la base de données spécifiée apparaitra. Si cette base de données contient des douzaines de tables, la liste sera longue et difficile à utiliser. Si la base de données contient des centaines de tables, Dreamweaver peut prendre plus de temps pour les récapérer sur certains systèmes. Un schéma ou catalogue peut limiter le nombre d'éléments de base de données récapérés par Dreamweaver 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. Reportez-vous à la documentation sur cette base de données ou consultez votre administrateur système.
Vou ne pouvez pas appliquer un schéma ou un catalogue dans Dreamweaver si vous développpez une application ColdFusion.
Pour appliquer un schéma ou un catalogue dans Dreamweaver si vous développpez une application différente de 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 à la base de données existe déjà, une liste de connexions apparait dans la fenêtre. Cliquez sur la connexion avec le bouton droit de la souris (Windows) ou en appuyant sur le bouton Contrôle (Macintosh) et désisissez Modifier la connexion dans le menu contextualuel. La boîte de dialogue appropriée pour la connexion apparait.
Si la connexion n'este pas, cliquez sur le bouton plus (+) et creez-la. Pour plus d'informations, voir « Connexion à une base de données », page 142.
2 Cliquez sur Avancé dans la boîte de dialogue de la connexion.
La boîte de dialogue Restreindre apparait.
3 Indiquez votre schéma ou catalogue et cliquez sur OK.
<h1 id="chapitre-30-2">CHAPITRE 30</h1>
<h1 id="conception-de-pages-dynamiques-dans-dreamweaver">Conception de pages dynamiques dans Dreamweaver</h1>
L'un des atouts majorés de Macromedia Dreamweaver MX est qu'il permet de créé des sites Web dynamiques sans requérir de connaissances en langage de programmation. Les outils visuels de Dreamweaver vous permettent de développer des sites Web dynamiques sans avoir à coder manuellement la logique applicative complexe inherente à tout site qui prend en charge l'affichage d'un contenu dynamique stocké dans une base de données. Dreamweaver vous permit de réaliser des sites Web dynamiques à l'aide de plusieurs langages de programmation et technologies de serveur courants, parmi lesquels Macromedia ColdFusion, ASP.NET, ASP (Active Server Pages) de Microsoft, JSP (JavaServer Pages) et PHP.
Ce chapitre présente les principales étapes à suivre pour connavoir un site Web dynamique. A la fin de chaque section, vous trouvrez des références spécifiques aux procédures àaccomplir pour créé une page dynamique. Les cinq étapes clés pour créé une page Web dynamique sont les suivantes :
- Conception de la page
- Création d'une source de contenu dynamique
- Ajout d'un contenu dynamique à une page Web
Amélioration des fonctionnalités d'une page dynamique
Test et débogage d'une page
<h1 id="conception-de-la-page">Conception de la page</h1>
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échisse 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éé un tableau pour partager le contenu puis à importer le contenu dynamique dans une ou plusieurs des cellules du tableau. Cette méthode vous permet de partager divers types d'informations dans un format structure.
Pour plus d'informations sur la conception de pages, voir les chapitres suivants :
- Chapitre 17, « Le mode de Mise en forme,», page 253
- Chapitre 16, « Présentation de contenu à l'aide de tableaux,», page 237
- Chapitre 19, « Insertion et mise en forme de texte,», page 283
- Chapitre 20, « Insertion d'images,», page 311
<h1 id="creation-dune-source-de-contenu-dynamique">Creation d'une source de contenu dynamique</h1>
Avant de pouvoir afficher des données dans une page, les sites Web dynamiques doivent être associés à une source de contenu d'ouls peuvent extraire les données. Dans Dreamweaver, les sources de données correspondant à des bases de données, des variables de demande, des variables de serveur, des variables de formulaire ou des procédures stockées.
Avant de pouvoir utiliser ces sources de contenu dans une page Web, vousdezvez :
- créé une connexion avec la source de contenu dynamique (telle qu'une base de données) et le serveur d'application charge du traitement de la page ;
- préciser les informations de la base de données devant être affichées ou les variables devant être incluses dans la page;
- utiliser l'interface pointer-cliqueur de Dreamweaver pour selectionner et insérer des éléments de contenu dynamique dans la page concernée.
Dreamweaver you permit aisément d'établit une connexion à une base de données et de créé un jeu d'enregistrents à partir duquel extraire le contenu dynamique. Un jeu d'enregistrents 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'enregistrents en fonction des informations générées 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'enregistements. Dans les technologies ASP et ColdFusion, un jeu d'enregistements est défini comme requête. Dans la technologie JSP, un jeu d'enregistements 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 utiliser 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.
Pour pouvoir utiliser une source de contenu dans Dreamweaver, vous doivent commencer par laisser dans le panneau Liaisons. Ce panneau, illustré ci-dessous, vous permet deisser des sources pour des bases de données et des types de variable différents. Lorsque vous creez une source de données, celle-ci est stockée dans le panneau Liaisons, d'ou elle peut être seLECTIONnée et insérée dans la page en cours.
La création d'un jeu d'enregistrements dans Dreamweaver s'effectue depuis la boîte de dialogue Jeu d'enregistrements. Vous pouvez ouvrir cette boîte de dialogue soit à partir du volet Serveur de la barre Insertion, soit à partir du panneau Liaisons. La boîte de dialogue simple Jeu d'enregistrements vous permet de sélectionner une connexion à une base de données existante et de créé une requête de base de données en sélectionnant les tables dont vous souhaitez inclure les données dans le jeu d'enregistrements. Vous pouvez même utiliser la partie Filtre de la boîte de dialogue afin de creator des critères de recherche et de renvoi simples pour la requête. Vous avez 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.
Une fois une connexion à une base de données établie et un jeu d'enregistements définit, ce dernier apparait dans le panneau Liaisons. Vous pouze l'importer à partir de ce panneau dans la page Web de votrechioix au sein du site défini. L'illustration ci-dessous affiche le panneau Liaisons contenant le jeu d'enregistements d'une base de données d'employés. Vous pouze désir des valeurs parmi celles repertoriées afin de les faire apparaitre dans une page Web, en sélectionnant un élément, puis enclistant sur le bouton Insérer situé dans la partie inférieure du panneau. L'élement sélectionné vient alors s'insérer dans l'espace réservé qui a été spécifique au sein de la page.
Pour plus d'informations sur les bases de données et les procédures à suivir afin de créé une connexion à une base de données, voir les chapitres suivants :
- Chapitre 32, « Définition de sources de contenu dynamique,», page 535
Annexe A, « Guide du débutant en base de données,», page 695
Annexe C, « Définition d'un DSN sous Windows,», page 717
<h1 id="ajout-dun-contenu-dynamique-à-une-page-web">Ajout d'un contenu dynamique à une page Web</h1>
Après avoir défini un jeu d'enregistements (ou toute autre source de données) et l'avoir ajouté au panneau Liaisons, vous pouvez insérer le contenu dynamique associé dans la page. Grâce à l'interface à base de menus de Dreamweaver, il suffit de selectionner 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 contentu 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écapé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, vous pouvez :
- placer ce contenu au niveau du point d'insertion indiqué par le curseur en mode Code ou Création ;
- replacer une chaîne de texte ou un autre espace réservé ;
- insérer le contenu dans un attribut HTML. Un contenu dynamique peut, par exemple, définir l'attribut src d'une image ou l'attribut value d'un champ de-formulaire.
Pour obtenir des instructions sur les procédures à suivre afin d'ajouter un contenu dynamique à une page, voir :
- Chapitre 33, « Ajout d'un contenu dynamique à une page Web,», page 553
- Chapitre 38, « Création de formulaires interactifs», page 613
<h1 id="amélioration-des-fonctionnalités-dune-page-dynamique">Amélioration des fonctionnalités d'une page dynamique</h1>
En dehors de l'ajout d'un contenu dynamique, Dreamweaver vous permet d'intégrer facilement une logique applicative complexe dans des pages Web. Pour ce faire, il vous suffit d'utiliser des comportements de serveur. Les comportements de serveur correspondent à des sections de code prédéfinies côte 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 à intervenir pour rédigier le code requis. Les comportements fournis avec Dreamweaver MX prenant 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 à Dreamweaver ont été conçus pour prendre en charge des pages adaptées à différents types de plates-formes et de navigateurs.
<h1 id="ajout-de-comportements-de-serveur-à-une-page">Ajout de comportements de serveur à une page</h1>
Pour ajouter des comportements de serveur à une page, Sélectionnez-les dans la barre Insertion ou le panneau Comportements de serveur. Pour utiliser la barre Insertion, cliquez sur l'onglet Application, puis sur le bouton d'un comportement de serveur. Pour utiliser le panneau Comportements de serveur,CHOISSEZ Fenetre > Comportements de serveur, cliquez sur le bouton plus (+) du panneau, puis choisissez un comportement de serveur dans le menu contextual. L'illustration ci-dessous répertorie les boutons de comportement de serveur disponibles dans la barre Insertion.
Gréace à 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 serveurs suivants sont disponibles :
- Définition d'un jeu d'enregistements à partir d'une base de données existante. Le jeu d'enregistements que vous définissez est ensuite stocké dans le panneau Liaisons.
- Affichage de plusieurs enregistrements dans une même page. Vous pouvez selectionner 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'apparace du tableau et de la région repétée à l'aide respectivement de l'inspecteur de propriétés et du comportement de serveur Région repé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'enregistements prédéfini auquel vous appliquez le format de données Dreamweaver MX de votre choix.
- Création de commandes de navigation entre enregistements et d'etat des enregistements, creation de pages Principale/Détails et de formulaires destinés àmettre à jour les informations d'une base de données.
- Affichage de plusieurs enregistements à 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édents ou suivants d'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.
Vou puevez également enrichir les comportements de serveur de Dreamweaver en rédigeant vos propres comportements ou en installerant ceux rédigés par des tiers.
Pour plus d'informations sur la façon d'améliorer les fonctionnalités des pages Web à l'aide des comportements de serveur, voir les chapitres suivants :
- Chapitre 34, « Affichage des enregistements de base de données», page 561
- Chapitre 40, « Création de pages pour l'exécution de recherches dans les bases de données,», page 647
- Chapitre 41, « Création de pages permettant de modifier des bases de données», page 661
- Chapitre 42, « Création de pages limitant l'accès à votre site», page 683
- Chapitre 37, « Ajout de comportements de serveur personalisés,», page 595
<h1 id="test-et-débogage-dune-page">Test et débogage d'une page</h1>
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. Chapitre 28, « Test d'un site,», page 493 contient des instructions générales pour vous aider à tester l'aspect fonctionnel et la compatibilité inter-plates-formes d'un site Web. Pour plus d'informations sur la conception de sites Web à l'intention de personnes souffrant de troubles auditifs, visuels ou autres, voir Chapitre 23, « Dreamweaver et accessibilité,», page 353. Il est fortement conseillé de se familiariser avec les questions décrites dans ce chapitre et d'examiner la façon dont les fonctionnalités de l'application peuvent être adaptations aux personnes handicapées.
<h1 id="test-dun-contenu-dynamique">Test d'un contenu dynamique</h1>
Dreamweaver you permit d'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 fenetre Live Data. Pour les tester, utilisez l'option Aperçu dans le navigateur de Dreamweaver (voir « Aperçu de page dans les navigateurs », page 496).
Pendant que le contenu dynamique est affiché, vous pouvez effectuer les opérations suivantes :
- améliorer la presentation de la page avec les outils de conception standard de Dreamweaver ;
- 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 basculesz 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.
Choisissez Affichage > Live Data pour basculer de la fenêtre du document à la fenêtre Live Data. Si une page requiert des données de l'utilateur (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.
<h1 id="pour-saisir-des-paramètres-de-données-dynamiques">Pour saisir des paramètres de données dynamiques :</h1>
1 Effectuez les modifications nécessaires dans la page.
2 Si la page doit receivevoir 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 texte de la barre d'outils, puis cliquez sur le bouton Actualiser (icone de flèches en forme de cercle).
Entrez les données de test dans le format suivant :
nom=valeur;
Dans ce format, name est le nom du paramètre d'URL attendu par la page et value la valeur du paramètre.
Voupeuz également definir le nom et la valeur des variables dans la boite de dialogue Paramétres Live Data (Affichage > Paramétres Live Data) et les enregistrer avec la page.
3 Cliques sur le bouton Actualiser pouractualiser votre page.
<h1 id="modification-du-contentu-dynamique-dune-page">Modification du contentu dynamique d'une page</h1>
Vous pouvez modifier ou supprimer le contenu dynamique d'une page en changeant le comportement du serveur qui fournit le contenu ou en supprimant entièrement le comportement. Vous pouvez, par exemple, modifier le comportement de serveur d'un jeu d'enregistements pour qu'un nombre plus important d'enregistements soit renvoyé dans la 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'enregistements à votre page, le panneau Comportements de serveur les affiche tous deux sous forme de liste, comme suit :
Recordset(mySecondRecordset) Jeud'enregistrement(Monjeud'enregistrement)
Pour modifier un comportement de serveur fournissant un 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 l'element de votrechioix dans le panneau Comportements de serveur.
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.
Voupez également utiliser l'inspecteur de propriétés pour modifier les yeuds'enregistrents de la page. Ouvrez l'inspecteur de propriétés (Fenêtre > Propriétés), puis seLECTIONnez le jeu d'enregistrents dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur). Voici comment se présente l'inspecteur de propriétés pour un jeu d'enregistrents :
<h1 id="suppression-dun-contenu-dynamique">Suppression d'un contenu dynamique</h1>
Vou puez supprimer du contenu dynamique que vous avez ajouté sur une page. Pour ce faire, selectionnez-le sur la page et appuyez sur la touche Suppr ou selectionnee 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écuppère le contenu dynamique de la base de données, mais ne supprime pas les données dans la base.
<h1 id="chapitre-31-2">CHAPITRE 31</h1>
<h1 id="stockage-et-récapération-des-données-spécifiques-à-une-page">Stockage et récapération des données spécifiques à une page</h1>
Les applications Web et les sites Web dynamiques requirement une source de contenu à partir de laquelle récapuérez des données. Les données et leurs sources peuvent se désenter sous une multitude de formes. D'une manière générale, les données correspondant à des informations textuelles ou numériques renvoyées dans une page Web et affichées à l'utilisateur sous une certaine forme.
Ce chapitre contient les sections suivantes :
- « Utilisation d'une base de données pour stocker un contenu», page 523
- « Collecte de données envoyées par les utilisateurs», page 524
- « Accès à des données stockées dans des variables de session», page 528
<h1 id="utilisation-dune-base-de-données-pour-stocker-un-contenu">Utilisation d'une base de données pour stocker un contenu</h1>
L'utilisation d'une base de données pour stocker un contenu vous permet de séparer l'aspect conceptual d'un site Web du contenu à afficher aux utilisateurs du site. Plutôt que de créé des fichiers HTML distics pour chacune des pages, il vous suffit de créé une page (ou un modele) pour les différents types d'informations que vous souhaitez représentier. Le recours à une base de données vous donne la possibilité d'actualiser le contenu d'un site Web par simples téléchargeement du contenu dans une base de données et récapération dynamiqueudit contenu en réponse à une demande de l'utilisateur. L'un des atouts majorés du stockage des informations de contenu dans une base de données est qu'il est ainsi possible demettre à jour les informations dans une source unique, puis de reporter ces modifications dans l'ensemble du site Web. Cela évite donc d'avoir à effectuer des recherches dans toutes les pages susceptibles deContaining les informations concernées et d'avoir à modifier manuellement chaque page.
Les bases de données sepré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 repandu. Si vous n'étés pas familiarisé avec les bases de données, sachez que Microsoft Access contient une interface facile d'utilisation pour travailler avec des tables de base de données. Bien que vous puissiez utiliser Microsoft Access comme source de données pour la plupart des applications de site Web, veuillez notesque la taille maximale des fichiers y est limite à 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'utiliseurs accederà à votre site Web, prévoyez d'utiliser une base de données conscience pour prendre en charge l'ensemble de vos utilisateurs.
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'utilateurs 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). MySQL, Microsoft SQL Server et Oracle sont des bases de données relationnelles couramment utilisées pour stocker le contenu d'applications Web et de sites dynamiques.
Quelle que soit la base de données selectionnée pour gérer votre site Web, vous pouvez concevoir des formulaires Web dans Dreamweaver pour insérer,mettre à jour ou supprimer des informations de la base de données.
Pour plus d'informations sur les bases de données, voir Annexe A, « Guide du début en base de données, », page 695.
<h1 id="accès-aux-données-stockées-dans-une-base-de-données">Accès aux données stockées dans une base de données</h1>
Les pages Web ne peuvent pas acceder directement aux données stockées dans une base de données. Au lieu de cela, elles interagissent avec un jeu d'enregistements. Un jeu d'enregistements correspond à un sous-ensemble d'informations (ou « enregistements ») extraits de la base de données. Ce sous-ensemble est extrait à 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. Macromedia Dreamweaver MX utilise le language SQL (Structured Query Language) pour générer des requêtes. Bien que vous n'ayez pas à apprendre le langage SQL pour pouvoir creator des requêtes simples à l'aide de Dreamweaver, il peut être utile d'avoir des connaissances de base dans ce langage accessible pour creator des requêtes plus élaborées et bénéficier ainsi d'une plus grande souplesse dans la conception de pages dynamiques. Pour une familiarisation avec les notions de base du langage SQL, voir Annexe B, « Initiation à SQL», page 709.
Une requête SQL peut générer un jeu d'enregistements n'incluant que certaines colonnes, certains enregistements ou encore une combinaison des deux. Un jeu d'enregistements peut également inclure tous les enregistements et colonnes d'une table de base de données. Toutefois, comme les applications n'ont généralement pas besoin de toutes les informations stockées dans une base de données, il est fortement conseillé d'essayer de limiter au maximum la taille des jours d'enregistements. De plus, comme le serveur Web stocke temporairement en mémoire le jeu d'enregistements, l'utilisation d'un jeu de taille limite economise de la mémoire et peut de ce fait améliorer les performances du serveur.
<h1 id="collecte-de-données-envoyées-par-les-utilisateurs">Collecte de données envoyées par les utilisateurs</h1>
VoussupportyouservirdespageWebpourtrecueilldesinformationsprovenantdesutiliseurs, lesstockerdansmémoire du serveur etlesutiliser pourgénéredesponsesdynamiquesbasées surlesdonnéesentreeparlesutilisateurs.LesoutilslesplusfréquementutiliséspourrecueilldesinformationsontesformulairexHTMLetlesélectionsdelienshypertexte.
Les formulaires HTML vous 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. Si vous définissez l'attribut de méthode du formulaire sur POST, le navigateur inclut les valeurs du formulaire dans le corps du message envoyé au serveur. Si vous définissez l'attribut de méthode du formulaire sur GET, le navigateur annexe les valeurs du formulaire à l'URL spécifique dans l'attribut d'action puis envoie les informations au serveur.
Les liens hypertexte vous permettent aussi de recueillir des informations provenant des utilisateurs et de les stocker dans la mémoire du serveur. Pour ce faire, vous doivent 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écifique dans la balise d'ancreage. Lorsqu'un utilisateur clique sur le lien concerné, le navigateur envoie alors l'URL et la valeur annexe au serveur.
Cette section déscrit comment creer des paramètres de-formulaire et d'URL pour les utiliser dans des applications Web. Elle aborde les rubriques suivantes :
- « Description des paramètres de formulaire», page 525
- « Description des paramètres d'URL», page 526
- « Création de paramètres d'URL à l'aide de liens HTML», page 528
- « Création de paramètres d'URL à l'aide de liens HTML», page 528
- « Récupération des paramètres de-formulaire et d'URL», page 528
<h1 id="description-des-paramètres-de-formulaire">Description des paramètres de formulaire</h1>
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. Pour obtenir des instructions, voir « Création de formulaires interactifs », page 613. Vous doivent connaître la méthode que vous désisissez pour transmettre les informations du navigateur au serveur. L'exemple suivant ilustré l'inspecteur de propriétés d'un formulaire associé à la méthode POST :
Les paramètres de formulaire prènnant 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 à receivevoir une valeur de paramètre précise (lorsqu'il 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ôle 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. L'exemple ci-dessous déscrit un formulaire contenant un menu déroulant à trois choix :
Chaquechioxdu menu correspondaunevaluefigeedanslecodequiestenvoyeeau serveurentant que parametre de formulaire.La boite de dialogue Valeurs de la liste affichee ci-dessousassociechaque elementde la listedaune valeur (Add,Update ouDelete)：
<h1 id="description-des-paramètres-durl">Description des paramètres d'URL</h1>
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 correspond à la paire name=value du formulaire. S'il existe plusieurs paramétres d'URL, ils sont séparés par une esperluette (&). L'exemple cissous décrit un paramètre d'URL doté de deux paires nom/ Valeur :
http://server/path/document?name1=value1&name2=value2
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.
Dans cet exemple, supposons que l'application soit une boutique en ligne. Comme ils souhaitent atteindre un public aussi large que possible, les développpeurs ont conscience le site afin qu'il prenne en charge plusieurs devises. Lorsque des utilisateurs se connectent au site, ils peuvent donc seLECTIONner la devise dans laquelle afficher les tarifs des articles disponibles.
1 Le navigateur demande la page report.cfm au serveur. Cette demande inclut le paramètre d'URL Currency="euro". La variable Currency="euro" indique que tous les montants récapucé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 récapure le paramètre et l'utilise pour Obtir 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 qu'elle devise prise en charge par l'application.
4 Le serveur renvoie la page report.cfm au navigateur en affichant le montant des articles dans la devise demandée. Lorsque l'utilisateur met fin à la session, le serveur détruit la valeur du paramètre d'URL, ce qui libère sa mémoire et lui permet de stocker les demandes des nouveaux utilisateurs se connectant au site.
La création des paramètres d'URL a lieu lorsque la méthode GET du protococle HTTP est utilisé en conjunction 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 se composent d'un nom d'utilisateur et d'un mot de passer, par exemple, peut être utilisé pour authenticate un utilisateur et n'afficher que les informations auxquelles il a souscrit. Les sites Web financiers affichtant le cours d'actions particulières en fonction des symboles boursiers scélectionnés précédemment par un utilisateur ont recours à ce type de paramètres, par exemple. Les développpeurs 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 variables SQL au sein d'une application Web afin de générer des résultats de recherche.
<h1 id="creation-de-paramètres-durl-à-laide-de-liens-html">Creation de paramètres d'URL à l'aide de liens HTML</h1>
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 saisir les paramètres d'URL directement dans cet attribut en passant au mode d'affichage Code (Affichage > Code). Dans l'exemple ci-dessous, trois liens créé un même paramètre d'URL (action) pouvant avoir trois valeurs (Add (ajouter), Update (mettre à jour) et Delete (supprimer)). Selon le lien sur lequel l'utilisateur clique, une valeur de paramètre différente est envoyée au serveur et l'action demandée est executée :
<pre><code class="language-txt"><a href="http://www.mysite.com/myfiles/index.asp?action=Add">Add a record</a>
<a href="http://www.mysite.com/myfiles/index.asp?action=Update">Update a record</a>
<a href="http://www.mysite.com/myfiles/index.asp?action=Delete">Delete a record</a>
</code></pre>
Voupeuizutilierl'inspecteurdeproprietésdeDreamweaver pourcrierlesmemesparametes d'URL, enselectionnantle lienpuisenchoisissantFenetre Proprietés.Dansl'exemple suivant, la saisiducametre d'URLaeu lieu depuis linspecteurdeproprietés:
<h1 id="récupération-des-paramètres-de-formulaire-et-durl">Récupération des paramètres de-formulaire et d'URL</h1>
Une fois un paramètre de formulaire ou d'URL créé, Dreamweaver peut en recuperer la valeur et l'utiliser dans une application Web. Pour plus d'informations, voir « Définition de paramètres d'URL», page 541.
Après avoir défini un paramètre de formulaire ou d'URL dans Dreamweaver, vous pouvez en insérer la valeur dans une page. Pour plus d'informations, voir « Ajout d'un contenu dynamique à une page Web», page 553.
<h1 id="accès-à-des-données-stockées-dans-des-variables-de-session">Accès à des données stockées dans des variables de session</h1>
Les variables de session fournissent un moyen pour stocker les informations utilisateur et permettre aux applications Web d'acceder à ces informations. D'une manière générale, 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 boîte de courrier électronique, 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'utilateur dans toutes les pages du site. Cela permet à l'utilateur 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 replir une fonction de sécurité en imposing un délai d'attente maximum au terme duquel la session de l'utilateur est arrêtée lorsque le compte est resté inactif pendant trop longtemps. Cela 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 sont frequentlyment utilisées pour stocker les préférences d'affichage des utilisateurs, leurs réponses à des questionnaires en plusieurs parties, les articles qu'ils ont sclectionnés pour un achat en ligne dans des applications dites de « chariot électronique » ainsi que le comptage des points qu'ils ont accumulés dans des yeux en ligne.
Cette section déscrit les rubriques de variable de session suivantes :
- « Description des variables de session», page 529
- « Collecte d'informations à stocker dans des variables de session», page 530
- « Stockage d'informations dans des variables de session », page 531
- « Exemple d'informations stockées dans des variables de session», page 532
- « Récupération de données dans des variables de session», page 533
<h1 id="description-des-variables-de-session">Description des variables de session</h1>
Les serveurs Web (ou, pour être plus précis, le protocole HTTP) sont sans état, ce qui signifie qu'ils ne gardent aucune trace des navigateurs qui s'y sont connectés ou des pages particulières demandées par les utilisateurs. Chaque fois qu'il recoit une demande de page Web et y répond en envoyant la page requise au navigateur de l'utilateur, le serveur Web « oublie » tant le navigateur à l'origine de la demande que la page Web envoyée en réponse. Si le même utiliser demande une page apparentée ultérieurement, le serveur l'envoie sans connaître la première page qu'il a envoyée à cet utiliser.
S'il est vraie que la nature « sans état » d'HTTP permet d'obtenir un protocole simple et facile àmettre en œuvre, cette même nature rend la vie des applications Web plus élaborées, qui prennten en charge la génération d'un contenu personnalisé par exemple, plus difficile. Afin depersonnaliser le contenu d'un site pour un utiliser donne, par exemple, il est nécessaire decommencer par identifier cet utiliser. La plupart des sites Web y parviennent en utilisant desinformations de connexion de type nom d'utilateur et mot de passer. Si plusieurs pagespersonnalises doivent etre affichees, il est nécessaire que le site Web puisse suivre les utiliserdsèja connectés, car la plupart d'entre eux trouveraient inacceptable d'avoir a saisir leur nomd'utilateur et leur mot de passer dans chaque nouvelle page du site.
Pour permettre la creation d'applications Web complexes ainsi que le stockage des données fournies par les utilisateurs dans toutes les pages d'un site, la majorité des technologies de serveur d'application prennet en charge la gestion des sessions. La gestion des sessions permet aux applications Web de maintainir un état au cours de plusieurs demandes HTTP. Les demandes de pages Web provenant d'un même utiliser pendant une période donnée peuvent également être considérées comme faisant partie de la même session interactive.
Les variables de session stockent les informations pendant toute la durée de la session d'un utilisateur. Cette session commence lorsque l'utilisateur ouvre une page au sein de l'application. Elle se finit lorsque l'utilisateur n'ouvre plus de page dans l'application après un laps de temps donné ou lorsqu'il met explicitement fin à la session (en général, enclinquant sur un lien de déconnexion). Tant qu'elle existe, la session est spécifique à un utiliser donné ; chaque utiliser 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 acceder. Ces informations peuvent aller du nom de l'utiliser jusqu'à ses préférences pour la taille des polices à l'écran, en passant par un indicateur signalant la réussite ou l'éché 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 utiliser a répondu correctement jusqu'à présent dans unquiz en ligne ou les produits qu'il a sélectionnés dans un catalogue en ligne.
Notez que les variables de session ne peuvent fonctionner que si le navigateur de l'utilisateur est configuré pour accepter les cookies. Le serveur create 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écapérer ses variables de session personnelles, stockées en mémoire.
<h1 id="collecte-dinformations-à-stocker-dans-des-variables-de-session">Collecte d'informations à stocker dans des variables de session</h1>
Avant de creator une variable de session, vous doivent acceder par obtenir les informations à stocker, puis les envoyer au serveur pour stockage. Cette section décrit comment 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 obtir des informations à partir d'une base de données, des cookies stockés dans l'ordinateur d'un utiliser ou des en-têtes HTTP envoyés par son navigateur avec une demande de page.
<h1 id="stockage-de-paramètres-durl-dans-des-variables-de-session">Stockage de paramètres d'URL dans des variables de session</h1>
Dans l'exemple suivant, un catalogue de produits utilise des paramètres d'URL figés dans le code et créés à l'aide d'un lien hypertexte pour renvoyer au serveur des informations de produit à stocker dans une variable de session. Lorsqu'un utilisateur clique sur le lien « Add to shopping cart » (Ajouter au panier), l'ID du produit (3202 dans l'exemple) est stocké dans une variable de session pendant que l'utilisateur continue ses achats. Lorsqu'il passse à la page de paiement, le numéro du produit stocké dans la variable de session est récapuéré.
<h1 id="stockage-de-paramètres-de-formulaire-dans-des-variables-de-session">Stockage de paramètres de-formulaire dans des variables de session</h1>
Dans cet exemple, une page de quiz basée sur un-formulaire renvoie les informations selectionnées au serveur, où la page marks.cfm enregistr cre les points marqués et stocke le nombre de réponses correctes dans une variable de session.
<h1 id="stockage-dinformations-dans-des-variables-de-session">Stockage d'informations dans des variables de session</h1>
Une fois que vous avez envoyé les informations au serveur, vous pouze 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.
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 besoin de la technologie serveur et de la méthode d'obtention des informations déterminée 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 :
<h1 id="coldfusion">ColdFusion</h1>
<CFSETsession variable_name = value>
<h1 id="asp-et-aspnet">ASP et ASP.NET</h1>
<% 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 parametre d'URL appelé product (ou un formulaire HTML avec la méthode Get et un champ de texte appelé product) pour recueiller des informations, les instructions suivantes stockent les informations dans une variable de session appelée prodID:
<h1 id="coldfusion-2">ColdFusion</h1>
<CFSET session.prodID = url.product>
<h1 id="asp-et-aspnet-2">ASP et ASP.NET</h1>
<% Session("prodID") = Request.QueryString("product") %>
Si vous utilisez un formualeire HTML avec la methode Post et un champ de texte appelé txtProduct pour recueiller les informations, les instructions suivantes stockent alors ces informations dans la variable de session :
<h1 id="coldfusion-3">ColdFusion</h1>
<CFSET session.prodID = form.txtProduct>
<h1 id="asp-et-aspnet-3">ASP et ASP.NET</h1>
<% Session("prodID") = Request.Form("txtProduct") %>
<h1 id="exemple-dinformations-stockées-dans-des-variables-de-session">Exemple d'informations stockées dans des variables de session</h1>
Vous travailliez sur un site s'adressant à un large public de retraités. Dans Dreamweaver, vous ajoutez deux liens à la première page du site pour que les utilisateurs puissant personnelier laaille du texte affiché. Si l'utilateur souhaite un affichage en caractères plus gros pour un texte plus facile à dire, il lui suffit de cliquer sur un lien ; s'il souhaite un texte de taille standard, il clique sur l'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 :
<pre><code class="language-html"><a href="resort.cfm?fontsize=large">Larger Text</a><br>
<a href="resort.cfm?fontsize=small">Normal Text</a>
</code></pre>
Vous decidez de stocker 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.
Près de la page de destination, vous saississez le code suivant pour creer une session appelée font(pref qui stocke la préférence de l'utilisateur pour la taille de police.
<h1 id="coldfusion-4">ColdFusion</h1>
<CFSET session.Font_prefix = url.Fontsize>
<h1 id="asp-et-aspnet-4">ASP et ASP.NET</h1>
<pre><code class="language-asp"><% Session("font_prefix") = Request.QueryString("fontsize") %>
</code></pre>
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 fontpref. Pendant la durée de la session de l'utilisateur, toutes les pages de l'application recupèrent cette valeur et affichent la taille de police sélectionnée.
<h1 id="récupération-de-données-dans-des-variables-de-session">Récupération de données dans des variables de session</h1>
Après avoir stocké une valeur dans une variable de session, vous pouvez utiliser Dreamweaver pour la récapuérez et l'utiliser dans une application Web. Pour plus d'informations, voir « Définition de variables de session», page 543.
Après avoir défini la variable de session dans Dreamweaver, vous pouvez en insérer la valeur dans une page. Pour plus d'informations, voir Chapitre 33, « Ajout d'un contenu dynamique à une page Web,», page 553.
<h1 id="chapitre-32-2">CHAPITRE 32</h1>
<h1 id="définition-de-sources-de-contenu-dynamique">Définition de sources de contenu dynamique</h1>
Les sites Web dynamiques requisent une source de données à partir de laquelle le contenu dynamique peut être recupéré et affché. Macromedia Dreamweaver MX permet d'utiliser différentes sources de contenu dynamique, telles que des bases de données, des procédures stockées et des variables de demande, d'URL, de serveur et de formulaire. Suivant la source de données, il est possible soit de recupérer un nouveau contenu pour répondre à une demande, soit de modifier la page pour satisfaire aux besoin des utilisateurs.
Ce chapitre déscrit les procédures permettant de définir des bases de données et des variables comme sources de contenu dynamique. Pour en savoir plus sur les technologies décrites dans ce chapitre, voir « Ressources sur le langage HTML et les technologies Web», page 29.
Ce chapitre contient les sections suivantes :
- « Description des sources de contenu dynamique», page 535
- « Définition d'un jeu d'enregistements », page 536
- « Définition de paramètres d'URL», page 541
- « Définition de variables de session», page 543
- « Définition de variables d'application», page 544
- « Définition de variables de serveur», page 545
- « Mise en mémoire cache de sources de contenu», page 550
- « Modification ou suppression de sources de contenu», page 550
- « Copie d'un jeu d'enregistrements d'une page à une autre», page 551
<h1 id="description-des-sources-de-contenu-dynamique">Description des sources de contenu dynamique</h1>
Une source de contenu dynamique est un stock d'informations à partir duquel il est possible de récapérer du contenu dynamique en vue de l'afficher dans une page Web. Differentes 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 containues dans un object de serveur, des valeurs de propriétés JavaBeans, etc.
Toute source de contenu définie dans Dreamweaver est ajoutée à la liste des sources de contenu du panneau Liaisons. Une fois la source de contenu créé et ajoutée au panneau Liaisons, il est possible de l'insérer dans la page selectionnée.
<h1 id="définition-dun-jeu-denregistrements">Définition d'un jeu d'enregistrements</h1>
Si vous utilisez une base de données comme source de contenu d'une page Web dynamique, vous nevez tout d'abord creer un jeu d'enregistrements dans lequel seront stockées les données récuperées. Les produits enregistrations servent d'intémédiaire entre la base de données dans laquelle le contenu est enregistré et le serveur d'application qui généra la page. Ils se compose 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écuperées plus rapidement. Le serveur supprime un jeu d'enregistrements lorsqu'il n'est plus nécessaire.
Le jeu d'enregistrements propresment dit est un ensemble de données extrait d'une base de données spécifiée. Il peut se composer de l'intégrality 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écapé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écapé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éé des requêtes simples sans maitriser le language SQL. Toutefois, si vous souhaitez créé 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 boites 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 reférence aux deux types de produits 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é.
Pour plus d'informations sur l'utilisation des bases de données et de SQL, voir les chapitres Annexe A, « Guide du début en base de données», page 695 et Annexe B, « Initiation à SQL», page 709.
Avant de définir un jeu d'enregistrements pour l'utiliser dans Dreamweaver, vous devze creator 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 defini de connexion à une base de données pour votre site, reportez-vous au chapitre consacre spécifquement à 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.
Les chapitres suivants décrivent la mise en place d'une connexion à une base de données dans le contexte des différentes technologies de serveur prises en charge par Dreamweaver :
- Chapitre 7, « Connexions à des bases de données pour les développpeurs ColdFusion», page 145
- Chapitre 9, « Connexions à des bases de données pour les développpeurs ASP», page 157
- Chapitre 8, « Connexions à des bases de données pour les développpeurs ASP.NET», page 151
- Chapitre 10, « Connexions à des bases de données pour les développpeurs JSP», page 169
- Chapitre 11, « Connexions à des bases de données pour les développpeurs PHP», page 177
Cette section contient les rubriques suivantes :
- « Création d'un jeu d'enregistrements sans rédigier d'instructions SQL», page 537
- «Réduction d'instructions SQL en vue de la création d'un jeu d'enregistements avancé», page 538
- « Création de requêtes SQL à l'aide de l'arborescence Éléments de base de données », page 540
<h1 id="creation-dun-jeu-denregistrements-sans-rédiger-dinstructions-sql">Creation d'un jeu d'enregistrements sans rédiger d'instructions SQL</h1>
Cette section décrit la procédure de définition d'un jeu d'enregistrements à l'aide de la boîte de dialogue Jeu d'enregistrements de Dreamweaver qui permet de créé des jours d'enregistrements sans saisir manuellement d'instructions SQL. La définition d'un jeu d'enregistrements par le bias de cette méthode consiste simplement à selectionner une connexion à une base de données et une table dans les menus contextuels de la boîte de dialogue Jeu d'enregistrements.
Si vous souhaitez rédiger vos propres instructions SQL, utilisez la boîte de dialogue Jeu d'enregistements avancée (voir «Réduction d'instructions SQL en vue de la création d'un jeu d'enregistements avancé », page 538).
<h1 id="pour-définit-un-jeu-denregistrements-sans-rédigier-de-sql">Pour définit un jeu d'enregistrements sans rédigier de SQL :</h1>
1 Dans la fenêtre de document, ouvre la page devant utiliser le jeu d'enregistrements.
2 Choisissez Fenetre > Liaisons pour afficher le panneau Liaisons.
3 Dans le panneau Liaisons, cliquez sur le bouton plus (+) et choisissez Jeu d'enregistrements dans le menu contextual.
La boîte de dialogue Jeu d'enregistements simplifiée s'affiche. Si vous développpez un site Macromedia ColdFusion MX ou ASP.NET, la boîte de dialogue Jeu d'enregistements qui s'affiche est légèrement différente de cette représentée dans l'exemple ci-dessous. Si c'est la boîte de dialogue avancée qui s'affiche à la place, cliquez sur le bouton Simple pour ouvrir la boîte de dialogue simple Jeu d'enregistements.
4 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue Jeu d'enregistrements.
5 Cliquez sur le bouton Tester pour executer la requête et vérifier qu'elle recupère les informations attendues.
Si vous avez defini 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 de texte 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.
<h1 id="réduction-dinstructions-sql-en-vue-de-la-création-dun-jeu-denregistrements-avancé">Réduction d'instructions SQL en vue de la création d'un jeu d'enregistrements avancé</h1>
La boîte de dialogue Jeu d'enregistements avancée vous permet d'écrite vos propres instructions SQL ou bien d'utiliser l'arborescence graphique Éléments de base de données pour créé une instruction SQL.
Remarque: si vous rédigez des instructions SQL pour des types de document ASP.NET, reportez-vous à la section «Réduction d'instructions SQL pour ASP.NET», page 539 pour connaître les règles spécifique à ASP.NET.
Pour définiir un jeu d'enregistrements au moyen de SQL :
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 contextuel.
La boîte de dialogue Jeu d'enregistements avancée s'affiche. Si vous développpez un site ColdFusion MX ou ASP.NET, la boîte de dialogue Jeu d'enregistements qui s'affiche est légèrement différente de cette représentée dans l'exemple ci-dessous. Si la boîte de dialogue simple Jeu d'enregistements s'affiche à la place, cliquez sur le bouton Avancé pour ouvrir sa version avancée.
4 Complétez les options de la boîte de dialogue.
Pour obtenir des instructions sur la définition des options de la boîte de dialogue Jeu d'enregistements, cliquez sur le bouton Aide de la boîte de dialogue Jeu d'enregistements.
5 Cliquez sur le bouton Tester pour executer la requête et vérifier qu'elle recupère les informations attendues.
Si vous avez defini 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 le champ Valeur test et cliquez sur OK. Si la création d'une instance du jeu d'enregistements aboutit, une table contenant les données du jeu d'enregistements s'affiche.
6 Cliquez sur OK pour ajouter le jeu d'enregistrements à la liste des sources de contenu disponibles du panneau Liaisons.
<h1 id="réduction-dinstructions-sql-pour-aspnet">Réduction d'instructions SQL pour ASP.NET</h1>
Lorsque vous rédigez des instructions SQL dans la boîte de dialogue Jeu d'enregistements avancée, vous doivent regardier à l'esprit certaines conditions spécifiques à ASP.NET :
<h1 id="paramètres">Paramètres</h1>
La syntaxe utilisé pour réféencer des paramètres varie suivant la connexion à une base de données utilisée. Les types de connexion sont les suivants :
<h1 id="bd-ole">BD OLE</h1>
Si vous établissez une connexion à une base de données au moyen de la BD OLE, les paramètres doivent être référencés à l'aide d'un point d'interrogation (?). Exemple :
SELECT * FROM Employees WHERE HireDate > ?
<h1 id="microsoft-sql-server">Microsoft SQL Server</h1>
Si vous établissez une connexion à Microsoft SQL Server au moyen du fournisseur de données générées pour SQL Server fourni avec la plate-forme .NET, tous les paramètres doivent être nommés. Exemple :
SELECT * FROM Employees WHERE HireDate > @hireDate
<h1 id="insertion-de-code-dans-une-instruction-sql">Insertion de code dans une instruction SQL</h1>
Lorsque vous insérez du code dans une instruction SQL rédigée pour ASP.NET, vous devez délimiter toutes les chaînes par des guillemets (“”) et le code par des parentheses ( ) :
SELECT FROM Employees WHERE HireDate > "+" (Request(queryString("hireDate"))
<h1 id="connexions-à-des-bases-de-données-dans-aspnet">Connexions à des bases de données dans ASP.NET</h1>
Pour en savoir plus sur les connexions à des bases de données dans ASP.NET, voir Chapitre 8, « Connexions à des bases de données pour les développpeurs ASP.NET», page 151.
<h1 id="création-de-requêtes-sql-à-laide-de-larborescence-éléments-de-base-de-données">Création de requêtes SQL à l'aide de l'arborescence Éléments de base de données</h1>
Au lieu de saisir manuellement des instructions SQL dans la zone de texte SQL, vous pouvez utiliser l'interface pointer-cliquer de l'arborescence Éléments de base de données pour créé des requêtes complexes SQL. L'arborescence Élé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. Àpès avoir créé une requête SQL, vous pouvez définir des variables dans la section Variables de la boîte de dialogue.
Les exemples suivants doivent deux instructions SQL et décrivent les étapes de création de ces instructions à l'aide de l'arborescence Éléments de base de données de la boîte de dialogue Jeu d'enregistements avancée.
<h1 id="selection-dune-table">Selection d'une table</h1>
Dans cet exemple, la requête selectionne l'intégralité de la table Employees. L'instruction SQL définittant la requête se présente de la façon suivante :
SELECT FROM Employees
<h1 id="pour-creer-cette-requete">Pour creer cette requete :</h1>
1 Développèz la branche Tables pour afficher toutes les tables de la base de données scé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.
<h1 id="sélection-de-lignes-spécifiques-dune-table-et-classement-des-résultats">Sélection de lignes spécifiques d'une table et classement des résultats</h1>
Dans l'exemple suivant, la requête seLECTIONne deux lignes de la table Employees, puis seLECTIONne le type de tâche (job) à l'aide d'une variable que vous doivent définir. Les résultats sont ensuite classés par nom d'employé.
<pre><code class="language-sql">SELECT emplNo, emplName
FROM Employees
WHERE emplJob = 'varJob'
ORDER BY emplName
</code></pre>
<h1 id="pour-creer-cette-requête">Pour creer cette requête :</h1>
1 Développèz la branche Tables pour afficher toutes les tables de la base de données séLECTIONnée, puis développèz 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 emp1No et cliquez sur le bouton Select.
- Sélectionnez emp1Name et cliquez sur bouton Select.
- Sélectionnez emp1Job et cliquez sur le bouton Where.
- Sélectionnez emp1Name 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 saississant les valeurs suivantes dans les colonnes Nom, Valeur par défaut et Valeur d'exécution : varJob, CLERK, Request("job").
5 Cliques sur OK pour ajouter le jeu d'enregistements au panneau Liaisons.
<h1 id="définition-de-paramètres-durl">Définition de paramètres d'URL</h1>
Les paramètres d'URL permettent de stocker les informations saisies par les utilisateurs. Pour définitir un paramètre d'URL, vous doivent créé 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 nom/valeur sont annexées à l'URL.
Avant de commencer, vérifie que vous avez transmis un paramètre de formulaire ou d'URL au serveur. Pour obtenir des instructions, voir « Description des paramètres de formulaire», page 525.
<h1 id="pour-définit-un-paramètre-durl">Pour définit un paramètre d'URL :</h1>
1 Dans la fenêtre de document, ouvre la page devant utiliser la variable.
2 Choisissez Fenêtre > Liaisons pour afficher le panneau Liaisons.
3 Dans le panneau Liaisons, cliquez sur le bouton plus (+) etCHOISEZ l'une des options suivantes dans le menu contextual:
<table><tr><td>Types de document</td><td>Élement du menu du panneau Liaisons permettant de définir une variable d'URL</td></tr><tr><td>ASP</td><td>Variable de demande > Request.QueryString</td></tr><tr><td>ColdFusion</td><td>Variable d'URL</td></tr><tr><td>JSP</td><td>Variable de demande</td></tr><tr><td>PHP</td><td>Variable d'URL</td></tr></table>
La boîte de dialogue Variable d'URL s'affiche.
4 Saisissez le nom de la variable d'URL dans le champ et 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.
Après avoir défini la variable d'URL, vous pouvez utiliser sa valeur dans la page sélectionnée. Pour plus d'informations, voir Chapitre 33, « Ajout d'un contenu dynamique à une page Web », page 553.
<h1 id="définition-de-paramètres-de-formulaire">Définition de paramètres de-formulaire</h1>
Les paramètres de formulaire permettent de stocker les informations récapucérées dans la requête HTTP d'une page Web. Si vous creez un formulaire utilisant la méthode POST, les données envoyées par le formulaire sont transmises au serveur. Avant de commencer, vérifie que vous avez transmis un paramètre de formulaire au serveur. Pour obtenir des instructions, voir Chapitre 31, « Stockage et récapération des données spécifiques à une page», page 523.
Pour définit un paramètre de formulaire :
1 Dans la fenêtre de document, ouvre la page devant utiliser la variable.
2 Choisissez Fenêtre > Liaisons pour afficher le panneau Liaisons.
3 Dans le panneau Liaisons, cliquez sur le bouton plus (+) et choisissez l'une des options suivantes dans le menu contextuel :
<table><tr><td>Types de document</td><td>Élement du menu du panneau Liaisons permettant de définir une variable de formulaire</td></tr><tr><td>ASP</td><td>Variable de demande > Request.Form</td></tr><tr><td>ColdFusion</td><td>Variable de formulaire</td></tr><tr><td>JSP</td><td>Variable de demande</td></tr><tr><td>PHP</td><td>Variable de formulaire</td></tr></table>
La boîte de dialogue Variable de-formulaire s'affiche :
4 Tapez le nom de la variable de-formulaire dans la boite de dialogue 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.
5 Le paramètre de formulaire s'affiche dans le panneau Liaisons.
Après avoir défini le paramètre de formulaire comme source de contenu, vous pouvez l'utiliser dans une page. Pour plus d'informations, voir Chapitre 31, « Stockage et récapération des données spécifique à une page», page 523.
<h1 id="définition-de-variables-de-session">Définition de variables de session</h1>
Les variables de session permettent deémoriser et d'afficher des informations conservées pendant toute la durée de la visite de l'utilisateur (ou session). Le serveur create un objet de session différent pour chaque utiliser et le conserve pendant une période définie ou jusqu'à ce qu'il soit explicitement clos. Pour plus d'informations, voir « Accès à des données stockées dans des variables de session», page 528.
Comme les variables de session sont conservées pendant toute la session de l'utilisateur, même lorsquels ci passé 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 doivent les créé dans le code source.
Pour obtenir des instructions, voir les sections suivantes :
- « Collecte de données envoyées par les utilisateurs», page 524
- « Accès à des données stockées dans des variables de session», page 528
Après avoir créé une variable de session dans le code source de l'application Web, vous pouvez utiliser Dreamweaver pour recuperer sa valeur et l'utiliser dans une page Web.
<h1 id="pour-définit-une-variable-de-session-prédéfinie">Pour définit une variable de session prédéfinie :</h1>
1 Creezunevariablede sessiondanslecode sourceetattribuez-luiunevalueur.
Dans l'exemple ASP suivant, une instance de session appelée username est créé, à laquelle est attribuée la valeur Cornelius :
<pre><code class="language-asp"><% Session username) = "Cornelius" %>
</code></pre>
2 Choisissez Fenetre > Liaisons pour afficher le panneau Liaisons.
3 Cliquez sur le bouton plus (+) etCHOisissez Variable de session dans le menu contextual.
4 Tapez le nom de la variable que vous avez définie dans le code source.
Dans cet exemple, il s'agit de username.
5 Cliquez sur OK.
La variable de session s'affiche dans le panneau Liaisons.
Après avoir défini une variable de session, vous pouvez utiliser sa valeur dans une page. Pour plus d'informations, voir Chapitre 33, « Ajout d'un contenu dynamique à une page Web », page 553.
<h1 id="définition-de-variables-dapplication">Définition de variables d'application</h1>
Dans ASP et ColdFusion, les variables d'application permettent deé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 utiliser 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éseau 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.
Remarque : il n'existe pas d'objet d'application dans JSP ou PHP.
<h1 id="pour-définit-une-variable-dapplication-pour-une-page">Pour définit une variable d'application pour une page :</h1>
1 Ouvrez un type de document dynamique dans la fenêtre de document.
2 Choisissez Fenetre > Liaisons pour afficher le panneau Liaisons.
3 Cliques sur le bouton plus (+) etCHOisissez Variable d'application dans le menu contextual.
4 Tapez le nom de la variable définie dans le code source de l'application.
5 Cliquez sur OK.
La variable d'application s'affiche dans le panneau Liaisons.
Après avoir défini une variable d'application, vous pouvez utiliser sa valeur dans une page. Pour plus d'informations, voir Chapitre 33, « Ajout d'un contenu dynamique à une page Web », page 553.
<h1 id="définition-de-variables-de-serveur">Définition de variables de serveur</h1>
Vou puez définir 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 comprendnent notamment les variables de formulaire, les variables d'URL, les variables de session et les variables d'application. Pour plus d'informations sur ces types de variables, voir les sections suivantes :
- « Définition de paramètres d'URL», page 541
- « Définition de paramètres de formulaire», page 542
- « Définition de variables de session», page 543
- « Définition de variables d'application», page 544
Cette section déscrit les variables de serveur qu'il est possible de définir comme sources de contenu pour différents types de document. Les types de document et les sections correspondantes sont les suivants :
- « Définition de variables de serveur ASP», page 545
- « Définition de variables de serveur ColdFusion», page 546
- « Définition de variables de serveur JSP», page 547
- « Définition de JavaBeans (JSP uniquement)», page 548
<h1 id="définition-de-variables-de-serveur-asp">Définition de variables de serveur ASP</h1>
Vou puez définir les variables de serveur ASP suivantes comme sources de contenu dynamique: Request.Cookie, Request.QueryString, Request.Form, Request.ServerVariables et Request)%ClientCertificates.
Pour définit une variable de serveur pour une page ASP :
1 Ouvrez le panneau Liaisons (Fenêtre > Liaisons).
2 Cliquez sur le bouton plus (+) etCHOisissez Variable de demande dans le menu contextual.
La boîte de dialogue Variable de besoin s'affiche.
3 Choisissez l'un des ensembles de demande dans le menu contextual Type.
Si, par exemple, vous souhaitez acceder aux informations de l'ensemble Request. Server Variables,CHOISSEZ REQUEST. Server Variables. Si vous souhaitez acceder aux informations de l'ensemble Request.Form,choisissez Request.Form.
Pour plus d'informations sur les variables de serveur ASP, cliquez sur le bouton Aide.
4 Indiquez a quelle variable de l'ensemble vous souhaitez acceder.
Si, par exemple, vous souhaitez acceder aux informations de la variable Request.ServerVariables("HTTP_USER_AGENT"), tapez l'argument HTTP_USER_agent. Si vous souhaitez acceder aux informations de la variable Request.Form("nom"), tapez l'argument lastname.
5 Cliquez sur OK.
La variable de serveur s'affiche dans le panneau Liaisons.
<h1 id="définition-de-variables-de-serveur-coldfusion">Définition de variables de serveur ColdFusion</h1>
Vou puez définir les variables de serveur ColdFusion suivantes comme sources de contenu dynamique :variables client,variables cookie,variables CGI,variables de serveur etvariables locales.
Les variables client associant des données à un client spécifique. Elles conservent l'etat de l'applicationpendant que l'utilisateur passede'une page a l'autre et d'une sessiona I'autre dans l'application. « Conserver I'etat » signifie conserver les informations d'une page (ou session) sur la suivante, de façon a ce que I'application « se souvienne » de I'utilisateur et de ses precedents choix et prevalences.
Les variables cookie accedent aux cookies transmis au serveur par le navigateur.
Les variables CGI fournissant 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.
Les variables de serveur sont accessibles à tous les clients et à toutes les applications du serveur. Elles sont conservées jusqu'à l'arrêt du serveur.
Les variables locales sont créées au moyen de la balise CFSET ou CFPARAM dans une page ColdFusion.
<h1 id="pour-définit-une-variable-de-serveur-pour-une-page-coldfusion">Pour définit une variable de serveur pour une page ColdFusion :</h1>
1 Ouvrez le panneau Liaisons (Fenetre > Liaisons).
2 Cliquez sur le bouton plus (+) et choisissez la variable de serveur dans le menu contextual.
3 Tapez le nom de la variable.
Pour plus d'informations sur les noms qu'il est possible de saisir, cliquez sur le bouton Aide.
4 Cliquez sur OK.
La variable de serveur ColdFusion s'affiche dans le panneau Liaisons.
Pour plus d'informations, voir :
- « Définition de paramètres d'URL», page 541
- « Définition de variables de session», page 543
- « Définition de variables d'application», page 544
- Chapitre 33, « Ajout d'un contenu dynamique à une page Web», page 553
<h1 id="définition-de-variables-de-serveur-php">Définition de variables de serveur PHP</h1>
Pour définit une variable de serveur pour une page PHP :
1 Ouvrez le panneau Liaisons (Fenêtre > Liaisons).
2 Cliquez sur le bouton plus (+) et choisissez la variable dans le menu contextual.
3 Tapez le nom de la variable.
4 Cliquez sur OK.
La variable de serveur PHP s'affiche dans le panneau Liaisons.
Pour plus d'informations, voir Chapitre 32, « Définition de paramètres d'URL », page 541, Chapitre 33, « Ajout d'un contenu dynamique à une page Web », page 553.
<h1 id="définition-de-variables-de-serveur-jsp">Définition de variables de serveur JSP</h1>
Vou puez définir une variable de demande comme source de contenu dynamique pour des pages JSP.
Pour définit une variable de besoin pour une page JSP :
1 Ouvrez le panneau Liaisons (Fenetre > Liaisons).
2 Cliquez sur le bouton plus (+) etCHOisissez Variable de demande dans le menu contextual.
3 Tapez le nom de la variable.
<h1 id="4-cliquez-sur-ok-4">4 Cliquez sur OK.</h1>
La variable de serveur JSP s'affiche dans le panneau Liaisons.
Pour plus d'informations, voir « Définition de paramètres d'URL », page 541 et Chapitre 33, « Ajout d'un contenu dynamique à une page Web », page 553.
<h1 id="définition-de-javabeans-jsp-uniquement">Définition de JavaBeans (JSP uniquement)</h1>
Les JavaBeans sont des éléments architecturaux que l'on retrouve dans les applications JSP hierces. Ils sont généralement utilisés dans une bibliothèque de composants métier, qui permet de séparer la logique de presentation de la logique d'accès aux données. Dans ces applications, ce sont les JavaBeans (également appelés beans), et non les pages JSP, qui contiennent la logique permettant d'acceder directement à la base de données.
Dans Dreamweaver, les 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éé des références à des données dynamiques.
Vou puevez également définir une collecte JavaBeans (groupe de JavaBeans) comme source de contenu dynamique. Toutefois, dans le cas de collectes JavaBeans, Dreamweaver ne prend en charge que les régions repétées et les liaisons dynamiques.
Des copies de la classe de bean (ou du fichier .zip ou .jar contenant la catégorie de bean) doivent résider dans les emplacements suivants :
- Sur le système 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 le système qui exécuté le serveur d'application JSP, la classe de bean doit résider dans le chemin de classe du serveur d'application (vous 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 comptant un sous-dossier classes/bean.
Si Dreamweaver et le serveur d'application s'executent 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), seule une copie de la classe du JavaBean peut 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, alors il doit etre enregistré dans /com/ardvark/ dans le chemin de classe ou dans le dossier Dreamweaver Configuration/classes.
<h1 id="pour-définit-un-javabean-pour-une-page-jsp">Pour définit un JavaBean pour une page JSP :</h1>
1 Choisissez Fenetre > Liaisons pour afficher le panneau Liaisons.
2 Cliquez sur le bouton plus (+) etCHOisissez JavaBean dans le menu contextual. La boite de dialogue JavaBean s'affiche.
3 Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Pour plus d'informations sur la définition des options de la boîte de dialogue JavaBean, cliquez sur le bouton Aide de la boîte de dialogue.
4 Le bean que vous venez de définir s'affiche dans le panneau Liaisons.
Pour définit une collecte JavaBean pour une page JSP :
1 Choisissez Fenêtre > Liaisons pour afficher le panneau Liaisons.
2 Cliquez sur le bouton plus (+) etCHOisissez Collecte JavaBean dans le menu contextual.
La boîte de dialogue Collecte JavaBean s'affiche.
3 Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Pour plus d'informations sur la définition des options de la boîte de dialogue JavaBean, cliquez sur le bouton Aide de la boîte de dialogue.
4 La collecte JavaBean que vous venez de définir s'affiche dans le panneau Liaisons.
<h1 id="mise-en-mémoire-cache-de-sources-de-contenu">Mise en mémoire cache de sources de contenu</h1>
Voussoupiezstockerdesourcesdecontenu dynamique dansune DesignNote.Cette opération youpermét de travailler surunsite même lorsquvou n'avozpas acces àla base de données ou au serveur d'application contenant les sources de contenu dynamique.Lamise en mémoire cache permetégalementd'accélééréprocessusde développementpuisqu'elleévitede se connecter en continuàla base de données et au serveur d'application viale reseau.
Pourmettre des sources de contenu en mémoire cache,cliquez sur la touche fléchée dans le coin supérieur droit du panneau Liaisons et choisissez Cache dans le menu contextualuel.
Si vous modifie l'une de vos sources de contenu, vous pouvezactualiser le cache en cliquant sur le bouton Actualiser (icone 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'apparait pas).
<h1 id="modification-ou-suppression-de-sources-de-contenu">Modification ou suppression de sources de contenu</h1>
Vou puez modifier ou supprimer n'importe quelle source de contenu dynamique, autrement dit n'importe qu'elle 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 role de source de contenu pour la page. Pour modifier ou supprimer une instance du contenu sur la page, voir les sections « Modification d'un contenu dynamique », page 560 et « Suppression d'un contenu dynamique», page 560.
Pour modifier une source de contenu dans le panneau Liaisons :
1 Dans le panneau Liaisons, double-cliquez sur le nom de la source de contenu à modifier.
2 Procedez aux modifications dans la boite de dialogue qui s'affiche.
3 Si le résultat vous convient, cliquez sur OK.
Pour supprimer une source de contenu dans le panneau Liaisons :
1 Sélectionnez la source souhaïée dans le panneau Liaisons.
2 Cliquez sur le bouton moins (-).
<h1 id="copie-dun-jeu-denregistrements-dune-page-à-une-autre">Copie d'un jeu d'enregistrements d'une page à une autre</h1>
Vouspouvez copier un jeu d'enregistements d'une page à une autre dans un sitedéfini.
Pour copier un jeu d'enregistrements sur une autre page :
1 Sélectionnez le jeu d'enregistements 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 etCHOisissez Copier dans le menu contextualuel.
3 Ouvrez la page dans laquelle vous souhaitez coller le jeu d'enregistrements.
4 Cliquez sur le panneau Liaisons ou sur la barre d'outils Comportements de serveur avec le bouton droit de la souris et choisissez Coller dans le menu contextualuel.
<h1 id="chapitre-33-2">CHAPITRE 33</h1>
<h1 id="ajout-dun-contenu-dynamique-à-une-page-web-2">Ajout d'un contenu dynamique à une page Web</h1>
Après avoir défini une ou plusieurs sources de contenu dynamique, vous pouvez utiliser ces sources 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'unobjet de serveur, etc. Pour plus d'informations, voir Chapitre 32, « Définition de sources de contenu dynamique», page 535.
Dans Macromedia Dreamweaver MX, vous pouvez placer du content 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 ;
- replacer une chaîne de texte par un contenu dynamique ;
- l'utiliser pour replacer une chaine de texte.
Un contenu dynamique peut, par exemple, définir l'attribut src d'une image ou l'attribut value d'un champ de formulaire.
Ce chapitre contient les sections suivantes :
- « Ajout d'un texte dynamique », page 554
- « Création d'images dynamiques», page 555
- « Création d'attributs HTML dynamiques», page 557
- « Création de paramètres d'objet (ActiveX, Flash, etc.) dynamiques», page 559
- « Modification d'un contenu dynamique», page 560
<h1 id="a-propos-de-lajout-dun-contenu-dynamique">A propos de l'ajout d'un contenu dynamique</h1>
Pour ajouter un contenu dynamique à une page, Sélectionnez 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 de propriétés ou la commande Image du menu Insertion. Le présente chapitre déscrit les méthodes les plus efficaces pour rendre dynamiques les éléments d'une page.
Par défaut, une page HTML ne peut afficher qu'un enregistrement à la fois. Pour afficher les autres enregistrentes du jeu, ajoutez un lien afin d'explorer les enregistrentes un à un (voir « Création de liens de navigation de jeu d'enregistrentes», page 563) ou créez une région repétée pour afficher plusieurs enregistrentes sur une seule page (voir « Affichage de plusieurs comportements», page 568).
<h1 id="ajout-dun-texte-dynamique">Ajout d'un texte dynamique</h1>
Voussupouviez substituerguntextedynamiqueauntexteexistantouleplaceraunpointd'insertion donne de la page.
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. Voir « Application d'éléments typographiques et de mise en forme de page à des données dynamiques», page 562.
Vous peuvent é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éricain ou 17/04/00 pour les français. « Application de formats à des données », page 562.
Voussupouviez substituerguntextedynamiqueauntextenormalexistantouleplacerau niquudumpointd'insertion surla page.
<h1 id="pour-ajouter-un-texte-dynamique">Pour ajouter un texte dynamique :</h1>
1 Ouvrez le panneau Liaisons (Fenêtre > Liaisons).
2 Assurez-vous qu'il contient la source de contenu à utiliser.
Cette source doit contenir du texte brut (texte ASCII), ce qui inclut HTML. Si aucune source de contenu n'apparait dans la liste ou si aucune des sources disponibles ne correspond à vos besoin, cliquez sur le bouton plus (+) pour définir une nouvelle source de contenu. Voir Chapitre 32, « Définition de sources de contenu dynamique», page 535.
3 En mode Création, sélectionnez du texte sur la page ou cliquez à l'endroit où insérer le texte dynamique.
4 Dans le panneau Liaisons, Sélectionnez la source de contenu souhaïée dans la liste. Si vous Sélectionnez un jeu d'enregistements, indiquez la colonne de votre choix dans le jeu d'enregistements.
5 Cliquez sur Insertion ou faites glisser la source de contenu sur la page.
Si vous travailliez 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ésacté, le contenu est remplaced par un espace réservé (tout texte sélectionné dans la page est remplaced par l'espace réservé). La syntaxe de l'espace réservé pour le contenu d'un jeu d'enregistrements est: {RecordsetType.ColumnName}, où Recordset est le nom du jeu d'enregistrements et ColumnName, le nom de la colonne可以选择 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ésentier les espaces réservés.
Pour creer des espaces réservés de texte dynamique :
1 Choisissez Edition > Préférences > Éléments invisibles ou Dreamweaver > Préférences > Éléments invisibles (Mac OS X).
2 Dans le menu dérouulant Afficher le texte dynamique sous,CHOISSEZ {}
3 Cliquez sur OK.
<h1 id="creation-dimages-dynamiques">Creation d'images dynamiques</h1>
Vou puez ajouter des images dynamiques à votre page. Supposons que vous conceviez une page qui affiche les articles d'une vente de charite. Chaque page doit contir 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.
Pour ajouter une image dynamique :
1 Ouvrez la page en mode Création (Affichage > Création), placez le point d'insertion à l'endetroit où l'image doit apparaitre sur la page, puis désisissez Insertion > Image.
La boîte de dialogue Sélectionner source de l'image s'affiche.
Sur Macintosh, la boîte de dialogue différentégement :
2 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.
3 Sélectionnéz une source dans la liste.
La source de contenu doit correspondre à un jeu d'enregistements contenant les chemins d'accès à vos fichiers d'image. Selon la structure du fichier de votre site, les chemins peuvent être absolus, relatifs au document ou à la racine.
Remarque : à l'heure actuelle, Dreamweaver MX ne prend pas en charge les images binaires stockées dans une base de données.
Si aucun jeu d'enregistrements n'apparait dans la liste ou si:aucun desjeux disponibles ne correspond à vos besoins, définiSEE un nouveau jeu. Pour obtenir des instructions, voir « Definition d'un jeu d'enregistrements », page 536.
4 Cliquez sur OK.
<h1 id="création-dattributs-html-dynamiques">Création d'attributs HTML dynamiques</h1>
Voupez modifier l'apparce d'une page de maniere dynamique en liant des attributs HTML aux données. Par exemple, modifie z'image d'arriere-plan d'un tableau en liant l'attribut background de ce tableau au champ d'un jeu d'enregistrements.
Vou puez hier des attributs HTML à l'aide du panneau Liaisons ou de l'inspecteur de propriétés. Les deux méthodes sont représentées ci-dessous.
Pour creer des attributs HTML dynamiques avec le panneau Liaisons :
1 Ouvrez le panneau Liaisons (Fenetre > Liaisons).
2 Assurez-vous qu'il contient la source de données à utiliser.
Cette source de contenu doit containir les données appropriées pour l'attribut HTML à hier. Si aucune source de contenu n'apparait dans la liste ou si aucune des sources disponibles ne correspond à vos besoin, cliquez sur le bouton plus (+) pour définir une nouvelle source de données. Pour obtenir des instructions, voir Chapitre 32, « Définition de sources de contenu dynamique», page 535.
3 En mode Creation, selectionnez un objet HTML.
Par exemple, pour selectionner un tableau HTML, cliquez n'importe où dans le tableau, puis cliquez sur la balise <table> dans le selecteur de balises figurant dans le coin inférieur gauche de la fenêtre de document.
4 Dans la liste du panneau Liaisons, Sélectionné une source de contenu.
5 Dans le champ Lier à, Sélectionnez un attribut HTML dans le menu contextual.
6 Cliquez sur Lieier.
Lors de la prochaineexecutionde la page sur le serveur d'applications,la valeur de la source de données sera affectee à l'attribut HTML.
Pour ajouter des attributs HTML dynamiques avec l'inspecteur de propriétés :
1 En mode Création, Sélectionnez un objet HTML, puis ouvre l'inspecteur de propriétés (Fenêtre > Propriétés).
Par exemple, pour selectionner un tableau HTML, cliquez n'importe où dans le tableau, puis cliquez sur la balise <table> dans le selecteur de balises figurant dans le coin inférieur gauche de la fenêtre de document.
2 Si, dans l'inspecteur de propriétés en mode Standard, une icône de dossier apparait à côté de l'attribut à lier, cliquez sur cette icône pour ouvrir une boîte de dialogue proposant une selection de fichiers, puis cliquez sur l'option Sources de données pour afficher la liste des sources. Passez ensuite à l'étape 6.
3 Si, en mode d'affichage standard, aucune icône de dossier n'apparait à côté de l'attribut que vous souhaitez lier, cliqueze sur l'onglet Listé (onglet du bas) à gauche de l'inspecteur.
La liste de l'inspecteur de propriétés s'affiche.
4 Si l'attribut à lier n'apparait 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.
5 Pour rendre la valeur de l'attribut dynamique, cliquez sur l'attribut, puis sur l'icone représentant un éclair ou sur l'icone de dossier située à la fin de la ligne de l'attribut.
Si vous avez cliqué sur l'icone représentant un éclair, une liste de sources de données s'affiche. Exemple :
Si vous avez cliqué sur l'icone de dossier, une boite de dialogue affiche une selection de fichiers. Cliquez sur l'option Sources de données pour afficher la liste des sources.
6 Sélectionnez une source de contenu dans la liste.
Cette source de contenu doit comprendre les données appropriées pour l'attribut HTML à lier. Si aucune source de contenu n'apparait dans la liste ou si aucune des sources disponibles ne correspond à vos besoin, définissez une nouvelle source. Pour obtenir des instructions, voir Chapitre 31, « Stockage et récapération des données spécifique à une page», page 523.
7 Cliquez sur OK.
Lors de la prochaineexecutionde la page sur le serveur d'applications,la valeur de la source de données sera affectee à l'attribut HTML.
<h1 id="creation-de-paramètres-dobjet-activex-flash-etc-dynamiques">Creation de paramètres d'objet (ActiveX, Flash, etc.) dynamiques</h1>
Voupez rendre dynamiques les parametes des plug-ins et des applets Java, ainsi que les parametes des objets ActiveX, Flash, Shockwave, Director et Generator.
Assurez-vous au préalable que les champs de votre jeu d'enregistements contiennent des données appropriées pour les paramètres d'objet que vous pouze lier.
<h1 id="pour-creer-des-parametes-dobjet-dynamiques">Pour creer des parametes d'objet dynamiques :</h1>
1 En mode Création, SéLECTIONnez un objet sur la page et ouvre l'inspecteur de propriétés (Fenêtre > Propriétés).
Voici comment se presente l'inspecteur de propriétés d'un object Flash :
2 Cliquez sur le bouton Paramètres.
La boîte de dialogue Paramètres s'affiche.
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 parametre, puis sur l'icone représentant un éclair.
La liste des sources de données s'affiche.
5 Sélectionnéz une source dans la liste.
Cette source doit containir des données appropriées pour le paramètre d'objet que vous pouze lier. Si aucune source de données n'apparait dans la liste ou si aucune des sources disponibles ne correspond à vos besoin, définitissez une nouvelle source. Pour obtenir des instructions, voir Chapitre 32, « Définition de sources de contenu dynamique», page 535.
6 Cliquez sur OK.
<h1 id="modification-dun-contenu-dynamique">Modification d'un contenu dynamique</h1>
Vous pouvez changer le contenu dynamique de votre page en modifier le comportement de serveur qui fournit ce contenu. Vous pouvez, par exemple, modifier le comportement de serveur d'un jeu d'enregistements pour fournir plus d'enregistements à 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'enregistements à votre page, le panneau Comportements de serveur les affiche tous deux sous forme de liste, comme suit :
Recordset(mySecondRecordset) Jeud'enregistrement(Monjeud'enregistrement)
Pour modifier un comportement de serveur qui fournit du contenu dynamique, double-cliquez sur ce comportement dans le panneau Comportements de serveur. La boite de dialogue dans laquelle vous avez definite la source de données d'origine s'ouvre. Effectuez vos modifications dans cette boite de dialogue, puis cliquez sur OK.
Vous pouvez également utiliser l'inspecteur de propriétés pour modifier les yeux d'enregistrements sur votre page. Ouvrez l'inspecteur de 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). Voici comment se présente l'inspecteur de propriétés pour un jeu d'enregistrements :
Si vous modifiez un jeu d'enregistrements dans la fenetre Live Data sans selectionner l'option Actualisation automatique,actualisez la page pour visualiser vos modifications. Pour cela, clique sur le bouton Actualiser ouCHOISSEZ AFFICHAGE > Actualiser Live Data.
<h1 id="suppression-dun-contenu-dynamique-2">Suppression d'un contenu dynamique</h1>
Voupez supprimer du contenu dynamique que vous avez ajouté sur une page. Pour ce faire, selectionnez-le sur la page et appuyez sur la touche Suppr ou selectionnee 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écupuncture de la base de données, mais ne supprime pas les données dans la base.
<h1 id="chapitre-34-2">CHAPITRE 34</h1>
<h1 id="affichage-des-enregistements-de-base-de-données">Affichage des enregistements de base de données</h1>
Pour afficher des enregistements de base de données, il faut récapé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. Macromedia Dreamweaver MX offre plusieurs méthodes d'affichage d'un contenu dynamique et propose quelques comportements de serveur intégrés. Ces derniers vous permettent d'améliorer la presentation du contenu dynamique et permettent aux utilisateurs de plus facilement effectuer des recherches et naviguer parmi les informations renvoyées par une base de données.
Les comportements de serveur et éléments de mise en forme proposés pour enrichir la presentation de données dynamiques sont les suivants :
Les formats permettent d'appliquer différents types de valeurs numériques, monétaires, de date/heure et de pourcentage à un texte dynamique.
Les comportements de serveur Région repétée permettent d'afficher plusieurs éléments renvoyés par une requête de base de données et d'indiquer le nombre d'enregistements à afficher par page.
Les comportements de serveur Navigation de jeu d'enregistements permettent d'insérer des éléments de navigation dont les utilisateurs peuvent se servir pour passer au groupe d'enregistements précédent ou suivant renvoyé par le jeu d'enregistements. Supposons que vous choisissez d'afficher dix enregistements par page à l'aide de l'objet de serveur Région repétée et que le jeu d'enregistements renvoie 40 enregistements ; vous pouvez alors parcourir les enregistements par groupe de dix.
Les comportements de serveur Barre d'etat du jeu d'enregistrements 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.
Les comportements de serveur Afficher la région permettent d'afficher ou de masquer des éléments de la page en fonction de la pertinence des enregistements actuellement affichés. Par exemple, si un utilisateur consulte le dernier enregistrement d'un jeu, vous pouze désirir de n'afficher que le lien « Précédent »; le lien « Suivant » est alors masqué.
Ce chapitre contient les sections suivantes :
- « Application d'éléments typographiques et de mise en forme de page à des données dynamiques», page 562
- « Application de formats à des données », page 562
- « Création de liens de navigation de jeu d'enregistrements», page 563
- « Affichage et masquage des régions en fonction des résultats du jeu d'enregistements », page 567
- « Affichage de plusieurs comportements», page 568
- « Création d'un contrôle Web Grillé de données ou Liste de données ASP.NET», page 573
- « Création d'un compteur d'enregistrements», page 570
<h1 id="application-déléments-typographiques-et-de-mise-en-forme-de-page-à-des-données-dynamiques">Application d'éléments typographiques et de mise en forme de page à des données dynamiques</h1>
Dreamweaver permit depré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, formatez les tableaux et les espaces réservés des données dynamiques à l'aide des outils de formatage de Dreamweaver. Lors de leur insertion à partir d'une source, les données adoptent automatiquement le formatage (police, style de paragraphe et tableau) spécifique.
Pour plus d'informations sur les fonctions de formatage de Dreamweaver et sur leur application à des éléments de données dynamiques, voir Chapitre 16, « Présentation de contenu à l'aide de tableaux,», page 237 et Chapitre 19, « Insertion et mise en forme de texte,», page 283.
<h1 id="application-de-formats-à-des-données">Application de formats à des données</h1>
Dreamweaver est livré avec plusieurs formats de données prédéfinis que vous pouvez appliquer à des éléments de données dynamiques. Les styles de format de données prédéfinis sont les suivants : Date/Heure, Devise, Nombre et Pourcentage.
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 enCHOIsissant le format Devise - 2 decimales 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.
Pour appliquer 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 Choisissez Fenetre > Liaisons pour afficher le panneau Liaisons.
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 souhaïé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.
<h1 id="personnalisation-des-formats-de-données-existants">Personnalisation des formats de données existants</h1>
Vou puez personnaliser les formats de données disponibles dans Dreamweaver ou creator vos propres formats.
<h1 id="pour-personnelier-un-format-de-données">Pour personnelier un format de données :</h1>
1 Ouvrez une page contenant des données dynamiques en mode Creation.
2 Sélectionnez les données dynamiques dont vous souhaitez personnelier le format.
3 Choisissez Fenetre > Liaisons pour afficher le panneau Liaisons.
L'objet de données liées dont vous avez sélectionné le texte dynamique se met en surbrillance.
4 Dans la colonne Format, cliquez sur la flèche vers le bas 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 le panneau.
5 Dans le menu déroulant,CHOISSEZ Modifier la liste de formats.
La boîte de dialogue Modifier la liste de formats s'affiche.
6 Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
<h1 id="creation-de-formats-de-données">Creation de formats de données</h1>
Vou puez creer des formats de données pour n'importe quel type de données dynamiques a afficher.
<h1 id="pour-creer-un-format-de-données">Pour creer un format de données :</h1>
1 Ouvrez une page contenant des données dynamiques en mode Creation.
2 Sélectionnéz les données dynamiques pour lesquelles créé le format personnelisé.
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,CHOISSEZ Modifier la liste de formats.
La boîte de dialogue Modifier la liste de formats s'affiche.
5 Cliquez sur le bouton plus (+) et selectionné un type de format.
6 Définissez le format et cliquez sur OK.
7 Entrez un nom pour le nouveau format dans la colonne Nom.
8 Cliquez sur OK pour fermer la boite de dialogue.
<h1 id="creation-de-liens-de-navigation-de-jeu-denregistrements">Creation de liens de navigation de jeu d'enregistrements</h1>
Les liens de navigation de jeu d'enregistrements permettent aux utilisateurs de se déplacer d'un enregistrement à un autre ou d'un jeu d'enregistrements à un autre. Àpres 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'utilateur puisse afficher les cinq enregistrements suivants ou precedents.
Dreamweaver yous permet de creer quatre types de liens pour la navigation dans les yeux d'enregistrements :Premier,Precedent,Suivant et Dernier. Une page peut containir un nombre illimité de liens,à condition que tous agissent sur un meme jeu d'enregistrements:vous ne pouvez pas insérer sur une meme page des liens d'acces à des yeux d'enregistrements differents.
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 trouvez dans les boites de dialogue et les options de menu spécifiques à ASP.NET. Dans la documentation de Dreamweaver, le terme jeu d'enregistements fait généralement référence aux deux types de jeunes d'enregistements. Toutefois, lorsqu'il est spécifiquement question de fonctions ASP.NET, c'est le terme ensemble de données (DataSet) qui est utilisé.
Les éléments dynamiques suivants sont nécessaires pour la mise en place de liens de navigation de jeu d'enregistrements :
- 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 disponible.
- Un jeu de comportements serveur « Déplacer vers l'enregistrement » pour naviguer dans le jeu d'enregistements.
Voupez ajouter simultanement les deux derniers éléments en utilisant l'objet dynamique Barre de navigation des enregistements ou bien séparément en utilisant les outils de conception de Dreamweaver et le panneau Comportements de serveur.
<h1 id="creation-dune-barre-de-navigation-à-laide-du-comportement-de-serveur-barre-de-navigation-du-jeu-denregistrentements">Creation d'une barre de navigation à l'aide du comportement de serveur Barre de navigation du jeu d'enregistrentements</h1>
Voupez creer en une seule opération une barre de navigation de jeu d'enregistements à 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'enregistements ressemble à ceci :
La version image de la barre de navigation du jeu d'enregistements ressemble à ceci :
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 utiliser les outils de conception de Dreamweaver pour la personnaliser à votre convenance. Vous pouvez également modifier les comportements de serveur « Déplacer vers » et « Afficher la région » en double-cliquant dessus dans le panneau Comportements de serveur.
Pour creer la barre de navigation à l'aide des outils de conception de Dreamweaver et du panneau Comportements de serveur, voir « Création d'une barre de navigation de jeu d'enregistements personnalisé », page 565.
Pour creer la barre de navigation de jeu d'enregistements à l'aide de l'objet de serveur :
1 En mode Création, placez le point d'insertion à l'endetroit de la page où vous souhaitez que la barre de navigation apparaisse.
2 Ouvrez la boite de dialogue Barre de navigation du jeu d'enregistrents (Insertion > Objects d'application > Barre de navigation du jeu d'enregistrents).
La boîte de dialogue Barre de navigation du jeu d'enregistements s'affiche.
3 Dans le menu dérouulant 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. L'option Texte place des liens texte sur la page, tandis que l'option Images permet d'utiliser des images graphiques.
Dans la version image de la barre de navigation, Dreamweaver utilise ses propres fichiers d'image. Une fois que la barre se trouve sur la page, vous pouvez néanmoins les replacer par les vôtres.
5 Cliquez sur OK.
Le tableau qui se create contient des liens texte ou image permettant à l'utilisateur, lorsqu'il clique dessus, de se déplacer dans le jeu d'enregistements 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.
Vou puez personaliser la mise en forme de la barre de navigation à l'aide des outils de conception de Dreamweaver.
<h1 id="création-dune-barre-de-navigation-de-jeu-denregistements-personalisée">Création d'une barre de navigation de jeu d'enregistements personalisée</h1>
Si vous préférez utiliser une barre de navigation de jeu d'enregistements reposant sur une mise en forme et des styles de formatage plus complexes que ceux offerts par le simple tableau créé par l'objet de serveur Barre de navigation du jeu d'enregistements, vous pouze creatorer votre propre barre de navigation. Pour ce faire, vous doivent d'abordisser les liens de navigation nécessaires au sein du texte ou des images, les placer dans la page en mode Création et attribuer les comportements de serveur individuels à chaque lien de navigation.
Les comportements de serveur disponibles sont les suivants :
- Déplacer vers la première page
- Déplacer vers la dernière page
- Déplacer vers la page suivante
- Déplacer vers la page précédente
Pour creer la barre de navigation à l'aide de l'objet de serveur Barre de navigation du jeu d'enregistements intégre à Dreamweaver, voir « Création d'une barre de navigation à l'aide du comportement de serveur Barre de navigation du jeu d'enregistements», page 564.
<h1 id="tâches-de-création-dune-barre-de-navigation">Tâches de création d'une barre de navigation</h1>
Pour reconvoir une barre de navigation personalisée, commencez par creator sa représentation visuelle à l'aide des outils de conception de page de Dreamweaver. Il est inutil de creator un lien pour la chaine de texte ou l'image, car Dreamweaver s'en charge à votre place.
La page sur laquelle creer la barre de navigation doit containir un jeu d'enregistrements dans lequel naviguer. Pour plus d'informations, voir « Définition d'un jeu d'enregistrements », page 536.
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 tels que des images, ressemble à ceci :
PREVIOUS NEXT
Après avoir ajouté un jeu d'enregistements à 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'enregistements typique contient la représentation des liens suivants, associée au comportement approprié :
<h1 id="lien-de-navigation">Lien de navigation</h1>
<h1 id="comportement-de-serveur">Comportement de serveur</h1>
Acceder à la première page
Déplacer vers la première page
Acceder à la page précédente
Déplacer vers la page précédente
Acceder à la page suivante
Déplacer vers la page suivante
Acceder à la dernière page
Déplacer vers la dernière page
<h1 id="pour-attribuer-des-comportements-de-serveur-à-des-liens-de-navigation-entre-enregistements">Pour attribuer des comportements de serveur à des liens de navigation entre enregistements :</h1>
1 En mode Création, Sélectionnéz sur la page la chaîne de texte ou l'image qui servira de lien de navigation entre les enregistements.
2 Ouvrez le panneau Comportements de serveur (Fenêtre > Comportements de serveur), puis cliquez sur le bouton plus (+).
3 Choisissez Paging du jeu d'enregistements dans le menu contextual, puis selectionnez le comportement qui convient dans la liste des comportements de serveur.
Notez que, si le jeu contient un nombre important d'enregistements, l'exécution du comportement de serveur Déplacer vers le dernier enregistrement peut être longue lorsque l'utilisateur clique sur le lien.
4 Dans le menu déroulant Jeu d'enregistrements, Sélectionnez le jeu contenant les enregistrements.
5 Cliquez sur OK.
<h1 id="affichage-et-masquage-des-régions-en-fonction-des-résultats-du-jeu-denregistrements">Affichage et masquage des régions en fonction des résultats du jeu d'enregistrements</h1>
Dreamweaver offre un choix de comportements de serveur permettant d'afficher ou de masquer une région en fonction des résultats renvoyés par un jeu d'enregistements. Par exemple, dans une page de résultats utilisant les liens de navigation entre enregistrements « Précédent » et « Suivant », vous pouvez spécifique que le premier lien soit masqué sur la première page de résultats (puisqu'il n'exist pas de résultat precedent) et que le second lien soit masqué sur la dernière page (puisqu'il n'existe pas de résultat suivant).
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 enterer. 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 passé de l'utilisateur ne correspondent pas à ceux reconnus par le serveur.
Les comportements de serveur Afficher la région sont les suivants :
- Afficher si le jeu d'enregistrements est vide
- Afficher si le jeu d'enregistements 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 derniere page
- Afficher si ce n'est pas la dernière page
Pour qu'une région soit masquée lorsqu'elle n'est pas nécessaire :
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 désissez l'un des comportements de serveur proposés.
4 Cliquez sur OK.
<h1 id="affichage-de-plusieurs-comportements">Affichage de plusieurs comportements</h1>
Le comportement de serveur Région repétée vous permet d'afficher sur une page plusieurs enregistements d'un jeu. Toute sélection de données dynamique peut être convertie en région repétée. Les régions les plus courantes sont les tableaux, les lignes de tableau ou les séries de lignes de tableau.
L'exemple ci-dessous illustrer comment le comportement de serveur Région repétée s'applique à une ligne de tableau et indique qu'il est possible d'afficher un maximum de neuf enregistements par page. La ligne elle-même affiche quatre enregistements différents : city, state, street address et zip code.
Pour creer un tableausemblable à celui illustré ci-dessus, vous neze creer un tableau contenant un contenu dynamique et appliquer le comportement de serveur Région repétée à la ligne renferment le contenu dynamique. Lorsque la page est traitée par le serveur d'application, la ligne est repétée autant de fois que le nombre spécifique dans l'objet de serveur Région repétée, avec un enregistrement différent inséré dans chaque ligne.
La page sur laquelle creer la barre de navigation doit containir un jeu d'enregistements dans lequel naviguer. Pour plus d'informations, voir « Definition d'un jeu d'enregistements », page 536.
<h1 id="pour-creer-une-région-repétée">Pour creer une région repétée :</h1>
1 En mode Création, Sélectionnez une région responsable un contenu dynamique.
La selection peut être de tout type, notamment tableau, ligne de tableau ou même paragraphe de texte.
Pour sélectionner précisé une région sur une page, vous pouvez utiliser le/selecteur 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>itué le plus à droite dans le/selecteur de balises pour sélectionner la ligne du tableau.
2 Pour afficher le panneau Comportements de serveur,CHOISSEZ Fenetre > Comportements de serveur.
3 Cliques sur le bouton plus (+) et choisisse Région repétée.
La boîte de dialogue Région répétée s'affiche.
4 Sélectionnéz le nom du jeu d'enregistements à utiliser dans le menu déroulant.
5 Sélectionnez le nombre d'enregistements à afficher sur chaque page.
6 Cliquez sur OK.
Dans la fenêtre Document, un contour fin de couleur grise délimite la région repé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'enregistements spécifique.
<h1 id="création-dun-tableau-à-laide-du-comportement-de-serveur-région-repétée">Création d'un tableau à l'aide du comportement de serveur Région repétée</h1>
L'objet de serveur Tableau dynamique permet de creer un tableau renferment un contenu dynamique et d'appliquer le comportement Région repétée à partir d'une seule boîte de dialogue. Cet objet de serveur est particulièrement utile, car il insère le contenu dynamique d'un jeu d'enregistrements dans le tableau et applique simultanément le comportement de serveur Région repétée.
Remarque : l'objet de serveur Tableau dynamique n'est pas disponible avec les types de document ASP.NET. Pour creer un tableau renferment un contenu dynamique et des régions répetées, vous devez manuellement insérer le tableau, insérer le contenu dynamique à partir du panneau Liaisons de données et appliquer le comportement de serveur Région répetée, si nécessaire. Pour plus d'informations, voir « Affichage de plusieurs comportements », page 568.
<h1 id="pour-creer-un-tableau-dynamique">Pour creer un tableau dynamique :</h1>
1 Choisissez Insertion > Objects d'application > Tableau dynamique.
La boîte de dialogue Tableau dynamique s'affiche.
2 Dans le menu dérouulant Jeu d'enregistements, Sélectionnez le jeu d'enregistements à utiliser.
3 Sélectionnez le nombre d'enregistements à afficher sur chaque page.
4 A ce stade, vous pouvez taper les valeurs des cordures du tableau, de la marge interieure 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 cordures du tableau, la marge interieure des cellules et l'espacement entre les cellules. Dans le cas de projets qui nécessrent plusieurs tableaux dynamiques d'aspect semblable, vous pouze taper les valeurs de mise en forme du tableau pour simplifier le développement des pages. Une fois le tableau inséré, vous pouze toute fois ajuster ces valeurs à l'aide de l'inspecteur de propriétés du tableau.
5 Cliquez sur OK.
Un tableau et des espaces réservés destinés au contenu dynamique définis dans le jeu d'enregistements associé s'insérént sur la page.
Dans cet exemple, le jeu d'enregistrements contient quatre enregistrements: FIRSTNAME, LASTNAME, TITLE et DEPARTMENT. Le nom de chaque élément d'enregistrement se place dans la ligne de titre du tableau. Vous pouvez replacer les titres par tout texte descriptorif ou image pertinente.
<h1 id="création-dun-compteur-denregistrements">Création d'un compteur d'enregistrements</h1>
Les compteurs d'enregistements permettent aux utilisateurs de connaître leur position relative dans un jeu d'enregistements. Ils affichent généralement le nombre total d'enregistements renvoyés et le nombre actuel d'enregistements affichés. Prenons l'exemple d'un jeu d'enregistements renvoyant 40 enregistements individuels, avec huit enregistements affichés par page ; le compteur d'enregistements indique alors sur la première page « Affichage des enregistements 1 à 8 sur 40 »
Pour creer un compteur d'enregistrements pour une page, vous neze d'abord creer un jeu d'enregistrements pour la page, une mise en forme appropriee pour la presentation du contenu dynamique et une barre de navigation de jeu d'enregistrements. Pour plus d'informations sur la creation de ces elements et leur ajout a une page, voir :
- « Définition d'un jeu d'enregistements », page 536
- « Création de liens de navigation de jeu d'enregistrements», page 563
- « Affichage de plusieurs comportements», page 568
- « Création d'un tableau à l'aide du comportement de serveur Région répetée», page 569
Une fois que les éléments ci-dessus figurent sur la page, vous pouzecerer le compteur d'enregistrements.
<h1 id="creation-dun-compteur-denregistrements-à-laide-de-lobjet-etat-de-navigation-du-jeu-denregistrements">Creation d'un compteur d'enregistrements à l'aide de l'objet Etat de navigation du jeu d'enregistrements</h1>
L'objet Etat de navigation du jeu d'enregistrements create une entrée de texte sur la page pour afficher l'état de l'enregistrement actif.
Pour utiliser l'objet de serveur Etat de navigation du jeu d'enregistrements :
1 Placez le curseur à l'endetroit où vous souhaitez insérer le compteur d'enregistements.
2 Choisissez Insertion > Objects d'application > Etat de navigation du jeu d'enregistements.
La boîte de dialogue Insérer l' état de navigation du jeu d'enregistements s'affiche.
Dans le menu déroulant Jeu d'enregistrements, Sélectionnez le jeu d'enregistrements à utiliser.
3 Cliquez sur OK.
L'objet de serveur État de navigation du jeu d'enregistrements insère un compteur d'enregistrements texte qui ressemble à celui illustré ci-dessous :
Records (Employees_first) to (Employees_last) of (Employees_total)
Pour personnelier le compteur d'enregistrements, utilisez les outils de conception de page de Dreamweaver.
Dans la fenêtre Live Data ou dans un navigator, le compteur ressemble à celui illustré ci-dessous:
Records 1 to 1 of 22
<h1 id="déception-de-compteurs-denregistrements-personalisés">Déception de compteurs d'enregistrements personalisés</h1>
Vouss pouvez faire appel à des comportements de comptage d'enregistrements individuels pour creer 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 variees et créatives et appliquer un comportement de serveur approprié à chaque élément.
L'objet de serveur Etat de navigation du jeu d'enregistrements permet de créé un compteur d'enregistrements simple. Il insère un compteur d'enregistrements complet auquel vous pouvez appliquer une mise en forme textuelle à l'aide des outils de conception de page de Dreamweaver.
Les comportements de serveur de comptage des enregistrements sont les suivants :
- Afficher le numéro de l'enregistrement de début
- Afficher le numéro de l'enregistrement de fin
- Afficher le nombre total des enregistrements
Pour creer un compteur d'enregistrements personnalise sur une page, vousdez d'abord creer un jeu d'enregistrements pour la page, une mise en forme appropriée pour la presentation du contenu dynamique et une barre de navigation de jeu d'enregistrements. Pour plus d'informations sur la creation de ces éléments et leur ajout à une page, voir :
- « Définition d'un jeu d'enregistements », page 536
- « Création de liens de navigation de jeu d'enregistrements», page 563
· « Affichage de plusieurs comportements », page 568
- « Création d'un tableau à l'aide du comportement de serveur Région répetée», page 569
Une fois que les éléments ci-dessus figurent sur la page, vous pouzecerer un compteur d'enregistrements personnalisé.
Cet exemple create un compteur d'enregistrements similaire à celui de la section précédente, « Création d'un compteur d'enregistrements à l'aide de l'objet Etat de navigation du jeu d'enregistrements», page 571. Il se présente comme suit :
Affichage des enregistements StartRow à EndRow sur RecordSet.RecordCount.
Dans cet exemple, le texte mis en forme avec la police san-serif représenté les espaces réservés des nombres d'enregistements qui seront insérés sur la page.
<h1 id="pour-creer-un-compteur-denregistrements-personnalise">Pour creer un compteur d'enregistrements personnalise :</h1>
1 En mode Creation, tapez le texte du compteur sur la page. Vous pouvez taper le texte qui vous convient.
Affichage des enregistements à sur .
2 Placez le point d'insertion à la fin de la chaine de texte.
3 Ouvrez le panneau Comportements de serveur (Fenetre > Comportements de serveur).
4 Cliquez sur le bouton plus (+) dans le coin supérieur gauche, puis cliquez sur Obtenir le nombre d'enregistements. Dans ce sous-menu, choisissez Afficher le nombre total des enregistements. Le comportement Afficher le nombre total des enregistements s'insere sur la page et un espace réservé se place au niveau du point d'insertion. La chaîne de texte resemble maintainant à ceci :
Affichage des enregistements à sur (Recordset1.RecordCount).
5 Placez le point d'insertion après le mot enregistements, accedede au panneau Nombre d'enregistements (Comportements de serveur > bouton plus (+) ), puis choisisse Afficher le numero de l'enregistrement de fin. La chaîne de texte ressemble maintainant à ceci :
Affichage des enregistrements {StartRow_Recordset1} à sur {Recordset1.RecordCount}.
6 Placez maintainant le point d'insertion entre les mots à et sur, accédez au panneau Nombre d'enregistrements (Comportement de serveurs > bouton plus (+)), puis désissez Afficher le numéro de l'enregistrement de fin. La chaîne de texte ressemble maintainant à ceci :
Affichage des enregistements {StartRow_Recordset1} à {EndRow_Recordset1} sur {Recordset1.RecordCount}.
7 Pour vérifier que le compteur fonctionne correctement, affichez la page dans la fenêtre Live Data (Affichage > Live Data). Le compteur doit ressembler à l'exemple ci-dessous:
Affichage des enregistements 1 à 8 sur 40.
Si la page de résultats comporte un lien de navigation permettant d'acceder au groupe d'enregistrements suivant, il suffit de cliquer sur ce lien pourmettre à jour le compteur d'enregistrements comme suit :
Affichage des enregistements 9 à 16 sur 40.
Les liens ne fonctionnent pas dans la fenêtre Live Data. Pour les tester, utilisez la fonction Aperçu dans le navigateur de Dreamweaver. Vérifiez que l'option Aperçu à l'aide d'un fjichier temporaire est seLECTIONnée dans Préférences (Edition > Préférences > Aperçu dans le navigateur ou Dreamweaver > Préférences > Aperçu dans le navigateur (Mac OS X)), puis désissez Fichier > Aperçu dans le navigateur.
<h1 id="creation-dun-contrôle-web-grille-de-données-ou-liste-de-données-aspnet">Creation d'un contrôle Web Grille de données ou Liste de données ASP.NET</h1>
Les contrôleles 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ôleles. Dreamweaver prend en charge les contrôleles Grille de données et Liste de données en tant que comportements de serveur. Ces contrôleles possèdent les caractéristiques suivantes :
Le contrôle Grille de données create une grille à plusieurs colonnes qui est liée aux données. Il permet de définir divers types de colonnes pour à la foismettre en forme le contenu de la grille et ajouter des fonctionnalités particulières (colonnes Bouton Modifier, colonnes Hyperlien, etc).
Le contrôle Lieste 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 modifier les modèles formant ses différents composants.
<h1 id="ajout-dune-grille-de-données-à-une-page">Ajout d'une grille de données à une page</h1>
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 presente les tableaux sous forme de grilles à plusieurs colonnes et peut containir différents types de colonnes (colonnes hétérogenes) 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. Voici la liste des types de colonnes disponibles dans une grille de données :
<table><tr><td>Type de colonne dans une grille de données</td><td>Description</td></tr><tr><td>Champ de données simple</td><td>Appelée « colonne liée » dans ASP.NET, la colonne Champ de données simple vous permit de spécifique 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.</td></tr><tr><td>Forme libre</td><td>Appelée « colonne modèle » dans ASP.NET, la colonne de formé libre vous permit de créé des combinaisons de contrôles de serveur et de texte HTML afin de définir une mise en forme personalisée pour une colonne. Les contrôles au sein d'une colonne de formé libre peuvent être liés aux données. Ce type de colonne vous offre une plus grande liberté au niveau de la mise en forme et des fonctionnalités du contenu de la grille, car vous décidEZ entièrement de la façon dont les données s'affichent et de ce qui se passé lorsque les utilisateurs interagissent avec les lignes de la grille.</td></tr><tr><td>Hyperlien</td><td>La colonne Hyperlien affiche des informations sous forme de liens hypertexte. 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 affichtant des détails sur cet élément.</td></tr><tr><td>Boutons Modifier, Mettre à jour, Annuler</td><td>Appelée « colonne de commande d'édition » dans ASP.NET, la colonne Boutons Modifier, Mettre à jour, Annuler permet aux utilisateurs de modifier directement les informations figurant dans les lignes de la grille de données. Il suffit pour cela de créé une colonne Modifier, Mettre à jour, Annuler. Au moment de l'opération, 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 de texte, et le bouton Modifier est replacé par les boutons Mettre à jour et Annuler.</td></tr><tr><td>Boutons Supprimer</td><td>Le bouton Supprimer permet à un utilisateur de supprimer une ligne particulière en cliquant sur un bouton.</td></tr></table>
Pour plus d'informations sur le contrôle Grille de données et son utilisation pour la mise en forme de données dynamiques, visitez les sites Web suivants (en angeais) :
- Microsoft MSDN à l'adresse: http://msdn.microsoft.com
- Microsoft ASP.NET à l'adresse : http://asp.net
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. Pour plus d'informations, voir « Définition d'un jeu d'enregistrements », page 536.
Pour ajouter un objet Grille de données à une page :
1 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.
2 Complétez les options de la boîte de dialogue Grille de données, puis cliquez sur OK.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
Dans la fenêtre de document, la grille de données qui s'affiche est entourée d'un cadre gris agrémented d'onglets. Dans la fenêtre Live Data (Affichage > Live Data), le contour gris disparait et l'espace réservé de l'objet est remplaced par la grille de données spécifique.
<h1 id="ajout-dune-liste-de-données-à-une-page">Ajout d'une liste de données à une page</h1>
Le comportement de serveur Lieste de données de Dreamweaver vous permet d'insérer le contrôle Lieste de données ASP.NET dans une page. Le contrôle Lieste de données sert àmettre en œuvre un système frontal pour les sources de données, qui repose sur des formulaires. Il vous permit d'organiser les données dans une grille de sorté à ce que chaque enregistrement figure sur une ligne différente et que plusieurs lignes s'affichent simultanément.
Pour plus d'informations sur le contrôleisme de données et son utilisation pour la mise en forme de données dynamiques, visitez les sites Web suivants :
- Microsoft MSDN à l'adresse: http://msdn.microsoft.com
- Microsoft ASP.NET à l'adresse: http://asp.net
Avant d'insérer le comportement de serveur Liste de données, vous nevez définir un ensemble de données (appele jeu d'enregistements dans d'autres types de documents) pour la liste de données. Pour plus d'informations, voir « Définition d'un jeu d'enregistements », page 536.
Pour ajouter un objet Liste de données à une page :
1 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton plus (+), puis choisissez Liste de données.
La boîte de dialogue Liste de données s'affiche.
2 Complétez les options de la boîte de dialogue Liste de données, puis cliquez sur OK.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
Dans la fenêtre de document, l'objet Liste de données qui s'affiche est entouré d'un cadre gris agrémented d'onglets. Dans la fenêtre Live Data (Affichage > Live Data), le contour gris disparait et l'espace réservé de l'objet est remplaced par la liste de données spécifique.
<h1 id="modification-dun-objet-grille-de-données-ou-liste-de-données">Modification d'un objet Grille de données ou Liste de données</h1>
Pour modifier un objet Grille de données ou Liste de données, vous pouvez utiliser l'une des quatre méthodes suivantes :
- En mode Création, cliquez sur l'icone dans le 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 à ontglets qui s'affichent.
Remarque : vous pouvez également faire glisser les sources de contenu dynamique du panneau Liaisons vers une région à ontlets.
- En mode Création, Sélectionnez l'objet et modifiez ses attributs à l'aide de l'inspecteur des propriétés.
- Dans le panneau Comportements de serveur, double-cliquez sur l'objet et modifiez ses propriétés dans la boîte de dialogue qui s'ouvre.
- En mode Code, Sélectionné la grille de données ou la liste de données sur la page et modifiez ses attributs à l'aide des onglets.
<h1 id="chapitre-35-2">CHAPITRE 35</h1>
<h1 id="utilisation-des-composants-coldfusion">Utilisation des composants ColdFusion</h1>
Les composants ColdFusion (CFC) vous permettent d'encapsuler la logique d'application et d'entreprises au sein d'unités autonomes réutilisables. Ils permettent également de créé rapidement des services Web.
Vou puez creer et modifier les CFC à l'aide de Macromedia Dreamweaver MX. Dreamweaver peut également servir à creer des pages Web qui utilise des CFC.
Remarque : les CFC s'utilisent uniquement avec Macromedia ColdFusion MX. IIs ne sont pas pris en charge par ColdFusion 5.
Ce chapitre contient les sections suivantes :
- « Description des composants ColdFusion», page 579
- « Création visuelle d'un composant dans Dreamweaver», page 580
- « Affichage de composants ColdFusion dans Dreamweaver», page 581
- « Modification de composants ColdFusion dans Dreamweaver», page 581
- « Création de pages Web utiliser des composants ColdFusion», page 582
<h1 id="description-des-composants-coldfusion">Description des composants ColdFusion</h1>
Un composant ColdFusion est une unité logicielle réutilisable écrite en CFML (ColdFusion markup language). Les CFC rendent le code réutilisable et facile à gérer.
Cette section présente les avantages des CFC. D'autres sections plus loin dans ce guide expliquent comment Dreamweaver peut vous aider à utiliser les CFC. Pour des informations sur les balises et la syntaxe des CFC, voir l'aide de ColdFusion dans Dreamweaver (Aide > Utilisation de ColdFusion).
Les composants ColdFusion sont conçus pour offrir aux développpeurs une méthode d'encapsulation des éléments de leurs sites Web, qui soit à la fois simple et puissant. Ces composants s'utilisent généralement pour la logique d'application ou d'entreprise. Utilisez des balises personalisées pour introduire des éléments de presentation tels que des messages personalisés ou des menus dynamiques.
L'ajout de parties interchangeables peut donc restre 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 doit exécurrer la même requête à maintes reprises ou recalçuer 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, voir remplaner 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 série alors améné à mélanger du code de presentation 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比较好 create un composant ColdFusion 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 : frais de port Gratisits pour toute commande au-dessus de 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 dans toutes les pages utilisant la fonction.
<h1 id="création-visuelle-dun-composant-dans-dreamweaver">Création visuelle d'un composant dans Dreamweaver</h1>
Vou puez utiliser Dreamweaver pour définir visuellement un composant ColdFusion et ses fonctions. Dreamweaver create un fichier .cfc et insere automatiquement les balises CFML nécessaires.
Remarque : selon le composant, il vous faudra peut'être compléter le code manuellement.
<h1 id="pour-creer-visuellement-un-composant-coldfusion">Pour creer visuellement un composant ColdFusion :</h1>
1 Ouvrez une page ColdFusion dans Dreamweaver.
2 Dans le panneau Composants (Fenêtre > Composants),CHOISSEZ Composants CF dans le menu déroulant.
3 Dans le panneau Composants, cliquez sur le bouton plus (+)
La boîte de dialogue Créer un composant s'affiche.
4 Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
Dreamweaver écrit un fichier.cfc et l'enregistre dans le dossier spécifique. Le nouveau composant s'affiche également dans le panneau Composants (il vous suffit de cliquer sur Actualiser).
Pour supprimer un composant, vous doivent supprimer manuellement le fichier .cfc du serveur.
<h1 id="affichage-de-composants-coldfusion-dans-dreamweaver">Affichage de composants ColdFusion dans Dreamweaver</h1>
Dreamweaver permit d'examiner visuèlement les composants ColdFusion définis dans votre site. Il lit les fichiers .cfc situés sur le serveur et affiche des informations qui les concernent dans une arborescence qu'il est facile de parcourir dans le panneau Composants.
Remarque : Dreamweaver recherche les composants sur votre serveur d'évaluation (voir « Définition du dossier de traitement des pages dynamiques », page 140). Pour afficher les composants situés sur un autre serveur, modifier les paramètres du serveur d'évaluation.
Plus particulièrement, vous pouvez effectuer l'une des actions suivantes dans Dreamweaver :
- dresser la liste de tous les composants ColdFusion définis pour le site ;
- étudier les fonctions et arguments de chaque composant ;
examiner les propriétés des fonctions qui servent de services Web.
<h1 id="pour-afficher-les-composants-coldfusion-dans-dreamweaver">Pour afficher les composants ColdFusion dans Dreamweaver :</h1>
1 Ouvrez une page ColdFusion dans Dreamweaver.
2 Dans le panneau Composants (Fenêtre > Composants),CHOISSEZ Composants CF dans le menu déroulant.
3 Dans le panneau, cliquez sur le bouton Actualiser pour recuperer les composants.
Dreamweaver affiche les composants 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 Cliquez sur l'icone plus (+) en regard du nom du dossier pour afficher les composants qu'il contient.
5 Pour dresser la liste des fonctions d'un composant, cliquez sur l'icone plus (+) en regard du nom du composant.
6 Pour connaître les arguments qu'une fonction accepte, ainsi que leur type et leur caractère教训atif ou obligatoire, développpez la branche de la fonction dans l'arborescence.
Aucune icône plus (+) ne figure en regard des fonctions sans argument.
7 Pour afficher rapidement les détails d'un argument, d'une fonction ou d'un composant, Sélectionnez l'élement dans l'arborescence, puis cliquez sur l'icone Obtenir des détails dans la barre d'outils du panneau.
Vou puezé également cliquer sur l'élément avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enfonnée (Macintosh) et désirir Obtenir des détails dans le menu contextual qu qui s'affiche.
Dreamweaver affiche les détails de l'objet dans une boîte de message.
<h1 id="modification-de-composants-coldfusion-dans-dreamweaver">Modification de composants ColdFusion dans Dreamweaver</h1>
Dreamweaver permit 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 MX doit s'executer在当地.
- Dans l'onglet Avancé de la boîte de dialogue Définition du site de Dreamweaver, le type d'accès spécifique dans la catégorie du serveur d'évaluation doit être Local/Réseau.
- Dans l'onglet Avancé de la boite 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\cfprojects\myNewApp\). Pour consulter et modifier ces chemins d'accès,CHOISSEZ 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.
Pour pouvoir modifier un CFC, 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), désissez Composants CF dans le menu déroulant du panneau, puis cliquez sur le bouton Actualiser dans le panneau.
Etant donné que ColdFusion MX s'exécuté localement, Dreamweaver affiche les composants figurant sur votre disque dur. Pour plus d'informations, voir « Affichage de composants ColdFusion dans Dreamweaver», page 581.
<h1 id="pour-modifier-un-composant">Pour modifier un composant :</h1>
1 Pour modifier un fisier du composant de façon générale, ouvre le dossier dans lequel il reside et double-cliquez sur le nom du composant dans l'arborescence.
Dreamweaver ouvre alors le fichier du composant en mode Code.
2 Pour modifier une fonction, un argument ou une propriété spécifique, double-cliquez sur l'élément dans l'arborescence.
3 Effectuez les modifications manuellement en mode Code.
4 Enregistrez le fichier (Fichier > Enregistrer).
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.
<h1 id="creation-de-pages-web-utiliser-des-composants-coldfusion">Creation de pages Web utiliser des composants ColdFusion</h1>
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 les autres modes d'utilisation des composants, voir l'aide de ColdFusion dans Dreamweaver (Aide > Utilisation de ColdFusion).
<h1 id="pour-utiliser-un-composant-coldfusion-dans-une-page-web">Pour utiliser un composant ColdFusion dans une page Web :</h1>
1 Dans Dreamweaver, ouvrez la page ColdFusion qui doit utiliser la fonction de composant.
2 Bascules en mode Code (Affichage > Code).
3 Ouvrez le panneau Composants (Fenêtre > Composants), puis désisissez Composants CF dans le menu déroulant.
4 Recherche 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. Dreamweaver insere dans la page le code permettant d'appeler la fonction.
- Sélectionné la fonction dans le panneau et cliquez sur l'icone Insérer de la barre d'outils du panneau (deuxieme icône à 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, voir l'aide de ColdFusion dans Dreamweaver (Aide > Utilisation de ColdFusion).
6 Enregistrez la page (Fichier > Enregistrer).
<h1 id="chapitre-36-2">CHAPITRE 36</h1>
<h1 id="utilisation-des-services-web">Utilisation des services Web</h1>
Les services Web sont une nouvelle technologie permettant aux pages Web d'acceder à des applications distribuées. En offrant à la fois l'accès à des informations et à des fonctionnalités applicatives sous la forme d'un service, les services Web sont fournis et vendus en tant que flux de services auxquels il est possible d'acceder à partir de n'importe qu'elle plate-forme. La page Web qui se connecte au service Web s'appele généralement un consommateur tandis que le service même s'appele un fournisseur. Macromedia Dreamweaver MX vous permit de creator des pages et des sites qui sont consommateurs de services Web. Dreamweaver prend actuellement en charge la création de consommateurs de services Web à l'aide des types de documents ColdFusion, ASP.NET et JSP (Java Server Pages). Plus particulièrement, Dreamweaver vous permit d'effectuer les tâches de développement de services Web suivantes :
- selectionner les services Web disponibles sur Internet ;
- créé 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 creez 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.
Avant de creer une page Web utilisant un service Web, vousdezvezvousfamiliariser avec la technologie de serveur sous-jacente de l'application que you souhaitezutiliser et avec les structures de programmation qu'elle requiert.
Dreamweaver you permit de réaliser des pages Web qui peuvent acceder à des services Web et exploiter la fonctionnalité de ces services. De plus, vous pouvezisser et publier des services Web à déployer à l'aide de Macromedia ColdFusion MX.
Ce chapitre contient les sections suivantes :
- « Description des services Web», page 586
- « Installation et configuration de générateurs de proxy», page 588
- « Ajout d'un proxy de services Web à l'aide de la description WSDL», page 590
- « Ajout d'un service Web à une page», page 592
- « Modification de la liste de sites des services Web UDDI», page 593
<h1 id="description-des-services-web">Description des services Web</h1>
Les services Web permettent aux applications de communiquer et de partager des informations via Internet, quels que soient le système d'exploitation et le langage de programmation utilisés. Voici quelques exemple de services Web, accompanies des informations et des fonctionnalités qu'ils offrent :
- authentication et autorisation des utilisateurs;
- validation de cartes de crédit;
- services pour les marchés financiers, qui reçoient le prix des actions assorted du symbol d'action spécifique;
- services d'achats qui permettent aux utilisateurs de commander et d'acheter 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.
En offrant la fonctionnalité d'un service auquel une page Web peut se connecter en fonction des besoin, les services Web procurent aux développpeurs et aux fournisseurs de services une plus grande liberté au niveau de la conception et du déploiement d'applications distribuées puissantes.
<h1 id="composants-dun-service-web">Composants d'un service Web</h1>
Les services Web sont constitués des composants de base suivants :
- Les fournisseurs de services proposent des applications hébergées et les mettent à disposition des utilisateurs. Les services Web peuvent être Gratis ou payants sur forbait.
- Les courtiers de services administrant un annuaire de fournisseurs de services incluant la description des offres de services et des liens vers leurs applications.
- Les consommateurs de services sont les pages Web qui accèdent aux services Web distants et qui les utilisent.
<h1 id="recherche-de-fournisseurs-de-services-web">Recherche de fournisseurs de services Web</h1>
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'acceder à son service Web par l'intermédiaire d'un annuaire Web qui gère un réseau des services auxquels vous pouvez acceder. Voici quelques-uns des sites Web (en angeis) qui fournissant ce genre d'annuaire :
X Methods à l'adresse http://www.xmethods.net
- IBM Business Registry à l'adresse http://www-3.ibm.com/services/uddi/protect/registry.html
- 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 seprésenter et déscriè les biens ou services qu'elles ont à offrir aux autres entreprises. L'administration de l'annuitaire s'effectue par un groupe de sociétés appelées opérateurs. Les opérateurs s'engage à 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 Specification UDDI repose sur les normes Internet existantes pour garantir qu'elle est independante des diverses plates-formes et mises en œuvre.
<h1 id="composants-logiciels-des-services-web">Composants logiciels des services Web</h1>
Pour qu'une page Web puisse acceder à 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'établier la description XML du service. Chaque service Web fournit un WSDL qui déscrit 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é par le service Web au moment de l'opération.
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). Il s'agit d'un protocole XML qui permet à un client Web d'acceder aux méthodes et paramètres du service Web et de les appeler.
<h1 id="informations-et-specifications-des-services-web">Informations et specifications des services Web</h1>
Pour plus d'informations sur les services Web et les technologies sous-jacentes qui leurs sont associées, visitez les sites Web suivants :
- Spécification WSDL à l'adresse http://www.w3.org/TR/wSDL
- Spécification UDDI à l'adresse http://www.uddi.org/specification.html
- Spécification XML à l'adresse http://www.w3.org/TR/REC-xm1
- Spécification SOAP à l'adresse http://www.w3.org/TR/SOAP/
<h1 id="déroulement-du-travail-des-services-web-dans-dreamweaver">Déroulement du travail des services Web dans Dreamweaver</h1>
Pour creer a l'aide de Dreamweaver une page ou un site qui utilise un service Web, vous nevez suivre la procedure ci-dessous :
1 Installez un générateur de proxy et configurez-le.
Les générateurs de proxy créé 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 WSDL qui déscrit le service Web. Selon la technologie de serveur pour laquelle vous souhaitez développper 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.
Dans Dreamweaver, AXIS, le générateur de proxy Apache SOAP qui prend en charge le développement de services Web JSP, est préconfigured. Pour le développement de pages ColdFusion 6, le générateur de proxy de services Web est inclus dans le serveur ColdFusion. En établissant une connexion au serveur ColdFusion, vous pouvez acceder 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.
Pour des informations sur l'installation et la configuration d'un générateur de proxy non livre avec Dreamweaver, voir « Installation et configuration de générateurs de proxy», page 588.
2 A l'aide d'un navigateur, affichez un annuaire de services Web.
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 convennent à leurs besoin. A l'aide d'UDDI, vous pouvez, par exemple, spécifique certains criteres, tels que le prix le plus bas pour un service particulier ou le renvoi de certaines informations.
3 ÀpRES avoir trouvez et sélectionné le service Web qui vous convient, saisissez l'URL du WSDL dans la boite de dialogue Ajouter un service Web.
4 A partir de la description WSDL du fournisseur de services, créez un proxy pour le service Web. Pour incorporer un service Web à une page Web, vous doivent creer un proxy. Le proxy fournit à la page Web les informations nécessaires pour communiquer avec le service Web et lui permet d'acceder aux méthodes fournies par le service Web.
Pour creer un proxy a partir du filchier WSDL, utilisez un generateur de proxy. Une fois le proxy create, vous pouze l'installer sur l'un des postes suivants:
- ordinateur local sur lequel vous développpez le consommateur de services Web ;
- ordinateur serveur exécutant le serveur d'application. Pour déployer une page Web et établier la communication avec le fournisseur du service Web, vous doivent installer le proxy sur le serveur.
5 A l'aide de Dreamweaver, ajoutez le service Web à une page et modifiez les paramètres et méthodes de façon à rendre la fonctionnalité du service opérationnelle.
Pour plus d'informations, voir « Ajout d'un service Web à une page », page 592.
<h1 id="installation-et-configuration-de-générateurs-de-proxy">Installation et configuration de générateurs de proxy</h1>
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, vous pouvez ajouter des générateurs de proxy qui prennten en charge les implémentations de services Web d'autres fournisseurs ou de nouvelles technologies de services Web. Cette section explique comment obtenir les générateurs de proxy et les configurer pour qu'ils fonctionnent avec Dreamweaver.
Pour plus d'informations sur AXIS, voir le site Web Apache AXIS à l'adresse : http:// xml.apache.org/axis/index.html.
<h1 id="obtention-de-générateurs-de-proxy-supplémentaires">Obtention de générateurs de proxy supplémentaires</h1>
Pour installer un générateur de proxy qui n'est pas livre 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.
Certaines générateurs de proxy créé des proxy qui dépendent d'autres bibliothèques de logiciels ; pour que le générateur de proxy puisse y acceder, 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 (notez que tous les composants logiciels nécessaires à l'utilisation de AXIS sont par défaut installés par Dreamweaver). Lorsque vous sélectionnez un générateur de proxy, consultez la documentation d'accompagnement et vérifie que vous disposez de l'ensemble des composants et bibliothèques de logiciels pour pouvoir les installerer 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 : à 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 executer le proxy de services Web et son environnement d'application.
Pour configurer un générateur de proxy pour qu'il fonctionne avec Dreamweaver :
1 Choisissez Fenetre > Composants de serveur pour ouvrir le panneau Composants de serveur.
2 Dans le panneau Composants de serveur, choisissez Services Web dans le menu dérounant figurant dans le coin supérieur gauche du panneau, puis cliquez sur le bouton plus (+) et selectionnez Ajouter à l'aide de WSDL.
La boîte de dialogue Ajouter à l'aide de WSDL s'affiche.
3 Dans la boîte de dialogue Ajouter à l'aide de WSDL,chosissez Modifier la liste des générateurs de proxy dans le menu déroulant Générateur de proxy. La boîte de dialogue Générateurs de proxy s'affiche.
4 Cliquez sur Nouveau, selectionnez un générateur de proxy dans le menu contextuel, puis cliquez sur Terminate.
Si le générateur de proxy à utiliser ne figure pas dans la liste,CHOISSEZ Générateur de proxy par défaut pour afficher la boite de dialogue correspondante.
5 La boîte de dialogue Générateur de proxy par défaut vous permet de configurer le générateur de proxy sélectionné ou d'en configurer un nouveau. Les zones de texte qui s'affichent dans la boîte de dialogue varient selon le générateur de proxy choisi. Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Pour des informations sur la façon de compléter les zones de texte de la boîte de dialogue, cliquez sur le bouton Aide de la boîte de dialogue.
6 Une fois que vous avez configuré les paramètres de la boîte de dialogue Générateur de proxy par défaut, cliquez sur OK.
Au cours de la lecture de 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 create un proxy de services Web à l'aide de l'environnement d'execution spécifique.
- Il compile le proxy à l'aide du compilerer spécifique.
- Il produit le code source du proxy et le proxy compile dans le dossier de destination spécifique.
<h1 id="ajout-dun-proxy-de-services-web-à-laide-de-la-description-wsdl">Ajout d'un proxy de services Web à l'aide de la description WSDL</h1>
Après avoir spécifique un générateur de proxy et configuré les modèles de serveur à prendre en charge, il vous faut couver un service Web qui fournit la fonctionnalité souhaïée et générer le proxy correspondant.
Pour sélectionner un service Web et générer un proxy à partir de son fichier WSDL :
1 Ouvrez la page à laquelle ajouter le service Web.
2 Choisissez Fenetre > Composants de serveur pour ouvrir le panneau Composants de serveur.
3 Dans le panneau Composants de serveur, choisissez Services Web dans le menu dérounant figurant dans le coin supérieur gauche du panneau, puis cliquez sur le bouton plus (+) et selectionnez Ajouter à l'aide de WSDL.
La boîte de dialogue Ajouter à l'aide de WSDL s'affiche.
4 Indiquez l'URL du fichier WSDL à utiliser.
Si vous connaissiez l'URL du filchier WSDL, saisissez-la dans la zone de texte URL du filchier WSDL.
Dans le cas contraire, naviguez jusqu'au repertoire des services Web. Une fois que vous avez trouvez le service Web qui vous interesse, copiez et collez l'URL correspondante dans la zone de texte WSDL. Pour lancer un navigator Web, cliquez sur le bouton Navigateur UDDI, puis selectionnez l'un des annuaires de services Web. Le navigator se lance et l'annulaire selectionné s'ouvre. Recherche le service Web à utiliser, puis copiez l'URL de son fjichier WSDL dans le Presse-papiers (Ctrl+C sous Windows ou Commande+C sous Macintosh). Revenez au selector des services Web et copiez l'URL dans la boîte de dialogue.
Voupez 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. Pour plus d'informations, voir « Modification de la liste de sites des services Web UDDI », page 593.
5 Dans le menu dérouulant Générateur de proxy, Sélectionnez un générateur de proxy prénant en charge le modele de serveur des services Web souhaité.
Assurez-vous que le générateur de proxy est installé et configuré sur le système. Pour plus d'informations, voir « Installation et configuration de générateurs de proxy», page 588.
6 Cliquez sur OK.
Le générateur de proxy create 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'intémediaire de Dreamweaver.
Le service Web peut désormais être utilisé dans le site et s'affiche dans le panneau Composants de serveur.
<h1 id="ajout-dun-service-web-à-une-page">Ajout d'un service Web à une page</h1>
Après avoir sélectionné un service Web, géné ré son proxy et ajoute ce dernier au panneau Composants de serveur, vous pouvez l'insérer dans une page. Dans l'illustration ci-dessous, le proxy de services Web Helloworld a été ajoute au panneau Composants de serveur. Le proxy Helloworld fournit une méthode, sayHello, qui imprime le message « Hello World! »
Les exemples ci-dessous permettent de lancer le service Web HelloWorld à l'aide de ColdFusion. Pour plus d'informations sur la création d'un service Web et pour consulter autres exemples utilisant .NET et JSP, visitez le site du centre de support de Macromedia à l'adresse suivante : http://www.macromedia.com/go/creating_web_services.
<h1 id="pour-ajouter-un-service-web-à-une-page">Pour ajouter un service Web à une page :</h1>
1 Dan la fenêtre de document, passes en mode Code, puis faites glisser la méthode sayHello sur le code HTML.
La méthode et les paramètres fictifs s'ajoutent à la page.
2 Modifie le code inséré en utilisant les noms d'instances de service, les types de données et les valeurs de paramètre qui convennent au service Web. Le service Web devrait fournir des descriptions des types de données et des valeurs de paramètre.
Dans l'exemple ColdFusion ci-dessous, le service Web est place 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>.
<pre><code class="language-html"><html>
<head>
<title>Web Service</title>
<meta http-equiv="Content-Type" content="text/html; charset iso-8859-1">
</head>
<cfmvoke>
webservice="http://velcro-ra-7:8100/helloworld/HelloWorld.cfc?wsdl"
method="sayHello"
returnvariable="aString">
</cfmvoke>
</body>
</html>
</code></pre>
3 Si vous souhaitez 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'élement 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 service Web says: Hello world! » s'affichera sur la page.
<pre><code class="language-html"><html>
<head>
<title>Web Service</title>
<meta http-equiv="Content-Type" content="text/html; charset iso-8859-1">
</head>
<cfmvoke>
webservice="http://velcro-ra-7:8100/helloworld/HelloWorld.cfc?wsdl"
method="sayHello"
returnvariable="aString">
</cfmvoke>
The web service says: <cfoutput>#aString#/<cfoutput>
</body>
</html>
</code></pre>
4 Lorsque vous déployez des pages Web sur un serveur de production, Dreamweaver copie automatiquement les pages, le proxy et les bibliothèques requisés sur le serveur Web.
Remarque: si vous développpez 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, prenez garde à bien déployer le proxy et tout fichier de bibliothèque associé. Dans le cas contraire, vos pages ne pourront pas communiquer avec l'application de service Web.
<h1 id="modification-de-la-liste-de-sites-des-services-web-uddi">Modification de la liste de sites des services Web UDDI</h1>
Le sélecteur des services Web fournit une liste d'annuaires de services Web UDDI à partir desquels vous pouvez selectionner des services Web. Vous pouvez modifier cette liste en ajoutant ou en modifient des annuaires de services Web.
<h1 id="pour-modifier-la-liste-des-sites-de-services-web">Pour modifier la liste des sites de services Web :</h1>
1 Dans Dreamweaver,CHOISSEZ Fenetre > Composants pour ouvrir le panneau Composants.
2 Dans le panneau Composants, choisissez Services Web dans le menu dérouulant figurant dans le coin supérieur gauche du panneau, puis cliquez sur le bouton plus (+) pour ajouter un service Web.
La boîte de dialogue Ajouter à l'aide de WSDL s'affiche.
3 Dans le selector des services Web, cliquez sur l'icone en forme de globe, puis choisissez Modifier la liste des sites UDDI dans le menu contextual.
La boîte de dialogue Sites UDDI s'affiche.
4 La boîte de dialogue Sites UDDI vous permet d'ajouter de nouveaux sites de services Web, de modifier le nom et l'URL de sites existants et de supprimer les sites superflus.
Pour supprimer un site existant, Sélectionnez le site concenné dans la liste, puis cliquez sur le bouton Supprimer. Pour ajouter un nouveau site ou modifier un site existant, cliquez sur le bouton Nouveau ou Modifier, puis complétez la boîte de dialogue ci-dessous.
<h1 id="chapitre-37-2">CHAPITRE 37</h1>
<h1 id="ajout-de-comportements-de-serveur-personnelisés">Ajout de comportements de serveur personnelisés</h1>
Dreamweaver MX 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 creer de nouveaux comportements de serveur en fonction de vos besoin spécifiques ou en télécharger depuis le site Web de Macromedia Exchange.
Ce chapitre contient les sections suivantes :
- « Installation de comportements de serveur supplémentaires», page 595
- « Création de comportements de serveur», page 596
- « Modification d'un code de comportement de serveur», page 609
<h1 id="installation-de-comportements-de-serveur-supplémentaires">Installation de comportements de serveur supplémentaires</h1>
De nombreux partenaires de Macromedia et développateurs indépendants créé des comportements de serveur personalisés pour répondre à des besoin précis en matière de développement de sites Web. Vous pouvez y acceder et les télécharger depuis le site Web de Macromedia Exchange pour Dreamweaver.
Les comportements de serveur et les autres extensions disponibles sur le site Web de Macromedia Exchange vous permettent d'ajouter aisément des fonctions à Dreamweaver. Chaque comportement de serveur inclut une description concise, l'avis d'utilisateurs et un forum de discussion où vous pouvez poser vos questions et obtenir de l'aide relative aux comportements que vous téléchargez.
<h1 id="pour-acceder-à-macromedia-exchange">Pour acceder à Macromedia Exchange :</h1>
1 Dans Dreamweaver MX, choisissez Aide > Dreamweaver Exchange.
Le navigateur ouvre alors la page Web de Macromedia Exchange pour Dreamweaver.
2 Connectez-vous à Exchange en utilisant votre ID Macromedia personnel ou, si vous ne l'avez pas encore créé, suivez les instructions d'ouverture d'un compte Macromedia.
Remarque : vous pouvez également acceder à Macromedia Exchange à partir du panneau Comportements de serveur (Fenêtre > Comportements) en cliquant sur le bouton plus (+) puis enCHOISIGANT Obtenir d'autres comportements de serveur.
Pour installer un comportement de serveur ou une autre extension dans Dreamweaver :
1 Démarrez Extension Manager en choisisant Aide > Gérer les extensions.
2 Choisissez Fichier > Installer un paquet dans Extension Manager.
Pour plus d'informations, voir l'aide en ligne d'Extension Manager.
<h1 id="création-de-comportements-de-serveur">Création de comportements de serveur</h1>
Si vous étés développur et que vous maîtrisez la technologie ColdFusion, ASP.NET, JavaScript, VBScript, PHP ou Java, vous pouvez rédigier vos propres comportements de serveur. La création d'un comportement de serveur implique les opérations suivantes :
- Réduction d'un ou de plusieurs blocs de code exécutant l'action requise.
Pour plus d'informations sur la creation de comportements de serveur à l'aide du Créateur de comportements de serveur de Dreamweaver, voir « Utilisation du Créateur de comportements de serveur », page 596. Pour plus d'informations sur la syntaxe reconnaue par les comportements de serveur Dreamweaver, voir «Réduction de blocs de code », page 599.
- Indication de l'endetroit où le bloc de code doit être inséré dans le code source HTML de la page. Pour plus d'informations sur le positionnement des blocs de code dans une page, voir « Positionnement des blocs de code», page 605.
- Si le comportement de serveur requiert que la valeur d'un paramètre soit spécifiée, création d'une boîte de dialogue invitant le développement Web qui applique le comportement à fournir la valeur appropriée.
Pour plus d'informations sur la saisie de valeurs de paramètre pour un comportement de serveur à l'aide d'une boîte de dialogue, voir « Création d'une boîte de dialogue spécifique à un comportement de serveur personnelisé », page 607.
- Test du comportement de serveur avant de le rendre disponible à d'autres utilisateurs.
Pour des instructions générales sur le test des comportements de serveur, voir « Test des comportements de serveur», page 609.
<h1 id="utilisation-du-créateur-de-comportements-de-serveur">Utilisation du Créateur de comportements de serveur</h1>
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.
Pour rédiger des blocs de code spécifique à un comportement de serveur :
1 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton plus (+) etCHOISSEZ Nouveau comportement de serveur dans le menu contextual.
2 La boîte de dialogue Nouveau comportement de serveur s'affiche.
3 Dans le menu déroulant Type de document, Sélectionnez le type de document pour lequel vous développpez le comportement de serveur.
4 Dans la zone de texte Nom, tapez le nom du comportement de serveur.
5 Si vous souhaitez copier un comportement de serveur existant pour l'ajouter au comportement en cours de creation, activez la case à cocher Copier un comportement de serveur existant.
Une fois cette case activée, la liste des comportements de serveur disponibles s'affiche dans le menu déroulant Comportement à copier.
6 Cliquez sur OK.
La boîte de dialogue Créateur de comportements de serveur s'affiche.
7 Pour ajouter un autre bloc de code, cliquez sur le bouton plus (+). La boîte de dialogue Créer un nouveau bloc de code s'affiche.
8 Tapez le nom du bloc de code à créé.
9 Dans la zone de texte Bloc de code, tapez le code nécessaire pour implémenter le comportement de serveur. Vous ne pouvez insérer dans cette zone qu'une seule balise ou un seul bloc de code. Si vous souhaitez saisir plusieurs balises ou blocs de code, vous doivent creer un bloc de code pour chaque élément dans la boite de dialogue Créateur de comportements de serveur.
10 Si le comportement de serveur requiert des paramètres d'exécution, vous pouvez les inclure dans le code en cliquant sur le bouton Insérer paramètre dans bloc de code. La boîte de dialogue Insérer paramètre dans bloc de code s'affiche.
11 Dans le menu déroulant Nom de paramètre, tapez le nom des paramètres, puis cliquez sur OK. Le paramètre vient s'insérer dans le bloc de code au niveau du point d'insertion créé par le curseur avant la définition du paramètre.
12 Dans le menu dérouulant Insérer code,CHOISSEZ une option indiquant l'endetroit où incorpore les blocs de code.
Pour plus d'informations, voir « Positionnement des blocs de code», page 605.
13 Vous pouvez préciser des informations supplémentaires sur le serveur en cours de création dans le panneau d'options Avancé.
Cliquez sur le bouton Avancé pour afficher les options correspondantes.
Identificateur indique si le bloc de code doit ou non estraite comme un identificateur.
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 la case à cocher 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. Un bloc de code ne doit pas être un identificateur si ce même bloc de code est utilisé par un autre comportement de serveur ou s'il fournit une fonctionnalité courante qui se produit naturellement dans une page.
Titre du comportement de serveur indique le titre du comportement tel qu'il apparait dans le panneau Comportements de serveur.
Lorsque le concepteur de la page clique sur le bouton plus (+) du panneau Comportements de serveur, le titre du nouveau comportement s'affiche dans le menu contextual. 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 le champ Titre du comportement de serveur, spécifie le contenu du menu contextual 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 de serveur. A mesure que les paramètres sont définis, le nom est automatiquement mis à jour : les paramètres apparaissent entre parentheses 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 contextual 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 à selectionner indique le bloc de code selectionné lorsque l'utilisateur désits le comportement dans le panneau Comportements de serveur.
Lorsque vous appliquez un comportement de serveur, l'un de ses blocs de code est désigné comme étant le « bloc de code à sélectionner ». Si vous appliquez le comportement de serveur puis que vous le sélectionnez dans le panneau Comportements de serveur, Dreamweaver sélectionnement automatiquement le bloc désigné 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 http1. Si tous les blocs de code se trouvent au-dessus de la balise http1, Dreamweaver sélectionne le premier. Les utilisateurs chevronnés peuvent indiquer le bloc de code devant être sélectionné.
14 Si vous doivent accorder davantage de blocs de code, repérez les étapes 7 à 13 applicables.
15 Si le comportement de serveur requiert que des paramètres lui soient fournis, vous doivent créé une boîte de dialogue qui accepte les paramètres de la personne appliquant le comportement. Pour creer une boîte de dialogue qui accepte les paramètres saisis par l'utiliseur, voir « Création d'une boîte de dialogue spécifique à un comportement de serveur personnelisé », page 607.
16 Àprouvavoivisétapésci-dessusapplicableaucomportementde serveurencours de creation,cliquez surOK.
Une fois un comportement de serveur créé, il apparait dans la liste du panneau Comportements de serveur. Testez-le pour vous assurer qu'il fonctionne correctement.
Pour plus d'informations, voir :
- «Réduction de blocs de code», page 599
- « Utilisation de paramètres dans des comportements de serveur », page 600
- « Création de blocs de code conditionnels», page 601
- « Répetition des blocs de code», page 602
- « Instructions pour le codage», page 604
- « Positionnement des blocs de code», page 605
<h1 id="réduction-de-blocs-de-code">Réduction de blocs de code</h1>
Les blocs de code ajoutés dans le Créateur de comportements de serveur sont encapsulés dans un comportement de serveur qui est répertorié dans le panneau Comportements de serveur. Le code peut correspondre à tout code d'execution conforme au modele de serveur spécifique. Si vous désissiez 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.
<h1 id="saisie-de-blocs-de-code">Saisie de blocs de code</h1>
Voupez creer les blocs de code soit directement depuis le Createur de comportements de serveur, soit en les copiant et les collant depuis d'autres sources. Chaque bloc de code ajouté dans le Createur de comportements de serveur doit representier une balise ou un bloc de script unique. Si vous nevez insérer plusieurs blocs de balise, divisez-les en blocs de code distincts.
<h1 id="inclusion-de-paramètres">Inclusion de paramètres</h1>
Vou puez inclure des parametes dans un code d'execution, puis laisser le soin au concepteur de la page d'en fournir les valeurs. Pour ce faire, saisissez des marqueurs de parametre dans le code, comme indiqué ci-dessous:
@@parameterName@@
Pour plus d'informations, voir « Utilisation de paramètres dans des comportements de serveur », page 600.
<h1 id="application-de-conditions-et-répétition-d-éléments-dans-des-blocs-de-code">Application de conditions et répétition d' éléments dans des blocs de code</h1>
Si vous souhaitez qu'un bloc de code ou une partie de celui-ci ne s'exécut que si certaines conditions sont remplies, utilisez la syntaxe suivante :
< @ if (expression1) @> code block1
[<@elseif(expression2） @> code block2]\*
[<@else @> code block3]
</@endif @>
Les crochets ([ ]) indiquent que le code est facultatif, alors que l'astérisque (*) signale qu'il existe zéro occurrence ou davantage. L'expression de la condition doit correspondre à une expression JavaScript valider et peutContainir des paramètres de comportement de serveur. Pour plus d'informations, voir « Création de blocs de code conditionnels», page 601.
Si vous souhaitez repeter un certain nombre de fois le bloc de code ou une partie de celui-ci, utilisez la syntaxe suivante :
<pre><code class="language-txt"><@ loop (@param1@@, @param2@@) @>
code block
<@ endloop @>
</code></pre>
La directive de boucle (loop) comporte des arguments se presentaient sous la forme d'une liste de tableaux de paramètre séparés par des virgules. 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 énième évaluation de la boucle, les énièmes éléments des tableaux de paramètre replacent les occurrences du paramètre correspondant dans le bloc de code. Pour plus d'informations, voir « Répétable des blocs de code», page 602.
Pour des informations générales sur le codage, voir « Instructions pour le codage», page 604.
<h1 id="utilisation-de-paramètres-dans-des-comportements-de-serveur">Utilisation de paramètres dans des comportements de serveur</h1>
Vou puevez inclure des paramètres dans le code d'un comportement de serveur et laisser le soin au concepteur de la page d'en fournir les valeurs avant d'insérer le code du comportement dans la page. Pour ce faire, saisissez des marqueurs de paramètre dans le code, comme indiqué ci-dessous :
<pre><code class="language-txt">@@parameterName@@
</code></pre>
Le comportement de serveur ASP pris comme exemple ci-dessous contient le paramètre formParam, qui demande à l'utilisateur (la personne insérant le comportement) de fournir le nom d'un objet de-formulaire :
<pre><code class="language-asp"><% Session("lang_prefix") = Request.Form("formParam"); %>
</code></pre>
<h1 id="pour-creer-un-parametre-qui-demane-a-lutiliseur-de-fournir-la-valeur-necessaire">Pour creer un parametre qui demane a l'utiliseur de fournir la valeur necessaire :</h1>
1 Insérez la chaine formParam entre des marqueurs de paramètre :
<pre><code class="language-asp"><% Session("lang suf") = Request.Form("@@param@"); %>
</code></pre>
2 Creez une boite de dialogue qui invite le concepteur à fournir le nom de l'objet de formulaire. Pour plus d'informations, voir « Création d'une boite de dialogue spécifique à un comportement de serveur personnelisé», page 607.
<h1 id="creation-de-blocs-de-code-conditionnels">Creation de blocs de code conditionnels</h1>
Dreamweaver yous permit de creer des blocs de code contenant des instructions de controle a execution conditionnelle. Le Createur de comportements de serveur utilise des instructions if, elseif et else et peut containir des parametres de comportement de serveur. Cela yous permit d'inserer plusieurs blocs de texte secondaire selon les valeurs des relations OR entre les parametres de comportement de serveur. Les instructions if, elseif et else apparaissent comme indiqued cidesous. Notez que les crochets ([ ]) indiquent que le code est facultatif, alors que l'astérisque (*) signale qu'il existe zéro occurrence ou davantage :
<pre><code class="language-objectivec"><@if（expression1）@> conditional text1
[<@elseif（expression2）@> conditional text2]*
[<@else@> conditional text3]
</endif>
</code></pre>
Les expressions de condition peuvent correspond à 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 de a commercial (@). Ces symboles sont nécessaires pour désigner le paramètre des variables et mots-clés JavaScript.
Voussoupiezimbriquerautantde directives conditionnellesoudebouclequeyoulseuhaitez (voir « Repetition des blocs de code »,page 602) au sein d'une meme directive conditionnelle. Ainsi pouvez-vous préciser,par exemple,que si une expression est vraie,la boucle doit etre executee.
Remarque: les nouvelles lignes situées après chaque éléments « @» sont ignorées.
<h1 id="utilisation-efficace-des-expressions-conditionnelles">Utilisation efficace des expressions conditionnelles</h1>
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éten l'expression comme un argument. L'expression de condition est identique aux expressions de condition JavaScript et peut également contérer des paramétres de comportement de serveur. Les directives de ce type vous permettent d'effectuer un besoin 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 MX utilisant le bloc de code conditionnel :
@@rsName@@.close(); <conditional_code> @@@rsName@@_hasData = @@@rsName@@.next();
Si le comportement de serveur utilise un jeu d'enregistements normal, l'espace réservé <conditional_code> est alors remplaced par :
<pre><code class="language-txt">@@rsName@@ = Statement@@rsName@@.executeQuery();
</code></pre>
Par contre, si le comportement de serveur utilise un jeu d'enregistrements provenant d'un objet appellable, il a recours au code suivant :
<pre><code class="language-txt">@@callableName@@.execute();
@@rsName@@ = @@callableName@@.getResultSet();
</code></pre>
Si le comportement de serveur est ajouté à un objet appellable, l'utilisateur doit saisir une valeur pour le paramètre @@callableName@@ dans la boîte de dialogue Paramètre spécifique au comportement de serveur. Dans le cas contraire, le paramètre @@callableName@@ reste vide. Vous pouvez donc reprenevre le texte d'insertion ci-dessus en utilisant le paramètre @@callableName@@ comme argument if. Dans cet exemple, le paramètre @@callableName@@ est fourni avec une valeur et le premier bloc de code conditionnel (qui contient la méthode getResultSet()) est selectionné:
<pre><code class="language-txt">@@rsName@@.close();
<@if (@@@callableName@@ != '') @>
@@callableName@@.execute();
@@rsName@@ = @@@callableName@@.getResultSet(); @ else @>
@@rsName@@ = Statement@@rsName@@.executeQuery();
<@endif @>
@@rsName@@_hasData = @@@rsName@@.next();
</code></pre>
<h1 id="répartition-des-blocs-de-code">Répartition des blocs de code</h1>
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. La syntaxe de la boucle est :
<pre><code class="language-txt"><@ loop (@@param1@@, @@param2@@, @@param3@@, @@param_n@@) @>
code block
<@ endloop @>
</code></pre>
La directive de boucle accepte des arguments se presentaient 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 énième évaluation de la boucle, les énièmes éléments des tableaux de paramètre replacent les occurrences du paramètre correspondant dans le bloc de code.
Plus tard, lorsque vous créées la boîte de dialogue du comportement de serveur (voir « Création d'une boîte de dialogue spécifique à un comportement de serveur personnelisé», page 607), vous pourez ajouter une commande à la boîte de dialogue pour permettre au concepteur de la page de créé des tableaux de paramètre. Dreamweaver inclut une commande de tableau simple que vous pouze utiliser pour créé 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. Pourcréer des éléments d'interface utilisateur plus complexes et apprendre à conceiveir une boîte de dialogue contenant une commande de création de tableaux (commande de grille, par exemple), voir la documentation API.
Il est impossible d'imbriquer des directives de boucle, mais il est possible d'imbriquer des directives conditionnelles (voir « Création de blocs de code conditionnels », page 601) au sein d'une directive de boucle.
L'exemple suivant montre comment utiliser des blocs de code répétitifs pour créé des comportements de serveur (cet exemple correspond à un comportement ColdFusion permettant d'acceder à une procedure stockée):
<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>
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 creer un comportement de serveur sans la directive de boucle, il vous faudrait le diviser en deux participants : une balise CFSTOREDPROC principale et une balise CFPROCPARAM dont le type de participant serait multiple.
Avec la directive de boucle, il est possible de rédigier cette même procédure comme suit :
<pre><code class="language-txt"><CFSTOREDPROC procedure="@@procedure@@"
datasource=#MM@@conn@@DSN#
username=#MM@@conn@@USERNAME#
password=#MM@@conn@@DATABASE#>
@ loop (@paramName@@,@@value@@,@@type@@) @>
<CFPROCPARAM type="IN"
dbvarname="@@paramName@@"
value="@@value@@"
cfsqltype="@@type@@"
</endloop @>
</CFSTOREDPROC>
</code></pre>
Dans l'exemple ci-dessus, comme dans le cas des blocs de code conditionnels, les nouvelles lignes venant après chaque élément @> sont ignorées.
Supposons que l'utilisateur ait saisi les valeurs de parametre suivantes dans la boite de dialogue du comportement de serveur :
procedure = "proc1"
conn = "connection1"
paramName = ["@CategoryId", "@Year", "@ISBN"]
value = ["#Form CategoryId#", "#Form. Year#", "#Form.ISBN#" ]
type = ["CF_SQL_INTERGER", "CF_SQL_INTERGER", "CF_SQL_VARCHAR"]
Le comportement de serveur insereerait alors le code d'exécution suivant dans la page :
<pre><code class="language-txt"><CFSTOREDPROC procedure="proc1"
datasource=#MM_connection1_DSN#
username=#MM_connection1_USERNAME#
password=#MM_connection1_PASSWORD#>
<CFPROCPARAM type="IN" dbvname="@CategoryId" value="#Form CategoryId#"
csqltype="CF_SQL_INTEGER">
<CFPROCPARAM type="IN" dbvname="@Year" value="#Form Year#"
csqltype="CF_SQL_INTEGER">
<CFPROCPARAM type="IN" dbvname "@ISBN" value="#Form ISBN#"
csqltype="CF_SQL VARCHAR">
</CFSTOREDPROC>
</code></pre>
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.
<h1 id="utilisation-des-variables_length-et_index-de-la-directive-de-boucle">Utilisation des variables_length et_index de la directive de boucle</h1>
La directive de boucle comprend deux variables intégrées utilisables dans les conditions if incorporeées. Il s'agit des variables_length et_index. La variable_length se rapporte à la longueur des tableauxTraits par la directive de boucle, alors que la variable_index se rapporte à l'index actuel de la directive « loop » elle-même. Pour veiller à ce 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 de a commercial (@).
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 sorting qu'à la première iteration de la boucle (les guillemets fermants (“)) sont alors inclus et aucune virgule n'apparait à la dernière iteration de la boucle). Pour ce faire, vous pouvez utiliser la variable intégrée comme indiqué ci-dessous:
<pre><code class="language-objectivec"><@loop (@Import@@)@>
<@if(_index == 0)@>import="</endif>></endif>
<@endif @>
<@endloop>
</code></pre>
<h1 id="instructions-pour-le-codage">Instructions pour le codage</h1>
D'une façon générale, le code de votre comportement de serveur doit être compact et robuste. Les développpeurs d'applications Web sont très sensibles au code ajoute à leurs pages. Respectez les règles de codage généralement appliquées pour le langage du type de document concenné (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éveloppement d'applications Web. Incluez des commentaires précis dérivant le but du code et ajoutez toutes les instructions utiles pour l'inclure dans une page.
<h1 id="contrôle-des-erreurs">Contrôle des erreurs</h1>
L'un des éléments indispensablees est le contrôle des erreurs. Le code du comportement de serveur doit être en mesure de traiter les cas d'erreur avec élegance. Essayez de prévoir toutes les éventualités. Exemple: Que se passé-t-il si une demande de paramètre échoue? Si aucun enregistrement n'est envoyé suite à une requête?
<h1 id="utilizez-des-noms-uniques">Utilizez des noms uniques</h1>
Votre code doit être clairément identifiable ; évitez d'employer un nom déjà utilisé pour du code existant, car cela pourrait être source de conflicts. 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'entrée en conflit avec le code existant.
<h1 id="creez-un-préfixe-pour-les-fonctions-et-les-variables-globales">Creez un préfixe pour les fonctions et les variables globales.</h1>
Créez votre propre préfixe pour les fonctions et variables globales d'exécution que vous insérez dans une page. Une convention consiste à employerer vos propres initiales. N'utilissez jamais le préfixe MM_: il est exclusivement réservé à l'usage de Macromedia. Macromedia fait précédeder toutes les fonctions et variables globales du préfixe MM_ pour les empêcher d'entrer en conflit avec votre code.
<pre><code class="language-txt">var MM_ERROR_STRING = "....";
fonction MM.HideLayer() {
</code></pre>
<h1 id="evitez-les-blocs-de-code-similaires">Evitez les blocs de code similaires</h1>
Veillez à ce que le code de vos blocs 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.
<h1 id="positionnement-des-blocs-de-code">Positionnement des blocs de code</h1>
Après avoir rédigé des blocs de code dans le Créateur de comportements de serveur, vous devez préciser l'endetroit où les insérer dans le code source HTML de la page.
Dans le menu dérouulant Inséorer code,CHOISSEZ d'insérer le bloc de code au-dessus de la balise <htm1> d'ouverture, au-dessous de la balise </htm1> de fermeture, par rapport à une autre balise de la page ou par rapport à une balise sélectionnée par le créateur de la page.
Pour placer un bloc de code au-dessus de la balise <html>:
1 Dans le menu dérouulant Inséorer code,CHOISSEZ l'option Au-dessus de la balise<html>.
2 Precisez l'emplacement youlu au-dessus de la balise enCHOIsnant une option dans le menu deroulant Position relative.
Voussupouvrezinsererleblocaudebutdufichier,immmediatementavantouapreslesblocdecode qui ouvrent lesjeux d'enregistements ouimmmediatement au-dessus de la balise<htm1>.Vouspouvzégalementindiquer une positionpersonnalisée.
3 Pour ce faire, choisissez Position personnalisée dans le menu dérouulant Position relative, puis attribuée une épaissur au bloc de code.
Dreamweaver attribue une épaissur de 50 à tous les blocs de code d'ouverture de quelques d'enregistrement insérés au-dessus de la balise <htm1>. Si plusieurs blocs ont la même épaissur, Dreamweaver les classe de façon aléatoire.
Utilisez l'option Position personalisée lorsque vous voulez insérer plusieurs blocs de code dans un ordre particulier. Par exemple, si vous voulez insérer, dans un certain ordre, une série de trois blocs de code après les blocs de code qui ouvrent des jours d'enregistements, saisissez une épaissieur de 60 pour le premier bloc, de 65 pour le deuxième et de 70 pour le troisième.
Pour positionner un bloc de code au-dessous de la balise </html> de fermeture :
1 Dans le menu dérouulant Inséorer code,CHOISSEZ l'option Au-dessous de la balise</html>
2 Precisez l'emplacement voulu au-dessous de la balise enCHOISANT une option dans le menu deroulant Position relative.
Voussupiezinsererleblocimmadiatementapresla balise</htm1>，immmediatementavant ou apresles blocsdecodefermantdesjeuxd'enregistementsouimmadiatementvantla fin du fichier.Vousoupiezeguallyindiquer une positionpersonnalisede.
3 Pour ce faire, choisissez Position personnalisée dans le menu dérouulant Position relative, puis attribuée une épaissur au bloc de code.
Dreamweaver attribute une épaissur de 50 à tous les blocs de code de fermeture de juste d'enregistrement insérés en dessous de la balise < / htm> . Si plusieurs blocs ont la même épaissur, Dreamweaver les classe de façon aléatoire.
Utilisez l'option Position personnalisée lorsque vous voulez insérer plusieurs blocs de code dans un ordre particulier. Par exemple, si vous voulez insérer, dans un certain ordre, une série de trois blocs de code avant les blocs de code fermant des jours d'enregistrement, saississez une épaissieur de 30 pour le premier bloc, de 35 pour le deuxième et de 40 pour le troisième.
Pour positionner un bloc de code par rapport à une autre balise de la page :
1 Dans le menu dérouulant Insérer code,CHOISSEZ Relatif à une balise spécifique.
2 Dans la zone de texte Balise, saisissez la balise ou selectionnez-en une dans le menu déroulant.
Ne tapez pas les crochets de la balise ( )
3 Spectoriez un emplacement relatif à la balise enCHOIsissant une option dans le menu deroulant Position relative.
Voussupouvrezinserervoretdecodeimmediatementavantouapreslesbalisesd'ouverture ou defermeture.Vousoupouvzegalementreplacerralabiseparlecode,insereerel code comme valeur d'un attribut de la balise (un champ apparait pour vous permettre dechosir cet attribut) ouinserelecodea l'intérieurde la balise d'ouverture.
Pour positionner un bloc de code par rapport à une balise sélectionnée par le creator de la page :
1 Dans le menu dérouulant Inséorer code,CHOISSEZ Relatif à la seLECTION.
2 Spécifiez un emplacement relat à la sélection enCHOISIGANT une option dans le menu déroulant Position relative.
Voussupouvrezinserervoretdblocdecodeimmediatementavantouapreslaselection.Vousoupouvzegentiallyremplacera laselectionparvoitrbacdecodeourenvoyerleblocdecodea la ligneautourde laselection.
Pour renvoyer le bloc de code à la ligne autour d'une seLECTION, cette dernière doit se composer d'une balise d'ouverture et d'une balise de fermeture juxtaposees, comme indiqué ci-dessous:
<CFIF Day="Monday"></CFIF>
La balise d'ouverture du bloc de code s'insere avant la balise d'ouverture de la seLECTION et sa balise de fermeture après la balise de fermeture de la selection.
<h1 id="creation-dune-boîte-de-dialogue-spécifique-à-un-comportement-de-serveur-personnelisé">Creation d'une boîte de dialogue spécifique à un comportement de serveur personnelisé</h1>
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. Vous pouvez creer à cette fin une boîte de dialogue invitant la personne qui implémente le comportement de serveur à fournir une valeur de paramètre.
Pour creer la boite de dialogue, definissez dans le code les parametes devant etre fournis par le concepteur. Une fois tous les parametes definis, vous pouze generer une boite de dialogue spécifique au comportement de serveur.
Remarque : un paramètre est ajouté à votre bloc de code sans votre intervention si vous spécifie que votre code doit être inséré par rapport à une balise précise chosesie par le creator 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 boite de dialogue du comportement pour permettre au creator de la page de besoinir une balise.
<h1 id="pour-creer-un-parametre-dans-le-code-du-comportement-de-serveur">Pour creer un parametre dans le code du comportement de serveur :</h1>
Saisissez un marqueur de paramètre à l'endetroit du code où vous souhaitez insérer la valeur du paramètre fournie par le concepteur. La syntaxe du paramètre est :
@@parameterName@@
Supposons que le comportement de serveur contienne le bloc de code suivant :
<pre><code class="language-asp"><% Session("lang_prefix") = Request.Form("Form_Object_Name"); %>
</code></pre>
Pour permettre au concepteur de la page de fournir la valeur du parametre Form_Object_Name, entoure la chaîne de marqueurs de paramètre (@):
<pre><code class="language-asp"><% Session("lang_prefix") = Request.Form("@@Form_Object_Name@@"); %>
</code></pre>
Vou puez e agement metre la chaine en surbrillance, puis cliquer sur le bouton Inserer le parametre dans le bloc de code. Tapez le nom du parametre, puis cliquez sur OK. Dreamweaver remplace chaque occurence de la chaine mise en surbrillance par le nom du parametre entoure 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 create une boîte de dialogue avec le libellé suivant :
Remarque: les noms des paramétres du code de comportement de serveur ne peuvent pas composer d'espaces. Aussi les libellés de la boîte de dialogue ne peuvent-ils pas non plus composer d'espaces. Pour inclure des espaces dans un libellé, vous doivent modifier le fichier HTML généré.
Pour creer une boite de dialogue de comportement de serveur :
1 Dans le Créateur de comportements de serveur, cliquez sur Suivant.
Une boîte de dialogue s'affiche, répertioriant tous les paramètres fournis par le creator que vous avez définis dans votre code.
2 Vous avez la possibilite de modifier l'ordre d'affichage des commandes de la boite de dialogue en selectionnant un parametre et en cliquant sur les flèches vers le bas et vers le haut.
3 Vous pouvez également modifier la commande d'un paramètre. Pour ce faire, Sélectionnez le paramètre et choisissez une autre commande dans la colonne Afficher comme.
4 Cliquez sur OK.
Dreamweaver génére une boîte de dialogue responsable une commande pour chacun des paramètres définis comme devant être fournis par le concepteur. Pour l'afficher, cliquez sur le bouton plus (+) du panneau Comportements de serveur (Fenêtre > Comportements de serveur), puis sélectionnez votre comportement de serveur dans le menu contextual.
Pour modifier la boîte de dialogue d'un comportement de serveur que vous avez créé :
1 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton plus (+) etCHOISSEZ Modifier le comportement de serveur dans le menu contextual.
2 Sélectionnez votre comportement de serveur dans la liste, puis cliquez sur Ouvrir.
Le Créateur de comportements de serveur s'affiche avec votre comportement de serveur.
3 Cliquez sur Suivant.
Une boîte de dialogue s'affiche, répertioriant tous les paramètres fournis par le creator que vous avez définis dans votre code.
4 Vous avez la possibilité de modifier l'ordre d'affichage des commandes de la boite de dialogue en selectionnant un paramètre et en cliquant sur les flèches vers le bas et vers le haut.
5 Vous pouvez également modifier la commande d'un paramètre. Pour ce faire, Sélectionnez le paramètre etCHOISSEZ une autre commande dans la colonne Afficher comme.
6 Cliquez sur OK.
<h1 id="test-des-comportements-de-serveur">Test des comportements de serveur</h1>
Macromedia Exchange you conseille de tester chacun des comportements de serveur que vous creez de la maniere 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 vide, de saisir des chiffres élevés ou négatifs ou des caractères non autorisés (nels que /, ?, :, *, etc.) ou d'entrée deslettres dans les champes numériques. Vous avez la possibilité de rédiger des 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érifie ce qui suit :
- Dans le panneau Comportements de serveur, vérifie que le nom du comportement s'affiche dans la liste des comportements ajustés à la page.
- Le cas échéant, vérifie que les iconônes de script côte serveur apparaisent sur la page. Les iconônes de script côte serveur génériques seprésentent sous la forme de blasons dorés. Pour voir ces iconônes, activez Éléments invisibles (Affichage > Assistances visuelles > Éléments invisibles).
- En mode d'affichage Code (Affichage > Code), vérifie qu'aucun code non valide n'a été génére.
En outre, si vous comportement de serveur insere 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érifie la connexion en définitant des requêtes produitant des yeux de données de différents types et de différentes tailles.
Enfin, chargez la page sur le serveur et ouvre-la dans un navigateur. Affichez le code source HTML de la page et vérifie qu'aucun HTML non valide n'a été généré par les scripts cote serveur.
<h1 id="modification-dun-code-de-comportement-de-serveur">Modification d'un code de comportement de serveur</h1>
Voupez modifier tout comportement de serveur cree a l'aide du Createur de comportements de serveur, y compris les comportements de serveur que vous avez telecharge depuis le site Web de Macromedia Exchange et d'autres developspeurs tiers.
Si vous appliquez un comportement à une page puis le modifiez dans Dreamweaver, les occurrences de l'ancien comportement disparaisent 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 connu du panneau change, le panneau ne reconnaître plus les versions antérieures du comportement sur la page.
Pour que les anciennes et les nouvelles versions du comportement s'affichent dans le panneau, cliquez sur le bouton plus (+) du panneau Comportements de serveur,CHOISSEZ NOUVEA comportement de serveur, puis creez une copie de l'ancien comportement.
<h1 id="modification-de-comportements-de-serveur">Modification de comportements de serveur</h1>
Pour modifier le 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 (+) etCHOISSEZ Modifier le comportement de serveur dans le menu contextualuel.
La boîte de dialogue Modifier le comportement de serveur s'affiche, répertioriant tous les comportements de la technologie serveur courante.
2 Sélectionnéz le comportement de serveur et cliquez sur Modifier.
La boîte de dialogue Créateur de comportements de serveur s'affiche.
3 Sélectionné le bloc de code approprié et modifie le code à insérer dans les pages.
4 Vous ave la possibite de modifier les marqueurs de parametre ou en ajouter de nouveaux au code.
Pour obtenir des instructions, voir « Création d'une boîte de dialogue spécifique à un comportement de serveur personnelisé», page 607.
5 Vous pouvez changer l'endetroit où le bloc de code est inséré dans le code source HTML de la page enCHOISIGANT une autre option dans le menu déroulant Insérer code.
Pour obtenir des instructions, voir « Positionnement des blocs de code », page 605.
6 Si le code modifie ne contient pas de paramètres fournis par le creator, cliquez sur OK.
Dreamweaver générale nouvelle fois le comportement de serveur sans boîte de dialogue. Le nouveau comportement de serveur s'affiche dans le menu contextual plus (+) du panneau Comportements de serveur.
7 Si le code modifie contient des paramètres fournis par le creator, cliquez sur Suivant.
Dreamweaver you demande si vous voulez creer une nouvelle boite de dialogue qui écrasera la précédente. Effectuez vos modifications, puis cliquez sur OK.
Dreamweaver enregistre tous les changements apportés dans le fichier EDML du comportement de serveur.
<h1 id="chapitre-38-2">CHAPITRE 38</h1>
<h1 id="creation-de-formulaires-interactifs">Creation de formulaires interactifs</h1>
Un formateur vous permet de réunir des informations provenant des visiteurs d'un site Web ou d'interagir avec eux. Les formulaires collectent des informations saisies par les utilisateurs et envoient ces informations au serveur pour qu'elles y soient traitées. Les formulaires peuvent containir divers objets qui permettent une interaction avec les utilisateurs. Les objets de formateur comprendn les champes de texte, les zones de liste, les cases a cocher et les boutons radio. La balise form inclut des parametes qui vous permettent de préciser le chemin d'accès au script ou à l'application cote serveur responsable du traitement des données du formateur ainsi que la méthode HTTP a utiliser pour transmettre les données du navigateur au serveur.
Lorsqu'un visiteur saisit des informations dans un-formulaire de site Web et clique sur le bouton d'envoi, les informations sont transmises au serveur ou une application ou un script cote serveur les traite. Le serveur repond en renvoyant à l'utiliser les informations demandées ou en executant une action déterminée par le contenu du formulaire. En général, les informations sont traitées par un script CGI (Common Gateway Interface), une page ColdFusion, JSP (Java Server Page) ou ASP (Active Server Page). Notez qu'il est impossible de recueillir des données de formulaire sans utilisation d'une application ou d'un script cote serveur quiTRAITE ces données.
Macromedia Dreamweaver MX you permit de creer une multitude d'objets de formulaire, tels que des champes de texte, des champes de mot de passer, des boutons radio, des cases à cocher, des menus contextuels ou des images « disponibles » (bouton Envoyer, par exemple).
Dreamweaver inclut également un comportement Validator le formulaire qui vérifie les informations fournies par un visiteur. Ainsi pouvez-vous vérifier, par exemple, qu'une adresselectronique contient bien un symbole de a commercial (@) ou qu'un champ obligatoire a bien ete renseigné.
Ce chapitre contient les sections suivantes :
- A propos des objets de formulaire
- Création d'un formulaire
Description des objets de formulaire
- Insertion de cases à cocher et de boutons radio
- Ajout de listes et de menus
- Ajout deboutons de formulaire
- A propos de la conception de formulaires
- Utilisation d'une fonction JavaScript côté client pourTRAITER un formulaire
- Utilisation de comportements avec des formulaires
- Création d'objets de formulaire dynamiques
<h1 id="a-propos-des-objets-de-formulaire">A propos des objets de formulaire</h1>
Dans Dreamweaver, les types d'entrées de-formulaire sont appelés des objets de formulaire. Pour insérer des objets de formulaire, vous pouvez soit besoin Insertion > Objects de formulaire, soit besoin un objet dans le panneau Formulaires de la barre Insertion illustrée ci-dessous.
La barre Formulaires contient les boutons suivants :
Formulaire insère un formulaire dans le document. Dreamweaver insère des balises form d'ouverture et de fermeture en code source HTML. Tout objet de formulaire supplémentaire, tel qu'un champ de texte, un bouton, etc. doit être inséré entre les balises form pour que les données soient correctement traitées par tous les navigateurs.
Champ de texte insère un champ de texte dans un formulaire. Les champs de texte acceptent tout type d'entrées alphanumerices. Le texte saisi peut être affché sur une seule ligne, sur plusieurs lignes ou sous forme de puce ou d'astérisques (pour la protection par mot de passer).
Champ masqué insère un champ dans le document où des données de l'utilisateur peuvent être stockées. Les champs masqués vous permettent de stocker des informations saisies par un utiliser, telles qu'un nom, une adresse électronique ou une préférence d'achat, puis d'utiliser ces informations lors de la prochaine visite de l'utilisateur sur le site.
Case à cocher insère une case à cocher dans un-formulaire. Les cases à cocher permettent deCHOISIR plusieurs réponses dans un même groupe d'options. L'utilisateur peut seLECTIONner toutesles options qu'il juge nécessaires.
Bouton radio insère un bouton radio dans un-formulaire. Les boutons radio représentent des choix exclusifs. Lorsqu'un utilisateur clique sur un bouton au sein du groupe, cela déslectionne tous les autres boutons du groupe. Un utilisateur peut cliquer, par exemple, soit sur le bouton Oui, soit sur le bouton Non.
Groupe de boutons radio insère un ensemble de boutons radio dotés du même nom.
LiTe/Menu yous permit de creer des choix utiliseaur au sein d'une listede.L'option LiTe affiche les valeurs d'options dans une listede déroulante et permiet aux utilisateurs de selectionner plusieurs options de la listede.L'option Menu affiche les valeurs d'options dans un menu déroulant et permiet aux utilisateurs de selectionner un seul element.
Menu de reroutage insère une liste de navigation ou un menu dérouulant. Les menus de reroutage vous permettent d'insérer un menu dans lequel chaque option est reliée à un document ou à un fichier. Voir « Création de menus de reroutage», page 439.
Champ d'image vous permet d'insérer une image dans un-formulaire. Les champs d'image peuvent etre utilisés à la place du bouton Envoyer pour creer des boutons graphiques.
Champ de fichier insere un champ de texte vierge et un bouton Parcourir dans un document. Les champs de fichier permettent aux utilisateurs de rechercher des fichiers sur leur disque dur et de les télécharger en tant que données de formulaire.
Bouton insère un bouton de texte dans un-formulaire. Les boutons effectuent des tâches lorsqu'vous cliquez dessus, comme par exemple l'envoi ou la réinitialisation du formulaire. Vous pouvezajouter une éiquette ou un nom personnelisé à un bouton ou utiliser l'une des étiquettespréféinies:Envoyer ou Rétabir.
<h1 id="création-dun-formulaire">Création d'un-formulaire</h1>
La barre Insertion de Dreamweaver vous permet de creer un formualeire et d'y ajouter des objets tels que des champes de texte, des boutons, des zones de liste et des boutons radio.
<h1 id="pour-ajouter-un-formulaire-à-un-document">Pour ajouter un formulaire à un document :</h1>
1 Placez le point d'insertion à l'endetroit où vous souhaitez que le formulaire apparaisse.
2 Choisissez Insertion > Formulaire ou, dans la barre Insertion, cliquez sur la catégorie Formulaires, puis sur l'icone Formulaire.
Dreamweaver insère un-formulaire. Dans une page affichée en mode Création, les formulaires sont indiqués par une cordure rouge en pointillé. Si vous ne voirz pas la cordure, vérifie que sous Affichage > Assistances visuelles, l'option Éléments invisibles est sélectionnée.
3 Dans la fenêtre de document, cliquez sur la cordure du formulaire pour le selectionner ou selectionnee la balise <form> dans le selecteur de balises se trouvant dans l'angle inférieur gauche.
4 Dans le champ Formulaire de l'inspecteur de propriétés, saississez un nom unique pour le formulaire.
Vous rendez ainsi possible son referrerencement ou son contrôle à l'aide d'un langage de script, tel que JavaScript ou VBScript. Si vous n'attribuiez 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.
5 Dans le champ Action de l'inspecteur de propriétés, indiquez le chemin d'accès au script ou à la page dynamique qui traitera le formulaire. Vous pouvez soit entrair manuellement le chemin d'accès complet dans le champ Action, soit cliquer sur l'icone de dossier pour rechercher le dossier approprié contenant le script ou la page d'application.
S'il s'agit du chemin d'accès à une page dynamique, le chemin de l'URL doit ressembler à :
http://www.mysite.com/application_name/process.cfm
6 Dans le menu déroulant Méthode, Sélectionnez la méthode à utiliser pour transmettre les données du formulaire au serveur. Les méthodes disponibles sont les suivantes :
<table><tr><td>POST</td><td>Incorpore les données du formulaire dans la demande HTTP.</td></tr><tr><td>GET</td><td>Annexe la valeur à l'URL demandant la page.</td></tr><tr><td>Par défaut</td><td>Se base sur le paramétrage par défaut du navigateur pour envoyer les données du formulaire au serveur. En général, la méthode par défaut est GET.</td></tr></table>
Notez que la méthode que vous choisissez peut être déterminée par le serveur Web ou le serveur d'application que vous utilisez. Contactez l'administrateur serveur de votre société pour obtenir plus d'informations.
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 produit des résultats inattendus ou un échéc du traitement. De plus, n'utilisez pas la méthode GET lors de l'envoi d'informations confidentielles, telles que des noms et des mots de passer utiliseur ou des numérodes carte de crédit. GET ne constitue pas une méthode sure pour le transfert des informations.
7 Le menu dérounant Enctype vous permet de définir le type de codage MIME des données envoyées au serveur pour traitement.
Le paramètre par défaut application/x-ww-form-urlscode est généralement utilisé en conjunction avec la méthode POST. Si vous créez un champ de téléchargement de fichier, spécifie le type de codage MIME multipart/form-data.
8 Le menu dérounant Cible indique la fenêtre dans laquelle afficher les données renvoyées par le programme appelé.
Si la fenêtre indiquée n'est pas encore ouverte, une nouvelle fenêtre du même nom apparait. Les valeurs cibles sont les suivantes :
blank ouvre le document de destination dans une nouvelle fenetre sans nom.
_parent ouvre le document de destination dans la fenêtre parente de cette affichant le document en cours.
_self ouvre le document de destination dans la même fenêtre que celle dans laquelle le formulaire a eté 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 affché dans un cadre.
<h1 id="description-des-objets-de-formulaire">Description des objets de-formulaire</h1>
Les objets de formulaire sont les éléments qui permettent aux utilisateurs d'entrée des données. Avant de creator un objet de formulaire, vous doivent insérer un formulaire dans la page.
Conseil : si vous essayez d'insérer un objet de formulaire sans creer le formulaire au préalable, Dreamweaver affiche le message suivant : « Ajouter des balises de formulaire ? ». Cliquez sur Oui pour permettre à Dreamweaver de créé les balises de formulaire de l'objet.
Les objets que vous pouvez ajouter à un-formulaire sont les suivants :
Les champes de texte acceptent tout type d'entrées alphanumeriques. Vous pouvez afficher le texte sur une seule ligne, sur plusieurs lignes ou sous forme d'une série de points ou d'astérisques pour des informations confidentielles (pour la protection des mots de passer, par exemple).
Les champs masqués stockent des informations saisies par un utilisateur, telles qu'un nom, une adresse électronique ou une préférence d'affichage et réutilisent ces informations lors de la prochaine visite de l'utiliser sur le site.
Les boutons exécutent des actions lorsqu'il'utilisateur clique dessus. Il s'agit en général de l'envoi ou du rétablissement des valeurs initiales d'un formulaire. Vous pouvez ajouter une étiquette ou un nom personnelisé à un bouton ou utiliser l'une des étiquettes prédéfinies : Envoyer ou Rétabir.
Les cases à cocher permettent les réponses multiples au sein d'un même groupe d'options. Un utilisateur peut seLECTIONner toutes les options qu'il juge nécessaires.
Les boutons radio représentent des可以选择 exclusifs. Lorsqu'un utiliseur clique sur un bouton dans un groupe de boutons radio, cela déslectionne tous les autres boutons du groupe (un groupe comprend plusieurs boutons dotés du même nom). Un formulaire d'abonnement peut, par exemple, exiger que l'utilisateur seLECTIONne l'option « Masculin » ou « Féminin »
Les listedes/menu affichent des valeurs d'option au sein d'une liste déroulante qui permet aux utilisateurs de selectionner plusieurs options. L'option Menu affiche les valeurs d'option dans un menu dérouulant et permet aux utilisateurs de selectionner un seul élément.
Les 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 Voir « Création de menus de reroutage», page 439.
Les 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.
Les champs d'image vous permettent d'insérer une image dans un-formulaire. Vous pouvez les utiliser pour creer des boutons graphiques (tels qu'un bouton Envoyer ou Retablir).
<h1 id="utilisation-des-champs-de-formulaire">Utilisation des champs de-formulaire</h1>
Les champs de formulaire permettent aux utilisateurs de saisir un texte dans un-formulaire. Il existe trois types de champs de formulaire :
- Les champs de texte, dans lesquels les utilisateurs saissient leur réponse.
- Les champs de fichier, dans lesquels les utilisateurs indiquent le chemin d'accès à un fichier à télécharger sur le serveur.
- Les champs masqués, qui stockent des informations saisies par les utilisateurs dans un autre champ.
Lorsque vous ajoutez un champ à un-formulaire, vous pouvez indiquer sa longueur, le nombre de lignes qu'il contient, le nombre maximum de caractères qu'un utilisateur peut y saisir et s'il s'agit d'un champ de mot de passer.
<h1 id="création-de-champs-de-texte">Création de champs de texte</h1>
Un champ de texte est un object de-formulaire dans lequel un utilisateur saisit une response. Il existe trois types de champs de texte :
Les champs de texte à ligne simple seront généralement à fournir une réponse composée d'un seul mot ou d'une expression courte, comme un nom ou une adrisse.
Les champs de texte à plusieurs lignes offrent à l'utilisateur une plus grande zone pour la saisie de sa réponse. Vous pouvez définir le nombre maximum de lignes que l'utilisateur est autorisé à saisir ainsi que la largeur des caractères de l'objet. Si le texte saisi dépasse les paramétres définis, le champ défile, conformément au paramètre défini dans l'attribut de retard à la ligne.
Les champs de mot de passer constituent une catégorie spéciale de champ de texte. Lorsqu'un utiliseur entre des informations dans ce type de champ, celles-ci sont remplacées par des astérisques ou des puces qui les masquent et empêchent qu'elles ne soient vues.
Notez que les mots de passer et tout autre type d'informations envoyés à un serveur à l'aide d'un champ de mot de passer ne sont pas cryptés. Les données transférées peuvent donc être interceptées et lues en tant que texte alphanumeric. Aussidezvez-vous prévoir le cryptage systématique des données que vous souhaitez protégger.
Pour creer un champ a une seule ligne ou un champ mot de passer :
1 Placez le point d'insertion dans la cordure du formulaire.
2 Choisissez Insertion > Objects de formulaire > Champ de texte.
Un champ de texte apparait dans le document et l'inspecteur de propriétés Champ de texte s'affiche.
3 Dans le champ Champ de texte de l'inspecteur de propriétés, tapez un nom unique pour le champ de texte.
Le nom choisi doit identifier de façon univoque le champ de texte au sein du formulaire. Les noms d'objets de formulaire ne peuvent compterer ni espaces, ni caractères spéciaux. Vous pouvez utiliser tous les caractères alphanumeriques de votrechioïs ainsi qu'un caractère de soulignement ( ). Notez que l'étiquette que vous attribuerez au champ de texte est le 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.
4 Dans le champ Larg. de caract., procedez de l'une des manieres suivantes:
- Acceptez le paramètre par défaut qui définit la longueur du champ de texte à 20 caractères.
- Indique la longueur maximale du champ de texte. Cette longueur correspond au nombre maximum de caractères que le champ peut afficher simultanément. Ainsi, si le champ Larg. de caract. est défini sur la valeur par défaut 20 et qu'un utiliser saisit 100 caractères, ce dernier ne pourrait voir que 20 de ces caractères dans le champ de texte. Notez que même si l'utilateur ne voit pas tous les caractères saisis dans le champ, ils sont reconnus par l'objet de champ et envoyés au serveur pour traitement.
5 Dans le champ Nbre caract. max, saisissez le nombre maximum de caractères que l'utilisateur peut saisir dans le champ de texte. Ce nombre définit les limites de taille du champ de texte et permet de valider le formulaire.
Si vous ne renseignez pas le champ Nbre caract. max, les utilisateurs peuvent saisir un texte d'une longueur illimitée. Si l'entrée de l'utilateur dépasse la largeur des caractères du champ, le texte défile. Si l'entrée de l'utilateur dépasse le nombre maximum de caractères, le formulaire émet un son d'alerte.
6 Cliquez soit sur Ligne simple, soit sur Mot de passer pour indiquer le type de champ de texte à créé.
Vouavesegalementla possiblitédecrer un champ de texteà plusieurs lignes.Pourobtenir des instructions sur la creation de champs de texte à plusieurs lignes,voir « Création de champes de texte à plusieurs lignes»,page 620.
7 Si vous souhaitez afficher un texte par défaut dans le champ, saisissez-le dans le champ Val. init. de l'inspecteur de propriétés.
Ce texte apparait dans le champ de texte la première fois que le formulaire est charge dans le navigateur de l'utilisateur. Ainsi pouvez-vous indiquer, par exemple, que l'utilisateur doit saisir des informations de type remarque ou exemple dans le champ.
8 Pour attribuer une étiquette au champ au sein de la page, placez le point d'insertion en regard de l'objet concerné, puis saississez le texte souhaité.
Vous pouvez appliquer une mise en forme au texte des étiquettes d'objets de formulaire. Pour plus d'informations, voir « Définition et modification des polices et styles », page 286. L'exemple cédessous illustré un champ de texte à ligne simple avec l'étiquette « Saisissez votre nom d'utilisateur : ». Notez que l'inspecteur de propriétés Champ de texte indique que le champ ne peut afficher que 30 caractères maximum (voir la valeur du champ Larg. de caract.), mais qu'il peut stocker jusqu'à 50 caractères.
<h1 id="création-de-champs-de-texte-à-plusieurs-lignes">Création de champs de texte à plusieurs lignes</h1>
Les champs de texte à plusieurs lignes vous permettent de saisir un texte sur plusieurs lignes. Lors de la création de ce type de champ, vous avez la possibilité de définir le nombre de lignes de texte que l'utilisateur peut saisir.
Pour creer un champ de texte à plusieurs lignes :
1 Placez le point d'insertion dans la cordure du formulaire.
<h1 id="2-choisissez-insertion-objects-de-formulaire-champ-de-texte">2 Choisissez Insertion > Objects de formulaire > Champ de texte.</h1>
Un champ de texte vient s'insérer dans le document et l'inspecteur de propriétés Champ de texte s'affiche.
3 Dans le champ Champ de texte de l'inspecteur de propriétés, tapez un nom unique pour le champ de texte.
Le nom choisi doit identifier de façon univoque le champ de texte au sein du formulaire. Les noms d'objets de formulaire ne peuvent compterer ni espaces, ni caractères spéciaux. Vous pouvez utiliser tous les caractères alphanumeriques de votrechioïs ainsi qu'un caractère de soulignement ( ). Notez que l'étiquette que vous attribuez au champ de texte est le 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.
4 Dans le champ Larg. de caract., procedez de l'une des manieres suivantes:
- Acceptez le paramètre par défaut qui définit la longueur du champ de texte à 20 caractères.
- Indiquez la longueur maximale du champ de texte. Cette longueur correspond au nombre maximum de caractères que le champ peut afficher simultanément. Ainsi, si le champ Larg. de caract. est défini sur la valeur par défaut 20 et qu'un utiliser saisit 100 caractères, ce dernier ne pourrait voir que 20 de ces caractères dans le champ de texte. Notez que même si l'utilateur ne voit pas tous les caractères saisis dans le champ, ils sont reconnus par l'objet de champ et envoyés au serveur pour traitement.
5 Cliquez sur Multi lignes pour indiquer le type de champ de texte à créé.
6 Dans le champ Nbre de lignes, indiquez le nombre maximum de lignes à afficher.
Par défaut, cette valeur est définie sur deux lignes.
7 Dans le menu déroulant Retour à la ligne, définisseez la façon dont l'entrée d'un utilisateur doit apparaître s'il saisit plus d'informations que ce qui peut être affiché dans la zone de texte. Les options de return à la ligne sont les suivantes :
Déactivé ou Par défaut empêche le return à 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 Entrée pour déplacer le point d'insertion sur la ligne suivante dans la zone de texte.
L'option Virtuel définit un return à 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 return à la ligne n'est pas appliqué. Les données sont envoyées en tant que chaîne unique.
L'option Physique définit un return à la ligne automatique des données dans la zone de texte ainsi que lors de leur envoi pour traitement.
8 Si vous souhaitez afficher un texte par défaut dans le champ, saisissez-le dans le champ Val. init. de l'inspecteur de propriétés.
Ce texte apparait dans le champ de texte la première fois que le formulaire est chargé dans le navigateur de l'utilisateur. Ainsi pouvez-vous indiquer, par exemple, que l'utilisateur doit saisir des informations de type remarque ou exemple dans le champ.
9 Pour attribuer une étiquette au champ au sein de la page, placez le point d'insertion en regard de l'objet concerné, puis saisissez le texte souhaité.
Vou puez appliquer une mise en forme au texte des étiquettes d'objets de formulaire. Pour plus d'informations, voir « Définition et modification des polices et styles», page 286.
<h1 id="creation-dun-champ-de-téléchargement-de-fichier">Creation d'un champ de téléchargement de fichier</h1>
Vou puez creer un champ de tléchargement de fjichier permettant aux utilisateurs de selectionner un fjichier sur leur ordinateur (tel qu'un document de traitement de texte ou un fjichier graphique) et de le tlécharger sur le serveur. Un champ de fjichier est similaire à un champ de texte, mais contient également un bouton Parcourir. L'utiliseur peut soit saisir manuellement le chemin d'accès au fjichier à tlécharger, soit cliquer sur le bouton Parcourir pour le trouver et le selectionner.
Les champes de fichier requiennent l'utilisation de la méthode POST pour pouvoir transmettre des fichiers depuis un navigateur vers un serveur. Le fichier est transféré à l'adresse indiquée dans le champ Action du formulaire.
Remarque : avant d'utiliser le champ de fichier, vérifie auprès de votre administrateur de serveur que le téléchargement anonyme de fichiers est autorisé.
<h1 id="pour-creer-un-champ-de-fichier-dans-un-formulaire">Pour creer un champ de fichier dans un formulaire :</h1>
1 Insérez un-formulaire dans la page (Insertion > Formulaire).
2 Sélectionnez le formulaire. L'inspecteur de propriétés de formulaire s'affiche.
3 Dans le menu déroulant Méthode, Sélectionnez POST.
4 Dans le menu dérounant Enctype, Sélectionnez multipart/form-data.
5 Placez le point d'insertion dans la cordure du formulaire, puis effectuez l'une des opérations :CHOISSEZ Insertion Objects de formulaire > Champ de fichier ; dans l'onglet Formulaire de la barre Insertion, cliquez sur I'icone Insérer un champ de fichier.
Un champ de fichier vient alors s'insérer dans le formulaire.
6 Dans le champ Champ fichier de l'inspecteur de propriétés, tapez le nom de l'objet du champ de fichier.
7 Dans le champ Larg. de caract., indiquez le nombre maximum de caractères que le champ doit afficher.
8 Dans le champ Nbre caract. max, indiquez le nombre maximum de caractères que le champ peut stocker.
Si l'utilisateur parcourt l'arborescence pour trouver le fichier, le nom du fichier et son chemin d'accès risquent de composer un nombre de caractères supérieur à celui indiqué dans le champ Nbre caract. max. 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'enter un nombre de caractères supérieur à celui indiqué.
L'exemple ci-dessous décrit un champ de filchier simple. Notez que le champ Nbre caract. max de l'inspecteur de propriétés est défini sur la valeur 75, alors que le champ Larg. de caract. est défini sur 30. Cela signifie que l'utilisateur ne pourrait voir que les 30 premiers caractères du chemin d'accès au filchier. Etudiez avec soin le type de filchier que l'utilisateur peut souhaiter télécharger et essayez de déterminer s'il a besoin de pouvoir voir l'intégrality du chemin d'accès au filchier dans la zone de texte correspondante.
<h1 id="création-dun-champ-masqué">Création d'un champ masqué</h1>
Les champes masqués sont des champes de texte qui permettent de receuiller des informations sur les utilisateurs. Les informations stockées dans le champ sont transmises au serveur lors de l'envoi du formulaire.
Dreamweaver create a markeur dans le document lorsqu'vous inserez un champ masqué. Si vous insérez un champ masqué et ne venez pas de markeur, choisissez Affichage > Assistances visuelles, puis selectionné l'option Éléments invisibles pour afficher le markeur.
<h1 id="pour-creer-un-champ-masqué">Pour creer un champ masqué :</h1>
1 Placez le point d'insertion dans la cordure du formulaire.
2 Choisissez Insertion > Objects de formulaire > Champ masqué.
Un indicateur apparait dans le document.
3 Dans le champ Champ masqué de l'inspecteur de propriétés, entrez un nom unique pour le champ.
4 Dans le champ Valeur, spécifiez le type de valeur que vous souhaitez affecter au champ.
<h1 id="insertion-de-cases-à-cocher-et-de-boutons-radio">Insertion de cases à cocher et de boutons radio</h1>
Utilisez les objets de formulaire de type case à cocher et bouton radio pour créé des objets de seLECTION prédéfinis. Un utilisateur clique sur une case à cocher ou un bouton radio pour effectuer un besoin.
<h1 id="description-des-cases-à-cocher-et-des-boutons-radio">Description des cases à cocher et des boutons radio</h1>
Les cases à cocher permettent aux utilisateurs d'activer et de désactiver chaque réponse indépendamment des autres. Ils peuvent donc seLECTIONner plusieurs options au sein d'un même groupe de cases à cocher. L'exemple ci-dessous illustrste cela : les trois cases à cocher Surfing, Mountain Biking et Rafting sont activées.
Les boutons radio fonctionnent comme un groupe et fournissant mutuelles des valeurs de seLECTION exclusives. Un utilisateur ne peut selectionner qu'une seule option au sein d'un groupe de boutons radio. Dans l'exemple ci-dessous, « Rafting » est l'option selectionnée. Si l'utilisateur clique sur « Surfing», le bouton « Rafting » se déslectionne automatiquement.
<h1 id="insertion-dune-case-à-cocher">Insertion d'une case à cocher</h1>
Les cases à cocher permettent aux utilisateurs de selectionner plusieurs options dans un groupe.
<h1 id="pour-insérer-une-case-à-cocher">Pour insérer une case à cocher :</h1>
1 Placez le point d'insertion dans la cordure du formulaire, puis effectuez l'une des actions suivantes:
- Choisissez Insertion > Objets de formulaire > Case à cocher.
- Dans la catégorie Formulaires de la barre Insertion, cliquez sur l'icone Insérer une case à cocher.
2 Dans le champ Case à cocher de l'inspecteur de propriétés, entrez un nom descriptorif unique.
3 Dans le champ Valeur, spécifie une valeur pour la case à cocher.
Par exemple, dans un sondage, vous pouvez définir une valeur de 4 pour « approuve fortement » et une valeur de 1 pour « désapprovue fortement »
4 Pour Etat initial, cliquez sur Activé pour qu'une option apparaisse la première fois que le formulaire est charge dans le navigateur.
<h1 id="insertion-dun-bouton-radio">Insertion d'un bouton radio</h1>
Utilisez les boutons radio pour que les utilisateurs ne choisient qu'une seule option dans un ensemble d'options. Elles sont généralement utilisées en groupe. Toutes les boutons radio d'un même groupe doivent avoir le même nom et containir des valeurs de champ différentes.
<h1 id="pour-insérer-des-boutons-radio-en-tant-que-groupe">Pour insérer des boutons radio en tant que groupe :</h1>
1 Placez le point d'insertion dans la cordure du formulaire.
2 Insérez l'objet de-formulaire Groupe de boutons radio eneffectuant l'une des opérations suivantes:
- Cliquez sur l'onglet Formulaires, puis sur l'icone Groupe de boutons radio.
- Choisissez Insertion > Objets de formulaire > Groupe de boutons radio. La boîte de dialogue Groupe de boutons radio s'affiche.
3 Complétez les options de la boîte de dialogue Groupe de boutons radio, puis cliquez sur OK. Pour obtenir des instructions sur la façon de compléter la boîte de dialogue Groupe de boutons radio, cliquez sur le bouton Aide qui figure dans la boîte de dialogue.
Dreamweaver insère le groupe de boutons radio dans le formulaire HTML. Si vous n'avez pas encore inséré de formulaire dans la page, Dreamweaver s'en charge à votre place. Si vous le souhaitez, vous pouvez modifier la mise en forme du groupe. Vous pouvez également modifier les boutons radio à l'aide de l'inspecteur de propriétés ou directement en mode Code.
<h1 id="pour-insérer-des-boutons-radio-un-par-un">Pour insérer des boutons radio un par un :</h1>
1 Placez le point d'insertion dans la cordure du formulaire.
2 Choisissez Insertion > Objets de formulaire > Bouton radio pour insérer l'objet de formulaire correspondant.
3 Dans le champ Bouton radio de l'inspecteur de propriétés, entrez un nom descriptorif pour l'ensemble des boutons radio.
Si vous creez des interactions entre plusieurs boutons radio dans un même-formulaire, assurez-vous que chaque ensemble de boutons radio est doté d'un nom unique. Par contre, si vous insérez des boutons radio individuels pourisser un groupe, attribuez à chacun une étiquette particulière.
4 Dans le champ Valeur, saississez la valeur à envoyer à l'application ou au script côte serveur lorsqu'un utilisateur clique sur ce bouton radio. Par exemple, vous pouvez taper ski dans le champ Valeur pour indiquer qu'un utilisateur a besoin le ski.
5 Pour Etat initial, cliquez sur Activé pour qu'une option apparaisse la première fois que le formulaire est charge dans le navigateur.
<h1 id="ajout-de-listes-et-de-menus">Ajout de listes et de menus</h1>
Les listes et les menus vous permettent d'offrir aux utilisateurs de nombreux choix dans un espace limite. Les listes se presentent avec une barre de defilement qui permet aux utilisateurs de parcourir de nombreux éléments et d'effectuer plusieurs selections. Les menus déroulants affichent un seul élément qui representa la selection active. Les utilisateurs ne peuvent désir qu'un élément dans un menu.
<h1 id="creation-dune-liste-déroulante">Creation d'une liste déroulante</h1>
Les listes déroulantes vous permettent d'afficher plusieurs options dans un espace réduit. L'utilisateur peut faire défiler la liste et selectionner plusieurs éléments.
<h1 id="what-wine-varietal-are-you-looking-for">What wine varietal are you looking for?</h1>
<h1 id="pour-creer-une-liste-déroulante">Pour creer une liste déroulante :</h1>
1 Placez le point d'insertion dans la cordure du formulaire.
2 Choisissez Insertion > Objects de-formulaire >lige/Menu, puis selectionnez l'elementlige/ Menu resultant (le cas echéant).
L'objet de formulaire Liste/Menu apparait dans la cordure du formulaire et l'inspecteur de propriétés correspondant s'affiche. Dans l'illustration ci-dessous, l'inspecteur de propriétés Liste/Menu affiche le bouton Dynamique. Ce bouton permet de creer des objets de formulaire de liste ou de menu dynamiques et ne s'affiche que si vous avez préalablement seLECTIONné un type de document dynamique.
3 Dans le champ Liste/Menu de l'inspecteur de propriétés, tapez un nom unique pour la liste.
4 Pour Type, Sélectionnez Liste.
5 Dans le champ Hauteur, saisissez le nombre de lignes (ou d'éléments) à afficher dans la liste. Des barres de défilament apparaissent lorsque le nombre saisi est inférieur au nombre d'options figurant dans la liste.
6 Si vous désirez que l'utilisateur puisse selectionner plusieurs options dans la liste, activez la case Autoriser plusieurs (en regard de Sélections).
7 Cliquez sur Valeurs de la liste pour ajouter les besoin d'options.
La boite de dialogue Valeurs de la liste s'affiche.
8 Placez le point d'insertion dans le champ Etiquette de l'élement, puis tapez le texte qui doit apparaitre dans la liste.
9 Dans le champ Valeur, saisissez les données à envoyer au serveur lorsqu'un utilisateur selectionné cet élément.
10 Pour ajouter un autre élément à la liste d'options, cliquez sur le bouton plus (+), puis répétez les étapes 7 et 8.
11 Lorsque vous avez fini d'ajouter des éléments à la liste, cliquez sur OK pour fermer la boîte de dialogue Valeurs de la liste.
L'inspecteur de propriétés s'affiche. Vos可以选择 d'options sont visibles dans le champ Initialement sélectionnés.
12 Pour que l'un des éléments soit sélectionné par défaut dans la liste, sélectionnez-le dans le champ Initialement sélectionné de l'inspecteur de propriétés.
<h1 id="creation-de-menus-déroulants">Creation de menus déroulants</h1>
Les menus déroulants permettent aux visiteurs de selectionner un seul élément dans une liste en compteant plusieurs. Ces menus sont utiles lorsque vous disposez d'un espace réduit et que vous devez afficher de nombreux éléments. Notez que seule une option est visible lorsque le formulaire du menu est charge dans le navigateur. Pour afficher les autres options disponibles et voir la liste entière, l'utilisateur doit pouvoir sur la flèche vers le bas.
What wine varietal are you looking for?
Cabernet Sauvignon
Remarque : l'element de formulaire du menu dérounant est différent du menu dérounant graphique. Pour plus d'informations sur la création, la modification, l'affichage et le masquage d'un menu dérounant graphique, voir « Afficher le menu contextual », page 393.
<h1 id="pour-creer-un-menu-déroulant">Pour creer un menu déroulant :</h1>
1 Placez le point d'insertion dans la cordure du formulaire.
2 Choisissez Insertion > Objects de-formulaire >lige/Menu, puis selectionnez l'elementlige/ Menu resultant (le cas echeant).
L'objet de-formulaire Liste/Menu apparait dans la cordure du formulaire et l'inspecteur des propriétés correspondant s'affiche.
3 Dans le champ Liste/Menu de l'inspecteur de propriétés, tapez un nom unique pour le menu.
4 Pour Type, selectionnez Menu.
5 Clique sur Valeurs de la liste pour ajouter les choix d'options. La boîte de dialogue Valeurs de la liste s'affiche.
6 Placez le point d'insertion dans le champ Etiquette de l'objet, puis tapez le texte qui doit apparaître dans le menu.
7 Dans le champ Valeur, saisissez les données à envoyer au serveur lorsqu'un utilisateur selectionné cet élément.
8 Pour ajouter un autre élément à la liste d'options, cliquez sur le bouton plus (+), puis répétez les étapes 6 et 7.
9 Lorsque vous avez fini d'ajouter des éléments au menu, cliquez sur OK afin de fermer la boîte de dialogue Valeurs de la liste.
10 Pour que l'un des éléments soit sélectionné par défaut dans la liste, Sélectionnez-le dans le champ Initialement sélectionné de l'inspecteur de propriétés.
<h1 id="ajout-de-boutons-de-formulaire">Ajout de boutons de formulaire</h1>
Les boutons de formulaire contrôlent les différentes opérations du formulaire. Utilisez un bouton de formulaire pour envoyer au serveur des données saisies dans un formulaire ou pour rétablier les valeurs initiales du formulaire. Vous pouvez également attribuer à un bouton d'autres tâches de traitement préalablement définies dans un script. Un bouton de formulaire peut ainsi calculer, par exemple, le montant total des éléments sélectionnés en fonction des valeurs que vous leur avez attribuées.
<h1 id="insertion-de-boutons-de-formulaire-standard">Insertion de boutons de formulaire standard</h1>
Les boutons de formulaire standard correspondent au style des boutons par défaut du navigateur et contiennent le texte que vous souhaitez afficher. Il s'agit en général des boutons Envoyer et Retablir.
<h1 id="pour-creer-un-bouton-texte">Pour creer un bouton texte :</h1>
1 Placez le point d'insertion dans la cordure du formulaire.
2 Choisissez Insertion > Objects de formulaire > Bouton ou, dans le panneau Formulaire, cliquez sur l'icone Bouton.
Dreamweaver insère l'objet de-formulaire Bouton dans le document et affiche l'inspecteur de propriétés correspondant.
3 Dans le champ Bouton de l'inspecteur de propriétés, tapez le nom du bouton.
Notez qu'il existe deux noms réservés : Envoyer, qui envoie les données du formulaire pourtraitement, et Rétablir, qui rétablit les valeurs initiales des champs du formulaire.
4 Dans le champ Etiquette de l'inspecteur de propriétés, tapez le texte devant figurer sur le bouton.
5 Dans la section Action, selectionnez l'action de votrechoix. Les actions disponibles sont :
Envoyer, qui envoie le formulaire pour traitement lorsque l'utilisateur clique sur le bouton.
Rétablit, qui rétablit les valeurs initiales du formulaire lorsque l'utilisateur clique sur le bouton.
Aucune, qui active une action en fonction du script de traitement associé lorsqu l'utilisateur clique sur le bouton. Pour définitir une action, dans la barre d'etat de la fenêtre de document, Sélectionnez la balise form afin de sélectionner le formulaire et d'afficher l'inspecteur de propriétés Formulaire. Dans le menu dérouulant Action, Sélectionnez un script ou une page pourTRAITER le formulaire.
<h1 id="creation-dun-bouton-graphique-envoyer">Creation d'un bouton graphique Envoyer</h1>
Vous pouvez définir des images à utiliser comme icones de bouton. Vous devez attacher un comportement à l'objet de formulaire pour pouvoir utiliser une image pour effectuer une tâche autre que l'envoi de données. Vous pouvez attribuer un comportement à un bouton en utilisant le panneau Comportements de Dreamweaver ou en ayant recours à une fonction JavaScript côté client qui exécute une action.
Pour savoir comment joindre un comportement à un objet, voir « Application d'un comportement», page 371.
<h1 id="pour-creer-un-bouton-graphique-envoyer">Pour creer un bouton graphique Envoyer :</h1>
1 Dans le document, placez le point d'insertion dans la cordure du formulaire.
2 Choisissez Insertion > Objects de formulaire > Champ d'image.
3 Dans l'inspecteur de propriétés du champ d'image, remplacez le texte figurant dans le champ Champ img. par Envoyer.
4 Cliquez sur l'icone de dossier du champ SRC, recherche le fjichier graphique de l'image à utiliser comme bouton, puis seLECTIONnez-le.
5 Dans le champ Secondaire, tapez le texte qui doit apparaitre à la place de l'image dans les navigateurs en mode texte ou configurés pour un téléchargement manuel des images.
<h1 id="a-propos-de-la-conception-de-formulaires">A propos de la conception de formulaires</h1>
Vous pouvez utiliser des sauts de ligne, des sauts de paragraphs, du texte préformé ou des tableaux pourmettre 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-formaître sous forme de texte descriptorif, afin que les utilisateurs sachent ce qu'ils ont à faire (par exemple, « Entreze votre nom » pour demander des informations de nom).
<h1 id="insertion-de-tableaux-dans-les-formulaires">Insertion de tableaux dans les formulaires</h1>
Voupeuz creer des formulaires plus attractifs en inscrant un tableau dans un formuale : utilisez des tableaux pour fournir une structure pour les objets et les etiquettes de champ et pour facilitier l'alignment vertical et horizontal des choix. Assurez-vous, lorsque vous utilisez des tableaux dans un formuale, que toutes les balises table sont inclues entre les balises form.
<h1 id="utilisation-dune-fonction-javascript-côté-client-pourtraiter-un-formulaire">Utilisation d'une fonction JavaScript côté client pourTRAITER un formulaire</h1>
Les formulaires sont traités par le script ou l'application spécifique dans l'attribut action de la balise form. Pour connaître l'action associée à un formulaire, Sélectionnez-le, puis consultez l'inspecteur de propriétés. Le champ Action indique l'action associée.
Les formulaires les plus simples utilisent JavaScript ou VBScript pour effectuer le traitement du formulaire)cote client (par opposition aux données de formulaire envoyées au serveur pour traitement). Par exemple, vous pouze avoir un petit formulaire au bas de la page, contenant uniquement deux boutons radio libellés Oui et Non, plus un bouton Envoyer. L'action de formulaire peut etre une fonction JavaScript définie dans la section head du document, qui affiche une alerte si l'utiliseur selectionne Oui et une autre s'il selectionne Non :
<pre><code class="language-javascript">function processForm(){ if(document.forms[0].elements[0].checked){ alert('Oui'); }else{ alert('Non'); }
}
</code></pre>
Pour utiliser un fonction JavaScript côté client comme action de formulaire :
1 Sélectionnez un bouton Envoyer dans un-formulaire.
2 Joignez le comportement Appel JavaScript au bouton (voir « Appel JavaScript», page 375).
3 Dans la zone de texte JavaScript qui s'affiche lorsque vous attachez le comportement, entrez processForm().
4 Ajoutez une fonction JavaScript processForm() ( comme celle indiquée ci-dessus) à la section head du document.
Un script cote client vous permet deGERer plusieurs taches de traitement de formualeire, mais ne vous permit pas d'enregister les données saisies par l'utiliser ou de les envoyer a quelqu'un d'autre. Afin d'enregister les données ou de les transmettre a une application pour traitement, vousdezvezutiliser unscript ou uneapplicationcote serveur.Lesscripts CGI(Common Gateway Interface) sont les mecanismes de script cote serveur les plus fréquemment utilisés pour Traitser les données de formulaire.II existence plusieurs sites Web qui proposent gratuitement des scripts CGI que vous pouvez utiliser.Le fournisseur de services Internet hébergeant sua site propose peut-etre des scripts CGI effectuant de nombreuses taches courantes et permettant, par exemple, de recueillir des adresses électroniques ou de receivevoir les commentaires de visiteurs au moyen d'un formulaire Web.
<h1 id="utilisation-de-comportements-avec-des-formulaires">Utilisation de comportements avec des formulaires</h1>
Voussoupiezattacherdescomportementsexauxformulairesetauxobjetsde formulaireaI'aide descomportements du panneauComportementslorsquele formulaireou l'objet de formulaireestselectionné.LescomportementsValiderle formulaireetexted'unchampde textesontdisponiblesuniquementsiyousevasseinsereunchampdetextedansledocument.LorsqueyouattachezlecomportementValiderle formulairea unobjetde formulaire,vousdevezspecifierlechampde texteàvalider.Parexampie,siyouattachezValiderle formulaireauboutonEnvoyer, youdezdéterminerunchampde textecrèepour «Nom»,afindeverifierque l'utilisateurabienentrodu textedanslechampNom.
Lorsque vous appliquez des comportements, vous devez vous assurer que chaque objet de formulaire dans votre document (ainsi que tous les autres objets) possède un nom unique. Si vous utilisez le même nom pour deux objets différents, les comportements risquent de ne pas fonctionner correctement (meme si les objets se trouvent dans des formulaires différents).
Voutrouvez ci-dessous des informations relatives aux deux comportements spécifiques aux formulaires. Pour plus d'informations sur les autres comportements, voir Chapitre 24, « Utilisation des comportements JavaScript», page 369.
Valider le formulaire vérifie le contenu des champs de texte spécifique, pour vérifier que l'utilisateur a saisi le type de données correct (voir « Valider le formulaire », page 399).
Texte du champ texte remplace le contenu d'un champ texte de formulaire par le contenu indiqué. (voir « Texte d'un champ de texte», page 390).
<h1 id="création-dobjets-de-formulaire-dynamiques">Création d'objets de-formulaire dynamiques</h1>
Voupez createur formuale HTML dynamique qui se charge a la fois d'afficher les enregistements stockés dans une base de données et de recueillir des informations provenant des utilisateurs. Un formuale peut, par exemple, afficher les coordonnées de fournisseurs extraites d'une table de base de données.
Les formulaires dynamiques peuvent simplifier la maintenance d'un site. De nombreux sites incluent, par exemple, des menus de formulaires HTML pour permettre aux utilisateurs de passer à d'autres zones du site. En général, ce type de menu apparaît à plusieurs endroits du site. Si le menu est dynamique, il vous suffit d'ajouter un nouvel élément de menu à la table de base de données pour pouvoirmettre à jour tous les menus du site.
Les listes et les menus sont souvent utilisés comme objets de formulaire dynamiques. Vous pouvez également créé à cette fin des boutons radio, des cases à cocher, des champs de texte et des champ s'dimage dynamiques.
Cette section déscrit la méthode à suivre pour rendre des objets de formulaire dynamiques.
Remarque : Dreamweaver MX ne fournit aucun des objets de formulaire dynamiques suivants pour ASP.NET : Champ de texte dynamique ; Case à cocher dynamique ;isme/Menu dynamique ; Groupe de boutons radio dynamiques.
<h1 id="creation-de-listes-et-de-menus-dynamiques">Creation de listes et de menus dynamiques</h1>
Voussoupiezreplirdefacon dynamiqueunobjectedeformulairedetype listedou menua l'aide d'entreesfigurant dans une base de données.
Pour creer une liste ou un menu dynamique :
1 Cliquea l'intérieur du formulaire HTML de voitrpe.
2 Choisissez Insertion > Objects de formulaire > Liste/Menu.
Dreamweaver insère unobjet de formulaire Menu dans la page.
3 Sélectionnez l'objet de-formulaireliste/Menu.
L'inspecteur de propriétés Liste/Menu s'affiche.
4 Dans l'inspecteur de propriétésliste/Menu, cliquez sur le bouton Dynamique pour afficher la boîte de dialogueuche/Menu dynamique. Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Pour obtenir des instructions sur la façon de compléter les champs de la boîte de dialogue.
Liste/Menu dynamique, cliquez sur le bouton Aide qui figure dans la boîte de dialogue.
<h1 id="5-cliquez-sur-ok-2">5 Cliquez sur OK.</h1>
Dreamweaver insère la liste ou le menu dynamique dans le formulaire HTML. Vous pouvez modifier le menu à l'aide du panneau Comportements de serveur, dans l'inspecteur de propriétés ou directement dans le code source.
<h1 id="ajout-de-la-fonctionnalité-dynamique-à-des-listedes-ou-des-menus-existants">Ajout de la fonctionnalité dynamique à des listedes ou des menus existants</h1>
Vou puevez rendre dynamiques des objets de formulaire de type liste ou menu existants.
<h1 id="pour-rendre-dynamique-une-liste-ou-un-menu-existant">Pour rendre dynamique une liste ou un menu existant :</h1>
1 Sélectionnéz l'objet de formulaire liste ou menu que vous souhaitez rendre dynamique.
2 Dans l'inspecteur de propriétés, cliquez sur le bouton Dynamique.
La boîte de dialogue Liste/Menu dynamique s'affiche.
3 Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Pour obtenir des instructions sur la façon de compléter la boîte de dialogue Liste/Menu dynamique, cliquez sur le bouton Aide de la boîte de dialogue.
<h1 id="creation-de-champs-de-texte-et-dimage-dynamiques">Creation de champs de texte et d'image dynamiques</h1>
Vou puevez creer des champes de texte et d'imaginedynamiques sur un formualeire.
<h1 id="pour-creer-des-champes-de-texte-dynamiques">Pour creer des champes de texte dynamiques :</h1>
1 Sélectionnez un champ de texte dans le formulaire HTML de votre page.
2 Pour afficher le panneau Comportements de serveur,CHOISSEZ Fenetre > Comportements de serveur.
3 Cliques sur le bouton plus (+), puis choisissez Éléments dynamiques > Champ de texte dynamique dans le menu contextuel.
La boîte de dialogue Champ de texte dynamique s'affiche.
4 Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Pour obtenir des instructions sur la façon de compléter la boîte de dialogue, cliquez sur le bouton Aide.
Le champ de texte représentera un contenu dynamique lors de l'affichage du formulaire dans un navigateur.
<h1 id="pour-creer-des-champ-s-dimag-dynamiques">Pour creer des champ s d'imag dynamiques :</h1>
1 Placez le point d'insertion à l'endetroit où doit apparaitre le champ d'image dans la page, puisCHOISSEZ Insertion > Objects de formulaire > Champ d'image.
La boîte de dialogue Sélectionner source de l'image s'affiche.
2 Cliquez sur l'option Sources de données (Windows) ou sur le bouton Source de données (Macintosh).
La liste des sources de données s'affiche.
3 Sélectionnéz une source dans la liste.
Cette source doit être un jeu d'enregistrements contenant les chemins d'accès à vos fichiers image. Selon la structure du fichier de cette site, les chemins peuvent être absolus, relatifs au document ou à la racine.
Remarque : à 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'apparait dans la liste ou si aucun des jours disponibles ne correspond à vos besoin, définissee un nouveau jeu. Pour obtenir des instructions, voir « Définition d'un jeu d'enregistrements », page 536.
4 Cliquez sur OK.
Le champ d'image contiendra une image selectionnée dynamiquement lors de l'affichage du formulaire dans un navigateur.
<h1 id="creation-de-cases-à-cocher-dynamiques">Creation de cases à cocher dynamiques</h1>
Insérez une case à cocher dans un-formaître pour permettre aux utilisateurs de-selectionner plusieurs éléments dans la liste des éléments disponibles. Pour creer un bouton radio dynamique, vous doivent avoir défini un type de document dynamique et avoir associé la page à un jeu d'enregistements ou à une autre source de contenu dynamique. La source de données doit seprésenter dans un format booléen, tel que Yes/No ou true/false.
<h1 id="pour-préselectionner-dynamiquement-une-case-à-cocher">Pour préselectionner dynamiquement une case à cocher :</h1>
1 Sélectionnez un objet de-formulaire de case à cocher.
2 Dans l'inspecteur de propriétés, cliquez sur le bouton Dynamique.
La boîte de dialogue Case à cocher dynamique s'affiche.
3 Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Pour obtenir des instructions sur la façon de compléter la boîte de dialogue Case à cocher dynamique, cliquez sur le bouton Aide qui figure dans la boîte de dialogue.
Lors de l'affichage du formulaire dans un navigateur, la case à cocher apparaitra activée ou non, selon les données.
<h1 id="creation-de-boutons-radio-dynamiques">Creation de boutons radio dynamiques</h1>
Vouss pouvez préselectionner dynamiquement un bouton en fonction d'une valeur dans un jeu d'enregistements. Pour creer un bouton radio dynamique, vousdezavez avoir defini un type de document dynamique et avoir associé la page à un jeu d'enregistements ou à une autre source de contenu dynamique.
Pour préselectionner dynamiquement un bouton radio :
1 Assurez-vous que la page contient au moins un groupe de boutons radio.
Pour creer un groupe de boutons radio, dans l'onglet Formulaires de la barre Insertion, cliquez sur I'icone Groupe de boutons radio. Pour plus d'informations, voir « Insertion d'un bouton radio», page 625.
2 Dans le panneau Comportements de serveur, cliquez sur le bouton plus (+), puis choisissez Eléments de formulaire dynamiques > Groupe de boutons radio dynamiques.
La boîte de dialogue Groupe de boutons radio dynamiques s'affiche. La boîte de dialogue qui apparait peut différer de celle de l'exemple ci-dessous selon le type de document utilisé.
3 Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Pour obtenir des instructions sur la façon de compléter la boîte de dialogue Boutons radio dynamiques, cliquez sur le bouton Aide qui figure dans la boîte de dialogue.
<h1 id="partie-ix-développement-rapide-dapplications">Partie IX Développement rapide d'applications</h1>
Les applications Web contiennent fraisment des pages qui permettent aux utilisateurs d'effectuer des recherches dans une base de données, des pages qui leur permettent d'insérer, de mettre à jour ou de supprimer des données d'une base de données, ainsi que des pages qui limitent leur accès à un site Web. Dreamweaver vous permit de créé rapidement ces pages.
Cette partie du manuel contient les chapitres suivants :
- Chapitre 39, « Création d'un ensemble de pages Principale-Détails »
- Chapitre 40, « Création de pages pour l'exécution de recherches dans les bases de données »
- Chapitre 41, « Création de pages permettant de modifier des bases de données »
- Chapitre 42, « Création de pages limitant l'accès à votre site »
<h1 id="chapitre-39">CHAPITRE 39</h1>
<h1 id="création-dun-ensemble-de-pages-principale-détails">Création d'un ensemble de pages Principale-Détails</h1>
Macromedia Dreamweaver MX you permit de creer des jours de pages qui present les informations sur deux niveaux. Ce chapitre explique comment creer un ensemble de pages Principale-Details dans les sections suivantes :
- « A propos des ensembles de pages Principale-Détails», page 639
- « Création rapide d'un ensemble de pages Principale-Détails», page 641
- « Création d'un ensemble de pages Principale-Détails par élément», page 642
- « Modification d'un ensemble de pages Principale-Détails », page 646
<h1 id="a-propos-des-ensembles-de-pages-principale-détails">A propos des ensembles de pages Principale-Détails</h1>
Une page principale est une page qui répertorie les enregistements et les liens correspondant à chaque enregistrement. Lorsque l'utilisateur clique sur un lien, une page d'informations détaillées s'ouvre et affiche des informations complémentaires sur l'enregistrement. Voici, par exemple, comment se présente une page principale du site intranet d'une société fictive :
Lorsqu'un utiliseur clique sur l'une des icônes Affichage reliées, une page d'informations détaillées apparait :
Une page de résultats est un type courant de page principale. Toutefois, contrairement à la page principale décrite dans cette section, la liste des enregistrements sur une page de résultats est déterminée par l'utilisateur et non par vous, le concepteur (l'utilisateur déterminé la liste en effectuant une recherche de base de données). Pour plus d'informations sur ce type de pages principales, voir « Création de pages pour l'exécution de recherches dans les bases de données », page 647.
Une page d'informations détaillées peut servir àmettre à jour ou à supprimer l'enregistrement affiché. Pour plus d'informations sur la mise à jour et la suppression des pages, voir « Création d'une page de mise à jour d'enregistements», page 665 et « Création d'une page de suppression d'enregistements», page 670.
Une page principale est constituée des éléments suivants :
- Un jeu d'enregistrements.
- Une mise en page pour afficher plusieurs enregistements à la fois.
- Un comportement de serveur Aller à la page d'informations détaillées pour ouvrir la page d'informations détaillées et transmettre l'ID de l'enregistrement sur lequel a cliqué l'utilisateur.
Une page d'informations détaillées est constituée des éléments suivants :
- Une mise en page pour afficher un seul enregistrement.
- Un jeu d'enregistrements pour conserver les détails de l'enregistrement.
- Un filtr de jeu d'enregistements pour recuperer un enregistrement spécifique à partir du tableau de base de données ou bien un comportement de serveur Déplacer vers un enregistrement spécifique pour se rendre à un enregistrement spécifique dans le jeu d'enregistements.
<h1 id="création-rapide-dun-ensemble-de-pages-principale-détails">Création rapide d'un ensemble de pages Principale-Détails</h1>
Pour creer rapidement un ensemble de pages Principale-Details, utilisez l'objet dynamique Ensemble de pages Principale-Details.
Remarque : notes que cet objet n'est pas pris en charge par PHP ni ASP.NET.
<h1 id="pour-terminer-lensemble-de-pages-principale-détails-à-laide-dun-objet-dynamique">Pour terminer l'ensemble de pages Principale-Détails à l'aide d'un objet dynamique :</h1>
1 Creezune page principale vierge et ajoutez-lui un jeu d'enregistrements.
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 d'informations détaillées.
La définition du jeu d'enregistrements peut être effectué par vous au moment de la conception (voir « Définition d'un jeu d'enregistrements», page 536) ou par l'utilisateur au moment de l'opération (voir « Création de pages pour l'exécution de recherches dans les bases de données», page 647).
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 d'informations détaillées extrait davantage de colonnes du même tableau afin de fournir des détails supplémentaires.
2 Ouvrez la page principale en mode Creation, puis choisissez Insertion > Objects d'application > Ensemble de pages Principale-Détails.
La boîte de dialogue Ensemble de pages Principale-Détails s'affiche.
3 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
4 Cliquez sur OK.
L'objet dynamique cree une page d'informations détaillées (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 d'informations détaillées.
5 Personnelise la mise en forme de la page principale et de la page d'informations détaillées en fonction de vos besoins.
Vouss pouvez personnaliser la mise en forme de chaque page à l'aide des outils de conception de page de Macromedia Dreamweaver MX. Vous pouze également modifier les comportements de serveur en double-cliquant dessus dans le panneau Comportements de serveur.
<h1 id="creation-dun-ensemble-de-pages-principale-détails-par-élément">Creation d'un ensemble de pages Principale-Détails par élément</h1>
Cette section explique comment创建工作 un ensemble de pages Principale-Détails sans utiliser l'objet dynamique Ensemble de pages Principale-Détails. Pour obtenir des instructions sur l'utilisation des objets dynamiques, voir « Créationrapide d'un ensemble de pages Principale-Détails», page 641.
Pour achever l'ensemble de pages Principale-Détails, vous doivent effectuer les tâches suivantes :
- Créez une page principale vierge et définièsez un jeu d'enregistrements.
- Affichez les enregistrements dans la page principale.
- Transmettez l'ID de l'enregistrement sélectionné par l'utilisateur à la page d'informations détaillées.
- Recherche l'enregistrement dans la base de données et affichez-le dans la page d'informations détaillées.
<h1 id="creation-dune-page-principale-et-définition-dun-jeu-denregistrements">Creation d'une page principale et définition d'un jeu d'enregistrements</h1>
La première étape consiste à creer une page principale vierge et à lui ajouter un jeu d'enregistrements.
La définition du jeu d'enregistrements peut être effectué par vous au moment de la conception (voir « Définition d'un jeu d'enregistrements », page 536) ou par l'utilisateur au moment de l'exécution (voir « Création de pages pour l'exécution de recherches dans les bases de données », page 647).
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 d'informations détaillées.
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 d'informations détaillées extrait davantage de colonnes du même tableau afin de fournir des détails supplémentaires.
<h1 id="affichage-des-enregistrements-dans-la-page-principale">Affichage des enregistrements dans la page principale</h1>
Après avoir créé une page principale vierge et définir un jeu d'enregistrements, vous devez afficher les enregistrements dans la page.
Pour afficher les enregistements dans la page principale :
1 Creez une mise en page pour afficher plusieurs enregistements et relier les colonnes du jeu à la page.
Une méthode courante consiste à créé dans la page principale un tableau HTML comportant deux lignes et à faire glisser un nombre limite de colonnes de jeu d'enregistrements depuis le panneau Liaisons (Fenetre > Liaisons) sur la seconde ligne du tableau (utilisez la première ligne pour afficher les en-têtes de colonne du tableau).
2 Creez une région repétée pour afficher plusieurs enregistements à la fois.
La région repétée est généralement appliquée à la ligne de tableau comportant le contenu dynamique.
<h1 id="ouverture-de-la-page-dinformations-détaillées-et-transmission-dun-id-denregistrement">Ouverture de la page d'informations détaillées et transmission d'un ID d'enregistrement</h1>
Après avoir créé la page principale et affiché les enregistrements, vous doivent creer des liens qui ouvrent la page d'informations détaillées et lui transmettre l'ID de l'enregistrement sélectionné par l'utilisateur.
Pour creer un lien, les utilisateurs PHP, ASP.NET et ColdFusion doivent en inclure les parametes URL dans le code. Pour plus d'informations, voir « Creation de parametes d'URL à l'aide de liens HTML», page 528. Inserez le contenu dynamique devant servir de lien entre des balises d'ancrage.
Pour ouvrir la page d'informations détaillées et lui transmettre un paramètre d'URL contenant l'ID de l'enregistrement sélectionné par l'utilisateur (utilisateurs ASP et JSP uniquement):
1 Dans la région repétée de la page principale, 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 (+) etCHOISEZ Aller à la page d'informations détaillées dans le menu contextualuel.
La boîte de dialogue Aller à la page d'informations détaillées s'affiché à l'écran.
3 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
<h1 id="4-cliquez-sur-ok-5">4 Cliquez sur OK.</h1>
Un lien spécial s'insère autour du texte seLECTIONné. Lorsque l'utilisateur clique sur le lien, le comportement de serveur Aller à la page d'informations détaillées transmet à cette même page un paramètre d'URL contenant l'ID de l'enregistrement. Par exemple, supposons un paramètre d'URL appelé id et la page d'informations détaillées customerdetail.asp ; l'URL pourrait seprésenter comme suit, lorsque l'utilisateur clique sur le lien :
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 deuxieme partie, ?id=43, constitue le paramètre d'URL. Elle précise à la page d'informations détaillées 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.
Pour plus d'informations sur les paramètres d'URL, voir « Description des paramètres d'URL », page 526.
<h1 id="recherche-et-affichage-de-lenregistrement-demandé-dans-la-page-dinformations-détaillées">Recherche et affichage de l'enregistrement demandé dans la page d'informations détaillées</h1>
Après avoir renseigné la page principale, vous devez rechercher l'enregistrement demandé dans la base de données et l'afficher dans la page d'informations détaillées. Cette procédure consiste à définir un jeu d'enregistements devant contérer un seul enregistrement, à savoir celui demandé par la page principale, et à lier les colonnes du jeu d'enregistements à la page.
Pour rechercher et afficher l'enregistrement demandé dans la page d'informations détaillées :
1 Passez à la page d'informations détaillées.
2 Dans le panneau Liaisons, cliquez sur le bouton plus (+) et choisissez Jeu d'enregistrements ou Ensemble de données (ASP.NET) dans le menu contextual.
La boîte de dialogue 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 selectionnez la connexion et la table de base de données qui fourniront les données destinées à votre jeu d'enregistrements.
4 Dans la zone Colonne, Sélectionnéz 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 d'informations détaillées possède généralement davantage de colonnes afin d'afficher plus de détails.
Si les yeux d'enregistrements sont différents, le jeu de la page d'informations détaillées doit avoir au moins une colonne en commun avec 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 maintainant la touche Ctrl (Windows) ou Commande (Macintosh) enfonnée.
5 Complétez la section Filtre comme suit, pour trouver et afficher l'enregistrement spécifique dans le paramètre d'URL transmis par la page de résultats :
- Dans le premier menu déroulant de la zone Filtre, Sélectionnez la colonne de la table de base de données contenant la valeur correspondant à celle du paramètre d'URL transmis par la page principale.
Si cette page transmet un numéro d'ID d'enregistrement, par exemple, choisissez la colonne contenant les nombres d'ID d'enregistrement.
- Dans le menu dérouulant 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 communique les informations identifiant la selection de l'utilisateur à la page d'informations détaillées dans un paramètre d'URL.
- Dans la quatrième zone de texte, tapez le nom de la valeur transmise par la page principale.
Par exemple, si la page principale a utilisé l'URL www.mysite.com/customerdetail.asp?id=43 pour ouvrir la page d'informations détaillées, tapez id.
Pour obtenir ce nom, vous pouvez également revenir à la page principale, ouvrir le panneau Comportements de serveur (Fenêtre > Comportements de serveur) et double-cliquer sur le comportement de serveur Aller à la page d'informations détaillées. Vérifiez le nom affché dans le champ Passer le paramètre de l'URL.
6 Cliquez sur OK.
Le jeu d'enregistrements s'affiche dans le panneau Liaisons.
7 Liez les colonnes du jeu d'enregistements à la page d'informations détaillées ; pour ce faire, seLECTIONnez les colonnes dans le panneau Liaisons (Fenêtre > Liaisons) et faites-les glisser sur la page.
<h1 id="modification-dun-ensemble-de-pages-principale-détails">Modification d'un ensemble de pages Principale-Détails</h1>
Après avoir créé l'ensemble de pages Principale-Détails à l'aide des comportements de serveur, modifier les divers éléments que les pages contiennent par le biais du panneau Comportements de serveur. Pour plus d'informations, voir « Modification de comportements de serveur», page 610.
Si vous avez créé des pages à l'aide de l'objet dynamique, vous devez également vous servir du panneau Comportements de serveur pour modifier les éléments qu'il a insérés. Cet objet ajoute les éléments suivants à la page principale :
- Un tableau de base comportant une région repétée pour afficher plusieurs enregistements à la fois.
- Une barre de navigation de jeu d'enregistrements.
- Un compteur d'enregistrements.
- Un comportement de serveur Aller à la page d'informations détaillées pour ouvrir la page d'informations détaillées et transmettre l'ID de l'enregistrement sur lequel a cliqué l'utilisateur.
L'objet dynamique ajoute également les éléments suivants à la page d'informations détaillées :
- Un tableau de base pour afficher un seul enregistrement.
- Un jeu d'enregistrements filtré pour rechercher et afficher l'enregistrement sur lequel l'utilisateur a cliué dans la page principale.
<h1 id="chapitre-40-2">CHAPITRE 40</h1>
<h1 id="réception-de-pages-pour-lexécution-de-recherches-dans-les-bases-de-données">Réception de pages pour l'exécution de recherches dans les bases de données</h1>
Les internautes ont désormais la possibilité d'effectuer diverses recherches dans vos bases de données par l'intémédiaire de pages que vous aurez préalablement créées avec Macromedia Dreamweaver MX.
Ce chapitre contient les sections suivantes :
- « Création de la page de recherche», page 648
- « Création de la page de résultats», page 649
- « Création d'une page d'informations détaillées pour une page de résultats», page 653
- « Utilisation des pages associées (utilisateurs ASP et JSP uniquement)», page 658
<h1 id="a-propos-des-pages-de-recherchede-résultats">A propos des pages de recherche/de résultats</h1>
Pour intégrer cette nouvelle caractéristique 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 recherche n'est veritablement executée à ce niveau, on l'appelle toute fois « page de recherche »
La deuxième page indispensable à la recherche est la page de résultats, qui n'est autre que le moteur même du processus. La page de résultats procède à l'exécution des 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'enregistements.
- Création d'un jeu composé des enregistements 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 la recherche se fait sur la base d'un seul critère, ajoutez des fonctions de recherche à votre application Web sans utiliser de requêtes ni de variables SQL. Contentez-vous de créé 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édigier une instruction SQL pour laquelle vous définisse de multiples variables.
<h1 id="création-de-la-page-de-recherche">Création de la page de recherche</h1>
Une page de recherche sur le Web se compose normalement de champs destinés à la saisie de criteres particuliers. Lorsque l'utilisateur clique sur le bouton Rechercher du formulaire, les criteres sont envoyés à une page de résultats sur le serveur. La charge de récapération des enregistrents 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.
Démarrez cette partie de votre application Web en créé deux pages : une page de recherche pour la saisie des critères et une page de résultats pour l'affichage des enregistements trouvés. Vous pouvez même combiner les deux pages pour n'en faire qu'une. La page de recherche doitContainir au minimum un formulaire HTML et un bouton Envoyer.
<h1 id="pour-ajouter-un-formulaire-html-à-une-page-de-recherche">Pour ajouter un formulaire HTML à une page de recherche :</h1>
1 Ouvrez la page de recherche ; dans le menu Insertion, choisissez Formulaire.
Un formulaire vierge est créé sur la page. Il est parfois nécessaire d'activer les éléments invisibles (Affichage > Assistances visuelles > Éléments invisibles) pour afficher les contours du formulaire, représentés par de fines lignes rouges.
2 Ajoutez des objets, vérables outils de saisie des critères de recherche ; pour cela, désissez Objets de formulaire dans le menu Insertion.
Les objets de formulaire sont de formes diverses (champs de texte, menus déroulants, listes, cases à cocher et cases d'options). La quantité d'objets qu'il est possible d'insérer dans un formulaire pour aider les utilisateurs à很好地 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.
Pour plus d'informations sur les objets de-formulaire, voir Chapitre 38, « Création de formulaires interactifs», page 613.
3 Ajoutez un bouton Envoyer au formulaire (Insertion > Objet de formulaire > Bouton).
4 Si vous poulez changer l'étiquette du bouton Envoyer, Sélectionnez ce bouton, ouvrez l'inspecteur de propriétés (Fenêtre > Propriétés) et entrez une nouvelle valeur dans la zone Étiquette.
Voici comment seprésenterait, par exemple, l'inspecteur de propriétés d'un bouton ayant pour intitulé « search » :
A的前提，il convient d'informer le formulaire du lieu où envoyer les criteres de recherche lorsque l'utilisateur clique sur le bouton Envoyer.
5 Sélectionné le formulaire à l'aide de la balise <form> dans le sélecteur de balises qui se trouvés dans la partie inférieure de la fenêtre Document, conformément à l'illustration :
6 Dans le champ Action (dans l'inspecteur de propriétés du formulaire), tapez le nom de filchier de la page de résultats qui va exécuter la recherche proprement dite dans la base de données.
7 Dans le menu déroulant Méthode,CHOISSEZ L'une des options suivantes pour déterminer comment les données doivent être envoyées au serveur :
- GET: envoie les données en les annexant à l'URL, sous forme de chaine 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. Vous allez maintainantmaker la page de résultats.
<h1 id="création-de-la-page-de-résultats">Création de la page de résultats</h1>
Suite à la saisie des critères de recherche par l'utilisateur, votre application doit extraire les enregistements de la base de données. Ce travail est en fait réalisé par la page de résultats.
Une page de résultats exécutés les tâches suivantes :
- Analyse des critères provenant de la page de recherche.
- Connexion à la base de données et recherche des enregistements.
- Création d'un jeu composé des enregistements trouvés.
- Affichage du contentu du jeu d'enregistrements.
Si la page de recherche ne présente qu'un seul critère (un unique champ de texte, par exemple), créez la page de résultats sans requête ni variable SQL. Il suffit de creator un jeu d'enregistrement élémentaire, auquel vous ajoutez un filtré qui supprime tous les enregistements non conformes au critère envoyé par la page de recherche. Pour obtenir des instructions, voir « Recherche sur la base d'un seul critère », page 649.
Si vous page de recherche comporte plusieurs critères, il vous faut rédigier une instruction SQL pour laquelle vous définièsez de multiples variables. Pour obtenir des instructions, voir « Recherche sur la base de plusieurs critères », page 651.
<h1 id="recherche-sur-la-base-dun-seul-critère">Recherche sur la base d'un seul critère</h1>
Si la page de recherche envoie un critère unique au serveur, vous pouze creator la page de résultats sans requête ni aucune variable SQL. Vous créez un jeu d'enregistements élémentaire auquel vous ajoutez un filtré qui supprime tous les enregistements non conformes au critère envoyés par la page de recherche.
Remarque: si vous appliquez plusieurs conditions de recherche, utilisez la boite de dialogue Jeu d'enregistements avancée pour définir votre jeu. La boite Jeu d'enregistements simplifie ne prend en charge qu'une seule condition de recherche. Pour plus d'informations, voir « Recherche sur la base de plusieurs criteres », page 651.
Pour creer le jeu d'enregistrements contenant les résultats de la recherche :
1 Ouvrez la page de résultats dans la fenêtre de document.
2 Creez un jeu d'enregistements ; pour ce faire, ouvre le panneau Liaisons (Fenetre > Liaisons), cliquez sur le bouton plus (+) et choisissez Jeu d'enregistements ou Ensemble de données (ASP.NET) dans le menu contextual.
3 Assurez-vous que la boîte de dialogue simple Jeu d'enregistements ou Ensemble de données 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 Tapez un nom pour le jeu d'enregistements etCHOisissez une connexion.
La connexion doit être établie avec une base de données contenant des informations susceptibles d'intéresse l'utilisateur.
5 Dans le menu déroulant Table, Sélectionné le tableau à consulter dans la base de données.
Remarque : si la recherche implique un seul critère, vous ne pouvez consulter des enregistements que dans un seul tableau. Pour consulter plusieurs tableaux simultanément, utilisez la boite de dialogue Jeu d'enregistements 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 cliquez sur les colonnes souhaitées tout en maintainant la touche Ctrl (Windows) ou Commande (Macintosh) enforcée.
Sélectionné les colonnes contenant les informations à afficher sur la page de résultats.
Pour le moment, ne fermez pas la boîte de dialogue Jeu d'enregistrements ou Ensemble de données. Vous allez l'utiliser pour extraire les critères envoyés par la page de recherche, et pour créé un filtre et supprimer tous les enregistrements non conformes aux critères de recherche.
<h1 id="pour-creer-le-filtre-dun-jeu-denregistrements">Pour creer le filtre d'un jeu d'enregistrements :</h1>
1 Dans le premier menu déroulant de la zone Filtre, Sélectionnez une colonne du tableau à 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 du tableau qui répertorie des noms de ville.
2 Dans le menu dérounant situé à côté du premier menu, sélectionnez le signe égal (=) (en exemple, la valeur par défaut).
Cette seLECTION indique que l'utilisateur ne souhaite inclure que les enregistrements dont les valeurs dans la colonne du tableau seLECTIONnée correspondent exactement à cette spécifiée sur la page de recherche.
3 Dans le troisième menu déroulant,CHOISSEZ Variable de formulaire ou Parametre d'URL, selon que vous empruntez les méthodes POST ou GET, respectivement.
Ce menu dérounant précise le lieu de stockage sur le serveur où figure actuellément la valeur envoyée par la page de recherche. Dans un environnement ASP, la valeur reste dans les ensembles Request.Form ou Request.QueryString, selon que vous empruntez la méthode POST ou la methode GET, respectivement.
4 Dans le quatrième champ, tapez le nom de l'objet de formulaire qui accepte le critère sur la page de recherche.
Pour obtenir ce nom, revenez à la page de recherche, cliquez sur l'objet de formulaire pour le selectionner et prenez note du nom qui s'affiche dans l'inspecteur de propriétés.
Par exemple, vous désirez creator un jeu d'enregistrements compensant uniquement les raids et randonnées dans un pays particulier. Supposons qu'une colonne du tableau se nomme TRIPLLOCATION et que le formulaire HTML de votre page de recherche utilise la méthode GET et contienne un objet Menu/Liste nommé Location qui affiche une liste de pays. Notre section Filtre doit seprésenter ainsi :
5 Cliquez sur Tester, entrez une valeur test et cliquez sur OK pour vous connecter à la base de données et creator une instance du jeu d'enregistements.
La valeur test est une simulation de la valeur qui sans cela aurait ete renvoyee de la page de recherche. Cliquez sur OK pour fermer le jeu d'enregistements.
6 Si le jeu d'enregistrements vous convient, cliquez sur OK.
Dreamweaver insère dans votre page un script côte serveur qui, lorsqu'il est exécuté sur le serveur, vérifie chaque enregistrement de la table de la 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'enregistrents. Le script en cours create un jeu d'enregistrents相对较ientement 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, voir « Affichage des enregistrements», page 653.
<h1 id="recherche-sur-la-base-de-plusieurs-critères">Recherche sur la base de plusieurs critères</h1>
Si la page de recherche envoie plusieurs criteres au serveur, il vous faut formuler une requête SQL pour la page de résultats et intégrer les criteres de recherche dans les variables SQL.
Après l'insertion par Dreamweaver de la requête SQL dans votre page et l'execution de la page 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'enregistrents. La requête SQL en cours créé un jeu d'enregistrents contenant uniquement les résultats de la recherche.
Par exemple, le service commercial peut être en mesure de dire quels sont, dans un certain secteur, les clients avec des revenus supérieur à 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'enregistements contenant uniquement les clients du secteur indiqué avec des revenus supérieur au niveau donné.
<h1 id="pour-rechercher-des-enregistrements-dans-une-base-de-données-à-laide-dune-instruction-sql">Pour rechercher des enregistrements dans une base de données à l'aide d'une instruction SQL :</h1>
1 Ouvrez la page de résultats dans Dreamweaver, puis creez un jeu d'enregistements ; pour ce faire, ouvre le panneau Liaisons (Fenetre > Liaisons), cliquez sur le bouton plus (+) et choisissez Jeu d'enregistements ou Ensemble de données (ASP.NET) dans le menu contextual.
2 Assurez-vous que la boîte de dialogue Jeu d'enregistements ou 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.
3 Tapez un nom pour le jeu d'enregistements etCHOisissez une connexion.
La connexion doit être établie avec une base de données contenant des informations susceptibles d'intéresse l'utilisateur.
4 Saisissez l'instruction Select dans la zone de texte SQL.
Assurez-vous que l'instruction comprend une clause Where (Où) 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 boite de dialogue Jeu d'enregistements avancée. Pour obtenir des instructions, voir « Rédaction d'instructions SQL en vue de la création d'un jeu d'enregistements avancé», page 538.
Pour比较好 comprendre la syntaxe SQL, voir « Initiation à SQL », page 709.
5 Entrez les variables SQL des paramètres 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'execution n'est renvoyée) et sa valeur d'exécution (généralement un object de serveur renfermant une valeur envoyée par un navigateur, tel 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 de texte, « LastName » et « Department »
Dans un environnement Macromedia 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 Cliquez sur Tester pour creer une instance du jeu d'enregistements à 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'enregistements test.
7 Si le jeu d'enregistrements vous convient, cliquez sur OK.
<h1 id="affichage-des-enregistrements">Affichage des enregistrements</h1>
Après avoir créé un jeu d'enregistements pour y insérer les résultats de la recherche, vous pouze, si vous le souhaitez, afficher les informations sur la page de résultats. L'affichage des enregistements est simple : il suffit de faire glisser des colonnes individuelles du panneau Liaisons sur la page de résultats. Ajoutez au besoin des liens de navigation pour aller et venir dans le jeu d'enregistements, ou créez une région repétée si vous préférez afficher plusieurs enregistements sur la page. Vous pouze également insérer des liens sur une page d'informations détaillées.
Pour plus d'informations sur l'affichage du contenu dynamique d'une page, voir :
- « Création d'une page d'informations détaillées pour une page de résultats», page 653
- « Ajout d'un contenu dynamique à une page Web», page 553
- « Affichage des enregistements de base de données », page 561
<h1 id="création-dune-page-dinformations-détaillées-pour-une-page-de-résultats">Création d'une page d'informations détaillées pour une page de résultats</h1>
Vos pages de recherche peuvent inclure une page qui comporte des informations détaillées à propos d'enregistements spécifique répertoriés sur la page de résultats. Sur la page de résultats, les enregistements sont normalement affichés dans une région repétée et chacun d'eux est connecté à un lien. Lorsqu'un utilisateur clique sur l'un des liens, la page d'informations détaillées s'ouvre pour afficher d'autres données relatives à l'enregistrement sélectionné.
Cette section contient les rubriques suivantes :
« Transformation d'une page de résultats en page d'informations détaillées », page 654
« Création de la page d'informations détaillées à l'aide d'un comportement de serveur (utilisateurs ASP et JSP uniquement)», page 655
« Création de la page d'informations détaillées à l'aide d'un jeu d'enregistements filtré», page 656
<h1 id="transformation-dune-page-de-résultats-en-page-dinformations-détaillées">Transformation d'une page de résultats en page d'informations détaillées</h1>
Une région repétée sur votre page de résultats permet d'afficher plusieurs enregistements simultanément et chaque enregistrement qui s'y trouve doit avoir un lien vers la page d'informations détaillées. Le lien doit non seulement déclencher l'ouverture de la page d'informations détaillées, mais aussi informer cette même page de l'identité de l'enregistrement que l'utilisateur a selectionné. Ce type de lien se crée à l'aide du comportement de serveur Aller à la page d'informations détaillées (utilisateurs ASP et JSP uniquement).
Pour creer un lien, les utilisateurs PHP, ASP.NET et ColdFusion doivent en inclure les parametes URL dans le code. Pour plus d'informations, voir « Creation de parametes d'URL à l'aide de liens HTML », page 528.
Pour transformer la page de résultats en page d'informations détaillées (utilisateurs ASP et JSP uniquement):
1 Creez une page d'informations détaillées vierge (Fichier > Nouveau) et donnez-lui un nom. Mettez la page de côte pour l'instant. Vous y reviendrez plus tard.
2 Ouvrez la page de résultats dans Dreamweaver.
3 Vérifiez que les résultats sont contenus à l'intérieur d'une région repétée. Pour obtenir des instructions, voir « Affichage de plusieurs comportements», page 568.
4 Dans la région repétée, Sélectionnez le texte ou l'image devant assurer la fonction de lien. Si vous travailliez dans la fenêtre Live Data, Sélectionnez le texte ou l'image dans la première région affichée.
Remarque: le texte ou l'image de votre可以选择 peut être dynamique.
5 Creez le lien à la page d'informations détaillées ; pour ce faire, ouvrez le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton plus (+) etCHOISSEZ ALLER à la page d'informations détaillées dans le menu contextual.
La boîte de dialogue Aller à la page d'informations détaillées s'affiche à l'écran.
6 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
7 Cliquez sur OK.
La page de résultats communique la valeur à la page d'informations détaillées par le biais d'un paramètre d'URL, qui n'est autre qu'une simple variable annexée à l'URL et qui sert à ouvrir la page d'informations détaillées. Par exemple, supposons un paramètre d'URL appelé id et la page d'informations détaillées customerdetailed.asp ; l'URL pourrait seprésenter comme suit, lorsque l'utilisateur clique sur le lien :
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 deuxieme partie, ?id=43, constitue le paramètre d'URL. Elle précise à la page d'informations détaillées 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.
<h1 id="creation-de-la-page-dinformations-détaillées-à-laide-dun-comportement-de-serveur-utilisateurs-asp-et-jsp-uniquement">Creation de la page d'informations détaillées à l'aide d'un comportement de serveur (utilisateurs ASP et JSP uniquement)</h1>
Après avoir transformé la page de résultats, poursuivez votre travail en complétant la page d'informations détaillées. Vous avez la possibilité d'élaborer une page d'informations détaillées de deux façon différentes: par la combinaison d'un jeu d'enregistrements courant et d'un comportement de serveur, ou à l'aide d'un jeu d'enregistrements filtré uniquement. Cette section présente la première option (utilisateurs ASP et JSP uniquement). Pour plus d'informations sur la deuxième possibilité, voir la section « Création de la page d'informations détaillées à l'aide d'un jeu d'enregistrements filtré », page 656.
Premièrement, mettez la page d'informations détaillées en forme à l'aide des outils de création de Dreamweaver. Pour plus d'informations, voir « Création d'un ensemble de pages Principale-Détails», page 639.
Deuxièmement, définièsez un jeu d'enregistrements pour la page, ou copiez et collez le jeu d'enregistrements depuis la page de résultats. La page d'informations détaillées extraira les détails d'enregistrement de ce jeu. Pour obtenir des instructions, reportez-vous aux sections « Définition d'un jeu d'enregistrements », page 536 et « Copie d'un jeu d'enregistrements d'une page à une autre», page 551.
Troisiement, liez les colonnes du jeu d'enregistements à la page. Dans le panneau Liaisons (Fenêtre > Liaisons), selectionnez les colonnes dans le jeu d'enregistements et faites-les glisser sur la page.
Quatrièmement, ajoutez un comportement de serveur pour décrypter l'ID d'enregistrement dans le paramètre d'URL communiqué par la page de résultats, puis récapérez l'enregistrement. Si vous négligez cette étape, le serveur récapèrera le premier enregistrement du jeu.
Pour récapérer un enregistrement particulier au moyen d'un comportement de serveur (utilisateurs ASP et JSP uniquement):
1 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton plus (+),CHOISSEZ DEPLACER vers l'enregistrement dans le menu déroulant, puis Deplacer vers un enregistrement spécifique.
La boîte de dialogue Déplacer vers un enregistrement spécifique s'affiché à l'écran.
2 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
3 Cliquez sur OK.
La prochaine fais qu'un navigateur effectuera une requête portant sur la page, cette dernière lira l'ID de l'enregistrement dans le paramètre d'URL transmis par le navigateur et passera à l'enregistrement spécifique dans le jeu d'enregistrents.
<h1 id="creation-de-la-page-dinformations-détaillées-à-laide-dun-jeu-denregistements-filtré">Creation de la page d'informations détaillées à l'aide d'un jeu d'enregistements filtré</h1>
L'elaboration d'une page d'informations détaillées peut également passer par le filtrage du jeu d'enregistements de sorte à n'avoir plus qu'un seul enregistrement (celui que l'utilisateur a sélectionné sur la page de résultats). Le jeu étant réduit à un seul et unique enregistrement, cette méthode s'avère只想 avantageuse au niveau des performances de votre application.
Premièrement, mettez la page en forme à l'aide des outils de création de Dreamweaver. Pour plus d'informations, voir « Création d'un ensemble de pages Principale-Détails», page 639.
Deuxièmement, définièsez un jeu d'enregistrements pour la page, ou copiez et collez le jeu d'enregistrements depuis la page de résultats. La page d'informations détaillées extraira les détails d'enregistrement de ce jeu. Pour obtenir des instructions, reportez-vous aux sections « Définition d'un jeu d'enregistrements », page 536 et « Copie d'un jeu d'enregistrements d'une page à une autre», page 551.
Troisiement, creez un filtré pour récapérer l'enregistrement indiqué sur la page de résultats. Si vous utilisez la boîte de dialogue Jeu d'enregistements simplifiée, creez le filtré en complétant les champs de la zone Filtre. Si vous utilisez la boîte de dialogue Jeu d'enregistements avancée, créez le filtré en apportant des modifications à votre requête SQL.
<h1 id="pour-récapérer-un-enregistrement-spécifique-au-moyen-dun-contrôle">Pour récapérer un enregistrement spécifique au moyen d'un contrôle :</h1>
1 Vérifiez que la page d'informations détaillées contient un jeu d'enregistrements.
2 Ouvrez le jeu d'enregistements en double-cliquant sur son nom dans le panneau Liaisons (Fenêtre > Liaisons).
3 Assurez-vous que la boîte de dialogue simple Jeu d'enregistements ou Ensemble de données 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. Si Dreamweaver vous informe qu'il ne peut pas l'ouvoir (généralement parce que votre requête est trop complexe pour afficher la boîte de dialogue simple), utilisez une requête SQL pour trouver l'enregistrement ; poursuivez avec la procédure suivante dans cette section.
4 Complétez la section Filtre comme suit, pour trouver et afficher l'enregistrement spécifique dans le paramètre d'URL transmis par la page de résultats :
- Dans le premier menu déroulant de la zone Filtre, Sélectionnez la colonne de la table de la base de données contenant des valeurs qui correspondent à celle du paramètre d'URL transmis par la page de résultats.
Si cette page transmet un numéro d'ID d'enregistrement, par exemple, choisissez la colonne contenant les numéro d'ID d'enregistrement.
- 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 de résultats communique les informations identifiant la sélection de l'utilisateur à la page d'informations détaillées dans un paramètre d'URL.
- Dans la quatrième zone de texte, tapez le nom de la valeur transmise par la page de résultats. Par exemple, si la page de résultats a utilisé l'URL www.monsite.com/customerdetail.asp?id=4 pour ouvrir la page d'informations détaillées, tapez id.
Si vous avez utilisé le comportement de serveur Aller à la page d'informations détaillées sur la page de résultats, vous pouvez tout aussi bien revenir à la page de résultats, ouvrir le panneau Comportements de serveur (Fenêtre > Comportements de serveur) et double-cliquer sur le comportement de serveur Aller à la page d'informations détaillées pour obtenir le nom. Vérifiez le nom affché dans le champ Passer le paramètre de l'URL.
5 Cliquez sur OK.
6 Si cela n'est pas déjà fait, liez les colonnes du jeu d'enregistrements à la page ; pour ce faire, Sélectionnez les colonnes dans le panneau Liaisons (Fenêtre > Liaisons) et faites-les glisser sur la page.
<h1 id="pour-récapierer-un-enregistrement-spécifique-au-moyen-dune-requête-sql">Pour récapierer un enregistrement spécifique au moyen d'une requête SQL :</h1>
1 Vérifiez que la page d'informations détaillées contient un jeu d'enregistrements.
2 Ouvrez le jeu d'enregistrements en double-cliquant sur son nom dans le panneau Liaisons (Fenêtre > Liaisons).
3 Assurez-vous que la boîte de dialogue Jeu d'enregistrements avancée s'affiche à l'écran. Si la boîte de dialogue Jeu d'enregistrements simplifiée s'affiche à la place, cliquez sur le bouton Avancé pour ouvrir sa version avancée.
4 Ajoutez une clause Where (Où) dans votre instruction SQL pour trouver l'enregistrement que l'utilisateur a sélectionné sur la page de résultats.
La clause Where doit containir une variable indiquant la valeur transmise dans le paramètre d'URL. Dans l'exemple suivant, la variable s'appele varDept :
SELECT FROM EMPLOYEES WHERE DEPARTMENT = 'varDept'
Pour比较好 comprendre la syntaxe SQL, voir « Initiation à SQL », page 709.
5 Entre la valeur de la variable transmise par la page de résultats dans le paramètre d'URL. 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.
Dans l'exemple ASP suivant, la page de résultats transmet un paramètre d'URL appelle Département.
6 Cliquez sur OK.
7 Si cela n'est pas déjà fait, lieez les colonnes du jeu d'enregistrements à la page ; pour ce faire, selectionnee les colonnes dans le panneau Liaisons (Fenetre > Liaisons) et faites-les glisser sur la page.
<h1 id="utilisation-des-pages-associées-utilisateurs-asp-et-jsp-uniquement">Utilisation des pages associées (utilisateurs ASP et JSP uniquement)</h1>
Dans certains cas, vous pouvez, si vous le souhaitez, afficher une page qui ne soit ni une page de recherche, ni une page de résultats, ni une page d'informations détaillées, et ce sans perdre les données reçues d'un formulaire HTML ou d'un paramètre d'URL. Plutôt que d'ouvrir la page associée comme il se doit normalement, crééz le lien nécessaire en vous aidant du comportement de serveur Aller à la page associée. Le lien qui en résultat déclenché l'ouverture de la page associée et transmet à cette dernière des critères existants. Vous pouvez, par exemple, communiquer les critères de recherche d'une page à une autre, de manière à ce que l'utilisateur n'ait pas à les taper plusieurs fois.
Remarque : ce comportement de serveur est uniquement disponible pour les pages ASP et JSP.
Avant d'ajouter un comportement de serveur Aller à la page associée, assurez-vous que la page recoit les critères d'un formulaire HTML (autrement dit, l'attribut ACTION du formulaire spécifique la page, ou d'un paramètre d'URL, comme quand la page est la destination de lien d'une autre page dotée du comportement de serveur Aller à la page associée.
Pour creer un lien communiquant les parametes de formualeire existants a une page associée :
1 Sur la page, selectionnez la chaine de texte ou l'image devant assurer la fonction de lien avec la page associée.
2 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton plus (+) et désissez Aller à la page associée dans le menu contextual.
La boîte de dialogue Aller à la page associée s'affiché à l'écran.
3 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
4 Cliquez sur OK.
Lorsqu'un utilisateur clique sur le nouveau lien, la page transmet les criteres à la page associée par le biais des paramètres d'URL. Prenons l'exemple d'un paramètre de formulaire appelé
«lastname » et d'une page associée appelée special Offer.asp. L'URL pourrait se désenter comme suit lorsque l'utilisateur clique sur le lien :
http://www.mysite.com/special Offer.asp?lastname Anderson
La première partie de l'URL, http://www.mysite.com/special Offer.asp, ouvre la page associée. La deuxième partie, ?lastname=Anderson, constitue le paramètre d'URL qui transmet le paramètre de formulaire d'origine à la page associée.
<h1 id="chapitre-41-2">CHAPITRE 41</h1>
<h1 id="creation-de-pages-permettant-de-modifier-des-bases-de-données">Creation de pages permettant de modifier des bases de données</h1>
Dreamweaver Macromedia MX est livre avec un ensemble de comportements de serveur permettant à l'utilisateur d'insérer, de mettre à jour et de supprimer des enregistements dans une base de données à partir de son navigateur. Les objets d'application permettent également de creator des formulaires HTML entierement fonctionnels permettant d'insérer ou de mettre à jour des enregistements.
Ce chapitre contient les sections suivantes :
- « Création d'une page d'insertion d'enregistrements », page 662
- « Création d'une page de mise à jour d'enregistrements », page 665
- « Création d'une page de suppression d'enregistrements », page 670
- « Modification d'une base de données à l'aide de procédures stockées», page 673
- « Modification d'une base de données à l'aide des commandes ASP», page 678
- « Modification d'une base de données à l'aide d'instructions préparées JSP», page 680
<h1 id="création-dune-page-dinsertion-denregistrements">Création d'une page d'insertion d'enregistrements</h1>
Votre application peut containir une page permettant à l'utilisateur d'insérer de nouveaux enregistements dans une base de données. La page ci-dessous, par exemple, insère un nouvel enregistrement dans la base de données des salariés d'une entreprise :
Une page d'insertion d'enregistrements est constituée de deux éléments :
- un-formulaire HTML permettant aux utilisateurs de saisir des données;
- un comportement de serveur Insérer l'enregistrement pourmettre a jour la base de données.
Voupe ouvez inclure ces éléments dans la page en une seule opération à l'aide de l'objet dynamique 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.
<h1 id="creation-rapide-dune-page-dinsertion">Creation rapide d'une page d'insertion</h1>
Voupeinser les elements de base d'une page d'insertion en une seule operation a l'aide de I'objet dynamique Formulaire d'insertion d'enregistrement. Cet objet insere dans la page un formuale HTML et un comportement de serveur Inserer I'enregistrement.
Vouavesegalementla possiblitédinsererceselementsseparemmenta l'aidedesoutilsde formulaireetudpanneauComportementsdeserveur.Pourplusd'informations,voir «Creation d'une page d'insertion elementpar element»,page663.
Après avoir placé les éléments sur la page, vous pouvez personnaliser le formulaire à votre convenance à l'aide des outils de conception de Dreamweaver ou modifier le comportement Insérer l'enregistrement à l'aide du panneau Comportements de serveur.
Pour creer la page d'insertion à l'aide de l'objet dynamique Formulaire d'insertion d'enregistrement :
1 Ouvrez la page en mode Création, puis choisissez Insertion > Objets d'application > Formulaire d'insertion d'enregistrement.
La boîte de dialogue Insérer le formulaire d'insertion d'enregistrement s'affiche.
2 Complétez les options de la boîte de dialogue.
Pour obtenir des instructions, cliquez sur le bouton Aide de la boite de dialogue.
3 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 de tableau simple, que vous pouvez ensuite aisément personnelier à l'aide des outils de conception de page de Dreamweaver (assurez-vous qu'aucun objet de formulaire ne dépasse les limites du formulaire).
Pour modifier le comportement de serveur, ouvre le panneau Comportements de serveur (Fenêtre > Comportements de serveur) et double-cliquez sur le comportement Insérer un enregistrement.
<h1 id="creation-dune-page-dinsertion-élément-par-élément">Creation d'une page d'insertion élément par élément</h1>
Vou puez inserer séparément les éléments de base d'une page d'insertion à l'aide des outils de formulaire et du panneau Comportements de serveur.
Vou puez également les insérer simultanément à l'aide de l'objet dynamique Formulaire d'insertion d'enregistrement. Pour plus d'informations, voir « Création rapide d'une page d'insertion», page 662.
La première étape consiste à insérer dans la page un-formulaire HTML qui permettra aux utilisateurs de saisir les données.
Pour insérer un-formulaire HTML dans une page d'insertion :
1 Creez une nouvelle page (Fichier > Nouveau) et définissez-en la presentation à l'aide des outils de conception de Dreamweaver.
2 Pour ajouter le formulaire HTML, placez le point d'insertion à l'endetroit où le formulaire doit apparaître, puis choisissez Insertion > Formulaire.
Un formulaire vierge est créé sur la page. Il est parfois nécessaire d'activer les éléments invisibles (Affichage > Assistances visuelles > Éléments invisibles) pour afficher les contours du formulaire, représentés par de fines lignes rouges.
3 Pour nommer le formulaire HTML, commencez par le selectionner en cliquant sur la balise <form> au bas de la fenetre de document, ouvre l'inspecteur de propriétés (Fenetre > Propriétés), puis entrez un nom dans la zone appropriée.
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 (Insertion > Objet de formulaire) pour chaque colonne de la base de données dans laquelle vous souhaitez insérer des enregistements.
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 listedes ou des menus, des cases à cocher et des boutons radio.
Pour plus d'informations sur les objets de formulaire, voir « Création de formules interactifs», page 613.
5 Ajoutez un bouton Envoyer au formulaire (Insertion > Objet de formulaire > Bouton).
6 Si vous poulez changer l'étiquette du bouton Envoyer, sélectionnez ce bouton, ouvrez l'inspecteur de propriétés (Fenêtre > Propriétés) et entrez une nouvelle valeur dans la zone Étiquette.
Voici, par exemple, l'inspecteur de propriétés d'un bouton intitulé « Insert Record »:
L' étape suivante consiste à ajouter le comportement de serveur Insérer un enregistrement pour insérer des enregistements dans une base de données.
Pour insérer un comportement de serveur destiné à l'insertion d'enregistrements dans une base de données :
Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton plus (+) etCHOISSEZ InsERer un enregistrement dans le menu contextuel (les utilisateurs ASP.NET doivent choose insERer l'enregistrement des I'envoi du formulaire).
La boîte de dialogue Insérer un enregistrement s'affiche.
1 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
2 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.
<h1 id="création-dune-page-de-mise-à-jour-denregistrements">Création d'une page de mise à jour d'enregistrements</h1>
Votre application peut containir une page permettant à l'utilisateur demettre à jour des enregistrements existants dans une base de données. Ce type de page est généralement une page d'informations détaillées fonctionnant en tandem avec une page de résultats. Cette dernière permet à l'utilisateur de désirir l'enregistrement à mettre à jour, puis communique cechioix à la page de mise à jour.
Une page de mise à jour est constituée de trois éléments :
- Un jeu d'enregistrements filtré permettant de recupérer l'enregistrement à partir d'une base de données.
- Un formulaire HTML permettant aux utilisateurs de modifier les données de l'enregistrement.
- Un comportement de serveur Mettre à jour l'enregistrement permettant demettre à jour la base de données.
Voupez inserer le formualeir HTML et le comportement de serveur dans la page en une seule opération à l'aide de l'objet dynamique Formulaire de mise à jour des enregistements ou séparément à l'aide des outils de formualeir de Dreamweaver et du panneau Comportements de serveur.
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.
<h1 id="identification-de-lenregistrement-àmettre-à-jour">Identification de l'enregistrement àmettre à jour</h1>
Lorsqu'un utilisateur peutmettre a jour un enregistrement, il doit d'abord localiser celui-ci dans la base de données. Vousdezoncreer une page de recherche et de résultats qui fonctionnera en tandem avecla page de mise a jour. Pourobtenirdes instructions sur la creationde pages de recherche et de résultats,voir «Creation de pages pour l'execution de recherches dans les bases de données»,page 647.
La page de résultats indique à la page de mise à jourquel est l'enregistrement àmettre à jour en le lui transmettant sous forme de paramètre d'URL. Par conséquent, vous doivent associier à la page de résultats un comportement de serveur Aller à la page d'informations détaillées désignant la page de mise à jour comme la page d'informations détaillées. Pour obtenir des instructions, voir « Transformation d'une page de résultats en page d'informations détaillées »,page 654.
<h1 id="récupération-de-lenregistrement-àmettre-à-jour">Récupération de l'enregistrement àmettre à jour</h1>
Une fois que la page d'enregistrement a lu le paramètre d'URL identifient l'enregistrement àmettre à jour, elle doit le recuperer à partir de la base de données et le stocker provisoirement dans un jeu d'enregistrentes.
<h1 id="pour-récapucérer-lenregistrement-àmettre-à-jour">Pour récapucérer l'enregistrement àmettre à jour :</h1>
1 Dans le panneau Liaisons (Fenêtre > Liaisons), cliquez sur le bouton plus (+) et désissez Jeux d'enregistements ou Ensemble de données (ASP.NET).
Si la boîte de dialogue avancée s'affiche, cliquez sur le bouton Simple pour ouvrir sa version simplifiée.
2 Nommez le jeu d'enregistements et indiquez où se trouvent les données àmettre à jour à l'aide des menus déroulants Connexion et Table.
3 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.
4 Configurez la zone Filtre de manière à ce que la valeur de votre colonne à clé soit égale à celle du paramètre d'URL correspondant transmis par la page de résultats.
Ce type de filtrer create un jeu d'enregistements ne contenant que l'enregistrement spécifique par la page de résultats. Par exemple, si vous colonnne à 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 :
Pour plus d'informations, voir « Création de la page d'informations détaillées à l'aide d'un jeu d'enregistements filtré», page 656.
<h1 id="5-cliquez-sur-ok-3">5 Cliquez sur OK.</h1>
Lorsque l'utilisateur selectionnera un enregistrement sur la page de résultats, la page de mise à jour généra un jeu d'enregistrents contenant uniquement l'enregistrement selectionné.
<h1 id="achévement-rapide-de-la-page-de-mise-à-jour">Achévement rapide de la page de mise à jour</h1>
Voussupoezinsererlesdouderniersellementsd'unepagede misea jour en uneseule operationa l'aide del'objet dynamique Formulaire de mise a jour des enregistements.Cet objet insere dans la page un formualer HTML et un comportement de serveur Mettre a jour l'enregistrement.
Pour que vous puissiez utiliser l'objet dynamique, 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écapucérer (voir « Identification de l'enregistrement à mettre à jour », page 666 et « Récupération de l'enregistrement àmettre à jour »,page 666).
Vouavesegalementla possibilited'insererseparemle formualerHTMLetcomportement de serveur Mettre a jour l'enregistrement dans la pagea l'aide des outils de formualeiret du panneau Comportements de serveur (voir « Achvement de la page de mise a jour element par element»,page 668).
Après avoir placé les objets dynamiques sur la page, 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.
Pour creer la page de mise a jour a l'aide de I'objet dynamique Formulaire de mise a jour des enregistements :
1 Ouvrez la page en mode Création, puis choisissez Insertion > Objects d'application > Formulaire de mise à jour des enregistements.
La boîte de dialogue Insérer le formulaire de mise à jour des enregistements s'affiche.
2 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
3 Cliquez sur OK.
Cet objet insère dans votre 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.
<h1 id="achèvement-de-la-page-de-mise-à-jour-élément-par-élément">Achèvement de la page de mise à jour élément par élément</h1>
Vou puez inserer séparation 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.
Pour ce faire, il faut que votre application Web soit capable d'identifier l'enregistrement àmettre à jour et que votre page de mise à jour soit en mesure de le recupérer (voir « Identification de l'enregistrement àmettre à jour », page 666 et « Récupération de l'enregistrement àmettre à jour », page 666).
Voupez egalent les inserer simultanement a l'aide de l'objet dynamique Formulaire de mise à jour d'enregistements (voir « Achèvement rapide de la page de mise à jour», page 667).
La première étape consiste à insérer dans la page un-formulaire HTML destiné à permettre aux utilisateurs de modifier les données.
Pour insérer un-formulaire HTML dans une page de mise à jour d'enregistrements :
1 Creezune page (Fichier > Nouveau).
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'endetroit où le formulaire doit apparaître, puis choisissez Insertion > Formulaire.
Un formuale vierge est créé sur la page. Il est parfois nécessaire d'activer les éléments invisibles (Affichage > Assistances visuelles > Éléments invisibles) pour afficher les contours du formualeire, représentés par de fines lignes rouges.
4 Pour nommer le formulaire HTML, commencez par le selectionner en cliquant sur la balise <form> au bas de la fenetre de document, ouvre l'inspecteur de propriétés (Fenetre > Propriétés), puis entrez un nom dans la zone appropriée.
Vous n'vez 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 Mettre à jour un enregistrement définit automatiquement ces attributs.
5 Insérez un objet de formulaire (Insertion > Obj de formulaire) pour chaque colonne à mettre à jour dans la 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 listedes ou des menus, des cases à cocher et des boutons radio.
A chaque objet de formulaire doit correspondre une colonne dans le jeu d'enregistements défini plus tout. La seule exception est la colonne à clé unique, qui ne doit pas avoir d'objet de formulaire correspondant.
Pour plus d'informations sur les objets de formulaire, voir « Création de formulaires interactifs», page 613.
6 Ajoutez un bouton Envoyer au formulaire (Insertion > Objet de formulaire > Bouton).
7 Si vous voulez changer l'étiquette du bouton Envoyer, sélectionnez ce bouton, ouvrez l'inspecteur de propriétés (Fenêtre > Propriétés) et entrez une nouvelle valeur dans la zone Étiquette.
Voici, par exemple, l'inspecteur de propriétés d'un bouton intitulé « Update Record »:
L' étape suivante consiste à afficher l'enregistrement dans le formulaire en liant les objets de formulaire aux colonnes de la table de base de données.
<h1 id="pour-afficher-lenregistrement-dans-le-formulaire">Pour afficher l'enregistrement dans le formulaire :</h1>
1 Assurez-vous que vous avez défini au préalable un jeu d'enregistrements pour stocker l'enregistrement àmettre à jour.
Pour plus d'informations, voir « Récupération de l'enregistrement àmettre à jour »,page 666.
2 Faites glisser une colonne du panneau Liaisons (Fenêtre > Liaisons) vers l'objet de formulaire correspondant sur la page.
Pour plus d'informations, voir « Création de paramètres d'objet (ActiveX, Flash, etc.) dynamiques », page 559.
L' étape finale consiste à insérer le comportement de serveur Mettre à jour l'enregistrement pourmettre à jour la base de données une fois que l'utilisateur a modifie l'enregistrement.
Pour insérer 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 désisissez Mettre à jour l'enregistrement dans le menu contextualuel.
La boîte de dialogue Mettre à jour l'enregistrement s'affiche.
2 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
3 Cliquez sur OK.
Dreamweaver ajoute à la page un comportement de serveur qui permet aux utilisateurs demettre à jour les enregistements d'une 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.
<h1 id="creation-dune-page-de-suppression-denregistrements">Creation d'une page de suppression d'enregistrements</h1>
Votre application peut compter une page permettant à l'utiliser de supprimer des enregistrents existants dans une base de données. Ce type de page est généralement une page d'informations détaillées fonctionnant en tandem avec une page de résultats. Cette dernière permet à l'utiliser de désirir l'enregistrement à supprimer, puis communique ce besoin à la page de suppression.
Une page de suppression est constituée de quatre éléments :
- Un jeu d'enregistrements filtré permettant de recupérer l'enregistrement à partir d'une base de données.
- Un affichage en lecture seule des données sur le point d'être supprimées.
- Un bouton Envoyer pour envoyer la commande de suppression au serveur.
- Un comportement de serveur Supprimer l'enregistrement permettant de mettre à jour la base de données.
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.
<h1 id="identification-de-lenregistrement-à-supprimer">Identification de l'enregistrement à supprimer</h1>
Lorsqu'un utilisateur peut supprimer un enregistrement, il doit d'abord localiser celui-ci dans la base de données. Vous devez donc creator une page de recherche et de résultats qui fonctionnera en tandem avec la page de suppression. Pour obtenir des instructions sur la création de pages de recherche et de résultats, voir « Création de pages pour l'exécution de recherches dans les bases de données», page 647.
La page de résultats indique à la page de suppression quel est l'enregistrement à supprimer en le lui transmettant sous forme de paramètre d'URL. Par conséquent, vous doivent associier à la page de résultats un comportement de serveur Aller à la page d'informations détaillées désignant la page de suppression comme la page d'informations détaillées. Pour obtenir des instructions, voir « Transformation d'une page de résultats en page d'informations détaillées », page 654.
<h1 id="récupération-de-lenregistrement-à-supprimer">Récupération de l'enregistrement à supprimer</h1>
Une fois que la page d'enregistrement a lu le paramètre d'URL identifient l'enregistrement à supprimer, elle doit récapérer ce dernier à partir de la base de données et le stocker provisoirement dans un jeu d'enregistements.
<h1 id="pour-récapuérer-lenregistrement-à-supprimer">Pour récapuérer l'enregistrement à supprimer :</h1>
1 Dans le panneau Liaisons (Fenêtre > Liaisons), cliquez sur le bouton plus (+) et désisissez Jeu d'enregistements ou Ensemble de données (ASP.NET).
Si la boîte de dialogue avancée s'affiche, cliquez sur le bouton Simple pour ouvrir sa version simplifiée.
2 Nommez le jeu d'enregistements et indiquez où se trouvent les données à supprimer à l'aide des menus déroulants Connexion et Table.
3 Dans la zone Colonnes,CHOISSEZ l'option Tout pour selectionner toutes les colonnes de la table de base de données.
4 Configurez la zone Filtre de manière à ce que la valeur de votre colonne à clé soit égale à celle du paramètre d'URL correspondant transmis par la page de résultats.
Ce type de filtrer create un jeu d'enregistements ne contenant que l'enregistrement spécifique par la page de résultats. Par exemple, si vous colonne à clé contient des informations d'ID d'enregistrement et s'appelle PRID, et si la page principale transmet les informations d'ID d'enregistrement correspondantes dans le paramètre d'URL appelé id, votre zone Filtre doit avoir l'aspect suivant :
Pour plus d'informations, voir « Création de la page d'informations détaillées à l'aide d'un jeu d'enregistements filtré », page 656.
5 Cliquez sur OK.
Lorsque l'utilisateur sélectionne un enregistrement sur la page de résultats, la page de suppression génére un jeu d'enregistrents contenant uniquement l'enregistrement sélectionné.
Vou allez ensuite insérer un affichage en lecture seule des données à supprimer.
<h1 id="affichage-des-données-à-supprimer">Affichage des données à supprimer</h1>
Il est conseilé d'afficher l'enregistrement avant de le supprimer afin de permettre à l'utilisateur de confirmer ou d'annuler la suppression.
Pour insérer un affichage en lecture seule de l'enregistrement à supprimer :
1 Assurez-vous que vous avez défini au préalable un jeu d'enregistrements pour stocker l'enregistrement à supprimer.
Pour plus d'informations, voir « Récupération de l'enregistrement à supprimer », page 670.
2 Faites glisser une colonne du panneau Liaisons (Fenetre > Liaisons) vers la page.
Le contenu dynamique apparaît sur la page. Vous pouvez faire glisser et déposer le contenu dynamique sur la page telquel ou le placer dans un tableau HTML. Pour plus d'informations, voir « Ajout d'un texte dynamique», page 554.
<h1 id="envoi-de-la-commande-de-suppression-au-serveur">Envoi de la commande de suppression au serveur</h1>
La page de suppression utilise un bouton Envoyer pour envoyer la commande de suppression au serveur. Pour insérer un bouton Envoyer dans votre page, vous doivent créé un-formulaire HTML. Ce formulaire peut containir uniquement le bouton Envoyer.
Pour insérer un bouton Envoyer dans une page de suppression :
1 En mode Création, placez le point d'insertion à l'endetroit où vous souhaitez voir apparaitre le bouton Envoyer etCHOISSEZ Formulaire dans le menu Insertion.
Un formuale vierge est créé sur la page. Il est parfois nécessaire d'activer les éléments invisibles (Affichage > Assistances visuelles > Éléments invisibles) pour afficher les contours du formualeire, représentés par de fines lignes rouges.
2 Pour nommer le formulaire HTML, commencez par le selectionner en cliquant sur la balise <form> au bas de la fenetre de document, ouvre l'inspecteur de propriétés (Fenetre > Propriétés), puis entrez un nom dans la zone appropriée.
Vous n'vez 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 Supprimer l'enregistrement définit automatiquement ces attributs.
3 Ajoutez un bouton Envoyer au formulaire (Insertion > Objet de formulaire > Bouton).
4 Si vous poulez changer l'étiquette du bouton Envoyer, sélectionnez ce bouton, ouvrez l'inspecteur de propriétés (Fenêtre > Propriétés) et entrez une nouvelle valeur dans la zone Étiquette.
Voici, par exemple, l'inspecteur de propriétés d'un bouton intitulé « Delete Record »:
Voulezinsereensuitelecomportementde serveur Supprimer l'enregistrementafindemettrea jourla base dedonnéesune foisqueI'utilisateur aura cliqued sur le boutonEnvoyer.
<h1 id="suppression-de-lenregistrement-de-la-base-de-données">Suppression de l'enregistrement de la base de données</h1>
L' étape finale consiste à insérer le comportement de serveur Supprimer l'enregistrement afin demettre à jour la base de données une fois que l'utilisateur aura cliqué sur le bouton Envoyer.
Pour insérer un comportement de serveur destiné à la suppression de l'enregistrement de la base de données :
1 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton plus (+) et désissez Supprimer l'enregistrement dans le menu contextual.
La boîte de dialogue Supprimer l'enregistrement s'affiche.
2 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
3 Cliquez sur OK.
Dreamweaver ajoute à la page un comportement de serveur qui permet aux utilisateurs de supprimer des enregistements d'une table de base de données en cliquant sur le bouton Envoyer du formulaire.
<h1 id="modification-dune-base-de-données-à-laide-de-procédures-stockées">Modification d'une base de données à l'aide de procédures stockées</h1>
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. Elle contient du code SQL qui permet notamment d'insérer, de partager à jour ou de supprimer des enregistrents. 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'applé plusieurs valeurs sous la forme de paramètres de sortie.
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 compilation de la procédure. Si vous savez qu'une tâche de base de données sera executée un grand nombre de fois ou qu'elle sera exécutée par différentes applications, il est conseilé d'utiliser une procédure stockée pour améliorer l'efficacité des opérations effectuees dans la base de données.
Remarque : les bases de données mySQL et Microsoft Access ne prennt pas en charge les procedures 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 creer 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.
Les méthodes d'utilisation des procédures stockées variant selon le modele de serveur utilisé.
<h1 id="exécution-dune-procedure-stockée-dans-coldfusion">Exécution d'une Procedure stockée dans ColdFusion</h1>
Dans le cas de pages Macromedia ColdFusion dans Dreamweaver, l'execution d'une Procedure stockée requiert l'ajout d'un comportement de serveur Procedure stockée.
Pour ajouter une Procedure stockée à une page ColdFusion :
1 Dans Dreamweaver, ouvre la page qui doit executer la Procedure stockée.
2 Dans le panneau Liaisons, cliquez sur le bouton plus (+), puis selectionnez Procedure stockée. La boîte de dialogue Procedure stockée s'affiche.
3 Complétez les options de la boîte de dialogue.
Les boites de dialogue de ColdFusion 4 et ColdFusion MX ne sont pas identiques.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
4 Cliquez sur OK.
Une fois la boîte de dialogue Procedure stockée fermée, Dreamweaver insère dans votre page un code ColdFusion qui, lorsqu'il s'excude sur le serveur, appelle une procedure stockée dans la base de données. La Procedure stockée effectue alors une opération dans la base de données, celle que l'insertion d'un enregistrement.
Si la procédure stockée accepte des paramètres, vous pouvez创建工作 une page qui recueilles valeurs de paramètre et les envoie à la page en même temps que la procédure stockée. Ainsi, il est possible de创建工作 une page qui recueilles valeurs de paramètre auprès des utilisateurs à l'aide de paramètres d'URL ou d'un formulaire HTML.
<h1 id="exécution-dune-procédure-stockée-dans-asp">Exécution d'une procédure stockée dans ASP</h1>
Dans le cas de pages ASP dans Dreamweaver, 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, voir « Description des objets de commande ASP », page 678.
Pour ajouter une procedure stockée à une page ASP :
1 Dans Dreamweaver, ouvre la page qui doit executer la Procedure stockée.
2 Dans le panneau Liaisons, cliquez sur le bouton plus (+), puis selectionnez Commande (Procedure stockée).
La boîte de dialogue Commande s'affiche.
3 Saisissez le nom de la commande, choisissez une connexion à une base de données contenant la procédure stockée, puis choisissez Procedure stockée dans le menu contextual Type.
4 Pour selectionner votre procedure stockée, développer que la branché Procedures stockées dans la zone Éléments de base de données,CHOISSEZ LA PROCEDURE STOCKÉE dans la liste, puis cliquez sur le bouton Procedure.
5 Entre 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, Dreamweaver insère dans votre page un code ASP qui, lorsqu'il s'excédure sur le serveur, appelle un objet de commande exécutant 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, celle 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 compilationée de l'objet chaque fois que la procédure stockée est executée. Si vous savez que la commande sera executée un grand nombre de fois, il est conseilé d'utiliser une seule version compilationée de l'objet pour améliorer l'efficacité des opérations effectuees dans la base de données. Cependant, si la commande n'est executée qu'une ou deux fois, ceci risque de ralentir votre application Web car le système doit s'intrompre 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 vous base de données ne les prend pas en charge, vous risquez de receivevoir un message d'erreur lors de l'execution de la page. Basculez en mode Code et définissez la propriété Préparé sur f a l s e.
Si la procédure stockée accepte des paramètres, vous pouvez creator une page qui recueilles valeurs de paramètre et les envoie à la page en même temps que la procédure stockée. Ainsi, il est possible de creator une page qui recueilles valeurs de paramètre auprès des utilisateurs à l'aide de paramètres d'URL ou d'un formulaire HTML.
<h1 id="exécution-dune-procédure-stockée-dans-aspnet">Exécution d'une procédure stockée dans ASP.NET</h1>
Dans le cas de pages ASP.NET dans Dreamweaver, l'exécution d'une procédure stockée requiert l'ajout d'un comportement de serveur Procédure stockée.
Pour ajouter une Procedure stockée à une page ASP.NET :
1 Dans Dreamweaver, ouvre la page qui doit executer la Procedure stockée.
2 Dans le panneau Liaisons, cliquez sur le bouton plus (+) , puis selectionnez Procedure stockée. La boîte de dialogue Procedure stockée s'affiche.
3 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
4 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'execute sur le serveur, execute 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.
Si la procédure stockée accepte des paramètres, vous pouvez creator une page qui recueilles valeurs de paramètre et les envoie à la page en même temps que la procédure stockée. Ainsi, il est possible de creator une page qui recueilles valeurs de paramètre auprès des utilisateurs à l'aide de paramètres d'URL ou d'un formulaire HTML.
<h1 id="exécution-dune-procédure-stockée-dans-jsp">Exécution d'une procédure stockée dans JSP</h1>
Dans le cas de pages JSP dans Dreamweaver, l'exécution d'une procédure stockée requiert l'ajout d'un comportement de serveur Appelable.
Pour ajouter une Procedure stockée à une page JSP :
1 Dans Dreamweaver, ouvrez la page qui doit exécuter la méthode stockée.
2 Dans le panneau Liaisons, cliquez sur le bouton plus (+), puis choisissez Appelable (Procedure stockée).
La boîte de dialogue Appelable (Procedure stockée) s'affiche.
3 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
4 Cliquez sur OK.
Une fois la boîte de dialogue Appelable (Procedure stockée) fermée, Dreamweaver insère dans cette page un code JSP qui, lorsqu'il s'exécute sur le serveur, appelle une Procedure stockée dans la base de données. La Procedure stockée effectue alors une opération dans la base de données, celle que l'insertion d'un enregistrement.
Si la procédure stockée accepte des paramètres, vous pouvez创建工作 une page qui recueilles valeurs de paramètre et les envoie à la page en même temps que la procédure stockée. Ainsi, il est possible de创建工作 une page qui recueilles valeurs de paramètre auprès des utilisateurs à l'aide de paramètres d'URL ou d'un formulaire HTML.
<h1 id="modification-dune-base-de-données-à-laide-des-commandes-asp">Modification d'une base de données à l'aide des commandes ASP</h1>
A l'aide de Dreamweaver, vous pouvez creator des objets de commande ASP qui inserent, mettent à jour et suppriment des enregistements dans une base de données. Il vous suffit d'indiquer à l'objet de commande l'instruction SQL qui effectue l'opération dans la base de données.
Vou puez également lui indiquer une procédure stockée qui effectue l'opération. Pour plus d'informations, voir « Exécution d'une procédure stockée dans ASP», page 674.
<h1 id="description-des-objets-de-commande-asp">Description des objets de commande ASP</h1>
Un objet de commande est un objet de serveur qui effectue une opération dans une base de données. Il peut containir 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éfinièsez 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 executée un grand nombre de fois, il est conseilé d'utiliser une seule version compilation de l'objet pour améliorer l'efficacité des opérations effectuees 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 lorsqu vous définisse cette propriété sur t rue. Elle pourrait meme ignorer la requete de preparation de la commande et definir la propriete Préparé sur f a s e.
Sur une page ASP, un objet de commande est créé par l'intermédiaire de scripts. Cependant, Dreamweaver vous permet de creer des objets de commande sans avoir a écrire une seule ligne de code ASP. La suite de cette section explique comment creer des objets de commande ASP qui modifie les enregistements d'une base de données à l'aide des outils de développement rapide d'applications RAD (Rapid Application Development) dans Dreamweaver.
<h1 id="creation-dune-commande-utilisant-sql-pour-modifier-une-base-de-données">Creation d'une commande utilisant SQL pour modifier une base de données</h1>
Voussouvezinsere,mettrea jour ou supprimeres des enregistrements dans une base de données à l'aide d'un objet de commande ASP contenant une instruction SQL.
<h1 id="pour-creer-un-objet-de-commande">Pour creer un objet de commande :</h1>
1 Dans Dreamweaver, ouvre la page ASP qui doit executer la commande.
2 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton plus (+), puis choisissez Commande.
La boîte de dialogue Commande s'affiche.
3 Saisissez le nom de la commande,CHOISSEZ une connexion a une base de données contenant les enregistements à modifier, puis selectionnez l'opération de modification que la commande doit effectuer (Insérer, Mettre a jour ou Supprimer).
Dreamweaver rédigé 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 désissiez 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éfinisse les variables SQL dans la zone Variables.
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'écuation de la zone Variables.
Une fois la boîte de dialogue fermée, 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 enregistements 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 compilation de l'objet chaque fois que la commande est executée. Pour modifier ce paramètre, basculesz en mode Code et définissez la propriété Préparé sur false.
Dans l'exemple ci-dessus, vous pourriez ensuite creer une page incluant un-formulaire HTML, qui permettrait aux utilisateurs de saisir des données d'enregistrement. Le formulaire HTML contiendrait trois champs de texte (txtFirstName, txtLastName et txtDept) et un bouton Envoyer. Il utiliserait la méthode GET et enverrait les valeurs des champs de texte à la page contenant votre commande.
<h1 id="modification-dune-base-de-données-à-laide-dinstructions-préparées-jsp">Modification d'une base de données à l'aide d'instructions préparées JSP</h1>
A l'aide de Dreamweaver, vous pouze creator des instructions préparées JSP qui insèrent, mettent à jour et suppliment des enregistements dans une base de données. 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.
<h1 id="description-des-instructions-préparées-jsp">Description des instructions préparées JSP</h1>
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 qu'elle instruction SQL valide. Par exemple, une instruction préparée peutContainir une instruction SQL qui renvoie un jeu d'enregistements ou qui insère, met à jour ou supprime des enregistements 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éé 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 conseilé d'utiliser une seule instance de l'objet pour améliorer l'efficacité des opérations effectuees 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 creator 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éé 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é replacçant la valeur de la variable SQL. La deuxième ligne cree un objet d'instruction préparée appelé mystatement.
Voudevezensuiteattribueraune valeura la variableSQL, comme suit:
mystatement.setString(1, request.getParameter("myURLparam"));
La méthode setString attribue la valeur à la variable et accepte deux arguments. Le premier argument spécifique 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écifique 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 non-chaine. Par exemple, pour attribuer un entier à une variable, vous doiventstressment.setInt().
Pour terminer, vous devez générer un jeu d'enregistrements, comme suit :
ResultSet myresults = mystatement.executeQuery();
La suite de cette section explique comment creer des instructions préparées JSP à l'aide des outils de développement rapide d'applications (RAD) dans Dreamweaver. Ces outils vous permettent de creer des instructions préparées sans avoir à écrire une seule ligne de code JSP.
<h1 id="creation-dune-instruction-préparée-modifiant-un-enregistrement-de-base-de-données">Creation d'une instruction préparée modifiant un enregistrement de base de données</h1>
Voussoussezinsere,mettrea jour ou supprimeres des enregistrements dans une base dedonnées à l'aide d'une instruction préparée JSP.
<h1 id="pour-creer-une-instruction-preparée">Pour creer une instruction preparée :</h1>
1 Dans Dreamweaver, ouvre la page JSP qui doit executer 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 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
4 Cliquez sur OK.
Une fois la boîte de dialogue fermée, Dreamweaver insère dans votre page un code JSP qui, lorsqu'il s'excècut sur le serveur, créée une instruction préparée qui insère, met à jour ou supprime des enregistements dans la base de données.
<h1 id="chapitre-42">CHAPITRE 42</h1>
<h1 id="creation-de-pages-limitant-laccès-à-votre-site">Creation de pages-limitant l'accès à votre site</h1>
Macromedia Dreamweaver MX you permit de creer les pages suivantes afin de limiter l'accès à votre site :
- Une page qui demande à l'utilisateur de s'enregistrer lors de sa première visite (voir « Création d'une page d'enregistrement », page 683)
- Une page qui permet aux utilisateurs enregistrés de se connecter au site (voir « Création d'une page de connexion », page 687)
- Des pages que seuils les utilisateurs autorisés peuvent consulter (voir « Création d'une page à laquelle seuils les utilisateurs autorisés ont accès », page 689)
Remarque : Dreamweaver n'a pas de comportements de serveur d'authentication pour les pages ASP.NET ou PHP.
<h1 id="création-dune-page-denregistrement">Création d'une page d'enregistrement</h1>
Vou puez inclure dans voitre application Web une page qui oblige les utilisateurs a s'enregister la premiere fois qu'ils visitent leur site.
Remarque : Dreamweaver n'apasdecomportementdeserveurd'authentication pour les pages ASP.NET ou PHP.
La page suivante, par exemple, demande aux utilisateurs dont c'est la première visite de s'enregistrer :
Une page d'enregistrement se compose des éléments structurels suivants :
- une table de base de données, pour stocker les informations de connexion des utilisateurs ;
- un-formulaire HTML, qui permet aux utilisateurs de désirir un nom d'utilisateur et un mot de passer
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, pourmettre a jour la table de base de données des utilisateurs du site ;
- un comportement de serveur Vérifier le nouveau nom d'utilisateur, pour s'assurer que le nombre entre par l'utilisateur n'est pas deja utilisé.
Remarque : vous pouvez supprimer ou modifier les propriétés de n'importe quel comportement de serveur que vous ajoutez à une page (voir « Modification de comportements de serveur », page 610).
<h1 id="stockage-des-informations-de-connexion-des-utilisateurs">Stockage des informations de connexion des utilisateurs</h1>
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'utiliser et mot de passer. Si vous voulez octroyer différents droits d'accès aux utilisateurs, ajoutez une colonne droit d'accès (voir « Stockage des privilèges d'accès dans la base de données des utilisateurs », page 691).
Si vous voulez définir un mot de passer commun à tous les utilisateurs du site, configurer vos reapplication de base de données (Microsoft Access, Microsoft SQL Server, Oracle, etc.) de façon à entre par défaut ce mot de passer dans chaque nouvel enregistrement utilisateur. Dans la plupart des applications de base de données, vous avez la possibilité d'afector une valeur par défaut à une colonne pour chaque nouvel enregistrement créé. Définissez le mot de passer par défaut.
La table de base de données permet également de stocker d'autres informations utiles sur l'utilisateur.
<h1 id="définition-par-lutilisateur-du-nom-et-du-mot-de-passer">Définition par l'utilisateur du nom et du mot de passer</h1>
Pour permettre à l'utilisateur deCHOISIR son nom d'utilisateur et son mot de passage, vous devez ajouter un formulaire HTML à la page d'enregistrement (lorsque cela est possible).
<h1 id="pour-laisser-lutilisateur-désirir-son-nom-et-son-mot-de-passer">Pour laisser l'utilisateur désirir son nom et son mot de passer :</h1>
1 Creez une nouvelle page (Fichier > Nouveau) et mettez en forme votre page d'enregistrement à l'aide des outils de création de Dreamweaver.
2 Pour ajouter le formulaire HTML, placez le point d'insertion à l'endetroit où le formulaire doit apparaitre, puis choisissez Insertion > Formulaire.
Un formuale vierge est créé sur la page. Il est parfois nécessaire d'activer les éléments invisibles (Affichage > Assistances visuelles > Éléments invisibles) pour afficher les contours du formualeire, représentés par de fines lignes rouges.
3 Pour nommer le formulaire HTML, commencez par le selectionner en cliquant sur la balise <form> au bas de la fenetre de document, ouvre l'inspecteur de propriétés (Fenetre > Propriétés), puis entrez un nom dans la zone appropriée.
Vous n'avoce 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'utiliseur clique sur le bouton Envoyer. car le comportement de serveur Insérer un enregistrement les définit automatiquement (voir la section « Mise à jour de la table des utilisateurs dans la base de données », page 685).
4 Ajoutez des champs de texte (Insertion > Obj de formulaire > Champ de texte) afin de permettre à l'utilisateur d'entrée un nom et un mot de passe.
Le formulaire peut également accompter d'autres objets permettant d'enregistrer d'autres données personnelles.
Il est conseilé 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 conseilé d'organiser les objets de formulaire en les plaçant dans un tableau HTML. Pour plus d'informations sur les objets de formulaire, voir « Création de formulaires interactifs», page 613.
5 Ajoutez un bouton Envoyer au formulaire (Insertion > Object de formulaire > Bouton).
6 Si vous poulez changer l'étiquette du bouton Envoyer, Sélectionnez ce bouton, ouvrez l'inspecteur de propriétés (Fenêtre > Propriétés) et entrez une nouvelle valeur dans la zone Étiquette.
Voici, par exemple, l'inspecteur de propriétés d'un bouton portant l'étiquette « Register » :
L' étape suivante consiste à ajouter le comportement de serveur Insérer un enregistrement pour insérer des enregistements dans la table des utilisateurs dans la base de données.
<h1 id="mise-à-jour-de-la-table-des-utilisateurs-dans-la-base-de-données">Mise à jour de la table des utilisateurs dans la base de données</h1>
Le comportement de serveur Insérer un enregistrement permet de mettre à jour la table des utilisateurs dans la base de données.
Pourmettrea jourla table desutilisateurs dans la base de données:
1 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton plus (+) et désissez Insérer un enregistrement dans le menu contextual.
La boîte de dialogue Insérer un enregistrement s'affiche.
2 Utilisez les menus déroulants Connexion et Insérer dans la table pour spécifique la table des utilisateurs dans la base de données.
3 Dans la zone de texte Àpès l'insertion, aller à, indiquez la page à ouvrir après insertion de l'enregistrement dans la table.
4 Dans le menu dérouulant Obtenir les valeurs de,CHOISSEZ le formulaire HTML utilisé pour obtenir le nom et le mot de passer de l'utilisateur.
Dreamweaver désit automatiquement le premier-formulaire apparaisant sur votre page.
5 Indique ce que chaque objet de votre formulaire doitmettre a jour dans la table de base de données. Pour cela, selectionnez un objet de formulaire dans la liste Elements de formulaire, puis choisissez une colonne de la table dans le menu contextuel Colonne et un type de données dans le menu Envoyer en tant que.
Le type de données est celui qu'attend la colonne de la table de base de données (texte, numérique, valeurs de case à cocher booléennes). Les colonnes mot de passage et nom d'utilisateur accueillent généralement du texte.
Dans la liste Éléments de-formulaire, par exemple,clinque dans la zone de texte Mot de passer,choisissez la colonne de la table de la base de données dans laquelle le mot de passage doit etre enregistré,puis choisissez le type de données Texte.
Répétez cette procédure pour chaque object de formulaire de la liste Éléments de formulaire.
6 Cliquez sur OK.
L' étape finale consiste à s'assurer que le nom d'utilisateur n'est pas déjà utilisé par un autre utiliser enregistré.
<h1 id="vérification-du-caractère-unique-du-nom-dutilisateur">Vérification du caractère unique du nom d'utilisateur</h1>
Ajoutez un comportement de serveur pour vérifier que le nom d'utilisateur entre n'est pas deja utilisé par un autre'utilisateur enregistré.
Lorsque l'utilisateur clique sur le bouton Envoyer, sur la page d'enregistrement, le comportement de serveur compare le nom d'utilisateur entre à tous les autres noms déjà enregistrrés dans la table de la base de données. Siaucun doublon n'est trouve,le comportement de serveur poursuit normalement l'insertion de I'enregistrement.En cas de doublon,le comportement de serveur annule I'insertion de I'enregistrement et ouvre une nouvelle page (qui alerte généralement l'utilisateur que le nom choisi est deja pris).
Pour s'assurer que le nom d'utilisateur choisi est unique :
1 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton plus (+) et, dans le menu contextualuel,CHOISSEZ Authentication de l'utilisateur > Vérifier le nouveau nom d'utilisateur.
La boîte de dialogue Vérifier le nouveau nom d'utilisateur s'affiche.
2 Complétez les options de la boîte de dialogue.
Pour obtenir des instructions, cliquez sur le bouton Aide de la boite de dialogue.
3 Cliquez sur OK.
Dreamweaver ajoute un comportement de serveur à une page d'enregistrement. 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.
<h1 id="création-dune-page-de-connexion">Création d'une page de connexion</h1>
Votre application Web peutContainir une page qui permettra aux utilisateurs enregistrres de se connecter au site.
Remarque : Dreamweaver n'a pas de comportements de serveur d'authentication pour les pages ASP.NET ou PHP.
La page suivante, par exemple, invite les utilisateurs déjà enregistrés à se connecter :
Une page de connexion se compose des éléments structurels suivants :
- une table de base de données des utilisateurs déjà enregistrés;
- un-formulaire HTML permettant aux'utilisateurs d'entrée leur nom d'utilisateur et leur mot de passer ;
- un comportement de serveur Connecter l'utilisateur qui vérifie que le nom d'utilisateur et le mot de passage sont valides.
Une variable de session correspondant au nom d'utilisateur est créé pour l'utilisateur lorsqu'il se connecte avec succès.
Remarque : vous pouvez supprimer ou modifier les propriétés de n'imporce quel comportement de serveur que vous ajoutez à une page (voir « Modification de comportements de serveur », page 610).
<h1 id="creation-dune-table-de-base-de-données-regroupant-les-utilisateurs-déjà-enregistrés">Creation d'une table de base de données regroupant les utilisateurs déjà enregistrés</h1>
Vous avez besoin d'une table de base de données regroupant les utilisateurs deja enregistrres pour vérifier que le nom d'utilisateur et le mot de passer saisis dans la page de connexion sont valides. Pour creer cette table, utilisez Your application de base de données et une page d'enregistrement. Pour plus d'informations, voir « Creation d'une page d'enregistrement », page 683.
<h1 id="connexion-des-utilisateurs">Connexion des utilisateurs</h1>
Ajoutez un formulaire HTML à la page afin de permettre aux utilisateurs de se connecter en entrant un nom d'utilisteur et un mot de passer.
Pour permettre aux utilisateurs de se connecter :
1 Creez une page (Fichier > Nouveau) 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'endetroit où le formulaire doit apparaître, puis choisissez Insertion > Formulaire.
Un formuale vierge est créé sur la page. Il est parfois nécessaire d'activer les éléments invisibles (Affichage > Assistances visuelles > Éléments invisibles) pour afficher les contours du formualeire, représentés par de fines lignes rouges.
3 Pour nommer le formulaire HTML, commencez par le selectionner en cliquant sur la balise <form> au bas de la fenetre de document, ouvre l'inspecteur de propriétés (Fenetre > Propriétés), puis entrez un nom dans la zone appropriée.
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 Connecter l'utilisateur définit automatiquement ces attributs (voir « Vérification du nom d'utilisateur et du mot de passer», page 688).
4 Ajoutez au formulaire un champ de texte nom d'utilisateur et mot de passage (Insertion > Objet de 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 Ajoutez un bouton Envoyer au formulaire (Insertion > Objet de formulaire > Bouton).
6 Si vous poulez changer l'étiquette du bouton Envoyer, Sélectionnez ce bouton, ouvrez l'inspecteur de propriétés (Fenêtre > Propriétés) et entrez une nouvelle valeur dans la zone Étiquette.
Voici, par exemple, l'inspecteur de propriétés d'un bouton portant l'étiquette « Log In » :
L' étape suivante consiste à ajouter le comportement de serveur Connecter l'utilisateur pour vérifier que le nom d'utilisateur et le mot de passée entrés sont valides.
<h1 id="vérification-du-nom-dutilisateur-et-du-mot-de-passer">Vérification du nom d'utilisateur et du mot de passer</h1>
Voudevezajouterlecomportementde serveurConnector l'utilisateur pourverifierque le nom d'utilisateur et le mot de passere ntrés sont valides.
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 première page 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é).
Pour vérifier le nom d'utilisateur et le mot de salle :
1 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton plus (+) et, dans le menu contextualuel,CHOisissez Authentication de l'utilisateur > Connecter l'utilisateur.
La boîte de dialogue Connecter l'utilisateur s'ouvre.
2 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
3 Cliquez sur OK.
Dreamweaver ajoute un comportement de serveur à la page de connexion dont l'objet est déverifier que le nom d'utilisateur et le mot de passer saisis par le visiteur sont valides.
<h1 id="creation-dune-page-à-laquelle-seuls-les-utilisateurs-autorisés-ont-accès">Creation d'une page à laquelle seuls les utilisateurs autorisés ont accès</h1>
Votre application Web peut containir une page protégée à laquelle seuls les utilisateurs autorisés ont accès.
Remarque : Dreamweaver n'a pas de comportements de serveur d'authentication pour les pages ASP.NET ou PHP.
Si un utilisateur essaire, par exemple, de contourner la page de connexion en tapant 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'acceder à 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.
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 pouze, par exemple, attendre de receivevoir 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. ÀpRES réception du paiement, vous pouze 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 utiliser n'ayant pas réussi à établier 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 suivants :
- Une colonne supplémentaire dans la table de base de données des utilisateurs pour enregistrer les privilèges d'accès de chaque utiliser.
- Un comportement de serveur Restreindre l'accès à la page.
Dans le deuxième cas, les utilisateurs ne possedant pas les privilèges d'accès requis sont redirigés vers une autre page.
Dans les deux cas, 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. Pour plus d'informations, voir « Déconnexion des utilisateurs», page 691.
<h1 id="renvoi-des-utilisateurs-non-autorisés-vers-une-autre-page">Renvoi des utilisateurs non autorisés vers une autre page</h1>
Pour empêcher les utilisateurs non autorisés d'acceder à une page, ajoutez-lui le comportement de serveur Restreindre l'accès à la page. Ce comportement redirige l'utilateur vers une autre page s'il tente de contourner la page de connexion en tapant l'URL de la page protégée dans le navigateur, ou s'il est connecté mais tente d'acceder à 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 pouze attribuer à plusieurs pages du site les mêmes droits d'accès, vous pouvez copier-coller ces droits d'une page vers une autre.
Pour rediriger des utilisateurs non autorisés vers une autre page :
1 Ouvrez la page à protégier.
2 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton plus (+) et, dans le menu contextualuel,CHOISEZ Authentication de l'utilisateur > Restreindre l'accès à la page.
La boîte de dialogue Restreindre l'accès à la page s'affiche.
3 Complétez les options de la boîte de dialogue.
Pour plus d'informations, cliquez sur le bouton Aide de la boite de dialogue.
4 Cliquez sur OK.
Dreamweaver ajoute un comportement de serveur à la page qui permet aux seuils utilisateurs autorisés d'afficher la page.
Pour copier-coller les droits d'accès d'une page sur d'autres pages du site :
1 Ouvrez la page protégée et choisissez le comportement Restreindre l'accès à la page dans le panneau Comportements de serveur, et non dans le menu contextualuel plus (+).
2 Cliquez sur la flèche dans le coin supérieur droit du panneau et choisissez Copier dans le menu contextualuel.
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 choisissez Coller dans le menu contextual.
5 Repetez les étapes 3 et 4 pour chaque page à protéger.
<h1 id="stockage-des-privilèges-daccès-dans-la-base-de-données-des-utilisateurs">Stockage des privilèges d'accès dans la base de données des utilisateurs</h1>
Ce bloc structurel n'est nécessaire que si vous voulez octroyer différents privilèges à certains des utilisateurs connectés. Si vous demandez simplement que l'utilisateur se connecte, alors vous n'avez pas besoin de stocker des privilèges d'accès.
Si vous poulez 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écifique 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'afector 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 cette site (Invité, par exemple), puis changez manuellement les exceptions (en remplaçant Invité par Administrateur, par exemple). L'utilisateur a maintainant accès à toutes les pages administrateur.
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 pouze définir plusieurs privilèges d'accès pour vos pages (en octroyant l'accès d'une page à tous les invites et tous les administrateurs, par exemple), vous doivent définir ces privilèges au niveau de la page, et non de la base de données. Pour plus d'informations, voir « Renvoi des utilisateurs non autorisés vers une autre page», page 690.
<h1 id="déconnexion-des-utilisateurs">Déconnexion des utilisateurs</h1>
Lorsque l'utilisateur établit la connexion avec succès, une variable de session composée du nom d'utilisateur est créé. 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 remerciation).
Vou puez appeler le comportement de serveur Deconnecter l'utilisateur lorsque l'utilisateur clique sur un lien ou qu'une page spécifique est chargée.
<h1 id="pour-ajouter-un-lien-permettant-à-lutilisateur-de-se-déconnecter">Pour ajouter un lien permettant à l'utilisateur de se déconnecter :</h1>
1 Sur la page, selectionnez la chaîne de texte ou l'image devant assurer la fonction de lien.
2 Dans le panneau Comportements de serveur, cliquez sur le bouton plus (+) et choisissez Authentication de l'utilisateur > Deconnecter l'utilisateur.
La boîte de dialogue Connecter l'utilisateur s'ouvre.
3 Indiquez une page à ouvrir lorsque l'utilisateur clique sur le lien.
Il s'agit généralement d'une page de fin de session ou de remerciement.
4 Cliquez sur OK.
<h1 id="pour-déconnecter-un-utilisateur-lors-du-chargement-dune-page-spécifique">Pour déconnecter un utilisateur lors du chargement d'une page spécifique :</h1>
1 Ouvrez la page qui se chargerà 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 choisisse
Authentication de l'utilisateur > Déconnecter l'utilisateur.
La boîte de dialogue Connecter l'utilisateur s'ouvre.
3 Choisissez l'options Se déconnecter au chargement de la page.
4 Cliquez sur OK.
<h1 id="partie-x-annexes">Partie X Annexes</h1>
Obtenez une aide supplémentaire pour développer vos applications Web.
Cette partie du manuel contient les chapitres suivants :
Annexe A, « Guide du début en base de données »
Annexe B, « Initiation à SQL »
Annexe C, « Définition d'un DSN sous Windows »
Annexe D, « Aide-mémoire : Balises ASP.NET Macromedia »
<h1 id="annexa-2">ANNEXA</h1>
<h1 id="guide-du-début-en-base-de-données">Guide du début en base de données</h1>
Cette année s'adresse aux utilisateurs de Macromedia Dreamweaver MX qui n'ont que peu ou pas d'expérience en matière de base de données ou de connexion à une base de données. Il explique des concepts généraux, non des procédures spécifique. Pour une mise en pratique de ces concepts, voir le reste du guide.
Cette annexe déscrit comment conceiveir une base de données, mais n'explique pas comment en créé une dans une application telle que Microsoft Access ou SQL Server. Cette procédure est expliquée dans la documentation papier ou électronique qui vous a été remise avec votre système de base de données.
Cette annexe contient les sections suivantes :
- « A propos des bases de données», page 695
- « Principes fondamentaux pour la conception d'une base de données», page 696
- « Description des connexions aux bases de données», page 702
<h1 id="a-propos-des-bases-de-données">A propos des bases de données</h1>
Une base de données est constituée d'enregistrements, ensembles de données liées traitées comme une entité unique. La fiche signalétique d'un footballeur, par exemple, peut être considérée comme un enregistrement car elle réunit le nom, la photographie, l'équipe et les statistiques du joueur. En termes de base de données, chacune de ces informations s'appelle un champ :
« l'enregistrement » du footballeur comporte un champ nom, un champ photographie, un champ équipe et plusieurs champs statistiques.
Un ensemble d'enregistrements partageant les mêmes champs s'appelle une table, ce format étant pratique pour ce type d'informations : chaque colonne représenté un champ et chaque ligne un enregistrement. En fait, le mot colonne est synonyme de champ, et le mot ligne est synonyme d'enregistrement.
Une base de données peut contenir plusieurs tables, chacune etant designee par un nom unique et pouvant etre soit liee aux autres,soit independante.
Un sous-ensemble de données extrait d'une ou de plusieurs tables s'appelle un jeu d'enregistrements (ou un jeu de données (DataSet) dans ASP.NET). C'est également une table, puisqu'il s'agit d'un ensemble d'enregistrements possédant les mêmes colonnes. Par exemple, la liste des joueurs d'une équipe de foot indiquant le nom et la position de chacun peut s'appeler un jeu d'enregistrements, car elle se compose d'un sous-ensemble de toutes les informations possibles concernant les joueurs : buts marqués, passes décisives, minutes de penalty, etc.
Table de quelques d'eregistements
Pour creer un jeu d'enregistrements, vous devez executer une requete de base de données. Une requete se compose de criteres de recherche. Elle peut par exemple spécifier que seules certaines colonnes ou certains enregistrements doivent etre inclus dans le jeu d'enregistrements. Pour plus d'informations, voir « Dedefinition d'un jeu d'enregistrements», page 536.
<h1 id="principes-fondamentaux-pour-la-conception-dune-base-de-données">Principes fondamentaux pour la conception d'une base de données</h1>
La conception de la base de données représentée la première étape dans le développement de tout site Web reposant sur une base de données. Cette section présente une étude de cas pour expliquer les principes fondamentaux de la conception d'une base de données. Cette étude de cas examine une application Web commandee par une société fictive du nom d'Arrow Aircraft Services. Cette société gère une petite flotte de jets d'affaires privés.
Cette section contient les rubriques suivantes :
- « Examen des règles et procédures commerciales d'Arrow Aircraft Services», page 697
- « Examen des fonctions requises par Arrow Aircraft», page 697
- « Quelles questions les utilisateurs vont-il poser à la base de données?», page 697
- « Sélection des tables de la base de données», page 698
- « Sélection des colonnes dans chaque table», page 699
- « Définition des relations entre les tables», page 700
- « Création de la base de données», page 702
<h1 id="examen-des-règles-et-procédures-commerciales-darrow-aircraft-services">Examen des règles et procédures commerciales d'Arrow Aircraft Services</h1>
Vouaves e tete agagé sur une base forfaitaire pour creer l'application Web d'Arrow Aircraft Services. Avant de commencer à concevoir la base de données, vous devez vous assurer que vous comprendez bien toutes les règles et procédures commerciales de la société qui peuvent avoir un impact sur l'application. Cette section déscrit les règles et procédures commerciales (simplifiées) d'Arrow Aircraft Services.
Arrow Aircraft gère une flotte de cinq jets d'affaires de taille et de modèle différents pour le compte de plusieurs propriétaires. Chaque jet apparient en multipropriété à huit companies ou particuliers maximum qui ont achetié une part dans l'appareil. Ce type d'accord est commun lorsque les intéressés n' ont pas besoin de leur jet d'affaires toute l'année.
Les « actionnaires » rémunérent Arrow Aircraft de la façon suivante :
- frais de gestion mensuels dont le montant est calculé proportionnellement à la part détenue par chaque propriété de l'appareil et qui couvent les dépenses liées au pilote, à l'assurance et au hangar ;
- frais horaires d'« occupation » couvrant toutes les dépenses directes, telles que les frais d'entretien, de carburant et de restauration.
En échange, un actionnaire n'a qu'a dire à Arrow Aircraft la destination à laquelle il veut se rendre et le moment auquel il veut y aller. Arrow Aircraft s'occupé du reste, y compris du personnel navigant et au sol ainsi que de la restauration pendant le vol. Arrow Aircraft exige un préavis de 8 heures minimum pour préparer un apparéil au vol.
Arrow Aircraft garantit 800 « heures occupées » par an pour chaque apparéil. Les heures occupées sont des heures pendant lesquelles le jet est en vol et occupe par un passager minimum. Ces heures commencent six minutes (1/10e d'heure) avant que l' apparéil ne décolle avec des passagers et se termine six minutes après l'atterrissage de l' apparéil.
Chaque apparéil peut avoir jusqu'à huit propriétaires. Une personne ou uneompagnie peut par exemple acheter une part de 1 / 5e dans un jet. Comme Arrow Aircraft garantit 800 heures de vol occupées par an, un propriété détenant une part de 1 / 5e a droit à 160 heures occupées (800heures /5 = 160)
<h1 id="examen-des-fonctions-requises-par-arrow-aircraft">Examen des fonctions requises par Arrow Aircraft</h1>
Arrow Aircraft you a engage pour creer une application Web permettant d'effectuer les opérations suivantes :
- permettre à chaque actionnaire de demander la mise à disposition d'un apparéil pour un vol ;
- fournir au service des opérations aériennes de la société toutes les informations requises pour commencer à préparer l'appareil, notamment les détails de la demande de l'actionnaire (itinéraire, date et heures de départ, besoin en matière de restauration, etc.), les heures occupées restantes de l'actionnaire et la disponibilité de l'appareil pour le voyage demandé;
- permettre au service des opérations aériennes de réserver l'appareil pour éviter tout conflit au niveau de la programmation des vols.
<h1 id="quelles-questions-les-utilisateurs-vont-ils-poser-à-la-base-de-données">Quelles questions les utilisateurs vont-ils poser à la base de données ?</h1>
Après avoir pris connaissance des fonctions recherchées dans l'application Web, vous vous réunissez avec les utilisateurs de la base de données pour leur demander : « Quelles questions allez-vous poser à la base de données ? »
Certains des actionnaires vous répondent qu'ils ont l'intention de poser les questions suivantes à la base de données :
- Combien d'heures occupées me reste-t-il?
- Mon apparéil est-il disponible à une date donnée ?
Après qu'un actionnaire a fait une demande de vol, les employés des opérations aériennes poseront les questions suivantes à la base de données :
- Aquelle destination l'actionnaire veut-il se rendre?
- De quel type d'itinétaire s'agit-il (aller simple, aller-retour ou escales multiples)? Le service des opérations aériennes a besoin de ces informations pour commencer à planifier le vol (verifier les prévisions météo, documenter le plan de vol, etc.) et à évaluer le nombre total d'heures occupées.
- L'actionnaire dispose-t-il d'un nombre suffisant d'heures pour l'itinéraire proposé ?
- A quelles heures et date l'actionnaire veut-il partir?
- Quel est l'avion de l'actionnaire?
- L'avion est-il disponible pour l'itinéraire proposé ?
- Combien de passagers accompagneront l'actionnaire ?
- Quelle quantité de bagages emporteront-ils (les critères possibles étant « léger » pour des bagages de cabine, « normal » pour une valise par passager et « lourd » pour plus d'une valise)?
- Quels sont les besoin de l'actionnaire en matière de restauration?
- A combien s'élevent les frais horaires d'occupation de l'avion?
- Où peut-on contacter l'actionnaire pour lui confirmer le vol et lui faire part du devis ?
<h1 id="selection-des-tables-de-la-base-de-données">Selection des tables de la base de données</h1>
Après avoir pris connaissance des questions que les utilisateurs poseront à la base de données, vous commencez à réfléchir à la façon dont cette dernière doit être structurée pour répondre au moins aux questions. La première étape consiste à selectionner les tables de la base de données.
Dans une base de données relationnelle, toutes les données sont représentées dans les lignes et les colonnes des tables. Chaque table déscrit un groupe d'entities liées les uneux autres, telles que des personnes, des objets ou des événements. Chaque ligne déscrit une occurrence de l'objet et chaque colonne une propriété de l'objet (le nom d'une personne, la couleur d'un objet ou la date d'un événement, par exemple).
Voussélectionnéz les cinq tables suivantes pour la base de données d'Arrow Aircraft :
- une table des apparciels décrivant tous les jets d'affaires gérés par Arrow Aircraft ;
- une table de réservation des appareils répertiorant toutes les dates auxquelles les jets sont réservés ou ne sont pas disponibles pour chaque raison que ce soit ;
- une table des actionnaires décrivant tous les particuliers et les compagnies ayant des actions dans les jets ;
- une table des itinéaires décrivant tous les itinéaires demandés par les actionnaires ;
- une table de vol décrivant tous les tronçons (les « vols ») des itinéaires.
<h1 id="sélection-des-colonnes-dans-chaque-table">Sélection des colonnes dans chaque table</h1>
L' étape suivante consiste à selectionner les colonnes de chaque table. Les colonnes décrivent les propriétés de chaque entité de la table.
L'une des règles d'or lors de la sélection des colonnes est d'éviter la duplication des données. Dans l'application d'Arrow Aircraft, vous savez que le nom des actionnaires devra être utilisé conjointement avec les données des itinéaires pour connaître la réponse à la question suivante du service des opérations aériennes : « Quels sont les besoin de l'actionnaire en matière de restauration pour un itinéaire donné ? »
Une première méthode possible est d'insérer des colonnes pour le nom et le prénom des actionnaires dans la table des actionnaires et celle des itinéraires. Toutefois, cette méthode presente deux inconvenients majorés : d'une part, les données de nom et de prénom existent dans deux tables ; d'autre part, ces mêmes données sont presents plusieurs fois dans la table des itinéraires (le nom d'un actionnaire devant être saisi dans la table chaque fois qu'il demande un nouvel itinétaire). Cette méthode requiert en outre plus de travail pour la saisie des données, est source potentielle d'erreurs et menace l'intégrité même des données (une modification dans une partie de la base de données devant nécessairement être reportée dans les autres parties).
Une solution nettementILAe est de saisir une fois pour toutes dans une meme table (la table des actionnaires) le nom et le prcnom de chaque actionnaire. Au moment de repondre a la question ci-dessus du service des operations aeriennes, il vous suffit de relier la table des actionnaires a celle des itineraires a I'aide d'une expression SQL.
Assurez-vous que chaque table est dotée d'une colonne de clé primaire. Cette colonne contient des valeurs qui sont uniques à chaque ligne. Cela vous permet d'identifier la ligne précise souhaitation lorsque vous effectuez une recherche dans la base de données. Les colonnes de clé primaire se compose généralement de numérios d'identification, mais vous ave la possibilité d'utiliser des clés primaires naturelles, telles que des numérios officiers administratifs ou des numéroes de série d'appareils.
Après y avoir refléchi, vous prenez la décision d'utiliser les propriétés et les clés primaires suivantes pour les tables de la base de données d'Arrow Aircraft :
<h1 id="table-des-apparéls">table des apparéls</h1>
<pre><code class="language-txt">ac_serial (clé primaire)
model
capacity (capacité en passagers)
max_range
occupied hr fee (frais horaires d'occupation)
photo
</code></pre>
<h1 id="table-de-réservation-des-appareils">table de réservation des appareils</h1>
<pre><code class="language-txt">ac Booking_ID (cle primaire)
ac Booking_start
ac Booking_end
</code></pre>
<h1 id="table-des-actionnaires">table des actionnaires</h1>
<pre><code class="language-txt">shareholder_ID (clé primaire)
frame (prénom)
Iname (nom)
cname (nom de société)
user_ID
pwd (mot de passage)
share (part de propriété de l'appareil en %)
occupé_hrs (heures occupées restantes)
</code></pre>
<h1 id="table-des-itinéaires">table des itinéaires</h1>
<pre><code class="language-txt">itin_ID (clé primaire)
passengers (n. de passagers sur le vol)
luggage (quantité de bagages)
catering (besoins en restauration)
</code></pre>
<h1 id="table-des-vols">table des vols</h1>
<pre><code class="language-txt">flight_ID (cle primaire)
destination
leg_no (Numero de troncon dans l'itinérale)
dep_date (date de départ demandée)
dep_time (heure de départ demandée)
to_time (heure de décollage)
td_time (heure d'aterrissage)
</code></pre>
<h1 id="définition-des-relations-entre-les-tables">Définition des relations entre les tables</h1>
Après avoir défini les principales colonnes et les clés primaires des tables, vous pouvez commencer à définir les relations entre ces tables. Une fois ces relations définies, vous pouvez rédigier les instructions SQL dans Dreamweaver MX afin d'associer les données de deux tables (voir « Relations entre tables », page 714).
Par exemple, chaque avion géré par Arrow Aircraft dispose de plusieurs actionnaires. Vous souhaitez établit une relation « un-à-plusieurs » entre chaque avion de la table des apparciels et les actionnaires de la table des actionnaires. Cela vous évite d'avoir à saisir et à suivre des données redondantes sur les apparciels dans la table des actionnaires.
Dans une relation de base de données un-à-plusieurs, la même ligne d'une table est associée à plusieurs lignes d'une autre table. Vous pouvez définir ce type de relation en incluant une clé étrangère dans la table qui fournit les lignes « plusieurs » (dans l'exemple ci-dessus, il s'agit de la table des actionnaires). Une clé étrangère est une colonne contenant des valeurs qui correspondent à celles de la colonne de clé primaire d'une autre table. La clé primaire de la table des approeils créé s'appelle acSerializable. Ainsi, si vous incluez une clé étrangère du nom de acSerializable dans la table des actionnaires, cela établit une relation « un-appareil-à-plusieurs-actionnaires »
En vous basant sur ce que vous savez des fonctions requises par le client et des règes et procédures commerciales de la société, vous decide de définir les relations un-à-plusieurs suivantes dans la base de données :
- Chaque apparéil peut être associé à plusieurs actionnaires.
- Chaque apparéil est associé à plusieurs réservations.
- Chaque apparéil est associé à plusieurs itinéaires.
- Chaque actionnaire est associé à plusieurs itinéaires.
- Chaque itinétaire peut être associé à plusieurs vols (ou tronçons).
Voici les diagrammes des tables que vous obtenez après avoir ajouté les clés étrangères définissant ces relations :
<h1 id="table-des-appareils">table des appareils</h1>
<pre><code class="language-txt">ac_serial (cle primaire)
model
capacity (capacite en passagers)
max_range
occupied hr fee (frais horaires d'occupation)
photo
</code></pre>
<h1 id="table-de-réservation-des-apparciels">table de réservation des apparciels</h1>
<pre><code class="language-txt">ac Booking_ID (clé primaire)
ac Booking_start
ac Booking_end
acserial(clé étrangère vers la table des appareils)
</code></pre>
<h1 id="table-des-actionnaires-2">table des actionnaires</h1>
<pre><code class="language-txt">shareholder_ID (clé primaire)
fname (prénom)
Iname (nom)
cname (nom de société)
user_ID
pwd (mot de passer)
share (part de propriété de l'appareil en %)
occupied_hrs (heures occupées restantes)
acSerialized (clé étrangère vers la table des appareils)
</code></pre>
<h1 id="table-des-itinéaires-2">table des itinéaires</h1>
<pre><code class="language-txt">itin_ID (cle primaire)
passengers (n. de passagers sur le vol)
luggage (quantite de bagages)
catering (besoins en restauration)
</code></pre>
<pre><code class="language-txt">ac_serial (cle étrangère vers la table des apparciels) shareholder_ID (cle étrangère vers la table des actionnaires)
</code></pre>
<h1 id="table-des-vols-2">table des vols</h1>
<pre><code class="language-txt">flight_ID(clé primaire)
destination
leg_no(numbero de tronçon dans l'itinéaire)
dep_date(date de départ demandée)
dep_time(heure de depart demandée)
to_time(heure de décollage)
to_time(heure d'aterrissage)
</code></pre>
<pre><code class="language-txt">itin_ID (cle étrangère vers la table des itinéaires)
</code></pre>
Ces diagrammes sont connus sous le nom de diagrammes E-R, à savoir diagrammes « entité- relation ».
<h1 id="creation-de-la-base-de-données">Creation de la base de données</h1>
La dernière étape de conception consiste à créé la base de données à l'aide d'un système de base de données tel que Microsoft Access, SQL Server, Oracle9i ou MySQL. Pour plus d'informations, reportez-vous à la documentation de votre système de base de données.
<h1 id="description-des-connexions-aux-bases-de-données">Description des connexions aux bases de données</h1>
Si vous envisagez d'utiliser une base de données avec votre application Web, créez au moins une connexion à une base de données. Sans connexion, votre application ne saura pas où couver la base de données, ni comment s'y connecter. Pour creer une connexion à une base de données dans Dreamweaver, vous doivent fournir les informations (ou les « paramêtres ») dont l'application a besoin pour établier un contact avec la base de données.
Remarque : vous n'avez pas à créé de connexion à des bases de données pour les pages ColdFusion dans Dreamweaver MX. La connexion s'effectue à l'aide de sources de données ColdFusion définies dans ColdFusion Administrator.
Cette section aborde la question des connexions aux bases de données en termes généraux. Pour obtenir des instructions précises sur la création de connexions dans Dreamweaver MX, voir « Connexion à une base de données», page 142.
<h1 id="interfacage-avec-la-base-de-données">Interfacage avec la base de données</h1>
Les données stockées dans une base de données sont normalement au format propriétaire, de même que le texte d'un fisier de traitement de texte est au format propriétaire. Par exemple, voici à quoi des données ressemblent dans Microsoft Access :
Voici ce à quoi ressemble la même base de données dans le Bloc-notes :
Votre application Web rencontres le même problème que le Bloc-notes ou toute autre application qui essais d'acceder à des données dans un format inconnu : elle est incapable d'en déchiffrer les données. Une interface logicielle est donc nécessaire entre votre application Web et la base de données pour que celles-ci puissant communiquer.
Trois interfaces courantes permettent aux applications de communiquer avec les bases de données. La première s'appele Open Database Connectivity (ODBC); la deuxième s'appelle OLE DB (object linking & embedding database); la troisième s'appelle Java Database Connectivity (JDBC).
Ces interfaces jouent en quellesorte un role d'interprete. Par exemple, lorsqu'un discours est presenté en anglais aux Nations Unies, un interprête le traduit pour les représentants francophones et un autre interprête le traduit pour les représentants germanophones. De même, vous utilisez une interface pour les applications parlant le langage OLE DB, une autre interface pour les applications Web parlant le langage ODBC et une autre interface pour celles parlant le langage JDBC. Les applications ColdFusion MX et JSP parlent le langage JDBC, les applications ASP et ASP.NET s'exprime en langage OLE DB, tandis que les applications ColdFusion version 4 ou 5 utilisent les langages ODBC et OLE DB.
Les applications ASP (mais pas les applications ASP.NET) parlent également couramment le langage ODBC grâce à un interprête OLE DB et ODBC intégré. Supposons, par exemple, que vous souhaitiez que votre application communique avec la base de données Microsoft Access en utilisant une interface ODBC. Dans ASP, si vous définisse uniquement une interface ODBC et pas d'interface OLE DB, l'application utilisera par défaut un interprête OLE DB/ODBC pour traduire le OLE DB en ODBC. Puis elle utilisera l'interprête ODBC/Access, que vous avez défini, pour traduire ODBC en un langage compris par Access.
Remarque : SQL Server et DB2 sont les systèmes de base de données serveur respectifs de Microsoft et d'IBM.
<h1 id="utilisation-de-pilotes-de-base-de-données-pour-linterfacage-avec-la-base-de-données">Utilisation de pilotes de base de données pour l'interfacage avec la base de données</h1>
Les interfaces ODBC, OLE DB et JDBC sont mises en place par des pilotes de base de données (ou « fournisseurs de données » en OLE DB), qui ne sont que des parties de logiciels. Lorsque votre application Web communique avec votre base de données, elle le fait par l'intermédiaire d'un pilote.
Les pilotes de base de données sont spécifiques aux bases de données. Par exemple, vous pouvez utiliser des pilotes Microsoft Access, SQL Server et dBase. De même, vous pouvez utiliser des fournisseurs OLE DB tel que le fournisseur OLE DB pour SQL Server. Ce choix dépendra de votre base de données.
Les pilotes sont conçus par les fabricants de base de données, tels que Microsoft et Oracle, et par une grande variété d'autres distributeurs de logiciels. Microsoft propose différents pilotes ODBC et fournisseurs OLE DB pour les principaux propciels de base de données, tels que Microsoft Access, Microsoft SQL Server et Oracle. Les pilotes ODBC, qui fonctionnent uniquement sur la plate-forme Windows, sont automatiquement installés avec Microsoft Office et Windows 2000. Ils sont également installés avec Microsoft Data Access Components (MDAC) version 2.5, 2.6 et 2.7. Vous pouvez les télécharger depuis le site Web de Microsoft à l'adresse suivante: http://www.microsoft.com/data/download.htm. MDAC 2.6 installe plusieurs fournisseurs OLE DB.
Remarque : commencez par installer MDAC 2.5,uis installez MDAC 2.6.
Pour connaître les pilotes installés sur votre système Windows, voir « Affichage des pilotes ODBC installés sur un système Windows», page 705.
Comme les Macintosh sont rarement utilisés comme plate-forme de base de données, il existe peu de pilotes ODBC pour Mac.
Les pilotes JDBC d'I-net pour les bases de données Microsoft SQL Server, le pilote Thin d'Oracle pour les bases de données Oracle et le pilote JDBC Driver pour DB2 spécifique aux bases de données IBM DB2 comptent parmi les pilotes JDBC les plus courants. Pour plus d'informations sur les pilotes JDBC et leurs revendeurs, voir la base de données de recherche des pilotes JDBC sur le site Web de Sun à l'adresse suivante : http://industry.java.sun.com/products/jdbc/drivers.
Voici la liste des interfaces de base de données pour chaque type d'application Web et les pilotes les plus courants :
<table><tr><td>Application Web</td><td>Interface de base de données</td><td>Pilotes courants</td></tr><tr><td>ColdFusion MX JSP</td><td>JDBC</td><td>Pilote JDBC-ODBC de Sun
Pilote I-net Sprinta JDBC pour SQL Server
Pilote JDBC Thin d'Oracle</td></tr><tr><td>ColdFusion version 4 ou 5</td><td>ODBC ou OLE DB</td><td>Pilotes natifs de ColdFusion
Pilote Microsoft Access
Pilote Microsoft SQL Server</td></tr><tr><td>ASP</td><td>ODBC ou OLE DB</td><td>Pilote Microsoft Access
Pilote Microsoft SQL Server
Fournisseur Microsoft SQL Server
Microsoft ODBC pour Oracle</td></tr><tr><td>ASP.NET</td><td>OLE DB</td><td>Fournisseur Microsoft Jet
Fournisseur Microsoft SQL Server
Fournisseur Microsoft Oracle</td></tr><tr><td>PHP</td><td>Spécifique à MySQL</td><td>Pilote MySQL</td></tr></table>
<h1 id="affichage-des-pilotes-odbc-installés-sur-un-système-windows">Affichage des pilotes ODBC installés sur un système Windows</h1>
Si vous avez besoin d'un pilote ODBC précis et que vous serveur Web fonctionne sur un système Windows, vous pouvez facilement savoir si le pilote ODBC nécessaire est installé ou non sur toute système.
<h1 id="pour-afficher-les-pilotes-odbc-installés-sur-un-système-windows">Pour afficher les pilotes ODBC installés sur un système Windows :</h1>
1 Ouvrez l'Administrateur de source de données ODBC en procédant comme suit :
- Sous Windows 95, 98 ou NT,CHOISSEZ DEMARRER > Parametes > Panneau de configuration, puis double-cliquez sur I'icone Sources de données ODBC. Selon le systeme que vous utilisez, I'icone peut s'appeler ODBC ou ODBC 32 bits.
- Sous Windows 2000,CHOISSEZ DEMARRER > Parametes > Panneau de configuration > Outils d'administration > Sources de données.
- Sous Windows XP,CHOISSEZ DEMARRER > Panneau de configuration > Performances et maintenance > Outils d'administration > Sources de données (ODBC).
<h1 id="2-cliquez-sur-longlet-pilotes">2 Cliquez sur l'onglet Pilotes.</h1>
La liste des pilotes ODBC installés sur le système apparait.
<h1 id="appel-des-pilotes-de-base-de-données">Appel des pilotes de base de données</h1>
Une application doit appeler un pilote de base de données pour étabir des communications bilatérales avec une base de données. Une application Web appelle un pilote à l'aide d'une chaîne de connexion. Une chaîne de connexion est composée de toutes les informations (ou paramètres) requisées pour étabir une connexion à une base de données. Dans sa forme la plus simple, une chaîne de connexion définit un pilote et une base de données, comme dans cet exemple :
Driver = {MicrosoftAccessDriver（\*.mdb）}；DBQ C:\Inetpub\wwwroot\Scal\scalcoffee.mdb
Les chaînes de connexion ASP peuvent contérer un paramètre de fournisseur définitissant un fournisseur OLE DB. Si vous oubliez ce paramètre, ASP utilise par défaut le fournisseur OLE DB pour les pilotes ODBC. Dans l'exemple ci-dessus, le fournisseur OLE DB pour les pilotes ODBC communique avec le pilote ODBC, Microsoft Access Driver, qui communique à son tour avec la base de données Access, scaalcoffee.mdb.
Les paramètres d'une chaine de connexion peuvent varier en fonction du pilote. Voici une chaine de connexion pour une base de données SQL Server appelée Cases, située sur un serveur appelé Hoover :
Driver= {SQL Server}; Server=Hoover; Database=Cases;
UID= DanaS;PWD= Quequeeg
Remarque: UID signifie user ID (numéro d'utilisateur); PWD signifie mot de passer (password).
Dreamweaver simplifie l'insertion de chaînes de connexion dans vos pages en vous proposant une boîte de dialogue dans laquelle saisir les différents paramètres de connexion. Par exemple, voici à quoi ressemble une boîte de dialogue destinée à définir une connexion lorsque vous développpez une application JSP :
Une fois que vous avez complété les options de la boîte de dialogue et cliqué sur OK, Dreamweaver insère la châne de connexion dans un fichier inclus dans votre site.
<h1 id="utilisation-dun-dsn-dans-une-chaine-de-connexion">Utilisation d'un DSN dans une chaine de connexion</h1>
Voupez definir des noms de sources de données (DSN) dans certaines connexions. Un DSN est un type de raccourci que vous creez sous Windows pour une chaine de connexion. Une fois défini, il vous suffit de vous reférer à la chaine de connexion par son nom. Par exemple, une chaine de connexion peut comprendre les paramètres suivants:
<pre><code class="language-javascript">Driver= {SQL Server};Server= Clinic-6;Database=Patients;UID=dholmes;PWD=stetson2
</code></pre>
Après avoir défini un DSN nommé patients sous Windows, à l'aide des paramètres ci-dessus, vous pouvez utiliser la chaine de connexion dans votre application en définissant un seul paramètre :
<pre><code class="language-txt">dsn=patients
</code></pre>
Si vous serveur d'application fonctionne sous Windows et que vous définissez un DSN sur ce système, vous pouvez utiliser le DSN pour définir une connexion ASP ou ColdFusion version 4 ou 5.
Si vous n'avez pas d'accès physique à un serveur (et ne pouvez donc y définir un DSN), vous devez utiliser une chaine de connexion pour vous connecter à la base de données.
Pour plus d'informations, voir « Définition d'un DSN sous Windows», page 717.
<h1 id="annexe-b-2">ANNEXE B</h1>
<h1 id="initiation-à-sql">Initiation à SQL</h1>
Cette annexe explique comment utiliser le langage SQL (Structured Query Language, language courant d'extraction de données) afin de creator des jours d'enregistrements pour vos pages dynamiques. SQL est un langage qui vous permet de dire et d'écrite les données d'une base de données. Il ne se compose que de quelques mots-clés et règles syntaxiques simples, mais vous permet d'effectuer des opérations sophistiquées dans une base de données.
Cette annexe contient les sections suivantes :
- « Notions de syntaxe élémentaires », page 709
- « Définition des colonnes d'un jeu d'enregistrements», page 710
- « Limité du nombre d'enregistements dans un jeu», page 711
- « Tri des enregistements d'un jeu », page 714
- « Relations entre tables», page 714
Remarque: Macromedia n'assure aucun support technique pour les technologies provenant d'autres sociétés, telles que SQL.
<h1 id="notions-de-syntaxe-élémentaires">Notions de syntaxe élémentaires</h1>
L'instruction SQL la plus courante est l'instruction SELECT, qui extrait des champs spécifique d'une ou de plusieurs tables de base de données pour générer un jeu d'enregistrements. La syntaxe de base de l'instruction SELECT est la suivante:
SELECT ColumnName FROM TableName
Vou puez également ajouter des sauts de ligne, des tabulations et autres espaces blancs à vos instructions pour les rendre plus claires : SQL ignore tous les espaces blancs. Voici un exemple d'instruction valide :
SELECT PaidDues
FROM Members
Les mots-clés suivants identifient les commandes SQL les plus courantes :
<table><tr><td>Mot-clé</td><td>Description</td></tr><tr><td>SELECT</td><td>Extrait les enregistements spécifique d'une base de donnéesées</td></tr><tr><td>INSERT</td><td>Ajoute un nouvel enregistrement dans une table de la base de donnéesées</td></tr><tr><td>UPDATE</td><td>Modifie les valeurs des enregistements de base de donnéesées spécifique</td></tr><tr><td>DELETE</td><td>Supprime les enregistements de base de donnéesées spécifique</td></tr></table>
Les mots-clés suivants sont utilisés pour affiner les instructions SQL :
<table><tr><td>Mot-clé</td><td>Description</td></tr><tr><td>FROM</td><td>Nomme la source de données pour une opération</td></tr><tr><td>WHERE</td><td>Définit une ou plusieurs conditions pour l'opération</td></tr><tr><td>ORDER BY</td><td>Trie les lignes du jeu d'enregistrements dans l'ordre spécifique</td></tr><tr><td>GROUP BY</td><td>Groupe le jeu d'enregistrements en fonction des éléments de la liste spécifique</td></tr></table>
Les opérateurs suivants spécifique des conditions et effectuent des opérations logiques et numériques :
<table><tr><td>Opérateur</td><td>Signification</td></tr><tr><td>=</td><td>Égal à</td></tr><tr><td>LIKE</td><td>Comme (caractères génériques OK)</td></tr><tr><td><></td><td>Différé de</td></tr><tr><td>NOT LIKE</td><td>Pas comme (caractères génériques OK)</td></tr><tr><td><</td><td>Inférieur à</td></tr><tr><td>></td><td>Supérieur à</td></tr><tr><td><=</td><td>Inférieur ou égal à</td></tr><tr><td>>=</td><td>Supérieur ou égal à</td></tr><tr><td>AND</td><td>Les deux conditions doivent être réunies (par exemple, Paris AND Toulouse)</td></tr><tr><td>OR</td><td>Au moins une condition doit être remplie (par exemple, Durand OR Durant)</td></tr><tr><td>NOT</td><td>Exclut la condition qui suit l'opérateur (par exemple, Paris NOT France)</td></tr></table>
Si I'élement comparé est du texte, mettez-le entre apostrophes comme dans l'exemple suivant :
...WHERE Country = 'Germany'
Si l'objet comparé est une date et que vous utilisez une base de données Microsoft Access, mettez cet élément entre des signes dièse (#):
...WHERE DateOfBirth < #01/01/1970#
Les autres bases de données possèdent leurs propres conventions de dates. Reportez-vous à leur documentation pour connaître ces conventions.
Certains systèmes de bases de données utilisent une syntaxe SQL non standard dans leurs produits. Reportez-vous à leur documentation.
<h1 id="définition-des-colonnes-dun-jeu-denregistrements">Définition des colonnes d'un jeu d'enregistrements</h1>
Vous pouvez utiliser SQL pour définir des produits d'enregistrements pour vos pages. Un jeu d'enregistrements est un sous-ensemble d'enregistrements extraits d'une base de données. Pour plus d'informations, voir « A propos des bases de données», page 695.
Voici la syntaxe SQL élémentaire utilisé pour définir les colonnes d'un jeu d'enregistements :
SELECT ColumnName1, ColumnName2, ColumnNameX FROM TableName
Si vous souhaitez inclure toutes les colonnes d'une table dans le jeu d'enregistrements, vous pouvez utiliser le caractère générique *, comme suit :
SELECT FROM TableName
Prenons l'exemple d'une table nommée Clients. Pour en extraire tous les champs, tapez l'instruction SELECT suivante :
SELECT FROMCustomers
Supposons maintainant que vous ayez seulement besoin des données contenues dans deux colonnes de la table Customers : les colonnes YearBorn et DateLastPurchase. Pour creer un jeu d'enregistrements contenant uniquement les données de ces deux colonnes, tapez l'instruction SELECT suivante :
SELECT YearBorn, DateLastPurchase FROM Customers
<h1 id="limin-du-nombre-denregistrements-dans-un-jeu">Limin du nombre d'enregistrements dans un jeu</h1>
Utilisez une clause WHERE pour limiter le nombre d'enregistements dans un jeu d'enregistements. Par exemple, vous souhaitez Brokerer un qu'environnement des clients dont le revenu s'est acouvert de 350 000 FF par an. Supposons que vous ne mentionnent une colonne nommée Earnings qui indique le montant du revenu de chaque client. Voitre instruction SELECT devra se presenterer ainsi :
SELECT YearBorn, DateLastPurchase FROM Customers WHERE Earnings > 50000
Vous spécifie une ou plusieurs conditions dans une clause WHERE afin de filtrer les enregistements dans la base de données. Les sections suivantes dérivent les manières de filtrer les enregistements au moyen de la clause WHERE :
- « Filtrage des enregistements en fonction de l'égalité entre deux valeurs», page 711
- « Filtrage des enregistements en fonction de la ressemblance entre deux valeurs», page 712
- « Filtrage des enregistrements en fonction d'une série de valeurs», page 713
- « Filtrage des enregistrements en fonction d'une combinaison de conditions de recherche », page 714
<h1 id="filtrage-des-enregistrements-en-fonction-de-légalité-entre-deux-valeurs">Filtrage des enregistrements en fonction de l'égalité entre deux valeurs</h1>
Voupez filtrer les enregistements dans une base de données en fonction de l'égalité existant entre une valeur de paramètre et la valeur d'une colonne d'enregistrement.
Supposons que vous décidiez de permettre aux utilisateurs d'effectuer des recherches dans la base de données, par service. Pour creer un jeu d'enregistements de résultats de recherche, vous devez utiliser la logique suivante :
- Vérifiez un enregistrement dans la table de la base de données.
- Si la valeur dans la colonne « service » de l'enregistrement est égale au nom de service soumis par l'utilisateur, incluez cet enregistrement dans le jeu d'enregistements des résultats de recherche.
- Vérifiez l'enregistrement suivant dans la table.
Vou puevez exprimer cette logique à l'aide de la clause WHERE comme suit :
WHERE ColumnName = ParameterValue
ParameterValue est une variable SQL contenant un paramètre de recherche. Dans une application Web, l'utiliseur fournit généralement ce paramètre en utilisant un formulaire HTML.
Cette requête de base de données doit être exprimée entièrement en langage SQL comme suit :
SELECT FIRSTNAME, LASTNAME, DEPARTMENT, EMAIL
FROM EMPLOYEES
WHERE DEPARTMENT = 'varDept'
Cette instruction SQL permet de rechercher tous les enregistements de la table des employés en utilisant une valeur DEPARTMENT égale à la valeur contenue dans la variable varDept. Par exemple, si l'utiliseur spécifique Operations comme nom de service, il est possible que l'instruction SQL génére le jeu d'enregistements suivant :
<table><tr><td>FIRSTNAME</td><td>LASTNAME</td><td>DEPARTMENT</td><td>EMAIL</td></tr><tr><td>David</td><td>Grandel</td><td>Operations</td><td>david@compasstravel</td></tr><tr><td>Welan</td><td>Davis</td><td>Operations</td><td>wenlan@compasstravel.com</td></tr><tr><td>Ken</td><td>Smith</td><td>Operations</td><td>ken@compasstravel.com</td></tr><tr><td>Chris</td><td>Bates</td><td>Operations</td><td>chrisb@compasstravel.com</td></tr><tr><td>Dan</td><td>Riely</td><td>Operations</td><td>dan@compasstravel.com</td></tr></table>
<h1 id="filtrage-des-enregistrements-en-fonction-de-la-ressemblance-entre-deux-valeurs">Filtrage des enregistrements en fonction de la ressemblance entre deux valeurs</h1>
Vou puez filtrer les enregistrements dans une base de données en fonction de la ressemblance existant entre une valeur de parametre et une valeur de colonne d'enregistrement.
L'utilisation de la ressemblance à la place de l'égalité offre aux utilisateurs plus de souplesse pour spécifier la valeur des paramètres de recherche. Par exemple, les termes de recherche n'ont pas besoin de respecter la casse. Si l'utilateur saisit « pays de la Loire » et que la colonne de la table contient la valeur « pays de la Loire», la correspondance est établie.
La ressemblance vous permet également d'utiliser des caractères génériques afin que les utilisateurs puissant effectuer des recherches par ordre alphabetique et sur certaines parties de mots. Par exemple, si l'utilisateur saisit « m » et qu'une colonne de la table contient les valeurs « Michel », « Mathieu » et « Marie», vous pouvez utiliser un caractère générique dans l'instruction SQL afin que les trois correspondances puissant seront établies.
Le caractètre générique standard est le pourcentage (%) :
...WHERE LastName LIKE 'Mc%'
Supposons que vous décidiez de permettre aux utilisateurs d'effectuer des recherches par nom de famille. Pour creer un jeu d'enregistements de résultats de recherche, vous nevez utiliser la logique suivante :
- Vérifiez un enregistrement dans la table de la base de données.
- Si la valeur dans la colonne « Nom de famille » de l'enregistrement contient la même valeur que cette soumise par l'utilisateur, incluez l'enregistrement dans le jeu de résultats.
- Vérifiez l'enregistrement suivant dans la table.
Vou puevez exprimer cette logique à l'aide de la clause WHERE comme suit :
WHERE ColumnName LIKE ParameterValue
ParameterValue est une variable SQL contenant un paramètre de recherche. Dans une application Web, l'utiliseur fournit généralement ce paramètre en utilisant un-formulaire HTML.
Cette requête de base de données doit être exprimée entièrement en langage SQL comme suit :
SELECT FIRSTNAME, LASTNAME, DEPARTMENT, EMAIL
FROM EMPLOYEES
WHERE DEPARTMENT LIKE 'varLastName'
Si vous souhaitez offrir aux utilisateurs la possibilité d'effectuer des recherches sur des parties de mots, associez un caractère générique à la variable. Le caractère générique SQL à utiliser dans ce cas est le pourcentage (%). Exemple :
...WHERE LASTNAME LIKE 'varLastName%'
Par exemple, si l'utilisateur saisit « s » comme paramètre de recherche, tous les enregistements avec des noms de famille commençant par la lecture « s » sont inclus dans le jeu, comme dans l'exemple suivant :
<table><tr><td>FIRSTNAME</td><td>LASTNAME</td><td>DEPARTMENT</td><td>EMAIL</td></tr><tr><td>Mike</td><td>Smith</td><td>Administration</td><td>mike@compasstravel.com</td></tr><tr><td>Ken</td><td>Smith</td><td>Operations</td><td>ken@compasstravel.com</td></tr><tr><td>Dalbir</td><td>Stone</td><td>Administration</td><td>dalbir@compasstravel.com</td></tr><tr><td>Terry</td><td>Silver</td><td>Marketing</td><td>terry@compasstravel.com</td></tr></table>
Si l'utilisateur spécifique « sm » comme paramètre de recherche, seuils les enregistrements avec des noms de familles commençant par « sm » sont inclus dans le jeu :
<table><tr><td>FIRSTNAME</td><td>LASTNAME</td><td>DEPARTMENT</td><td>EMAIL</td></tr><tr><td>Mike</td><td>Smith</td><td>Administration</td><td>mike@compasstravel.com</td></tr><tr><td>Ken</td><td>Smith</td><td>Operations</td><td>ken@compasstravel.com</td></tr></table>
<h1 id="filtrage-des-enregistrements-en-fonction-dune-série-de-valeurs">Filtrage des enregistrements en fonction d'une série de valeurs</h1>
Pour filtrer des enregistrements dans une base de données, vous pouze specifier qu'une valeur de colonne d'enregistrement doit être comprise entre deux valeurs de paramètre.
Supposons que vous décidiez de permettre aux utilisateurs d'effectuer des recherches par période comprise entre deux dates. Pour creer un jeu d'enregistrements de résultats de recherche, vous devez utiliser la logique suivante :
- Vérifiez un enregistrement dans la table de la base de données.
- Si la valeur dans la colonne « date » de l'enregistrement est comprise entre les deux valeurs de date soumises par l'utilisateur, incluez cet enregistrement dans le jeu d'enregistrements de résultats.
- Vérifiez l'enregistrement suivant dans la table.
Vou puevez exprimer cette logique à l'aide de la clause WHERE comme suit :
WHERE ColumnName BETWEEN ParameterValue1 AND ParameterValue2
ParameterValue1 et ParameterValue2 sont des variables SQL contenant des paramétres de recherche. Dans une application Web, l'utilisateur fourthnitz generalement ces paramétres en utilisant un formulaire HTML.
Voici comment ce type de base de données peut etre exprime en langage SQL :
SELECT FIRSTNAME, LASTNAME, DEPARTMENT, STARTDATE FROM EMPLOYEES WHERE STARTDATE BETWEEN #varStartRange# AND #varEndRange#
Par exemple, si l'utilisateur saisit « 7/1/99 » et « 12/31/99 » comme paramètres de plage, tous les employés ayant commencé dans la seconde moitié de 1999 sont inclus dans le jeu d'enregistements, comme dans l'exemple suivant :
<table><tr><td>FIRSTNAME</td><td>LASTNAME</td><td>DEPARTMENT</td><td>STARTDATE</td></tr><tr><td>Charles</td><td>Nicholas</td><td>Trip Staff</td><td>10/1/99</td></tr><tr><td>David</td><td>Gallagher</td><td>Trip Staff</td><td>8/3/99</td></tr><tr><td>David</td><td>Grandel</td><td>Operations</td><td>7/7/99</td></tr><tr><td>Lars</td><td>Richie</td><td>Consultants</td><td>11/30/99</td></tr></table>
<h1 id="filtrage-des-enregistrements-en-fonction-dune-combinaison-de-conditions-de-recherche">Filtrage des enregistrements en fonction d'une combinaison de conditions de recherche</h1>
Cette section explique comment inclure des enregistements dans le jeu de résultats de recherche en fonction d'une combinaison de conditions de recherche. Dans le langage SQL, les conditions de recherche sont combinées à l'aide des opérateurs logiques AND, OR et NOT.
S'il faut que toutes les conditions soient vraies pour inclure un enregistrement dans le jeu d'enregistements, utilisez l'opérateur AND comme suit :
...WHERE LASTNAME LIKE 'varLastName' AND DEPARTMENT LIKE 'varDept'
S'il faut qu'une des conditions (au besoin) soit vraie pour inclure un enregistrement dans le jeu d'enregistements, utilisez l'opérateur OR comme suit :
...WHERE LASTNAME LIKE 'varLastName' OR DEPARTMENT LIKE 'varDept'
S'il faut qu'une des conditions soit vraie et qu'une autre soit fausse pour inclure un enregistrement dans le jeu d'enregistrents, utilisez l'opérateur NOT comme suit :
...WHERE DEPARTMENT LIKE 'varDept' AND NOT COUNTRY LIKE 'varCountry'
Vou puez utilise des parentheses pour grouper les conditions de recherche :
...WHERE (DEPARTMENT LIKE 'varDept' AND STARTDATE < #varStart#) OR STARTDATE BETWEEN #varStartRange# AND #varEndRange#
<h1 id="tri-des-enregistements-dun-jeu">Tri des enregistements d'un jeu</h1>
Utilisez la clause ORDER BY pour trier les enregistements de votre jeu d'enregistements. Par exemple, supposons que vous vouliez trier les enregistements par revenu des clients, en allant du moins élevé au plus élevé. L'ordre des enregistements dans l'instruction SQL sera alors le suivant :
SELECT 名称, FirstName, Earnings FROM Customers ORDER BY Earnings
Par défaut, la clause ORDER BY trie les enregistements dans l'ordre croissant (1,2,3... ou A, B, C...) Si vous souhaitez les trier dans l'ordre décroissant (du revenu le plus élevé au moins élevé), utilisez le mot-clé DESC de la façon suivante :
ORDER BY Earnings DESC
<h1 id="relations-entre-tables">Relations entre tables</h1>
Voupeuutiliser uneseule instruction SELECT pourextraire desdonnéesde plusieurs tables de base de données.L'instruction établit une relation entre les tables et renvoie un jeu d'enregistements unique contenant des données selectionnées dans chaque table.
Par exemple, une base de données d'entreprise peut contenir une table avec des données personnelles relatives aux employés et une autre table avec des données relatives aux services de l'entreprise. Si vous souhaitez créé un annuaire des employés avec leur nom, numéro de téléphone et service, vous devez extraire ces informations dans les deux tables à la fois.
Pour ce faire, creez une relation en spécifient l'ensemble des tables que vous souhaitez inclure et les liaisons existant entre les tables. Exemple :
SELECT FIRSTNAME, LASTNAME, PHONE, DEPTNAME FROM EMPLOYEES, DEPARTMENTS WHERE EMPLOYEES.DEPT_ID = DEPARTMENTS.DEPT_ID
Remarque : utilisez des points pour identier les colonnes de façon plus précise. Par exemple, EMPLOYEES.DEPT_ID se refere à la colonne DEPT_ID de la table EMPLOYEES.
La première ligne spécifique les colonnes à extraire. Les trois premières colonnes—FIRSTNAME, LASTNAME, PHONE—exist dans la table EMPLOYEES, tandis que la quatrième colonne—DEPTNAME—existe uniquement dans la table DEPARTMENTS.
La deuxieme ligne spécifique les deux tables dans lesquelles vous pouvez extraire des données, EMPLOYEES et DEPARTMENTS.
La dernière ligne spécifique les enregistements à associer et à extraire dans les deux tables. Chaque table contient une colonne intitulée DEPT_ID. (Dans la table DEPARTMENTS, la colonne est la clé principale. Pour plus d'informations, voir « Définition des relations entre les tables », page 700). La clause WHERE compare la valeur de DEPT_ID dans une table avec celle de DEPT_ID dans l'autre table. Lorsqu'une correspondance est établie, tous les champs de l'enregistrement de la table EMPLOYEES sont regroupés avec ceux de l'autre table DEPARTMENTS. Ensuite, les données combinées sont filtrées pour creer un nouvel enregistrement constitué d'une colonne FIRSTNAME, LASTNAME, PHONE et DEPTNAME. Pour finir, le nouvel enregistrement est ajouté au jeu.
Dans certains systèmes de bases de données, il est parfois préféable d'utiliser une syntaxe relationnelle légèrement différente. Par exemple, l'instruction SQL suivante utilise les mots-clés SQL INNER JOIN...ON pour obtenir les mêmes résultats que dans l'exemple précédent :
SELECT FIRSTNAME, LASTNAME, PHONE, DEPTNAME FROM EMPLOYEES INNER JOIN DEPARTMENTS ON EMPLOYEES.DEPT_ID = DEPARTMENTS.DEPT_ID
Consultez la documentation relative à votre système de base de données pour déterminer la syntaxe relationnelle à utiliser.
<h1 id="annexe-c-définition-dun-dsn-sous-windows">ANNEXE C Définition d'un DSN sous Windows</h1>
Un DSN est uneASF de raccourci Windows dont vous vous servez pour étabir une connexion à une base de données (voir « Description des connexions aux bases de données », page 702). Avant de pouvoir en utiliser un, vous devez le configurer sur toute système local ou le serveur distant, comme décrit dans cette annexe.
Cette annexe ne vous concerne que si votre base de données réside sur un système qui prend en charge les noms de source de données (DSN) ODBC, tel que Windows et Windows NT (mais non Macintosh).
Cette annexe contient les sections suivantes :
- « Description des DSN», page 717
- « Création d'un DSN», page 717
<h1 id="description-des-dsn">Description des DSN</h1>
Un DSN est un identificateur formé d'un seul mot pour un jeu de paramètres de connexion à une base de données. Ces paramètres peuvent être le nom du serveur, le chemin d'accès à la base de données ou le nom de la base de données, le pilote ODBC à utiliser et, enfin, le nom de l'utilisateur et son mot de passer, le cas échéant.
Supposons par exemple que vous ayez une base de données Microsoft SQL Server appelée Precinct sur un serveur appelé Kojak. Pour acceder à la base de données, vous doivent saisir le nom d'utilisateur columbo et le mot de passer savalas7. Àpres avoir utilisé ces paramètres pour définir un DSN appelé ourcops, vous pouvezisser la connexion en saisissant le mot unique ourcops dans Dreamweaver MX à la place de tous les autres paramètres.
<h1 id="création-dun-dsn">Création d'un DSN</h1>
Pour creer un DSN, un pilote ODBC pour votre base de données doit etre installe sur l'ordinateur Windows executant yourserveur d'application. ODBC (Open Database Connectivity) est un intermediare logiciel qui permait a une application de communier avec une base de donnees. Pour plus d'informations, voir « Interfacage avec la base de donnees », page 702.
Assurez-vous au préalable que votre système possède le pilote correspondant à votre base de données. Pour obtenir la liste des pilotes sur les systèmes Windows 95, 98 ou NT,CHOISSEZ Demarrer > Paramêtres > Panneau de configuration, puis double-cliquez sur l'icone Sources de données ODBC ( selon le système que vous utilisez, l'icone peut aussi s'appeler ODBC ou ODBC 32 bits). Lorsque vous cliquez sur l'onglet Pilotes, la liste des pilotes installés sur le système s'affiche. Sous Windows 2000, choisissez Demarrer > Paramêtres > Panneau de configuration > Outils d'administration > Sources de données, puis cliquez sur l'onglet Pilotes. Sous Windows XP, CHOISISSEZ Demarrer > Panneau de configuration > Performances et maintenance > Outils d'administration > Sources de données (ODBC), puis cliquez sur l'onglet Pilotes.
Si le pilote requis n'est pas installé, vous pouvez télécharger les logiciels Microsoft Data Access Components (MDAC) 2.5 et 2.6 gratuite à partir du site Web de Microsoft à l'adresse suivante : http://www.microsoft.com/data/download.htm. Ceux-ci contiennent les derniers pilotes Microsoft ODBC pour la plupart des bases de données courantes.
Remarque : commencez par installer MDAC 2.5, fais installez MDAC 2.6.
Si MDAC ne contient pas de pilote ODBC pour votre base de données, contactez votre fournisseur de base de données.
<h1 id="pour-creer-un-dsn">Pour creer un DSN :</h1>
1 Ouvrez l'administrateur de source de données ODBC de Windows en procédant comme suit :
- Sous Windows 95, 98 ou NT,CHOISSEZ DEMARRER >Parametes >Panneau de configuration, puis double-cliquez sur I'icone Sources de données ODBC. Selon le système que vous utilisez, I'icone peut s'appeler ODBC ou ODBC 32 bits.
- Sous Windows 2000,CHOISSEZ DEMARRER > Parametes > Panneau de configuration > Outils d'administration > Sources de données.
- Sous Windows XP,CHOISSEZ DEMARRER > Panneau de configuration > Performances et maintenance > Outils d'administration > Sources de données (ODBC).
2 Dans la boîte de dialogue Dreamweaver utilisé pour créé une connexion DSN, cliquez sur le bouton Définir.
L'administrateur de sources de données ODBC s'affiche :
3 Cliquez sur l'onglet DSN système.
La liste des DSN de votre système s'affiche.
4 Cliques sur Ajouter pour ajouter un nouveau DSN à la liste.
La boîte de dialogue Créer une nouvelle source de données s'affiche avec tous les pilotes actuellement charges sur votre système.
5 Sélectionnez un pilote dans la liste, puis cliquez sur Terminer.
Par exemple, si vous base de données est un filchier Microsoft Access, seLECTIONnez le pilote Microsoft Access (.mdb). Si le pilote de votre produit n'apparait pas dans la liste, vous nevez le télécharger à partir du site Web de votre fournisseur, puis l'installer.
6 Dans la boîte de dialogue qui s'affiche, tapez le nom du DSN et spécifie les paramètres de connexion.
La boîte de dialogue qui permet de définir les paramètres différent selon le pilote sélectionné. Pour le pilote Microsoft Access, vous pouvez taper un nom,clinquer sur Sélectionner,localiser le fichier de base de données sur le disque dur etclinquer sur OK.
7 Cliquez sur OK pour fermer la boîte de dialogue.
Le nouveau DSN est ajoute à la liste des DSN système.
Macromedia Dreamweaver MX fait appel à un jeu de balises personalisées pour creer des comportements de serveur dans vos pages ASP.NET. Vous pouvez également utiliser ces balises dans vos propres pages ASP.NET.
Cette annexe presente les balises personalisées Macromedia suivantes :
MM:DataSet page 721
MM:If page 724
Pour creer des comportements de serveur, Dreamweaver utilise également les balises suivantes :
MM:Insert page 724
MM:Update page 725
MM:Delete page 726
Pour terminier, si une balise contient une instruction SQL ou une procedure stockée qui requiert des paramétres, spécifique en les valeurs à l'aide des deux balises suivantes :
- « Parameters », page 727
- « Parameter», page 727
Remarque: de même que les balises ASP.NET de Microsoft, chaque balise personalisée de Macromedia requiert un attribut runat="server".
Pour obtenir la description détaillée des balises et de leurs attributs, visitez le centre de support de Dreamweaver à l'adresse suivante : http://www.macromedia.com/go/customtags.asp.
<h1 id="mmdataset">MM:DataSet</h1>
Utilisez la balise MM:DataSet pour creer un ensemble de données. Les ensembles de données ASP.NET ressemblent beaucoup aux yeux d'enregistements ASP.
<h1 id="example-6">Example</h1>
<MM:DataSet id="fruitsDS" runat="server" CommandText="SELECT name, color FROM fruits" ConnectionString = < % # MM_NOTD_STRING % > //
<h1 id="directives-obligatoires">Directives obligatoires</h1>
<%@ Register TagPrefix="MM" Namespace="MM" Assembly="MMtags" %>
Lorsque des balises de paramètre sont utilisées, les directives suivantes sont souvent (mais pas toujours) nécessaires :
<@ Import Namespace="System.Data" %>
<@ Import Namespace="System.Data.SqlClient" %>
<@ Import Namespace="System.Data.0leDb" %>
<h1 id="attributes">Attributes</h1>
<h1 id="commandtext">CommandText</h1>
Obligatoire. Indique une instruction SQL ou le nom d'une procédure stockée. Il est possible de configurer l'instruction SQL en insérant des points d'interrogation en tant qu'espaces réservés. Voir « Parameters », page 727.
<h1 id="connectionstring">ConnectionString</h1>
Obligatoire. Indique une chaine de connexion contenant des informations pour se connecter à une base de données.
<h1 id="createdataset">CreateDataSet</h1>
Facultatif. True ou False. Si l'attribut est égal à false, aucun ensemble de données n'est créé. La valeur par défaut est true.
<h1 id="expression">Expression</h1>
Facultatif. True ou False. Permet de contrôle le moment d'execution de l'instruction CommandText. Si l'attribut est égal à false, l'instruction CommandText n'est pas exécutée. Vous pouvez faire basculer la valeur par programmation.
<h1 id="isstoredprocedure">IsStoredProcedure</h1>
Facultatif. True ou False. Permit d'indiquer la nature de CommandText. La valeur par défaut est false.
<h1 id="pagesize">PageSize</h1>
Facultatif. Entier. Lorsque CreateDataSet est égal à true, permet de-divider les enregistrements par groupes (pages) d'une taille donnée. Voir CurrentPage. Ne définissez pas à la fois PageSize/CurrentPage et StartRecord/MaxRecords. Lorsque cette situation se présente, c'est l'attribut PageSize/CurrentPage qui l'emporte.
<h1 id="currentpage">CurrentPage</h1>
Facultatif. Entier. Lorsque PageSize est utilisé, permet de spécifique une page particulière (groupe d'enregistements). L'index de la première page est zéro. Voir PageSize.
<h1 id="startrecord">StartRecord</h1>
Facultatif. Entier. Décalage par rapport au premier enregistrement d'un ensemble de données (l'index du premier enregistrement est zéro). Lorsque CreateDataSet est égal à true, permet de récapérer un sous-ensemble d'enregistements en konjection avec l'attribut MaxRecords. Ne définissez pas à la fois PageSize/CurrentPage et StartRecord/MaxRecords. Lorsque cette situation se présente, c'est l'attribut PageSize/CurrentPage qui l'emporte. Si PageSize est supérieur à zéro, StartRecord est automatiquement calculé selon la formule suivante: (PageSize * CurrentPage).
<h1 id="maxrecords">MaxRecords</h1>
Facultatif. Entier. Permet d'indiquer le nombre d'enregistements à récapérer à partir du décalage StartRecord. Voir StartRecord.
<h1 id="getrecordcount">GetRecordCount</h1>
Facultatif. True ou False. Lorsque PageSize est utilisé, permet de désactiver le comptage des enregistrentes pour améliorer les performances. Si la page n'utilise jamais les attributs RecordCount ou LastPage, il est inutilie de compte les enregistrentes. La valeur par défaut est true.
<h1 id="recordcountcommandtext">RecordCountCommandText</h1>
Facultatif. Sert à améliorer les performances lorsque GetRecordCount est égal à true ; permet de désféçifier une instruction SQL explicite pour obtenir le décompte des enregistements. L'instruction doit être au format SELECT COUNT (*) FROM... et peut inclure des clauses WHERE, maisaucen paramètre.
<h1 id="endrecord">EndRecord</h1>
Facultatif. Lecture seule. Permit d'obtenir un minimum de (CurrentPage + 1) * PageSize et RecordCount.
<h1 id="lastpage">LastPage</h1>
Facultatif. Lecture seule. Lorsque PageSize est utilisé et que GetRecordCount est égal à true, permet d'obtenir l'index de la dernière page sur la base de zéro.
<h1 id="recordcount">RecordCount</h1>
Facultatif. Lecture seule. Lorsque CreateDataSet et GetRecordCount sont tous les deux égaux à true, permet d'obtenir le nombre total d'enregistements générés par l'expression CommandText.
<h1 id="theds">theDS</h1>
Facultatif. Lecture seule. Permit d'acceder à l'ensemble de données contenant les enregistements récapucérés après avoir défini CreateDataSet sur true.
<h1 id="defaultview">DefaultView</h1>
Facultatif. Lecture seule. Permit d'acceder à theDS.Tables[0].DefaultView
<h1 id="debug">Debug</h1>
Facultatif. True ou False. Fournit des indices supplémentaires si une exception est rejetée lors de l'exécution de la balise. Si l'attribut Debug est égal à true, FailureURL est ignoré (voir FailureURL). Lors du développement de la page, définissez Debug sur true pour obtenir des informations de diagnostic utiles sur les problèmes rencontres avec la page. Lorsque vous étés sur le point de déployer la page, définissez Debug sur false de sorte que les visiteurs externes ne puissant jamais voir les diagnostics ni d'autres informations internes en cas de problème avec la page.
<h1 id="failureurl">FailureURL</h1>
Facultatif. Permit de spécifier l'URL d'une page à ouvrir si une exception est rejetée lors de l'execution de CommandText ou si les attributs spécifiés sont en conflit.
<h1 id="successurl">SuccessURL</h1>
Facultatif. Permit de spécifier l'URL d'une page à ouvrir si l'instruction CommandText s'exécutés sans qu'aucune exception ne soit rejetée.
<h1 id="mmif">MM:If</h1>
Utilisez la balise MM:If pour contrôler l'inclusion d'un contenu ou d'une logique sur une page.
<h1 id="example-7">Example</h1>
<MM:If runat="server" Expression = = < % # (fruitsDS.CurrentPage = 0 %>"> <ContentsTemplate> <font color '#CCCCC' >Previous</font> </ContentsTemplate>
</MM:If>
<h1 id="directive-obligatoire">Directive obligatoire</h1>
<pre><code class="language-asp"><@ Register TagPrefix="MM" Namespace="MM" Assembly="MMtags" %>
</code></pre>
<h1 id="attribut">Attribut</h1>
<h1 id="expression-2">Expression</h1>
Obligatoire. Permet de specifier une expression à résoudre. Si l'expression est vraie, le contenu inclus dans la balise est utilisé. Si l'expression est fausse, le contenu interne est ignoré.
<h1 id="mminsert">MM:Insert</h1>
Utilisez la balise MM:Insert pour insérer des enregistements dans une base de données.
<h1 id="example-8">Example</h1>
<pre><code class="language-asp"><MM:Insert runat="server" CommandText="INSERT INTO fruits (name, color) VALUES (?, ?)" ConnectionString='<%# MM_NOTD_STRING %>' Expression=<%# Request.Form["MM_insert"] == "true" %> Debug="true" CreateDataSet="false"
> <Parameters> <Parameter Value='<%# Request.Form["fruItName"] %>' /> <Parameter Value='<%# Request.Form["fruItColor"] %>' /> </Parameters>
</MM:Insert>
</code></pre>
<h1 id="directive-obligatoire-2">Directive obligatoire</h1>
<pre><code class="language-asp"><%@ Register TagPrefix="MM" Namespace="MM" Assembly="MMtags" %>
</code></pre>
<h1 id="attribut-2">Attribut</h1>
La balise MM:Insert fait appel à la logique utilisé par la balise MM:DataSet ; elle partage donc les mêmes attributs que cette dernière. Pour plus d'informations, voir « MM:DataSet », page 721. Notez les valeurs d'attribut suivantes :
<h1 id="expression-3">Expression</h1>
En définissant cet attribut sur false, la balise n'a aucune action. Cela signifie que l'instruction SQL ou la procédure stockée spécifiée dans l'attribut CommandText n'est pas executée. Vous pouvez utiliser l'attribut Expression pour contrôler le moment où l'opération d'insertion doit avoir lieu. Par exemple, il pourrait être souhaitable d'effectuer une validation de formulaire côté serveur avant d'effectuer l'opération d'insertion. Dans d'autres cas, le code pourrait définir l'attribut Expression sur true si et seulement si le formulaire contenant les données à insérer a été envoyé.
<h1 id="commandtext-2">CommandText</h1>
Il s'agit en général d'une instruction SQL INSERT ou d'une Procedure stockée qui insère des enregistements.
<h1 id="createdataset-2">CreateDataSet</h1>
Cet attribut est normalement defini sur false, caraucun ensemble de données n'est creeé après l'execution de l'instruction INSERT. Dans le cas d'une Procedure stockée, il se pourrait toute fois qu'un ensemble de données se cree apres l'opération d'insertion.
<h1 id="mmupdate">MM:Update</h1>
Utilisez la balise MM: Update pourmettre a jour les enregistrements dans une base de données.
<h1 id="example-9">Example</h1>
<MM:Update runat="server"
CommandText "UPDATE fruits SET color = ?WHERE name = ? ConnectionString '<%# MM_NOTD_STRING %>'
Expression = <%# Request.Form["MM_update"] = = "true"%>
Debug "true"
CreateDataSet "false" & Parameters\ & Parameter~Value = ^ % \# Request~-Form~"fruitColor"~% >\ & Parameter~Value = ^ % \# Request~-Form~"updateNames"~% >\ & /Parameters </MM:Update>
<h1 id="directive-obligatoire-3">Directive obligatoire</h1>
<@ Register TagPrefix="MM" Namespace="MM" Assembly="MMtags" %>
<h1 id="attribut-3">Attribut</h1>
La balise MM:Update fait appel à la logique utilisé par la balise MM:DataSet ; elle partage donc les mêmes attributs que cette dernière. Pour plus d'informations, voir « MM:DataSet », page 721. Notez les valeurs d'attribut suivantes :
<h1 id="expression-4">Expression</h1>
En définitant cet attribut sur false, la balise n'a aucune action. Cela signifie que l'instruction SQL ou la procédure stockée spécifiée dans l'attribut CommandText n'est pas exécutée. Vous pouvez utiliser l'attribut Expression pour contrôler le moment où l'opération de mise à jour doit avoir lieu. Par exemple, il pourrait être souhaitable d'effectuer une validation de formulaire côte serveur avant d'effectuer l'opération de mise à jour. Dans d'autres cas, le code pourrait définir l'attribut Expression sur true si et seulement si le formulaire contenant les données àmettre à jour a été envoyé.
<h1 id="commandtext-3">CommandText</h1>
Il s'agit en général d'une instruction SQL UPDATE ou d'une Procedure stockée qui met à jour des enregistements.
<h1 id="createdataset-3">CreateDataSet</h1>
Cet attribut est normalement defini sur false, caraucun ensemble de données n'est cree apres l'execution de I'instruction UPDATE. Dans le cas d'une procedure stockee, il se pourrait toutefois qu'un ensemble de données se cree apres I'opération de mise a jour.
<h1 id="mmdelete">MM:Delete</h1>
Utilisez la balise MM:Delete pour supprimer des enregistements d'une base de données.
<h1 id="example-10">Example</h1>
<MM:Delete runat="server"
CommandText "DELETE FROM fruits WHERE name = ? ConnectionString "<%# MM_NOTD_STRING %>'
Expression = <%# Request.Form["MM_delete"] = = "true"%>
Debug = "true"
CreateDataSet "false" & Parameters\ & Parameter~Value = ^ % \# Request.~Form["deleteNames"]% >^\ & /Parameters </MM:Delete>
<h1 id="directive-obligatoire-4">Directive obligatoire</h1>
<pre><code class="language-asp"><@ Register TagPrefix="MM" Namespace="MM" Assembly="MMtags" %>
</code></pre>
<h1 id="attribut-4">Attribut</h1>
La balise MM:Delete fait appel à la logique utilisé par la balise MM:DataSet ; elle partage donc les mêmes attributs que cette dernière. Pour plus d'informations, voir « MM:DataSet », page 721. Notez les valeurs d'attribut suivantes :
<h1 id="expression-5">Expression</h1>
En définissant l'attribut Expression sur false, la balise n'a aucune action. Cela signifie que l'instruction SQL ou la procEDURE stockée spécifiée dans l'attribut CommandText n'est pas exécutée. Vous pouvez utiliser l'attribut Expression pour contrôler le moment où l'opération de suppression doit avoir lieu. Par exemple, il pourrait être souhaitable d'effectuer une validation côté serveur avant d'effectuer l'opération de suppression.
<h1 id="commandtext-4">CommandText</h1>
Il s'agit en général d'une instruction SQL DELETE ou d'une Procedure stockée qui supprime des enregistements.
<h1 id="createdataset-4">CreateDataSet</h1>
Cet attribut est normalement défini sur false, caraucun ensemble de données n'est créé après l'execution de l'instruction DELETE. Dans le cas d'une Procedure stockée, il se pourrait toute fois qu'un ensemble de données se create après l'opération de suppression.
<h1 id="parameters">Parameters</h1>
Utilisez la balise Parameters pour spécifique des paramètres. Vous pourriez être améné à spécifique des paramètres dans deux situations :
- L'attribut CommandText de la balise principale spécifie une instruction SQL paramétrée. Il s'agit d'une instruction SQL qui comporte des points d'interrogation (? en tant qu'espaces réservés replaquant des paramétres.
Remarque : il n'est pas correct de paramétrer toutes les parties de l'ensemble des instructions SQL. Par exemple, il est possible de paramétrer la clause WHERE d'une instruction SELECT, mais pas sa clause ORDER BY. Dans une instruction SQL, vous pouvez en général paramétrer toute combinaison de nom/valeur.
- L'attribut CommandText spécifique une procEDURE stockée qui accepte des paramétres.
Dans chacun de ces deux cas,les valeurs des parametes sont fournies par des balises Parameter placés dans le même ordre que les espaces réservés (voir « Parameter »,page 727).Les balises Parameter doiventetre entouréesd'une balise Parameters.
<h1 id="example-11">Example</h1>
<MM:Update runat="server" CommandText="UPDATE fruits SET color=? WHERE name=? ConnectionString=''<%# MM_NOTD_STRING %>' Expression=<%# Request.Form["MM_update"] == "true" %> Debug="true" CreateDataSet="false" < < Parameters> <Parameter Value = ^ < % # Request.Form["fruitColor"] % > / Parameter Value = ^ < % # Request.Form["updateNames"] % > / Parameters>
</MM:Update>
<h1 id="parameter">Parameter</h1>
Utilisez la balise Parameter pour spécifique des valeurs de paramètre.
<h1 id="example-12">Example</h1>
<MM:Insert runat="server" CommandText="INSERT INTO fruits (name, color) VALUES (?, ?)" ConnectionString='<%# MM_NOTD_STRING %>' Expression=<%# Request.Form["MM_insert"] == "true" %> Debug="true" CreateDataSet="false" < < Parameters> <Parameter Value = ^ <%# Request.Form["fruitName"] %>' /> <Parameter Value = ^ <%# Request.Form["fruitColor"] %>' /> </Parameters>
</MM:Insert>
<h1 id="attributes-2">Attributes</h1>
<h1 id="value">Value</h1>
Obligatoire. Valeur à attribuer aux paramètres Input ou InputOutput (voir Direction). La valeur se voit automatiquement attribuer un type de données approprié avant d'être transmise à la base de données. L'attribution dépend de la configuration de l'attribut Type. Lorsque l'attribut Direction est égal à Output, InputOutput ou ReturnValue, la valeur est configurée après l'exécution de CommandText.
<h1 id="direction">Direction</h1>
Facultatif. Permet de spécifique l'une des valeurs suivantes : Input, InputOutput, Output, ReturnValue. La valeur par défaut est Input.
<h1 id="nom">Nom</h1>
Facultatif. Pour les instructions SQL paramétrées, vous étés libre de désirir le nom qui vous convient. En général, le nom se rapporte à la signification du paramètre (@deptName, par exemple) et commence par le caractère @. Il existe néanmoins une contrainte : l'ordre dans lequel les balises Parameter figurent doit correspondre à celui des points d'interrogation dans l'instruction SQL. Etant donné que le nom est facultatif, vous pouvez ignorer cet attribut ; dans ce cas, le nom est défini sur « parameter_», suivi de l'index de base un du paramètre au sein de la liste de paramètres fournie.
Pour les procédures stockées, le nom doit correspondre aux marqueurs de paramètre dans la procédure stockée (par exemple, @id). Vous devez donc indiquer cet attribut lorsque vous utilisez des procédures stockées. Si un paramètre du type ReturnValue est nécessaire, sa balise Parameter doit préceder toute autre balise Parameter.
<h1 id="size">Size</h1>
Facultatif. Taille de la valeur du paramètre. Également appelé largeur de la colonne. Si cet attribut n'est pas indiqué, sa valeur est déduite des attributs Type et Value.
<h1 id="type">Type</h1>
Facultatif. Sécicie le type du paramètre. Vous pouvez indiquer les types de données ci-dessous. Chacun d'entre eux peut s'exprimer de deux manières.
<table><tr><td>(int)OleDbType.Boolean</td><td>"Boolean"</td></tr><tr><td>(int)OleDbType.UnsignedTinyInt</td><td>"UnsignedTinyInt"</td></tr><tr><td>(int)OleDbType.Char</td><td>"Char"</td></tr><tr><td>(int)OleDbType.DBTimeStamp</td><td>"DBTimeStamp"</td></tr><tr><td>(int)OleDbType.Decimal</td><td>"Decimal"</td></tr><tr><td>(int)OleDbType.Double</td><td>"Double"</td></tr><tr><td>(int)OleDbType.Single</td><td>"Single"</td></tr><tr><td>(int)OleDbType.Integer</td><td>"Integer"</td></tr><tr><td>(int)OleDbType.SmallInt</td><td>"SmallInt"</td></tr><tr><td>(int)OleDbType.BigInt</td><td>"BigInt"</td></tr><tr><td>(int)OleDbType.VarChar</td><td>"VarChar"</td></tr><tr><td>(int)OleDbType.UnsignedSmallInt</td><td>"UnsignedSmallInt"</td></tr><tr><td>(int)OleDbType.UnsignedInt</td><td>"UnsignedInt"</td></tr><tr><td>(int)OleDbType.UnsignedBigInt</td><td>"UnsignedBigInt"</td></tr><tr><td>(int)OleDbType.Currency</td><td>"Currency"</td></tr><tr><td>(int)OleDbType.DBDate</td><td>"DBDate"</td></tr><tr><td>(int)OleDbType.TinyInt</td><td>"TinyInt"</td></tr><tr><td>(int)OleDbType.DBTime</td><td>"DBTime"</td></tr><tr><td>(int)OleDbType.VarNumeric</td><td>"VarNumeric"</td></tr></table>
Les valeurs OleDbType suivantes ne sont pas prises en charge :
<table><tr><td>(int)OleDbType.Guid</td><td>"Guid"</td></tr><tr><td>(int)OleDbTypevariant</td><td>"Variant"</td></tr></table>
<h1 id="symboles">Symboles</h1>
@import 303
<h1 id="a">A</h1>
Absolus, chemins 426
Accès
aunepageassocie658
aunepage d'informationsdétaillées654
Accès à une page d'informations détaillées 654
Accessibilityé
authorisation 357
boite de dialogue, activation 358
cadres 361
clavier-navigation uniquement 354
Federal Rehabilitation Act 353
fonctions du système d'exploitation 354
images 359
lecteur d'écran 354
objects multimédia 362, 363
objects, insertion 360
test 364
Web Accessibility Initiative (W3C) 353
Accolades, équilibrage 212
Acquier,commande 93
Acquisition et placement de fichiers 93
Actifs
actualisation de la liste des sites 450
affichage dans le panneau Actifs 449
application de couleurs au texte 451
catégie Bibliothèque du panneau Actifs 453
catégore Modèle du panneau Actifs 454
categories 449
couleurs, creation 457
dossiers Favoris 458
insertion 451
listes des favors 457
modification 452
ouverture du panneau Actifs 448
planification 61
presentation 448
sLECTION de plusieurs 452
URL, creation 457
Actions
choix dans le panneau Comportements 371
compatibilité avec les navigateurs 375
contrôle des scénarios 421
creation 374
definitor 369
incluses avec Dreamweaver 375
modification dans les comportements 373
Voir aussi actions individuelles par nom 375
ActiveX, contrôleurs
insertion 350
presentation 350
Actualisation
liste Site (panneau Actifs) 450
Actualisation automatique 511
Actualiser local, commande 87
Affichage
calques 410
contenu de la section head 123
modeles en mode Code 468
modeles en mode Creation 468
plusieurs enregistements 568
régions modèles en mode Code 469
traces d'image 122
Affichage de code, mode
ouverture de fichiers non-HTML 187
Affichage des éléments invisibles 121
Affichage des fichiers du site 80
Afficher la région, comportement 567
Afficher le lanceur dans la barre d'etat, option 48
Afficher les fichiers dépendants, option 88
Afficher les tabulations du tableau de Mise en forme, option 255
Afficher-Masquer les calques, action 391
Aide 16
Aide de Dreamweaver 16
Ajout
contenu dynamique 553
extensions à Dreamweaver 55
lignes et colonnes 246
objets à un scenario 415
Ajout de cadres à un scenario 417
Ajout deliens 452, 453
Ajouter un objet à la bibliothèque, commande 460
Ajouter un objet au scenario, commande 415
Ajouter une feuille de style externe, boîte de dialogue 303
Ajouter une image, commande 415
Ajuster la position, commande 122
Albums photos pour le Web, creation 330
Alignment
calques 407
elements de page 315
images 289
options 315
texte 289
traces d'image 123
Alignement à droite (inspecteur de propriétés des images) 315
Alignement à gauche (inspecteur de propriétés des images) 315
Aligner l'image avec la selection, commande 123
Alinéa
application 289
Aller à l'URL, action 383
Aller à la page associée, comportement 658
Aller à la page d'informations détaillées, comportement 643
Aller à la page d'informations détaillées, comportement 654
Aller, association du bouton à un menu de reroutage 384
Ancrage de panneaux et de groupes de panneaux 46
Ancre nommée, commande 432
Ancre, object (barre Insertion) 432
Ancrensnommées 432
Animations
amelioration 420
application à des objets 419
copie et collage 419
creation 415
presentsation 20
scenarios 413
sur un chemin complexe 416
Annulation d'ancrage de panneaux et de groupes de panneaux 46
Anonyme, telechargement de fichier 622
Aperçu dans le navigateur, commande 496
Aperçu dans les navigateurs
presentation 496
Aperçu en ligne à partir du serveur local, commande 428
Appel JavaScript, action 375
Appelable (procedurestockee),option 673
Applets Java
rendredynamiques559
Applets.Voir Applets Java 350
Application
couleurs au texte 451
styles CSS 302
styles HTML 296
stylespersonnalises302
Application de comportements aux images 318
Application, variables 544
Applications Web
conditions requires 134
Applications, autres, utilisation avec Dreamweaver 50
Appliquer automatiquement, option (panneau Styles HTML) 294
Appliquer format source, commande 185
Applique le modele à la page, commande 488
Apprentissage de Dreamweaver 22
Arborescence d'éléments de base de données 540
Archivage et extraction des fichiers
annulation d'une extraction 93
presentation 91
Archiver 75
Archiver/Extraire 90
Archiver/Extraire, rapportes 106
Arrer le scenario, action 399
Arriere-plan
page, image et couleur 117
transparencedans117
ASP 137
connexionsaunebasede données 157
ASP.NET 136
balise Parameter 727
balise Parameters 727
balise personalisée DataSet 721
balise personalisée Delete 726
balise personalisée If 724
balise personalisée Insert 724
balise personalisée Update 725
balises personalisées Macromedia 721
connexions aux bases de données 151
elements de formulaire dynamiques 633
grille de données 573, 574
champ de données simple 574
forme libre 574
hyperlien 574
Modifier, Mettre à jour, Annuler, boutons 574
Supprimer,boutons 574
importation de balises 192
liste de données 573
réduction de SQL 539
Associées, pages 658
Attacher une feuille de style, icône 303
Atteindre l'imag du scenario, action 398
Attributes
recherches 205
rendredynamiques 557
Voiraussibalises205
Attributes de balise modifiables (modèles) 466, 477
Audio.Voirson346
Automatisation des tâches 124
Autorisation,niveau 689
<h1 id="b">B</h1>
Balise
en-tete, application 288
paragraph, application 288
Balise body 123
Balises
body 123
chevauchement 198
incorrectes 198
recherches 205
selection 120
Balises personalisées, importation 191
Balises, importation 191
Barre (couleur par défaut), bouton 118
Barredetat38
définition du texte (comportement) 390
menu déroulant Taille de fenêtre 38
preférences 40
Barredoutils
titres des documents, modification 117
Barredoutildudocument 36
Barredoutilsstandard36,42
Barre de navigation
ajout d'images 442
creation 442
états des images 442
modification des éléments 444
Barre de navigation des enregistements
creation 563
masquage 567
Barre de navigation du jeu d'enregistrements, objet dynamique 564
BarreduLanceur36,40
personalisation 48
Barre Insertion 36, 201
ancrage 46
categories 43
preférences 45
présentation 42
Bas absolu, alignment (inspecteur de propriétés des images) 315
Bas, alignment (inspecteur de propriétés des images) 315
Base de données
conception 696
connexions, à propos 702
enregistements 695
stockage du contenu 523
tables,àpropos 695
Base de données, connexions à
chaines de connexion 162
OLE DB 163
Base de données, pilotes
notions de base 702
Bases de données
a propos 695
MySQL 177
schemasetcatalogues 513
BBEdit, intégration (Macintosh uniquement) 194
BD OLE, connexion 152
BD OLE, fournisseurs 152
BD OLE, paramètres de connexion 153
Bibliothèques de balises 188
Bitmaps,redimensionnement 316
Voiraussiimages316
Blocs de code
instructions sur le codage 604
marqueurs de paramètres 607
positionnemment 605
réduction 596
Bouclage des scénarios 417
Boucle, option 414
Bouton Reproduire 125
Boutons
Aller 384
creationdeboutonsdeformulaire629
Envoyer, boutons graphiques 630
Boutons radio 624
Boutons radio dynamiques, boite de dialogue 636
Boutons radio, rendre dynamiques 636
<h1 id="c">C</h1>
Cadres 267-280
ciblage 278
compatibilité avec les navigateurs 279
comportements,utilisation 279
creation 271, 272
definitor 268
enregistrement 275
imbriques 273
modification de la couleur d'arrière-plan 277
modification du contenu 278
presentation 267
proceduredecreation 271
propriétés 277
selection 273
suppression 272
utilisation de liens 278
Cadres, panneau 274
Calques 421
alignment 407
alignment sur la grille 408
conversion en tableaux 411
conversion pour les navigateurs 3.0 413
creation 403
dans la conception d'un tableau 411
déplacement 407
dessinerplusieurs 403
empêcher le chevauchement 412
imbrication 405
insertion 403
manipulation 406
marqueurs,affichage 403
modification de l'ordre d'emplement 410
modification de la visibilité avec des comportements 391
modification de la visibilité avec le panneau Calques 410
positionnement 408
pouvant etre déplaces 381
preférences 404
propietés 408
propriétés pour plusieurs 409
redimensionnement 406
selection 406
sLECTION de plusieurs 409
visible 410
Calques, panneau 403
Caracteres spéciaux
insertion 291
saut deligne 285
Cartes de site
affichage d'une branche 88
affichage des fichiers dépendants 88
commande Lier au nouveau fichier 86
enregistrement dans un fichier d'image 88
liens 437
modificationdesliens 438
suppression des liens 438
Cartes graphiques
creation cote client 445
présentation 444
sèlection de plusieurs zones réactives 445
zones reactives 445
Cartes graphiques cote serveur 444
Cartes graphiques du site 83
ajoutefichiersaunsite86
Case a cocher dynamique, boite de dialogue 635
Case de couleur, option 118
Cases a cocher 624
Cases à cocher, rendre dynamiques 635
Catalogues 513
Catégories
actifs 449
préférences 51
Cellules de Mise en forme
alignment 262
couleur ar-pl 262
formatage 262
Pas de renvoi à la ligne, option 262
préférences 266
Cellules de tableau
couper, copier et coller 249
formatage 242
fractionnement 247
fusion 247
VoiraussicellulesdeMiseen forme,tableaux242
Cellules. Voir cellules de Mise en forme, cellules de tableau 254
Centre de support de Dreamweaver 17
CGI
documents de reference 29
CGI (Common Gateway Interface) scripts 632
Chaine de connexion, BD OLE 153
Champs
champs de fichier 622
creation de champes de texte 618
creation de champs masqués 623
telecharge ment de fichiers sur un serveur 622
Champs texte, definition du texte avec des comportements 390
Changer la propriété, action 376
Chemind'acces physique 164
Chemin d'acces virtuel 164
Chemins absolus 426
relatif s à la racine 427
relatifsexauxdocuments 426
Chemins relatifs à la racine du site à propos 427
Chemins relatifs à la racine. Voir chemins relatifs à la racine 427
Chevauchement de balises 198
Ciblage de cadres vers blank 279
_parent 279
_self 279
_top 279
Ciblage des liens
dans les documents 429
ouverture d'un document dans une nouvelle fenetre 430
Ciblage des navigateurs
conversion d'un fichier pour une compatibilité avec la version 3.0 413
Codage, instructions 604
Codages 52
Code
modification avec BBEdit 194
preférences de formatage 183
Code source
conversiondesattributesCSS307
copie et collage de Fireworks dans Dreamweaver 328
copie et collage, général 203
correction, préférences 185
documents de reference 29
écriture et modification 199, 203
externes,éditeurs 193
formatage dans des documents existants 185
mise à jour de HTML Fireworks dans Dreamweaver 329
modification avec BBEdit 194
nettoyage 211
options 182
préférences de formatage, définition 183
préférences de formatage, presentation 183
préférences des couleurs 186
recherche 205
recherche de balises 205
réferencé 210
selection dans la fenetre de document 120
styles de balises 298
Code source HTML
recherche 308
styles de balises 298
Code source, option 205
Code, mode
affichage de modeles 468
ColdFusion 136
composants 579-583
Composants, panneau 582
connexions aux bases de données 145
connexions UltraDev 4 147
creation de sources de données 146
debogueur 223
pages utilisant des composants 582
UltraDev 4 133
variables client 546
variables ColdFusion 546
Collage
étapes de l'histoire 127
Collecte des données utiliser 648
Colonnes, lignes et cellules
ajout et suppression 246
formatage 242
Colonnes, option (Insérer un tableau) 238
Coloration du code, préférences 186
Combinaison de panneaux flottants 46
Commande (procedure stockée), option 673
Commande source 90
Commandes
accès à partir d'un menu contextual 42
accès à partir du menu contextuel 40
creation, à partir des étapes de l'historique 128
enregistrement 129
Commentaires, insertion 204
Common Gateway Interface (CGI). Voir CGI 632
Comportement 566
Comportement, panneau 370
Comportements 369-400
actions, creation 374
canal dans les scénarios 414
compatibilité avec les navigateurs 375
déclenchement 371
definitor 369
et éléments de bibliothèque 463
et formulaires 632
et images 318
et liens 446
et média 350
etscenarios 373
modification 373
rattachement 371
suppression 373
tiers 374
Comportements de serveur
accès à une page associée 658
accès à une page d'informations détaillées 654
aller aune page d'informations détaillées 643
codage 199
creation 596
creationdeboitesdedialogue pour607
déplacement vers des enregistements 566
déplacement vers un enregistrement spécifique 656
insertion d'enregistrements 665
installation d'autres comportements 595
instructions sur le codage 604
mise à jour d'enregistrements 669
modification d'enregistrements 661
modification de comportements personalisés 610
répetition de régions 568
suppression d'enregistrements 672
test 609
Composants ColdFusion, panneau 582
Compteur d'enregistrements, creation 570
Conception 57
cadres 269
fichiers 113
Conception du site 57
Conception Web, niveaux d'expérience 22
Conditions requires
applications Web 134
Connexion au serveur SQL 152
Connexion UltraDev 4 ColdFusion 147
Connexion,chains de 162
Connexions à une base de données
JSP 169
PHP 177
Connexions aux base de données
ASP 157
Connexions aux bases de données
ASP.NET 151
ColdFusion 145
Contenu dynamique 538
à propos 535
ajout a des pages 553
jeu d'enregistrements, creation 537
jeu d'enregistrements, definition 536
Contenu,ajoutauxtableaux 238
Contrôle Shockwave ou action Flash 378
Contrôles de déplacement, création 379
Conventions 25
Conventions typographiques 25
Conversion de styles
en HTML 307
styles CSS en balises HTML 307
Convertir les calques en tableaux, commande 411
Convertir les tableaux en calques, commande 413
Copie des étapes de l'historique 127
Copie et collage
HTML Fireworks 328
jeux d'enregistrements 551
Couleur du lien, option (propriétés de la page) 119
Couleur du texte, option (propriétés de la page) 119
Couleur par défaut, bouton 118
Couleur système, bouton 118
Couleur, selecteur
système 118
Couleurs
arrière-plan d'un cadre 277
arrière-plan de la page 117
choix 118
creation d'actifs, couleurs 457
en tant qu'actifs. Voir actifs 448
nuanciers 118
par défaut pour le texte de la page 119
pipette,utilisation 118
securisées pour le Web 119
texte, modification 289, 451
Couleurs sécurisées pour le Web, palette de couleurs 118
Créateur de comportements de serveur 596
Creation 435
d'un nouveau style CSS 301
d'une image survolée 316
liens 428
style HTML 295
Creation de couleurs et d'URL 457
Creation, mode
affichage des modèles 468
Creer un album photos pour le Web, commande 330
CSS, styles 114
application de styles personnalisés 302
attribut de classe 301
attributes, conversion en HTML 307
creation 301
exportation 306
suppression 301
supprimer un style d'une sélection 303
utilisation avec XHTML 216
Cubes de couleur, palette de couleurs 118
<h1 id="d">D</h1>
DataSet, balise personalisée (ASP.NET) 721
Dates insertion 291
Déboge de pages ColdFusion 223
Débogueur JavaScript 217 boîte d'ajretissement 218
definition des points d'arrêt 220
entrer,sortir,sauter 221
erreurs de logique 220
erreurs de syntaxe 219
fenetre 220
liste desvariables 222
observation desvariables 222
Débuter 22
Déconnexion des utilisateurs 691
Defaut du navigateur, alignment (inspecteur de propriétés des images) 315
Définir comme page d'accueil, commande 87
Définir image barre de navigation, action 387
Définir le modele de couleur,commande 119
Définir style HTML, boîte de dialogue 293
Définition points d'arrêt 220 polices et modification des caractéristiques 286 propriétés d'un document 116
Définition de sites 138
Définition de type de document 191
Delete, balise personalisée (ASP.NET) 726
Démarquer la région modifiable, commande 473
Demarrage d'un editeur d'image externe 318
Dépannage
clic dans les régions verrouillées 469
erreurs du serveur 142
Navigator, plug-ins 349
transfert de fichiers 95
Déplacement de calque, action 379
Déplacer vers un enregistrement 566
Déplacer vers un enregistrement spécifique, comportement 656
Déroulement du travail pour des pages dynamiques 515-521
Deroulement du travail, rapport 106
Design Notes
ajout d'options d'etat 104
configuration 101
enregistrement d'informations sur les fichiers 101, 102 pour les documents et les objets 102 pour les fichiers Fireworks 104 pour les objets multimédia 340 presentation 101 rapportes 106
Dessin calques 403
Dessiner cellules et tableaux de Mise en forme 255
Detacher de l'original, option 463
Detacher du modele,commande 488
Director, creation d'animations Shockwave 346
Documentation Extension de Dreamweaver MX 17
Documents apercu dans les navigateurs 496
application d'un modele 487
creation 111
définition des propriétés 116
Design Notes, utilisation 101
enregistrement 115
enregistrement dans un modele 471
modeles, detacher de 488
ouverture 115
ouverture de nouveaux. Voir Documents 113
recherche 308
taillde tellechargement, temps 500
titre de page 117
verification des liens 497
Documents de reference 29
Documents liés, ouverture 500
Données dynamiques, boîte de dialogue 558
Données tabulées, importation 239
Dossiers
Favoris 458
recherche 308
recherche de texte 308
Droits d'accès
ajout aux pages 690
enregistrement dans une base de données 691
exampie 689
DSN 158
DSN, connexions sans 161
Dynamique, contenu
attributes 557
formulaires 632
images 555
objects 559
replacement 560
suppression 560
suppression d'une page 521
texte 554
<h1 id="e">E</h1>
Ecriture du code (mode Code ou inspecteur de code) 199, 203
Editeur de la bibliothèque de balises 188
Editeur deraccourcisclavier 52
Editeurs de balises 202, 226
Editeurs de textefichiers créés par
Editeurs de texte. Voir Externes, éditeurs 193
Editeurs HTML basés sur le texte. Voir externes, éditeurs 193
Editeurs.Voir Externe 193
Eléments alignment 315
Eléments de bibliothèque
ajout à des pages 453, 460
creation 460
en tant qu'actifs. Voir actifs 448
modification 453, 461
modification des comportements 463
presentation 459
rendre modifiables dans les documents 463
suppression 462
Eléments de formulaire dynamiques ASP.NET 633
Eléments de la bibliothèque 459
Eléments invisibles
affichage et masquage 121
commentaires 204
scripts 229
seLECTION 120
Eléments multimédia insertion 338
Empécher le chevauchement des calques, commande 412
Empilement, ordre calques 410
Enregistrement documents 115
fichiers dans des cadres et des jours de cadres 275
recherches 207
Enregistrement des commandes 129
Enregistrement, page 683
Enregistements affichage de plusieurs enregistements 568 creation d'un compteur 570 insertion 662
liens de navigation 563
mise à jour 665
suppression 670
Enregister le chemin du calque, commande 416
Enregister le jeu de cadres sous, commande 276
Enregister le jeu de cadres, commande 276
Enregister tous les cadres, commande 276
Enregister, commande 115
Ensemble de pages Principale/Détails, objet dynamique 641
Environnement de codage 197
Environnements de travail Live Data, fenetre 508
Envoyer,boutons 630
Equilibrage des accolades 212
Erreurs dans le code JavaScript 220
Erreurs de logique dans le code JavaScript 220
Erreurs de syntaxe 219
Espace de travail 31
a propos 33
présentation 32
presentsion flottante 35
Espace insécable,insertion 285
Espacement entre les cellules, option (Insérer un tableau) 238
Espacement, images
préférences 265
Espacement, insertion d'espace insécable 285
Etat de navigation du jeu d'enregistrements, objet dynamique 571
Evénements
déclenchement d'actions 371
definitor 369
disponibles pour différents navigateurs et objets 370
modification dans les comportements 373
Examenducode 221
Excel.Voir Fichiers Microsoft Excel,importation.239
Exportation
sites 89
XML, notation des balises 491
Exportation de données de tableau 251
Exportation de styles 306
pour creer une feuille de style CSS 306
Exporter le tableau, commande 252
Expressions régulières 208
Extensibilité
comportements tiers 374
Extension automatique (mode Mise en forme) 263
Extension Manager 55
Extensions 55
creation 596
installation 595
Externes, éditeurs
BBEdit (Macintosh uniquement), intégration 194
HTML, presentation 193
images 317
média 338
texte, presentation 193
Externes, feuilles de style
creation 303
creation de liens vers 303
modification 304
Extraire le(s) fichier(s) 75
Favoris, dossiers 458
Fenetre de bienvenue 36
Fenetre de document 36
affichage du code 37
barredetat38
barredetitre 37
cadres dans 276
lecture des plug-ins de Navigator 349
menu déroulant Taille de fenêtre 38
notions de base 37
ouverture de documents existants 115
ouverture de nouveaux documents 113
recherche de texte 308
redimensionnement 38
selecteur de balises 38
selectiond'elements 120
taillde la page et temps de telechargement 38
Fenêtres
Voir aussi Inspecteurs, panneaux 40
Feuilles 298
Feuilles de style
boite de dialogue Modifier feuille de style 305
externes 303
modification de feuilles de style externes 304
presentation 298
Voir aussi styles 298
Fichiers
affichage dans le panneau Site 80
creation 111
exploration 82
organisation 59
placement 95
recherche 308
synchronisation des sites locaux et distants 96
telechargement 93, 95
texte 116
types pris en charge 198
voilage 97
Fichiers dépendants
acquisition 94
affichage et masquage 87
placement 95
Fichiers distants, option 78
Fichiers DTD 191
Fichiers DTD XML 191
Fichiers.jar files 192
Fichiers locaux, option 78
Fichiers masqués, affiche et masquage 87
Fichiers Microsoft Excel, importation 239
Fichiers orphelins 498
Fichiers.tld 192
Films, insertion 338
Fireworks
Design Notes dans 104
Flash, animations
en tant qu'actifs. Voir actifs 448
insertion 345
presentation 340
verification 378
Flash, boîte de dialogue de boutons 341
Flash, contenu
presentation 340
Flash, objects bouton 341
apercu 343
modification 342
Flash, objects texte
apercu 343
Fonctionnalités, nouvelles de Dreamweaver 25
Format, colonne 562
Formatage du code source HTML
préférences 183
Formater le tableau, commande 243
Formats de données
application 562
creation 563
modification 562
Formats de fichier, image 311
Formulaire d'insertion d'enregistrement, objet
dynamique 662
Formulaire de mise à jour d'enregistrement, objet dynamique 667
Formulaires
ajout a un document 615
boutons 629
champ de mot de passer 618
champs de texte, création 618
champs, validation 399
comportements,utilisation 632
creation 615
creation de champs de fichier 622
creation de scripts cote client 631
creationdescriptscote serveur 632
Envoyer,boutons 630
groupes deboutons radio 625
insertion tableaux 631
listedeseroulantes 626
menucontextuel 628
menus dereroutage,creation 440
objects de menu, rendre dynamiques 634
presentation 613
rendre les boutons radio dynamiques 636
rendre les cases à cocher dynamiques 635
rendre les champs image dynamiques 634
rendre les champstexte dynamiques 634
utilisation pour collecter des données 648
Formulaires HTML. Voir formulaires 632
Forums en ligne 17
Fractionnerlecadre,commandes 271
Fractionner les cellules, commande 248
Fragments de code 200
Fragments de code, panneau 200
FTP 66
acquerir et placer 93
dépannage 66
journal 94
Fusionner les cellules, commande 247
<h1 id="g">G</h1>
Gestion
actifs.Voiractifs 448
extensions 55
groupes de panneaux 46
liens 436
sites 71
Gestion des informations d'etat 658
Gestionnaires d'evenements. Voir événements 370
GIF, images
comme tracédimage 122
utilisations 311
Graphiques.Voir Images 311
Gras, texte 286
Grille
affichage 258, 408
alignment des calques 408
alignment sur 258
comme guide 121
espacement 258
Groupe de boutons radio, boite de dialogue 625
Groupe de discussion Dreamweaver 17
Groupes de panneaux 36
Guides visuels
présentation 121
regles 122
traces d'image 122
<h1 id="h">H</h1>
Haut du texte, alignment (inspecteur de propriétés des images) 315
Haut, alignment (inspecteur de propriétés des images) 315
head, modification du contentu de la section 123
Historique, panneau
automatisation des tâches 124
commandes, creation à partir des étapes de l'historique 128
effacement de la liste des actions du panneau Historique 50
étapes maximales, définition 50
étapes, application à d'autres objets 125
étapes, copie et collage 127
étapes, répetition 124
présentation 49
HomeSite 194
HTML
espace insécable 285
formatage 283
insertion 283
recherche 308
styles de balises 298
HTML, fichiers
importation 116
HTML, rendre les attributs dynamiques 557
HTML, style
modification d'un style existant 297
HTML, styles
affichage 293
application 294, 296
creation 295, 296
modification 297
Nouveau style,icone 295
suppression 294
suppression du panneau 294
utilisation sur d'autres sites 297
Hyperlien, boîte de dialogue 433
<h1 id="1">1</h1>
I/s (images par seconde) 414
IBM WebSphere 137
If, balise personalisée (ASP.NET) 724
Ignorer les différences entre les espaces blancs, option 310
Image survolée, champ de texte 317
Images
a propos 311
alignment 289
application de comportements 318
cartes graphiques 444
changer le fichier source avec des scenarios 418
editeurs d'images externes 317
en tant qu'actifs. Voir actifs 448
extensibilité 316
format, pris en charge 311
insertion 312
insertion en mode Mise en forme 259
intervention (comportement) 397
modification 317
préchargement (comportement) 387
rendredynamique555
restauration des images interverties (comportement) 398
Images par seconde (i/s) 414
Images-clés
creation 415
presentation 414
Imbrication 404
cadres 273
calques 405
Imbriquer lors de la création dans un calque existant, option 404
Importation
données tabulées 284
feuille de styles CSS externe 303
fichiers HTML Word 116
sites 89
texted'autresdocuments 284
Importation de balises JSP 192
Importation de balises personalisées 191
Importation des données de tableau, commande 239
Importer HTML Word, commande 116
Inclusions cote serveur 231
insertion 232
modification 232
Incorrect, balises
affichage 198
Index Z, option (pour les calques)
modification de l'ordre d'emplement 410
Index, aide 16
Indicateurs de code 199
preférences 185
Informations détaillées, pages
recherche d'un enregistrement donne 644, 656
Insérer barre de navigation, boîte de dialogue 442
Insérer des données tabulaires, commande 239
Insérer l'enregistrement, comportement 665
Insérer la page, création insertion 662
Insérer lien messagerie électronique, boîte de dialogue 434
Insérer menu de reroutage, boîte de dialogue 440
Insérer un champ d'image, commande 630
Insérer une ancre nommée, boîte de dialogue 432
Insert, balise personnalisee (ASP.NET) 724
Insertion
actifs 451
annimationsFlash 345
animations Shockwave 346
applets Java 350
caracteres speciaux 291
contrôles ActiveX 350
dates 291
elements multimédia 338
images 312
images Fireworks dans Dreamweaver 324
imagesurvolées317
inclusions cote serveur 232
objects bouton Flash 341
objects Texte Flash 343
Insertion d'un espace réservé pour une image 313
Insertion d'actifs. Voir actifs 448
Inspecteur d'images 444
Inspecteur de balises 203
Inspecteur de code 181
Inspecteur de propriétés 36, 225
affichage 45
agrandissement 45
correction des liens brises 499
modeListe558
mode Standard 558
modification d'un jeu d'enregistrements 521, 560
rendre les attributs HTML dynamiques 557
Inspecteurs
inspecteur d'images 444
inspecteur de propriétés 45
ouverture et fermetre avec la barre du Lanceur 40
Voiraussi Panneaux 40
Intégration de Dreamweaver avec d'autres applications 50
Intégration entre Dreamweaver et Fireworks
creation d'albums photos pour le Web 330
insertion de fichiers Fireworks 324
lancement et modification d'images Fireworks 326, 333
lancement et optimisation des images Fireworks 327
Lancer et Modifier, préférences 323
mise à jour de HTML Fireworks 329
Optimiser l'imag dans Fireworks, commande 327
Intégration entre Dreamweaver et Fireworks. Voir intégration entre Dreamweaver et Fireworks 324
Interactivité 20
Intervertir une image, action 397
Introduction (par ou débuter) 22
ISP 164
Italiques 286
<h1 id="section">#</h1>
Jakarta Tomcat 137
Java, applets
insertion 338, 350
presentation 350
JavaScript
actions 370
alertes 386
comportements 369
exécution 375
fichiers 116
insertiondescripts229
JDBC
paramètres de connexion 171
pilotes 170
Jeu d'enregistrements
à propos 536
arborescence d'elements de base de données 540
colonnes, definition (SQL) 710
copie et collage 551
Dans une page d'informations détaillées 644
dans une page de résultats 649
définition sans SQL 537
filtrage des enregistements (SQL) 711, 714
Jeu d'enregistements, boite de dialogue (simple) 538
limite des enregistements renvoyés (SQL) 711
mise en mémoire cache 550
modification ou suppression 550
réduction de SQL 709
relations entre tableaux (SQL) 714
Jeud'enregistements,boite de dialogue avancé538
simple 538
Jeuderesultats,JSP516
Jeux d'enregistrements
simple, creation 537
SQL, réduction d'instructions personalisées 538
Jeux de cadres 271
ciblage des liens 429
enregistrement 275
imbriques 273
prédéfinis, insertion 271
propriétés 277
selection 273
Voir aussi Cadres 273
Jouer le scenario, action 399
Jouer le son, action 386
JPEG, images
comme tracédimage 122
utilisations 311
JRun 137, 193
JSP 137
connexionsaunebasede données 169
importation de balises 192
<h1 id="l">L</h1>
Lancer et Modifier, préférences 323
Lecteur d'écran
Window Eyes 354
Lecteurs d'écran
JAWS pour Windows 354
Lecture auto, option 414
Lecture auto, option (panneau Scenarios) 415
Lecture d'objects Flash 343
Liaison
a un document avec l'icone du pointeur 430
ancres 432
documents 429
vers une ancre nommée avec l'icone du pointeur 433
vers une feuille de style CSS externe 303
Liaisons de données, propriétés 153
Liaisons, panneau
ajout de texte dynamique 554
creation d'un compteur d'enregistrements 572
Format, colonne 562
rendre les attributs HTML dynamiques 557
rendre les formulaires dynamiques 632
suppression de sources de données 550
Lien 428
Lienhref303
Liens
application à une seLECTION 452, 453
cartedusite 437
ciblage 428
correction 499
dans les modeles 467
fichier cache 436
mise à jour 436
modification au niveau du site 438
modification des cadres avec 278
ouverture de la source 437
relatifà la racine du site, option 430
relatifsaudocument,option430
suppression 437
verification 497
vers des ancres 432
vers des feuilles de style 303
vers un document 428
Liens actifs, option de couleur (propriétés de la page) 119
Liens brises 498
Liens de navigation pour les enregistements 563
Liens et navigation 425
Liens externes 498
Liens hypertextes 428
Liens visités, option de couleur (propriétés de la page) 119
Liens, masquage 567
Lier au fichier existant, commande 86
Lier au nouveau fichier, commande 86
Ligne de base, alignment (inspecteur de propriétés des images) 315
Lignes, option (Insérer un tableau) 238
Liste, mode dans l'inspecteur de propriétés 558
Liste/Menu dynamique, boite de dialogue 634
Listes
creation 290
Listedeseroulantes 626
Live Data, fenêtre
à propos 520
actualisation automatique 511
description 508
fichiers manquants 510
fourniture des paramètres attendus 511
parametes d'URL sur la barre d'outils 511, 520
Localhost 142
<h1 id="m">M</h1>
Mac OS, palette de couleurs 118
Macromedia Director, creation d'animations
Shockwave avec 346
Macromedia Exchange 55, 595
Macromedia HomeSite 194
Macromedia JRun 137, 193
Macros (creation de commandes) 128
Map, balise 445
Maquettes 60
Marge interieure des cellules, option (Insérer un tableau) 238
Marqueurs de paramètres 607
Marqueurs pour les éléments invisibles 121
Masquage
liens 567
Masquage des éléments invisibles 121
Masquer le menu contextual 396
Menu contextuel
creation 628
Menu de reroutage Aller 384
Menu dereroutage, action 383
Menu déroulant Taille de fenêtre 38
Menu des en-têtes de colonne 264
Menu contextuels 40, 42
Menu de raccourcis. Voir Menu contextuels 40, 42
Messagecontextuel,action 386
Messagerie, fichiers 116
Messagerie, liens
creation 434
modification 438
Metre à jour l'enregistrement, comportement 669
Metre à jour la page en cours, commande 462, 489
Metre à jour la page, creation 665
Metre à jour le code HTML, commande 329
Metre à jour les pages, commande 489
Microsoft Word
fichiers, ouverture 116
Milieu absolu, alignment (inspecteur de propriétés des images) 315
Milieu, alignment (inspecteur de propriétés des images) 315
Mise à jour d'enregistements 665
Mise à jour des liens 436
Mise en forme, 262
Mise en forme, cellules 254
dessiner 255
suppression des hauteurs 260
Mise en forme, mode
a propos des cellules et des tableaux de Mise en forme 254
ajout de contenu 259
basculement vers 253
definition de la largeur 263
déplacement de cellules et tableaux de Mise en forme 260
dessiner des cellules et des tableaux de Mise en forme 255
effacerhauteur,attributes 262
espacement de cellule 262
extension automatique 263
formatage de cellules de Mise en forme 262
grille 258
image d'espacement, préférences 265
images d'espacement, préférences 265
largeur fixe 263
menu des en-têtes de colonne 264
préférences 266
presentation 253
redimensionnement de cellules et tableaux de Mise en forme 260
replissage de cellule 262
suppression des hauteurs des cellules 260
Supprimer l'imbrication, option 262
tableaux de Mise en forme imbriques 257
uniformiser la largeur des cellules 262
Mise en forme, planification.Voir Mise en forme, mode,modeles 253
Mise en forme, tableaux 254
dessiner 255
suppression des hauteurs 262
Supprimer l'imbrication, option 262
Uniformiser la largeur des cellules, option 262
Mise en mémoire cache des sources de données 550
Mise en page. Voir Mise en forme, mode, modeles 253
Mode Code 181
basculement en mode Creation 37
écriture et modification du code 199, 203
options 182
Mode Creation
basculement en mode Code 37
ModeMise en forme 253
Modles 115-491
Actifs, panneau 454
application à un document 454
application à un document existant 487
attributes de balise modifiables 466, 477
changement de nom 455
clic dans les régions verrouillées 469
creation 470
creation de nouveaux documents 115, 480
creation de régions modifiables 472
detacher un document de 488
en tant qu'actifs. Voir actifs 448
imbrication 485
liens 467
mise à jour de documents 488
mise à jour de Dreamweaver 4 488
modification 454
modification de scripts de serveur dans des documents 467
modification des propriétés 481
modification du code à l'extérieur des balises HTML 467
presentation 464
recherche des régions modifiables 481
région facultative 466, 478
région repétée 466, 473
régions modifiables 465
régions modifiables et régions verrouillées 465
rendre une région non modifiable 473
verification de la syntaxe 489
XML 490
Modèleimbriques 485
Modification
actifs 452
bases de données,utilisation de procedures stockées 673
code (mode Code ou inspecteur de code) 199, 203
comportements de serveur 609
feuille de style CSS 305
jeu d'enregistrements 550
objects bouton Flash 342
propriétés de la page 117
raccourcis clavier 52
sources de données 550
style HTML 297
Modification d'enregistrements, comportements 661
Modifier avec BBEdit, commande 194
Modifier avec HomeSite, commande 194
Modifier feuille de style, boite de dialogue 305
Modifier la liste de formats, boîte de dialogue 563
Modifier la liste des polices, commande 287
Modifier le contenu sans cadres, commande 279
Modifier le lien au niveau du site, commande 438
Mots de passer
laisser les utilisateurs besoin 684
stockage 684
verification pendant l'ouverture de session 688
MPEG, animations, en tant qu'actifs. Voir actifs 448
Multimédia. Voir média 338
MySQL 177
<h1 id="n">N</h1>
Navigateur de fichiers 82
Navigateurs
apercu dans 496
ciblage 494
compatibilité, planification 58
compatibilite, test 494
couleurs, sécurisées 119
et styles CSS 307
fichiers compatibles avec la version 3.0 413
principal, definition 496
versions, verification 376
Netscape Navigator 4, compatibilité des calques 404
Netscape Navigator, plug-ins
dépannage 349
lecture dans la fenetre de document 349
Nettoyer HTML, commande 211
Nom de la source de données, définition 717
Nommées, ancres
creation 432
Noms d'utilisateur
laisser les utilisateursCHOISIR 684
stockage 684
verification de l'unicité 686
verification pendant l'ouverture de session 688
Notions de base de Dreamweaver 22
Nouveau à partir d'un modele,commande 115,481
Nouveau document, boite de dialogue 111
Nouvelles fonctionnalités de Dreamweaver 25
Nuances de gris, palette de couleurs 118
Nuanciers, couleurs 118
Nuls, liens
creation 435
modification 438
<h1 id="0">0</h1>
Objects
ajout de Design Notes 103
cases à cocher et boutons radio 624
insertion à l'aide de la barre Insertion 42
rendredynamiques 559
Objects ActiveX, rendre dynamiques 559
Objets de liste/menu, rendre dynamiques 634
Objects dynamiques
ensemble de pages Principale/Détails 641
formulaire d'insertion d'enregistrement 662
formulaire de mise à jour d'enregistrement 667
Jeud'enregistrements,barrede navigation 564
Navigation du jeu d'enregistrements, état 571
Objects Flash, rendre dynamiques 559
Objets Generator, rendre dynamiques 559
Objects Shockwave, rendre dynamiques 559
ODBC
affichage des pilotes installés 705
OLEDB163
OnBlur, événement 399
Optimiser l'imag dans Fireworks, commande 327
Options d'acces 65
Options d'affichage
panneaux flottants 48
polices 52
Ordre d'empilement
modification avec des scenarios 418
Orthographe
dictionaryse 308
verification 308
Ouverture
documents existants. Voir Documents 115
Ouverture de documents liés 500
Ouverture de fichiers HTML Word 116
Ouverture de fichiers non-HTML 187
préférences 187
Ouverture des fichiers texte 116
Ouvrir la fenetre Navigateur, action 384
Ouvrir la page liée, commande 500
Ouvrir le modele attaché,commande 489
Ouvrir,commande 116
<h1 id="p">P</h1>
Page d'accueil, définition 87
Page, propriétés
titres, modification 117
Pages
apercu dans les navigateurs 496
associées 658
connexion 687
couleur 117
couleurs du texte par défaut 119
Design Notes, utilisation 101
enregistrement desutilisateurs 683
image d'arriere-plan 117
informationsdetalles 653
maquettes 60
mise à jour 665
modification du titre 117
recherche 648
redimensionnement en fonction du moniteur 38
restrictions d'accès aux 689
résultats 649
supprimer 670
taille 500
temps de teléchargement estimé 500
Pages d'informations détaillées
creation d'un lien vers 654
Pages de connexion 687
Pages JavaServer
JavaBeans548
variables JSP 547
Pages JavaServer (JSP)
jeuderesultats,definition516
Panneau Site
exploration de fichiers 82
recherche de texte et/ou de code HTML dans des documents 308
Panneau Site, Voir Site, panneau 72
Panneau Styles CSS 299
Panneaux
Actifs, panneau, categorie Modèle 454
ancrage 46
barreduLanceur40
définition des préférences de flotttement 48
ouverture et fermetre avec la barre du Lanceur 40
panneau Actifs 453
panneau Comportements 370
panneau Historique 49
réponses 50
Panneaux, couleurs 118
Paragraphe 285
saut deligne 285
Paragraphes
formatage 288
Parameter, balise (ASP.NET) 727
Parameters, balise (ASP.NET) 727
Parametres (modles) 466
Paramètres de connexion 171
Parametres de modele 466
Paramètres Live Data, boîte de dialogue 511
Paramètres, boîte de dialogue 559
Personnalisation
barreduLanceur48
Personnalisation de Dreamweaver
notions de base 51
Personnel, dictionnaire 308
Photographies 311
PHP 138
connexionsaunebasede données 177
Mac OS X 134
Pilote JDBC-ODBC Bridge de Sun 173
Pilote Oracle Thin 171
Pilotes de base de données
affichage des pilotes installés 705
Pipette 118
Pixels, transparents dans l'arriere-plan 117
Placement de fichiers sur un site distant 95
Placer, commande 95
Planification 57
actifs 61
cadres 269
Planification de la navigation pour un site 61
Planification du site 57
Plate-forme.NET 136
Plug-ins
dépannage 349
lecture dans la fenetre de document 349
rendredynamiques 559
verification 377
PNG, images
comme tracédimage 122
utilisations 311
Points d'arrêt dans le débogueur JavaScript 220
Polices
encodages, paramétrage des polices pour 52
modification des caractéristiques 286
modification des combinaisons 287
Polices, caractéristiques
modification 286
Polices/preférences de codage 52
Positionnement
bloccs de code 605
Precharger les images, action 387
Preférences
Aperçu en ligne à partir du serveur local (liens relatifs à la racine) 428
barredetat40
barre Insertion 45
calques 404
Coloration du code 186
correction du code 185
dictionnaire pour vérifier l'orthographe 308
editeurs externes 339
format du code 183
générales 51
indicateurs de code 185
Lancer et Modifier 323
mise à jour des liens 436
modeMise en forme 266
panneaux 48
panneaux flottants 48
polices/codage 52
présentation 51
site 75
types de fichiers / Editeurs 339
types/éditeurs de fichiers 339
validation 187
Preférences du site 75
Preférences générales 51
Prefixede l'URL 141
Présentation de Dreamweaver 15
Principale/Details, pages 653
Prise en main presentation 16
Procedure stockée (ColdFusion), option 673
Procedures stockées creation d'un objet de procedure stockée 673 modification de bases de données 673
Programme de validation 213
Proportion, conservation 316
Propriétés affichage 45
cadre 277
calque 408
cellule de Mise en forme 262
changement avec les comportements 376
colonne, ligne et cellule 242
document, definition 116
jeudecadres 277
plusieurs calques 409
tableau 242
Propriétés du modele, boîte de dialogue 483
Public 58
Public visé 58
<h1 id="q">Q</h1>
Quick Tag Editor 226
QuickTime, animations en tant qu'actifs. Voir actifs 448 insertion 348, 349
<h1 id="r">R</h1>
Raccourcis clavier modification 52
Rapports 105 déroulement du travail 106 Extrait par 106
Rapports, commande 501
Recherche aide 16 balises et attributs 205
enregistrement de modèles de recherche 207
expressionsregulieres 208
fichiers308
recherche et remplacement 308
textedansdesfichiers308
textedanssourceHTML205
Recherche d'un enregistrement spécifique 656
Recherche de pages 648
Recherche de texte entre des balises spécifiques 206
Recherche et remplacement. Voir recherche 308
Rechercher dans, options 309
Rechercher, options 309
Réduction de blocs de code 596
Redimensionnement cellules de tableau 244
cellules et tableaux de Mise en formes 260
poignées 316
Redimensionnement d'une image 315
Redimensionnement de calques 406
Référence, panneau 210
Région facultative (modèles) 466, 478
Région repétée
ajout d'une entrée 484
modification d'une région 484
suppression d'une entree 484
Région repétée (modèles) 466, 473
couleurs secondaires 476
creatio 474
Région répetée, comportement 568
Régions masquage 567
Régions modifiables
creation 472
suppression 473
Régions modifiables (modles) 465
Régions verrouillées
clic dans 469
Regles 122
Regles horizontales, insertion et modification 292
Relatifssa larcine,chemins Apercu en ligne a partir du serveur local 428 definition 430
preférence 428
Relatifssau document,chemins definition 430
Relatifsexauxdocuments,chemins àpropos426
Remplacement d'un espace réservé pour une image 314
Renommer le groupe de panneaux, commande 47
Renvoi 285
Répertoire de base 141
Répertoire distant 64, 140
dépannage 66
Répertoire local 139
Répertoire virtuel 141
Répétition des étapes 124
Réponses, panneau 50
Reroutage, menus
ajout d'elements de menu 440
Aller,ajout automatique deboutons 439
boutons Aller 384
creation d'un message de selection 439
modification 383
modification des commandes 440
Respecter la casse, option 310
Ressources
pour des informations sur les technologies Web 29
Restaurer l'image interverte, action 398
Restriction des accès au site 683
Restriction des tables 513
Résultats, pages de
accès à une page d'informations détaillées 654
utilisation d'un jeu d'enregistrements avancé 651
utilisation d'un jeu d'enregistrements simple 649
Rétablir la position, commande 122
Rétabir origine, commande 122
Réutilisation
elements de bibliothèque 460
recherches 207
Roue chromatique (couleur système), bouton 118
Roundtrip HTML 198
Scenarios
ajout d'objects 415
ajout et suppression de cadres 417
bouclage 417
changement de nom 420
changer le fichier source des images 418
chemins complexes 416
conseils pour l'animation 420
contrôle avec des comportements 421
creation 415
images-clés 415
lecture automatique 417
lecture et arrêt avec des comportements 399
modification 417
modification des propriétés des calques 418
plusieurs 418
rattachement à un comportement 373
tete de lecture 414
Scenarios, panneau 414
Schemas 513
Scripts
accoladeséquilibrées212
affichage des fonctions 204
en tant qu'actifs. Voir actifs 448
modification de scripts externes 229
saisie 229
Scripts, liens
creation 435
modification 438
Secure Shell 66
Sécurité 683
Selecteurdebalises36,202,229
Sélecteur de couleur
Dreamweaver 118
Selecteur de couleur système 118
Selection
cadres et yeux de cadres 273
calques 406
cellules et tableaux de Mise en forme 260
objets dans la fenetre de document 120
Selectionner distants plus récents, commande 96
Serveur d'application
choix 136
configuration 135
Serveur d'évaluation 140
configuration 135
Serveur HTTP 135
Serveur Web
configuration 135
Serveur, comportements
masquage de régions 567
Serveur, objects
objects d'application 544
objects session 543
variables ColdFusion 546
Serveurs
définition de sites distants 64
dépannage de configuration 66
options d'acces 65
Serveurs d'application
erreurs de dépannage 142
Services d'hebergement Web 164
Services Web
a propos 585
ajoutaune page 592
droulement du travail 587
générateur de proxy AXIS 588
générateurs de proxy, autres 588
générateurs de proxy, configuration 589
générateurs de proxy, installation 588
liste des sites UDDI, modification 593
répertoires UDDI 586
SOAP 587
Session, variables 543
Shockwave, animations
en tant qu'actifs. Voir actifs 448
insertion 346
presentation 346
verification 378
Site Dreamweaver 138
Site, fenetre
recherche de texte 308
Site,iste
actualisation 450
Site, panneau 36, 72
acquerir, commande 93
affichage de la carte du site 73
affichage des fichiers du site 73
affichage des sites 78
carte graphique du site 83
colonnes 76
modification de l'affichage 78
options de la barre d'outils 73
Placer, commande 95
recherche de fichiers 81
Sites
ajout de fichiers et de dossiers 80
apercu dans les navigateurs 496
archivage et extraction des fichiers 91
cache 436
compatibilité avec les navigateurs 58, 494
conception et planification 57
correction des liens brises 499
définition pour un site dynamique 138
Design Notes, utilisation 101
distants 64
distants, depannage de configuration 66
distants, options d'acces 65
distants,recherche de fichiers 81
documents de reference 29
étendus, actifs dans 457
fichier cache 437
importation et exportation 89
liens 425
locaux et distants 62
locaux, creation, configuration 62
modification 68
modification de l'affichage 78
modification des liens au niveau du site 438
obtention de rapportes 501
planification de la navigation 61
planification de la structure 59
raptorts,execution 106
recherche de fichiers 81, 308
recherche de fichiers dans 308
sécurité 683
sLECTION de fichiers mis a jour 80
structure et navigation 71
suppression de la liste des sites 89
test 493
verification des liens 497
voilage de fichiers 97
Sites locaux
Voir sites 62
Sitespring 107
SOAP et services Web 587
Son 346-348
ajoutaune page 346
lecture 386
Souligne 286
Sources de données
a propos 535
envoyeesparlesutilisateurs524
JavaBeans548
jeux d'enregistrements, à propos 536
jeux d'enregistrements, creation (simple) 537
mise en mémoire cache 550
modification ou suppression 550
paramètres d'URL, à propos 526
paramétres de formulaire, à propos 525
suppression 550
variables ColdFusion 546
variables d'application 544
variables de session, à propos 528
variables JSP 547
variables session 543
SQL 709
arborescence d'elements de base de données 540
ASP.NET 539
colonnes, definition 710
DELETE 709
filtragedesenregistrements711，714
FROM 710
GROUP BY 710
INSERT 709
instruction SELECT 709
jeu d'enregistements, définition avec SQL 538
limite des enregistements 711
opérateurs 710
ORDER BY 710
relations entre tableaux 714
UPDATE 709
WHERE 710
SSH 66
Standard, mode dans l'inspecteur de propriétés 558
Structure du repertoire, site. Voir Sites 71
Style,sous-menu 286
Styles 298
application de styles personalisés 302
conflictuels 306
conflicts 306
conversion en HTML 307
HTML 292
tableau de conversion des balises CSS en balises HTML 307
Voir aussi feuilles de style 298
Styles CSS
application de styles personalisés ( classe) 302
attributes, conversion en HTML 307
navigateurs et 307
Styles CSS, panneau 299
Styles en cascade
Voiraussi feuilles de style 298
Styles personalisés. Voir feuilles de style 298
Suppression
contenu dynamique 521, 560
jeu d'enregistrements 550
lignes et colonnes 246
source de données 550
Suppression de cadres d'un scenario 417
Suppression de lignes et de colonnes 246
Supprimer l'enregistrement, comportement 672
Supprimer la page, creation 670
Supprimer le scenario, commande 418
Supprimer le style de la selection, option 294
Supprimer le style du paragraphe, option 294
Supprimer une image, commande 415
Survolées, images 316
creation 317
creation d'un lien 317
Synchronisation des sites locaux et distants 96
Systèmes d'exploitation, multiutilisateurs 56
Systèmes multiutilisateurs 56
<h1 id="t">T</h1>
Tableau repété (modèles) 475
Tableaux 631
ajout de contenu 238
ajout et suppression de lignes et de colonnes 246
ajustement des lignes et des colonnes 244
cellules, fractionnement 248
colonnes, lignes et cellules 242
conceptions pré définies 243
conversion à partir de calques 411
creation 238
exportation de données 251
formatage 241
fusion de cellules 248
imbrication 249
importation 239
importation de données tabulées 284
modification de la largeur des colonnes 245
presentation 237
propriétés 242
redimensionnement 244
selection d'elements 239
suppression de la largeur et de la hauteur des cellules 245
tri 251
Voiraussi colonnes, lignes et cellules 249
Tableaux de Mise en forme
imbriques 257
préférences 266
Supprimer toutes les images d'espacement, option 262
Tables
restriction 513
Taille du moniteur, redimensionnement des pages en fonction de 38
Tailles des fenêtres, option 40
Téléchargement
taille, durée estimée 500
Téléchargement de comportements 374
Téléchargement de fichiers 93, 95
Télécharger d'autres comportements, commande 374
Temps de teléchargement 38
Test d'accessibilité 364
Test de comportements de serveur 609
Tete de lecture 414
Texte
ajout a un document 284
alignment 289
couleur par défaut dans les pages 119
éditeurs externes. Voir externes, Editeurs 193
espace insécable 285
formatage 283, 286
formatage avec les styles HTML 292
importation d'autres documents 284
insertion 283
mise en retrait 289
mise en retrait négatif 289
modification de la couleur 289, 451
modification des combinaisons de polices 287
recherche dans les documents 308
Texted'uncadre,action 388
Texted'uncalque,action 389
Texted'un champtexte,action 390
Texte de la barre d'etat, action 390
Texte Flash, boite de dialogue 343
Texte Flash, objects insertion 343
Texte, fichiers ouverture 116
Texte, rendre dynamique 554
Titres modification 117
Tons continus, palette de couleurs 118
Traces d'image 122
Traitements de texte, fichiers créés par 116
Transfert de fichiers, dépannage 95
Transparents, pixels dans l'arriere-plan 117
Types de fichier
fichiers Flash 340
Types de fichiers / Editeurs, préférences 194
Types de fichiers pris en charge 198
Types/éditeurs de fichiers, préférences 339
<h1 id="u">U</h1>
UDDI
liste des sites, modification 593
répertoirespublics586
UltraDev 4 133
Update, balise personalisée (ASP.NET) 725
URL
application à une seLECTION 452, 453
creation d'actifs, URL 457
en tant qu'actifs. Voir actifs 448
URL.Voirchemins 426
Usemap,attribut 445
Utilisation d'un éditeur d'image externe 317
Utilisation de feuilles de style à la conception 305
Utilisation de styles HTML dans d'autres sites 297
Utilisation des rapportes pour tester un site 501
Utilisation du panneau Styles CSS 299
Utiliser les expressions régulières, option 310
<h1 id="v">V</h1>
Validation
préférences 187
Validation des balises,execution 213
Validator le formulaire, action 399
Variable,iste 222
Variables de session
à propos 528
données, récapération 533
données, stockage 531
et paramètres d'URL 530
et paramètres de formulaire 531
VBScript 229
Vérificateur de lien, boîte de dialogue 499
Verificaton des liens 497
Vérification orthographique 308
Vérifier l'orthogphe, commande 308
Vérifier le navigateur, action 376
Vérifier le Plug-in, action 377
Vérifier pour les navigateurs cibles, commande 494
Vérifier tous les liens du site, commande 498
Verrouillées, régions
clic dans 469
Visualisation
éléments invisibles 121
Vitesse de connexion, option 40
Voilage 97
<h1 id="w">W</h1>
Web.xml 192
Windows OS, palette de couleurs 118
<h1 id="x">X</h1>
XHTML, creation de pages compatibles 213
XML 214, 490
dans les modeles 490
notation des balises lors de l'exportation 491
presentation 490
<h1 id="z">Z</h1>
Zones reactives
application de comportement 318
dans les cartes graphiques 445
redimensionnement 446
sèlection de plusieurs zones réactives dans une image graphique 445
