DUT SRC - Webchronique

DUT SRC Meaux
TD 5 : Concept & outil Internet
Stéphane PERES
But : Eléments avancés de mise en page de document HTML : les feuilles de style et fonction over
Exercice 1 : le plus simple
1) Reprenez l’exemple du TD précédent : une page HTML séparée en 4 grandes
parties (div) ayant chacune son propre style, les styles étant décrits dans une feuille
de style (.css). Modifier cette feuille de style pour changer la couleur du fond de
chaque partie à chaque passage de la souris sur la zone via la pseudo-class hover.
Ne tester que sous Firefox.
2) Modifier votre code HTML pour placer à l’intérieur de la fenêtre principale un tableau ayant ses propres
caractéristiques (notamment la couleur de fond et la couleur de la police de caractère). Utiliser les feuilles de
styles et l’option hover pour inverser la couleur du fond et la couleur de la police à chaque survol du tableau
par la souris.
Exercice 2 : les zooms
1) Créer une page HTML contenant une image puis une feuille de style qui contiendra deux styles : le style
normal qui fixe la taille de l’image (via width & height) puis un second style qui fixe une taille différente
lorsque vous survolez l’image avec la souris (option hover).
2) Une autre stratégie, plus fine, permettant de ne faire qu’un seul zoom sur une partie de l’image, consiste à la
gérer comme image de fond d’une division contenant une balise <A> et de ne gérer qu’une partie de l’image
via l’option background: url(nom_image) -Xpx -Ypx no-repeat qui "décale" cette image
respectivement de X et Y pixels suivant chaque direction.