html editor

Jean-Michel FOLLIN ([email protected])
LUP-SIG, 2004-2005
Programmation SIG et Internet Cartographique
Séance 1 :
Pages HTML et images « cliquables »
Aux cours des séances suivantes nous allons étudier différentes techniques de présentation
d’informations géo-référencées sur le Web : les pages HTML, les serveurs de données (CGI), et les
applications exécutées par un navigateur Web (applets Java).
Le but de cette séance est de se familiariser avec les principes de création des présentations utilisant
les techniques que l’on pourrait appeler HTML « pur ».
Vous allez créer une présentation HTML qui contient une carte (une image cliquable). Celle-ci
comportera les références sur une description des objets de la carte.
Environnement du travail
Les données nécessaires pour la création de la présentation se trouvent à l’adresse suivante :
http://perso.univ-lr.fr/jmfollin/cours/LupSIG/s1/
- L’image de la carte (le quartier des Minimes) :
http://perso.univ-lr.fr/jmfollin/cours/LupSIG/s1/support/Plan_ULR.jpg
- Les photos correspondantes aux objets affichés sur la carte (deux catégories : campus et monuments)
http://perso.univ-lr.fr/jmfollin/LupSIG/s1/support/photos.zip
- Les photos individuelles peuvent être accédées via l’adresse :
http://perso.univ-lr.fr/jmfollin/LupSIG/s1/support/scan_X.jpg
(ici X est une des lettres A, B, C, D, E, F, G ou H)
A la fin de ce document, vous pouvez trouver un tableau de correspondance nom de fichier/description
de l’objet.
Les applications suivantes seront utilisées :
Pour créer des présentations (pages html et images cliquables) :
- L’application DreamWeaver.
- Ou bien (si Dreamweaver n’est pas disponible) :
- un éditeur HTML simple, HTMLEditor, disponible à l’adresse suivante (décompression du
contenu de l’archive et exécution du programme) :
http://perso.univ-lr.fr/jmfollin/LupSIG/s1/support/HTML-Editor.zip
-
Et Map This!, disponible à l’adresse suivant :
http://www.abdn.ac.uk/tools/ibmpc/mapthis/
Pour les visionner : Internet Explorer
Les concepts suivants du langage HTML seront utilisés :
- les références (la balise <A>) ;
- les images (la balise <IMG>) et les images cliquables (son attribut USEMAP)
- la définition des zones cliquables d’une image (les balises <MAP> et <AREA>)
- les frames (les balises <FRAMESET> et <FRAME>)
1
Jean-Michel FOLLIN ([email protected])
LUP-SIG, 2004-2005
Exercice 1
Créer la présentation suivante :
1. créer une page HTML principale (index.html) contenant la carte donnée (une image) ;
2. pour chaque objet de la carte créer une page HTML contenant la photo avec la description de
cet objet ;
3. inclure la carte dans la page principale index.html et définir les zones cliquables. Chaque zone
doit renvoyer la page de description correspondante ;
4. tester le fonctionnement de votre présentation avec un navigateur Web ;
5. modifier les références de manière à ouvrir la description dans une nouvelle fenêtre (voir la
figure ci-dessous).
Remarques : vous pouvez copier la carte et les photos sur votre compte. Sinon, vous pouvez les
référencer en utilisant leurs adresses absolues données ci-dessus.
Vous pouvez créer deux repertoires, un pour les bâtiments du campus, l’autre pour les monuments.
Exercice 2
Modifier la présentation créée :
1. Changer l’organisation de la présentation.
La page principale doit se composer de deux parties (frames) : la frame gauche contenant la
carte et la frame droite affichant les détails (voir la figure ci-dessous) ;
2. Ajouter des références sur les sites Web correspondant aux objets de la carte (par exemple, le
site de l’Aquarium de La Rochelle).
2
Jean-Michel FOLLIN ([email protected])
Fichier scan_X.jpg
A
B
C
D
E
F
G
H
LUP-SIG, 2004-2005
Description
Tour de la lanterne
Bâtiment Réaumur
Bibliothèque Universitaire
IUT
Technoforum
Tour de l’horloge
Hôtel de ville
UFR Sciences
Tableau de correspondance nom de fichier/description de l’objet.
3