DUT SRC - Webchronique
Transcription
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.