Éducation, société et technologie
Exercice pratique

Conversion d’une mise en page en tableaux vers CSS

Exercice Histoire-géographie
lundi 26 septembre 2005 par André Vincent

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 :

2. RÉCUPÉRATION ET CONVERSION DES DOCUMENTS

  1. Créer un dossier NOM-PRENOM-AHUNTSIC pour y récupérer les fichiers originaux de la page source.
  2. Avec FIREFOX, enregistrer dans ce dossier la page ( Web Page, complete ).
  3. Ouvrir dans Firefox objectifs.html pour vérifier si tout a été récupéré.
  4. 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
  5. Renommer le dossier objectifs_files -> images.
  6. Sortir le fichier ahuntsic.css du dossier images et le placer au même niveau que objectifs.html
  7. 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).
  1. 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 et 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

  1. Comprendre la place de la section histoire-géo dans le site du collège :
  2. 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

  1. 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

  1. 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)
  2. Insérer dans l’élément BODY de ce document les grandes divisions de mise en page.

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

  1. 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
  1. Insérer les liens appropriés à l’aide de l’élément A.

7. OPTIMISATION DES IMAGES

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

8. AJOUTER LES IMAGES

  1. Dans le document, ajouter l’image dans la division entête.
  2. À 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

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

10. RÉSULTAT FINAL


Accueil | Contact | Plan du site | | Statistiques du site | Visiteurs : 13488 / 1790344

Suivre la vie du site fr  Suivre la vie du site Cours Web  Suivre la vie du site Sites web statiques  Suivre la vie du site Exercices pratiques   ?    |    titre sites syndiques OPML   ?

Site réalisé avec SPIP 3.1.4 + AHUNTSIC

Creative Commons License

Visiteurs connectés : 3