Modifier DreamWeaver 4 pour produire du XTML valide

par Carrie Bickner traduit et adapté par Christophe Ducamp

vendredi 23 juillet 2004

CityDesk accepte naturellement tous les éditeurs externes pour créer vos gabarits en Mode Designer. Si vous ne disposez pas de la mise à jour de Dreamweaver 5 désormais plus conforme aux standards du web, vous pourrez trouver dans cet article adapté d'un article original de A list apart,comment adapter facilement Dreamweaver 4 pour produire du code bien formé avec un balisage conforme aux standards du web. Quelques petites manipulations et vous serez capable de produire un document valide XHTML. Prenez une heure ou deux, suivez ces directions et retrouvez le charme de Dreamweaver intégré dans votre CityDesk.

Mais en production n'oubliez pas de valider toutes vos pages. Tout simplement parce que vous avez converti du Dreamweaver vers un outil plus standard ne signifie pas que vos pages seront parfaites. (Nous faisons tous des fautes)

Commençons Petit

XHTML s'écrit en bas de casse, aussi il est nécessaire que Dreamweaver sache écrire ainsi :

  1. Ouvrez Dreamweaver 4.
  2. A partir du menu déroulant sélectionnez Editer >Préférences.
  3. Dans la boîte de dialogue Préférences, séléctionnez le Format de Code sur la gauche de la boîte de dialogue.
  4. Réglez "Casse des Balises" et "Casse des Attributs" sur minuscules.
Régler en minuscule. Ici sur la version anglo-saxonne. Sur la version française, retrouvez le Format de Code et sélectionnez minuscules au lieu de lowercase !

Doctype par default

Les documents XHTML doivent commencer avec un espace nom et une déclaration du Doctype XHTML (incluant une URIL pointant vers la définition du DocType). Malheureusement, le gabarit par défaut dans Dreamweaver 4 ne fait rien de cela :

<html>


 <head>


 <title>Untitled Document</title>


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


 </head>

Mais si vous êtes un webdesigner rigoureux, vous n'omettrez pas d'utiliser un gabarit qui ressemble à cela :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


 <html xmlns="http://www.w3.org/1999/xhtml" 
xml:lang="fr" lang="fr">


 <head>


 <title>Untitled Document</title>


 </head>

Il est facile de modifier le gabarit par défaut en incluant ceci ou tout autre DocType et déclaration d'espace-nom :

  1. Retrouvez le document appelé Default.html :
    Windows: C:\ProgramFiles\Macromedia\Dreamweaver4\
    Configuration\Templates\Default.html.
    Macintosh: HardDrive/Dreamweaver4/Configuration/
    Templates/Default.html.
  2. Faites une sauvegarde du fichier .
  3. Ouvrez Default.html et modifier l'en-tête de telle manière d'inclure la déclaration de Document Type et d'espace-nom au dessus (ou le Doctype et la déclaration d'espace-nom de votre choix).
  4. Vous pouvez aussi vouloir éditer la balise <body> , en effaçant la couleur de body et les styles de couleur de texte/lien que vos feuilles de styles devraient gérer.
  5. A ce stade, vous pouvez aussi régler les liens vers les feuilles de styles, insérer des balises basiques méta, et déclarer votre jeu de caractère. (sur CityDesk cf réglage du Jeu de Caractère en UTF8 avec CityDesk)

Fermer les élements non fermés

XHTML exiqge que vous fermierz les éléments non fermants incluant les balises de formulaires, les balises d'images, les balises de règles horizontales et les balises de saut de ligne. (Pour en savoir plus voir XHTML Guidelines dans le NYPL Online Style Guide et les règles W3C HTML Compatibility pour XHTML 1.0.) Fermer tous ces éléments peut être très dévoreur de temps mais heureusement Dreamweaver peut faire le travail pour vous :

Fermer le saut de ligne

Démarrons avec le simple saut de ligne à savoir modifier <br> vers <br />.

