Conversion d'une mise en page en tableaux vers CSS

André Vincent — 2005-09-27T03:56:00Z

Convertir un document HTML mis en page à l'aide de tableaux
en document mis en page à l'aide de CSS de façon à en faire un document optimisé et conforme aux normes et standards d'interpolarité et d'accessibilité.

L'objectif secondaire est aussi de préparer un document qui pourra être éventuellement utilisé comme gabarit (template) dans divers sites dynamiques.

0. CONSIDÉRATIONS

Nous utiliserons comme point de départ une page située assez profondément dans l'arborescence d'un site institutionnel que nous connaissons bien : le site du Collège Ahuntsic. Plus précisément, une page du département Histoire et géographie.

1. PRÉALABLE

Assurons-nous d'abord d'utiliser des outils performants et modernes.

D'abord, un logiciel de navigation moderne, respectueux des normes et standards. Nous recommandons fortement pour cet exercice d'utiliser la toute dernière version française de Firefox. De plus, installons-y des outils de développements, d'analyse et de diagnostic indispensables à tout développement web : Web Developper
Utilisons un éditeur HTML et CSS repectueux des normes et des standards. Sur Mac, la toute dernière version démo de BBedit est tout à fait convenable. Sur Windows, la dernière version de HTML-Kit combiné à Top Style Lite (free) peuvent aussi convenir. Si vous avez la toute dernière version de Dreamweaver MX 2004, ça peut aussi aller, quoiqu'un peu lourd pour nos besoins. Enfin, si vous désirez utiliser un éditeur CSS graphique, il existe Simple CSS (gratuit) disponible pour Mac, Windows et Linux.

Source :

Département : Histoire et géographie

2. RÉCUPÉRATION ET CONVERSION DES DOCUMENTS

Créer un dossier NOM-PRENOM-AHUNTSIC pour y récupérer les fichiers originaux de la page source.
Avec FIREFOX, enregistrer dans ce dossier la page ( Web Page, complete ).
Ouvrir dans Firefox objectifs.html pour vérifier si tout a été récupéré.
On constate que l'image de survol ACCUEIL avec son petit triangle orange est absente ; nous devons la récupérer. Dans Firefox, cliquer sur l'image et demandez Save image as... dans le dossier objectifs_files
Renommer le dossier objectifs_files -> images.
Sortir le fichier ahuntsic.css du dossier images et le placer au même niveau que objectifs.html
Dans le dossier images, changer les suffixes .jfif en .jpg afin de pouvoir éditer les images dans Photoshop (.jfif est une autre extension pour identifier un fichier au format JPEG, il est reconnu par Firefox, mais pas par Photoshop, de là la nécessité de convertir).

Analyser le fichier source objectifs.html et ses diverses composantes.
- Dans la partie HEAD nous retrouvons un javascript qui contient diverses fonctions que nous analyserons plus tard ; pour l'instant, nous ne ferons que le récupérer.
- Nous retrouvons aussi dans la partie HEAD, un lien vers la feuille de style externe ; nous allons aussi la récupérer plus tard.
- Dans l'élément BODY, nous retouvons (après l'attribut onload) des attributs pour les couleurs du texte, du fond et des liens ainsi que l'image à placer dans le fond ; nous devrons récupérer ces informations pour les convertir en feuille de style des sélecteurs BODY, a

a:link

a:visited

- Sous l'élément BODY, on retrouve des tableaux qui mettent en place les diverses images (y compris des images de fond) pour contruire le bandeau du haut.
- Ensuite, il y a les menus de navigation à gauche et le contenu de la page mis en page en tableaux.
- Sous le contenu de la page, il y a une série de divisions DIV pour faire apparaître les légendes explicatives des icônes de navigation dans la page.
- Puis, à la toute fin, il y a une IMAGEMAP garnie de Javascript.

3. ÉTABLIR L'ARBORESCENCE de la section HISTOIRE-GÉOGRAPHIE

