Un site web élémentaire avec NVU

La page relative à tes loisirs préférés présente une structure un peu plus complexe.

Trois images figurent dans le calque 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 calque 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.

• Clique sur le bouton OK.

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 calque 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.

;o)

• Insère chacune des images trouvées dans les trois cellules inférieures du tableau.
• Si nécessaire, revois la dimension en hauteur (propriété height) du calque central de manière à ce qu'il " contienne " l'ensemble des images.
• Enregistre ton document.
• Visualise le résultat dans le navigateur.