Vous êtes sur la page 1sur 729

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.

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

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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.

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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 : <!--La balise de script suivante tlcharge une police du serveur de polices Web d'Adobe Edge en vue de l'utiliser dans la page Web. Nous vous recommandons de ne pas la modifier.--> <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 : <!--La balise de script suivante tlcharge une police du serveur de polices Web d'Adobe Edge en vue de l'utiliser dans la page Web. Nous vous recommandons de ne pas la modifier.--> <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.

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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.

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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.

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

26

Prise en charge amliore de HTML5 pour les lments de formulaire


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.

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

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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.

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

32

Modifications des options d'insertion


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.

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

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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.

Une partie du contenu issu des liens prsents sur cette page peut apparatre en anglais seulement.

42

Flux dactivits et espace de travail


Une partie du contenu issu des liens prsents sur cette page peut apparatre en anglais seulement.

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

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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

Informations juridiques | Politique de confidentialit en ligne

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

Informations juridiques | Politique de confidentialit en ligne

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

Informations juridiques | Politique de confidentialit en ligne

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

Informations juridiques | Politique de confidentialit en ligne

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 (&nbsp;) 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

Informations juridiques | Politique de confidentialit en ligne

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

Informations juridiques | Politique de confidentialit en ligne

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

Informations juridiques | Politique de confidentialit en ligne

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

Informations juridiques | Politique de confidentialit en ligne

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


1. Choisissez Edition > Prfrences (Windows) ou Dreamweaver > Prfrences (Macintosh).

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

Informations juridiques | Politique de confidentialit en ligne

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
Une partie du contenu issu des liens prsents sur cette page peut apparatre en anglais seulement.

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.

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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 .

Configuration d'un serveur d'valuation


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

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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.

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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.

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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)

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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


1. Choisissez Site > Grer les sites.

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

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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.

Informations juridiques | Politique de confidentialit en ligne

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.

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

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

Informations juridiques | Politique de confidentialit en ligne

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

Gestion de sites 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.

Informations juridiques | Politique de confidentialit en ligne

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

Informations juridiques | Politique de confidentialit en ligne

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

Une partie du contenu issu des liens prsents sur cette page peut apparatre en anglais seulement.

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

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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.

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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.

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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 : <!--balise Div de conteneur--> <div id="container"> <!--balise Div de barre latrale--> <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> <!--balise Div du contenu principal--> <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> <!--balise Div de conteneur--> <div id="container"> <!--balise Div de barre latrale--> <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> <!--balise Div du contenu principal--> <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.

Cration d'une page avec une mise en forme CSS


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

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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.

Informations juridiques | Politique de confidentialit en ligne

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


1. Excutez une 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
1. Excutez une vrification de compatibilit avec les navigateurs.

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

Informations juridiques | Politique de confidentialit en ligne

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

Informations juridiques | Politique de confidentialit en ligne

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.

Informations juridiques | Politique de confidentialit en ligne

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

Informations juridiques | Politique de confidentialit en ligne

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.

Informations juridiques | Politique de confidentialit en ligne

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

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

Informations juridiques | Politique de confidentialit en ligne

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

Vous souhaitez partager un didacticiel ?

Dreamweaver CS5 - Inspection CSS


Scott Fegette, gestionnaire produit Dreamweaver Didacticiel vido prsentant Inspection CSS Voir aussi

Informations juridiques | Politique de confidentialit en ligne

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

Informations juridiques | Politique de confidentialit en ligne

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

Informations juridiques | Politique de confidentialit en ligne

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.

Informations juridiques | Politique de confidentialit en ligne

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.

Informations juridiques | Politique de confidentialit en ligne

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.

Informations juridiques | Politique de confidentialit en ligne

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.

Informations juridiques | Politique de confidentialit en ligne

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.

Informations juridiques | Politique de confidentialit en ligne

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

Informations juridiques | Politique de confidentialit en ligne

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.

Informations juridiques | Politique de confidentialit en ligne

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

Informations juridiques | Politique de confidentialit en ligne

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.

Une partie du contenu issu des liens prsents sur cette page peut apparatre en anglais seulement.

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

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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 : <!--balise Div de conteneur--> <div id="container"> <!--balise Div de barre latrale--> <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> <!--balise Div du contenu principal--> <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> <!--balise Div de conteneur--> <div id="container"> <!--balise Div de barre latrale--> <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> <!--balise Div du contenu principal--> <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.

Cration d'une page avec une mise en forme CSS


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

Les publications Twitter et Facebook ne sont pas couvertes par les dispositions de Creative Commons. Informations juridiques | Politique de confidentialit en ligne

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

Informations juridiques | Politique de confidentialit en ligne

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.

Informations juridiques | Politique de confidentialit en ligne

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.

Informations juridiques | Politique de confidentialit en ligne

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

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

Informations juridiques | Politique de confidentialit en ligne

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.

Informations juridiques | Politique de confidentialit en ligne

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

Informations juridiques | Politique de confidentialit en ligne

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

Informations juridiques | Politique de confidentialit en ligne

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.

Informations juridiques | Politique de confidentialit en ligne

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.

Informations juridiques | Politique de confidentialit en ligne

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

Informations juridiques | Politique de confidentialit en ligne

227

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.

Informations juridiques | Politique de confidentialit en ligne

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

Informations juridiques | Politique de confidentialit en ligne

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.

Informations juridiques | Politique de confidentialit en ligne

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.

Informations juridiques | Politique de confidentialit en ligne

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

Informations juridiques | Politique de confidentialit en ligne

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

Informations juridiques | Politique de confidentialit en ligne

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

Informations juridiques | Politique de confidentialit en ligne

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

Informations juridiques | Politique de confidentialit en ligne

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.

Informations juridiques | Politique de confidentialit en ligne

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

font: Arial; font-size:medium;

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

Informations juridiques | Politique de confidentialit en ligne

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