Comprendre la place de la section histoire-géo dans le site du collège :
Comprendre la place de la page dans la section histoire-géo :
Établir une arborescence du site du départment Histoire-géo

Accueil Collège

Histoire et géographie (Accueil)

Le programme
- Accueil [Histoire-géo]
- Les orientations
- Les objectifs
- Les profils
- Le bilan sessionnel
- L'épreuve uniforme de français
- L'épreuve synthèse de programme
Les professeurs
Les disciplines
- La géographie
- Les cours de méthodologie
Les cours
Les plans de cours
Les règles départementales
L'Histoire sur le web
La géographie sur le web
L'Atelier d'histoire
Les pages pédagogiques

4. TRACER UNE MAQUETTE

Tracer une maquette grossière de mise en page en identifiant les principales divisions.

*__#conteneur_____________________________________________* |*__#entete______________________________________________*| || *__#nav_college________________*|| || | ||| || *______________________________*|| |*_______________________________________________________*| |*_#nav_dept___* *__#contenu____________________________*| || | | || || | | || || | | || || | | || || | | || || | | || || | | || || | | || || | | || || | | || || | | || || | | || || | *______________________________________*| || | *__#pied_______________________________*| || | | || || | | || |*_____________* *______________________________________*| *_________________________________________________________*

5. STRUCTURE XHTML

Créer un nouveau document (XHTML 1.0 Strict, fr, iso-8859-1, Titre : Collège Ahuntsic - Histoire et géographie : Le programme des sciences humaines)
Insérer dans l'élément BODY de ce document les grandes divisions de mise en page.

<div id="conteneur"> <div id="entete">entete</div> <div id="nav-dept">nav-dept</div> <div id="contenu">contenu</div> <div id="pied">pied</div> <div id="nav-college">nav-college</div> </div>

Remarque : la division nav-college est placée à la fin car elle sera retirée du flux normal de la page et positionnée de façon absolue dans le haut de la page. On pourrait donc théoriqument l'insérer n'importe où, mais sémantiquement, c'est mieux de la placer à la fin ; ainsi, quand si les feuilles de styles, les images et/ou le javascript sont désactivés du côté client, la page demeurera encore parfaitement lisible.

6. INSERTION DU CONTENU TEXTUEL DANS LES DIVISIONS

Récupérer le texte brut (y compris le texte des images de navigation) et le placer dans les grandes divisions du document aux endroits appropriés.
Voir : template03.html

Baliser sémantiquement le texte à l'aide des éléments H1, H2, H3, H4, P, OL, UL, LI, etc... appropriés et y insérer les liens appropriés à l'aide de l'élément A.
Voir : template04.html

Insérer les liens appropriés à l'aide de l'élément A.

Voir : template05.html

7. OPTIMISATION DES IMAGES

Réduire au minimum le découpage des images afin d'optimiser les temps de chargement et les balises inutiles.
Notamment, fusionner en une seule image les images haut.jpg, histgeogra.jpg et tit_deptartement.jpg.
Fusionner également les deux petites bandes de fond fond_haut.jpg et fond_haut2.jpg.
Résultat : haut.jpg et fond_haut.jpg.
Modifier l'image accueil_o.gif pour ne retenir que le triangle oraqnge. Résultat : accueil_o.gif

8. AJOUTER LES IMAGES

Dans le document, ajouter l'image dans la division entête.
À la fin du document ajouter l'IMAGEMAP (sans les atrributs d'événement javascript), mais ajoutant l'attribut TITLE et ALT.

9. MODIFIER LA FEUILLE DE STYLE

Conserver toutes les règles existantes, mais ajouter les nouvelles règle à la fin du fichier ahuntsic.css
Résultat : ahuntsic.css

10. RÉSULTAT FINAL

template10.html

Éducation, société et technologie

Conversion d'une mise en page en tableaux vers CSS