Accessibilité

Article Dreamweaver

Mark Fletcher
Mark Fletcher
www.vtc.com*

Travail dans le code avec DreamweaverMX

Macromedia na jamais oubli que les dveloppeurs passent un certain temps dvelopper leur code de faon manuelle. Ses outils rpondent exactement cette mthode de travail et comprennent des technologies telles que ldition roundtrip une fonction qui permet dchanger le code entre un diteur HTML au format texte et Macromedia DreamweaverMX sans changer le contenu ou la structure du document source.


Alors que Dreamweaver 4 ne comprenait que des fonctions de base (pour ce qui est du travail dans le code), DreamweaverMX est maintenant un environnement de dveloppement complet rappelant ceux de Macromedia HomeSite et ColdFusion Studio. DreamweaverMX affiche maintenant la syntaxe avec diffrentes couleurs, propose des conseils de code, comprend un slecteur de balises, etc. ce qui en fait un logiciel correspondant maintenant exactement ce que les dveloppeurs qui prfrent programmer manuellement attendaient.

Lobjet de cet article est dexplorer les fonctions qui font de DreamweaverMX lenvironnement idal pour les puristes du travail dans le code.

Lespace HomeSite/Style Codeur

Sous Windows, une bote de dialogue de configuration de lespace de travail (avec trois options) est automatiquement affiche au premier dmarrage de DreamweaverMX. Par exemple, la slection de loption HomeSite/Style Codeur entrane la configuration de lespace de travail conformment laperu, encadr dune bordure rouge dans lillustration suivante:

La slection de cette option configure lespace de travail de DreamweaverMX dune faon qui ne devrait pas surprendre les dveloppeurs habitus HomeSite et ColdFusion Studio. Cette slection initiale peut tre change tout moment. Pour changer le style daffichage de lespace de travail de DreamweaverMX:

  1. Choisissez Edition > Prfrences.
  2. Cliquez sur la catgorie Gnral.
  3. Cliquez sur le bouton Changer despace de travail.
  4. Slectionnez les options suivantes: Espace de travail DreamweaverMX ou HomeSite/Style Codeur.
  5. Cliquez sur OK.
  6. Redmarrez DreamweaverMX.

Affichage de conseils de code

Les conseils de code de Dreamweaver facilitent la rdaction de code ne contenant pas derreurs. Ces conseils de code apparaissent en mode daffichage du code ou dans linspecteur et affichent, en fonction des caractres que vous commencez saisir, un menu de balises, dattributs et de fonctions correspondant au contexte. Les conseils de code sont compatibles avec les langages HTML, CFML, ASP, ASP.NET, JSP, PHP, ActionScript et WML. Ils peuvent tre personnaliss et peuvent galement tre utiliss avec des balises ou objets personnaliss. Les balises affiches correspondent au type de document que vous avez choisi de crer. Pour insrer une balise avec la fonction de conseil de code:

  1. Tapez un crochet douverture (<) pour afficher une liste des balises.
  2. Faites dfiler la liste et double-cliquez sur la balise de votre choix pour linsrer.
  3. Si la balise peut comprendre des attributs, appuyez sur la barre despacement pour afficher une liste des attributs valides. Slectionnez un attribut et appuyez sur Entre.
  4. Tapez la valeur de lattribut (si ce dernier naccepte quune valeur spcifique, slectionnez-la dans la liste des valeurs valides).

