Gabarit 01

À propos du gabarit 01

Code HTML et CSS

Ce gabarit est structuré de la manière suivante:

<div id="global">
	<header id="entete">...</header>
	<nav id="navigation">...</nav>
	<main id="contenu">...</main>
	<footer id="pied">...</footer>
</div>

Il est mis en forme par deux feuilles de styles:

1. base.css (mise en forme minimale du texte, commune à tous les gabarits)
2. modele01.css, qui contient tous les styles propres à ce gabarit, et que nous vous invitons à consulter.

Pour voir le détail du code HTML de cette page, utilisez la fonction d'affichage de la source de votre navigateur web (ex: «Affichage > Code source de la page»).

À noter

Ce gabarit est très simple, et ne devrait pas nécessiter moult explications. Deux points sont à noter tout de même:

1. Le menu de navigation est horizontal, alors que nous avons utilisé une liste non ordonnée (élément HTML ul)pour le coder (voir le code HTML). Comment se fait-ce?
   Ici, on obtient cette disposition grâce à la déclaration CSS display: inline;, appliquée aux items de liste (éléments HTML li).

2. Le principal problème de ce gabarit, mis à part son aspect très frustre, c'est que l'on place tout le contenu dans un bloc qui prend 100% de la largeur de la fenêtre du navigateur (avec 20px de padding à gauche et à droite). Pour les petites résolutions (appareils mobiles, écrans en 800×600…), c'est très bien, voire même idéal. Mais en 1024×768 et pour les résolutions supérieures, cela peut donner des choses illisibles avec des lignes de texte interminables!

   D'ailleurs, il est probable que vous soyez arrivé au même constat rien qu'en tentant de lire ces explications sur votre propre écran!

   Ce problème est moins fort dans le cas d'un design sur deux ou trois colonnes. Et, dans tous les cas, on peut l'éviter en travaillant avec une largeur fixe (par exemple 750px ou 900px), ou encore avec une largeur fluide «intelligente» (voir les gabarits qui portent cette mention).