Dreamweaver Reference

ADOBE DREAMWEAVER
Aide et didacticiels
Il est possible que le contenu associ cette page saffiche uniquement en anglais.
Juin 2013
Nouveauts
Une partie du contenu issu des liens prsents sur cette page peut apparatre en anglais seulement.
Nouveauts de Dreamweaver CC
Ce document contient la liste des nouvelles fonctionnalits de Dreamweaver depuis la mise jour Dreamweaver 12.2. Pour plus d'informations sur les nouveauts des mises jour Creative Cloud antrieures de Dreamweaver, voir Nouveauts de Dreamweaver 12.1 | Creative Cloud et Nouveauts de Dreamweaver 12.2 | Creative Cloud.
Prsentation des nouvelles fonctionnalits CSS Designer Synchronisation des paramtres de Dreamweaver avec Creative Cloud Prise en charge des plates-formes modernes Interface utilisateur simplifie
Prsentation des nouvelles fonctionnalits

Paul Trani, Senior Product Evangelist, Creative Cloud, prsente les nouvelles fonctionnalits d'Adobe Dreamweaver CC.
Haut de la page
CSS Designer
En haut
Outil d'dition visuelle trs intuitif qui vous permet de gnrer du code Web conforme aux normes en vigueur. Avec cet outil, vous pouvez visualiser et modifier rapidement les styles qui sont utiles dans un contexte (ou un lment de page) particulier. Application de proprits comme les dgrads et les ombrages en un ou deux clics. Panneau Styles CSS (versions antrieures Dreamweaver CC)
CSS Designer (Dreamweaver CC et versions ultrieures)
Rubriques connexes
Panneau CSS Designer Application de dgrads l'arrire-plan
Synchronisation des paramtres de Dreamweaver avec Creative Cloud
En haut
Enregistrez vos fichiers, les paramtres de l'application et les dfinitions de sites sur Creative Cloud. Connectez-vous Creative Cloud et accdez ces fichiers et paramtres partir de n'importe quelle machine, quand vous en avez besoin. Vous pouvez configurer Dreamweaver de faon synchroniser automatiquement les paramtres avec le cloud. Vous pouvez aussi effectuer une synchronisation la demande, ds que ncessaire, en utilisant la notification contextuelle (cliquez sur dans la barre d'outils Document) ou la bote de dialogue Prfrences > Synchroniser les paramtres. Prfrences - Synchroniser les paramtres
Notification contextuelle
Rubriques connexes
Synchronisation des paramtres de Dreamweaver avec Creative Cloud
Prise en charge des plates-formes modernes

Crez des projets l'aide HTML5/CSS3, jQuery et de cadres mobiles jQuery. Dveloppez des pages dynamiques en PHP.
En haut
Widgets jQuery
Manipulez, par glisser-dposer, les accordons, boutons, onglets et bien d'autres widgets jQuery dans vos documents. Rendez vos sites Web plus intressants et attrayants avec les effets jQuery (Fentres > Comportements > Effets). Widgets jQuery
Effets jQuery
Rubriques connexes
Utilisation de widgets jQuery Utilisation d'effets jQuery
Interface utilisateur simplifie
En haut
L'interface utilisateur Dreamweaver CC a t modernise et comporte moins de botes de dialogue. Cette interface amliore vous permet de dvelopper des sites plus efficacement grce aux menus contextuels intuitifs. Pour plus d'informations sur ce qui a chang dans l'interface utilisateur, consultez cet article.
Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne
Nouveauts de Dreamweaver 12.2 | Creative Cloud

Ces fonctionnalits ne sont disponibles que pour les membres de Creative Cloud et les abonns de produits ponctuels. Pour vous inscrire Adobe Creative Cloud, voir Adobe Creative Cloud.
Intgration des polices Web Edge Amliorations de la mise en forme de grille fluide Nouveaux types d'entres de formulaire HTML5 Nouveaux lments de formulaire pour jQuery Mobile Aperu et inspection de pages Web dans plusieurs priphriques Amliorations du flux d'activits d'Edge Animate Mises jour du flux PhoneGap Autres modifications et amliorations Les extensions, les favoris du panneau Insertion et les raccourcis clavier sont conservs aprs la mise niveau de la version 12.0 vers la version 12.1. Si votre extension se trouvait sous un menu Insertion devenu obsolte, vous pouvez trouver vos extensions sous Insertion > Extensions manquantes . Si vos extensions avaient install des points d'accs (lments) vers le panneau Insertion sous une liste qui a t supprime, vous pouvez localiser les points d'accs sous la catgorie Divers . Par exemple, la liste des mdias sous Catgorie commune dans le panneau Insertion a t supprime. Elle se trouve dsormais sous le panneau Insertion sous forme de catgorie appele Mdias. Tous les lments que vos extensions ont prcdemment placs sous Mdias se trouvent dsormais sous la catgorie Divers.
Intgration des polices Web Edge
En haut
Vous pouvez ajouter des polices Adobe Edge et des polices Web la liste des polices dans Dreamweaver. Dans la liste des polices, les piles de polices prises en charge par Dreamweaver sont rpertories en premier, suivies des polices Web et des polices Edge. Pour plus d'informations, voir Ajout de polices systme et de polices Edge au menu Police.
Amliorations de la mise en forme de grille fluide
En haut
Tous les lments de grille fluide ont t dplacs sous la catgorie Structure du menu Insertion. De nouvelles options telles que Liste numrote (OL), Liste non ordonne (UL) et Elment de liste (LI) ont t introduites. Lorsque vous crez une page de grille fluide ou ouvrez une page avec un modle de grille fluide, le panneau Insertion s'affiche en mode Structure par dfaut. En outre, les options de l'interface utilisateur des lments Div, telles que le masquage, la duplication, le verrouillage et la permutation sont maintenant affiches lorsque vous slectionnez un lment. Vous pouvez dsormais imbriquer les lments fluides et spcifier une classe ou un ID comme slecteur de fluide lors de l'insertion d'un lment. Pour une explication dtaille de ces amliorations, regardez la vido ici. Pour plus d'informations sur les mises en forme de grille fluide, voir Mises en forme de grille fluide.
Nouveaux types d'entres de formulaire HTML5
En haut
Les types d'entres de formulaire HTML5 suivants sont dsormais disponibles dans Dreamweaver. Pour plus d'informations sur ces lments, voir Types d'entres HTML5. Couleur Date Date et heure Date et heure locales Mois Nombre Plage Heure Semaine
Nouveaux lments de formulaire pour jQuery Mobile
En haut
Les lments jQuery suivants sont dsormais disponibles dans Dreamweaver. La fonctionnalit de ces lments est similaire la fonctionnalit des lments correspondants dans les types d'entres de formulaire HTML5. Pour plus d'informations, voir http://jquerymobile.com/test/docs/forms/textinputs/ Date Date et heure Adresse lectronique Mois Nombre Rechercher Heure URL Semaine
Aperu et inspection de pages Web dans plusieurs priphriques
En haut
Edge Inspect permet de prvisualiser et d'inspecter vos pages Web dans Dreamweaver sur plusieurs priphriques mobiles simultanment. Pour plus d'informations, voir Aperu de pages Web sur plusieurs priphriques.
Amliorations du flux d'activits d'Edge Animate
En haut
En mode Cration, un menu contextuel a t ajout dans les fichiers OAM d'espace rserv. Les options disponibles dans ce menu sont les suivantes : Navigateur de code, Envelopper avec balise, Supprimer la balise, Couper, Copier et Coller. Vous pouvez dsormais insrer des fichiers OAM dont le nom contient des caractres double octet.
Mises jour du flux PhoneGap
En haut
Les modifications apportes Dreamweaver sont destines assurer la compatibilit avec les modifications de PhoneGap. Cette fonctionnalit est galement disponible dans le cadre de la mise jour 12.0.3. Pour les systmes d'exploitation que vous visez, vous tes ensuite invit entrer la cl et mot de passe appropris. Les informations de cl de signature sont requises uniquement pour Android, iOS et BlackBerry. Si vous ne parvenez pas crer plus d'une application, il est possible que vous ne soyez pas abonn au service PhoneGap. Pour plus d'informations, voir Assemblage d'applications Web sous la forme d'applications mobiles natives avec PhoneGap Build.
Autres modifications et amliorations

HTML5 est le type de document par dfaut pour tous les nouveaux documents. Les paramtres par dfaut de la bote de dialogue Synchronisation FTP ont chang. Pour l'option Synchroniser, le paramtre par dfaut est Site entier. Pour l'option Direction, le paramtre par dfaut est Placer et obtenir les fichiers plus rcents.
En haut
Le mode Tableau dvelopp a t rtabli. Cette option n'est toutefois plus prsente dans le panneau Mise en forme. Pour utiliser cette option, insrez un tableau dans Dreamweaver, cliquez avec le bouton droit de la souris sur le tableau, puis choisissez Mode Tableau dvelopp.
Nouveauts de Dreamweaver 12.1 | Creative Cloud

Ces fonctionnalits ne sont disponible que pour les membres de Creative cloud et les abonns de produits ponctuels. Pour vous inscrire Adobe Creative Cloud, voir Adobe Creative Cloud.
Mise jour Dreamweaver CS6 pour les membres de Creative Cloud (nouvelles fonctionnalits) Insertion de vido HTML5 Insertion d'lments smantiques HTML5 depuis le panneau Insertion Importation de compositions Adobe Edge Animate Prise en charge de la zone de travail HTML5 Amliorations de la prise en charge des lments de formulaire dans HTML5 Recherche en direct (Mac OS) Amliorations de FTP Amliorations de la gestion des polices Menu Insertion rorganis
Insertion de vido et d'audio HTML5
En haut
Vous pouvez insrer de la vido et de l'audio HTML5 dans des pages Web l'aide de Dreamweaver. Les lments vido et audio dans HTML5 spcifient une mthode standard d'incorporation et d'affichage de la vido et l'audio sur une page Web. Pour plus de dtails sur l'insertion de vido HTML5, voir Insertion de vido HTML5. Pour plus de dtails sur l'insertion d'audio HTML5, voir Insertion d'audio HTML5.
Insertion d'lments smantiques HTML5 depuis le panneau Insertion
En haut
Slectionnez Mise en forme dans le panneau Insertion (Fentre > Insertion) pour obtenir la liste des lments smantiques que vous pouvez insrer dans votre mise en page HTML5. Pour modifier les proprits des lments smantiques insrs, slectionnez un lment, puis modifiez ses proprits dans le panneau Proprits. Vous pouvez galement utiliser le menu Insertion (Insertion > Mise en forme) pour insrer des balises smantiques. Les sept nouvelles balises de smantique pour cette version sont Article, Aside, HGroup, Navigation, Section, Header et Footer. Vous trouverez un didacticiel sur l'utilisation de balises smantiques pour la mise en page dans l'article du blogue (en anglais) de Jennifer Marsman intitul Semantic Markup and Page Layout. Le didacticiel (en anglais) HTML5 Semantics in Dreamweaver CS5.5 explique l'utilit des lments smantiques HTML5 dans Dreamweaver CS 5.5.
Importation de compositions Adobe Edge Animate
En haut
Vous pouvez importer des compositions Adobe Edge Animate (fichiers OAM) dans Dreamweaver. La composition est place l'emplacement du curseur. Par dfaut, Dreamweaver place le contenu extrait du fichier OAM dans un dossier nomm edgeanimate_assets. Vous pouvez modifier l'emplacement par dfaut dans la bote de dialogue Configuration du site. Pour plus d'informations, voir Importation de compositions Edge Animate.
Prise en charge de la zone de travail HTML5
En haut
L'lment Zone de travail dans HTML5 est un conteneur destin aux graphiques gnrs dynamiquement. Ces graphiques sont crs en cours d'excution l'aide d'un langage de script tel que JavaScript. Pour plus d'informations, consultez l'article HTML5 Canvas (en anglais). L'lment Zone de travail possde les attributs ID, hauteur et poids. Pour localiser l'lment Zone de travail, slectionnez Insertion > Zone de travail. Vous pouvez aussi ouvrir le panneau Insertion (Fentre > Insertion), puis slectionner Commun dans le menu. Pour modifier les proprits de l'lment Zone de travail, slectionnez l'lment et modifiez ses proprits dans le panneau Proprits.
Amliorations de la prise en charge des lments de formulaire dans HTML5
En haut
Dans le cadre de la prise en charge de HTML5, de nouveaux attributs ont t ajouts au panneau Proprits pour lments de formulaire. En outre, quatre nouveaux lments de formulaire (E-mail, recherche, tlphone, URL ) ont t introduits dans la section Formulaires du panneau Insertion. Pour plus d'informations, voir Prise en charge amliore de HTML5 pour les objets de formulaire.
Recherche en direct (Mac OS)
En haut
La fonction de recherche en direct permet de localiser des fichiers en fonction de leur nom ou de texte qu'ils contiennent. Le site slectionn dans le panneau Fichiers est utilis pour la recherche. La recherche en direct utilise l'API Spotlight dans Mac OS. Toute personnalisation que vous appliquez aux prfrences de Spotlight est galement utilise pour la recherche en direct. Spotlight affiche tous les fichiers de votre ordinateur qui correspondent votre requte de recherche. La fonction de recherche en direct cherche les fichiers dans le dossier racine du site slectionn dans le panneau Fichiers. Pour plus d'informations, voir Recherche de fichiers sur la base de leur nom ou de leur contenu.
Amliorations de FTP
En haut
Tlcharger automatiquement les fichiers vers le serveur lors de l'enregistrement Cette option permet de tlcharger les fichiers sur le serveur, mme si un processus d'envoi ou de tlchargement parallle est en cours d'excution pendant l'opration d'enregistrement. Certains problmes avec cette fonctionnalit dans la version prcdente ont t corrigs afin de la rendre transparente. Continuer travailler dans Dreamweaver pendant le tlchargement du site Business Catalyst La slection de l'option Tlcharger automatiquement les fichiers vers le serveur lors de l'enregistrement n'interrompt pas votre travail dans Dreamweaver pendant le tlchargement du site Business Catalyst. Amliorations apportes la bote de dialogue Mot de passe ID Adobe L'ID Adobe que vous avez slectionn lors de l'installation est affich dans cette bote de dialogue. Des options vous permettent d'enregistrer votre mot de passe et de rcuprer des mots de passe oublis.
Amliorations apportes la gestion des polices
En haut
La liste des polices dans le menu Police a t classe sur la base des polices systme et des polices Web. Les polices systme sont rpertoris en premier dans le menu. La bote de dialogue Gestionnaire des polices Web (Modifier > Polices Web) a t renomme Valise de polices Web . Vous pouvez utiliser la Valise de polices Web pour ajouter des polices Web la liste des polices. Le bouton Ajouter des polices a t renomm Ajouter une police locale. Des icnes distinctes permettent de distinguer aisment les polices systme et les polices Web.
Bote de dialogue Valise de polices Web
Icnes distinctes pour les polices systme et les polices Web
Menu Insertion rorganis
En haut
Les options du panneau Insertion et du menu Insertion ont t rorganises. Pour plus d'informations, voir Modifications des options d'insertion | Creative Cloud.
Panneau CSS Designer

Dans Dreamweaver CC et les versions ultrieures, le panneau Styles CSS a t remplac par CSS Designer.
Cration et jonction de feuilles de style Dfinition de requtes multimdias Dfinition de slecteurs Dfinition de proprits CSS Designer (Fentres > CSS Designer) est un panneau intgr qui vous permet de crer visuellement des fichiers CSS, des rgles et de dfinir des proprits, ainsi que des requtes multimdias.
Panneau CSS Designer Le panneau CSS Designer comprend les volets suivants : Sources Rpertorie toutes les feuilles de style associes au document. Ce volet permet de crer et joindre un style CSS au document, ou dfinir des styles dans le document. @Requtes multimdias Rpertorie toutes les requtes multimdias dans la source slectionne dans le volet Sources. Si vous ne slectionnez pas un style CSS spcifique, ce volet affiche toutes les requtes multimdias associes au document. Slecteurs Rpertorie tous les slecteurs dans la source slectionne dans le volet Sources. Si vous slectionnez galement une requte multimdia, ce volet affine la liste des slecteurs pour cette requte multimdia. Si vous n'avez slectionn aucun style CSS ou requte multimdia, ce volet affiche tous les slecteurs dans le document. Lorsque vous slectionnez global dans le volet @Requtes multimdias, tous les slecteurs qui ne sont pas inclus dans une requte multimdia de la source slectionne sont affichs. Proprits Affiche les proprits que vous pouvez dfinir pour le slecteur spcifi. Pour plus d'informations, voir Dfinition des proprits. CSS Designer fonctionne de faon contextuelle. Autrement dit, pour un contexte prcis ou selon l'lment de page slectionn, vous pouvez afficher les slecteurs et proprits associes. En outre, lorsque vous slectionnez un slecteur dans Designer CSS, la source et les requtes multimdias associes sont mises en surbrillance dans leurs volets respectifs.
10
CSS Designer montrant les proprits de l'image slectionne dans l'affichage en direct
CSS Designer montrant les proprits de l'en-tte slectionn dans l'affichage en direct Remarque : Lorsque vous slectionnez un lment de page, la valeur Calcul est slectionne dans le volet Slecteurs. Cliquez sur un slecteur afin d'afficher la source, la requte multimdia ou les proprits associes. Pour afficher tous les slecteurs, vous pouvez choisir Toutes les sources dans le volet Sources. Pour afficher les slecteurs qui n'appartiennent pas une requte multimdia dans la source slectionne, cliquez sur Global dans le volet @Requtes multimdias.
Cration et ajout de feuilles de style

1. Dans le volet Sources du panneau CSS Designer, cliquez sur , puis sur l'une des options suivantes :
En haut
Crer un nouveau fichier CSS : Pour crer un nouveau fichier CSS et le joindre au document Joindre un fichier CSS existant : Pour joindre un fichier CSS existant au document Dfinir dans la page : Pour dfinir un style CSS dans le document Selon l'option que vous slectionnez, la bote de dialogue Crer un nouveau fichier CSS ou Joindre un fichier CSS existant s'affiche. 2. Cliquez sur Parcourir pour spcifier le nom du fichier CSS et, si vous tes en train de crer un style CSS, l'emplacement dans lequel enregistrer le nouveau fichier. 3. Effectuez l'une des oprations suivantes : Cliquez sur Lier pour lier le document Dreamweaver au fichier CSS Cliquez sur Importer pour importer le fichier CSS dans le document. 4. (Facultatif) Cliquez sur Utilisation conditionnelle et spcifiez la requte multimdia que vous souhaitez associer avec le fichier CSS.
Dfinition de requtes multimdias

1. Dans le panneau CSS Designer, cliquez sur une source CSS dans le volet Sources.
11
En haut
2. Cliquez sur
dans le volet @Requtes multimdias pour ajouter une nouvelle requte multimdia.
La bote de dialogue Dfinition d'une requte multimdia s'affiche et rpertorie toutes les conditions de requte multimdia prises en charge par Dreamweaver. 3. Slectionnez les conditions appropries. Pour plus d'informations sur les requtes multimdias, consultez cet article. Veillez bien spcifier des valeurs valides pour toutes les conditions que vous slectionnez, faute de quoi les requtes multimdias correspondantes ne pourront pas tre cres. Remarque : Seule l'opration Et est actuellement prise en charge pour des conditions multiples. Si vous ajoutez des conditions de requte multimdia l'aide de code, seules les conditions prises en charge sont renseignes dans la bote de dialogue Dfinition d'une requte multimdia. Toutefois, la zone de texte Code dans la bote de dialogue affiche entirement le code (y compris les conditions non prises en charge). Si vous cliquez sur une requte multimdia dans le mode Cration/En direct, la fentre d'affichage permute en fonction de la requte multimdia slectionne. Pour afficher la fentre d'affichage en taille normale, cliquez sur Global dans le volet @Requtes multimdias.
Dfinition de slecteurs
1. Dans le CSS Designer, slectionnez une source CSS dans le volet Sources ou une requte multimdia dans le volet @Requtes multimdias.
En haut
2. Dans le volet Slecteurs, cliquez sur . En fonction de l'lment slectionn dans le document, CSS Designer identifie de faon intelligente le slecteur pertinent et le suggre. Par dfaut, le slecteur est Plus spcifique. Vous pouvez modifier le slecteur afin de le rendre Moins spcifique. Contrairement au panneau Styles CSS, vous ne pouvez pas slectionner directement un type de slecteur dans CSS Designer. Vous devez saisir le nom du slecteur, ainsi que la dsignation du type de slecteur. Par exemple, si vous indiquez un ID, placez un # devant le nom du slecteur.
Pour rechercher un slecteur prcis, utilisez la zone de recherche situe dans la partie suprieure du volet. Pour renommer un slecteur, cliquez sur celui-ci, puis tapez le nom dsir. Pour rorganiser les slecteurs, faites glisser les slecteurs l'emplacement dsir. Pour dplacer un slecteur d'une source vers une autre, faites glisser le slecteur vers la source dsire dans le volet Source. Pour dupliquer un slecteur dans la source slectionne, faites un clic droit sur le slecteur, puis cliquez sur Dupliquer. Pour dupliquer un slecteur et l'ajouter dans une requte multimdia, faites un clic droit sur le slecteur, placez le pointeur de la souris audessus de Dupliquer en requte multimdia, puis choisissez la requte multimdia. Remarque : L'option Dupliquer en requte multimdia n'est disponible que lorsque la source du slecteur slectionn contient des requtes multimdias. Vous ne pouvez pas dupliquer un slecteur provenant d'une source dans une requte multimdia d'une autre source.
Dfinition des proprits

Les proprits sont regroupes dans les catgories suivantes et sont reprsentes par diffrentes icnes en haut du volet Proprits : Mise en forme Text Bordure Arrire-plan Autres (liste des proprits 'Texte seul' et pas des proprits ayant des contrles visuels)
En haut
Activez la case cocher Afficher dfinies pour afficher uniquement les proprits dfinies. Pour afficher toutes les proprits que vous pouvez spcifier pour un slecteur, dsactivez la case cocher Afficher dfinies.
12
Toutes les proprits
Proprits dfinies uniquement
Pour dfinir une proprit, comme width ou border-collapse , cliquez sur les options requises ct de la proprit dans le volet Proprits. Pour plus d'informations sur la dfinition d'un dgrad pour l'arrire-plan ou de contrles de case comme les marges extrieures et intrieures et la position, consultez les liens ci-dessous :
Dfinition des marges extrieures et intrieures et de la position Application de dgrads l'arrire-plan
Les proprits remplaces sont barres.
Format barr pour les proprits remplaces
Dfinition des marges extrieures et intrieures et de la position

Le volet Proprits de CSS Designer vous permet de dfinir rapidement les marges extrieures et intrieures et les proprits de position l'aide des contrles de case.
proprit 'marge'
13
proprit 'marge intrieure'
proprit 'position'
Cliquez sur les valeurs et tapez la valeur dsire. Si vous souhaitez que les quatre valeurs soient identiques et qu'elles changent simultanment, cliquez sur l'icne de liaison ( ) au centre. tout moment, vous pouvez dsactiver ( ) ou supprimer ( ) des valeurs spcifiques, par exemple, la valeur de la gauche marge, tout en conservant les valeurs des marges droite, suprieure et infrieure.
Icnes de dsactivation, suppression et liaison pour les marges
Dsactivation ou suppression de proprits

Le panneau CSS Designer vous permet de dsactiver ou supprimer chaque proprit. La capture d'cran suivante prsente les icnes de dsactivation ( ) et de suppression ( ) pour la proprit width (largeur). Ces icnes sont visibles lorsque vous laissez le pointeur de la souris au-dessus d'une proprit.
Dsactiver/supprimer la proprit
14
Aperu et inspection de pages Web sur plusieurs priphriques

Cette fonctionnalit n'est disponible que pour les membres de Creative cloud et les abonns de produits ponctuels. Pour vous inscrire Adobe Creative Cloud, voir Adobe Creative Cloud. L'intgration de Dreamweaver Edge Inspect vous permet de prvisualiser et d'inspecter vos pages Web sur plusieurs priphriques connects simultanment l'aide Google Chrome. Edge Inspect est une application d'Adobe que vous pouvez tlcharger partir d'Adobe Creative Cloud, de l'App Store d'Apple et de Google Play. Pour plus d'informations sur Edge Inspect, voir Adobe Edge Inspect - Forum aux questions (FAQ). La version gratuite d'Edge Inpect ne permet de prvisualiser vos crations que sur un seul priphrique la fois. 1. Configurez Adobe Edge Inspect sur les priphriques conformment aux instructions du Guide d'installation d'Adobe Edge Inspect. 2. Dans Dreamweaver, crez un site Web sur un serveur d'valuation. Ajoutez des pages votre site Web afin de les prvisualiser sur plusieurs priphriques. 3. Ouvrez la page que vous souhaitez prvisualiser dans Dreamweaver. 4. Slectionnez Fichier > Aperu dans le navigateur > Aperu dans Edge Inspect. Google Chrome s'ouvre dans Edge Inspect, o vous pouvez afficher un aperu de vos pages Web. 5. Effectuez les oprations suivantes sur les priphriques sur lesquels vous souhaitez prvisualiser la page : a. Assurez-vous que tous les priphriques sont connects un rseau commun. b. Dans Google Chrome, cliquez sur l'icne du plug-in Adobe Inspect. c. Ouvrez Edge Inspect dans chacun des priphriques, puis cliquez sur + . d. Entrez l'adresse IP de l'ordinateur sur lequel vous avez ouvert la page d'aperu. e. Cliquez sur Rejoindre. Une fois les priphriques jumels, la page ouverte dans Google Chrome apparat galement sur vos priphriques connects. Lorsque vous inspectez votre site Web dans Google Chrome, les modifications s'appliquent galement sur les priphriques connects.
15
Importation de compositions Edge Animate

Cette fonctionnalit n'est disponible que pour les membres de Creative cloud et les abonns de produits ponctuels. Pour vous inscrire Adobe Creative Cloud, voir Adobe Creative Cloud.
Importation de compositions Edge Animate Modification de l'emplacement par dfaut des fichiers extraits Enveloppe du fichier insr dans une balise
Importation de compositions Edge Animate
En haut
Vous pouvez importer des compositions Adobe Edge Animate (fichiers OAM) dans Dreamweaver. La composition est place l'emplacement du curseur. Dreamweaver extrait le contenu du fichier OAM import dans un dossier nomm edgeanimate_assets. Vous pouvez modifier l'emplacement par dfaut dans la bote de dialogue Configuration du site. Remarque : Les noms de fichiers contenant des caractres deux octets ne sont pas pris en charge. 1. Assurez-vous que le curseur est l'endroit o vous souhaitez insrer la composition Edge Animate. 2. Slectionnez Insertion > Multimdia > Composition Edge Animate. 3. Accdez l'emplacement du fichier OAM sur votre ordinateur et ouvrez ce fichier. L'animation est place l'emplacement spcifi. Par dfaut, le contenu du fichier OAM est extrait vers le dossier edgeanimate_assets. Un sous-dossier portant le nom du fichier est cr. Le contenu du fichier OAM est plac dans le dossier Assets sous cet emplacement. Remarque : Vous pouvez placer des compositions Edge Animate dans des pages individuelles qui ne font partie d'aucun site. Les fichiers sont extraits vers l'emplacement de la page.
Emplacement des fichiers extraits A. Dossier edgeanimate_assets B. Dossier cr l'aide du nom du fichier OAM C. Dossier Assets contenant les fichiers extraits
4. Prvisualisez la composition Edge Animate insre dans un navigateur ou dans le mode En direct.
Modification de l'emplacement par dfaut des fichiers extraits

1. Ouvrez la bote de dialogue Configuration du site pour votre site. 2. Sous Paramtres avancs, slectionnez Actifs Edge Animate. 3. Dans Dossier des actifs, modifiez l'emplacement des fichiers extraits.
En haut
16
Enveloppe du fichier insr dans une balise

Pour envelopper le fichier OAM insr dans une balise, effectuez les oprations suivantes : 1. Cliquez avec le bouton droit de la souris sur le fichier en mode Cration. 2. Choisissez l'option Envelopper avec balise. 3. Dans la bote de dialogue Envelopper avec balise, spcifiez la balise pour envelopper le fichier.
En haut
17
Ajout de polices Edge et de polices Web la liste des polices

Cette fonctionnalit n'est disponible que pour les membres de Creative cloud et les abonns de produits ponctuels. Pour vous inscrire Adobe Creative Cloud, voir Adobe Creative Cloud. Vous pouvez ajouter des polices Adobe Edge et des polices Web la liste des polices dans Dreamweaver. Dans la liste des polices, les piles de polices prises en charge par Dreamweaver sont rpertories en premier, suivies des polices Web et des polices Edge.
Ajout de polices Adobe Edge la liste des polices
En haut
Vous pouvez dsormais utiliser les polices Adobe Edge dans vos pages Web. Lors de l'utilisation d'une police Edge dans une page, une balise de script supplmentaire est ajoute pour faire rfrence un fichier JavaScript. Ce fichier tlcharge la police du serveur Creative Cloud directement dans la mmoire cache du navigateur. Lors de l'affichage de la page, les polices sont tlcharges du serveur Creative Cloud, mme si la police est disponible sur l'ordinateur de l'utilisateur. Par exemple, une balise Script (dans la version 12.2) qui utilise uniquement la police Abel a le format suivant :  <script src="http://webfonts.creativecloud.com/abel:n4:default.js" type="text/javascript"></script> abel correspond au nom interne que le serveur utilise pour identifier la police. n4 indique que la variante de la police en cours de tlchargement est de style normal et que son paisseur est de 400 . Dans Dreamweaver CC, le script qui est ajout se prsente comme suit :  <script>var adobewebfontsappname ="dreamweaver"</script> <script src="http://use.edgefonts.net/abel:n4:default.js" type="text/javascript"></script> 1. Slectionnez Modifier > Grer les polices. 2. Toutes les polices Adobe Edge que vous pouvez ajouter la liste des polices s'affichent dans l'onglet Polices Adobe Edge. 3. Pour rechercher des polices dans cette liste et les ajouter la liste des polices, effectuez les oprations suivantes : Cliquez sur la police que vous souhaitez ajouter la liste des polices. Pour dslectionner une police, cliquez nouveau sur la police. Utilisez des filtres pour afficher uniquement les polices de votre choix. Par exemple, pour afficher les polices de type Serif, cliquez sur . Vous pouvez utiliser plusieurs filtres. Par exemple, pour afficher tous les filtres de type Serif pouvant tre utiliss pour les paragraphes, et . cliquez sur Pour rechercher une police par son nom, saisissez son nom dans la zone de recherche. 4. Cliquez sur pour filtrer les polices que vous avez slectionnes.
5. Cliquez sur Termin. 6. Ouvrez la liste des polices partir de n'importe quel emplacement. Par exemple, vous pouvez utiliser la liste Police de la section CSS du panneau Proprits. Dans la liste Police, les piles de polices de Dreamweaver sont rpertories avant les polices Web. Faites dfiler la liste vers le bas pour localiser les polices slectionnes.
Ajout de polices Web locales la liste des polices
En haut
Vous pouvez ajouter des polices Web de votre ordinateur la liste Police de Dreamweaver. Les polices ajoutes apparaissent dans tous les menus Police de Dreamweaver. Les polices de type EOT, WOFF, TTF et SVG sont prises en charge.
18
1. Slectionnez Modifier > Grer les polices. 2. Dans la bote de dialogue qui s'affiche, cliquez sur l'onglet Polices Web locales. 3. Cliquez sur le bouton Parcourir correspondant au type de police que vous souhaitez ajouter. Par exemple, si votre police est au format EOT, cliquez sur le bouton Parcourir correspondant Police EOT. 4. Sur votre ordinateur, recherchez l'emplacement contenant la police. Slectionnez le fichiez et ouvrez-le. Si la police est disponible dans d'autres formats cet emplacement, tous les formats sont automatiquement ajouts la bote de dialogue. Par ailleurs, le nom de la police est automatiquement rcupr. 5. Slectionnez l'option vous invitant confirmer que vous disposez d'une licence pour utiliser la police sur un site Web. 6. Cliquez sur Termin. La liste des polices s'affiche dans la zone Liste actuelle des polices Web locales. Pour supprimer un police Web de la liste des polices, slectionnez la police dans la zone Liste actuelle des polices Web locales, puis cliquez sur Supprimer.
Cration de piles de polices personnalisables
En haut
Une pile de polices est une liste de polices dans une dclaration de famille de polices CSS. L'onglet Piles de polices personnalisables de la bote de dialogue Grer les polices permet d'effectuer les oprations suivantes : Ajouter de nouvelles piles de polices l'aide du bouton + . Slectionner la pile de polices dans la liste des polices pour modifier les piles de polices existantes. Utiliser les boutons >> et << pour mettre jour la liste Polices choisies. Utiliser le bouton - pour supprimer les piles de polices existantes. Rorganiser les piles l'aide des boutons flchs.
Aperu des polices insres
En haut
Vous ne pouvez pas afficher un aperu des polices Edge et des polices Web en mode Cration. Passez en mode Affichage en direct ou affichez un aperu de la page dans un navigateur.
Mise jour de la balise de script de polices Web dans tous les fichiers
En haut
Lorsque vous mettez jour la police dans un fichier CSS li plusieurs fichiers HTML, vous tes invit mettre jour la balise de script dans les fichiers HTML associs. Lorsque vous cliquez sur Mettre jour, les balises de script de tous les fichiers concerns HTML sont mises jour.
Mise jour de la balise de script de polices Web dans une page
En haut
Choisissez Commandes > Nettoyer la balise de script des polices Web (page actuelle) pour mettre jour toutes les polices Web sur la page Web qui ne sont pas refltes dans la balise de script.
19
Utilisation d'effets jQuery dans Dreamweaver

Les effets Spry ont t remplacs par des effets jQuery dans Dreamweaver CC. Bien qu'il soit toujours possible de modifier des effets Spry sur votre page, vous ne pouvez pas ajouter de nouveaux effets Spry.
Ajout d'effets jQuery Effets jQuery bass sur les vnements Suppression d'effets jQuery
Ajout d'effets jQuery
En haut
1. Dans le mode Cration ou Code de votre document Dreamweaver, slectionnez l'lment auquel vous souhaitez appliquer un effet jQuery. 2. Choisissez Fentre > Comportements afin d'ouvrir le panneau Comportements. 3. Cliquez sur , cliquez sur Effets, puis cliquez sur l'effet dsir.
Le panneau de personnalisation s'affiche et prsente les paramtres de l'effet slectionn. 4. Spcifiez les paramtres, tels que l'lment cible auquel l'effet doit s'appliquer, ainsi que la dure de l'effet. L'lment cible peut tre le mme que l'lment slectionn initialement ou un autre lment de la page. Par exemple, si vous souhaitez que les utilisateurs puissent cliquer sur un lment A pour afficher ou masquer un lment B, l'lment cible est B. 5. Pour ajouter plusieurs effets jQuery, rptez les tapes ci-dessus. Lorsque vous slectionnez plusieurs effets, Dreamweaver les applique dans l'ordre o ils sont affichs dans le panneau Comportements. Pour modifier l'ordre des effets, utilisez les touches flches dans la partie suprieure du panneau. Dreamweaver insre automatiquement le code appropri dans votre document. Par exemple, si vous avez slectionn l'effet Fondu, le code suivant est insr : Rfrences de fichiers externes pour les fichiers dpendants qui sont requis pour que les effets jQuery fonctionnent : <script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script> Le code suivant s'applique l'lment dans la balise body : <li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li> Une tiquette de script avec le code suivant est ajoute : <script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>
Effets jQuery bass sur un vnement
En haut
Lorsque vous appliquez un effet jQuery, il est attribu par dfaut l'vnement onClick. Vous pouvez modifier l'vnement dclencheur de l'effet l'aide du panneau Comportements. 1. Slectionnez l'lment de page requis. 2. Dans le panneau Fentre > Comportements, cliquez sur l'icne Afficher les vnements dfinis. 3. Cliquez sur la ligne correspondant l'effet qui est actuellement appliqu. Notez que la premire colonne devient une liste droulante qui contient la liste des vnements que vous pouvez choisir. 4. Cliquez sur l'vnement dsir.
20
Suppression d'effets jQuery

1. Slectionnez l'lment de page requis. Le panneau Comportements rpertorie tous les effets qui sont actuellement appliqus l'lment de page slectionn. 2. Slectionnez l'effet de travail supprimer puis cliquez sur .
En haut
21
Recherche de fichiers sur la base de leur nom ou de leur contenu | Mac OS

Cette fonctionnalit n'est disponible que pour les membres de Creative cloud et les abonns de produits ponctuels. Pour vous inscrire Adobe Creative Cloud, voir Adobe Creative Cloud. Cette fonctionnalit est uniquement disponible sous Mac OS. La fonction de recherche en direct permet de localiser des fichiers en fonction de leur nom ou de texte qu'ils contiennent. Le site slectionn dans le panneau Fichiers est utilis pour la recherche. Si aucun site n'est slectionn dans le panneau, l'option de recherche ne s'affiche pas. La recherche en direct utilise l'API Spotlight dans Mac OS. Toute personnalisation que vous appliquez aux prfrences de Spotlight est galement utilise pour la recherche en direct. Spotlight affiche tous les fichiers de votre ordinateur qui correspondent votre requte de recherche. La fonction de recherche en direct cherche les fichiers dans le dossier racine local du site slectionn dans le panneau Fichiers. 1. Slectionnez Modifier > Recherche en direct. Vous pouvez galement utiliser le raccourci CMD+MAJ+F. Le focus est fix la zone de texte Recherche en direct du panneau Fichiers. 2. Saisissez le mot ou l'expression dans la zone de texte. Les rsultats s'affichent au fur et mesure que vous entrez du texte dans la zone de texte. Fichiers correspondants Affiche au maximum 10 noms qui correspondent vos critres de recherche. Le message Plus de 10 rsultats trouvs s'affiche s'il y a plus de 10 fichiers correspondants. Prcisez vos critres de recherche si vous ne trouvez pas le fichier dsir l'aide des options affiches. Correspondance de texte dans Affiche au maximum 10 fichiers qui contiennent du texte correspondant au mot ou la phrase que vous avez saisi. Pour plus d'options, cliquez sur Tout rechercher. Les rsultats s'affichent dans le panneau Recherche. 3. Lorsque vous dplacez le pointeur de la souris au-dessus un rsultat de recherche, une infobulle prsente le chemin relatif la racine du fichier. Appuyez sur Entre ou cliquez sur l'lment pour ouvrir le fichier. Pour les fichiers o le texte a t trouv, la premire occurrence du texte est mise en surbrillance. Utilisez Cmd+G pour accder aux autres instances. Remarque : Pour fermer le panneau de rsultats de la recherche en direct, cliquez l'extrieur du panneau ou appuyez sur la touche Echap / Esc.
22
Insertion d'audio HTML5

Cette fonctionnalit n'est disponible que pour les membres de Creative cloud et les abonns de produits ponctuels. Pour vous inscrire Adobe Creative Cloud, voir Adobe Creative Cloud. Dreamweaver permet d'insrer et de prvisualiser de l'audio HTML5 dans des pages Web. L'lment audio HTML5 fournit une mthode standard d'incorporer du contenu audio dans des pages Web. Pour plus d'informations sur l'lment audio HTML5, consultez l'article sur l'audio HTML5 sur le site W3schools.com.
Insertion d'audio HTML5 Prvisualisation de l'audio dans un navigateur
Insertion d'audio HTML5

1. Assurez-vous que le curseur est l'endroit o vous souhaitez insrer l'audio. 2. Slectionnez Insertion > Multimdia > Audio HTML5. Le fichier audio est insr l'emplacement spcifi. 3. Dans le panneau Proprits, entrez les informations suivantes :
En haut
Source / Source alt. 1 / Source alt. 2 : Dans Source, entrez l'emplacement du fichier audio. Vous pouvez galement cliquer sur l'icne de dossier afin de slectionner un fichier audio sur votre ordinateur. La prise en charge des formats audio varie selon les navigateurs. Si le format audio dans Source n'est pas pris en charge, le format spcifi dans Source alt. 1 ou Source alt. 2 est utilis. Le navigateur slectionne le premier format reconnu pour afficher l'audio. Pour ajouter rapidement des vidos aux trois champs, utilisez une slection multiple. Lorsque vous choisissez trois formats vido pour la mme vido partir d'un dossier, le premier format dans la liste est utilis pour la source. Les formats suivants dans la liste sont utiliss pour complter automatiquement les champs Source alt. 1 et Source alt. 2.
Navigateur Internet Explorer 9 Firefox 4.0 Google Chrome 6 Apple Safari 5 Opera 10.6
MP3 Oui Non Oui Oui Non
Wav Non Oui Oui Oui Oui
Ogg Non Oui Oui Non Oui
Titre : Entrez un titre pour le fichier audio. Texte de rechange : Entrez le texte afficher dans les navigateurs qui ne prennent pas en charge HTML5. Commandes : Slectionnez cette option si vous souhaitez afficher les commandes audio dans la page HTML (par exemple Lecture, Pause et Sourdine). Lecture auto : Slectionnez cette option si vous voulez que la lecture de l'audio dbute ds son chargement dans la page Web. Audio en boucle : Slectionnez cette option si vous voulez que l'audio soit lu en continu jusqu' ce que l'utilisateur arrte la lecture. Sourdine : Slectionnez cette option si vous souhaitez mettre l'audio en sourdine aprs le tlchargement. Prchargement : Si vous slectionnez Auto, la totalit du fichier audio est charge lors du tlchargement de la page. Si vous slectionnez Mtadonnes, seules les mtadonnes seront tlcharges lorsque le tlchargement de la page sera termin.
Panneau Proprits pour l'audio HTML5
Prvisualisation de l'audio dans un navigateur
En haut
23
1. Enregistrez la page Web. 2. Slectionnez Fichier > Aperu dans le navigateur. Slectionnez le navigateur dans lequel vous souhaitez prvisualiser l'audio.
24
Insertion de vido HTML5

Cette fonctionnalit n'est disponible que pour les membres de Creative cloud et les abonns de produits ponctuels. Pour vous inscrire Adobe Creative Cloud, voir Adobe Creative Cloud. Dreamweaver permet d'insrer de la vido HTML5 dans des pages Web. L'lment vido HTML5 fournit une mthode standard d'incorporation de vidos dans des pages Web. Pour plus d'informations sur l'lment vido HTML5, consultez l'article sur la vido HTML5 sur le site W3schools.com.
Insertion de vido HTML5 dans Dreamweaver Insertion de vido HTML5 Prvisualisation de la vido dans un navigateur
Insertion de vido HTML5

1. Assurez-vous que le curseur est l'endroit o vous souhaitez insrer la vido. 2. Slectionnez Insertion > Multimdia > Vido HTML5. L'lment vido HTML5 est insr l'emplacement spcifi. 3. Dans le panneau Proprits, spcifiez des valeurs pour les diffrentes options.
En haut
Source / Source alt. 1 / Source alt. 2 : Dans Source, entrez l'emplacement du fichier vido. Vous pouvez galement cliquer sur l'icne de dossier pour slectionner le fichier vido partir du systme de fichiers local. La prise en charge d'un format vido varie selon les navigateurs. Si le format de vido dans Source n'est pas pris en charge dans un navigateur, le format spcifi dans Source alt. 1 ou Source alt. 2 est utilis. Le navigateur slectionne le premier format reconnu pour afficher la vido. Pour ajouter rapidement des vidos aux trois champs, utilisez une slection multiple. Lorsque vous choisissez trois formats vido pour la mme vido partir d'un dossier, le premier format dans la liste est utilis pour la source. Les formats suivants dans la liste sont utiliss pour complter automatiquement les champs Source alt. 1 et Source alt. 2. Reportez-vous au tableau ci-dessous pour plus d'informations sur les navigateurs et les formats de vido pris en charge. Pour les informations les plus rcentes, voir HTML5 - Browser Support (en anglais).
Navigateur Internet Explorer 9 Firefox 4.0 Google Chrome 6 Apple Safari 5 Opera 10.6
MP4 Oui Non Oui Oui Non
WebM Non Oui Oui Non Oui
Ogg Non Oui Oui Non Oui
Titre : Spcifiez un titre pour la vido. Largeur (L) : Entrez la largeur en pixels de la vido. Hauteur (H) : Entrez la hauteur en pixels de la vido. Commandes : Slectionnez cette option si vous souhaitez afficher les commandes vido dans la page HTML (par exemple Lecture, Pause et Sourdine). Lecture auto : Slectionnez cette option si vous voulez que la lecture de la vido dbute ds son chargement dans la page Web. Affiche : Entrez l'emplacement de l'image qui doit tre affiche jusqu' ce que le tlchargement de la vido soit termin, ou jusqu' ce que l'utilisateur clique sur Lire. Les valeurs Largeur et Hauteur sont remplies automatiquement lorsque vous insrez l'image. Boucle : Slectionnez cette option si vous voulez que la vido soit lue en continu jusqu' ce que l'utilisateur arrte la lecture. Sourdine : Slectionnez cette option si vous souhaitez couper le son de la vido. Vido Flash : Slectionnez un fichier SWF pour les navigateurs qui ne prennent pas en charge la vido HTML5. Texte de rechange : Entrez le texte afficher si le navigateur ne prend pas en charge HTML5. Prchargement : Spcifie les prfrences de l'auteur quant la faon de charger la vido lors du chargement de la page. Si vous slectionnez Auto, l'intgralit de la vido est charge lors du tlchargement de la page. Si vous slectionnez Mtadonnes, seules les mtadonnes seront tlcharges lorsque le tlchargement de la page sera termin.
25
Panneau Proprits de la vido HTML5
Prvisualisation de la vido dans un navigateur

1. Enregistrez la page Web. 2. Slectionnez Fichier > Aperu dans le navigateur. Slectionnez le navigateur dans lequel vous souhaitez prvisualiser la vido.
En haut
26
Prise en charge amliore de HTML5 pour les lments de formulaire

Rvision du flux de production de formulaires dans Dreamweaver Nouveaux attributs communs aux lments de formulaire Elments de formulaire avec attributs modifis Nouveaux lments de formulaire HTML5 Dans le cadre d'une amlioration continue de la prise en charge de HTML5 dans Dreamweaver, de nouveaux attributs ont t introduits pour quelques lments de formulaire. En outre, quatre nouveaux lments de formulaire HTML5 ont t introduits. Vous trouverez les lments de formulaire dans le panneau Insertion. Choisissez Fentre > Insertion. Dans le menu Insertion du panneau, slectionnez Formulaires.
Liens associs
En haut
Nouveaux attributs communs aux lments de formulaire

Les nouveaux attributs suivants sont communs tous les lments de formulaire : Dsactiv : Slectionnez cette option si vous souhaitez que le navigateur dsactive l'lment. Obligatoire : Slectionnez cette option si vous souhaitez que le navigateur vrifie si une valeur a t indique.
Saisie automatique : Slectionnez cette option pour que les valeurs soient compltes automatiquement lorsque l'utilisateur entre des informations dans un navigateur. Focus automatique : Slectionnez cette option si vous souhaitez que cet lment ait le focus lorsque navigateur charge la page. Lecture seule : Slectionnez cette option pour fixer la valeur de l'lment en lecture seule. Formulaire : Spcifie un ou plusieurs formulaires auxquels un lment <input> appartient. Nom : Nom unique utilis pour faire rfrence l'objet dans le code. Emplacement rserv : Conseil qui dcrit la valeur attendue d'un champ de saisie. Motif : Expression rgulire par rapport laquelle la valeur de l'lment est valide. Titre : Informations supplmentaires au sujet d'un lment. S'affiche sous la forme d'une infobulle. Ordre des tabulations : Spcifie la position de l'lment actuel dans l'ordre des tabulations pour le document actuel.
Elments de formulaire avec attributs modifis
En haut
Formulaire sans validation : Slectionnez cette option pour dsactiver la validation du formulaire. Cette slection remplace l'attribut Aucune validation au niveau du formulaire. Type de codage du formulaire : Type MIME auquel un agent utilisateur est cens associer cet lment pour l'envoi du formulaire. Cible du formulaire cible : Nom de contexte de navigation ou mot-cl qui reprsente la cible du contrle. Accepter jeu de caractres : Prcise les codages de caractres utiliss pour l'envoi du formulaire. Remarque : Les liens pour les attributs contiennent des informations sur tous les attributs numrs dans les spcifications de HTML5. Tous ces attributs ne sont pas prsents dans le panneau Proprits. Vous pouvez utiliser le mode Code pour ajouter les attributs absents du panneau.
Elment de formulaire Champ de texte Bouton Case cocher
Nouveaux attributs spcifiques l'lment Liste <Aucun nouvel attribut spcifique> <Aucun nouvel attribut spcifique>
Description des attributs http://www.w3.org/TR/htmlmarkup/input.text.html http://www.w3.org/wiki/HTML/Elements/but ton http://www.w3.org/TR/htmlmarkup/input.checkbox.html
27
Fichier Formulaire Masqu Mot de passe
Multiple Sans validation , Accepter jeu de caractres <Aucun nouvel attribut spcifique> <Aucun nouvel attribut spcifique> Largeur, Hauteur, Action, Mthode, Formulaire sans validation, Type de codage du formulaire, Cible du formulaire. <Aucun nouvel attribut spcifique> Formulaire sans validation, Type de codage du formulaire, Cible du formulaire, Ordre des tabulations, Mthode. <Aucun nouvel attribut spcifique> Lignes, Colonnes, Emplacement rserv, Renvoi la ligne, Longueur max., Ordre des tabulations Taille
http://www.w3.org/TR/htmlmarkup/input.file.html http://www.w3.org/TR/2012/WD-htmlmarkup-20120329/form.html http://www.w3.org/TR/2012/WD-htmlmarkup-20120329/input.hidden.html http://www.w3.org/TR/htmlmarkup/input.password.html http://www.w3.org/TR/htmlmarkup/input.image.html http://dev.w3.org/html5/markup/button.rese t.html http://www.w3.org/TR/htmlmarkup/input.submit.html http://www.w3.org/TR/htmlmarkup/input.radio.html http://www.w3.org/TR/htmlmarkup/textarea.html http://www.w3.org/wiki/HTML/Elements/sel ect
Image
Rinitialiser
Envoyer
Case d'option
Zone de texte
Slection
Elments de formulaire HTML5

Elment de formulaire Couleur Disponible dans 12.2 Description Pour les champs de saisie devant contenir une couleur. Contrle permettant l'utilisateur de slectionner une date. Permet l'utilisateur de slectionner une date et une heure (avec fuseau horaire). Permet l'utilisateur de slectionner une date et une heure (sans fuseau horaire) Permet l'utilisateur de slectionner un mois et une anne. Pour les champs ne devant contenir que des chiffres. Pour les champs devant contenir des valeurs dans une plage de chiffres. Permet l'utilisateur de slectionner une heure. Permet l'utilisateur de slectionner une semaine et une anne. Contrle permettant de modifier une liste d'adresses lectroniques donne dans la valeur de l'lment. Contrle de modification en texte brut d'une ligne pour la Description des attributs http://www.w3.org/TR/htmlmarkup/input.color.html http://www.w3.org/TR/htmlmarkup/input.date.html http://www.w3.org/TR/htmlmarkup/input.datetime.html http://www.w3.org/TR/htmlmarkup/input.datetimelocal.html http://www.w3.org/TR/htmlmarkup/input.month.html http://www.w3.org/TR/htmlmarkup/input.number.html http://www.w3.org/TR/htmlmarkup/input.range.html http://www.w3.org/TR/htmlmarkup/input.time.html http://www.w3.org/TR/htmlmarkup/input.week.html
En haut
Date
12.2
Date et heure
12.2
Date et heure locales
12.2
Mois
12.2
Nombre
12.2
Plage
12.2
Heure
12.2
Semaine
12.2
Adresse lectronique
12.1
http://www.w3.org/TR/htmlmarkup/input.email.html
Rechercher
12.1
http://www.w3.org/TR/html-
28
saisie d'un ou plusieurs termes de recherche. Contrle de modification en texte brut d'une ligne pour la saisie d'un numro de tlphone. Contrle permettant de modifier une URL absolue donne dans la valeur de l'lment.
markup/input.search.html
Tlphone (Tl.)
12.1
http://www.w3.org/TR/htmlmarkup/input.tel.html
URL
12.1
http://www.w3.org/TR/htmlmarkup/input.url.html
29
Nouveauts de CS6
Mises jour de Creative Cloud postrieures CS6 Didacticiels vido Insertion de contenu vido HTML5 Nouveau gestionnaire de site Dispositions CSS sur base de grilles fluides Transitions CSS3 Slection de classes CSS multiples Intgration de PhoneGap Build jQuery Mobile 1.0 et nuances jQuery Mobile Intgration de Business Catalyst Polices Web Optimisation PSD simplifie Amliorations du transfert FTP
Mises jour de Creative Cloud postrieures CS6

Mise jour 12.1, 24 septembre 2012 : Pour connatre les nouveauts de cette version, voir Nouveauts | Creative Cloud. Mise jour 12.2, 14 fvrier 2013 : Pour connatre les nouveauts de cette version, voir Nouveauts | Creative Cloud | Fvrier 2013
En haut
Didacticiels vido
Les didacticiels vido pour les nouvelles fonctionnalits de Dreamweaver CS6 sont dsormais disponibles sur Adobe TV (http://www.adobe.com/go/learn_dwcs6_adobetv_fr).
En haut
Nouveau gestionnaire de site
En haut
L'apparence de la bote de dialogue Grer les sites (Sites > Grer les sites) a t rafrachie, bien que la plupart de ses fonctionnalits restent les mmes. Parmi les fonctionnalits supplmentaires, citons la possibilit de crer ou d'importer des sites Business Catalyst. Options de la bote de dialogue Grer les sites
Dispositions CSS sur base de grilles fluides
En haut
Les puissantes dispositions grille fluide de Dreamweaver (Nouveau > Nouvelle disposition grille fluide) permet de crer des dispositions CSS adaptatives qui ragissent aux diverses tailles d'cran. Lorsque vous crez une page Web l'aide d'une grille fluide, la mise en page et son contenu s'adaptent automatiquement au priphrique d'affichage de l'utilisateur : ordinateur de bureau, tablette ou smartphone. Adobe TV : Utilisation de dispositions grille fluide dans Dreamweaver CS6 Adobe TV : Cration de concepts adaptatifs l'aide de dispositions grille fluide dans Dreamweaver CS6 Comment utiliser les mises en forme de grille fluide dans Dreamweaver CS6 Prise en main des grilles fluides Dreamweaver CS6.
Transitions CSS3
En haut
Le nouveau panneau Transitions CSS permet d'appliquer des changements de proprits en douceur des lments de page bass sur CSS en rponse des vnements dclencheurs comme un survol, un clic ou un focus. (Par exemple, un lment de barre de menu effectue progressivement un fondu d'une couleur vers une autre lorsque vous placez le pointeur de la souris au-dessus de lui.) Vous pouvez dsormais crer des transitions CSS utilisant la fois la prise en charge au niveau du code et le nouveau panneau Transitions CSS (Fentre > Transitions CSS). Prsentation des transitions CSS3
30
Effets de transition CSS3 dans Dreamweaver (rfrence) Cration de modifications en douceur l'aide du panneau Transitions CSS (didacticiel) Adobe TV : Utilisation de transitions CSS3 dans Dreamweaver CS6
Slection de classes CSS multiples
En haut
Vous pouvez dsormais appliquer des classes CSS multiples un lment. Slectionnez l'lment, ouvrez la bote de dialogue Slection de classes multiples, puis choisissez les classes dsires. Lorsque vous avez appliqu plusieurs classes, Dreamweaver cre une nouvelle classe multiple partir de vos slections. Les nouvelles classes multiples sont ensuite disponibles partir d'autres endroits o vous effectuez des slections CSS. Vous pouvez ouvrir la bote de dialogue Slection de classes multiples partir de plusieurs points d'accs : L'inspecteur Proprits HTML (choisissez Appliquer des classes multiples dans le menu) Le menu contextuel Rgle cible de l'inspecteur Proprits CSS Le menu contextuel du slecteur de balises dans le bas de la fentre de document (cliquez avec le bouton droit de la souris sur une balise puis choisissez Dfinir la classe > Appliquer des classes multiples). Adobe TV : Slection de plusieurs classes dans Dreamweaver CS6
En haut
Intgration de PhoneGap Build
L'intgration directe au passionnant nouveau service PhoneGap Build permet aux utilisateurs de Dreamweaver CS6 de crer des applications natives pour appareils mobile en exploitant leurs connaissances de HTML, CSS et JavaScript. Lorsque vous tes connect PhoneGap Build par l'intermdiaire du panneau PhoneGap Build (Site > PhoneGap Build), vous pouvez crer directement votre application Web dans le service PhoneGap Build, puis tlcharger les applications mobiles natives vers votre ordinateur local ou votre appareil mobile. Le service PhoneGap Build gre votre projet et permet de crer des applications natives pour les plates-formes mobiles les plus populaires, comme Android, iOS, Blackberry, Symbian et webOS. Qu'est-ce que PhoneGap ? Assemblage d'applications web avec PhoneGap Build (rfrence) Adobe TV : Assemblage d'une application avec PhoneGap Build
jQuery Mobile 1.0 et nuances jQuery Mobile

jQuery Mobile 1.0
En haut
Dreamweaver CS6 s'accompagne de jQuery 1.6.4 et e fichiers jQuery Mobile 1.0. Les pages de dmarrage de jQuery Mobile sont disponibles depuis la bote de dialogue Nouveau document (Fichier > Nouveau > Page depuis un exemple > Pages de dmarrage mobiles). Dsormais, vous pouvez aussi choisir entre deux types de fichiers CSS lors de la cration de vos pages jQuery Mobile : fichiers CSS complets ou fichiers CSS fractionns en composants structurels et de thme. Applications jQuery Mobile et pages de dmarrage Adobe TV : Prise en charge amliore de jQuery Mobile dans Dreamweaver CS6 Nuancier jQuery Mobile Vous pouvez prvisualiser toutes les nuances (thmes) d'un fichier CSS jQuery Mobile l'aide du nouveau panneau Nuancier jQuery Mobile (Fentre > Nuancier jQuery Mobile). Ce panneau permet ensuite d'appliquer des nuances ou d'en supprimer de diffrents lments de votre page Web jQuery Mobile. Cette fonctionnalit vous permet d'appliquer individuellement des nuances aux titres, aux listes, aux boutons et d'autres lments. Utilisation de thmes jQuery Mobile dans Dreamweaver CS6 (didacticiel) Adobe TV : Prise en charge amliore de jQuery Mobile dans Dreamweaver CS6
Intgration de Business Catalyst

Nouveaux sites Business Catalyst
En haut
Vous pouvez dsormais crer un nouveau site d'valuation Business Catalyst directement depuis Dreamweaver, afin de dcouvrir les nombreuses possibilits que Business Catalyst peut offrir vos clients et vos projets. Panneau Business Catalyst Lorsque vous tes connect votre site Business Catalyst, vous pouvez insrer et personnaliser des modules Business Catalyst directement partir du panneau Business Catalyst (Fentre > Business Catalyst) de Dreamweaver. Vous accderez ainsi de puissantes fonctionnalits comme des catalogues de produits, l'intgration aux blogues et aux mdias sociaux, les paniers d'achats, et bien plus encore. L'intgration vous permet de travailler en toute transparence entre vos fichiers locaux dans Dreamweaver et le contenu de la base de donnes de votre site sur le site Business
31
Catalyst. Intgration Dreamweaver-Business Catalyst (rfrence) Rimportation de sites Business Catalyst dans Dreamweaver CS6 (rfrence) Personnalisation d'un module Business Catalyst l'aide de Dreamweaver (rfrence) Adobe TV : Cration et modification de votre site Web Business Catalyst
Polices Web
En haut
Vous pouvez dsormais utiliser des polices cratives prises en charge sur le Web (comme les polices Web Google ou Typekit) dans Dreamweaver. Tout d'abord, utilisez le gestionnaire de polices Web (Modifier > Polices Web) pour importer une police Web dans votre site Dreamweaver. La police Web est ensuite disponible pour vos pages Web. Adobe TV : Utilisation de polices Web dans Dreamweaver CS6
Optimisation PSD simplifie
En haut
La bote de dialogue Aperu de l'image de Dreamweaver CS5 a t rebaptise Optimisation de l'image. Pour ouvrir cette bote de dialogue, slectionnez une image dans la fentre de document, puis cliquez sur le bouton Modifier les paramtres de l'image dans l'inspecteur Proprits. Certaines options qui figuraient dans la bote de dialogue Aperu de l'image prcdente de CS5 se trouvent dsormais dans l'inspecteur Proprits. Un aperu instantan de l'image s'affiche en mode Cration ds que vous modifiez des paramtres dans la bote de dialogue Optimisation de l'image. Modification d'images dans Dreamweaver (rfrence) Adobe TV : Modification d'images dans Dreamweaver CS6
Amliorations du transfert FTP
En haut
Dreamweaver utilise un transfert multicanaux pour transfrer simultanment les fichiers slectionns l'aide de plusieurs canaux. Dreamweaver permet galement d'utiliser simultanment les oprations Get et Put pour transfrer des fichiers. Si la bande passante disponible est suffisante, le transfert FTP asynchrone multicanaux acclre considrablement le processus de transfert. Pour plus d'informations, voir http://blogs.adobe.com/dreamweaver/2012/06/ftp-improvement-in-dreamweaver-cs6.html.
32
Modifications des options d'insertion

Accs plus rapide aux options d'insertion et prise en charge amliore des lments HTML5 Options obsoltes Options rorganises du panneau Insertion et du menu Insrer
Accs plus rapide aux options d'insertion et prise en charge amliore des lments HTML
En haut
Les options du panneau Insertion et du menu Insrer ont t rorganises afin de vous aider trouver et insrer plus rapidement ces options. De nouveaux lments HTML5 ont t ajouts au menu Insrer. Ces modifications ont t apportes aux options d'insertion pour les raisons suivantes : Synchronisation du classement des options dans le panneau Insertion avec le menu Insrer, afin d'amliorer la vitesse de leur recherche. Dans le cadre de la prise en charge amliore de HTML5 dans Dreamweaver, de nouveaux lments HTML5 ont t introduits dans les options d'insertion. Les options d'insertion qui exigeaient plusieurs clics sont devenues obsoltes. Ces options peuvent tre configures de faon rapide et aise l'aide de l'inspecteur Proprits ou du mode Code.
Options obsoltes
En haut
Les options d'insertion qui exigeaient plusieurs clics sont devenues obsoltes. Ces options peuvent tre configures l'aide l'inspecteur Proprits ou du mode Code. Ds lors, les botes de dialogue suivantes sont devenues obsoltes : Editeur de balises, Slecteur de balises, Balise de formulaire et Attributs d'accessibilit des balises d'entre. Les options correspondantes ne sont, par consquent, plus disponibles dans le menu contextuel. Les options suivantes de la section Donnes du panneau Insertion sont obsoltes : Jeu de donnes, Rptition, Rgion et Liste de rptition. Les options suivantes de la catgorie Balises d'en-tte sous HTML sont obsoltes : Actualiser, Base et Lien. La possibilit de dfinir la couleur des icnes dans le panneau Insertion a t abandonne. Les icnes d'lment ne sont dsormais disponibles qu'en noir et blanc.
Options rorganises du panneau Insertion et du menu Insrer
En haut
Le panneau insertion et le menu Insrer ont t rorganiss de faon tre synchroniss l'un l'autre. L'ordre des options dans le panneau Insertion correspond celui du menu Insrer. En outre, de nouvelles options sont disponibles et quelques anciennes options ont t supprimes. Options d'insertion dans Dreamweaver 12 (CS6)
33
Options d'insertion dans Dreamweaver 12.1
Modifications apportes aux options de mdias et de formulaire
Option Div Vido HTML5 Zone de travail
CS6,CS5.5 Insertion > Objets mise en forme > Balise Div Non disponible Non disponible
Creative Cloud Insertion > Div Insertion > Vido HTML5 Insertion > Zone de travail
Options
Saut de ligne, espace inscable, copyright, marque

34
Caractre
Insertion > HTML > Caractres spciaux
Insertion > Caractre
dpose, marque commerciale, livre sterling, yen, euro, guillemet ouvrant, guillemet fermant, tiret cadratin, tiret demi-cadratin, autres Mta, Mots-cls, Description, Viewport
En-tte Barre horizontale
Insertion > HTML > Balises d'en-tte Non disponible
Insertion > En-tte Insertion > Barre horizontale
Donnes
Insertion > Objets de donnes
Insertion > Donnes
Jeu d'enregistrements, procdure stocke, donnes dynamiques, rgion rpte, rgion d'affichage, pagination de jeu d'enregistrements, aller , afficher le nombre d'enregistrements, ensemble de pages Principale-Dtails, insrer un enregistrement, mettre jour l'enregistrement, supprimer l'enregistrement, authentification de l'utilisateur, transformation XSLT
Balise Image
Insertion > Balise Insertion > Image
Non disponible Insertion > Image Image, Image de survol, HTML Fireworks Composition Edge Animate, SWF Flash, vido Flash, vido HTML5, audio HTML5, plug-in
Mdia
Insertion > Mdia Insertion > Requtes multimdias Insertion > Tableau Insertion > Objets de tableau
Insertion > Mdia Insertion > Requtes multimdias Insertion > Tableau Non disponible
Requtes multimdias Tableau Objets de tableau
Mise en forme
Insertion > Mise en forme
Insertion > Mise en forme
Div, Div de disposition de grille fluide, Div de trac position absolue, Header, HGroup, Navigation, Aside, Article, Section, Footer, cadres Formulaire, texte, e-mail, mot de passe, URL, tl, zone de texte de recherche, bouton, envoyer, rinitialiser, fichier, bouton image, masqu, slection, case d'option, groupe de cases d'option, case cocher, groupe de cases cocher, ensemble de champs, tiquette
Formulaire
Insertion > Formulaire
Insertion > Formulaire
Hyperlien Lien de messagerie Ancre nomme Date Inclusion ct serveur Commentaire HTML
Insertion > Hyperlien Insertion > Lien de messagerie Insertion > Ancre nomme Insertion > Date Insertion > Inclusion ct serveur Insertion > Commentaire Insertion > HTML
Insertion > Hyperlien Insertion > Lien de messagerie Insertion > Ancre nomme Insertion > Date Non disponible Non disponible Non disponible crer un modle, crer un modle imbriqu, rgion modifiable, rgion facultative, rgion rpte, rgion modifiable facultative, tableau rpt
Modle
Insertion > Modle
Insertion > Modle
Fragments de code rcents
Insertion > Fragments de code rcents
Insertion > Fragments de code rcents

35
Widget
Insertion > Widget
Insertion > Widget page, affichage par liste, grille de mise en forme, bloc repliable, texte, mot de passe, zone de texte, slection, case cocher, case d'option, bouton, curseur, interrupteur bascule Rgion modifiable, Rgion rpte ensemble de donnes, rgion, rptition, liste rpte, champ de texte de validation, zone de texte de validation, validation de case cocher, validation de slection, validation de mot de passe, confirmation de validation, validation de groupe de cases d'option, barre de menus, panneaux onglets, accordon, panneau rductible, infobulle
jQuery Mobile
Insertion > jQuery Mobile
Insertion > jQuery Mobile
In-Context
Insertion > In-Context
Insertion > In-Context
Spry
Insertion > Spry
Insertion > Spry
Objets de donnes Favoris Tlcharger d'autres objets
Insertion > Objets de donnes Insertion > Favoris Insertion > Tlcharger d'autres objets
Insertion > Donnes Insertion > Favoris Insertion > Tlcharger d'autres objets
36
Texte en arabe et en hbreu

Flux de texte bidirectionnel Editeur de balises Sens du texte et unicode-bidi dans les rgles CSS Proprits des tableaux Proprits des balises Div De nouvelles fonctions amliores pour travailler en arabe et en hbreu sont disponibles dans ldition Moyen-Orient et Afrique du Nord de ce logiciel.
Flux de texte bidirectionnel
En haut
Dans les langues du Proche-Orient, le texte s'crit principalement de droite gauche (RTL). Toutefois, en rgle gnrale, le sens de texte le plus frquemment utilis est bidirectionnel, un mlange de texte de gauche droite et de droite gauche. Un exemple de texte bidi est un paragraphe qui comporterait du texte en arabe et du texte en anglais. Dans CS6, vous pouvez utiliser Dreamweaver pour taper du texte en arabe, hbreu ou bidi dans le mode Cration et le mode Code. Dans la version proche-orientale de Dreamweaver, l'attribut de sens Droite gauche peut tre appliqu deux objets notionnels : les paragraphes et les caractres. L'attribut direction peut tre appliqu aux balises prises en charge par la spcification HTML. L'attribut direction peut avoir les valeurs suivantes : ltr (par dfaut), rtl ou inherit.
Attribut direction dans le code CSS Lorsque vous saisissez du texte en arabe ou en hbreu, ou du texte mixte, Dreamweaver reconnat les caractres comme tant afficher de droite gauche (LTR) et les prsente de la faon approprie.
Editeur de balises
Vous pouvez appliquer les paramtres de sens et de langue l'aide de l'diteur de balises.
En haut
Editeur de balises
Sens du texte et unicode-bidi dans les rgles CSS
En haut
Vous pouvez spcifier le sens du texte sous la forme d'une rgle CSS. Dans la bote de dialogue Dfinition d'une rgle CSS, spcifiez les options Sens Direction et bidi Unicode-options.
Options de langue dans les rgles CSS
Proprits des tableaux
En haut
Les tableaux de droite gauche sont aligns droite et les colonnes sont tries de droite gauche. Les poignes de redimensionnement se trouvent sur le ct gauche. Lors de l'emploi de la touche TAB, le curseur se dplace de la droite vers la gauche. Indiquez le sens du tableau l'aide du panneau Proprits.
37
Tableau de droite gauche
Proprits des balises Div

L'attribut Direction permet d'indiquer le sens de la balise Div dans les proprits.
En haut
Sens d'une balise Div
38
Nouveauts
Nouveauts (CS5.5) Nouveauts (CS5) Fonctionnalits obsoltes Important : Cette page fournit une liste des nouvelles fonctionnalits de Dreamweaver CS5 et Dreamweaver CS5.5. Cette page n'explique PAS comment utiliser ces fonctionnalits. Pour plus d'informations sur ces nouvelles fonctionnalits, cliquez sur les liens fournis. Vous pouvez galement regarder une prsentation des fonctionnalits de CS5 ou une prsentation des fonctionnalits de CS5.5 sur AdobeTV.
Nouveauts (CS5.5)
Prise en charge de l'affichage sur crans multiples
Haut de la page
Prvisualisez vos conceptions dans des rsolutions d'cran standard, ou utilisez des requtes multimdias pour dfinir la rsolution. Lorsque vous testez pour des appareils qui modifient l'orientation de la page en fonction de la faon dont l'appareil est tenu, utilisez les options paysage et portrait au cours de la prvisualisation. Pour plus d'informations, voir Cration de contenu pour crans et appareils multiples.
Prise en charge des requtes multimdias

Permet d'utiliser des requtes multimdias pour personnaliser l'apparence de votre site pour diffrentes rsolutions d'cran. Pour plus d'informations, voir Cration de requtes multimdias (CS5.5 et versions ultrieures).
Applications Web pour appareils mobiles

Permet de concevoir rapidement une application Web qui fonctionne sur la plupart des appareils mobiles l'aide du widget jQuery Mobile. Pour plus d'informations, reportez-vous la section Cration d'applications Web pour appareils mobiles (CS5.5).
Assemblage d'applications Web pour appareils Android, iPhone et iPad

Permet d'assembler vos applications Web dans Dreamweaver et de les dployer sur des appareils tournant sous Android et iOS. Pour plus d'informations, consultez la section Assemblage d'applications Web sous forme d'applications mobiles natives (CS 5.5).
Prise en charge de HTML5, CSS3 et jQuery

Dreamweaver prend en charge les conseils de code pour HTML5, CSS3, et jQuery. Les mises en forme de dpart sont galement disponibles pour la cration de nouvelles pages HTML5. Dreamweaver prend en charge la fonctionnalit HTML5 d'incorporation de vidos dans les pages HTML. Pour plus d'informations, voir Incorporation de vidos aux pages Web (HTML5). Le panneau CSS a t amlior de faon prendre en charge les proprits CSS3 les plus frquemment utilises. Pour plus d'informations, voir Conseils de code et Amliorations la prise en charge de CSS3 dans le panneau Styles CSS (CS 5.5).
Prise en charge de FTPS

Permet de transfrer les donnes l'aide FTPS. FTPS (FTP sur SSL) fournit une prise en charge du chiffrement et de l'authentification, au contraire de SFTP qui ne en charge que le chiffrement. Pour plus d'informations, voir connexions FTPS (CS5.5).
Prise en charge du Validateur W3C

Permet de crer des pages HTML et XHTML normalises l'aide du validateur W3C dans Dreamweaver. Pour plus d'informations, voir Validation de documents l'aide du validateur W3C (CS 5.5).
Nouveauts (CS5)
Adobe BrowserLab
Haut de la page
Dreamweaver CS5 s'intgre Adobe BrowserLab, l'un des nouveaux services en ligne de CS Live, qui propose une solution prcise et rapide de test de compatibilit inter-navigateurs. BrowserLab permet de prvisualiser les pages Web et le contenu local l'aide de divers outils d'affichage et de comparaison. Voir BrowserLab.
39
Intgration de Business Catalyst

Adobe Business Catalyst est une application hberge qui remplace les outils de bureau traditionnels par une plate-forme centralise pour concepteurs Web. Cette application s'associe Dreamweaver pour vous permettre de crer ce que vous souhaitez, de sites de base reposant sur les donnes de puissantes boutiques en ligne. Voir http://www.adobe.com/go/business_catalyst_get_extension_fr.
Amliorations apportes CSS

Dsactivation/Activation de code CSS La fonction Dsactiver/Activer CSS permet de dsactiver ou de ractiver directement les proprits CSS depuis le panneau Styles CSS. La dsactivation d'une proprit CSS se borne la mettre en commentaire, sans la supprimer. Voir Dsactivation/Activation de code CSS. Inspection CSS Le mode Inspection permet d'afficher visuellement les proprits du modle de bote en feuilles CSS (dont l'espacement, la bordure et la marge) en dtail, sans devoir lire de code ou employer un utilitaire tiers tel que Firebug. Voir Inspection de code CSS en mode En direct. Mises en forme CSS de dpart Dreamweaver CS5 comprend des mises en forme CSS de dpart qui ont t mises jour et simplifies. Les slecteurs descendants complexes des mises en forme CS4 ont t supprims et remplacs par des classes simplifies, plus comprhensibles. Consultez la section Cration d'une page l'aide d'une mise en forme CSS.
Fichiers association dynamique

La fonctionnalit Fichiers association dynamique permet de trouver tous les fichiers et scripts externes requis pour l'assemblage de pages CMS (systme de gestion du contenu) bases sur PHP, ainsi que d'afficher leur nom de fichier dans la barre d'outils Fichiers associs. Par dfaut, Dreamweaver prend en charge la recherche de fichiers pour les cadres CMS Wordpress, Drupal et Joomla! . Voir Ouverture de fichiers association dynamique.
Navigation dans le mode En direct

La navigation dans le mode En direct active les liens dans l'affichage en direct, ce qui permet d'interagir avec les applications ct serveur et les donnes dynamiques. Cette fonctionnalit permet d'entrer une URL afin d'inspecter les pages servies partir d'un serveur Web en direct, ainsi que de modifier les pages consultes si elles existent dans l'un de vos sites dfinis localement. Voir Prvisualisation de pages dans Dreamweaver.
Conseils de code pour classes personnalises PHP

Les conseils de code pour classes personnalises PHP affichent la syntaxe approprie pour les fonctions, objets et constantes PHP, ce qui vous aide taper du code plus prcis. Les conseils de code fonctionnent galement avec vos fonctions et classes personnalises, ainsi qu'avec les cadres tiers tels que le cadre Zend.
Simplification de la configuration d'un site

La bote de dialogue Dfinition du site remise neuf (et dsormais baptise Configuration du site) facilite la configuration d'un site Dreamweaver local, de faon vous permettre d'entamer immdiatement la cration de pages Web. La catgorie Serveur distant permet de spcifier, dans la mme vue, les serveurs distants et les serveurs d'valuation. Consultez les sections Configuration d'une version locale de votre site et Connexion un serveur distant.
Conseils de code spcifiques au site

La fonctionnalit de conseils de code spcifiques au site permet de personnaliser votre environnement de codage lorsque vous utilisez des bibliothques PHP et des cadres CMS tiers, comme WordPress, Drupal, Joomla! ou d'autres cadres. Les fichiers de thme pour les blogs et les autres fichiers et rpertoires PHP personnaliss peuvent tre inclus ou exclus des sources de conseils de code. Voir Site-specific code hints.
Amliorations de la prise en charge de Subversion

Dreamweaver CS5 bnficie d'une prise en charge accrue de Subversion. Vous pouvez dsormais dplacer, copier et supprimer des fichiers localement, puis synchroniser les modifications avec votre rfrentiel SVN distant. La nouvelle commande Rtablir permet de corriger rapidement les conflits d'arborescence ou de revenir la version prcdente d'un fichier. En outre, une nouvelle extension vous permet de prciser quelle version de Subversion vous voulez utiliser pour un projet prcis. Voir Utilisation de Subversion (svn) pour acqurir et archiver des fichiers.
Fonctionnalits obsoltes
Les fonctionnalits suivantes sont devenues obsoltes depuis Dreamweaver CS5 : Rapport de validation d'accessibilit Comportements de serveur ASP/JavaScript
Haut de la page
40
Vrification du comportement JavaScript du navigateur Connexion un serveur FTP/RDS sans dfinir de site Contrle du comportement JavaScript de Shockwave ou de SWF Crer un album photos pour le Web Comportement JavaScript de masquage de menu contextuel Gestion des classes CSS disponibles d'InContext Editing Insrer FlashPaper Insertion/suppression de Mark of the Web Intgration de Microsoft Visual Sourcesafe Barres de navigation Comportement JavaScript Lire le son Menu Afficher les vnements (panneau Comportements) Comportement JavaScript d'affichage de menu contextuel Comportements JavaScript de montage Validation des balises Affichage de Live Data
Informations juridiques | Politique de confidentialit en ligne
41
Didacticiels de prise en main de Dreamweaver

Prise en main et didacticiels Ple de dveloppement Dreamweaver (19 juillet 2012) didacticiel Bienvenue dans le ple de dveloppement Dreamweaver ! Apprenez rapidement matriser Dreamweaver : regardez des vidos qui prsentent les principales nouveauts et apprenez les utiliser, ou mettez-vous immdiatement au travail et crez votre premier site Web statique ou dynamique partir de zro.
Personnalisation d'une barre de menus Spry David Powers (1er janvier 2011) didacticiel Dcouvrez comment rendre une barre de menus standard bien plus lgante par une planification soigneuse et une bonne comprhension de CS5.
Cration de pages mobiles l'aide de Dreamweaver CS5.5 David Karlins (3 aot 2011) didacticiel David Karlins, auteur de Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques , vous guide dans les techniques de Dreamweaver afin de crer des pages Web compatibles avec les priphriques mobiles, base sur jQuery JavaScript.
Cration d'une mise en page avec Dreamweaver CS6 Equipe crative Adobe (19 juillet 2012) article Dans ce didacticiel, vous allez apprendre les principes de base de cration de pages Web, comment concevoir des vignettes et des structures de conception, insrer et mettre en forme de nouveaux composants dans une mise en forme CSS prdfinie, et vrifier la compatibilit avec les navigateurs.
Cration et modification d'un site Web Business Catalyst l'aide de Dreamweaver CS6 Adobe TV (19 juillet 2012) didacticiel vido Explique les fonctionnalits intgres Business Catalyst CS6 et l'utilisation de modles de module partir de cette interface, et prsente quelques nouvelles fonctionnalits comme le code semi-automatique et les fichiers associs.
Didacticiels vido consacrs Dreamweaver Adobe TV (22 fvrier 2013) didacticiel Apprenez les principes de base de Dreamweaver CS6 l'aide des didacticiels Prise en main et Nouvelles fonctionnalits prsents par des experts des produits.
42
Flux dactivits et espace de travail

43
Flux d'activits et espace de travail dans Dreamweaver

L'interface utilisateur a t simplifie dans Dreamweaver CC et les versions ultrieures. Par consquent, il se peut que vous ne trouviez pas certaines options dcrites dans cet article dans Dreamweaver CC et les versions ultrieures. Pour plus dinformations, voir cet article.
Prsentation des flux d'activits de Dreamweaver Prsentation de l'agencement de l'espace de travail Prsentation des lments de l'espace de travail Prsentation de la fentre de document Prsentation de la barre d'outils de document Prsentation de la barre d'outils standard Prsentation de la barre d'outils Rendu du style Prsentation de la barre d'outils Navigation de l'explorateur Prsentation de la barre d'outils Codage Prsentation de la barre d'tat Prsentation de l'inspecteur Proprits Prsentation du panneau Insertion Prsentation du panneau Fichiers Prsentation du panneau Styles CSS Prsentation des repres visuels Utilisateurs de GoLive
Prsentation des flux d'activits de Dreamweaver

Vous pouvez utiliser plusieurs approches pour crer un site Web. Voici l'une des approches possibles : Planification et configuration de votre site
En haut
Dterminez l'emplacement o vos fichiers seront enregistrs et examinez les besoins du site, les profils de ses utilisateurs et les objectifs du site. Il convient galement d'examiner les conditions techniques requises, notamment l'accs utilisateur et les restrictions en matire de navigateurs, de plug-ins ou de tlchargement. Aprs avoir organis vos informations et dfini une structure, vous pouvez commencer la cration du site. (Voir A propos des sites Dreamweaver.) Organisation et gestion des fichiers de votre site Dans le panneau Fichiers, vous pouvez facilement ajouter, supprimer et renommer des fichiers et des dossiers afin de modifier l'organisation en fonction de vos besoins. Dans le panneau Fichiers, vous trouverez de nombreux outils permettant la gestion de votre site, le transfert de vos fichiers vers et depuis un serveur distant, la configuration d'un processus d'archivage/extraction pour empcher l'crasement des fichiers et la synchronisation des fichiers sur vos sites locaux et distants. Utilisez le panneau Actifs pour organiser facilement les actifs sur un site ; vous pouvez ensuite faire glisser la plupart des actifs directement du panneau vers un document Dreamweaver. Dreamweaver vous permet galement de grer certains aspects de vos sites Adobe Contribute . (Voir Gestion des fichiers et des dossiers et Gestion des actifs et des bibliothques.) Mise en forme de vos pages Web Slectionnez la technique de mise en forme de votre choix ou combinez les options de mise en forme de Dreamweaver pour dfinir la prsentation de votre site. Vous pouvez utiliser des lments PA, des styles de positionnement CSS ou des mises en forme CSS prdfinies de Dreamweaver pour dfinir la mise en forme. Les outils de cration de tableaux vous permettent de concevoir des pages rapidement en dessinant, puis en rorganisant la structure des pages. Si vous souhaitez afficher plusieurs lments simultanment dans un navigateur Web, vous pouvez utiliser des cadres pour mettre en forme vos documents. Enfin, vous pouvez crer de nouvelles pages partir d'un modle Dreamweaver, puis actualiser automatiquement leur mise en forme lorsque le modle change. (Voir Cration de pages avec CSS et Mise en forme de pages avec HTML.) Ajout de contenu dans les pages Ajoutez des actifs et des lments de conception, par exemple du texte, des images, des images avec effet de survol, des cartes graphiques, des couleurs, des animations, des sons, des liens HTML, des menus de reroutage, etc. Vous pouvez utiliser les fonctions intgres de cration de page pour les lments tels que les titres et les arrire-plans, taper directement dans la page ou importer du contenu d'autres documents. Dreamweaver fournit galement des comportements permettant d'excuter des tches en rponse des vnements spcifiques, comme par exemple la validation d'un formulaire lorsque le visiteur clique le sur bouton Envoyer ou l'ouverture d'une deuxime fentre de navigateur lorsque le chargement de la page principale est termin. Enfin, Dreamweaver comprend des outils permettant d'optimiser les performances de votre site Web et de tester les pages pour garantir leur compatibilit avec diffrents navigateurs Web. (Voir Ajout de contenu dynamique dans les pages.) Cration de pages par codage manuel
44
Le codage manuel des pages Web constitue une autre approche de la cration de pages. Dreamweaver dispose d'outils d'dition visuelle conviviaux ainsi que d'un environnement de codage sophistiqu. Vous pouvez utiliser l'une ou l'autre de ces mthodes (ou bien les deux) pour crer et modifier vos pages. (Voir Utilisation de code de page.) Configuration d'une application Web pour un contenu dynamique De nombreux sites Web contiennent des pages dynamiques qui permettent aux visiteurs d'afficher les informations stockes dans des bases de donnes, voire d'ajouter ou de modifier des donnes dans certains cas. Pour crer ce type de pages, vous devez d'abord configurer un serveur Web et un serveur d'application, crer ou modifier un site Dreamweaver et vous connecter une base de donnes. (Voir Prparation de la cration de sites dynamiques.) Cration de pages dynamiques Dans Dreamweaver, vous pouvez dfinir diverses sources de contenu dynamique, y compris des jeux d'enregistrements extraits de bases de donnes, des paramtres de formulaire et des composants JavaBeans. Pour ajouter le contenu dynamique une page, il suffit de le faire glisser vers cette dernire. Vous pouvez dfinir une configuration de page qui affiche un ou plusieurs enregistrements la fois (ou plusieurs pages d'enregistrements), ajoute des liens spciaux permettant de passer d'une page d'enregistrements une autre et cre des compteurs d'enregistrements pour faciliter la gestion de ces derniers. Vous pouvez encapsuler la logique d'application ou d'entreprise en faisant appel des technologies telles que Adobe ColdFusion et les services Web. Si vous avez besoin de plus de souplesse, vous pouvez crer des comportements de serveur et formulaires interactifs personnaliss. (Voir Cration de pages dynamiques.) Test et publication Le test de vos pages est un processus continu qui se droule tout au long du cycle de dveloppement. A la fin de ce cycle, vous publiez le site sur un serveur. De nombreux dveloppeurs programment galement une maintenance rgulire pour s'assurer que le site reste jour et est oprationnel. (Voir Acquisition et placement de fichiers depuis ou vers votre serveur.) Vous trouverez un didacticiel vido sur les possibilits offertes par Dreamweaver l'adresse www.adobe.com/go/lrvid4040_dw_fr.
Prsentation de l'agencement de l'espace de travail
En haut
L'espace de travail de Dreamweaver permet d'afficher des documents et les proprits des objets. Il comporte des barres d'outils donnant accs aux oprations les plus courantes, vous permettant ainsi de modifier rapidement vos documents. Espace de travail de Dreamweaver (CS6, 12.1, 12.2)
A. Barre d'outils du document B. Barre d'application C. Fentre de document D. Basculement entre espaces de travail E. Groupes de panneaux F. Slecteur de balises G. Inspecteur Proprits H. Panneau Fichiers Vous trouverez un didacticiel sur l'utilisation des diffrents espaces de travail de Dreamweaver l'adresse www.adobe.com/go/lrvid4042_fr. Espace de travail de Dreamweaver (CC)
45
A. Barre d'outils du document B. Barre d'application C. Fentre de document D. Basculement entre espaces de travail E. Groupes de panneaux F. Panneau Fichiers G. Inspecteur Proprits H. Slecteur de balises
Prsentation des lments de l'espace de travail

L'espace de travail contient les lments suivants:
En haut
Remarque : Dreamweaver propose de nombreux autres inspecteurs, panneaux et fentres. Pour ouvrir les panneaux, inspecteurs et fentres, utilisez le menu Fentre. Ecran d'accueil Permet d'ouvrir un document rcent ou de crer un nouveau document. Vous pouvez galement, partir de l'cran d'accueil, survoler Dreamweaver ou accder un didacticiel. Barre d'application Sur toute la largeur de la partie suprieure de la fentre d'application, cette barre contient une section de commutation d'espace de travail, des menus (Windows uniquement) et d'autres contrles d'application. Barre d'outils du document Contient des boutons permettant d'accder aux diffrents modes d'affichage de la fentre du document (tels que le mode Cration et le mode Code), de dfinir les diffrentes options d'affichage et d'effectuer certaines oprations courantes, telles que la prvisualisation dans un navigateur. Barre d'outils standard Pour afficher la barre d'outils standard, choisissez Affichage > Barres d'outils > Standard. La barre d'outils contient des boutons correspondant aux oprations courantes des menus Fichier et Edition : Nouveau, Ouvrir, Parcourir dans Bridge, Enregistrer, Enregistrer tout, Imprimer le code, Couper, Copier, Coller, Annuler et Rpter.
Barre d'outils de codage (Affiche en mode Code uniquement.) Contient des boutons couvrant la plupart des oprations de codage standard. Barre d'outils Rendu du style Pour afficher la barre d'outils standard, choisissez Affichage > Barres d'outils > Rendu du style. Cette barre d'outils contient des boutons qui vous permettent d'avoir un aperu de votre cration dans diffrents types de mdias si vous utilisez des feuilles de style dpendantes des mdias. Elle contient galement un bouton qui permet d'activer ou de dsactiver les styles CSS (Cascading Style Sheets, feuilles de style en cascade). Remarque : La barre d'outils de rendu de style a t supprime de Dreamweaver CC et des versions ultrieures. Fentre de document Affiche le document que vous crez et modifiez. Inspecteur Proprits Permet de visualiser et de modifier diverses proprits de l'objet ou du texte slectionn. Chaque objet possde des proprits diffrentes. L'inspecteur Proprits n'est pas dvelopp par dfaut dans la prsentation de l'espace de travail Codeur. Slecteur de balises Situ dans la barre d'tat, dans le bas de la fentre de document. Affiche la hirarchie des balises entourant la slection active. Cliquez sur une balise quelconque dans la hirarchie pour la slectionner avec son contenu. Panneaux Permettent de surveiller et de modifier votre travail. Citons par exemple le panneau Insertion, le panneau Styles CSS et le panneau Fichiers. Pour dvelopper un panneau, double-cliquez sur son onglet. Panneau Insertion Contient des boutons permettant d'insrer divers types d'objets, tels que des images, tableaux et lments multimdias dans un document. Chaque objet est une portion de code HTML vous permettant de dfinir diffrents attributs lors de son insertion. Vous pouvez, par exemple, insrer un tableau en cliquant sur le bouton Tableau du panneau Insertion. Si vous le prfrez, vous pouvez insrer les objets partir du menu Insertion au lieu d'utiliser le panneau Insertion.
46
Panneau Fichiers Permet de grer vos fichiers et dossiers, qu'ils fassent partie d'un site Dreamweaver ou qu'ils se trouvent sur un serveur distant. Le panneau Fichiers permet galement d'accder tous les fichiers sur votre disque dur local.
En haut
Prsentation de la fentre de document

La fentre de document affiche le document actif. Pour passer un autre document, cliquez sur son onglet. Vous pouvez choisir parmi les modes d'affichage suivants :
Mode Cration Un environnement de cration pour la mise en forme visuelle des pages, l'dition visuelle et le dveloppement rapide d'applications. Dans ce mode, Dreamweaver affiche une reprsentation visuelle entirement modifiable du document, similaire la reprsentation de la page sur un navigateur. Mode Code Environnement de codage manuel pour rdiger et modifier du code HTML, JavaScript et de langage de serveur, tel que le langage PHP ou CFML (ColdFusion Markup Language), ou tout autre type de code. Mode Code fractionn Version fractionne du mode Code, qui permet de travailler dans diffrentes sections du document en mme temps. Modes Code et Cration Permettent d'obtenir l'affichage Code et l'affichage Cration du document dans une mme fentre. Mode En direct Tout comme le mode Cration, le mode Affichage en direct fournit une reprsentation plus raliste de l'apparence de votre document dans un navigateur. Il permet galement d'interagir avec le document comme vous le feriez dans un navigateur. Le mode Affichage en direct n'est pas modifiable. Vous pouvez toutefois apporter des modifications en mode Code et actualiser l'affichage en direct afin de voir l'impact de ces modifications. Mode Code en direct Uniquement disponible lors de l'affichage d'un document en mode Affichage en direct. Le mode Code en direct affiche le code qu'un navigateur utilise pour excuter la page. Il peut changer de manire dynamique lorsque vous interagissez avec la page en mode Affichage en direct. Le mode Code en direct n'est pas modifiable. Lorsqu'une fentre de document est agrandie (mode d'affichage par dfaut), des onglets s'affichent en haut de la fentre de document indiquant les noms de fichier de tous les documents ouverts. Dreamweaver affiche un astrisque aprs le nom du fichier si vous avez apport des modifications que vous n'avez pas encore enregistres. Dreamweaver affiche galement la barre d'outils Fichiers associs en dessous de l'onglet du document (ou sous la barre de titre du document si vous avez affich les documents dans des fentres spares). Les documents associs sont des fichiers, par exemple CSS ou JavaScript, qui sont associs au fichier actuel. Pour ouvrir l'un de ces fichiers associs dans la fentre de document, cliquez sur son nom dans la barre d'outils Fichiers associs.
Prsentation de la barre d'outils de document
En haut
La barre d'outils Document contient des boutons qui permettent de basculer rapidement entre diffrents mode d'affichage de votre document. La barre d'outils contient galement plusieurs commandes et options courantes permettant d'afficher le document et de le transfrer d'un site local vers un site distant. L'illustration ci-dessous reprsente la barre d'outil Document dveloppe. Barre d'outils du document (CS6, 12.1, 12.2)
A. Afficher le mode code B. Afficher les modes Code et Cration C. Afficher le mode Cration D. Affichage en direct E. Ecrans multiples F. Aperu/Dbogage dans le navigateur G. Gestion de fichiers H. Validation W3C I. Vrification de la compatibilit avec les navigateurs J. Assistances visuelles K. Actualiser le mode Cration L. Titre du document Barre d'outils du document (CC)
A. Afficher le mode Code B. Afficher les modes Code et Cration C. Afficher le mode Cration D. Affichage en direct E. Aperu/Dbogage dans le navigateur F. Titre du document G. Gestion de fichiers Les options suivantes s'affichent dans la barre d'outils de document : Afficher le mode Code Affiche uniquement le mode Code dans la fentre de document. Afficher les modes Code et Cration Fractionne la fentre de document afin d'afficher le mode Code et le mode Cration. Dans ce cas, l'option Mode Cration en haut est active dans le menu Options d'affichage. Afficher le mode Cration Affiche uniquement le mode Cration dans la fentre de document. Remarque : Si vous utilisez certains types de fichiers, tels que XML, JavaScript, CSS ou d'autres types en mode Code, les fichiers ne sont pas visibles en mode Cration, et les boutons Cration et Fractionner sont griss.
47
Mode En direct Affiche une vue du document non modifiable, interactive, base sur un navigateur. Ecrans multiples Afficher la page comme elle se prsenterait sur des crans de tailles diffrentes.
Aperu/Dbogage dans le navigateur Permet de prvisualiser ou de dboguer votre document dans un navigateur. Slectionnez un navigateur dans le menu. Gestion des fichiers Affiche le menu contextuel Gestion des fichiers. Validation W3C Permet de valider le document actif ou la balise slectionne. Vrification de la compatibilit avec les navigateurs Permet de vrifier si votre code CSS est compatible avec diffrents navigateurs. Assistances visuelles Permet d'utiliser diffrents supports visuels en vue de la conception de vos pages. Actualiser mode Cration Actualise le mode Cration du document aprs avoir apport des modifications dans le mode Code. Les modifications apportes dans le mode Code n'apparaissent pas automatiquement dans le mode Cration. Vous devez excuter tout d'abord certaines oprations, comme enregistrer le fichier ou utiliser ce bouton. Remarque : L'actualisation met galement jour les fonctionnalits de code qui dpendent de DOM (Document Object Model), comme la possibilit de slectionner les balises d'ouverture ou de fermeture d'un bloc de code. Titre du document Permet d'attribuer un titre votre document et l'afficher dans la barre de titre du navigateur. Si votre document possde dj un titre, celui-ci s'affiche dans ce champ.
En haut
Prsentation de la barre d'outils standard
La barre d'outils Standard contient des boutons correspondant aux oprations courantes des menus Fichier et Edition : Nouveau, Ouvrir, Parcourir dans Bridge, Enregistrer, Enregistrer tout, Imprimer le code, Couper, Copier, Coller, Annuler et Rpter. Utilisez ces boutons comme vous utiliseriez les commandes de menu quivalentes.
Prsentation de la barre d'outils Rendu du style

Remarque : La barre d'outils de rendu de style a t supprime de Dreamweaver CC et des versions ultrieures.
En haut
La barre d'outils Rendu du style (masque par dfaut) est compose de boutons qui vous permettent d'avoir un aperu de votre cration dans diffrents types de mdia si vous utilisez des feuilles de style dpendantes du mdia. Elle contient galement un bouton qui permet d'activer ou de dsactiver les styles CSS. Pour afficher la barre d'outils standard, choisissez Affichage > Barres d'outils > Rendu du style.
Cette barre d'outil n'est fonctionnelle que si vos documents appliquent des feuilles de styles dpendantes du mdia. Par exemple, votre feuille de style peut comporter une rgle relative au corps du texte pour l'impression et une autre pour l'affichage sur des tlphones portables. Pour plus d'informations sur la cration de feuilles de style dpendantes du mdia, consultez le site Web du World Wide Web Consortium l'adresse www.w3.org/TR/CSS21/media.html. Par dfaut, Dreamweaver affiche votre mise en forme pour le type de mdia cran (qui indique comment une page apparat sur un cran d'ordinateur). Vous pouvez afficher les rendus de type de mdia suivants en cliquant sur les boutons respectifs dans la barre d'outils Rendu du style. Rendu pour le type de support Ecran Indique comment la page apparat sur un cran d'ordinateur. Rendu pour le type de support Impression Indique comment la page apparat sur une feuille de papier imprime. Rendu pour le type de support Tlphone mobile Indique comment la page apparat sur un appareil portatif comme un tlphone mobile et un BlackBerry. Rendu pour le type de support Projection Indique comment la page apparat sur un projecteur. Rendu pour le type de support TTY Indique comment la page apparat sur un appareil de type tltype. Rendu pour le type de support TV Indique comment la page apparat sur un tlviseur. Intervertir l'affichage des Styles CSS Permet d'activer ou de dsactiver les styles CSS. Ce bouton fonctionne indpendamment des autres boutons de mdia. Feuilles de style la cration Permet de dfinir une feuille de style la cration. Pour accder un didacticiel relatif la cration de feuilles de style pour l'impression et les appareils portatifs, consultez le site Web d'Adobe
48
l'adresse www.adobe.com/go/vid0156_fr.
Prsentation de la barre d'outils Navigation de l'explorateur
En haut
La barre d'outils Navigation de l'explorateur devient active dans le mode En direct et vous montre l'adresse de la page que vous examinez dans la fentre de document. Le mode En direct se comporte comme un navigateur ordinaire. Ainsi, mme si vous accdez un site en dehors de votre site local (par exemple http://www.adobe.com), Dreamweaver charge la page dans la fentre de document. Barre d'outils de navigation du navigateur (CS6. 12.1, 12.2)
A. Contrles du navigateur B. Zone d'adresse C. Options d'affichage en direct Barre d'outils de navigation de l'explorateur (CC)
A. Contrles du navigateur B. Zone d'adresse C. Options d'affichage en direct Par dfaut, les liens ne sont pas actifs dans le mode En direct. Si les liens ne sont pas actifs, vous pouvez slectionner le texte d'un lien dans la fentre de document, ou cliquer sur celui-ci, sans accder une page diffrente. Pour tester les liens en mode En direct, vous pouvez permettre un clic unique ou des clics continus, grce aux commandes Suivre le lien et Suivre les liens de manire continue du menu Options d'affichage, droite de la zone d'adresse.
Prsentation de la barre d'outils de codage
En haut
La barre d'outils de codage est compose de boutons qui vous permettent d'effectuer de nombreuses oprations de codage standard (rduction et agrandissement des slections de code, mise en vidence de code non valide, application et suppression de commentaires, mise en retrait de code, insertion de fragments de code rcemment utiliss, etc.). La barre d'outils Codage s'affiche la verticale sur la gauche de la fentre de document. Elle n'est visible que lorsque le mode Code est affich. Barre d'outils de codage (CS6. 12.1, 12.2)
Barre d'outils de codage (CC)
49
Vous ne pouvez pas dtacher ni dplacer la barre d'outils de codage, mais vous pouvez la masquer (Affichage > Barres d'outils > Codage). Vous pouvez galement modifier la barre d'outils de codage pour afficher des boutons supplmentaires (Retour automatique la ligne, Caractres cachs et Retrait auto) ou pour masquer des boutons que vous ne souhaitez pas utiliser. Nanmoins, vous devez pour cela modifier le fichier XML qui gnre la barre d'outils. Pour plus d'informations, voir Extension de Dreamweaver.
Prsentation de la barre d'tat

Barre d'tat (CS6, 12.1, 12.2)
En haut
La barre d'tat, situe dans le bas de la fentre de document, fournit des informations supplmentaires sur le document en cours de cration.
A. Slecteur de balises B. Outil de slection C. Outil Main D. Outil Zoom E. Dfinir le facteur de zoom F. Taille mobile G. Taille tablette H. Taille bureau I. Taille de fentre J. Taille du tlchargement/Temps de tlchargement K. Format de codage Barre d'tat (CC)
A. Slecteur de balises B. Format mobile C. Format tablette D. Format bureau E. Format fentre Slecteur de balises Affiche la hirarchie des balises entourant la slection active. Cliquez sur une balise quelconque dans la hirarchie pour la slectionner avec son contenu. Cliquez sur <body> pour slectionner tout le corps du document. Pour dfinir les attributs class ou id d'une balise dans le slecteur de balises, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Option enfonce (Macintosh) sur la balise et choisissez une classe ou un ID dans le menu contextuel. Outil Slectionner Active et dsactive l'outil Main. Outil Main Permet de cliquer sur le document et de le glisser jusque dans la fentre de document. Outil Zoom et menu Dfinir le facteur de zoom Permettent de dfinir un taux d'agrandissement pour votre document. Menu contextuel Taille de fentre (Non disponible en mode Code.) Permet de redimensionner la fentre du document selon des dimensions prdfinies ou personnalises. Lorsque vous modifiez la taille d'affichage d'une page en mode Cration ou Affichage en direct, seules les dimensions de la vue changent. La taille du document n'est pas modifie. Outre les formats prdtermins et personnaliss, Dreamweaver rpertorie galement les tailles spcifies dans une requte multimdia. Lorsque vous slectionnez une taille correspondant une requte multimdia, Dreamweaver utilise cette requte multimdia pour afficher la page. Vous pouvez galement modifier l'orientation de la page pour prvisualiser la page pour les appareils mobiles sur lesquels la disposition change selon la faon dont l'appareil est tenu. Taille du document et temps de tlchargement Fournit une estimation de la taille du document et du temps de tlchargement de la page, ainsi que la liste de tous les fichiers dpendants, tels que les images et autres fichiers de donnes. Indicateur de codage Affiche le codage du texte du document actuel.
Prsentation de l'inspecteur Proprits
En haut
L'inspecteur Proprits permet d'examiner et de modifier les proprits les plus frquentes de l'lment de la page slectionne, tel que le texte ou un objet insr. Le contenu de l'inspecteur Proprits varie en fonction de l'lment slectionn. Par exemple, si vous slectionnez une image de la page, l'inspecteur Proprits se modifie pour montrer les proprits de l'image (telles que le chemin d'accs au fichier, la largeur et la hauteur de l'image, la bordure autour de l'image, s'il y a lieu, et ainsi de suite). Inspecteur Proprits (CS6, 12.1, 12.2)
50
Inspecteur Proprits (CC)
L'inspecteur Proprits se trouve par dfaut sur le bord infrieur de l'espace de travail. Vous pouvez toutefois le dtacher et en faire un panneau flottant dans l'espace de travail.
Prsentation du panneau Insertion
En haut
Les boutons qui composent le panneau Insertion permettent de crer et d'insrer des objets, tels que des tableaux, des images et des liens. Ces boutons sont organiss en plusieurs catgories que vous pouvez afficher en alternance en choisissant la catgorie dsire dans le menu Catgorie. D'autres catgories s'affichent lorsque le document slectionn contient du code serveur, tel que des documents ASP ou CFML. Panneau Insertion (CS6, 12.1, 12.2)
Panneau Insertion (CC)
Certaines catgories disposent de boutons ouvrant des menus contextuels. Lorsque vous slectionnez une option dans l'un d'eux, l'action associe est attribue par dfaut au bouton. Par exemple, si vous slectionnez Espace rserv pour l'image dans le menu contextuel du bouton Image, la prochaine fois que vous cliquerez sur le bouton Image, insrera un espace rserv pour l'image. Lorsque vous slectionnez une nouvelle option dans l'un de ces menus, l'action attribue par dfaut au bouton change. Le panneau Insertion est organis en diffrentes catgories, comme suit : Catgorie Commun Permet de crer et d'insrer les objets les plus couramment utiliss, comme les images et les tableaux. Catgorie Mise en forme Permet d'insrer des tableaux, des lments de tableau, des balises div , des cadres et des widgets Spry. Vous pouvez choisir deux modes pour les tableaux : Standard (par dfaut) et Dvelopp. Catgorie Formulaires Contient des boutons permettant de crer des formulaires et d'insrer des lments de formulaire, dont des widgets de validation Spry.
51
Catgorie Donnes Permet d'insrer des lments de donnes Spry et d'autres lments dynamiques, tels que des jeux d'enregistrements, des rgions rptes et des formulaires d'insertion et de mise jour d'enregistrements. Catgorie Spry Contient des boutons permettant de crer des pages Spry, avec des objets de donnes Spry et des widgets. Catgorie jQuery Mobile Contient des boutons destins la cration de sites qui utilisent jQuery Mobile.
La catgorie InContext Editing Contient des boutons destins la cration de pages InContext Editing, dont des boutons pour les rgions modifiables, pour les rgions rptes et pour la gestion des classes CSS. Catgorie Texte Permet d'insrer diverses balises de formatage de texte et de liste, telles que b , em, p , h1 et ul. Catgorie Favoris Permet de regrouper et d'organiser, dans un espace commun, les boutons du panneau Insertion que vous utilisez le plus frquemment. Catgories de code serveur Disponibles uniquement pour les pages utilisant un langage serveur spcifique, comme ASP, CFML Basic, CFML Flow, CFML Advanced, et PHP. Ces catgories proposent des objets de type code serveur que vous pouvez insrer en mode Code. Contrairement aux autres panneaux de Dreamweaver, vous pouvez retirer le panneau Insertion de son emplacement d'ancrage par dfaut et le placer l'horizontale, au-dessus de la fentre de document. Dans ce cas, ce panneau se transforme en barre d'outils, mme s'il est impossible de la masquer et de l'afficher comme vous le feriez pour les autres barres d'outils.
Prsentation du panneau Fichiers

Vous pouvez utiliser le panneau Fichiers pour afficher et exploiter les fichiers dans votre site Dreamweaver.
En haut
Lorsque vous affichez des sites, des fichiers ou des dossiers dans le panneau Fichiers, vous pouvez modifier la taille de la zone d'affichage. Vous pouvez galement agrandir ou rduire le panneau Fichiers. Dans sa forme rduite, le panneau Fichiers affiche le contenu du site local, du site distant, du serveur d'valuation ou du rfrentiel SVN sous la forme d'une liste de fichiers. Dans sa forme dveloppe, il affiche d'une part le site local et d'autre part le site distant, le serveur d'valuation ou le rfrentiel SVN. Pour les sites , il est galement possible de personnaliser le panneau Fichiers en modifiant la vue (site local ou distant) qui s'affiche par dfaut dans le panneau rduit. (CS 5.5) Le panneau Fichiers interagit avec le serveur intervalles rguliers afin de mettre jour son contenu. Un message d'erreur s'affiche lorsque vous tentez d'effectuer une action dans le panneau Fichiers alors qu'il excute une telle mise jour automatique. Pour dsactiver l'option de mise jour automatique, ouvrez le menu Options du panneau Fichiers et dsactivez l'option Mise jour automatique du menu Affichage. Pour mettre jour manuellement le contenu du panneau, utilisez le bouton Actualiser dans le panneau. Toutefois, l'tat d'extraction actuel des fichiers n'est mis jour que lorsque la mise jour automatique est active.
Prsentation du panneau Styles CSS
En haut
Le panneau Styles CSS vous permet de suivre les rgles CSS et les proprits qui affectent un lment de page slectionn (mode Actuel), ou l'ensemble des rgles et des proprits qui sont disponibles pour le document (mode Tous). Un bouton bascule plac sur la partie suprieure du panneau Styles CSS vous permet de passer d'un mode l'autre. Le panneau Styles CSS vous permet de modifier les proprits CSS dans les deux modes. Remarque : Le panneau Styles CSS a t remplac par le panneau CSS Designer dans Dreamweaver CC et les versions ultrieures. Voir Panneau CSS Designer pour plus d'informations. Panneau Styles CSS (CS6, 12.1, 12.2)
52
Panneau CSS Designer (CC)
Vous pouvez redimensionner n'importe quel volet en faisant glisser les cadres entre les volets. En mode Actuel, le panneau Styles CSS prsente trois volets : un volet Rsum de la slection qui prsente les proprits CSS de la slection en cours dans le document, un volet Rgles qui prcise l'emplacement des proprits slectionnes (ou une cascade de rgles pour la balise slectionne, selon votre slection), et un volet Proprits qui vous permet de modifier les proprits CSS de la rgle appliques la slection. En mode Tous, le panneau Styles CSS prsente deux volets : un volet Toutes les rgles (en haut) et un volet Proprits (en bas). Le volet Toutes les rgles prsente la liste des rgles dfinies dans le document actif, ainsi que l'ensemble des rgles dfinies dans les feuilles de styles jointes ce document. Le volet Proprits permet de modifier les proprits CSS de toute rgle slectionne dans le volet Toutes les rgles. Toute modification apporte dans le volet Proprits s'applique immdiatement, ce qui vous permet d'avoir un aperu direct de votre travail.
Prsentation des guides visuels

Dreamweaver met votre disposition plusieurs types de guides visuels pour vous aider concevoir vos documents et prvoir approximativement l'aspect qu'ils auront dans un navigateur. Vous pouvez effectuer les oprations suivantes :
En haut
Adapter instantanment la taille de la fentre de document un format d'affichage donn, afin de contrler la disposition des lments sur la page Utiliser un trac d'image en arrire-plan de la page, de manire pouvoir reproduire plus aisment une mise en forme cre dans une application graphique telle que Adobe Photoshop ou Adobe Fireworks.
53
Utiliser des rgles et des guides comme repre visuel pour le positionnement et le redimensionnement prcis des lments de page Utilisez la grille afin d'effectuer un positionnement et un redimensionnement prcis des lments positionnement absolu (PA). Si la fonction d'alignement automatique est active, les lments PA s'alignent automatiquement sur le croisillon de grille le plus proche lorsqu'ils sont dplacs ou redimensionns (d'autres objets, par exemple les images et les paragraphes, ne sont pas aimants par la grille). L'alignement fonctionne mme si la grille n'est pas visible.
Utilisateurs de GoLive
En haut
Si vous utilisez GoLive jusqu'ici et que vous souhaitez passer l'utilisation de Dreamweaver, vous pouvez consultez une prsentation en ligne de l'espace de travail et du flux d'activits dans Dreamweaver ainsi qu'une discussion sur les moyens de faire migrer votre site vers Dreamweaver.
Utilisation de la fentre de document A propos de l'affichage en direct Informations gnrales sur le codage dans Dreamweaver Prvisualisation de pages en mode En direct Dfinition des prfrences de codage Visualisation et modification de contenu d'en-tte Utilisation d'assistances visuelles pour la mise en forme Prvisualisation de pages dans Dreamweaver Insertion de code avec la barre d'outils de codage Dfinition de la taille des fentres et de la vitesse de connexion Zoom avant et zoom arrire Redimensionnement de la fentre de document Dfinition des prfrences de dure et de taille des tlchargements Gestion des fentres et des panneaux Utilisation de l'inspecteur Proprits Utilisation du panneau Insertion Utilisation de fichiers dans le panneau Fichiers Utilisation d'assistances visuelles pour la mise en forme Didacticiel de Dreamweaver pour les utilisateurs de GoLive
54
Rduction du code
A propos de la rduction du code Rduction et dveloppement de fragments de code Collage et dplacement de fragments de code rduits
A propos de la rduction du code
Haut de la page
Vous pouvez rduire ou dvelopper des fragments de code, ce qui permet de voir diffrentes sections du document sans qu'il soit ncessaire d'utiliser la barre de dfilement. Par exemple, pour afficher toutes les rgles CSS dans la balise head qui s'appliquent une balise div plus loin sur la page, vous pouvez rduire tout ce qui se trouve entre les baliseshead et div, de manire voir les deux sections de code en mme temps. Bien que vous puissiez slectionner des fragments de code en mode Cration ou Code, vous ne pouvez rduire le code qu'en mode Code. Remarque : Le code des fichiers crs partir de modles Dreamweaver est toujours affich en mode dvelopp, mme si le modle (*.dwt) contient des fragments de code rduits.
Haut de la page
Rduction et dveloppement de fragments de code
Lorsque vous slectionnez du code, un ensemble de boutons de rduction est affich prs de la slection (symboles Moins sous Windows ; triangles verticaux sur le Macintosh). Cliquez sur ces boutons pour dvelopper et rduire la slection. Lorsque le code est rduit, les boutons de rduction se transforment en boutons de dveloppement (un bouton Plus sous Windows ; triangle horizontal sur le Macintosh). Il peut arriver que le fragment de code slectionn ne soit pas prcisment rduit. En effet, Dreamweaver utilise une technique de rduction intelligente pour rduire les types de slection les plus courants de la faon la plus agrable visuellement. Par exemple, si vous avez slectionn une balise en retrait, puis les espaces d'indentation situs avant cette balise, Dreamweaver ne rduira pas ces espaces d'indentation, car la plupart des utilisateurs s'attendent ce que l'indentation du code soit prserve. Pour dsactiver la rduction intelligente du code et forcer Dreamweaver rduire exactement ce que vous avez slectionn, maintenez la touche Control enfonce avant de rduire le code. Par ailleurs, une icne d'avertissement est affiche ct des fragments de code rduits contenant des erreurs ou du code qui n'est pas gr par certains navigateurs. Vous pouvez galement rduire le code en cliquant tout en maintenant enfonce la touche Alt (Windows) ou Option (Macintosh) sur l'un des boutons de rduction ou le bouton Rduire slection de la barre d'outils de codage. 1. Slectionnez du code. 2. Slectionnez Edition > Fractionnement de code, puis slectionnez l'une des options.
Slection d'un fragment de code rduit

En mode d'affichage Code, cliquez sur le fragment de code rduit. Remarque : En mode Cration, lorsque vous effectuez une slection qui fait partie d'un fragment de code rduit, cette portion de code est automatiquement dveloppe dans le mode Code. Toujours en mode Cration, lorsque vous slectionnez un fragment de code complet, cette portion de code reste rduite dans le mode d'affichage Code.
Affichage du code d'un fragment de code rduit sans le dvelopper

Amenez le pointeur de la souris au-dessus du fragment de code rduit.
Utilisation de raccourcis clavier pour rduire et dvelopper le code

Vous pouvez galement utiliser les raccourcis clavier suivants : Commande Rduire la slection Rduire l'extrieur de la slection Dvelopper la slection Rduire balises entires Rduire extrieur balises entires Dvelopper tout Windows Ctrl+Maj+C Ctrl+Alt+C Ctrl+Maj+E Ctrl+Maj+J Ctrl+Alt+J Ctrl+Alt+E
55
Macintosh Commande+Maj+C Commande+Alt+C Commande+Maj+E Commande+Maj+J Commande+Alt+J Commande+Alt+E
Collage et dplacement de fragments de code rduits

Vous pouvez copier et coller des fragments de code rduits, ou faire glisser des fragments de code rduits afin de les dplacer.
Haut de la page
Copie et collage un fragment de code rduit

1. Slectionnez le fragment de code rduit. 2. Choisissez Edition > Copier. 3. Placez le curseur au point o vous voulez coller le code. 4. Choisissez Edition > Coller. Remarque : Vous pouvez coller du code dans d'autres applications, il est automatiquement dvelopp.
Dplacement d'un fragment de code rduit par glisser-dplacer

1. Slectionnez le fragment de code rduit. 2. Faites glisser la slection vers le nouvel emplacement. Pour faire glisser une copie de la slection, appuyez sur Ctrl (Windows) ou Alt (Macintosh) et faites glisser la slection. Remarque : Il est impossible d'effectuer un glisser-dposer vers d'autres documents. Voir aussi
56
Personnalisation de l'espace de travail de Dreamweaver CS5

Gestion des fentres et des panneaux Enregistrement et basculement dun espace de travail lautre Affichage de documents onglets (Dreamweaver sur Macintosh) Activation des icnes en couleur Masquage et affichage de l'cran d'accueil de Dreamweaver A propos de la personnalisation de Dreamweaver dans les systmes multiutilisateurs Dfinition des prfrences gnrales de Dreamweaver Dfinition des prfrences de police pour les documents dans Dreamweaver Personnalisation des couleurs de surbrillance de Dreamweaver Restauration des prfrences par dfaut
Gestion des fentres et des panneaux
Haut de la page
Pour crer un espace de travail personnalis, vous dplacez et manipulez les fentres de document et les panneaux. Vous pouvez galement enregistrer des espaces de travail, puis passer de lun lautre. Dans Fireworks, renommer les espaces de travail personnaliss peut provoquer un comportement inattendu. Remarque : les exemples suivants sont bass sur Photoshop. Lespace de travail est le mme dans tous les produits.
Rorganisation, ancrage ou dplacement des fentres de document

Les fentres de document comportent des onglets lorsque plusieurs fichiers sont ouverts. Pour modifier lordre des onglets de la fentre de document, faites glisser un onglet de la fentre lemplacement voulu dans le groupe. Pour annuler lancrage dune fentre de document un groupe de fentres, faites glisser longlet de cette fentre hors du groupe. Remarque : dans Photoshop, vous pouvez galement slectionner Fentre > Rorganiser > Afficher dans une fentre flottante pour afficher une seule fentre flottante de document ou Fentre > Rorganiser > Tout afficher dans des fentres flottantes pour afficher simultanment toutes les fentres flottantes de document. Pour plus dinformations, voir la note technique kb405298. Remarque : Dreamweaver ne permet pas dancrer des fentres de document ni dannuler lancrage de ces fentres. Utilisez le bouton Rduire de la fentre de document pour crer des fentres flottantes (sous Windows), ou Fentre > Mosaque verticale pour crer des fentres de document cte cte. Pour plus dinformations sur cette rubrique, recherchez Mosaque verticale dans laide de Dreamweaver. Le flux de travaux diffre lgrement pour les utilisateurs Macintosh. Pour ancrer une fentre de document un groupe de fentres de document distinct, faites glisser cette fentre dans le groupe. Pour crer des groupes de documents empils ou juxtaposs, faites glisser la fentre vers lune des zones de largage situes en haut, en bas ou sur les cts dune autre fentre. Vous pouvez galement slectionner une disposition pour le groupe en utilisant le bouton Disposition de la barre dapplication. Remarque : certains produits ne prennent pas en charge cette fonctionnalit. Cependant, votre produit peut prsenter des commandes Cascade et Mosaque (ou Juxtaposer), sous le menu Fentre, pour vous permettre dorganiser vos documents. Dans un groupe onglets, pour passer un autre document lors du glissement dune slection, faites glisser cette slection sur longlet du document souhait pendant un moment. Remarque : certains produits ne prennent pas en charge cette fonctionnalit.
Ancrage et annulation dancrage de panneaux

Un dock est un ensemble de panneaux ou de groupes de panneaux affichs ensemble, gnralement en position verticale. Pour ancrer et annuler lancrage des panneaux, insrez-les dans le dock et dplacez-les hors du dock. Pour ancrer un panneau, cliquez sur longlet correspondant et faites-le glisser dans le dock, au-dessus, sous ou entre dautres panneaux. Pour ancrer un groupe de panneaux, cliquez sur sa barre de titre (barre vide de couleur unie situe au-dessus des onglets) et faites-le glisser dans le dock. Pour supprimer un panneau ou un groupe de panneaux, faites-le glisser en dehors du dock en cliquant sur longlet ou la barre de titre. Vous pouvez faire glisser llment vers un autre dock ou le rendre flottant.
Dplacement de panneaux
Lorsque vous dplacez des panneaux, des zones de largage en surbrillance bleue apparaissent : il sagit des zones dans lesquelles vous pouvez
57
dplacer le panneau. Vous pouvez, par exemple, dplacer un panneau vers le haut ou vers le bas en le faisant glisser sur la fine zone de largage bleue situe au-dessus ou sous un autre panneau. Si vous faites glisser le panneau vers un emplacement autre quune zone de largage, ce dernier flotte dans lespace de travail. Remarque : la position de la souris active la zone de largage (au lieu de la position du panneau). Si la zone de largage ne s'affiche pas, faites glisser la souris l'emplacement o devrait se situer la zone de largage. Pour dplacer un panneau, faites-le glisser en cliquant sur son onglet. Pour dplacer un groupe de panneaux, faites glisser la barre de titre.
La fine zone de largage bleue indique que le panneau Couleur va tre ancr seul au-dessus du groupe de panneaux Calques. A. Barre de titre B. Onglet C. Zone de largage Pour empcher lancrage dun panneau, appuyez sur la touche Ctrl (Windows) ou Commande (Mac OS) lors de son dplacement. Pour annuler lopration, appuyez sur la touche Echap lors du dplacement du panneau.
Ajout et suppression de panneaux

Lorsque vous supprimez tous les panneaux dun dock, ce dernier disparat. Vous pouvez crer un dock en dplaant les panneaux vers le bord droit de lespace de travail jusqu ce quune zone de largage soit visible. Pour supprimer un panneau, cliquez sur son onglet avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contrle (Mac), puis slectionnez loption Fermer ; vous pouvez galement le dslectionner dans le menu Fentre. Pour ajouter un panneau, slectionnez-le dans le menu Fentre et ancrez-le lemplacement de votre choix.
Manipulation de groupes de panneaux

Pour dplacer un panneau dans un groupe, faites glisser son onglet vers la zone de largage en surbrillance situe dans le groupe.
Ajout dun panneau un groupe Pour rorganiser les panneaux dun groupe, faites glisser longlet du panneau de votre choix vers son nouvel emplacement. Pour rendre un panneau flottant, faites-le glisser en dehors du groupe au moyen de son onglet. Pour dplacer un groupe, faites glisser la barre de titre (zone situe au-dessus des onglets).
Empilage de panneaux flottants

Lorsque vous faites sortir un panneau de son dock et que vous le placez en dehors de toute zone de largage, ce panneau flotte dans lespace de travail. Un panneau flottant peut tre plac nimporte quel endroit dans lespace de travail. Vous pouvez empiler des panneaux ou groupes de panneaux flottants de sorte quils se comportent comme une seule entit lorsque vous faites glisser la barre de titre suprieure.
Panneaux empils flottants Pour empiler des panneaux flottants, cliquez sur un onglet pour faire glisser le panneau correspondant vers la zone de largage situe au bas dun autre panneau.
58
Pour modifier lordre dempilage, cliquez sur un onglet afin de faire glisser le panneau correspondant vers le haut ou vers le bas. Remarque : prenez soin de dposer longlet sur ltroite zone de largage situe entre les panneaux, plutt que sur la large zone de largage situe dans une barre de titre. Pour rendre un panneau ou groupe de panneaux de la pile flottant, dplacez-le hors de la pile au moyen de son onglet ou de sa barre de titre.
Redimensionnement des panneaux

Pour rduire ou agrandir un panneau, un groupe de panneaux ou une pile de panneaux, cliquez deux fois sur un onglet. Vous pouvez galement double-cliquer sur la zone donglets (lespace vide situ ct des onglets). Pour redimensionner un panneau, faites glisser lun de ses cts. Cette mthode de redimensionnement ne fonctionne pas toujours, notamment avec le panneau Couleur de Photoshop.
Rduction et dveloppement des icnes de panneaux

Vous pouvez rduire des panneaux la taille dicnes afin de limiter lencombrement de lespace de travail. Dans certains cas, les panneaux sont rduits de la sorte dans lespace de travail par dfaut.
Panneaux rduits la taille dicnes
Panneaux agrandis Pour rduire ou dvelopper toutes les icnes de panneau dune colonne, cliquez sur la double flche situe dans la partie suprieure du dock. Pour dvelopper une seule icne de panneau, cliquez sur cette dernire. Pour redimensionner les icnes de panneau afin de voir les icnes uniquement (et non les libells), rglez la largeur du dock jusqu ce que le texte ne soit plus visible. Pour afficher nouveau le texte, augmentez la largeur du dock. Pour rduire la taille dune icne un panneau qui a t dvelopp, cliquez sur son onglet, sur son icne ou sur la double flche affiche dans sa barre de titre. Dans certaines applications, si vous slectionnez loption Rduction automatique des panneaux dicnes dans les prfrences dinterface ou les options dinterface utilisateur, une icne de panneau dveloppe est rduite automatiquement lorsque vous cliquez en dehors de cette dernire. Pour ajouter un panneau flottant ou un groupe de panneaux un dock dicnes, faites-le glisser au moyen de son onglet ou de sa barre de titre (les panneaux sont rduits automatiquement la taille dicnes lorsque vous les ajoutez un dock dicnes). Pour dplacer une icne de panneau (ou un groupe dicnes de panneau), faites-la glisser. Vous pouvez dplacer des icnes de panneau vers le haut et vers le bas dans le dock, dans dautres docks (elles apparaissent dans le style du panneau de ce dock) ou en dehors du dock (elles apparaissent sous la forme d'icnes flottantes).
Haut de la page
59
Enregistrement et basculement dun espace de travail lautre

En enregistrant la taille et la position actuelles des panneaux comme espace de travail nomm, vous gardez la possibilit de restaurer cet espace par la suite, et ce, mme si vous avez dplac ou ferm un panneau. Les noms des espaces de travail enregistrs sont visibles dans le slecteur despace de travail de la barre dapplication.
Enregistrement dun espace de travail personnalis

1. Lorsque lespace de travail se trouve dans la configuration que vous souhaitez enregistrer, utilisez lune des mthodes suivantes : (Illustrator) Choisissez la commande Fentre > Espace de travail > Enregistrer lespace de travail. (Photoshop, Illustrator, InCopy) Choisissez la commande Fentre > Espace de travail > Nouvel espace de travail. (Dreamweaver) Choisissez la commande Fentre > Prsentation de lespace de travail > Nouvel espace de travail. (Flash) Choisissez la commande Nouvel espace de travail dans le slecteur despace de travail de la barre dapplication. (Fireworks) Choisissez la commande Enregistrer la prsentation active dans le slecteur despace de travail de la barre dapplication. 2. Attribuez un nom lespace de travail. 3. (Photoshop, InDesign) Slectionnez ensuite une ou plusieurs options dans la section Capture : Position des panneaux Enregistre la position actuelle des panneaux (InDesign uniquement). Raccourcis clavier Enregistre lensemble de raccourcis clavier actuel (Photoshop seulement). Menus ou Personnalisation des menus Enregistre lensemble de menus actuels.
Affichage de lespace de travail ou basculement dun espace de travail lautre

Slectionnez un espace de travail dans le slecteur despace de travail de la barre dapplication. Dans Photoshop, vous pouvez attribuer un raccourci clavier chacun des espaces de travail pour pouvoir passer de lun lautre plus rapidement.
Suppression dun espace de travail personnalis

Choisissez loption Grer les espaces de travail dans le slecteur despace de travail de la barre dapplication, slectionnez lespace de travail, puis cliquez sur la commande Supprimer. (Cette option nest pas disponible dans Fireworks.) (Photoshop, InDesign, InCopy) Slectionnez la commande Supprimer lespace de travail dans le slecteur despace de travail. (Illustrator) Choisissez la commande Fentre > Espace de travail > Grer les espaces de travail, slectionnez lespace de travail, puis cliquez sur licne Supprimer. (Photoshop, InDesign) Choisissez la commande Fentre > Espace de travail > Supprimer lespace de travail, slectionnez lespace de travail, puis cliquez sur le bouton Supprimer.
Restauration de lespace de travail par dfaut

1. Slectionnez lespace de travail de base ou par dfaut laide du slecteur situ dans la barre dapplication. Pour Fireworks, consultez larticle http://www.adobe.com/devnet/fireworks/articles/workspace_manager_panel.html. Remarque : dans Dreamweaver, Designer correspond lespace de travail par dfaut. 2. Pour Fireworks (Windows), supprimez les dossiers suivants : Windows Vista \\utilisateur\<nom utilisateur>\AppData\Roaming\Adobe\Fireworks CS4\ Windows XP \\Documents and Settings\<nom utilisateur>\Application Data\Adobe\Fireworks CS4 3. (PhotoShop, InDesign, InCopy) Choisissez la commande Fentre > Espace de travail > Rinitialiser [Nom de lespace de travail].
(Photoshop) Restauration d'une disposition despace de travail enregistre

Dans Photoshop, les espaces de travail saffichent automatiquement en fonction de leur dernire disposition, mais vous pouvez restaurer la disposition dorigine des panneaux. Pour restaurer un espace de travail individuel, slectionnez Fentre > Espace de travail > Rinitialiser Nom de lespace de travail. Pour restaurer tous les espaces de travail installs avec Photoshop, cliquez sur Restaurer les espaces de travail par dfaut dans les prfrences dinterface. Pour rorganiser l'ordre des espaces de travail de la barre dapplication, faites-les glisser.
Affichage de documents onglets (Dreamweaver sur Macintosh)

60
Haut de la page
Vous pouvez afficher plusieurs documents dans une seule fentre de document avec des onglets qui identifient chacun des documents. Vous pouvez aussi les afficher sous la forme d'une partie de l'espace de travail flottant dans laquelle chaque document s'affiche dans sa propre fentre.
Ouverture d'un document onglets dans une fentre spare

Cliquez en maintenant la touche Ctrl enfonce sur l'onglet, puis slectionnez Dplacer dans une nouvelle fentre dans le menu contextuel.
Rassemblement de documents spars dans des fentres onglets

Choisissez Fentre > Combiner en onglets.
Modification du paramtre de document onglets par dfaut

1. Slectionnez Dreamweaver > Prfrences, puis la catgorie Gnral. 2. Slectionnez ou dslectionnez Ouvrir les documents dans des onglets et cliquez sur OK. Dreamweaver ne modifie pas l'affichage des documents ouverts lorsque vous modifiez les prfrences. En revanche, une fois que vous avez slectionn une nouvelle prfrence, les documents ouverts s'affichent en fonction de cette dernire.
Activation des icnes en couleur
Haut de la page
Par dfaut, Dreamweaver en version CS4 et ultrieures emploie des icnes en noir et blanc qui se transforment en icnes en couleur lorsque vous laissez le pointeur de la souris au-dessus d'elles. Vous pouvez activer les icnes en couleur de manire permanente, mme quand le pointeur de la souris ne se trouve pas au-dessus d'elles. Effectuez l'une des oprations suivantes : Choisissez Affichage > Icnes en couleur. Basculez vers l'espace de travail Classique ou Codeur. Pour dsactiver l'affichage des icnes en couleur, dsactivez l'option Icnes en couleur du menu Affichage, ou passez un espace de travail diffrent.
Masquage et affichage de l'cran d'accueil de Dreamweaver
Haut de la page
L'cran d'accueil s'affiche lorsque vous dmarrez Dreamweaver ou lorsqu'aucun document n'est ouvert. Vous pouvez masquer l'cran d'accueil puis l'afficher de nouveau ultrieurement selon vos besoins. Lorsque l'cran d'accueil est masqu et qu'aucun document n'est ouvert, la fentre de document est vide.
Masquage de l'cran d'accueil

Slectionnez l'option Ne plus afficher dans l'cran d'accueil.
Affichage de l'cran d'accueil

1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2. Dans la catgorie Gnral, activez l'option Afficher l'cran d'accueil.
A propos de la personnalisation de Dreamweaver dans les systmes multiutilisateurs
Haut de la page
Dreamweaver peut tre personnalis selon les besoins, mme dans les systmes multiutilisateurs tels que Windows XP ou Mac OS X. Dreamweaver empche que la configuration personnalise d'un utilisateur n'affecte celle d'un autre. Pour ce faire, la premire fois que vous excutez Dreamweaver sur l'un des systmes multiutilisateurs reconnus, l'application cre des copies de divers fichiers de configuration. Ces fichiers sont enregistrs dans un dossier vous appartenant. Par exemple, sous Windows XP, ils se trouvent dans C:\Documents and Settings\nom d'utilisateur\Application Data\Adobe\Dreamweaver\fr_FR\Configuration, un dossier qui est cach par dfaut. Pour afficher les fichiers et dossiers cachs, choisissez Outils > Options des dossiers dans l'Explorateur Windows, cliquez sur l'onglet Affichage, puis activez l'option Afficher les fichiers et dossiers cachs. Sous Windows Vista, ils se trouvent dans C:\Utilisateurs\nom d'utilisateur\AppData\Roaming\Adobe\Dreamweaver \fr_FR\Configuration, qui est cach par dfaut. Pour afficher les fichiers et dossiers cachs, choisissez Outils > Options des dossiers dans l'Explorateur Windows, cliquez sur l'onglet Affichage, puis activez l'option Afficher les fichiers et dossiers cachs. Sous Mac OS X, ils sont situs dans votre dossier personnel, dans Utilisateurs/nom_utilisateur/Bibliothque/Application Support/Adobe/Dreamweaver /Configuration. Si vous rinstallez ou mettez Dreamweaver jour, Dreamweaver cre automatiquement des copies de sauvegarde des fichiers de configuration existants. Ainsi, si vous avez personnalis manuellement ces fichiers, vos modifications restent disponibles.
Haut de la page
61
Dfinition des prfrences gnrales de Dreamweaver

1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2. Parmi les options suivantes, dfinissez celles de votre choix : Ouvrir les documents dans des onglets Permet d'ouvrir tous les documents dans une seule fentre contenant des onglets que vous utilisez pour passer d'un document l'autre (Macintosh uniquement). Afficher l'cran d'accueil Affiche l'cran d'accueil de Dreamweaver lorsque vous dmarrez Dreamweaver ou qu'aucun document n'est ouvert. Rouvrir les documents au dmarrage Ouvre tous les documents qui taient ouverts lorsque vous avez ferm Dreamweaver. Si cette option n'est pas slectionne, Dreamweaver affiche l'cran d'accueil ou un cran vide au dmarrage (selon les paramtres dfinis pour Afficher l'cran d'accueil). Avertir l'ouverture de fichiers en lecture seule Vous informe lorsque le fichier que vous ouvrez est en lecture seule (verrouill). Vous pouvez dverrouiller/extraire le fichier, l'afficher en lecture seule ou annuler l'action. Activer les fichiers associs Permet de savoir quels fichiers sont associs au document actuel (par exemple des fichiers CSS ou JavaScript). Dreamweaver affiche un bouton pour chaque fichier associ en haut du document. Si vous cliquez sur l'un de ces boutons, le fichier correspondant est ouvert. Dcouvrir les fichiers association dynamique Permet d'indiquer si les fichiers association dynamique doivent apparatre automatiquement dans la barre d'outils Fichiers associs, ou uniquement aprs une interaction manuelle. Vous pouvez galement dsactiver la recherche de fichiers association dynamique. Mettre jour les liens lors de la suppression de fichiers Dtermine ce qui se passe lorsque vous dplacez, renommez ou supprimez un document dans un site. Vous pouvez dfinir cette prfrence de trois faons diffrentes: les liens sont toujours automatiquement mis jour, les liens ne sont jamais mis jour ou un message vous demande s'il convient d'excuter une mise jour (Voir Mettre les liens jour automatiquement.) Afficher la bote de dialogue lors de l'insertion d'un objet Dtermine si Dreamweaver vous invite entrer des informations supplmentaires lorsque vous insrez des images, des tableaux, des animations Shockwave et certains autres objets l'aide du panneau Insertion ou du menu Insertion. Si cette option est dsactive, aucune bote de dialogue ne s'affiche ; dans ce cas, prcisez le fichier source pour les images, le nombre de lignes dans un tableau, etc. dans l'inspecteur Proprits. Lorsque vous insrez des images avec effet de survol ou du code HTML Fireworks, une bote de dialogue s'affiche toujours, quel que soit le rglage de cette option. (Pour remplacer temporairement ce paramtre, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris lorsque vous crez et insrez des objets.) Activer l'entre en ligne deux octets Permet d'entrer un texte deux octets directement dans la fentre de document, si vous utilisez un environnement de dveloppement ou un kit linguistique facilitant la saisie de texte deux octets (les caractres japonais, par exemple). Si cette option est dslectionne, une fentre de saisie de texte s'affiche, dans laquelle vous entrez et convertissez le texte deux octets ; le texte apparat dans la fentre de document aprs avoir t accept. Passer en paragraphe normal aprs le titre Indique qu'en appuyant sur la touche Entre (Windows) ou Retour (Macintosh) la fin d'un paragraphe de titre en mode d'affichage Cration, vous crez un nouveau paragraphe indiqu par une balise p. (Un paragraphe de titre est indiqu par une balise de titre, telle que h1 ou h2.) Lorsque cette option est dsactive, en appuyant sur la touche Entre ou Retour la fin d'un paragraphe de titre, vous crez un nouveau paragraphe indiqu par la mme balise de titre (ce qui vous permet de saisir plusieurs titres la suite les uns des autres, puis d'ajouter les dtails ultrieurement). Autoriser plusieurs espaces conscutifs Indique qu'en entrant deux espaces ou plus en mode d'affichage Cration, vous crez des espaces inscables qui s'affichent sous forme de plusieurs espaces dans un navigateur. (Par exemple, vous pouvez taper deux espaces entre les phrases, tout comme vous le faites sur une machine crire.) Cette option est conue principalement pour les personnes qui utilisent les traitements de texte. Lorsque cette option est dsactive, les espaces multiples sont traits comme des espaces simples (car les navigateurs traitent les espaces multiples comme des espaces simples). Utiliser <strong> et <em> au lieu de <b> et <i> Dtermine que Dreamweaver applique la balise strong lorsque vous effectuez une action qui appliquerait normalement la balise b, et la balise em lorsque vous effectuez une action qui appliquerait normalement la balise i. Ces actions incluent notamment le fait de cliquer sur les boutons Gras ou Italique de l'inspecteur Proprits de texte en mode HTML et de choisir Format > Style > Gras ou Format > Style > Italique. Pour utiliser les balises b et i dans vos documents, dslectionnez cette option. Remarque : Le World Wide Web Consortium recommande d'viter les balises b et i ; les balises strong et em fournissent des informations plus smantiques que les balises b et i. Avertir lors du placement de rgions modifiables dans des balises <p> ou <h1> - <h6> Indique si un message d'avertissement s'affiche lorsque vous enregistrez un modle Dreamweaver prsentant une rgion modifiable dans une balise de paragraphe ou d'en-tte. Le message vous informe que les utilisateurs ne pourront pas crer de paragraphes supplmentaires dans la rgion. Cette option est active par dfaut. Centrer Spcifie si vous voulez centrer des lments l'aide de divalign="center" ou de la balise center lorsque vous cliquez sur le bouton Centrer de l'inspecteur Proprits. Remarque : L'utilisation de ces deux mthodes de centrage n'est plus recommande depuis les spcifications de HTML 4.01. Il est conseill d'utiliser les feuilles de style CSS. Ces mthodes sont encore techniquement applicables la spcification XHTML 1.0 transitionnel, mais ne sont plus reconnues dans les spcifications XHTML 1.0 Strict.
62
Nombre maximum d'tapes d'historique Dtermine le nombre maximal d'tapes que le panneau Historique conserve et affiche. (la valeur par dfaut doit tre suffisante pour la plupart des utilisateurs). Si le nombre d'tapes dpasse la valeur indique, les tapes les plus anciennes sont supprimes. Pour plus d'informations, voir Automatisation des tches. Dictionnaire orthographique Affiche la liste des dictionnaires disponibles. Si un dictionnaire contient plusieurs dialectes ou conventions orthographiques (par exemple, l'anglais britannique et l'anglais amricain), les dits dialectes sont rpertoris individuellement dans le menu contextuel Dictionnaire.
Dfinition des prfrences de police pour les documents dans Dreamweaver
Haut de la page
Le codage d'un document dtermine la faon dont le document s'affiche dans un navigateur. Les prfrences de polices de Dreamweaver vous permettent d'utiliser un texte affich dans la police et la taille de votre choix. Toutefois, les polices slectionnes dans la bote de dialogue Prfrences des polices n'influent que sur la faon dont les documents s'affichent dans Dreamweaver. Elles n'ont aucun impact sur la faon dont ils s'affichent dans le navigateur d'un visiteur. Pour modifier la faon dont les polices s'affichent dans un navigateur, vous devez modifier le texte l'aide de l'inspecteur Proprits ou en appliquant une rgle CSS. Pour plus d'informations sur la dfinition du codage par dfaut pour les nouveaux documents, consultez la section Cration et ouverture de documents. 1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2. Slectionnez la catgorie Polices dans la liste de gauche. 3. Slectionnez le type de codage dsir (par exemple, Occidental ou Japonais) dans la liste Paramtres de la police. Remarque : Pour afficher un document en langue asiatique, il est indispensable que votre systme d'exploitation prenne en charge les polices deux octets. 4. Slectionnez une police et un format utiliser pour chaque catgorie du codage slectionn. Remarque : Pour qu'une police apparaisse dans les menus contextuels correspondants, il est indispensable de l'installer sur votre ordinateur. Par exemple, si vous souhaitez visualiser un texte rdig en japonais, il vous faut installer un jeu de caractres japonais au pralable. Proportionnelle La police proportionnelle est utilise par Dreamweaver pour afficher du texte normal (par exemple, un texte contenu dans des paragraphes, des en-ttes et des tableaux). La valeur par dfaut varie en fonction des polices installes sur votre systme. Pour la plupart des systmes franais, la police proportionnelle par dfaut est Times New Roman 12 pt (moyen) sous Windows et Times 12 pt sous Mac OS. Fixe La police fixe est utilise par Dreamweaver pour afficher du texte dans les balises pre, code et tt. La valeur par dfaut varie en fonction des polices installes sur votre systme. Pour la plupart des systmes franais, la police fixe par dfaut est Courier New 10 pt (petit) sous Windows et Monaco 12 pt sous Mac OS. Mode Code Police utilise dans tout le texte qui apparat dans le mode d'affichage Code et dans l'inspecteur de code. La valeur par dfaut varie en fonction des polices installes sur votre systme.
Personnalisation des couleurs de surbrillance de Dreamweaver
Haut de la page
Les prfrences de surbrillance servent personnaliser les couleurs utilises dans Dreamweaver pour identifier les zones d'un modle, les lments d'une bibliothque, les balises tierces, les lments de mise en forme et le code.
Modification de la couleur de surbrillance

1. Choisissez Edition > Prfrences, puis la catgorie Surbrillance. 2. Cliquez sur le slecteur de couleur situe prs de l'objet dont vous souhaitez modifier la couleur de surbrillance, puis utilisez la palette de couleur pour slectionner une nouvelle couleur. Vous pouvez galement saisir une valeur hexadcimale.
Activation ou dsactivation de la surbrillance d'un objet

1. Choisissez Edition > Prfrences, puis la catgorie Surbrillance. 2. Cochez ou dcochez l'option Afficher situe prs de l'objet dont vous souhaitez activer ou dsactiver la couleur de surbrillance.
Restauration des prfrences par dfaut

Pour connatre les procdures de rtablissement des prfrences par dfaut de Dreamweaver, consultez la Tech Note 83912. Voir aussi Vue d'ensemble de la prsentation de l'espace de travail
Haut de la page
63
Panneaux de contenu dynamique

Panneau Panneau Panneau Panneau Liaisons Comportements de serveur Bases de donnes Composants
Panneau Liaisons
Haut de la page
Le panneau Liaisons vous permet de dfinir et de modifier des sources de contenu dynamique, d'ajouter du contenu dynamique une page et d'appliquer des formats de donnes du texte dynamique. Ce panneau permet d'effectuer les oprations suivantes : Dfinition de sources de contenu dynamique Ajout de contenu dynamique dans les pages Modification ou suppression de sources de contenu Utilisation de formats de donnes prdfinis Association de sources de donnes XML Affichage des donnes XML dans des pages XSLT Paramtres d'URL Dfinition de variables de session Dfinition de variables d'application dans ASP et ColdFusion Dfinition de variables de serveur Mise en mmoire cache de sources de contenu Copie d'un jeu d'enregistrements d'une page vers une autre Cration d'attributs HTML dynamiques
Panneau Comportements de serveur

Ce panneau permet d'effectuer les oprations suivantes : Affichage d'enregistrements d'une base de donnes Dfinition de sources de contenu dynamique Cration de pages principale et de dtails en une seule opration Cration de pages de recherche et de rsultats Cration d'une page d'insertion d'enregistrements Cration d'une page de mise jour d'enregistrement Cration d'une page de suppression d'enregistrement Cration d'une page accs restreint Cration d'une page d'enregistrement Cration d'une page d'ouverture de session Cration d'une page accs restreint Ajout d'une procdure stocke (ColdFusion) Suppression de contenu dynamique Ajout de comportements de serveur personnaliss
Haut de la page
Ce panneau vous permet d'ajouter les comportements de serveur Dreamweaver sur une page, de les modifier et d'en crer de nouveaux.
64
Panneau Bases de donnes
Haut de la page
Le panneau Bases de donnes vous permet de crer des connexions de base de donnes, d'inspecter les bases de donnes et d'insrer un code de base de donnes dans vos pages. Ce panneau vous permet de visualiser votre base de donnes et de vous y connecter : Affichage de votre base de donnes dans Dreamweaver Connexions aux bases de donnes pour les dveloppeurs ColdFusion Connexions aux bases de donnes pour les dveloppeurs ASP Connexions aux bases de donnes pour les dveloppeurs PHP
Panneau Composants
Le panneau Composants vous permet de crer et d'inspecter les composants et d'insrer un code de composant dans vos pages. Remarque : Ce panneau ne s'ouvre pas en mode Cration. Ce panneau permet d'effectuer les oprations suivantes : Utilisation de composants ColdFusion
Haut de la page
65
Amliorations la prise en charge de CSS3 dans le panneau Styles CSS (CS 5.5)
Application de proprits CSS3 l'aide du panneau contextuel Spcification de plusieurs ensembles de valeurs Recherche de proprits dans le mode Catgories Garantie de la conformit avec les navigateurs Prvisualisation des modifications en mode Affichage en direct Un panneau contextuel a t ajout au panneau CSS pour les proprits suivantes : text-shadow box-shadow border-radius border-image Les options disponibles dans le panneau contextuel vous garantissent d'appliquer la proprit correctement, mme si vous ne matrisez pas leur syntaxe W3C.
Le panneau contextuel affichant les options de la proprit CSS3 border-image
Application de proprits CSS3 l'aide du panneau contextuel
Haut de la page
Cliquez sur l'icne + ' correspondant ces proprits. Utilisez les options du panneau contextuel pour appliquer la proprit.
Spcification de plusieurs ensembles de valeurs
Haut de la page
Les proprits CSS3 telles que text-shadow prennent en charge plusieurs ensembles de valeurs. Par exemple : text-shadow: 3px 3px #000, -3px 3px #0f0; Lorsque vous spcifiez plusieurs ensembles de valeurs en mode Code et que vous ouvrez le panneau contextuel des fins d'dition, seul le premier ensemble de valeurs s'affiche. Si vous modifiez cet ensemble de valeurs dans le panneau contextuel, seul le premier ensemble de valeurs dans le code est affect. Les autres ensembles de valeurs ne sont pas affects et sont appliqus comme indiqu dans le code.
Recherche de proprits dans le mode Catgories
Haut de la page
En mode Catgories, text-shadow se trouve dans la catgorie Police. box-shadow, border-radius et border-image sont rpertoris dans la catgorie Bordure.
66
Garantie de la conformit avec les navigateurs
Haut de la page
Dreamweaver CS 5.5 prend galement en charge un dploiement spcifique aux navigateurs (webkit, Mozilla) des proprits box-shadow, borderradius et border-image. En mode Catgories, utilisez les options de la catgorie de navigateur approprie afin de garantir la conformit de ces proprits dans le navigateur en question. Par exemple, pour assurer la compatibilit avec la mise en uvre Mozilla de la proprit border-image, modifiez -mozborder-image dans la catgorie Mozilla.
Prvisualisation des modifications en mode Affichage en direct
Haut de la page
Les modifications apportes aux proprits CSS ne sont pas affiches en mode Cration. Passez au mode Affichage en direct pour prvisualiser les modifications. Vous pouvez galement apporter des modifications rapides aux proprits CSS3 dans le mode Affichage en direct. Ces modifications sont immdiatement refltes dans ce mode. Les proprits CSS3 suivantes sont prises en charge en mode Affichage en direct : text-shadow border-radius -webkit-box-shadow -webkit-border-image
Adobe recommande
Vous souhaitez partager un didacticiel ?
Prise en charge amliore de CSS3 dans DW CS5.5

Preran Kurnool Prise en charge de Text-shadow, Boxshadow, Border-radius et Border-image
67
Optimisation de l'espace de travail pour le dveloppement visuel

Affichage de panneaux de dveloppement d'applications Web Affichage de votre base de donnes dans Dreamweaver Aperu des pages dynamiques dans un navigateur Limitation des informations de base de donnes affiches dans Dreamweaver Configuration de l'inspecteur Proprits pour les procdures stockes ColdFusion et les commandes ASP Options de nom du champ
Affichage de panneaux de dveloppement d'applications Web
Haut de la page
Slectionnez la catgorie Donnes du menu Catgorie du panneau Insertion afin d'afficher un groupe de boutons permettant d'ajouter du contenu dynamique et des comportements de serveur votre page. Le nombre et le type de boutons apparaissant varient en fonction du type de document ouvert dans la fentre de document. Amenez la souris audessus d'une icne afin d'afficher une infobulle dcrivant la fonction de ce bouton. Le panneau Insertion comprend des boutons qui permettent d'ajouter les lments suivants sur la page : Jeu d'enregistrements Texte ou tableaux dynamiques Barres de navigation d'un enregistrement Si vous passez en mode Code (Affichage > Code), il est possible que des panneaux supplmentaires apparaissent dans la catgorie correspondante du panneau Insertion, ce qui vous permet d'insrer du code dans la page. Par exemple, si vous visionnez une page ColdFusion en mode Code, un panneau CFML devient disponible dans la catgorie CFML du panneau Insertion. Plusieurs panneaux vous permettent de crer des pages dynamiques : Slectionnez le panneau Liaisons (Fentre > Liaisons) pour dfinir des sources de contenu dynamique pour votre page et ajouter le contenu dans la page. Slectionnez Comportements du serveur (Fentre > Comportements du serveur) pour ajouter une logique ct serveur dans vos pages dynamiques. Slectionnez le panneau Bases de donnes (Fentre > Bases de donnes) pour explorer les bases de donnes ou crer des connexions aux bases de donnes. Slectionnez le panneau Composants (Fentre > Composants) afin d'inspecter, d'ajouter ou de modifier du code pour des composants ColdFusion. Remarque : Le panneau Composants n'est activ que si vous ouvrez une page ColdFusion. Un comportement de serveur est l'ensemble des instructions insres dans une page dynamique au moment de la cration et excutes sur le serveur lors de l'excution. Vous trouverez un didacticiel consacr la configuration de l'espace de travail de dveloppement l'adresse www.adobe.com/go/vid0144_fr.
Affichage de votre base de donnes dans Dreamweaver

Une fois la connexion la base de donnes ralise, vous pouvez afficher sa structure et ses donnes dans Dreamweaver. 1. Ouvrez le panneau Base de donnes (Fentre > Bases de donnes).
Haut de la page
Le panneau Base de donnes affiche toutes les bases de donnes pour lesquelles vous avez cr des connexions. Si vous dveloppez un site ColdFusion, le panneau affiche toutes les bases de donnes pour lesquelles des sources de donnes ont t dfinies dans ColdFusion Administrator. Remarque : Dreamweaver recherche le site en cours sur le serveur ColdFusion dfini. Si aucune base de donnes n'apparat dans le panneau, vous devez crer une connexion de base de donnes. 2. Pour afficher les tables, les procdures stockes et les modes dans la base de donnes, cliquez sur le signe plus (+) situe en regard de la connexion dans la liste. 3. Pour afficher les colonnes de la table, cliquez sur un nom de table. Les icnes des colonnes refltent le type de donnes et indiquent la cl primaire de la table.
68
4. Pour afficher les donnes 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 Contrle (Macintosh) et choisissez Afficher les donnes dans le menu droulant.
Aperu des pages dynamiques dans un navigateur
Haut de la page
Les dveloppeurs d'applications Web dboguent souvent leurs pages en les vrifiant rgulirement dans un navigateur Web. Vous pouvez afficher rapidement vos pages dynamiques dans un navigateur sans avoir les tlcharger manuellement sur un serveur au pralable. Pour lancer un aperu des pages dynamiques, vous devez complter la catgorie Serveur d'valuation de la bote de dialogue Dfinition du site. Vous pouvez configurer Dreamweaver pour utiliser des fichiers temporaires la place des fichiers d'origine. Avec cette option, Dreamweaver excute 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 dfinir cette option, slectionnez Edition > Prfrences > Aperu dans le navigateur. L'option Aperu dans le navigateur ne tlcharge pas les pages associes (pages de rsultats ou d'informations dtailles), les fichiers dpendants (tels que fichiers d'image) ou les inclusions ct serveur. Pour tlcharger un fichier manquant, choisissez Fentre > Site pour ouvrir le panneau Site, slectionnez le fichier dans Dossier local et cliquez sur la flche haut bleue de la barre d'outils pour copier le fichier dans le dossier du serveur Web.
Limitation des informations de base de donnes affiches dans Dreamweaver
Haut de la page
Les utilisateurs chevronns travaillant avec des systmes de base de donnes de grande envergure tels qu'Oracle devront limiter le nombre d'lments de base de donnes rcuprs par Dreamweaver au moment de la conception. Une base de donnes Oracle peut contenir des lments que Dreamweaver ne peut pas traiter au moment de la conception. Vous pouvez crer un schma dans Oracle, puis l'utiliser dans Dreamweaver pour filtrer les lments indsirables au moment de la conception. Remarque : Vous ne pouvez pas crer de schma ou de catalogue dans Microsoft Access. D'autres utilisateurs peuvent avoir intrt limiter la quantit d'informations rcupres par Dreamweaver au moment de la conception. Certaines bases de donnes contiennent des douzaines, voire des centaines de tableaux, et vous pouvez prfrer ne pas tous les rpertorier tous pendant que vous travaillez. Un schma ou catalogue peut limiter le nombre d'lments de base de donnes rcuprs au moment de la conception. Pour commencer, crez un schma ou un catalogue dans votre application de base de donnes pour pouvoir ensuite l'appliquer dans Dreamweaver. Consultez la documentation de votre systme de base de donnes ou consultez votre administrateur systme. Remarque : Vous ne pouvez pas appliquer un schma ou un catalogue dans Dreamweaver si vous dveloppez une application ColdFusion, 1. Ouvrez une page dynamique dans Dreamweaver, puis la fentre Bases de donnes (Fentre > Bases de donnes). Si la connexion de base de donnes existe, cliquez sur cette connexion dans la liste avec le bouton droit de la souris (Windows) ou en appuyant sur le bouton Contrle (Macintosh) et choisissez Modifier la connexion dans le menu droulant. Si la connexion n'existe pas, cliquez sur le bouton Plus (+) en haut du panneau afin de la crer. 2. Cliquez sur Avanc dans la bote de dialogue de la connexion. 3. Indiquez votre schma ou catalogue et cliquez sur OK.
Configuration de l'inspecteur Proprits pour les procdures stockes ColdFusion et les commandes ASP
Modifiez la procdure stocke slectionne. Les options disponibles dpendent de la technologie de serveur utilise.
Haut de la page
Modifiez les options votre convenance. Lorsque vous slectionnez une nouvelle option dans l'inspecteur, Dreamweaver met la page jour.
Haut de la page
Options de nom du champ
Cet inspecteur Proprits s'affiche lorsque Dreamweaver rencontre un type d'entre inconnu. En gnral, cela est d une erreur de frappe ou autre problme li la saisie de donnes. Si vous modifiez le type de champ dans l'inspecteur Proprits et placez une valeur reconnue par Dreamweaver (par exemple, si vous corrigez la faute d'orthographe) l'inspecteur Proprits se met jour pour afficher les proprits du type reconnu. Dfinissez les options suivantes dans l'inspecteur Proprits : Nom du champ Attribue un nom au champ. Cette zone est obligatoire et le nom doit tre unique. Type Dfinit le type d'entre du champ. Le contenu de cette zone reflte la valeur du type d'entre apparaissant actuellement dans votre code source HTML. Valeur Dfinit la valeur du champ. Paramtres Ouvre la bote de dialogue Paramtres pour que vous puissiez visualiser les attributs actuels du champ et ajouter ou supprimer des attributs. Voir aussi
69
Didacticiel consacr l'espace de travail de dveloppement Configuration d'un serveur d'valuation
70
Dfinition des prfrences de codage

A propos des prfrences de codage Dfinition de l'apparence du code Modification du format du code Dfinition des prfrences de correction de code Dfinition des couleurs du code Utilisation d'un diteur externe
A propos des prfrences de codage
Haut de la page
Vous pouvez dfinir des prfrences de codage, par exemple le formatage du code ou la mise en couleurs, en fonction de vos besoins. Remarque : Pour dfinir les prfrences avances, utilisez l'diteur de la bibliothque de balises (consultez la section Gestion des bibliothques de balises).
Haut de la page
Dfinition de l'apparence du code
Le menu Affichage > Options d'affichage de code permet de configurer le renvoi la ligne des mots, l'affichage du numro des lignes de code, la mise en surbrillance du code HTML incorrect, la coloration de la syntaxe des lments de code, la mise en retrait du code, ainsi que l'affichage des caractres masqus. 1. Affichez le document dans le mode Code ou l'Inspecteur de code. 2. Effectuez l'une des oprations suivantes : Choisissez Affichage > Code et cration Cliquez sur le bouton Options d'affichage dans la barre d'outils situe en haut du mode Code ou de l'Inspecteur de code.
3. Activez ou dsactivez l'une des options suivantes : Renvoi la ligne Renvoie le code la ligne pour le rendre visible sans qu'il soit ncessaire de le faire dfiler horizontalement. Cette option n'insre aucun saut de ligne ; elle a pour seule fonction de simplifier la consultation du code. Numros de lignes Affiche le numro des lignes de code sur le ct. Caractres masqus Permet d'afficher les caractres spciaux au lieu d'un simple espace blanc. Par exemple, un point apparat pour masquer chaque espace, un double chevron remplace chaque tabulation, et une marque de paragraphe remplace chaque saut de ligne. Remarque : Les retours la ligne contextuels que Dreamweaver utilise pour le renvoi du texte la ligne ne sont pas symboliss par une marque de paragraphe. Surligner le code non valide Active, dans Dreamweaver, le surlignage en jaune du code HTML non valide. Ds la slection d'une balise incorrecte, l'inspecteur Proprits affiche des instructions pour corriger l'erreur. Coloration de la syntaxe Active ou dsactive la mise en couleurs du code. Pour plus d'informations sur la modification des couleurs appliquer, consultez la section Dfinition des couleurs du code. Retrait auto Automatise la mise en retrait du code lorsque vous appuyez sur la touche Entre pendant la rdaction du code. La nouvelle ligne de code s'aligne au mme niveau que la ligne qui la prcde. Pour plus d'informations sur la modification de l'espacement du retrait, consultez l'option Taille de tabulation dans Modification du format du code.
Modification du format du code
Haut de la page
Vous pouvez modifier l'aspect de votre code en dfinissant des prfrences de formatage telles que la mise en retrait, la longueur de ligne et la casse des noms de balises et d'attributs. Toutes les options de formatage de code, l'exception de l'option Remplacer la casse de, ne s'appliquent automatiquement qu'aux nouveaux documents et aux additions des documents que vous crez par la suite. Pour modifier le formatage d'un document HTML existant, ouvrez ce document puis cliquez sur Commandes > Appliquer le format source. 1. Choisissez Edition > Prfrences. 2. Slectionnez la catgorie Format du code dans la liste de gauche. 3. Parmi les options suivantes, dfinissez celles de votre choix : Retrait Indique si le code gnr par Dreamweaver doit tre mis en retrait (en conformit avec les rgles de retrait dfinies dans ces
71
prfrences) ou non. Remarque : La majorit des options de retrait de cette bote de dialogue ne s'appliquent qu'au code gnr par Dreamweaver et non au code entr par vos soins. Pour que chaque nouvelle ligne entre s'aligne au mme niveau que la prcdente, utilisez l'option Retrait auto dans les options d'affichage du mode Code. Pour plus d'informations, consultez la section Dfinition de l'apparence du code. Avec (Zone de texte ou menu contextuel) Spcifie le nombre d'espaces ou de tabulations que Dreamweaver doit utiliser afin de mettre en retrait le code gnr. Par exemple, si vous tapez 3 dans la zone de texte et si vous slectionnez Tabulations dans le menu contextuel, le code gnr par Dreamweaver sera mis en retrait de trois tabulations chaque niveau de mise en retrait. Taille de la tabulation Dtermine la taille, en caractres, de chaque tabulation dans le mode Code. Par exemple, si cette taille est dfinie sur 4, chaque tabulation s'affiche dans le mode Code sous la forme d'un espace long de 4 caractres. De plus, si la taille du retrait est dfinie sur 3 et que les caractres utiliss sont des tabulations, le code gnr par Dreamweaver est mis en retrait de trois tabulations par niveau de mise en retrait, ce qui correspond un espace de 12 caractres en mode Code. Remarque : Dreamweaver effectue les mises en retrait l'aide de tabulations ou d'espaces mais ne convertit pas une srie d'espaces en tabulation lors de l'insertion de code. Type de saut de ligne Permet d'indiquer le type de serveur distant (Windows, Macintosh ou UNIX) qui hbergera votre site. Le choix du type de caractres de saut de ligne appropri (CR, CR/LF, LF) garantit que votre code source HTML s'affiche correctement lorsqu'il est affich partir du serveur distant. Ce paramtre est galement utile lorsque vous travaillez avec un diteur de texte externe qui ne reconnat que certains types de retours de chariot. Par exemple, utilisez CR/LF (Windows), si votre diteur de texte est le Bloc-notes de Windows, et CR (Macintosh) s'il s'agit de SimpleText. Remarque : Pour les serveurs auxquels vous vous connectez via FTP, cette option ne s'applique qu'en mode de transfert binaire ; le mode de transfert ASCII de Dreamweaver ignore cette option. Si vous tlchargez (en rception) des fichiers en mode ASCII, Dreamweaver dfinit les sauts de ligne en fonction du systme d'exploitation de votre ordinateur ; si vous transfrez des fichiers en mode ASCII, les sauts de ligne sont toujours dfinis comme CR/LF. Casse de balise par dfaut et casse d'attribut par dfaut Contrlez la capitalisation des noms de balises et d'attributs. Ces options s'appliquent aux balises et aux attributs que vous insrez ou que vous modifiez dans le mode Cration, mais pas aux balises ou attributs que vous entrez directement dans le mode Code (ou l'Inspecteur de code), ni aux balises ou attributs dj contenus dans un document que vous ouvrez (sauf, dans ce dernier cas, si vous avez galement activ l'une des options Remplacer la casse de). Remarque : Cette prfrence s'applique uniquement aux pages HTML. Dreamweaver l'ignore pour les pages XHTML tant donn que les balises et les attributs en majuscules sont incorrects dans XHTML. Remplacer la casse de : Balises et Attributs Spcifie s'il faut toujours convertir les noms de balises et d'attributs dans la casse spcifie, mme lors de l'ouverture d'un document HTML existant. Lorsque vous activez l'une de ces options et que vous cliquez sur OK pour fermer la bote de dialogue, les balises et les attributs du document actif sont immdiatement convertis dans la casse indique et il en sera de mme dans tous les documents que vous ouvrirez par la suite (du moins tant que vous n'aurez pas dsactiv cette option). Les balises et les attributs que vous tapez en mode Code ou dans Quick Tag Editor ou bien que vous insrez partir du panneau Insertion, sont galement convertis dans la casse spcifie. Par exemple, si vous voulez que les noms des balises soient toujours convertis en minuscules, spcifiez minuscules dans l'option Casse de balise par dfaut et activez l'option Remplacer la casse de : Balises. Lorsque vous ouvrez ensuite un document contenant des noms de balises en majuscules, Dreamweaver les convertit en minuscules. Remarque : D'anciennes versions du code HTML permettaient d'crire les noms d'attributs et les balises en majuscules ou en minuscules, mais le XHTML requiert des minuscules. L'usage du XHTML tant de plus en plus rpandu, il est conseill d'utiliser des minuscules pour ces lments. Balise TD : Ne pas inclure de saut de ligne dans la balise TD Rsout un problme de rendu qui se rencontre dans certains anciens navigateurs, si un espace blanc ou des sauts de ligne sont placs immdiatement aprs une balise <td> ou juste avant une balise </td>. Si vous activez cette option, Dreamweaver ne place pas de saut de ligne aprs une balise <td> ou avant une balise </td>, mme si le formatage de la bibliothque de balises indique qu'un saut de ligne devrait tre insr. Formatage avanc Permet de dfinir des options de mise en forme pour le code CSS (Cascading Style Sheets, feuilles de style en cascade) et pour les diffrents attributs et balises dans l'diteur de la bibliothque de balises. Espace blanc (version japonaise uniquement) Permet de slectionner une espace inscable ( ) ou une espace Zenkaku pour votre code HTML. L'espace blanc slectionn avec cette option est utilis pour les balises vides lors de la cration d'un tableau et lorsque l'option Autoriser plusieurs espaces conscutives est active dans les pages de codage japonaises.
Dfinition des prfrences de correction de code
Haut de la page
Les prfrences de correction de code permettent de spcifier les prfrences de modification de code par Dreamweaver lors de l'ouverture de documents, lorsque vous copiez et collez des lments de formulaires ou que vous entrez des valeurs et adresses URL l'aide des outils (par exemple, l'inspecteur Proprits). Ces prfrences sont sans effet lorsque vous modifiez du code HTML ou des scripts dans le mode Code. Si vous dsactivez ces options de correction, les lments de marquage non valides sont affichs dans la fentre de document pour le code HTML qu'il aurait corrig. 1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2. Slectionnez la catgorie Correction du code dans la liste de gauche. 3. Parmi les options suivantes, dfinissez celles de votre choix : Corriger les balises incorrectement imbriques et non fermes Corrige les balises qui se chevauchent. Par exemple,
72
<b><i>texte</b></i> est rcrit comme <b><i>texte</i></b>. Cette option insre galement des guillemets et des crochets de fermeture s'ils sont absents. Renommer les lments de formulaire lors du collage Garantit l'absence de noms d'objets de formulaire en double. Cette option est active par dfaut. Remarque : Contrairement d'autres options de cette bote de dialogue de prfrences, cette option ne s'applique pas l'ouverture d'un document, mais uniquement lorsque vous copiez et collez un lment de formulaire. Supprimer les balises de fermeture superflues Supprime les balises de fermeture auxquelles aucune balise d'ouverture ne correspond. M'avertir lors de la correction ou de la suppression de balises Affiche un rcapitulatif des codes HTML techniquement non valides que Dreamweaver a tent de corriger. Ce rcapitulatif indique l'emplacement du problme ( l'aide des numros de ligne et de colonne), pour vous permettre de vrifier la correction et veiller ce qu'elle produise l'effet voulu. Ne jamais corriger le code : Dans les fichiers avec extensions. Permet d'empcher Dreamweaver de corriger le code dans les fichiers portant les extensions indiques. Cette option est particulirement utile pour les fichiers contenant des balises propritaires. Coder <, >, & et " dans les valeurs d'attributs l'aide de & Garantit que les valeurs d'attribut entres ou modifies l'aide des outils Dreamweaver (par exemple, l'inspecteur Proprits) ne contiennent que des caractres autoriss. Cette option est active par dfaut. Remarque : Cette option et les options suivantes ne s'appliquent pas aux adresses URL entres dans le mode Code. De plus, ces options n'entranent pas de modification dans le code dj prsent dans un fichier. Ne pas coder les caractres spciaux Empche toute modification des adresses URL par Dreamweaver en vue de n'utiliser que des caractres autoriss. Cette option est active par dfaut. Coder caractres spciaux dans les URL l'aide de &# Garantit que, lorsque vous entrez ou modifiez des adresses URL l'aide des outils Dreamweaver (par exemple, l'inspecteur Proprits), ces URL ne contiennent que des caractres autoriss. Coder caractres spciaux dans les URL l'aide de % Fonctionne de faon identique l'option ci-dessus, mais utilise une autre mthode pour coder les caractres spciaux. Cette mthode de codage ( l'aide du signe %) offre une meilleure compatibilit avec les navigateurs plus anciens, mais ne se montre pas aussi efficace avec les caractres utiliss dans certaines langues.
Dfinition des couleurs du code
Haut de la page
Utilisez les prfrences de coloration du code pour spcifier les couleurs des principales catgories de balises et d'lments de code, par exemple les balises lies la mise en forme ou les identificateurs JavaScript. Pour dfinir les prfrences de coloration d'une balise spcifique, modifiez sa dfinition dans l'diteur de la bibliothque de balises. 1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2. Slectionnez la catgorie Coloration du code dans la liste de gauche. 3. Slectionnez un type de document dans la liste Type de document. Les modifications que vous apportez aux prfrences de coloration du code influeront sur tous les documents de ce type. 4. Cliquez sur le bouton Modifier le modle de coloration. 5. Dans la bote de dialogue Modifier le modle de coloration, choisissez un lment de code dans la liste Styles, puis dfinissez la couleur du texte, la couleur d'arrire-plan et ventuellement le style (gras, italique ou soulign). L'chantillon de code affich dans le volet d'aperu est modifi pour correspondre aux nouveaux styles et couleurs. Cliquez sur OK pour enregistrer les modifications et fermer la bote de dialogue Modifier le modle de coloration. 6. Apportez les autres modifications requises aux prfrences de coloration du code, puis cliquez sur OK. Arrire-plan par dfaut permet de dfinir la couleur d'arrire-plan par dfaut pour le mode Code et pour l'inspecteur de code. Caractres masqus dfinit la couleur des caractres masqus. Arrire-plan du code en direct dfinit la couleur d'arrire-plan du mode Code en direct. La couleur par dfaut est le jaune. Modifications du code en direct dfinit la couleur de surbrillance du code qui est modifi dans le mode Code en direct. La couleur par dfaut est le rose. Arrire-plan en lecture seule dfinit la couleur d'arrire-plan du texte en lecture seule.
Utilisation d'un diteur externe
Haut de la page
Vous pouvez spcifier un diteur externe utiliser pour l'dition de fichiers possdant des extensions prcises. Par exemple, vous pouvez lancer un diteur de texte comme BBEdit, le Bloc-Notes ou TextEdit partir de Dreamweaver pour modifier les fichiers JavaScript (JS). Vous pouvez attribuer diffrents diteurs externes pour diffrentes extensions de nom de fichier.
Dfinition d'un diteur externe pour un type de fichier

1. Choisissez Edition > Prfrences. 2. Slectionnez la catgorie Types de fichiers/Editeurs dans la liste de gauche, puis cliquez sur OK.
73
Ouvrir en mode Code Prcise les extensions de noms de fichiers ouvrir automatiquement en mode Code dans Dreamweaver. Editeur de code externe Spcifie l'diteur de texte utiliser. Recharger les fichiers modifis Indiquez ce que Dreamweaver doit faire lorsqu'il dtecte que des changements ont t apports de l'extrieur un document dj ouvert dans Dreamweaver. Enregistrer au dmarrage Permet d'indiquer si Dreamweaver doit systmatiquement enregistrer le document actif avant d'excuter l'diteur, ne jamais enregistrer le document ou vous demander s'il doit l'enregistrer ou non chaque lancement de l'diteur externe. Fireworks Spcifiez les diteurs pour divers types de fichiers multimdia.
Dmarrage d'un diteur de code externe

Choisissez Edition > Modifier avec diteur externe. Voir aussi Prsentation de la barre d'outils de codage Nettoyage de fichiers HTML crs avec Microsoft Word
74
Configuration de votre environnement de codage

Utilisation d'espaces de travail orients codeur Affichage du code Personnalisation des raccourcis clavier Ouverture de fichiers en mode Code par dfaut
Utilisation d'espaces de travail orients codeur
Haut de la page
Vous pouvez modifier l'environnement de codage de Dreamweaver pour l'adapter la faon dont vous travaillez. Vous pouvez par exemple changer le mode d'affichage du code, dfinir diffrents raccourcis clavier ou importer et utiliser votre bibliothque de balises de prdilection. Dreamweaver est fourni avec plusieurs dispositions d'espace de travail conues pour offrir une exprience de codage optimale. La fonction Commutation d'espace de travail de la barre Application vous permet de slectionner l'un des espaces de travail suivants : Dveloppeur d'applications, Dveloppeur d'applications Plus, Codeur et Codeur Plus. Tous ces espaces de travail s'affichent par dfaut en mode Code (dans la fentre de document tout entire ou en modes Code et Cration) et comportent des panneaux ancrs du ct gauche de l'cran. A l'exception de Dveloppeur d'applications Plus, ils liminent tous l'inspecteur Proprits de l'affichage par dfaut. Si aucun des espaces de travail prdfinis ne rpond prcisment vos attentes, vous pouvez personnaliser la disposition en ouvrant et en encrant des panneaux comme bon vous semble, puis en enregistrant l'espace de travail en tant qu'espace de travail personnalis.
Affichage du code
Haut de la page
Vous pouvez visualiser le code source du document actif de plusieurs faons : en l'affichant dans la fentre de document aprs avoir activ le mode Code, en fractionnant la fentre de document pour afficher la fois la page et son code, ou encore en travaillant dans l'Inspecteur de code, qui forme une fentre de code distincte. L'inspecteur de code fonctionne comme le mode Code; il peut tre considr comme un mode Code dtachable pour le document actif.
Affichage du code dans la fentre de document

Choisissez Affichage > Code.
Codage et modification simultane d'une page dans la fentre de document

1. Choisissez Affichage > Code et cration. Le code apparat dans le volet suprieur, et la page dans le volet infrieur. 2. Pour afficher la page au premier plan, choisissez Mode Cration au premier plan dans le menu Affichage de la barre d'outils du document. 3. Pour redimensionner les volets dans la fentre de document, faites glisser la barre de division l'endroit appropri. La barre de division est intercale entre les deux volets. Toutes les modifications apportes dans le mode Cration se rpercutent automatiquement dans le mode Code. Toutefois, aprs avoir effectu des modifications en mode Code, vous devez mettre jour manuellement le document dans le mode Cration ; il vous suffit pour cela de cliquer dans ce mode ou d'appuyer sur la touche F5.
Affichage du code dans une fentre distincte dans l'inspecteur de code

L'inspecteur de code permet de travailler dans une fentre de code distincte, comme vous le faites en mode Code. Choisissez Fentre > Inspecteur de code. La barre d'outils contient les options suivantes : Gestion des fichiers Permet de placer ou d'acqurir le fichier. Aperu/Dbogage dans le navigateur Permet de prvisualiser ou de dboguer votre document dans un navigateur. Actualiser mode Cration Met jour le document en mode Cration, de faon ce qu'il applique les modifications apportes dans le code. Les modifications apportes dans le code n'apparaissent pas automatiquement dans le mode Cration : vous devez excuter tout d'abord certaines oprations, comme enregistrer le fichier ou utiliser ce bouton. Rfrence Ouvre le panneau Rfrence. Consultez la section Utilisation des documents de rfrence sur les langages. Navigation par code Permet de se dplacer rapidement dans le code. Consultez la section Accs une fonction JavaScript ou VBScript. Afficher les options Permet de dterminer la faon dont le code est affich. Consultez la section Dfinition de l'apparence du code. Pour utiliser la barre de codage situe dans la partie gauche de la fentre, consultez la section Insertion de code avec la barre d'outils de codage.
Haut de la page
75
Personnalisation des raccourcis clavier

Rien ne vous empche d'utiliser vos raccourcis clavier prfrs dans Dreamweaver. Si vous tes habitu utiliser des raccourcis clavier spcifiques (par exemple, Maj+Entre pour insrer un saut de ligne, Ctrl+G pour atteindre un code prcis), vous pouvez les intgrer dans Dreamweaver au moyen de l'diteur de raccourcis clavier. Pour plus d'informations, reportez-vous la section Personnalisation des raccourcis clavier.
Ouverture de fichiers en mode Code par dfaut
Haut de la page
Lorsque vous ouvrez un fichier qui ne contient normalement aucun code HTML (par exemple, un fichier JavaScript), il s'ouvre en mode Code (ou dans l'Inspecteur de code), et non pas en mode Cration. Vous pouvez dfinir les types de fichiers ouvrir en mode Code. 1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2. Slectionnez la catgorie Types de fichiers/Editeurs dans la liste de gauche. 3. Dans la zone de texte Ouvrir en mode Code, entrez les extensions des types de fichier que vous voulez ouvrir automatiquement en mode Code. Insrez un espace entre les extensions. Vous pouvez en ajouter autant que vous le souhaitez. Voir aussi
76
Utilisation du panneau Insertion

Masquage ou affichage du panneau Insertion Affichage des boutons d'une catgorie Affichage du menu d'un bouton Insertion d'un objet Contournement de la bote de dialogue d'insertion d'objets et insertion d'un espace rserv vide Modification des prfrences du panneau Insertion Ajout, suppression ou gestion des boutons de la catgorie Favoris du panneau Insertion Insertion d'objets l'aide des boutons de la catgorie Favoris Affichage du panneau Insertion sous la forme d'une barre Insertion horizontale Rtablissement du panneau Insertion Affichage des catgories de la barre Insertion horizontale sous forme d'onglets Affichage des catgories de la barre Insertion horizontale sous forme de menus Les boutons qui composent le panneau Insertion permettent de crer et d'insrer des objets, tels que des tableaux et des images. Ces boutons sont organiss en plusieurs catgories.
Masquage ou affichage du panneau Insertion
Haut de la page
Choisissez Fentre > Insrer. Remarque : Si vous utilisez certaines types de fichiers, tels que XML, JavaScript, Java et CSS, le panneau Insertion et l'option de mode Cration sont griss, car vous ne pouvez pas insrer d'lments dans ces fichiers de code.
Haut de la page
Affichage des boutons d'une catgorie
Slectionnez le nom de la catgorie dans le menu Catgorie. Par exemple, pour afficher les boutons de la catgorie Mise en forme, slectionnez Mise en forme.
Haut de la page
Affichage du menu d'un bouton

Cliquez sur le bouton flch pointant vers le bas situ prs de l'icne du bouton.
Insertion d'un objet
Haut de la page
77
1. Choisissez la catgorie approprie dans le menu Catgorie du panneau Insertion. 2. Effectuez l'une des oprations suivantes : Cliquez sur un bouton d'objet ou faites glisser l'icne du bouton dans la fentre de document. Cliquez sur la flche d'un bouton, puis slectionnez une option dans le menu. Selon le type d'objet que vous slectionnez, une bote de dialogue d'insertion d'objet s'affiche, le cas chant, et vous invite rechercher un fichier ou spcifier les paramtres d'un objet spcifique. En outre, Dreamweaver vous permet d'insrer du code dans le document ou d'ouvrir un diteur de balises ou un panneau vous permettant de spcifier les informations avant l'insertion du code. Dans le cas de certains objets, aucune bote de dialogue ne s'affiche si vous insrez les objets en mode Cration, mais un diteur de balises s'affiche si vous insrez les objets en mode Code. Pour d'autres objets, lorsque vous essayez d'insrer des objets en mode Cration, Dreamweaver passe en mode Code avant de raliser l'insertion. Remarque : Certains objets, tels que les ancres nommes, ne sont pas visibles lorsque vous visualisez la page dans la fentre d'un navigateur. Vous pouvez afficher des icnes en mode Cration indiquant l'emplacement de ces objets invisibles.
Contournement de la bote de dialogue d'insertion d'objets et insertion d'un espace rserv vide
Haut de la page
Appuyez sur la touche Ctrl (Windows) ou Option (Macintosh) tout en cliquant avec la souris sur le bouton correspondant l'objet. Par exemple, pour insrer un espace rserv d'image sans spcifier de fichier d'image, appuyez sur la touche Ctrl ou Option tout en cliquant avec la souris sur le bouton Image. Remarque : Cette procdure ne contourne pas toutes les botes de dialogue d'insertion d'objet. De nombreux objets, y compris les lments PA et les jeux de cadres, n'insrent pas d'espaces rservs ni d'objets avec des valeurs par dfaut.
Haut de la page
Modification des prfrences du panneau Insertion

1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh).
2. Dans la catgorie Gnral de la bote de dialogue Prfrences, dsactivez l'option Afficher la bote de dialogue lors de l'insertion d'objets pour supprimer les botes de dialogue lors de l'insertion d'objets, tels que des images, des tableaux, des scripts ou des lments d'en-tte. Vous pouvez galement maintenir la touche Ctrl (Windows) ou Option (Macintosh) enfonce tandis que vous crez l'objet. Si cette option est dsactive lorsque vous insrez un objet, celui-ci aura des valeurs par dfaut. Utilisez l'inspecteur Proprits pour modifier les proprits de l'objet aprs l'avoir insr.
Ajout, suppression ou gestion des boutons de la catgorie Favoris du panneau Insertion

1. Slectionnez l'une des catgories du panneau Insertion.
Haut de la page
2. Cliquez l'aide du bouton droit de la souris (Windows) ou tout en maintenant la touche Contrle enfonce (Macintosh) l'endroit o les boutons s'affichent, puis choisissez Personnaliser les favoris. 3. Dans la bote de dialogue Personnaliser les objets favoris, apportez les modifications dsires, puis cliquez sur OK. Pour ajouter un objet, slectionnez-le dans le volet Objets disponibles situ gauche, puis cliquez sur la flche situe entre les deux volets ou cliquez deux fois sur l'objet dans le volet Objets disponibles. Remarque : Les objets doivent tre ajouts un par un. Il est impossible de slectionner un nom de catgorie tel que Commun afin d'ajouter une catgorie entire votre liste de favoris. Pour supprimer un objet ou un sparateur, slectionnez l'objet dans le volet Objets favoris situ droite, puis cliquez sur le bouton Supprimer l'objet slectionn dans la liste Objets favoris, au-dessus du volet. Pour dplacer un objet, slectionnez-le dans le volet Objets favoris situ droite, puis cliquez sur le bouton flch pointant vers le haut ou vers le bas situ au-dessus du volet. Pour ajouter un sparateur sous un objet, slectionnez un objet dans le volet Objets favoris situ droite, puis cliquez sur le bouton Ajouter un sparateur situ en dessous du volet. 4. Si la catgorie Favoris n'est pas la catgorie active, slectionnez-la afin de voir les modifications apportes.
Insertion d'objets l'aide des boutons de la catgorie Favoris
Haut de la page
Slectionnez la catgorie Favoris dans la partie gauche du panneau Insertion, puis cliquez sur le bouton correspondant un objet Favori que vous avez ajout.
Haut de la page
Affichage du panneau Insertion sous la forme d'une barre Insertion horizontale

78
Contrairement aux autres panneaux de Dreamweaver, vous pouvez retirer le panneau Insertion de son emplacement d'ancrage par dfaut et le placer l'horizontale, au-dessus de la fentre de document. Dans ce cas, ce panneau se transforme en barre d'outils, mme s'il est impossible de la masquer et de l'afficher comme vous le feriez pour les autres barres d'outils. 1. Cliquez sur l'onglet du panneau Insertion et tirez-le en haut de la fentre de document.
2. Lorsqu'une ligne bleue horizontale s'affiche sur la largeur de la fentre du document, relche le panneau Insertion. Remarque : La barre Insertion horizontale est galement un lment par dfaut de l'espace de travail Classique. Pour activer l'espace de travail Classique, choisissez Classique dans la section Commutation d'espace de travail de la barre Application.
Haut de la page
Rtablissement du panneau Insertion

2. Placez le panneau Insertion l'endroit dsir puis dposez-le. Une ligne bleue indique o vous pouvez dposer le panneau.
1. Cliquez sur la poigne de la barre Insertion horizontale (sur sa gauche) et tirez la barre l'endroit o vos panneaux sont ancrs.
Affichage des catgories de la barre Insertion horizontale sous forme d'onglets
Haut de la page
Cliquez sur la flche du menu situe prs du nom de la catgorie, l'extrmit gauche de la barre Insertion horizontale, puis choisissez Afficher en tant qu'onglets.
Haut de la page
Affichage des catgories de la barre Insertion horizontale sous forme de menus
Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur un onglet de catgorie de la barre Insertion horizontale, puis choisissez Afficher en tant que menu. Voir aussi Prsentation du panneau Insertion
79
Utilisation de barres d'outils, d'inspecteurs et de menus contextuels

Affichage des barres d'outils Utilisation de l'inspecteur Proprits Utilisation des menus contextuels
Affichage des barres d'outils
Haut de la page
Utilisez les barres d'outils document et standard pour effectuer des oprations de modification standard lies au document ; utilisez la barre d'outils codage pour insrer du code rapidement ; et utilisez la barre d'outils rendu de style pour afficher votre page comme elle apparatrait dans diffrents types de mdias. Vous pouvez afficher ou masquer ces barres selon qu'elles vous sont utiles ou non. Slectionnez Affichage > Barres d'outils, puis slectionnez la barre d'outils voulue. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur l'une des barres d'outils et slectionnez la barre d'outils dans le menu contextuel. Remarque : Pour afficher la barre d'outils de codage dans l'Inspecteur de code (Fentre > Inspecteur de code), vous devez la slectionner dans le menu droulant des options d'affichage situ en haut de l'inspecteur.
Utilisation de l'inspecteur Proprits
Haut de la page
L'inspecteur Proprits permet d'examiner et de modifier les proprits les plus frquentes de l'lment de la page slectionne, tel que le texte ou un objet insr. Le contenu de l'inspecteur Proprits varie en fonction de l'lment slectionn. Pour accder l'aide relative un inspecteur Proprits spcifique, cliquez sur le bouton d'aide dans son coin suprieur droit, ou choisissez Aide dans son menu Options. Remarque : L'inspecteur de balises permet d'afficher et de modifier les attributs associs aux proprits d'une balise.
Affichage ou masquage de l'inspecteur Proprits

Choisissez Fentre > Proprits.
Dveloppement ou rduction de l'inspecteur Proprits

Cliquez sur la flche d'agrandissement dans l'angle infrieur droit de l'inspecteur Proprits.
Affichage et modification des proprits d'un lment de page

1. Slectionnez l'lment de la page dans la fentre de document. Si ncessaire, dveloppez l'inspecteur Proprits afin que toutes les proprits de l'lment slectionn puissent apparatre. 2. Modifiez les proprits de votre choix dans l'inspecteur Proprits. Remarque : Pour obtenir des informations sur des proprits particulires, slectionnez un lment dans la fentre de document, puis cliquez sur l'icne Aide (?) dans le coin suprieur droit de l'inspecteur Proprits. 3. Si les changements ne s'appliquent pas immdiatement dans la fentre de document, appliquez-les d'une des faons suivantes : Cliquez hors des champs de texte de modification des proprits. Appuyez sur la touche Entre (Windows) ou Retour (Macintosh). Appuyez sur la touche de tabulation pour passer une autre proprit.
Utilisation des menus contextuels
Haut de la page
Les menus contextuels vous permettent d'accder rapidement aux commandes et proprits les plus utiles relatives l'objet ou la fentre avec lesquels vous travaillez. Les menus contextuels rpertorient uniquement les commandes en rapport avec la slection en cours. 1. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur l'objet ou la fentre qui vous intresse. 2. Choisissez une commande dans le menu contextuel.
80
Voir aussi Prsentation de la barre d'outils de document Dfinition des proprits de texte dans l'inspecteur Proprits
81
Utilisation de la fentre de document

Basculement d'un mode un autre dans la fentre de document Affichage en cascade ou en mosaque des fentres de document Redimensionnement de la fentre de document Dfinition de la taille des fentres et de la vitesse de connexion Rapports dans Dreamweaver
Basculement d'un mode un autre dans la fentre de document
Haut de la page
Vous pouvez afficher un document dans la fentre de document en mode Code, en mode Code fractionn, en mode Cration, en modes Code et Cration (mode fractionn) et en mode Affichage en direct. Vous pouvez galement afficher le mode Code fractionn ou les modes Code et Cration en les sparant l'horizontale ou la verticale. Le mode d'affichage l'horizontale est le mode par dfaut.
Activation du mode Code

Effectuez l'une des oprations suivantes : Choisissez Affichage > Code. Dans la barre d'outils du document, cliquez sur le bouton Afficher le mode Code.
Activation du mode Code fractionn

Le mode Code fractionn scinde le document en deux parties, ce qui permet de travailler sur deux sections du code en mme temps. Choisissez Affichage > Fractionner le code.
Activation du mode Cration

Effectuez l'une des oprations suivantes : Choisissez Affichage > Cration. Dans la barre d'outils Document, cliquez sur le bouton Afficher le mode Cration.
Affichage la fois en modes Code et Cration

Effectuez l'une des oprations suivantes : Choisissez Affichage > Code et cration. Dans la barre d'outils du document, cliquez sur le bouton Afficher les modes Code et Cration.
Par dfaut, le mode Code s'affiche en haut de la fentre de document et le mode Cration en bas. Pour afficher le mode Cration en haut de la fentre, choisissez Affichage > Mode Cration en haut.
Basculement entre les modes Code et Cration

Appuyez sur Ctrl + guillemet simple d'ouverture ('). Si les deux modes sont affichs simultanment dans la fentre de document, ce raccourci clavier permet d'activer tour tour les deux modes.
Fractionnement vertical des modes

Cette option n'est disponible que pour le mode Code fractionn et les modes Code et Cration (mode fractionn). Elle est dsactive pour le mode Code et le mode Cration. 1. Veillez bien tre en mode Code fractionn (Affichage > Code fractionn) ou en modes Code et Cration (Affichage > Code et Cration). 2. Choisissez Affichage > Fractionner la verticale. Si vous tes en modes Code et Cration, vous pouvez afficher le mode Cration sur la gauche (Affichage > Mode Cration gauche).
82
Affichage en cascade ou en mosaque des fentres de document

Si plusieurs documents sont ouverts la fois, vous pouvez les afficher en cascade ou en mosaque.
Haut de la page
Affichage en cascade des fentres de document

Choisissez Fentre > Cascade.
Affichage en mosaque des fentres de document

(Windows) Slectionnez Fentre > Mosaque horizontale ou Fentre > Mosaque verticale. (Macintosh) Slectionnez Fentre > Mosaque.
Redimensionnement de la fentre de document
Haut de la page
La barre d'tat affiche les dimensions de la fentre de document slectionne (en pixels). Pour qu'une page s'affiche de faon optimale une taille spcifique, vous pouvez rgler la fentre de document sur l'une des tailles prdtermines, modifier ces tailles prdtermines ou en crer de nouvelles. Lorsque vous modifiez la taille d'affichage d'une page en mode Cration ou Affichage en direct, seules les dimensions de la vue changent. La taille du document n'est pas modifie. Outre les formats prdtermins et personnaliss, Dreamweaver rpertorie galement les tailles spcifies dans une requte multimdia. Lorsque vous slectionnez une taille correspondant une requte multimdia, Dreamweaver utilise cette requte multimdia pour afficher la page. Vous pouvez galement modifier l'orientation de la page pour prvisualiser la page pour les appareils mobiles sur lesquels la disposition change selon la faon dont l'appareil est tenu.
Redimensionnement de la fentre de document selon une taille prdtermine

Choisissez l'une des tailles affiches dans le menu contextuel Taille de fentre qui se trouve dans la barre d'tat de la fentre de document. Dreamweaver CS5.5 et les versions ultrieures fournissent une plus vaste liste de choix, y compris des options pour les principaux priphriques mobiles (comme illustr ci-dessous).
La taille de la fentre correspond aux dimensions internes de la fentre de navigateur, bordures exclues ; la taille du moniteur ou le priphrique mobile est indiqu sur la droite. Pour un redimensionnement moins prcis des fentres, utilisez les mthodes standard de votre systme d'exploitation, par exemple, en faisant glisser le coin infrieur droit d'une fentre. Remarque : (Windows uniquement) Les documents dans la fentre de document sont agrandis par dfaut ; il est impossible de les dans le coin suprieur droit redimensionner lorsqu'ils sont agrandis. Pour annuler l'affichage du document en mode agrandi, cliquez sur l'icne du document.
Modification des valeurs figurant dans le menu contextuel Taille de fentre

1. Cliquez sur Modifier les tailles dans le menu contextuel Taille de fentre. 2. Cliquez sur une valeur de largeur ou de hauteur dans la liste Taille de la fentre, puis entrez une nouvelle valeur. Pour que la fentre de document adopte uniquement une largeur spcifique sans que sa hauteur change, slectionnez la valeur de hauteur et supprimez-la. 3. Cliquez sur la zone Description pour saisir un texte dcrivant la taille spcifique.
Ajout d'un nouveau format d'affichage au menu contextuel Taille de fentre

1. Cliquez sur Modifier les tailles dans le menu contextuel Taille de fentre. 2. Cliquez dans l'espace vierge qui apparat sous la dernire valeur de la colonne Largeur. 3. Indiquez les valeurs souhaites pour Largeur et Hauteur. Pour dfinir soit la largeur, soit la hauteur, laissez l'un des champs vide. 4. Cliquez dans le champ Description pour saisir un texte dcrivant la taille ajoute. Par exemple, vous pouvez entrer SVGA ou PC standard ct de l'entre correspondant un moniteur d'une rsolution de 800 x 600
83
pixels, et Mac 17 ct de l'entre correspondant un moniteur d'une rsolution de 832 x 624 pixels. Diverses rsolutions peuvent tre rgles sur la plupart des moniteurs.
Dfinition de la taille des fentres et de la vitesse de connexion

Haut de la page
2. Choisissez Barre d'tat (CS5) ou Tailles des fentres (CS5.5 et versions ultrieures) dans la liste de catgories sur la gauche. 3. Parmi les options suivantes, dfinissez celles de votre choix : Taille de la fentre Permet de personnaliser les tailles de fentre qui s'affichent dans le menu contextuel de la barre d'tat. Vitesse de connexion Dtermine la vitesse de connexion (exprime en kilobits par seconde) utilise pour calculer le temps de tlchargement. Le temps de tlchargement de la page est indiqu dans la barre d'tat. Celui des images est affich dans l'inspecteur Proprits lorsqu'une image est slectionne dans la fentre de document.
Rapports dans Dreamweaver
Haut de la page
Dans Dreamweaver, vous pouvez excuter des rapports afin de rechercher ou de tester des contenus ou encore de corriger des erreurs. Vous pouvez gnrer les types de rapports suivants : Rechercher Permet de rechercher des balises, des attributs ou une portion de texte spcifique dans les balises. Rfrence Permet de rechercher des informations de rfrence. Validation Permet de rechercher les erreurs de code ou de syntaxe. Navigateurs compatibles Permet de tester le code HTML de vos documents afin de dterminer s'il contient des balises ou des attributs non pris en charge par les navigateurs cibles. Vrificateur de lien Permet de rechercher et de corriger les liens briss, externes et orphelins. Rapports du site Permet d'amliorer le droulement du travail et de tester les attributs HTML dans votre site. Les rapports sur le droulement du travail incluent les fonctions Extrait par, Modifis rcemment et Design Notes ; les rapports HTML incluent les balises de polices imbriques combinables, l'accessibilit, les textes secondaires manquants, les balises imbriques redondantes, les balises vides amovibles et les documents sans nom. Journal FTP Permet d'avoir une vue d'ensemble des transferts de fichiers en FTP. Dbogage du serveur Permet de consulter des informations afin de dboguer une application Adobe ColdFusion. Voir aussi Prsentation de la fentre de document
84
Zoom avant et zoom arrire

Zoom avant ou arrire sur une page Modification d'une page aprs un zoom Dfilement d'une page aprs un zoom Adaptation de la fentre du document la slection Adaptation de la fentre du document une page entire Adaptation de la fentre du document la largeur d'une page Dreamweaver permet d'agrandir (zoom avant) l'affichage de la fentre de document de manire pouvoir vrifier la prcision des graphiques, slectionner plus aisment de petits lments, concevoir des pages avec un texte en petite taille, concevoir de trs grande pages, etc. Remarque : Les outils de zoom ne sont disponibles qu'en mode Cration.
Zoom avant ou arrire sur une page

1. Cliquez sur l'outil Zoom (la loupe) dans le coin infrieur droit de la fentre du document. 2. Effectuez l'une des oprations suivantes : Cliquez sur la zone de la page que vous souhaitez agrandir jusqu' obtenir l'affichage dsir. Tracez un cadre autour de la zone de la page que vous souhaitez agrandir, puis relchez le bouton de la souris. Slectionnez une chelle d'agrandissement prdfini dans le menu droulant Zoom. Saisissez une chelle d'agrandissement dans le champ Zoom.
Haut de la page
Vous pouvez galement effectuer un grossissement avec l'outil Zoom en appuyant sur Ctrl+= (Windows) ou Commande+= (Macintosh). 3. Pour effectuer un zoom arrire (rduire le taux d'agrandissement), appuyez sur la touche Alt (Windows) ou Option (Macintosh), puis cliquez sur la page. Vous pouvez galement effectuer une rduction avec l'outil Zoom en appuyant sur Ctrl+- (Windows) ou Commande+- (Macintosh).
Modification d'une page aprs un zoom
Haut de la page
Cliquez sur l'outil Slection (icne en forme de pointeur) dans le coin infrieur droit de la fentre du document, puis cliquez dans la page.
Haut de la page
Dfilement d'une page aprs un zoom

1. Cliquez sur l'outil Main (icne en forme de main) dans le coin infrieur droit de la fentre du document. 2. Faites glisser la page.
Adaptation de la fentre du document la slection

1. Slectionnez un lment de la page. 2. Slectionnez Affichage > Ajuster la slection.
Haut de la page
Adaptation de la fentre du document une page entire

Slectionnez Affichage > Ajuster la page.
Haut de la page
Adaptation de la fentre du document la largeur d'une page

Slectionnez Affichage > Ajuster la largeur. Voir aussi Prsentation de la barre d'tat
Haut de la page
85
Gestion de site
86
Connexion un serveur distant

Dfinition d'une mthode de connexion Dfinition des options de serveur avances Connexion ou dconnexion d'un dossier distant via un accs rseau Connexion ou dconnexion d'un dossier distant via un accs FTP Dpannage de la configuration du dossier distant Lorsque vous avez spcifi un site local dans Dreamweaver, vous pouvez spcifier un serveur distant pour votre site. Le serveur distant (souvent appel serveur Web ) est l'endroit o vous publiez vos fichiers de site afin qu'ils puissent tre consults en ligne. Le serveur distant est simplement un autre ordinateur, similaire votre ordinateur local, qui contient un ensemble de fichiers et de dossiers. Vous allez spcifier un dossier pour votre site sur le serveur distant, en procdant comme vous avez fait pour le dossier de votre site local sur l'ordinateur local. Dreamweaver appelle site distant le dossier distant que vous aurez spcifi. Lorsque vous configurez un dossier distant, vous devez slectionner une mthode de connexion qui permettra Dreamweaver de transfrer des fichiers votre serveur Web et de tlcharger des fichiers depuis ce serveur. La mthode de connexion la plus typique est FTP, mais Dreamweaver prend galement les mthodes de connexion local/rseau, FTPS, SFTP, WebDav et RDS. Si vous ne connaissez pas la mthode de connexion utiliser, consultez votre FAI ou l'administrateur du serveur. Remarque : Dreamweaver prend galement en charge les connexions aux serveurs compatibles IPv6. Les types de connexion pris en charge sont notamment FTP, SFTP, WebDav et RDS. Pour plus d'informations, voir www.ipv6.org/
Spcification d'une mthode de connexion

Connexions FTP
Utilisez ce paramtre si vous vous connectez votre serveur Web par FTP.
En haut
Utilisateurs de Business Catalyst : pour assurer une meilleure scurit, Business Catalyst ne prendra en charge SFTP qu' partir de dcembre 2012. Veillez bien modifier les paramtres de votre site pour utiliser SFTP. Pour plus d'informations, reportez-vous la section consacre aux connexions SFTP sur cette page. 1. Choisissez Site > Grer les sites. 2. Cliquez sur Nouveau pour crer un nouveau site, ou choisissez un site Dreamweaver existant puis cliquez sur l'icne de modification. 3. Dans la bote de dialogue Configuration du site, slectionnez la catgorie Serveurs et effectuez l'une des actions suivantes : Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur. Slectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant. Les illustrations suivantes montrent l'cran Base de la catgorie Serveur, avec les zones de texte dj remplies.
Ecran Base de la catgorie Serveur, bote de dialogue Configuration du site.
4. Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez choisir n'importe quel nom.
87
5. Slectionnez FTP dans la liste droulante Se connecter au moyen de. 6. Dans la zone Adresse FTP, entrez l'adresse du serveur FTP sur lequel vous chargez les fichiers pour votre site Web. Votre adresse FTP est le nom Internet complet d'un systme informatique, par exemple, ftp.mindspring.com. Entrez l'adresse complte sans ajouter de texte. Evitez en particulier d'ajouter un nom de protocole devant l'adresse. Si vous ne connaissez pas votre adresse FTP, contactez votre hbergeur de site Web. Remarque : Le port 21 est le port par dfaut pour la rception de connexions FTP. Vous pouvez modifier le numro de port par dfaut en modifiant le contenu de la zone de texte droite. Ce faisant, lorsque vous enregistrez vos paramtres, un signe deux points et le nouveau numro de port seront ajouts votre adresse FTP (par exemple ftp.mindspring.com:29). 7. Dans les zones Nom d'utilisateur et Mot de passe, entrez le nom d'utilisateur et le mot de passe utiliss pour la connexion au serveur FTP. 8. Cliquez sur Tester pour tester votre adresse FTP, votre nom d'utilisateur et votre mot de passe. Remarque : Vous devez obtenir les informations relatives l'adresse FTP, au nom d'utilisateur et au mot de passe auprs de l'administrateur systme de la socit qui hberge votre site. Personne d'autre n'a accs ces informations. Entrez les informations de la faon prcise dont votre administrateur systme vous les a communiques. 9. Par dfaut, Dreamweaver enregistre votre mot de passe. Dslectionnez l'option Enregistrer si vous prfrez que Dreamweaver vous demande le mot de passe chaque connexion au serveur distant. 10. Dans la zone Rpertoire racine, entrez le nom du rpertoire (dossier) hte du serveur distant o sont stocks les documents visibles pour le public. Si vous n'tes pas sr du rpertoire racine saisir, contactez l'administrateur du serveur ou laissez la zone de texte vide. Sur certains serveurs, votre rpertoire racine est celui dans lequel la connexion FTP est tablie. Pour en tre sr, tablissez une connexion avec le serveur. Si vous voyez apparatre dans le volet Affichage distant de votre panneau Fichiers un dossier nomm public_html, www ou ayant votre nom d'utilisateur, il s'agit probablement du nom indiquer dans la zone Rpertoire racine. 11. Dans la zone URL Web, entrez l'URL de votre site Web (par exemple http://www.monsite.com). Dreamweaver utilise l'URL Web pour crer des liens relatifs la racine du site et pour vrifier les liens lorsque vous employez la fonction de vrification des liens. Pour une explication de cette option, consultez la section Catgorie Paramtres avancs. 12. Dveloppez la section Options supplmentaires si vous devez encore dfinir des options supplmentaires. 13. Slectionnez l'option Utiliser FTP passif si la configuration de votre pare-feu ncessite l'utilisation d'un FTP passif. Cette fonction permet votre logiciel local de configurer la connexion FTP la place du serveur distant. Si vous n'tes pas sr d'utiliser le mode FTP passif, consultez votre administrateur systme ou faites des essais en activant puis en dsactivant l'option Utiliser FTP passif. Pour plus d'informations, consultez la TechNote 15220 sur le site Web d'Adobe, l'adresse www.adobe.com/go/tn_15220_fr. 14. Choisissez Utiliser le mode de transfert IPv6 si vous employez un serveur FTP compatible IPv6. Paralllement au dploiement de la version 6 d'Internet Protocol (IPv6), les commandes EPRT et EPSV ont remplac respectivement les commandes FTP PORT et PASV. Par consquent, si vous tentez de vous connecter un serveur FTP compatible IPv6, vous devez utiliser les commandes passif tendu (EPSV) et actif tendu (EPRT) pour votre connexion de donnes. Pour plus d'informations, voir www.ipv6.org/. 15. Choisissez Utiliser un proxy si vous voulez spcifier un hte ou un port proxy. Pour plus d'informations, cliquez sur le lien afin d'accder la bote de dialogue Prfrences, puis cliquez-y sur le bouton Aide de la catgorie Site. 16. Cliquez sur Enregistrer pour fermer l'cran Base. Ensuite, dans la catgorie Serveurs, indiquez si le serveur que vous venez d'ajouter ou de modifier est un serveur distant, un serveur d'valuation ou les deux. Pour plus d'informations sur le dpannage des problmes de connectivit FTP, consultez la TechNote kb405912 sur le site Web d'Adobe, l'adresse www.adobe.com/go/kb405912_fr.
Connexions SFTP
Utilisez l'option Secure FTP (SFTP) si la configuration de votre pare-feu exige l'emploi d'une connexion FTP scurise. SFTP utilise un systme de cryptage et de cls publiques pour scuriser la connexion votre serveur d'valuation. Remarque : Pour que vous puissiez slectionner cette option, votre serveur doit excuter un service SFTP. Si vous ignorez si votre serveur excute SFTP, consultez votre administrateur systme. 1. Choisissez Site > Grer les sites. 2. Cliquez sur Nouveau pour crer un nouveau site, ou choisissez un site Dreamweaver existant puis cliquez sur Modifier. 3. Dans la bote de dialogue Configuration du site, slectionnez la catgorie Serveurs et effectuez l'une des actions suivantes : Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur. Slectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant.
88
4. Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez entrer le nom de votre choix. 5. Slectionnez SFTP dans la liste droulante Se connecter au moyen de. Les autres options sont identiques celles des connexions FTP. Reportez-vous la section ci-dessus pour plus d'informations. Remarque : Le port 22 est le port par dfaut pour la rception de connexions SFTP.
Connexions FTPS (CS5.5 )

FTPS (FTP sur SSL) fournit une prise en charge du chiffrement et de l'authentification, au contraire de SFTP qui prend uniquement en charge le chiffrement. Lorsque vous utilisez FTPS pour le transfert de donnes, vous pouvez choisir de chiffrer vos informations d'identification, ainsi que les donnes transmises au serveur. En outre, vous pouvez choisir d'authentifier les informations d'identification du serveur et les connexions. Les informations d'identification d'un serveur sont valides par rapport l'ensemble actuel des certificats de serveur d'autorit de certification approuvs dans la base de donnes Dreamweaver. Les autorits de certification (CA), qui comprennent des socits comme VeriSign, Thawte, etc. mettent des certificats de serveur signs numriquement. Remarque : Cette procdure dcrit les options spcifiques FTPS. Pour plus d'informations sur les options FTP rgulires, consultez la section prcdente. 1. Choisissez Site > Grer les sites. 2. Cliquez sur Nouveau pour crer un nouveau site, ou choisissez un site Dreamweaver existant puis cliquez sur Modifier. 3. Dans la bote de dialogue Configuration du site, slectionnez la catgorie Serveurs et effectuez l'une des actions suivantes : Cliquez sur le bouton + (Ajouter nouveau serveur) pour ajouter un nouveau serveur. Slectionnez un serveur existant, puis cliquez sur le bouton Modifier serveur existant. 4. Dans la zone Nom du serveur, entrez le nom du nouveau serveur. 5. Dans la zone Se connecter l'aide, slectionnez l'une des options suivantes en fonction de vos besoins. FTP sur SSL/TLS (chiffrement implicite) Le serveur met fin la connexion si la requte de scurit n'est pas reue. FTP sur SSL/TLS (chiffrement explicite) Si le client ne demande pas de scurit, le serveur peut choisir de procder une transaction non scurise ou de refuser/limiter la connexion. 6. Dans la zone Authentification, choisissez l'une des options suivantes : Aucun Les informations d'identification du serveur, signes ou auto-signes, s'affichent. Si vous acceptez les informations d'identification du serveur, le certificat est ajout un magasin de certificats, trustedSites.db , dans Dreamweaver. La prochaine fois que vous vous connecterez ce serveur, Dreamweaver se connectera directement au serveur. Remarque : Si les informations d'identification d'un certificat auto-sign ont t modifies sur le serveur, vous tes invit accepter les nouvelles informations d'identification. Approuv Le certificat prsent est valid avec l'ensemble actuel des certificats de serveur d'autorit de certification approuvs dans la base de donnes Dreamweaver. La liste de serveurs approuvs est stocke dans le fichier cacerts.pem . Remarque : Un message d'erreur s'affiche si vous slectionnez Serveur approuv et que vous vous connectez un serveur avec un certificat auto-sign. 7. Dveloppez la section Options supplmentaires pour dfinir d'autres options. Chiffrer uniquement le canal de commande Slectionnez cette option si vous souhaitez ne chiffrer que les commandes qui sont transmises. Utilisez cette option lorsque les donnes transmises sont dj chiffres ou ne contiennent pas d'informations confidentielles. Chiffrer uniquement le nom d'utilisateur et le mot de passe Slectionnez cette option si vous souhaitez chiffrer votre nom d'utilisateur et votre mot de passe. 8. Cliquez sur Enregistrer pour fermer l'cran Base. Ensuite, dans la catgorie Serveurs, indiquez si le serveur que vous avez ajout ou modifi est un serveur distant, un serveur d'valuation ou les deux. Pour plus d'informations sur le dpannage des problmes de connectivit FTP, consultez la TechNote kb405912 sur le site Web d'Adobe, l'adresse www.adobe.com/go/kb405912_fr.
Connexions de type local ou rseau

89
Utilisez cette option pour vous connecter un dossier rseau, si vous stockez des fichiers ou excutez votre serveur d'valuation sur votre ordinateur local. 1. Choisissez Site > Grer les sites. 2. Cliquez sur Nouveau pour crer un nouveau site, ou choisissez un site Dreamweaver existant puis cliquez sur Modifier. 3. Dans la bote de dialogue Configuration du site, slectionnez la catgorie Serveurs et effectuez l'une des actions suivantes : Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur. Slectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant. 4. Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez entrer le nom de votre choix. 5. Slectionnez Local/Rseau dans la liste droulante Se connecter au moyen de. 6. Cliquez sur l'icne de dossier droite de la zone de texte Dossier du serveur pour rechercher puis slectionner le dossier dans lequel vous stockez les fichiers de votre site. 7. Dans la zone URL Web, entrez l'URL de votre site Web (par exemple http://www.monsite.com). Dreamweaver utilise l'URL Web pour crer des liens relatifs la racine du site et pour vrifier les liens lorsque vous employez la fonction de vrification des liens. Pour une explication de cette option, consultez la section Catgorie Paramtres avancs. 8. Cliquez sur Enregistrer pour fermer l'cran Base. Ensuite, dans la catgorie Serveurs, indiquez si le serveur que vous venez d'ajouter ou de modifier est un serveur distant, un serveur d'valuation ou les deux.
Connexions WebDAV
Utilisez ce paramtre si vous vous connectez votre serveur l'aide du protocole WebDAV (Web-based Distributed Authoring and Versioning). Cette mthode de connexion suppose que vous disposez d'un serveur prenant en charge ce protocole, par exemple Microsoft Internet Information Server (IIS) 5.0 ou une installation du serveur Web Apache configure de faon adquate. Remarque : Si vous slectionnez WebDAV comme mthode de connexion et que vous utilisez Dreamweaver dans un environnement multiutilisateurs, vous devez galement veiller ce que tous vos utilisateurs slectionnent WebDAV comme mthode de connexion. Si certains utilisateurs slectionnent WebDAV, alors que d'autres slectionnent d'autres mthodes de connexion (par exemple, FTP), la fonction archivage/extraction de Dreamweaver fonctionnera de faon imprvisible, car WebDAV utilise son propre systme de verrouillage. 1. Choisissez Site > Grer les sites. 2. Cliquez sur Nouveau pour crer un nouveau site, ou choisissez un site Dreamweaver existant puis cliquez sur Modifier. 3. Dans la bote de dialogue Configuration du site, slectionnez la catgorie Serveurs et effectuez l'une des actions suivantes : Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur. Slectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant. 4. Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez entrer le nom de votre choix. 5. Slectionnez WebDAV dans la liste droulante Se connecter au moyen de. 6. Dans la zone URL, indiquez l'URL complte vers le rpertoire du serveur WebDAV auquel vous voulez vous connecter. Cette URL inclut le protocole, le port et le rpertoire (s'il ne s'agit pas du rpertoire racine). Par exemple, http://webdav.mondomaine.net/monsite. 7. Entrez votre nom d'utilisateur et votre mot de passe. Ces informations sont relatives l'identification du serveur et ne sont pas associes Dreamweaver. Si vous ne connaissez pas votre nom d'utilisateur et votre mot de passe, consultez votre administrateur systme ou Web. 8. Cliquez sur Tester pour tester vos paramtres de connexion. 9. Activez l'option Enregistrer si vous voulez que Dreamweaver mmorise votre mot de passe chaque nouvelle session. 10. Dans la zone URL Web, entrez l'URL de votre site Web (par exemple http://www.monsite.com). Dreamweaver utilise l'URL Web pour crer des liens relatifs la racine du site et pour vrifier les liens lorsque vous employez la fonction de vrification des liens. Pour une explication de cette option, consultez la section Catgorie Paramtres avancs. 11. Cliquez sur Enregistrer pour fermer l'cran Base. Ensuite, dans la catgorie Serveurs, indiquez si le serveur que vous venez d'ajouter ou de modifier est un serveur distant, un serveur d'valuation ou les deux.
Connexions RDS
Utilisez ce paramtre si vous vous connectez votre serveur Web l'aide de RDS (Remote Development Services). Cette mthode de connexion suppose que votre serveur distant se trouve sur un ordinateur excutant Adobe ColdFusion 1. Choisissez Site > Grer les sites. 2. Cliquez sur Nouveau pour crer un nouveau site, ou choisissez un site Dreamweaver existant puis cliquez sur Modifier. 3. Dans la bote de dialogue Configuration du site, slectionnez la catgorie Serveurs et effectuez l'une des actions suivantes : Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur.
90
Slectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant. 4. Dans la zone Nom du serveur, entrez le nom du nouveau serveur. Vous pouvez entrer le nom de votre choix. 5. Slectionnez RDS dans la liste droulante Se connecter au moyen de. 6. Cliquez sur le bouton Paramtres et entrez les informations suivantes dans la bote de dialogue Configurer le serveur RDS : Entrez le nom de l'ordinateur hte sur lequel votre serveur Web est install. Il s'agit probablement d'une adresse IP ou d'une URL. En cas de doute, demandez votre administrateur. Entrez le numro du port auquel vous vous connectez. Dfinissez votre dossier racine distant comme rpertoire hte. Par exemple, c:\inetpub\wwwroot\myHostDir\. Entrez votre nom d'utilisateur et votre mot de passe RDS. Remarque : Ces options seront peut-tre invisibles si vous avez configur votre nom d'utilisateur et votre mot de passe dans les paramtres de scurit de ColdFusion Administrator. Slectionnez l'option Enregistrer si vous voulez que Dreamweaver mmorise vos paramtres. 7. Cliquez sur OK pour fermer la bote de dialogue Configurer le serveur RDS. 8. Dans la zone URL Web, entrez l'URL de votre site Web (par exemple http://www.monsite.com). Dreamweaver utilise l'URL Web pour crer des liens relatifs la racine du site et pour vrifier les liens lorsque vous employez la fonction de vrification des liens. Pour une explication de cette option, consultez la section Catgorie Paramtres avancs. 9. Cliquez sur Enregistrer pour fermer l'cran Base. Ensuite, dans la catgorie Serveurs, indiquez si le serveur que vous venez d'ajouter ou de modifier est un serveur distant, un serveur d'valuation ou les deux.
Connexions Microsoft Visual SourceSafe

La prise en charge de Microsoft Visual SourceSafe a t abandonne partir de Dreamweaver CS5.
Dfinition des options de serveur avances

1. Choisissez Site > Grer les sites. 2. Cliquez sur Nouveau pour crer un nouveau site, ou choisissez un site Dreamweaver existant puis cliquez sur Modifier. 3. Dans la bote de dialogue Configuration du site, slectionnez la catgorie Serveurs et effectuez l'une des actions suivantes : Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur. Slectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant. 4. Dfinissez les options de base requises, puis cliquez sur le bouton Avanc.
En haut
5. Slectionnez l'option Conserver les informations de synchronisation si vous souhaitez que vos fichiers locaux et distants soient synchroniss automatiquement. (Cette option est slectionne par dfaut.) 6. Slectionnez l'option Tlcharger autom. les fichiers vers le serveur lors de l'enregistrement si vous voulez que Dreamweaver charge votre fichier sur votre site distant lorsque vous l'enregistrez. 7. Slectionnez l'option Activer l'extraction de fichier si vous voulez activer le systme d'archivage et d'extraction. 8. Si vous employez un serveur d'valuation, slectionnez un modle de serveur dans le menu Modle de serveur . Pour plus d'informations, consultez la section Configuration d'un serveur d'valuation.
Connexion ou dconnexion d'un dossier distant via un accs rseau
En haut
Vous n'avez pas besoin de vous connecter au dossier distant ; vous tes connect en permanence. Cliquez sur le bouton Actualiser pour afficher vos fichiers distants.
Connexion ou dconnexion d'un dossier distant via un accs FTP

Dans le panneau Fichiers : Pour vous connecter, cliquez sur l'option Connecter un hte distant dans la barre d'outils. Pour vous dconnecter, cliquez sur Dconnecter dans la barre d'outils.
En haut
Rsolution des problmes de configuration du dossier distant

91
En haut
La liste suivante contient des informations sur les problmes courants que vous pouvez rencontrer lors de la configuration d'un dossier distant et sur la faon de les rsoudre. Vous trouverez, sur le site Web d'Adobe, une TechNote dtaille qui fournit des informations spcifiques au dpannage FTP. Cette TechNote se trouve l'adresse www.adobe.com/go/kb405912_fr. Il se peut que la mise en oeuvre FTP de Dreamweaver ne fonctionne pas correctement avec certains serveurs proxy, pare-feu multiniveaux et autres formes d'accs indirect un serveur. Si vous avez des problmes d'accs FTP, demandez l'aide de votre administrateur systme. Pour la mise en oeuvre FTP de Dreamweaver, il est indispensable de se connecter au dossier racine du systme distant. Veillez dsigner le dossier racine du systme distant en tant que rpertoire hte. Si vous avez spcifi le rpertoire hte avec une seule barre oblique (/), vous aurez peut-tre besoin de spcifier un chemin relatif entre le rpertoire auquel vous vous connectez et le dossier racine distant. Si, par exemple, le dossier racine distant est un rpertoire de niveau suprieur, vous pouvez avoir besoin de spcifier ../../ pour le rpertoire hte. Utilisez des traits de soulignement la place des espaces, et vitez, dans la mesure du possible, d'utiliser des caractres spciaux pour les noms de fichiers et de dossiers. La prsence de symboles deux points, de barres obliques, de points et d'apostrophes dans les noms de fichiers ou de dossiers peut parfois causer des problmes. En cas de problme avec un nom de fichier long, raccourcissez ce nom. Sous Mac OS, les noms de fichiers ne peuvent pas compter plus de 31 caractres. Notez que certains serveurs utilisent ce qui est appel, suivant le systme d'exploitation, des liens symboliques (Unix), des raccourcis (Windows) ou des alias (Macintosh), pour connecter un dossier situ en un point du disque du serveur un autre dossier situ ailleurs. Ces alias n'ont gnralement pas d'effet ngatif sur votre capacit vous connecter au dossier ou rpertoire appropri, mais si vous ne pouvez vous connecter qu' une partie du serveur, il s'agit peut-tre d'un problme d'alias. Si vous dcouvrez un message d'erreur du type impossible de placer le fichier , votre dossier distant peut tre satur. Pour plus d'informations, consultez le journal FTP. Remarque : En gnral, si vous avez un problme durant un transfert via FTP, examinez le journal FTP en choisissant Fentre > Rsultats (Windows) ou Site > Journal FTP (Macintosh), puis en cliquant sur l'onglet Journal FTP.
92
Configuration d'un serveur d'valuation

Configuration d'un serveur d'valuation A propos de l'URL Web du serveur d'valuation Si vous envisagez de crer des pages dynamiques, Dreamweaver doit disposer d'un serveur d'valuation, de faon pouvoir gnrer et afficher du contenu dynamique pendant votre travail. Ce serveur d'valuation peut se trouver sur votre ordinateur local, un serveur de dveloppement, un serveur intermdiaire ou un serveur de production. Vous trouverez une explication dtaille de l'utilit d'un serveur d'valuation dans l'article de David Powers du centre de dveloppeurs Dreamweaver. Configuration d'un serveur d'valuation local dans Dreamweaver CS5 .

1. Choisissez Site > Grer les sites.
En haut
2. Cliquez sur Nouveau pour crer un nouveau site, ou choisissez un site Dreamweaver existant puis cliquez sur l'icne de modification. 3. Dans la bote de dialogue Configuration du site, slectionnez la catgorie Serveurs, puis effectuez l'une des oprations suivantes : Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur. Slectionnez un serveur existant, puis cliquez sur le bouton Modifier serveur existant. 4. Dfinissez les options de base requises, puis cliquez sur le bouton Avanc. Remarque : Vous devez entrer une URL Web dans l'cran Base lorsque vous spcifiez un serveur d'valuation. Pour plus d'informations, consultez la section suivante. 5. Sous Serveur d'valuation, slectionnez le modle de serveur utiliser pour votre application Web. Remarque : Depuis la version CS5, Dreamweaver n'installe plus de comportements de serveur ASP.NET, ASP JavaScript ou JSP. (Vous pouvez ractiver les comportements de serveur dconseills manuellement si vous le souhaitez, mais n'oubliez pas que Dreamweaver ne les prend officiellement plus en charge.) Toutefois, si vous travaillez sur des pages ASP.NET, ASP JavaScript ou JSP, Dreamweaver continuera prendre en charge le mode En direct, la coloration de code et les conseils de code pour ces pages. Pour que ces fonctionnalits soient oprationnelles, il n'est pas ncessaire de slectionner ASP.NET, ASP JavaScript ou JSP dans la bote de dialogue Dfinition du site. 6. Cliquez sur Enregistrer pour fermer l'cran Avanc. Ensuite, dans la catgorie Serveurs, spcifiez le serveur que vous venez d'ajouter ou de modifier comme serveur d'valuation.
A propos de l'URL Web pour le serveur d'valuation
En haut
Vous devez dfinir une URL Web pour que Dreamweaver puisse employer un serveur d'valuation pour afficher des donnes et se connecter aux bases de donnes pendant votre travail. Dreamweaver utilise la connexion en cours de cration pour vous fournir des informations utiles au sujet de la base de donnes, comme le nom des tables de la base de donnes et le nom des colonnes de ces tables. L'URL Web d'un serveur d'valuation est constitue du nom de domaine et du nom d'un sous-rpertoire ou d'un rpertoire virtuel du rpertoire de base de votre site Web. Remarque : Bien que cette terminologie, utilise dans Microsoft IIS, puisse diffrer d'un serveur l'autre, les mmes concepts s'appliquent la plupart des serveurs Web. Rpertoire de base Dossier qui, sur le serveur, est mapp sur le nom de domaine de votre site. Supposons que le dossier que vous souhaitez utiliser pour traiter des pages dynamiques est c:\sites\company\, et que ce dossier est votre rpertoire de base (c'est--dire que ce dossier est mapp sur le nom de domaine de votre site, par exemple www.mystartup.com). Dans ce cas, le prfixe 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 rpertoire de base, ajoutez ce sousdossier l'URL. Supposons que votre rpertoire de base est c:\sites\company\, que le nom de domaine de votre site est www.mystartup.com et que le dossier utiliser pour traiter les pages dynamiques est c:\sites\company\inventory. Entrez l'URL Web suivante : http://www.mystartup.com/inventory/ Si le dossier utiliser pour traiter les pages dynamiques n'est pas votre rpertoire de base ni l'un de ses sous-rpertoires, vous devez crer un
93
rpertoire virtuel. Rpertoire virtuel Dossier qui ne se trouve pas physiquement dans le rpertoire de base du serveur, mme s'il apparat dans l'URL. Pour crer un rpertoire virtuel, spcifiez un alias reprsentant le chemin du dossier dans l'URL. Supposons que votre rpertoire de base soit c:\sites\company et votre dossier de traitement d:\apps\inventory, et que vous ayez dfini pour ce dossier l'alias warehouse. Entrez l'URL Web suivante : http://www.mystartup.com/warehouse/ Localhost Dsigne le rpertoire de base dans vos URL o le client (gnralement un navigateur, mais Dreamweaver dans le cas prsent) tourne sur le mme systme que votre serveur Web. Supposons que Dreamweaver tourne sur le mme systme Windows que le serveur Web. Votre rpertoire de base est c:\sites\company et vous avez dfini un rpertoire virtuel nomm warehouse pour dsigner le dossier utiliser pour traiter les pages dynamiques. Les URL Web suivantes doivent tre entres pour les serveurs Web slectionns : Serveur Web ColdFusion MX 7 IIS Apache (Windows) Jakarta Tomcat (Windows) URL Web http://localhost:8500/warehouse/ http://localhost/warehouse/ http://localhost:80/warehouse/ http://localhost:8080/warehouse/
Remarque : Par dfaut, le serveur Web ColdFusion MX 7 s'excute sur le port 8500, le serveur Web Apache sur le port 80 et le serveur Web Jakarta Tomcat sur le port 8080. Le rpertoire de base des utilisateurs excutant le serveur Web Apache sur Macintosh est le suivant : Users/MonNomd'Utilisateur/Sites (MonNomd'Utilisateur correspond votre nom d'utilisateur Macintosh). L'installation de Mac OS 10.1 ou version suprieure entrane la dfinition automatique d'un alias intitul ~MonNomd'Utilisateur. Par consquent, votre URL Web par dfaut dans Dreamweaver est le suivant : http://localhost/~MonNomd'Utilisateur/ Si le dossier que vous souhaitez utiliser pour le traitement des pages dynamiques correspond Users:MonNomd'Utilisateur:Sites:inventory, l'URL Web est la suivante : http://localhost/~MonNomd'Utilisateur/inventory/
Choix d'un serveur d'application
94
Cration d'une version locale de votre site

Pour configurer une version locale de votre site, il vous suffit de prciser le dossier local o vous allez stocker tous les fichiers du site. Le dossier local peut se trouver sur votre ordinateur local ou sur un serveur rseau. 1. Identifiez ou crez le dossier sur l'ordinateur o vous souhaitez stocker la version locale des fichiers de votre site. (Ce dossier peut se trouver n'importe o sur votre ordinateur.) Vous spcifierez ce dossier comme site local dans Dreamweaver. 2. Dans Dreamweaver, choisissez Site > Nouveau site. 3. Dans la bote de dialogue Configuration du site, assurez-vous que la catgorie Site est slectionne. (Elle est normalement slectionne par dfaut.) 4. Dans la zone Nom du site, indiquez le nom de votre site. Ce nom s'affiche dans le panneau Fichiers et dans la bote de dialogue Grer les sites ; il ne s'affiche pas dans le navigateur. 5. Dans la zone de texte Dossier du site local, indiquez le nom du dossier que vous avez identifi l'tape 1 (le dossier sur votre ordinateur dans lequel vous voulez stocker la version locale des fichiers de votre site). Vous pouvez cliquer sur l'icne de dossier droite de la zone de texte pour rechercher le dossier. 6. Cliquez sur Enregistrer pour fermer la bote de dialogue Configuration du site. Vous pouvez prsent commencer travailler sur les fichiers locaux de votre site dans Dreamweaver. Lorsque vous tes prt, vous pouvez complter les autres catgories de la bote de dialogue Configuration du site, dont la catgorie Serveurs, o vous pouvez indiquer un dossier distant sur votre serveur distant. Vous trouverez un didacticiel vido sur la configuration d'un nouveau site Dreamweaver l'adresse www.adobe.com/go/learn_dw_comm08_fr.
95
Options de la bote de dialogue Grer les sites

Options de la bote de dialogue Grer les sites (CS6 et versions ultrieures) Options de la bote de dialogue Grer les sites (CS5 et CS5.5) La bote de dialogue Grer les sites vous donne accs diverses fonctions de gestion de site dans Dreamweaver. A partir de cette bote de dialogue, vous pouvez lancer le processus de cration d'un nouveau site, modifier un site existant, copier un site, supprimer un site ou importer et exporter les paramtres d'un site. Remarque : La bote de dialogue Grer les sites ne vous permet pas de vous connecter un serveur distant ou d'y publier des fichiers. Pour plus d'informations sur la connexion un serveur distant, consultez la section Connexion un serveur distant. Si vous voulez vous connecter un site Web existant, consultez la section Modification d'un site Web distant existant.
Options de la bote de dialogue Grer les sites (CS6 et versions ultrieures)

1. Choisissez Site > Grer les sites. Une liste de sites s'affiche. Si vous n'avez pas encore cr de sites, la liste de sites est vide. 2. Effectuez l'une des oprations suivantes :
En haut
Crer un nouveau site Cliquez sur le bouton Nouveau site pour crer un nouveau site Dreamweaver. Ensuite, spcifiez le nom et l'emplacement de votre nouveau site dans la bote de dialogue Configuration du site. Pour plus d'informations, consultez la section Cration d'une version locale de votre site. Importation d'un site Cliquez sur le bouton Importer le site pour importer un site. Pour plus d'informations, consultez la section Importation et exportation des paramtres d'un site. Remarque : La fonction d'importation se limite importer les paramtres de site qui ont t exports prcdemment depuis Dreamweaver. Elle n'importe pas des fichiers de site afin de crer un nouveau site Dreamweaver. Pour plus d'informations sur la cration d'un nouveau site dans Dreamweaver, voir Cration d'une version locale de votre site. Crer un nouveau site Business Catalyst Cliquez sur le bouton Nouveau site Business Catalyst pour crer un nouveau site Business Catalyst. Pour plus d'informations, consultez la section Cration d'un site Business Catalyst temporaire. Importation d'un site Business Catalyst Cliquez sur le bouton Importer un site Business Catalyst pour importer un site Business Catalyst. Pour plus d'informations, consultez la section Importation d'un site Business Catalyst temporaire. 3. Pour les sites existants, les options suivantes sont galement disponibles : Supprimer Supprime le site slectionn et toutes ses informations de configuration de la liste de sites Dreamweaver ; les fichiers du site proprement dits ne sont pas supprims. Si vous souhaitez supprimer les fichiers du site de votre ordinateur, vous devez le faire manuellement. Pour supprimer un site de Dreamweaver, slectionnez-le dans la liste des sites, puis cliquez sur le bouton Supprimer. Cette opration est irrversible. Modifier Permet de modifier des informations comme le nom d'utilisateur, le mot de passe et les informations sur le serveur d'un site Dreamweaver existant. Slectionnez le site existant dans la liste des sites, puis cliquez sur le bouton Modifier pour modifier le site existant. La bote de dialogue Configuration du site s'ouvre lorsque vous cliquez sur le bouton Modifier pour un site slectionn. Pour plus d'informations sur la modification d'options d'un site existante, cliquez sur le bouton Aide dans les diffrents crans de la bote de dialogue Configuration du site. Dupliquer Cre une copie d'un site existant. Pour dupliquer un site, slectionnez-le dans la liste des sites, puis cliquez sur le bouton Dupliquer. Le site dupliqu s'affiche dans la liste des site, le mot copie tant ajout au nom du site. Pour modifier le nom du site dupliqu, slectionnez-le puis cliquez sur le bouton Modifier. Exporter Permet d'exporter les paramtres du site slectionn sous forme de fichier XML (*.ste). Pour plus d'informations, consultez la section Importation et exportation des paramtres d'un site.
Options de la bote de dialogue Grer les sites (CS5 et CS5.5)
En haut
96
1. Slectionnez Site > Grer les sites puis slectionnez un site dans la liste de gauche. 2. Cliquez sur un bouton pour slectionner l'une des options, apportez les modifications dsires, puis cliquez sur Termin. Nouveau Permet de crer un nouveau site. Lorsque vous cliquez sur le bouton Nouveau, la bote de dialogue Configuration du site s'affiche et vous invite entrer le nom et dfinir l'emplacement de votre nouveau site. Pour plus d'informations, consultez la section Cration d'une version locale de votre site. Modifier Permet de modifier des informations comme le nom d'utilisateur, le mot de passe et les informations sur le serveur d'un site Dreamweaver existant. Slectionnez le site existant dans la liste des sites sur la gauche, puis cliquez sur le bouton Modifier pour modifier le site existant. Pour plus d'informations sur la modification d'options d'un site existant, consultez la section Connexion un serveur distant. Dupliquer Cre une copie d'un site existant. Pour dupliquer un site, slectionnez-le dans la liste de gauche, puis cliquez sur le bouton Dupliquer. Le site dupliqu s'affiche dans la liste des site, le mot copie tant ajout au nom du site. Pour modifier le nom du site dupliqu, slectionnez-le puis cliquez sur le bouton Modifier. Supprimer Supprime le site slectionn et toutes ses informations de configuration de la liste de sites Dreamweaver ; les fichiers du site proprement dits ne sont pas supprims. Si vous souhaitez supprimer les fichiers du site de votre ordinateur, vous devez le faire manuellement. Pour supprimer un site de Dreamweaver, slectionnez-le dans la liste des sites, puis cliquez sur le bouton Supprimer. Cette opration est irrversible. Exporter/Importer Permet d'exporter les paramtres du site slectionn sous la forme d'un fichier XML (*.ste), ou d'importer les paramtres d'un site. Pour plus d'informations, consultez la section Importation et exportation des paramtres d'un site. Remarque : La fonction d'importation se limite importer les paramtres de site qui ont t exports prcdemment. Elle n'importe pas des fichiers de site afin de crer un nouveau site Dreamweaver. Pour plus d'informations sur la cration d'un nouveau site dans Dreamweaver, voir Cration d'une version locale de votre site.
A propos des sites Dreamweaver
97
Contrle de version et paramtres avancs

Catgorie Contrle de version Catgorie Paramtres avancs Pour accder aux catgories Contrle de version et Paramtres avancs de la bote de dialogue Configuration du site, choisissez Site > Grer les sites, slectionnez le site modifier, puis cliquez sur Modifier.
Catgorie Contrle de version
En haut
Vous pouvez extraire et archiver des fichiers l'aide de Subversion. Pour plus d'informations, voir Utilisation de Subversion (svn) pour acqurir et archiver des fichiers.
Catgorie Paramtres avancs

Infos locales
En haut
Dossier des images par dfaut Le dossier dans lequel vous voulez stocker les images de votre site. Tapez le chemin d'accs au dossier, ou cliquez sur l'icne du dossier pour trouver le dossier et le slectionner. Dreamweaver utilise le chemin d'accs au dossier lorsque vous ajoutez des images aux documents. Liens relatifs Dtermine le type de liens que Dreamweaver cre lorsque vous crez des liens vers d'autres actifs ou pages dans votre site. Dreamweaver peut crer deux types de liens : des liens relatifs au document et des liens relatifs la racine du site. Pour plus d'informations sur les diffrences entre les deux, voir Chemins absolus, relatifs au document et relatifs la racine du site. Par dfaut, Dreamweaver cre des liens relatifs au document. Si vous modifiez le paramtre par dfaut et activez l'option Racine du site, veillez entrer l'URL Web correcte pour le site dans la zone URL Web (voir ci-dessous). La modification de ce paramtre ne convertit pas le chemin des liens existants ; il s'applique uniquement aux nouveaux liens que vous crez visuellement l'aide de Dreamweaver. Remarque : Le contenu li par des liens relatifs la racine du site ne s'affiche pas lorsque vous prvisualisez des documents dans un navigateur local, sauf si vous dfinissez un serveur d'valuation ou que vous activez l'option Prvisualiser l'aide d'un fichier temporaire dans Edition > Prfrences > Aperu dans navigateur. En effet, la diffrence des serveurs, les navigateurs ne reconnaissent pas les racines de sites.
URL Web L'URL de votre site Web. Dreamweaver utilise l'URL Web pour crer des liens relatifs la racine du site et pour vrifier les liens lorsque vous employez la fonction de vrification des liens. Les liens relatifs la racine du site sont utiles si vous n'tes pas sr de l'emplacement final, dans la structure des rpertoires, de la page sur laquelle vous travaillez, ou si vous pensez qu'il pourrait vous arriver de dplacer ou de rorganiser ultrieurement des fichiers contenant des liens. Les liens relatifs la racine du site sont des liens dont les chemins d'accs d'autres actifs du site sont relatifs la racine du site, et non au document. Ainsi, si vous dplacez le document par la suite, le chemin d'accs ces actifs reste correct. Supposons que vous ayez indiqu http://www.mysite.com/mycoolsite (rpertoire racine du site du serveur distant) comme URL Web, et que vous ayez galement plac un dossier images dans le rpertoire mycoolsite sur le serveur distant (http://www.mysite.com/mycoolsite/images). Supposons en outre que votre fichier index.html se trouve dans le rpertoire mycoolsite. Lorsque vous crez un lien relatif la racine du site partir du fichier index.html vers une image situe dans le rpertoire images, le lien se prsente comme suit : <img src="/mycoolsite/images/image1.jpg" /> Ce lien est diffrent d'un lien relatif au document, qui serait simplement : <img src="images/image1.jpg" /> L'ajout de /mycoolsite/ la source des images lie l'image par rapport la racine du site, et non au document. En supposant que l'image reste dans le rpertoire image, le chemin d'accs l'image (/mycoolsite/images/image1.jpg) sera toujours correct, mme si vous dplacez le fichier index.html dans un autre rpertoire. Pour plus d'informations, voir Chemins absolus, relatifs au document et relatifs la racine du site. En ce qui concerne la vrification des liens, l'URL Web est ncessaire pour dterminer si un lien est interne ou externe au site. Par exemple, si votre URL Web est http://www.mysite.com/mycoolsite et si le vrificateur de liens trouve une URL http://www.yoursite.com sur votre page, il dtermine que ce dernier lien est externe et le signale comme tel. De mme, le vrificateur de liens utilise l'URL Web pour dterminer si des liens sont internes au site, puis vrifie si ces liens internes ne sont pas coups. Vrification des liens sensible la casse Vrifie que la casse des liens correspond celle des noms de fichiers lorsque Dreamweaver vrifie les liens. Cette option s'adresse plus particulirement aux systmes UNIX, o les noms de fichiers tiennent compte des majuscules et des
98
minuscules. Activer le cache Indique s'il faut crer un cache local pour amliorer la vitesse des tches de gestion des liens et du site. Si vous n'activez pas cette option, Dreamweaver vous demande si vous voulez nouveau crer un cache avant de crer le site. Il est prfrable d'activer cette option, car le panneau Actifs (du groupe Fichiers) est uniquement oprationnel si un cache est cr.
Voilage et autres catgories

Pour plus d'informations sur les catgories Voilage, Design Notes, Colonnes mode Fichier, Modles ou Spry, cliquez sur le bouton Aide de la bote de dialogue.
99
Modification d'un site Web distant existant

Vous pouvez utiliser Dreamweaver pour copier un site distant existant (ou une section de celui-ci) sur votre disque local afin de l'y modifier, mme si vous n'avez pas cr le site initial dans Dreamweaver. Avant de pouvoir modifier ce site, vous devez disposer des informations de connexion correctes et vous connecter au serveur distant du site. 1. Crez un dossier local contenant le site existant, puis dfinissez-le en tant que dossier local du site. (Voir Cration d'une version locale de votre site.) Remarque : Vous devez copier localement la structure complte de la branche concerne du site distant existant. 2. Configurez un dossier distant en utilisant les informations d'accs distance de votre site existant. Vous devez vous connecter au site existant pour tlcharger les fichiers sur votre ordinateur avant de pouvoir les modifier. (Voir Connexion un serveur distant.) Veillez choisir le dossier racine correct pour le site distant. 3. Dans le panneau Fichiers (Fentre > Fichiers), cliquez sur le bouton Connexion un hte distant (pour un accs FTP) ou sur le bouton Actualiser (pour un accs rseau) de la barre d'outils afin d'afficher le site distant. 4. Modifiez le site : Si vous voulez travailler sur le site entier, slectionnez le dossier racine du site distant dans le panneau Fichiers, puis cliquez sur Obtenir les fichiers dans la barre d'outils afin de tlcharger le site entier sur votre disque local. Si vous ne voulez travailler que sur l'un des fichiers ou dossiers du site, accdez ce fichier ou dossier dans l'affichage distant du panneau Fichiers, puis cliquez sur Obtenir les fichiers dans la barre d'outils afin de tlcharger ce fichier sur votre disque local. Dreamweaver copie automatiquement la structure du site distant, dans la mesure o elle est ncessaire pour placer le fichier tlcharg dans la partie correcte de la hirarchie du site. Si vous ne modifiez qu'une partie d'un site, il est en gnral conseill de charger galement les fichiers dpendants, tels que les fichiers d'image.
A propos des sites Dreamweaver Modification d'un site Web existant (blog Dreamweaver)
100
Importation et exportation des paramtres d'un site Dreamweaver

Exportation des paramtres de votre site Importation des paramtres d'un site Vous pouvez exporter les paramtres de votre site sous la forme d'un fichier XML qui pourra par la suite tre import dans Dreamweaver. L'exportation/importation de sites vous permet de transfrer les paramtres d'un site vers d'autres ordinateurs et d'autres versions du produit, de partager les paramtres d'un site avec d'autres utilisateurs et de sauvegarder les paramtres d'un site. La fonction d'exportation/importation ne permet pas d'importer ou d'exporter les fichiers du site. Elle se limite importer/exporter les paramtres du site, afin de vous faire gagner du temps lorsque vous recrez des sites dans Dreamweaver. Pour plus d'informations sur la cration d'un nouveau site dans Dreamweaver, voir Cration d'une version locale de votre site. Exportez les paramtres de votre site rgulirement, de faon disposer d'une copie de sauvegarde au cas o un incident surviendrait sur ce site.
Exportation des paramtres de votre site

En haut
2. Slectionnez un ou plusieurs sites dont vous voulez exporter les paramtres, puis cliquez sur Exporter (CS5/CS5.5) ou sur le bouton (CS6 et versions ultrieures) : Exporter Pour slectionner plusieurs sites, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur chaque site. Pour slectionner une srie de sites, cliquez en maintenant la touche Maj enfonce sur le premier et le dernier site de la srie. 3. Si vous voulez sauvegarder les paramtres de votre site pour vous, choisissez la premire option de la bote de dialogue Exportation du site, puis cliquez sur OK. Dreamweaver enregistre les informations de connexion au serveur distant, comme le nom d'utilisateur et le mot de passe, ainsi que les informations sur le chemin d'accs local. 4. Si vous voulez partager vos paramtres avec d'autres utilisateurs, choisissez la seconde option de la bote de dialogue Exportation du site, puis cliquez sur OK. Dreamweaver n'enregistre aucune information qui ne fonctionnerait pas pour d'autres utilisateurs, comme les informations de connexion votre serveur distant et les chemins d'accs locaux. 5. Pour chaque site dont les paramtres doivent tre exports, recherchez un emplacement o vous souhaitez enregistrer le fichier du site, puis cliquez sur Enregistrer. Dreamweaver enregistre les paramtres de chaque site sous la forme d'un fichier XML possdant l'extension .ste. 6. Cliquez sur Termin. Remarque : Enregistrez le fichier *.ste dans le dossier racine de votre site ou sur votre bureau pour faciliter sa recherche. Si vous ne vous souvenez pas de l'endroit o il se trouve, effectuez sur votre ordinateur une recherche portant sur les fichiers dots de l'extension *.ste.
Importation des paramtres d'un site

1. Choisissez Site > Grer les sites. 2. Cliquez sur Importer (CS5/CS5.5) ou sur le bouton Importer le site (CS6 et versions ultrieures).
En haut
3. Recherchez et slectionnez un ou plusieurs sites (dfinis dans des fichiers ayant une extension .ste) dont vous souhaitez importer les paramtres. Pour slectionner plusieurs sites, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur chaque fichier .ste. Pour slectionner une srie de sites, cliquez en maintenant la touche Maj enfonce sur le premier et le dernier fichier de la srie. 4. Cliquez sur Ouvrir puis sur Termin. Lorsque Dreamweaver a termin d'importer les paramtres du site, les noms du site s'affichent dans la bote de dialogue Grer les sites.
A propos des sites Dreamweaver Sauvegarde et restauration de dfinitions de site
101
102
A propos des sites Dreamweaver

Qu'est-ce qu'un site Dreamweaver ? Description de la structure du dossier local et du dossier distant
Qu'est-ce qu'un site Dreamweaver ?
Haut de la page
Dans Dreamweaver, le terme site se rapporte un lieu de stockage local ou distant dans lequel sont conservs tous les documents appartenant un site Web. Un site Dreamweaver permet d'organiser et de grer tous vos documents Web, de transfrer vos fichiers de site un serveur Web, de suivre et de grer les liens, ainsi que de grer et de partager les fichiers. Dfinissez un site pour tirer le meilleur parti des fonctions offertes par Dreamweaver. Remarque : Pour dfinir un site Dreamweaver, vous devez simplement configurer un dossier local. Pour transfrer des fichiers vers un serveur Web ou pour dvelopper des applications Web, vous devez galement ajouter des informations concernant un site distant et un serveur d'valuation. Un site Dreamweaver se compose de trois parties, ou dossiers, selon votre environnement de travail et le type de site Web que vous dveloppez : Dossier racine local Stocke les fichiers en cours de dveloppement. Dans Dreamweaver, ce dossier est appel votre site local . Ce dossier se trouve gnralement sur votre ordinateur local, mais il peut galement se trouver sur un serveur de rseau. Dossier distant Stocke les fichiers que vous rservez aux valuations, la production, la collaboration, etc. Dans Dreamweaver, ce dossier est appel votre site distant dans le panneau Fichiers. En rgle gnrale, votre dossier distant se trouve sur l'ordinateur partir duquel vous excutez votre serveur Web. Le dossier distant contient les fichiers auxquels les utilisateurs accdent via Internet. Ces deux dossiers (local et distant) vous permettent de transfrer des fichiers entre votre disque dur local et un serveur Web, ce qui facilite la gestion des fichiers sur vos sites Dreamweaver. Vous travaillez sur les fichiers dans le dossier local, puis vous les publiez dans le dossier distant lorsque vous voulez les rendre accessibles d'autres utilisateurs. Dossier du serveur d'valuation Dossier dans lequel Dreamweaver traite les pages dynamiques. Vous trouverez un didacticiel sur la dfinition d'un site Dreamweaver l'adresse www.adobe.com/go/learn_dw_comm08_fr.
Description de la structure du dossier local et du dossier distant
Haut de la page
Si vous voulez utiliser Dreamweaver pour vous connecter un dossier distant, vous devez dfinir ce dossier distant dans la catgorie Serveurs de la bote de dialogue Configuration du site. Le dossier distant (galement baptis rpertoire hte ) doit correspondre au dossier racine local de votre site Dreamweaver. Le dossier racine local est le dossier suprieur de votre site Dreamweaver. Les dossiers distants, tout comme les dossiers locaux, peuvent possder n'importe quel titre. Toutefois, les fournisseurs d'accs Internet (FAI) nomment gnralement les dossiers distants de niveau suprieur de leurs diffrents comptes d'utilisateur public_html, pub_html, etc. Si vous tes responsable de votre serveur distant et si vous pouvez nommer le dossier distant votre guise, il est conseill de donner le mme nom au dossier racine local et au dossier distant. L'exemple ci-dessous reprsente un exemple de dossier racine local gauche et un exemple de dossier distant droite. Le dossier racine local sur l'ordinateur local correspond directement au dossier distant du serveur Web, et non l'un des sous-dossier du dossier distant ou des dossiers situs au-dessus du dossier distant dans la structure des rpertoires.
Remarque : L'exemple ci-dessus reprsente un dossier racine local sur l'ordinateur local, et un dossier distant de niveau suprieur sur le serveur Web distant. Toutefois, si vous grez plusieurs sites Dreamweaver sur l'ordinateur local, vous aurez besoin d'un nombre identique de dossiers distants sur le serveur distant. Dans un tel cas, l'exemple ci-dessus n'est pas d'application. Vous devez au contraire crer diffrents dossiers distants dans le dossier public_html, puis les faire correspondre leurs dossiers racine locaux respectifs sur l'ordinateur local. Lorsque vous tablissez une premire connexion distante, le dossier distant du serveur Web est gnralement vide. Ensuite, lorsque vous utilisez
103
Dreamweaver pour charger tous les fichiers de votre dossier racine local, le dossier distant se remplit de tous vos fichiers Web. La structure des rpertoires du dossier distant doit toujours tre identique celle du dossier racine local. En d'autres termes, il doit toujours exister une correspondance prcise entre les fichiers et les dossiers de votre dossier racine locale et ceux de votre dossier distant. Si la structure du dossier distant ne correspond pas celle du dossier racine local, Dreamweaver transfre les fichiers au mauvais endroit et ils risquent de ne pas tre visibles pour les visiteurs du site. En outre, les chemins d'accs des images et les liens peuvent tre aisment endommags si les structures des dossiers et des fichiers ne sont pas synchronises. Le dossier distant doit dj exister pour que Dreamweaver puisse s'y connecter. Si aucun rpertoire racine n'existe ne fait office de dossier distant sur le serveur Web, crez-en un ou demandez l'administrateur du serveur de votre FAI de se charger de cette opration.
104
Acquisition et placement de fichiers depuis ou vers votre serveur

Transfert de fichiers et fichiers dpendants A propos des transferts de fichiers en arrire-plan Acquisition de fichiers depuis un serveur distant Placement de fichiers sur un serveur distant Gestion des transferts de fichiers
Transfert de fichiers et fichiers dpendants
Haut de la page
Si vous travaillez au sein d'un groupe, vous pouvez utiliser le systme d'extraction et d'archivage pour transfrer des fichiers entre le serveur distant et l'ordinateur local. Si vous tes la seule personne travailler sur le site distant, vous pouvez utiliser les commandes Acqurir et Placer pour transfrer des fichiers sans avoir les archiver ou les extraire. Lorsque vous transfrez un document entre un dossier local et distant l'aide du panneau Fichiers, vous pouvez transfrer les fichiers dpendants de ce document. Les fichiers dpendants sont des images, des feuilles de style externes et d'autres fichiers rfrencs dans votre document qu'un navigateur charge avec le document. Remarque : D'une manire gnrale, il est conseill de tlcharger les fichiers dpendants lorsque le fichier extrait est un nouveau fichier, mais c'est inutile si les versions les plus rcentes des fichiers dpendants sont dj prsentes sur le disque local. Cela s'applique galement lors du transfert et de l'archivage de fichiers : il n'est pas ncessaire si des copies mises jour sont dj prsentes sur le site distant. Les lments de bibliothque sont traits comme des fichiers dpendants. Certains serveurs gnrent des erreurs lors du placement d'lments de bibliothque. Nanmoins, vous pouvez voiler ces fichiers pour qu'ils ne soient pas transfrs.
A propos des transferts de fichiers en arrire-plan
Haut de la page
Vous pouvez effectuer d'autres activits non lies au serveur lors de l'acquisition ou du placement de fichiers. Le transfert de fichiers d'arrire-plan fonctionne pour tous les protocoles de transfert pris en charge par Dreamweaver : FTP, SFTP, LAN, WebDAV, Subversion et RDS. Les activits non lies au serveur comprennent, entre autres, les oprations suivantes: taper, modifier des feuilles de style externes, gnrer des rapports l'chelle du site et crer de nouveaux sites. Les activits ct serveur que Dreamweaver ne peut pas effectuer pendant les transferts de fichiers incluent les tches suivantes : placer/acqurir/archiver/extraire des fichiers ; annuler l'extraction ; crer une connexion une base de donnes ; lier les donnes dynamiques ; Prvisualisation des donnes en mode Affichage en direct insrer un service Web ; supprimer des fichiers ou des dossiers distants ; prvisualiser dans le navigateur sur un serveur d'valuation ; enregistrer un fichier sur un serveur distant ; insrer une image d'un serveur distant ; ouvrir un fichier d'un serveur distant ; placer automatiquement des fichiers lors de l'enregistrement ; faire glisser des fichiers vers le site distant ; couper, copier ou coller des fichiers sur le site distant ; actualiser l'affichage distant. Par dfaut, la bote de dialogue Activit fichiers en arrire-plan est ouverte pendant les transferts de fichiers. Vous pouvez rduire cette bote de dialogue en cliquant sur le bouton Rduire, dans son coin suprieur droit. La fermeture de la bote de dialogue pendant un transfert de fichier entrane l'annulation de cette opration.
105
Acquisition de fichiers depuis un serveur distant
Haut de la page
La commande Acqurir permet de copier les fichiers du site distant sur le site local. Vous pouvez utiliser le panneau Fichiers ou la fentre du document pour acqurir des fichiers. Dreamweaver cre un journal de suivi des activits de fichiers au cours du transfert ; vous pouvez le consulter et l'enregistrer. Remarque : Vous ne pouvez pas dsactiver le transfert de fichiers en arrire-plan. Si le journal des dtails est ouvert dans la bote de dialogue Activit fichiers en arrire-plan, vous pouvez le fermer pour amliorer les performances. Dreamweaver enregistre galement l'activit de tous les transferts de fichiers en FTP. Si une erreur se produit lors du transfert d'un fichier en FTP, le journal du site FTP peut vous aider dterminer le problme.
Acquisition des fichiers depuis un serveur distant via le panneau Fichiers

1. Dans le panneau Fichiers (Fentre > Fichiers), slectionnez les fichiers que vous voulez tlcharger. Les fichiers sont gnralement slectionns dans l'affichage distant, mais il est galement possible de les slectionner dans l'affichage local. Si l'affichage distant est actif, Dreamweaver copie les fichiers slectionns sur le site local ; si l'affichage local est actif, Dreamweaver copie la version distante des fichiers locaux slectionns sur le site local. Remarque : Pour n'acqurir que les fichiers dont la version distante est plus rcente que la version locale, utilisez la commande Synchroniser. 2. Procdez de l'une des manires suivantes pour acqurir un fichier : Cliquez sur le bouton Acqurir dans la barre d'outils du panneau Fichiers. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur le fichier dans le panneau Fichiers, puis slectionnez Acqurir dans le menu contextuel. 3. Cliquez sur Oui dans la bote de dialogue Fichiers dpendants si vous souhaitez tlcharger les fichiers dpendants. Si vous disposez dj de copies locales des fichiers dpendants, cliquez sur Non. L'option par dfaut est de ne pas tlcharger les fichiers indpendants. Vous pouvez dfinir cette option en slectionnant Edition > Prfrences > Site. Dreamweaver tlcharge les fichiers slectionns comme suit : Si vous utilisez le systme d'archivage et d'extraction, l'obtention d'un fichier consistera transfrer une copie locale accessible en lecture seule. Le fichier reste disponible sur le site distant ou sur le serveur d'valuation et peut tre extrait par d'autres membres de l'quipe. Si vous n'utilisez pas le systme d'archivage et d'extraction, l'obtention d'un fichier produit une copie accessible en lecture et criture. Remarque : Si vous travaillez en quipe et que d'autres personnes sont susceptibles de travailler sur les mmes fichiers, ne dsactivez pas l'option Activer l'archivage et l'extraction de fichier. De plus, si d'autres personnes utilisent le systme d'extraction et d'archivage sur le site, vous devez l'utiliser galement. Pour arrter le transfert de fichier n'importe quel moment, cliquez sur le bouton Annuler de la bote de dialogue Activit fichiers en arrire-plan.
Acquisition des fichiers depuis un serveur distant l'aide de la fentre du document

1. Assurez-vous que le document est actif dans la fentre du document. 2. Procdez de l'une des manires suivantes pour acqurir un fichier : Choisissez Site > Acqurir. Cliquez sur l'icne Gestion des fichiers dans la barre d'outils de la fentre du document, puis slectionnez Acqurir dans le menu. Remarque : Si le fichier actuel n'est pas associ au site slectionn dans le panneau Fichiers, Dreamweaver tente de dterminer quel site dfini localement le fichier actuel appartient. Si ce fichier courant n'appartient qu' un seul site local, Dreamweaver ouvre ce site, puis effectue l'opration d'acquisition.
Affichage du journal FTP

1. Cliquez sur le menu Options dans le coin suprieur droit du panneau Fichiers. 2. Choisissez Affichage > Journal FTP du site. Remarque : Dans le panneau Fichiers en mode dvelopp, vous pouvez cliquer sur le bouton Journal FTP.
Haut de la page
Placement de fichiers sur un serveur distant

Vous pouvez placer des fichiers du site local vers le site distant, dans la plupart des cas sans changer l'tat d'extraction du fichier.
Il existe deux types de circonstances dans lesquels il est prfrable d'utiliser la commande Placer plutt que la commande Archiver : Lorsque vous ne travaillez pas en quipe et que vous n'utilisez pas le systme d'archivage et d'extraction.
106
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 systme d'extraction et d'archivage, le fichier est copi sur le site distant, puis extrait pour vous permettre de continuer le modifier. Vous pouvez utiliser le panneau Fichiers ou la fentre du document pour acqurir des fichiers. Dreamweaver cre un journal de suivi des activits de fichiers au cours du transfert ; vous pouvez le consulter et l'enregistrer. Remarque : Vous ne pouvez pas dsactiver le transfert de fichiers en arrire-plan. Si le journal des dtails est ouvert dans la bote de dialogue Activit fichiers en arrire-plan, vous pouvez le fermer pour amliorer les performances. Dreamweaver enregistre galement l'activit de tous les transferts de fichiers en FTP. Si une erreur se produit lors du transfert d'un fichier en FTP, le journal du site FTP peut vous aider dterminer le problme. Vous trouverez un didacticiel consacr au placement de fichiers sur un serveur distant l'adresse www.adobe.com/go/vid0163_fr. Vous trouverez un didacticiel consacr au dpannage des problmes de publication l'adresse www.adobe.com/go/vid0164_fr.
Placement de fichiers sur un serveur distant ou un serveur d'valuation l'aide du panneau Fichiers
1. Dans le panneau Fichiers (Fentre > Fichiers), slectionnez les fichiers tlcharger. Les fichiers sont gnralement slectionns dans l'affichage Site local, mais il est galement possible de les slectionner dans l'affichage Site distant. Remarque : Vous pouvez dcider de ne placer que les fichiers dont la version locale est plus rcente que la version distante. 2. Procdez de l'une des manires suivantes pour placer un fichier sur le serveur distant : Cliquez sur le bouton Placer dans la barre d'outils du panneau Fichiers. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur le fichier dans le panneau Fichiers, puis slectionnez Placer dans le menu contextuel. 3. Si le fichier n'a pas encore t enregistr, une bote de dialogue s'affiche (si vous l'avez indiqu parmi les prfrences de la catgorie Site de la bote de dialogue Prfrences) pour vous permettre de l'enregistrer avant de le placer sur le serveur distant. Cliquez sur Oui pour enregistrer le fichier ou sur Non pour placer la version prcdemment enregistre sur le serveur distant. Remarque : Si vous n'enregistrez pas le fichier, aucune des modifications effectues depuis le dernier enregistrement ne sera place sur le serveur distant. Toutefois, le fichier reste ouvert, ce qui vous permet encore d'enregistrer les changements aprs avoir plac le fichier sur le serveur. 4. Cliquez sur Oui si vous souhaitez envoyer les fichiers dpendants associs aux fichiers slectionns ou sur Non si vous ne voulez pas les envoyer. L'option par dfaut est de ne pas transfrer les fichiers indpendants. Vous pouvez dfinir cette option en slectionnant Edition > Prfrences > Site. Remarque : Il est en gnral conseill de transfrer les fichiers dpendants lorsque vous archivez un nouveau fichier, mais si les versions les plus rcentes des fichiers dpendants figurent dj sur le serveur distant, il n'est pas utile de les transfrer nouveau. Pour arrter le transfert de fichier n'importe quel moment, cliquez sur le bouton Annuler de la bote de dialogue Activit fichiers en arrireplan.
Placement de fichiers sur un serveur distant l'aide de la fentre du document

1. Assurez-vous que le document est actif dans la fentre du document. 2. Procdez de l'une des manires suivantes pour placer un fichier : Choisissez Site > Placer. Cliquez sur l'icne Gestion des fichiers dans la barre d'outils de la fentre du document, puis slectionnez Placer dans le menu. Remarque : Si le fichier actuel n'est pas associ au site slectionn dans le panneau Fichiers, Dreamweaver tente de dterminer quel site dfini localement le fichier actuel appartient. Si ce fichier courant n'appartient qu' un seul site local, Dreamweaver ouvre ce site, puis effectue l'opration de placement.

Haut de la page
Gestion des transferts de fichiers
Vous pouvez afficher l'tat des oprations de transfert de fichiers, ainsi que la liste des fichiers transfrs et de leurs rsultats (transfert russi, ignor ou rat). Vous pouvez galement crer un journal des activits relatives aux fichiers. Remarque : Dreamweaver vous permet d'effectuer d'autres activits non lies au serveur lors du transfert de fichiers vers le serveur ou partir
107
de ce dernier.
Annulation d'un transfert de fichier

Cliquez sur le bouton Annuler de la bote de dialogue Transfert de fichiers en arrire-plan. Si la bote de dialogue n'est pas affiche, cliquez sur le bouton Activit fichiers dans le bas du panneau Fichiers.
Affichage de la bote de dialogue Activit fichiers en arrire-plan pendant les transferts

Cliquez sur le bouton Activit fichiers ou Journal dans le bas du panneau Fichiers. Remarque : Vous ne pouvez pas masquer ni supprimer le bouton Journal. Il s'agit d'une partie permanente du panneau.
Affichage des dtails du dernier transfert de fichiers

1. Cliquez sur le bouton Journal en bas du panneau Fichiers pour ouvrir la bote de dialogue Activit fichiers en arrire-plan. 2. Cliquez sur la flche Dtails.
Enregistrement d'un journal du dernier transfert de fichier

1. Cliquez sur le bouton Journal en bas du panneau Fichiers pour ouvrir la bote de dialogue Activit fichiers en arrire-plan. 2. Cliquez sur le bouton Enregistrer journal et enregistrez les informations sous forme de fichier texte. Vous pouvez alors analyser les mouvements de fichiers en ouvrant le fichier journal dans Dreamweaver ou dans un diteur de texte. Voir aussi Didacticiel consacr au placement de fichiers Didacticiel consacr au dpannage des problmes de publication
108
Gestion de sites Contribute

Gestion de sites Contribute Structure du site et conception de pages pour un site Contribute Transfert de fichiers depuis et vers un site Contribute Autorisations des fichiers et des dossiers Contribute sur le serveur Fichiers spciaux Contribute Prparation d'un site utiliser avec Contribute Administration d'un site Contribute avec Dreamweaver Suppression, dplacement ou modification du nom d'un fichier distant sur un site Contribute Activation de l'accs aux modles sans l'accs au dossier racine pour les utilisateurs de Contribute Dpannage d'un site Contribute
Haut de la page
Adobe Contribute CS4 regroupe les fonctions d'un navigateur Web et d'un diteur de pages Web. Il permet vos collgues ou clients de naviguer jusqu' une page d'un site que vous avez cr et de modifier ou de mettre jour cette page s'ils possdent les droits d'accs adquats. Les utilisateurs de Contribute peuvent ajouter et mettre jour du contenu Web de base, y compris du texte mis en forme, des images, des tableaux et des liens. Les administrateurs de sites Contribute peuvent limiter les actions que les utilisateurs ordinaires (non administrateurs) peuvent effectuer dans un site. Remarque : Cette section s'adresse aux administrateurs de Contribute. En tant qu'administrateur du site, vous donnez la possibilit aux personnes qui ne sont pas administrateurs de modifier des pages en crant et en leur envoyant une cl de connexion (pour plus d'informations sur la faon de procder, consultez l'aide de Contribute). Vous pouvez galement configurer une connexion un site Contribute l'aide de Dreamweaver qui vous permet, vous ou votre concepteur de site, de vous connecter au site Contribute et d'utiliser toutes les fonctions de modification disponibles dans Dreamweaver. Contribute ajoute des fonctionnalits votre site Web avec Contribute Publishing Server (CPS), une suite d'applications de publication et d'outils de gestion utilisateur qui vous permet d'intgrer Contribute au service d'annuaire utilisateur de votre organisation (Lightweight Directory Access Protocol (LDAP) ou Active Directory, par exemple). Lorsque vous activez votre site Dreamweaver en tant que site Contribute, Dreamweaver lit les paramtres d'administration de Contribute chaque fois que vous vous connectez au site distant. Si Dreamweaver dtecte que CPS est actif, il hrite de certaines fonctionnalits des services CPS (restauration des fichiers et consignation des vnements, par exemple). Vous pouvez utiliser Dreamweaver pour vous connecter un site Contribute et modifier un fichier de ce site. La plupart des options Dreamweaver fonctionnent avec un site Contribute de la mme faon qu'avec tout autre site. Toutefois, lorsque vous utilisez Dreamweaver avec un site Contribute, Dreamweaver effectue automatiquement certaines oprations de gestion de fichiers, telles que l'enregistrement de diffrentes versions d'un document et la consignation de certains vnements dans la console CPS. Pour plus d'informations, consultez l'aide de Contribute.
Structure du site et conception de pages pour un site Contribute
Haut de la page
Pour permettre aux utilisateurs de Contribute de modifier votre site Web, tenez compte des considrations suivantes lors de sa structuration : Utilisez une structure de site simple. Evitez de crer de nombreux niveaux de dossiers. Regroupez les lments associs dans un mme dossier. Dfinissez des droits en lecture et en criture appropris pour les dossiers sur le serveur. Ajoutez des pages d'index aux dossiers mesure que vous les crez pour inciter les utilisateurs de Contribute placer les nouvelles pages dans les dossiers appropris. Par exemple, si les utilisateurs de Contribute fournissent des pages contenant des comptes rendus de runions, vous pouvez crer un dossier dans le dossier racine du site appel comptes_rendus et y insrer une page d'index. Vous devez ensuite crer un lien qui renvoie la page d'index des comptes rendus sur la page principale du site. Un utilisateur de Contribute peut alors atteindre la page d'index et crer une page de procs-verbal pour une runion donne, dsigne par un lien depuis cette page. Dans chaque page d'index du dossier, fournissez une liste de liens vers chaque page et document contenus dans ce dossier. Utilisez des conceptions de pages simples en vitant des mises en forme fantaisistes. Utilisez CSS plutt que des balises HTML et attribuez un nom descriptif vos styles CSS. Si les utilisateurs de Contribute utilisent un jeu de styles standard dans Microsoft Word, attribuez vos styles CSS les mmes noms que ceux des styles Word correspondants, afin que Contribute puisse faire correspondre les styles lorsqu'un utilisateur copie des donnes d'un document Word et les colle dans une page Contribute.
109
Pour empcher les utilisateurs de Contribute d'utiliser un style CSS, modifiez le nom du style de sorte qu'il commence par mmhide_. Par exemple, si vous utilisez un style nomm Justification_droite dans une page mais que vous ne souhaitez pas que les utilisateurs de Contribute puissent utiliser ce style, renommez-le de la faon suivante : mmhide_Justification_droite. Remarque : Vous devez ajouter mmhide_ au nom du style en mode Code et non dans le panneau CSS. Dans un souci de simplicit, utilisez aussi peu de styles CSS que possible. Si vous utilisez des inclusions ct serveur pour des lments de pages HTML, par exemple des en-tte ou des pieds de page, crez une page HTML non lie contenant les liens vers les fichiers d'inclusion. Les utilisateurs de Contribute peuvent ensuite marquer cette page et l'utiliser pour rechercher les fichiers d'inclusion et les modifier.
Transfert de fichiers depuis et vers un site Contribute
Haut de la page
Contribute utilise un systme similaire au systme d'archivage et d'extraction de Dreamweaver afin qu'un seul utilisateur la fois puisse modifier une page Web donne. Lorsque vous activez la compatibilit avec Contribute dans Dreamweaver, le systme d'archivage et d'extraction de Dreamweaver est automatiquement activ. Pour transfrer des fichiers depuis et vers un site Contribute l'aide de Dreamweaver, utilisez toujours les commandes Archiver et Extraire. Si vous utilisez les commandes Placer et Acqurir pour transfrer les fichiers, vous risquez d'craser les dernires modifications apportes un fichier par un utilisateur de Contribute. Lorsque vous archivez un fichier dans un site Contribute, Dreamweaver effectue automatiquement une copie de sauvegarde de la version prcdemment archive du fichier dans le dossier _baks et ajoute votre nom d'utilisateur et la date un fichier Design Notes.
Autorisations des fichiers et des dossiers Contribute sur le serveur
Haut de la page
Contribute offre un moyen de grer les autorisations de fichiers et de dossiers pour chaque rle d'utilisateur que vous aurez dfini ; toutefois, Contribute ne permet pas de grer les autorisations de lecture et d'criture de base affectes aux fichiers et aux dossiers par le serveur. Dans Dreamweaver, vous pouvez grer ces autorisations directement sur le serveur. Si un utilisateur de Contribute ne dispose pas de droit d'accs en lecture sur le serveur pour un fichier dpendant, tel qu'une image affiche dans une page, le contenu de ce fichier ne s'affiche pas dans la fentre Contribute. Par exemple, si un utilisateur ne dispose pas de droit d'accs en lecture un dossier d'images, les images contenues dans ce dossier s'affichent sous la forme d'icnes d'image dchire dans Contribute. De mme, les modles Dreamweaver sont stocks dans un sous-dossier du dossier racine du site. Ainsi, si un utilisateur de Contribute ne dispose pas d'accs en lecture au dossier racine, il ne peut pas utiliser les modles de ce site, sauf si vous copiez les modles dans un dossier accessible. Lorsque vous dfinissez un site Dreamweaver, vous devez accorder aux utilisateurs des droits d'accs en lecture au dossier /_mm sur le serveur (sous-dossier _mm du dossier racine), ainsi qu'au dossier /Templates et tous les dossiers contenant des ressources dont ils auront besoin. Si pour une raison quelconque, vous ne pouvez pas accorder de droits d'accs en lecture au dossier /Templates, vous pouvez tout de mme rendre les modles accessibles aux utilisateurs de Contribute. Consultez la rubrique Activation de l'accs aux modles sans l'accs au dossier racine pour les utilisateurs de Contribute. Pour plus d'informations sur les autorisations Contribute, voir Administration de Contribute dans l'aide de Contribute.
Fichiers spciaux Contribute

Contribute utilise divers fichiers spciaux qui ne sont pas destins tre consults par les visiteurs du site :
Haut de la page
le fichier de paramtres partags, avec une extension CSI, qui s'affiche dans un dossier nomm _mm dans le dossier racine du site et contient des informations utilises par Contribute pour la gestion du site ; des versions prcdentes de fichiers, dans des dossiers nomms _baks ; des versions temporaires de pages, afin que les utilisateurs puissent afficher un aperu des modifications ; des fichiers de verrouillage temporaires, indiquant qu'une page spcifique est en cours de modification ou affiche en aperu ; des fichiers Design Notes contenant des mtadonnes relatives aux pages du site. En gnral, vous ne devez pas modifier ces fichiers spciaux dans Dreamweaver ; Dreamweaver les gre automatiquement. Si vous ne souhaitez pas que ces fichiers spciaux Contribute apparaissent sur votre serveur publiquement accessible, vous pouvez dfinir un serveur intermdiaire sur lequel les utilisateurs de Contribute pourront travailler sur les pages. Vous pouvez ensuite rgulirement copier ces pages Web du serveur intermdiaire au serveur de production qui se trouve sur le Web. Si vous utilisez un serveur intermdiaire, copiez uniquement les pages Web sur le serveur de production. Ne copiez aucun des fichiers spciaux Contribute mentionns ci-dessus. En particulier, ne copiez pas les dossiers _mm et _baks sur le serveur de production. Remarque : Pour plus d'informations sur la configuration d'un serveur afin d'viter que les visiteurs ne voient les fichiers des dossiers commenant par un soulign, consultez le chapitre traitant de la scurit des sites Web dans l'aide de Contribute.
110
Parfois, vous devrez supprimer manuellement d'autres fichiers spciaux Contribute. Par exemple, si Contribute n'arrive pas supprimer des pages temporaires d'aperu, une fois l'aperu ferm par l'utilisateur, vous devez supprimer ces pages temporaires manuellement. Le nom de fichier des pages temporaires d'aperu commence par TMP. De mme, un fichier de verrouillage obsolte peut accidentellement rester sur le serveur. Dans ce cas, vous devez le supprimer manuellement pour que les autres utilisateurs puissent modifier la page.
Prparation d'un site utiliser avec Contribute
Haut de la page
Si vous prparez un site Dreamweaver existant pour les utilisateurs de Contribute, vous devez activer la compatibilit avec Contribute de faon explicite afin d'utiliser les fonctions relatives Contribute ; Dreamweaver n'affiche pas de message vous invitant le faire ; toutefois, lorsque vous vous connectez un site qui a t configur en tant que site Contribute (avec un administrateur), Dreamweaver vous invite activer la compatibilit avec Contribute. Tous les types de connexion ne prennent pas en charge la compatibilit avec Contribute. Les restrictions suivantes s'appliquent aux types de connexion : Si vous vous connectez votre site distant l'aide de WebDAV, vous ne pouvez pas activer la compatibilit avec Contribute, car ces systmes de commande source ne sont pas compatibles avec les systmes Design Notes et les systmes d'archivage et d'extraction que Dreamweaver utilise pour les sites Contribute. Si vous utilisez RDS pour vous connecter votre site distant, vous pouvez activer la compatibilit avec Contribute, mais vous devez ensuite personnaliser votre connexion avant de pouvoir la partager avec des utilisateurs de Contribute. Si vous utilisez votre ordinateur local comme serveur Web, vous devez dfinir le site l'aide d'une connexion FTP ou rseau (au lieu d'un simple chemin de dossier local) pour pouvoir partager votre connexion avec des utilisateurs de Contribute. Lorsque vous activez la compatibilit avec Contribute, Dreamweaver active automatiquement Design Notes (y compris l'option Tlcharger les Design Notes pour les partager), ainsi que le systme d'archivage et d'extraction de fichiers. Si Contribute Publishing Server (CPS) est actif sur le site distant auquel vous vous connectez, Dreamweaver notifie CPS ds que vous excutez une opration rseau, telle que l'archivage, la restauration ou la publication d'un fichier. Le CPS conserve une trace de ces vnements, que vous pouvez afficher dans la console d'administration CPS. (Si vous dsactivez CPS, ces vnements ne sont pas consigns.) L'activation de CPS s'effectue via Contribute. Pour plus d'informations, consultez l'aide d'Adobe Contribute. Remarque : Vous pouvez rendre un site compatible avec Contribute sans que Contribute soit install sur votre ordinateur. Toutefois, si vous souhaitez dmarrer Contribute Administrator partir de Dreamweaver, Contribute doit tre install sur le mme ordinateur que Dreamweaver et vous devez tre connect au site distant avant d'activer la compatibilit avec Contribute. Dans le cas contraire, Dreamweaver ne peut pas lire les paramtres d'administration de Contribute pour dterminer si les services CPS et l'option de restauration sont activs. Important : Vous devez vous assurer que le fichier de paramtres partags (fichier CSI) que Contribute emploie pour administrer le site se trouve bien sur le serveur distant et n'est pas endommag. Contribute cre automatiquement ce fichier (et crase ses anciennes versions) ds que vous effectuez des tches d'administration dans Contribute Administrator. Si le fichier de paramtres partags ne se trouve pas sur le serveur, ou s'il est endommag, Dreamweaver vous informe que le fichier requis pour la compatibilit avec Contribute n'existe pas sur le serveur ds que vous tentez une opration rseau (comme un placement). Pour vous assurer que le fichier correct se trouve bien sur le serveur, dsactivez la connexion au serveur dans Dreamweaver, dmarrez Contribute Administrator, apportez une modification administrative, puis reconnectez-vous au serveur dans Dreamweaver. Pour plus d'informations, consultez l'aide d'Adobe Contribute. 1. Choisissez Site > Grer les sites. 2. Slectionnez un site, puis cliquez sur Modifier. 3. Dans la bote de dialogue Configuration du site, dveloppez Paramtres avancs, slectionnez la catgorie Contribute, puis activez l'option Activer la compatibilit avec Contribute. 4. Si une bote de dialogue s'affiche indiquant que vous devez activer Design Notes et la fonction Archiver/Extraire, cliquez sur OK. 5. Si vous n'avez pas dj fourni les informations de contact pour la fonction Archiver/Extraire, entrez votre nom et votre adresse lectronique dans la bote de dialogue, puis cliquez sur OK. L'tat de la restauration, l'tat des services CPS, la zone de texte URL de la racine du site et le bouton Administrer le site dans Contribute apparaissent dans la bote de dialogue Dfinition du site. Si la restauration est active dans Contribute, vous pouvez restaurer les versions prcdentes des fichiers que vous avez modifis dans Dreamweaver. 6. Vrifiez l'URL qui s'affiche dans la zone de texte URL de la racine du site et modifiez-la le cas chant. Dreamweaver construit une URL de la racine du site en fonction des informations de dfinition de site que vous avez fournies, mais il se peut que l'URL construite ne soit pas tout fait correcte. 7. Cliquez sur le bouton Tester pour vrifier si l'URL que vous avez saisie est correcte. Remarque : Si vous tes prt envoyer une cl de connexion ou effectuer les tches d'administration du site Contribute, ignorez les tapes restantes. 8. Cliquez sur Administrer le site dans Contribute si vous voulez apporter des modifications administratives. N'oubliez pas que Contribute doit tre install sur le mme ordinateur si vous voulez ouvrir Contribute Administrator partir de Dreamweaver.
111
9. Cliquez sur Enregistrer puis sur Termin.
Administration d'un site Contribute avec Dreamweaver
Haut de la page
Aprs avoir activ la compatibilit avec Contribute, vous pouvez utiliser Dreamweaver pour lancer Contribute afin d'effectuer les tches d'administration du site. Remarque : Contribute doit tre install sur le mme ordinateur que Dreamweaver. En tant qu'administrateur d'un site Contribute, vous pouvez : modifier les paramtres administratifs au niveau du site ; Les paramtres administratifs de Contribute rassemblent les paramtres qui s'appliquent l'ensemble des utilisateurs de votre site Web. Ces paramtres permettent de configurer Contribute avec prcision pour bnficier d'une meilleure exprience utilisateur. modifier les autorisations accordes aux rles utilisateur de Contribute ; dfinir les utilisateurs de Contribute. Les utilisateurs de Contribute ncessitent certaines informations sur le site pour pouvoir s'y connecter. Vous pouvez regrouper toutes ces informations dans un fichier, appel cl de connexion, que vous envoyez aux utilisateurs de Contribute. Remarque : Une cl de connexion ne correspond pas un fichier de site export de Dreamweaver Avant de donner aux utilisateurs de Contribute les informations de connexion dont ils ont besoin pour modifier les pages, utilisez Dreamweaver pour crer la hirarchie de dossiers de base de votre site, ainsi que les modles et les feuilles de style CSS ncessaires au site. 1. Choisissez Site > Grer les sites. 2. Slectionnez un site, puis cliquez sur Modifier. 3. Dans la bote de dialogue Configuration du site, dveloppez Paramtres avancs, puis slectionnez la catgorie Contribute. 4. Cliquez sur le bouton Administrer le site dans Contribute. Remarque : Ce bouton s'affiche uniquement si vous avez activ la compatibilit avec Contribute. 5. Si ncessaire, tapez le mot de passe administrateur, puis cliquez sur OK. La bote de dialogue Administration du site Web s'affiche. Pour modifier les paramtres administratifs, slectionnez une catgorie dans la liste de gauche, puis modifiez les paramtres en fonction des besoins. Pour modifier les paramtres de rle, dans la catgorie Utilisateurs et rles, cliquez sur Modifier les paramtres de rle, puis apportez les modifications ncessaires. Pour envoyer une cl de connexion afin de dfinir les utilisateurs, dans la catgorie Utilisateurs et rles, cliquez sur Envoyer la cl de connexion, puis renseignez l'Assistant de connexion. 6. Cliquez sur Fermer, cliquez sur OK, puis sur Termin. Pour plus d'informations sur les paramtres administratifs, la gestion des rles utilisateur ou la cration d'une cl de connexion, voir l'aide de Contribute.
Suppression, dplacement ou modification du nom d'un fichier distant sur un site Contribute
Haut de la page
Pour supprimer un fichier d'un serveur distant qui hberge un site Contribute, procdez de la mme faon que pour supprimer un fichier sur le serveur de tout site Dreamweaver. Toutefois, lorsque vous supprimez un fichier d'un site Contribute, Dreamweaver vous demande si vous souhaitez supprimer toutes les anciennes versions du fichier. Si vous dcidez de les conserver, Dreamweaver enregistre une copie de la version actuelle dans le dossier _baks afin que vous puissiez la restaurer ultrieurement. Pour modifier le nom d'un fichier distant ou dplacer le fichier d'un dossier un autre dans un site Contribute, procdez de la mme faon que sur tout site Dreamweaver. Dans un site Contribute, Dreamweaver renomme ou dplace galement les anciennes versions du fichier associes qui sont enregistres dans le dossier _baks. 1. Slectionnez le fichier dans le volet distant du panneau Fichiers (Fentre > Fichiers) et appuyez sur Retour arrire (Windows) ou Arrire (Macintosh). Une bote de dialogue s'affiche vous demandant de confirmer la suppression du fichier. 2. Dans la bote de dialogue de confirmation : Pour supprimer toutes les versions prcdentes du fichier ainsi que la version actuelle, slectionnez l'option Supprimer les versions de restauration. Pour conserver les anciennes versions sur le serveur, dslectionnez l'option Supprimer les versions de restauration. 3. Cliquez sur Oui pour supprimer le fichier.
112
Activation de l'accs aux modles sans l'accs au dossier racine pour les utilisateurs de Contribute
Haut de la page
Dans un site Contribute, les autorisations de fichiers et de dossiers de base sont gres directement sur le serveur. Si pour des raisons de scurit, vous ne pouvez pas accorder de droits d'accs en lecture au dossier /Templates, vous pouvez tout de mme rendre les modles accessibles aux utilisateurs. 1. Dfinissez le site Contribute afin que le dossier racine soit le dossier qui s'affiche en tant que racine pour les utilisateurs. 2. Copiez manuellement le dossier de modles du dossier racine du site principal dans le dossier racine du site Contribute, l'aide du panneau Fichiers. 3. Aprs avoir modifi le site principal, recopiez les modles modifis dans les sous-dossiers appropris. Si vous faites appel cette mthode, n'utilisez pas de liens relatifs la racine du site dans les sous-dossiers. Les liens relatifs la racine du site sont associs au dossier racine principal du serveur, et non au dossier racine dfini dans Dreamweaver. Les utilisateurs de Contribute ne peuvent pas crer de liens relatifs la racine du site. Si les liens d'une page Contribute apparaissent rompus, il peut s'agir d'un problme d'autorisations pour le dossier, en particulier si les liens renvoient des pages qui ne se trouvent pas dans le dossier racine de l'utilisateur de Contribute. Vrifiez les autorisations de lecture et d'criture pour les dossiers sur le serveur.
Dpannage d'un site Contribute
Haut de la page
Si un fichier distant d'un site Contribute semble avoir t extrait, mais qu'il n'est pas rellement verrouill sur l'ordinateur de l'utilisateur, vous pouvez dverrouiller le fichier afin de permettre aux utilisateurs de le modifier. Lorsque vous cliquez sur un bouton li l'administration d'un site Contribute, Dreamweaver vrifie qu'il peut se connecter au site distant et que l'URL de la racine du site indique pour le site est valide. Si Dreamweaver ne peut pas se connecter ou si l'URL n'est pas valide, un message d'erreur s'affiche. Si les outils d'administration ne fonctionnent pas correctement, cela peut tre d au dossier _mm .
Dverrouillage d'un fichier dans un site Contribute

Remarque : Avant de suivre cette procdure, assurez-vous que le fichier n'est pas extrait. Si vous dverrouillez un fichier pendant qu'un utilisateur de Contribute le modifie, plusieurs utilisateurs risquent de modifier ce fichier en mme temps. 1. Effectuez l'une des oprations suivantes : Ouvrez le fichier dans la fentre Document, puis choisissez Site > Annuler extraction. Dans le panneau Fichiers (Fentre > Fichiers), cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis slectionnez Annuler extraction. Une bote de dialogue peut s'afficher, qui indique l'utilisateur ayant extrait le fichier et demande de confirmer le dverrouillage du fichier. 2. Si cette bote de dialogue s'affiche, cliquez sur Oui pour confirmer. Le fichier est dverrouill sur le serveur.
Dpannage des problmes de connexion pour un site Contribute

1. Vrifiez l'URL de la racine du site dans la catgorie Contribute de la bote de dialogue Dfinition de site en ouvrant cette URL dans un navigateur, pour vous assurer qu'elle ouvre la bonne page. 2. Cliquez sur le bouton Tester dans la catgorie Infos distantes de la bote de dialogue Dfinition du site pour vous assurer que vous pouvez vous connecter au site. 3. Si l'URL est correcte mais qu'un message d'erreur s'affiche lorsque vous effectuez un test, contactez votre administrateur systme pour obtenir de l'aide.
Dpannage des outils administratifs de Contribute

1. Sur le serveur, assurez-vous que vous disposez des autorisations de lecture et d'criture, voire d'excution, pour le dossier _mm. 2. Vrifiez que le dossier _mm contient un fichier de paramtres partags portant l'extension CSI. 3. Si ce n'est pas le cas, utilisez l'Assistant de connexion pour crer une connexion au site et devenir administrateur du site. Le fichier de paramtres partags est cr automatiquement lorsque vous devenez administrateur. Pour plus d'informations sur la faon de devenir administrateur d'un site Web Contribute existant, consultez la section Administration de Contribute dans l'aide de Contribute. Voir aussi Importation et exportation des paramtres d'un site Dreamweaver
113
Dfinition des prfrences de site pour le transfert de fichiers

Slectionnez vos prfrences pour le contrle des fonctions de transfert de fichiers dans le panneau Fichiers. 1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2. Dans la bote de dialogue Prfrences, slectionnez la catgorie Site dans la liste de gauche. 3. Dfinissez les options, puis cliquez sur OK. Toujours afficher Indique le site (local ou distant) qui doit toujours tre affich ainsi que le volet (gauche ou droit) du panneau Fichiers dans lequel doivent tre prsents les fichiers locaux et distants. Par dfaut, le site local apparat toujours dans le volet droit. Le volet qui n'a pas t choisi (celui de gauche par dfaut) sera le volet interchangeable : il pourra alors afficher les fichiers de l'autre site (le site distant par dfaut). Fichiers dpendants Affiche une invite proposant de transfrer les fichiers dpendants (images, feuilles de style externes et autres fichiers rfrencs par les fichiers HTML) qui doivent tre chargs par le navigateur en mme temps que le fichier HTML. Par dfaut, les options Invite lors de Acqurir/Extraire et Invite lors de Placer/Archiver sont toutes deux actives. D'une manire gnrale, il est conseill de tlcharger les fichiers dpendants lorsque le fichier extrait est un nouveau fichier, mais c'est inutile si les versions les plus rcentes des fichiers dpendants sont dj prsentes sur le disque local. Cela s'applique galement lors du transfert et de l'archivage de fichiers : il n'est pas ncessaire si des copies mises jour sont dj prsentes dans la destination. Si vous dsactivez ces options, vos fichiers dpendants ne sont pas transfrs. Ainsi, pour forcer l'affichage la bote de dialogue Fichiers dpendants mme lorsque ces options sont dslectionnes, maintenez la touche Alt (Windows) ou Option (Macintosh) enfonce tout en choisissant Acqurir, Placer, Archiver ou Extraire. Connexion FTP Dtermine si la connexion avec le site distant doit tre interrompue aprs le dlai d'inactivit spcifi. Dlai FTP Indique le temps, exprim en secondes, pendant lequel Dreamweaver tente d'tablir une connexion avec le serveur distant. S'il n'y a toujours pas de rponse l'issue du dlai indiqu, Dreamweaver affiche une bote de dialogue pour vous en avertir. Options de transfert FTP Dtermine si Dreamweaver slectionne l'option par dfaut aprs un nombre de secondes spcifi, lorsqu'une bote de dialogue apparat lors du transfert d'un fichier et que l'utilisateur ne fournit aucune rponse. Hte proxy Spcifie l'adresse du serveur proxy par lequel vous vous connectez aux serveurs externes si vous vous trouvez derrire un pare-feu. Dans le cas contraire, laissez ce champ vierge. Si vous vous trouvez derrire un pare-feu, activez l'option Utiliser un proxy de la bote de dialogue Dfinition du site (Serveurs > Modifier un serveur existant (icne reprsentant un crayon) > Autres options). Port du proxy Spcifie le port de votre proxy ou de votre pare-feu par lequel vous passez pour vous connecter au serveur distant. Si vous vous connectez par l'intermdiaire d'un port autre que 21 (port par dfaut pour FTP), tapez son numro ici. Options de placement : Enregistrer les fichiers avant de les placer Indique que les fichiers non enregistrs sont automatiquement enregistrs avant d'tre placs sur le site distant. Options de dplacement : Demander avant de dplacer les fichiers sur le serveur Vous alerte lorsque vous tentez de dplacer des fichiers sur le site distant. Grer les sites Ouvre la bote de dialogue Grer les sites, dans laquelle vous pouvez crer un site ou modifier un site existant. Vous pouvez dfinir si les types de fichiers transfrs doivent l'tre au format ASCII (texte) ou binaire, et ce en personnalisant le fichier FTPExtensionMap.txt situ dans le dossier Dreamweaver/Configuration (sur Macintosh, il s'agit du fichier FTPExtensionMapMac.txt). Pour plus d'informations, voir Extension de Dreamweaver.
114
Test de votre site Dreamweaver

Instructions pour tester les sites Utilisation des rapports pour tester votre site
Instructions pour tester les sites
Haut de la page
Avant de tlcharger le site sur un serveur, et de le dclarer prt tre diffus, il convient de le tester localement (en fait, il est judicieux de tester et de rsoudre les problmes de votre site frquemment au cours de son laboration, afin de traiter les problmes avant qu'ils ne s'aggravent et de les empcher de se rpter). Vous devez vous assurer que vos pages ont l'apparence et le fonctionnement attendus dans les navigateurs cibls, qu'il n'y a pas de liens rompus et que les pages ne sont pas trop longues tlcharger. Vous pouvez galement tester l'ensemble de votre site et y rgler les problmes ventuels en effectuant un rapport de site. Les conseils suivants vous aideront garantir aux visiteurs de votre site une exprience positive : 1. Assurez-vous que les pages fonctionnent dans les navigateurs viss. Vos pages doivent tre lisibles et fonctionnelles dans les navigateurs qui ne prennent pas en charge les styles, les calques, les plug-ins ou les lments JavaScript. Pour les pages qui ne s'affichent pas dans des navigateurs anciens, songez utiliser le comportement Vrifier le navigateur pour rediriger automatiquement les visiteurs vers une autre page. 2. Affichez vos pages dans diffrents navigateurs et sur diffrentes plates-formes. Cela vous donnera la possibilit de constater les diffrences de prsentation, de couleur, de taille de police et de format de fentre par dfaut, autant d'lments qu'il est impossible de prvoir lors de la vrification dans le navigateur cible. 3. Vrifiez que le site ne contient pas de liens briss (rparez-les s'il en contient). Les autres sites tant parfois modifis et rorganiss, il peut arriver que certaines pages vers lesquelles vos liens pointent soient dplaces ou supprimes. Vous pouvez excuter un rapport de vrification des liens pour les tester. 4. Contrlez la taille de vos pages et leur dure de tlchargement. Pour les pages constitues d'un grand tableau, n'oubliez pas que, sous certains navigateurs, les visiteurs ne voient rien tant que le tableau n'est pas entirement charg. Envisagez de fragmenter les grands tableaux ; si c'est impossible, envisagez de placer du contenu, par exemple un message de bienvenue ou une bannire publicitaire, en dehors du tableau, en haut de la page, de manire ce que les utilisateurs puissent au moins voir ce contenu pendant le chargement du tableau 5. Effectuez quelques rapports sur le site pour tester et dpanner le site entier. Vous pouvez rechercher sur le site entier d'ventuels problmes, tels que des documents sans nom, des balises vides ou des balises imbriques redondantes. 6. Validez votre code pour dtecter toute erreur de balise ou de syntaxe. 7. Continuez mettre le site jour et en assurer la maintenance aprs sa publication. La publication d'un site peut tre accomplie de diffrentes manires et constitue un processus continu. La dfinition et l'implmentation d'un systme de contrle de version constituent une partie importante du processus, que ce soit avec les outils intgrs Dreamweaver ou par le biais d'une application de contrle de version externe. 8. Consultez les forums de discussion. Utilisez les forums de discussion Dreamweaver du site Web Adobe, l'adresse www.adobe.com/go/dreamweaver_newsgroup_fr. Vous y trouverez de nombreuses et prcieuses informations sur les diffrents navigateurs, plates-formes, etc. Vous pouvez galement discuter de questions techniques et changer des informations utiles avec d'autres utilisateurs de Dreamweaver. Vous trouverez un didacticiel consacr au dpannage des problmes de publication l'adresse www.adobe.com/go/vid0164_fr.
Utilisation des rapports pour tester votre site
Haut de la page
Vous pouvez excuter des rapports du site sur les attributs de flux de travaux ou HTML. Vous pouvez galement utiliser la commande Rapports pour vrifier les liens de votre site. Les rapports sur le droulement du travail peuvent amliorer la collaboration entre les membres d'une quipe Web. Ces rapports permettent de
115
savoir qui a extrait un fichier, quels fichiers sont associs des Design Notes et quels fichiers ont t modifis rcemment. Vous pouvez dfinir davantage les rapports des Design Notes en spcifiant des paramtres nom/valeur. Remarque : Vous devez avoir dfini une connexion un site distant pour excuter des rapports sur le droulement du travail. Les rapports HTML vous permettent de compiler et de gnrer des rapports pour plusieurs attributs HTML. Vous pouvez contrler les balises de polices imbriques combinables, les textes secondaires manquants, les balises imbriques redondantes, les balises vides amovibles et les documents sans nom. Aprs avoir excut un rapport, vous pouvez l'enregistrer au format XML, puis l'importer dans un modle, une base de donnes ou une feuille de calcul et l'imprimer, ou encore l'afficher sur un site Web. Remarque : Vous pouvez galement ajouter diffrents types de rapport Dreamweaver via le site Web d'Adobe Dreamweaver Exchange.
Excution de rapports afin de tester un site

1. Choisissez Site > Rapports. 2. Slectionnez l'objet du rapport dans le menu Rapport sur, puis dfinissez l'un des types de rapport excuter (droulement du travail ou HTML). Vous ne pouvez pas excuter un rapport sur Fichiers slectionns dans le site si vous n'avez pas auparavant slectionn des fichiers dans le panneau Fichiers. 3. Si vous avez slectionn un rapport de droulement de travail, cliquez sur Paramtres de rapport. Dans le cas contraire, ignorez cette tape. Remarque : Si vous avez slectionn plusieurs rapports de droulement de travail, vous devez cliquer sur le bouton Paramtres de rapport pour chaque rapport. Slectionnez un rapport, cliquez sur Paramtres de rapport et entrez les paramtres ; puis recommencez pour les autres rapports de droulement de travail. Extrait par Cre un rapport qui dresse la liste de tous les documents extraits par un membre spcifique de l'quipe. Entrez le nom d'un membre de l'quipe et cliquez sur OK pour revenir la bote de dialogue Rapports. Design Notes Cre un rapport qui dresse la liste de l'ensemble des Design Notes pour les documents slectionns ou le site. Entrez une ou plusieurs paires nom/valeur, puis slectionnez des valeurs de comparaison dans les menus contextuels correspondants. Cliquez sur OK pour revenir la bote de dialogue Rapports. Modifis rcemment Cre un rapport qui dresse la liste des fichiers qui ont t modifis durant une priode donne. Entrez les plages de dates et l'emplacement des fichiers afficher. 4. Si vous avez slectionn un rapport HTML, choisissez l'un des rapports suivants : Balises de polices imbriques combinables Cre un rapport qui dresse la liste de toutes les balises de polices imbriques pouvant tre combines pour nettoyer le code. Par exemple, <font color="#FF0000"><font size="4">STOP!</font></font> est inclus dans le rapport. Texte secondaire manquant Cre un rapport qui dresse la liste de toutes les balises img qui ne possdent pas de texte secondaire (sec/alt). Le texte secondaire apparat la place des images dans les navigateurs qui affichent seulement du texte ou configurs pour tlcharger les images manuellement. Les lecteurs d'cran lisent le texte secondaire et certains navigateurs affichent du texte secondaire lorsque l'utilisateur passe la souris sur l'image. Balises redondantes imbriques Cre un rapport rpertoriant les balises nettoyer. Par exemple, <i> En Espagne, <i> il pleut</i> principalement dans les plaines</i> est inclus dans le rapport. Balises vides amovibles Cre un rapport qui dresse la liste de toutes les balises vides pouvant tre supprimes afin de nettoyer le code HTML. Par exemple, vous pouvez avoir supprim un lment ou une image en Affichage de code, mais laiss les balises s'appliquant cet lment. Documents sans nom Cre un rapport qui dresse la liste de tous les documents sans titre trouvs conformment aux paramtres slectionns. Dreamweaver tablit un rapport sur tous les documents qui contiennent des titres par dfaut, des balises de titre multiples ou des balises de titre manquantes. 5. Cliquez sur Excuter pour crer le rapport. Selon le type de rapport excuter, vous pouvez tre invit enregistrer votre fichier, dfinir votre site ou slectionner un dossier (si vous ne l'avez pas dj fait). Une liste de rsultats apparat dans le panneau Rapports du site (dans le groupe de panneaux Rsultats).
Utilisation et enregistrement d'un rapport

1. Excuter un rapport (voir la procdure prcdente). 2. Dans le panneau Rapports du site, effectuez l'une des oprations suivantes pour consulter le rapport : Cliquez sur l'en-tte de la colonne en fonction de laquelle vous souhaitez effectuer le tri des rsultats. Vous pouvez trier les rsultats par nom de fichier, numro de ligne ou description. Vous pouvez galement excuter plusieurs rapports
116
et garder les diffrents rapports ouverts. Slectionnez 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 problme. Double-cliquez sur une ligne quelconque du rapport pour afficher le code correspondant dans la fentre de document. Remarque : Si vous vous trouvez en mode Cration, Dreamweaver passe un affichage deux volets et indique le problme identifi directement dans le code. 3. Cliquez sur Enregistrer le rapport. Lorsque vous enregistrez un rapport, vous pouvez l'importer dans un fichier modle existant. Vous pouvez alors soit importer le fichier dans une base de donnes ou un tableur puis l'imprimer, soit l'afficher sur un site Web. Aprs avoir excut les rapports HTML, utilisez la commande Nettoyer HTML pour corriger les erreurs HTML signales. Voir aussi Didacticiel consacr au dpannage des problmes de publication
117
CSS
Conception de pages dans Dreamweaver avec CSS3 Janine Warner (24 fvrier 2011) didacticiel
Dreamweaver CS5 : Inspection CSS Geoff Blake (23 avril 2010) didacticiel vido
118
Panneau CSS Designer

Dans Dreamweaver CC et les versions ultrieures, le panneau Styles CSS a t remplac par CSS Designer.
Cration et jonction de feuilles de style Dfinition de requtes multimdias Dfinition de slecteurs Dfinition de proprits CSS Designer (Fentres > CSS Designer) est un panneau intgr qui vous permet de crer visuellement des fichiers CSS, des rgles et de dfinir des proprits, ainsi que des requtes multimdias.
Panneau CSS Designer Le panneau CSS Designer comprend les volets suivants : Sources Rpertorie toutes les feuilles de style associes au document. Ce volet permet de crer et joindre un style CSS au document, ou dfinir des styles dans le document. @Requtes multimdias Rpertorie toutes les requtes multimdias dans la source slectionne dans le volet Sources. Si vous ne slectionnez pas un style CSS spcifique, ce volet affiche toutes les requtes multimdias associes au document. Slecteurs Rpertorie tous les slecteurs dans la source slectionne dans le volet Sources. Si vous slectionnez galement une requte multimdia, ce volet affine la liste des slecteurs pour cette requte multimdia. Si vous n'avez slectionn aucun style CSS ou requte multimdia, ce volet affiche tous les slecteurs dans le document. Lorsque vous slectionnez global dans le volet @Requtes multimdias, tous les slecteurs qui ne sont pas inclus dans une requte multimdia de la source slectionne sont affichs. Proprits Affiche les proprits que vous pouvez dfinir pour le slecteur spcifi. Pour plus d'informations, voir Dfinition des proprits. CSS Designer fonctionne de faon contextuelle. Autrement dit, pour un contexte prcis ou selon l'lment de page slectionn, vous pouvez afficher les slecteurs et proprits associes. En outre, lorsque vous slectionnez un slecteur dans Designer CSS, la source et les requtes multimdias associes sont mises en surbrillance dans leurs volets respectifs.
119
CSS Designer montrant les proprits de l'image slectionne dans l'affichage en direct
CSS Designer montrant les proprits de l'en-tte slectionn dans l'affichage en direct Remarque : Lorsque vous slectionnez un lment de page, la valeur Calcul est slectionne dans le volet Slecteurs. Cliquez sur un slecteur afin d'afficher la source, la requte multimdia ou les proprits associes. Pour afficher tous les slecteurs, vous pouvez choisir Toutes les sources dans le volet Sources. Pour afficher les slecteurs qui n'appartiennent pas une requte multimdia dans la source slectionne, cliquez sur Global dans le volet @Requtes multimdias.
Cration et ajout de feuilles de style

1. Dans le volet Sources du panneau CSS Designer, cliquez sur , puis sur l'une des options suivantes :
En haut
Crer un nouveau fichier CSS : Pour crer un nouveau fichier CSS et le joindre au document Joindre un fichier CSS existant : Pour joindre un fichier CSS existant au document Dfinir dans la page : Pour dfinir un style CSS dans le document Selon l'option que vous slectionnez, la bote de dialogue Crer un nouveau fichier CSS ou Joindre un fichier CSS existant s'affiche. 2. Cliquez sur Parcourir pour spcifier le nom du fichier CSS et, si vous tes en train de crer un style CSS, l'emplacement dans lequel enregistrer le nouveau fichier. 3. Effectuez l'une des oprations suivantes : Cliquez sur Lier pour lier le document Dreamweaver au fichier CSS Cliquez sur Importer pour importer le fichier CSS dans le document. 4. (Facultatif) Cliquez sur Utilisation conditionnelle et spcifiez la requte multimdia que vous souhaitez associer avec le fichier CSS.
Dfinition de requtes multimdias

1. Dans le panneau CSS Designer, cliquez sur une source CSS dans le volet Sources.
120
En haut
2. Cliquez sur
dans le volet @Requtes multimdias pour ajouter une nouvelle requte multimdia.
La bote de dialogue Dfinition d'une requte multimdia s'affiche et rpertorie toutes les conditions de requte multimdia prises en charge par Dreamweaver. 3. Slectionnez les conditions appropries. Pour plus d'informations sur les requtes multimdias, consultez cet article. Veillez bien spcifier des valeurs valides pour toutes les conditions que vous slectionnez, faute de quoi les requtes multimdias correspondantes ne pourront pas tre cres. Remarque : Seule l'opration Et est actuellement prise en charge pour des conditions multiples. Si vous ajoutez des conditions de requte multimdia l'aide de code, seules les conditions prises en charge sont renseignes dans la bote de dialogue Dfinition d'une requte multimdia. Toutefois, la zone de texte Code dans la bote de dialogue affiche entirement le code (y compris les conditions non prises en charge). Si vous cliquez sur une requte multimdia dans le mode Cration/En direct, la fentre d'affichage permute en fonction de la requte multimdia slectionne. Pour afficher la fentre d'affichage en taille normale, cliquez sur Global dans le volet @Requtes multimdias.
Dfinition de slecteurs
1. Dans le CSS Designer, slectionnez une source CSS dans le volet Sources ou une requte multimdia dans le volet @Requtes multimdias.
En haut
2. Dans le volet Slecteurs, cliquez sur . En fonction de l'lment slectionn dans le document, CSS Designer identifie de faon intelligente le slecteur pertinent et le suggre. Par dfaut, le slecteur est Plus spcifique. Vous pouvez modifier le slecteur afin de le rendre Moins spcifique. Contrairement au panneau Styles CSS, vous ne pouvez pas slectionner directement un type de slecteur dans CSS Designer. Vous devez saisir le nom du slecteur, ainsi que la dsignation du type de slecteur. Par exemple, si vous indiquez un ID, placez un # devant le nom du slecteur.
Pour rechercher un slecteur prcis, utilisez la zone de recherche situe dans la partie suprieure du volet. Pour renommer un slecteur, cliquez sur celui-ci, puis tapez le nom dsir. Pour rorganiser les slecteurs, faites glisser les slecteurs l'emplacement dsir. Pour dplacer un slecteur d'une source vers une autre, faites glisser le slecteur vers la source dsire dans le volet Source. Pour dupliquer un slecteur dans la source slectionne, faites un clic droit sur le slecteur, puis cliquez sur Dupliquer. Pour dupliquer un slecteur et l'ajouter dans une requte multimdia, faites un clic droit sur le slecteur, placez le pointeur de la souris audessus de Dupliquer en requte multimdia, puis choisissez la requte multimdia. Remarque : L'option Dupliquer en requte multimdia n'est disponible que lorsque la source du slecteur slectionn contient des requtes multimdias. Vous ne pouvez pas dupliquer un slecteur provenant d'une source dans une requte multimdia d'une autre source.
Dfinition des proprits

Les proprits sont regroupes dans les catgories suivantes et sont reprsentes par diffrentes icnes en haut du volet Proprits : Mise en forme Text Bordure Arrire-plan Autres (liste des proprits 'Texte seul' et pas des proprits ayant des contrles visuels)
En haut
Activez la case cocher Afficher dfinies pour afficher uniquement les proprits dfinies. Pour afficher toutes les proprits que vous pouvez spcifier pour un slecteur, dsactivez la case cocher Afficher dfinies.
121
Toutes les proprits
Proprits dfinies uniquement
Pour dfinir une proprit, comme width ou border-collapse , cliquez sur les options requises ct de la proprit dans le volet Proprits. Pour plus d'informations sur la dfinition d'un dgrad pour l'arrire-plan ou de contrles de case comme les marges extrieures et intrieures et la position, consultez les liens ci-dessous :
Dfinition des marges extrieures et intrieures et de la position Application de dgrads l'arrire-plan
Les proprits remplaces sont barres.
Format barr pour les proprits remplaces
Dfinition des marges extrieures et intrieures et de la position

Le volet Proprits de CSS Designer vous permet de dfinir rapidement les marges extrieures et intrieures et les proprits de position l'aide des contrles de case.
proprit 'marge'
122
proprit 'marge intrieure'
proprit 'position'
Cliquez sur les valeurs et tapez la valeur dsire. Si vous souhaitez que les quatre valeurs soient identiques et qu'elles changent simultanment, cliquez sur l'icne de liaison ( ) au centre. tout moment, vous pouvez dsactiver ( ) ou supprimer ( ) des valeurs spcifiques, par exemple, la valeur de la gauche marge, tout en conservant les valeurs des marges droite, suprieure et infrieure.
Icnes de dsactivation, suppression et liaison pour les marges
Dsactivation ou suppression de proprits

Le panneau CSS Designer vous permet de dsactiver ou supprimer chaque proprit. La capture d'cran suivante prsente les icnes de dsactivation ( ) et de suppression ( ) pour la proprit width (largeur). Ces icnes sont visibles lorsque vous laissez le pointeur de la souris au-dessus d'une proprit.
Dsactiver/supprimer la proprit
123
Dfinition des proprits CSS

Dans Dreamweaver CC et les versions ultrieures, le panneau Styles CSS a t remplac par CSS Designer. Pour plus d'informations, voir CSS Designer.
Dfinition Dfinition Dfinition Dfinition Dfinition Dfinition Dfinition Dfinition
des des des des des des des des
proprits proprits proprits proprits proprits proprits proprits proprits
de type CSS d'arrire-plan de style CSS de bloc de style CSS de bote de style CSS de bordure de style CSS de liste de style CSS de positionnement de style CSS d'extension de style CSS
Vous pouvez dfinir des proprits pour les rgles CSS, telles que les proprits de police de caractres, d'image et de couleur d'arrire-plan, d'espacement et de mise en page ainsi que l'aspect des lments de la liste. Crez d'abord une nouvelle rgle, puis dfinissez les proprits suivantes.
Dfinition des proprits de type CSS
En haut
La catgorie Type de la bote de dialogue Dfinition des rgles de CSS vous permet de dfinir les paramtres lmentaires de police et de type pour un style CSS. 1. Ouvrez le panneau Styles CSS (Maj+F11), si ncessaire. 2. Double-cliquez sur une rgle ou une proprit existante dans le volet suprieur du panneau Styles CSS. 3. Dans la bote de dialogue Dfinition des rgles de CSS, choisissez Type, puis dfinissez les proprits de style. Laissez les proprits suivantes vides si elles ne sont pas importantes pour ce style : Font-family Permet de dfinir la famille de polices (ou la srie de familles) de ce style. Les navigateurs affichent le texte en utilisant la premire police installe sur l'ordinateur de l'utilisateur au sein de la combinaison de polices choisie. Pour assurer la compatibilit avec Internet Explorer 3.0, utilisez une police Windows en premier. Cet attribut est pris en charge par les deux navigateurs. Font-size Dfinit la taille du texte. Vous pouvez choisir une taille spcifique en cliquant sur une valeur et une unit de mesure, ou une taille relative. Les pixels fonctionnent correctement pour empcher la dformation du texte par les navigateurs. Cet attribut est pris en charge par les deux navigateurs. Font-style permet de spcifier la variation Normal, Italique ou Oblique comme style de la police. La valeur par dfaut est Normal. Cet attribut est pris en charge par les deux navigateurs. Line-height Dfinit la hauteur de la ligne sur laquelle le texte est plac. Ce paramtre fait gnralement rfrence la notion d' interligne. Choisissez Normal pour que la hauteur de ligne soit calcule automatiquement en fonction de la taille de la police ou entrez une valeur fixe et slectionnez une unit de mesure. Cet attribut est pris en charge par les deux navigateurs. Text-decoration Ajoute un effet de soulignement, de barre suprieure, de texte barr ou de clignotement du texte. La valeur par dfaut pour le texte normal est Aucune. La valeur par dfaut pour le texte des liens est Soulign. Si vous dfinissez le paramtre de lien sur aucun, vous pouvez supprimer le soulignement des liens en dfinissant une classe spciale. Cet attribut est pris en charge par les deux navigateurs. Font-weight Applique aux caractres un niveau d'paisseur spcifi en valeur relative ou absolue. Normal quivaut une valeur de 400 ; Gras quivaut une valeur de 700. Cet attribut est pris en charge par les deux navigateurs. Font-variant Dfinit la variante en petites capitales du texte. Dreamweaver n'affiche pas cet attribut dans la fentre de document. Cet attribut est pris en charge par Internet Explorer, mais non par Netscape Navigator. Text-transform Permet de mettre en capitale la premire lettre de chaque mot de la slection ou de passer l'ensemble du texte en majuscules ou minuscules. Cet attribut est pris en charge par les deux navigateurs. Couleur Dfinit la couleur du texte. Cet attribut est pris en charge par les deux navigateurs. 4. Une fois les options dfinies, slectionnez une autre catgorie CSS dans la partie gauche du panneau pour dfinir des proprits de style
124
supplmentaires, puis cliquez sur OK.
Dfinition des proprits d'arrire-plan de style CSS
En haut
Utilisez la catgorie Arrire-plan de la bote de dialogue Dfinition des rgles CSS pour dfinir les paramtres d'arrire-plan d'un style CSS. Les proprits d'arrire-plan s'appliquent tout lment d'une page Web. Rien ne vous empche d'assortir un lment de page d'une couleur ou d'une image d'arrire-plan (derrire le texte, la page, un tableau, etc.). Il vous est galement possible de dfinir la position d'une image d'arrire-plan. 1. Ouvrez le panneau Styles CSS (Maj+F11), si ncessaire. 2. Double-cliquez sur une rgle ou une proprit existante dans le volet suprieur du panneau Styles CSS. 3. Dans la bote de dialogue Dfinition des rgles de CSS, choisissez Arrire-plan, puis dfinissez les proprits de style. Laissez les proprits suivantes vides si elles ne sont pas importantes pour ce style : Couleur d'arrire-plan Dfinit la couleur d'arrire-plan de l'lment. Cet attribut est pris en charge par les deux navigateurs. Image d'arrire-plan Dfinit l'image d'arrire-plan pour l'lment. Cet attribut est pris en charge par les deux navigateurs. Rptition de l'arrire-plan Dtermine comment l'image d'arrire-plan doit tre rpte, le cas chant. Cet attribut est pris en charge par les deux navigateurs. Pas de rptition affiche l'image une seule fois, dans le coin suprieur gauche de l'lment. Rpter cre une mosaque horizontale et verticale de l'image derrire l'lment. Rpter-x et Rpter-y affichent respectivement un bandeau horizontal ou vertical. Les dernires images sont coupes pour s'adapter aux dimensions exactes de l'lment. Remarque : La proprit Rptition vous permet de redfinir la balise body et de dfinir une image d'arrire-plan sans mosaque ni rptition. Pice jointe de l'arrire-plan Dtermine si l'image d'arrire-plan reste fixe par rapport sa position d'origine ou dfile avec le contenu. Notez que certains navigateurs font toujours dfiler l'image avec son contenu. Cet attribut est pris en charge par Internet Explorer, mais non par Netscape Navigator. Position de l'arrire-plan (X) et Position de l'arrire-plan (Y) Spcifient la position initiale de l'image d'arrire-plan par rapport l'lment. Cette proprit peut tre utilise pour aligner une image d'arrire-plan sur le centre de la page, verticalement (X) et horizontalement (Y). Si la proprit Fixation est rgle sur Fixe, cette position est relative la fentre de document, pas l'lment. 4. Une fois les options dfinies, slectionnez une autre catgorie CSS dans la partie gauche du panneau pour dfinir des proprits de style supplmentaires, puis cliquez sur OK.
Dfinition des proprits de bloc de style CSS
En haut
La catgorie Bloc de la bote de dialogue Dfinition des rgles CSS vous permet de dfinir les paramtres d'espacement et d'alignement des balises et des proprits. 1. Ouvrez le panneau Styles CSS (Maj+F11), si ncessaire. 2. Double-cliquez sur une rgle ou une proprit existante dans le volet suprieur du panneau Styles CSS. 3. Dans la bote de dialogue Dfinition des rgles de CSS, choisissez Bloc, puis dfinissez les proprits de style suivantes. Ne dfinissez pas la proprit si elle n'est pas importante pour le style. Espacement des mots Dfinit l'espace devant sparer les mots. Pour dfinir une valeur spcifique, choisissez Valeur dans le menu droulant, puis entrez une valeur numrique. Dans le deuxime menu contextuel, choisissez une unit de mesure (par exemple, pixels, points, etc.). Remarque : Vous pouvez indiquer des valeurs ngatives, mais le rsultat final variera selon le navigateur. Dreamweaver n'affiche pas cet attribut dans la fentre de document. Espacement des lettres Augmente ou rduit l'interlettrage. Une valeur ngative (par exemple, -4) rduit l'espacement entre les caractres. Les paramtres d'interlettrage ont priorit sur les paramtres de justification du texte. Cet attribut est pris en charge par Internet Explorer 4, mais non par Netscape Navigator 6. Alignement vertical Dtermine l'alignement vertical de l'lment auquel il s'applique. Dreamweaver n'affiche cet attribut dans la fentre de document que lorsqu'il est appliqu la balise <img> . Alignement du texte Dtermine l'alignement du texte au sein de l'lment. Cet attribut est pris en charge par les deux navigateurs. Retrait du texte Dtermine le retrait de texte sur la premire ligne. Vous pouvez utiliser une valeur ngative pour crer un retrait ngatif,
125
mais le rsultat final variera selon le navigateur. Dreamweaver n'affiche cet attribut dans la fentre de document que lorsqu'il est appliqu aux lments de niveau bloc. Cet attribut est pris en charge par les deux navigateurs. Espace blanc Dtermine la gestion des espaces au sein de l'lment. Choisissez parmi les trois options suivantes : Normal rduit un seul espace une suite ventuelle de plusieurs caractres d'espacement ; Pre gre les espaces comme si le texte tait insr l'intrieur d'une balise pre (tous les caractres d'espacement, notamment les espaces, tabulations et retours chariot, sont respects) ; Pas de retour spcifie que le texte peut uniquement tre renvoy la ligne l'apparition d'une balise br. Dreamweaver n'affiche pas cet attribut dans la fentre de document. Cet attribut est pris en charge par Netscape Navigator et par Internet Explorer 5.5. Afficher Dtermine le mode d'affichage d'un lment, le cas chant. Aucune dsactive l'affichage d'un lment. 4. Une fois les options dfinies, slectionnez une autre catgorie CSS dans la partie gauche du panneau pour dfinir des proprits de style supplmentaires, puis cliquez sur OK.
Dfinition des proprits de bote de style CSS
En haut
La catgorie Bote de la bote de dialogue Dfinition des rgles CSS vous permet de dfinir les paramtres des balises et des proprits pour le positionnement des lments sur la page. Vous pouvez appliquer des paramtres individuels aux cts d'un lment lors de la dfinition du remplissage et des marges ou utiliser l'option Idem pour tous pour appliquer le mme paramtre tous les cts d'un lment. 1. Ouvrez le panneau Styles CSS (Maj+F11), si ncessaire. 2. Double-cliquez sur une rgle ou une proprit existante dans le volet suprieur du panneau Styles CSS. 3. Dans la bote de dialogue Dfinition des rgles de CSS, choisissez Bote, puis dfinissez les proprits de style suivantes. Ne dfinissez pas la proprit si elle n'est pas importante pour le style. Largeur et Hauteur Dfinissent la largeur et la hauteur de l'lment. Flottante Spcifie le ct autour duquel autres lments entourent l'lment flottant. L'lment flottant est fix du ct de flottement et le reste du contenu l'entoure du ct oppos. Par exemple, une image qui flotte sur la droite est fixe du ct droit et le contenu que vous ajoutez par la suite entoure le ct gauche de l'image. Pour plus d'informations, voir http://css-tricks.com/all-about-floats/ (en anglais). Effacer Spcifie les cts d'un lment qui n'autorisent pas d'autres lments flottants. Remplissage Dfinit la marge intrieure, c'est--dire l'espace qui spare le contenu de l'lment de sa bordure (ou sa marge s'il ne comporte pas de bordure). Dsactivez l'option Idem pour tous si vous voulez dfinir un remplissage diffrent pour chaque ct de l'lment. Idem pour tous Applique le mme remplissage aux bords suprieur, droit, infrieur et gauche de l'lment. Marge Dfinit l'espace qui spare la bordure d'un lment (ou son remplissage s'il ne comporte pas de bordure) d'un autre lment. Dreamweaver n'affiche cet attribut dans la fentre de document que lorsqu'il est appliqu aux lments de niveau bloc (paragraphes, enttes, listes, etc.). Dsactivez l'option Idem pour tous si vous voulez dfinir une marge diffrente pour chaque ct de l'lment. Idem pour tous Applique la mme marge aux bords suprieur, droit, infrieur et gauche de l'lment. 4. Une fois les options dfinies, slectionnez une autre catgorie CSS dans la partie gauche du panneau pour dfinir des proprits de style supplmentaires, puis cliquez sur OK.
Dfinition des proprits de bordure de style CSS
En haut
Le panneau Bordure de la bote de dialogue Dfinition des rgles CSS vous permet de dfinir les paramtres des bordures des lments, par exemple leur paisseur, leur couleur et leur style. 1. Ouvrez le panneau Styles CSS (Maj+F11), si ncessaire. 2. Double-cliquez sur une rgle ou une proprit existante dans le volet suprieur du panneau Styles CSS. 3. Dans la bote de dialogue Dfinition des rgles de CSS, choisissez Bordure, puis dfinissez les proprits de style suivantes. Ne dfinissez pas la proprit si elle n'est pas importante pour le style. Type Dfinit l'aspect de la bordure. L'affichage du style dpend du navigateur. Dsactivez l'option Idem pour tous si vous voulez dfinir un style de bordure diffrent pour chaque ct de l'lment. Idem pour tous Applique le mme style de bordure aux bords suprieur, droit, infrieur et gauche de l'lment.
126
Largeur Dtermine l'paisseur de la bordure de l'lment. Cet attribut est pris en charge par les deux navigateurs. Dsactivez l'option Idem pour tous si vous voulez dfinir une paisseur diffrente pour chaque ct de l'lment. Idem pour tous Applique la mme largeur de bordure aux bords suprieur, droit, infrieur et gauche de l'lment. Couleur Dfinit la couleur de la bordure. Vous pouvez indiquer une couleur diffrente pour chaque ct, mais le rsultat final variera selon le navigateur. Dsactivez l'option Idem pour tous si vous voulez dfinir une couleur diffrente pour chaque ct de l'lment. Idem pour tous Applique la mme couleur de bordure aux bords suprieur, droit, infrieur et gauche de l'lment. 4. Une fois les options dfinies, slectionnez une autre catgorie CSS dans la partie gauche du panneau pour dfinir des proprits de style supplmentaires, puis cliquez sur OK.
Dfinition des proprits de liste de style CSS
En haut
La catgorie Liste de la bote de dialogue Dfinition des rgles CSS vous permet de dfinir les paramtres des balises de liste, tels que la taille et le type des puces. 1. Ouvrez le panneau Styles CSS (Maj+F11), si ncessaire. 2. Double-cliquez sur une rgle ou une proprit existante dans le volet suprieur du panneau Styles CSS. 3. Dans la bote de dialogue Dfinition des rgles de CSS, choisissez Liste, puis dfinissez les proprits de style suivantes. Ne dfinissez pas la proprit si elle n'est pas importante pour le style. Type de style de liste Dtermine l'aspect des puces ou des numros. Cet attribut est pris en charge par les deux navigateurs. Image de style de liste Permet de choisir une image personnalise pour les puces. Cliquez sur Parcourir (Windows) ou Choisir (Macintosh) pour slectionner une image ou tapez le chemin d'accs celle-ci. Position de style de liste Dtermine si le texte de l'lment de la liste est habill et mis en retrait (extrieure) ou si le texte habille la marge de gauche (intrieure). 4. Une fois les options dfinies, slectionnez une autre catgorie CSS dans la partie gauche du panneau pour dfinir des proprits de style supplmentaires, puis cliquez sur OK.
Dfinition des proprits de positionnement de style CSS

1. Ouvrez le panneau Styles CSS (Maj+F11), si ncessaire. 2. Double-cliquez sur une rgle ou une proprit existante dans le volet suprieur du panneau Styles CSS. 3. Dans la bote de dialogue Dfinition des rgles de CSS, choisissez Positionnement, puis dfinissez les proprits de style qui vous conviennent. Laissez les proprits suivantes vides si elles ne sont pas importantes pour ce style : Position Dtermine la faon dont le navigateur doit positionner l'lment slectionn, avec les options suivantes :
En haut
Les proprits de style Positionnement dterminent la faon dont le contenu associ au style CSS slectionn est positionn dans la page.
Absolu place le contenu en fonction des coordonnes indiques dans les zones Emplacement par rapport l'anctre PA ou relatif le plus proche, et dfaut, par rapport au coin suprieur gauche de la page. Relatif place le bloc de contenu en fonction des coordonnes indiques dans les zones Emplacement, par rapport la position du bloc dans le flux de texte du document. Par exemple, si vous dfinissez pour un lment une position relative et des coordonnes d'origine (en haut gauche) de 20 px chacune, l'lment sera dplac de 20 px vers la droite et de 20 px vers le bas par rapport sa position normale dans le flux. Les lments peuvent aussi tre positionns de manire relative, avec ou sans coordonnes haut, gauche, droite ou bas, afin d'tablir un contexte pour les enfants PA. Fixe place le contenu en fonction des coordonnes indiques dans les zones Emplacement, par rapport au coin suprieur gauche du navigateur. Le contenu restera fix dans cette position tandis que l'utilisateur fera dfiler la page. Statique place le contenu son emplacement dans le flux de texte. Il s'agit de la position par dfaut de tous les lments HTML positionnables. Visibilit Dtermine la condition de l'affichage initial du contenu. Si vous ne spcifiez pas de proprit de visibilit, le contenu hrite par dfaut de la valeur de cette proprit pour l'objet parent. La visibilit par dfaut de la balise body est visible. Slectionnez l'une des options de visibilit suivantes : Inherit hrite de la proprit de visibilit du parent du contenu. Visible affiche le contenu, quelle que soit la valeur du parent.
127
Masqu masque le contenu, quelle que soit la valeur du parent. Index Z Dtermine l'ordre de superposition du contenu. Les lments ayant une valeur d'index Z suprieure s'affichent par dessus les lments ayant une valeur d'index Z infrieure (ou aucune valeur d'index Z). Les valeurs peuvent tre positives ou ngatives. (Si votre contenu est position absolue, il est plus facile de modifier l'ordre de superposition l'aide du panneau Elments PA). Dbordement Dtermine ce qui se passe si le contenu d'un conteneur (par exemple, une balise DIV ou P) dpasse la taille de ce dernier. Ces proprits contrlent l'extension de la manire suivante : Visible augmente la taille du conteneur pour que tout son contenu soit visible. Le conteneur s'agrandit vers le bas et vers la droite. Masqu conserve la taille du contenu et coupe tout contenu dpassant la taille. Aucune barre de dfilement n'est affiche. Dfilement ajoute des barres de dfilement au conteneur, que le contenu dpasse ou non la taille du conteneur. Le fait d'intgrer des barres de dfilement vite la confusion cause par l'apparition et la disparition de barres de dfilement dans un environnement dynamique. Dreamweaver n'affiche pas cette option dans la fentre de document. Auto ne fait apparatre les barres de dfilement que lorsque le contenu du conteneur dpasse les limites de ce dernier. Dreamweaver n'affiche pas cette option dans la fentre de document. Emplacement Dfinit l'emplacement et la taille du bloc de contenu. La faon dont le navigateur interprte l'emplacement dpend de l'option choisie pour l'attribut Type. Les valeurs relatives la taille ne sont pas prises en compte si le contenu du bloc de contenu excde la taille spcifie. Les units par dfaut pour l'emplacement et la taille sont les pixels. Vous pouvez galement choisir les units suivantes : pc (picas), pt (points), in (pouces), mm (millimtres), cm (centimtres) ou % (pourcentage de la valeur quivalente de l'objet parent). Les abrviations doivent suivre la valeur sans espace : par exemple, 3mm . Dtourage Dfinit la partie du contenu qui est visible. Si vous indiquez une zone de dtourage, vous pouvez la grer l'aide d'un langage de script tel que Java Script et modifier ces proprits pour crer des effets spciaux, par exemple un effet de volet l'ouverture. Ces effets de volet peuvent tre configurs via le comportement Changer la proprit. 4. Une fois les options dfinies, slectionnez une autre catgorie CSS dans la partie gauche du panneau pour dfinir des proprits de style supplmentaires, puis cliquez sur OK.
Dfinition des proprits d'extension de style CSS

Les proprits de style d'extensions comprennent les filtres, les sauts de page et les options de pointeur.
En haut
Remarque : Un certain nombre d'autres proprits d'extension sont disponibles dans Dreamweaver, mais vous devez passer par le panneau Styles CSS pour y accder. Vous pouvez afficher facilement une liste des proprits d'extension disponibles en ouvrant le panneau Styles CSS (Fentre > Styles CSS), puis cliquant sur le bouton Afficher la vue par catgorie en bas du panneau et en dveloppant la catgorie Extensions. 1. Ouvrez le panneau Styles CSS (Maj+F11), si ncessaire. 2. Double-cliquez sur une rgle ou une proprit existante dans le volet suprieur du panneau Styles CSS. 3. Dans la bote de dialogue Dfinition des rgles de CSS, choisissez Extensions, puis dfinissez les proprits de style suivantes. Ne dfinissez pas la proprit si elle n'est pas importante pour le style. Saut de page avant Force un saut de page en cas d'impression de la page, avant ou aprs l'objet contrl par ce style. Choisissez l'option que vous voulez dfinir dans le menu droulant. Cet attribut n'est pas pris en charge par la version 4.0 des navigateurs, mais peut l'tre dans les versions ultrieures. Curseur Modifie l'aspect du pointeur lorsque celui-ci passe au-dessus de l'objet contrl par ce style. Choisissez l'option que vous voulez dfinir dans le menu droulant. Cet attribut est pris en charge par Internet Explorer 4.0 et versions ultrieures et par Netscape Navigator 6. Filtre Applique des effets spciaux, dont des effets de flou et de ngatif, l'objet contrl par ce style. Slectionnez un effet dans le menu contextuel. 4. Une fois les options dfinies, slectionnez une autre catgorie CSS dans la partie gauche du panneau pour dfinir des proprits de style supplmentaires, puis cliquez sur OK.
128
Cration d'une rgle CSS

Dans Dreamweaver CC et les versions ultrieures, le panneau Styles CSS a t remplac par CSS Designer. Pour plus d'informations, voir CSS Designer. Vous pouvez crer une rgle CSS pour automatiser le formatage de balises HTML ou d'une plage de texte identifie par un attribut class ou ID. 1. Placez le point d'insertion dans le document, puis procdez de l'une des manires suivantes pour ouvrir la bote de dialogue Nouvelle rgle CSS : Choisissez Format > Styles CSS > Nouveau. Dans le panneau Styles CSS (Fentre > Styles CSS), cliquez sur le bouton Nouvelle rgle CSS (+), situ dans la partie infrieure droite du panneau. Slectionnez le texte dans la fentre de document, choisissez Nouvelle rgle CSS dans le menu Rgle cible de l'inspecteur Proprits CSS (Fentre > Proprits), puis cliquez sur le bouton Modifier la rgle ou choisissez une option dans l'inspecteur Proprits CSS (par exemple, cliquez sur le bouton Gras) afin d'entamer la cration d'une nouvelle rgle. 2. Dans la bote de dialogue Nouvelle rgle CSS, spcifiez le type de slecteur pour la rgle CSS crer : Pour crer un style personnalis pouvant tre appliqu comme un attribut class n'importe quel lment HTML, choisissez Classe dans le menu Slecteur de types. Entrez ensuite le nom du style dans la zone de texte Nom du slecteur. Remarque : Les noms de classe doivent commencer par un point et peuvent contenir n'importe quelle combinaison de lettres et de chiffres (par exemple, .monentete1). Si vous omettez le point, Dreamweaver l'insre votre place. Pour dfinir le formatage d'une balise contenant un attribut id spcifique, choisissez ID dans le menu Type de slecteur, puis entrez l'ID unique (par exemple containerDIV) dans la zone de texte Nom du slecteur. Remarque : Les ID doivent commencer par un signe dise (#) et peuvent contenir n'importe quelle combinaison de lettres et de chiffres (par exemple, #monID1). Si vous omettez le signe dise initial, Dreamweaver l'insre votre place. Pour redfinir le formatage par dfaut d'une balise HTML spcifique, choisissez Balise dans le menu Type de slecteur, puis entrez une balise HTML dans la zone de texte Nom du slecteur ou choisissez-en une dans le menu. Pour dfinir une rgle compose influant simultanment sur plusieurs balises ou ID, choisissez l'option Compos puis entrez les slecteurs pour votre rgle compose. Par exemple, si vous entrez div p , tous les lments p contenus dans des balises div seront influencs par la rgle. Au fur et mesure que vous ajoutez ou supprimez des slecteurs, une zone de description explique quels lments seront influencs par la rgle. 3. Choisissez l'endroit o vous voulez dfinir la rgle, puis cliquez sur OK : Pour placer la rgle dans une feuille de style qui est dj associe au document, slectionnez la feuille de style. Pour crer une feuille de style externe, choisissez Nouveau fichier feuille de style. Pour incorporer le style dans le document actif, choisissez Seulement ce document. 4. Dans la bote de dialogue Dfinition des rgles de CSS, choisissez les options dfinir pour la nouvelle rgle CSS. Pour plus d'informations, consultez la section suivante. 5. Lorsque vous avez dfini les proprits de style, cliquez sur OK. Remarque : Le fait de cliquer sur OK sans dfinir d'options de style entrane la cration d'une nouvelle rgle vide.
129
Mises en forme de grille fluide

Utilisation de mises en forme de grille fluide Didacticiels sur les mises en forme de grille fluide Cration d'une mise en forme de grille fluide Insertion d'lments de grille fluide Imbrication d'lments La mise en page d'un site Web doit rpondre et s'adapter aux dimensions du priphrique sur lequel le site Web apparat. Les mises en forme de grille fluide sont un moyen visuel de crer diffrentes mises en page en fonction du priphrique sur lequel le site Web s'affiche. Par exemple, votre site Web sera consult sur des priphriques de bureau, des tablettes et des tlphones portables. Vous pouvez utiliser les mises en forme de grille fluide pour spcifier la mise en page sur chacun de ces priphriques. Selon que le site Web est destin tre consult sur un ordinateur de bureau, une tablette ou un tlphone portable, la mise en forme correspondante est utilise pour l'affichage. Pour plus d'informations : Mise en forme adaptative ou mise en forme ractive ? La version Creative Cloud de Dreamweaver 12.2 comprend de nombreuses amliorations des dispositions de grille fluide, comme la prise en charge des lments structurels HTML5 et la modification aise des lments imbriqus. Vous trouverez la liste complte des amliorations en cliquant ici.
Didacticiels sur les mises en forme de grille fluide

Comment utiliser les mises en forme de grille fluide dans Dreamweaver CS6 (didacticiel) Adobe TV : Cration de concepts adaptatifs l'aide de mises en forme de grille fluide dans Dreamweaver CS6 (vido) Prise en main des grilles fluides Dreamweaver CS6 (didacticiels)
En haut
Cration d'une mise en forme de grille fluide

1. Slectionnez Fichier > Nouvelle mise en forme de grille fluide.
En haut
2. La valeur par dfaut pour le nombre de colonnes dans la grille s'affiche au centre du type de support. Pour personnaliser le nombre de colonnes pour un priphrique, dfinissez la valeur de votre choix. 3. Pour dfinir la largeur d'une page par rapport la taille de l'cran, dfinissez la valeur en pourcentage. 4. Vous pouvez galement modifier la largeur de la gouttire. La gouttire correspond l'espace entre deux colonnes. 5. Spcifiez les options CSS de la page. Lorsque vous cliquez sur Crer, vous tes invit prciser un fichier CSS. Vous pouvez effectuer l'une des oprations suivantes : Crer un nouveau fichier CSS. Ouvrir un fichier CSS existant. Prciser que le fichier CSS en cours d'ouverture est un fichier CSS de grille fluide. La grille fluide pour tlphones portables est affiche par dfaut. Le panneau Insertion correspondant la grille fluide est par ailleurs affich. Utilisez les options du panneau Insertion pour crer votre mise en forme. Pour crer une mise en forme pour d'autres priphriques, cliquez sur l'icne correspondante dans les options situes sous le mode Cration. 6. Enregistrez le fichier. Lorsque vous enregistrez le fichier , vous tes invit enregistrer les fichiers dpendants, tels que boilerplate.css et respond.min.js, dans un emplacement sur votre ordinateur. Spcifiez un emplacement, puis cliquez sur Copier. Le fichier boilerplate.css est bas sur le contenu passe-partout HTML5. Il s'agit d'un jeu de styles CSS qui assure la cohrence du rendu de votre page Web sur plusieurs priphriques. respond.min.js est une bibliothque JavaScript qui contribue la prise en charge des requtes multimdias dans les anciens navigateurs.
130
Insertion d'lments de grilles fluides

Trois nouveaux lments ont t introduits dans Dreamweaver 12.2 : liste simple, liste non ordonne et lment de liste. 1. Slectionnez Insertion > Mise en forme. 2. Slectionnez l'lment que vous souhaitez insrer.
En haut
Tous les lments (fluides et non fluides) sont rpertoris dans le panneau Structure ou dans les options de structure (Insertion > Mise en forme).
3. (12.2) Dans la bote de dialogue qui s'affiche, slectionnez une classe ou entrez une valeur pour l'ID. Les classes du fichier CSS que vous avez spcifi lors de la cration de la page s'affichent dans le menu Classe. L'lment slectionn est insr sur la mise en forme. 4. (Mise jour 12.2) Lorsque vous slectionnez un lment insr, les options permettant de masquer, dupliquer, verrouiller ou supprimer la balise div s'affichent. Pour les balises div places les unes au-dessus des autres, l'option de permutation des balises div s'affiche.
Option A
Etiquette Permuter la balise div
Description Permute l'lment actuellement slectionn avec l'lment au-dessus ou en dessous. Masque l'lment. Pour afficher un lment, procdez de l'une des manires suivantes : Pour afficher les slecteurs d'ID, modifiez la proprit d'affichage dans le fichier CSS bloquer. (display:block ) Pour afficher les slecteurs de classe, supprimez la classe applique (hide_<MediaType> ) dans le code source.
Masquer
Remonter d'une ligne
Dplace l'lment d'une range vers le haut. Duplique l'lment actuellement slectionn. Le code CSS li l'lment est galement dupliqu. Pour les slecteurs d'ID, supprime la fois le code HTML et le code CSS. Pour supprimer uniquement le code HTML, appuyez sur la touche Suppr. Pour les slecteurs de classe, seul le code HTML est supprim. Convertit l'lment en un lment positionnement absolu. Pour les slecteurs de classe, l'option Alignement agit comme un bouton de marge zro. Pour les slecteurs d'ID, le bouton Alignerment aligne l'lment sur la grille.
Dupliquer
Supprimer
Verrouiller
Alignement
Il est possible de parcourir les lments fluides d'une page de manire cyclique en utilisant les touches flches gauche et droite.
131
Slectionnez la limite de l'lment, puis appuyez sur la touche flche.
Imbrication d'lments
En haut
Pour imbriquer des lments fluides dans d'autres lments fluides, assurez-vous que le focus se trouve l'intrieur de l'lment parent. Insrez ensuite l'lment enfant requis. La duplication imbrique est galement prise en charge. La duplication imbrique permet de dupliquer le code HTML (de l'lment slectionn) et de gnrer le code CSS de grille fluide. Les lments absolus contenus dans l'lment slectionn sont positionns en consquence. Il est par ailleurs possible de dupliquer les lments imbriqus l'aide du bouton Dupliquer. Lorsque vous supprimez un lment parent, le code CSS correspondant l'lment, ses enfants et le code HTML associ sont galement supprims. Il est possible de supprimer simultanment tous les lments imbriqus l'aide du bouton Supprimer (raccourci clavier : Ctrl+Suppr).
132
Mise en forme des pages avec CSS

A propos de la mise en page CSS A propos de la structure de mise en page CSS Cration d'une page avec une mise en forme CSS
A propos de la mise en page CSS
En haut
Une mise en page CSS utilise le format de feuilles de style CSS, au lieu de tables ou de cadres HTML traditionnels, pour organiser le contenu d'une page Web. Les lments de base de la mise en forme CSS est la balise div : il s'agit d'une balise HTML qui, la plupart du temps, sert de conteneur pour du texte, des images et d'autres lments de page. Lorsque vous crez une mise en forme CSS, vous placez des balises div dans la page, leur ajoutez du contenu et les positionnez en diffrents endroits. A la diffrence des cellules de tableau, qui ne peuvent exister qu' l'intrieur de lignes et de colonnes d'un tableau, les balises div peut figurer n'importe o sur une page Web. Vous pouvez positionner des balises div de faon absolue (en indiquant des coordonnes x et y) ou de faon relative (en spcifiant leur emplacement par rapport leur position actuelle). Vous pouvez galement placer des balises div afin de dfinir des lments flottants, des marges intrieures et des marges. Cette mthode est privilgie dans les normes Web modernes. La cration de mises en forme CSS entirement nouvelles peut s'avrer difficile, car il existe de trs nombreux moyens de procder. Vous pouvez crer une mise en forme CSS simple deux colonnes en dfinissant des lments flottants, des marges, des remplissages et d'autres proprits CSS dans un nombre de combinaisons quasi illimit. En outre, le problme de restitution sur diffrents types de navigateurs entrane un affichage alatoire de certaines mises en forme CSS qui sont correctement ou incorrectement restitues en fonction du navigateur utilis. Dreamweaver vous permet de crer facilement des pages l'aide de mises en forme CSS en fournissant 16 mises en forme prdfinies qui fonctionnent sur diffrents types de navigateurs. L'utilisation de mises en forme CSS prdfinies fournies avec Dreamweaver constitue la faon la plus simple de crer une page avec une mise en forme, mais vous pouvez galement crer des mises en forme CSS l'aide d'lments positionnement absolu (lments PA). Dans Dreamweaver, un lment PA est un lment de page HTML (plus prcisment, une balise div ou toute autre balise) auquel une position absolue est attribue. Toutefois, du fait de leur positionnement absolu, les lments PA de Dreamweaver prsentent l'inconvnient de ne jamais adapter leur position la page en fonction de la taille de la fentre du navigateur. Si vous tes un utilisateur chevronn, vous pouvez galement insrer des balises div manuellement et leur appliquer des styles de positionnement CSS pour crer des mises en page.
A propos de la structure de mise en page CSS

Avant de lire cette section, vous devez vous tre familiaris avec les concepts CSS de base.
En haut
Les lments de base de la mise en forme CSS est la balise div : il s'agit d'une balise HTML qui, la plupart du temps, sert de conteneur pour du texte, des images et d'autres lments de page. L'exemple ci-dessous montre une page HTML qui contient trois balises div distinctes : une balise container de grande taille, et deux autres balises (une balise sidebar et une balise main content) situes l'intrieur de la balise container.
A. div container B. div sidebar C. div main content Voici le code correspondant ces trois balises div dans le code HTML :  <div id="container">  <div id="sidebar"> <h3>Contenu de la barre latrale</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p> </div>  <div id="mainContent"> <h1>Contenu principal</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p> <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in,
133
vulputate at, odio.</p> <h2>Titre de niveau H2</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p> </div> </div> Dans l'exemple ci-dessus, aucun style n'est associ aux balises div. Si aucune rgle CSS n'est dfinie, chaque balise div et son contenu prend un emplacement par dfaut sur la page. Toutefois, si chaque balise div possde un ID unique (comme dans l'exemple ci-dessus), vous pouvez utiliser ces identificateurs pour crer des rgles CSS qui, une fois appliques, modifient le style et le positionnement des balises div. La rgle CSS suivante, qui peut rsider dans la section head du document ou dans un fichier CSS externe, cre des rgles de style pour la premire balise div (container) de la page : #container { width: 780px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; } La rgle #container applique un style la balise div container qui lui donne une largeur de 780 pixels, un arrire-plan blanc, aucune marge (depuis la gauche de la page), une bordure noire continue de 1 pixel et un texte align gauche. Les rsultats de l'application de la rgle la balise div container sont les suivants :
Balise div Container, 780 pixels, pas de marge A. Texte align gaucheB. Arrire-plan blanc C. 1 Bordure noire continue de 1 pixel La rgle CSS suivante cre des rgles de style pour la balise div sidebar : #sidebar { float: left; width: 200px; background: #EBEBEB; padding: 15px 10px 15px 20px; } La rgle #sidebar applique un style la balise div sidebar qui lui donne une largeur de 200 pixels, un arrire-plan gris, un remplissage haut et bas de 15 pixels, un remplissage droite de 10 pixels et un remplissage gauche de 20 pixels. L'ordre de remplissage par dfaut est le suivant : haut, droite, bas, gauche. En outre, la rgle positionne la balise div sidebar avec float: left, proprit qui pousse la balise div sidebar vers le ct gauche de la balise div container. Les rsultats de l'application de la rgle la balise div sidebar sont les suivants :
Div sidebar, flottante gauche A. Largeur de 200 pixelsB. Remplissage en haut et en bas, 15 pixels Enfin, la rgle CSS pour la balise div container principale termine la mise en forme : #mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px; } La rgle #mainContent applique un style la balise div main qui lui donne une marge gauche de 250 pixels, ce qui correspond un espace de 250 pixels entre le ct gauche de la balise div container et le ct gauche de la balise div main content. En outre, la rgle prvoit 20 pixels d'espacement sur les cts droit, bas et gauche de la balise div main content. Les rsultats de l'application de la rgle la balise div mainContent sont les suivants : Le code complet ressemble ce qui suit :
134
Div main content, marge gauche de 250 pixels A. Remplissage gauche de 20 pixels B. Remplissage droite de 20 pixels C. Remplissage en bas de 20 pixels
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> #container { width: 780px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; } #sidebar { float: left; width: 200px; background: #EBEBEB; padding: 15px 10px 15px 20px; } #mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px; } </style> </head> <body>  <div id="container">  <div id="sidebar"> <h3>Contenu de la barre latrale</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p> </div>  <div id="mainContent"> <h1>Contenu principal</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p> <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> <h2>Titre de niveau H2</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p> </div> </div> </body> Remarque : L'exemple code ci-dessus est une version simplifie du code qui cre la mise en forme deux colonnes avec encadr gauche fixe lorsque vous crez un nouveau document l'aide des mises en formes prdfinies fournies avec Dreamweaver.
Cration d'une page avec une mise en forme CSS
En haut
Lors de la cration d'une nouvelle page dans Dreamweaver, vous pouvez en crer une qui contient dj une mise en forme CSS. Dreamweaver vous permet de choisir parmi 16 mises en forme CSS. En outre, vous pouvez crer vos propres mises en forme CSS et les ajouter au dossier de configuration pour qu'elles figurent parmi les choix de mise en forme dans la bote de dialogue Nouveau Document. Les mises en page CSS de Dreamweaver sont restitues correctement dans les navigateurs suivants : Firefox (Windows et Macintosh) 1.0, 1.5, 2.0 et, and 3.6, Internet Explorer (Windows) 5.5, 6.0, 7.0 et 8.0, Opera (Windows et Macintosh) 8.0, 9.0 et 10.0, Safari 2.0, 3.0 et 4.0 et Chrome 3.0. Vous trouverez un article expliquant comment utiliser les mises en forme CSS fournies avec Dreamweaver dans le Ple de dveloppement Dreamweaver. D'autres mises en forme CSS sont disponibles sur le site Adobe Dreamweaver Exchange.

1. Choisissez Fichier > Nouveau. 2. Dans la bote de dialogue Nouveau document, slectionnez la catgorie Modle vierge. Il s'agit de la slection par dfaut. 3. Pour Type de page, slectionnez le type de page crer. Remarque : Vous devez slectionner un type de page HTML pour la mise en forme. Par exemple, vous pouvez slectionner HTML, ColdFusion, PHP, etc. Vous ne pouvez pas crer de page ActionScript, CSS, Library Item, JavaScript, XML, XSLT ou ColdFusion Component avec une mise en forme CSS. Les types de page de la catgorie Autre dans la bote de dialogue Nouveau document ne peuvent pas non plus inclure de mises en page CSS. 4. Pour Mise en forme, slectionnez la mise en forme CSS utiliser. Vous pouvez choisir parmi 16 mises en forme diffrentes. La fentre Aperu montre la mise en forme slectionne et en donne une brve description. Les mises en forme CSS prdfinies fournissent les types de colonnes suivants : Fixe La largeur de colonne est dfinie en pixels. La colonne n'est pas redimensionne selon la taille du navigateur ou des paramtres de texte du visiteur du site. Liquide La largeur de colonne est dfinie en tant que pourcentage de la largeur du navigateur du visiteur du site. La mise en page s'adapte si le visiteur du site augmente ou diminue la largeur de son navigateur, mais pas en fonction des paramtres de texte dfinis par le visiteur. 5. Slectionnez un type de document dans le menu DocType.
135
6. Slectionnez un emplacement pour le fichier CSS de la mise en forme dans le menu droulant CSS de mise en forme dans. Ajouter l'en-tte Ajoute le code CSS de mise en forme l'en-tte de la page que vous crez. Crer un nouveau fichier Ajoute le code CSS de mise en forme une nouvelle feuille de style CSS externe et associe la nouvelle feuille de style la page que vous crez. Lier au fichier existant Permet d'indiquer un fichier CSS existant qui contient dj les rgles CSS requises pour la mise en forme. Cette option est particulirement utile si vous voulez utiliser la mme mise en forme CSS (les rgles CSS figurant dans un fichier) dans plusieurs documents. 7. Effectuez l'une des oprations suivantes : Si vous avez slectionn Ajouter l'en-tte dans le menu droulant CSS de mise en forme dans (l'option par dfaut), cliquez sur Crer. Si vous avez slectionn Crer un nouveau fichier dans le menu droulant CSS de mise en forme, cliquez sur Crer, puis spcifiez un nouveau nom pour le nouveau fichier externe dans la bote de dialogue Enregistrer la feuille de style sous. Si vous avez slectionn Lier au fichier existant dans le menu droulant CSS de mise en forme dans, ajoutez le fichier externe dans la zone de texte Lier le fichier CSS en cliquant sur l'icne d'ajout de feuille de style, en renseignant la bote de dialogue Associer feuille de style externe et en cliquant sur OK. Une fois que vous avez termin, cliquez sur Crer dans la bote de dialogue Nouveau document. Remarque : Lorsque vous slectionnez l'option Lier au fichier existant, le fichier que vous spcifiez doit dj contenir les rgles correspondant au fichier CSS. Lorsque vous placez le CSS de mise en forme dans un nouveau fichier ou lorsque vous le liez un fichier existant, Dreamweaver lie immdiatement le fichier la page HTML que vous crez. Remarque : Les commentaires conditionnels pour Internet Explorer, qui permettent de contourner les problmes de rendu dans IE, restent incorpors dans la section head du nouveau document de mise en forme CSS, mme si vous slectionnez Nouveau fichier externe ou Fichier externe existant en tant qu'emplacement pour votre fichier CSS de mise en forme; 8. (Facultatif) Vous pouvez galement lier des feuilles de style CSS la nouvelle page (sans rapport avec la mise en forme CSS) lors de la cration de cette page. Pour ce faire, cliquez sur l'icne Ajouter une feuille de style au-dessus du volet Lier le fichier CSS, puis slectionnez une feuille de style CSS. Vous trouverez une description dtaille de ce processus dans l'article de David Powers Automatically attaching a style sheet to new documents (en anglais).
Ajout de mises en forme CSS personnalises la liste de choix

1. Crez une page HTML contenant la mise en forme CSS que vous souhaitez ajouter la liste de choix de la bote de dialogue Nouveau document Le fichier CSS correspondant la mise en forme doit rsider dans la section head de la page HTML. Pour uniformiser votre mise en forme CSS personnalise avec les autres mises en formes fournies avec Dreamweaver, vous devez enregistrer votre fichier HTML avec une extension .htm. 2. Ajoutez la page HTML au dossier Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts. 3. (Facultatif) Ajoutez une image d'aperu de votre mise en forme (par exemple, un fichier .gif ou .png) au dossier Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts. Les images par dfaut fournies avec Dreamweaver sont des fichiers PNG de 227 pixels de large x 193 pixels de haut. Donnez votre image d'aperu le mme nom de fichier que votre fichier de faon pouvoir l'identifier facilement. Par exemple, si votre fichier HTML est nomm myCustomLayout.htm, appelez votre image d'aperu myCustomLayout.png. 4. (Facultatif) Crez un fichier de notes pour votre mise en forme personnalise en ouvrant le dossier Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes, en copiant et en collant les fichiers de notes existants dans le mme dossier, et en renommant la copie en fonction de votre mise en forme personnalise. Par exemple, vous pouvez copier le fichier oneColElsCtr.htm.mno et le renommer myCustomLayout.htm.mno. 5. (Facultatif) Aprs avoir cr un fichier de notes pour votre mise en forme personnalise, vous pouvez ouvrir le fichier et spcifier le nom de la mise en forme, sa description et une image d'aperu.
Liaison une feuille de style CSS externe
136
Description des feuilles de style en cascade

A A A A A propos propos propos propos propos des feuilles de style en cascade des rgles CSS des styles en cascade de la mise en forme du texte et de CSS des proprits de la forme courte des styles CSS
A propos des feuilles de style en cascade
En haut
Les feuilles de style en cascade (CSS) regroupent des rgles de formatage qui dterminent l'aspect du contenu d'une page Web. Quand vous utilisez des styles CSS pour mettre une page en forme, vous sparez le contenu de la prsentation. Le contenu de votre page (le code HTML) rside dans le fichier HTML, tandis que les rgles CSS qui dfinissent la prsentation du code rsident dans un autre fichier (une feuille de style externe) ou dans une autre partie du document HTML (gnralement dans la section head). La sparation du contenu et de la prsentation facilite considrablement la gestion de l'aspect de votre site partir d'un point central car vous n'avez pas besoin de mettre jour les proprits de toutes les pages chaque fois que vous souhaitez apporter une modification. La sparation du contenu et de la prsentation se traduit galement par un code HTML simplifi et mieux structur qui permet de raccourcir les temps de chargement pour les navigateurs, et elle simplifie la navigation pour les personnes ayant des problmes d'accessibilit (par exemple, qui utilisent des lecteurs d'cran). CSS vous offre une plus grande souplesse et une plus grande matrise de l'aspect de votre page. Les feuilles de style CSS vous permettent de contrler de nombreuses proprits de texte, notamment les polices de caractres et les tailles de police, les styles gras, italique, soulignement et les ombres du texte, la couleur du texte et la couleur d'arrire-plan, la couleur des liens et le soulignement des liens, etc. En utilisant CSS pour contrler vos polices de caractres, vous vous assurez d'un traitement plus cohrent de la mise en page et de l'aspect de votre page dans diffrents navigateurs. Outre le formatage du texte, CSS permet de grer le format et le positionnement des blocs d'lments d'une page Web. Un lment de niveau bloc est un contenu autonome, gnralement spar par une nouvelle ligne dans le code HTML, et format visuellement comme un bloc. Par exemple, les balises h1, les balises p et les balises div produisent toutes des lments de niveau bloc sur une page Web. Vous pouvez dfinir des marges et des bordures pour les lments de niveau bloc, les placer dans un emplacement spcifique, leur ajouter une couleur d'arrire-plan, faire flotter du texte autour d'eux, etc. C'est essentiellement en manipulant des lments de niveau bloc que vous ralisez des mises en page avec CSS.
A propos des rgles CSS
En haut
Une rgle de formatage CSS se compose de deux entits : le slecteur et la dclaration (ou dans la plupart des cas, un bloc de dclarations). Le slecteur est un terme (tel que p , h1, un nom de classe ou un identifiant) qui identifie l'lment mis en forme tandis que le bloc de dclaration dfinit quels sont les proprits de style. Dans l'exemple suivant, h1 correspond au slecteur tandis que tout ce qui est plac entre les crochets ({}) correspond la dclaration : h1 { font-size: 16 pixels; font-family: Helvetica; font-weight:bold; } La dclaration est compose de deux entits : la proprit (par exemple, font-family ) et la valeur (par exemple, Helvetica). Dans la rgle CSS prcdente, un style particulier a t cr pour les balises h1 : le texte de toutes les balises H1 lies ce style sera associ une police Helvetica, d'une taille de 16 pixels et en gras. Le style (qui est dfini par une rgle ou par un groupe de rgles) se trouve dans un emplacement distinct de celui du formatage du texte rel, gnralement dans une feuille de style externe ou dans la section head du document HTML. Ainsi, une rgle concernant les balises h1 peut s'appliquer de nombreuses balises la fois (et dans le cas de feuilles de style externes, la rgle peut s'appliquer de nombreuses balises la fois dans un grand nombre de pages diffrentes). De cette faon, CSS offre une capacit de mise jour extrmement aise Lorsque vous mettez jour une rgle CSS dans un emplacement, le formatage de tous les lments qui utilisent le style dfini est automatiquement mise jour en fonction du nouveau style.
137
Vous pouvez dfinir les types de styles suivants dans Dreamweaver : Les styles de classe vous permettent d'appliquer des proprits de style tout lment de la page. Les styles appliqus aux balises HTML redfinissent le formatage d'une balise spcifique, telle que h1. Lorsque vous crez ou modifiez un style CSS pour la balise h1, tout le texte format l'aide de cette balise h1 est immdiatement modifi en consquence. Les styles avancs redfinissent le formatage pour une combinaison particulire d'lments ou pour d'autres formes du slecteur admises par CSS (par exemple, le slecteur td h2 s'applique chaque fois qu'un en-tte h2 apparat dans une cellule de tableau). Les styles avancs peuvent galement redfinir le formatage pour des balises qui contiennent un attribut id (identifiant) (par exemple, les styles dfinis par #myStyle s'appliquent toutes les balises qui contiennent la paire valeur-attribut id="myStyle"). Les rgles CSS peuvent se trouver aux emplacements suivants : Feuilles de style CSS externes Ensembles de rgles CSS enregistres dans un fichier .css externe distinct (pas dans un fichier HTML). Ce fichier est li une ou plusieurs pages d'un site Web l'aide d'un lien ou d'une rgle @import qui se trouve dans la section head d'un document. Feuilles de style CSS internes (ou imbriques) Ensembles de rgles CSS incluses dans une balise style de la section head d'un document HTML. Styles en ligne Dfinis dans des instances spcifiques de balises dans un document HTML. L'utilisation de styles en ligne n'est pas recommande. Dreamweaver reconnat les styles dfinis dans des documents existants, pour peu qu'ils soient conformes aux recommandations des feuilles de style CSS. Dreamweaver restitue galement la plupart des styles appliqus directement en mode Cration. Toutefois, la prvisualisation d'un document dans une fentre de navigateur vous permet d'obtenir le rendu direct le plus prcis de la page. Certains styles CSS s'affichent diffremment dans Microsoft Internet Explorer, Netscape Navigator, Opera, Apple Safari ou d'autres navigateurs, et certains ne sont pas encore pris en charge par aucun navigateur. Pour afficher le guide de rfrence CSS d'O'Reilly inclus dans Dreamweaver, choisissez Aide > Rfrence et slectionnez O'Reilly - Rfrence CSS dans le menu droulant du panneau Rfrence.
A propos des styles en cascade
En haut
Le terme en cascade fait rfrence la faon dont un navigateur affiche finalement les styles pour des lments spcifiques d'une page Web. Trois sources sont responsables des styles visibles sur une page Web : la feuille de style cre par l'auteur de la page, les ventuelles slections de style personnalises de l'utilisateur, et les styles par dfaut du navigateur. Les sections prcdentes expliquent la cration de styles pour une page Web par l'auteur de la page Web et de la feuille de style qui y est associe. Toutefois, les navigateurs possdent eux aussi des feuilles de style par dfaut, qui dterminent la restitution des pages Web. En outre, les utilisateurs peuvent personnaliser leurs navigateurs en effectuant des slections qui dterminent l'affichage des pages Web. L'apparence finale d'une page Web est le rsultat de la combinaison (cascadre) des rgles de ces trois sources, qui permet de restituer la page Web de manire optimale. Ce concept va tre illustr par une balise courante, la balise de paragraphe (<p> ). Par dfaut, les navigateurs comportent des feuilles de style qui dfinissent la police et la taille de police du texte des paragraphes, c'est--dire le texte plac entre balises <p> dans le code HTML. Ainsi, dans Internet Explorer, tout le texte du corps, y compris celui des paragraphes, s'affiche par dfaut dans la police Times New Roman de taille moyenne. Toutefois, si vous tes l'auteur d'une page Web, vous pouvez crer une feuille de style qui remplace le style par dfaut du navigateur pour ce qui est de la police et de la taille de police. Par exemple, vous pouvez crer la rgle suivante dans votre feuille de style : p { font-family: Arial; font-size: small; } Lorsqu'un utilisateur charge la page, les paramtres de police du paragraphe et de taille de police que vous, auteur, avez dfinis, remplacent les paramtres par dfaut du navigateur en la matire. Les utilisateurs peuvent effectuer des slections pour personnaliser l'affichage du navigateur selon leurs attentes. Par exemple, dans Internet Explorer, l'utilisateur peut choisir Affichage > Taille du texte > La plus grande, de manire agrandir la police et la rendre plus lisible. En fin de compte (du moins, dans ce cas), la slection de l'utilisateur remplace la fois les styles par dfaut du navigateur pour la taille de police par dfaut dans les paragraphes, et les styles de pargraphe crs par l'auteur de la page Web.
138
L'hritage est un autre lment important de la cascade. Les proprits de la plupart des lments d'une page Web sont hrites. Par exemple, les balises de paragraphe hritent de certaines proprits des balises body, les balises span de certaines proprits des balises de paragraphe, et ainsi de suite. Ainsi, vous pouvez crer la rgle suivante dans votre feuille de style : body { font-family: Arial; font-style: italic; } Tout le texte des paragraphes de votre page Web (ainsi que le texte qui hrite des proprits de la balise de paragraphe) sera en Arial italique, car la balise de paragraphe hrite de ces proprits partir de la balise body. Vous pouvez toutefois vous montrer plus spcifique avec vos rgles et crer des styles qui supplantent la formule d'hritage standard. Par exemple, vous pouvez crer les rgles suivantes dans votre feuille de style : body { font-family: Arial; font-style: italic; } p { font-family: Courier; font-style: normal; } Tout le texte du corps est en Arial italique, sauf le texte des paragraphes (et celui des balises hritires), qui s'affiche en Courier normal (non italique). D'un point de vue technique, la balise de paragraphe hrite tout d'abord des proirits dfinies pour la balise body, puis elle ignore cellesci, car des proprits ont t dfinies spcifiquement pour elle. En d'autres termes, bien que les lments de page hritent gnralement des proprits suprieures, l'application directe d'une proprit une balise entrane toujours l'crasement de la formule d'hritage standard. La combinaison de tous les facteurs exposs ci-dessus et d'autres facteurs, tels que la spcificit CSS (un systme qui attribue un poids diffrent des types prcis de rgles CSS) et l'ordre des rgles CSS, finit par crer une cascade complexe, o les lments aux priorits les plus leves crasent les lments aux proprits les plus basses. Pour plus d'informations sur les rgles en matire de cascade, d'hritage et de spcificit, visitez le site www.w3.org/TR/CSS2/cascade.html.
A propos du formatage de texte et de CSS
En haut
Par dfaut, Dreamweaver utilise des feuilles de style en cascade (CSS) pour mettre le texte en forme. Les styles appliqus au texte l'aide de l'inspecteur Proprits ou des commandes de menu gnrent des rgles CSS intgres la section head du document. Vous pouvez galement utiliser le panneau Styles CSS pour crer et modifier des proprits et des rgles CSS. Ce panneau est un diteur bien plus fiable que l'inspecteur Proprits et prsente toutes les rgles CSS dfinies dans le document actif, qu'elles soient intgres la section head du document ou dans une feuille de style externe. Adobe recommande l'utilisation du panneau Styles CSS (plutt que l'inspecteur Proprits) comme outil principal de cration et modification de vos styles CSS. Ainsi, votre code sera plus clair et sa maintenance en sera simplifie. Outre les styles et feuilles de style de votre composition, libre vous d'utiliser les feuilles de style livres avec Dreamweaver pour appliquer des styles vos documents Pour accder un didacticiel relatif au formatage de texte l'aide de feuilles de style en cascade, consultez le site Web d'Adobe l'adresse www.adobe.com/go/vid0153_fr.
A propos des proprits de la forme courte des styles CSS
En haut
La spcification CSS permet la cration de styles l'aide d'une syntaxe abrge appele forme courte des styles CSS. Elle permet de spcifier la valeur de plusieurs proprits l'aide d'une seule dclaration. Par exemple, la proprit font vous permet de dfinir les proprits font-style , font-variant, font-weight , font-size, line-height et font-family sur une seule ligne. Il est important de savoir que sous forme courte, les proprits dont la valeur est omise reoivent leur valeur par dfaut. Certaines pages risquent donc de s'afficher incorrectement lorsque plusieurs rgles CSS sont attribues la mme balise. Par exemple, la rgle h1 ci-dessous utilise la syntaxe longue. Remarquez que les proprits font-variant, font-stretch, font-sizeadjust et font-style ont reu leur valeur par dfaut. h1 { font-weight: bold; font-size: 16pt; line-height: 18pt; font-family: Arial; font-variant: normal; fontstyle: normal; font-stretch: normal; font-size-adjust: none } Insre en tant que proprit unique sous forme courte, la mme rgle pourrait se prsenter ainsi : h1 { font: bold 16pt/18pt Arial } Sous forme courte, les proprits dont la valeur est omise reoivent automatiquement leur valeur par dfaut. Ainsi, l'exemple de forme abrge cidessus omet les balises font-variant, font-style , font-stretch et font-size-adjust . Si des styles sont dfinis en plusieurs emplacements (par exemple, incorpors dans une page HTML et imports d'une feuille de style externe) sous deux formes, longue et courte, n'oubliez pas que les proprits omises dans une rgle de notation abrge risquent d'craser les proprits explicitement dfinies dans une autre rgle. (On parle de styles en cascade .) Dreamweaver utilise donc la forme longue par dfaut, Ceci permet d'viter qu'une rgle de notation abrge ne remplace une rgle de notation longue. Si vous ouvrez une page Web code en forme courte dans Dreamweaver, n'oubliez pas que Dreamweaver cre toutes les nouvelles rgles CSS sous forme longue. Pour spcifier la faon dont Dreamweaver cre et modifie les rgles CSS, vous pouvez modifier les prfrences de modification CSS dans la catgorie Styles CSS de la bote de dialogue Prfrences (Edition > Prfrences dans Windows ; Dreamweaver > Prfrences sur le Macintosh).
139
Remarque : Le panneau Styles CSS cre uniquement des rgles sous forme longue. Lorsque vous crez une page ou une feuille de style CSS l'aide du panneau Style CSS, n'oubliez pas que le codage manuel de rgles CSS sous forme courte risque de provoquer l'crasement des proprits cres sous forme longue par celles cres sous forme courte. Il est donc prfrable de crer vos styles CSS sous forme longue.
Didacticiel Explication de CSS Application, suppression ou changement du nom de styles de classe Utilisation du texte Panneau Styles CSS Didacticiel sur la mise en forme de texte avec CSS
140
Effets de transition CSS3

Vous pouvez crer, modifier et supprimer des transitions CSS3 l'aide du panneau Transitions CSS. Pour crer une transition CSS3, crez une classe de transition en donnant des valeurs aux proprits de transition de l'lment. Si vous slectionnez un lment avant de crer une classe de transition, la classe de transition est automatiquement applique l'lment slectionn. Vous pouvez ajouter le code CSS gnr au document actuel ou spcifier un fichier CSS externe.
Crez et appliquez un effet de transition CSS3
En haut
1. (Facultatif) Slectionnez un lment (paragraphe, en-tte, et ainsi de suite) laquelle vous souhaitez appliquer la transition. Vous pouvez galement crer une transition et l'appliquer ultrieurement un lment. 2. Choisissez Fentre > Transitions CSS.
3. Cliquez sur .
4. Crez une classe de transition l'aide des options de la bote de dialogue Nouvelle transition. Rgle cible Donnez un nom au slecteur. Il peut s'agir d'un slecteur CSS comme une balise, une rgle, un ID ou un slecteur composite. Par exemple, si vous souhaitez ajouter des effets de transition toutes les balises <hr>, entrez hr.
Transition sur Slectionnez l'tat auquel vous voulez appliquer la transition. Par exemple, si vous voulez appliquer la transition lorsque le pointeur de la souris est plac au-dessus de l'lment, utilisez l'option survol. Utiliser la mme transition pour toutes les proprits Activez cette option si vous voulez spcifier une dure, un dlai et un minutage identiques pour toutes les proprits CSS auxquelles vous voulez faire subir la transition.
Utiliser une transition diffrente pour chaque proprit Activez cette option si vous voulez spcifier une dure, un dlai et un minutage diffrents pour chaque proprit CSS laquelle vous voulez faire subir la transition.
Proprit Cliquez sur
pour ajouter une proprit CSS laquelle faire subir une transition.
Dure Entrez une dure en secondes (s) ou en millisecondes (ms) pour l'effet de transition. Dlai Le temps, en secondes ou les millisecondes, qui doit s'couer avant le dbut de l'effet de transition.
Minutage Slectionnez un style de transition parmi les options disponibles. Valeur de fin Valeur de fin de l'effet de transition. Par exemple, si vous souhaitez que la taille de police augmente de 40 px la fin de l'effet de transition, spcifiez 40 px pour la proprit taille de police. Choisissez o crer la transition Pour incorporer le style dans le document actif, choisissez Seulement ce document. Si vous souhaitez crer une feuille de style externe pour le code CSS3, slectionnez Nouveau fichier de feuille de style. Lorsque vous cliquez sur Crer la transition, vous tes invit indiquer l'emplacement d'enregistrement du nouveau fichier CSS. Lorsque la feuille de style a t cre, elle est ajoute au menu Choisissez o crer la transition.
Modification des effets de transition CSS3

1. Dans le panneau Transitions CSS, slectionnez l'effet de transition que vous voulez modifier.
141
En haut
2. Cliquez sur
3. Utilisez la bote de dialogue Modifier la transition pour modifier les valeurs prcdemment entres pour la transition.
Dsactivation de la forme courte CSS pour les transitions

1. Choisissez Edition > Prfrences. 2. Slectionnez Styles CSS. 3. Dans Utiliser Forme courte pour, dslectionnez Transition.
En haut
Mots-cls : nouveauts, dreamweaver, HTML5, CSS, transitions, application web, package web, effets, CSS3, mise en forme de grille fluide, Phonegap, nouvelles fonctionnalits, jquery, business catalyst, polices web, amliorations ftp, optimisation PSD, dreamweaver cs6
142
Ajout d'une proprit une rgle CSS

Vous pouvez utiliser le panneau de styles CSS pour ajouter des proprits aux rgles. 1. Dans le panneau Styles CSS (Fentre > CSS), slectionnez une rgle dans le volet Toutes les rgles (mode Tous) ou une proprit dans le volet Rsum de la slection (mode Actuel). 2. Effectuez l'une des oprations suivantes : Si la vue Afficher uniquement les proprits dfinies est active dans le volet Proprits, cliquez sur le lien Ajouter des proprits et ajoutez une proprit. Si la vue Catgorie ou Liste est slectionne dans le volet Proprits, donnez une valeur la proprit slectionne.
143
Application, suppression ou modification du nom de styles de classe CSS

Application d'un style de classe CSS Suppression d'un style de classe d'une slection Changement de nom d'un style de classe Les styles de classe sont le seul type de style CSS qui peut tre appliqu n'importe quel texte dans un document, quelles que soient les balises qui contrlent ce texte. Tous les styles de classe associs au document actif sont affichs dans le panneau Styles CSS (leur nom est prcd d'un point [.]) ainsi que dans le menu droulant Style dans l'inspecteur Proprits de texte. Mme si la plupart des styles sont actualiss immdiatement, il est conseill d'afficher votre page dans un navigateur et de vrifier que le style a t appliqu comme prvu. Lorsque vous appliquez plusieurs styles au mme texte, ils risquent d'tre contradictoires et de produire des rsultats inattendus. Lorsque vous affichez un aperu des styles dfinis dans une feuille de style CSS externe, n'oubliez pas d'enregistrer la feuille de style afin que vos modifications soient appliques lorsque vous afficherez la page dans un navigateur.
Application d'un style de classe CSS

1. Slectionnez 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 slectionnez une plage de texte au sein d'un mme paragraphe, le style CSS n'affectera que cette slection.
Haut de la page
Pour indiquer la balise prcise laquelle le style CSS doit tre appliqu, slectionnez cette balise dans le slecteur situ dans la partie infrieure gauche de la fentre de document. 2. Pour appliquer un style de classe, procdez de l'une des manires suivantes : Dans le panneau Styles CSS (Fentre > Styles CSS), slectionnez le mode Tous, cliquez avec le bouton droit de la souris sur le nom du style appliquer et choisissez Appliquer dans le menu contextuel. Dans l'inspecteur Proprits HTML, choisissez le style de classe appliquer dans le menu droulant Classe. Dans la fentre de document, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur le texte slectionn, choisissez Styles CSS dans le menu contextuel, puis choisissez le style appliquer. Choisissez Format > Styles CSS, puis slectionnez le style appliquer dans le sous-menu.
Suppression d'un style de classe d'une slection

1. Slectionnez l'objet ou le texte auquel le style ne doit plus tre appliqu. 2. Dans l'inspecteur Proprits HTML (Fentre > Proprits), choisissez Aucun dans le menu droulant Classe.
Haut de la page
Changement de nom d'un style de classe
Haut de la page
1. Dans le panneau Styles CSS, cliquez avec le bouton droit de la souris sur le style de classe CSS que vous souhaitez renommer et slectionnez Renommer la classe. Vous pouvez galement renommer une classe en slectionnant Renommer la classe dans le menu d'options du panneau Styles CSS. 2. Dans la bote de dialogue Renommer la classe, assurez-vous que la classe que vous souhaitez renommer est slectionne dans le menu droulant Renommer la classe. 3. Dans la zone de texte Nouveau nom, saisissez le nouveau nom de la nouvelle classe et cliquez sur OK. Si la classe que vous renommez se trouve dans la section head du document actif, Dreamweaver modifie le nom de la classe ainsi que toutes les instances du nom de la classe se trouvant dans le document actif. Si la classe que vous renommez est un fichier CSS externe, Dreamweaver s'ouvre et modifie le nom de la classe dans le fichier. Dreamweaver lance galement une bote de dialogue Rechercher et remplacer l'chelle du site pour vous permettre de rechercher toutes les instances de l'ancien nom de la classe pouvant exister dans votre site. Voir aussi [print]A propos des feuilles de style en cascade
144
Vrification de problmes de restitution CSS entre les navigateurs

Excution d'une vrification de compatibilit avec les navigateurs Slection de l'lment affect par un problme dtect Accs au problme suivant/prcdent dtect dans le code Slection des navigateurs faire vrifier par Dreamweaver Exclusion d'un problme de la vrification de compatibilit avec les navigateurs Modification de la liste des problmes ignors Sauvegarde d'un rapport de vrification de compatibilit avec les navigateurs Affichage d'un rapport de vrification de compatibilit avec les navigateurs dans un navigateur Ouverture du site Web Adobe CSS Advisor Les fonctions de vrification de la compatibilit avec les navigateurs vous permettent de rechercher les combinaisons de HTML et de feuilles de style CSS pouvant prsenter des problmes dans certains navigateurs. Lorsque vous excutez une vrification de compatibilit avec les navigateurs sur un fichier ouvert, Dreamweaver analyse le fichier et signale tous les problmes de rendu CSS potentiels dans le panneau Rsultats. Une estimation de confiance, illustre par un quart de cercle, un demi cercle, trois-quarts de cercle ou un cercle plein, indique la probabilit d'occurrence d'un bogue (un quart de cercle plein indique une occurrence possible et un cercle complet plein indique une occurrence trs probable). Pour chaque bogue potentiel dtect, Dreamweaver fournit galement un lien direct la documentation relative au bogue sur Adobe CSS Advisor, un site Web qui dtaille les bogues de rendu de navigateur connus et propose des solutions pour les corriger. Par dfaut, la fonction de vrification de la compatibilit avec les navigateurs effectue une vrification par rapport aux navigateurs suivants : Firefox 1.5 ; Internet Explorer (Windows) 6.0 et 7.0 ; Internet Explorer (Macintosh) 5.2 ; Netscape Navigator 8.0 ; Opera 8.0 et 9.0 ; Safari 2.0. Cette fonction remplace l'ancienne fonction de vrification du navigateur cible, mais conserve la fonctionnalit CSS de cette fonction. Cela signifie que la nouvelle fonction de vrification de compatibilit avec les navigateurs teste le code de vos documents et dtermine s'il contient des proprits ou des valeurs CSS non prises en charge par les navigateurs cibles. Trois niveaux de problmes potentiels de prise en charge de navigateur peuvent se prsenter : Une erreur signale du code CSS pouvant causer un problme grave et visible au niveau du fonctionnement de certains navigateurs, par exemple, en faisant disparatre une partie d'une page (une erreur dsigne par dfaut les problmes de prise en charge de navigateur, de sorte que dans certains cas, du code ayant un effet inconnu peut tre signal comme une erreur). Un avertissement indique une portion de code CSS qui n'est pas prise en charge dans certains navigateurs, mais sans pour autant causer de srieux problme d'affichage. Un message d'information indique du code qui n'est pas pris en charge dans certains navigateurs, mais n'a pas d'effet visible. Les vrifications de compatibilit avec les navigateurs n'altrent en rien le document.
Excution d'une vrification de compatibilit avec les navigateurs

Slectionnez Fichier > Vrifier la page > Compatibilit avec les navigateurs.
Haut de la page
Slection de l'lment affect par un problme dtect

Double-cliquez sur le problme dans le panneau Rsultats.
Haut de la page
Accs au problme suivant/prcdent dtect dans le code
Haut de la page
Dans le menu Vrification de la compatibilit avec les navigateurs de la barre d'outils du document, slectionnez Problme suivant ou Problme prcdent.
Haut de la page
Slection des navigateurs faire vrifier par Dreamweaver

1. Dans le panneau Rsultats (Fentre > Rsultats), slectionnez l'onglet Vrification de la compatibilit avec les navigateurs. 2. Cliquez sur la flche verte dans le coin suprieur gauche du panneau Rsultats, puis choisissez Paramtres. 3. Slectionnez la case cocher situe en regard des navigateurs vrifier.
4. Dans le menu droulant correspondant aux navigateurs slectionns, vous devez indiquer la version minimale devant tre vrifie. Par exemple, pour vrifier si la restitution CSS peut s'afficher dans Internet Explorer 5.0 et versions ultrieures et dans Netscape Navigator 7.0 et versions ultrieures, cochez les cases correspondant aux noms de ces navigateurs, puis slectionnez 5.0 dans le menu
145
droulant Internet Explorer et 7.0 dans le menu droulant Netscape.
Exclusion d'un problme de la vrification de compatibilit avec les navigateurs

1. Excutez une vrification de compatibilit avec les navigateurs.
Haut de la page
2. Dans le panneau Rsultats, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur le problme que vous souhaitez exclure des vrifications futures. 3. Cliquez sur Ignorer le problme dans le menu contextuel.
Modification de la liste des problmes ignors

1. Dans le panneau Rsultats (Fentre > Rsultats), slectionnez l'onglet Vrification de la compatibilit avec les navigateurs.
Haut de la page
2. Cliquez sur la flche verte dans le coin suprieur gauche du panneau Rsultats, puis choisissez Modifier la liste des problmes ignors. 3. Dans le fichier Exceptions.xml, recherchez le problme que vous souhaitez supprimer de la liste des problmes ignors et supprimez-le. 4. Enregistrez et fermez le fichier Exceptions.xml.
Sauvegarde d'un rapport de vrification de compatibilit avec les navigateurs

Haut de la page
2. Cliquez sur le bouton Enregistrer le rapport dans le ct gauche du panneau Rsultats. Amenez le pointeur de la souris sur les boutons du panneau Rsultats pour afficher les info-bulles relatives chaque bouton. Remarque : Les rapports ne sont pas enregistrs automatiquement ; si vous souhaitez conserver une copie d'un rapport, vous devez suivre la procdure ci-dessus pour l'enregistrer.
Affichage d'un rapport de vrification de compatibilit avec les navigateurs dans un navigateur
Haut de la page
2. Cliquez sur le bouton Parcourir le rapport dans le ct gauche du panneau Rsultats. Amenez le pointeur de la souris sur les boutons du panneau Rsultats pour afficher les info-bulles relatives chaque bouton.
Ouverture du site Web Adobe CSS Advisor

1. Dans le panneau Rsultats (Fentre > Rsultats), slectionnez l'onglet Vrification de la compatibilit avec les navigateurs. 2. Cliquez sur le texte du lien situ dans l'angle infrieur droit du panneau. Voir aussi CSS Advisor
Haut de la page
146
Conversion de code CSS intgr en rgle CSS

L'utilisation de styles intgrs ne constitue pas une meilleure pratique recommande. Pour que vos styles CSS soient plus clairs et mieux organiss, vous pouvez convertir des styles intgrs en rgles CSS rsidant dans la section head du document ou dans une feuille de style externe. 1. En mode Code (Affichage > Code), slectionnez la totalit de l'attribut de style qui contient le style CSS intgr convertir. 2. Cliquez dessus avec le bouton droit de la souris et slectionnez Styles CSS > Convertir en rgle les styles CSS intgrs. 3. Dans la bote de dialogue Convertir style CSS, saisissez un nom de classe pour la nouvelle rgle, puis procdez de l'une des faons suivantes : Spcifiez une feuille de style dans laquelle vous souhaitez que la nouvelle rgle CSS apparaisse et cliquez sur OK. Slectionnez la section head du document en tant qu'emplacement dans lequel vous souhaitez que la nouvelle rgle CSS apparaisse et cliquez sur OK. Vous pouvez galement convertir des rgles l'aide de la barre d'outils de codage. La barre d'outil de codage est disponible uniquement en mode Code. Voir aussi
147
Dsactivation/Activation de code CSS

La fonctionnalit Dsactiver/Activer la proprit CSS permet de mettre en commentaire des parties de code CSS depuis le panneau Styles CSS, sans devoir apporter directement des modifications dans le code. Lorsque vous mettez en commentaire certaines parties du code CSS, vous pouvez voir quel effet des proprits et des valeurs spcifiques ont sur votre page. Lorsque vous dsactivez une proprit CSS, Dreamweaver ajoute des balises de commentaire CSS et un libell [dsactiv] la proprit CSS que vous avez dsactive. Par la suite, vous pouvez aisment ractiver ou supprimer la proprit CSS dsactive, selon vos prfrences. Vous trouverez, l'adresse ci-aprs, une vido de l'quipe de conception de Dreamweaver qui prsente l'utilisation de la fonction de dsactivation/activation du code CSS : www.adobe.com/go/dwcs5css_fr. 1. Dans le volet Proprits du panneau Styles CSS (Fentre > Styles CSS), slectionnez la Proprit que vous voulez dsactiver. 2. Cliquez sur l'icne Dsactiver/Activer la proprit CSS dans le coin infrieur droit du volet proprits. Cette icne s'affiche galement si vous laissez le pointeur de la souris sur la gauche de la proprit proprement dite. Lorsque vous cliquez sur l'icne Dsactiver/Activer la proprit CSS, une icne indiquant la dsactivation s'affiche gauche de la proprit. Pour ractiver la proprit, cliquez sur l'icne Dsactiv ou cliquez l'aide du bouton droit de la souris (Windows) ou en maintenant la touche Commande enfonce (Macintosh) sur la proprit, puis choisissez Activer. 3. (Facultatif) Pour activer ou supprimer toutes les proprits dsactives d'une rgle slectionne, faites un clic droit de la souris (Windows) ou un clic tout en maintenant la touche CTRL enfonce (Macintosh) sur une rgle ou proprit dans laquelle des proprits sont dsactives, puis choisissez Activer tous les lments dsactivs de la rgle slectionne ou Supprimer tous les lments dsactivs de la rgle slectionne.
148
Modification d'une rgle CSS

Modification d'une rgle dans le panneau Styles CSS (mode Actuel) Modification d'une rgle dans le panneau Styles CSS (mode Tous) Modification du nom d'un slecteur CSS Vous pouvez facilement modifier les rgles internes et externes appliques un document. Lorsque vous modifiez une feuille de style CSS qui contrle du texte dans votre document, vous reformatez instantanment tout ce texte. Les modifications apportes une feuille de style externe se rpercutent sur tous les documents auxquels elle est lie. Libre vous de dfinir un diteur externe utiliser pour la modification des feuilles de style.
Modification d'une rgle dans le panneau Styles CSS (mode Actuel)

1. Ouvrez le panneau Styles CSS en slectionnant Fentre > Styles CSS. 2. Cliquez sur le bouton Actuel, situ en haut du panneau Styles CSS. 3. Slectionnez un lment de texte dans la page pour afficher ses proprits. 4. Effectuez l'une des oprations suivantes :
Haut de la page
Pour afficher la bote de dialogue Dfinition des rgles de CSS et effectuer vos modifications, double-cliquez sur une proprit du volet Rsum de la slection. Slectionnez une proprit dans le volet Rsum de la slection et modifiez-la dans le volet Proprits infrieur. Slectionnez une rgle dans le volet Toutes les rgles, puis modifiez ses proprits dans le volet Proprits infrieur. Remarque : Vous pouvez changer le comportement du double-clic lors de la modification CSS, ainsi que les autres comportements, en changeant les prfrences de Dreamweaver.
Modification d'une rgle dans le panneau Styles CSS (mode Tous)

1. Ouvrez le panneau Styles CSS en slectionnant Fentre > Styles CSS. 2. Cliquez sur le bouton Tous, situ en haut du panneau Styles CSS. 3. Effectuez l'une des oprations suivantes :
Haut de la page
Pour afficher la bote de dialogue Dfinition des rgles de CSS et effectuer vos modifications, double-cliquez sur une rgle du volet Toutes les rgles. Slectionnez une rgle dans le volet Toutes les rgles, puis modifiez ses proprits dans le volet Proprits infrieur. Slectionnez une rgle dans le volet Toutes les rgles, puis cliquez sur le bouton Modifier le style situ dans le coin infrieur droit du panneau Styles CSS. Remarque : Vous pouvez changer le comportement du double-clic lors de la modification CSS, ainsi que les autres comportements, en changeant les prfrences de Dreamweaver.
Modification du nom d'un slecteur CSS

1. Dans le panneau Styles CSS (mode Tous), slectionnez le slecteur modifier. 2. Cliquez nouveau sur le slecteur afin de pouvoir en modifier le nom. 3. Apportez vos modifications, puis appuyez sur Entre (Windows) ou sur Retour (Macintosh). Voir aussi Dfinition des proprits de texte dans l'inspecteur Proprits
Haut de la page
149
Modification d'une feuille de style CSS

En rgle gnrale, une feuille de style CSS comprend une ou plusieurs rgles. Vous pouvez modifier les diffrentes rgles d'une feuille de style CSS l'aide du panneau Styles CSS, ou bien vous pouvez travailler directement dans la feuille de style CSS. 1. Dans le panneau Styles CSS (Fentre > Styles CSS), slectionnez le mode Tous. 2. Dans le volet Toutes les rgles, double-cliquez sur le nom du style modifier. 3. Dans la fentre Document, modifiez la feuille de style en fonction des besoins, puis enregistrez-la.
150
Amliorations la prise en charge de CSS3 dans le panneau Styles CSS (CS 5.5)
Application de proprits CSS3 l'aide du panneau contextuel Spcification de plusieurs ensembles de valeurs Recherche de proprits dans le mode Catgories Garantie de la conformit avec les navigateurs Prvisualisation des modifications en mode Affichage en direct Un panneau contextuel a t ajout au panneau CSS pour les proprits suivantes : text-shadow box-shadow border-radius border-image Les options disponibles dans le panneau contextuel vous garantissent d'appliquer la proprit correctement, mme si vous ne matrisez pas leur syntaxe W3C.
Le panneau contextuel affichant les options de la proprit CSS3 border-image
Application de proprits CSS3 l'aide du panneau contextuel
Haut de la page
Cliquez sur l'icne + ' correspondant ces proprits. Utilisez les options du panneau contextuel pour appliquer la proprit.
Spcification de plusieurs ensembles de valeurs
Haut de la page
Les proprits CSS3 telles que text-shadow prennent en charge plusieurs ensembles de valeurs. Par exemple : text-shadow: 3px 3px #000, -3px 3px #0f0; Lorsque vous spcifiez plusieurs ensembles de valeurs en mode Code et que vous ouvrez le panneau contextuel des fins d'dition, seul le premier ensemble de valeurs s'affiche. Si vous modifiez cet ensemble de valeurs dans le panneau contextuel, seul le premier ensemble de valeurs dans le code est affect. Les autres ensembles de valeurs ne sont pas affects et sont appliqus comme indiqu dans le code.
Recherche de proprits dans le mode Catgories
Haut de la page
En mode Catgories, text-shadow se trouve dans la catgorie Police. box-shadow, border-radius et border-image sont rpertoris dans la catgorie Bordure.
151
Garantie de la conformit avec les navigateurs
Haut de la page
Dreamweaver CS 5.5 prend galement en charge un dploiement spcifique aux navigateurs (webkit, Mozilla) des proprits box-shadow, borderradius et border-image. En mode Catgories, utilisez les options de la catgorie de navigateur approprie afin de garantir la conformit de ces proprits dans le navigateur en question. Par exemple, pour assurer la compatibilit avec la mise en uvre Mozilla de la proprit border-image, modifiez -mozborder-image dans la catgorie Mozilla.
Prvisualisation des modifications en mode Affichage en direct
Haut de la page
Les modifications apportes aux proprits CSS ne sont pas affiches en mode Cration. Passez au mode Affichage en direct pour prvisualiser les modifications. Vous pouvez galement apporter des modifications rapides aux proprits CSS3 dans le mode Affichage en direct. Ces modifications sont immdiatement refltes dans ce mode. Les proprits CSS3 suivantes sont prises en charge en mode Affichage en direct : text-shadow border-radius -webkit-box-shadow -webkit-border-image
Adobe recommande
Prise en charge amliore de CSS3 dans DW CS5.5

Preran Kurnool Prise en charge de Text-shadow, Boxshadow, Border-radius et Border-image
152
Mise en forme du code CSS

Dfinition des prfrences de formatage du code CSS Formatage manuel du code CSS dans une feuille de style CSS Formatage manuel du code CSS intgr Vous pouvez dfinir des prfrences qui contrlent le formatage de votre code CSS chaque fois que vous crez ou modifiez une rgle CSS l'aide de l'interface Dreamweaver. Par exemple, vous pouvez dfinir des prfrences qui placeront toutes les proprits CSS sur des lignes spares, insrer une ligne vierge entre les rgles CSS, etc. Lorsque vous dfinissez des prfrences de formatage de code CSS, les prfrences que vous slectionnez sont automatiquement appliques toutes les nouvelles rgles CSS que vous crez. Toutefois, vous pouvez galement appliquer ces prfrences manuellement des documents individuels. Cela peut tre utile si vous possdez un document HTML ou CSS plus ancien ayant besoin d'un formatage. Remarque : Les prfrences de formatage de code CSS s'appliquent uniquement aux rgles CSS de feuilles de style externes ou intgres (mais pas aux styles intgrs).
Dfinition des prfrences de formatage du code CSS

1. Choisissez Edition > Prfrences. 2. Dans la bote de dialogue Prfrences, slectionnez la catgorie Format du code. 3. En regard de l'option Formatage avanc, cliquez sur le bouton CSS.
Haut de la page
4. Dans la bote de dialogue Options de mise en forme de la source CSS, slectionnez les options que vous souhaitez appliquer votre code source CSS. Un aperu de la feuille de style CSS telle qu'elle est modifie par les options slectionnes s'affiche dans la fentre Aperu plus bas. Mettre les proprits en retrait avec Dfinit la valeur de mise en retrait des proprits au sein d'une rgle. Vous pouvez spcifier des tabulations ou des espaces. Chaque proprit sur une ligne spare Place chaque proprit au sein d'une rgle sur une ligne spare. Accolade d'ouverture sur une ligne spare Place l'accolade d'ouverture pour une rgle sur une ligne spare de celle du slecteur. Seulement si plusieurs proprits Place les rgles une seule proprit sur la mme ligne que le slecteur. Tous les slecteurs d'une rgle sur la mme ligne Place tous les slecteurs d'une rgle sur la mme ligne. Ligne vierge pour sparer les rgles Insre une ligne vierge entre chaque rgle. 5. Cliquez sur OK. Remarque : Le formatage de code CSS hrite galement de la prfrence Type de saut de ligne que vous avez dfinie dans la catgorie Format de code de la bote de dialogue Prfrences.
Haut de la page
Formatage manuel du code CSS dans une feuille de style CSS

1. Ouvrez une feuille de style CSS 2. Choisissez Commandes > Appliquer le format source.
Les options de formatage que vous dfinissez dans les prfrences de formatage de code CSS s'appliquent l'ensemble du document. Vous ne pouvez pas formater de slections individuelles.
Formatage manuel du code CSS intgr

1. Ouvrez une page HTML contenant du code CSS intgr dans la section head du document. 2. Slectionnez une partie quelconque du code CSS. 3. Choisissez Commandes > Appliquer le format source la slection.
Haut de la page
Les options de formatage que vous dfinissez dans les prfrences de formatage de code CSS s'appliquent uniquement l'ensemble des rgles CSS de la section Head du document. Remarque : Vous pouvez choisir Commandes > Appliquer le format source pour mettre l'ensemble du document en forme en fonction des prfrences de mise en forme de code que vous avez spcifies. Voir aussi
153
Inspection de code CSS en mode En direct

Le mode Inspection s'associe au mode En direct afin de vous aider identifier rapidement les lments HTML et les styles CSS qui y sont associs. Lorsque le mode Inspection est activ, vous pouvez survoler des lments de votre page afin d'afficher les attributs de modle de bote CSS de n'importe quel lment de niveau bloc. Remarque : Pour plus d'informations sur le modle de bote CSS, consultez la spcification CSS 2.1 (en anglais). Le mode Inspection permet d'obtenir une reprsentation visuelle du modle de bote. Vous pouvez en outre utiliser le panneau Styles CSS pendant le survol d'lments dans la fentre Document. Lorsque le panneau Styles CSS est ouvert en mode Actuel et que vous survolez un lment de la page, les rgles et proprits du panneau Styles CSS sont automatiquement mises jour, de faon montrer les rgles et proprits de cet lment. En outre, les modes et panneaux associs l'lment que vous survolez sont galement mis jour (par exemple le mode Code, le slecteur de balises, l'inspecteur Proprits, etc.). 1. Lorsque le document est ouvert dans la fentre Document, cliquez sur le bouton Inspecter ( ct du bouton Mode en direct dans la barre d'outils Document). Remarque : Si vous n'tes pas dj en mode En direct, le mode Inspection l'active automatiquement. 2. Survolez des lments de la page afin d'afficher le modle de bote CSS. Le mode Inspection utilise des couleurs de surbrillance diffrentes pour la bordure, la marge, la marge intrieure et le contenu. 3. (Facultatif) Appuyez sur la flche vers la gauche, sur votre clavier, afin de mettre en surbrillance le parent de l'lment actuellement en surbrillance. Appuyez sur la flche vers la droite pour rtablir la mise en surbrillance de l'lment enfant. 4. (Facultatif) Cliquez sur un lment pour verrouiller la slection en surbrillance. Remarque : Si vous cliquez sur un lment afin de verrouiller la slection en surbrillance, le mode Inspection est dsactiv.
Adobe recommande
Dreamweaver CS5 - Inspection CSS

Scott Fegette, gestionnaire produit Dreamweaver Didacticiel vido prsentant Inspection CSS Voir aussi
154
Etablissement d'un lien vers une feuille de style CSS externe

Si vous modifiez une feuille de style CSS externe, les changements sont reflts dans tous les documents lis cette feuille de style. Vous pouvez exporter les styles CSS trouvs dans un document afin de crer une nouvelle feuille de style CSS, et attacher ou crer un lien vers une feuille de style externe pour appliquer les styles trouvs cet endroit. Vous pouvez attacher toute feuille de style de votre cration vos pages ou copier ces feuilles dans votre site. De plus, Dreamweaver est fourni avec des feuilles de style prdfinies qui peuvent tre automatiquement places dans votre site et attaches vos pages. 1. Ouvrez le panneau Styles CSS en procdant de l'une des manires suivantes : Choisissez Fentre > Styles CSS. Appuyez sur les touches Maj + F11. 2. Dans le panneau Styles CSS, cliquez sur le bouton Attacher une feuille de style. (Dans le coin infrieur droit du panneau.) 3. Effectuez l'une des oprations suivantes : Cliquez sur le bouton Parcourir pour rechercher une feuille de style CSS externe. Entrez le chemin de la feuille de style dans le champ Fichier/URL. 4. Dans la zone Ajouter sous, slectionnez une des options suivantes : Pour crer un lien entre le document actif et une feuille de style externe, choisissez Lien. Cette slection a pour effet de crer une balise de lien href dans le code HTML et de rfrencer l'URL de l'emplacement de la feuille de style publie. Microsoft Internet Explorer et Netscape Navigator prennent tous deux en charge cette mthode. Vous ne pouvez pas utiliser une balise de lien pour ajouter une rfrence d'une feuille de style externe une autre. Pour imbriquer des feuilles de style, vous devez utiliser une directive d'importation. La plupart des navigateurs reconnaissent galement la directive d'importation dans une page (plutt que simplement dans des feuilles de style). Il existe quelques diffrences dans la mthode de rsolution des conflits entre proprits lorsque des rgles se chevauchent dans des feuilles de style externes lies et des feuilles importes dans une page. Pour importer une feuille de style externe, plutt que d'y crer un lien, choisissez Importer. 5. Dans le menu contextuel Mdias, spcifiez le mdia cible de la feuille de style. Pour plus d'informations sur les feuilles de style dpendantes du mdia, consultez le site Web du World Wide Web Consortium l'adresse www.w3.org/TR/CSS21/media.html. 6. Cliquez sur le bouton d'aperu pour vrifier que la feuille de style applique effectivement les styles de votre choix la page active. Si les styles appliqus ne sont pas ceux attendus, cliquez sur Annuler pour supprimer la feuille de style. La page retrouve son aspect prcdent. 7. Cliquez sur OK. Voir aussi Cration d'un document bas sur un fichier d'exemple Dreamweaver
155
Dplacement/exportation de rgles CSS

Dplacement/exportation de rgles CSS vers une nouvelle feuille de style Dplacement/exportation de rgles CSS vers une feuille de style existante Rorganisation ou dplacement des rgles CSS en les faisant glisser Slection de plusieurs rgles avant de les dplacer Les fonctions de gestion des feuilles de styles CSS de Dreamweaver permettent de dplacer ou d'exporter aisment des rgles CSS vers des emplacements diffrents. Vous pouvez dplacer des rgles d'un document vers un autre, de la section head d'un document vers une feuille de style externe, entre des fichiers CSS externes, etc. Remarque : Si la rgle que vous essayez de dplacer est en conflit avec une rgle de la feuille de style de destination, Dreamweaver affiche la bote de dialogue Il existe dj une rgle de ce nom. Si vous dcidez de dplacer la rgle en conflit, Dreamweaver place la rgle dplace proximit immdiate de la rgle avec laquelle elle est en conflit dans la feuille de style de destination.
Dplacement/exportation de rgles CSS vers une nouvelle feuille de style

1. Effectuez l'une des oprations suivantes :
Haut de la page
Dans le panneau Styles CSS, slectionnez la ou les rgles que vous souhaitez dplacer. Cliquez ensuite sur la slection avec le bouton droit de la souris et choisissez Dplacer les rgles CSS dans le menu contextuel. Pour slectionner plusieurs rgles, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur les rgles slectionner En mode Code, slectionnez la ou les rgles dplacer. Cliquez ensuite sur la slection avec le bouton droit de la souris et slectionnez Styles CSS > Dplacer les rgles CSS dans le menu contextuel. Remarque : La slection partielle d'une rgle se traduit par le dplacement de l'ensemble de la rgle. 2. Dans la bote de dialogue Dplacer dans une feuille de style externe, slectionnez l'option de nouvelle feuille de style et cliquez sur OK. 3. Dans la bote de dialogue Enregistrer la feuille de style sous, entrez un nom pour la nouvelle feuille de style et cliquez sur Enregistrer. Lorsque vous cliquez sur Enregistrer, Dreamweaver enregistre une nouvelle feuille de style contenant les rgles que vous avez slectionnes et l'associe au document actif. Vous pouvez galement dplacer des rgles l'aide de la barre d'outils de codage. La barre d'outil de codage est disponible uniquement en mode Code.
Dplacement/exportation de rgles CSS vers une feuille de style existante

1. Effectuez l'une des oprations suivantes :
Haut de la page
Dans le panneau Styles CSS, slectionnez la ou les rgles que vous souhaitez dplacer. Cliquez ensuite sur la slection avec le bouton droit de la souris et choisissez Dplacer les rgles CSS dans le menu contextuel. Pour slectionner plusieurs rgles, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur les rgles slectionner En mode Code, slectionnez la ou les rgles dplacer. Cliquez ensuite sur la slection avec le bouton droit de la souris et slectionnez Styles CSS > Dplacer les rgles CSS dans le menu contextuel. Remarque : La slection partielle d'une rgle se traduit par le dplacement de l'ensemble de la rgle. 2. Dans la bote de dialogue Dplacer dans une feuille de style externe, slectionnez une feuille de style existante dans le menu droulant ou naviguez jusqu' une feuille de style existante et cliquez sur OK. Remarque : Le menu droulant affiche toutes les feuilles de style qui sont lies au document actif. Vous pouvez galement dplacer des rgles l'aide de la barre d'outils de codage. La barre d'outil de codage est disponible uniquement en mode Code.
Rorganisation ou dplacement des rgles CSS en les faisant glisser
Haut de la page
Dans le panneau Styles CSS (mode Tous), slectionnez une rgle et faites-la glisser jusqu' l'emplacement dsir. Vous pouvez slectionner des rgles et les faire glisser pour les rorganiser l'intrieur d'une feuille de style, ou dplacer une rgle vers une autre feuille de style ou dans la section head du document. Vous pouvez dplacer plusieurs rgles la fois en appuyant sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur plusieurs rgles pour les slectionner.
156
Slection de plusieurs rgles avant de les dplacer
Haut de la page
Dans le panneau Styles CSS, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur les rgles que vous souhaitez slectionner. Voir aussi
157
Dfinition de prfrences de styles CSS

Les prfrences de styles CSS contrlent la faon dont Dreamweaver rdige le code qui dfinit les styles CSS. Les styles CSS peuvent tre rdigs sous une forme abrge, que certains dveloppeurs estiment plus facile utiliser. Toutefois, certaines versions anciennes des navigateurs n'interprtent pas correctement la forme abrge des attributs de styles. 1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh), puis slectionnez Styles CSS dans la liste Catgorie. 2. Dfinissez les options de style CSS que vous voulez appliquer : A la cration de rgles de CSS - Utilisez Forme courte pour : Vous permet de slectionner les proprits de style CSS que Dreamweaver rdige en abrg. A la modification de rgles de CSS - Utilisez Forme courte pour : Dtermine si Dreamweaver rcrit les styles existants en abrg. Choisissez l'option Si l'original utilise Forme courte pour que les styles ne soient pas modifis. Choisissez En fonction des paramtres ci-dessus pour rcrire en forme abrge les styles des proprits slectionnes dans la zone Utiliser Forme courte pour. Sur double-clic dans le panneau CSS : Vous permet de slectionner un outil pour modifier les rgles CSS. 3. Cliquez sur OK.
158
Dfinition des proprits d'en-tte CSS pour une page entire

Vous pouvez spcifier les polices, les tailles de police et les couleurs pour vos titres de page. Par dfaut, Dreamweaver cre des rgles CSS pour vos titres et les applique tous les titres que vous utilisez sur la page. Les rgles sont incorpores dans la section head de la page. Les titres peuvent tre slectionns dans l'inspecteur Proprits HTML. 1. Choisissez Modifier > Proprits de la page ou cliquez sur le bouton Proprits de la page de l'inspecteur Proprits. 2. Slectionnez la catgorie En-ttes (CSS) et dfinissez les options. Police des en-ttes Dfinit la famille de polices par dfaut utiliser pour les en-ttes. Dreamweaver utilise la famille de polices spcifie sauf si une autre police est dsigne pour un lment de texte donn. En-tte 1 En-tte 6 Spcifie les tailles et couleurs utiliser pour chaque niveau de balises d'en-tte.
159
Dfinition des proprits de liens CSS pour une page entire

Vous pouvez spcifier les polices, les tailles de police, les couleurs et d'autres lments pour vos liens. Par dfaut, Dreamweaver cre des rgles CSS pour vos liens et les applique tous les liens que vous utilisez sur la page. Les rgles sont incorpores dans la section head de la page. Remarque : Si vous souhaitez personnaliser des liens spcifiques sur une page, vous devez crer des rgles CSS individuelles, puis les appliquer sparment ces liens. 1. Choisissez Modifier > Proprits de la page ou cliquez sur le bouton Proprits de la page de l'inspecteur Proprits. 2. Slectionnez la catgorie Liens (CSS) et dfinissez les options. Police du lien Dfinit la famille de polices par dfaut utiliser pour les liens. Par dfaut, Dreamweaver utilise la police dfinie pour la page entire, sauf si une autre police est spcifie. Taille Dfinit la taille de police par dfaut utiliser pour les liens. Couleur des liens Spcifie la couleur appliquer au texte qui constitue le lien. Liens visits Spcifie la couleur appliquer aux liens visits. Liens de survol Spcifie la couleur appliquer lorsque la souris ou le curseur est plac sur un lien. Liens actifs Spcifie la couleur appliquer lorsque la souris ou le curseur clique sur un lien. Style soulign Spcifie le style de soulignement appliquer aux liens. Si un style de soulignement est dj dfini pour votre page (par exemple, par le biais d'une feuille de style CSS), le menu par dfaut est remplac par la mention ne pas modifier . Cette mention vous informe d'un style de lien qui a t dfini. Si vous modifiez le style de soulignement l'aide de la bote de dialogue Proprits de la page, Dreamweaver modifiera la dfinition de lien prcdente.
160
Panneau Styles CSS

Panneau Styles CSS en mode Actuel Panneau Styles CSS en mode Tous Boutons et vues du panneau Styles CSS Ouverture du panneau Styles CSS Le panneau Styles CSS vous permet de suivre les rgles CSS et les proprits qui affectent un lment de page slectionn (mode Actuel), ou l'ensemble des rgles et des proprits qui sont disponibles pour le document (mode Tous). Un bouton bascule plac sur la partie suprieure du panneau vous permet de passer d'un mode l'autre. Le panneau Styles CSS vous permet de modifier les proprits CSS dans les deux modes.
Panneau Styles CSS en mode Actuel
Haut de la page
En mode Actuel, le panneau Styles CSS prsente trois volets : un volet Rsum de la slection qui prsente les proprits CSS de la slection en cours dans le document, un volet Rgles qui prcise l'emplacement des proprits slectionnes (ou une cascade de rgles pour la balise slectionne, selon votre slection), et un volet Proprits qui vous permet de modifier les proprits CSS de la rgle appliques la slection.
Vous pouvez redimensionner l'un quelconque des volets en faisant glisser les cadres entre les volets et redimensionner les colonnes en faisant glisser les sparateurs. Le volet Rsum de la slection rcapitule les proprits CSS de l'lment slectionn dans le document actif et leurs valeurs. Ce rsum dcrit les proprits de toutes les rgles s'appliquant directement la slection. Seules les proprits dfinies apparaissent. Par exemple, les rgles suivantes crent un style de classe et un style de balise (dans ce cas un paragraphe) : .foo{ color: green; font-family: 'Arial'; } p{ font-family: 'serif'; font-size: 12px; } Si vous slectionnez le texte d'un paragraphe de style de classe .foo dans la fentre du document, le volet Rsum de la slection affiche les proprits concernes par les deux rgles, puisque ces deux rgles s'appliquent la slection. Dans ce cas, le volet Rsum de la slection
161
affiche la liste des proprits suivantes : font-size: 12px font-family: 'Arial' color: green Le volet Rsum de la slection classe les proprits par ordre croissant de spcificit. Dans l'exemple prcdent, le style de balise dfinit la taille de la police et le style de classe, la famille et la couleur de la police. (La famille de police dfinie par la classe est prioritaire sur celle dfinie par le style de balise car la spcificit des slecteurs de classe est suprieure celle des slecteurs de balise. Pour plus d'informations sur les spcificits CSS, voir www.w3.org/TR/CSS2/cascade.html.) Le volet Rgles dispose de deux vues (A propos ou Rgles) selon votre slection. Dans la vue A propos (par dfaut), le volet prsente le nom de la rgle dfinissant la proprit CSS slectionne, ainsi que le nom du fichier contenant cette rgle. Dans la vue Rgles, le volet affiche la cascade, ou hirarchie, des rgles s'appliquant directement ou indirectement la slection en cours. (L'onglet auquel la rgle s'applique directement s'affiche dans la colonne de droite.) Pour passer d'une vue l'autre, cliquez sur les boutons Afficher les informations et Afficher cascade situs dans le coin suprieur droit du volet Rgles. Lorsque vous slectionnez une proprit dans le volet Rsum de la slection, toutes les proprits de la rgle applique s'affichent au-dessous dans le volet Proprits. (La rgle qui s'applique est galement slectionne dans le panneau Rgles lorsque la vue Rgles est slectionne.) Par exemple, dans le cas d'une rgle appele .texteprincipal qui dfinit une famille, une taille et une couleur de police, la slection de l'une de ces proprits dans le volet Rsum de la slection entrane l'affichage de toutes les proprits dfinies par la rgle .texteprincipal dans le volet Proprits et de la rgle .texteprincipal slectionne dans le volet Rgles. (En outre, la slection d'une rgle dans le volet Rgles affiche les proprits de celle-ci dans le volet Proprits.) Vous pouvez alors utiliser le volet Proprits pour modifier rapidement votre style CSS, qu'il soit intgr dans le document en cours ou reli via par une feuille de style. Par dfaut, le volet Proprits ne prsente que les proprits ayant dj t dfinies et les classe par ordre alphabtique. Vous pouvez choisir d'afficher les proprits dans deux autres vues. La vue Catgorie regroupe les proprits en catgories, telles que Police, Arrire-plan, Bloc, Bordure, etc., les proprits dfinies sont places en haut de chaque catgorie, en texte bleu. La vue Liste prsente la liste alphabtique de toutes les proprits disponibles, les proprits dfinies galement places en haut de chaque catgorie, en texte bleu. Pour passer d'une vue l'autre, cliquez sur les boutons Afficher la vue par catgorie, Afficher la vue sous forme de liste ou Afficher uniquement les proprits dfinies, situs dans le coin infrieur droit du volet Proprits. Dans toutes les vues, les proprits utilises dans la slection s'affichent en bleu, les autres s'affichent en rouge et sont barres. Si vous placez le curseur de la souris sur une rgle trangre la slection, un message d'explication s'affiche. Dans la plupart des cas, il s'agit de proprits crases par d'autres ou de proprits qui ne sont pas hrites. Toute modification apporte dans le volet Proprits s'applique immdiatement, ce qui vous permet d'avoir un aperu direct de votre travail.
Panneau Styles CSS en mode Tous
Haut de la page
En mode All (Tout), le panneau Styles CSS prsente deux volets : un volet All Rules (Toutes les rgles) (en haut) et un volet Proprits (en bas). Le volet Toutes les rgles prsente la liste des rgles dfinies dans le document actif, ainsi que l'ensemble des rgles dfinies dans les feuilles de styles jointes ce document. Le volet Proprits permet de modifier les proprits CSS de toute rgle slectionne dans le volet Toutes les rgles.
Vous pouvez redimensionner l'un quelconque des volets en faisant glisser les cadres entre les volets et redimensionner les colonnes Proprits en faisant glisser les sparateurs.
162
Lorsque vous slectionnez une rgle dans le volet Toutes les rgles, toutes les proprits s'appliquant cette rgle s'affiche au-dessous dans le volet Proprits. Vous pouvez alors utiliser le volet Proprits pour modifier rapidement votre style CSS, qu'il soit intgr dans le document en cours ou reli via par une feuille de style. Par dfaut, le volet Proprits ne prsente que les proprits prcdemment dfinies et les classe par ordre alphabtique. Vous pouvez choisir d'afficher les proprits dans deux autres vues. La vue Catgorie regroupe les proprits en catgories, telles que Police, Arrire-plan, Bloc, Bordure, etc., les proprits dfinies places en haut de chaque catgorie. La vue Liste prsente la liste alphabtique de toutes les proprits disponibles, les proprits dfinies galement places en haut de chaque catgorie. Pour passer d'une vue l'autre, cliquez sur les boutons Afficher la vue par catgorie, Afficher la vue sous forme de liste ou Afficher uniquement les proprits dfinies, situs dans le coin infrieur droit du volet Proprits. Dans toutes les vues, les proprits utilises dans la slection s'affichent en bleu. Toute modification apporte dans le volet Proprits s'applique immdiatement, ce qui vous permet d'avoir un aperu direct de votre travail.
Boutons et vues du panneau Styles CSS
Haut de la page
Dans les modes Tous et Actuel, le panneau Styles CSS prsente trois boutons qui vous permettent de modifier l'affichage du volet Proprits (volet infrieur) :
A. Vue Catgorie B. Vue Liste C. Vue Dfinition des proprits Vue Catgorie Rpartit les proprits CSS prises en charge par Dreamweaver en huit catgories distinctes : police, arrire-plan, bloc, bordure, bote, liste, positionnement et extensions. Les proprits de chaque catgorie sont conserves dans une liste que vous pouvez dvelopper ou rduire en cliquant sur le bouton plus (+) en regard de la catgorie de votre choix. Les proprits dfinies s'affichent en bleu en haut de la liste. Vue Liste Affiche l'ensemble des proprits CSS prises en charge par Dreamweaver par ordre alphabtique. Les proprits dfinies s'affichent en bleu en haut de la liste. Vue Dfinition des proprits N'affiche que les proprits dj dfinies et constitue la vue par dfaut. Dans les modes Tous et Actuel, le panneau Styles CSS contient galement les boutons suivants :
A. Attacher une feuille de style B. Nouvelle rgle de CSS C. Modifier le style D. Dsactiver/Activer la proprit CSS E. Supprimer rgle de CSS Attacher une feuille de style Ouvre la bote de dialogue Ajouter une feuille de style externe. Slectionnez une feuille de style externe pour crer un lien vers le document actif ou l'importer dans celui-ci. Nouvelle rgle de CSS Ouvre une bote de dialogue qui permet de slectionner le type du style que vous crez, par exemple, pour crer un style de classe, redfinir une balise HTML ou pour dfinir un slecteur CSS. Modifier le style Ouvre une bote de dialogue qui permet de modifier les styles dans le document actuel ou dans une feuille de style externe. Supprimer rgle de CSS Supprime la rgle ou la proprit slectionne du panneau Styles CSS et le formatage de tous les lments auxquels elle est applique. (Les rfrences ce style ne sont cependant pas supprimes.) Le bouton Supprimer rgle de CSS peut galement dtacher (ou rompre le lien de) une feuille de style CSS associe. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur le panneau Styles CSS pour ouvrir un menu contextuel d'options disponibles pour l'excution des commandes de feuilles de style CSS.
Ouverture du panneau Styles CSS
Haut de la page
Le panneau Styles CSS vous permet d'afficher, de crer, de modifier et de supprimer des styles CSS, mais galement de joindre des feuilles de style externes aux documents. Effectuez l'une des oprations suivantes : Choisissez Fentre > Styles CSS. Appuyez sur les touches Maj+F11. Cliquez sur le bouton CSS de l'inspecteur Proprits.
163
Mise jour de feuilles de style CSS dans un site Contribute

Les utilisateurs d'Adobe Contribute ne peuvent pas apporter de modifications une feuille de style CSS. Pour modifier une feuille de style pour un site Contribute, utilisez Dreamweaver. 1. Utilisez les outils de modification de feuille de style prsents dans Dreamweaver pour modifier les feuilles de style. 2. Avertissez les utilisateurs de Contribute qui travaillent la publication des pages que vous utilisez une feuille de style dfinie. Modifiez ensuite nouveau ces pages pour voir la nouvelle feuille de style. Les facteurs suivants doivent tre pris en compte lors de la mise jour de feuilles de style pour un site Contribute : Si vous apportez des modifications une feuille de style alors qu'un utilisateur de Contribute modifie une page qui utilise cette feuille de style, l'utilisateur ne pourra pas observer les changements apports la feuille de style tant que la page ne sera pas publie. Si vous supprimez un style d'une feuille de style, le nom du style en question n'est pas supprim des pages qui utilisent cette feuille, mais, puisque le style n'existe plus, il n'est pas appliqu la page comme l'utilisateur de Contribute pourrait s'y attendre. Ainsi, si un utilisateur vous dclare que rien ne se passe lorsque celui-ci applique un style donn, il est possible que le style ait t supprim de la feuille de style.
164
Utilisation des feuilles de style la conception

Les feuilles de style la conception permettent d'afficher ou de masquer la conception applique par une feuille de style CSS lorsque vous travaillez dans un document Dreamweaver. Vous pouvez par exemple utiliser cette fonction pour inclure ou exclure l'effet d'une feuille de style Macintosh ou Windows pendant la cration d'une page. Les feuilles de style la conception s'appliquent uniquement lorsque vous travaillez dans un document ; lorsque la page est affiche dans une fentre de navigateur, seuls les styles rellement attachs au document ou qui y sont incorpors apparaissent. Remarque : Vous pouvez galement activer ou dsactiver des styles pour l'ensemble d'une page l'aide de la barre d'outils Rendu du style. Pour afficher la barre d'outils standard, choisissez Affichage > Barres d'outils > Rendu de style. Le bouton Intervertir l'affichage des Styles CSS (le plus droite) fonctionne indpendamment des autres boutons de support de la barre d'outils. Pour utiliser une feuille de style la conception, procdez comme suit. 1. Ouvrez la bote de dialogue Feuilles de style la conception en procdant de l'une des manires suivantes : Cliquez avec le bouton droit de la souris dans le panneau Styles CSS et choisissez Conception dans le menu contextuel. Choisissez Format > Styles CSS > Conception. 2. Dans la bote de dialogue, dfinissez les options d'affichage ou de masquage de la feuille de style slectionne : Pour afficher une feuille de style CSS la conception, cliquez sur le bouton plus (+) situ au-dessus d'Afficher la conception uniquement, puis recherchez la feuille de style CSS afficher dans la bote de dialogue Slectionner 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 bote de dialogue Slectionner une feuille de style. Pour supprimer une feuille de style de l'une ou l'autre des listes, cliquez sur la feuille de style que vous voulez supprimer, puis cliquez sur le bouton moins () appropri. 3. Cliquez sur OK pour fermer la bote de dialogue. Le panneau Styles CSS est actualis avec le nom de la feuille de style slectionne ainsi qu'un indicateur, masqu ou concevoir , selon l'tat de la feuille de style. Voir aussi Prsentation de la barre d'outils Rendu de style
165
Utilisation d'exemples de feuilles de style Dreamweaver

Dreamweaver est fourni avec des exemples de feuilles de style que vous pouvez appliquer vos pages ou que vous pouvez utiliser comme points de dpart pour crer vos propres styles. 1. Ouvrez le panneau Styles CSS en procdant de l'une des manires suivantes : Choisissez Fentre > Styles CSS. Appuyez sur les touches Maj+F11. 2. Dans le panneau Styles CSS, cliquez sur le bouton Attacher une feuille de style. (Dans le coin infrieur droit du panneau.) 3. Dans la bote de dialogue Ajouter une feuille de style externe, cliquez sur Exemples de feuilles de style. 4. Dans la bote de dialogue Exemples de feuilles de style, slectionnez une feuille de style dans la liste droulante. Lorsque vous slectionnez des feuilles de style dans la zone de liste, le formatage du texte et des couleurs s'affiche dans le panneau d'aperu. 5. Cliquez sur le bouton Aperu pour appliquer la feuille de style et vrifier que le style de votre choix est bien appliqu la page active. Si les styles appliqus ne sont pas ceux que vous escomptiez, slectionnez une autre feuille de style dans la liste et cliquez sur le bouton Aperu pour visualiser les styles correspondants. 6. Par dfaut, Dreamweaver enregistre la feuille de style dans un dossier nomm CSS au niveau juste en dessous de la racine du site dfini pour votre page. Si ce dossier n'existe pas, Dreamweaver le cre. Vous pouvez enregistrer le fichier dans un autre emplacement en cliquant sur le bouton Parcourir pour rechercher un autre dossier. 7. Lorsque vous trouvez une feuille de style dont les rgles correspondent vos critres, cliquez sur OK.
166
Utilisation des balises div

Insertion et modification de balises div Blocs de mise en forme CSS Utilisation d'lments PA (Utilisateurs de Creative Cloud uniquement) : Sept nouvelles balises smantiques sont disponibles lorsque vous choisissez Insertion > Mise en page. Ces nouvelles balises sont : Article, Aside, HGroup, Navigation, Section, Header et Footer. Pour plus d'informations, voir Insertion d'lments smantiques HTML5 depuis le panneau Insertion.
Insertion et modification de balises div
Haut de la page
Vous pouvez crer des mises en page en insrant manuellement des balises div et en leur appliquant des styles de positionnement CSS. Une balise div est une balise qui dfinit les divisions logiques dans le contenu d'une page Web. Vous pouvez utiliser des balises div pour centrer des blocs de contenu, crer des effets de colonne, crer diffrentes zones de couleur, etc. Si vous ne connaissez pas bien l'utilisation des balises div et des feuilles de style CSS pour crer des pages Web, vous pouvez crer une mise en forme CSS partir de l'une des mises en forme prdfinies fournies avec Dreamweaver. Si vous n'tes pas l'aise dans l'utilisation des feuilles de style CSS, mais que vous connaissez bien l'utilisation des tableaux, vous pouvez galement essayer d'utiliser des tableaux. Remarque : Dreamweaver considre comme des lments positionnement absolu (lments PA) toutes les balises div, mme si vous n'avez pas cr ces balises div l'aide de l'outil de dessin Div PA.
Insertion de balises div

Vous pouvez utiliser des balises div pour crer des blocs de mise en forme CSS et les placer dans votre document. Cette mthode est utile si une feuille de style CSS existante contenant des styles de positionnement est associe votre document. Dreamweaver vous permet d'insrer rapidement une balise div et de lui appliquer des styles existants. 1. Dans la fentre de document, placez le point d'insertion l'endroit o vous voulez insrer la balise div. 2. Effectuez l'une des oprations suivantes : Choisissez Insertion > Objets mise en forme > Balise Div. Dans la catgorie Mise en forme du panneau Insertion, cliquez sur le bouton Insrer la balise Div .
3. Parmi les options suivantes, dfinissez celles de votre choix : Insrer Permet de choisir l'emplacement de la balise div et le nom de la balise s'il ne s'agit pas d'une nouvelle. Classe Affiche le style de classe actuellement appliqu la balise. Si vous avez associ une feuille de style, les classes qui y sont dfinies s'affichent dans la liste. Ce menu permet de slectionner le style appliquer la balise. ID Vous permet de modifier le nom utilis pour identifier la balise div. Si vous avez associ une feuille de style, les ID qui y sont dfinis s'affichent dans la liste. Les ID des blocs dj prsents dans votre document ne sont pas rpertoris. Remarque : Dreamweaver vous avertit si vous tapez un ID dj affect une autre balise dans votre document. Nouvelle rgle de CSS Ouvre la bote de dialogue Nouvelle rgle CSS. 4. Cliquez sur OK. La balise div s'affiche dans votre document sous la forme d'une zone contenant du texte d'espace rserv. Lorsque vous dplacez le pointeur sur le bord de cette zone, Dreamweaver la met en surbrillance. Si la balise div est place de manire absolue, elle devient un lment PA. Vous pouvez modifier les balises div qui ne sont pas positionnement absolu.
Modification des balises div

Aprs avoir insr une balise div, vous pouvez la manipuler ou lui ajouter du contenu. Remarque : Les balises div qui sont positionnes de manire absolue deviennent des lments PA. Les balises div ont des bordures visibles lorsque vous leur attribuez des bordures ou lorsque vous avez slectionn Contours en feuille CSS. (L'option Contours en feuille CSS est slectionne par dfaut dans le menu Affichage > Assistances visuelles.) Lorsque vous faites passer le pointeur sur une balise div, Dreamweaver la met en surbrillance. Vous pouvez modifier la couleur de la mise en surbrillance ou dsactiver la mise en surbrillance. Lorsque vous slectionnez une balise div, vous pouvez afficher et modifier les rgles correspondantes dans le panneau Styles CSS. Vous pouvez aussi ajouter du contenu la balise div : placez simplement le point d'insertion l'intrieur de la balise div, puis procdez l'ajout du contenu
167
comme vous le feriez pour celui d'une page. Affichage et modification des rgles appliques une balise div 1. Procdez de l'une des manires suivantes pour slectionner la balise div : Cliquez sur la bordure de la balise div. Recherchez la surbrillance afin de voir les bordures. Cliquez l'intrieur de la balise div et appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh) deux reprises. Cliquez l'intrieur de la balise div, puis slectionnez-la partir du slecteur de balises figurant au bas de la fentre du document. 2. Choisissez Fentre > Styles CSS pour afficher le panneau Styles CSS, si besoin est. Les rgles appliques la balise div s'affichent dans le panneau. 3. Effectuez les modifications ncessaires. Placement du point d'insertion dans une balise div afin d'y ajouter du contenu Cliquez n'importe o l'intrieur des bordures de la balise. Modification du texte de l'espace rserv dans une balise div Slectionnez le texte, puis tapez un nouveau texte par-dessus ou appuyez sur la touche Suppr. Remarque : Vous pouvez ajouter du contenu la balise div exactement comme vous le feriez dans une page.
Modification de la couleur de surbrillance des balises div

Lorsque vous faites passer le pointeur sur le pourtour d'une balise div en mode Cration, Dreamweaver met ses bordures en surbrillance. Vous pouvez activer ou dsactiver la surbrillance votre convenance ou en modifier la couleur de surbrillance dans la bote de dialogue Prfrences. 1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2. Slectionnez la catgorie Surbrillance dans la liste de gauche. 3. Effectuez l'une des modifications suivantes, puis cliquez sur OK : Pour modifier la couleur de surbrillance des balises div, cliquez dans la case de couleur Survol et slectionnez une couleur de surbrillance l'aide du slecteur de couleur (ou tapez la valeur hexadcimale correspondant la couleur de surbrillance dans la zone de texte). Pour activer ou dsactiver la surbrillance des balises div, activez ou dsactivez la case cocher Afficher de l'option Survol. Remarque : Ces options ont un impact sur tous les objets (tableaux, par exemple) que Dreamweaver met en surbrillance lorsque vous y dplacez le pointeur.
Blocs de mise en forme CSS

Visualisation des blocs de mise en forme CSS
Haut de la page
Vous pouvez visualiser les blocs de mise en forme CSS pendant que vous travaillez en mode Cration. Un bloc de mise en forme CSS est un lment de page HTML que vous pouvez positionner n'importe o sur votre page. Un bloc de mise en forme CSS est plus prcisment soit une balise div sans display:inline, soit un autre lment de page qui inclut les dclarations CSS display:block, position:absolute ou position:relative. Les lments suivants, par exemple, sont considrs comme des blocs de mise en forme CSS dans Dreamweaver: Une balise div Une image laquelle est affecte une position relative ou absolue Une balise a laquelle le style display:block est affect. Un paragraphe auquel une position relative ou absolue est affecte Remarque : Pour des raisons de rendu visuel, les blocs de mise en forme CSS n'incluent pas d'lments en ligne (c'est--dire d'lments dont le code est dfini dans une ligne de texte) ni d'lments de blocs simples tels que des paragraphes. Dreamweaver fournit de nombreuses assistances visuelles pour afficher les blocs de mise en forme CSS. Vous pouvez par exemple activer des contours, des arrire-plans et le modle de bote pour les blocs de mise en forme CSS en mode Cration. Vous pouvez aussi afficher des infobulles qui indiquent les proprits du bloc de mise en forme CSS slectionn lorsque vous placez le pointeur dessus. La liste suivante d'assistances visuelles de bloc de mise en forme CSS dcrit ce que Dreamweaver rend visible pour chacune d'elles : Contours en feuille CSS Affiche les contours de tous les blocs de mise en forme CSS sur la page. Arrire-plans de mise en forme CSS Affiche les couleurs d'arrire-plan affectes temporairement de chaque bloc de mise en forme CSS et masque toutes les autres couleurs d'arrire-plan ou images qui apparaissent normalement sur la page. Lorsque vous activez les assistances visuelles pour afficher les arrire-plans de blocs de mise en forme CSS, Dreamweaver affecte automatiquement une couleur d'arrire-plan distincte chaque bloc de mise en forme CSS. ((Dreamweaver slectionne les couleurs l'aide d'un
168
processus algorithmique. Vous n'avez aucun moyen d'attribuer vous-mme les couleurs.) Les couleurs attribues sont visuellement diffrentes et sont conues pour vous aider distinguer les blocs de mise en forme CSS les uns des autres. Modle de bote de mise en forme CSS Affiche le modle de bote (remplissages et marges) du bloc de mise en forme CSS slectionn.
Affichage des blocs de mise en forme CSS

Vous pouvez activer ou dsactiver les assistances visuelles des blocs de calques CSS en fonction des besoins. Affichage des contours des blocs de mise en forme CSS Choisissez Affichage > Assistances visuelles > Contours en feuille CSS. Affichage des arrire-plans de blocs de mise en forme CSS Choisissez Affichage > Assistances visuelles > Arrire-plans de mise en forme CSS. Affichage des modles de bote de blocs de mise en forme CSS Choisissez Affichage > Assistances visuelles > Modle de bote de mise en forme CSS. Pour accder aux options d'assistances visuelles des blocs de mise en forme CSS, vous pouvez aussi cliquer sur le bouton Assistances visuelles de la barre d'outils du document.
Utilisation des assistances visuelles avec des lments de blocs de mise en forme non-CSS
Vous pouvez utiliser une feuille de style la conception pour afficher les arrire-plans, les bordures ou le modle de bote d'lments qui ne sont pas normalement considrs comme des blocs de mise en forme CSS. Pour ce faire, vous devez d'abord crer une feuille de style la conception qui affecte l'attribut display:block l'lment de page appropri. 1. Crez une feuille de style en cascade (CSS) externe. Pour ce faire, choisissez Fichier > Nouveau, puis slectionnez Page de base dans la colonne Catgorie et CSS dans la colonne Page de base. Cliquez ensuite sur Crer. 2. Dans la nouvelle feuille de style, crez des rgles qui affectent l'attribut display:block aux lments de page afficher en tant que blocs de mise en forme CSS. Si, par exemple, vous souhaitez appliquer une couleur d'arrire-plan aux paragraphes ou aux lments de liste, vous pouvez crer une feuille de style comprenant les rgles suivantes : p{ display:block; } li{ display:block; } 3. Enregistrez le fichier. 4. En mode Cration, ouvrez la page laquelle vous souhaitez associer les nouveaux styles. 5. Choisissez Format > Styles CSS > Conception. 6. Dans la bote de dialogue Feuilles de style la conception, cliquez sur le bouton plus (+) situ au-dessus de la zone de texte Afficher la conception uniquement, slectionnez la feuille de style que vous venez de crer et cliquez sur OK. 7. Cliquez sur OK pour fermer la bote de dialogue Feuilles de style la conception. La feuille de style est associe votre document. Si vous avez cr une feuille de style en suivant l'exemple prcdent, tous les paragraphes et lments de liste seront formats au moyen de l'attribut display:block. Vous pouvez ainsi activer ou dsactiver les assistances visuelles de bloc de mise en forme CSS pour les paragraphes et les lments de liste.
Utilisation d'lments PA
A propos des lments PA dans Dreamweaver
Haut de la page
Un lment PA (lment positionnement absolu) est un lment de page HTML (plus prcisment, une balise div ou toute autre balise) auquel une position absolue est attribue. Les lments PA peuvent comporter du texte, des images ou tout autre contenu placer au sein d'un document HTML. Dreamweaver vous permet d'effectuer la mise en forme d'une page l'aide d'lments PA. Vous pouvez placer les lments PA devant ou derrire d'autres lments PA, masquer certains d'entre eux et en montrer d'autres ou encore dplacer les lments PA travers l'cran. Vous pouvez placer une image d'arrire-plan dans un lment PA, puis placer un deuxime lment PA contenant du texte avec un arrire-plan transparent devant ce dernier. Les lments PA sont gnralement des balises div PA. (Ce sont les types d'lments PA que Dreamweaver insre par dfaut.) Mais n'oubliez pas que vous pouvez classifier tout lment HTML (par exemple, une image) en tant qu'lment PA en lui affectant une position absolue. Tous les lments PA (et pas uniquement les balises div PA) s'affichent dans le panneau Elments PA.
169
Code HTML pour lments div PA

Dreamweaver cre des lments PA en utilisant la balise div. Lorsque vous crez un lment PA l'aide de l'outil Tracer un div pour un lment PA, Dreamweaver insre une balise div dans le document et attribue la balise div une valeur ID (DivAP1 par dfaut au premier div que vous tracez, DivAP2, au deuxime div que vous tracez, etc.). Vous pouvez renommer la div PA votre guise par la suite au moyen du panneau Elments PA ou de l'inspecteur Proprits. Dreamweaver utilise galement des styles CSS intgrs dans la section head du document pour positionner la balise div PA et pour lui affecter ses dimensions exactes. Ce qui suit est un chantillon de code HTML pour une div PA : <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Sample AP Div Page</title> <style type="text/css"> <!-#apDiv1 { position:absolute; left:62px; top:67px; width:421px; height:188px; z-index:1; } --> </style> </head> <body> <div id="apDiv1"> </div> </body> </html> Vous pouvez dfinir les proprits des balises div PA (ou tout lment PA) de votre page, y compris les coordonnes x et y, l'index z (galement appel ordre de superposition) et la visibilit.
Insertion d'une balise div PA

Dreamweaver vous permet de crer facilement des balises div PA sur votre page et de les positionner. Vous pouvez galement crer des balises div PA imbriques. Lorsque vous insrez une div PA, Dreamweaver affiche par dfaut sa bordure en mode Cration et met le bloc en surbrillance lorsque vous passez le pointeur dessus. Vous pouvez dsactiver l'assistance visuelle qui affiche les contours des divs PA (ou de tout lment PA) en dsactivant Contours des lments PA et Contours en feuille CSS dans le menu Affichage > Assistances visuelles. Vous pouvez galement activer les arrire-plans et le modle de bote pour les lments PA en guise d'aide visuelle lors de la conception. Une fois une balise div PA cre, vous pouvez y ajouter du contenu en plaant simplement votre point d'insertion dessus, puis en ajoutant le contenu comme vous le feriez pour celui d'une page. Traage d'une seule balise div PA ou de plusieurs balises div PA la suite 1. Dans la catgorie Mise en forme du panneau Insertion, cliquez sur le bouton Tracer un div pour un lment PA 2. Dans la fentre de cration du document, procdez de l'une des manires suivantes : Faites glisser le pointeur pour dessiner une seule div PA. Maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfonce pour dessiner plusieurs divs PA la suite. Vous pouvez continuer tracer des divs PA tant que vous n'avez pas relch les touches Ctrl ou Commande. Insertion d'une div PA un endroit prcis du document Placez le point d'insertion dans la fentre de document, puis choisissez Insertion > Objets mise en forme > Div PA. Remarque : La balise associe la div PA est place l'emplacement sur lequel vous avez cliqu dans la fentre de document. Le rendu visuel de la balise div PA est donc susceptible d'affecter les autres lments de page (le texte par exemple) qui l'entourent. Placement du point d'insertion dans une div PA Cliquez n'importe o l'intrieur des bordures de la balise div PA. Le contour de la div PA est en surbrillance et la poigne de slection apparat, mais la balise elle-mme n'est pas slectionne. Affichage des bordures d'une div PA
170
Choisissez Affichage > Assistances visuelles, puis slectionnez Contours des divs PA ou Contours en feuille CSS. Remarque : La slection simultane des deux options a le mme effet. Masquage des bordures d'une div PA Choisissez Affichage > Assistances visuelles, puis dslectionnez Contours des divs PA et Contours en feuille CSS.
Utilisation de divs PA imbriques

Une div PA imbrique est une balise div PA dont le code est contenu l'intrieur des balises d'une autre div PA. Par exemple, le code suivant montre deux div PA qui ne sont pas imbriques, et deux divs PA qui le sont : <div id="apDiv1"></div> <div id="apDiv2"></div> <div id="apDiv3"> <div id="apDiv4"></div> </div> La reprsentation graphique de ces deux groupes de balises div PA pourrait ressembler ce qui suit :
Dans le premier groupe de balises div, une div se trouve au dessus de l'autre dans la page. Dans le deuxime groupe, la balise div apDiv4 se trouve effectivement l'intrieur de la balise div apDiv3. (Vous pouvez modifier l'ordre de superposition des divs PA dans le panneau Elments PA.) L'imbrication est souvent utilise pour regrouper des balises div PA. Une balise div PA imbrique se dplace avec sa div PA parent et peut tre configure pour hriter de la visibilit de son parent. Vous pouvez activer l'option Imbrication si vous voulez que les divs PA que vous dessinez l'intrieur d'autres div PA soient automatiquement imbriques. Pour crer une div PA l'intrieur ou par dessus une autre div PA, vous devez aussi dslectionner l'option Empcher les chevauchements. Dessin d'une div PA imbrique 1. Assurez-vous que l'option Empcher les chevauchements est dslectionne dans le panneau Elments PA (Fentre > Elments PA). 2. Dans la catgorie Mise en forme du panneau Insertion, cliquez sur le bouton Tracer un div pour un lment PA .
3. Dans la fentre de cration du document, dessinez une balise div PA l'intrieur d'une div PA existante en faisant glisser la souris. Si l'option Imbrication est dsactive dans les prfrences des lments PA, maintenez la touche Alt (Windows) ou Option (Macintosh) enfonce et faites glisser une div PA pour l'imbriquer dans une div PA existante. Les divs PA imbriques peuvent s'afficher diffremment suivant les navigateurs. Lorsque vous crez des divs PA imbriques, contrlez rgulirement leur affichage dans diffrents navigateurs au cours du processus de cration. Insertion d'une div PA imbrique 1. Assurez-vous que l'option Empcher les chevauchements est dslectionne. 2. Placez le point d'insertion l'intrieur d'une div PA existante dans la fentre de cration du document, puis choisissez Insertion > Objets mise en forme > Div PA. Imbrication des balises div PA automatiquement lorsque vous dessinez une div PA l'intrieur d'une autre div PA Slectionnez l'option Imbrication dans les prfrences des lments PA.
Affichage ou dfinition des prfrences des lments PA

Utilisez la catgorie Elments PA dans la bote de dialogue Prfrences pour indiquer les paramtres par dfaut des nouveaux lments PA crs. 1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2. Slectionnez la catgorie Elments PA dans la liste gauche, slectionnez des lments PA et dfinissez les prfrences suivantes, puis
171
cliquez sur OK. Visibilit Dtermine si les lments PA sont visibles par dfaut. Les options sont par dfaut, hriter, visible et masqu. Largeur et Hauteur Indiquez une largeur et une hauteur par dfaut (en pixels) pour les lments PA que vous crez l'aide du menu Insertion > Objets mise en forme > Div PA. Couleur d'arrire-plan Spcifie une couleur d'arrire-plan par dfaut. Slectionnez une couleur l'aide du slecteur de couleur. Image d'arrire-plan Spcifie une image d'arrire-plan par dfaut. Cliquez sur Parcourir pour trouver le fichier de l'image sur votre ordinateur. Imbrication: Imbriquer en cas de cration dans une div PA Indique si une div PA que vous dessinez partir d'un point situ dans les limites d'une div PA existante doit tre une div PA imbrique. Maintenez la touche Alt (Windows) ou Option (Macintosh) enfonce pour modifier temporairement ce paramtre lorsque vous dessinez une div PA.
Affichage ou dfinition des proprits pour un seul lment PA

Lorsque vous slectionnez un lment PA, l'inspecteur Proprits affiche les proprits de cet lment. 1. Slectionnez un lment PA. 2. Dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur la flche d'agrandissement situe dans le coin infrieur droit (si l'inspecteur est affich en mode rduit) pour visualiser l'ensemble des proprits.
3. Parmi les options suivantes, dfinissez celles de votre choix : Elment CSS-P Spcifie un identificateur pour l'lment PA slectionn. Cet ID identifie l'lment PA dans le panneau Elments PA et dans le code JavaScript. Seuls les caractres alphanumriques sont accepts ; n'utilisez aucun caractre spcial comme les espaces, les traits d'union, les barres obliques ou les points. Chaque lment PA doit avoir un ID unique. Remarque : L'inspecteur Proprits CSS-P prsente les mmes options pour les lments positionnement relatif. G et S (gauche et haut) Indiquez la position du coin suprieur gauche de l'lment PA par rapport au coin suprieur gauche de la page, ou de l'lment PA parent s'il est imbriqu. L et H Indiquez la largeur et la hauteur de l'lment PA. Remarque : Si le contenu d'un lment PA dpasse la taille indique, le bord infrieur de cet lment PA (tel qu'il apparat en mode Cration dans Dreamweaver) s'tire proportionnellement. (Le bord infrieur ne s'tend pas lorsque l'lment PA apparat dans un navigateur, sauf si la proprit Dbordement est dfinie sur Visible). L'unit par dfaut de la position et de la taille est le pixel (px). Vous pouvez galement choisir les units suivantes : pc (picas), pt (points), in (pouces), mm (millimtres), cm (centimtres) ou% (pourcentage de la valeur quivalente de l'lment PA parent). Les abrviations doivent suivre la valeur sans espace : par exemple, 3mm. Index Z Dtermine l'index z ou ordre de superposition, de l'lment PA. Dans un navigateur, les lments PA portant les valeurs les plus leves se superposent aux lments PA portant les valeurs moins leves. Les valeurs peuvent tre positives ou ngatives. Il est plus facile de modifier l'ordre de superposition des lments PA l'aide du panneau Elments PA qu'en saisissant des valeurs d'index z spcifiques. Vis Indique si l'lment PA est initialement visible ou non. Faites votre choix parmi les options suivantes : Aucune proprit de visibilit n'est dfinie par dfaut. Lorsque aucune visibilit n'est prcise, la plupart des navigateurs choisissent Hriter. L'option Hriter utilise la proprit de visibilit de l'objet parent de l'lment PA. Visible affiche le contenu de l'lment PA, quelle que soit la valeur du parent. Masqu dissimule le contenu de l'lment PA, quelle que soit la valeur du parent. Utilisez un langage de script, par exemple JavaScript, pour contrler la proprit de visibilit et afficher le contenu des lments PA de faon dynamique. Image ar-pl Spcifie une image d'arrire-plan pour l'lment PA. Cliquez sur l'icne du dossier parcourir et slectionnez un fichier d'image. Couleur d'ar-pl. Spcifie une couleur d'arrire-plan pour l'lment PA. Laissez cette option vide pour spcifier un arrire-plan transparent. Classe Indique la classe CSS utilise pour crer l'lment PA. Dbordement Contrle la manire dont les lments PA apparaissent dans un navigateur lorsque le contenu dpasse la taille spcifie de l'lment PA.
172
Visible indique que le contenu supplmentaire apparatra dans l'lment PA ; en fait, l'lment PA s'agrandit proportionnellement. Masqu signifie que le contenu supplmentaire ne sera pas affich dans le navigateur. Dfilement indique que le navigateur devra ajouter des barres de dfilement dans l'lment PA, qu'elles soient ncessaires ou non. Auto entrane l'affichage des barres de dfilement de l'lment PA dans le navigateur uniquement lorsque cela est ncessaire (c'est--dire lorsque le contenu de l'lment PA dpasse ses limites). Remarque : La prise en charge de l'option Dbordement est ingale suivant les navigateurs. Dtourage Dfinit la zone visible de l'lment PA. Indiquez les coordonnes gauche, haut, droite et bas pour dfinir un rectangle dans le champ des coordonnes de l'lment PA (en partant du coin suprieur gauche de l'lment PA). L'lment PA est dtour afin que seul le rectangle spcifi soit visible. Par exemple, pour rendre le contenu d'un lment PA invisible l'exception d'un rectangle visible d'une largeur de 50 pixels et d'une hauteur de 75 pixels dans le coin suprieur gauche de l'lment PA, dfinissez G sur 0, S sur 0, D sur 50 et B sur 75. Remarque : Bien que les feuilles de style en cascade utilisent des termes diffrents pour le dtourage, Dreamweaver interprte le dtourage de la mme manire que la plupart des navigateurs. 4. Si vous avez tap une valeur dans une zone de texte, appuyez sur Tab ou Entre (Windows) ou Retour (Macintosh) pour l'appliquer.
Affichage ou dfinition des proprits pour plusieurs lments PA

Lorsque vous slectionnez plusieurs lments PA, l'inspecteur Proprits affiche les proprits du texte et un sous-ensemble de proprits d'lment PA standard, ce qui vous permet de modifier plusieurs lments PA simultanment. Slection de plusieurs lments PA Slectionnez les lments PA tout en maintenant la touche Maj enfonce. Affichage et dfinition des proprits pour plusieurs lments PA 1. Slectionnez plusieurs lments PA. 2. Dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur la flche d'agrandissement situe dans le coin infrieur droit (si l'inspecteur est affich en mode rduit) pour visualiser l'ensemble des proprits.
3. Dfinissez les proprits suivantes pour plusieurs lments PA : G et S (gauche et haut) Indiquez la position du coin suprieur gauche des lments PA par rapport au coin suprieur gauche de la page, ou de l'lment PA parent s'ils sont imbriqus. L et H Indiquez la largeur et la hauteur des lments PA. Remarque : Si le contenu de l'un des lments PA dpasse la taille indique, le bord infrieur de cet lment PA (tel qu'il apparat en mode Cration dans Dreamweaver) s'tire proportionnellement. (Le bord infrieur ne s'tend pas lorsque l'lment PA apparat dans un navigateur, sauf si la proprit Dbordement est dfinie sur Visible). L'unit par dfaut de la position et de la taille est le pixel (px). Vous pouvez galement choisir les units suivantes : pc (picas), pt (points), in (pouces), mm (millimtres), cm (centimtres) ou% (pourcentage de la valeur quivalente de l'lment PA parent). Les abrviations doivent suivre la valeur sans espace : par exemple, 3mm. Vis Indique si les lments PA sont initialement visibles ou non. Faites votre choix parmi les options suivantes : Aucune proprit de visibilit n'est dfinie par dfaut. Lorsque aucune visibilit n'est prcise, la plupart des navigateurs choisissent Hriter. L'option Hriter utilise la proprit de visibilit de l'objet parent des lments PA. Visible affiche le contenu des lments PA, quelle que soit la valeur du parent. Masqu dissimule le contenu de l'lment PA, quelle que soit la valeur du parent. Utilisez un langage de script, par exemple JavaScript, pour contrler la proprit de visibilit et afficher le contenu des lments PA de faon dynamique. Balise Indique la balise HTML utilise pour dfinir les lments PA. Image ar-pl Spcifie une image d'arrire-plan pour les lments PA. Cliquez sur l'icne du dossier parcourir et slectionnez un fichier d'image. Couleur d'ar-pl. Spcifie une couleur d'arrire-plan pour les lments PA. Laissez cette option vide pour spcifier un arrire-plan transparent. 4. Si vous avez tap une valeur dans une zone de texte, appuyez sur Tab ou Entre (Windows) ou Retour (Macintosh) pour l'appliquer.
173
Prsentation du panneau Elments PA

Le panneau Elments PA (Fentre > Elments PA) vous permet de grer les lments PA de votre document. Utilisez le panneau Elments PA pour empcher les lments PA de se chevaucher, pour en modifier la visibilit, pour les imbriquer ou les superposer et pour en slectionner un ou plusieurs. Remarque : Dans Dreamweaver, un lment PA est un lment de page HTML (plus prcisment, une balise div ou toute autre balise) auquel une position absolue est attribue. Le panneau Elments PA n'affiche pas les lments positionnement relatif. Les lments PA sont affichs sous la forme d'une liste de noms, dans l'ordre de l'index z ; le premier lment PA cr (dot d'un index z de 1) apparat par dfaut en bas de la liste et le dernier lment PA cr apparat en haut de la liste. Vous pouvez toutefois modifier l'index z d'un lment PA en changeant sa place dans l'ordre de superposition. Par exemple, si vous crez huit lments PA et souhaitez dplacer le quatrime lment PA en haut de la liste, vous pouvez lui affecter un index z suprieur celui des autres lments PA.
Slection d'lments PA
Vous pouvez slectionner un ou plusieurs lments PA pour les manipuler ou en modifier les proprits. Slection d'un lment PA dans le panneau Elments PA Dans le panneau Elments PA (Fentre > Elments PA), cliquez sur le nom de l'lment PA. Slection d'un lment PA dans la fentre de document Effectuez l'une des oprations suivantes : Cliquez sur la poigne de slection d'un lment PA. Si la poigne n'est pas visible, cliquez n'importe o dans l'lment PA pour la faire apparatre. Cliquez sur une bordure d'un lment PA. Cliquez l'intrieur d'un lment PA en appuyant sur les touches Ctrl et Maj (Windows) ou Commande et Maj (Macintosh). Pour slectionner le contenu d'un lment PA, cliquez l'intrieur de celui-ci et appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh). Appuyez nouveau sur Ctrl+A ou Commande+A pour slectionner l'lment PA. Cliquez l'intrieur d'un lment PA et slectionnez sa balise dans le slecteur de balises. Slection de plusieurs lments PA Effectuez l'une des oprations suivantes : Dans le panneau Elments PA (Fentre > Elments PA), appuyez sur la touche Maj tout en cliquant sur le nom de deux lments PA ou plus. Dans la fentre de document, appuyez sur la touche Maj tout en cliquant l'intrieur d'un ou de plusieurs lments PA ou sur leur bordure.
Modification de l'ordre de superposition des lments PA

Utilisez l'inspecteur Proprits ou le panneau Elments PA pour modifier l'ordre de superposition des lments PA. L'lment PA situ en haut de la liste du panneau Calques Elments PA se trouve au premier rang de l'ordre de superposition et apparat avant les autres lments PA. En code HTML, l'ordre de superposition, ou index z, des lments PA dtermine l'ordre dans lequel ils sont dessins dans un navigateur. Plus l'index z d'un lment PA est lev, et plus sa position dans l'ordre de superposition est leve. (Par exemple, un lment avec un index z de 4 apparatra au-dessus d'un lment avec un index z de 3. 1 est toujours le numro le plus bas dans l'ordre d'empilement.) Vous pouvez modifier l'index z de chaque lment PA l'aide du panneau Elments PA ou de l'inspecteur Proprits. Modification de l'ordre de superposition des lments PA l'aide du panneau Elments PA 1. Slectionnez Fentre > Elments PA pour ouvrir le panneau Elments PA. 2. Double-cliquez sur le numro d'index z en regard de l'lment PA dont vous souhaitez modifier l'index z. 3. Modifiez le numro puis appuyez sur la touche Retour/Entre. Tapez une valeur suprieure afin de dplacer l'lment PA vers le haut dans l'ordre de superposition. Tapez une valeur infrieure afin de dplacer l'lment PA vers le bas dans l'ordre de superposition. Modification de l'ordre de superposition des lments PA l'aide de l'inspecteur Proprits 1. Choisissez Fentre > Elments PA pour ouvrir le panneau Elments PA et visualiser l'ordre de superposition en cours. 2. Dans le panneau Elments PA ou dans la fentre de document, slectionnez l'lment PA dont vous souhaitez modifier l'index z. 3. Dans l'inspecteur Proprits (Fentre > Proprits), tapez un nombre dans la zone de texte Index Z. Tapez une valeur suprieure afin de dplacer l'lment PA vers le haut dans l'ordre de superposition. Tapez une valeur infrieure afin de dplacer l'lment PA vers le bas dans l'ordre de superposition.
174
Affichage et masquage des lments PA

Lorsque vous travaillez sur votre document, vous pouvez afficher ou masquer les lments PA manuellement, l'aide du panneau Elments PA, pour voir comment la page apparatra dans diffrentes situations. Remarque : L'lment PA actuellement slectionn devient toujours visible et apparat devant les autres lments PA. Modification de la visibilit d'un lment PA 1. Slectionnez Fentre > Elments PA pour ouvrir le panneau Elments PA. 2. Cliquez dans la colonne de l'icne en forme d'oeil pour changer la visibilit d'un lment PA. Un oeil ouvert signifie que l'lment PA est visible. Un oeil ferm signifie que l'lment PA est invisible. Si l'icne de l'oeil n'apparat pas, l'lment PA hrite de la visibilit de son parent (lorsque les lments PA ne sont pas imbriqus, le parent correspond au corps du document, qui est toujours visible). Aucune icne en forme d'oeil ne s'affiche lorsque la visibilit n'est pas indique (apparat dans l'inspecteur Proprits comme Visibilit par dfaut). Modification de la visibilit de tous les lments PA la fois Dans le panneau Elments PA (Fentre > Calques), cliquez sur l'icne en forme d'il en haut de la colonne. Remarque : Cette procdure permet de dfinir la visibilit ou la non-visibilit de tous les lments PA, mais elle ne leur permet pas d'hriter.
Redimensionnement des lments PA

Vous pouvez redimensionner un seul ou plusieurs lments PA la fois pour qu'ils aient tous la mme largeur et la mme hauteur. Si l'option Empcher le chevauchement est active, vous ne pourrez pas redimensionner un lment PA s'il doit pour cela en chevaucher un autre. Redimensionnement d'un lment PA 1. En mode Cration, slectionnez un lment PA. 2. Pour redimensionner l'lment PA, procdez de l'une des manires suivantes : Pour redimensionner l'lment PA en le faisant glisser, faites glisser l'une de ses poignes. Pour redimensionner l'lment PA par incrments d'un pixel, maintenez la touche Ctrl (Windows) ou Option (Macintosh) enfonce tout en utilisant les touches flches. Les flches dplacent les bords droit et infrieur de l'lment PA ; cette technique ne permet pas de redimensionner l'lment PA en utilisant les bords suprieur et gauche. Pour redimensionner en alignant sur la grille, appuyez sur Maj-Ctrl-flche (Windows) ou Maj-Option-flche (Macintosh). Dans l'inspecteur Proprits (Fentre > Proprits), tapez les valeurs de largeur (L) et de hauteur (H). Le redimensionnement d'un lment PA en modifie la largeur et la hauteur. Cette action ne dfinit pas la partie visible du contenu de l'lment PA. Vous pouvez dfinir la zone visible d'un lment PA dans les prfrences. Redimensionnement de plusieurs lments PA la fois 1. En mode Cration, slectionnez au moins deux lments PA. 2. Effectuez l'une des oprations suivantes : Choisissez Modifier > Rorganiser > Mme largeur ou Modifier > Rorganiser > Mme hauteur. Les premiers lments PA slectionns prendront la largeur ou la hauteur du dernier slectionn. Dans l'inspecteur Proprits (Fentre > Proprits), sous Plusieurs lments CSS-P, tapez les valeurs de largeur et de hauteur. Ces valeurs sont appliques tous les lments PA slectionns.
Dplacement des lments PA

Vous pouvez dplacer les lments PA en mode Cration de la mme manire que les objets dans la plupart des applications graphiques de base. Si l'option Empcher le chevauchement est active, vous ne pourrez pas dplacer un lment PA s'il doit pour cela en chevaucher un autre. 1. En mode Cration, slectionnez un ou plusieurs lments PA. 2. Effectuez l'une des oprations suivantes : Pour dplacer des lments PA en les faisant glisser, slectionnez-les et faites glisser la poigne de slection du dernier lment PA slectionn (en surbrillance noire). Pour dplacer l'image par incrments d'un pixel, utilisez les touches flches.
175
Maintenez la touche Maj enfonce tout en appuyant sur les touches flches pour dplacer l'lment PA par incrments de la grille.
Alignement des lments PA

Utilisez les commandes d'alignement pour aligner un ou plusieurs lments PA sur l'un des bords du dernier lment PA slectionn. Lors de l'alignement, les lments PA enfants qui ne sont pas slectionns seront dplacs en mme temps que leur parent, si celui-ci est slectionn et dplac. Pour viter ce dplacement, n'utilisez pas d'lments PA imbriqus. 1. En mode Cration, slectionnez un lment PA. 2. Choisissez Modifier > Rorganiser, puis slectionnez une option d'alignement. Par exemple, si vous slectionnez Haut, tous les lments PA se dplacent de faon telle que leurs bordures suprieures sont au mme niveau que celle du dernier lment PA slectionn (en surbrillance noire).
Conversion des lments PA en tableau

Au lieu d'utiliser des tableaux pour crer une mise en forme, certains concepteurs de sites Web prfrent utiliser des lments PA. Dreamweaver vous permet de crer votre mise en forme l'aide d'lments PA, puis, si vous le souhaitez, de les convertir en tableaux. Par exemple, il peut tre ncessaire de convertir les lments PA en tableaux pour pouvoir prendre en charge les navigateurs antrieurs la version 4.0. La conversion des lments PA en tableaux est toutefois dconseille parce qu'elle peut gnrer des tableaux contenant un grand nombre de cellules vides, sans parler les problmes de code plthorique. Si vous avez besoin d'une mise en page utilisant des tableaux, il est prfrable de la crer l'aide des outils standard de mise en forme des tableaux disponibles dans Dreamweaver. Vous pouvez aussi passer des lments PA aux tableaux, et vice-versa, pour peaufiner la mise en forme et optimiser la prsentation de la page. (Toutefois, lorsque vous reconvertissez un tableau en lments PA, Dreamweaver convertit le tableau en balises div PA, quel que soit le type de l'lment PA qui se trouvait dans la page avant d'tre converti en tableau.) Vous ne pouvez pas convertir un tableau ou un lments PA spcifique figurant sur une page. Il n'est possible de convertir des lments PA en tableaux, et des tableaux en divs PA que pour la totalit d'une page. Remarque : Il est impossible de convertir des lments PA en tableaux, ou des tableaux en divs PA, dans un modle de document ou dans un document auquel un modle a t appliqu. Dans ce cas, vous devez crer votre mise en forme dans un document sans modle et le convertir avant de l'enregistrer comme modle.
Conversion des lments PA en tableaux

Crez votre mise en forme l'aide d'lments PA, puis convertissez les lments PA en tableaux afin que votre mise en forme puisse s'afficher dans les navigateurs les moins rcents. Avant de convertir vos lments PA en tableaux, assurez-vous qu'ils ne se chevauchent pas. Veillez en outre bien tre en mode Standard (Affichage > Mode Tableau > Mode Standard). Conversion des lments PA en tableau 1. Slectionnez Modifier > Convertir > Divs PA en tableau. 2. Parmi les options suivantes, dfinissez celles de votre choix et cliquez sur OK : La plus prcise Cre une cellule de tableau pour chaque lment PA et ajoute les cellules ncessaires pour prserver l'espace entre les lments PA. La plus petite : Rduit les cellules vides. Indique que les bords des lments PA doivent tre aligns s'ils sont positionns dans la limite du nombre de pixels dfini. Si vous choisissez cette option, le tableau que vous obtiendrez aura moins de lignes et de colonnes vides, mais ne correspondra pas ncessairement exactement votre mise en forme. Utiliser les GIF transparents Remplit la dernire ligne du tableau d'images GIF transparentes. Slectionner cette option permet d'tre sr que le tableau s'affichera avec les mmes largeurs de colonne dans tous les navigateurs. Lorsque cette option est active, vous ne pouvez pas modifier le tableau obtenu en faisant glisser ses colonnes. Lorsque cette option est dsactive, le tableau obtenu ne contient pas les GIF transparents, mais les largeurs des colonnes peuvent varier suivant le navigateur. Centrer dans la page Centre le tableau obtenu dans la page. Si cette option est dsactive, le tableau commence sur le bord gauche de la page. Conversion des tableaux en divs PA 1. Slectionnez Modifier > Convertir > Tableaux en divs PA. 2. Parmi les options suivantes, dfinissez celles de votre choix et cliquez sur OK : Empcher le chevauchement des lments PA Limite la position des lments PA lorsqu'ils sont crs, dplacs et redimensionns, afin d'viter tout chevauchement. Afficher le panneau Elments PA Affiche le panneau Elments PA. Afficher la grille et Aligner sur la grille Vous permettent d'utiliser une grille pour faciliter le positionnement des lments PA. Les tableaux sont convertis en divs PA. Les cellules vides ne sont pas converties en lments PA, sauf si elles possdent une couleur
176
d'arrire-plan. Remarque : Les lments de la page qui se trouvaient en dehors des tableaux sont galement placs dans les balises div PA.
Empchement du chevauchement des lments PA

Les cellules d'un tableau ne peuvent pas se chevaucher. Dreamweaver ne peut donc pas crer de tableau partir d'lments PA qui se chevauchent. Si vous envisagez de convertir les lments PA d'un document en tableaux, activez l'option Empcher le chevauchement pour restreindre le dplacement et le positionnement des lments PA et en viter le chevauchement. Si cette option est active, aucun lment PA ne peut tre cr, dplac ou redimensionn au-dessus d'un lment PA existant, ni tre imbriqu dans ce dernier. Si vous activez cette option aprs avoir cr des lments PA se chevauchant, faites glisser chaque lment PA concern de faon l'loigner des autres lments PA. Dreamweaver ne corrige pas automatiquement les lments PA existants se chevauchant dans la page lorsque vous activez l'option Empcher le chevauchement des lments PA. Si cette option et l'option d'alignement sont actives, aucun lment PA ne sera align sur la grille si cela doit causer un chevauchement de deux lments PA. Dans ce cas, l'lment PA sera align sur le bord de l'lment PA le plus proche. Remarque : Certaines oprations autorisent le chevauchement des lments PA, mme lorsque l'option Empcher le chevauchement est active. Si vous insrez un lment PA en utilisant le menu Insertion, si vous entrez des valeurs dans l'inspecteur Proprits ou si vous repositionnez des lments PA en modifiant le code source HTML, les lments PA risquent de se chevaucher ou de s'imbriquer lorsque cette option est active. En cas de chevauchement, faites glisser les lments PA qui se chevauchent en mode Cration pour les sparer. Dans le panneau Elments PA (Fentre > Elments PA), activez l'option Empcher le chevauchement. Dans la fentre de document, choisissez Modifier > Rorganiser > Empcher le chevauchement des lments PA. Voir aussi Cration d'une page avec une mise en forme CSS
177
Mise en forme et cration

Cration d'une mise en page avec Dreamweaver CS6 Equipe crative Adobe (19 juillet 2012) didacticiel Dans ce didacticiel, vous allez apprendre les principes de base de cration de pages Web, comment concevoir des vignettes et des structures de conception, insrer et mettre en forme de nouveaux composants dans une mise en forme CSS prdfinie, et vrifier la compatibilit avec les navigateurs.
178
Mises en forme de grille fluide

Utilisation de mises en forme de grille fluide Didacticiels sur les mises en forme de grille fluide Cration d'une mise en forme de grille fluide Insertion d'lments de grille fluide Imbrication d'lments La mise en page d'un site Web doit rpondre et s'adapter aux dimensions du priphrique sur lequel le site Web apparat. Les mises en forme de grille fluide sont un moyen visuel de crer diffrentes mises en page en fonction du priphrique sur lequel le site Web s'affiche. Par exemple, votre site Web sera consult sur des priphriques de bureau, des tablettes et des tlphones portables. Vous pouvez utiliser les mises en forme de grille fluide pour spcifier la mise en page sur chacun de ces priphriques. Selon que le site Web est destin tre consult sur un ordinateur de bureau, une tablette ou un tlphone portable, la mise en forme correspondante est utilise pour l'affichage. Pour plus d'informations : Mise en forme adaptative ou mise en forme ractive ? La version Creative Cloud de Dreamweaver 12.2 comprend de nombreuses amliorations des dispositions de grille fluide, comme la prise en charge des lments structurels HTML5 et la modification aise des lments imbriqus. Vous trouverez la liste complte des amliorations en cliquant ici.
Didacticiels sur les mises en forme de grille fluide

Comment utiliser les mises en forme de grille fluide dans Dreamweaver CS6 (didacticiel) Adobe TV : Cration de concepts adaptatifs l'aide de mises en forme de grille fluide dans Dreamweaver CS6 (vido) Prise en main des grilles fluides Dreamweaver CS6 (didacticiels)
En haut
Cration d'une mise en forme de grille fluide

1. Slectionnez Fichier > Nouvelle mise en forme de grille fluide.
En haut
2. La valeur par dfaut pour le nombre de colonnes dans la grille s'affiche au centre du type de support. Pour personnaliser le nombre de colonnes pour un priphrique, dfinissez la valeur de votre choix. 3. Pour dfinir la largeur d'une page par rapport la taille de l'cran, dfinissez la valeur en pourcentage. 4. Vous pouvez galement modifier la largeur de la gouttire. La gouttire correspond l'espace entre deux colonnes. 5. Spcifiez les options CSS de la page. Lorsque vous cliquez sur Crer, vous tes invit prciser un fichier CSS. Vous pouvez effectuer l'une des oprations suivantes : Crer un nouveau fichier CSS. Ouvrir un fichier CSS existant. Prciser que le fichier CSS en cours d'ouverture est un fichier CSS de grille fluide. La grille fluide pour tlphones portables est affiche par dfaut. Le panneau Insertion correspondant la grille fluide est par ailleurs affich. Utilisez les options du panneau Insertion pour crer votre mise en forme. Pour crer une mise en forme pour d'autres priphriques, cliquez sur l'icne correspondante dans les options situes sous le mode Cration. 6. Enregistrez le fichier. Lorsque vous enregistrez le fichier , vous tes invit enregistrer les fichiers dpendants, tels que boilerplate.css et respond.min.js, dans un emplacement sur votre ordinateur. Spcifiez un emplacement, puis cliquez sur Copier. Le fichier boilerplate.css est bas sur le contenu passe-partout HTML5. Il s'agit d'un jeu de styles CSS qui assure la cohrence du rendu de votre page Web sur plusieurs priphriques. respond.min.js est une bibliothque JavaScript qui contribue la prise en charge des requtes multimdias dans les anciens navigateurs.
179
Insertion d'lments de grilles fluides

Trois nouveaux lments ont t introduits dans Dreamweaver 12.2 : liste simple, liste non ordonne et lment de liste. 1. Slectionnez Insertion > Mise en forme. 2. Slectionnez l'lment que vous souhaitez insrer.
En haut
Tous les lments (fluides et non fluides) sont rpertoris dans le panneau Structure ou dans les options de structure (Insertion > Mise en forme).
3. (12.2) Dans la bote de dialogue qui s'affiche, slectionnez une classe ou entrez une valeur pour l'ID. Les classes du fichier CSS que vous avez spcifi lors de la cration de la page s'affichent dans le menu Classe. L'lment slectionn est insr sur la mise en forme. 4. (Mise jour 12.2) Lorsque vous slectionnez un lment insr, les options permettant de masquer, dupliquer, verrouiller ou supprimer la balise div s'affichent. Pour les balises div places les unes au-dessus des autres, l'option de permutation des balises div s'affiche.
Option A
Etiquette Permuter la balise div
Description Permute l'lment actuellement slectionn avec l'lment au-dessus ou en dessous. Masque l'lment. Pour afficher un lment, procdez de l'une des manires suivantes : Pour afficher les slecteurs d'ID, modifiez la proprit d'affichage dans le fichier CSS bloquer. (display:block ) Pour afficher les slecteurs de classe, supprimez la classe applique (hide_<MediaType> ) dans le code source.
Masquer
Remonter d'une ligne
Dplace l'lment d'une range vers le haut. Duplique l'lment actuellement slectionn. Le code CSS li l'lment est galement dupliqu. Pour les slecteurs d'ID, supprime la fois le code HTML et le code CSS. Pour supprimer uniquement le code HTML, appuyez sur la touche Suppr. Pour les slecteurs de classe, seul le code HTML est supprim. Convertit l'lment en un lment positionnement absolu. Pour les slecteurs de classe, l'option Alignement agit comme un bouton de marge zro. Pour les slecteurs d'ID, le bouton Alignerment aligne l'lment sur la grille.
Dupliquer
Supprimer
Verrouiller
Alignement
Il est possible de parcourir les lments fluides d'une page de manire cyclique en utilisant les touches flches gauche et droite.
180
Slectionnez la limite de l'lment, puis appuyez sur la touche flche.
Imbrication d'lments
En haut
Pour imbriquer des lments fluides dans d'autres lments fluides, assurez-vous que le focus se trouve l'intrieur de l'lment parent. Insrez ensuite l'lment enfant requis. La duplication imbrique est galement prise en charge. La duplication imbrique permet de dupliquer le code HTML (de l'lment slectionn) et de gnrer le code CSS de grille fluide. Les lments absolus contenus dans l'lment slectionn sont positionns en consquence. Il est par ailleurs possible de dupliquer les lments imbriqus l'aide du bouton Dupliquer. Lorsque vous supprimez un lment parent, le code CSS correspondant l'lment, ses enfants et le code HTML associ sont galement supprims. Il est possible de supprimer simultanment tous les lments imbriqus l'aide du bouton Supprimer (raccourci clavier : Ctrl+Suppr).
181
Mise en forme des pages avec CSS

A propos de la mise en page CSS A propos de la structure de mise en page CSS Cration d'une page avec une mise en forme CSS
A propos de la mise en page CSS
En haut
Une mise en page CSS utilise le format de feuilles de style CSS, au lieu de tables ou de cadres HTML traditionnels, pour organiser le contenu d'une page Web. Les lments de base de la mise en forme CSS est la balise div : il s'agit d'une balise HTML qui, la plupart du temps, sert de conteneur pour du texte, des images et d'autres lments de page. Lorsque vous crez une mise en forme CSS, vous placez des balises div dans la page, leur ajoutez du contenu et les positionnez en diffrents endroits. A la diffrence des cellules de tableau, qui ne peuvent exister qu' l'intrieur de lignes et de colonnes d'un tableau, les balises div peut figurer n'importe o sur une page Web. Vous pouvez positionner des balises div de faon absolue (en indiquant des coordonnes x et y) ou de faon relative (en spcifiant leur emplacement par rapport leur position actuelle). Vous pouvez galement placer des balises div afin de dfinir des lments flottants, des marges intrieures et des marges. Cette mthode est privilgie dans les normes Web modernes. La cration de mises en forme CSS entirement nouvelles peut s'avrer difficile, car il existe de trs nombreux moyens de procder. Vous pouvez crer une mise en forme CSS simple deux colonnes en dfinissant des lments flottants, des marges, des remplissages et d'autres proprits CSS dans un nombre de combinaisons quasi illimit. En outre, le problme de restitution sur diffrents types de navigateurs entrane un affichage alatoire de certaines mises en forme CSS qui sont correctement ou incorrectement restitues en fonction du navigateur utilis. Dreamweaver vous permet de crer facilement des pages l'aide de mises en forme CSS en fournissant 16 mises en forme prdfinies qui fonctionnent sur diffrents types de navigateurs. L'utilisation de mises en forme CSS prdfinies fournies avec Dreamweaver constitue la faon la plus simple de crer une page avec une mise en forme, mais vous pouvez galement crer des mises en forme CSS l'aide d'lments positionnement absolu (lments PA). Dans Dreamweaver, un lment PA est un lment de page HTML (plus prcisment, une balise div ou toute autre balise) auquel une position absolue est attribue. Toutefois, du fait de leur positionnement absolu, les lments PA de Dreamweaver prsentent l'inconvnient de ne jamais adapter leur position la page en fonction de la taille de la fentre du navigateur. Si vous tes un utilisateur chevronn, vous pouvez galement insrer des balises div manuellement et leur appliquer des styles de positionnement CSS pour crer des mises en page.
A propos de la structure de mise en page CSS

Avant de lire cette section, vous devez vous tre familiaris avec les concepts CSS de base.
En haut
Les lments de base de la mise en forme CSS est la balise div : il s'agit d'une balise HTML qui, la plupart du temps, sert de conteneur pour du texte, des images et d'autres lments de page. L'exemple ci-dessous montre une page HTML qui contient trois balises div distinctes : une balise container de grande taille, et deux autres balises (une balise sidebar et une balise main content) situes l'intrieur de la balise container.
A. div container B. div sidebar C. div main content Voici le code correspondant ces trois balises div dans le code HTML :  <div id="container">  <div id="sidebar"> <h3>Contenu de la barre latrale</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p> </div>  <div id="mainContent"> <h1>Contenu principal</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p> <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in,
182
vulputate at, odio.</p> <h2>Titre de niveau H2</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p> </div> </div> Dans l'exemple ci-dessus, aucun style n'est associ aux balises div. Si aucune rgle CSS n'est dfinie, chaque balise div et son contenu prend un emplacement par dfaut sur la page. Toutefois, si chaque balise div possde un ID unique (comme dans l'exemple ci-dessus), vous pouvez utiliser ces identificateurs pour crer des rgles CSS qui, une fois appliques, modifient le style et le positionnement des balises div. La rgle CSS suivante, qui peut rsider dans la section head du document ou dans un fichier CSS externe, cre des rgles de style pour la premire balise div (container) de la page : #container { width: 780px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; } La rgle #container applique un style la balise div container qui lui donne une largeur de 780 pixels, un arrire-plan blanc, aucune marge (depuis la gauche de la page), une bordure noire continue de 1 pixel et un texte align gauche. Les rsultats de l'application de la rgle la balise div container sont les suivants :
Balise div Container, 780 pixels, pas de marge A. Texte align gaucheB. Arrire-plan blanc C. 1 Bordure noire continue de 1 pixel La rgle CSS suivante cre des rgles de style pour la balise div sidebar : #sidebar { float: left; width: 200px; background: #EBEBEB; padding: 15px 10px 15px 20px; } La rgle #sidebar applique un style la balise div sidebar qui lui donne une largeur de 200 pixels, un arrire-plan gris, un remplissage haut et bas de 15 pixels, un remplissage droite de 10 pixels et un remplissage gauche de 20 pixels. L'ordre de remplissage par dfaut est le suivant : haut, droite, bas, gauche. En outre, la rgle positionne la balise div sidebar avec float: left, proprit qui pousse la balise div sidebar vers le ct gauche de la balise div container. Les rsultats de l'application de la rgle la balise div sidebar sont les suivants :
Div sidebar, flottante gauche A. Largeur de 200 pixelsB. Remplissage en haut et en bas, 15 pixels Enfin, la rgle CSS pour la balise div container principale termine la mise en forme : #mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px; } La rgle #mainContent applique un style la balise div main qui lui donne une marge gauche de 250 pixels, ce qui correspond un espace de 250 pixels entre le ct gauche de la balise div container et le ct gauche de la balise div main content. En outre, la rgle prvoit 20 pixels d'espacement sur les cts droit, bas et gauche de la balise div main content. Les rsultats de l'application de la rgle la balise div mainContent sont les suivants : Le code complet ressemble ce qui suit :
183
Div main content, marge gauche de 250 pixels A. Remplissage gauche de 20 pixels B. Remplissage droite de 20 pixels C. Remplissage en bas de 20 pixels
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> #container { width: 780px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; } #sidebar { float: left; width: 200px; background: #EBEBEB; padding: 15px 10px 15px 20px; } #mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px; } </style> </head> <body>  <div id="container">  <div id="sidebar"> <h3>Contenu de la barre latrale</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p> </div>  <div id="mainContent"> <h1>Contenu principal</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p> <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> <h2>Titre de niveau H2</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p> </div> </div> </body> Remarque : L'exemple code ci-dessus est une version simplifie du code qui cre la mise en forme deux colonnes avec encadr gauche fixe lorsque vous crez un nouveau document l'aide des mises en formes prdfinies fournies avec Dreamweaver.
En haut
Lors de la cration d'une nouvelle page dans Dreamweaver, vous pouvez en crer une qui contient dj une mise en forme CSS. Dreamweaver vous permet de choisir parmi 16 mises en forme CSS. En outre, vous pouvez crer vos propres mises en forme CSS et les ajouter au dossier de configuration pour qu'elles figurent parmi les choix de mise en forme dans la bote de dialogue Nouveau Document. Les mises en page CSS de Dreamweaver sont restitues correctement dans les navigateurs suivants : Firefox (Windows et Macintosh) 1.0, 1.5, 2.0 et, and 3.6, Internet Explorer (Windows) 5.5, 6.0, 7.0 et 8.0, Opera (Windows et Macintosh) 8.0, 9.0 et 10.0, Safari 2.0, 3.0 et 4.0 et Chrome 3.0. Vous trouverez un article expliquant comment utiliser les mises en forme CSS fournies avec Dreamweaver dans le Ple de dveloppement Dreamweaver. D'autres mises en forme CSS sont disponibles sur le site Adobe Dreamweaver Exchange.

1. Choisissez Fichier > Nouveau. 2. Dans la bote de dialogue Nouveau document, slectionnez la catgorie Modle vierge. Il s'agit de la slection par dfaut. 3. Pour Type de page, slectionnez le type de page crer. Remarque : Vous devez slectionner un type de page HTML pour la mise en forme. Par exemple, vous pouvez slectionner HTML, ColdFusion, PHP, etc. Vous ne pouvez pas crer de page ActionScript, CSS, Library Item, JavaScript, XML, XSLT ou ColdFusion Component avec une mise en forme CSS. Les types de page de la catgorie Autre dans la bote de dialogue Nouveau document ne peuvent pas non plus inclure de mises en page CSS. 4. Pour Mise en forme, slectionnez la mise en forme CSS utiliser. Vous pouvez choisir parmi 16 mises en forme diffrentes. La fentre Aperu montre la mise en forme slectionne et en donne une brve description. Les mises en forme CSS prdfinies fournissent les types de colonnes suivants : Fixe La largeur de colonne est dfinie en pixels. La colonne n'est pas redimensionne selon la taille du navigateur ou des paramtres de texte du visiteur du site. Liquide La largeur de colonne est dfinie en tant que pourcentage de la largeur du navigateur du visiteur du site. La mise en page s'adapte si le visiteur du site augmente ou diminue la largeur de son navigateur, mais pas en fonction des paramtres de texte dfinis par le visiteur. 5. Slectionnez un type de document dans le menu DocType.
184
6. Slectionnez un emplacement pour le fichier CSS de la mise en forme dans le menu droulant CSS de mise en forme dans. Ajouter l'en-tte Ajoute le code CSS de mise en forme l'en-tte de la page que vous crez. Crer un nouveau fichier Ajoute le code CSS de mise en forme une nouvelle feuille de style CSS externe et associe la nouvelle feuille de style la page que vous crez. Lier au fichier existant Permet d'indiquer un fichier CSS existant qui contient dj les rgles CSS requises pour la mise en forme. Cette option est particulirement utile si vous voulez utiliser la mme mise en forme CSS (les rgles CSS figurant dans un fichier) dans plusieurs documents. 7. Effectuez l'une des oprations suivantes : Si vous avez slectionn Ajouter l'en-tte dans le menu droulant CSS de mise en forme dans (l'option par dfaut), cliquez sur Crer. Si vous avez slectionn Crer un nouveau fichier dans le menu droulant CSS de mise en forme, cliquez sur Crer, puis spcifiez un nouveau nom pour le nouveau fichier externe dans la bote de dialogue Enregistrer la feuille de style sous. Si vous avez slectionn Lier au fichier existant dans le menu droulant CSS de mise en forme dans, ajoutez le fichier externe dans la zone de texte Lier le fichier CSS en cliquant sur l'icne d'ajout de feuille de style, en renseignant la bote de dialogue Associer feuille de style externe et en cliquant sur OK. Une fois que vous avez termin, cliquez sur Crer dans la bote de dialogue Nouveau document. Remarque : Lorsque vous slectionnez l'option Lier au fichier existant, le fichier que vous spcifiez doit dj contenir les rgles correspondant au fichier CSS. Lorsque vous placez le CSS de mise en forme dans un nouveau fichier ou lorsque vous le liez un fichier existant, Dreamweaver lie immdiatement le fichier la page HTML que vous crez. Remarque : Les commentaires conditionnels pour Internet Explorer, qui permettent de contourner les problmes de rendu dans IE, restent incorpors dans la section head du nouveau document de mise en forme CSS, mme si vous slectionnez Nouveau fichier externe ou Fichier externe existant en tant qu'emplacement pour votre fichier CSS de mise en forme; 8. (Facultatif) Vous pouvez galement lier des feuilles de style CSS la nouvelle page (sans rapport avec la mise en forme CSS) lors de la cration de cette page. Pour ce faire, cliquez sur l'icne Ajouter une feuille de style au-dessus du volet Lier le fichier CSS, puis slectionnez une feuille de style CSS. Vous trouverez une description dtaille de ce processus dans l'article de David Powers Automatically attaching a style sheet to new documents (en anglais).
Ajout de mises en forme CSS personnalises la liste de choix

1. Crez une page HTML contenant la mise en forme CSS que vous souhaitez ajouter la liste de choix de la bote de dialogue Nouveau document Le fichier CSS correspondant la mise en forme doit rsider dans la section head de la page HTML. Pour uniformiser votre mise en forme CSS personnalise avec les autres mises en formes fournies avec Dreamweaver, vous devez enregistrer votre fichier HTML avec une extension .htm. 2. Ajoutez la page HTML au dossier Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts. 3. (Facultatif) Ajoutez une image d'aperu de votre mise en forme (par exemple, un fichier .gif ou .png) au dossier Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts. Les images par dfaut fournies avec Dreamweaver sont des fichiers PNG de 227 pixels de large x 193 pixels de haut. Donnez votre image d'aperu le mme nom de fichier que votre fichier de faon pouvoir l'identifier facilement. Par exemple, si votre fichier HTML est nomm myCustomLayout.htm, appelez votre image d'aperu myCustomLayout.png. 4. (Facultatif) Crez un fichier de notes pour votre mise en forme personnalise en ouvrant le dossier Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes, en copiant et en collant les fichiers de notes existants dans le mme dossier, et en renommant la copie en fonction de votre mise en forme personnalise. Par exemple, vous pouvez copier le fichier oneColElsCtr.htm.mno et le renommer myCustomLayout.htm.mno. 5. (Facultatif) Aprs avoir cr un fichier de notes pour votre mise en forme personnalise, vous pouvez ouvrir le fichier et spcifier le nom de la mise en forme, sa description et une image d'aperu.
Liaison une feuille de style CSS externe
185
A propos du cadre applicatif Spry

Le cadre applicatif Spry est une bibliothque JavaScript qui permet aux concepteurs Web de crer des pages Web offrant une exprience enrichie aux visiteurs de leurs sites. Avec Spry, vous pouvez utiliser du code HTML et CSS, ainsi qu'une quantit minime de JavaScript, afin d'incorporer des donnes XML dans vos documents HTML, de crer des widgets tels que des accordons et des barres de menus, ou encore ajouter diffrents effets divers lments de page. Le cadre applicatif Spry est conu de telle sorte que le marquage est simple et facile utiliser pour toute personne possdant une connaissance de base du langage HTML, de CSS et de JavaScript. Le cadre applicatif Spry est principalement destin aux professionnels de la conception Web ou aux concepteurs Web amateurs expriments. Il n'est pas destin servir de cadre d'applications Web part entire pour le dveloppement Web au niveau de l'entreprise, bien qu'il puisse tre employ en combinaison avec d'autres pages au niveau de l'entreprise. Pour plus d'informations sur le cadre applicatif Spry, consultez le site www.adobe.com/go/learn_dw_spryframework_fr. Voir aussi Guide de dveloppement Spry
186
Ajout d'effets Spry

Prsentation des effets Spry Application d'un effet Apparition/Fondu Application d'un effet Store Application d'un effet Agrandissement/Rduction Application d'un effet Surligner Application d'un effet Secouer Application d'un effet Glisser Application d'un effet Ecraser Ajout d'un effet supplmentaire Suppression d'un effet
Prsentation des effets Spry
Haut de la page
Les effets Spry sont des amliorations visuelles que vous pouvez appliquer pratiquement n'importe quel lment d'une page HTML l'aide de JavaScript. Les effets sont souvent utiliss pour surligner des informations, crer des transitions animes ou modifier visuellement un lment de page pendant un certain dlai. Vous pouvez appliquer des effets aux lments HTML sans devoir employer de balises personnalises supplmentaires. Remarque : Pour appliquer un effet un lment, il doit tre slectionn ou possder un ID. Si, par exemple, vous surlignez une balise div qui n'est pas slectionne, elle doit possder une valeur ID valide. Si ce n'est pas encore le cas, vous devez en ajouter un au code HTML. Les effets peuvent modifier les proprits d'opacit, d'chelle, de position et de style d'un lment, comme sa couleur d'arrire-plan. Vous pouvez crer d'intressants effets visuels en combinant plusieurs proprits. Ces effets sont bass sur Spry. Ds lors, lorsqu'un utilisateur clique sur un lment possdant un effet, seul l'lment est mis jour de manire dynamique. La page HTML n'est pas entirement actualise. Spry comporte les effets suivants : Apparition/Fondu Fait apparatre ou disparatre lentement un lment. Surligner Modifie la couleur d'arrire-plan d'un lment. Volet Simule l'effet d'un store qui monte ou descend pour afficher ou masquer l'lment. Faire coulisser l'objet 3D Fait monter ou descendre l'lment. Agrandissement/Rduction Augmente ou diminue la taille de l'lment. Secouer Donne l'impression que l'lment est secou de gauche droite. Ecraser Fait disparatre l'lment dans le coin suprieur gauche de la page. Important : Lorsque vous utilisez un effet, diverses lignes de code sont ajoutes au fichier en mode Code. Une ligne identifie le fichier SpryEffects.js, qui est ncessaire l'inclusion des effets. Ne supprimez pas cette ligne du code, faute de quoi les effets ne fonctionneront pas. Vous trouverez la liste dtaille des effets Spry disponibles dans le cadre applicatif Spry l'adresse www.adobe.com/go/learn_dw_spryeffects_fr.
Application d'un effet Apparition/Fondu

Remarque : Vous pouvez utiliser cet effet avec n'importe quel lment HTML, sauf applet, body, iframe, object, tr, tbody ou th. 1. (Facultatif) Slectionnez le contenu ou l'lment de mise en forme auquel vous voulez appliquer l'effet.
Haut de la page
2. Dans le panneau Comportements (Fentre > Comportements), cliquez sur le bouton Plus (+) puis choisissez Effets > Apparition/Fondu dans le menu. 3. Slectionnez l'ID de l'lment dans le menu de l'lment cible. Si vous avez dj slectionn un lment, choisissez <Slection actuelle>. 4. Dans la zone Dure de l'effet, dfinissez le dlai (en millisecondes) ncessaire pour que l'effet se produise. 5. Slectionnez l'effet appliquer : Fondu ou Apparition. 6. Dans la zone Dbut du fondu, dfinissez le pourcentage d'opacit que l'effet doit possder lorsqu'il apparat. 7. Dans la zone Fin du fondu, dfinissez le pourcentage d'opacit atteindre. 8. Cliquez sur Effet de bascule si vous voulez que l'effet soit rversible, en apparaissant lentement puis en disparaissant de nouveau chaque clic de souris.
Application d'un effet Store
Haut de la page
187
Remarque : Cet effet ne peut tre utilis que sur les lments HTML suivants : address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir, menu ou pre. 1. (Facultatif) Slectionnez le contenu ou l'lment de mise en forme auquel vous voulez appliquer l'effet. 2. Dans le panneau Comportements (Fentre > Comportements), cliquez sur le bouton Plus (+) puis choisissez Effets > Store dans le menu. 3. Slectionnez l'ID de l'lment dans le menu de l'lment cible. Si vous avez dj slectionn un lment, choisissez <Slection actuelle>. 4. Dans la zone Dure de l'effet, dfinissez le dlai (en millisecondes) ncessaire pour que l'effet se produise. 5. Slectionnez l'effet appliquer : Store mont ou Store baiss. 6. Dans la zone Store mont depuis/Store baiss depuis, dfinissez le point de dpart du droulement du store, sous la forme d'un pourcentage ou d'un nombre de pixels. Ces valeurs sont calcules partir du dessus de l'lment. 7. Dans la zone Store mont jusqu'/Store baiss jusqu', dfinissez le point final du droulement du store, sous la forme d'un pourcentage ou d'un nombre de pixels. Ces valeurs sont calcules partir du dessus de l'lment. 8. Cliquez sur Effet de bascule si vous voulez que l'effet soit rversible, en remontant puis en redescendant chaque clic de souris.
Application d'un effet Agrandissement/Rduction
Haut de la page
Remarque : Vous pouvez utiliser cet effet avec les lments HTML suivants : address, dd, div, dl, dt, form, p, ol, ul, applet, center, dir, menu ou pre. 1. (Facultatif) Slectionnez le contenu ou l'lment de mise en forme auquel vous voulez appliquer l'effet. 2. Dans le panneau Comportements (Fentre > Comportements), cliquez sur le bouton Plus (+) puis choisissez Effets > Agrandissement/Rduction dans le menu. 3. Slectionnez l'ID de l'lment dans le menu contextuel de l'lment cible. Si vous avez dj slectionn un lment, choisissez <Slection actuelle>. 4. Dans la zone Dure de l'effet, dfinissez le dlai (en millisecondes) ncessaire pour que l'effet se produise. 5. Slectionnez l'effet appliquer : Agrandissement ou Rduction. 6. Dans la zone Dbut agrandissement/Dbut rduction, dfinissez la taille de l'lment au dbut de l'effet. Il s'agit d'un pourcentage de la taille ou d'un nombre de pixels. 7. Dans la zone Fin agrandissement/Fin rduction, dfinissez la taille de l'lment la fin de l'effet. Il s'agit d'un pourcentage de la taille ou d'un nombre de pixels. 8. Si vous choisissez les pixels pour l'une des zones Dbut ou Fin agrandissement/rduction, la zone largeur/hauteur devient visible. En fonction de l'option choisie, l'lment sera agrandi ou rduit de manire proportionnelle. 9. Indiquez si vous voulez que l'lment soit agrandi ou rduit vers le coin suprieur gauche de la page ou le centre de la page. 10. Cliquez sur Effet de bascule si vous voulez que l'effet soit rversible, en tant agrandi puis rduit chaque clic de souris.
Application d'un effet Surligner

Remarque : Vous pouvez utiliser cet effet avec n'importe quel lment HTML, sauf applet, body, frame, frameset et noframes. 1. (Facultatif) Slectionnez le contenu ou l'lment de mise en forme auquel vous voulez appliquer l'effet.
Haut de la page
2. Dans le panneau Comportements (Fentre > Comportements), cliquez sur le bouton Plus (+) puis choisissez Effets > Surligner dans le menu. 3. Slectionnez l'ID de l'lment dans le menu de l'lment cible. Si vous avez dj slectionn un lment, choisissez <Slection actuelle>. 4. Dans la zone Dure de l'effet, dfinissez le dlai (en millisecondes) pendant lequel l'effet doit durer. 5. Slectionnez la couleur de dbut du surlignage. 6. Slectionnez la couleur de fin du surlignage. Cette couleur ne dure que pendant le dlai dfini dans la zone Dure de l'effet. 7. Slectionnez la couleur de l'lment la fin du surlignage. 8. Cliquez sur Effet de bascule si vous voulez que l'effet soit rversible, en recevant successivement les diffrentes couleurs de surlignage chaque clic de souris.
Application d'un effet Secouer
Haut de la page
Remarque : Cet effet peut tre utilis avec les lments HTML suivants : address, blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu, pre ou table. 1. (Facultatif) Slectionnez le contenu ou l'lment de mise en forme auquel vous voulez appliquer l'effet. 2. Dans le panneau Comportements (Fentre > Comportements), cliquez sur le bouton Plus (+) puis choisissez Effets > Secouer dans le menu. 3. Slectionnez l'ID de l'lment dans le menu de l'lment cible. Si vous avez dj slectionn un lment, choisissez <Slection actuelle>.
Application d'un effet Glisser

188
Haut de la page
Pour que l'effet Glisser fonctionne correctement, l'lment cible doit tre entour d'une balise conteneur possdant un ID unique. La balise conteneur dont vous entourez l'lment cible doit tre de type blockquote, dd, form, div ou center. La balise d'lment cible doit tre l'une des suivantes : blockquote, dd,div, form, center, table, span, input, textarea, select ou image. 1. (Facultatif) Slectionnez la balise conteneur du contenu auquel vous voulez appliquer l'effet. 2. Dans le panneau Comportements (Fentre > Comportements), cliquez sur le bouton Plus (+) puis choisissez Effets > Glisser dans le menu. 3. Slectionnez l'ID du conteneur dans le menu de l'lment cible. Si le conteneur est dj slectionn, choisissez <Slection actuelle>. 4. Dans la zone Dure de l'effet, dfinissez le dlai (en millisecondes) ncessaire pour que l'effet se produise. 5. Slectionnez l'effet appliquer : Glisser vers le haut ou Glisser vers le bas. 6. Dans la zone Glisser vers le haut depuis, dfinissez le point de dpart du coulissement, sous la forme d'un pourcentage ou d'un nombre de pixels. 7. Dans la zone Glisser vers le haut jusqu', dfinissez le point final du coulissement, sous la forme d'un pourcentage ou d'un nombre de pixels positif. 8. Cliquez sur Effet de bascule si vous voulez que l'effet soit rversible, en coulissant vers le haut puis vers le bas chaque clic de souris.
Application d'un effet Ecraser
Haut de la page
Remarque : Cet effet ne peut tre utilis qu'avec les lments HTML suivants : address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu ou pre. 1. (Facultatif) Slectionnez le contenu ou l'lment de mise en forme auquel vous voulez appliquer l'effet. 2. Dans le panneau Comportements (Fentre > Comportements), cliquez sur le bouton Plus (+) puis choisissez Effets > Ecraser dans le menu. 3. Slectionnez l'ID de l'lment dans le menu de l'lment cible. Si vous avez dj slectionn un lment, choisissez <Slection actuelle>.
Ajout d'un effet supplmentaire

Vous pouvez associer plusieurs comportements d'effets au mme lment, de manire produire des effets intressants. 1. (Facultatif) Slectionnez le contenu ou l'lment de mise en forme auquel vous voulez appliquer l'effet.
Haut de la page
2. Dans le panneau Comportements (Fentre > Comportements), cliquez sur le bouton Plus (+) puis choisissez un effet dans le menu Effets. 3. Slectionnez l'ID de l'lment dans le menu de l'lment cible. Si vous avez dj slectionn un lment, choisissez <Slection actuelle>.
Suppression d'un effet

Vous pouvez supprimer un ou plusieurs comportements d'effet d'un lment. 1. (Facultatif) Slectionnez le contenu ou l'lment de mise en forme auquel vous voulez appliquer l'effet. 2. Dans le panneau Comportements (Fentre > Comportements), cliquez sur l'effet supprimer de la liste de comportements. 3. Effectuez l'une des oprations suivantes : Cliquez sur le bouton Supprimer un vnement (-) de la barre de titre du panneau secondaire.
Haut de la page
Cliquez sur le comportement avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis choisissez Supprimer le comportement.
189
Modification de l'orientation de la page pour les appareils mobiles (CS5.5 et versions ultrieures)
Sur les appareils mobiles les plus perfectionns, l'orientation d'une page change en fonction de la faon dont l'appareil est tenu. Lorsque l'utilisateur tient le tlphone verticalement, l'affichage emploie l'orientation portrait. Lorsque l'utilisateur fait pivoter l'appareil l'horizontale, la page s'adapte automatiquement l'orientation paysage. Dans Dreamweaver, l'option d'affichage une page en orientation Portrait ou Paysage est disponible dans les modes Affichage en direct et Cration. Ces options vous permettent de tester la manire dont votre page s'adapte ces paramtres. Ensuite, vous pouvez, si ncessaire, modifier votre fichier CSS, de sorte que la page s'affiche comme prvu dans ces deux orientations. Slectionnez Affichage > Taille de fentre > Orientation paysage ou Orientation Portrait.
190
Couleurs
Couleurs Web scurises Utilisation du slecteur de couleur
Couleurs Web scurises
Haut de la page
En HTML, les couleurs sont exprimes par leur valeur hexadcimale (par exemple, #FF0000) ou, pour les principales, par leur nom en anglais (red). Une couleur scurise pour le Web est une couleur qui, en mode 256 couleurs, reste toujours la mme dans Safari et Microsoft Internet Explorer, sous Windows comme sous Macintosh. Par convention, il y a 216 couleurs communes, et toute valeur hexadcimale combinant les paires 00, 33, 66, 99, CC ou FF (correspondant respectivement aux niveaux RVB 0, 51, 102, 153, 204 et 255) reprsente une couleur scurise pour le Web. Des tests approfondis ont cependant rvl qu'en ralit seules 212 couleurs sont scurises pour le Web. Sous Windows, Internet Explorer ne restitue pas correctement les couleurs #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) et #33FF00 (51,255,0). Lorsque les navigateurs Web ont fait leur apparition, la plupart des ordinateurs n'affichaient que 265 couleurs (8 bits par canal, bpc). Aujourd'hui, la plupart des ordinateurs affichent des milliers ou des millions de couleurs (16 et 32 bpc). L'utilit de la palette adapte tous les navigateurs est donc bien moindre si vous dveloppez votre site pour les utilisateurs de systmes informatiques modernes. La palette de couleurs scurise pour le Web peut s'avrer utile si vous crez des sites pour des appareils diffrents, comme les organisateurs personnels et les tlphones mobiles. Un grand nombre de ces appareils sont quips d'un cran noir et blanc (1 bpc) ou 256 couleurs (8 bpc). Les palettes Cubes de couleur (valeur par dfaut) et Ton continu de Dreamweaver utilisent la palette scurise pour le Web de 216 couleurs ; lorsque vous slectionnez une couleur dans ces palettes, c'est la valeur hexadcimale correspondante qui s'affiche. Pour choisir une couleur en dehors de la gamme scurise pour le Web, ouvrez le nuancier du systme en cliquant sur le bouton Roue chromatique en haut droite du slecteur de couleurs de Dreamweaver. Celle-ci n'est pas limite aux couleurs scurises pour le Web. Les versions UNIX des navigateurs utilisent une palette de couleurs diffrente de celle des versions Windows et Macintosh. Si vous dveloppez exclusivement pour des plates-formes UNIX (ou si le public vis est compos d'utilisateurs de Windows ou de Macintosh quips de moniteurs 24 bpc et d'utilisateurs d'UNIX quips de moniteurs 8 bpc), vous pouvez utiliser des valeurs hexadcimales combinant les paires 00, 40, 80, BF ou FF, qui produisent des couleurs scurises pour le Web sur les ordinateurs excutant SunOS.
Utilisation du slecteur de couleur
Haut de la page
Dans Dreamweaver, les inspecteurs de proprits de la plupart des lments de page, ainsi que de nombreuses botes de dialogue, comportent une icne permettant d'ouvrir un slecteur de couleur. Choisissez la couleur d'un lment de page dans le slecteur. Vous pouvez galement dfinir la couleur par dfaut du texte des lments de votre page. 1. Cliquez sur l'icne des couleurs dans n'importe quelle bote de dialogue ou dans l'inspecteur Proprits. Le slecteur de couleur s'affiche l'cran. 2. Effectuez l'une des oprations suivantes : Utilisez la pipette pour slectionner une nuance de couleur dans la palette. Toutes les couleurs des palettes Cubes de couleur (valeur par dfaut) et Ton continu sont scurises pour le Web ; les autres palettes ne le sont pas. Utilisez la pipette pour slectionner une couleur partir d'un point visible l'cran, mme l'extrieur de la fentre de Dreamweaver. Pour slectionner une couleur sur le bureau ou dans une autre application, appuyez sur le bouton de la souris et maintenez-le enfonc. La pipette peut ainsi rester active et slectionner une couleur en dehors de Dreamweaver. Si vous cliquez sur le bureau ou sur une autre application, Dreamweaver slectionne la couleur de l'emplacement o vous avez cliqu. Cependant, si vous passez une autre application, il peut s'avrer ncessaire de cliquer sur une fentre de Dreamweaver pour continuer travailler dans Dreamweaver. Pour largir plus amplement la slection, utilisez le menu droulant en haut droite du nuancier. Vous pouvez slectionner Cubes de couleur, Ton continu, Systme d'exploitation Windows, Mac OS et Niveaux de gris. Remarque : Les palettes Cubes de couleur et Ton continu sont scurises pour le Web, contrairement aux palettes Systme d'exploitation Windows, Mac OS et Niveaux de gris. Pour effacer la couleur en cours sans devoir en choisir une autre, cliquez sur le bouton Couleur par dfaut Pour ouvrir le nuancier du systme, cliquez sur le bouton Roue chromatique . .
191
Cration de requtes multimdias (CS5.5 et versions ultrieures)

Cration d'une requte multimdia Utilisation d'un fichier de requtes multimdias existant Choix d'un autre fichier de requtes multimdias l'chelle du site Affichage de pages Web sur la base d'une requte multimdia Vous pouvez utiliser des requtes multimdias pour spcifier des fichiers CSS sur la base des caractristiques signales au sujet d'un appareil. Le navigateur d'un appareil vrifie la requte multimdia puis utilise le fichier CSS correspondant pour afficher la page Web. Par exemple, la requte multimdia suivante spcifie le fichier phone.css pour les appareils faisant de 300 320 pixels de large. <link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (maxwidth: 320px)"> Vous trouverez une prsentation dtaille des requtes multimdias dans l'article de Don Booth sur le Ple de dveloppement Dreamweaver, l'adresse www.adobe.com/go/learn_dw_medquery_don_fr. Pour plus d'informations sur les requtes multimdias sur le site du W3C, consultez la page www.w3.org/TR/css3-mediaqueries/.
Cration d'une requte multimdia
Haut de la page
Dans Dreamweaver, vous pouvez crer un fichier de requte multimdia l'chelle du site ou une requte multimdia spcifique au document. Fichier de requte multimdia l'chelle du site Spcifie les paramtres d'affichage de toutes les pages de votre site qui comprennent ce fichier. Le fichier de requte multimdia l'chelle du site fait office de dpt central pour toutes les requtes multimdias dans votre site. Aprs avoir cr ce fichier, crez un lien vers celui-ci partir des pages de votre site qui doivent utiliser les requtes multimdias du fichier pour leur affichage. Requte multimdia spcifique au document La requte multimdia est insre directement dans le document et la page s'affiche en fonction de la requte multimdia insre. 1. Crez une page Web. 2. Choisissez Modifier > Requtes multimdias. 3. Effectuez l'une des oprations suivantes : Pour crer un fichier de requte multimdia l'chelle du site, choisissez Fichier de requte multimdia l'chelle du site. Pour crer une requte multimdia propre au document, slectionnez Ce document. 4. Pour une requte multimdia l'chelle du site, procdez comme suit : a. Cliquez sur Spcifier. b. Slectionnez Crer un nouveau fichier. c. Indiquez le nom du fichier et cliquez sur OK. 5. Il se peut que certains appareils ne communiquent pas leurs largeur relle. Pour forcer les appareils communiquer leur largeur relle, assurez-vous que l'option Forcer les appareils communiquer leur largeur relle est active. Le code suivant est insr dans votre fichier lorsque vous slectionnez cette option. <meta name="viewport" content="width=device-width"> 6. Effectuez l'une des oprations suivantes : Cliquez sur + pour dfinir les proprits du fichier de requte multimdia. Cliquez sur Paramtres prdfinis par dfaut si vous souhaitez commencer avec des paramtres prdfinis. 7. Slectionnez les lignes du tableau et modifiez leurs proprits l'aide des options de la section Proprits. Description La description de l'appareil pour lequel le fichier CSS doit tre utilis. Par exemple, tlphone, tlviseur, tablette, etc. Largeur min et Largeur max Le fichier CSS est utilis pour les appareils dont la largeur communique figure dans la plage de valeurs spcifies. Remarque : Laissez la valeur Largeur min ou Largeur max vide si vous ne souhaitez pas spcifier une plage explicite pour un appareil. Par
192
exemple, il est courant de laisser Largeur min vide si vous travaillez pour des tlphones, qui font 320px de large ou moins. Fichier CSS Slectionnez l'option Utiliser fichier existant et localisez le fichier CSS pour l'appareil. Si vous souhaitez spcifier un fichier CSS que vous devez encore crer, slectionnez Crer un nouveau fichier. Entrez le nom du fichier CSS. Le fichier est cr lorsque vous cliquez sur le bouton OK. 8. Cliquez sur OK. 9. Pour une requte multimdia l'chelle du site, un nouveau fichier est cr. Enregistrez-le. Requte multimdia l'chelle du site : Pour les pages existantes, veillez inclure le fichier de requte multimdia dans la balise <head> de toutes les pages. Exemple de lien de requte multimdia o mediaquery_adobedotcom.css est le fichier de requte multimdia l'chelle du site pour le site www.adobe.com : <link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
Utilisation d'un fichier de requtes multimdias existant

1. Crez une page ou ouvrez une page existante. 2. Choisissez Modifier > Requtes multimdias. 3. Choisissez Fichier de requtes multimdias l'chelle du site. 4. Cliquez sur Spcifier. 5. Choisissez l'option Utiliser fichier existant si vous avez dj cr un fichier CSS avec la requte multimdia. 6. Cliquez sur l'icne Parcourir pour atteindre le fichier et le spcifier. Cliquez sur OK. 7. Choisissez Fichier de requtes multimdias l'chelle du site.
Haut de la page
8. Pour forcer les priphriques communiquer leur largeur relle, assurez-vous que l'option Forcer les priphriques communiquer leur largeur relle est active. Le code suivant est insr dans votre fichier lorsque vous slectionnez cette option. <meta name="viewport" content="width=device-width"> 9. Cliquez sur OK.
Choix d'un autre fichier de requtes multimdias l'chelle du site
Haut de la page
Cette procdure permet de changer fichier de requtes multimdias l'chelle du site que vous avez dfini dans la bote de dialogue Requtes multimdias. 1. Choisissez Site > Grer les sites. 2. Dans la bote de dialogue Grer les sites, slectionnez votre site. 3. Cliquez sur Edition. La bote de dialogue Configuration du site s'affiche. 4. Sous Paramtres avancs dans le panneau de gauche, slectionnez Infos locales. 5. Dans la section Fichier de requtes multimdias l'chelle du site du panneau de droite, cliquez sur Parcourir pour slectionner le fichier CSS de requte multimdia. Remarque : Le changement de fichier de requtes multimdias l'chelle du site n'a aucune incidence sur les documents lis un fichier de requtes multimdias l'chelle du site diffrent ou prcdent. 6. Cliquez sur Enregistrer.
Affichage de pages Web sur la base d'une requte multimdia
Haut de la page
Les dimensions spcifies dans une requte multimdia apparaissent dans les options Taille de bouton/fentre crans multiples. Lorsque vous slectionnez une dimension dans le menu, les changements suivants peuvent tre observs : La taille de l'affichage change pour reflter les dimensions spcifies. La taille du cadre du document n'est pas modifie. Le fichier CSS spcifi dans la requte multimdia est utilis pour afficher la page.
193
Conception de pages dynamiques

Dreamweaver et la conception de pages dynamiques

Pour concevoir et crer un site Web dynamique avec succs, excutez la procdure gnrale suivante. 1. Conception de la page
Haut de la page
La conception visuelle de la page constitue l'une des tapes cls dans la conception d'un site Web, qu'il soit statique ou dynamique. En effet, lorsque vous ajoutez des lments dynamiques une page Web, son aspect fonctionnel dpend largement de sa conception. Rflchissez attentivement la faon dont les utilisateurs interagiront avec chacune des pages et avec le site Web dans son ensemble. L'une des mthodes les plus courantes pour insrer un contenu dynamique dans une page Web consiste crer un tableau pour prsenter le contenu puis importer le contenu dynamique dans une ou plusieurs des cellules du tableau. Cette mthode vous permet de prsenter divers types d'informations dans un format structur. 2. Cration d'une source de contenu dynamique Avant de pouvoir afficher des donnes dans une page, les sites Web dynamiques doivent tre associs une source de contenu d'o ils peuvent extraire les donnes. Avant de pouvoir utiliser des sources de contenu dans une page Web, effectuez les actions suivantes : Crez une connexion avec la source de contenu dynamique (telle qu'une base de donnes) et avec le serveur d'application charg du traitement de la page ; Crez la source de donnes l'aide du panneau Liaisons. Vous pouvez ensuite slectionner et insrer la source de donnes dans la page. Prcisez les informations de la base de donnes devant tre affiches ou les variables devant tre incluses dans la page en crant un jeu d'enregistrements. Vous avez galement la possibilit de tester la requte depuis la bote de dialogue Jeu d'enregistrements et de procder tous les rglages ncessaires avant de l'ajouter au panneau Liaisons. Slectionnez et insrez des lments de contenu dynamique dans la page slectionne. 3. Ajout de contenu dynamique une page Web Aprs avoir dfini un jeu d'enregistrements (ou toute autre source de donnes) et l'avoir ajout au panneau Liaisons, vous pouvez insrer le contenu dynamique associ au jeu d'enregistrements dans la page. Grce l'interface base de menus de Dreamweaver, il suffit de slectionner une source de contenu dynamique dans le panneau Liaisons et de l'insrer dans l'objet de texte, d'image ou de formulaire appropri au sein de la page en cours pour ajouter des lments de contenu dynamique. Lorsque vous insrez un lment de contenu dynamique ou un comportement de serveur dans une page, Dreamweaver insre un script ct serveur dans le code source de la page. Ce script donne pour instruction au serveur de rcuprer des donnes partir de la source dfinie et de les restituer dans la page Web. Pour insrer un contenu dynamique dans une page Web, procdez de l'une des manires suivantes : placez ce contenu au niveau du point d'insertion en mode Code ou Cration ; remplacez une chane de texte ou un autre espace rserv ; insrez le contenu dans un attribut HTML. Un contenu dynamique peut, par exemple, dfinir l'attribut src d'une image ou l'attribut de valeur d'un champ de formulaire. 4. Ajout de comportements de serveur une page En dehors de l'ajout de contenu dynamique, vous pouvez intgrer une logique applicative complexe dans des pages Web l'aide des comportements de serveur. Les comportements de serveur correspondent des sections de code prdfinies ct serveur qui ajoutent une logique applicative aux pages Web, ce qui optimise leur interactivit et leurs fonctionnalits. Les comportements de serveur de Dreamweaver vous permettent d'ajouter une logique applicative un site Web sans que vous ayez rdiger le code requis. Les comportements fournis avec Dreamweaver prennent en charge les types de document ColdFusion, ASP et PHP. Les comportements de serveur sont dvelopps et tests de sorte tre rapides, fiables et solides. Les comportements de serveur intgrs prennent en charge des pages adaptes diffrents types de plates-formes et de navigateurs. Grce l'interface pointer-cliquer de Dreamweaver, l'application de contenu dynamique et de comportements complexes une page est aussi simple que l'insertion d'lments de texte et de conception. Les comportements de serveur suivants sont disponibles : Dfinition d'un jeu d'enregistrements partir d'une base de donnes existante. Le jeu d'enregistrements que vous dfinissez est ensuite stock dans le panneau Liaisons.
194
Affichage de plusieurs enregistrements dans une mme page. Vous pouvez slectionner soit un tableau entier, soit des cellules ou lignes prcises renfermant un contenu dynamique, puis dfinir le nombre d'enregistrements afficher sur chaque page. Cration et insertion d'un tableau dynamique dans une page, puis association du tableau un jeu d'enregistrements. Vous pouvez ensuite modifier l'apparence du tableau et de la rgion rpte l'aide respectivement de l'inspecteur Proprits et du comportement de serveur Rgion rpte. Insertion d'un objet de texte dynamique dans une page. L'objet de texte que vous insrez est un lment provenant d'un jeu d'enregistrements prdfini auquel vous appliquez le format de donnes de votre choix. Cration de commandes de navigation entre enregistrements et d'tat des enregistrements, cration de pages Principale/Dtails et de formulaires destins mettre jour les informations d'une base de donnes. Affichage de plusieurs enregistrements partir d'un enregistrement de base de donnes. Cration de liens de navigation de jeu d'enregistrements afin de permettre aux utilisateurs d'afficher les enregistrements prcdant ou suivant un enregistrement de base de donnes. Ajout d'un compteur d'enregistrements pour aider les utilisateurs suivre le nombre d'enregistrements renvoys et leur emplacement dans le rsultat obtenu. Vous pouvez galement enrichir les comportements de serveur de Dreamweaver en rdigeant vos propres comportements ou en installant ceux rdigs par des tiers. 5. Test et dbogage de la page Avant de rendre une page dynamique (ou un site Web entier) accessible sur le Web, il est ncessaire d'en tester les fonctionnalits. Vous devriez galement examiner la faon dont les fonctionnalits de votre application peuvent tre adaptes aux personnes souffrant d'un handicap. Voir aussi Ajout et modification d'images
195
Affichage de donnes l'aide de Spry

A propos des ensembles de donnes Spry Cration d'un ensemble de donnes Spry Cration d'une rgion Spry Cration d'une rgion rpte Spry Cration d'une liste de rptition Spry
A propos des ensembles de donnes Spry
Haut de la page
Un ensemble de donnes Spry est essentiellement un objet JavaScript qui contient une collection de donnes que vous dfinissez. Dreamweaver vous permet de crer rapidement cet objet et d'y charger des donnes partir d'une source de donnes (comme un fichier XML ou HTML). L'ensemble de donnes produit une plage de donnes, sous la forme d'un tableau standard compos de lignes et de colonnes. Lorsque vous crez un ensemble de donnes avec Dreamweaver, vous pouvez galement dfinir comment afficher les donnes sur une page Web. L'on peut considrer un ensemble de donnes comme un conteneur virtuel dont la structure consiste en lignes et en colonnes. Il se prsente sous la forme d'un objet JavaScript dont les informations ne sont visibles que lorsque vous stipulez prcisment comment les afficher sur la page Web. Vous pouvez afficher toutes les donnes de ce conteneur, ou dcider de n'afficher qu'une slection parmi celles-ci. Vous trouverez toutes les informations relatives au fonctionnement des ensembles de donnes Spry l'adresse www.adobe.com/go/learn_dw_sdg_sprydataset_fr. Vous trouverez un didacticiel vido sur l'utilisation des ensembles de donnes Spry, ralis par l'quipe de Dreamweaver, l'adresse www.adobe.com/go/dw10datasets_fr. Vous trouverez un didacticiel vido sur l'utilisation des ensembles de donnes Spry l'adresse www.adobe.com/go/lrvid4047_dw_fr.
Cration d'un ensemble de donnes Spry

Cration d'un ensemble de donnes HTML Spry
Haut de la page
1. Si vous ne procdez qu' la cration d'un ensemble de donnes, il n'est pas ncessaire de vous intresser au point d'insertion. Si vous crez un ensemble de donnes et insrez galement une disposition, veillez ce que le point d'insertion se trouve l'endroit o vous voulez insrer la disposition sur la page. 2. Choisissez Insertion > Spry > Ensemble de donnes Spry. 3. Dans la fentre Dfinir la source des donnes, effectuez les oprations suivantes : Choisissez HTML dans la liste droulante Slectionner le type de donnes. Cette option est active par dfaut. Donnez un nom au nouvel ensemble de donnes. Le nom par dfaut est ds1 lors de la premire cration d'un ensemble de donnes. Le nom de l'ensemble de donnes peut contenir des lettres, des chiffres et des caractres de soulignement, mais il ne peut pas dbuter par un chiffre. Dfinissez les lments de donnes, dans votre source de donnes, que Dreamweaver doit dtecter. Par exemple, si vous avez organis vos donnes l'intrieur d'une balise div et que vous voulez que Dreamweaver dtecte les balises div au lieu des tableaux, choisissez Divs dans la liste droulante Dtecter. L'option Personnalis vous permet d'entrer n'importe quel nom de balise dtecter. Indiquez le chemin d'accs au fichier contenant votre source de donnes HTML. Il peut s'agir d'un chemin relatif un fichier local de votre site (par exemple donnes/donnes_html.html), ou d'une URL absolue vers une page Web publie ( l'aide du protocole HTTP ou HTTPS). Vous pouvez cliquer sur le bouton Parcourir afin d'accder un fichier local puis le slectionner. Dreamweaver rend la source de donnes HTML dans la fentre Slection de donnes et affiche des repres visuels pour les lments susceptibles de servir de conteneurs l'ensemble de donnes. L'lment que vous voulez utiliser doit dj possder un ID unique. Si ce n'est pas le cas, Dreamweaver affiche un message d'erreur, et vous devrez revenir la source de donnes afin d'attribuer un ID unique. Par ailleurs, les lments susceptibles d'tre slectionns, dans le fichier source des donnes, ne peuvent pas se trouver dans des rgions Spry ni contenir d'autres rfrences de donnes. Alternativement, vous pouvez dfinir un flux de conception comme source de donnes. Pour plus d'informations, voir Utilisation d'un flux de conception. Slectionnez l'lment pour votre conteneur de donnes en cliquant sur l'une des flches jaunes qui s'affichent dans la fentre Slection de donnes, ou en choisissant un ID dans la liste droulante Conteneurs de donnes.
196
Slection de l'lment pour le conteneur de donnes de l'ensemble de donnes HTML. Si votre fichier est de grande taille, vous pouvez cliquer sur la flche Dvelopper/Rduire dans le bas de la fentre Slection de donnes afin d'afficher davantage de donnes. Lorsque vous avez slectionn l'lment de donnes pour l'ensemble de donnes, Dreamweaver affiche un aperu de l'ensemble dans la fentre Aperu des donnes. (Facultatif) Activez l'option Slection de donnes avance si vous voulez dfinir des slecteurs CSS pour l'ensemble de donnes. Par exemple, si vous avez indiqu .product dans la zone Slecteurs de lignes et .boximage dans la zone Slecteurs de colonnes, l'ensemble de donnes contiendra uniquement les lignes auxquelles la classe .product a t attribue, et uniquement les colonnes possdant la classe .boximage. Si vous voulez entrer plusieurs slecteurs dans une zone de texte prcise, sparez chacun d'eux par une virgule. Pour plus d'informations, voir A propos des slecteurs de donnes Spry. Lorsque vous avez termin d'utiliser la fentre Dfinir la source des donnes, cliquez sur Termin pour crer immdiatement l'ensemble de donnes, ou cliquez sur Suivant pour accder la fentre Dfinir les options des donnes. Si vous cliquez sur Termin, l'ensemble de donnes est disponible dans le panneau Liaisons (Fentre > Liaisons). 4. Dans la fentre Dfinir les options des donnes, effectuez les oprations suivantes : (Facultatif) Dfinissez les types de colonnes de l'ensemble de donnes en slectionnant une colonne, puis en effectuant une slection dans la liste droulante Type. Par exemple, si une colonne de l'ensemble de donnes contient des nombres, slectionnez cette colonne puis choisissez Nombre dans la liste droulante Type. Cette option n'est importante que si vous voulez que les utilisateurs puissent trier les donnes sur la base de cette colonne. Vous pouvez slectionner une colonne dans l'ensemble de donnes en cliquant sur son titre, en la slectionnant dans la liste droulante Nom de colonne, ou en y accdant l'aide des flches vers la gauche et la droite situes dans le coin suprieur gauche de la fentre. (Facultatif) Dterminez comment les donnes doivent tre tries, en slectionnant la colonne sur laquelle le tri doit tre bas dans la liste droulante Colonne de tri. Lorsque vous avez slectionn la colonne, vous pouvez dterminer si elle doit tre trie dans l'ordre croissant ou dcroissant. (Facultatif : tableaux uniquement) Dsactivez l'option Utiliser la premire ligne comme en-tte si vous voulez employer des noms de colonnes gnriques (c.--d. column0, column1, column2, etc.) au lieu des noms de colonnes dfinis dans votre source de donnes HTML. Remarque : Si vous avez slectionn autre chose qu'un tableau comme lment conteneur de votre ensemble de donnes, cette option et la suivante ne sont pas disponibles. Dreamweaver utilise automatiquement column0, column1, column2, et ainsi de suite, comme nom des colonnes des ensembles de donnes non bass sur un tableau. (Facultatif : tableaux uniquement) Activez l'option Utiliser les colonnes comme lignes pour permuter l'orientation horizontale et verticale des donnes dans l'ensemble de donnes. Si vous activez cette option, les colonnes seront utilises comme lignes. (Facultatif) Activez l'option Filtrer les lignes en double pour exclure les lignes de donnes en double de l'ensemble de donnes. (Facultatif) Activez l'option Dsactiver la mise en cache des donnes si vous voulez toujours avoir accs aux donnes les plus rcentes de l'ensemble de donnes. Si vous voulez que les donnes s'actualisent automatiquement, activez l'option Actualiser automatiquement les donnes puis dfinissez un intervalle d'actualisation, en millisecondes. Lorsque vous avez termin d'utiliser la fentre Dfinir les options des donnes, cliquez sur Termin pour crer immdiatement l'ensemble de donnes, ou cliquez sur Suivant pour accder la fentre Choisir les options d'insertion. Si vous cliquez sur Termin,
197
l'ensemble de donnes est disponible dans le panneau Liaisons (Fentre > Liaisons). 5. Dans la fentre Choisir les options d'insertion, effectuez l'une des oprations suivantes : Slectionnez la disposition du nouvel ensemble de donnes et dfinissez les options de configuration appropries. Pour plus d'informations, voir Slection d'une disposition pour l'ensemble de donnes. Activez l'option Ne pas insrer de code HTML. Si vous activez cette option, Dreamweaver cre l'ensemble de donnes, mais n'ajoute pas de code HTML la page. L'ensemble de donnes est disponible dans le panneau Liaisons (Fentre > Liaisons), et vous pouvez tirer manuellement des donnes sur la page partir de l'ensemble de donnes. 6. Cliquez sur Termin. Dreamweaver cre l'ensemble de donnes et, si vous avez choisi une option de disposition, affiche la disposition et les espaces rservs pour les donnes sur votre page. En mode Code, vous pouvez constater que Dreamweaver a ajout des rfrences, dans l'en-tte, aux fichiers SpryData.js et SpryHTMLDataSet.js. Ces fichiers sont d'importants actifs Spry qui fonctionnent en combinaison avec la page. Veillez ne pas supprimer ce code de la page, faute de quoi l'ensemble de donnes ne fonctionnera pas. Lorsque vous chargez votre page sur un serveur, vous devez galement charger ces fichiers, en tant que fichiers dpendants.
Cration d'un ensemble de donnes XML Spry

1. Si vous ne procdez qu' la cration d'un ensemble de donnes, il n'est pas ncessaire de vous intresser au point d'insertion. Si vous crez un ensemble de donnes et insrez galement une disposition, veillez ce que le point d'insertion se trouve l'endroit o vous voulez insrer la disposition sur la page. 2. Choisissez Insertion > Spry > Ensemble de donnes Spry. 3. Dans la fentre Dfinir la source des donnes, effectuez les oprations suivantes : Choisissez XML dans la liste droulante Slectionner le type de donnes. Donnez un nom au nouvel ensemble de donnes. Le nom par dfaut est ds1 lors de la premire cration d'un ensemble de donnes. Le nom de l'ensemble de donnes peut contenir des lettres, des chiffres et des caractres de soulignement, mais il ne peut pas dbuter par un chiffre. Indiquez le chemin d'accs au fichier contenant votre source de donnes XML. Il peut s'agir d'un chemin relatif un fichier local de votre site (par exemple donnes/donnes.xml), ou d'une URL absolue vers une page sur le Web ( l'aide du protocole HTTP ou HTTPS). Vous pouvez cliquer sur le bouton Parcourir afin d'accder un fichier local puis le slectionner. Dreamweaver rend la source de donnes XML dans la fentre Elments de ligne et affiche l'arborescence XML des lments de donnes pouvant tre slectionns. Les lments rpts sont indiqus par un signe plus (+), et les lments enfants sont mis en retrait. Alternativement, vous pouvez dfinir un flux de conception comme source de donnes. Pour plus d'informations, voir Utilisation d'un flux de conception. Slectionnez l'lment qui contient les donnes afficher. En rgle gnrale, il s'agit d'un lment rpt, tel que <menu_item>, avec plusieurs lments enfants tels que <item>, <link>, <description>, etc.
Slection d'un lment rpt pour l'ensemble de donnes XML. Lorsque vous avez slectionn l'lment de donnes pour l'ensemble de donnes, Dreamweaver affiche un aperu de l'ensemble dans la fentre Aperu des donnes. La zone XPath affiche une expression qui indique l'emplacement du nud slectionn dans le fichier XML source.
198
Remarque : XPath (XML Path Language) est une syntaxe destine traiter des parties d'un document XML. Elle est essentiellement utilise comme langage de requtes pour des donnes XML, tout comme le langage SQL est utilis pour des requtes de bases de donnes. Pour plus d'informations sur XPath, consultez les spcifications du langage XPath sur le site Web du W3C, l'adresse www.w3.org/TR/xpath. Lorsque vous avez termin d'utiliser la fentre Dfinir la source des donnes, cliquez sur Termin pour crer immdiatement l'ensemble de donnes, ou cliquez sur Suivant pour accder la fentre Dfinir les options des donnes. Si vous cliquez sur Termin, l'ensemble de donnes est disponible dans le panneau Liaisons (Fentre > Liaisons). 4. Dans la fentre Dfinir les options des donnes, effectuez les oprations suivantes : (Facultatif) Dfinissez les types de colonnes de l'ensemble de donnes en slectionnant une colonne, puis en effectuant une slection dans la liste droulante Type. Par exemple, si une colonne de l'ensemble de donnes contient des nombres, slectionnez cette colonne puis choisissez Nombre dans la liste droulante Type. Cette option n'est importante que si vous voulez que les utilisateurs puissent trier les donnes sur la base de cette colonne. Vous pouvez slectionner une colonne dans l'ensemble de donnes en cliquant sur son titre, en la slectionnant dans la liste droulante Nom de colonne, ou en y accdant l'aide des flches vers la gauche et la droite situes dans le coin suprieur gauche de la fentre. (Facultatif) Dterminez comment les donnes doivent tre tries, en slectionnant la colonne sur laquelle le tri doit tre bas dans la liste droulante Colonne de tri. Lorsque vous avez slectionn la colonne, vous pouvez dterminer si elle doit tre trie dans l'ordre croissant ou dcroissant. (Facultatif) Activez l'option Filtrer les lignes en double pour exclure les lignes de donnes en double de l'ensemble de donnes. (Facultatif) Activez l'option Dsactiver la mise en cache des donnes si vous voulez toujours avoir accs aux donnes les plus rcentes de l'ensemble de donnes. Si vous voulez que les donnes s'actualisent automatiquement, activez l'option Actualiser automatiquement les donnes puis dfinissez un intervalle d'actualisation, en millisecondes. Lorsque vous avez termin d'utiliser la fentre Dfinir les options des donnes, cliquez sur Termin pour crer immdiatement l'ensemble de donnes, ou cliquez sur Suivant pour accder la fentre Choisir les options d'insertion. Si vous cliquez sur Termin, l'ensemble de donnes est disponible dans le panneau Liaisons (Fentre > Liaisons). 5. Dans la fentre Choisir les options d'insertion, effectuez l'une des oprations suivantes : Slectionnez la disposition du nouvel ensemble de donnes et dfinissez les options de configuration appropries. Pour plus d'informations, voir Slection d'une disposition pour l'ensemble de donnes. Activez l'option Ne pas insrer de code HTML. Si vous activez cette option, Dreamweaver cre l'ensemble de donnes, mais n'ajoute pas de code HTML la page. L'ensemble de donnes est disponible dans le panneau Liaisons (Fentre > Liaisons), et vous pouvez tirer manuellement des donnes sur la page partir de l'ensemble de donnes. 6. Cliquez sur Termin. Dreamweaver cre l'ensemble de donnes et, si vous avez choisi une option de disposition, affiche la disposition et les espaces rservs pour les donnes sur votre page. En mode Code, vous pouvez constater que Dreamweaver a ajout des rfrences, dans l'en-tte, aux fichiers xpath.js et SpryData.js. Ces fichiers sont d'importants actifs Spry qui fonctionnent en combinaison avec la page. Veillez ne pas supprimer ce code de la page, faute de quoi l'ensemble de donnes ne fonctionnera pas. Lorsque vous chargez votre page sur un serveur, vous devez galement charger ces fichiers, en tant que fichiers dpendants.
Slection d'une disposition pour l'ensemble de donnes

La fentre Choisir les options d'insertion permet de slectionner diverses options d'affichage des valeurs de l'ensemble de donnes sur la page. Vous pouvez afficher les donnes l'aide d'un tableau Spry dynamique, d'une disposition principale/dtails, d'une disposition conteneurs empils (colonne unique) ou conteneurs empils avec zone focalisable (deux colonnes). Une vignette reprsentant l'apparence de chaque disposition s'affiche dans la fentre Choisir les options d'insertion. Tableau dynamique Activez cette option si vous voulez afficher vos donnes dans un tableau Spry dynamique. Les tableaux Spry permettent le tri dynamique des colonnes et d'autres comportements interactifs. Lorsque vous avez activ cette option, cliquez sur le bouton Configurer pour ouvrir la bote de dialogue Insrer un tableau, puis procdez comme suit : 1. Dans le panneau Colonnes, ajustez les colonnes du tableau en procdant comme suit : Slectionnez le nom d'une colonne puis cliquez sur le signe moins (-) pour la supprimer du tableau. Cliquez sur le signe plus (+) puis slectionnez le nom d'une colonne pour l'ajouter au tableau. Slectionnez le nom d'une colonne puis cliquez sur la flche vers le haut ou vers le bas pour la dplacer. Si vous faites monter une colonne, elle se trouvera davantage sur la gauche du tableau affich, et sur la droite si vous la faites descendre. 2. Pour autoriser le tri dans une colonne, slectionnez-la dans le panneau Colonnes, puis activez l'option Trier la colonne en cas de clic sur l'en-tte. Par dfaut, toutes les colonnes peuvent faire l'objet d'un tri. Si vous voulez dsactiver le tri dans une colonne, slectionnez son nom dans le panneau Colonnes, puis dsactivez l'option Trier la colonne
199
en cas de clic sur l'en-tte. 3. Si des styles CSS sont associs votre page, sous la forme d'une feuille de style jointe ou d'un ensemble de styles individuels dans la page HTML, vous pouvez appliquer une classe CSS pour une ou plusieurs des options suivantes : Classe de ligne impaire Modifie l'apparence des lignes impaires dans le tableau dynamique en fonction du style de classe slectionn. Classe de ligne paire Modifie l'apparence des lignes paires dans le tableau dynamique en fonction du style de classe slectionn. Classe de survol Modifie l'apparence d'une ligne du tableau lorsque vous amenez le pointeur de la souris au-dessus d'elle, en fonction du style de classe slectionn. Slectionner une classe Modifie l'apparence d'une ligne du tableau lorsque vous cliquez dessus, en fonction du style de classe slectionn. Remarque : L'ordre des classes impaire , paire , survol et slection dans votre feuille de style est trs important. Les rgles doivent tre prcisment places dans l'ordre indiqu ci-dessus (impaire, paire, survol, slection). Si la rgle de survol est place sous la rgle de slection dans la feuille de style, l'effet de survol ne sera visible que lorsque l'utilisateur survolera une autre ligne. Si les rgles de survol et de slection figurent au-dessus des rgles impaire et paire dans la feuille de style, les effets impaire et paire ne fonctionneront pas du tout. Vous pouvez tirer les rgles dans le panneau CSS afin de les placer au bon endroit, ou manipuler directement le code CSS. 4. Si le tableau que vous crez doit devenir un tableau principal dynamique Spry, activez l'option Mettre jour les rgions dtailles en cas de clic sur une ligne. Pour plus d'informations, voir A propos des tableaux principaux Spry et de la mise jour des rgions dtailles. 5. Cliquez sur OK pour fermer la bote de dialogue, puis sur Terminer dans la fentre Choisir les options d'insertion. Si vous tes en mode Cration, le tableau s'affiche avec une ligne d'en-ttes et une ligne de rfrences de donnes. Les rfrences de donnes sont mises en surbrillance et entoures d'accolades ({}). Disposition Principale/Dtails Activez cette option si vous voulez afficher vos donnes selon une disposition principale/dtails. La disposition principale/dtails permet l'utilisateur de cliquer sur un lment dans la rgion principale ( gauche) de manire actualiser les informations dans la rgion de dtails ( droite). En rgle gnrale, la rgion principale contient une longue liste de noms, par exemple une liste de produits disponibles. Lorsque l'utilisateur clique sur l'un des noms de produits, la rgion dtaille affiche des informations bien plus dtailles sur la slection. Lorsque vous avez activ cette option, cliquez sur le bouton Configurer pour ouvrir la bote de dialogue Insrer un bloc d'affichage principal/dtaill, puis procdez comme suit : 1. Dans le panneau Colonnes principales, ajustez le contenu de votre rgion principale en procdant comme suit : Slectionnez le nom d'une colonne puis cliquez sur le signe moins (-) pour la supprimer de la rgion principale. Cliquez sur le signe plus (+) puis slectionnez le nom d'une colonne pour l'ajouter la rgion principale. Par dfaut, Dreamweaver remplit la rgion principale des donnes de la premire colonne de l'ensemble de donnes. Slectionnez le nom d'une colonne puis cliquez sur la flche vers le haut ou vers le bas pour la dplacer. En faisant monter ou descendre une colonne dans le panneau Colonnes principales, vous dfinissez l'ordre d'apparition des donnes dans la rgion principale de la page. 2. Rptez la procdure ci-dessus pour le panneau Colonnes de dtails. Par dfaut, Dreamweaver remplit la rgion dtaille de toutes les donnes qui ne se trouvent pas dans la rgion principale (c'est--dire toutes les colonnes de l'ensemble de donnes, sauf la premire). 3. (Facultatif) Dfinissez diffrents types de conteneurs pour les donnes dans la rgion dtaille. Pour ce faire, choisissez le nom d'une colonne dtaille puis slectionnez le conteneur utiliser pour celle-ci dans la liste droulante Type de conteneur. Vous pouvez choisir des balises DIV, P, SPAN ou H1-H6. 4. Cliquez sur OK pour fermer la bote de dialogue, puis sur Terminer dans la fentre Choisir les options d'insertion. En mode Cration, vous verrez les rgions principale/dtaille s'afficher, remplies des rfrences de donnes slectionnes. Les rfrences de donnes sont mises en surbrillance et entoures d'accolades ({}). Conteneurs empils Activez cette option si vous voulez afficher vos donnes l'aide d'une structure de conteneurs rpts sur la page. Par exemple, si l'ensemble de donnes contient quatre colonnes de donnes, chaque conteneur peut comprendre les quatre colonnes, et la structure de conteneur se rptera pour chaque ligne de l'ensemble de donnes. Lorsque vous avez activ cette option, cliquez sur le bouton Configurer pour ouvrir la bote de dialogue Insrer des conteneurs empils, puis procdez comme suit : 1. Dans le panneau Colonnes, ajustez le contenu de vos conteneurs empils en procdant comme suit : Slectionnez le nom d'une colonne puis cliquez sur le signe moins (-) pour la supprimer des conteneurs empils. Cliquez sur le signe plus (+) puis slectionnez le nom d'une colonne pour l'ajouter aux conteneurs. Par dfaut, Dreamweaver remplit les conteneurs empils des donnes de chaque colonne de l'ensemble de donnes. Slectionnez le nom d'une colonne puis cliquez sur la flche vers le haut ou vers le bas pour la dplacer. En faisant monter ou
200
descendre une colonne dans le panneau Colonnes, vous dfinissez l'ordre d'apparition des donnes dans les conteneurs empils de la page. 2. (Facultatif) Dfinissez diffrents types de conteneurs pour les donnes dans les conteneurs empils. Pour ce faire, choisissez le nom d'une colonne de l'ensemble de donnes, puis slectionnez le conteneur utiliser pour celle-ci dans la liste droulante Type de conteneur. Vous pouvez choisir des balises DIV, P, SPAN ou H1-H6. 3. Cliquez sur OK pour fermer la bote de dialogue, puis sur Terminer dans la fentre Choisir les options d'insertion. En mode Cration, vous verrez le conteneur s'afficher, rempli des rfrences de donnes slectionnes. Les rfrences de donnes sont mises en surbrillance et entoures d'accolades ({}). Conteneurs empils avec zone focalisable Activez cette option si vous voulez afficher les donnes l'aide d'une structure de conteneurs rpts sur la page, avec une zone focalisable dans chaque conteneur. En rgle gnrale, la zone focalisable contient une image. La disposition Zone focalisable est similaire la disposition Conteneurs empils, ceci prs que dans la disposition Zone focalisable, l'affichage des donnes est spar en deux colonnes (dans le mme conteneur). Lorsque vous avez activ cette option, cliquez sur le bouton Configurer pour ouvrir la bote de dialogue Insrer une mise en forme de zone focalisable, puis procdez comme suit : 1. Dans le panneau Colonnes focalisables, ajustez le contenu de votre zone focalisable en procdant comme suit : Slectionnez le nom d'une colonne puis cliquez sur le signe moins (-) pour la supprimer de la zone focalisable. Cliquez sur le signe plus (+) puis slectionnez le nom d'une colonne pour l'ajouter la zone focalisable. Par dfaut, Dreamweaver remplit la zone focalisable des donnes de la premire colonne de l'ensemble de donnes. Slectionnez le nom d'une colonne puis cliquez sur la flche vers le haut ou vers le bas pour la dplacer. En faisant monter ou descendre une colonne dans le panneau Colonnes focalisables, vous dfinissez l'ordre d'apparition des donnes dans la zone focalisable de la page. 2. (Facultatif) Dfinissez diffrents types de conteneurs pour les donnes dans la zone focalisable. Pour ce faire, choisissez le nom d'une colonne de l'ensemble de donnes, puis slectionnez le conteneur utiliser pour celle-ci dans la liste droulante Type de conteneur. Vous pouvez choisir des balises DIV, P, SPAN ou H1-H6. 3. Rptez la procdure ci-dessus pour le panneau Colonnes empiles. Par dfaut, Dreamweaver remplit les colonnes empiles de toutes les donnes qui ne se trouvent pas dans la zone focalisable (c'est--dire toutes les colonnes de l'ensemble de donnes, sauf la premire). 4. Cliquez sur OK pour fermer la bote de dialogue, puis sur Terminer dans la fentre Choisir les options d'insertion. En mode Cration, la zone focalisable s'affiche, avec des conteneurs empils ses cts, remplie par les rfrences de donnes slectionnes. Les rfrences de donnes sont mises en surbrillance et entoures d'accolades ({}). Ne pas insrer de code HTML Activez cette option si vous voulez crer un ensemble de donnes, mais sans que Dreamweaver n'insre de disposition HTML pour celui-ci. L'ensemble de donnes est disponible dans le panneau Liaisons (Fentre > Liaisons), et vous pouvez tirer manuellement des lments sur la page. Mme si vous crez un ensemble de donnes sans insrer de disposition, vous pourrez insrer tout moment l'une des dispositions HTML disponibles. Pour ce faire, double-cliquez sur le nom de l'ensemble de donnes dans le panneau Liaisons, cliquez jusqu' ce que vous accdiez la fentre Choisir les options d'insertion, slectionnez une disposition puis cliquez sur Termin. Remarque : Vous pouvez galement tirer le nom de l'ensemble de donnes du panneau Liaisons jusqu'au point d'insertion sur la page. Lorsque vous procdez de la sorte, la fentre Choisir les options d'insertion s'affiche. Slectionnez une disposition puis cliquez sur Termin.
Modification d'un ensemble de donnes

Lorsque vous avez cr un ensemble de donnes Spry, vous pouvez le modifier tout moment. Dans le panneau Liaisons (Fentre > Liaisons), double-cliquez sur le nom de l'ensemble de donnes puis apportez-y les modifications dsires. Remarque : Lorsque vous modifiez un ensemble de donnes, si vous slectionnez une nouvelle disposition dans la fentre Choisir les options d'insertion, Dreamweaver ne remplace pas la disposition existante sur la page, mais en insre une nouvelle.
Utilisation d'un flux de conception

Si vous travaillez sur des donnes en cours de dveloppement, il peut tre utile d'employer un flux de conception. Par exemple, si le dveloppeur du serveur est en train de finaliser la base de donnes sous-jacente votre fichier de donnes XML, vous pouvez utiliser une version de test du fichier afin de mettre au point votre page indpendamment du dveloppement de la base de donnes. Si vous utilisez un flux de conception, Dreamweaver se borne remplir l'environnement de travail l'aide des donnes provenant de ce flux. Les rfrences la source de donnes qui se trouvent dans le code de page restent des rfrences la vritable source de donnes que vous voulez utiliser. 1. Commencez par crer un ensemble de donnes Spry (reportez-vous la procdure prcdente pour plus d'informations). 2. Dans la fentre Dfinir la source des donnes, cliquez sur le lien Flux de conception.
201
3. Cliquez sur le bouton Parcourir pour rechercher le flux de conception, puis cliquez sur OK.
A propos des slecteurs de donnes Spry

Lorsque vous utilisez Dreamweaver pour crer un ensemble de donnes Spry, Dreamweaver, inclut par dfaut toutes les donnes dans un conteneur slectionn. Vous pouvez affiner cette slection en employant des slecteurs de donnes CSS. Les slecteurs de donnes CSS permettent de n'inclure qu'une partie des donnes de la source de donnes, en dfinissant des rgles CSS qui sont lies certains lments de donnes. Par exemple, si vous entrez .product dans la ligne Slecteurs de lignes de la fentre Dfinir la source des donnes, Dreamweaver cre un ensemble de donnes qui ne contient que les lignes auxquelles la classe .product a t attribue. Pout que les zones des slecteurs de donnes soient accessibles, vous devez activer l'option Slection de donnes avance de la fentre Dfinir la source des donnes. Si vous entrez des slecteurs de donnes puis que vous dsactivez cette option, Dreamweaver conserve ce que vous avez entr dans ces zones, mais il ne les utilise pas pour filtrer l'ensemble de donnes.
A propos des tableaux principaux Spry et de la mise jour des rgions dtailles
L'une des fonctions les plus courantes des ensembles de donnes Spry consiste crer un ou plusieurs tableaux HTML qui mettent jour, de manire dynamique, une autre page en rponse une action de l'utilisateur. Par exemple, si un utilisateur slectionne un produit dans une liste d'un tableau, l'ensemble de donnes peut immdiatement mettre jour des donnes, ailleurs sur la page, l'aide d'informations dtailles sur le produit slectionn. Avec Spry, ces mises jour n'exigent pas l'actualisation de la page. Ces rgions de page distinctes sont baptises rgion principale et rgion dtaille . En rgle gnrale, une partie de la page (la rgion principale) affiche une liste d'lments classs en catgories (par exemple une liste de produits) et une autre partie de la page (la rgion dtaille) affiche plus d'informations au sujet d'un enregistrement slectionn. Chaque ensemble de donnes utilise la notion d'une ligne actuelle et, par dfaut, cette ligne actuelle est la premire de l'ensemble de donnes. Lorsqu'un utilisateur effectue une slection dans une rgion principale (en partant toujours de l'exemple d'une liste de diffrents produits), Spry modifie en fait la ligne actuelle de l'ensemble de donnes. Comme la rgion dtaille dpend de la rgion principale, toute modification rsultant de l'interaction de l'utilisateur avec la rgion principale (par exemple la slection de diffrents produits) entrane la modification des donnes affiches dans la rgion dtaille. Dreamweaver cre automatiquement des dispositions principale/dtaille, de faon mettre en place toutes les associations entre rgion principale et rgion dtaille. Toutefois, si vous voulez crer un tableau principal dynamique, vous pouvez le prparer en vue d'une association ultrieure une rgion dtaille. Lorsque vous activez l'option Mettre jour les rgions dtailles en cas de clic sur une ligne (dans la bote de dialogue Insrer un tableau), Dreamweaver insre une balise spry:setrow l'intrieur de la balise de la ligne rpte de votre tableau dynamique. Cet attribut prpare le tableau en tant que tableau principal capable de rinitialiser la ligne actuelle des donnes lorsque l'utilisateur interagit avec le tableau. Pour plus d'informations sur la cration manuelle de rgions principale/dtaille, voir le guide de dveloppement Spry l'adresse www.adobe.com/go/learn_dw_sdg_masterdetail_fr.
Cration d'une rgion Spry
Haut de la page
Le cadre applicatif Spry emploie deux types de rgions. L'une est une rgion Spry qui entoure les objets de donnes, comme les tableaux et les listes rptes. L'autre est une rgion de dtail Spry qui s'utilise en combinaison avec un objet de tableau principal afin de permettre la mise jour dynamique de donnes sur une page Dreamweaver. Tous les objets de donnes Spry doivent tre inclus dans une rgion Spry. Si vous tentez d'ajouter un objet de donnes Spry avant d'ajouter une rgion Spry une page, Dreamweaver vous invite ajouter une rgion Spry. Par dfaut, les rgions Spry se trouvent dans des conteneurs div HTML. Vous pouvez les ajouter avant d'ajouter un tableau, les ajouter automatiquement quand vous insrez un tableau ou une liste rpte, ou encore les placer autour d'objets de tableau ou de liste rpte existants. En rgle gnrale, si vous ajoutez une rgion de dtail, vous ajouterez tout d'abord l'objet de tableau principal, puis vous activerez l'option Mettre jour les rgions dtailles (voir Tableau dynamique). La seule valeur qui soit diffrente et spcifique pour une rgion de dtail est l'option Type de la bote de dialogue Insrer une rgion Spry. 1. Choisissez Insertion > Spry > Rgion Spry. Vous pouvez galement cliquer sur le bouton Rgion XML Spry de la catgorie Spry du panneau Insertion. 2. Comme conteneur de l'objet, vous pouvez slectionner l'option <div> ou l'option <span>. Le conteneur <div> est utilis par dfaut. 3. Choisissez l'une des options suivantes : Pour crer une rgion Spry, activez Rgion (l'option par dfaut) comme type de rgion insrer. Pour crer une rgion de dtail Spry, activez l'option Rgion Dtail. Une rgion de dtail ne s'emploie que si vous voulez lier des donnes dynamiques qui sont mises jour lorsque les donnes d'une autre rgion Spry changent. Important : Vous devez insrer une rgion de dtail dans une <div> diffrente de celle de la rgion de la table principale. Il peut tre ncessaire de passer en mode Code pour placer prcisment le point d'insertion. 4. Choisissez votre ensemble de donnes Spry dans le menu. 5. Si vous voulez crer ou modifier la rgion dfinie pour un objet, slectionnez-le puis activez l'une des options suivantes :
202
Renvoi la ligne de la slection Place une nouvelle rgion autour d'un objet. Remplacer la slection Remplace une rgion existante pour un objet. 6. Lorsque vous cliquez sur OK, Dreamweaver place un espace rserv de rgion sur votre page, avec le texte Placez ici le contenu de la rgion de dtail Spry . Vous pouvez remplacer ce texte d'espace rserv par un objet de donnes Spry, tel qu'un tableau ou une liste rpte, ou par des donnes dynamiques provenant du panneau Liaisons (Fentre > Liaisons).
Le panneau Liaisons affiche les donnes disponibles depuis l'ensemble de donnes. Remarque : Le panneau Liaisons contient quelques lments Spry intgrs : ds_RowID, ds_CurrentRowID et ds_RowCount. Spry les emploie pour dfinir la ligne dans laquelle un utilisateur a cliqu lorsqu'il dtermine comment mettre jour des rgions de dtail dynamiques. 7. Pour remplacer le texte d'espace rserv par un objet de donnes Spry (par exemple un tableau Spry), cliquez sur le bouton de l'objet de donnes correspondant dans la catgorie Spry du panneau Insertion. 8. Pour remplacer le texte d'espace rserv par des donnes dynamiques, utilisez l'une des mthodes suivantes : Tirez un ou plusieurs lments du panneau Liaisons au-dessus du texte slectionn. En mode Code, tapez directement le code d'un ou plusieurs lments. Utilisez le format suivant : {nom-ensemble-de-donnes::nomlment}, comme dans {ds1::category}. ou {dsProducts::desc}. Si vous n'utilisez qu'un ensemble de donnes dans votre fichier, ou si vous employez des lments du mme ensemble de donnes que celui dfini pour la rgion, vous pouvez omettre le nom de l'ensemble de donnes et simplement crire {category} or {desc}. Quelle que soit la mthode utilise pour dfinir le contenu de votre rgion, les lignes suivantes sont ajoutes votre code HTML : <div spry:region="ds1">{name}{category}</div> <div spry:region="ds2">{ds1::name}{ds1::descheader}</div>
Cration d'une rgion rpte Spry
Haut de la page
Vous pouvez ajouter des rgions rptes pour afficher vos donnes. Une rgion rpte est une structure de donnes simple que vous pouvez mettre en forme comme bon vous semble pour prsenter les donnes. Par exemple, vous pouvez utiliser une rgion rpte pour afficher un ensemble de vignettes photographiques l'une aprs l'autre dans un objet de mise en forme de page, tel qu'un lment div PA. 1. Choisissez Insertion > Spry > Rptition Spry. Vous pouvez galement cliquer sur le bouton Rptition Spry de la catgorie Spry du panneau Insertion. 2. Comme conteneur de l'objet, vous pouvez slectionner l'option <div> ou l'option <span>, en fonction du type de balise dsire. Le conteneur <div> est utilis par dfaut. 3. Activez l'option Rpter (par dfaut) ou Rpter les enfants. Pour disposer d'une souplesse accrue, vous pouvez utiliser l'option Rpter les enfants, o la validation des donnes est effectue pour chaque ligne d'une liste au niveau des enfants. Par exemple, dans une liste <ul>, les donnes sont vrifies au niveau <li>. Si vous activez l'option Rpter, les donnes sont vrifies au niveau <ul>. L'option Rpter les enfants peut s'avrer particulirement utile si vous employez des expressions conditionnelles dans le code. 4. Choisissez votre ensemble de donnes Spry dans le menu. 5. Si vous avez dj slectionn du texte ou des lments, vous pouvez les entourer ou les remplacer. 6. Cliquez sur OK pour afficher une rgion rpte sur votre page. Remarque : Tous les objets de donnes Spry doivent se trouver dans une rgion. Veillez donc crer une rgion Spry sur votre page avant d'insrer une rgion rpte. 7. Lorsque vous cliquez sur OK, Dreamweaver insre un espace rserv de rgion sur votre page, avec le texte Placez ici le contenu de la rgion de dtail Spry . Vous pouvez remplacer ce texte d'espace rserv par un objet de donnes Spry, tel qu'un tableau ou une liste rpte, ou par des donnes dynamiques provenant du panneau Liaisons (Fentre > Liaisons).
203
Le panneau Liaisons affiche les donnes disponibles depuis l'ensemble de donnes. Remarque : Le panneau Liaisons contient quelques lments Spry intgrs : ds_RowID, ds_CurrentRowID et ds_RowCount. Spry les emploie pour dfinir la ligne dans laquelle un utilisateur a cliqu lorsqu'il dtermine comment mettre jour des rgions de dtail dynamiques. 8. Pour remplacer le texte d'espace rserv par un objet de donnes Spry, cliquez sur le bouton de l'objet de donnes appropri dans le panneau Insertion. 9. Pour remplacer le texte d'espace rserv par une ou plusieurs donnes dynamiques, utilisez l'une des mthodes suivantes : Tirez un ou plusieurs lments du panneau Liaisons au-dessus du texte slectionn. En mode Code, tapez directement le code d'un ou plusieurs lments. Utilisez le format suivant : {nom-ensemble-de-donnes::nomlment}, comme dans {ds1::category}. ou {dsProducts::desc}. Si vous n'utilisez qu'un ensemble de donnes dans votre fichier, ou si vous employez des lments du mme ensemble de donnes que celui dfini pour la rgion, vous pouvez omettre le nom de l'ensemble de donnes et simplement crire {category} or {desc}. Quelle que soit la mthode utilise pour dfinir le contenu de votre rgion, les lignes suivantes sont ajoutes votre code HTML : <div spry:region="ds1">{name}{category}</div> <div spry:region="ds2">{ds1::name}{ds1::descheader}</div>
Cration d'une liste de rptition Spry
Haut de la page
Vous pouvez ajouter des listes de rptition pour afficher vos donnes sous la forme d'une liste ordonne, d'une liste non ordonne ( puces) ou d'une liste droulante. 1. Choisissez Insertion > Spry > Liste de rptition Spry. Vous pouvez galement cliquer sur le bouton Liste de rptition Spry de la catgorie Spry du panneau Insertion. 2. Choisissez la balise conteneur utiliser : UL, OL, DL ou SELECT. Les autres options varient en fonction du conteneur choisi. Si vous choisissez SELECT, vous devez complter les zones suivantes : Colonne affiche : Il s'agit de ce que les utilisateurs voient lorsqu'ils affichent la page dans leur navigateur. Colonne de valeurs : Il s'agit de la valeur envoye au serveur d'arrire-plan. Par exemple, vous pouvez crer une liste de villes et montrer Bordeaux et Boulogne aux utilisateurs, tout en envoyant BO ou BO au serveur. Vous pouvez galement utiliser SELECT comme outil de navigation et montrer des noms de produit tels que Adobe Dreamweaver et Adobe Acrobat aux utilisateurs, tout en envoyant des URL telles que support/products/dreamweaver.html et support/products/acrobat.html au serveur. 3. Choisissez votre ensemble de donnes Spry dans le menu. 4. Choisissez les colonnes afficher. 5. Cliquez sur OK pour afficher une liste de rptition sur votre page. En mode Code, vous pouvez voir que des balises de slection <ul>, <ol>, <dl> ou FORM ont t insres dans le fichier. Remarque : Si vous tentez d'insrer une liste de rptition sans avoir cr de rgion, Dreamweaver vous invite en ajouter une avant d'insrer le tableau. Tous les objets de donnes Spry doivent se trouver l'intrieur de rgions.
204
Affichage d'enregistrements d'une base de donnes

A propos des enregistrements de base de donnes Comportements de serveur et lments de formatage Application d'lments typographiques et de mise en forme de page des donnes dynamiques Navigation parmi les rsultats d'un jeu d'enregistrements de base de donnes Cration d'une barre de navigation de jeu d'enregistrements Barres de navigation de jeu d'enregistrements personnalises Tches de cration d'une barre de navigation Affichage et masquage des rgions en fonction des rsultats du jeu d'enregistrements Affichage de plusieurs rsultats d'un jeu d'enregistrements Cration d'un tableau dynamique Cration de compteurs d'enregistrements Utilisation de formats de donnes prdfinis
A propos des enregistrements de base de donnes
Haut de la page
Pour afficher des enregistrements de base de donnes, il faut rcuprer des informations stockes dans une source de contenu, telle qu'une base de donnes, et en effectuer le rendu dans une page Web. Dreamweaver offre de nombreuses mthodes d'affichage de contenu dynamique et propose plusieurs comportements de serveur intgrs. Ces derniers permettent d'amliorer la prsentation du contenu dynamique, de faciliter les recherches et de naviguer parmi les informations renvoyes par une base de donnes. Les bases de donnes et les autres sources de contenu dynamique permettent d'obtenir de meilleurs rsultats lors des oprations de recherche, de tri ou de consultation de volumes d'informations importants. L'utilisation d'une base de donnes pour stocker le contenu de sites Web est particulirement recommande lorsque vous souhaitez stocker des quantits importantes de donnes, puis les rcuprer pour les afficher d'une manire spcifique. Dreamweaver fournit diffrents outils et comportements prdfinis qui permettent de rcuprer et d'afficher efficacement les informations d'une base de donnes.
Comportements de serveur et lments de formatage
Haut de la page
Les comportements de serveur et les lments de formatage proposs par Dreamweaver pour enrichir la prsentation de donnes dynamiques sont les suivants : Formats Les formats permettent d'appliquer diffrents types de valeurs numriques, montaires, de date/heure et de pourcentage un texte dynamique. Par exemple, si le prix d'un lment dans un jeu d'enregistrements est de 10,989, vous pouvez l'afficher sur votre page sous la forme 10,99 en choisissant le format Devise - 2 dcimales de Dreamweaver. Dans ce format, les nombres s'affichent avec deux chiffres aprs la virgule. Si le nombre a plus de deux chiffres aprs 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 zros. Rgion rpte Ces comportements de serveur permettent d'afficher plusieurs lments renvoys par une requte de base de donnes et d'indiquer le nombre d'enregistrements afficher par page. Navigation de jeu d'enregistrements Ces comportements de serveur permettent d'insrer des lments de navigation dont les utilisateurs peuvent se servir pour passer au groupe d'enregistrements prcdent ou suivant renvoy par le jeu d'enregistrements. Supposons que vous choisissiez d'afficher dix enregistrements par page l'aide de l'objet de serveur Rgion rpte et que le jeu d'enregistrements renvoie 40 enregistrements ; vous pouvez alors parcourir les enregistrements par groupe de dix. Barre d'tat du jeu d'enregistrements Ces comportements de serveur permettent d'ajouter un compteur qui indique aux utilisateurs la position dans laquelle ils se trouvent au sein d'un groupe d'enregistrements par rapport au nombre total d'enregistrements renvoys. Afficher la rgion Ces comportements de serveur permettent d'afficher ou de masquer des lments de la page en fonction de la pertinence des enregistrements affichs. Par exemple, si un utilisateur consulte le dernier enregistrement d'un jeu, vous pouvez choisir de n'afficher que le lien Prcdent ; le lien Suivant est alors masqu.
Haut de la page
Application d'lments typographiques et de mise en forme de page des donnes dynamiques
Dreamweaver permet de prsenter des donnes dynamiques au sein d'une page structure et d'appliquer un formatage typographique l'aide de HTML et des feuilles de style en cascade. Pour appliquer des formats des donnes dynamiques dans Dreamweaver, mettez en forme les tableaux et les espaces rservs des donnes dynamiques l'aide des outils de formatage de Dreamweaver. Lors de leur insertion partir d'une source, les donnes adoptent automatiquement le formatage (police, style de paragraphe et tableau) spcifi.
205
Navigation parmi les rsultats d'un jeu d'enregistrements de base de donnes
Haut de la page
Les liens de navigation de jeu d'enregistrements permettent de se dplacer d'un enregistrement un autre ou d'un jeu d'enregistrements un autre. Aprs avoir cr une page devant afficher cinq enregistrements la fois, par exemple, vous pouvez ajouter des liens tels que Suivant ou Prcdent pour que l'utilisateur puisse afficher les cinq enregistrements suivants ou prcdents. Vous pouvez crer quatre types de liens pour la navigation dans les jeux d'enregistrements : Premier, Prcdent, Suivant et Dernier. Une page peut contenir un nombre illimit de liens, condition que tous agissent sur un mme jeu d'enregistrements : Vous ne pouvez pas insrer sur une mme page des liens d'accs des jeux d'enregistrements diffrents. Les lments dynamiques suivants sont ncessaires 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 cliquable. Un jeu de comportements serveur Dplacer vers l'enregistrement pour naviguer dans le jeu d'enregistrements. Vous pouvez ajouter simultanment les deux derniers lments en utilisant l'objet dynamique Barre de navigation des enregistrements ou bien les ajouter sparment en utilisant les outils de conception et le panneau Comportements de serveur.
Cration d'une barre de navigation de jeu d'enregistrements
Haut de la page
Vous pouvez crer en une seule opration une barre de navigation de jeu d'enregistrements l'aide du comportement de serveur correspondant. Cet objet de serveur ajoute les lments suivants la page : Un tableau HTML comportant des liens texte ou image. Un jeu de comportements de serveur Dplacer vers. Un jeu de comportements de serveur Afficher la rgion. La version texte de la barre de navigation du jeu d'enregistrements a l'aspect suivant :
La version image de la barre de navigation du jeu d'enregistrements a l'aspect suivant :
Avant de placer la barre de navigation dans la page, assurez-vous que la page contient un jeu d'enregistrements dans lequel naviguer et une mise en forme pour afficher les enregistrements. Aprs avoir plac la barre de navigation sur la page, vous pouvez personnaliser la barre votre gr l'aide des outils de conception. Vous pouvez galement modifier les comportements de serveur Dplacer vers et Afficher la rgion en double-cliquant dessus dans le panneau Comportements de serveur. Dreamweaver cre un tableau qui contient des liens texte ou image permettant l'utilisateur, lorsqu'il clique dessus, de se dplacer dans le jeu d'enregistrements slectionn. Lorsque le premier enregistrement du jeu s'affiche, les liens ou images Premier et Prcdent sont masqus. Lorsque le dernier enregistrement du jeu s'affiche, les liens ou images Suivant et Dernier sont masqus. Vous pouvez personnaliser la mise en forme de la barre de navigation l'aide des outils de conception et du panneau Comportements de serveur. 1. En mode Cration, placez le point d'insertion l'endroit de la page o vous souhaitez que la barre de navigation apparaisse. 2. Ouvrez la bote de dialogue Barre de navigation du jeu d'enregistrements (Insertion > Objets de donnes > Pagination du jeu d'enregistrements > Barre de navigation du jeu d'enregistrements). 3. Dans le menu droulant Jeu d'enregistrements, slectionnez le jeu d'enregistrements dans lequel naviguer. 4. Dans la section Afficher l'aide de, slectionnez le format d'affichage des liens de navigation sur la page et cliquez sur OK. Text Place des liens texte sur la page. Images Inclut des images graphiques en tant que liens. Dreamweaver utilise ses propres fichiers d'image. Lorsque la barre se trouve sur la page, vous pouvez nanmoins les remplacer par les vtres.
Barres de navigation de jeu d'enregistrements personnalises
Haut de la page
Vous pouvez crer votre propre barre de navigation de jeu d'enregistrements qui utilise des styles de formatage plus complexes que ceux qu'offre la table simple cre par l'objet de serveur Barre de navigation du jeu d'enregistrements.
206
Pour crer votre propre barre de navigation de jeu d'enregistrements, vous devez : crer des liens de navigation dans du texte ou des image ; placer les liens sur la page en mode Cration ; attribuer un comportement de serveur distinct chaque lien de navigation. Cette section explique comment assigner un comportement de serveur distinct chaque lien de navigation.
Cration et attribution de comportements de serveur un lien de navigation

1. En mode Cration, slectionnez sur la page la chane de texte ou l'image qui servira de lien de navigation entre les enregistrements. 2. Ouvrez le panneau Comportements de serveur (Fentre > Comportements de serveur), puis cliquez sur le bouton Plus (+). 3. Choisissez Pagination du jeu d'enregistrements dans le menu droulant, puis slectionnez le comportement qui convient dans la liste des comportements de serveur. Si le jeu contient un nombre important d'enregistrements, le comportement de serveur Dplacer vers le dernier enregistrement peut tre long s'excuter lorsque l'utilisateur clique sur le lien. 4. Dans le menu droulant Jeu d'enregistrements, slectionnez le jeu contenant les enregistrements et cliquez sur OK. Le comportement de serveur est assign au lien de navigation.
Dfinition des options de la bote de dialogue Dplacer vers (comportement de serveur)

Ajouter des liens permettant l'utilisateur de naviguer parmi les enregistrements d'un jeu d'enregistrements 1. Si vous n'avez rien slectionn sur la page, slectionnez un lien dans le menu droulant. 2. Slectionnez le jeu contenant les enregistrements parcourir et cliquez sur OK. Remarque : Si le jeu contient un nombre important d'enregistrements, le comportement de serveur Dplacer vers le dernier enregistrement peut tre long s'excuter lorsque l'utilisateur clique sur le lien.
Tches de cration d'une barre de navigation
Haut de la page
Pour concevoir une barre de navigation personnalise, commencez par en crer la reprsentation visuelle l'aide des outils de conception de page de Dreamweaver. Il est inutile de crer un lien pour la chane de texte ou l'image, car Dreamweaver s'en charge votre place. La page sur laquelle crer la barre de navigation doit contenir un jeu d'enregistrements dans lequel naviguer. Une barre de navigation de jeu d'enregistrements simple, c'est--dire une barre dont les boutons sont crs partir d'lments de contenu tels que des images, ressemble ceci :
Aprs avoir ajout un jeu d'enregistrements une page et cr la barre de navigation, vous devez appliquer les comportements de serveur individuels chaque lment de navigation. Par exemple, une barre de navigation de jeu d'enregistrements typique contient la reprsentation des liens suivants, associe au comportement appropri : Lien de navigation Accder la premire page Accder la page prcdente Accder la page suivante Accder la dernire page Comportement de serveur Dplacer vers la premire page Dplacer vers la page prcdente Dplacer vers la page suivante Dplacer vers la dernire page
Affichage et masquage des rgions en fonction des rsultats du jeu d'enregistrements
Haut de la page
Vous pouvez galement indiquer qu'une rgion soit affiche ou masque selon que le jeu d'enregistrements est vide ou non. Si un jeu d'enregistrements est vide (aucun enregistrement ne correspond la requte, par exemple), vous pouvez afficher un message informant l'utilisateur de l'absence de rsultats. Cette fonction est particulirement utile lors de la cration de pages de recherche reposant sur des termes que l'utilisateur doit entrer. De mme, vous pouvez afficher un message d'erreur lorsqu'un problme survient au cours de la connexion une base de donnes ou lorsque le nom et le mot de passe de l'utilisateur ne correspondent pas ceux reconnus par le serveur. Les comportements de serveur Afficher la rgion sont les suivants : Afficher si le jeu d'enregistrements est vide
207
Afficher si le jeu d'enregistrements n'est pas vide Afficher s'il s'agit de la premire page Afficher si ce n'est pas la premire page Afficher s'il s'agit de la dernire page Afficher si ce n'est pas la dernire page 1. En mode Cration, slectionnez sur la page la rgion afficher ou masquer. 2. Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+). 3. Dans le menu droulant, slectionnez Afficher la rgion, puis choisissez l'un des comportements de serveur proposs et cliquez sur OK.
Affichage de plusieurs rsultats d'un jeu d'enregistrements
Haut de la page
Le comportement de serveur Rgion rpte vous permet d'afficher sur une page plusieurs enregistrements d'un jeu. Toute slection de donnes dynamique peut tre convertie en rgion rpte. Les zones les plus courantes sont les tableaux, les lignes de tableau ou les sries de lignes de tableau. 1. En mode Cration, slectionnez une rgion comportant un contenu dynamique. La slection peut tre de tout type, notamment tableau, ligne de tableau ou mme paragraphe de texte. Pour slectionner prcisment une rgion sur une page, vous pouvez utiliser le slecteur de balises dans le coin gauche de la fentre de document. Par exemple, si la rgion correspond une ligne de tableau, cliquez sur la ligne, puis cliquez sur la balise <tr> situe le plus droite dans le slecteur de balises pour slectionner la ligne du tableau. 2. Pour afficher le panneau Comportements de serveur, choisissez Fentre > Comportements de serveur. 3. Cliquez sur le bouton Plus (+) et choisissez Rgion rpte. 4. Slectionnez le nom du jeu d'enregistrements utiliser dans le menu droulant. 5. Slectionnez le nombre d'enregistrements afficher sur chaque page et cliquez sur OK. Dans la fentre de document, un contour fin de couleur grise dlimite la rgion rpte.
Modification de rgions rptes dans l'inspecteur Proprits

Modifiez la rgion rpte slectionne en modifiant les options suivantes : Nom de la rgion rpte. Jeu d'enregistrements contenant les enregistrements pour la rgion rpte Nombre d'enregistrements affichs Lorsque vous slectionnez une nouvelle option, Dreamweaver met la page jour.
Rutilisation des jeux d'enregistrements en PHP

Si vous cherchez un didacticiel sur la rutilisation des jeux d'enregistrements PHP, consultez celui de David Powers : How Do I Reuse a PHP Recordset in More Than One Repeat Region? (Comment rutiliser un jeu d'enregistrements PHP dans plusieurs rgions rptes ?)
Cration d'un tableau dynamique
Haut de la page
L'exemple ci-dessous illustre comment le comportement de serveur Rgion rpte s'applique une ligne de tableau et indique qu'il est possible d'afficher un maximum de neuf enregistrements par page. La ligne elle-mme affiche quatre enregistrements diffrents : city, state, street address et zip code.
208
Pour crer un tableau semblable celui de l'exemple prcdent, vous devez crer un tableau contenant un contenu dynamique et appliquer le comportement de serveur Rgion rpte la ligne renfermant le contenu dynamique. Lorsque la page est traite par le serveur d'application, la ligne est rpte autant de fois que le nombre spcifi dans l'objet de serveur Rgion rpte, avec un enregistrement diffrent insr dans chaque ligne. 1. Procdez de l'une des manires suivantes pour insrer un tableau dynamique : Choisissez Insertion > Objets de donnes > Donnes dynamiques > Tableau dynamique pour afficher la bote de dialogue Tableau dynamique. Dans la catgorie Donnes du panneau Insertion, cliquez sur le bouton Donnes dynamiques et slectionnez l'icne Tableau dynamique dans le menu. 2. Slectionnez le jeu d'enregistrements dans le menu droulant Jeu d'enregistrements. 3. Slectionnez le nombre d'enregistrements afficher sur chaque page. 4. (Facultatif) Entrez les valeurs des bordures du tableau, de la marge intrieure des cellules et de l'espacement entre les cellules. La bote de dialogue Tableau dynamique mmorise les valeurs spcifies pour les bordures du tableau, la marge intrieure des cellules et l'espacement entre les cellules. Remarque : Si vous travaillez sur un projet ncessitant plusieurs tableaux dynamiques d'aspect semblable, tapez les valeurs de mise en forme du tableau pour simplifier le dveloppement des pages. Une fois le tableau insr, vous pouvez toutefois ajuster ces valeurs l'aide de l'inspecteur Proprits du tableau. 5. Cliquez sur OK. Un tableau et des espaces rservs destins au contenu dynamique dfini dans le jeu d'enregistrements associ s'insrent sur la page.
Dans cet exemple, le jeu d'enregistrements contient quatre colonnes : AUTHORID, FIRSTNAME, LASTNAME et BIO. Le nom de chaque colonne se place dans la ligne de titre du tableau. Vous pouvez remplacer les titres par tout texte descriptif ou image pertinente.
Cration de compteurs d'enregistrements
Haut de la page
Les compteurs d'enregistrements permettent aux utilisateurs de connatre leur position relative dans un jeu d'enregistrements. Ils affichent gnralement le nombre total d'enregistrements renvoys et le nombre actuel d'enregistrements affichs. Prenons l'exemple d'un jeu d'enregistrements renvoyant 40 enregistrements individuels, avec huit enregistrements affichs par page ; le compteur d'enregistrements indique alors sur la premire page Affichage des enregistrements 1 8 sur 40 . Avant de crer un compteur d'enregistrements pour une page, vous devez d'abord crer un jeu d'enregistrements pour la page, une mise en forme approprie pour la prsentation du contenu dynamique et une barre de navigation de jeu d'enregistrements.
209
Cration de compteurs d'enregistrements simples

Un compteur d'enregistrements indique aux utilisateurs la position dans laquelle ils se trouvent au sein d'un groupe d'enregistrements, par rapport au nombre total d'enregistrements renvoys. Il constitue donc un comportement utile permettant d'amliorer considrablement l'aspect fonctionnel d'un site Web. L'objet de serveur Etat de navigation du jeu d'enregistrements permet de crer un compteur d'enregistrements simple. Cet objet de serveur cre une entre de texte sur la page pour afficher l'tat de l'enregistrement actif. Vous pouvez personnaliser votre compteur d'enregistrements l'aide des outils de cration de page de Dreamweaver. 1. Placez le point d'insertion l'endroit o vous souhaitez insrer le compteur d'enregistrements. 2. Choisissez Insertion > Objets de donnes > Afficher le nombre d'enregistrements > Etat de navigation du jeu d'enregistrements, slectionnez le jeu d'enregistrements dans le menu droulant Jeu d'enregistrements, puis cliquez sur OK. L'objet de serveur Etat de navigation du jeu d'enregistrements insre un compteur d'enregistrements texte qui ressemble l'exemple suivant :
Affich en mode En direct, le compteur prsente un apparence similaire l'exemple suivant :
Cration et ajout du compteur d'enregistrements la page

Dans la bote de dialogue Insrer l'tat de navigation du jeu d'enregistrements, slectionnez le jeu d'enregistrements surveiller, puis cliquez sur OK.
Cration de compteurs d'enregistrements personnaliss

Vous faites appel des comportements de comptage d'enregistrements individuels pour crer des compteurs d'enregistrements personnaliss. Les compteurs d'enregistrements personnaliss sont plus sophistiqus que le simple tableau une seule ligne insr par l'objet de serveur Etat de navigation du jeu d'enregistrements. Vous pouvez organiser les lments de manires varies et cratives et appliquer un comportement de serveur appropri chaque lment. Les comportements de serveur de comptage des enregistrements sont les suivants : Afficher le numro de l'enregistrement de dbut Afficher le numro de l'enregistrement de fin Afficher le nombre total d'enregistrements Avant de crer un compteur d'enregistrements personnalis sur une page, vous devez d'abord crer un jeu d'enregistrements pour la page, une mise en forme approprie pour la prsentation du contenu dynamique et une barre de navigation de jeu d'enregistrements. Dans cet exemple, un compteur d'enregistrements similaire l'exemple de la section Crer des compteurs d'enregistrements simples est cr. Dans cet exemple, le texte mis en forme avec la police sans-serif reprsente les espaces rservs aux nombres d'enregistrements qui seront insrs dans la page. Le compteur d'enregistrements de cet exemple se prsente comme suit : Affichage des enregistrements StartRow EndRow sur RecordSet.RecordCount. 1. En mode Cration, tapez le texte du compteur sur la page. Il peut s'agir de n'importe quel texte. Par exemple : Displaying records thru of . 2. Placez le point d'insertion la fin de la chane de texte. 3. Ouvrez le panneau Comportements de serveur (Fentre > Comportements de serveur). 4. Cliquez sur le bouton Plus(+) dans le coin suprieur gauche, puis cliquez sur Afficher le nombre d'enregistrements. Dans ce sous-menu, choisissez Afficher le nombre total des enregistrements. Le comportement Afficher le nombre total des enregistrements s'insre sur la page et un espace rserv se place au niveau du point d'insertion. La chane de texte ressemble maintenant ce qui suit : Displaying records thru of {Recordset1.RecordCount}. 5. Placez le point d'insertion aprs le mot records, et slectionnez Afficher le numro de l'enregistrement de dbut dans le panneau Nombre d'enregistrements (Comportements de serveur > Plus (+) > Nombre d'enregistrements. La chane de texte ressemble maintenant ce qui suit : Displaying records {StartRow_Recordset1} thru of {Recordset1.RecordCount}. 6. Placez maintenant le point d'insertion entre les mots thru et of, et slectionnez Afficher le numro de l'enregistrement de dbut dans le panneau Nombre d'enregistrements (Comportements de serveur > Plus (+) > Nombre d'enregistrements. La chane de texte ressemble maintenant ce qui suit : Displaying records {StartRow_Recordset1} thru {EndRow_Recordset1} of{Recordset1.RecordCount}.
210
7. Pour vrifier que le compteur fonctionne correctement, affichez la page en mode En direct. Le compteur prsente une apparence similaire l'exemple suivant : Displaying records 1 thru 8 of 40. Si la page de rsultats comporte un lien de navigation permettant d'accder au groupe d'enregistrements suivant, il suffit de cliquer sur ce lien pour mettre jour le compteur d'enregistrements comme suit : Showing records 9 thru 16 of 40.
Utilisation de formats de donnes prdfinis
Haut de la page
Dreamweaver contient plusieurs formats de donnes prdfinis que vous pouvez appliquer des lments de donnes dynamiques. Les styles de format de donnes prdfinis sont les suivants : Date/Heure, Devise, Nombre et Pourcentage.
Application d'un format de donnes un contenu dynamique

1. Slectionnez l'espace rserv pour contenu dynamique dans la fentre Document. 2. Choisissez Fentre > Liaisons pour afficher le panneau Liaisons. 3. Dans la colonne Format, cliquez sur le bouton flch pointant vers le bas. Si la flche vers le bas n'est pas visible, agrandissez le panneau. 4. Dans le menu droulant Format, slectionnez la catgorie de format de donnes souhaite. Assurez-vous que le format de donnes convient au type de donnes formater. Les formats Devise, par exemple, ne fonctionnent que pour des donnes numriques. En outre, il est impossible d'appliquer plusieurs formats aux mmes donnes. 5. Assurez-vous que le format a t appliqu correctement. Pour ce faire, prvisualisez la page en mode En direct.
Personnalisation d'un format de donnes

1. Ouvrez une page contenant des donnes dynamiques en mode Cration. 2. Slectionnez les donnes dynamiques dont vous souhaitez personnaliser le format. L'lment de donnes lies dont vous avez slectionn le texte dynamique se met en surbrillance. Le panneau affiche deux colonnes pour l'lment slectionn : Liaison et Format. Si la colonne Format n'est pas visible, largissez le panneau Liaisons afin de l'afficher. 3. Dans le panneau Liaisons, cliquez sur la flche vers le bas de la colonne Format pour dvelopper le menu droulant des formats de donnes disponibles. Si la flche vers le bas n'est pas visible, agrandissez davantage le panneau Liaisons. 4. Dans le menu droulant, choisissez Modifier la liste de formats. 5. Compltez les options de la bote de dialogue, puis cliquez sur OK. a. Slectionnez le format dans la liste, puis cliquez sur Modifier. b. Modifiez un ou plusieurs des paramtres suivants dans les botes de dialogue Devise, Nombre ou Pourcentage, puis cliquez sur OK. Nombre de chiffres afficher aprs la virgule Affichage ou absence d'un zro devant les nombres dcimaux infrieurs un Affichage ou absence de parenthses ou d'un signe moins pour les valeurs ngatives Regroupement ou non des chiffres c. Pour supprimer un format de donnes, cliquez sur le format dans la liste, puis sur le bouton Moins (-).
Cration d'un format de donnes (ASP uniquement)

1. Ouvrez une page contenant des donnes dynamiques en mode Cration. 2. Slectionnez les donnes dynamiques pour lesquelles crer le format personnalis. 3. Choisissez Fentre > Liaisons pour afficher le panneau Liaisons, puis cliquez sur la flche vers le bas dans la colonne Format. Si la flche vers le bas n'est pas visible, agrandissez le panneau. 4. Dans le menu droulant, choisissez Modifier la liste de formats. 5. Cliquez sur le bouton Plus (+) et slectionnez un type de format. 6. Dfinissez le format et cliquez sur OK. 7. Entrez un nom pour le nouveau format dans la colonne Nom et cliquez sur OK. Remarque : Bien que Dreamweaver ne prenne en charge la cration de formats de donnes que pour les pages ASP, les utilisateurs de ColdFusion et de PHP peuvent tlcharger des formats crs par d'autres dveloppeurs, ou crer des formats de serveur et les publier sur
211
Dreamweaver Exchange. Pour plus d'informations sur l'API de formats de serveur, voir Extension de Dreamweaver (Aide > Extension de Dreamweaver > Formats de serveur). Voir aussi
212
Prsentation de contenu l'aide de tableaux

A propos des tableaux Priorit de formatage des tableaux dans le code HTML A propos du fractionnement et de la fusion de cellules de tableau Insertion d'un tableau et ajout de contenu Importation et exportation de donnes tabulaires Slection d'lments de tableau Dfinition des proprits des tableaux Dfinition des proprits de cellule, de ligne ou de colonne Utilisation du mode Tableaux dvelopps pour une modification de tableau plus simple Mise en forme des tableaux et des cellules Redimensionnement des tableaux, des colonnes et des lignes Redimensionnement de tableaux, de colonnes et de lignes Ajout et suppression de lignes et de colonnes Fractionnement et fusion de cellules Copie, collage et suppression de cellules Imbrication de tableaux Tri de tableaux
A propos des tableaux
Haut de la page
Les tableaux sont trs utiles pour prsenter des donnes tabulaires et mettre en forme du texte et des images dans une page HTML. Un tableau comprend au moins une ligne ; chaque ligne comporte au moins une cellule. Bien que les colonnes ne soient gnralement pas spcifies explicitement en code HTML, Dreamweaver vous permet de manipuler les colonnes, les lignes et les cellules. Dreamweaver affiche la largeur du tableau et de chaque colonne du tableau lorsque le tableau est slectionn ou que le point d'insertion se trouve dedans. En regard des largeurs se trouvent les flches du menu des en-ttes de tableau et des menus des en-ttes de colonne. Utilisez les menus pour accder rapidement des commandes standard relatives aux tableaux. Vous pouvez activer et dsactiver les largeurs et les menus. Si vous ne voyez pas la largeur d'un tableau ou d'une colonne, cela signifie qu'elle n'est pas spcifie dans le code HTML. Si deux nombres s'affichent, cela signifie que la largeur visuelle qui apparat en mode Cration est diffrente de la largeur spcifie dans le code HTML. Cela peut se produire lorsque vous redimensionnez un tableau en faisant glisser son coin infrieur droit ou lorsque vous ajoutez du contenu une cellule plus grande que sa valeur dfinie. Par exemple, si vous dfinissez une largeur de colonne de 200 pixels, puis que vous ajoutez du contenu qui tend la largeur 250 pixels, deux nombres s'affichent pour cette colonne : 200 (la largeur spcifie dans le code) et (250) entre parenthses (la largeur visuelle de la colonne telle qu'elle apparat l'cran). Remarque : Vous avez aussi la possibilit de mettre vos pages en forme l'aide du positionnement par feuilles de style en cascade CSS.
Haut de la page
Priorit de formatage des tableaux dans le code HTML
Lorsque vous formatez des tableaux en mode Cration, vous pouvez dfinir des proprits s'appliquant au tableau tout entier ou une srie de lignes, de colonnes ou de cellules slectionnes dans le tableau. Lorsqu'une proprit (une couleur d'arrire-plan ou un alignement, par exemple) est dfinie par une valeur pour tout le tableau et par une autre valeur pour chaque cellule, les proprits de formatage des cellules prvalent sur les proprits de formatage de lignes, qui leur tour prvalent sur celles du tableau. L'ordre de priorit pour le formatage de tableau est le suivant : 1. Cellules 2. Lignes 3. Tableau Par exemple, si vous dfinissez une couleur bleue pour l'arrire-plan d'une cellule, puis la couleur jaune pour celui du tableau, la couleur de la cellule bleue ne changera pas, puisque la proprit de formatage de cellule a la priorit sur la proprit de formatage du tableau. Remarque : Lorsque vous dfinissez les proprits d'une colonne, Dreamweaver modifie les attributs de la balise td correspondant chaque cellule de la colonne.
Haut de la page
A propos du fractionnement et de la fusion de cellules de tableau

213
Vous pouvez fusionner n'importe quel nombre de cellules adjacentes (tant que la slection correspond une ligne ou un rectangle de cellules) pour produire une cellule unique s'tendant sur plusieurs colonnes ou lignes. Vous pouvez fractionner une cellule en un nombre quelconque de lignes et de colonnes, qu'elle ait t prcdemment fusionne ou non. Dreamweaver restructure automatiquement le tableau (en ajoutant les attributs colspan ou rowspan ncessaires) pour obtenir l'agencement spcifi. Dans l'exemple ci-dessous, les cellules au milieu des deux premires lignes ont t fusionnes en une seule cellule qui s'tend sur deux lignes.
Insertion d'un tableau et ajout de contenu
Haut de la page
Utilisez le panneau ou le menu Insertion pour crer un nouveau tableau. Ajoutez ensuite du texte et des images aux cellules du tableau de la mme faon que vous le faites en dehors d'un tableau. Remarque : La fonction Mode Mise en forme est obsolte depuis la version Dreamweaver CS4. Le mode Mise en forme crait des mises en forme de page l'aide de tableaux de mise en forme, ce qui n'est plus conseill par Adobe. Pour plus d'informations sur le mode Mise en forme et la raison pour laquelle il a t rendu obsolte, consultez le Blog de l'quipe Dreamweaver. 1. Dans la fentre de document en mode Cration, placez le point d'insertion l'endroit o vous voulez que le tableau apparaisse. Remarque : Si votre document est vide, le point d'insertion peut uniquement tre plac au dbut du document. Choisissez Insertion > Tableau. Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Tableau. 2. Dfinissez les attributs dans la bote de dialogue Tableau et cliquez sur OK pour crer le tableau. Lignes Dtermine le nombre de lignes du tableau. Colonnes Dtermine le nombre de colonnes du tableau. Largeur du tableau Indique la largeur du tableau en pixels ou en pourcentage de la largeur de fentre du navigateur. Largeur de la bordure Indique la largeur, en pixels, des bordures du tableau. Espacement des cellules Dtermine le nombre de pixels sparant les cellules contigus d'un tableau. Lorsque vous n'affectez pas explicitement de valeur pour la largeur de la bordure, l'espacement entre les cellules et la marge intrieure des cellules, la plupart des navigateurs affichent une largeur de bordure et une marge intrieure des cellules dfinies sur 1, ainsi qu'un espacement entre les cellules dfini sur 2. Pour tre sr que les navigateurs afficheront le tableau sans bordure, marge intrieure ni espacement, dfinissez Marge intrieure des cellules et Espacement entre les cellules sur 0. Marge intrieure des cellules Indique le nombre de pixels qui spare la bordure d'une cellule et son contenu. Aucun N'autorise pas les en-ttes de colonne ou de ligne pour le tableau. Gauche Transforme la premire colonne du tableau en colonne d'en-ttes pour vous permettre d'entrer un en-tte pour ligne du tableau. Haut Transforme la premire ligne du tableau en ligne d'en-ttes pour vous permettre d'entrer un en-tte pour chaque colonne du tableau. Les deux Vous permet d'entrer des en-ttes de colonne et de ligne dans le tableau. Il est judicieux d'employer des en-ttes au cas o l'un des visiteurs de votre site Web utiliserait un lecteur d'cran. Les lecteurs d'cran lisent les en-ttes de tableau et aident les utilisateurs garder une trace des informations de tableau. Lgende Fournit un titre de tableau qui s'affiche en dehors du tableau. Aligner la lgende Indique o la lgende du tableau apparat par rapport au tableau. Rsum Fournit une description du tableau. Les lecteurs d'cran lisent le texte de rsum mais le texte n'apparat pas dans le navigateur de l'utilisateur.
Importation et exportation de donnes tabulaires
Haut de la page
Vous pouvez importer des donnes tabulaires cres dans une autre application (par exemple, Microsoft Excel) et enregistres dans un format texte dlimit (lments spars par des tabulations, virgules, deux-points, points-virgules ou autres dlimiteurs) dans Dreamweaver et les mettre en forme dans un tableau. Vous pouvez galement exporter les donnes d'un tableau depuis Dreamweaver vers un fichier texte, avec le contenu de cellules contigus spar par un dlimiteur. Les caractres que vous pouvez utiliser comme dlimiteurs 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 rcuprer qu'une partie des donnes d'un tableau, par exemple les six premires lignes ou les six premires colonnes, copiez les cellules contenant ces donnes et collez-les hors du tableau (pour crer un nouveau tableau) avant d'exporter le nouveau tableau.
214
Importation de donnes tabulaires

1. Effectuez l'une des oprations suivantes : Choisissez Fichier > Importer > Donnes tabulaires. Dans la catgorie Donnes du panneau Insertion, cliquez sur l'icne Importer les donnes tabulaires Choisissez Insertion > Objets du tableau > Importer les donnes tabulaires. 2. Dfinissez les options relatives aux donnes tabulaires, puis cliquez sur OK. Fichier de donnes Correspond au nom du fichier importer. Cliquez sur le bouton Parcourir pour choisir le fichier. Dlimiteur Correspond au dlimiteur utilis dans le fichier que vous importez. Si vous choisissez Autre, une zone de texte apparat droite du menu contextuel. Entrez le dlimiteur utilis dans votre fichier. Remarque : Spcifiez le dlimiteur utilis lors de l'enregistrement du fichier de donnes. Dans le cas contraire, le fichier ne pourra pas tre import correctement et vos donnes ne seront pas formates convenablement dans un tableau. Largeur du tableau Correspond la largeur du tableau. Slectionnez Adapter au contenu pour adapter la largeur de chaque colonne la plus longue chane de texte qu'elle contient. Slectionnez Fixe pour spcifier une largeur de tableau fixe, en pixels ou en pourcentage de la largeur de fentre du navigateur. Bordure Indique la largeur, en pixels, des bordures du tableau. Marge intrieure des cellules Dtermine l'espace (en pixels) entre le contenu d'une cellule et son contour. Espacement des cellules Dtermine le nombre de pixels sparant les cellules contigus d'un tableau. Lorsque vous n'affectez pas explicitement de valeur pour les bordures, l'espacement entre les cellules et la marge intrieure des cellules, la plupart des navigateurs affichent des bordures et une marge intrieure des cellules dfinies sur 1, ainsi qu'un espacement entre les cellules dfini sur 2. Pour tre sr que les navigateurs afficheront le tableau sans marge intrieure ni espacement, dfinissez Marge intrieure des cellules et Espacement entre les cellules sur 0. Pour visualiser les contours des cellules et du tableau lorsque la bordure est dfinie sur 0, slectionnez Affichage > Assistances visuelles > Bordures de tableau. Formatage ligne suprieure Dtermine le formatage appliqu, le cas chant, la ligne suprieure du tableau. Choisissez parmi quatre options de formatage : pas de formatage, gras, italique ou gras italique. .
Exportation d'un tableau

1. Placez le point d'insertion dans l'une des cellules du tableau. 2. Choisissez Fichier > Exporter > Tableau. 3. Dfinissez les options suivantes : Dlimiteur Indique quel caractre dlimiteur doit tre utilis pour sparer des lments dans le fichier export. Sauts de ligne Indique sous quel systme d'exploitation vous allez ouvrir le fichier export : Windows, Macintosh ou UNIX. Les diffrents systmes d'exploitation utilisent des mthodes diffrentes pour indiquer la fin d'une ligne de texte. 4. Cliquez sur Exporter. 5. Saisissez un nom pour le fichier et cliquez sur Enregistrer.
Slection d'lments de tableau
Haut de la page
Vous pouvez slectionner un tableau entier ou encore l'ensemble d'une ligne ou d'une colonne. Vous pouvez galement slectionner une ou plusieurs cellules individuelles. Lorsque vous dplacez le pointeur sur un tableau, une ligne, une colonne ou une cellule, Dreamweaver met toutes les cellules de cette slection en surbrillance afin que vous sachiez quelles cellules seront slectionnes. Ceci est utile pour les tableaux sans bordures, les cellules comprenant plusieurs colonnes ou lignes ou dans le cas de tableaux imbriqus. Vous pouvez modifier la couleur de la mise en surbrillance dans les prfrences. Si vous placez le pointeur sur une bordure du tableau, puis que vous maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfonce, la totalit de la structure du tableau (c'est--dire toutes les cellules) est mise en surbrillance. Ceci peut tre utile lorsque vous disposez de tableaux imbriqus et que vous souhaitez afficher la structure de l'un d'eux.
Slection d'un tableau entier

Effectuez l'une des oprations suivantes : Cliquez dans le coin suprieur gauche du tableau, sur le bord suprieur ou infrieur du tableau ou sur une ligne ou une bordure de colonne. Remarque : Le pointeur prend la forme de l'icne de grille du tableau vous cliquez sur la bordure d'une ligne ou d'une colonne). pour vous indiquer que vous pouvez slectionner le tableau (sauf si
215
Cliquez dans une cellule du tableau, puis slectionnez la balise <table> dans le slecteur de balises dans le coin infrieur gauche de la fentre de document. Cliquez dans une cellule du tableau, puis choisissez Modifier > Tableau > Slectionner le tableau. Cliquez dans une cellule du tableau, puis sur le menu d'en-tte du tableau et choisissez Slectionner le tableau. Des poignes de slection apparaissent sur les bords infrieurs et droits du tableau slectionn.
Slection d'une ou plusieurs lignes ou colonnes

1. Positionnez le pointeur sur le bord gauche d'une ligne ou le bord suprieur d'une colonne. 2. Lorsque le pointeur se transforme en flche de slection, cliquez pour slectionner une ligne ou une colonne ou faites-le glisser pour slectionner plusieurs lignes ou colonnes.
Slection d'une seule colonne

1. Cliquez dans la colonne. 2. Cliquez sur le menu des en-ttes de colonne, puis choisissez Slectionner la colonne.
Slection d'une seule cellule

Effectuez l'une des oprations suivantes : Cliquez dans la cellule, puis slectionnez la balise <td> dans le slecteur de balises dans le coin infrieur gauche de la fentre de document. Cliquez dans la cellule en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfonce. Cliquez dans la cellule, puis choisissez Edition > Slectionner tout. Lorsqu'une cellule est dj slectionne, choisissez Edition > Slectionner tout nouveau pour slectionner tout le tableau.
Slection d'une ligne ou d'un bloc rectangulaire de cellules

Effectuez l'une des oprations suivantes : Faites glisser la souris d'une cellule vers une autre. Cliquez sur une cellule. Tout en appuyant sur la touche Ctrl (Windows) ou Commande (Macintosh), cliquez sur la mme cellule, puis cliquez dans une autre cellule en maintenant la touche Maj enfonce. Toutes les cellules se trouvant l'intrieur de la zone rectangulaire ou linaire ainsi dlimite par les deux cellules sont slectionnes.
Slection de cellules non adjacentes

Appuyez sur Ctrl (Windows) ou Commande (Macintosh), puis cliquez sur les cellules, les lignes ou les colonnes que vous voulez slectionner. Si chaque cellule, ligne ou colonne sur laquelle vous cliquez aprs avoir appuy sur Ctrl ou sur Commande n'est pas dj slectionne, elle est ajoute la slection. Si elle est dj slectionne, elle est retire de la slection.
Modification de la couleur de surbrillance pour les lments d'un tableau

216
1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2. Slectionnez la catgorie Surbrillance dans la liste gauche, effectuez l'une des modifications suivantes, puis cliquez sur OK. Pour modifier la couleur de surbrillance des lments du tableau, cliquez dans la case de couleur Survol et slectionnez une couleur de surbrillance l'aide du slecteur de couleur (ou tapez la valeur hexadcimale correspondant la couleur de surbrillance dans la zone de texte). Pour activer ou dsactiver la slection d'lments du tableau, activez ou dsactivez l'option Afficher de l'option Survol. Remarque : Ces options s'appliquent tous les objets, tels que les lments positionnement absolu (PA), que Dreamweaver met en surbrillance lorsque vous faites passer le pointeur dessus.
Dfinition des proprits des tableaux

Vous pouvez utiliser l'inspecteur Proprits pour modifier les tableaux. 1. Slectionnez un tableau. 2. Dans l'inspecteur Proprits (Fentre > Proprits), apportez les modifications requises aux proprits. ID de tableau Un identificateur du tableau. Lignes et colonnes Le nombre de lignes et de colonnes dans le tableau. L La largeur du tableau, en pixels ou en pourcentage de la largeur de fentre du navigateur. Remarque : Il est rarement utile de dfinir la hauteur d'un tableau. Remplissage Dtermine l'espace (en pixels) entre le contenu d'une cellule et son contour. Espac. de cellule Dtermine le nombre de pixels sparant les cellules contigus d'un tableau. Alignement Dtermine la position du tableau par rapport aux autres lments du mme paragraphe (texte ou images).
Haut de la page
Gauche aligne le tableau sur la gauche des autres lments (pour que le texte situ dans le mme paragraphe apparaisse droite du tableau) ; Droite aligne le tableau sur la droite des autres lments (le texte apparaissant gauche du tableau) ; et Centrer centre le tableau (le texte apparaissant au-dessus et/ou en dessous du tableau). Par dfaut indique que le navigateur doit utiliser son alignement par dfaut. Lorsque l'alignement est dfini sur Par dfaut, le reste du contenu n'est pas affich ct du tableau. Pour afficher un tableau ct du contenu, utilisez l'alignement droite ou gauche. Bordure Indique la largeur, en pixels, des bordures du tableau. Lorsque vous n'affectez pas explicitement de valeur pour la bordure, l'espacement entre les cellules et la marge intrieure des cellules, la plupart des navigateurs affichent la bordure et une marge intrieure des cellules dfinies sur 1, ainsi qu'un espacement entre les cellules dfini sur 2. Pour tre sr que les navigateurs afficheront le tableau sans marge intrieure ni espacement, dfinissez Bordure sur 0, Marge intrieure des cellules et Espacement entre les cellules sur 0. Pour visualiser les contours des cellules et du tableau lorsque la bordure est dfinie sur 0, slectionnez Affichage > Assistances visuelles > Bordures de tableau. Classe Applique une classe CSS au tableau. Remarque : Il peut tre ncessaire de dvelopper l'inspecteur Proprits du tableau pour afficher les options suivantes. Pour dvelopper l'inspecteur Proprits du tableau, cliquez sur la flche de dveloppement dans son coin infrieur droit. Effacer largeurs de colonne et Effacer hauteurs de ligne suppriment toutes les valeurs de hauteur de ligne ou de largeur de colonne du tableau explicitement spcifies. Convertir largeurs de tableau en pixels et Convertir les hauteurs de tableau en pixels dfinissent la largeur ou la hauteur de chaque colonne du tableau sur sa largeur en pixels (dfinit galement la largeur du tableau sur sa largeur en pixels). Convertir largeurs de tableau en pourcentage et Convertir les hauteurs de tableau en pourcentages dfinissent la largeur ou la hauteur de chaque colonne du tableau sur sa largeur exprime en pourcentage de la largeur de la fentre de document (dfinit galement la largeur du tableau sur sa largeur en pourcentage de la largeur de la fentre de document). Si vous avez tap une valeur dans une zone de texte, appuyez sur Tab ou Entre (Windows) ou Retour (Macintosh) pour l'appliquer.
Dfinition des proprits de cellule, de ligne ou de colonne

Vous pouvez utiliser l'inspecteur Proprits pour modifier des cellules et des lignes dans un tableau. 1. Slectionnez une ligne ou une colonne.
Haut de la page
2. Dans l'inspecteur Proprits (Fentre > Proprits), dfinissez les options suivantes : Horiz Indique l'alignement horizontal du contenu d'une cellule, d'une ligne ou d'une colonne. Vous pouvez aligner le contenu de la cellule sur la gauche, la droite ou le centre des cellules ou vous pouvez indiquer au navigateur d'utiliser l'alignement par dfaut (en gnral gauche pour les cellules normales et au centre pour les cellules d'en-tte). Vert. Indique l'alignement vertical du contenu d'une cellule, d'une ligne ou d'une colonne. Vous pouvez aligner le contenu de la cellule sur le haut, le centre ou le bas des cellules, sur la ligne de base ou encore indiquer au navigateur d'utiliser l'alignement par dfaut (en gnral le
217
centre). L et H La largeur et la hauteur des cellules slectionnes en pixels ou en pourcentage de la largeur ou de la hauteur de tout le tableau. Pour spcifier un pourcentage, faites suivre la valeur du signe de pourcentage (%). Pour laisser au navigateur le soin de dterminer la largeur et la hauteur appropries, en fonction du contenu de la cellule et des largeurs et hauteurs des autres colonnes et lignes, laissez le champ vide (paramtrage par dfaut). Par dfaut, un navigateur choisit une hauteur de ligne et une largeur de colonne correspondant l'image la plus large ou la ligne la plus longue dans une colonne. C'est pourquoi il arrive qu'une colonne de tableau devienne beaucoup plus large que les autres lorsque vous y ajoutez du contenu. Remarque : Vous pouvez spcifier une hauteur en pourcentage de la hauteur totale du tableau, mais il se peut que la ligne ne s'affiche pas au pourcentage de hauteur spcifi dans les navigateurs. Ar-pl La couleur d'arrire-plan d'une cellule, d'une colonne ou d'une ligne, choisie l'aide du slecteur de couleurs. Fusionner les cellules Combine les cellules, lignes ou colonnes slectionnes en une seule cellule. Vous pouvez fusionner des cellules uniquement si elles forment un bloc rectangulaire ou linaire. Fractionner la cellule Divise une cellule en deux ou plusieurs cellules. Vous ne pouvez fractionner qu'une cellule la fois : ce bouton est dsactiv si plusieurs cellules sont slectionnes. Pas de retour la ligne auto Evite tout renvoi automatique la ligne, en conservant tout le texte d'une cellule donne sur une seule ligne. Si Pas de retour la ligne auto est activ, les cellules s'largissent en fonction de la taille des donnes que vous tapez ou collez. (Normalement, les cellules s'largissent horizontalement pour accueillir le mot le plus long ou l'image la plus large, puis s'tirent verticalement autant que ncessaire pour intgrer tout autre contenu). En-tte Met en forme les cellules slectionnes comme des cellules d'en-tte de tableau. Par dfaut, le contenu des cellules de titre de tableau est en caractres gras et centr. Vous pouvez spcifier la largeur ou la hauteur par des pixels ou des pourcentages. Vous pouvez convertir les pixels en pourcentages et inversement. Remarque : Lorsque vous dfinissez les proprits d'une colonne, Dreamweaver modifie les attributs de la balise td correspondant chaque cellule de la colonne. Lorsque vous dfinissez certaines proprits d'une ligne, Dreamweaver modifie les attributs de la balise tr plutt que de modifier les attributs de chaque balise td dans la ligne. Lorsque vous appliquez le mme format toutes les cellules d'une ligne, en appliquant le format la balise tr, vous obtenez un code HTML plus net et plus concis. 3. Appuyez sur Tab ou Entre (Windows) ou Retour (Macintosh) pour appliquer la valeur.
Utilisation du mode Tableaux dvelopps pour une modification de tableau plus simple
Haut de la page
Le mode Tableaux dvelopps ajoute provisoirement de la marge l'intrieur des cellules et de l'espacement tous les tableaux d'un document, et augmente les bordures des tableaux afin de rendre les modifications plus faciles. Ce mode vous permet de choisir des lments dans les tableaux ou de placer le point d'insertion de manire prcise. Par exemple, vous pouvez dvelopper un tableau pour placer le point d'insertion gauche ou droite d'une image, sans slectionner l'image ou la cellule du tableau par inadvertance.
A. Tableau en mode Standard B. Tableau en mode Tableaux dvelopps Remarque : Aprs avoir choisi ou plac le point d'insertion, vous devez revenir au mode Standard du mode Cration pour effectuer vos modifications. En mode Tableaux dvelopps, certaines oprations, telles que le redimensionnement, ne produisent pas les rsultats attendus.
Basculement en mode Tableaux dvelopps

1. Si vous travaillez en mode Code, slectionnez Affichage > Cration ou Affichage > Code et cration (vous ne pouvez pas passer en mode Tableaux dvelopps lorsque vous tes en mode Code). 2. Effectuez l'une des oprations suivantes : Choisissez Affichage > Mode Tableau > Mode Tableaux dvelopps. Dans la catgorie Mise en forme du panneau Insertion, cliquez sur Dvelopp. Une barre tiquete Mode Tableaux dvelopps s'affiche en haut de la fentre de document. Dreamweaver ajoute une marge intrieure des cellules et de l'espacement entre les cellules tous les tableaux de la page et augmente l'paisseur des bordures des tableaux.
Sortie du mode Tableaux dvelopps

218
Effectuez l'une des oprations suivantes : Cliquez sur [quitter] dans la barre intitule Mode Tableaux dvelopps en haut de la fentre de document. Choisissez Affichage > Mode Tableau > Mode Standard. Dans la catgorie Mise en forme du panneau Insertion, cliquez sur Standard.
Mise en forme des tableaux et des cellules
Haut de la page
Vous pouvez modifier l'aspect des tableaux en dfinissant des proprits pour l'ensemble ou une partie de leurs cellules, ou en leur appliquant une mise en forme prdfinie. Avant de dfinir les proprits d'un tableau ou de cellules, vous devez savoir que l'ordre de priorit pour le formatage est le suivant : cellules, lignes et tableaux. Pour formater le texte dans une cellule de tableau, suivez la mme procdure que pour formater du texte en dehors d'un tableau.
Modification du format d'un tableau, d'une cellule, d'une ligne ou d'une colonne.
1. Slectionnez un tableau, une cellule, une ligne ou une colonne. 2. Dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur la flche d'agrandissement situe dans le coin infrieur droit et modifiez les proprits en fonction de vos besoins. 3. Modifiez les proprits de votre choix. Pour plus d'informations sur les options, cliquez sur l'icne Aide de l'inspecteur Proprits. Remarque : Lorsque vous dfinissez les proprits d'une colonne, Dreamweaver modifie les attributs de la balise td correspondant chaque cellule de la colonne. Lorsque vous dfinissez certaines proprits d'une ligne, Dreamweaver modifie les attributs de la balise tr plutt que de modifier les attributs de chaque balise td dans la ligne. Lorsque vous appliquez le mme format toutes les cellules d'une ligne, en appliquant le format la balise tr, vous obtenez un code HTML plus net et plus concis.
Ajout ou modification des valeurs d'accessibilit d'un tableau en mode Code

Modifiez les attributs dans le code. Pour reprer rapidement les balises dans le code, cliquez dans le tableau, puis slectionnez la balise <table> dans le slecteur de balises situ au bas de la fentre de document.
Ajout ou modification des valeurs d'accessibilit d'un tableau en mode Cration

Pour modifier la lgende du tableau, mettez-la en surbrillance, puis tapez une nouvelle lgende. Pour modifier l'alignement de la lgende du tableau, placez le point d'insertion dans la lgende, cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis choisissez Modifier le code de la balise. Pour modifier le rsum du tableau, slectionnez le tableau, cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis choisissez Modifier le code de la balise.
Redimensionnement des tableaux, des colonnes et des lignes
Haut de la page
Redimensionnement des tableaux Vous pouvez redimensionner tout un tableau ou seulement certaines cellules ou certaines colonnes individuelles. Lorsque vous redimensionnez tout un tableau, toutes ses cellules changent de taille en proportion. Si les cellules d'un tableau ont une largeur ou une hauteur spcifies explicitement, le redimensionnement du tableau modifie la taille visuelle des cellules dans la fentre de document mais ne modifie pas la largeur et la hauteur spcifies des cellules. Vous pouvez redimensionner un tableau en faisant glisser l'une de ses poignes de slection. Dreamweaver affiche la largeur du tableau, ainsi qu'un menu des en-ttes de tableau, en haut ou en bas du tableau lorsque le tableau est slectionn ou que le point d'insertion se trouve dedans. Les largeurs de colonne dfinies dans le code HTML ne correspondent pas ncessairement aux largeurs apparentes l'cran. Dans ce cas, vous pouvez uniformiser les largeurs. Dreamweaver affiche les largeurs de colonne et de tableau ainsi que les menus d'en-ttes pour vous aider mettre les tableaux en forme. Vous pouvez activer ou dsactiver ces informations votre convenance. Redimensionnement des colonnes et des lignes Vous pouvez modifier la largeur d'une colonne ou la hauteur d'une ligne dans l'inspecteur Proprits ou en faisant glisser les bordures de la colonne ou de la ligne. Si vous avez des problmes pour le redimensionnement, vous pouvez effacer la largeur des colonnes ou la hauteur des lignes et recommencer. Remarque : Vous pouvez aussi modifier la largeur et la hauteur des cellules directement dans le code HTML l'aide du mode Code. Dreamweaver affiche la largeur des colonnes, ainsi que les menus des en-ttes de colonne, en haut ou en bas des colonnes lorsque le tableau est slectionn ou que le point d'insertion se trouve dedans. Vous pouvez activer ou dsactiver les menus d'en-ttes de colonne votre convenance.
219
Redimensionnement de tableaux, de colonnes et de lignes

Redimensionnement d'un tableau
Slectionnez le tableau. Pour redimensionner le tableau horizontalement, faites glisser la poigne de slection vers la droite. Pour redimensionner le tableau verticalement, faites glisser la poigne de slection vers le bas.
Haut de la page
Pour redimensionner le tableau verticalement et horizontalement, faites glisser la poigne de slection vers le coin infrieur droit.
Modification de la largeur d'une colonne tout en conservant la mme largeur de tableau

Faites glisser la bordure droite de la colonne modifier. La largeur de la colonne contigu est galement modifie, si bien que vous redimensionnez deux colonnes. L'affichage visuel vous montre la manire dont les colonnes seront ajustes, la largeur totale du tableau ne variant pas.
Remarque : Dans les tableaux avec des largeurs en pourcentage (et non en pixels), si vous faites glisser la bordure droite de l'extrme droite du tableau, la largeur globale du tableau est modifie et toutes les colonnes s'adaptent proportionnellement.
Modification de la largeur d'une colonne en conservant les dimensions des autres colonnes
Maintenez la touche Maj enfonce, puis faites glisser la bordure de la colonne. Seule la largeur de cette colonne change. L'affichage visuel vous montre la manire dont les colonnes seront ajustes, la largeur totale du tableau variant en fonction de la colonne redimensionne.
Modification de la hauteur d'une ligne visuellement

Faites glisser la bordure infrieure de la ligne.
Uniformisation des largeurs de colonne en mode Code avec les largeurs visuelles
1. Cliquez dans une cellule. 2. Cliquez sur le menu des en-ttes de tableau, puis choisissez Uniformiser toutes les largeurs.
Dreamweaver redfinit la largeur spcifie dans le code sur la largeur visuelle.
Effacement de toutes les largeurs et hauteurs dfinies dans un tableau

1. Slectionnez le tableau. 2. Effectuez l'une des oprations suivantes : Choisissez Modifier > Tableau > Effacer les largeurs de colonnes ou Modifier > Tableau > Effacer les hauteurs de cellules.
220
Dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur le bouton Effacer les hauteurs de ligne largeurs de colonne .
ou sur le bouton Effacer les
Cliquez sur le menu des en-ttes de colonne, puis choisissez Effacer toutes les hauteurs ou Effacer toutes les largeurs.
Effacement d'une largeur de colonne dfinie

Cliquez sur le menu des en-ttes de colonne, puis choisissez Effacer les largeurs de colonne.
Activation ou dsactivation des menus et de la largeur d'un tableau et des colonnes

1. Choisissez Affichage > Assistances visuelles > Largeurs de tableau. 2. Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) dans le tableau, puis choisissez Tableau > Largeurs de tableau.
Ajout et suppression de lignes et de colonnes
Haut de la page
Pour ajouter et supprimer des lignes et des colonnes l'aide des commandes Modifier > Tableau ou du menu des en-ttes de colonne. Le fait d'appuyer sur la touche de tabulation lorsque le curseur se trouve dans la dernire cellule d'un tableau ajoute automatiquement une ligne.
Ajout d'une ligne ou d'une colonne individuelle

Cliquez dans une cellule, puis procdez de l'une des manires suivantes : Choisissez Modifier > Tableau > Insrer une ligne ou Modifier > Tableau > Insrer une colonne. Une ligne apparat au-dessus du point d'insertion ou une colonne apparat gauche du point d'insertion. Cliquez sur le menu des en-ttes de colonne, puis choisissez Insrer une colonne gauche ou Insrer une colonne droite.
Ajout de plusieurs lignes ou colonnes

1. Cliquez dans une cellule. 2. Choisissez Modifier > Tableau > Insrer des lignes ou des colonnes et cliquez sur OK. Insrer Indique les lignes ou les colonnes insrer. Nombre de lignes ou Nombre de colonnes Le nombre de lignes ou de colonnes insrer. O Indique si les nouvelles lignes ou colonnes doivent apparatre avant ou aprs la ligne ou la colonne de la cellule slectionne.
Suppression d'une ligne ou d'une colonne

Effectuez l'une des oprations suivantes : Cliquez sur une cellule de la ligne ou de la colonne que vous voulez supprimer, puis choisissez Modifier > Tableau > Supprimer la ligne ou
221
Modifier > Tableau > Supprimer la colonne. Slectionnez une ligne ou une colonne entire, puis choisissez Edition > Effacer ou appuyez sur Suppr.
Ajout ou suppression de lignes ou de colonnes l'aide de l'inspecteur Proprits

1. Slectionnez le tableau. 2. Dans l'inspecteur Proprits (Fentre > Proprits), procdez de l'une des manires suivantes : Pour ajouter ou supprimer des lignes, augmentez ou rduisez la valeur indiquant le nombre de lignes. Pour ajouter ou supprimer des colonnes, augmentez ou rduisez la valeur indiquant le nombre de colonnes. Remarque : Dreamweaver ne vous avertit pas si vous supprimez des lignes et des colonnes contenant des donnes.
Fractionnement et fusion de cellules

Utilisez l'inspecteur Proprits ou les commandes du sous-menu Modifier > Tableau pour fractionner ou fusionner des cellules.
Haut de la page
Fusion de plusieurs cellules d'un tableau

1. Slectionnez les cellules dans une ligne contigu et sous forme rectangulaire. Dans l'illustration ci-dessous, la slection est un rectangle de cellules ; les cellules peuvent donc tre fusionnes.
Dans l'illustration ci-dessous, la slection n'est pas un rectangle ; les cellules ne peuvent donc pas tre fusionnes.
2. Effectuez l'une des oprations suivantes : Choisissez Modifier > Tableau > Fusionner les cellules. Dans l'inspecteur Proprits HTML (Fentre > Proprits) en mode dvelopp, cliquez sur le bouton Fusionner les cellules .
Remarque : Si le bouton n'est pas visible, cliquez sur la flche de dveloppement, dans le coin infrieur droit de l'inspecteur Proprits, pour afficher toutes les options. Le contenu des cellules individuelles est plac dans la cellule produite par la fusion. Les proprits de la premire cellule slectionne sont appliques la cellule fusionne.
Fractionnement d'une cellule

1. Cliquez dans une cellule, puis procdez de l'une des manires suivantes : Choisissez Modifier > Tableau > Fractionner la cellule. Dans l'inspecteur Proprits HTML (Fentre > Proprits) en mode agrandi, cliquez sur le bouton Fractionner les cellules .
Remarque : Si le bouton n'est pas visible, cliquez sur la flche de dveloppement, dans le coin infrieur droit de l'inspecteur Proprits, pour afficher toutes les options. 2. Dans la bote de dialogue Fractionner la cellule, spcifiez comment vous voulez fractionner la cellule : Fractionner la cellule Indique comment la cellule doit tre fractionne, en lignes ou en colonnes. Nombre de lignes/Nombre de colonnes Indique en combien de colonnes ou de lignes la cellule doit tre fractionne.
Augmentation ou rduction du nombre de lignes ou de colonnes occupes par une cellule

Effectuez l'une des oprations suivantes :
222
Choisissez Modifier > Tableau > Augmenter l'tendue de ligne ou Modifier > Tableau > Augmenter l'tendue de colonne. Choisissez Modifier > Tableau > Rduire l'tendue de ligne ou Modifier > Tableau > Rduire l'tendue de colonne.
Copie, collage et suppression de cellules

Vous pouvez copier, coller ou supprimer une ou plusieurs cellules tout en prservant leur formatage.
Haut de la page
Vous pouvez coller les cellules au niveau d'un point d'insertion ou la place d'une slection 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 slection du tableau dans laquelle les cellules seront colles.
Coupure ou copie des cellules d'un tableau

1. Slectionnez une ou plusieurs cellules dans une ligne contigu et sous forme rectangulaire. Dans l'illustration ci-dessous, la slection est un rectangle de cellules ; les cellules peuvent donc tre coupes ou copies.
Dans l'illustration ci-dessous, la slection n'est pas un rectangle ; les cellules ne peuvent donc pas tre coupes ou copies.
2. Choisissez Edition > Couper ou Edition > Copier. Remarque : Si vous avez slectionn une ligne ou une colonne entire et que vous choisissez Edition > Couper, la ligne ou la colonne entire est supprime du tableau (et non pas seulement le contenu des cellules).
Collage de cellules d'un tableau

1. Choisissez l'emplacement o coller les cellules : Pour remplacer des cellules existantes par les cellules que vous collez, slectionnez une srie de cellules existantes dont la mise en forme est la mme que celle des cellules du Presse-papiers. (Par exemple, si vous avez copi ou coup un bloc de 3 x 2 cellules, vous pouvez slectionner un autre bloc de 3 x 2 cellules pour le remplacer par les cellules colles.) Pour coller une ligne entire de cellules au-dessus d'une cellule spcifique, cliquez dans celle-ci. Pour coller une colonne entire de cellules gauche d'une cellule spcifique, cliquez dans celle-ci. Remarque : Si vous avez plac moins d'une ligne ou d'une colonne entire dans le Presse-papiers et que vous cliquez dans une cellule puis collez les cellules figurant dans le Presse-papiers, alors il se peut que la cellule dans laquelle vous avez cliqu et les cellules voisines (selon leur emplacement dans le tableau) soient remplaces par les cellules que vous avez colles. Pour crer un nouveau tableau avec les cellules colles, placez le point d'insertion hors du tableau. 2. Choisissez Edition > Coller. Si vous collez des lignes ou des colonnes entires dans un tableau existant, celles-ci s'ajoutent au tableau. Si vous ne collez qu'une seule cellule, le contenu de la cellule slectionne est remplac. Si vous collez le contenu du Presse-papiers en dehors d'un tableau, les lignes, colonnes ou cellules que vous collez sont utilises pour dfinir un nouveau tableau.
Suppression du contenu d'une cellule en conservant les cellules intactes

1. Slectionnez une ou plusieurs cellules. Remarque : Veillez ce que la slection ne comprenne pas de lignes ou de colonnes entires. 2. Choisissez Edition > Effacer ou appuyez sur la touche Suppr. Remarque : Si seules des lignes ou des colonnes entires sont slectionnes lorsque vous choisissez Edition > Effacer ou que vous
223
appuyez sur Suppr, les lignes ou les colonnes entires (pas seulement leurs contenus) sont supprimes du tableau.
Suppression de lignes ou de colonnes contenant des cellules fusionnes

1. Slectionnez une ligne ou une colonne. 2. Choisissez Modifier > Tableau > Supprimer la ligne ou Modifier > Tableau > Supprimer la colonne.
Imbrication de tableaux
Haut de la page
Un tableau imbriqu est un tableau l'intrieur d'une cellule d'un autre tableau. Vous pouvez le mettre en forme comme n'importe quel tableau, mais sa largeur est limite par la largeur de la cellule dans laquelle il se trouve. 1. Cliquez dans une cellule du tableau. 2. Slectionnez Insrer > Tableau, dfinissez les options Tableau et cliquez sur OK.
Tri de tableaux
Haut de la page
Vous pouvez trier les lignes d'un tableau selon le contenu d'une seule colonne. Vous pouvez galement effectuer un tri plus complexe, selon le contenu de deux colonnes. Vous ne pouvez pas trier les tableaux contenant colspan ou rowspan, c'est--dire les tableaux qui contiennent des cellules fusionnes. 1. Slectionnez le tableau ou cliquez dans une cellule. 2. Slectionnez Commandes > Trier le tableau, dfinissez les options de la bote de dialogue et cliquez sur OK. Trier par Dtermine quelles valeurs de colonne utiliser pour trier les lignes du tableau. Ordre Dtermine comment la colonne doit tre trie (dans l'ordre alphabtique ou numrique) et si elle doit tre trie par ordre croissant (de A Z, du chiffre le plus bas au plus lev) ou par ordre dcroissant. Lorsque le contenu d'une colonne est constitu de chiffres, choisissez Numrique. Un tri par ordre alphabtique appliqu une liste de nombres un ou deux chiffres a pour effet de trier les nombres comme s'il s'agissait de mots (ayant pour rsultat un ordre du type 1, 10, 2, 20, 3, 30) plutt que comme des nombres (ayant pour rsultat un ordre du type 1, 2, 3, 10, 20, 30). Puis/Ordre Dtermine l'ordre de tri du tri secondaire sur une colonne diffrente. Indiquez la colonne de tri secondaire dans le menu contextuel Puis et l'ordre de tri secondaire dans les menus contextuels Ordre. Le tri inclut la premire ligne Indique que la premire ligne du tableau doit tre incluse dans le tri. Si la premire ligne correspond un titre ne pas dplacer, n'activez pas cette option. Trier les lignes d'en-tte Indique que toutes les lignes de la section thead du tableau (si elle existe) doivent tre tries en utilisant les mmes critres que pour les lignes de la section body. (Les lignes thead restent dans la section thead et apparaissent encore en haut du tableau, mme aprs le tri). Pour plus d'informations sur la balise thead, consultez le panneau Rfrence (choisissez Aide > Rfrence). Trier les lignes de pied de page Indique que toutes les lignes de la section thead du tableau (si elle existe) doivent tre tries en utilisant les mmes critres que pour les lignes de la section body. (Les lignes tfoot restent dans la section tfoot et apparaissent encore en bas du tableau, mme aprs le tri). Pour plus d'informations sur la balise tfoot, consultez le panneau Rfrence (choisissez Aide > Rfrence). Conserver les couleurs des lignes aprs le tri Spcifie que les attributs des lignes du tableau (tels que la couleur) doivent rester associs au mme contenu aprs le tri. Si les lignes de votre tableau sont mises en forme avec deux couleurs alternes, n'activez pas cette option pour vous assurer que les lignes du tableau tri s'affichent toujours avec des couleurs alternes. Si les attributs de ligne sont spcifiques au contenu de chaque ligne, slectionnez cette option pour vous assurer que ces attributs restent associs aux lignes appropries dans le tableau tri. Voir aussi [print]Mise en forme de pages avec CSS
224
Dfinition des proprits d'en-tte CSS pour une page entire

Vous pouvez spcifier les polices, les tailles de police et les couleurs pour vos titres de page. Par dfaut, Dreamweaver cre des rgles CSS pour vos titres et les applique tous les titres que vous utilisez sur la page. Les rgles sont incorpores dans la section head de la page. Les titres peuvent tre slectionns dans l'inspecteur Proprits HTML. 1. Choisissez Modifier > Proprits de la page ou cliquez sur le bouton Proprits de la page de l'inspecteur Proprits. 2. Slectionnez la catgorie En-ttes (CSS) et dfinissez les options. Police des en-ttes Dfinit la famille de polices par dfaut utiliser pour les en-ttes. Dreamweaver utilise la famille de polices spcifie sauf si une autre police est dsigne pour un lment de texte donn. En-tte 1 En-tte 6 Spcifie les tailles et couleurs utiliser pour chaque niveau de balises d'en-tte.
225
Dfinition des proprits de titre et de codage d'une page

Les options Titre/codage de la bote de dialogue Proprits de la page permettent de dfinir le type de codage de document spcifique au langage utilis pour crer vos pages Web, ainsi que le formulaire de normalisation Unicode utiliser avec ce type de codage. 1. Choisissez Modifier > Proprits de la page ou cliquez sur le bouton Proprits de la page de l'inspecteur Proprits. 2. Slectionnez la catgorie Titre/codage et dfinissez les options. Titre Spcifie le titre de la page, qui s'affiche dans la barre de titre de la fentre de document et dans la plupart des fentres du navigateur. Type de document (DTD) Spcifie une dfinition de type de document. Par exemple, vous pouvez rendre un document HTML compatible XHTML en slectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu droulant. Codage Prcise le codage utilis pour les caractres du document. Si vous slectionnez Unicode (UTF 8) en tant que codage de document, le codage d'entit est superflu dans la mesure o UTF 8 permet de reprsenter de faon fiable tous les caractres. Si vous slectionnez un autre codage de document, le codage d'entit peut tre ncessaire pour reprsenter certains caractres. Pour plus d'informations sur les entits de caractres, voir www.w3.org/TR/REChtml40/sgml/entities.html. Recharger Convertit le document existant ou de l'ouvrir de nouveau avec le nouveau codage. Formulaire de normalisation Unicode N'est active que si vous slectionnez UTF 8 en tant que code par dfaut. Il existe quatre Formulaires de normalisation Unicode. Le plus important est le Formulaire de normalisation Unicode C car il est le plus utilis dans le Modle de caractres li au World Wide Web, mais Adobe fournit galement les trois autres Formulaires de normalisation Unicode. Certains caractres Unicode semblent visuellement similaires mais peuvent tre stocks de diffrentes manires dans le document. Par exemple, (e trma) peut tre reprsent sous la forme d'un seul caractre, e trma ou de deux caractres, e Latin ordinaire + trma . Un caractre Unicode de combinaison est un caractre associ au caractre prcdent, ce qui fait apparatre le trma au-dessus du e Latin. Les deux formes donnent la mme typographie visuelle, alors que chacune est enregistre diffremment dans le fichier. La normalisation est le processus consistant s'assurer que tous les caractres pouvant tre enregistrs sous diffrentes formes le sont tous sous la mme forme. C'est--dire que tous les caractres d'un document sont enregistrs sous forme de e trma unique ou de e + trma de combinaison , mais pas sous les deux formes dans un mme document. Pour plus d'informations sur la Normalisation Unicode et les formulaires spcifiques pouvant tre utiliss, consultez le site Web Unicode www.unicode.org/reports/tr15. Inclure une signature Unicode (BOM) Inclut une marque d'ordre d'octet (BOM, byte order mark) dans le document. Il s'agit d'une marque constitue de 2 4 octets placs au dbut d'un fichier texte identifiant un fichier comme tant au format Unicode et, dans ce cas, l'ordre des octets suivants. Le code UTF 8 ne prsentant pas d'ordre octet, l'ajout d'une marque BOM UTF 8 est facultatif. Dans le cas de UTF 16 et UTF 32, cette marque est obligatoire.
226
Prsentation du codage de document

Le codage de document prcise le codage utilis pour les caractres dans le document. Le codage du document est spcifi dans une balise meta, insre dans l'en-tte du document ; il indique au navigateur et Dreamweaver le mode de dcodage du document et les polices utiliser pour afficher le texte dcod. Par exemple, si vous spcifiez Occidental (Latin1), la balise meta suivante est insre : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">. Le document affich dans Dreamweaver contient les polices que vous spcifiez dans Prfrences de polices pour le codage Occidental (Latin1) ; ce mme document affich dans un navigateur contient les polices que l'utilisateur du navigateur prcise pour le codage Occidental (Latin1). Si vous spcifiez Japonais (Shift JIS), la balise meta suivante est insre : <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">. Le document affich dans Dreamweaver contient les polices que vous spcifiez pour les codages du japonais ; ce mme document affich dans un navigateur contient les polices que l'utilisateur du navigateur prcise pour les codages du japonais. Vous modifier le codage du document dans une page et modifier le codage utilis par dfaut par Dreamweaver pour crer de nouveaux documents, y compris les polices utilises pour afficher chaque codage. Voir aussi [print]Dfinition du type et du codage par dfaut d'un document
227

228
Utilisation des feuilles de style la conception

Les feuilles de style la conception permettent d'afficher ou de masquer la conception applique par une feuille de style CSS lorsque vous travaillez dans un document Dreamweaver. Vous pouvez par exemple utiliser cette fonction pour inclure ou exclure l'effet d'une feuille de style Macintosh ou Windows pendant la cration d'une page. Les feuilles de style la conception s'appliquent uniquement lorsque vous travaillez dans un document ; lorsque la page est affiche dans une fentre de navigateur, seuls les styles rellement attachs au document ou qui y sont incorpors apparaissent. Remarque : Vous pouvez galement activer ou dsactiver des styles pour l'ensemble d'une page l'aide de la barre d'outils Rendu du style. Pour afficher la barre d'outils standard, choisissez Affichage > Barres d'outils > Rendu de style. Le bouton Intervertir l'affichage des Styles CSS (le plus droite) fonctionne indpendamment des autres boutons de support de la barre d'outils. Pour utiliser une feuille de style la conception, procdez comme suit. 1. Ouvrez la bote de dialogue Feuilles de style la conception en procdant de l'une des manires suivantes : Cliquez avec le bouton droit de la souris dans le panneau Styles CSS et choisissez Conception dans le menu contextuel. Choisissez Format > Styles CSS > Conception. 2. Dans la bote de dialogue, dfinissez les options d'affichage ou de masquage de la feuille de style slectionne : Pour afficher une feuille de style CSS la conception, cliquez sur le bouton plus (+) situ au-dessus d'Afficher la conception uniquement, puis recherchez la feuille de style CSS afficher dans la bote de dialogue Slectionner 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 bote de dialogue Slectionner une feuille de style. Pour supprimer une feuille de style de l'une ou l'autre des listes, cliquez sur la feuille de style que vous voulez supprimer, puis cliquez sur le bouton moins () appropri. 3. Cliquez sur OK pour fermer la bote de dialogue. Le panneau Styles CSS est actualis avec le nom de la feuille de style slectionne ainsi qu'un indicateur, masqu ou concevoir , selon l'tat de la feuille de style. Voir aussi Prsentation de la barre d'outils Rendu de style
229
Utilisation d'exemples de feuilles de style Dreamweaver

Dreamweaver est fourni avec des exemples de feuilles de style que vous pouvez appliquer vos pages ou que vous pouvez utiliser comme points de dpart pour crer vos propres styles. 1. Ouvrez le panneau Styles CSS en procdant de l'une des manires suivantes : Choisissez Fentre > Styles CSS. Appuyez sur les touches Maj+F11. 2. Dans le panneau Styles CSS, cliquez sur le bouton Attacher une feuille de style. (Dans le coin infrieur droit du panneau.) 3. Dans la bote de dialogue Ajouter une feuille de style externe, cliquez sur Exemples de feuilles de style. 4. Dans la bote de dialogue Exemples de feuilles de style, slectionnez une feuille de style dans la liste droulante. Lorsque vous slectionnez des feuilles de style dans la zone de liste, le formatage du texte et des couleurs s'affiche dans le panneau d'aperu. 5. Cliquez sur le bouton Aperu pour appliquer la feuille de style et vrifier que le style de votre choix est bien appliqu la page active. Si les styles appliqus ne sont pas ceux que vous escomptiez, slectionnez une autre feuille de style dans la liste et cliquez sur le bouton Aperu pour visualiser les styles correspondants. 6. Par dfaut, Dreamweaver enregistre la feuille de style dans un dossier nomm CSS au niveau juste en dessous de la racine du site dfini pour votre page. Si ce dossier n'existe pas, Dreamweaver le cre. Vous pouvez enregistrer le fichier dans un autre emplacement en cliquant sur le bouton Parcourir pour rechercher un autre dossier. 7. Lorsque vous trouvez une feuille de style dont les rgles correspondent vos critres, cliquez sur OK.
230
Utilisation d'un trac d'image pour crer une page

Vous pouvez insrer un fichier image utiliser comme guide dans la cration de votre page. L'image s'affiche sous la forme d'une image d'arrireplan, que vous pouvez utiliser comme guide pour la mise en forme de votre page. 1. Choisissez Modifier > Proprits de la page ou cliquez sur le bouton Proprits de la page de l'inspecteur Proprits. 2. Slectionnez la catgorie Trac de l'image et dfinissez les options. Trac de l'image Permet de spcifier l'image utiliser comme guide pour reproduire une mise en page. Cette image sert uniquement de rfrence et n'apparat pas lorsque le document s'affiche dans un navigateur. Transparence Dtermine l'opacit du trac de l'image, de compltement transparent compltement opaque.
231
Utilisation de cadres
Fonctionnement des cadres et des jeux de cadres Choix de l'utilisation des cadres Jeux de cadres imbriqus Utilisation de jeux de cadres dans la fentre de document Cration de cadres et de jeux de cadres Slection de cadres et de jeux de cadres Ouverture d'un document dans un cadre Enregistrement des fichiers du cadre et du jeu de cadres Affichage et dfinition des des proprits et des attributs de cadre Affichage et dfinition des proprits de jeux de cadres Contrle des contenus de cadre avec des liens Fourniture de contenu pour les navigateurs ne prenant pas les cadres en charge Utilisation des comportements JavaScript avec les cadres
Fonctionnement des cadres et des jeux de cadres
Haut de la page
La partie d'une fentre du navigateur pouvant afficher un document HTML indpendamment de ce qui apparat dans le reste de la fentre constitue un cadre. Les cadres permettent de diviser une fentre du navigateur en plusieurs zones, chacune d'entre elles pouvant afficher un document HTML distinct. En rgle gnrale, un premier cadre affiche un document avec des commandes de navigation tandis qu'un autre cadre affiche un document avec le contenu principal. Un jeu de cadres est un fichier HTML qui dfinit la mise en forme et les proprits de plusieurs cadres, dont le nombre, la taille et l'emplacement des cadres, ainsi que l'URL de la page qui s'affiche initialement dans chaque cadre. Le fichier du jeu de cadres ne contient pas de contenu HTML qui s'affiche dans un navigateur, l'exception de la section noframes ; il fournit simplement au navigateur des informations sur la mise en forme d'un jeu de cadres et les documents qu'il doit afficher. Pour afficher un jeu de cadres dans un navigateur, tapez l'URL du fichier correspondant. Le navigateur ouvre ensuite les documents qui devront tre affichs dans les cadres. Le fichier du jeu de cadres relatif un site s'appelle gnralement index.html et s'affiche par dfaut si le visiteur ne spcifie pas de nom de fichier. L'exemple suivant prsente une mise en forme de cadre contenant trois cadres : un cadre troit qui contient la barre de navigation dans la partie latrale, un cadre en haut du document contenant le logo et le titre d'un site Web et un grand cadre avec le contenu principal qui occupe le reste de la page. Chacun de ces cadres affiche un document HTML distinct.
Dans cet exemple, le document affich dans le cadre suprieur ne change jamais lorsque les visiteurs consultent le site. La barre de navigation du cadre latral contient des liens qui, lorsqu'ils sont activs, modifient le contenu du cadre principal, mais pas le contenu du cadre latral. Le cadre
232
de contenu principal droite affiche le document correspondant tous les liens activs par le visiteur dans la partie gauche. Un cadre n'est pas un fichier ; on pourrait croire que le document affich dans un cadre fait partie intgrante de ce dernier, mais ce n'est pas le cas. Le cadre contient le document. Remarque : Une page peut dsigner un seul document HTML ou l'ensemble du contenu d'une fentre du navigateur un moment donn, mme si plusieurs documents HTML sont affichs simultanment. Par exemple, l'expression une page qui utilise des cadres s'applique gnralement un jeu de cadres et aux documents qui y figurent. Tout site affich dans un navigateur sous forme d'une page unique constitue de trois cadres contient en fait au moins quatre documents HTML, savoir, le fichier du jeu de cadres et les trois documents incluant le contenu qui s'affiche initialement dans les cadres. Lorsque vous concevez une page l'aide de jeux de cadres dans Dreamweaver, vous devez enregistrer chacun de ces quatre fichiers pour que la page s'affiche correctement dans le navigateur. Pour obtenir des informations plus dtailles sur les cadres, consultez le site Web de Thierry Koblentz l'adresse www.tjkdesign.com/articles/frames/.
Choix de l'utilisation des cadres

L'alignement graphique des lments de diffrents cadres n'est pas toujours prcis. Le test de la navigation peut tre long.
Haut de la page
Adobe dconseille l'emploi de cadres pour la mise en page d'une page Web. Parmi les inconvnients de l'emploi de cadres, citons :
Comme l'URL de chacune des pages contenues dans les cadres n'est pas affiche dans le navigateur, les visiteurs risquent de ne pas pouvoir ajouter de signet une page donne ( moins que vous ne fournissiez le code du serveur permettant de charger la version avec cadres d'une page). Pour obtenir une justification dtaille de la raison pour laquelle il ne faut pas utiliser des cadres, consultez le site de Gary White l'adresse http://apptools.com/rants/framesevil.php. Si vous dcidez des les utiliser, les cadres servent gnralement la navigation. Un jeu de cadres inclut gnralement un cadre contenant une barre de navigation et un cadre destin afficher le contenu principal. L'emploi de cadres de cette faon offre quelques avantages. Le navigateur d'un visiteur n'a pas besoin de recharger les graphiques lis la navigation chaque page. Chaque cadre possde sa propre barre de dfilement (si le contenu ne tient pas entirement dans une fentre) pour que le visiteur puisse faire dfiler les cadres indpendamment les uns des autres. Par exemple, un visiteur ayant fait dfiler une longue page de contenu jusqu'en bas n'est pas oblig de la faire dfiler nouveau vers le haut pour afficher la barre de navigation si celle-ci figure dans un autre cadre. Dans la plupart des cas, vous pouvez crer une page Web sans cadre qui permet d'obtenir les mmes rsultats qu'avec un jeu de cadres. Par exemple, si vous voulez afficher une barre de navigation gauche de la page, vous pouvez remplacer la page par un jeu de cadres ou simplement inclure la barre de navigation sur chacune des pages du site (Dreamweaver vous permet de crer plusieurs pages dont la mise en forme est identique.) Dans l'exemple suivant, la mise en forme de la page ressemble une mise en forme avec cadres, mais elle n'en contient pas.
Les sites Web mal conus utilisent des cadres de faon inutile, avec, par exemple, un jeu de cadres qui recharge le contenu des cadres de navigation chaque fois que le visiteur clique sur un bouton de navigation. S'ils sont correctement utiliss (par exemple, pour immobiliser les commandes de navigation dans un cadre tout en permettant de modifier le contenu d'un autre cadre), les cadres peuvent tre trs utiles dans un
233
site. La prise en charge des cadres varie en fonction du navigateur utilis. En outre, la navigation des cadres peut s'avrer difficile pour les visiteurs souffrant de handicaps. Par consquent, si vous utilisez des cadres, incorporez systmatiquement une section noframes dans votre jeu de cadres pour les visiteurs qui ne peuvent pas les visualiser. Vous pouvez galement fournir un lien explicite vers une version sans cadre du site. Pour obtenir des informations plus dtailles sur les cadres, consultez le site Web de Thierry Koblentz l'adresse www.tjkdesign.com/articles/frames/.
Jeux de cadres imbriqus
Haut de la page
Un jeu de cadres imbriqu est un jeu de cadres situ l'intrieur d'un autre jeu de cadres. Un fichier de jeu de cadres peut contenir plusieurs jeux de cadres imbriqus. La plupart des pages Web avec des cadres utilisent en fait des cadres imbriqus, de mme que la plupart des jeux de cadres prdfinis dans Dreamweaver. Tout jeu de cadres comportant un nombre diffrent de cadres dans diffrentes lignes ou colonnes doit tre imbriqu. Par exemple, la mise en forme de cadre la plus courante affiche un cadre sur la ligne suprieure (o figure le logo de l'entreprise) et deux cadres sur la ligne infrieure (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 deuxime ligne.
A. Jeu de cadres principal B. Le cadre de menus et le cadre de contenu sont imbriqus dans le jeu de cadres principal. Dreamweaver gre automatiquement l'imbrication des jeux de cadres. Si vous faites appel aux outils de fractionnement de cadre dans Dreamweaver, le programme se charge de dfinir les cadres qui doivent tre imbriqus et ceux qui doivent rester tels quels. Vous pouvez imbriquer les jeux de cadres de deux faons dans HTML : le jeu de cadres interne peut tre dfini dans le mme fichier que le jeu de cadres externe, ou dans un fichier distinct. Chaque jeu de cadres prdfini dans Dreamweaver dfinit tous ses jeux de cadres dans le mme fichier. Les deux types d'imbrication produisent des rsultats visuels identiques. A moins d'examiner le code, il n'est pas facile de savoir quel type d'imbrication est utilis. En rgle gnrale, Dreamweaver utilise un fichier de jeu de cadres externe lorsque vous excutez la commande Ouvrir dans un cadre pour ouvrir un fichier de jeu de cadres l'intrieur d'un cadre. Dans ce cas, vous risquez de ne pas pouvoir dfinir correctement les cibles des liens. Il est souvent plus simple de garder tous les jeux de cadres dfinis dans un seul fichier.
Utilisation de jeux de cadres dans la fentre de document
Haut de la page
Dreamweaver permet d'afficher et de modifier tous les documents associs un jeu de cadres dans une seule fentre de document. Vous pouvez ainsi afficher un aperu approximatif des pages insres dans des cadres et les modifier votre convenance dans le navigateur. Toutefois, certains aspects de cette approche peuvent tre droutants si vous ne les matrisez pas parfaitement. En particulier, chaque cadre affiche un document HTML distinct. Mme si les documents sont vides, vous devez les enregistrer avant de les prvisualiser. En effet, vous ne pouvez afficher un aperu prcis 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, excutez la procdure suivante : 1. Crez un jeu de cadres et spcifiez le document qui devra apparatre dans chaque cadre. 2. Enregistrez chaque fichier qui apparatra dans un cadre. N'oubliez pas que chaque cadre affiche un document HTML diffrent et que vous devez enregistrer chaque document avec le fichier de jeu de cadres. 3. Dfinissez les proprits de chaque cadre et du jeu de cadres (notamment, nommez chaque cadre, dfinissez les options de dfilement et d'absence de dfilement). 4. Dans l'inspecteur Proprits, dfinissez la proprit Cible pour tous les liens afin que le contenu li apparaisse dans la zone approprie.
234
Cration de cadres et de jeux de cadres
Haut de la page
Il y a deux faons de crer un jeu de cadres dans Dreamweaver : vous pouvez slectionner un jeu de cadres prdfini ou le concevoir vousmme. Si vous choisissez un jeu de cadres prdfini, tous les jeux de cadres et cadres ncessaires la cration de la mise en forme sont configurs, ce qui reprsente le moyen le plus simple d'insrer rapidement une mise en forme avec des cadres dans la page. Vous pouvez uniquement insrer un jeu de cadres prdfini dans la fentre de document en mode Cration. Vous pouvez concevoir votre propre jeu de cadres dans Dreamweaver en ajoutant des sparateurs la fentre. Avant de crer un jeu de cadres ou d'utiliser des cadres, affichez les bordures de cadres en mode Cration dans la fentre de document en choisissant Affichage > Assistances visuelles > Bordures de cadre.
Cration d'un jeu de cadres prdfini et affichage d'un document existant dans un cadre
1. Placez le point d'insertion dans un document et procdez de l'une des manires suivantes : Choisissez Insertion > HTML > Cadres et slectionnez un jeu de cadres prdfini. Dans la catgorie Mise en forme du panneau Insertion, cliquez sur la flche du bouton Cadres et choisissez un jeu de cadres prdfini. Les icnes de jeu de cadres fournissent une reprsentation visuelle de chaque jeu de cadres appliqu au document en cours. La zone bleue de l'icne du jeu de cadres reprsente le document courant et la zone blanche les cadres qui afficheront d'autres documents. 2. Si vous avez configur Dreamweaver pour qu'il vous invite dfinir des attributs d'accessibilit des cadres, slectionnez un cadre dans le menu droulant, entrez un nom pour la cadre et cliquez sur OK. (Pour les visiteurs qui en utilisent un, le lecteur d'cran lit ce nom lorsqu'il rencontre le cadre sur une page.) Remarque : Si vous cliquez sur OK sans entrer de nouveau nom, Dreamweaver donne au cadre un nom qui correspond sa position (cadre de gauche, cadre de droite, etc.) dans le jeu de cadres. Remarque : Si vous cliquez sur Annuler, le jeu de cadres s'affiche dans le document, mais Dreamweaver ne lui associe ni les balises ni les attributs d'accessibilit. Choisissez Fentre > Cadres pour afficher un diagramme des cadres que vous nommez.
Cration d'un jeu de cadres prdfini vide

1. Choisissez Fichier > Nouveau. 2. Dans la bote de dialogue Nouveau document, slectionnez la catgorie Exemple de page. 3. Slectionnez le dossier Jeu de cadres dans la colonne Dossier exemple. 4. Slectionnez un jeu de cadres dans la colonne Exemple de page, puis cliquez sur Crer. 5. Si vous avez activ les attributs d'accessibilit aux cadres dans Prfrences, la bote de dialogue Attributs d'accessibilit aux balises de cadre s'affiche ; renseignez la bote de dialogue pour chaque cadre et cliquez sur OK. Remarque : Si vous cliquez sur Annuler, le jeu de cadres s'affiche dans le document, mais Dreamweaver ne lui associe ni les balises ni les attributs d'accessibilit.
Cration d'un jeu de cadres

Dans le sous-menu Modifier > Jeu de cadres, choisissez une option de fractionnement (par exemple, Fractionner le cadre gauche ou Fractionner le cadre droite). Dreamweaver fractionne la fentre en cadres. Si vous aviez un document existant ouvert, il apparat dans l'un des cadres.
Fractionnement d'un cadre en cadres plus petits

Pour fractionner le cadre au niveau du point d'insertion, choisissez une option de fractionnement dans le sous-menu Modifier > Jeu de cadres. Pour fractionner un cadre ou un jeu de cadres verticalement ou horizontalement, faites glisser une bordure de cadre du bord vers le centre de la fentre en mode Cration. Pour fractionner un cadre l'aide d'une bordure de cadre qui ne se trouve pas sur le bord de la fentre en mode Cration, faites glisser une bordure de cadre tout en maintenant la touche Alt (Windows) ou Option (Macintosh) enfonce. Pour diviser un cadre en quatre, faites glisser une bordure de cadre de l'un des coins de la fentre en mode Cration vers le centre d'un cadre. Pour crer trois cadres, crez-en d'abord deux, puis fractionnez l'un d'eux. L'opration de fusion de deux cadres adjacents sans modifier le code du jeu de cadres tant relativement ardue, il est plus difficile de convertir quatre cadres en trois cadres que deux cadres en trois cadres.
Suppression d'un cadre

Faites glisser une bordure de cadre en dehors de la page ou vers une bordure du cadre parent. Si vous supprimez un cadre dans lequel se trouve un document qui n'a pas t enregistr, Dreamweaver vous invite enregistrer ce dernier. Remarque : Vous ne pouvez pas entirement supprimer un jeu de cadres en faisant glisser ses bordures. Pour le supprimer compltement,
235
fermez la fentre de document qui l'affiche. Si le fichier du jeu de cadres a t enregistr, supprimez le fichier.
Redimensionnement d'un cadre

Pour dfinir la taille approximative des cadres, faites glisser une bordure de cadre dans la fentre de document en mode Cration. Pour dfinir des tailles exactes et spcifier l'espace allou par le navigateur une ligne ou une colonne de cadres lorsque la taille de la fentre du navigateur ne permet pas d'afficher les cadres dans leur totalit, utilisez l'inspecteur Proprits.
Slection de cadres et de jeux de cadres
Haut de la page
Pour modifier les proprits d'un cadre ou d'un jeu de cadres, vous devez au pralable le slectionner dans la fentre de document ou en utilisant le panneau Cadres. Le panneau Cadres donne une reprsentation visuelle des cadres dans un jeu de cadres. Il affiche la hirarchie de la structure du jeu de cadres qui n'apparat pas forcment dans la fentre de document. Dans le panneau Cadres, une paisse bordure entoure le jeu de cadres, une fine ligne grise entoure chaque cadre et chaque cadre est identifi par un nom.
Lorsqu'un cadre est slectionn dans la fentre de document, en mode Cration, sa bordure s'affiche avec une ligne en pointill ; lorsqu'un jeu de cadres est slectionn, toutes les bordures des cadres l'intrieur de ce jeu s'affichent avec une ligne en pointill plus fine. Remarque : La slection d'un cadre et le placement d'un point d'insertion dans un document affich dans un cadre sont deux oprations diffrentes. Vous serez amen slectionner un cadre dans de nombreux cas (par exemple, lorsque vous dfinissez les proprits d'un cadre).
Slection d'un cadre ou d'un jeu de cadres dans le panneau Cadres

1. Choisissez Fentre > Cadres. 2. Dans le panneau Cadres : Pour slectionner un cadre, cliquez sur le cadre. Des lignes de slection apparaissent autour du cadre dans le panneau Cadres et dans la fentre de document, en mode Cration. Pour slectionner un jeu de cadres, cliquez sur la bordure qui l'entoure.
Slection d'un cadre ou d'un jeu de cadres dans la fentre de document

En mode Cration, pour slectionner un cadre, cliquez dans celui-ci tout en maintenant les touches Maj+Alt (Windows) ou Maj+Option (Macintosh) enfonces. En mode Cration, pour slectionner un jeu de cadres, cliquez sur l'une des bordures du cadre interne du jeu de cadres. Vous devez d'abord vous assurer que les bordures sont visibles ; pour cela, choisissez Affichage > Assistances visuelles > Bordures de cadre. Remarque : Il est souvent plus simple de slectionner les jeux de cadres dans le panneau Cadres que dans la fentre de document. Pour plus d'informations, consultez les rubriques ci-dessus.
Slection d'un cadre ou d'un jeu de cadre diffrent

236
Pour slectionner le cadre ou le jeu de cadres suivant ou prcdent au mme niveau hirarchique que la slection en cours, appuyez sur la flche gauche ou droite tout en maintenant la touche Alt (Windows) ou Commande (Macintosh) enfonce. Ces touches vous permettent de parcourir les cadres et jeux de cadres dans l'ordre dans lequel ils sont dfinis dans le fichier du jeu de cadres. Pour slectionner le jeu de cadres parent (celui qui contient la slection en cours), appuyez sur la flche haut tout en maintenant la touche Alt (Windows) ou Commande (Macintosh) enfonce. Pour slectionner le premier cadre ou jeu de cadres enfant de la slection courante (en respectant l'ordre dans lequel ils sont dfinis dans le fichier du jeu de cadres), appuyez sur la flche bas tout en maintenant la touche Alt (Windows) ou Commande (Macintosh) enfonce.
Ouverture d'un document dans un cadre
Haut de la page
Vous pouvez spcifier le contenu initial d'un cadre en insrant un nouveau contenu dans un document vide ou en ouvrant un document dans un cadre. 1. Placez le point d'insertion dans un cadre. 2. Choisissez Fichier > Ouvrir dans un cadre. 3. Slectionnez un document ouvrir dans le cadre et cliquez sur OK (Windows) ou Choisir (Macintosh). 4. (Facultatif) Si vous voulez afficher ce document par dfaut dans le cadre lorsque le jeu de cadres est ouvert dans un navigateur, enregistrez le jeu de cadres.
Enregistrement des fichiers du cadre et du jeu de cadres
Haut de la page
Avant d'afficher l'aperu d'un jeu de cadres dans un navigateur, vous devez enregistrer le fichier correspondant et tous les documents qui seront affichs dans les cadres. Vous pouvez enregistrer le fichier du jeu de cadres et chacun des documents contenus dans les cadres individuellement ou enregistrer le fichier du jeu de cadres et tous les fichiers contenus dans les cadres simultanment. Remarque : Si vous faites appel aux outils visuels de Dreamweaver pour crer un jeu de cadres, un nom de fichier par dfaut est attribu chaque nouveau document apparaissant dans un cadre. Par exemple, le premier fichier du jeu de cadres s'appelle Jeu de cadres sans nom-1, tandis que le premier document d'un cadre s'intitule Cadre sans nom-1.
Enregistrement d'un fichier de jeu de cadres

Slectionnez le jeu de cadres dans le panneau Cadres ou dans la fentre de document. Pour enregistrer le fichier de jeu de cadres, choisissez Fichier > Enregistrer le jeu de cadres. Pour enregistrer le fichier de jeu de cadres en tant que nouveau fichier, choisissez Fichier > Enregistrer le jeu de cadres sous. Remarque : Si le fichier du jeu de cadres n'a pas t enregistr, ces deux commandes sont quivalentes.
Enregistrement d'un document qui apparat l'intrieur d'un cadre

Cliquez dans le cadre, puis choisissez Fichier > Enregistrer le cadre ou Fichier > Enregistrer le cadre sous.
Enregistrement de tous les fichiers associs un jeu de cadres

Choisissez Fichier > Enregistrer tous les cadres. Cette commande enregistre tous les documents ouverts dans le jeu de cadres, y compris le fichier du jeu de cadres et tous les documents encadrs. Si le fichier du jeu de cadres n'a pas t enregistr, une paisse bordure entoure le jeu de cadres (ou le cadre non enregistr) en mode Cration et vous pouvez slectionner un nom de fichier. Remarque : Si vous avez utilis la commande Fichier > Ouvrir dans un cadre pour ouvrir un document dans un cadre, lorsque vous enregistrez le jeu de cadres, le document ouvert devient le document par dfaut qui sera affich dans ce cadre. N'enregistrez pas le fichier du jeu de cadres si vous ne voulez pas que ce document soit utilis par dfaut.
Haut de la page
Affichage et dfinition des des proprits et des attributs de cadre
Utilisez l'inspecteur Proprits pour afficher et dfinir la plupart des proprits de cadre, notamment les bordures, les marges et l'affichage ou non de barres de dfilement dans les cadres. La dfinition d'une proprit de cadre est prpondrante sur la dfinition de cette proprit pour le jeu de cadres. Si vous le souhaitez, dfinissez des attributs de cadre, comme l'attribut title (qui est diffrent de l'attribut name), pour amliorer l'accessibilit. Vous pouvez activer l'option de programmation de l'accessibilit pour les cadres afin de dfinir des attributs lorsque vous crez des cadres ou bien dfinir des attributs aprs avoir insr un cadre. Pour modifier les attributs d'accessibilit d'un cadre, utilisez l'inspecteur de balises afin de modifier directement le code HTML.
Affichage ou dfinition des proprits des cadres

1. Slectionnez un cadre en utilisant l'une des mthodes suivantes : Dans la fentre de document (mode Cration), cliquez dans le cadre tout en maintenant les touches Alt (Windows) ou Maj+Option
237
(Macintosh) enfonces. Cliquez sur le cadre dans le panneau Cadres (Fentre > Cadres). 2. Dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur la flche d'agrandissement situe dans le coin infrieur droit pour visualiser toutes les proprits des cadres. 3. Dfinition des options de l'inspecteur Proprits des cadres Nom du cadre Nom du cadre est le nom utilis par l'attribut target d'un lien ou par un script pour rfrencer le cadre. Un nom de cadre ne doit contenir qu'un seul mot. Les traits de soulignement (_) sont autoriss, mais pas les tirets ( ), points (.) et espaces. Les noms de cadres doivent commencer par une lettre (et non un chiffre). Ils tiennent compte des majuscules et des minuscules. N'utilisez pas de termes rservs dans JavaScript (tels que les mots top ou navigator) comme noms de cadre. Pour qu'un lien modifie le contenu d'un autre cadre, vous devez attribuer un nom au cadre cible. Pour faciliter la cration de liens entre plusieurs cadres, donnez un nom chaque cadre que vous crez. Src Spcifie le document source afficher dans le cadre. Cliquez sur l'icne de dossier pour rechercher et slectionner un fichier. Dfiler Dtermine si des barres de dfilement apparaissent dans le cadre. La dfinition de cette option sur Par dfaut n'affecte aucune valeur l'attribut correspondant, si bien que chaque navigateur peut utiliser sa valeur par dfaut. Dans la plupart des navigateurs, la valeur par dfaut est Auto. Par consquent, les barres de dfilement n'apparaissent que si la fentre du navigateur ne peut pas afficher la totalit du contenu du cadre courant. Ne pas redimens. Empche les visiteurs de dplacer les bordures du cadre pour redimensionner ce dernier dans un navigateur. Remarque : Vous pouvez toujours redimensionner les cadres dans Dreamweaver ; cette option ne s'applique qu'aux visiteurs qui souhaitent afficher les cadres dans un navigateur. Bordures Affiche ou masque les bordures du cadre courant lorsqu'il est affich dans un navigateur. L'option Bordures remplace les paramtres de bordure du jeu de cadres. Les options de bordure sont Oui (afficher les bordures), Non (masquer les bordures) et Par dfaut. Dans la plupart des navigateurs, la valeur propose est Oui, moins que l'option Bordures du jeu de cadres parent ne soit dfinie sur Non. Si plusieurs cadres partagent une mme bordure, celle-ci n'est masque que lorsque l'option Bordures est dfinie sur Non pour tous les cadres ou lorsque la proprit Bordures du jeu de cadres parent est dfinie sur Non et l'option Bordures sur Par dfaut. Couleur de la bordure Dfinit la couleur de toutes les bordures du cadre. Cette couleur s'applique toutes les bordures adjacentes au cadre et remplace celle du jeu de cadres. Largeur de marge Dfinit la largeur en pixels des marges gauche et droite (c'est--dire l'espace sparant la bordure du cadre de son contenu). Hauteur de marge Dfinit la hauteur en pixels des marges suprieure et infrieure (c'est--dire l'espace sparant la bordure du cadre de son contenu). Remarque : La dfinition de la largeur et de la hauteur d'un cadre et la dfinition des marges dans la bote de dialogue Modifier > Proprits de la page sont deux oprations diffrentes. Pour modifier la couleur d'arrire-plan d'un cadre, vous devez dfinir la couleur d'arrire-plan du document dans le cadre dans les proprits de la page.
Dfinition des valeurs d'accessibilit d'un cadre

1. Dans le panneau Cadres (Fentre > Cadres), slectionnez un cadre en plaant le point d'insertion dans l'un des cadres. 2. Choisissez Modifier > Modifier la balise <jeu de cadres>. 3. Slectionnez Feuille de style/Accessibilit dans la liste de catgories situe gauche, entrez des valeurs et cliquez sur OK.
Dfinition des valeurs d'accessibilit d'un cadre

1. Affichez votre document en mode Code ou Code et cration si vous tes en mode Cration. 2. Dans le panneau Cadres (Fentre > Cadres), slectionnez un cadre en plaant le point d'insertion dans l'un des cadres. Dreamweaver met en surbrillance la balise du cadre dans le code. 3. Cliquez dans le code du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), et choisissez Modifier la balise. 4. Dans l'diteur de balises, effectuez les modifications ncessaires et cliquez sur OK.
Modification de la couleur d'arrire-plan d'un document dans un cadre

1. Placez le point d'insertion dans le cadre. 2. Choisissez Modifier > Proprits de la page. 3. Dans la bote de dialogue Proprits de la page, cliquez sur le menu droulant Couleur d'arrire-plan, puis slectionnez une couleur.
Affichage et dfinition des proprits de jeux de cadres
Haut de la page
Utilisez l'inspecteur Proprits pour afficher et dfinir la plupart des proprits de jeu de cadres, notamment le titre du jeu de cadre, les bordures et
238
les tailles des cadres.
Dfinition du titre du document d'un jeu de cadres

1. Slectionnez un jeu de cadres en utilisant l'une des mthodes suivantes : Cliquez sur une bordure entre deux cadres du jeu de cadres dans la fentre de document en mode Cration. Cliquez sur la bordure d'un jeu de cadres dans le panneau Cadres (Fentre > Cadres). 2. Dans la zone Titre de la barre d'outils du document, tapez le nom du document de jeu de cadres. Lorsqu'un visiteur affiche le jeu de cadres dans un navigateur, le titre apparat dans la barre de titre.
Affichage ou dfinition des proprits de jeux de cadres

1. Slectionnez un jeu de cadres en utilisant l'une des mthodes suivantes : Cliquez sur une bordure entre deux cadres du jeu de cadres dans la fentre de document en mode Cration. Cliquez sur la bordure d'un jeu de cadres dans le panneau Cadres (Fentre > Cadres). 2. Dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur la flche d'agrandissement situe dans le coin infrieur droit et dfinissez les options de jeu de cadres. Bordures Dtermine si des bordures apparaissent ou non autour des cadres lorsque le document est affich dans un navigateur. Pour afficher les bordures, slectionnez Oui ; sinon, slectionnez Non. Pour que le navigateur dtermine l'affichage des bordures, slectionnez Par dfaut. Largeur de bord Spcifie la largeur de toutes les bordures du jeu de cadres. Couleur de la bordure Dfinit la couleur des bordures. Slectionnez une couleur avec le slecteur de couleur ou entrez la valeur hexadcimale de la couleur. Slection lig./col. Dfinit la taille des cadres des lignes et colonnes du jeu de cadres slectionn ; cliquez sur un onglet du ct gauche ou en haut de la zone Slection lig./col., puis tapez une hauteur ou une largeur dans la zone de texte Valeur.
3. Pour dfinir l'espace allou par le navigateur chaque cadre, choisissez l'une des options suivantes dans le menu Units : Pixels Dfinit la taille de la colonne ou de la ligne slectionne en lui attribuant une valeur absolue. Choisissez cette option pour les cadres dont la taille ne change pas, comme la barre de navigation. Un espace est allou aux cadres dont la taille est spcifie en pixels, puis aux cadres dont la taille est relative ou spcifie en pourcentage. En rgle gnrale, il est recommand de dfinir une largeur fixe en pixels pour le cadre de gauche et une largeur relative pour le cadre de droite afin que ce dernier puisse occuper l'espace restant une fois la largeur en pixels alloue. Remarque : Si toutes les largeurs sont en pixels et qu'un visiteur affiche le jeu de cadres dans un navigateur dont la largeur est infrieure ou suprieure celle que vous avez spcifie, les cadres sont automatiquement redimensionns en fonction de l'espace disponible. Ceci s'applique galement aux hauteurs spcifies en pixels. Par consquent, il est recommand de spcifier au moins une largeur et une hauteur relatives. Pourcent Dfinit la colonne ou la ligne slectionne comme pourcentage de la largeur ou de la hauteur totale de son jeu de cadres. L'espace des cadres dfinis avec cette option est allou aprs celui des cadres dfinis en pixels, mais avant celui des cadres dfinis avec l'option Relatif. Relatif Indique qu'une fois l'espace des cadres dfinis en Pixel et en Pour-cent attribu, l'espace restant doit tre allou la colonne ou la ligne slectionne. Cet espace est rparti proportionnellement entre les cadres de taille relative. Remarque : Lorsque vous choisissez l'option Relatif dans le menu Units, tout nombre figurant dans le champ Valeur disparat. Pour le spcifier, vous devez le taper de nouveau. En revanche, si une seule ligne ou colonne est dfinie sur Relatif, vous n'avez pas besoin de retaper un nombre, car tout l'espace restant lui est allou, une fois celui des autres lignes et colonnes a t attribu. Pour garantir la compatibilit inter-navigateurs, vous pouvez taper 1 dans le champ Valeur. Cela revient ne pas spcifier de valeur du tout.
Contrle des contenus de cadre avec des liens
Haut de la page
Pour utiliser un lien dans un cadre en vue d'ouvrir un document dans un autre cadre, vous devez dfinir la cible du lien. L'attribut target d'un lien spcifie le cadre ou la fentre dans lequel ou laquelle le contenu associ au lien s'ouvre. Par exemple, si la barre de navigation se trouve dans le cadre gauche et que vous voulez afficher le document li dans le cadre de contenu principal droite, vous devez dfinir 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 spcifi s'ouvre dans le cadre principal.
239
1. En mode Cration, choisissez un texte ou un objet. 2. Dans la zone Lien de l'inspecteur Proprits (Fentre > Proprits), procdez de l'une des manires suivantes : Cliquez sur l'icne de dossier et slectionnez le fichier avec lequel tablir le lien. Faites glisser l'icne Pointer vers un fichier dans le panneau Fichiers et slectionnez le fichier avec lequel tablir le lien. 3. Dans le menu droulant Cible de l'inspecteur Proprits, slectionnez la fentre ou le cadre dans lequel doit s'afficher le document li : _blank ouvre le document li dans une nouvelle fentre du navigateur sans toucher la fentre courante. _parent ouvre le document li dans le jeu de cadres parent du cadre dans lequel figure le lien, en remplaant tout le jeu de cadres. _self ouvre le lien dans le cadre en cours, en remplaant le contenu de ce cadre. _top ouvre le document li dans la fentre du navigateur courant, en remplaant tous les cadres. Les noms des cadres apparaissent galement dans ce menu. Slectionnez 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 fentre, les noms des cadres n'apparaissent pas dans le menu droulant Cible. Si vous modifiez un document en dehors du jeu de cadres, vous pouvez taper le nom du cadre cible dans la zone de texte Cible. Si vous tablissez un lien vers une page situe en dehors de votre site, utilisez toujours target="_top" ou target="_blank" pour vous assurer que la page ne soit pas considre comme faisant partie de votre site.
Fourniture de contenu pour les navigateurs ne prenant pas les cadres en charge
Haut de la page
Dreamweaver vous permet de dfinir le contenu afficher dans les navigateurs graphiques plus anciens et bass sur le texte qui ne prennent pas en charge les cadres. Ce contenu, encadr de balises noframes, est stock dans le fichier du jeu de cadres. Lorsqu'un navigateur qui ne gre pas les cadres charge un fichier de jeu de cadres, il affiche uniquement le contenu des balises noframes. Remarque : La zone noframes doit contenir un texte plus dtaill que Vous devez mettre votre navigateur jour pour pouvoir utiliser des cadres . Certains visiteurs de sites utilisent des systmes qui ne leur permettent pas d'afficher les cadres. 1. Choisissez Modifier > Jeu de cadres > Modifier le contenu sans cadres. Dreamweaver efface ce qui se trouve dans la fentre en mode Cration et les mots Contenu sans cadres apparaissent dans la zone suprieure. 2. Effectuez l'une des oprations suivantes : Dans la fentre de document, tapez ou insrez le contenu, comme vous le feriez pour un document ordinaire. Slectionnez Fentre > Inspecteur de code, placez le point d'insertion entre les balises body qui se trouvent l'intrieur des balises noframes, puis tapez le code HTML pour le contenu 3. Choisissez de nouveau Modifier > Jeu de cadres > Modifier le contenu sans cadres pour revenir au mode normal du document jeu de cadres.
Utilisation des comportements JavaScript avec les cadres

Plusieurs comportements JavaScript et commandes de navigation sont particulirement bien adapts l'utilisation de cadres :
Haut de la page
Texte du cadre Remplace le contenu et le formatage d'un cadre par le contenu que vous spcifiez. Ce contenu peut tre n'importe quel texte valide en HTML Cette action permet d'afficher les informations dans un cadre de faon dynamique Atteindre l'URL Ouvre une nouvelle page dans la fentre en cours ou dans le cadre indiqu. Cette action est particulirement utile pour modifier d'un seul clic le contenu de deux cadres ou plus Insrer menu de reroutage Permet de configurer une liste de liens, dans un menu, qui ouvrent des fichiers dans une fentre du navigateur lorsque l'on clique dessus. Vous pouvez galement cibler une fentre ou un cadre particuliers dans lesquels le document s'ouvrira. Pour plus d'informations, consultez la section Ajout de comportements JavaScript. Voir aussi
240
Utilisation d'assistances visuelles pour la mise en forme

Dfinition de rgles Dfinition de repres de mise en forme Utilisation des repres avec des modles Utilisation de la grille de mise en forme Utilisation d'un trac d'image
Dfinition de rgles
Haut de la page
Les rgles vous aident mesurer, organiser et planifier votre mise en forme. Vous pouvez afficher les rgles gradues en pixels, pouces ou centimtres sur les bords gauche et suprieur de la page. Pour activer et dsactiver les rgles, choisissez Affichage > Rgles > Afficher. Pour changer l'origine, faites glisser l'icne de l'origine de la rgle mode Cration, sur un point de la page. , situe dans le coin suprieur gauche de la fentre de document en
Pour rtablir la position par dfaut de l'origine, choisissez Affichage > Rgles > Rtablir origine. Pour changer d'unit de mesure, choisissez Affichage > Rgles, puis slectionnez Pixels, Pouces ou Centimtres.
Dfinition de repres de mise en forme
Haut de la page
Les repres sont les lignes que vous faites glisser sur le document partir des rgles. Ils vous aident placer et aligner des objets de faon plus prcise Vous pouvez galement utiliser les repres pour mesurer la taille des lments d'une page ou simuler les plis (zones visibles) des navigateurs Web. Pour faciliter l'alignement des lments, vous avez la possibilit de les aligner sur les repres et d'aligner des repres sur des lments. (les lments doivent tre positionnement absolu pour que l'alignement puisse fonctionner). Vous pouvez galement verrouiller les repres pour qu'ils ne soient pas dplacs de faon accidentelle par un autre utilisateur.
Cration d'un repre horizontal ou vertical

1. Faites glisser le repre partir de la rgle correspondante. 2. Positionnez le repre dans la fentre de document et relchez le bouton de la souris (repositionnez le repre en le faisant glisser de nouveau). Remarque : Par dfaut, les repres sont enregistrs en tant que mesures en pixels absolues depuis le ct suprieur ou gauche du document et sont affichs par rapport l'origine de la rgle. Pour enregistrer le repre sous la forme d'un pourcentage, appuyez sur la touche Maj lorsque vous crez ou dplacez le repre.
Affichage ou masquage d'un repre

Choisissez Affichage > Repres > Afficher les repres.
Alignement d'lments sur les repres

Pour aligner des lments sur les repres, slectionnez Affichage > Repres > Magntiser les repres. Pour aligner les repres sur des lments, slectionnez Affichage > Repres > Accrocher les repres aux lments. Remarque : Lorsque vous redimensionnez des lments, tels que des lments positionnement absolu, des tableaux et des images, ils sont aligns sur les repres.
Verrouillage ou dverrouillage de tous les repres

Choisissez Affichage > Repres > Verrouiller les repres.
Affichage et dplacement d'un repre vers une position spcifique

1. Maintenez le pointeur de la souris sur le repre afin d'afficher sa position. 2. Double-cliquez sur le repre. 3. Entrez la nouvelle position dans la bote de dialogue Dplacer le repre et cliquez sur OK.
Affichage de la distance entre les repres

Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) et dplacez le pointeur de la souris n'importe o entre les deux repres.
241
Remarque : L'unit de mesure est la mme que celle utilise pour les rgles.
Simulation du pli (zone visible) d'un navigateur Web

Choisissez Affichage > Repres puis slectionnez une taille de navigateur prdfini dans le menu.
Suppression d'un repre

Faites glisser le repre hors du document.
Modification des paramtres des repres

Slectionnez Affichage > Repres > Modifier les repres, dfinissez les options suivantes et cliquez sur OK. Couleur des repres Indique la couleur des lignes du repre. Cliquez sur la palette de couleurs et choisissez une couleur dans le Slecteur de couleur ou tapez un nombre hexadcimal dans la zone de texte. Couleur distance Indique la couleur des lignes qui apparaissent comme des indicateurs de distance lorsque vous dplacez le pointeur de la souris entre les repres. Cliquez sur la palette de couleurs et choisissez une couleur dans le Slecteur de couleur ou tapez un nombre hexadcimal dans la zone de texte. Afficher les repres Affiche les repres en mode Cration. Magntiser les repres Aligne les lments d'une page sur les repres mesure que vous dplacez ces lments dans la page. Verrouiller les repres Verrouille les repres en place. Accrocher les repres aux lments Aligne les repres sur les lments sur la page mesure que vous faites glisser les repres. Effacer tout Efface tous les repres de la page.
Haut de la page
Utilisation des repres avec des modles
Lorsque des repres sont ajouts un modle Dreamweaver, toutes les instances du modle hritent de ces repres. Les repres des instances de modle sont toutefois traits comme des rgions modifiables par les utilisateurs. Les repres modifis dans les instances de modle sont restaurs leur emplacement d'origine chaque fois que l'instance est mise jour avec le modle principal. Vous pouvez aussi ajouter vos propres repres aux instances d'un modle. Les guides ajouts de cette manire ne sont pas crass lorsque l'instance du modle est mise jour avec le modle principal.
Utilisation de la grille de mise en forme
Haut de la page
La grille affiche un systme de lignes horizontales et verticales dans la fentre de document. Cette fonction est utile pour placer des objets de faon prcise. Vous pouvez aligner automatiquement des lments de page positionnement absolu sur la grille en les dplaant, et changer la grille ou dfinir le comportement d'alignement en indiquant des paramtres spcifiques pour la grille. L'alignement fonctionne, que la grille soit visible ou non.
Affichage ou masquage de la grille

Choisissez Affichage > Grille > Afficher la grille.
Activation ou dsactivation de l'alignement

Choisissez Affichage > Grille > Aligner sur la grille.
Modification des paramtres de la grille

1. Choisissez Affichage > Grille > Paramtres de la grille. 2. Dfinissez les options et cliquez sur OK pour appliquer les modifications. Couleur Spcifie la couleur des lignes de la grille. Cliquez sur la palette de couleurs et choisissez une couleur dans le Slecteur de couleur ou tapez un nombre hexadcimal dans la zone de texte. Afficher la grille Affiche la grille en mode Cration. Aligner sur la grille Permet d'aligner les lments de la page sur les lignes de la grille. Espacement Dtermine l'espacement entre les lignes de la grille. Tapez une valeur et slectionnez Pixels, Pouces ou Centimtres dans le menu. Afficher Dtermine si les lignes de la grille apparaissent sous forme de lignes ou de pointills. Remarque : Si l'option Afficher la grille n'est pas slectionne, la grille n'apparat pas et aucune modification n'est visible.
Utilisation d'un trac d'image
Haut de la page
Vous pouvez utiliser un trac de l'image comme guide pour reproduire une mise en page ayant t cre dans une application graphique telle qu'Adobe Freehand ou Fireworks. Un trac d'image est une image JPG, GIF ou PNG qui apparat l'arrire-plan de la fentre de document. Vous pouvez masquer cette image,
242
dfinir son opacit et la dplacer. Le trac de l'image est uniquement visible dans Dreamweaver ; il n'est pas visible lorsque vous affichez la page dans un navigateur. Lorsque le trac de l'image est visible, les vritables image et couleur d'arrire-plan de la page ne sont pas visibles dans la fentre de document, mais le sont lorsque la page est affiche dans un navigateur.
Placement d'un trac de l'image dans la fentre de document

1. Effectuez l'une des oprations suivantes : Choisissez Affichage > Trac de l'image > Charger. Choisissez Modifier > Proprits de la page, puis cliquez sur le bouton Parcourir situ ct de la zone de texte Trac de l'image. 2. Dans la bote de dialogue Slectionnez la source de l'image, choisissez un fichier d'image puis cliquez sur OK. 3. Dans la bote de dialogue Proprits de la page, dfinissez la transparence de l'image en tirant la glissire Transparence de l'image, puis cliquez sur OK. Pour passer un autre trac ou modifier tout moment la transparence du trac en cours, choisissez Modifier > Proprits de la page.
Affichage ou masquage du trac de l'image

Choisissez Affichage > Trac de l'image > Afficher.
Dplacement d'un trac d'image

Slectionnez Affichage > Trac de l'image > Ajuster la position. Pour dfinir avec prcision la position du trac de l'image, indiquez les valeurs des coordonnes dans les zones de texte X et Y. Pour dplacer l'image par incrments de 1 pixel, utilisez les touches flches. Pour dplacer l'image par incrment de 5 pixels, appuyez simultanment sur la touche Maj et sur l'une des touches flches.
Rtablissement de la position du trac de l'image

Choisissez Affichage > Trac de l'image > Rtablir la position. Le trac de l'image se replace dans le coin suprieur gauche de la fentre de document (0,0).
Alignement du trac de l'image sur un lment slectionn

1. Slectionnez un lment dans la fentre de document. 2. Choisissez Affichage > Trac de l'image > Aligner l'image avec la slection. Le coin suprieur gauche du trac de l'image est align avec le coin suprieur gauche de l'lment slectionn. Voir aussi
243
Utilisation de widgets Spry (instructions gnrales)

A propos des widgets Spry Ressources et didacticiels pour les widgets Spry Insertion d'un widget Spry Slection d'un widget Spry Modification d'un widget Spry Dfinition du style d'un widget Spry Obtention d'autres widgets Modification du dossier par dfaut des actifs Spry
A propos des widgets Spry
Haut de la page
Un widget Spry est un lment de page qui fournit une exprience utilisateur enrichie en permettant l'interaction de l'utilisateur. Un widget Spry comprend les lments suivats : Structure du widget Bloc de code HTML qui dfinit la composition structurelle du widget. Comportement du widget JavaScript qui dtermine comment le widget rpond aux vnements provoqus par l'utilisateur. Style du Widget CSS qui dfinit l'apparence du widget. Le cadre applicatif Spry prend en charge un ensemble de widgets rutilisables rdigs en code HTML, CSS et JavaScript standard. Vous pouvez insrer aisment ces widgets, dont le code est du langage HTML et CSS extrmement simple, puis dfinir le style du widget. Les comportements du cadre applicatif comprennent des fonctionnalits qui permettent aux utilisateurs d'afficher ou de masquer du contenu sur la page, de modifier l'apparence de la page (par exemple sa couleur), d'interagir avec des menus, et bien plus encore. Chaque widget du cadre applicatif Spry est associ des fichiers CSS et JavaScript uniques. Le fichier CSS contient toutes les informations requises pour dfinir le style du widget, alors que le fichier JavaScript lui confre ses fonctionnalits. Lorsque vous insrez un widget l'aide de l'interface Dreamweaver, Dreamweaver lie automatiquement ces fichiers votre page, de sorte que votre widget contienne les fonctionnalits et le style requis. Les fichiers CSS et JavaScript associs un widget sont nomms selon ce dernier. De la sorte, vous saurez aisment quels fichiers correspondent chaque widget. Par exemple, les fichiers associs au widget Accordon sont nomms SpryAccordion.css et SpryAccordion.js. Lorsque vous insrez un widget dans une page enregistre, Dreamweaver cre un rpertoire SpryAssets dans votre site et y place les fichiers JavaScript et CSS correspondants.
Ressources et didacticiels pour les widgets Spry

Les ressources en ligne suivantes fournissent plus d'informations sur la personnalisation des widgets Spry. Exemples de widgets Spry Personnalisation des barres de menus Spry dans Dreamweaver Widgets de validation Spry (didacticiel vido)
Haut de la page
Insertion d'un widget Spry
Haut de la page
Choisissez Insertion > Spry puis slectionnez le widget insrer. Lorsque vous insrez un widget, Dreamweaver ajoute automatiquement les fichiers JavaScript et CSS Spry requis dans votre site lorsque vous enregistrez la page. Remarque : Vous pouvez galement insrer des widgets Spry par l'intermdiaire de la catgorie Spry du panneau Insertion.
Haut de la page
Slection d'un widget Spry

1. Maintenez le pointeur de la souris au-dessus du widget jusqu' ce que le contour bleu du widget soit visible. 2. Cliquez sur l'onglet du widget, dans son coin suprieur gauche.
Modification d'un widget Spry

Slectionnez le widget modifier puis apportez les modifications dsires dans l'inspecteur Proprits (Fentre > Proprits).
244
Haut de la page
Pour plus d'informations sur la modification de widgets spcifiques, consultez les sections relatives chacun d'eux.
Dfinition du style d'un widget Spry
Haut de la page
Accdez le fichier CSS appropri pour le widget dans le dossier SpryAssets de votre site, puis modifiez ce fichier CSS selon vos prfrences. Pour plus d'informations sur la dfinition du style de widgets spcifiques, consultez les sections de personnalisation relatives chacun d'eux. Vous pouvez galement dfinir le style d'un widget Spry en modifiant les styles dans le panneau CSS, comme vous le feriez pour tout autre lment de la page possdant un style.
Obtention d'autres widgets
Haut de la page
Il existe bien d'autres widgets Web que les widgets Spry installs avec Dreamweaver. Le site Adobe Exchange fournit des widgets Web qui ont t conus par d'autres professionnels. Choisissez Rechercher des widgets Web dans le menu Etendre Dreamweaver de la barre Application. Vous trouverez un didacticiel vido sur l'utilisation des widgets Web, ralis par l'quipe de Dreamweaver, l'adresse www.adobe.com/go/dw10widgets_fr.
Modification du dossier par dfaut des actifs Spry
Haut de la page
Lorsque vous insrez un widget, un jeu de donnes ou un effet Spry dans une page enregistre, Dreamweaver cre un rpertoire SpryAssets dans votre site et y place les fichiers JavaScript et CSS correspondants. Vous pouvez modifier l'emplacement par dfaut o Dreamweaver enregistre les actifs Spry si vous prfrez les enregistrer ailleurs. 1. Choisissez Site > Grer les sites. 2. Slectionnez votre site dans la bote de dialogue Grer les sites, puis cliquez sur Modifier. 3. Dans la bote de dialogue Configuration du site, dveloppez Paramtres avancs, puis slectionnez la catgorie Spry. 4. Entrez le chemin d'accs au dossier utiliser pour les actifs Spry, puis cliquez sur OK. Vous pouvez galement cliquer sur l'icne du dossier afin d'accder l'emplacement dsir. Voir aussi Description des feuilles de style en cascade
245
Utilisation des balises div

Insertion et modification de balises div Blocs de mise en forme CSS Utilisation d'lments PA (Utilisateurs de Creative Cloud uniquement) : Sept nouvelles balises smantiques sont disponibles lorsque vous choisissez Insertion > Mise en page. Ces nouvelles balises sont : Article, Aside, HGroup, Navigation, Section, Header et Footer. Pour plus d'informations, voir Insertion d'lments smantiques HTML5 depuis le panneau Insertion.
Insertion et modification de balises div
Haut de la page
Vous pouvez crer des mises en page en insrant manuellement des balises div et en leur appliquant des styles de positionnement CSS. Une balise div est une balise qui dfinit les divisions logiques dans le contenu d'une page Web. Vous pouvez utiliser des balises div pour centrer des blocs de contenu, crer des effets de colonne, crer diffrentes zones de couleur, etc. Si vous ne connaissez pas bien l'utilisation des balises div et des feuilles de style CSS pour crer des pages Web, vous pouvez crer une mise en forme CSS partir de l'une des mises en forme prdfinies fournies avec Dreamweaver. Si vous n'tes pas l'aise dans l'utilisation des feuilles de style CSS, mais que vous connaissez bien l'utilisation des tableaux, vous pouvez galement essayer d'utiliser des tableaux. Remarque : Dreamweaver considre comme des lments positionnement absolu (lments PA) toutes les balises div, mme si vous n'avez pas cr ces balises div l'aide de l'outil de dessin Div PA.
Insertion de balises div

Vous pouvez utiliser des balises div pour crer des blocs de mise en forme CSS et les placer dans votre document. Cette mthode est utile si une feuille de style CSS existante contenant des styles de positionnement est associe votre document. Dreamweaver vous permet d'insrer rapidement une balise div et de lui appliquer des styles existants. 1. Dans la fentre de document, placez le point d'insertion l'endroit o vous voulez insrer la balise div. 2. Effectuez l'une des oprations suivantes : Choisissez Insertion > Objets mise en forme > Balise Div. Dans la catgorie Mise en forme du panneau Insertion, cliquez sur le bouton Insrer la balise Div .
3. Parmi les options suivantes, dfinissez celles de votre choix : Insrer Permet de choisir l'emplacement de la balise div et le nom de la balise s'il ne s'agit pas d'une nouvelle. Classe Affiche le style de classe actuellement appliqu la balise. Si vous avez associ une feuille de style, les classes qui y sont dfinies s'affichent dans la liste. Ce menu permet de slectionner le style appliquer la balise. ID Vous permet de modifier le nom utilis pour identifier la balise div. Si vous avez associ une feuille de style, les ID qui y sont dfinis s'affichent dans la liste. Les ID des blocs dj prsents dans votre document ne sont pas rpertoris. Remarque : Dreamweaver vous avertit si vous tapez un ID dj affect une autre balise dans votre document. Nouvelle rgle de CSS Ouvre la bote de dialogue Nouvelle rgle CSS. 4. Cliquez sur OK. La balise div s'affiche dans votre document sous la forme d'une zone contenant du texte d'espace rserv. Lorsque vous dplacez le pointeur sur le bord de cette zone, Dreamweaver la met en surbrillance. Si la balise div est place de manire absolue, elle devient un lment PA. Vous pouvez modifier les balises div qui ne sont pas positionnement absolu.
Modification des balises div

Aprs avoir insr une balise div, vous pouvez la manipuler ou lui ajouter du contenu. Remarque : Les balises div qui sont positionnes de manire absolue deviennent des lments PA. Les balises div ont des bordures visibles lorsque vous leur attribuez des bordures ou lorsque vous avez slectionn Contours en feuille CSS. (L'option Contours en feuille CSS est slectionne par dfaut dans le menu Affichage > Assistances visuelles.) Lorsque vous faites passer le pointeur sur une balise div, Dreamweaver la met en surbrillance. Vous pouvez modifier la couleur de la mise en surbrillance ou dsactiver la mise en surbrillance. Lorsque vous slectionnez une balise div, vous pouvez afficher et modifier les rgles correspondantes dans le panneau Styles CSS. Vous pouvez aussi ajouter du contenu la balise div : placez simplement le point d'insertion l'intrieur de la balise div, puis procdez l'ajout du contenu
246
comme vous le feriez pour celui d'une page. Affichage et modification des rgles appliques une balise div 1. Procdez de l'une des manires suivantes pour slectionner la balise div : Cliquez sur la bordure de la balise div. Recherchez la surbrillance afin de voir les bordures. Cliquez l'intrieur de la balise div et appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh) deux reprises. Cliquez l'intrieur de la balise div, puis slectionnez-la partir du slecteur de balises figurant au bas de la fentre du document. 2. Choisissez Fentre > Styles CSS pour afficher le panneau Styles CSS, si besoin est. Les rgles appliques la balise div s'affichent dans le panneau. 3. Effectuez les modifications ncessaires. Placement du point d'insertion dans une balise div afin d'y ajouter du contenu Cliquez n'importe o l'intrieur des bordures de la balise. Modification du texte de l'espace rserv dans une balise div Slectionnez le texte, puis tapez un nouveau texte par-dessus ou appuyez sur la touche Suppr. Remarque : Vous pouvez ajouter du contenu la balise div exactement comme vous le feriez dans une page.
Modification de la couleur de surbrillance des balises div

Lorsque vous faites passer le pointeur sur le pourtour d'une balise div en mode Cration, Dreamweaver met ses bordures en surbrillance. Vous pouvez activer ou dsactiver la surbrillance votre convenance ou en modifier la couleur de surbrillance dans la bote de dialogue Prfrences. 1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2. Slectionnez la catgorie Surbrillance dans la liste de gauche. 3. Effectuez l'une des modifications suivantes, puis cliquez sur OK : Pour modifier la couleur de surbrillance des balises div, cliquez dans la case de couleur Survol et slectionnez une couleur de surbrillance l'aide du slecteur de couleur (ou tapez la valeur hexadcimale correspondant la couleur de surbrillance dans la zone de texte). Pour activer ou dsactiver la surbrillance des balises div, activez ou dsactivez la case cocher Afficher de l'option Survol. Remarque : Ces options ont un impact sur tous les objets (tableaux, par exemple) que Dreamweaver met en surbrillance lorsque vous y dplacez le pointeur.
Blocs de mise en forme CSS

Visualisation des blocs de mise en forme CSS
Haut de la page
Vous pouvez visualiser les blocs de mise en forme CSS pendant que vous travaillez en mode Cration. Un bloc de mise en forme CSS est un lment de page HTML que vous pouvez positionner n'importe o sur votre page. Un bloc de mise en forme CSS est plus prcisment soit une balise div sans display:inline, soit un autre lment de page qui inclut les dclarations CSS display:block, position:absolute ou position:relative. Les lments suivants, par exemple, sont considrs comme des blocs de mise en forme CSS dans Dreamweaver: Une balise div Une image laquelle est affecte une position relative ou absolue Une balise a laquelle le style display:block est affect. Un paragraphe auquel une position relative ou absolue est affecte Remarque : Pour des raisons de rendu visuel, les blocs de mise en forme CSS n'incluent pas d'lments en ligne (c'est--dire d'lments dont le code est dfini dans une ligne de texte) ni d'lments de blocs simples tels que des paragraphes. Dreamweaver fournit de nombreuses assistances visuelles pour afficher les blocs de mise en forme CSS. Vous pouvez par exemple activer des contours, des arrire-plans et le modle de bote pour les blocs de mise en forme CSS en mode Cration. Vous pouvez aussi afficher des infobulles qui indiquent les proprits du bloc de mise en forme CSS slectionn lorsque vous placez le pointeur dessus. La liste suivante d'assistances visuelles de bloc de mise en forme CSS dcrit ce que Dreamweaver rend visible pour chacune d'elles : Contours en feuille CSS Affiche les contours de tous les blocs de mise en forme CSS sur la page. Arrire-plans de mise en forme CSS Affiche les couleurs d'arrire-plan affectes temporairement de chaque bloc de mise en forme CSS et masque toutes les autres couleurs d'arrire-plan ou images qui apparaissent normalement sur la page. Lorsque vous activez les assistances visuelles pour afficher les arrire-plans de blocs de mise en forme CSS, Dreamweaver affecte automatiquement une couleur d'arrire-plan distincte chaque bloc de mise en forme CSS. ((Dreamweaver slectionne les couleurs l'aide d'un
247
processus algorithmique. Vous n'avez aucun moyen d'attribuer vous-mme les couleurs.) Les couleurs attribues sont visuellement diffrentes et sont conues pour vous aider distinguer les blocs de mise en forme CSS les uns des autres. Modle de bote de mise en forme CSS Affiche le modle de bote (remplissages et marges) du bloc de mise en forme CSS slectionn.
Affichage des blocs de mise en forme CSS

Vous pouvez activer ou dsactiver les assistances visuelles des blocs de calques CSS en fonction des besoins. Affichage des contours des blocs de mise en forme CSS Choisissez Affichage > Assistances visuelles > Contours en feuille CSS. Affichage des arrire-plans de blocs de mise en forme CSS Choisissez Affichage > Assistances visuelles > Arrire-plans de mise en forme CSS. Affichage des modles de bote de blocs de mise en forme CSS Choisissez Affichage > Assistances visuelles > Modle de bote de mise en forme CSS. Pour accder aux options d'assistances visuelles des blocs de mise en forme CSS, vous pouvez aussi cliquer sur le bouton Assistances visuelles de la barre d'outils du document.
Utilisation des assistances visuelles avec des lments de blocs de mise en forme non-CSS
Vous pouvez utiliser une feuille de style la conception pour afficher les arrire-plans, les bordures ou le modle de bote d'lments qui ne sont pas normalement considrs comme des blocs de mise en forme CSS. Pour ce faire, vous devez d'abord crer une feuille de style la conception qui affecte l'attribut display:block l'lment de page appropri. 1. Crez une feuille de style en cascade (CSS) externe. Pour ce faire, choisissez Fichier > Nouveau, puis slectionnez Page de base dans la colonne Catgorie et CSS dans la colonne Page de base. Cliquez ensuite sur Crer. 2. Dans la nouvelle feuille de style, crez des rgles qui affectent l'attribut display:block aux lments de page afficher en tant que blocs de mise en forme CSS. Si, par exemple, vous souhaitez appliquer une couleur d'arrire-plan aux paragraphes ou aux lments de liste, vous pouvez crer une feuille de style comprenant les rgles suivantes : p{ display:block; } li{ display:block; } 3. Enregistrez le fichier. 4. En mode Cration, ouvrez la page laquelle vous souhaitez associer les nouveaux styles. 5. Choisissez Format > Styles CSS > Conception. 6. Dans la bote de dialogue Feuilles de style la conception, cliquez sur le bouton plus (+) situ au-dessus de la zone de texte Afficher la conception uniquement, slectionnez la feuille de style que vous venez de crer et cliquez sur OK. 7. Cliquez sur OK pour fermer la bote de dialogue Feuilles de style la conception. La feuille de style est associe votre document. Si vous avez cr une feuille de style en suivant l'exemple prcdent, tous les paragraphes et lments de liste seront formats au moyen de l'attribut display:block. Vous pouvez ainsi activer ou dsactiver les assistances visuelles de bloc de mise en forme CSS pour les paragraphes et les lments de liste.
Utilisation d'lments PA
A propos des lments PA dans Dreamweaver
Haut de la page
Un lment PA (lment positionnement absolu) est un lment de page HTML (plus prcisment, une balise div ou toute autre balise) auquel une position absolue est attribue. Les lments PA peuvent comporter du texte, des images ou tout autre contenu placer au sein d'un document HTML. Dreamweaver vous permet d'effectuer la mise en forme d'une page l'aide d'lments PA. Vous pouvez placer les lments PA devant ou derrire d'autres lments PA, masquer certains d'entre eux et en montrer d'autres ou encore dplacer les lments PA travers l'cran. Vous pouvez placer une image d'arrire-plan dans un lment PA, puis placer un deuxime lment PA contenant du texte avec un arrire-plan transparent devant ce dernier. Les lments PA sont gnralement des balises div PA. (Ce sont les types d'lments PA que Dreamweaver insre par dfaut.) Mais n'oubliez pas que vous pouvez classifier tout lment HTML (par exemple, une image) en tant qu'lment PA en lui affectant une position absolue. Tous les lments PA (et pas uniquement les balises div PA) s'affichent dans le panneau Elments PA.
248
Code HTML pour lments div PA

Dreamweaver cre des lments PA en utilisant la balise div. Lorsque vous crez un lment PA l'aide de l'outil Tracer un div pour un lment PA, Dreamweaver insre une balise div dans le document et attribue la balise div une valeur ID (DivAP1 par dfaut au premier div que vous tracez, DivAP2, au deuxime div que vous tracez, etc.). Vous pouvez renommer la div PA votre guise par la suite au moyen du panneau Elments PA ou de l'inspecteur Proprits. Dreamweaver utilise galement des styles CSS intgrs dans la section head du document pour positionner la balise div PA et pour lui affecter ses dimensions exactes. Ce qui suit est un chantillon de code HTML pour une div PA : <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Sample AP Div Page</title> <style type="text/css"> <!-#apDiv1 { position:absolute; left:62px; top:67px; width:421px; height:188px; z-index:1; } --> </style> </head> <body> <div id="apDiv1"> </div> </body> </html> Vous pouvez dfinir les proprits des balises div PA (ou tout lment PA) de votre page, y compris les coordonnes x et y, l'index z (galement appel ordre de superposition) et la visibilit.
Insertion d'une balise div PA

Dreamweaver vous permet de crer facilement des balises div PA sur votre page et de les positionner. Vous pouvez galement crer des balises div PA imbriques. Lorsque vous insrez une div PA, Dreamweaver affiche par dfaut sa bordure en mode Cration et met le bloc en surbrillance lorsque vous passez le pointeur dessus. Vous pouvez dsactiver l'assistance visuelle qui affiche les contours des divs PA (ou de tout lment PA) en dsactivant Contours des lments PA et Contours en feuille CSS dans le menu Affichage > Assistances visuelles. Vous pouvez galement activer les arrire-plans et le modle de bote pour les lments PA en guise d'aide visuelle lors de la conception. Une fois une balise div PA cre, vous pouvez y ajouter du contenu en plaant simplement votre point d'insertion dessus, puis en ajoutant le contenu comme vous le feriez pour celui d'une page. Traage d'une seule balise div PA ou de plusieurs balises div PA la suite 1. Dans la catgorie Mise en forme du panneau Insertion, cliquez sur le bouton Tracer un div pour un lment PA 2. Dans la fentre de cration du document, procdez de l'une des manires suivantes : Faites glisser le pointeur pour dessiner une seule div PA. Maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfonce pour dessiner plusieurs divs PA la suite. Vous pouvez continuer tracer des divs PA tant que vous n'avez pas relch les touches Ctrl ou Commande. Insertion d'une div PA un endroit prcis du document Placez le point d'insertion dans la fentre de document, puis choisissez Insertion > Objets mise en forme > Div PA. Remarque : La balise associe la div PA est place l'emplacement sur lequel vous avez cliqu dans la fentre de document. Le rendu visuel de la balise div PA est donc susceptible d'affecter les autres lments de page (le texte par exemple) qui l'entourent. Placement du point d'insertion dans une div PA Cliquez n'importe o l'intrieur des bordures de la balise div PA. Le contour de la div PA est en surbrillance et la poigne de slection apparat, mais la balise elle-mme n'est pas slectionne. Affichage des bordures d'une div PA
249
Choisissez Affichage > Assistances visuelles, puis slectionnez Contours des divs PA ou Contours en feuille CSS. Remarque : La slection simultane des deux options a le mme effet. Masquage des bordures d'une div PA Choisissez Affichage > Assistances visuelles, puis dslectionnez Contours des divs PA et Contours en feuille CSS.
Utilisation de divs PA imbriques

Une div PA imbrique est une balise div PA dont le code est contenu l'intrieur des balises d'une autre div PA. Par exemple, le code suivant montre deux div PA qui ne sont pas imbriques, et deux divs PA qui le sont : <div id="apDiv1"></div> <div id="apDiv2"></div> <div id="apDiv3"> <div id="apDiv4"></div> </div> La reprsentation graphique de ces deux groupes de balises div PA pourrait ressembler ce qui suit :
Dans le premier groupe de balises div, une div se trouve au dessus de l'autre dans la page. Dans le deuxime groupe, la balise div apDiv4 se trouve effectivement l'intrieur de la balise div apDiv3. (Vous pouvez modifier l'ordre de superposition des divs PA dans le panneau Elments PA.) L'imbrication est souvent utilise pour regrouper des balises div PA. Une balise div PA imbrique se dplace avec sa div PA parent et peut tre configure pour hriter de la visibilit de son parent. Vous pouvez activer l'option Imbrication si vous voulez que les divs PA que vous dessinez l'intrieur d'autres div PA soient automatiquement imbriques. Pour crer une div PA l'intrieur ou par dessus une autre div PA, vous devez aussi dslectionner l'option Empcher les chevauchements. Dessin d'une div PA imbrique 1. Assurez-vous que l'option Empcher les chevauchements est dslectionne dans le panneau Elments PA (Fentre > Elments PA). 2. Dans la catgorie Mise en forme du panneau Insertion, cliquez sur le bouton Tracer un div pour un lment PA .
3. Dans la fentre de cration du document, dessinez une balise div PA l'intrieur d'une div PA existante en faisant glisser la souris. Si l'option Imbrication est dsactive dans les prfrences des lments PA, maintenez la touche Alt (Windows) ou Option (Macintosh) enfonce et faites glisser une div PA pour l'imbriquer dans une div PA existante. Les divs PA imbriques peuvent s'afficher diffremment suivant les navigateurs. Lorsque vous crez des divs PA imbriques, contrlez rgulirement leur affichage dans diffrents navigateurs au cours du processus de cration. Insertion d'une div PA imbrique 1. Assurez-vous que l'option Empcher les chevauchements est dslectionne. 2. Placez le point d'insertion l'intrieur d'une div PA existante dans la fentre de cration du document, puis choisissez Insertion > Objets mise en forme > Div PA. Imbrication des balises div PA automatiquement lorsque vous dessinez une div PA l'intrieur d'une autre div PA Slectionnez l'option Imbrication dans les prfrences des lments PA.
Affichage ou dfinition des prfrences des lments PA

Utilisez la catgorie Elments PA dans la bote de dialogue Prfrences pour indiquer les paramtres par dfaut des nouveaux lments PA crs. 1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2. Slectionnez la catgorie Elments PA dans la liste gauche, slectionnez des lments PA et dfinissez les prfrences suivantes, puis
250
cliquez sur OK. Visibilit Dtermine si les lments PA sont visibles par dfaut. Les options sont par dfaut, hriter, visible et masqu. Largeur et Hauteur Indiquez une largeur et une hauteur par dfaut (en pixels) pour les lments PA que vous crez l'aide du menu Insertion > Objets mise en forme > Div PA. Couleur d'arrire-plan Spcifie une couleur d'arrire-plan par dfaut. Slectionnez une couleur l'aide du slecteur de couleur. Image d'arrire-plan Spcifie une image d'arrire-plan par dfaut. Cliquez sur Parcourir pour trouver le fichier de l'image sur votre ordinateur. Imbrication: Imbriquer en cas de cration dans une div PA Indique si une div PA que vous dessinez partir d'un point situ dans les limites d'une div PA existante doit tre une div PA imbrique. Maintenez la touche Alt (Windows) ou Option (Macintosh) enfonce pour modifier temporairement ce paramtre lorsque vous dessinez une div PA.
Affichage ou dfinition des proprits pour un seul lment PA

Lorsque vous slectionnez un lment PA, l'inspecteur Proprits affiche les proprits de cet lment. 1. Slectionnez un lment PA. 2. Dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur la flche d'agrandissement situe dans le coin infrieur droit (si l'inspecteur est affich en mode rduit) pour visualiser l'ensemble des proprits.
3. Parmi les options suivantes, dfinissez celles de votre choix : Elment CSS-P Spcifie un identificateur pour l'lment PA slectionn. Cet ID identifie l'lment PA dans le panneau Elments PA et dans le code JavaScript. Seuls les caractres alphanumriques sont accepts ; n'utilisez aucun caractre spcial comme les espaces, les traits d'union, les barres obliques ou les points. Chaque lment PA doit avoir un ID unique. Remarque : L'inspecteur Proprits CSS-P prsente les mmes options pour les lments positionnement relatif. G et S (gauche et haut) Indiquez la position du coin suprieur gauche de l'lment PA par rapport au coin suprieur gauche de la page, ou de l'lment PA parent s'il est imbriqu. L et H Indiquez la largeur et la hauteur de l'lment PA. Remarque : Si le contenu d'un lment PA dpasse la taille indique, le bord infrieur de cet lment PA (tel qu'il apparat en mode Cration dans Dreamweaver) s'tire proportionnellement. (Le bord infrieur ne s'tend pas lorsque l'lment PA apparat dans un navigateur, sauf si la proprit Dbordement est dfinie sur Visible). L'unit par dfaut de la position et de la taille est le pixel (px). Vous pouvez galement choisir les units suivantes : pc (picas), pt (points), in (pouces), mm (millimtres), cm (centimtres) ou% (pourcentage de la valeur quivalente de l'lment PA parent). Les abrviations doivent suivre la valeur sans espace : par exemple, 3mm. Index Z Dtermine l'index z ou ordre de superposition, de l'lment PA. Dans un navigateur, les lments PA portant les valeurs les plus leves se superposent aux lments PA portant les valeurs moins leves. Les valeurs peuvent tre positives ou ngatives. Il est plus facile de modifier l'ordre de superposition des lments PA l'aide du panneau Elments PA qu'en saisissant des valeurs d'index z spcifiques. Vis Indique si l'lment PA est initialement visible ou non. Faites votre choix parmi les options suivantes : Aucune proprit de visibilit n'est dfinie par dfaut. Lorsque aucune visibilit n'est prcise, la plupart des navigateurs choisissent Hriter. L'option Hriter utilise la proprit de visibilit de l'objet parent de l'lment PA. Visible affiche le contenu de l'lment PA, quelle que soit la valeur du parent. Masqu dissimule le contenu de l'lment PA, quelle que soit la valeur du parent. Utilisez un langage de script, par exemple JavaScript, pour contrler la proprit de visibilit et afficher le contenu des lments PA de faon dynamique. Image ar-pl Spcifie une image d'arrire-plan pour l'lment PA. Cliquez sur l'icne du dossier parcourir et slectionnez un fichier d'image. Couleur d'ar-pl. Spcifie une couleur d'arrire-plan pour l'lment PA. Laissez cette option vide pour spcifier un arrire-plan transparent. Classe Indique la classe CSS utilise pour crer l'lment PA. Dbordement Contrle la manire dont les lments PA apparaissent dans un navigateur lorsque le contenu dpasse la taille spcifie de l'lment PA.
251
Visible indique que le contenu supplmentaire apparatra dans l'lment PA ; en fait, l'lment PA s'agrandit proportionnellement. Masqu signifie que le contenu supplmentaire ne sera pas affich dans le navigateur. Dfilement indique que le navigateur devra ajouter des barres de dfilement dans l'lment PA, qu'elles soient ncessaires ou non. Auto entrane l'affichage des barres de dfilement de l'lment PA dans le navigateur uniquement lorsque cela est ncessaire (c'est--dire lorsque le contenu de l'lment PA dpasse ses limites). Remarque : La prise en charge de l'option Dbordement est ingale suivant les navigateurs. Dtourage Dfinit la zone visible de l'lment PA. Indiquez les coordonnes gauche, haut, droite et bas pour dfinir un rectangle dans le champ des coordonnes de l'lment PA (en partant du coin suprieur gauche de l'lment PA). L'lment PA est dtour afin que seul le rectangle spcifi soit visible. Par exemple, pour rendre le contenu d'un lment PA invisible l'exception d'un rectangle visible d'une largeur de 50 pixels et d'une hauteur de 75 pixels dans le coin suprieur gauche de l'lment PA, dfinissez G sur 0, S sur 0, D sur 50 et B sur 75. Remarque : Bien que les feuilles de style en cascade utilisent des termes diffrents pour le dtourage, Dreamweaver interprte le dtourage de la mme manire que la plupart des navigateurs. 4. Si vous avez tap une valeur dans une zone de texte, appuyez sur Tab ou Entre (Windows) ou Retour (Macintosh) pour l'appliquer.
Affichage ou dfinition des proprits pour plusieurs lments PA

Lorsque vous slectionnez plusieurs lments PA, l'inspecteur Proprits affiche les proprits du texte et un sous-ensemble de proprits d'lment PA standard, ce qui vous permet de modifier plusieurs lments PA simultanment. Slection de plusieurs lments PA Slectionnez les lments PA tout en maintenant la touche Maj enfonce. Affichage et dfinition des proprits pour plusieurs lments PA 1. Slectionnez plusieurs lments PA. 2. Dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur la flche d'agrandissement situe dans le coin infrieur droit (si l'inspecteur est affich en mode rduit) pour visualiser l'ensemble des proprits.
3. Dfinissez les proprits suivantes pour plusieurs lments PA : G et S (gauche et haut) Indiquez la position du coin suprieur gauche des lments PA par rapport au coin suprieur gauche de la page, ou de l'lment PA parent s'ils sont imbriqus. L et H Indiquez la largeur et la hauteur des lments PA. Remarque : Si le contenu de l'un des lments PA dpasse la taille indique, le bord infrieur de cet lment PA (tel qu'il apparat en mode Cration dans Dreamweaver) s'tire proportionnellement. (Le bord infrieur ne s'tend pas lorsque l'lment PA apparat dans un navigateur, sauf si la proprit Dbordement est dfinie sur Visible). L'unit par dfaut de la position et de la taille est le pixel (px). Vous pouvez galement choisir les units suivantes : pc (picas), pt (points), in (pouces), mm (millimtres), cm (centimtres) ou% (pourcentage de la valeur quivalente de l'lment PA parent). Les abrviations doivent suivre la valeur sans espace : par exemple, 3mm. Vis Indique si les lments PA sont initialement visibles ou non. Faites votre choix parmi les options suivantes : Aucune proprit de visibilit n'est dfinie par dfaut. Lorsque aucune visibilit n'est prcise, la plupart des navigateurs choisissent Hriter. L'option Hriter utilise la proprit de visibilit de l'objet parent des lments PA. Visible affiche le contenu des lments PA, quelle que soit la valeur du parent. Masqu dissimule le contenu de l'lment PA, quelle que soit la valeur du parent. Utilisez un langage de script, par exemple JavaScript, pour contrler la proprit de visibilit et afficher le contenu des lments PA de faon dynamique. Balise Indique la balise HTML utilise pour dfinir les lments PA. Image ar-pl Spcifie une image d'arrire-plan pour les lments PA. Cliquez sur l'icne du dossier parcourir et slectionnez un fichier d'image. Couleur d'ar-pl. Spcifie une couleur d'arrire-plan pour les lments PA. Laissez cette option vide pour spcifier un arrire-plan transparent. 4. Si vous avez tap une valeur dans une zone de texte, appuyez sur Tab ou Entre (Windows) ou Retour (Macintosh) pour l'appliquer.
252
Prsentation du panneau Elments PA

Le panneau Elments PA (Fentre > Elments PA) vous permet de grer les lments PA de votre document. Utilisez le panneau Elments PA pour empcher les lments PA de se chevaucher, pour en modifier la visibilit, pour les imbriquer ou les superposer et pour en slectionner un ou plusieurs. Remarque : Dans Dreamweaver, un lment PA est un lment de page HTML (plus prcisment, une balise div ou toute autre balise) auquel une position absolue est attribue. Le panneau Elments PA n'affiche pas les lments positionnement relatif. Les lments PA sont affichs sous la forme d'une liste de noms, dans l'ordre de l'index z ; le premier lment PA cr (dot d'un index z de 1) apparat par dfaut en bas de la liste et le dernier lment PA cr apparat en haut de la liste. Vous pouvez toutefois modifier l'index z d'un lment PA en changeant sa place dans l'ordre de superposition. Par exemple, si vous crez huit lments PA et souhaitez dplacer le quatrime lment PA en haut de la liste, vous pouvez lui affecter un index z suprieur celui des autres lments PA.
Slection d'lments PA
Vous pouvez slectionner un ou plusieurs lments PA pour les manipuler ou en modifier les proprits. Slection d'un lment PA dans le panneau Elments PA Dans le panneau Elments PA (Fentre > Elments PA), cliquez sur le nom de l'lment PA. Slection d'un lment PA dans la fentre de document Effectuez l'une des oprations suivantes : Cliquez sur la poigne de slection d'un lment PA. Si la poigne n'est pas visible, cliquez n'importe o dans l'lment PA pour la faire apparatre. Cliquez sur une bordure d'un lment PA. Cliquez l'intrieur d'un lment PA en appuyant sur les touches Ctrl et Maj (Windows) ou Commande et Maj (Macintosh). Pour slectionner le contenu d'un lment PA, cliquez l'intrieur de celui-ci et appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh). Appuyez nouveau sur Ctrl+A ou Commande+A pour slectionner l'lment PA. Cliquez l'intrieur d'un lment PA et slectionnez sa balise dans le slecteur de balises. Slection de plusieurs lments PA Effectuez l'une des oprations suivantes : Dans le panneau Elments PA (Fentre > Elments PA), appuyez sur la touche Maj tout en cliquant sur le nom de deux lments PA ou plus. Dans la fentre de document, appuyez sur la touche Maj tout en cliquant l'intrieur d'un ou de plusieurs lments PA ou sur leur bordure.
Modification de l'ordre de superposition des lments PA

Utilisez l'inspecteur Proprits ou le panneau Elments PA pour modifier l'ordre de superposition des lments PA. L'lment PA situ en haut de la liste du panneau Calques Elments PA se trouve au premier rang de l'ordre de superposition et apparat avant les autres lments PA. En code HTML, l'ordre de superposition, ou index z, des lments PA dtermine l'ordre dans lequel ils sont dessins dans un navigateur. Plus l'index z d'un lment PA est lev, et plus sa position dans l'ordre de superposition est leve. (Par exemple, un lment avec un index z de 4 apparatra au-dessus d'un lment avec un index z de 3. 1 est toujours le numro le plus bas dans l'ordre d'empilement.) Vous pouvez modifier l'index z de chaque lment PA l'aide du panneau Elments PA ou de l'inspecteur Proprits. Modification de l'ordre de superposition des lments PA l'aide du panneau Elments PA 1. Slectionnez Fentre > Elments PA pour ouvrir le panneau Elments PA. 2. Double-cliquez sur le numro d'index z en regard de l'lment PA dont vous souhaitez modifier l'index z. 3. Modifiez le numro puis appuyez sur la touche Retour/Entre. Tapez une valeur suprieure afin de dplacer l'lment PA vers le haut dans l'ordre de superposition. Tapez une valeur infrieure afin de dplacer l'lment PA vers le bas dans l'ordre de superposition. Modification de l'ordre de superposition des lments PA l'aide de l'inspecteur Proprits 1. Choisissez Fentre > Elments PA pour ouvrir le panneau Elments PA et visualiser l'ordre de superposition en cours. 2. Dans le panneau Elments PA ou dans la fentre de document, slectionnez l'lment PA dont vous souhaitez modifier l'index z. 3. Dans l'inspecteur Proprits (Fentre > Proprits), tapez un nombre dans la zone de texte Index Z. Tapez une valeur suprieure afin de dplacer l'lment PA vers le haut dans l'ordre de superposition. Tapez une valeur infrieure afin de dplacer l'lment PA vers le bas dans l'ordre de superposition.
253
Affichage et masquage des lments PA

Lorsque vous travaillez sur votre document, vous pouvez afficher ou masquer les lments PA manuellement, l'aide du panneau Elments PA, pour voir comment la page apparatra dans diffrentes situations. Remarque : L'lment PA actuellement slectionn devient toujours visible et apparat devant les autres lments PA. Modification de la visibilit d'un lment PA 1. Slectionnez Fentre > Elments PA pour ouvrir le panneau Elments PA. 2. Cliquez dans la colonne de l'icne en forme d'oeil pour changer la visibilit d'un lment PA. Un oeil ouvert signifie que l'lment PA est visible. Un oeil ferm signifie que l'lment PA est invisible. Si l'icne de l'oeil n'apparat pas, l'lment PA hrite de la visibilit de son parent (lorsque les lments PA ne sont pas imbriqus, le parent correspond au corps du document, qui est toujours visible). Aucune icne en forme d'oeil ne s'affiche lorsque la visibilit n'est pas indique (apparat dans l'inspecteur Proprits comme Visibilit par dfaut). Modification de la visibilit de tous les lments PA la fois Dans le panneau Elments PA (Fentre > Calques), cliquez sur l'icne en forme d'il en haut de la colonne. Remarque : Cette procdure permet de dfinir la visibilit ou la non-visibilit de tous les lments PA, mais elle ne leur permet pas d'hriter.
Redimensionnement des lments PA

Vous pouvez redimensionner un seul ou plusieurs lments PA la fois pour qu'ils aient tous la mme largeur et la mme hauteur. Si l'option Empcher le chevauchement est active, vous ne pourrez pas redimensionner un lment PA s'il doit pour cela en chevaucher un autre. Redimensionnement d'un lment PA 1. En mode Cration, slectionnez un lment PA. 2. Pour redimensionner l'lment PA, procdez de l'une des manires suivantes : Pour redimensionner l'lment PA en le faisant glisser, faites glisser l'une de ses poignes. Pour redimensionner l'lment PA par incrments d'un pixel, maintenez la touche Ctrl (Windows) ou Option (Macintosh) enfonce tout en utilisant les touches flches. Les flches dplacent les bords droit et infrieur de l'lment PA ; cette technique ne permet pas de redimensionner l'lment PA en utilisant les bords suprieur et gauche. Pour redimensionner en alignant sur la grille, appuyez sur Maj-Ctrl-flche (Windows) ou Maj-Option-flche (Macintosh). Dans l'inspecteur Proprits (Fentre > Proprits), tapez les valeurs de largeur (L) et de hauteur (H). Le redimensionnement d'un lment PA en modifie la largeur et la hauteur. Cette action ne dfinit pas la partie visible du contenu de l'lment PA. Vous pouvez dfinir la zone visible d'un lment PA dans les prfrences. Redimensionnement de plusieurs lments PA la fois 1. En mode Cration, slectionnez au moins deux lments PA. 2. Effectuez l'une des oprations suivantes : Choisissez Modifier > Rorganiser > Mme largeur ou Modifier > Rorganiser > Mme hauteur. Les premiers lments PA slectionns prendront la largeur ou la hauteur du dernier slectionn. Dans l'inspecteur Proprits (Fentre > Proprits), sous Plusieurs lments CSS-P, tapez les valeurs de largeur et de hauteur. Ces valeurs sont appliques tous les lments PA slectionns.
Dplacement des lments PA

Vous pouvez dplacer les lments PA en mode Cration de la mme manire que les objets dans la plupart des applications graphiques de base. Si l'option Empcher le chevauchement est active, vous ne pourrez pas dplacer un lment PA s'il doit pour cela en chevaucher un autre. 1. En mode Cration, slectionnez un ou plusieurs lments PA. 2. Effectuez l'une des oprations suivantes : Pour dplacer des lments PA en les faisant glisser, slectionnez-les et faites glisser la poigne de slection du dernier lment PA slectionn (en surbrillance noire). Pour dplacer l'image par incrments d'un pixel, utilisez les touches flches.
254
Maintenez la touche Maj enfonce tout en appuyant sur les touches flches pour dplacer l'lment PA par incrments de la grille.
Alignement des lments PA

Utilisez les commandes d'alignement pour aligner un ou plusieurs lments PA sur l'un des bords du dernier lment PA slectionn. Lors de l'alignement, les lments PA enfants qui ne sont pas slectionns seront dplacs en mme temps que leur parent, si celui-ci est slectionn et dplac. Pour viter ce dplacement, n'utilisez pas d'lments PA imbriqus. 1. En mode Cration, slectionnez un lment PA. 2. Choisissez Modifier > Rorganiser, puis slectionnez une option d'alignement. Par exemple, si vous slectionnez Haut, tous les lments PA se dplacent de faon telle que leurs bordures suprieures sont au mme niveau que celle du dernier lment PA slectionn (en surbrillance noire).
Conversion des lments PA en tableau

Au lieu d'utiliser des tableaux pour crer une mise en forme, certains concepteurs de sites Web prfrent utiliser des lments PA. Dreamweaver vous permet de crer votre mise en forme l'aide d'lments PA, puis, si vous le souhaitez, de les convertir en tableaux. Par exemple, il peut tre ncessaire de convertir les lments PA en tableaux pour pouvoir prendre en charge les navigateurs antrieurs la version 4.0. La conversion des lments PA en tableaux est toutefois dconseille parce qu'elle peut gnrer des tableaux contenant un grand nombre de cellules vides, sans parler les problmes de code plthorique. Si vous avez besoin d'une mise en page utilisant des tableaux, il est prfrable de la crer l'aide des outils standard de mise en forme des tableaux disponibles dans Dreamweaver. Vous pouvez aussi passer des lments PA aux tableaux, et vice-versa, pour peaufiner la mise en forme et optimiser la prsentation de la page. (Toutefois, lorsque vous reconvertissez un tableau en lments PA, Dreamweaver convertit le tableau en balises div PA, quel que soit le type de l'lment PA qui se trouvait dans la page avant d'tre converti en tableau.) Vous ne pouvez pas convertir un tableau ou un lments PA spcifique figurant sur une page. Il n'est possible de convertir des lments PA en tableaux, et des tableaux en divs PA que pour la totalit d'une page. Remarque : Il est impossible de convertir des lments PA en tableaux, ou des tableaux en divs PA, dans un modle de document ou dans un document auquel un modle a t appliqu. Dans ce cas, vous devez crer votre mise en forme dans un document sans modle et le convertir avant de l'enregistrer comme modle.
Conversion des lments PA en tableaux

Crez votre mise en forme l'aide d'lments PA, puis convertissez les lments PA en tableaux afin que votre mise en forme puisse s'afficher dans les navigateurs les moins rcents. Avant de convertir vos lments PA en tableaux, assurez-vous qu'ils ne se chevauchent pas. Veillez en outre bien tre en mode Standard (Affichage > Mode Tableau > Mode Standard). Conversion des lments PA en tableau 1. Slectionnez Modifier > Convertir > Divs PA en tableau. 2. Parmi les options suivantes, dfinissez celles de votre choix et cliquez sur OK : La plus prcise Cre une cellule de tableau pour chaque lment PA et ajoute les cellules ncessaires pour prserver l'espace entre les lments PA. La plus petite : Rduit les cellules vides. Indique que les bords des lments PA doivent tre aligns s'ils sont positionns dans la limite du nombre de pixels dfini. Si vous choisissez cette option, le tableau que vous obtiendrez aura moins de lignes et de colonnes vides, mais ne correspondra pas ncessairement exactement votre mise en forme. Utiliser les GIF transparents Remplit la dernire ligne du tableau d'images GIF transparentes. Slectionner cette option permet d'tre sr que le tableau s'affichera avec les mmes largeurs de colonne dans tous les navigateurs. Lorsque cette option est active, vous ne pouvez pas modifier le tableau obtenu en faisant glisser ses colonnes. Lorsque cette option est dsactive, le tableau obtenu ne contient pas les GIF transparents, mais les largeurs des colonnes peuvent varier suivant le navigateur. Centrer dans la page Centre le tableau obtenu dans la page. Si cette option est dsactive, le tableau commence sur le bord gauche de la page. Conversion des tableaux en divs PA 1. Slectionnez Modifier > Convertir > Tableaux en divs PA. 2. Parmi les options suivantes, dfinissez celles de votre choix et cliquez sur OK : Empcher le chevauchement des lments PA Limite la position des lments PA lorsqu'ils sont crs, dplacs et redimensionns, afin d'viter tout chevauchement. Afficher le panneau Elments PA Affiche le panneau Elments PA. Afficher la grille et Aligner sur la grille Vous permettent d'utiliser une grille pour faciliter le positionnement des lments PA. Les tableaux sont convertis en divs PA. Les cellules vides ne sont pas converties en lments PA, sauf si elles possdent une couleur
255
d'arrire-plan. Remarque : Les lments de la page qui se trouvaient en dehors des tableaux sont galement placs dans les balises div PA.
Empchement du chevauchement des lments PA

Les cellules d'un tableau ne peuvent pas se chevaucher. Dreamweaver ne peut donc pas crer de tableau partir d'lments PA qui se chevauchent. Si vous envisagez de convertir les lments PA d'un document en tableaux, activez l'option Empcher le chevauchement pour restreindre le dplacement et le positionnement des lments PA et en viter le chevauchement. Si cette option est active, aucun lment PA ne peut tre cr, dplac ou redimensionn au-dessus d'un lment PA existant, ni tre imbriqu dans ce dernier. Si vous activez cette option aprs avoir cr des lments PA se chevauchant, faites glisser chaque lment PA concern de faon l'loigner des autres lments PA. Dreamweaver ne corrige pas automatiquement les lments PA existants se chevauchant dans la page lorsque vous activez l'option Empcher le chevauchement des lments PA. Si cette option et l'option d'alignement sont actives, aucun lment PA ne sera align sur la grille si cela doit causer un chevauchement de deux lments PA. Dans ce cas, l'lment PA sera align sur le bord de l'lment PA le plus proche. Remarque : Certaines oprations autorisent le chevauchement des lments PA, mme lorsque l'option Empcher le chevauchement est active. Si vous insrez un lment PA en utilisant le menu Insertion, si vous entrez des valeurs dans l'inspecteur Proprits ou si vous repositionnez des lments PA en modifiant le code source HTML, les lments PA risquent de se chevaucher ou de s'imbriquer lorsque cette option est active. En cas de chevauchement, faites glisser les lments PA qui se chevauchent en mode Cration pour les sparer. Dans le panneau Elments PA (Fentre > Elments PA), activez l'option Empcher le chevauchement. Dans la fentre de document, choisissez Modifier > Rorganiser > Empcher le chevauchement des lments PA. Voir aussi Cration d'une page avec une mise en forme CSS
256
Utilisation de contenu d'en-tte pour les pages

Affichage et modification de contenu d'en-tte Dfinition des proprits meta pour la page Dfinition du titre de la page Dfinition de mots-cls pour la page Dfinition de descriptions pour la page Dfinition des proprits d'actualisation de la page Dfinition des proprits d'URL de base de la page Dfinition des proprits de liaison de la page Les pages contiennent des lments qui dcrivent les informations figurant sur la page ; ces lments sont utiliss par les moteurs de recherche. Vous pouvez dfinir les proprits des lments head pour contrler la faon dont vos pages sont identifies.
Affichage et modification de contenu d'en-tte
Haut de la page
Vous pouvez afficher les lments de l'en-tte head d'un document via le menu Affichage, le mode Code de la fentre de document ou l'inspecteur de code.
Affichage des lments de la section d'en-tte d'un document

Slectionnez Affichage > Contenu de l'en-tte. Pour chaque lment de la section head, un marqueur s'affiche dans le haut de la fentre de document en mode Cration. Remarque : Si la fentre de document affiche uniquement le mode Code, la commande Affichage > Contenu de l'en-tte est grise.
Insertion d'un lment dans la section d'en-tte d'un document

1. Slectionnez un lment du sous-menu Insertion > HTML > Balises d'en-tte. 2. Choisissez les options applicables l'lment dans la bote de dialogue qui s'affiche alors, ou dans l'inspecteur Proprits.
Modification d'un lment de la section d'en-tte d'un document

1. Slectionnez Affichage > Contenu de l'en-tte. 2. Cliquez sur l'une des icnes de la section head pour la slectionner. 3. Dfinissez ou modifiez les proprits de l'lment dans l'inspecteur Proprits.
Dfinition des proprits meta pour la page
Haut de la page
Une balise meta est un lment de la section head qui enregistre des informations sur la page en cours, comme le codage des caractres, l'auteur, le copyright ou les mots-cls. Ces balises permettent galement de transmettre des informations au serveur, par exemple la date d'expiration de la page, son intervalle de ractualisation et sa classification POWDER. (Le format de classification POWDER, Protocol for Web Description Resources, permet de dfinir un niveau d'interdiction d'accs pour des raisons morales, comme la classification des films, aux pages Web.)
Ajout d'une balise meta

1. Choisissez Insertion > HTML > Balises d'en-tte > Meta. 2. Dfinissez les proprits dans la bote de dialogue qui s'affiche.
Modification d'une balise meta existante

1. Slectionnez Affichage > Contenu de l'en-tte. 2. Slectionnez le marqueur Meta qui apparat en haut de la fentre de document. 3. Dfinissez les proprits dans l'inspecteur Proprits.
Proprits d'une d'une balise meta

Dfinissez les proprits de la balise meta comme suit : Attribut Indique si la balise meta contient des informations descriptives sur la page (name) ou des informations d'en-tte HTTP (http-equiv). Valeur Indique le type d'informations que vous donnez dans cette balise. Certaines valeurs, telles que description, keywords et refresh, sont dj bien dfinies (et disposent de leurs propres inspecteurs de proprits dans Dreamweaver), mais vous pouvez indiquer pratiquement n'importe
257
quelle valeur (par exemple creationdate, documentID ou level). Contenu Est l'information elle-mme. Si, par exemple, vous spcifiez level pour Valeur, vous pouvez spcifier beginner, intermediate ou advanced pour Contenu.
Haut de la page
Dfinition du titre de la page
Le titre ne possde qu'une proprit : le titre de la page. Le titre apparat dans la barre de titre de la fentre de document dans Dreamweaver, ainsi que dans la barre de titre de la plupart des navigateurs. Le titre apparat galement dans la barre d'outils de la fentre de document.
Dfinition du titre dans la fentre de document

Entrez le titre dans la zone Titre de la barre d'outils de la fentre de document.
Dfinition du titre dans le contenu de l'en-tte

1. Slectionnez Affichage > Contenu de l'en-tte. 2. Slectionnez le marqueur Title qui apparat en haut de la fentre de document. 3. Dfinissez le titre de la page dans l'inspecteur Proprits.
Dfinition de mots-cls pour la page
Haut de la page
De nombreux robots de moteurs de recherche (programmes parcourant automatiquement le Web pour collecter les informations ensuite indexes par les moteurs de recherche) lisent le contenu de la balise meta Keywords, et utilisent ces informations pour indexer les pages dans leur base de donnes. Comme certains moteurs de recherche limitent le nombre de mots-cls ou de caractres qu'ils indexent, ou ignorent tous les mots-cls si vous dpassez la limite, il est judicieux de n'en utiliser que quelques-uns qui soient bien cibls.
Ajout d'une balise meta Keywords

1. Choisissez Insertion > HTML > Balises d'en-tte > Keywords. 2. Dfinissez les mots-cls, spars par des virgules, dans la bote de dialogue qui s'affiche.
Modification d'une balise meta Keywords

1. Slectionnez Affichage > Contenu de l'en-tte. 2. Slectionnez le marqueur Keywords qui apparat en haut de la fentre de document. 3. Dans l'inspecteur Proprits, consultez, modifiez ou supprimez des mots-cls. Vous pouvez galement ajouter des mots-cls en les sparant par des virgules.
Dfinition de descriptions pour la page
Haut de la page
De nombreux robots de moteurs de recherche (programmes parcourant automatiquement le Web pour collecter les informations ensuite indexes par les moteurs de recherche) lisent le contenu de la balise meta Description. Certains utilisent ces informations pour indexer vos pages dans leurs bases de donnes, et certains affichent galement ces informations sur la page de rsultats de la recherche (au lieu d'afficher les premires lignes du document). Certains moteurs de recherche limitant le nombre de caractres qu'ils indexent, il est judicieux de limiter votre description quelques mots (par exemple, Spcialits de grillades de porc Albany, Gorgie, ou conception de sites Web des prix raisonnables dans le monde entier).
Ajout d'une balise meta Description

1. Choisissez Insertion > HTML > Balises d'en-tte > Description. 2. Tapez le descriptif de votre site dans la bote de dialogue qui s'affiche.
Modification d'une balise meta Description

1. Slectionnez Affichage > Contenu de l'en-tte. 2. Slectionnez le marqueur Description qui apparat en haut de la fentre de document. 3. Dans l'inspecteur Proprits, consultez, modifiez ou supprimez le texte de la description.
Dfinition des proprits d'actualisation de la page
Haut de la page
L'lment Refresh (Actualisation) permet d'indiquer au navigateur s'il doit actualiser automatiquement votre page (en rechargeant la page en cours ou en affichant une autre page) aprs un certain laps de temps. Cet lment est frquemment utilis pour rediriger les utilisateurs vers une autre URL, notamment aprs avoir affich un message indiquant que l'URL a chang.
258
Ajout d'une balise meta Refresh

1. Choisissez Insertion > HTML > Balises d'en-tte > Refresh. 2. Dfinissez les proprits de la balise meta Refresh dans la bote de dialogue qui s'affiche.
Modification d'une balise meta Refresh

1. Slectionnez Affichage > Contenu de l'en-tte. 2. Slectionnez le marqueur Refresh qui apparat en haut de la fentre de document. 3. Dans l'inspecteur Proprits, dfinissez les proprits de la balise meta Refresh.
Dfinition des proprits d'une balise meta Refresh

Dfinissez les proprits de la balise meta Refresh comme suit : Dlai Dure, exprime en secondes, qui s'coule avant que la page ne soit actualise par le navigateur. Pour que le navigateur actualise la page immdiatement aprs l'avoir charge, saisissez 0 dans cette zone. URL ou Action Indique si le navigateur doit se diriger vers une autre URL ou actualiser la page en cours, aprs le dlai spcifi. Pour ouvrir une autre URL (plutt que d'actualiser la page en cours), cliquez sur le bouton Parcourir, puis naviguez vers et slectionnez la page charger.
Haut de la page
Dfinition des proprits d'URL de base de la page

L'lment Base permet de dfinir l'URL de base laquelle tous les chemins relatifs du document font rfrence.
Ajout d'une balise meta Base

1. Choisissez Insertion > HTML > Balises d'en-tte > Base. 2. Dfinissez les proprits de la balise meta Base dans la bote de dialogue qui s'affiche.
Modification d'une balise meta Base

1. Slectionnez Affichage > Contenu de l'en-tte. 2. Slectionnez le marqueur Base qui apparat en haut de la fentre de document. 3. Dans l'inspecteur Proprits, dfinissez les proprits de la balise meta Base.
Dfinition des proprits d'une balise meta Base

Dfinissez les proprits de la balise meta Base comme suit : Href L'URL de base. Cliquez sur le bouton Parcourir pour naviguer vers et slectionner un fichier, ou saisissez le chemin du fichier dans la zone. Cible Indique le cadre ou la fentre o tous les documents lis doivent s'ouvrir. Choisissez l'un des cadres du jeu de cadres actif, ou l'un des noms de fentre rservs ci-dessous : _blank charge le document li dans une nouvelle fentre, sans nom, du navigateur. _parent charge le document li dans le jeu de cadres parent ou dans la fentre parente du cadre contenant le lien. Si le cadre contenant le lien n'est pas imbriqu, alors il est quivalent _top : le document li est charg dans la fentre de base du navigateur. _self charge le document li dans le mme cadre (ou la mme fentre) que le lien. Il s'agit de la cible par dfaut, il est donc en gnral inutile de la spcifier. _top charge le document li dans la fentre de base du navigateur, en supprimant tous les cadres.
Dfinition des proprits de liaison de la page

La balise link permet de dfinir une relation entre le document actif et une autre page.
Haut de la page
Remarque : La balise link de la section head agit diffremment d'un lien HTML insr dans la section body et joignant des documents.
Ajout d'une balise meta Link

1. Choisissez Insertion > HTML > Balises d'en-tte > Link. 2. Dfinissez les proprits de la balise meta Link dans la bote de dialogue qui s'affiche.
Modification d'une balise meta Link

1. Slectionnez Affichage > Contenu de l'en-tte. 2. Slectionnez le marqueur Link qui apparat en haut de la fentre de document. 3. Dans l'inspecteur Proprits, dfinissez les proprits de la balise meta Link.
Dfinition des proprits d'une balise meta Link

259
Dfinissez les proprits de la balise meta Link comme suit : Href L'URL (adresse Internet) du fichier vers laquelle vous dfinissez une relation. Cliquez sur le bouton Parcourir pour naviguer vers et slectionner un fichier, ou saisissez le chemin du fichier dans la zone. Notez que cet attribut n'indique pas un fichier vers lequel vous tablissez un lien, au sens o on l'entend gnralement en HTML ; les relations dfinies dans un lment Lien sont plus complexes. ID Spcifie un identificateur unique pour le lien. Titre Dcrit cette relation. Cet attribut est particulirement utilis pour les feuilles de style lies. Pour plus d'informations sur les feuilles de style externes, consultez les spcifications HTML 4.0 sur le site du World Wide Web Consortium, www.w3.org/TR/REC-html40/present/styles.html#styleexternal. Rel Spcifie la relation entre le document actif et celui indiqu dans la zone Href. Les valeurs possibles sont les suivantes : Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help et Bookmark. Pour prciser plusieurs relations, sparez les valeurs par un espace. Rev Spcifie la relation inverse (l'oppos de Rel) entre le document actif et celui indiqu dans la zone Href. Les valeurs possibles sont les mmes que pour Rel.
260
Utilisation du widget Accordon Spry

A propos du widget Accordon Insertion et modification du widget Accordon Personnalisation du widget Accordon
A propos du widget Accordon
Haut de la page
Un widget Accordon est un ensemble de panneaux rductibles pouvant stocker une grande quantit de contenu tout en restant compact. Les visiteurs du site affichent ou masquent le contenu stock dans l'accordon en cliquant sur l'onglet du panneau. Les panneaux de l'accordon se dveloppent ou se rduisent mesure que le visiteur clique sur les diffrents onglets. Dans un accordon, un seul panneau de contenu est ouvert et visible tout moment. L'exemple suivant montre un widget Accordon dont le premier panneau est dvelopp :
A. Onglet du panneau accordon B. Contenu du panneau accordon C. Panneau accordon (ouvert) Le code HTML par dfaut du widget Accordon comprend une balise div extrieure contenant tous les panneaux, une balise div pour chaque panneau, ainsi qu'une balise div d'en-tte et une balise div de contenu l'intrieur de la balise pour chaque panneau. Un widget Accordon peut contenir n'importe quel nombre de panneaux distincts. Le code HTML du widget Accordon comprend galement des balises script dans l'en-tte du document et aprs le marquage HTML de l'accordon. Vous trouverez une explication plus dtaille du fonctionnement du widget Accordon, ainsi qu'une description complte de son code, l'adresse www.adobe.com/go/learn_dw_spryaccordion_fr. Pour consulter un didacticiel relatif l'utilisation du widget Accordon, rendez-vous l'adresse suivante : www.adobe.com/go/vid0167_fr.
Insertion et modification du widget Accordon

Insertion du widget Accordon
Choisissez Insertion > Spry > Accordon Spry. Remarque : Vous pouvez galement insrer un widget Accordon par l'intermdiaire de la catgorie Spry du panneau Insertion.
Haut de la page
Ajout d'un panneau un widget Accordon

1. Slectionnez un widget Accordon dans la fentre de document. 2. Cliquez sur le bouton Plus (+) de l'inspecteur Proprits (Fentre > Proprits). 3. (Facultatif) Modifiez le nom du panneau en slectionnant son texte en mode Cration puis en apportant les modifications dsires.
Suppression d'un panneau d'un widget Accordon

1. Slectionnez un widget Accordon dans la fentre de document. 2. Dans le menu Panneaux de l'inspecteur Proprits (Fentre > Proprits), slectionnez le nom du panneau supprimer puis cliquez sur le bouton Moins (-).
261
Ouverture d'un panneau modifier

Effectuez l'une des oprations suivantes : Placez le pointeur de la souris au-dessus de l'onglet du panneau pour l'ouvrir en mode cration, puis cliquez sur l'icne reprsentant un oeil qui s'affiche sur la droite de l'onglet. Slectionnez un widget Accordon dans la fentre de document, puis cliquez sur le nom du panneau pour le modifier dans le menu Panneaux de l'inspecteur Proprits (Fentre > Proprits).
Modification de l'ordre des panneaux

1. Slectionnez un widget Accordon dans la fentre de document. 2. Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez le nom du panneau accordon dplacer. 3. Cliquez sur les flches vers le haut ou vers le bas pour monter ou descendre le panneau.
Personnalisation du widget Accordon
Haut de la page
Bien que l'inspecteur Proprits permette d'apporter des modifications simples un widget Accordon, il ne prend pas en charge les tches de dfinition de style personnalises. Vous pouvez modifier les rgles CSS du widget Accordon de manire crer un accordon adapt vos besoins. Pour savoir comment modifier les couleurs du widget Accordon, consultez l'article Quick guide to styling Spry tabbed panels, accordions, and collapsible panels de David Powers (en anglais). Vous trouverez la liste des tches de dfinition de style avances l'adresse www.adobe.com/go/learn_dw_spryaccordion_custom_fr. Toutes les rgles CSS des sections suivantes font rfrence aux rgles par dfaut, qui figurent dans le fichier SpryAccordion.css. Dreamweaver enregistre le fichier SpryAccordion.css dans le dossier SpryAssets de votre site ds que vous crez un widget Accordon Spry. Ce fichier contient galement des informations commentes au sujet de divers styles qui s'appliquent au widget. Il peut ds lors tre utile de consulter galement le fichier. Mme s'il est facile de modifier directement les rgles du widget Accordon dans le fichier CSS, vous pouvez galement utiliser le panneau Styles CSS pour modifier le code CSS de l'accordon. Le panneau Styles CSS peut vous aider trouver les classes CSS attribues diffrentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
Dfinition du style du widget Accordon

Vous pouvez dfinir le style du texte d'un widget Accordon en dfinissant des proprits pour le conteneur entier du widget Accordon, ou en dfinissant des proprits distinctes pour chaque composant du widget. Pour modifier le style du texte d'un widget Accordon, recherchez la rgle CSS approprie dans le tableau suivant, puis ajoutez vos proprits et valeurs de style du texte. Texte modifier Rgle CSS pertinente Exemple de proprits et de valeurs ajouter font: Arial; font-size:medium;
Texte dans l'accordon entier (onglet et panneau de contenu) Texte dans les onglets du panneau accordon uniquement Texte dans les panneaux de contenu de l'accordon uniquement
.Accordion or .AccordionPanel
.AccordionPanelTab
font: Arial; font-size:medium;
.AccordionPanelContent
Modification des couleurs d'arrire-plan du widget Accordon

Pour modifier les couleurs d'arrire-plan des diffrentes parties d'un widget Accordon, recherchez la rgle CSS approprie dans le tableau suivant, puis ajoutez ou modifiez les proprits et les valeurs de couleur d'arrire-plan. Partie du widget modifier Rgle CSS pertinente Exemple de proprit et de valeur ajouter ou modifier background-color: #CCCCCC; (Valeur par dfaut) background-color: #CCCCCC;
Couleur d'arrire-plan des onglets du panneau accordon Couleur d'arrire-plan des panneaux de contenu de l'accordon
.AccordionPanelTab
.AccordionPanelContent
262
Couleur d'arrire-plan du panneau accordon ouvert
.AccordionPanelOpen .AccordionPanelTab
background-color: #EEEEEE; (Valeur par dfaut)
Couleur d'arrire-plan des onglets de panneau lorsque le pointeur de la souris passe au-dessus Couleur d'arrire-plan de l'onglet de panneau ouvert lorsque le pointeur de la souris passe au-dessus
.AccordionPanelTabHover
color: #555555; (Valeur par dfaut)
.AccordionPanelOpen .AccordionPanelTabHover
color: #555555; (Valeur par dfaut)
Limitation de la largeur d'un accordon

Par dfaut, le widget Accordon se dveloppe pour occuper l'espace disponible. Vous pouvez toutefois limiter la largeur d'un widget Accordon en dfinissant une proprit width pour le conteneur de l'accordon. 1. Reprez la rgle CSS .Accordion en ouvrant le fichier SpryAccordion.css. Il s'agit de la rgle qui dfinit les proprits de l'lment conteneur principal du widget Accordon. Vous pouvez galement trouver cette rgle en slectionnant le widget Accordon puis en examinant le panneau Styles CSS (Fentre > Styles CSS). Assurez-vous que le panneau se trouve en mode Actuel. 2. Ajoutez une proprit et une valeur de largeur (width) la rgle, par exemple width: 300px;. Voir aussi
263
Utilisation du widget Panneau rductible Spry

A propos du widget Panneau rductible Insertion et modification du widget Panneau rductible Personnalisation du widget Panneau rductible
A propos du widget Panneau rductible
Haut de la page
Un widget Panneau rductible est un panneau qui peut stocker du contenu en n'occupant que peu de place. Les utilisateurs affichent ou masquent le contenu stock dans le panneau rductible en cliquant sur l'onglet du widget. L'exemple suivant montre un widget Panneau rductible dvelopp et rduit :
A. Dvelopp B. Rduit Le code HTML du widget Panneau rductible comprend une balise div extrieure qui comprend la balise de contenu div et la balise conteneur d'ongletdiv. Le code HTML du widget Panneau rductible comprend galement des balises script dans l'en-tte du document et aprs le marquage HTML du panneau rductible. Vous trouverez une explication plus dtaille du fonctionnement du widget Panneau rductible, ainsi qu'une description complte de son code, l'adresse www.adobe.com/go/learn_dw_sprycollapsiblepanel_fr.
Insertion et modification du widget Panneau rductible

Insertion du widget Panneau rductible
Haut de la page
Choisissez Insertion > Spry > Panneau rductible Spry. Remarque : Vous pouvez galement insrer un widget Panneau rductible par l'intermdiaire de la catgorie Spry du panneau Insertion.
Ouverture ou fermeture du panneau rductible en mode cration

Effectuez l'une des oprations suivantes : Placez le pointeur de la souris au-dessus de l'onglet du panneau en mode cration, puis cliquez sur l'icne reprsentant un oeil qui s'affiche sur la droite de l'onglet. Slectionnez un widget Panneau rductible dans la fentre de document, puis choisissez Ouvert ou Ferm dans le menu Affichage de l'inspecteur Proprits (Fentre > Proprits).
Dfinition de l'tat par dfaut d'un widget Panneau rductible

Vous pouvez dfinir l'tat par dfaut (ouvert ou ferm) d'un widget Panneau rductible lorsque la page Web est charge dans un navigateur. 1. Slectionnez un widget Panneau rductible dans la fentre de document. 2. Dans l'inspecteur Proprits (Fentre > Proprits), choisissez Ouvert ou Ferm dans le menu droulant Par dfaut.
Activation ou dsactivation de l'animation du widget Panneau rductible

Par dfaut, si vous activez l'animation d'un widget Panneau rductible, le panneau s'ouvre et se ferme progressivement, en douceur, lorsque le visiteur du site clique sur son onglet. Si vous dsactivez l'animation, le panneau rductible s'ouvre et se ferme brusquement. 1. Slectionnez un widget Panneau rductible dans la fentre de document. 2. Dans l'inspecteur Proprits (Fentre > Proprits), activez ou dsactivez l'option Activer l'animation.
Haut de la page
264
Personnalisation du widget Panneau rductible

Bien que l'inspecteur Proprits permette d'apporter des modifications simples un widget Panneau rductible, il ne prend pas en charge les tches de dfinition de style personnalises. Vous pouvez modifier les rgles CSS du widget Panneau rductible de manire crer un panneau rductible adapt vos besoins. Pour savoir comment modifier les couleurs du widget Panneau rductible, consultez l'article Quick guide to styling Spry tabbed panels, accordions, and collapsible panels de David Powers (en anglais). Vous trouverez la liste des tches de dfinition de style avances l'adresse www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom_fr. Toutes les rgles CSS des sections suivantes font rfrence aux rgles par dfaut, qui figurent dans le fichier SpryCollapsiblePanel.css. Dreamweaver enregistre le fichier SpryCollapsiblePanel.css dans le dossier SpryAssets de votre site ds que vous crez un widget Panneau rductible. Ce fichier contient galement des informations commentes au sujet de divers styles qui s'appliquent au widget. Mme s'il est facile de modifier directement les rgles du widget Panneau rductible dans le fichier CSS qui l'accompagne, vous pouvez galement utiliser le panneau Styles CSS pour modifier le code CSS du panneau rductible. Le panneau Styles CSS peut vous aider trouver les classes CSS attribues diffrentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
Dfinition du style du texte d'un widget Panneau rductible

Vous pouvez dfinir le style du texte d'un widget Panneau rductible en dfinissant des proprits pour le conteneur entier du widget Panneau rductible, ou en dfinissant des proprits distinctes pour chaque composant du widget. Pour modifier le format du texte d'un widget Panneau rductible, recherchez la rgle CSS approprie dans le tableau suivant, puis ajoutez vos proprits et valeurs de style du texte. Style modifier Rgle CSS pertinente Exemple de proprits et de valeurs ajouter ou modifier font: Arial; font-size:medium;
Texte du panneau rductible entier
.CollapsiblePanel
Texte dans l'onglet du panneau uniquement Texte dans le panneau de contenu uniquement
.CollapsiblePanelTab
font: bold 0.7em sans-serif; (Valeur par dfaut) font: Arial; font-size:medium;
.CollapsiblePanelContent
Modification des couleurs d'arrire-plan du widget Panneau rductible

Pour modifier les couleurs d'arrire-plan des diffrentes parties d'un widget Panneau rductible, recherchez la rgle CSS approprie dans le tableau suivant, puis ajoutez ou modifiez les proprits et les valeurs de couleur d'arrire-plan. Couleur modifier Rgle CSS pertinente Exemple de proprit et de valeur ajouter ou modifier background-color: #DDD; (Valeur par dfaut) background-color: #DDD;
Couleur d'arrire-plan de l'onglet du panneau Couleur d'arrire-plan du panneau de contenu Couleur d'arrire-plan de l'onglet quand le panneau est ouvert
.CollapsiblePanelTab
.CollapsiblePanelContent
.CollapsiblePanelOpen .CollapsiblePanelTab
background-color: #EEE; (Valeur par dfaut)
Couleur d'arrire-plan de l'onglet d'un panneau ouvert lorsque le pointeur de la souris passe au-dessus
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover
background-color: #CCC; (Valeur par dfaut)
Limitation de la largeur d'un panneau rductible

Par dfaut, le widget Panneau rductible se dveloppe pour occuper l'espace disponible. Vous pouvez toutefois limiter la largeur d'un widget Panneau rductible en dfinissant une proprit width pour le conteneur du panneau rductible. 1. Recherchez la rgle CSS .CollapsiblePanel en ouvrant le fichier SpryCollapsible Panel.css. Cette rgle dfinit les proprits de l'lment conteneur principal du widget Panneau rductible. Vous pouvez galement trouver cette rgle en slectionnant le widget Panneau rductible puis en examinant le panneau Styles CSS
265
(Fentre > Styles CSS). Assurez-vous que le panneau se trouve en mode Actuel. 2. Ajoutez une proprit et une valeur de largeur (width) la rgle, par exemple width: 300px;. Voir aussi
266
Utilisation du widget Panneaux onglet Spry

A propos du widget Panneaux onglet Insertion et modification du widget Panneaux onglet Personnalisation du widget Panneaux onglet
A propos du widget Panneaux onglet
Haut de la page
Un widget Panneaux onglet est un ensemble de panneaux qui peuvent stocker du contenu en n'occupant que peu de place. Les visiteurs du site affichent ou masquent le contenu stock dans les panneaux onglet en cliquant sur l'onglet du panneau auquel ils veulent accder. Les panneaux du widget s'ouvrent mesure que le visiteur clique sur les diffrents onglets. Dans un widget Panneaux onglet, un seul panneau de contenu est ouvert tout moment. L'exemple suivant montre un widget Panneaux onglet dont le troisime panneau est ouvert :
A. Onglet B. Contenu C. Widget Panneaux onglet D. Panneau onglet Le code HTML du widget Panneaux onglet comprend une balise extrieure div qui contient tous les panneaux, la liste des onglets, une div comprenant les panneaux de contenu, ainsi qu'une div pour chaque panneau de contenu. Le code HTML du widget Panneaux onglet comprend galement des balises script dans l'en-tte du document et aprs le marquage HTML du widget Panneaux onglet. Vous trouverez une explication plus dtaille du fonctionnement du widget Panneaux onglet, ainsi qu'une description complte de son code, l'adresse www.adobe.com/go/learn_dw_sprytabbedpanels_fr.
Insertion et modification du widget Panneaux onglet

Insertion du widget Panneaux onglet
Haut de la page
Choisissez Insertion > Spry > Panneaux onglet Spry. Remarque : Vous pouvez galement insrer un widget Panneaux onglet par l'intermdiaire de la catgorie Spry du panneau Insertion.
Ajout d'un panneau un widget Panneaux onglet

1. Slectionnez un widget Panneaux onglet dans la fentre de document. 2. Cliquez sur le bouton Plus de l'inspecteur Proprits (Fentre > Proprits). 3. (Facultatif) Modifiez le nom de l'onglet en slectionnant son texte en mode Cration puis en apportant les modifications dsires.
Suppression d'un panneau d'un widget Panneaux onglet

1. Slectionnez un widget Panneaux onglet dans la fentre de document. 2. Dans le menu Panneaux de l'inspecteur Proprits (Fentre > Proprits), slectionnez le nom du panneau supprimer puis cliquez sur le bouton Moins.
Ouverture d'un panneau modifier

Effectuez l'une des oprations suivantes : Placez le pointeur de la souris au-dessus de l'onglet du panneau pour l'ouvrir en mode cration, puis cliquez sur l'icne reprsentant un oeil qui s'affiche sur la droite de l'onglet. Slectionnez un widget Panneaux onglet dans la fentre de document, puis cliquez sur le nom du panneau pour le modifier dans le menu Panneaux de l'inspecteur Proprits (Fentre > Proprits).
267
Modification de l'ordre des panneaux

1. Slectionnez un widget Panneaux onglet dans la fentre de document. 2. Dans le menu Panneaux de l'inspecteur Proprits (Fentre > Proprits), slectionnez le nom du panneau dplacer. 3. Cliquez sur les flches vers le haut ou vers le bas pour monter ou descendre le panneau.
Dfinition du panneau ouvert par dfaut

Vous pouvez dterminer quel panneau du widget Panneaux onglet est ouvert par dfaut lorsque la page est ouverte dans un navigateur. 1. Slectionnez un widget Panneaux onglet dans la fentre de document. 2. Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez le panneau ouvrir par dfaut dans le menu droulant Par dfaut.
Personnalisation du widget Panneaux onglet
Haut de la page
Bien que l'inspecteur Proprits permette d'apporter des modifications simples un widget Panneaux onglet, il ne prend pas en charge les tches de dfinition de style personnalises. Vous pouvez modifier les rgles CSS du widget Panneaux onglet de manire crer un widget adapt vos besoins. Pour savoir comment modifier les couleurs du widget Panneaux onglet, consultez l'article Quick guide to styling Spry tabbed panels, accordions, and collapsible panels de David Powers (en anglais). Vous trouverez la liste des tches de dfinition de style avances l'adresse www.adobe.com/go/learn_dw_sprytabbedpanels_custom_fr. Toutes les rgles CSS des sections suivantes font rfrence aux rgles par dfaut, qui figurent dans le fichier SpryTabbedPanels.css. Dreamweaver enregistre le fichier SpryTabbedPanels.css dans le dossier SpryAssets de votre site ds que vous crez un widget Panneaux onglets. Ce fichier contient galement des informations commentes au sujet de divers styles qui s'appliquent au widget. Mme s'il est facile de modifier directement les rgles du widget Panneaux onglet dans le fichier CSS qui l'accompagne, vous pouvez galement utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider trouver les classes CSS attribues diffrentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
Dfinition du style du texte d'un widget Panneaux onglet

Vous pouvez dfinir le style du texte d'un widget Panneaux onglet en dfinissant des proprits pour le conteneur entier du widget Panneaux onglet, ou en dfinissant des proprits distinctes pour chaque composant du widget. Pour modifier le style du texte d'un widget Panneaux onglet, recherchez la rgle CSS approprie dans le tableau suivant, puis ajoutez vos proprits et valeurs de style du texte. Texte modifier Rgle CSS pertinente Exemple de proprits et de valeurs ajouter font: Arial; font-size:medium;
Texte dans le widget entier
.TabbedPanels
Texte dans les onglets du panneau uniquement
.TabbedPanelsTabGroup or .TabbedPanelsTab
Texte dans les panneaux de contenu uniquement
.TabbedPanelsContentGroup or .TabbedPanelsContent
Modification des couleurs d'arrire-plan du widget Panneaux onglet

Pour modifier les couleurs d'arrire-plan des diffrentes parties d'un widget Panneaux onglet, recherchez la rgle CSS approprie dans le tableau suivant, puis ajoutez ou modifiez les proprits et les valeurs de couleur d'arrire-plan. Couleur modifier Rgle CSS pertinente Exemple de proprit et de valeur ajouter ou modifier background-color: #DDD; (Valeur par dfaut)
Couleur d'arrire-plan des onglets du panneau
.TabbedPanelsTabGroup or .TabbedPanelsTab
Couleur d'arrire-plan des panneaux de contenu
.Tabbed PanelsContentGroup or .TabbedPanelsContent
background-color: #EEE; (Valeur par dfaut)
268
Couleur d'arrire-plan de l'onglet slectionn Couleur d'arrire-plan des onglets du panneau ouvert lorsque le pointeur de la souris passe au-dessus de ceux-ci
.TabbedPanelsTabSelected
background-color: #EEE; (Valeur par dfaut) background-color: #CCC; (Valeur par dfaut)
.TabbedPanelsTabHover
Limitation de la largeur de panneaux onglet

Par dfaut, le widget Panneaux onglet se dveloppe pour occuper l'espace disponible. Vous pouvez toutefois limiter la largeur d'un widget Panneaux onglet en dfinissant une proprit width pour le conteneur de l'accordon. 1. Recherchez la rgle CSS .TabbedPanels en ouvrant le fichier SpryTabbedPanels.css. Cette rgle dfinit les proprits de l'lment conteneur principal du widget Panneaux onglet. Vous pouvez galement trouver cette rgle en slectionnant le widget Panneaux onglet puis en examinant le panneau Styles CSS (Fentre > Styles CSS). Assurez-vous que le panneau se trouve en mode Actuel. 2. Ajoutez une proprit et une valeur de largeur (width) la rgle, par exemple width: 300px;. Voir aussi
269
Utilisation du widget Info-bulle Spry

A propos du widget Info-bulle Insertion du widget Info-bulle Modification des options de widget Info-bulle
A propos du widget Info-bulle
Haut de la page
Le widget Info-bulle Spry affiche des informations supplmentaires lorsqu'un utilisateur place le pointeur de la souris au-dessus d'un lment spcifique d'une page Web. Le contenu supplmentaire disparat lorsque l'utilisateur cesse l'opration. Vous pouvez galement configurer les infobulles de manire ce qu'elles restent ouvertes plus longtemps afin de permettre aux utilisateurs d'interagir avec le contenu qui s'y trouve. Le widget Info-bulle comprend les trois lments suivants : Le conteneur d'info-bulle. Il s'agit de l'lment qui contient le message ou le contenu que vous souhaitez afficher lorsque l'utilisateur active l'info-bulle. L'lment ou les lments de page permettant d'activer l'info-bulle. Le script du constructeur. Il s'agit du code JavaScript indiquant Spry de crer la fonctionnalit d'info-bulle. Lorsque vous insrez un widget Info-bulle, Dreamweaver cre un conteneur d'info-bulle l'aide de balises div et entoure l'lment de dclenchement (l'lment de page permettant d'activer l'info-bulle) de balises span. Dreamweaver utilise ces balises par dfaut. Toutefois, toutes les balises peuvent tre utilises avec l'infobulle et l'lment de dclenchement dans la mesure o elles se trouvent dans le corps de la page. Lorsque vous utilisez le widget Info-bulle, tenez compte des considrations suivantes : Toute infobulle ouverte se ferme avant l'ouverture de la suivante. Les info-bulles restent affiches lorsque les utilisateurs placent le pointeur de la souris au-dessus de la zone de dclenchement. Vous n'tes soumis aucune restriction en ce qui concerne le type de balises que vous pouvez utiliser pour les dclenchements et le contenu d'info-bulle. (Il est toutefois toujours recommand d'avoir recours des lments de niveau bloc afin d'viter des problmes de rendu inter-navigateurs ventuels). Par dfaut, l'info-bulle est de 20 pixels, et apparat en bas droite du curseur. Vous pouvez utiliser les options de dcalage horizontal et vertical de l'inspecteur Proprits pour dfinir un point d'aspect personnalis. Il n'existe actuellement aucun moyen permettant l'ouverture d'une info-bulle lorsqu'une page se charge dans un navigateur. Le widget Info-bulle ncessite trs peu de code CSS. Spry utilise JavaScript pour afficher, masquer et positionner l'info-bulle. Vous pouvez appliquer toute autre mise en page l'info-bulle l'aide des techniques CSS standard, selon les exigences de votre page. La seule rgle contenue dans le fichier CSS par dfaut est une solution aux problmes Internet Explorer 6 consistant faire apparatre l'info-bulle au-dessus des lments de formulaires ou des objets Flash. Vous trouverez une explication plus dtaille du fonctionnement du widget Spry Infobulle, ainsi qu'une description complte de son code, l'adresse www.adobe.com/go/learn_dw_sprytooltip_fr. Vous trouverez un didacticiel vido sur l'utilisation du widget Spry Infobulle l'adresse www.adobe.com/go/lrvid4046_dw_fr.
Insertion du widget Info-bulle

Choisissez Insertion > Spry > Infobulle Spry. Remarque : Vous pouvez galement insrer un widget Info-bulle par l'intermdiaire de la catgorie Spry du panneau Insertion.
Haut de la page
Cette action permet d'insrer un nouveau widget Info-bulle intgrant un conteneur ddi au contenu de l'info-bulle et une phrase d'espace rserv faisant office de dclencheur d'info-bulle. Vous pouvez galement slectionner un lment existant sur la page (par exemple, une image), puis insrer l'info-bulle. Lorsque vous effectuez cette opration, l'lment slectionn fait office de dclencheur de la nouvelle info-bulle. L'lment slectionn doit inclure une balise entire (par exemple, une balise img ou p) afin de permettre Dreamweaver de lui attribuer un ID s'il n'en dispose pas dj un.
Modification des options de widget Info-bulle

Vous pouvez dfinir les options vous permettant de personnaliser le comportement du widget Info-bulle. 1. Amenez le pointeur de la souris ou placez le point d'insertion dans le contenu de l'info-bulle sur la page.
270
Haut de la page
2. Cliquez sur l'onglet bleu du widget Info-bulle pour le slectionner. 3. Dfinissez les options dans l'inspecteur Proprits du widget Info-bulle, votre convenance. Nom Nom du conteneur d'info-bulle. Le conteneur renferme le contenu de l'info-bulle. Par dfaut, Dreamweaver utilise une balise div en tant que conteneur. Dclencheur Elment de la page qui active l'info-bulle. Par dfaut, Dreamweaver insre une phrase d'espace rserv, entoure de balises span, en tant que dclencheur, mais vous pouvez slectionner n'importe quel lment de la page disposant d'un ID unique. Suivre la souris Lorsqu'elle est slectionne, cette option oblige l'info-bulle suivre la souris lors du survol de l'lment de dclenchement. Masquer lors du retrait de la souris Lorsqu'elle est slectionne, cette option permet de garder l'info-bulle ouverte tant que la souris la survole (mme si la souris quitte l'lment de dclenchement). Il est utile de laisser l'infobulle ouverte si elle contient des liens ou d'autres lments interactifs. Si cette option n'est pas slectionne, l'lment de l'info-bulle se ferme lorsque la souris quitte la zone de dclenchement. Dcalage horizontal Calcule la position horizontale de l'info-bulle par rapport la souris. La valeur de dcalage est exprime en pixels ; le dcalage par dfaut est de 20 pixels. Dcalage vertical Calcule la position verticale de l'info-bulle par rapport la souris. La valeur de dcalage est exprime en pixels ; le dcalage par dfaut est de 20 pixels Afficher le dlai Dlai en millisecondes avant l'apparition de l'info-bulle lorsqu'elle se trouve dans l'lment de dclenchement. La valeur par dfaut est 0. Masquer le dlai Dlai en millisecondes avant la disparition de l'info-bulle lorsqu'elle a quitt l'lment de dclenchement. La valeur par dfaut est 0. Effet Type d'effet que vous voulez utiliser lorsque l'info-bulle apparat. Store simule l'effet d'un store qui monte et descend pour afficher et masquer l'info-bulle. Fondu fait apparatre et disparatre l'info-bulle en fondu. La valeur par dfaut est aucun.
271
Utilisation du widget Validation de case cocher Spry

A propos du widget Validation de case cocher Insertion et modification du widget Validation de case cocher Personnalisation des messages d'erreur d'un widget Validation de case cocher
A propos du widget Validation de case cocher
Haut de la page
Le widget Validation de case cocher Spry est une case cocher ou un groupe de cases cocher, dans un formulaire HTML, qui affiche des tats valides ou non valide lorsque l'utilisateur active ou n'active pas une case cocher. Par exemple, vous pouvez ajouter un widget Validation de case cocher un formulaire dans lequel l'utilisateur doit effectuer trois slections. Si l'utilisateur n'effectue pas ces trois slections, le widget renvoie un message indiquant que le nombre minimal de slections n'a pas t effectu. L'exemple suivant montre un widget Validation de case cocher dans diffrents tats :
A. Groupe de widgets Validation de case cocher, nombre minimal de slections B. Widget Validation de case cocher, tat obligatoire Le widget Validation de case cocher peut possder divers tats (par exemple valide, non valide, valeur obligatoire, etc.). Vous pouvez modifier les proprits de ces tats l'aide de l'inspecteur Proprits, en fonction des rsultats de validation dsirs. Un widget Validation de case cocher peut effectuer une validation diffrents moments, par exemple lorsque le visiteur clique en dehors du widget, pendant qu'il effectue une slection ou lorsqu'il tente d'envoyer le formulaire. Etat initial Etat du widget lorsque la page se charge dans le navigateur, ou lorsque l'utilisateur rinitialise le formulaire. Etat valide Etat du widget lorsque l'utilisateur a effectu une slection ou le nombre correct de slections, ce qui permet l'envoi du formulaire. Etat obligatoire Etat du widget si l'utilisateur n'a pas effectu une slection obligatoire. Nombre minimal de slections Etat du widget lorsque l'utilisateur a slectionn moins de cases cocher que le nombre minimal requis. Nombre maximal de slections Etat du widget lorsque l'utilisateur a slectionn plus de cases cocher que le nombre maximal admis. Lorsqu'un widget Validation de case cocher passe dans l'un de ces tats suite l'interaction avec l'utilisateur, la logique du cadre applicatif Spry applique une classe CSS spcifique au conteneur HTML pour le widget lors de l'excution. Par exemple, si un utilisateur tente d'envoyer un formulaire mais n'a pas effectu de slections, Spry applique au widget une classe qui le force afficher le message d'erreur Vous devez effectuer une slection . Les rgles qui contrlent le style et les tats d'affichage de messages d'erreur se trouvent dans le fichier CSS qui accompagne le widget, SpryValidationCheckbox.css. Le code HTML par dfaut du widget Validation de case cocher, gnralement dans un formulaire, contient une balise conteneur <span> qui entoure la balise <input type="checkbox"> de la zone de texte. Le code HTML du widget Validation de case cocher comprend galement des balises script dans l'en-tte du document et aprs le marquage HTML du widget. Vous trouverez une explication plus dtaille du fonctionnement du widget Validation de case cocher, ainsi qu'une description complte de son code, l'adresse www.adobe.com/go/learn_dw_sprycheckbox_fr.
Insertion et modification du widget Validation de case cocher

Insertion du widget Validation de case cocher
1. Choisissez Insertion > Spry > Validation de case cocher Spry. 2. Compltez la bote de dialogue Attributs d'accessibilit des balises objet, puis cliquez sur OK.
Haut de la page
Remarque : Vous pouvez galement insrer un widget Validation de case cocher par l'intermdiaire de la catgorie Spry du panneau Insertion.
272
Dfinition du moment de validation

Vous pouvez fixer le moment auquel la validation se produit : quand le visiteur du site clique en dehors du widget, pendant qu'il effectue des slections ou lorsqu'il tente d'envoyer le formulaire. 1. Slectionnez un widget Validation de case cocher dans la fentre de document. 2. Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez l'option qui indique le moment o vous voulez que la validation se produise. Vous pouvez activer toutes les options, ou uniquement onSubmit. onBlur Validation quand l'utilisateur clique en dehors de la case cocher. Remplacer Validation lorsque l'utilisateur effectue des slections. onSubmit Validation lorsque l'utilisateur tente d'envoyer le formulaire. L'option onSubmit est active par dfaut et ne peut pas tre dsactive.
Dfinition d'une plage de slections minimale et maximale

Par dfaut, un widget Validation de case cocher est obligatoire. Si vous insrez plusieurs cases cocher sur la page, il est toutefois possible de spcifier une plage de slections minimale et maximale. Par exemple, si la balise <span> d'un widget Validation de case cocher contient six cases cocher et si vous voulez que l'utilisateur en slectionne au moins trois, vous pouvez dfinir une prfrence de ce type pour le widget entier. 1. Slectionnez un widget Validation de case cocher dans la fentre de document. 2. Dans l'inspecteur Proprits (Fentre > Proprits), activez l'option Imposer plage. 3. Entrez un nombre minimal ou maximal (voire les deux) de cases cocher que l'utilisateur doit activer.
Affichage des tats du widget en mode Cration

1. Slectionnez un widget Validation de case cocher dans la fentre de document. 2. Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez l'tat afficher dans le menu droulant Aperu des tats. Par exemple, slectionnez Initial pour afficher le widget dans son tat initial.
Personnalisation des messages d'erreur d'un widget Validation de case cocher
Haut de la page
Par dfaut, les messages d'erreur du widget Validation de case cocher s'affichent en rouge, entours d'un bord pais de 1 pixel. Vous pouvez modifier les rgles CSS du widget Validation de case cocher de manire crer un widget dont le style est adapt vos besoins. Vous trouverez la liste des tches de dfinition de style avances l'adresse www.adobe.com/go/learn_dw_sprycheckbox_custom_fr. 1. Ouvrez le fichier SpryValidationCheckbox.css. Dreamweaver enregistre le fichier SpryValidationCheckbox.css dans le dossier SpryAssets de votre site ds que vous crez un widget Validation de case cocher. La consultation de ce fichier peut s'avrer utile, car il contient des informations commentes au sujet de divers styles qui s'appliquent au widget. 2. Recherchez la rgle CSS approprie dans le tableau suivant, puis modifiez les proprits par dfaut ou ajoutez vos proprits et valeurs de style du texte :
Texte mettre en forme Texte de message d'erreur
Rgle CSS pertinente
Proprits modifier color: #CC3333; border: 1px solid #CC3333;
.checkboxRequiredState .checkboxRequiredMsg, .checkboxMinSelectionsState .checkboxMinSelectionsMsg, .checkboxMaxSelectionsState .checkboxMaxSelectionsMsg
Mme s'il est facile de modifier directement les rgles du widget Validation de case cocher dans le fichier CSS qui l'accompagne, vous pouvez galement utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider trouver les classes CSS attribues diffrentes parties du widget, en particulier si vous employez le mode Actuel du panneau. Voir aussi
273
Utilisation du widget Validation de confirmation Spry

A propos du widget Validation de confirmation Insertion et modification du widget Validation de confirmation Personnalisation du widget Validation de confirmation
A propos du widget Validation de confirmation
Haut de la page
Le widget Validation de confirmation est un champ de texte ou un champ de formulaire de mot de passe qui affiche des tats valides ou non valides lorsqu'un utilisateur entre une valeur ne correspondant pas celle d'un champ similaire du mme formulaire. Par exemple, vous pouvez ajouter un widget Validation de confirmation un formulaire qui oblige un utilisateur ressaisir le mot de passe qu'il a spcifi dans un champ prcdent. Si l'utilisateur ne parvient pas saisir le mot de passe exactement comme il l'a spcifi auparavant, le widget renvoie un message d'erreur indiquant que les valeurs ne correspondent pas. Vous pouvez galement utiliser un widget Validation de confirmation en combinaison avec un widget Validation de mot de passe afin de valider les adresses e-mail. Remarque : Vous devez vous tre familiaris avec les widgets de validation Spry avant de pouvoir utiliser le widget Confirmation. S'ils ne vous sont pas familiers, consultez la rubrique Utilisation du widget Validation de zone de texte Spry ou toute autre prsentation du widget de validation avant de commencer. Cette prsentation n'aborde pas tous les concepts du widget de validation de base. L'illustration ci-dessous montre une configuration type d'un widget Confirmation :
A. Champ de mot de passe ou widget Validation de mot de passe Spry B. Widget Confirmation Le widget Validation de confirmation peut possder divers tats (par exemple valide, non valide, obligatoire, etc.). Vous pouvez modifier les proprits de ces tats en modifiant le fichier CSS correspondant (SpryValidationConfirm.css), en fonction des rsultats de validation dsirs. Un widget Validation de confirmation peut effectuer une validation diffrents moments, par exemple lorsque le visiteur clique en dehors du widget, pendant qu'il entre des donnes ou lorsqu'il tente d'envoyer le formulaire. Etat initial Lorsque la page se charge dans le navigateur, ou lorsque l'utilisateur rinitialise le formulaire. Etat actif Lorsque l'utilisateur place le point d'insertion l'intrieur du widget. Etat valide Lorsque l'utilisateur a entr des informations correctes, ce qui permet l'envoi du formulaire. Etat non valide Lorsqu'un utilisateur entre du texte qui ne correspond pas celui entr dans une zone de texte prcdente, un widget Validation de zone de texte ou un widget Validation de mot de passe. Etat obligatoire Lorsque l'utilisateur n'a pas entr du texte obligatoire dans le champ de texte. Vous trouverez une explication plus dtaille du fonctionnement des widgets Validation de confirmation, ainsi que des informations supplmentaires sur la structure du widget, l'adresse www.adobe.com/go/learn_dw_spryconfirm_fr.
Insertion et modification du widget Validation de confirmation

Insertion du widget Validation de confirmation
1. Choisissez Insertion > Spry > Validation de confirmation Spry. 2. Compltez la bote de dialogue Attributs d'accessibilit des balises objet, puis cliquez sur OK.
Haut de la page
Remarque : Vous pouvez galement insrer un widget Validation de confirmation par l'intermdiaire de la catgorie Spry du panneau Insertion.
Modification de l'tat obligatoire d'un widget Validation de confirmation

Par dfaut, tous les widgets Validation de confirmation que vous insrez l'aide de Dreamweaver exigent que l'utilisateur y entre des donnes lorsqu'ils sont publis sur une page Web. Vous pouvez toutefois rendre la saisie de texte de confirmation dans certaines zones facultative pour l'utilisateur. 1. Slectionnez un widget Validation de confirmation dans la fentre de document en cliquant sur son onglet bleu. 2. Dans l'inspecteur Proprits (Fentre > Proprits), activez ou dsactivez l'option Obligatoire, en fonction de vos prfrences.
Spcification du champ de texte utiliser pour la validation

274
1. Slectionnez un widget Validation de confirmation dans la fentre de document en cliquant sur son onglet bleu. 2. Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez le champ de texte utiliser pour la validation dans le menu droulant Utiliser pour la validation. Tous les champs de texte possdant des ID uniques apparaissent en tant qu'options dans le menu droulant.
Affichage des tats du widget en mode Cration

1. Slectionnez un widget Validation de confirmation dans la fentre de document en cliquant sur son onglet bleu. 2. Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez l'tat afficher dans le menu droulant Aperu des tats. Par exemple, si vous voulez afficher le widget dans son tat valide, slectionnez Valide.
Dfinition du moment de validation

Vous pouvez fixer le moment auquel la validation se produit : quand le visiteur du site clique en dehors du widget, pendant qu'il tape des donnes ou lorsqu'il tente d'envoyer le formulaire. 1. Slectionnez un widget Validation de confirmation dans la fentre de document en cliquant sur son onglet bleu. 2. Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez l'option qui indique le moment o vous voulez que la validation se produise. Vous pouvez activer toutes les options, ou uniquement onSubmit. onBlur Validation quand l'utilisateur clique en dehors du champ de texte de confirmation. Remplacer Validation lorsque l'utilisateur modifie du texte l'intrieur du champ de texte de confirmation. onSubmit Validation lorsque l'utilisateur tente d'envoyer le formulaire. L'option onSubmit est active par dfaut et ne peut pas tre dsactive.
Personnalisation du widget Validation de confirmation
Haut de la page
Bien que l'inspecteur Proprits permette d'apporter des modifications simples un widget Validation de confirmation, il ne prend pas en charge les tches de dfinition de style personnalises. Vous pouvez modifier les rgles CSS du widget Validation de confirmation de manire crer un widget dont le style est adapt vos besoins. Vous trouverez la liste des tches de dfinition de style avances l'adresse www.adobe.com/go/learn_dw_spryconfirm_custom_fr. Toutes les rgles CSS des sections suivantes font rfrence aux rgles par dfaut, qui figurent dans le fichier SpryValidationConfirm.css. Dreamweaver enregistre le fichier SpryValidationConfirm.css dans le dossier SpryAssets de votre site ds que vous crez un widget Validation de confirmation Spry. La consultation de ce fichier peut s'avrer utile, car il contient des informations commentes au sujet de divers styles qui s'appliquent au widget. Mme s'il est facile de modifier directement les rgles du widget Validation de confirmation dans le fichier CSS qui l'accompagne, vous pouvez galement utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider trouver les classes CSS attribues diffrentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
Dfinition du style du widget Validation de confirmation (instructions gnrales)

1. Ouvrez le fichier SpryValidationConfirm.css. 2. Accdez la rgle CSS pour la partie du widget modifier. Par exemple, pour modifier la couleur d'arrire-plan de l'tat obligatoire du widget Confirmation, modifiez la rgle input.confirmRequiredState dans le fichier SpryValidationConfirm.css. 3. Apportez les modifications dsires au code CSS puis enregistrez le fichier. Le fichier SpryValidationConfirm.css contient de nombreux commentaires qui expliquent le code et le rle de certaines rgles. Pour plus d'informations, consultez les commentaires dans le fichier.
Dfinition du style du texte de message d'erreur d'un widget Validation de confirmation

Par dfaut, les messages d'erreur du widget Validation de confirmation s'affichent en rouge, entours d'un bord plein de 1 pixel d'paisseur. Pour modifier le style des messages d'erreur d'un widget Validation de confirmation, recherchez la rgle CSS approprie dans le tableau suivant, puis modifiez les proprits par dfaut ou ajoutez vos proprits et valeurs de style du texte. Texte modifier Texte de message d'erreur Rgle CSS pertinente .confirmRequiredState .confirmRequiredMsg, .confirmInvalidState .confirmInvalidMsg Proprits modifier color: #CC3333; border: 1px solid #CC3333;
Modification des couleurs d'arrire-plan du widget Validation de confirmation

275
Pour modifier les couleurs d'arrire-plan du widget Validation de confirmation dans diffrents tats, recherchez la rgle CSS approprie dans le tableau suivant, puis modifiez la couleur d'arrire-plan par dfaut. Couleur modifier Couleur d'arrire-plan du widget dans un tat valide Rgle CSS pertinente .confirmValidState input, input.confirmValidState Proprit modifier background-color: #B8F5B1;
Couleur d'arrire-plan du widget dans un tat non valide
input.confirmRequiredState, .confirmRequiredState input, input.confirmInvalidState, .confirmInvalidState input
background-color: #FF9F9F;
Couleur d'arrire-plan du widget actif
.confirmFocusState input, input.confirmFocusState
background-color: #FFFFCC;
Voir aussi Exemples de widget Validation de confirmation
276
Contenu de page et actifs

277
Texte en arabe et en hbreu

Flux de texte bidirectionnel Editeur de balises Sens du texte et unicode-bidi dans les rgles CSS Proprits des tableaux Proprits des balises Div De nouvelles fonctions amliores pour travailler en arabe et en hbreu sont disponibles dans ldition Moyen-Orient et Afrique du Nord de ce logiciel.
Flux de texte bidirectionnel
En haut
Dans les langues du Proche-Orient, le texte s'crit principalement de droite gauche (RTL). Toutefois, en rgle gnrale, le sens de texte le plus frquemment utilis est bidirectionnel, un mlange de texte de gauche droite et de droite gauche. Un exemple de texte bidi est un paragraphe qui comporterait du texte en arabe et du texte en anglais. Dans CS6, vous pouvez utiliser Dreamweaver pour taper du texte en arabe, hbreu ou bidi dans le mode Cration et le mode Code. Dans la version proche-orientale de Dreamweaver, l'attribut de sens Droite gauche peut tre appliqu deux objets notionnels : les paragraphes et les caractres. L'attribut direction peut tre appliqu aux balises prises en charge par la spcification HTML. L'attribut direction peut avoir les valeurs suivantes : ltr (par dfaut), rtl ou inherit.
Attribut direction dans le code CSS Lorsque vous saisissez du texte en arabe ou en hbreu, ou du texte mixte, Dreamweaver reconnat les caractres comme tant afficher de droite gauche (LTR) et les prsente de la faon approprie.
Editeur de balises
Vous pouvez appliquer les paramtres de sens et de langue l'aide de l'diteur de balises.
En haut
Editeur de balises
Sens du texte et unicode-bidi dans les rgles CSS
En haut
Vous pouvez spcifier le sens du texte sous la forme d'une rgle CSS. Dans la bote de dialogue Dfinition d'une rgle CSS, spcifiez les options Sens Direction et bidi Unicode-options.
Options de langue dans les rgles CSS
Proprits des tableaux
En haut
Les tableaux de droite gauche sont aligns droite et les colonnes sont tries de droite gauche. Les poignes de redimensionnement se trouvent sur le ct gauche. Lors de l'emploi de la touche TAB, le curseur se dplace de la droite vers la gauche. Indiquez le sens du tableau l'aide du panneau Proprits.
278
Tableau de droite gauche
Proprits des balises Div

L'attribut Direction permet d'indiquer le sens de la balise Div dans les proprits.
En haut
Sens d'une balise Div
279
Utilisation du widget Barre de menus Spry

Les widgets Spry ne sont pas pris en charge dans Dreamweaver CC et les versions ultrieures. Au lieu de widgets Spry, vous pouvez utiliser des widgets jQuery dans Dreamweaver CC et les versions ultrieures. Pour plus d'informations sur les widgets jQuery, voir Utilisation de widgets jQuery.
A propos du widget Barre de menus Insertion et modification du widget Barre de menus Personnalisation du widget Barre de menus
A propos du widget Barre de menus
En haut
Un widget Barre de menus est un ensemble de boutons de menu de navigation. Lorsque le visiteur d'un site place le pointeur de la souris audessus de ces boutons, ils affichent des sous-menus. Les barres de menus permettent d'afficher une grande quantit d'informations de navigation dans un espace compact et de donner aux visiteurs du site un aperu de son contenu sans les contraindre l'explorer dans ses moindres recoins. Dreamweaver permet d'insrer deux types de widgets Barre de menus : une barre verticale et l'autre horizontale. L'exemple suivant montre un widget Barre de menus horizontale dont le troisime lment de menu est dvelopp :
Widget Barre de menus (consistant en balises <ul>, <li> et <a>) A. Elment de menu avec sous-menu B. Elment de sous-menu avec sous-menu Le code HTML du widget Barre de menus comprend une balise ul extrieure contenant une balise li pour chaque lment de menu de niveau suprieur. Les lments de menu de niveau suprieur (balises li) contiennent leur tous des balises ul et li qui dfinissent les sous-menus de chacun d'eux. Ces sous-menus peuvent leur tour comprendre des sous-menus. Les menus de niveau suprieur et les sous-menus peuvent contenir autant d'lments de sous-menu que vous le souhaitez. Vous trouverez une explication plus dtaille du fonctionnement du widget Barre de menus, ainsi qu'une description complte de son code, l'adresse www.adobe.com/go/learn_dw_sprymenubar_fr. Vous trouverez un didacticiel consacr la cration d'une barre de menus Spry l'adresse www.adobe.com/go/vid0168_fr.
Insertion et modification du widget Barre de menus

Insertion du widget Barre de menus
1. Choisissez Insertion > Spry > Barre de menus Spry. 2. Slectionnez Horizontale ou Verticale, puis cliquez sur OK. Remarque : Vous pouvez galement insrer un widget Barre de menus par l'intermdiaire de la catgorie Spry du panneau Insertion.
En haut
Remarque : Le widget Barre de menus Spry emploie des calques DHTML pour afficher des sections de code HTML au-dessus d'autres sections. Si votre page comporte du contenu cr l'aide d'Adobe Flash, un problme peut se poser. Les fichiers SDF sont en effet toujours affichs audessus de tous les autres calques DHTML, si bien qu'il se peut que ce fichier SWF s'affiche au-dessus de vos sous-menus. La solution ce problme consiste modifier les paramtres du fichier SWF, de manire employer wmode="transparent". Vous pouvez le faire aisment en slectionnant le fichier SWF dans la fentre de document puis en rglant l'option wmode sur transparent dans l'inspecteur Proprits. Pour plus d'informations, voir www.adobe.com/go/15523_fr.
Ajout ou suppression de menus et de sous-menus

L'inspecteur Proprits (Fentre > Proprits) permet d'ajouter des lments de menu au widget Barre de menus et d'en supprimer. Ajout d'un lment de menu principal 1. Slectionnez un widget Barre de menus dans la fentre de document.
280
2. Dans l'inspecteur Proprits, cliquez sur le bouton Plus au-dessus de la premire colonne. 3. (Facultatif) Renommez le nouvel lment de menu en modifiant son texte par dfaut, dans la fentre de document ou dans la zone de texte de l'inspecteur Proprits. Ajout d'un lment de sous-menu 1. Slectionnez un widget Barre de menus dans la fentre de document. 2. Dans l'inspecteur Proprits, slectionnez le nom de l'lment de menu principal auquel vous voulez ajouter le sous-menu. 3. Cliquez sur le bouton Plus au-dessus de la deuxime colonne. 4. (Facultatif) Renommez le nouvel lment de sous-menu en modifiant son texte par dfaut, dans la fentre de document ou dans la zone de texte de l'inspecteur Proprits. Pour ajouter un sous-menu un sous-menu, slectionnez le nom de ce dernier, puis cliquez sur le bouton Plus au-dessus de la troisime colonne de l'inspecteur Proprits. Remarque : Dreamweaver ne prend en charge que deux niveaux de sous-menus en mode Cration, mais vous pouvez en ajouter autant que vous le voulez en mode Code. Suppression d'un lment de menu principal ou de sous-menu 1. Slectionnez un widget Barre de menus dans la fentre de document. 2. Dans l'inspecteur Proprits, slectionnez le nom de l'lment de menu principal ou de sous-menu supprimer, puis cliquez sur le bouton Moins.
Modification de l'ordre des lments de menu

1. Slectionnez un widget Barre de menus dans la fentre de document. 2. Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez le nom de l'lment de menu dplacer. 3. Cliquez sur les flches vers le haut ou vers le bas pour monter ou descendre l'lment de menu.
Modification du texte d'un lment de menu

1. Slectionnez un widget Barre de menus dans la fentre de document. 2. Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez le nom de l'lment de menu dont vous voulez modifier le texte. 3. Apportez les modifications dsires dans la zone de texte.
Liaison d'un lment de menu

1. Slectionnez un widget Barre de menus dans la fentre de document. 2. Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez le nom de l'lment de menu auquel vous voulez appliquer un lien. 3. Entrez le lien dans la zone Lien ou cliquez sur l'icne reprsentant un dossier afin de rechercher un fichier.
Cration d'une infobulle pour un lment de menu

1. Slectionnez un widget Barre de menus dans la fentre de document. 2. Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez le nom de l'lment de menu pour lequel vous voulez crer une infobulle. 3. Entrez le texte de l'infobulle dans la zone Titre.
Attribution d'un attribut cible un lment de menu

L'attribut cible dtermine l'endroit o une page lie doit tre ouverte. Par exemple, vous pouvez attribuer un attribut cible un lment de menu de faon ce que la page lie s'affiche dans une nouvelle fentre de navigateur lorsqu'un visiteur du site clique sur son lien. Si vous employez des jeux de cadres, vous pouvez galement dfinir le nom d'un cadre dans lequel la page lie doit s'ouvrir. 1. Slectionnez un widget Barre de menus dans la fentre de document. 2. Dans l'inspecteur Proprits (Fentre > Proprits), slectionnez le nom de l'lment de menu auquel vous voulez attribuer un attribut cible. 3. Entrez l'un des quatre attributs dans la zone Cible : _blank Ouvre la page lie dans une nouvelle fentre du navigateur. _self Charge la page lie dans la mme fentre de navigateur. Il s'agit de l'option par dfaut. Si la page se trouve dans un cadre ou un jeu de cadres, elle se charge dans ce cadre. _parent Charge le document li dans le parent de jeu de cadres immdiat du document. _top Charge la page lie dans la fentre suprieure d'un jeu de cadres.
Dsactivation des styles

281
Vous pouvez dsactiver le style d'un widget Barre de menus de manire mieux voir sa structure HTML en mode Cration. Par exemple, lorsque vous dsactivez les styles, les lments de la barre de menus s'affichent sous la forme d'une liste puces sur la page et pas sous la forme d'lments mis en forme dans une barre de menus. 1. Slectionnez un widget Barre de menus dans la fentre de document. 2. Cliquez sur le bouton Dsactiver les styles de l'inspecteur Proprits (Fentre > Proprits).
Modification de l'orientation d'un widget Barre de menus

Vous pouvez modifier l'orientation d'un widget Barre de menus, de manire transformer une barre horizontale en barre verticale et inversement. Il suffit pour ce faire de modifier le code HTML de la barre de menus et de vrifier que votre dossier SpryAssets contient bien le fichier CSS correct. L'exemple suivant transforme un widget Barre de menus horizontale en widget Barre de menus verticale. 1. Dans Dreamweaver, ouvrez la page qui contient un widget Barre de menus horizontale. 2. Insrez un widget Barre de menus verticale (Insertion > Spry > Barre de menus Spry) puis enregistrez la page. Cette tape garantit l'inclusion du fichier CSS correct pour une barre de menus verticale dans votre site. Remarque : Si votre site comprend dj un autre widget Barre de menus verticale, il n'est pas ncessaire d'en insrer un nouveau. Vous pouvez vous contenter de joindre le fichier SpryMenuBarVertical.css la page au lieu de cliquer sur le bouton Attacher une feuille de style du panneau Styles CSS (Fentre > Styles CSS). 3. Supprimez la barre de menus verticale. 4. En mode Code (Affichage > Code), accdez la classe MenuBarHorizontal et remplacez-la par MenuBarVertical. La classe MenuBarHorizontal est dfinie dans la balise conteneur ul de la barre de menus (<ul id="MenuBar1" class="MenuBarHorizontal"> ). 5. Aprs le code de la barre de menus, accdez au constructeur de la barre : var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); 6. Supprimez l'option de prchargement imgDown (et la virgule) du constructeur : var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); Remarque : En cas de conversion d'une barre de menus verticale en barre horizontale, vous devez au contraire ajouter l'option de prchargement imgDown et la virgule. var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); 7. (Facultatif) Si votre page ne comprend plus d'autres widgets Barre de menus horizontale, supprimez le lien vers l'ancien fichier MenuBarHorizontal.css dans l'en-tte du document. 8. Enregistrez la page.
Personnalisation du widget Barre de menus
En haut
Bien que l'inspecteur Proprits permette d'apporter des modifications simples un widget Barre de menus, il ne prend pas en charge les tches de dfinition de style personnalises. Vous pouvez modifier les rgles CSS du widget Barre de menus de manire crer une barre de menus adapte vos besoins. Toutes les rgles CSS des sections suivantes font rfrence aux rgles par dfaut, qui figurent dans le fichier SpryMenuBarHorizontal.css ou SpryMenuBarVertical.css (selon l'option slectionne). Dreamweaver enregistre ces fichiers CSS dans le dossier SpryAssets de votre site ds que vous crez un widget Barre de menus Spry. Ces fichiers contiennent galement des informations commentes au sujet de divers styles qui s'appliquent au widget. Mme s'il est facile de modifier directement les rgles du widget Barre de menus dans le fichier CSS qui l'accompagne, vous pouvez galement utiliser le panneau Styles CSS pour modifier le code CSS de la barre de menus. Le panneau Styles CSS peut vous aider trouver les classes CSS attribues diffrentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
Modification du style du texte d'un lment de menu

Le code CSS joint la balise <a> contient les informations de style du texte. La balise <a> comprend galement plusieurs valeurs de classe de style de texte pertinentes qui concernent diffrents tats des menus. Pour modifier le style du texte d'un lment de menu, recherchez la rgle CSS approprie dans le tableau suivant, puis modifiez sa valeur par dfaut :
Style modifier
Rgle CSS pour une barre de menus

282
Proprits correspondantes et
verticale ou horizontale Texte par dfaut Couleur du texte lorsque le pointeur de la souris se trouve au-dessus de celui-ci Couleur du texte actif Couleur d'un lment de la barre de menus lorsque le pointeur de la souris se trouve au-dessus de celui-ci Couleur d'un lment de sous-menu lorsque le pointeur de la souris se trouve au-dessus de celui-ci ul.MenuBarVertical a, ul.MenuBarHorizontal a ul.MenuBarVertical a:hover, ul.MenuBarHorizontal a:hover
valeurs par dfaut color: #333; text-decoration: none; color: #FFF;
ul.MenuBarVertical a:focus, ul.MenuBarHorizontal a:focus ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemHover ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
color: #FFF; color: #FFF;
color: #FFF;
Modification de la couleur d'arrire-plan d'un lment de menu

Le code CSS joint la balise <a> contient les informations de couleur d'arrire-plan d'un lment de menu. La balise <a> comprend galement plusieurs valeurs de classe de couleur d'arrire-plan pertinentes qui concernent diffrents tats des menus. Pour modifier la couleur d'arrire-plan d'un lment de menu, recherchez la rgle CSS approprie dans le tableau suivant, puis modifiez sa valeur par dfaut :
Couleur modifier
Rgle CSS pour une barre de menus verticale ou horizontale ul.MenuBarVertical a, ul.MenuBarHorizontal a ul.MenuBarVertical a:hover, ul.MenuBarHorizontal a:hover
Proprits correspondantes et valeurs par dfaut background-color: #EEE; background-color: #33C;
Arrire-plan par dfaut Couleur d'arrire-plan de l'lment lorsque le pointeur de la souris se trouve au-dessus de celui-ci Couleur d'arrire-plan quand l'lment est actif Couleur d'un lment de la barre de menus lorsque le pointeur de la souris se trouve au-dessus de celui-ci Couleur d'un lment de sous-menu lorsque le pointeur de la souris se trouve au-dessus de celui-ci
ul.MenuBarVertical a:focus, ul.MenuBarHorizontal a:focus
background-color: #33C;
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemHover ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
Modification de la taille des lments de menu

Vous pouvez modifier la taille des lments de menu en modifiant les proprits de largeur des balises li et ul de ces lments. 1. Accdez la rgle ul.MenuBarVertical li ou ul.MenuBarHorizontal li : 2. Modifiez la proprit width afin de lui donner la largeur dsire (ou remplacez sa valeur par auto pour supprimer une largeur fixe, puis ajoutez la proprit et la valeur white-space: nowrap; la rgle). 3. Accdez la rgle ul.MenuBarVertical ul ou ul.MenuBarHorizontal ul. 4. Modifiez la proprit width afin de lui donner la largeur dsire (ou remplacez sa valeur par auto pour supprimer une largeur fixe). 5. Accdez la rgle ul.MenuBarVertical ul li ou ul.MenuBarHorizontal ul li : 6. Ajoutez les proprits suivantes la rgle : float: none; et background-color: transparent;. 7. Supprimez la proprit width: 8.2em; et sa valeur.
Dfinition de la position des sous-menus

La position des sous-menus d'une barre de menus Spry est contrle par la proprit margin des balises ul du sous-menu.
283
1. Accdez la rgle ul.MenuBarVertical ul ou ul.MenuBarHorizontal ul. 2. Remplacez les valeurs par dfaut margin: -5% 0 0 95%; par les valeurs dsires.
Didacticiel sur le widget Barre de menus Spry Panneau Styles CSS en mode Actuel
284
Dfinition des proprits de texte dans l'inspecteur Proprits

A propos de la mise en forme de texte (CSS ou HTML) Modification de rgles CSS dans l'inspecteur Proprits Dfinition de formatage HTML dans l'inspecteur Proprits Modification du nom d'une classe depuis l'inspecteur Proprits HTML Vous pouvez utiliser l'inspecteur Proprits de texte pour appliquer un formatage HTML ou CSS. Lorsque vous appliquez un formatage HTML, Dreamweaver ajoute des proprits au code HTML du corps de la page. Lorsque vous appliquez un formatage CSS, Dreamweaver crit les proprits dans l'en-tte du document ou dans une feuille de style spare. Remarque : Lorsque vous crez des styles CSS intgrs, Dreamweaver ajoute directement le code d'attribut du style au corps de la page.
A propos du formatage de texte (CSS et HTML)
En haut
Les mthodes de formatage du texte dans Dreamweaver s'apparentent celles d'un logiciel de traitement de texte standard. Vous pouvez dfinir le style de formatage par dfaut (Paragraphe, En-tte 1, En-tte 2, etc.) pour un bloc de texte, modifier la police, la taille la couleur et l'alignement du texte slectionn ou appliquer des styles de texte tels que gras, italique, code (texte chasse fixe) et soulign. Dreamweaver comprend deux inspecteurs Proprits, intgrs pour n'en faire qu'un : l'inspecteur Proprits CSS et l'inspecteur Proprits HTML. Lorsque vous utilisez l'inspecteur Proprits CSS, Dreamweaver met en forme le texte l'aide de feuilles de style en cascade (CSS). Les styles CSS offrent aux concepteurs et dveloppeurs Web un meilleur contrle de l'aspect de la page Web tout en proposant des fonctions qui permettent d'amliorer l'accessibilit et de rduire la taille des fichiers. L'inspecteur Proprits CSS permet d'accder des styles existants et d'en crer de nouveaux. CSS permet de modifier le style d'une page Web sans compromettre sa structure. En sparant les lments de conception visuelle (polices, couleurs, marges, etc.) des lments logiques internes la structure d'une page Web, CSS offre aux concepteurs un contrle la fois visuel et typographique sans nuire l'intgrit du contenu. De plus, dfinir une conception typographique et une mise en page depuis un bloc unique de code (sans avoir recours aux cartes graphiques, aux balises font, aux tableaux et aux GIF d'espacement) permet un chargement plus rapide, simplifie la maintenance du site et fournit un point central partir duquel il est possible de contrler les attributs de conception sur plusieurs pages Web. Vous pouvez stocker les styles crs l'aide de CSS directement dans le document ou, pour disposer de davantage de puissance et de flexibilit, vous pouvez les stocker dans une feuille de style externe. Si vous associez une feuille de style externe plusieurs pages Web, toutes les pages s'adapteront automatiquement si vous effectuez une modification dans cette feuille de style. Pour accder toutes les rgles CSS d'une page, utilisez le panneau Styles CSS (Fentre > Styles CSS). Pour accder aux rgles qui s'appliquent la slection actuelle, utilisez le panneau Styles CSS (mode Actuel) ou le menu Rgle cible de l'inspecteur Proprits CSS. Si vous le prfrez, vous pouvez mettre en forme le texte de vos pages Web l'aide de balises de marquage HTML. Pour employer des balises HTML au lieu de CSS, mettez le texte en forme l'aide de l'inspecteur Proprits HTML. Remarque : Vous pouvez combiner des formatages CSS et HTML 3.2 dans une mme page. Le formatage est appliqu de faon hirarchique : le formatage HTML 3.2 supplante celui appliqu par des feuilles de style CSS externes et le formatage CSS intgr dans un document supplante les styles CSS externes.
Modification de rgles CSS dans l'inspecteur Proprits

1. Si ce n'est pas dj fait, ouvrez l'inspecteur Proprits (Fentre > Proprits) puis cliquez sur le bouton CSS.
En haut
2. Effectuez l'une des oprations suivantes : Placez le point d'insertion dans un bloc de texte qui a t mis en forme l'aide d'une rgle que vous voulez modifier. La rgle s'affiche dans le menu Rgle cible. Choisissez une rgle dans le menu Rgle cible. 3. Apportez les modifications dsires la rgle l'aide des diffrentes options de l'inspecteur Proprits CSS. Rgle cible La rgle que vous modifiez dans l'inspecteur Proprits CSS. Lorsqu'un style existant est appliqu au texte, la rgle qui influe sur le format du texte s'affiche lorsque vous cliquez dans le texte sur la page. Vous pouvez galement utiliser le menu Rgle cible pour crer de nouvelles rgles CSS et de nouveaux styles intgrs, ou pour appliquer des classes existantes au texte slectionn. Si vous crez une nouvelle rgle, vous devez remplir la bote de dialogue Nouvelle rgle CSS. Pour plus d'informations, consultez les liens dans le bas de cette rubrique. Modifier la rgle Ouvre la bote de dialogue Dfinition des rgles CSS pour la rgle cible. Par contre, si vous choisissez Nouvelle rgle
285
CSS dans le menu Rgle cible puis que vous cliquez sur le bouton Modifier la rgle, Dreamweaver ouvre la bote de dialogue Dfinition de nouvelle rgle CSS. Panneau CSS Ouvre le panneau Styles CSS et affiche les proprits de la rgle cible en mode Actuel. Police Modifie la police de la rgle cible. Taille Dfinit la taille de police de la rgle cible. Couleur du texte Dfinit la couleur slectionn comme couleur de police dans la rgle cible. Slectionnez une couleur scurise pour le Web en cliquant sur le slecteur de couleur ou tapez directement une valeur hexadcimale (par exemple, #FF0000) dans le champ de texte adjacent. Gras Ajoute la proprit gras la rgle cible. Italique Ajoute la proprit italique la rgle cible. Aligner gauche, Centrer et Aligner droite Ajoute les proprits d'alignement respectives la rgle cible. Remarque : Les proprits Police, Taille, Couleur du texte, Gras, Italique et Alignement affichent toujours les proprits de la rgle qui s'applique la slection actuelle dans la fentre de document. Lorsque vous modifiez l'une de ces proprits, vous influez sur la rgle cible. Vous trouverez un didacticiel vido sur l'utilisation de l'inspecteur Proprits CSS l'adresse www.adobe.com/go/lrvid4041_dw_fr.
Dfinition de formatage HTML dans l'inspecteur Proprits

1. Si ce n'est pas dj fait, ouvrez l'inspecteur Proprits (Fentre > Proprits) puis cliquez sur le bouton HTML. 2. Slectionnez le texte que vous souhaitez mettre en forme. 3. Dfinissez les options que vous voulez appliquer au texte slectionn :
En haut
Format Dfinit le style de paragraphe du texte slectionn. Paragraphe applique un format par dfaut pour une balise <p> , En-tte 1 ajoute une balise H1, et ainsi de suite. ID Attribue un ID votre slection. Le menu ID prsente (le cas chant) tous les ID non utiliss et dclars dans le document. Classe Affiche le style de classe appliqu au texte slectionn. Si aucun style n'est appliqu la slection, la mention Aucun styleCSS apparat dans le menu droulant. Si plusieurs styles sont appliqus la slection, le menu est vide. Le menu Style permet d'effectuer les oprations suivantes : Slectionnez le style appliquer la slection. Choisissez Aucun pour ne plus appliquer le style slectionn. Pour renommer le style, choisissez Renommer. Slectionnez Attacher une feuille de style pour ouvrir une bote de dialogue qui vous permet d'attacher une feuille de style externe la page. Gras Applique soit <b> soit <strong> au texte slectionn en fonction de la prfrence de style dfinie dans la catgorie Gnral de la bote de dialogue Prfrences. Italique Applique soit <i> soit <em> au texte slectionn en fonction de la prfrence de style dfinie dans la catgorie Gnral de la bote de dialogue Prfrences. Liste non ordonne Cre une liste puces partir du texte slectionn. Si aucun texte n'est slectionn, une nouvelle liste puces est ouverte. Liste numrote Cre une liste numrote partir du texte slectionn. Si aucun texte n'est slectionn, une nouvelle liste numrote est ouverte. Blockquote et Supprimer Blockquote Augmente ou supprime la mise en retrait du texte slectionn, en insrant ou supprimant la balise blockquote . Au sein d'une liste, l'ajout d'un retrait cre une liste imbrique et sa suppression ramne les lments de la liste au niveau parent. Lien Cre une liste puces partir du texte slectionn. Cliquez sur l'icne de dossier pour rechercher un fichier de votre site, faites glisser l'icne Pointer vers un fichier sur un fichier du panneau Fichiers ou faites glisser un fichier du panneau Fichiers sur la zone. Titre Dfinit l'infobulle textuelle d'un lien hypertexte.
286
Cible Spcifie la fentre ou le cadre dans lequel sera charg le document li : _blank charge le document li dans une nouvelle fentre, sans nom, du navigateur. _parent charge le document li dans le jeu de cadres parent (ou dans la fentre parente) du cadre contenant le lien. Si le cadre contenant le lien n'est pas imbriqu, le document li sera charg dans la fentre de base du navigateur. _self charge le document li dans le mme cadre (ou la mme fentre) que le lien. Il s'agit de la cible par dfaut, de sorte qu'il est le plus souvent inutile de la spcifier. _top charge le document li dans la fentre de base du navigateur, en supprimant tous les cadres.
Modification du nom d'une classe partir de l'inspecteur Proprits HTML

Dreamweaver affiche toutes les classes disponibles pour votre page dans le menu Classe de l'inspecteur Proprits HTML. Vous pouvez renommer des styles dans cette liste en choisissant l'option Renommer, la fin de la liste des styles de classes. 1. Choisissez Renommer dans le menu droulant Style de l'inspecteur Proprits du texte. 2. Slectionnez le style renommer dans le menu contextuel Renommer un style. 3. Entrez un nouveau nom dans la zone Nouveau nom, puis cliquez sur OK.
Ouverture du panneau Styles CSS
En haut
287
Cration et ouverture de documents

L'interface utilisateur de Dreamweaver CC et les versions ultrieures a t simplifie. Par consquent, il se peut que vous ne trouviez pas certaines options dcrites dans cet article dans Dreamweaver CC et les versions ultrieures. Pour plus dinformations, voir cet article.
A propos de la cration de documents Dreamweaver Types de fichier Dreamweaver Cration d'une mise en page l'aide une page vierge Cration d'un modle vierge Cration d'une page base sur un modle existant Cration d'une page partir d'un fichier d'exemple Dreamweaver Cration d'autres types de pages Enregistrement et rtablissement de documents Dfinition du type et du codage par dfaut d'un document Conversion de HTML5 vers un ancien doctype Dfinition de l'extension de fichier par dfaut des nouveaux documents HTML Ouverture et modification de documents existants Ouverture de fichiers associs Ouverture de fichiers association dynamique Nettoyage de fichiers HTML crs avec Microsoft Word
A propos de la cration de documents Dreamweaver
En haut
Dreamweaver fournit un environnement souple pour l'utilisation de divers documents Web. Outre les documents HTML, vous pouvez crer et ouvrir divers documents en mode texte, de type CFML (ColdFusion Markup Language), ASP, JavaScript et CSS (Cascading Style Sheets). Les fichiers de code source, tels que Visual Basic, .NET, C# et Java, sont galement pris en charge. Dreamweaver propose diverses options pour la cration d'un nouveau document. Vous pouvez crer les types de document suivants : un nouveau document ou un modle vierge ; un document bas sur l'une des mises en pages prdfinies fournies avec Dreamweaver, dont plus de 30 mises en page bases sur CSS ; un document bas sur un de vos modles existants. Vous pouvez galement dfinir les prfrences des documents. Par exemple, si vous avez l'habitude de travailler avec un type particulier de document, vous pouvez le dfinir comme type par dfaut pour les nouvelles pages. Vous pouvez aisment dfinir des proprits de document, telles que les balises meta, le titre du document et la couleur de l'arrire-plan, ainsi que d'autres proprits de page, en mode Cration ou en mode Code.
Types de fichier Dreamweaver
En haut
Vous pouvez travailler avec un grand choix de types de fichiers dans Dreamweaver. Le fichier HTML est celui avec lequel vous travaillerez le plus souvent. Les fichiers HTML (pour fichiers de type Hypertext Markup Language) contiennent le langage base de balises qui se charge d'afficher une page Web dans un navigateur. Vous pouvez enregistrer les fichiers HTML avec l'extension .html ou .htm. Dreamweaver enregistre par dfaut les fichiers avec l'extension .html. Dreamweaver permet de crer et de modifier des pages Web HTML5. Les mises en forme de dpart sont galement disponibles pour la cration de nouvelles pages HTML5. Voici quelques autres types de fichiers courants que vous pourriez utiliser quand vous travaillez avec Dreamweaver : CSS Les fichiers CSS (Cascading Style Sheet, feuille de style en cascade) possdent l'extension .css. Ils sont utiliss pour formater le contenu HTML et fixer le positionnement de divers lments de page. GIF Les fichiers GIF (Graphics Interchange Format) possdent l'extension .gif. Ce format graphique est trs utilis dans les dessins humoristiques, les logos, les graphismes pourvus de zones transparentes et les animations. Les GIF sont constitus d'un maximum de 256 couleurs. JPEG Les fichiers JPEG (Joint Photographic Experts Group, du nom de l'organisation qui a cr le format) possdent l'extension .jpg et correspondent gnralement des photographies ou des images trs colores. Ce format est le plus appropri pour les photographies numriques ou scannes, les images utilisant des textures, les images pourvues de transitions gradient de couleurs ainsi que toutes les images
288
exigeant plus de 256 couleurs. XML Les fichiers XML (Extensible Markup Language) possdent l'extension .xml. Ils contiennent des donnes brutes qui peuvent tre formates en utilisant XSL (Extensible Stylesheet Language). XSL Les fichiers XSL (Extensible Stylesheet Language) possdent l'extension .xsl ou .xslt. Ils sont utiliss pour crer des donnes XML que vous voulez afficher sur une page Web.
En haut
Cration d'une mise en page l'aide une page vierge
Vous pouvez crer une page contenant une mise en forme CSS prdfinie, ou crer une page totalement vierge puis crer la mise en forme de votre choix. 1. Slectionnez Fichier > Nouveau. 2. Dans la catgorie Page vierge de la bote de dialogue Nouveau document, slectionnez le type de page crer dans la colonne Type de page. Par exemple, slectionnez HTML pour crer une page HTML ordinaire. 3. Si vous voulez que la nouvelle page contienne une mise en forme CSS, slectionnez une mise en forme CSS prdfinie dans la colonne Mise en forme. Dans le cas contraire, cliquez sur Aucune. En fonction de votre slection, un aperu et la description de la mise en forme slectionne s'affichent sur la droite de la bote de dialogue. Les mises en forme CSS prdfinies fournissent les types de colonnes suivants : Fixe La largeur de colonne est dfinie en pixels. La colonne n'est pas redimensionne selon la taille du navigateur ou des paramtres de texte du visiteur du site. Liquide La largeur de colonne est dfinie en tant que pourcentage de la largeur du navigateur du visiteur du site. La mise en page s'adapte si le visiteur du site augmente ou diminue la largeur de son navigateur, mais pas en fonction des paramtres de texte dfinis par le visiteur. Dreamweaver propose galement deux mises en forme CSS HTML5 : deux et trois colonnes fixes. Remarque : Dans Dreamweaver CC et les versions ultrieures, seules les mises en forme CSS HTML5 sont disponibles. 4. Slectionnez un type de document dans le menu DocType. Dans la plupart des cas, vous pouvez utiliser la slection par dfaut, XHTML 1.0 Transitional ou HTML5 (Dreamweaver CC). Slectionnez l'une des dfinitions de type de document (DTD) XHTML pour rendre la page compatible XHTML. Par exemple, vous pouvez rendre un document HTML compatible XHTML en slectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu droulant. Le langage XHTML (Extensible Hypertext Markup Language) n'est autre qu'une nouvelle mouture de HTML sous la forme d'une application XML. En rgle gnrale, l'utilisation de XHTML vous permet d'exploiter les avantages de XML tout en garantissant la compatibilit descendante et ascendante de vos documents Web. Remarque : Pour plus d'informations sur XHTML, consultez le site Web du World Wide Web Consortium (W3C), qui contient la spcification pour XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) et XHTML 1.0 (www.w3c.org/TR/xhtml1/), ainsi que les sites de validateur XHTML o vous trouverez des fichiers Web (http://validator.w3.org/) et des fichiers locaux (http://validator.w3.org/file-upload.html). 5. Si vous avez choisi une mise en forme CSS dans la colonne Mise en forme, choisissez l'emplacement du code CSS de mise en forme dans la liste droulante CSS de mise en forme. Ajouter l'en-tte Ajoute le code CSS de mise en forme l'en-tte de la page que vous crez. Crer un nouveau fichier Ajoute le code CSS de mise en forme un nouveau fichier CSS externe et associe la nouvelle feuille de style la page que vous crez. Lier au fichier existant Permet d'indiquer un fichier CSS existant qui contient dj les rgles CSS requises pour la mise en forme. Pour ce faire, cliquez sur l'icne Ajouter une feuille de style au-dessus du volet Lier le fichier CSS, puis slectionnez une feuille de style CSS existante. Cette option est particulirement utile si vous voulez utiliser la mme mise en forme CSS (les rgles CSS figurant dans un fichier) dans plusieurs documents. 6. (Facultatif) Vous pouvez galement lier des feuilles de style CSS la nouvelle page (sans rapport avec la mise en forme CSS) lors de la cration de cette page. Pour ce faire, cliquez sur l'icne Ajouter une feuille de style au-dessus du volet Lier le fichier CSS, puis slectionnez une feuille de style CSS. Vous trouverez une description dtaille de ce processus dans l'article de David Powers Automatically attaching a style sheet to new documents (en anglais). 7. Choisissez Activer InContext Editing si vous voulez crer une page qui deviendra compatible avec InContext Editing ds que vous
289
l'enregistrerez. Une page compatible InContext Editing doit comporter au moins une balise div pouvant tre spcifie en tant que rgion modifiable. Par exemple, si vous avez slectionn le type de page HTML, vous devez choisir l'une des mises en forme CSS pour votre nouvelle page. Ces mises en forme contiennent en effet des balises div prdfinies. La rgion modifiable InContext Editing est automatiquement place dans la balise div avec l'ID content. Si vous le souhaitez, vous pourrez ajouter par la suite d'autres rgions modifiables la page. Remarque : InContext Editing a t supprim de Dreamweaver CC et des versions ultrieures. 8. Cliquez sur le bouton Prfrences pour dfinir les prfrences par dfaut du document (par exemple, le type de document, le codage et une extension de ficher). 9. Cliquez sur le lien Obtenir plus de contenu pour lancer Dreamweaver Exchange et tlcharger d'autres contenus de conception de pages. 10. Cliquez sur le bouton Crer. 11. Enregistrez la page (Fichier > Enregistrer). 12. Dans la bote de dialogue qui s'affiche, recherchez le dossier o vous voulez enregistrer le fichier. Il est conseill d'enregistrer votre fichier dans un site Dreamweaver. 13. Dans la zone de texte Nom de fichier, entrez le nom du fichier. Evitez les espaces et les caractres spciaux pour les noms de fichiers et de dossiers ; les noms de fichiers ne doivent pas commencer par un chiffre. En particulier, n'utilisez pas de caractres spciaux (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 caractres lors du transfert, rendant ainsi inoprants les liens vers ces fichiers.
Cration d'un modle vierge
En haut
La bote de dialogue Nouveau document permet de crer des modles Dreamweaver. Par dfaut, les modles sont enregistrs dans le dossier Templates de votre site. 1. Slectionnez Fichier > Nouveau. 2. Dans la bote de dialogue Nouveau document, slectionnez la catgorie Modle vierge. 3. Slectionnez le type de modle crer dans la colonne Type de modle. Par exemple, choisissez Modle HTML pour crer un modle HTML ordinaire, Modle ColdFusion pour crer un modle ColdFusion, et ainsi de suite. 4. Si vous voulez que la nouvelle page contienne une mise en forme CSS, slectionnez une mise en forme CSS prdfinie dans la colonne Mise en forme. Dans le cas contraire, cliquez sur Aucune. En fonction de votre slection, un aperu et la description de la mise en forme slectionne s'affichent sur la droite de la bote de dialogue. Les mises en forme CSS prdfinies fournissent les types de colonnes suivants : Fixe La largeur de colonne est dfinie en pixels. La colonne n'est pas redimensionne selon la taille du navigateur ou des paramtres de texte du visiteur du site. Liquide La largeur de colonne est dfinie en tant que pourcentage de la largeur du navigateur du visiteur du site. La mise en page s'adapte si le visiteur du site augmente ou diminue la largeur de son navigateur, mais pas en fonction des paramtres de texte dfinis par le visiteur. 5. Slectionnez un type de document dans le menu DocType. Dans la plupart des cas, vous pouvez conserver l'option par dfaut, XHTML 1.0 transitionnel. Slectionnez l'une des dfinitions de type de document (DTD) XHTML pour rendre la page compatible XHTML. Par exemple, vous pouvez rendre un document HTML compatible XHTML en slectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu droulant. Le langage XHTML (Extensible Hypertext Markup Language) n'est autre qu'une nouvelle mouture de HTML sous la forme d'une application XML. En rgle gnrale, l'utilisation de XHTML vous permet d'exploiter les avantages de XML tout en garantissant la compatibilit descendante et ascendante de vos documents Web. Remarque : Pour plus d'informations sur XHTML, consultez le site Web du World Wide Web Consortium (W3C), qui contient la spcification pour XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) et XHTML 1.0 (www.w3c.org/TR/xhtml1/), ainsi que les sites de validateur XHTML o vous trouverez des fichiers Web (http://validator.w3.org/) et des fichiers locaux (http://validator.w3.org/file-upload.html). 6. Si vous avez choisi une mise en forme CSS dans la colonne Mise en forme, choisissez l'emplacement du code CSS de mise en forme dans la liste droulante CSS de mise en forme.
290
Ajouter l'en-tte Ajoute le code CSS de mise en forme l'en-tte de la page que vous crez. Crer un nouveau fichier Ajoute le code CSS de mise en forme une nouvelle feuille de style CSS externe et associe la nouvelle feuille de style la page que vous crez. Lier au fichier existant Permet d'indiquer un fichier CSS existant qui contient dj les rgles CSS requises pour la mise en forme. Pour ce au-dessus du volet Lier le fichier CSS, puis slectionnez une feuille de style CSS faire, cliquez sur l'icne Ajouter une feuille de style existante. Cette option est particulirement utile si vous voulez utiliser la mme mise en forme CSS (les rgles CSS figurant dans un fichier) dans plusieurs documents. 7. (Facultatif) Vous pouvez galement lier des feuilles de style CSS la nouvelle page (sans rapport avec la mise en forme CSS) lors de la cration de cette page. Pour ce faire, cliquez sur l'icne Ajouter une feuille de style au-dessus du volet Lier le fichier CSS, puis slectionnez une feuille de style CSS. 8. Choisissez Activer InContext Editing si vous voulez crer une page qui deviendra compatible avec InContext Editing ds que vous l'enregistrerez. Une page compatible InContext Editing doit comporter au moins une balise div pouvant tre spcifie en tant que rgion modifiable. Par exemple, si vous avez slectionn le type de page HTML, vous devez choisir l'une des mises en forme CSS pour votre nouvelle page. Ces mises en forme contiennent en effet des balises div prdfinies. La rgion modifiable InContext Editing est automatiquement place dans la balise div avec l'ID content. Si vous le souhaitez, vous pourrez ajouter par la suite d'autres rgions modifiables la page. 9. Cliquez sur le bouton Prfrences pour dfinir les prfrences par dfaut du document (par exemple, le type de document, le codage et une extension de ficher). 10. Cliquez sur le lien Obtenir plus de contenu pour lancer Dreamweaver Exchange et tlcharger d'autres contenus de conception de pages. 11. Cliquez sur le bouton Crer. 12. Enregistrez la page (Fichier > Enregistrer). Si vous n'avez pas encore ajout de rgions modifiables au modle, une bote de dialogue vous en avertit. Cliquez sur OK pour refermer la bote de dialogue. 13. Dans la bote de dialogue Enregistrer sous, slectionnez le site dans lequel le modle doit tre enregistr. 14. Dans la zone de texte Nom de fichier, entrez le nom du nouveau modle. Il n'est pas ncessaire d'ajouter l'extension de fichier au nom du modle. Lorsque vous cliquez sur Enregistrer, l'extension .dwt est ajoute au nouveau modle, qui est enregistr dans le dossier Templates de votre site. Evitez les espaces et les caractres spciaux pour les noms de fichiers et de dossiers ; les noms de fichiers ne doivent pas commencer par un chiffre. En particulier, n'utilisez pas de caractres spciaux (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 caractres lors du transfert, rendant ainsi inoprants les liens vers ces fichiers.
Cration d'une page base sur un modle existant
En haut
Vous pouvez slectionner, prvisualiser et crer un nouveau document partir d'un modle existant. La bote de dialogue Nouveau document vous permet de slectionner un modle parmi les sites dfinis dans Dreamweaver ou d'utiliser le panneau Actifs pour crer un nouveau document sur la base d'un modle existant.
Cration d'un document bas sur un modle

1. Slectionnez Fichier > Nouveau. 2. Dans la bote de dialogue Nouveau document, slectionnez la catgorie Page du modle. 3. Dans la colonne Site, slectionnez le site Dreamweaver contenant le modle utiliser, puis slectionnez un modle dans la liste de droite. 4. Dsactivez l'option Mettre la page jour quand le modle est modifi si vous ne souhaitez pas que la page soit mise jour lors de chaque modification apporte au modle sur lequel elle est base. 5. Cliquez sur le bouton Prfrences pour dfinir les prfrences par dfaut du document (par exemple, le type de document, le codage et une extension de ficher). 6. Cliquez sur le lien Obtenir plus de contenu pour lancer Dreamweaver Exchange et tlcharger d'autres contenus de conception de pages. 7. Cliquez sur Crer puis enregistrez le document (Fichier > Enregistrer).
291
Cration d'un document partir d'un modle l'aide du panneau Actifs

1. Ouvrez le panneau Actifs (Fentre > Actifs) s'il n'est pas dj ouvert. 2. Dans le panneau Actifs, cliquez sur l'icne Modles situe gauche pour afficher la liste des modles utiliss dans votre site actuel.
Si le modle que vous souhaitez utiliser vient d'tre cr, il peut tre ncessaire de cliquer sur le bouton Actualiser pour l'afficher. 3. Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur le modle appliquer, puis slectionnez Nouveau partir d'un modle. Le document s'ouvre dans la fentre de document. 4. Enregistrez le document.
Cration d'un document bas sur un fichier d'exemple Dreamweaver
En haut
Dreamweaver est fourni avec plusieurs fichiers de conception CSS raliss par des professionnels, ainsi que des pages de dmarrage pour applications mobiles. Vous pouvez utiliser ces fichiers d'exemple comme point de dpart pour la cration de pages sur vos sites Web. Lorsque vous crez un document bas sur un fichier d'exemple, Dreamweaver cre une copie du fichier. La bote de dialogue Nouveau document permet de prvisualiser un fichier d'exemple et de consulter une brve description des lments de conception d'un document. Dans le cas de feuilles de style en cascade (CSS), vous pouvez copier une feuille prdfinie pour l'appliquer vos documents. 1. Slectionnez Fichier > Nouveau. 2. Dans la bote de dialogue Nouveau document, slectionnez la catgorie Page de l'exemple. Dans Dreamweaver CC, slectionnez la catgorie Modles de dpart. 3. Dans la colonne Dossier exemple, choisissez Feuille de style en cascade ou Pages de dmarrage mobiles, puis slectionnez un fichier d'exemple dans la liste de droite. Remarque : L'option Feuille de style CSS a t supprime de Dreamweaver CC et des versions ultrieures 4. Cliquez sur le bouton Crer. Le nouveau document s'ouvre dans la fentre de document (modes Code et Cration). Si vous avez slectionn Feuille de style de cascade (CSS), la feuille de style CSS s'affiche en mode Code. 5. Enregistrez le document (Fichier > Enregistrer). 6. Si la bote de dialogue Copier les fichiers dpendants s'affiche, dfinissez les options, puis cliquez sur Copier pour copier les actifs dans le dossier slectionn. Vous pouvez choisir l'emplacement des fichiers dpendants ou enregistrer les fichiers dans le dossier par dfaut cr par Dreamweaver (ce dossier est cr en fonction du nom source du fichier d'exemple).
Voir aussi
En haut
Cration d'autres types de pages
La catgorie Autre de la bote de dialogue Nouveau document permet de crer divers types de page qui peuvent tre utiles dans Dreamweaver, comme des pages C#, VBScript et en texte seul. 1. Slectionnez Fichier > Nouveau. 2. Dans la bote de dialogue Nouveau document, slectionnez la catgorie Autre. Remarque : La catgorie Autre a t supprime de Dreamweaver CC et des versions ultrieures. 3. Slectionnez le type de document crer dans la colonne Type de page, puis cliquez sur le bouton Crer. 4. Enregistrez le document (Fichier > Enregistrer).
Enregistrement et rtablissement de documents

292
En haut
Vous pouvez enregistrer un document en utilisant son nom et son emplacement actuels ou enregistrer une copie du document sous un nouveau nom, dans un autre emplacement. Evitez tout espace ou caractre spcial dans les noms de fichier ou de dossier. En particulier, n'utilisez pas de caractres spciaux (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 caractres lors du transfert, rendant ainsi inoprants les liens vers ces fichiers. En outre, ne commencez pas le nom de fichier par un numro.
Enregistrement d'un document

1. Effectuez l'une des oprations suivantes : Pour craser la version prsente sur le disque et enregistrer toute modification effectue, slectionnez Fichier > Enregistrer. Pour enregistrer le fichier dans un dossier diffrent ou sous un autre nom, slectionnez Fichier > Enregistrer sous. 2. Dans la bote de dialogue Enregistrer sous qui s'affiche, recherchez le dossier dans lequel vous voulez enregistrer le fichier. 3. Dans la zone de texte Nom de fichier, entrez le nom du fichier. 4. Cliquez sur Enregistrer pour enregistrer le fichier .
Enregistrement de tous les documents ouverts

1. Choisissez Fichier > Enregistrer tout. 2. Si des documents non enregistrs sont ouverts, la bote de dialogue Enregistrer sous s'affiche pour chacun d'entre eux. Dans la bote de dialogue qui s'affiche, recherchez le dossier o vous voulez enregistrer le fichier. 3. Dans la zone de texte Nom de fichier, entrez le nom du fichier puis cliquez sur Enregistrer.
Rtablissement de la dernire version enregistre d'un document

1. Slectionnez Fichier > Rtablir. Une bote de dialogue vous invite confirmer l'annulation de vos modifications et le retour la version prcdemment enregistre. 2. Cliquez sur Oui pour revenir la version prcdente ou sur Non pour appliquer les modifications. Remarque : Si vous enregistrez un document, puis que vous quittez , il ne sera pas possible de revenir la version prcdente lors de la prochaine utilisation de Dreamweaver.
Dfinition du type et du codage par dfaut d'un document

Vous pouvez dfinir le type de document par dfaut utilis pour un site.
En haut
Par exemple, si la plupart des pages de votre site sont de type spcifique (tel que les documents ColdFusion, HTML ou ASP), vous pouvez dfinir des prfrences de document pour crer automatiquement les nouveaux documents de ce type. 1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). Vous pouvez galement cliquer sur le bouton Prfrences dans la bote de dialogue Nouveau document pour dfinir les nouvelles prfrences lies au document en cours de cration. 2. Cliquez sur la catgorie Nouveau document dans la liste de gauche. 3. Dfinissez ou modifiez les prfrences selon vos besoins, puis cliquez sur OK pour les enregistrer. Document par dfaut Slectionnez le type de document qui sera employ pour les pages que vous crez. Extension par dfaut Indiquez l'extension de fichier que vous prfrez (.htm ou .html) pour les nouvelles pages HTML que vous crerez. Remarque : Cette option est dsactive pour les autres types de fichiers. Type de document par dfaut (DDT) Slectionnez l'une des dfinitions de type de document (DTD) XHTML qui permettent de rendre les pages compatibles XHTML. Par exemple, vous pouvez rendre un document HTML compatible XHTML en slectionnant XHTML 1.0 transitionnel ou XHTML 1.0 strict dans le menu droulant. Codage par dfaut Spcifie le codage utiliser lorsque vous crez une page ou que vous ouvrez un document ne spcifiant aucun
293
codage. Si vous slectionnez Unicode (UTF 8) en tant que codage de document, le codage d'entit est superflu dans la mesure o UTF 8 permet de reprsenter de faon fiable tous les caractres. Si vous slectionnez un autre codage de document, le codage d'entit peut tre ncessaire pour reprsenter certains caractres. Pour plus d'informations sur les entits de caractres, voir www.w3.org/TR/REChtml40/sgml/entities.html. Si vous slectionnez Unicode (UTF 8) en tant que code par dfaut, vous pouvez inclure une marque BOM (Byte Order Mark) dans le document en slectionnant l'option Inclure une signature Unicode (BOM). Il s'agit d'une marque constitue de 2 4 octets placs au dbut d'un fichier texte identifiant un fichier comme tant au format Unicode et, dans ce cas, l'ordre des octets suivants. Le code UTF 8 ne prsentant pas d'ordre octet, l'ajout d'une marque BOM UTF 8 est facultatif. Dans le cas de UTF 16 et UTF 32, cette marque est obligatoire. Formulaire de normalisation Unicode Activez l'une de ces options si vous slectionnez Unicode (UTF 8) en tant que code par dfaut. Il existe quatre Formulaires de normalisation Unicode. Le plus important est le Formulaire de normalisation Unicode C, car il est le plus utilis dans le Modle de caractres li au World Wide Web, mais Adobe fournit galement les trois autres Formulaires de normalisation Unicode. Afficher la bote de dialogue Nouveau document si Ctrl+N Dsactivez cette option (baptise Commande+N sur Macintosh) pour appliquer automatiquement le type par dfaut au nouveau document cr lorsque vous utilisez la touche de commande. Certains caractres Unicode semblent visuellement similaires mais peuvent tre stocks de diffrentes manires dans le document. Par exemple, (e trma) peut tre reprsent sous la forme d'un seul caractre, e trma ou de deux caractres, e Latin ordinaire + trma . Un caractre Unicode de combinaison est un caractre associ au caractre prcdent, ce qui fait apparatre le trma au-dessus du e Latin. Les deux formes donnent la mme typographie visuelle, alors que chacune est enregistre diffremment dans le fichier. La normalisation est le processus consistant s'assurer que tous les caractres pouvant tre enregistrs sous diffrentes formes le sont tous sous la mme forme. C'est--dire que tous les caractres d'un document sont enregistrs sous forme de e trma unique ou de e + trma de combinaison , mais pas sous les deux formes dans un mme document. Pour plus d'informations sur la Normalisation Unicode et les formulaires spcifiques pouvant tre utiliss, consultez le site Web Unicode www.unicode.org/reports/tr15.
Conversion de HTML5 vers un ancien doctype
En haut
L'emploi de Fichier > Convertir pour passer de HTML5 vers un ancien DOCTYPE ne supprime pas les lments et attributs HTML5. Seul le DOCTYPE change et des barres obliques (pour XHTML) sont insres la fin. Les balises smantiques telles que <header> et <article>, ainsi que les attributs tels que required , placeholder et type="number" , ne sont pas affects. Remarque : L'option Convertir a t supprime de Dreamweaver CC et des versions ultrieures.
Dfinition de l'extension de fichier par dfaut de nouveaux documents HTML
En haut
Vous pouvez dfinir l'extension de fichier par dfaut de documents HTML crs dans Dreamweaver. Par exemple, vous pouvez utiliser une extension .htm ou .html pour tous les nouveaux documents HTML. 1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). Vous pouvez galement cliquer sur le bouton Prfrences dans la bote de dialogue Nouveau document pour dfinir les nouvelles prfrences lies au document en cours de cration. 2. Cliquez sur la catgorie Nouveau document dans la liste de gauche. 3. Assurez-vous que HTML est bien slectionn dans le menu Document par dfaut. 4. Dans la zone de texte Extension par dfaut, spcifiez l'extension de fichier que vous souhaitez utiliser pour les nouveaux documents HTML crs dans. Sous Windows, vous pouvez spcifier les extensions suivantes : .html, .htm, .shtml, .shtm, .stm, .tpl, .lasso, .xhtml. Sous Macintosh, vous pouvez spcifier les extensions suivantes : .html, .htm, .shtml, .shtm, .tpl, .lasso, .xhtml, .ssi.
Ouverture et modification de documents existants
En haut
Vous pouvez ouvrir une page Web existante ou un document texte, mme si celui-ci n'a pas t cr avec Dreamweaver, et le modifier en mode
294
Code ou en mode Cration. Si le document que vous ouvrez est un fichier Microsoft Word enregistr au format HTML, il est conseill d'utiliser la commande Nettoyage du HTML Word pour supprimer les balises superflues ajoutes par Word au fichier HTML. Pour nettoyer un fichier HTML ou XHTML non gnr par Microsoft Word, utilisez la commande Nettoyage du HTML. Vous pouvez galement ouvrir des fichiers texte non HTML, comme des fichiers JavaScript, XML, feuilles de style en cascade (CSS) ou des fichiers texte enregistrs dans des traitements de texte ou des diteurs de texte. 1. Choisissez Fichier > Ouvrir. Vous pouvez galement utiliser le panneau Fichiers pour ouvrir les fichiers. 2. Recherchez et slectionnez le fichier ouvrir. Remarque : Si cette opration n'a pas encore t effectue, il est conseill d'organiser les fichiers que vous comptez ouvrir et modifier au sein d'un site Dreamweaver, au lieu de les ouvrir depuis un autre emplacement. 3. Cliquez sur le bouton Ouvrir. Le document s'ouvre dans la fentre de document. Par dfaut, JavaScript, le texte et les feuilles de style en cascade (CSS) s'ouvrent en mode Code. Vous pouvez mettre jour le document pendant que vous travaillez dans Dreamweaver, puis enregistrer les modifications dans le fichier.
Ouverture des fichiers associs
En haut
Dreamweaver permet de visualiser les fichiers associs votre document principal, tout en restant focalis sur ce dernier. Par exemple, si des fichiers CSS et JavaScript sont joints un document principal, Dreamweaver permet d'afficher et de modifier ces fichiers associs dans la fentre de document tout en laissant le document principal visible. Remarque : Les fichiers association dynamique (comme les fichiers PHP de systmes de gestion du contenu) sont abords dans la prochaine section d'aide. Par dfaut, Dreamweaver affiche le nom de tous les fichiers apparents au document principal dans une barre d'outils Fichiers apparents, sous le titre du document principal. L'ordre des boutons de cette barre d'outils suit l'ordre des liens vers les fichiers associs dans le document principal. Remarque : Si un fichier associ est manquant, Dreamweaver affiche quand mme le bouton correspondant dans la barre d'outils Fichiers associs. Toutefois, si vous cliquez sur ce bouton, Dreamweaver n'affiche rien. Dreamweaver prend en charge les types de fichiers associs suivants: Fichiers de script ct client Inclusions ct serveur Sources d'ensembles de donnes Spry (XML et HTML) Feuilles de style CSS externes (dont les feuilles de style imbriques) Vous trouverez un didacticiel vido sur l'utilisation des fichiers apparents, ralis par l'quipe de Dreamweaver, l'adresse www.adobe.com/go/dw10relatedfiles_fr. Vous trouverez un didacticiel vido relatif l'utilisation du mode Affichage en direct, aux fichiers associs et la fentre Navigation dans le code l'adresse www.adobe.com/go/lrvid4044_dw.
Ouverture d'un fichier associ partir de la barre d'outils Fichiers associs

Effectuez l'une des oprations suivantes : Dans la barre d'outils Fichiers associs en haut du document, cliquez sur le nom du fichier associ ouvrir. Dans la barre d'outils Fichiers associs en haut du document, cliquez l'aide du bouton droit de la souris sur le nom du fichier associ ouvrir, puis choisissez Ouvrir en tant que fichier spar dans le menu. Lorsque vous utilisez cette mthode pour ouvrir un fichier associ, le document principal ne reste pas visible simultanment.
Ouverture d'un fichier associ partir de la fentre Navigation dans le code

1. Placez le point d'insertion sur une ligne ou dans une zone dont vous savez qu'elle est influence par un fichier associ. 2. Attendez que l'indicateur Navigation dans le code s'affiche, puis cliquez dessus pour ouvrir la fentre Navigation dans le code. 3. Vous pouvez survoler les lments de la fentre Navigation dans le code afin d'afficher davantage d'informations leur sujet. Par exemple, si vous voulez modifier une proprit de couleur CSS prcise mais que vous ignorez dans quelle rgle elle se trouve, vous pouvez trouver
295
cette rgle en survolant les rgles disponible dans la fentre Navigation dans le code. 4. Cliquez sur l'lment qui vous intresse afin d'ouvrir le fichier associ correspondant.
Retour au code source du document principal

Cliquez sur le bouton Code source de la barre d'outils Fichiers apparents.
Modification de l'affichage de fichiers associs

Vous pouvez afficher les fichiers associs de diverses manires : Lorsque vous ouvrez un fichier apparent depuis le mode Cration ou le mode Code et Cration (mode Fractionn), ce fichier s'affiche dans une fentre fractionne au-dessus du mode Cration du document principal. Vous pouvez choisir Affichage > Mode Cration en haut pour que le fichier associ s'affiche plutt dans le bas de la fentre de document. Lorsque vous ouvrez un fichier associ depuis le mode Code et Cration fractionn verticalement (Affichage > Fractionner verticalement), ce fichier s'affiche dans une fentre fractionne ct du mode Cration du document principal. Selon l'endroit o vous voulez placer le mode Cration, vous pouvez activer ou dsactiver l'option Affichage > Mode Cration gauche. Lorsque vous ouvrez un fichier associ depuis le mode Code et Cration fractionn ou fractionn verticalement (Affichage > Mode Fractionn ou Affichage > Fractionner verticalement), le fichier associ s'affiche dans une fentre fractionne en dessous, au-dessus ou ct du code source du document principal, en fonction des options que vous avez slectionnes. Le mode Code dans l'option d'affichage fait rfrence au code source du document principal. Par exemple, si vous choisissez Affichage > Mode Code en haut, Dreamweaver affiche le code source du document principal dans la moiti suprieure de la fentre de document. Si vous choisissez Affichage > Mode Code gauche, Dreamweaver affiche le code source du document principal sur le ct gauche de la fentre de document. Le mode Code standard ne permet pas d'afficher les documents apparents en mme temps que le code source du document principal.
Dsactivation des fichiers associs

1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2. Dans la catgorie Gnral, dsactivez Activer les fichiers apparents.
Ouverture de fichiers association dynamique
En haut
La fonction Fichiers association dynamique accrot les possibilits de la fonction Fichiers associs, en vous permettant de voir les fichiers associs aux pages dynamiques dans la barre d'outils Fichiers associs. Plus prcisment, la fonction Fichiers association dynamique permet de voir les nombreuses inclusions dynamiques requises pour gnrer le code d'excution des cadres CMS (systme de gestion du contenu) PHP ouverts les plus populaires, tels que WordPress, Drupal et Joomla! Pour pouvoir utiliser la fonction Fichiers association dynamique, vous devez avoir accs un serveur d'applications PHP local ou distant qui excute WordPress, Drupal ou Joomla! Une approche courante du test de pages consiste configurer un serveur d'applications PHP sur localhost puis tester les pages localement. Avant de tester les pages, vous devez effectuer les oprations suivantes : Crez un site Dreamweaver et assurez-vous que vous avez bien complt la zone de texte URL Web de la bote de dialogue Configuration du site. Configurez un serveur d'applications PHP. Remarque : Le serveur doit tre en cours d'excution avant que vous ne tentiez d'utiliser des fichiers association dynamique dans Dreamweaver. Installez WordPress, Drupal ou Joomla! sur le serveur d'applications. Pour plus de dtails, voir: Installation de WordPress Installation de Drupal Installation de Joomla Dans Dreamweaver, dfinissez un fichier local o vous allez tlcharger et modifier vos fichiers de CMS. Dfinissez l'emplacement des fichiers de WordPress, Drupal ou Joomla! installs comme dossier distant et de test. Tlchargez (obtenez) vos fichiers de CMS depuis le dossier distant.
296
Dfinition des prfrences relatives aux fichiers association dynamique

Lorsque vous ouvrez une page lie des fichiers association dynamique, Dreamweaver peut rechercher les fichiers automatiquement ou vous permettre de les rechercher manuellement (en cliquant sur un lien dans la barre Informations, dans le haut de la page). Par dfaut, la recherche se fait manuellement. 1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Mac OS). 2. Dans la catgorie Gnral, assurez-vous que l'option Activer les fichiers associs est bien active. 3. Slectionnez Manuellement ou Automatiquement dans le menu Fichiers association dynamique. Vous pouvez galement dsactiver compltement la recherche en choisissant l'option Dsactiv.
Dcouvrir les fichiers association dynamique

1. Ouvrez une page laquelle des fichiers association dynamique sont lis, par exemple la page index.php la racine d'un site WordPress, Drupal ou Joomla! . 2. Si la recherche de fichiers association dynamique se fait manuellement (option par dfaut), cliquez sur le lien Dcouvrir dans la barre Informations, dans le haut de la fentre Document. Si la recherche de fichiers association dynamique se fait automatiquement, la liste des fichiers association dynamique s'affiche dans la barre d'outils Fichiers associs. L'ordre des fichiers associs et association dynamiques dans la barre d'outils Fichiers associs est le suivant : Fichiers associs statiques (c.--d. fichiers n'exigeant aucun traitement dynamique) Fichiers associs externes (c.--d. fichiers .css et .js) qui sont lis des fichiers d'inclusion de serveur chemin dynamique Fichiers d'inclusion de serveur chemin dynamique (c.--d. fichiers .php, .inc et .module)
Filtrage des fichiers associs

Comme les fichiers associs et les fichiers association dynamique peuvent tre nombreux, Dreamweaver permet de filtrer les fichiers associs, de faon trouver prcisment les fichiers avec lesquels vous voulez travailler. 1. Ouvrez une page laquelle des fichiers associs sont lis. 2. Si ncessaire, recherchez les fichiers association dynamique. 3. Cliquez sur l'icne Filtrer les fichiers associs sur la droite de la barre d'outils Fichiers associs. 4. Slectionnez les types de fichiers afficher dans la barre d'outils Fichiers associs. Par dfaut, Dreamweaver slectionne tous les fichiers associs. 5. Pour crer un filtre personnalis, cliquez sur l'icne Filtrer les fichiers associs, puis choisissez Filtre personnalis. La bote de dialogue Filtre personnalis ne permet de filtrer que les noms de fichiers prcis (style.css), les extensions de fichiers (.php) et les expressions caractre gnrique utilisant des astrisques (*menu*). Vous pouvez filtrer selon des expressions caractres gnriques multiples en sparant les diffrentes expressions l'aide de points-virgules (par exemple style.css;*.js;*tpl.php). Remarque : Les paramtres de filtre ne sont pas conservs lorsque vous fermez le fichier.
Nettoyage de fichiers HTML crs avec Microsoft Word
En haut
Vous pouvez ouvrir des documents enregistrs par Microsoft Word en tant que fichiers HTML, puis utiliser la commande Nettoyer HTML Word pour supprimer le code HTML superflu gnr par Word. La commande Nettoyer HTML Word est utilisable pour les documents enregistrs sous forme de fichiers HTML par Word 97 ou une version ultrieure. Le code que Dreamweaver supprime est principalement utilis par Word pour mettre en forme et afficher les documents dans Word mme, et n'est pas ncessaire dans un vritable fichier HTML. Conservez une copie de votre fichier Word original (.doc) comme scurit, car il se peut que vous ne puissiez plus ouvrir ce document HTML dans Word aprs avoir appliqu la fonction Nettoyer HTML Word. Pour nettoyer un fichier HTML ou XHTML non gnr par Microsoft Word, utilisez la commande Nettoyage du HTML. 1. Enregistrez votre document Microsoft Word au format HTML. Remarque : Sous Windows, fermez le fichier dans Word pour viter une violation de partage. 2. Ouvrez le fichier HTML dans Dreamweaver. Pour afficher le code HTML gnr par Word, activez le mode Code (Affichage > Code).
297
3. Slectionnez Commandes > Nettoyer HTML Word. Remarque : Si Dreamweaver ne parvient pas dterminer la version de Word qui a t utilise pour enregistrer ce fichier, choisissez la version correcte dans le menu droulant. 4. Activez (ou dsactivez) les options de nettoyage. Les prfrences que vous entrez sont sauvegardes comme paramtres de nettoyage par dfaut. Dreamweaver applique les paramtres de nettoyage au document HTML et un journal contenant une liste des modifications apportes s'affiche (sauf si cette option a t dslectionne dans la bote de dialogue). Supprimer les marqueurs spcifiques Word Supprime tout le code HTML spcifique Word, y compris le code XML des balises HTML, les mtadonnes personnalises Word et les balises de liens figurant dans l'en-tte du document, les balises XML Word, les balises conditionnelles et leur contenu, ainsi que les paragraphes vides et les marges des styles. Vous pouvez slectionner chacune de ces options individuellement partir de l'onglet Dtaill. Nettoyer CSS Supprime de l'en-tte toutes les feuilles de style spcifiques Word, y compris les styles CSS incorpors si possible (lorsque le style parent possde les mmes proprits), les attributs de style commenant par mso , les dclarations de styles non CSS, les attributs de style CSS des tableaux et toutes les dfinitions de style non utilises. Vous pouvez personnaliser cette option encore davantage partir de l'onglet Dtaill. Nettoyer les balises <font> Supprime les balises HTML, en convertissant le corps du texte par dfaut en HTML de taille 2. Corriger les imbrications de balises non valides Supprime les balises de dfinition des polices de caractres insres par Word en dehors des balises de paragraphe et d'en-tte (au niveau du bloc). Appliquer le format source Permet d'appliquer au document les options de formatage que vous avez indiques dans les prfrences de format HTML et dans le fichier SourceFormat.txt. Afficher le journal la fin Affiche un message d'avertissement dtaillant les modifications apportes au document ds que le nettoyage est termin. 5. Cliquez sur OK ou sur l'onglet Dtaill pour personnaliser davantage les options Supprimer les marqueurs spcifiques Word et Nettoyer CSS, puis cliquez sur OK.
Code XHTML Business Catalyst InContext Editing Enregistrement des fichiers de cadre et de jeu de cadre Description du codage de document Nettoyage du code Dmarrage d'un diteur externe pour les fichiers multimdias Utilisation de fichiers dans le panneau Fichiers Basculement entre les modes de la fentre de Document Navigation vers le code apparent Prvisualisation de pages dans Dreamweaver Didacticiel relatif aux fichiers associs www.adobe.com/go/dwcs5drf_fr
298
Utilisation de Photoshop et Dreamweaver

A propos de l'intgration de Photoshop A propos des Objets dynamiques et des flux d'activits entre Photoshop et Dreamweaver Cration d'un objet dynamique Mise jour d'un objet dynamique Mise jour de plusieurs objets dynamiques Redimensionnement d'un objet dynamique Modification du fichier Photoshop d'origine d'un objet dynamique Etats des objets dynamiques Copie et collage d'une slection depuis Photoshop Modification d'images colles Dfinition des options de la bote de dialogue Optimisation de l'image
A propos de l'intgration de Photoshop
En haut
Vous pouvez insrer des fichiers d'image Photoshop (en format PSD) dans des pages Web de Dreamweaver, puis les faire optimiser par Dreamweaver sous la forme d'images Web (en formats GIF, JPEG et PNG). Dans ce cas, Dreamweaver insre l'image en tant qu'objet dynamique et conserve une connexion en direct avec le fichier PSD d'origine. Vous pouvez galement coller une image Photoshop calques multiples ou tranches multiples, en tout ou en partie, dans une page Web de Dreamweaver. Toutefois, lorsque vous effectuez un copier-coller partir de Photoshop, aucune connexion en direct avec le fichier d'origine n'est conserve. Pour mettre jour l'image, apportez les modifications dans Photoshop, puis utilisez de nouveau la fonction copier-coller. Remarque : Si vous employez souvent cette fonctionnalit d'intgration, il peut tre utile de stocker les fichiers Photoshop sur votre site Dreamweaver, de manire y accder plus aisment. Dans ce cas, veillez les voiler, de faon viter toute publication des actifs d'origine et tout transfert superflu entre le site local et le serveur distant. Vous trouverez un didacticiel sur l'utilisation d'objets dynamiques dans Photoshop et Dreamweaver l'adresse suivante : www.adobe.com/go/lrvid4043_dw_fr.
A propos des objets dynamiques et des flux de production entre Photoshop et Dreamweaver
En haut
Il existe deux principaux flux de production pour traiter les fichiers Photoshop dans Dreamweaver : le flux de production copier/coller et celui des objets dynamiques. Flux de production copier/coller Le flux de production copier/coller vous permet de slectionner des tranches ou des calques dans un fichier Photoshop, puis de passer dans Dreamweaver pour en faire des images compatibles avec une utilisation sur le Web. Toutefois, si vous voulez mettre jour le contenu ultrieurement, vous devez ouvrir le fichier Photoshop d'origine, effectuer vos modifications, copier de nouveau votre tranche ou votre calque dans le Presse-papiers, puis coller la tranche ou le calque mis jour dans Dreamweaver. Ce flux de production est recommand uniquement lorsque vous voulez insrer une partie d'un fichier Photoshop (par exemple, une section d'une composition) en tant qu'image sur une page Web. Flux de production d'objets dynamiques Lorsque vous travaillez sur des fichiers Photoshop entiers, Adobe recommande l'utilisation de ce flux de production. Dans Dreamweaver, un objet dynamique dsigne une image place sur une page Web avec une connexion en ligne vers un fichier Photoshop (PSD) d'origine. En mode Cration dans Dreamweaver, un objet dynamique est signal par une icne situe dans le coin suprieur gauche de l'image.
299
Objet dynamique Lorsque l'image Web (c'est--dire l'image de la page Dreamweaver) n'est pas synchronise avec le fichier Photoshop d'origine, Dreamweaver dtecte que le fichier d'origine a t mis jour et affiche l'une des flches de l'icne d'objet dynamique en rouge. Lorsque vous slectionnez l'image Web en mode Cration et que vous cliquez sur le bouton Mettre jour depuis l'original dans l'inspecteur Proprits, l'image se met jour automatiquement avec tous les changements effectus dans le fichier Photoshop d'origine. Lorsque vous utilisez le flux de production d'objets dynamiques, vous n'avez pas besoin d'ouvrir Photoshop pour mettre jour une image Web. En outre, toute mise jour d'objet dynamique dans Dreamweaver est non destructive. Cela signifie que vous pouvez modifier la version Web de l'image sur votre page tout en prservant l'intgrit de l'image Photoshop d'origine. Vous pouvez galement mettre jour un objet dynamique sans slectionner l'image Web en mode Cration. Le panneau des actifs vous permet de mettre jour tous les objets dynamiques, y compris les images susceptibles de ne pas pouvoir tre slectionnes dans la fentre de document (par exemple, les images d'arrire-plan CSS). Paramtres d'optimisation d'image Pour les flux de production copier/coller et d'objets dynamiques, vous pouvez spcifier des paramtres d'optimisation dans la bote de dialogue Optimisation de l'image. Cette bote de dialogue vous permet de spcifier le format de fichier et la qualit de l'image. Si vous copiez une tranche ou un calque ou que vous insrez un fichier Photoshop en tant qu'objet dynamique pour la premire fois, Dreamweaver affiche cette bote de dialogue pour vous aider crer l'image Web. Si vous copiez une mise jour dans une tranche ou un calque, Dreamweaver se souvient des paramtres d'origine et recre l'image Web avec ces paramtres. De mme, lorsque vous mettez jour un objet dynamique l'aide de l'inspecteur Proprits, Dreamweaver reprend les paramtres que vous avez utiliss lorsque vous avez insr l'image pour la premire fois. Vous pouvez tout moment modifier les paramtres d'une image : il vous suffit de slectionner l'image Web en mode Cration, puis de cliquer sur le bouton Modifier les paramtres de l'image dans l'inspecteur Proprits. Stockage des fichiers Photoshop Si vous avez insr une image Web et que vous n'avez pas enregistr le fichier Photoshop d'origine sur votre site Dreamweaver, Dreamweaver reconnat le chemin vers le fichier d'origine comme chemin de fichier local absolu (c'est le cas pour les flux de production copier/coller et d'objets dynamiques). Par exemple, si le chemin vers votre site Dreamweaver est C:\Sites\monSite et que votre fichier Photoshop se trouve sous C:\Images\Photoshop, Dreamweaver ne reconnat pas le fichier d'origine comme faisant partie du site intitul monSite. Cela pose des problmes si vous voulez partager ce fichier Photoshop avec d'autres personnes, car Dreamweaver considre uniquement le fichier comme disponible sur un disque dur local spcifique. Toutefois, si vous stockez le fichier Photoshop sur votre site, Dreamweaver tablit un chemin li au site vers le fichier. Les utilisateurs ayant accs au site pourront galement tablir le bon chemin vers le fichier, sous rserve que vous leur ayez aussi fourni le fichier d'origine tlcharger. Vous trouverez un didacticiel vido sur l'utilisation d'objets dynamiques dans Photoshop et Dreamweaver l'adresse suivante : www.adobe.com/go/lrvid4043_dw_fr.
Cration d'un objet dynamique
En haut
Lorsque vous insrez une image Photoshop (fichier PSD) dans votre page, Dreamweaver cre un objet dynamique. Un objet dynamique est une image Web qui conserve une connexion en direct avec l'image Photoshop d'origine. Lorsque vous mettez jour l'image d'origine dans Photoshop, Dreamweaver vous permet de mettre jour l'image dans Dreamweaver par simple clic sur un bouton. 1. Dans Dreamweaver (mode Cration ou Code), placez le point d'insertion sur la page, l'endroit o vous voulez insrer l'image. 2. Choisissez Insertion > Image. Vous pouvez galement tirer le fichier PSD sur la page, partir du panneau Fichiers, si vous stockez vos fichiers Photoshop sur votre site Web. Dans ce cas, vous passerez l'tape suivante.
300
3. Dans la bote de dialogue Slectionner la source de l'image, recherchez votre fichier d'image PSD Photoshop en cliquant sur le bouton Parcourir et en accdant ce fichier. 4. Dans la bote de dialogue Optimisation de l'image qui s'affiche, ajustez les paramtres d'optimisation requis puis cliquez sur OK. 5. Enregistrez le fichier d'image Web un emplacement du dossier racine de votre site Web. Dreamweaver cre l'objet dynamique sur la base des rglages d'optimisation slectionns, puis place une version Web de l'image sur votre page. L'objet dynamique conserve une connexion en direct l'image d'origine et vous signale quand les deux versions ne sont plus synchronises. Remarque : Si vous dcidez, par la suite, de modifier les rglages d'optimisation d'une image place sur vos pages, vous pouvez slectionner cette image, cliquer sur le bouton Modifier les paramtres de l'image dans l'inspecteur Proprits, puis apporter les modifications dsires dans la bote de dialogue Optimisation de l'image. Les modifications apportes dans la bote de dialogue Optimisation de l'image sont appliques de faon non destructrice. Dreamweaver ne modifie jamais le fichier Photoshop d'origine et recre toujours l'image Web sur la base des donnes d'origine. Vous trouverez un didacticiel sur l'utilisation d'objets dynamiques Photoshop l'adresse suivante : www.adobe.com/go/lrvid4043_dw_fr.
Mise jour d'un objet dynamique
En haut
Si vous modifiez le fichier Photoshop auquel votre objet dynamique est li, Dreamweaver vous informe que l'image Web n'est plus synchronise avec l'original. Dans Dreamweaver, les objets dynamiques sont indiqus par la prsence d'une icne dans le coin suprieur gauche de l'image. Lorsque l'image Web dans Dreamweaver est synchronise avec le fichier Photoshop d'origine, les deux flches de l'icne sont vertes. Lorsque l'image Web n'est plus synchronise avec le fichier Photoshop d'origine, l'une des flches de l'icne devient rouge. Pour mettre jour un objet dynamique l'aide du contenu actuel du fichier Photoshop d'origine, slectionnez cet objet dans la fentre de document, puis cliquez sur le bouton Mettre jour depuis l'original de l'inspecteur Proprits. Remarque : Il n'est pas ncessaire que Photoshop soit install pour que vous puissiez procder la mise jour partir de Dreamweaver.
Mise jour de plusieurs objets dynamiques
En haut
Vous pouvez mettre jour plusieurs objets dynamiques simultanment l'aide du panneau Actifs. Le panneau Actifs vous permet galement de visualiser les objets dynamiques qu'il peut tre impossible de slectionner dans la fentre de document (par exemple une image d'arrire-plan CSS). 1. Dans le panneau Fichiers, cliquez sur l'onglet Actifs pour visualiser les actifs du site. 2. Assurez-vous que l'affichage Images est bien activ. S'il ne l'est pas, cliquez sur le bouton Images. 3. Slectionnez chaque actif d'image dans le panneau Actifs. Lorsque vous slectionnez un objet dynamique, son icne est visible dans le coin suprieur gauche de l'image. Les images ordinaires ne comportent pas cette icne. 4. Pour chaque objet dynamique mettre jour, cliquez sur le nom de fichier l'aide du bouton droit de la souris, puis choisissez Mettre jour depuis l'original. Vous pouvez galement slectionner plusieurs noms de fichier en cliquant dessus tout en maintenant la touche CTRL enfonce, de manire les mettre jour ensemble. Remarque : Il n'est pas ncessaire que Photoshop soit install pour que vous puissiez procder la mise jour partir de Dreamweaver.
Redimensionnement d'un objet dynamique

Vous pouvez redimensionner un objet dynamique dans la fentre de document comme vous le feriez pour n'importe quelle autre image.
En haut
1. Pour redimensionner l'image, slectionnez l'objet dynamique dans la fentre de document, puis tirez les poignes de redimensionnement. Vous pouvez prserver les proportions de largeur et de hauteur en maintenant la touche MAJ enfonce tout en tirant les poignes. 2. Cliquez sur le bouton Mettre jour depuis l'original de l'inspecteur Proprits. Lorsque vous mettez jour l'objet dynamique, l'image Web est de nouveau rendue, de manire non destructive, sur la base du contenu actuel du fichier d'origine ainsi que des paramtres d'optimisation d'origine.
Modification du fichier Photoshop d'origine d'un objet dynamique
En haut
Lorsque vous avez cr un objet dynamique sur votre page Dreamweaver, vous pouvez modifier le fichier PSD d'origine dans Photoshop. Aprs avoir apport des modifications dans Photoshop, vous pouvez aisment mettre jour l'image Web dans Dreamweaver. Remarque : Veillez dfinir Photoshop comme diteur d'images externe principal. 1. Slectionnez l'objet dynamique dans la fentre de document. 2. Cliquez sur le bouton Modifier dans l'inspecteur Proprits.
301
3. Apportez les modifications requises dans Photoshop puis enregistrez le nouveau fichier PSD. 4. Dans Dreamweaver, slectionnez de nouveau l'objet dynamique puis cliquez sur le bouton Mettre jour depuis l'original. Remarque : Si vous avez modifi la taille de l'image dans Photoshop, vous devez rinitialiser la taille de l'image Web dans Dreamweaver. Dreamweaver met uniquement jour l'objet dynamique sur la base du contenu du fichier Photoshop, et pas de sa taille. Pour synchroniser la taille d'une image Web avec celle du fichier Photoshop d'origine, cliquez dessus l'aide du bouton droit de la souris, puis choisissez Rtablir la taille selon original.
Etat des objets dynamiques

Le tableau suivant numre les diffrents tats des objets dynamiques.
En haut
Etat de l'objet dynamique Images synchronises.
Description L'image Web est synchronise avec le contenu actuel du fichier Photoshop d'origine. Les attributs de largeur et de hauteur dans le code HTML correspondent aux dimensions de l'image Web. Le fichier Photoshop d'origine a t modifi aprs la cration de l'image Web dans Dreamweaver. Les attributs de largeur et de hauteur dans le code HTML sont diffrents des dimensions de l'image Web que Dreamweaver a cre lors de l'insertion. Si les dimensions de l'image Web sont plus petites que les valeurs de largeur et de hauteur HTML slectionnes, l'image peut sembler pixellise. Les valeurs de largeur et de hauteur dans le code HTML sont suprieures aux dimensions du fichier Photoshop d'origine. Il se peut que l'image semble pixellise. Dreamweaver ne trouve pas le fichier Photoshop d'origine spcifi dans la zone Original de l'inspecteur Proprits.
Action conseille Aucun
Actif d'origine modifi.
Utilisez le bouton Mettre jour depuis l'original de l'inspecteur Proprits pour synchroniser les deux images. Utilisez le bouton Mettre jour depuis l'original de l'inspecteur Proprits pour recrer l'image Web partir du fichier Photoshop d'origine. Dreamweaver utilise les valeurs de largeur et de hauteur HTML spcifies pour recrer l'image.
Les dimensions de l'image Web diffrent de la largeur et de la hauteur HTML slectionnes.
Les dimensions de l'actif d'origine sont trop petites pour les valeurs de largeur et de hauteur HTML slectionnes.
Ne crez pas d'image Web dont les dimensions sont suprieures aux dimensions du fichier Photoshop d'origine.
Actif d'origine introuvable.
Corrigez le chemin d'accs au fichier dans la zone Original de l'inspecteur Proprits, ou dplacez le fichier Photoshop l'emplacement spcifi actuellement.
Copie et collage d'une slection partir de Photoshop
En haut
Vous pouvez copier une image Photoshop, ou une partie de celle-ci, et coller la slection dans votre page Dreamweaver sous la forme d'une image Web. Vous pouvez copier un calque ou un groupe de calques pour une partie slectionne de l'image, ou encore copier une tranche de l'image. Toutefois, lorsque vous effectuez cette opration, Dreamweaver ne cre pas d'objet dynamique. Remarque : Bien que la fonctionnalit Mettre jour depuis l'original ne soit pas disponible pour les images colles, vous pouvez ouvrir le fichier Photoshop d'origine et le modifier en slectionnant l'image colle, puis en cliquant sur le bouton Modifier de l'inspecteur Proprits. 1. Dans Photoshop, effectuez l'une des oprations suivantes : Copiez la totalit ou une partie d'un calque. Pour ce faire, employez l'outil Rectangle de slection pour slectionner la partie copier, puis choisissez Edition > Copier. Cette opration ne copie que le calque actif correspondant la zone slectionne dans le pressepapiers. Si vous avez dfini des effets bass sur des calques, ils ne sont pas copis. Copiez et fusionnez plusieurs calques. Pour ce faire, employez l'outil Rectangle de slection pour slectionner la partie copier, puis choisissez Edition > Copier avec fusion. Cette opration aplatit et copie tous les calques actifs et infrieurs de la zone slectionne dans le presse-papiers. Si des effets bass sur des calques sont associs l'un de ces calques, ils sont copis. Copiez une tranche. Pour ce faire, slectionnez la tranche l'aide de l'outil Slection de tranche, puis choisissez Edition > Copier. Cette opration aplatit et copie tous les calques actifs et infrieurs de la tranche dans le presse-papiers. Vous pouvez choisir Slection > Tout afin de slectionner rapidement une image entire en vue de la copier.
302
2. Dans Dreamweaver (mode Cration ou Code), placez le point d'insertion sur la page, l'endroit o vous voulez insrer l'image. 3. Choisissez Edition > Coller. 4. Dans la bote de dialogue Optimisation de l'image, ajustez les paramtres d'optimisation requis puis cliquez sur OK. 5. Enregistrez le fichier d'image Web un emplacement du dossier racine de votre site Web. Dreamweaver dfinit l'image conformment aux paramtres d'optimisation et en place une version Web sur votre page. Les informations relatives l'image, comme l'emplacement du fichier PSD d'origine, sont enregistres dans une Design Note, que vous ayez ou non activ les Design Notes pour votre site. La Design vous permet de revenir au fichier Photoshop d'origine, afin d'y apporter des modifications, partir de Dreamweaver. Vous trouverez un didacticiel sur la copie et le collage entre plusieurs applications, dont Photoshop et Dreamweaver, l'adresse suivante : www.adobe.com/go/vid0193_fr.
Modification d'images colles
En haut
Aprs avoir copi des images de Photoshop dans vos pages Dreamweaver, vous pouvez modifier le fichier PSD d'origine dans Photoshop. Lorsque vous utilisez le flux d'activits copier/coller, Adobe recommande de toujours apporter vos modifications au fichier PSD d'origine (et non l'image Web), puis effectuer un nouveau copier/coller, de faon conserver une source unique. Remarque : Assurez-vous que Photoshop est bien dfini comme l'diteur principal pour le type de fichier modifier. 1. Dans Dreamweaver, slectionnez une image Web cre l'origine dans Photoshop, puis effectuez l'une des actions suivantes : Cliquez sur le bouton Modifier dans l'inspecteur Proprits de l'image. Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) lorsque vous double-cliquez sur le fichier. Cliquez sur l'image avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), choisissez Modifier l'original avec dans le menu contextuel, puis choisissez Photoshop. Remarque : Ce principe suppose que Photoshop soit dfini comme diteur d'image externe principal pour les fichiers d'image PSD. Il peut galement tre utile de dfinir Photoshop comme diteur par dfaut pour les fichiers de type JPEG, GIF et PNG. 2. Modifiez le fichier dans Photoshop. 3. Revenez Dreamweaver et collez l'image ou la slection mise jour dans votre page. A tout moment, si vous voulez optimiser nouveau l'image, vous pouvez la slectionner puis cliquer sur le bouton Modifier les paramtres de l'image.
Dfinition des options de la bote de dialogue Optimisation de l'image
En haut
Lorsque vous crez un objet dynamique ou que vous collez une slection depuis Photoshop, Dreamweaver affiche la bote de dialogue Optimisation de l'image. Cette bote de dialogue s'affiche galement pour tout autre type d'image si vous la slectionnez puis que vous cliquez sur le bouton Modifier les paramtres de l'image de l'inspecteur Proprits. Cette bote de dialogue permet de dfinir les paramtres d'images Web et d'en afficher un aperu, de faon dterminer la combinaison optimale de couleurs, de compression et de qualit. Une image Web est une image qui peut tre affiche par tous les navigateurs Web modernes et qui possde la mme apparence, quel que soit le systme ou le navigateur utilis. En rgle gnrale, ces paramtres permettent de parvenir un compromis entre qualit et taille de fichier. Remarque : Les paramtres que vous slectionnez n'influent que sur la version importe du fichier d'image. Le fichier PSD (Photoshop) ou PNG (Fireworks) d'origine reste toujours inchang. Paramtre prdfini Choisissez le paramtre prdfini qui rpond le mieux vos besoins. La taille de fichier de l'image change en fonction du paramtre prdfini choisi. Un aperu instantan de l'image avec le paramtre appliqu s'affiche en arrire-plan. Par exemple, pour les images qui doivent tre affiches avec un haut degr de clart, choisissez PNG24 pour photos (dtails nets). Slectionnez GIF pour images d'arrire-plan (motifs) si vous insrez un motif qui fait office d'arrire-plan de la page. Lorsque vous slectionnez un paramtre prdfini, ses options configurables sont affiches.Si vous souhaitez personnaliser davantage les paramtres d'optimisation, modifiez les valeurs de ces options.
303
Ajout et modification d'images

A propos des images Insertion d'une image Redimensionnement visuel d'une image Insertion d'un espace rserv pour image Remplacement d'un espace rserv pour image Dfinition des proprits d'un espace rserv pour image Modification d'images dans Dreamweaver Cration d'une image survole Utilisation d'un diteur d'image externe Application de comportements aux images
A propos des images

rpandus ; ils peuvent tre affichs dans la plupart des navigateurs.
En haut
Il existe de nombreux formats de fichiers graphiques, mais les pages Web en utilisent gnralement trois : GIF, JPEG et PNG. Les formats GIF et JPEG sont les plus
GIF (Graphic Interchange Format) Les fichiers GIF utilisent un maximum de 256 couleurs et sont destins l'affichage d'images tons non continus ou d'images comportant de larges zones de couleurs unies, telles que les barres de navigation, les boutons, les icnes, les logos ou d'autres images contenant des tons et des couleurs uniformes. JPEG (Joint Photographic Experts Group) Le format de fichier JPEG est le format suprieur destin aux photographies ou aux images tons continus, car de tels fichiers peuvent contenir des millions de couleurs. Lorsque la qualit d'un fichier JPEG augmente, sa taille et son temps de tlchargement augmentent galement. Il est souvent possible d'obtenir un bon compromis entre la qualit de l'image et sa taille de fichier en compressant un fichier JPEG. PNG (Portable Network Group) Le format de fichier PNG est un format de remplacement non brevet pour les fichiers GIF, qui inclut la prise en charge des images couleurs indexes, en niveaux de gris et en couleurs vraies ainsi que la prise en charge du canal alpha pour la transparence. PNG est le format de fichier natif d'Adobe Fireworks. Les fichiers PNG conservent toutes les informations d'origine sur les calques, les vecteurs, les couleurs et les effets (comme par exemple des ombres portes) et tous ces lments peuvent tre modifis tout moment. Les fichiers doivent avoir l'extension .png pour tre reconnus comme fichiers PNG par Dreamweaver.
En haut
Insertion d'une image
Lorsque vous insrez une image dans un document Dreamweaver, le programme cre une rfrence ce fichier d'image dans le code source HTML. Pour que cette rfrence soit correcte, le fichier d'image doit rsider sur le site. Dans le cas contraire, Dreamweaver vous invite copier le fichier sur le site. Vous pouvez galement insrer des images de faon dynamique. Les images dynamiques sont des images qui changent souvent ; par exemple, les systmes de rotation de bannires publicitaires qui slectionnent les bannires de manire alatoire, puis affichent l'image de la bannire slectionne lors de l'affichage d'une page. Aprs avoir insr une image, vous pouvez dfinir les options d'accessibilit aux balises d'image qui pourront tre lues par les lecteurs d'cran destins aux utilisateurs malvoyants. Ces attributs peuvent tre modifis dans le code HTML. Vous trouverez un didacticiel sur l'insertion d'images l'adresse suivante : www.adobe.com/go/vid0148_fr. 1. Placez le point d'insertion l'endroit o doit apparatre l'image dans la fentre de document, puis procdez de l'une des manires suivantes : Dans la catgorie Commun du panneau Insertion, cliquez sur l'icne Images .
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Images et slectionnez l'icne Image. Lorsque l'icne Image est affiche dans le panneau Insertion, vous pouvez la faire glisser vers la fentre du document (ou la fentre du mode Code si vous travaillez sur le code). Choisissez Insertion > Image. Faites glisser une image partir du panneau Actifs (Fentre > Actifs) vers l'emplacement souhait dans la fentre de document, puis passez l'tape 3. Faites glisser une image partir du panneau Fichiers vers l'emplacement souhait dans la fentre de document, puis passez l'tape 3. Faites glisser une image partir du bureau vers l'emplacement dsir sur la page, puis passez l'tape 3.
304
2. Dans la bote de dialogue qui s'affiche, procdez de l'une des manires suivantes : Slectionnez Systme de fichiers pour choisir un fichier d'image. Slectionnez Source de donnes pour choisir une source d'images dynamiques. Cliquez sur le bouton Sites et serveurs pour choisir un fichier d'image dans un dossier distant de l'un de vos sites Dreamweaver. 3. Parcourez l'arborescence pour slectionner l'image ou la source de contenu insrer. Tant que le document sur lequel vous travaillez n'a pas encore t enregistr, Dreamweaver cre automatiquement une rfrence d'emplacement de fichier de type file://. Lorsque vous enregistrez le document sur le site, Dreamweaver convertit cette rfrence en indiquant un chemin relatif au document. Remarque : Lors de l'insertion d'images, vous pouvez galement utiliser un chemin absolu vers une image qui rside sur un serveur distant (c'est--dire une image qui n'est pas disponible sur le disque dur local). Toutefois, si vous constatez des problmes de performances lorsque vous travaillez, vous pouvez dcider de dsactiver l'affichage de l'image en mode Cration en dslectionnant l'option Commandes > Afficher les fichiers externes. 4. Cliquez sur OK. La bote de dialogue Attributs d'accessibilit aux balises d'image s'affiche si elle a t active dans les prfrences (Edition > Prfrences). 5. Tapez des valeurs dans les zones Texte secondaire et Description longue, puis cliquez sur OK. Dans la zone Texte secondaire, entrez un nom ou une brve description de l'image. Le lecteur d'cran lit les informations que vous entrez ici. N'entrez pas plus de 50 caractres. Pour de plus longues descriptions, entrez plutt, dans la zone de texte Description longue, un lien vers un fichier donnant davantage d'informations propos de l'image. Dans la zone de texte Description longue, saisissez l'emplacement du fichier afficher lorsque l'utilisateur clique sur l'image ou cliquez sur l'icne du dossier pour naviguer jusqu' un fichier. Cette zone de texte fournit un lien vers un fichier qui concerne ou donne davantage d'informations sur l'image. Remarque : Vous pouvez entrer les informations dans une seule zone de texte ou les deux, selon vos besoins. Le lecteur d'cran lit l'attribut Alt de l'image. Remarque : Si vous cliquez sur Annuler, l'image s'affiche dans le document, mais Dreamweaver ne lui associe ni balises ni attributs d'accessibilit. 6. Dans l'inspecteur Proprits (Fentre > Proprits), dfinissez les proprits de l'image.
Dfinition des proprits de l'image

L'inspecteur Proprits Images vous permet de dfinir les proprits d'une image. Pour voir toutes les proprits illustres, cliquez sur la flche d'agrandissement, dans le coin infrieur droit de l'inspecteur Proprits.
1. Choisissez la commande Fentre > Proprits pour afficher l'inspecteur Proprits pour une image slectionne. 2. Dans la zone de texte situe au-dessous de l'image miniature, dfinissez un nom d'image auquel vous pouvez faire rfrence lors de l'utilisation d'un comportement Dreamweaver (tel que Permuter une image) ou lors de l'utilisation d'un langage de script tel que JavaScript ou VBScript. 3. Dfinissez les options de l'image. L et H La largeur et la hauteur de l'image, en pixels. Dreamweaver met automatiquement jour ces zones de texte avec les dimensions d'origine de l'image lorsque vous insrez une image dans une page. Si vous dfinissez pour L (largeur) et H (hauteur) des valeurs qui ne correspondent pas aux dimensions relles de l'image, celle-ci risque de ne pas s'afficher correctement dans un navigateur (Pour revenir aux valeurs d'origine, cliquez sur les tiquettes de zone de texte L et H ou sur le bouton Rtablir la taille originale de l'image qui apparat droite des zones de texte L et H une fois que vous avez tap de nouvelles valeurs. Remarque : Vous pouvez modifier ces valeurs pour modifier l'chelle d'affichage de cette instance de l'image, mais cette technique ne diminuera pas le temps de chargement, puisque le navigateur chargera la totalit de l'image son chelle normale avant de la rduire. Pour rduire le temps de tlchargement et tre sr que toutes les instances de l'image sont affiches aux mmes dimensions, utilisez une application de retouche d'image pour adapter les proportions de l'image.
Src Spcifie le fichier source de l'image. Tapez le chemin d'accs ou cliquez sur l'icne du dossier pour trouver le fichier source et le
305
slectionner. Lien Spcifie un lien hypertexte pour l'image. Faites glisser l'icne Pointer vers un fichier dans le panneau Fichiers, cliquez sur l'icne de dossier pour rechercher et slectionner un document de votre site ou tapez directement l'URL. Sec Spcifie le texte secondaire qui apparatra la place de l'image dans les navigateurs de type texte seulement, ou dans les navigateurs dont l'utilisateur a dsactiv le tlchargement automatique des images. Pour les utilisateurs malvoyants qui utilisent un synthtiseur vocal avec un navigateur en mode texte, le texte est lu. Dans certains navigateurs, ce texte apparat galement lorsque le pointeur se trouve sur l'image. Nom de la carte et outils Zone ractive Permettent de nommer et de crer une carte graphique ct client Cible Spcifie la fentre ou le cadre dans lequel la page lie devrait tre charge. Cette option n'est pas disponible lorsque l'image n'est pas lie un autre fichier. Les noms de tous les cadres dans le jeu de cadres actuel s'affichent dans la liste Cible. Vous pouvez galement choisir parmi les noms de cible rservs suivants : _blank charge le fichier li dans une nouvelle fentre, sans nom, du navigateur. _parent charge le fichier li dans le jeu de cadres parent, ou dans la fentre parente du cadre contenant le lien. Si le cadre contenant le lien n'est pas imbriqu, le document li sera charg dans la fentre de base du navigateur. _self charge le fichier li dans le mme cadre, ou dans la mme fentre, que le lien. Cette cible tant celle par dfaut, vous n'avez gnralement pas la spcifier. _top charge le fichier li dans la fentre de base du navigateur, supprimant ainsi tous les cadres. Modifier Lance l'diteur d'image que vous avez indiqu dans les prfrences d'diteurs externes et ouvre l'image slectionne. Mettre jour depuis l'original Lorsque limage Web (cest--dire limage de la page Dreamweaver) nest pas synchronise avec le fichier Photoshop dorigine, Dreamweaver dtecte que le fichier dorigine a t mis jour et affiche lune des flches de licne dobjet dynamique en rouge. Lorsque vous slectionnez limage Web en mode Cration et que vous cliquez sur le bouton Mettre jour depuis loriginal dans linspecteur Proprits, limage se met jour automatiquement avec tous les changements effectus dans le fichier Photoshop dorigine. Modifier les paramtres de l'image Recadrer Affiche la bote de dialogue Optimisation d'image, o vous pouvez optimiser l'image.
Permet de rogner une image en supprimant les zones indsirables de l'image slectionne. Permet de rchantillonner une image redimensionne et d'en amliorer la qualit dans ses nouvelles taille et forme. Ajuste la luminosit et le contraste d'une image
Rchantillonner
Luminosit et contraste Accentuer
Permet d'ajuster la nettet d'une image.
Modification des attributs d'accessibilit d'une image dans le code

Si vous avez insr des attributs d'accessibilit pour une image, vous pouvez modifier ces valeurs dans le code HTML. 1. Slectionnez l'image dans la fentre de document. 2. Effectuez l'une des oprations suivantes : Modifiez les attributs de l'image en mode Code. Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis choisissez Modifier la balise. Modifiez la valeur Alt dans l'inspecteur Proprits.
Redimensionnement visuel d'une image
En haut
Dans Dreamweaver, vous pouvez redimensionner visuellement certains lments comme des images, des plug-ins, des fichiers Shockwave ou SWF, des applets et des contrles ActiveX dans Dreamweaver. Le redimensionnement visuel d'une image permet de mieux voir comment l'image affecte la mise en forme en diffrentes dimensions. Il n'adapte pas les dimensions de l'image aux proportions que vous avez spcifies. Si vous redimensionnez visuellement une image dans Dreamweaver, mais que vous n'utilisez pas d'application de retouche d'image (comme Adobe Fireworks) pour en adapter les proportions aux dimensions dsires, le navigateur de l'utilisateur devra le faire lorsque la page sera charge. Cela risque d'entraner l'allongement du temps de tlchargement de la page et l'affichage incorrect de l'image dans le navigateur. Pour rduire le temps de tlchargement et tre sr que toutes les instances de l'image sont affiches aux mmes dimensions, utilisez une application de retouche d'image pour adapter les proportions de l'image.
306
Lorsque vous redimensionnez une image dans Dreamweaver, vous pouvez la rchantillonner afin de l'adapter ses nouvelles dimensions. Le rchantillonnage ajoute ou enlve des pixels d'images JPEG ou GIF redimensionnes afin qu'elles correspondent le mieux possible l'aspect des images originales. Le rchantillonnage d'une image rduit la taille de son fichier, ce qui permet d'en acclrer le tlchargement.
Redimensionnement visuel d'un lment

1. Slectionnez l'lment (par exemple, une image ou un fichier SWF) dans la fentre de document. Des poignes de redimensionnement apparaissent droite et en bas de l'lment, et dans le coin infrieur droit. Si ces poignes n'apparaissent pas, cliquez l'extrieur de l'lment redimensionner, puis slectionnez-le nouveau ou cliquez sur la balise correspondante dans le slecteur de balises. 2. Pour redimensionner l'lment, utilisez l'une des mthodes suivantes : Pour ajuster la largeur de l'lment, dplacez la poigne droite de la slection. Pour ajuster la hauteur de l'lment, dplacez la poigne au bas de la slection. Pour ajuster simultanment la largeur et la hauteur de l'lment, faites glisser la poigne de l'angle de la slection. Pour conserver les proportions de l'lment (rapport largeur/hauteur) lorsque vous modifiez ses dimensions, faites glisser la poigne de l'angle de la slection tout en appuyant sur la touche Maj. Pour ajuster la largeur et la hauteur d'un lment une taille prcise, (par exemple, 1x1 pixel), utilisez l'inspecteur Proprits pour entrer une valeur numrique. Les lments peuvent tre redimensionns visuellement une taille minimale de 8 x 8 pixels. 3. Pour rtablir la taille originale d'un lment redimensionn, supprimez les valeurs des zones de texte L et H ou cliquez sur le bouton Rtablir la taille dans l'inspecteur Proprits.
Rtablissement de la taille originale d'une image

Cliquez sur le bouton Rtablir la taille dans l'inspecteur Proprits des images.
Rchantillonnage d'une image redimensionne

1. Redimensionnez l'image de la manire dcrite ci-dessus. 2. Cliquez sur le bouton Rchantillonner dans l'inspecteur Proprits des images.
Remarque : Vous ne pouvez pas rchantillonner les espaces rservs pour une image ou les lments autres que les images bitmap.
Insertion d'un espace rserv pour l'image
En haut
Un espace rserv pour une image est un graphique que vous utilisez jusqu' ce que le dessin final soit prt pour tre ajout une page Web. Vous pouvez dfinir la taille et la couleur de l'espace rserv et lui donner une tiquette de texte. 1. Dans la fentre de document, placez le point d'insertion l'endroit o vous voulez insrer un espace rserv pour un graphique. 2. Choisissez Insertion > Objets image > Espace rserv pour l'image. 3. Dans la zone de texte Nom (facultatif), tapez le texte que vous souhaitez voir apparatre comme tiquette de l'espace rserv pour l'image. Laissez la zone de texte vide si vous ne voulez pas faire apparatre d'tiquette. Le nom doit commencer par une lettre et ne peut contenir que des lettres ou des chiffres : les espaces et les caractres ASCII tendus ne sont pas autoriss. 4. (Obligatoire) Dans les zones de texte Largeur et Hauteur, saisissez un nombre pour dfinir la taille de l'image en pixels. 5. (Facultatif) Pour Couleur, procdez de l'une des manires suivantes pour appliquer une couleur : Utilisez le slecteur de couleur pour slectionner une couleur. Entrez la valeur hexadcimale de la couleur (par exemple #FF0000). Entrez le nom d'une couleur scurise pour le Web (par exemple rouge). 6. (Facultatif) Dans Texte secondaire, entrez une description de l'image pour les personnes utilisant un navigateur en mode texte. Remarque : Une balise image est insre automatiquement dans le code HTML, avec un attribut src vide. 7. Cliquez sur OK. Les attributs de couleur et de taille ainsi que l'tiquette de l'espace rserv s'affichent comme suit :
Lorsqu'ils sont visualiss dans un navigateur, le texte de l'tiquette et celui de la taille ne s'affichent pas.
307
Remplacement d'un espace rserv pour une image
En haut
Un espace rserv pour image n'affiche pas d'image dans un navigateur. Avant de publier votre site, il convient de remplacer tous les espaces rservs pour une image que vous avez ajouts par des fichiers d'image adapts au Web, tels que des images GIF ou JPEG. Si vous possdez Fireworks, vous pouvez crer un nouveau graphique partir d'un espace rserv pour image dans Dreamweaver. La nouvelle image reprend la mme taille que celle de l'espace rserv pour l'image. Vous pouvez modifier l'image, puis la remplacer dans Dreamweaver. 1. Dans la fentre Document, procdez de l'une des manires suivantes : Double-cliquez sur l'espace rserv pour l'image. Cliquez sur l'espace rserv pour l'image pour le slectionner puis, dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur l'icne du dossier ct de la zone de texte Src. 2. Dans la bote de dialogue Source de l'image, localisez l'image que vous voulez utiliser pour remplacer l'espace rserv, puis cliquez sur OK.
Dfinition des proprits de l'espace rserv pour l'image
En haut
Pour dfinir les proprits d'un espace rserv pour l'image, slectionnez l'espace rserv dans la fentre de document, puis choisissez la commande Fentre > Proprits pour afficher l'inspecteur Proprits. Cliquez sur la flche d'agrandissement dans l'angle infrieur droit pour afficher toutes les proprits. Utilisez l'inspecteur Proprits pour dfinir un nom, une largeur, une hauteur, une source d'image, une autre description de texte, un alignement ou une couleur pour l'espace rserv pour l'image.
Dans l'inspecteur Proprits de l'espace rserv, la zone de texte grise et la zone de texte Aligner sont dsactives. Vous pouvez dfinir ces proprits dans l'inspecteur Proprits de l'image lorsque vous remplacez l'espace rserv par une image. Parmi les options suivantes, dfinissez celles de votre choix : L et H Dfinissent la largeur et la hauteur de l'espace rserv pour l'image, en pixels. Src Spcifie le fichier source de l'image. Pour un espace rserv pour une image, cette zone de texte est vide. Cliquez sur le bouton Parcourir pour slectionner une image utiliser en remplacement du graphique de l'espace rserv. Lien Spcifie un lien hypertexte pour l'espace rserv de l'image. Faites glisser l'icne Pointer vers un fichier dans le panneau Fichiers, cliquez sur l'icne de dossier pour rechercher et slectionner un document de votre site ou tapez directement l'URL. Sec Spcifie le texte secondaire qui apparatra la place de l'image dans les navigateurs de type texte seulement, ou dans les navigateurs dont l'utilisateur a dsactiv le tlchargement automatique des images. Pour les utilisateurs malvoyants qui utilisent un synthtiseur vocal avec un navigateur en mode texte, le texte est lu. Dans certains navigateurs, ce texte apparat galement lorsque le pointeur se trouve sur l'image. Crer Permet de lancer Fireworks pour crer une image de remplacement. Le bouton Crer est dsactiv, sauf si Fireworks est galement install sur votre ordinateur. Mettre jour depuis l'original Lorsque limage Web (cest--dire limage de la page Dreamweaver) nest pas synchronise avec le fichier Photoshop dorigine, Dreamweaver dtecte que le fichier dorigine a t mis jour et affiche lune des flches de licne dobjet dynamique en rouge. Lorsque vous slectionnez limage Web en mode Cration et que vous cliquez sur le bouton Mettre jour depuis loriginal dans linspecteur Proprits, limage se met jour automatiquement avec tous les changements effectus dans le fichier Photoshop dorigine. Couleur Spcifie une couleur pour l'espace rserv de l'image.
Modification d'images dans Dreamweaver
En haut
Vous pouvez rchantillonner, recadrer, optimiser et accentuer les images dans Dreamweaver. Vous pouvez galement rgler leur luminosit et leur contraste.
Fonctions de retouche d'image

308
Dreamweaver comprend des fonctions basiques de retouche d'image, ce qui vous vite de devoir lancer une application externe pour effectuer cette tche (par exemple, Fireworks ou Photoshop). Les outils de retouche d'image de Dreamweaver sont conus pour un travail simplifi avec les concepteurs de contenu responsables de la cration des fichiers d'image utiliss sur votre site Web. Remarque : Il n'est pas ncessaire d'installer Fireworks ou d'autres applications de retouche d'image sur votre ordinateur pour utiliser les fonctions de retouche d'image de Dreamweaver. Choisissez Modifier > Image. Dfinissez l'une des fonctions de retouche d'image Dreamweaver suivantes : Rchantillonner Ajoute ou enlve des pixels d'images JPEG ou GIF redimensionnes afin qu'elles correspondent le mieux possible l'aspect des images originales. Le rchantillonnage d'une image rduit la taille de son fichier, ce qui permet d'en acclrer le tlchargement. Lorsque vous redimensionnez une image dans Dreamweaver, vous pouvez la rchantillonner afin de l'adapter ses nouvelles dimensions. Lorsqu'un objet bitmap est rchantillonn, des pixels sont ajouts l'image ou en sont enlevs afin de l'agrandir ou de la rduire. En gnral, le rchantillonnage d'une image une rsolution suprieure provoque une faible perte de qualit. Le rchantillonnage une rsolution infrieure, en revanche, provoque toujours une perte de donnes et donne une moins bonne qualit. Recadrer Permet de rduire la surface des images. En gnral, il est utile pour mettre en vidence le sujet de l'image et supprimer les aspects indsirables qui entourent le centre d'intrt de l'image. Luminosit et contraste Modifie la luminosit et le contraste des pixels qui composent l'image. Ceci affecte les surbrillances, les ombres et les demi-tons d'une image. Cette fonction est utilise pour corriger les images trop sombres ou trop claires. Accentuer Ajuste la mise au point d'une image en augmentant le contraste des bords sur l'image. Lorsque vous scannez une image ou que vous prenez une photo numrique, la plupart des logiciels de capture d'images estompent par dfaut les bords des objets photographis. Cela empche les dtails extrmement prcis de se perdre dans les pixels dont sont constitues les images numriques. Cependant, il est souvent ncessaire d'accentuer l'image pour faire ressortir les dtails dans les fichiers d'image numrique, ce qui augmente le contraste des bords et rend l'image encore plus nette. Remarque : Les fonctions de modification d'images de Dreamweaver s'appliquent uniquement aux formats de fichier JPEG et GIF. Les autres formats de fichiers d'image bitmap ne peuvent pas tre modifis l'aide de ces fonctions.
Recadrage d'une image

Dreamweaver permet de recadrer (ou rogner) les images bitmap. Remarque : Lorsque vous recadrez une image, le fichier d'image source est modifi sur le disque. Il peut donc s'avrer utile de conserver une copie de sauvegarde du fichier d'image au cas o vous auriez besoin de revenir l'image d'origine. 1. Ouvrez la page qui contient l'image recadrer, slectionnez l'image et procdez de l'une des manires suivantes : Cliquez sur l'icne Recadrer dans l'inspecteur Proprits des images.
Choisissez Modifier > Image > Recadrer. Des poignes de recadrage apparaissent autour de l'image slectionne. 2. Ajustez-les jusqu' ce que la surface de l'image conserver soit entoure d'une zone limite. 3. Double-cliquez dans cette zone ou appuyez sur Entre pour recadrer la slection. 4. Une bote de dialogue vous informe que le fichier image que vous recadrez sera modifi sur le disque. Cliquez sur OK. Chaque pixel de l'image bitmap situ hors de la zone limite est supprim mais les autres objets de l'image ne sont pas affects. 5. Vrifiez l'aide de l'aperu que l'image correspond vos attentes. Si ce n'est pas le cas, choisissez Edition > Annuler Recadrer pour revenir l'image d'origine. Remarque : Vous pouvez annuler l'effet de la commande Recadrer (et revenir au fichier d'image d'origine) jusqu'au moment o vous quittez Dreamweaver ou alors modifiez le fichier dans une application de retouche d'image.
Optimisation d'une image

Vous pouvez optimiser des images sur vos pages Web dans Dreamweaver. 1. Ouvrez la page qui contient l'image optimiser, slectionnez l'image et procdez de l'une des manires suivantes : Cliquez sur le bouton Modifier les paramtres de l'image Choisissez Modifier > Image > Optimiser. 2. Apportez les modifications dans la bote de dialogue Optimisation d'image, puis cliquez sur OK. dans l'inspecteur Proprits de l'image.
Accentuation d'une image
309
L'accentuation augmente le contraste des pixels autour des objets pour augmenter la dfinition de l'image et obtenir une meilleure nettet. 1. Ouvrez la page qui contient l'image accentuer, slectionnez l'image et procdez de l'une des manires suivantes : Cliquez sur le bouton Accentuer dans l'inspecteur Proprits des images.
Choisissez Modifier > Image > Accentuer. 2. Pour spcifier le degr d'accentuation appliqu par Dreamweaver l'image, dplacez le curseur ou tapez une valeur comprise entre 0 et 10 dans la zone de texte. Lorsque vous ajustez la nettet de l'image l'aide de la bote de dialogue Accentuer, vous pouvez afficher un aperu de l'image modifie. 3. Lorsque vous tes satisfait de l'image, cliquez sur OK. 4. Enregistrez vos modifications en choisissant Fichier > Enregistrer ou revenez l'image d'origine en choisissant Edition > Annuler Accentuer. Remarque : Vous pouvez annuler l'effet de la commande Accentuer (et revenir au fichier d'image d'origine) uniquement avant d'enregistrer la page qui contient l'image. Une fois que vous avez enregistr la page, les modifications apportes l'image sont dfinitivement enregistres.
Ajustement de la luminosit et du contraste d'une image

La fonction Luminosit/Contraste modifie la luminosit ou le contraste des pixels qui composent l'image. Ceci affecte les surbrillances, les ombres et les demi-tons d'une image. Cette fonction est utilise pour corriger les images trop sombres ou trop claires. 1. Ouvrez la page qui contient l'image ajuster, slectionnez l'image et procdez de l'une des manires suivantes : Cliquez sur le bouton Luminosit/Contraste dans l'inspecteur Proprits des images. Choisissez Modifier > Image > Luminosit/Contraste. 2. Dplacez les curseurs de luminosit et de contraste pour modifier les valeurs votre convenance. Les valeurs sont comprises entre -100 et 100. 3. Cliquez sur OK.
Cration d'une image survole
En haut
Vous pouvez insrer des images survoles dans votre page. Une image survole est une image qui, lorsqu'elle est visualise dans un navigateur, change lorsque le pointeur vient se placer au-dessus d'elle. Vous devez disposer de deux images pour crer l'image survole : l'image principale (affiche au chargement de la page) et l'image secondaire (qui apparat lorsque le pointeur est plac au-dessus de l'image principale). Les deux images utilises doivent avoir les mmes dimensions ; si ce n'est pas le cas, Dreamweaver redimensionne la seconde image en fonction de la taille de la premire. Les images survoles sont automatiquement dfinies pour rpondre l'vnement onMouseOver . Vous pouvez configurer une image pour qu'elle rponde un vnement diffrent (par exemple, un clic de souris) ou modifier une image survole. Vous trouverez un didacticiel sur la cration d'images survoles l'adresse suivante : www.adobe.com/go/vid0159_fr. 1. Dans la fentre de document, placez le point d'insertion l'endroit o vous voulez insrer l'image survole. 2. Insrez l'image survole l'aide de l'une des mthodes suivantes : Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Images puis slectionnez l'icne Image survole. Lorsque l'icne Image survole s'affiche dans le panneau Insertion, vous pouvez la faire glisser jusqu' la fentre de document. Slectionnez Insertion > Objets image > Image survole. 3. Dfinissez les options, puis cliquez sur OK. Nom de l'image Nom de l'image survole. Image d'origine L'image qui doit s'afficher au chargement de la page. Entrez le chemin d'accs dans la zone de texte ou cliquez sur Parcourir et slectionnez l'image. Image survole L'image afficher lorsque le pointeur est plac au-dessus de l'image originale. Entrez le chemin d'accs de l'image ou cliquez sur Parcourir pour la slectionner. Prcharger l'image survole Prcharge les images dans la mmoire cache du navigateur afin d'viter tout dlai lorsque vous faites passer le pointeur de la souris par-dessus l'image. Texte secondaire (Facultatif) Texte qui dcrit l'image l'intention des personnes utilisant un navigateur en mode texte. Si cliqu, aller l'URL Le fichier ouvrir lorsqu'un utilisateur clique sur l'image survole. Entrez le chemin d'accs du fichier ou cliquez sur Parcourir pour le slectionner. Remarque : Si vous ne dfinissez pas un lien pour l'image, Dreamweaver insre un lien nul (#) dans le code source HTML auquel le comportement de survol est attach. Si vous supprimez le lien nul, l'image survole ne fonctionne plus.
310
4. Choisissez Fichier > Aperu dans le navigateur ou appuyez sur la touche F12. 5. Dans le navigateur, placez le pointeur au-dessus de l'image d'origine pour voir l'image survole. Remarque : Il est impossible de voir l'effet d'une image survole dans le mode Cration.
Utilisation d'un diteur d'image externe
En haut
Dans Dreamweaver, vous pouvez ouvrir une image slectionne dans un diteur d'image externe. Lorsque vous revenez dans Dreamweaver aprs avoir enregistr le fichier d'image modifi, toutes les modifications apportes l'image sont visibles dans la fentre de document. Vous pouvez dfinir Fireworks comme principal diteur d'image. Vous pouvez galement dfinir quels types de fichier un diteur peut ouvrir et vous pouvez slectionner plusieurs diteurs d'image. Par exemple, vous pouvez dfinir des prfrences afin de dmarrer Fireworks pour modifier les fichiers GIF et de lancer un diteur d'image diffrent pour modifier les fichiers JPG ou JPEG.
Dmarrage de l'diteur d'image externe

Effectuez l'une des oprations suivantes : Double-cliquez sur l'image modifier. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur l'image modifier, choisissez Modifier avec > Parcourir et slectionnez un diteur. Slectionnez l'image modifier, puis cliquez sur Modifier dans l'inspecteur Proprits. Double-cliquez sur le fichier d'image dans le panneau Fichiers pour lancer l'diteur d'image principal. Si vous n'avez pas indiqu d'diteur d'image, Dreamweaver excute l'diteur par dfaut de ce type de fichier. Remarque : Lorsque vous ouvrez directement une image partir du panneau Fichiers, les fonctionnalits d'intgration de Fireworks sont inoprantes ; Fireworks n'ouvre pas le fichier original PNG. Pour utiliser ces fonctionnalits d'intgration de Fireworks, ouvrez les images partir de la fentre de document. Si l'image mise jour n'apparat pas une fois de retour dans la fentre de Dreamweaver, slectionnez l'image et cliquez sur le bouton Actualiser dans l'inspecteur Proprits.
Dfinition d'un diteur d'image externe pour un type de fichier existant

Vous pouvez slectionner l'diteur d'image utiliser pour ouvrir et modifier les fichiers graphiques. 1. Ouvrez la bote de dialogue Types de fichiers/Editeurs en effectuant l'une des oprations suivantes : Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh) et slectionnez la catgorie Types de fichiers/Editeurs dans la liste de gauche. Choisissez la commande Edition > Modifier avec diteur externe, puis slectionnez Types de fichiers/Editeurs. 2. Dans la liste Extensions, slectionnez l'extension de fichier pour laquelle dfinir un diteur externe. 3. Cliquez sur le bouton Ajouter (+) au-dessus de la liste Editeurs. 4. Dans la bote de dialogue Slectionner un diteur externe, recherchez l'application dmarrer en tant qu'diteur pour ce type de fichier. 5. Dans la bote de dialogue Prfrences, cliquez sur Principal si vous souhaitez que cet diteur soit l'diteur principal pour ce type de fichier. 6. Si vous souhaitez configurer un diteur supplmentaire pour ce type de fichier, rptez les tapes 3 et 4. Dreamweaver utilise automatiquement l'diteur principal lorsque vous modifiez ce type d'image. Vous pouvez choisir l'un des autres diteurs figurant dans la liste, partir du menu droulant de l'image, dans la fentre de document.
Ajout d'un nouveau type de fichier la liste Extensions

1. Ouvrez la bote de dialogue Types de fichiers/Editeurs en effectuant l'une des oprations suivantes : Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh) et slectionnez la catgorie Types de fichiers/Editeurs dans la liste de gauche. Choisissez la commande Edition > Modifier avec diteur externe, puis slectionnez Types de fichiers/Editeurs. 2. Dans la bote de dialogue Types de fichiers/Editeurs, cliquez sur le bouton Ajouter (+) au-dessus de la liste Extensions. Une zone de texte s'affiche dans la liste Extensions. 3. Tapez l'extension de fichier pour le type de fichier que vous voulez ouvrir avec l'diteur. 4. Pour slectionner un diteur externe pour le type de fichier, cliquez sur le bouton Ajouter (+) au-dessus de la liste Editeurs.
311
5. Dans la bote de dialogue qui apparat alors, slectionnez l'application utiliser pour modifier ce type d'image. 6. Cliquez sur Principal si vous dsirez que ce programme soit l'diteur principal pour ce type d'image.
Modification d'une prfrence d'diteur existante

1. Ouvrez la bote de dialogue Types de fichiers/Editeurs en effectuant l'une des oprations suivantes : Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh) et slectionnez la catgorie Types de fichiers/Editeurs dans la liste de gauche. Choisissez la commande Edition > Modifier avec diteur externe, puis slectionnez Types de fichiers/Editeurs. 2. Dans la bote de dialogue Types de fichiers/Editeurs, slectionnez dans la liste Extensions le type de fichier que vous souhaitez modifier pour visualiser les diteurs actuellement dfinis. 3. Dans la liste Editeurs, slectionnez l'diteur que vous dsirez affecter ce type de fichier, puis procdez de l'une des manires suivantes : Cliquez sur le bouton Ajouter (+) ou Supprimer (-), au-dessus de la liste Editeurs, pour ajouter ou supprimer un diteur. Cliquez sur le bouton Rendre principal pour dfinir l'diteur lancer par dfaut pour la retouche.
Application de comportements aux images
En haut
Vous pouvez appliquer l'un des comportements disponibles une image ou la zone ractive d'une image. Lorsque vous appliquez un comportement une zone ractive, Dreamweaver insre le code source HTML ncessaire dans la balise area. Trois comportements s'appliquent spcifiquement aux images : Prcharger les images, Permuter une image et Restaurer l'interversion d'images. Prcharger les images Place dans la mmoire cache du navigateur les images qui ne sont pas immdiatement affiches lors du chargement de la page (par exemple, les images de substitution appeles par un comportement, un lment PA ou une fonction en JavaScript). Cela vite l'utilisateur d'attendre que ces images soient charges, lorsqu'un vnement dclenche leur apparition. Permuter une image Remplace une image par une autre, en modifiant l'attribut SRC de la balise img . Utilisez cette action pour crer des substitutions de boutons et autres effets sur des images (y compris la substitution de plusieurs images la fois). Restaurer l'image intervertie Rtablit la dernire interversion d'images son tat d'origine. Cette action est automatiquement ajoute par dfaut lorsque vous associez l'action Permuter une image un objet ; en principe, vous n'avez pas besoin d'y faire appel manuellement. Vous pouvez galement utiliser des comportements pour crer des systmes de navigation plus sophistiqus, comme les menus de reroutage.
312
Dfinition des proprits de page

Dfinition des proprits CSS de police, de couleur d'arrire-plan et d'image d'arrire-plan d'une page Dfinition des proprits HTML d'une page Pour chaque page que vous crez dans Dreamweaver, vous pouvez spcifier les proprits de formatage dans la bote de dialogue Proprits de la page (Modifier > Proprits de la page). Cette bote de dialogue permet de spcifier la famille et la taille par dfaut de la police, la couleur d'arrire-plan, les marges, le style des liens ainsi que d'autres aspects de la conception de page. Vous pouvez attribuer de nouvelles proprits chaque nouvelle page que vous crez et modifier celles des pages existantes. Les modifications que vous apportez dans la bote de dialogue Proprits de la page s'appliquent la page entire. Dreamweaver propose deux mthodes de modification des proprits de page : CSS ou HTML. Adobe recommande d'utiliser CSS pour dfinir des arrire-plans et modifier les proprits des pages. Remarque : Les proprits de page que vous choisissez ne s'appliquent qu'au document actif. Si une page utilise une feuille de style CSS externe, Dreamweaver n'crase pas les balises dfinies dans la feuille de style, car ceci affecterait les autres pages qui utilisent cette feuille.
Dfinition des proprits CSS de police, de couleur d'arrire-plan et d'image d'arrire-plan d'une page
En haut
La bote de dialogue Proprits de la page permet de spcifier diverses options de base de mise en forme des pages Web, comme la police, la couleur d'arrire-plan et l'image d'arrire-plan. 1. Choisissez Modifier > Proprits de la page ou cliquez sur le bouton Proprits de la page de l'inspecteur Proprits. 2. Slectionnez la catgorie Apparence (CSS) et dfinissez les options. Police Spcifie la famille de polices par dfaut utiliser dans vos pages Web. Dreamweaver utilise la famille de polices spcifie sauf si une autre police est dsigne pour un lment de texte donn. Taille Spcifie la taille de police par dfaut utiliser dans vos pages Web. Dreamweaver utilise la taille de police spcifie sauf si une autre taille est dsigne pour un lment de texte donn. Couleur du texte Spcifie la couleur d'affichage des polices par dfaut. Couleur d'arrire-plan Dfinit la couleur d'arrire-plan de la page. Activez l'option Couleur d'arrire-plan puis choisissez une couleur dans le slecteur. Image d'arrire-plan Dfinit une image d'arrire-plan Cliquez sur le bouton Parcourir puis accdez l'image et slectionnez-la. Vous pouvez galement indiquer le chemin de l'image d'arrire-plan dans le champ Image d'arrire-plan. Dreamweaver gnre une mosaque (multiplication) de l'image d'arrire-plan si elle ne remplit pas entirement sa fentre, comme le font les navigateurs. Pour viter la cration de cette mosaque, dsactivez cette fonction l'aide des feuilles de style en cascade. Rptition Indique comment l'image d'arrire-plan sera affiche sur la page : Slectionnez l'option Pas de rptition pour n'afficher l'image d'arrire-plan qu'une seule fois. Slectionnez l'option Rptition pour rpter, ou mettre en mosaque, l'image l'horizontale et la verticale. Slectionnez l'option Rpter-x pour former une mosaque horizontale. Slectionnez l'option Rpter-y pour former une mosaque verticale. Marge gauche et Marge droite Spcifie la taille des marges gauche et droite de la page. Marge haut et Marge bas Spcifie la taille des marges en haut et en bas de la page.
Dfinition des proprits HTML d'une page
En haut
La dfinition de proprits dans cette catgorie de la bote de dialogue Proprits de la page entrane un formatage de la page l'aide de code HTML au lieu de code CSS. 1. Choisissez Modifier > Proprits de la page ou cliquez sur le bouton Proprits de la page de l'inspecteur Proprits. 2. Slectionnez la catgorie Apparence (HTML) et dfinissez les options.
313
Image d'arrire-plan Dfinit une image d'arrire-plan Cliquez sur le bouton Parcourir puis accdez l'image et slectionnez-la. Vous pouvez galement indiquer le chemin de l'image d'arrire-plan dans le champ Image d'arrire-plan. Dreamweaver gnre une mosaque (multiplication) de l'image d'arrire-plan si elle ne remplit pas entirement sa fentre, comme le font les navigateurs. Pour viter la cration de cette mosaque, dsactivez cette fonction l'aide des feuilles de style en cascade. Arrire-plan Dfinit la couleur d'arrire-plan de la page. Activez l'option Couleur d'arrire-plan puis choisissez une couleur dans le slecteur. Text Spcifie la couleur d'affichage des polices par dfaut. Lien Spcifie la couleur appliquer au texte qui constitue le lien. Liens visits Spcifie la couleur appliquer aux liens visits. Liens actifs Spcifie la couleur appliquer lorsque la souris ou le curseur clique sur un lien. Marge gauche et Marge droite Spcifie la taille des marges gauche et droite de la page. Marge haut et Marge bas Spcifie la taille des marges en haut et en bas de la page.
314
A propos des actifs et des bibliothques

A propos des actifs A propos des lments de bibliothque
A propos des actifs
Haut de la page
Vous pouvez utiliser Adobe Dreamweaver pour assurer le suivi des actifs inclus dans un site, notamment les images, les animations, les couleurs, les scripts et les liens, et pour en afficher un aperu. Vous pouvez galement faire glisser un actif directement pour l'insrer dans une page de votre document actuel. Vous pouvez obtenir des actifs partir de diffrentes sources. Par exemple, vous pouvez crer des actifs dans une application, telle que Adobe Fireworks ou Adobe Flash, les recevoir d'un collgue, les copier partir d'un CD-ROM de graphiques ou encore les copier partir d'un site Web d'images. Dreamweaver permet galement d'accder deux types d'actifs spciaux : les bibliothques et les modles. Tous deux sont des actifs lis : lorsque vous modifiez un lment de bibliothque ou un modle, Dreamweaver met jour tous les documents qui utilisent ces lments. Les lments de bibliothque reprsentent gnralement de petits actifs de conception, tels que le logo ou les informations de copyright d'un site. Pour dfinir la conception de zones plus larges, utilisez plutt un modle.
A propos des lments de bibliothque
Haut de la page
Une bibliothque est un fichier Dreamweaver spcial regroupant un ensemble d'actifs individuels ou de copies d'actifs que vous pouvez placer dans vos pages Web. Les actifs prsents dans une bibliothque portent le nom d'lments de bibliothque. Les lments pouvant tre stocks dans une bibliothque sont notamment les images, les tableaux, les sons et les fichiers crs l'aide d'Adobe Flash. Vous pouvez mettre jour automatiquement toutes les pages qui utilisent un lment de bibliothque chaque fois que vous modifiez cet lment. Par exemple, supposons que vous construisiez un site de grande taille pour une socit qui souhaite qu'un slogan figure sur chaque page. Vous pouvez crer un lment de bibliothque qui contient le slogan et utiliser cet lment dans chaque page. Si le slogan est modifi, vous pouvez modifier l'lment de bibliothque et mettre jour automatiquement chaque page qui l'utilise. Dreamweaver stocke les lments de bibliothque dans un dossier nomm Library, au sein du dossier racine local de chaque site. Chaque site possde sa propre bibliothque. Vous pouvez crer un lment de bibliothque partir de n'importe quel lment dans la section body d'un document, notamment du texte, des tableaux, des formulaires, des applets Java, des plug-ins, des lments ActiveX, des barres de navigation et des images. Pour les lments lis tels que les images, la bibliothque enregistre uniquement une rfrence l'lment. Le fichier d'origine doit rester l'emplacement spcifi pour que l'lment de la bibliothque fonctionne correctement. Il peut toutefois tre utile de stocker une image dans un lment de bibliothque. Par exemple, vous pouvez stocker une balise img complte dans un lment de bibliothque, afin de pouvoir modifier facilement le texte alt d'une image, ou mme son attribut src, dans l'ensemble du site. N'utilisez pas cette technique pour modifier les attributs de largeur et de hauteur (width et height) d'une image, sauf si vous utilisez galement un diteur d'image pour changer la taille relle de l'image. Remarque : Si l'lment de bibliothque contient des liens, ils ne fonctionneront pas ncessairement sur le nouveau site. En outre, les images d'un lment de bibliothque ne sont pas copies vers le nouveau site. Lorsque vous utilisez un lment de bibliothque, Dreamweaver insre un lien vers cet lment dans la page Web au lieu d'insrer l'lment luimme. Cela signifie que Dreamweaver insre une copie du code source HTML pour cet lment dans le document et ajoute un commentaire HTML contenant une rfrence l'lment externe d'origine. Il s'agit d'une rfrence externe qui rend la mise jour automatique possible. Lorsque vous crez un lment de bibliothque qui comporte un lment auquel est attach un comportement Dreamweaver, Dreamweaver copie l'lment et son gestionnaire d'vnements (l'attribut qui spcifie l'vnement dclenchant l'action, tel que onClick, onLoad ou onMouseOver, et l'action appeler lorsque l'vnement se produit) dans le fichier de l'lment de bibliothque. Dreamweaver ne copie pas les fonctions JavaScript associes dans l'lment de la bibliothque. Au lieu de cela, lorsque vous insrez l'lment de bibliothque dans un document, Dreamweaver insre automatiquement les fonctions JavaScript appropries dans la section head de ce document (si elles ne s'y trouvent pas dj). Remarque : Si vous rdigez manuellement le code JavaScript (c'est--dire si vous le crez sans utiliser de comportements Dreamweaver), vous pouvez l'intgrer votre lment de bibliothque l'aide du comportement Appel JavaScript pour excuter le code. Si vous n'utilisez pas de comportement Dreamweaver pour excuter le code, le code n'est pas conserv dans l'lment de bibliothque. La modification des comportements dans les lments de bibliothque doit respecter certaines conditions. Les lments de bibliothque ne peuvent pas contenir de feuilles de style, car le code associ ces lments figure dans la section HEAD. Voir aussi
315
A propos du cadre applicatif Spry

Le cadre applicatif Spry est une bibliothque JavaScript qui permet aux concepteurs Web de crer des pages Web offrant une exprience enrichie aux visiteurs de leurs sites. Avec Spry, vous pouvez utiliser du code HTML et CSS, ainsi qu'une quantit minime de JavaScript, afin d'incorporer des donnes XML dans vos documents HTML, de crer des widgets tels que des accordons et des barres de menus, ou encore ajouter diffrents effets divers lments de page. Le cadre applicatif Spry est conu de telle sorte que le marquage est simple et facile utiliser pour toute personne possdant une connaissance de base du langage HTML, de CSS et de JavaScript. Le cadre applicatif Spry est principalement destin aux professionnels de la conception Web ou aux concepteurs Web amateurs expriments. Il n'est pas destin servir de cadre d'applications Web part entire pour le dveloppement Web au niveau de l'entreprise, bien qu'il puisse tre employ en combinaison avec d'autres pages au niveau de l'entreprise. Pour plus d'informations sur le cadre applicatif Spry, consultez le site www.adobe.com/go/learn_dw_spryframework_fr. Voir aussi Guide de dveloppement Spry
316
Ajout de son
Formats de fichiers audio Lien vers un fichier audio Incorporation d'un fichier audio
Formats de fichiers audio
Haut de la page
Il est possible d'ajouter du son une page Web. Il existe de nombreux types de fichiers et de formats audio, par exemple, les fichiers .wav, .midi et .mp3. Certains facteurs sont considrer avant de dcider d'un format et d'une mthode d'ajout de son : son objectif, son public, la taille du fichier, la qualit du son et les diffrences entre les navigateurs. Remarque : Le traitement des fichiers son est trs diffrent et incohrent suivant les navigateurs. Vous pouvez ajouter un fichier audio un fichier SWF, puis incorporer le fichier SWF pour assurer une meilleure cohrence. La liste ci-dessous dcrit les formats de fichiers audio les plus courants et prsente certains avantages et inconvnients 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 requirent pas de plug-in. Bien que leur qualit sonore soit trs bonne, elle peut varier en fonction de la carte son du visiteur. Un petit fichier MIDI peut offrir un clip audio de longue dure. Les fichiers MIDI ne peuvent pas tre enregistrs et doivent tre synthtiss sur un ordinateur quip d'un matriel et d'un logiciel spciaux. Le format .wav (Waveform Extension), qui offre une bonne qualit sonore, est pris en charge par plusieurs navigateurs et ne requiert pas de plug-in. Vous pouvez enregistrer vos propres fichiers WAV partir d'un CD, d'une cassette, d'un microphone, etc. Toutefois, la taille importante des fichiers limite srieusement la longueur des clips audio que vous pouvez utiliser dans vos pages Web. Le format .aif (Audio Interchange File Format ou AIFF), tout comme le format WAV, offre une bonne qualit sonore, est pris en charge par plusieurs navigateurs et ne requiert pas de plug-in. Vous pouvez galement enregistrer des fichiers AIFF partir d'un CD, d'une cassette, d'un microphone, etc. Toutefois, la taille importante des fichiers limite srieusement 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 manire significative la taille des fichiers audio. La qualit sonore est excellente : si un fichier MP3 est correctement enregistr et compress, sa qualit peut tre quivalente celle d'un CD. La technologie MP3 permet de lire le fichier en transit afin que les visiteurs n'aient pas attendre le tlchargement du fichier entier avant de pouvoir l'couter. Mais le fichier est plus gros qu'un fichier Real Audio, ce qui signifie que le tlchargement d'une chanson entire peut s'avrer assez long si l'on utilise une connexion Internet par modem. Pour lire des fichiers MP3, les visiteurs doivent tlcharger 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 trs lev de compression avec une taille de fichier infrieure celle du format MP3. Le tlchargement de fichiers de chanson peut tre effectu dans un laps de temps raisonnable. Les fichiers pouvant tre diffuss partir d'un serveur Web normal, les visiteurs peuvent commencer couter le son avant la fin du tlchargement. Les visiteurs doivent tlcharger et installer l'application d'aide ou le plug-in RealPlayer afin de lire ces fichiers. .qt, .qtm, .mov ou QuickTime est un format la fois audio et vido mis au point par Apple Computer. QuickTime est inclus dans le systme d'exploitation des ordinateurs Apple Macintosh. Il est utilis par la plupart des applications Macintosh utilisant l'audio, la vido ou des animations. Les PC aussi peuvent lancer les fichiers au format QuickTime, mais cela ncessite le pilote appropri. QuickTime prend en charge la plupart des formats de codage, notamment Cinepak, JPEG et MPEG. Remarque : En plus des formats les plus courants, mentionns ci-dessus, il existe de nombreux formats audio et vido utilisables sur le Web. Si vous rencontrez un fichier audio ou vido dont le format vous est inconnu, retrouvez son crateur afin d'apprendre comment l'utiliser au mieux.
Haut de la page
Lien vers un fichier audio
Un lien vers un fichier audio est une mthode simple et efficace pour ajouter du son une page Web. Cette mthode d'incorporation de fichiers audio permet aux visiteurs de choisir s'ils veulent couter le fichier et rend le fichier disponible pour un plus vaste public. 1. Slectionnez le texte ou l'image utiliser comme lien vers le fichier audio. 2. Dans l'inspecteur Proprits, cliquez sur l'icne de dossier, ct de la zone Lien, pour rechercher le fichier audio, ou tapez le nom et le chemin d'accs au fichier dans la zone Lien.
Incorporation d'un fichier audio
Haut de la page
L'opration consistant incorporer un son intgre le fichier audio directement dans la page, mais le son est uniquement lu si les visiteurs du site disposent du plug-in appropri pour le fichier audio choisi. Incorporez des fichiers si vous souhaitez utiliser le son en tant que musique de fond ou pour contrler le volume, l'apparence du lecteur sur votre page ou encore les points de dmarrage et d'arrt du fichier audio.
317
Lorsque vous incorporez des fichiers son vos pages Web, rflchissez bien l'usage qu'il est possible d'en faire et de quelle faon les visiteurs pourraient s'en servir. Proposez toujours une commande permettant d'activer ou de couper le son, au cas o certains visiteurs ne souhaiteraient pas entendre le contenu audio. 1. En mode Cration, placez le point d'insertion l'endroit o vous souhaitez incorporer le fichier et procdez de l'une des manires suivantes : Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Mdias et slectionnez l'icne Plug-in Slectionnez Insertion > Mdias > Plug-in. 2. Recherchez le fichier audio puis cliquez sur OK. 3. Entrez la largeur et la hauteur en saisissant les valeurs dans les zones de texte appropries de l'inspecteur Proprits ou en redimensionnant l'espace rserv au plug-in dans la fentre de document. Ces valeurs dterminent la taille laquelle les contrles audio sont affichs dans le navigateur. Voir aussi dans le menu.
318
Ajout d'objets multimdias

Insertion et modification d'objets multimdias Lancement d'un diteur externe pour des fichiers multimdias Spcification de l'diteur lancer depuis Dreamweaver Utilisation des Design Notes avec les objets multimdias Insertion d'animations Shockwave Ajout de vido (non FLV) Insertion du contenu d'un plug-in Dpannage des plug-ins de Insertion d'un contrle ActiveX Insertion d'une applet Java Utilisation de comportements pour contrler les objets multimdias Utilisation de paramtres pour contrler des objets multimdia
Insertion et modification d'objets multimdias
Haut de la page
Outre les fichiers SWF et FLV, vous pouvez insrer des vidos QuickTime ou Shockwave, des applets Java, des contrles ActiveX ou d'autres objets audio ou vido dans un document Dreamweaver. Si vous insrez des attributs d'accessibilit avec un objet multimdia, vous pouvez dfinir les attributs d'accessibilit et modifier ces valeurs dans le code HTML. 1. Placez le point d'insertion dans la fentre de document l'endroit o vous souhaitez insrer l'objet. 2. Pour insrer l'objet souhait, procdez de l'une des manires suivantes : Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Mdias et slectionnez l'icne correspondant au type d'objet que vous souhaitez insrer. Choisissez l'objet appropri dans le sous-menu Insertion > Mdias. Si l'objet insrer n'est pas un objet Shockwave, Applet ou ActiveX, choisissez Plug-in dans le sous-menu Insertion > Mdias. Une bote de dialogue permet alors de choisir un fichier source et de spcifier certains paramtres de l'objet multimdia. Pour viter que ces botes de dialogue ne s'affichent, choisissez Edition > Prfrences > Gnral (Windows) ou Dreamweaver > Prfrences > Gnral (Macintosh) et dsactivez l'option Afficher la bote de dialogue lors de l'insertion d'objets. Pour remplacer la prfrence d'affichage des botes de dialogue, maintenez enfonce la touche Ctrl (Windows) ou Option (Macintosh) tout en insrant l'objet. Par exemple, pour insrer un espace rserv pour une animation Shockwave sans spcifier le fichier correspondant, maintenez la touche Ctrl ou Option enfonce et cliquez sur le bouton Shockwave partir du menu Support de la catgorie Commun du panneau Insertion ou choisissez Insertion > Mdias > Shockwave. 3. Compltez les options de la bote de dialogue Slectionner un fichier, puis cliquez sur OK. Remarque : La bote de dialogue Attributs d'accessibilit s'affiche si vous avez dcid d'afficher les attributs lors de l'insertion de mdias dans la bote de dialogue Edition > Prfrences. 4. Dfinissez les attributs d'accessibilit. Remarque : Vous pouvez galement modifier les attributs d'un objet multimdia. Pour ce faire, slectionnez l'objet et modifiez le code HTML en mode Code, ou cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh), puis slectionnez Modifier le code de la balise. Titre Entrez un titre pour l'objet multimdia. Cl d'accs Entrez un quivalent clavier (une lettre) dans la zone de texte pour slectionner l'objet de formulaire dans le navigateur. Cela permet aux visiteurs du site d'utiliser la touche Ctrl (Windows) conjointement la cl d'accs pour accder l'objet. Par exemple, si vous entrez B comme Cl d'accs, utilisez Ctrl+B pour slectionner l'objet dans le navigateur. Ordre des tabulations Entrez un nombre pour dfinir l'ordre de tabulation de l'objet. La dfinition d'un ordre d'apparition peut se rvler utile lorsque la page contient d'autres liens et d'autres objets de formulaire et que vous voulez que l'utilisateur passe de l'un l'autre dans un ordre particulier. Si vous dfinissez un ordre d'apparition pour un objet, assurez-vous de le faire galement pour tous les autres objets. 5. Cliquez sur OK pour insrer l'objet multimdia. Remarque : Si vous cliquez sur Annuler, un espace rserv pour l'objet multimdia s'affiche dans le document, mais Dreamweaver ne lui associe ni balises ni attributs d'accessibilit. Pour spcifier un fichier source, dfinir les dimensions et d'autres paramtres et attributs, utilisez l'inspecteur Proprits pour chaque objet. Vous pouvez modifier les attributs d'accessibilit d'un objet.
319
Lancement d'un diteur externe pour des fichiers multimdias
Haut de la page
Vous pouvez lancer un diteur externe depuis Dreamweaver pour modifier la plupart des fichiers multimdias. Vous pouvez galement dcider de l'diteur que doit lancer Dreamweaver pour modifier le fichier. 1. Assurez-vous que le type du fichier multimdia est associ un diteur sur votre systme. Pour savoir quel diteur est associ au type de fichier, slectionnez Edition > Prfrences dans Dreamweaver, puis Types de fichiers/Editeurs dans la liste Catgorie. Cliquez sur l'extension de fichier dans la colonne Extensions pour consulter le ou les diteurs associs dans la colonne Editeurs. Vous pouvez modifier l'diteur associ un type de fichier. 2. Double-cliquez sur le fichier multimdia dans le panneau Fichiers pour lancer l'diteur externe et ouvrir le fichier. L'diteur qui est excut lorsque vous double-cliquez sur le fichier du panneau Fichiers est appel diteur principal . Si vous doublecliquez sur un fichier image, par exemple, Dreamweaver ouvre le fichier dans l'application principale de retouche d'image dfinie, par exemple Adobe Fireworks. 3. Si vous ne souhaitez pas utiliser l'diteur externe principal pour modifier le fichier, vous pouvez effectuer l'une des oprations suivantes pour utiliser un autre diteur : Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur le nom du fichier concern et slectionnez Ouvrir avec dans le menu qui s'affiche. En mode Cration, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur l'lment multimdia de la page affiche, puis slectionnez Modifier avec dans le menu contextuel.
Spcification de l'diteur lancer depuis Dreamweaver
Haut de la page
Vous pouvez dfinir l'diteur lancer par Dreamweaver pour modifier un type de fichier et pour ajouter ou supprimer des types de fichiers reconnus par Dreamweaver.
Indication explicite des diteurs externes lancer pour un type de fichier donn
1. Choisissez Edition > Prfrences, puis slectionnez Types de fichiers/Editeurs dans la liste Catgorie. Les extensions de fichiers, par exemple .gif, .wav et .mpg, apparaissent dans la liste de gauche, sous le titre Extensions. Les diteurs associs une extension apparaissent dans la liste de droite, sous le titre Editeurs. 2. Slectionnez l'extension de type de fichier dans la liste Extensions, puis effectuez l'une des oprations suivantes : Pour associer un nouvel diteur au type de fichier, cliquez sur le bouton plus (+), au-dessus de la liste Editeurs et renseignez la bote de dialogue qui s'affiche. Par exemple, slectionnez l'icne de l'application Acrobat pour l'associer au type de fichier. Pour faire d'un diteur l'diteur principal pour un type de fichier donn (c'est--dire celui qui s'ouvre automatiquement lorsque vous double-cliquez sur un fichier de ce type dans le panneau Fichiers), slectionnez cet diteur dans la liste Editeurs, puis cliquez sur Rendre principal. Pour qu'un diteur ne soit plus li un type de fichier donn, slectionnez cet diteur dans la liste Editeurs et cliquez sur le bouton moins (-) au-dessus de la liste.
Ajout d'un nouveau type de fichier et un diteur associ

1. Cliquez sur le bouton plus (+), au-dessus de la liste Extensions et entrez une extension de type de fichier (saisissez le point prcdent l'extension) ou plusieurs extensions lies et spares par des espaces. Vous pouvez, par exemple, entrer .xml .xsl si vous souhaitez associer ces fichiers avec un diteur XML install sur votre systme. 2. Pour slectionner un diteur pour le type de fichier, cliquez sur le bouton plus (+), au-dessus de la liste Editeurs et renseignez la bote de dialogue qui s'affiche.
Suppression d'un type de fichier

Slectionnez le type de fichier dans la liste Extensions et cliquez sur le bouton moins (-) au-dessus de la liste Extensions Remarque : L'annulation de la suppression d'un type de fichier tant impossible, soyez prudent lors d'une telle opration.
Haut de la page
Utilisation des Design Notes avec les objets multimdias
Comme pour la plupart des objets dans Dreamweaver, vous pouvez ajouter des Design Notes un objet multimdia. Les Design Notes sont des notes associes un fichier particulier et stockes dans un fichier spar. Les Design Notes vous permettent de conserver des informations supplmentaires sur les documents, par exemple, des commentaires sur l'tat des fichiers ou le nom des fichiers source des images. 1. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur l'objet dans la fentre de
320
document. Remarque : Vous devez dfinir votre site avant d'ajouter des Design Notes un objet. 2. Cliquez sur Design Notes de la page dans le menu contextuel. 3. Entrez les informations souhaites dans la Design Note. Vous pouvez galement ajouter une Design Note un objet multimdia partir du panneau Fichiers en slectionnant le fichier, en affichant le menu contextuel, puis en choisissant l'option Design Notes dans ce dernier.
Insertion d'animations Shockwave
Haut de la page
Vous pouvez utiliser Dreamweaver pour insrer des animations Shockwave dans vos documents. Adobe Shockwave, une norme pour les lments multimdia interactifs sur le Web, est un format compress qui autorise le tlchargement rapide des fichiers multimdia crs dans Adobe Director, ainsi que leur lecture dans la plupart des navigateurs. 1. Dans la fentre de document, placez le point d'insertion l'endroit o vous souhaitez insrer une animation Shockwave et procdez de l'une des manires suivantes : Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Mdias puis slectionnez l'icne Shockwave Choisissez Insertion > Mdias > Shockwave. 2. Dans la bote de dialogue qui s'affiche, slectionnez un fichier d'animation. 3. Dans l'inspecteur Proprits, tapez la largeur et la hauteur de l'animation dans les zones L et H. dans le menu.
Ajout de vido (non FLV)
Haut de la page
Plusieurs mthodes vous permettent d'ajouter une vido votre page Web et vous pouvez faire appel divers formats. L'utilisateur peut tlcharger les vidos ou elles peuvent tre diffuses et lues pendant leur tlchargement. 1. Placez le fichier vido dans le dossier de votre site. Ces clips se prsentent souvent au format AVI ou MPEG. 2. Insrez un lien vers la squence ou incorporez-la dans votre page. Pour tablir un lien vers la squence, entrez un texte pour le lien (par exemple, Tlchargez la vido ), slectionnez le texte et cliquez sur l'icne de dossier dans l'inspecteur de slections. Recherchez le fichier vido et slectionnez-le. Remarque : L'utilisateur doit tlcharger une application d'aide (un plug-in) pour visualiser les formats lus en transit, comme Real Media, QuickTime et Windows Media.
Insertion du contenu d'un plug-in
Haut de la page
Vous pouvez crer du contenu, par exemple une squence vido QuickTime pour un plug-in de navigateur, puis utiliser Dreamweaver pour insrer ce contenu dans un document HTML. Par exemple, RealPlayer et QuickTime sont des plug-ins par dfaut, alors que les fichiers MP3 et les animations QuickTime sont des fichiers de contenu. Vous pouvez afficher un aperu des animations qui font directement appel aux plug-ins de navigateur dans le mode Cration dans la fentre de document. Vous pouvez lire simultanment tous les lments des plug-ins pour savoir comment la page s'affichera sur le poste de l'utilisateur ou lire chaque lment individuellement pour vous assurer que vous avez incorpor le bon lment multimdia. Remarque : Il n'est pas possible d'afficher un aperu des films ou animations bases sur des contrles ActiveX. Aprs avoir insr le contenu d'un plug-in , utilisez l'inspecteur Proprits pour en dfinir les paramtres. Pour afficher les proprits suivantes dans l'inspecteur Proprits, slectionnez un objet plug-in Lors de son ouverture, l'inspecteur Proprits affiche les proprits les plus couramment utilises. Cliquez sur la flche d'agrandissement, dans le coin infrieur droit, pour afficher toutes les proprits.
Insertion du contenu d'un plug-in et dfinition de ses proprits

1. Dans la fentre de document (mode Cration), placez le point d'insertion l'endroit o vous souhaitez insrer le contenu, puis procdez de l'une des manires suivantes : Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Mdias puis slectionnez l'icne Plug-in Slectionnez Insertion > Mdias > Plug-in. 2. Dans la bote de dialogue qui s'affiche, slectionnez un fichier de contenu pour un plug-in , puis cliquez sur OK. 3. Dfinissez les options du plug-in dans l'inspecteur Proprits. Nom Spcifie un nom permettant d'identifier le plug-in dans un script. Tapez un nom dans la zone de texte sans titre, l'extrme gauche de l'inspecteur Proprits. dans le menu.
321
L et H Spcifient, en pixels, la largeur et la hauteur alloues l'objet sur la page. Src Spcifie le fichier des donnes source. Cliquez sur l'icne de dossier pour rechercher un fichier ou entrez un nom de fichier. URL du plug-in Spcifie l'URL pour l'attribut pluginspace. Indiquez l'URL complte du site partir duquel les utilisateurs peuvent tlcharger le plug-in. Si l'utilisateur qui consulte votre page ne possde pas le plug-in ncessaire, le navigateur essaie de le tlcharger partir de cette URL. Alignement Dtermine l'alignement de l'objet sur la page. Espace V. et Espace H. Spcifient la quantit d'espace blanc, en pixels, au-dessus, au-dessous et de chaque ct du plug-in. Bordure Spcifie la largeur de la bordure autour du plug-in. Paramtres Ouvre une bote de dialogue permettant d'indiquer des paramtres supplmentaires transmettre au plug-in Nombreux sont les plug-ins qui rpondent des paramtres particuliers. Vous pouvez galement afficher les attributs affects au plug-in slectionn en cliquant sur le bouton Attribut. Vous pouvez modifier, ajouter ou supprimer des attributs tels que la hauteur et la largeur dans cette bote de dialogue.
Lecture de contenu d'un plug-in dans la fentre de document

1. Insrez un ou plusieurs lments multimdias l'aide d'une des mthodes dcrites dans la section prcdente. 2. Effectuez l'une des oprations suivantes : Slectionnez un des lments multimdia que vous avez insrs, puis choisissez la commande Affichage > Plug-ins > Lire ou cliquez sur le bouton de lecture de l'inspecteur Proprits. Choisissez la commande Affichage > Plug-ins > Lire tout pour lire tous les lments multimdia de la page slectionne qui font appel des plug-ins. Remarque : L'option Lire tout s'applique uniquement au document actif. Elle ne s'applique pas aux autres documents dans un ensemble de cadres par exemple.
Arrt de la lecture du contenu d'un plug-in

Slectionnez un lment multimdia, puis choisissez la commande Affichage > Plug-ins > Arrter ou cliquez sur le bouton d'arrt dans l'inspecteur Proprits. Vous pouvez galement slectionner Affichage > Plug-ins > Arrter tout pour interrompre la lecture de tous les contenus des plug-ins.
Dpannage des plug-ins de
Haut de la page
Vous avez suivi les tapes permettant de lire le contenu d'un plug-in dans la fentre de document, mais constatez qu'une partie ne fonctionne pas. Essayez l'opration suivante : Vrifiez que le plug-in associ est bien install sur votre ordinateur et que sa version est compatible avec le contenu charg. Ouvrez le fichier Configuration/Plugins/UnsupportedPlugins.txt dans un diteur de texte et vrifiez si le plug-in posant problme est rpertori. Ce fichier conserve la trace des plug-ins tant la source de problmes dans Dreamweaver et qui ne sont donc pas pris en charge. Si vous constatez des problmes avec un plug-in particulier, il est souhaitable de l'ajouter ce fichier. Vrifiez que vous avez suffisamment de mmoire. Certains plug-ins ncessitent de 2 5 Mo de mmoire supplmentaire pour fonctionner.
Insertion d'un contrle ActiveX
Haut de la page
Vous pouvez ajouter un contrle ActiveX votre page. Les contrles ActiveX (autrefois appels commandes OLE) sont des composants rutilisables, un peu comme des applications miniatures, qui peuvent fonctionner comme des plug-ins de navigateurs. Ils fonctionnent dans Internet Explorer sous Windows, mais pas dans les navigateurs Macintosh. L'objet ActiveX de Dreamweaver vous permet de fournir les attributs et paramtres d'un contrle ActiveX charg par le navigateur du visiteur. Une fois un objet ActiveX insr, utilisez l'inspecteur Proprits pour dfinir les attributs de la balise object et les paramtres du contrle ActiveX. Cliquez sur Paramtres dans l'inspecteur Proprits pour indiquer des noms et des valeurs de proprits qui n'apparaissent pas dans l'inspecteur Proprits. Il n'existe pas de format standard unanimement accept pour les paramtres des contrles ActiveX. Consultez la documentation sur le contrle ActiveX que vous utilisez pour savoir quels paramtres choisir. Dans la fentre de document, positionnez le curseur l'emplacement o insrer le contenu et procdez de l'une des manires suivantes : Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Mdias puis slectionnez l'icne ActiveX .
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Mdias puis slectionnez l'icne ActiveX. Lorsque l'icne ActiveX s'affiche dans le panneau Insertion, vous pouvez la faire glisser jusqu' la fentre du document. Choisissez Insertion > Mdias > ActiveX. Une icne indique l'emplacement de la page o apparatra le contrle ActiveX dans Internet Explorer.
322
Proprits d'ActiveX
Lors de son ouverture, l'inspecteur Proprits affiche les proprits les plus couramment utilises. Cliquez sur la flche d'agrandissement, dans le coin infrieur droit, pour afficher toutes les proprits. Nom Spcifie un nom qui permet d'identifier l'objet ActiveX pour les scripts. Tapez un nom dans la zone de texte sans titre, l'extrme gauche de l'inspecteur Proprits. L et H Spcifient la largeur et la hauteur de l'objet, en pixels. ID de classe Identifie le contrle ActiveX pour le navigateur. Tapez la valeur ou choisissez-en une dans le menu contextuel. Lorsque la page est charge, le navigateur utilise l'ID de classe pour localiser le contrle ActiveX requis par l'objet ActiveX associ la page. Si le navigateur ne peut pas localiser le contrle ActiveX spcifi, il essaie de le tlcharger partir de l'emplacement spcifi dans le champ Base. Incorporer Ajoute une balise embed dans la balise object pour le contrle ActiveX. S'il existe un plug-in quivalent au contrle ActiveX, la balise embed active ce plug-in. Dreamweaver affecte les valeurs que vous avez saisies comme proprits d'objets ActiveX aux plug-ins quivalents de Alignement Dtermine l'alignement de l'objet sur la page. Paramtres Ouvre une bote de dialogue dans laquelle vous pouvez indiquer des paramtres supplmentaires transmettre l'objet ActiveX. Nombreux sont les contrles ActiveX qui possdent des paramtres particuliers. Src Dfinit le fichier de donnes utiliser pour un plug-in , si l'option Incorporer est active. Si vous n'entrez pas de valeur, Dreamweaver essaie d'en dterminer une partir des proprits d'ActiveX entres prcdemment. Espace V. et Espace H. Spcifient la quantit d'espace blanc, en pixels, au-dessus, au-dessous et de chaque ct de l'objet. Base Spcifie l'URL qui contient le contrle ActiveX. Internet Explorer tlcharge le contrle ActiveX partir de cet emplacement s'il n'a pas t install sur le systme du visiteur. Si vous ne prcisez pas le paramtre Base et que le contrle ActiveX ncessaire n'est pas dj install sur l'ordinateur du visiteur, son navigateur ne pourra pas afficher l'objet ActiveX. Img sec. Spcifie une image afficher si le navigateur ne prend pas en charge la balise object. Cette option n'est disponible que si l'option Incorporer est dslectionne. Donnes Spcifie un fichier de donnes que le contrle ActiveX doit charger. De nombreux contrles ActiveX, tels que Shockwave et RealPlayer, n'utilisent pas ce paramtre.
Haut de la page
Insertion d'une applet Java
Vous pouvez insrer une applet Java dans un document HTML l'aide de Dreamweaver. Java est un langage de programmation qui permet de dvelopper des applications lgres (applets) pouvant tre incorpores dans des pages Web. Une fois une applet Java insre, utilisez l'inspecteur Proprits pour dfinir les paramtres. Slectionnez une applet Java pour afficher ses proprits dans l'inspecteur Proprits. 1. Dans la fentre de document, placez le point d'insertion l'endroit o vous souhaitez insrer l'applet, puis procdez de l'une des manires suivantes : Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Mdias puis slectionnez l'icne Applet Choisissez Insertion > Mdias > Applet. 2. Slectionnez un fichier contenant une applet Java. .
Proprits des applets Java

Lors de son ouverture, l'inspecteur Proprits affiche les proprits les plus couramment utilises. Cliquez sur la flche d'agrandissement, dans le coin infrieur droit, pour afficher toutes les proprits. Nom Spcifie un nom permettant d'identifier l'applet dans un script. Tapez un nom dans la zone de texte sans titre, l'extrme gauche de l'inspecteur Proprits. L et H Spcifient la largeur et la hauteur de l'applet, en pixels. Code Spcifie le fichier contenant le code Java de l'applet. Cliquez sur l'icne de dossier pour rechercher un fichier ou entrez un nom de fichier. Base Identifie le dossier contenant l'applet slectionne. Lorsque vous choisissez une applet, cette zone de texte est renseigne automatiquement. Alignement Dtermine l'alignement de l'objet sur la page. Sec Spcifie un contenu de remplacement (gnralement une image) afficher si le navigateur de l'utilisateur ne prend pas en charge les applets Java ou si Java y est dsactiv. Si vous tapez du texte, Dreamweaver insre le texte comme tant la valeur de l'attribut alt de l'applet. Si vous slectionnez une image, Dreamweaver insre une balise img entre les balises applet d'ouverture et de fermeture. Espace V. et Espace H. Spcifient la quantit d'espace blanc, en pixels, au-dessus, au-dessous et de chaque ct de l'applet. Paramtres Ouvre une bote de dialogue dans laquelle vous pouvez indiquer des paramtres supplmentaires transmettre l'applet. Nombreuses sont les applets qui rpondent des paramtres particuliers.
Haut de la page
Utilisation de comportements pour contrler les objets multimdias

Vous pouvez ajouter des comportements votre page pour commencer ou arrter la lecture de divers objets multimdia.
323
Contrler Shockwave ou Flash Permet de lire, d'arrter, de rembobiner ou d'atteindre un cadre dans une animation Shockwave ou un fichier SWF Lire le son Permet de jouer un son. Vous pouvez ainsi jouer un effet sonore ds que l'utilisateur survole un lien l'aide de la souris. Vrifier le Plug-in Permet de vrifier si les visiteurs de votre site disposent du plug-in requis, puis de les diriger vers diffrentes URL, en fonction du rsultat. Cela s'applique uniquement aux plug-ins de , car ce comportement ne vrifie pas les contrles ActiveX.
Haut de la page
Utilisation de paramtres pour contrler des objets multimdia
Dfinissez les paramtres spciaux pour contrler les fichiers Shockwave et SWF, les contrles ActiveX, les plug-ins et les applets Java. Les paramtres sont utiliss avec les balises object, embed et applet. Les paramtres dfinissent des attributs spcifiques aux diffrents types d'objets. Par exemple, un fichier SWF peut disposer du paramtre qualit <paramname="quality"value="best"> pour la balise object. La bote de dialogue Paramtre est disponible partir de l'inspecteur Proprits. Consultez la documentation sur l'objet que vous utilisez pour connatre les paramtres requis. Remarque : Il n'existe pas de standard unanimement accept pour l'identification des fichiers de donnes des contrles ActiveX. Consultez la documentation sur le contrle ActiveX que vous utilisez pour savoir quels paramtres choisir.
Saisie du nom et de la valeur d'un paramtre

1. Slectionnez un objet pouvant tre associ des paramtres (par exemple, une animation Shockwave, un contrle ActiveX, un plug-in ou une applet Java) dans la fentre de document. 2. Ouvrez la bote de dialogue en procdant de l'une des manires suivantes : Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur l'objet et cliquez sur Paramtres dans le menu contextuel. Ouvrez l'inspecteur Proprits s'il n'est pas dj ouvert, puis cliquez sur le bouton Paramtres situ dans la section infrieure de l'inspecteur Proprits. Assurez-vous que l'inspecteur Proprits est dvelopp. 3. Cliquez sur le bouton Plug (+) et entrez le nom et la valeur du paramtre dans les colonnes appropries.
Suppression d'un paramtre

Slectionnez un paramtre et cliquez sur le bouton Moins (-).
Rorganisation de paramtres
Slectionnez un paramtre et utilisez les boutons flchs vers le haut ou vers le bas. Voir aussi
324
Ajout de vido
Incorporation de vidos aux pages Web (HTML5) Insertion de fichiers FLV
Incorporation de vidos aux pages Web (HTML5)
Haut de la page
HTML5 prend en charge les balises audio et vido, permettant aux utilisateurs de lire des fichier audio et vido dans un navigateur sans complment ni lecteur externe. Dreamweaver prend en charge les conseils de code permettant l'ajout de balises vido et audio. Le mode En direct affiche la vido, de faon prvisualiser la vido que vous incorporez la page Web. Remarque : Bien que vous puissiez incorporer toute vido votre page Web, le mode En direct ne les affiche pas toujours toutes. Les balises audio et vido sont prises en charge par Dreamweaver au moyen du module QuickTime d'Apple. Sous Windows, si le module QuickTime d'Apple n'est pas install, la page Web n'affichera pas le contenu multimdia.
Haut de la page
Insertion de fichiers FLV

Insertion de fichiers FLV
Vous pouvez insrer facilement des vidos FLV dans vos pages Web sans avoir recours l'outil de cration Flash. Vous devez disposer d'un fichier FLV cod avant de commencer. Dreamweaver insre un composant SWF qui affiche le fichier FLV. Dans un navigateur, ce composant affiche le fichier FLV slectionn, ainsi qu'un jeu de contrles de lecture.
Dreamweaver dispose des options suivantes pour proposer de la vido FLV aux visiteurs de votre site : Vido en tlchargement progressif Tlcharge le fichier FLV sur le disque dur du visiteur, puis lance sa lecture. Contrairement aux mthodes traditionnelles de fourniture de vido par tlchargement et lecture , le tlchargement progressif permet de lancer la lecture du fichier vido avant la fin de son tlchargement. Vido en flux continu Diffuse en continu le contenu vido et le lit sur une page Web aprs une courte priode de mise en mmoire tampon, ce qui assure une lecture homogne. Pour activer la diffusion vido en continu sur vos pages Web, vous devez avoir accs Adobe Flash Media Server. Vous devez disposer d'un fichier FLV cod avant d'utiliser ce dernier dans Dreamweaver. Vous pouvez insrer les fichiers vido crs avec deux types de codecs (technologies de compression/dcompression) : Sorenson Squeeze et On2. Lorsque vous insrez un fichier FLV, tout comme dans le cas d'un fichier SDF ordinaire, Dreamweaver insre du code qui dtecte si l'utilisateur dispose d'une version approprie de Flash Player pour voir la vido. Si ce n'est pas le cas, la page affiche un contenu alternatif qui invite l'utilisateur tlcharger la version la plus rcente de Flash Player. Remarque : Pour pouvoir visualiser un fichier FLV, Flash Player en version 8 ou ultrieure doit tre install sur l'ordinateur de l'utilisateur. Si l'utilisateur ne dispose pas de la version requise de Flash Player, mais bien de Flash Player en version 6.0 r65 ou une version ultrieure, le
325
navigateur affiche un programme d'installation express de Flash Player au lieu du contenu alternatif. Si l'utilisateur refuse l'installation express, la page affiche le contenu alternatif. Pour plus d'informations sur l'utilisation de vido, consultez le Centre de technologie vido l'adresse www.adobe.com/go/flv_devcenter_fr. Insertion d'un fichier FLV 1. Choisissez Insertion > Mdias > FLV. 2. Dans la bote de dialogue Insrer un fichier FLV, choisissez Vido en tlchargement progressif dans le menu Type de vido. 3. Renseignez les autres sections de la bote de dialogue selon les besoins puis cliquez sur OK. Remarque : Microsoft Internet Information Server (IIS) ne traite pas les balises object imbriques. Pour les pages ASP, Dreamweaver utilise du code object/embed imbriqu au lieu du code object imbriqu lors de l'insertion de fichiers SWF ou FLV. Dfinition des options pour la vido en tlchargement progressif La bote de dialogue Insrer FLV permet de dfinir des options pour la remise par tlchargement progressif d'un fichier FLV insr dans une page Web. 1. Choisissez Insertion > Mdias > FLV (ou cliquez sur l'icne FLV de la catgorie Mdias de la barre d'insertion Commun). 2. Dans la bote de dialogue Insrer FLV, choisissez Vido tlchargement progressif dans le menu Type de vido. 3. Dfinissez les options suivantes : URL Spcifie le chemin absolu ou relatif du fichier FLV. Pour spcifier un chemin relatif (par exemple, monchemin/mavideo.flv), cliquez sur le bouton Parcourir, accdez au fichier FLV et slectionnez-le. Pour spcifier un chemin absolu, tapez l'URL (par exemple, http://www.exemple.com/mavideo.flv) du fichier FLV. Enveloppe Dfinit l'aspect du composant vido. Un aperu de l'enveloppe slectionne apparat sous le menu contextuel Enveloppe. Largeur Indique la largeur (en pixels) du fichier FLV. Cliquez sur le bouton Dtecter la taille pour connatre la largeur exacte du fichier FLV. Si Dreamweaver ne peut pas dterminer la largeur, tapez une valeur. Hauteur Indique la hauteur (en pixels) du fichier FLV. Cliquez sur le bouton Dtecter la taille pour connatre la hauteur exacte du fichier FLV. Si Dreamweaver ne peut pas dterminer la hauteur, tapez une valeur. Remarque : Total avec enveloppe indique la largeur et la hauteur du fichier FLV plus la largeur et la hauteur de l'enveloppe slectionne. Respecter les proportions Prserve le rapport hauteur/largeur du composant vido. Cette option est slectionne par dfaut. Lecture automatique Indique si la lecture de la vido doit dmarrer ou non ds l'ouverture de la page Web. Rembobinage automatique Dtermine si le contrle de lecture doit revenir en position de dpart au terme de la lecture de la vido. 4. Cliquez sur OK pour fermer la bote de dialogue et ajouter le contenu FLV votre page Web. La commande Insrer FLV gnre un fichier SWF de lecteur vido et un fichier SWF d'habillage qui serviront afficher votre contenu vido sur une page Web. (Il est parfois ncessaire de cliquer sur le bouton Actualiser pour afficher les nouveaux fichiers dans le panneau Fichiers). Ces fichiers sont stocks dans le mme rpertoire que le fichier HTML auquel vous ajoutez du contenu vido. Lorsque vous chargez la page HTML incluant le fichier FLV, Dreamweaver ces fichiers en tant que fichiers dpendants ( condition de cliquer sur Oui dans la bote de dialogue Placer les fichiers dpendants). Dfinition des options pour la vido en flux continu La bote de dialogue Insrer FLV permet de dfinir des options pour le tlchargement de vido en flux contenu d'un fichier FLV insr dans une page Web. 1. Choisissez Insertion > Mdias > FLV (ou cliquez sur l'icne FLV de la catgorie Mdias de la barre d'insertion Commun). 2. Activez l'option Vido en flux continu dans le menu contextuel Type de vido. URI du serveur Indique le nom du serveur FCS, le nom de l'application et le nom de l'instance dans le formulaire rtmp://www.example.com/app_name/instance_name. Nom du flux Spcifie le nom du fichier FLV lire (par exemple, mavideo.flv). L'extension .flv est facultative. Enveloppe Dfinit l'aspect du composant vido. Un aperu de l'enveloppe slectionne apparat sous le menu contextuel Enveloppe. Largeur Indique la largeur (en pixels) du fichier FLV. Cliquez sur le bouton Dtecter la taille pour connatre la largeur exacte du fichier FLV. Si Dreamweaver ne peut pas dterminer la largeur, tapez une valeur. Hauteur Indique la hauteur (en pixels) du fichier FLV. Cliquez sur le bouton Dtecter la taille pour connatre la hauteur exacte du fichier FLV. Si Dreamweaver ne peut pas dterminer la hauteur, tapez une valeur. Remarque : Total avec enveloppe indique la largeur et la hauteur du fichier FLV plus la largeur et la hauteur de l'enveloppe slectionne. Respecter les proportions Prserve le rapport hauteur/largeur du composant vido. Cette option est slectionne par dfaut. Vido en temps rel Indique si le contenu vido est en temps rel ou non. Si vous slectionnez Vido en temps rel, Flash Player diffuse en continu un flux vido provenant de Flash Media Server. Le nom de la vido en temps rel est le nom indiqu dans la zone Nom du flux. Remarque : Si vous activez l'option Vido en temps rel, seul le contrle de volume apparat sur l'enveloppe du composant, car il est impossible d'intervenir sur de la vido en temps rel. De plus, les options Lecture automatique et Rembobinage automatique sont sans effet.
326
Lecture automatique Indique si la lecture de la vido doit dmarrer ou non ds l'ouverture de la page Web. Rembobinage automatique Dtermine si le contrle de lecture doit revenir en position de dpart au terme de la lecture de la vido. Dlai mise en tampon Indique le dlai (en secondes) de mise en tampon avant le dbut de la lecture de la vido. Par dfaut, la mise en tampon est paramtre sur 0, si bien que la lecture de la vido dbute instantanment aprs un clic sur le bouton de lecture. (Si l'option Lecture automatique est active, la lecture de la vido dbute ds que la connexion avec le serveur est tablie.) Il peut galement tre ncessaire de dfinir un dlai de mise en mmoire tampon si vous fournissez une vido dont le dbit en bits est suprieur celui de la connexion du visiteur du site ou lorsque le volume de trafic Internet risque d'engendrer des problmes de bande passante ou de connectivit. Par exemple, si vous souhaitez envoyer 15 secondes de vido la page Web avant que cette dernire ne lise la vido, dfinissez le dlai de mise en mmoire tampon sur 15. 3. Cliquez sur OK pour fermer la bote de dialogue et ajouter le contenu FLV votre page Web. La commande Insrer FLV gnre un fichier SWF de lecteur vido et un fichier SWF d'habillage qui serviront afficher votre vido sur une page Web. La commande gnre galement un fichier main.asc que vous devez transfrer sur votre serveur Flash Media Server. (Il est parfois ncessaire de cliquer sur le bouton Actualiser pour afficher les nouveaux fichiers dans le panneau Fichiers). Ces fichiers sont stocks dans le mme rpertoire que le fichier HTML auquel vous ajoutez du contenu vido. Lorsque vous transfrez sur votre serveur la page HTML contenant le fichier FLV, n'oubliez pas de transfrer galement ces fichiers SWF, et de transfrer le fichier main.asc sur votre serveur Flash Media Server. Remarque : Si un fichier main.asc se trouve dj sur votre serveur, consultez l'administrateur de ce serveur avant de transfrer le fichier main.asc gnr par la commande Insrer FLV. Vous pouvez charger facilement tous les fichiers mdias requis en slectionnant l'espace rserv pour le composant vido dans la fentre Document de Dreamweaver puis en cliquant sur le bouton Transfrer multimdia dans l'inspecteur Proprits (Fentre > Proprits). Pour voir la liste des fichiers ncessaires, cliquez sur le bouton Afficher les fichiers ncessaires. Remarque : Le bouton Transfrer multimdia ne transfre pas le fichier HTML qui contient le composant vido. Modification des informations de tlchargement de Flash Player Lorsque vous insrez un fichier FLV sur une page, Dreamweaver insre du code qui dtecte si l'utilisateur dispose de la version approprie de Flash Player. Si ce n'est pas le cas, la page affiche du contenu alternatif afin d'inviter l'utilisateur tlcharger la version la plus rcente. Vous pouvez tout moment modifier ce contenu alternatif. Cette procdure s'applique galement aux fichiers SWF. Remarque : Si l'utilisateur ne dispose pas de la version requise mais bien de Flash Player en version 6.0 r65 ou une version ultrieure, le navigateur affiche un programme d'installation express de Flash Player. Si l'utilisateur refuse l'installation express, la page affiche le contenu alternatif. 1. Dans la fentre de document, en mode Cration, slectionnez le fichier SWF ou FLV. 2. Cliquez sur l'icne reprsentant un il dans l'onglet du fichier SWF ou FLV. Vous pouvez galement utiliser le raccourci CTRL + ] pour activer l'affichage du contenu alternatif. Pour rtablir l'affichage du fichier SWF/FLV, appuyez sur CTRL + [ jusqu' ce que l'intgralit du contenu alternatif soit slectionne. Ensuite, appuyez nouveau sur CTRL + [. 3. Modifiez le contenu comme vous le feriez pour tout autre contenu dans Dreamweaver. Remarque : Il est impossible d'ajouter des fichiers SWF ou FLV en tant que contenu alternatif. 4. Cliquez nouveau sur l'icne reprsentant un il pour revenir l'affichage du fichier SWF ou FLV. Dpannage des fichiers FLV Cette section dcrit quelques-unes des causes les plus courantes de problmes avec les fichiers FLV. Affichage des problmes dus l'absence de fichiers associs Le code gnr par Dreamweaver CS4 et versions ultrieures repose sur quatre fichiers dpendants, diffrents du fichier FLV proprement dit : swfobject_modified.js expressInstall.swf FLVPlayer_Progressive.swf Le fichier d'enveloppe (par exemple Clear_Skin_1.swf) Notez qu'il existe deux fichiers dpendants supplmentaires pour Dreamweaver CS4 et versions ultrieures par rapport Dreamweaver CS3. Les deux premiers fichiers (swfobject_modified.js et expressInstall.swf) sont installs dans un dossier baptis Scripts, que Dreamweaver cre la racine de votre site s'il n'existe pas. Les deux autres fichiers (FLVPlayer_Progressive.swf et le fichier d'enveloppe) sont installs dans le mme dossier que la page laquelle le fichier FLV est incorpor. Le fichier d'enveloppe contient les contrles du fichier FLV. Son nom dpend de l'enveloppe choisie dans les options dcrites dans l'aide de Dreamweaver. Par exemple, si vous choisissez Clear Skin, le fichier se nomme Clear_Skin_1.swf. Les quatre fichiers dpendants DOIVENT tre tlchargs sur votre serveur distant pour que le fichier FLV s'affiche correctement.
327
L'oubli du tlchargement de ces fichiers est la cause la plus courante des erreurs d'excution de fichiers FLV sur une page Web. Si l'un des fichiers manque, un carr blanc risque de s'afficher sur la page. Pour garantir que vous avez bien tlcharg tous les fichiers dpendants, utilisez le panneau Fichiers de Dreamweaver pour tlcharger la page o figure le fichier FLV. Lorsque vous tlchargez la page, Dreamweaver vous demande si vous voulez tlcharger les fichiers dpendants (sauf si vous avez dsactiv cette option). Cliquez sur Oui pour tlcharger les fichiers dpendants. Problmes d'affichage lors d'un aperu local des pages Les mises jour de la scurit de Dreamweaver CS4 vous empchent d'utiliser la commande Aperu dans le navigateur pour tester une page comportant un fichier FLV incorpor, sauf si vous dfinissez un serveur d'valuation local dans votre dfinition de site Dreamweaver et employez ce serveur d'valuation pour prvisualiser la page. Normalement, vous n'avez besoin d'un serveur d'valuation que si vous dveloppez des pages avec ASP, ColdFusion ou PHP (voir Configuration de l'ordinateur pour le dveloppement d'applications). Si vous crez des sites Web qui n'emploient que HTML et que vous n'avez pas dfini de serveur d'valuation, une pression sur F12 (Windows) ou Option+F12 (Macintosh) entrane l'affichage de contrles d'enveloppe incohrents. Pour rsoudre le problme, dfinissez le serveur d'valuation et utilisez-le pour prvisualiser votre page, ou chargez vos fichiers sur un serveur distant et visualisez-les sur celui-ci. Remarque : Il se peut que les paramtres de scurit soient galement responsables de l'impossibilit de prvisualiser du contenu FLV local, mais Adobe n'a pas t en mesure de le confirmer. Vous pouvez tenter de modifier vos paramtres de scurit afin de voir si le problme est rsolu. Pour plus d'informations sur la modification de vos paramtres de scurit, consultez la Tech Note 117502. Autres causes potentielles de problmes avec les fichiers FLV Si vous prouvez des difficults prvisualiser localement, assurez-vous que l'option Aperu avec fichier temporaire est bien dsactive dans la section Edition > Prfrences > Aperu dans le navigateur. Assurez-vous de bien disposer de la version la plus rcente du complment Flash Player. Faites preuve de prudence lorsque vous dplacez des fichiers et des dossiers l'extrieur de Dreamweaver. Lorsque vous dplacez des fichiers et dossiers l'extrieur de Dreamweaver, Dreamweaver ne peut pas garantir l'exactitude des chemins d'accs aux fichiers associs un fichier FLV. Vous pouvez remplacer provisoirement le fichier FLV qui pose problme par un fichier FLV dont vous tes sr qu'il fonctionne. Si le fichier FLV de remplacement fonctionne, c'est que le problme rside dans le fichier FLV d'origine et n'est pas d votre navigateur ni l'ordinateur.
Modification ou suppression d'un composant FLV

Vous pouvez modifier les paramtres de la vido sur votre page Web en slectionnant l'espace rserv pour composant vido dans la fentre de document de Dreamweaver et en utilisant l'inspecteur Proprits. Vous pouvez galement supprimer le composant vido puis le rinsrer l'aide de la commande Insertion > Mdias > FLV. Modification du composant FLV 1. Dans la fentre du document Dreamweaver, slectionnez l'espace rserv pour le composant vido en cliquant sur l'icne FLV au centre de l'espace rserv. 2. Ouvrez l'inspecteur Proprits (Fentre > Proprits) et apportez les modifications dsires. Remarque : Il est impossible de modifier le type de vido (de tlchargement progressif diffusion en continu, par exemple) dans l'inspecteur Proprits. Pour modifier le type de vido, supprimez le composant FLV puis rinsrez-le en choisissant Insertion > Mdias > FLV. Suppression du composant FLV Dans la fentre du document Dreamweaver, slectionnez l'espace rserv pour le composant FLV et appuyez sur la touche Suppr. Suppression du code de dtection FLV A partir de la version CS4 de Dreamweaver, Dreamweaver insre directement un code de dtection de Flash Player dans la balise object qui contient le fichier FLV. Par contre, jusqu' la version CS3 de Dreamweaver, le code de dtection se trouve en dehors de la balise object du fichier FLV. Ds lors, si vous voulez supprimer des fichiers FLV de pages cres l'aide de Dreamweaver CS3 ou une version plus ancienne, vous devez supprimer les fichiers FLV puis utiliser la commande Supprimer la dtection FLV afin de supprimer galement le code de dtection. Slectionnez Commandes > Supprimer la dtection Flash Video.
328
Ajout de widgets Web

Un widget Web est un composant de page Web consistant en code HTML, CSS et JavaScript. Un widget Web peut par exemple tre un accordon, un panneau onglet ou un calendrier. Vous pouvez rendre votre slection personnelle de widgets Web disponible dans Dreamweaver l'aide du navigateur de widgets Adobe, une application AIR qui permet de naviguer dans les widgets, de les configurer et de les prvisualiser au moyen d'une interface visuelle. 1. Choisissez Insrer > Widget. 2. Dans la bote de dialogue Widget , slectionnez un widget et un paramtre prdfini (le cas chant), puis cliquez sur OK. Vous pouvez galement ajouter un widget Web une page Dreamweaver (CS5.5 et versions ultrieures) en procdant comme suit : 1. Dans le Widget Browser, accdez Mes widgets. 2. Slectionnez le widget que vous voulez ajouter. 3. Cliquez sur l'icne Glisser-dposer dans Dreamweaver, dans le coin suprieur gauche de l'onglet Mode En direct, et maintenez le bouton de la souris enfonc. Faites glisser le widget vers Dreamweaver, dans le mode Cration (Windows) ou le mode Cration ou Code (Macintosh OS). Vous ne pouvez pas faire glisser le widget dans le mode Affichage en direct, mais vous pouvez utiliser ce mode pour tester le widget aprs l'avoir dpos sur la page. Voir aussi Aide d'Adobe Widget Browser
329
Automatisation des tches

Automatisation des tches Utilisation du panneau Historique Rptition d'tapes Application d'tapes du panneau Historique des objets Copie et collage d'tapes entre les documents Cration et utilisation de commandes partir d'tapes de l'historique Enregistrement et sauvegarde de commandes
Automatisation des tches
Haut de la page
Le panneau Historique mmorise les tapes que vous effectuez lors de l'excution d'une tche. Vous pouvez automatiser une tche effectue frquemment en reproduisant les tapes correspondantes partir du panneau Historique ou en crant une nouvelle commande qui effectue les tapes automatiquement. Certains mouvements de la souris, tels qu'une slection via un clic dans la fentre de document, ne peuvent pas tre reproduits ou sauvegards. Lorsque vous effectuez ce type de mouvements, un trait noir s'affiche dans le panneau Historique (la prsence de cette ligne ne devient vidente que lorsque vous effectuez une autre action). Pour viter cela, dplacez le point d'insertion l'aide des touches flches, et non de la souris, dans la fentre de document. Il existe quelques autres actions qui ne peuvent pas tre reproduites, par exemple le glisser-dplacer d'un lment de la page. Lorsque vous effectuez ce type d'action, une icne contenant un petit X rouge s'affiche dans le panneau Historique. Les commandes sauvegardes sont conserves en permanence ( moins que vous ne les supprimiez), tandis que les commandes enregistres sont supprimes lorsque vous quittez Adobe Dreamweaver et les squences d'tapes copies sont supprimes lorsque vous copiez un autre lment
Utilisation du panneau Historique
Haut de la page
Le panneau Historique (Fentre > Historique) affiche une liste des tapes que vous avez effectues dans le document actif depuis que vous l'avez cr ou ouvert (mais pas les tapes effectues dans d'autres cadres, d'autres fentres de document ou dans le panneau Site). Utilisez le panneau Historique pour annuler plusieurs tapes en mme temps et pour automatiser des tches.
A. Curseur (index) B. Etapes C. Bouton Reproduire D. Bouton Copier les tapes E. Bouton Enregistrer comme commande Lors de l'ouverture du panneau Historique, le curseur, ou index, pointe sur la dernire action que vous avez accomplie. Remarque : Il est impossible de modifier l'ordre dans lequel les tapes sont affiches 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 dj effectues.
Annulation de la dernire tape

Effectuez l'une des oprations suivantes : Choisissez Edition > Annuler. Dplacez le curseur du panneau Historique d'une tape vers le haut dans la liste. Remarque : Pour provoquer un dplacement automatique vers une tape spcifique, cliquez gauche de cette tape ; si vous cliquez sur l'tape elle-mme, elle sera slectionne. La slection d'une tape est une opration diffrente du retour cette tape dans l'historique des actions.
330
Annulation de plusieurs tapes la fois

Faites glisser le curseur de faon pointer sur une tape de la liste, ou cliquez gauche d'une tape le long de la trajectoire du curseur. Le curseur se dirige automatiquement vers cette tape en annulant toutes les tapes se trouvant sur son passage. Remarque : Tout comme pour l'annulation d'une seule action, si vous annulez une srie d'tapes, puis effectuez une autre opration dans le document, il ne vous sera plus possible de rtablir les actions annules : elles disparaissent du panneau Historique.
Dfinition du nombre maximal d'tapes que le panneau Historique conserve et affiche

Le nombre d'tapes par dfaut est suffisant pour la plupart des utilisateurs. Plus ce nombre est lev, plus le panneau Historique ncessite de la mmoire, ce qui peut affecter les performances et ralentir considrablement votre ordinateur. 1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2. Slectionnez la catgorie Gnral dans la liste de gauche. 3. Tapez un chiffre dans la zone Nombre maximal d'tapes de l'historique. Lorsque le panneau Historique atteint le nombre maximal d'tapes, les premires tapes sont supprimes.
Effacement de la liste des actions du panneau Historique pour le document actif

Dans le menu contextuel du panneau Historique, slectionnez Effacer l'historique. Cette commande efface galement toutes les informations permettant d'annuler les actions effectues dans le document actif : aprs avoir cliqu sur Effacer l'historique, il vous est impossible d'annuler les actions dont la trace a t efface. La fonction Effacer l'historique n'annule aucune action passe, mais se limite supprimer la trace de ces tapes de la mmoire.
Rptition d'tapes
Haut de la page
Vous pouvez rpter la dernire tape effectue ou bien une srie d'tapes contigus ou non l'aide du panneau Historique. Reproduisez les tapes directement depuis le panneau Historique.
Rptition d'une tape

Effectuez l'une des oprations suivantes : Choisissez Edition > Rpter. Dans le panneau Historique, slectionnez une tape et cliquez sur le bouton Reproduire. L'tape est reproduite et une nouvelle instance de cette action apparat dans le panneau Historique.
Rptition d'une srie d'tapes

1. Slectionnez les tapes dsires dans le panneau Historique : Pour slectionner des tapes adjacentes, faites glisser la souris d'une tape une autre (ne faites pas glisser le curseur ; faites simplement glisser la souris de l'tiquette de texte d'une tape vers l'tiquette de texte d'une autre), ou slectionnez la premire tape et, tout en maintenant la touche Maj enfonce, cliquez sur la dernire tape. Pour slectionner des tapes non adjacentes, slectionnez une tape, puis tout en maintenant appuye la touche Ctrl (Windows) ou Commande (Macintosh), cliquez sur d'autres tapes de faon les slectionner (ou les dslectionner le cas chant). Seules les actions slectionnes (en surbrillance), et pas ncessairement celle sur laquelle se trouve le curseur, sont rptes. Remarque : Bien que vous puissiez slectionner une srie d'tapes contenant un trait noir signalant une action impossible enregistrer, cette tape est ignore lorsque vous reproduisez les tapes. 2. Cliquez sur Reproduire. Les tapes sont reproduites dans l'ordre chronologique et une nouvelle tape, Reproduire les tapes, apparat dans le panneau Historique.
Ralisation ou extension d'une slection

Maintenez la touche Maj enfonce tout en appuyant sur une touche flche. Si un trait noir indiquant un mouvement de la souris apparat pendant que vous effectuez une tche que vous voulez ritrer ultrieurement, vous pouvez annuler cette dernire action et tenter une autre approche (utilisez les touches flches, par exemple).
Application d'tapes du panneau Historique des objets
Haut de la page
Vous pouvez appliquer un ensemble d'tapes affiches dans le panneau Historique n'importe quel objet figurant dans la fentre de document. Si vous slectionnez plusieurs objets, puis leur appliquez des tapes partir du panneau Historique, ces objets sont traits comme une slection unique et Dreamweaver tente d'appliquer les tapes cette slection combine ; toutefois, vous ne pouvez appliquer un ensemble d'tapes qu' un seul objet la fois.
331
Pour appliquer les tapes chaque objet d'un ensemble d'objets, vous devez faire en sorte que la dernire tape de la srie slectionne l'objet suivant de l'ensemble. La deuxime procdure illustre ce principe dans un scnario particulier : dfinition de l'espacement vertical et horizontal d'une srie d'images.
Application d'tapes un autre objet

1. Slectionnez l'objet. 2. Slectionnez l'tape appliquer dans le panneau Historique, puis cliquez sur Reproduire.
Application d'tapes plusieurs objets

1. Ouvrez un document dans lequel chaque ligne est compose d'une petite image (par exemple une puce graphique ou une icne) suivie de texte. L'objectif est d'espacer davantage ces images la fois du texte et des autres images situes au-dessus et en dessous.
2. Ouvrez l'inspecteur Proprits (Fentre > Proprits), si ncessaire. 3. Slectionnez la premire image. 4. Dans l'inspecteur Proprits, indiquez des valeurs dans les zones Espace V. et Espace H. pour dfinir l'espacement de l'image. 5. Cliquez sur l'image de nouveau pour activer la fentre de document sans dplacer le point d'insertion. 6. Appuyez sur la touche flche gauche pour amener le point d'insertion gauche de l'image. 7. Appuyez sur la touche flche bas pour faire descendre le point d'insertion d'une ligne, tout en le laissant juste gauche de la seconde image de la srie. 8. Appuyez sur la touche flche droite tout en maintenant la touche Maj. enfonce, pour slectionner la seconde image. Remarque : Ne slectionnez surtout pas l'image en cliquant dessus, car vous ne pourriez plus reproduire toutes les tapes. 9. Dans le panneau Historique, slectionnez les tapes correspondant la modification de l'espacement de l'image et la slection de l'image suivante. Cliquez sur le bouton Reproduire pour reproduire ces actions.
L'espacement de l'image courante est modifi, et l'image suivante est slectionne.
10. Continuez cliquer sur le bouton Reproduire jusqu' ce que toutes les images soient correctement espaces.
Copie et collage d'tapes entre les documents
Haut de la page
Chaque document ouvert possde son propre historique. Vous pouvez copier des tapes d'un document et les coller dans un autre document. La fermeture d'un document supprime son historique. Si vous savez que vous voudrez utiliser des tapes d'un document ultrieurement, copiez ou sauvegardez ces tapes avant de fermer ce document. 1. Slectionnez les tapes dsires dans le panneau Historique du document qui contient les tapes rutiliser. 2. Cliquez sur Copier les tapes dans le panneau Historique . Remarque : Le bouton Copier les tapes (dans le panneau Historique) est diffrent de la commande Copier (dans le menu Edition). Vous ne pouvez pas utiliser la commande Edition > Copier pour copier des tapes, mais vous pouvez utiliser la commande Edition > Coller pour les coller. Soyez prudent lorsque vous copiez des tapes qui comportent une commande Copier ou Coller: N'utilisez pas Copier les tapes si l'une des tapes contient une commande Copier, car le collage de ces tapes risque de ne pas s'effectuer comme souhait.
332
Si vos tapes contiennent une commande Coller, vous ne pouvez pas les coller, moins qu'elles ne comprennent galement une commande Copier avant la commande Coller. 3. Ouvrez l'autre document. 4. Placez le point d'insertion sur l'emplacement dsir, ou slectionnez l'objet auquel vous voulez appliquer les tapes. 5. Choisissez Edition > Coller. Les tapes sont reproduites ds qu'elles sont colles dans le panneau Historique du document. Le panneau Historique les affiche comme une seule tape, appele Coller les tapes. Si vous collez des tapes dans un diteur de texte, en mode Code ou dans l'inspecteur de code, elles s'affichent sous forme de code Java Script. Ce point peut vous tre trs utile pour apprendre crire vos propres scripts.
Cration et utilisation de commandes partir d'tapes de l'historique
Haut de la page
Sauvegardez un ensemble d'tapes de l'historique sous la forme d'une commande laquelle vous donnerez un nom et qui deviendra alors disponible dans le menu Commandes. Crez et enregistrez une nouvelle commande si vous pensez devoir utiliser de nouveau un ensemble d'tapes, surtout aprs le prochain dmarrage de Dreamweaver.
Cration d'une commande

1. Slectionnez la ou les tapes dsires dans le panneau Historique. 2. Cliquez sur le bouton Enregistrer comme commande ou choisissez l'option Enregistrer comme commande dans le menu contextuel du panneau Historique. 3. Indiquez le nom de la commande et cliquez sur OK. La commande apparat dans le menu Commandes. Remarque : La commande est sauvegarde sous la forme d'un fichier Java Script (ou parfois HTML) dans votre dossier Dreamweaver/Configuration/Commandes. Si vous utilisez Dreamweaver sur un systme d'exploitation plusieurs utilisateurs, le fichier est enregistr dans le dossier Commandes de l'utilisateur spcifique.
Utilisation d'une commande sauvegarde

1. Slectionnez l'objet auquel vous dsirez appliquer la commande ou placez le point d'insertion l'emplacement dsir. 2. Slectionnez la commande de votre choix dans le menu Commandes.
Modification du nom d'une commande

1. Choisissez Commandes > Modifier la liste des commandes. 2. Slectionnez la commande renommer, indiquez son nouveau nom, puis cliquez sur Fermer.
Suppression d'un nom du menu Commandes

1. Choisissez Commandes > Modifier la liste des commandes. 2. Slectionnez une commande. 3. Cliquez sur Supprimer, puis sur Fermer.
Enregistrement et sauvegarde de commandes
Haut de la page
Enregistrez une commande temporaire pour une utilisation court terme, ou enregistrez et sauvegardez une commande pour l'utiliser ultrieurement. Dreamweaver conserve uniquement une commande enregistre la fois ; ds que vous commencez enregistrer une nouvelle commande, l'ancienne est perdue, moins que vous ne la sauvegardiez avant de mmoriser la nouvelle commande.
Enregistrement provisoire une srie d'tapes

1. Choisissez Commandes > Dmarrer l'enregistrement ou appuyez sur la combinaison de touches Ctrl+Maj+X (Windows) ou Commande+Maj+X (Macintosh). Le pointeur change d'aspect pour indiquer que vous mmorisez une commande. 2. Lorsque l'opration est termine, choisissez Commandes > Arrter l'enregistrement ou appuyez nouveau sur la combinaison de touches Ctrl+Maj+X (Windows) ou Commande+Maj+X (Macintosh).
Reproduction d'une commande enregistre

Slectionnez Commandes > Reproduire la commande enregistre.
Sauvegarde d'une commande enregistre

333
1. Slectionnez Commandes > Reproduire la commande enregistre. 2. Dans la liste d'tapes du panneau Historique, slectionnez l'tape Excuter commande et cliquez sur le bouton Enregistrer comme commande. 3. Indiquez le nom de la commande et cliquez sur OK. La commande apparat dans le menu Commandes. Voir aussi
334
Cration d'un lien vers un document Word ou Excel

Vous pouvez insrer un lien vers un document Microsoft Word ou Excel dans une page existante. 1. Ouvrez la page o le lien doit tre affich. 2. Faites glisser le fichier de son emplacement actuel vers la page Dreamweaver, en plaant le lien l'emplacement voulu. 3. Slectionnez Crer un lien, puis cliquez sur OK. 4. Si le document vers lequel vous crez un lien rside hors du dossier racine de votre site, Dreamweaver vous invite le copier dans ce dossier. En copiant le document dans le dossier racine du site, vous tes assur que le document sera disponible lors de la publication du site Web. 5. Lorsque vous chargez votre page sur le serveur Web, vous devez galement charger le fichier Word ou Excel. Votre page contient dsormais un lien vers le document Word ou Excel. Le texte du lien est le nom du fichier li. Si vous le souhaitez, vous pouvez modifier ce texte dans la fentre du document.
335
Cration et gestion d'une liste d'actifs favoris

Gestion des actifs favoris Ajout ou suppression d'actifs favoris Cration d'un surnom pour un actif favori Regroupement d'actifs dans un dossier Favoris
Gestion des actifs favoris
Haut de la page
La liste complte de tous les actifs reconnus peut devenir encombre pour certains sites volumineux. Vous pouvez ajouter des actifs frquemment utiliss une liste Favoris, grouper des actifs connexes, leur attribuer des surnoms pour mmoriser leur objet et les retrouver aisment dans le panneau Actifs. Remarque : Les actifs favoris ne sont pas stocks en tant que fichiers distincts sur le disque. Ils font rfrence aux actifs de la liste Site. Dreamweaver conserve la trace des actifs de la liste Site afficher dans la liste Favoris. La plupart des oprations du panneau Actifs sont identiques dans les listes Favoris et Site. Toutefois, il existe plusieurs tches que vous pouvez raliser uniquement dans la liste Favoris.
Ajout ou suppression d'actifs favoris

Il existe plusieurs mthodes pour ajouter des actifs la liste Favoris du site dans le panneau Actifs.
Haut de la page
L'ajout d'une couleur ou d'une URL la liste Favoris ncessite une tape supplmentaire. Vous ne pouvez pas ajouter de nouvelles couleurs ou URL la liste Site. Cette dernire contient uniquement les actifs dj utiliss dans le site. Remarque : Il n'existe pas de liste Favoris pour les modles et les lments de bibliothque.
Ajout d'actifs la liste Favoris

Effectuez l'une des oprations suivantes : Slectionnez un ou plusieurs actifs dans la liste Site du panneau Actifs, puis cliquez sur le bouton Ajouter aux favoris .
Slectionnez un ou plusieurs actifs dans la liste Site du panneau Actifs, cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis slectionnez Ajouter aux favoris. Slectionnez un ou plusieurs fichiers dans le panneau Fichiers, cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis slectionnez Ajouter aux favoris. Dreamweaver ignore les fichiers n'appartenant pas une catgorie du panneau Actifs. Cliquez avec le bouton droit (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur un lment dans la fentre de document en mode Cration, puis choisissez l'option du menu contextuel pour ajouter l'lment une catgorie Favoris. Le menu contextuel pour le texte contient soit l'option Ajouter aux favoris Couleur, soit l'option Ajouter aux favoris URL, selon qu'un lien est attach au texte. Vous pouvez ajouter uniquement les lments qui correspondent aux catgories du panneau Actifs.
Ajout d'une nouvelle couleur ou une nouvelle URL la liste Favoris

1. Dans le panneau Actifs, slectionnez la catgorie Couleurs ou URL. 2. Slectionnez l'option Favoris en haut du panneau. 3. Cliquez sur le bouton Nouvelle couleur ou 4. Effectuez l'une des oprations suivantes : Slectionnez une couleur dans le slecteur de couleur et donnez-lui un surnom si vous le souhaitez. Pour fermer le slecteur de couleur sans slectionner de couleur, appuyez sur la touche Echap ou cliquez sur la barre de couleur grise en haut du slecteur de couleur. Entrez une URL et un surnom dans la bote de dialogue Ajouter URL, puis cliquez sur OK. Nouvelle URL .
Suppression d'actifs de la liste Favoris

1. Dans le panneau Actifs, slectionnez l'option Favoris en haut du panneau. 2. Slectionnez un ou plusieurs actifs (ou un dossier) dans la liste Favoris. 3. Cliquez sur le bouton Supprimer des favoris .
336
Les actifs sont supprims de la liste Favoris, mais pas de la liste Site. Si vous supprimez un dossier Favoris, ce dernier est supprim, ainsi que tout son contenu.
Cration d'un surnom pour un actif favori
Haut de la page
Vous pouvez attribuer des surnoms (par exemple, CouleurArrirePlanPage au lieu de #999900) uniquement aux actifs de la liste Favoris. La liste Site retient leur nom de fichier rel (ou leur valeur, dans le cas de couleurs et d'URL). 1. Dans le panneau Actifs, (Fentre > Actifs), slectionnez la catgorie qui contient votre actif. 2. Slectionnez l'option Favoris en haut du panneau. 3. Effectuez l'une des oprations suivantes : Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur le nom ou l'icne de l'actif dans le panneau Actifs, puis slectionnez Modifier le surnom. Cliquez une fois sur le nom de l'actif, effectuez une pause, puis cliquez nouveau. (Ne double-cliquez pas, car cela ouvrirait l'lment pour modification.) 4. Tapez un surnom pour l'actif, puis appuyez sur la touche Entre (Windows) ou Retour (Macintosh).
Regroupement d'actifs dans un dossier Favoris

Le fait de placer un actif dans un dossier Favoris ne modifie pas l'emplacement du fichier d'actif sur le disque. 1. Dans le panneau Actifs, slectionnez l'option Favoris en haut du panneau. 2. Cliquez sur le bouton Nouveau dossier Favoris 4. Faites glisser les actifs vers le dossier. Voir aussi . 3. Tapez un nom pour le dossier, puis appuyez sur la touche Entre (Windows) ou Retour (Macintosh).
Haut de la page
337
Affichage de donnes l'aide de Spry

A propos des ensembles de donnes Spry Cration d'un ensemble de donnes Spry Cration d'une rgion Spry Cration d'une rgion rpte Spry Cration d'une liste de rptition Spry
A propos des ensembles de donnes Spry
Haut de la page
Un ensemble de donnes Spry est essentiellement un objet JavaScript qui contient une collection de donnes que vous dfinissez. Dreamweaver vous permet de crer rapidement cet objet et d'y charger des donnes partir d'une source de donnes (comme un fichier XML ou HTML). L'ensemble de donnes produit une plage de donnes, sous la forme d'un tableau standard compos de lignes et de colonnes. Lorsque vous crez un ensemble de donnes avec Dreamweaver, vous pouvez galement dfinir comment afficher les donnes sur une page Web. L'on peut considrer un ensemble de donnes comme un conteneur virtuel dont la structure consiste en lignes et en colonnes. Il se prsente sous la forme d'un objet JavaScript dont les informations ne sont visibles que lorsque vous stipulez prcisment comment les afficher sur la page Web. Vous pouvez afficher toutes les donnes de ce conteneur, ou dcider de n'afficher qu'une slection parmi celles-ci. Vous trouverez toutes les informations relatives au fonctionnement des ensembles de donnes Spry l'adresse www.adobe.com/go/learn_dw_sdg_sprydataset_fr. Vous trouverez un didacticiel vido sur l'utilisation des ensembles de donnes Spry, ralis par l'quipe de Dreamweaver, l'adresse www.adobe.com/go/dw10datasets_fr. Vous trouverez un didacticiel vido sur l'utilisation des ensembles de donnes Spry l'adresse www.adobe.com/go/lrvid4047_dw_fr.
Cration d'un ensemble de donnes Spry

Cration d'un ensemble de donnes HTML Spry
Haut de la page
1. Si vous ne procdez qu' la cration d'un ensemble de donnes, il n'est pas ncessaire de vous intresser au point d'insertion. Si vous crez un ensemble de donnes et insrez galement une disposition, veillez ce que le point d'insertion se trouve l'endroit o vous voulez insrer la disposition sur la page. 2. Choisissez Insertion > Spry > Ensemble de donnes Spry. 3. Dans la fentre Dfinir la source des donnes, effectuez les oprations suivantes : Choisissez HTML dans la liste droulante Slectionner le type de donnes. Cette option est active par dfaut. Donnez un nom au nouvel ensemble de donnes. Le nom par dfaut est ds1 lors de la premire cration d'un ensemble de donnes. Le nom de l'ensemble de donnes peut contenir des lettres, des chiffres et des caractres de soulignement, mais il ne peut pas dbuter par un chiffre. Dfinissez les lments de donnes, dans votre source de donnes, que Dreamweaver doit dtecter. Par exemple, si vous avez organis vos donnes l'intrieur d'une balise div et que vous voulez que Dreamweaver dtecte les balises div au lieu des tableaux, choisissez Divs dans la liste droulante Dtecter. L'option Personnalis vous permet d'entrer n'importe quel nom de balise dtecter. Indiquez le chemin d'accs au fichier contenant votre source de donnes HTML. Il peut s'agir d'un chemin relatif un fichier local de votre site (par exemple donnes/donnes_html.html), ou d'une URL absolue vers une page Web publie ( l'aide du protocole HTTP ou HTTPS). Vous pouvez cliquer sur le bouton Parcourir afin d'accder un fichier local puis le slectionner. Dreamweaver rend la source de donnes HTML dans la fentre Slection de donnes et affiche des repres visuels pour les lments susceptibles de servir de conteneurs l'ensemble de donnes. L'lment que vous voulez utiliser doit dj possder un ID unique. Si ce n'est pas le cas, Dreamweaver affiche un message d'erreur, et vous devrez revenir la source de donnes afin d'attribuer un ID unique. Par ailleurs, les lments susceptibles d'tre slectionns, dans le fichier source des donnes, ne peuvent pas se trouver dans des rgions Spry ni contenir d'autres rfrences de donnes. Alternativement, vous pouvez dfinir un flux de conception comme source de donnes. Pour plus d'informations, voir Utilisation d'un flux de conception. Slectionnez l'lment pour votre conteneur de donnes en cliquant sur l'une des flches jaunes qui s'affichent dans la fentre Slection de donnes, ou en choisissant un ID dans la liste droulante Conteneurs de donnes.
338
Slection de l'lment pour le conteneur de donnes de l'ensemble de donnes HTML. Si votre fichier est de grande taille, vous pouvez cliquer sur la flche Dvelopper/Rduire dans le bas de la fentre Slection de donnes afin d'afficher davantage de donnes. Lorsque vous avez slectionn l'lment de donnes pour l'ensemble de donnes, Dreamweaver affiche un aperu de l'ensemble dans la fentre Aperu des donnes. (Facultatif) Activez l'option Slection de donnes avance si vous voulez dfinir des slecteurs CSS pour l'ensemble de donnes. Par exemple, si vous avez indiqu .product dans la zone Slecteurs de lignes et .boximage dans la zone Slecteurs de colonnes, l'ensemble de donnes contiendra uniquement les lignes auxquelles la classe .product a t attribue, et uniquement les colonnes possdant la classe .boximage. Si vous voulez entrer plusieurs slecteurs dans une zone de texte prcise, sparez chacun d'eux par une virgule. Pour plus d'informations, voir A propos des slecteurs de donnes Spry. Lorsque vous avez termin d'utiliser la fentre Dfinir la source des donnes, cliquez sur Termin pour crer immdiatement l'ensemble de donnes, ou cliquez sur Suivant pour accder la fentre Dfinir les options des donnes. Si vous cliquez sur Termin, l'ensemble de donnes est disponible dans le panneau Liaisons (Fentre > Liaisons). 4. Dans la fentre Dfinir les options des donnes, effectuez les oprations suivantes : (Facultatif) Dfinissez les types de colonnes de l'ensemble de donnes en slectionnant une colonne, puis en effectuant une slection dans la liste droulante Type. Par exemple, si une colonne de l'ensemble de donnes contient des nombres, slectionnez cette colonne puis choisissez Nombre dans la liste droulante Type. Cette option n'est importante que si vous voulez que les utilisateurs puissent trier les donnes sur la base de cette colonne. Vous pouvez slectionner une colonne dans l'ensemble de donnes en cliquant sur son titre, en la slectionnant dans la liste droulante Nom de colonne, ou en y accdant l'aide des flches vers la gauche et la droite situes dans le coin suprieur gauche de la fentre. (Facultatif) Dterminez comment les donnes doivent tre tries, en slectionnant la colonne sur laquelle le tri doit tre bas dans la liste droulante Colonne de tri. Lorsque vous avez slectionn la colonne, vous pouvez dterminer si elle doit tre trie dans l'ordre croissant ou dcroissant. (Facultatif : tableaux uniquement) Dsactivez l'option Utiliser la premire ligne comme en-tte si vous voulez employer des noms de colonnes gnriques (c.--d. column0, column1, column2, etc.) au lieu des noms de colonnes dfinis dans votre source de donnes HTML. Remarque : Si vous avez slectionn autre chose qu'un tableau comme lment conteneur de votre ensemble de donnes, cette option et la suivante ne sont pas disponibles. Dreamweaver utilise automatiquement column0, column1, column2, et ainsi de suite, comme nom des colonnes des ensembles de donnes non bass sur un tableau. (Facultatif : tableaux uniquement) Activez l'option Utiliser les colonnes comme lignes pour permuter l'orientation horizontale et verticale des donnes dans l'ensemble de donnes. Si vous activez cette option, les colonnes seront utilises comme lignes. (Facultatif) Activez l'option Filtrer les lignes en double pour exclure les lignes de donnes en double de l'ensemble de donnes. (Facultatif) Activez l'option Dsactiver la mise en cache des donnes si vous voulez toujours avoir accs aux donnes les plus rcentes de l'ensemble de donnes. Si vous voulez que les donnes s'actualisent automatiquement, activez l'option Actualiser automatiquement les donnes puis dfinissez un intervalle d'actualisation, en millisecondes. Lorsque vous avez termin d'utiliser la fentre Dfinir les options des donnes, cliquez sur Termin pour crer immdiatement l'ensemble de donnes, ou cliquez sur Suivant pour accder la fentre Choisir les options d'insertion. Si vous cliquez sur Termin,
339
l'ensemble de donnes est disponible dans le panneau Liaisons (Fentre > Liaisons). 5. Dans la fentre Choisir les options d'insertion, effectuez l'une des oprations suivantes : Slectionnez la disposition du nouvel ensemble de donnes et dfinissez les options de configuration appropries. Pour plus d'informations, voir Slection d'une disposition pour l'ensemble de donnes. Activez l'option Ne pas insrer de code HTML. Si vous activez cette option, Dreamweaver cre l'ensemble de donnes, mais n'ajoute pas de code HTML la page. L'ensemble de donnes est disponible dans le panneau Liaisons (Fentre > Liaisons), et vous pouvez tirer manuellement des donnes sur la page partir de l'ensemble de donnes. 6. Cliquez sur Termin. Dreamweaver cre l'ensemble de donnes et, si vous avez choisi une option de disposition, affiche la disposition et les espaces rservs pour les donnes sur votre page. En mode Code, vous pouvez constater que Dreamweaver a ajout des rfrences, dans l'en-tte, aux fichiers SpryData.js et SpryHTMLDataSet.js. Ces fichiers sont d'importants actifs Spry qui fonctionnent en combinaison avec la page. Veillez ne pas supprimer ce code de la page, faute de quoi l'ensemble de donnes ne fonctionnera pas. Lorsque vous chargez votre page sur un serveur, vous devez galement charger ces fichiers, en tant que fichiers dpendants.
Cration d'un ensemble de donnes XML Spry

1. Si vous ne procdez qu' la cration d'un ensemble de donnes, il n'est pas ncessaire de vous intresser au point d'insertion. Si vous crez un ensemble de donnes et insrez galement une disposition, veillez ce que le point d'insertion se trouve l'endroit o vous voulez insrer la disposition sur la page. 2. Choisissez Insertion > Spry > Ensemble de donnes Spry. 3. Dans la fentre Dfinir la source des donnes, effectuez les oprations suivantes : Choisissez XML dans la liste droulante Slectionner le type de donnes. Donnez un nom au nouvel ensemble de donnes. Le nom par dfaut est ds1 lors de la premire cration d'un ensemble de donnes. Le nom de l'ensemble de donnes peut contenir des lettres, des chiffres et des caractres de soulignement, mais il ne peut pas dbuter par un chiffre. Indiquez le chemin d'accs au fichier contenant votre source de donnes XML. Il peut s'agir d'un chemin relatif un fichier local de votre site (par exemple donnes/donnes.xml), ou d'une URL absolue vers une page sur le Web ( l'aide du protocole HTTP ou HTTPS). Vous pouvez cliquer sur le bouton Parcourir afin d'accder un fichier local puis le slectionner. Dreamweaver rend la source de donnes XML dans la fentre Elments de ligne et affiche l'arborescence XML des lments de donnes pouvant tre slectionns. Les lments rpts sont indiqus par un signe plus (+), et les lments enfants sont mis en retrait. Alternativement, vous pouvez dfinir un flux de conception comme source de donnes. Pour plus d'informations, voir Utilisation d'un flux de conception. Slectionnez l'lment qui contient les donnes afficher. En rgle gnrale, il s'agit d'un lment rpt, tel que <menu_item>, avec plusieurs lments enfants tels que <item>, <link>, <description>, etc.
Slection d'un lment rpt pour l'ensemble de donnes XML. Lorsque vous avez slectionn l'lment de donnes pour l'ensemble de donnes, Dreamweaver affiche un aperu de l'ensemble dans la fentre Aperu des donnes. La zone XPath affiche une expression qui indique l'emplacement du nud slectionn dans le fichier XML source.
340
Remarque : XPath (XML Path Language) est une syntaxe destine traiter des parties d'un document XML. Elle est essentiellement utilise comme langage de requtes pour des donnes XML, tout comme le langage SQL est utilis pour des requtes de bases de donnes. Pour plus d'informations sur XPath, consultez les spcifications du langage XPath sur le site Web du W3C, l'adresse www.w3.org/TR/xpath. Lorsque vous avez termin d'utiliser la fentre Dfinir la source des donnes, cliquez sur Termin pour crer immdiatement l'ensemble de donnes, ou cliquez sur Suivant pour accder la fentre Dfinir les options des donnes. Si vous cliquez sur Termin, l'ensemble de donnes est disponible dans le panneau Liaisons (Fentre > Liaisons). 4. Dans la fentre Dfinir les options des donnes, effectuez les oprations suivantes : (Facultatif) Dfinissez les types de colonnes de l'ensemble de donnes en slectionnant une colonne, puis en effectuant une slection dans la liste droulante Type. Par exemple, si une colonne de l'ensemble de donnes contient des nombres, slectionnez cette colonne puis choisissez Nombre dans la liste droulante Type. Cette option n'est importante que si vous voulez que les utilisateurs puissent trier les donnes sur la base de cette colonne. Vous pouvez slectionner une colonne dans l'ensemble de donnes en cliquant sur son titre, en la slectionnant dans la liste droulante Nom de colonne, ou en y accdant l'aide des flches vers la gauche et la droite situes dans le coin suprieur gauche de la fentre. (Facultatif) Dterminez comment les donnes doivent tre tries, en slectionnant la colonne sur laquelle le tri doit tre bas dans la liste droulante Colonne de tri. Lorsque vous avez slectionn la colonne, vous pouvez dterminer si elle doit tre trie dans l'ordre croissant ou dcroissant. (Facultatif) Activez l'option Filtrer les lignes en double pour exclure les lignes de donnes en double de l'ensemble de donnes. (Facultatif) Activez l'option Dsactiver la mise en cache des donnes si vous voulez toujours avoir accs aux donnes les plus rcentes de l'ensemble de donnes. Si vous voulez que les donnes s'actualisent automatiquement, activez l'option Actualiser automatiquement les donnes puis dfinissez un intervalle d'actualisation, en millisecondes. Lorsque vous avez termin d'utiliser la fentre Dfinir les options des donnes, cliquez sur Termin pour crer immdiatement l'ensemble de donnes, ou cliquez sur Suivant pour accder la fentre Choisir les options d'insertion. Si vous cliquez sur Termin, l'ensemble de donnes est disponible dans le panneau Liaisons (Fentre > Liaisons). 5. Dans la fentre Choisir les options d'insertion, effectuez l'une des oprations suivantes : Slectionnez la disposition du nouvel ensemble de donnes et dfinissez les options de configuration appropries. Pour plus d'informations, voir Slection d'une disposition pour l'ensemble de donnes. Activez l'option Ne pas insrer de code HTML. Si vous activez cette option, Dreamweaver cre l'ensemble de donnes, mais n'ajoute pas de code HTML la page. L'ensemble de donnes est disponible dans le panneau Liaisons (Fentre > Liaisons), et vous pouvez tirer manuellement des donnes sur la page partir de l'ensemble de donnes. 6. Cliquez sur Termin. Dreamweaver cre l'ensemble de donnes et, si vous avez choisi une option de disposition, affiche la disposition et les espaces rservs pour les donnes sur votre page. En mode Code, vous pouvez constater que Dreamweaver a ajout des rfrences, dans l'en-tte, aux fichiers xpath.js et SpryData.js. Ces fichiers sont d'importants actifs Spry qui fonctionnent en combinaison avec la page. Veillez ne pas supprimer ce code de la page, faute de quoi l'ensemble de donnes ne fonctionnera pas. Lorsque vous chargez votre page sur un serveur, vous devez galement charger ces fichiers, en tant que fichiers dpendants.
Slection d'une disposition pour l'ensemble de donnes

La fentre Choisir les options d'insertion permet de slectionner diverses options d'affichage des valeurs de l'ensemble de donnes sur la page. Vous pouvez afficher les donnes l'aide d'un tableau Spry dynamique, d'une disposition principale/dtails, d'une disposition conteneurs empils (colonne unique) ou conteneurs empils avec zone focalisable (deux colonnes). Une vignette reprsentant l'apparence de chaque disposition s'affiche dans la fentre Choisir les options d'insertion. Tableau dynamique Activez cette option si vous voulez afficher vos donnes dans un tableau Spry dynamique. Les tableaux Spry permettent le tri dynamique des colonnes et d'autres comportements interactifs. Lorsque vous avez activ cette option, cliquez sur le bouton Configurer pour ouvrir la bote de dialogue Insrer un tableau, puis procdez comme suit : 1. Dans le panneau Colonnes, ajustez les colonnes du tableau en procdant comme suit : Slectionnez le nom d'une colonne puis cliquez sur le signe moins (-) pour la supprimer du tableau. Cliquez sur le signe plus (+) puis slectionnez le nom d'une colonne pour l'ajouter au tableau. Slectionnez le nom d'une colonne puis cliquez sur la flche vers le haut ou vers le bas pour la dplacer. Si vous faites monter une colonne, elle se trouvera davantage sur la gauche du tableau affich, et sur la droite si vous la faites descendre. 2. Pour autoriser le tri dans une colonne, slectionnez-la dans le panneau Colonnes, puis activez l'option Trier la colonne en cas de clic sur l'en-tte. Par dfaut, toutes les colonnes peuvent faire l'objet d'un tri. Si vous voulez dsactiver le tri dans une colonne, slectionnez son nom dans le panneau Colonnes, puis dsactivez l'option Trier la colonne
341
en cas de clic sur l'en-tte. 3. Si des styles CSS sont associs votre page, sous la forme d'une feuille de style jointe ou d'un ensemble de styles individuels dans la page HTML, vous pouvez appliquer une classe CSS pour une ou plusieurs des options suivantes : Classe de ligne impaire Modifie l'apparence des lignes impaires dans le tableau dynamique en fonction du style de classe slectionn. Classe de ligne paire Modifie l'apparence des lignes paires dans le tableau dynamique en fonction du style de classe slectionn. Classe de survol Modifie l'apparence d'une ligne du tableau lorsque vous amenez le pointeur de la souris au-dessus d'elle, en fonction du style de classe slectionn. Slectionner une classe Modifie l'apparence d'une ligne du tableau lorsque vous cliquez dessus, en fonction du style de classe slectionn. Remarque : L'ordre des classes impaire , paire , survol et slection dans votre feuille de style est trs important. Les rgles doivent tre prcisment places dans l'ordre indiqu ci-dessus (impaire, paire, survol, slection). Si la rgle de survol est place sous la rgle de slection dans la feuille de style, l'effet de survol ne sera visible que lorsque l'utilisateur survolera une autre ligne. Si les rgles de survol et de slection figurent au-dessus des rgles impaire et paire dans la feuille de style, les effets impaire et paire ne fonctionneront pas du tout. Vous pouvez tirer les rgles dans le panneau CSS afin de les placer au bon endroit, ou manipuler directement le code CSS. 4. Si le tableau que vous crez doit devenir un tableau principal dynamique Spry, activez l'option Mettre jour les rgions dtailles en cas de clic sur une ligne. Pour plus d'informations, voir A propos des tableaux principaux Spry et de la mise jour des rgions dtailles. 5. Cliquez sur OK pour fermer la bote de dialogue, puis sur Terminer dans la fentre Choisir les options d'insertion. Si vous tes en mode Cration, le tableau s'affiche avec une ligne d'en-ttes et une ligne de rfrences de donnes. Les rfrences de donnes sont mises en surbrillance et entoures d'accolades ({}). Disposition Principale/Dtails Activez cette option si vous voulez afficher vos donnes selon une disposition principale/dtails. La disposition principale/dtails permet l'utilisateur de cliquer sur un lment dans la rgion principale ( gauche) de manire actualiser les informations dans la rgion de dtails ( droite). En rgle gnrale, la rgion principale contient une longue liste de noms, par exemple une liste de produits disponibles. Lorsque l'utilisateur clique sur l'un des noms de produits, la rgion dtaille affiche des informations bien plus dtailles sur la slection. Lorsque vous avez activ cette option, cliquez sur le bouton Configurer pour ouvrir la bote de dialogue Insrer un bloc d'affichage principal/dtaill, puis procdez comme suit : 1. Dans le panneau Colonnes principales, ajustez le contenu de votre rgion principale en procdant comme suit : Slectionnez le nom d'une colonne puis cliquez sur le signe moins (-) pour la supprimer de la rgion principale. Cliquez sur le signe plus (+) puis slectionnez le nom d'une colonne pour l'ajouter la rgion principale. Par dfaut, Dreamweaver remplit la rgion principale des donnes de la premire colonne de l'ensemble de donnes. Slectionnez le nom d'une colonne puis cliquez sur la flche vers le haut ou vers le bas pour la dplacer. En faisant monter ou descendre une colonne dans le panneau Colonnes principales, vous dfinissez l'ordre d'apparition des donnes dans la rgion principale de la page. 2. Rptez la procdure ci-dessus pour le panneau Colonnes de dtails. Par dfaut, Dreamweaver remplit la rgion dtaille de toutes les donnes qui ne se trouvent pas dans la rgion principale (c'est--dire toutes les colonnes de l'ensemble de donnes, sauf la premire). 3. (Facultatif) Dfinissez diffrents types de conteneurs pour les donnes dans la rgion dtaille. Pour ce faire, choisissez le nom d'une colonne dtaille puis slectionnez le conteneur utiliser pour celle-ci dans la liste droulante Type de conteneur. Vous pouvez choisir des balises DIV, P, SPAN ou H1-H6. 4. Cliquez sur OK pour fermer la bote de dialogue, puis sur Terminer dans la fentre Choisir les options d'insertion. En mode Cration, vous verrez les rgions principale/dtaille s'afficher, remplies des rfrences de donnes slectionnes. Les rfrences de donnes sont mises en surbrillance et entoures d'accolades ({}). Conteneurs empils Activez cette option si vous voulez afficher vos donnes l'aide d'une structure de conteneurs rpts sur la page. Par exemple, si l'ensemble de donnes contient quatre colonnes de donnes, chaque conteneur peut comprendre les quatre colonnes, et la structure de conteneur se rptera pour chaque ligne de l'ensemble de donnes. Lorsque vous avez activ cette option, cliquez sur le bouton Configurer pour ouvrir la bote de dialogue Insrer des conteneurs empils, puis procdez comme suit : 1. Dans le panneau Colonnes, ajustez le contenu de vos conteneurs empils en procdant comme suit : Slectionnez le nom d'une colonne puis cliquez sur le signe moins (-) pour la supprimer des conteneurs empils. Cliquez sur le signe plus (+) puis slectionnez le nom d'une colonne pour l'ajouter aux conteneurs. Par dfaut, Dreamweaver remplit les conteneurs empils des donnes de chaque colonne de l'ensemble de donnes. Slectionnez le nom d'une colonne puis cliquez sur la flche vers le haut ou vers le bas pour la dplacer. En faisant monter ou
342
descendre une colonne dans le panneau Colonnes, vous dfinissez l'ordre d'apparition des donnes dans les conteneurs empils de la page. 2. (Facultatif) Dfinissez diffrents types de conteneurs pour les donnes dans les conteneurs empils. Pour ce faire, choisissez le nom d'une colonne de l'ensemble de donnes, puis slectionnez le conteneur utiliser pour celle-ci dans la liste droulante Type de conteneur. Vous pouvez choisir des balises DIV, P, SPAN ou H1-H6. 3. Cliquez sur OK pour fermer la bote de dialogue, puis sur Terminer dans la fentre Choisir les options d'insertion. En mode Cration, vous verrez le conteneur s'afficher, rempli des rfrences de donnes slectionnes. Les rfrences de donnes sont mises en surbrillance et entoures d'accolades ({}). Conteneurs empils avec zone focalisable Activez cette option si vous voulez afficher les donnes l'aide d'une structure de conteneurs rpts sur la page, avec une zone focalisable dans chaque conteneur. En rgle gnrale, la zone focalisable contient une image. La disposition Zone focalisable est similaire la disposition Conteneurs empils, ceci prs que dans la disposition Zone focalisable, l'affichage des donnes est spar en deux colonnes (dans le mme conteneur). Lorsque vous avez activ cette option, cliquez sur le bouton Configurer pour ouvrir la bote de dialogue Insrer une mise en forme de zone focalisable, puis procdez comme suit : 1. Dans le panneau Colonnes focalisables, ajustez le contenu de votre zone focalisable en procdant comme suit : Slectionnez le nom d'une colonne puis cliquez sur le signe moins (-) pour la supprimer de la zone focalisable. Cliquez sur le signe plus (+) puis slectionnez le nom d'une colonne pour l'ajouter la zone focalisable. Par dfaut, Dreamweaver remplit la zone focalisable des donnes de la premire colonne de l'ensemble de donnes. Slectionnez le nom d'une colonne puis cliquez sur la flche vers le haut ou vers le bas pour la dplacer. En faisant monter ou descendre une colonne dans le panneau Colonnes focalisables, vous dfinissez l'ordre d'apparition des donnes dans la zone focalisable de la page. 2. (Facultatif) Dfinissez diffrents types de conteneurs pour les donnes dans la zone focalisable. Pour ce faire, choisissez le nom d'une colonne de l'ensemble de donnes, puis slectionnez le conteneur utiliser pour celle-ci dans la liste droulante Type de conteneur. Vous pouvez choisir des balises DIV, P, SPAN ou H1-H6. 3. Rptez la procdure ci-dessus pour le panneau Colonnes empiles. Par dfaut, Dreamweaver remplit les colonnes empiles de toutes les donnes qui ne se trouvent pas dans la zone focalisable (c'est--dire toutes les colonnes de l'ensemble de donnes, sauf la premire). 4. Cliquez sur OK pour fermer la bote de dialogue, puis sur Terminer dans la fentre Choisir les options d'insertion. En mode Cration, la zone focalisable s'affiche, avec des conteneurs empils ses cts, remplie par les rfrences de donnes slectionnes. Les rfrences de donnes sont mises en surbrillance et entoures d'accolades ({}). Ne pas insrer de code HTML Activez cette option si vous voulez crer un ensemble de donnes, mais sans que Dreamweaver n'insre de disposition HTML pour celui-ci. L'ensemble de donnes est disponible dans le panneau Liaisons (Fentre > Liaisons), et vous pouvez tirer manuellement des lments sur la page. Mme si vous crez un ensemble de donnes sans insrer de disposition, vous pourrez insrer tout moment l'une des dispositions HTML disponibles. Pour ce faire, double-cliquez sur le nom de l'ensemble de donnes dans le panneau Liaisons, cliquez jusqu' ce que vous accdiez la fentre Choisir les options d'insertion, slectionnez une disposition puis cliquez sur Termin. Remarque : Vous pouvez galement tirer le nom de l'ensemble de donnes du panneau Liaisons jusqu'au point d'insertion sur la page. Lorsque vous procdez de la sorte, la fentre Choisir les options d'insertion s'affiche. Slectionnez une disposition puis cliquez sur Termin.
Modification d'un ensemble de donnes

Lorsque vous avez cr un ensemble de donnes Spry, vous pouvez le modifier tout moment. Dans le panneau Liaisons (Fentre > Liaisons), double-cliquez sur le nom de l'ensemble de donnes puis apportez-y les modifications dsires. Remarque : Lorsque vous modifiez un ensemble de donnes, si vous slectionnez une nouvelle disposition dans la fentre Choisir les options d'insertion, Dreamweaver ne remplace pas la disposition existante sur la page, mais en insre une nouvelle.
Utilisation d'un flux de conception

Si vous travaillez sur des donnes en cours de dveloppement, il peut tre utile d'employer un flux de conception. Par exemple, si le dveloppeur du serveur est en train de finaliser la base de donnes sous-jacente votre fichier de donnes XML, vous pouvez utiliser une version de test du fichier afin de mettre au point votre page indpendamment du dveloppement de la base de donnes. Si vous utilisez un flux de conception, Dreamweaver se borne remplir l'environnement de travail l'aide des donnes provenant de ce flux. Les rfrences la source de donnes qui se trouvent dans le code de page restent des rfrences la vritable source de donnes que vous voulez utiliser. 1. Commencez par crer un ensemble de donnes Spry (reportez-vous la procdure prcdente pour plus d'informations). 2. Dans la fentre Dfinir la source des donnes, cliquez sur le lien Flux de conception.
343
3. Cliquez sur le bouton Parcourir pour rechercher le flux de conception, puis cliquez sur OK.
A propos des slecteurs de donnes Spry

Lorsque vous utilisez Dreamweaver pour crer un ensemble de donnes Spry, Dreamweaver, inclut par dfaut toutes les donnes dans un conteneur slectionn. Vous pouvez affiner cette slection en employant des slecteurs de donnes CSS. Les slecteurs de donnes CSS permettent de n'inclure qu'une partie des donnes de la source de donnes, en dfinissant des rgles CSS qui sont lies certains lments de donnes. Par exemple, si vous entrez .product dans la ligne Slecteurs de lignes de la fentre Dfinir la source des donnes, Dreamweaver cre un ensemble de donnes qui ne contient que les lignes auxquelles la classe .product a t attribue. Pout que les zones des slecteurs de donnes soient accessibles, vous devez activer l'option Slection de donnes avance de la fentre Dfinir la source des donnes. Si vous entrez des slecteurs de donnes puis que vous dsactivez cette option, Dreamweaver conserve ce que vous avez entr dans ces zones, mais il ne les utilise pas pour filtrer l'ensemble de donnes.
A propos des tableaux principaux Spry et de la mise jour des rgions dtailles
L'une des fonctions les plus courantes des ensembles de donnes Spry consiste crer un ou plusieurs tableaux HTML qui mettent jour, de manire dynamique, une autre page en rponse une action de l'utilisateur. Par exemple, si un utilisateur slectionne un produit dans une liste d'un tableau, l'ensemble de donnes peut immdiatement mettre jour des donnes, ailleurs sur la page, l'aide d'informations dtailles sur le produit slectionn. Avec Spry, ces mises jour n'exigent pas l'actualisation de la page. Ces rgions de page distinctes sont baptises rgion principale et rgion dtaille . En rgle gnrale, une partie de la page (la rgion principale) affiche une liste d'lments classs en catgories (par exemple une liste de produits) et une autre partie de la page (la rgion dtaille) affiche plus d'informations au sujet d'un enregistrement slectionn. Chaque ensemble de donnes utilise la notion d'une ligne actuelle et, par dfaut, cette ligne actuelle est la premire de l'ensemble de donnes. Lorsqu'un utilisateur effectue une slection dans une rgion principale (en partant toujours de l'exemple d'une liste de diffrents produits), Spry modifie en fait la ligne actuelle de l'ensemble de donnes. Comme la rgion dtaille dpend de la rgion principale, toute modification rsultant de l'interaction de l'utilisateur avec la rgion principale (par exemple la slection de diffrents produits) entrane la modification des donnes affiches dans la rgion dtaille. Dreamweaver cre automatiquement des dispositions principale/dtaille, de faon mettre en place toutes les associations entre rgion principale et rgion dtaille. Toutefois, si vous voulez crer un tableau principal dynamique, vous pouvez le prparer en vue d'une association ultrieure une rgion dtaille. Lorsque vous activez l'option Mettre jour les rgions dtailles en cas de clic sur une ligne (dans la bote de dialogue Insrer un tableau), Dreamweaver insre une balise spry:setrow l'intrieur de la balise de la ligne rpte de votre tableau dynamique. Cet attribut prpare le tableau en tant que tableau principal capable de rinitialiser la ligne actuelle des donnes lorsque l'utilisateur interagit avec le tableau. Pour plus d'informations sur la cration manuelle de rgions principale/dtaille, voir le guide de dveloppement Spry l'adresse www.adobe.com/go/learn_dw_sdg_masterdetail_fr.
Cration d'une rgion Spry
Haut de la page
Le cadre applicatif Spry emploie deux types de rgions. L'une est une rgion Spry qui entoure les objets de donnes, comme les tableaux et les listes rptes. L'autre est une rgion de dtail Spry qui s'utilise en combinaison avec un objet de tableau principal afin de permettre la mise jour dynamique de donnes sur une page Dreamweaver. Tous les objets de donnes Spry doivent tre inclus dans une rgion Spry. Si vous tentez d'ajouter un objet de donnes Spry avant d'ajouter une rgion Spry une page, Dreamweaver vous invite ajouter une rgion Spry. Par dfaut, les rgions Spry se trouvent dans des conteneurs div HTML. Vous pouvez les ajouter avant d'ajouter un tableau, les ajouter automatiquement quand vous insrez un tableau ou une liste rpte, ou encore les placer autour d'objets de tableau ou de liste rpte existants. En rgle gnrale, si vous ajoutez une rgion de dtail, vous ajouterez tout d'abord l'objet de tableau principal, puis vous activerez l'option Mettre jour les rgions dtailles (voir Tableau dynamique). La seule valeur qui soit diffrente et spcifique pour une rgion de dtail est l'option Type de la bote de dialogue Insrer une rgion Spry. 1. Choisissez Insertion > Spry > Rgion Spry. Vous pouvez galement cliquer sur le bouton Rgion XML Spry de la catgorie Spry du panneau Insertion. 2. Comme conteneur de l'objet, vous pouvez slectionner l'option <div> ou l'option <span>. Le conteneur <div> est utilis par dfaut. 3. Choisissez l'une des options suivantes : Pour crer une rgion Spry, activez Rgion (l'option par dfaut) comme type de rgion insrer. Pour crer une rgion de dtail Spry, activez l'option Rgion Dtail. Une rgion de dtail ne s'emploie que si vous voulez lier des donnes dynamiques qui sont mises jour lorsque les donnes d'une autre rgion Spry changent. Important : Vous devez insrer une rgion de dtail dans une <div> diffrente de celle de la rgion de la table principale. Il peut tre ncessaire de passer en mode Code pour placer prcisment le point d'insertion. 4. Choisissez votre ensemble de donnes Spry dans le menu. 5. Si vous voulez crer ou modifier la rgion dfinie pour un objet, slectionnez-le puis activez l'une des options suivantes :
344
Renvoi la ligne de la slection Place une nouvelle rgion autour d'un objet. Remplacer la slection Remplace une rgion existante pour un objet. 6. Lorsque vous cliquez sur OK, Dreamweaver place un espace rserv de rgion sur votre page, avec le texte Placez ici le contenu de la rgion de dtail Spry . Vous pouvez remplacer ce texte d'espace rserv par un objet de donnes Spry, tel qu'un tableau ou une liste rpte, ou par des donnes dynamiques provenant du panneau Liaisons (Fentre > Liaisons).
Le panneau Liaisons affiche les donnes disponibles depuis l'ensemble de donnes. Remarque : Le panneau Liaisons contient quelques lments Spry intgrs : ds_RowID, ds_CurrentRowID et ds_RowCount. Spry les emploie pour dfinir la ligne dans laquelle un utilisateur a cliqu lorsqu'il dtermine comment mettre jour des rgions de dtail dynamiques. 7. Pour remplacer le texte d'espace rserv par un objet de donnes Spry (par exemple un tableau Spry), cliquez sur le bouton de l'objet de donnes correspondant dans la catgorie Spry du panneau Insertion. 8. Pour remplacer le texte d'espace rserv par des donnes dynamiques, utilisez l'une des mthodes suivantes : Tirez un ou plusieurs lments du panneau Liaisons au-dessus du texte slectionn. En mode Code, tapez directement le code d'un ou plusieurs lments. Utilisez le format suivant : {nom-ensemble-de-donnes::nomlment}, comme dans {ds1::category}. ou {dsProducts::desc}. Si vous n'utilisez qu'un ensemble de donnes dans votre fichier, ou si vous employez des lments du mme ensemble de donnes que celui dfini pour la rgion, vous pouvez omettre le nom de l'ensemble de donnes et simplement crire {category} or {desc}. Quelle que soit la mthode utilise pour dfinir le contenu de votre rgion, les lignes suivantes sont ajoutes votre code HTML : <div spry:region="ds1">{name}{category}</div> <div spry:region="ds2">{ds1::name}{ds1::descheader}</div>
Cration d'une rgion rpte Spry
Haut de la page
Vous pouvez ajouter des rgions rptes pour afficher vos donnes. Une rgion rpte est une structure de donnes simple que vous pouvez mettre en forme comme bon vous semble pour prsenter les donnes. Par exemple, vous pouvez utiliser une rgion rpte pour afficher un ensemble de vignettes photographiques l'une aprs l'autre dans un objet de mise en forme de page, tel qu'un lment div PA. 1. Choisissez Insertion > Spry > Rptition Spry. Vous pouvez galement cliquer sur le bouton Rptition Spry de la catgorie Spry du panneau Insertion. 2. Comme conteneur de l'objet, vous pouvez slectionner l'option <div> ou l'option <span>, en fonction du type de balise dsire. Le conteneur <div> est utilis par dfaut. 3. Activez l'option Rpter (par dfaut) ou Rpter les enfants. Pour disposer d'une souplesse accrue, vous pouvez utiliser l'option Rpter les enfants, o la validation des donnes est effectue pour chaque ligne d'une liste au niveau des enfants. Par exemple, dans une liste <ul>, les donnes sont vrifies au niveau <li>. Si vous activez l'option Rpter, les donnes sont vrifies au niveau <ul>. L'option Rpter les enfants peut s'avrer particulirement utile si vous employez des expressions conditionnelles dans le code. 4. Choisissez votre ensemble de donnes Spry dans le menu. 5. Si vous avez dj slectionn du texte ou des lments, vous pouvez les entourer ou les remplacer. 6. Cliquez sur OK pour afficher une rgion rpte sur votre page. Remarque : Tous les objets de donnes Spry doivent se trouver dans une rgion. Veillez donc crer une rgion Spry sur votre page avant d'insrer une rgion rpte. 7. Lorsque vous cliquez sur OK, Dreamweaver insre un espace rserv de rgion sur votre page, avec le texte Placez ici le contenu de la rgion de dtail Spry . Vous pouvez remplacer ce texte d'espace rserv par un objet de donnes Spry, tel qu'un tableau ou une liste rpte, ou par des donnes dynamiques provenant du panneau Liaisons (Fentre > Liaisons).
345
Le panneau Liaisons affiche les donnes disponibles depuis l'ensemble de donnes. Remarque : Le panneau Liaisons contient quelques lments Spry intgrs : ds_RowID, ds_CurrentRowID et ds_RowCount. Spry les emploie pour dfinir la ligne dans laquelle un utilisateur a cliqu lorsqu'il dtermine comment mettre jour des rgions de dtail dynamiques. 8. Pour remplacer le texte d'espace rserv par un objet de donnes Spry, cliquez sur le bouton de l'objet de donnes appropri dans le panneau Insertion. 9. Pour remplacer le texte d'espace rserv par une ou plusieurs donnes dynamiques, utilisez l'une des mthodes suivantes : Tirez un ou plusieurs lments du panneau Liaisons au-dessus du texte slectionn. En mode Code, tapez directement le code d'un ou plusieurs lments. Utilisez le format suivant : {nom-ensemble-de-donnes::nomlment}, comme dans {ds1::category}. ou {dsProducts::desc}. Si vous n'utilisez qu'un ensemble de donnes dans votre fichier, ou si vous employez des lments du mme ensemble de donnes que celui dfini pour la rgion, vous pouvez omettre le nom de l'ensemble de donnes et simplement crire {category} or {desc}. Quelle que soit la mthode utilise pour dfinir le contenu de votre rgion, les lignes suivantes sont ajoutes votre code HTML : <div spry:region="ds1">{name}{category}</div> <div spry:region="ds2">{ds1::name}{ds1::descheader}</div>
Cration d'une liste de rptition Spry
Haut de la page
Vous pouvez ajouter des listes de rptition pour afficher vos donnes sous la forme d'une liste ordonne, d'une liste non ordonne ( puces) ou d'une liste droulante. 1. Choisissez Insertion > Spry > Liste de rptition Spry. Vous pouvez galement cliquer sur le bouton Liste de rptition Spry de la catgorie Spry du panneau Insertion. 2. Choisissez la balise conteneur utiliser : UL, OL, DL ou SELECT. Les autres options varient en fonction du conteneur choisi. Si vous choisissez SELECT, vous devez complter les zones suivantes : Colonne affiche : Il s'agit de ce que les utilisateurs voient lorsqu'ils affichent la page dans leur navigateur. Colonne de valeurs : Il s'agit de la valeur envoye au serveur d'arrire-plan. Par exemple, vous pouvez crer une liste de villes et montrer Bordeaux et Boulogne aux utilisateurs, tout en envoyant BO ou BO au serveur. Vous pouvez galement utiliser SELECT comme outil de navigation et montrer des noms de produit tels que Adobe Dreamweaver et Adobe Acrobat aux utilisateurs, tout en envoyant des URL telles que support/products/dreamweaver.html et support/products/acrobat.html au serveur. 3. Choisissez votre ensemble de donnes Spry dans le menu. 4. Choisissez les colonnes afficher. 5. Cliquez sur OK pour afficher une liste de rptition sur votre page. En mode Code, vous pouvez voir que des balises de slection <ul>, <ol>, <dl> ou FORM ont t insres dans le fichier. Remarque : Si vous tentez d'insrer une liste de rptition sans avoir cr de rgion, Dreamweaver vous invite en ajouter une avant d'insrer le tableau. Tous les objets de donnes Spry doivent se trouver l'intrieur de rgions.
346
Modification du contenu d'un document bas sur un modle

A propos de la modification du contenu d'un document bas sur un modle Modification des proprits d'un modle Ajout, suppression et modification de l'ordre des entres dans une rgion rpte
A propos de la modification du contenu d'un document bas sur un modle
Haut de la page
Les modles de Dreamweaver spcifient les rgions qui sont verrouilles (non modifiables) et les autres qui sont modifiables dans les documents bass sur ces modles. Sur les pages bases sur un modle, les utilisateurs peuvent modifier uniquement le contenu des rgions modifiables. Vous pouvez facilement identifier et slectionner les rgions modifiables afin d'en modifier le contenu. Les utilisateurs du modle ne peuvent pas modifier le contenu des rgions verrouilles. Remarque : Si vous essayez de modifier une rgion verrouille dans un document bas sur un modle lorsque la surbrillance est dsactive, le pointeur de la souris se transforme pour indiquer que vous ne pouvez pas cliquer dans une rgion verrouille. Les utilisateurs du modle peuvent galement modifier les proprits et les entres d'une rgion rpte dans les documents bass sur ce modle.
Modification des proprits d'un modle
Haut de la page
Lorsque l'auteur cre des paramtres dans un modle, les documents bass sur ce modle hritent automatiquement des paramtres et de leur valeur initiale. L'utilisateur du modle peut mettre jour les attributs de balise modifiables et d'autres paramtres du modle (ceux d'une rgion facultative, par exemple).
Modification d'un attribut de balise modifiable

1. Ouvrez le document bas sur un modle. 2. Choisissez Modifier > Proprits du modle. La bote de dialogue Proprits du modle s'ouvre et affiche la liste des proprits disponibles. Elle indique les rgions facultatives et les attributs de balise modifiables. 3. Slectionnez la proprit dans la liste Nom. L'tiquette et la valeur de la proprit slectionne s'affichent dans la partie infrieure de la bote de dialogue. 4. Si vous souhaitez modifier la valeur de la proprit dans le document courant, saisissez une autre valeur dans le champ situ droite de l'tiquette de la proprit. Remarque : Le nom du champ et les valeurs modifiables sont dfinis dans le modle. Les attributs non rpertoris dans la liste Nom ne peuvent pas tre modifis dans le document bas sur un modle. 5. Slectionnez Autoriser les modles imbriqus pour contrler ceci si vous souhaitez que la proprit modifiable soit transmise aux documents bass sur le modle imbriqu.
Modification des paramtres de modle des rgions facultatives

1. Ouvrez le document bas sur un modle. 2. Choisissez Modifier > Proprits du modle. La bote de dialogue Proprits du modle s'ouvre et affiche la liste des proprits disponibles. Elle indique les rgions facultatives et les attributs de balise modifiables. 3. Slectionnez une proprit dans la liste Nom. L'tiquette et la valeur de la proprit slectionne s'affichent dans la bote de dialogue. 4. Slectionnez Afficher si vous souhaitez que la rgion facultative apparaisse dans le document, ou bien dslectionnez cette option si vous souhaitez qu'elle soit masque. Remarque : Le nom du champ et la valeur par dfaut sont dfinis dans le modle. 5. Slectionnez Autoriser les modles imbriqus pour contrler ceci si vous souhaitez que la proprit modifiable soit transmise aux documents bass sur le modle imbriqu.
Haut de la page
347
Ajout, suppression et modification de l'ordre des entres dans une rgion rpte
Vous pouvez ajouter ou supprimer des entres ou bien modifier l'ordre des entres dans une rgion rpte. Lorsque vous ajoutez une entre de rgion rpte, l'ensemble de la rgion rpte est reproduit dans le document. La rgion rpte doit contenir une rgion modifiable dans le modle original pour que l'utilisateur puisse en modifier le contenu.
Ajout, suppression ou modification de l'ordre dans une rgion rpte

1. Ouvrez le document bas sur un modle. 2. Placez le point d'insertion sur la rgion rpte pour la slectionner. 3. Effectuez l'une des oprations suivantes : Cliquez sur le bouton plus (+) pour ajouter une entre de rgion rpte sous l'entre slectionne. Cliquez sur le bouton moins () pour supprimer l'entre de rgion rpte slectionne. Cliquez sur le bouton Flche bas pour dplacer l'entre slectionne d'un niveau vers le bas. Cliquez sur le bouton Flche haut pour dplacer l'entre slectionne d'un niveau vers le haut. Remarque : Vous pouvez galement choisir Modifier > Modles, puis activer l'une des options d'entre rpte prs du bas du menu contextuel. Celui-ci permet d'insrer une nouvelle entre de rgion rpte et de modifier l'emplacement de l'entre slectionne.
Couper, copier et supprimer des entres

1. Ouvrez le document bas sur un modle. 2. Placez le point d'insertion sur la rgion rpte pour la slectionner. 3. Effectuez l'une des oprations suivantes : Pour couper une entre rpte, choisissez Edition > Entres rptes > Couper l'entre rpte. Pour copier une entre rpte, choisissez Edition > Entres rptes > Couper l'entre rpte. Pour supprimer une entre rpte, choisissez Edition > Entres rptes > Supprimer l'entre rpte. Pour coller une entre rpte, choisissez Edition > Coller. Remarque : Lorsque vous collez une entre de rgion rpte, celle-ci s'insre dans le document sans craser d'entre existante. Voir aussi Cration d'une page base sur un modle existant
348
Importation de documents Microsoft Office (Windows uniquement)

Vous pouvez insrer le contenu d'un document Microsoft Word ou Excel dans une page Web nouvelle ou existante. Lorsque vous importez un document Word ou Excel, Dreamweaver reoit le code HTML converti et l'insre dans votre page Web. La taille du fichier, aprs rception du code HTML converti par Dreamweaver, doit tre infrieure 300 Ko. Au lieu d'importer tout le contenu d'un fichier, vous pouvez galement coller une partie du document Word et protger son formatage. Remarque : Si vous utilisez Microsoft Office 97, il n'est pas possible d'importer le contenu d'un document Word ou Excel. Vous devez insrer un lien vers le document. 1. Ouvrez la page Web dans laquelle vous souhaitez copier le document Word ou Excel. 2. En mode Cration, procdez de l'une des manires suivantes pour slectionner le fichier : Dplacez le fichier de son emplacement actuel vers la page o le contenu doit s'afficher. Choisissez Fichier > Importer > Document Word ou Fichier > Importer > Document Excel. 3. Dans la bote de dialogue Insrer un document, recherchez le fichier ajouter, slectionnez une option de formatage dans le menu Mise en forme situ dans le bas de la bote de dialogue, puis cliquez sur Ouvrir. Texte seul Permet d'insrer du texte non format. Si le texte d'origine est mis en forme, tout le formatage est supprim. Texte structur Permet d'insrer du texte en conservant sa structure, mais sans le formatage de base. Par exemple, vous pouvez coller un texte et conserver la structure des paragraphes, des listes et des tableaux, mais pas les mises en gras, italiques et autres formatages. Texte structur avec formatage de base Permet d'insrer du texte structur et du texte HTML avec une mise en forme simple (tel que des paragraphes et des tableaux, ainsi que du texte mis en forme avec les balisesb, i, u, strong, em, hr, abbr ou acronym tag). Texte structur avec formatage complet Permet d'insrer du texte en conservant toute sa structure, son formatage HTML et ses styles CSS. Nettoyage des espaces inter-paragraphes de Word Permet d'liminer les espaces superflus entre les paragraphes lorsque vous collez le texte alors que l'option Texte structur ou Mise en forme de base est slectionne. Le contenu du document Word ou Excel s'affiche dans votre page.
349
Importation de donnes tabulaires

Vous pouvez importer des donnes tabulaires dans un document en enregistrant d'abord ces fichiers (tels que des fichiers Microsoft Excel ou d'une base de donnes) sous forme de fichiers texte dlimits. Vous pouvez importer et mettre en forme des donnes tabulaires, ainsi qu'importer du text partir de documents HTML Microsoft Word. Vous pouvez galement ajouter du texte provenant d'un document Microsoft Excel dans un document Dreamweaver en important le contenu du fichier Excel dans une page Web. 1. Choisissez Fichier > Importer > Importer les donnes tabulaires ou Insertion > Objets du tableau > Importer les donnes tabulaires. 2. Recherchez le fichier souhait ou entrez son nom dans la zone de texte. 3. Slectionnez le dlimiteur utilis lors de l'enregistrement du fichier en tant que texte dlimit. Les options sont Tab, Virgule, Point-virgule, Deux points et Autre. Si vous slectionnez Autre, un champ vierge s'affiche ct de l'option. Entrez le caractre utilis comme dlimiteur. 4. Utilisez les options restantes pour formater ou dfinir le tableau dans lequel importer les donnes, puis cliquez sur OK. Voir aussi Ouverture et modification de documents existants
350
Importation de balises personnalises dans Dreamweaver

A propos de l'importation de balises personnalises dans Dreamweaver Importation de balises partir de fichiers XML Importation de balises ASP.NET personnalises Importation de balises JSP partir d'un serveur (web.xml) Importation de balises JRun
A propos de l'importation de balises personnalises dans Dreamweaver
Haut de la page
Une fois importes dans Dreamweaver, les balises personnalises font partie intgrante de l'environnement de cration de pages Web. Par exemple, lorsque vous commencez taper une balise personnalise importe en mode Code, un menu de conseils de code s'affiche avec tous les attributs de balise et vous permet d'en slectionner un.
Importation de balises partir de fichiers XML

Vous pouvez importer des balises partir d'un fichier DTD XML (Document Type Definition) ou d'un schma. 1. Ouvrez l'diteur de la bibliothque de balises (Edition > Bibliothques de balises). 2. Cliquez sur le bouton Plus (+), puis choisissez Schma DTD > Importer le fichier DTD ou Schma XML. 3. Entrez le nom ou l'URL du fichier DTD ou schma.
Haut de la page
4. Entrez le prfixe utiliser avec les balises. Remarque : Un prfixe est utilis pour identifier l'appartenance d'une balise dans le code une bibliothque de balises dfinie. Certaines bibliothques n'utilisent pas de prfixes. 5. Cliquez sur OK.
Importation de balises ASP.NET personnalises

Vous pouvez importer des balises ASP.NET personnalises dans Dreamweaver.
Haut de la page
Vrifiez tout d'abord que la balise personnalise est installe sur le serveur d'valuation dfini dans la bote de dialogue Dfinition du site (voir Configuration d'un serveur d'valuation). Les balises compiles (fichiers DLL) doivent tre places dans le dossier /bin de la racine du site. Les balises non compiles (fichiers ASCX) peuvent rsider dans un rpertoire ou un sous-rpertoire virtuel sur le serveur. Pour plus d'informations, consultez la documentation Microsoft ASP.NET. 1. Ouvrez une page ASP.NET dans Dreamweaver. 2. Ouvrez l'diteur de la bibliothque de balises (Edition > Bibliothques de balises). 3. Cliquez sur le bouton Plus (+), dfinissez les options suivantes, puis cliquez sur OK : Pour importer toutes les balises ASP.NET personnalises partir du serveur d'application, choisissez ASP.NET > Importer toutes les balises personnalises ASP.NET. Pour n'importer que certaines balises personnalises partir du serveur d'application, choisissez ASP.NET > Importer les balises personnalises ASP.NET slectionnes. Tout en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfonce, cliquez sur les balises dans la liste.
Importation de balises JSP partir d'un serveur (web.xml)

1. Ouvrez une page JSP dans Dreamweaver. 2. Ouvrez l'diteur de la bibliothque de balises (Edition > Bibliothques de balises).
Haut de la page
Vous pouvez importer une bibliothque de balises JSP dans Dreamweaver partir de divers types de fichiers ou d'un serveur JSP.
3. Cliquez sur le bouton Plus (+), puis choisissez JSP > Importer depuis le fichier (*.tld, *.jar, *.zip) ou JSP > Importer depuis le serveur (web.xml). 4. Cliquez sur le bouton Parcourir ou entrez un nom de fichier pour spcifier le fichier contenant la bibliothque de balises. 5. Entrez un URI pour identifier la bibliothque de balises. L'URI (Uniform Resource Identifier) dsigne souvent l'URL de la socit charge de la maintenance de la bibliothque de balises. L'URL
351
n'est pas utilise pour afficher le site Web de la socit, mais uniquement titre d'identification de la bibliothque de balises. 6. (Facultatif) Entrez le prfixe utiliser avec les balises. Certaines bibliothques de balises emploient un prfixe pour identifier l'appartenance d'une balise dans le code une bibliothque de balises dfinie. 7. Cliquez sur OK.
Importation de balises JRun

Si vous travaillez avec Adobe JRun, vous pouvez importer vos balises JRun dans Dreamweaver. 1. Ouvrez une page JSP dans Dreamweaver. 2. Ouvrez l'diteur de la bibliothque de balises (Edition > Bibliothques de balises). 3. Cliquez sur le bouton Plus (+), puis choisissez JSP > Importer les balises de serveur JRUN depuis le dossier. 4. Spcifiez le nom du dossier contenant les balises de serveur JRUN. 5. Entrez un URI pour identifier la bibliothque de balises.
Haut de la page
L'URI (Uniform Resource Identifier) dsigne souvent l'URL de la socit charge de la maintenance de la bibliothque de balises. L'URL n'est pas utilise pour afficher le site Web de la socit, mais uniquement titre d'identification de la bibliothque de balises. 6. (Facultatif) Entrez le prfixe utiliser avec les balises. Certaines bibliothques de balises emploient un prfixe pour identifier l'appartenance d'une balise dans le code une bibliothque de balises dfinie. 7. Cliquez sur OK.
352
Insertion de dates
Dreamweaver comporte un objet Date pratique qui insre la date actuelle dans le format de votre choix (avec ou sans heure), ainsi qu'une option pour mettre jour cette date lorsque vous enregistrez le fichier. Remarque : Les dates et heures affiches dans la bote de dialogue Insrer date ne reprsentent pas la date actuelle ni ne refltent les dates/heures visualises par un visiteur lorsqu'il affiche votre site. Elles ne sont qu'un exemple de la manire dont vous souhaitez afficher ces informations. 1. Dans la fentre de document, placez le curseur l o vous dsirez insrer la date. 2. Effectuez l'une des oprations suivantes : Choisissez Insertion > Date. Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Date. 3. Dans la bote de dialogue qui apparat alors, slectionnez un format d'affichage pour le jour de la semaine, pour la date et pour l'heure. 4. Si vous dsirez que cette date soit actualise chaque nouvel enregistrement du document, activez l'option Mettre jour automatiquement lors de l'enregistrement. Si vous prfrez que la date soit insre comme du texte normal et ne soit jamais actualise, dsactivez cette option. 5. Cliquez sur OK pour insrer la date. Si vous avez slectionn Mettre jour automatiquement lors de l'enregistrement, vous pouvez modifier le format de la date aprs l'avoir insre dans le document, en cliquant sur le texte mis en forme et en slectionnant Modifier le format de date dans l'inspecteur Proprits.
353
Insertion de fichiers SWF

A propos des types de fichiers FLA, SWF et FLV Insertion et prvisualisation de fichiers SWF Insertion de documents FlashPaper
A propos des types de fichiers FLA, SWF et FLV
Haut de la page
Avant d'utiliser Dreamweaver pour insrer du contenu cr l'aide d'Adobe Flash, familiarisez-vous aux types de fichiers suivants : Fichier FLA (.fla) Fichier source pour tout projet, cr dans l'outil de cration Flash. Ce type de fichier peut uniquement tre ouvert dans comportement Flash (il ne peut pas l'tre dans Dreamweaver ni dans des navigateurs). Vous pouvez ouvrir le fichier FLA dans Flash, puis le publier sous la forme d'un fichier SWF ou SWT pour l'utiliser dans des navigateurs. Fichier SWF (.swf) Version compile du fichier FLA (.fla), optimise pour l'affichage sur le Web. Ce fichier peut tre lu dans les navigateurs et prvisualis dans Dreamweaver, mais il ne peut pas tre modifi dans Flash. Fichier FLV (.flv) Est un fichier vido qui contient des donnes audio et vido codes, lisibles par Flash Player. Par exemple, si vous utilisez un fichier vido QuickTime ou Windows Media, vous devez utiliser un encodeur (tel que Flash Video Encoder ou Sorensen Squeeze) pour convertir le fichier vido en fichier FLV. Pour plus d'informations, consultez le Centre de technologie vido l'adresse www.adobe.com/go/flv_devcenter_fr.
Haut de la page
Insertion et prvisualisation de fichiers SWF
Dreamweaver permet d'ajouter des fichiers SWF vos pages et d'en consulter un aperu dans un document ou un navigateur. Vous pouvez galement dfinir les proprits des fichiers SWF dans l'inspecteur Proprits. Vous trouverez un didacticiel consacr l'ajout de fichiers SWF des pages Web l'adresse www.adobe.com/go/vid0150_fr.
Insertion d'un fichier SWF

1. Dans la fentre de document (mode Cration), placez le point d'insertion l'endroit o vous souhaitez insrer le contenu, puis procdez de l'une des manires suivantes : Dans la catgorie Commun du panneau Insertion, choisissez Mdias puis cliquez sur l'icne SWF Choisissez Insertion > Mdias > SWF. 2. Dans la bote de dialogue qui s'affiche, slectionnez un fichier SWF (.swf). Un espace rserv pour le fichier SWF s'affiche dans la fentre de document. .
Cet espace rserv est entour d'un contour bleu onglet. L'onglet indique le type d'actif (fichier SWF) et l'ID du fichier SWF. Cet onglet comporte galement une icne qui reprsente un il. Il fait office de bascule entre le fichier SWF et les informations de tlchargement que les utilisateurs voient s'ils ne possdent pas la version correcte de Flash Player. 3. Enregistrez le fichier. Dreamweaver vous informe que deux fichiers dpendants, expressInstall.swf et swfobject_modified.js, vont tre enregistrs dans un dossier Scripts de votre site. N'oubliez pas de charger ces fichiers lorsque vous placez le fichier SWF sur votre serveur Web. Les navigateurs ne peuvent afficher correctement le fichier SWF que si vous avez galement charg ces fichiers dpendants. Remarque : Microsoft Internet Information Server (IIS) ne traite pas les balises object imbriques. Pour les pages ASP, Dreamweaver utilise du code object/embed imbriqu au lieu du code object imbriqu lors de l'insertion de fichiers SWF ou FLV.
Modification des informations de tlchargement de Flash Player

Lorsque vous insrez un fichier SWF sur une page, Dreamweaver insre du code qui dtecte si l'utilisateur dispose de la version approprie de
354
Flash Player. Si ce n'est pas le cas, la page affiche du contenu alternatif afin d'inviter l'utilisateur tlcharger la version la plus rcente. Vous pouvez tout moment modifier ce contenu alternatif. Cette procdure s'applique galement aux fichiers FLV. Remarque : Si l'utilisateur ne dispose pas de la version requise mais bien de Flash Player en version 6.0 r65 ou une version ultrieure, le navigateur affiche un programme d'installation express de Flash Player. Si l'utilisateur refuse l'installation express, la page affiche le contenu alternatif. 1. Dans la fentre de document, en mode Cration, slectionnez le fichier SWF ou FLV. 2. Cliquez sur l'icne reprsentant un il dans l'onglet du fichier SWF ou FLV. Vous pouvez galement utiliser le raccourci CTRL + ] pour activer l'affichage du contenu alternatif. Pour rtablir l'affichage du fichier SWF/FLV, appuyez sur CTRL + [ jusqu' ce que l'intgralit du contenu alternatif soit slectionne. Ensuite, appuyez nouveau sur CTRL + [. 3. Modifiez le contenu comme vous le feriez pour tout autre contenu dans Dreamweaver. Remarque : Il est impossible d'ajouter des fichiers SWF ou FLV en tant que contenu alternatif. 4. Cliquez nouveau sur l'icne reprsentant un il pour revenir l'affichage du fichier SWF (ou FLV).
Prvisualisation de fichiers SWF dans la fentre de document

1. Dans la fentre de document, cliquez sur l'espace rserv du fichier SWF afin de slectionner son contenu. 2. Dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur le bouton Lire. Cliquez sur le bouton Arrt pour arrter la prvisualisation. Vous pouvez galement prvisualiser le fichier SWF dans un navigateur en appuyant sur la touche F12. Pour prvisualiser tous le fichiers SWF dans une page, appuyez sur les touches Ctrl+Alt+Maj+P (Windows) ou Maj+Option+Commande+P (Macintosh). Tous les fichiers SWF sont placs en mode Lecture.
Dfinition des proprits d'un fichier SWF

Vous pouvez dfinir les proprits des fichiers SWF dans l'inspecteur Proprits. Les proprits s'appliquent galement aux animations Shockwave. Slectionnez un fichier SWF ou une animation Shockwave, puis dfinissez ses options dans l'inspecteur Proprits (Fentre > Proprits). Pour afficher toutes les proprits, cliquez sur la flche de dveloppement dans le coin infrieur droit de l'inspecteur Proprits. ID Dfinit un ID unique pour le fichier SWF. Entrez un ID dans la zone de texte sans titre, l'extrme gauche de l'inspecteur Proprits. Depuis Dreamweaver CS4, un ID unique est requis. L et H Spcifient la largeur et la hauteur de l'animation, en pixels. Fichier Spcifie le chemin d'accs au fichier SWF ou Shockwave. Cliquez sur l'icne de dossier pour rechercher un fichier ou entrez le chemin d'accs. Src Dfinit le chemin d'accs au document source (le fichier FLA), lorsque Dreamweaver et Flash sont tous deux installs sur votre ordinateur. Pour modifier un fichier SWF, mettez jour le document source de l'animation. Ar-pl Spcifie une couleur d'arrire-plan pour la zone d'animation. Cette couleur apparat galement lorsque l'animation n'est pas en lecture (au cours du chargement et la fin de la lecture). Modifier Dmarre Flash pour mettre jour un fichier FLA (fichier cr dans le programme de cration Flash). Cette option est dsactive si Flash n'est pas install sur votre ordinateur. Classe Permet d'appliquer une classe CSS l'animation. Boucle Active la lecture en boucle de l'animation. Si l'option Boucle n'est pas active, l'animation est lue une fois puis s'arrte. Lecture automatique Lit automatiquement l'animation lors du chargement de la page. Espace V. et Espace H. Dfinit le nombre de pixels d'espace blanc au-dessus, au-dessous et de chaque ct de l'animation. Qualit Contrle l'anticrnelage pendant la lecture de l'animation. Des valeurs leves amliorent l'apparence des animations. Toutefois, avec des valeurs leves, le rendu correct des animations l'cran exige un processeur plus rapide. Un paramtre faible amliore la vitesse au dtriment de l'apparence, alors qu'un paramtre lev favorise l'aspect par rapport la vitesse. L'option Basse automatiquement amliore la vitesse au dpart, mais galement l'apparence lorsque cela est possible. L'option Eleve automatiquement amliore de faon identique les deux qualits au dpart, mais sacrifie ensuite l'apparence pour la vitesse si ncessaire. Echelle Dtermine comment l'animation s'adapte aux dimensions dfinies dans les zones de largeur et de hauteur. Le paramtre par dfaut affiche l'animation entire. Alignement Dtermine l'alignement de l'animation sur la page. Wmode Dfinit le paramtre Wmode pour le fichier SWF de manire viter tout conflit avec des lments DHTML, comme des widgets Spry. La valeur par dfaut est Opaque, qui permet aux lments DHTML de s'affiche au-dessus des fichiers SWF dans un navigateur. Si le fichier SWF comprend des sections transparentes et si vous voulez que les lments DHTML apparaissent derrire celles-ci, activez l'option Transparent. Activez l'option Fentre pour supprimer le paramtre Wmode du code et permettre au fichier SWF de s'afficher au-dessus d'autres lments DHTML. Lire Lit l'animation dans la fentre de document. Paramtres Ouvre une bote de dialogue dans laquelle vous pouvez indiquer des paramtres supplmentaires transmettre l'animation. L'animation doit avoir t conue pour recevoir ces paramtres supplmentaires.
Haut de la page
Insertion de documents FlashPaper

355
La fonctionnalit Insrer FlashPaper a t abandonne depuis Dreamweaver CS5. Voir aussi Fichiers SWF et calques DHTML Didacticiel consacr l'utilisation de Flash
356
Gestion des bibliothques de balises

A propos des bibliothques de balises de Dreamweaver Ouverture et fermeture de l'diteur de la bibliothque de balises Ajout de bibliothques, de balises et d'attributs Modification de bibliothques, de balises et d'attributs Suppression de bibliothques, de balises et d'attributs
A propos des bibliothques de balises de Dreamweaver
Haut de la page
Une bibliothque de balises de Dreamweaver est une collection de balises d'un type donn accompagne d'informations sur le formatage des balises par Dreamweaver. Les bibliothques de balises fournissent des informations propos des balises utilises par Dreamweaver pour les conseils de code, les vrifications de navigateurs cibles, le slecteur de balises et autres options de codage. L'diteur de la bibliothque de balises vous permet d'ajouter et de supprimer des bibliothques de balises, des balises, des attributs et des valeurs d'attribut, de dfinir les proprits d'une bibliothque de balises, y compris le format (pour faciliter l'identification dans le code), ainsi que de modifier les balises et les attributs.
Ouverture et fermeture de l'diteur de la bibliothque de balises

1. Choisissez Edition > Bibliothques de balises pour ouvrir l'diteur de la bibliothque de balises.
Haut de la page
La bote de dialogue Editeur de la bibliothque de balises s'affiche. Le contenu de cette bote de dialogue varie selon la balise slectionne. 2. Fermez l'diteur de la bibliothque de balises en procdant d'une des faons suivantes : Pour enregistrer les modifications, cliquez sur OK. Pour fermer l'diteur sans enregistrer les modifications, cliquez sur Annuler. Remarque : Lorsque vous cliquez sur Annuler, toutes les modifications apportes la bibliothque de balises sont effaces. Si vos modifications incluaient la suppression d'une balise ou d'une bibliothque, celle-ci est restaure.
Ajout de bibliothques, de balises et d'attributs
Haut de la page
L'diteur de la bibliothque de balises permet d'ajouter des bibliothques de balises ou des balises et des attributs aux bibliothques de balises dans Dreamweaver.
Ajout d'une bibliothque de balises

1. Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), cliquez sur le bouton Plus (+) et choisissez Nouvelle bibliothque de balises. 2. Dans la zone de texte Nom de la bibliothque, entrez un nom (par exemple, balises diverses), puis cliquez sur OK.
Ajout de balises une bibliothque de balises

1. Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), cliquez sur le bouton Plus (+) et choisissez Nouvelles balises. 2. Dans le menu droulant Bibliothque de balises, choisissez une bibliothque de balises. 3. Saisissez le nom de la nouvelle balise. Pour ajouter plusieurs balises, sparez leurs noms par une virgule suivie d'un espace (par exemple : cfgraph, cfgraphdata). 4. Si les nouvelles balises ont des balises de fin correspondantes (</...>), slectionnez Avoir des balises de fin correspondantes. 5. Cliquez sur OK.
Ajout d'attributs une balise

1. Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), cliquez sur le bouton Plus (+) et choisissez Nouveaux attributs. 2. Dans le menu droulant Bibliothque de balises, choisissez une bibliothque de balises. 3. Slectionnez une balise dans le menu contextuel Balise. 4. Saisissez le nom du nouvel attribut. Pour ajouter plusieurs attributs, sparez leurs noms par une virgule suivie d'un espace (par exemple : width, height).
357
5. Cliquez sur OK.
Modification de bibliothques, de balises et d'attributs
Haut de la page
L'diteur de la bibliothque de balises vous permet de dfinir les proprits d'une bibliothque de balises ou modifier les balises et les attributs d'une bibliothque.
Dfinition des proprits d'une bibliothque de balises

1. Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), slectionnez une bibliothque de balises (et non une balise) dans la liste des balises. Remarque : Les proprits des bibliothques de balises s'affichent uniquement quand une bibliothque de balises est slectionne. Les bibliothques de balises sont reprsentes par les dossiers de niveau suprieur dans la liste des balises. Par exemple, le dossier des balises HTML reprsente une bibliothque de balises, et dans ce dossier, le sous-dossier abbr reprsente une balise. 2. Dans la liste Utilis dans, slectionnez tous les types de document qui seront utiliss par la bibliothque de balises. Les types de documents slectionns ici sont ceux qui fourniront les conseils de code pour la bibliothque de balises spcifie. Par exemple, si l'option HTML n'est pas slectionne pour une bibliothque de balises, les conseils de code de cette balise ne s'affichent pas dans les fichiers HTML. 3. (Facultatif) Entrez le prfixe des balises dans la zone de texte Prfixe de balise. Remarque : Un prfixe est utilis pour identifier l'appartenance d'une balise dans le code une bibliothque de balises dfinie. Certaines bibliothques n'utilisent pas de prfixes. 4. Cliquez sur OK.
Modification d'une balise dans une bibliothque

1. Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), dveloppez une bibliothque de balises dans la liste Balises et slectionnez une balise. 2. Dfinissez les options de format de balise suivantes : Sauts de ligne Dtermine l'endroit o Dreamweaver insre les sauts de ligne pour une balise. Contenu Dtermine comment Dreamweaver insre le contenu d'une balise, savoir si le saut de ligne et les rgles de formatage s'appliquent au contenu. Casse Indique la casse d'une balise spcifique. Choisissez Par dfaut, Minuscules, Majuscules ou Minuscules/majuscules. Si vous choisissez cette dernire option, la bote de dialogue Nom de balise en minuscules/majuscules s'affiche. Saisissez la balise en utilisant que Dreamweaver doit utiliser lors de l'insertion de cette dernire (par exemple, getProperty), puis cliquez sur OK. Par dfaut Dfinit la casse par dfaut de toutes les balises. Dans la bote de dialogue Casse de balise par dfaut qui s'affiche, choisissez <MAJUSCULES> ou <minuscules>, puis cliquez sur OK. Il est prfrable de dfinir les minuscules comme casse par dfaut, conformment aux normes XML et XHTML.
Modification de l'attribut d'une balise

1. Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), ouvrez une bibliothque de balises dans la zone Balises, dveloppez une balise et slectionnez un attribut. 2. Dans le menu droulant Casse d'attribut, choisissez Par dfaut, Minuscules, Majuscules ou Minuscules/majuscules. Si vous choisissez cette dernire option, la bote de dialogue Nom d'attribut en minuscules/majuscules s'affiche. Saisissez l'attribut en utilisant la casse dont doit se servir Dreamweaver lors de l'insertion de cet attribut (par exemple, onClick), puis cliquez sur OK. Cliquez sur le lien Dfaut pour dfinir la casse par dfaut pour tous les noms d'attributs. 3. Dans le menu droulant Type d'attribut, slectionnez le type de l'attribut. Si vous choisissez Enumr, entrez toutes les valeurs d'attribut autorises dans la zone de texte Valeurs. Sparer les valeurs par des virgules, sans insrer d'espaces. Par exemple, les valeurs numres de l'attribut showborder de la balise cfchart sont dfinies comme yes,no.
Suppression de bibliothques, de balises et d'attributs
Haut de la page
1. Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), slectionnez une bibliothque de balises, une balise ou un attribut dans la bote de dialogue Balises. 2. Cliquez sur le bouton Moins (-). 3. Cliquez sur OK pour confirmer la suppression dfinitive. L'lment disparat de la bote de dialogue Balises. 4. Cliquez sur OK pour fermer l'diteur de la bibliothque de balises et terminer la procdure de suppression.
358
Voir aussi
359
Modification des combinaisons de polices

Modification des combinaisons de polices Ajout d'une nouvelle combinaison la liste des polices Pour dfinir la combinaison de polices qui apparat dans l'inspecteur Proprits et dans Format > Police, utilisez la commande Modifier la liste des polices. Les combinaisons de polices de caractres dterminent la faon dont le texte des pages Web est affich par les navigateurs. Ces derniers utilisent, au sein de la combinaison de polices choisie, la premire police installe sur l'ordinateur de l'utilisateur. Si aucune des polices de cette combinaison n'est installe, le navigateur affiche le texte avec la police par dfaut indique dans ses prfrences.
Modification des combinaisons de polices

1. Choisissez Format > Police > Modifier la liste des polices. 2. Choisissez la combinaison de polices dans la liste qui apparat en haut de la bote de dialogue.
Haut de la page
Les polices de la combinaison slectionne apparaissent dans la liste Polices choisies, dans le coin infrieur gauche de la bote de dialogue. Une liste de toutes les polices disponibles installes sur votre systme se trouve sa droite. 3. Effectuez l'une des oprations suivantes : Pour ajouter ou retirer des polices d'une combinaison, cliquez selon le cas sur l'un des boutons << ou >> qui se trouvent entre les listes Polices choisies et Polices disponibles. Pour ajouter ou supprimer une combinaison de polices, cliquez selon le cas sur l'un des boutons plus (+) ou moins (-) qui se trouvent dans la partie suprieure de la bote de dialogue. Pour ajouter une police qui n'est pas installe sur votre ordinateur, tapez son nom dans le champ de texte en dessous de la liste Polices disponibles, et cliquez sur le bouton<< pour ajouter cette police la combinaison courante. Il peut tre utile d'ajouter une police qui n'est pas installe sur votre systme, par exemple pour indiquer une police spcifique Windows lorsque vous travaillez sur un Macintosh. Pour dplacer la combinaison de polices au sein de la liste, cliquez sur les boutons flchs en haut de la bote de dialogue.
Ajout d'une nouvelle combinaison la liste des polices

1. Choisissez Format > Police > Modifier la liste des polices.
Haut de la page
2. Slectionnez une police dans la liste Polices disponibles, et cliquez sur le bouton << pour l'insrer dans la liste Polices choisies. 3. Rptez l'tape 2 pour chaque police ncessaire dans la combinaison. Pour ajouter une police qui n'est pas installe sur votre ordinateur, tapez son nom dans le champ de texte en dessous de la liste Polices disponibles, et cliquez sur le bouton<< pour ajouter cette police la combinaison courante. Il peut tre utile d'ajouter une police qui n'est pas installe sur votre systme, par exemple pour indiquer une police spcifique Windows lorsque vous travaillez sur un Macintosh. 4. Lorsque vous avez fini de choisir des polices, slectionnez une famille de polices gnrique dans la liste Polices disponibles et cliquez sur le bouton << pour l'insrer dans la liste Polices choisies. Les familles gnriques de polices sont les suivantes : cursive, fantaisie, monospace (espacement non proportionnel), sans-serif (espacement proportionnel sans empattement) et serif (espacement proportionnel avec empattement). Si aucune des polices de la liste Polices disponibles n'est disponible sur l'ordinateur de l'utilisateur, le texte apparat dans la police par dfaut associe la famille de polices gnrique. Par exemple, avec la plupart des systmes d'exploitation, la police non proportionnelle (monospace) par dfaut est Courier.
360
Dfinition des proprits de titre et de codage d'une page

Les options Titre/codage de la bote de dialogue Proprits de la page permettent de dfinir le type de codage de document spcifique au langage utilis pour crer vos pages Web, ainsi que le formulaire de normalisation Unicode utiliser avec ce type de codage. 1. Choisissez Modifier > Proprits de la page ou cliquez sur le bouton Proprits de la page de l'inspecteur Proprits. 2. Slectionnez la catgorie Titre/codage et dfinissez les options. Titre Spcifie le titre de la page, qui s'affiche dans la barre de titre de la fentre de document et dans la plupart des fentres du navigateur. Type de document (DTD) Spcifie une dfinition de type de document. Par exemple, vous pouvez rendre un document HTML compatible XHTML en slectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu droulant. Codage Prcise le codage utilis pour les caractres du document. Si vous slectionnez Unicode (UTF 8) en tant que codage de document, le codage d'entit est superflu dans la mesure o UTF 8 permet de reprsenter de faon fiable tous les caractres. Si vous slectionnez un autre codage de document, le codage d'entit peut tre ncessaire pour reprsenter certains caractres. Pour plus d'informations sur les entits de caractres, voir www.w3.org/TR/REChtml40/sgml/entities.html. Recharger Convertit le document existant ou de l'ouvrir de nouveau avec le nouveau codage. Formulaire de normalisation Unicode N'est active que si vous slectionnez UTF 8 en tant que code par dfaut. Il existe quatre Formulaires de normalisation Unicode. Le plus important est le Formulaire de normalisation Unicode C car il est le plus utilis dans le Modle de caractres li au World Wide Web, mais Adobe fournit galement les trois autres Formulaires de normalisation Unicode. Certains caractres Unicode semblent visuellement similaires mais peuvent tre stocks de diffrentes manires dans le document. Par exemple, (e trma) peut tre reprsent sous la forme d'un seul caractre, e trma ou de deux caractres, e Latin ordinaire + trma . Un caractre Unicode de combinaison est un caractre associ au caractre prcdent, ce qui fait apparatre le trma au-dessus du e Latin. Les deux formes donnent la mme typographie visuelle, alors que chacune est enregistre diffremment dans le fichier. La normalisation est le processus consistant s'assurer que tous les caractres pouvant tre enregistrs sous diffrentes formes le sont tous sous la mme forme. C'est--dire que tous les caractres d'un document sont enregistrs sous forme de e trma unique ou de e + trma de combinaison , mais pas sous les deux formes dans un mme document. Pour plus d'informations sur la Normalisation Unicode et les formulaires spcifiques pouvant tre utiliss, consultez le site Web Unicode www.unicode.org/reports/tr15. Inclure une signature Unicode (BOM) Inclut une marque d'ordre d'octet (BOM, byte order mark) dans le document. Il s'agit d'une marque constitue de 2 4 octets placs au dbut d'un fichier texte identifiant un fichier comme tant au format Unicode et, dans ce cas, l'ordre des octets suivants. Le code UTF 8 ne prsentant pas d'ordre octet, l'ajout d'une marque BOM UTF 8 est facultatif. Dans le cas de UTF 16 et UTF 32, cette marque est obligatoire.
361
Vrification de l'orthographe d'une page Web

La commande Orthographe permet de vrifier l'orthographe du document actif. Le document doit tre une page Web (par exemple une page HTML, ColdFusion ou PHP). La commande Orthographe ne fonctionne pas dans les fichiers texte ou XML. En outre, elle ignore les balises HTML et les valeurs d'attributs. Remarque : Dreamweaver peut uniquement vrifier l'orthographe du fichier actuellement ouvert dans la fentre de document. Il ne peut pas vrifier l'orthographe de tous les fichiers d'un site en mme temps. Par dfaut, le correcteur orthographique utilise le dictionnaire Anglais US. Pour changer de dictionnaire, choisissez Edition > Prfrences > Gnral (Windows) ou Dreamweaver > Prfrences > Gnral (Macintosh), puis choisissez le dictionnaire que vous souhaitez utiliser dans le menu droulant Dictionnaire du correcteur d'orthographe. 1. Choisissez Commandes > Orthographe ou appuyez sur les touches Maj+F7. Lorsque Dreamweaver ne reconnat pas un mot, la bote de dialogue Vrifier l'orthographe s'affiche. 2. Slectionnez l'option correspondant au traitement que vous souhaitez appliquer l'occurrence. Ajouter Ajoute le mot non reconnu votre dictionnaire personnel. Ignorer Ignore cette occurrence du mot non reconnu. 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 slectionn dans la liste Suggestions. Tout ignorer Ignore toutes les occurrences du mot non reconnu. Tout remplacer Remplace toutes les occurrences du mot non reconnu. Remarque : Dreamweaver ne permet pas de supprimer les entres qui ont t ajoutes aux dictionnaires personnels.
362
Utilisation de mise en forme HTML

Mise en forme des paragraphes Modification de la couleur du texte Alignement du texte Mise en retrait du texte Application de styles de police Mme si CSS est la mthode de mise en forme de texte privilgie, Dreamweaver permet d'employer du code HTML cette fin.
Mise en forme des paragraphes
Haut de la page
Utilisez le menu Format de l'inspecteur Proprits HTML ou le sous-menu Format > Format de paragraphe pour appliquer des balises standard de paragraphe et d'en-tte. 1. Placez le point d'insertion dans le paragraphe, ou slectionnez une partie du texte du paragraphe. 2. Choisissez Texte > Format de paragraphe ou le menu Format de l'inspecteur Proprits, puis slectionnez une option : Choisissez un format de paragraphe (par exemple, En-tte 1, En-tte 2, Texte pr-format, etc.). La balise HTML associe au style choisi (par exemple, h1 pour En-tte 1, h2 pour En-tte 2, pre pour Texte pr-format, etc.) est applique tout le paragraphe. Choisissez Aucun pour supprimer un format de paragraphe. Lorsque vous appliquez une balise d'en-tte un paragraphe, Dreamweaver insre automatiquement la ligne de texte suivante comme un paragraphe. Pour modifier ce paramtre, choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh), puis assurez-vous que l'option Passer en paragraphe normal aprs le titre est dsactive dans les Options d'dition de la catgorie Gnral.
Modification de la couleur du texte

Vous pouvez modifier la couleur par dfaut de tout le texte d'une page, ou la couleur du texte slectionn sur la page.
Haut de la page
Dfinition des couleurs par dfaut du texte sur une page

Choisissez Modifier > Proprits de la page > Apparence (HTML) ou Liens (HTML), puis choisissez la couleur pour les options Couleur du texte, Couleur du lien, Liens visits et Liens actifs. Remarque : La couleur du lien actif est la couleur que prend un lien lorsque l'utilisateur clique dessus. Il est possible que certains navigateurs Web n'utilisent pas la couleur que vous avez spcifie.
Modification de la couleur du texte slectionn

Choisissez Format > Couleur, slectionnez une couleur dans le slecteur systme, puis cliquez sur OK.
Haut de la page
Alignement du texte
Vous pouvez aligner du texte l'aide de code HTML en utilisant le menu Format > Aligner. Vous pouvez centrer un lment sur la page l'aide de la commande Format > Aligner > Centre.
Alignement de text sur une page

1. Slectionnez le texte aligner ou insrez le pointeur au dbut du texte. 2. Choisissez Format > Aligner, puis slectionnez une commande d'alignement.
Centrage des lments de page

1. Slectionnez l'lment (image, plug-in, tableau ou tout autre lment de la page) que vous dsirez aligner au centre. 2. Choisissez Format > 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-tte ou d'un paragraphe.
Mise en retrait du texte

363
Haut de la page
La commande Retrait applique la balise HTML blockquote un paragraphe de texte, ce qui a pour effet de mettre en retrait le texte de chaque ct de la page. 1. Placez le point d'insertion l'emplacement o insrer le retrait. 2. Choisissez Format > Retrait ou Retrait ngatif, ou choisissez Liste > Retrait ou Retrait ngatif dans le menu. Remarque : Un paragraphe accepte plusieurs indentations. Chaque application de cette commande produit un retrait supplmentaire du texte de chaque ct du document.
Application de styles de police
Haut de la page
Vous pouvez utiliser HTML pour appliquer un formatage de texte une seule lettre, des paragraphes entiers du site ou encore des blocs de texte. Le menu Format permet de dfinir ou de modifier les caractristiques de police du texte slectionn. Vous pouvez dfinir le type, le style (par exemple, gras ou italique) et la taille d'une police de caractres. 1. Slectionnez le texte. Si aucun texte n'est slectionn, l'option s'appliquera au texte que vous taperez ensuite. 2. Faites votre choix parmi les options suivantes : Pour modifier la police, choisissez la combinaison dsire dans le menu Format > Police. Choisissez Par dfaut pour supprimer les polices pralablement appliques. Cette option applique la police par dfaut au texte slectionn (en l'occurrence, la police par dfaut du navigateur ou la police affecte cette balise dans une feuille de style CSS). Pour modifier le style de police, slectionnez le style dsir (gras, italique, soulign, etc.) dans le menu Format > Style. Voir aussi Dfinition des proprits de texte dans l'inspecteur Proprits Dfinition des proprits CSS Cration d'une nouvelle rgle CSS
364
Utilisation de barres horizontales

Cration d'une barre horizontale Modification d'une barre horizontale Les barres (lignes) horizontales sont utiles pour organiser les informations. Sur une page, le texte et les objets peuvent tre visuellement spars par une ou plusieurs barres.
Cration d'une barre horizontale

1. Dans la fentre de document, placez le curseur l o vous voulez insrer une barre horizontale. 2. Choisissez Insertion > HTML > Barre horizontale.
Haut de la page
Modification d'une barre horizontale

1. Dans la fentre de document, slectionnez la barre horizontale. 2. Choisissez Fentre > Proprits pour ouvrir l'inspecteur Proprits et modifier les proprits selon vos besoins : La zone de texte ID Permet de dfinir un ID pour la rgle horizontale. L et H Spcifient la largeur et la hauteur de la barre, en pixels ou en pourcentage de la taille de la page.
Haut de la page
Alignement Spcifie l'alignement de la barre (Par dfaut, Gauche, Centre ou Droite). Ce paramtrage ne s'applique que si la largeur de la barre est infrieure celle de la fentre du navigateur. Ombrage Spcifie si la barre est accompagne d'un effet d'ombre porte. Dsactivez cette option pour dessiner la barre en couleur pleine. Classe Permet de joindre une feuille de style ou d'appliquer une classe partir d'une feuille de style dj jointe.
365
Utilisation du panneau Insertion

Masquage ou affichage du panneau Insertion Affichage des boutons d'une catgorie Affichage du menu d'un bouton Insertion d'un objet Contournement de la bote de dialogue d'insertion d'objets et insertion d'un espace rserv vide Modification des prfrences du panneau Insertion Ajout, suppression ou gestion des boutons de la catgorie Favoris du panneau Insertion Insertion d'objets l'aide des boutons de la catgorie Favoris Affichage du panneau Insertion sous la forme d'une barre Insertion horizontale Rtablissement du panneau Insertion Affichage des catgories de la barre Insertion horizontale sous forme d'onglets Affichage des catgories de la barre Insertion horizontale sous forme de menus Les boutons qui composent le panneau Insertion permettent de crer et d'insrer des objets, tels que des tableaux et des images. Ces boutons sont organiss en plusieurs catgories.
Masquage ou affichage du panneau Insertion
Haut de la page
Choisissez Fentre > Insrer. Remarque : Si vous utilisez certaines types de fichiers, tels que XML, JavaScript, Java et CSS, le panneau Insertion et l'option de mode Cration sont griss, car vous ne pouvez pas insrer d'lments dans ces fichiers de code.
Haut de la page
Affichage des boutons d'une catgorie
Slectionnez le nom de la catgorie dans le menu Catgorie. Par exemple, pour afficher les boutons de la catgorie Mise en forme, slectionnez Mise en forme.
Haut de la page
Affichage du menu d'un bouton

Cliquez sur le bouton flch pointant vers le bas situ prs de l'icne du bouton.
Insertion d'un objet
Haut de la page
366
1. Choisissez la catgorie approprie dans le menu Catgorie du panneau Insertion. 2. Effectuez l'une des oprations suivantes : Cliquez sur un bouton d'objet ou faites glisser l'icne du bouton dans la fentre de document. Cliquez sur la flche d'un bouton, puis slectionnez une option dans le menu. Selon le type d'objet que vous slectionnez, une bote de dialogue d'insertion d'objet s'affiche, le cas chant, et vous invite rechercher un fichier ou spcifier les paramtres d'un objet spcifique. En outre, Dreamweaver vous permet d'insrer du code dans le document ou d'ouvrir un diteur de balises ou un panneau vous permettant de spcifier les informations avant l'insertion du code. Dans le cas de certains objets, aucune bote de dialogue ne s'affiche si vous insrez les objets en mode Cration, mais un diteur de balises s'affiche si vous insrez les objets en mode Code. Pour d'autres objets, lorsque vous essayez d'insrer des objets en mode Cration, Dreamweaver passe en mode Code avant de raliser l'insertion. Remarque : Certains objets, tels que les ancres nommes, ne sont pas visibles lorsque vous visualisez la page dans la fentre d'un navigateur. Vous pouvez afficher des icnes en mode Cration indiquant l'emplacement de ces objets invisibles.
Contournement de la bote de dialogue d'insertion d'objets et insertion d'un espace rserv vide
Haut de la page
Appuyez sur la touche Ctrl (Windows) ou Option (Macintosh) tout en cliquant avec la souris sur le bouton correspondant l'objet. Par exemple, pour insrer un espace rserv d'image sans spcifier de fichier d'image, appuyez sur la touche Ctrl ou Option tout en cliquant avec la souris sur le bouton Image. Remarque : Cette procdure ne contourne pas toutes les botes de dialogue d'insertion d'objet. De nombreux objets, y compris les lments PA et les jeux de cadres, n'insrent pas d'espaces rservs ni d'objets avec des valeurs par dfaut.
Haut de la page
Modification des prfrences du panneau Insertion

2. Dans la catgorie Gnral de la bote de dialogue Prfrences, dsactivez l'option Afficher la bote de dialogue lors de l'insertion d'objets pour supprimer les botes de dialogue lors de l'insertion d'objets, tels que des images, des tableaux, des scripts ou des lments d'en-tte. Vous pouvez galement maintenir la touche Ctrl (Windows) ou Option (Macintosh) enfonce tandis que vous crez l'objet. Si cette option est dsactive lorsque vous insrez un objet, celui-ci aura des valeurs par dfaut. Utilisez l'inspecteur Proprits pour modifier les proprits de l'objet aprs l'avoir insr.
Ajout, suppression ou gestion des boutons de la catgorie Favoris du panneau Insertion

1. Slectionnez l'une des catgories du panneau Insertion.
Haut de la page
2. Cliquez l'aide du bouton droit de la souris (Windows) ou tout en maintenant la touche Contrle enfonce (Macintosh) l'endroit o les boutons s'affichent, puis choisissez Personnaliser les favoris. 3. Dans la bote de dialogue Personnaliser les objets favoris, apportez les modifications dsires, puis cliquez sur OK. Pour ajouter un objet, slectionnez-le dans le volet Objets disponibles situ gauche, puis cliquez sur la flche situe entre les deux volets ou cliquez deux fois sur l'objet dans le volet Objets disponibles. Remarque : Les objets doivent tre ajouts un par un. Il est impossible de slectionner un nom de catgorie tel que Commun afin d'ajouter une catgorie entire votre liste de favoris. Pour supprimer un objet ou un sparateur, slectionnez l'objet dans le volet Objets favoris situ droite, puis cliquez sur le bouton Supprimer l'objet slectionn dans la liste Objets favoris, au-dessus du volet. Pour dplacer un objet, slectionnez-le dans le volet Objets favoris situ droite, puis cliquez sur le bouton flch pointant vers le haut ou vers le bas situ au-dessus du volet. Pour ajouter un sparateur sous un objet, slectionnez un objet dans le volet Objets favoris situ droite, puis cliquez sur le bouton Ajouter un sparateur situ en dessous du volet. 4. Si la catgorie Favoris n'est pas la catgorie active, slectionnez-la afin de voir les modifications apportes.
Insertion d'objets l'aide des boutons de la catgorie Favoris
Haut de la page
Slectionnez la catgorie Favoris dans la partie gauche du panneau Insertion, puis cliquez sur le bouton correspondant un objet Favori que vous avez ajout.
Haut de la page
Affichage du panneau Insertion sous la forme d'une barre Insertion horizontale

367
Contrairement aux autres panneaux de Dreamweaver, vous pouvez retirer le panneau Insertion de son emplacement d'ancrage par dfaut et le placer l'horizontale, au-dessus de la fentre de document. Dans ce cas, ce panneau se transforme en barre d'outils, mme s'il est impossible de la masquer et de l'afficher comme vous le feriez pour les autres barres d'outils. 1. Cliquez sur l'onglet du panneau Insertion et tirez-le en haut de la fentre de document.
2. Lorsqu'une ligne bleue horizontale s'affiche sur la largeur de la fentre du document, relche le panneau Insertion. Remarque : La barre Insertion horizontale est galement un lment par dfaut de l'espace de travail Classique. Pour activer l'espace de travail Classique, choisissez Classique dans la section Commutation d'espace de travail de la barre Application.
Haut de la page
Rtablissement du panneau Insertion

2. Placez le panneau Insertion l'endroit dsir puis dposez-le. Une ligne bleue indique o vous pouvez dposer le panneau.
1. Cliquez sur la poigne de la barre Insertion horizontale (sur sa gauche) et tirez la barre l'endroit o vos panneaux sont ancrs.
Affichage des catgories de la barre Insertion horizontale sous forme d'onglets
Haut de la page
Cliquez sur la flche du menu situe prs du nom de la catgorie, l'extrmit gauche de la barre Insertion horizontale, puis choisissez Afficher en tant qu'onglets.
Haut de la page
Affichage des catgories de la barre Insertion horizontale sous forme de menus
Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur un onglet de catgorie de la barre Insertion horizontale, puis choisissez Afficher en tant que menu. Voir aussi Prsentation du panneau Insertion
368
Gestion des fichiers

369
Archivage et extraction de fichiers

A propos du systme d'archivage et d'extraction de fichiers Configuration du systme d'archivage et d'extraction de fichiers Archiver et extraire des fichiers dans un dossier distant Utilisation de WebDAV pour archiver et extraire des fichiers Utilisation de Subversion (svn) pour acqurir et archiver des fichiers
A propos du systme d'archivage et d'extraction de fichiers
Haut de la page
Si vous travaillez en quipe, vous avez la possibilit d'archiver et d'extraire des fichiers sur les serveurs local et distant. Si vous tes la seule personne travailler sur le serveur distant, vous pouvez utiliser les commandes Acqurir et Placer pour transfrer des fichiers sans avoir les archiver ou les extraire. Remarque : Vous pouvez utiliser la fonctionnalit d'acquisition et de placement de fichiers sur un serveur d'valuation, mais le systme d'archivage et d'extraction n'est pas disponible sur ce type de serveur. L'extraction d'un fichier quivaut signaler aux autres utilisateurs que vous travaillez sur ce fichier et qu'ils ne doivent pas le modifier. Lors de l'extraction d'un fichier, le nom de la personne ayant effectu l'opration est affich dans le panneau Fichiers, avec une coche de couleur rouge (si le fichier a t extrait par un autre membre de l'quipe) ou verte (si vous tes la personne avoir extrait le fichier) en regard de son icne. L'archivage d'un fichier quivaut le mettre la disposition des autres membres de l'quipe, qui peuvent l'extraire et le modifier. Lorsque vous archivez un fichier aprs l'avoir modifi, la version locale de ce fichier devient accessible en lecture seule et un cadenas apparat en regard du fichier dans le panneau Fichiers pour vous empcher de le modifier. Dreamweaver ne rend pas les fichiers extraits accessibles en lecture seule sur le serveur distant. Si vous transfrez des fichiers l'aide d'une application autre que Dreamweaver, vous risquez d'craser les fichiers extraits. Toutefois, dans les applications autres que Dreamweaver, le fichier LCK est visible prs du fichier extrait dans la hirarchie de fichiers afin d'viter ce type d'incident.
Configuration du systme d'archivage et d'extraction de fichiers

Pour utiliser le systme d'archivage et d'extraction, vous devez associer votre site local un serveur distant. 1. Choisissez Site > Grer les sites. 2. Slectionnez un site et cliquez sur Modifier. 3. Dans la bote de dialogue Configuration du site, slectionnez la catgorie Serveurs et effectuez l'une des actions suivantes : Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur. Slectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant. 4. Dfinissez les options de base requises, puis cliquez sur le bouton Avanc.
Haut de la page
5. Activez l'option Activer l'extraction de fichier si vous travaillez au sein d'une quipe (ou si vous travaillez seul, mais depuis plusieurs machines). Dslectionnez cette option si vous souhaitez dsactiver l'archivage et l'extraction de fichiers dans votre site Web. Cette option est utile pour informer les autres utilisateurs que vous avez extrait un fichier en vue de le modifier ou pour vous rappeler qu'une version plus rcente d'un fichier est peut-tre ouverte sur une autre machine. Si vous ne voyez pas les options Archiver/Extraire, cela signifie que vous n'avez pas configur le serveur distant. 6. Activez l'option Extraire les fichiers l'ouverture si vous voulez que les fichiers soient automatiquement extraits lorsque vous double-cliquez dessus pour les ouvrir dans le panneau Fichiers. Si vous choisissez Fichier > Ouvrir pour ouvrir un fichier, cela n'extrait pas le fichier, mme si cette option est active. 7. Dfinissez les options restantes : Nom d'extraction Ce nom apparat dans le panneau Fichiers ct des fichiers extraits afin que les membres d'une quipe puissent s'adresser la personne approprie s'ils ont besoin d'un fichier extrait. Remarque : Si vous travaillez seul sur plusieurs machines, utilisez un nom d'extraction diffrent pour chaque machine (par exemple, PierreR-MacDomicile et PierreR-PCBureau) de manire savoir o se trouve la version la plus rcente du fichier si vous oubliez de l'archiver. Adresse lectronique Si vous saisissez une adresse lectronique, lors de l'extraction d'un fichier, votre nom apparat dans le panneau Fichiers en regard du fichier, sous la forme d'un lien (bleu soulign). Si un membre de l'quipe clique sur le lien, son programme de messagerie lectronique par dfaut ouvre un nouveau courriel destination de votre adresse lectronique et comportant un objet qui correspond aux noms du site et du fichier.
370
Archiver et extraire des fichiers dans un dossier distant
Haut de la page
Une fois le systme d'archivage et d'extraction dfini, vous pouvez archiver et extraire des fichiers sur un serveur distant via le panneau Fichiers ou la fentre de document.
Extraction des fichiers l'aide du panneau Fichiers

1. Dans le panneau Fichiers (Fentre > Fichiers), slectionnez les fichiers extraire du serveur distant. Remarque : Vous pouvez slectionner des fichiers dans l'affichage du site local ou distant mais pas dans l'affichage Serveur d'valuation. Une coche de couleur rouge indique qu'un autre membre de l'quipe dispose du fichier extrait. Un symbole reprsentant un cadenas indique que le fichier est en lecture seule (Windows) ou verrouill (Macintosh). 2. Procdez de l'une des manires suivantes pour extraire les fichiers : Cliquez sur le bouton Extraire dans la barre d'outils du panneau Fichiers. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis choisissez Extraire dans le menu contextuel. 3. Dans la bote de dialogue Fichiers dpendants, cliquez sur Oui si vous souhaitez tlcharger les fichiers dpendants associs aux fichiers slectionns ou sur Non si vous ne voulez pas les tlcharger. L'option par dfaut est de ne pas tlcharger les fichiers indpendants. Vous pouvez dfinir cette option en slectionnant Edition > Prfrences > Site. Remarque : D'une manire gnrale, il est conseill de tlcharger les fichiers dpendants lorsque le fichier extrait est un nouveau fichier, mais c'est inutile si les versions les plus rcentes des fichiers dpendants sont dj prsentes sur le disque local. Une coche de couleur verte apparat en regard de l'icne du fichier local pour signaler que vous l'avez extrait. Important : Si vous extrayez le fichier actif, la version ouverte du fichier est crase par la nouvelle version extraite.
Archivage des fichiers l'aide du panneau Fichiers

1. Dans le panneau Fichiers (Fentre > Fichiers), slectionnez les fichiers extraits ou slectionnez de nouveaux fichiers. Remarque : Vous pouvez slectionner des fichiers dans l'affichage du site local ou distant mais pas dans l'affichage Serveur d'valuation. 2. Procdez de l'une des manires suivantes pour archiver les fichiers : Cliquez sur le bouton Archiver dans la barre d'outils du panneau Fichiers. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis choisissez Archiver dans le menu contextuel. 3. Cliquez sur Oui si vous souhaitez envoyer les fichiers dpendants associs aux fichiers slectionns ou sur Non si vous ne voulez pas les envoyer. L'option par dfaut est de ne pas transfrer les fichiers indpendants. Vous pouvez dfinir cette option en slectionnant Edition > Prfrences > Site. Remarque : Il est en gnral conseill de transfrer les fichiers dpendants lorsque vous archivez un nouveau fichier, mais si les versions les plus rcentes des fichiers dpendants figurent dj sur le serveur distant, il n'est pas utile de les transfrer nouveau. Un cadenas apparat en regard de l'icne du fichier local pour indiquer que ce dernier n'est dsormais accessible qu'en lecture seule. Important : Si vous archivez le fichier actif, il se peut que ce fichier soit automatiquement enregistr avant d'tre archiv, selon les options dfinies dans les prfrences.
Archivage d'un fichier ouvert partir de la fentre de document

1. Assurez-vous que le fichier archiver ou extraire est ouvert dans la fentre de document. Remarque : Vous ne pouvez archiver qu'un seul fichier ouvert la fois. 2. Effectuez l'une des oprations suivantes : Choisissez Site > Archiver. Cliquez sur l'icne Gestion des fichiers dans la barre d'outils de la fentre du document, puis slectionnez Archiver dans le menu. Si le fichier actuel n'est pas associ au site actif dans le panneau Fichiers, Dreamweaver tente de dterminer quel site dfini localement le fichier actuel appartient. Si le fichier actuel appartient un autre site que celui qui est actif dans le panneau Fichiers, Dreamweaver ouvre ce site, puis effectue l'opration d'archivage. Important : Si vous archivez le fichier actif, il se peut que ce fichier soit automatiquement enregistr avant d'tre archiv, selon les options dfinies dans les prfrences.
Annulation de l'extraction d'un fichier

Si vous extrayez un fichier, puis que vous dcidez de ne pas le modifier (ou si vous dcidez d'liminer les modifications que vous avez apportes), vous pouvez annuler l'opration d'extraction. Le fichier reprend alors son tat d'origine.
371
Pour annuler l'extraction d'un fichier, procdez de l'une des faons suivantes : Ouvrez le fichier dans la fentre Document, puis choisissez Site > Annuler extraction. Dans le panneau Fichiers (Fentre > Fichiers), cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis slectionnez Annuler extraction. La copie locale du fichier passe alors en lecture seule, et toutes les modifications que vous y avez apportes sont perdues.
Utilisation de WebDAV pour archiver et extraire des fichiers
Haut de la page
Dreamweaver peut se connecter un serveur utilisant WebDAV (Web-based Distributed Authoring and Versioning), un ensemble d'extensions du protocole HTTP permettant aux utilisateurs au sein d'un groupe de modifier et de grer des fichiers sur des serveurs Web distants. Pour plus d'informations, voir www.webdav.org. 1. Si vous ne l'avez pas encore fait, dfinissez un site Dreamweaver indiquant le dossier local que vous utilisez pour enregistrer vos fichiers de projet. 2. Slectionnez Site > Grer les sites puis double-cliquez sur votre site dans la liste. 3. Dans la bote de dialogue Configuration du site, slectionnez la catgorie Serveurs et effectuez l'une des actions suivantes : Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur. Slectionnez un serveur existant puis cliquez sur le bouton Modifier serveur existant. 4. Dans l'cran Base, slectionnez WebDAV dans le menu Se connecter au moyen de, puis compltez si ncessaire les autres options de l'cran Base. 5. Cliquez sur le bouton Avanc. 6. Slectionnez l'option Activer l'extraction de fichier et entrez les informations suivantes : Dans la zone de texte Nom d'extraction, entrez un nom vous identifiant par rapport aux autres membres de l'quipe. Indiquez votre adresse lectronique dans la zone approprie. Le nom et l'adresse lectronique sont utiliss pour l'identification sur le serveur WebDAV et s'affiche dans le panneau Fichiers pour les contacts. 7. Cliquez sur Enregistrer. Dreamweaver configure le site pour l'accs WebDAV. Lorsque vous utilisez la commande d'archivage ou d'extraction sur un fichier du site, le fichier est transfr au moyen de WebDAV. Remarque : Il se peut que WebDAV ne parvienne pas extraire correctement des fichiers incluant un contenu dynamique, parce que la mthode HTTP GET les rend au moment de leur extraction.
Utilisation de Subversion (svn) pour acqurir et archiver des fichiers
Haut de la page
Dreamweaver peut se connecter un serveur utilisant Subversion (SVN), un systme de contrle de version qui permet aux utilisateurs de collaborer la modification et la gestion de fichiers sur des serveurs Web distants. Dreamweaver n'est pas un client SVN intgral, mais il permet aux utilisateurs d'obtenir les versions les plus rcentes de fichiers, d'apporter des modifications et d'envoyer les fichiers. Important : Dreamweaver CS5 utilise la bibliothque du client Subversion 1.6.6 et Dreamweaver CS5.5 utilise la bibliothque du client 1.6.9. Les versions plus rcentes de la bibliothque cliente Subversion ne sont pas rtrocompatibles. Notez que si vous mettez jour une application cliente tierce (par exemple TortoiseSVN) en vue d'une utilisation avec une version ultrieure de Subversion, l'application Subversion mise jour mettra jour les mtadonnes Subversion locales, et Dreamweaver ne pourra plus communiquer avec Subversion. Ce problme n'est pas influenc par les mises jour du serveur Subversion, car celles-ci sont rtrocompatibles. Si vous procdez une mise jour vers une application cliente tierce qui fonctionne avec Subversion en version 1.7 ou ultrieure, vous devrez rechercher des mises jour auprs d'Adobe avant de pouvoir rutiliser Subversion avec Dreamweaver. Pour plus d'informations sur ce problme, consultez le site www.adobe.com/go/dw_svn_fr. Adobe recommande d'utiliser un outil de comparaison de fichiers, dvelopp par une tierce partie, lorsque vous utilisez des fichiers contrle de version SVN. Lorsque vous comparez des fichiers afin de dtecter leurs diffrences, vous pouvez voir prcisment quels types de modifications d'autres utilisateurs ont apportes. Pour plus d'informations sur les outils de comparaison de fichiers, utilisez un moteur de recherche Web tel que Google pour trouver des outils de comparaison de fichiers ou diff . Dreamweaver fonctionne avec la plupart des outils tiers. Vous trouverez un didacticiel vido sur l'utilisation de SVN et Dreamweaver l'adresse www.adobe.com/go/lrvid4049_dw_fr.
Etablissement d'une connexion SVN

Avant d'utiliser Subversion (SVN) comme systme de contrle des versions avec Dreamweaver, vous devez tablir une connexion un serveur SVN. Pour dfinir une connexion un serveur SVN, utilisez la catgorie Contrle de version de la bote de dialogue Dfinition du site. Le serveur SVN est un rfrentiel de fichiers depuis lequel vous (et d'autres utilisateurs) pouvez obtenir et valider des fichiers. Il est diffrent du serveur distant qu'on utilise gnralement dans Dreamweaver. En cas d'utilisation de SVN, le serveur distant reste le serveur en direct pour vos pages Web. Le serveur SVN sert pour sa part au stockage du rfrentiel des fichiers au sujet desquels vous voulez conserver un contrle de
372
version. Le processus habituel consiste obtenir des fichiers depuis le serveur SVN et les y valider, puis les publier sur votre serveur distant partir de Dreamweaver. La configuration du serveur distant est tout fait distincte de celle de SVN. Avant de pouvoir entamer cette configuration, vous devez disposer d'un accs un serveur SVN et un rfrentiel SVN. Pour plus d'informations sur SVN, consultez le site Web de Subversion l'adresse suivante : http://subversion.apache.org/. Pour configurer la connexion SVN, procdez comme suit : 1. Choisissez Site > Grer les sites, slectionnez le site pour lequel vous voulez configurer le contrle des versions, puis cliquez sur le bouton Modifier. Remarque : Si vous n'avez pas encore dfini de dossiers locaux et distants pour un site Dreamweaver, vous devrez au moins configurer un site local avant de pouvoir continuer. Le site distant n'est pas ncessaire pour l'instant, mais vous devrez en dfinir un pour pouvoir publier vos fichiers sur le Web. Pour plus d'informations, reportez-vous la section Utilisation de sites Dreamweaver. 2. Dans la bote de dialogue Configuration du site, slectionnez la catgorie Contrle de version. 3. Slectionnez Subversion dans la liste droulante Accs. 4. Dfinissez les options d'accs comme suit : Slectionnez un protocole dans la liste droulante Protocole. Les protocoles disponibles sont HTTP, HTTPS, SVN et SVN+SSH. Remarque : L'emploi du protocole SVN+SSH exige une configuration spciale. Pour plus d'informations, voir www.adobe.com/go/learn_dw_svn_ssh_fr. Entrez l'adresse du serveur SVN dans la zone de texte Adresse du serveur (gnralement sous la forme nomserveur.domaine.com). Entrez le chemin d'accs votre rfrentiel sur le serveur SVN dans la zone Rfrentiel (gnralement sous la forme /svn/votre_rpertoire_racine . C'est l'administrateur du serveur de nommer le dossier racine pour le rfrentiel SVN). (Facultatif) Si vous voulez utiliser un port de serveur diffrent du port par dfaut, activez l'option Instance spcifique puis entrez un numro de port dans la zone de texte. Entrez votre nom d'utilisateur et votre mot de passe sur SVN. 5. Cliquez sur Tester pour tester votre connexion, ou sur OK pour fermer la bote de dialogue. Cliquez ensuite sur Termin pour fermer la bote de dialogue Grer les sites. Lorsque la connexion au serveur est tablie, votre rfrentiel SVN peut tre visualis dans le panneau Fichiers. Pour le visualiser, vous pouvez choisir le mode Affichage du rfrentiel dans la liste droulante Affichage, ou cliquez sur le bouton Fichiers du rfrentiel Fichiers dvelopp. dans le panneau
Obtention des versions les plus rcentes des fichiers

Lorsque vous obtenez la version la plus rcente d'un fichier depuis le rfrentiel SVN, Dreamweaver fusionne le contenu de ce fichier celui de la copie locale correspondante. En d'autres termes, si un autre utilisateur a mis jour le fichier depuis la dernire fois o vous l'avez valid, ses mises jour sont fusionnes avec la version locale du fichier sur votre ordinateur. Si le fichier n'existe pas sur le disque dur local, Dreamweaver se contente de l'obtenir. Remarque : Lorsque vous obtenez pour la premire fois des fichiers depuis le rfrentiel, travaillez avec un rpertoire local vide ou un rpertoire local qui ne contient pas de fichiers portant les mmes noms que dans le rfrentiel. Dreamweaver ne monte pas les fichiers du rfrentiel sur le lecteur local la premire tentative si le lecteur local contient des fichiers dont le nom est identique celui de fichiers dans le rfrentiel distant. 1. Assurez-vous d'avoir bien dfini une connexion SVN. 2. Effectuez l'une des oprations suivantes : Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste droulante Affichage. Si vous travaillez dans le panneau Fichiers dvelopp, l'affichage local est automatiquement disponible. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur le fichier ou le dossier qui vous intresse, puis cliquez sur Contrle de version > Obtenir les versions les plus rcentes. Affichez les fichiers du rfrentiel SVN en choisissant Affichage du rfrentiel dans la liste droulante Affichage du panneau Fichiers ou en cliquant sur le bouton Fichiers du rfrentiel dans le panneau Fichiers dvelopp. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur le fichier ou le dossier qui vous intresse, puis cliquez sur Obtenir les versions les plus rcentes. Remarque : Vous pouvez galement cliquer sur un fichier l'aide du bouton droit de la souris puis choisir Extraire dans le menu contextuel, ou slectionner ce fichier et cliquer sur le bouton Extraire afin d'obtenir sa version la plus rcente. Toutefois, comme SVN ne prend pas en charge les processus d'extraction, cette mthode ne permet pas d'extraire le fichier de la faon habituelle.
Validation de fichiers
1. Assurez-vous d'avoir bien dfini une connexion SVN. 2. Effectuez l'une des oprations suivantes : Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste droulante Affichage.
373
Si vous travaillez dans le panneau Fichiers dvelopp, l'affichage local est automatiquement disponible. Slectionnez ensuite le fichier valider puis cliquez sur Archiver. Affichez les fichiers du rfrentiel SVN en choisissant Affichage du rfrentiel dans la liste droulante Affichage du panneau Fichiers ou en cliquant sur le bouton Fichiers du rfrentiel dans le panneau Fichiers dvelopp. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur le fichier que vous voulez valider, puis cliquez sur Valider. 3. Prenez connaissance des actions dans la bote de dialogue Archivage, apportez les ventuelles modifications requises, puis cliquez sur OK. Vous pouvez modifier des actions en les slectionnant puis en cliquant sur le bouton dans le bas de la bote de dialogue Archivage. Deux options sont disponibles : Valider et Ignorer. Remarque : La prsence d'une coche de couleur verte sur un fichier dans le panneau Fichiers indique qu'il a t modifi et pas encore valid dans le rfrentiel.
Mise jour de l'tat de fichiers ou de dossiers dans le rfrentiel

Vous pouvez mettre jour l'tat SVN d'un fichier ou d'un dossier. La mise jour n'actualise pas l'affichage tout entier. 1. Assurez-vous d'avoir bien dfini une connexion SVN. 2. Affichez les fichiers du rfrentiel SVN en choisissant Affichage du rfrentiel dans la liste droulante Affichage du panneau Fichiers ou en cliquant sur le bouton Fichiers du rfrentiel dans le panneau Fichiers dvelopp. 3. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur n'importe quel fichier ou dossier du rfrentiel, puis cliquez sur Mettre jour l'tat.
Mise jour de l'tat de fichiers ou de dossiers locaux

Vous pouvez mettre jour l'tat SVN d'un fichier ou d'un dossier. La mise jour n'actualise pas l'affichage tout entier. 1. Assurez-vous d'avoir bien dfini une connexion SVN. 2. Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste droulante Affichage. Si vous travaillez dans le panneau Fichiers dvelopp, l'affichage local est automatiquement disponible. 3. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur n'importe quel fichier ou dossier du panneau Fichiers, puis cliquez sur Mettre jour l'tat.
Affichage des versions d'un fichier

1. Assurez-vous d'avoir bien dfini une connexion SVN. 2. Effectuez l'une des oprations suivantes : Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste droulante Affichage. Si vous travaillez dans le panneau Fichiers dvelopp, l'affichage local est automatiquement disponible. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur le fichier dont vous voulez afficher les versions, puis choisissez Contrle de version > Afficher les versions. Affichez les fichiers du rfrentiel SVN en choisissant Affichage du rfrentiel dans la liste droulante Affichage du panneau Fichiers ou en cliquant sur le bouton Fichiers du rfrentiel dans le panneau Fichiers dvelopp. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur le fichier dont vous voulez afficher les versions, puis choisissez Afficher les versions. 3. Dans la bote de dialogue Historique des versions, choisissez la ou les versions qui vous intressent, puis effectuez l'une des actions suivantes : Cliquez sur Comparer au site local pour comparer la version slectionne la version locale du fichier. Remarque : Vous devez installer un outil de comparaison de fichiers, provenant d'un diteur tiers, avant de pouvoir comparer les fichiers. Pour plus d'informations sur les outils de comparaison de fichiers, utilisez un moteur de recherche Web tel que Google pour trouver des outils de comparaison de fichiers ou diff . Dreamweaver fonctionne avec la plupart des outils tiers. Cliquez sur Comparer pour comparer deux versions slectionnes. Cliquez tout en maintenant la touche CTRL enfonce pour slectionner deux versions simultanment. Cliquez sur Afficher pour afficher la version slectionne. Cette action n'entrane pas le remplacement de la copie locale actuelle du fichier concern. Vous pouvez enregistrer la version slectionne sur votre disque dur comme vous le feriez avec n'importe quel autre fichier. Cliquez sur Marquer comme actuel pour faire de la version slectionne la version la plus rcente du rfrentiel.
Verrouillage et dverrouillage de fichiers

Le verrouillage d'un fichier dans le rfrentiel SVN permet d'indiquer aux autres utilisateurs que vous tes en train de travailler dessus. Les autres utilisateurs peuvent toujours modifier le fichier localement, mais ils ne pourront valider le fichier que quand vous l'aurez dverrouill. Lorsque vous
374
verrouillez un fichier dans le rfrentiel, vous verrez que ce fichier s'accompagne d'une icne reprsentant un cadenas ouvert. Pour les autres utilisateurs, l'icne reprsente un cadenas ferm. 1. Assurez-vous d'avoir bien dfini une connexion SVN. 2. Effectuez l'une des oprations suivantes : Affichez les fichiers du rfrentiel SVN en choisissant Affichage du rfrentiel dans la liste droulante Affichage du panneau Fichiers ou en cliquant sur le bouton Fichiers du rfrentiel dans le panneau Fichiers dvelopp. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur le fichier qui vous intresse, puis choisissez Verrouiller ou Dverrouiller. Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste droulante Affichage. Si vous travaillez dans le panneau Fichiers dvelopp, l'affichage local est automatiquement disponible. Cliquez ensuite avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur le fichier qui vous intresse, puis choisissez Verrouiller ou Dverrouiller.
Ajout d'un nouveau fichier au rfrentiel

La prsence d'un symbole plus bleu sur un fichier dans le panneau Fichiers indique que ce fichier n'existe pas encore dans le rfrentiel SVN. 1. Assurez-vous d'avoir bien dfini une connexion SVN. 2. Dans le panneau Fichiers, slectionnez le fichier ajouter au rfrentiel, puis cliquez sur le bouton Archiver. 3. Assurez-vous que le fichier est slectionn pour une validation dans la bote de dialogue Validation, puis cliquez sur OK.
Dplacement, copie, suppression ou rtablissement de fichiers

Pour dplacer un fichier, faites-le glisser vers le dossier de destination de votre site local. Lorsque vous dplacez un fichier, Dreamweaver le marque, son nouvel emplacement, au moyen d'un signe Ajouter avec historique, et le marque l'aide d'un signe Supprimer son ancien emplacement. Lorsque vous envoyez ces fichiers, celui qui se trouve l'ancien emplacement disparat. Pour copier un fichier, slectionnez-le, copiez-le (Edition > Copier) puis collez-le (Edition > Coller) son nouvel emplacement. Lorsque vous copiez et collez un fichier, Dreamweaver le marque, son nouvel emplacement, au moyen d'un signe Ajouter avec historique. Pour supprimer un fichier, slectionner-le puis appuyez sur supprimer. Dreamweaver vous permet de supprimer uniquement la version locale du fichier, ou la fois la version locale et celle sur le serveur SVN. Si vous dcidez de ne supprimer que la version locale, le fichier sur le serveur SVN n'est pas touch. Si vous dcidez de supprimer galement la version sur le serveur SVN, la version locale est marque l'aide d'un signe Supprimer, et vous devez envoyer le fichier pour que la suppression soit effectue. Pour rtablir un fichier copi ou dplac son emplacement d'origine, cliquez sur le fichier l'aide du bouton droit puis choisissez Contrle de version > Rtablir.
Rsolution des conflits entre fichiers

Si votre fichier est en conflit avec un autre fichier sur le serveur, vous pouvez le modifier puis le marquer comme tant rsolu. Par exemple, si vous tentez d'archiver un fichier qui est en conflit avec les modifications apportes par un autre utilisateur, SVN ne vous permettra pas de valider ce fichier. Vous pouvez obtenir la version la plus rcente du fichier depuis le rfrentiel, apporter manuellement des modifications votre copie de travail, puis marquer votre fichier comme tant rsolu de faon pouvoir le valider. 1. Assurez-vous d'avoir bien dfini une connexion SVN. 2. Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste droulante Affichage. Si vous travaillez dans le panneau Fichiers dvelopp, l'affichage local est automatiquement disponible. 3. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur le fichier dont vous voulez rsoudre le conflit, puis choisissez Contrle de version > Marquer comme rsolu.
Travail hors ligne

Il peut s'avrer utile de travailler hors ligne, de manire viter tout accs au rfrentiel pendant d'autres activits de transfert de fichiers. Dreamweaver se connecte au rfrentiel SVN ds que vous lancez une activit qui exige une connexion (Obtenir les versions les plus rcentes, Valider, etc.). 1. Assurez-vous d'avoir bien dfini une connexion SVN. 2. Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste droulante Affichage. Si vous travaillez dans le panneau Fichiers dvelopp, l'affichage local est automatiquement disponible. 3. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur n'importe quel fichier ou dossier du panneau Fichiers, puis choisissez Contrle de version > Travailler hors ligne.
375
Nettoyage d'un site SVN local

Cette commande permet de supprimer les verrous des fichiers, de manire reprendre des activits non termines. Utilisez cette commande pour supprimer d'anciens verrous si vous recevez des messages d'erreur vous informant que la copie de travail est verrouille. 1. Assurez-vous d'avoir bien dfini une connexion SVN. 2. Affichez la version locale de vos fichiers SVN dans le panneau Fichiers en choisissant Affichage local dans la liste droulante Affichage. Si vous travaillez dans le panneau Fichiers dvelopp, l'affichage local est automatiquement disponible. 3. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur le fichier nettoyer, puis choisissez Contrle de version > Nettoyer.
A propos du dplacement de fichiers et de dossiers dans des sites contrls par Subversion
Lorsque vous dplacez les versions locales de fichiers ou de dossiers dans un site contrl par Subversion, vous risquez de crer des problmes d'autres utilisateurs qui pourraient se synchroniser avec le rfrentiel SVN. Par exemple, si vous dplacez un fichier localement et ne le validez pas dans le rfrentiel pendant quelques heures, il se peut qu'un autre utilisateur tente d'en obtenir la version la plus rcente depuis son ancien emplacement. Veillez donc toujours valider les fichiers sur le serveur SVN juste aprs les avoir dplacs localement. Les fichiers et les dossiers demeurent sur le serveur jusqu' ce que vous les supprimiez manuellement. Ainsi, mme si vous dplacez un fichier dans un dossier local diffrent et que vous le validez, son ancienne version reste l'emplacement prcdent sur le serveur. Pour viter toute confusion, supprimez les anciennes copies des fichiers et dossiers que vous avez dplacs. Lorsque vous dplacez un fichier localement et que vous le validez de nouveau sur le serveur SVN, l'historique des versions du fichier est perdu. Voir aussi
376
Voilage de fichiers et de dossiers dans votre site Dreamweaver

A propos du voilage de site Activation et dsactivation du voilage d'un site Voilage et suppression du voilage pour les fichiers et dossiers d'un site Voilage et suppression du voilage de certains types de fichier Suppression du voilage de tous les fichiers et dossiers
A propos du voilage de site
Haut de la page
Le voilage vous permet d'exclure des fichiers et dossiers du site de certaines oprations (acquisition et placement, par exemple). Vous pouvez galement voiler tous les fichiers d'un type prcis (JPEG, FLV, XML, etc.) pour les oprations du site. Comme Dreamweaver conserve en mmoire tous les paramtres dfinis pour chaque site, vous n'avez pas slectionner le type de fichier voulu chaque fois que vous travaillez sur un site. Par exemple, si vous travaillez sur un site de grande taille et que vous ne voulez pas envoyer vos fichiers multimdias tous les jours, vous pouvez utiliser la fonction de voilage pour voiler votre dossier multimdia. Dreamweaver exclura les fichiers de ce dossier de toutes les oprations que vous effectuez sur le site. Vous pouvez voiler des fichiers et des dossiers sur le site distant ou local. Le voilage exclut les fichiers et dossiers voils des oprations suivantes : Ralisation d'oprations de placement, d'acquisition, d'archivage et d'extraction Gnration de rapports Recherche des fichiers locaux et distants les plus rcents Ralisation d'oprations portant sur le site entier, telles que la vrification et la modification des liens Synchronisation Utilisation du contenu du panneau Actifs Mise jour des modles et des bibliothques Remarque : Vous pouvez toujours effectuer une opration sur un dossier ou un fichier voil prcis en le slectionnant dans le panneau Fichiers, puis en effectuant l'opration voulue. Toute opration effectue directement sur un fichier ou un dossier annule le voilage. Remarque : Dreamweaver exclut les modles et les lments de bibliothque voils lors des oprations d'acquisition et de placement de fichiers seulement. Dreamweaver n'exclut aucun de ces lments lors des oprations par lots, car cela pourrait les dsynchroniser par rapport leurs instances.
Activation et dsactivation du voilage d'un site
Haut de la page
Le voilage vous permet de dfinir les dossiers, les fichiers et les types de fichiers du site que vous souhaitez exclure de certaines oprations (acquisition et placement, par exemple). Cette option est active par dfaut. Vous pouvez le dsactiver dfinitivement ou provisoirement afin d'effectuer une opration sur tous les fichiers, y compris les fichiers voils. Lorsque vous dsactivez le voilage sur un site, cela supprime tous les voiles des fichiers voils. Lorsque vous le ractivez, tous les fichiers qui taient prcdemment voils 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 dsactive pas le voilage. De plus, cette option ne vous permet pas de rtablir automatiquement le voilage de tous les dossiers et fichiers qui taient auparavant voils ; il vous faut ensuite redfinir manuellement le voilage de chaque dossier, fichier et type de fichier concern. 1. Slectionnez un fichier ou un dossier dans le panneau Fichiers (Fentre > Fichiers). 2. Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis procdez de l'une des faons suivantes : Slectionnez Voilage > (dslectionnez l'option pour la dsactiver). Slectionnez Voilage > Paramtres pour ouvrir la catgorie Voilage de la bote de dialogue Configuration du site. Slectionnez ou dslectionnez, puis activez ou dsactivez l'option Voiler les fichiers se terminant avec, selon que vous souhaitez ou non activer le voilage de certains types de fichier. Saisissez ou supprimez les suffixes de fichier dans la zone de texte afin d'indiquer le type de fichier pour lequel activer ou dsactiver le voilage.
Voilage et suppression du voilage pour les fichiers et dossiers d'un site

377
Haut de la page
Il est possible de voiler des fichiers et des dossiers spcifiques, mais pas tous les fichiers et dossiers existants ni un site entier. Il est toutefois possible de voiler plusieurs fichiers et dossiers simultanment. 1. Dans le panneau Fichiers (Fentre > Fichiers), slectionnez un site pour lequel la fonction de voilage est active. 2. Slectionnez les dossiers ou fichiers auxquels appliquer un voile ou le supprimer. 3. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis choisissez Voilage > Voiler ou Voilage > Supprimer le voile dans le menu contextuel. Une ligne rouge est prsente ou non sur l'icne du fichier ou du dossier, pour indiquer qu'il est voil ou dvoil. Remarque : Vous pouvez toujours effectuer une opration sur un fichier ou un dossier voil prcis en le slectionnant dans le panneau Fichiers, puis en effectuant l'opration voulue. Toute opration effectue directement sur un fichier ou un dossier annule le voilage.
Voilage et suppression du voilage de certains types de fichier
Haut de la page
Vous pouvez indiquer des types de fichier voiler afin que Dreamweaver voile tous les fichiers se terminant d'une certaine manire. Ainsi pouvezvous, par exemple, voiler tous les fichiers se terminant par l'extension .txt. Les types de fichier indiqus ne doivent pas ncessairement correspondre des extensions de fichier ; il peut s'agir de n'importe quel lment apparaissant la fin d'un nom de fichier.
Voilage de certains types de fichier au sein d'un site

1. Dans le panneau Fichiers (Fentre > Fichiers), slectionnez un site pour lequel la fonction de voilage est active. 2. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis slectionnez Voilage > Paramtres. 3. Activez l'option Voiler les fichiers se terminant avec, entrez les types de fichier voiler dans la zone de saisie, puis cliquez sur OK. Vous pouvez saisir, par exemple, .jpg afin de voiler tous les fichiers dont le nom se termine par .jpg dans le site. Pour saisir plusieurs types de fichier, sparez chaque type par un espace ; n'utilisez ni virgule ni point-virgule. Dans le panneau Fichiers, une ligne rouge apparat sur les fichiers concerns pour indiquer qu'ils sont voils. Certains logiciels crent des fichiers de sauvegarde se terminant par un suffixe donn, tel que .bak. Vous pouvez voiler ces fichiers. Remarque : Vous pouvez toujours effectuer une opration sur un fichier ou un dossier voil prcis en le slectionnant dans le panneau Fichiers, puis en effectuant l'opration voulue. Toute opration effectue directement sur un fichier ou un dossier annule le voilage.
Dsactivation du voilage de certains types de fichier au sein d'un site

1. Dans le panneau Fichiers (Fentre > Fichiers), slectionnez un site pour lequel la fonction de voilage est active. 2. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis slectionnez Voilage > Paramtres. 3. Dans la bote de dialogue Dfinition du site, onglet Avanc, utilisez l'une des mthodes suivantes : Dsactivez l'option Voiler les fichiers se terminant avec pour supprimer le voile de tous les types de fichier rpertoris dans la zone de texte. Dans la zone de texte, supprimez certains types de fichier pour ne supprimer le voile que sur ces types de fichier. 4. Cliquez sur OK. Les lignes rouges disparaissent des fichiers concerns pour indiquer qu'ils ne sont plus voils.
Suppression du voilage de tous les fichiers et dossiers
Haut de la page
Vous pouvez supprimer le voile de tous les fichiers et dossiers d'un site, et ce en une seule opration. Comme il est impossible d'annuler ce type d'opration, vous ne pourrez pas rtablir le voile de tous les lments qui taient auparavant voils. Vous devrez revoiler les lments un par un. Si vous souhaitez supprimer provisoirement le voile de tous les dossiers et fichiers et les revoiler par la suite, dsactivez le voilage sur le site. 1. Dans le panneau Fichiers (Fentre > Fichiers), slectionnez un site pour lequel la fonction de voilage est active. 2. Slectionnez un fichier ou un dossier quelconque du site. 3. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis slectionnez Voilage> Supprimer tous les voiles. Remarque : Cette opration dsactive galement l'option Voiler les fichiers se terminant avec de la catgorie Voilage de la bote de dialogue Dfinition du site. Les lignes rouges sur les icnes des dossiers et des fichiers disparaissent pour indiquer que tous les fichiers et dossiers du site ne sont plus voils.
378
Comparaison de fichiers pour en chercher les diffrences

Comparaison des fichiers locaux et distants Comparaison avant le placement de fichiers Comparaison de fichiers lors de la synchronisation
Comparaison des fichiers locaux et distants
Haut de la page
Dreamweaver peut utiliser des outils de comparaison de fichiers (galement appels outils diff ) afin de comparer le code des versions locale et distante du mme fichier, deux fichiers distants diffrents ou deux fichiers locaux diffrents. La comparaison des versions locale et distante est utile si vous travaillez localement sur un fichier et que vous suspectez que sa copie sur le serveur a t modifie. Sans quitter Dreamweaver, vous pouvez afficher et fusionner les modifications distantes dans votre version locale avant de placer le fichier sur le serveur. La comparaison de deux fichiers locaux ou de deux fichiers distants est galement utile si vous conservez des versions prcdentes, renommes de vos fichiers. En cas d'oubli des modifications apportes un fichier d'une version prcdente, effectuez une comparaison rapide. Avant de commencer, vous devez installer un outil de comparaison de fichiers tiers sur votre systme. Pour plus d'informations sur les outils de comparaison de fichiers, utilisez un moteur de recherche Web tel que Google pour trouver des outils de comparaison de fichiers ou diff . Dreamweaver fonctionne avec la plupart des outils tiers.
Dfinition d'un outil de comparaison dans Dreamweaver

1. Installez l'outil de comparaison de fichiers sur le mme systme que Dreamweaver. 2. Dans Dreamweaver, ouvrez la bote de dialogue Prfrences en slectionnant Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh), puis slectionnez la catgorie Comparaison de fichiers. 3. Effectuez l'une des oprations suivantes : Sous Windows, cliquez sur le bouton Parcourir et slectionnez une application qui compare les fichiers. Sur Macintosh, cliquez sur le bouton Parcourir et slectionnez l'outil ou le script qui lance l'outil de comparaison de fichiers dans la ligne de commande (pas l'outil de comparaison de fichiers). Les outils ou les scripts de lancement se trouvent gnralement dans le dossier /usr/bin de votre Macintosh. Par exemple, si vous souhaitez utiliser FileMerge, recherchez le dossier /usr/bin et slectionnez opendiff, l'outil qui lance FileMerge. Le tableau suivant rpertorie les outils de comparaison de fichiers courants pour le Macintosh ainsi que l'emplacement de leurs outils ou de leurs scripts de lancement sur votre disque dur : Si vous utilisez FileMerge BBEdit TextWrangler Slectionnez le fichier suivant /usr/bin/opendiff (ou /Developer/usr/bin/opendiff) /usr/bin/bbdiff /usr/bin/twdiff
Remarque : Le dossier usr est gnralement masqu dans le Finder. Cependant, vous pouvez y accder en utilisant le bouton Parcourir dans Dreamweaver. Remarque : Les rsultats effectivement affichs dpendent de l'outil diff utilis. Consultez le guide d'utilisation de votre outil pour comprendre comment interprter ces rsultats.
Comparaison de deux fichiers locaux

Vous pouvez comparer deux fichiers situs n'importe quel endroit sur votre ordinateur. 1. Dans le panneau Fichiers, appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur les deux fichiers pour les slectionner. Pour choisir des fichiers se trouvant l'extrieur de votre site dfini, accdez votre disque local dans le menu gauche contextuel du panneau Fichiers puis slectionnez-les. 2. Cliquez avec le bouton droit de la souris sur l'un des fichiers slectionns puis choisissez Compare Local Files (Comparer les fichiers locaux) dans le menu contextuel. Remarque : Si votre souris n'est dote que d'un seul bouton, appuyez sur la touche Ctrl tout en cliquant avec la souris sur l'un des fichiers slectionns.
379
L'outil de comparaison de fichiers dmarre et compare les deux fichiers.
Comparaison de deux fichiers distants

Vous pouvez comparer deux fichiers situs sur votre serveur distant. Vous devez dfinir un site Dreamweaver avec des paramtres distants avant de pouvoir effectuer cette tche. 1. Dans le panneau Fichiers, affichez les fichiers sur le serveur distant en choisissant Affichage distant dans le menu droulant situ droite. 2. Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) tout en cliquant avec la souris sur les deux fichiers pour les slectionner 3. Cliquez avec le bouton droit de la souris sur l'un des fichiers slectionns puis choisissez Comparer les fichiers distants dans le menu contextuel. Remarque : Si votre souris n'est dote que d'un seul bouton, appuyez sur la touche Ctrl tout en cliquant avec la souris sur l'un des fichiers slectionns. L'outil de comparaison de fichiers dmarre et compare les deux fichiers.
Comparaison entre un fichier local et un fichier distant

Vous pouvez effectuer une comparaison entre un fichier local et un fichier se trouvant sur votre serveur distant. Pour cela, vous devez d'abord dfinir un site Dreamweaver avec des paramtres distants. Dans le panneau Fichiers, cliquez avec le bouton droit de la souris sur un fichier local et choisissez Comparer avec distants dans le menu contextuel. Remarque : Si votre souris n'est dote que d'un seul bouton, appuyez sur la touche Ctrl tout en cliquant avec la souris sur le fichier local. L'outil de comparaison de fichiers dmarre et compare les deux fichiers.
Comparaison entre un fichier distant et un fichier local

Vous pouvez effectuer une comparaison entre un fichier distant et un fichier local. Vous devez dfinir un site Dreamweaver avec des paramtres distants avant d'effectuer cette tche. 1. Dans le panneau Fichiers, affichez les fichiers sur le serveur distant en choisissant Affichage distant dans le menu droulant situ droite. 2. Cliquez avec le bouton droit de la souris sur un fichier dans le panneau et choisissez Comparer avec fichier local dans le menu contextuel. Remarque : Si votre souris n'est dote que d'un seul bouton, appuyez sur la touche Ctrl tout en cliquant avec la souris sur le fichier.
Comparaison entre un fichier ouvert et un fichier distant

Vous pouvez effectuer une comparaison entre un fichier ouvert dans Dreamweaver et son homologue sur le serveur distant. Dans la fentre de document, choisissez Fichier > Comparer avec distants. L'outil de comparaison de fichiers dmarre et compare les deux fichiers. Vous pouvez galement cliquer avec le bouton droit de la souris sur l'onglet de document situ en haut de la fentre de document et choisir Comparer avec distants dans le menu contextuel.
Comparaison avant le placement de fichiers
Haut de la page
Si vous modifiez un fichier localement et essayez ensuite de le tlcharger vers votre serveur distant, Dreamweaver vous avertit si la version distante du fichier a t change. Vous avez la possibilit de comparer les deux fichiers avant de tlcharger le fichier et d'craser la version distante. Avant de commencer, vous devez installer un outil de comparaison de fichiers sur votre systme et le dfinir dans Dreamweaver. 1. Une fois que vous avez modifi un fichier dans un site Dreamweaver, placez le fichier (Site > Placer) sur votre site distant. Si la version distante du fichier a t modifie, vous recevrez une notification avec la possibilit de visualiser les diffrences. 2. Pour visualiser les diffrences, cliquez sur le bouton Comparer. L'outil de comparaison de fichiers dmarre et compare les deux fichiers. Si vous n'avez pas spcifi d'outil de comparaison de fichiers, un message vous invite le faire. 3. Une fois que vous avez revu ou fusionn les changements dans l'outil, vous pouvez passer l'opration de placement ou l'annuler.
Comparaison de fichiers lors de la synchronisation
Haut de la page
Vous pouvez comparer les versions locales de vos fichiers avec les versions distantes lorsque vous synchronisez les fichiers de votre site avec Dreamweaver. Avant de commencer, vous devez installer un outil de comparaison de fichiers sur votre systme et le dfinir dans Dreamweaver. 1. Cliquez avec le bouton droit de la souris n'importe quel endroit du panneau Fichiers et slectionnez Synchroniser dans le menu contextuel.
380
2. Compltez les options de la bote de dialogue Synchroniser les fichier, puis cliquez sur Aperu. Une fois que vous avez cliqu sur Aperu, vous obtenez une liste des fichiers slectionns et des actions qui seront effectues pendant la synchronisation. 3. Dans la liste, slectionnez les fichiers que vous souhaitez comparer et cliquez sur le bouton Comparer (l'icne avec les deux petites pages). Remarque : Le fichier doit tre bas sur du texte (fichier HTML ou ColdFusion). Dreamweaver lance l'outil de comparaison qui compare les versions locale et distante de chaque fichier slectionn. Voir aussi
381
Acquisition et placement de fichiers depuis ou vers votre serveur

Transfert de fichiers et fichiers dpendants A propos des transferts de fichiers en arrire-plan Acquisition de fichiers depuis un serveur distant Placement de fichiers sur un serveur distant Gestion des transferts de fichiers
Transfert de fichiers et fichiers dpendants
Haut de la page
Si vous travaillez au sein d'un groupe, vous pouvez utiliser le systme d'extraction et d'archivage pour transfrer des fichiers entre le serveur distant et l'ordinateur local. Si vous tes la seule personne travailler sur le site distant, vous pouvez utiliser les commandes Acqurir et Placer pour transfrer des fichiers sans avoir les archiver ou les extraire. Lorsque vous transfrez un document entre un dossier local et distant l'aide du panneau Fichiers, vous pouvez transfrer les fichiers dpendants de ce document. Les fichiers dpendants sont des images, des feuilles de style externes et d'autres fichiers rfrencs dans votre document qu'un navigateur charge avec le document. Remarque : D'une manire gnrale, il est conseill de tlcharger les fichiers dpendants lorsque le fichier extrait est un nouveau fichier, mais c'est inutile si les versions les plus rcentes des fichiers dpendants sont dj prsentes sur le disque local. Cela s'applique galement lors du transfert et de l'archivage de fichiers : il n'est pas ncessaire si des copies mises jour sont dj prsentes sur le site distant. Les lments de bibliothque sont traits comme des fichiers dpendants. Certains serveurs gnrent des erreurs lors du placement d'lments de bibliothque. Nanmoins, vous pouvez voiler ces fichiers pour qu'ils ne soient pas transfrs.
A propos des transferts de fichiers en arrire-plan
Haut de la page
Vous pouvez effectuer d'autres activits non lies au serveur lors de l'acquisition ou du placement de fichiers. Le transfert de fichiers d'arrire-plan fonctionne pour tous les protocoles de transfert pris en charge par Dreamweaver : FTP, SFTP, LAN, WebDAV, Subversion et RDS. Les activits non lies au serveur comprennent, entre autres, les oprations suivantes: taper, modifier des feuilles de style externes, gnrer des rapports l'chelle du site et crer de nouveaux sites. Les activits ct serveur que Dreamweaver ne peut pas effectuer pendant les transferts de fichiers incluent les tches suivantes : placer/acqurir/archiver/extraire des fichiers ; annuler l'extraction ; crer une connexion une base de donnes ; lier les donnes dynamiques ; Prvisualisation des donnes en mode Affichage en direct insrer un service Web ; supprimer des fichiers ou des dossiers distants ; prvisualiser dans le navigateur sur un serveur d'valuation ; enregistrer un fichier sur un serveur distant ; insrer une image d'un serveur distant ; ouvrir un fichier d'un serveur distant ; placer automatiquement des fichiers lors de l'enregistrement ; faire glisser des fichiers vers le site distant ; couper, copier ou coller des fichiers sur le site distant ; actualiser l'affichage distant. Par dfaut, la bote de dialogue Activit fichiers en arrire-plan est ouverte pendant les transferts de fichiers. Vous pouvez rduire cette bote de dialogue en cliquant sur le bouton Rduire, dans son coin suprieur droit. La fermeture de la bote de dialogue pendant un transfert de fichier entrane l'annulation de cette opration.
382
Acquisition de fichiers depuis un serveur distant
Haut de la page
La commande Acqurir permet de copier les fichiers du site distant sur le site local. Vous pouvez utiliser le panneau Fichiers ou la fentre du document pour acqurir des fichiers. Dreamweaver cre un journal de suivi des activits de fichiers au cours du transfert ; vous pouvez le consulter et l'enregistrer. Remarque : Vous ne pouvez pas dsactiver le transfert de fichiers en arrire-plan. Si le journal des dtails est ouvert dans la bote de dialogue Activit fichiers en arrire-plan, vous pouvez le fermer pour amliorer les performances. Dreamweaver enregistre galement l'activit de tous les transferts de fichiers en FTP. Si une erreur se produit lors du transfert d'un fichier en FTP, le journal du site FTP peut vous aider dterminer le problme.
Acquisition des fichiers depuis un serveur distant via le panneau Fichiers

1. Dans le panneau Fichiers (Fentre > Fichiers), slectionnez les fichiers que vous voulez tlcharger. Les fichiers sont gnralement slectionns dans l'affichage distant, mais il est galement possible de les slectionner dans l'affichage local. Si l'affichage distant est actif, Dreamweaver copie les fichiers slectionns sur le site local ; si l'affichage local est actif, Dreamweaver copie la version distante des fichiers locaux slectionns sur le site local. Remarque : Pour n'acqurir que les fichiers dont la version distante est plus rcente que la version locale, utilisez la commande Synchroniser. 2. Procdez de l'une des manires suivantes pour acqurir un fichier : Cliquez sur le bouton Acqurir dans la barre d'outils du panneau Fichiers. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur le fichier dans le panneau Fichiers, puis slectionnez Acqurir dans le menu contextuel. 3. Cliquez sur Oui dans la bote de dialogue Fichiers dpendants si vous souhaitez tlcharger les fichiers dpendants. Si vous disposez dj de copies locales des fichiers dpendants, cliquez sur Non. L'option par dfaut est de ne pas tlcharger les fichiers indpendants. Vous pouvez dfinir cette option en slectionnant Edition > Prfrences > Site. Dreamweaver tlcharge les fichiers slectionns comme suit : Si vous utilisez le systme d'archivage et d'extraction, l'obtention d'un fichier consistera transfrer une copie locale accessible en lecture seule. Le fichier reste disponible sur le site distant ou sur le serveur d'valuation et peut tre extrait par d'autres membres de l'quipe. Si vous n'utilisez pas le systme d'archivage et d'extraction, l'obtention d'un fichier produit une copie accessible en lecture et criture. Remarque : Si vous travaillez en quipe et que d'autres personnes sont susceptibles de travailler sur les mmes fichiers, ne dsactivez pas l'option Activer l'archivage et l'extraction de fichier. De plus, si d'autres personnes utilisent le systme d'extraction et d'archivage sur le site, vous devez l'utiliser galement. Pour arrter le transfert de fichier n'importe quel moment, cliquez sur le bouton Annuler de la bote de dialogue Activit fichiers en arrire-plan.
Acquisition des fichiers depuis un serveur distant l'aide de la fentre du document

1. Assurez-vous que le document est actif dans la fentre du document. 2. Procdez de l'une des manires suivantes pour acqurir un fichier : Choisissez Site > Acqurir. Cliquez sur l'icne Gestion des fichiers dans la barre d'outils de la fentre du document, puis slectionnez Acqurir dans le menu. Remarque : Si le fichier actuel n'est pas associ au site slectionn dans le panneau Fichiers, Dreamweaver tente de dterminer quel site dfini localement le fichier actuel appartient. Si ce fichier courant n'appartient qu' un seul site local, Dreamweaver ouvre ce site, puis effectue l'opration d'acquisition.

Haut de la page
Placement de fichiers sur un serveur distant

Vous pouvez placer des fichiers du site local vers le site distant, dans la plupart des cas sans changer l'tat d'extraction du fichier.
Il existe deux types de circonstances dans lesquels il est prfrable d'utiliser la commande Placer plutt que la commande Archiver : Lorsque vous ne travaillez pas en quipe et que vous n'utilisez pas le systme d'archivage et d'extraction.
383
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 systme d'extraction et d'archivage, le fichier est copi sur le site distant, puis extrait pour vous permettre de continuer le modifier. Vous pouvez utiliser le panneau Fichiers ou la fentre du document pour acqurir des fichiers. Dreamweaver cre un journal de suivi des activits de fichiers au cours du transfert ; vous pouvez le consulter et l'enregistrer. Remarque : Vous ne pouvez pas dsactiver le transfert de fichiers en arrire-plan. Si le journal des dtails est ouvert dans la bote de dialogue Activit fichiers en arrire-plan, vous pouvez le fermer pour amliorer les performances. Dreamweaver enregistre galement l'activit de tous les transferts de fichiers en FTP. Si une erreur se produit lors du transfert d'un fichier en FTP, le journal du site FTP peut vous aider dterminer le problme. Vous trouverez un didacticiel consacr au placement de fichiers sur un serveur distant l'adresse www.adobe.com/go/vid0163_fr. Vous trouverez un didacticiel consacr au dpannage des problmes de publication l'adresse www.adobe.com/go/vid0164_fr.
Placement de fichiers sur un serveur distant ou un serveur d'valuation l'aide du panneau Fichiers
1. Dans le panneau Fichiers (Fentre > Fichiers), slectionnez les fichiers tlcharger. Les fichiers sont gnralement slectionns dans l'affichage Site local, mais il est galement possible de les slectionner dans l'affichage Site distant. Remarque : Vous pouvez dcider de ne placer que les fichiers dont la version locale est plus rcente que la version distante. 2. Procdez de l'une des manires suivantes pour placer un fichier sur le serveur distant : Cliquez sur le bouton Placer dans la barre d'outils du panneau Fichiers. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur le fichier dans le panneau Fichiers, puis slectionnez Placer dans le menu contextuel. 3. Si le fichier n'a pas encore t enregistr, une bote de dialogue s'affiche (si vous l'avez indiqu parmi les prfrences de la catgorie Site de la bote de dialogue Prfrences) pour vous permettre de l'enregistrer avant de le placer sur le serveur distant. Cliquez sur Oui pour enregistrer le fichier ou sur Non pour placer la version prcdemment enregistre sur le serveur distant. Remarque : Si vous n'enregistrez pas le fichier, aucune des modifications effectues depuis le dernier enregistrement ne sera place sur le serveur distant. Toutefois, le fichier reste ouvert, ce qui vous permet encore d'enregistrer les changements aprs avoir plac le fichier sur le serveur. 4. Cliquez sur Oui si vous souhaitez envoyer les fichiers dpendants associs aux fichiers slectionns ou sur Non si vous ne voulez pas les envoyer. L'option par dfaut est de ne pas transfrer les fichiers indpendants. Vous pouvez dfinir cette option en slectionnant Edition > Prfrences > Site. Remarque : Il est en gnral conseill de transfrer les fichiers dpendants lorsque vous archivez un nouveau fichier, mais si les versions les plus rcentes des fichiers dpendants figurent dj sur le serveur distant, il n'est pas utile de les transfrer nouveau. Pour arrter le transfert de fichier n'importe quel moment, cliquez sur le bouton Annuler de la bote de dialogue Activit fichiers en arrireplan.
Placement de fichiers sur un serveur distant l'aide de la fentre du document

1. Assurez-vous que le document est actif dans la fentre du document. 2. Procdez de l'une des manires suivantes pour placer un fichier : Choisissez Site > Placer. Cliquez sur l'icne Gestion des fichiers dans la barre d'outils de la fentre du document, puis slectionnez Placer dans le menu. Remarque : Si le fichier actuel n'est pas associ au site slectionn dans le panneau Fichiers, Dreamweaver tente de dterminer quel site dfini localement le fichier actuel appartient. Si ce fichier courant n'appartient qu' un seul site local, Dreamweaver ouvre ce site, puis effectue l'opration de placement.

Haut de la page
Gestion des transferts de fichiers
Vous pouvez afficher l'tat des oprations de transfert de fichiers, ainsi que la liste des fichiers transfrs et de leurs rsultats (transfert russi, ignor ou rat). Vous pouvez galement crer un journal des activits relatives aux fichiers. Remarque : Dreamweaver vous permet d'effectuer d'autres activits non lies au serveur lors du transfert de fichiers vers le serveur ou partir
384
de ce dernier.
Annulation d'un transfert de fichier

Cliquez sur le bouton Annuler de la bote de dialogue Transfert de fichiers en arrire-plan. Si la bote de dialogue n'est pas affiche, cliquez sur le bouton Activit fichiers dans le bas du panneau Fichiers.
Affichage de la bote de dialogue Activit fichiers en arrire-plan pendant les transferts

Cliquez sur le bouton Activit fichiers ou Journal dans le bas du panneau Fichiers. Remarque : Vous ne pouvez pas masquer ni supprimer le bouton Journal. Il s'agit d'une partie permanente du panneau.
Affichage des dtails du dernier transfert de fichiers

1. Cliquez sur le bouton Journal en bas du panneau Fichiers pour ouvrir la bote de dialogue Activit fichiers en arrire-plan. 2. Cliquez sur la flche Dtails.
Enregistrement d'un journal du dernier transfert de fichier

1. Cliquez sur le bouton Journal en bas du panneau Fichiers pour ouvrir la bote de dialogue Activit fichiers en arrire-plan. 2. Cliquez sur le bouton Enregistrer journal et enregistrez les informations sous forme de fichier texte. Vous pouvez alors analyser les mouvements de fichiers en ouvrant le fichier journal dans Dreamweaver ou dans un diteur de texte. Voir aussi Didacticiel consacr au placement de fichiers Didacticiel consacr au dpannage des problmes de publication
385
Gestion des fichiers et des dossiers

A propos de la gestion des fichiers et des dossiers Utilisation du panneau Fichiers Affichage de fichiers et de dossiers Utilisation des fichiers depuis le panneau Fichiers Recherche de fichiers dans votre site Dreamweaver Identification et suppression des fichiers non utiliss Accs aux sites, un serveur et aux disques locaux Personnalisation des dtails de fichiers et de dossiers affichs dans la forme dveloppe du panneau Fichiers
A propos de la gestion des fichiers et des dossiers
Haut de la page
Dreamweaver possde un panneau Fichiers qui permet de grer et de transfrer des fichiers vers un serveur distant et partir de celui-ci. Lorsque vous transfrez des fichiers entre le site local et le site distant, les structures de fichiers et de dossiers parallles sur les deux sites sont prserves. Lors du transfert de fichiers entre les sites, Dreamweaver cre les dossiers ncessaires s'ils n'existent pas encore sur l'un des sites. Vous pouvez galement synchroniser les fichiers entre le site local et le site distant. Dans ce cas, Dreamweaver copie les fichiers requis dans les deux sens et supprime, le cas chant, les fichiers inutiles.
Utilisation du panneau Fichiers
Haut de la page
Le panneau Fichiers vous permet d'afficher des fichiers et des dossiers (qu'ils soient ou non associs un site Dreamweaver) et d'effectuer des oprations courantes de maintenance, comme l'ouverture et le dplacement de fichiers. Remarque : Dans les versions prcdentes de Dreamweaver, le panneau Fichiers s'appelait le panneau Site. Vous pouvez dplacer le panneau Fichiers selon vos besoins et dfinir ses prfrences. Utilisez ce panneau pour effectuer les tches suivantes : Accs aux sites, un serveur et aux disques locaux Affichage de fichiers et de dossiers Gestion de fichiers et de dossiers dans le panneau Fichiers Pour les sites Dreamweaver, utilisez les options suivantes pour afficher ou transfrer des fichiers :
Options du panneau Fichiers en mode dvelopp. A. Menu du site B. Connecter ou Dconnecter C. Actualiser D. Afficher le journal FTP du site E. Vue Fichiers du site F. Serveur d'valuation G. Mode Rfrentiel H. Acqurir le(s) fichier(s) I. Placer le(s) fichier(s) J. Extraire le(s) fichier(s) K. Archiver L. Synchroniser M. Dvelopper/Rduire Remarque : Les boutons Fichiers du site, Serveur d'valuation et Synchroniser ne sont visibles que dans le panneau Fichiers en mode dvelopp. Menu contextuel Site Permet de slectionner un site Dreamweaver et d'afficher ses fichiers. Vous pouvez galement utiliser le menu Site pour accder tous les fichiers situs sur votre disque local, tout comme l'Explorateur Windows (Windows) ou le Finder (Macintosh). Connecter ou Dconnecter (Protocoles FTP, RDS et WebDAV) Se connecte au site distant ou s'en dconnecte. Par dfaut, Dreamweaver se dconnecte du site distant aprs 30 minutes d'inactivit (FTP uniquement). Pour modifier cette dure, choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh), puis slectionnez la catgorie Site dans la liste de gauche. Actualiser Met jour les rpertoires du site local et du site distant. Utilisez ce bouton pour dclencher manuellement une mise jour des rpertoires si vous avez dsactiv les options Actualiser automatiquement la liste des fichiers locaux ou Actualiser automatiquement la liste des fichiers distants dans la bote de dialogue Dfinition du site. Vue Fichiers du site Affiche la structure des fichiers prsents sur le site local et le site distant dans les volets du panneau Fichiers. Le site apparaissant dans le volet gauche et droit dpend d'un paramtre de prfrence. La vue Fichiers du site correspond au mode d'affichage par dfaut du panneau Fichiers. Vue Serveur d'valuation Affiche la structure des rpertoires du serveur d'valuation et du site local. Mode Rfrentiel Affiche le rfrentiel Subversion (SVN).
386
Acqurir le(s) fichier(s) Copie les fichiers slectionns depuis le site distant vers le site local (en crasant, le cas chant, les copies locales existantes des fichiers). Si l'option Activer l'archivage et l'extraction de fichier est active, 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 dsactive, les copies du fichier seront accessibles en lecture et criture. Remarque : Les fichiers que Dreamweaver copie sur le site distant ou le serveur d'valuation sont ceux slectionns dans le volet actif du panneau Fichiers. Si le volet actif est Site distant, ce sont les fichiers slectionns sur le serveur distant ou le serveur d'valuation qui sont copis ; si le volet actif est Fichiers locaux, Dreamweaver copie la version prsente sur le serveur distant ou le serveur d'valuation des fichiers slectionns sur le site local. Placer le(s) fichier(s) Copie les fichiers slectionns depuis le site local vers le site distant. Remarque : Les fichiers que Dreamweaver copie sur le site distant ou le serveur d'valuation sont ceux slectionns dans le volet actif du panneau Fichiers. Si le volet actif est Fichiers locaux, ce sont les fichiers slectionns sur le site local qui sont copis vers le site distant ou le serveur d'valuation ; si le volet actif est Site distant, Dreamweaver copie la version prsente sur le site local des fichiers slectionns sur le site distant. Si vous placez un fichier qui n'existe pas encore sur le site distant et que l'option Activer l'archivage et l'extraction de fichier est active, le fichier est ajout au site distant et reoit l'tat extrait . Si vous ne voulez pas que le fichier ajout soit dot de cet tat, cliquez sur le bouton Archiver. Extraire le(s) fichier(s) Transfre une copie du fichier du serveur distant vers le site local (en crasant la copie locale de ce fichier, le cas chant) et donne au fichier l'tat extrait sur le serveur. Ce bouton n'est pas disponible si l'option Activer l'archivage et l'extraction de fichier est dsactive pour le site en cours dans la bote de dialogue Dfinition du site. Archiver Transfre une copie du fichier local vers le serveur distant, de manire ce qu'il puisse tre modifi par d'autres membres de l'quipe. Le fichier local passe alors en lecture seule. Cette option n'est pas disponible si l'option Activer l'archivage et l'extraction de fichier est dsactive pour le site slectionn dans la bote de dialogue Dfinition du site. Synchroniser Synchronise les fichiers entre les dossiers locaux et distants. Le bouton Dvelopper/Rduire dveloppe ou rduit le panneau Fichiers afin d'afficher un ou deux volets.
Haut de la page
Affichage de fichiers et de dossiers
Le panneau Fichiers vous permet d'ouvrir des fichiers et des dossiers, qu'ils soient ou non associs un site Dreamweaver. Lorsque vous affichez des sites, des fichiers ou des dossiers dans le panneau Fichiers, vous pouvez modifier la taille de la zone d'affichage, et, pour les sites Dreamweaver, vous pouvez dvelopper ou rduire le panneau Fichiers. Pour les sites Dreamweaver, il est galement possible de personnaliser le panneau Fichiers en modifiant la vue (site local ou distant) qui s'affiche par dfaut dans le panneau rduit. Vous pouvez galement basculer l'affichage du contenu dans le panneau Fichiers dvelopp, en utilisant l'option Toujours afficher.
Ouverture ou fermeture du panneau Fichiers

Choisissez Fentre > Fichiers.
Recherche de fichiers dans le panneau Fichiers (Mac OS, utilisateurs de Creative Cloud uniquement)
La fonction de recherche en direct permet de localiser des fichiers en fonction de leur nom ou de texte qu'ils contiennent. Le site slectionn dans le panneau Fichiers est utilis pour la recherche. Si aucun site n'est slectionn dans le panneau, l'option de recherche ne s'affiche pas. Pour plus d'informations, voir Recherche de fichiers en fonction de leur nom ou de leur contenu.
Dveloppement ou rduction du panneau Fichiers (sites Dreamweaver uniquement)

Dans le panneau Fichiers (Fentre > Fichiers), cliquez sur le bouton Dvelopper/Rduire de la barre d'outils. Remarque : Si vous cliquez sur le bouton Dvelopper/Rduire pour dvelopper le panneau alors qu'il est ancr, celui-ci s'agrandit et vous empche de travailler dans la fentre de document. Pour revenir la fentre de document, cliquez de nouveau sur le bouton Dvelopper/Rduire afin de rduire le panneau. Si vous cliquez sur le bouton Dvelopper/Rduire pour dvelopper le panneau alors qu'il n'est pas ancr, vous pouvez poursuivre votre travail dans la fentre de document. Avant de pouvoir ancrer de nouveau le panneau, vous devez le rduire. Dans sa forme rduite, le panneau Fichiers affiche le contenu du site local, du site distant ou du serveur d'valuation sous la forme d'une liste de fichiers. Sous sa forme dveloppe, le panneau affiche le site local et soit le site distant, soit le serveur d'valuation.
Modification de la taille de la zone d'affichage dans le panneau Fichiers dvelopp

Effectuez l'une des oprations suivantes lorsque le panneau Fichiers (Fentre > Fichiers) est dvelopp : Faites glisser la barre sparant les volets gauche et droit pour modifier la taille de la zone d'affichage du volet souhait. Utilisez les barres de dfilement situes dans la partie infrieure du panneau Fichiers pour faire dfiler le contenu des volets.
Modification de l'affichage du site dans le panneau Fichiers (sites Dreamweaver uniquement)

Effectuez l'une des oprations suivantes : Dans le panneau Fichiers (Fentre > Fichiers) affich sous sa forme rduite, slectionnez Affichage local, Affichage distant, Serveur d'valuation ou Affichage de la carte dans le menu (o la vue actuelle s'affiche). Remarque : L'option Affichage local apparat par dfaut dans le menu Vue du site.
387
Dans le panneau Fichiers (Fentre > Fichiers) affich sous sa forme dveloppe, cliquez sur le bouton Fichiers du site (pour le site distant), le bouton Serveur d'valuation ou le bouton Fichiers du rfrentiel.
A. Fichiers du site B. Serveur d'valuation C. Fichiers du rfrentiel Remarque : Pour pouvoir afficher un site distant un serveur d'valuation ou un rfrentiel, vous devez configurer un site distant, un serveur d'valuation ou un rfrentiel SVN.
Affichage de fichiers en dehors d'un site Dreamweaver

Le menu Site permet de naviguer sur votre ordinateur comme vous le feriez l'aide de l'Explorateur Windows ou du Finder (Macintosh).
Haut de la page
Utilisation des fichiers depuis le panneau Fichiers
Vous pouvez ouvrir ou renommer les fichiers ; ajouter, dplacer ou supprimer des fichiers ; ou encore actualiser le panneau Fichiers aprs avoir modifi les fichiers. Pour les sites Dreamweaver, vous pouvez galement identifier les fichiers (sur le site local ou distant) mis jour depuis leur dernier transfert.
Ouverture d'un fichier

1. Dans le panneau Fichiers (Fentre > Fichiers), slectionnez un site, un serveur ou un lecteur dans le menu contextuel (dans lequel le site, le serveur ou le lecteur s'affiche). 2. Recherchez et slectionnez le fichier ouvrir. 3. Effectuez l'une des oprations suivantes : Double-cliquez sur l'icne du fichier. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur l'icne du fichier, puis choisissez Ouvrir. Le fichier s'ouvre dans la fentre de document de Dreamweaver.
Cration d'un fichier ou d'un dossier

1. Slectionnez un fichier ou un dossier dans le panneau Fichiers (Fentre > Fichiers). Dreamweaver cre le fichier ou le dossier dans le dossier slectionn actuellement ou dans le mme dossier que celui dans lequel le fichier slectionn se trouve. 2. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis slectionnez Nouveau fichier ou Nouveau dossier. 3. Saisissez le nom du nouveau fichier ou dossier. 4. Appuyez sur la touche Entre (Windows) ou Retour (Macintosh).
Suppression d'un fichier ou d'un dossier

1. Slectionnez le fichier supprimer dans le panneau Fichiers (Fentre > Fichiers). 2. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis choisissez Edition > Supprimer.
Modification du nom d'un fichier ou d'un dossier

1. Slectionnez le fichier renommer dans le panneau Fichiers (Fentre > Fichiers). 2. Procdez de l'une des manires suivantes pour activer le nom du fichier ou du dossier : Cliquez sur le nom du fichier, attendez, puis cliquez de nouveau. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur l'icne du fichier, puis choisissez Edition > Renommer.
388
3. Saisissez le nouveau nom la place du nom existant. 4. Appuyez sur la touche Entre (Windows) ou Retour (Macintosh).
Dplacement d'un fichier ou d'un dossier

1. Slectionnez le fichier dplacer dans le panneau Fichiers (Fentre > Fichiers). 2. Effectuez l'une des oprations suivantes : Copiez le fichier ou le dossier, puis collez-le son nouvel emplacement. Faites glisser le fichier ou le dossier vers son nouvel emplacement. 3. Actualisez le panneau Fichiers pour afficher le fichier ou le dossier son nouvel emplacement.
Actualisation du panneau Actifs

Effectuez l'une des oprations suivantes : Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur un fichier ou sur un dossier, puis choisissez Actualiser. (Sites Dreamweaver uniquement) Cliquez sur le bouton Actualiser dans la barre d'outils du panneau Fichiers (cette option actualise les deux panneaux). Remarque : Dreamweaver actualise le panneau Fichiers lorsque vous apportez des modifications dans une autre application, puis revenez Dreamweaver.
Recherche de fichiers dans votre site Dreamweaver
Haut de la page
La fonction de recherche de Dreamweaver permet de trouver facilement les fichiers slectionns, ouverts, extraits ou modifis rcemment dans votre site. Vous pouvez galement rechercher les fichiers les plus rcents dans votre site local ou distant.
Recherche d'un fichier ouvert dans votre site

1. Ouvrez le fichier dans la fentre de document. 2. Slectionnez Site > Reprer dans le site. Dreamweaver slectionne les fichiers dans le panneau Fichiers. Remarque : Si le fichier ouvert dans la fentre de document n'est pas associ au site actuel affich dans le panneau Fichiers, Dreamweaver tente de dterminer quel site Dreamweaver le fichier appartient. S'il ne correspond qu' un seul site local, Dreamweaver ouvre ce site dans le panneau Fichiers, puis met le fichier en surbrillance.
Recherche et slection des fichiers extraits dans un site Dreamweaver

Dans le panneau Fichiers (Fentre > Fichiers) affich sous sa forme rduite, cliquez sur le menu Options dans le coin suprieur droit du panneau Fichiers, puis slectionnez Modifier > Slectionner les fichiers extraits.
Dreamweaver slectionne les fichiers dans le panneau Fichiers.
Recherche d'un fichier slectionn dans votre site local ou distant

1. Slectionnez le fichier depuis l'affichage local ou distant du panneau Fichiers (Fentre > Fichiers). 2. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis slectionnez Retrouver sur le site local ou Retrouver sur le site distant (selon l'emplacement o le fichier a t slectionn). Dreamweaver slectionne les fichiers dans le panneau Fichiers.
Recherche et slection des fichiers qui sont plus rcents sur le site local que sur le site distant
Dans le panneau Fichiers (Fentre > Fichiers) affich sous sa forme rduite, cliquez sur le menu Options dans le coin suprieur droit du panneau Fichiers, puis slectionnez Modifier > Slectionner Local plus rcent. Dreamweaver slectionne les fichiers dans le panneau Fichiers.
Recherche et slection des fichiers qui sont plus rcents sur le site distant que sur le site local
Dans le panneau Fichiers (Fentre > Fichiers) affich sous sa forme rduite, cliquez sur le menu Options dans le coin suprieur droit du panneau Fichiers, puis slectionnez Edition > Slectionner distants plus rcents. Dreamweaver slectionne les fichiers dans le panneau Fichiers.
Recherche des fichiers rcemment modifis sur votre site

389
1. Dans le panneau Fichiers (Fentre > Fichiers) affich sous sa forme rduite, cliquez sur le menu Options dans le coin suprieur droit du panneau Fichiers, puis slectionnez Modifier > Slectionner Modifis rcemment. 2. Procdez de l'une des manires suivantes pour indiquer les dates prendre en compte dans le rapport : Pour que le rapport prenne en compte l'ensemble des fichiers modifis ces derniers jours, activez l'option Fichiers crs ou modifis dans le dernier, puis entrez une valeur dans la zone de texte. Pour que le rapport prenne en compte l'ensemble des fichiers modifis durant une priode donne, cliquez sur le bouton radio Fichiers crs ou modifis entre, puis spcifiez une dure. 3. (Facultatif) Entrer un nom d'utilisateur dans la zone Modifi par pour limiter votre recherche aux fichiers modifis par un utilisateur donn au cours de la priode indique. Remarque : Cette option est uniquement disponible pour les sites Contribute. 4. Indiquez l'emplacement o vous souhaitez afficher les fichiers compris dans le rapport l'aide des boutons radio, si ncessaire : Machine locale si le site ne comporte que des pages statiques. Serveur d'valuation si le site comporte des pages dynamiques. Remarque : Vous devez avoir dfini un serveur d'valuation dans la bote de dialogue Dfinition du site (XREF) pour utiliser cette option. Si cette opration n'a pas t effectue et qu'aucun prfixe URL n'a t entr pour ce serveur ou si vous excutez le rapport pour plus d'un site, cette option n'est pas disponible. Autre emplacement si vous souhaitez entrer un chemin dans la zone de texte. 5. Cliquez sur OK pour enregistrer vos paramtres. Dreamweaver slectionne les fichiers modifis durant la priode slectionne dans le panneau Fichiers.
Identification et suppression des fichiers non utiliss

Vous pouvez identifier et supprimer les fichiers qui ne sont plus utiliss par les autres fichiers de votre site. 1. Choisissez Site > Vrifier tous les liens du site. Dreamweaver vrifie tous les liens de votre site et affiche les liens rompus dans le panneau Rsultats. 2. Slectionnez Fichiers orphelins dans le menu du panneau Vrificateur de lien.
Haut de la page
Dreamweaver affiche l'ensemble des fichiers sans liens entrants. Ceci signifie qu'aucun des fichiers de votre site n'est li ces fichiers. 3. Slectionnez les fichiers que vous voulez supprimer et appuyez sur la touche Suppr. Important : Bien qu'aucun autre fichier du site ne soit li ces fichiers, une partie des fichiers de la liste peuvent tre lis d'autres fichiers. Procdez avec prudence lors de la suppression de fichiers.
Accs aux sites, un serveur et aux disques locaux
Haut de la page
Vous pouvez ouvrir, modifier et enregistrer les fichiers et dossiers de vos sites Dreamweaver, comme les fichiers ou dossiers qui ne font pas partie d'un site Dreamweaver. Outre les sites Dreamweaver, vous pouvez accder un serveur, un disque local ou votre bureau. Avant de pouvoir accder un serveur distant, vous devez configurer Dreamweaver de faon ce qu'il puisse fonctionner avec ce serveur. Remarque : La meilleure faon de grer des fichiers est de crer un site Dreamweaver.
Ouverture d'un site Dreamweaver existant

Dans le panneau Fichiers (Fentre > Fichiers), slectionnez un site dans le menu (dans lequel le site, le serveur ou le disque dur en cours d'utilisation s'affiche).
Ouverture d'un dossier sur un serveur FTP ou RDS distant

1. Dans le panneau Fichiers (Fentre > Fichiers), slectionnez un nom de serveur dans le menu (dans lequel le site, le serveur ou le disque dur en cours d'utilisation s'affiche).
390
Remarque : Les noms des serveurs que vous avez configurs pour fonctionner avec Dreamweaver apparaissent. 2. Naviguez vers ces fichiers et modifiez-les comme vous le faites habituellement.
Accs un disque local ou votre bureau

1. Dans le panneau Fichiers (Fentre > Fichiers), slectionnez Bureau, disque local ou disque compact dans le menu (dans lequel le site, le serveur ou le disque dur s'affiche). 2. Recherchez le fichier de votre choix, puis effectuez l'une des oprations suivantes : Ouverture de fichiers dans Dreamweaver ou dans une autre application Renommer des fichiers Copier des fichiers Supprimer des fichiers Faire glisser des fichiers Lorsque vous faites glisser un fichier d'un site Dreamweaver un autre site ou un dossier non li un site Dreamweaver, Dreamweavercopie le fichier, puis l'ajoute l'emplacement o vous le dposez. Si vous faites glisser un fichier et le dposez au sein du mme site Dreamweaver, Dreamweaverdplace le fichier l'emplacement o vous le dposez. Lorsque vous faites glisser un fichier qui n'est associ aucun site Dreamweaver vers un dossier qui n'est pas non plus associ un site Dreamweaver, Dreamweaver dplace le fichier l'emplacement o vous le dposez. Remarque : Pour que Dreamweaver dplace un fichier au lieu de le copier, maintenez la touche Maj (Windows) ou Commande (Macintosh) enfonce pendant que vous faites glisser et dposez le fichier. Pour copier un fichier que Dreamweaver dplacerait par dfaut, maintenez la touche Ctrl (Windows) ou Option (Macintosh) enfonce pendant que vous faites glisser et dposez le fichier.
Personnalisation des dtails de fichiers et de dossiers affichs dans la forme dveloppe du panneau Fichiers
Haut de la page
Lorsqu'un site Dreamweaver est affich dans le panneau Fichiers (en mode dvelopp), les informations lies aux fichiers et dossiers sont affiches dans des colonnes. Vous pouvez, par exemple, consulter le type du fichier ou la date de sa dernire modification. Vous pouvez personnaliser les colonnes en procdant de l'une des faons suivantes (certaines oprations sont disponibles uniquement pour les colonnes que vous ajoutez, et non pas pour les colonnes par dfaut) : Retrier ou raligner les colonnes Ajouter des colonnes (jusqu' 10 colonnes maximum) Masquer les colonnes (sauf la colonne des noms de fichiers) Dfinir les colonnes devant tre partages entre tous les utilisateurs connects un site Supprimer les colonnes (colonnes personnalises uniquement) Renommer les colonnes (colonnes personnalises uniquement) Associer des colonnes une Design Note (colonnes personnalises uniquement)
Modification de l'ordre des colonnes

Slectionnez le nom d'une colonne, puis cliquez sur le bouton flche vers le haut ou vers le bas afin de changer la position de la colonne slectionne. Remarque : Vous pouvez changer l'ordre de toutes les colonnes, sauf la colonne Nom, qui reste toujours en premire position.
Ajout, suppression ou modification de colonnes

391
2. Slectionnez un site, puis cliquez sur Modifier. 3. Dveloppez les paramtres avancs et choisissez la catgorie Colonnes mode Fichier. 4. Slectionnez une colonne, puis cliquez sur le bouton Plus (+) pour l'ajouter ou sur le bouton Moins () pour la supprimer. Remarque : Comme la colonne est immdiatement supprime sans qu'il vous soit demand de confirmation, soyez certain de rellement vouloir effectuer cette opration avant de cliquer sur le bouton Moins (). 5. Dans la zone Nom de colonne, indiquez le nom de votre colonne. 6. Choisissez une valeur dans le menu Associer Design Notes ou indiquez-en une. Remarque : Vous devez associer la nouvelle colonne une Design Note afin que des donnes s'affichent dans le panneau Fichiers. 7. Choisissez une option d'alignement pour dterminer la faon dont le texte doit tre align dans la colonne. 8. Activez ou dsactivez l'option Afficher afin d'afficher et de masquer respectivement la colonne. 9. Activez ou dsactivez l'option Partager avec tous les utilisateurs de ce site afin que la colonne soit accessible ou non tous les utilisateurs connects au site distant.
Tri en fonction d'une colonne dans le panneau Fichiers

Pour trier les listes, cliquez sur l'en-tte de la colonne en fonction de laquelle vous souhaitez effectuer le tri. Si vous cliquez plusieurs fois sur un mme en-tte de colonne, l'ordre dans lequel Dreamweaver trie la colonne est invers (ordre croissant ou dcroissant). Voir aussi [print]Prsentation du panneau Fichiers
392
Restauration de fichiers (utilisateurs de Contribute)

Haut de la page
Dreamweaver enregistre automatiquement plusieurs versions d'un document lorsque la compatibilit Adobe Contribute est active. Remarque : Contribute doit tre install sur le mme ordinateur que Dreamweaver. La restauration des fichiers doit tre active au niveau des paramtres administratifs de Contribute. Pour plus d'informations, voir Administration de Contribute. 1. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur un fichier dans le panneau Fichiers. 2. Slectionnez Restaurer la page. S'il existe une version prcdente de la page restaurer, la bote de dialogue Restauration s'affiche. 3. Slectionnez la version de la page restaurer et cliquez sur Restaurer. Voir aussi
393
Dfinition des prfrences de dure et de taille des tlchargements

Dreamweaver calcule la taille sur la base du contenu de toute la page, y compris tous les objets lis, tels que les images et les plug-ins. Dreamweaver estime la dure de tlchargement en fonction de la vitesse de connexion entre dans les prfrences de la Barre d'tat. Le temps de tlchargement rel dpend de l'tat du trafic sur Internet, Pour vrifier les dures de tlchargement pour une page Web particulire, il est intressant d'utiliser la rgle des 8 secondes ; c'est--dire que la plupart des utilisateurs n'attendront pas plus de huit secondes pour le tlchargement d'une page. 1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2. Slectionnez la catgorie Barre d'tat dans la liste de gauche. 3. Choisissez la vitesse de connexion partir de laquelle le temps de tlchargement sera calcul, puis cliquez sur OK. Voir aussi
394
Stockage des informations sur les fichiers dans des Design Notes
A propos des Design Notes Activation et dsactivation des Design Notes pour un site Association de Design Notes un fichier Utilisation des Design Notes
A propos des Design Notes
Haut de la page
Les Design Notes sont des notes cres pour un fichier donn. Les Design Notes sont associes au fichier qu'elles dcrivent, mais stockes dans un autre fichier. Le panneau Fichiers vous permet de voir les fichiers auxquels sont jointes des Design Notes, car une icne spcifique s'affiche dans la colonne Notes. Les Design Notes vous permettent de conserver des informations supplmentaires sur les documents, telles que des commentaires sur l'tat des fichiers ou le nom des fichiers source des images. Par exemple, si vous copiez un document d'un site dans un autre, vous pouvez ajouter ce dernier des Design Notes contenant un commentaire expliquant que le document original se trouve dans le dossier de l'autre site. Les Design Notes permettent galement de conserver des informations confidentielles, qu'il est impossible de laisser dans un document pour des raisons de scurit, par exemple des notes sur la faon dont un devis a t calcul, dont une configuration a t labore ou encore sur les facteurs de marketing qui ont influenc une dcision de production. Si vous ouvrez un fichier dans Adobe Fireworks ou Flash, puis l'exportez dans un autre format, Fireworks ou Flash enregistre automatiquement le nom du fichier source d'origine dans un fichier de Design Notes. Ainsi, si vous ouvrez le fichier maMaison.png dans Fireworks, puis l'exportez au format GIF en lui attribuant le nom maMaison.gif, Fireworks cre un fichier Design Notes du nom de maMaison.gif.mno. Ce fichier Design Notes contient le nom du fichier d'origine, sous la forme d'une URL file: absolue. De ce fait, les Design Notes du fichier maMaison.gif pourraient contenir la ligne suivante : fw_source="file:///Mydisk/sites/assets/orig/myhouse.png" Au mme titre, les Design Notes d'un fichier Flash pourraient contenir la ligne suivante : fl_source="file:///Mydisk/sites/assets/orig/myhouse.fla" Remarque : Pour pouvoir partager des Design Notes, les utilisateurs doivent dfinir le mme chemin d'accs pour la racine du site (par exemple, sites/assets/orig). Lorsque vous importez l'image dans Dreamweaver, le fichier de Design Notes est automatiquement copi sur le site, en mme temps que l'image. Si vous slectionnez cette image dans Dreamweaver et dcidez de la modifier l'aide de Fireworks, ce dernier ouvre directement le fichier d'origine pour vous permettre de le modifier.
Activation et dsactivation des Design Notes pour un site
Haut de la page
Les Design Notes sont associes un fichier mais sont conserves dans un fichier spar. Les Design Notes vous permettent de conserver des informations supplmentaires sur les documents, telles que des commentaires sur l'tat des fichiers ou le nom des fichiers source des images. L'activation et la dsactivation des Design Notes pour un site donn s'effectuent depuis la catgorie Design Notes de la bote de dialogue Dfinition du site. Lorsque vous activez les Design Notes, vous pouvez galement dcider de les partager avec d'autres utilisateurs. 1. Choisissez Site > Grer les sites. 2. Dans la bote de dialogue Grer les sites, slectionnez un site puis cliquez sur Modifier. 3. Dans la bote de dialogue Configuration du site, dveloppez Paramtres avancs, puis slectionnez la catgorie Design Notes. 4. Slectionnez Grer Design Notes pour activer les Design Notes (dslectionnez cette option pour les dsactiver). 5. Si vous souhaitez supprimer tous les fichiers de Design Notes locaux associs au site, cliquez sur Nettoyer puis sur Oui. Si vous voulez supprimer des fichiers Design Notes distants, vous devez le faire manuellement. Remarque : La commande Nettoyer Design Notes ne supprime que les fichiers MNO (Design Notes). Elle ne supprime pas le dossier _notes ni le fichier dwsync.xml qui s'y trouve. Dreamweaver emploie le fichier dwsync.xml pour grer les informations relatives la synchronisation du site. 6. Activez l'option Activer la fonction Tlcharger les Design Notes pour les partager afin de tlcharger les Design Notes associes au site en mme temps que les autres documents, puis cliquez sur OK. Si vous activez cette option, vous pouvez partager les Design Notes avec les autres membres de votre quipe. Lorsque vous placez ou acqurez un fichier, Dreamweaver place ou acquiert automatiquement le fichier de Design Notes associ.
395
Si vous n'activez pas cette option, Dreamweaver conserve les Design Notes localement, mais ne les tlcharge pas avec les fichiers. Si vous travaillez seul sur le site, vous pouvez dsactiver cette option afin d'amliorer les performances. Les Design Notes ne seront pas transfres sur le site distant lorsque vous archiverez ou placerez vos fichiers. En outre, il vous sera toujours possible d'ajouter et de modifier les Design Notes pour votre site local.
Association de Design Notes un fichier
Haut de la page
Vous pouvez crer un fichier de Design Notes pour chaque document ou modle de votre site. Vous pouvez galement crer des Design Notes pour des applets, des contrles ActiveX, des images, du contenu Flash, des objets Shockwave ainsi que des champs d'image figurant dans vos documents. Remarque : Si vous ajoutez des Design Notes un fichier modle, les documents que vous crez partir du modle n'hritent pas des Design Notes. 1. Effectuez l'une des oprations suivantes : Ouvrez le fichier dans la fentre du document, puis slectionnez Fichier > Design Notes. Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur le fichier, puis slectionnez Design Notes. Remarque : Si le fichier se trouve sur un site distant, vous devez d'abord l'extraire ou l'acqurir, puis le slectionner dans le dossier local. 2. Dans le menu Etat de l'onglet Informations lmentaires, slectionnez un tat pour le document. 3. Cliquez sur l'icne de date (au-dessus de la zone de texte Notes) pour insrer la date du jour dans les notes. 4. Entrez des commentaires dans la zone Notes. 5. Activez l'option Afficher l'ouverture du fichier afin que le fichier de Design Notes apparaisse chaque ouverture du fichier. 6. Dans l'onglet Toutes les infos, cliquez sur le bouton Plus (+) afin d'ajouter une paire cl/valeur ; slectionnez une paire, puis cliquez sur le bouton Moins () pour la supprimer. Par exemple, vous pouvez crer une cl Auteur (dans la zone Nom), puis lui attribuer la valeur Heidi (dans la zone Valeur). 7. Cliquez sur OK pour enregistrer les notes. Dreamweaver enregistre les notes au mme endroit que le fichier en cours, dans un dossier portant le nom _notes. Le fichier porte le nom complet du document de base, suivi de l'extension .mno. Par exemple, si le nom de fichier du document est index.html, le fichier de Design Notes associ s'appellera index.html.mno.
Utilisation des Design Notes

Aprs avoir associ des Design Notes un fichier, vous pouvez ouvrir le fichier Design Notes, modifier son tat ou le supprimer.
Haut de la page
Ouverture des Design Notes associes un fichier

Utilisez l'une des mthodes suivantes pour ouvrir les Design Notes : Ouvrez le fichier dans la fentre du document, puis slectionnez Fichier > Design Notes. Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur le fichier, puis slectionnez Design Notes. Dans la colonne Notes du panneau Fichiers, double-cliquez sur l'icne jaune Design Notes. Remarque : Pour afficher les icnes jaunes des Design Notes, choisissez Site > Grer les sites > [nom de votre site] > Modifier > Paramtres avancs > Colonnes mode Fichier. Slectionnez Notes dans la liste du panneau et choisissez l'option Afficher. Lorsque vous cliquez sur le bouton Dvelopper de la barre d'outils Fichiers pour afficher la fois le site local et le site distant, votre site local contient une colonne Notes qui affiche une icne de note jaune pour tout fichier contenant une Design Note.
Attribution d'un tat de Design Notes personnalis

1. Ouvrez les Design Notes du fichier ou de l'objet concern (voir la procdure ci-dessus). 2. Cliquez sur l'onglet Toutes les infos. 3. Cliquez sur le bouton Plus (+). 4. Dans le champ Nom, tapez tat. 5. Dans le champ Valeur, tapez le nom du nouvel tat. S'il existe dj une valeur d'tat, elle est remplace par la nouvelle. 6. Cliquez sur l'onglet Infos de base et remarquez que la nouvelle valeur de l'tat apparat dans le menu contextuel Etat. Remarque : Vous ne pouvez avoir qu'une valeur personnalise la fois dans le menu d'tat. Si vous suivez cette procdure une nouvelle fois, Dreamweaver remplace la valeur de l'tat saisie la premire fois par la nouvelle valeur.
396
Suppression de votre site des Design Notes non associes

1. Choisissez Site > Grer les sites. 2. Slectionnez le site et cliquez sur Modifier. 3. Dans la bote de dialogue Dfinition du site, slectionnez la catgorie Design Notes dans la liste de gauche. 4. Cliquez sur le bouton Nettoyer. Dreamweaver vous invite alors vrifier que tous les fichiers de Design Notes qui ne sont plus associs un fichier dans le site doivent bien tre supprims. Si vous utilisez Dreamweaver pour supprimer un fichier auquel est associ un fichier de Design Notes, Dreamweaver supprime galement le fichier de Design Notes. En gnral, il ne peut donc exister de fichiers de Design Notes orphelins que si vous supprimez ou renommez un fichier l'extrieur de Dreamweaver. Remarque : Si vous dsactivez l'option Grer Design Notes avant de cliquer sur Nettoyer, Dreamweaver supprime tous les fichiers de Design Notes du site. Voir aussi
397
Synchronisation de fichiers
Synchronisation des fichiers entre le site local et le site distant
Synchronisation des fichiers entre le site local et le site distant
Haut de la page
Aprs avoir cr des fichiers sur votre site local et votre site distant, il vous est possible de synchroniser les fichiers entre les deux sites. Remarque : Si votre site distant est un serveur FTP (et non un serveur en rseau), la synchronisation de vos fichiers s'effectuera en FTP. Avant de synchroniser vos sites, vous pouvez vrifier les fichiers placer, acqurir, supprimer ou ignorer. Par ailleurs, une fois la synchronisation effectue, Dreamweaver vous indique les fichiers qui ont t mis jour.
Identification des fichiers qui sont plus rcents sur le site local ou le site distant, sans effectuer de synchronisation
Procdez de l'une des faons suivantes dans le panneau Fichiers : Cliquez sur le menu Options dans le coin suprieur droit puis slectionnez Edition > Slectionner locaux plus rcents ou Edition > Slectionner distants plus rcents.
Dans le panneau Fichiers, cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis choisissez Slectionner > Slectionner locaux plus rcents ou Slectionner > Slectionner distants plus rcents.
Affichage d'informations de synchronisation dtailles pour un fichier prcis

Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur le fichier au sujet duquel vous voulez obtenir des informations, puis slectionnez Afficher les informations de synchronisation. Remarque : Pour que cette fonctionnalit soit disponible, l'option Conserver les informations de synchronisation doit tre active dans la catgorie Distant de la bote de dialogue Dfinition du site.
Synchronisation de vos fichiers

1. Dans le panneau Fichiers (Fentre > Fichiers), slectionnez un site dans le menu (dans lequel le site, le serveur ou le disque dur en cours d'utilisation s'affiche). 2. (Facultatif) Slectionnez des fichiers ou des dossiers prcis, ou passez l'tape suivante pour synchroniser le site entier. 3. Cliquez sur le menu Options dans le coin suprieur droit du panneau Fichiers, puis choisissez Site > Synchroniser. Vous pouvez galement cliquer sur le bouton Synchroniser dans le haut du panneau Fichiers pour synchroniser les fichiers. 4. Dans le menu Synchroniser, ralisez une des oprations suivantes : Pour procder la synchronisation du site entier, slectionnez Tout le site nom du site. Pour ne synchroniser que les fichiers slectionns, slectionnez Fichiers locaux slectionns seulement (ou Fichiers distants slectionns seulement si vous avez effectu votre slection depuis l'affichage Site distant du panneau Fichiers). 5. Cliquez sur la direction dsire pour le transfert : Placer les fichiers plus rcents sur hte distant Tlcharge tous les fichiers locaux qui n'existent pas sur le serveur distant ou qui ont t modifis depuis le dernier tlchargement. Obtenir les fichiers plus rcents depuis l'hte distant Tlcharge tous les fichiers distants qui n'existent pas localement ou qui ont t modifis depuis le dernier tlchargement. Placer et obtenir les fichiers plus rcents Transfre, selon le cas, les versions les plus rcentes de tous les fichiers sur le site local ou sur le site distant. 6. Indiquez si les fichiers qui sont prsents sur le site de destination mais n'ont pas d'quivalent sur le site d'origine doivent tre supprims. Cette option n'est pas disponible si vous slectionnez les options d'acquisition et de placement dans le menu de direction. Si vous avez slectionn Placer les fichiers plus rcents sur hte distant et que vous activez l'option d'effacement, tous les fichiers du site distant qui n'ont pas d'quivalent sur le site local sont supprims. Si vous avez slectionn Obtenir les fichiers plus rcents depuis l'hte distant et que vous activez l'option d'effacement, tous les fichiers du site local qui n'ont pas d'quivalent sur le site distant sont supprims. 7. Cliquez sur Aperu. Remarque : Avant de synchroniser les fichiers, vous devez procder un aperu des actions que Dreamweaver va devoir excuter pour
398
cette tche. Si la version la plus rcente de chacun des fichiers slectionns figure dj aux deux endroits et que rien n'a besoin d'tre supprim, un message d'avertissement vous signale qu'aucune synchronisation n'est ncessaire. Dans le cas contraire, la bote de dialogue Synchroniser s'affiche et vous permet de modifier les actions (placer, acqurir, supprimer et ignorer) pour ces fichiers avant d'excuter la synchronisation. 8. Vrifiez les diffrentes actions effectuer. 9. Pour modifier l'action pour un fichier particulier, slectionnez-le puis cliquez sur l'une des icnes d'action situes en bas de la fentre d'aperu. Comparer L'action Comparer ne fonctionne que si vous avez install et spcifi un outil de comparaison de fichiers dans Dreamweaver. Si l'icne Action est en gris, l'action correspondante n'est pas disponible. Marquer les fichiers comme synchroniss Cette option vous permet d'indiquer que le ou les fichiers slectionns sont dj synchroniss. 10. Cliquez sur OK pour synchroniser les fichiers. Vous pouvez afficher ou enregistrer les dtails de la synchronisation dans un fichier local. Voir aussi
399
Prsentation du codage de document

Le codage de document prcise le codage utilis pour les caractres dans le document. Le codage du document est spcifi dans une balise meta, insre dans l'en-tte du document ; il indique au navigateur et Dreamweaver le mode de dcodage du document et les polices utiliser pour afficher le texte dcod. Par exemple, si vous spcifiez Occidental (Latin1), la balise meta suivante est insre : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">. Le document affich dans Dreamweaver contient les polices que vous spcifiez dans Prfrences de polices pour le codage Occidental (Latin1) ; ce mme document affich dans un navigateur contient les polices que l'utilisateur du navigateur prcise pour le codage Occidental (Latin1). Si vous spcifiez Japonais (Shift JIS), la balise meta suivante est insre : <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">. Le document affich dans Dreamweaver contient les polices que vous spcifiez pour les codages du japonais ; ce mme document affich dans un navigateur contient les polices que l'utilisateur du navigateur prcise pour les codages du japonais. Vous modifier le codage du document dans une page et modifier le codage utilis par dfaut par Dreamweaver pour crer de nouveaux documents, y compris les polices utilises pour afficher chaque codage. Voir aussi [print]Dfinition du type et du codage par dfaut d'un document
400
Liens et navigation
Personnalisation d'une barre de menus Spry David Powers (1er janvier 2011) didacticiel Voyez comment rendre une barre de menus standard bien plus lgante par une planification soigneuse et une bonne comprhension de CS5.
401
A propos des liens et de la navigation

A propos des liens Chemins absolus, relatifs au documents et relatifs la racine du site
A propos des liens
Haut de la page
Une fois que vous avez dfini un site Dreamweaver dans lequel stocker les documents de votre site Web et que vous avez cr des pages HTML, il vous reste tablir des connexions entre vos documents et d'autres types de documents. Dreamweaver propose plusieurs mthodes pour crer des liens vers des documents, des images, des fichiers multimdias ou des logiciels pouvant tre tlchargs. Vous pouvez tablir des liens vers n'importe quel texte ou n'importe quelle image d'un document, mme s'ils se trouvent dans un en-tte, une liste, un tableau, un lment positionnement absolu (lment PA) ou un cadre. Il existe diffrentes mthodes de cration et de gestion de liens. Certains concepteurs de pages Web prfrent crer des liens vers des pages ou des fichiers qui n'existent pas encore, alors que d'autres prfrent crer d'abord tous les fichiers et pages, puis ajouter les liens. Une autre mthode de gestion des liens consiste crer des pages de type espace rserv qui vous permettent d'ajouter des liens rapidement et de les vrifier avant de terminer toutes les pages de votre site.
Chemins absolus, relatifs au documents et relatifs la racine du site
Haut de la page
Pour crer des liens, il est indispensable de comprendre le chemin d'accs qui s'tablit entre le document ou l'actif partir duquel vous tablissez un lien et le document point par ce lien. Chaque page Web possde une adresse unique, appele URL (Uniform Resource Locator) Cependant, lorsque vous crez un lien local (entre deux documents du mme site), vous n'avez en gnral pas besoin de spcifier l'URL complte du document vers lequel vous crez le lien ; il est prfrable d'indiquer un chemin relatif, partir du document actif ou de la racine du site. Il existe trois types de chemins d'accs de liaison : Chemins absolus (par exemple, http://www.adobe.com/support/dreamweaver/contents.html). Chemins relatifs au document (par exemple dreamweaver/contents.html). Chemins relatifs la racine du site (par exemple /support/dreamweaver/contents.html). Dreamweaver vous permet de choisir aisment le type de chemin crer pour vos liens. Remarque : Il est prfrable d'utiliser le type de lien qui vous convient le mieux, qu'il soit relatif la racine du site ou au document. L'exploration des liens, contrairement la saisie des chemins, garantit que vous entrez toujours le chemin correct.
Chemins absolus
Les chemins absolus indiquent l'URL complte du document li, y compris le protocole utiliser (en gnral http:// pour les pages Web), par exemple, http://www.adobe.com/support/dreamweaver/contents.html. Pour un actif de type image, l'URL entire peut ressembler http://www.adobe.com/support/dreamweaver/images/image1.jpg. Vous devez utiliser un chemin absolu lorsque vous crez un lien vers un document ou un actif situ en dehors du site courant. Vous pouvez galement utiliser des liens de chemins absolus pour les liens locaux (vers des documents sur le mme site), mais cette approche est dconseille. Si vous dplacez le site vers un autre domaine, tous les liens de chemins absolus locaux seront rompus. De plus, l'utilisation de chemins relatifs pour les liens locaux offre une plus grande souplesse si vous devez dplacer des fichiers au sein de votre site. Remarque : Lors de l'insertion d'images (et non de liens), vous pouvez utiliser un chemin absolu vers une image qui rside sur un serveur distant (c'est--dire, une image qui n'est pas disponible sur le disque dur local).
Chemins relatifs au document

Les chemins relatifs au document sont gnralement prfrables pour les liens locaux dans la plupart des sites Web. Ils sont particulirement utiles lorsque le document actif et le document ou l'actif cible du lien se trouvent dans le mme dossier et le resteront vraisemblablement. Vous pouvez galement utiliser un chemin relatif au document ou l'actif pour pointer sur un document situ dans un autre dossier, en indiquant le chemin entre le document actif et le document li, au sein de la hirarchie de dossiers. Indiquer un chemin relatif au document consiste tout simplement laisser de ct la partie du chemin absolu qui est identique pour le document actuel et le document ou l'actif li, en n'indiquant que la partie du chemin qui diffre. Par exemple, supposons que la structure de votre site soit la suivante :
402
Pour tablir un lien depuis contents.html vers hours.html (ces deux fichiers sont dans le mme dossier), utilisez le chemin relatif hours.html : Pour tablir un lien de contents.html vers tips.html (qui se trouve dans le sous-dossier resources ), utilisez le chemin relatif resources/tips.html. A chaque barre oblique (/), vous descendez d'un niveau dans la hirarchie des dossiers. Pour tablir un lien de contents.html vers index.html (qui se trouve dans le dossier parent, un niveau au-dessus de contents.html), utilisez le chemin relatif ../index.html. Deux points et une barre oblique (../) permettent de remonter d'un niveau dans la hirarchie des dossiers. Pour tablir un lien de contents.html vers catalog.html (qui se trouve dans un autre sous-dossier du dossier parent), utilisez le chemin relatif ../products/catalog.html. Ici, la squence ../ fait remonter au dossier parent, et products/ fait redescendre dans le sous-dossier products . Lorsque vous dplacez des fichiers sous la forme d'un groupe (par exemple, lorsque vous dplacez un dossier entier, afin que tous les fichiers au sein de ce dossier conservent les mmes chemins relatifs entre eux), il n'est pas ncessaire de mettre jour les liens relatifs au document entre ces fichiers. Toutefois, si vous dplacez individuellement un fichier qui contient des liens relatifs au document, ou un fichier sur lequel pointe un lien relatif partir d'un autre document, il est ncessaire de mettre ces liens jour (si vous dplacez ou renommez des fichiers dans le panneau Fichiers, Dreamweaver met automatiquement jour tous les liens concerns).
Chemins relatifs la racine du site

Les chemins relatifs la racine du site reprsentent le chemin d'accs un document partir du dossier racine du site. Ces chemins peuvent tre utiles si vous travaillez sur un grand site Web qui utilise plusieurs serveurs ou un seul serveur qui est l'hte de plusieurs sites. Toutefois, si vous n'tes pas familier avec ce type de chemin, adoptez plutt les chemins relatifs au document. Un chemin relatif la racine commence par une barre oblique, qui reprsente le dossier racine du site. Par exemple, /support/tips.html est le chemin relatif la racine d'un fichier (tips.html) situ dans le sous-dossier support de la racine du site. Un chemin relatif la racine reprsente souvent le meilleur moyen d'indiquer les liens si vous dplacez frquemment des fichiers HTML d'un dossier un autre dans votre site Web. Lorsque vous dplacez un document qui contient des liens relatifs la racine du site, il n'est pas ncessaire de modifier les liens, car les liens sont relatifs la racine du site, et non au document lui-mme. Par exemple, si vos fichiers HTML utilisent des liens relatifs la racine du site pour les fichiers dpendants (les images en particulier), les liens des fichiers dpendants restent valides si vous dplacez les fichiers HTML. Toutefois, si vous dplacez ou renommez les documents sur lesquels pointent des liens relatifs la racine du site, vous devrez mettre ces liens jour, mme si les chemins relatifs de ces documents entre eux n'ont pas chang. Par exemple, si vous dplacez un dossier, vous devez mettre jour tous les liens relatifs la racine du site vers les fichiers que ce dossier contient (si vous dplacez ou renommez des fichiers dans le panneau Fichiers, Dreamweaver met automatiquement jour tous les liens concerns). Voir aussi
403
Cartes graphiques
A propos des cartes graphiques Insertion de cartes graphiques ct client Modification des zones ractives d'une carte graphique
A propos des cartes graphiques
Haut de la page
Une carte graphique est une image ayant t divise en rgions appeles zones ractives. Lorsque vous cliquez sur une zone ractive, une action est excute, par exemple, l'ouverture d'un nouveau fichier. Les cartes graphiques ct client stockent les informations relatives aux liens hypertextes dans le document HTML, alors que les cartes graphiques ct serveur conservent ces informations dans un fichier de carte spar. Lorsqu'un visiteur de site clique sur une zone ractive dans l'image, l'URL associe est envoye directement au serveur. Ceci rend les cartes graphiques ct client plus rapides que leurs quivalents sur le serveur, car celui-ci n'a pas interprter les coordonnes du point sur lequel l'utilisateur a cliqu. Les cartes graphiques ct 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 rfrences aux cartes graphiques sur le serveur, dans les documents existants. Vous pouvez utiliser les cartes graphiques ct client et ct serveur dans le mme document. Les navigateurs qui prennent en charge les deux types de cartes donnent la priorit aux cartes graphiques ct client. Pour inclure une carte graphique sur le serveur dans un document, vous devez crire le code HTML appropri.
Insertion de cartes graphiques ct client
Haut de la page
Pour insrer une carte graphique ct client, crez une zone ractive, puis dfinissez un lien qui s'ouvre lorsqu'un utilisateur clique sur la zone ractive. Remarque : Vous pouvez crer plusieurs zones ractives, mais elles font toutes partie de la mme carte graphique. 1. Slectionnez l'image dans la fentre de document. 2. Dans l'inspecteur Proprits, cliquez sur la flche d'agrandissement situe dans le coin infrieur droit pour visualiser toutes les proprits. 3. Dans la zone Nom de la carte, entrez un nom unique pour la carte graphique. Si vous utilisez plusieurs cartes graphiques dans le mme document, veillez donner chaque carte un nom unique. 4. Pour dfinir les zones de la carte graphique, procdez de l'une des manires suivantes : Slectionnez l'outil Cercle et faites glisser le pointeur sur l'image pour crer une zone ractive circulaire. et faites glisser le pointeur sur l'image pour crer une zone ractive rectangulaire.
Slectionnez l'outil Rectangle
Slectionnez l'outil Polygone pour dfinir une zone ractive de forme irrgulire en cliquant pour chaque point de segment de droite. Cliquez sur l'outil Flche pour fermer la forme. Aprs avoir cr la zone ractive, l'inspecteur Proprits de cette zone apparat. 5. Dans la zone Lien de l'inspecteur Proprits de la zone ractive, cliquez sur l'icne du dossier l'utilisateur clique sur la zone ractive, ou tapez le chemin. pour rechercher le fichier ouvrir lorsque
6. Dans le menu droulant Cible, choisissez la fentre dans laquelle le fichier devra s'ouvrir ou tapez son nom Les noms de tous les cadres du document actif apparaissent dans la liste droulante. Si vous spcifiez un cadre inexistant, la page lie est charge dans une nouvelle fentre portant le nom que vous avez spcifi. Vous pouvez galement choisir parmi les noms de cible rservs suivants : _blank charge le fichier li dans une nouvelle fentre, sans nom, du navigateur. _parent charge le fichier li dans le jeu de cadres parent, ou dans la fentre parente du cadre contenant le lien. Si le cadre contenant le lien n'est pas imbriqu, le document li sera charg dans la fentre de base du navigateur. _self charge le fichier li dans le mme cadre, ou dans la mme fentre, que le lien. Cette cible tant celle par dfaut, vous n'avez gnralement pas la spcifier. _top charge le fichier li dans la fentre de base du navigateur, supprimant ainsi tous les cadres. Remarque : L'option Cible n'est disponible que lorsque la zone ractive slectionne contient un lien. 7. Dans la zone Alt, tapez un texte secondaire afficher dans les navigateurs qui affichent seulement du texte ou qui tlchargent les images manuellement. Certains navigateurs affichent ce texte sous forme d'une info-bulle lorsque l'utilisateur fait passer le pointeur de la souris au-
404
dessus de la zone ractive. 8. Rptez les tapes 4 7 pour dfinir d'autres zones ractives dans la carte graphique. 9. Une fois la dfinition de la carte de l'image termine, cliquez sur une zone vierge du document pour modifier l'inspecteur Proprits.
Modification des zones ractives d'une carte graphique
Haut de la page
Vous pouvez facilement modifier les zones ractives que vous crez dans une carte graphique. Vous pouvez dplacer un groupe de zones ractives, redimensionner des zones ractives ou dplacer une zone ractive vers l'avant ou l'arrire dans un lment positionnement absolu. Vous pouvez galement copier une image contenant des zones ractives d'un document vers un autre ou copier une ou plusieurs zones ractives d'une image et les coller vers une autre image. Les zones ractives associes l'image sont galement copies vers le nouveau document.
Slection de plusieurs zones ractives dans une carte graphique

1. Utilisez le pointeur de zone ractive pour slectionner une zone ractive. 2. Effectuez l'une des oprations suivantes : En maintenant la touche Maj enfonce, cliquez tour tour sur les autres zones ractives slectionner. Appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh) pour slectionner toutes les zones ractives.
Dplacement d'une zone ractive

1. Utilisez le pointeur de zone ractive pour slectionner la zone ractive. 2. Effectuez l'une des oprations suivantes : Faites glisser la zone ractive vers une nouvelle zone. Utilisez la touche Ctrl et une touche flche pour dplacer une zone ractive de 10 pixels dans le sens slectionn. Utilisez les touches flches pour dplacer une zone ractive de 1 pixel dans le sens slectionn.
Redimensionnement d'une zone ractive

1. Utilisez le pointeur de zone ractive pour slectionner la zone ractive. 2. Faites glisser une poigne de slection de la zone ractive pour modifier la taille ou la forme de celle-ci.
405
Menus de reroutage
Insertion de menus de reroutage Insertion d'un menu de reroutage Modification des lments d'un menu de reroutage Dpannage des menus de reroutage
Insertion de menus de reroutage
Haut de la page
Un menu de reroutage est un menu droulant dans un document, visible pour tous les visiteurs du site et rpertoriant les liens vers des documents ou des fichiers. Vous pouvez crer des liens vers des documents de votre site Web ou d'un autre site, des liens de messagerie lectronique, des liens vers des images ou vers tout type de fichier pouvant tre ouvert dans un navigateur. Chaque option d'un menu de reroutage est associe une URL. Lorsque les utilisateurs choisissent une option, ils sont redirigs ( rerouts ) vers l'URL associe. Ces menus sont insrs l'aide de l'objet de formulaire Menu de reroutage. Un menu de reroutage peut comporter trois composants : (Facultatif) Une invite de slection au sein du menu, par exemple une description de catgorie pour les lments du menu ou des instructions, du type Faites votre choix . (Obligatoire) Une liste d'lments de menu de reroutage : l'utilisateur choisit une option et le document ou le fichier li s'affiche. (Facultatif) Un bouton Aller.
Insertion d'un menu de reroutage

1. Ouvrez un document, puis placez le curseur dans la fentre de document. 2. Effectuez l'une des oprations suivantes : Choisissez Insertion > Formulaire > Menu de reroutage. Cliquez sur le bouton Menu de reroutage de la catgorie Formulaires du panneau Insertion.
Haut de la page
3. Compltez les options de la bote de dialogue Insrer menu de reroutage, puis cliquez sur OK. Voici une liste partielle des options : Boutons Plus (+) et Moins (-) Cliquez sur Plus pour insrer un lment ; cliquez nouveau sur Plus pour en ajouter un autre. Pour supprimer un lment, slectionnez-le et cliquez sur Moins. Boutons flchs Slectionnez un lment et cliquez sur les boutons flchs pour le dplacer vers le haut ou le bas de la liste. Text Tapez le nom d'un lment sans nom. Si votre menu contient une invite de slection (telle que Faites votre choix ), tapez-la ici en tant que premier lment de menu (dans ce cas, vous devez aussi slectionner l'option Slectionner le premier lment aprs le changement d'URL situe en bas). Si slectionn, aller l'URL Naviguez jusqu'au fichier cible ou tapez son chemin. Ouvrir les URL dans Spcifiez si le fichier doit tre ouvert dans la mme fentre ou dans un cadre. Si le cadre dsigner comme cible n'apparat pas dans le menu droulant, fermez la bote de dialogue Insrer menu de reroutage, puis donnez un nom au cadre. Menu Insrer bouton Aller aprs Choisissez d'insrer un bouton Aller au lieu d'une invite de slection de menu. Slectionner le premier lment aprs le changement d'URL Slectionnez cette option si vous avez insr une invite de slection de menu ( Faites votre choix ) en tant que premier lment du menu.
Modification des lments d'un menu de reroutage
Haut de la page
Vous pouvez modifier l'ordre des lments dans le menu ou le fichier auquel un lment est li, et vous pouvez ajouter, supprimer ou renommer un lment. Pour modifier l'emplacement d'ouverture d'un fichier li ou pour ajouter ou modifier une invite de slection de menu, vous devez appliquer le comportement Menu de reroutage du panneau Comportements. 1. Ouvrez l'inspecteur Proprits (Fentre > Proprits), s'il n'est pas dj ouvert. 2. Dans la fentre de cration du document, cliquez sur l'objet Menu de reroutage pour le slectionner. 3. Dans l'inspecteur Proprits, cliquez sur le bouton Valeurs de la liste.
406
4. Utilisez la bote de dialogue Valeurs de la liste pour apporter vos modifications aux lments de menu et cliquer sur OK.
Dpannage des menus de reroutage
Haut de la page
Lorsqu'un lment de menu a t slectionn, il n'est plus possible de le slectionner nouveau si le visiteur revient cette page ou si la zone Ouvrir les URL dans pointe sur un cadre. Il existe deux mthodes pour contourner ce problme : Utiliser une invite de slection au sein du menu, par exemple une catgorie ou une instruction, du type Faites votre choix . Une invite de slection au sein du menu est reslectionne aprs chaque slection. Utiliser un bouton Aller, qui permet l'utilisateur de visiter nouveau le lien dj slectionn. Lorsque vous utilisez un bouton Aller associ un menu de reroutage, le bouton Aller devient le seul mcanisme permettant l'utilisateur d'accder l'URL associe la slection dans le menu. La slection d'un lment de menu dans le menu de reroutage n'a plus pour effet de rediriger l'utilisateur automatiquement vers une autre page ou un autre cadre. Remarque : Dans la bote de dialogue Insrer menu de reroutage, vous ne devez slectionner qu'une option pour chaque menu de reroutage, car elles s'appliquent la totalit du menu de reroutage. Voir aussi
407
Etablissement d'un lien vers une feuille de style CSS externe

Si vous modifiez une feuille de style CSS externe, les changements sont reflts dans tous les documents lis cette feuille de style. Vous pouvez exporter les styles CSS trouvs dans un document afin de crer une nouvelle feuille de style CSS, et attacher ou crer un lien vers une feuille de style externe pour appliquer les styles trouvs cet endroit. Vous pouvez attacher toute feuille de style de votre cration vos pages ou copier ces feuilles dans votre site. De plus, Dreamweaver est fourni avec des feuilles de style prdfinies qui peuvent tre automatiquement places dans votre site et attaches vos pages. 1. Ouvrez le panneau Styles CSS en procdant de l'une des manires suivantes : Choisissez Fentre > Styles CSS. Appuyez sur les touches Maj + F11. 2. Dans le panneau Styles CSS, cliquez sur le bouton Attacher une feuille de style. (Dans le coin infrieur droit du panneau.) 3. Effectuez l'une des oprations suivantes : Cliquez sur le bouton Parcourir pour rechercher une feuille de style CSS externe. Entrez le chemin de la feuille de style dans le champ Fichier/URL. 4. Dans la zone Ajouter sous, slectionnez une des options suivantes : Pour crer un lien entre le document actif et une feuille de style externe, choisissez Lien. Cette slection a pour effet de crer une balise de lien href dans le code HTML et de rfrencer l'URL de l'emplacement de la feuille de style publie. Microsoft Internet Explorer et Netscape Navigator prennent tous deux en charge cette mthode. Vous ne pouvez pas utiliser une balise de lien pour ajouter une rfrence d'une feuille de style externe une autre. Pour imbriquer des feuilles de style, vous devez utiliser une directive d'importation. La plupart des navigateurs reconnaissent galement la directive d'importation dans une page (plutt que simplement dans des feuilles de style). Il existe quelques diffrences dans la mthode de rsolution des conflits entre proprits lorsque des rgles se chevauchent dans des feuilles de style externes lies et des feuilles importes dans une page. Pour importer une feuille de style externe, plutt que d'y crer un lien, choisissez Importer. 5. Dans le menu contextuel Mdias, spcifiez le mdia cible de la feuille de style. Pour plus d'informations sur les feuilles de style dpendantes du mdia, consultez le site Web du World Wide Web Consortium l'adresse www.w3.org/TR/CSS21/media.html. 6. Cliquez sur le bouton d'aperu pour vrifier que la feuille de style applique effectivement les styles de votre choix la page active. Si les styles appliqus ne sont pas ceux attendus, cliquez sur Annuler pour supprimer la feuille de style. La page retrouve son aspect prcdent. 7. Cliquez sur OK. Voir aussi Cration d'un document bas sur un fichier d'exemple Dreamweaver
408
Barres de navigation
A propos des barres de navigation
A propos des barres de navigation

La fonctionnalit de barre de navigation a t abandonne depuis Dreamweaver CS5. Adobe recommande d'employer le widget Spry Barre de menus pour crer une barre de navigation. Voir aussi Utilisation du widget Barre de menus Spry
Haut de la page
409
Dfinition des proprits de liens CSS pour une page entire

Vous pouvez spcifier les polices, les tailles de police, les couleurs et d'autres lments pour vos liens. Par dfaut, Dreamweaver cre des rgles CSS pour vos liens et les applique tous les liens que vous utilisez sur la page. Les rgles sont incorpores dans la section head de la page. Remarque : Si vous souhaitez personnaliser des liens spcifiques sur une page, vous devez crer des rgles CSS individuelles, puis les appliquer sparment ces liens. 1. Choisissez Modifier > Proprits de la page ou cliquez sur le bouton Proprits de la page de l'inspecteur Proprits. 2. Slectionnez la catgorie Liens (CSS) et dfinissez les options. Police du lien Dfinit la famille de polices par dfaut utiliser pour les liens. Par dfaut, Dreamweaver utilise la police dfinie pour la page entire, sauf si une autre police est spcifie. Taille Dfinit la taille de police par dfaut utiliser pour les liens. Couleur des liens Spcifie la couleur appliquer au texte qui constitue le lien. Liens visits Spcifie la couleur appliquer aux liens visits. Liens de survol Spcifie la couleur appliquer lorsque la souris ou le curseur est plac sur un lien. Liens actifs Spcifie la couleur appliquer lorsque la souris ou le curseur clique sur un lien. Style soulign Spcifie le style de soulignement appliquer aux liens. Si un style de soulignement est dj dfini pour votre page (par exemple, par le biais d'une feuille de style CSS), le menu par dfaut est remplac par la mention ne pas modifier . Cette mention vous informe d'un style de lien qui a t dfini. Si vous modifiez le style de soulignement l'aide de la bote de dialogue Proprits de la page, Dreamweaver modifiera la dfinition de lien prcdente.
410
Rsolution des problmes lis aux liens

Rechercher les liens rompus, externes et orphelins Correction de liens rompus
Rechercher les liens rompus, externes et orphelins
Haut de la page
Utilisez la fonction Vrifier les liens pour rechercher les liens rompus et les fichiers orphelins (les fichiers qui existent toujours dans le site mais vers lesquels aucun lien ne pointe dans le site). Vous pouvez faire porter la recherche sur un fichier ouvert, sur une partie ou sur l'ensemble d'un site local. Dreamweaver vrifie uniquement les liens qui pointent vers des documents au sein du mme site. Dreamweaver dresse une liste des liens externes qui apparaissent dans le ou les documents slectionns, mais ne les vrifie pas. Vous pouvez identifier et supprimer les fichiers qui ne sont plus utiliss par les autres fichiers de votre site.
Vrification des liens au sein du document actif

1. Enregistrez le fichier dans un emplacement de votre site Dreamweaver local. 2. Choisissez Fichier > Vrifier la page > Liens. Le rapport Liens briss apparat dans le panneau Vrificateur de lien (dans le groupe de panneaux Rsultats). 3. Dans le panneau Vrificateur de lien, slectionnez Liens externes dans le menu droulant Afficher pour afficher un autre rapport. Le rapport apparat dans le panneau Vrificateur de lien (dans le groupe de panneaux Rsultats). Vous pouvez vrifier les fichiers orphelins lorsque vous vrifiez les liens dans un site entier. 4. Pour enregistrer le rapport, cliquez sur le bouton Enregistrer le rapport dans le panneau Vrificateur de lien. Le rapport est un fichier temporaire ; il sera perdu si vous ne l'enregistrez pas.
Vrification des liens dans une partie d'un site local

1. Dans le panneau Fichiers, choisissez un site dans le menu droulant Sites en cours. 2. Dans Affichage local, slectionnez les fichiers ou les dossiers vrifier. 3. Suivez l'une des procdures suivantes pour accder aux options : Cliquez avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contrle (Macintosh) sur l'un des fichiers slectionns et cliquez sur Vrifier les liens > Fichiers/Dossiers slectionns dans le menu contextuel. Choisissez Fichier > Vrifier la page > Liens. Le rapport Liens briss apparat dans le panneau Vrificateur de lien (dans le groupe de panneaux Rsultats). 4. Dans le panneau Vrificateur de lien, slectionnez Liens externes dans le menu droulant Afficher pour afficher un autre rapport. Le rapport apparat dans le panneau Vrificateur de lien (dans le groupe de panneaux Rsultats). Vous pouvez vrifier les fichiers orphelins lorsque vous vrifiez les liens dans un site entier. 5. Pour enregistrer un rapport, cliquez sur le bouton Enregistrer rapport dans le panneau Vrificateur de lien.
Vrification des liens dans tout le site

1. Dans le panneau Fichiers, choisissez un site dans le menu droulant Sites en cours. 2. Choisissez Site > Vrifier tous les liens du site. Le rapport Liens briss apparat dans le panneau Vrificateur de lien (dans le groupe de panneaux Rsultats). 3. Dans le panneau Vrificateur de lien, slectionnez Liens externes ou Fichiers orphelins dans le menu droulant Afficher pour afficher un autre rapport. Une liste des fichiers correspondant au type du rapport slectionn s'affiche dans la bote de dialogue Vrificateur de lien. Remarque : Si vous avez slectionn Fichiers orphelins comme type de rapport, vous pouvez directement supprimer des fichiers orphelins du panneau Vrificateur de lien en slectionnant un fichier dans la liste et en appuyant sur la touche Supprimer. 4. Pour enregistrer un rapport, cliquez sur le bouton Enregistrer rapport dans le panneau Vrificateur de lien.
411
Correction de liens rompus
Haut de la page
Une fois le rapport de liens excut, vous pouvez corriger les liens rompus et les rfrences d'images directement dans la bote de dialogue Vrificateur de lien, ou ouvrir les fichiers de la liste et rparer les liens dans l'inspecteur Proprits.
Correction de liens dans le panneau Vrificateur de lien

1. Excutez un rapport de vrification des liens. 2. Slectionnez le lien rompu dans la colonne Liens briss (pas dans la colonne Fichiers) du panneau Vrificateur de lien (dans le groupe de panneaux Rsultats). Une icne de dossier s'affiche ct du lien rompu. situe en face du lien rompu et naviguez jusqu'au fichier appropri pour le slectionner, ou entrez le 3. Cliquez sur l'icne de dossier chemin d'accs et le nom de fichier corrects. 4. Appuyez sur Tab ou Entre (Windows) ou Retour (Macintosh). S'il y a d'autres liens rompus vers le mme fichier, le systme vous invite rparer galement les rfrences dans les autres fichiers. Cliquez sur Oui pour que Dreamweaver mette jour tous les documents de la liste faisant rfrence ce fichier. Cliquez sur Non pour que Dreamweaver mette uniquement jour la rfrence actuelle. Remarque : Si l'option Activer l'archivage et l'extraction de fichier est active pour ce site, Dreamweaver essaie d'extraire les fichiers qui ncessitent des modifications. S'il ne peut pas extraire un fichier, Dreamweaver affiche un avertissement et laisse les rfrences rompues inchanges.
Correction de liens dans l'inspecteur Proprits

1. Excutez un rapport de vrification des liens. 2. Double-cliquez sur une entre de la colonne Fichier dans le panneau Vrificateur de lien (dans le groupe de panneaux Rsultats). Dreamweaver ouvre le document, slectionne l'image ou le lien rompu, et met en surbrillance le chemin d'accs et le nom de fichier dans l'inspecteur Proprits (si l'inspecteur Proprits n'est pas ouvert, choisissez Fentre > Proprits pour l'ouvrir). 3. Pour dfinir un nouveau chemin d'accs et un nouveau nom de fichier, tapez directement sur le texte en surbrillance ou cliquez sur l'icne du dossier pour naviguer vers le fichier. Si vous mettez jour une rfrence 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 Proprits pour rinitialiser les valeurs de hauteur et de largeur. 4. Enregistrez le fichier. Ds que les liens sont rpars, leur entre disparat de la liste des liens rompus. Si une entre figure toujours dans la liste aprs que vous avez indiqu un nouveau chemin d'accs ou nom de fichier dans le vrificateur de lien (ou aprs avoir enregistr des changements apports l'inspecteur Proprits), Dreamweaver ne peut pas trouver le nouveau fichier et considre toujours que le lien est rompu. Voir aussi
412
Codage
413
Rduction du code
A propos de la rduction du code Rduction et dveloppement de fragments de code Collage et dplacement de fragments de code rduits
A propos de la rduction du code
Haut de la page
Vous pouvez rduire ou dvelopper des fragments de code, ce qui permet de voir diffrentes sections du document sans qu'il soit ncessaire d'utiliser la barre de dfilement. Par exemple, pour afficher toutes les rgles CSS dans la balise head qui s'appliquent une balise div plus loin sur la page, vous pouvez rduire tout ce qui se trouve entre les baliseshead et div, de manire voir les deux sections de code en mme temps. Bien que vous puissiez slectionner des fragments de code en mode Cration ou Code, vous ne pouvez rduire le code qu'en mode Code. Remarque : Le code des fichiers crs partir de modles Dreamweaver est toujours affich en mode dvelopp, mme si le modle (*.dwt) contient des fragments de code rduits.
Haut de la page
Rduction et dveloppement de fragments de code
Lorsque vous slectionnez du code, un ensemble de boutons de rduction est affich prs de la slection (symboles Moins sous Windows ; triangles verticaux sur le Macintosh). Cliquez sur ces boutons pour dvelopper et rduire la slection. Lorsque le code est rduit, les boutons de rduction se transforment en boutons de dveloppement (un bouton Plus sous Windows ; triangle horizontal sur le Macintosh). Il peut arriver que le fragment de code slectionn ne soit pas prcisment rduit. En effet, Dreamweaver utilise une technique de rduction intelligente pour rduire les types de slection les plus courants de la faon la plus agrable visuellement. Par exemple, si vous avez slectionn une balise en retrait, puis les espaces d'indentation situs avant cette balise, Dreamweaver ne rduira pas ces espaces d'indentation, car la plupart des utilisateurs s'attendent ce que l'indentation du code soit prserve. Pour dsactiver la rduction intelligente du code et forcer Dreamweaver rduire exactement ce que vous avez slectionn, maintenez la touche Control enfonce avant de rduire le code. Par ailleurs, une icne d'avertissement est affiche ct des fragments de code rduits contenant des erreurs ou du code qui n'est pas gr par certains navigateurs. Vous pouvez galement rduire le code en cliquant tout en maintenant enfonce la touche Alt (Windows) ou Option (Macintosh) sur l'un des boutons de rduction ou le bouton Rduire slection de la barre d'outils de codage. 1. Slectionnez du code. 2. Slectionnez Edition > Fractionnement de code, puis slectionnez l'une des options.
Slection d'un fragment de code rduit

En mode d'affichage Code, cliquez sur le fragment de code rduit. Remarque : En mode Cration, lorsque vous effectuez une slection qui fait partie d'un fragment de code rduit, cette portion de code est automatiquement dveloppe dans le mode Code. Toujours en mode Cration, lorsque vous slectionnez un fragment de code complet, cette portion de code reste rduite dans le mode d'affichage Code.
Affichage du code d'un fragment de code rduit sans le dvelopper

Amenez le pointeur de la souris au-dessus du fragment de code rduit.
Utilisation de raccourcis clavier pour rduire et dvelopper le code

Vous pouvez galement utiliser les raccourcis clavier suivants : Commande Rduire la slection Rduire l'extrieur de la slection Dvelopper la slection Rduire balises entires Rduire extrieur balises entires Dvelopper tout Windows Ctrl+Maj+C Ctrl+Alt+C Ctrl+Maj+E Ctrl+Maj+J Ctrl+Alt+J Ctrl+Alt+E
414
Macintosh Commande+Maj+C Commande+Alt+C Commande+Maj+E Commande+Maj+J Commande+Alt+J Commande+Alt+E
Collage et dplacement de fragments de code rduits

Vous pouvez copier et coller des fragments de code rduits, ou faire glisser des fragments de code rduits afin de les dplacer.
Haut de la page
Copie et collage un fragment de code rduit

1. Slectionnez le fragment de code rduit. 2. Choisissez Edition > Copier. 3. Placez le curseur au point o vous voulez coller le code. 4. Choisissez Edition > Coller. Remarque : Vous pouvez coller du code dans d'autres applications, il est automatiquement dvelopp.
Dplacement d'un fragment de code rduit par glisser-dplacer

1. Slectionnez le fragment de code rduit. 2. Faites glisser la slection vers le nouvel emplacement. Pour faire glisser une copie de la slection, appuyez sur Ctrl (Windows) ou Alt (Macintosh) et faites glisser la slection. Remarque : Il est impossible d'effectuer un glisser-dposer vers d'autres documents. Voir aussi
415
Modification de code en mode Cration

A propos de la modification de code en mode Cration Slection de balises enfants en mode Cration Modification de code avec l'inspecteur Proprits Modification de code CFML avec l'inspecteur Proprits Modification d'attributs dans l'inspecteur de balises Prsentation de Quick Tag Editor Modification de code avec Quick Tag Editor Utilisation des menus d'indication dans Quick Tag Editor Modification de code l'aide du slecteur de balises Rdaction et modification de scripts en mode Cration Modification de scripts sur la page l'aide de l'inspecteur Proprits Utilisation des comportements JavaScript
A propos de la modification de code en mode Cration
Haut de la page
Dreamweaver permet de crer et de modifier visuellement des pages Web sans se soucier du code source sous-jacent. Toutefois, vous serez peut-tre amen modifier ce code afin de contrler pleinement les oprations effectues sur vos pages ou de corriger les ventuels problmes. Dreamweaver vous permet de modifier une partie du code en mode Cration. Cette section est destine aux personnes qui prfrent travailler en mode Cration, mais qui souhaitent galement disposer d'un accs rapide au code.
Slection de balises enfants en mode Cration
Haut de la page
En mode Cration, si vous slectionnez un objet contenant des balises enfants, par exemple un tableau HTML, vous pouvez slectionner rapidement la premire balise enfant de cet objet en choisissant Edition > Slectionner enfant. Remarque : Cette commande est disponible uniquement en mode Cration. Par exemple, la balise <table> comporte normalement des balises enfants <tr>. Si vous slectionnez une balise <table> dans le slecteur de balises, vous pouvez slectionner la premire ligne du tableau en choisissant Edition> Slectionner enfant. Dreamweaver slectionne la premire balise <tr> dans le slecteur de balises. Etant donn que la balise <tr> comporte elle-mme des balises enfants, <td> (dlimiteur de cellule), vous pouvez choisir nouveau Edition > Slectionner enfant pour slectionner la premire cellule du tableau.
Modification de code avec l'inspecteur Proprits
Haut de la page
Vous pouvez utiliser l'inspecteur Proprits pour examiner et modifier les attributs du texte ou des objets dans votre page. Souvent, les proprits affiches dans l'inspecteur Proprits correspondent aux attributs des balises ; la modification de l'une de ces proprits dans l'inspecteur revient en principe modifier l'attribut correspondant en mode Code. Remarque : L'inspecteur de balises et l'inspecteur Proprits permettent d'afficher et de modifier les attributs des balises. L'inspecteur de balises permet d'afficher et de modifier l'ensemble des attributs associs une balise donne. L'inspecteur Proprits affiche uniquement les attributs les plus frquents. En revanche, il contient un nombre plus important de commandes permettant de modifier les valeurs de ces attributs et permet galement de modifier certains objets (par exemple les colonnes des tableaux) ne correspondant aucune balise spcifique. 1. Cliquez sur le texte ou slectionnez un objet dans la page. L'inspecteur Proprits pour le texte ou l'objet s'affiche sous la fentre de document. Si l'inspecteur Proprits n'est pas visible, choisissez Fentre > Proprits. 2. Utilisez l'inspecteur Proprits pour modifier vos attributs.
Modification de code CFML avec l'inspecteur Proprits

L'inspecteur Proprits permet d'examiner et de modifier le code CFML (ColdFusion markup language) en mode Cration. 1. Cliquez sur le bouton Attributs pour modifier les attributs de la balise ou pour en ajouter de nouveaux.
Haut de la page
2. Si la balise prsente un contenu entre ses balises d'ouverture et de fermeture, cliquez sur le bouton Contenu pour modifier ce contenu. Le bouton Contenu s'affiche uniquement si la balise slectionne n'est pas vide (c'est--dire, si elle possde une balise d'ouverture et une
416
balise de fermeture). 3. Si la balise contient une expression conditionnelle, apportez vos changements dans la zone Expression.
Modification d'attributs dans l'inspecteur de balises
Haut de la page
L'inspecteur de balises permet de modifier et d'ajouter des attributs et des valeurs d'attributs. L'inspecteur de balises permet de modifier balises et objets en utilisant une fiche de proprits semblable celles que l'on trouve dans d'autres environnements de dveloppement intgrs (integrated development environments, IDE). 1. Dans la fentre de document, effectuez l'une des procdures suivantes : En mode Code (ou dans l'inspecteur de code), cliquez sur le nom d'une balise ou sur son contenu. En mode Cration, slectionnez un objet ou slectionnez une balise dans le slecteur de balises. 2. Ouvrez l'inspecteur de balises (Fentre > Inspecteur de balises) et choisissez l'onglet Attributs. Les attributs de la slection et les valeurs actuellement dfinies s'affichent dans l'inspecteur de balises. 3. Dans l'inspecteur de balises, effectuez l'une des oprations suivantes : Pour afficher les attributs par catgories, cliquez sur le bouton Afficher la vue par catgorie . .
Pour afficher les attributs par ordre alphabtique, cliquez sur le bouton Afficher la vue sous forme de liste Pour modifier la valeur de l'attribut, slectionnez cette valeur puis modifiez-la.
Pour ajouter une valeur un attribut qui n'en a pas, cliquez dans la colonne des valeurs d'attribut situe droite de l'attribut, puis indiquez votre valeur. Si l'attribut accepte les valeurs prdfinies, slectionnez une valeur dans le menu droulant (ou le slecteur de couleur) situ droite de la colonne des valeurs d'attribut. Si la valeur de l'attribut correspond une URL, cliquez sur le bouton Parcourir, utilisez l'icne du pointeur pour slectionner un fichier, ou tapez le nom de l'URL dans la zone de texte. Si la valeur de l'attribut correspond une source de contenu dynamique (par exemple, une base de donnes), cliquez sur le bouton Donnes dynamiques situ droite de la colonne des valeurs d'attribut. Slectionnez ensuite votre source. Pour supprimer la valeur de l'attribut, slectionnez la valeur supprimer, puis appuyez sur la touche Retour arrire (Windows) ou Retour (Macintosh). Pour modifier le nom d'un attribut, slectionnez le nom d'attribut souhait, puis modifiez-le. Remarque : Si vous modifiez le nom d'un attribut standard et que vous lui attribuez une nouvelle valeur, le nouvel attribut et la valeur qui lui est associe sont automatiquement dplacs dans la catgorie approprie. Pour ajouter un attribut ne figurant pas sur la liste, cliquez sur l'espace vide au bas de cette liste, puis saisissez le nom de l'attribut ajouter. 4. Pour que les modifications apportes soient prises en compte dans votre document, appuyez sur la touche Entre (Windows) ou Retour (Macintosh) ou cliquez un autre endroit de l'inspecteur de balises.
Prsentation de Quick Tag Editor
Haut de la page
Vous pouvez utiliser Quick Tag Editor pour examiner, insrer et modifier rapidement des balises HTML sans quitter le mode Cration. Si vous tapez des lments de code HTML non valides dans Quick Tag Editor, Dreamweaver tente de les corriger en insrant au besoin des guillemets ou des crochets de fermeture. Pour dfinir les options de Quick Tag Editor, ouvrez-le en appuyant sur Ctrl+T (Windows) ou sur Commande+T (Macintosh). Quick Tag Editor comporte trois modes : Insrer HTML, qui permet d'insrer de nouveaux lments de code HTML ; Modifier la balise, qui permet de modifier une balise existante ; Envelopper avec balise, qui permet d'insrer une nouvelle balise de part et d'autre d'une slection. Remarque : Le mode dans lequel s'ouvre Quick Tag Editor dpend de la slection en cours en mode Cration. Dans les trois modes, le fonctionnement de base de Quick Tag Editor reste le mme : ouvrez l'diteur, saisissez ou modifiez des balises et des attributs, puis fermez l'diteur. Lorsque Quick Tag Editor est actif, vous pouvez passer d'un mode l'autre en appuyant sur Ctrl+T (Windows) ou Commande+T (Macintosh).
417
Modification de code avec Quick Tag Editor

Quick Tag Editor permet d'examiner et de modifier rapidement les balises HTML sans quitter le mode Cration.
Haut de la page
Insertion d'une balise HTML

1. En mode Cration, cliquez dans la page pour placer le point d'insertion l'endroit o vous voulez insrer le code. 2. Appuyez sur Ctrl+T (Windows) ou Commande+T (Macintosh). Quick Tag Editor s'ouvre en mode Insrer HTML.
3. Saisissez la balise HTML, puis appuyez sur Entre. La balise est insre dans votre code. Le cas chant, la balise de fermeture correspondante est galement insre. 4. Appuyez sur la touche Echap pour quitter Quick Tag Editor sans apporter aucun changement.
Modification d'une balise HTML

1. Slectionnez un objet en mode Cration. Vous pouvez galement slectionner la balise que vous voulez modifier partir du slecteur de balise figurant au bas de la fentre de document. Pour plus d'informations, consultez la section Modification de code l'aide du slecteur de balises. 2. Appuyez sur Ctrl+T (Windows) ou Commande+T (Macintosh). Quick Tag Editor s'ouvre en mode Modifier la balise. 3. Saisissez de nouveaux attributs, modifiez les attributs existants ou modifiez le nom de la balise. 4. Appuyez sur Tab pour passer d'un attribut l'autre et sur Maj+Tab pour revenir en arrire. Remarque : Par dfaut, les modifications sont appliques au document lorsque vous appuyez sur Tab ou Maj+Tab. 5. Pour fermer Quick Tag Editor et appliquer toutes les modifications, appuyez sur Entre. 6. Pour quitter Quick Tag Editor sans apporter d'autres changements, appuyez sur Echap.
Insertion de balises HTML de part et d'autre d'une slection

1. Slectionnez du texte ou un objet non mis en forme en mode Cration. Remarque : Si vous slectionnez une chane de texte ou un objet comportant une balise HTML d'ouverture ou de fermeture, Quick Tag Editor s'affiche en mode Modifier la balise et non en mode de balise enveloppante. 2. Appuyez sur Ctrl+T (Windows) ou Commande+T (Macintosh), ou cliquez sur le bouton Quick Tag Editor dans l'inspecteur Proprits. Quick Tag Editor s'ouvre en mode Envelopper avec balise. 3. Saisissez une balise d'ouverture, par exemple strong, puis appuyez sur Entre (Windows) ou Retour (Macintosh). La balise est insre au dbut de la slection en cours et une balise de fermeture correspondante est insre la fin. 4. Pour quitter Quick Tag Editor sans apporter de changements, appuyez sur Echap.
Utilisation des menus d'indication dans Quick Tag Editor
Haut de la page
Dans Quick Tag Editor, vous pouvez accder un menu contextuel d'attributs rpertoriant tous les attributs valides de la balise que vous modifiez ou insrez. Vous pouvez galement dsactiver le menu contextuel ou modifier le dlai s'coulant avant l'apparition du menu droulant dans Quick Tag Editor. Pour afficher un menu contextuel rpertoriant les attributs de balise valides, arrtez-vous quelques secondes pendant la modification d'un nom d'attribut dans Quick Tag Editor. Un menu contextuel apparat, rpertoriant tous les attributs valides de la balise que vous modifiez. De mme, arrtez-vous quelques secondes pendant la saisie ou la modification d'un nom de balise dans Quick Tag Editor pour afficher le menu contextuel correspondant aux balises. Remarque : Les prfrences d'indication de code de Quick Tag Editor sont rgies par les prfrences gnrales d'indication de code. Pour plus d'informations, consultez la section Dfinition des prfrences de conseils de code.
Utilisation d'un menu de conseils de code

1. Effectuez l'une des oprations suivantes : Commencez la saisie d'une balise ou d'un attribut. Le menu Conseils de code affiche le premier lment commenant par les lettres que
418
vous venez de taper. Appuyez sur les touches flches Haut et Bas de votre clavier pour slectionner un lment. Recherchez un lment l'aide de la barre de dfilement. 2. Pour insrer un lment, slectionnez-le, puis appuyez sur la touche Entre ou double-cliquez dessus. 3. Pour fermer le menu contextuel sans slectionner d'lment, appuyez sur la touche Echap ou poursuivez la saisie de votre texte.
Dsactivation du menu contextuel ou modification du dlai s'coulant avant l'apparition du menu contextuel
1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh) puis choisissez Conseils de code. La bote de dialogue Prfrences de conseil de code s'affiche. 2. Pour dsactiver le menu des conseils, dslectionnez l'option Activer les conseils de code. 3. Pour modifier le dlai avant l'apparition du menu, rglez le curseur Dlai, puis cliquez sur OK.
Modification de code l'aide du slecteur de balises
Haut de la page
Vous pouvez utiliser le slecteur de balises pour slectionner, modifier ou supprimer les balises sans quitter le mode Cration. Le slecteur de balises se trouve dans la barre d'tat en bas de la fentre de document, et prsente une srie de balises, comme suit :
Modification ou suppression d'une balise

1. Cliquez dans le document. Les balises qui s'appliquent au niveau du point d'insertion s'affichent dans le slecteur de balises. 2. Cliquez l'aide du bouton droit (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur une balise dans le slecteur de balises. 3. Pour modifier une balise, choisissez Modifier la balise dans le menu. Apportez les modifications requises dans Quick Tag Editor. Pour plus d'informations, consultez la section Modification de code avec Quick Tag Editor. 4. Pour supprimer une balise, choisissez Supprimer la balise dans le menu.
Slection d'un objet correspondant une balise

1. Cliquez dans le document. Les balises qui s'appliquent au niveau du point d'insertion s'affichent dans le slecteur de balises. 2. Cliquez sur une balise dans le slecteur de balises. L'objet reprsent par la balise est slectionn sur la page. Utilisez cette technique pour slectionner des lignes de tableau (balises tr) ou des cellules (balises td).
Rdaction et modification de scripts en mode Cration

Vous pouvez crire un script JavaScript ou VBScript pour votre page sans quitter le mode Cration. Vous pouvez crer un lien dans votre document vers un fichier script externe sans quitter le mode Cration. Vous pouvez modifier un script sans quitter le mode Cration.
Haut de la page
Vous pouvez travailler avec des scripts JavaScript et VBScript ct client en modes Cration et Code, en procdant des manires suivantes :
Avant toute chose, assurez-vous que l'affichage des marqueurs de script sur la page est activ en slectionnant Affichage > Assistances visuelles > Elments invisibles.
Rdaction d'un script ct client

1. Placez le point d'insertion l'endroit o vous voulez insrer le script. 2. Choisissez Insertion > HTML > Objets Script > Script. 3. Choisissez le langage de script dans le menu droulant Langage. Si vous utilisez JavaScript sans tre certain de la version, choisissez JavaScript plutt que JavaScript1.1 ou JavaScript1.2. 4. Saisissez ou collez le code de script dans la zone Contenu. Vous n'avez pas besoin d'inclure les balises script de fermeture et d'ouverture.
419
5. Saisissez ou collez le code HTML dans la zone Aucun script. Les navigateurs ne prenant pas en charge le langage de script slectionn affichent ce code au lieu d'excuter le script. 6. Cliquez sur OK.
Cration d'un lien vers un fichier script externe

1. Placez le point d'insertion l'endroit o vous voulez insrer le script. 2. Choisissez Insertion > HTML > Objets Script > Script. 3. Cliquez sur OK sans complter la zone de texte Contenu. 4. Slectionnez le marqueur de script dans le mode Cration de la fentre de document. 5. Dans l'inspecteur Proprits, cliquez sur l'icne de dossier pour rechercher et slectionner le fichier de script externe ou tapez le nom de fichier dans la zone Source.
Modification d'un script

1. Slectionnez le marqueur de script. 2. Dans l'inspecteur Proprits, cliquez sur le bouton Edition. Le script s'affiche dans la bote de dialogue Proprits du script. Si vous avez cr un lien vers un fichier de script externe, le fichier s'ouvre en mode Code ; vous pouvez alors apporter vos modifications. Remarque : Si les balises script renferment des lments de code, la bote de dialogue Proprits du script s'affiche, mme si vous avez cr un lien vers un fichier de script externe. 3. Dans la zone Langage, indiquez soit JavaScript soit VBScript comme langage de script. 4. Dans le menu droulant Type, indiquez le type de script, soit ct client, soit ct serveur. 5. (Facultatif) Dans la zone Source, indiquez un fichier de script externe li. Cliquez sur l'icne de dossier ou sur le bouton Parcourir pour rechercher le fichier, ou entrez le chemin d'accs.
6. Modifiez le script, puis cliquez sur OK.
Modification de scripts ASP ct serveur en mode Cration

L'inspecteur Proprits de script ASP permet d'examiner et de modifier les scripts ASP ct serveur en mode Cration. 1. En mode Cration, slectionnez l'icne visuelle de balise de langage de serveur. 2. Dans l'inspecteur Proprits de script ASP, cliquez sur le bouton Modifier 3. Modifiez le script ASP ct serveur, puis cliquez sur OK.
Modification de scripts sur la page l'aide de l'inspecteur Proprits
Haut de la page
1. Dans le menu droulant Langage de l'inspecteur Proprits, slectionnez le langage de script souhait ou saisissez directement son nom dans la zone de texte Langage. Remarque : Si vous utilisez JavaScript sans tre certain de la version, choisissez JavaScript plutt que JavaScript1.1 ou JavaScript1.2. 2. Dans le menu droulant Type, indiquez le type de script, soit ct client, soit ct serveur. 3. (Facultatif) Dans la zone Source, indiquez un fichier de script externe li. Tapez le chemin d'accs ou cliquez sur l'icne du dossier slectionner le fichier. 4. Cliquez sur Modifier pour modifier le script. pour
Utilisation des comportements JavaScript
Haut de la page
L'onglet Comportements de l'inspecteur de balises permet d'associer aisment des comportements JavaScript (ct client) aux lments d'une page. Pour plus d'informations, voir Application de comportements JavaScript intgrs. Voir aussi
420
Mise en forme du code CSS

Dfinition des prfrences de formatage du code CSS Formatage manuel du code CSS dans une feuille de style CSS Formatage manuel du code CSS intgr Vous pouvez dfinir des prfrences qui contrlent le formatage de votre code CSS chaque fois que vous crez ou modifiez une rgle CSS l'aide de l'interface Dreamweaver. Par exemple, vous pouvez dfinir des prfrences qui placeront toutes les proprits CSS sur des lignes spares, insrer une ligne vierge entre les rgles CSS, etc. Lorsque vous dfinissez des prfrences de formatage de code CSS, les prfrences que vous slectionnez sont automatiquement appliques toutes les nouvelles rgles CSS que vous crez. Toutefois, vous pouvez galement appliquer ces prfrences manuellement des documents individuels. Cela peut tre utile si vous possdez un document HTML ou CSS plus ancien ayant besoin d'un formatage. Remarque : Les prfrences de formatage de code CSS s'appliquent uniquement aux rgles CSS de feuilles de style externes ou intgres (mais pas aux styles intgrs).
Dfinition des prfrences de formatage du code CSS

1. Choisissez Edition > Prfrences. 2. Dans la bote de dialogue Prfrences, slectionnez la catgorie Format du code. 3. En regard de l'option Formatage avanc, cliquez sur le bouton CSS.
Haut de la page
4. Dans la bote de dialogue Options de mise en forme de la source CSS, slectionnez les options que vous souhaitez appliquer votre code source CSS. Un aperu de la feuille de style CSS telle qu'elle est modifie par les options slectionnes s'affiche dans la fentre Aperu plus bas. Mettre les proprits en retrait avec Dfinit la valeur de mise en retrait des proprits au sein d'une rgle. Vous pouvez spcifier des tabulations ou des espaces. Chaque proprit sur une ligne spare Place chaque proprit au sein d'une rgle sur une ligne spare. Accolade d'ouverture sur une ligne spare Place l'accolade d'ouverture pour une rgle sur une ligne spare de celle du slecteur. Seulement si plusieurs proprits Place les rgles une seule proprit sur la mme ligne que le slecteur. Tous les slecteurs d'une rgle sur la mme ligne Place tous les slecteurs d'une rgle sur la mme ligne. Ligne vierge pour sparer les rgles Insre une ligne vierge entre chaque rgle. 5. Cliquez sur OK. Remarque : Le formatage de code CSS hrite galement de la prfrence Type de saut de ligne que vous avez dfinie dans la catgorie Format de code de la bote de dialogue Prfrences.
Haut de la page
Formatage manuel du code CSS dans une feuille de style CSS

1. Ouvrez une feuille de style CSS 2. Choisissez Commandes > Appliquer le format source.
Les options de formatage que vous dfinissez dans les prfrences de formatage de code CSS s'appliquent l'ensemble du document. Vous ne pouvez pas formater de slections individuelles.
Formatage manuel du code CSS intgr

1. Ouvrez une page HTML contenant du code CSS intgr dans la section head du document. 2. Slectionnez une partie quelconque du code CSS. 3. Choisissez Commandes > Appliquer le format source la slection.
Haut de la page
Les options de formatage que vous dfinissez dans les prfrences de formatage de code CSS s'appliquent uniquement l'ensemble des rgles CSS de la section Head du document. Remarque : Vous pouvez choisir Commandes > Appliquer le format source pour mettre l'ensemble du document en forme en fonction des prfrences de mise en forme de code que vous avez spcifies. Voir aussi
421
Informations gnrales sur le codage dans Dreamweaver

Langages pris en charge Marquage non valide Modification automatique du code Code XHTML Expressions rgulires Code de comportement de serveur
Langages pris en charge
Haut de la page
Adobe Dreamweaver contient la fois des options permettant de lancer des diteurs de texte et des options conues pour vous assister dans la rdaction du code, par exemple les conseils de code, et ce dans les langages suivants : HTML XHTML CSS JavaScript CFML (ColdFusion Markup Language) VBScript (pour ASP) C# et Visual Basic (pour ASP.NET) JSP PHP D'autres langages, par exemple le langage Perl, ne sont pas pris en charge par les fonctions de codage spcifiques au langage de Dreamweaver ; vous pouvez par exemple crer et modifier des fichiers Perl, mais vous ne pourrez pas accder aux conseils de code.
Marquage non valide
Haut de la page
Si votre document contient du code non valide, Dreamweaver l'affiche en mode Cration et, si les options adquates sont actives, le met en surbrillance en mode Code. Si vous slectionnez ces lments dans l'un des deux modes, l'inspecteur Proprits affiche des informations sur les causes de leur non-validit et sur la manire de corriger les erreurs. Remarque : L'option de mise en surbrillance du code non valide en mode Code est dsactive par dfaut. Pour l'activer, passez en mode Code (Affichage > Code) puis cliquez sur Affichage > Options d'affichage de code > Surligner le code non valide). Vous pouvez galement indiquer vos prfrences concernant la correction automatique de certains types d'lments de code errons lorsque vous ouvrez un document.
Modification automatique du code
Haut de la page
Certaines options de Dreamweaver permettent de nettoyer automatiquement votre code selon vos propres critres. Toutefois, le code n'est corrige que si vous activez les options correspondantes ou si l'une de vos oprations entrane une modification du code. Par exemple, Dreamweaver modifie vos espaces blancs et la casse des attributs uniquement si vous slectionnez la commande Appliquer le format source. Quelques-unes des options de rcriture du code sont actives par dfaut. Les fonctions Roundtrip HTML de Dreamweaver permettent d'changer des documents entre un diteur HTML en mode texte et Dreamweaver, moyennant un impact nul ou infime sur le contenu et la structure du code source HTML original du document. Parmi ces fonctionnalits, on compte les suivantes : Vous pouvez lancer un diteur de texte tiers pour modifier le document actif. Par dfaut, Dreamweaver ne modifie pas le code cr ou modifi par un autre diteur HTML, mme s'il est incorrect, moins que vous n'ayez activ les options de rcriture. En l'absence de critres de rfrence, Dreamweaver conserve telles quelles les balises qu'il ne reconnat pas, notamment les balises XML. Si une balise non reconnue encadre une autre balise (par exemple, <MyNewTag><em>text</MyNewTag></em>), Dreamweaver la marque comme errone, mais ne modifie pas le code.
422
Vous pouvez activer certaines options de Dreamweaver pour mettre les lments de code HTML incorrects en surlign (jaune) dans le mode Code. Si vous slectionnez une section en surbrillance, l'inspecteur Proprits affiche des informations sur l'erreur et la manire de la corriger.
Code XHTML
Haut de la page
Dreamweaver gnre du nouveau code XHTML et nettoie le code XHTML existant, conformment la plupart des spcifications XHTML. Vous disposez galement des outils permettant de se conformer aux rares spcifications XHTML ignores lors de ce type d'opration. Remarque : Certaines de ces spcifications sont galement exiges dans diverses versions du langage HTML. Le tableau ci-dessous rpertorie les spcifications XHTML automatiquement observes par Dreamweaver : Spcification XHTML Une dclaration DOCTYPE doit prcder l'lment racine dans le document, laquelle doit faire rfrence l'un des trois fichiers DTD (Document Type Definition) pour XHTML (strict, transitionnel ou jeu de cadres). Actions effectues par Dreamweaver Ajoute une dclaration XHTML DOCTYPE un document XHTML : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> Ou, si le document XHTML comporte un jeu de cadres : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd"> L'lment racine du document doit tre html, et l'lmenthtml doit dsigner l'espace de noms XHTML. Un document standard doit comporter les lments structurels head, title et body. Un document de jeu de cadres doit comporter les lments structurels head, title et frameset. L'imbrication de tous les lments du document doit tre correcte : <p>Voici un <i>exemple incorrect.</p></i> <p>Voici un <i>exemple incorrect.</i></p> Tous les noms d'lments et d'attributs doivent tre rdigs en minuscules. Ajoute l'attribut namespace l'lment html comme suit : <html xmlns="http://www.w3.org/1999/xhtml"> Dans un document standard, inclut les lments structurels head, title et body. Dans un document de jeu de cadres, inclut les lments head, title et frameset. Gnre correctement le code imbriqu et, pendant le nettoyage du code XHTML, corrige l'imbrication du code non gnr par Dreamweaver.
Impose l'usage des minuscules dans les noms d'lments et d'attributs HTML du code XHTML gnr par ses soins et pendant le nettoyage du code XHTML, indpendamment des prfrences de casse dfinies pour la balise et l'attribut. Insre des balises de fin dans le code gnr par ses soins, ainsi que pendant le nettoyage du code XHTML.
Tous les lments doivent se terminer par une balise de fin, moins qu'ils ne soient dclars dans le fichier DTD comme EMPTY. Les lments vides doivent se terminer par une balise de fin ou la balise de dbut doit tre ferme avec le code />. Par exemple, <br> est incorrect ; la forme correcte de la balise est soit <br></br>, soit <br/>. Les lments vides sont les suivants : area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta et param. Pour garantir la rtrocompatibilit avec les navigateurs non XML, un espace doit prcder le code /> (par exemple, <br /> et non<br/>). Il est impossible d'abrger les attributs ; ainsi, <td nowrap> est incorrect ; la forme correcte est <td nowrap="nowrap">. Cette rgle s'applique aux attributs suivants : checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly et selected. Tous les attributs doivent tre placs entre guillemets.
Insre les lments vides avec un espace avant la barre oblique de fermeture des balises vides dans le code gnr par ses soins ainsi que pendant le nettoyage du code XHTML.
Insre des paires attribut/valeur compltes dans le code gnr par ses soins, ainsi que pendant le nettoyage du code XHTML. Remarque : Un navigateur HTML ne prenant pas en charge HTML 4 risque de ne pas pouvoir interprter ces attributs boolens sous leur forme complte. Met les valeurs d'attribut entre guillemets dans le code gnr par ses soins, ainsi que pendant le nettoyage du code XHTML. Affecte la mme valeur aux attributs name et id, toutes les fois o l'attribut name est dfini par un inspecteur Proprits, dans le
Les lments suivants doivent comporter un attribut id et un attribut name : a, applet, form, frame, iframe, img et map. Par
423
exemple, <a name="intro">Introduction</a> est incorrect ; la forme correcte est <a id="intro">Introduction</a> ou <a id="section1" name="intro"> Introduction</a>. Dans le cas d'attributs dont les valeurs sont de type Enumr, celles-ci doivent figurer en minuscules. Une valeur de type Enumr est une valeur appartenant une liste donne de valeurs autorises ; par exemple, l'attribut align comprend les valeurs autorises suivantes : center, justify, left et right. Tous les lments de script et de style doivent comporter un attribut type. (La ncessit de l'attribut de type d'un lment de script a t introduite avec HTML 4, lors de la dprciation de l'attribut de language.) Tous les lments img et area doivent comprendre un attribut alt.
code gnr par Dreamweaver, ainsi que pendant le nettoyage du code XHTML.
Impose l'utilisation des minuscules pour les valeurs de type Enumr dans le code gnr par ses soins, ainsi que pendant le nettoyage du code XHTML.
Dfinit les attributs de typeet de langage dans les lments de script ainsi que l'attribut de type dans les lments de style, mais aussi dans le code gnr par ses soins et pendant le nettoyage du code XHTML.
Dfinit ces attributs dans le code gnr par ses soins et, pendant le nettoyage du code XHTML, signale les attributs alt manquants.
Expressions rgulires
Haut de la page
Les expressions rgulires sont des modles dcrivant des combinaisons de caractres dans un texte. Utilisez-les dans vos recherches pour dcrire des concepts tels que lignes commenant par var' ou valeurs d'attribut contenant un nombre . Le tableau ci-dessous prsente les caractres spciaux des expressions rgulires, leur signification et des exemples d'utilisation. Pour rechercher du texte contenant un des caractres spciaux prsents dans le tableau, indiquez qu'il s'agit d'un caractre spcial l'aide d'une barre oblique inverse. Par exemple, pour rechercher l'astrisque dans la phrase conditions spciales*, vous pouvez utiliser un modle de recherche tel que celui-ci : spciales\*. Si vous n'indiquez pas l'astrisque comme caractre spcial, vous trouverez toutes les occurrences de spciales (de mme que spciale , spcialess et spcialesss ), et pas seulement celles qui sont suivies d'un astrisque. Caractre ^ trouve Dbut de saisie ou de ligne. Exemple ^T trouve T dans Tonnerre de Brest , mais pas dans La case de l'oncle Tom n$ trouve n dans malin mais pas dans noir um* trouve um dans rhum , umm dans yummy et u dans bouge um+ trouve um dans rhum , umm dans yummy mais rien dans bouge st?on trouve son dans Johnson et ston dans Johnston , mais rien dans Appleton ou tension .an trouve ran , tan et lan dans le mot rantanplan FF0000|0000FF trouve FF0000 dans bgcolor="#FF0000" et 0000FF dans font color="#0000FF" l{2} trouve ll dans elle et les deux premiers l de ellllle , mais ne trouve rien dans lger F{2,4} trouve FF dans #FF0000 et les quatre premiers F dans #FFFFFF
Fin de saisie ou de ligne.
Le caractre prcdent, 0 ou plusieurs fois.
Le caractre prcdent, 1 ou plusieurs fois.
Le caractre prcdent, une fois au maximum (en d'autres termes, le caractre prcdent est facultatif). Tout caractre, sauf une nouvelle ligne (retour la ligne). Soit x, soit y.
x|y
{n}
Exactement n occurrences du caractre prcdent.
{n,m}
Au moins n et au plus m occurrences du caractre prcdent.

424
[abc]
L'un des caractres entours de crochets. Spcifiez une plage de caractres l'aide d'un trait d'union (par exemple, [a-f] quivaut [abcdef]). Tout caractre non inclus entre les crochets. Spcifiez une plage de caractres l'aide d'un trait d'union (par exemple, [â-f] quivaut [âbcdef]). Limite de mot (par exemple un espace ou un retour chariot). Tous les lments sauf les limites de mot
[e-g] trouve e dans il , f dans fil et g dans garde
[âbc]
[âeiou] trouve initialement r dans orange , b dans balle et k dans eek!
\b
\bb trouve b dans balle mais pas dans gober ou snob \Bb trouve b dans gober mais pas dans balle \d trouve 3 dans C3PO et 2 dans appartement 2G . \D trouve S dans 900S et Q dans Q45 .
\B
\d
Tout chiffre. C'est l'quivalent de [0-9].
\D
Tout caractre alphabtique et non numrique. C'est l'quivalent de [^0-9]. Saut de page. Saut de ligne. Retour chariot. Tout espace blanc , ou caractre d'espacement : espace, tabulation, saut de page ou saut de ligne. Tout caractre autre qu'un espace blanc.
\f \n \r \s
\sval trouve val dans le val Andr mais pas dans aval
\S
\Sval trouve val dans aval , mais pas dans le val Andr
\t \w
Tabulation. Tout caractre alphanumrique, y compris le caractre de soulignement. C'est l'quivalent de [A-Za-z0-9_]. Tout caractre non alphanumrique. C'est l'quivalent de [Â-Za-z0-9_]. Retour chariot. Veillez dsactiver l'option Ignorer les diffrences entre les espaces blancs lorsque vous effectuez ce type de recherche si vous n'utilisez pas des expressions rgulires. Notez que cette recherche porte sur un caractre particulier et non sur la notion de retour la ligne ; par exemple, elle ne trouvera pas une balise <br> ou <p>. Les caractres de retour chariot apparaissent en tant qu'espaces en mode Cration, et non en tant que sauts de ligne. c\w* trouve chien dans le chien noir , ainsi que cou et chien dans le cou du chien noir . \W trouve & dans Tintin&Milou et % dans 100% .
\W
Ctrl+Entre ou Maj+Entre (Windows), ou Contrle+ Retour ou Maj+Retour ou Commande+Retour (Macintosh)
Utilisez des parenthses pour dfinir au sein de l'expression rgulire des groupes auxquels il sera fait rfrence plus tard ; utilisez $1, $2, $3, etc. dans le champ Remplacer pour faire rfrence au premier, deuxime, troisime, etc., groupe entre parenthses. Remarque : Dans la zone de texte Rechercher, faites rfrence au groupe entre parenthses mentionn plus tt dans l'expression rgulire en indiquant \1, \2, \3 etc. au lieu de $1, $2, $3. Par exemple, la recherche de (\d+)\/(\d+)\/(\d+) et le remplacement par $2/$1/$3 changent le jour et le mois dans une date spare par des barres obliques permettant ainsi la conversion entre les dates de style amricain et les dates de style europen.
Code de comportement de serveur
Haut de la page
Lorsque vous slectionnez un comportement de serveur dans le panneau Comportements de serveur pendant le dveloppement d'une page
425
dynamique, Dreamweaver insre un ou plusieurs blocs de code dans la page pour faire fonctionner le comportement de serveur. Si vous modifiez manuellement le code contenu dans un bloc de code, les panneaux, par exemple le panneau Liaisons et le panneau Comportements de serveur, ne sont plus accessibles pour la modification du comportement du serveur. Dreamweaver dtecte les comportements de serveur en se reprant des modles de code spcifiques dans la page, puis les affiche dans le panneau correspondant. Toute modification du code d'un bloc de code empche ds lors Dreamweaver de dtecter le comportement de serveur et de l'afficher dans le panneau Comportements de serveur. Le comportement de serveur subsiste toutefois dans la page : vous pouvez donc le corriger dans l'environnement de codage de Dreamweaver. Voir aussi
426
Gestion des bibliothques de balises

A propos des bibliothques de balises de Dreamweaver Ouverture et fermeture de l'diteur de la bibliothque de balises Ajout de bibliothques, de balises et d'attributs Modification de bibliothques, de balises et d'attributs Suppression de bibliothques, de balises et d'attributs
A propos des bibliothques de balises de Dreamweaver
Haut de la page
Une bibliothque de balises de Dreamweaver est une collection de balises d'un type donn accompagne d'informations sur le formatage des balises par Dreamweaver. Les bibliothques de balises fournissent des informations propos des balises utilises par Dreamweaver pour les conseils de code, les vrifications de navigateurs cibles, le slecteur de balises et autres options de codage. L'diteur de la bibliothque de balises vous permet d'ajouter et de supprimer des bibliothques de balises, des balises, des attributs et des valeurs d'attribut, de dfinir les proprits d'une bibliothque de balises, y compris le format (pour faciliter l'identification dans le code), ainsi que de modifier les balises et les attributs.
Ouverture et fermeture de l'diteur de la bibliothque de balises

1. Choisissez Edition > Bibliothques de balises pour ouvrir l'diteur de la bibliothque de balises.
Haut de la page
La bote de dialogue Editeur de la bibliothque de balises s'affiche. Le contenu de cette bote de dialogue varie selon la balise slectionne. 2. Fermez l'diteur de la bibliothque de balises en procdant d'une des faons suivantes : Pour enregistrer les modifications, cliquez sur OK. Pour fermer l'diteur sans enregistrer les modifications, cliquez sur Annuler. Remarque : Lorsque vous cliquez sur Annuler, toutes les modifications apportes la bibliothque de balises sont effaces. Si vos modifications incluaient la suppression d'une balise ou d'une bibliothque, celle-ci est restaure.
Ajout de bibliothques, de balises et d'attributs
Haut de la page
L'diteur de la bibliothque de balises permet d'ajouter des bibliothques de balises ou des balises et des attributs aux bibliothques de balises dans Dreamweaver.
Ajout d'une bibliothque de balises

1. Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), cliquez sur le bouton Plus (+) et choisissez Nouvelle bibliothque de balises. 2. Dans la zone de texte Nom de la bibliothque, entrez un nom (par exemple, balises diverses), puis cliquez sur OK.
Ajout de balises une bibliothque de balises

1. Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), cliquez sur le bouton Plus (+) et choisissez Nouvelles balises. 2. Dans le menu droulant Bibliothque de balises, choisissez une bibliothque de balises. 3. Saisissez le nom de la nouvelle balise. Pour ajouter plusieurs balises, sparez leurs noms par une virgule suivie d'un espace (par exemple : cfgraph, cfgraphdata). 4. Si les nouvelles balises ont des balises de fin correspondantes (</...>), slectionnez Avoir des balises de fin correspondantes. 5. Cliquez sur OK.
Ajout d'attributs une balise

1. Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), cliquez sur le bouton Plus (+) et choisissez Nouveaux attributs. 2. Dans le menu droulant Bibliothque de balises, choisissez une bibliothque de balises. 3. Slectionnez une balise dans le menu contextuel Balise. 4. Saisissez le nom du nouvel attribut. Pour ajouter plusieurs attributs, sparez leurs noms par une virgule suivie d'un espace (par exemple : width, height).
427
5. Cliquez sur OK.
Modification de bibliothques, de balises et d'attributs
Haut de la page
L'diteur de la bibliothque de balises vous permet de dfinir les proprits d'une bibliothque de balises ou modifier les balises et les attributs d'une bibliothque.
Dfinition des proprits d'une bibliothque de balises

1. Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), slectionnez une bibliothque de balises (et non une balise) dans la liste des balises. Remarque : Les proprits des bibliothques de balises s'affichent uniquement quand une bibliothque de balises est slectionne. Les bibliothques de balises sont reprsentes par les dossiers de niveau suprieur dans la liste des balises. Par exemple, le dossier des balises HTML reprsente une bibliothque de balises, et dans ce dossier, le sous-dossier abbr reprsente une balise. 2. Dans la liste Utilis dans, slectionnez tous les types de document qui seront utiliss par la bibliothque de balises. Les types de documents slectionns ici sont ceux qui fourniront les conseils de code pour la bibliothque de balises spcifie. Par exemple, si l'option HTML n'est pas slectionne pour une bibliothque de balises, les conseils de code de cette balise ne s'affichent pas dans les fichiers HTML. 3. (Facultatif) Entrez le prfixe des balises dans la zone de texte Prfixe de balise. Remarque : Un prfixe est utilis pour identifier l'appartenance d'une balise dans le code une bibliothque de balises dfinie. Certaines bibliothques n'utilisent pas de prfixes. 4. Cliquez sur OK.
Modification d'une balise dans une bibliothque

1. Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), dveloppez une bibliothque de balises dans la liste Balises et slectionnez une balise. 2. Dfinissez les options de format de balise suivantes : Sauts de ligne Dtermine l'endroit o Dreamweaver insre les sauts de ligne pour une balise. Contenu Dtermine comment Dreamweaver insre le contenu d'une balise, savoir si le saut de ligne et les rgles de formatage s'appliquent au contenu. Casse Indique la casse d'une balise spcifique. Choisissez Par dfaut, Minuscules, Majuscules ou Minuscules/majuscules. Si vous choisissez cette dernire option, la bote de dialogue Nom de balise en minuscules/majuscules s'affiche. Saisissez la balise en utilisant que Dreamweaver doit utiliser lors de l'insertion de cette dernire (par exemple, getProperty), puis cliquez sur OK. Par dfaut Dfinit la casse par dfaut de toutes les balises. Dans la bote de dialogue Casse de balise par dfaut qui s'affiche, choisissez <MAJUSCULES> ou <minuscules>, puis cliquez sur OK. Il est prfrable de dfinir les minuscules comme casse par dfaut, conformment aux normes XML et XHTML.
Modification de l'attribut d'une balise

1. Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), ouvrez une bibliothque de balises dans la zone Balises, dveloppez une balise et slectionnez un attribut. 2. Dans le menu droulant Casse d'attribut, choisissez Par dfaut, Minuscules, Majuscules ou Minuscules/majuscules. Si vous choisissez cette dernire option, la bote de dialogue Nom d'attribut en minuscules/majuscules s'affiche. Saisissez l'attribut en utilisant la casse dont doit se servir Dreamweaver lors de l'insertion de cet attribut (par exemple, onClick), puis cliquez sur OK. Cliquez sur le lien Dfaut pour dfinir la casse par dfaut pour tous les noms d'attributs. 3. Dans le menu droulant Type d'attribut, slectionnez le type de l'attribut. Si vous choisissez Enumr, entrez toutes les valeurs d'attribut autorises dans la zone de texte Valeurs. Sparer les valeurs par des virgules, sans insrer d'espaces. Par exemple, les valeurs numres de l'attribut showborder de la balise cfchart sont dfinies comme yes,no.
Suppression de bibliothques, de balises et d'attributs
Haut de la page
1. Dans la bote de dialogue Editeur de la bibliothque de balises (Edition > Bibliothques de balises), slectionnez une bibliothque de balises, une balise ou un attribut dans la bote de dialogue Balises. 2. Cliquez sur le bouton Moins (-). 3. Cliquez sur OK pour confirmer la suppression dfinitive. L'lment disparat de la bote de dialogue Balises. 4. Cliquez sur OK pour fermer l'diteur de la bibliothque de balises et terminer la procdure de suppression.
428
Voir aussi
429
Optimisation et dbogage de code

Nettoyage du code Vrification de l'quilibre des balises et des accolades Vrification de la compatibilit du navigateur Validation des documents XML Validation de documents l'aide du validateur W3C (CS 5.5) Dfinition des prfrences du programme de validation Conformit des pages avec le langage XHTML Utilisation du dbogueur ColdFusion (Windows uniquement)
Nettoyage du code
Haut de la page
Vous pouvez supprimer automatiquement les balises vides, de combiner les balises font imbriques et de nettoyer le code HTML ou XHTML dsordonn ou illisible. Pour plus d'informations sur le nettoyage du code HTML gnr par Microsoft Word, consultez la section Ouverture et modification de documents existants. 1. Ouvrez un document : S'il s'agit d'un document HTML, slectionnez Commandes > Nettoyer le code HTML. S'il s'agit d'un document XHTML, slectionnez Commandes > Nettoyer le code XHTML. La commande Nettoyer le code XHTML permet de nettoyer le code HTML, de corriger les erreurs de syntaxe XHTML, de dfinir les attributs de balise en minuscules et d'ajouter ou de signaler les attributs manquants d'une balise dans un document XHTML. 2. Dans la bote de dialogue qui s'affiche, dfinissez les options de votre choix, puis cliquez sur OK. Remarque : Selon la taille du document et le nombre d'options slectionnes, le nettoyage peut prendre plusieurs secondes. Supprimer Balises de conteneur vides Supprime toute paire de balises sans contenu. Par exemple, <b></b> et <font color="#FF0000"></font> sont des balises vides, mais la balise <b> dans <b>texte</b> ne l'est pas. Supprimer Balises redondantes imbriques Supprime toutes les occurrences redondantes d'une balise. Par exemple, dans le code <b>C'est ce que je voulais <b>vraiment</b> dire</b>, les balises b qui encadrent le mot vraiment sont redondantes et seront supprimes. Supprimer Commentaires HTML ne faisant pas partie de Dreamweaver Supprime tous les commentaires qui n'ont pas t insrs par Dreamweaver. Par exemple, <! -- begin body text -- > sera supprim, mais <! -- TemplateBeginEditable name="doctitle" -- > ne le sera pas, car il s'agit d'un commentaire Dreamweaver qui marque le dbut d'une zone modifiable dans un modle. Supprimer Marqueur spcial Dreamweaver Supprime les commentaires ajouts par Dreamweaver. De cette manire, les documents sont automatiquement mis jour en mme temps que les modles et les lments de la bibliothque. Si vous activez cette option lors du nettoyage du code d'un document cr partir d'un modle, le document et son modle sont dissocis. Pour plus d'informations, consultez la section Dtachement d'un document d'un modle. Supprimer Balise(s) Supprime les balises spcifies dans la zone de texte adjacente. Utilisez cette option pour supprimer des balises personnalises insres par d'autres diteurs visuels, ainsi que les autres balises que vous ne voulez pas voir apparatre sur votre site (par exemple, blink). Sparez les diffrentes balises par des virgules (par exemple, font, blink). Combiner les balises <font> imbriques lorsque possible Combine deux ou plusieurs balises font se rapportant la mme section de texte. Par exemple, <font size="7"><font color="#FF0000">rouge</font></font> sera remplac par <font size="7" color="#FF0000">rouge</font>. Afficher le journal la fin Affiche un message d'avertissement dtaillant les modifications apportes au document ds que le nettoyage est termin.
Vrification de l'quilibre des balises et des accolades
Haut de la page
Vous pouvez vrifier que les paires de balises, de parenthses (( )), d'accolades ({ }) et de crochets ([ ]) sont quilibres dans la page, autrement dit qu' chaque balise, parenthse, accolade ou crochet d'ouverture correspond une balise, une parenthse, une accolade ou un crochet de fermeture, et inversement.
Vrification de l'quilibrage des accolades

1. Ouvrez le document en mode Code.
430
2. Placez le point d'insertion dans le code imbriqu vrifier. 3. Choisissez Edition > Slectionner balise parente. Les balises correspondantes de dlimitation (ainsi que leur contenu) sont slectionnes dans le code. Si vous choisissez plusieurs fois Edition > Slectionner balise parente et que toutes vos balises sont quilibres, Dreamweaver slectionne finalement les balises html et /html qui ouvrent et ferment le document.
Vrification de l'quilibre de paires de parenthses, d'accolades ou de crochets

1. Ouvrez le document en mode Code. 2. Placez le point d'insertion dans le code vrifier. 3. Choisissez Edition > Equilibrer les accolades. Le code se trouvant entre parenthses, entre accolades ou entre crochets est slectionn. Choisissez de nouveau Edition > Equilibrer les accolades pour slectionner le code qui se trouve l'intrieur des parenthses, des accolades ou des crochets dlimitant la nouvelle slection.
Vrification de la compatibilit du navigateur
Haut de la page
Les fonctions de vrification de la compatibilit avec les navigateurs vous permettent de rechercher les combinaisons de HTML et de feuilles de style CSS pouvant dclencher des problmes de restitution dans des navigateurs. Cette fonctionnalit teste galement le code de vos documents et dtermine s'il contient des proprits ou des valeurs CSS non prises en charge par les navigateurs cibles. Remarque : Cette fonction remplace l'ancienne fonction de vrification du navigateur cible, mais conserve la fonctionnalit CSS de cette fonction.
Haut de la page
Validation des documents XML
Vous pouvez dfinir les prfrences du programme de validation, les problmes spcifiques que celui-ci doit rechercher et les types d'erreurs qu'il doit signaler. 1. Effectuez l'une des oprations suivantes : Dans le cas d'un fichier XML ou XHTML, slectionnez Fichier > Valider > En XML. L'onglet Validation du panneau Rsultats affiche le message Pas d'erreur ou d'avertissement ou numre les erreurs de syntaxe releves. 2. Double-cliquez sur le message d'erreur pour mettre l'erreur en surbrillance dans le document. 3. Pour enregistrer un rapport au format XML, cliquez sur le bouton Enregistrer le rapport. 4. Pour afficher le rapport dans votre navigateur principal (et pouvoir l'imprimer), cliquez sur le bouton Parcourir le rapport.
Validation de documents l'aide du validateur W3C (CS 5.5)
Haut de la page
Dreamweaver CS5.5 (et les versions ultrieures) permet de crer des pages Web normalises grce sa prise en charge intgre du validateur W3C. Le validateur W3C valide la conformit de vos documents HTML aux normes HTML ou XHTML. Vous pouvez valider des documents ouverts et des fichiers publis sur un serveur. Utilisez le rapport gnr aprs la validation afin de corriger les erreurs dans votre fichier. Remarque : La fonctionnalit de validateur W3C est uniquement disponible dans Dreamweaver CS5.5 et les versions ultrieures. La version prcdente de cette fonction, disponible dans Dreamweaver CS4, est dconseille pour Dreamweaver CS5. Consultez la documentation de Dreamweaver CS4 pour plus d'informations sur la version prcdente de la fonction.
Validation d'un document ouvert

1. Choisissez Fentre > Rsultats > Validation W3C.. 2. Choisissez Fichier > Valider > Valider document actuel (W3C).
Validation d'un document en direct

Pour les documents en direct, Dreamweaver valide le code reu par le navigateur. Ce code s'affiche lorsque vous effectuez un clic droit dans votre navigateur, puis que vous choisissez l'option d'affichage du code source. La validation de documents en direct est particulirement utile lors de la validation de pages dynamiques l'aide de PHP, JSP, etc. L'option Validation du document en direct n'est active que si l'URL de la page valider commence par http . 1. Choisissez Fentre > Rsultats > Validation W3C.. 2. Cliquez sur Affichage en direct. 3. Choisissez Fichier > Valider > Valider document en direct (W3C).
431
Pour les documents en direct, lorsque vous double-cliquez sur une erreur dans le panneau Validation W3C, une nouvelle fentre s'affiche. Cette fentre affiche le code gnr par le navigateur, o la ligne contenant l'erreur est mise en surbrillance.
Personnalisation des paramtres de validation

1. Choisissez Fentre > Rsultats > Validation W3C.. 2. Dans le panneau Validation W3C, cliquez sur l'icne Validation W3C (lecture). Choisissez Paramtres. 3. Slectionnez un DOCTYPE pour la validation si aucun DOCTYPE n'a t spcifi explicitement dans le document. 4. Si vous ne voulez pas que les erreurs et les avertissements soient affichs, dsactivez les options correspondantes. 5. Cliquez sur Grer si vous voulez supprimer les avertissements ou les erreurs que vous avez masqus l'aide du panneau Validation W3C. Lorsque vous supprimez les avertissements et les erreurs, ils ne s'affichent pas lorsque vous choisissez Tout afficher dans le panneau Validation W3C. 6. Slectionnez Ne pas afficher la bote de dialogue Notification du validateur W3C si vous ne voulez pas que cette bote de dialogue s'affiche au dbut de la validation.
Utilisation des rapports de validation

Lorsque la validation est termine, les rapports de validation s'affichent dans le panneau Validation W3C. Pour plus d'informations sur une erreur ou un avertissement, slectionnez l'erreur/l'avertissement dans le panneau Validation W3C. Cliquez sur Plus d'infos. Pour enregistrer le rapport au format XML, cliquez sur le bouton Enregistrer le rapport. Pour afficher le rapport complet au format HTML, cliquez sur Parcourir le rapport. Le rapport HTML fournit la liste complte des erreurs et avertissements, accompagne d'un rsum. Pour passer l'emplacement de l'erreur dans le code, slectionnez l'erreur dans le panneau Validation W3C. Cliquez sur le bouton Options, puis choisissez Aller la ligne. Pour masquer les erreurs/avertissements, slectionnez l'erreur/avertissement. Cliquez sur le bouton Options, puis choisissez Masquer l'erreur. Pour afficher toutes les erreurs et les avertissements, y compris les erreurs masques, cliquez sur le bouton Options. Choisissez Tout afficher. Les erreurs et avertissements masqus que vous avez supprims dans la bote de dialogue Prfrences ne sont pas rpertoris. Pour effacer tous les rsultats du panneau Validation W3C, cliquez sur le bouton Options. Choisissez Effacer les rsultats.
Dfinition des prfrences du programme de validation
Haut de la page
La fonctionnalit de validation des balises a t abandonne depuis Dreamweaver CS5. Toutefois, Dreamweaver prend toujours en charge les validateurs de code externes que vous installez sous forme d'extensions. Lorsque vous installez une extension de validation externe, Dreamweaver prsente ses prfrences dans la catgorie Validateur de la bote de dialogue Prfrences. 1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2. Slectionnez la catgorie Programme de validation dans la liste de gauche. 3. Slectionnez les bibliothques de balises utiliser pour la validation. Vous ne pouvez pas slectionner plusieurs versions d'un mme langage ou d'une mme bibliothque de balises. Par exemple, vous ne pouvez pas slectionner la fois HTML 4.0 et HTML 3.2 ou HTML 2.0. Slectionnez la version la plus ancienne prendre en compte. En effet, si le document contient du code valide pour HTML 2.0, ce code sera galement valide pour HTML 4.0. 4. Cliquez sur Options et dfinissez les options pour ces bibliothques. 5. Slectionnez les options d'affichage correspondant aux types d'erreurs et d'avertissements inclure dans le rapport du programme de validation. 6. Slectionnez les lments faire vrifier par le validateur. Guillemets dans le texte Indique que Dreamweaver doit vous avertir lors de chaque utilisation de guillemets dans le texte du document. Il est recommand d'utiliser l'entit " la place de guillemets dans le texte de documents HTML. Entits dans le texte Indique que Dreamweaver doit conseiller le remplacement de certains caractres (comme l'esperluette (&), infrieur (<) et suprieur (>)) par leurs quivalents en entit HTML. 7. Cliquez sur OK pour fermer la bote de dialogue Options du programme de validation, puis nouveau sur OK pour dfinir les prfrences.
Conformit des pages avec le langage XHTML
Haut de la page
Lorsque vous crez une page, vous pouvez faire en sorte qu'elle soit compatible avec le langage XHTML. Cette opration est galement possible
432
avec les documents HTML existants.
Cration de documents conformes au code XHTML

1. Choisissez Fichier > Nouveau. 2. Slectionnez une catgorie et un type de page crer. 3. Slectionnez l'une des dfinitions de type de document (DTD) XHTML dans le menu droulant Type de document (DTD) l'extrme droite de la bote de dialogue, puis cliquez sur Crer. Par exemple, vous pouvez rendre un document HTML compatible XHTML en slectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu droulant. Remarque : Cette opration est impossible pour certains types de documents.
Cration de documents conformes au code XHTML par dfaut

1. Choisissez Edition > Prfrences ou Dreamweaver > Prfrences (Mac OS X), puis slectionnez la catgorie Nouveau document. 2. Slectionnez un document par dfaut et l'une des dfinitions de type de document XHTML dans le menu droulant Type de document (DTD), puis cliquez sur OK. Par exemple, vous pouvez rendre un document HTML compatible XHTML en slectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu droulant.
Conformit d'un document HTML avec le langage XHTML

1. Ouvrez un document, puis effectuez l'une des oprations suivantes : Pour un document sans cadres, slectionnez Fichier > Convertir, puis slectionnez l'une des dfinitions de type de document XHTML. Par exemple, vous pouvez rendre un document HTML compatible XHTML en slectionnant XHTML 1.0 transitionnel ou XHTML 1.0 Strict dans le menu droulant. Pour un document avec cadres, slectionnez un cadre, puis Fichier > Convertir, puis slectionnez l'une des dfinitions de type de document XHTML. 2. Pour convertir le document entier, rptez cette tape pour chacun des cadres et pour le document de jeu de cadres. Remarque : Il est impossible de convertir une instance d'un modle, puisqu'elle doit reprendre le mme langage que le modle d'aprs lequel elle a t cre. Par exemple, un document conu d'aprs un modle XHTML restera toujours en XHTML ; de mme, un document conu d'aprs un modle HTML non conforme au langage XHTML restera toujours en HTML et ne pourra pas tre converti en XHTML ni dans aucun autre langage.
Haut de la page
Utilisation du dbogueur ColdFusion (Windows uniquement)
Si vous utilisez ColdFusion pour tester Dreamweaver, vous pouvez afficher les informations de dbogage ColdFusion sans quitter Dreamweaver. Remarque : Cette fonction n'est pas prise en charge sur Macintosh. Les dveloppeurs Macintosh peuvent ouvrir une page ColdFusion dans un autre navigateur au moyen de la commande Aperu dans le navigateur (F12). Si la page contient des erreurs, les informations relatives aux causes possibles s'affichent au bas de la page. Si vous utilisez ColdFusion MX 6.1 ou une version antrieure, commencez par vrifier que le dbogage est activ dans ColdFusion Administrator. Si vous utilisez ColdFusion MX 7 ou une version ultrieure, Dreamweaver active automatiquement ce paramtrage. Vrifiez galement que ColdFusion est en cours d'excution sur le serveur d'valuation de Dreamweaver. Pour plus d'informations, voir Configuration d'un serveur d'valuation. Pour garantir l'actualisation des informations de dbogage chaque fois qu'une page est affiche dans le navigateur interne, veillez ce que Internet Explorer recherche les versions plus rcentes du fichier chaque fois que celui-ci est demand. Dans Internet Explorer, slectionnez Outils > Options Internet, slectionnez l'onglet Gnral, puis cliquez sur le bouton Paramtres dans la zone Fichiers Internet temporaires. Dans la bote de dialogue Paramtres, slectionnez le bouton radio A chaque visite de la page. 1. Ouvrez la page ColdFusion dans Dreamweaver. 2. Cliquez sur l'icne Dbogage du serveur dans la barre d'outils du document.
Dreamweaver demande la page hberge sur le serveur ColdFusion et l'affiche dans une fentre interne du navigateur Internet Explorer. Si la page contient des erreurs, leurs causes possibles s'affichent au bas de la page. Le panneau Dbogage de serveur qui s'ouvre simultanment regroupe de nombreuses informations utiles, telles que toutes les pages traites par le serveur pour la restitution de la page, toutes les requtes SQL excutes sur la page, ainsi que toutes les variables du serveur et leur valeur respective, le cas chant. Ce panneau rcapitule galement les dures d'excution. 3. Si une catgorie Exceptions apparat dans le panneau Dbogage de serveur, cliquez sur le bouton Plus (+) pour la dvelopper. Cette catgorie s'affiche lorsque le serveur dtecte un ou plusieurs problmes sur la page. Dveloppez-la pour obtenir des informations sur le problme.
433
4. Repassez en mode Code (Affichage > Code) ou en mode Cration (Affichage > Cration), puis corrigez l'erreur. 5. Enregistrez le fichier puis cliquez nouveau sur l'icne Dbogage du serveur. Dreamweaver restitue une nouvelle fois la page dans le navigateur interne et actualise le panneau Dbogage de serveur. Si tous les problmes sont rsolus sur la page, la catgorie Exceptions ne rapparat pas dans le panneau. 6. Pour quitter le mode de dbogage, passez en mode Code (Affichage > Code) ou en mode Cration (Affichage > Cration). Voir aussi
434
Dfinition des prfrences de codage

A propos des prfrences de codage Dfinition de l'apparence du code Modification du format du code Dfinition des prfrences de correction de code Dfinition des couleurs du code Utilisation d'un diteur externe
A propos des prfrences de codage
Haut de la page
Vous pouvez dfinir des prfrences de codage, par exemple le formatage du code ou la mise en couleurs, en fonction de vos besoins. Remarque : Pour dfinir les prfrences avances, utilisez l'diteur de la bibliothque de balises (consultez la section Gestion des bibliothques de balises).
Haut de la page
Dfinition de l'apparence du code
Le menu Affichage > Options d'affichage de code permet de configurer le renvoi la ligne des mots, l'affichage du numro des lignes de code, la mise en surbrillance du code HTML incorrect, la coloration de la syntaxe des lments de code, la mise en retrait du code, ainsi que l'affichage des caractres masqus. 1. Affichez le document dans le mode Code ou l'Inspecteur de code. 2. Effectuez l'une des oprations suivantes : Choisissez Affichage > Code et cration Cliquez sur le bouton Options d'affichage dans la barre d'outils situe en haut du mode Code ou de l'Inspecteur de code.
3. Activez ou dsactivez l'une des options suivantes : Renvoi la ligne Renvoie le code la ligne pour le rendre visible sans qu'il soit ncessaire de le faire dfiler horizontalement. Cette option n'insre aucun saut de ligne ; elle a pour seule fonction de simplifier la consultation du code. Numros de lignes Affiche le numro des lignes de code sur le ct. Caractres masqus Permet d'afficher les caractres spciaux au lieu d'un simple espace blanc. Par exemple, un point apparat pour masquer chaque espace, un double chevron remplace chaque tabulation, et une marque de paragraphe remplace chaque saut de ligne. Remarque : Les retours la ligne contextuels que Dreamweaver utilise pour le renvoi du texte la ligne ne sont pas symboliss par une marque de paragraphe. Surligner le code non valide Active, dans Dreamweaver, le surlignage en jaune du code HTML non valide. Ds la slection d'une balise incorrecte, l'inspecteur Proprits affiche des instructions pour corriger l'erreur. Coloration de la syntaxe Active ou dsactive la mise en couleurs du code. Pour plus d'informations sur la modification des couleurs appliquer, consultez la section Dfinition des couleurs du code. Retrait auto Automatise la mise en retrait du code lorsque vous appuyez sur la touche Entre pendant la rdaction du code. La nouvelle ligne de code s'aligne au mme niveau que la ligne qui la prcde. Pour plus d'informations sur la modification de l'espacement du retrait, consultez l'option Taille de tabulation dans Modification du format du code.
Modification du format du code
Haut de la page
Vous pouvez modifier l'aspect de votre code en dfinissant des prfrences de formatage telles que la mise en retrait, la longueur de ligne et la casse des noms de balises et d'attributs. Toutes les options de formatage de code, l'exception de l'option Remplacer la casse de, ne s'appliquent automatiquement qu'aux nouveaux documents et aux additions des documents que vous crez par la suite. Pour modifier le formatage d'un document HTML existant, ouvrez ce document puis cliquez sur Commandes > Appliquer le format source. 1. Choisissez Edition > Prfrences. 2. Slectionnez la catgorie Format du code dans la liste de gauche. 3. Parmi les options suivantes, dfinissez celles de votre choix : Retrait Indique si le code gnr par Dreamweaver doit tre mis en retrait (en conformit avec les rgles de retrait dfinies dans ces
435
prfrences) ou non. Remarque : La majorit des options de retrait de cette bote de dialogue ne s'appliquent qu'au code gnr par Dreamweaver et non au code entr par vos soins. Pour que chaque nouvelle ligne entre s'aligne au mme niveau que la prcdente, utilisez l'option Retrait auto dans les options d'affichage du mode Code. Pour plus d'informations, consultez la section Dfinition de l'apparence du code. Avec (Zone de texte ou menu contextuel) Spcifie le nombre d'espaces ou de tabulations que Dreamweaver doit utiliser afin de mettre en retrait le code gnr. Par exemple, si vous tapez 3 dans la zone de texte et si vous slectionnez Tabulations dans le menu contextuel, le code gnr par Dreamweaver sera mis en retrait de trois tabulations chaque niveau de mise en retrait. Taille de la tabulation Dtermine la taille, en caractres, de chaque tabulation dans le mode Code. Par exemple, si cette taille est dfinie sur 4, chaque tabulation s'affiche dans le mode Code sous la forme d'un espace long de 4 caractres. De plus, si la taille du retrait est dfinie sur 3 et que les caractres utiliss sont des tabulations, le code gnr par Dreamweaver est mis en retrait de trois tabulations par niveau de mise en retrait, ce qui correspond un espace de 12 caractres en mode Code. Remarque : Dreamweaver effectue les mises en retrait l'aide de tabulations ou d'espaces mais ne convertit pas une srie d'espaces en tabulation lors de l'insertion de code. Type de saut de ligne Permet d'indiquer le type de serveur distant (Windows, Macintosh ou UNIX) qui hbergera votre site. Le choix du type de caractres de saut de ligne appropri (CR, CR/LF, LF) garantit que votre code source HTML s'affiche correctement lorsqu'il est affich partir du serveur distant. Ce paramtre est galement utile lorsque vous travaillez avec un diteur de texte externe qui ne reconnat que certains types de retours de chariot. Par exemple, utilisez CR/LF (Windows), si votre diteur de texte est le Bloc-notes de Windows, et CR (Macintosh) s'il s'agit de SimpleText. Remarque : Pour les serveurs auxquels vous vous connectez via FTP, cette option ne s'applique qu'en mode de transfert binaire ; le mode de transfert ASCII de Dreamweaver ignore cette option. Si vous tlchargez (en rception) des fichiers en mode ASCII, Dreamweaver dfinit les sauts de ligne en fonction du systme d'exploitation de votre ordinateur ; si vous transfrez des fichiers en mode ASCII, les sauts de ligne sont toujours dfinis comme CR/LF. Casse de balise par dfaut et casse d'attribut par dfaut Contrlez la capitalisation des noms de balises et d'attributs. Ces options s'appliquent aux balises et aux attributs que vous insrez ou que vous modifiez dans le mode Cration, mais pas aux balises ou attributs que vous entrez directement dans le mode Code (ou l'Inspecteur de code), ni aux balises ou attributs dj contenus dans un document que vous ouvrez (sauf, dans ce dernier cas, si vous avez galement activ l'une des options Remplacer la casse de). Remarque : Cette prfrence s'applique uniquement aux pages HTML. Dreamweaver l'ignore pour les pages XHTML tant donn que les balises et les attributs en majuscules sont incorrects dans XHTML. Remplacer la casse de : Balises et Attributs Spcifie s'il faut toujours convertir les noms de balises et d'attributs dans la casse spcifie, mme lors de l'ouverture d'un document HTML existant. Lorsque vous activez l'une de ces options et que vous cliquez sur OK pour fermer la bote de dialogue, les balises et les attributs du document actif sont immdiatement convertis dans la casse indique et il en sera de mme dans tous les documents que vous ouvrirez par la suite (du moins tant que vous n'aurez pas dsactiv cette option). Les balises et les attributs que vous tapez en mode Code ou dans Quick Tag Editor ou bien que vous insrez partir du panneau Insertion, sont galement convertis dans la casse spcifie. Par exemple, si vous voulez que les noms des balises soient toujours convertis en minuscules, spcifiez minuscules dans l'option Casse de balise par dfaut et activez l'option Remplacer la casse de : Balises. Lorsque vous ouvrez ensuite un document contenant des noms de balises en majuscules, Dreamweaver les convertit en minuscules. Remarque : D'anciennes versions du code HTML permettaient d'crire les noms d'attributs et les balises en majuscules ou en minuscules, mais le XHTML requiert des minuscules. L'usage du XHTML tant de plus en plus rpandu, il est conseill d'utiliser des minuscules pour ces lments. Balise TD : Ne pas inclure de saut de ligne dans la balise TD Rsout un problme de rendu qui se rencontre dans certains anciens navigateurs, si un espace blanc ou des sauts de ligne sont placs immdiatement aprs une balise <td> ou juste avant une balise </td>. Si vous activez cette option, Dreamweaver ne place pas de saut de ligne aprs une balise <td> ou avant une balise </td>, mme si le formatage de la bibliothque de balises indique qu'un saut de ligne devrait tre insr. Formatage avanc Permet de dfinir des options de mise en forme pour le code CSS (Cascading Style Sheets, feuilles de style en cascade) et pour les diffrents attributs et balises dans l'diteur de la bibliothque de balises. Espace blanc (version japonaise uniquement) Permet de slectionner une espace inscable ( ) ou une espace Zenkaku pour votre code HTML. L'espace blanc slectionn avec cette option est utilis pour les balises vides lors de la cration d'un tableau et lorsque l'option Autoriser plusieurs espaces conscutives est active dans les pages de codage japonaises.
Dfinition des prfrences de correction de code
Haut de la page
Les prfrences de correction de code permettent de spcifier les prfrences de modification de code par Dreamweaver lors de l'ouverture de documents, lorsque vous copiez et collez des lments de formulaires ou que vous entrez des valeurs et adresses URL l'aide des outils (par exemple, l'inspecteur Proprits). Ces prfrences sont sans effet lorsque vous modifiez du code HTML ou des scripts dans le mode Code. Si vous dsactivez ces options de correction, les lments de marquage non valides sont affichs dans la fentre de document pour le code HTML qu'il aurait corrig. 1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2. Slectionnez la catgorie Correction du code dans la liste de gauche. 3. Parmi les options suivantes, dfinissez celles de votre choix : Corriger les balises incorrectement imbriques et non fermes Corrige les balises qui se chevauchent. Par exemple,
436
<b><i>texte</b></i> est rcrit comme <b><i>texte</i></b>. Cette option insre galement des guillemets et des crochets de fermeture s'ils sont absents. Renommer les lments de formulaire lors du collage Garantit l'absence de noms d'objets de formulaire en double. Cette option est active par dfaut. Remarque : Contrairement d'autres options de cette bote de dialogue de prfrences, cette option ne s'applique pas l'ouverture d'un document, mais uniquement lorsque vous copiez et collez un lment de formulaire. Supprimer les balises de fermeture superflues Supprime les balises de fermeture auxquelles aucune balise d'ouverture ne correspond. M'avertir lors de la correction ou de la suppression de balises Affiche un rcapitulatif des codes HTML techniquement non valides que Dreamweaver a tent de corriger. Ce rcapitulatif indique l'emplacement du problme ( l'aide des numros de ligne et de colonne), pour vous permettre de vrifier la correction et veiller ce qu'elle produise l'effet voulu. Ne jamais corriger le code : Dans les fichiers avec extensions. Permet d'empcher Dreamweaver de corriger le code dans les fichiers portant les extensions indiques. Cette option est particulirement utile pour les fichiers contenant des balises propritaires. Coder <, >, & et " dans les valeurs d'attributs l'aide de & Garantit que les valeurs d'attribut entres ou modifies l'aide des outils Dreamweaver (par exemple, l'inspecteur Proprits) ne contiennent que des caractres autoriss. Cette option est active par dfaut. Remarque : Cette option et les options suivantes ne s'appliquent pas aux adresses URL entres dans le mode Code. De plus, ces options n'entranent pas de modification dans le code dj prsent dans un fichier. Ne pas coder les caractres spciaux Empche toute modification des adresses URL par Dreamweaver en vue de n'utiliser que des caractres autoriss. Cette option est active par dfaut. Coder caractres spciaux dans les URL l'aide de &# Garantit que, lorsque vous entrez ou modifiez des adresses URL l'aide des outils Dreamweaver (par exemple, l'inspecteur Proprits), ces URL ne contiennent que des caractres autoriss. Coder caractres spciaux dans les URL l'aide de % Fonctionne de faon identique l'option ci-dessus, mais utilise une autre mthode pour coder les caractres spciaux. Cette mthode de codage ( l'aide du signe %) offre une meilleure compatibilit avec les navigateurs plus anciens, mais ne se montre pas aussi efficace avec les caractres utiliss dans certaines langues.
Dfinition des couleurs du code
Haut de la page
Utilisez les prfrences de coloration du code pour spcifier les couleurs des principales catgories de balises et d'lments de code, par exemple les balises lies la mise en forme ou les identificateurs JavaScript. Pour dfinir les prfrences de coloration d'une balise spcifique, modifiez sa dfinition dans l'diteur de la bibliothque de balises. 1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2. Slectionnez la catgorie Coloration du code dans la liste de gauche. 3. Slectionnez un type de document dans la liste Type de document. Les modifications que vous apportez aux prfrences de coloration du code influeront sur tous les documents de ce type. 4. Cliquez sur le bouton Modifier le modle de coloration. 5. Dans la bote de dialogue Modifier le modle de coloration, choisissez un lment de code dans la liste Styles, puis dfinissez la couleur du texte, la couleur d'arrire-plan et ventuellement le style (gras, italique ou soulign). L'chantillon de code affich dans le volet d'aperu est modifi pour correspondre aux nouveaux styles et couleurs. Cliquez sur OK pour enregistrer les modifications et fermer la bote de dialogue Modifier le modle de coloration. 6. Apportez les autres modifications requises aux prfrences de coloration du code, puis cliquez sur OK. Arrire-plan par dfaut permet de dfinir la couleur d'arrire-plan par dfaut pour le mode Code et pour l'inspecteur de code. Caractres masqus dfinit la couleur des caractres masqus. Arrire-plan du code en direct dfinit la couleur d'arrire-plan du mode Code en direct. La couleur par dfaut est le jaune. Modifications du code en direct dfinit la couleur de surbrillance du code qui est modifi dans le mode Code en direct. La couleur par dfaut est le rose. Arrire-plan en lecture seule dfinit la couleur d'arrire-plan du texte en lecture seule.
Utilisation d'un diteur externe
Haut de la page
Vous pouvez spcifier un diteur externe utiliser pour l'dition de fichiers possdant des extensions prcises. Par exemple, vous pouvez lancer un diteur de texte comme BBEdit, le Bloc-Notes ou TextEdit partir de Dreamweaver pour modifier les fichiers JavaScript (JS). Vous pouvez attribuer diffrents diteurs externes pour diffrentes extensions de nom de fichier.
Dfinition d'un diteur externe pour un type de fichier

1. Choisissez Edition > Prfrences. 2. Slectionnez la catgorie Types de fichiers/Editeurs dans la liste de gauche, puis cliquez sur OK.
437
Ouvrir en mode Code Prcise les extensions de noms de fichiers ouvrir automatiquement en mode Code dans Dreamweaver. Editeur de code externe Spcifie l'diteur de texte utiliser. Recharger les fichiers modifis Indiquez ce que Dreamweaver doit faire lorsqu'il dtecte que des changements ont t apports de l'extrieur un document dj ouvert dans Dreamweaver. Enregistrer au dmarrage Permet d'indiquer si Dreamweaver doit systmatiquement enregistrer le document actif avant d'excuter l'diteur, ne jamais enregistrer le document ou vous demander s'il doit l'enregistrer ou non chaque lancement de l'diteur externe. Fireworks Spcifiez les diteurs pour divers types de fichiers multimdia.
Dmarrage d'un diteur de code externe

Choisissez Edition > Modifier avec diteur externe. Voir aussi Prsentation de la barre d'outils de codage Nettoyage de fichiers HTML crs avec Microsoft Word
438
Configuration de votre environnement de codage

Utilisation d'espaces de travail orients codeur Affichage du code Personnalisation des raccourcis clavier Ouverture de fichiers en mode Code par dfaut
Utilisation d'espaces de travail orients codeur
Haut de la page
Vous pouvez modifier l'environnement de codage de Dreamweaver pour l'adapter la faon dont vous travaillez. Vous pouvez par exemple changer le mode d'affichage du code, dfinir diffrents raccourcis clavier ou importer et utiliser votre bibliothque de balises de prdilection. Dreamweaver est fourni avec plusieurs dispositions d'espace de travail conues pour offrir une exprience de codage optimale. La fonction Commutation d'espace de travail de la barre Application vous permet de slectionner l'un des espaces de travail suivants : Dveloppeur d'applications, Dveloppeur d'applications Plus, Codeur et Codeur Plus. Tous ces espaces de travail s'affichent par dfaut en mode Code (dans la fentre de document tout entire ou en modes Code et Cration) et comportent des panneaux ancrs du ct gauche de l'cran. A l'exception de Dveloppeur d'applications Plus, ils liminent tous l'inspecteur Proprits de l'affichage par dfaut. Si aucun des espaces de travail prdfinis ne rpond prcisment vos attentes, vous pouvez personnaliser la disposition en ouvrant et en encrant des panneaux comme bon vous semble, puis en enregistrant l'espace de travail en tant qu'espace de travail personnalis.
Affichage du code
Haut de la page
Vous pouvez visualiser le code source du document actif de plusieurs faons : en l'affichant dans la fentre de document aprs avoir activ le mode Code, en fractionnant la fentre de document pour afficher la fois la page et son code, ou encore en travaillant dans l'Inspecteur de code, qui forme une fentre de code distincte. L'inspecteur de code fonctionne comme le mode Code; il peut tre considr comme un mode Code dtachable pour le document actif.
Affichage du code dans la fentre de document

Choisissez Affichage > Code.
Codage et modification simultane d'une page dans la fentre de document

1. Choisissez Affichage > Code et cration. Le code apparat dans le volet suprieur, et la page dans le volet infrieur. 2. Pour afficher la page au premier plan, choisissez Mode Cration au premier plan dans le menu Affichage de la barre d'outils du document. 3. Pour redimensionner les volets dans la fentre de document, faites glisser la barre de division l'endroit appropri. La barre de division est intercale entre les deux volets. Toutes les modifications apportes dans le mode Cration se rpercutent automatiquement dans le mode Code. Toutefois, aprs avoir effectu des modifications en mode Code, vous devez mettre jour manuellement le document dans le mode Cration ; il vous suffit pour cela de cliquer dans ce mode ou d'appuyer sur la touche F5.
Affichage du code dans une fentre distincte dans l'inspecteur de code

L'inspecteur de code permet de travailler dans une fentre de code distincte, comme vous le faites en mode Code. Choisissez Fentre > Inspecteur de code. La barre d'outils contient les options suivantes : Gestion des fichiers Permet de placer ou d'acqurir le fichier. Aperu/Dbogage dans le navigateur Permet de prvisualiser ou de dboguer votre document dans un navigateur. Actualiser mode Cration Met jour le document en mode Cration, de faon ce qu'il applique les modifications apportes dans le code. Les modifications apportes dans le code n'apparaissent pas automatiquement dans le mode Cration : vous devez excuter tout d'abord certaines oprations, comme enregistrer le fichier ou utiliser ce bouton. Rfrence Ouvre le panneau Rfrence. Consultez la section Utilisation des documents de rfrence sur les langages. Navigation par code Permet de se dplacer rapidement dans le code. Consultez la section Accs une fonction JavaScript ou VBScript. Afficher les options Permet de dterminer la faon dont le code est affich. Consultez la section Dfinition de l'apparence du code. Pour utiliser la barre de codage situe dans la partie gauche de la fentre, consultez la section Insertion de code avec la barre d'outils de codage.
Haut de la page
439

Rien ne vous empche d'utiliser vos raccourcis clavier prfrs dans Dreamweaver. Si vous tes habitu utiliser des raccourcis clavier spcifiques (par exemple, Maj+Entre pour insrer un saut de ligne, Ctrl+G pour atteindre un code prcis), vous pouvez les intgrer dans Dreamweaver au moyen de l'diteur de raccourcis clavier. Pour plus d'informations, reportez-vous la section Personnalisation des raccourcis clavier.
Ouverture de fichiers en mode Code par dfaut
Haut de la page
Lorsque vous ouvrez un fichier qui ne contient normalement aucun code HTML (par exemple, un fichier JavaScript), il s'ouvre en mode Code (ou dans l'Inspecteur de code), et non pas en mode Cration. Vous pouvez dfinir les types de fichiers ouvrir en mode Code. 1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2. Slectionnez la catgorie Types de fichiers/Editeurs dans la liste de gauche. 3. Dans la zone de texte Ouvrir en mode Code, entrez les extensions des types de fichier que vous voulez ouvrir automatiquement en mode Code. Insrez un espace entre les extensions. Vous pouvez en ajouter autant que vous le souhaitez. Voir aussi
440
Syntaxe des modles

Rgles gnrales de syntaxe Balises de modle Balises d'instance Vrification de la syntaxe du modle
Rgles gnrales de syntaxe
Haut de la page
Dreamweaver fait appel des balises de commentaire HTML pour dfinir des rgions dans les modles et dans les documents bass sur un modle, de telle faon que les documents bass sur un modle restent des fichiers HTML valides. Lorsque vous insrez un objet de modle, des balises de modle sont insres dans le code. Les rgles de syntaxe gnrale sont les suivantes : L o il y a un espace, vous pouvez en ajouter autant que vous voulez (sous la forme d'espaces, de tabulations, de sauts de ligne). L'espace blanc est obligatoire, sauf au tout dbut ou la toute fin d'un commentaire. Les attributs peuvent tre saisis dans n'importe quel ordre. Par exemple, dans le cas de TemplateParam, vous pouvez spcifier le type avant le nom. Les noms des commentaires et des attributs sont sensibles la casse. Tous les attributs doivent tre entre guillemets. Il est possible d'utiliser des guillemets simples ou doubles.
Balises de modle
Dreamweaver utilise les balises de modle suivantes : <!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-TemplateBeginEditable name="..." --> TemplateEndEditable --> TemplateParam name="..." type="..." value="..." --> TemplateBeginRepeat name="..." --> TemplateEndRepeat --> TemplateBeginIf cond="..." --> TemplateEndIf --> TemplateBeginPassthroughIf cond="..." --> TemplateEndPassthroughIf --> TemplateBeginMultipleIf --> TemplateEndMultipleIf --> TemplateBeginPassthroughMultipleIf --> TemplateEndPassthroughMultipleIf --> TemplateBeginIfClause cond="..." --> TemplateEndIfClause --> TemplateBeginPassthroughIfClause cond="..." --> TemplateEndPassthroughIfClause --> TemplateExpr expr="..." --> (equivalent to @@...@@) TemplatePassthroughExpr expr="..." --> TemplateInfo codeOutsideHTMLIsLocked="..." -->
Haut de la page
Balises d'instance
Dreamweaver utilise les balises d'instance suivantes : <!-<!-<!-<!-<!-<!-InstanceBegin template="..." codeOutsideHTMLIsLocked="..." --> InstanceEnd --> InstanceBeginEditable name="..." --> InstanceEndEditable --> InstanceParam name="..." type="..." value="..." passthrough="..." --> InstanceBeginRepeat name="..." -->
441
Haut de la page
  
Vrification de la syntaxe du modle
Haut de la page
Dreamweaver vrifie la syntaxe du modle lorsque vous l'enregistrez, mais vous pouvez la vrifier manuellement avant d'enregistrer le modle. Par exemple, si vous ajoutez un paramtre ou une expression de modle en mode Code, vous pouvez vrifier que le code suit la syntaxe correcte. 1. Ouvrez le document que vous souhaitez vrifier dans la fentre de document. 2. Choisissez Modifier > Modles > Vrifier la syntaxe du modle. Un message d'erreur s'affiche lorsque cette syntaxe est incorrecte. Le message dcrit l'erreur et indique la ligne du code l'origine de cette erreur. Voir aussi
442
Rdaction et modification de code

Conseils de code Site-specific code hints Insertion de code avec la barre d'outils de codage Insertion de code l'aide du panneau Insertion Insertion de balises avec le Slecteur de balises Insertion de commentaires HTML Copie et collage de code Modification de balises avec des diteurs de balises Modification de code l'aide du menu Codage Modification d'une balise de langage de serveur l'aide de l'inspecteur Proprits Mise en retrait des blocs de code Navigation vers le code associ Accs une fonction JavaScript ou VBScript Extraction de JavaScript Manipulation de fragments de code Recherche de balises, d'attributs ou de chanes de texte dans le code Enregistrement et chargement de modles de recherche Utilisation des documents de rfrence sur les langages Impression de code
Conseils de code
Haut de la page
Les conseils de code vous permettent d'insrer et de modifier le code rapidement et sans erreur de saisie. A mesure que vous tapez des caractres en mode Code, une liste de suggestions s'affiche et vous aide complter votre saisie. Par exemple, lorsque vous tapez les premiers caractres du nom d'une balise, d'un attribut ou d'une proprit CSS, une liste d'options dont le nom commence par ces caractres s'affiche. Cette fonctionnalit facilite l'insertion et la modification de code. Vous pouvez galement l'utiliser pour consulter les attributs disponibles pour une balise, les paramtres d'une fonction ou les mthodes d'un objet. Les conseils de code sont disponibles pour diffrents types de code. Lorsque vous tapez le premier caractre d'un type de code prcis, une liste de suggestions s'affiche. Par exemple, pour afficher la liste des conseils de code pour les noms de balises HTML, tapez un crochet ouvrant (<). De mme, pour afficher des conseils de code pour JavaScript, tapez un point aprs un objet. Pour exploiter pleinement cette fonctionnalit, en particulier lorsque vous l'utilisez pour des fonctions et des objets, dfinissez l'option Dlai de la bote de dialogue Prfrences de conseils de code sur 0 seconde. La fonctionnalit de conseils de code reconnat galement les classes JavaScript personnalises qui ne sont pas intgres ce langage. Vous pouvez rdiger ces classes personnalises ou les ajouter par l'intermdiaire de bibliothques de fournisseurs tiers, comme Prototype. Pour faire disparatre la liste des conseils de code, appuyez sur la touche Retour arrire (Windows) ou Arrire (Macintosh). Vous trouverez un didacticiel vido sur les conseils de code l'adresse www.adobe.com/go/lrvid4048_dw_fr. Vous trouverez un didacticiel vido sur la prise en charge de JavaScript dans Dreamweaver, ralis par l'quipe de Dreamweaver, l'adresse www.adobe.com/go/dw10javascript_fr.
Langages et technologies pris en charge

Dreamweaver prend en charge les conseils de code pour les langages et les technologies suivants : Adobe ColdFusion Ajax ASP JavaScript ASP.NET C# ASP.NET VB ASP VBScript CSS2 et CSS3 DOM (Document Object Model) HTML4 et HTML5
443
jQuery (CS5.5 et versions ultrieures) JavaScript (avec conseils de code pour les classes personnalises) JSP PHP MySQL Spry
Affichage d'un menu de conseils de code

Le menu de conseils de code s'affiche automatiquement lorsque vous tapez en mode Code. Vous pouvez galement l'afficher manuellement, sans taper. 1. En mode Code (Fentre > Code), placez le point d'insertion l'intrieur d'une balise. 2. Appuyez sur Ctrl + Barre d'espace.
Insertion de code l'aide des conseils en mode Code

1. Saisissez le premier caractre du segment de code. Par exemple, pour insrer une balise, tapez un crochet ouvrant (<). Pour insrer un attribut, placez le point d'insertion juste aprs le nom de la balise, puis appuyez sur la barre d'espace. Une liste d'lments (par exemple les noms des diffrentes balises ou des diffrents attributs) s'affiche. Vous pouvez fermer cette liste tout moment en appuyant sur la touche Echap. 2. Faites dfiler les lments de la liste l'aide de la barre de dfilement ou des touches flches vers le haut et vers le bas. 3. Double-cliquez sur l'un des lments de cette liste pour l'insrer ; vous pouvez galement le slectionner, puis appuyer sur la touche Entre (Windows) ou Retour (Macintosh). Si vous avez cr un style CSS et que celui-ci ne figure pas dans la liste des conseils de code correspondant aux styles CSS, cliquez sur Actualiser la liste des styles. Si le mode Cration est visible, il peut arriver que du code non valide s'y affiche provisoirement lorsque vous cliquez sur Actualiser la liste des styles. Pour faire disparatre ce code non valide du mode Cration, appuyez sur F5 afin d'actualiser l'affichage aprs l'insertion du style. 4. Pour insrer une balise de fin, tapez </ (barre oblique). Remarque : Par dfaut, Dreamweaver dtermine le moment o une balise de fermeture est requise et l'insre automatiquement. Vous pouvez modifier ce comportement par dfaut, de faon ce que Dreamweaver insre une balise de fermeture lorsque vous avez tap le crochet fermant (>) final de la balise d'ouverture. Alternativement, le comportement par dfaut peut consister ne pas insrer la moindre balise de fermeture. Slectionnez Edition > Prfrences > Conseils de code, puis slectionnez l'une des options de Balises de fermeture.
Modification d'une balise l'aide des conseils de code

Pour remplacer un attribut par un autre, supprimez l'attribut concern et sa valeur, puis ajoutez le nouvel attribut et la valeur associe en suivant la procdure ci-avant. Pour modifier une valeur, supprimez la valeur concerne, puis ajoutez une nouvelle valeur en suivant la procdure ci-avant.
Actualisation des conseils de code JavaScript

Dreamweaver actualise automatiquement la liste des conseils de code disponibles lorsque vous travaillez dans un fichier JavaScript. Par exemple, supposons que vous travailliez dans un fichier HTML principal et que vous passiez un fichier JavaScript afin d'y apporter une modification. Cette modification se rpercute dans la liste des conseils de code lorsque vous revenez au fichier HTML principal. Toutefois, la mise jour automatique ne fonctionne que si vous modifiez vos fichiers JavaScript dans Dreamweaver. Si vous les modifiez en dehors de Dreamweaver, appuyez sur CTRL+point pour actualiser les conseils de code JavaScript.
Conseils de code et erreurs de syntaxe

Il peut arriver que les conseils de code ne fonctionnent pas correctement si Dreamweaver dtecte des erreurs de syntaxe dans votre code. Dreamweaver signale les erreurs de syntaxe en affichant des informations leur sujet dans une barre en haut de la page. La barre d'informations sur les erreurs de syntaxe affiche la premire ligne du code o Dreamweaver a rencontr l'erreur. Lorsque vous avez corrig les erreurs, Dreamweaver continue afficher celles qui surviennent par la suite. Dreamweaver fournit une assistance supplmentaire en mettant en rouge les numros des lignes o des erreurs de syntaxe se sont produites. Cette mise en vidence est visible dans le mode Code du fichier contenant l'erreur. Dreamweaver affiche non seulement les erreurs de syntaxe pour la page actuelle, mais aussi pour les pages associes. Supposons par exemple que vous travailliez sur une page HTML utilisant un fichier JavaScript inclus. Si le fichier inclus contient une erreur, Dreamweaver affiche galement une alerte pour celui-ci. Vous pouvez aisment ouvrir le fichier associ contenant l'erreur en cliquant sur son nom dans le haut du document. Vous pouvez dsactiver la barre d'informations sur les erreurs de syntaxe. Pour ce faire, cliquez sur le bouton Alertes d'erreurs de syntaxe dans la barre d'outils de codage.
444
Dfinition des prfrences de conseils de code

Vous pouvez modifier les paramtres par dfaut des conseils de code. Par exemple, si vous ne voulez pas afficher les noms des proprits CSS ou les conseils de code Spry, vous pouvez les dsactiver parmi les prfrences des conseils de code. Vous pouvez galement dfinir des prfrences relatives au dlai d'affichage des conseils de code et aux balises de fermeture. Mme si l'affichage des conseils de code est dsactiv, vous pouvez afficher un conseil en mode Code en appuyant sur les touches Ctrl+Barre d'espace. 1. Choisissez Edition > Prfrences. 2. Slectionnez la catgorie Conseils de code dans la liste de gauche. 3. Parmi les options suivantes, dfinissez celles de votre choix : Balises de fermeture Permet de spcifier le mode d'insertion des balises de fermeture par Dreamweaver. Par dfaut, Dreamweaver insre la balise de fermeture automatiquement lorsque vous tapez les caractres </. Vous pouvez modifier ce comportement par dfaut, de faon ce que Dreamweaver insre une balise de fermeture suite au crochet fermant (>) de la balise d'ouverture, ou de faon omettre les balises de fin. Activer les conseils de code Entrane l'affichage des conseils de code lorsque vous entrez du code en mode Code. Rglez le curseur Dlai pour dfinir le dlai (en secondes) qui s'coule avant l'apparition des conseils appropris. Activer les infobulles descriptives Affiche une description dtaille (s'il en existe une) du conseil de code slectionn. Menus Dfinit prcisment le type de conseils de code afficher pendant la saisie. Libre vous d'utiliser tous les menus ou une partie seulement.
Site-specific code hints
Haut de la page
Dreamweaver CS5 lets developers working with Joomla, Drupal, Wordpress or other frameworks, to view PHP code hints as they write in Code view. To display these code hints, you first need to create a configuration file using the Site-Specific Code Hints dialog box. The configuration tells Dreamweaver where to look for code hints that are specific to your site. For a video tutorial on working with Site-specific code hints, see www.adobe.com/go/learn_dw_comm13_fr.
Create the configuration file

Use the Site-Specific Code Hints dialog box to create the configuration file needed to display code hints in Dreamweaver. By default, Dreamweaver stores the configuration file in the Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presets directory. Remarque : The code hints you create are specifically for the site selected in the Dreamweaver Files panel. In order for the code hints to display, the page you are working on must reside in the currently selected site. 1. Select Site > Site-Specific Code Hints. By default, the Site-Specific Code Hints feature scans your site to determine which Content Management System (CMS) framework youre using. Dreamweaver supports three frameworks by default: Drupal, Joomla, and Wordpress. The four buttons to the right of the Structure pop-up menu let you import, save, rename, or delete framework structures. Remarque : You cannot delete or rename the existing default framework structures. 2. In the sub-root text box, specify the sub-root folder where you store your frameworks files. You can click the folder icon next to the text box to browse to the framework files location. Dreamweaver displays a file tree structure of folders that contain your framework files. If the folders and/or files you want to scan are all displayed, click OK to run the scan. If you want to customize the scan, go on to the next steps. 3. Click the plus (+) button above the Files window to select a file or folder that you want to add to the scan. In the Add Files/Folders dialog box, you can specify particular file extensions that you want to include. Remarque : Specifying particular file extensions speeds up the scanning process. 4. To remove files from the scan, select the files you dont want scanned, and then click the minus (-) button above the Files window. Remarque : If Drupal or Joomla is the selected framework, the Site-Specific Code Hints dialog box displays an additional path to a file within your Dreamweaver configuration folder. Dont delete thisits required when using these frameworks. 5. To customize how the Site-Specific Code Hints feature treats a particular file or folder, select it from the list and do one of the following: Select Scan This Folder to include the selected folder in the scan. Select Recursive to include all files and folders within a selected directory. Click the Extensions button to open the Find Extensions dialog box, where you can specify the file extensions you want included in your scan for a particular file or folder.
Save site structure

445
You can save the customized site structure youve created in the Site-Specific Code Hints dialog box. 1. Create the structure of files and folders as you want it, adding and deleting files and folders as necessary. 2. Click the Save Structure button in the upper right-hand corner of the dialog box. 3. Specify a name for your site structure and click Save. Remarque : If the name you specify is already in use, Dreamweaver prompts you to enter a different name, or to confirm that you want to overwrite the structure with the same name. You cannot overwrite any of the default framework structures.
Rename site structures

When renaming your site structure, keep in mind that you cannot use the names of any of the three default site framework structures, or the word custom. 1. Display the structure that you want to rename. 2. Click the Rename Structure icon button in the upper right-hand corner of the dialog box. 3. Specify a new name for the structure and click Rename. Remarque : If the name you specify is already in use, Dreamweaver prompts you to enter a different name, or to confirm that you want to overwrite the structure with the same name. You cannot overwrite any of the default framework structures.
Add files or folders to a site structure

You can add any files or folders that are associated with your framework. After that, you can specify the file extensions of the files you want to scan. (See the next section.) 1. Click the plus (+) button above the Files window to open the Add File/Folder dialog box. 2. In the Add File/Folder text box, enter the path to the file or folder you want to add. You can also click the folder icon next to the text box to browse to a file or folder. 3. Click the plus (+) button above the Extensions window to specify the file extensions of files you want to scan. Remarque : Specifying particular file extensions speeds up the scanning process. 4. Click Add.
Scan a site for file extensions

Use the Find Extensions dialog box to view and edit file extensions that are included in the site structure. 1. In the Site-Specific Code Hints dialog box, click the Extensions button. The Find Extensions dialog box lists the current scannable extensions. 2. To add another extension to the list, click the plus (+) button above the Extensions window. 3. To delete an extension from the list, click the minus (-) button.
Insertion de code avec la barre d'outils de codage

1. Assurez-vous que vous tes en mode Code (Affichage > Code). 2. Placez le curseur dans le code, ou slectionnez un bloc de code.
Haut de la page
3. Cliquez sur un bouton de la barre d'outils de codage, ou slectionnez un lment de l'un des menus contextuels de la barre d'outils. Pour connatre la fonction de chaque bouton, positionnez le pointeur sur ce bouton jusqu' ce qu'une info-bulle apparaisse. La barre d'outils de codage contient par dfaut les boutons suivants : Ouvrir les documents Affiche la liste des documents ouverts. Lorsque cette option est slectionne, elle s'affiche dans la fentre Document. Afficher la fentre Navigation dans le code Affiche la fentre Navigation dans le code. Pour plus d'informations, consultez la rubrique Navigation vers le code associ. Rduire balises entires Rduit tout le contenu compris entre une balise d'ouverture et sa balise de fermeture (par exemple, tout le code compris entre <table> et </table>). Pour rduire tout le contenu d'une balise complte, placez le point d'insertion sur la balise d'ouverture ou de fermeture, puis cliquez sur le bouton Rduire balise entire. Il est galement possible de rduire le code situ l'extrieur d'une balise complte, en plaant le point d'insertion dans une balise d'ouverture ou de fermeture avant de cliquer sur le bouton Rduire balise entire tout en maintenant la touche Alt enfonce (Windows) ou la touche Option (Macintosh). Par ailleurs, vous pouvez maintenir la touche Ctrl enfonce tout en cliquant sur ce bouton pour dsactiver la rduction intelligente. Dans ce cas, Dreamweaver n'ajuste pas le contenu rduit l'extrieur de la paire de balises. Pour plus d'informations sur le mode Code, consultez la section A propos de la rduction du code. Rduire la slection Rduit le code slectionn.
446
Vous pouvez galement rduire le code en dehors d'une slection en cliquant tout en maintenant enfonce la touche Alt (Windows) ou Option (Macintosh) sur le bouton Rduire slection. Par ailleurs, vous pouvez maintenir la touche Ctrl enfonce tout en cliquant sur ce bouton pour dsactiver la rduction intelligente. Dans ce cas, Dreamweaver n'ajuste pas le contenu et rduit exactement le code slectionn. Pour plus d'informations sur le mode Code, consultez la section A propos de la rduction du code. Dvelopper tout Rtablit tout le code rduit. Slectionner une balise parent Slectionne le contenu et les balises d'ouverture et de fermeture qui encadrent la ligne dans laquelle est plac le point d'insertion. Si vous cliquez plusieurs fois sur ce bouton et que toutes vos balises sont quilibres, Dreamweaver slectionne finalement les balises html et /html situes aux extrmits. Equilibrer les accolades Slectionne tout le code se trouvant l'intrieur des parenthses, des accolades ou des crochets qui encadrent la ligne dans laquelle est plac le point d'insertion. Si vous cliquez plusieurs fois sur ce bouton et que toutes vos balises sont quilibres, Dreamweaver slectionne finalement les parenthses, accolades ou crochets les plus extrieur(e)s du document. Numros de lignes Permet d'afficher ou masquer les numros de lignes au dbut de chaque ligne de code. Surligner le code non valide Surligne le code non valide en jaune. Alertes d'erreurs de syntaxe dans la barre d'information Active ou dsactive une barre d'information, dans le haut de la page, qui vous avertit des erreurs de syntaxe. Lorsque Dreamweaver dtecte une erreur de syntaxe, la barre d'information sur les erreurs de syntaxe spcifie la ligne de code o cette erreur est survenue. En outre, Dreamweaver met en surbrillance le numro de la ligne de l'erreur, sur la gauche du document, en mode Code. La barre d'information est active par dfaut, mais elle ne s'affiche que lorsque Dreamweaver dtecte des erreurs de syntaxe sur la page. Appliquer commentaire Permet d'encadrer le code slectionn avec des balises de commentaires, ou d'ouvrir de nouvelles balises de commentaires. Appliquer Commentaire HTML encadre le code slectionn de balises , ou ouvre une nouvelle balise si aucun code n'est slectionn. Appliquer Commentaire // insre une double barre oblique (//) au dbut de chaque ligne du code CSS ou JavaScript slectionn, ou insre une unique balise // si aucun code n'est slectionn. Appliquer Commentaire /* */ encadre le code CSS ou JavaScript slectionn avec les codes de commentaires /* et /*. La marque de commentaire ' a t conue pour le code Visual Basic. Elle insre un guillemet droit simple au dbut de chaque ligne slectionne d'un script Visual Basic, ou insre un guillemet droit simple au point d'insertion si aucun code n'est slectionn. Lorsque vous travaillez sur un fichier ASP, ASP.NET, JSP, PHP ou ColdFusion, si vous appliquez l'option Appliquer Commentaire sur serveur, Dreamweaver dtecte automatiquement la balise de commentaire correcte et l'applique la slection. Supprimer commentaire Supprime les balises de commentaires du code slectionn. Si une slection comporte des commentaires incorpors, seules les balises de commentaire externe sont supprimes. Envelopper avec balise Permet d'encadrer le code slectionn avec la balise indique dans Quick Tag Editor. Fragment de code rcents Permet de choisir dans le panneau Fragments de code un fragment de code rcemment utilis et de l'insrer. Pour plus d'informations, consultez la section Manipulation de fragments de code. Dplacer ou convertir une feuille CSS Permet de dplacer du code CSS ou de convertir du code CSS intgr en rgles CSS. Pour plus d'informations, consultez les sections Dplacement/exportation de rgles CSS et Conversion de code CSS intgr en rgle CSS. Indentation du code Ramne la slection vers la droite. Indentation ngative du code Ramne la slection vers la gauche. Mise en forme du code source Applique les formats de code prcdemment dfinis au code slectionn (ou la page entire si aucun code n'est slectionn). Vous pouvez galement dfinir les prfrences de formatage du code en slectionnant Formatage du code source avec le bouton du mme nom, ou en modifiant les bibliothques de balises en slectionnant Edition, Bibliothques de balises. Le nombre de boutons disponibles dans la barre d'outils de codage varie selon la taille d'affichage en mode Code dans la fentre du document. Pour voir tous les boutons disponibles, vous pouvez redimensionner la fentre d'affichage du mode Code ou cliquer sur le bouton d'expansion, la base de la barre d'outils de codage. Vous pouvez galement modifier la barre d'outils de codage pour afficher des boutons supplmentaires (Retour automatique la ligne, Caractres masqus et Retrait auto) ou pour masquer des boutons que vous ne souhaitez pas utiliser. Nanmoins, vous devez pour cela modifier le fichier XML qui gnre la barre d'outils. Pour plus d'informations, voir Extension de Dreamweaver. Remarque : L'option d'affichage des caractres masqus, qui ne fait pas partie des boutons par dfaut de la barre d'outils de codage, est disponible partir du menu Affichage (Affichage > Options d'affichage de code > Caractres masqus).
Insertion de code l'aide du panneau Insertion

1. Positionnez le point d'insertion dans le code. 2. Slectionnez la catgorie approprie du panneau Insertion.
447
Haut de la page
3. Cliquez sur un bouton du panneau Insertion ou slectionnez un lment de l'un des menus de ce panneau. Ds que vous cliquez sur une icne, le code peut apparatre immdiatement dans la page ou une bote de dialogue peut vous demander de spcifier des informations supplmentaires pour terminer le code. Pour connatre la fonction de chaque bouton, positionnez le pointeur sur ce bouton jusqu' ce qu'une info-bulle apparaisse. Le nombre et le type des boutons du panneau Insertion varient selon la nature du document affich. et selon que le mode Code ou Cration est actif. Bien que le panneau Insertion regroupe les balises frquemment utilises, son contenu n'est pas exhaustif. Vous trouverez un choix plus vari de balises dans le slecteur de balises.
Insertion de balises avec le Slecteur de balises
Haut de la page
Vous pouvez utiliser le slecteur de balises pour insrer dans une page n'importe quelle balise figurant dans les bibliothques de balises de Dreamweaver (notamment les bibliothques de balises de ColdFusion et ASP.NET). 1. Placez le point d'insertion dans le code, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh), puis slectionnez Insrer la balise. Le Slecteur de balises s'affiche. Le panneau de gauche rpertorie les bibliothques de balises prises en charge, tandis que le panneau de droite affiche les balises individuelles du dossier de bibliothques de balises slectionn. 2. Dans la bibliothque de balises, slectionnez une catgorie de balises ou dveloppez cette catgorie pour slectionner une sous-catgorie. 3. Slectionnez la balise souhaite dans le volet de droite. 4. Pour afficher les informations concernant la syntaxe et l'emploi de la balise dans le slecteur de balises, cliquez sur le bouton Infos sur les balises. Ces informations, si elles existent, s'affichent. 5. Pour afficher ces informations dans le panneau Rfrence, cliquez sur l'icne <?>. Ces informations, si elles existent, s'affichent. 6. Cliquez sur le bouton Insrer pour insrer la balise slectionne dans le code. Si la balise affiche dans le volet de droite apparat entre crochets, par exemple <title></title>), elle ne ncessite aucune information complmentaire et s'insre directement dans le document au niveau du point d'insertion. Si la balise ne ncessite aucune information complmentaire, un diteur de balises s'affiche. 7. Le cas chant, entrez les informations supplmentaires dans l'diteur de balises, puis cliquez sur OK. 8. Cliquez sur le bouton Fermer.
Insertion de commentaires HTML
Haut de la page
Un commentaire est un texte descriptif insr dans le code HTML pour expliciter le code ou fournir d'autres informations. Le commentaire apparat uniquement en mode Code ; il ne s'affiche pas dans un navigateur.
Insertion d'un commentaire au niveau du point d'insertion

Choisissez Insertion > Commentaire. En mode Code, une balise de commentaire est insre et le point d'insertion est plac au milieu de celle-ci. Saisissez votre commentaire. En mode Cration, la bote de dialogue Commentaire s'affiche. Entrez le commentaire, puis cliquez sur OK.
Affichage des marqueurs de commentaires en mode Cration

Choisissez Affichage > Assistances visuelles > Elments invisibles. Vrifiez que l'option Commentaires est slectionne dans les prfrences des lments invisibles. Dans le cas contraire, le marqueur de commentaire ne s'affiche pas.
Modification d'un commentaire existant

En mode Code, recherchez le commentaire pour en modifier le texte. En mode Cration, slectionnez le marqueur Commentaire, modifiez le texte de votre commentaire dans l'inspecteur Proprits, puis cliquez dans la fentre de document.
Copie et collage de code

1. Copiez le code partir du mode Code ou d'une autre application. 2. Placez le point d'insertion en mode Code, puis choisissez Edition > Coller.
Haut de la page
Modification de balises avec des diteurs de balises

448
Haut de la page
Les diteurs de balises permettent d'afficher, de spcifier et de modifier les attributs d'une balise. 1. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur une balise (en mode Code) ou sur un objet (en mode Cration), puis slectionnez la commande Modifier la balise du menu contextuel. Le contenu de cette bote de dialogue varie selon la balise slectionne. 2. Indiquez ou modifiez les attributs de la balise, puis cliquez sur OK. Pour obtenir davantage d'informations sur la balise partir de l'diteur de balises, cliquez sur l'option Infos sur les balises.
Modification de code l'aide du menu Codage
Haut de la page
1. En mode Code, slectionnez du code, puis cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh). 2. Cliquez sur le sous-menu Slection puis choisissez l'une des options suivantes : Rduire la slection Rduit le code slectionn. Rduire l'extrieur de la slection Rduit tout le code l'extrieur du code slectionn. Dvelopper la slection Dveloppe le fragment de code slectionn. Rduire balises entires Rduit tout le contenu compris entre une balise d'ouverture et sa balise de fermeture (par exemple, tout le code compris entre <table> et </table>). Rduire extrieur balises entires Rduit le contenu l'extrieur d'un jeu de balises d'ouverture et de fermeture (par exemple, le contenu l'extrieur de <table> et </table>). Dvelopper tout Rtablit tout le code rduit. Appliquer Commentaire HTML Encadre le code slectionn de balises , ou ouvre une nouvelle balise si aucun code n'est slectionn. Appliquer Commentaire /* */ Encadre le code CSS ou JavaScript slectionn avec les codes de commentaires /* et */. Appliquer Commentaire // Insre une double barre oblique (//) au dbut de chaque ligne du code CSS ou JavaScript slectionn, ou insre une unique balise // si aucun code n'est slectionn. Appliquer Commentaire ' Insre un guillemet droit simple au dbut de chaque ligne slectionne d'un script Visual Basic, ou insre un guillemet droit simple au point d'insertion si aucun code n'est slectionn. Appliquer Commentaire sur serveur Entoure le code slectionn. Lorsque vous travaillez sur un fichier ASP, ASP.NET, JSP, PHP ou ColdFusion, si vous appliquez l'option Appliquer Commentaire sur serveur, Dreamweaver dtecte automatiquement la balise de commentaire correcte et l'applique la slection. Appliquer correction barre oblique inverse-commentaire Entoure le code CSS slectionn de balises de commentaire qui forcent Internet Explorer 5 pour Macintosh ignorer le code. Appliquer correction Ciao Entoure le code CSS slectionn de balises de commentaire qui forcent Internet Netscape Navigator 4 ignorer le code. Supprimer commentaire Supprime les balises de commentaires du code slectionn. Si une slection comporte des commentaires incorpors, seules les balises de commentaire externe sont supprimes. Supprimer correction barre oblique inverse-commentaire Supprime les balises de commentaires du code CSS slectionn. Si une slection comporte des commentaires incorpors, seules les balises de commentaire externe sont supprimes. Supprimer correction Ciao Supprime les balises de commentaires du code CSS slectionn. Si une slection comporte des commentaires incorpors, seules les balises de commentaire externe sont supprimes. Convertir les tabulations en espaces Convertit toutes les tabulations de la slection en espaces ; le nombre d'espaces correspond la valeur de taille de tabulation dfinie dans les prfrences Format. Pour plus d'informations, consultez la section Modification du format du code. Convertir les espaces en tabulations Convertit les groupes d'espaces de la slection en tabulations. Les groupes dont le nombre d'espaces correspond la valeur de taille de tabulation dfinie sont convertis en tabulation. Retrait Met la slection en retrait, en la repoussant vers la droite. Pour plus d'informations, consultez la section Mise en retrait des blocs de code. Retrait ngatif Ramne la slection vers la gauche. Supprimer toutes les balises Supprime toutes les balises de la slection. Convertir les lignes en tableaux Insre une balise table sans attribut de part et d'autre de la slection. Ajouter des sauts de ligne Ajoute une balise br la fin de chaque ligne de la slection. Convertir en majuscules Convertit toutes les lettres de la slection (y compris les noms et les valeurs des balises et des attributs) en majuscules.
449
Convertir en minuscules Convertit toutes les lettres de la slection (y compris les noms et les valeurs des balises et des attributs) en minuscules. Convertir les balises en majuscules Convertit tous les noms de balise et d'attribut et toutes les valeurs d'attribut de la slection en majuscules. Convertir les balises en minuscules Convertit tous les noms de balise et d'attribut et toutes les valeurs d'attribut de la slection en minuscules.
Modification d'une balise de langage de serveur l'aide de l'inspecteur Proprits
Haut de la page
Vous pouvez modifier le code dans une balise de langage de serveur (comme une balise ASP) sans accder au mode Code, grce l'inspecteur Proprits du code. 1. En mode Cration, slectionnez l'icne visuelle de balise de langage de serveur. 2. Dans l'inspecteur Proprits, cliquez sur le bouton Edition. 3. Apportez les modifications requises au code de la balise puis cliquez sur OK.
Mise en retrait des blocs de code
Haut de la page
Lorsque vous rdigez et modifiez votre code en mode Code ou dans l'inspecteur de code, vous pouvez corriger le niveau de mise en retrait de la ligne ou du bloc de code slectionns, en les dplaant d'une tabulation vers la gauche ou vers la droite.
Mise en retrait du bloc de code slectionn

Appuyez sur la touche de tabulation. Slectionnez Edition > Indentation du code.
Annulation de la mise en retrait du bloc de code slectionn

Appuyez sur Maj+Tab. Slectionnez Edition > Indentation ngative du code.
Navigation vers le code associ
Haut de la page
La fentre Navigation dans le code affiche une liste de codes source apparents une slection spcifique sur votre page. Vous pouvez l'utiliser pour naviguer vers les codes source apparents, comme des rgles CSS internes et externes, des inclusions ct serveur, des fichiers JavaScript externes, des fichiers de modles parents, des fichiers de bibliothque et des fichiers source iframe. Lorsque vous cliquez sur un lien dans la fentre Navigation dans le code, Dreamweaver ouvre le fichier contenant le code concern. Ce fichier s'affiche dans la section des fichiers associs, pour autant que cette fonctionnalit soit active. Si elle n'est pas active, Dreamweaver ouvre le fichier slectionn dans un document spar, dans la fentre de document. Si vous cliquez sur une rgle CSS dans la fentre Navigation dans le code, Dreamweaver accde directement cette rgle. S'il s'agit d'une rgle interne du fichier, Dreamweaver l'affiche en mode fractionn. Si la rgle est un fichier CSS externe, Dreamweaver ouvre ce dernier et affiche la rgle dans la section des fichiers associs, au-dessus du document principal. Vous pouvez accder la fentre Navigation dans le code depuis les modes Cration, Code et fractionn, ainsi qu' partir de l'inspecteur de code. Vous trouverez un didacticiel vido sur l'utilisation du navigateur de code, ralis par l'quipe de Dreamweaver, l'adresse http://www.adobe.com/go/dw10codenav_fr. Vous trouverez un didacticiel vido relatif l'utilisation du mode Affichage en direct, aux fichiers associs et la fentre Navigation dans le code l'adresse www.adobe.com/go/lrvid4044_dw_fr.
Ouverture de la fentre Navigation dans le code

Tout en maintenant la touche ALT (Windows) ou les touches Commande+Option (Macintosh) enfonces, cliquez n'importe o sur la page. La fentre Navigation dans le code affiche des liens vers le code qui s'applique la zone sur laquelle vous venez de cliquer. Cliquez en dehors de la fentre Navigation dans le code pour la fermer. Remarque : Vous pouvez galement ouvrir la fentre Navigation dans le code en cliquant sur l'icne point d'insertion sur la page si la souris reste inactive pendant 2 secondes. . Cette icne s'affiche proximit du
Navigation vers le code l'aide de la fentre Navigation dans le code

1. Ouvrez la fentre Navigation dans le code partir de la zone qui vous intresse.
450
2. Clique sur l'lment de code auquel vous voulez accder. La fentre Navigation dans le code regroupe les sources de code apparentes par fichier et numre les fichiers dans l'ordre alphabtique. Par exemple, supposons que des rgles CSS de trois fichiers externes influent sur la slection dans votre document. Dans ce cas, la fentre Navigation dans le code prsente la liste de ces trois fichiers, ainsi que des rgles CSS relatives la slection. Pour le code CSS relatif une slection prcise, la fentre Navigation dans le code fonctionne de faon similaire au panneau Styles CSS du mode Actuel. Lorsque vous maintenez le pointeur de la souris au-dessus d'une rgle CSS, la fentre Navigation dans le code affiche, dans une infobulle, les proprits de cette rgle. Ces infobulles peuvent vous aider distinguer des rgles qui partagent un mme nom.
Dsactivation de l'icne Navigation dans le code

1. Ouvrez la fentre Navigation dans le code. 2. Cliquez sur Dsactiver l'indicateur dans le coin infrieur droit de la fentre. 3. Cliquez en dehors de la fentre Navigation dans le code pour la fermer. Pour activer de nouveau l'icne Navigation dans le code, cliquez tout en maintenant la touche ALT (Windows) ou les touches Commande+Option (Macintosh) enfonces, afin d'ouvrir la fentre Navigation dans le code, puis dsactivez l'option Dsactiver l'indicateur.
Accs une fonction JavaScript ou VBScript
Haut de la page
En mode Code et dans l'inspecteur de code, vous pouvez afficher la liste des fonctions JavaScript ou VBScript de votre code et passer ainsi directement l'une de ces dernires. 1. Affichez le document en mode Code (Affichage > Code) ou l'inspecteur de code (Fentre > Inspecteur de code). 2. Effectuez l'une des oprations suivantes : En mode Code, cliquez du bouton droit (Windows) ou tout en appuyant sur Contrle (Macintosh) dans la fentre Code, puis slectionnez le sous-menu Fonctions dans le menu contextuel. Le sous-menu Fonctions ne s'affiche pas en mode Cration. Si votre code contient des fonctions JavaScript ou VBScript, elles apparaissent dans le sous-menu. Pour afficher ces fonctions dans l'ordre alphabtique, cliquez avec le bouton droit de la souris tout en appuyant sur la touche Ctrl (Windows) ou en maintenant les touches Ctrl et Option enfonces (Macintosh) en mode Code, puis slectionnez le sous-menu Fonctions. Dans l'Inspecteur de code, cliquez sur le bouton de navigation dans le code ({ }) de la barre d'outils. 3. Slectionnez un nom de fonction pour atteindre cette dernire.
Extraction de JavaScript
Haut de la page
JavaScript Extractor (JSE) supprime tout le code JavaScript (ou la plupart de celui-ci) de votre document Dreamweaver, l'exporte dans un fichier externe et lie ce fichier votre document. JSE peut galement supprimer des gestionnaires d'vnements tels que onclick et onmouseover de votre code puis joindre votre document, de manire transparente, le code JavaScript associ ces gestionnaires. Avant d'employer JavaScript Extractor, nous attirons votre attention sur les limitations suivantes : JSE n'extrait pas les balises de script du corps du document (sauf dans le cas de widgets Spry). Il se pourrait que l'externalisation de ces scripts donne des rsultats inattendus. Par dfaut, Dreamweaver affiche la liste de ces scripts dans la bote de dialogue Externaliser le code JavaScript, mais ne les slectionne pas pour extraction. Si vous le souhaitez, vous pouvez les slectionner manuellement. JSE n'extrait pas le code JavaScript des rgions modifiables de fichiers .dwt (modle Dreamweaver), de rgions non modifiables d'instances de modles ou d'lments de bibliothque Dreamweaver. Lorsque vous avez extrait le code JavaScript l'aide de l'option Externaliser le code JavaScript et associer de manire transparente, vous ne pouvez plus modifier les comportements Dreamweaver dans le panneau Comportements. Dreamweaver ne peut pas inspecter et complter le panneau Comportements l'aide de comportements qu'il a associs de manire transparente. Il est impossible d'annuler vos modifications aprs avoir ferm la page. Vous pouvez par contre annuler les modifications tant que vous restez dans la mme session d'dition. Pour annuler, choisissez Edition > Annuler Externaliser le code JavaScript. Il se peut que certaines pages trs complexes ne fonctionnent pas comme prvu. Faites preuve de prudence lors de l'extraction de code JavaScript de pages dont le corps et les variables globales contiennent document.write(). Vous trouverez un didacticiel vido sur la prise en charge de JavaScript dans Dreamweaver, ralis par l'quipe de Dreamweaver, l'adresse www.adobe.com/go/dw10javascript_fr. Pour utiliser JavaScript Extractor : 1. Ouvrez une page qui contient du code JavaScript (par exemple une page Spry).
451
2. Choisissez Commandes > Externaliser le code JavaScript. 3. Dans la bote de dialogue Externaliser le code JavaScript, modifiez ventuellement les options par dfaut. Choisissez Externaliser le code JavaScript uniquement si vous voulez que Dreamweaver dplace le code JavaScript dans un fichier externe et qu'il y fasse rfrence dans le document actuel. Cette option laisse les gestionnaires d'vnements tels que onclick et onload dans le document et conserve les comportements visibles dans le panneau Comportements. Choisissez Externaliser le code JavaScript et associer de manire transparente si vous voulez que Dreamweaver 1) dplace le code JavaScript vers un fichier externe et y fasse rfrence dans le document actuel, et 2) supprime les gestionnaires d'vnements du code HTML et les insre en cours d'excution l'aide de JavaScript. Lorsque vous slectionnez cette option, vous ne pouvez plus modifier les comportements dans le panneau Comportements. Dans la colonne Modifier, dsactivez les modifications que vous ne voulez pas apporter, ou activez celles que Dreamweaver n'a pas slectionnes par dfaut. Par dfaut, Dreamweaver prsente mais ne slectionne pas les modifications suivantes : Les blocs de script dans l'en-tte du document qui contiennent des appels document.write() ou document.writeln(). Les blocs de script dans l'en-tte du document qui contiennent des signatures de fonction associes au code de gestion EOLAS, qui utilise document.write(). Les blocs de script dans le corps du document, sauf s'ils contiennent uniquement un widget Spry ou des constructeurs d'ensembles de donnes Spry. Dreamweaver attribue automatiquement des ID aux lments qui n'en possdent pas encore. Si ces ID ne vous conviennent pas, vous pouvez les modifier dans les zones de texte ID. 4. Cliquez sur OK. La bote de dialogue de synthse rcapitule les extractions. Passez ces extractions en revue puis cliquez sur OK. 5. Enregistrez la page. Dreamweaver cre un fichier SpryDOMUtils.js, ainsi qu'un autre fichier contenant le code JavaScript extrait. Dreamweaver enregistre le fichier SpryDOMUtils.js dans un dossier SpryAssets de votre site. L'autre fichier est enregistr au mme niveau que la page partir de laquelle vous avez extrait le code JavaScript. N'oubliez pas de charger ces deux fichiers dpendants sur votre serveur Web lorsque vous enverrez la page d'origine.
Manipulation de fragments de code
Haut de la page
Les fragments de code permettent de stocker des contenus en vue de pouvoir les rutiliser rapidement. Vous pouvez crer, insrer, modifier ou supprimer des fragments de code HTML, JavaScript, CFML, ASP, PHP, etc. Vous pouvez galement grer et partager vos fragments de code avec les autres membres de l'quipe. Vous disposez de quelques fragments prdfinis que vous pouvez employer comme point de dpart. Les fragments de code contenant des balises <font> et d'autres lments et attributs dconseills ont t dplacs dans le dossier Anciennes versions du panneau Fragments de code.
Insertion d'un fragment de code

1. Placez le point d'insertion l'endroit o vous souhaitez insrer le fragment de code ou slectionnez le code combiner avec le fragment choisi. 2. Dans le panneau Fragments de code (Fentre > Fragments de code), double-cliquez sur le fragment de code. Vous pouvez galement cliquer avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur le fragment de code, puis slectionner Insrer dans le menu contextuel.
Cration d'un fragment de code

1. Cliquez sur l'icne Nouveau fragment de code situ au bas du panneau Fragments de code 2. Donnez un nom au fragment de code. Remarque : Les noms de fragments de code ne peuvent pas comporter les caractres qui sont interdits dans les noms de fichiers (barres obliques (/ ou \), caractres spciaux ou guillemets doubles ()). 3. (Facultatif) Entrez la description du fragment de code sous forme de texte. qui permettra aux autres membres de l'quipe de l'utiliser plus facilement. 4. Pour l'option Type de fragment de code, slectionnez Envelopper la slection ou Insrer le bloc. a. Si vous avez opt pour l'enveloppement de la slection, ajoutez du code aux options suivantes : Insrer avant Tapez ou collez le code insrer avant la slection en cours. Insrer aprs Tapez ou collez le code insrer aprs la slection en cours. Pour dfinir un espacement par dfaut entre les blocs, utilisez des sauts de ligne ; appuyez sur Entre (Windows) ou Retour (Macintosh) l'intrieur des zones de texte.
452
Remarque : Dans la mesure o les fragments de code peuvent tre crs en dbut ou en fin de bloc, vous pouvez les utiliser pour encadrer d'autres balises et contenus. Ce procd est pratique pour insrer un formatage, des liens, des lments de navigation et des blocs de script spciaux. Il vous suffit de mettre en surbrillance l'lment entourer puis d'insrer le fragment de code. b. Si vous avez opt pour l'insertion du bloc, tapez ou collez le code insrer. 5. (Facultatif) Slectionnez le type d'aperu : Code ou Cration. Cration Restitue le code et l'affiche dans le volet d'aperu du panneau Fragment de code. Code Affiche le code dans le volet d'aperu. 6. Cliquez sur OK.
Modification ou suppression d'un fragment de code

Dans le panneau Fragments de code, slectionnez un fragment de code, puis cliquez sur le bouton Modifier le fragment de code ou sur le bouton Supprimer, dans le bas du panneau.
Cration de dossiers de fragments de code et gestion de fragments

1. Cliquez sur le bouton Nouveau dossier de fragments de code situ au bas du panneau Fragments de code. 2. Faites glisser des fragments de code vers le nouveau dossier ou d'autres dossiers, votre convenance.
Ajout ou modification d'un raccourci clavier pour un fragment de code

1. Dans le panneau Fragments de code, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) et slectionnez Modifier les raccourcis clavier. L'diteur de raccourcis clavier s'ouvre. 2. Dans le menu contextuel Commandes, choisissez Fragments de code. Une liste de fragments de code s'affiche. 3. Slectionnez celui qui vous intresse et affectez-lui le raccourci clavier de votre choix. Pour plus d'informations, consultez la section Personnalisation des raccourcis clavier.
Partage d'un fragment de code avec d'autres membres de l'quipe

1. Recherchez le fichier correspondant au fragment de code partager dans le sous-dossier Configuration/Snippets du dossier de l'application Dreamweaver. 2. Copiez le fichier du fragment de code dans un dossier partag sur votre ordinateur ou sur un ordinateur en rseau. 3. Veillez ce que les autres membres de l'quipe copient le fichier du fragment de code dans leurs dossiers Configuration/Snippets respectifs.
Recherche de balises, d'attributs ou de chanes de texte dans le code
Haut de la page
Vous pouvez rechercher certains types de balises, des attributs et des valeurs d'attribut. Par exemple, vous pouvez rechercher toutes les balises img n'ayant pas l'attribut alt. Vous pouvez galement rechercher des chanes de texte spcifiques se trouvant l'intrieur ou l'extrieur d'un jeu de balises. Par exemple, vous pouvez rechercher le mot Untitled document entre les balises title pour trouver toutes les pages sans nom du site. 1. Ouvrez le document dans lequel la recherche doit tre effectue ou slectionnez des documents ou un dossier dans le panneau Fichiers. 2. Slectionnez la commande Edition > Rechercher et remplacer. 3. Indiquez les fichiers sur lesquels doit porter la recherche, puis indiquez le type de recherche effectuer et enfin le texte ou les balises rechercher. Le cas chant, spcifiez galement le texte de remplacement. Cliquez ensuite sur un des boutons Rechercher ou Remplacer. 4. Cliquez sur le bouton Fermer. 5. Pour effectuer une nouvelle recherche sans afficher la bote de dialogue Rechercher et remplacer, appuyez sur F3 (Windows) ou Commande+G (Macintosh).
Enregistrement et chargement de modles de recherche

Vous pouvez sauvegarder vos modles de recherche pour les rutiliser ultrieurement.
Haut de la page
Enregistrement d'un modle de recherche

1. Dans la bote de dialogue Rechercher et remplacer (Edition > Rechercher et remplacer), dfinissez les paramtres de la recherche. 2. Cliquez sur le bouton Enregistrer la requte (reprsentant une disquette). 3. Dans la bote de dialogue qui s'affiche, recherchez le dossier o vous voulez enregistrer les requtes. Saisissez un nom pour identifier le fichier correspondant la requte, puis cliquez sur Enregistrer.
453
Par exemple, si le modle de recherche inclut la recherche de balises img sans l'attribut alt, vous pouvez nommer la requte img_sans_alt.dwr. Remarque : L'extension des fichiers correspondant aux requtes enregistres est .dwr. Certains fichiers de requte enregistrs partir de versions antrieures de Dreamweaver peuvent galement avoir l'extension .dwq.
Chargement d'un modle de recherche

1. Slectionnez la commande Edition > Rechercher et remplacer. 2. Cliquez sur l'icne Charger la requte (reprsentant un dossier). 3. Recherchez le dossier contenant les requtes enregistres. Slectionnez ensuite un fichier de requte, puis cliquez sur Ouvrir. 4. Cliquez sur Rechercher le suivant, Rechercher tout, Remplacer ou Remplacer tout pour lancer la recherche.
Utilisation des documents de rfrence sur les langages
Haut de la page
Le panneau Rfrence est un outil de rfrence rapide pour les langages de balisage, les langages de programmation et les styles CSS. Il comporte des informations sur les diffrentes balises, les objets et les styles que vous manipulez en mode Code (ou Inspecteur de code). Il comporte galement des exemples de code que vous pouvez coller dans vos documents.
Ouverture du panneau Rfrence

1. Excutez l'une des actions suivantes en mode Code : Cliquez sur une balise, un attribut ou un mot-cl avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis slectionnez Rfrence dans le menu contextuel. Placez le point d'insertion dans une balise, un attribut ou un mot-cl, puis appuyez sur Maj+F1. Le panneau Rfrence apparat et affiche des informations sur la balise, l'attribut ou le mot-cl sur lequel vous avez cliqu.
2. Pour ajuster la taille du texte dans le panneau Rfrence, slectionnez Grande police, Police moyenne ou Petite police dans le menu Options (la petite flche en haut droite du panneau).
Collage d'un exemple de code dans votre document

1. Cliquez n'importe o sur l'exemple de code de contenu de rfrence. L'exemple de code entier est mis en surbrillance. 2. Slectionnez Edition > Copier, puis collez l'exemple de code dans votre document en mode Code.
Consultation du contenu de rfrence dans le panneau Rfrence

1. Pour afficher les balises, les objets ou les styles d'un autre ouvrage, choisissez-en un autre dans le menu droulant Livre. 2. Pour afficher des informations sur un lment spcifique, slectionnez-le dans le menu droulant Balise, Objet, Style ou CFML (selon le manuel slectionn). 3. Pour consulter les informations se rapportant un attribut de l'lment slectionn, slectionnez cet attribut dans le menu droulant affich prs du menu Balise, Objet, Style ou CFML. Ce menu contient la liste des attributs associs l'lment slectionn. L'lment Description est slectionn par dfaut. Il contient une description de l'lment choisi.
Impression de code
Vous pouvez imprimer le code que vous avez rdig pour le consulter, l'archiver ou le distribuer. 1. Ouvrez une page en mode Code. 2. Slectionnez Fichier > Imprimer le code. 3. Spcifiez les options d'impression, puis cliquez sur OK (Windows) ou sur Imprimer (Macintosh). Voir aussi DOM (Document Object Model) W3C Didacticiel sur les conseils de code
454
Haut de la page
Prsentation de la barre d'outils de codage Ouverture des fichiers associs Didacticiel sur la navigation dans le code
455
Mobile et crans multiples

Cration de pages mobiles l'aide de Dreamweaver CS5.5 David Karlins (3 aot 2011) didacticiel David Karlins, auteur de Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques , vous guide dans les techniques de Dreamweaver afin de crer des pages Web compatibles avec les priphriques mobiles, base sur jQuery JavaScript.
456
Assemblage d'applications Web sous forme d'applications mobiles natives avec PhoneGap Build
A propos PhoneGap Build et Dreamweaver Cration d'un compte dans le service PhoneGap Build Configuration de l'environnement de dveloppement Assemblage d'applications mobiles avec PhoneGap Build
A propos de PhoneGap Build et Dreamweaver
En haut
PhoneGap Build est un service dmatrialis qui permet d'assembler vos applications Web sous la forme d'applications mobiles natives. L'intgration avec Dreamweaver vous permet de crer et d'enregistrer vos applis dans un site Dreamweaver, puis de les envoyer au service PhoneGap Build dmatrialis afin qu'elles soient assembles. PhoneGap Build prend en charge l'assemblage d'applications natives pour les systmes d'exploitation de priphriques mobiles suivants : iOS Android BlackBerry webOS Symbian Windows 8 Pour plus d'informations sur le service PhoneGap Build, consultez le site Web de PhoneGap. Pour obtenir de l'aide sur l'utilisation du service PhoneGap Build, consultez la documentation de PhoneGap Build.
Cration d'un compte dans le service PhoneGap Build
En haut
Vous ne pouvez pas utiliser PhoneGap Build et Dreamweaver sans compte dans le service PhoneGap Build. De tels comptes sont gratuits et se configurent aisment. Pour crer un compte, accdez au site Web de PhoneGap Build. Vous devrez valider le compte l'aide d'un courrier de confirmation avant que le compte soit rendu actif.
Configuration de l'environnement de dveloppement
En haut
Selon les types d'applications que vous souhaitez assembler et les priphriques sur lesquels vous souhaitez effectuer des tests, diverses tches de configuration doivent tre ralises avant l'assemblage de votre application. Il peut tre utile de configurer certaines des options suivantes, toutes ou aucune d'elles : SDK Android Si vous souhaitez tester des applications Android sur votre ordinateur local l'aide d'un mulateur Android, vous devez tlcharger et installer le SDK Android. Pour plus d'informations, consultez la documentation d'Android. Lorsque vous avez install le SDK Android, vous devez dmarrer le SDK Android et AVD Managers, puis slectionner les outils d'Android que vous utiliser en local sur votre ordinateur. Dreamweaver utilise les informations que vous slectionnez lors de cette configuration initiale pour complter les paramtres l'mulateur Android dans le panneau Service PhoneGap Build. Pour plus d'informations sur ces paramtres, reportezvous la documentation d'Android. IMPORTANT : Si vous souhaitez utiliser un mulateur Android pour tester votre application sur un ordinateur local, assurez-vous que l'mulateur fonctionne de la faon dsire indpendamment de Dreamweaver avant d'effectuer le test. SDK/PDK webOS Si vous souhaitez tester des applications webOS sur votre ordinateur local l'aide d'un mulateur webOS, vous devez tlcharger et installer le SDK/PDK webOS. Pour plus d'informations, consultez la documentation de webOS. Lecteurs de codes QR (Quick Response) Si vous souhaitez transfrer aisment votre appli assemble sur votre appareil, vous avez besoin d'un lecteur de codes QR. (Lorsque vous assemblez une application l'aide de Dreamweaver, vous recevez un code QR pour cette appli, qui s'affichera dans le panneau PhoneGap Build lorsque l'appli aura t assemble.) Divers lecteurs de codes sont disponibles gratuitement sur diffrents marchs en ligne. Pour plus d'informations, recherchez lecteur de code QR dans Google.
Assemblage d'applications mobiles avec PhoneGap Build

457
En haut
1. Assurez-vous que vous avez cr un site Dreamweaver comportant une page index.html (gnralement la page de dmarrage de votre application). Remarque : PhoneGap Build ne prend en charge que les fichiers HTML, CSS et JavaScript. Votre site ne peut pas contenir de pages serveur (pages PHP, CFM ou autres types de pages bases sur un serveur) . 2. Choisissez Site > Service PhoneGap Build > Service PhoneGap Build. 3. Saisissez vos informations de connexion et connectez-vous PhoneGap Build. Si vous n'avez pas cr de compte PhoneGap Build, consultez la section Cration d'un compte dans le service PhoneGap Build. 4. Laissez l'option Crer comme nouveau projet active, puis cliquez sur Continuer. 5. (Mise jour 12.0.3 de Dreamweaver) Pour les systmes d'exploitation que vous ciblez, saisissez la cl et le mot de passe requis. Les informations de cl de signature sont requises uniquement pour Android, iOS et BlackBerry. Si vous ne parvenez pas crer plus d'une application, il est possible que vous ne soyez pas abonn au service PhoneGap. Remarque : Si vous saisissez des informations incorrectes, la cration choue et un message d'erreur indiquant que vous avez saisi une cl ou un mot de passe incorrect s'affiche. Si vous ne saisissez aucune information, la cration sous iOS choue et une erreur de type Cl de signature requise est renvoye. Les applications Android et BlackBerry sont cres l'aide des certificats de dbogage.
6. Notez que Dreamweaver ajoute un fichier ProjectSettings la racine de votre site. (Il peut tre ncessaire d'actualiser le panneau Fichiers pour le voir.) Ce fichier est trs important, car le service PhoneGap Build l'utilise pour assurer le suivi votre application. Dreamweaver ajoute galement un fichier config.xml la racine du site. Double-cliquez sur ce fichier XML simple pour l'ouvrir.
Personnalisez l'identit de votre application en modifiant le contenu de ce fichier. Si vous ne le faites pas, toutes vos applications possderont le mme nom par dfaut. Pour plus d'informations sur l'utilisation du fichier config.xml, consultez la documentation de PhoneGap Build. 7. Enregistrez le fichier config.xml modifi, fermez-le et cliquez sur Rgnrer dans le panneau Service PhoneGap. Lorsque PhoneGap termine d'assembler votre application pour chaque plate-forme, vous verrez des messages indiquant que la compilation est termine.
458
Une fois toutes vos versions termines, plusieurs options s'offrent vous. Vous pouvez tlcharger les fichiers d'application sur votre ordinateur, numriser le code QR d'une version afin de transfrer l'application sur votre appareil, ou muler l'application l'aide d'un mulateur (Android et webOS uniquement).
Tlchargement des fichiers de l'application

Pour tlcharger une application depuis PhoneGap Build, cliquez sur le bouton Tlcharger l'application (flche vers le bas) dans le panneau Service PhoneGap Build. Remarque : le tlchargement n'est pas disponible pour les applications iOS sans cl de signature. Pour plus d'informations, consultez la documentation de PhoneGap Build. Les fichiers d'application tlchargs portent les noms suivants : iOS - app.ipa Android - app.apk BlackBerry - app.jad webOS - app.ipk Symbian- app.wgz
Numrisation d'un code QR afin de transfrer une application vers un priphrique

Pour procder, un lecteur de codes QR doit tre install sur votre appareil. Pour plus d'informations, consultez la section Configuration de l'environnement de dveloppement. Remarque : les codes QR ne sont pas disponibles pour les applications iOS sans cl de signature. Pour plus d'informations, consultez la documentation de PhoneGap Build. 1. Dans le panneau Service PhoneGap Build, cliquez sur le code QR corresopndant l'application que vous voulez tlcharger. 2. Dmarrez le lecteur de code QR sur votre priphrique mobile et numrisez le code QR. 3. Lorsque le tlchargement de l'application est termin, vous pouvez la dmarrer directement sur votre appareil. 4. Revenez la liste en cliquant sur le bouton Retour au panneau Build. Remarque : les codes QR ne sont pas disponibles pour les applications iOS sans cl de signature.
Emulation d'une application (Android et webOS uniquement)

IMPORTANT : Vous devez installer le SDK Android et/ou le SDK/PDK webOS avant de continuer. Vous devez galement prciser les ventulles informations SDK/AVD qui doivent tre accessibles localement partir des applications de SDK. Pour plus d'informations, consultez la section Configuration de l'environnement de dveloppement. 1. Ouvrez le panneau Paramtres de PhoneGap Build en choisissant Site > Service PhoneGap Build > Paramtres de PhoneGap Build. 2. Dfinissez les emplacements des SDK Android et/ou webOS puis cliquez sur Enregistrer. Ces emplacements indiquent Dreamweaver o trouver les informations dont il a besoin pour envoyer l'application aux mulateurs. 3. Dans le panneau Service PhoneGap Build (Site > Service PhoneGap Build > Service PhoneGap Build), cliquez sur le bouton Emuler (tourn vers le ct) pour l'application que vous souhaitez muler. 4. Si vous avez dj dfini vos informations SDK/AVD depuis les applications SDK, une fentre contenant dj des donnes doit s'afficher. 5. Choisissez le SDK/AVD utiliser pour l'mulation puis cliquez sur Lancer.
459
Remarque : il est bien connu que les mulateurs peut tre trs lents. Un certain temps peut s'couler avant que votre mulateur dmarre et charge l'application.
460
Cration d'applications Web pour appareils mobiles (CS5.5, CS6)

A propos de la cration d'une application Web l'aide de jQuery Mobile Utilisation de pages d'accueil pour crer une application pour appareils mobiles Cration d' une application Web pour appareils mobiles partir d'une nouvelle page L'intgration de Dreamweaver avec jQuery Mobile permet de concevoir rapidement une application Web qui fonctionne sur la plupart des appareils mobiles tout en s'adaptant aux dimensions de l'appareil.
A propos de la cration d'une application Web l'aide de jQuery Mobile

Ouverture d'une page de dmarrage de jQuery Mobile ou cration d'une page HTML5
En haut
Utilisez les pages de dmarrage de jQuery Mobile de Dreamweaver pour crer votre application. Alternativement, vous pouvez commencer crer votre application Web avec une nouvelle page HTML5. Les pages de dmarrage de jQuery Mobile comprennent les fichiers HTML, CSS, JavaScript et d'image qui vous aideront entamer la conception de votre application. Vous pouvez utiliser les fichiers CSS et JavaScript hbergs sur un CDN, sur votre serveur, ou des fichiers installs avec Dreamweaver. Remarque : Pour identifier l'emplacement des fichiers lis, consultez les balises <link> et <script src> dans en mode Code. Insertion de composants jQuery Mobile partir du panneau Insertion Insrez des composants jQuery Mobile partir du panneau Insertion dans la page HTML. Les fichiers CSS et JavaScript de jQuery Mobile dfinissent le style et le comportement des composants.
A propos des fichiers jQuery Mobile CDN et locaux

CDN Un CDN (rseau de diffusion de contenu) est un rseau informatique contenant des copies de donnes places diffrents endroits du rseau. Lors de la cration d'une application Web en utilisant l'URL d'un CDN, les fichiers CSS et JavaScript spcifis dans l'URL sont utiliss pour l'application. Par dfaut, Dreamweaver utilise le CDN jQuery Mobile. Vous pouvez galement utiliser les URL de CDN d'autres sites tels que Microsoft et Google. En mode Code, modifiez l'emplacement de serveur des fichiers CSS et JavaScript spcifis dans les balises <link> et <script src>. Les fichiers tlchargs partir d'un CDN sont en lecture seule. Fichiers jQuery Mobile locaux Lorsque vous installez Dreamweaver, les fichiers jQuery Mobile sont copis sur votre ordinateur. La page HTML qui s'ouvre lorsque vous choisissez la page de dmarrage jQuery Mobile (local) est lie aux fichiers CSS, JavaScript et d'image locaux.
Pages de dmarrage pour jQuery Mobile

Dreamweaver fournit les pages de dmarrage suivantes pour crer votre application Web : jQuery Mobile (CDN) (CS5.5 et versions ultrieures) Utilisez cette page de dmarrage si vous envisagez d'hberger la bibliothque jQuery Mobile sur un CDN. jQuery Mobile (Local) (CS5.5 et versions ultrieures) Utilisez cette page de dmarrage si vous envisagez d'hberger les actifs vous-mme, ou si l'application ne repose pas sur une connexion Internet. jQuery Mobile (PhoneGap) (CS5.5 et versions ultrieures) Utilisez cette page de dmarrage si votre application Web, une fois dploye comme application mobile, accde des fonctionnalits natives sur les appareils mobiles. Pour plus d'informations, voir Assemblage d'applications Web sous forme d'applications mobiles natives (CS5.5).
Utilisation des pages de dmarrage pour crer une application pour appareils mobiles
1. Choisissez Fichier > Nouveau.
En haut
461
2. Slectionnez l'une des options suivantes en fonction de vos besoins : Exemple de page > Dmarrage mobile > jQuery Mobile (CDN). Exemple de page > Dmarrage mobile > jQuery Mobile (local). Exemple de page > Dmarrage mobile > jQuery Mobile avec thme (local). 3. Cliquez sur Crer. Dans la page qui s'affiche, activez l'option Suivre les liens de manire continue (Affichage > Options d'affichage en direct), puis passez l'affichage en direct. Utilisez les composants de navigation pour tester le fonctionnement de l'application. Utilisez les options du menu Aperu sur crans multiples pour voir comment la conception s'affiche sur des appareils de dimensions diverses. Dsactivez l'affichage en direct et revenez en mode Cration. 4. Dans le panneau Insertion (Fentre > Insrer), slectionnez jQuery Mobile. Les composants que vous pouvez ajouter l'application Web s'affichent. 5. En mode Cration, placez le curseur l'endroit o vous voulez insrer le composant, puis cliquez sur le composant dans le panneau Insertion. Dans la bote de dialogue qui s'affiche, personnalisez les composants l'aide des options. 6. (jQuery Mobile (local), jQuery Mobile avec thme (local)) Aprs l'enregistrement du fichier HTML, les fichiers jQuery Mobile, y compris les fichiers d'image, sont copis vers un dossier l'emplacement du fichier HTML. Affichez un aperu de la page en mode En direct. Certaines des classes CSS ne sont appliques qu'en mode En direct.
Cration d'une application Web pour appareils mobiles partir d'une nouvelle page
En haut
Le composant Page fait office de conteneur pour tous les autres composants jQuery Mobile. Ajoutez le composant Page avant de passer l'insertion d'autres composants. 1. Choisissez Fichier > Nouveau. 2. Choisissez Page vierge > HTML. Certains composants jQuery Mobile utilisent des attributs spcifiques HTML5. Afin de garantir la conformit la norme HTML5 au cours de la validation, vrifiez que vous avez slectionn HTML5 comme DocType. 3. Dans le panneau Insertion (Fentre > Insrer), slectionnez jQuery Mobile dans le menu. Les composants jQuery Mobile s'affichent dans le panneau. 4. Dans le panneau Insertion, faites glisser le composant Page dans le mode Cration. 5. Dans la bote de dialogue Fichiers jQuery Mobile, slectionnez l'une des options suivantes : Distant (CDN) Si vous souhaitez vous connecter un serveur CDN distant qui hberge les fichiers jQuery Mobile. Utilisez l'option par dfaut pour le site jQuery si vous n'avez pas configur de site contenant les fichiers jQuery Mobile. Vous pouvez galement choisir d'utiliser d'autres serveurs CDN. Local Les fichiers qui sont disponibles dans Dreamweaver s'affichent. Pour spcifier un autre dossier, cliquez sur Parcourir et accdez au dossier contenant les fichiers jQuery Mobile. Les fichiers CSS et JavaScript sont copis dans un rpertoire temporaire local jusqu' ce que vous enregistriez le fichier HTML sur votre ordinateur. Aprs avoir enregistr le fichier HTML, tous les fichiers jQuery Mobile et d'image lis sont copis vers un dossier dans le dossier racine du site. 6. Entrez les proprits du composant Page. 7. En mode Cration, placez le curseur l'endroit o vous voulez insrer le composant, puis cliquez sur le composant dans le panneau Insertion. Dans la bote de dialogue qui s'affiche, personnalisez les composants l'aide des options. Affichez un aperu de la page en mode En direct. Certaines des classes CSS ne sont appliques qu'en mode En direct. Utilisation de fichiers et dossiers personnaliss Vous pouvez choisir de crer des fichiers CSS et JS personnaliss pour votre application. Assurez-vous que vos fichiers sont nomms jquery.mobile.js, jquery.mobile.css et jquery.js Si vous utilisez des dossiers personnaliss, procdez comme suit : 1. Tlchargez la version non compresse de la bibliothque principale jQuery 1.5 depuis l'adresse
462
http://docs.jquery.com/Downloading_jQuery#Download_jQuery. 2. Enregistrez le fichier dans le dossier essentiel contenant les autres ressources.
http://jquerymobile.com/demos/1.0a3/ http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery http://en.wikipedia.org/wiki/Content_delivery_network http://docs.jquery.com/Downloading_jQuery
463
Modification de l'orientation de la page pour les appareils mobiles (CS5.5 et versions ultrieures)
Sur les appareils mobiles les plus perfectionns, l'orientation d'une page change en fonction de la faon dont l'appareil est tenu. Lorsque l'utilisateur tient le tlphone verticalement, l'affichage emploie l'orientation portrait. Lorsque l'utilisateur fait pivoter l'appareil l'horizontale, la page s'adapte automatiquement l'orientation paysage. Dans Dreamweaver, l'option d'affichage une page en orientation Portrait ou Paysage est disponible dans les modes Affichage en direct et Cration. Ces options vous permettent de tester la manire dont votre page s'adapte ces paramtres. Ensuite, vous pouvez, si ncessaire, modifier votre fichier CSS, de sorte que la page s'affiche comme prvu dans ces deux orientations. Slectionnez Affichage > Taille de fentre > Orientation paysage ou Orientation Portrait.
464
Cration de requtes multimdias (CS5.5 et versions ultrieures)

Cration d'une requte multimdia Utilisation d'un fichier de requtes multimdias existant Choix d'un autre fichier de requtes multimdias l'chelle du site Affichage de pages Web sur la base d'une requte multimdia Vous pouvez utiliser des requtes multimdias pour spcifier des fichiers CSS sur la base des caractristiques signales au sujet d'un appareil. Le navigateur d'un appareil vrifie la requte multimdia puis utilise le fichier CSS correspondant pour afficher la page Web. Par exemple, la requte multimdia suivante spcifie le fichier phone.css pour les appareils faisant de 300 320 pixels de large. <link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (maxwidth: 320px)"> Vous trouverez une prsentation dtaille des requtes multimdias dans l'article de Don Booth sur le Ple de dveloppement Dreamweaver, l'adresse www.adobe.com/go/learn_dw_medquery_don_fr. Pour plus d'informations sur les requtes multimdias sur le site du W3C, consultez la page www.w3.org/TR/css3-mediaqueries/.
Cration d'une requte multimdia
Haut de la page
Dans Dreamweaver, vous pouvez crer un fichier de requte multimdia l'chelle du site ou une requte multimdia spcifique au document. Fichier de requte multimdia l'chelle du site Spcifie les paramtres d'affichage de toutes les pages de votre site qui comprennent ce fichier. Le fichier de requte multimdia l'chelle du site fait office de dpt central pour toutes les requtes multimdias dans votre site. Aprs avoir cr ce fichier, crez un lien vers celui-ci partir des pages de votre site qui doivent utiliser les requtes multimdias du fichier pour leur affichage. Requte multimdia spcifique au document La requte multimdia est insre directement dans le document et la page s'affiche en fonction de la requte multimdia insre. 1. Crez une page Web. 2. Choisissez Modifier > Requtes multimdias. 3. Effectuez l'une des oprations suivantes : Pour crer un fichier de requte multimdia l'chelle du site, choisissez Fichier de requte multimdia l'chelle du site. Pour crer une requte multimdia propre au document, slectionnez Ce document. 4. Pour une requte multimdia l'chelle du site, procdez comme suit : a. Cliquez sur Spcifier. b. Slectionnez Crer un nouveau fichier. c. Indiquez le nom du fichier et cliquez sur OK. 5. Il se peut que certains appareils ne communiquent pas leurs largeur relle. Pour forcer les appareils communiquer leur largeur relle, assurez-vous que l'option Forcer les appareils communiquer leur largeur relle est active. Le code suivant est insr dans votre fichier lorsque vous slectionnez cette option. <meta name="viewport" content="width=device-width"> 6. Effectuez l'une des oprations suivantes : Cliquez sur + pour dfinir les proprits du fichier de requte multimdia. Cliquez sur Paramtres prdfinis par dfaut si vous souhaitez commencer avec des paramtres prdfinis. 7. Slectionnez les lignes du tableau et modifiez leurs proprits l'aide des options de la section Proprits. Description La description de l'appareil pour lequel le fichier CSS doit tre utilis. Par exemple, tlphone, tlviseur, tablette, etc. Largeur min et Largeur max Le fichier CSS est utilis pour les appareils dont la largeur communique figure dans la plage de valeurs spcifies. Remarque : Laissez la valeur Largeur min ou Largeur max vide si vous ne souhaitez pas spcifier une plage explicite pour un appareil. Par
465
exemple, il est courant de laisser Largeur min vide si vous travaillez pour des tlphones, qui font 320px de large ou moins. Fichier CSS Slectionnez l'option Utiliser fichier existant et localisez le fichier CSS pour l'appareil. Si vous souhaitez spcifier un fichier CSS que vous devez encore crer, slectionnez Crer un nouveau fichier. Entrez le nom du fichier CSS. Le fichier est cr lorsque vous cliquez sur le bouton OK. 8. Cliquez sur OK. 9. Pour une requte multimdia l'chelle du site, un nouveau fichier est cr. Enregistrez-le. Requte multimdia l'chelle du site : Pour les pages existantes, veillez inclure le fichier de requte multimdia dans la balise <head> de toutes les pages. Exemple de lien de requte multimdia o mediaquery_adobedotcom.css est le fichier de requte multimdia l'chelle du site pour le site www.adobe.com : <link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
Utilisation d'un fichier de requtes multimdias existant

1. Crez une page ou ouvrez une page existante. 2. Choisissez Modifier > Requtes multimdias. 3. Choisissez Fichier de requtes multimdias l'chelle du site. 4. Cliquez sur Spcifier. 5. Choisissez l'option Utiliser fichier existant si vous avez dj cr un fichier CSS avec la requte multimdia. 6. Cliquez sur l'icne Parcourir pour atteindre le fichier et le spcifier. Cliquez sur OK. 7. Choisissez Fichier de requtes multimdias l'chelle du site.
Haut de la page
8. Pour forcer les priphriques communiquer leur largeur relle, assurez-vous que l'option Forcer les priphriques communiquer leur largeur relle est active. Le code suivant est insr dans votre fichier lorsque vous slectionnez cette option. <meta name="viewport" content="width=device-width"> 9. Cliquez sur OK.
Choix d'un autre fichier de requtes multimdias l'chelle du site
Haut de la page
Cette procdure permet de changer fichier de requtes multimdias l'chelle du site que vous avez dfini dans la bote de dialogue Requtes multimdias. 1. Choisissez Site > Grer les sites. 2. Dans la bote de dialogue Grer les sites, slectionnez votre site. 3. Cliquez sur Edition. La bote de dialogue Configuration du site s'affiche. 4. Sous Paramtres avancs dans le panneau de gauche, slectionnez Infos locales. 5. Dans la section Fichier de requtes multimdias l'chelle du site du panneau de droite, cliquez sur Parcourir pour slectionner le fichier CSS de requte multimdia. Remarque : Le changement de fichier de requtes multimdias l'chelle du site n'a aucune incidence sur les documents lis un fichier de requtes multimdias l'chelle du site diffrent ou prcdent. 6. Cliquez sur Enregistrer.
Affichage de pages Web sur la base d'une requte multimdia
Haut de la page
Les dimensions spcifies dans une requte multimdia apparaissent dans les options Taille de bouton/fentre crans multiples. Lorsque vous slectionnez une dimension dans le menu, les changements suivants peuvent tre observs : La taille de l'affichage change pour reflter les dimensions spcifies. La taille du cadre du document n'est pas modifie. Le fichier CSS spcifi dans la requte multimdia est utilis pour afficher la page.
466
Assemblage d'applications Web

Assemblage d'applications Web sous forme d'applications mobiles natives (CS 5.5)
Haut de la page
L'intgration de Dreamweaver jQuery Mobile et PhoneGap permet de crer et d'empaqueter des applications Web en vue d'un dploiement sur des appareils Android et iOS. Dreamweaver utilise les SDK PhoneGap pour crer le fichier de package (.apk fichier pour Android/.xcodeproj pour iPhone/iPad) Lorsque vous avez assembl une application mobile avec Dreamweaver, vous pouvez la visualiser dans un mulateur d'appareil ou la dployer sur votre appareil. Important : L'application mobile que vous assemblez avec Dreamweaver est exclusivement destine des fins de dbogage. L'application s'excute dans les mulateurs Android et iOS, ou sur votre appareil mobile personnel si vous effectuez le transfert, mais vous ne pouvez pas envoyer les applications mobiles de dbogage aux magasins en ligne Apple et Android. Pour pouvoir envoyer des applications iOS ou Android, vous devez en outre les signer en dehors de Dreamweaver. Pour plus d'informations sur l'envoi d'applications aux magasins en ligne Apple et Android, consultez la documentation d'Android ou le guide d'utilisateur du programme sur le portail Apple iOS Provisioning Portal. (Avant de pouvoir accder au portail Apple iOS Provisioning Portal, vous devez vous inscrire aux programmes Apple Developer Program [gratuit] et iOS Developer Program [redevance annuelle] .)
Cration d'une application Web l'aide de la page de dmarrage

Vous pouvez utiliser n'importe quelle page de dmarrage pour crer votre application Web. Toutefois, si votre application Web, dploye en tant qu'application mobile, accde des fonctionnalits natives sur les appareils mobiles, utilisez la page jQuery Mobile (PhoneGap). La page de dmarrage jQuery Mobile (PhoneGap) contient le fichier phonegap.js en plus des autres fichiers jQuery Mobile. Le fichier phonegap.js contient les API requises pour travailler avec les fonctionnalits mobiles natives telles que GPS, acclromtre, appareil photo, etc. 1. Slectionnez Fichier > Nouveau. 2. Choisissez Exemple de page > Dmarrage mobile > jQuery Mobile (PhoneGap). 3. Cliquez sur Crer. 4. Dans le panneau Insertion (Fentre > Insrer), slectionnez jQuery Mobile. Les composants que vous pouvez ajouter l'application Web s'affichent. 5. En mode Cration, placez le curseur l'endroit o vous voulez insrer le composant, puis cliquez sur le composant dans le panneau Insertion. Dans la bote de dialogue qui s'affiche, personnalisez les composants l'aide des options. Remarque : Pour modifier le fichier PhoneGap.js, vous devez configurer le cadre applicatif et les paramtres de l'application. Pour plus d'informations, consultez les rubriques sur la cration de packages d'applications. Affichez un aperu de la page en mode En direct. Certaines des classes CSS ne sont appliques que dans le mode En direct.
Configuration requise pour l'assemblage d'applications

Vous devez veillez r ce que votre configuration systme soit la suivante avant de pouvoir assembler une application. Mac OS - iOS Mac OS X Snow Leopard version 10.6 .x ou ultrieure Xcode 3.2 .x avec le SDK iOS (instructions d'installation ci-dessous) Mac OS - Android Mac OS X 10.5.8 ou version ultrieure (x86 uniquement) SDK Android (instructions d'installation ci-dessous) Windows - iOS iOS est uniquement disponible pour les utilisateurs d'un ordinateur Apple Windows - Android Windows XP (32 bits), Vista (32 bits ou 64 bits), ou Windows 7 (32 bits ou 64 bits)
467
SDK Android (instructions d'installation ci-dessous)
Cration d'un package d'application (Windows)

Pour plus d'informations sur la cration d'une application Web, y compris des exemples de fichiers, consultez ce didacticiel sur le Ple de dveloppement Dreamweaver. 1. Ouvrez l'application Web que vous voulez convertir en application mobile. Assurez-vous que votre application Web est configure en tant que site dans Dreamweaver et que la taille de votre site est infrieure 25 Mo. Remarque : Assurez-vous que l'application contient uniquement des fichiers HTML5, CSS et JavaScript. 2. Choisissez Site > Applications mobiles > Configurer le cadre applicatif. 3. Cliquez sur Easy Install pour installer le SDK Android. Remarque : Si l'installation simplifie choue, consultez la Tech Note 90408. 4. Choisissez l'endroit o vous voulez installer les fichiers du SDK, puis cliquez sur Slectionner. Une fois l'installation termine, cliquez sur Enregistrer. 5. Choisissez Site > Applications mobiles > Paramtres de l'application. 6. Dans la zone Bundle ID, entrez le nom du package l'aide des informations de la bote de dialogue. 7. Donnez un nom l'application et indiquez le nom de la personne qui l'a conue. 8. Spcifiez ventuellement les lments suivants : a. Dans PNG de l'icne de l'application, spcifiez un fichier PNG utiliser comme l'icne de l'application. Dreamweaver redimensionne l'icne la taille standard si vous ne l'avez pas dj fait. b. Dfinissez un chemin cible pour le package. c. Pour tlcharger et installer les plus rcents composants SDK de Google, cliquez sur Grer les AVD. Utilisez le SDK Android et AVD Manager pour mettre jour le SDK Android. Pour plus d'informations sur l'utilisation de gestionnaire, voir http://developer.android.com/sdk/adding-components.html. Remarque : Lorsque vous cliquez sur Enregistrer, le fichier phonegap.js est copi dans la racine du site. 9. Effectuez l'une des oprations suivantes : Si vous tes en train de dployer directement votre application sur un appareil, choisissez Site > Applications mobiles > Crer. Slectionnez une plate-forme/un appareil pour la gnration. Si vous souhaitez voir comment l'application se prsente dans un mulateur avant de la gnrer, choisissez Site > Applications mobiles > Crer et muler.
Cration d'un package d'application (Mac OS)

Pour un didacticiel sur la cration d'une application Web, y compris des exemples de fichiers, consultez cet article du Ple de dveloppement Dreamweaver. 1. Ouvrez l'application Web que vous voulez convertir en application mobile. Assurez-vous que votre application Web est configure en tant que site dans Dreamweaver et que la taille de votre site est infrieure 25 Mo. Remarque : Assurez-vous que l'application contient uniquement des fichiers HTML5, CSS et JavaScript. 2. Choisissez Site > Applications mobiles > Configurer le cadre applicatif. 3. Installez le kit de dveloppement pour iOS ou Android en fonction de vos besoins : Cliquez sur le lien Apple iOS Dev Center pour tlcharger et installez les SDK xcode et iOS. Par dfaut, l'application est install dans le rpertoire OS <numro de version>/developer. Connectez-vous au Dev Center l'aide de votre ID Apple. L'inscription est gratuite. Crez un compte si vous n'tes pas enregistr. Remarque : Vous pouvez utiliser le package SDK tlcharg depuis l'Apple Dev Center des fins de test. Toutefois, pour charger votre application dans l'Apple Store, vous devez vous inscrire en tant que dveloppeur Apple aprs avoir pay la redevance requise. Cliquez sur Easy Install pour installer le SDK Android. Remarque : Si l'installation simplifie choue, consultez la Tech Note 90408. 4. Cliquez sur Enregistrer. 5. Choisissez Site > Applications mobiles > Paramtres de l'application. 6. Dans la zone Bundle ID, entrez le nom du package l'aide des informations de la bote de dialogue. 7. Donnez un nom l'application et indiquez le nom de la personne qui l'a conue. 8. Si vous le souhaitez, procdez comme suit :
468
(Android) Dans PNG de l'icne de l'application, spcifiez un fichier PNG utiliser comme l'icne de l'application. Dreamweaver redimensionne l'icne la taille standard si vous ne l'avez pas dj fait. (Mac OS 10.6.x) Dans PNG de l'cran de dmarrage, spcifiez un fichier PNG utiliser comme icne pour l'application iOS. Dreamweaver redimensionne l'icne la taille standard si vous ne l'avez pas dj fait. (Mac OS 10.6.x) Slectionnez une version de l'iPhone/iPod touch/iPad pour lequel vous crez le package. Dfinissez un chemin cible diffrent pour le package. Remarque : Lorsque vous cliquez sur Enregistrer, le fichier phonegap.js est copi dans la racine du site. 9. Effectuez l'une des oprations suivantes : Si vous tes en train de dployer directement votre application sur un appareil, choisissez Site > Applications mobiles > Crer. Slectionnez une plate-forme/un appareil pour la gnration. Si vous souhaitez voir comment l'application se prsente dans un mulateur avant de la gnrer, choisissez Site > Applications mobiles > Crer et muler.
Adobe recommande
Assemblage d'applications Web sous la forme d'applications mobiles l'aide de Dreamweaver CS5.5
Jon Michael Varese Didacticiel dtaill sur l'assemblage de votre application Web Voir aussi http://www.phonegap.com/about http://jquerymobile.com/demos/1.0a2/ http://docs.phonegap.com/ Didacticiel sur l'assemblage d'applications Web
469
Aperu des pages avec le panneau Aperu sur crans multiples

Modification des tailles de la fentre d'affichage Ajout de requtes multimdias Navigation parmi des liens Dans Dreamweaver, l'aperu sur crans multiples fournit un aperu de la page que vous modifiez comme elle s'affichera sur les priphriques prenant en charge diffrentes rsolutions d'cran. Pour ouvrir le panneau Aperu sur crans multiples, choisissez Fichier > Aperu sur crans multiples. L'aperu sur crans multiples pren en charge les types d'crans suivants : Tlphone (taille par dfaut de l'cran : 320x300 pixels) Tablette (taille par dfaut de l'cran : 768x300 pixels) Ordinateur de bureau (largeur d'cran par dfaut : 1126 pixels) Remarque : Si vous connaissez les dimensions de tout autre priphrique que vous souhaitez cibler, vous pouvez dfinir diffrents styles pour divers priphriques. Vous pouvez par exemple crer une taille d'cran de 480x272 pixels pour une PSP de Sony. Les dimensions du tlphone, de la tablette et de l'ordinateur de bureau utilises pour la prvisualisation sont dfinies sur les tailles par dfaut. Toutefois, vous pouvez modifier les tailles par dfaut en cliquant sur le bouton Tailles de la fentre d'affichage, dans le panneau Aperu sur crans multiples. Remarque : N'utilisez pas le panneau Aperu sur crans multiples comme un navigateur. Il n'est pas destin afficher des mdias dynamiques comme des films et des lments audio.
Modification des tailles de la fentre d'affichage

1. Choisissez Fichier > Aperu sur crans multiples pour ouvrir le panneau Aperu sur crans multiples. 2. Dans le panneau Ecrans multiples, cliquez sur Tailles de la fentre d'affichage.
Haut de la page
3. Dfinissez les tailles de la fentre d'affichage et cliquez sur OK. Dfinissez par exemple une largeur de 480 et une hauteur de 272 pour une PSP Sony. 4. (Optionnel) Rtablissez les paramtres par dfaut en cliquant sur Valeurs par dfaut.
Ajout de requtes multimdias

Voir Cration de requtes multimdias (CS5.5 et versions ultrieures)
Haut de la page
Navigation parmi des liens
Haut de la page
Le panneau Aperu sur crans multiples ne se synchronise pas automatiquement avec les modes Cration et En direct. Si vous effectuez des modifications dans l'un de ces modes, cliquez sur le bouton Actualiser dans le panneau Aperu sur crans multiples. Remarque : Si vous naviguez en dehors du fichier d'origine en mode En direct, le panneau Aperu sur crans multiples n'affiche pas le fichier vers lequel vous avez navigu, mme si vous cliquez sur le bouton Actualiser.
Navigation parmi les pages dans le panneau Aperu sur crans multiples. Naviguez dans le panneau Aperu sur crans multiples afin de quitter le fichier d'origine. Dreamweaver met les trois volets jour lorsque vous naviguez dans le panneau Aperu sur crans multiples. Si vous permutez entre diffrents onglets de niveau suprieur dans Dreamweaver, cliquez sur le bouton Actualiser, dans le panneau Aperu sur crans multiples, afin d'afficher le fichier slectionn.
470
Prvisualisation
471
Vrification de problmes de restitution CSS entre les navigateurs

Excution d'une vrification de compatibilit avec les navigateurs Slection de l'lment affect par un problme dtect Accs au problme suivant/prcdent dtect dans le code Slection des navigateurs faire vrifier par Dreamweaver Exclusion d'un problme de la vrification de compatibilit avec les navigateurs Modification de la liste des problmes ignors Sauvegarde d'un rapport de vrification de compatibilit avec les navigateurs Affichage d'un rapport de vrification de compatibilit avec les navigateurs dans un navigateur Ouverture du site Web Adobe CSS Advisor Les fonctions de vrification de la compatibilit avec les navigateurs vous permettent de rechercher les combinaisons de HTML et de feuilles de style CSS pouvant prsenter des problmes dans certains navigateurs. Lorsque vous excutez une vrification de compatibilit avec les navigateurs sur un fichier ouvert, Dreamweaver analyse le fichier et signale tous les problmes de rendu CSS potentiels dans le panneau Rsultats. Une estimation de confiance, illustre par un quart de cercle, un demi cercle, trois-quarts de cercle ou un cercle plein, indique la probabilit d'occurrence d'un bogue (un quart de cercle plein indique une occurrence possible et un cercle complet plein indique une occurrence trs probable). Pour chaque bogue potentiel dtect, Dreamweaver fournit galement un lien direct la documentation relative au bogue sur Adobe CSS Advisor, un site Web qui dtaille les bogues de rendu de navigateur connus et propose des solutions pour les corriger. Par dfaut, la fonction de vrification de la compatibilit avec les navigateurs effectue une vrification par rapport aux navigateurs suivants : Firefox 1.5 ; Internet Explorer (Windows) 6.0 et 7.0 ; Internet Explorer (Macintosh) 5.2 ; Netscape Navigator 8.0 ; Opera 8.0 et 9.0 ; Safari 2.0. Cette fonction remplace l'ancienne fonction de vrification du navigateur cible, mais conserve la fonctionnalit CSS de cette fonction. Cela signifie que la nouvelle fonction de vrification de compatibilit avec les navigateurs teste le code de vos documents et dtermine s'il contient des proprits ou des valeurs CSS non prises en charge par les navigateurs cibles. Trois niveaux de problmes potentiels de prise en charge de navigateur peuvent se prsenter : Une erreur signale du code CSS pouvant causer un problme grave et visible au niveau du fonctionnement de certains navigateurs, par exemple, en faisant disparatre une partie d'une page (une erreur dsigne par dfaut les problmes de prise en charge de navigateur, de sorte que dans certains cas, du code ayant un effet inconnu peut tre signal comme une erreur). Un avertissement indique une portion de code CSS qui n'est pas prise en charge dans certains navigateurs, mais sans pour autant causer de srieux problme d'affichage. Un message d'information indique du code qui n'est pas pris en charge dans certains navigateurs, mais n'a pas d'effet visible. Les vrifications de compatibilit avec les navigateurs n'altrent en rien le document.
Excution d'une vrification de compatibilit avec les navigateurs

Slectionnez Fichier > Vrifier la page > Compatibilit avec les navigateurs.
Haut de la page
Slection de l'lment affect par un problme dtect

Double-cliquez sur le problme dans le panneau Rsultats.
Haut de la page
Accs au problme suivant/prcdent dtect dans le code
Haut de la page
Dans le menu Vrification de la compatibilit avec les navigateurs de la barre d'outils du document, slectionnez Problme suivant ou Problme prcdent.
Haut de la page
Slection des navigateurs faire vrifier par Dreamweaver

1. Dans le panneau Rsultats (Fentre > Rsultats), slectionnez l'onglet Vrification de la compatibilit avec les navigateurs. 2. Cliquez sur la flche verte dans le coin suprieur gauche du panneau Rsultats, puis choisissez Paramtres. 3. Slectionnez la case cocher situe en regard des navigateurs vrifier.
4. Dans le menu droulant correspondant aux navigateurs slectionns, vous devez indiquer la version minimale devant tre vrifie. Par exemple, pour vrifier si la restitution CSS peut s'afficher dans Internet Explorer 5.0 et versions ultrieures et dans Netscape Navigator 7.0 et versions ultrieures, cochez les cases correspondant aux noms de ces navigateurs, puis slectionnez 5.0 dans le menu
472
droulant Internet Explorer et 7.0 dans le menu droulant Netscape.
Exclusion d'un problme de la vrification de compatibilit avec les navigateurs

Haut de la page
2. Dans le panneau Rsultats, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur le problme que vous souhaitez exclure des vrifications futures. 3. Cliquez sur Ignorer le problme dans le menu contextuel.
Modification de la liste des problmes ignors

1. Dans le panneau Rsultats (Fentre > Rsultats), slectionnez l'onglet Vrification de la compatibilit avec les navigateurs.
Haut de la page
2. Cliquez sur la flche verte dans le coin suprieur gauche du panneau Rsultats, puis choisissez Modifier la liste des problmes ignors. 3. Dans le fichier Exceptions.xml, recherchez le problme que vous souhaitez supprimer de la liste des problmes ignors et supprimez-le. 4. Enregistrez et fermez le fichier Exceptions.xml.
Sauvegarde d'un rapport de vrification de compatibilit avec les navigateurs

Haut de la page
2. Cliquez sur le bouton Enregistrer le rapport dans le ct gauche du panneau Rsultats. Amenez le pointeur de la souris sur les boutons du panneau Rsultats pour afficher les info-bulles relatives chaque bouton. Remarque : Les rapports ne sont pas enregistrs automatiquement ; si vous souhaitez conserver une copie d'un rapport, vous devez suivre la procdure ci-dessus pour l'enregistrer.
Affichage d'un rapport de vrification de compatibilit avec les navigateurs dans un navigateur
Haut de la page
2. Cliquez sur le bouton Parcourir le rapport dans le ct gauche du panneau Rsultats. Amenez le pointeur de la souris sur les boutons du panneau Rsultats pour afficher les info-bulles relatives chaque bouton.
Ouverture du site Web Adobe CSS Advisor

1. Dans le panneau Rsultats (Fentre > Rsultats), slectionnez l'onglet Vrification de la compatibilit avec les navigateurs. 2. Cliquez sur le texte du lien situ dans l'angle infrieur droit du panneau. Voir aussi CSS Advisor
Haut de la page
473
Aperu des pages avec le panneau Aperu sur crans multiples

Modification des tailles de la fentre d'affichage Ajout de requtes multimdias Navigation parmi des liens Dans Dreamweaver, l'aperu sur crans multiples fournit un aperu de la page que vous modifiez comme elle s'affichera sur les priphriques prenant en charge diffrentes rsolutions d'cran. Pour ouvrir le panneau Aperu sur crans multiples, choisissez Fichier > Aperu sur crans multiples. L'aperu sur crans multiples pren en charge les types d'crans suivants : Tlphone (taille par dfaut de l'cran : 320x300 pixels) Tablette (taille par dfaut de l'cran : 768x300 pixels) Ordinateur de bureau (largeur d'cran par dfaut : 1126 pixels) Remarque : Si vous connaissez les dimensions de tout autre priphrique que vous souhaitez cibler, vous pouvez dfinir diffrents styles pour divers priphriques. Vous pouvez par exemple crer une taille d'cran de 480x272 pixels pour une PSP de Sony. Les dimensions du tlphone, de la tablette et de l'ordinateur de bureau utilises pour la prvisualisation sont dfinies sur les tailles par dfaut. Toutefois, vous pouvez modifier les tailles par dfaut en cliquant sur le bouton Tailles de la fentre d'affichage, dans le panneau Aperu sur crans multiples. Remarque : N'utilisez pas le panneau Aperu sur crans multiples comme un navigateur. Il n'est pas destin afficher des mdias dynamiques comme des films et des lments audio.
Modification des tailles de la fentre d'affichage

1. Choisissez Fichier > Aperu sur crans multiples pour ouvrir le panneau Aperu sur crans multiples. 2. Dans le panneau Ecrans multiples, cliquez sur Tailles de la fentre d'affichage.
Haut de la page
3. Dfinissez les tailles de la fentre d'affichage et cliquez sur OK. Dfinissez par exemple une largeur de 480 et une hauteur de 272 pour une PSP Sony. 4. (Optionnel) Rtablissez les paramtres par dfaut en cliquant sur Valeurs par dfaut.
Ajout de requtes multimdias

Voir Cration de requtes multimdias (CS5.5 et versions ultrieures)
Haut de la page
Navigation parmi des liens
Haut de la page
Le panneau Aperu sur crans multiples ne se synchronise pas automatiquement avec les modes Cration et En direct. Si vous effectuez des modifications dans l'un de ces modes, cliquez sur le bouton Actualiser dans le panneau Aperu sur crans multiples. Remarque : Si vous naviguez en dehors du fichier d'origine en mode En direct, le panneau Aperu sur crans multiples n'affiche pas le fichier vers lequel vous avez navigu, mme si vous cliquez sur le bouton Actualiser.
Navigation parmi les pages dans le panneau Aperu sur crans multiples. Naviguez dans le panneau Aperu sur crans multiples afin de quitter le fichier d'origine. Dreamweaver met les trois volets jour lorsque vous naviguez dans le panneau Aperu sur crans multiples. Si vous permutez entre diffrents onglets de niveau suprieur dans Dreamweaver, cliquez sur le bouton Actualiser, dans le panneau Aperu sur crans multiples, afin d'afficher le fichier slectionn.
474
Prvisualisation des pages

Prvisualisation de pages dans Dreamweaver Prvisualisation des pages dans les navigateurs Prvisualisation des pages dans les priphriques mobiles Le mode Cration vous donne une ide de l'aspect qu'aura votre page sur le Web, mais il ne restitue pas les pages de la mme faon que les navigateurs. La fonctionnalit Affichage en direct fournit une reprsentation plus prcise et permet de travailler en mode Code, de faon visualiser les modifications apportes au concept. La fonction Aperu dans le navigateur vous permet de voir la faon dont vos pages vont s'afficher dans des navigateurs spcifiques.
Prvisualisation de pages dans Dreamweaver

A propos de l'affichage en direct
Haut de la page
L'affichage en direct diffre du mode Cration traditionnel de Dreamweaver en ce sens qu'il offre un rendu non modifiable et plus raliste de l'apparence de votre page dans un navigateur. L'affichage en direct ne remplace par la commande Aperu dans le navigateur, mais fournit plutt une faon diffrente de voir quoi ressemble votre page en direct sans devoir quitter l'espace de travail de Dreamweaver. Vous pouvez passer l'affichage en direct tout moment lorsque vous vous trouvez en mode Cration. Toutefois, le passage l'affichage en direct n'a aucun point commun avec le basculement entre les autres modes d'affichage traditionnels de Dreamweaver (Code/Fractionn/Cration). Lorsque vous passez du mode Cration au mode Affichage en direct, vous vous contentez de faire basculer le mode Cration d'un tat modifiable un tat en direct . Bien que le mode Cration soit fig lorsque vous accdez au mode Affichage en direct, le mode Code reste modifiable, ce qui vous permet de modifier le code puis d'actualiser l'affichage en direct pour voir l'effet de vos modifications. Lorsque vous vous trouvez en mode Affichage en direct, vous pouvez galement dcider d'afficher le code en direct. Le mode Code en direct est similaire au mode Affichage en direct, en ce sens qu'il affiche une version du code que le navigateur excute pour rendre la page. Tout comme le mode Affichage en direct, le mode Code en direct est un affichage non modifiable. Un autre avantage du mode Affichage en direct est sa capacit figer le code JavaScript. Par exemple, vous pouvez passer en mode Affichage en direct et survoler les lignes d'un tableau bas sur Spry qui changent de couleur de par l'interaction avec l'utilisateur. Lorsque vous figez le code JavaScript, le mode Affichage en direct fige la page dans son tat actuel. Vous pouvez ensuite modifier votre code CSS ou JavaScript puis actualiser la page pour voir l'effet des modifications. Il peut tre utile de figer le code JavaScript dans l'affichage en direct pour voir et modifier les proprits des diffrents tats d'un menu ou d'autres lments interactifs qu'il est impossible de voir dans le mode Cration traditionnel. Vous trouverez un didacticiel vido sur l'utilisation du mode En direct, ralis par l'quipe de Dreamweaver, l'adresse www.adobe.com/go/dw10liveview_fr. Vous trouverez, l'adresse ci-aprs, une vido de l'quipe de conception de Dreamweaver qui prsente l'utilisation de la navigation dans le mode En direct : http://www.adobe.com/go/dwcs5livenav_fr. Vous trouverez un didacticiel vido relatif l'utilisation du mode Affichage en direct, aux fichiers associs et la fentre Navigation dans le code l'adresse www.adobe.com/go/lrvid4044_dw_fr.
Prvisualisation des pages en mode Affichage en direct

1. Veillez bien tre en mode Cration (Affichage > Cration) ou en modes Code et Cration (Affichage > Code et Cration). 2. Cliquez sur le bouton Affichage en direct.
3. (Facultatif) Apportez les modifications dans le mode Code, dans le panneau Styles CSS, dans une feuille de style CSS externe ou dans tout autre fichier associ. Mme s'il est impossible d'apporter des modifications dans le mode Affichage en direct, les options de modification d'autres endroits (par exemple dans le panneau Styles CSS ou dans le mode Code) changement au fur et mesure que vous cliquez dans l'affichage en direct. Vous pouvez travailler dans des fichiers associs (par exemple des feuilles de style CSS) tout en maintenant le focus sur l'affichage en direct. Pour ce faire, ouvrez le fichier associ partir de la barre d'outils Fichiers apparents, dans le haut du document. 4. Si vous avez apport des modifications en mode Code ou dans un fichier associ, actualisez l'affichage en direct en cliquant sur le bouton Actualiser de la barre d'outils Document ou en appuyant sur F5. 5. Pour revenir au mode Cration modifiable, cliquez nouveau sur le bouton Affichage en direct.
475
Prvisualisation du code en direct

Le code affich en mode Code en direct est similaire ce que vous verriez si vous consultiez la source de la page partir d'un navigateur. Alors que de telles sources de pages sont statiques et ne fournissent que la source de la page partir du navigateur, le mode Code en direct est dynamique et est mis jour mesure que vous interagissez avec la page en mode Affichage en direct. 1. Veillez vous trouver en mode Affichage en direct. 2. Cliquez sur le bouton Code en direct.
Dreamweaver affiche le code en direct que le navigateur utiliserait pour excuter la page. Le code est surlign en jaune et ne peut pas tre modifi. Lorsque vous interagissez avec des lments interactifs, le mode Code en direct met en surbrillance les modifications dynamiques apportes au code. 3. Pour dsactiver la mise en surbrillance des modifications dans le mode Code en direct, choisissez Affichage > Options d'affichage en direct > Surligner les modifications dans le code en direct. 4. Pour revenir au mode Code modifiable, cliquez nouveau sur le bouton Code en direct. Pour modifier les prfrences du mode Code en direct, choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (MacOS), puis choisissez la catgorie Coloration du code.
Figer JavaScript
Effectuez l'une des oprations suivantes : Appuyez sur la touche F6 Choisissez Figer JavaScript dans le menu du bouton Affichage en direct. Une barre d'information, en haut du document, vous informe que le code JavaScript est fig. Pour fermer la barre d'information, cliquez sur son lien Fermer.
Options de l'affichage en direct

Outre l'option Figer JavaScript, le menu du bouton Affichage en direct comporte d'autres options, qui sont galement accessibles via le menu Affichage > Options d'affichage en direct. Figer JavaScript Fige les lments affects par JavaScript dans leur tat actuel. Dsactiver JavaScript Dsactive JavaScript et rend nouveau la page de la manire dont elle se prsenterait dans un navigateur o JavaScript serait dsactiv. Dsactiver les plug-ins Dsactive les plug-ins et rend nouveau la page de la manire dont elle se prsenterait dans un navigateur o les plugins seraient dsactivs. Surligner les modifications dans le code en direct Active ou dsactive la mise en surbrillance des modifications dans le mode Code en direct. Modification de la page d'affichage en direct dans un nouvel onglet Permet d'ouvrir de nouveaux onglets pour les documents du site vers lesquels vous naviguez l'aide de la barre d'outils Navigation de l'explorateur ou de la fonctionnalit Suivre le lien. Vous devez tout d'abord accder au document, puis choisir Modifier la page d'affichage en direct dans un nouvel onglet afin de crer un nouvel onglet pour celui-ci. Suivre le lien Rend actif le lien suivant sur lequel vous cliquez en mode En direct. Alternativement, vous pouvez rendre un lien actif en cliquant dessus, dans le mode En direct, tout en maintenant la touche CTRL enfonce. Suivre les liens de manire continue Rend les liens du mode En direct actifs en permanence jusqu' ce que vous les dsactiviez ou que vous fermiez la page. Synchroniser automatiquement les fichiers distants Synchronise automatiquement le fichier local et le fichier distant lorsque vous cliquez sur l'icne Actualiser de la barre d'outils Navigation de l'explorateur. Dreamweaver place votre fichier sur le serveur avant l'actualisation, ce qui garantit que les deux fichiers soient synchroniss. Utiliser le serveur d'valuation pour la source de document Option employe principalement par les pages dynamiques (comme les pages ColdFusion), active par dfaut pour de telles pages. Lorsque cette option est active, Dreamweaver emploie la version du fichier qui se trouve sur le serveur d'valuation du site comme source d'affichage en direct. Utiliser des fichiers locaux pour les liens de documents Rglage par dfaut pour les sites non dynamiques. Lorsque cette option est active pour des sites dynamiques qui utilisent un serveur d'valuation, Dreamweaver emploie les versions locales des fichiers lis au document (par exemple les fichiers CSS et JavaScript) au lieu des fichiers stocks sur le serveur d'valuation. Vous pouvez ensuite apporter des modifications aux fichiers associs, de manire voir leur apparence avant de les placer sur le serveur d'valuation. Si cette option est dsactive, Dreamweaver emploie les versions des fichiers associs qui se trouvent sur le serveur d'valuation. Paramtres de demande HTTP Affiche une bote de dialogue de rglages avancs o vous pouvez entrer des valeurs relatives l'affiche de donnes en direct. Pour plus d'informations, cliquez sur le bouton Aide de la bote de dialogue.
Haut de la page
Prvisualisation des pages dans les navigateurs

476
Affichage d'un aperu dans un navigateur

Vous pouvez obtenir un aperu d'une page dans un navigateur la demande. Il n'est pas ncessaire de la transfrer au pralable sur un serveur Web. Lorsque vous affichez un aperu d'une page, toutes les fonctions lies au navigateur doivent tre oprationnelles, y compris les comportements JavaScript, les liens absolus et relatifs au document, les contrles ActiveX et les plug-ins Netscape Navigator, condition que vous ayez install les plug-ins ou les contrles ActiveX requis dans vos navigateurs. Avant d'afficher un aperu d'un document, enregistrez-le, sinon le navigateur n'affiche pas vos modifications les plus rcentes. 1. Procdez de l'une des manires suivantes pour afficher un aperu de la page : Choisissez Fichier > Aperu dans le navigateur, puis slectionnez un navigateur dans la liste. Remarque : Si aucun navigateur ne figure dans la liste, choisissez Edition > Prfrences ou Dreamweaver > Prfrences (Macintosh), puis slectionnez la catgorie Aperu situe dans la partie gauche du navigateur pour slectionner un navigateur Appuyez sur la touche F12 (Windows) ou Option+F12 (Macintosh) pour afficher la page en cours dans votre navigateur par dfaut. Appuyez sur la combinaison de touches Ctrl+F12 (Windows) ou Commande+F12 (Macintosh) pour afficher la page en cours dans votre navigateur secondaire. 2. Cliquez sur les liens et testez le contenu de votre page. Remarque : Le contenu li un chemin relatif la racine n'apparat pas lorsque vous lancez l'aperu de documents dans un navigateur local, sauf si vous spcifiez un serveur de test ou activez l'option Aperu l'aide d'un fichier temporaire dans Edition > Prfrences > Aperu dans le navigateur. En effet, la diffrence des serveurs, les navigateurs ne reconnaissent pas les racines de sites. Pour lancer l'aperu d'un contenu li des chemins relatifs la racine, placez le fichier sur un serveur distant, puis choisissez Fichier > Aperu dans le navigateur pour l'afficher. 3. Fermez la page dans le navigateur aprs avoir effectu le test.
Dfinition des prfrences d'aperu dans un navigateur

Vous pouvez dfinir les prfrences que les navigateurs emploieront lors de l'affichage de l'aperu d'un site, ainsi que dfinir les navigateurs principaux et secondaires. 1. Choisissez Fichier > Aperu dans le navigateur > Modifier la liste des navigateurs. 2. Pour ajouter un navigateur dans la liste, cliquez sur le bouton plus (+), compltez la bote de dialogue Navigateurs, puis cliquez sur OK. 3. Pour supprimer un navigateur de la liste, slectionnez-le, puis cliquez sur le bouton moins (-). 4. Pour modifier les paramtres d'un navigateur slectionn, cliquez sur le bouton Modifier, effectuez les modifications dans la bote de dialogue Modifier le navigateur, puis cliquez sur OK. 5. Slectionnez l'option Navigateur principal ou Navigateur secondaire pour indiquer si le navigateur slectionn est le navigateur primaire ou secondaire. Appuyez sur F12 (Windows) ou Option+F12 (Macintosh) pour ouvrir le navigateur principal et sur Ctrl+F12 (Windows) ou Commande+F12 (Macintosh) pour ouvrir le navigateur secondaire. 6. Slectionnez Aperu l'aide d'un fichier temporaire pour crer une copie temporaire qui sera utilise pour l'aperu et le dboguage. Dslectionnez cette option si vous souhaitez mettre le document directement jour.
Prvisualisation des pages dans les priphriques mobiles
Haut de la page
Pour prvisualiser des pages cres dans Dreamweaver sur diffrents priphriques mobiles, utilisez Device Central avec sa fonction intgre Small-Screen Rendering d'Opera. Des navigateurs diffrents sont installs sur les diffrents priphriques, mais la prvisualisation peut vous donner un bon aperu du contenu et de son comportement sur un priphrique donn. 1. Lancez Dreamweaver. 2. Ouverture d'un fichier. 3. Effectuez l'une des oprations suivantes : Slectionnez Fichier > Aperu dans le navigateur > Device Central. Dans la barre d'outils de la fentre du document, cliquez et maintenez enfonc le bouton du navigateur Aperu/dbogage dans le navigateur et slectionnez Aperu dans Device Central.
Le fichier est affich dans l'onglet Emulateur de Device Central. Pour poursuivre le test, cliquez deux fois sur le nom d'un autre priphrique dans les listes Ensembles de priphriques ou Priphriques disponibles. Voir aussi Prsentation de la barre d'outils Navigation de l'explorateur Ouverture des fichiers associs
477
Didacticiel sur l'utilisation du mode Affichage en direct
478
Slection et affichage d'lments dans la fentre de document

Slection d'lments Affichage du code HTML associ au texte ou l'objet slectionn Affichage ou masquage des icnes des lments invisibles Dfinition des prfrences des lments invisibles Pour slectionner un lment dans le mode Cration de la fentre de document, cliquez dessus. Si un lment est invisible, vous devez le rendre visible pour le slectionner. Certains codes HTML ne sont pas visibles dans un navigateur, comme, par exemple, les balises comment. Il est cependant utile de pouvoir slectionner, modifier, dplacer et supprimer ces lments invisibles lorsque vous crez une page. Dreamweaver permet d'afficher des icnes l'emplacement de ces lments invisibles dans la fentre de document en mode Cration. Pour indiquer les marqueurs d'lment qui doivent s'afficher, dfinissez les prfrences lies aux lments invisibles. Par exemple, vous pouvez spcifier que les ancres nommes soient visibles, mais pas les sauts de ligne. Vous pouvez crer certains lments invisibles (tels que les commentaires et les ancres nommes) l'aide des boutons dans la catgorie Commun du panneau Insertion. Vous pouvez ensuite modifier ces lments l'aide de l'inspecteur Proprits.
Slection d'lments
Pour slectionner un lment visible dans la fentre de document, cliquez dessus ou entourez-le du rectangle de slection.
Haut de la page
Pour slectionner un lment invisible, choisissez Affichage > Assistances visuelles > Elments invisibles (si ce n'est pas dj fait), puis cliquez sur le marqueur de l'lment dans la fentre de document. Certains objets apparaissent sur la page un endroit diffrent de celui dans lequel leur code est insr. Par exemple, en mode conception, un lment PA peut se trouver n'importe o dans la page, mais en mode Code, le code dfinissant l'lment PA se trouve dans un emplacement fixe. Lorsque les lments invisibles sont affichs, Dreamweaver affiche des marqueurs dans la fentre de document pour indiquer l'emplacement du code de ces lments. En slectionnant le marqueur, vous slectionnez tout l'lment : si, par exemple, vous slectionnez le marqueur d'un lment PA, tout l'lment PA est slectionn Pour slectionner une balise complte (avec son contenu, le cas chant), cliquez sur son symbole dans le slecteur de balise, dans la partie infrieure gauche de la fentre de document. Le slecteur de balises apparat en mode Cration et en mode Code. Le slecteur de balises affiche toujours les balises qui contiennent la slection ou le point d'insertion en cours. La balise l'extrme gauche est la balise ultrapriphrique contenant la slection ou le point d'insertion en cours. La balise suivante est contenue dans cette balise ultrapriphrique, et ainsi de suite. La balise l'extrme droite est la balise la plus l'intrieur contenant la slection ou le point d'insertion en cours. Dans l'exemple suivant, le point d'insertion est situ dans une balise de paragraphe,<p>. Pour slectionner le tableau contenant le paragraphe que vous souhaitez slectionner, slectionnez la balise <table> gauche de la balise <p>.
Affichage du code HTML associ au texte ou l'objet slectionn

Effectuez l'une des oprations 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 Cration. Choisissez Affichage > Code et cration. Choisissez Fentre > Inspecteur de code.
Haut de la page
Lorsque vous slectionnez un lment dans l'un des deux diteurs de code (mode Code ou inspecteur de code), il est galement slectionn dans la fentre de document. Il est parfois ncessaire de synchroniser les deux affichages pour que la slection apparaisse.
Affichage ou masquage des icnes des lments invisibles
Haut de la page
Choisissez Affichage > Assistances visuelles > Elments invisibles. Remarque : L'affichage des lments invisibles risque de modifier lgrement la mise en page, en dplaant d'autres lments de quelques
479
pixels. Pour conserver une mise en page prcise, vous devez donc masquer ces lments invisibles.
Haut de la page
Dfinition des prfrences des lments invisibles
Utilisez les prfrences des lments invisibles pour dterminer les types d'lments devant tre affichs lorsque l'option Affichage > Assistances visuelles > Elments invisibles est active. 1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh), puis cliquez sur Elments invisibles. 2. Slectionnez les lments rendre visibles, puis cliquez sur OK. Remarque : Une coche ct du nom de l'lment dans la bote de dialogue signifie que l'lment est visible lorsque l'option Affichage > Assistances visuelles > Elments invisibles est active. Ancres nommes Affiche une icne marquant l'emplacement de chaque ancre nomme (a name ="") dans le document. Scripts Affiche une icne marquant l'emplacement de code Java Script ou VBScript dans le corps du document. Slectionnez cette icne pour modifier le script dans l'inspecteur Proprits, ou pour crer un lien vers un fichier script externe. Comments Affiche une icne marquant l'emplacement d'un commentaire HTML. Slectionnez cette icne pour consultez le commentaire dans l'inspecteur Proprits. Sauts de ligne Affiche une icne marquant l'emplacement de chaque saut de ligne (BR). Cette option est dslectionne par dfaut. Cartes graphiques ct client Affiche une icne marquant l'emplacement de chaque carte graphique du document. Styles incorpors Affiche une icne marquant l'emplacement de styles CSS incorpors dans le corps du document. Les styles CSS placs dans l'en-tte du document n'apparaissent pas dans la fentre de document. Champs de formulaire masqus Affiche une icne marquant l'emplacement de champs de formulaire dont l'attribut type est fix "hidden". Sparateur de formulaire Affiche une bordure dlimitant le formulaire pour vous aider y insrer des lments. La bordure indique l'tendue de la balise form ; ainsi, tous les lments de formulaire l'intrieur de cette bordure sont correctement inclus dans les balises form. Points d'ancrage des lments PA Affiche une icne marquant l'emplacement du code dfinissant un lment PA. L'lment PA lui-mme peut tre positionn n'importe o dans la page. Les lments PA ne constituent pas des lments invisibles ; seul le code qui les dfinit est invisible. Slectionnez l'icne afin de slectionner l'lment PA. Vous pouvez ainsi afficher le contenu de l'lment PA, mme s'il est marqu comme masqu. Points d'ancrage des lments aligns Affiche une icne marquant l'emplacement du code HTML des lments qui acceptent l'attribut align. Ces lments sont les suivants : images, tableaux, objets ActiveX, plug-ins et applets. Dans certains cas, le code de l'lment peut tre spar de l'objet visible. Balises de marquage de serveur visuel Affiche l'emplacement des balises de marquage de serveur (telles que les balises ASP (Active Server Pages) et ColdFusion) dont le contenu ne peut pas tre affich dans la fentre de document. En rgle gnrale, lorsqu'elles sont traites par un serveur, ces balises gnrent des balises HTML. Par exemple, une balise <CFGRAPH> gnre un tableau HTML lorsqu'elle est traite par un serveur ColdFusion. Dreamweaver reprsente la balise l'aide d'un lment ColdFusion invisible, car il lui est impossible de dterminer la sortie dynamique finale de la page. Balises de marquage de serveur non visuel Affiche l'emplacement des balises de marquage de serveur (telles que les balises ASP (Active Server Pages) et ColdFusion) dont le contenu ne peut pas tre affich dans la fentre de document. Il s'agit gnralement de balises de configuration, de traitement ou de logique (par exemple <CFSET>, <CFWDDX> et <CFXML>) qui ne gnrent pas de balises HTML. Affichage CSS: Aucun Affiche une icne qui montre l'emplacement du contenu masqu par la proprit display:none de la feuille de style lie ou incorpore. Afficher le texte dynamique sous Affiche le texte dynamique de la page dans le format {Recordset:Field} par dfaut. Si la longueur de ces valeurs perturbe le formatage de la page, vous pouvez choisir le type d'affichage {}. Inclusions ct serveur Affiche le contenu rel de chaque fichier d'inclusion ct serveur. Voir aussi
480
Affichage des donnes dynamiques

Fourniture de donnes dynamiques une page en mode En direct Dpannage des donnes en direct dans le mode En direct La fonctionnalit d'affichage Live Data a t abandonne depuis Dreamweaver CS5. Elle a t remplace par la fonction Affichage en direct, davantage optimise. Pour afficher les donnes en direct en mode En direct, veillez effectuer les oprations suivantes : Dfinissez un dossier pour le traitement des pages dynamiques (par exemple, un dossier racine sur un serveur ColdFusion, sur votre ordinateur ou sur un ordinateur distant). Si la page affiche un message d'erreur lorsque vous accdez au mode En direct, assurez-vous que l'URL Web est correct dans la bote de dialogue Dfinition du site. Copiez les fichiers associs (le cas chant) dans le dossier. Fournissez tous les paramtres de la page qu'un utilisateur fournirait normalement.
Fourniture de donnes dynamiques une page en mode En direct

2. Dans la zone Demande d'URL, cliquez sur le bouton plus (+) pour entrer un paramtre attendu par votre page. 3. Indiquez un nom et une valeur test pour chaque paramtre. 4. Dans le menu droulant Mthode, slectionnez la mthode de formulaire HTML attendue par votre page : POST ou GET.
Haut de la page
1. Ouvrez la bote de dialogue Paramtres d'affichage en direct (Affichage > Options d'affichage en direct > Paramtres de demande HTTP).
5. Pour enregistrer les paramtres de la page actuelle, choisissez Enregistrer les paramtres de ce document, puis cliquez sur OK. Remarque : Pour que les paramtres puissent tre enregistrs, vous devez activer Design Notes (Fichier > Design Notes).
Dpannage des donnes en direct dans le mode En direct
Haut de la page
Bon nombre de problmes d'affichage de donne en direct dans le mode En direct sont lis des valeurs manquantes ou incorrectes dans la bote de dialogue Dfinition du site (Site > Modifier les sites). Vrifiez les paramtres du serveur que vous avez spcifi comme serveur d'valuation. Vous devez spcifier un dossier capable de traiter des pages dynamiques l'endroit o la bote de dialogue Dfinition du site demande un dossier de serveur ou un rpertoire racine. Voici un exemple de dossier de serveur appropri si vous excutez IIS ou PWS sur votre disque dur : C:\Inetpub\wwwroot\myapp\ Vrifiez que la case URL Web spcifie bien une URL correspondant au dossier distant. Par exemple, si PWS ou IIS est excut sur votre ordinateur local, les dossiers distants suivants ont possdent les URL Web suivantes : Dossier distant C:\Inetpub\wwwroot\ C:\Inetpub\wwwroot\myapp\ C:\Inetpub\wwwroot\fs\planes URL Web http://localhost/ http://localhost/myapp/ http://localhost/fs/planes
Voir aussi
481
Modles
482
A propos des modles Dreamweaver

Description des modles Dreamweaver Types de rgions de modle Liens des modles Scripts de serveur dans un modle et documents bass sur un modle Paramtres de modle Expressions de modle Langage d'expression de modle La condition Multiple If dans le code du modle
Description des modles Dreamweaver
Haut de la page
Un modle est un type spcial de document qui sert concevoir une mise en page fixe . Il est alors possible de crer des documents bass sur le modle, qui en hritent la mise en page. Lors de la conception d'un modle, vous spcifiez comme tant modifiable le contenu que les utilisateurs sont habilits modifier dans un document bas sur ce modle. Les crateurs de modles peuvent contrler les lments de la page que les utilisateurs des modles (rdacteurs, infographistes ou autres dveloppeurs) pourront modifier. Le crateur peut inclure plusieurs types de rgions de modle dans un document. Remarque : Les modles permettent de dfinir la conception d'une grande zone et de rutiliser des mises en page compltes. Si vous souhaitez rutiliser des lments de conception individuels, tels que les informations sur le copyright d'un site ou un logo, crez des lments de bibliothque. L'utilisation de modles vous permet de mettre jour plusieurs pages la fois. Tout document cr partir d'un modle reste associ ce modle (sauf si vous dcidez de dtacher le document ultrieurement). Lorsque vous modifiez un modle, la conception de tous les documents crs partir de ce modle est immdiatement mise jour. Remarque : Les modles de Dreamweaver sont diffrents des modles de certains autres logiciels Adobe Creative Suite en ce sens que les sections de page des modles sont fixes (ou non modifiables) par dfaut.Dreamweaver
Haut de la page
Types de rgions de modle
Lorsque vous enregistrez un document en tant que modle, la plupart des rgions d'un document sont verrouilles. En tant que crateur de modles, vous devez insrer des rgions ou paramtres modifiables dans un modle pour dfinir les rgions qui pourront tre modifies dans les documents bass sur ce modle. Lors de la cration du modle, vous pouvez apporter des modifications aux rgions modifiables et aux rgions verrouilles. En revanche, dans le cas d'un document cr partir d'un modle, seules les rgions modifiables peuvent subir des modifications ; les rgions verrouilles ne peuvent pas tre modifies. Il existe quatre types de rgions de modle : Une rgion modifiable Une rgion non verrouille dans un document bas sur un modle. Ce type de section peut tre modifi par l'utilisateur. Le crateur du modle peut dfinir toute rgion du modle comme modifiable. Pour tre fonctionnel, un modle doit contenir au moins une rgion modifiable. S'il n'en contient pas, les pages cres partir du modle ne pourront pas tre modifies. Une rgion rpte Une section de la mise en forme du document qui est dfinie de faon ce que l'utilisateur du modle puisse ajouter ou supprimer des copies de la rgion rpte dans un document bas sur le modle en fonction de ses besoins. Par exemple, vous pouvez dfinir une ligne de tableau reproduire. En gnral, les sections rptes sont modifiables afin que l'utilisateur du modle puisse modifier le contenu de l'lment rpt, tandis que le crateur du modle contrle la conception elle-mme. Deux types de rgions rptes peuvent tre insres dans un modle : rgion rpte et tableau rpt. Une rgion facultative Une section d'un modle qui renferme un contenu, tel que du texte ou une image, pouvant apparatre ou non dans un document. Sur la page base sur le modle, l'utilisateur du modle dcide gnralement si le contenu doit tre affich ou non. Un attribut de balise modifiable Permet de dverrouiller un attribut de balise dans un modle afin que les utilisateurs puissent le modifier dans les pages cres partir de ce modle. Par exemple, vous pouvez verrouiller les images contenues dans le document tout en permettant l'utilisateur du modle d'en dfinir l'alignement gauche, droite ou au centre.
Haut de la page
Liens des modles
Lorsque vous crez un fichier de modle en enregistrant une page existante en tant que modle, le nouveau modle situ dans le dossier Templates, ainsi que tous les liens du fichier, sont mis jour de faon ce que leur chemin d'accs relatif au document soit correct. Par la suite, lorsque vous crez un nouveau document partir de ce modle et que vous enregistrez ce nouveau document, tous les liens relatifs au document
483
sont de nouveau mis jour pour qu'ils continuent de pointer vers les fichiers adquats. En revanche, si vous insrez un nouveau lien relatif un document dans un fichier de modle, il est facile de faire une faute de frappe lorsque vous tapez le chemin dans la zone de texte du lien de l'inspecteur Proprits. Le chemin correct dans un fichier de modle est le chemin d'accs au document li partir du dossier Templates, et non pas partir du dossier du document bas sur le modle. Assurez-vous que les chemins d'accs utiliss pour les liens sont corrects en utilisant l'icne de dossier ou l'icne Pointer vers un fichier dans l'inspecteur Proprits lorsque vous crez des liens dans des modles. Prfrence de mise jour des liens dans Dreamweaver 8.01 Avant Dreamweaver 8 (c'est--dire, dans Dreamweaver version MX 2004 ou antrieure), Dreamweaver ne mettait pas jour les liens vers des fichiers situs dans le dossier Templates. Par exemple, si vous aviez un fichier intitul main.css dans le dossier Templates, et si vous aviez crit href="main.css" en tant que lien dans le fichier du modle, Dreamweaver ne mettait pas ce lien jour lors de la cration d'une page base sur ce modle. Certains utilisateurs ont tir parti de la faon dont Dreamweaver traitait les liens vers les fichiers du dossier Templates et ont utilis cette incohrence pour crer des liens qu'ils n'avaient pas l'intention de mettre jour lors de la cration de pages partir d'un modle. Par exemple, supposons que vous utilisez Dreamweaver MX 2004, et que vous possdez un site comprenant diffrents dossiers pour diffrentes applications : Dreamweaver, Flash et Photoshop. Chaque dossier de produit contient une page index.html base sur un modle, et une version unique du fichier main.css au mme niveau. Si le fichier du modle contient le lien relatif au document href="main.css" (un lien vers une version du fichier main.css situe dans le dossier Templates), et que vous souhaitez que vos pages index.html bases sur le modle contiennent galement ce lien tel qu'il a t rdig, vous pouvez crer des pages index.html bases sur le modle sans avoir vous proccuper que Dreamweaver mette jour ces liens particuliers. Lorsque Dreamweaver MX 2004 cre des pages index.html bases sur le modle, les liens href="main.css" (non mis jour) font rfrence aux fichiers main.css qui rsident dans les dossiers Dreamweaver, Flash et Photoshop, et non au fichier main.css qui rside dans le dossier Templates. Toutefois, dans Dreamweaver 8, ce comportement a t modifi de faon ce que tous les liens relatifs un document soient mis jour lors de la cration de pages bases sur un modle, quel que soit l'emplacement apparent des fichiers lis. Dans ce scnario, Dreamweaver examine le lien dans le fichier du modle (href="main.css") et cre dans la page base sur le modle un lien qui est relatif l'emplacement du nouveau document. Par exemple, si vous crez un document bas sur un modle un niveau au-dessus du dossier Templates, Dreamweaver rdigerait le lien dans le nouveau document de cette faon : href="Templates/main.css". Cette mise jour Dreamweaver 8 a rompu des liens dans les pages cres par les concepteurs qui avaient tir parti de l'ancienne pratique de Dreamweaver qui consistait ne pas mettre jour les liens vers des fichiers du dossier Templates. Dreamweaver 8.01 a ajout une prfrence qui vous permet d'activer ou de dsactiver le comportement de mise jour des liens relatifs. (Cette prfrence spciale s'applique uniquement aux liens vers des fichiers du dossier Templates, mais pas aux liens en gnral.) Le comportement par dfaut est de ne pas mettre jour ces liens (comme c'tait le cas dans Dreamweaver version MX 2004 et antrieure), mais si vous souhaitez que Dreamweaver mette jour ces types de liens lors de la cration de pages bases sur un modle, vous pouvez dslectionner la prfrence. Vous ne feriez cela que si, par exemple, vous aviez une page CSS (Cascading Style Sheets, feuilles de style de cascade), main.css, dans votre dossier Templates, et que vous souhaitiez qu'un document bas sur un modle contienne le lien href="Templates/main.css". Cette pratique n'est toutefois pas recommande, car seuls les fichiers modles de Dreamweaver (DWT) doivent rsider dans le dossier Templates. Pour que Dreamweaver mette jour les chemins relatifs au document vers les fichiers non lis au modle dans le dossier Modles, slectionnez la catgorie Modles de la bote de dialogue Configuration du site (dans la section Paramtres avancs), puis dsactivez l'option Ne pas modifier les chemins relatifs aux documents. Pour plus d'informations, consultez la TechNote Dreamweaver sur le site Web d'Adobe l'adresse www.adobe.com/go/f55d8739_fr.
Scripts de serveur dans un modle et documents bass sur un modle
Haut de la page
Certains scripts de serveur sont insrs au tout dbut ou la toute fin du document (avant la balise <html> ou aprs la balise </html>). Ces scripts requirent un traitement spcial dans les modles et les documents crs partir de modles. En rgle gnrale, lorsque vous apportez des modifications au code de script situ avant la balise <html> ou aprs la balise </html> dans un modle, les modifications ne sont pas rpercutes dans les documents crs partir du modle, ce qui peut entraner des erreurs de serveur lorsqu'un script de serveur situ dans le corps principal du modle dpend d'un script non mis jour. Une alerte vous avertit lorsque vous tentez de modifier des scripts situs avant la balise <html> ou aprs la balise </html> dans un modle. Pour viter ce problme, vous pouvez insrer le code suivant dans la section head du modle :  Lorsque vous insrez ce code dans un modle, toutes les modifications apportes aux scripts situs avant la balise <html> ou aprs la balise </html> sont rpercutes dans les documents crs partir du modle. Toutefois, vous ne pourrez plus modifier ces scripts dans les documents crs partir du modle. Vous pouvez donc soit modifier les scripts dans le modle, soit dans les documents crs partir du modle, mais pas dans les deux la fois.
Paramtres de modle
Haut de la page
Les paramtres de modle indiquent les valeurs qui permettent de personnaliser le contenu des documents bass sur le modle. Ils permettent de
484
dfinir des rgions facultatives, des attributs de balise modifiables ou des valeurs transmettre aux documents joints. Pour chaque paramtre, vous devez dfinir un nom, un type de donne et une valeur par dfaut. Vous devez attribuer un nom unique chaque paramtre. En outre, les paramtres sont sensibles la casse. Ils doivent possder l'un des cinq types de donnes admis : texte, boolen, couleur, URL ou nombre. Les paramtres de modle sont transmis au document sous forme de paramtres d'instance. En gnral, l'utilisateur d'un modle est autoris modifier les valeurs par dfaut du paramtre pour personnaliser le contenu du document bas sur le modle. Dans d'autres cas, le crateur du modle peut dterminer ce qui apparat dans le document, selon la valeur d'une expression de modle.
Expressions de modle
Les expressions de modle sont des instructions qui calculent ou valuent une valeur.
Haut de la page
Vous pouvez utiliser une expression pour enregistrer une valeur et l'afficher dans un document. Vous pouvez notamment rdiger une expression simple se limitant la valeur d'un paramtre, par exemple @@(Param)@@, ou bien une expression plus complexe permettant de calculer les valeurs qui feront alterner la couleur d'arrire-plan de la ligne d'un tableau, par exemple @@((_index & 1) ? red : blue)@@. Vous pouvez aussi rdiger des expressions de modle pour dfinir des conditions If et MultipleIf. Lorsqu'une instruction conditionnelle contient une expression, Dreamweaver value si celle-ci est true ou false. Si la condition est true, la rgion facultative s'affiche dans le document bas sur le modle ; si elle est false, elle n'apparat pas. Vous pouvez dfinir des expressions en mode Code ou dans la bote de dialogue de la rgion facultative que vous insrez. En mode Code, il existe deux faons de dfinir des expressions de modle : utilise le commentaire  commentaire ou @@(votre expression)@@. Lorsque vous insrez l'expression dans le code du modle, un marqueur d'expression apparat en mode Cration. Lorsque vous appliquez le modle, Dreamweaver value l'expression et affiche la valeur dans le document bas sur le modle.
Langage d'expression de modle
Haut de la page
Le langage d'expression de modle utilise la syntaxe et les rgles de priorit de JavaScript, dont il constitue un sous-ensemble. Utilisez des oprateurs JavaScript pour rdiger des expressions, comme dans l'exemple suivant : @@(firstName+lastName)@@ Les fonctions et oprateurs suivants sont pris en charge : constantes numriques, constantes de chane (syntaxe avec guillemets doubles uniquement), constantes boolennes (true ou false) rfrence de variable (voir la liste des variables dfinies plus bas dans cette section) rfrence un champ (oprateur point ) oprateurs unaires : +, -, ~, ! oprateurs binaires : +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >> oprateurs conditionnels : ?: parenthses : () Les types de donnes suivants sont pris en charge : boolen, virgule flottante 64 bits IEEE, chane et objet. Les modles Dreamweaver ne prennent pas en charge l'utilisation des types JavaScript null et undefined . Ils ne permettent pas non plus de convertir implicitement les types scalaires en objet. Par consquent, l'expression "abc".length provoquera une erreur au lieu de fournir la valeur 3. Les seuls objets disponibles sont ceux qui sont dfinis par le modle d'objet d'expression. Les variables suivantes sont dfinies : _document Contient les donnes de modle de niveau document avec un champ pour chaque paramtre du modle. _repeat Dfinie uniquement pour les expressions situes l'intrieur d'une rgion rpte. Fournit des informations prdfinies sur la rgion _index L'index numrique ( partir de 0) de l'entre en cours. _numRows Nombre total d'entres dans la rgion rpte. _isFirst Vrai (true) si l'entre en cours est la premire entre de la rgion rpte. _isLast Vrai (true) si l'entre en cours est la premire entre de la rgion rpte. _prevRecord L'objet _repeat de l'entre prcdente. L'accs cette proprit provoque une erreur si l'entre est la premire de la rgion. _nextRecord L'objet _repeat de l'entre suivante. L'accs cette proprit provoque une erreur si l'entre est la dernire de la rgion. _parent Dans une rgion rpte imbrique, donne l'objet _repeat correspondant la rgion rpte extrieure. L'accs cette proprit en dehors d'une rgion rpte imbrique provoque une erreur. Lors de l'valuation de l'expression, tous les champs de l'objet _document et _repeat sont implicitement disponibles. Par exemple, vous pouvez saisir title au lieu de _document.title pour accder au paramtre de titre du document.
485
En cas de conflit de champ, les champs de l'objet _repeat ont la priorit sur les champs de l'objet _document. Vous n'avez donc pas rfrencer explicitement _document ou _repeat. Toutefois, il se peut que _document soit ncessaire l'intrieur d'une rgion rpte pour rfrencer les paramtres de document masqus par les paramtres de rgion rpte. Dans le cas de rgions rptes imbriques, seuls les champs de la rgion rpte intrieure sont disponibles implicitement. Les rgions extrieures doivent tre rfrences explicitement l'aide de _parent.
La condition Multiple If dans le code du modle
Haut de la page
Vous pouvez rdiger des expressions de modle pour dfinir des conditions If et MultipleIf. Dans l'exemple suivant, un paramtre appel Dept est cr, une valeur initiale est dfinie et une condition MultipleIf est utilise pour dterminer le logo qui doit s'afficher. Voici un exemple de code pouvant tre insr dans la section head du modle :  L'instruction conditionnelle suivante vrifie la valeur attribue au paramtre Dept. Si la condition renvoie true ou la valeur correspondante, l'image adquate s'affiche. <!-<!-<!-<!-<!-<!-<!-TemplateBeginMultipleIf --> checks value of Dept and shows appropriate TemplateBeginIfClause cond="Dept == 1" --> TemplateBeginIfClause cond="Dept == 2" --> TemplateBeginIfClause cond="Dept == 3" --> TemplateBeginIfClause cond="Dept != 3" --> TemplateEndMultipleIf -->
image--> <img src=".../sales.gif">  <img src=".../support.gif">  <img src=".../hr.gif">  <img src=".../spacer.gif"> 
Lorsque vous crez un document bas sur un modle, les paramtres du modle lui sont automatiquement transmis. L'utilisateur du modle dtermine l'image afficher. Voir aussi
486
Application ou suppression d'un modle depuis un document existant

Application d'un modle un document existant Dtachement d'un document d'un modle
Application d'un modle un document existant
Haut de la page
Lorsque vous appliquez un modle un document contenant dj des lments, Dreamweaver tente de faire concorder le contenu existant avec une rgion du modle. Si le modle que vous appliquez au document est une version rvise de l'un des modles existants, il est probable que les noms concordent. Si vous appliquez un modle un document auquel aucun modle n'a encore t appliqu, les rgions modifiables ne peuvent pas tre compares et un cas de non-concordance se prsente. Dreamweaver les localise et vous pouvez alors slectionner la rgion ou les rgions vers lesquelles le contenu de la page courante doit tre transfr, ou bien dcider de supprimer le contenu non cohrent. Vous pouvez appliquer un modle un document existant l'aide du panneau Actifs ou partir de la fentre de document. Vous pouvez annuler l'application d'un modle si ncessaire. Important : Lorsque vous appliquez un modle un document existant, le modle remplace le contenu du document par le contenu passepartout du modle. Sauvegardez toujours le contenu d'une page avant de lui appliquer un modle.
Application d'un modle un document existant l'aide du panneau Actifs

1. Ouvrez le document auquel vous souhaitez appliquer le modle. 2. Dans le panneau Actifs (Fentre > Actifs), slectionnez la catgorie Modles sur le ct gauche du panneau 3. Effectuez l'une des oprations suivantes : Faites glisser le modle que vous souhaitez appliquer du panneau Actifs dans la fentre de document. Slectionnez le modle que vous souhaitez appliquer, puis cliquez sur le bouton Appliquer en bas du panneau Actifs. Si le document comporte des lments qui ne peuvent pas tre automatiquement attribus une rgion de modle, la bote de dialogue Noms de rgion incohrents s'affiche. 4. Slectionnez une destination pour le contenu l'aide du menu Dplacer le contenu vers la nouvelle rgion en slectionnant l'une des options suivantes : Slectionnez une rgion du nouveau modle vers laquelle vous souhaitez dplacer le contenu existant. Slectionnez Nulle part pour supprimer le contenu du document. 5. Cliquez sur Utiliser pour tout pour dplacer l'ensemble des lments de contenu non concordants vers la rgion slectionne. 6. Cliquez sur OK pour appliquer le modle ou sur Annuler pour annuler l'application du modle au document. Important : Lorsque vous appliquez un modle un document existant, le modle remplace le contenu du document par le contenu passepartout du modle. Sauvegardez toujours le contenu d'une page avant de lui appliquer un modle. .
Application d'un modle un document existant partir de la fentre de document

1. Ouvrez le document auquel vous souhaitez appliquer le modle. 2. Choisissez Modifier > Modles > Appliquer le modle la page. La bote de dialogue Slectionner le modle s'affiche. 3. Slectionnez un modle dans la liste, puis cliquez sur le bouton Slectionner. Si le document comporte des lments qui ne peuvent pas tre automatiquement attribus une rgion de modle, la bote de dialogue Noms de rgion incohrents s'affiche. 4. Slectionnez une destination pour le contenu l'aide du menu Dplacer le contenu vers la nouvelle rgion en slectionnant l'une des options suivantes : Slectionnez une rgion du nouveau modle vers laquelle vous souhaitez dplacer le contenu existant. Slectionnez Nulle part pour supprimer le contenu du document. 5. Cliquez sur Utiliser pour tout pour dplacer l'ensemble des lments de contenu non concordants vers la rgion slectionne. 6. Cliquez sur OK pour appliquer le modle ou sur Annuler pour annuler l'application du modle au document. Important : Lorsque vous appliquez un modle un document existant, le modle remplace le contenu du document par le contenu passe-
487
partout du modle. Sauvegardez toujours le contenu d'une page avant de lui appliquer un modle.
Annulation des modifications apportes un modle

Choisissez Edition > Annuler l'application du modle. Le document retrouve l'tat dans lequel il se trouvait avant l'application du modle.
Dtachement d'un document d'un modle
Haut de la page
Pour apporter des modifications aux rgions verrouilles d'un document bas sur un modle, vous devez au pralable dtacher le document du modle. Lorsqu'un document est dtach, toutes les rgions qui le composent deviennent modifiables. Remarque : Vous ne pouvez pas convertir un fichier modle (.dwt) en un fichier normal simplement en l'enregistrant nouveau en tant que fichier HTML (.html). Cette mthode ne supprime pas le code du modle qui figure dans le document. Si vous souhaitez convertir un fichier de modle en un fichier normal, vous pouvez enregistrer le document comme un fichier normal HTML, mais vous devez ensuite supprimer manuellement tous les codes de modle en mode Code. 1. Ouvrez le document bas sur un modle que vous souhaitez dtacher. 2. Choisissez Modifier > Modles > Dtacher du modle. Le document est dtach du modle et tout le code du modle est supprim.
488
Cration d'un modle Dreamweaver

A propos de la cration de modles Dreamweaver Cration d'un modle partir d'un document existant Cration d'un modle l'aide du panneau Actifs A propos de la cration de modles pour les sites Contribute Cration d'un modle pour un site Contribute
A propos de la cration de modles Dreamweaver
Haut de la page
Vous pouvez crer un modle partir d'un document existant (tel qu'un document HTML, Adobe ColdFusion ou Microsoft ASP) ou bien partir d'un nouveau document. Aprs avoir cr un modle, vous pouvez insrer des rgions de modle et dfinir des prfrences de modle pour la couleur du code et la couleur de surbrillance des rgions de modle. Si vous souhaitez enregistrer des informations supplmentaires sur un modle (par exemple, le nom de la personne qui l'a cr, la date de sa dernire modification ou les raisons justifiant certaines dcisions relatives la mise en forme), vous pouvez crer un fichier Design Notes pour le modle. Les documents bass sur un modle n'hritent pas des Design Notes associes ce dernier. Remarque : Les modles d'Adobe Dreamweaver sont diffrents des modles de certains autres produits Adobe Creative Suite en ce sens que les sections de page des modles Dreamweaver sont fixes (ou non modifiables) par dfaut. Vous trouverez un didacticiel consacr la cration de modles l'adresse www.adobe.com/go/vid0157_fr. Vous trouverez un didacticiel consacr l'utilisation de modles l'adresse www.adobe.com/go/vid0158_fr.
Cration d'un modle partir d'un document existant

Vous pouvez crer un modle partir d'un document existant. 1. Ouvrez le document que vous souhaitez enregistrer comme modle. 2. Effectuez l'une des oprations suivantes : Choisissez Fichier > Enregistrer comme modle.
Haut de la page
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Modles, puis choisissez Crer un modle dans le menu. Remarque : Si vous n'avez pas slectionn Ne plus afficher ce message, un message s'affiche vous indiquant que le document que vous enregistrez ne comporte aucune rgion modifiable. Cliquez sur OK pour enregistrer le document comme modle, ou bien sur Annuler pour fermer la bote de dialogue sans crer de modle. 3. Slectionnez le site dans lequel vous souhaitez enregistrer le modle dans le menu droulant Site, puis tapez un nom unique pour le modle dans la zone Enregistrer sous. 4. Cliquez sur Enregistrer. Dreamweaver enregistre le fichier de modle dans le dossier Templates du site, dans le dossier racine local du site, avec l'extension .dwt. Si ce dossier n'existe pas, Dreamweaver le cre automatiquement au moment de l'enregistrement du nouveau modle. Remarque : Ne retirez pas vos modles du dossier Templates et placez dans celui-ci uniquement des fichiers de modles. Ne retirez pas non plus le dossier Templates de votre dossier racine local, car cela pourrait provoquer des erreurs dans les chemins d'accs des modles.
Cration d'un modle l'aide du panneau Actifs

1. Dans le panneau Actifs (Fentre > Actifs), slectionnez la catgorie Modles sur le ct gauche du panneau 2. Cliquez sur le bouton Nouveau modle en bas du panneau Actifs. .
Haut de la page
Un nouveau modle, sans nom, est ajout la liste de modles du panneau Actifs. 3. Le modle tant toujours slectionn, donnez-lui un nom, puis appuyez sur Entre (Windows) ou Retour (Macintosh). Dreamweaver cre un modle vierge dans le panneau Actifs et dans le dossier Modles.
A propos de la cration de modles pour les sites Contribute
Haut de la page
A l'aide de Dreamweaver, vous pouvez crer des modles afin d'aider les utilisateurs d'Adobe Contribute crer de nouvelles pages, dfinir
489
l'aspect gnral du site et mettre jour la mise en forme de plusieurs pages la fois. Lorsque vous crez un modle et que vous le chargez sur le serveur, il devient disponibles pour tous les utilisateurs se connectant votre site, sauf si vous avez limit l'utilisation du modle certains rles de Contribute. Si vous avez dfini des restrictions sur l'utilisation des modles, il peut s'avrer ncessaire d'ajouter chaque nouveau modle la liste des modles accessibles par un utilisateur de Contribute (voir Administration de Contribute). Remarque : Assurez-vous que le dossier racine de chaque site utilisateur de Contribute dfini est le mme que le dossier racine de votre dfinition de site dans Dreamweaver. Si un dossier racine de site utilisateur ne correspond pas au vtre, cet utilisateur ne pourra pas utiliser les modles. En complment des modles Dreamweaver, vous pouvez crer des modles non Dreamweaver l'aide des outils d'administration de Contribute. Un modle non-Dreamweaver est une page existante dont les utilisateurs de peuvent se servir pour crer de nouvelles pages. Cette page est similaire un modle Dreamweaver, l'exception que les pages bases sur ce modle ne se mettent pas jour lorsque vous apportez des modifications ce dernier. Les modles non-Dreamweaver ne peuvent pas contenir d'lments de modles Dreamweaver, tels que des rgions modifiables ou verrouilles, des rptitions de rgions ou autres rgions facultatives. Lorsqu'un utilisateur de Contribute cre un nouveau document au sein d'un site contenant des modles Dreamweaver, Contribute tablit la liste des modles disponibles (Dreamweaver et non-Dreamweaver) dans la bote de dialogue Nouvelle page.
Pour inclure des pages qui utilisent des codages autres que Latin-1 dans votre site, vous devrez peut-tre crer des modles (des modles Dreamweaver ou non-Dreamweaver). Les utilisateurs de Contribute peuvent modifier des pages qui utilisent n'importe quel codage, mais lorsqu'un utilisateur Contribute crer une page vierge, il utilise le codage Latin-1. Pour crer une page utilisant un codage diffrent, l'utilisateur de Contribute peut crer une copie d'une page existante base sur un codage diffrent ou utiliser un modle bas sur un codage diffrent. Cela dit, si le site utilisant d'autres codages ne contient pas de pages ni de modles, crez d'abord, dans Dreamweaver, une page ou un modle utilisant cet autre codage.
Cration d'un modle pour un site Contribute

1. Choisissez Site > Grer les sites. 2. Slectionnez un site et cliquez sur Modifier. 3. Dans la bote de dialogue Configuration du site, slectionnez la catgorie Contribute. 4. Si vous ne l'avez pas dj fait, vous devez activer la compatibilit avec Contribute. Activez l'option Activer la compatibilit avec Contribute, puis tapez l'URL de la racine du site. 5. Cliquez sur le bouton Administrer le site dans Contribute. 6. Si ncessaire, tapez le mot de passe administrateur, puis cliquez sur OK. 7. Dans la catgorie Utilisateurs et rles, slectionnez un rle, puis cliquez sur le bouton Modifier les paramtres de rle.
Haut de la page
8. Slectionnez la catgorie Nouvelles pages, puis ajoutez les pages existantes la liste situe en dessous de l'option Crer une page en copiant une page de la liste ci-dessous. Pour plus d'informations, voir Administration de Contribute. 9. Cliquez deux reprises sur OK pour fermer les botes de dialogue.
490
Voir aussi Didacticiel consacr la cration de modles Didacticiel consacr l'utilisation de modles Cration d'un modle vierge
491
Cration d'un modle imbriqu

A propos des modles imbriqus Cration d'un modle imbriqu Empcher qu'une rgion modifiable d'un modle imbriqu devienne non modifiable dans les documents bass sur ce modle
A propos des modles imbriqus
Haut de la page
Un modle imbriqu est un modle dont la conception et les rgions modifiables sont bases sur un autre modle. Les modles imbriqus sont utiles pour grer le contenu de certaines pages d'un site qui ont de nombreux lments de prsentation en commun avec les autres pages du site mais qui prsentent malgr tout quelques diffrences. Par exemple, vous pouvez crer un modle de base dfinissant la conception de zones plus larges, qui sera utilis par une grande partie des responsables du contenu du site, et crer un modle imbriqu dfinissant de nouvelles rgions modifiables dans les pages d'une section spcifique du site. Les rgions modifiables d'un modle de base sont transmises aux modles imbriqus et restent modifiables dans les pages cres partir d'un modle imbriqu, moins que de nouvelles rgions de modle ne soient insres dans ces rgions. Les modifications apportes un modle de base sont automatiquement rpercutes dans les modles bass sur ce modle de base et dans tous les documents bass sur les modles principal et imbriqu. Dans l'exemple suivant, le modle trioHome contient trois rgions modifiables, nommes Body, NavBar et Footer :
Pour crer un modle imbriqu, nous avons cr un document partir du modle, puis nous avons enregistr ce document comme modle que nous avons appel TrioNested. Dans le modle imbriqu, nous avons ajout deux rgions modifiables et du contenu dans la rgion nomme Body.
492
Lorsque vous insrez une nouvelle rgion modifiable dans une rgion modifiable transmise au modle imbriqu, la couleur de surbrillance de la rgion modifiable devient orange. Le contenu que vous ajoutez en dehors de la rgion modifiable, par exemple l'image insre dans editableColumn, n'est plus modifiable dans les documents crs partir du modle imbriqu. Qu'elles aient t ajoutes au modle imbriqu ou qu'elles soient hrites du modle de base, les rgions modifiables entoures d'un cadre de surbrillance bleu restent modifiables dans les documents qui ont t crs partir du modle imbriqu. Les rgions de modle qui ne contiennent aucune rgion modifiable sont transmises sous la forme de rgions modifiables aux documents bass sur le modle.
Cration d'un modle imbriqu
Haut de la page
Les modles imbriqus permettent de crer des variantes du modle de base. Vous pouvez crer une srie de modles imbriqus en chane pour obtenir une mise en forme chaque fois plus prcise. Par dfaut, toutes les rgions modifiables du modle de base sont transmises, via le modle imbriqu, aux documents bass sur ce modle imbriqu. En d'autres termes, si vous dfinissez une rgion modifiable dans un modle de base, puis que vous crez un modle imbriqu, la rgion modifiable apparatra dans les documents bass sur le modle imbriqu, condition que vous n'ayez insr aucune nouvelle rgion de modle dans cette rgion du modle imbriqu. Remarque : Vous pouvez insrer un marqueur de modle l'intrieur d'une rgion modifiable afin qu'elle ne soit pas modifiable dans les documents bass sur le modle imbriqu. Ces rgions ont un cadre orange au lieu de bleu. 1. Crez un document partir du modle sur lequel vous souhaitez baser le modle imbriqu en procdant de l'une des faons suivantes : Dans la catgorie Modles du panneau Actifs, cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur le modle partir duquel vous souhaitez crer un document, puis choisissez Nouveau partir d'un modle dans le menu contextuel. Choisissez Fichier > Nouveau. Dans la bote de dialogue Nouveau document, slectionnez la catgorie Page issue d'un modle, puis slectionnez le site qui contient le modle que vous souhaitez utiliser. Dans la liste Modles, double-cliquez sur le modle pour crer un document. 2. Slectionnez Fichier > Enregistrer comme modle pour enregistrer le nouveau document en tant que modle imbriqu : 3. Tapez un nom dans la zone Enregistrer sous, puis cliquez sur OK.
Empcher qu'une rgion modifiable d'un modle imbriqu devienne non modifiable dans les documents bass sur ce modle
Haut de la page
Dans les modles imbriqus, les rgions modifiables qui seront transmises aux documents sont entoures d'un cadre bleu. Vous pouvez insrer un marqueur de modle l'intrieur d'une rgion modifiable afin qu'elle ne soit pas modifiable dans les documents bass sur le modle imbriqu. Ces rgions ont un cadre orange au lieu de bleu. 1. En mode Code, localisez la rgion modifiable que vous souhaitez rendre non modifiable dans les documents bass sur ce modle. Les rgions modifiables sont dfinies par les balises de commentaire du modle.
493
2. Ajoutez le code suivant au code de la rgion modifiable : @@("")@@ Ce modle de code peut tre plac n'importe o l'intrieur des balises  qui entourent la rgion modifiable. Par exemple :  <p> @@("")@@ Editable 1 </p>  Voir aussi Modles imbriqus
494
Cration de rgions modifiables dans des modles

Insertion d'une rgion modifiable Slection de rgions modifiables Suppression d'une rgion modifiable Modification du nom d'une rgion modifiable
Insertion d'une rgion modifiable
Haut de la page
Il est possible de crer des rgions modifiables dans un modle pour dfinir les zones qui pourront tre modifies dans les pages bases sur ce modle. Avant d'insrer une rgion modifiable, enregistrez le document actif comme modle. Remarque : Si vous insrez une rgion modifiable non pas dans un fichier de modle mais dans un document, une alerte vous informe que le document sera automatiquement enregistr comme modle. Vous pouvez placer une rgion modifiable n'importe o sur votre page. Toutefois, tenez compte des informations suivantes si vous rendez possible la modification d'un tableau ou d'un lment positionnement absolu : Vous pouvez marquer un tableau entier ou une cellule de tableau individuelle comme modifiable, mais vous ne pouvez pas marquer plusieurs cellules d'un tableau comme une seule et mme rgion modifiable. Si une balise <td> est slectionne, la rgion modifiable comprend la rgion situe autour de la cellule. Dans le cas contraire, la rgion modifiable concerne uniquement le contenu de la cellule. Les lments PA et leur contenu sont deux lments distincts. Rendre un lment PA modifiable permet de changer la position de l'lment PA et son contenu, alors que rendre le contenu d'un lment PA modifiable permet uniquement de modifier le contenu de l'lment PA, et non sa position. 1. Dans la fentre de document, procdez de l'une des manires suivantes pour slectionner la rgion. Slectionnez le texte ou le contenu que vous souhaitez dfinir comme rgion modifiable. Placez le point d'insertion l'endroit o vous voulez insrer une rgion modifiable. 2. Procdez de l'une des manires suivantes pour insrer une rgion modifiable : Choisissez Insertion > Objets de modle > Rgion modifiable. Cliquez du bouton droit (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis choisissez Modles > Nouvelle rgion modifiable. Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Modles, puis choisissez Rgion modifiable dans le menu. 3. Dans la zone Nom, tapez un nom unique pour la rgion. (vous ne pouvez pas utiliser le mme nom pour plusieurs rgions modifiables dans un modle donn). Remarque : Ne tapez pas de caractres spciaux dans la zone Nom. 4. Cliquez sur OK. La rgion modifiable est entoure d'un cadre rectangulaire dans le modle, de la couleur de surbrillance dfinie dans les prfrences. Dans le coin suprieur gauche de la rgion, un onglet indique le nom de la rgion. Si vous insrez une rgion modifiable vide dans le document, son nom s'affiche galement dans le cadre qui la dlimite.
Slection de rgions modifiables
Haut de la page
Vous pouvez facilement identifier et slectionner les diffrentes rgions prsentes dans un modle et dans un document bas sur un modle.
Slection d'une rgion modifiable dans la fentre de document

Cliquez sur l'onglet situ dans le coin suprieur gauche de la rgion modifiable.
Recherche d'une rgion modifiable et la slectionner dans le document

Choisissez Modifier > Modles, puis le nom de la rgion dans la liste figurant en bas de ce sous-menu. Remarque : Les rgions modifiables situes l'intrieur d'une rgion rpte ne sont pas rpertories dans le menu. Pour localiser ces rgions, vous devez rechercher les cadres onglet qui figurent dans la fentre de document. La rgion modifiable est slectionne dans le document.
Suppression d'une rgion modifiable
Haut de la page
495
Si vous avez marqu une rgion de votre fichier de modle comme tant modifiable, vous pouvez la verrouiller (pour la rendre non modifiable dans les documents bass sur le modle) l'aide de la commande Supprimer le marqueur de modle. 1. Cliquez sur l'onglet situ dans le coin suprieur gauche de la rgion modifiable pour la slectionner. 2. Effectuez l'une des oprations suivantes : Choisissez Modifier > Modles > Supprimer le marqueur de modle. Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis choisissez Modles > Supprimer le marqueur de modle. La rgion n'est alors plus modifiable.
Modification du nom d'une rgion modifiable

Aprs avoir insr une rgion modifiable, vous pouvez en modifier le nom. 1. Cliquez sur l'onglet situ dans le coin suprieur gauche de la rgion modifiable pour la slectionner. 2. Dans l'inspecteur Proprits (Fentre > Proprits), tapez un nouveau nom. 3. Appuyez sur la touche Entre (Windows) ou Retour (Macintosh). Voir aussi
Haut de la page
496
Cration de rgions rptes dans des modles

A propos des rgions rptes d'un modle Cration d'une rgion rpte dans un modle Insertion d'un tableau rpt Dfinition d'une couleur d'arrire-plan alterne dans un tableau rpt
A propos des rgions rptes d'un modle
Haut de la page
Une rgion rpte est une section d'un modle qui peut tre reproduite de nombreuses fois dans les pages bases sur ce modle. On utilise gnralement les rgions rptes dans le cas de tableaux. Toutefois, il est possible de dfinir des rgions rptes pour d'autres lments de page. Les rgions rptes permettent de dfinir la mise en page au moyen de la rptition de certains lments (article de catalogue et description, par exemple) ou de lignes, par exemple dans le cas d'une liste d'lments. Il existe deux objets de modle de rgion rpte : rgion rpte et tableau rpt.
Cration d'une rgion rpte dans un modle
Haut de la page
La rptition de rgions permet de copier une rgion spcifique autant de fois que ncessaire dans un modle. Une rgion rpte n'est pas ncessairement modifiable. Pour rendre modifiable le contenu d'une rgion rpte (par exemple, pour autoriser un utilisateur taper du texte dans une cellule de tableau dans un document bas sur un modle), vous devez insrer une rgion modifiable dans la rgion rpte. 1. Dans la fentre Document, procdez de l'une des manires suivantes : Slectionnez le texte ou le contenu que vous souhaitez dfinir comme rgion rpte. Placez le point d'insertion dans le document l'endroit o vous souhaitez insrer la rgion rpte. 2. Effectuez l'une des oprations suivantes : Choisissez Insertion > Objets de modle > Rgion rpte. Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis choisissez Modles > Nouvelle rgion rpte. Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Modles, puis choisissez Rgion rpte dans le menu. 3. Dans la zone Nom, tapez un nom unique pour la rgion de modle. (Vous ne pouvez pas utiliser le mme nom pour plusieurs rgions rptes dans un modle donn.) Remarque : N'insrez pas de caractres spciaux dans un nom de rgion. 4. Cliquez sur OK.
Insertion d'un tableau rpt
Haut de la page
Vous pouvez crer une rgion modifiable (sous forme de tableau) lignes rptes l'aide d'un tableau rpt. Vous pouvez dfinir des attributs de tableau et indiquer les cellules du tableau pouvant tre modifies. 1. Placez le point d'insertion dans la fentre de document l'endroit o vous souhaitez insrer le tableau rpt. 2. Effectuez l'une des oprations suivantes : Choisissez Insertion > Objets de modle > Tableau rpt. Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Modles, puis choisissez Tableau rpt dans le menu. 3. Dfinissez les options suivantes, puis cliquez sur OK. Lignes Dtermine le nombre de lignes du tableau. Colonnes Dtermine le nombre de colonnes du tableau. Marge intrieure des cellules Dtermine l'espace (en pixels) entre le contenu d'une cellule et son contour. Espacement des cellules Dtermine le nombre de pixels sparant les cellules contigus d'un tableau. Lorsque vous n'affectez pas explicitement de valeur pour la marge intrieure et l'espacement des cellules, la plupart des navigateurs
497
affichent le tableau comme si la marge intrieure des cellules tait dfinie sur 1 et l'espacement entre les cellules dfini sur 2. Pour tre sr que les navigateurs afficheront le tableau sans marge intrieure ni espacement, dfinissez Marge intrieure des cellules et Espacement entre les cellules sur 0. Largeur Indique la largeur du tableau en pixels ou en pourcentage de la largeur de fentre du navigateur. Bordure Indique la largeur, en pixels, des bordures du tableau. Si vous n'affectez pas explicitement de valeur pour la bordure, la plupart des navigateurs affichent le tableau avec une bordure dfinie sur 1. Pour vous assurer que les navigateurs affichent le tableau sans bordure, dfinissez Bordure sur 0. Pour visualiser les contours des cellules et du tableau lorsque la bordure est dfinie sur 0, slectionnez Affichage > Assistances visuelles > Bordures de tableau. Rpter les lignes du tableau Permet d'indiquer les lignes du tableau inclure dans la rgion rpte. Ligne de dbut Permet d'indiquer le numro de la premire ligne inclure dans la rgion rpte. Ligne de fin Permet d'indiquer le numro de la premire ligne inclure dans la rgion rpte. Nom de rgion Permet d'attribuer un nom unique la rgion rpte.
Dfinition d'une couleur d'arrire-plan alterne dans un tableau rpt

1. Dans la fentre de document, slectionnez une ligne du tableau rpt.
Haut de la page
Aprs avoir insr un tableau rpt dans un modle, vous pouvez le personnaliser en alternant la couleur d'arrire-plan des lignes du tableau.
2. Cliquez sur le bouton Afficher le mode code ou Afficher les modes Code et Cration de la barre d'outils du document pour accder au code de la ligne slectionne. 3. En mode Code, modifiez la balise <tr> pour qu'elle se prsente de la faon suivante : <tr bgcolor="@@( _index & 1 ? '#FFFFFF' : '#CCCCCC' )@@"> Vous pouvez modifier les valeurs hexadcimales #FFFFFF et #CCCCCC si vous souhaitez utiliser d'autres couleurs. 4. Enregistrez le modle. Exemple de code correspondant un tableau dont la couleur d'arrire-plan des lignes est alterne : <table width="75%" border="1" cellspacing="0" cellpadding="0"> <tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr>  <tr bgcolor="@@(_index & 1 ? '#FFFFFF' : '#CCCCCC')@@"> <td>  name  </td> <td>  phone  </td> <td>  email  </td> </tr>  </table> Voir aussi
498
Dfinition d'attributs de balises modifiables dans des modles

Dfinition des attributs de balise modifiables dans un modle Conversion d'un attribut de balise modifiable en attribut non modifiable
Dfinition des attributs de balise modifiables dans un modle
Haut de la page
Vous pouvez permettre aux utilisateurs d'un modle de modifier des attributs de balise spcifiques dans les documents crs partir de ce modle. Vous pouvez par exemple appliquer une couleur d'arrire-plan au modle tout en permettant aux utilisateurs du modle d'appliquer une couleur d'arrire-plan diffrente aux pages qu'ils crent. Les utilisateurs peuvent mettre jour uniquement les attributs que vous dfinissez comme tant modifiables. Vous pouvez dfinir plusieurs attributs modifiables sur une page afin que les utilisateurs du modle puissent modifier les attributs dans les documents bass sur ce modle. Les types de donnes suivants sont pris en charge : texte, valeur boolenne (true/false), couleur et URL. Lorsque vous crez un attribut de balise modifiable, un paramtre de modle est insr dans le code. L'attribut reoit une valeur initiale dans le modle. Tous les documents crs partir du modle hritent de ce paramtre. L'utilisateur du modle peut alors modifier le paramtre dans le document bas sur le modle. Remarque : Si vous crez un lien vers une feuille de style avec un attribut modifiable, alors les attributs de la feuille de style ne sont plus disponibles pour tre affichs ou modifis dans le fichier de modle. 1. Dans la fentre de document, slectionnez l'lment pour lequel vous souhaitez dfinir un attribut de balise modifiable. 2. Slectionnez Modifier > Modles > Rendre l'attribut modifiable. 3. Dans la zone Attribut, entrez un nom ou slectionnez un attribut dans la bote de dialogue Attributs de balise modifiables en procdant comme suit : Si l'attribut que vous souhaitez rendre modifiable est rpertori dans le menu droulant Attribut, slectionnez-le. Si l'attribut que vous souhaitez rendre modifiable n'est pas rpertori dans le menu droulant Attribut, cliquez sur le bouton Ajouter, tapez le nom de l'attribut que vous souhaitez ajouter dans la bote de dialogue qui s'affiche, puis cliquez sur OK. 4. Vrifiez que l'option Rendre l'attribut modifiable est active. 5. Tapez un nom unique pour l'attribut dans la zone Etiquette. Pour retrouver plus facilement un attribut de balise modifiable spcifique, faites en sorte que l'tiquette indique clairement l'lment 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'arrire-plan modifiable d'une balise body. 6. Dans le menu droulant Type, slectionnez le type de valeur autorise pour cet attribut en dfinissant l'une des options suivantes : Si vous souhaitez que l'utilisateur puisse taper du texte pour dfinir l'attribut, slectionnez Texte. L'attribut align peut par exemple tre dfini par du texte : l'utilisateur aura la possibilit de lui attribuer la valeur left, right ou center. Pour insrer un lien vers un lment, tel qu'un chemin d'accs un fichier vers une image, slectionnez URL. Lorsque cette option est slectionne, le chemin utilis dans un lien est automatiquement mis jour. Lorsque l'utilisateur dplace l'image vers un nouveau dossier, la bote de dialogue de mise jour des liens s'affiche. Si vous souhaitez que l'utilisateur puisse slectionner une valeur au moyen du slecteur de couleur, slectionnez Couleur. Pour permettre un utilisateur de choisir une valeur vraie ou fausse sur la page, choisissez Vrai/Faux. Si vous souhaitez que l'utilisateur d'un modle puisse taper une valeur numrique pour mettre jour un attribut (la hauteur ou la largeur d'une image par exemple), slectionnez Nombre. 7. La zone Valeur par dfaut indique la valeur de l'attribut de balise slectionn dans le modle. Tapez une autre valeur dans cette zone si vous souhaitez modifier la valeur initiale du paramtre dans les documents bass sur le modle. 8. (Facultatif) Si vous souhaitez apporter des modifications un autre attribut de la balise slectionne, slectionnez-le, puis compltez-en la bote de dialogue. 9. Cliquez sur OK.
Conversion d'un attribut de balise modifiable en attribut non modifiable

Une balise marque comme modifiable peut tre marque comme non modifiable.
Haut de la page
499
1. Dans le modle, cliquez sur l'lment associ l'attribut modifiable, ou bien slectionnez la balise au moyen du slecteur de balises. 2. Slectionnez Modifier > Modles > Rendre l'attribut modifiable. 3. Dans le menu droulant Attributs, slectionnez l'attribut que vous souhaitez affecter. 4. Dslectionnez Rendre l'attribut modifiable, puis cliquez sur OK. 5. Mettez jour les documents bass sur le modle. Voir aussi
500
Modification du contenu d'un document bas sur un modle

A propos de la modification du contenu d'un document bas sur un modle Modification des proprits d'un modle Ajout, suppression et modification de l'ordre des entres dans une rgion rpte
A propos de la modification du contenu d'un document bas sur un modle
Haut de la page
Les modles de Dreamweaver spcifient les rgions qui sont verrouilles (non modifiables) et les autres qui sont modifiables dans les documents bass sur ces modles. Sur les pages bases sur un modle, les utilisateurs peuvent modifier uniquement le contenu des rgions modifiables. Vous pouvez facilement identifier et slectionner les rgions modifiables afin d'en modifier le contenu. Les utilisateurs du modle ne peuvent pas modifier le contenu des rgions verrouilles. Remarque : Si vous essayez de modifier une rgion verrouille dans un document bas sur un modle lorsque la surbrillance est dsactive, le pointeur de la souris se transforme pour indiquer que vous ne pouvez pas cliquer dans une rgion verrouille. Les utilisateurs du modle peuvent galement modifier les proprits et les entres d'une rgion rpte dans les documents bass sur ce modle.
Modification des proprits d'un modle
Haut de la page
Lorsque l'auteur cre des paramtres dans un modle, les documents bass sur ce modle hritent automatiquement des paramtres et de leur valeur initiale. L'utilisateur du modle peut mettre jour les attributs de balise modifiables et d'autres paramtres du modle (ceux d'une rgion facultative, par exemple).
Modification d'un attribut de balise modifiable

1. Ouvrez le document bas sur un modle. 2. Choisissez Modifier > Proprits du modle. La bote de dialogue Proprits du modle s'ouvre et affiche la liste des proprits disponibles. Elle indique les rgions facultatives et les attributs de balise modifiables. 3. Slectionnez la proprit dans la liste Nom. L'tiquette et la valeur de la proprit slectionne s'affichent dans la partie infrieure de la bote de dialogue. 4. Si vous souhaitez modifier la valeur de la proprit dans le document courant, saisissez une autre valeur dans le champ situ droite de l'tiquette de la proprit. Remarque : Le nom du champ et les valeurs modifiables sont dfinis dans le modle. Les attributs non rpertoris dans la liste Nom ne peuvent pas tre modifis dans le document bas sur un modle. 5. Slectionnez Autoriser les modles imbriqus pour contrler ceci si vous souhaitez que la proprit modifiable soit transmise aux documents bass sur le modle imbriqu.
Modification des paramtres de modle des rgions facultatives

1. Ouvrez le document bas sur un modle. 2. Choisissez Modifier > Proprits du modle. La bote de dialogue Proprits du modle s'ouvre et affiche la liste des proprits disponibles. Elle indique les rgions facultatives et les attributs de balise modifiables. 3. Slectionnez une proprit dans la liste Nom. L'tiquette et la valeur de la proprit slectionne s'affichent dans la bote de dialogue. 4. Slectionnez Afficher si vous souhaitez que la rgion facultative apparaisse dans le document, ou bien dslectionnez cette option si vous souhaitez qu'elle soit masque. Remarque : Le nom du champ et la valeur par dfaut sont dfinis dans le modle. 5. Slectionnez Autoriser les modles imbriqus pour contrler ceci si vous souhaitez que la proprit modifiable soit transmise aux documents bass sur le modle imbriqu.
Haut de la page
501
Ajout, suppression et modification de l'ordre des entres dans une rgion rpte
Vous pouvez ajouter ou supprimer des entres ou bien modifier l'ordre des entres dans une rgion rpte. Lorsque vous ajoutez une entre de rgion rpte, l'ensemble de la rgion rpte est reproduit dans le document. La rgion rpte doit contenir une rgion modifiable dans le modle original pour que l'utilisateur puisse en modifier le contenu.
Ajout, suppression ou modification de l'ordre dans une rgion rpte

1. Ouvrez le document bas sur un modle. 2. Placez le point d'insertion sur la rgion rpte pour la slectionner. 3. Effectuez l'une des oprations suivantes : Cliquez sur le bouton plus (+) pour ajouter une entre de rgion rpte sous l'entre slectionne. Cliquez sur le bouton moins () pour supprimer l'entre de rgion rpte slectionne. Cliquez sur le bouton Flche bas pour dplacer l'entre slectionne d'un niveau vers le bas. Cliquez sur le bouton Flche haut pour dplacer l'entre slectionne d'un niveau vers le haut. Remarque : Vous pouvez galement choisir Modifier > Modles, puis activer l'une des options d'entre rpte prs du bas du menu contextuel. Celui-ci permet d'insrer une nouvelle entre de rgion rpte et de modifier l'emplacement de l'entre slectionne.
Couper, copier et supprimer des entres

1. Ouvrez le document bas sur un modle. 2. Placez le point d'insertion sur la rgion rpte pour la slectionner. 3. Effectuez l'une des oprations suivantes : Pour couper une entre rpte, choisissez Edition > Entres rptes > Couper l'entre rpte. Pour copier une entre rpte, choisissez Edition > Entres rptes > Couper l'entre rpte. Pour supprimer une entre rpte, choisissez Edition > Entres rptes > Supprimer l'entre rpte. Pour coller une entre rpte, choisissez Edition > Coller. Remarque : Lorsque vous collez une entre de rgion rpte, celle-ci s'insre dans le document sans craser d'entre existante. Voir aussi Cration d'une page base sur un modle existant
502
Modification, mise jour et suppression de modles

A propos de la modification et de la mise jour des modles Ouverture d'un modle modifier Modification du nom d'un modle Modification de la description d'un modle Mise jour manuelle des documents bass sur des modles Mise jour des modles pour un site Contribute Suppression d'un fichier de modle
A propos de la modification et de la mise jour des modles
Haut de la page
Lorsque vous apportez des modifications un modle et que vous l'enregistrez, tous les documents bass sur ce modle sont mis jour. Vous pouvez galement mettre jour manuellement un document bas sur un modle ou l'ensemble d'un site si ncessaire. Remarque : Pour modifier un modle pour un site Contribute, vous devez utiliser Dreamweaver. Il est impossible de modifier des modles dans Contribute. Utilisez la catgorie Modles du panneau Actifs pour grer les modles existants. Elle permet entre autres de renommer ou supprimer des fichiers de modle. Le panneau Actifs permet d'effectuer les tches de gestion des modles suivantes : Cration d'un modle Modification et mise jour de modles Application ou suppression d'un modle depuis un document existant Dreamweaver vrifie la syntaxe du modle lorsque vous enregistrez un modle, mais il est conseill de vrifier la syntaxe du modle manuellement mesure que vous le modifiez.
Ouverture d'un modle modifier
Haut de la page
Vous pouvez ouvrir un fichier de modle directement pour le modifier ou bien ouvrir un document bas sur un modle, puis ouvrir le modle joint pour le modifier. Lorsque vous apportez des modifications un modle, Dreamweaver vous invite mettre jour les documents bass sur ce modle. Remarque : Vous pouvez aussi manuellement mettre jour les documents selon les modifications apportes au modle, si ncessaire.
Ouverture et modification d'un fichier de modle

1. Dans le panneau Actifs (Fentre > Actifs), slectionnez la catgorie Modles sur le ct gauche du panneau . Le panneau Actifs contient tous les modles disponibles pour votre site et affiche un aperu du modle slectionn. 2. Dans la liste des modles disponibles, procdez de l'une des manires suivantes : Double-cliquez sur le nom du modle modifier. Slectionnez un modle modifier, puis cliquez sur le bouton Modifier en bas du panneau Actifs.
3. Modifiez le contenu du modle. Pour modifier les proprits de page du modle, choisissez Modifier > Proprits de la page (les documents bass sur un modle hritent des proprits de page associes ce dernier). 4. Enregistrez le modle. Un message s'affiche, vous invitant mettre jour les pages bases sur le modle. 5. Cliquez sur Mettre jour pour mettre jour tous les documents bass sur le modle modifi ; cliquez sur Ne pas mettre jour si vous ne souhaitez pas mettre jour les documents bass sur le modle modifi. Dreamweaver affiche un journal indiquant les fichiers mis jour.
Ouverture et modification du modle joint au document en cours

1. Ouvrez le document bas sur le modle dans la fentre de document. 2. Effectuez l'une des oprations suivantes : Choisissez Modifier > Modles > Ouvrir le modle joint.
503
Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis choisissez Modles > Ouvrir le modle joint. 3. Modifiez le contenu du modle. Pour modifier les proprits de page du modle, choisissez Modifier > Proprits de la page (les documents bass sur un modle hritent des proprits de page associes ce dernier). 4. Enregistrez le modle. Un message s'affiche, vous invitant mettre jour les pages bases sur le modle. 5. Cliquez sur Mettre jour pour mettre jour tous les documents bass sur le modle modifi ; cliquez sur Ne pas mettre jour si vous ne souhaitez pas mettre jour les documents bass sur le modle modifi. Dreamweaver affiche un journal indiquant les fichiers mis jour.
Modification du nom d'un modle

1. Dans le panneau Actifs (Fentre > Actifs), slectionnez la catgorie Modles sur le ct gauche du panneau 2. Cliquez sur le nom du modle pour le slectionner. 3. Cliquez une nouvelle fois sur le nom de sorte que le texte soit modifiable, puis tapez le nouveau nom. .
Haut de la page
Cette mthode fonctionne de la mme faon que celle utilise dans l'Explorateur Windows ou dans le Finder (Macintosh). Comme avec l'Explorateur Windows et le Finder, vous devez attendre un bref instant entre les deux clics. Ne double-cliquez pas sur le nom, car cela ouvrirait le modle pour modification. 4. Cliquez sur une autre zone du panneau Actifs ou appuyez sur Entre (Windows) ou Retour (Macintosh) pour appliquer la modification. Une alerte vous demande si vous voulez mettre jour les documents crs partir de ce modle. 5. Pour mettre jour tous les documents du site crs partir de ce modle, cliquez sur Mettre jour. Cliquez sur Ne pas mettre jour si vous ne souhaitez pas mettre jour les documents bass sur ce modle.
Modification de la description d'un modle

1. Choisissez Modifier > Modles > Description. 2. Dans la bote de dialogue Description du modle, modifiez la description, puis cliquez sur OK.
Haut de la page
La description du modle s'affiche dans la bote de dialogue Nouveau document lorsque vous crez une page partir d'un modle existant.
Mise jour manuelle des documents bass sur des modles
Haut de la page
Lorsque vous modifiez un modle, Dreamweaver vous invite mettre jour les documents bass sur ce modle, mais vous pouvez mettre jour manuellement le document en cours ou le site tout entier si ncessaire. La mise jour manuelle des documents bass sur le modle a le mme effet qu'une nouvelle application du modle.
Application des modifications apportes au modle au document en cours

1. Ouvrez le document dans la fentre de document. 2. Choisissez Modifier > Modles > Mettre jour la page en cours. Dreamweaver applique au document les modifications apportes au modle.
Mise jour du site entier ou de tous les documents utilisant le modle spcifi
Vous pouvez mettre jour toutes les pages du site ou bien uniquement les pages bases sur un modle spcifique. 1. Choisissez Modifier > Modles > Mettre jour les pages. 2. Dans le menu Regarder dans, ralisez une des oprations suivantes : Pour mettre jour tous les fichiers du site slectionn en fonction de leurs modles correspondants, choisissez Site entier, puis slectionnez le nom du site dans le menu droulant adjacent. Pour mettre jour les fichiers bass sur un modle spcifique, choisissez Fichiers utilisant, puis slectionnez le nom du modle dans le menu droulant adjacent. 3. Dans la rubrique Mettre jour, assurez-vous que l'option Modles est active. 4. Si vous ne souhaitez pas voir de journal des fichiers mis jour par Dreamweaver, dsactivez l'option Afficher le journal ; sinon, laissez-la active. 5. Cliquez sur Dmarrer pour mettre jour les fichiers comme indiqu. Si vous avez slectionn l'option Afficher le journal, Dreamweaver affiche des informations sur les fichiers qu'il essaie de mettre jour et prcise si la mise jour a russi. 6. Cliquez sur Fermer.
504
Mise jour des modles pour un site Contribute
Haut de la page
Les utilisateurs de Contribute ne peuvent pas modifier de modles Dreamweaver. Vous pouvez cependant utiliser Dreamweaver pour apporter des modifications dans un modle de site Contribute. Tenez compte des facteurs suivants lors de la mise jour de modles dans un site Contribute : Contribute rcupre les nouveaux modles et les modles modifis depuis le site uniquement au lancement de Contribute et lorsqu'un utilisateur de Contribute modifie ses informations de connexion. Si vous apportez des modifications un modle lorsqu'un utilisateur de Contribute modifie un fichier bas sur ce modle, l'utilisateur ne peut pas visualiser vos modifications tant qu'il ne relance pas Contribute. Si vous supprimez une rgion modifiable d'un modle lorsqu'un utilisateur de Contribute est en train de modifier une page base sur ce modle, le contenu de cette rgion modifiable peut troubler cet utilisateur. Pour mettre jour un modle dans un site Contribute, excutez les tapes suivantes. 1. Ouvrez le modle Contribute dansDreamweaver, modifiez le formulaire et enregistrez le document. Pour obtenir des instructions, voir Ouverture d'un modle modifier. 2. Demandez tous les utilisateurs Contribute qui travaillent sur le site de redmarrer Contribute.
Suppression d'un fichier de modle

1. Dans le panneau Actifs (Fentre > Actifs), slectionnez la catgorie Modles sur le ct gauche du panneau 2. Cliquez sur le nom du modle pour le slectionner. .
Haut de la page
3. Cliquez sur le bouton Supprimer en bas du panneau, puis confirmez l'opration. Important : Une fois que vous avez supprim un fichier de modle, vous ne pouvez pas le rcuprer. Le fichier de modle est supprim de votre site. Les documents crs partir de ce modle ne sont pas dtachs du modle. Ils conservent la structure et les rgions modifiables dont le fichier de modle disposait avant d'tre supprim. Vous pouvez convertir un document de ce type en fichier HTML normal sans rgions modifiables ou verrouilles. Voir aussi
505
Exportation et importation du contenu d'un modle

A propos du contenu XML d'un modle Exportation des rgions modifiables d'un document au format XML Importation de contenu XML Exportation d'un site sans marqueur de modle
A propos du contenu XML d'un modle
Haut de la page
Vous pouvez imaginer qu'un document bas sur un modle contient des donnes reprsentes par des paires nom/valeur. Chaque paire se compose du nom d'une rgion modifiable et du contenu de cette rgion. Vous pouvez exporter les paires nom/valeur dans un fichier XML pour que vous puissiez utiliser les donnes du document en dehors de Dreamweaver (par exemple dans un diteur XML, dans un diteur de texte ou mme dans une application de base de donnes). Inversement, si vous disposez d'un document XML structur de manire approprie, vous pouvez importer ses donnes dans un document bas sur un modle Dreamweaver.
Exportation des rgions modifiables d'un document au format XML

1. Ouvrez un document bas sur un modle qui contient des rgions modifiables. 2. Choisissez Fichier > Exporter > Donnes du modle en XML. 3. Activez l'une des options Notation :
Haut de la page
Si le modle contient des rgions rptes ou des paramtres de modle, choisissez Utiliser les balises XML standard de Dreamweaver. Si le modle ne contient ni rgion rpte ni paramtre de modle, choisissez Utiliser noms de rgions modifiables comme balises XML. 4. Cliquez sur OK. 5. Dans la bote de dialogue qui s'affiche, slectionnez un dossier, nommez le fichier XML, puis cliquez sur le bouton Enregistrer. Un fichier XML est gnr : il contient le matriau des paramtres et des rgions modifiables du document (y compris le matriau des rgions facultatives et des rgions modifiables situes l'intrieur de rgions rptes). Le fichier XML comporte le nom du modle original, ainsi que le nom et le contenu de chaque rgion de modle. Remarque : Le contenu des rgions non modifiables n'est pas export vers le fichier XML.
Importation de contenu XML

1. Choisissez Fichier > Importer > XML dans le modle. 2. Slectionnez le fichier XML et cliquez sur Ouvrir.
Haut de la page
Dreamweaver cre un nouveau document bas sur le modle spcifi dans le fichier XML. Il remplit le contenu de chaque rgion modifiable de ce document l'aide des donnes du fichier XML. Le document rsultant apparat dans une nouvelle fentre de document. Si votre fichier XML n'est pas configur exactement de la faon prvue par Dreamweaver, vous ne pourrez peut-tre pas importer vos donnes. Une solution ce problme consiste exporter un fichier XML fictif de Dreamweaver, de faon avoir un fichier XML ayant exactement la bonne structure, puis copier les donnes de votre fichier XML original dans le fichier XML export. Vous obtenez ainsi un fichier XML ayant une structure correcte et contenant les donnes appropries, prtes tre importes.
Exportation d'un site sans marqueur de modle

Vous pouvez exporter des documents bass sur un modle d'un site vers un autre site sans inclure le marqueur de modle. 1. Choisissez Modifier > Modles > Exporter sans marqueur.
Haut de la page
2. Dans la zone Dossier, tapez le chemin du dossier vers lequel vous souhaitez exporter le fichier, ou bien cliquez sur Parcourir et slectionnez le dossier. Remarque : Slectionnez un dossier situ l'extrieur du site courant. 3. Pour enregistrer une version XML des documents bass sur un modle que vous exportez, slectionnez Conserver les fichiers contenant les donnes du modle. 4. Pour appliquer les modifications aux fichiers prcdemment exports, slectionnez Extraire les fichiers modifis uniquement.
506
Reconnaissance des modles et des documents bass sur un modle

Reconnaissance Reconnaissance Reconnaissance Reconnaissance des modles en mode Cration des modles en mode Code d'un document bas sur un modle en mode Cration d'un document bas sur un modle en mode Code
Reconnaissance des modles en mode Cration
Haut de la page
En mode Cration, les rgions modifiables s'affichent dans la fentre de document entoures d'un cadre rectangulaire d'une couleur de surbrillance prdfinie. Un petit onglet indiquant le nom de la rgion s'affiche dans le coin suprieur gauche de chaque rgion. La barre de titre de la fentre de document permet d'identifier les fichiers de modle. La barre de titre d'un fichier de modle contient le mot <<Modle>> et l'extension du nom du fichier est .dwt.
Reconnaissance des modles en mode Code

En mode Code, les rgions de contenu modifiables sont repres dans le code HTML par les commentaires suivants : 
Haut de la page
Vous pouvez utiliser les prfrences de couleur de code pour dfinir votre propre modle de coloration afin de pouvoir distinguer facilement les rgions du modle lorsque vous affichez un document en mode Code. Tous les lments compris entre ces commentaires sont modifiables dans les documents crs partir du modle. Le code source HTML d'une rgion modifiable peut se prsenter comme suit : <table width="75%" border="1" cellspacing="0" cellpadding="0"> <tr bgcolor="#333366"> <td>Name</td> <td><font color="#FFFFFF">Address</font></td> <td><font color="#FFFFFF">Telephone Number</font></td> </tr>  <tr> <td>Enter name</td> <td>Enter Address</td> <td>Enter Telephone</td> </tr> 
507
</table> Remarque : Lorsque vous modifiez le code du modle en mode Code, prenez garde ne pas modifier de balise de commentaire lie au modle et utilise par Dreamweaver.
Haut de la page
Reconnaissance d'un document bas sur un modle en mode Cration
Dans un document bas sur un modle, les rgions modifiables s'affichent, dans le mode Cration de la fentre de document, entoures d'un cadre rectangulaire d'une couleur de surbrillance prdfinie. Un petit onglet indiquant le nom de la rgion s'affiche dans le coin suprieur gauche de chaque rgion. Outre les rgions modifiables, la page entire est entoure d'un cadre d'une couleur diffrente et un onglet dans le coin suprieur droit indique le nom du modle sur lequel le document est bas. Ce cadre a pour fonction de vous rappeler que le document a t cr partir d'un modle et que vous ne pouvez rien changer en dehors des rgions modifiables.
Reconnaissance d'un document bas sur un modle en mode Code
Haut de la page
En mode Code, les rgions modifiables d'un document driv d'un modle s'affichent dans une couleur diffrente du code dans les rgions non modifiables. Vous pouvez modifier uniquement le code dans lesrgions ou les paramtres modifiables, mais vous ne pouvez pas effectuer de saisie dans les rgions verrouilles. Le contenu modifiable est repr dans le code HTML par les commentaires Dreamweaver suivants : <! -- InstanceBeginEditable> et <! -- InstanceEndEditable -- > Tous les lments compris entre ces commentaires sont modifiables dans un document bas sur un modle. Le code source HTML d'une rgion modifiable peut se prsenter comme suit : <body bgcolor="#FFFFFF" leftmargin="0"> <table width="75%" border="1" cellspacing="0" cellpadding="0"> <tr bgcolor="#333366"> <td>Name</td> <td><font color="#FFFFFF">Address</font></td> <td><font color="#FFFFFF">Telephone Number</font></td> </tr>  <tr> <td>Enter name</td> <td>Enter Address</td> <td>Enter Telephone</td> </tr>  </table> </body> La couleur par dfaut du texte non modifiable est le gris. Vous pouvez associer des couleurs diffrentes aux rgions modifiables et aux rgions non modifiables l'aide de la bote de dialogue Prfrences. Voir aussi
508
Dfinition de prfrences de programmation pour les modles

Personnalisation des prfrences de coloration de code d'un modle Dfinition des prfrences de surbrillance pour des rgions de modle
Personnalisation des prfrences de coloration de code d'un modle
Haut de la page
Utilisez ces prfrences pour dfinir la couleur des caractres, la couleur de l'arrire-plan et les attributs de style du texte affich en mode Code. Vous pouvez dfinir votre propre modle de couleur afin de pouvoir distinguer facilement les rgions de modle lorsque vous affichez un document en mode Code. 1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2. Slectionnez la catgorie Coloration du code dans la liste de gauche. 3. Slectionnez HTML dans la liste Type de document, puis cliquez sur le bouton Modifier le modle de coloration. 4. Dans la liste Styles pour, slectionnez Balises de modle. 5. Dfinissez la couleur des caractres, la couleur de l'arrire-plan et les attributs de style du texte affich en mode Code. Pour ce faire, procdez de la manire suivante : Tapez dans la zone Couleur de texte la valeur hexadcimale de la couleur que vous souhaitez appliquer au texte slectionn, ou bien utilisez le slecteur de couleur pour slectionner cette couleur. Procdez de la mme manire pour le champ Couleur d'arrire-plan si vous souhaitez appliquer une couleur l'arrire-plan du texte slectionn, ou bien modifier la couleur courante. Si vous souhaitez appliquer un attribut de style au code slectionn, utilisez les boutons B (gras), I (italique) ou U (soulign) pour appliquer le format souhait. 6. Cliquez sur OK. Remarque : Si vous souhaitez effectuer des modifications globales, vous pouvez modifier le fichier source dans lequel vos prfrences sont enregistres. Sous Windows XP, ce fichier se trouve dans C:\Documents and Settings\%nom d'utilisateur%\Application Data\Adobe\Dreamweaver 9\Configuration\CodeColoring\Colors.xml. Sous Windows Vista, ce fichier se trouve dans C:\Utilisateurs\%nom d'utilisateur%\Application Data\Adobe\Dreamweaver 9\Configuration\CodeColoring\Colors.xml.
Dfinition des prfrences de surbrillance pour des rgions de modle
Haut de la page
Les prfrences de surbrillance Dreamweaver permettent de personnaliser les couleurs de surbrillance appliques aux cadres entourant les rgions modifiables et les rgions verrouilles d'un modle en mode Cration. La couleur de surbrillance des rgions modifiables est utilise dans le modle, mais aussi dans les documents bass sur ce modle.
Modification des couleurs de surbrillance de modle

1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2. Slectionnez la catgorie Surbrillance dans la liste de gauche. 3. Cliquez dans la case de couleur Rgions modifiables, Rgions modifiables imbriques ou Rgions verrouilles, puis slectionnez une couleur de surbrillance l'aide de la pipette (ou tapez la valeur hexadcimale correspondant la couleur de surbrillance dans la zone). Pour plus d'informations sur l'utilisation du slecteur de couleur, consultez la section Utilisation du slecteur de couleur. 4. (Facultatif) Rptez cette opration pour les autres types de rgion de modle, autant de fois que ncessaire. 5. Cochez la case Afficher pour activer l'affichage des couleurs dans la fentre de document ou dcochez-la pour dsactiver l'affichage. Remarque : La case de couleur Rgions modifiables imbriques ne s'accompagne pas de l'option Afficher : l'affichage des rgions imbriques est en effet contrl par l'option Rgions modifiables. 6. Cliquez sur OK.
Affichage des couleurs de surbrillance dans la fentre de document

Choisissez Affichage > Assistances visuelles > Elments invisibles. Les couleurs de surbrillance apparaissent dans la fentre de document uniquement lorsque l'option Affichage > Assistances visuelles > Elments invisibles est active et que les options appropries sont actives dans les prfrences de surbrillance. Remarque : Si des lments invisibles apparaissent, mais pas les couleurs de surbrillance, choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh), puis slectionnez la catgorie Surbrillance. Vrifiez que l'option Afficher est active prs de la couleur de surbrillance approprie. Vrifiez galement que la couleur souhaite est contraste par rapport la couleur d'arrire-plan de votre page.
509
Voir aussi
510
Syntaxe des modles

Rgles gnrales de syntaxe Balises de modle Balises d'instance Vrification de la syntaxe du modle
Rgles gnrales de syntaxe
Haut de la page
Dreamweaver fait appel des balises de commentaire HTML pour dfinir des rgions dans les modles et dans les documents bass sur un modle, de telle faon que les documents bass sur un modle restent des fichiers HTML valides. Lorsque vous insrez un objet de modle, des balises de modle sont insres dans le code. Les rgles de syntaxe gnrale sont les suivantes : L o il y a un espace, vous pouvez en ajouter autant que vous voulez (sous la forme d'espaces, de tabulations, de sauts de ligne). L'espace blanc est obligatoire, sauf au tout dbut ou la toute fin d'un commentaire. Les attributs peuvent tre saisis dans n'importe quel ordre. Par exemple, dans le cas de TemplateParam, vous pouvez spcifier le type avant le nom. Les noms des commentaires et des attributs sont sensibles la casse. Tous les attributs doivent tre entre guillemets. Il est possible d'utiliser des guillemets simples ou doubles.
Balises de modle
Dreamweaver utilise les balises de modle suivantes : <!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-TemplateBeginEditable name="..." --> TemplateEndEditable --> TemplateParam name="..." type="..." value="..." --> TemplateBeginRepeat name="..." --> TemplateEndRepeat --> TemplateBeginIf cond="..." --> TemplateEndIf --> TemplateBeginPassthroughIf cond="..." --> TemplateEndPassthroughIf --> TemplateBeginMultipleIf --> TemplateEndMultipleIf --> TemplateBeginPassthroughMultipleIf --> TemplateEndPassthroughMultipleIf --> TemplateBeginIfClause cond="..." --> TemplateEndIfClause --> TemplateBeginPassthroughIfClause cond="..." --> TemplateEndPassthroughIfClause --> TemplateExpr expr="..." --> (equivalent to @@...@@) TemplatePassthroughExpr expr="..." --> TemplateInfo codeOutsideHTMLIsLocked="..." -->
Haut de la page
Balises d'instance
Dreamweaver utilise les balises d'instance suivantes : <!-<!-<!-<!-<!-<!-InstanceBegin template="..." codeOutsideHTMLIsLocked="..." --> InstanceEnd --> InstanceBeginEditable name="..." --> InstanceEndEditable --> InstanceParam name="..." type="..." value="..." passthrough="..." --> InstanceBeginRepeat name="..." -->
511
Haut de la page
  
Vrification de la syntaxe du modle
Haut de la page
Dreamweaver vrifie la syntaxe du modle lorsque vous l'enregistrez, mais vous pouvez la vrifier manuellement avant d'enregistrer le modle. Par exemple, si vous ajoutez un paramtre ou une expression de modle en mode Code, vous pouvez vrifier que le code suit la syntaxe correcte. 1. Ouvrez le document que vous souhaitez vrifier dans la fentre de document. 2. Choisissez Modifier > Modles > Vrifier la syntaxe du modle. Un message d'erreur s'affiche lorsque cette syntaxe est incorrecte. Le message dcrit l'erreur et indique la ligne du code l'origine de cette erreur. Voir aussi
512
Utilisation de rgions facultatives dans des modles

A propos des rgions facultatives d'un modle Insertion d'une rgion facultative Dfinition de valeurs pour une rgion facultative
A propos des rgions facultatives d'un modle
Haut de la page
Une rgion facultative est une rgion de modle que les utilisateurs peuvent programmer pour qu'elle s'affiche ou reste masque dans les documents bass sur ce modle. Utilisez une rgion facultative si vous souhaitez dfinir les conditions suivant lesquelles certains lments d'un document doivent s'afficher. Lorsque vous insrez une rgion facultative, vous pouvez associer des valeurs spcifiques un paramtre de modle ou bien dfinir des instructions conditionnelles (instructions If...else) pour des rgions de modle. Vous pouvez utiliser des oprateurs simples (true/false) ou bien dfinir des instructions conditionnelles et des expressions plus complexes. Vous pouvez modifier la rgion facultative ultrieurement si ncessaire. Suivant les conditions dfinies, l'utilisateur du modle peut modifier les paramtres dans les documents qu'il cre partir du modle et dcider si la rgion facultative doit s'afficher ou non. Vous pouvez lier plusieurs rgions facultatives un paramtre nomm. Dans les documents bass sur un modle, les rgions lies entre elles forment un groupe qui s'affiche ou reste masqu. Vous pouvez par exemple associer un article une image de remise (par exemple : Liquidation totale ! ) et le texte du prix de vente.
Insertion d'une rgion facultative
Haut de la page
Une rgion facultative permet de dcider si des lments doivent s'afficher ou tre masqus dans les documents bass sur un modle. Il existe quatre types de rgions facultatives : Les rgions facultatives non modifiables, qui permettent l'utilisateur du modle d'afficher ou de masquer des rgions spcialement marques sans lui permettre d'en modifier le contenu. L'onglet d'une rgion facultative est prcd du mot if dans un modle. Suivant la condition dfinie dans le modle, l'utilisateur du modle peut dcider si la rgion doit apparatre dans les pages qu'il cre. Les rgions facultatives modifiables, qui permettent l'utilisateur du modle de dcider si la rgion doit tre affiche ou masque et qui permettent aux utilisateurs d'en modifier le contenu. Par exemple, si la rgion facultative comprend une image ou du texte, l'utilisateur du modle peut dcider si le contenu doit s'afficher et peut y apporter des modifications si ncessaire. Une rgion modifiable est contrle par une instruction conditionnelle.
Insertion d'une rgion facultative non modifiable

1. Dans la fentre de document, slectionnez l'lment que vous souhaitez dfinir comme rgion facultative. 2. Effectuez l'une des oprations suivantes : Choisissez Insertion > Objets de modle > Rgion facultative. Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur le contenu slectionn, puis choisissez Modles > Nouvelle rgion facultative. Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Modles, puis choisissez Rgion facultative dans le menu. 3. Tapez un nom pour la rgion facultative, puis cliquez sur l'onglet Avanc si vous souhaitez dfinir des valeurs pour la rgion facultative, puis cliquez sur OK.
Insertion d'une rgion facultative modifiable

1. Dans la fentre de document, placez le point d'insertion l o vous voulez insrer la rgion facultative. Il est impossible d'envelopper une slection pour crer une rgion facultative modifiable. Insrez la rgion puis insrez le contenu dans la rgion. 2. Effectuez l'une des oprations suivantes : Choisissez Insertion > Objets de modle > Rgion facultative modifiable. Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Modles, puis choisissez Rgion modifiable facultative dans le menu.
513
3. Tapez un nom pour la rgion facultative, puis cliquez sur l'onglet Avanc si vous souhaitez dfinir des valeurs pour la rgion facultative, puis cliquez sur OK.
Dfinition de valeurs pour une rgion facultative
Haut de la page
Il est possible de modifier les paramtres d'une rgion facultative insre dans un modle. Par exemple, vous pouvez indiquer si le paramtre par dfaut du contenu est d'tre affich ou non, de lier un paramtre une rgion facultative existante ou de modifier une expression de modle. Crez des paramtres de modle et dfinissez des instructions conditionnelles (instructions If...else) pour les rgions de modle. Vous pouvez utiliser des oprateurs simples (true/false) ou bien dfinir des instructions conditionnelles et des expressions plus complexes. Les options de l'onglet Avanc vous permettent de lier plusieurs rgions facultatives un paramtre nomm. Dans les documents bass sur un modle, les rgions lies entre elles forment un groupe qui s'affiche ou reste masqu. Vous pouvez par exemple associer un article une image de remise (par exemple : Liquidation totale ! ) et le texte du prix de vente. Vous pouvez galement utiliser l'onglet Avanc pour rdiger une expression de modle permettant de calculer une valeur lie la rgion facultative et d'afficher ou de masquer cette rgion selon la valeur obtenue. 1. Dans la fentre Document, procdez de l'une des manires suivantes : En mode Cration, cliquez sur l'onglet correspondant la rgion facultative que vous souhaitez modifier. En mode Cration, placez le point d'insertion dans la rgion du modle, puis, dans le slecteur de balises situ en bas de la fentre de document, slectionnez la balise de modle <mmtemplate:if>. En mode Code, cliquez sur la balise de commentaire de la rgion que vous souhaitez modifier. 2. Dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur le bouton Modifier. 3. Dans l'onglet Base, tapez un nom pour le paramtre dans la zone Nom. 4. Slectionnez Afficher par dfaut si vous souhaitez que la rgion slectionne s'affiche dans le document. Dsactivez-la pour dfinir la valeur par dfaut sur false. Remarque : Pour attribuer une autre valeur au paramtre, recherchez le paramtre dans la section du document en mode Code et modifiez la valeur. 5. (Facultatif) Cliquez sur l'onglet Avanc, puis dfinissez les options suivantes : Si vous voulez lier des paramtres de rgions facultatives, cliquez sur l'onglet Avanc, slectionnez Utiliser le paramtre, puis choisissez dans le menu droulant le paramtre auquel vous voulez lier le contenu slectionn. Si vous voulez rdiger une expression de modle afin de contrler l'affichage d'une rgion facultative, cliquez sur l'onglet Avanc, slectionnez Saisir une expression, puis tapez l'expression dans la zone. Remarque : Dreamweaver insre automatiquement des guillemets doubles avant et aprs le texte saisi. 6. Cliquez sur OK. Lorsque vous utilisez l'objet de modle Rgion facultative, Dreamweaver insre des commentaires de modle dans le code. Un paramtre de modle est dfini dans la section head, comme dans l'exemple suivant :  Du code semblable celui prsent ci-dessous s'affiche l'emplacement de la rgion facultative :  <p><img src="/images/airfare_on.gif" width="85" height="22"> </p>  Vous pouvez accder aux paramtres de modle et les modifier dans le document bas sur ce modle. Voir aussi
514
Applications Web et formulaires

Activation de PHP et d'Apache dans Leopard David Powers (1er janvier 2011) didacticiel
515

Configuration d'un serveur d'valuation A propos de l'URL Web du serveur d'valuation Si vous envisagez de crer des pages dynamiques, Dreamweaver doit disposer d'un serveur d'valuation, de faon pouvoir gnrer et afficher du contenu dynamique pendant votre travail. Ce serveur d'valuation peut se trouver sur votre ordinateur local, un serveur de dveloppement, un serveur intermdiaire ou un serveur de production. Vous trouverez une explication dtaille de l'utilit d'un serveur d'valuation dans l'article de David Powers du centre de dveloppeurs Dreamweaver. Configuration d'un serveur d'valuation local dans Dreamweaver CS5 .

En haut
2. Cliquez sur Nouveau pour crer un nouveau site, ou choisissez un site Dreamweaver existant puis cliquez sur l'icne de modification. 3. Dans la bote de dialogue Configuration du site, slectionnez la catgorie Serveurs, puis effectuez l'une des oprations suivantes : Cliquez sur le bouton Ajouter nouveau serveur pour ajouter un nouveau serveur. Slectionnez un serveur existant, puis cliquez sur le bouton Modifier serveur existant. 4. Dfinissez les options de base requises, puis cliquez sur le bouton Avanc. Remarque : Vous devez entrer une URL Web dans l'cran Base lorsque vous spcifiez un serveur d'valuation. Pour plus d'informations, consultez la section suivante. 5. Sous Serveur d'valuation, slectionnez le modle de serveur utiliser pour votre application Web. Remarque : Depuis la version CS5, Dreamweaver n'installe plus de comportements de serveur ASP.NET, ASP JavaScript ou JSP. (Vous pouvez ractiver les comportements de serveur dconseills manuellement si vous le souhaitez, mais n'oubliez pas que Dreamweaver ne les prend officiellement plus en charge.) Toutefois, si vous travaillez sur des pages ASP.NET, ASP JavaScript ou JSP, Dreamweaver continuera prendre en charge le mode En direct, la coloration de code et les conseils de code pour ces pages. Pour que ces fonctionnalits soient oprationnelles, il n'est pas ncessaire de slectionner ASP.NET, ASP JavaScript ou JSP dans la bote de dialogue Dfinition du site. 6. Cliquez sur Enregistrer pour fermer l'cran Avanc. Ensuite, dans la catgorie Serveurs, spcifiez le serveur que vous venez d'ajouter ou de modifier comme serveur d'valuation.
A propos de l'URL Web pour le serveur d'valuation
En haut
Vous devez dfinir une URL Web pour que Dreamweaver puisse employer un serveur d'valuation pour afficher des donnes et se connecter aux bases de donnes pendant votre travail. Dreamweaver utilise la connexion en cours de cration pour vous fournir des informations utiles au sujet de la base de donnes, comme le nom des tables de la base de donnes et le nom des colonnes de ces tables. L'URL Web d'un serveur d'valuation est constitue du nom de domaine et du nom d'un sous-rpertoire ou d'un rpertoire virtuel du rpertoire de base de votre site Web. Remarque : Bien que cette terminologie, utilise dans Microsoft IIS, puisse diffrer d'un serveur l'autre, les mmes concepts s'appliquent la plupart des serveurs Web. Rpertoire de base Dossier qui, sur le serveur, est mapp sur le nom de domaine de votre site. Supposons que le dossier que vous souhaitez utiliser pour traiter des pages dynamiques est c:\sites\company\, et que ce dossier est votre rpertoire de base (c'est--dire que ce dossier est mapp sur le nom de domaine de votre site, par exemple www.mystartup.com). Dans ce cas, le prfixe 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 rpertoire de base, ajoutez ce sousdossier l'URL. Supposons que votre rpertoire de base est c:\sites\company\, que le nom de domaine de votre site est www.mystartup.com et que le dossier utiliser pour traiter les pages dynamiques est c:\sites\company\inventory. Entrez l'URL Web suivante : http://www.mystartup.com/inventory/ Si le dossier utiliser pour traiter les pages dynamiques n'est pas votre rpertoire de base ni l'un de ses sous-rpertoires, vous devez crer un
516
rpertoire virtuel. Rpertoire virtuel Dossier qui ne se trouve pas physiquement dans le rpertoire de base du serveur, mme s'il apparat dans l'URL. Pour crer un rpertoire virtuel, spcifiez un alias reprsentant le chemin du dossier dans l'URL. Supposons que votre rpertoire de base soit c:\sites\company et votre dossier de traitement d:\apps\inventory, et que vous ayez dfini pour ce dossier l'alias warehouse. Entrez l'URL Web suivante : http://www.mystartup.com/warehouse/ Localhost Dsigne le rpertoire de base dans vos URL o le client (gnralement un navigateur, mais Dreamweaver dans le cas prsent) tourne sur le mme systme que votre serveur Web. Supposons que Dreamweaver tourne sur le mme systme Windows que le serveur Web. Votre rpertoire de base est c:\sites\company et vous avez dfini un rpertoire virtuel nomm warehouse pour dsigner le dossier utiliser pour traiter les pages dynamiques. Les URL Web suivantes doivent tre entres pour les serveurs Web slectionns : Serveur Web ColdFusion MX 7 IIS Apache (Windows) Jakarta Tomcat (Windows) URL Web http://localhost:8500/warehouse/ http://localhost/warehouse/ http://localhost:80/warehouse/ http://localhost:8080/warehouse/
Remarque : Par dfaut, le serveur Web ColdFusion MX 7 s'excute sur le port 8500, le serveur Web Apache sur le port 80 et le serveur Web Jakarta Tomcat sur le port 8080. Le rpertoire de base des utilisateurs excutant le serveur Web Apache sur Macintosh est le suivant : Users/MonNomd'Utilisateur/Sites (MonNomd'Utilisateur correspond votre nom d'utilisateur Macintosh). L'installation de Mac OS 10.1 ou version suprieure entrane la dfinition automatique d'un alias intitul ~MonNomd'Utilisateur. Par consquent, votre URL Web par dfaut dans Dreamweaver est le suivant : http://localhost/~MonNomd'Utilisateur/ Si le dossier que vous souhaitez utiliser pour le traitement des pages dynamiques correspond Users:MonNomd'Utilisateur:Sites:inventory, l'URL Web est la suivante : http://localhost/~MonNomd'Utilisateur/inventory/
517
Application de comportements JavaScript intgrs

Utilisation des comportements intgrs Application du comportement Appel JavaScript Application du comportement Changer la proprit Application du comportement Vrifier le navigateur Application du comportement Vrifier le plug-in Application du comportement Contrler Shockwave ou SWF Application du comportement Tirer l'lment PA Collecte d'informations sur l'lment PA dplaable Application du comportement Atteindre l'URL Application du comportement Menu de reroutage Application du comportement Menu de reroutage Aller Application du comportement Ouvrir la fentre Navigateur Application du comportement Lire le son Application du comportement Message contextuel Application du comportement Prcharger les images Application du comportement Dfinir image barre de navigation Application du comportement Texte d'un cadre Application du comportement Texte du conteneur Application du comportement Dfinir le texte de la barre d'tat Application du comportement Texte d'un champ de texte Application du comportement Afficher-Masquer les lments Application du comportement Afficher le menu contextuel Ajout, suppression et rorganisation d'lments de menu contextuel Mise en forme d'un menu contextuel Positionnement d'un menu contextuel dans un document Modification d'un menu contextuel Application du comportement Permuter une image Application du comportement Valider le formulaire
Utilisation des comportements intgrs
Haut de la page
Les comportements inclus dans Dreamweaver ont t conus pour fonctionner dans les navigateurs modernes. Les comportements chouent dans les navigateurs plus anciens, sans que l'utilisateur en soit inform. Remarque : Les actions Dreamweaver ont t rdiges avec soin afin de fonctionner avec le plus grand nombre possible de navigateurs. Si vous supprimez manuellement le code d'une action Dreamweaver ou si vous le remplacez par votre propre code, vous risquez de perdre la compatibilit inter-navigateurs. Bien que les actions Dreamweaver aient t rdiges pour augmenter la compatibilit inter-navigateurs, certains navigateurs ne prennent pas du tout en charge JavaScript et de nombreuses personnes dsactivent JavaScript sur leur navigateur lorsqu'ils explorent la Toile. Pour optimiser les rsultats inter-plates-formes, fournissez d'autres interfaces contenues dans des balises <noscript> afin que votre site reste accessible aux personnes qui n'utilisent pas JavaScript.
Application du comportement Appel JavaScript
Haut de la page
Le comportement Appel JavaScript excute une fonction ou une ligne de code JavaScript personnalise lorsqu'un vnement se produit (vous pouvez rdiger le script vous-mme, ou utiliser le code fourni gratuitement dans le cadre de plusieurs bibliothques de JavaScript sur Internet). 1. Slectionnez un objet et choisissez Appel JavaScript dans le menu Ajouter un comportement du panneau Comportements. 2. Tapez le code JavaScript excuter ou le nom de la fonction. Par exemple, pour crer 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, hGoBack()). 3. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Changer la proprit
Haut de la page
518
Utilisez le comportement Changer la proprit pour modifier la valeur d'une des proprits d'un objet (par exemple, la couleur d'arrire-plan d'une balise div ou l'action d'un formulaire). Remarque : N'utilisez ce comportement que si vous tes expert en HTML et en JavaScript. 1. Slectionnez un objet et choisissez Changer la proprit dans le menu Ajouter un comportement du panneau Comportements. 2. Dans le menu Type d'lment, slectionnez un type d'lment pour afficher tous les lments nomms de ce type. 3. Slectionnez un lment dans le menu ID d'lment. 4. Choisissez une proprit dans le menu Proprit ou tapez le nom de la proprit dans la zone de texte. 5. Entrez la nouvelle valeur pour la nouvelle proprit dans la zone Nouvelle valeur. 6. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Vrifier le navigateur

Ce comportement a t abandonn depuis Dreamweaver CS5.
Haut de la page
Application du comportement Vrifier le plug-in
Haut de la page
Utilisez le comportement Vrifier le plug-in pour envoyer les visiteurs sur des pages diffrentes selon que le plug-in spcifi est install ou non. Par exemple, vous pouvez rerouter les visiteurs sur une page s'ils possdent Shockwave, et sur une autre dans le cas contraire. Remarque : Il est impossible de dtecter des plug-ins spcifiques dans Microsoft Internet Explorer (IE) l'aide de JavaScript. Toutefois, si vous slectionnez les plug-ins Flash ou Director, le code VBScript appropri sera automatiquement ajout votre page pour les dtecter dans Internet Explorer sous Windows. Il est impossible de dtecter les plug-ins dans Internet Explorer sur Mac OS. 1. Slectionnez un objet et choisissez Vrifier le plug-in dans le menu Ajouter un comportement du panneau Comportements. 2. Slectionnez un plug-in dans le menu Plug-in, ou cliquez sur Entre et tapez le nom exact du plug-in dans la zone de texte adjacente. Vous devez utiliser le nom exact du plug-in, tel qu'il apparat en gras sur la page A propos des plug-ins dans Netscape Navigator (Dans Windows, choisissez la commande Aide > A propos des plug-ins dans le navigateur. Dans Mac OS, choisissez A propos des plug-ins dans le menu Pomme). 3. Dans la zone de texte Si trouv, aller l'URL, spcifiez l'URL destine aux utilisateurs qui disposent du plug-in. Si vous indiquez une URL distante, vous devez faire prcder l'adresse www du prfixe http://. Si vous ne renseignez pas la zone, les visiteurs resteront dans la mme page. 4. Dans la zone de texte Sinon, aller l'URL, indiquez une autre URL pour les visiteurs qui ne disposent pas du plug-in. Si vous ne renseignez pas la zone, les visiteurs resteront dans la mme page. 5. Spcifiez la procdure suivre si la dtection de plug-in n'est pas possible. Par dfaut, lorsque la dtection est impossible, l'utilisateur est envoy l'URL indique dans la zone de texte Sinon. Pour que l'utilisateur soit envoy vers la premire URL (Si trouv), slectionnez l'option Toujours aller la premire URL si la dtection n'est pas possible. Lorsqu'elle est slectionne, cette option signifie que l'utilisateur possde a priori le plug-in, sauf si le navigateur indique explicitement que ce n'est pas le cas . En gnral, activez cette option si le contenu du plug-in est un lment essentiel de votre page ; dans le cas contraire, laissez-la dsactive. Remarque : Cette option ne concerne qu'Internet Explorer ; Netscape Navigator dtecte toujours les plug-ins. 6. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Contrler Shockwave ou SWF

Haut de la page
Application du comportement Tirer l'lment PA
Haut de la page
Le comportement Tirer l'lment PA permet au visiteur de faire glisser un lment positionnement absolu. Utilisez ce comportement pour crer des puzzles, des contrles de dplacement et autres lments mobiles de l'interface. Vous pouvez spcifier la direction vers laquelle l'utilisateur peut faire glisser l'lment PA (horizontalement, verticalement ou dans toutes les directions), une cible vers laquelle l'utilisateur doit faire glisser l'lment PA, si ce dernier doit tre aimant par la cible ou non lorsqu'il arrive moins d'un certain nombre de pixels de la cible, l'action dclencher lorsque l'lment PA touche la cible, etc. Etant donn que le comportement Tirer l'lment PA doit tre appel avant que le visiteur puisse faire glisser l'lment PA, vous devez l'associer l'objet body (avec l'vnementonLoad). 1. Choisissez Insertion > Objets mise en forme > Div PA ou cliquez sur le bouton Tracer un div pour un lment PA du panneau Insertion, puis dessinez un div PA dans la vue Cration de la fentre de document. 2. Cliquez sur <body> dans le slecteur de balises situ dans le coin infrieur gauche de la fentre de document. 3. Choisissez Tirer l'lment PA dans le menu Ajouter un comportement du panneau Comportements.
519
Si l'option Tirer l'lment PA n'est pas disponible, cela signifie probablement qu'un lment PA est slectionn. 4. Dans le menu droulant Elment PA, slectionnez l'lment PA. 5. Slectionnez soit Contraint, soit Libre dans le menu contextuel Mouvement. Les mouvements sans contrainte sont adapts aux puzzles et aux autres jeux base de glisser-dplacer. Pour les contrles de dplacement et les objets mobiles (tiroirs, rideaux et stores), choisissez un mouvement contraint. 6. Pour la restriction de mouvement, indiquez les valeurs de dplacement admises (en pixels) dans les zones de texte Haut, Bas, Gauche et Droite. Ces valeurs sont relatives la position de dpart de l'lment PA. Pour restreindre les dplacements l'intrieur d'une zone rectangulaire, indiquez des valeurs positives dans les quatre zones de texte. Pour permettre uniquement un mouvement vertical, indiquez des valeurs positives pour Haut et Bas et 0 pour Gauche et Droite. Pour permettre uniquement un mouvement horizontal, indiquez des valeurs positives pour Gauche et Droite et 0 pour Haut et Bas. 7. Indiquez les coordonnes (exprimes en pixels) de la cible de dpt dans les zones de texte Gauche et Haut. La cible de dpt est le point sur lequel vous voulez que l'utilisateur dpose l'lment PA. Un lment PA est considr comme ayant atteint la cible de dpt lorsque ses coordonnes d'origine (en haut gauche) correspondent aux valeurs indiques dans les zones de texte Gauche et Haut. Ces coordonnes sont relatives l'angle suprieur gauche de la fentre du navigateur. Cliquez sur Obtenir la position courante pour remplir automatiquement les zones de texte avec les coordonnes actuelles de l'lment PA. 8. Entrez une valeur (exprime en pixels) dans la zone de texte Aligner si dans pour dterminer la distance minimale laquelle le visiteur doit approcher de la cible pour que l'lment PA se place automatiquement sur celle-ci. Les valeurs importantes permettent l'utilisateur de trouver plus facilement la cible de dpt. 9. Pour des puzzles simples et des dfilements d'images, vous pouvez vous en tenir l. Pour dfinir la poigne de dplacement de l'lment PA, suivre le mouvement de l'lment PA pendant qu'il est dplac et dclencher une action lorsqu'il est dpos, cliquez sur l'onglet Avanc. 10. Pour spcifier que l'utilisateur doit cliquer dans une zone particulire de l'lment PA pour pouvoir le dplacer, slectionnez Zone dans l'lment dans le menu Poigne de dplacement, puis indiquez les coordonnes de l'origine (angle suprieur gauche) de la poigne de dplacement, ainsi que la largeur et la hauteur de celle-ci. Cette option est utile lorsque l'image insre l'intrieur de l'lment PA contient un symbole de dplacement, par exemple une barre de titre ou une poigne de tiroir. N'activez pas cette option si vous voulez que l'utilisateur soit libre de cliquer n'importe o dans l'lment PA pour le dplacer. 11. Choisissez, parmi les options de la zone En dplaant, celles que vous dsirez utiliser : Activez l'option Placer l'lment au premier plan si l'lment PA doit tre amen au niveau le plus haut de l'ordre de superposition lors de son dplacement. Si vous activez cette option, utilisez le menu droulant qui apparat pour indiquer si l'lment PA doit tre laiss au niveau de visibilit le plus lev ou si sa position d'origine dans l'ordre de superposition doit tre rtablie. Tapez un code JavaScript ou un nom de fonction (par exemple, monitorAPelement()) dans la zone de texte Appel JavaScript pour que ce code ou cette fonction soit excut en boucle pendant le dplacement de l'lment PA. Par exemple, vous pouvez crire une fonction pour surveiller les coordonnes de l'lment PA et afficher des indications, telles que Tu brles ou Tu t'loignes de la cible , dans une zone de texte. 12. Indiquez un code JavaScript ou un nom de fonction (par exemple, evaluateAPelementPos()) dans la deuxime zone de texte Appel JavaScript si vous voulez que le code ou la fonction soit excut(e) lorsque l'lment PA est dpos. Activez l'option Uniquement si align si le code JavaScript indiqu ne doit tre excut que si l'lment PA a atteint la cible de dpt. 13. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Collecte d'informations sur l'lment PA dplaable
Haut de la page
Lorsque vous associez le comportement Tirer l'lment PA un objet, Dreamweaver insre la fonction MM_dragLayer() dans la section d'en-tte (head) de votre document. (La fonction conserve l'ancienne convention d'attribution de nom pour les lments PA (anciennement, calques) de faon ce que les calques crs dans les versions prcdentes de Dreamweaver restent modifiable.) Cette fonction enregistre l'lment PA comme dplaable et dfinit trois proprits pour chaque lment PA dplaable, MM_LEFTRIGHT, MM_UPDOWN et MM_SNAPPED, que vous pouvez utiliser dans vos propres fonctions JavaScript pour dterminer les positions horizontale et verticale de l'lment PA et s'il a atteint la cible de dpt. Remarque : Les informations fournies ici sont destines uniquement aux programmeurs JavaScript expriments. Par exemple, la fonction suivante affiche la valeur de la proprit MM_UPDOWN (la position verticale actuelle de l'lment PA) dans un champ de formulaire appel curPosField. Les champs de formulaires servent afficher des informations pouvant tre continuellement mises jour, parce qu'ils sont dynamiques. Ainsi, vous pouvez modifier leur contenu aprs le chargement de la page. function getPos(layerId){ var layerRef = document.getElementById(layerId); var curVertPos = layerRef.MM_UPDOWN;
520
document.tracking.curPosField.value = curVertPos; } Au lieu d'afficher la valeur des proprits MM_UPDOWN ou MM_LEFTRIGHT dans un champ de formulaire, vous pouvez utiliser ces valeurs de diffrentes manires. Par exemple, vous pouvez crire une fonction qui affiche un message dans ce champ selon la distance qui reste parcourir jusqu' la cible, ou appeler une autre fonction pour afficher ou masquer un lment PA selon la valeur de cette distance. Il est particulirement utile de tester la proprit MM_SNAPPED lorsque vous disposez, sur une page, de plusieurs lments PA qui doivent tous atteindre leur cible pour que l'utilisateur puisse passer la page ou la tche suivante. Par exemple, vous pouvez crire une fonction qui compte le nombre d'lments PA ayant la valeur MM_SNAPPED dfinie sur true et l'appeler chaque fois qu'un lment PA est dpos. Lorsque le nombre d'lments PA arrivs sur leur cible atteint le nombre dsir, vous pouvez envoyer l'utilisateur la page suivante ou afficher un message de flicitations.
Application du comportement Atteindre l'URL
Haut de la page
Le comportement Atteindre l'URL ouvre une nouvelle page dans la fentre en cours ou dans le cadre indiqu. Ce comportement est utile pour modifier d'un seul clic le contenu de deux cadres ou plus 1. Slectionnez un objet et choisissez Atteindre l'URL dans le menu Ajouter un comportement du panneau Comportements. 2. Choisissez une destination pour l'URL dans la liste Ouvrir dans. La liste Ouvrir dans numre automatiquement les noms de tous les cadres qui se trouvent dans le jeu de cadres actuel, ainsi que la fentre principale. S'il n'y a pas de cadres, cette dernire est la seule option. Remarque : Ne donnez pas vos cadres les noms top, blank, self ou parent, car cela pourrait produire des rsultats inattendus. En effet, certains navigateurs peuvent confondre ces noms avec les mots rservs utiliss dans le champ Cible. 3. Cliquez sur Parcourir pour slectionner un document ouvrir ou tapez le nom et le chemin d'accs au fichier recherch dans la zone de texte URL. 4. Rptez les tapes 2 et 3 pour ouvrir d'autres documents dans d'autres cadres. 5. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Menu de reroutage
Haut de la page
Lorsque vous crez un menu de reroutage en utilisant Insertion > Formulaire > Menu de reroutage, Dreamweaver cre un objet de menu et lui associe le comportement Menu de reroutage (ou Menu de reroutage Aller). En principe, il n'est pas ncessaire d'associer manuellement le comportement Menu de reroutage un objet. Vous pouvez modifier un menu de reroutage existant de deux manires diffrentes : Vous pouvez modifier et rorganiser les lments du menu, modifier les fichiers rerouter et la fentre dans laquelle s'ouvrent ces fichiers, en double-cliquant sur un comportement Menu de reroutage existant dans le panneau Comportements. Vous pouvez modifier les lments du menu comme vous modifieriez les lments de n'importe quel menu, en slectionnant le menu et en utilisant le bouton Valeurs de la liste dans l'inspecteur Proprits. 1. Crez un objet Menu de reroutage s'il n'en existe pas dj dans votre document. 2. Slectionnez l'objet et choisissez Menu de reroutage dans le menu Ajouter un comportement du panneau Comportements. 3. Effectuez les modifications souhaites dans la bote de dialogue Menu de reroutage, puis cliquez sur OK.
Application du comportement Menu de reroutage Aller
Haut de la page
Le comportement Menu de reroutage Aller est troitement associ l'action Menu de reroutage ; il vous permet d'associer un bouton Aller avec un menu de reroutage (pour utiliser ce comportement, vous devez crer au pralable un menu de reroutage dans le document). Un clic sur le bouton Aller ouvre le lien actuellement slectionn 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 lment de ce dernier provoque en gnral le chargement d'une nouvelle URL sans aucune intervention supplmentaire. Toutefois, si l'utilisateur choisit l'lment qui est dj slectionn dans le menu de reroutage, le reroutage ne se produira pas. En gnral cela n'a pas d'importance, mais si le menu de reroutage apparat dans une image et que les lments du menu assurent la liaison avec des pages dans d'autres images, un bouton Aller est souvent utile, pour permettre aux utilisateurs de choisir nouveau un lment dj slectionn dans le menu de reroutage. Remarque : Lorsque vous utilisez un bouton Aller associ un menu de reroutage, le bouton Aller devient le seul mcanisme permettant l'utilisateur d'accder l'URL associe la slection dans le menu. La slection d'un lment de menu dans le menu de reroutage n'a plus pour effet de rediriger l'utilisateur automatiquement vers une autre page ou un autre cadre. 1. Slectionnez un objet qui sera utilis comme bouton Aller (en gnral une image) et choisissez Menu de reroutage Aller dans le menu Ajouter un comportement du panneau Comportements. 2. Dans le menu Choisissez un menu de reroutage, slectionnez un menu que le bouton Aller activera et cliquez sur OK.
521
Application du comportement Ouvrir la fentre Navigateur
Haut de la page
Utilisez l'action Ouvrir la fentre Navigateur pour ouvrir une page dans une nouvelle fentre. Vous pouvez spcifier les proprits de la nouvelle fentre, 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 fentre individuelle lorsque l'utilisateur clique sur l'image rduite ; avec ce comportement, vous pouvez adapter la fentre la taille exacte de l'image. Si vous ne spcifiez aucun attribut pour la fentre, elle s'ouvrira avec la taille et les attributs de la fentre partir de laquelle elle a t lance. Choisir des attributs pour la fentre dsactive automatiquement tous ceux qui ne sont pas explicitement activs. Par exemple, si vous ne dfinissez aucun attribut pour la fentre, elle peut s'ouvrir en 1024 x 768 pixels et comporter une barre de navigation (affichant les boutons Prcdente, Suivante, Dmarrage et Actualiser), une barre d'adresse (indiquant l'URL), une barre d'tat (en bas, affichant les messages d'tat) et une barre de menus (affichant les menus Fichier, Edition, Affichage et d'autres menus). Si vous dfinissez explicitement une largeur de 640 et une hauteur de 480 pixels, sans aucun autre attribut, la fentre s'ouvrira en 640 x 480 pixels, sans aucune barre d'outils. 1. Slectionnez un objet et choisissez Ouvrir la fentre Navigateur dans le menu Ajouter un comportement du panneau Comportements. 2. Tapez l'URL afficher ou cliquez sur Parcourir pour slectionner un fichier. 3. Dfinissez les options pour la largeur et la hauteur de la fentre (en pixels) et pour l'incorporation de diffrentes barres d'outils, barres de dfilement, poignes de redimensionnement, etc. Donnez un nom la fentre (n'utilisez pas d'espaces ni de caractres spciaux) si vous souhaitez qu'elle soit la cible de liens ou qu'elle soit contrle en JavaScript. 4. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Lire le son

Haut de la page
Application du comportement Message contextuel
Haut de la page
Le comportement Message contextuel fait apparatre un message d'alerte JavaScript, avec le texte que vous avez spcifi. Comme les alertes JavaScript ne disposent que d'un seul bouton (OK), utilisez ce comportement pour informer l'utilisateur plutt que pour lui proposer un choix. Vous pouvez incorporer au texte des appels de fonction, proprits, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades ({}). Pour afficher une accolade, faites-la prcder d'une barre oblique inverse (\{). Exemple : The URL for this page is {window.location}, and today is {new Date()}. Remarque : Le navigateur contrle l'aspect de l'alerte. Si vous dsirez avoir davantage de contrle sur l'apparence, pensez utiliser le comportement Ouvrir la fentre Navigateur. 1. Slectionnez un objet et choisissez Message contextuel dans le menu Ajouter un comportement du panneau Comportements. 2. Tapez votre message dans la zone de texte prvue cet effet. 3. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Prcharger les images
Haut de la page
Le comportement Prcharger les images raccourcit le dlai d'affichage en mettant en mmoire cache les images qui ne sont pas visibles lors du premier affichage de la page (par exemple, les images qui vont tre remplaces par des comportements ou des scripts). Remarque : Le comportement Permuter une image prcharge automatiquement toutes les images slectionnes lorsque vous choisissez l'option Prcharger les images dans la bote de dialogue Permuter une image ; il n'est donc pas ncessaire d'ajouter manuellement l'action Prcharger les images lorsque vous utilisez l'action Permuter une image. 1. Slectionnez un objet et choisissez Prcharger les images dans le menu Ajouter un comportement du panneau Comportements. 2. Cliquez sur Parcourir pour slectionner un fichier d'image ou tapez le chemin d'accs et le nom du fichier d'une image dans la zone de texte Fichier source des images. 3. Cliquez sur le bouton plus (+) en haut de la bote de dialogue pour ajouter l'image la liste Prcharger les images. 4. Rptez les tapes 2 et 3 pour les autres images que vous dsirez prcharger dans la page en cours. 5. Pour supprimer une image de la liste Prcharger les images, slectionnez-la et cliquez sur le bouton () (signe moins). 6. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Dfinir image barre de navigation

522
Haut de la page
Application du comportement Texte d'un cadre
Haut de la page
Le comportement Texte d'un cadre vous permet de dfinir de faon dynamique le texte d'un cadre, en remplaant le contenu et le formatage d'un cadre par le contenu indiqu. Ce contenu peut tre n'importe quel code source HTML valide. Ce comportement permet d'afficher les informations de faon dynamique. Bien que le comportement Texte d'un cadre permette de remplacer le formatage d'un cadre, vous pouvez activer l'option Prserver Couleur d'arrire-plan pour conserver les attributs actuels pour l'arrire-plan de la page et la couleur du texte. Vous pouvez incorporer au texte des appels de fonction, proprits, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades ({}). Pour afficher une accolade, faites-la prcder d'une barre oblique inverse (\{). Exemple : The URL for this page is {window.location}, and today is {new Date()}. 1. Slectionnez un objet et choisissez Texte > Texte du cadre dans le menu Ajouter un comportement du panneau Comportements. 2. Dans la bote de dialogue qui s'affiche, slectionnez le cadre cible dans le menu Cadre. 3. Cliquez sur le bouton Reprendre HTML courant pour copier les contenus actuels de la section bodydu cadre cible. 4. Entrez un message dans la zone de texte Nouveau HTML. 5. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Texte du conteneur
Haut de la page
Le comportement Texte du conteneur remplace le contenu et le formatage d'un contenu existant (c'est--dire, tout lment pouvant contenir du texte ou d'autres lments) d'une page par le contenu indiqu. Ce contenu peut tre n'importe quel code source valide en HTML. Vous pouvez incorporer au texte des appels de fonction, proprits, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades ({}). Pour afficher une accolade, faites-la prcder d'une barre oblique inverse (\{). Exemple : The URL for this page is {window.location}, and today is {new Date()}. 1. Slectionnez un objet et choisissez Texte > Texte du conteneur dans le menu Ajouter un comportement du panneau Comportements. 2. Dans la bote de dialogue qui s'affiche, slectionnez l'lment cible dans le menu Conteneur. 3. Entrez le nouveau texte ou le nouveau code HTML dans la zone de texte Nouveau HTML. 4. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Dfinir le texte de la barre d'tat
Haut de la page
Le comportement Dfinir le texte de la barre d'tat affiche un message dans la barre d'tat, dans la partie infrieure gauche de la fentre du navigateur. Par exemple, vous pouvez utiliser ce comportement pour dcrire la destination d'un lien dans la barre d'tat, au lieu d'afficher l'URL associe Cependant, il arrive frquemment que les utilisateurs ne tiennent pas compte des messages de la barre d'tat (certains navigateurs ne prennent pas en charge la dfinition du texte de la barre d'tat). Si votre message est important, pensez l'afficher sous la forme d'un message contextuel ou comme texte d'un lment PA. Remarque : Si vous utilisez le comportement Dfinir le texte de la barre d'tat dans Dreamweaver, le texte de la barre d'tat du navigateur ne va pas ncessairement changer du fait que certains navigateurs ncessitent des rglages spciaux lors de la modification du texte de la barre d'tat. Par exemple, dans Firefox, vous devez modifier une option Avance qui permet JavaScript modifier le texte de la barre d'tat. Pour plus de dtails, reportez-vous la documentation de votre navigateur. Vous pouvez incorporer au texte des appels de fonction, proprits, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades ({}). Pour afficher une accolade, faites-la prcder d'une barre oblique inverse (\{). Exemple : The URL for this page is {window.location}, and today is {new Date()}. 1. Slectionnez un objet et choisissez Texte > Texte de la barre d'tat dans le menu Ajouter un comportement du panneau Comportements. 2. Dans la bote de dialogue Dfinir le texte de la barre d'tat, tapez un message dans la zone de texte Message. Utilisez un message concis. Le navigateur tronquera le message s'il est trop long pour la barre d'tat. 3. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
523
Application du comportement Texte d'un champ de texte

Le comportement Texte d'un champ de texte remplace le contenu d'un champ de texte de formulaire par le contenu indiqu.
Haut de la page
Vous pouvez incorporer au texte des appels de fonction, proprits, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades ({}). Pour afficher une accolade, faites-la prcder d'une barre oblique inverse (\{). Exemple : The URL for this page is {window.location}, and today is {new Date()}.
Cration d'un champ de texte nomm

1. Slectionnez Insertion > Formulaire > Champ de texte. Si Dreamweaver vous invite ajouter une balise de formulaire, cliquez sur Oui. 2. Dans l'inspecteur Proprits, tapez le nom du champ de texte. Veillez utiliser un nom unique dans cette page (n'utilisez pas le mme nom pour plusieurs lments appartenant la mme page, mme s'ils se trouvent dans des formulaires diffrents).
Application de l'action Texte d'un champ de texte

1. Slectionnez un champ de texte et choisissez Texte > Texte d'un champ de texte dans le menu Ajouter un comportement du panneau Comportements. 2. Slectionnez le champ de texte cible dans le menu Champ de texte et entrez votre nouveau texte. 3. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Afficher-Masquer les lments
Haut de la page
Le comportement Afficher-Masquer les lments affiche, masque ou rtablit la visibilit par dfaut d'un ou plusieurs lments de page. Ce comportement permet d'afficher des informations en fonction des interactions de l'utilisateur avec la page. Par exemple, lorsque le pointeur passe sur l'image d'une plante, vous pouvez afficher un lment de page comportant des dtails sur le climat idal de la plante, l'ensoleillement dont elle a besoin, sa taille adulte, etc. Le comportement ne fait qu'afficher ou masquer l'lment pertinent, il ne supprime pas rellement l'lment du flux de la page lorsqu'il est masqu. 1. Slectionnez un objet et choisissez Afficher-Masquer les lments dans le menu Ajouter un comportement du panneau Comportements. Si l'option Afficher-Masquer les lments n'est pas disponible, cela signifie probablement qu'un lment PA est slectionn. Etant donn que les lments PA n'acceptent pas les vnements dans la version 4.0 des deux navigateurs, vous devez choisir un objet diffrent, tel que la balise <body> ou un lien (<a>). 2. Dans la liste Elments, slectionnez l'lment que vous souhaitez afficher ou masquer et cliquez sur Afficher, Masquer ou Restaurer (cette dernire option restaure la visibilit par dfaut). 3. Rptez l'tape 2 pour les autres lments dont vous voulez modifier la visibilit. Vous pouvez modifier la visibilit de plusieurs lments avec un seul comportement. 4. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Afficher le menu contextuel

Haut de la page
Ajout, suppression et rorganisation d'lments de menu contextuel

Haut de la page
Mise en forme d'un menu contextuel

Haut de la page
Positionnement d'un menu contextuel dans un document

Haut de la page
524
Modification d'un menu contextuel

Haut de la page
Application du comportement Permuter une image
Haut de la page
Cette action remplace une image par une autre, en modifiant l'attribut src de la balise <img>. Utilisez ce comportement pour crer des substitutions de boutons et autres effets sur des images (y compris la substitution de plusieurs images la fois) L'insertion d'une image survole ajoute automatiquement votre page un comportement Permuter une image. Remarque : Etant donn que seul l'attribut src est affect par ce comportement, l'image de substitution doit en principe avoir les mmes dimensions (hauteur et largeur) que l'original. Faute de quoi, l'image intervertie apparatrait dforme (compacte ou largie) de faon s'adapter aux dimensions de l'image d'origine. Il existe galement le comportement Restaurer l'image intervertie qui restaure la dernire interversion d'images son tat antrieur. Il est automatiquement ajout lorsque vous associez le comportement Permuter une image un objet ; en principe, si vous avez laiss cette option active en associant le comportement Permuter une image, vous n'avez pas besoin de l'utiliser manuellement. 1. Choisissez Insertion > Image ou cliquez sur le bouton Image du panneau Insertion pour insrer une image. 2. Dans l'inspecteur Proprits, indiquez un nom pour l'image dans la zone de texte situe l'extrme gauche. Il n'est pas ncessaire de nommer les images ; elles sont nommes automatiquement lorsque vous associez le comportement un objet. Toutefois, il vous sera plus facile de distinguer les images proposes dans la bote de dialogue Permuter une image si vous avez vousmme attribu un nom ces images. 3. Rptez les tapes 1 et 2 si vous souhaitez insrer des images supplmentaires. 4. Slectionnez un objet (en gnral, l'image que vous voulez remplacer) et choisissez l'option Permuter une image dans le menu Ajouter un comportement du panneau Comportements. 5. Slectionnez l'image dont vous voulez modifier la source dans la liste Images. 6. Cliquez sur Parcourir pour slectionner le nouveau fichier d'image ou indiquez son chemin d'accs et son nom de fichier dans la zone de texte Dfinir la source . 7. Rptez les tapes 5 et 6 si vous dsirez ajouter d'autres images modifier. Utilisez la mme action Permuter l'image pour toutes les images que vous voulez modifier simultanment ; dans le cas contraire, l'action correspondante Restaurer l'image intervertie ne les restaurerait pas toutes. 8. Slectionnez l'option Prcharger les images pour mettre en mmoire cache les nouvelles images au moment du chargement de la page. Cela vite le dlai de tlchargement des images lorsqu'un vnement dclenche leur apparition. 9. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Valider le formulaire
Haut de la page
Le comportement Valider le formulaire teste le contenu des champs de texte indiqus pour vrifier que l'utilisateur a entr le type de donnes correct. Associez ce comportement des champs de texte individuels l'aide de l'vnement onBlur pour valider ces champs au fur et mesure que l'utilisateur remplit le formulaire ou associez-le au formulaire l'aide de l'vnement onSubmit pour valuer divers champs simultanment lorsque l'utilisateur clique sur le bouton d'envoi. L'association de ce comportement un formulaire empche l'envoi de formulaires contenant des donnes non valides. 1. Pour insrer un formulaire, choisissez Insertion > Formulaire ou cliquez sur le bouton Formulaire du panneau Insertion. 2. Pour insrer un champ de texte, choisissez Insertion > Formulaire > Champ de texte ou cliquez sur le bouton Champ de texte du panneau Insertion. Rptez cette tape pour insrer plusieurs champs de texte. 3. Choisissez une mthode de validation : Pour valider les champs individuellement au fur et mesure que l'utilisateur remplit le formulaire, slectionnez un champ de texte et choisissez Fentre > Comportements. Pour valider plusieurs champs lorsque l'utilisateur envoie le formulaire, cliquez sur la balise <form> dans le slecteur de balises situ dans le coin infrieur gauche de la fentre de document, puis choisissez Fentre > Comportements. 4. Slectionnez Valider le formulaire dans le menu Ajouter un comportement. 5. Effectuez l'une des oprations suivantes : Si vous validez des champs individuellement, slectionnez dans la liste Champs le mme champ que celui que vous avez slectionn dans la fentre de document. Si vous validez plusieurs champs la fois, slectionnez un champ de texte dans la liste Champs. 6. Activez l'option Obligatoire si le champ doit obligatoirement contenir des donnes.
525
7. Slectionnez l'une des options d'acceptation suivantes : Tout Vrifie qu'un champ obligatoire contient des donnes ; ces dernires peuvent tre de n'importe quel type. Adresse lectronique Vrifie que le champ contient un symbole @. Nombre Vrifie que le champ contient uniquement des valeurs numriques. Nombre de Vrifie que le champ contient une valeur numrique comprise dans la plage indique. 8. Si vous validez plusieurs champs, rptez les tapes 6 et 7 pour tout champ supplmentaire valider. 9. Cliquez sur OK. Si vous validez plusieurs champs lorsque l'utilisateur envoie le formulaire, l'vnement onSubmit apparat automatiquement dans le menu droulant Evnements. 10. Si vous validez des champs individuellement, vrifiez que l'vnement par dfaut est bien onBlur ou onChange. Si ce n'est pas le cas, slectionnez l'un de ces vnements. Ces deux vnements dclenchent le comportement Valider le formulaire ds que l'utilisateur sort du champ concern. La diffrence entre ces deux vnements est que onBlur est toujours dclench, que l'utilisateur ait saisi ou non du texte dans le champ, alors que onChange n'est dclench que si l'utilisateur a modifi le contenu du champ. L'vnement onBlur est prfrable si le champ est obligatoire. Voir aussi
526
Ajout de contenu dynamique dans les pages

A propos de l'ajout de contenu dynamique A propos du texte dynamique Cration de texte dynamique Cration d'images dynamiques Cration d'attributs HTML dynamiques Cration de paramtres d'objet (ActiveX, Flash, etc.) dynamiques
A propos de l'ajout de contenu dynamique
Haut de la page
Aprs avoir dfini une ou plusieurs sources de contenu dynamique, vous pouvez les utiliser pour ajouter un contenu dynamique la page. Les sources de contenu peuvent tre une colonne dans un jeu d'enregistrements, une valeur envoye par un formulaire HTML, la valeur d'un objet de serveur, etc. Dans Dreamweaver, vous pouvez placer du contenu dynamique quasiment n'importe o dans une page Web ou dans son code source HTML. Il est possible de placer le contenu dynamique au niveau du point d'insertion, de remplacer une chane de texte ou d'insrer le contenu en tant qu'attribut HTML. Un contenu dynamique peut, par exemple, dfinir l'attribut src d'une image ou l'attribut value d'un champ de formulaire. Vous pouvez ajouter du contenu dynamique une page en slectionnant une source de contenu dans le panneau Liaisons. Dreamweaver insre alors dans le code source de la page un script ct serveur indiquant au serveur de transfrer les donnes de la source de contenu slectionne vers le code source HTML de la page lorsqu'un navigateur appelle la page. Il existe souvent diffrentes mthodes pour rendre dynamique un lment d'une page. Dans le cas d'une image, par exemple, vous pouvez utiliser le panneau Liaisons, l'inspecteur Proprits ou la commande Image du menu Insertion. Par dfaut, une page HTML ne peut afficher qu'un enregistrement la fois. Pour afficher les autres enregistrements du jeu, ajoutez un lien afin d'explorer les enregistrements un un ou crez une rgion rpte pour afficher plusieurs enregistrements sur une seule page.
A propos du texte dynamique
Haut de la page
Le texte dynamique adopte le formatage 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 slectionn qu'il remplace. Vous pouvez galement ajouter ou modifier le format du texte d'un contenu dynamique l'aide des outils de formatage de texte de Dreamweaver. Vous pouvez galement appliquer un format de donnes un texte dynamique. Par exemple, si vos donnes sont des dates, vous pouvez dterminer un format spcifique tel que 04/17/00 pour les visiteurs amricains ou 17/04/00 pour les visiteurs franais
Cration de texte dynamique

Vous pouvez substituer un texte dynamique un texte existant ou le placer un point d'insertion donn de la page.
Haut de la page
Ajout de texte dynamique

1. En mode Cration, slectionnez du texte sur la page ou cliquez l'endroit o insrer le texte dynamique. 2. Slectionnez une source de contenu dans le panneau Liaisons (Fentre > Liaisons). Si vous slectionnez un jeu d'enregistrements, indiquez la colonne de votre choix dans le jeu d'enregistrements. Cette source doit contenir du texte brut (texte ASCII), ce qui inclut HTML. Si aucune source de contenu n'apparat dans la liste ou si aucune des sources disponibles ne correspond vos besoins, cliquez sur le bouton Plus (+) pour dfinir une nouvelle source de contenu 3. (Facultatif) Slectionnez un format de donnes pour le texte. 4. Cliquez sur Insertion ou faites glisser la source de contenu sur la page. Un espace rserv pour contenu dynamique s'affiche. (tout texte slectionn dans la page est remplac par l'espace rserv). La syntaxe de l'espace rserv pour le contenu d'un jeu d'enregistrements est {RecordsetName.ColumnName}, o Recordset est le nom du jeu d'enregistrements et ColumnName le nom de la colonne choisie dans ce jeu. Il arrive que la longueur de l'espace rserv d'un texte dynamique dforme la mise en page dans la fentre de document. Dans ce cas, utilisez des accolades vides pour reprsenter les espaces rservs, comme l'explique la section suivante.
Affichage d'espaces rservs pour le texte dynamique

527
1. Choisissez Edition > Prfrences > Elments invisibles (Windows) ou Dreamweaver > Prfrences > Elments invisibles (Macintosh). 2. Dans le menu droulant Afficher le texte dynamique sous, choisissez { } et cliquez sur OK.
Cration d'images dynamiques
Haut de la page
Vous pouvez ajouter des images dynamiques votre page. Supposons que vous conceviez une page qui affiche les articles d'une vente de charit. Chaque page doit contenir un texte descriptif, ainsi qu'une photo de l'article. La mise en forme gnrale de la page doit rester la mme pour chaque article, mais la photo (et le texte) peuvent changer. 1. Ouvrez la page en mode Cration (Affichage > Cration) et placez le point d'insertion l'endroit o l'image doit apparatre sur la page. 2. Choisissez Insertion > Image. La bote de dialogue Slectionnez la source de l'image s'affiche. 3. Cliquez sur l'option Sources de donnes (Windows) ou sur le bouton Source de donnes (Macintosh). La liste des sources de contenu s'affiche. 4. Slectionnez une source de contenu dans la liste, puis cliquez sur OK. La source de donnes doit tre un jeu d'enregistrements qui contient les chemins d'accs de vos fichiers d'image. En fonction de la structure de fichiers de votre site, ces chemins peuvent tre absolus, relatifs au document ou relatifs la racine. Remarque : A l'heure actuelle, Dreamweaver ne prend pas en charge les images binaires stockes dans une base de donnes. Si aucun jeu d'enregistrements n'apparat dans la liste ou si aucun des jeux disponibles ne correspond vos besoins, dfinissez un nouveau jeu.
Cration d'attributs HTML dynamiques
Haut de la page
Vous pouvez modifier l'apparence d'une page de manire dynamique en liant des attributs HTML aux donnes. Par exemple, modifiez l'image d'arrire-plan d'un tableau en liant l'attribut background de ce tableau au champ d'un jeu d'enregistrements. Vous pouvez lier des attributs HTML l'aide du panneau Liaisons ou de l'inspecteur Proprits.
Cration d'attributs HTML dynamiques avec le panneau Liaisons

1. Ouvrez le panneau Liaisons (Fentre > Liaisons). 2. Assurez-vous qu'il contient la source de donnes utiliser. Cette source de contenu doit contenir les donnes appropries pour l'attribut HTML lier. Si aucune source de contenu n'apparat dans la liste ou si aucune des sources disponibles ne correspond vos besoins, cliquez sur le bouton Plus (+) pour dfinir une nouvelle source de donnes. 3. En mode Cration, slectionnez un objet HTML. Par exemple, pour slectionner un tableau HTML, cliquez dedans, puis cliquez sur la balise <table> du slecteur de balises qui figure en bas gauche dans la fentre de document. 4. Dans la liste du panneau Liaisons, slectionnez une source de contenu. 5. Dans le champ Lier , slectionnez un attribut HTML dans le menu contextuel. 6. Cliquez sur Lier. Lors de la prochaine excution de la page sur le serveur d'applications, la valeur de la source de donnes sera affecte l'attribut HTML.
Ajout d'attributs HTML dynamiques avec l'inspecteur Proprits

1. En mode Cration, slectionnez un objet HTML, puis ouvrez l'inspecteur Proprits (Fentre > Proprits). Par exemple, pour slectionner un tableau HTML, cliquez dedans, puis cliquez sur la balise <table> du slecteur de balises qui figure en bas gauche dans la fentre de document. 2. La manire dont il faut lier une source de contenu dynamique l'attribut HTML dpend de l'endroit o ce dernier est situ. Si une icne de dossier est visible ct de l'attribut que vous souhaitez lier dans l'inspecteur Proprits, cliquez sur l'icne du dossier afin d'ouvrir une bote de dialogue de slection de fichier, puis activez l'option Sources de donnes pour afficher la liste des sources de donnes. Si aucune icne de dossier n'apparat ct de l'attribut que vous souhaitez lier, cliquez sur l'onglet Liste (onglet du bas) gauche de l'inspecteur. La liste de l'inspecteur Proprits s'affiche. Si l'attribut lier n'apparat pas dans ce mode, cliquez sur le bouton Plus (+), puis tapez le nom de l'attribut ou cliquez sur le petit bouton
528
flch et slectionnez l'attribut dans le menu droulant. 3. Pour rendre la valeur de l'attribut dynamique, cliquez sur l'attribut, puis sur l'icne reprsentant un clair ou sur l'icne de dossier situe la fin de la ligne de l'attribut. Si vous cliquez sur l'icne reprsentant un clair, une liste de sources de donnes s'affiche. Si vous avez cliqu sur l'icne de dossier, une bote de dialogue affiche une slection de fichiers. Cliquez sur l'option Sources de donnes pour afficher la liste des sources de contenu. 4. Slectionnez une source de contenu dans la liste et cliquez sur OK. Cette source de contenu doit comprendre les donnes appropries pour l'attribut HTML lier. Si aucune source de contenu n'apparat dans la liste ou si aucune des sources disponibles ne correspond vos besoins, dfinissez une nouvelle source. Lors de la prochaine excution de la page sur le serveur d'applications, la valeur de la source de donnes sera affecte l'attribut HTML.
Cration de paramtres d'objet (ActiveX, Flash, etc.) dynamiques
Haut de la page
Vous pouvez rendre dynamiques les paramtres des plug-ins et des applets Java, ainsi que les paramtres des objets ActiveX, Flash, Shockwave, Director et Generator. Assurez-vous au pralable que les champs de votre jeu d'enregistrements contiennent des donnes appropries pour les paramtres d'objet que vous voulez lier. 1. En mode Cration, slectionnez un objet sur la page et ouvrez l'inspecteur Proprits (Fentre > Proprits). 2. Cliquez sur le bouton Paramtres. 3. Si votre paramtre ne s'affiche pas dans la liste, cliquez sur le bouton Plus (+), puis saisissez son nom dans la colonne Paramtre. 4. Pour dterminer une valeur dynamique, cliquez sur la colonne Valeur du paramtre, puis sur l'icne reprsentant un clair. La liste des sources de donnes s'affiche. 5. Slectionnez une source de donnes dans la liste, puis cliquez sur OK. Cette source doit contenir des donnes appropries pour le paramtre d'objet que vous voulez lier. Si aucune source de donnes n'apparat dans la liste ou si aucune des sources disponibles ne correspond vos besoins, dfinissez une nouvelle source. Voir aussi
529
Cration de formulaires ColdFusion

A propos des formulaires ColdFusion Activation des amliorations ColdFusion Cration de formulaires ColdFusion Insertion de contrles de formulaire ColdFusion Insertion de champs de texte ColdFusion Insertion de champs masqus ColdFusion Insertion de zones de texte ColdFusion Insertion de boutons ColdFusion Insertion de cases cocher ColdFusion Insertion de boutons radio ColdFusion Insertion de zones de liste ColdFusion Insertion de champs d'image ColdFusion Insertion de champs de fichier ColdFusion Insertion de champs de date ColdFusion Modification de contrles de formulaire ColdFusion Validation des donnes de formulaire ColdFusion
A propos des formulaires ColdFusion
Haut de la page
Les formulaires ColdFusion fournissent plusieurs mcanismes intgrs permettant de valider les donnes de formulaire. Par exemple, vous pouvez vrifier si un utilisateur a entr une date valide. Certains contrles de formulaire comportent des fonctionnalits supplmentaires. Certaines d'entre elles n'ont pas de correspondant HTML et d'autres prennent directement en charge le remplissage dynamique du contrle partir de sources de donnes. Dreamweaver comporte de nombreuses amliorations facilitant la tche des dveloppeurs ColdFusion qui utilisent ColdFusion MX 7 ou version ultrieure comme serveur de dveloppement. Ces amliorations se prsentent sous la forme d'un plus grand nombre de boutons dans le panneau Insertion, d'lments de menu et d'inspecteurs Proprits qui permettent de crer rapidement des formulaires ColdFusion et d'en dfinir les proprits. Vous pouvez galement gnrer du code qui valide les informations fournies par les visiteurs du site. Par exemple, vous pouvez vrifier qu'une adresse lectronique saisie par un utilisateur contient bien un symbole @ (a commercial) ou qu'un champ de texte obligatoire a bien t renseign.
Activation des amliorations ColdFusion
Haut de la page
Certaines de ces amliorations ncessitent de dfinir un ordinateur excutant ColdFusion MX 7 ou une version ultrieure comme serveur d'valuation de Dreamweaver. Par exemple, les inspecteurs de proprits destins aux contrles de formulaires ne sont disponibles que si vous spcifiez le serveur d'valuation correct. Il n'est ncessaire de dfinir le serveur d'valuation que la premire fois. Dreamweaver dtecte ensuite automatiquement la version du serveur d'valuation et rend les amliorations disponibles si ColdFusion est dtect. 1. Si ce n'est dj fait, dfinissez un site Dreamweaver pour votre projet ColdFusion. 2. Choisissez Site > Grer les sites, slectionnez votre site dans la liste, puis cliquez sur Edition. 3. Slectionnez la catgorie Serveurs et choisissez un ordinateur excutant ColdFusion MX 7 ou une version ultrieure comme serveur d'valuation de votre site Dreamweaver. Veillez entrer une URL Web valide. 4. Ouvrez un document ColdFusion. Les changements de l'espace de travail de Dreamweaver ne sont visibles qu'aprs ouverture d'un document ColdFusion.
Cration de formulaires ColdFusion
Haut de la page
Vous pouvez utiliser dans Dreamweaver un plus grand nombre de boutons dans le panneau Insertion, d'lments de menu et d'inspecteurs Proprits pour crer rapidement des formulaires ColdFusion et dfinir leurs proprits. Remarque : Ces amliorations ne sont disponibles que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure. 1. Ouvrez une page ColdFusion et placez le point d'insertion l'endroit o vous souhaitez insrer le formulaire. 2. Choisissez Insertion > Objets ColdFusion > Formulaire > Formulaire, ou slectionnez la catgorie Formulaires du panneau Insertion et
530
cliquez sur l'icne Formulaire CF. Dreamweaver insre un formulaire ColdFusion vierge. Dans une page affiche en mode Cration, les formulaires sont indiqus par une bordure rouge en pointill. Si vous ne voyez pas la bordure, vrifiez que l'option Affichage > Assistances visuelles > Elments invisibles est active. 3. En veillant ce que le formulaire soit toujours slectionn, utilisez l'inspecteur Proprits pour dfinir les proprits de formulaire suivantes. Formulaire CF Dfinit le nom du formulaire. Action Permet d'indiquer le nom de la page ColdFusion traiter lorsque le formulaire est envoy. Mthode Permet d'indiquer la mthode utiliser pour envoyer les donnes du formulaire au serveur: POST Envoie les donnes l'aide de la mthode HTTP post, qui envoie les donnes au serveur dans un message spar. GET Envoie les donnes l'aide de la mthode HTTP get, qui place le contenu des champs du formulaire dans le corps de la chane de la requte d'URL. Cible Permet de modifier la valeur de l'attribut target de la balise cfform. Type de codage Prcise la mthode de codage utilise pour transmettre les donnes du formulaire. Remarque : Le type de codage n'a rien voir avec le codage des caractres. Cet attribut indique le type de contenu utilis pour envoyer le formulaire au serveur (lorsque la mthode post est utilise). S'il n'est pas spcifi, il prend par dfaut la valeur application/x-www-formurlencoded . Format Dtermine le type de formulaire crer : HTML Gnre un formulaire HTML et le transmet au client. Les contrles enfants cfgrid et cftree peuvent tre au format Flash ou applet. Flash Gnre un formulaire Flash et le transmet au client. Tous les contrles sont au format Flash. XML Gnre un formulaire XML XForms et place les rsultats dans une variable avec le nom du formulaire ColdFusion. Rien n'est envoy au client. Les contrles enfants cfgrid et cftree peuvent tre au format Flash ou applet. Style Permet d'indiquer un style pour le formulaire. Pour plus d'informations, consultez la documentation ColdFusion. Enveloppe Flash/XML Permet d'indiquer la couleur de halo pour donner un style au rsultat. Le thme dtermine la couleur utilise pour les lments activs et slectionns. Prserver les donnes Dtermine si les valeurs initiales des contrles doivent tre remplaces ou non par les nouvelles valeurs lorsque le formulaire s'autotransmet les donnes. Si cette option a la valeur Faux, les valeurs spcifies dans les attributs de la balise du contrle sont utilises. Si elle a la valeur Vrai, ce sont les valeurs saisies qui sont utilises. Source scripts Indique l'adresse URL (relative la racine du site) du fichier JavaScript qui contient le code ct client utilis par la balise et ses balises enfants. Cet attribut est utile si le fichier ne se trouve pas dans l'emplacement par dfaut. Cet attribut peut tre ncessaire dans certains environnements et configurations qui bloquent l'accs au dossier /CFIDE. L'emplacement par dfaut, qui peut tre modifi par l'administrateur ColdFusion, est /CFIDE/scripts/cfform.js. Archive Indique l'adresse URL des classes Java tlchargeables pour les contrles d'applet cfgrid, cfslider et cftree. Leur emplacement par dfaut est /CFIDE/classes/cfapplets.jar. Hauteur Indique la hauteur du formulaire. Largeur Indique la largeur du formulaire. Afficher l'diteur de balises pour cfform Permet de modifier les proprits qui n'apparaissent pas dans l'inspecteur Proprits. 4. Insrez des contrles de formulaire ColdFusion. Placez le point d'insertion l'endroit o vous souhaitez insrer le contrle de formulaire ColdFusion dans le formulaire, puis slectionnez le contrle voulu dans le menu Insertion (Insertion > Objets ColdFusion > Formulaire) ou dans la catgorie Formulaires du panneau Insertion. 5. Si ncessaire, dfinissez les proprits du contrle dans l'inspecteur Proprits. Avant de dfinir les proprits dans l'inspecteur Proprits, vrifiez que le contrle est slectionn en mode Cration. Pour plus d'informations sur les proprits, cliquez sur l'icne Aide de l'inspecteur Proprits. 6. Amliorez la mise en forme du formulaire ColdFusion. Si vous crez un formulaire HTML, vous pouvez utiliser des sauts de ligne, des sauts de paragraphes, du texte prformat ou des tableaux pour mettre en forme vos formulaires. Vous ne pouvez pas insrer un formulaire ColdFusion dans un autre formulaire ColdFusion (c'est-dire faire se chevaucher des balises), mais vous pouvez inclure plusieurs formulaires ColdFusion dans une mme page. Si vous crez un formulaire Flash, utilisez les styles CSS (feuilles de style en cascade ) pour le mettre en page. ColdFusion ignore les balises HTML du formulaire. N'oubliez pas de donner un libell avec un texte descriptif aux champs du formulaire ColdFusion, pour aider les utilisateurs. Par exemple,
531
crez un libell Indiquez votre nom pour le champ destin au nom de l'utilisateur.
Insertion de contrles de formulaire ColdFusion
Haut de la page
Le panneau Insertion et le menu Insrer permettent d'insrer rapidement des contrles dans un formulaire ColdFusion. Vous devez crer un formulaire ColdFusion vierge avant d'y insrer des contrles. Remarque : Ces amliorations ne sont disponibles que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure. 1. En mode Cration, placez le point d'insertion l'intrieur de la bordure du formulaire. 2. Slectionnez le contrle dans le menu Insertion (Insertion > Objets ColdFusion > Formulaire) ou dans la catgorie Formulaires du panneau Insertion. 3. Cliquez sur le contrle sur la page pour le slectionner, puis dfinissez ses proprits dans l'inspecteur Proprits. Pour plus d'informations sur les proprits de contrles spcifiques, consultez les rubriques consacres chacun d'eux.
Insertion de champs de texte ColdFusion
Haut de la page
Vous pouvez insrer visuellement dans votre formulaire un champ de texte ou de mot de passe ColdFusion, puis dfinir ses options. Remarque : Cette amlioration n'est disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure.
Insertion visuelle d'un champ de texte ColdFusion

1. En mode Cration, placez le point d'insertion l'intrieur de la bordure du formulaire. 2. Dans la catgorie Formulaire du panneau Insertion, cliquez sur l'icne Champ de texte CF, ou slectionnez Insertion > Objets ColdFusion > Formulaire > Champ de texte CF. Un champ de texte apparat dans le formulaire. 3. Slectionnez le champ de texte et dfinissez ses options dans l'inspecteur Proprits. 4. Pour attribuer une tiquette au champ de texte dans la page, cliquez en regard du champ de texte et tapez le texte souhait.
Insertion visuelle d'un champ de mot de passe

1. Rptez les tapes 1 et 2 de la procdure prcdente (insertion d'un champ de texte). 2. Slectionnez le champ de texte que vous venez d'insrer pour l'afficher dans l'inspecteur Proprits. 3. Dans l'inspecteur Proprits, slectionnez la valeur Mot de passe dans le menu droulant Mode texte.
Options des champs de texte (ColdFusion)

Pour dfinir les options d'un champ de texte ou de mot de passe ColdFusion, dfinissez les options suivantes dans l'inspecteur Proprits : CFtextfield (Ch. Texte CF) Dfinit l'attribut id de la balise <cfinput>. Valeur Permet d'indiquer le texte afficher dans ce champ lorsque la page s'ouvre dans un navigateur. Cette chane peut tre statique ou dynamique. Pour indiquer une valeur dynamique, cliquez sur l'icne reprsentant un clair ct de la zone Valeur, et slectionnez la colonne d'un jeu d'enregistrements dans la bote de dialogue Donnes dynamiques. Les jeux d'enregistrements de cette colonne fournissent les valeurs affiches dans le champ de texte lorsque le formulaire est affich dans un navigateur. Mode texte Permet de passer d'un champ de saisie de texte standard un champ de saisie de mot de passe, et inversement. L'attribut modifi par ce contrle est type. Lecture seule Permet de mettre le texte affich en lecture seule. Long. max. Indique le nombre maximum de caractres que peut contenir le champ. Masque Permet d'indiquer un masque de texte. Cette proprit permet de valider la saisie des utilisateurs Le format du masque est compos de caractres A, 9, X et ? . Remarque : L'attribut de masque est ignor pour la balise cfinput type="password". Valider Spcifie le type de validation du champ actuel. Valider Spcifie le moment de validation : onSubmit, onBlur ou onServer. Etiquette Permet d'indiquer un libell pour le champ de texte. Schma Permet d'indiquer un modle d'expression rgulire en JavaScript pour valider la saisie. Les barres obliques de dbut ou de fin sont ignores. Pour plus d'informations, consultez la documentation ColdFusion. Hauteur Permet d'indiquer la hauteur du contrle, en pixels. Largeur Permet d'indiquer la largeur du contrle, en pixels. Taille Permet d'indiquer la taille du contrle. Obligatoire Permet de prciser si le champ de texte doit contenir des donnes pour que le formulaire soit transmis au serveur.
532
Afficher l'diteur de balises Permet de modifier les proprits qui n'apparaissent pas dans l'inspecteur Proprits.
Haut de la page
Insertion de champs masqus ColdFusion
Vous pouvez insrer visuellement dans votre formulaire un champ masqu ColdFusion, puis dfinir ses proprits. Les champs masqus permettent de conserver et transmettre des informations qui ne sont pas saisies par l'utilisateur. Ces informations sont masques afin que l'utilisateur ne puisse pas les voir. Remarque : Cette amlioration n'est disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure. 1. En mode Cration, placez le point d'insertion l'intrieur de la bordure du formulaire. 2. Dans la catgorie Formulaire du panneau Insertion, cliquez sur l'icne Champ cach CF. Un marqueur apparat dans le formulaire ColdFusion. Si vous ne voyez pas le marqueur, choisissez Affichage > Assistances visuelles > Elments invisibles. 3. Slectionnez le champ masqu sur la page et dfinissez les options suivantes dans l'inspecteur Proprits : Cfhiddenfield (Champ masqu) Indique le nom unique du champ masqu. Valeur Permet d'indiquer la valeur du champ masqu. Cette chane peut tre statique ou dynamique. Pour indiquer une valeur dynamique, cliquez sur l'icne reprsentant un clair ct de la zone Valeur, et slectionnez la colonne d'un jeu d'enregistrements dans la bote de dialogue Donnes dynamiques. Les jeux d'enregistrements de cette colonne fournissent les valeurs affiches dans le champ de texte lorsque le formulaire est affich dans un navigateur. Valider Spcifie le type de validation du champ actuel. Valider Spcifie le moment de validation : onSubmit, onBlur ou onServer. Etiquette Permet d'indiquer un libell pour le contrle. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Schma Permet d'indiquer un modle d'expression rgulire en JavaScript pour valider la saisie. Les barres obliques de dbut ou de fin sont ignores. Pour plus d'informations, consultez la documentation ColdFusion. Hauteur Permet d'indiquer la hauteur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Largeur Permet d'indiquer la largeur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Taille Permet d'indiquer la taille du contrle. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Obligatoire Permet de prciser si le champ masqu doit contenir des donnes pour que le formulaire soit transmis au serveur. Afficher l'diteur de balises Permet de modifier les proprits qui n'apparaissent pas dans l'inspecteur Proprits.
Insertion de zones de texte ColdFusion
Haut de la page
Vous pouvez insrer visuellement dans votre formulaire une zone de texte ColdFusion, puis dfinir ses proprits. Une zone de texte est un lment de saisie compos de plusieurs lignes de texte. Remarque : Cette amlioration n'est disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure. 1. Placez le point d'insertion dans la bordure du formulaire. 2. Dans la catgorie Formulaire du panneau Insertion, cliquez sur l'icne Zone de texte CF. Une zone de texte apparat dans le formulaire ColdFusion. 3. Slectionnez la zone de texte sur la page et dfinissez les options suivantes dans l'inspecteur Proprits : Cftextarea (Zone de texte) Permet d'indiquer un nom unique pour le contrle. Largeur car. Indique le nombre de caractres par ligne. Nbre lignes Permet d'indiquer le nombre de lignes afficher dans la zone de texte. Wrap (Renvoi la ligne) Permet d'indiquer comment le texte saisi par les utilisateurs doit tre renvoy la ligne. Obligatoire Permet d'indiquer si la saisie de texte dans ce contrle est obligatoire (case coche) ou non (case non coche). Valeur initiale Permet d'indiquer le texte afficher dans la zone de texte lorsque la page s'ouvre dans un navigateur. Valider Spcifie le type de validation du champ actuel. Valider Spcifie le moment de validation : onSubmit, onBlur ou onServer. Etiquette Permet d'indiquer un libell pour le contrle. Style Permet d'indiquer un style pour le contrle. Pour plus d'informations, consultez la documentation ColdFusion. Hauteur Permet d'indiquer la hauteur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur ColdFusion.
533
Largeur Permet d'indiquer la largeur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Afficher l'diteur de balises Permet de modifier les proprits qui n'apparaissent pas dans l'inspecteur Proprits. 4. Pour attribuer une tiquette la zone de texte, cliquez en regard de la zone et tapez le texte souhait.
Insertion de boutons ColdFusion
Haut de la page
Vous pouvez insrer visuellement dans votre formulaire un bouton ColdFusion, puis dfinir ses proprits. Les boutons contrlent les diffrentes oprations du formulaire ColdFusion. Les boutons permettent d'envoyer les donnes du formulaire au serveur ou de rinitialiser le formulaire. Il s'agit en gnral des boutons Envoyer et Rinitialiser. Vous pouvez galement attribuer un bouton d'autres tches de traitement pralablement dfinies dans un script. Un bouton peut ainsi calculer le montant total des lments slectionns en fonction des valeurs que vous leur avez attribues. Remarque : Cette amlioration n'est disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure. 1. Placez le point d'insertion dans la bordure du formulaire ColdFusion. 2. Dans la catgorie Formulaire du panneau Insertion, cliquez sur l'icne Bouton CF. Un bouton apparat dans le formulaire ColdFusion. 3. Slectionnez le bouton sur la page et dfinissez les options suivantes dans l'inspecteur Proprits : Cfbutton (Zone de texte) Permet d'indiquer un nom unique pour le contrle. Action Permet d'indiquer le type de bouton crer. Afficher l'diteur de balises Permet de modifier les proprits qui n'apparaissent pas dans l'inspecteur Proprits. A l'excution, les autres proprits sont ignores par le serveur ColdFusion.
Insertion de cases cocher ColdFusion
Haut de la page
Vous pouvez insrer visuellement dans votre formulaire une case cocher ColdFusion, puis dfinir ses proprits. Utilisez des cases cocher pour permettre aux utilisateurs d'activer plusieurs options dans un groupe. Remarque : Cette amlioration n'est disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure. 1. Placez le point d'insertion dans la bordure du formulaire. 2. Dans la catgorie Formulaire du panneau Insertion, cliquez sur l'icne Case cocher CF. Une case cocher apparat dans le formulaire ColdFusion. 3. Slectionnez la case cocher sur la page et dfinissez les options suivantes dans l'inspecteur Proprits : Cfcheckbox (Zone de texte) Permet d'indiquer un nom unique pour le contrle. Valeur Permet d'indiquer la valeur renvoye par la case cocher si l'utilisateur l'active. Etat initial Permet d'indiquer si la case cocher est dj active lorsque la page s'ouvre dans un navigateur. Valider Spcifie le type de validation de la case cocher. Valider Spcifie le moment de validation de la case cocher : onSubmit, onBlur ou onServer. Etiquette Permet d'indiquer un libell pour la case cocher. Schma Permet d'indiquer un modle d'expression rgulire en JavaScript pour valider la saisie. Les barres obliques de dbut ou de fin sont ignores. Pour plus d'informations, consultez la documentation ColdFusion. Hauteur Permet d'indiquer la hauteur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Largeur Permet d'indiquer la largeur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Taille Permet d'indiquer la taille du contrle. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Obligatoire Permet de prciser si la case cocher doit tre coche pour que le formulaire soit transmis au serveur. Afficher l'diteur de balises Permet de modifier les proprits qui n'apparaissent pas dans l'inspecteur Proprits. 4. Pour attribuer une tiquette la case cocher, cliquez en regard de la case sur la page et tapez l'tiquette souhaite.
Insertion de boutons radio ColdFusion
Haut de la page
Vous pouvez insrer visuellement dans votre formulaire un bouton radio ColdFusion, puis dfinir ses proprits. Utilisez des boutons radio lorsque vous souhaitez que les utilisateurs ne slectionnent qu'une seule option dans un groupe. Elles sont gnralement utilises en groupe. Tous les boutons radio d'un mme groupe doivent porter le mme nom.
534
Remarque : Cette amlioration n'est disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure. 1. Placez le point d'insertion dans la bordure du formulaire. 2. Choisissez Insertion > Objets ColdFusion > Formulaire > Bouton radio. Un bouton radio apparat dans le formulaire ColdFusion. 3. Slectionnez le bouton radio sur la page et dfinissez les options suivantes dans l'inspecteur Proprits : Cfradiobutton (Zone de texte) Permet d'indiquer un nom unique pour le contrle. Valeur Permet d'indiquer la valeur renvoye par le bouton radio si l'utilisateur l'active. Etat initial Permet d'indiquer si le bouton radio est dj activ lorsque la page s'ouvre dans un navigateur. Valider Spcifie le type de validation du bouton radio. Valider Spcifie le moment de validation : onSubmit, onBlur ou onServer. Etiquette Permet d'indiquer un libell pour le bouton radio. Schma Permet d'indiquer un modle d'expression rgulire en JavaScript pour valider la saisie. Les barres obliques de dbut ou de fin sont ignores. Pour plus d'informations, consultez la documentation ColdFusion. Hauteur Permet d'indiquer la hauteur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Largeur Permet d'indiquer la largeur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Taille Permet d'indiquer la taille du contrle. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Obligatoire Permet de prciser si le bouton radio doit tre activ pour que le formulaire soit transmis au serveur. Afficher l'diteur de balises Permet de modifier les proprits qui n'apparaissent pas dans l'inspecteur Proprits. 4. Pour attribuer une tiquette au bouton radio, cliquez en regard du bouton et tapez le texte souhait.
Insertion de zones de liste ColdFusion
Haut de la page
Vous pouvez insrer visuellement dans votre formulaire une zone de liste ColdFusion, puis dfinir ses proprits. Une zone de liste permet un visiteur de slectionner un ou plusieurs lments dans une liste. Les zones de liste sont utiles lorsque vous disposez d'un espace rduit et devez afficher de nombreux lments. Elles s'avrent galement pratiques lorsque vous souhaitez contrler les valeurs renvoyes au serveur. A la diffrence des champs de texte, dans lesquels les utilisateurs peuvent taper ce qu'ils veulent, y compris des donnes non valides, c'est vous de dfinir les valeurs exactes renvoyes par un menu. Il est possible d'insrer deux types de zones de liste dans un formulaire : un menu qui se droule lorsque l'utilisateur clique dessus, ou un menu qui affiche une liste d'lments que vous pouvez faire dfiler et slectionner. Remarque : Cette amlioration n'est disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure. 1. Placez le point d'insertion dans la bordure du formulaire. 2. Dans la catgorie Formulaire du panneau Insertion, cliquez sur l'icne Slection CF. Une zone de liste apparat dans le formulaire ColdFusion. 3. Slectionnez la zone de liste sur la page et dfinissez les options suivantes dans l'inspecteur Proprits : Cfselect (Zone de texte) Permet d'indiquer un nom unique pour le contrle. Type Permet de choisir entre un menu droulant ou une liste. Si vous choisissez le type Liste, les options Hauteur liste et Autoriser la slection de plusieurs listes deviennent disponibles. Hauteur liste Permet d'indiquer le nombre de lignes afficher dans la liste. Cette proprit n'est disponible qu'avec le type Liste. Autoriser la slection de plusieurs listes Permet d'indiquer si l'utilisateur peut slectionner plusieurs options la fois dans la liste. Cette proprit n'est disponible qu'avec le type Liste. Modifier les valeurs Ouvre une bote de dialogue qui permet d'ajouter, modifier ou supprimer des options la zone de liste. Initialement slectionn Dfinit les lments slectionns par dfaut dans la liste. Si vous avez activ l'option Autoriser la slection de plusieurs listes, vous pouvez slectionner plusieurs options. Jeu d'enregistrements Permet d'indiquer le nom de la requte ColdFusion utiliser pour remplir la liste ou le menu. Afficher colonne Permet d'indiquer la colonne du jeu d'enregistrements qui doit fournir le libell de chaque lment de la liste. Cette proprit est utilise de concert avec la proprit Jeu d'enregistrements. Colonne valeurs Permet d'indiquer la colonne du jeu d'enregistrements qui doit fournir la valeur de chaque lment de la liste. Cette proprit est utilise de concert avec la proprit Jeu d'enregistrements. Etiquette Flash Permet d'indiquer un libell pour la zone de liste.
535
Hauteur Flash Permet d'indiquer la hauteur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Largeur Flash Permet d'indiquer la largeur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Message Permet d'indiquer le message afficher si la proprit Obligatoire est active et si l'utilisateur n'a pas effectu de slection avant de tenter d'envoyer le formulaire. Obligatoire Permet de prciser si un lment de menu doit tre slectionn pour que le formulaire soit transmis au serveur. Afficher l'diteur de balises Permet de modifier les proprits qui n'apparaissent pas dans l'inspecteur Proprits.
Insertion de champs d'image ColdFusion
Haut de la page
Vous pouvez insrer visuellement dans votre formulaire un champ d'image ColdFusion, puis dfinir ses options. Les champs d'image permettent de crer des boutons personnaliss. Remarque : Cette amlioration n'est disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure. 1. En mode Cration, placez le point d'insertion l'intrieur de la bordure du formulaire. 2. Dans la catgorie Formulaire du panneau Insertion, cliquez sur l'icne Champ d'image CF. Recherchez l'image insrer, puis cliquez sur OK. Vous pouvez aussi entrer directement le chemin d'accs du fichier image dans la zone Src. Remarque : Si le fichier d'image se trouve l'extrieur du dossier racine du site, il est prfrable de copier cette image dans le dossier racine. En effet, les images situes l'extrieur du dossier racine risquent d'tre inaccessible aprs publication du site. 3. Slectionnez le champ d'image sur la page et dfinissez les options suivantes dans l'inspecteur Proprits : Cfimagefield (Zone de texte) Permet d'indiquer un nom unique pour le contrle. Src Permet d'indiquer l'adresse URL de l'image insrer. Sec Permet d'indiquer un message qui apparatra lorsque l'image ne peut pas tre affiche. Alignement Permet d'indiquer l'alignement de l'image. Bordure Permet d'indiquer la largeur de la bordure de l'image. Modifier image Ouvre l'image dans votre logiciel de retouche d'images par dfaut. Pour dfinir votre logiciel de retouche d'images par dfaut, choisissez Edition > Prfrences > Types de fichiers/Editeurs. Si ce logiciel n'est pas dfini, le bouton Modifier l'image est sans effet. Valider Spcifie le type de validation du champ d'image. Valider Spcifie le moment de validation : onSubmit, onBlur ou onServer. Etiquette Permet d'indiquer un libell pour le bouton radio. Schma Permet d'indiquer un modle d'expression rgulire en JavaScript pour valider la saisie. Les barres obliques de dbut ou de fin sont ignores. Pour plus d'informations, consultez la documentation ColdFusion. Hauteur Permet d'indiquer la hauteur du contrle, en pixels. Largeur Permet d'indiquer la largeur du contrle, en pixels. Taille Permet d'indiquer la taille du contrle. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Obligatoire Permet de prciser si le contrle doit contenir des donnes pour que le formulaire soit transmis au serveur. Afficher l'diteur de balises Permet de modifier les proprits qui n'apparaissent pas dans l'inspecteur Proprits.
Insertion de champs de fichier ColdFusion
Haut de la page
Vous pouvez insrer visuellement dans votre formulaire un champ de fichier ColdFusion, puis dfinir ses proprits. Vous pouvez crer un champ de fichier pour permettre aux utilisateurs de slectionner un fichier sur leur ordinateur (tel qu'un document de traitement de texte ou un fichier graphique) et de le transfrer sur le serveur. Un champ de fichier ColdFusion est similaire un champ de texte, mais contient galement un bouton Parcourir. L'utilisateur peut soit saisir manuellement le chemin d'accs au fichier transfrer, soit cliquer sur le bouton Parcourir pour le rechercher et le slectionner. Les champs de fichier ncessitent l'utilisation de la mthode POST pour transmettre des fichiers depuis un navigateur vers le serveur. Le fichier est transfr l'adresse indique dans la zone de texte Action du formulaire. Avant d'utiliser le champ de fichier, vrifiez auprs de votre administrateur de serveur que le transfert anonyme de fichiers est autoris. Les champs de fichier ncessitent aussi que le codage du formulaire soit dfini comme multipart/form . Dreamweaver active automatiquement ce paramtre lorsque vous insrez un contrle de champ de fichier. Remarque : Cette amlioration n'est disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure. 1. En mode Cration, slectionnez le formulaire ColdFusion pour l'afficher dans l'inspecteur Proprits.
536
Pour slectionner rapidement le formulaire, cliquez n'importe o dans son cadre, puis cliquez sur la balise <cfform> dans le slecteur de balises figurant dans le coin infrieur de la fentre de document. 2. Dans l'inspecteur Proprits, dfinissez la mthode du formulaire comme POST . 3. Dans le menu droulant Enctype, slectionnez multipart/form-data. 4. Placez le point d'insertion l'intrieur de la bordure du formulaire, l'endroit o le champ de fichier doit apparatre. 5. Choisissez Insertion > Objets ColdFusion > Formulaire > Champ fichier. Un champ de fichier apparat dans le document. 6. Slectionnez le champ de fichier sur la page et dfinissez les proprits suivantes dans l'inspecteur Proprits : Cffilefield (Zone de texte) Permet d'indiquer un nom unique pour le contrle. Long. max. Indique le nombre maximum de caractres que peut contenir le chemin d'accs du fichier. Valider Spcifie le type de validation du champ actuel. Valider Spcifie le moment de validation : onSubmit, onBlur ou onServer. Etiquette Permet d'indiquer un libell pour le champ. Schma Permet d'indiquer un modle d'expression rgulire en JavaScript pour valider la saisie. Les barres obliques de dbut ou de fin sont ignores. Pour plus d'informations, consultez la documentation ColdFusion. Hauteur Permet d'indiquer la hauteur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Largeur Permet d'indiquer la largeur du contrle, en pixels. A l'excution, ce paramtre est ignor par le serveur ColdFusion. Taille Permet d'indiquer la taille du contrle. Obligatoire Permet de prciser si le champ de fichier doit contenir des donnes pour que le formulaire soit transmis au serveur. Afficher l'diteur de balises Permet de modifier les proprits qui n'apparaissent pas dans l'inspecteur Proprits.
Insertion de champs de date ColdFusion
Haut de la page
Vous ne pouvez pas insrer visuellement dans votre formulaire un champ de date ColdFusion, mais vous pouvez dfinir visuellement ses proprits. Un champ de date ColdFusion est un type spcial de champ de texte qui permet de slectionner une date dans un mini-calendrier afin de l'insrer dans le champ de texte. Remarque : Cette amlioration n'est disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure. 1. En mode Cration, slectionnez le formulaire ColdFusion pour l'afficher dans l'inspecteur Proprits. Pour slectionner rapidement le formulaire, cliquez n'importe o dans son cadre, puis cliquez sur la balise <cfform> dans le slecteur de balises figurant dans le coin infrieur de la fentre de document. 2. Dans l'inspecteur Proprits, dfinissez le format du formulaire comme Flash . Le contrle de champ de date ne peut apparatre que dans des formulaires ColdFusion en mode Flash. 3. Passez en mode d'affichage Code (Affichage > Code) et insrez la balise suivante en un point quelconque entre les balises CFForm d'ouverture et de fermeture : <cfinput name="datefield" type="datefield"> 4. Passez en mode Cration, slectionnez le champ de date sur la page, puis dfinissez les options suivantes dans l'inspecteur Proprits : Cfdatefield (Zone de texte) Permet d'indiquer un nom unique pour le contrle. Valeur Permet d'indiquer la date afficher dans ce champ lorsque la page s'ouvre dans un navigateur. Cette date peut tre statique ou dynamique. Pour indiquer une valeur dynamique, cliquez sur l'icne reprsentant un clair ct de la zone Valeur, et slectionnez la colonne d'un jeu d'enregistrements dans la bote de dialogue Donnes dynamiques. Les jeux d'enregistrements de cette colonne fournissent les valeurs affiches dans le champ de date lorsque le formulaire est affich dans un navigateur. Valider Spcifie le type de validation du champ actuel. Valider Spcifie le moment de validation : onSubmit, onBlur ou onServer. Etiquette Permet d'indiquer un libell pour le champ. Schma Permet d'indiquer un modle d'expression rgulire en JavaScript pour valider la saisie. Les barres obliques de dbut ou de fin sont ignores. Pour plus d'informations, consultez la documentation ColdFusion. Hauteur Permet d'indiquer la hauteur du contrle, en pixels. Largeur Permet d'indiquer la largeur du contrle, en pixels.
537
Taille Permet d'indiquer la taille du contrle. Obligatoire Permet de prciser si le champ de date doit contenir des donnes pour que le formulaire soit transmis au serveur. Afficher l'diteur de balises Permet de modifier les proprits qui n'apparaissent pas dans l'inspecteur Proprits.
Modification de contrles de formulaire ColdFusion
Haut de la page
Vous pouvez modifier visuellement les proprits des contrles de formulaires ColdFusion, que vous travailliez en mode Cration ou Code. Remarque : Cette amlioration n'est disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure. 1. En mode Cration, slectionnez le contrle de formulaire ; en mode Code, cliquez dans la balise du contrle concern. L'inspecteur Proprits affiche les proprits du contrle de formulaire. 2. Modifiez ces proprits dans l'inspecteur Proprits. Pour plus d'informations, cliquez sur l'icne Aide de l'inspecteur Proprits. 3. Pour dfinir d'autres proprits, cliquez sur le bouton Afficher l'diteur de balises dans l'inspecteur Proprits, et dfinissez les proprits dans l'diteur de balises qui s'affiche.
Validation des donnes de formulaire ColdFusion
Haut de la page
Dreamweaver permet de crer des formulaires ColdFusion permettant de vrifier dans le contenu des champs de texte spcifis que l'utilisateur a bien saisi le type de donnes appropri. Remarque : Cette amlioration n'est disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou une version ultrieure. 1. Crez un formulaire ColdFusion comprenant au moins un champ de saisie et un bouton Envoyer. Assurez-vous que chaque champ ColdFusion que vous souhaitez valider porte un nom unique. 2. Dans le formulaire, slectionnez le champ valider. 3. Dans l'inspecteur Proprits, indiquez comment le champ doit tre valid. La partie infrieure de chaque inspecteur Proprits contient des contrles qui permettent de dfinir une rgle de validation spcifique. Par exemple, vous pouvez spcifier qu'un champ de texte donn doit contenir un numro de tlphone. Pour ce faire, choisissez Tlphone dans le menu droulant Valeur de l'inspecteur Proprits. Vous pouvez aussi indiquer le moment de la validation dans le menu local Valider . Voir aussi Configuration d'un serveur d'valuation
538
Cration d'une page de suppression d'enregistrement

A propos des pages de suppression d'enregistrements Recherche de l'enregistrement supprimer Cration de liens vers une page de suppression Cration de la page de suppression Insertion de la logique permettant de supprimer l'enregistrement
A propos des pages de suppression d'enregistrements
Haut de la page
Votre application peut comporter un ensemble de pages permettant l'utilisateur de supprimer des enregistrements d'une base de donnes. L'ensemble de pages se compose normalement d'une page de recherche, d'une page de rsultats et d'une page de suppression. Ce type de page est gnralement une page d'informations dtailles fonctionnant en tandem avec une page de rsultats. Les pages de recherche et de rsultats permettent aux utilisateurs de rcuprer l'enregistrement et la page de suppression de le confirmer puis de le supprimer. Aprs avoir cr les pages de recherche et de rsultats, vous devez ajouter des liens la page de rsultats, de manire ouvrir la page de suppression, puis crer une page de suppression qui affiche les enregistrements et un bouton Envoyer.
Recherche de l'enregistrement supprimer
Haut de la page
Lorsqu'un utilisateur veut supprimer un enregistrement, il doit d'abord localiser celui-ci dans la base de donnes. Vous devez donc crer une page de recherche et de rsultats qui fonctionnera en tandem avec la page de suppression. L'utilisateur entre des critres de recherche dans la page de recherche et slectionne l'enregistrement dans la page de rsultats. Lorsque l'utilisateur clique sur l'enregistrement, la page de suppression s'ouvre et l'enregistrement s'affiche dans un formulaire HTML sur cette page.
Cration de liens vers une page de suppression
Haut de la page
Aprs avoir cr les pages de recherche et de rsultats, vous devez ajouter des liens la page de rsultats afin d'ouvrir la page de suppression. Vous devez ensuite modifier les liens de manire transmettre les ID des enregistrements que l'utilisateur veut supprimer. La page de suppression utilise cet ID pour rechercher l'enregistrement et l'afficher.
Cration manuelle de liens

1. Dans la page de rsultats, crez une colonne dans le tableau utilis pour afficher les enregistrements. Pour ce faire, cliquez l'intrieur de la dernire colonne du tableau et slectionnez Modifier > Tableau > Insrer des lignes ou des colonnes. 2. Activez l'option Colonnes et l'option Aprs la colonne courante, puis cliquez sur OK. Une colonne est ajoute au tableau. 3. Dans la colonne que vous venez de crer, entrez la chane Delete dans la ligne contenant les espaces rservs pour le contenu dynamique. Vous devez entrer la chane dans la rgion rpte onglets. Vous pouvez galement insrer une image comprenant un mot ou un symbole voquant une suppression. 4. Slectionnez la chane Delete afin de lui appliquer un lien. 5. Dans l'inspecteur Proprits, entrez le nom de la page de suppression dans la zone Lien. Vous pouvez entrer le nom de fichier de votre choix. Une fois que vous avez cliqu en dehors de la zone Lien, la chane Delete apparat lie dans le tableau. Si vous activez le mode En direct, vous pouvez observer que le lien s'applique au mme texte dans chaque ligne du tableau. 6. Slectionnez le lien de suppression dans la page de rsultats. 7. (ColdFusion) Dans la zone Lien de l'inspecteur Proprits, ajoutez la chane suivante la fin de l'URL : ?recordID=#recordsetName.fieldName# Le point d'interrogation indique au serveur que ce qui suit correspond un ou plusieurs paramtres d'URL. Le mot recordID correspond au nom du paramtre d'URL (vous pouvez inventer n'importe quel nom de votre choix). Notez le nom du paramtre d'URL : vous devrez en effet l'utiliser ultrieurement au niveau de la page de suppression. L'expression qui suit le signe gal correspond la valeur du paramtre. Dans ce cas, la valeur est gnre par une expression ColdFusion qui renvoie un ID d'enregistrement du jeu d'enregistrements. Un ID diffrent est gnr pour chaque ligne du tableau dynamique. Dans
539
l'expression ColdFusion, remplacez recordsetName par le nom de votre jeu d'enregistrements et fieldName par le nom du champ de votre jeu d'enregistrements qui permet d'identifier chaque enregistrement de faon univoque. Dans la plupart des cas, le champ correspond un numro d'ID d'enregistrement. Dans l'exemple ci-dessous, le champ correspond des codes de location uniques : confirmDelete.cfm?recordID=#rsLocations.CODE# Lorsque la page s'excute, les valeurs du champ CODE du jeu d'enregistrements sont insres dans les lignes correspondantes du tableau dynamique. Par exemple, si le point de location Canberra, Australie, possde le code CBR, l'URL suivante est utilise dans la ligne Canberra du tableau dynamique : confirmDelete.cfm?recordID=CBR 8. (PHP) Dans le champ Lien de l'inspecteur Proprits, ajoutez la chane suivante la fin de l'URL : ?recordID=<?php echo $row_recordsetName['fieldName']; ?> Le point d'interrogation indique au serveur que ce qui suit correspond un ou plusieurs paramtres d'URL. Le mot recordID correspond au nom du paramtre d'URL (vous pouvez inventer n'importe quel nom de votre choix). Notez le nom du paramtre d'URL : vous devrez en effet l'utiliser ultrieurement au niveau de la page de suppression. L'expression qui suit le signe gal correspond la valeur du paramtre. Dans ce cas, la valeur est gnre par une expression PHP qui renvoie un ID d'enregistrement du jeu d'enregistrements. Un ID diffrent est gnr pour chaque ligne du tableau dynamique. Dans l'expression PHP, remplacez recordsetName par le nom de votre jeu d'enregistrements et fieldName par le nom du champ de votre jeu d'enregistrements qui permet d'identifier chaque enregistrement de faon univoque. Dans la plupart des cas, le champ correspond un numro d'ID d'enregistrement. Dans l'exemple ci-dessous, le champ correspond des codes de location uniques : confirmDelete.php?recordID=<?php echo $row_rsLocations['CODE']; ?> Lorsque la page s'excute, les valeurs du champ CODE du jeu d'enregistrements sont insres dans les lignes correspondantes du tableau dynamique. Par exemple, si le point de location Canberra, Australie, possde le code CBR, l'URL suivante est utilise dans la ligne Canberra du tableau dynamique : confirmDelete.php?recordID=CBR 9. (ASP) Dans la zone Lien de l'inspecteur Proprits, ajoutez la chane suivante la fin de l'URL : ?recordID=<%=(recordsetName.Fields.Item("fieldName").Value)%> Le point d'interrogation indique au serveur que ce qui suit correspond un ou plusieurs paramtres d'URL. Le mot recordID correspond au nom du paramtre d'URL (vous pouvez inventer n'importe quel nom de votre choix). Notez le nom du paramtre d'URL : vous devrez en effet l'utiliser ultrieurement au niveau de la page de suppression. L'expression qui suit le signe gal correspond la valeur du paramtre. Dans ce cas, la valeur est gnre par une expression ASP qui renvoie un ID d'enregistrement partir du jeu d'enregistrements. Un ID diffrent est gnr pour chaque ligne du tableau dynamique. Dans l'expression ASP, remplacez recordsetName par le nom de votre jeu d'enregistrements et fieldName par le nom du champ de votre jeu d'enregistrements qui permet d'identifier chaque enregistrement de faon univoque. Dans la plupart des cas, le champ correspond un numro d'ID d'enregistrement. Dans l'exemple ci-dessous, le champ correspond des codes de location uniques : confirmDelete.asp?recordID=<%=(rsLocations.Fields.Item("CODE").Value)%> Lorsque la page s'excute, les valeurs du champ CODE du jeu d'enregistrements sont insres dans les lignes correspondantes du tableau dynamique. Par exemple, si le point de location Canberra, Australie, possde le code CBR, l'URL suivante est utilise dans la ligne Canberra du tableau dynamique : confirmDelete.asp?recordID=CBR 10. Enregistrez la page.
Cration visuelle des liens (ASP uniquement)

1. Dans la page de rsultats, crez une colonne dans le tableau utilis pour afficher les enregistrements. Pour ce faire, cliquez l'intrieur de la dernire colonne du tableau et slectionnez Modifier > Tableau > Insrer des lignes ou des colonnes. 2. Activez l'option Colonnes et l'option Aprs la colonne courante, puis cliquez sur OK. Une colonne est ajoute au tableau. 3. Dans la colonne que vous venez de crer, entrez la chane Delete dans la ligne contenant les espaces rservs pour le contenu dynamique. Vous devez entrer la chane dans la rgion rpte onglets.
540
Vous pouvez galement insrer une image comprenant un mot ou un symbole voquant une suppression. 4. Slectionnez la chane Delete afin de lui appliquer un lien. 5. Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+) et choisissez Aller la page de dtails dans le menu droulant. 6. Dans la bote de dialogue Page de dtails, cliquez sur Parcourir et recherchez la page supprimer. 7. Dans la zone Passer le paramtre d'URL, entrez le nom de votre paramtre, par exemple recordID. Vous pouvez utiliser le nom de votre choix ; veillez toutefois en prendre note, car vous devrez l'employer plus loin, dans la page de suppression. 8. Indiquez la valeur transmettre la page de suppression en slectionnant un jeu d'enregistrements et une colonne dans les menus droulants Jeu d'enregistrements et Colonne. Cette valeur, telle que l'ID de cl unique, est gnralement propre l'enregistrement. 9. Activez l'option Paramtres d'URL. 10. Cliquez sur OK. Un lien spcial entoure le texte slectionn. Lorsque l'utilisateur clique sur le lien, le comportement de serveur Aller la page de dtails transmet la page de suppression indique un paramtre d'URL contenant l'ID de l'enregistrement. Prenons l'exemple d'un paramtre d'URL appel recordID et d'une page de suppression appele confirmdelete.asp ; lorsque l'utilisateur clique sur le lien, l'URL se prsente comme suit : http://www.mysite.com/confirmdelete.asp?recordID=43 La premire partie de l'URL, http://www.mysite.com/confirmdelete.asp, ouvre la page de suppression. La deuxime partie, ?recordID=43, constitue le paramtre d'URL. Elle prcise la page de suppression quel enregistrement trouver et afficher. Le terme recordID est le nom du paramtre d'URL et sa valeur est 43. Dans cet exemple, le paramtre d'URL contient le numro d'ID de l'enregistrement, soit 43.
Cration de la page de suppression
Haut de la page
Aprs avoir cr la page rpertoriant les enregistrements, passez la page de suppression. La page de suppression affiche l'enregistrement et invite l'utilisateur confirmer sa suppression. Lorsque l'utilisateur confirme l'opration en cliquant sur le bouton du formulaire, l'application Web supprime l'enregistrement de la base de donnes. La cration de cette page consiste crer un formulaire HTML, rcuprer l'enregistrement afficher dans le formulaire, l'afficher dans le formulaire et ajouter la logique permettant de supprimer l'enregistrement de la base de donnes. Les oprations de rcupration et d'affichage de l'enregistrement impliquent de dfinir un jeu d'enregistrements destin recevoir cet enregistrement (celui que l'utilisateur souhaite supprimer) et de lier les colonnes du jeu d'enregistrements au formulaire. Remarque : La page de suppression ne peut pas contenir plus d'un comportement de serveur de modification d'enregistrement la fois. Par exemple, vous ne pouvez pas y inclure galement un comportement de serveur Insrer un enregistrement ou Mettre jour l'enregistrement.
Cration d'un formulaire HTML permettant d'afficher l'enregistrement

1. Crez une page et enregistrez-la de sorte qu'elle devienne la page de suppression dfinie dans la section prcdente. Vous avez dfini une page de suppression lors de la cration du lien de suppression (voir la section prcdente). Utilisez le nom de cette page lorsque vous enregistrez le fichier pour la premire fois (par exemple, deleteConfirm.cfm). 2. Insrez un formulaire HTML dans la page (Insertion > Formulaire > Formulaire). 3. Ajoutez un champ masqu au formulaire. Le champ masqu est ncessaire pour stocker l'ID d'enregistrement transmis par le paramtre d'URL. Pour insrer un champ masqu, placez le point d'insertion dans le formulaire et choisissez Insertion > Formulaire > Champ masqu. 4. Ajoutez un bouton au formulaire. Ce bouton permet l'utilisateur de confirmer la suppression de l'enregistrement affich. Pour insrer un bouton, placez le point d'insertion dans le formulaire et choisissez Insertion > Formulaire > Bouton. 5. Modifiez la prsentation de la page selon les besoins et enregistrez-la.
Rcupration de l'enregistrement supprimer

1. Dans le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+) et slectionnez Jeu d'enregistrements (Requte) dans le menu droulant. La bote de dialogue Jeu d'enregistrements ou Jeu de donnes simplifie s'affiche. Si la bote de dialogue Jeu d'enregistrements avance s'affiche, cliquez sur Simple. 2. Attribuez un nom au jeu d'enregistrements, puis slectionnez une source de donnes ainsi que la table de base de donnes contenant les enregistrements que les utilisateurs peuvent supprimer. 3. Dans la zone Colonnes, slectionnez les colonnes (champs d'enregistrement) afficher sur la page.
541
Pour n'afficher que certains champs de l'enregistrement, cliquez sur Slectionnes, puis cliquez sur les champs souhaits tout en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfonce. Assurez-vous que le champ d'ID d'enregistrement est compris dans la slection, mme si vous ne souhaitez pas l'afficher. 4. Renseignez la section Filtre comme suit, pour rechercher et afficher l'enregistrement spcifi dans le paramtre d'URL transmis par la page de rsultats : Dans le premier menu droulant de la zone Filtre, slectionnez la colonne du jeu d'enregistrements contenant les valeurs correspondant celle du paramtre d'URL transmis par la page comportant les liens Supprimer. Par exemple, si le paramtre d'URL contient un numro d'ID d'enregistrement, slectionnez la colonne contenant les numros d'ID d'enregistrement. Dans l'exemple de la section prcdente, la colonne intitule CODE contient les valeurs correspondant celle du paramtre d'URL transmis par la page contenant les liens de suppression. Dans le menu droulant situ en regard du premier menu, slectionnez le signe gal (=) (si cela n'est pas dj fait). Dans le troisime menu droulant, choisissez Paramtre d'URL. La page contenant les liens de suppression utilise un paramtre d'URL pour transmettre des informations la page de suppression. Dans le quatrime champ, entez le nom du paramtre d'URL transmis par la page contenant les liens de suppression.
5. Cliquez sur OK. Le jeu d'enregistrements s'affiche dans le panneau Liaisons.
Affichage de l'enregistrement supprimer

1. Slectionnez les colonnes de jeu de donnes (champs d'enregistrement) dans le panneau Liaisons et faites-les glisser vers la page de suppression. Veillez insrer le contenu dynamique en lecture seule au sein des limites du formulaire. Pour plus d'informations sur l'insertion de contenu dynamique dans une page, consultez la section Cration de texte dynamique. Vous devez ensuite lier la colonne d'ID d'enregistrement au champ de formulaire masqu. 2. Vrifiez que l'option Elments invisibles est active (Affichage > Assistances visuelles > Elments invisibles), puis cliquez sur l'icne en forme de bouclier jaune reprsentant le champ masqu. Le champ masqu est slectionn. 3. Dans l'inspecteur Proprits, cliquez sur l'icne en forme d'clair situe en regard de la zone Valeur. 4. Dans la bote de dialogue Donnes dynamiques, slectionnez la colonne d'ID d'enregistrement dans le jeu d'enregistrements. Dans l'exemple suivant, la colonne d'ID d'enregistrement, CODE, contient des codes de magasin uniques.
542
Colonne d'ID de l'enregistrement slectionne 5. Cliquez sur OK et enregistrez la page.
Page de suppression termine
Insertion de la logique permettant de supprimer l'enregistrement
Haut de la page
Aprs avoir affich l'enregistrement slectionn sur la page de suppression, vous devez insrer sur cette page la logique permettant de supprimer l'enregistrement de la base de donnes lorsque l'utilisateur clique sur le bouton de confirmation de la suppression. Le comportement de serveur Supprimer l'enregistrement permet d'insrer rapidement cette logique.
Ajout d'un comportement de serveur pour supprimer un enregistrement (ColdFusion, PHP)

1. Assurez-vous que la page de suppression ColdFusion ou PHP est ouverte dans Dreamweaver. 2. Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+), puis choisissez Supprimer l'enregistrement. 3. Vrifiez que l'option Valeur de la cl primaire est slectionne dans la zone Vrifier au pralable si la variable est dfinie. Vous dfinirez la valeur de la cl primaire ultrieurement dans cette bote de dialogue. 4. Dans le menu Connexion ou Source de donnes (ColdFusion), slectionnez une connexion la base de donnes de sorte que le comportement de serveur puisse se connecter la base de donnes concerne. 5. Dans le menu droulant Table, slectionnez la table de base de donnes contenant les enregistrements supprimer. 6. Dans le menu droulant Colonne de la cl primaire, slectionnez la colonne contenant les ID d'enregistrement.
543
Le comportement de serveur Supprimer l'enregistrement recherche une correspondance dans cette colonne. Cette dernire doit contenir les mmes ID d'enregistrement que la colonne du jeu d'enregistrements que vous avez lie au formulaire masqu sur la page. Si l'ID d'enregistrement est numrique, slectionnez l'option Numrique. 7. (PHP) Dans le menu droulant Valeur de la cl primaire, slectionnez la variable de la page contenant l'ID d'enregistrement identifiant l'enregistrement supprimer. La variable est gnre par le champ de formulaire masqu. Son nom correspond l'attribut name du champ masqu. Suivant l'attribut method du formulaire, elle se prsente sous la forme d'un paramtre de formulaire ou d'un paramtre d'URL. 8. Dans la zone Aprs la suppression, aller ou En cas de russite, aller , indiquez la page ouvrir aprs la suppression de l'enregistrement de la table. Cette page peut par exemple prsenter un bref message indiquant l'utilisateur que l'opration a russi, ou bien rpertorier les enregistrements restants afin que l'utilisateur puisse vrifier que l'enregistrement a bien t supprim.
9. Cliquez sur OK et enregistrez votre travail.
Ajout d'un comportement de serveur pour supprimer un enregistrement (ASP)

1. Assurez-vous que la page de suppression ASP est ouverte dans Dreamweaver. 2. Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+), puis choisissez Supprimer l'enregistrement. 3. Dans le menu droulant Connexion, slectionnez une connexion la base de donnes de sorte que le comportement de serveur puisse se connecter la base de donnes concerne. Cliquez sur le bouton Dfinir si vous devez dfinir une connexion. 4. Dans le menu droulant Supprimer de la table, slectionnez la table de base de donnes qui contient les enregistrements supprimer. 5. Dans le menu droulant Slectionner un enregistrement dans, indiquez le jeu contenant les enregistrements supprimer. 6. Dans le menu droulant Colonne cl unique, slectionnez une colonne cl (gnralement le champ d'ID de l'enregistrement) devant identifier l'enregistrement dans la table de la base de donnes. Si la valeur est un nombre, slectionnez l'option Numrique. Une colonne cl n'accepte gnralement que des valeurs numriques, mais dans certains cas, elle accepte galement du texte. 7. Dans le menu droulant Supprimer en envoyant, spcifiez le formulaire HTML contenant le bouton Envoyer qui envoie la commande de suppression au serveur. 8. Dans la zone Aprs la suppression, aller , indiquez la page ouvrir aprs la suppression de l'enregistrement de la table. Cette page peut par exemple prsenter un bref message indiquant l'utilisateur que l'opration a russi, ou bien rpertorier les enregistrements restants afin que l'utilisateur puisse vrifier que l'enregistrement a bien t supprim. 9. Cliquez sur OK et enregistrez votre travail.
Test des pages de suppression

1. Envoyez les pages de recherche, de rsultats et de suppression votre serveur Web, ouvrez un navigateur et recherchez un enregistrement de test susceptible d'tre supprim. Lorsque vous cliquez sur un lien de suppression sur la page de rsultats. la page de suppression doit s'afficher. 2. Cliquez sur le bouton Confirmer pour supprimer l'enregistrement de la base de donnes. 3. Recherchez l'enregistrement pour vous assurer qu'il a bien t supprim. L'enregistrement ne doit plus figurer sur la page de rsultats. Voir aussi
544
Cration d'une page d'ouverture de session

A propos des pages de connexion Cration d'une table de base de donnes des utilisateurs enregistrs Ajout d'un formulaire HTML permettant aux utilisateurs de se connecter Vrification du nom d'utilisateur et du mot de passe
A propos des pages de connexion

Votre application Web peut contenir une page qui permettra aux utilisateurs enregistrs de se connecter au site. Une page de connexion se compose des lments structurels suivants : une table de base de donnes regroupant les utilisateurs dj enregistrs ; un formulaire HTML permettant aux utilisateurs d'entrer leur nom d'utilisateur et leur mot de passe ; un comportement de serveur Connecter l'utilisateur qui vrifie que le nom d'utilisateur et le mot de passe saisis sont valides ; une variable de session correspondant au nom d'utilisateur est cre pour l'utilisateur lorsqu'il se connecte avec succs.
Haut de la page
Cration d'une table de base de donnes des utilisateurs enregistrs
Haut de la page
Vous avez besoin d'une table de base de donnes regroupant les utilisateurs dj enregistrs pour vrifier que le nom d'utilisateur et le mot de passe saisis dans la page de connexion sont valides. Pour crer cette table, utilisez votre application de base de donnes et une page d'enregistrement. Pour plus d'informations, consultez le lien vers la rubrique connexe ci-dessous. L'tape suivante de la cration d'une page de connexion consiste ajouter un formulaire HTML la page afin de permettre aux utilisateurs de se connecter. Vous trouverez des instructions dans la rubrique suivante.
Ajout d'un formulaire HTML permettant aux utilisateurs de se connecter
Haut de la page
Ajoutez un formulaire HTML la page afin de permettre aux utilisateurs de se connecter en entrant un nom d'utilisateur et un mot de passe. 1. Crez une page (Fichier > Nouveau > Page vierge) et mettez en forme votre page de connexion l'aide des outils de cration de Dreamweaver. 2. Pour ajouter le formulaire HTML, placez le point d'insertion l'endroit o le formulaire doit apparatre, puis choisissez Insertion > Formulaire. Un formulaire vierge est cr sur la page. Il est parfois ncessaire d'activer les lments invisibles (Affichage > Assistances visuelles > Elments invisibles) pour afficher les contours du formulaire, reprsents par de fines lignes rouges. 3. Pour nommer le formulaire HTML, commencez par le slectionner en cliquant sur la balise <form> au bas de la fentre de document, ouvrez l'inspecteur Proprits (Fentre > Proprits), puis entrez un nom dans la zone Nom du formulaire. Vous n'avez pas besoin de dfinir l'attribut action ou method du formulaire pour lui indiquer o et comment envoyer les donnes d'enregistrement lorsque l'utilisateur clique sur le bouton Envoyer. En effet, le comportement de serveur Connecter l'utilisateur dfinit automatiquement ces attributs. 4. Ajoutez au formulaire les champs de texte Nom d'utilisateur et Mot de passe (Insertion > Formulaire > Champ de texte). Ajoutez des tiquettes (texte ou images) ct de chaque zone de texte, puis organisez ces zones en les plaant dans un tableau HTML et en donnant l'attribut BORDER de la table la valeur 0. 5. Ajoutez un bouton Envoyer au formulaire (Insertion > Formulaire > Bouton). Vous pouvez modifier l'tiquette du bouton Envoyer ; pour ce faire, slectionnez ce bouton, ouvrez l'inspecteur Proprits (Fentre > Proprits) et entrez une nouvelle valeur dans la zone Etiquette. L'tape suivante de la cration d'une page de connexion consiste ajouter le comportement de serveur Connecter l'utilisateur pour vrifier que le nom d'utilisateur et le mot de passe saisis sont valides.
Vrification du nom d'utilisateur et du mot de passe
Haut de la page
545
Vous devez ajouter le comportement de serveur Connecter l'utilisateur la page de connexion pour vrifier la validit du nom d'utilisateur et du mot de passe taps par un utilisateur. 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 dj enregistrs. Si les valeurs correspondent, le comportement de serveur ouvre une page (gnralement la page d'accueil du site). Si elles ne correspondent pas, le comportement de serveur ouvre une autre page (qui alerte gnralement l'utilisateur que la connexion a chou). 1. Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+). Dans le menu droulant, slectionnez Authentification de l'utilisateur > Connecter l'utilisateur. 2. Dfinissez le formulaire et les objets de formulaire que les visiteurs utilisent pour entrer leur nom d'utilisateur et leur mot de passe. 3. (ColdFusion) Tapez votre nom d'utilisateur et votre mot de passe, le cas chant. 4. Dfinissez la table de la base de donnes et les colonnes qui contiennent les noms d'utilisateur et les mots de passe de tous les utilisateurs dj enregistrs. Le comportement de serveur compare le nom d'utilisateur et le mot de passe entrs par le visiteur sur la page de connexion aux valeurs de ces colonnes. 5. Indiquez la page ouvrir si la connexion est tablie. Cette page est gnralement la page d'accueil du site. 6. Indiquez la page ouvrir si la connexion choue. Cette page alerte gnralement l'utilisateur que la connexion a chou et lui permet un nouvel essai. 7. Si vous voulez que les utilisateurs envoys vers la page de connexion aprs avoir essay d'accder la page retournent cette page d'accs restreint aprs la connexion, choisissez l'option Aller l'URL prcdente. Si un utilisateur essaie d'accder votre site en ouvrant une page l'accs restreint sans s'tre pralablement connect, la page accs restreint peut l'envoyer vers la page de connexion. Une fois l'utilisateur connect, la page de connexion le redirige vers la page accs restreint qui l'a pralablement envoy vers la page de connexion. Lorsque vous saisissez les informations relatives au comportement de serveur Restreindre l'accs la page dans la bote de dialogue, prenez soin de prciser la page de connexion dans la zone de texte Si l'accs est refus, aller . 8. Indiquez si l'accs la page est accord selon le nom d'utilisateur et le mot de passe uniquement ou galement selon un niveau de privilges, puis cliquez sur OK. Un comportement de serveur est ajout la page de connexion. Il est destin vrifier que le nom d'utilisateur et le mot de passe saisis par le visiteur sont valides. Voir aussi
546
Cration d'une page accs restreint

A propos des pages protges Renvoi des utilisateurs non autoriss Stockage des privilges d'accs dans la base de donnes des utilisateurs Dconnexion d'utilisateurs
A propos des pages protges

Votre application Web peut contenir une page protge laquelle seuls les utilisateurs autoriss ont accs.
Haut de la page
Si un utilisateur essaie, par exemple, de contourner la page de connexion en entrant l'URL de la page protge dans le navigateur, il est redirig vers une autre page. De mme, si vous donnez une page le niveau d'accs Administrateur, alors seuls les utilisateurs ayant les privilges d'accs Administrateur peuvent la consulter. Si un utilisateur connect tente d'accder la page protge alors qu'il ne possde pas les privilges d'accs requis, il est redirig vers une autre page. Les niveaux d'accs vous permettent aussi de ne pas octroyer immdiatement l'accs la totalit du site aux utilisateurs rcemment enregistrs. Ainsi, vous pouvez, par exemple, attendre de recevoir un paiement avant d'octroyer l'accs aux pages membre du site. Pour cela, protgez les pages membre avec un niveau d'accs Membre et n'octroyez que les privilges d'accs Visiteur aux utilisateurs rcemment enregistrs. Aprs rception du paiement, vous pouvez octroyer l'utilisateur les privilges d'accs suprieurs, c'est--dire Membre (dans la table de base de donnes des utilisateurs enregistrs). Si vous n'envisagez pas d'utiliser des niveaux d'accs, vous pouvez nanmoins protger une page de votre site en ajoutant simplement la page le comportement de serveur Restreindre l'accs la page. Ce comportement redirige vers une autre page tout utilisateur n'ayant pas russi tablir la connexion. Si vous envisagez d'utiliser des niveaux d'accs, vous pouvez protger une page de votre site l'aide des blocs structurels suivants : un comportement de serveur Restreindre l'accs la page, pour rediriger les utilisateurs non autoriss vers une autre page ; une colonne supplmentaire dans la table de base de donnes des utilisateurs, pour enregistrer les privilges d'accs de chaque utilisateur. Que vous utilisiez les niveaux d'accs ou non, vous pouvez ajouter un lien la page protge pour permettre l'utilisateur de se dconnecter et d'effacer toutes les variables de session.
Renvoi des utilisateurs non autoriss
Haut de la page
Pour empcher les utilisateurs non autoriss d'accder une page, ajoutez-lui le comportement de serveur Restreindre l'accs la page. Ce comportement redirige l'utilisateur vers une autre page s'il tente de contourner la page de connexion en entrant l'URL de la page protge dans le navigateur, ou s'il est connect mais tente d'accder la page protge sans avoir les privilges requis. Remarque : Le comportement de serveur Restreindre l'accs la page ne protge que les pages HTML, et non les autres ressources du site telles que les fichiers d'images et audio. Si vous voulez attribuer plusieurs pages du site les mmes droits d'accs, vous pouvez copier-coller ces droits d'une page vers une autre.
Renvoi des utilisateurs non autoriss vers une autre page

1. Ouvrez la page protger. 2. Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+). Dans le menu droulant, slectionnez Authentification de l'utilisateur > Restreindre l'accs la page. 3. Slectionnez le niveau d'accs pour la page. Si vous voulez que seuls les utilisateurs ayant certains privilges puissent afficher la page, slectionnez l'option Nom d'utilisateur, mot de passe et niveau d'accs et spcifiez le niveau d'accs de la page. Vous pouvez par exemple stipuler que seuls les utilisateurs disposant des privilges Administrateur peuvent afficher la page, en slectionnant Administrateur dans la liste des niveaux d'autorisation. 4. Pour ajouter des niveaux d'autorisation la liste, cliquez sur Dfinir. Dans la liste Dfinir les niveaux d'accs qui s'affiche, entrez un nouveau niveau d'accs, puis cliquez sur le bouton Plus (+). Le nouveau niveau d'autorisation est stock de manire pouvoir tre utilis avec les autres pages. Vrifiez que la chane du niveau d'autorisation correspond exactement la chane stocke dans votre base de donnes des utilisateurs. Par exemple, si la colonne autorisation de votre base de donnes contient la valeur Administrator, tapez Administrator, et non Admin, dans la zone de texte Nom. 5. Si vous voulez dfinir plusieurs niveaux d'autorisation pour une page, cliquez sur les niveaux de la liste tout en maintenant la touche Ctrl
547
(Windows) ou Commande (Macintosh) enfonce. Vous pouvez par exemple stipuler que tout utilisateur possdant les privilges Visiteur, Membre ou Administrateur peut consulter la page. 6. Indiquez la page ouvrir si un utilisateur non autoris tente d'ouvrir la page protge. Vrifiez bien que la page choisie n'est pas protge. 7. Cliquez sur OK.
Copie et collage des droits d'accs d'une page sur d'autres pages du site
1. Ouvrez la page protge et slectionnez le comportement Restreindre l'accs la page dans le panneau Comportements de serveur, et non dans le menu droulant Plus (+). 2. Cliquez sur la flche dans le coin suprieur droit du panneau et slectionnez Copier dans le menu droulant. Le comportement de serveur Restreindre l'accs la page est copi dans le Presse-papiers de votre systme. 3. Ouvrez une autre page protger de la mme faon. 4. Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur la flche dans le coin suprieur droit et slectionnez Coller dans le menu droulant. 5. Rptez les tapes 3 et 4 pour chaque page protger.
Stockage des privilges d'accs dans la base de donnes des utilisateurs
Haut de la page
Ce bloc structurel n'est ncessaire que si vous voulez octroyer diffrents privilges certains des utilisateurs connects. Si vous voulez simplement que l'utilisateur se connecte, il n'est pas ncessaire de stocker des privilges d'accs. 1. Si vous voulez que certains utilisateurs connects aient diffrents privilges d'accs, assurez-vous que votre table de base de donnes des utilisateurs contient une colonne spcifiant les privilges d'accs de chaque utilisateur (Visiteur, Utilisateur, Administrateur, etc.). Les privilges d'accs de chaque utilisateur doivent tre entrs dans la base de donnes par l'administrateur du site. Dans la plupart des applications de base de donnes, vous avez la possibilit d'affecter une valeur par dfaut une colonne pour chaque nouvel enregistrement cr. Choisissez comme valeur par dfaut les privilges d'accs les plus courants de votre site (Invit, par exemple), puis changez manuellement les exceptions (en remplaant Invit par Administrateur, par exemple). L'utilisateur a maintenant accs toutes les pages administrateur. 2. Vrifiez que chaque utilisateur dans la base de donnes n'a qu'un seul privilge d'accs, comme Invit ou Administrateur, et non plusieurs. Si vous voulez dfinir plusieurs privilges d'accs pour vos pages (en octroyant l'accs d'une page tous les invits et tous les administrateurs, par exemple), vous devez dfinir ces privilges au niveau de la page, et non de la base de donnes.
Dconnexion d'utilisateurs
Haut de la page
Lorsque l'utilisateur tablit la connexion avec succs, une variable de session compose du nom d'utilisateur est cre. Lorsque l'utilisateur quitte votre site, vous pouvez utiliser le comportement de serveur Dconnecter l'utilisateur pour effacer cette variable de session et rediriger l'utilisateur vers une autre page (gnralement une page de fin de session ou de remerciement). Vous pouvez appeler le comportement de serveur Dconnecter l'utilisateur lorsque l'utilisateur clique sur un lien ou qu'une page spcifique est charge.
Ajout d'un lien permettant l'utilisateur de se dconnecter

1. Slectionnez le texte ou l'image utiliser comme lien dans la page. 2. Dans le panneau Comportements de serveur (Fentre > Comportements), cliquez sur le bouton Plus (+) et slectionnez Authentification de l'utilisateur > Dconnecter l'utilisateur. 3. Indiquez une page ouvrir lorsque l'utilisateur clique sur le lien, puis cliquez sur OK. Il s'agit gnralement d'une page de fin de session ou de remerciement.
Dconnexion des utilisateurs lors du chargement d'une page spcifique

1. Ouvrez la page qui se chargera dans Dreamweaver. Il s'agit gnralement d'une page de fin de session ou de remerciement. 2. Dans le panneau Comportements de serveur, cliquez sur le bouton Plus (+) et slectionnez Authentification de l'utilisateur > Dconnecter l'utilisateur. 3. Slectionnez l'option Se dconnecter au chargement de la page, puis cliquez sur OK. Voir aussi
548
Cration d'une page d'insertion d'enregistrements

A propos de la cration de pages d'insertion d'enregistrements Cration d'une page d'insertion lment par lment Cration de la page d'insertion en une seule opration
A propos de la cration de pages d'insertion d'enregistrements

Une page d'insertion se compose de deux lments : un formulaire HTML permettant aux utilisateurs de saisir des donnes ; un comportement de serveur Insrer l'enregistrement pour mettre jour la base de donnes.
Haut de la page
Votre application peut contenir une page permettant l'utilisateur d'insrer de nouveaux enregistrements dans une base de donnes.
Lorsque l'utilisateur clique sur le bouton Envoyer d'un formulaire, le comportement de serveur insre des enregistrements dans une table de base de donnes. Vous pouvez inclure ces lments dans la page en une seule opration l'aide de l'objet de donnes Formulaire d'insertion d'enregistrement ou les insrer 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.
Cration d'une page d'insertion lment par lment

Vous pouvez galement crer une page d'insertion l'aide des outils de formulaires et des comportements de serveur.
Haut de la page
Ajout d'un formulaire HTML dans une page d'insertion

1. Crez une page dynamique (Fichier > Nouveau > Page vierge) et effectuez-en la mise en forme l'aide des outils de cration de Dreamweaver. 2. Pour ajouter le formulaire HTML, placez le point d'insertion l'endroit o le formulaire doit apparatre, puis slectionnez Insertion > Formulaire > Formulaire. Un formulaire vierge est cr sur la page. Il est parfois ncessaire d'activer les lments invisibles (Affichage > Assistances visuelles > Elments invisibles) pour afficher les contours du formulaire, reprsents par de fines lignes rouges. 3. Pour nommer le formulaire HTML, commencez par le slectionner en cliquant sur la balise <form> au bas de la fentre de document, ouvrez l'inspecteur Proprits (Fentre > Proprits), puis entrez un nom dans la zone Nom du formulaire. Vous n'avez pas besoin de dfinir l'attribut action ou method du formulaire pour lui indiquer o et comment envoyer les donnes d'enregistrement lorsque l'utilisateur clique sur le bouton Envoyer. Le comportement de serveur Insrer un enregistrement dfinit automatiquement ces attributs. 4. Insrez un objet de formulaire tel qu'un champ de texte (Insertion > Formulaire > Champ de texte) pour chaque colonne de la table de base de donnes dans laquelle insrer des enregistrements. Les objets de formulaire sont destins la saisie de donnes. On utilise souvent des champs de texte dans ce but, mais rien ne vous empche d'utiliser des menus, des options et des boutons radio. 5. Ajoutez un bouton Envoyer au formulaire (Insertion > Formulaire > Bouton). Vous pouvez modifier l'tiquette du bouton Envoyer ; pour ce faire, slectionnez ce bouton, ouvrez l'inspecteur Proprits (Fentre > Proprits) et entrez une nouvelle valeur dans la zone Etiquette.
Ajout d'un comportement de serveur destin l'insertion d'enregistrements dans une base de donnes (ColdFusion)
1. Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+) et choisissez Insrer l'enregistrement dans le menu droulant. 2. Dans le menu droulant Envoyer les valeurs partir de, slectionnez un formulaire. 3. Dans le menu droulant Source de donnes, slectionnez une connexion la base de donnes. 4. Saisissez votre nom d'utilisateur et votre mot de passe.
549
5. Dans le menu droulant Insrer dans la table, slectionnez la table de base de donnes dans laquelle insrer l'enregistrement. 6. Indiquez la colonne de base de donnes dans laquelle vous souhaitez insrer l'enregistrement. Dans le menu droulant Valeur, slectionnez l'objet de formulaire devant insrer l'enregistrement. Dans le menu droulant Envoyer en tant que, slectionnez ensuite le type de donnes de l'objet de formulaire. Le type de donnes est celui qu'attend la colonne de la table de base de donnes (texte, numrique, valeurs d'option boolennes). Rptez cette procdure pour chaque objet du formulaire. 7. Dans la zone Aprs l'insertion, aller , indiquez la page ouvrir aprs insertion de l'enregistrement dans la table ou cliquez sur le bouton Parcourir pour naviguer jusqu'au fichier. 8. Cliquez sur OK. Dreamweaver ajoute la page un comportement de serveur qui permet aux utilisateurs d'insrer des enregistrements dans une table de base de donnes. Pour ce faire, il leur suffit de complter le formulaire HTML et de cliquer sur le bouton Envoyer.
Ajout d'un comportement de serveur destin l'insertion d'enregistrements dans une base de donnes (ASP)
1. Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+) et choisissez Insrer l'enregistrement dans le menu droulant. 2. Dans le menu droulant Connexion, slectionnez une connexion la base de donnes. Cliquez sur le bouton Dfinir si vous devez dfinir une connexion. 3. Dans le menu droulant Insrer dans la table, slectionnez la table de base de donnes dans laquelle vous souhaitez insrer l'enregistrement. 4. Dans la zone Aprs l'insertion, aller , indiquez la page ouvrir aprs insertion de l'enregistrement dans la table ou cliquez sur le bouton Parcourir pour naviguer jusqu'au fichier. 5. Dans le menu droulant Obtenir les valeurs de, slectionnez le formulaire HTML utiliser pour la saisie des donnes. Dreamweaver slectionne automatiquement le premier formulaire apparaissant sur votre page. 6. Indiquez la colonne de base de donnes dans laquelle vous souhaitez insrer l'enregistrement. Dans le menu droulant Valeur, slectionnez l'objet de formulaire devant insrer l'enregistrement. Dans le menu droulant Envoyer en tant que, slectionnez ensuite le type de donnes de l'objet de formulaire. Le type de donnes est celui qu'attend la colonne de la table de base de donnes (texte, numrique, valeurs d'option boolennes). Rptez cette procdure pour chaque objet du formulaire. 7. Cliquez sur OK. Dreamweaver ajoute la page un comportement de serveur qui permet aux utilisateurs d'insrer des enregistrements dans une table de base de donnes. Pour ce faire, il leur suffit de complter le formulaire HTML et de cliquer sur le bouton Envoyer. Pour modifier le comportement de serveur, ouvrez le panneau Comportements de serveur (Fentre > Comportements de serveur) et doublecliquez sur le comportement Insrer un enregistrement.
Ajout d'un comportement de serveur destin l'insertion d'enregistrements dans une base de donnes (PHP)
1. Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+) et choisissez Insrer l'enregistrement dans le menu droulant. 2. Dans le menu droulant Envoyer les valeurs partir de, slectionnez un formulaire. 3. Dans le menu droulant Connexion, slectionnez une connexion la base de donnes. 4. Dans le menu droulant Insrer un tableau, slectionnez la table de base de donnes dans laquelle vous souhaitez insrer l'enregistrement. 5. Indiquez la colonne de base de donnes dans laquelle vous souhaitez insrer l'enregistrement. Dans le menu droulant Valeur, slectionnez l'objet de formulaire devant insrer l'enregistrement. Dans le menu droulant Envoyer en tant que, slectionnez ensuite le type de donnes de l'objet de formulaire. Le type de donnes est celui qu'attend la colonne de la table de base de donnes (texte, numrique, valeurs d'option boolennes). Rptez cette procdure pour chaque objet du formulaire. 6. Dans la zone Aprs l'insertion, aller , indiquez la page ouvrir aprs insertion de l'enregistrement dans la table ou cliquez sur le bouton Parcourir pour naviguer jusqu'au fichier. 7. Cliquez sur OK. Dreamweaver ajoute la page un comportement de serveur qui permet aux utilisateurs d'insrer des enregistrements dans une table de base de donnes. Pour ce faire, il leur suffit de complter le formulaire HTML et de cliquer sur le bouton Envoyer.
550
Cration de la page d'insertion en une seule opration
Haut de la page
1. Ouvrez la page en mode Cration, puis slectionnez Insertion > Objets de donnes > Insrer un enregistrement > Assistant de formulaire d'insertion d'enregistrement. 2. Dans le menu droulant Connexion, slectionnez une connexion la base de donnes. Cliquez sur le bouton Dfinir si vous devez dfinir une connexion. 3. Dans le menu droulant Insrer dans la table, slectionnez la table de base de donnes dans laquelle vous souhaitez insrer l'enregistrement. 4. Si vous utilisez ColdFusion, saisissez le nom d'utilisateur et le mot de passe. 5. Dans la zone Aprs l'insertion, aller , indiquez la page ouvrir aprs insertion de l'enregistrement dans la table ou cliquez sur le bouton Parcourir pour naviguer jusqu'au fichier. 6. Dans la zone Champs de formulaire, spcifiez les objets de formulaire que vous souhaitez inclure dans le formulaire HTML de la page d'insertion, ainsi que les colonnes de la base de donnes que chaque objet de formulaire devra mettre jour. Par dfaut, Dreamweaver cre un objet de formulaire pour chaque colonne de la table de base de donnes. Si votre base de donnes gnre automatiquement un ID de cl unique pour chaque enregistrement cr, supprimez l'objet de formulaire correspondant la colonne cl ; pour ce faire, slectionnez l'objet dans la liste et cliquez sur le bouton Moins (-). Ainsi, l'utilisateur du formulaire ne pourra pas entrer une valeur d'ID qui existe dj. Vous pouvez galement modifier l'ordre des objets de formulaire dans le formulaire HTML ; il vous suffit de slectionner un objet dans la liste et de le dplacer dans cette dernire en cliquant sur la flche vers le haut ou vers le bas situe sur la droite de la bote de dialogue. 7. Dfinissez la faon dont chaque champ de saisie de donnes devra tre affich dans le formulaire HTML en cliquant sur une ligne du tableau Champs de formulaire et en entrant les informations suivantes dans les zones affiches sous le tableau : Dans la zone Etiquette, saisissez la description afficher ct du champ de saisie de donnes. Par dfaut, Dreamweaver affiche dans ce champ le nom de la colonne de la table. Dans le menu droulant Afficher comme, slectionnez l'objet de formulaire utiliser comme champ de saisie de donnes. Vous avez le choix entre Champ de texte, Zone de texte, Menu, Case cocher, Groupe de boutons radio et Texte. Pour les entres en lecture seule, choisissez Texte. Vous pouvez galement choisir Champ Mot de passe, Champ de fichier et Champ masqu. Remarque : Les champs masqus sont insrs la fin du formulaire. Dans le menu droulant Envoyer en tant que, slectionnez le format de donnes accept par la table de base de donnes. Par exemple, si les donnes numriques sont les seules admises, choisissez Numrique. Dfinissez les proprits de l'objet de formulaire. Vous avez le choix entre plusieurs possibilits, en fonction de l'objet de formulaire slectionn comme champ de saisie de donnes. Pour les champs de texte, les zones de texte et le texte, vous pouvez entrer une valeur initiale. Pour les menus et les groupes de boutons radio, ouvrez une autre bote de dialogue afin de dfinir des proprits. Pour les options, slectionnez l'option Coche ou Non coche. 8. Cliquez sur OK. Dreamweaver insre dans la page un formulaire HTML et un comportement de serveur Insrer l'enregistrement. Les objets de formulaire sont disposs 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 dpasse les limites du formulaire). Pour modifier le comportement de serveur, ouvrez le panneau Comportements de serveur (Fentre > Comportements de serveur) et doublecliquez sur le comportement Insrer un enregistrement. Voir aussi
551
Cration d'une page d'enregistrement

A propos des pages d'enregistrement Stockage des informations de connexion des utilisateurs Ajout d'un formulaire HTML pour la slection d'un nom d'utilisateur et d'un mot de passe Mise jour de la table de base de donnes des utilisateurs Ajout d'un comportement de serveur pour garantir l'unicit des noms d'utilisateur
A propos des pages d'enregistrement

Une page d'enregistrement se compose des lments structurels suivants : une table de base de donnes pour stocker les informations de connexion des utilisateurs ; un formulaire HTML qui permet aux utilisateurs de slectionner un nom d'utilisateur et un mot de passe et qui peut galement tre utilis pour obtenir d'autres informations personnelles de la part des utilisateurs ;
Haut de la page
Vous pouvez inclure dans votre application Web une page qui oblige les utilisateurs s'enregistrer la premire fois qu'ils visitent votre site.
un comportement de serveur Insrer un enregistrement pour mettre jour la table de base de donnes des utilisateurs du site ; un comportement de serveur Vrifier le nouveau nom d'utilisateur pour vrifier que le nom tap par l'utilisateur n'est pas dj utilis.
Stockage des informations de connexion des utilisateurs
Haut de la page
Une page d'enregistrement ncessite une table de base de donnes dans laquelle stocker toutes les informations de connexion saisies par les utilisateurs. Assurez-vous que cette table contient bien une colonne nom d'utilisateur et mot de passe. Si vous voulez octroyer diffrents droits d'accs aux utilisateurs, ajoutez une colonne droit d'accs. Si vous voulez dfinir un mot de passe commun tous les utilisateurs du site, configurez votre application de base de donnes (Microsoft Access, Microsoft SQL Server, Oracle, etc.) de faon entrer par dfaut ce mot de passe dans chaque nouvel enregistrement utilisateur. Dans la plupart des applications de base de donnes, vous avez la possibilit d'affecter une valeur par dfaut une colonne pour chaque nouvel enregistrement cr. Dfinissez le mot de passe par dfaut. La table de base de donnes permet galement de stocker d'autres informations utiles sur l'utilisateur. L'tape suivante de la cration d'une page d'enregistrement consiste ajouter un formulaire HTML cette page afin de permettre aux utilisateurs de choisir un nom d'utilisateur et un mot de passe (le cas chant).
Ajout d'un formulaire HTML pour la slection d'un nom d'utilisateur et d'un mot de passe
Haut de la page
Pour permettre l'utilisateur de slectionner son nom d'utilisateur et son mot de passe, vous devez ajouter un formulaire HTML la page d'enregistrement (le cas chant). 1. Crez une page (Fichier > Nouveau > Page vierge) et mettez en forme votre page d'enregistrement l'aide des outils de cration de Dreamweaver. 2. Pour ajouter un formulaire HTML, placez le point d'insertion l'endroit o le formulaire doit apparatre, puis choisissez Formulaire dans le menu Insertion. Un formulaire vierge est cr sur la page. Il est parfois ncessaire d'activer les lments invisibles (Affichage > Assistances visuelles > Elments invisibles) pour afficher les contours du formulaire, reprsents par de fines lignes rouges. 3. Pour nommer le formulaire HTML, commencez par le slectionner en cliquant sur la balise <form> au bas de la fentre de document, ouvrez l'inspecteur Proprits (Fentre > Proprits), puis entrez un nom dans la zone Nom du formulaire. Vous n'avez pas besoin de dfinir l'attribut action ou method du formulaire pour lui indiquer o et comment envoyer les donnes d'enregistrement lorsque l'utilisateur clique sur le bouton Envoyer. Le comportement de serveur Insrer un enregistrement dfinit automatiquement ces attributs. 4. Ajoutez des champs de texte (Insertion > Formulaire > Champ de texte) afin de permettre l'utilisateur d'entrer un nom d'utilisateur et un mot de passe. Le formulaire peut galement comporter d'autres objets permettant d'enregistrer d'autres donnes personnelles.
552
Il est conseill d'ajouter des tiquettes (texte ou images) ct de chaque objet de formulaire, afin d'indiquer l'utilisateur de quoi il s'agit. Il est galement conseill d'organiser les objets de formulaire en les plaant dans un tableau HTML. Pour plus d'informations sur les objets de formulaire, consultez la section Cration de formulaires Web. 5. Ajoutez un bouton Envoyer au formulaire (Insertion > Formulaire > Bouton). Vous pouvez modifier l'tiquette du bouton Envoyer ; pour ce faire, slectionnez ce bouton, ouvrez l'inspecteur Proprits (Fentre > Proprits) et entrez une nouvelle valeur dans la zone Valeur. L'tape suivante de la cration d'une page d'enregistrement consiste ajouter le comportement de serveur Insrer un enregistrement pour insrer des enregistrements dans la table des utilisateurs de la base de donnes.
Mise jour de la table de base de donnes des utilisateurs
Haut de la page
Vous devez ajouter le comportement de serveur Insrer un enregistrement la page d'enregistrement pour mettre jour la table des utilisateurs dans la base de donnes. 1. Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+) et choisissez Insrer l'enregistrement dans le menu droulant. La bote de dialogue Insrer un enregistrement s'affiche. 2. Compltez la bote de dialogue en veillant bien indiquer la table des utilisateurs dans la base de donnes dans laquelle insrer les donnes des utilisateurs. Cliquez sur OK. La dernire tape de la cration d'une page d'enregistrement consiste s'assurer que le nom d'utilisateur n'est pas dj utilis par un autre utilisateur enregistr.
Ajout d'un comportement de serveur pour garantir l'unicit des noms d'utilisateur
Haut de la page
Vous pouvez ajouter un comportement de serveur une page d'enregistrement d'utilisateur. Le comportement vrifie que le nom d'utilisateur envoy par le visiteur est unique avant d'ajouter ce dernier dans votre base de donnes des utilisateurs enregistrs. Lorsque l'utilisateur clique sur le bouton Envoyer, sur la page d'enregistrement, le comportement de serveur compare le nom d'utilisateur entr tous les autres noms dj enregistrs dans la table de la base de donnes. Si aucun doublon n'est trouv, le comportement de serveur poursuit normalement l'insertion de l'enregistrement. En cas de doublon, le comportement de serveur annule l'insertion de l'enregistrement et ouvre une nouvelle page (qui alerte gnralement l'utilisateur que le nom choisi est dj pris). 1. Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+). Dans le menu droulant, slectionnez Authentification de l'utilisateur > Vrifier le nouveau nom d'utilisateur. 2. Dans le menu droulant Champ Nom d'utilisateur, slectionnez la zone de texte du formulaire dans laquelle l'utilisateur devra entrer son nom d'utilisateur. 3. Dans la zone Si existe dj, aller , indiquez la page ouvrir si un doublon est trouv dans la table de la base de donnes, puis cliquez sur OK. Cette page doit alerter l'utilisateur que le nom qu'il a choisi est dj pris et lui permettre d'en entrer un autre. Voir aussi
553
Cration de pages avec objets de manipulation de donnes avancs (ColdFusion, ASP)

A propos des objets de commande ASP Modification d'une base de donnes l'aide des commandes ASP A propos des procdures stockes Ajout d'une procdure stocke (ColdFusion) Excution d'une procdure stocke (ASP)
A propos des objets de commande ASP
Haut de la page
Un objet de commande ASP est un objet de serveur qui effectue une opration donne dans une base de donnes. Il peut contenir toute instruction SQL valide, y compris une instruction qui renvoie un jeu d'enregistrements, ou qui insre, met jour ou supprime des enregistrements dans une base de donnes. Un objet de commande peut modifier la structure d'une base de donnes si l'instruction SQL ajoute ou supprime une colonne dans la table. Il peut galement servir excuter une procdure stocke dans une base de donnes. Un objet de commande est dit rutilisable car le serveur peut excuter plusieurs fois la commande l'aide d'une seule version compile de l'objet. Pour qu'une commande soit rutilisable, dfinissez la proprit Prpar de l'objet de commande sur true, comme dans l'instruction VBScript suivante : mycommand.Prepared = true Si vous savez que la commande sera excute un grand nombre de fois, il est conseill d'utiliser une seule version compile de l'objet pour amliorer l'efficacit des oprations effectues dans la base de donnes. Remarque : Les commandes prpares ne sont pas prises en charge par tous les fournisseurs de base de donnes. Si votre base de donnes ne les prend pas en charge, elle risque de renvoyer une erreur lorsque vous dfinissez cette proprit sur true. Elle pourrait mme ignorer la requte de prparation de la commande et dfinir la proprit Prpar sur false. Sur une page ASP, un objet de commande est cr par l'intermdiaire de scripts. Cependant, Dreamweaver vous permet de crer des objets de commande sans avoir crire une seule ligne de code ASP.
Modification d'une base de donnes l'aide des commandes ASP
Haut de la page
A l'aide de Dreamweaver, vous pouvez crer des objets de commande ASP qui insrent, mettent jour et suppriment des enregistrements dans une base de donnes. Il vous suffit d'indiquer l'objet de commande l'instruction ou la procdure stocke SQL qui effectue l'opration dans la base de donnes. 1. Dans Dreamweaver, ouvrez la page ASP qui doit excuter la commande. 2. Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+), puis choisissez Commande. 3. Saisissez le nom de la commande, choisissez une connexion une base de donnes contenant les enregistrements modifier, puis slectionnez l'opration de modification que la commande doit effectuer (Insrer, Mettre jour ou Supprimer). Dreamweaver rdige le dbut de l'instruction SQL en fonction du type d'opration slectionn. Par exemple, voici la bote de dialogue qui s'affiche lorsque vous slectionnez le type Insrer :
4. Compltez l'instruction SQL. Pour plus d'informations sur la rdaction d'instructions SQL modifiant des bases de donnes, consultez un manuel Transact-SQL. 5. Dfinissez les variables SQL dans la zone Variables. Fournissez le nom et la valeur d'excution. La dfinition du type et de la taille de chaque variable empche les attaques par injection.
554
L'exemple ci-dessous illustre une instruction Insert qui contient trois variables SQL. Les valeurs de ces variables sont fournies par des paramtres d'URL transmis la page, dont la dfinition s'affiche dans la colonne Valeur d'excution de la zone Variables.
Pour obtenir la valeur de taille, utilisez le volet Bases de donnes de Dreamweaver. Dans le volet Bases de donnes, trouvez votre base de donnes et dveloppez-la. Trouvez ensuite la table que vous utilisez et dveloppez-la. La table contient les tailles de vos champs. Par exemple, elle peut indiquer ADDRESS (WChar 50). Dans cet exemple, la taille vaut 50. Vous pouvez galement trouver la taille dans votre application de base de donnes. Remarque : Les types de donnes Numrique, Boolen et date/heure emploient toujours la taille -1. Pour dterminer la valeur Type, reportez-vous au tableau suivant :
Type dans la base de donnes Numrique (MS Access, MS SQL Server, MySQL) Boolen, Oui/Non (MS Access, MS SQL Server, MySQL) Date/Heure (MS Access, MS SQL Server, MySQL) Tous les autres types de champ de texte, y compris les types de donnes texte MySQL char, varchar et longtext Texte (MS Access) ou nvarchar, nchar (MS SQL Server) Mmo (MS Access), ntext (MS SQL Server), ou champs acceptant de grandes quantits de texte
Type dans Dreamweaver Double
Taille -1
Double
-1
DBTimeStamp
-1
LongVarChar
reportez-vous la table de base de donnes
VarWChar
reportez-vous la table de base de donnes 1073741823
LongVarWChar
Pour plus d'informations sur le type et la taille des variables SQL, consultez le site Web d'Adobe l'adresse www.adobe.com/go/4e6b330a_fr. 6. Fermez la bote de dialogue. Dreamweaver insre dans votre page un code ASP qui, lorsqu'il s'excute sur le serveur, cre une commande qui insre, met jour ou supprime des enregistrements dans la base de donnes. Par dfaut, la proprit Prpar de l'objet de commande est dfinie sur true, ce qui permet au serveur d'application de rutiliser une seule version compile de l'objet chaque fois que la commande est excute. Pour modifier ce paramtre, basculez en mode Code et dfinissez la proprit Prpar sur false. 7. Crez une page avec un formulaire HTML, de manire permettre aux utilisateurs d'entrer des donnes sur les enregistrements. Dans le formulaire HTML, ajoutez trois champs de texte (txtVille, txtAdresse et txtTlphone) et un bouton Envoyer. Le formulaire utilise la mthode GET et envoie les valeurs des champs de texte la page contenant votre commande.
A propos des procdures stockes

555
Haut de la page
Bien qu'il soit possible d'utiliser des comportements de serveur pour crer des pages qui modifient des bases de donnes, vous pouvez galement crer ces pages en utilisant des objets de manipulation de base de donnes, tels que des procdures stockes ou des objets de commande ASP. Une procdure stocke est un lment de base de donnes rutilisable qui effectue des oprations dans une base de donnes. Elle contient du code SQL qui permet notamment d'insrer, de mettre jour ou de supprimer des enregistrements. Elle peut galement modifier la structure de la base de donnes. Une procdure stocke peut ainsi servir ajouter une colonne ou encore supprimer une table. Elle peut galement appeler une autre procdure stocke, accepter des paramtres d'entre et renvoyer la procdure d'appel plusieurs valeurs sous la forme de paramtres de sortie. Une procdure stocke est dite rutilisable car vous pouvez effectuer une opration dans la base de donnes plusieurs fois l'aide d'une seule version compile de la procdure. Si vous savez qu'une tche de base de donnes sera excute un grand nombre de fois ou qu'elle sera excute par diffrentes applications, il est conseill d'utiliser une procdure stocke pour amliorer l'efficacit des oprations effectues dans la base de donnes. Remarque : Les bases de donnes MySQL et Microsoft Access ne prennent pas en charge les procdures stockes.
Haut de la page
Ajout d'une procdure stocke (ColdFusion)
Vous pouvez modifier une base de donnes l'aide d'une procdure stocke. Une procdure stocke est un lment de base de donnes rutilisable qui effectue des oprations dans une base de donnes. Avant de modifier une base de donnes l'aide d'une procdure stocke, assurez-vous que cette dernire contient un code SQL qui modifie la base de donnes d'une manire ou d'une autre. Pour crer et stocker une procdure stocke dans une base de donnes, consultez la documentation de la base de donnes et un bon manuel Transact-SQL. 1. Dans Dreamweaver, ouvrez la page qui doit excuter la procdure stocke. 2. Dans le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+), puis choisissez Procdure stocke. 3. Dans le menu droulant Source de donnes, slectionnez une connexion une base de donnes contenant la procdure stocke. 4. Saisissez le nom d'utilisateur et le mot de passe pour la source de donnes ColdFusion. 5. Slectionnez une procdure stocke dans le menu droulant Procdure. Dreamweaver remplit automatiquement tous les paramtres. 6. Slectionnez un paramtre et cliquez sur Modifier si vous voulez y apporter des modifications. La bote de dialogue Modifier la variable de la procdure stocke s'affiche. Le nom de la variable modifier s'affiche dans la zone Nom. Remarque : Vous devez indiquer des valeurs test pour tout paramtre d'entre d'une procdure stocke. 7. Apportez les modifications de votre choix : Slectionnez une direction dans le menu droulant. Une procdure stocke peut comporter des valeurs d'entre, des valeurs de sortie ou les deux. Slectionnez un type SQL dans le menu droulant. Entrez une variable de renvoi, une valeur d'excution et une valeur test. 8. Si la procdure stocke accepte un paramtre, cliquez sur le bouton Plus (+) pour ajouter un paramtre de page. Remarque : Vous devez indiquer les paramtres de page correspondant chaque valeur de retour de paramtre d'une procdure stocke. Il est inutile d'ajouter les paramtres de page s'il n'y a pas de valeur de retour correspondante. Cliquez de nouveau sur le bouton Plus (+) pour ajouter un autre paramtre de page, si ncessaire. 9. Slectionnez un paramtre de page, puis cliquez sur le bouton Moins (-) pour supprimer le paramtre si besoin ou sur Modifier pour y apporter des modifications. 10. Activez l'option Renvoie le jeu d'enregistrements nomm, puis tapez le nom du jeu d'enregistrements. Si la procdure stocke renvoie un jeu d'enregistrements, cliquez sur le bouton Tester pour l'afficher. Dreamweaver excute la procdure stocke et affiche le jeu d'enregistrements, le cas chant. Remarque : Si la procdure stocke renvoie un jeu d'enregistrements et accepte des paramtres, vous devez indiquer une valeur dans la colonne Valeur par dfaut de la zone Variables pour tester la procdure stocke. Vous pouvez utiliser diffrentes valeurs test pour gnrer divers jeux d'enregistrements. Pour modifier une valeur test, cliquez sur le bouton Modifier correspondant au paramtre, puis modifiez la valeur test ou cliquez sur le bouton Modifier correspondant au paramtre de page, puis modifiez la valeur par dfaut. 11. Activez l'option Renvoie le code d'tat nomm, puis saisissez le nom du code d'tat si la procdure stocke renvoie une valeur de retour de code d'tat. Cliquez sur OK. Lorsque vous fermez la bote de dialogue, Dreamweaver insre dans votre page un code ColdFusion qui, lorsqu'il s'excute sur le serveur, appelle une procdure stocke dans la base de donnes. La procdure stocke effectue alors une opration dans la base de donnes, telle que l'insertion d'un enregistrement. Si la procdure stocke accepte des paramtres, vous pouvez crer une page qui recueille les valeurs de paramtre et les envoie la page en mme temps que la procdure stocke. Ainsi, il est possible de crer une page qui recueille des valeurs de paramtre auprs des utilisateurs l'aide de paramtres d'URL ou d'un formulaire HTML.
556
Excution d'une procdure stocke (ASP)
Haut de la page
Dans le cas de pages ASP, l'excution d'une procdure stocke requiert l'ajout d'un objet de commande. Pour plus d'informations sur les objets de commande, consultez la section A propos des objets de commande ASP. 1. Dans Dreamweaver, ouvrez la page qui doit excuter la procdure stocke. 2. Dans le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+), puis choisissez Commande (Procdure stocke). La bote de dialogue Commande s'affiche. 3. Saisissez le nom de la commande, slectionnez une connexion une base de donnes contenant la procdure stocke, puis choisissez Procdure stocke dans le menu droulant Type. 4. Pour slectionner votre procdure stocke, dveloppez la branche Procdures stockes dans la zone Elments de base de donnes, choisissez la procdure stocke dans la liste, puis cliquez sur le bouton Procdure. 5. Entrez tous les paramtres requis dans le tableau Variables. Il est inutile d'indiquer des paramtres pour les variables RETURN_VALUE. 6. Cliquez sur OK. Une fois la bote de dialogue ferme, un code ASP est insr dans votre page. Lorsqu'il s'excute sur le serveur, ce code cre un objet de commande qui excute une procdure stocke dans la base de donnes. La procdure stocke effectue alors une opration dans la base de donnes, telle que l'insertion d'un enregistrement. Par dfaut, la proprit Prpar de l'objet de commande est dfinie sur true, ce qui permet au serveur d'application de rutiliser une version compile de l'objet chaque fois que la procdure stocke est excute. Si vous savez que la commande sera excute un grand nombre de fois, il est conseill d'utiliser une seule version compile de l'objet pour amliorer l'efficacit des oprations effectues dans la base de donnes. Cependant, si la commande n'est excute qu'une ou deux fois, ceci risque de ralentir votre application Web car le systme doit s'interrompre pour compiler la commande. Pour modifier ce paramtre, basculez en mode Code et dfinissez la proprit Prpar sur false. Remarque : Les commandes prpares ne sont pas prises en charge par tous les fournisseurs de base de donnes. Si votre base de donnes ne les prend pas en charge, vous risquez de recevoir un message d'erreur lors de l'excution de la page. Basculez en mode Code et dfinissez la proprit Prpar sur false. Si la procdure stocke accepte des paramtres, vous pouvez crer une page qui recueille les valeurs de paramtre et les envoie la page en mme temps que la procdure stocke. Ainsi, il est possible de crer une page qui recueille des valeurs de paramtre auprs des utilisateurs l'aide de paramtres d'URL ou d'un formulaire HTML. Voir aussi
557
Cration de pages de recherche et de rsultats

A propos des pages de recherche et de rsultats Cration de la page de recherche Cration d'une page de rsultats de base Cration d'une page de rsultats avance Affichage des rsultats de la recherche Cration d'une page de dtails pour une page de rsultats Cration d'un lien qui ouvre une page associe (ASP)
A propos des pages de recherche et de rsultats
Haut de la page
Vous avez la possibilit d'utiliser Dreamweaver pour crer un ensemble de pages permettant aux utilisateurs d'effectuer des recherches dans votre base de donnes et d'afficher les rsultats de la recherche. Dans la plupart des cas, pour intgrer cette nouvelle fonction dans votre application Web, un minimum de deux pages s'impose. La premire page contient un formulaire HTML qui va servir la saisie des critres de recherche. Mme si aucune recherche n'est vritablement excute ce niveau, on l'appelle toutefois page de recherche . La deuxime page indispensable la recherche est la page de rsultats, qui permet d'effectuer la plupart du travail. La page de rsultats excute les tches suivantes : Analyse des critres de recherche envoys par la page de recherche Etablissement d'une connexion la base de donnes et recherche d'enregistrements Cration d'un jeu compos des enregistrements trouvs Affichage du contenu du jeu d'enregistrements L'insertion d'une page d'informations dtailles est galement possible, en option. Une page d'informations dtailles donne des informations supplmentaires sur un enregistrement figurant dans une page de rsultats. Si la recherche se fait sur la base d'un seul critre, Dreamweaver vous permet d'ajouter des fonctions de recherche votre application Web sans utiliser de requtes ni de variables SQL. Contentez-vous de crer vos pages et de complter les champs des quelques botes de dialogue qui s'affichent l'cran. Si la recherche dpend de plusieurs critres, il vous faut rdiger une instruction SQL pour laquelle vous dfinissez de multiples variables. Dreamweaver insre la requte SQL dans la page. Lorsque la page s'excute sur le serveur, chaque enregistrement de la table de base de donnes est vrifi. Si la valeur du champ indiqu dans un enregistrement rpond aux conditions de la requte SQL, l'enregistrement sera inclus dans le jeu d'enregistrements. La requte SQL en cours cre un jeu d'enregistrements contenant uniquement les rsultats de la recherche. Par exemple, le service commercial peut dtenir des renseignements sur les clients d'une zone particulire dont les revenus sont suprieurs un niveau donn. Dans le formulaire d'une page de recherche, le responsable des ventes saisit un secteur gographique 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 communiques l'instruction SQL de la page de rsultats, qui cre ensuite le jeu d'enregistrements contenant uniquement les clients du secteur indiqu avec des revenus suprieurs au niveau donn.
Cration de la page de recherche
Haut de la page
Une page de recherche sur le Web se compose normalement de champs destins la saisie de critres particuliers. La page de recherche doit contenir au minimum un formulaire HTML et un bouton Envoyer. Pour ajouter un formulaire HTML une page de recherche, procdez comme suit : 1. Ouvrez la page de recherche ou crez une nouvelle page, puis choisissez Insertion > Formulaire > Formulaire. Un formulaire vierge est cr sur la page. Il est parfois ncessaire d'activer les lments invisibles (Affichage > Assistances visuelles > Elments invisibles) pour afficher les contours du formulaire, reprsents par de fines lignes rouges. 2. Insrez des objets de formulaire afin de permettre aux utilisateurs de taper leurs critres de recherche en choisissant la commande Formulaire dans le menu Insertion. Les objets de formulaire sont de formes diverses : champs de texte, menus, options et boutons radio. La quantit d'objets qu'il est possible d'insrer dans un formulaire pour aider les utilisateurs mieux cerner leurs recherches est quasi illimite. Toutefois, n'oubliez pas que, plus
558
le nombre de critres sur la page de recherche est grand, plus votre instruction SQL sera complexe. 3. Ajoutez un bouton Envoyer au formulaire (Insertion > Formulaire > Bouton). 4. (Facultatif) Pour changer l'tiquette du bouton Envoyer, slectionnez ce bouton, ouvrez l'inspecteur Proprits (Fentre > Proprits) et entrez une nouvelle valeur dans la zone de texte Valeur. A prsent, il convient d'informer le formulaire du lieu o envoyer les critres de recherche lorsque l'utilisateur clique sur le bouton Envoyer. 5. Slectionnez le formulaire l'aide de la balise <form> dans le slecteur de balises situ en bas de la fentre de document, comme le montre l'illustration suivante :
6. Dans la zone Action de l'inspecteur Proprits du formulaire, tapez le nom de fichier de la page de rsultats effectuant la recherche proprement dite dans la base de donnes. 7. Dans le menu droulant Mthode, slectionnez l'une des options suivantes pour dterminer comment les donnes du formulaire doivent tre envoyes au serveur : GET envoie les donnes en les annexant l'URL, sous forme de chane de requte. Cependant, la taille des URL tant limite 8192 caractres, vous ne pouvez pas utiliser la mthode GET avec les formulaires longs. POST envoie les donnes dans le corps d'un message. Default utilise la mthode par dfaut du navigateur (GET, gnralement). La page de recherche est termine.
Cration d'une page de rsultats de base
Haut de la page
Lorsque l'utilisateur clique sur le bouton Rechercher du formulaire, les critres sont envoys une page de rsultats sur le serveur. La charge de rcupration des enregistrements dans la base de donnes incombe non pas la page de recherche sur le navigateur, mais la page de rsultats sur le serveur. Si la page de recherche envoie un critre unique au serveur, vous pouvez crer la page de rsultats sans requte ni aucune variable SQL. Vous crez un jeu d'enregistrements lmentaire auquel vous ajoutez un filtre qui supprime tous les enregistrements non conformes au critre envoys par la page de recherche. Remarque : Si vous appliquez plusieurs conditions de recherche, utilisez la bote de dialogue Jeu d'enregistrements avance pour dfinir votre jeu (consultez la section Cration d'une page de rsultats avance).
Cration du jeu d'enregistrements contenant les rsultats de la recherche

1. Ouvrez la page de rsultats dans la fentre de document. Si vous n'avez pas encore cr de page de rsultats, crez une page dynamique vierge (Fichier > Nouveau > Page vierge). 2. Crez un jeu d'enregistrements ; pour ce faire, ouvrez le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+) et slectionnez Jeu d'enregistrements dans le menu droulant. 3. Assurez-vous que la bote de dialogue Jeu d'enregistrements simplifie s'affiche l'cran.
Si la bote de dialogue avance s'affiche la place, cliquez sur le bouton Simple pour ouvrir sa version simplifie. 4. Attribuez un nom au jeu d'enregistrements et slectionnez une connexion.
559
La connexion doit tre tablie avec une base de donnes contenant des informations susceptibles d'intresser l'utilisateur. 5. Dans le menu droulant Table, slectionnez le tableau consulter dans la base de donnes. Remarque : Si la recherche implique un seul critre, vous ne pouvez consulter des enregistrements que dans un seul tableau. Pour consulter plusieurs tableaux simultanment, utilisez la bote de dialogue Jeu d'enregistrements avance et dfinissez une requte SQL. 6. Pour inclure uniquement certaines colonnes de la table dans le jeu d'enregistrements, cliquez sur Slectionnes, puis slectionnez les colonnes souhaites dans la liste tout en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfonce. Il est prfrable d'inclure uniquement les colonnes qui contiennent des informations que vous souhaitez afficher dans la page de rsultats. Pour le moment, ne fermez pas la bote de dialogue Jeu d'enregistrements. Vous l'utiliserez lors de l'tape suivante pour rcuprer les critres envoys par la page de recherche et pour crer un filtre destin exclure tous les enregistrements non conformes aux critres de recherche.
Cration du filtre du jeu d'enregistrements

1. Dans le premier menu droulant de la zone Filtre, slectionnez la colonne de la table de base de donnes dans laquelle effectuer la recherche. Par exemple, si la valeur envoye par la page de recherche est le nom d'une ville, slectionnez la colonne qui rpertorie des noms de ville. 2. Dans le menu droulant situ ct du premier menu, slectionnez le signe gal (=) (en principe, la valeur par dfaut). 3. Dans le troisime menu droulant, choisissez Variable de formulaire ou Paramtre d'URL, selon que vous empruntez les mthodes POST ou GET, respectivement. La page de recherche utilise soit une variable de formulaire, soit un paramtre d'URL pour transmettre des informations la page de rsultats. 4. Dans la quatrime zone, entrez le nom de l'objet de formulaire qui accepte le critre sur la page de recherche. Le nom de l'objet fait aussi fonction de nom pour la variable de formulaire ou le paramtre d'URL. Pour obtenir ce nom, revenez la page de recherche, cliquez sur l'objet de formulaire pour le slectionner et prenez note du nom qui s'affiche dans l'inspecteur Proprits. Par exemple, vous dsirez crer un jeu d'enregistrements comprenant uniquement les raids et randonnes dans un pays particulier. Supposons qu'une colonne du tableau se nomme TRIPLOCATION et que le formulaire HTML de votre page de recherche utilise la mthode GET et contienne un objet de menu nomm Location qui affiche une liste de pays. L'exemple suivant indique quoi peut ressembler votre section de filtre :
5. (Facultatif) Cliquez sur Tester, tapez une valeur test et cliquez sur OK pour vous connecter la base de donnes et crer une instance du jeu d'enregistrements. La valeur test est une simulation de la valeur qui sans cela aurait t renvoye de la page de recherche. Cliquez sur OK pour fermer le jeu d'enregistrements test. 6. Si le jeu d'enregistrements vous convient, cliquez sur OK. Un script ct serveur est insr sur votre page ; lorsqu'il est excut sur le serveur, il vrifie chaque enregistrement de la table de base de donnes. Si la valeur du champ indiqu dans un enregistrement rpond aux conditions de filtrage, l'enregistrement sera inclus dans le jeu d'enregistrements. Le script cre un jeu d'enregistrements qui ne contient que les rsultats de la recherche. L'tape suivante consiste afficher le jeu d'enregistrements sur la page de rsultats. Pour plus d'informations, consultez la section Affichage des rsultats de la recherche.
Cration d'une page de rsultats avance
Haut de la page
Si la page de recherche envoie plusieurs critres au serveur, il vous faut formuler une requte SQL pour la page de rsultats et intgrer les critres de recherche dans les variables SQL. Remarque : Si vous n'appliquez qu'une seule condition de recherche, utilisez la bote de dialogue Jeu d'enregistrements simplifie pour dfinir votre jeu (consultez la section Cration d'une page de rsultats de base). 1. Ouvrez la page de rsultats dans Dreamweaver, puis crez un jeu d'enregistrements ; pour ce faire, ouvrez le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+) et choisissez Jeu d'enregistrements dans le menu droulant. 2. Assurez-vous que la bote de dialogue Jeu d'enregistrements avance s'affiche l'cran. La bote de dialogue avance comporte une zone de texte qui permet la saisie d'instructions SQL. Si la bote de dialogue simplifie s'affiche la place, cliquez sur le bouton Avanc pour ouvrir sa version avance. 3. Attribuez un nom au jeu d'enregistrements et slectionnez une connexion.
560
La connexion doit tre tablie avec une base de donnes contenant des informations susceptibles d'intresser l'utilisateur. 4. Saisissez l'instruction Select dans la zone de texte SQL. Assurez-vous que l'instruction comporte une clause WHERE avec des variables pour stocker les critres 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 lments de la base de donnes situe dans la partie infrieure de la bote de dialogue Jeu d'enregistrements avance. Pour obtenir des instructions, consultez la section Rdaction d'instructions SQL en vue de la dfinition d'un jeu d'enregistrements avanc. Pour plus d'informations sur la syntaxe SQL, consultez le guide Initiation SQL www.adobe.com/go/learn_dw_sqlprimer. 5. Donnez aux variables SQL les valeurs des critres de recherche. Pour ce faire, cliquez sur le bouton Plus (+) dans la zone Variables, puis tapez le nom de la variable, sa valeur par dfaut (valeur que doit prendre la variable si aucune valeur d'excution n'est renvoye) et sa valeur d'excution (gnralement un objet de serveur renfermant une valeur envoye par un navigateur, telle qu'une variable de demande). Dans l'exemple ASP suivant, le formulaire HTML sur la page de recherche utilise la mthode GET et contient deux champs de texte, LastName et Department .
Dans un environnement ColdFusion, les valeurs d'excution seraient #LastName# et #Department#. Dans PHP, les valeurs d'excution seraient $_REQUEST["LastName"] et $_REQUEST["Department"]. 6. (Facultatif) Cliquez sur Tester pour crer une instance du jeu d'enregistrements l'aide des valeurs de variable par dfaut. Les valeurs par dfaut sont une simulation des valeurs qui sans cela auraient t renvoyes de la page de recherche. Cliquez sur OK pour fermer le jeu d'enregistrements test. 7. Si le jeu d'enregistrements vous convient, cliquez sur OK. La requte SQL est insre dans votre page. L'tape suivante consiste afficher le jeu d'enregistrements sur la page de rsultats.
Affichage des rsultats de la recherche
Haut de la page
Aprs avoir cr un jeu d'enregistrements pour y insrer les rsultats de la recherche, vous devez afficher les informations sur la page de rsultats. L'affichage des enregistrements est une opration simple : il suffit de faire glisser des colonnes individuelles du panneau Liaisons vers la page de rsultats. Ajoutez au choix des liens de navigation pour aller et venir dans le jeu d'enregistrements, ou crez une rgion rpte si vous prfrez afficher plusieurs enregistrements sur la page. Vous pouvez galement insrer des liens sur une page d'informations dtailles. Pour plus d'informations sur les mthodes d'affichage du contenu dynamique sur une page autres que l'affichage de rsultats dans un tableau dynamique, consultez la section Affichage d'enregistrements d'une base de donnes. 1. Placez le point d'insertion l'endroit o vous souhaitez que le tableau dynamique apparaisse dans la page de rsultats, puis slectionnez Insertion > Objets de donnes > Donnes dynamiques > Tableau dynamique. 2. Dans la bote de dialogue Tableau dynamique, slectionnez le jeu d'enregistrements que vous avez dfini afin de prsenter les rsultats de recherche. 3. Cliquez sur OK. Un tableau dynamique contenant les rsultats de la recherche est insr sur la page de rsultats.
Cration d'une page de dtails pour une page de rsultats
Haut de la page
Vos pages de recherche et de rsultats peuvent inclure une page comportant des informations dtailles propos d'enregistrements spcifiques rpertoris dans la page de rsultats. Dans ce cas, la page de rsultats fait galement fonction de page principale dans un ensemble de pages principale/dtails.
Cration d'un lien qui ouvre une page associe (ASP)

561
Haut de la page
Vous pouvez crer un lien qui ouvre une page associe et transmet cette dernire les paramtres existants. Vous ne pouvez recourir au comportement de serveur que si vous utilisez le modle de serveur ASP. Avant d'ajouter un comportement de serveur Aller la page associe une page, assurez-vous que la page reoit les paramtres de formulaire ou d'URL d'une autre page. Le rle du comportement de serveur consiste transmettre ces paramtres une troisime page. Vous pouvez, par exemple, communiquer les critres de recherche reus par une page de rsultats une autre page, de manire ce que l'utilisateur n'ait pas les taper plusieurs fois. Sur la page, vous pouvez galement slectionner du texte ou une image devant assurer la fonction de lien ou placer le pointeur sans ne rien slectionner pour que le texte du lien soit insr. 1. Dans la zone de texte Aller la page associe, cliquez sur Parcourir et localisez le fichier de la page associe. Si la page active s'envoie des donnes elle-mme, tapez son nom de fichier. 2. Si les critres communiquer ont t directement reus d'un formulaire HTML via la mthode GET ou qu'ils figurent dans l'URL de la page, choisissez l'option Paramtres d'URL. 3. Si les critres communiquer ont t directement reus d'un formulaire HTML via la mthode POST, choisissez l'option Paramtres de formulaire. 4. Cliquez sur OK. Lorsque vous cliquez sur le nouveau lien, la page transmet les critres la page associe par le biais d'une chane de requte. Voir aussi
562
Modification de contenu dynamique

A propos du contenu dynamique Modification de contenu dynamique Suppression de contenu dynamique Test de contenu dynamique Autorisation de la modification de contenu dynamique par les utilisateurs d'Adobe Contribute Modification de jeux d'enregistrements l'aide de l'inspecteur Proprits
A propos du contenu dynamique
Haut de la page
Vous pouvez changer le contenu dynamique de votre page en modifiant le comportement de serveur qui fournit ce contenu. Vous pouvez, par exemple, modifier le comportement de serveur d'un jeu d'enregistrements pour fournir plus d'enregistrements votre page. Le contenu dynamique de la page est rpertori dans le panneau Comportements de serveur. Si vous ajoutez, par exemple, un jeu d'enregistrements votre page, le panneau Comportements de serveur l'affiche sous forme de liste : Recordset(myRecordset) Si vous ajoutez un autre jeu d'enregistrements votre page, le panneau Comportements de serveur les affiche tous deux sous forme de liste, comme suit : Recordset(mySecondRecordset)Recordset(myRecordset)
Modification de contenu dynamique

1. Ouvrez le panneau Comportements de serveur (Fentre > Comportements de serveur).
Haut de la page
2. Cliquez sur le bouton Plus (+) pour afficher les comportements de serveur, puis double-cliquez sur le comportement de serveur dans le panneau. La bote de dialogue dans laquelle vous avez dfini la source de donnes d'origine s'ouvre. 3. Effectuez vos modifications dans cette bote de dialogue, puis cliquez sur OK.
Suppression de contenu dynamique

Aprs avoir ajout un contenu dynamique une page, vous pouvez le supprimer de l'une des faons suivantes : Slectionnez le contenu dynamique de la page et appuyez sur Suppr. Slectionnez le contenu dynamique dans le panneau Comportements de serveur et cliquez sur le bouton moins(-).
Haut de la page
Remarque : Cette opration supprime de la page le script ct serveur qui rcupre le contenu dynamique de la base de donnes, mais ne supprime pas les donnes dans la base.
Test de contenu dynamique

Vous pouvez afficher un aperu d'un contenu dynamique et de le modifier l'aide du mode En direct. Pendant que le contenu dynamique est affich, vous pouvez effectuer les oprations suivantes : amliorer la prsentation de la page avec les outils de conception ; ajouter, modifier ou effacer un contenu dynamique ; ajouter, modifier ou effacer des comportements de serveur. 1. Cliquez sur le bouton Affichage en direct pour afficher le contenu dynamique.
Haut de la page
2. Effectuez les modifications ncessaires dans la page. Vous devrez basculer entre le mode En direct et le mode Cration ou Code pour apporter des modifications et observer leur effet.
Haut de la page
563
Autorisation de la modification de contenu dynamique par les utilisateurs d'Adobe Contribute

Lorsqu'un utilisateur de Contribute modifie une page comportant un contenu dynamique ou des lments invisibles (tels que des scripts ou des commentaires), Contribute affiche le contenu dynamique et les lments invisibles sous forme de marqueurs jaunes. Par dfaut, les utilisateurs de Contribute ne peuvent ni slectionner ni supprimer ces marqueurs. Pour que les utilisateurs de Contribute puissent slectionner et supprimer un contenu dynamique ou d'autres lments invisibles sur une page, vous pouvez modifier les paramtres du groupe d'autorisations en consquence. Normalement, les utilisateurs de Contribute ne peuvent en aucun cas modifier un contenu dynamique, mme s'ils sont autoriss le slectionner. Remarque : Grce certaines technologies de serveur, vous pouvez afficher du texte statique l'aide d'une fonction ou d'une balise de serveur. Pour permettre aux utilisateurs de Contribute de modifier le texte statique d'une page dynamique qui utilise une technologie de serveur de ce type, placez le texte statique en dehors des balises de serveur. Pour plus d'informations, voir Administration de Contribute. 1. Slectionnez Site > Administrer le site Contribute. 2. Si certaines options requises pour des raisons de compatibilit avec Contribute ne sont pas actives, une bote de dialogue vous invitant activer ces options s'affiche. Cliquez sur OK pour activer ces options et la compatibilit avec Contribute. 3. Si ncessaire, tapez le mot de passe administrateur, puis cliquez sur OK. La bote de dialogue Administration du site Web s'affiche. 4. Dans la catgorie Utilisateurs et rles, slectionnez un rle, puis cliquez sur le bouton Modifier les paramtres de rle. 5. Slectionnez la catgorie Modification et dslectionnez l'option de protection des scripts et des formulaires. 6. Cliquez sur OK pour fermer la bote de dialogue Modification des paramtres. 7. Cliquez sur Fermer pour fermer la bote de dialogue Administration du site Web.
Modification de jeux d'enregistrements l'aide de l'inspecteur Proprits
Haut de la page
Utilisez l'inspecteur Proprits pour modifier le jeu d'enregistrements slectionn. Les options disponibles dpendent du modle de serveur utilis. 1. Ouvrez l'inspecteur Proprits (Fentre > Proprits), puis slectionnez le jeu d'enregistrements dans le panneau Comportements de serveur (Fentre > Comportements de serveur). 2. Modifiez les options votre convenance. Lorsque vous slectionnez une nouvelle option dans l'inspecteur, Dreamweaver met la page jour. Voir aussi
564
Cration de formulaires Web

A propos des formulaires Web Objets de formulaire Cration d'un formulaire HTML A propos des objets de formulaire dynamiques Insertion ou modification d'un menu de formulaire HTML dynamique: Ajout de la fonctionnalit dynamique des menus de formulaire HTML existants Affichage de contenu dynamique dans des champs de texte HTML Dfinition des options de la bote de dialogue Champ de texte dynamique Activation dynamique d'une case cocher HTML Activation dynamique d'un bouton radio HTML Validation de donnes de formulaire HTML Liaison de comportements JavaScript des objets de formulaire HTML Liaison de scripts personnaliss des boutons de formulaire HTML Cration de formulaires HTML accessibles
A propos des formulaires Web
Haut de la page
Lorsqu'un visiteur saisit des informations dans un formulaire Web affich dans un navigateur Web et clique sur le bouton d'envoi, les informations sont envoyes un serveur, o une application ou un script ct serveur les traite. Le serveur rpond en renvoyant les informations traites l'utilisateur (ou au client) ou en excutant une autre action dtermine par le contenu du formulaire. Vous pouvez crer des formulaires qui envoient des donnes la plupart des serveurs d'application, dont PHP, ASP et ColdFusion. Si vous utilisez ColdFusion, vous pouvez galement ajouter des contrles de formulaire spcifiques ColdFusion dans vos formulaires. Remarque : Vous pouvez galement envoyer des donnes de formulaire directement une adresse lectronique.
Haut de la page
Objets de formulaire
Dans Dreamweaver, les types d'entres de formulaire sont appels des objets de formulaire. Les objets de formulaire sont les lments qui permettent aux utilisateurs d'entrer des donnes. Vous avez la possibilit d'ajouter les objets de formulaire suivants un formulaire : Champs de texte Acceptent tout type d'entre alphanumrique. Vous pouvez afficher le texte sur une seule ligne, sur plusieurs lignes et sous la forme d'un champ de mot de passe dans lequel le texte saisi est remplac par des astrisques ou des puces afin d'tre masqu.
Remarque : Les mots de passe et tout autre type d'informations envoys un serveur l'aide d'un champ de mot de passe ne sont pas crypts. Les donnes transfres peuvent donc tre interceptes et lues en tant que texte alphanumrique. Aussi devez-vous prvoir le cryptage systmatique des donnes que vous souhaitez protger. Champs masqus Stockent des informations saisies par un utilisateur, telles qu'un nom, une adresse lectronique ou une prfrence d'affichage, puis rutilisent ces informations lors de la prochaine visite de l'utilisateur sur le site. Boutons Excutent des actions lorsque l'utilisateur clique dessus. Vous pouvez ajouter une tiquette ou un nom personnalis un bouton ou utiliser l'une des tiquettes prdfinies : Envoyer ou Rtablir. Utilisez un bouton pour l'envoi des donnes du formulaire au serveur ou pour la rinitialisation du formulaire. Vous pouvez galement attribuer un bouton d'autres tches de traitement pralablement dfinies dans un script. Un bouton peut ainsi calculer le montant total des lments slectionns en fonction des valeurs que vous leur avez attribues.
565
Cases cocher Permettent les rponses multiples au sein d'un mme groupe d'options. Un utilisateur peut slectionner toutes les options qu'il juge ncessaires. L'exemple suivant montre trois lments case cocher slectionns : Surfing, Mountain biking et Rafting sont actives.
Boutons radio Reprsentent des choix exclusifs. Lorsqu'un utilisateur clique sur un bouton dans un groupe de boutons radio, cela dslectionne tous les autres boutons du groupe (un groupe comprend plusieurs boutons dots du mme nom). Dans l'exemple ci-dessous, Rafting est l'option slectionne. Si l'utilisateur clique sur Surfing, l'option Rafting est automatiquement dsactive.
Listes droulantes Affichent des valeurs d'option au sein d'une liste droulante qui permet aux utilisateurs de slectionner plusieurs options. L'option Liste affiche les valeurs d'option dans un menu et permet aux utilisateurs de slectionner un seul lment. Utilisez des menus lorsque vous disposez d'un espace rduit et que vous devez afficher de nombreux lments, ou lorsque vous souhaitez contrler les valeurs renvoyes au serveur. A la diffrence des champs de texte, dans lesquels les utilisateurs peuvent taper ce qu'ils veulent, y compris des donnes non valides, c'est vous de dfinir les valeurs exactes renvoyes par un menu. Remarque : Un menu droulant de formulaire HTML est diffrent d'un menu droulant graphique. Pour plus d'informations sur la cration, la modification, l'affichage et le masquage d'un menu droulant graphique, cliquez sur le lien la fin de cette section. Menus de reroutage Sont des listes de navigation ou des menus droulants qui vous permettent d'insrer un menu dans lequel chaque option est relie un document ou un fichier. Champs de fichier Permettent aux utilisateurs de rechercher un fichier sur leur ordinateur et de le tlcharger en tant que donnes de formulaire. Champs d'image Permettent d'insrer une image dans un formulaire. Utilisez les champs d'image pour crer des boutons graphiques (bouton Envoyer ou Rinitialiser, par exemple). Vous devez associer un comportement l'objet de formulaire pour pouvoir utiliser une image afin d'effectuer une tche autre que l'envoi de donnes.
Haut de la page
Cration d'un formulaire HTML
(Utilisateurs de Creative Cloud uniquement) : Dans le cadre de la prise en charge de HTML5, de nouveaux attributs ont t ajouts au panneau Proprits pour les lments de formulaire. En outre, quatre nouveaux lments du formulaire (E-mail, recherche, tlphone, URL) ont t ajouts la section Formulaires du panneau Insertion. Pour plus d'informations, voir Prise en charge amliore de HTML5 pour les lments de formulaire. 1. Ouvrez une page et placez le point d'insertion l'endroit o vous souhaitez insrer le formulaire. 2. Choisissez Insertion > Formulaire ou, dans le panneau Insertion, cliquez sur la catgorie Formulaires, puis sur l'icne Formulaire. Dans une page affiche en mode Cration, les formulaires sont indiqus par une bordure rouge en pointill. Si vous ne voyez pas cette bordure, choisissez Affichage > Assistances visuelles > Elments invisibles. 3. Dfinissez les proprits du formulaire HTML dans l'inspecteur Proprits (Fentre > Proprits) : a. Dans la fentre de document, cliquez sur la bordure du formulaire afin de le slectionner. b. Dans la zone Nom du formulaire, tapez un nom unique afin d'identifier le formulaire. Vous rendez ainsi possible son rfrencement ou son contrle l'aide d'un langage de script, tel que JavaScript ou VBScript. Si vous n'attribuez aucun nom au formulaire, Dreamweaver gnre un nom en utilisant la syntaxe formn et augmente la valeur de n pour
566
chaque nouveau formulaire ajout la page. c. Dans la zone Action, indiquez la page ou le script qui va traiter les donnes du formulaire en entrant son chemin d'accs ou en cliquant sur l'icne du dossier pour naviguer jusqu' la page ou jusqu'au script appropri. Exemple : processorder.php. d. Dans le menu droulant Mthode, spcifiez la mthode permettant de transmettre les donnes du formulaire au serveur. Parmi les options suivantes, dfinissez celles de votre choix : Par dfaut Permet de se baser sur le paramtrage par dfaut du navigateur pour envoyer les donnes du formulaire au serveur. En gnral, la valeur par dfaut est la mthode GET. GET Permet d'annexer la valeur l'URL demandant la page. POST Permet d'incorporer les donnes du formulaire dans la requte HTTP. N'utilisez pas la mthode GET pour envoyer des formulaires longs. Les URL sont limites 8192 caractres. Si la quantit de donnes envoyes est trop importante, celles-ci seront tronques, ce qui peut produire des rsultats inattendus ou un chec du traitement. Il est possible d'ajouter des signets aux pages dynamiques gnres par des paramtres transmis par la mthode GET, car toutes les valeurs ncessaires pour rgnrer la page sont contenues dans l'URL affiche dans la zone Adresse du navigateur. En revanche, il n'est pas possible d'ajouter de signet aux pages dynamiques gnres par des paramtres transmis par la mthode POST. Si vous rassemblez des noms d'utilisateur et des mots de passe, des numros de cartes de crdit ou d'autres informations confidentielles, la mthode POST peut sembler plus sre que la mthode GET. Toutefois, les informations envoyes par la mthode POST ne sont pas codes. Par consquent, les pirates peuvent les rcuprer facilement. Pour garantir leur scurit, utilisez une connexion scurise un serveur scuris. e. (Facultatif) Utilisez le menu droulant Enctype pour dfinir le type de codage MIME des donnes envoyes au serveur pour traitement. Le paramtre par dfaut application/x-www-form-urlencode est gnralement utilis en conjonction avec la mthode POST. Si vous crez un champ de tlchargement de fichier, spcifiez le type de codage MIME multipart/form-data. f. (Facultatif) Utilisez le menu droulant Cible pour spcifier la fentre dans laquelle les donnes renvoyes par le programme appel s'affichent. Si la fentre indique n'est pas encore ouverte, une nouvelle fentre du mme nom apparat. Dfinissez l'une des valeurs cible suivantes : _blank Ouvre le document de destination dans une nouvelle fentre sans nom. _parent Ouvre le document de destination dans la fentre parente de celle affichant le document actif. _self Ouvre le document de destination dans la mme fentre que celle dans laquelle le formulaire a t envoy. _top Ouvre le document de destination au sein de la fentre en cours. Cette valeur permet de s'assurer que le document de destination occupe la fentre entire, mme si le document d'origine tait affich dans un cadre. 4. Insrez des objets de formulaire dans la page : a. Placez le point d'insertion l'endroit o l'objet de formulaire doit s'afficher dans le formulaire. b. Choisissez l'objet dans le menu Insertion > Formulaire, ou dans la catgorie Formulaires du panneau Insertion. c. Compltez la bote de dialogue Attributs d'accessibilit des balises d'entre. Pour plus d'informations, cliquez sur le bouton Aide de la bote de dialogue. Remarque : Si la bote de dialogue Attributs d'accessibilit des balises d'entre n'est pas visible, il se peut que le point d'insertion se trouvait en mode Code lorsque vous avez tent d'insrer l'objet de formulaire. Assurez-vous que le point d'insertion se trouve bien en mode Cration, puis ressayez. Pour plus d'informations ce sujet, reportez-vous l'article Creating HTML forms in Dreamweaver (en anglais) de David Powers. d. Dfinissez les proprits des objets. e. Entrez un nom pour l'objet dans l'inspecteur Proprits. Chaque objet champ de texte, champ cach, case cocher et liste/menu doit possder un nom unique identifiant l'objet dans le formulaire. Les noms d'objets de formulaire ne peuvent comporter ni espaces, ni caractres spciaux. Vous pouvez utiliser toutes les combinaisons de caractres alphanumriques ainsi qu'un caractre de soulignement (_). L'tiquette que vous attribuez l'objet correspond au nom de la variable o la valeur du champ (les donnes saisies) sera stocke. Il s'agit de la valeur envoye au serveur pour traitement. Remarque : Tous les boutons radio d'un mme groupe doivent porter le mme nom. f. Pour attribuer une tiquette l'objet champ de texte, case cocher ou bouton radio dans la page, cliquez en regard de l'objet et tapez le texte souhait. 5. Amliorez la mise en forme du formulaire. Utilisez des sauts de ligne, des sauts de paragraphes, du texte prformat ou des tableaux pour mettre en forme vos formulaires. Vous ne pouvez pas insrer un formulaire dans un autre formulaire (c'est--dire superposer des balises), mais vous pouvez inclure plusieurs formulaires dans une mme page. Lors de la conception de formulaires, n'oubliez pas de libeller les champs du formulaire sous forme de texte descriptif, afin que les utilisateurs sachent ce qu'ils ont faire (par exemple, Entrez votre nom pour demander des informations de nom).
567
Utilisez des tableaux pour fournir une structure pour les objets et les tiquettes de champ. Assurez-vous, lorsque vous utilisez des tableaux dans un formulaire, que toutes les balises table sont incluses entre les balises form. Vous trouverez un didacticiel consacr la cration de formulaires l'adresse www.adobe.com/go/vid0160_fr. Vous trouverez un didacticiel consacr la mise en page de formulaires l'aide de CSS l'adresse www.adobe.com/go/vid0161_fr.
Proprits de l'objet Champ de texte

Slectionnez l'objet champ de texte et dfinissez les options suivantes dans l'inspecteur Proprits : Largeur car. Dfinit le nombre maximal de caractres pouvant tre affichs dans le champ. Ce nombre peut tre infrieur Nbre max. de caract., qui dfinit le nombre maximal de caractres pouvant tre entrs dans le champ. Ainsi, si le champ Largeur de caractre est dfini sur la valeur par dfaut 20 et qu'un utilisateur saisit 100 caractres, ce dernier ne pourra voir que 20 de ces caractres dans le champ de texte. Bien que l'utilisateur ne voie pas tous les caractres saisis dans le champ, ils sont reconnus par l'objet de champ et envoys au serveur pour traitement. Nbre max. de caract. Dfinit le nombre maximum de caractres qu'il est possible de saisir dans le champ pour les champs de texte une seule ligne. Utilisez Nbre max. de caract. pour limiter un code postal 5 chiffres, un mot de passe 10 caractres, etc. Si vous ne renseignez pas la zone de texte Nbre max. de caract., les utilisateurs peuvent saisir un texte d'une longueur illimite. Si l'entre de l'utilisateur dpasse la largeur des caractres du champ, le texte dfile. Si l'entre de l'utilisateur dpasse le nombre maximum de caractres, le formulaire met un son d'alerte. Nbre lignes (Disponible lorsque l'option Multiligne est slectionne) Dfinit la hauteur du champ pour les champs de texte plusieurs lignes. Dsactiv Dsactive la zone de texte. Lecture seule Transforme la zone de texte en zone en lecture seule. Type Dsigne le type de champ : ligne simple, multiligne ou mot de passe. Ligne simple Permet de positionner une balise input dont l'attribut type est fix text. Le paramtre Larg. des caractres reprsente l'attribut size ; Nbre max. de caract. reprsente l'attribut maxlength. Lignes multiples Permet de positionner une balise textarea. Le paramtre Larg. des caractres est reli l'attribut cols ; Nbre caract. max. est reli l'attribut rows. Mot de passe Permet de positionner une balise input dont l'attribut type est fix password. Les paramtres Larg. des caractres et Nbre max. de caract. sont relis aux mmes attributs que les champs de texte une seule ligne. Lorsqu'un utilisateur entre des donnes dans un champ mot de passe, le texte apparat sous forme de puces ou d'astrisques pour le protger du regard de tiers. Init val Attribue la valeur affiche dans le champ lors du premier chargement du formulaire. Ainsi pouvez-vous indiquer, par exemple, que l'utilisateur doit saisir des informations de type remarque ou exemple dans le champ. Classe Permet d'appliquer des rgles CSS l'objet.
Options de l'objet Bouton

Nom de bouton Attribue un nom au bouton. Les deux noms rservs, Envoyer et Rinitialiser, indiquent respectivement au formulaire d'envoyer les donnes du formulaire l'application ou au script de traitement et de rinitialiser les valeurs initiales des champs du formulaire. Valeur Dtermine le texte apparaissant sur le bouton. Action Dtermine ce qui se passe lorsque le bouton est cliqu. Envoyer le formulaire Envoie les donnes du formulaire pour traitement lorsque l'utilisateur clique sur le bouton. Les donnes sont envoyes la page ou au script spcifi par la proprit Action du formulaire. Rinitialiser le formulaire Rtablit le contenu ses valeurs par dfaut lorsque l'utilisateur clique sur le bouton. Aucun Spcifie l'action a excuter lorsque l'utilisateur clique sur le bouton. Par exemple, vous pouvez ajouter un comportement JavaScript qui ouvre une autre page lorsque l'utilisateur clique sur le bouton. Classe Applique des rgles CSS l'objet.
Options de l'objet Case cocher

Valeur Dfinit la valeur envoyer au serveur lorsque la case cocher est active. Par exemple, dans un sondage, vous pouvez dfinir une valeur de 4 pour approuve fortement et une valeur de 1 pour dsapprouve fortement . Etat initial Dtermine si la case cocher est slectionne lorsque le formulaire est charg dans le navigateur. Dynamique Permet au serveur de dterminer de faon dynamique l'tat initial de la case cocher. Par exemple, vous pouvez prsenter visuellement les informations Oui/Non stockes dans un enregistrement de base de donnes l'aide de cases cocher. Au stade de la conception, vous ne connaissez pas ces informations. Au moment de l'excution, le serveur lit l'enregistrement de base de donnes et active la case cocher si la valeur est Oui. Classe Applique des rgles CSS (Cascading Style Sheets, feuilles de style en cascade) l'objet.
Options de l'objet Bouton radio unique

Valeur Dfinit la valeur envoyer au serveur lorsque le bouton radio est slectionn. Par exemple, vous pouvez taper ski dans la zone de texte Valeur pour indiquer qu'un utilisateur a choisi le ski. Etat initial Dtermine si le bouton radio est slectionne lorsque le formulaire est charg dans le navigateur. Dynamique Permet au serveur de dterminer de faon dynamique l'tat initial du bouton radio. Par exemple, vous pouvez prsenter visuellement des informations stockes dans un enregistrement de base de donnes l'aide de boutons radio. Au stade de la conception, vous ne connaissez pas ces informations. Au moment de l'excution, le serveur lit l'enregistrement de base de donnes et vrifie si la valeur du bouton radio correspond celle que vous avez spcifie.
568
Classe Applique des rgles CSS l'objet.
Options du menu
Liste/Menu Attribue un nom au menu. Ce nom doit tre unique. Type Indique si le menu se droule lorsque l'utilisateur clique dessus (option Menu) ou s'il affiche une liste droulante d'lments (option Liste). Slectionnez l'option Menu si vous souhaitez qu'un seul choix soit visible lorsque le formulaire s'affiche dans un navigateur. Pour afficher les autres choix, l'utilisateur doit cliquer sur la flche vers le bas. Slectionnez l'option Liste pour afficher quelques-unes ou l'ensemble des options lorsque le formulaire s'affiche dans un navigateur, afin de permettre aux utilisateurs de slectionner plusieurs lments. Hauteur (Type Liste uniquement) Dfinit le nombre d'lments affichs dans le menu. Slections (Type Liste uniquement) Indique si l'utilisateur peut slectionner plusieurs lments dans la liste. Valeurs de la liste Ouvre une bote de dialogue qui vous permet d'ajouter les lments un menu de formulaire : 1. Utilisez les boutons plus (+) et moins (-) pour ajouter et supprimer des lments de la liste. 2. Tapez un libell ainsi qu'une valeur optionnelle pour chaque lment de menu. Chaque lment de la liste possde un libell (le texte qui apparat dans la liste) et une valeur (la valeur envoye l'application de traitement si l'lment est slectionn). Si aucune valeur n'est spcifie, le libell est envoy l'application de traitement. 3. Utilisez les boutons flchs Haut et Bas pour rorganiser les lments de la liste. Les lments apparaissent dans le menu dans le mme ordre qu'ils apparaissent dans la bote de dialogue Valeurs de la liste. Le premier lment sur la liste est l'lment slectionn lorsque la page est charge dans un navigateur. Dynamique Permet au serveur de slectionner de faon dynamique un lment dans le menu lors de son affichage initial. Classe Permet d'appliquer des rgles CSS l'objet. Initialement slectionn Dfinit les lments slectionns par dfaut dans la liste. Cliquez sur un ou plusieurs lments dans la liste.
Insertion de champs de tlchargement de fichier

Vous pouvez crer un champ de tlchargement de fichier permettant aux utilisateurs de slectionner un fichier sur leur ordinateur (tel qu'un document de traitement de texte ou un fichier graphique) et de le tlcharger sur le serveur. Un champ de fichier est similaire un champ de texte, mais contient galement un bouton Parcourir. L'utilisateur peut soit saisir manuellement le chemin d'accs au fichier tlcharger, soit cliquer sur le bouton Parcourir pour le rechercher et le slectionner. Avant d'utiliser les champs de tlchargement de fichiers, vous devez disposer d'un script ct serveur ou d'une page capable de traiter les soumissions de fichiers. Consultez la documentation de la technologie serveur utiliser pour traiter les donnes des formulaires. Par exemple, si vous utilisez PHP, consultez la section Handling files uploads (Gestion des tlchargements de fichiers) dans le manuel PHP l'adresse http://us2.php.net/features.file-upload.php. Les champs de fichier ncessitent l'utilisation de la mthode POST pour transmettre des fichiers depuis un navigateur vers le serveur. Le fichier est transfr l'adresse indique dans la zone de texte Action du formulaire. Remarque : Avant d'utiliser le champ de fichier, vrifiez auprs de votre administrateur de serveur que le tlchargement anonyme de fichiers est autoris. 1. Insrez un formulaire dans la page (Insertion > Formulaire). 2. Slectionnez le formulaire pour en afficher l'inspecteur Proprits. 3. Dans le menu droulant Mthode, slectionnez POST. 4. Dans le menu droulant Enctype, slectionnez multipart/form-data. 5. Dans la zone de texte Action, spcifiez le script ct serveur ou la page capable de traiter le fichier tlcharg. 6. Placez le point d'insertion l'intrieur de la bordure du formulaire et slectionnez Insertion > Formulaire > Champ de fichier. 7. Dfinissez les options suivantes dans l'inspecteur Proprits : Champ de fichier Indique le nom de l'objet champ de fichier. Largeur car. Dfinit le nombre maximal de caractres pouvant tre affichs dans le champ. Nbre max. de caract. Indique le nombre maximum de caractres que peut contenir le champ. Si l'utilisateur parcourt l'arborescence pour trouver le fichier, le nom du fichier et son chemin d'accs risquent de comporter un nombre de caractres suprieur celui indiqu dans le champ Nbre max. de caract. Par contre, si l'utilisateur tente de taper le nom du fichier et son chemin d'accs, le champ de fichier ne lui permet pas d'entrer un nombre de caractres suprieur celui indiqu.
Insertion d'un bouton d'image

Vous pouvez utiliser des images en qualit d'icnes de bouton. Vous devez associer un comportement l'objet de formulaire pour pouvoir utiliser une image afin d'effectuer une tche autre que l'envoi de donnes. 1. Dans le document, placez le point d'insertion dans la bordure du formulaire. 2. Slectionnez Insertion > Formulaire > Champ d'image. La bote de dialogue Slectionnez la source de l'image s'affiche.
569
3. Slectionnez l'image souhaite pour le bouton dans la bote de dialogue Slectionnez la source de l'image et cliquez sur OK. 4. Dfinissez les options suivantes dans l'inspecteur Proprits : Zone_image Attribue un nom au bouton. Les deux noms rservs, Envoyer et Rinitialiser, indiquent respectivement au formulaire d'envoyer les donnes du formulaire l'application ou au script de traitement et de rinitialiser les valeurs initiales des champs du formulaire. Src Spcifie l'image utiliser pour le bouton. Sec Permet de saisir un texte descriptif au cas o l'image ne parvient pas se charger dans le navigateur. Alignement Dfinit l'attribut d'alignement de l'objet. Modifier image Lance votre diteur d'image par dfaut et ouvre le fichier d'image afin que vous puissiez le modifier. Classe Permet d'appliquer des rgles CSS l'objet. 5. Pour associer un comportement JavaScript au bouton, slectionnez l'image, puis slectionnez le comportement dans le panneau Comportements (Fentre > Comportements).
Options de l'objet Champ masqu

Champ masqu Indique le nom du champ. Valeur Attribue une valeur au champ. Cette valeur est transmise au serveur lors de l'envoi du formulaire.
Insertion d'un groupe de boutons radio

1. Placez le point d'insertion dans la bordure du formulaire. 2. Slectionnez Insertion > Formulaire > Groupe de boutons radio. 3. Compltez les options de la bote de dialogue, puis cliquez sur OK. a. Dans la zone de texte Nom, tapez le nom du groupe de boutons radio. Si vous dfinissez les boutons radio pour qu'ils renvoient des paramtres au serveur, ces derniers seront associs au nom du groupe. Par exemple, si vous attribuez le nom myGroup au groupe de boutons radio et dfinissez la mthode du formulaire sur GET (en d'autres termes, vous souhaitez que le formulaire transmette au serveur des paramtres d'URL plutt que des paramtres de formulaire lorsque l'utilisateur clique sur le bouton d'envoi), l'expression myGroup="CheckedValue" sera transmise au serveur via l'URL. b. Cliquez sur le bouton Plus (+) pour ajouter un bouton radio au groupe. Saisissez l'tiquette et la valeur du nouveau bouton. c. Cliquez sur les flches haut ou bas pour rorganiser les boutons. d. Pour dfinir un bouton radio prcis de faon ce qu'il soit slectionn l'ouverture de la page dans un navigateur, dans la zone de texte Slectionner une valeur gale , saisissez une valeur gale celle du bouton radio. Saisissez une valeur statique ou dynamique. Pour saisir une valeur dynamique, cliquez sur l'icne reprsentant un clair (en regard de la zone de texte), puis slectionnez un jeu d'enregistrements contenant des valeurs possibles. Dans les deux cas de figure, la valeur indique doit correspondre celle de l'un des boutons radio du groupe. Pour afficher les valeurs des boutons radio, slectionnez chaque bouton, puis ouvrez son inspecteur Proprits (Fentre > Proprits). e. Slectionnez la mise en forme que Dreamweaver doit utiliser pour mettre en forme les boutons. Utilisez soit des sauts de ligne, soit un tableau pour mettre les boutons en forme. Si vous activez l'option du tableau, Dreamweaver cre un tableau une seule colonne en plaant les boutons radio sur la gauche et les tiquettes sur la droite. Vous pouvez galement dfinir les proprits l'aide de l'inspecteur Proprits ou directement en mode Code.
Insertion d'un groupe de cases cocher

1. Placez le point d'insertion dans la bordure du formulaire. 2. Choisissez Insertion > Formulaire > Groupe de cases cocher. 3. Compltez les options de la bote de dialogue, puis cliquez sur OK. a. Dans la zone Nom, tapez le nom du groupe de cases cocher. Si vous dfinissez les cases cocher pour qu'elles renvoient des paramtres au serveur, ces derniers seront associs au nom du groupe. Par exemple, si vous nommez le groupe myGroup fixez la mthode du formulaire sur GET (en d'autres termes, vous voulez que le formulaire transmette au serveur des paramtres d'URL plutt que des paramtres de formulaire lorsque l'utilisateur clique sur le bouton d'envoi), l'expression myGroup="CheckedValue" est transmise au serveur via l'URL. b. Cliquez sur le bouton Plus (+) pour ajouter une case cocher au groupe. Saisissez l'tiquette et la valeur de la nouvelle case cocher. c. Cliquez sur les flches haut ou bas pour rorganiser les cases cocher. d. Pour dfinir une case cocher prciser de faon ce qu'elle soit slectionne l'ouverture de la page dans un navigateur, dans la zone de texte Slectionner une valeur gale , saisissez une valeur gale celle de la case cocher. Saisissez une valeur statique ou dynamique. Pour saisir une valeur dynamique, cliquez sur l'icne reprsentant un clair (en regard de la zone de texte), puis slectionnez un jeu d'enregistrements contenant des valeurs possibles. Dans les deux cas de figure, la valeur indique doit correspondre celle de l'une des cases cocher du groupe. Pour afficher les valeurs des cases cocher, slectionnez
570
chacune d'elles puis ouvrez son inspecteur Proprits (Fentre > Proprits). e. Slectionnez la mise en forme que Dreamweaver doit utiliser pour mettre en forme les cases cocher. Utilisez soit des sauts de ligne, soit un tableau pour mettre les cases cocher en forme. Si vous activez l'option du tableau, Dreamweaver cre un tableau une seule colonne en plaant les cases cocher sur la gauche et les tiquettes sur la droite. Vous pouvez galement dfinir les proprits l'aide de l'inspecteur Proprits ou directement en mode Code.
A propos des objets de formulaire dynamiques
Haut de la page
Un objet de formulaire dynamique est un objet de formulaire dont l'tat initial est dtermin par le serveur lorsque la page est demande au serveur, et non par le concepteur du formulaire lors de sa cration. Par exemple, lorsqu'un utilisateur recherche une page PHP contenant un formulaire dans lequel se trouve un menu, un script PHP insr dans la page renseigne automatiquement le menu par des valeurs stockes dans une base de donnes. Le serveur envoie ensuite la page termine au navigateur de l'utilisateur. Le fait de rendre les objets de formulaire dynamiques permet de simplifier la maintenance d'un site. Par exemple, de nombreux sites utilisent des menus pour prsenter aux utilisateurs un ensemble d'options. Si un menu est dynamique, vous pouvez ajouter, supprimer ou modifier des lments de menu en un seul endroit (la table de base de donnes dans laquelle sont stocks ces lments) afin de mettre jour toutes les instances de ce mme menu sur le site.
Insertion ou modification d'un menu de formulaire HTML dynamique:
Haut de la page
Vous avez la possibilit de renseigner un menu de formulaire ou une liste droulante HTML de faon dynamique l'aide des entres d'une base de donnes. Pour la majorit des pages, vous pouvez utiliser un objet de menu HTML. Avant de commencer, vous devez insrer un formulaire HTML dans une page ColdFusion, PHP ou ASP, puis dfinir un jeu d'enregistrements ou une autre source de contenu dynamique pour le menu. 1. Insertion d'un objet de formulaire Liste/Menu HTML dans votre page a. Cliquez l'intrieur du formulaire HTML sur la page (Insertion > Formulaire > Formulaire). b. Choisissez Insertion > Formulaire > Liste/Menu pour insrer l'objet de formulaire. 2. Effectuez l'une des oprations suivantes : Slectionnez le nouvel objet de formulaire Liste/Menu HTML ou un objet existant, puis cliquez sur le bouton Dynamique de l'inspecteur Proprits. Choisissez Insertion > Objets de donnes > Donnes dynamiques > Liste de slection dynamique. 3. Compltez les options de la bote de dialogue Liste/Menu dynamique, puis cliquez sur OK. a. Dans le menu droulant Options du jeu d'enregistrements, choisissez le jeu d'enregistrements utiliser comme source de contenu. Ce menu vous permet galement de modifier ultrieurement les lments de menu ou de liste statiques et dynamiques. b. La zone Options statiques vous permet de saisir un lment par dfaut dans la liste ou le menu. Cette option vous permet aussi de modifier les entres statiques d'un objet de formulaire de liste ou de menu aprs que vous avez ajout un contenu dynamique. c. (Facultatif) Utilisez les boutons plus (+) et moins (-) pour ajouter et supprimer des lments de la liste. Les lments sont dans le mme ordre que dans la bote de dialogue Valeur de la liste. Le premier lment sur la liste est l'lment slectionn lorsque la page est charge dans un navigateur. Utilisez les boutons flchs Haut et Bas pour rorganiser les lments de la liste. d. Dans le menu droulant Valeurs, slectionnez le champ contenant les valeurs des lments de menu. e. Dans le menu droulant Etiquettes, slectionnez le champ contenant les tiquettes des lments de menu. f. (Facultatif) Pour spcifier qu'un lment de menu particulier soit slectionn l'ouverture de la page dans un navigateur ou lorsqu'un enregistrement est affich dans le formulaire, indiquez une valeur gale celle de l'lment de menu dans la zone de texte Slectionner une valeur gale . Vous pouvez indiquer une valeur statique ou dynamique, en cliquant sur l'icne reprsentant un clair ( ct de la zone de texte), puis en slectionnant une valeur dynamique dans la liste des sources de donnes. Dans les deux cas, la valeur indique doit correspondre l'une des valeurs des lments de menu.
Ajout de la fonctionnalit dynamique des menus de formulaire HTML existants

1. En mode Cration, slectionnez l'objet de formulaire liste/menu. 2. Dans l'inspecteur Proprits, cliquez sur le bouton Dynamique. 3. Compltez les options de la bote de dialogue, puis cliquez sur OK.
Haut de la page
Affichage de contenu dynamique dans des champs de texte HTML
Haut de la page
Vous pouvez afficher un contenu dynamique dans des champs de texte HTML lorsque le formulaire est affich dans un navigateur.
571
Avant de commencer, vous devez crer le formulaire dans une page ColdFusion, PHP ou ASP, puis dfinir un jeu d'enregistrements ou une autre source de contenu dynamique pour la zone de texte. 1. Slectionnez le champ de texte dans le formulaire HTML de votre page. 2. Dans l'inspecteur Proprits, cliquez sur l'icne en forme d'clair situe en regard de la zone de texte Val. init. pour afficher la bote de dialogue Donnes dynamiques. 3. Slectionnez la colonne du jeu d'enregistrements qui doit fournir une valeur au champ de texte, puis cliquez sur OK.
Dfinition des options de la bote de dialogue Champ de texte dynamique

1. Dans le menu droulant Champ de texte, slectionnez le champ de texte que vous souhaitez rendre dynamique.
Haut de la page
2. Cliquez sur l'icne en forme d'clair situe en regard de la zone de texte Dfinir la valeur , puis slectionnez une source de donnes dans la liste des sources disponibles. Cette source doit contenir des informations textuelles. Si aucune source de donnes n'apparat dans la liste ou si aucune des sources disponibles ne correspond vos besoins, cliquez sur le bouton Plus (+) pour dfinir une nouvelle source.
Activation dynamique d'une case cocher HTML
Haut de la page
Vous pouvez laisser le serveur dterminer l'ventuelle activation d'une case cocher lors de l'affichage du formulaire dans un navigateur. Avant de commencer, vous devez crer le formulaire dans une page ColdFusion, PHP ou ASP, puis dfinir un jeu d'enregistrements ou une autre source de contenu dynamique pour ces cases cocher. L'idal serait que la source de contenu contienne des donnes boolennes, telles que Yes/No ou true/false. 1. Slectionnez un objet de formulaire correspondant une case cocher dans votre page. 2. Dans l'inspecteur Proprits, cliquez sur le bouton Dynamique. 3. Renseignez la bote de dialogue Case cocher dynamique, puis cliquez sur OK. Slectionnez l'icne reprsentant un clair, ct de la zone de texte Cocher si, puis slectionnez le champ dans la liste des sources de donnes. La source de donnes doit contenir des donnes boolennes telles que Yes et No, ou true et false. Si aucune source de donnes n'apparat dans la liste ou si aucune des sources disponibles ne correspond vos besoins, cliquez sur le bouton Plus (+) pour dfinir une nouvelle source. Dans la zone de texte Egal , tapez la valeur que le champ doit contenir pour que la case cocher soit active. Par exemple, pour que la case soit active lorsqu'un champ donn d'un enregistrement a la valeur Yes, tapez Yes dans la zone de texte Egal . Remarque : Cette valeur est galement renvoye au serveur si l'utilisateur clique sur le bouton Envoyer du formulaire.
Activation dynamique d'un bouton radio HTML

Activez dynamiquement un bouton radio HTML lorsqu'un enregistrements s'affiche dans le formulaire HTML dans un navigateur.
Haut de la page
Avant de commencer, vous devez crer le formulaire dans une page ColdFusion, PHP ou ASP, puis insrer au moins un groupe de boutons radio HTML (Insertion > Formulaire > Groupe de boutons radio). Vous devez galement dfinir un jeu d'enregistrements ou une autre source de contenu dynamique pour les boutons radio. L'idal serait que la source de contenu contienne des donnes boolennes, telles que Yes/No ou true/false. 1. En mode Cration, slectionnez un bouton radio dans le groupe. 2. Dans l'inspecteur Proprits, cliquez sur le bouton Dynamique. 3. Compltez les options de la bote de dialogue Groupe de boutons radio dynamiques, puis cliquez sur OK.
Dfinition des options de la bote de dialogue Groupe de boutons radio dynamiques

1. Dans le menu droulant Groupe de boutons radio dynamiques, slectionnez un formulaire et un groupe de boutons radio de la page. La zone Valeurs de boutons radio affiche la valeur de chaque bouton radio du groupe. 2. Dans la liste des valeurs affiches, slectionnez la valeur prslectionner dynamiquement. Cette valeur s'affiche dans la zone de texte Valeur. 3. Cliquez sur l'icne en forme d'clair situe en regard de la zone de texte Slectionner une valeur gale , puis slectionnez un jeu d'enregistrements contenant des valeurs possibles pour les boutons radio du groupe. Le jeu d'enregistrements que vous slectionnez contient des valeurs correspondant celles des boutons radio. Pour afficher les valeurs des boutons radio, slectionnez chaque bouton, puis ouvrez son inspecteur Proprits (Fentre > Proprits).
572
4. Cliquez sur OK.
Dfinition des options de la bote de dialogue Groupe de boutons radio dynamiques (ColdFusion)
1. Dans le menu droulant Groupe de boutons radio, slectionnez un groupe de boutons radio et un formulaire. 2. Cliquez sur l'icne en forme d'clair en regard de la zone de texte Slectionner une valeur gale . 3. Renseignez la bote de dialogue Donnes dynamiques, puis cliquez sur OK. a. Slectionnez une source de donnes dans la liste. b. (Facultatif) Slectionnez un format de donnes pour le texte. c. (Facultatif) Modifiez le code que Dreamweaver insre dans votre page pour afficher le texte dynamique. 4. Cliquez sur OK pour fermer la bote de dialogue Groupe de boutons radio dynamiques et insrer l'espace rserv du contenu dynamique.
Validation de donnes de formulaire HTML
Haut de la page
Dreamweaver permet d'ajouter un code JavaScript permettant de vrifier le contenu des champs de texte spcifis afin de garantir que l'utilisateur a bien saisi le type de donnes appropri. Vous pouvez utiliser des widgets de formulaire Spry pour crer vos formulaires et valider le contenu d'lments de formulaires spcifiques. Pour plus d'informations, consultez les rubriques consacres Spry ci-dessous. Vous pouvez galement crer dans Dreamweaver des formulaires ColdFusion qui valident le contenu de certains champs. Pour plus d'informations, consultez le chapitre consacr ColdFusion ci-dessous. 1. Crez un formulaire HTML qui comprend au moins un champ de texte et un bouton Envoyer. Assurez-vous que chaque champ de texte que vous souhaitez valider porte un nom unique. 2. Slectionnez le bouton Envoyer. 3. Dans le panneau Comportements (Fentre > Comportements), cliquez sur le bouton Plus (+) et slectionnez le comportement Valider le formulaire dans la liste. 4. Dfinissez les rgles de validation de chaque champ de texte et cliquez sur OK. Par exemple, vous pouvez spcifier qu'un champ de texte utilis pour l'ge d'une personne n'accepte que les chiffres. Remarque : Le comportement Valider le formulaire est uniquement disponible lorsqu'un champ de texte a t insr dans le document.
Liaison de comportements JavaScript des objets de formulaire HTML

1. Slectionnez l'objet de formulaire HTML.
Haut de la page
Vous pouvez associer des comportements JavaScript stocks dans Dreamweaver des objets de formulaire HTML tels que des boutons.
2. Dans le panneau Comportements (Fentre > Comportements), cliquez sur le bouton Plus (+) et slectionnez un comportement dans la liste.
Liaison de scripts personnaliss des boutons de formulaire HTML
Haut de la page
Certains formulaires utilisent JavaScript ou VBScript pour effectuer des actions (traitement du formulaire, par exemple) ct client, plutt que d'envoyer les donnes de formulaire au serveur pour leur traitement. Avec Dreamweaver, vous pouvez configurer un bouton de formulaire pour excuter un script particulier ct client lorsqu'un utilisateur clique sur le bouton. 1. Slectionnez un bouton Envoyer dans un formulaire. 2. Dans le panneau Comportements (Fentre > Comportements), cliquez sur le bouton Plus (+) et choisissez Appel JavaScript dans la liste. 3. Dans la zone Appel JavaScript, tapez le nom de la fonction JavaScript excuter lorsque l'utilisateur clique sur le bouton, puis cliquez sur OK. Vous pouvez, par exemple, indiquer le nom d'une fonction qui n'existe pas encore, comme processMyForm(). 4. Si la fonction JavaScript ne figure pas encore dans la section head du document, ajoutez-la maintenant. Par exemple, vous pouvez dfinir la fonction JavaScript suivante dans la section head du document afin d'afficher un message lorsque l'utilisateur clique sur le bouton Envoyer. function processMyForm(){ alert('Thanks for your order!'); }
Cration de formulaires HTML accessibles

573
Haut de la page
Lorsque vous insrez un objet de formulaire HTML, vous pouvez rendre l'objet de formulaire accessible et modifier les attributs d'accessibilit ultrieurement.
Ajout d'un objet de formulaire accessible

1. La premire fois que vous ajoutez des objets de formulaire accessibles, activez la bote de dialogue Accessibilit pour les objets de formulaire (consultez la section Optimisation de l'espace de travail pour le dveloppement visuel). Vous devez effectuer cette opration une seule fois. 2. Dans le document, placez le point d'insertion l'endroit o l'objet de formulaire doit apparatre. 3. Choisissez Insertion > Formulaire, puis l'objet de formulaire insrer. La bote de dialogue Attributs d'accessibilit aux balises d'entre s'affiche. 4. Compltez les options de la bote de dialogue, puis cliquez sur OK. Voici une liste partielle des options : Remarque : Le lecteur d'cran lit le nom que vous avez entr en tant qu'attribut Label de l'objet. ID attribue un ID au champ de formulaire. Cette valeur peut tre utilise pour faire rfrence au champ partir de JavaScript. Elle est galement utilise comme valeur de l'attribut for si vous activez l'option Joindre une balise d'tiquette l'aide de l'attribut For du groupe Style. Envelopper avec une balise d'tiquette Entoure l'lment de formulaire d'une balise d'tiquette, comme suit : <label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label> Joindre une balise d'tiquette l'aide de l'attribut 'for' Utilise l'attribut for pour entourer l'lment de formulaire d'une balise d'tiquette, comme suit : <input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label> Si vous choisissez cette option, le navigateur place un rectangle de slection sur le texte associ une case cocher ou un bouton radio et permet l'utilisateur d'activer la case cocher ou le bouton radio en cliquant n'importe o dans le texte associ. Remarque : Il s'agit de l'option d'accessibilit la plus courante. Toutefois, cette fonction peut varier selon le navigateur utilis. Aucune balise d'tiquette N'utilise pas de balise d'tiquette, comme suit: <input type="radio" name="radiobutton" value="radiobutton"> RadioButton3 Cl d'accs Utilise un quivalent clavier (une lettre) et la touche Alt (Windows) ou Ctrl (Macintosh) pour slectionner l'objet de formulaire dans le navigateur. Par exemple, si vous entrez B comme Cl d'accs, les utilisateurs de Macintosh peuvent appuyer sur Ctrl+B pour slectionner l'objet de formulaire. Ordre des tabulations Indique l'ordre d'apparition des objets de formulaire. Si vous dfinissez un ordre d'apparition pour un objet, assurezvous de le faire galement pour tous les autres objets. La dfinition d'un ordre d'apparition peut se rvler utile lorsque la page contient d'autres liens et d'autres objets de formulaire et que vous voulez que l'utilisateur passe de l'un l'autre dans un ordre particulier. 5. Cliquez sur Oui pour insrer une balise de formulaire. L'objet de formulaire apparat dans le document. Remarque : Si vous cliquez sur Annuler, l'objet de formulaire s'affiche dans le document, mais Dreamweaver ne lui associe ni les balises ni les attributs d'accessibilit.
Modification des valeurs d'accessibilit pour un objet de formulaire

1. Dans la fentre de document, slectionnez l'objet. 2. Effectuez l'une des oprations suivantes : Modifiez les attributs en mode Code. Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis choisissez Modifier la balise. Voir aussi Didacticiel consacr la cration de formulaires Didacticiel consacr la mise en page de formulaires
574
Connexions aux bases de donnes pour les dveloppeurs ASP

A propos des connexions aux bases de donnes ASP A propos des connexions OLE DB A propos des chanes de connexion Cration d'une connexion en utilisant un DSN local Cration d'une connexion en utilisant un DSN distant Cration d'une connexion en utilisant une chane de connexion Modification ou suppression d'une connexion une base de donnes
A propos des connexions aux bases de donnes ASP
Haut de la page
Une application ASP doit se connecter une base de donnes via un pilote ODBC ou un fournisseur de OLE DB. Le pilote ou le fournisseur joue le rle de traducteur pour permettre l'application Web de communiquer avec la base de donnes. Le tableau suivant rpertorie certains des pilotes que vous pouvez utiliser avec les bases de donnes Microsoft Access, Microsoft SQL Server et Oracle : Base de donnes Microsoft Access Pilote de base de donnes Pilote Microsoft Access (ODBC) Microsoft Jet Provider pour Access (OLE DB) Microsoft SQL Server Pilote Microsoft SQL Server (ODBC) Fournisseur Microsoft SQL Server (OLE DB) Oracle Pilote Microsoft Oracle (ODBC) Fournisseur Oracle pour OLE DB
Vous pouvez utiliser un DSN (Data Source Name, nom de source de donnes) ou une chane de connexion pour vous connecter la base de donnes. Vous devez utiliser une chane de connexion si vous vous connectez via un fournisseur OLE DB ou via un pilote ODBC qui n 'est pas install sur un systme Windows. Un DSN est un identificateur form d'un seul mot (MaConnexion, par exemple), qui pointe vers la base de donnes et contient toutes les informations requises pour s'y connecter. Le DSN se dfinit dans Windows. Vous pouvez utiliser un DSN si vous vous connectez via un pilote ODBC install sur un systme Windows. Une chane de connexion est une expression saisie la main qui identifie la base de donnes et fournit les informations requises pour s'y connecter, comme le montre l'exemple suivant : Driver={SQL Server};Server=Socrates;Database=AcmeMktg; UID=wiley;PWD=roadrunner Remarque : Vous pouvez galement utiliser une chane de connexion si vous vous connectez via un pilote ODBC install sur un systme Windows, mais il est plus facile d'utiliser un DSN.
Haut de la page
A propos des connexions OLE DB
Vous pouvez utiliser un fournisseur OLE DB pour communiquer avec votre base de donnes (OLE DB n'est disponible que sous Windows NT, 2000 ou XP). Le fait de crer une connexion une OLE DB directe et spcifique la base de donnes peut augmenter la vitesse de connexion en liminant l'intermdiaire ODBC entre votre application Web et la base de donnes. Si vous ne prcisez pas de fournisseur de OLE DB pour votre base de donnes, ASP utilisera le fournisseur par dfaut pour les pilotes ODBC pour communiquer avec un pilote ODBC, lequel communiquera son tour avec la base de donnes. Diffrents fournisseurs de OLE DB existent pour diffrentes bases de donnes. Vous pouvez obtenir des fournisseurs de OLE DB pour Microsoft Access et SQL Server en tlchargeant et en installant les packs Microsoft Data Access Components (MDAC) 2.5 et 2.7 sur l'ordinateur Windows excutant IIS. Vous pouvez tlcharger et installer les packs MDAC gratuitement partir du site Web de Microsoft l'adresse http://msdn.microsoft.com/data/mdac/downloads/. Remarque : Assurez-vous que vous disposez de MDAC 2.5 avant d'installer MDAC 2.7. Vous pouvez tlcharger les fournisseurs de OLE DB pour les bases de donnes Oracle sur le site Web d'Oracle, l'adresse
575
www.oracle.com/technology/software/tech/windows/ole_db/index.html (enregistrement obligatoire). Pour crer une connexion OLE DB dans Dreamweaver, vous devez inclure un paramtre Provider (Fournisseur) dans une chane de connexion. Voici par exemple des paramtres de fournisseurs de OLE DB courants pour les bases de donnes Access, SQL Server et Oracle, respectivement : Provider=Microsoft.Jet.OLEDB.4.0;... Provider=SQLOLEDB;... Provider=OraOLEDB;... Pour connatre le paramtre de votre fournisseur de OLE DB, consultez la documentation du fournisseur de votre pilote ou consultez votre administrateur systme.
A propos des chanes de connexion
Haut de la page
Une chane de connexion regroupe toutes les informations dont votre application Web a besoin pour se connecter une base de donnes. Dreamweaver insre cette chane dans vos scripts de page ct serveur afin que ceux-ci soient ultrieurement traits par votre serveur d'application. Une chane de connexion aux bases de donnes Microsoft Access et SQL Server se compose des paramtres suivants, spars par des pointsvirgules : Provider (Fournisseur) Indique le fournisseur OLE DB pour votre base de donnes. Voici par exemple des paramtres de fournisseurs de OLE DB courants pour les bases de donnes Access, SQL Server et Oracle, respectivement : Provider=Microsoft.Jet.OLEDB.4.0;... Provider=SQLOLEDB;... Provider=OraOLEDB;... Pour connatre le paramtre de votre fournisseur de OLE DB, consultez la documentation du fournisseur de votre pilote ou consultez votre administrateur systme. Si vous n'incluez pas le paramtre Provider (Fournisseur), le fournisseur de OLE DB par dfaut pour ODBC sera utilis et vous devrez prciser un pilote ODBC appropri pour votre base de donnes. Driver (Pilote) Indique le pilote ODBC utiliser si vous ne spcifiez pas de fournisseur de OLE DB pour votre base de donnes. Server (Serveur) Indique le serveur hbergeant la base de donnes SQL Server si votre application Web est excute sur un serveur diffrent. Base de donnes Est le nom d'une base de donnes SQL Server. DBQ Est le chemin une base de donnes base sur fichier (une base de donnes cre dans Microsoft Access, par exemple). Le chemin est celui sur le serveur hbergeant le fichier de base de donnes. UID Indique le nom de l'utilisateur. PWD Indique le mot de passe de l'utilisateur. DSN Est le nom de la source de donnes, si toutefois vous en utilisez une. Selon la faon dont vous dfinissez le DSN sur votre serveur, vous pouvez omettre les autres paramtres de la chane de connexion. Par exemple, DSN=Results peut constituer une chane de connexion valide si vous dfinissez les autres paramtres lorsque vous crez le DSN. Il est galement possible que ces paramtres aient un nom ou une utilisation diffrents pour d'autres types de bases de donnes. Pour plus d'informations, consultez la documentation du fournisseur de votre base de donnes ou consultez votre administrateur systme. Voici un exemple de chane de connexion crant une connexion ODBC une base de donnes Access appele arbres.mdb : Driver={Microsoft Access Driver (*.mdb)}; DBQ=C:\Inetpub\wwwroot\Research\trees.mdb Voici un exemple de chane de connexion crant une connexion OLE DB un systme de base de donnes SQL Server appel Mothra et se trouvant sur un serveur du nom de Gojira : Provider=SQLOLEDB;Server=Gojira;Database=Mothra;UID=jsmith; PWD=orlando8
Cration d'une connexion en utilisant un DSN local
Haut de la page
Remarque : Pour raliser les oprations prsentes dans la prsente section, vous devez avoir configur une application ASP. Une base de donnes doit galement tre installe sur votre ordinateur local ou sur un systme auquel vous pouvez accder en rseau ou par FTP. Vous pouvez utiliser un DSN (Data Source Name, nom de source de donnes) pour crer une connexion ODBC entre votre application Web et votre base de donnes. Un DSN est un nom contenant tous les paramtres ncessaires pour tablir la connexion une base de donnes prcise l'aide d'un pilote ODBC. Comme vous pouvez uniquement spcifier un pilote ODBC dans un DSN, vous devez utiliser une chane de connexion si vous souhaitez passer
576
par un fournisseur de OLE DB. Vous pouvez utiliser un DSN dfini localement pour crer une connexion une base de donnes dans Dreamweaver. 1. Dfinissez un DSN sur l'ordinateur Windows excutant Dreamweaver. Pour obtenir des instructions, consultez les articles suivants sur le site Web de Microsoft : Si votre ordinateur fonctionne sous Windows 2000, consultez l'article 300596 de la base de connaissances Microsoft l'adresse suivante :http://support.microsoft.com/default.aspx?scid=kb;fr-fr;300596 Si votre ordinateur fonctionne sous Windows XP, consultez l'article 305599 de la base de connaissances Microsoft l'adresse suivante :http://support.microsoft.com/default.aspx?scid=kb;fr-fr;305599 2. Ouvrez une page ASP dans Dreamweaver, puis accdez au panneau Bases de donnes (Fentre > Bases de donnes). 3. Cliquez sur le bouton Plus (+) dans le panneau et slectionnez Nom de la source de donnes (DSN) dans le menu. 4. Entrez un nom pour la nouvelle connexion, sans espaces ni caractres spciaux. 5. Activez l'option Utilisation du DSN local et choisissez le DSN que vous souhaitez utiliser dans le menu Nom de la source de donnes (DSN). Si vous voulez utiliser un DSN local mais n'en avez pas encore dfini, cliquez sur Dfinir pour ouvrir l'administrateur de sources de donnes ODBC Windows. 6. Renseignez les zones Nom d'utilisateur et Mot de passe. 7. Vous pouvez limiter le nombre d'lments de base de donnes rcuprs par Dreamweaver au moment de la conception en cliquant sur Avanc puis en saisissant un nom de schma ou de catalogue. Remarque : Vous ne pouvez pas crer de schma ou de catalogue dans Microsoft Access. 8. Cliquez sur Tester pour vous connecter la base de donnes, puis cliquez sur OK. Si la connexion n'aboutit pas, double-cliquez sur la chane de connexion ou vrifiez les paramtres du dossier d'valuation utilis par Dreamweaver pour traiter les pages dynamiques.
Cration d'une connexion en utilisant un DSN distant
Haut de la page
Remarque : Pour raliser les oprations prsentes dans la prsente section, vous devez avoir configur une application ASP. Une base de donnes doit galement tre installe sur votre ordinateur local ou sur un systme auquel vous pouvez accder en rseau ou par FTP. Remarque : Dreamweaver ne peut rcuprer que les DSN de serveur crs l'aide de l'administrateur de source de donnes ODBC Windows. Vous pouvez utiliser un DSN dfini sur un ordinateur distant pour crer une connexion une base de donnes dans Dreamweaver. Si vous souhaitez utiliser un DSN distant, celui-ci doit tre dfini sur l'ordinateur Windows excutant votre serveur d'application (probablement IIS). Remarque : Comme vous pouvez uniquement spcifier un pilote ODBC dans un DSN, vous devez utiliser une chane de connexion si vous souhaitez passer par un fournisseur de OLE DB. 1. Dfinissez un DSN sur le systme distant excutant votre serveur d'application. Pour obtenir des instructions, consultez les articles suivants sur le site Web de Microsoft : Si votre ordinateur fonctionne sous Windows 2000, consultez l'article 300596 de la base de connaissances Microsoft l'adresse suivante :http://support.microsoft.com/default.aspx?scid=kb;fr-fr;300596 Si votre ordinateur fonctionne sous Windows XP, consultez l'article 305599 de la base de connaissances Microsoft l'adresse suivante :http://support.microsoft.com/default.aspx?scid=kb;fr-fr;305599 2. Ouvrez une page ASP dans Dreamweaver, puis ouvrez le panneau Bases de donnes (Fentre > Bases de donnes). 3. Cliquez sur le bouton Plus (+) dans le panneau et slectionnez Nom de la source de donnes (DSN) dans le menu. 4. Entrez un nom pour la nouvelle connexion, sans espaces ni caractres spciaux. 5. Slectionnez Utilisation de la DSN sur le serveur d'valuation Remarque : Les utilisateurs Macintosh peuvent ignorer cette tape car toutes les connexions des bases de donnes utilisent des DSN sur le serveur d'application. 6. Tapez le DSN or ou cliquez sur le bouton DSN pour vous connecter au serveur et slectionnez le DSN pour la base de donnes de votre choix, puis dfinissez les options. 7. Renseignez les zones Nom d'utilisateur et Mot de passe. 8. Vous pouvez limiter le nombre d'lments de base de donnes rcuprs par Dreamweaver au moment de la conception en cliquant sur Avanc puis en saisissant un nom de schma ou de catalogue. Remarque : Vous ne pouvez pas crer de schma ou de catalogue dans Microsoft Access. 9. Cliquez sur Tester pour vous connecter la base de donnes, puis cliquez sur OK. Si la connexion n'aboutit pas, double-cliquez sur la chane de connexion ou vrifiez les paramtres du dossier d'valuation utilis par Dreamweaver pour traiter les pages dynamiques.
Cration d'une connexion en utilisant une chane de connexion
Haut de la page
Vous pouvez utiliser une connexion sans DSN pour crer une connexion ODBC ou OLE DB entre votre application Web et votre base de donnes. Il faut utiliser une chane de connexion pour crer ce type de connexion.
577
1. Ouvrez une page ASP dans Dreamweaver, puis accdez au panneau Bases de donnes (Fentre > Bases de donnes). 2. Cliquez sur le bouton Plus (+) dans le panneau et slectionnez Chane de connexion personnalise dans le menu. Dfinissez les options, puis cliquez sur OK. 3. Entrez un nom pour la nouvelle connexion, sans espaces ni caractres spciaux. 4. Tapez une chane de connexion vers la base de donnes. Si vous n'indiquez pas de fournisseur de BD OLE dans la chane de connexion, c'est--dire si vous ne saisissez pas de paramtre Provider (Fournisseur), ASP utilisera automatiquement le fournisseur de BD OLE pour les pilotes ODBC. Dans ce cas, vous devrez indiquer un pilote ODBC appropri pour votre base de donnes. Si votre site est hberg par un fournisseur d'accs Internet et que vous ne connaissez pas le chemin d'accs complet votre base de donnes, utilisez la mthode MapPath de l'objet de serveur ASP dans votre chane de connexion. 5. Si le pilote de base de donnes spcifi dans la chane de connexion n'est pas install sur le mme ordinateur que Dreamweaver, slectionnez Utilisation du pilote sur le serveur d'valuation. Remarque : Les utilisateurs Macintosh peuvent ignorer cette tape car toutes les connexions aux bases de donnes utilisent le serveur d'application. 6. Vous pouvez limiter le nombre d'lments de base de donnes rcuprs par Dreamweaver au moment de la conception en cliquant sur Avanc puis en saisissant un nom de schma ou de catalogue. Remarque : Vous ne pouvez pas crer de schma ou de catalogue dans Microsoft Access. 7. Cliquez sur Tester pour vous connecter la base de donnes, puis cliquez sur OK. Si la connexion n'aboutit pas, double-cliquez sur la chane de connexion ou vrifiez les paramtres du dossier d'valuation utilis par Dreamweaver pour traiter les pages dynamiques.
Connexion une base de donnes via un fournisseur d'accs

Si vous tes un dveloppeur ASP travaillant pour un fournisseur d'accs Internet, il est probable que vous ne connaissez pas le chemin physique d'accs aux fichiers que vous chargez, y compris celui de vos fichiers de base de donnes. Si votre fournisseur d'accs ne dfinit pas de DSN pour vous ou ne le fait pas assez rapidement, vous devez trouver un autre moyen de crer des connexions vos fichiers de base de donnes. Vous pouvez crer une connexion sans DSN un fichier de base de donnes, mais une telle connexion n'est possible que si vous connaissez le chemin d'accs physique du fichier de base de donnes sur le serveur du fournisseur d'accs. Vous pouvez obtenir le chemin d'accs physique un fichier de base de donnes prsent sur un serveur en utilisant la mthode MapPath de l'objet serveur ASP. Remarque : Les techniques prsentes dans la prsente section sont valables uniquement si votre base de donnes est base sur un fichier, comme par exemple, une base de donnes Microsoft Access, qui stocke les donnes dans un fichier .mdb.
Description des chemins d'accs physiques et virtuels

Lorsque vous chargez vos fichiers sur un serveur distant en utilisant Dreamweaver, ces derniers sont placs dans un dossier situ dans l'arborescence locale du serveur. Par exemple, sur un serveur excutant Microsoft IIS, le chemin d'accs vers votre page d'accueil peut se prsenter comme suit : c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm Il s'agit du chemin d'accs physique vers votre fichier. En revanche, l'URL permettant d'ouvrir votre fichier n'utilise pas de chemin d'accs physique. Elle utilise le nom de serveur ou de domaine suivi d'un chemin d'accs virtuel, comme dans l'exemple suivant : www.plutoserve.com/jsmith/index.htm Le chemin d'accs virtuel, /jsmith/index.htm, remplace le chemin d'accs physique, c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm.
Recherche du chemin d'accs physique d'un fichier en utilisant le chemin virtuel

Si vous travaillez avec un fournisseur d'accs, il se peut que vous ne connaissiez pas le chemin d'accs physique des fichiers que vous chargez. Gnralement, les fournisseurs d'accs vous fournissent un hte FTP, parfois un rpertoire hte, ainsi qu'un nom de connexion et un mot de passe. Ils vous indiquent galement une URL pour visualiser vos pages sur Internet, telle que www.plutoserve.com/jsmith/. Si vous connaissez cette URL, vous pouvez obtenir le chemin d'accs virtuel d'un fichier : il s'agit du chemin qui suit le nom du serveur ou du domaine qui figure dans une URL. Une fois que vous connaissez le chemin d'accs virtuel, vous pouvez obtenir le chemin d'accs physique un fichier prsent sur le serveur en utilisant la mthode MapPath. La mthode MacPath utilise le chemin d'accs virtuel comme argument et renvoie le chemin d'accs physique et le nom du fichier. Voici la syntaxe de la mthode : Server.MapPath("/virtualpath") Si le chemin virtuel d'un fichier est /jsmith/index.htm, l'expression suivante permet d'obtenir son chemin d'accs physique : Server.MapPath("/jsmith/index.htm")
578
Vous pouvez utiliser la mthode MacPath comme suit. 1. Ouvrez une page ASP dans Dreamweaver et basculez en mode Code (Affichage > Code). 2. Saisissez l'expression suivante dans le code HTML de la page. <%Response.Write(stringvariable)%> 3. Utilisez la mthode MapPath afin d'obtenir une valeur pour l'argument stringvariable. Exemple : <% Response.Write(Server.MapPath("/jsmith/index.htm")) %> 4. Passez au mode En direct (Affichage > Affichage en direct) pour afficher la page. La page affiche le chemin physique du fichier sur le serveur d'application, par exemple : c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm Pour plus d'informations sur la mthode MapPath, consultez la documentation en ligne disponible avec Microsoft IIS.
Utilisation d'un chemin d'accs virtuel pour tablir une connexion une base de donnes
Pour crire une chane de connexion sans DSN dans un fichier de base de donnes situ sur un serveur distant, vous devez connatre le chemin d'accs physique au fichier. Par exemple, voici une chane de connexion sans DSN typique pour une base de donnes Microsoft Access : Driver={Microsoft Access Driver (*.mdb)}; DBQ=c:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb Si vous ne connaissez pas le chemin d'accs physique vos fichiers sur le serveur distant, vous pouvez l'obtenir en utilisant la mthode MapPath dans votre chane de connexion. 1. Chargez le fichier de base de donnes le fichier de base de donnes sur le serveur distant et notez son chemin d'accs virtuel (par exemple, /jsmith/data/statistics.mdb). 2. Ouvrez une page ASP dans Dreamweaver, puis ouvrez le panneau Bases de donnes (Fentre > Bases de donnes). 3. Cliquez sur le bouton Plus (+) dans le panneau et slectionnez Chane de connexion personnalise dans le menu. 4. Entrez un nom pour la nouvelle connexion, sans espaces ni caractres spciaux. 5. Tapez la chane de connexion et utilisez la mthode MapPath pour fournir le paramtre DBQ. Supposons que le chemin virtuel vers votre base de donnes Microsoft Access soit /jsmith/data/statistics.mdb. La chane de connexion peut tre exprime 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 utilise pour concatner (combiner) deux chanes. La premire chane est entre guillemets et la deuxime est fournie par l'expression Server.MapPath. Lorsque les deux chanes sont combines, la chane suivante est cre : Driver={Microsoft Access Driver (*.mdb)}; DBQ=C:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb Si vous utilisez JavaScript, l'expression est quasiment identique ; la seule diffrence rside dans l'utilisation d'un signe plus (+) au lieu d'une esperluette (&) pour concatner les deux chanes : "Driver={Microsoft Access Driver (*.mdb)};DBQ=" + Server.MapPath ("/jsmith/data/statistics.mdb") 6. Slectionnez Utilisation du pilote sur le serveur d'valuation, cliquez sur Tester, puis cliquez sur OK. Remarque : Les utilisateurs Macintosh peuvent ignorer cette tape car toutes les connexions aux bases de donnes utilisent le serveur d'application. Remarque : Si la connexion n'choue, cliquez deux fois sur la chane de connexion ou contactez votre fournisseur d'accs pour vous assurer que le pilote de base de donnes que vous avez spcifi dans la chane de connexion est install sur le serveur distant. Vrifiez galement que le fournisseur d'accs dispose de la version la plus rcente du pilote. Par exemple, une base de donnes cre dans Microsoft Access 2000 ne fonctionnera pas avec Microsoft Access Driver 3.5. Vous devez utiliser Microsoft Access Driver, version 4.0 ou ultrieure. 7. Mettez jour la connexion de base de donnes des pages dynamiques existantes (ouvrez la page dans Dreamweaver, double-cliquez sur le nom du jeu d'enregistrements dans le panneau Liaisons ou Comportements de serveur, et slectionnez la connexion que vous venez de crer dans le menu Connexion), et utilisez la nouvelle connexion avec toutes les nouvelles pages que vous crerez.
579
Modification ou suppression d'une connexion une base de donnes
Haut de la page
Lorsque vous crez une connexion une base de donnes, Dreamweaver enregistre les informations de connexion dans un fichier inclus, dans le sous-dossier Connections du dossier racine local du site. Vous pouvez les modifier ou les supprimer manuellement dans le fichier ou en procdant de la faon suivante :
Modification d'une connexion

1. Ouvrez une page ASP dans Dreamweaver, puis accdez au panneau Bases de donnes (Fentre > Bases de donnes). 2. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur la connexion et choisissez Modifier la connexion dans le menu. 3. Modifiez les informations de connexion, puis cliquez sur OK. Dreamweaver met automatiquement jour le fichier inclus, ce qui actualise toutes les pages du site qui utilisent la connexion.
Suppression d'une connexion

1. Ouvrez une page ASP dans Dreamweaver, puis accdez au panneau Bases de donnes (Fentre > Bases de donnes). 2. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur la connexion et choisissez Supprimer la connexion dans le menu. 3. Dans la bote de dialogue qui s'affiche, confirmez que vous souhaitez supprimer la connexion. Remarque : Pour viter de recevoir des erreurs dues la suppression d'une connexion, mettez jour tous les jeux d'enregistrements qui utilisent l'ancienne connexion en double-cliquant sur le nom du jeu d'enregistrements dans le panneau Liaisons et en choisissant une nouvelle connexion. Voir aussi
580
Connexions aux bases de donnes pour les dveloppeurs ColdFusion

Connexion une base de donnes ColdFusion Cration ou modification d'une source de donnes ColdFusion Connexion la base de donnes dans Dreamweaver
Connexion une base de donnes ColdFusion
Haut de la page
Pour dvelopper une application Web ColdFusion sous Dreamweaver, vous devez vous connecter une base de donnes en choisissant une source de donnes ColdFusion dfinie dans Dreamweaver ou la console de gestion du serveur ColdFusion Administrator. Avant d'tablir une connexion une base de donnes, vous devez configurer une application Web ColdFusion. Vous devez galement installer une base de donnes sur votre ordinateur local ou sur un systme auquel vous pouvez accder en rseau ou par FTP. Assurez-vous galement que Dreamweaver sait o aller chercher les sources de donnes ColdFusion. Pour rcuprer les sources de donnes ColdFusion au moment de la conception, Dreamweaver place des scripts dans un dossier sur l'ordinateur excutant ColdFusion. Vous devez indiquer ce dossier dans la catgorie Serveur d'valuation de la bote de dialogue Dfinition du site. Ensuite, vous devez crer une source de donnes ColdFusion dans Dreamweaver ou le programme ColdFusion Administrator (s'il n'en existe pas dj une). Une fois la source de donnes ColdFusion cre, vous pouvez l'utiliser dans Dreamweaver pour vous connecter la base de donnes.
Cration ou modification d'une source de donnes ColdFusion
Haut de la page
Pour tre en mesure d'utiliser les informations d'une base de donnes dans une page Web, vous devez d'abord crer une source de donnes ColdFusion. Si vous utilisez la version 7 ou ultrieure de ColdFusion MX, vous pouvez directement crer ou modifier la source de donnes dans Dreamweaver. Si vous utilisez ColdFusion MX, vous devez utiliser la console de gestion sur le serveur, ColdFusion MX Administrator, pour crer ou modifier la source de donnes. Dans ce cas, vous pouvez toutefois utiliser Dreamweaver pour ouvrir ColdFusion MX Administrator.
Cration ou modification d'une source de donnes ColdFusion avec ColdFusion MX 7 ou version ultrieure
1. Vrifiez qu'un ordinateur excutant ColdFusion MX 7 ou version ultrieure est dfini comme serveur d'valuation pour votre site. 2. Ouvrez une page ColdFusion dans Dreamweaver. 3. Pour crer une source de donnes, cliquez sur le bouton Plus (+) dans le panneau Bases de donnes (Fentre > Bases de donnes) et saisissez les valeurs des paramtres spcifiques au pilote de base de donnes. Remarque : Dreamweaver n'affiche le bouton Plus que si vous excutez ColdFusion MX 7 ou une version ultrieure. 4. Pour modifier une source de donnes, double-cliquez sur le bouton de connexion la base de donnes dans le panneau Bases de donnes, et modifiez les valeurs ncessaires. Vous pouvez modifier tous les paramtres, sauf le nom de la source de donnes. Pour plus d'informations, consultez la documentation du fournisseur du pilote ou consultez votre administrateur systme.
Cration ou modification d'une source de donnes ColdFusion avec ColdFusion MX 6.1 ou 6.0
1. Ouvrez une page ColdFusion dans Dreamweaver. 2. Dans le panneau Bases de donnes (Fentre > Bases de donnes) de Dreamweaver, cliquez sur Modifier les sources de donnes dans la barre d'outils. 3. Connectez-vous ColdFusion MX Administrator et crez ou modifiez la source de donnes. Pour plus d'informations, consultez l'aide de ColdFusion (Aide > Aide de ColdFusion). Vous devez fournir certaines valeurs de paramtres pour crer la source de donnes ColdFusion. Pour les valeurs de paramtres spcifiques votre pilote de base de donnes, consultez la documentation de votre fournisseur ou contactez votre administrateur systme. Une fois que vous avez cr une source de donnes ColdFusion, vous pouvez l'utiliser dans Dreamweaver.
Connexion la base de donnes dans Dreamweaver
Haut de la page
Une fois la source de donnes ColdFusion cre, vous pouvez l'utiliser dans Dreamweaver pour vous connecter la base de donnes.
581
Ouvrez n'importe quelle page ColdFusion dans Dreamweaver, puis allez dans le panneau Bases de donnes (Fentre > Bases de donnes). Vos sources de donnes ColdFusion s'affichent dans le panneau. Si ce n'est pas le cas, remplissez la liste de contrle du panneau. Assurez-vous galement que Dreamweaver sait o aller chercher les sources de donnes ColdFusion. Dans la catgorie Serveur d'valuation de la bote de dialogue Dfinition du site, indiquez le dossier racine du site sur l'ordinateur excutant ColdFusion. Voir aussi Configuration d'un serveur d'valuation
582
Connexions aux bases de donnes pour les dveloppeurs PHP

A propos des connexions aux bases de donnes PHP Etablissement d'une connexion une base de donnes Modification ou suppression d'une connexion une base de donnes
A propos des connexions aux bases de donnes PHP
Haut de la page
Pour le dveloppement PHP, Dreamweaver prend uniquement en charge le systme de base de donnes MySQL. Les autres systmes de base de donnes, tels que Microsoft Access ou Oracle ne sont pas pris en charge. MySQL est un logiciel ouvert que vous pouvez tlcharger gratuitement partir d'Internet des fins non commerciales. Pour plus d'informations, consultez le site Web MySQL, l'adresse http://dev.mysql.com/downloads/. Pour raliser les oprations prsentes dans la prsente section, vous devez avoir configur une application PHP. Une base de donnes MySQL doit galement tre installe sur votre ordinateur local ou sur un systme auquel vous pouvez accder en rseau ou par FTP. Pour les besoins du dveloppement, tlchargez et installez la version Windows Essentials du serveur de base de donnes MySQL.
Etablissement d'une connexion une base de donnes
Haut de la page
Pour tablir une connexion une base de donnes lors du dveloppement d'une application PHP dans Dreamweaver, vous devez disposer d'une ou plusieurs bases de donnes MySQL et le serveur MySQL doit tre dmarr. 1. Ouvrez une page PHP dans Dreamweaver, puis ouvrez le panneau Bases de donnes (Fentre > Bases de donnes). 2. Cliquez sur le bouton Plus (+) dans le panneau, slectionnez Connexion MySQL dans le menu et dfinissez les options de la bote de dialogue. Entrez un nom pour la nouvelle connexion, sans espaces ni caractres spciaux. Dans la zone Serveur MySQL, entrez une adresse IP ou un nom de serveur pour l'ordinateur qui hberge MySQL. Si MySQL et PHP s'excutent sur le mme ordinateur, vous pouvez entrer localhost. Entrez votre nom d'utilisateur et mot de passe MySQL. Dans la zone Base de donnes, entrez le nom de la base de donnes ou cliquez sur Slectionner et choisissez une base de donnes dans la liste de bases de donnes MySQL, puis cliquez sur Tester. Dreamweaver tente d'tablir la connexion la base de donnes. Si la connexion choue, revrifiez le nom du serveur, le nom d'utilisateur et le mot de passe. Si la connexion n'aboutit toujours pas, vrifiez les paramtres du dossier d'valuation utilis par Dreamweaver pour traiter les pages dynamiques. Dreamweaver tente de deviner au mieux la valeur entrer automatiquement pour le prfixe d'URL dans la catgorie Serveur d'valuation de la bote de dialogue Dfinition du site. Toutefois, il peut parfois s'avrer ncessaire de modifier le prfixe d'URL pour garantir le fonctionnement de votre connexion. Assurez-vous que le prfixe d'URL est bien l'URL que les utilisateurs entrent dans leur navigateur pour ouvrir l'application Web, moins le nom de fichier (ou la page d'accueil) de l'application. 3. Cliquez sur OK. Remarque : Si vous voyez le message d'erreur Client does not support authentication protocol requested. Consider upgrading MySQL client (Le client ne prend pas en charge le protocole d'identification requis. Essayez de mettre jour le client MySQL.) lors de l'valuation d'une connexion de base de donnes PHP MySQL 4.1, consultez la section Rsolution des messages d'erreur MySQL.
Modification ou suppression d'une connexion une base de donnes
Haut de la page
Lorsque vous crez une connexion une base de donnes, Dreamweaver enregistre les informations de connexion dans un fichier inclus, dans le sous-dossier Connections du dossier racine local du site. Vous pouvez les modifier ou les supprimer manuellement dans le fichier ou en procdant de la faon suivante :
Modification d'une connexion

1. Ouvrez une page PHP dans Dreamweaver, puis ouvrez le panneau Bases de donnes (Fentre > Bases de donnes). 2. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur la connexion et choisissez Modifier la connexion dans le menu. 3. Modifiez les informations de connexion, puis cliquez sur OK.
583
Dreamweaver met automatiquement jour le fichier inclus, ce qui actualise toutes les pages du site qui utilisent la connexion.
Suppression d'une connexion

1. Ouvrez une page PHP dans Dreamweaver, puis ouvrez le panneau Bases de donnes (Fentre > Bases de donnes). 2. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh) sur la connexion et choisissez Supprimer la connexion dans le menu. 3. Dans la bote de dialogue qui s'affiche, confirmez que vous souhaitez supprimer la connexion. Remarque : Pour viter les erreurs conscutives la suppression d'une connexion, mettez jour chaque jeu d'enregistrements utilisant l'ancienne connexion en double-cliquant sur le nom du jeu dans le panneau Liaisons et en choisissant une nouvelle connexion dans la bote de dialogue Jeu d'enregistrements. Voir aussi
584
Dfinition de sources de contenu dynamique

Dfinition un jeu d'enregistrements sans rdiger d'instructions SQL Rdaction d'instructions SQL en vue de la dfinition d'un jeu d'enregistrements avanc Cration de requtes SQL l'aide de l'arborescence Elments de base de donnes Dfinition de paramtres d'URL Dfinition de paramtres de formulaire Dfinition de variables de session Dfinition de variables d'application dans ASP et ColdFusion Utilisation d'une variable comme source de donnes pour un jeu d'enregistrements de ColdFusion Dfinition de variables de serveur Mise en mmoire cache de sources de contenu Modification ou suppression de sources de contenu Copie d'un jeu d'enregistrements d'une page vers une autre
Dfinition un jeu d'enregistrements sans rdiger d'instructions SQL

Vous pouvez crer un jeu d'enregistrements sans avoir entrer d'instructions SQL manuellement. 1. Dans la fentre de document, ouvrez la page devant utiliser le jeu d'enregistrements. 2. Choisissez Fentre > Liaisons pour afficher le panneau Liaisons.
Haut de la page
3. Dans le panneau Liaisons, cliquez sur le bouton Plus (+) et choisissez Jeu d'enregistrements (Requte) dans le menu droulant. La bote de dialogue Jeu d'enregistrements simplifie s'affiche. Si vous dveloppez un site ColdFusion, la bote de dialogue Jeu d'enregistrements qui s'affiche est lgrement diffrente. (Si la bote de dialogue Jeu d'enregistrements avance s'affiche, cliquez sur le bouton Simple pour ouvrir sa version simplifie.) 4. Compltez les options de la bote de dialogue Jeu d'enregistrements pour votre type de document. Pour obtenir des instructions, consultez les rubriques ci-dessous. 5. Cliquez sur le bouton Tester pour excuter la requte et vrifier qu'elle rcupre les informations attendues. Si vous avez dfini un filtre qui utilise les paramtres saisis par l'utilisateur, saisissez une valeur dans la zone Valeur test et cliquez sur OK. Si la cration d'une instance du jeu d'enregistrements aboutit, une table contenant les donnes 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.
Options de la bote de dialogue Jeu d'enregistrements simplifie (PHP, ASP)

1. Dans la zone Nom, saisissez le nom du jeu d'enregistrements. Il est d'usage d'ajouter le prfixe rs aux noms des jeux d'enregistrements, afin de les distinguer des autres noms d'objet dans le code, par exemple : rsPressReleases. Les noms des jeux d'enregistrements ne peuvent contenir que des lettres, des chiffres et des caractres de soulignement (_). Ils ne doivent pas comporter d'espaces ni de caractres spciaux. 2. Slectionnez une connexion dans le menu droulant Connexion. Si aucune connexion n'apparat dans la liste, cliquez sur Dfinir pour en crer une. 3. Dans le menu droulant Table, slectionnez la table de base de donnes qui fournira des donnes au jeu d'enregistrements. Ce menu droulant rpertorie toutes les tables de la base de donnes spcifie. 4. Pour inclure un sous-ensemble des colonnes de la table dans le jeu d'enregistrements, cliquez sur Slectionnes, puis cliquez sur les colonnes souhaites tout en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfonce. 5. Pour limiter le nombre d'enregistrements renvoys depuis la table, compltez la section Filtre : Dans le premier menu droulant, slectionnez un champ de la table comparer la valeur de rfrence dfinie. Dans le deuxime menu droulant, slectionnez une expression conditionnelle pour comparer la valeur slectionne dans chaque enregistrement la valeur de rfrence. Dans le troisime menu droulant, slectionnez Valeur entre. Dans la zone, saisissez la valeur test.
585
Si la valeur indique dans un enregistrement rpond aux conditions de filtrage, l'enregistrement est inclus dans le jeu d'enregistrements. 6. (Facultatif) Pour trier les enregistrements, slectionnez une colonne de tri, puis indiquez si les enregistrements doivent tre tris dans l'ordre croissant (1, 2, 3... ou A, B, C...) ou dcroissant. 7. Cliquez sur Tester pour vous connecter la base de donnes et crer une instance de la source de donnes, et cliquez sur OK pour fermer la source de donnes. Un tableau rpertoriant les donnes renvoyes s'affiche. Chaque ligne contient un enregistrement et chaque colonne un champ de cet enregistrement. 8. Cliquez sur OK. Le jeu d'enregistrements que vous venez de dfinir s'affiche dans le panneau Liaisons.
Options de la bote de dialogue Jeu d'enregistrements simplifie (ColdFusion)

Dfinissez un jeu d'enregistrements pour les types de document ColdFusion comme source de contenu dynamique, sans qu'il soit ncessaire de rdiger manuellement des instructions SQL. 1. Dans la zone Nom, saisissez le nom du jeu d'enregistrements. Il est d'usage d'ajouter le prfixe rs aux noms des jeux d'enregistrements afin de les distinguer des autres noms d'objet dans le code. Par exemple : rsPressReleases Les noms des jeux d'enregistrements ne peuvent contenir que des lettres, des chiffres et des caractres de soulignement (_). Ils ne doivent pas comporter d'espaces ni de caractres spciaux. 2. Si vous dfinissez un jeu d'enregistrements pour un composant ColdFusion (si un fichier CFC est ouvert dans Dreamweaver), slectionnez une fonction CFC existante dans le menu droulant Fonction, ou cliquez sur le bouton Nouvelle fonction pour crer une fonction. Remarque : Le menu droulant Fonction n'est disponible que si le document actuel est un fichier CFC, et si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou version ultrieure. Le jeu d'enregistrements sera dfini dans cette fonction. 3. Slectionnez une source de donnes dans le menu droulant Source de donnes. Si le menu droulant ne contient aucune source de donnes, vous devez crer une source de donnes ColdFusion. 4. Dans les zones Nom d'utilisateur et Mot de passe, tapez le nom d'utilisateur et le mot de passe permettant d'accder au serveur d'application ColdFusion, le cas chant. Il se peut qu'un nom d'utilisateur et un mot de passe soient ncessaires pour accder aux sources de donnes dans ColdFusion. S'ils ne vous ont pas t communiqus, contactez l'administrateur ColdFusion de votre socit. 5. Dans le menu droulant Table, slectionnez la table de base de donnes qui fournira des donnes au jeu d'enregistrements. Ce menu droulant rpertorie toutes les tables de la base de donnes spcifie. 6. Pour inclure un sous-ensemble des colonnes de la table dans le jeu d'enregistrements, cliquez sur Slectionnes, puis cliquez sur les colonnes souhaites tout en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfonce. 7. Pour limiter le nombre d'enregistrements renvoys depuis la table, compltez la section Filtre : Dans le premier menu droulant, slectionnez un champ de la table comparer la valeur de rfrence dfinie. Dans le deuxime menu droulant, slectionnez une expression conditionnelle pour comparer la valeur slectionne dans chaque enregistrement la valeur de rfrence. Dans le troisime menu droulant, slectionnez Valeur entre. Dans la zone, saisissez la valeur test. Si la valeur indique dans un enregistrement rpond aux conditions de filtrage, l'enregistrement est inclus dans le jeu d'enregistrements. 8. (Facultatif) Pour trier les enregistrements, slectionnez une colonne de tri, puis indiquez si les enregistrements doivent tre tris dans l'ordre croissant (1, 2, 3... ou A, B, C...) ou dcroissant. 9. Cliquez sur Tester pour vous connecter la base de donnes et crer une instance de la source de donnes. Un tableau rpertoriant les donnes renvoyes s'affiche. Chaque ligne contient un enregistrement et chaque colonne un champ de cet enregistrement. Cliquez sur OK pour fermer le jeu d'enregistrements test. 10. Cliquez sur OK. Le jeu d'enregistrements ColdFusion que vous venez de dfinir s'affiche dans le panneau Liaisons.
Rdaction d'instructions SQL en vue de la dfinition d'un jeu d'enregistrements avanc
Haut de la page
Rdigez vos propres instructions SQL l'aide de la bote de dialogue Jeu d'enregistrements avance, ou crez une instruction SQL l'aide de l'arborescence Elments de base de donnes graphique.
586
1. Dans la fentre de document, ouvrez la page devant utiliser le jeu d'enregistrements. 2. Choisissez Fentre > Liaisons pour afficher le panneau Liaisons. 3. Dans le panneau Liaisons, cliquez sur le bouton Plus (+) et choisissez Jeu d'enregistrements (Requte) dans le menu droulant. La bote de dialogue Jeu d'enregistrements avance s'affiche. Si vous dveloppez un site ColdFusion, la bote de dialogue Jeu d'enregistrements qui s'affiche est lgrement diffrente. (Si la bote de dialogue Jeu d'enregistrements simplifie s'affiche la place, cliquez sur le bouton Avanc pour en ouvrir la version avance.) 4. Dfinissez les options de la bote de dialogue Jeu d'enregistrements avance. Pour obtenir des instructions, consultez les rubriques ci-dessous. 5. Cliquez sur le bouton Tester pour excuter la requte et vrifier qu'elle rcupre les informations attendues. Si vous avez dfini un filtre qui utilise les paramtres saisis par l'utilisateur, la bote de dialogue Valeur test s'affiche lorsque vous cliquez sur le bouton Tester. Saisissez une valeur dans la zone Valeur test et cliquez sur OK. Si la cration d'une instance du jeu d'enregistrements aboutit, une table contenant les donnes 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.
Options de la bote de dialogue Jeu d'enregistrements avance (PHP, ASP)

Dfinissez un jeu d'enregistrements comme source de contenu dynamique en rdigeant une instruction SQL personnalise ou en crant une instruction SQL au moyen de l'arborescence graphique Elments de base de donnes. 1. Dans la zone Nom, saisissez le nom du jeu d'enregistrements. Il est d'usage d'ajouter le prfixe rs aux noms des jeux d'enregistrements, afin de les distinguer des autres noms d'objet dans le code. Par exemple : rsPressRelease Les noms des jeux d'enregistrements ne peuvent contenir que des lettres, des chiffres et des caractres de soulignement (_). Ils ne doivent pas comporter d'espaces ni de caractres spciaux. 2. Slectionnez une connexion dans le menu droulant Connexion. 3. Saisissez une instruction SQL dans la zone de texte SQL ou utilisez l'arborescence graphique Elments de base de donnes situe au bas de la bote de dialogue pour crer une instruction SQL partir du jeu d'enregistrements slectionn. Pour crer une instruction SQL l'aide de l'arborescence Elments de base de donnes, procdez comme suit : Vrifiez que la zone de texte SQL est vierge. Dveloppez les branches de l'arborescence jusqu' ce que vous trouviez l'objet de base de donnes souhait, par exemple une colonne de table ou une procdure stocke dans la base de donnes. Slectionnez l'objet de base de donnes et cliquez sur l'un des boutons situs droite de l'arborescence. Par exemple, si vous slectionnez une colonne de table, les boutons disponibles sont SELECT, WHERE et ORDER BY. Cliquez sur l'un de ces boutons pour insrer l'instruction associe dans l'instruction SQL. Vous pouvez galement utiliser une instruction SQL prdfinie issue d'une procdure stocke en slectionnant la procdure stocke dans l'arborescence Elments de base de donnes et en cliquant sur le bouton Procdure. Dreamweaver remplit automatiquement les zones SQL et Variable. 4. Si l'instruction SQL contient des variables, dfinissez leurs valeurs dans la zone Variables en cliquant sur le bouton Plus (+) et en saisissant le nom de la variable, son type (entier, texte, date ou nombre virgule flottante), sa valeur par dfaut (celle que doit prendre la variable si aucune valeur d'excution n'est renvoye) et sa valeur d'excution. Remarque : Lorsque vous employez des variables dans une instruction SQL dans PHP, Dreamweaver ajoute automatiquement un signe dollar au dbut du nom de la variable. N'en ajoutez pas un manuellement (tapez donc nomcolonne et pas $nomcolonne ). Si l'instruction SQL contient des variables, assurez-vous que la colonne Valeur par dfaut de la section Variables contient des valeurs test correctes. La valeur d'excution correspond gnralement un paramtre d'URL ou de formulaire saisi par l'utilisateur dans un champ de formulaire HTML. Paramtres d'URL dans la colonne Valeur d'excution :
Modle de serveur
Expression de la valeur d'excution dans le cas d'un paramtre d'URL Request.QueryString(formFieldName) $_GET['formFieldName']
ASP PHP
587
Paramtres de formulaire dans la colonne Valeur d'excution.
Modle de serveur
Expression de la valeur d'excution dans le cas d'un paramtre de formulaire Request.Form(formFieldName) $_POST['formFieldName']
ASP PHP
5. Cliquez sur Tester pour vous connecter la base de donnes et crer une instance du jeu d'enregistrements. Si l'instruction SQL contient des variables, vrifiez que la colonne Valeur par dfaut de la section Variables contient des valeurs test correctes avant de cliquer sur Tester. Un tableau rpertoriant les donnes de votre jeu d'enregistrements s'affiche alors. Chaque ligne contient un enregistrement et chaque colonne un champ de cet enregistrement. Cliquez sur OK pour effacer le jeu. 6. Si le rsultat vous convient, cliquez sur OK.
Options de la bote de dialogue Jeu d'enregistrements avance (ColdFusion)

La bote de dialogue Jeu d'enregistrements avance vous permet de rdiger des requtes SQL personnalises ou de crer des requtes SQL au moyen de l'interface pointer-cliquer de l'arborescence Elments de base de donnes. 1. Dans la zone Nom, saisissez le nom du jeu d'enregistrements. Il est d'usage d'ajouter le prfixe rs aux noms des jeux d'enregistrements afin de les distinguer des autres noms d'objet dans le code. Par exemple : rsPressReleases Les noms des jeux d'enregistrements ne peuvent contenir que des lettres, des chiffres et des caractres de soulignement (_). Ils ne doivent pas comporter d'espaces ni de caractres spciaux. Si vous dfinissez un jeu d'enregistrements pour un composant ColdFusion (si un fichier CFC est ouvert dans Dreamweaver), slectionnez une fonction CFC existante dans le menu droulant Fonction, ou cliquez sur le bouton Nouvelle fonction pour crer une fonction. Remarque : Le menu droulant Fonction n'est disponible que si le document actuel est un fichier CFC, et si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou version ultrieure. Le jeu d'enregistrements sera dfini dans cette fonction. 2. Slectionnez une source de donnes dans le menu droulant Source de donnes. Si le menu droulant ne contient aucune source de donnes, vous devez au pralable crer une source de donnes ColdFusion. 3. Dans les zones Nom d'utilisateur et Mot de passe, tapez le nom d'utilisateur et le mot de passe permettant d'accder au serveur d'application ColdFusion, le cas chant. Il se peut qu'un nom d'utilisateur et un mot de passe soient ncessaires pour accder aux sources de donnes dans ColdFusion. S'ils ne vous ont pas t communiqus, contactez l'administrateur ColdFusion de votre socit. 4. Saisissez une instruction SQL dans la zone de texte SQL ou utilisez l'arborescence graphique Elments de base de donnes situe au bas de la bote de dialogue pour crer une instruction SQL partir du jeu d'enregistrements slectionn. 5. (Facultatif) Pour crer une instruction SQL l'aide de l'arborescence Elments de base de donnes, procdez comme suit : Vrifiez que la zone de texte SQL est vierge. Dveloppez les branches de l'arborescence jusqu' ce que vous trouviez l'objet souhait, par exemple une colonne de table. Slectionnez l'objet de base de donnes et cliquez sur l'un des boutons situs droite de l'arborescence. Par exemple, si vous slectionnez une colonne de table, les boutons disponibles sont SELECT, WHERE et ORDER BY. Cliquez sur l'un de ces boutons pour insrer l'instruction associe dans l'instruction SQL. Si l'instruction SQL contient des paramtres, dfinissez leurs valeurs dans la zone Paramtres en cliquant sur le bouton Plus (+) et en saisissant le nom du paramtre et sa valeur par dfaut (celle que doit prendre le paramtre si aucune valeur d'excution n'est renvoye). Si l'instruction SQL contient des paramtres, vrifiez que la colonne Valeur par dfaut de la zone Paramtres contient des valeurs test correctes. Les paramtres de la page vous permettent d'indiquer les valeurs par dfaut des rfrences aux valeurs d'excution contenues dans vos instructions SQL. Par exemple, l'instruction SQL suivante slectionne un enregistrement d'une base de donnes rpertoriant les employs d'une entreprise suivant la valeur du matricule de l'employ. Vous pouvez attribuer une valeur par dfaut ce paramtre pour vous assurer qu'une valeur d'excution sera toujours renvoye. Dans l'exemple suivant, FormFieldName dsigne un champ de formulaire dans lequel les utilisateurs saisissent leur matricule :
588
SELECT * FROM Employees WHERE EmpID = + (Request.Form(#FormFieldName#)) La bote de dialogue Add Page Parameters (Ajouter des paramtres de page) contiendrait alors une paire nom-valeur semblable celle prsente ci-dessous :
Nom FormFieldName
Valeurs par dfaut
0001
La valeur d'excution correspond gnralement un paramtre d'URL ou de formulaire saisi par l'utilisateur dans un champ de formulaire HTML. 6. Cliquez sur Tester pour vous connecter la base de donnes et crer une instance du jeu d'enregistrements. Si l'instruction SQL contient des rfrences des valeurs d'excution, vrifiez que la colonne Valeur par dfaut du champ Paramtres de la page contient des valeurs test correctes avant de cliquer sur Tester. Un tableau rpertoriant les donnes de votre jeu d'enregistrements s'affiche alors. Chaque ligne contient un enregistrement et chaque colonne un champ de cet enregistrement. Cliquez sur OK pour effacer le jeu. 7. Si le rsultat vous convient, cliquez sur OK.
Dfinition de paramtres dans une instruction SQL (ColdFusion)

Dfinissez des paramtres dans une instruction SQL ; la valeur par dfaut est celle attribue au paramtre lorsque aucune valeur d'excution n'est renvoye. 1. Slectionnez un paramtre dans le menu droulant Nom. 2. Dans la zone Paramtre par dfaut, saisissez la valeur par dfaut que vous souhaitez attribuer au paramtre, et cliquez sur OK.
Dfinition de paramtres dans une instruction SQL (PHP)

Dfinissez des paramtres dans une instruction SQL ; la valeur par dfaut est celle attribue au paramtre lorsque aucune valeur d'excution n'est renvoye. 1. Entrez un nom de paramtre dans la zone Nom. 2. Dans la zone Paramtre par dfaut, saisissez la valeur par dfaut que vous souhaitez attribuer au paramtre. 3. Tapez une valeur d'excution dans la zone Valeur d'excution puis sur OK.
Cration de requtes SQL l'aide de l'arborescence Elments de base de donnes
Haut de la page
Au lieu de saisir manuellement des instructions SQL dans la zone SQL, vous pouvez utiliser l'interface pointer-cliquer de l'arborescence Elments de base de donnes pour crer des requtes complexes SQL. L'arborescence Elments de base de donnes permet de slectionner des objets de base de donnes et de les lier au moyen des instructions SQL SELECT, WHERE et ORDER BY. Aprs avoir cr une requte SQL, vous pouvez dfinir des variables dans la section Variables de la bote de dialogue. Les deux exemples suivants prsentent deux instructions SQL et dcrivent les tapes de cration de ces instructions l'aide de l'arborescence Elments de base de donnes de la bote de dialogue Jeu d'enregistrements avance.
Exemple : Slection d'une table

Dans cet exemple, la requte slectionne l'intgralit de la table Employees. L'instruction SQL dfinissant la requte se prsente de la faon suivante : SELECT * FROM Employees Pour crer cette requte, procdez comme suit. 1. Dveloppez la branche Tables pour afficher toutes les tables de la base de donnes slectionne. 2. Slectionnez la table Employees. 3. Cliquez sur le bouton Select. 4. Cliquez sur OK pour ajouter le jeu d'enregistrements au panneau Liaisons.
Exemple : Slection de lignes spcifiques d'une table et classement des rsultats

Dans l'exemple suivant, la requte slectionne deux lignes de la table Employees, puis slectionne le type de tche (job) l'aide d'une variable que vous devez dfinir. Les rsultats sont ensuite classs par nom d'employ.
589
SELECT emplNo, emplName FROM Employees WHERE emplJob = 'varJob' ORDER BY emplName 1. Dveloppez la branche Tables pour afficher toutes les tables de la base de donnes slectionne, puis dveloppez la table Employees pour afficher les lignes individuelles de la table. 2. Gnrez l'instruction SQL en procdant de la faon suivante : Slectionnez emplNo et cliquez sur le bouton Select. Slectionnez emplName et cliquez sur bouton Select. Slectionnez emplJob et cliquez sur le bouton Where. Slectionnez emplName et cliquez sur le bouton Order By. 3. Placez le point d'insertion aprs WHERE emplJob dans la zone de texte SQL et tapez ='varJob' (y compris le signe gal). 4. Dfinissez la variable 'varJob' en cliquant sur le bouton Plus (+) de la zone Variables et en saisissant les valeurs suivantes dans les colonnes Nom, Valeur par dfaut et Valeur d'excution : varJob, CLERK, Request("job"). 5. Cliquez sur OK pour ajouter le jeu d'enregistrements au panneau Liaisons.
Dfinition de paramtres d'URL
Haut de la page
Les paramtres d'URL permettent de stocker les informations saisies par les utilisateurs. Avant de commencer, vrifiez que vous avez transmis un paramtre de formulaire ou d'URL au serveur. Aprs avoir dfini la variable d'URL, vous pouvez utiliser sa valeur dans la page slectionne. 1. Dans la fentre de document, ouvrez la page devant utiliser la variable. 2. Choisissez Fentre > 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 droulant :
Types de document
Elment du menu du panneau Liaisons permettant de dfinir une variable d'URL Variable de demande > Request.QueryString Variable d'URL Variable d'URL
ASP ColdFusion PHP
4. Dans la bote de dialogue Variable d'URL, tapez le nom de la variable d'URL dans la zone puis cliquez sur OK. En gnral, 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.
Dfinition de paramtres de formulaire
Haut de la page
Les paramtres de formulaire permettent de stocker les informations rcupres dans la requte HTTP d'une page Web. Si vous crez un formulaire utilisant la mthode POST, les donnes envoyes par le formulaire sont transmises au serveur. Avant de commencer, vrifiez que vous avez transmis un paramtre de formulaire au serveur. Aprs avoir dfini le paramtre de formulaire comme source de contenu, vous pouvez l'utiliser dans une page. 1. Dans la fentre de document, ouvrez la page devant utiliser la variable. 2. Choisissez Fentre > 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 droulant :
Types de document
Elment du menu du panneau Liaisons permettant de dfinir une variable de formulaire Variable de demande > Request.Form Variable de formulaire
ASP ColdFusion
590
PHP
Variable de formulaire
4. Dans la bote de dialogue Variable de formulaire, tapez le nom de la variable de formulaire et cliquez sur OK. En gnral, le nom du paramtre de formulaire correspond au nom du champ du formulaire HTML ou de l'objet utilis pour obtenir sa valeur. Le paramtre de formulaire s'affiche dans le panneau Liaisons.
Dfinition de variables de session
Haut de la page
Les variables de session permettent de mmoriser et d'afficher des informations conserves pendant toute la dure de la visite de l'utilisateur (ou session). Le serveur cre un objet de session diffrent pour chaque utilisateur et le conserve pendant une priode dfinie ou jusqu' ce qu'il soit explicitement clos. Avant de dfinir des variables de session pour une page, vous devez les crer dans le code source. Aprs avoir cr une variable de session dans le code source de l'application Web, vous pouvez utiliser Dreamweaver pour rcuprer sa valeur et l'utiliser dans une page Web. 1. Crez une variable de session dans le code source et attribuez-lui une valeur. Dans l'exemple suivant de ColdFusion, une instance de session appele username est cre, laquelle est attribue la valeurCornelius : <CFSET session.username = Cornelius> 2. Choisissez Fentre > Liaisons pour afficher le panneau Liaisons. 3. Cliquez sur le bouton Plus (+) et choisissez Variable d'application dans le menu droulant. 4. Tapez le nom de la variable que vous avez dfinie dans le code source de l'application, et cliquez sur OK.
Dfinition de variables d'application dans ASP et ColdFusion
Haut de la page
Dans ASP et ColdFusion, les variables d'application permettent de mmoriser et d'afficher des informations conserves pendant toute la dure d'utilisation de l'application, quel que soit l'utilisateur. Aprs avoir dfini une variable d'application, vous pouvez utiliser sa valeur dans une page. Remarque : Il n'existe pas d'objets de variable d'application dans PHP. 1. Ouvrez un type de document dynamique dans la fentre de document. 2. Choisissez Fentre > Liaisons pour afficher le panneau Liaisons. 3. Cliquez sur le bouton Plus (+) et choisissez Variable d'application dans le menu droulant. 4. Tapez le nom de la variable que vous avez dfinie dans le code source de l'application, et cliquez sur OK. La variable d'application s'affiche dans le panneau Liaisons, sous l'icne Application.
591
Utilisation d'une variable comme source de donnes pour un jeu d'enregistrements de ColdFusion
Haut de la page
Lorsque vous dfinissez un jeu d'enregistrements pour une page dans le panneau Liaisons, Dreamweaver entre le nom de la source de donnes ColdFusion dans la balise cfquery sur la page. Pour plus de flexibilit, vous pouvez stocker un nom de source de donnes dans une variable et utiliser cette dernire dans la balise cfquery. Dreamweaver permet de dfinir visuellement une variable de ce type dans vos jeux d'enregistrements. 1. Assurez-vous qu'une page ColdFusion est active dans la fentre de document. 2. Dans le panneau Liaisons, cliquez sur le bouton Plus (+) et choisissez Variable du nom de source de donnes dans le menu droulant. La bote de dialogue Variable du nom de source de donnes s'affiche. 3. Dfinissez une variable et cliquez sur OK. 4. Lorsque vous dfinissez le jeu d'enregistrements, slectionnez la variable comme source de donnes du jeu d'enregistrements. Dans la bote de dialogue Jeu d'enregistrements, la variable s'affiche dans le menu droulant Source de donnes ainsi que les sources de donnes ColdFusion sur le serveur. 5. Compltez les options de la bote de dialogue Jeu d'enregistrements, puis cliquez sur OK. 6. Initialisez la variable. Celle-ci n'est pas initialise automatiquement par Dreamweaver afin que vous puissiez le faire vous-mme votre convenance. Vous pouvez initialiser la variable dans le code de la page (avant la balise cfquery), dans un fichier inclus ou encore dans un autre fichier, comme variable d'application ou de session.
Dfinition de variables de serveur
Haut de la page
Vous dfinissez des variables de serveur comme sources de contenu dynamique pouvant tre utilises dans une application Web. Les variables de serveur varient d'un type de document l'autre et comprennent notamment les variables de formulaire, les variables d'URL, les variables de session et les variables d'application. Les variables de serveur sont accessibles tous les clients qui accdent au serveur et toutes les applications excutes sur le serveur. Les variables de serveur sont conserves jusqu' l'arrt du serveur.
Dfinition de variables de serveur ColdFusion

1. Ouvrez le panneau Liaisons (Fentre > Liaisons). Dans la bote de dialogue Variable de serveur, tapez le nom de la variable de serveur et cliquez sur OK. 2. Cliquez sur le bouton Plus (+) et choisissez la variable de serveur dans le menu droulant. 3. Saisissez le nom de l'objet et cliquez sur OK. La variable de serveur ColdFusion s'affiche dans le panneau Liaisons. Le tableau ci-dessous rpertorie les variables de serveur de ColdFusion intgres : Variable Server.ColdFusion.ProductName Server.ColdFusion.ProductVersion Server.ColdFusion.ProductLevel Server.ColdFusion.SerialNumber Server.OS.Name Description Nom de produit de ColdFusion. Numro de version de ColdFusion. Edition de ColdFusion (dition entreprise ou professionnelle). Numro de srie de la version de ColdFusion installe. Nom du systme d'exploitation excut sur le serveur (Windows XP, Windows 2000, Linux) Informations supplmentaires sur le systme d'exploitation install (Service Packs, mises jour). Version du systme d'exploitation install. Numro de compilation du systme d'exploitation install.
Server.OS.AdditionalInformation
Server.OS.Version Server.OS.BuildNumber
Dfinition d'une variable locale ColdFusion

Les variables locales sont cres au moyen de la balise CFSET ou CFPARAM dans une page ColdFusion. La variable locale dfinie s'affiche dans le panneau Liaisons.
592
Dans la bote de dialogue Variable locale, tapez le nom de la variable locale et cliquez sur OK.
Dfinition de variables de serveur ASP

Vous pouvez dfinir les variables de serveur ASP suivantes comme sources de contenu dynamique : Request.Cookie, Request.QueryString, Request.Form, Request.ServerVariables et Request.ClientCertificates. 1. Ouvrez le panneau Liaisons (Fentre > Liaisons). 2. Cliquez sur le bouton Plus (+) et choisissez Variable d'application dans le menu droulant. 3. Dans la bote de dialogue Variable de demande, slectionnez l'un des ensembles de demandes dans le menu droulant Type. L'ensemble QueryString Rcupre des informations annexes l'URL de la page mettrice, par exemple lorsque la page comprend un formulaire HTML utilisant la mthode GET. La chane de requte est compose d'une ou de plusieurs paires nom/valeur (par exemple, last=Smith, first=Winston) annexes l'URL avec un point d'interrogation (?). Si la chane de requte compte plusieurs paires nom/valeur, elles sont combines avec des esperluettes (&). L'ensemble Form Rcupre les informations de formulaire incluses dans le corps de la demande HTTP par un formulaire HTML utilisant la mthode POST. L'ensemble ServerVariables Rcupre les valeurs de variables d'environnement prdfinies. Cet ensemble contient une longue liste de variables, notamment CONTENT_LENGTH (longueur du contenu envoy dans la demande HTTP, qui permet de savoir si un formulaire est vierge) et HTTP_USER_AGENT (fournit des informations sur le navigateur de l'utilisateur). Par exemple, Request.ServerVariables("HTTP_USER_AGENT") contient des informations sur le navigateur expditeur, comme Mozilla/4.07 [en] (WinNT; I), qui indique un navigateur Netscape Navigator 4.07. La liste complte des variables d'environnement de serveur ASP figure dans la documentation en ligne fournie avec Microsoft Personal Web Server (PWS) ou Internet Information Server (IIS). L'ensemble Cookies Rcupre les valeurs des cookies envoys dans une demande HTTP. Par exemple, supposez que la page lise un cookie appel readMe sur l'ordinateur de l'utilisateur. Sur le serveur, les valeurs du cookie sont enregistres dans la variable Request.Cookies("readMe"). L'ensemble ClientCertificate Rcupre les zones de certification de la demande HTTP envoye par le navigateur. Les zones de certification sont spcifies dans la norme X.509. 4. Indiquez quelle variable de l'ensemble vous souhaitez accder, et cliquez sur OK. Par exemple, si vous souhaitez accder aux informations de la variable Request.ServerVariables("HTTP_USER_AGENT"), tapez l'argument HTTP_USER_AGENT. Si vous souhaitez accder aux informations de la variable Request.Form("lastname"), tapez l'argument lastname. La variable de demande s'affiche dans le panneau Liaisons.
Dfinition de variables de serveur PHP

Dfinissez des variables de serveur comme source de contenu dynamique pour les types de document PHP. Les variables de serveur PHP s'affichent dans le panneau Liaisons. 1. Ouvrez le panneau Liaisons (Fentre > Liaisons). 2. Cliquez sur le bouton Plus (+) et choisissez la variable de serveur dans le menu droulant. 3. Dans la bote de dialogue Variable de demande, tapez le nom de la variable (par exemple REQUEST_METHOD), puis cliquez sur OK. Pour plus d'informations, recherchez le mot cl $_SERVER dans la documentation de PHP.
Dfinition d'une variable client ColdFusion

Dfinissez une variable client ColdFusion comme source de contenu dynamique pour une page. Les variables de client ColdFusion que vous venez de dfinir s'affichent dans le panneau Liaisons. Dans la bote de dialogue Variable client, tapez le nom de la variable client et cliquez sur OK. Par exemple, pour accder aux donnes contenues dans la Client.LastVisit, tapez LastVisit. Les variables client sont des variables ajoutes au code pour associer des donnes un client spcifique. Elles conservent l'tat de l'application pendant que l'utilisateur passe d'une page l'autre et d'une session l'autre dans l'application. Il existe deux types de variables serveur : les variables intgres et les variables dfinies par l'utilisateur. Le tableau ci-dessous rpertorie les variables client ColdFusion intgres : Variable Client.CFID Description Identifiant incrmentiel attribu chacun des clients se connectant au serveur. Numro gnr alatoirement et permettant d'identifier un client spcifique de faon univoque.
593
Client.CFTOKEN
Client.URLToken
Combinaison de CFID et CFTOKEN devant tre transmise de modle en modle lorsque les cookies ne sont pas utiliss. Enregistre la date de la dernire visite effectue par un client. Nombre de demandes de pages lies un mme client (obtenu l'aide de CFID et CFTOKEN). Enregistre l'heure de la premire cration de CFID et CFTOKEN pour un client spcifique.
Client.LastVisit Client.HitCount
Client.TimeCreated
Dfinition d'une variable cookie ColdFusion

Les variables cookie sont cres au niveau du code et permettent d'accder aux informations contenues dans les cookies transmis au serveur par un navigateur. La variable cookie dfinie s'affiche dans le panneau Liaisons. Dans la bote de dialogue Variable cookie, tapez le nom de la variable client et cliquez sur OK.
Dfinition d'une variable CGI ColdFusion

La variable CGI dfinie s'affiche dans le panneau Liaisons. Dans la bote de dialogue Variable CGI, tapez le nom de la variable et cliquez sur OK. Par exemple, si vous souhaitez accder aux donnes contenues dans la CGI.HTTP_REFERER , saisissez HTTP_REFERER. Le tableau ci-dessous rpertorie les variables CGI de ColdFusion les plus frquemment cres sur le serveur : Variable SERVER_SOFTWARE Description Nom et version du logiciel du serveur d'informations rpondant la demande (et excutant la passerelle). Format : nom/version. Nom d'hte, alias DNS ou adresse IP du serveur tel qu'il/elle se prsente dans les URL d'appel. Rvision de la spcification CGI applique par le serveur. Format : CGI/rvision. Nom et rvision du protocole d'informations par lequel la demande a t transmise. Format : protocole/rvision. Numro du port auquel la demande a t envoye. Mthode utilise pour l'excution de la demande. Dans le cas de HTTP, il s'agit de Get, Head, Post, etc. Informations de chemin complmentaires, telles qu'elles sont fournies par le client. On accde aux scripts en utilisant leur nom de chemin virtuel suivi des informations complmentaires. Cellesci sont envoyes en tant que PATH_INFO. Le serveur fournit une version traduite de PATH_INFO, rsultat de la conversion du chemin virtuel en chemin physique. Chemin virtuel vers le script en cours d'excution. Variable utilise pour les URL d'appel. Informations de requte qui suivent le point d'interrogation (?) dans l'URL rfrenant le script. Nom de l'hte l'origine de la demande. Si le serveur ne dispose pas de cette information, il dfinit REMOTE_ADDR mais pas REMOTE_HOST. Adresse IP de l'hte distant l'origine de la demande. Si le serveur prend en charge l'authentification de l'utilisateur et que le script est protg, cette variable correspond la mthode d'authentification spcifique au protocole utilise pour vrifier l'identit de l'utilisateur.
SERVER_NAME
GATEWAY_INTERFACE
SERVER_PROTOCOL
SERVER_PORT REQUEST_METHOD
PATH_INFO
PATH_TRANSLATED
SCRIPT_NAME
QUERY_STRING
REMOTE_HOST
REMOTE_ADDR AUTH_TYPE
594
REMOTE_USER AUTH_USER
Si le serveur prend en charge l'authentification de l'utilisateur et que le script est protg, cette variable correspond au nom saisi par l'utilisateur lors de l'authentification (disponible galement sous la forme AUTH_USER). Si le serveur HTTP prend en charge l'identification RFC 931, cette variable reoit comme valeur le nom de l'utilisateur distant rcupr du serveur. Utilisez cette variable uniquement pour la connexion. Dans le cas de requtes assorties d'informations, telles que HTTP POST et PUT, cette variable correspond au type de contenu des donnes. Longueur du contenu, tel qu'il a t fourni par le client.
REMOTE_IDENT
CONTENT_TYPE
CONTENT_LENGTH
Le tableau ci-dessous rpertorie les variables CGI les plus frquemment cres par le navigateur et transmises au serveur : Variable HTTP_REFERER Description Document de rfrence. Il s'agit du document associ aux donnes de formulaire ou qui les envoie. Navigateur utilis par le client pour envoyer la demande. Format : logiciel/version bibliothque/version. Date de la dernire modification de la page. Cette variable est envoye suivant la configuration du navigateur, gnralement en rponse au serveur ayant envoy l'en-tte LAST_MODIFIED HTTP. Peut tre utilise pour tirer parti des possibilits de mise en mmoire cache au niveau du navigateur.
HTTP_USER_AGENT
HTTP_IF_MODIFIED_SINCE
Mise en mmoire cache de sources de contenu
Haut de la page
Vous pouvez stocker des sources de contenu dynamique dans une Design Note. Cette opration vous permet de travailler sur un site mme lorsque vous n'avez pas accs la base de donnes ou au serveur d'application contenant les sources de contenu dynamique. La mise en mmoire cache permet galement d'acclrer le processus de dveloppement puisqu'elle vite de se connecter en continu la base de donnes et au serveur d'application via le rseau. Cliquez sur la touche flche dans le coin suprieur droit du panneau Liaisons et choisissez Cache dans le menu droulant. Si vous modifiez l'une de vos sources de contenu, vous pouvez actualiser le cache en cliquant sur le bouton Actualiser (icne reprsentant une flche en forme de cercle), dans le coin suprieur droit du panneau Liaisons Agrandissez l'affichage si ce bouton n'apparat pas.
Modification ou suppression de sources de contenu
Haut de la page
Vous pouvez modifier ou supprimer n'importe quelle source de contenu dynamique, autrement dit n'importe quelle source de contenu figurant dans le panneau Liaisons. La modification ou la suppression d'une source de contenu dans le panneau Liaisons ne change ni ne supprime les instances de cette source sur la page. Cela affecte uniquement son rle de source de contenu pour la page.
Modification d'une source de contenu dans le panneau Liaisons

1. Dans le panneau Liaisons (Fentre > Liaisons), double-cliquez sur le nom de la source de contenu modifier. 2. Procdez aux modifications dans la bote de dialogue qui s'affiche. 3. Si le rsultat vous convient, cliquez sur OK.
Suppression d'une source de contenu dans le panneau Liaisons

1. Slectionnez la source souhaite dans le panneau Liaisons (Fentre > Liaisons). 2. Cliquez sur le bouton Moins (-).
Copie d'un jeu d'enregistrements d'une page vers une autre

Vous pouvez copier un jeu d'enregistrements d'une page une autre dans un site dfini.
595
Haut de la page
1. Slectionnez le jeu d'enregistrements dans le panneau Liaisons ou dans le panneau Comportements de serveur. 2. Cliquez sur le jeu d'enregistrements avec le bouton droit de la souris et choisissez Copier dans le menu droulant. 3. Ouvrez la page dans laquelle vous souhaitez coller le jeu d'enregistrements. 4. Cliquez avec le bouton droit de la souris dans le panneau Liaisons ou sur la barre d'outils Comportements de serveur, et choisissez Coller dans le menu droulant. Voir aussi Initiation SQL
596
Conception de pages dynamiques


Pour concevoir et crer un site Web dynamique avec succs, excutez la procdure gnrale suivante. 1. Conception de la page
Haut de la page
La conception visuelle de la page constitue l'une des tapes cls dans la conception d'un site Web, qu'il soit statique ou dynamique. En effet, lorsque vous ajoutez des lments dynamiques une page Web, son aspect fonctionnel dpend largement de sa conception. Rflchissez attentivement la faon dont les utilisateurs interagiront avec chacune des pages et avec le site Web dans son ensemble. L'une des mthodes les plus courantes pour insrer un contenu dynamique dans une page Web consiste crer un tableau pour prsenter le contenu puis importer le contenu dynamique dans une ou plusieurs des cellules du tableau. Cette mthode vous permet de prsenter divers types d'informations dans un format structur. 2. Cration d'une source de contenu dynamique Avant de pouvoir afficher des donnes dans une page, les sites Web dynamiques doivent tre associs une source de contenu d'o ils peuvent extraire les donnes. Avant de pouvoir utiliser des sources de contenu dans une page Web, effectuez les actions suivantes : Crez une connexion avec la source de contenu dynamique (telle qu'une base de donnes) et avec le serveur d'application charg du traitement de la page ; Crez la source de donnes l'aide du panneau Liaisons. Vous pouvez ensuite slectionner et insrer la source de donnes dans la page. Prcisez les informations de la base de donnes devant tre affiches ou les variables devant tre incluses dans la page en crant un jeu d'enregistrements. Vous avez galement la possibilit de tester la requte depuis la bote de dialogue Jeu d'enregistrements et de procder tous les rglages ncessaires avant de l'ajouter au panneau Liaisons. Slectionnez et insrez des lments de contenu dynamique dans la page slectionne. 3. Ajout de contenu dynamique une page Web Aprs avoir dfini un jeu d'enregistrements (ou toute autre source de donnes) et l'avoir ajout au panneau Liaisons, vous pouvez insrer le contenu dynamique associ au jeu d'enregistrements dans la page. Grce l'interface base de menus de Dreamweaver, il suffit de slectionner une source de contenu dynamique dans le panneau Liaisons et de l'insrer dans l'objet de texte, d'image ou de formulaire appropri au sein de la page en cours pour ajouter des lments de contenu dynamique. Lorsque vous insrez un lment de contenu dynamique ou un comportement de serveur dans une page, Dreamweaver insre un script ct serveur dans le code source de la page. Ce script donne pour instruction au serveur de rcuprer des donnes partir de la source dfinie et de les restituer dans la page Web. Pour insrer un contenu dynamique dans une page Web, procdez de l'une des manires suivantes : placez ce contenu au niveau du point d'insertion en mode Code ou Cration ; remplacez une chane de texte ou un autre espace rserv ; insrez le contenu dans un attribut HTML. Un contenu dynamique peut, par exemple, dfinir l'attribut src d'une image ou l'attribut de valeur d'un champ de formulaire. 4. Ajout de comportements de serveur une page En dehors de l'ajout de contenu dynamique, vous pouvez intgrer une logique applicative complexe dans des pages Web l'aide des comportements de serveur. Les comportements de serveur correspondent des sections de code prdfinies ct serveur qui ajoutent une logique applicative aux pages Web, ce qui optimise leur interactivit et leurs fonctionnalits. Les comportements de serveur de Dreamweaver vous permettent d'ajouter une logique applicative un site Web sans que vous ayez rdiger le code requis. Les comportements fournis avec Dreamweaver prennent en charge les types de document ColdFusion, ASP et PHP. Les comportements de serveur sont dvelopps et tests de sorte tre rapides, fiables et solides. Les comportements de serveur intgrs prennent en charge des pages adaptes diffrents types de plates-formes et de navigateurs. Grce l'interface pointer-cliquer de Dreamweaver, l'application de contenu dynamique et de comportements complexes une page est aussi simple que l'insertion d'lments de texte et de conception. Les comportements de serveur suivants sont disponibles : Dfinition d'un jeu d'enregistrements partir d'une base de donnes existante. Le jeu d'enregistrements que vous dfinissez est ensuite stock dans le panneau Liaisons.
597
Affichage de plusieurs enregistrements dans une mme page. Vous pouvez slectionner soit un tableau entier, soit des cellules ou lignes prcises renfermant un contenu dynamique, puis dfinir le nombre d'enregistrements afficher sur chaque page. Cration et insertion d'un tableau dynamique dans une page, puis association du tableau un jeu d'enregistrements. Vous pouvez ensuite modifier l'apparence du tableau et de la rgion rpte l'aide respectivement de l'inspecteur Proprits et du comportement de serveur Rgion rpte. Insertion d'un objet de texte dynamique dans une page. L'objet de texte que vous insrez est un lment provenant d'un jeu d'enregistrements prdfini auquel vous appliquez le format de donnes de votre choix. Cration de commandes de navigation entre enregistrements et d'tat des enregistrements, cration de pages Principale/Dtails et de formulaires destins mettre jour les informations d'une base de donnes. Affichage de plusieurs enregistrements partir d'un enregistrement de base de donnes. Cration de liens de navigation de jeu d'enregistrements afin de permettre aux utilisateurs d'afficher les enregistrements prcdant ou suivant un enregistrement de base de donnes. Ajout d'un compteur d'enregistrements pour aider les utilisateurs suivre le nombre d'enregistrements renvoys et leur emplacement dans le rsultat obtenu. Vous pouvez galement enrichir les comportements de serveur de Dreamweaver en rdigeant vos propres comportements ou en installant ceux rdigs par des tiers. 5. Test et dbogage de la page Avant de rendre une page dynamique (ou un site Web entier) accessible sur le Web, il est ncessaire d'en tester les fonctionnalits. Vous devriez galement examiner la faon dont les fonctionnalits de votre application peuvent tre adaptes aux personnes souffrant d'un handicap. Voir aussi Ajout et modification d'images
598
Affichage d'enregistrements d'une base de donnes

A propos des enregistrements de base de donnes Comportements de serveur et lments de formatage Application d'lments typographiques et de mise en forme de page des donnes dynamiques Navigation parmi les rsultats d'un jeu d'enregistrements de base de donnes Cration d'une barre de navigation de jeu d'enregistrements Barres de navigation de jeu d'enregistrements personnalises Tches de cration d'une barre de navigation Affichage et masquage des rgions en fonction des rsultats du jeu d'enregistrements Affichage de plusieurs rsultats d'un jeu d'enregistrements Cration d'un tableau dynamique Cration de compteurs d'enregistrements Utilisation de formats de donnes prdfinis
A propos des enregistrements de base de donnes
Haut de la page
Pour afficher des enregistrements de base de donnes, il faut rcuprer des informations stockes dans une source de contenu, telle qu'une base de donnes, et en effectuer le rendu dans une page Web. Dreamweaver offre de nombreuses mthodes d'affichage de contenu dynamique et propose plusieurs comportements de serveur intgrs. Ces derniers permettent d'amliorer la prsentation du contenu dynamique, de faciliter les recherches et de naviguer parmi les informations renvoyes par une base de donnes. Les bases de donnes et les autres sources de contenu dynamique permettent d'obtenir de meilleurs rsultats lors des oprations de recherche, de tri ou de consultation de volumes d'informations importants. L'utilisation d'une base de donnes pour stocker le contenu de sites Web est particulirement recommande lorsque vous souhaitez stocker des quantits importantes de donnes, puis les rcuprer pour les afficher d'une manire spcifique. Dreamweaver fournit diffrents outils et comportements prdfinis qui permettent de rcuprer et d'afficher efficacement les informations d'une base de donnes.
Comportements de serveur et lments de formatage
Haut de la page
Les comportements de serveur et les lments de formatage proposs par Dreamweaver pour enrichir la prsentation de donnes dynamiques sont les suivants : Formats Les formats permettent d'appliquer diffrents types de valeurs numriques, montaires, de date/heure et de pourcentage un texte dynamique. Par exemple, si le prix d'un lment dans un jeu d'enregistrements est de 10,989, vous pouvez l'afficher sur votre page sous la forme 10,99 en choisissant le format Devise - 2 dcimales de Dreamweaver. Dans ce format, les nombres s'affichent avec deux chiffres aprs la virgule. Si le nombre a plus de deux chiffres aprs 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 zros. Rgion rpte Ces comportements de serveur permettent d'afficher plusieurs lments renvoys par une requte de base de donnes et d'indiquer le nombre d'enregistrements afficher par page. Navigation de jeu d'enregistrements Ces comportements de serveur permettent d'insrer des lments de navigation dont les utilisateurs peuvent se servir pour passer au groupe d'enregistrements prcdent ou suivant renvoy par le jeu d'enregistrements. Supposons que vous choisissiez d'afficher dix enregistrements par page l'aide de l'objet de serveur Rgion rpte et que le jeu d'enregistrements renvoie 40 enregistrements ; vous pouvez alors parcourir les enregistrements par groupe de dix. Barre d'tat du jeu d'enregistrements Ces comportements de serveur permettent d'ajouter un compteur qui indique aux utilisateurs la position dans laquelle ils se trouvent au sein d'un groupe d'enregistrements par rapport au nombre total d'enregistrements renvoys. Afficher la rgion Ces comportements de serveur permettent d'afficher ou de masquer des lments de la page en fonction de la pertinence des enregistrements affichs. Par exemple, si un utilisateur consulte le dernier enregistrement d'un jeu, vous pouvez choisir de n'afficher que le lien Prcdent ; le lien Suivant est alors masqu.
Haut de la page
Application d'lments typographiques et de mise en forme de page des donnes dynamiques
Dreamweaver permet de prsenter des donnes dynamiques au sein d'une page structure et d'appliquer un formatage typographique l'aide de HTML et des feuilles de style en cascade. Pour appliquer des formats des donnes dynamiques dans Dreamweaver, mettez en forme les tableaux et les espaces rservs des donnes dynamiques l'aide des outils de formatage de Dreamweaver. Lors de leur insertion partir d'une source, les donnes adoptent automatiquement le formatage (police, style de paragraphe et tableau) spcifi.
599
Navigation parmi les rsultats d'un jeu d'enregistrements de base de donnes
Haut de la page
Les liens de navigation de jeu d'enregistrements permettent de se dplacer d'un enregistrement un autre ou d'un jeu d'enregistrements un autre. Aprs avoir cr une page devant afficher cinq enregistrements la fois, par exemple, vous pouvez ajouter des liens tels que Suivant ou Prcdent pour que l'utilisateur puisse afficher les cinq enregistrements suivants ou prcdents. Vous pouvez crer quatre types de liens pour la navigation dans les jeux d'enregistrements : Premier, Prcdent, Suivant et Dernier. Une page peut contenir un nombre illimit de liens, condition que tous agissent sur un mme jeu d'enregistrements : Vous ne pouvez pas insrer sur une mme page des liens d'accs des jeux d'enregistrements diffrents. Les lments dynamiques suivants sont ncessaires 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 cliquable. Un jeu de comportements serveur Dplacer vers l'enregistrement pour naviguer dans le jeu d'enregistrements. Vous pouvez ajouter simultanment les deux derniers lments en utilisant l'objet dynamique Barre de navigation des enregistrements ou bien les ajouter sparment en utilisant les outils de conception et le panneau Comportements de serveur.
Cration d'une barre de navigation de jeu d'enregistrements
Haut de la page
Vous pouvez crer en une seule opration une barre de navigation de jeu d'enregistrements l'aide du comportement de serveur correspondant. Cet objet de serveur ajoute les lments suivants la page : Un tableau HTML comportant des liens texte ou image. Un jeu de comportements de serveur Dplacer vers. Un jeu de comportements de serveur Afficher la rgion. La version texte de la barre de navigation du jeu d'enregistrements a l'aspect suivant :
La version image de la barre de navigation du jeu d'enregistrements a l'aspect suivant :
Avant de placer la barre de navigation dans la page, assurez-vous que la page contient un jeu d'enregistrements dans lequel naviguer et une mise en forme pour afficher les enregistrements. Aprs avoir plac la barre de navigation sur la page, vous pouvez personnaliser la barre votre gr l'aide des outils de conception. Vous pouvez galement modifier les comportements de serveur Dplacer vers et Afficher la rgion en double-cliquant dessus dans le panneau Comportements de serveur. Dreamweaver cre un tableau qui contient des liens texte ou image permettant l'utilisateur, lorsqu'il clique dessus, de se dplacer dans le jeu d'enregistrements slectionn. Lorsque le premier enregistrement du jeu s'affiche, les liens ou images Premier et Prcdent sont masqus. Lorsque le dernier enregistrement du jeu s'affiche, les liens ou images Suivant et Dernier sont masqus. Vous pouvez personnaliser la mise en forme de la barre de navigation l'aide des outils de conception et du panneau Comportements de serveur. 1. En mode Cration, placez le point d'insertion l'endroit de la page o vous souhaitez que la barre de navigation apparaisse. 2. Ouvrez la bote de dialogue Barre de navigation du jeu d'enregistrements (Insertion > Objets de donnes > Pagination du jeu d'enregistrements > Barre de navigation du jeu d'enregistrements). 3. Dans le menu droulant Jeu d'enregistrements, slectionnez le jeu d'enregistrements dans lequel naviguer. 4. Dans la section Afficher l'aide de, slectionnez le format d'affichage des liens de navigation sur la page et cliquez sur OK. Text Place des liens texte sur la page. Images Inclut des images graphiques en tant que liens. Dreamweaver utilise ses propres fichiers d'image. Lorsque la barre se trouve sur la page, vous pouvez nanmoins les remplacer par les vtres.
Barres de navigation de jeu d'enregistrements personnalises
Haut de la page
Vous pouvez crer votre propre barre de navigation de jeu d'enregistrements qui utilise des styles de formatage plus complexes que ceux qu'offre la table simple cre par l'objet de serveur Barre de navigation du jeu d'enregistrements.
600
Pour crer votre propre barre de navigation de jeu d'enregistrements, vous devez : crer des liens de navigation dans du texte ou des image ; placer les liens sur la page en mode Cration ; attribuer un comportement de serveur distinct chaque lien de navigation. Cette section explique comment assigner un comportement de serveur distinct chaque lien de navigation.
Cration et attribution de comportements de serveur un lien de navigation

1. En mode Cration, slectionnez sur la page la chane de texte ou l'image qui servira de lien de navigation entre les enregistrements. 2. Ouvrez le panneau Comportements de serveur (Fentre > Comportements de serveur), puis cliquez sur le bouton Plus (+). 3. Choisissez Pagination du jeu d'enregistrements dans le menu droulant, puis slectionnez le comportement qui convient dans la liste des comportements de serveur. Si le jeu contient un nombre important d'enregistrements, le comportement de serveur Dplacer vers le dernier enregistrement peut tre long s'excuter lorsque l'utilisateur clique sur le lien. 4. Dans le menu droulant Jeu d'enregistrements, slectionnez le jeu contenant les enregistrements et cliquez sur OK. Le comportement de serveur est assign au lien de navigation.
Dfinition des options de la bote de dialogue Dplacer vers (comportement de serveur)

Ajouter des liens permettant l'utilisateur de naviguer parmi les enregistrements d'un jeu d'enregistrements 1. Si vous n'avez rien slectionn sur la page, slectionnez un lien dans le menu droulant. 2. Slectionnez le jeu contenant les enregistrements parcourir et cliquez sur OK. Remarque : Si le jeu contient un nombre important d'enregistrements, le comportement de serveur Dplacer vers le dernier enregistrement peut tre long s'excuter lorsque l'utilisateur clique sur le lien.
Tches de cration d'une barre de navigation
Haut de la page
Pour concevoir une barre de navigation personnalise, commencez par en crer la reprsentation visuelle l'aide des outils de conception de page de Dreamweaver. Il est inutile de crer un lien pour la chane de texte ou l'image, car Dreamweaver s'en charge votre place. La page sur laquelle crer la barre de navigation doit contenir un jeu d'enregistrements dans lequel naviguer. Une barre de navigation de jeu d'enregistrements simple, c'est--dire une barre dont les boutons sont crs partir d'lments de contenu tels que des images, ressemble ceci :
Aprs avoir ajout un jeu d'enregistrements une page et cr la barre de navigation, vous devez appliquer les comportements de serveur individuels chaque lment de navigation. Par exemple, une barre de navigation de jeu d'enregistrements typique contient la reprsentation des liens suivants, associe au comportement appropri : Lien de navigation Accder la premire page Accder la page prcdente Accder la page suivante Accder la dernire page Comportement de serveur Dplacer vers la premire page Dplacer vers la page prcdente Dplacer vers la page suivante Dplacer vers la dernire page
Affichage et masquage des rgions en fonction des rsultats du jeu d'enregistrements
Haut de la page
Vous pouvez galement indiquer qu'une rgion soit affiche ou masque selon que le jeu d'enregistrements est vide ou non. Si un jeu d'enregistrements est vide (aucun enregistrement ne correspond la requte, par exemple), vous pouvez afficher un message informant l'utilisateur de l'absence de rsultats. Cette fonction est particulirement utile lors de la cration de pages de recherche reposant sur des termes que l'utilisateur doit entrer. De mme, vous pouvez afficher un message d'erreur lorsqu'un problme survient au cours de la connexion une base de donnes ou lorsque le nom et le mot de passe de l'utilisateur ne correspondent pas ceux reconnus par le serveur. Les comportements de serveur Afficher la rgion sont les suivants : Afficher si le jeu d'enregistrements est vide
601
Afficher si le jeu d'enregistrements n'est pas vide Afficher s'il s'agit de la premire page Afficher si ce n'est pas la premire page Afficher s'il s'agit de la dernire page Afficher si ce n'est pas la dernire page 1. En mode Cration, slectionnez sur la page la rgion afficher ou masquer. 2. Dans le panneau Comportements de serveur (Fentre > Comportements de serveur), cliquez sur le bouton Plus (+). 3. Dans le menu droulant, slectionnez Afficher la rgion, puis choisissez l'un des comportements de serveur proposs et cliquez sur OK.
Affichage de plusieurs rsultats d'un jeu d'enregistrements
Haut de la page
Le comportement de serveur Rgion rpte vous permet d'afficher sur une page plusieurs enregistrements d'un jeu. Toute slection de donnes dynamique peut tre convertie en rgion rpte. Les zones les plus courantes sont les tableaux, les lignes de tableau ou les sries de lignes de tableau. 1. En mode Cration, slectionnez une rgion comportant un contenu dynamique. La slection peut tre de tout type, notamment tableau, ligne de tableau ou mme paragraphe de texte. Pour slectionner prcisment une rgion sur une page, vous pouvez utiliser le slecteur de balises dans le coin gauche de la fentre de document. Par exemple, si la rgion correspond une ligne de tableau, cliquez sur la ligne, puis cliquez sur la balise <tr> situe le plus droite dans le slecteur de balises pour slectionner la ligne du tableau. 2. Pour afficher le panneau Comportements de serveur, choisissez Fentre > Comportements de serveur. 3. Cliquez sur le bouton Plus (+) et choisissez Rgion rpte. 4. Slectionnez le nom du jeu d'enregistrements utiliser dans le menu droulant. 5. Slectionnez le nombre d'enregistrements afficher sur chaque page et cliquez sur OK. Dans la fentre de document, un contour fin de couleur grise dlimite la rgion rpte.
Modification de rgions rptes dans l'inspecteur Proprits

Modifiez la rgion rpte slectionne en modifiant les options suivantes : Nom de la rgion rpte. Jeu d'enregistrements contenant les enregistrements pour la rgion rpte Nombre d'enregistrements affichs Lorsque vous slectionnez une nouvelle option, Dreamweaver met la page jour.
Rutilisation des jeux d'enregistrements en PHP

Si vous cherchez un didacticiel sur la rutilisation des jeux d'enregistrements PHP, consultez celui de David Powers : How Do I Reuse a PHP Recordset in More Than One Repeat Region? (Comment rutiliser un jeu d'enregistrements PHP dans plusieurs rgions rptes ?)
Cration d'un tableau dynamique
Haut de la page
L'exemple ci-dessous illustre comment le comportement de serveur Rgion rpte s'applique une ligne de tableau et indique qu'il est possible d'afficher un maximum de neuf enregistrements par page. La ligne elle-mme affiche quatre enregistrements diffrents : city, state, street address et zip code.
602
Pour crer un tableau semblable celui de l'exemple prcdent, vous devez crer un tableau contenant un contenu dynamique et appliquer le comportement de serveur Rgion rpte la ligne renfermant le contenu dynamique. Lorsque la page est traite par le serveur d'application, la ligne est rpte autant de fois que le nombre spcifi dans l'objet de serveur Rgion rpte, avec un enregistrement diffrent insr dans chaque ligne. 1. Procdez de l'une des manires suivantes pour insrer un tableau dynamique : Choisissez Insertion > Objets de donnes > Donnes dynamiques > Tableau dynamique pour afficher la bote de dialogue Tableau dynamique. Dans la catgorie Donnes du panneau Insertion, cliquez sur le bouton Donnes dynamiques et slectionnez l'icne Tableau dynamique dans le menu. 2. Slectionnez le jeu d'enregistrements dans le menu droulant Jeu d'enregistrements. 3. Slectionnez le nombre d'enregistrements afficher sur chaque page. 4. (Facultatif) Entrez les valeurs des bordures du tableau, de la marge intrieure des cellules et de l'espacement entre les cellules. La bote de dialogue Tableau dynamique mmorise les valeurs spcifies pour les bordures du tableau, la marge intrieure des cellules et l'espacement entre les cellules. Remarque : Si vous travaillez sur un projet ncessitant plusieurs tableaux dynamiques d'aspect semblable, tapez les valeurs de mise en forme du tableau pour simplifier le dveloppement des pages. Une fois le tableau insr, vous pouvez toutefois ajuster ces valeurs l'aide de l'inspecteur Proprits du tableau. 5. Cliquez sur OK. Un tableau et des espaces rservs destins au contenu dynamique dfini dans le jeu d'enregistrements associ s'insrent sur la page.
Dans cet exemple, le jeu d'enregistrements contient quatre colonnes : AUTHORID, FIRSTNAME, LASTNAME et BIO. Le nom de chaque colonne se place dans la ligne de titre du tableau. Vous pouvez remplacer les titres par tout texte descriptif ou image pertinente.
Cration de compteurs d'enregistrements
Haut de la page
Les compteurs d'enregistrements permettent aux utilisateurs de connatre leur position relative dans un jeu d'enregistrements. Ils affichent gnralement le nombre total d'enregistrements renvoys et le nombre actuel d'enregistrements affichs. Prenons l'exemple d'un jeu d'enregistrements renvoyant 40 enregistrements individuels, avec huit enregistrements affichs par page ; le compteur d'enregistrements indique alors sur la premire page Affichage des enregistrements 1 8 sur 40 . Avant de crer un compteur d'enregistrements pour une page, vous devez d'abord crer un jeu d'enregistrements pour la page, une mise en forme approprie pour la prsentation du contenu dynamique et une barre de navigation de jeu d'enregistrements.
603
Cration de compteurs d'enregistrements simples

Un compteur d'enregistrements indique aux utilisateurs la position dans laquelle ils se trouvent au sein d'un groupe d'enregistrements, par rapport au nombre total d'enregistrements renvoys. Il constitue donc un comportement utile permettant d'amliorer considrablement l'aspect fonctionnel d'un site Web. L'objet de serveur Etat de navigation du jeu d'enregistrements permet de crer un compteur d'enregistrements simple. Cet objet de serveur cre une entre de texte sur la page pour afficher l'tat de l'enregistrement actif. Vous pouvez personnaliser votre compteur d'enregistrements l'aide des outils de cration de page de Dreamweaver. 1. Placez le point d'insertion l'endroit o vous souhaitez insrer le compteur d'enregistrements. 2. Choisissez Insertion > Objets de donnes > Afficher le nombre d'enregistrements > Etat de navigation du jeu d'enregistrements, slectionnez le jeu d'enregistrements dans le menu droulant Jeu d'enregistrements, puis cliquez sur OK. L'objet de serveur Etat de navigation du jeu d'enregistrements insre un compteur d'enregistrements texte qui ressemble l'exemple suivant :
Affich en mode En direct, le compteur prsente un apparence similaire l'exemple suivant :
Cration et ajout du compteur d'enregistrements la page

Dans la bote de dialogue Insrer l'tat de navigation du jeu d'enregistrements, slectionnez le jeu d'enregistrements surveiller, puis cliquez sur OK.
Cration de compteurs d'enregistrements personnaliss

Vous faites appel des comportements de comptage d'enregistrements individuels pour crer des compteurs d'enregistrements personnaliss. Les compteurs d'enregistrements personnaliss sont plus sophistiqus que le simple tableau une seule ligne insr par l'objet de serveur Etat de navigation du jeu d'enregistrements. Vous pouvez organiser les lments de manires varies et cratives et appliquer un comportement de serveur appropri chaque lment. Les comportements de serveur de comptage des enregistrements sont les suivants : Afficher le numro de l'enregistrement de dbut Afficher le numro de l'enregistrement de fin Afficher le nombre total d'enregistrements Avant de crer un compteur d'enregistrements personnalis sur une page, vous devez d'abord crer un jeu d'enregistrements pour la page, une mise en forme approprie pour la prsentation du contenu dynamique et une barre de navigation de jeu d'enregistrements. Dans cet exemple, un compteur d'enregistrements similaire l'exemple de la section Crer des compteurs d'enregistrements simples est cr. Dans cet exemple, le texte mis en forme avec la police sans-serif reprsente les espaces rservs aux nombres d'enregistrements qui seront insrs dans la page. Le compteur d'enregistrements de cet exemple se prsente comme suit : Affichage des enregistrements StartRow EndRow sur RecordSet.RecordCount. 1. En mode Cration, tapez le texte du compteur sur la page. Il peut s'agir de n'importe quel texte. Par exemple : Displaying records thru of . 2. Placez le point d'insertion la fin de la chane de texte. 3. Ouvrez le panneau Comportements de serveur (Fentre > Comportements de serveur). 4. Cliquez sur le bouton Plus(+) dans le coin suprieur gauche, puis cliquez sur Afficher le nombre d'enregistrements. Dans ce sous-menu, choisissez Afficher le nombre total des enregistrements. Le comportement Afficher le nombre total des enregistrements s'insre sur la page et un espace rserv se place au niveau du point d'insertion. La chane de texte ressemble maintenant ce qui suit : Displaying records thru of {Recordset1.RecordCount}. 5. Placez le point d'insertion aprs le mot records, et slectionnez Afficher le numro de l'enregistrement de dbut dans le panneau Nombre d'enregistrements (Comportements de serveur > Plus (+) > Nombre d'enregistrements. La chane de texte ressemble maintenant ce qui suit : Displaying records {StartRow_Recordset1} thru of {Recordset1.RecordCount}. 6. Placez maintenant le point d'insertion entre les mots thru et of, et slectionnez Afficher le numro de l'enregistrement de dbut dans le panneau Nombre d'enregistrements (Comportements de serveur > Plus (+) > Nombre d'enregistrements. La chane de texte ressemble maintenant ce qui suit : Displaying records {StartRow_Recordset1} thru {EndRow_Recordset1} of{Recordset1.RecordCount}.
604
7. Pour vrifier que le compteur fonctionne correctement, affichez la page en mode En direct. Le compteur prsente une apparence similaire l'exemple suivant : Displaying records 1 thru 8 of 40. Si la page de rsultats comporte un lien de navigation permettant d'accder au groupe d'enregistrements suivant, il suffit de cliquer sur ce lien pour mettre jour le compteur d'enregistrements comme suit : Showing records 9 thru 16 of 40.
Utilisation de formats de donnes prdfinis
Haut de la page
Dreamweaver contient plusieurs formats de donnes prdfinis que vous pouvez appliquer des lments de donnes dynamiques. Les styles de format de donnes prdfinis sont les suivants : Date/Heure, Devise, Nombre et Pourcentage.
Application d'un format de donnes un contenu dynamique

1. Slectionnez l'espace rserv pour contenu dynamique dans la fentre Document. 2. Choisissez Fentre > Liaisons pour afficher le panneau Liaisons. 3. Dans la colonne Format, cliquez sur le bouton flch pointant vers le bas. Si la flche vers le bas n'est pas visible, agrandissez le panneau. 4. Dans le menu droulant Format, slectionnez la catgorie de format de donnes souhaite. Assurez-vous que le format de donnes convient au type de donnes formater. Les formats Devise, par exemple, ne fonctionnent que pour des donnes numriques. En outre, il est impossible d'appliquer plusieurs formats aux mmes donnes. 5. Assurez-vous que le format a t appliqu correctement. Pour ce faire, prvisualisez la page en mode En direct.
Personnalisation d'un format de donnes

1. Ouvrez une page contenant des donnes dynamiques en mode Cration. 2. Slectionnez les donnes dynamiques dont vous souhaitez personnaliser le format. L'lment de donnes lies dont vous avez slectionn le texte dynamique se met en surbrillance. Le panneau affiche deux colonnes pour l'lment slectionn : Liaison et Format. Si la colonne Format n'est pas visible, largissez le panneau Liaisons afin de l'afficher. 3. Dans le panneau Liaisons, cliquez sur la flche vers le bas de la colonne Format pour dvelopper le menu droulant des formats de donnes disponibles. Si la flche vers le bas n'est pas visible, agrandissez davantage le panneau Liaisons. 4. Dans le menu droulant, choisissez Modifier la liste de formats. 5. Compltez les options de la bote de dialogue, puis cliquez sur OK. a. Slectionnez le format dans la liste, puis cliquez sur Modifier. b. Modifiez un ou plusieurs des paramtres suivants dans les botes de dialogue Devise, Nombre ou Pourcentage, puis cliquez sur OK. Nombre de chiffres afficher aprs la virgule Affichage ou absence d'un zro devant les nombres dcimaux infrieurs un Affichage ou absence de parenthses ou d'un signe moins pour les valeurs ngatives Regroupement ou non des chiffres c. Pour supprimer un format de donnes, cliquez sur le format dans la liste, puis sur le bouton Moins (-).
Cration d'un format de donnes (ASP uniquement)

1. Ouvrez une page contenant des donnes dynamiques en mode Cration. 2. Slectionnez les donnes dynamiques pour lesquelles crer le format personnalis. 3. Choisissez Fentre > Liaisons pour afficher le panneau Liaisons, puis cliquez sur la flche vers le bas dans la colonne Format. Si la flche vers le bas n'est pas visible, agrandissez le panneau. 4. Dans le menu droulant, choisissez Modifier la liste de formats. 5. Cliquez sur le bouton Plus (+) et slectionnez un type de format. 6. Dfinissez le format et cliquez sur OK. 7. Entrez un nom pour le nouveau format dans la colonne Nom et cliquez sur OK. Remarque : Bien que Dreamweaver ne prenne en charge la cration de formats de donnes que pour les pages ASP, les utilisateurs de ColdFusion et de PHP peuvent tlcharger des formats crs par d'autres dveloppeurs, ou crer des formats de serveur et les publier sur
605
Dreamweaver Exchange. Pour plus d'informations sur l'API de formats de serveur, voir Extension de Dreamweaver (Aide > Extension de Dreamweaver > Formats de serveur). Voir aussi
606
Panneaux de contenu dynamique

Panneau Panneau Panneau Panneau Liaisons Comportements de serveur Bases de donnes Composants
Panneau Liaisons
Haut de la page
Le panneau Liaisons vous permet de dfinir et de modifier des sources de contenu dynamique, d'ajouter du contenu dynamique une page et d'appliquer des formats de donnes du texte dynamique. Ce panneau permet d'effectuer les oprations suivantes : Dfinition de sources de contenu dynamique Ajout de contenu dynamique dans les pages Modification ou suppression de sources de contenu Utilisation de formats de donnes prdfinis Association de sources de donnes XML Affichage des donnes XML dans des pages XSLT Paramtres d'URL Dfinition de variables de session Dfinition de variables d'application dans ASP et ColdFusion Dfinition de variables de serveur Mise en mmoire cache de sources de contenu Copie d'un jeu d'enregistrements d'une page vers une autre Cration d'attributs HTML dynamiques
Panneau Comportements de serveur

Ce panneau permet d'effectuer les oprations suivantes : Affichage d'enregistrements d'une base de donnes Dfinition de sources de contenu dynamique Cration de pages principale et de dtails en une seule opration Cration de pages de recherche et de rsultats Cration d'une page d'insertion d'enregistrements Cration d'une page de mise jour d'enregistrement Cration d'une page de suppression d'enregistrement Cration d'une page accs restreint Cration d'une page d'enregistrement Cration d'une page d'ouverture de session Cration d'une page accs restreint Ajout d'une procdure stocke (ColdFusion) Suppression de contenu dynamique Ajout de comportements de serveur personnaliss
Haut de la page
Ce panneau vous permet d'ajouter les comportements de serveur Dreamweaver sur une page, de les modifier et d'en crer de nouveaux.
607
Panneau Bases de donnes
Haut de la page
Le panneau Bases de donnes vous permet de crer des connexions de base de donnes, d'inspecter les bases de donnes et d'insrer un code de base de donnes dans vos pages. Ce panneau vous permet de visualiser votre base de donnes et de vous y connecter : Affichage de votre base de donnes dans Dreamweaver Connexions aux bases de donnes pour les dveloppeurs ColdFusion Connexions aux bases de donnes pour les dveloppeurs ASP Connexions aux bases de donnes pour les dveloppeurs PHP
Panneau Composants
Le panneau Composants vous permet de crer et d'inspecter les composants et d'insrer un code de composant dans vos pages. Remarque : Ce panneau ne s'ouvre pas en mode Cration. Ce panneau permet d'effectuer les oprations suivantes : Utilisation de composants ColdFusion
Haut de la page
608
Prsentation des sources de contenu dynamique

A propos A propos A propos A propos Variables Variables Variables des sources de contenu dynamique des jeux d'enregistrements des paramtres d'URL et de formulaire des variables de session d'application d'ASP et de ColdFusion de serveur ASP de serveur ColdFusion
A propos des sources de contenu dynamique
Haut de la page
Une source de contenu dynamique est un stock d'informations partir duquel il est possible de rcuprer du contenu dynamique en vue de l'afficher dans une page Web. Diffrentes sources peuvent tre utilises comme sources de contenu dynamique : des informations enregistres dans une base de donnes, mais aussi des valeurs envoyes au moyen d'un formulaire HTML, des valeurs contenues dans un objet de serveur, etc. Dreamweaver vous permet aisment d'tablir une connexion une base de donnes et de crer un jeu d'enregistrements partir duquel extraire le contenu dynamique. Un jeu d'enregistrements correspond au rsultat d'une requte de base de donnes. Il permet d'extraire les informations spcifiques demandes et de les afficher dans une page donne. L'utilisateur dfinit le jeu d'enregistrements en fonction des informations prsentes dans la base de donnes et du contenu qu'il souhaite afficher. Certains fournisseurs de technologie utilisent une terminologie diffrente pour dsigner un jeu d'enregistrements. Dans les technologies ASP et ColdFusion, un jeu d'enregistrements est dfini comme requte. Si vous utilisez d'autres sources de donnes, telles que des entres utilisateur ou des variables de serveur, le nom de la source de donnes dfini dans Dreamweaver est identique celui de la source de donnes. Les sites Web dynamiques requirent une source de donnes partir de laquelle le contenu dynamique peut tre rcupr et affich. Dreamweaver permet d'utiliser des bases de donnes, des procdures stockes, des variables de demande, d'URL, de serveur et de formulaire, ainsi que d'autres sources de contenu dynamique. Suivant la source de donnes, il est possible soit de rcuprer un nouveau contenu pour rpondre une demande, soit de modifier la page pour satisfaire aux besoins des utilisateurs. Toute source de contenu dfinie dans Dreamweaver est ajoute la liste des sources de contenu du panneau Liaisons. Vous pouvez ensuite insrer la source de contenu dans la page actuellement slectionne.
A propos des jeux d'enregistrements
Haut de la page
Les pages Web ne peuvent pas accder directement aux donnes stockes dans une base de donnes. Au lieu de cela, elles interagissent avec un jeu d'enregistrements. Un jeu d'enregistrements correspond un sous-ensemble d'informations (ou enregistrements) extraits de la base de donnes l'aide d'une requte de base de donnes. Une requte est une instruction de recherche conue pour trouver et extraire des informations prcises stockes dans une base de donnes. Si vous utilisez une base de donnes comme source de contenu d'une page Web dynamique, vous devez tout d'abord crer un jeu d'enregistrements dans lequel seront stockes les donnes rcupres. Les jeux d'enregistrements servent d'intermdiaire entre la base de donnes dans laquelle le contenu est enregistr et le serveur d'application qui gnre la page. Les jeux d'enregistrements sont stocks temporairement dans la mmoire du serveur d'application, afin d'acclrer la rcupration de donnes. Le serveur supprime un jeu d'enregistrements lorsqu'il n'est plus ncessaire. Une requte peut gnrer un jeu d'enregistrements n'incluant que certaines colonnes, certains enregistrements ou encore une combinaison des deux. Un jeu d'enregistrements peut galement inclure tous les enregistrements et toutes les colonnes d'une table de base de donnes. Toutefois, comme les applications n'ont gnralement pas besoin de toutes les informations stockes dans une base de donnes, il est fortement conseill d'essayer de limiter au maximum la taille des jeux d'enregistrements. De plus, comme le serveur Web stocke temporairement en mmoire le jeu d'enregistrements, l'utilisation d'un jeu de taille limite conomise de la mmoire et peut de ce fait amliorer les performances du serveur. Les requtes de base de donnes sont crites en SQL (Structured Query Language), langage simple permettant de rcuprer des informations d'une base de donnes, mais aussi d'ajouter des donnes une base et d'en supprimer. Le gnrateur SQL fourni avec Dreamweaver permet de crer des requtes simples sans matriser le langage SQL. Toutefois, si vous voulez crer des requtes SQL complexes, une connaissance de base de ce langage vous permet de crer des requtes plus avances et vous offre davantage de souplesse pour la conception de pages dynamiques. Avant de dfinir un jeu d'enregistrements pour l'utiliser dans Dreamweaver, vous devez crer une connexion une base de donnes et saisir des donnes dans la base si celle-ci n'en contient pas. Si vous n'avez pas encore dfini de connexion une base de donnes pour votre site, consultez le chapitre consacr spcifiquement la mise en place d'une connexion une base de donnes dans le contexte de la technologie de serveur que vous utilisez, et suivez les instructions fournies.
609
A propos des paramtres d'URL et de formulaire
Haut de la page
Les paramtres d'URL permettent de stocker les informations saisies par les utilisateurs. Pour dfinir un paramtre d'URL, vous devez crer un formulaire ou un lien hypertexte utilisant la mthode GET pour l'envoi de donnes. Les informations sont annexes l'URL de la page demande et communiques au serveur. Lorsque vous utilisez des variables d'URL, la chane de la requte contient une ou plusieurs paires nom-valeur associes aux champs du formulaire. Ces paires nom-valeur sont annexes l'URL. Les paramtres de formulaire permettent de stocker les informations rcupres dans la requte HTTP d'une page Web. Si vous crez un formulaire utilisant la mthode POST, les donnes envoyes par le formulaire sont transmises au serveur. Avant de commencer, vrifiez que vous avez transmis un paramtre de formulaire au serveur.
A propos des variables de session
Haut de la page
Les variables de session permettent de stocker et d'afficher des informations conserves pendant toute la dure de la visite (ou session) de l'utilisateur. Le serveur cre un objet de session diffrent pour chaque utilisateur et le conserve pendant une priode dfinie ou jusqu' ce qu'il soit explicitement clos. Comme les variables de session sont conserves pendant toute la session de l'utilisateur, mme lorsque celui-ci passe d'une page l'autre dans le site Web, elles conviennent parfaitement au stockage des prfrences de l'utilisateur. Les variables de session peuvent galement tre utilises pour insrer 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 dfinir des variables de session pour une page, vous devez les crer dans le code source. Aprs avoir cr une variable de session dans le code source de l'application Web, vous pouvez utiliser Dreamweaver pour rcuprer sa valeur et l'utiliser dans une page Web.
Fonctionnement des variables de session

Les variables de session stockent des informations (trs souvent des paramtres de formulaire ou d'URL envoys par les utilisateurs) et les rendent accessibles toutes les pages de l'application pendant la dure de la visite d'un utilisateur. Ainsi, lorsqu'un utilisateur se connecte un portail Web lui donnant accs une messagerie, des cours boursiers, des bulletins mto et des dossiers d'actualit, l'application Web stocke les informations de connexion dans une variable de session qui identifie l'utilisateur dans toutes les pages du site. Cela permet l'utilisateur de ne voir que le type de contenu qu'il a slectionn pendant qu'il parcourt le site. Les variables de session peuvent galement proposer un mcanisme de scurit en mettant fin la session d'un utilisateur si le compte reste inactif pendant un certain temps. Cette mthode prsente aussi l'avantage de librer les ressources de traitement et la mmoire du serveur lorsque les utilisateurs oublient de se dconnecter d'un site Web. Les variables de session stockent les informations pendant toute la dure de la session d'un utilisateur. La session commence lorsque l'utilisateur ouvre une page dans l'application et se termine lorsqu'il n'ouvre pas d'autre page dans l'application pendant un laps de temps donn ou lorsqu'il met explicitement fin la session (en gnral, en cliquant sur un lien de dconnexion). Tant qu'elle existe, la session est spcifique un utilisateur donn ; chaque utilisateur dispose donc d'une session qui lui est propre. Faites appel aux variables de session pour stocker des informations auxquelles chaque page de l'application Web doit pouvoir accder. Ces informations peuvent aller du nom de l'utilisateur ses prfrences pour la taille des polices l'cran, en passant par un indicateur signalant la russite ou l'chec de sa connexion. Les variables de session sont galement souvent utilises pour assurer le suivi d'un comptage cumulatif, tel que le nombre de questions auxquelles un utilisateur a rpondu correctement jusqu' prsent dans un quiz en ligne ou les produits qu'il a slectionns dans un catalogue en ligne. Les variables de session ne peuvent fonctionner que si le navigateur de l'utilisateur est configur pour accepter les cookies. Le serveur cre un numro d'ID de session qui permet l'identification univoque de l'utilisateur lors de l'initialisation de la premire session, puis envoie au navigateur de l'utilisateur un cookie contenant ce numro d'ID. Lorsque l'utilisateur demande une nouvelle page situe sur le serveur, celui-ci lit le cookie dans le navigateur pour identifier l'utilisateur et rcuprer ses variables de session personnelles, stockes en mmoire.
Collecte, stockage et rcupration d'informations dans des variables de session

Avant de crer une variable de session, vous devez commencer par obtenir les informations stocker, puis les envoyer au serveur pour stockage. Vous pouvez recueillir et envoyer des informations au serveur l'aide de formulaires HTML ou de liens hypertexte contenant des paramtres d'URL. Vous pouvez galement obtenir des informations partir d'une base de donnes, des cookies stocks dans l'ordinateur d'un utilisateur ou des en-ttes HTTP envoys par son navigateur avec une demande de page. Un catalogue de produits utilisant des paramtres d'URL figs dans le code et crs l'aide d'un lien pour renvoyer des informations sur les produits au serveur afin qu'elles soient stockes dans une variable de session est un exemple typique de stockage de paramtres d'URL dans les variables de session. Quand un utilisateur clique sur le lien Add to shopping cart (Ajouter au panier), l'ID du produit est stocke dans une variable de session pendant que l'utilisateur poursuit ses achats. Lorsqu'il passe la page de paiement, l'ID du produit stocke dans la variable de session est rcupre. Un sondage reposant sur un formulaire est un exemple typique de page stockant les paramtres de formulaire dans les variables de session. Le formulaire renvoie l'information slectionne au serveur, o une page d'application note le sondage et stocke les rponses dans une variable de session, afin, par exemple, de les transmettre une application qui regroupe les rponses de toutes les personnes ayant rpondu au sondage. Il est galement possible que les informations soient stockes dans une base de donnes pour tre utilises ultrieurement.
610
Une fois que vous avez envoy les informations au serveur, vous pouvez les stocker dans des variables de session en ajoutant la page spcifie par le paramtre de formulaire ou d'URL le code adapt votre modle de serveur. Appele page de destination, cette page est spcifie soit dans l'attribut action du formulaire HTML, soit dans l'attribut href du lien hypertexte situ dans la premire page. Aprs avoir stock une valeur dans une variable de session, vous pouvez utiliser Dreamweaver pour la rcuprer et l'utiliser dans une application Web. Aprs avoir dfini la variable de session dans Dreamweaver, vous pouvez en insrer la valeur dans une page. La syntaxe HTML de chaque attribut se prsente comme suit : <form action="destination.html" method="get" name="myform"> </form> <param name="href"value="destination.html"> Le choix de la technologie serveur et de la mthode d'obtention des informations dtermine le code utilis pour stocker les informations dans une variable de session. La syntaxe de base de chaque technologie serveur se prsente comme suit : ColdFusion <CFSET session.variable_name = value>
ASP <% Session("variable_name") = value %> L'expression value correspond en gnral une expression de serveur telle que Request.Form("lastname"). Ainsi, si vous utilisez un paramtre d'URL appel product (ou un formulaire HTML avec la mthode GET et un champ de texte appel product) pour recueillir des informations, les instructions suivantes stockent les informations dans une variable de session appele prodID : ColdFusion <CFSET session.prodID = url.product>
ASP <% Session("prodID") = Request.QueryString("product") %> Si vous utilisez un formulaire HTML avec la mthode post et un champ de texte appel txtProduct pour recueillir les informations, les instructions suivantes stockent alors ces informations dans la variable de session : ColdFusion <CFSET session.prodID = form.txtProduct>
ASP <% Session("prodID") = Request.Form("txtProduct") %>
Exemple d'informations stockes dans des variables de session

Vous travaillez sur un site destin un vaste public de retraits. Dans Dreamweaver, ajoutez deux liens sur la page d'accueil du site pour que les utilisateurs puissent modifier la taille du texte affich. Si l'utilisateur souhaite un affichage en caractres plus gros pour un texte plus facile lire, il lui suffit de cliquer sur un lien ; s'il souhaite un texte de taille standard, il clique sur un autre lien.
Chaque lien comporte un paramtre d'URL appel fontsize. Il envoie au serveur la prfrence de texte de l'utilisateur, comme le montre l'exemple suivant, spcifique Adobe ColdFusion : <a href="resort.cfm?fontsize=large">Larger Text</a><br>
611
<a href="resort.cfm?fontsize=small">Normal Text</a> Stockez la prfrence de texte de l'utilisateur dans une variable de session et de l'utiliser afin de dfinir la taille de police utiliser dans chaque page demande par l'utilisateur. En haut de la page de destination, saisissez le code suivant pour crer une session appele font_pref qui stocke la prfrence de l'utilisateur pour la taille de police. ColdFusion <CFSET session.font_pref = url.fontsize>
ASP <% Session("font_pref") = Request.QueryString("fontsize") %> Lorsque l'utilisateur clique sur le lien hypertexte, la page envoie la page de destination la prfrence de texte de l'utilisateur dans un paramtre d'URL. Le code de la page de destination stocke le paramtre d'URL dans la variable de session font_pref. Pendant la dure de la session de l'utilisateur, toutes les pages de l'application rcuprent cette valeur et affichent la taille de police slectionne.
Variables d'application d'ASP et de ColdFusion
Haut de la page
Dans ASP et ColdFusion, les variables d'application permettent de mmoriser et d'afficher des informations conserves pendant toute la dure d'utilisation de l'application, quel que soit l'utilisateur. La dure d'utilisation de l'application commence ds que le premier utilisateur demande une page dans l'application et se termine avec l'arrt du serveur Web. (une application regroupe tous les fichiers se trouvant dans un rpertoire virtuel et ses sous-rpertoires). Les variables d'application tant conserves pendant toute la dure d'utilisation de l'application, quel que soit l'utilisateur, elles conviennent parfaitement au stockage des informations ncessaires tous les utilisateurs, telles que l'heure et la date courantes. La valeur de la variable d'application est dfinie dans le code de l'application.
Variables de serveur ASP
Haut de la page
Vous pouvez dfinir les variables de serveur ASP suivantes comme sources de contenu dynamique : Request.Cookie, Request.QueryString, Request.Form, Request.ServerVariables et Request.ClientCertificates.
Variables de serveur ColdFusion

Vous pouvez dfinir les variables de serveur ColdFusion suivantes :
Haut de la page
Variables client Associent des donnes un client spcifique. Elles conservent l'tat de l'application pendant que l'utilisateur passe d'une page l'autre et d'une session l'autre dans l'application. Conserver l'tat signifie conserver les informations d'une page (ou session) sur la suivante, de faon ce que l'application se souvienne de l'utilisateur et de ses prcdents choix et prfrences. Variables cookie Accdent aux cookies transmis au serveur par le navigateur. Variables CGI Fournissent des informations sur le serveur excutant ColdFusion et sur le navigateur l'origine d'une demande de page, ainsi que d'autres informations sur l'environnement de traitement. Variables de serveur Sont accessibles tous les clients et toutes les applications du serveur. Elles sont conserves jusqu' l'arrt du serveur. Variables locales Cres l'aide de la balise CFSET ou CFPARAM dans une page ColdFusion. Voir aussi
612
Optimisation de l'espace de travail pour le dveloppement visuel

Affichage de panneaux de dveloppement d'applications Web Affichage de votre base de donnes dans Dreamweaver Aperu des pages dynamiques dans un navigateur Limitation des informations de base de donnes affiches dans Dreamweaver Configuration de l'inspecteur Proprits pour les procdures stockes ColdFusion et les commandes ASP Options de nom du champ
Affichage de panneaux de dveloppement d'applications Web
Haut de la page
Slectionnez la catgorie Donnes du menu Catgorie du panneau Insertion afin d'afficher un groupe de boutons permettant d'ajouter du contenu dynamique et des comportements de serveur votre page. Le nombre et le type de boutons apparaissant varient en fonction du type de document ouvert dans la fentre de document. Amenez la souris audessus d'une icne afin d'afficher une infobulle dcrivant la fonction de ce bouton. Le panneau Insertion comprend des boutons qui permettent d'ajouter les lments suivants sur la page : Jeu d'enregistrements Texte ou tableaux dynamiques Barres de navigation d'un enregistrement Si vous passez en mode Code (Affichage > Code), il est possible que des panneaux supplmentaires apparaissent dans la catgorie correspondante du panneau Insertion, ce qui vous permet d'insrer du code dans la page. Par exemple, si vous visionnez une page ColdFusion en mode Code, un panneau CFML devient disponible dans la catgorie CFML du panneau Insertion. Plusieurs panneaux vous permettent de crer des pages dynamiques : Slectionnez le panneau Liaisons (Fentre > Liaisons) pour dfinir des sources de contenu dynamique pour votre page et ajouter le contenu dans la page. Slectionnez Comportements du serveur (Fentre > Comportements du serveur) pour ajouter une logique ct serveur dans vos pages dynamiques. Slectionnez le panneau Bases de donnes (Fentre > Bases de donnes) pour explorer les bases de donnes ou crer des connexions aux bases de donnes. Slectionnez le panneau Composants (Fentre > Composants) afin d'inspecter, d'ajouter ou de modifier du code pour des composants ColdFusion. Remarque : Le panneau Composants n'est activ que si vous ouvrez une page ColdFusion. Un comportement de serveur est l'ensemble des instructions insres dans une page dynamique au moment de la cration et excutes sur le serveur lors de l'excution. Vous trouverez un didacticiel consacr la configuration de l'espace de travail de dveloppement l'adresse www.adobe.com/go/vid0144_fr.
Affichage de votre base de donnes dans Dreamweaver

Une fois la connexion la base de donnes ralise, vous pouvez afficher sa structure et ses donnes dans Dreamweaver. 1. Ouvrez le panneau Base de donnes (Fentre > Bases de donnes).
Haut de la page
Le panneau Base de donnes affiche toutes les bases de donnes pour lesquelles vous avez cr des connexions. Si vous dveloppez un site ColdFusion, le panneau affiche toutes les bases de donnes pour lesquelles des sources de donnes ont t dfinies dans ColdFusion Administrator. Remarque : Dreamweaver recherche le site en cours sur le serveur ColdFusion dfini. Si aucune base de donnes n'apparat dans le panneau, vous devez crer une connexion de base de donnes. 2. Pour afficher les tables, les procdures stockes et les modes dans la base de donnes, cliquez sur le signe plus (+) situe en regard de la connexion dans la liste. 3. Pour afficher les colonnes de la table, cliquez sur un nom de table. Les icnes des colonnes refltent le type de donnes et indiquent la cl primaire de la table.
613
4. Pour afficher les donnes 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 Contrle (Macintosh) et choisissez Afficher les donnes dans le menu droulant.
Aperu des pages dynamiques dans un navigateur
Haut de la page
Les dveloppeurs d'applications Web dboguent souvent leurs pages en les vrifiant rgulirement dans un navigateur Web. Vous pouvez afficher rapidement vos pages dynamiques dans un navigateur sans avoir les tlcharger manuellement sur un serveur au pralable. Pour lancer un aperu des pages dynamiques, vous devez complter la catgorie Serveur d'valuation de la bote de dialogue Dfinition du site. Vous pouvez configurer Dreamweaver pour utiliser des fichiers temporaires la place des fichiers d'origine. Avec cette option, Dreamweaver excute 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 dfinir cette option, slectionnez Edition > Prfrences > Aperu dans le navigateur. L'option Aperu dans le navigateur ne tlcharge pas les pages associes (pages de rsultats ou d'informations dtailles), les fichiers dpendants (tels que fichiers d'image) ou les inclusions ct serveur. Pour tlcharger un fichier manquant, choisissez Fentre > Site pour ouvrir le panneau Site, slectionnez le fichier dans Dossier local et cliquez sur la flche haut bleue de la barre d'outils pour copier le fichier dans le dossier du serveur Web.
Limitation des informations de base de donnes affiches dans Dreamweaver
Haut de la page
Les utilisateurs chevronns travaillant avec des systmes de base de donnes de grande envergure tels qu'Oracle devront limiter le nombre d'lments de base de donnes rcuprs par Dreamweaver au moment de la conception. Une base de donnes Oracle peut contenir des lments que Dreamweaver ne peut pas traiter au moment de la conception. Vous pouvez crer un schma dans Oracle, puis l'utiliser dans Dreamweaver pour filtrer les lments indsirables au moment de la conception. Remarque : Vous ne pouvez pas crer de schma ou de catalogue dans Microsoft Access. D'autres utilisateurs peuvent avoir intrt limiter la quantit d'informations rcupres par Dreamweaver au moment de la conception. Certaines bases de donnes contiennent des douzaines, voire des centaines de tableaux, et vous pouvez prfrer ne pas tous les rpertorier tous pendant que vous travaillez. Un schma ou catalogue peut limiter le nombre d'lments de base de donnes rcuprs au moment de la conception. Pour commencer, crez un schma ou un catalogue dans votre application de base de donnes pour pouvoir ensuite l'appliquer dans Dreamweaver. Consultez la documentation de votre systme de base de donnes ou consultez votre administrateur systme. Remarque : Vous ne pouvez pas appliquer un schma ou un catalogue dans Dreamweaver si vous dveloppez une application ColdFusion, 1. Ouvrez une page dynamique dans Dreamweaver, puis la fentre Bases de donnes (Fentre > Bases de donnes). Si la connexion de base de donnes existe, cliquez sur cette connexion dans la liste avec le bouton droit de la souris (Windows) ou en appuyant sur le bouton Contrle (Macintosh) et choisissez Modifier la connexion dans le menu droulant. Si la connexion n'existe pas, cliquez sur le bouton Plus (+) en haut du panneau afin de la crer. 2. Cliquez sur Avanc dans la bote de dialogue de la connexion. 3. Indiquez votre schma ou catalogue et cliquez sur OK.
Configuration de l'inspecteur Proprits pour les procdures stockes ColdFusion et les commandes ASP
Modifiez la procdure stocke slectionne. Les options disponibles dpendent de la technologie de serveur utilise.
Haut de la page
Modifiez les options votre convenance. Lorsque vous slectionnez une nouvelle option dans l'inspecteur, Dreamweaver met la page jour.
Haut de la page
Options de nom du champ
Cet inspecteur Proprits s'affiche lorsque Dreamweaver rencontre un type d'entre inconnu. En gnral, cela est d une erreur de frappe ou autre problme li la saisie de donnes. Si vous modifiez le type de champ dans l'inspecteur Proprits et placez une valeur reconnue par Dreamweaver (par exemple, si vous corrigez la faute d'orthographe) l'inspecteur Proprits se met jour pour afficher les proprits du type reconnu. Dfinissez les options suivantes dans l'inspecteur Proprits : Nom du champ Attribue un nom au champ. Cette zone est obligatoire et le nom doit tre unique. Type Dfinit le type d'entre du champ. Le contenu de cette zone reflte la valeur du type d'entre apparaissant actuellement dans votre code source HTML. Valeur Dfinit la valeur du champ. Paramtres Ouvre la bote de dialogue Paramtres pour que vous puissiez visualiser les attributs actuels du champ et ajouter ou supprimer des attributs. Voir aussi
614
Didacticiel consacr l'espace de travail de dveloppement Configuration d'un serveur d'valuation
615
Assemblage d'applications Web

Haut de la page
L'intgration de Dreamweaver jQuery Mobile et PhoneGap permet de crer et d'empaqueter des applications Web en vue d'un dploiement sur des appareils Android et iOS. Dreamweaver utilise les SDK PhoneGap pour crer le fichier de package (.apk fichier pour Android/.xcodeproj pour iPhone/iPad) Lorsque vous avez assembl une application mobile avec Dreamweaver, vous pouvez la visualiser dans un mulateur d'appareil ou la dployer sur votre appareil. Important : L'application mobile que vous assemblez avec Dreamweaver est exclusivement destine des fins de dbogage. L'application s'excute dans les mulateurs Android et iOS, ou sur votre appareil mobile personnel si vous effectuez le transfert, mais vous ne pouvez pas envoyer les applications mobiles de dbogage aux magasins en ligne Apple et Android. Pour pouvoir envoyer des applications iOS ou Android, vous devez en outre les signer en dehors de Dreamweaver. Pour plus d'informations sur l'envoi d'applications aux magasins en ligne Apple et Android, consultez la documentation d'Android ou le guide d'utilisateur du programme sur le portail Apple iOS Provisioning Portal. (Avant de pouvoir accder au portail Apple iOS Provisioning Portal, vous devez vous inscrire aux programmes Apple Developer Program [gratuit] et iOS Developer Program [redevance annuelle] .)
Cration d'une application Web l'aide de la page de dmarrage

Vous pouvez utiliser n'importe quelle page de dmarrage pour crer votre application Web. Toutefois, si votre application Web, dploye en tant qu'application mobile, accde des fonctionnalits natives sur les appareils mobiles, utilisez la page jQuery Mobile (PhoneGap). La page de dmarrage jQuery Mobile (PhoneGap) contient le fichier phonegap.js en plus des autres fichiers jQuery Mobile. Le fichier phonegap.js contient les API requises pour travailler avec les fonctionnalits mobiles natives telles que GPS, acclromtre, appareil photo, etc. 1. Slectionnez Fichier > Nouveau. 2. Choisissez Exemple de page > Dmarrage mobile > jQuery Mobile (PhoneGap). 3. Cliquez sur Crer. 4. Dans le panneau Insertion (Fentre > Insrer), slectionnez jQuery Mobile. Les composants que vous pouvez ajouter l'application Web s'affichent. 5. En mode Cration, placez le curseur l'endroit o vous voulez insrer le composant, puis cliquez sur le composant dans le panneau Insertion. Dans la bote de dialogue qui s'affiche, personnalisez les composants l'aide des options. Remarque : Pour modifier le fichier PhoneGap.js, vous devez configurer le cadre applicatif et les paramtres de l'application. Pour plus d'informations, consultez les rubriques sur la cration de packages d'applications. Affichez un aperu de la page en mode En direct. Certaines des classes CSS ne sont appliques que dans le mode En direct.
Configuration requise pour l'assemblage d'applications

Vous devez veillez r ce que votre configuration systme soit la suivante avant de pouvoir assembler une application. Mac OS - iOS Mac OS X Snow Leopard version 10.6 .x ou ultrieure Xcode 3.2 .x avec le SDK iOS (instructions d'installation ci-dessous) Mac OS - Android Mac OS X 10.5.8 ou version ultrieure (x86 uniquement) SDK Android (instructions d'installation ci-dessous) Windows - iOS iOS est uniquement disponible pour les utilisateurs d'un ordinateur Apple Windows - Android Windows XP (32 bits), Vista (32 bits ou 64 bits), ou Windows 7 (32 bits ou 64 bits)
616
SDK Android (instructions d'installation ci-dessous)
Cration d'un package d'application (Windows)

Pour plus d'informations sur la cration d'une application Web, y compris des exemples de fichiers, consultez ce didacticiel sur le Ple de dveloppement Dreamweaver. 1. Ouvrez l'application Web que vous voulez convertir en application mobile. Assurez-vous que votre application Web est configure en tant que site dans Dreamweaver et que la taille de votre site est infrieure 25 Mo. Remarque : Assurez-vous que l'application contient uniquement des fichiers HTML5, CSS et JavaScript. 2. Choisissez Site > Applications mobiles > Configurer le cadre applicatif. 3. Cliquez sur Easy Install pour installer le SDK Android. Remarque : Si l'installation simplifie choue, consultez la Tech Note 90408. 4. Choisissez l'endroit o vous voulez installer les fichiers du SDK, puis cliquez sur Slectionner. Une fois l'installation termine, cliquez sur Enregistrer. 5. Choisissez Site > Applications mobiles > Paramtres de l'application. 6. Dans la zone Bundle ID, entrez le nom du package l'aide des informations de la bote de dialogue. 7. Donnez un nom l'application et indiquez le nom de la personne qui l'a conue. 8. Spcifiez ventuellement les lments suivants : a. Dans PNG de l'icne de l'application, spcifiez un fichier PNG utiliser comme l'icne de l'application. Dreamweaver redimensionne l'icne la taille standard si vous ne l'avez pas dj fait. b. Dfinissez un chemin cible pour le package. c. Pour tlcharger et installer les plus rcents composants SDK de Google, cliquez sur Grer les AVD. Utilisez le SDK Android et AVD Manager pour mettre jour le SDK Android. Pour plus d'informations sur l'utilisation de gestionnaire, voir http://developer.android.com/sdk/adding-components.html. Remarque : Lorsque vous cliquez sur Enregistrer, le fichier phonegap.js est copi dans la racine du site. 9. Effectuez l'une des oprations suivantes : Si vous tes en train de dployer directement votre application sur un appareil, choisissez Site > Applications mobiles > Crer. Slectionnez une plate-forme/un appareil pour la gnration. Si vous souhaitez voir comment l'application se prsente dans un mulateur avant de la gnrer, choisissez Site > Applications mobiles > Crer et muler.
Cration d'un package d'application (Mac OS)

Pour un didacticiel sur la cration d'une application Web, y compris des exemples de fichiers, consultez cet article du Ple de dveloppement Dreamweaver. 1. Ouvrez l'application Web que vous voulez convertir en application mobile. Assurez-vous que votre application Web est configure en tant que site dans Dreamweaver et que la taille de votre site est infrieure 25 Mo. Remarque : Assurez-vous que l'application contient uniquement des fichiers HTML5, CSS et JavaScript. 2. Choisissez Site > Applications mobiles > Configurer le cadre applicatif. 3. Installez le kit de dveloppement pour iOS ou Android en fonction de vos besoins : Cliquez sur le lien Apple iOS Dev Center pour tlcharger et installez les SDK xcode et iOS. Par dfaut, l'application est install dans le rpertoire OS <numro de version>/developer. Connectez-vous au Dev Center l'aide de votre ID Apple. L'inscription est gratuite. Crez un compte si vous n'tes pas enregistr. Remarque : Vous pouvez utiliser le package SDK tlcharg depuis l'Apple Dev Center des fins de test. Toutefois, pour charger votre application dans l'Apple Store, vous devez vous inscrire en tant que dveloppeur Apple aprs avoir pay la redevance requise. Cliquez sur Easy Install pour installer le SDK Android. Remarque : Si l'installation simplifie choue, consultez la Tech Note 90408. 4. Cliquez sur Enregistrer. 5. Choisissez Site > Applications mobiles > Paramtres de l'application. 6. Dans la zone Bundle ID, entrez le nom du package l'aide des informations de la bote de dialogue. 7. Donnez un nom l'application et indiquez le nom de la personne qui l'a conue. 8. Si vous le souhaitez, procdez comme suit :
617
(Android) Dans PNG de l'icne de l'application, spcifiez un fichier PNG utiliser comme l'icne de l'application. Dreamweaver redimensionne l'icne la taille standard si vous ne l'avez pas dj fait. (Mac OS 10.6.x) Dans PNG de l'cran de dmarrage, spcifiez un fichier PNG utiliser comme icne pour l'application iOS. Dreamweaver redimensionne l'icne la taille standard si vous ne l'avez pas dj fait. (Mac OS 10.6.x) Slectionnez une version de l'iPhone/iPod touch/iPad pour lequel vous crez le package. Dfinissez un chemin cible diffrent pour le package. Remarque : Lorsque vous cliquez sur Enregistrer, le fichier phonegap.js est copi dans la racine du site. 9. Effectuez l'une des oprations suivantes : Si vous tes en train de dployer directement votre application sur un appareil, choisissez Site > Applications mobiles > Crer. Slectionnez une plate-forme/un appareil pour la gnration. Si vous souhaitez voir comment l'application se prsente dans un mulateur avant de la gnrer, choisissez Site > Applications mobiles > Crer et muler.
Adobe recommande
Assemblage d'applications Web sous la forme d'applications mobiles l'aide de Dreamweaver CS5.5
Jon Michael Varese Didacticiel dtaill sur l'assemblage de votre application Web Voir aussi http://www.phonegap.com/about http://jquerymobile.com/demos/1.0a2/ http://docs.phonegap.com/ Didacticiel sur l'assemblage d'applications Web
618
Suppression de scripts de connexion

Utilisation de la commande Supprimer les scripts de connexion
Utilisation de la commande Supprimer les scripts de connexion
Haut de la page
Vous pouvez utiliser la commande Supprimer les scripts de connexion pour supprimer les scripts que Dreamweaver place dans un dossier distant pour accder aux bases de donnes. Ces scripts ne sont ncessaires que lors de la phase de cration dans Dreamweaver. Lorsque vous slectionnez l'option Utilisation du pilote sur le serveur d'valuation ou Utilisation de la DSN sur le serveur d'valuation dans la bote de dialogue de connexion une base de donnes, Dreamweaver charge un script MMHTTPDB sur le serveur d'valuation. Ceci permet Dreamweaver de manipuler le pilote de base de donnes distant avec le protocole HTTP, ce qui permet en retour Dreamweaver d'obtenir, dans la base de donnes, les informations ncessaires la cration de votre site. Toutefois, ce fichier ne permet pas de voir les noms des sources de donnes (DSN) dfinis sur l'ordinateur. Si les DSN et les bases de donnes ne sont pas protgs par un mot de passe, le script permet une personne malveillante d'envoyer des commandes SQL la base de donnes. Les fichiers de scripts MMHTTPDB se trouvent dans le dossier _mmServerScripts, qui est lui-mme situ la racine du site Web. Remarque : Le navigateur de fichiers de Dreamweaver (le panneau Fichiers) ne montre pas le dossier _mmServerScripts. Celui-ci n'est visible qu' partir d'un client FTP tiers ou du navigateur de fichiers. Avec certaines configurations, ces scripts sont inutiles. Comme ces scripts ne sont pas utiliss lors du transfert des pages Web aux visiteurs du site, il est conseill de ne pas les placer sur un serveur de production. Si vous avez transfr le fichier de scripts MMHTTPDB sur un serveur de production, il est conseill de le supprimer. La commande Supprimer les scripts de connexion efface automatiquement ces fichiers.
619
Scurisation d'un dossier dans votre application (ColdFusion)

Scurisation d'un dossier ou d'un site sur le serveur (ColdFusion)
Scurisation d'un dossier ou d'un site sur le serveur (ColdFusion)
Haut de la page
Dreamweaver permet de protger l'aide d'un mot de passe un dossier spcifique de l'application ColdFusion, y compris le dossier racine de l'application. Dans ce cas, lorsqu'un visiteur demande une page figurant dans ce dossier, ColdFusion demande un nom d'utilisateur et un mot de passe. ColdFusion enregistre le nom d'utilisateur et le mot de passe dans des variables de session, de sorte que le visiteur ne se les voit plus demander au cours de la mme session. Remarque : Cette fonctionnalit n'est disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou version ultrieure. 1. Ouvrez un document ColdFusion dans Dreamweaver, et choisissez Commandes > Assistant d'ouverture de session ColdFusion 2. Saisissez les paramtres voulus dans l'assistant d'ouverture de session ColdFusion a. Indiquez le chemin d'accs complet du rpertoire scuriser. b. Dans l'cran suivant, choisissez l'un des types d'authentification suivants : Authentification simple Scurise l'application l'aide d'un nom et d'un mot de passe identiques pour tous les utilisateurs. Authentification Windows NT Scurise l'application avec les noms d'utilisateur et mots de passe de Windows NT. Authentification LDAP Scurise l'application avec les noms d'utilisateur et mots de passe enregistrs sur un serveur LDAP. c. Indiquez si vous souhaitez que les utilisateurs se connectent l'aide d'une page d'ouverture de session ColdFusion ou d'un menu droulant. d. Dans l'cran suivant, dfinissez les options ci-dessous : Si vous avez choisi l'authentification simple, indiquez le nom et le mot de passe que chaque utilisateur doit saisir. Si vous avez choisi l'authentification Windows NT, indiquez le domaine NT utiliser pour la validation. Si vous avez choisi l'authentification LDAP, indiquez le serveur LDAP utiliser pour la validation. 3. Transfrez les nouveaux fichiers sur le site distant. Ces fichiers se trouvent dans le dossier local de votre site. Voir aussi
620
Configuration de l'ordinateur pour le dveloppement d'applications

Elments ncessaires la cration d'applications Web Fonctions lmentaires du serveur Web Choix d'un serveur Web Choix d'un serveur d'application Choix d'une base de donnes Configuration d'un environnement de dveloppement ColdFusion Configuration d'un environnement de dveloppement PHP Configuration d'un environnement de dveloppement ASP Cration d'un dossier racine pour l'application A propos de la dfinition d'un site Dreamweaver
Elments ncessaires la cration d'applications Web

Pour crer des applications Web dans Adobe Dreamweaver, vous devez disposer des logiciels suivants : Un serveur Web Un serveur d'application excut sur votre serveur Web
Haut de la page
Remarque : Dans le contexte des applications Web, les termes serveur Web et serveur d'application font rfrence des logiciels et non du matriel. Si vous souhaitez utiliser une base de donnes en conjonction avec votre application, vous devez galement disposer des logiciels suivants : Un systme de base de donnes Un pilote de base de donnes prenant en charge votre base de donnes Plusieurs socits d'hbergement Web vous offrent la possibilit d'utiliser leurs logiciels pour tester et dployer des applications Web. Dans certains cas, il est possible d'installer le logiciel requis sur le mme ordinateur que Dreamweaver des fins de dveloppement. Vous pouvez galement installer les logiciels sur un ordinateur en rseau (le plus souvent un ordinateur fonctionnant sous Windows 2000 ou XP) pour rendre votre projet accessible aux autres dveloppeurs de votre quipe. Si vous souhaitez utiliser une base de donnes avec votre application Web, vous devez au pralable tablir une connexion avec cette base.
Fonctions lmentaires du serveur Web
Haut de la page
Pour dvelopper et tester des pages Web dynamiques, vous avez besoin d'un serveur Web oprationnel. Un serveur Web est un logiciel qui fournit des pages Web en rponse des requtes de navigateurs Web. Un serveur Web est parfois appel serveur HTTP. Vous pouvez installer et utiliser un serveur Web sur votre ordinateur local. Si vous travaillez sur Macintosh, vous pouvez utiliser le serveur Web Apache dj install sur votre machine. Remarque : Adobe ne fournit aucune assistance technique pour les logiciels tiers, tels que Microsoft Internet Information Server. Si vous avez besoin d'aide pour un produit Microsoft, contactez le support technique de Microsoft. Si vous utilisez Internet Information Server (IIS) pour dvelopper des applications Web, le nom par dfaut de votre serveur Web est le nom de votre ordinateur. Vous pouvez modifier le nom du serveur en modifiant celui de votre ordinateur. Si votre ordinateur n'a pas de nom, le serveur utilise le mot localhost . Le nom du serveur correspond au dossier racine du serveur, lequel est gnralement (sur un ordinateur fonctionnant sous Windows) : C:\Inetpub\wwwroot. Vous pouvez ouvrir une page Web quelconque stocke dans le dossier racine en entrant l'URL suivante dans un navigateur en cours d'excution sur votre ordinateur. http://nom_du_serveur/nom_de_fichier Par exemple, si le nom du serveur est mer_noire et qu'une page Web intitule soleil.html est stocke dans C:\Inetput\wwwroot\, vous pouvez ouvrir cette page en tapant l'URL suivante dans le navigateur en cours d'excution sur l'ordinateur local : http://mer_noire/soleil.html Remarque : Veillez taper des barres obliques normales et non inverses dans les URL. Vous pouvez galement ouvrir une page Web quelconque stocke dans un sous-dossier du dossier racine en spcifiant ce sous-dossier dans l'URL. Par exemple, supposons que le fichier soleil.html est stock dans un sous-dossier nomm gamelan, de la faon suivante : C:\Inetput\wwwroot\gamelan\soleil.html
621
Vous pouvez ouvrir cette page en entrant l'URL suivante dans un navigateur en cours d'excution sur votre ordinateur : http://mer_noire/gamelan/soleil.html Lorsque le serveur Web est excut sur votre ordinateur, vous pouvez remplacer le nom du serveur par localhost. Par exemple, les URL suivantes ouvrent la mme page dans un navigateur : http://mer_noire/gamelan/soleil.html http://localhost/gamelan/soleil.html Remarque : Vous pouvez aussi utiliser une autre expression la place du nom du serveur ou de localhost : 127.0.0.1 (par exemple, http://127.0.0.1/gamelan/soleil.html).
Haut de la page
Choix d'un serveur Web
Pour dvelopper et tester des applications Web, vous pouvez choisir parmi plusieurs serveurs Web courants, savoir IIS (Microsoft Internet Information Server) et Apache HTTP Server. Si vous n'utilisez pas de service d'hbergement Web, slectionnez un serveur Web et installez-le sur un ordinateur local des fins de dveloppement. Les utilisateurs souhaitant dvelopper des applications Web ColdFusion sous Windows et sur Macintosh peuvent le faire grce au serveur Web inclus dans l'dition dveloppeur du serveur d'application ColdFusion 8. Cette dition est disponible gratuitement. Les autres utilisateurs Windows peuvent excuter un serveur Web sur leur ordinateur local en installant IIS. Ce serveur Web peut avoir dj t install sur votre ordinateur. Parcourez votre arborescence pour vrifier si elle comporte un dossier C:\Inetpub ou D:\Inetpub. IIS cre ce dossier pendant l'installation. Les utilisateurs de Mac OS peuvent utiliser le serveur Web Apache local install avec leur systme d'exploitation. Pour plus d'informations sur l'installation et la configuration des autres serveurs Web, consultez la documentation de votre fournisseur ou consultez l'administrateur systme.
Haut de la page
Un serveur d'application est un logiciel qui permet un serveur Web de traiter les pages dynamiques. Lorsque vous choisissez un serveur d'application, tenez compte des critres suivants : votre budget, la technologie de serveur que vous souhaitez utiliser (ColdFusion, ASP ou PHP) et le type serveur Web. Budget Certains fournisseurs proposent des applications haut de gamme dont le prix d'achat et les cots de fonctionnement sont trs levs. D'autres fournisseurs proposent des solutions plus simples et plus conomiques (par exemple ColdFusion). Certains serveurs d'application sont intgrs aux serveurs Web (notamment Microsoft IIS) et d'autres peuvent tre tlchargs gratuitement sur Internet (notamment PHP). Technologie de serveur Les serveurs d'application utilisent diffrentes technologies. Dreamweaver prend en charge trois technologies de serveur : ColdFusion, ASP et PHP. Le tableau suivant indique les serveurs d'application courants axs sur l'une des technologies de serveur prises en charge par Dreamweaver : Technologie de serveur ColdFusion ASP PHP Serveur d'application Adobe ColdFusion 8 Microsoft IIS Serveur PHP
Pour en savoir davantage sur ColdFusion, slectionnez ColdFusion dans le menu Aide. Pour en savoir plus sur ASP, visitez le site Web Microsoft l'adresse suivante : http://msdn.microsoft.com/library/default.asp?url=/library/frfr/dnanchor/html/activeservpages.asp. Pour en savoir plus sur PHP, visitez le site Web de PHP l'adresse suivante : www.php.net/.
Choix d'une base de donnes
Haut de la page
Les bases de donnes se prsentent sous une multitude de formes, selon la quantit et la complexit des donnes qu'elles doivent stocker. Lorsque vous choisissez une base de donnes, tenez compte de plusieurs facteurs, dont votre budget et le nombre d'utilisateurs qui devraient accder la base de donnes. Budget Certains fournisseurs proposent des serveurs de base de donnes d'application haut de gamme dont le prix d'achat et les cots d'administration sont trs levs. D'autres fournisseurs proposent des solutions plus aises et plus conomiques, comme Microsoft Access ou la base de donnes libre MySQL. Utilisateurs Si vous pensez qu'une large communaut d'utilisateurs accdera votre site Web, optez pour une base de donnes conue pour
622
prendre en charge l'ensemble des utilisateurs potentiels de votre site. Lorsque les sites Web ncessitent une plus grande souplesse en termes de modlisation des donnes et doivent prendre en charge un trs grand nombre d'utilisateurs simultans, envisagez d'employer des bases de donnes relationnelles serveur (communment dsignes sous le nom de SGBDR), telles que Microsoft SQL Server et Oracle.
Haut de la page
Configuration d'un environnement de dveloppement ColdFusion
Pour plus d'informations sur la configuration d'un environnement de dveloppement ColdFusion pour Dreamweaver sur votre ordinateur Windows ou Mac, consultez le site Web d'Adobe l'adresse suivante : www.adobe.com/devnet/dreamweaver/articles/setup_cf.html. Les utilisateurs de Windows et de Macintosh peuvent tlcharger et installer une dition gratuite et totalement fonctionnelle du serveur d'applications ColdFusion depuis le site d'Adobe, l'adresse www.adobe.com/go/coldfusion_fr/. Remarque : L'dition dveloppeur est rserve au dveloppement et l'valuation d'applications Web non commerciales. La licence accorde ne permet pas d'effectuer le dploiement. Cette dition prend en charge les requtes provenant de l'hte local et de deux adresses IP distantes. Vous pouvez l'utiliser pour dvelopper et tester vos applications Web aussi longtemps que ncessaire, car la licence est permanente. Pour plus d'informations, consultez l'aide de ColdFusion (Aide > Aide de ColdFusion). Pendant l'installation, vous pouvez configurer ColdFusion de manire utiliser le serveur Web intgr au programme ou un autre serveur Web de votre systme. En principe, il est prfrable de faire correspondre du mieux possible votre environnement de dveloppement et votre environnement de production. Par consquent, si un serveur Web (par exemple, Microsoft IIS) est install sur l'ordinateur sur lequel vous dveloppez vos applications, il est peut-tre prfrable de l'utiliser.
Configuration d'un environnement de dveloppement PHP
Haut de la page
Pour plus d'informations sur la configuration d'un environnement de dveloppement PHP pour Dreamweaver sur votre ordinateur Windows ou Mac, consultez le site Web d'Adobe l'adresse suivante : www.adobe.com/devnet/dreamweaver/articles/setup_php.html. Il existe une version du serveur d'application PHP pour les systmes Windows, Linux, UNIX, HP-UX, Solaris et Mac OS X. Pour plus d'informations sur le serveur d'applications, consultez la documentation PHP, que vous pouvez galement tlcharger partir du site Web PHP l'adresse www.php.net/download-docs.php.
Configuration d'un environnement de dveloppement ASP
Haut de la page
Pour plus d'informations sur la configuration d'un environnement de dveloppement ASP pour Dreamweaver sur votre ordinateur Windows ou Mac, consultez le site Web d'Adobe l'adresse suivante : www.adobe.com/devnet/dreamweaver/articles/setup_asp.html. Pour accder aux pages ASP, vous devez disposer d'une application prenant en charge Microsoft Active Server Pages 2.0., telle que Microsoft IIS, qui est fournie avec Windows 2000 et Windows XP Professionnel. Les utilisateurs de Windows XP Professionnel peuvent installer et excuter IIS sur leur ordinateur local. Les utilisateurs de Macintosh peuvent faire appel un service d'hbergement Web offrant une solution ASP ou bien installer IIS sur un ordinateur distant.
Cration d'un dossier racine pour l'application
Haut de la page
Aprs avoir trouv une socit d'hbergement de site Web ou avoir vous-mme conu votre serveur, crez un dossier racine pour votre application Web sur l'ordinateur o s'excute votre serveur. Le dossier racine peut tre un dossier local ou distant, suivant l'emplacement du serveur Web. Le serveur Web rpondra aux requtes HTTP d'un navigateur Web en renvoyant les fichiers de ce dossier ou de ses sous-dossiers. Par exemple, sur un ordinateur excutant ColdFusion 8, tous les fichiers contenus dans le dossier\ColdFusion8\wwwroot et dans chacun de ses sous-dossiers peuvent tre transmis un navigateur Web. Le tableau ci-dessous rpertorie les dossiers racine par dfaut des diffrents serveurs Web : Serveur Web ColdFusion 8 IIS Apache (Windows) Apache (Macintosh) Dossier racine par dfaut \ColdFusion8\wwwroot \Inetpub\wwwroot \apache\htdocs Users:MonNomd'Utilisateur:Sites
Pour tester le serveur Web, enregistrez une page HTML test dans le dossier racine par dfaut, puis tentez de l'ouvrir en indiquant son URL dans un navigateur. L'URL est compose du nom de domaine et du nom du fichier correspondant la page HTML, comme dans l'exemple ci-dessous : www.exemple.com/testpage.htm
623
Si le serveur Web s'excute sur votre ordinateur local, vous pouvez utiliser localhost au lieu d'un nom de domaine. Entrez l'une des URL d'hte local suivantes correspondant votre serveur Web : Serveur Web ColdFusion 8 IIS Apache (Windows) Apache (Macintosh) URL d'hte local http://localhost:8500/testpage.htm http://localhost/testpage.htm http://localhost:80/testpage.htm http://localhost/~MonNomd'Utilisateur/testpage.htm (o MonNomd'Utilisateur est votre nom d'utilisateur Macintosh)
Remarque : Par dfaut, le serveur ColdFusion est reli au port 8500, et le serveur Web Apache pour Windows au port 80. Si la page ne s'affiche pas correctement, recherchez les erreurs potentielles suivantes : Le serveur Web n'est pas en cours d'excution. Consultez les instructions de dmarrage dans la documentation du serveur Web. Le fichier n'a pas d'extension .htm ou .html. Vous avez indiqu le chemin du fichier contenant la page (par exemple, c:\ColdFusion8\wwwroot\testpage.htm) au lieu de son URL (par exemple, http://localhost:8500/testpage.htm) dans la zone d'adresse de votre navigateur. L'URL contient une faute de frappe. Recherchez les erreurs ventuelles et vrifiez que le nom de fichier n'est pas suivi d'une barre oblique, comme dans l'adresse suivante : http://localhost:8080/testpage.htm/. Aprs avoir cr un dossier racine pour votre application, dfinissez un site Dreamweaver pour la gestion des fichiers.
A propos de la dfinition d'un site Dreamweaver
Haut de la page
Aprs avoir configur le systme en vue du dveloppement d'applications Web, vous devez dfinir un site Dreamweaver pour la gestion des fichiers. Avant de commencer, vrifiez que les conditions suivantes sont runies : Vous avez accs un serveur Web. Le serveur Web peut rsider sur un ordinateur local, sur un ordinateur distant tel qu'un serveur de dveloppement, ou sur un serveur gr par une socit d'hbergement Web Un serveur d'application est install et excut sur le systme o rside le serveur Web. Vous avez cr un dossier racine pour votre application Web sur le systme excutant le serveur Web. La dfinition d'un site Dreamweaver pour l'application Web se droule en trois tapes : 1. Dfinition d'un dossier local Ce dossier local est le dossier du disque dur dans lequel seront stockes les copies de travail des fichiers du site. Vous pouvez dfinir un dossier local pour chacune des applications Web cres. La dfinition d'un dossier local vous permet galement de grer vos fichiers et de les transfrer aisment vers ou depuis le serveur Web. 2. Dfinition d'un dossier distant Dfinissez un dossier situ sur l'ordinateur excutant le serveur Web comme dossier distant Dreamweaver. Ce dossier distant est le dossier que vous avez cr sur le serveur Web pour l'application Web. 3. Dfinition d'un dossier de test Dreamweaver utilise ce dossier pour gnrer et afficher du contenu dynamique et se connecter des bases de donnes pendant que vous procdez la cration du site. Ce serveur d'valuation peut se trouver sur votre ordinateur local, un serveur de dveloppement, un serveur intermdiaire ou un serveur de production. Vous devez seulement vous assurer que le serveur slectionn est en mesure de traiter le type de pages dynamiques que vous avez l'intention de dvelopper. Une fois le site Dreamweaver dfini, vous pouvez procder la cration de l'application Web. Voir aussi
624
Rsolution des problmes de connexion aux bases de donnes

Rsolution des problmes d'autorisation Rsolution des messages d'erreur Microsoft Rsolution des messages d'erreur MySQL
Rsolution des problmes d'autorisation
Haut de la page
Les problmes d'autorisation sont la cause la plus frquente des erreurs d'accs aux dossiers ou aux fichiers. Si votre base de donnes est installe sur un ordinateur quip de Windows 2000 ou Windows XP et si vous recevez un message d'erreur lorsque vous tentez d'afficher une page dynamique dans un navigateur Web ou en mode En direct, l'erreur peut provenir d'un problme d'autorisation. Le compte Windows qui tente d'accder la base de donnes ne dispose pas des droits suffisants. Le compte peut tre le compte anonyme Windows (par dfaut, IUSR_computername) ou un compte utilisateur spcifique si la page a t scurise pour un accs authentifi. Vous devez modifier les autorisations afin d'attribuer les droits d'accs appropris au compte IUSR_computername pour que le serveur Web puisse accder au fichier de base de donnes. En outre, le dossier contenant le fichier de base de donnes doit galement disposer de certaines autorisations pour crire dans cette base de donnes. Si la page doit tre accde de manire anonyme, attribuez le contrle complet au compte IUSR_computername pour le dossier et le fichier de base de donnes, comme indiqu dans la procdure ci-dessous. En outre, si le chemin d'accs la base de donnes est rfrenc au moyen de la convention UNC (\\Serveur\Share), assurez-vous que les Autorisations de partage attribuent les droits d'accs complets au compte IUSR_computername. Cette tape s'applique mme si le partage est situ au niveau du serveur Web local. Si vous copiez la base de donnes depuis un autre emplacement, il est possible qu'elle n'hrite pas des autorisations d'accs de son dossier de destination et que vous deviez modifier les autorisations d'accs pour la base de donnes.
Vrification ou modification des autorisations de la base de donnes (Windows XP)

1. Assurez-vous que vous avez des privilges d'administrateur sur cet ordinateur. 2. Dans l'Explorateur Windows, localisez le fichier de la base de donnes ou le dossier contenant la base de donnes, cliquez sur ce fichier ou ce dossier avec le bouton droit de la souris, puis slectionnez Proprits. 3. Cliquez sur l'onglet Scurit. Remarque : Cette tape s'applique uniquement si vous utilisez un systme de fichiers NTFS. Si vous disposez d'un systme de fichiers FAT, la bote de dialogue n'a pas d'onglet Scurit. 4. Si le compte IUSR_computername n'apparat pas dans la liste des noms d'utilisateur ou de groupe, cliquez sur le bouton Ajouter pour le rajouter. 5. Dans la bote de dialogue de slection des utilisateurs ou des groupes, cliquez sur Avanc. La bote de dialogue vous propose alors davantage d'options. 6. Cliquez sur le bouton des emplacements et slectionnez le nom de l'ordinateur. 7. Cliquez sur le bouton de recherche pour afficher une liste des noms de compte associs l'ordinateur. 8. Slectionnez le compte IUSR_computername et cliquez sur OK, puis cliquez une nouvelle fois sur OK pour refermer la bote de dialogue. 9. Pour attribuer les droits d'accs complets au compte IUSR, cochez la case Contrle total et cliquez sur OK.
Vrification ou modification des autorisations de la base de donnes (Windows 2000)

1. Assurez-vous que vous avez des privilges d'administrateur sur cet ordinateur. 2. Dans l'Explorateur Windows, localisez le fichier de la base de donnes ou le dossier contenant la base de donnes, cliquez sur ce fichier ou ce dossier avec le bouton droit de la souris, puis slectionnez Proprits. 3. Cliquez sur l'onglet Scurit. Remarque : Cette tape s'applique uniquement si vous utilisez un systme de fichiers NTFS. Si vous disposez d'un systme de fichiers FAT, la bote de dialogue n'a pas d'onglet Scurit. 4. Si le compte IUSR_computername n'est pas rpertori parmi les comptes Windows dans la bote de dialogue Autorisations - Fichier, cliquez sur le bouton Ajouter pour l'ajouter. 5. Dans la bote de dialogue de slection des utilisateurs, ordinateurs ou groupes, choisissez le nom de l'ordinateur partir du menu de recherche pour afficher une liste des noms de compte associs l'ordinateur. 6. Slectionnez le compte IUSR_computername et cliquez sur Ajouter.
625
7. Pour attribuer les droits d'accs complets au compte IUSR, slectionnez Contrle total dans le menu Type d'accs, puis cliquez sur OK. Pour une scurit accrue, les autorisations peuvent tre dfinies de faon ce que le droit d'accs en lecture soit dsactiv pour le dossier Web contenant la base de donnes. Il ne sera pas permis de parcourir ce dossier, mais les pages Web continueront d'accder la base de donnes. Pour plus d'informations sur les autorisations du compte IUSR et du serveur Web, consultez les notes techniques du centre de support technique Adobe : Description de l'authentification anonyme et du compte IUSR l'adresse www.adobe.com/go/authentication_fr Dfinition des autorisations d'un serveur Web IIS l'adresse www.adobe.com/go/server_permissions_fr
Rsolution des messages d'erreur Microsoft
Haut de la page
Ces messages d'erreur Microsoft peuvent se produire lorsque vous demandez une page dynamique au serveur si vous utilisez Internet Information Server (IIS) avec un systme de base de donnes Microsoft tel que SQL Server ou Access. Remarque : Adobe n'offre pas de support technique pour les logiciels tiers tels que Microsoft Windows et IIS. Si cette section ne vous permet pas de rsoudre votre problme, contactez le support technique de Microsoft ou visitez le site Web de support technique Microsoft l'adresse http://support.microsoft.com/. Pour plus d'informations sur les erreurs de type 80004005, voir la section Guide de dpannage pour les erreurs de type 80004005 au niveau des composants Active Server Pages et Microsoft Data Access (Q306518) sur le site Web de Microsoft l'adresse http://support.microsoft.com/default.aspx?scid=kb;fr-fr;Q306518.
[Reference]80004005 - Data source name not found and no default driver specified (Le nom de la source de donnes est introuvable et aucun pilote par dfaut n'est spcifi)
Cette erreur survient lorsque vous tentez de visualiser une page dynamique dans un navigateur Web ou en mode En direct. Le message d'erreur varie en fonction de votre base de donnes et de votre serveur Web. D'autres variantes de ce message d'erreur incluent : 80004005Driver's SQLSetConnectAttr failed (Le paramtre SQLSetConnectAttr du pilote a chou) 80004005 - General error Unable to open registry key 'DriverId' (Erreur gnrale. Impossible d'ouvrir la cl du registre DriverId) Les causes et les solutions possibles sont les suivantes : La page ne parvient pas trouver le DSN. Assurez-vous qu'un DSN a t cr sur le serveur Web et sur l'ordinateur local. Le DSN peut avoir t dfini en tant que DSN utilisateur, et non en tant que DSN systme. Supprimez le DSN utilisateur et crez un DSN systme pour le remplacer. Remarque : Si vous ne supprimez pas le DSN utilisateur, les noms DSN en double engendrent de nouvelles erreurs ODBC. Si vous utilisez Microsoft Access, le fichier de base de donnes (.mdb) peut tre verrouill Ce verrouillage peut tre la consquence d'un DSN avec un nom diffrent accdant la base de donnes. Dans l'Explorateur Windows, recherchez le fichier de verrouillage (.ldb) dans le dossier contenant le fichier de base de donnes (.mdb) et supprimez-le. Si un autre DSN pointe vers le mme fichier de base de donnes, vous pouvez supprimer ce DSN pour empcher tout risque d'erreur l'avenir. Redmarrez l'ordinateur aprs avoir apport des modifications.
[Reference]80004005Couldn't use (unknown)'; file already in use (Impossible d'utiliser "(inconnu)" ; fichier en cours d'utilisation)
Cette erreur survient lorsque vous utilisez une base de donnes Microsoft Access et tentez de visualiser une page dynamique dans un navigateur Web ou en mode En direct. Une variante de ce message d'erreur est 80004005 - Microsoft Jet database engine cannot open the file (unknown) (Le moteur de base de donnes Jet ne peut pas ouvrir le fichier (inconnu)). Ceci est probablement d un problme d'autorisations. Voici quelques causes et solutions spcifiques : Le compte utilis par Internet Information Server (gnralement IUSR) peut ne pas disposer des droit d'accs Windows adquats pour une base de donnes base sur fichier ou pour le dossier contenant le fichier. Vrifiez les droits d'accs du compte IIS (IUSR) dans le gestionnaire utilisateur. Il est possible que vous ne soyez pas autoris crer ou supprimer des fichiers temporaires. Vrifiez les autorisations attribues au fichier et au dossier. Assurez-vous que vous tes autoris crer ou supprimer des fichiers temporaires. Les fichiers temporaires sont gnralement crs dans le mme dossier que la base de donnes, mais ils peuvent galement tre crs dans d'autres dossiers tels que /Winnt. Sous Windows 2000, il peut tre ncessaire de modifier le dlai d'expiration pour le DSN de la base de donnes Access. Pour modifier ce dlai, choisissez Dmarrer > Paramtres > Panneau de configuration > Outils d'administration > Sources de donnes (ODBC). Cliquez sur l'onglet Systme, slectionnez le DSN appropri puis cliquez sur le bouton Configurer. Cliquez sur le bouton Options et fixez la valeur de dlai d'expiration de la page 5000. Si les problmes persistent, consultez les points suivants dans la base de connaissances Microsoft : PRB : 80004005 Couldn't use (unknown)'; file already in use (Impossible d'utiliser "(inconnu)" ; fichier en cours d'utilisation) l'adresse
626
http://support.microsoft.com/default.aspx?scid=kb;fr-fr;Q174943. PRB : La connectivit de la base de donnes Microsoft Access choue dans Active Server Pages l'adresse http://support.microsoft.com/default.aspx?scid=kb;fr-fr;Q253604. PRB : Erreur Impossible d'ouvrir le fichier inconnu lors de l'utilisation d'Access l'adresse http://support.microsoft.com/default.aspx? scid=kb;fr-fr;Q166029.
[Reference]80004005Logon Failed() (Echec de connexion)

Cette erreur survient lorsque vous utilisez Microsoft SQL Server et tentez de visualiser une page dynamique dans un navigateur Web ou en mode En direct. Cette erreur est gnre par SQL Server s'il refuse ou ne reconnat pas le compte ou le mot de passe de connexion soumis (si vous utilisez une scurit standard), ou si un compte Windows n'est pas associ un compte SQL (si vous utilisez une scurit intgre). Les solutions possibles sont les suivantes : Si vous utilisez une scurit standard, le nom de compte et le mot de passe peuvent tre incorrects. Essayez le compte et le mot de passe de l'administrateur systme (ID utilisateur : sa et aucun mot de passe), qui doivent tre dfinis dans la ligne de chane de connexion. Les DSN ne conservent pas les noms d'utilisateurs et les mots de passe. Si vous utilisez une scurit intgre, vrifiez le compte Windows appelant la page et localisez son compte SQL associ (s'il existe). SQL Server n'autorise pas le trait de soulignement dans les noms de compte SQL. Si un utilisateur connecte manuellement le compte Windows IUSR_nommachine un compte SQL portant le mme nom, il s'ensuivra automatiquement un chec. Connectez un compte quelconque qui utilise un trait de soulignement un nom de compte SQL qui n'en comporte aucun.
[Reference]80004005Operation must use an updateable query (L'opration doit utiliser une requte pouvant tre mise jour)
Cette erreur survient lorsqu'un vnement met jour un jeu d'enregistrements ou y insre des donnes. Les causes et les solutions possibles sont les suivantes : Les autorisations dfinies pour le dossier contenant la base de donnes sont trop restrictives. Les droits d'accs IUSR doivent tre dfinis sur lecture/criture. Le fichier de base de donnes lui-mme ne dispose pas de droits d'accs en lecture/criture complets. La base de donnes est peut-tre hors du rpertoire Inetpub/wwwroot. Bien que vous puissiez visualiser et parcourir les donnes, vous risquez de ne pas pouvoir les mettre jour, moins que la base de donnes ne soit place dans le rpertoire wwwroot. Le jeu d'enregistrements repose sur une requte ne pouvant pas tre mise jour. Les relations sont de bons exemples de requtes ne pouvant tre mises jour dans une base de donnes. Restructurez vos requtes de faon ce qu'elles puissent tre mises jour. Pour plus d'informations sur cette erreur, voir RBN : Erreur ASP 'La requte ne peut pas tre mise jour' lorsque vous mettez l'enregistrement de la table jour dans la base de connaissance Microsoft l'adresse suivante http://support.microsoft.com/default.aspx? scid=kb;fr-fr;Q174640.
[Reference]80040e07Data type mismatch in criteria expression (Types de donnes non concordants dans l'expression des critres)
Cette erreur survient lorsque le serveur essaie de traiter une page contenant un comportement de serveur Insrer l'enregistrement ou Mettre jour l'enregistrement et que le comportement du serveur tente de dfinir la valeur d'une colonne Date/Heure d'une base de donnes Microsoft Access sur une chane vide (""). Microsoft Access utilise une saisie des caractres rigoureuse ; le logiciel impose un jeu de rgles strictes pour les valeurs de certaines colonnes. La valeur d'une chane vide d'une requte SQL ne peut pas tre stocke dans une colonne Date/Heure Access. Actuellement, la seule solution connue consiste viter d'insrer ou de mettre jour les colonnes Date/Heure Access avec des chanes vides ("") ou avec toute autre valeur ne correspondant pas la gamme de valeurs spcifies pour le type de donnes.
[Reference]80040e10Too few parameters (Nombre de paramtres insuffisant)

Cette erreur survient lorsqu'une colonne spcifie dans votre requte SQL n'existe pas dans la table de la base de donnes. Vrifiez les noms des colonnes de votre base de donnes par rapport votre requte SQL. Cette erreur est souvent due une typographie errone.
[Reference]80040e10COUNT field incorrect (Champ COUNT incorrect)

Cette erreur survient lorsque vous prvisualisez une page contenant un comportement de serveur Insrer l'enregistrement dans un navigateur Web et que vous essayez de l'utiliser pour insrer un enregistrement dans une base de donnes Microsoft Access. Vous tentez peut-tre d'insrer un enregistrement dans un champ de base de donnes qui comporte un point d'interrogation(?) dans son nom de champ. Le point d'interrogation est un caractre spcial pour certains moteurs de bases de donnes, notamment Microsoft Access, et il ne doit pas tre utilis pour les noms de tables de bases de donnes ou de champs.
627
Ouvrez votre systme de base de donnes, supprimez le point d'interrogation (?) des noms de champs et mettez jour les comportements de serveur sur la page qui se rapporte ce champ.
[Reference]80040e14Syntax error in INSERT INTO statement (Erreur de syntaxe dans l'instruction INSERT INTO)
Cette erreur survient lorsque le serveur tente de traiter une page contenant un comportement de serveur Insrer l'enregistrement. Cette erreur rsulte gnralement d'un ou de plusieurs problmes, cits ci-dessous, relatifs au nom d'un champ, d'un objet ou d'une variable de la base de donnes : Utilisation d'un mot rserv en tant que nom. La majorit des bases de donnes disposent d'un jeu de mots rservs. Par exemple, date est un mot rserv et ne peut pas tre utilis pour les noms de champs d'une base de donnes. Utilisation de caractres spciaux dans le nom, tels que ceux mentionns ci-dessous : ./*:!#&-? Utilisation d'un espace dans le nom. L'erreur peut galement survenir lorsqu'un masque d'entre est dfini pour un objet de la base de donnes et que les donnes insres ne sont pas conformes au masque. Pour rsoudre le problme, vitez d'utiliser des mots rservs tels que date , name select , where et level lorsque vous spcifiez des noms de colonnes dans votre base de donnes. Eliminez galement les espaces et les caractres spciaux. Consultez les pages Web suivantes pour des listes dtailles de mots rservs dans les systmes de bases de donnes courants. Microsoft Access l'adresse http://support.microsoft.com/default.aspx?scid=kb;fr-fr;Q209187 Microsoft SQL Server l'adresse http://msdn.microsoft.com/library/default.asp?url=/library/fr-fr/tsqlref/ts_ra-rz_9oj7.asp MySQL l'adresse http://dev.mysql.com/doc/mysql/en/reserved-words.html
[Reference]80040e21ODBC error on Insert or Update (Erreur OBDC au moment d'insrer ou de mettre jour)
Cette erreur survient lorsque le serveur tente de traiter une page contenant un comportement de serveur Mettre jour l'enregistrement ou Insrer l'enregistrement. La base de donnes ne peut pas grer la mise jour ou l'insertion que le comportement de serveur tente de raliser. Les causes et les solutions possibles sont les suivantes : Le comportement de serveur tente de mettre jour un champ de numrotation automatique d'une table de base de donnes ou d'insrer un enregistrement dans un champ de numrotation automatique. Les champs de numrotation automatique sont automatiquement complts par le systme de la base de donnes ; toute tentative faite pour les remplir manuellement est voue l'chec. Le type de donnes que le comportement de serveur met jour ou insre ne correspond pas celui du champ de la base de donnes : insertion d'une date dans un champ boolen (oui/non), insertion d'une chane dans un champ numrique ou insertion d'une chane la mise en forme incorrecte dans un champ Date/Heure.
[Reference]800a0bcdEither BOF or EOF is true (BOF ou EOF est gal True)

Cette erreur survient lorsque vous tentez de visualiser une page dynamique dans un navigateur Web ou en mode En direct. Ce problme survient lorsque la page tente d'afficher des donnes partir d'un jeu d'enregistrements vide. Pour le rsoudre, appliquez le comportement de serveur Afficher la rgion au contenu dynamique afficher sur la page, de la manire suivante : 1. Slectionnez le contenu dynamique de la page. 2. Dans le panneau Comportements de serveur, cliquez sur le bouton Plus (+) et choisissez Afficher la rgion > Afficher la rgion si le jeu d'enregistrements n'est pas vide. 3. Slectionnez le jeu d'enregistrements dans lequel se trouve le contenu dynamique et cliquez sur OK. 4. Rptez les tapes 1 3 pour chaque lment de contenu dynamique sur la page.
Rsolution des messages d'erreur MySQL
Haut de la page
Le message d'erreur courant suivant peut survenir lors d'un test de connexion une base de donnes PHP avec MySQL 4.1 : Client does not support authentication protocol requested. Consider upgrading MySQL client (Ce client ne prend pas en charge le protocole d'authentification demand. Il peut tre ncessaire de mettre niveau le client MySQL). Il peut tre ncessaire de revenir une version prcdente de MySQL ou d'installer PHP 5 et copier certaines bibliothques de liaison dynamique (DLL). Vous trouverez des instructions dtailles dans la rubrique Configuration d'un environnement de dveloppement PHP.
628
Prsentation des applications Web

Prsentation des applications Web Utilisations courantes des applications Web Exemple d'application Web Fonctionnement d'une application Web Traitement des pages Web statiques Traitement des pages dynamiques Accs une base de donnes Cration de pages dynamiques Terminologie du dveloppement d'applications Web
Prsentation des applications Web
Haut de la page
Une application Web est un site Web dont le contenu des pages est partiellement ou entirement indtermin. Le contenu final d'une page est dtermin uniquement lorsque l'utilisateur requiert une page depuis le serveur Web. Le contenu final d'une page variant d'une requte une autre en fonction des actions de l'utilisateur, ce type de page est appel page dynamique. Les applications Web sont construites de manire rpondre diffrents types de dfis et de problmes. Cette section dcrit les utilisations courantes des applications Web et prsente un exemple simple.
Utilisations courantes des applications Web

Les applications Web peuvent tre utilises de diverses faons par les visiteurs d'un site et les dveloppeurs, notamment pour : Permettre aux utilisateurs de trouver rapidement et facilement des informations sur un site Web riche en contenu.
Haut de la page
Ce type d'applications Web permet aux visiteurs du site de rechercher, d'organiser et de parcourir le contenu leur convenance. Les exemples incluent des rseaux intranet d'entreprises, tels Microsoft MSDN (www.msdn.microsoft.com), et Amazon.com (www.amazon.com). Collecter, enregistrer et analyser des donnes fournies par les visiteurs du site. Auparavant, les donnes saisies dans des formulaires HTML taient envoyes sous forme de courriels aux employs ou sous forme d'applications CGI pour le traitement. Une application Web peut enregistrer les donnes d'un formulaire directement dans une base de donnes, ainsi qu'extraire les donnes et crer des rapports Web pour l'analyse. Les exemples incluent des pages de banque en ligne et de contrle des stocks, ainsi que des sondages et des formulaires de commentaires. Mettre jour des sites Web dont le contenu change souvent. Une application Web vite au crateur d'avoir mettre frquemment jour le code HTML du site. Les fournisseurs de contenu, tels que les rdacteurs en chef, alimentent l'application Web et celle-ci met automatiquement le site jour, Il peut s'agir de The Economist (www.economist.com) et de CNN (www.cnn.com).
Exemple d'application Web
Haut de la page
Julie, professionnelle de la cration Web, utilise Dreamweaver depuis de nombreuses annes. Elle est charge de la maintenance des sites intranet et Internet d'une entreprise de taille moyenne comptant 1 000 employs. Christophe, du service des Ressources humaines, lui soumet un jour un problme. Ce service gre un programme de mise en forme qui attribue des points aux employs pour chaque kilomtre parcouru en marchant, en courant ou vlo. Tous les mois, chaque employ doit communiquer Christophe le nombre total de kilomtres parcourus, par courriel. A la fin du mois, Christophe rassemble tous les courriels et rcompense chaque employ avec des prix en espces, en fonction de leur total de points. Le problme est que ce programme de mise en forme a suscit de plus en plus d'enthousiasme. Le nombre de participants est si important que Christophe est submerg de courriels chaque fin de mois. Il demande donc Julie si une solution Web serait envisageable. Julie suggre une application Web base sur un rseau intranet excutant les tches suivantes : permettre aux employs de saisir leur kilomtrage sur une page Web au moyen d'un simple formulaire HTML ; stocker le kilomtrage des employs dans une base de donnes ; calculer les points de mise en forme en fonction du kilomtrage ; permettre aux employs de suivre leurs progrs au fil des mois ;
629
permettre Christophe d'accder au total des points en un seul clic chaque fin de mois. Julie met rapidement en place l'application l'aide de Dreamweaver, logiciel dot des outils ncessaires la cration rapide et facile de ce type d'applications.
Fonctionnement d'une application Web
Haut de la page
Une application Web est un ensemble de pages statiques et dynamiques. Une page statique n'est pas modifie lorsqu'un visiteur la consulte : Le serveur Web transmet la page au navigateur qui la sollicite sans la modifier. A l'inverse, une page Web dynamique est modifie par le serveur avant d'tre transmise au navigateur qui la sollicite. C'est pourquoi cette page est dite dynamique. Vous pouvez par exemple crer une page pour afficher les rsultats du programme de mise en forme et faire en sorte que certaines informations (telles le nom et les rsultats de l'employ) soient dtermines lorsqu'une page est sollicite par un employ donn. Les sections suivantes dcrivent en plus de dtails la faon dont les applications Web fonctionnent.
Traitement des pages Web statiques
Haut de la page
Un site Web statique comprend un jeu de pages et fichiers HTML associs hbergs sur un ordinateur excutant un serveur Web. Un serveur Web est un logiciel qui fournit des pages Web en rponse des requtes de navigateurs Web. Une requte de page est gnre lorsqu'un utilisateur clique sur un lien d'une page Web, choisit un signet dans le navigateur ou saisit une URL dans le champ Adresse du navigateur. Le contenu final d'une page Web statique est dtermin par le crateur de la page et n'est pas modifi lorsqu'un utilisateur la demande. Exemple : <html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p> </body> </html> Chaque ligne du code HTML de la page est rdige par le crateur avant que la page ne soit place sur le serveur. Ce code HTML n'tant pas modifi une fois la page sur le serveur, cette page est dite statique. Remarque : Au sens strict du terme, une page dite statique peut ne pas tre statique du tout. Une image survole ou une animation Flash (un fichier SWF), par exemple, peuvent animer une page statique. Cependant, ce guide qualifie une page de statique si elle est adresse au navigateur sans modifications. Lorsqu'un serveur Web reoit une requte de page statique, il lit la requte, localise la page et la transmet au navigateur qui l'a sollicite, comme le montre l'exemple suivant :
1. Le navigateur Web demande une page statique. 2. Le serveur Web recherche la page. 3. Le serveur Web envoie la page au navigateur requrant. Dans le cas des applications Web, certaines lignes de code ne sont pas dtermines au moment o l'utilisateur sollicite la page. Ces lignes doivent tre dtermines via un mcanisme avant que la page ne soit transmise au navigateur. Ce mcanisme est prsent dans la section suivante.
630
Traitement des pages dynamiques
Haut de la page
Lorsqu'un serveur Web reoit une requte de page Web statique, il transmet directement cette page au navigateur qui la demande. Le serveur Web ragit diffremment lorsqu'il reoit une requte de page dynamique : Il transmet la page un logiciel spcial charg de terminer la page. Ce logiciel spcial est appel un serveur d'application. Le serveur d'application lit le code de la page, termine cette page en fonction des instructions figurant dans le code, puis en retire le code. Il en rsulte une page statique que le serveur d'application renvoie au serveur Web, lequel transmet alors cette page au navigateur demandeur. Le navigateur reoit uniquement du code HTML pur lorsque la page lui est transmise. Voici un aperu du processus :
1. Le navigateur Web demande une page dynamique. 2. Le serveur Web recherche la page et la transmet au serveur d'application. 3. Le serveur d'application analyse la page la recherche d'instructions et la termine. 4. Le serveur d'application transmet la page termine au serveur Web. 5. Le serveur Web envoie la page acheve au navigateur requrant
Accs une base de donnes
Haut de la page
Un serveur d'application vous permet de travailler avec des ressources ct serveur telles que les bases de donnes. Une page dynamique peut, par exemple, ordonner au serveur d'application d'extraire des donnes de la base de donnes et de les insrer dans le code HTML de la page. Pour plus d'informations, consultez le site www.adobe.com/go/learn_dw_dbguide_fr. L'utilisation d'une base de donnes pour stocker un contenu vous permet de sparer l'aspect conceptuel d'un site Web du contenu afficher aux utilisateurs du site. Plutt que de crer des fichiers HTML distincts pour chacune des pages, il vous suffit de crer une page (ou un modle) pour les diffrents types d'informations que vous souhaitez prsenter. Vous pouvez ensuite tlcharger du contenu dans une base de donnes pour qu'ensuite le site Web puisse extraire ce contenu en rponse une demande d'un utilisateur. Vous pouvez galement mettre jour des informations dans une source unique, puis rpercuter cette modification travers le site Web sans avoir modifier chaque page manuellement. Vous pouvez utiliser Adobe Dreamweaver pour crer des formulaires Web permettant d'insrer, de mettre jour ou de supprimer des donnes dans une base de donnes. L'instruction d'extraction des donnes de la base est nomme requte de base de donnes. Une requte est compose de critres de recherche rdigs dans un langage de base de donnes appel SQL (Structured Query Language). La requte SQL est rdige dans les scripts ou les balises de la page ct serveur. Un serveur d'application ne peut pas communiquer directement avec une base de donnes car le format propritaire de cette dernire rend les donnes indchiffrables, de la mme manire qu'un document Microsoft Word ouvert dans Bloc-notes ou BBEdit peut tre indchiffrable. Le serveur d'application peut communiquer avec la base de donnes uniquement via un pilote de base de donnes, logiciel faisant office d'interprte entre le serveur d'application et la base de donnes. Une fois que le pilote a tabli la communication, la requte est excute par rapport la base de donnes et un jeu d'enregistrements est cr. Un jeu d'enregistrements est un ensemble de donnes extraites d'une ou de plusieurs tables de base de donnes. Le jeu d'enregistrements est renvoy au serveur d'application, lequel utilise les donnes pour terminer la page. Voici un exemple simple de requte de base de donnes rdige en SQL : SELECT lastname, firstname, fitpoints
631
FROM employees Cette instruction cre un jeu d'enregistrements trois colonnes et le remplit de lignes comportant le nom, le prnom et les points de mise en forme de tous les employs de la base de donnes. Pour plus d'informations, consultez le site www.adobe.com/go/learn_dw_sqlprimer_fr. L'exemple suivant illustre le processus d'interrogation de la base de donnes via des requtes et de la transmission des donnes au navigateur :
1. Le navigateur Web demande une page dynamique. 2. Le serveur Web recherche la page et la transmet au serveur d'application. 3. Le serveur d'application analyse la page la recherche d'instructions. 4. Le serveur d'application envoie une requte au pilote de la base de donnes. 5. Le pilote excute la requte au niveau de la base de donnes. 6. Le jeu d'enregistrements est renvoy au pilote. 7. Le pilote transmet le jeu d'enregistrements au serveur d'application. 8. Le serveur d'application insre les donnes dans la page, puis transmet la page au serveur Web. 9. Le serveur Web envoie la page acheve au navigateur requrant. Vous pouvez utiliser pratiquement toutes les bases de donnes avec votre application Web, condition que les pilotes de base de donnes appropris soient installs sur le serveur. Si vous prvoyez de crer de petites applications peu onreuses, vous pouvez utiliser une base de donnes base sur fichier, cre par exemple sous Microsoft Access. Si vous prvoyez de crer des applications stratgiques robustes, vous pouvez utiliser une base de donnes serveur, cre par exemple avec Microsoft SQL Server, Oracle 9i ou MySQL. Si votre base de donnes rside sur un systme autre que votre serveur Web, assurez-vous qu'il existe une connexion rapide entre les deux systmes pour un fonctionnement efficace et rapide de votre application Web.
Cration de pages dynamiques
Haut de la page
La cration d'une page dynamique consiste crire d'abord le code HTML, puis ajouter les scripts ou les balises ct serveur au code HTML pour rendre la page dynamique. Lorsque vous visualisez le code obtenu, le langage apparat incorpor dans le code HTML de la page. Par consquent, ces langages sont appels langages de programmation HTML intgrs. L'exemple lmentaire ci-dessous utilise le langage CFML (ColdFusion Markup Language) : <html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p>  <cfset department="Sales"> <cfoutput> <p>Be sure to visit our #department# page.</p> </cfoutput>  </body> </html> Les instructions incorpores dans cette page excutent les actions suivantes :
632
1. Cration d'une variable appele department et affectation de la chane "Service commercial" cette variable. 2. Insertion de la valeur de la variable, "Service commercial", dans le code HTML. Le serveur d'application renvoie la page suivante au serveur Web : <html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p> <p>Be sure to visit our Sales page.</p> </body> </html> Le serveur Web transmet la page au navigateur requrant, lequel l'affiche de la manire suivante : A propos de Trio Motors Trio Motors est leader dans le domaine de la construction automobile. Nous vous invitons visiter la page de notre Service commercial. Choisissez un langage de script ou de balise en fonction de la technologie de votre serveur. Les langages les plus employs pour les technologies de serveur prises en charge par Dreamweaver sont : Technologie de serveur ColdFusion Pages ASP (Active Server Pages) Langage CFML (ColdFusion Markup Language) VBScript JavaScript PHP PHP
Dreamweaver peut crer les scripts ou les balises ct serveur ncessaires au bon fonctionnement de vos pages. Vous pouvez galement les rdiger manuellement dans l'environnement de codage de Dreamweaver.
Terminologie du dveloppement d'applications Web

Cette section regroupe la dfinition des termes relatifs aux applications Web frquemment utiliss.
Haut de la page
Un serveur d'application est un logiciel qui aide un serveur Web traiter des pages Web contenant des scripts ou des balises ct serveur. Lorsqu'une page de ce type est requise par le serveur, le serveur Web transmet cette page au serveur d'application afin qu'il la traite avant de l'envoyer au navigateur. Pour plus d'informations, voir la section Fonctionnement d'une application Web. Les serveurs d'applications les plus courants sont ColdFusion et PHP. Une base de donnes est un ensemble de donnes stockes sous forme de tables. Chaque ligne d'une table correspond un enregistrement et chaque colonne correspond un champ de l'enregistrement, tel qu'illustr dans l'exemple ci-dessous.
Un pilote de base de donnes est un logiciel qui agit comme un interprte entre une application Web et une base de donnes. Les donnes d'une base de donnes sont stockes dans un format propritaire. Un pilote de base de donnes permet l'application Web de lire et de manipuler des donnes qui, sans cela, seraient indchiffrables. Un systme de gestion de bases de donnes (SGBD ou systme de base de donnes) est un logiciel utilis pour crer et manipuler des bases de donnes. Les systmes de base de donnes les plus courants sont Microsoft Access, Oracle 9i et MySQL. Une requte de base de donnes dsigne l'opration permettant d'extraire un jeu d'enregistrements d'une base de donnes. Une requte est constitue de critres de recherche exprims en langage de base de donnes appel SQL. La requte peut, par exemple, spcifier que seules certaines colonnes ou certains enregistrements doivent tre inclus dans le jeu d'enregistrements.
633
Une page dynamique est une page Web qui est personnalise par un serveur d'application avant d'tre transmise un navigateur. Un jeu d'enregistrements est un ensemble de donnes extraites d'une ou plusieurs tables de base de donnes, comme l'illustre l'exemple suivant :
Une base de donnes relationnelle est une base de donnes contenant plusieurs tables qui partagent des donnes. La base de donnes suivante est relationnelle car deux tables partagent la colonne DepartmentID.
Une technologie de serveur est une technologie utilise par un serveur d'application pour modifier des pages dynamiques lors de l'excution. L'environnement de dveloppement de Dreamweaver prend en charge les technologies de serveur suivantes : Adobe ColdFusion Pages ASP (Active Server Pages) de Microsoft PHP: Hypertext Preprocessor (PHP) Vous pouvez galement utiliser l'environnement de codage de Dreamweaver pour dvelopper des pages destines toute autre technologie de serveur non rpertorie ci-dessus. Une page statique est une page Web qui n'est pas modifie par un serveur d'application avant d'tre transmise un navigateur. Pour plus d'informations, consultez la section Traitement des pages Web statiques. Une application Web est un site Web dont le contenu des pages est partiellement ou entirement indtermin. Le contenu final de ces pages est dtermin uniquement lorsque l'utilisateur requiert une page depuis le serveur Web. Le contenu final d'une page variant d'une requte une autre en fonction des actions de l'utilisateur, ce type de page est appel page dynamique. Un serveur Web est un logiciel qui renvoie des pages Web en rponse aux requtes de navigateurs Web. Une requte de page est gnre lorsqu'un utilisateur clique sur un lien d'une page Web dans le navigateur, choisit un signet dans le navigateur ou saisit une URL dans le champ Adresse du navigateur. Les serveurs Web les plus courants sont IIS (Microsoft Internet Information Server) et Apache HTTP Server. Voir aussi Guide du dbutant en base de donnes
634
Utilisation de composants ColdFusion

A propos des composants ColdFusion Prsentation du panneau Composants (ColdFusion) Cration ou suppression d'un CFC dans Dreamweaver Affichage de CFC dans Dreamweaver Modification de CFC dans Dreamweaver Cration de pages Web qui emploient des CFC Dfinition d'un jeu d'enregistrements dans un CFC Utilisation d'un jeu d'enregistrements dans un CFC comme source de contenu dynamique Dfinition de contenu dynamique l'aide d'un CFC
A propos des composants ColdFusion
Haut de la page
Les fichiers de composants ColdFusion (CFC) permettent d'encapsuler la logique d'application et d'entreprise au sein d'units autonomes rutilisables. Ils permettent galement de crer rapidement des services Web. Un composant ColdFusion est une unit logicielle rutilisable crite en CFML (ColdFusion markup language), qui facilite la rutilisation et la maintenance du code. Vous pouvez utiliser Dreamweaver pour travailler avec des CFC. Pour plus d'informations sur les balises et la syntaxe des CFC, consultez la documentation de ColdFusion dans Dreamweaver (Aide > Utilisation de ColdFusion). Remarque : Les CFC ne peuvent tre utiliss qu'avec ColdFusion MX ou une version ultrieure. Les CFC ne sont pas pris en charge par la version 5 de ColdFusion. Les CFC sont conus pour offrir aux dveloppeurs une mthode d'encapsulage des lments de leurs sites Web, qui soit la fois simple et puissante. Ces composants s'utilisent gnralement pour la logique d'application ou d'entreprise. Utilisez des balises personnalises pour introduire des lments de prsentation tels que des messages personnaliss ou des menus dynamiques. L'ajout de parties interchangeables peut rendre les sites dynamiques plus efficaces, comme c'est le cas pour bon nombre d'autres types de structures. Il peut arriver, par exemple, qu'un site dynamique doive excuter la mme requte maintes reprises ou recalculer le prix total d'un panier d'achats chaque fois qu'un article est ajout. Les composants peuvent se charger de ces tches. Vous pouvez rparer, amliorer, dvelopper, voire remplacer un composant sans que cela ait un grand impact sur le reste de l'application. Prenons l'exemple d'un magasin en ligne qui calcule les frais de port en fonction du total de la commande passe. Pour les commandes infrieures 20 , les frais de port sont de 4 ; pour les commandes comprises entre 20 et 40 , ils sont de 6 , etc. Vous pourriez insrer la logique de calcul des frais de port sur la page du panier d'achats et sur la page de rglement. Vous seriez alors amen mlanger du code de prsentation HTML et du code de logique CFML. Avec cette mthode, il est cependant souvent difficile de rutiliser et de grer le code. Il vaut donc mieux crer un CFC appel Pricing, incluant entre autres une fonction appele ShippingCharge. La fonction accepte un argument reprsentant 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 rglement, il vous reste insrer une balise spciale appelant la fonction ShippingCharge. Lorsque la page est demande, la fonction est appele et les frais de port sont renvoys la page. Supposons que le magasin fasse ultrieurement une offre promotionnelle : livraison gratuite pour toute commande d'un montant suprieur 100 . Il vous suffit alors de modifier les frais de port un seul endroit, savoir la fonction ShippingCharge du composant Pricing, pour que les frais de port soient mis jour sur toutes les pages utilisant la fonction.
Prsentation du panneau Composants (ColdFusion)
Haut de la page
Le panneau Composants (Fentre > Composants) permet d'afficher et de modifier les composants ColdFusion, ainsi que d'crire dans la page un code qui appelle la fonction lorsque la page CFM est demande. Remarque : Le panneau Composants est uniquement disponible lors de l'affichage d'une page ColdFusion dans Dreamweaver.
Haut de la page
Cration ou suppression d'un CFC dans Dreamweaver
Vous pouvez utiliser Dreamweaver pour dfinir visuellement un CFC et ses fonctions. Dreamweaver cre un fichier .cfc et insre automatiquement les balises CFML ncessaires. Remarque : Selon le composant, il vous faudra peut-tre complter le code manuellement. 1. Ouvrez une page ColdFusion dans Dreamweaver. 2. Dans le panneau Composants (Fentre > Composants), choisissez Composants CF dans le menu droulant.
635
3. Cliquez sur le bouton plus (+), compltez la bote de dialogue Crer un composant, puis cliquez sur OK. a. Dans la section Composants, saisissez les dtails du composant. Voici une liste partielle : Nom Spcifie le nom de fichier du composant. Ce nom ne peut contenir que des caractres alphanumriques et des caractres de soulignement (_). Il est inutile d'ajouter l'extension de fichier .cfc au nom. Rpertoire des composants Indique l'endroit dans lequel le composant sera enregistr. Slectionnez le dossier racine de l'application Web (\Inetpub\wwwroot\monapp\, par exemple) ou l'un de ses sous-dossiers. b. Pour dfinir une ou plusieurs fonctions pour le composant, choisissez Fonctions dans la liste Section, cliquez sur le bouton Plus (+), puis saisissez les dtails de la nouvelle fonction. Veillez bien dfinir le type de valeur renvoye par la fonction dans l'option Type de renvoi. Si vous choisissez l'option distant dans le menu Accs, la fonction peut dsormais servir de service Web. c. Pour dfinir un ou plusieurs arguments pour une fonction, choisissez Arguments dans la liste Section, slectionnez la fonction dans le menu droulant, cliquez sur le bouton Plus (+), puis saisissez les dtails du nouvel argument sur la droite. 4. Si vous utilisez un serveur de dveloppement distant, tlchargez vers le serveur distant le fichier CFC et tous les fichiers indpendants (tels que ceux utiliss pour mettre en uvre une fonction ou inclure des fichiers). Le tlchargement des fichiers vers le serveur garantit que les fonctionnalits de Dreamweaver, telles que le mode Live et Aperu dans le navigateur, fonctionnent correctement. Dreamweaver crit un fichier .cfc et l'enregistre dans le dossier spcifi. Le nouveau composant s'affiche galement dans le panneau Composants (il vous suffit de cliquer sur Actualiser). 5. Pour supprimer un composant, vous devez supprimer manuellement le fichier CFC du serveur.
Affichage de CFC dans Dreamweaver
Haut de la page
Dreamweaver permet d'examiner visuellement et globalement les composants ColdFusion (CFC) situs dans le dossier de votre site ou sur le serveur. Dreamweaver lit les fichiers CFC et affiche les informations qui les concernent dans une arborescence qu'il est facile de parcourir dans le panneau Composants. Dreamweaver recherche les composants sur votre serveur d'valuation (consultez la section Connexion la base de donnes dans Dreamweaver). Si vous crez des CFC ou modifiez des CFC existants, veillez les transfrer sur le serveur d'valuation afin qu'ils apparaissent dans le panneau Composants. Pour afficher les composants situs sur un autre serveur, modifiez les paramtres du serveur d'valuation. Vous pouvez consulter les informations suivantes relatives aux composants CF : dresser la liste de tous les composants ColdFusion dfinis pour le site ; (si vous excutez ColdFusion MX 7 ou version ultrieure) filtrer la liste pour afficher uniquement les CFC situs dans le dossier de votre site ; tudier les fonctions et arguments de chaque composant ; examiner les proprits des fonctions qui servent de services Web. Si vous voulez utiliser Dreamweaver pour inspecter les CFC rsidant dans la racine du serveur tout en grant les fichiers du site dans une racine de site Web diffrente, vous pouvez dfinir deux sites Dreamweaver. Configurez le premier site de faon ce qu'il renvoie la racine du serveur et le second pour qu'il renvoie la racine du site Web. Utilisez le menu Site du panneau Fichiers pour passer rapidement d'un site l'autre. Pour afficher les CFC dans Dreamweaver, procdez comme suit : 1. Ouvrez une page ColdFusion dans Dreamweaver. 2. Dans le panneau Composants (Fentre > Composants), choisissez Composants CF dans le menu droulant. 3. Dans le panneau, cliquez sur le bouton Actualiser pour rcuprer les composants. Les composants sont affichs sur le serveur. Les fichiers CFC des composants s'affichent dans des dossiers. Si les composants existants n'apparaissent pas, cliquez sur le bouton Actualiser dans la barre d'outils du panneau. 4. Pour afficher uniquement les CFC situs dans le dossier de votre site, cliquez sur le bouton Afficher uniquement les fichiers CFC du site actuel, dans la barre d'outils du panneau Composants. Remarque : Cette fonctionnalit n'est disponible que si vous avez dfini un ordinateur excutant ColdFusion MX 6 ou une version ultrieure comme serveur d'valuation de Dreamweaver. Remarque : Si le site actuel apparat dans un dossier virtuel sur le serveur distant, le filtrage n'est pas oprationnel. 5. Cliquez sur le bouton Plus (+) en regard du nom du dossier pour afficher les composants qu'il contient. Pour dresser la liste des fonctions d'un composant, cliquez sur le bouton Plus (+) en regard du nom du composant. Pour connatre les arguments qu'une fonction accepte, ainsi que leur type et leur caractre facultatif ou obligatoire, dveloppez la branche de la fonction dans l'arborescence.
636
Aucun bouton Plus (+) ne figure en regard des fonctions sans argument. Pour afficher rapidement les dtails d'un argument, d'une fonction ou d'un composant, slectionnez l'lment dans l'arborescence, puis cliquez sur le bouton Obtenir des dtails dans la barre d'outils du panneau. Vous pouvez galement cliquer sur l'lment avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) et choisir Obtenir des dtails dans le menu droulant qui s'affiche. Les dtails de l'lment sont affichs dans une bote de message.
Modification de CFC dans Dreamweaver
Haut de la page
Dreamweaver permet de modifier de faon rationalise le code des composants ColdFusion dfinis 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 dveloppement doit tre configur comme suit : ColdFusion doit s'excuter localement. Dans l'onglet Avanc de la bote de dialogue Dfinition du site de Dreamweaver, le type d'accs spcifi dans la catgorie du serveur d'valuation doit tre Local/Rseau. Dans l'onglet Avanc de la bote de dialogue Dfinition du site, le chemin d'accs votre dossier racine local doit tre identique au chemin d'accs au dossier du serveur d'valuation (par exemple, c:\Inetpub\wwwroot\cf_projects\myNewApp\). Pour consulter et modifier ces chemins d'accs, choisissez Site > Modifier les sites. Le composant doit tre stock dans le dossier local du site ou dans l'un de ses sous-dossiers sur votre disque dur. Ouvrez une page ColdFusion dans Dreamweaver et affichez les composants dans le panneau Composants. Pour afficher les composants, ouvrez le panneau Composants (Fentre > Composants), choisissez Composants CF dans le menu droulant du panneau, puis cliquez sur le bouton Actualiser dans le panneau. Comme ColdFusion s'excute localement, Dreamweaver affiche les composants figurant sur votre disque dur. Procdez comme suit pour modifier un composant. 1. Ouvrez une page ColdFusion dans Dreamweaver et affichez les composants dans le panneau Composants (Fentre > Composants). 2. Dans le menu droulant du panneau, choisissez Composants CF, puis cliquez sur le bouton Actualiser la liste des composants ColdFusion (CFC). Comme ColdFusion s'excute localement, Dreamweaver affiche les composants figurant sur votre disque dur. Remarque : Pour modifier visuellement le jeu d'enregistrements du CFC, double-cliquez sur son nom dans le panneau Liaisons. 3. Pour modifier un fichier du composant de faon gnrale, ouvrez le dossier dans lequel il rside et double-cliquez sur le nom du composant dans l'arborescence. Le fichier du composant est ouvert en mode Code. 4. Pour modifier une fonction, un argument ou une proprit spcifique, double-cliquez sur l'lment dans l'arborescence. 5. Effectuez les modifications manuellement en mode Code. 6. Enregistrez le fichier (Fichier > Enregistrer). 7. Pour qu'une nouvelle fonction apparaisse dans le panneau Composants, actualisez la vue en cliquant sur le bouton Actualiser dans la barre d'outils du panneau.
Cration de pages Web qui emploient des CFC
Haut de la page
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 demande. Dreamweaver peut vous aider effectuer cette opration. Remarque : Pour connatre d'autres modes d'utilisation des composants, consultez la documentation de ColdFusion dans Dreamweaver (Aide > Utilisation de ColdFusion). 1. Dans Dreamweaver, ouvrez la page ColdFusion qui doit utiliser la fonction de composant. 2. Basculez en mode Code (Affichage > Code). 3. Ouvrez le panneau Composants (Fentre > Composants), puis choisissez Composants CF dans le menu droulant. 4. Recherchez le composant utiliser et insrez-le l'aide de l'une des mthodes suivantes : A partir de l'arborescence, faites glisser une fonction sur la page. Du code permettant d'appeler la fonction est insr dans la page. Slectionnez la fonction dans le panneau et cliquez sur le bouton Insrer de la barre d'outils du panneau (deuxime bouton partir de la droite). Dreamweaver insre le code dans la page au niveau du point d'insertion. 5. Si vous insrez une fonction possdant des arguments, compltez manuellement le code des arguments. Pour plus d'informations, consultez la documentation de ColdFusion dans Dreamweaver (Aide > Utilisation de ColdFusion).
637
6. Enregistrez la page (Fichier > Enregistrer).
Dfinition d'un jeu d'enregistrements dans un CFC
Haut de la page
Dreamweaver permet de dfinir un jeu d'enregistrements (requte ColdFusion) dans un composant ColdFusion (CFC). En dfinissant un jeu d'enregistrements dans un CFC, il n'est plus ncessaire de le dfinir dans chaque page qui l'utilise. Le jeu d'enregistrements est dfini une fois pour toutes dans le CFC, qui est utilis dans les diffrentes pages. Remarque : Cette fonctionnalit n'est disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou version ultrieure. Pour plus d'informations, consultez la section Activation des amliorations ColdFusion. 1. Crez ou ouvrez un fichier CFC dans Dreamweaver. 2. Dans le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+) et slectionnez Jeu d'enregistrements (Requte) dans le menu droulant. La bote de dialogue Jeu d'enregistrements s'affiche. Vous pouvez choisir de travailler dans la bote de dialogue simple ou avance. 3. Pour utiliser une fonction existante du CFC, slectionnez cette fonction dans la liste droulante Fonction, puis passez l'tape 5. Le jeu d'enregistrements sera dfini dans cette fonction. 4. Pour dfinir une nouvelle fonction dans le CFC, cliquez sur le bouton Nouvelle fonction, saisissez le nom de la fonction dans la bote de dialogue qui apparat alors, et cliquez sur OK. Ce nom ne peut contenir que des caractres alphanumriques et des caractres de soulignement (_). 5. Pour dfinir un jeu d'enregistrements pour la fonction, dfinissez les options de la bote de dialogue Jeu d'enregistrements. La nouvelle fonction est insre dans le CFC qui dfinit le jeu d'enregistrements.
Utilisation d'un jeu d'enregistrements dans un CFC comme source de contenu dynamique
Haut de la page
Il est possible d'utiliser un composant ColdFusion (CFC) comme source de contenu dynamique des pages, si ce composant contient une fonction dfinissant un jeu d'enregistrements. Remarque : Cette fonctionnalit n'est disponible que si vous pouvez accder un ordinateur excutant ColdFusion MX 7 ou version ultrieure. Pour plus d'informations, consultez la section Activation des amliorations ColdFusion. 1. Ouvrez une page ColdFusion dans Dreamweaver. 2. Dans le panneau Liaisons (Fentre > Liaisons), cliquez sur le bouton Plus (+) et slectionnez Jeu d'enregistrements (Requte) dans le menu droulant. La bote de dialogue Jeu d'enregistrements s'affiche. Vous pouvez choisir de travailler dans la bote de dialogue simple ou avance. 3. Cliquez sur le bouton Requte CFC. 4. Remplissez la bote de dialogue Requte CFC, cliquez sur OK, puis cliquez nouveau sur OK pour ajouter le jeu d'enregistrements CFC la liste des sources de contenu disponibles dans le panneau Liaisons. 5. Utilisez le panneau Liaisons pour lier le jeu d'enregistrements aux divers lments de la page. Pour plus d'informations, consultez la section Ajout de contenu dynamique dans les pages.
Dfinition de contenu dynamique l'aide d'un CFC
Haut de la page
Vous pouvez dfinir un jeu d'enregistrements comme source de contenu dynamique dans Dreamweaver en utilisant un CFC qui contient une dfinition de jeu d'enregistrements. 1. Dans la zone Nom, saisissez le nom du jeu d'enregistrements CFC. Il est d'usage d'ajouter le prfixe rs aux noms des jeux d'enregistrements, afin de les distinguer des autres noms d'objet dans le code, par exemple : rsPressRelease Le nom d'un jeu d'enregistrements ne peut contenir que des caractres alphanumriques et des caractres de soulignement (_). Ils ne doivent pas comporter d'espaces ni de caractres spciaux. 2. Slectionnez un dossier parmi ceux qui sont dfinis sur le serveur. Si le dossier n'apparat pas dans le menu droulant, actualisez la liste en cliquant sur le bouton Actualiser ct du menu. Auparavant, vrifiez que vous avez bien transfr vos CFC sur le serveur d'valuation. Seuls les fichiers CFC sur le serveur d'valuation sont affichs. 3. Slectionnez un composant parmi ceux qui sont dfinis dans le dossier slectionn. Si le menu droulant des composant ne contient aucun composant, or u si aucun des composants que vous avez crs prcdemment n'apparat, transfrez vos fichiers CFC sur le serveur d'valuation.
638
4. (Facultatif) Pour crer un nouveau composant, cliquez sur le bouton Crer un nouveau composant. a. Dans la zone Nom, saisissez le nom du nouveau CFC. Ce nom ne peut contenir que des caractres alphanumriques et des caractres de soulignement (_). b. Dans la zone Rpertoire des composants, saisissez l'emplacement du CFC, ou recherchez le dossier correspondant. Remarque : Ce dossier doit tre le chemin relatif au dossier racine du site. 5. Dans le menu droulant Fonction, slectionnez la fonction contenant la dfinition du jeu d'enregistrements. Le menu droulant Fonction ne contient que les fonctions dfinies dans le composant slectionn. Si aucune fonction n'apparat dans le menu droulant, ou si vos derniers changements n'apparaissent pas dans les fonctions affiches, vrifiez que les derniers changements ont bien t enregistrs et transfrs sur le serveur. Remarque : Les zones Connexion et SQL sont toutes les deux en lecture seule. 6. Cliquez sur le bouton Modifier pour modifier chaque paramtre (type, valeur, valeur par dfaut) qui doit tre pass en argument la fonction. a. Saisissez une valeur pour le paramtre actuel en slectionnant le type de valeur dans le menu droulant Valeur et en saisissant la valeur voulue dans la zone situe sa droite. Le type de valeur peut tre un paramtre d'URL, une variable de formulaire, un cookie, une variable de session, une variable d'application ou une valeur fixe que vous saisissez. b. Dans la zone Valeur par dfaut, saisissez la valeur par dfaut que vous souhaitez attribuer au paramtre. Si aucune valeur n'est renvoye l'excution, la valeur par dfaut est utilise. c. Cliquez sur OK. Il est impossible de modifier la connexion de base de donnes et la requte SQL du jeu d'enregistrements. Ces champs sont toujours dsactivs, et ces donnes ne sont affiches ici qu' titre d'information. 7. Cliquez sur Tester pour vous connecter la base de donnes et crer une instance du jeu d'enregistrements. Si l'instruction SQL contient des paramtres de page, vrifiez que la colonne Valeur par dfaut de la zone Paramtres contient des valeurs test correctes avant de cliquer sur Tester. Si la requte a t correctement excute, le jeu d'enregistrements est affich dans un tableau. Chaque ligne contient un enregistrement et chaque colonne un champ de cet enregistrement. Cliquez sur OK pour effacer la requte. 8. Cliquez sur OK. Voir aussi Configuration d'un serveur d'valuation
639
Inter-produits
Cration et modification d'un site Web Business Catalyst l'aide de Dreamweaver CS6 Adobe TV (19 juillet 2012) didacticiel vido Explique les fonctionnalits intgres Business Catalyst CS6 et l'utilisation de modles de module partir de cette interface, et prsente quelques nouvelles fonctionnalits comme le code semi-automatique et les fichiers associs.
640
Intgration entre Dreamweaver et Business Catalyst

Didacticiel vido Cration d'un site Business Catalyst temporaire Importation d'un site Business Catalyst Gestion des fichiers Insertion de modules, de donnes ou de fragments Modification des proprits d'objets Business Catalyst Business Catalyst est une application hberge destine la cration et la gestion d'activits commerciales en ligne. Cette plate-forme unifie et sans codage dorsal vous permet de crer ce que vous souhaitez, de sites Web d'impressionnantes boutiques en ligne. L'intgration de Dreamweaver Business Catalyst vous permet de crer et de mettre jour un site Business Catalyst dans Dreamweaver. Lorsque vous avez cr un site Business Catalyst, vous pouvez vous connecter au serveur Business Catalyst. Le serveur propose des fichiers et des modles que vous pouvez utiliser pour crer votre site.
Didacticiel vido
En haut
Cration d'un site Business Catalyst temporaire

1. Choisissez Site > Grer les sites. 2. Cliquez sur Nouveau site Business Catalyst. 3. Connectez-vous l'aide des informations d'identification de votre ID Adobe. 4. Entrez votre date de naissance et cliquez sur Mettre jour. 5. Dans la bote de dialogue Crer un site temporaire, entrez les dtails de votre site, puis cliquez sur Crer un site temporaire gratuit.
En haut
Remarque : Des e-mails relatifs aux dtails de votre compte Business Catalyst vous seront envoys aprs la cration de votre site. Ces emails contiennent des informations au sujet de votre site, comme des informations de mise en route, l'URL du site que vous avez cr et celle du site d'administration.
6. Choisissez un dossier sur votre ordinateur pour le site local. Remarque : Si vous cliquez sur Annuler, le site est cr dans Business Catalyst, mais n'est pas affich dans Dreamweaver. Il en va de mme si un problme rseau survient lors de la cration d'un site Business Catalyst.
7. Entrez le mot de passe associ votre ID Adobe. 8. Lorsque l'activit lie aux fichiers est termine, cliquez sur Termin. 9. Choisissez Fentre > Fichier. La vue locale du site que vous avez cr s'affiche. 10. Choisissez Serveur distant dans le menu. 11. Entrez l'ID Adobe associ votre mot de passe. La structure des fichiers sur le serveur distant s'affiche.
Importation d'un site Business Catalyst
En haut
Pour plus d'informations sur la migration de sites que vous avez crs auparavant l'aide de l'extension Business Catalyst, voir Migration de sites Business Catalyst vers Dreamweaver CS6. 1. Choisissez Site > Grer les sites.
641
2. Cliquez sur Importer un site Business Catalyst. La liste des sites Business Catalyst que vous avez crs avec l'ID Adobe s'affiche. 3. Slectionnez le site, puis cliquez sur Importer le site. 4. Pour le site que vous tentez d'importer, indiquez un emplacement sur votre ordinateur. 5. Entrez le mot de passe li votre ID Adobe. 6. Lorsque l'activit lie aux fichiers est termine, cliquez sur Termin.
Gestion des fichiers
En haut
Business Catalyst tant aussi un service d'hbergement Web, vous pouvez utiliser Dreamweaver pour grer les fichiers locaux et distants du site. Pour plus d'informations, consultez les rubriques suivantes : Gestion des fichiers et des dossiers Acquisition et placement de fichiers depuis ou vers votre serveur Archivage et extraction de fichiers
Insertion de modules, de donnes ou de fragments

1. Choisissez Fentre > Business Catalyst pour ouvrir le panneau Business Catalyst. 2. Effectuez l'une des oprations suivantes : Pour insrer un module Business Catalyst, cliquez sur l'onglet Modules.
En haut
Pour insrer des balises, cliquez sur l'onglet Donnes. Les balises s'affichent si vous modifiez des fichiers qui prennent en charge les balises, comme la page affiliate.html du dossier Layouts/Affiliates. 3. Dveloppez le module, puis cliquez sur le module que vous voulez ajouter au fichier. 4. Entrez les informations requises, puis cliquez sur Insrer. 5. Si votre site actuel utilise le nouveau moteur de rendu, l'onglet Fragments est affich. Les options de l'onglet Fragments vous permettent d'ajouter des fragments de code, comme des rgions rptes et conditionnelles, des sections de commentaires et des inclusions (fonctionnement similaire aux inclusions ct serveur). 6. Cliquez sur En direct pour afficher un aperu de la page tel qu'elle se prsenterait dans un navigateur Web.
Modification des proprits d'objets Business Catalyst
En haut
Tout comme lors de la modification d'autres objets sur une page Web, vous pouvez utiliser l'inspecteur Proprits pour modifier les proprits des objets dans des modules Business Catalyst. Si vous ne voyez pas les options de modification des proprits, vrifiez si vous tes autoris modifier le fichier. En outre, pour certains modules, vous ne pouvez modifier la page que sur le site Web d'administration en ligne.
642
Utilisation de Photoshop et Dreamweaver

A propos de l'intgration de Photoshop A propos des Objets dynamiques et des flux d'activits entre Photoshop et Dreamweaver Cration d'un objet dynamique Mise jour d'un objet dynamique Mise jour de plusieurs objets dynamiques Redimensionnement d'un objet dynamique Modification du fichier Photoshop d'origine d'un objet dynamique Etats des objets dynamiques Copie et collage d'une slection depuis Photoshop Modification d'images colles Dfinition des options de la bote de dialogue Optimisation de l'image
A propos de l'intgration de Photoshop
En haut
Vous pouvez insrer des fichiers d'image Photoshop (en format PSD) dans des pages Web de Dreamweaver, puis les faire optimiser par Dreamweaver sous la forme d'images Web (en formats GIF, JPEG et PNG). Dans ce cas, Dreamweaver insre l'image en tant qu'objet dynamique et conserve une connexion en direct avec le fichier PSD d'origine. Vous pouvez galement coller une image Photoshop calques multiples ou tranches multiples, en tout ou en partie, dans une page Web de Dreamweaver. Toutefois, lorsque vous effectuez un copier-coller partir de Photoshop, aucune connexion en direct avec le fichier d'origine n'est conserve. Pour mettre jour l'image, apportez les modifications dans Photoshop, puis utilisez de nouveau la fonction copier-coller. Remarque : Si vous employez souvent cette fonctionnalit d'intgration, il peut tre utile de stocker les fichiers Photoshop sur votre site Dreamweaver, de manire y accder plus aisment. Dans ce cas, veillez les voiler, de faon viter toute publication des actifs d'origine et tout transfert superflu entre le site local et le serveur distant. Vous trouverez un didacticiel sur l'utilisation d'objets dynamiques dans Photoshop et Dreamweaver l'adresse suivante : www.adobe.com/go/lrvid4043_dw_fr.
A propos des objets dynamiques et des flux de production entre Photoshop et Dreamweaver
En haut
Il existe deux principaux flux de production pour traiter les fichiers Photoshop dans Dreamweaver : le flux de production copier/coller et celui des objets dynamiques. Flux de production copier/coller Le flux de production copier/coller vous permet de slectionner des tranches ou des calques dans un fichier Photoshop, puis de passer dans Dreamweaver pour en faire des images compatibles avec une utilisation sur le Web. Toutefois, si vous voulez mettre jour le contenu ultrieurement, vous devez ouvrir le fichier Photoshop d'origine, effectuer vos modifications, copier de nouveau votre tranche ou votre calque dans le Presse-papiers, puis coller la tranche ou le calque mis jour dans Dreamweaver. Ce flux de production est recommand uniquement lorsque vous voulez insrer une partie d'un fichier Photoshop (par exemple, une section d'une composition) en tant qu'image sur une page Web. Flux de production d'objets dynamiques Lorsque vous travaillez sur des fichiers Photoshop entiers, Adobe recommande l'utilisation de ce flux de production. Dans Dreamweaver, un objet dynamique dsigne une image place sur une page Web avec une connexion en ligne vers un fichier Photoshop (PSD) d'origine. En mode Cration dans Dreamweaver, un objet dynamique est signal par une icne situe dans le coin suprieur gauche de l'image.
643
Objet dynamique Lorsque l'image Web (c'est--dire l'image de la page Dreamweaver) n'est pas synchronise avec le fichier Photoshop d'origine, Dreamweaver dtecte que le fichier d'origine a t mis jour et affiche l'une des flches de l'icne d'objet dynamique en rouge. Lorsque vous slectionnez l'image Web en mode Cration et que vous cliquez sur le bouton Mettre jour depuis l'original dans l'inspecteur Proprits, l'image se met jour automatiquement avec tous les changements effectus dans le fichier Photoshop d'origine. Lorsque vous utilisez le flux de production d'objets dynamiques, vous n'avez pas besoin d'ouvrir Photoshop pour mettre jour une image Web. En outre, toute mise jour d'objet dynamique dans Dreamweaver est non destructive. Cela signifie que vous pouvez modifier la version Web de l'image sur votre page tout en prservant l'intgrit de l'image Photoshop d'origine. Vous pouvez galement mettre jour un objet dynamique sans slectionner l'image Web en mode Cration. Le panneau des actifs vous permet de mettre jour tous les objets dynamiques, y compris les images susceptibles de ne pas pouvoir tre slectionnes dans la fentre de document (par exemple, les images d'arrire-plan CSS). Paramtres d'optimisation d'image Pour les flux de production copier/coller et d'objets dynamiques, vous pouvez spcifier des paramtres d'optimisation dans la bote de dialogue Optimisation de l'image. Cette bote de dialogue vous permet de spcifier le format de fichier et la qualit de l'image. Si vous copiez une tranche ou un calque ou que vous insrez un fichier Photoshop en tant qu'objet dynamique pour la premire fois, Dreamweaver affiche cette bote de dialogue pour vous aider crer l'image Web. Si vous copiez une mise jour dans une tranche ou un calque, Dreamweaver se souvient des paramtres d'origine et recre l'image Web avec ces paramtres. De mme, lorsque vous mettez jour un objet dynamique l'aide de l'inspecteur Proprits, Dreamweaver reprend les paramtres que vous avez utiliss lorsque vous avez insr l'image pour la premire fois. Vous pouvez tout moment modifier les paramtres d'une image : il vous suffit de slectionner l'image Web en mode Cration, puis de cliquer sur le bouton Modifier les paramtres de l'image dans l'inspecteur Proprits. Stockage des fichiers Photoshop Si vous avez insr une image Web et que vous n'avez pas enregistr le fichier Photoshop d'origine sur votre site Dreamweaver, Dreamweaver reconnat le chemin vers le fichier d'origine comme chemin de fichier local absolu (c'est le cas pour les flux de production copier/coller et d'objets dynamiques). Par exemple, si le chemin vers votre site Dreamweaver est C:\Sites\monSite et que votre fichier Photoshop se trouve sous C:\Images\Photoshop, Dreamweaver ne reconnat pas le fichier d'origine comme faisant partie du site intitul monSite. Cela pose des problmes si vous voulez partager ce fichier Photoshop avec d'autres personnes, car Dreamweaver considre uniquement le fichier comme disponible sur un disque dur local spcifique. Toutefois, si vous stockez le fichier Photoshop sur votre site, Dreamweaver tablit un chemin li au site vers le fichier. Les utilisateurs ayant accs au site pourront galement tablir le bon chemin vers le fichier, sous rserve que vous leur ayez aussi fourni le fichier d'origine tlcharger. Vous trouverez un didacticiel vido sur l'utilisation d'objets dynamiques dans Photoshop et Dreamweaver l'adresse suivante : www.adobe.com/go/lrvid4043_dw_fr.
Cration d'un objet dynamique
En haut
Lorsque vous insrez une image Photoshop (fichier PSD) dans votre page, Dreamweaver cre un objet dynamique. Un objet dynamique est une image Web qui conserve une connexion en direct avec l'image Photoshop d'origine. Lorsque vous mettez jour l'image d'origine dans Photoshop, Dreamweaver vous permet de mettre jour l'image dans Dreamweaver par simple clic sur un bouton. 1. Dans Dreamweaver (mode Cration ou Code), placez le point d'insertion sur la page, l'endroit o vous voulez insrer l'image. 2. Choisissez Insertion > Image. Vous pouvez galement tirer le fichier PSD sur la page, partir du panneau Fichiers, si vous stockez vos fichiers Photoshop sur votre site Web. Dans ce cas, vous passerez l'tape suivante.
644
3. Dans la bote de dialogue Slectionner la source de l'image, recherchez votre fichier d'image PSD Photoshop en cliquant sur le bouton Parcourir et en accdant ce fichier. 4. Dans la bote de dialogue Optimisation de l'image qui s'affiche, ajustez les paramtres d'optimisation requis puis cliquez sur OK. 5. Enregistrez le fichier d'image Web un emplacement du dossier racine de votre site Web. Dreamweaver cre l'objet dynamique sur la base des rglages d'optimisation slectionns, puis place une version Web de l'image sur votre page. L'objet dynamique conserve une connexion en direct l'image d'origine et vous signale quand les deux versions ne sont plus synchronises. Remarque : Si vous dcidez, par la suite, de modifier les rglages d'optimisation d'une image place sur vos pages, vous pouvez slectionner cette image, cliquer sur le bouton Modifier les paramtres de l'image dans l'inspecteur Proprits, puis apporter les modifications dsires dans la bote de dialogue Optimisation de l'image. Les modifications apportes dans la bote de dialogue Optimisation de l'image sont appliques de faon non destructrice. Dreamweaver ne modifie jamais le fichier Photoshop d'origine et recre toujours l'image Web sur la base des donnes d'origine. Vous trouverez un didacticiel sur l'utilisation d'objets dynamiques Photoshop l'adresse suivante : www.adobe.com/go/lrvid4043_dw_fr.
Mise jour d'un objet dynamique
En haut
Si vous modifiez le fichier Photoshop auquel votre objet dynamique est li, Dreamweaver vous informe que l'image Web n'est plus synchronise avec l'original. Dans Dreamweaver, les objets dynamiques sont indiqus par la prsence d'une icne dans le coin suprieur gauche de l'image. Lorsque l'image Web dans Dreamweaver est synchronise avec le fichier Photoshop d'origine, les deux flches de l'icne sont vertes. Lorsque l'image Web n'est plus synchronise avec le fichier Photoshop d'origine, l'une des flches de l'icne devient rouge. Pour mettre jour un objet dynamique l'aide du contenu actuel du fichier Photoshop d'origine, slectionnez cet objet dans la fentre de document, puis cliquez sur le bouton Mettre jour depuis l'original de l'inspecteur Proprits. Remarque : Il n'est pas ncessaire que Photoshop soit install pour que vous puissiez procder la mise jour partir de Dreamweaver.
Mise jour de plusieurs objets dynamiques
En haut
Vous pouvez mettre jour plusieurs objets dynamiques simultanment l'aide du panneau Actifs. Le panneau Actifs vous permet galement de visualiser les objets dynamiques qu'il peut tre impossible de slectionner dans la fentre de document (par exemple une image d'arrire-plan CSS). 1. Dans le panneau Fichiers, cliquez sur l'onglet Actifs pour visualiser les actifs du site. 2. Assurez-vous que l'affichage Images est bien activ. S'il ne l'est pas, cliquez sur le bouton Images. 3. Slectionnez chaque actif d'image dans le panneau Actifs. Lorsque vous slectionnez un objet dynamique, son icne est visible dans le coin suprieur gauche de l'image. Les images ordinaires ne comportent pas cette icne. 4. Pour chaque objet dynamique mettre jour, cliquez sur le nom de fichier l'aide du bouton droit de la souris, puis choisissez Mettre jour depuis l'original. Vous pouvez galement slectionner plusieurs noms de fichier en cliquant dessus tout en maintenant la touche CTRL enfonce, de manire les mettre jour ensemble. Remarque : Il n'est pas ncessaire que Photoshop soit install pour que vous puissiez procder la mise jour partir de Dreamweaver.
Redimensionnement d'un objet dynamique

Vous pouvez redimensionner un objet dynamique dans la fentre de document comme vous le feriez pour n'importe quelle autre image.
En haut
1. Pour redimensionner l'image, slectionnez l'objet dynamique dans la fentre de document, puis tirez les poignes de redimensionnement. Vous pouvez prserver les proportions de largeur et de hauteur en maintenant la touche MAJ enfonce tout en tirant les poignes. 2. Cliquez sur le bouton Mettre jour depuis l'original de l'inspecteur Proprits. Lorsque vous mettez jour l'objet dynamique, l'image Web est de nouveau rendue, de manire non destructive, sur la base du contenu actuel du fichier d'origine ainsi que des paramtres d'optimisation d'origine.
Modification du fichier Photoshop d'origine d'un objet dynamique
En haut
Lorsque vous avez cr un objet dynamique sur votre page Dreamweaver, vous pouvez modifier le fichier PSD d'origine dans Photoshop. Aprs avoir apport des modifications dans Photoshop, vous pouvez aisment mettre jour l'image Web dans Dreamweaver. Remarque : Veillez dfinir Photoshop comme diteur d'images externe principal. 1. Slectionnez l'objet dynamique dans la fentre de document. 2. Cliquez sur le bouton Modifier dans l'inspecteur Proprits.
645
3. Apportez les modifications requises dans Photoshop puis enregistrez le nouveau fichier PSD. 4. Dans Dreamweaver, slectionnez de nouveau l'objet dynamique puis cliquez sur le bouton Mettre jour depuis l'original. Remarque : Si vous avez modifi la taille de l'image dans Photoshop, vous devez rinitialiser la taille de l'image Web dans Dreamweaver. Dreamweaver met uniquement jour l'objet dynamique sur la base du contenu du fichier Photoshop, et pas de sa taille. Pour synchroniser la taille d'une image Web avec celle du fichier Photoshop d'origine, cliquez dessus l'aide du bouton droit de la souris, puis choisissez Rtablir la taille selon original.
Etat des objets dynamiques

Le tableau suivant numre les diffrents tats des objets dynamiques.
En haut
Etat de l'objet dynamique Images synchronises.
Description L'image Web est synchronise avec le contenu actuel du fichier Photoshop d'origine. Les attributs de largeur et de hauteur dans le code HTML correspondent aux dimensions de l'image Web. Le fichier Photoshop d'origine a t modifi aprs la cration de l'image Web dans Dreamweaver. Les attributs de largeur et de hauteur dans le code HTML sont diffrents des dimensions de l'image Web que Dreamweaver a cre lors de l'insertion. Si les dimensions de l'image Web sont plus petites que les valeurs de largeur et de hauteur HTML slectionnes, l'image peut sembler pixellise. Les valeurs de largeur et de hauteur dans le code HTML sont suprieures aux dimensions du fichier Photoshop d'origine. Il se peut que l'image semble pixellise. Dreamweaver ne trouve pas le fichier Photoshop d'origine spcifi dans la zone Original de l'inspecteur Proprits.
Action conseille Aucun
Actif d'origine modifi.
Utilisez le bouton Mettre jour depuis l'original de l'inspecteur Proprits pour synchroniser les deux images. Utilisez le bouton Mettre jour depuis l'original de l'inspecteur Proprits pour recrer l'image Web partir du fichier Photoshop d'origine. Dreamweaver utilise les valeurs de largeur et de hauteur HTML spcifies pour recrer l'image.
Les dimensions de l'image Web diffrent de la largeur et de la hauteur HTML slectionnes.
Les dimensions de l'actif d'origine sont trop petites pour les valeurs de largeur et de hauteur HTML slectionnes.
Ne crez pas d'image Web dont les dimensions sont suprieures aux dimensions du fichier Photoshop d'origine.
Actif d'origine introuvable.
Corrigez le chemin d'accs au fichier dans la zone Original de l'inspecteur Proprits, ou dplacez le fichier Photoshop l'emplacement spcifi actuellement.
Copie et collage d'une slection partir de Photoshop
En haut
Vous pouvez copier une image Photoshop, ou une partie de celle-ci, et coller la slection dans votre page Dreamweaver sous la forme d'une image Web. Vous pouvez copier un calque ou un groupe de calques pour une partie slectionne de l'image, ou encore copier une tranche de l'image. Toutefois, lorsque vous effectuez cette opration, Dreamweaver ne cre pas d'objet dynamique. Remarque : Bien que la fonctionnalit Mettre jour depuis l'original ne soit pas disponible pour les images colles, vous pouvez ouvrir le fichier Photoshop d'origine et le modifier en slectionnant l'image colle, puis en cliquant sur le bouton Modifier de l'inspecteur Proprits. 1. Dans Photoshop, effectuez l'une des oprations suivantes : Copiez la totalit ou une partie d'un calque. Pour ce faire, employez l'outil Rectangle de slection pour slectionner la partie copier, puis choisissez Edition > Copier. Cette opration ne copie que le calque actif correspondant la zone slectionne dans le pressepapiers. Si vous avez dfini des effets bass sur des calques, ils ne sont pas copis. Copiez et fusionnez plusieurs calques. Pour ce faire, employez l'outil Rectangle de slection pour slectionner la partie copier, puis choisissez Edition > Copier avec fusion. Cette opration aplatit et copie tous les calques actifs et infrieurs de la zone slectionne dans le presse-papiers. Si des effets bass sur des calques sont associs l'un de ces calques, ils sont copis. Copiez une tranche. Pour ce faire, slectionnez la tranche l'aide de l'outil Slection de tranche, puis choisissez Edition > Copier. Cette opration aplatit et copie tous les calques actifs et infrieurs de la tranche dans le presse-papiers. Vous pouvez choisir Slection > Tout afin de slectionner rapidement une image entire en vue de la copier.
646
2. Dans Dreamweaver (mode Cration ou Code), placez le point d'insertion sur la page, l'endroit o vous voulez insrer l'image. 3. Choisissez Edition > Coller. 4. Dans la bote de dialogue Optimisation de l'image, ajustez les paramtres d'optimisation requis puis cliquez sur OK. 5. Enregistrez le fichier d'image Web un emplacement du dossier racine de votre site Web. Dreamweaver dfinit l'image conformment aux paramtres d'optimisation et en place une version Web sur votre page. Les informations relatives l'image, comme l'emplacement du fichier PSD d'origine, sont enregistres dans une Design Note, que vous ayez ou non activ les Design Notes pour votre site. La Design vous permet de revenir au fichier Photoshop d'origine, afin d'y apporter des modifications, partir de Dreamweaver. Vous trouverez un didacticiel sur la copie et le collage entre plusieurs applications, dont Photoshop et Dreamweaver, l'adresse suivante : www.adobe.com/go/vid0193_fr.
Modification d'images colles
En haut
Aprs avoir copi des images de Photoshop dans vos pages Dreamweaver, vous pouvez modifier le fichier PSD d'origine dans Photoshop. Lorsque vous utilisez le flux d'activits copier/coller, Adobe recommande de toujours apporter vos modifications au fichier PSD d'origine (et non l'image Web), puis effectuer un nouveau copier/coller, de faon conserver une source unique. Remarque : Assurez-vous que Photoshop est bien dfini comme l'diteur principal pour le type de fichier modifier. 1. Dans Dreamweaver, slectionnez une image Web cre l'origine dans Photoshop, puis effectuez l'une des actions suivantes : Cliquez sur le bouton Modifier dans l'inspecteur Proprits de l'image. Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) lorsque vous double-cliquez sur le fichier. Cliquez sur l'image avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), choisissez Modifier l'original avec dans le menu contextuel, puis choisissez Photoshop. Remarque : Ce principe suppose que Photoshop soit dfini comme diteur d'image externe principal pour les fichiers d'image PSD. Il peut galement tre utile de dfinir Photoshop comme diteur par dfaut pour les fichiers de type JPEG, GIF et PNG. 2. Modifiez le fichier dans Photoshop. 3. Revenez Dreamweaver et collez l'image ou la slection mise jour dans votre page. A tout moment, si vous voulez optimiser nouveau l'image, vous pouvez la slectionner puis cliquer sur le bouton Modifier les paramtres de l'image.
Dfinition des options de la bote de dialogue Optimisation de l'image
En haut
Lorsque vous crez un objet dynamique ou que vous collez une slection depuis Photoshop, Dreamweaver affiche la bote de dialogue Optimisation de l'image. Cette bote de dialogue s'affiche galement pour tout autre type d'image si vous la slectionnez puis que vous cliquez sur le bouton Modifier les paramtres de l'image de l'inspecteur Proprits. Cette bote de dialogue permet de dfinir les paramtres d'images Web et d'en afficher un aperu, de faon dterminer la combinaison optimale de couleurs, de compression et de qualit. Une image Web est une image qui peut tre affiche par tous les navigateurs Web modernes et qui possde la mme apparence, quel que soit le systme ou le navigateur utilis. En rgle gnrale, ces paramtres permettent de parvenir un compromis entre qualit et taille de fichier. Remarque : Les paramtres que vous slectionnez n'influent que sur la version importe du fichier d'image. Le fichier PSD (Photoshop) ou PNG (Fireworks) d'origine reste toujours inchang. Paramtre prdfini Choisissez le paramtre prdfini qui rpond le mieux vos besoins. La taille de fichier de l'image change en fonction du paramtre prdfini choisi. Un aperu instantan de l'image avec le paramtre appliqu s'affiche en arrire-plan. Par exemple, pour les images qui doivent tre affiches avec un haut degr de clart, choisissez PNG24 pour photos (dtails nets). Slectionnez GIF pour images d'arrire-plan (motifs) si vous insrez un motif qui fait office d'arrire-plan de la page. Lorsque vous slectionnez un paramtre prdfini, ses options configurables sont affiches.Si vous souhaitez personnaliser davantage les paramtres d'optimisation, modifiez les valeurs de ces options.
647
Ajout et modification d'images

A propos des images Insertion d'une image Redimensionnement visuel d'une image Insertion d'un espace rserv pour image Remplacement d'un espace rserv pour image Dfinition des proprits d'un espace rserv pour image Modification d'images dans Dreamweaver Cration d'une image survole Utilisation d'un diteur d'image externe Application de comportements aux images
A propos des images

rpandus ; ils peuvent tre affichs dans la plupart des navigateurs.
En haut
Il existe de nombreux formats de fichiers graphiques, mais les pages Web en utilisent gnralement trois : GIF, JPEG et PNG. Les formats GIF et JPEG sont les plus
GIF (Graphic Interchange Format) Les fichiers GIF utilisent un maximum de 256 couleurs et sont destins l'affichage d'images tons non continus ou d'images comportant de larges zones de couleurs unies, telles que les barres de navigation, les boutons, les icnes, les logos ou d'autres images contenant des tons et des couleurs uniformes. JPEG (Joint Photographic Experts Group) Le format de fichier JPEG est le format suprieur destin aux photographies ou aux images tons continus, car de tels fichiers peuvent contenir des millions de couleurs. Lorsque la qualit d'un fichier JPEG augmente, sa taille et son temps de tlchargement augmentent galement. Il est souvent possible d'obtenir un bon compromis entre la qualit de l'image et sa taille de fichier en compressant un fichier JPEG. PNG (Portable Network Group) Le format de fichier PNG est un format de remplacement non brevet pour les fichiers GIF, qui inclut la prise en charge des images couleurs indexes, en niveaux de gris et en couleurs vraies ainsi que la prise en charge du canal alpha pour la transparence. PNG est le format de fichier natif d'Adobe Fireworks. Les fichiers PNG conservent toutes les informations d'origine sur les calques, les vecteurs, les couleurs et les effets (comme par exemple des ombres portes) et tous ces lments peuvent tre modifis tout moment. Les fichiers doivent avoir l'extension .png pour tre reconnus comme fichiers PNG par Dreamweaver.
En haut
Insertion d'une image
Lorsque vous insrez une image dans un document Dreamweaver, le programme cre une rfrence ce fichier d'image dans le code source HTML. Pour que cette rfrence soit correcte, le fichier d'image doit rsider sur le site. Dans le cas contraire, Dreamweaver vous invite copier le fichier sur le site. Vous pouvez galement insrer des images de faon dynamique. Les images dynamiques sont des images qui changent souvent ; par exemple, les systmes de rotation de bannires publicitaires qui slectionnent les bannires de manire alatoire, puis affichent l'image de la bannire slectionne lors de l'affichage d'une page. Aprs avoir insr une image, vous pouvez dfinir les options d'accessibilit aux balises d'image qui pourront tre lues par les lecteurs d'cran destins aux utilisateurs malvoyants. Ces attributs peuvent tre modifis dans le code HTML. Vous trouverez un didacticiel sur l'insertion d'images l'adresse suivante : www.adobe.com/go/vid0148_fr. 1. Placez le point d'insertion l'endroit o doit apparatre l'image dans la fentre de document, puis procdez de l'une des manires suivantes : Dans la catgorie Commun du panneau Insertion, cliquez sur l'icne Images .
Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Images et slectionnez l'icne Image. Lorsque l'icne Image est affiche dans le panneau Insertion, vous pouvez la faire glisser vers la fentre du document (ou la fentre du mode Code si vous travaillez sur le code). Choisissez Insertion > Image. Faites glisser une image partir du panneau Actifs (Fentre > Actifs) vers l'emplacement souhait dans la fentre de document, puis passez l'tape 3. Faites glisser une image partir du panneau Fichiers vers l'emplacement souhait dans la fentre de document, puis passez l'tape 3. Faites glisser une image partir du bureau vers l'emplacement dsir sur la page, puis passez l'tape 3.
648
2. Dans la bote de dialogue qui s'affiche, procdez de l'une des manires suivantes : Slectionnez Systme de fichiers pour choisir un fichier d'image. Slectionnez Source de donnes pour choisir une source d'images dynamiques. Cliquez sur le bouton Sites et serveurs pour choisir un fichier d'image dans un dossier distant de l'un de vos sites Dreamweaver. 3. Parcourez l'arborescence pour slectionner l'image ou la source de contenu insrer. Tant que le document sur lequel vous travaillez n'a pas encore t enregistr, Dreamweaver cre automatiquement une rfrence d'emplacement de fichier de type file://. Lorsque vous enregistrez le document sur le site, Dreamweaver convertit cette rfrence en indiquant un chemin relatif au document. Remarque : Lors de l'insertion d'images, vous pouvez galement utiliser un chemin absolu vers une image qui rside sur un serveur distant (c'est--dire une image qui n'est pas disponible sur le disque dur local). Toutefois, si vous constatez des problmes de performances lorsque vous travaillez, vous pouvez dcider de dsactiver l'affichage de l'image en mode Cration en dslectionnant l'option Commandes > Afficher les fichiers externes. 4. Cliquez sur OK. La bote de dialogue Attributs d'accessibilit aux balises d'image s'affiche si elle a t active dans les prfrences (Edition > Prfrences). 5. Tapez des valeurs dans les zones Texte secondaire et Description longue, puis cliquez sur OK. Dans la zone Texte secondaire, entrez un nom ou une brve description de l'image. Le lecteur d'cran lit les informations que vous entrez ici. N'entrez pas plus de 50 caractres. Pour de plus longues descriptions, entrez plutt, dans la zone de texte Description longue, un lien vers un fichier donnant davantage d'informations propos de l'image. Dans la zone de texte Description longue, saisissez l'emplacement du fichier afficher lorsque l'utilisateur clique sur l'image ou cliquez sur l'icne du dossier pour naviguer jusqu' un fichier. Cette zone de texte fournit un lien vers un fichier qui concerne ou donne davantage d'informations sur l'image. Remarque : Vous pouvez entrer les informations dans une seule zone de texte ou les deux, selon vos besoins. Le lecteur d'cran lit l'attribut Alt de l'image. Remarque : Si vous cliquez sur Annuler, l'image s'affiche dans le document, mais Dreamweaver ne lui associe ni balises ni attributs d'accessibilit. 6. Dans l'inspecteur Proprits (Fentre > Proprits), dfinissez les proprits de l'image.
Dfinition des proprits de l'image

L'inspecteur Proprits Images vous permet de dfinir les proprits d'une image. Pour voir toutes les proprits illustres, cliquez sur la flche d'agrandissement, dans le coin infrieur droit de l'inspecteur Proprits.
1. Choisissez la commande Fentre > Proprits pour afficher l'inspecteur Proprits pour une image slectionne. 2. Dans la zone de texte situe au-dessous de l'image miniature, dfinissez un nom d'image auquel vous pouvez faire rfrence lors de l'utilisation d'un comportement Dreamweaver (tel que Permuter une image) ou lors de l'utilisation d'un langage de script tel que JavaScript ou VBScript. 3. Dfinissez les options de l'image. L et H La largeur et la hauteur de l'image, en pixels. Dreamweaver met automatiquement jour ces zones de texte avec les dimensions d'origine de l'image lorsque vous insrez une image dans une page. Si vous dfinissez pour L (largeur) et H (hauteur) des valeurs qui ne correspondent pas aux dimensions relles de l'image, celle-ci risque de ne pas s'afficher correctement dans un navigateur (Pour revenir aux valeurs d'origine, cliquez sur les tiquettes de zone de texte L et H ou sur le bouton Rtablir la taille originale de l'image qui apparat droite des zones de texte L et H une fois que vous avez tap de nouvelles valeurs. Remarque : Vous pouvez modifier ces valeurs pour modifier l'chelle d'affichage de cette instance de l'image, mais cette technique ne diminuera pas le temps de chargement, puisque le navigateur chargera la totalit de l'image son chelle normale avant de la rduire. Pour rduire le temps de tlchargement et tre sr que toutes les instances de l'image sont affiches aux mmes dimensions, utilisez une application de retouche d'image pour adapter les proportions de l'image.
Src Spcifie le fichier source de l'image. Tapez le chemin d'accs ou cliquez sur l'icne du dossier pour trouver le fichier source et le
649
slectionner. Lien Spcifie un lien hypertexte pour l'image. Faites glisser l'icne Pointer vers un fichier dans le panneau Fichiers, cliquez sur l'icne de dossier pour rechercher et slectionner un document de votre site ou tapez directement l'URL. Sec Spcifie le texte secondaire qui apparatra la place de l'image dans les navigateurs de type texte seulement, ou dans les navigateurs dont l'utilisateur a dsactiv le tlchargement automatique des images. Pour les utilisateurs malvoyants qui utilisent un synthtiseur vocal avec un navigateur en mode texte, le texte est lu. Dans certains navigateurs, ce texte apparat galement lorsque le pointeur se trouve sur l'image. Nom de la carte et outils Zone ractive Permettent de nommer et de crer une carte graphique ct client Cible Spcifie la fentre ou le cadre dans lequel la page lie devrait tre charge. Cette option n'est pas disponible lorsque l'image n'est pas lie un autre fichier. Les noms de tous les cadres dans le jeu de cadres actuel s'affichent dans la liste Cible. Vous pouvez galement choisir parmi les noms de cible rservs suivants : _blank charge le fichier li dans une nouvelle fentre, sans nom, du navigateur. _parent charge le fichier li dans le jeu de cadres parent, ou dans la fentre parente du cadre contenant le lien. Si le cadre contenant le lien n'est pas imbriqu, le document li sera charg dans la fentre de base du navigateur. _self charge le fichier li dans le mme cadre, ou dans la mme fentre, que le lien. Cette cible tant celle par dfaut, vous n'avez gnralement pas la spcifier. _top charge le fichier li dans la fentre de base du navigateur, supprimant ainsi tous les cadres. Modifier Lance l'diteur d'image que vous avez indiqu dans les prfrences d'diteurs externes et ouvre l'image slectionne. Mettre jour depuis l'original Lorsque limage Web (cest--dire limage de la page Dreamweaver) nest pas synchronise avec le fichier Photoshop dorigine, Dreamweaver dtecte que le fichier dorigine a t mis jour et affiche lune des flches de licne dobjet dynamique en rouge. Lorsque vous slectionnez limage Web en mode Cration et que vous cliquez sur le bouton Mettre jour depuis loriginal dans linspecteur Proprits, limage se met jour automatiquement avec tous les changements effectus dans le fichier Photoshop dorigine. Modifier les paramtres de l'image Recadrer Affiche la bote de dialogue Optimisation d'image, o vous pouvez optimiser l'image.
Permet de rogner une image en supprimant les zones indsirables de l'image slectionne. Permet de rchantillonner une image redimensionne et d'en amliorer la qualit dans ses nouvelles taille et forme. Ajuste la luminosit et le contraste d'une image
Rchantillonner
Luminosit et contraste Accentuer
Permet d'ajuster la nettet d'une image.
Modification des attributs d'accessibilit d'une image dans le code

Si vous avez insr des attributs d'accessibilit pour une image, vous pouvez modifier ces valeurs dans le code HTML. 1. Slectionnez l'image dans la fentre de document. 2. Effectuez l'une des oprations suivantes : Modifiez les attributs de l'image en mode Code. Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis choisissez Modifier la balise. Modifiez la valeur Alt dans l'inspecteur Proprits.
Redimensionnement visuel d'une image
En haut
Dans Dreamweaver, vous pouvez redimensionner visuellement certains lments comme des images, des plug-ins, des fichiers Shockwave ou SWF, des applets et des contrles ActiveX dans Dreamweaver. Le redimensionnement visuel d'une image permet de mieux voir comment l'image affecte la mise en forme en diffrentes dimensions. Il n'adapte pas les dimensions de l'image aux proportions que vous avez spcifies. Si vous redimensionnez visuellement une image dans Dreamweaver, mais que vous n'utilisez pas d'application de retouche d'image (comme Adobe Fireworks) pour en adapter les proportions aux dimensions dsires, le navigateur de l'utilisateur devra le faire lorsque la page sera charge. Cela risque d'entraner l'allongement du temps de tlchargement de la page et l'affichage incorrect de l'image dans le navigateur. Pour rduire le temps de tlchargement et tre sr que toutes les instances de l'image sont affiches aux mmes dimensions, utilisez une application de retouche d'image pour adapter les proportions de l'image.
650
Lorsque vous redimensionnez une image dans Dreamweaver, vous pouvez la rchantillonner afin de l'adapter ses nouvelles dimensions. Le rchantillonnage ajoute ou enlve des pixels d'images JPEG ou GIF redimensionnes afin qu'elles correspondent le mieux possible l'aspect des images originales. Le rchantillonnage d'une image rduit la taille de son fichier, ce qui permet d'en acclrer le tlchargement.
Redimensionnement visuel d'un lment

1. Slectionnez l'lment (par exemple, une image ou un fichier SWF) dans la fentre de document. Des poignes de redimensionnement apparaissent droite et en bas de l'lment, et dans le coin infrieur droit. Si ces poignes n'apparaissent pas, cliquez l'extrieur de l'lment redimensionner, puis slectionnez-le nouveau ou cliquez sur la balise correspondante dans le slecteur de balises. 2. Pour redimensionner l'lment, utilisez l'une des mthodes suivantes : Pour ajuster la largeur de l'lment, dplacez la poigne droite de la slection. Pour ajuster la hauteur de l'lment, dplacez la poigne au bas de la slection. Pour ajuster simultanment la largeur et la hauteur de l'lment, faites glisser la poigne de l'angle de la slection. Pour conserver les proportions de l'lment (rapport largeur/hauteur) lorsque vous modifiez ses dimensions, faites glisser la poigne de l'angle de la slection tout en appuyant sur la touche Maj. Pour ajuster la largeur et la hauteur d'un lment une taille prcise, (par exemple, 1x1 pixel), utilisez l'inspecteur Proprits pour entrer une valeur numrique. Les lments peuvent tre redimensionns visuellement une taille minimale de 8 x 8 pixels. 3. Pour rtablir la taille originale d'un lment redimensionn, supprimez les valeurs des zones de texte L et H ou cliquez sur le bouton Rtablir la taille dans l'inspecteur Proprits.
Rtablissement de la taille originale d'une image

Cliquez sur le bouton Rtablir la taille dans l'inspecteur Proprits des images.
Rchantillonnage d'une image redimensionne

1. Redimensionnez l'image de la manire dcrite ci-dessus. 2. Cliquez sur le bouton Rchantillonner dans l'inspecteur Proprits des images.
Remarque : Vous ne pouvez pas rchantillonner les espaces rservs pour une image ou les lments autres que les images bitmap.
Insertion d'un espace rserv pour l'image
En haut
Un espace rserv pour une image est un graphique que vous utilisez jusqu' ce que le dessin final soit prt pour tre ajout une page Web. Vous pouvez dfinir la taille et la couleur de l'espace rserv et lui donner une tiquette de texte. 1. Dans la fentre de document, placez le point d'insertion l'endroit o vous voulez insrer un espace rserv pour un graphique. 2. Choisissez Insertion > Objets image > Espace rserv pour l'image. 3. Dans la zone de texte Nom (facultatif), tapez le texte que vous souhaitez voir apparatre comme tiquette de l'espace rserv pour l'image. Laissez la zone de texte vide si vous ne voulez pas faire apparatre d'tiquette. Le nom doit commencer par une lettre et ne peut contenir que des lettres ou des chiffres : les espaces et les caractres ASCII tendus ne sont pas autoriss. 4. (Obligatoire) Dans les zones de texte Largeur et Hauteur, saisissez un nombre pour dfinir la taille de l'image en pixels. 5. (Facultatif) Pour Couleur, procdez de l'une des manires suivantes pour appliquer une couleur : Utilisez le slecteur de couleur pour slectionner une couleur. Entrez la valeur hexadcimale de la couleur (par exemple #FF0000). Entrez le nom d'une couleur scurise pour le Web (par exemple rouge). 6. (Facultatif) Dans Texte secondaire, entrez une description de l'image pour les personnes utilisant un navigateur en mode texte. Remarque : Une balise image est insre automatiquement dans le code HTML, avec un attribut src vide. 7. Cliquez sur OK. Les attributs de couleur et de taille ainsi que l'tiquette de l'espace rserv s'affichent comme suit :
Lorsqu'ils sont visualiss dans un navigateur, le texte de l'tiquette et celui de la taille ne s'affichent pas.
651
Remplacement d'un espace rserv pour une image
En haut
Un espace rserv pour image n'affiche pas d'image dans un navigateur. Avant de publier votre site, il convient de remplacer tous les espaces rservs pour une image que vous avez ajouts par des fichiers d'image adapts au Web, tels que des images GIF ou JPEG. Si vous possdez Fireworks, vous pouvez crer un nouveau graphique partir d'un espace rserv pour image dans Dreamweaver. La nouvelle image reprend la mme taille que celle de l'espace rserv pour l'image. Vous pouvez modifier l'image, puis la remplacer dans Dreamweaver. 1. Dans la fentre Document, procdez de l'une des manires suivantes : Double-cliquez sur l'espace rserv pour l'image. Cliquez sur l'espace rserv pour l'image pour le slectionner puis, dans l'inspecteur Proprits (Fentre > Proprits), cliquez sur l'icne du dossier ct de la zone de texte Src. 2. Dans la bote de dialogue Source de l'image, localisez l'image que vous voulez utiliser pour remplacer l'espace rserv, puis cliquez sur OK.
Dfinition des proprits de l'espace rserv pour l'image
En haut
Pour dfinir les proprits d'un espace rserv pour l'image, slectionnez l'espace rserv dans la fentre de document, puis choisissez la commande Fentre > Proprits pour afficher l'inspecteur Proprits. Cliquez sur la flche d'agrandissement dans l'angle infrieur droit pour afficher toutes les proprits. Utilisez l'inspecteur Proprits pour dfinir un nom, une largeur, une hauteur, une source d'image, une autre description de texte, un alignement ou une couleur pour l'espace rserv pour l'image.
Dans l'inspecteur Proprits de l'espace rserv, la zone de texte grise et la zone de texte Aligner sont dsactives. Vous pouvez dfinir ces proprits dans l'inspecteur Proprits de l'image lorsque vous remplacez l'espace rserv par une image. Parmi les options suivantes, dfinissez celles de votre choix : L et H Dfinissent la largeur et la hauteur de l'espace rserv pour l'image, en pixels. Src Spcifie le fichier source de l'image. Pour un espace rserv pour une image, cette zone de texte est vide. Cliquez sur le bouton Parcourir pour slectionner une image utiliser en remplacement du graphique de l'espace rserv. Lien Spcifie un lien hypertexte pour l'espace rserv de l'image. Faites glisser l'icne Pointer vers un fichier dans le panneau Fichiers, cliquez sur l'icne de dossier pour rechercher et slectionner un document de votre site ou tapez directement l'URL. Sec Spcifie le texte secondaire qui apparatra la place de l'image dans les navigateurs de type texte seulement, ou dans les navigateurs dont l'utilisateur a dsactiv le tlchargement automatique des images. Pour les utilisateurs malvoyants qui utilisent un synthtiseur vocal avec un navigateur en mode texte, le texte est lu. Dans certains navigateurs, ce texte apparat galement lorsque le pointeur se trouve sur l'image. Crer Permet de lancer Fireworks pour crer une image de remplacement. Le bouton Crer est dsactiv, sauf si Fireworks est galement install sur votre ordinateur. Mettre jour depuis l'original Lorsque limage Web (cest--dire limage de la page Dreamweaver) nest pas synchronise avec le fichier Photoshop dorigine, Dreamweaver dtecte que le fichier dorigine a t mis jour et affiche lune des flches de licne dobjet dynamique en rouge. Lorsque vous slectionnez limage Web en mode Cration et que vous cliquez sur le bouton Mettre jour depuis loriginal dans linspecteur Proprits, limage se met jour automatiquement avec tous les changements effectus dans le fichier Photoshop dorigine. Couleur Spcifie une couleur pour l'espace rserv de l'image.
Modification d'images dans Dreamweaver
En haut
Vous pouvez rchantillonner, recadrer, optimiser et accentuer les images dans Dreamweaver. Vous pouvez galement rgler leur luminosit et leur contraste.
Fonctions de retouche d'image

652
Dreamweaver comprend des fonctions basiques de retouche d'image, ce qui vous vite de devoir lancer une application externe pour effectuer cette tche (par exemple, Fireworks ou Photoshop). Les outils de retouche d'image de Dreamweaver sont conus pour un travail simplifi avec les concepteurs de contenu responsables de la cration des fichiers d'image utiliss sur votre site Web. Remarque : Il n'est pas ncessaire d'installer Fireworks ou d'autres applications de retouche d'image sur votre ordinateur pour utiliser les fonctions de retouche d'image de Dreamweaver. Choisissez Modifier > Image. Dfinissez l'une des fonctions de retouche d'image Dreamweaver suivantes : Rchantillonner Ajoute ou enlve des pixels d'images JPEG ou GIF redimensionnes afin qu'elles correspondent le mieux possible l'aspect des images originales. Le rchantillonnage d'une image rduit la taille de son fichier, ce qui permet d'en acclrer le tlchargement. Lorsque vous redimensionnez une image dans Dreamweaver, vous pouvez la rchantillonner afin de l'adapter ses nouvelles dimensions. Lorsqu'un objet bitmap est rchantillonn, des pixels sont ajouts l'image ou en sont enlevs afin de l'agrandir ou de la rduire. En gnral, le rchantillonnage d'une image une rsolution suprieure provoque une faible perte de qualit. Le rchantillonnage une rsolution infrieure, en revanche, provoque toujours une perte de donnes et donne une moins bonne qualit. Recadrer Permet de rduire la surface des images. En gnral, il est utile pour mettre en vidence le sujet de l'image et supprimer les aspects indsirables qui entourent le centre d'intrt de l'image. Luminosit et contraste Modifie la luminosit et le contraste des pixels qui composent l'image. Ceci affecte les surbrillances, les ombres et les demi-tons d'une image. Cette fonction est utilise pour corriger les images trop sombres ou trop claires. Accentuer Ajuste la mise au point d'une image en augmentant le contraste des bords sur l'image. Lorsque vous scannez une image ou que vous prenez une photo numrique, la plupart des logiciels de capture d'images estompent par dfaut les bords des objets photographis. Cela empche les dtails extrmement prcis de se perdre dans les pixels dont sont constitues les images numriques. Cependant, il est souvent ncessaire d'accentuer l'image pour faire ressortir les dtails dans les fichiers d'image numrique, ce qui augmente le contraste des bords et rend l'image encore plus nette. Remarque : Les fonctions de modification d'images de Dreamweaver s'appliquent uniquement aux formats de fichier JPEG et GIF. Les autres formats de fichiers d'image bitmap ne peuvent pas tre modifis l'aide de ces fonctions.
Recadrage d'une image

Dreamweaver permet de recadrer (ou rogner) les images bitmap. Remarque : Lorsque vous recadrez une image, le fichier d'image source est modifi sur le disque. Il peut donc s'avrer utile de conserver une copie de sauvegarde du fichier d'image au cas o vous auriez besoin de revenir l'image d'origine. 1. Ouvrez la page qui contient l'image recadrer, slectionnez l'image et procdez de l'une des manires suivantes : Cliquez sur l'icne Recadrer dans l'inspecteur Proprits des images.
Choisissez Modifier > Image > Recadrer. Des poignes de recadrage apparaissent autour de l'image slectionne. 2. Ajustez-les jusqu' ce que la surface de l'image conserver soit entoure d'une zone limite. 3. Double-cliquez dans cette zone ou appuyez sur Entre pour recadrer la slection. 4. Une bote de dialogue vous informe que le fichier image que vous recadrez sera modifi sur le disque. Cliquez sur OK. Chaque pixel de l'image bitmap situ hors de la zone limite est supprim mais les autres objets de l'image ne sont pas affects. 5. Vrifiez l'aide de l'aperu que l'image correspond vos attentes. Si ce n'est pas le cas, choisissez Edition > Annuler Recadrer pour revenir l'image d'origine. Remarque : Vous pouvez annuler l'effet de la commande Recadrer (et revenir au fichier d'image d'origine) jusqu'au moment o vous quittez Dreamweaver ou alors modifiez le fichier dans une application de retouche d'image.
Optimisation d'une image

Vous pouvez optimiser des images sur vos pages Web dans Dreamweaver. 1. Ouvrez la page qui contient l'image optimiser, slectionnez l'image et procdez de l'une des manires suivantes : Cliquez sur le bouton Modifier les paramtres de l'image Choisissez Modifier > Image > Optimiser. 2. Apportez les modifications dans la bote de dialogue Optimisation d'image, puis cliquez sur OK. dans l'inspecteur Proprits de l'image.
Accentuation d'une image
653
L'accentuation augmente le contraste des pixels autour des objets pour augmenter la dfinition de l'image et obtenir une meilleure nettet. 1. Ouvrez la page qui contient l'image accentuer, slectionnez l'image et procdez de l'une des manires suivantes : Cliquez sur le bouton Accentuer dans l'inspecteur Proprits des images.
Choisissez Modifier > Image > Accentuer. 2. Pour spcifier le degr d'accentuation appliqu par Dreamweaver l'image, dplacez le curseur ou tapez une valeur comprise entre 0 et 10 dans la zone de texte. Lorsque vous ajustez la nettet de l'image l'aide de la bote de dialogue Accentuer, vous pouvez afficher un aperu de l'image modifie. 3. Lorsque vous tes satisfait de l'image, cliquez sur OK. 4. Enregistrez vos modifications en choisissant Fichier > Enregistrer ou revenez l'image d'origine en choisissant Edition > Annuler Accentuer. Remarque : Vous pouvez annuler l'effet de la commande Accentuer (et revenir au fichier d'image d'origine) uniquement avant d'enregistrer la page qui contient l'image. Une fois que vous avez enregistr la page, les modifications apportes l'image sont dfinitivement enregistres.
Ajustement de la luminosit et du contraste d'une image

La fonction Luminosit/Contraste modifie la luminosit ou le contraste des pixels qui composent l'image. Ceci affecte les surbrillances, les ombres et les demi-tons d'une image. Cette fonction est utilise pour corriger les images trop sombres ou trop claires. 1. Ouvrez la page qui contient l'image ajuster, slectionnez l'image et procdez de l'une des manires suivantes : Cliquez sur le bouton Luminosit/Contraste dans l'inspecteur Proprits des images. Choisissez Modifier > Image > Luminosit/Contraste. 2. Dplacez les curseurs de luminosit et de contraste pour modifier les valeurs votre convenance. Les valeurs sont comprises entre -100 et 100. 3. Cliquez sur OK.
Cration d'une image survole
En haut
Vous pouvez insrer des images survoles dans votre page. Une image survole est une image qui, lorsqu'elle est visualise dans un navigateur, change lorsque le pointeur vient se placer au-dessus d'elle. Vous devez disposer de deux images pour crer l'image survole : l'image principale (affiche au chargement de la page) et l'image secondaire (qui apparat lorsque le pointeur est plac au-dessus de l'image principale). Les deux images utilises doivent avoir les mmes dimensions ; si ce n'est pas le cas, Dreamweaver redimensionne la seconde image en fonction de la taille de la premire. Les images survoles sont automatiquement dfinies pour rpondre l'vnement onMouseOver . Vous pouvez configurer une image pour qu'elle rponde un vnement diffrent (par exemple, un clic de souris) ou modifier une image survole. Vous trouverez un didacticiel sur la cration d'images survoles l'adresse suivante : www.adobe.com/go/vid0159_fr. 1. Dans la fentre de document, placez le point d'insertion l'endroit o vous voulez insrer l'image survole. 2. Insrez l'image survole l'aide de l'une des mthodes suivantes : Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Images puis slectionnez l'icne Image survole. Lorsque l'icne Image survole s'affiche dans le panneau Insertion, vous pouvez la faire glisser jusqu' la fentre de document. Slectionnez Insertion > Objets image > Image survole. 3. Dfinissez les options, puis cliquez sur OK. Nom de l'image Nom de l'image survole. Image d'origine L'image qui doit s'afficher au chargement de la page. Entrez le chemin d'accs dans la zone de texte ou cliquez sur Parcourir et slectionnez l'image. Image survole L'image afficher lorsque le pointeur est plac au-dessus de l'image originale. Entrez le chemin d'accs de l'image ou cliquez sur Parcourir pour la slectionner. Prcharger l'image survole Prcharge les images dans la mmoire cache du navigateur afin d'viter tout dlai lorsque vous faites passer le pointeur de la souris par-dessus l'image. Texte secondaire (Facultatif) Texte qui dcrit l'image l'intention des personnes utilisant un navigateur en mode texte. Si cliqu, aller l'URL Le fichier ouvrir lorsqu'un utilisateur clique sur l'image survole. Entrez le chemin d'accs du fichier ou cliquez sur Parcourir pour le slectionner. Remarque : Si vous ne dfinissez pas un lien pour l'image, Dreamweaver insre un lien nul (#) dans le code source HTML auquel le comportement de survol est attach. Si vous supprimez le lien nul, l'image survole ne fonctionne plus.
654
4. Choisissez Fichier > Aperu dans le navigateur ou appuyez sur la touche F12. 5. Dans le navigateur, placez le pointeur au-dessus de l'image d'origine pour voir l'image survole. Remarque : Il est impossible de voir l'effet d'une image survole dans le mode Cration.
Utilisation d'un diteur d'image externe
En haut
Dans Dreamweaver, vous pouvez ouvrir une image slectionne dans un diteur d'image externe. Lorsque vous revenez dans Dreamweaver aprs avoir enregistr le fichier d'image modifi, toutes les modifications apportes l'image sont visibles dans la fentre de document. Vous pouvez dfinir Fireworks comme principal diteur d'image. Vous pouvez galement dfinir quels types de fichier un diteur peut ouvrir et vous pouvez slectionner plusieurs diteurs d'image. Par exemple, vous pouvez dfinir des prfrences afin de dmarrer Fireworks pour modifier les fichiers GIF et de lancer un diteur d'image diffrent pour modifier les fichiers JPG ou JPEG.
Dmarrage de l'diteur d'image externe

Effectuez l'une des oprations suivantes : Double-cliquez sur l'image modifier. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur l'image modifier, choisissez Modifier avec > Parcourir et slectionnez un diteur. Slectionnez l'image modifier, puis cliquez sur Modifier dans l'inspecteur Proprits. Double-cliquez sur le fichier d'image dans le panneau Fichiers pour lancer l'diteur d'image principal. Si vous n'avez pas indiqu d'diteur d'image, Dreamweaver excute l'diteur par dfaut de ce type de fichier. Remarque : Lorsque vous ouvrez directement une image partir du panneau Fichiers, les fonctionnalits d'intgration de Fireworks sont inoprantes ; Fireworks n'ouvre pas le fichier original PNG. Pour utiliser ces fonctionnalits d'intgration de Fireworks, ouvrez les images partir de la fentre de document. Si l'image mise jour n'apparat pas une fois de retour dans la fentre de Dreamweaver, slectionnez l'image et cliquez sur le bouton Actualiser dans l'inspecteur Proprits.
Dfinition d'un diteur d'image externe pour un type de fichier existant

Vous pouvez slectionner l'diteur d'image utiliser pour ouvrir et modifier les fichiers graphiques. 1. Ouvrez la bote de dialogue Types de fichiers/Editeurs en effectuant l'une des oprations suivantes : Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh) et slectionnez la catgorie Types de fichiers/Editeurs dans la liste de gauche. Choisissez la commande Edition > Modifier avec diteur externe, puis slectionnez Types de fichiers/Editeurs. 2. Dans la liste Extensions, slectionnez l'extension de fichier pour laquelle dfinir un diteur externe. 3. Cliquez sur le bouton Ajouter (+) au-dessus de la liste Editeurs. 4. Dans la bote de dialogue Slectionner un diteur externe, recherchez l'application dmarrer en tant qu'diteur pour ce type de fichier. 5. Dans la bote de dialogue Prfrences, cliquez sur Principal si vous souhaitez que cet diteur soit l'diteur principal pour ce type de fichier. 6. Si vous souhaitez configurer un diteur supplmentaire pour ce type de fichier, rptez les tapes 3 et 4. Dreamweaver utilise automatiquement l'diteur principal lorsque vous modifiez ce type d'image. Vous pouvez choisir l'un des autres diteurs figurant dans la liste, partir du menu droulant de l'image, dans la fentre de document.
Ajout d'un nouveau type de fichier la liste Extensions

1. Ouvrez la bote de dialogue Types de fichiers/Editeurs en effectuant l'une des oprations suivantes : Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh) et slectionnez la catgorie Types de fichiers/Editeurs dans la liste de gauche. Choisissez la commande Edition > Modifier avec diteur externe, puis slectionnez Types de fichiers/Editeurs. 2. Dans la bote de dialogue Types de fichiers/Editeurs, cliquez sur le bouton Ajouter (+) au-dessus de la liste Extensions. Une zone de texte s'affiche dans la liste Extensions. 3. Tapez l'extension de fichier pour le type de fichier que vous voulez ouvrir avec l'diteur. 4. Pour slectionner un diteur externe pour le type de fichier, cliquez sur le bouton Ajouter (+) au-dessus de la liste Editeurs.
655
5. Dans la bote de dialogue qui apparat alors, slectionnez l'application utiliser pour modifier ce type d'image. 6. Cliquez sur Principal si vous dsirez que ce programme soit l'diteur principal pour ce type d'image.
Modification d'une prfrence d'diteur existante

1. Ouvrez la bote de dialogue Types de fichiers/Editeurs en effectuant l'une des oprations suivantes : Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh) et slectionnez la catgorie Types de fichiers/Editeurs dans la liste de gauche. Choisissez la commande Edition > Modifier avec diteur externe, puis slectionnez Types de fichiers/Editeurs. 2. Dans la bote de dialogue Types de fichiers/Editeurs, slectionnez dans la liste Extensions le type de fichier que vous souhaitez modifier pour visualiser les diteurs actuellement dfinis. 3. Dans la liste Editeurs, slectionnez l'diteur que vous dsirez affecter ce type de fichier, puis procdez de l'une des manires suivantes : Cliquez sur le bouton Ajouter (+) ou Supprimer (-), au-dessus de la liste Editeurs, pour ajouter ou supprimer un diteur. Cliquez sur le bouton Rendre principal pour dfinir l'diteur lancer par dfaut pour la retouche.
Application de comportements aux images
En haut
Vous pouvez appliquer l'un des comportements disponibles une image ou la zone ractive d'une image. Lorsque vous appliquez un comportement une zone ractive, Dreamweaver insre le code source HTML ncessaire dans la balise area. Trois comportements s'appliquent spcifiquement aux images : Prcharger les images, Permuter une image et Restaurer l'interversion d'images. Prcharger les images Place dans la mmoire cache du navigateur les images qui ne sont pas immdiatement affiches lors du chargement de la page (par exemple, les images de substitution appeles par un comportement, un lment PA ou une fonction en JavaScript). Cela vite l'utilisateur d'attendre que ces images soient charges, lorsqu'un vnement dclenche leur apparition. Permuter une image Remplace une image par une autre, en modifiant l'attribut SRC de la balise img . Utilisez cette action pour crer des substitutions de boutons et autres effets sur des images (y compris la substitution de plusieurs images la fois). Restaurer l'image intervertie Rtablit la dernire interversion d'images son tat d'origine. Cette action est automatiquement ajoute par dfaut lorsque vous associez l'action Permuter une image un objet ; en principe, vous n'avez pas besoin d'y faire appel manuellement. Vous pouvez galement utiliser des comportements pour crer des systmes de navigation plus sophistiqus, comme les menus de reroutage.
656
Extension AIR pour Dreamweaver

Installation de l'extension AIR pour Dreamweaver Cration d'une application AIR dans Dreamweaver Signature d'une application l'aide d'un certificat numrique Modification des types de fichiers associs AIR Modification des paramtres d'une application AIR Aperu d'une page Web dans une application AIR Utilisation des conseils de code et de la coloration du code AIR Accs la documentation d'Adobe AIR Avec l'extension Adobe AIR pour Dreamweaver, vous pouvez transformer une application Web en application de bureau. Les utilisateurs peuvent ensuite excuter l'application sur leur bureau et ce, dans certains cas, sans connexion Internet. Cette extension est utilisable avec Dreamweaver CS3 et les versions ultrieures. Elle n'est pas compatible avec Dreamweaver 8. Remarque : Adobe AIR ne prend pas en charge Adobe InContext Editing. Si vous utilisez l'extension AIR pour Dreamweaver afin d'exporter une application contenant des rgions InContext Editing, la fonctionnalit InContext Editing ne fonctionnera pas.
Installation de l'extension AIR pour Dreamweaver
Haut de la page
L'extension AIR pour Dreamweaver permet de crer des applications Internet enrichies utiliser sur le bureau. Par exemple, vous pouvez crer un ensemble de pages Web qui interagissent afin d'afficher des donnes XML. Vous pouvez utiliser l'extension Adobe AIR pour Dreamweaver pour regrouper cet ensemble de pages en une petite application qui peut tre installe sur l'ordinateur d'un utilisateur. Lorsque l'utilisateur excute l'application depuis son bureau, celle-ci se charge et affiche le site Web dans sa propre fentre d'application, indpendamment d'un navigateur. L'utilisateur peut ainsi consulter le site Web en local sur son ordinateur sans connexion Internet. Les pages dynamiques telles que les pages Adobe ColdFusion et PHP ne fonctionnent pas dans Adobe AIR. Le module d'excution ne fonctionne qu'avec HTML et JavaScript. Vous pouvez toutefois utiliser dans vos pages du code JavaScript afin d'appeler n'importe quel service web expos sur Internet (y compris les services gnrs par ColdFusion ou PHP) l'aide de mthodes Ajax telles que XMLHTTPRequest ou des API spcifiques Adobe AIR.
Configuration requise
Pour utiliser l'extension Adobe AIR pour Dreamweaver, les logiciels suivants doivent tre installs et configurs correctement : Dreamweaver CS3 ou une version ultrieure Adobe Extension Manager CS3 ou une version ultrieure Java JRE 1.4 ou une version ultrieure (ncessaire pour la cration du fichier Adobe AIR). Java JRE est disponible l'adresse http://java.sun.com/. Les exigences ci-avant ne s'appliquent qu' la cration et la prvisualisation d'applications Adobe AIR dans Dreamweaver. Pour installer et excuter une application Adobe AIR sur votre bureau, vous devez galement installer Adobe AIR sur l'ordinateur. Pour tlcharger le module d'excution, consultez le site http://www.adobe.com/fr/products/air/.
Installation de l'extension Adobe AIR pour Dreamweaver

1. Tlchargez l'extension Adobe AIR pour Dreamweaver ici : http://www.adobe.com/fr/products/air/tools/ajax/. 2. Double-cliquez sur le fichier portant l'extension .mxp dans l'Explorateur Windows (Windows) ou dans le Finder (Macintosh). 3. Suivez les instructions qui s'affichent l'cran pour installer l'extension. 4. Quand vous avez termin, redmarrez Dreamweaver. Pour plus d'informations sur l'utilisation de l'extension Adobe AIR pour Dreamweaver, voir Utilisation de l'extension AIR pour Dreamweaver.
Cration d'une application AIR dans Dreamweaver
Haut de la page
Pour crer une application AIR base sur HTML dans Dreamweaver, slectionnez un site existant conditionner sous la forme d'une application AIR. 1. Assurez-vous que les pages Web que vous voulez conditionner sous la forme d'une application sont bien contenues dans un site Dreamweaver dfini.
657
2. Dans Dreamweaver, ouvrez la page d'accueil de l'ensemble de pages conditionner. 3. Choisissez Site > Paramtres d'application AIR. 4. Compltez la bote de dialogue AIR - Paramtres de l'application et du programme d'installation, puis cliquez sur Crer le fichier AIR. Pour plus d'informations, reportez-vous aux options de la bote de dialogue numres ci-dessous. La premire fois que vous crez un fichier Adobe AIR, Dreamweaver cre un fichier .xml d'application dans le dossier racine de votre site. Ce fichier fait office de manifeste et dfinit diffrentes proprits de l'application. Les options de la bote de dialogue AIR - Paramtres de l'application et du programme d'installation sont les suivantes : Nom de fichier de l'application le nom utilis pour le fichier excutable de l'application. Par dfaut, l'extension emploie le nom du site Dreamweaver comme nom de fichier. Vous pouvez modifier ce nom si vous le souhaitez. Le nom ne doit toutefois contenir que les caractres autoriss pour les noms de fichier ou de dossier. En d'autres termes, il ne peut contenir que des caractres ASCII et ne peut pas se terminer par un point. Ce paramtre est obligatoire. Nom de l'application le nom qui s'affiche sur les crans d'installation lorsque des utilisateurs installent l'application. L'extension spcifie galement le nom du site Dreamweaver par dfaut. Ce paramtre n'est soumis aucune restrictions en termes de caractres, et il n'est pas obligatoire. ID de l'application identifie l'application l'aide d'un ID unique. Vous pouvez modifier l'ID par dfaut si vous le souhaitez. N'utilisez pas d'espaces ni de caractres spciaux dans l'ID. Les seuls caractres valides sont 0 9, a z, A Z, . (point) et - (tiret). Ce paramtre est obligatoire. Version spcifie le numro de version de votre application. Ce paramtre est obligatoire. Contenu initial dtermine la page de dmarrage de l'application. Cliquez sur le bouton Parcourir afin d'accder votre page de dmarrage et de la slectionner. Le fichier choisi doit se trouver dans le dossier racine du site. Ce paramtre est obligatoire. Description permet de spcifier une description de l'application afficher lorsque l'utilisateur l'installe. Copyright permet de spcifier un copyright qui s'affiche dans la section indiquant des informations sur les applications Adobe AIR installes sur le Macintosh. Ces informations ne sont pas utilises pour les applications installes sous Windows. Style de fentre spcifie le style de fentre (ou chrome) utiliser lorsque l'utilisateur excute l'application sur son ordinateur. Le chrome systme entoure l'application avec le contrle de fentre standard du systme d'exploitation. Le chrome personnalis (opaque) supprime le chrome standard du systme et vous permet de crer votre propre chrome pour l'application. La cration du chrome personnalis s'effectue directement dans la page HTML conditionne. Le chrome personnalis (transparent) est similaire au chrome personnalis (opaque), mais il ajoute des possibilits de transparence aux bords de la page, ce qui permet de crer des fentres d'application non rectangulaires. Taille de fentre spcifie les dimensions de la fentre d'application lorsqu'elle s'ouvre. Icne permet de slectionner des images personnalises pour les icnes de l'application. Les images par dfaut sont des images Adobe AIR qui sont fournies avec l'extension. Pour utiliser des images personnalises, cliquez sur le bouton Slectionner les images d'icne. Ensuite, dans la bote de dialogue Images d'icne qui s'affiche, cliquez sur le dossier pour chaque taille d'icne, puis slectionnez le fichier d'image utiliser. AIR n'accepte que les fichiers PNG comme images d'icne d'application. Remarque : Les images personnalises slectionnes doivent rsider dans le site de l'application et leurs chemins doivent tre relatifs la racine du site. Types de fichier associs permet d'associer des types de fichiers votre application. Pour plus d'informations, reportez-vous aux sections suivantes. Mises jour de l'application dtermine si c'est le programme d'installation d'application Adobe AIR ou l'application qui effectue les mises jour vers les nouvelles versions des applications Adobe AIR. La case cocher est active par dfaut, ce qui force le programme d'installation d'application Adobe AIR procder aux mises jour. Si vous voulez que votre application se charge d'effectuer ses mises jour, dsactivez cette case cocher. Notez que si vous dsactivez la case cocher, vous devrez rdiger une application capable d'excuter des mises jour. Fichiers inclus spcifie les fichiers et les dossiers inclure dans votre application. Vous pouvez ajouter des fichiers HTML et CSS, des fichiers d'image et des fichiers de bibliothque JavaScript. Cliquez sur le bouton Plus (+) pour ajouter des fichiers et sur l'icne reprsentant un dossier pour ajouter des dossiers. N'incluez pas certains fichiers, tels que _mmServerScripts, _notes, etc. Pour supprimer un fichier ou un dossier de la liste, slectionnez-le et cliquez sur le bouton Moins (-). Signature numrique Cliquez sur Dfinir pour signer votre application l'aide d'une signature numrique. Ce paramtre est obligatoire. Pour plus d'informations, reportez-vous aux sections suivantes. Dossier du menu Programmes spcifie un sous-rpertoire, dans le menu Dmarrer de Windows, o le raccourci de l'application doit tre cr. (Pas d'application sur Macintosh.) Destination dtermine o le programme d'installation de la nouvelle application (fichier .air) doit tre enregistr. L'emplacement par dfaut est la racine du site. Cliquez sur le bouton Parcourir pour choisir un autre emplacement. Le nom de fichier par dfaut est bas sur le nom du site, auquel est ajoute une extension .air. Ce paramtre est obligatoire. Voici un exemple de la bote de dialogue avec quelques options de base :
658
Signature d'une application l'aide d'un certificat numrique
Haut de la page
Une signature numrique permet de garantir que le code d'une application n'a pas t modifi ou corrompu depuis sa cration par l'auteur du logiciel. Toutes les applications Adobe AIR ncessitent une signature numrique et ne peuvent tre installes sans celle-ci. Vous pouvez signer votre application l'aide d'un certificat numrique que vous avez achet, crer votre propre certificat, ou prparer un fichier Adobe AIRI (fichier intermdiaire d'Adobe AIR) que vous signerez plus tard. 1. Dans la bote de dialogue AIR - Paramtres de l'application et du programme d'installation, cliquez sur le bouton Dfinir situ en regard de l'option Signature numrique. 2. Dans la bote de dialogue Signature numrique, effectuez l'une des oprations suivantes : Pour signer une application avec un certificat numrique prachet, cliquez sur le bouton Parcourir, slectionnez le certificat, entrez le mot de passe correspondant et cliquez sur OK. Pour crer votre propre certificat numrique d'auto-signature, cliquez sur le bouton Crer et remplissez la bote de dialogue. L'option de type du certificat fait rfrence au niveau de scurit : 1024-RSA utilise une cl 1 024 bits (moins scurise) et 2048-RSA une cl 2 048 bits (plus scurise). Cliquez sur OK lorsque vous avez termin. Ensuite, entrez le mot de passe correspondant dans la bote de dialogue Signature numrique et cliquez sur OK. Choisissez Prparation d'un package AIR Intermdiaire (AIRI) signer ultrieurement, puis cliquez sur OK. Cette option permet de crer une application AIR Intermdiaire (AIRI) sans signature numrique. Aucun utilisateur ne pourra toutefois installer l'application tant que vous n'aurez pas ajout de signature numrique.
A propos de l'horodatage
Lorsque vous signez une application Adobe AIR l'aide d'un certificat numrique, l'outil de conditionnement interroge le serveur d'une autorit d'horodatage afin d'obtenir une date et une heure de signature pouvant tre vrifies indpendamment. L'horodatage obtenu est incorpor au fichier AIR. Tant que le certificat de signature est valide au moment de la signature, le fichier AIR peut tre install, mme aprs l'expiration du certificat. Par contre, si aucun horodatage n'est obtenu, le fichier AIR ne pourra plus tre install lorsque le certificat aura expir ou sera rvoqu. Par dfaut, l'extension Adobe AIR pour Dreamweaver obtient un horodatage lors de la cration d'une application Adobe AIR. Vous pouvez toutefois dsactiver l'horodatage en dsactivant l'option Horodatage de la bote de dialogue Signature numrique. Ceci peut par exemple s'avrer ncessaire si aucun service d'horodatage n'est disponible. Adobe recommande que tout fichier AIR distribu publiquement contienne un horodatage. L'autorit d'horodatage utilise par dfaut par les outils de conditionnement d'Adobe AIR est Geotrust. Pour plus d'informations sur l'horodatage et les certificats numriques, voir Digitally signing an AIR file (en anglais).
Haut de la page
659
Modification des types de fichiers associs AIR

Vous pouvez associer diffrents types de fichiers une application Adobe AIR. Par exemple, si vous voulez que les fichiers possdant l'extension .avf s'ouvrent dans Adobe AIR lorsqu'un utilisateur double-clique dessus, vous pouvez ajouter l'extension .avf votre liste de types de fichiers associs. 1. Dans la bote de dialogue AIR - Paramtres de l'application et du programme d'installation, cliquez sur le bouton Modifier la liste en regard de l'option Types de fichiers associs. 2. Dans la bote de dialogue Types de fichiers associs, effectuez l'une des actions suivantes : Slectionnez un type de fichier puis cliquez sur le bouton Moins (-) pour supprimer ce type de fichier. Cliquez sur le bouton Plus (+) pour ajouter un type de fichier. Si vous cliquez sur le bouton Plus pour ajouter un type de fichier, la bote de dialogue Paramtres du type de fichier s'affiche. Compltez la bote de dialogue puis cliquez sur OK pour la fermer. Les options disponibles sont les suivantes : Nom spcifie le nom du type de fichier qui s'affiche dans la liste Types de fichier associs. Cette option est obligatoire et ne peut contenir que des caractres ASCII alphanumriques (a-z, A-Z, 0-9) et des points (par adobe.VideoFile). Le nom doit dbuter par une lettre. La longueur maximale est fixe 38 caractres. Extension spcifie l'extension du type de fichier. N'incluez pas le point qui prcde l'extension. Cette option est obligatoire et ne peut contenir que des caractres ASCII alphanumriques (a-z, A-Z, 0-9). La longueur maximale est fixe 38 caractres. Description permet de spcifier une description facultative du type de fichier. Type de contenu spcifie le type MIME ou le type de mdia du fichier (par exemple text/html, image/gif, etc.). Emplacements des fichiers d'icne permet de slectionner des images personnalises pour les types de fichiers associs. Les images par dfaut sont des images Adobe AIR qui sont fournies avec l'extension.
Modification des paramtres d'une application AIR

Vous pouvez modifier les paramtres de votre application Adobe AIR tout moment. Choisissez Site > Paramtres de l'application AIR, puis apportez les modifications dsires.
Haut de la page
Aperu d'une page Web dans une application AIR
Haut de la page
Vous pouvez prvisualiser dans Dreamweaver une page HTML de la faon dont elle se prsenterait dans une application Adobe AIR. La prvisualisation peut tre utile si vous voulez voir l'apparence qu'aurait votre page Web dans l'application sans devoir crer l'application tout entire. Dans la barre d'outils Document, cliquez sur le bouton Aperu/Dbogage dans le navigateur, puis choisissez Aperu dans AIR. Vous pouvez galement appuyer sur Ctrl+MAJ+F12 (Windows) ou sur Commande+MAJ+F12 (Macintosh).
Utilisation des conseils de code et de la coloration du code AIR
Haut de la page
L'extension Adobe AIR pour Dreamweaver ajoute galement des conseils de code et la coloration du code aux lments de langage Adobe AIR dans le mode Code de Dreamweaver. Ouvrez un fichier HTML ou JavaScript en mode Code, puis entrez du code Adobe AIR. Remarque : Le mcanisme de conseil de code ne fonctionne que dans les balises <script> ou dans les fichiers .js. Pour plus d'informations sur les lments du langage Adobe AIR, consultez la documentation dans la suite de ce guide.
Accs la documentation d'Adobe AIR
Haut de la page
L'extension Adobe AIR ajoute un lment au menu Aide de Dreamweaver qui permet d'accder au guide de dveloppement d'applications AIR l'aide de code HTML et d'Ajax. Choisissez Aide > Aide d'Adobe AIR.
660
Cration d'un lien vers un document Word ou Excel

Vous pouvez insrer un lien vers un document Microsoft Word ou Excel dans une page existante. 1. Ouvrez la page o le lien doit tre affich. 2. Faites glisser le fichier de son emplacement actuel vers la page Dreamweaver, en plaant le lien l'emplacement voulu. 3. Slectionnez Crer un lien, puis cliquez sur OK. 4. Si le document vers lequel vous crez un lien rside hors du dossier racine de votre site, Dreamweaver vous invite le copier dans ce dossier. En copiant le document dans le dossier racine du site, vous tes assur que le document sera disponible lors de la publication du site Web. 5. Lorsque vous chargez votre page sur le serveur Web, vous devez galement charger le fichier Word ou Excel. Votre page contient dsormais un lien vers le document Word ou Excel. Le texte du lien est le nom du fichier li. Si vous le souhaitez, vous pouvez modifier ce texte dans la fentre du document.
661
Intgration entre les applications

A propos de l'intgration de Photoshop, Flash et Fireworks
A propos de l'intgration de Photoshop, Flash et Fireworks
Haut de la page
Photoshop, Fireworks et Flash sont de puissants outils de dveloppement Web qui permettent de crer et de grer des graphismes et des fichiers SWF. Vous pouvez intgrer de faon troite Dreamweaver avec ces outils au sein de votre processus de cration. Remarque : Une intgration limite est galement disponible avec quelques autres applications. Par exemple, vous pouvez exporter un fichier InDesign en format XHTML et continuer le modifier dans Dreamweaver. Vous trouverez un didacticiel consacr ce flux d'activits l'adresse www.adobe.com/go/vid0202_fr. Vous pouvez insrer aisment des images et du contenu crs dans Adobe Flash (fichiers SWF et FLV) dans un document Dreamweaver. Vous pouvez galement modifier une image ou un fichier SWF dans son diteur d'origine aprs l'avoir insr dans un document Dreamweaver. Remarque : Pour qu'il soit possible d'utiliser Dreamweaver conjointement ces applications Adobe, toutes ces applications doivent tre installes sur votre ordinateur. Pour Fireworks et Flash, l'intgration des produits est ralise par l'intermdiaire de l'dition Roundtrip. L'dition Roundtrip permet de transfrer de faon fiable les mises jour de code entre Dreamweaver et les autres applications, en prservant par exemple les comportements de survol ou les liens vers d'autres fichiers. Dreamweaver fait galement appel aux Design Notes pour l'intgration des produits. Les Design Notes sont de petits fichiers permettant Dreamweaver de localiser le document source correspondant un fichier image ou un fichier SWF export. Lorsque vous exportez des fichiers de Fireworks, Flash ou Photoshop directement vers un site dfini par Dreamweaver, les Design Notes qui contiennent des rfrences au fichier de programmation PSD, PNG ou Flash (FLA) sont automatiquement exportes vers le site avec le fichier Web (format GIF, JPEG, PNG ou SWF). Outre les informations relatives l'emplacement, les Design Notes contiennent des informations pertinentes sur les fichiers exports. Lorsque vous exportez une table Fireworks, par exemple, Fireworks rdige une Design Note pour chaque fichier d'image export dans la table. Si le fichier export contient des zones ractives ou des effets de survol, les Design Notes contiennent des informations sur les scripts les concernant. Pendant l'exportation, Dreamweaver cre un dossier nomm _notes dans le mme dossier que l'actif export. Ce dossier contient les Design Notes ncessaires l'intgration de Dreamweaver avec Photoshop, Flash ou Fireworks. Remarque : Pour pouvoir utiliser les Design Notes, vous devez vous assurer qu'elles ne sont pas dsactives pour votre site Dreamweaver. Elles sont actives par dfaut. Toutefois, mme si elles sont dsactives, lorsque vous insrez un fichier d'image Photoshop, Dreamweaver cre une Design Note pour stocker l'emplacement du fichier PSD source. Vous trouverez un didacticiel consacr l'intgration de Dreamweaver et Fireworks l'adresse www.adobe.com/go/vid0188_fr. Vous trouverez un didacticiel consacr l'intgration de Dreamweaver et Photoshop l'adresse www.adobe.com/go/lrvid4043_dw_fr. Voir aussi Didacticiel sur Dreamweaver et InDesign
662
Extensions
Ajout et gestion d'extensions dans Dreamweaver
Ajout et gestion d'extensions dans Dreamweaver
Haut de la page
Les extensions sont de nouvelles fonctions, faciles intgrer dans Dreamweaver. Vous pouvez utiliser plusieurs types d'extensions ; il existe, par exemple, des extensions qui permettent de reformater des tableaux, d'crire des complments de scripts cot serveurs ou clients. Remarque : Pour installer des extensions accessibles tous les utilisateurs dans un systme d'exploitation multiutilisateur, vous devez disposer des droits Administrateur (Windows) ou root (Mac OS X). Pour rechercher les extensions les plus rcentes pour Dreamweaver, consultez le site Web d'Adobe Exchange, l'adresse suivante : www.adobe.com/go/dreamweaver_exchange_fr/. Sur ce site, vous pouvez vous connecter et tlcharger des extensions (un grand nombre d'entre elles sont gratuites), participer des forums de discussion, visualiser les rapports et analyses d'utilisateurs, ainsi qu'installer et exploiter Extension Manager. Vous devez installer Extension Manager avant de pouvoir tlcharger des extensions. Le logiciel Extension Manager est une application indpendante permettant d'installer et de grer les extensions dans les applications Adobe. Vous pouvez lancer Extension Manager partir de Dreamweaver en choisissant Commandes > Grer les extensions. 1. Sur le site Web Adobe Exchange, cliquez sur le lien de tlchargement de l'extension qui vous intresse. Votre navigateur vous permet peut-tre d'ouvrir et d'installer l'extension directement depuis le site ou de l'enregistrer sur votre disque. Si vous l'ouvrez directement, Extension Manager traite automatiquement l'installation. Si vous l'enregistrez sur votre disque, placez le fichier du logiciel d'extension (.mxp ou .mxi) dans le dossier des extensions tlcharges de l'application Dreamweaver sur votre ordinateur. 2. Double-cliquez sur le fichier du logiciel d'extension ou ouvrez Extension Manager et choisissez Fichier > Installer l'extension. (Certaines extensions ne sont accessibles qu'une fois que vous avez redmarr l'application. Remarque : Utilisez Extension Manager pour supprimer des extensions ou pour consulter des informations sur l'extension. Voir aussi
663
Importation de documents Microsoft Office (Windows uniquement)

Vous pouvez insrer le contenu d'un document Microsoft Word ou Excel dans une page Web nouvelle ou existante. Lorsque vous importez un document Word ou Excel, Dreamweaver reoit le code HTML converti et l'insre dans votre page Web. La taille du fichier, aprs rception du code HTML converti par Dreamweaver, doit tre infrieure 300 Ko. Au lieu d'importer tout le contenu d'un fichier, vous pouvez galement coller une partie du document Word et protger son formatage. Remarque : Si vous utilisez Microsoft Office 97, il n'est pas possible d'importer le contenu d'un document Word ou Excel. Vous devez insrer un lien vers le document. 1. Ouvrez la page Web dans laquelle vous souhaitez copier le document Word ou Excel. 2. En mode Cration, procdez de l'une des manires suivantes pour slectionner le fichier : Dplacez le fichier de son emplacement actuel vers la page o le contenu doit s'afficher. Choisissez Fichier > Importer > Document Word ou Fichier > Importer > Document Excel. 3. Dans la bote de dialogue Insrer un document, recherchez le fichier ajouter, slectionnez une option de formatage dans le menu Mise en forme situ dans le bas de la bote de dialogue, puis cliquez sur Ouvrir. Texte seul Permet d'insrer du texte non format. Si le texte d'origine est mis en forme, tout le formatage est supprim. Texte structur Permet d'insrer du texte en conservant sa structure, mais sans le formatage de base. Par exemple, vous pouvez coller un texte et conserver la structure des paragraphes, des listes et des tableaux, mais pas les mises en gras, italiques et autres formatages. Texte structur avec formatage de base Permet d'insrer du texte structur et du texte HTML avec une mise en forme simple (tel que des paragraphes et des tableaux, ainsi que du texte mis en forme avec les balisesb, i, u, strong, em, hr, abbr ou acronym tag). Texte structur avec formatage complet Permet d'insrer du texte en conservant toute sa structure, son formatage HTML et ses styles CSS. Nettoyage des espaces inter-paragraphes de Word Permet d'liminer les espaces superflus entre les paragraphes lorsque vous collez le texte alors que l'option Texte structur ou Mise en forme de base est slectionne. Le contenu du document Word ou Excel s'affiche dans votre page.
664

Gestion de sites Contribute Structure du site et conception de pages pour un site Contribute Transfert de fichiers depuis et vers un site Contribute Autorisations des fichiers et des dossiers Contribute sur le serveur Fichiers spciaux Contribute Prparation d'un site utiliser avec Contribute Administration d'un site Contribute avec Dreamweaver Suppression, dplacement ou modification du nom d'un fichier distant sur un site Contribute Activation de l'accs aux modles sans l'accs au dossier racine pour les utilisateurs de Contribute Dpannage d'un site Contribute
Haut de la page
Adobe Contribute CS4 regroupe les fonctions d'un navigateur Web et d'un diteur de pages Web. Il permet vos collgues ou clients de naviguer jusqu' une page d'un site que vous avez cr et de modifier ou de mettre jour cette page s'ils possdent les droits d'accs adquats. Les utilisateurs de Contribute peuvent ajouter et mettre jour du contenu Web de base, y compris du texte mis en forme, des images, des tableaux et des liens. Les administrateurs de sites Contribute peuvent limiter les actions que les utilisateurs ordinaires (non administrateurs) peuvent effectuer dans un site. Remarque : Cette section s'adresse aux administrateurs de Contribute. En tant qu'administrateur du site, vous donnez la possibilit aux personnes qui ne sont pas administrateurs de modifier des pages en crant et en leur envoyant une cl de connexion (pour plus d'informations sur la faon de procder, consultez l'aide de Contribute). Vous pouvez galement configurer une connexion un site Contribute l'aide de Dreamweaver qui vous permet, vous ou votre concepteur de site, de vous connecter au site Contribute et d'utiliser toutes les fonctions de modification disponibles dans Dreamweaver. Contribute ajoute des fonctionnalits votre site Web avec Contribute Publishing Server (CPS), une suite d'applications de publication et d'outils de gestion utilisateur qui vous permet d'intgrer Contribute au service d'annuaire utilisateur de votre organisation (Lightweight Directory Access Protocol (LDAP) ou Active Directory, par exemple). Lorsque vous activez votre site Dreamweaver en tant que site Contribute, Dreamweaver lit les paramtres d'administration de Contribute chaque fois que vous vous connectez au site distant. Si Dreamweaver dtecte que CPS est actif, il hrite de certaines fonctionnalits des services CPS (restauration des fichiers et consignation des vnements, par exemple). Vous pouvez utiliser Dreamweaver pour vous connecter un site Contribute et modifier un fichier de ce site. La plupart des options Dreamweaver fonctionnent avec un site Contribute de la mme faon qu'avec tout autre site. Toutefois, lorsque vous utilisez Dreamweaver avec un site Contribute, Dreamweaver effectue automatiquement certaines oprations de gestion de fichiers, telles que l'enregistrement de diffrentes versions d'un document et la consignation de certains vnements dans la console CPS. Pour plus d'informations, consultez l'aide de Contribute.
Structure du site et conception de pages pour un site Contribute
Haut de la page
Pour permettre aux utilisateurs de Contribute de modifier votre site Web, tenez compte des considrations suivantes lors de sa structuration : Utilisez une structure de site simple. Evitez de crer de nombreux niveaux de dossiers. Regroupez les lments associs dans un mme dossier. Dfinissez des droits en lecture et en criture appropris pour les dossiers sur le serveur. Ajoutez des pages d'index aux dossiers mesure que vous les crez pour inciter les utilisateurs de Contribute placer les nouvelles pages dans les dossiers appropris. Par exemple, si les utilisateurs de Contribute fournissent des pages contenant des comptes rendus de runions, vous pouvez crer un dossier dans le dossier racine du site appel comptes_rendus et y insrer une page d'index. Vous devez ensuite crer un lien qui renvoie la page d'index des comptes rendus sur la page principale du site. Un utilisateur de Contribute peut alors atteindre la page d'index et crer une page de procs-verbal pour une runion donne, dsigne par un lien depuis cette page. Dans chaque page d'index du dossier, fournissez une liste de liens vers chaque page et document contenus dans ce dossier. Utilisez des conceptions de pages simples en vitant des mises en forme fantaisistes. Utilisez CSS plutt que des balises HTML et attribuez un nom descriptif vos styles CSS. Si les utilisateurs de Contribute utilisent un jeu de styles standard dans Microsoft Word, attribuez vos styles CSS les mmes noms que ceux des styles Word correspondants, afin que Contribute puisse faire correspondre les styles lorsqu'un utilisateur copie des donnes d'un document Word et les colle dans une page Contribute.
665
Pour empcher les utilisateurs de Contribute d'utiliser un style CSS, modifiez le nom du style de sorte qu'il commence par mmhide_. Par exemple, si vous utilisez un style nomm Justification_droite dans une page mais que vous ne souhaitez pas que les utilisateurs de Contribute puissent utiliser ce style, renommez-le de la faon suivante : mmhide_Justification_droite. Remarque : Vous devez ajouter mmhide_ au nom du style en mode Code et non dans le panneau CSS. Dans un souci de simplicit, utilisez aussi peu de styles CSS que possible. Si vous utilisez des inclusions ct serveur pour des lments de pages HTML, par exemple des en-tte ou des pieds de page, crez une page HTML non lie contenant les liens vers les fichiers d'inclusion. Les utilisateurs de Contribute peuvent ensuite marquer cette page et l'utiliser pour rechercher les fichiers d'inclusion et les modifier.
Transfert de fichiers depuis et vers un site Contribute
Haut de la page
Contribute utilise un systme similaire au systme d'archivage et d'extraction de Dreamweaver afin qu'un seul utilisateur la fois puisse modifier une page Web donne. Lorsque vous activez la compatibilit avec Contribute dans Dreamweaver, le systme d'archivage et d'extraction de Dreamweaver est automatiquement activ. Pour transfrer des fichiers depuis et vers un site Contribute l'aide de Dreamweaver, utilisez toujours les commandes Archiver et Extraire. Si vous utilisez les commandes Placer et Acqurir pour transfrer les fichiers, vous risquez d'craser les dernires modifications apportes un fichier par un utilisateur de Contribute. Lorsque vous archivez un fichier dans un site Contribute, Dreamweaver effectue automatiquement une copie de sauvegarde de la version prcdemment archive du fichier dans le dossier _baks et ajoute votre nom d'utilisateur et la date un fichier Design Notes.
Autorisations des fichiers et des dossiers Contribute sur le serveur
Haut de la page
Contribute offre un moyen de grer les autorisations de fichiers et de dossiers pour chaque rle d'utilisateur que vous aurez dfini ; toutefois, Contribute ne permet pas de grer les autorisations de lecture et d'criture de base affectes aux fichiers et aux dossiers par le serveur. Dans Dreamweaver, vous pouvez grer ces autorisations directement sur le serveur. Si un utilisateur de Contribute ne dispose pas de droit d'accs en lecture sur le serveur pour un fichier dpendant, tel qu'une image affiche dans une page, le contenu de ce fichier ne s'affiche pas dans la fentre Contribute. Par exemple, si un utilisateur ne dispose pas de droit d'accs en lecture un dossier d'images, les images contenues dans ce dossier s'affichent sous la forme d'icnes d'image dchire dans Contribute. De mme, les modles Dreamweaver sont stocks dans un sous-dossier du dossier racine du site. Ainsi, si un utilisateur de Contribute ne dispose pas d'accs en lecture au dossier racine, il ne peut pas utiliser les modles de ce site, sauf si vous copiez les modles dans un dossier accessible. Lorsque vous dfinissez un site Dreamweaver, vous devez accorder aux utilisateurs des droits d'accs en lecture au dossier /_mm sur le serveur (sous-dossier _mm du dossier racine), ainsi qu'au dossier /Templates et tous les dossiers contenant des ressources dont ils auront besoin. Si pour une raison quelconque, vous ne pouvez pas accorder de droits d'accs en lecture au dossier /Templates, vous pouvez tout de mme rendre les modles accessibles aux utilisateurs de Contribute. Consultez la rubrique Activation de l'accs aux modles sans l'accs au dossier racine pour les utilisateurs de Contribute. Pour plus d'informations sur les autorisations Contribute, voir Administration de Contribute dans l'aide de Contribute.
Fichiers spciaux Contribute

Contribute utilise divers fichiers spciaux qui ne sont pas destins tre consults par les visiteurs du site :
Haut de la page
le fichier de paramtres partags, avec une extension CSI, qui s'affiche dans un dossier nomm _mm dans le dossier racine du site et contient des informations utilises par Contribute pour la gestion du site ; des versions prcdentes de fichiers, dans des dossiers nomms _baks ; des versions temporaires de pages, afin que les utilisateurs puissent afficher un aperu des modifications ; des fichiers de verrouillage temporaires, indiquant qu'une page spcifique est en cours de modification ou affiche en aperu ; des fichiers Design Notes contenant des mtadonnes relatives aux pages du site. En gnral, vous ne devez pas modifier ces fichiers spciaux dans Dreamweaver ; Dreamweaver les gre automatiquement. Si vous ne souhaitez pas que ces fichiers spciaux Contribute apparaissent sur votre serveur publiquement accessible, vous pouvez dfinir un serveur intermdiaire sur lequel les utilisateurs de Contribute pourront travailler sur les pages. Vous pouvez ensuite rgulirement copier ces pages Web du serveur intermdiaire au serveur de production qui se trouve sur le Web. Si vous utilisez un serveur intermdiaire, copiez uniquement les pages Web sur le serveur de production. Ne copiez aucun des fichiers spciaux Contribute mentionns ci-dessus. En particulier, ne copiez pas les dossiers _mm et _baks sur le serveur de production. Remarque : Pour plus d'informations sur la configuration d'un serveur afin d'viter que les visiteurs ne voient les fichiers des dossiers commenant par un soulign, consultez le chapitre traitant de la scurit des sites Web dans l'aide de Contribute.
666
Parfois, vous devrez supprimer manuellement d'autres fichiers spciaux Contribute. Par exemple, si Contribute n'arrive pas supprimer des pages temporaires d'aperu, une fois l'aperu ferm par l'utilisateur, vous devez supprimer ces pages temporaires manuellement. Le nom de fichier des pages temporaires d'aperu commence par TMP. De mme, un fichier de verrouillage obsolte peut accidentellement rester sur le serveur. Dans ce cas, vous devez le supprimer manuellement pour que les autres utilisateurs puissent modifier la page.
Prparation d'un site utiliser avec Contribute
Haut de la page
Si vous prparez un site Dreamweaver existant pour les utilisateurs de Contribute, vous devez activer la compatibilit avec Contribute de faon explicite afin d'utiliser les fonctions relatives Contribute ; Dreamweaver n'affiche pas de message vous invitant le faire ; toutefois, lorsque vous vous connectez un site qui a t configur en tant que site Contribute (avec un administrateur), Dreamweaver vous invite activer la compatibilit avec Contribute. Tous les types de connexion ne prennent pas en charge la compatibilit avec Contribute. Les restrictions suivantes s'appliquent aux types de connexion : Si vous vous connectez votre site distant l'aide de WebDAV, vous ne pouvez pas activer la compatibilit avec Contribute, car ces systmes de commande source ne sont pas compatibles avec les systmes Design Notes et les systmes d'archivage et d'extraction que Dreamweaver utilise pour les sites Contribute. Si vous utilisez RDS pour vous connecter votre site distant, vous pouvez activer la compatibilit avec Contribute, mais vous devez ensuite personnaliser votre connexion avant de pouvoir la partager avec des utilisateurs de Contribute. Si vous utilisez votre ordinateur local comme serveur Web, vous devez dfinir le site l'aide d'une connexion FTP ou rseau (au lieu d'un simple chemin de dossier local) pour pouvoir partager votre connexion avec des utilisateurs de Contribute. Lorsque vous activez la compatibilit avec Contribute, Dreamweaver active automatiquement Design Notes (y compris l'option Tlcharger les Design Notes pour les partager), ainsi que le systme d'archivage et d'extraction de fichiers. Si Contribute Publishing Server (CPS) est actif sur le site distant auquel vous vous connectez, Dreamweaver notifie CPS ds que vous excutez une opration rseau, telle que l'archivage, la restauration ou la publication d'un fichier. Le CPS conserve une trace de ces vnements, que vous pouvez afficher dans la console d'administration CPS. (Si vous dsactivez CPS, ces vnements ne sont pas consigns.) L'activation de CPS s'effectue via Contribute. Pour plus d'informations, consultez l'aide d'Adobe Contribute. Remarque : Vous pouvez rendre un site compatible avec Contribute sans que Contribute soit install sur votre ordinateur. Toutefois, si vous souhaitez dmarrer Contribute Administrator partir de Dreamweaver, Contribute doit tre install sur le mme ordinateur que Dreamweaver et vous devez tre connect au site distant avant d'activer la compatibilit avec Contribute. Dans le cas contraire, Dreamweaver ne peut pas lire les paramtres d'administration de Contribute pour dterminer si les services CPS et l'option de restauration sont activs. Important : Vous devez vous assurer que le fichier de paramtres partags (fichier CSI) que Contribute emploie pour administrer le site se trouve bien sur le serveur distant et n'est pas endommag. Contribute cre automatiquement ce fichier (et crase ses anciennes versions) ds que vous effectuez des tches d'administration dans Contribute Administrator. Si le fichier de paramtres partags ne se trouve pas sur le serveur, ou s'il est endommag, Dreamweaver vous informe que le fichier requis pour la compatibilit avec Contribute n'existe pas sur le serveur ds que vous tentez une opration rseau (comme un placement). Pour vous assurer que le fichier correct se trouve bien sur le serveur, dsactivez la connexion au serveur dans Dreamweaver, dmarrez Contribute Administrator, apportez une modification administrative, puis reconnectez-vous au serveur dans Dreamweaver. Pour plus d'informations, consultez l'aide d'Adobe Contribute. 1. Choisissez Site > Grer les sites. 2. Slectionnez un site, puis cliquez sur Modifier. 3. Dans la bote de dialogue Configuration du site, dveloppez Paramtres avancs, slectionnez la catgorie Contribute, puis activez l'option Activer la compatibilit avec Contribute. 4. Si une bote de dialogue s'affiche indiquant que vous devez activer Design Notes et la fonction Archiver/Extraire, cliquez sur OK. 5. Si vous n'avez pas dj fourni les informations de contact pour la fonction Archiver/Extraire, entrez votre nom et votre adresse lectronique dans la bote de dialogue, puis cliquez sur OK. L'tat de la restauration, l'tat des services CPS, la zone de texte URL de la racine du site et le bouton Administrer le site dans Contribute apparaissent dans la bote de dialogue Dfinition du site. Si la restauration est active dans Contribute, vous pouvez restaurer les versions prcdentes des fichiers que vous avez modifis dans Dreamweaver. 6. Vrifiez l'URL qui s'affiche dans la zone de texte URL de la racine du site et modifiez-la le cas chant. Dreamweaver construit une URL de la racine du site en fonction des informations de dfinition de site que vous avez fournies, mais il se peut que l'URL construite ne soit pas tout fait correcte. 7. Cliquez sur le bouton Tester pour vrifier si l'URL que vous avez saisie est correcte. Remarque : Si vous tes prt envoyer une cl de connexion ou effectuer les tches d'administration du site Contribute, ignorez les tapes restantes. 8. Cliquez sur Administrer le site dans Contribute si vous voulez apporter des modifications administratives. N'oubliez pas que Contribute doit tre install sur le mme ordinateur si vous voulez ouvrir Contribute Administrator partir de Dreamweaver.
667
9. Cliquez sur Enregistrer puis sur Termin.
Administration d'un site Contribute avec Dreamweaver
Haut de la page
Aprs avoir activ la compatibilit avec Contribute, vous pouvez utiliser Dreamweaver pour lancer Contribute afin d'effectuer les tches d'administration du site. Remarque : Contribute doit tre install sur le mme ordinateur que Dreamweaver. En tant qu'administrateur d'un site Contribute, vous pouvez : modifier les paramtres administratifs au niveau du site ; Les paramtres administratifs de Contribute rassemblent les paramtres qui s'appliquent l'ensemble des utilisateurs de votre site Web. Ces paramtres permettent de configurer Contribute avec prcision pour bnficier d'une meilleure exprience utilisateur. modifier les autorisations accordes aux rles utilisateur de Contribute ; dfinir les utilisateurs de Contribute. Les utilisateurs de Contribute ncessitent certaines informations sur le site pour pouvoir s'y connecter. Vous pouvez regrouper toutes ces informations dans un fichier, appel cl de connexion, que vous envoyez aux utilisateurs de Contribute. Remarque : Une cl de connexion ne correspond pas un fichier de site export de Dreamweaver Avant de donner aux utilisateurs de Contribute les informations de connexion dont ils ont besoin pour modifier les pages, utilisez Dreamweaver pour crer la hirarchie de dossiers de base de votre site, ainsi que les modles et les feuilles de style CSS ncessaires au site. 1. Choisissez Site > Grer les sites. 2. Slectionnez un site, puis cliquez sur Modifier. 3. Dans la bote de dialogue Configuration du site, dveloppez Paramtres avancs, puis slectionnez la catgorie Contribute. 4. Cliquez sur le bouton Administrer le site dans Contribute. Remarque : Ce bouton s'affiche uniquement si vous avez activ la compatibilit avec Contribute. 5. Si ncessaire, tapez le mot de passe administrateur, puis cliquez sur OK. La bote de dialogue Administration du site Web s'affiche. Pour modifier les paramtres administratifs, slectionnez une catgorie dans la liste de gauche, puis modifiez les paramtres en fonction des besoins. Pour modifier les paramtres de rle, dans la catgorie Utilisateurs et rles, cliquez sur Modifier les paramtres de rle, puis apportez les modifications ncessaires. Pour envoyer une cl de connexion afin de dfinir les utilisateurs, dans la catgorie Utilisateurs et rles, cliquez sur Envoyer la cl de connexion, puis renseignez l'Assistant de connexion. 6. Cliquez sur Fermer, cliquez sur OK, puis sur Termin. Pour plus d'informations sur les paramtres administratifs, la gestion des rles utilisateur ou la cration d'une cl de connexion, voir l'aide de Contribute.
Suppression, dplacement ou modification du nom d'un fichier distant sur un site Contribute
Haut de la page
Pour supprimer un fichier d'un serveur distant qui hberge un site Contribute, procdez de la mme faon que pour supprimer un fichier sur le serveur de tout site Dreamweaver. Toutefois, lorsque vous supprimez un fichier d'un site Contribute, Dreamweaver vous demande si vous souhaitez supprimer toutes les anciennes versions du fichier. Si vous dcidez de les conserver, Dreamweaver enregistre une copie de la version actuelle dans le dossier _baks afin que vous puissiez la restaurer ultrieurement. Pour modifier le nom d'un fichier distant ou dplacer le fichier d'un dossier un autre dans un site Contribute, procdez de la mme faon que sur tout site Dreamweaver. Dans un site Contribute, Dreamweaver renomme ou dplace galement les anciennes versions du fichier associes qui sont enregistres dans le dossier _baks. 1. Slectionnez le fichier dans le volet distant du panneau Fichiers (Fentre > Fichiers) et appuyez sur Retour arrire (Windows) ou Arrire (Macintosh). Une bote de dialogue s'affiche vous demandant de confirmer la suppression du fichier. 2. Dans la bote de dialogue de confirmation : Pour supprimer toutes les versions prcdentes du fichier ainsi que la version actuelle, slectionnez l'option Supprimer les versions de restauration. Pour conserver les anciennes versions sur le serveur, dslectionnez l'option Supprimer les versions de restauration. 3. Cliquez sur Oui pour supprimer le fichier.
668
Activation de l'accs aux modles sans l'accs au dossier racine pour les utilisateurs de Contribute
Haut de la page
Dans un site Contribute, les autorisations de fichiers et de dossiers de base sont gres directement sur le serveur. Si pour des raisons de scurit, vous ne pouvez pas accorder de droits d'accs en lecture au dossier /Templates, vous pouvez tout de mme rendre les modles accessibles aux utilisateurs. 1. Dfinissez le site Contribute afin que le dossier racine soit le dossier qui s'affiche en tant que racine pour les utilisateurs. 2. Copiez manuellement le dossier de modles du dossier racine du site principal dans le dossier racine du site Contribute, l'aide du panneau Fichiers. 3. Aprs avoir modifi le site principal, recopiez les modles modifis dans les sous-dossiers appropris. Si vous faites appel cette mthode, n'utilisez pas de liens relatifs la racine du site dans les sous-dossiers. Les liens relatifs la racine du site sont associs au dossier racine principal du serveur, et non au dossier racine dfini dans Dreamweaver. Les utilisateurs de Contribute ne peuvent pas crer de liens relatifs la racine du site. Si les liens d'une page Contribute apparaissent rompus, il peut s'agir d'un problme d'autorisations pour le dossier, en particulier si les liens renvoient des pages qui ne se trouvent pas dans le dossier racine de l'utilisateur de Contribute. Vrifiez les autorisations de lecture et d'criture pour les dossiers sur le serveur.
Dpannage d'un site Contribute
Haut de la page
Si un fichier distant d'un site Contribute semble avoir t extrait, mais qu'il n'est pas rellement verrouill sur l'ordinateur de l'utilisateur, vous pouvez dverrouiller le fichier afin de permettre aux utilisateurs de le modifier. Lorsque vous cliquez sur un bouton li l'administration d'un site Contribute, Dreamweaver vrifie qu'il peut se connecter au site distant et que l'URL de la racine du site indique pour le site est valide. Si Dreamweaver ne peut pas se connecter ou si l'URL n'est pas valide, un message d'erreur s'affiche. Si les outils d'administration ne fonctionnent pas correctement, cela peut tre d au dossier _mm .
Dverrouillage d'un fichier dans un site Contribute

Remarque : Avant de suivre cette procdure, assurez-vous que le fichier n'est pas extrait. Si vous dverrouillez un fichier pendant qu'un utilisateur de Contribute le modifie, plusieurs utilisateurs risquent de modifier ce fichier en mme temps. 1. Effectuez l'une des oprations suivantes : Ouvrez le fichier dans la fentre Document, puis choisissez Site > Annuler extraction. Dans le panneau Fichiers (Fentre > Fichiers), cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis slectionnez Annuler extraction. Une bote de dialogue peut s'afficher, qui indique l'utilisateur ayant extrait le fichier et demande de confirmer le dverrouillage du fichier. 2. Si cette bote de dialogue s'affiche, cliquez sur Oui pour confirmer. Le fichier est dverrouill sur le serveur.
Dpannage des problmes de connexion pour un site Contribute

1. Vrifiez l'URL de la racine du site dans la catgorie Contribute de la bote de dialogue Dfinition de site en ouvrant cette URL dans un navigateur, pour vous assurer qu'elle ouvre la bonne page. 2. Cliquez sur le bouton Tester dans la catgorie Infos distantes de la bote de dialogue Dfinition du site pour vous assurer que vous pouvez vous connecter au site. 3. Si l'URL est correcte mais qu'un message d'erreur s'affiche lorsque vous effectuez un test, contactez votre administrateur systme pour obtenir de l'aide.
Dpannage des outils administratifs de Contribute

1. Sur le serveur, assurez-vous que vous disposez des autorisations de lecture et d'criture, voire d'excution, pour le dossier _mm. 2. Vrifiez que le dossier _mm contient un fichier de paramtres partags portant l'extension CSI. 3. Si ce n'est pas le cas, utilisez l'Assistant de connexion pour crer une connexion au site et devenir administrateur du site. Le fichier de paramtres partags est cr automatiquement lorsque vous devenez administrateur. Pour plus d'informations sur la faon de devenir administrateur d'un site Web Contribute existant, consultez la section Administration de Contribute dans l'aide de Contribute. Voir aussi Importation et exportation des paramtres d'un site Dreamweaver
669

670
Utilisation de Dreamweaver avec les services en ligne Adobe

BrowserLab Business Catalyst InContext Editing Les services en ligne Adobe sont des applications Web hberges qui s'utilisent comme des outils de bureau traditionnels. Nanmoins, le principal avantage des services en ligne est qu'ils sont toujours actualiss, car ils sont hbergs sur le Web et non sur votre ordinateur. Dreamweaver s'intgre directement Adobe BrowserLab et Adobe Business Catalyst InContext Editing. Vous trouverez des informations sur l'utilisation de ces services dans les sections Aide qui suivent. Dreamweaver s'intgre galement aux services en ligne Adobe CS Live (qui comprennent BrowserLab). Pour plus d'informations sur l'utilisation de CS Live, voir Utilisation d'Adobe CS Live. Pour plus d'informations sur la gestion des services en ligne Adobe, voir le site Web d'Adobe l'adresse suivante : www.adobe.com/go/learn_creativeservices_fr.
BrowserLab
Haut de la page
Adobe BrowserLab lets you preview local web content from within Dreamweaver, without requiring you to post it to a publicly-accessible server first. You can preview files from your local Dreamweaver site, or from a remote or testing server. For information about using the BrowserLab online service, including information about using BrowserLab with Dreamweaver, see www.adobe.com/go/lr_abl_en.
Business Catalyst InContext Editing

Business Catalyst InContext Editing
Haut de la page
Adobe Business Catalyst InContext Editing est un composant d'dition d'Adobe Business Catalyst qui permet aux utilisateurs d'apporter des modifications de contenu simples dans un navigateur Web. Pour modifier une page Web, il suffit l'utilisateur d'accder celle-ci, de se connecter au InContext Editing et d'apporter les modifications dsires. Les options d'dition sont simples et lgantes; leur utilisation n'exige aucune connaissance pralable du code HTML ou de l'dition Web. Avant d'autoriser des utilisateurs apporter des modifications en direct sur le Web, toutefois, vous allez utiliser Dreamweaver pour rendre vos pages HTML modifiables. Pour ce faire, dfinissez des rgions, sur la page, dont vous autoriserez la modification par les utilisateurs. Par exemple, supposons que vous ayez dfini une page d'actualit reprenant des titres et des notices qui annoncent les articles. Vous pouvez slectionner ce contenu et le transformer en rgion modifiable InContext Editing, de sorte que quand un utilisateur se connecte au InContext Editing, il puisse modifier directement les titres et les notices dans son navigateur. Dans cette , vous apprendrez comment utiliser les rgions modifiables InContext Editing dans Dreamweaver. Toutefois, Adobe fournit galement d'autres ressources qui vous aideront travailler dans InContext Editing : Pour obtenir de la documentation sur l'emploi d'InContext Editing pour modifier des pages dans un navigateur, consultez la page www.adobe.com/go/learn_dw_incontextediting_browser_fr. Pour obtenir de la documentation sur l'utilisation du panneau Administration d'InContext Editing, consultez la page www.adobe.com/go/learn_dw_incontextediting_administration_guide_fr. Pour plus d'informations sur Adobe Business Catalyst, visitez le site www.businesscatalyst.com. Remarque : Adobe AIR n'est pas compatible avec Adobe Business Catalyst InContext Editing. Si vous utilisez l'extension AIR pour Dreamweaver afin d'exporter une application contenant des rgions InContext Editing, la fonctionnalit InContext Editing ne fonctionnera pas.
Cration d'une rgion modifiable InContext Editing

Une rgion modifiable InContext Editing est une paire de balises HTML dont la balise d'ouverture contient l'attribut ice:editable. La rgion modifiable dfinit une zone de la page qu'un utilisateur peut modifier directement dans un navigateur. Remarque : Si vous ajoutez une rgion modifiable InContext Editing une page base sur un modle Dreamweaver, la nouvelle rgion modifiable InContext Editing doit se trouver l'intrieur d'une rgion qui est dj modifiable. 1. Effectuez l'une des oprations suivantes : Slectionnez une balise div, th ou td que vous voulez transformer en rgion modifiable. Placez le point d'insertion o vous voulez insrer une nouvelle rgion modifiable sur la page.
671
Slectionnez prcisment une rgion modifiable dans un modle Dreamweaver (fichier DWT). Slectionnez tout autre contenu de la page que vous voulez rendre modifiable (par exemple un bloc de texte). 2. Choisissez Insertion > InContext Editing > Crer une rgion modifiable. 3. Les options votre disposition varient en fonction de votre slection. Si vous avez slectionn une balise div, th ou td, Dreamweaver la transforme en rgion modifiable sans autres oprations. Si vous insrez une nouvelle rgion modifiable vierge, effectuez l'une des actions suivantes : Choisissez Insrer une nouvelle rgion modifiable au point d'insertion actuel, puis cliquez sur OK. Dreamweaver insre une balise div dans votre code, en ajoutant l'attribut ice:editable la balise d'ouverture. Choisissez Transformer la balise parente en rgion modifiable si vous voulez que Dreamweaver fasse de la balise parente de la slection le conteneur de la rgion. Seules certaines balises HTML sont transformables : div, th et td. Remarque : Cette seconde option n'est disponible que lorsque le nud parent rpond prcisment aux critres de transformation. Par exemple, il doit s'agit d'une des balises transformables indiques, et elle ne doit pas tre confronte l'une des erreurs rpertories dans la section Messages d'erreur d'InContext Editing. Si vous avez slectionn une rgion modifiable d'un modle Dreamweaver, cliquez sur OK dans la bote de dialogue Crer une rgion modifiable. Dreamweaver entoure la rgion modifiable du modle d'une balise div qui fait office de conteneur pour la nouvelle rgion modifiable InContext Editing. Si vous avez slectionn un autre contenu rendre modifiable, effectuez l'une des oprations suivantes : Choisissez Entourer la slection actuelle d'une balise DIV puis la transformer si vous voulez entourer votre slection d'une balise div puis la transformer en rgion modifiable. La balise div dont Dreamweaver entoure le contenu fait office de conteneur pour la rgion modifiable. Remarque : L'ajout de balises div aux pages peut modifier le rendu de ces pages et les effets des rgles CSS. Par exemple, si une rgle CSS applique un cadre rouge autour des balises div, vous verrez un cadre rouge autour de votre slection actuelle lorsque Dreamweaver l'entoure d'une balise div et la transforme. Pour viter ce type de conflit, vous pouvez rcrire les rgles CSS qui influent sur la slection actuelle, ou annuler la transformation (Edition > Annuler), puis slectionner et transformer une balise compatible que Dreamweaver ne doit pas entourer d'une balise div. Choisissez Transformer la balise parente en rgion modifiable si vous voulez que Dreamweaver fasse de la balise parente de la slection le conteneur de la rgion modifiable. Seules certaines balises HTML sont transformables : div, th et td. 4. En mode Cration, cliquez sur l'onglet bleu de la rgion modifiable afin de la slectionner, si ce n'est pas dj fait. Remarque : Si vous travaillez dans un modle Dreamweaver, veillez slectionner la rgion modifiable InContext Editing (la rgion conteneur), et pas la rgion modifiable du modle Dreamweaver. 5. Activez ou dsactivez des options dans l'inspecteur Proprits Rgion modifiable. Ces options seront accessibles aux utilisateurs qui modifieront le contenu de la rgion modifiable dans un navigateur. Par exemple, si vous choisissez l'option Gras, l'utilisateur pourra mettre le texte en gras. Si vous choisissez Liste numrote et Liste puces, l'utilisateur pourra crer des listes numrotes et des listes puces. Si vous choisissez Liens, l'utilisateur pourra crer des liens, et ainsi de suite. Laissez le pointeur de la souris au-dessus d'une option pour afficher une infobulle qui explique sa fonction. 6. Enregistrez la page. Si c'est la premire fois que vous ajoutez la fonctionnalit InContext Editing une page, Dreamweaver vous informe qu'il ajoute des fichiers de support InContext Editing votre site: ice.conf.js, ice.js et ide.html. N'oubliez pas de charger ces fichiers sur le serveur lors de l'envoi de la page, faute de quoi la fonctionnalit InContext Editing ne sera pas utilisable dans un navigateur.
Cration d'une rgion rpte InContext Editing

Une rgion rpte InContext Editing est une paire de balises HTML dont la balise d'ouverture contient l'attribut ice:repeating. La rgion rpte dfinit une zone de la page qu'un utilisateur peut rpter et laquelle il peut ajouter du contenu lorsqu'il la modifie dans un navigateur. Par exemple, si vous avez dfini un titre suivi d'un paragraphe, vous pouvez transformer ces lments en une rgion rpte, que l'utilisateur pourra ensuite dupliquer sur la page.
672
Rgions rptes affiches dans une fentre de navigateur InContext Editing modifiable. La rgion infrieure est slectionne et peut tre nouveau duplique, supprime ou dplace vers le haut ou vers le bas. L'utilisateur peut ajouter des rgions rptes bases sur la rgion d'origine, mais vous pouvez aussi lui laisser la possibilit d'en supprimer, d'ajouter des rgions tout fait indites (non bases sur le contenu de la rgion d'origine) et d'en dplacer vers le haut ou vers le bas. Lorsque vous crez une rgion rpte, Dreamweaver l'entoure d'un autre conteneur, baptis groupe de rgions rptes . Ce conteneur (une balise div dont la balise d'ouverture comprend l'attribut ice:repeatinggroup) fait office de conteneur de toutes les rgions rptes modifiables qu'un utilisateur peut ajouter au groupe. Il est impossible de dplacer des rgions rptes en dehors de leurs conteneurs de groupes de rgions rptes. Il est en outre dconseill d'ajouter manuellement des balises de groupes de rgions rptes votre page. Dreamweaver les ajoute automatiquement en cas de besoin. Remarque : Lorsque vous crez une rgion rpte partir d'une ligne de tableau (tr tag), Dreamweaver applique l'attribut du groupe de rgions rptes la balise parente (par exemple, la balise table) et n'insre pas de balise div. Si vous travaillez sur une page contenant dj un groupe de rgions rptes et que vous tentez d'ajouter une rgion rpte juste aprs le groupe existant, Dreamweaver dtecte qu'un groupe de rgions rptes prcde la rgion que vous voulez ajouter, et vous donne la possibilit d'ajouter la nouvelle rgion au groupe existant. Vous pouvez dcider d'ajouter la nouvelle rgion rpte au groupe existant ou de crer un nouveau groupe de rgions rptes. Remarque : Si vous ajoutez une rgion rpte InContext Editing une page base sur un modle Dreamweaver, la nouvelle rgion rpte InContext Editing doit se trouver l'intrieur d'une rgion qui est dj modifiable. Pour crer une rgion rpte dans Dreamweaver, procdez comme suit : 1. Effectuez l'une des oprations suivantes : Slectionnez la balise que vous voulez transformer en rgion rpte. Vous pouvez choisir de nombreuses balises : a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul, ou encore var. Remarque : Seules les balises div peuvent possder simultanment l'attribut de rgion modifiable et l'attribut de rgion rpte. Placez le point d'insertion o vous voulez insrer une nouvelle rgion rpte sur la page. Slectionnez prcisment une rgion rpte dans un modle Dreamweaver (fichier DWT). Slectionnez tout autre contenu de la page que vous voulez rendre rpte (par exemple un bloc de texte). 2. Choisissez Insertion > InContext Editing > Crer une rgion rpte. 3. Les options votre disposition varient en fonction de votre slection. Si vous avez slectionn une balise transformable, Dreamweaver la transforme en rgion rpte sans autres oprations. Si vous insrez une nouvelle rgion rpte vierge, effectuez l'une des actions suivantes : Choisissez Insrer une nouvelle rgion rpte au point d'insertion actuel puis cliquez sur OK. Choisissez Transformer la balise parente en rgion rpte si vous voulez que Dreamweaver fasse de la balise parente de la slection le conteneur de la rgion. Seules certaines balises HTML sont transformables : a, abbr, acronym, address, b, big,
673
blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul et var. Remarque : Cette seconde option n'est disponible que lorsque le nud parent rpond prcisment aux critres de transformation. Par exemple, il doit s'agit d'une des balises transformables indiques, et elle ne doit pas tre confronte l'une des erreurs rpertories dans la section Messages d'erreur d'InContext Editing. Si vous avez slectionn une rgion rpte d'un modle Dreamweaver, cliquez sur OK dans la bote de dialogue Crer une rgion rpte. Dreamweaver entoure la rgion rpte du modle d'une balise div qui fait office de conteneur pour la nouvelle rgion rpte InContext Editing. Si vous avez slectionn un autre contenu rendre rptable, effectuez l'une des oprations suivantes : Choisissez Entourer la slection actuelle d'une balise DIV puis la transformer si vous voulez entourer votre slection d'une balise div puis la transformer en rgion rpte. La balise div dont Dreamweaver entoure le contenu fait office de conteneur pour la rgion rpte. Choisissez Transformer la balise parente en rgion rpte si vous voulez que Dreamweaver fasse de la balise parente de la slection le conteneur de la rgion rpte. Seules certaines balises HTML sont transformables : a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul et var. 4. En mode Cration, cliquez sur l'onglet bleu de la rgion rpte afin de la slectionner, si ce n'est pas dj fait. Notez que Dreamweaver vous force en fait slectionner l'onglet du groupe de rgions rptes. En effet, toutes les rgions rptes existent dans un groupe de rgions rptes, et vous devez dfinir les options de ces rgions pour le groupe tout entier. 5. Activez ou dsactivez des options dans l'inspecteur Proprits Groupe de rgions rptes. Deux options sont disponibles : Rorganiser et Ajouter/Supprimer. Si vous activez Rorganiser, les utilisateurs pourront dplacer les rgions rptes vers le haut ou vers le bas lorsqu'ils y apporteront des modifications dans un navigateur. Si vous activez Ajouter/Supprimer, les utilisateurs pourront ajouter ou supprimer des rgions rptes. Les deux options sont actives par dfaut, et une des deux doit toujours tre active. 6. Enregistrez la page. Si c'est la premire fois que vous ajoutez la fonctionnalit InContext Editing une page, Dreamweaver vous informe qu'il ajoute des fichiers de support InContext Editing votre site: ice.conf.js, ice.js et ide.html. N'oubliez pas de charger ces fichiers sur le serveur lors de l'envoi de la page, faute de quoi la fonctionnalit InContext Editing ne sera pas utilisable dans un navigateur.
Suppression d'une rgion

La meilleure faon de supprimer une rgion consiste utiliser son inspecteur Proprits. Vous tes ainsi assur de supprimer tout le code associ la rgion. 1. Slectionnez une rgion modifiable, une rgion rpte ou un groupe de rgions rptes. 2. Dans l'inspecteur Proprits de la rgion, cliquez sur le bouton Supprimer la rgion.
Dfinition de classes CSS pour le formatage

La fonctionnalit Gestion des classes CSS disponibles d'InContext Editing est obsolte depuis Dreamweaver CS5.
Messages d'erreur d'InContext Editing

Impossible d'appliquer InContext Editing aux balises contenant des balises de script ou des blocs de code ct serveur. Si votre slection contient du code ct serveur, Dreamweaver ne vous autorise pas la transformer en rgion modifiable ou rpte. Ce problme est li la manire dont InContext Editing enregistre les pages modifiables lorsque l'utilisateur travaille dans le navigateur. Lorsqu'un utilisateur enregistre la page aprs l'avoir modifie, InContext Editing supprime le code ct serveur de la rgion. La slection actuelle ne peut pas tre transforme ou entoure d'une balise DIV, car le nud parent n'autorise pas DIV comme balise enfant. Lorsqu'il est impossible de transformer directement la slection que vous voulez transformer sur votre page, Dreamweaver doit entourer cette slection de balises div qui feront office de conteneur pour votre nouvelle rgion modifiable ou rpte. C'est la raison pour laquelle les balises parentes de ce que vous voulez transformer doivent accepter les balises div comme enfants. Si la balise parente de la balise que vous tentez de transformer n'accepte pas les balises div enfants, Dreamweaver ne vous autorise pas excuter la transformation. La slection actuelle contient dj une rgion modifiable ou se trouve l'intrieur d'une telle rgion. Les rgions modifiables imbriques ne sont pas autorises. Si votre slection se trouve dans une rgion modifiable, ou si une rgion modifiable se trouve l'intrieur de la slection, Dreamweaver ne vous autorise pas excuter la transformation. InContext Editing ne prend pas en charge les rgions modifiables imbriques.
674
Les rgions modifiables ne doivent pas contenir de rgions rptes ou de groupes de rgions rptes. Les rgions modifiables InContext Editing ne peuvent pas contenir d'autres fonctionnalits InContext Editing. Si vous tentez d'ajouter une rgion rpte ou un groupe de rgions rptes une rgion modifiable, Dreamweaver ne vous autorise pas excuter la transformation. Les rgions rptes ne doivent pas se trouver dans des rgions modifiables ou contenir des groupes de rgions rptes. Les rgions modifiables InContext Editing ne peuvent pas contenir d'autres fonctionnalits InContext Editing. Si vous tentez d'ajouter une rgion rpte ou un groupe de rgions rptes une rgion modifiable, Dreamweaver ne vous autorise pas excuter la transformation. En outre, Dreamweaver ne transforme pas un lment en rgion modifiable ou rpte s'il contient dj un groupe de rgions rptes. La slection actuelle contient dj une rgion rpte ou se trouve l'intrieur d'une telle rgion. Les rgions rptes imbriques ne sont pas autorises. Si votre slection se trouve dans une rgion rpte, ou si une rgion rpte se trouve l'intrieur de la slection, Dreamweaver ne vous autorise pas excuter la transformation. InContext Editing ne prend pas en charge les rgions rptes imbriques. La slection doit contenir prcisment une rgion modifiable/rpte de modle Dreamweaver ou se trouver dans n'importe quelle rgion modifiable/rpte de modle Dreamweaver. Lorsque vous travaillez avec des fichiers de modle Dreamweaver (fichiers .dwt), vous devez respecter certaines rgles. Pour transformer une rgion modifiable/rpte d'un modle en une rgion modifiable/rpte InContext Editing, vous devez slectionner prcisment une rgion modifiable/rpte Dreamweaver sur la page puis la transformer. Pour transformer une autre slection sur la page (par exemple un bloc de texte), la slection doit se trouver l'intrieur d'une rgion modifiable de modle Dreamweaver. Les fonctionnalits Rgion modifiable et Rgion rpte ne peuvent tre appliques simultanment qu'aux balises DIV. Si votre slection n'est pas une balise div, et si un attribut de rgion rpte lui est dj appliqu, Dreamweaver ne vous autorisera pas lui appliquer galement l'attribut de rgion modifiable. Seules les balises div peuvent possder simultanment l'attribut de rgion modifiable et l'attribut de rgion rpte. Dreamweaver a dtect qu'une balise de groupe de rgions rptes prcdait la rgion rpte. Toutes les rgions rptes InContext Editing doivent se trouve dans un groupe de rgions rptes. Lorsque vous ajoutez une nouvelle rgion rpte une page, Dreamweaver dtecte si elle est dj prcde par un groupe de rgions rptes. Si c'est le cas, Dreamweaver vous propose d'ajouter la nouvelle rgion rpte au groupe existant ou de crer un nouveau groupe de rgions rptes qui contiendra la nouvelle rgion.
675
Utilisation d'Adobe Bridge et Dreamweaver

A propos d'Adobe Bridge Dmarrage d'Adobe Bridge depuis Dreamweaver Placement de fichiers dans Dreamweaver depuis Adobe Bridge Placement d'un fichier Adobe Bridge sur votre page Insertion d'un fichier Bridge sur votre page par glisser-dplacer Dmarrage de Dreamweaver depuis Adobe Bridge
A propos d'Adobe Bridge
Haut de la page
Dreamweaver fournit une intgration en toute transparence avec Adobe Bridge, le navigateur de fichiers inter-plates-formes fourni avec les composants d'Adobe Creative Suite 5. Adobe Bridge permet de retrouver, d'organiser et de parcourir les actifs dont vous avez besoin pour crer des contenus d'impression, Web, vido et mobiles. Vous pouvez dmarrer Adobe Bridge partir de tout composant de Creative Suite (sauf Acrobat 9) et l'employer pour accder des actifs de type Adobe et non Adobe. A partir d'Adobe Bridge, vous pouvez : Prvisualiser, rechercher, trier et traiter des fichiers sans ouvrir d'applications spcifiques de Creative Suite. Vous pouvez galement modifier des mtadonnes de fichiers et utiliser Adobe Bridge pour importer des fichiers dans vos documents, vos projets et vos compositions. Importer et modifier des photos depuis la carte mmoire d'un appareil photo numrique, regrouper des photos apparentes dans des piles, ainsi qu'ouvrir et modifier des fichiers RAW d'appareil photo sans devoir dmarrer Photoshop. Excution de tches automatises, comme les commandes par lots Synchroniser les paramtres de couleur entre les composants de la suite Creative Suite, auxquels est applique la gestion des couleurs.
Dmarrage d'Adobe Bridge depuis Dreamweaver
Haut de la page
Vous pouvez dmarrer Adobe Bridge partir de Dreamweaver afin de visualiser vos fichiers avant de les placer ou de les faire glisser dans votre page. Vous pouvez dmarrer Adobe Bridge de diffrentes faons : Choisissez Fichier > Parcourir dans Bridge. Cliquez sur l'icne Parcourir dans Bridge de la barre d'outils standard. Utilisez le raccourci clavier Parcourir dans Bridge : appuyez sur Ctrl+Alt+O (Windows) ou Commande+Option+O (Macintosh). Adobe Bridge s'affiche en mode Gestionnaire de fichiers et prsente le contenu du dossier ouvert le plus rcemment dans Dreamweaver. Si Adobe Bridge tait dj ouvert, sa fentre devient la fentre active. Remarque : Adobe Bridge est uniquement install avec Dreamweaver CS5 lorsque vous installez Creative Suite CS5. Il n'est pas inclus avec la version autonome de Dreamweaver CS5. Toutefois, Adobe Bridge tait inclus si vous avez install auparavant Dreamweaver CS3 ou CS4. Par consquent, si vous avez toujours l'exemplaire d'Adobe Bridge install partir de ces versions, Dreamweaver CS5 peut y accder et l'utiliser.
Haut de la page
Placement de fichiers dans Dreamweaver depuis Adobe Bridge
Vous pouvez insrer des fichiers dans des pages Dreamweaver en les insrant ou en les dposant d'Adobe Bridge sur votre page. Pour que vous puissiez utiliser cette fonctionnalit, le document Dreamweaver dans lequel vous voulez insrer le fichier doit tre ouvert et se trouver en mode Cration. Vous pouvez insrer la plupart des types de fichiers dans vos pages, mais Dreamweaver les traite diffremment : Si vous insrez une image Web (JPEG, GIF ou PNG)), Dreamweaver insre directement les fichiers d'image dans la page et en place une copie dans le dossier des images par dfaut de votre site. Si vous insrez un fichier PSD Photoshop, vous devez dfinir ses paramtres d'optimisation avant que Dreamweaver puisse le placer sur votre page. Si vous insrez un fichier non graphique, comme un fichier MP3, PDF ou un fichier d'un type inconnu, Dreamweaver insre un lien vers le fichier source. Si vous insrez un fichier HTML, Dreamweaver insre un lien vers le fichier source.
676
(Windows uniquement) Si Microsoft Office est install et si vous insrez un fichier Microsoft Word ou Excel file, vous devez indiquer si vous voulez insrer le fichier proprement dit ou un lien vers le fichier source. Si vous voulez insrer le fichier, vous pouvez indiquer quelle proportion de formatage vous voulez conserver.
Placement d'un fichier Adobe Bridge sur votre page

2. Dans Adobe Bridge, slectionnez le fichier puis choisissez Fichier > Placer dans Dreamweaver. 3. Si le fichier ne se trouve pas dans le dossier racine du site, vous tes invit l'y copier.
Haut de la page
1. Dans Dreamweaver (mode Cration ou Code), placez le point d'insertion sur la page, l'endroit o vous voulez insrer le fichier.
4. Si vous avez configur les prfrences (Edition > Prfrences > Accessibilit) de manire afficher les attributs lors de l'insertion d'images, la bote de dialogue Attributs d'accessibilit aux balises d'image s'affiche quand vous insrez des images Web dans un format tel que JPEG ou GIF. Remarque : Si le point d'insertion se trouve en mode Code, Adobe Bridge dmarre normalement mais est incapable de placer le fichier. Vous pouvez uniquement placer des fichiers en mode Cration.
Haut de la page
Insertion d'un fichier Bridge sur votre page par glisser-dplacer

2. Si Adobe Bridge n'est pas dj ouvert, dmarrez-le. 3. Dans Adobe Bridge, slectionnez un ou plusieurs fichiers et faites-les glisser dans votre page Dreamweaver. 4. Si un fichier ne se trouve pas dans le dossier racine du site, vous tes invit l'y copier.
1. Dans Dreamweaver (mode Cration ou Code), placez le point d'insertion sur la page, l'endroit o vous voulez insrer l'image.
5. Si vous avez configur les prfrences (Edition > Prfrences > Accessibilit) de manire afficher les attributs lors de l'insertion d'images, la bote de dialogue Attributs d'accessibilit aux balises d'image s'affiche quand vous insrez des images Web dans un format tel que JPEG ou GIF. Remarque : Si le point d'insertion se trouve en mode Code, Adobe Bridge dmarre normalement mais est incapable de placer le fichier. Vous pouvez uniquement placer des fichiers en mode Cration.
Haut de la page
Dmarrage de Dreamweaver depuis Adobe Bridge

Slectionnez un fichier dans Adobe Bridge et effectuez l'une des oprations suivantes : Choisissez Fichier > Ouvrir avec > Adobe Dreamweaver.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis choisissez Ouvrir avec > Adobe Dreamweaverdans le menu contextuel. Remarque : Si Dreamweaver est dj ouvert, cette action rend le programme actif. Si Dreamweaver n'est pas ouvert, Adobe Bridge le dmarre en ignorant l'cran d'accueil. Voir aussi Creative Suite 5 - Bridge Cration d'un objet dynamique
677
Utilisation de ConnectNow et Dreamweaver

Utilisation de ConnectNow
Utilisation de ConnectNow
Haut de la page
Adobe ConnectNow met votre disposition une salle de runion en ligne scurise et personnelle, o vous pouvez rencontrer dautres personnes et collaborer avec elles sur le Web en temps rel. Grce ConnectNow, vous pouvez partager et annoter votre cran dordinateur, envoyer des messages instantans et communiquer laide de la fonction audio intgre. Vous pouvez galement diffuser des vidos en temps rel, partager des fichiers, capturer des comptes rendus et contrler lordinateur dun participant. Vous pouvez accder ConnectNow directement partir de linterface de lapplication. 1. Choisissez la commande Fichier > Partager mon cran. 2. Dans la bote de dialogue Se connecter Adobe CS Live, entrez votre adresse de messagerie lectronique et votre mot de passe, puis cliquez sur le bouton Se connecter. Si vous ne disposez pas dun ID Adobe, cliquez sur le bouton Crer un ID Adobe. 3. Pour partager votre cran, cliquez sur le bouton Partager lcran de mon ordinateur, au centre de la fentre de lapplication ConnectNow. Pour obtenir des instructions compltes sur lutilisation de ConnectNow, consultez laide dAdobe ConnectNow. Pour accder au didacticiel vido sur l'utilisation de ConnectNow, consultez la page Web Using ConnectNow to share your screen (7:12) (cette prsentation est effectue dans Dreamweaver).
678
Utilisation de Device Central et Dreamweaver

Utilisation d'Adobe Device Central avec Dreamweaver Prvisualisation d'un contenu mobile avec Adobe Device Central et Dreamweaver Conseils pour la cration de contenu Web Dreamweaver pour les priphriques mobiles
Utilisation d'Adobe Device Central avec Dreamweaver
Haut de la page
Device Central permet aux concepteurs et dveloppeurs Web travaillant sur Dreamweaver de prvisualiser des fichiers Dreamweaver sur de nombreux priphriques mobiles. Device Central utilise la fonction Small-Screen Rendering d'Opera pour permettre aux concepteurs et aux dveloppeurs de voir quoi ressemblera leur page Web sur un petit cran. Les concepteurs et les dveloppeurs peuvent aussi tester le comportement de leurs fichiers en format CSS. Par exemple, un dveloppeur Web peut travailler pour un client qui veut que le site Web soit disponible sur les tlphones portables. Le dveloppeur Web peut utiliser Dreamweaver pour crer des pages prliminaires et Device Central pour tester l'affichage de ces pages sur diffrents priphriques.
Prvisualisation d'un contenu mobile avec Adobe Device Central et Dreamweaver
Haut de la page
Pour prvisualiser des pages cres dans Dreamweaver sur diffrents priphriques mobiles, utilisez Device Central avec sa fonction intgre Small-Screen Rendering d'Opera. Des navigateurs diffrents sont installs sur les diffrents priphriques, mais la prvisualisation peut vous donner un bon aperu du contenu et de son comportement sur un priphrique donn. 1. Lancez Dreamweaver. 2. Ouverture d'un fichier. 3. Effectuez l'une des oprations suivantes : Slectionnez Fichier > Aperu dans le navigateur > Device Central. Dans la barre d'outils de la fentre du document, cliquez et maintenez enfonc le bouton du navigateur Aperu/dbogage dans le navigateur et slectionnez Aperu dans Device Central.
Le fichier est affich dans l'onglet Emulateur de Device Central. Pour poursuivre le test, cliquez deux fois sur le nom d'un autre priphrique dans les listes Ensembles de priphriques ou Priphriques disponibles.
Conseils pour la cration de contenu Web Dreamweaver pour les priphriques mobiles
Haut de la page
Device Central permet dafficher des pages Web cres dans Dreamweaver laide de la fonction Small-Screen Rendering dOpera. Cette prvisualisation peut vous donner une trs bonne ide de ce quoi ressemblera une page Web sur un priphrique mobile. Remarque : la fonction Small-Screen Rendering dOpera peut tre ou ne pas tre pr-installe pour les priphriques virtuels. Device Central donne simplement un aperu de ce quoi ressemblerait le contenu si la fonction Small-Screen Rendering dOpera tait installe. Suivez les conseils ci-dessous pour vous assurer que les pages Web cres dans Dreamweaver saffichent correctement sur les priphriques mobiles. Si vous utilisez la structure Adobe Spry pour dvelopper un contenu, ajoutez la ligne HTML suivante vos pages afin quelles saffichent en CSS et excutent les fonctions JavaScript correctement dans Device Central : <link href="SpryAccordion.css" media="screen" rel="stylesheet" type="text/css"/> <link href="SpryAccordion2.css" media="handheld" rel="stylesheet" type="text/css"/> La fonction Small-Screen Rendering dOpera ne prend pas en charge les cadres, les listes droulantes, les soulignements, les caractres barrs, les lgendes, les clignotements ni les rectangles de slection. Essayez dviter de dessiner ces lments. Faites que les pages Web pour priphriques mobiles restent simples. En particulier, utilisez un nombre limit de polices, tailles et couleurs de polices. La rduction de la taille des images et la rduction du nombre de couleurs permettent daugmenter les chances que les images ressemblent ce qui tait prvu. Utilisez les formats CSS ou HTML pour spcifier la largeur et la hauteur exactes pour chaque image utilise. Indiquez du texte de remplacement pour toutes les images. Remarque : vous trouverez de trs nombreuses informations sur loptimisation des pages Web pour les priphriques mobiles sur le site Web du logiciel Opera.
679
Pour dautres conseils et de plus amples informations sur les techniques de cration de contenu pour les tlphones et priphriques mobiles, visitez le site www.adobe.com/go/learn_cs_mobilewiki_fr. Voir aussi Aide d'Adobe Device Central
680
Utilisation de Fireworks et Dreamweaver

Insertion d'une image Fireworks Modification d'une image ou d'un tableau Fireworks dans Dreamweaver Optimisation d'une image Fireworks depuis Dreamweaver Utilisation de Fireworks pour modifier les espaces rservs pour les images Dreamweaver A propos des menus contextuels de Fireworks Modification des menus contextuels de Fireworks dans Dreamweaver Modification d'un menu contextuel cr dans Fireworks MX 2004 ou une version plus ancienne Dfinition des prfrences de lancement et de modification des fichiers source Fireworks Insertion de code HTML Fireworks dans un document Dreamweaver Collage de code HTML Fireworks dans Dreamweaver Mise jour du code HTML Fireworks plac dans Dreamweaver Cration d'un album photos pour le Web
Insertion d'une image Fireworks
Haut de la page
Dreamweaver et Fireworks reconnaissent et partagent de nombreuses procdures de modifications apportes aux fichiers, parmi lesquelles celles apportes aux liens, aux cartes graphiques, aux dcoupes de tables et bien plus. Runies, les deux applications rationalisent les tches de dveloppement consistant modifier, optimiser et importer des fichiers graphiques Web dans des pages HTML. Vous pouvez placer une image exporte avec Fireworks directement dans un document Dreamweaver l'aide de la commande Image (menu Insertion) ou vous pouvez crer une image Fireworks partir d'un espace rserv pour l'image Dreamweaver. 1. Dans le document Dreamweaver, placez le point d'insertion l'emplacement o vous souhaitez insrer l'image, puis procdez de l'une des manires suivantes : Choisissez Insertion > Image. Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Image ou faites-le glisser vers le document. 2. Recherchez le fichier Fireworks export et cliquez sur OK (Windows) ou Ouvrir (Macintosh). Remarque : Si le fichier Fireworks ne se trouve pas dans le site courant de Dreamweaver, un message vous demande si vous souhaitez copier le fichier dans le dossier racine. Cliquez sur Oui.
Modification d'une image ou d'un tableau Fireworks dans Dreamweaver
Haut de la page
Quand vous ouvrez ou ditez une image ou une dcoupe d'image faisant partie d'une table Fireworks, Dreamweaver lance Fireworks, ce qui ouvre le fichier PNG partir duquel l'image ou la table a t exporte. Remarque : Ce principe suppose que Fireworks soit dfini comme diteur d'image externe principal pour les fichiers PNG. Par ailleurs, Fireworks est souvent dfini comme diteur par dfaut pour les fichiers JPEG et GIF, bien qu'il puisse tre utile de dfinir Photoshop comme diteur par dfaut pour ces types de fichiers. Lorsque l'image fait partie d'une table Fireworks, vous pouvez ouvrir la table entire en vue de la modifier, pour autant que le commentaire  figure dans le code HTML. Si le fichier PNG source a t export partir de Fireworks vers un site Dreamweaver l'aide du paramtre Document HTML et image du style Dreamweaver, le commentaire de la table Fireworks est automatiquement insr dans le code HTML. 1. Dans Dreamweaver, ouvrez l'inspecteur Proprits (Fentre > Proprits), s'il n'est pas dj ouvert. 2. Cliquez sur une image ou une dcoupe d'image pour la slectionner. Lorsque vous slectionnez une image exporte depuis Fireworks, l'inspecteur Proprits identifie la slection comme image ou table Fireworks et affiche le nom du fichier source PNG. 3. Pour lancer Fireworks afin d'apporter des modifications, procdez de l'une des manires suivantes : Dans l'inspecteur Proprits, cliquez sur Modifier. Maintenez enfonce la touche Ctrl (Windows) ou Commande (Macintosh) et double-cliquez sur l'image slectionne. Cliquez sur l'image slectionne avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) et choisissez Modifier avec Fireworks dans le menu contextuel. Remarque : Si Fireworks ne trouve pas le fichier source, un message vous invite le faire. Lorsque vous travaillez dans le fichier source Fireworks, les modifications sont enregistres dans le fichier source et le fichier export, sinon seul le fichier export est mis jour.
681
4. Dans Fireworks, modifiez le fichier PNG source puis cliquez sur Termin. Fireworks enregistre les modifications dans le fichier PNG, exporte l'image mise jour (ou le document HTML et les images) et active de nouveau Dreamweaver. Dans Dreamweaver, l'image ou la table mise jour apparat. Vous trouverez un didacticiel consacr l'intgration de Dreamweaver et Fireworks l'adresse www.adobe.com/go/vid0188_fr.
Optimisation d'une image Fireworks depuis Dreamweaver
Haut de la page
Dreamweaver permet de modifier rapidement une image ou une animation Fireworks. Depuis Dreamweaver, vous pouvez modifier les paramtres d'optimisation et d'animation, ainsi que la taille et la zone de l'image exporte. 1. Dans Dreamweaver, slectionnez l'image dsire puis effectuez l'une des oprations suivantes : Choisissez Commande > Optimiser l'image. Cliquez sur le bouton de modification des paramtres de l'image dans l'inspecteur Proprits. 2. Apportez les modifications dans la bote de dialogue Aperu de l'image. Pour modifier les paramtres d'optimisation, cliquez sur l'onglet Options. Pour modifier la taille et la zone de l'image exporte, cliquez sur l'onglet Fichier. 3. Une fois termin, cliquez sur OK.
Utilisation de Fireworks pour modifier les espaces rservs pour les images Dreamweaver
Haut de la page
Vous pouvez crer un espace rserv dans un document Dreamweaver, puis lancer Fireworks pour crer une image graphique ou une table Fireworks y placer. Pour crer une image partir d'un espace rserv, Dreamweaver et Fireworks doivent tre installs sur votre systme. 1. Veillez ce que Fireworks soit dfini comme diteur d'image des fichiers PNG. 2. Dans la fentre de document, cliquez sur l'espace rserv pour l'image afin de le slectionner. 3. Dmarrez Fireworks en mode Modification depuis Dreamweaver en utilisant l'une des mthodes suivantes : Dans l'inspecteur Proprits, cliquez sur Crer. Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh), puis double-cliquez sur l'espace rserv pour l'image. Cliquez sur l'espace rserv pour l'image avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonce (Macintosh), puis slectionnez Crer une image dans Fireworks. 4. Utilisez les options de Fireworks pour crer l'image. Fireworks reconnat les paramtres suivants d'espace rserv pour l'image, qui sont dfinis lors de son utilisation dans Dreamweaver : la taille de l'image (qui correspond la taille de la zone de travail Fireworks), l'ID de l'image (utilis par Fireworks comme nom de document par dfaut pour le fichier source et le fichier d'exportation cr) et l'alignement du texte. Fireworks reconnat galement les liens et certains comportements (permutation d'image, menu contextuel et texte notamment) que vous avez associs l'espace rserv pour l'image lorsque vous travaillez dans Dreamweaver. Remarque : Bien que les liens ajouts un espace rserv pour l'image soient invisibles dans Fireworks, ils sont conservs. Si vous dessinez une zone ractive et que vous ajoutez un lien dans Fireworks, le programme ne supprimera pas le lien ajout l'espace rserv pour l'image dans Dreamweaver. Toutefois, si dans Fireworks vous dessinez une dcoupe dans la nouvelle image, le lien sera supprim du document Dreamweaver lors du remplacement de l'espace rserv pour l'image. Fireworks ne reconnat pas les paramtres suivants d'espace rserv pour l'image : alignement de l'image, couleur, espacement vertical et horizontal et cartes. Ils sont dsactivs dans l'inspecteur Proprits de l'espace rserv pour l'image. 5. Au terme de votre travail, cliquez sur Termin afin d'afficher l'invite d'enregistrement. 6. Dans la zone de texte Enregistrer dans, slectionnez le dossier dfini comme dossier du site local Dreamweaver. Si vous avez attribu un nom l'espace rserv lors de son insertion dans le document Dreamweaver, Fireworks insre automatiquement ce nom dans la zone de texte Nom de fichier. Vous pouvez modifier le nom. 7. Cliquez sur Enregistrer pour enregistrer le fichier PNG. La bote de dialogue Exporter s'affiche. Cette bote de dialogue vous permet d'exporter l'image au format GIF, JPEG ou, dans le cas d'images dcoupes, sous la forme de documents HTML et d'images. 8. Dans la zone Enregistrer dans, slectionnez le dossier du site local Dreamweaver. La zone de texte Nom affiche automatiquement le nom dsignant le fichier PNG. Vous pouvez modifier le nom. 9. Dans la zone Enregistrer sous le type, slectionnez le type de fichier(s) exporter, par exemple Images uniquement ou Documents HTML et images.
682
10. Cliquez sur Enregistrer pour enregistrer le fichier export. Le fichier est enregistr et Dreamweaver est nouveau actif. Dans le document Dreamweaver, le fichier export ou la table Fireworks remplace l'espace rserv pour l'image.
A propos des menus contextuels de Fireworks

Fireworks permet de crer facilement et rapidement des menus contextuels de type CSS.
Haut de la page
Les menus contextuels crs avec Fireworks sont non seulement plus extensibles et plus rapides tlcharger, mais encore prsentent les avantages suivants : Les lments de menu peuvent tre indexs par les moteurs de recherche. Les lments de menu peuvent tre lus par des lecteurs d'cran, ce qui rend vos pages plus accessibles. Le code gnr par Fireworks est aux normes et peut tre valid. Vous pouvez modifier les menus contextuels Fireworks avec Dreamweaver ou Fireworks, mais pas les deux. Les modifications apportes dans Dreamweaver ne sont pas conserves dans Fireworks.
Modification des menus contextuels de Fireworks dans Dreamweaver
Haut de la page
Vous pouvez crer un menu contextuel dans Fireworks 8, ou une version plus rcente, puis le modifier avec Dreamweaver ou Fireworks ( l'aide de l'dition Roundtrip), mais pas les deux. Si vous modifiez vos menus dans Dreamweaver, puis dans Fireworks, vous perdez toutes les modifications prcdentes, l'exception du texte. Si vous prfrez modifier vos menus avec Dreamweaver, vous pouvez utiliser Fireworks pour crer le menu contextuel, puis Dreamweaver de faon exclusive pour modifier le menu et le personnaliser. Si vous prfrez modifier les menus dans Fireworks, vous pouvez utiliser la fonctionnalit d'dition Roundtrip de Dreamweaver, mais vous ne devez pas modifier les menus directement dans Dreamweaver. 1. Dans Dreamweaver, slectionnez le tableau Fireworks contenant le menu contextuel, puis cliquez sur Modifier dans l'inspecteur Proprits. Le fichier PNG source s'ouvre dans Fireworks. 2. Dans Fireworks, modifiez ce menu avec l'diteur correspondant, puis cliquez sur Termin dans la barre d'outils de Fireworks. Fireworks renvoie le menu modifi Dreamweaver. Si vous avez cr un menu contextuel dans Fireworks MX 2004 ou une version plus ancienne, vous pouvez le modifier dans Dreamweaver avec la bote de dialogue Afficher le menu contextuel, disponible partir du panneau Comportements.
Modification d'un menu contextuel cr dans Fireworks MX 2004 ou une version plus ancienne
1. Dans Dreamweaver, slectionnez la zone ractive ou l'image qui dclenche le menu contextuel. 2. Dans le panneau Comportements (Maj+F3), double-cliquez sur Afficher le menu contextuel dans la liste Actions. 3. Apportez vos modifications dans la bote de dialogue Menu contextuel puis cliquez sur OK.
Haut de la page
Dfinition des prfrences de lancement et de modification des fichiers source Fireworks
Haut de la page
Lorsque vous modifiez des images dans Fireworks, les images places dans vos pages Web sont normalement exportes par Fireworks depuis un fichier source PNG. Lorsque vous ouvrez une image dans Dreamweaver pour la modifier, Fireworks ouvre automatiquement le fichier PNG source, vous invitant prciser l'emplacement du fichier PNG si celui-ci ne peut pas tre localis. Vous pouvez rgler vos prfrences sous Fireworks afin que Dreamweaver ouvre l'image insre, moins que vous ne prfriez que Fireworks vous offre la possibilit d'utiliser le fichier d'image insre ou le fichier source Fireworks chaque fois que vous ouvrez une image sous Dreamweaver. Remarque : Dreamweaver ne reconnat ces prfrences que dans certains cas. Par exemple, vous devez lancer et optimiser les images qui ne font pas partie d'une table Fireworks et dont le chemin Design Notes vers un fichier PNG source est correct. 1. Dans Fireworks, choisissez Edition > Prfrences (Windows) ou Fireworks > Prfrences (Macintosh) et cliquez sur l'onglet Lancer et Modifier (Windows) ou choisissez Lancer et Modifier dans le menu droulant (Macintosh). 2. Indiquez les prfrences applicables lors de la modification ou de l'optimisation d'images Fireworks places dans une application externe : Toujours utiliser le fichier PNG source Permet de lancer automatiquement le fichier PNG Fireworks dfini dans la Design Note comme fichier source de l'image place. Les mises jour sont appliques au fichier PNG source et l'image place correspondante. Ne jamais utiliser le fichier PNG source Permet de lancer automatiquement l'image Fireworks place, qu'il existe ou non un fichier PNG source. Les mises jour sont appliques l'image place uniquement.
683
Demander lors du lancement Affiche un message vous demandant si le fichier PNG source doit tre ouvert. Vous pouvez galement dterminer les prfrences globales de la fonction de lancement et d'dition dans cette fentre d'invite.
Insertion de code HTML Fireworks dans un document Dreamweaver
Haut de la page
Dans Fireworks, la commande Exporter vous permet d'exporter et d'enregistrer des images optimises et des fichiers HTML dans le dossier du site Dreamweaver de votre choix. Vous pouvez ensuite insrer le fichier dans Dreamweaver. Dreamweaver permet d'insrer dans un document du code HTML gnr par Fireworks, intgrant des images, des dcoupes et du code JavaScript. 1. Dans le document Dreamweaver, placez le point d'insertion l o vous voulez insrer le code HTML Fireworks. 2. Effectuez l'une des oprations suivantes : Choisissez Insertion > Objets image > HTML Fireworks. Dans la catgorie Commun du panneau Insertion, cliquez sur le bouton Images et choisissez Insrer HTML Fireworks dans le menu. 3. Cliquez sur Parcourir pour slectionner un fichier HTML Fireworks. 4. Si le fichier n'est plus ncessaire par la suite, activez l'option Supprimer fichier aprs insertion. Cette option n'a aucun effet sur le fichier PNG source associ au fichier HTML. Remarque : Si le fichier HTML se trouve sur un lecteur rseau, il est dfinitivement supprim (il n'est pas plac dans la corbeille). 5. Cliquez sur OK pour insrer le code HTML, ainsi que les images associes, les dcoupes et le code JavaScript dans le document Dreamweaver.
Collage de code HTML Fireworks dans Dreamweaver
Haut de la page
Pour placer rapidement dans Dreamweaver des images et tables gnres dans Fireworks, copiez et collez directement le code HTML Fireworks dans un document Dreamweaver.
Copie et collage de code HTML Fireworks dans Dreamweaver

1. Dans Fireworks, choisissez Edition > Copier le code HTML. 2. Suivez les instructions de l'assistant qui vous aide effectuer la procdure d'exportation de votre code HTML et des images. Quand vous y tes invit, indiquez le dossier du site Dreamweaver comme destination des images exportes. L'assistant exporte les images l'endroit indiqu et copie le code HTML dans le Presse-papiers. 3. Dans le document Dreamweaver, placez le point d'insertion l'endroit du document o vous souhaitez coller le code HTML, puis choisissez Edition > Coller code HTML Fireworks. Le code HTML et JavaScript associ aux fichiers Fireworks exports est copi dans le document Dreamweaver et tous les liens vers les images sont mis jour.
Exportation et collage de code HTML Fireworks dans Dreamweaver

1. Dans Fireworks, choisissez Fichier > Exporter. 2. Quand vous y tes invit, indiquez le dossier du site Dreamweaver comme destination des images exportes. 3. Dans le menu droulant Exporter, choisissez Documents HTML et Images. 4. Dans le menu droulant HTML, choisissez Copier dans le Presse-papiers, puis cliquez sur Exporter. 5. Dans le document Dreamweaver, placez le point d'insertion l'endroit du document o vous souhaitez coller le code HTML export, puis choisissez Edition > Coller code HTML Fireworks. Le code HTML et JavaScript associ aux fichiers Fireworks exports est copi dans le document Dreamweaver et tous les liens vers les images sont mis jour.
Mise jour du code HTML Fireworks plac dans Dreamweaver
Haut de la page
Outre la technique de lancement et de modification dcrite ci-dessus, vous pouvez faire appel la commande Fichier > Mettre jour le code HTML pour mettre jour des fichiers Fireworks placs 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 exports placs dans un document Dreamweaver. Grce cette commande, vous pouvez mettre jour les fichiers Dreamweaver mme si Dreamweaver est inactif. 1. Dans Fireworks, ouvrez le fichier PNG source puis apportez les modifications dsires. 2. Choisissez Fichier > Enregistrer. 3. Dans Fireworks, choisissez Fichier > Mettre jour le code HTML. 4. Recherchez le fichier Dreamweaver qui contient le code HTML mettre jour, puis cliquez sur Ouvrir. 5. Recherchez le dossier dans lequel placer les fichiers d'image mis jour et cliquez sur Slectionner (Windows) ou Choisir (Macintosh).
684
Fireworks met jour le code HTML et JavaScript du document Dreamweaver. Fireworks exporte galement les images mises jour associes 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'insrer du nouveau code HTML dans le document Dreamweaver. Fireworks insre la section JavaScript du nouveau code au dbut du document et place la table HTML ou le lien vers l'image la fin du document.
Cration d'un album photos pour le Web

La fonctionnalit Crer un album photos pour le Web a t abandonne partir de Dreamweaver CS5. Voir aussi Utilisation d'un diteur d'image externe Didacticiel sur Dreamweaver et Fireworks Dfinition des options de la bote de dialogue Aperu de l'image
Haut de la page
685
Utilisation de Flash et Dreamweaver

Modification dun fichier SWF depuis Dreamweaver dans Flash
Modification dun fichier SWF depuis Dreamweaver dans Flash
Haut de la page
Si Flash et Dreamweaver sont installs, vous pouvez slectionner un fichier SWF dans un document Dreamweaver et utiliser Flash pour le modifier. Flash ne modifie pas directement le fichier SWF : il modifie le document source (fichier FLA), puis exporte nouveau le fichier SWF. 1. Dans Dreamweaver, ouvrez linspecteur des proprits (Fentre > Proprits). 2. Dans le document Dreamweaver, utilisez lune des mthodes suivantes : Cliquez sur lespace rserv du fichier SWF pour le slectionner, puis sur Modifier dans linspecteur des proprits. Cliquez sur lespace rserv du fichier SWF avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) et choisissez Modifier avec Flash dans le menu contextuel. Dreamweaver passe sur Flash, qui tente son tour de localiser le fichier de programmation Flash (FLA) correspondant au fichier SWF slectionn. Si Flash ne peut pas localiser le fichier de programmation Flash, un message vous invite le faire. Remarque : si le fichier FLA ou le fichier SWF est verrouill, extrayez le fichier dans Dreamweaver. 3. Dans Flash, modifiez le fichier FLA. La fentre Document Flash indique que vous tes en train de modifier le fichier partir de Dreamweaver. 4. Une fois les modifications effectues, cliquez sur Termin. Flash met jour le fichier FLA, le rexporte en tant que fichier SWF, se ferme et retourne sur le document Dreamweaver. Remarque : pour mettre le fichier SWF jour et garder Flash ouvert, choisissez la commande Flash Fichier > Mettre jour dans Dreamweaver. 5. Pour afficher le fichier mis jour dans le document, cliquez sur le bouton Lecture dans linspecteur des proprits de Dreamweaver ou appuyez sur la touche F12 pour afficher un aperu de votre page dans une fentre de navigateur.
686
JavaScript
687
Application de comportements JavaScript intgrs

Utilisation des comportements intgrs Application du comportement Appel JavaScript Application du comportement Changer la proprit Application du comportement Vrifier le navigateur Application du comportement Vrifier le plug-in Application du comportement Contrler Shockwave ou SWF Application du comportement Tirer l'lment PA Collecte d'informations sur l'lment PA dplaable Application du comportement Atteindre l'URL Application du comportement Menu de reroutage Application du comportement Menu de reroutage Aller Application du comportement Ouvrir la fentre Navigateur Application du comportement Lire le son Application du comportement Message contextuel Application du comportement Prcharger les images Application du comportement Dfinir image barre de navigation Application du comportement Texte d'un cadre Application du comportement Texte du conteneur Application du comportement Dfinir le texte de la barre d'tat Application du comportement Texte d'un champ de texte Application du comportement Afficher-Masquer les lments Application du comportement Afficher le menu contextuel Ajout, suppression et rorganisation d'lments de menu contextuel Mise en forme d'un menu contextuel Positionnement d'un menu contextuel dans un document Modification d'un menu contextuel Application du comportement Permuter une image Application du comportement Valider le formulaire
Utilisation des comportements intgrs
Haut de la page
Les comportements inclus dans Dreamweaver ont t conus pour fonctionner dans les navigateurs modernes. Les comportements chouent dans les navigateurs plus anciens, sans que l'utilisateur en soit inform. Remarque : Les actions Dreamweaver ont t rdiges avec soin afin de fonctionner avec le plus grand nombre possible de navigateurs. Si vous supprimez manuellement le code d'une action Dreamweaver ou si vous le remplacez par votre propre code, vous risquez de perdre la compatibilit inter-navigateurs. Bien que les actions Dreamweaver aient t rdiges pour augmenter la compatibilit inter-navigateurs, certains navigateurs ne prennent pas du tout en charge JavaScript et de nombreuses personnes dsactivent JavaScript sur leur navigateur lorsqu'ils explorent la Toile. Pour optimiser les rsultats inter-plates-formes, fournissez d'autres interfaces contenues dans des balises <noscript> afin que votre site reste accessible aux personnes qui n'utilisent pas JavaScript.
Application du comportement Appel JavaScript
Haut de la page
Le comportement Appel JavaScript excute une fonction ou une ligne de code JavaScript personnalise lorsqu'un vnement se produit (vous pouvez rdiger le script vous-mme, ou utiliser le code fourni gratuitement dans le cadre de plusieurs bibliothques de JavaScript sur Internet). 1. Slectionnez un objet et choisissez Appel JavaScript dans le menu Ajouter un comportement du panneau Comportements. 2. Tapez le code JavaScript excuter ou le nom de la fonction. Par exemple, pour crer 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, hGoBack()). 3. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Changer la proprit
Haut de la page
688
Utilisez le comportement Changer la proprit pour modifier la valeur d'une des proprits d'un objet (par exemple, la couleur d'arrire-plan d'une balise div ou l'action d'un formulaire). Remarque : N'utilisez ce comportement que si vous tes expert en HTML et en JavaScript. 1. Slectionnez un objet et choisissez Changer la proprit dans le menu Ajouter un comportement du panneau Comportements. 2. Dans le menu Type d'lment, slectionnez un type d'lment pour afficher tous les lments nomms de ce type. 3. Slectionnez un lment dans le menu ID d'lment. 4. Choisissez une proprit dans le menu Proprit ou tapez le nom de la proprit dans la zone de texte. 5. Entrez la nouvelle valeur pour la nouvelle proprit dans la zone Nouvelle valeur. 6. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Vrifier le navigateur

Haut de la page
Application du comportement Vrifier le plug-in
Haut de la page
Utilisez le comportement Vrifier le plug-in pour envoyer les visiteurs sur des pages diffrentes selon que le plug-in spcifi est install ou non. Par exemple, vous pouvez rerouter les visiteurs sur une page s'ils possdent Shockwave, et sur une autre dans le cas contraire. Remarque : Il est impossible de dtecter des plug-ins spcifiques dans Microsoft Internet Explorer (IE) l'aide de JavaScript. Toutefois, si vous slectionnez les plug-ins Flash ou Director, le code VBScript appropri sera automatiquement ajout votre page pour les dtecter dans Internet Explorer sous Windows. Il est impossible de dtecter les plug-ins dans Internet Explorer sur Mac OS. 1. Slectionnez un objet et choisissez Vrifier le plug-in dans le menu Ajouter un comportement du panneau Comportements. 2. Slectionnez un plug-in dans le menu Plug-in, ou cliquez sur Entre et tapez le nom exact du plug-in dans la zone de texte adjacente. Vous devez utiliser le nom exact du plug-in, tel qu'il apparat en gras sur la page A propos des plug-ins dans Netscape Navigator (Dans Windows, choisissez la commande Aide > A propos des plug-ins dans le navigateur. Dans Mac OS, choisissez A propos des plug-ins dans le menu Pomme). 3. Dans la zone de texte Si trouv, aller l'URL, spcifiez l'URL destine aux utilisateurs qui disposent du plug-in. Si vous indiquez une URL distante, vous devez faire prcder l'adresse www du prfixe http://. Si vous ne renseignez pas la zone, les visiteurs resteront dans la mme page. 4. Dans la zone de texte Sinon, aller l'URL, indiquez une autre URL pour les visiteurs qui ne disposent pas du plug-in. Si vous ne renseignez pas la zone, les visiteurs resteront dans la mme page. 5. Spcifiez la procdure suivre si la dtection de plug-in n'est pas possible. Par dfaut, lorsque la dtection est impossible, l'utilisateur est envoy l'URL indique dans la zone de texte Sinon. Pour que l'utilisateur soit envoy vers la premire URL (Si trouv), slectionnez l'option Toujours aller la premire URL si la dtection n'est pas possible. Lorsqu'elle est slectionne, cette option signifie que l'utilisateur possde a priori le plug-in, sauf si le navigateur indique explicitement que ce n'est pas le cas . En gnral, activez cette option si le contenu du plug-in est un lment essentiel de votre page ; dans le cas contraire, laissez-la dsactive. Remarque : Cette option ne concerne qu'Internet Explorer ; Netscape Navigator dtecte toujours les plug-ins. 6. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Contrler Shockwave ou SWF

Haut de la page
Application du comportement Tirer l'lment PA
Haut de la page
Le comportement Tirer l'lment PA permet au visiteur de faire glisser un lment positionnement absolu. Utilisez ce comportement pour crer des puzzles, des contrles de dplacement et autres lments mobiles de l'interface. Vous pouvez spcifier la direction vers laquelle l'utilisateur peut faire glisser l'lment PA (horizontalement, verticalement ou dans toutes les directions), une cible vers laquelle l'utilisateur doit faire glisser l'lment PA, si ce dernier doit tre aimant par la cible ou non lorsqu'il arrive moins d'un certain nombre de pixels de la cible, l'action dclencher lorsque l'lment PA touche la cible, etc. Etant donn que le comportement Tirer l'lment PA doit tre appel avant que le visiteur puisse faire glisser l'lment PA, vous devez l'associer l'objet body (avec l'vnementonLoad). 1. Choisissez Insertion > Objets mise en forme > Div PA ou cliquez sur le bouton Tracer un div pour un lment PA du panneau Insertion, puis dessinez un div PA dans la vue Cration de la fentre de document. 2. Cliquez sur <body> dans le slecteur de balises situ dans le coin infrieur gauche de la fentre de document. 3. Choisissez Tirer l'lment PA dans le menu Ajouter un comportement du panneau Comportements.
689
Si l'option Tirer l'lment PA n'est pas disponible, cela signifie probablement qu'un lment PA est slectionn. 4. Dans le menu droulant Elment PA, slectionnez l'lment PA. 5. Slectionnez soit Contraint, soit Libre dans le menu contextuel Mouvement. Les mouvements sans contrainte sont adapts aux puzzles et aux autres jeux base de glisser-dplacer. Pour les contrles de dplacement et les objets mobiles (tiroirs, rideaux et stores), choisissez un mouvement contraint. 6. Pour la restriction de mouvement, indiquez les valeurs de dplacement admises (en pixels) dans les zones de texte Haut, Bas, Gauche et Droite. Ces valeurs sont relatives la position de dpart de l'lment PA. Pour restreindre les dplacements l'intrieur d'une zone rectangulaire, indiquez des valeurs positives dans les quatre zones de texte. Pour permettre uniquement un mouvement vertical, indiquez des valeurs positives pour Haut et Bas et 0 pour Gauche et Droite. Pour permettre uniquement un mouvement horizontal, indiquez des valeurs positives pour Gauche et Droite et 0 pour Haut et Bas. 7. Indiquez les coordonnes (exprimes en pixels) de la cible de dpt dans les zones de texte Gauche et Haut. La cible de dpt est le point sur lequel vous voulez que l'utilisateur dpose l'lment PA. Un lment PA est considr comme ayant atteint la cible de dpt lorsque ses coordonnes d'origine (en haut gauche) correspondent aux valeurs indiques dans les zones de texte Gauche et Haut. Ces coordonnes sont relatives l'angle suprieur gauche de la fentre du navigateur. Cliquez sur Obtenir la position courante pour remplir automatiquement les zones de texte avec les coordonnes actuelles de l'lment PA. 8. Entrez une valeur (exprime en pixels) dans la zone de texte Aligner si dans pour dterminer la distance minimale laquelle le visiteur doit approcher de la cible pour que l'lment PA se place automatiquement sur celle-ci. Les valeurs importantes permettent l'utilisateur de trouver plus facilement la cible de dpt. 9. Pour des puzzles simples et des dfilements d'images, vous pouvez vous en tenir l. Pour dfinir la poigne de dplacement de l'lment PA, suivre le mouvement de l'lment PA pendant qu'il est dplac et dclencher une action lorsqu'il est dpos, cliquez sur l'onglet Avanc. 10. Pour spcifier que l'utilisateur doit cliquer dans une zone particulire de l'lment PA pour pouvoir le dplacer, slectionnez Zone dans l'lment dans le menu Poigne de dplacement, puis indiquez les coordonnes de l'origine (angle suprieur gauche) de la poigne de dplacement, ainsi que la largeur et la hauteur de celle-ci. Cette option est utile lorsque l'image insre l'intrieur de l'lment PA contient un symbole de dplacement, par exemple une barre de titre ou une poigne de tiroir. N'activez pas cette option si vous voulez que l'utilisateur soit libre de cliquer n'importe o dans l'lment PA pour le dplacer. 11. Choisissez, parmi les options de la zone En dplaant, celles que vous dsirez utiliser : Activez l'option Placer l'lment au premier plan si l'lment PA doit tre amen au niveau le plus haut de l'ordre de superposition lors de son dplacement. Si vous activez cette option, utilisez le menu droulant qui apparat pour indiquer si l'lment PA doit tre laiss au niveau de visibilit le plus lev ou si sa position d'origine dans l'ordre de superposition doit tre rtablie. Tapez un code JavaScript ou un nom de fonction (par exemple, monitorAPelement()) dans la zone de texte Appel JavaScript pour que ce code ou cette fonction soit excut en boucle pendant le dplacement de l'lment PA. Par exemple, vous pouvez crire une fonction pour surveiller les coordonnes de l'lment PA et afficher des indications, telles que Tu brles ou Tu t'loignes de la cible , dans une zone de texte. 12. Indiquez un code JavaScript ou un nom de fonction (par exemple, evaluateAPelementPos()) dans la deuxime zone de texte Appel JavaScript si vous voulez que le code ou la fonction soit excut(e) lorsque l'lment PA est dpos. Activez l'option Uniquement si align si le code JavaScript indiqu ne doit tre excut que si l'lment PA a atteint la cible de dpt. 13. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Collecte d'informations sur l'lment PA dplaable
Haut de la page
Lorsque vous associez le comportement Tirer l'lment PA un objet, Dreamweaver insre la fonction MM_dragLayer() dans la section d'en-tte (head) de votre document. (La fonction conserve l'ancienne convention d'attribution de nom pour les lments PA (anciennement, calques) de faon ce que les calques crs dans les versions prcdentes de Dreamweaver restent modifiable.) Cette fonction enregistre l'lment PA comme dplaable et dfinit trois proprits pour chaque lment PA dplaable, MM_LEFTRIGHT, MM_UPDOWN et MM_SNAPPED, que vous pouvez utiliser dans vos propres fonctions JavaScript pour dterminer les positions horizontale et verticale de l'lment PA et s'il a atteint la cible de dpt. Remarque : Les informations fournies ici sont destines uniquement aux programmeurs JavaScript expriments. Par exemple, la fonction suivante affiche la valeur de la proprit MM_UPDOWN (la position verticale actuelle de l'lment PA) dans un champ de formulaire appel curPosField. Les champs de formulaires servent afficher des informations pouvant tre continuellement mises jour, parce qu'ils sont dynamiques. Ainsi, vous pouvez modifier leur contenu aprs le chargement de la page. function getPos(layerId){ var layerRef = document.getElementById(layerId); var curVertPos = layerRef.MM_UPDOWN;
690
document.tracking.curPosField.value = curVertPos; } Au lieu d'afficher la valeur des proprits MM_UPDOWN ou MM_LEFTRIGHT dans un champ de formulaire, vous pouvez utiliser ces valeurs de diffrentes manires. Par exemple, vous pouvez crire une fonction qui affiche un message dans ce champ selon la distance qui reste parcourir jusqu' la cible, ou appeler une autre fonction pour afficher ou masquer un lment PA selon la valeur de cette distance. Il est particulirement utile de tester la proprit MM_SNAPPED lorsque vous disposez, sur une page, de plusieurs lments PA qui doivent tous atteindre leur cible pour que l'utilisateur puisse passer la page ou la tche suivante. Par exemple, vous pouvez crire une fonction qui compte le nombre d'lments PA ayant la valeur MM_SNAPPED dfinie sur true et l'appeler chaque fois qu'un lment PA est dpos. Lorsque le nombre d'lments PA arrivs sur leur cible atteint le nombre dsir, vous pouvez envoyer l'utilisateur la page suivante ou afficher un message de flicitations.
Application du comportement Atteindre l'URL
Haut de la page
Le comportement Atteindre l'URL ouvre une nouvelle page dans la fentre en cours ou dans le cadre indiqu. Ce comportement est utile pour modifier d'un seul clic le contenu de deux cadres ou plus 1. Slectionnez un objet et choisissez Atteindre l'URL dans le menu Ajouter un comportement du panneau Comportements. 2. Choisissez une destination pour l'URL dans la liste Ouvrir dans. La liste Ouvrir dans numre automatiquement les noms de tous les cadres qui se trouvent dans le jeu de cadres actuel, ainsi que la fentre principale. S'il n'y a pas de cadres, cette dernire est la seule option. Remarque : Ne donnez pas vos cadres les noms top, blank, self ou parent, car cela pourrait produire des rsultats inattendus. En effet, certains navigateurs peuvent confondre ces noms avec les mots rservs utiliss dans le champ Cible. 3. Cliquez sur Parcourir pour slectionner un document ouvrir ou tapez le nom et le chemin d'accs au fichier recherch dans la zone de texte URL. 4. Rptez les tapes 2 et 3 pour ouvrir d'autres documents dans d'autres cadres. 5. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Menu de reroutage
Haut de la page
Lorsque vous crez un menu de reroutage en utilisant Insertion > Formulaire > Menu de reroutage, Dreamweaver cre un objet de menu et lui associe le comportement Menu de reroutage (ou Menu de reroutage Aller). En principe, il n'est pas ncessaire d'associer manuellement le comportement Menu de reroutage un objet. Vous pouvez modifier un menu de reroutage existant de deux manires diffrentes : Vous pouvez modifier et rorganiser les lments du menu, modifier les fichiers rerouter et la fentre dans laquelle s'ouvrent ces fichiers, en double-cliquant sur un comportement Menu de reroutage existant dans le panneau Comportements. Vous pouvez modifier les lments du menu comme vous modifieriez les lments de n'importe quel menu, en slectionnant le menu et en utilisant le bouton Valeurs de la liste dans l'inspecteur Proprits. 1. Crez un objet Menu de reroutage s'il n'en existe pas dj dans votre document. 2. Slectionnez l'objet et choisissez Menu de reroutage dans le menu Ajouter un comportement du panneau Comportements. 3. Effectuez les modifications souhaites dans la bote de dialogue Menu de reroutage, puis cliquez sur OK.
Application du comportement Menu de reroutage Aller
Haut de la page
Le comportement Menu de reroutage Aller est troitement associ l'action Menu de reroutage ; il vous permet d'associer un bouton Aller avec un menu de reroutage (pour utiliser ce comportement, vous devez crer au pralable un menu de reroutage dans le document). Un clic sur le bouton Aller ouvre le lien actuellement slectionn 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 lment de ce dernier provoque en gnral le chargement d'une nouvelle URL sans aucune intervention supplmentaire. Toutefois, si l'utilisateur choisit l'lment qui est dj slectionn dans le menu de reroutage, le reroutage ne se produira pas. En gnral cela n'a pas d'importance, mais si le menu de reroutage apparat dans une image et que les lments du menu assurent la liaison avec des pages dans d'autres images, un bouton Aller est souvent utile, pour permettre aux utilisateurs de choisir nouveau un lment dj slectionn dans le menu de reroutage. Remarque : Lorsque vous utilisez un bouton Aller associ un menu de reroutage, le bouton Aller devient le seul mcanisme permettant l'utilisateur d'accder l'URL associe la slection dans le menu. La slection d'un lment de menu dans le menu de reroutage n'a plus pour effet de rediriger l'utilisateur automatiquement vers une autre page ou un autre cadre. 1. Slectionnez un objet qui sera utilis comme bouton Aller (en gnral une image) et choisissez Menu de reroutage Aller dans le menu Ajouter un comportement du panneau Comportements. 2. Dans le menu Choisissez un menu de reroutage, slectionnez un menu que le bouton Aller activera et cliquez sur OK.
691
Application du comportement Ouvrir la fentre Navigateur
Haut de la page
Utilisez l'action Ouvrir la fentre Navigateur pour ouvrir une page dans une nouvelle fentre. Vous pouvez spcifier les proprits de la nouvelle fentre, 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 fentre individuelle lorsque l'utilisateur clique sur l'image rduite ; avec ce comportement, vous pouvez adapter la fentre la taille exacte de l'image. Si vous ne spcifiez aucun attribut pour la fentre, elle s'ouvrira avec la taille et les attributs de la fentre partir de laquelle elle a t lance. Choisir des attributs pour la fentre dsactive automatiquement tous ceux qui ne sont pas explicitement activs. Par exemple, si vous ne dfinissez aucun attribut pour la fentre, elle peut s'ouvrir en 1024 x 768 pixels et comporter une barre de navigation (affichant les boutons Prcdente, Suivante, Dmarrage et Actualiser), une barre d'adresse (indiquant l'URL), une barre d'tat (en bas, affichant les messages d'tat) et une barre de menus (affichant les menus Fichier, Edition, Affichage et d'autres menus). Si vous dfinissez explicitement une largeur de 640 et une hauteur de 480 pixels, sans aucun autre attribut, la fentre s'ouvrira en 640 x 480 pixels, sans aucune barre d'outils. 1. Slectionnez un objet et choisissez Ouvrir la fentre Navigateur dans le menu Ajouter un comportement du panneau Comportements. 2. Tapez l'URL afficher ou cliquez sur Parcourir pour slectionner un fichier. 3. Dfinissez les options pour la largeur et la hauteur de la fentre (en pixels) et pour l'incorporation de diffrentes barres d'outils, barres de dfilement, poignes de redimensionnement, etc. Donnez un nom la fentre (n'utilisez pas d'espaces ni de caractres spciaux) si vous souhaitez qu'elle soit la cible de liens ou qu'elle soit contrle en JavaScript. 4. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Lire le son

Haut de la page
Application du comportement Message contextuel
Haut de la page
Le comportement Message contextuel fait apparatre un message d'alerte JavaScript, avec le texte que vous avez spcifi. Comme les alertes JavaScript ne disposent que d'un seul bouton (OK), utilisez ce comportement pour informer l'utilisateur plutt que pour lui proposer un choix. Vous pouvez incorporer au texte des appels de fonction, proprits, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades ({}). Pour afficher une accolade, faites-la prcder d'une barre oblique inverse (\{). Exemple : The URL for this page is {window.location}, and today is {new Date()}. Remarque : Le navigateur contrle l'aspect de l'alerte. Si vous dsirez avoir davantage de contrle sur l'apparence, pensez utiliser le comportement Ouvrir la fentre Navigateur. 1. Slectionnez un objet et choisissez Message contextuel dans le menu Ajouter un comportement du panneau Comportements. 2. Tapez votre message dans la zone de texte prvue cet effet. 3. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Prcharger les images
Haut de la page
Le comportement Prcharger les images raccourcit le dlai d'affichage en mettant en mmoire cache les images qui ne sont pas visibles lors du premier affichage de la page (par exemple, les images qui vont tre remplaces par des comportements ou des scripts). Remarque : Le comportement Permuter une image prcharge automatiquement toutes les images slectionnes lorsque vous choisissez l'option Prcharger les images dans la bote de dialogue Permuter une image ; il n'est donc pas ncessaire d'ajouter manuellement l'action Prcharger les images lorsque vous utilisez l'action Permuter une image. 1. Slectionnez un objet et choisissez Prcharger les images dans le menu Ajouter un comportement du panneau Comportements. 2. Cliquez sur Parcourir pour slectionner un fichier d'image ou tapez le chemin d'accs et le nom du fichier d'une image dans la zone de texte Fichier source des images. 3. Cliquez sur le bouton plus (+) en haut de la bote de dialogue pour ajouter l'image la liste Prcharger les images. 4. Rptez les tapes 2 et 3 pour les autres images que vous dsirez prcharger dans la page en cours. 5. Pour supprimer une image de la liste Prcharger les images, slectionnez-la et cliquez sur le bouton () (signe moins). 6. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Dfinir image barre de navigation

692
Haut de la page
Application du comportement Texte d'un cadre
Haut de la page
Le comportement Texte d'un cadre vous permet de dfinir de faon dynamique le texte d'un cadre, en remplaant le contenu et le formatage d'un cadre par le contenu indiqu. Ce contenu peut tre n'importe quel code source HTML valide. Ce comportement permet d'afficher les informations de faon dynamique. Bien que le comportement Texte d'un cadre permette de remplacer le formatage d'un cadre, vous pouvez activer l'option Prserver Couleur d'arrire-plan pour conserver les attributs actuels pour l'arrire-plan de la page et la couleur du texte. Vous pouvez incorporer au texte des appels de fonction, proprits, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades ({}). Pour afficher une accolade, faites-la prcder d'une barre oblique inverse (\{). Exemple : The URL for this page is {window.location}, and today is {new Date()}. 1. Slectionnez un objet et choisissez Texte > Texte du cadre dans le menu Ajouter un comportement du panneau Comportements. 2. Dans la bote de dialogue qui s'affiche, slectionnez le cadre cible dans le menu Cadre. 3. Cliquez sur le bouton Reprendre HTML courant pour copier les contenus actuels de la section bodydu cadre cible. 4. Entrez un message dans la zone de texte Nouveau HTML. 5. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Texte du conteneur
Haut de la page
Le comportement Texte du conteneur remplace le contenu et le formatage d'un contenu existant (c'est--dire, tout lment pouvant contenir du texte ou d'autres lments) d'une page par le contenu indiqu. Ce contenu peut tre n'importe quel code source valide en HTML. Vous pouvez incorporer au texte des appels de fonction, proprits, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades ({}). Pour afficher une accolade, faites-la prcder d'une barre oblique inverse (\{). Exemple : The URL for this page is {window.location}, and today is {new Date()}. 1. Slectionnez un objet et choisissez Texte > Texte du conteneur dans le menu Ajouter un comportement du panneau Comportements. 2. Dans la bote de dialogue qui s'affiche, slectionnez l'lment cible dans le menu Conteneur. 3. Entrez le nouveau texte ou le nouveau code HTML dans la zone de texte Nouveau HTML. 4. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Dfinir le texte de la barre d'tat
Haut de la page
Le comportement Dfinir le texte de la barre d'tat affiche un message dans la barre d'tat, dans la partie infrieure gauche de la fentre du navigateur. Par exemple, vous pouvez utiliser ce comportement pour dcrire la destination d'un lien dans la barre d'tat, au lieu d'afficher l'URL associe Cependant, il arrive frquemment que les utilisateurs ne tiennent pas compte des messages de la barre d'tat (certains navigateurs ne prennent pas en charge la dfinition du texte de la barre d'tat). Si votre message est important, pensez l'afficher sous la forme d'un message contextuel ou comme texte d'un lment PA. Remarque : Si vous utilisez le comportement Dfinir le texte de la barre d'tat dans Dreamweaver, le texte de la barre d'tat du navigateur ne va pas ncessairement changer du fait que certains navigateurs ncessitent des rglages spciaux lors de la modification du texte de la barre d'tat. Par exemple, dans Firefox, vous devez modifier une option Avance qui permet JavaScript modifier le texte de la barre d'tat. Pour plus de dtails, reportez-vous la documentation de votre navigateur. Vous pouvez incorporer au texte des appels de fonction, proprits, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades ({}). Pour afficher une accolade, faites-la prcder d'une barre oblique inverse (\{). Exemple : The URL for this page is {window.location}, and today is {new Date()}. 1. Slectionnez un objet et choisissez Texte > Texte de la barre d'tat dans le menu Ajouter un comportement du panneau Comportements. 2. Dans la bote de dialogue Dfinir le texte de la barre d'tat, tapez un message dans la zone de texte Message. Utilisez un message concis. Le navigateur tronquera le message s'il est trop long pour la barre d'tat. 3. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
693
Application du comportement Texte d'un champ de texte

Le comportement Texte d'un champ de texte remplace le contenu d'un champ de texte de formulaire par le contenu indiqu.
Haut de la page
Vous pouvez incorporer au texte des appels de fonction, proprits, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades ({}). Pour afficher une accolade, faites-la prcder d'une barre oblique inverse (\{). Exemple : The URL for this page is {window.location}, and today is {new Date()}.
Cration d'un champ de texte nomm

1. Slectionnez Insertion > Formulaire > Champ de texte. Si Dreamweaver vous invite ajouter une balise de formulaire, cliquez sur Oui. 2. Dans l'inspecteur Proprits, tapez le nom du champ de texte. Veillez utiliser un nom unique dans cette page (n'utilisez pas le mme nom pour plusieurs lments appartenant la mme page, mme s'ils se trouvent dans des formulaires diffrents).
Application de l'action Texte d'un champ de texte

1. Slectionnez un champ de texte et choisissez Texte > Texte d'un champ de texte dans le menu Ajouter un comportement du panneau Comportements. 2. Slectionnez le champ de texte cible dans le menu Champ de texte et entrez votre nouveau texte. 3. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Afficher-Masquer les lments
Haut de la page
Le comportement Afficher-Masquer les lments affiche, masque ou rtablit la visibilit par dfaut d'un ou plusieurs lments de page. Ce comportement permet d'afficher des informations en fonction des interactions de l'utilisateur avec la page. Par exemple, lorsque le pointeur passe sur l'image d'une plante, vous pouvez afficher un lment de page comportant des dtails sur le climat idal de la plante, l'ensoleillement dont elle a besoin, sa taille adulte, etc. Le comportement ne fait qu'afficher ou masquer l'lment pertinent, il ne supprime pas rellement l'lment du flux de la page lorsqu'il est masqu. 1. Slectionnez un objet et choisissez Afficher-Masquer les lments dans le menu Ajouter un comportement du panneau Comportements. Si l'option Afficher-Masquer les lments n'est pas disponible, cela signifie probablement qu'un lment PA est slectionn. Etant donn que les lments PA n'acceptent pas les vnements dans la version 4.0 des deux navigateurs, vous devez choisir un objet diffrent, tel que la balise <body> ou un lien (<a>). 2. Dans la liste Elments, slectionnez l'lment que vous souhaitez afficher ou masquer et cliquez sur Afficher, Masquer ou Restaurer (cette dernire option restaure la visibilit par dfaut). 3. Rptez l'tape 2 pour les autres lments dont vous voulez modifier la visibilit. Vous pouvez modifier la visibilit de plusieurs lments avec un seul comportement. 4. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Afficher le menu contextuel

Haut de la page
Ajout, suppression et rorganisation d'lments de menu contextuel

Haut de la page
Mise en forme d'un menu contextuel

Haut de la page
Positionnement d'un menu contextuel dans un document

Haut de la page
694
Modification d'un menu contextuel

Haut de la page
Application du comportement Permuter une image
Haut de la page
Cette action remplace une image par une autre, en modifiant l'attribut src de la balise <img>. Utilisez ce comportement pour crer des substitutions de boutons et autres effets sur des images (y compris la substitution de plusieurs images la fois) L'insertion d'une image survole ajoute automatiquement votre page un comportement Permuter une image. Remarque : Etant donn que seul l'attribut src est affect par ce comportement, l'image de substitution doit en principe avoir les mmes dimensions (hauteur et largeur) que l'original. Faute de quoi, l'image intervertie apparatrait dforme (compacte ou largie) de faon s'adapter aux dimensions de l'image d'origine. Il existe galement le comportement Restaurer l'image intervertie qui restaure la dernire interversion d'images son tat antrieur. Il est automatiquement ajout lorsque vous associez le comportement Permuter une image un objet ; en principe, si vous avez laiss cette option active en associant le comportement Permuter une image, vous n'avez pas besoin de l'utiliser manuellement. 1. Choisissez Insertion > Image ou cliquez sur le bouton Image du panneau Insertion pour insrer une image. 2. Dans l'inspecteur Proprits, indiquez un nom pour l'image dans la zone de texte situe l'extrme gauche. Il n'est pas ncessaire de nommer les images ; elles sont nommes automatiquement lorsque vous associez le comportement un objet. Toutefois, il vous sera plus facile de distinguer les images proposes dans la bote de dialogue Permuter une image si vous avez vousmme attribu un nom ces images. 3. Rptez les tapes 1 et 2 si vous souhaitez insrer des images supplmentaires. 4. Slectionnez un objet (en gnral, l'image que vous voulez remplacer) et choisissez l'option Permuter une image dans le menu Ajouter un comportement du panneau Comportements. 5. Slectionnez l'image dont vous voulez modifier la source dans la liste Images. 6. Cliquez sur Parcourir pour slectionner le nouveau fichier d'image ou indiquez son chemin d'accs et son nom de fichier dans la zone de texte Dfinir la source . 7. Rptez les tapes 5 et 6 si vous dsirez ajouter d'autres images modifier. Utilisez la mme action Permuter l'image pour toutes les images que vous voulez modifier simultanment ; dans le cas contraire, l'action correspondante Restaurer l'image intervertie ne les restaurerait pas toutes. 8. Slectionnez l'option Prcharger les images pour mettre en mmoire cache les nouvelles images au moment du chargement de la page. Cela vite le dlai de tlchargement des images lorsqu'un vnement dclenche leur apparition. 9. Cliquez sur OK et vrifiez que l'vnement par dfaut est correct.
Application du comportement Valider le formulaire
Haut de la page
Le comportement Valider le formulaire teste le contenu des champs de texte indiqus pour vrifier que l'utilisateur a entr le type de donnes correct. Associez ce comportement des champs de texte individuels l'aide de l'vnement onBlur pour valider ces champs au fur et mesure que l'utilisateur remplit le formulaire ou associez-le au formulaire l'aide de l'vnement onSubmit pour valuer divers champs simultanment lorsque l'utilisateur clique sur le bouton d'envoi. L'association de ce comportement un formulaire empche l'envoi de formulaires contenant des donnes non valides. 1. Pour insrer un formulaire, choisissez Insertion > Formulaire ou cliquez sur le bouton Formulaire du panneau Insertion. 2. Pour insrer un champ de texte, choisissez Insertion > Formulaire > Champ de texte ou cliquez sur le bouton Champ de texte du panneau Insertion. Rptez cette tape pour insrer plusieurs champs de texte. 3. Choisissez une mthode de validation : Pour valider les champs individuellement au fur et mesure que l'utilisateur remplit le formulaire, slectionnez un champ de texte et choisissez Fentre > Comportements. Pour valider plusieurs champs lorsque l'utilisateur envoie le formulaire, cliquez sur la balise <form> dans le slecteur de balises situ dans le coin infrieur gauche de la fentre de document, puis choisissez Fentre > Comportements. 4. Slectionnez Valider le formulaire dans le menu Ajouter un comportement. 5. Effectuez l'une des oprations suivantes : Si vous validez des champs individuellement, slectionnez dans la liste Champs le mme champ que celui que vous avez slectionn dans la fentre de document. Si vous validez plusieurs champs la fois, slectionnez un champ de texte dans la liste Champs. 6. Activez l'option Obligatoire si le champ doit obligatoirement contenir des donnes.
695
7. Slectionnez l'une des options d'acceptation suivantes : Tout Vrifie qu'un champ obligatoire contient des donnes ; ces dernires peuvent tre de n'importe quel type. Adresse lectronique Vrifie que le champ contient un symbole @. Nombre Vrifie que le champ contient uniquement des valeurs numriques. Nombre de Vrifie que le champ contient une valeur numrique comprise dans la plage indique. 8. Si vous validez plusieurs champs, rptez les tapes 6 et 7 pour tout champ supplmentaire valider. 9. Cliquez sur OK. Si vous validez plusieurs champs lorsque l'utilisateur envoie le formulaire, l'vnement onSubmit apparat automatiquement dans le menu droulant Evnements. 10. Si vous validez des champs individuellement, vrifiez que l'vnement par dfaut est bien onBlur ou onChange. Si ce n'est pas le cas, slectionnez l'un de ces vnements. Ces deux vnements dclenchent le comportement Valider le formulaire ds que l'utilisateur sort du champ concern. La diffrence entre ces deux vnements est que onBlur est toujours dclench, que l'utilisateur ait saisi ou non du texte dans le champ, alors que onChange n'est dclench que si l'utilisateur a modifi le contenu du champ. L'vnement onBlur est prfrable si le champ est obligatoire. Voir aussi
696
Utilisation de comportements JavaScript (instructions gnrales)

A propos des comportements JavaScript Prsentation du panneau Comportements A propos des vnements Application d'un comportement Modification ou suppression d'un comportement Mise jour d'un comportement Tlchargement et installation de comportements crs par des dveloppeurs indpendants
A propos des comportements JavaScript
Haut de la page
Les comportements Adobe Dreamweaver placent du code JavaScript dans des documents de faon ce que les visiteurs puissent modifier une page Web de diffrentes faons ou lancer certaines tches. Un comportement est la combinaison d'un vnement et d'une action dclenche par cet vnement. Dans le panneau Comportements, vous pouvez ajouter un comportement une page en spcifiant une action, puis l'vnement qui dclenche cette action. Remarque : Le code de comportement est un code JavaScript ct client, c'est--dire qu'il s'excute sur des navigateurs, mais pas sur des serveurs. Les vnements sont en ralit des messages gnrs par les navigateurs, indiquant qu'un utilisateur a fait quelque chose sur votre page. Par exemple, lorsqu'un visiteur dplace le pointeur sur un lien, le navigateur gnre un vnement onMouseOver pour ce lien ; le navigateur vrifie ensuite s'il doit appeler du code JavaScript (spcifi dans la page affiche) en guise de rponse. Ces vnements sont dfinis pour diffrents lments de la page ; par exemple, dans la plupart des navigateurs, onMouseOver et onClick sont des vnements associs des liens, tandis que onLoad est un vnement associ des images et la section body du document. Une action correspond un code JavaScript pr-rdig qui effectue une tche spcifique, comme ouvrir une fentre de navigateur, afficher ou masquer un calque, diffuser un son ou arrter une animation Adobe Shockwave. Les actions proposes dans Dreamweaver prsentent une compatibilit inter-navigateurs maximale. Une fois qu'un comportement est associ un lment de page, le comportement appelle l'action (code JavaScript) associe un vnement chaque fois que cet vnement se produit pour cet lment. Les vnements disponibles pour dclencher une action donne varient d'un navigateur l'autre. Par exemple, si vous associez l'action Message contextuel un lien et spcifiez que l'action sera dclenche par l'vnement onMouseOver, votre message s'affiche dans une bote de dialogue lorsqu'un utilisateur pointe la souris sur ce lien dans le navigateur. Un vnement unique peut dclencher plusieurs actions diffrentes et vous pouvez dfinir l'ordre d'excution de ces actions. Dreamweaver propose plus d'une vingtaine d'actions ; des actions supplmentaires sont disponibles sur le site Web d'Exchange l'adresse www.adobe.com/go/dreamweaver_exchange_fr, ainsi que sur les sites d'autres dveloppeurs Vous pouvez crire vos propres actions si vous matrisez le langage JavaScript. Remarque : Les termes comportement et action appartiennent la terminologie Dreamweaver et non la terminologie HTML. Du point de vue du navigateur, une action est un lment de code JavaScript comme un autre.
Haut de la page
Prsentation du panneau Comportements
Utilisez le panneau Comportements (Fentre > Comportements) pour associer des comportements des lments de la page (plus prcisment aux balises) et pour modifier les paramtres des comportements prcdemment associs. Les comportements dj associs l'lment de la page actuellement slectionne sont rpertoris dans la liste de comportements (la zone principale du panneau), tablie par vnement et par ordre alphabtique. Si plusieurs actions sont rpertories pour le mme vnement, elles sont excutes dans l'ordre dans lequel elles apparaissent dans la liste. Si aucun comportement n'apparat dans la liste, cela signifie qu'aucun comportement n'est associ l'lment slectionn. Le panneau Comportements comprend les options suivantes : Afficher les vnements dfinis Affiche uniquement les vnements associs au document actif. Les vnements sont organiss en catgorie client et serveur. Les vnements de chaque catgorie se trouvent dans une liste que vous pouvez rduire. Afficher les vnements dfinis constitue la vue par dfaut. Afficher tous les vnements Affiche une liste alphabtique de tous les vnements d'une catgorie donne. Ajouter un comportement (+) Affiche un menu d'actions pouvant tre associes l'lment actuellement slectionn. Lorsque vous slectionnez une action dans la liste, une bote de dialogue s'affiche, dans laquelle vous pouvez dfinir les paramtres pour cette action. Si toutes les actions s'affichent en gris, cela signifie qu'aucun vnement ne peut tre gnr par l'lment slectionn. Supprimer un vnement () Supprime l'action et l'vnement slectionns de la liste de comportements.
697
Boutons flchs Haut et Bas Dplacent l'action slectionne vers le haut ou vers le bas dans la liste des comportements pour un vnement particulier. Vous ne pouvez modifier l'ordre des actions que pour un vnement particulier ; par exemple, vous pouvez modifier l'ordre d'excution de plusieurs actions pour l'vnement onLoad, mais toutes les actions onLoad restent groupes dans la liste de comportements. Les boutons flchs sont dsactivs pour les actions ne pouvant tre dplaces dans la liste, vers le haut ou vers le bas. Evnements Affiche un menu droulant, visible uniquement lorsqu'un vnement est slectionn, de tous les vnements qui peuvent dclencher l'action (ce menu s'affiche lorsque vous cliquez sur la touche flche situe en face du nom de l'vnement slectionn). Diffrents vnements s'affichent, selon l'objet slectionn. Si les vnements attendus n'apparaissent pas, assurez-vous d'avoir slectionn le bon lment de page ou la bonne balise. (Pour slectionner une balise spcifique, utilisez le slecteur de balises situ dans le coin infrieur gauche de la fentre de document.) Remarque : Les noms d'vnement entre parenthses sont disponibles uniquement pour les liens. En choisissant l'un de ces noms d'vnement, vous ajoutez automatiquement un lien nul l'lment sur la page slectionne et vous associez le comportement ce lien et non l'lment lui-mme. Le lien nul est dfini sous la forme href="javascript:;" dans le code HTML.
Haut de la page
A propos des vnements
Chaque navigateur gnre une srie d'vnements que vous pouvez associer aux actions rpertories dans le menu Actions (+) du panneau Comportements. Lorsqu'un visiteur de votre page Web dclenche une action interactive avec celle-ci, en cliquant sur une image par exemple, le navigateur gnre un vnement. Cet vnement permet d'appeler une fonction JavaScript excutant une action quelconque. Dreamweaver fournit de nombreuses actions courantes que vous pouvez dclencher l'aide de ces vnements. Pour obtenir les noms et les descriptions des vnements fournis par chacun des navigateurs, consultez le centre de support de Dreamweaver l'adresse www.adobe.com/go/dreamweaver_support_fr. Diffrents vnements s'affichent dans le menu Evnements, en fonction de l'objet slectionn. Pour savoir quels sont les vnements pris en charge par un navigateur spcifique pour un lment de page donn, insrez l'lment de la page dans votre document et associez-lui un comportement, puis consultez le menu Evnements dans le panneau Comportements. (Par dfaut, les vnements proviennent de la liste d'vnements HTML 4.01 et ils sont pris en charge par la plupart des navigateurs modernes.) Certains vnements peuvent apparatre en gris (dsactivs) si les objets pertinents n'existent pas encore dans la page ou si l'objet slectionn ne peut pas recevoir d'vnements. Si les objets attendus ne sont pas affichs, assurez-vous que vous avez bien slectionn l'objet correct. Si vous associez un comportement une image, certains vnements (par exemple onMouseOver) apparaissent entre parenthses. Ces vnements ne sont disponibles que pour des liens. Lorsque vous en slectionnez un, Dreamweaver entoure l'image d'une balise a pour dfinir un lien nul, Le lien nul est reprsent par javascript:; dans la zone de texte Lien de l'inspecteur Proprits. Vous pouvez modifier la valeur de ce lien pour le transformer en vritable lien vers une autre page, mais si vous effacez le lien JavaScript sans le remplacer par un autre lien, vous supprimerez le comportement. Pour voir quelles balises peuvent tre utilises avec un vnement donn dans un navigateur donn, recherchez l'vnement dans l'un des fichiers de votre dossier Dreamweaver/Configuration/Behaviors/Events.
Application d'un comportement
Haut de la page
Vous pouvez associer des comportements au document entier ( la balise <body>) ou des liens, des images, des lments de formulaire et divers autres lments HTML. Le navigateur cible que vous choisissez dtermine les vnements pris en charge pour un lment donn. Vous pouvez attribuer plusieurs actions chaque vnement. Les actions sont excutes dans l'ordre dans lequel elles sont rpertories dans la colonne Actions du panneau Comportements, mais vous pouvez modifier cet ordre. 1. Slectionnez un lment 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 slecteur de balises, situ dans le coin infrieur gauche de la fentre de document. 2. Choisissez Fentre > Comportements. 3. Cliquez sur le bouton plus (+) et choisissez une action dans le menu Ajouter un comportement. Vous ne pouvez pas choisir les actions qui apparaissent en gris dans le menu. Ces actions peuvent tre grises si un objet ncessaire n'existe pas dans le document actif Par exemple, l'action Contrler Shockwave ou SWF s'affiche en gris si le document ne contient pas de fichiers SWF Flash ou Shockwave. Lorsque vous choisissez une action, une bote de dialogue s'affiche avec les paramtres et les instructions pour cette action. 4. Saisissez les paramtres pour l'action et cliquez sur OK. Toutes les actions proposes dans Dreamweaver fonctionnent dans les navigateurs modernes. Certaines actions ne fonctionnent pas dans les navigateurs plus anciens, mais elles n'entraneront pas d'erreurs. Remarque : Les lments cibles doivent possder un ID unique. Par exemple, si vous souhaitez appliquer le comportement Permuter une image une image, cette image doit avoir un ID. Si vous n'avez pas spcifi d'ID pour l'lment, Dreamweaver le fait automatiquement votre place. 5. L'vnement par dfaut qui dclenchera l'action apparat dans la colonne Evnements. S'il ne s'agit pas de l'vnement que vous dsirez utiliser, slectionnez-en un autre dans le menu contextuel Evnements. (Pour ouvrir le menu Evnements, slectionnez un vnement ou
698
une action dans le panneau Comportements, puis cliquez sur la flche noire pointe vers le bas qui apparat entre le nom de l'vnement et le nom de l'action.)
Modification ou suppression d'un comportement
Haut de la page
Une fois le comportement associ, vous pouvez modifier l'vnement qui dclenche l'action, ajouter ou supprimer des actions et modifier les paramtres des actions. 1. Slectionnez un objet auquel un comportement a t associ. 2. Choisissez Fentre > Comportements. 3. Effectuez les modifications voulues : Pour modifier les paramtres d'une action, double-cliquez sur son nom ou slectionnez-le et appuyez sur la touche Entre (Windows) ou Retour (Macintosh), modifiez les paramtres dans la bote de dialogue, puis cliquez sur OK. Pour modifier l'ordre d'apparition des actions pour un vnement donn, slectionnez une action et cliquez sur la flche Haut ou Bas. Vous pouvez galement slectionner l'action, puis la copier et la coller l'emplacement de votre choix parmi les autres actions. Pour supprimer un comportement, slectionnez-le et cliquez sur le signe moins (-) ou appuyez sur Supprimer.
Mise jour d'un comportement

1. Slectionnez l'lment auquel est attach le comportement. 2. Choisissez Fentre > Comportements et double-cliquez sur le comportement. 3. Effectuez vos modifications, puis cliquez sur OK dans la bote de dialogue du comportement.
Haut de la page
Toutes les occurrences de ce comportement sont actualises. Si d'autres pages de votre site contiennent ce comportement, vous devez les mettre jour page par page.
Tlchargement et installation de comportements crs par des dveloppeurs indpendants
Haut de la page
De nombreuses extensions sont disponibles sur le site Web d'Exchange pour Dreamweaver (www.adobe.com/go/dreamweaver_exchange_fr). 1. Slectionnez Fentre > Comportements et choisissez l'option Tlcharger d'autres comportements dans le menu Ajouter un comportement. Votre navigateur principal s'ouvre sur le site d'Exchange 2. Localisez les progiciels. 3. Tlchargez et installez le progiciel d'extension souhait. Pour plus d'informations, consultez la section Ajout et gestion d'extensions dans Dreamweaver.
699
Accessibilit
700
Dreamweaver et l'accessibilit
A propos du contenu accessible Utilisation de lecteurs d'cran avec Dreamweaver Prise en charge des fonctions d'accessibilit du systme d'exploitation Optimisation de l'espace de travail pour la conception de pages accessibles Fonction de rapport de validation d'accessibilit de Dreamweaver Navigation dans Dreamweaver l'aide du clavier
A propos du contenu accessible
Haut de la page
L'accessibilit consiste faire en sorte que les sites ou les produits Web que vous crez puissent tre utiliss par des personnes souffrant de handicaps visuels, auditifs, moteurs ou autres. Les fonctions d'accessibilit de produits logiciels et de sites Web peuvent tre : la prise en charge de lecteurs d'cran, des quivalents textuels pour les graphiques, des raccourcis clavier, des modifications dans les couleurs d'affichage pour augmenter le contraste, etc. Dreamweaver inclut des outils qui facilitent son utilisation et vous permettent de crer un contenu accessible. Pour les dveloppeurs Dreamweaver qui doivent faire appel aux fonctions d'accessibilit, l'application prend en charge des lecteurs d'cran, la navigation avec le clavier et les fonctions d'accessibilit de votre systme d'exploitation. Pour les concepteurs Web qui souhaitent crer du contenu accessible, Dreamweaver vous aide crer des pages accessibles au contenu utile pour les lecteurs d'cran et en conformit avec les directives gouvernementales. Par exemple, des botes de dialogue vous invitent entrer des attributs d'accessibilit, tels que l'quivalent texte d'une image, lorsque vous insrez des lments de page. Ainsi, lorsque l'image s'affiche sur le systme d'un utilisateur ayant des problmes de vue, le lecteur d'cran lit la description. Remarque : Pour en savoir plus sur deux de ces importantes initiatives, consultez le site de la World Wide Web Consortium Web Accessibility Initiative (www.w3.org/wai) et la Section 508 de la loi amricaine Federal Rehabilitation Act (www.section508.gov). Aucun outil de cration Web ne peut automatiser entirement le processus de dveloppement. Pour concevoir des sites Web accessibles, vous devez comprendre les exigences lies l'accessibilit et devez continuellement tenir compte lors de vos prises de dcisions de la faon dont les personnes souffrant d'un handicap interagissent avec les pages Web. La meilleure faon de s'assurer qu'un site Web est accessible est de respecter toutes les procdures de prparation, de dveloppement, de tests et d'valuation.
Utilisation de lecteurs d'cran avec Dreamweaver
Haut de la page
Un lecteur d'cran rcite le texte qui s'affiche sur l'cran de l'ordinateur. Il lit aussi les informations non textuelles, telles que les tiquettes de boutons ou les descriptions d'images dans l'application, fournies dans les balises ou les attributs d'accessibilit lors de la cration. En tant que concepteur Dreamweaver, vous pouvez utiliser un lecteur d'cran pour vous assister dans la cration de vos pages Web. Le lecteur d'cran commence sa lecture par le coin suprieur gauche de la fentre de document. Dreamweaver prend en charge les lecteurs d'cran JAWS pour Windows de Freedom Scientific (www.freedomscientific.com) et Window-Eyes de GW Micro (www.gwmicro.com).
Prise en charge des fonctions d'accessibilit du systme d'exploitation
Haut de la page
Dreamweaver prend en charge les fonctionnalits d'accessibilit des systmes d'exploitation Windows et Macintosh. Par exemple, sur le Macintosh, dfinissez les prfrences visuelles dans la bote de dialogue Prfrences d'accs universelles (Apple > Prfrences systme). Les paramtres slectionns sont alors repris par l'espace de travail de Dreamweaver. Le paramtre de contraste lev du systme d'exploitation Windows est galement pris en charge. Vous pouvez activer cette option l'aide du Panneau de configuration de Windows et elle affecte Dreamweaver de la faon suivante : Les botes de dialogue et les panneaux utilisent des paramtres de couleurs systme. Par exemple, si vous fixez les couleurs Blanc sur Noir, les botes de dialogue et les panneaux Dreamweaver utilisent du blanc comme couleur de premier plan et du noir en arrire-plan. Le mode Code utilise les couleurs systme des fentres et du texte de fentres. Par exemple, si vous avez fix les couleurs systme Blanc sur Noir et que vous changez les couleurs de texte dans Edition > Prfrences > Coloration du code, Dreamweaver ignore ces paramtres de couleur et affiche le texte de code avec du blanc comme couleur de premier plan et du noir en arrire-plan. Le mode Cration utilise les couleurs d'arrire-plan et de texte que vous avez dfinies dans Modifier > Proprits de la page pour que les pages que vous crez aient un rendu des couleurs similaire celui d'un navigateur.
Haut de la page
701
Optimisation de l'espace de travail pour la conception de pages accessibles

Lorsque vous crez des pages accessibles, vous devez associer des informations aux objets prsents sur les pages, telles que des tiquettes et des descriptions, pour rendre votre contenu accessible tous les utilisateurs. Pour ce faire, activez la bote de dialogue Accessibilit de chaque objet, de faon ce que Dreamweaver vous demande d'entrer les informations d'accessibilit lorsque vous insrez des objets. Vous pouvez activer une bote de dialogue pour n'importe quel objet de la catgorie Accessibilit dans les prfrences. 1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh). 2. Slectionnez la catgorie Accessibilit dans la liste gauche, slectionnez un objet, dfinissez les options suivantes, puis cliquez sur OK. Affichage des attributs lors de l'insertion Slectionnez les objets pour lesquels vous souhaitez activer les botes de dialogue d'accessibilit. Par exemple, les objets de formulaire, les cadres, les mdias et les images. Laisser le focus sur le panneau Conserve le panneau l'tat actif afin qu'il soit disponible pour le lecteur d'cran. Si vous ne slectionnez pas cette option, le focus demeure en mode Cration ou Code lorsqu'un utilisateur ouvre un panneau. Restitution hors cran Slectionnez cette option lorsque vous utilisez un lecteur d'cran. Remarque : Les attributs d'accessibilit apparaissent dans la bote de dialogue Tableau lors de l'insertion d'un nouveau tableau.
Fonction de rapport de validation d'accessibilit de Dreamweaver

La fonction de validation de l'accessibilit de Dreamweaver a t abandonne depuis Dreamweaver CS5.
Haut de la page
Navigation dans Dreamweaver l'aide du clavier
Haut de la page
Vous pouvez utiliser le clavier pour parcourir les panneaux, les inspecteurs, les botes de dialogue, les cadres et les tableaux sans utiliser de souris. Remarque : L'utilisation de la touche de tabulation et des touches flches n'est prise en charge que sous Windows.
Navigation dans les panneaux

1. Dans la fentre de document, appuyez sur Ctrl+F6 pour activer un panneau. Une ligne pointille autour du titre du panneau indique que le panneau est actif. Le lecteur d'cran lit la barre de titre du panneau actif. 2. Appuyez de nouveau sur Ctrl+F6 jusqu' ce que le panneau dans lequel vous voulez travailler soit actif. Appuyez sur Ctrl+Maj+F6 pour activer le panneau prcdent. 3. Si le panneau dans lequel vous voulez travailler n'est pas ouvert, utilisez les raccourcis clavier indiqus dans le menu Fentre pour afficher le panneau appropri, puis appuyez sur Ctrl+F6. Si le panneau dans lequel vous voulez travailler est ouvert, mais affich sous sa forme rduite, activez la barre de titre du panneau et appuyez sur la barre d'espace. Appuyez de nouveau sur la barre d'espace pour rduire le panneau. 4. Appuyez sur la touche de tabulation pour passer d'une option une autre dans le panneau. 5. Utilisez les touches flches de faon approprie : Si une option comporte des choix, utilisez les touches flches pour faire dfiler ces choix, puis appuyez sur la barre d'espace pour valider la slection. Si le groupe de panneaux comporte des onglets pour ouvrir d'autres panneaux, activez l'onglet ouvert puis utilisez la touche flche gauche ou droite pour ouvrir un autre onglet. Aprs avoir ouvert un nouvel onglet, appuyez sur la touche de tabulation pour faire dfiler les options de ce panneau.
Navigation dans l'inspecteur Proprits

1. Appuyez sur Ctrl+F3 pour afficher l'inspecteur Proprits, s'il n'est pas visible. 2. Appuyez sur Ctrl+F6 (Windows uniquement) jusqu' ce que l'inspecteur Proprits soit actif. 3. Appuyez sur la touche de tabulation pour passer d'une option de l'inspecteur Proprits une autre. 4. Utilisez les touches flches pour parcourir les diffrentes options. 5. Appuyez sur Ctrl+Flche vers le bas/Flche vers le haut (Windows) ou sur Commande+Flche vers le bas/Flche vers le haut (Macintosh) pour ouvrir ou fermer la section dveloppe de l'inspecteur Proprits, selon vos besoins. Alternativement, placez le focus sur la flche de dveloppement dans le coin infrieur droit puis appuyez sur la barre d'espace. Remarque : Pour pouvoir dvelopper et rduire l'inspecteur Proprits, le focus du clavier doit se trouver dans celui-ci, et pas sur le titre du panneau.
Navigation dans une bote de dialogue

1. Appuyez sur la touche de tabulation pour passer d'une option une autre dans la bote de dialogue.
702
2. Utilisez les touches flches pour faire dfiler les choix d'une option. 3. Si la bote de dialogue comporte une liste Catgorie, appuyez sur Ctrl+Tab (Windows) pour activer la liste Catgorie puis utilisez les touches flches pour vous dplacer vers le haut ou vers le bas dans la liste. 4. Appuyez de nouveau sur Ctrl+Tab pour afficher les options d'une catgorie. 5. Appuyez sur Entre pour quitter la bote de dialogue.
Navigation dans les cadres

Si votre document contient des cadres, vous pouvez utiliser les touches flches pour activer un cadre.
Slection d'un cadre

1. Appuyez sur Alt+Flche vers le bas pour placer le point d'insertion dans la fentre de document. 2. Appuyez sur Alt+Flche vers le haut pour slectionner le cadre actif. 3. Continuez d'appuyer sur Alt+Flche vers le haut pour activer le jeu de cadres, puis les jeux de cadres parents, s'il existe des jeux de cadres imbriqus. 4. Appuyez sur Alt+Flche vers le bas pour activer un jeu de cadres enfant ou un seul cadre dans un jeu de cadres. 5. Lorsqu'un cadre est actif, appuyez sur Alt+Flche gauche ou droite pour vous dplacer entre les cadres.
Navigation dans un tableau

1. Utilisez les touches flches ou appuyez sur la touche de tabulation pour vous dplacer vers d'autres cellules dans un tableau. Si vous appuyez sur la touche de tabulation lorsque vous tre dans la cellule la plus droite, vous ajoutez une ligne au tableau. 2. Pour slectionner une cellule, appuyez sur Ctrl+A (Windows uniquement) lorsque le point d'insertion est dans la cellule. 3. Pour slectionner un tableau en entier, appuyez deux fois sur Ctrl+A (Windows) si le point d'insertion est dans une cellule ou une fois si une cellule est slectionne. 4. Pour quitter le tableau, appuyez trois fois sur Ctrl+A (Windows) lorsque le point d'insertion est dans une cellule, deux fois si la cellule est slectionne ou une fois si le tableau est slectionn, puis appuyez sur les touches Haut, Gauche ou Droite.
703
Raccourcis clavier
Cration d'un feuille de rfrence pour le jeu de raccourcis en cours Personnalisation des raccourcis clavier A propos des raccourcis clavier et des claviers non-U.S.
Cration d'un feuille de rfrence pour le jeu de raccourcis en cours
Haut de la page
Une feuille de rfrence est un enregistrement du jeu de raccourcis en cours. Les informations sont stockes sous forme d'un tableau HTML. Vous pouvez afficher la feuille de rfrence dans un navigateur Web ou l'imprimer. 1. Slectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh). 2. Cliquez sur le bouton Exporter le jeu au format HTML ; il s'agit du troisime bouton du jeu de quatre boutons situ en haut de la bote de dialogue. 3. Dans la bote de dialogue d'enregistrement, entrez le nom de la feuille de rfrence et slectionnez l'emplacement appropri pour enregistrer le fichier.
Haut de la page
Utilisez l'diteur de raccourcis clavier pour crer vos propres touches de raccourci, y compris pour les fragments de code. Vous pouvez galement supprimer des raccourcis clavier, les modifier, et slectionner un jeu prdfini de raccourcis dans l'diteur de raccourcis clavier.
Cration d'un raccourci clavier

Crez vos propres touches de raccourci, modifiez des raccourcis existants ou slectionnez un jeu de raccourcis prdfini. 1. Slectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh). 2. Parmi les options suivantes, dfinissez celles de votre choix et cliquez sur OK : Jeu en cours Vous permet de choisir un jeu de raccourcis prdfinis livrs avec Dreamweaver, ou tout autre jeu personnalis que vous avez vous-mme dfini. Les jeux prdfinis sont rpertoris en haut du menu. Par exemple, si vous connaissez les raccourcis de HomeSite ou BBEdit, vous pouvez les utiliser en choisissant le jeu prdfini correspondant. Commandes Vous permet de slectionner une catgorie de commandes modifier. Par exemple, vous pouvez modifier des commandes de menu, telles que Ouvrir ou des commandes de modification du code, telles que Equilibrer les accolades. Pour ajouter ou modifier un raccourci clavier pour un fragment de code, slectionnez Fragment de code dans le menu contextuel Commandes. La liste des commandes affiche les commandes de la catgorie que vous avez choisie dans le menu contextuel Commandes, ainsi que les raccourcis clavier attribus. Les catgories de commandes Menu s'affichent sous une forme arborescente, suivant la structure des menus. Les autres catgories rpertorient les commandes par leur nom (par exemple, Quitter l'application). Raccourcis affiche la liste des raccourcis clavier assigns la commande slectionne. Ajouter l'lment (+) ajoute un nouveau raccourci pour la commande en cours. Cliquez sur ce bouton pour ajouter une nouvelle ligne vierge aux Raccourcis. Entrez une nouvelle combinaison de touches et cliquez sur Remplacer pour ajouter un nouveau raccourci clavier pour cette commande. Vous pouvez attribuer deux raccourcis clavier diffrents pour chaque commande. S'il en existe dj deux, le bouton Ajouter l'lment (+) n'a aucun effet. Supprimer l'lment (-) supprime le raccourci slectionn de la liste. Appuyer sur la touche affiche la combinaison de touches que vous saisissez lorsque vous ajoutez ou modifiez un raccourci. Remplacer Ajoute la combinaison de touches indique dans la zone Appuyer sur la touche la liste des raccourcis ou applique le nouveau raccourci clavier la combinaison de touches spcifies. Dupliquer le jeu duplique le jeu courant. Attribuez un nom au nouveau jeu ; le nom par dfaut est le nom du jeu en cours dot du suffixe copie. Renommer le jeu renomme le jeu actuel. Exporter comme fichier HTML enregistre le jeu actuel dans un format de table HTML en vue d'un affichage et d'une impression simples. Vous pouvez ouvrir le fichier HTML dans votre navigateur et imprimer les raccourcis comme rfrence rapide. Supprimer le jeu supprime un jeu. Les jeux actifs ne peuvent pas tre supprims.
704
Suppression d'un raccourci d'une commande

1. Slectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh). 2. Dans le menu contextuel Commandes, slectionnez une catgorie. 3. Slectionnez une commande dans la liste, puis slectionnez un raccourci. 4. Cliquez sur le bouton Supprimer un lment (-).
Ajout d'un raccourci clavier une commande

1. Slectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh). 2. Dans le menu contextuel Commandes, slectionnez une catgorie. 3. Slectionnez une commande dans la liste. Pour ajouter ou modifier un raccourci clavier pour un fragment de code, slectionnez Fragment de code dans le menu contextuel Commandes. Les raccourcis attribus la commande apparaissent dans la zone Raccourcis. 4. Procdez de l'une des manires suivantes pour ajouter un raccourci : Si moins de deux raccourcis sont dj attribus la commande, cliquez sur le bouton Ajouter l'lment (+). Une nouvelle ligne vide apparat dans la zone Raccourcis et le point d'insertion s'affiche dans la zone Appuyer sur la touche. Si deux raccourcis sont dj attribus la commande, slectionnez-en un (il sera remplac par le nouveau raccourci). Cliquez ensuite dans la zone Appuyer sur la touche. 5. Appuyez sur une combinaison de touches. Celle-ci apparat dans la zone Appuyer sur la touche. Remarque : Si la combinaison de touches est incorrecte (par exemple, elle est dj attribue une autre commande), un message s'affiche sous la zone Raccourcis et vous en avertit. Vous ne pourrez peut-tre pas ajouter, ni modifier le raccourci. 6. Cliquez sur Remplacer. La nouvelle combinaison de touches est attribue la commande.
Modification d'un raccourci existant

1. Slectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier (Macintosh). 2. Dans le menu contextuel Commandes, slectionnez une catgorie. 3. Slectionnez une commande dans la liste, puis slectionnez un raccourci modifier. 4. Cliquez dans la zone Appuyer sur la touche, et entrez une nouvelle combinaison de touches. 5. Cliquez sur le bouton Remplacer pour modifier le raccourci. Remarque : Si la combinaison de touches est incorrecte (par exemple, elle est dj attribue une autre commande), un message s'affiche sous la zone Raccourcis et vous en avertit. Vous ne pourrez peut-tre pas ajouter, ni modifier le raccourci.
A propos des raccourcis clavier et des claviers non-U.S.
Haut de la page
Les raccourcis clavier Dreamweaver par dfaut fonctionnent principalement sur les claviers U.S. standardiss. Les claviers d'autres pays (y compris ceux qui sont produits au Royaume-Uni) peuvent ne pas prsenter la fonctionnalit ncessaire l'utilisation de ces raccourcis. Si votre clavier ne prend pas en charge certains raccourcis Dreamweaver, Dreamweaver dsactive leur fonctionnalit. Pour personnaliser des raccourcis clavier fonctionnant avec des claviers non-U.S., voir la section Modification des mappages des raccourcis clavier du manuel Extension de Dreamweaver . Voir aussi
705
XML
706
About XML and XSLT

Using XML and XSL with web pages Server-side XSL transformations Client-side XSL transformations XML data and repeating elements Previewing XML data
Using XML and XSL with web pages
To the top
Extensible Markup Language (XML) is a language that lets you structure information. Like HTML, XML lets you structure your information using tags, but XML tags are not predefined as HTML tags are. Instead, XML lets you create tags that best define your data structure (schema). Tags are nested within others to create a schema of parent and child tags. Like most HTML tags, all tags in an XML schema have an opening and closing tag. The following example shows the basic structure of an XML file: <?xml version="1.0"> <mybooks> <book bookid="1"> <pubdate>03/01/2004</pubdate> <title>Displaying XML Data with Adobe Dreamweaver</title> <author>Charles Brown</author> </book> <book bookid="2"> <pubdate>04/08/2004</pubdate> <title>Understanding XML</title> <author>John Thompson</author> </book> </mybooks> In this example, each parent <book> tag contains three child tags: <pubdate>, <title>, and <author>. But each <book> tag is also a child tag of the <mybooks> tag, which is one level higher in the schema. You can name and structure XML tags in any way, provided that you nest tags accordingly within others, and assign each opening tag a corresponding closing tag. XML documents do not contain any formattingthey are simply containers of structured information. Once you have an XML schema, you can use the Extensible Stylesheet Language (XSL) to display the information. In the way that Cascading Style Sheets (CSS) let you format HTML, XSL lets you format XML data. You can define styles, page elements, layout, and so forth in an XSL file and attach it to an XML file so that when a user views the XML data in a browser, the data is formatted according to whatever youve defined in the XSL file. The content (the XML data) and presentation (defined by the XSL file) are entirely separate, providing you with greater control over how your information appears on a web page. In essence, XSL is a presentation technology for XML, where the primary output is an HTML page. Extensible Stylesheet Language Transformations (XSLT) is a subset language of XSL that actually lets you display XML data on a web page, and transform it, along with XSL styles, into readable, styled information in the form of HTML. You can use Dreamweaver to create XSLT pages that let you perform XSL transformations using an application server or a browser. In a server-side XSL transformation, the server does the work of transforming the XML and XSL, and displaying it on the page. In a client-side transformation, a browser (such as Internet Explorer) does the work. The approach you ultimately take (server-side transformations versus client-side transformations) depends on what you are trying to achieve as an end result, the technologies available to you, the level of access you have to XML source files, and other factors. Both approaches have their own benefits and limitations. For example, server-side transformations work in all browsers while client-side transformations are restricted to modern browsers only (Internet Explorer 6, Netscape 8, Mozilla 1.8, and Firefox 1.0.2). Server-side transformations let you display XML data dynamically from your own server or from anywhere else on the web, while client-side transformations must use XML data that is locally hosted on your own web server. Finally, server-side transformations require that you deploy your pages to a configured application server, while client-side transformations only require access to a web server. For a tutorial about understanding XML, see www.adobe.com/go/vid0165.
Server-side XSL transformations
To the top
Dreamweaver provides methods for creating XSLT pages that let you perform server-side XSL transformations. When an application server performs the XSL transformation, the file containing the XML data can reside on your own server, or anywhere else on the web. Additionally, any
707
browser can display the transformed data. Deploying pages for server-side transformations, however, is somewhat complex, and requires that you have access to an application server. When working with server-side XSL transformations, you can use Dreamweaver to create XSLT pages that generate full HTML documents (entire XSLT pages), or XSLT fragments that generate a portion of an HTML document. An entire XSLT page is similar to a regular HTML page. It contains a <body> tag and a <head> tag, and lets you display a combination of HTML and XML data on the page. An XSLT fragment is a piece of code, used by a separate document, that displays formatted XML data. Unlike an entire XSLT page, it is an independent file that contains no <body> or <head> tag. If you want to display XML data on a page of its own, you would create an entire XSLT page, and bind your XML data to it. If, on the other hand, you wanted to display XML data in a particular section of an existing dynamic pagefor example, a dynamic home page for a sporting goods store, with sports scores from an RSS feed displayed on one side of the pageyou would create an XSLT fragment and insert a reference to it in the dynamic page. Creating XSLT fragments, and using them in conjunction with other dynamic pages to display XML data, is the more common scenario. The first step in creating these types of pages is to create the XSLT fragment. It is a separate file that contains the layout, formatting, and so on of the XML data that you eventually want to display in the dynamic page. Once you create the XSLT fragment, you insert a reference to it in your dynamic page (for example, a PHP or ColdFusion page). The inserted reference to the fragment works much like an Server Side Include (SSI) the formatted XML data (the fragment) resides in a separate file, while in Design view, a placeholder for the fragment appears on the dynamic page itself. When a browser requests the dynamic page containing the reference to the fragment, the server processes the included instruction and creates a new document in which the formatted contents of the fragment appear instead of the placeholder.
1. Browser requests dynamic page 2. Web server finds page and passes it to application server 3. Application server scans page for instructions and gets XSLT fragment 4. Application server performs transformation (reads XSLT fragment, gets and formats xml data) 5. Application server inserts transformed fragment into page and passes it back to the web server 6. Web server sends finished page to browser You use the XSL Transformation server behavior to insert the reference to an XSLT fragment in a dynamic page. When you insert the reference, Dreamweaver generates an includes/MM_XSLTransform/ folder in the sites root folder that contains a runtime library file. The application server uses the functions defined in this file when transforming the specified XML data. The file is responsible for fetching the XML data and XSLT fragments, performing the XSL transformation, and outputting the results on the web page. The file containing the XSLT fragment, the XML file containing your data, and the generated run-time library file must all be on the server for your page to display correctly. (If you select a remote XML file as your data sourceone from an RSS feed, for examplethat file must of course reside somewhere else on the Internet.) You can also use Dreamweaver to create entire XSLT pages for use with server-side transformations. An entire XSLT page works in exactly the same way as an XSLT fragment, only when you insert the reference to the entire XSLT page using the XSL Transformation server behavior, you are inserting the full contents of an HTML page. Thus, the dynamic page (the .cfm, .php, or .asp page that acts as the container page) must be cleared of all HTML before you insert the reference. Dreamweaver supports XSL transformations for ColdFusion, ASP, and PHP pages. Note: Your server must be correctly configured to perform server-side transformations. For more information, contact your server administrator.
To the top
Client-side XSL transformations
You can perform XSL transformations on the client without the use of an application server. You can use Dreamweaver to create an entire XSLT page that will do this; however, client-side transformations require manipulation of the XML file that contains the data you want to display. Additionally, client-side transformations will only work in modern browsers (Internet Explorer 6, Netscape 8, Mozilla 1.8, and Firefox 1.0.2). For more information on browsers that do and dont support XSL transformations, see www.w3schools.com/xsl/xsl_browsers.asp. First, create an entire XSLT page and attach an XML data source. (Dreamweaver prompts you to attach the data source when you create the new page.) You can create an XSLT page from scratch, or you can convert an existing HTML page to an XSLT page. When you convert an existing HTML page to an XSLT page you must attach an XML data source using the Bindings panel (Window > Bindings).
708
After youve created your XSLT page, you must link it to the XML file containing the XML data by inserting a reference to the XSLT page in the XML file itself (much like you would insert a reference to an external CSS style sheet in the <head> section of an HTML page). Your site visitors must view the XML file (not the XSLT page) in a browser. When your site visitors view the page, the browser performs the XSL transformation and displays the XML data, formatted by the linked XSLT page. The relationship between the linked XSLT and XML pages is conceptually similar, yet different from the external CSS/HTML page model. When you have an HTML page that contains content (such as text), you use an external style sheet to format that content. The HTML page determines the content, and the external CSS code, which the user never sees, determines the presentation. With XSLT and XML, the situation is reversed. The XML file (which the user never sees in its raw form), determines the content while the XSLT page determines the presentation. The XSLT page contains the tables, layout, graphics, and so forth that the standard HTML usually contains. When a user views the XML file in a browser, the XSLT page formats the content.
1. Browser requests XML file 2. Server responds by sending XML file to browser 3. Browser reads XML directive and calls XSLT file 4. Server sends XSLT file to browser 5. Browser transforms XML data and displays it in browser When you use Dreamweaver to link an XSLT page to an XML page, Dreamweaver inserts the appropriate code for you at the top of the XML page. If you own the XML page to which youre linking (that is, if the XML file exclusively lives on your web server), all you need to do is use Dreamweaver to insert the appropriate code that links the two pages. When you own the XML file, the XSL transformations performed by the client are fully dynamic. That is, whenever you update the data in the XML file, any HTML output using the linked XSLT page will be automatically updated with the new information. Note: The XML and XSL files you use for client-side transformations must reside in the same directory. If they dont, the browser will read the XML file and find the XSLT page for the transformation, but will fail to find assets (style sheets, images, and so on) defined by relative links in the XSLT page. If you dont own the XML page to which youre linking (for example, if you want to use XML data from an RSS feed somewhere out on the web), the workflow is a bit more complicated. To perform client-side transformations using XML data from an external source, you must first download the XML source file to the same directory where your XSLT page resides. When the XML page is in your local site, you can use Dreamweaver to add the appropriate code that links it to the XSLT page, and post both pages (the downloaded XML file and the linked XSLT page) to your web server. When the user views the XML page in a browser, the XSLT page formats the content, just like in the previous example. The disadvantage of performing client-side XSL transformations on XML data that comes from an external source is that the XML data is only partially dynamic. The XML file that you download and alter is merely a snapshot of the file that lives elsewhere on the web. If the original XML file out on the web changes, you must download the file again, link it to the XSLT page, and repost the XML file to your web server. The browser only renders the data that it receives from the XML file on your web server, not the data contained in the original XML source file.
XML data and repeating elements
To the top
The Repeating Region XSLT object lets you display repeating elements from an XML file within a page. Any region containing an XML data placeholder can be turned into a repeated region. However, the most common regions are a table, a table row, or a series of table rows. The following example shows how the Repeating Region XSLT object is applied to a table row that displays menu information for a restaurant. The initial row displays three different elements from the XML schema: item, description, and price. When the Repeating Region XSLT object is applied to the table row, and the page is processed by an application server or a browser, the table is repeated with unique data inserted in each new table row.
709
When you apply a Repeating Region XSLT object to an element in the Document window, a thin, tabbed, gray outline appears around the repeated region. When you preview your work in a browser (File > Preview in Browser), the gray outline disappears and the selection expands to display the specified repeating elements in the XML file, as in the previous illustration. When you add the Repeating Region XSLT object to the page, the length of the XML data placeholder in the Document window is truncated. This is because Dreamweaver updates the XPath (XML Path language) expression for the XML data placeholder so that it is relative to the path of the repeating element. For example, the following code is for a table that contains two dynamic placeholders, without a Repeating Region XSLT object applied to the table: <table width="500" border="1"> <tr> <td><xsl:value-of select="rss/channel/item/title"/></td> </tr> <tr> <td><xsl:value-of select="rss/channel/item/description"/></td> </tr> </table> The following code is for the same table with the Repeating Region XSLT object applied to it: <xsl:for-each select="rss/channel/item"> <table width="500" border="1"> <tr> <td><xsl:value-of select="title"/></td> </tr> <tr> <td><xsl:value-of select="description"/></td> </tr> </table> </xsl:for-each> In the previous example, Dreamweaver has updated the XPath for the items that fall within the Repeating Region (title & description) to be relative to the XPath in the enclosing <xsl:for-each> tags, rather than the full document. Dreamweaver generates context-relative XPath expressions in other cases as well. For example, if you drag an XML data placeholder to a table that already has a Repeating Region XSLT object applied to it, Dreamweaver automatically displays the XPath relative to the existing XPath in the enclosing <xsl:for-each> tags.
Previewing XML data

710
To the top
When you use Preview in Browser (File > Preview in Browser) to preview XML data that youve inserted in an XSLT fragment or an entire XSLT page, the engine that performs the XSL transformation differs from situation to situation. For dynamic pages containing XSLT fragments, the application server always performs the transformation. At other times, either Dreamweaver or the browser might be performing the transformation. The following table summarizes the situations when using Preview in Browser, and the engines that perform the respective transformations: Type of page previewed in browser Dynamic page containing XSLT fragment XSLT fragment or entire XSLT page XML file with link to entire XSLT page Data transformation performed by Application server Dreamweaver Browser
The following topics provide guidelines for helping you determine the appropriate previewing methods, based on your needs. Previewing pages for server-side transformations In the case of server-side transformations, the content the site visitor ultimately sees is transformed by your application server. When building XSLT and dynamic pages for use with server-side transformations, it is always preferable to preview the dynamic page that contains the XSLT fragment instead of the XSLT fragment itself. In the former scenario, you make use of the application server, which ensures that your preview is consistent with what your site visitors will see when they visit your page. In the latter scenario, Dreamweaver performs the transformation, and could provide slightly inconsistent results. You can use Dreamweaver to preview your XSLT fragment while you are building it, but youll be able to see the most accurate results of the data rendering if you use the application server to preview your dynamic page after youve inserted the XSLT fragment. Previewing pages for client-side transformations In the case of client-side transformations, the content the site visitor ultimately sees is transformed by a browser. You accomplish this by adding a link from the XML file to the XSLT page. If you open the XML file in Dreamweaver and preview it in a browser, you force the browser to load the XML file and perform the transformation. This provides you with the same experience as that of your site visitor. Using this approach, however, makes it more difficult to debug your page because the browser transforms the XML and generates the HTML internally. If you select the browsers View Source option to debug the generated HTML, you will only see the original XML that the browser received, not the full HTML (tags, styles, and so forth) responsible for the rendering of the page. To see the full HTML when viewing source code, you must preview the XSLT page in a browser instead. Previewing entire XSLT pages and XSLT fragments When creating entire XSLT pages and XSLT fragments, youll want to preview your work to make sure that your data is being displayed correctly. If you use Preview in Browser to display an entire XSLT page or an XSLT fragment, Dreamweaver performs the transformation using a built-in transformation engine. This method gives you quick results, and makes it easier for you to incrementally build and debug your page. It also provides a way for you to view the full HTML (tags, styles, and so forth) by selecting the View Source option in the browser. Note: This previewing method is commonly used when you begin building XSLT pages, regardless of whether you use the client or the server to transform your data. More Help topics XML tutorial
Legal Notices | Online Privacy Policy
711
Missing character entities for XSLT

Specify a missing character entity
Specify a missing character entity
To the top
In XSLT, some characters are not allowed in certain contexts. For example, you cannot use the less than sign (<) and the ampersand (&) in the text between tags or in an attribute value. The XSLT transformation engine will give you an error if those characters are used incorrectly. To solve the problem, you can specify character entities to replace the special characters. A character entity is a string of characters that represents other characters. Character entities are either named or numbered. A named entity begins with an ampersand (&) followed by the name or characters, and ends with a semicolon (;). For example, < represents the left angle bracket character (<). Numbered entities also start and end the same way, except that a hash sign (#) and a number specify the character. XSLT has the following five predefined entities: Character < (less-than) & (ampersand) > (greater-than) " (quote) (apostrophe) Entity Code < & > " '
If you use other character entities in an XSL file, you need to define them in the DTD section of the XSL file. Dreamweaver provides several default entity definitions that you can see at the top of an XSL file created in Dreamweaver. These default entities cover a broad selection of the most commonly used characters. When you preview your XSL file in a browser, Dreamweaver checks the XSL file for undefined entities and notifies you if an undefined entity is found. If you preview an XML file attached to an XSLT file or if you preview a server-side page with an XSLT transformation, the server or browser (instead of Dreamweaver) notifies you of an undefined entity. The following is an example of a message you may get in Internet Explorer when you request an XML file transformed by an XSL file with a missing entity definition: Reference to undefined entity 'auml'. Error processing resource 'http://localhost/testthis/list.xsl'. Line 28, Position 20 <p class=''test''>ä</p> -------------------^ To correct the error in your page, you must add the entity definition to your page manually.
Specify a missing entity definition

1. Look up the missing character in the character entity reference page on the W3C website at www.w3.org/TR/REC-html40/sgml/entities.html. This web page contains the 252 allowed entities in HTML 4 and XHTML 1.0. For example, if the character entity Egrave is missing, search for Egrave on the W3C web page. You will find the following entry: <!ENTITY Egrave CDATA "È" -- latin capital letter E with grave, U+00C8 ISOlat1 --> 2. Make a note of the entity name and entity code in the entry. In the example, Egrave is the entity name, and &#200 is the entity code. 3. With this information, switch to Code view and enter the following entity tag at the top of your XSL file (following the Doctype declaration and with the other entity tags): <!ENTITY entityname "entitycode;">
712
In the example, you would enter the following entity tag: <!ENTITY Egrave "È"> 4. Save your file. If you repeatedly use the same character entities, you may want to permanently add their definitions in the XSL files Dreamweaver creates by default when you use File > New.
Add entity definitions to the XSL files Dreamweaver creates by default

1. Locate the following configuration file in the Dreamweaver application folder and open it in any text editor: Configuration/DocumentTypes/MMDocumentTypeDeclarations.xml 2. Locate the declaration called mm_xslt_1: <documenttypedeclaration id="mm_xslt_1"> 3. Enter the new entity tag or tags in the list of entity tags, as follows: <!ENTITY entityname "entitycode;"> 4. Save the file and restart Dreamweaver.
713
Performing XSL transformations on the client

Workflow for performing client-side XSL transformations Creating entire XSLT pages and displaying data Link an XSLT page to an XML page
Workflow for performing client-side XSL transformations
To the top
You can perform client-side XSL transformations. Read about server-side and client-side XSL transformations and about using XML and XSL with web pages before building pages that display XML data. The general workflow for performing client-side XSL transformations is as follows (each step is described in other topics): 1. Set up a Dreamweaver site. 2. Create an XSLT page or convert an HTML page to XSLT. In your Dreamweaver site, create an entire XSLT page. Convert an existing HTML page to an entire XSLT page. 3. Attach an XML data source to the page (if you havent already done so). The XML file that you attach must reside in the same directory as the XSLT page. 4. Bind your XML data to the XSLT page. 5. Display XML data by binding the data to the entire XSLT page. 6. If appropriate, add a Repeating Region XSLT object to the table or table row that contains the XML data placeholder(s). 7. Attach the XSLT page to the XML page. 8. Post both the XML page and the linked XSLT page to your web server. 9. View the XML page in a browser. When you do so, the browser transforms the XML data, formats it with the XSLT page, and displays the styled page in the browser.
Creating entire XSLT pages and displaying data
To the top
You must use an entire XSLT page for client-side transformations. (XSLT fragments dont work for this type of transformation.) Follow these general steps for creating, binding XML data to, and formatting XSLT pages for client-side transformations: 1. Create the XSLT page. 2. Display data in the XSLT page. 3. Display repeating elements in the XSLT page.
To the top
Link an XSLT page to an XML page
After you have an entire XSLT page with dynamic content placeholders for your XML data, you must insert a reference to the XSLT page in the XML page. Note: The XML and XSL files you use for client-side transformations must reside in the same directory. If they dont, the browser will read the XML file and find the XSLT page for the transformation, but will fail to find assets (style sheets, images, and so on) defined by relative links in the XSLT page. 1. Open the XML file that you want to link to your XSLT page. 2. Select Commands > Attach an XSLT Stylesheet. 3. In the dialog box, click the Browse button, browse to the XSLT page you want to link to, select it, and click OK.
714
4. Click OK to close the dialog box and insert the reference to the XSLT page at the top of the XML document. More Help topics
715
Performing XSL transformations on the server

Workflow for performing server-side XSL transformations Create an XSLT page Convert HTML pages to XSLT pages Attach XML data sources Display XML data in XSLT pages Display repeating XML elements Insert XSLT fragments in dynamic pages Delete XSLT fragments from dynamic pages Edit XSL Transformation server behaviors Create a dynamic link Applying styles to XSLT fragments Use parameters with XSL transformations Create and edit conditional XSLT regions Insert XSL comments Use the XPath Expression Builder to add expressions for XML data
Workflow for performing server-side XSL transformations
To the top
You can perform server-side XSL transformations on the server. Read about server-side and client-side XSL transformations and about using XML and XSL with web pages before building pages that display XML data. Note: Your server must be correctly configured to perform server-side transformations. For more information, contact your server administrator. The general workflow for performing server-side XSL transformations is as follows (each step is described in other topics): 1. Set up a Dreamweaver site. 2. Choose a server technology and set up an application server. 3. Test the application server. For example, create a page that requires processing, and make sure that the application server processes the page. 4. Create an XSLT fragment or page, or convert an HTML page to an XSLT page. In your Dreamweaver site, create an XSLT fragment or an entire XSLT page. Convert an existing HTML page to an entire XSLT page. 5. Attach an XML data source to the page. 6. Display XML data by binding the data to the XSLT fragment or to the entire XSLT page. 7. If appropriate, add a Repeating Region XSLT object to the table or table row that contains the XML data placeholders. 8. Insert references. To insert a reference to the XSLT fragment in your dynamic page, use the XSL Transformation server behavior. To insert a reference to the entire XSLT page in the dynamic page, delete all of the HTML code from a dynamic page, and then use the XSL Transformation server behavior. 9. Post the page and the fragment. Post both the dynamic page and the XSLT fragment (or entire XSLT page) to your application server. If you are using a local XML file, you will need to post that as well. 10. View the dynamic page in a browser. When you do so, the application server transforms the XML data, inserts it in the dynamic page, and displays it in the browser.
Create an XSLT page
To the top
You can create XSLT pages that let you display XML data on web pages. You can create either an entire XSLT pagean XSLT page that
716
contains a <body> tag and a <head> tagor you can create an XSLT fragment. When you create an XSLT fragment, you create an independent file that contains no body or head taga simple piece of code that is later inserted in a dynamic page. Note: If you are starting with an existing XSLT page, you need to attach an XML data source to it. 1. Select File > New. 2. In the Blank Page category of the New Document dialog box, select one of the following from the Page Type column: Select XSLT (Entire page) to create an entire XSLT page. Select XSLT (Fragment) to create an XSLT fragment. 3. Click Create and do one of the following in the Locate XML Source dialog box: Select Attach A Local File, click the Browse button, browse to a local XML file on your computer, and click OK. Select Attach A Remote File, enter the URL of an XML file on the Internet (such as one coming from an RSS feed), and click OK. Note: Clicking the Cancel button generates a new XSLT page with no attached XML data source. The Bindings panel is populated with the schema of your XML data source.
The following table provides an explanation of the various elements in the schema that might appear:
Element <>
Represents Required non-repeating XML element
Details An element that appears exactly once within its parent node An element that appears one or more times within its parent node An element that appears zero or more times within its parent node Normally the repeating element when the insertion point is inside a repeating region
<>+
Repeating XML element
<>+
Optional XML element
Element node in boldface type
Current context element
XML attribute
4. Save your new page (File > Save) with the .xsl or .xslt extension (.xsl is the default).
Convert HTML pages to XSLT pages
To the top
You can also convert existing HTML pages to XSLT pages. For example, if you have a predesigned static page to which you want to add XML data, you can convert the page to an XSLT page, instead of creating an XSLT page and redesigning the page from scratch. 1. Open the HTML page that you want to convert. 2. Select File > Convert > XSLT 1.0. A copy of the page opens in the Document window. The new page is an XSL style sheet, saved with the .xsl extension.
Attach XML data sources
To the top
If you are starting with an existing XSLT page, or if you dont attach an XML data source when creating a new XSLT page with Dreamweaver, you must attach an XML data source using the Bindings panel.
717
1. In the Bindings panel (Window > Bindings), click the XML link.
Note: You can also click the Source link at the upper-right corner of the Bindings panel to add an XML data source. 2. Do one of the following: Select Attach A Local File, click the Browse button, browse to a local XML file on your computer, and click OK. Select Attach A Remote File, and enter the URL of an XML file on the Internet (such as one coming from an RSS feed). 3. Click OK to close the Locate XML Source dialog box. The Bindings panel is populated with the schema of your XML data source.
Display XML data in XSLT pages
To the top
After youve created an XSLT page and attached an XML data source, you can bind data to the page. To do this, you add an XML data placeholder to your page and then use the XPath Expression Builder or the Property inspector to format selected data that will be displayed on the page. 1. Open an XSLT page with an attached XML data source. 2. (Optional) Select Insert > Table to add a table to the page. A table helps you organize your XML data. Note: In most cases, you use the Repeating Region XSLT object to display repeating XML elements on a page. In this case, you might want to create a single-row table with one or more columns, or a two-row table if you want to include a table header. 3. In the Bindings panel, select an XML element and drag it to the place on the page where you want to insert data.
An XML data placeholder appears on the page. The placeholder is highlighted and in curly brackets. It uses the XPath (XML Path language) syntax to describe the hierarchical structure of the XML schema. For example, if you drag the child element title to the page, and that element has the parent elements rss, channel , and item , then the syntax for the dynamic content placeholder will be {rss/channel/item/title}. Double-click the XML data placeholder on the page to open the XPath Expression Builder. The XPath Expression Builder lets you format selected data, or select other items from the XML schema. 4. (Optional) Apply styles to your XML data by selecting an XML data placeholder and applying styles to it like any other piece of content using the Property inspector or the CSS Styles panel. Alternatively, you can use Design-time style sheets to apply styles to XSLT fragments. Each of these methods has its own set of benefits and limitations. 5. Preview your work in a browser (File > Preview in Browser).
718
Note: When you preview your work using Preview in Browser, Dreamweaver performs an internal XSL transformation without the use of an application server.
Display repeating XML elements
To the top
The Repeating Region XSLT object lets you display repeating elements from an XML data source in a web page. For example, if you are displaying article titles and descriptions from a news feed, and that news feed contains between 10 and 20 articles, each title and description in the XML file would probably be a child element of a repeating element. Any region in Design view containing an XML data placeholder can be changed to a repeated region. However, the most common regions are tables, table rows, or a series of table rows. 1. In Design view, select a region that contains an XML data placeholder or placeholders. The selection can be anything, including a table, a table row, or even a paragraph of text.
To select a region on the page precisely, you can use the tag selector in the lower-left corner of the Document window. For example, if the region is a table, click inside the table on the page, and then click the tag in the tag selector. 2. Do one of the following Select Insert > XSLT Objects > Repeating Region. In the XSLT category of the Insert panel, click the Repeating Region button. 3. In the XPath Expression Builder, select the repeating element, indicated by a small plus sign.
4. Click OK. In the Document window, a thin, tabbed, gray outline appears around the repeated region. When you preview your work in a browser (File > Preview in Browser), the gray outline disappears and the selection expands to display the specified repeating elements in the XML file. When you add the Repeating Region XSLT object to the page, the XML data placeholder in the Document window is truncated. This is because Dreamweaver truncates the XPath for the XML data placeholder so that it is relative to the path of the repeating element.
Set Repeating Region (XSL) properties

In the Property inspector, you can select a different XML node to create the repeating region.
719
In the Select box, enter a new node, and then press the lightning bolt icon and select the node from the XML schema tree that appears.
Edit a Repeating Region XSLT object

After youve added a Repeating Region XSLT object to a region, you can edit it using the Property inspector. 1. Select the object by clicking the gray tab that surrounds the repeated region. 2. In the Property inspector (Window > Properties), click the dynamic icon next to the Select text field. 3. In the XPath Expression Builder, make your changes and click OK.
Insert XSLT fragments in dynamic pages
To the top
After you have created an XSLT fragment, you can insert it in a dynamic web page using the XSL Transformation server behavior. When you add the server behavior to your page and view the page in a browser, an application server performs a transformation that displays the XML data from the selected XSLT fragment. Dreamweaver supports XSL transformations for ColdFusion, ASP, or PHP pages. Note: If you want to insert the contents of an entire XSLT page in a dynamic page, the procedure is exactly the same. Before using the XSL Transformation server behavior to insert the entire XSLT page, delete all HTML code from the dynamic page. 1. Open an existing ColdFusion, ASP, or PHP page. 2. In Design view, place the insertion point in the location where you want to insert the XSLT fragment. Note: When inserting XSLT fragments, you should always click the Show Code And Design Views button after placing the insertion point on the page so that you can ensure that the insertion point is in the correct location. If it isnt, you might need to click somewhere else in Code view to place the insertion point where you want it. 3. In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button and select XSL Transformation.
4. In the XSL Transformation dialog box, click the Browse button and browse to an XSLT fragment or an entire XSLT page. Dreamweaver populates the next text field with the file path or URL of the XML file that is attached to the specified fragment. To change it, click the Browse button and browse to another file. 5. (Optional) Click the Plus (+) button to add an XSLT parameter. 6. Click OK to insert a reference to the XSLT fragment in the page. The fragment is not editable. You can double-click the fragment to open the fragments source file and edit it. An includes/MM_XSLTransform/ folder is also created in the sites root folder that contains a runtime library file. The application server uses the functions defined in this file to perform the transformation. 7. Upload the dynamic page to your server (Site > Put) and click Yes to include dependent files. The file containing the XSLT fragment, the XML file containing your data, and the generated run-time library file must all be on the server for your page to display correctly. (If you selected a remote XML file as your data source, that file must reside somewhere else on the Internet.)
Delete XSLT fragments from dynamic pages

720
To the top
You can remove an XSLT fragment from a page by deleting the XSL Transformation server behavior used to insert the fragment. Deleting the server behavior deletes the XSLT fragment onlyit does not delete the associated XML, XSLT, or run-time library files. 1. In the Server Behaviors panel (Window > Server Behaviors), select the XSL Transformation server behavior that you want to delete. 2. Click the minus (-) button. Note: You should always remove server behaviors in this fashion. Manually deleting the generated code only partially removes the server behavior, even though the server behavior may disappear from the Server Behaviors panel.
Edit XSL Transformation server behaviors

After youve added an XSLT fragment to a dynamic web page, you can edit the XSL Transformation server behavior at any time.
To the top
1. In the Server Behaviors panel (Window > Server Behaviors), double-click the XSL Transformation server behavior that you want to edit. 2. Make your changes and click OK.
Create a dynamic link
To the top
You can create a dynamic link on your XSLT page that links to a specific URL when the user clicks a specified word or group of words from your XML data. For full instructions, see the Dreamweaver errata at www.adobe.com/go/dw_documentation.
Applying styles to XSLT fragments
To the top
When you create an entire XSLT page (that is, an XSLT page that contains <body> and <head> tags), you can display XML data on the page and then format the data like any other piece of content using the Property inspector or the CSS Styles panel. When you create an XSLT fragment for insertion in a dynamic page, however (for example, a fragment for insertion in an ASP, PHP, or Cold Fusion page), the rendering of styles in the fragment and in the dynamic page becomes more complicated. Although you work on an XSLT fragment separately from the dynamic page, it is important to remember that the fragment is intended for use within the dynamic page, and that the output from the XSLT fragment ultimately resides somewhere within the <body> tags of the dynamic page. Given this workflow, it is important to make sure that you do not include <head> elements (such as style definitions or links to external style sheets) in XSLT fragments. Doing so will cause the application server to place these elements into the <body> of the dynamic page, thereby generating invalid markup. For example, you might want to create an XSLT fragment for insertion in a dynamic page and format the fragment using the same external style sheet as the dynamic page. If you attach the same style sheet to the fragment, the resulting HTML page contains a duplicate link to the style sheet (one in the <head> section of the dynamic page, and another in the <body> section of the page, where the content of the XSLT fragment appears). Instead of this approach, you should use Design-time style sheets to reference the external style sheet. When formatting the content of XSLT fragments, use the following workflow: First, attach an external style sheet to the dynamic page. (This is a best practice for applying styles to the content of any web page). Next, attach the same external style sheet to the XSLT fragment as a Design-time style sheet. As the name implies, Design-time style sheets only work in the Dreamweaver Design view. After you have completed the two previous steps, you can create new styles in your XSLT fragment using the same style sheet that youve attached to your dynamic page. The HTML output will be cleaner (because the reference to the style sheet is only valid while working in Dreamweaver), and the fragment will still display the appropriate styles in Design view. Additionally, all of your styles will be applied to both the fragment and the dynamic page when you view the dynamic page in Design view, or preview the dynamic page in a browser. Note: If you preview the XSLT fragment in a browser, the browser does not display the styles. Instead you should preview the dynamic page in the browser to see the XSLT fragment within the context of the dynamic page.
Use parameters with XSL transformations
To the top
You can define parameters for your XSL transformation when adding the XSL Transformation server behavior to a web page. A parameter controls how XML data is processed and displayed. For example, you might use a parameter to identify and list a specific article from a news feed. When the page loads in a browser, only the article you specified with the parameter appears.
Add an XSLT parameter to an XSL transformation

1. Open the XSL Transformation dialog box. You can do this by double-clicking an XSL Transformation server behavior in the Server Behaviors panel (Window > Server Behaviors), or by adding a new XSL Transformation server behavior. 2. In the XSL Transformation dialog box, click the Plus (+) button next to XSLT Parameters.
721
3. In the Add Parameters dialog box, enter a name for the parameter in the Name box. The name can only contain alphanumeric characters. It cannot contain spaces. 4. Do one of the following: If you want to use a static value, enter it in the Value box. If you want to use a dynamic value, click the dynamic icon next to the Value box, complete the Dynamic Data dialog box, and click OK. For more information, click the Help button in the Dynamic Data dialog box. 5. In the Default Value box, enter the value you want the parameter to use if the page receives no run-time value, and click OK.
Edit an XSLT parameter

1. Open the XSL Transformation dialog box. You can do this by double-clicking an XSL Transformation server behavior in the Server Behaviors panel (Window > Server Behaviors), or by adding a new XSL Transformation server behavior. 2. Select a parameter from the XSLT parameters list. 3. Click the Edit button. 4. Make your changes and click OK.
Delete an XSLT parameter

1. Open the XSL Transformation dialog box. You can do this by double-clicking an XSL Transformation server behavior in the Server Behaviors panel (Window > Server Behaviors), or by adding a new XSL Transformation server behavior. 2. Select a parameter from the XSLT parameters list. 3. Click the minus (-) button.
Create and edit conditional XSLT regions
To the top
You can create simple conditional regions or multiple conditional regions on an XSLT page. You can either select an element in Design view and apply a conditional region to the selection, or you can insert a conditional region wherever the insertion point is in the document. For example, if you wanted to display the word Unavailable next to the price of an item when the item is unavailable, you type the text Unavailable on the page, select it, and then apply a conditional region to the selected text. Dreamweaver surrounds the selection with <xsl:if> tags, and only displays the word Unavailable on the page when the data match the conditions of the conditional expression.
Apply a conditional XSLT region

You can write a simple conditional expression to insert into your XSLT page. If content is selected when you open the Conditional Region dialog box, the content will be wrapped in an <xsl:if> block. If you rcontent is not selected, the <xsl:if> block is added at the insertion point on the page. Its a good idea to use the dialog box to get started and then customize the expression in Code view. The <xsl:if> element is similar to the if statement in other languages. The element provides a way for you to test a condition and take a course of action based on the result. The <xsl:if> element allows you to test an expression for a single true or false value. 1. Select Insert > XSLT Objects > Conditional Region or click the Conditional Region icon in the XLST category of the Insert panel. 2. In the Conditional Region dialog box, enter the conditional expression to use for the region. In the following example, you want to test to see if the context nodes @available attribute value is true.
3. Click OK. The following code is inserted in your XSLT page:

722
<xsl:if test="@available='true'"> Content goes here </xsl:if> Note: You must surround string values such as true in quotes. Dreamweaver encodes the quotes for you (') so that they are entered as valid XHTML. In addition to testing nodes for values, you can use any of the supported XSLT functions in any conditional statement. The condition is tested for the current node within your XML file. In the following example, you want to test for the last node in the result set:
For more information and examples on writing conditional expressions, see the <xsl:if> section in the Reference panel (Help > Reference).
Apply multiple conditional XSLT regions

You can write a simple conditional expression to insert into your XSLT page. If content is selected when you open the Conditional Region dialog box, the content is wrapped in an <xsl:choose> block. If you do not select content, the <xsl:choose> block is added at the insertion point on the page. Its a good idea to use the dialog box to get started and then customize the expression in Code view. The <xsl:choose> element is similar to the case statement in other languages. The element provides a way for you to test a condition and take a course of action based on the result. The <xsl:choose> element allows you to test for multiple conditions. 1. Select Insert > XSLT Objects > Multiple Conditional Region or click the Multiple Conditional Region icon in the XLST category of the Insert panel. 2. In the Multiple Conditional Region dialog box, enter the first condition. In the following example, you want to test to see if the context nodes price subelement is less than 5.
3. Click OK. In the example, the following code is inserted in your XSLT page: <xsl:choose> <xsl:when test="price<5"> Content goes here </xsl:when> <xsl:otherwise> Content goes here </xsl:otherwise> </xsl:choose> 4. To insert another condition, place the insertion point in Code view between <xsl:when> tag pairs or just before the <xsl:otherwise> tag, and then insert a conditional region (Insert > XSLT Objects > Conditional Region). After you specify the condition and click OK, another <xsl:when> tag is inserted in the <xsl:choose> block. For more information and examples on writing conditional expressions, see the <xsl:choose> sections in the Reference panel (Help > Reference).
723
Set conditional region (If) properties

The purpose of the Set Conditional Region Property inspector is to change the condition used in a conditional region in your XSL page. The conditional region tests the condition and takes a course of action based on the result. In the Test box, enter a new condition, and then press Enter.
Set conditional (When) properties

The purpose of the Set Conditional Region Property inspector is to change the condition used in a multiple conditional region in your XSL page. The multiple conditional region tests the condition and takes a course of action based on the result. In the Test box, enter a new condition, and then press Enter.
To the top
Insert XSL comments

You can add XSL comment tags to a document, or you can wrap a selection in XSL comment tags.
Add XSL comment tags to a document

Do one of the following: In Design view, select Insert > XSLT Objects > XSL Comment, type the contents of the comment (or leave the box blank), and click OK. In Code view, select Insert > XSLT Objects > XSL Comment. You can also click on the XSL Comment icon in the XSLT category of the Insert panel.
Wrap a selection in XSL comment tags

1. Switch to Code view (View > Code). 2. Select the code you want to comment. 3. In the Coding toolbar, click the Apply Comment button and select Apply <xsl:comment></xsl:comment> Comment.
Use the XPath Expression Builder to add expressions for XML data
To the top
XPath (XML Path Language) is a non-XML syntax for addressing portions of an XML document. It is used mostly as a query language for XML data, just as the SQL language is used to query databases. For more information on XPath, see the XPath language specification on the W3C website at www.w3.org/TR/xpath. The XPath Expression Builder is a Dreamweaver feature that lets you build simple XPath expressions for identifying specific nodes of data and for repeating regions. The advantage of using this method instead of dragging values from the XML schema tree is that you can format the value that is displayed. The current context is identified based on the position of the insertion point in the XSL file when the XPath Expression Builder dialog box is opened. The current context is in boldface type in the XML schema tree. As you make selections within this dialog box, the correct XPath statements, relative to your current context, are generated. This simplifies the process of writing correct XPath expressions for beginners and advanced users. Note: This feature is designed to help you build simple XPath expressions to identify a specific node or for repeating regions. It does not allow you to edit the expressions by hand. If you need to create complex expressions, use the XPath Expression Builder to get started and then customize your expressions in Code view or with the Property inspector.
Create an XPath expression to identify a specific node

1. Double-click the XML data placeholder on the page to open the XPath Expression Builder. 2. In the XPath Expression Builder (Dynamic Text) dialog box, select any node in the XML schema tree. The correct XPath expression is written in the Expression box to identify the node. Note: If you select a different node in the XML schema tree, the expression changes to reflect your choice. In the following example, you want to display the price subelement of the item node:
724
This selection would insert the following code in your XSLT page: <xsl:value-of select="price"/> 3. (Optional) Select a formatting option from the Format pop -up menu. Formatting a selection is useful when the value of your node returns a number. Dreamweaver provides a predefined list of formatting functions. For a complete list of available formatting functions and examples, see the Reference panel. In the following example, you want to format the price subelement as a currency with two decimal places:
These options would insert the following code in your XSLT page: <xsl:value-of select="format-number(provider/store/items/item/price,'$#.00')"/> 4. Click OK. 5. To display the value of each node in the XML file, apply a repeating region to the element containing the dynamic text (for example, an HTML table row or a paragraph). For more information and examples on selecting nodes to return a value, see the <xsl:value-of/> section in the Reference panel.
Select a node to repeat

725
You can select a node to repeat over and, optionally, to filter the results. In the XPath Expression Builder dialog box, your selected content will be wrapped inside an <xsl:for-each> block. If you have not selected content, the <xsl:for-each> block will be entered at the insertion point of your cursor. 1. Double-click the XML data placeholder on the page to open the XPath Expression Builder. 2. In the XPath Expression Builder (Repeating Region) dialog box, select the item to repeat in the XML schema tree. The correct XPath expression is written in the Expression box to identify the node. Note: Repeating items are identified with a Plus (+) symbol in the XML schema tree. In the following example, you want to repeat each item node within the XML file.
When you click OK, the following code is inserted in your XSLT page: <xsl:for-each select="provider/store/items/item"> Content goes here </xsl:for-each> In some cases, you may want to work with a subset of the repeating nodesfor example, you may only want items where an attribute has a specific value. In this case, you need to create a filter.
Filter the data to be repeated

Use a filter to identify repeating nodes that have specific attribute values. 1. In the XML schema tree, select a node to repeat. 2. Click the Build Filter expander button. 3. Click the Plus (+) button to create an empty filter. 4. Enter the filter criteria in the following fields: Filter By Specifies the repeating node that contains the data you want to filter by. The pop -up menu provides a list of ancestor nodes relative to the node you selected in the XML schema tree. Where Specifies the attribute or subelement of the Filter By node that will be used to limit the results. You can select an attribute or subelement from the pop -up menu, or you can enter your own XPath expression in this field to identify children that exist deeper within the schema tree. Operator Specifies the comparison operator to use in the filter expression. Value Specifies the value to check for in the Filter By node. Enter the value. If dynamic parameters are defined for your XSLT page, you can select one from the pop -up menu. 5. To specify another filter, click the Plus (+) button again. As you enter values or make selections in the pop -up menus, the XPath expression in the Expression box changes. In the following example, you want to restrict the result set to those item nodes where the value of the @available attribute is true.
726
When you click OK, the following code is inserted in your XSLT page: <xsl:for-each select="provider/store/items/item[@available = 'true']"> Content goes here </xsl:for-each> Note: You need to surround string values such as true in quotes. Dreamweaver encodes the quotes for you (') so that they are entered as valid XHTML. You can create more complex filters that allow you to specify parent nodes as part of your filter criteria. In the following example, you want to restrict the result set to those item nodes where the stores @id attribute is equal to 1 and the items price node is greater than 5.
727
When you click OK, the following code is inserted in your XSLT page: <xsl:for-each select="provider/store[@id = 1]/items/item[price > 5]"> Content goes here </xsl:for-each> For more information and examples of repeating regions, see the <xsl:for-each> section in the Reference panel. More Help topics
728

Dreamweaver Reference

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Dreamweaver Reference

Transféré par

Droits d'auteur :

Formats disponibles

ADOBE DREAMWEAVER

Prsentation des nouvelles fonctionnalits

CSS Designer (Dreamweaver CC et versions ultrieures)

Synchronisation des paramtres de Dreamweaver avec Creative Cloud

Prise en charge des plates-formes modernes

Interface utilisateur simplifie

Nouveauts de Dreamweaver 12.2 | Creative Cloud

Intgration des polices Web Edge

Amliorations de la mise en forme de grille fluide

Nouveaux types d'entres de formulaire HTML5

Nouveaux lments de formulaire pour jQuery Mobile

Aperu et inspection de pages Web dans plusieurs priphriques

Amliorations du flux d'activits d'Edge Animate

Mises jour du flux PhoneGap

Autres modifications et amliorations

Nouveauts de Dreamweaver 12.1 | Creative Cloud

Insertion de vido et d'audio HTML5

Insertion d'lments smantiques HTML5 depuis le panneau Insertion

Importation de compositions Adobe Edge Animate

Prise en charge de la zone de travail HTML5

Amliorations de la prise en charge des lments de formulaire dans HTML5

Recherche en direct (Mac OS)

Amliorations apportes la gestion des polices

Bote de dialogue Valise de polices Web

Icnes distinctes pour les polices systme et les polices Web

Menu Insertion rorganis

Panneau CSS Designer

Cration et ajout de feuilles de style

Dfinition de requtes multimdias

Dfinition des proprits

Toutes les proprits

Proprits dfinies uniquement

Les proprits remplaces sont barres.

Format barr pour les proprits remplaces

Dfinition des marges extrieures et intrieures et de la position

proprit 'marge intrieure'

Icnes de dsactivation, suppression et liaison pour les marges

Dsactivation ou suppression de proprits

Aperu et inspection de pages Web sur plusieurs priphriques

Importation de compositions Edge Animate

Importation de compositions Edge Animate

Modification de l'emplacement par dfaut des fichiers extraits

Enveloppe du fichier insr dans une balise

Ajout de polices Edge et de polices Web la liste des polices

Ajout de polices Adobe Edge la liste des polices

Ajout de polices Web locales la liste des polices

Cration de piles de polices personnalisables

Aperu des polices insres

Mise jour de la balise de script de polices Web dans une page

Utilisation d'effets jQuery dans Dreamweaver

Ajout d'effets jQuery

Effets jQuery bass sur un vnement

Suppression d'effets jQuery

Recherche de fichiers sur la base de leur nom ou de leur contenu | Mac OS

Insertion d'audio HTML5

Insertion d'audio HTML5 Prvisualisation de l'audio dans un navigateur

Insertion d'audio HTML5

MP3 Oui Non Oui Oui Non

Wav Non Oui Oui Oui Oui

Ogg Non Oui Oui Non Oui

Panneau Proprits pour l'audio HTML5

Prvisualisation de l'audio dans un navigateur

Insertion de vido HTML5

Insertion de vido HTML5