Utilisation de styles HTML (.XML - eXtended Markup Language)

Ressemblant for aux CSS, le XML permet également de définir d'autres styles personnalisés pour ses feuilles HTML.

Imaginons que nous désirons un style bellenature qui est en fait une grosse écriture, en gras de couleur verte, en utilisant la technologie XML.

Marche à suivre

  1. Allez dans un nouveau document
  2. Ecrivez J'aime la nature
  3. Sélectionnez ce texte, mettez le en vert, taille 5, gras
  4. Fenêtre/Style HTML
  5. Dans cette fenêtre, en haut à droite, cliquez sur la petite flèche, juste à côté du point d'interrogation, et choissez Nouveau...
    Vous constatez dans la fenêtre qui s'ouvre que les attributs que vous avez sélectionnés sont déjé présents dans les listes de choix. Vous pouvez encore à ce stade les modifier
  6. Dans le nom, écrivez bellenature, et OK

A ce stade, vous constatez que dans la fenêtre, un nouveau style a fait son apparition : bellenature. Le petit a veut dire que c'est un attribut de police, pas un attribut de paragraphe. C'est à dire que centré par exemple, lui, est un attribut de paragrahe. Il s'écrit d'ailleurs comme ceci en HTML :

Différences entre styles de paragraphe et de police

Ceci est un texte centre

<P ALIGN="CENTER">Ceci est un texte centre;</P>

qui n'est pas la même chose qu'une partir de texte écrit en gras qui est une commande de police :

Ceci est du texte gras, simplement

<P>Ceci est du texte <B>gras</B>, simplement</P>

Dans le premier cas, c'est la balise P qui s'est agrémentée de ALIGNE="CENTER", tandis que dans l'exemple du gras, c'est une nouvelle balise B qui encadre le mot "gras"

Cet apparté pour expliquer la présence du petit a.

Le fichier XML

Dans le plan du site, comme Dreamweaver a constaté l'ajout d'un nouveau style HTML, il a créé un dossier Library, et y a ajouté styles.xml, dans lequel nous retrouvons la définitions de nos styles HTML, y compris les anciens comme le nouveau style :

<mm:style name="Gras" type="char" apply="add" bold />
<mm:style name="Légende" format="p" align="center" apply="replace" font="Arial, Helvetica, sans-serif" size="2" color="#808080" bold italic />
<mm:style name="Copyright" format="p" align="center" apply="replace" font="Georgia, Times New Roman, Times, serif" size="1" italic />
<mm:style name="Accentuer, sans-serif" type="char" apply="replace" font="Verdana, Arial, Helvetica, sans-serif" bold />
<mm:style name="Largeur fixe" type="char" apply="replace" font="Courier New, Courier, mono" />
<mm:style name="Gros titre" align="left" apply="replace" font="Verdana, Arial, Helvetica, sans-serif" size="+2" bold />
<mm:style name="Normal" apply="replace" font="Georgia, Times New Roman, Times, serif" size="+1" />
<mm:style name="Rouge" type="char" apply="add" color="#FF0000" />
<mm:style name="bellenature" type="char" apply="replace" size="5" color="#339900" bold />

ATTENTION, Contrairement aux CSS, qui sont des feuilles de style dynamique, c'est à dire que lorsqu'on change les paramètre d'une écriture dans un CSS, tous les documents prennent en compte la modification, j'ai apparemment constaté que dans le cas de l'utilisation du XML, DreamWeaver se contente d'aller chercher la définition dans le fichier XML, et l'importe. Ensuite, si on corrige le style dans le fichier XML, avec ou sans l'assistant, les documents qui utilisaient ce style NE SONT PAS mis à jour !