 La page relative à tes loisirs
préférés présente une
structure un peu plus complexe.
Trois images figurent dans le bloc central.
Elles sont surmontées chacune d'un titre.
Les trois titres sont disposés en
" escalier " descendant.
Pour réaliser cet effet sans trop
de difficulté, il est possible de détourner
l'usage des tableaux.
Structure de la page
- Ouvre la page loisirs.html.
- Indique l'en-tête de la
page : Mes loisirs
préférés, en style Titre
1 et centré.
Le reste des informations du bloc central
sera disposé dans un tableau de 3 colonnes et 4
lignes.
 Crée ce tableau
en utilisant les indications de l'illustration ci-contre.
Le
tableau n'aura pas de bordure, de manière à
être parfaitement invisible
dans le navigateur. On aura donc l'impression que les
éléments qu'il
contient " flottent " dans la page.
La structure qui permettra d'accueillir les
informations est maintenant prête.
 Et
vous trouvez ça joli, vous ? Mais vous avez vu ces
horriiiiiiibles
lignes rouges ? Enlevez-moi ça tout de suite,
voulez-vous ?
 Pas
de panique, cher élève : ces lignes
rouges ne servent qu'à nous
indiquer la présence du tableau. Elles
n'apparaîtront pas lorsque le
document sera présenté dans le navigateur.
Nature des loisirs favoris
- Dans les cellules supérieures
du tableau et en respectant l'effet d'escalier, indique la nature de
tes loisirs préférés.
- Attribue à chacun le style Titre
2.
Ghiiiii... mais ce tableau change
constamment de taille dès que j' écris quelque
chose ! Vous ne pourriez pas me punaiser
ça ?
C'est déroutant, en effet. Mais
dès que tous les intitulés figurent dans le
tableau, il retrouve son équilibre.
- Cherche,
sur le web, trois images qui illustrent bien tes loisirs favoris.
Attention, le bloc central ne mesure que 600 pixels de
largeur. Chaque
image ne devrait donc pas dépasser la taille de
200 pixels.
- Enregistre ces images dans le
sous-répertoire images du
répertoire Mon site web.
Pas grave ! De toute
façon, je sais redimensionner une image, maintenant.
 Insère chacune
des images trouvées dans les trois cellules
inférieures du tableau.- Enregistre ton document.
- Visualise le résultat dans le
navigateur.
|
