|
Convertir Une Page Existante /
Exercice
 | | Table Des Matières Page Un | |
|
|
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.
soit
<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>
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
<tr>
<td bgcolor="#A98763"><img src="blank.gif" height="1" width="1" alt=""></td>
</tr>
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 le code 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.
Passons à la PremièreEtape...
| 