D'abord, trouvez le fichier nommé LineBreak.htm dans Configuration\Objects\Characters.

Trouver des objets. Ouvrez ce fichier mais n'oubliez pas d'abord de faire un backup.
  1. Créez une sauvegarde de LineBreak.htm.
  2. Ouvrez LineBreak.htm.
  3. Editez la ligne 17 de telle façon que <br> devienne <br />.
  4. Sauvez et fermez le fichier.
  5. Ouvrez un nouveau document HTML dans Dreamweaver et insérer un saut de ligne.
  6. Regardez le source pour vous assurer que ça fonctionne.
Fermeture des balises de passage à la ligne

Femer les images

Le processus pour le fichier Image.js file est similaire mais un tout petit peu plus compliqué :

  1. Allez sur Configuration\Objects\Common.
  2. Sauvegardez Image.js.
  3. Ouvrez le fichier Image.js et modifiez la ligne 21 de :
    "return '<img src="' + newURL + '">';"
    vers :
    "return '<img src="' + newURL + '" />';".
  4. A nouveau, testez votre travail en ouvrant un nouveau document HTML et en y insérant un fichier image.

Répétez ces étapes pour le fichier HR.htm et autres fichiers éléments non fermants dans ces fichiers :

Vérifiez votre travail

Après toutes ces modifications des éléments non fermants, créez un nouveau document qui utilise tous ces éléments et testez. Prévisualisez les pages dans quelques navigateurs sur quelques plates-formes et envoyez votre page au validateur HTML. Si vous avez fait une erreur, vous ne voulez pas l'arranger avec un balisage cassé.

Caractères et Styles

Dreamweaver facilité l'insertion de caractères spéciaux comme un tiret cadratin ou des balises appropriées pour les citations. Sous le menu déroulant d'insertion, sélectionnez Special Characters et vous verrez une liste des plus communs, prêts pour une insertion facile.

Mais deux problèmes rendent ces options moins que désirables. D'abord le processus pour sélectionner emdash, par exemple, prend beaucoup trop d'étapes. Il est beaucoup plus facile de saisir --. Ensuite, la séquence de caracactère insérée par Dreamweaver n'est pas valide. Aussi si vous utilisez ces caractères tels quels, votre site ne pourra pas valider.

Deux solutions pour résoudre ces problèmes :

Editer les Fichiers des Caractères Spéciaux

Vous pouvez éditer les objets caractères eux-mêmes de telle façon qu'ils produisent des entités de caractères Unicode. Travaillons avec le tiret cadratin :

  1. Revenez vers le fichier Configuration\Objects\Characters.
  2. Ouvrez emdash.html.
  3. Changez return "&#151;" en return "&#8212;".
  4. Sauvegardez le document, et testez le comme vous l'aviez fait au-dessus.

Continuez le processus pour les autres fichiers dans le répertoire Characters. Pour modifier le menu déroulant Insertion> Caractères Spéciaux>Autres, éditez à nouveau le fichier commands\InsertEnt.htm. A nouveau, faites une sauvegarde de ce fichier avant de l'éditer.

Attention : Dreamweaver n'affichera pas quelques séquences de caractère Unicode en mode prévisualisation. Ne soyez pas effrayé quand il rend &#8220 ; (marque de citation doublée) comme un point. Tout ira bien quand vous le verrez dans le navigateur.

Création de Raccourcis Claviers

Maintenant que vous avez joliment écrit l'Unicode, il reste encore un peu de travail pour insérer des petits bougres. Vous pouvez créer des raccourcis claviers pour les séquences de caractères en éditionant le document menus.xml dans vos fichiers programmes (Configuration>Menus>menus.xml.).

Vous pourriez par exemple créeer cmd+shft+h pour un tiret cadratin. J'ai aussi créé des raccourcis pour les balises de citation droite et gauche.

