Tableaux
et fonds
Création d'un menu à l'aide d'onglets
Méthode rudimentaire
On utilise l'image onglet.gif pour matérialiser un menu de liens sous forme d'onglets. La largeur de l'image est de 100 pixels et sa hauteur de 40 pixels.
onglet.gif
-
Enregistrer l'image
-
Construire un tableau d'une seule cellule ayant onglet.gif comme image de fond.
-
Ajouter le texte des liens qui sera ajusté à l'aide d'espaces insécables ( )
lien1
lien2
lien3
lien4
lien5
Méthode : un onglet = une cellule
L'utilisation d'espaces insécables pour le cadrage du texte n'est pas une très bonne solution, il est nécessaire de réajuster le cadrage lorsque le texte d'un lien est modifié. Pour remédier à cette difficulté on peut utiliser un tableau constitué de plusieurs cellules contenant chacune un onglet.
- Construire un tableau d'une ligne de 5 cellules aux dimensions nécessaires pour contenir un onglet
- Placer l'image ”onglets.gif” en fond de chaque cellule
- Centrer le texte des liens
Onglets de dimension variable
La méthode précédente impose un nombre limite de caractères pour le texte de chaque
lien en raison de la taille fixe des onglets qui les contiennent. Pour rendre la largeur des onglets variable on en décompose l'image en trois parties :
onglet1.gif
32 x 40
onglet2.gif
32 x 40
onglet3.gif
32 x 40
Chaque onglet est réparti sur 3 cellules consécutives d'un tableau.
- La cellule de gauche contient en fond l'image “onglet1.gif”
- La cellule centrale extensible contient l'image “onglet2.gif” remplissant le fond par répétition
- La cellule de droite contient en fond l'image “onglet3.gif”
un texte relativement long
plus court
ici
- Construire un tableau d'une ligne de 15 cellules (5 onglets)
- Adapter la taille des cellules aux images de fond
- Insérer les images de fond
- Placer le texte des liens
Application : un modeste planétarium
Version de base
On souhaite créer un petit site affichant les images des différentes planètes.
Les pages
-
Une page d'index
- Une page par planète
Contenu des pages
- Un menu sous forme de neuf onglets (exercice précédent) permettant d'accéder aux neuf planètes est présent sur les dix pages
-
Sur chaque page planète figure le menu puis une image de la planète et trois liens en bas de page (planète suivante, planète précédente et retour à l'index)
-
Sur la page index, figure le menu et une image du système solaire.
- Grace à l'outil de recherche d'images de Google trouver une grande image de chacune des planètes du système solaire et noter leurs adresses respectives sans les télécharger.
- Pour l'image du système solaire de la page index on utilisera celle située à l'adresse :
http://gladstone.uoregon.edu/~aarditi/solarsystem/solar-system-1024_768.JPG
- En utilisant un tableau organiser la page index :
- Créer le menu d'onglets à dimension variable des 9 planètes. Les adresses des pages seront : mercure.html, venus.html, terre.html, mars.html, jupiter.html, uranus.html, saturne.html, neptune.html, pluton.html
- Insérer le titre et l'image du système solaire et enregistrer sous index.html
- Réaliser une copie sous le nom terre.html
- Dans terre.html remplacer l'image du système solaire par celle de la terre repérée en étape 1 .
- Ajouter un lien en bas de page terre.html permettant le retour à la page index ainsi qu'un lien suivant vers mars.html et précédent vers venus.html.
| Titre-Banière |
| Menu d'onglets |
Image de la terre
|
|
|
- Réaliser 8 copies de la page terre.html sous le nom de chaque planète (utiliser les noms définis en étape 4)
- Adapter les copies aux planètes qu'elles décrivent (titre, image et les liens vers les planètes suivante et précédente)
Matérialisation du lien actif
Afin du rendre compte de la page couramment active, il est d'usage de modifier l'apparence du lien
correspondant.
A cet effet on utilisera les image ci-dessous.
onglet1_actif.gif
32 x 40
onglet2_actif.gif
32 x 40
onglet3_actif.gif
32 x 40
-
Télécharger les 3 images
- Pour chaque page de planète modifier les 3 images de l'onglet actif
Lien sur image
Dans la page d'index on souhaite voir aparaitre le nom de chaque planète sur l'image du système solaire sous forme de lien permettant ainsi d'accéder à la page correspondante.
- Placer l'image du système solaire en fond d'un tableau
- Agencer le tableau (hauteur de ligne, largeur de colonne, fusion de cellules) de sorte à pouvoir aisement superposer les noms des planètes aux images correspondantes
- Saisir les liens vers les différentes planètes dans les cellules appropriées.
