Travaux dirigés

Image réactive

Image-lien

1. Télécharger la photographie de Renault Dauphine sur http://www.licence.elec.upmc.fr/S_tec/coursEnLigne/html2/images/dauphine.jpg
2. Créer une page HTML ne comportant que cette image
3. La rendre globalement active : en cliquant sur cette image, on arrive à une URL par défaut au choix.

Image réactive

1. Réaliser la même fonction, mais cette fois-ci en faisant en sorte que l'image soit une image réactive :
   1. Utiliser l'attribut usemap pour lier l'image à un élément map.
   2. Définir une unique zone rectangulaire recouvrant l'ensemble de l'image (qui a une largeur de 695 et une hauteur de 416 pixels)
2. Définir dans l'image une zone circulaire, une zone rectangulaire et une zone polygonale, en essayant de les faire coïncider avec des parties reconnaissables, et rendre ces zones actives en les liant à des URL.

Voir un exemple...

Il est beaucoup plus facile d'utiliser un outil logiciel plutôt que de le faire "à la main"... Reprendre la dernière étape en utilisant Dreamweaver.

Retour au cours

Les cadres

Création d'une navigation standard

le but de cet exercice est de créer, à base de cadres, la structure générale du site d'une petite société de vente en ligne, e-legumes.com. Les contenus et images sont fournis.

1. Téléchargement des fichiers nécessaires
   1. Dans votre répertoire de travail, créer un répertoire cadres.
   2. Télécharger le fichier fichiers.zip et le décompresser dans le répertoire.
   3. Créer un répertoire images.
   4. Télécharger le fichier images.zip et le décompresser dans le répertoire images.
2. Création des pages-cadres
   1. Ouvrir le fichier index.html dans l'éditeur. Créer la structure de cadres indiquée dans les commentaires.
   2. Ouvrir le fichier contenu.html dans l'éditeur. Créer la structure de cadres indiquée dans les commentaires.
3. Création de la navigation intra-site
   1. Ouvrir le fichier bandeau.html dans l'éditeur. Créer les liens indiqués dans les commentaires.
   2. Ouvrir le fichier contact.html dans l'éditeur. Créer le lien indiqué dans les commentaires.
   3. Ouvrir le fichier promotions.html dans l'éditeur. Créer le lien indiqué dans les commentaires.
   4. Ouvrir le fichier menu.html dans l'éditeur. Créer les liens indiqués dans les commentaires.
   5. Ouvrir le fichier produits.html dans l'éditeur. Créer le lien indiqué dans les commentaires.
4. Tester la navigation dans le site.
5. A propos de navigation, que manque-t-il fondamentalement sur chaque page de contenu ? Corriger.

Retour au cours