Avant de faire cela, fermez Dreamweaver. Editez le fichier menus.xml dans un autre éditeur comme HomeSite, BBEdit, PageSpinner ou Notepad. Assurez-vous que vous n'utilisez pas une séquence de commandes déjà en service.

Unicode em-dash ou tiret cadratin.

Le Bold et le Strong

Pendant que vous travaillez dans le fichier menus.xml, vous pourriez aussi désirer à pratiquer un peu de considération plus sémantique. Les balises <b> et <i> valideront, mais l'utilisation de ces balises de mise en forme ne sont pas vraiment dans l'esprit d'un bon balisage. Elles ne signifient rien, elle sont simplement destinées à la mise en forme. Si vous vous souciez de la structure du document pour désire écrire du XHTML, vous devriez utiliser à la place les balises ayant plus de sens <strong> et <em> .

Plusieurs façons de faire que Dreamweaver fasse ceci, mais la plus simple que j'ai trouvée est de modifier le fichier menus.xml de cette façon :

Bold devient strong, Italic devient em.

J'ai simplement évoqué les items de menu _Bold l'argument pour strong, et _Italic l'argument pour em. De cette façon, quand vous sélectionnez bold à partir du menu déroulant ou si vous utilisez les commandes clavier gras ou italique, ces balises ayant plus de sens sur le plan sémantique apparaîtront à la place.

Attention : Ceci ne modifie pas le HTML généré par la Fenêtre Propriétés.

Mise à jour : Après la publication de cet article, Francois Jordaan a implémenté les modifications XHTML discutées ici et les a conditionnées dans un fichier téléchargeable pour être plus pratique. Regardez la section Aide & Remerciements plus bas.

Nettoyage des mauvaises pages avec des extensions

Un développeur appelé Jason Dalgarno a été très généreux pour rendre disponible une extension qui vous permet de convertir vos pages en XHTML. Notez que c'est un téléchargement sous forme d'archive zippée. Une fois décompressée, le gestionnaire d'extension Dreamweaver l'ouvrira automatiquement. L'outil pourra :

Souvenez-vous bien de réaliser une copie de sauvegarde de la page (ou du site) avant de travailler avec ce nouvel outil.

Un peu de combine est exigée avant de prendre vraiment possession de cet outil. Par défaut, l'extension fonctionnera chaque fois que vous sauvegardez un document. J'ai trouvé cela un peu gênant et j'ai modifié mes préférences de telle façon que cet outil fonctionne au moment où je lui demande.

Super Extension Dreamweaver HTMLXHTML DTD

Cette petite extension manuelle vous permet de modifier le DTD d'une page avec une commande unique. Notez que si vous travaillez avec une version 3 ou précédente, vous aurez aussi besoin de télécharger le gestionnaire d'extension Macromédia.

Installation de l'Extension

  1. Allez sur Macromedia Dreamweaver Exchange et cherchez l'extension Super HTML-XHTML DTD appropriée pour votre machine.
  2. Ouvrez Dreamweaver.
  3. A partir du menu déroulant Commandes, sélectionner Gérer les Extensions.
  4. Naviguez vers le fichier Extension Super HTML-XHTML DTD que vous avez téléchargé et double-cliquez dessus. L'extension devrait maintenant être installée.

Aide & Remerciements

Les modifications discutées dans cet articles ont été produites et exécutées par Francois Jordaan et sont disponibles en téléchargement à partir de son site personnel.

Merci à Rachel Andrew, William Samplonius, Sam Marshall, Yvonne Adams, Austin Govella, David Perini, Steve Champeon et à la communauté Webdesign-L community pour l'aide de cet article.

Discussion

Est-ce que ça fonctionne pour vous aussi ? Vous pouvez discuter de cet article en anglais.

Carrie Bickner, a.k.a. the Rogue Librarian, est Assistant Director du Digital Information Design pour The New York Public Librarys Digital Library Program, l'auteur de Web Design on a Shoestring (New Riders Press, 2003), et co-auteur du très connu NYPL Online Style Guide.

Fait avec CityDesk  site meter