Vous pouvez ajouter des attributs et valeurs supplmentaires en reprenant les tapes 3 et4. Faites simplement attention ne pas appuyer sur la barre despacement entre une valeur et ses guillemets("). Appuyez sur la touche dchappement pour fermer la liste. Pour modifier une balise:

Vous pouvez utiliser les conseils de code pour modifier une balise existante en mode Code en plaant le point dinsertion gauche du crochet de fermeture de la balise et en appuyant sur la barre despacement. Cela a pour effet dafficher une liste des attributs valides pour la balise en question. Pour rdiger une page laide de conseils de code et de classes CSS:

  1. >Ajoutez les styles que vous souhaitez utiliser, en crant une feuille CSS externe ou en les plaant dans la section HEAD de votre page web.
  2. Une fois la premire partie de votre balise tant ajoute (par exemple, la balise de paragraphe), appuyez sur la barre despacement et slectionnez class dans le menu.
  3. Appuyez sur Entre (ou Retour) pour afficher toutes les classes que vous avez cres, tel quillustr ci-dessous:
  4. Appuyez sur Entre (ou Retour) une fois la classe slectionne.

Equilibrage des balises et des crochets

Dreamweaver vous permet de vous assurer du bon quilibrage de vos balises qui doivent contenir un lment douverture et un lment de fermeture grce deux commandes: Slectionner balise parente et Slectionner enfant. Ces deux commandes se rvlent trs utiles lorsque vous travaillez avec des balises comprenant plusieurs niveaux, tel que cest le cas avec les tableaux imbriqus, par exemple. Pour slectionner une balise parente:

  1. Placez le point dinsertion lintrieur du code imbriqu que vous souhaitez vrifier.
  2. Choisissez Edition > Slectionner balise parente.

Cette commande a pour effet de slectionner tout le code compris dans ces balises (et de lafficher en mode Code). Si vous slectionnez cette commande plusieurs reprises, et que vos balises sont correctement quilibres, DreamweaverMX slectionnera finalement les balises <html> et </html> de dbut et de fin de votre code.

Le panneau Rfrence

DreamweaverMX comprend tout un jeu dinformations de rfrence, y compris les ouvrages suivants:

Le panneau Rfrence est accessible partir des modes Cration comme Code, de mme qu partir de linspecteur de code. Pour ouvrir le panneau Rfrence:

En mode Cration, un clic du bouton droit sur une balise et la slection de la commande Rfrence ouvre le panneau correspondant, avec des informations concernant la balise slectionne. En mode Code ou dans linspecteur de code, procdez de la faon suivante:

  1. Slectionnez une balise, un attribut ou un mot-cl.
  2. Cliquez du bouton droit (Windows) ou avec la touche Contrle enfonce (Macintosh) et choisissez Rfrence dans le menu contextuel (vous pouvez galement appuyer sur Maj+F1).

Vous pouvez changer la taille du texte affich dans le panneau Rfrence en cliquant sur la petite flche en haut droite du panneau, tel quillustr ci-dessous:

Le panneau Rfrence est galement li aux rapports daccessibilit. La slection dune entre du panneau Rsultats et le clic sur le bouton Plus dinfos entrane laffichage de conseils daccessibilit correspondants. Illustration.

Inspection des balises

Linspecteur des balises (accessible via le menu Fentre) facilite la manipulation des balises grce une feuille de proprits similaire celles utilises dans HomeSite et ColdFusion Studio.

Linspecteur des balises comprend deux outils intgrs: une vue structure et une feuille des proprits. Ces outils vous permettent de modifier votre code sans vous obliger travailler directement dans la fentre du document.

La vue structure facilite la slection dune balise en mode Code ou Cration. Le menu des options et le menu contextuel vous permettent dinsrer de nouvelles balises, tel que prsent dans cette illustration.

Dans le cas dun document XML, vous pouvez galement utiliser la commande dinsertion de balise vide. Par exemple, la slection de cette option et lajout de BR ajoute la balise suivante: <BR/>. Bien que la plupart des balises XML soient des balises containers (par exemple, <container></container>), il est possible dinclure des balises vides destines indiquer un changement, tel quun passage la ligne. Le caractre / indique au moteur danalyse XML quil sagit dune balise vide.

La slection dune balise entrane laffichage dune liste de tous les attributs qui y sont associs. DreamweaverMX ajoute toujours lattribut la fin de la balise.

Insertion de balises laide du slecteur

Le slecteur de balises permet dinsrer toute balise contenue dans les bibliothques de Dreamweaver. Pour insrer une nouvelle balise:

  1. En mode Code, cliquez du bouton droit (ou avec la touche Contrle enfonce) et choisissez Insrer la balise dans le menu. Notez que vous pouvez galement afficher le panneau en cliquant sur licne Slecteur de balises dans la barre doutils du document.
    Le volet gauche du slecteur de balises contient une liste des bibliothques supportes, le volet droit contenant les balises de la bibliothque actuellement slectionne.
    Vous pouvez galement cliquer sur le noeud du dossier pour afficher diffrentes catgories, telles que Composition de page, Elments de page, Formatage et mise en forme, Tableaux, etc. Par exemple, la slection de Elments de page entrane laffichage de trois icnes: Gnral, Spcifique au navigateur et Dsuet. Un clic sur une de ces icnes entrane laffichage des balises correspondantes dans le volet de droite, comme dans cette illustration.
  2. Une fois la balise slectionne, vous pouvez cliquer sur le bouton Infos sur les balises pour afficher des informations concernant son emploi. Vous pouvez galement cliquer sur le bouton Rfrence pour afficher le panneau du mme nom, qui vous permet de consulter les informations sur tous les attributs associs de mme que sur la balise.
  3. Cliquez sur le bouton Insrer pour insrer la balise dans votre code. Si ncessaire, lditeur de balises apparat pour vous permettre dentrer des informations supplmentaires.

Manipulation, ajout et importation de bibliothques de balises

Lditeur de bibliothque de balises (accessible via le menu Edition) permet de grer toutes les bibliothques fournies avec DreamweaverMX:

Les bibliothques de balises sont des lments cls de lapplication. Lditeur de bibliothque de balises vous permet dajouter et de supprimer des bibliothques, des balises et des attributs, de dfinir les proprits des bibliothques et de modifier les attributs des diffrentes balises.

Une des meilleures fonctions de lditeur des bibliothques de balises est quil vous permet de spcifier la faon dont votre code apparat dans les fentres de documents. Vous pourrez ainsi dfinir des options de passage la ligne, de formatage du contenu et de hauteur de casse. Cette illustration est un exemple de modification de lapparence de la balise <table>. Pour changer lapparence dune balise:

Supposons que vous souhaitiez que les balises de cellules de tableaux (<td>) de chaque ligne apparaissent sur la mme ligne dans votre code. Voici comment obtenir ce rsultat:

  1. Ouvrez lditeur de bibliothque de balises (Edition > Bibliothque de balises).
  2. Cliquez sur le noeud Balises HTML.
  3. Slectionnez le dossier td.
  4. Slectionnez Aucun saut de ligne dans le menu Sauts de ligne.
  5. Slectionnez Non format dans le menu Sommaire [ndt: qui devrait tre Contenu]:
  6. Cliquez sur OK pour enregistrer les modifications.

Toutes les balises <td> des tableaux que vous insrerez apparatront maintenant sur une seule ligne, comme dans cette illustration. Pour ajouter de nouvelles bibliothques de balises:

  1. Lditeur de bibliothque de balises vous permet dajouter des bibliothques de balises, des balises et des attributs. Cliquez sur le bouton (+) de lditeur de bibliothque et choisissez Nouvelle bibliothque de balises. La bote de dialogue Nouvelle bibliothque de balises apparat.
  2. Entrez le nom de la nouvelle bibliothque et cliquez sur OK. Le dossier de la nouvelle bibliothque apparat en bas de la liste.
  3. Le nouveau dossier tant slectionn, choisissez les types de documents dans lesquels cette nouvelle bibliothque sera disponible.
  4. Cliquez sur le bouton (+) et choisissez Nouvelles balises.
  5. Vrifiez que la nouvelle bibliothque est bien slectionne dans la bote de dialogue Nouvelles balises avant dentrer les noms de vos nouvelles balises:
  6. Le dossier des nouvelles balises tant encore slectionn, cliquez nouveau sur le bouton (+) et choisissez Nouveaux attributs.
  7. Entrez tous les attributs associs la balise:
  8. Slectionnez un des attributs, puis sa casse et son type, comme dans cette illustration.
  9. Cliquez sur OK pour enregistrer les modifications apportes une fois ces oprations termines.
  10. Vous pourrez dsormais utiliser ces nouveaux lments avec le slecteur de balises, linspecteur de balises ou les conseils de code, tel quillustr ci-dessous:

DreamweaverMX a t dvelopp de faon permettre lutilisation de balises personnalises, telles que les balises XML. Et cest pour ce faire que lditeur de bibliothque de balises supporte limportation de balises personnalises. Les balises importes peuvent alors tre affiches (en mode Code) par les conseils de code.

DreamweaverMX permet dimporter les formats suivants:

Vous pouvez importer des balises personnalises et les intgrer lenvironnement auteur. Pour importer des balises personnalises:

  1. Ouvrez lditeur de bibliothque de balises (Edition > Bibliothque de balises).
  2. Cliquez sur le bouton (+).
  3. Choisissez ASPNet, DTDSchema ou JSP, comme dans cette illustration.

Pour importer des balises dun fichier DTD ou schma XML:

  1. Ouvrez lditeur de bibliothque de balises (Edition > Bibliothque de balises).
  2. Cliquez sur le bouton (+) et choisissez DTDSchema > Importer le fichier DTD ou Schema XML.
  3. Entrez le fichier ou lURL du fichier DTD ou schma.
  4. Entrez le prfixe devant tre utilis avec les balises. Ce prfixe sera utilis pour identifier les balises et leur appartenance une bibliothque spcifique.
  5. Cliquez surOK.

Vous pourrez en apprendre plus sur limportation de balises ASP.NET personnalises, de balises JSP partir dun fichier ou serveur (web.xml), ou de balises JRun, dans la documentation de DreamweaverMX.

Comme vous aurez pu le constater, DreamweaverMX contient toute une panoplie doutils qui vous permettront de travailler dans un environnement semblable ceux de programmes tels que HomeSite et ColdFusion Studio. La souplesse demploi de DreamweaverMX permet enfin aux designers, dveloppeurs et programmeurs de travailler dans un environnement unifi leur permettant de facilement crer et grer des sites web professionnels. Les nouvelles fonctions de travail dans le code facilitent grandement la rdaction.

A propos de lauteur Mark Fletcher est rdacteur chez Virtual Training Company et se spcialise dans la cration de CD de formation* et de didacticiels en ligne sur les produits de Macromedia tels que Dreamweaver* , UltraDev, Fireworks, HomeSite et Sitespring. Mark dveloppe galement des didacticiels en ligne pour WebAssist.com*, un dveloppeur dextensions pour Dreamweaver et UltraDev.