Fichiers utiles pour le TP

• un rappels css utiles au tp
• un ensemble de photos avec leurs miniatures
• le fichier html
• le fichier html 5 avec les éléments header, footer, nav, article, aside, section

Exercice 1: Visionneuse d'images

1. Afficher une grille de miniatures centrées sur fond noir permettant d'afficher l'ensemble des miniatures comme dans la Figure 1.
2. Reproduire la mise en page de la Figure 2 pour permettre d'afficher un index en haut de la page contenant les imagettes. Un survol d'imagette affiche un repère visuel autour de l'imagette cliquée. Une image est affichée dans la totalité du calque situé sous l'index comme dans l'exemple de la Figure 3. NB: il s'agit juste ici d'écrire les styles pour la mise en page, pas nécessairement le code utile à la sélection/affichage de l'image du centre.

Exercice 2: Mise en page de texte

A partir du fichier de départ, construire la css et faire les modifications utiles en html pour obtenir les mises en pages suivantes:

Légende:

1. titre - logo - banière qui résume au mieux le contenu de la page
2. menus - ou autres éléments de navigation globale (invariants)
3. menus - ou autres élements de navigation locale (contextuels)
4. texte principal
5. informations contextuelles renseignant sur l'état courant. Par exemple, localisation par fil d'Ariane.
6. affichage de mentions diverses comme copyright/copyleft, logos, présentation de la société, etc.
7. table des matières

(*) calque de débordement

Exercice 3: Mise en page avec texte, images et éléments html 5

A partir du fichier html5, construire la css et faire les modifications utiles en html pour obtenir la mise en page suivante:

Légende:

1. header - banière qui résume au mieux le contenu de la page
2. nav - éléments de navigation globale (invariants)
3. aside - autres élements de navigation locale (contextuels)
4. texte principal
5. informations contextuelles renseignant sur l'état courant. Par exemple, localisation par fil d'Ariane.
6. footer - affichage de mentions diverses comme copyright/copyleft, logos, présentation de la société, etc.
7. table des matières
8. figure

(*) calque de débordement