CityDesk et Standards du Web - le wiki

Convertir Une Page Existante

Différence (dernière modification) (Auteur, affichage normal de la page)

Modifié: 21c21
[[toc][Table Des Matières : Exercice de Conversion d'une Page Existante]]
[[toc]Table Des Matières : Exercice de Conversion d'une Page Existante]

Effacé: 30,32d29
= Regardons la structure =
#passez en mode html en cliquant sur l'onglet (vous êtes dans l'éditeur citydesk)
#Au lieu d'étudier le code ligne par ligne, voyons comment se structure la page. Pour faire cela nous ajoutons une feuille de style temporaire en haut du document. La première règle sera de placer une bordure rouge de 2 pixel autour de tous les éléments table et ajouter 3 pixels d'espaces bancs autour d'eux. La deuxième règle donne aux éléments td une bordure de 1px violette et pointillée avec un padding de 2 px.

Modifié: 34,419c31
soit
<pre>
<head>
<title></title>
<html>
<head>
<title>Travel Guide: Ragged Point Inn</title>
<style type="text/css">
/*styles temporaires*/
table {border:2px solid red; margin: 3px;}
td {border: 1px solid dotted purple; padding: 2px;}
</style>
</pre>

Et parce que chacune des bordures fines rouges représentera le bord extérieur d'une table il est ainsi facile de visualiser la structure de la page. La bannière en haut de la page a sa propre table. Le reste du document est structuré dans une seconde table avec plusieurs tables incluses dedans. Un point à signaler est que la barre de droite utilise trois tables distinctes, la dernière comprenant une table encapsulée à l'intérieur.

Un autre truc de mise en page à signaler est l'utilisation de cellules de tables vide pour maintenir un espace ouvert. Regardez ces cellules qui contiennent des fichiers images appelés blank.gif. Des images de 1 x 1 pixel. Une rapide recherche dans le code révèle que vous avez 16 élements img qui renvoient à ce même fichier images. Par exemple

<pre>
<tr>
<td bgcolor="#A98763"><img src="blank.gif" height="1" width="1" alt=""></td>
</tr>
</pre>

Eliminer ces fichiers img sera l'une de nos priorités essentielles parce qu'ils ajoutent des éléments vraiment non indispensables pouvant être remplacés par les propriétés CSS comme margin et padding


A ce stade nous pouvons démarrer le processus de conversion...

= Conversion du Document =

Aller d'une conception toute HTML vers une conception HTML + CSS exige de passer par deux étapes :
#Délester tous les éléments de présentation HTML
#Les ajouter dans la feuille de style pour les remplacer


== Faire tomber pour se diriger vers le minimum =

Il est temps à ce stade de faire une copie du fichier tout HTML et de faire tomber tous les éléments de présentation HTML. Indéniablement la section la plus difficile de cette conversion pour passer à la mise en page HTML CSS. Un bon moyen de procéder est d'utiliser la fonction chercher/remplacer mais il y a encore besoin d'aller dans le code et de supprimer à la main tous les éléments de présentation :
*les éléments font
*les éléments br
*les entités nbsp
*les attributs bgcolor et background
*les attributs align et valign là où ils apparaissent
*Les attributs de table comme : width, border et cellpadding
*Toute cellule de table qui contient seulement une image ou rien dedans
*Tout attribut d'élément body (comme text ou link)

Notons que nous ne retirons pas les cellules de table qui contiennnent du texte ou des images visibles.

Quand vous aurez éliminé ces éléments vous devriez obtenir ce type de page. Elle peut sembler bien nue mais les choses iront bien mieux dès que nous commencerons la mise en style conforme au document original.


== Première étape : Guérir l'élément body =

La première chose à réparer est l'élément body. Dans le balisage original, il comprenait un nombre impressionnant d'attributs hérités de l'HTML 4 et attributs propriétaires. Le dernier inclut marginheight, marginwidth et l'attribut background sur l'élément td. Puis il y a les attributs valides mais non nécessaires comme align, valign, bgcolor et ainsi de suite.

<pre>
<body marginwidth="4" marginheight="4" topmargin="4" leftmargin="4" rightmargin="4" link="#990000" vlink="#990099" text="#000000">
</pre>

Nous pouvons remplacer chacun de ces attributs par un équivalent CSS. marginheight et marginwidth peuvent être remplacés par une simple déclaration de marge (margin) et le texte et les couleurs des liens sont faciles à recréer.

<pre>
<html>
<head>
<title>Travel Guide....</title>
<style type="text/css">
body {margin: 4px; color: black; background: white;}
a:link {color: #990000;}
a:visited {color: #990099;}
</style>
</pre>

A ce stade encore peu de gain parce que la saisie de ces éléments requiert
plus de saisie que les attributs de body. Patience !

== Etablissement de Styles Communs =

Nous alons fixer une politique de style globale pour tous les tableaux et cellules de tables dans le document.

*D'abord tous les tableaux n'ont pas les mêmes réglages pour les attributs de cellpadding et cellspacing. Nous établirons un style global qui règle le padding des cellules du tableau à 0 et nous soucierons des exceptions plus tard. Dans la même veine, presque chaque table est réglée avec une largeur (width) de 100%, de telle façon que nous pouvons recréer cela dans la CSS.
*Notons que tout le texte sur la page est en fonte sans-serif, mais chaque cellule n'utilise pas la même fonte sans-serif. Quelques éléments appellent de l'Arial et la plupart des éléments en rouge appellent du Verdana en premier. Comme pour le padding de cellule, nous écrirons une règle pour couvrir la majorité et nous soucierons des exceptions plus tard.

<pre>
body {margin: 4px; color: black; background: white;}
table {width: 100%; margin: 0;}
table td {padding: 0; border-width: 0; vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;}
a:link {color: #990000;}
</pre>

Nous avons aussi réglé toutes les cellules de tableaux pour avoir une bordure égale à zéro (ce qui signifie pas de bordure du tout) et pour aligner leurs contenus avec le sommet de la cellule.

Avec ces quelques déclarations, nous avons ainsi remplacé touts les attributs valign, border, et cellspacing du vieux document. De la même manière la déclaration font-family remplace au moins 49 éléments font éliminés du balisage.

Nous pouvons voir les résultats dans la figure 1.4.

Encore très laid convenons-en mais il y a encore beaucoup de style à venir !


== Restaurer le MastHead (Bannière) =

La table au sommet de la page contenant le nom du site et une petite publicité.

Dans le fichier original nous avions :

<pre>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="bottom" background="topbg.gif">
<font size="+3" color="#442200" face="Arial, Helvetica, Verdana, sans-serif">Travel Guide</font>
</td>
<td width="234" align="center" valign="middle">
<img src="ad.gif" height="60" width="234" alt="advertisement">
</td>
</tr>
</table>
</pre>

Grâce à notre nettoyage du balisage, voilà ce que nous avons désormais :

<pre>
<table cellspacing="0">
<tr>
<td>Travel Guide</td>
<td><img src="ad.gif" height="60" width="234" alt="advertisement"></td>
</tr>
</table>

Deux défis se posent :
*répliquer les styles de la cellule Travel Guide de telle manière que le texte ressembe à ce qu'il était avant que nous nous débarassions de l'élément font, et de l'attribut valign et ainsi de suite...
*s'assurer que les cellules ont une largeur correcte

Pour y parvenir, nous devrions identifier chacune des cellules avec une étiquette (label) unique, de telle façon que nous disposions d'un moyen de cibler chaque cellule avec son propre style. C'est exactement le rôle de l'attribut id.

<pre>
<table cellspacing="0">
<tr>
<td id="title">Travel Guide</td>
<td id="advert"><img src="ad.gif" height="60" width="234" alt="advertisement"></td>
</tr>
</table>
</pre>

Maintenant que chacune de ces cellules de tableaux ont été identifiés, nous pouvons régler un style avec les sélecteurs d'id.
Dans la première cellule,nous avons besoin de recréer le style du texte et le placer au bas de cellule. Rappelez-vous que nous avons déjà une règle qui fixe la police(font-element) pour toutes les cellules de tableaux. mais l'ordre des polices dans cette règle était [[mark]Verdana, Arial, Helvetica, sans-serif]. La balise font du titre appelée est [[mark]Arial, Helvetica, Verdana, sans-serif]. Le text était aussi graissé en utilisant la balise <b> et mis en couleur marron. Pour finir, la taille à régler était de +3.

CSS n'accepte pas ces valeurs, mais dans la plupart des cas +3 sera égal à environ 200%. Ainsi nous avons le style suivant illustré dans la figure 1.5

<pre>
a:visited {color: #990099;}
td#title {vertical-align: bottom; color: #442200;
font: bold 200% Arial, Helvetica, Verdana, sans-serif;}
</pre>


Un bon début mais il manque toujours l'image d'arrière-plan. Nous pouvons l'amnener facilement avec la propriété background

<pre>
td#title {vertical-align: bottom; color: #442200;
background: transparent url(topbg.gif) left top;
font: bold 200% Arial, Helvetica, Verdana, sans-serif;}
</pre>

Dans la figure 1.5, notez que la publicité n'est pas placée comme nous aimerions. Souvenez-vous que nous avons déjà une règle établissant que toutes les tables ont une largeur (width) de 100% ainsi le problème est que la table est trop étroite. Les cellules sont tout simplement trop larges : En l'absence de tout autre information, le navigateur a rendu chaque cellule à égale distance. Ce que nous avons besoin de faire est de définir la largeur de l'une d'entre elles permettant à l'autre d'occuper l'espace restant :

<pre>
td#title {vertical-align: bottom; color: #442200;
background: transparent url(topbg.gif) left top;
font: bold 200% Arial, Helvetica, Verdana, sans-serif;}
td#advert (width:234 px;}
</pre>

Une telle règle indique au navigateur que la cellule de publicité doit être de 234 px de large - la même largeur que l'image - Le navigateur règlera la largeur à cette distance et fera que l'autre cellule -la cellule de titre- aussi large qu'il faudra pour remplir le reste de la table globale. Ainsi nous obtenons le résultat en figure 1.6


== Le Contenu et Son Sommet (Le Menu Breadcrumbs ou les petits cailloux) =

Avec l'en-tête masthead sous contrôle, nous nous sommes souciés de la première [[mark]table] dans le document. Le reste de la page est inséré dans une seconde [[mark]table] mais comme la première, nous n'allons pas ajouter un [[mark]id] vers l'élément [[mark]table] lui-même. Parce que nous ajouterons des [[mark]id]s aux cellules elles-mêmes, il n'est pas nécessaire de mettre un [[mark]id] sur la [[mark]table].

Jetons un oeil a la première rangée de la table. Elle contient exactement deux cellules mais dans la version originale, beaucoup de balises étaient inclus dans la présentation de ces cellules :



<pre>
<tr>

<td bgcolor="#663300" valign="middle"><font size="+2"> </font>
<font face="Arial, Helvetica, Verdana, sans-serif" color="#FFFFFF" size="+1">
Destinations</font></td>
<td colspan="2" bgcolor="#997753" valign="middle"><font size="-1"
face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF"> <b>
<a href="/northam/">
<font color="#FFFFFF">North America</font></a> >
<a href="/northam/west/">
<font color="#FFFFFF">Western US</font></a> >
<a href="northam/west/ca/">
<font color="#FFFFFF">California</font></a> >
<a href="/northam/west/ca/mid/">
<font color="#FFFFFF">Mid-state</font></a> >
<a href="/northam/west/ca/mid/pch">
<font color="#FFFFFF">Pacific Coast Highway</font></a> >
</b></font></td>
</tr>
</pre>


Comparons à ce que nous avons maintenant :

<pre>
<tr>
<td>Destinations</td>
<td colspan="2">
<a href="/northam/">North America</a> >
<a href="/northam/west/">Western US</a> >
<a href="northam/west/ca/">California</a> >
<a href="/northam/west/ca/mid/">Mid-state</a> >
<a href="/northam/west/ca/mid/pch">Pacific Coast Highway</a> >
</td>
</tr>
</pre>

Identifions ce que ces cellules partagent en commun avant de travailler sur les styles. D'abord, tous étaient réglés à [[mark]valig="middle"] et qualifiés avec du texte en blanc (color="#FFFFFF"). Le texte dans toutes les cellules était graissé avec l'élément <b>.

Aussi identifions les cellules [[mark]id] et aussi la rangée qui les contient pour préparer nos styles


<pre>
<tr id="content-top">
<td id="sidetop">Destinations</td>
<td id="crumbs" colspan="2">
<a href="/northam/">North America</a> >
<a href="/northam/west/">Western US</a> >
<a href="northam/west/ca/">California</a> >
<a href="/northam/west/ca/mid/">Mid-state</a> >
<a href="/northam/west/ca/mid/pch">Pacific Coast Highway</a> >
</td>
</tr>
</pre>

La première chose à effectuer est d'utiliser l'[[mark]id] de ligne pour appliquer des styles communs au contenu des cellules. Nous ferons cela en utilisant un sélecteur descendant. Un sélecteur descendant sélectionne un élément qui descend d'un autre (par exemple une table, un td, ul ou li). Dans la règle nous avons simplement écrit que nous sélectionnons n'importe quel élément td qui est descendant de n'importe quel élément qui a un id avec une valeur de content-top. Ceci diminue considérablement la sélection des cellules. En CSS1 on parlait de sélecteur contextuel.


<pre>
td#advert {width: 234 px}
#content-top td {color: white; vertical-align: middle; font-weight:bold;}
</style>
</pre>

Remplissons les arrières-plans et polices de ces deux cellules afin d'avoir une meilleure de ce que ça donne. Tout ce dont nous avons besoin est de reproduire les valeurs de [[mark]bgcolor] pour obtenir les couleurs d'arrière-plan :

<pre>
#content-top td {color: white; vertical-align: middle; font-weight:bold;}
tr td#sidetop {background: #663300;}
tr td#crumbs {background: #997753;}
</style>
</pre>

Maintenant tout ce nous avons à faire est ajouter les valeurs nécessaires pour les familles de police et les tailles dans les deux cellules. La cellule sidetop est comme notre titre : les déclarations de marquage original pour Arial avant toute autre police. Les cellules crumbs (petits cailloux), cependant utilisent l'ordre Verdana, Arial, Helvetica, sans-serif exactement les mêmes que sur la règle précédente énoncée pour table td. De ce fait nous avons besoin seulement de définir une taille de police [[mark]font-size] pour les cellules [[mark]crumbs] parce que nous prenons soin de préserver la taille et la famille de la police du [[mark]sidetop] en utilisant la propriété [[mark]font] ( voir la figure 1.7)


<pre>
tr td#sidetop {background: #663300;
font: 115% Arial, Helvetica, Verdana, sans-serif;}
tr td#crumbs {background: #997753; font-size: 85%;}
</style>
</pre>


Les choses sont un peu serrées dans ces cellules, de telle manière que nous souhaitons ajoute un peu de padding (la taille des espaces autour d'un élément). Autre chose à noter : Le mot Destinations n'est pas graissé. Ceci à cause de la déclaration : font: 115% Arial, Helvetica, Verdana, sans-serif; a l'effet de rendre la largeur de la police [[mark]font-weight] de la cellule à [[mark]normal]. Ceci arrive parce que les mots-clés manquants pour la largeur, le style et la variance du texte sont réglés à défaut, et toutes sont [[mark]normal]. Aussi est-il nécessaire d'ajouter que nous devons graisser ce texte.... (ajouter bold)


<pre>
tr td#sidetop {background: #663300;
font: bold 115% Arial, Helvetica, Verdana, sans-serif;}
tr td#crumbs {background: #997753; font-size: 85%;}
</style>
</pre>


et ouvrir un peu d'espace autour du texte dans ces cellules en lui ajoutant un peu de padding.


<pre>
#content-top td {color: white; vertical-align: middle;
font-weight: bold; padding: 0.1em 0.2 em 0;}
</pre>

[[mark]em] signalons qu'en CSS em est l'unité se référant à une hauteur de police donnée. En CSS, une hauteur en em est définie comme équivalente à la boîte de caractère pour une police donnée. L'unité em permet de définir une taille relative de police : par exemple 1.3em équivaut à une taille de 130%.

Dans notre exemple du padding, on parcourt dans le sens des aiguilles d'une montre en partant du sommet. Ici 0.1em définit le padding du sommet, 0.2em le padding droite et gauche et 0 le padding du bas. Mais on aurait pu écrire pour avoir le même résultat : [[mark]0.1em 0.2em 0 0.2em] et obtenu le même résultat !


L'autre chose à réparer dans cette ligne est la couleur des liens dans la cellule des petits cailloux (crumbs). Dans la conception originale ils étaient tous en blancs, mais ici il y a le rouge que nous avons déjà défini pour tous les liens du documents. Ce rouge est défini dans la règle a:link {color: #990000} qui outrepasse la couleur white que nous avons assigné à la cellule elle-même. La même chose se serait produite si n'importe lequel de ces liens avait été visité exception faite que les liens auraient été en violet (##990099). De ce fait les flèches sont en blanc, mais les liens restent rouge. Il est temps de définir deux règles de sélecteurs descendants :

<pre>
tr td#crumbs {background: #997753; font-size: 85%;}
tr td#crumbs a:link {color: white; }
tr td#crumbs a:visited {color: gray; }
</style>
</pre>


Entre le padding et la couleur donnée aux liens, nous obtenons un résultat montré dans la figure 1.8 très proche de la conception originale. Il pourrait y avoir quelques pixels de différences dans les largeurs de cellule, mais personne ne le remarquera !


== Stylisme sur la Sidebar =

Le haut de la page est en bonne forme. Il est temps de donner un coup de chiffon à cette barre à gauche. C'est le premier endroit où l'on peut considérablement réduire le code et nous verrons les gains de productivité associé pour la maintenance de ce menu de gauche.

Le code en l'état de la conception originale est trop long à lister ici mais jetons un coup d'oeil aux trois premières lignes de la table qui contient les liens vers la destination Antarctica :
<pre>
<td width="120" valign="top" bgcolor="#EBDAC6">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="blank.gif" height="3" width="1" alt=""></td>
</tr>
<tr>
<td> <a href="/antarctic/"><font size="-1" face="Verdana, Arial, Helvetica, sans-serif">Antarctica</font></a></td>
</tr>
<tr>
<td bgcolor="#A98763"><img src="blank.gif" height="1" width="1" alt=""></td>
</tr>
<tr>
</pre>


Pour comparer, voilà le jeu complet de liens après avoir dénudé tout le code HTML non nécessaire y compris la cellule de table qui contient cette table :

<pre>
<td>
<table cellspacing="0">
<tr><td><a href="/antarctic/">Antarctica</a></td></tr>
<tr><td><a href="/asia/">Asia</a></td></tr>
<tr><td><a href="/austral/">Australia</a></td></tr>
<tr><td><a href="/europe/">Europe</a></td></tr>
<tr><td><a href="/india/">India</a></td></tr>
<tr><td><a href="/northam/">North America</a></td></tr>
<tr><td><a href="/southam/">South America</a></td></tr>
</table>
</td>
</pre>

Nous avons besoin à ce stade d'identifier l'élément td avec :
<pre>
<td id="leftside" >
</pre>

La première étape est de recréer les styles à partir du code original HTML.

<pre>
tr td#crumbs a:visited {color:gray ;}
td#leftside {width: 120px; background: #EBDAC6;}
</style>
</pre>

Souvenez-vous que nous n'avons pas besoin de définir un alignement vertical (vertical-align:top) parce que cela est déjà fait au début de la feuille de style. Tout ce qu'il reste à faire est de définir la largeur et l'arrière-plan comme nous l'avons fait au-dessus.

Ensuite nous avons besoin d'envisager soigneusement ce que la conception originale avait l'intention de faire : Les images blanches entre les liens étaient insérées de telle manière que leurs cellules aient une taille de 1 pixel et un arrière-plan avec un marron médium. L'effet est d'obtenir des bordures fines entre les liens. Maintenant que ces cellules sont fixés, mais que les cellules contenant les liens demeurent, nous pouvons déposer un style directement :

<pre>
td#leftside {width: 120px; background: #EBDAC6;}
td#leftside {border-bottom: 1px solid #A98763;}
</style>
</pre>


Sur la Figure 1.9, vous constatez que de simples bordures remplacent des combinaisons complexes d'images et de cellules.


A ce stade, nous sommes prêts à régler la taille de la police pour satisfaire les exigences de la conception originale et lancer quelques lignes de [[mark]padding][[footnote].

Un autre moyen de créer un espace de 3 px est de déclarer padding-top: 3px pour la table leftside. Si nous faisions de la sorte et laissions la marge du haut de la table en plac, cela donnerait une spération de 6 px parce que le padding et la marge s'additionneraient à cette distance] pour rendre les choses plus jolies :

<pre>
td#leftside {border-bottom: 1px solid #A98763; font-size: 85%; padding: 0 0 1px 0.33em;}
td#leftside table {margin-top: 3px}
</style>
</pre>





A suivre sur /Suite !
Passer à la page /Exercice


Chantier En cours de Construction

Cet exercice tiré de Eric Meyer ISBN 0-7357-1245-X est à pratiquer avec :

Intention pédagogique    

L'idée est de prendre une page existante balisée à la vieille école du HTML avec plein de tables pour la convertir en HTML/CSS. Cet exercice doit démontrer l'avantage du design CSS.
  • Le nombre d'images doit être réduit au minimum
  • Nous supprimerons quelques tables
  • Le produit fini doit se rapprocher d'une vraie conception HTML proche des standards.
  • Nous inclurons toutes les astuces pour intégrer le résultat dans CityDesk.
Autres informations utiles : '
  • La page de référence sur le weblog compagnon est disponible ici
  • Vous pouvez travailler avec l'éditeur intégré de CityDesk. Dans CityDesk vous pouvez choisir de travailler avec plusieurs autres éditeurs comme votre éditeur préféré (Dreamweaver, ou l'excellent HtmlTidy qui permet de disposer d'utilitaires de nettoyage de la syntaxe).
Table Des Matières : Exercice de Conversion d'une Page Existante
Intention pédagogique   
Préparation   

Préparation    

  1. Téléchargez le dossier sur http://www.ericmeyeroncss.com/projects/01/proj01.zip / Décompressez-le.
  2. Ouvrez un nouveau fichier site CityDesk
    1. Importez le dossier complet proj01 dans citydesk avec les fichiers images (commande insert > Import folder from disk) - Vous disposez désormais de tous les fichiers de travail dans votre fichier CityDesk
    2. Collez le code source html du fichier ch0101.html dans un nouveau gabarit (view template puis créez new template)
Passer à la page /Exercice
 
© GPL 6 Juin, 2004