Gabarits HTML et CSS simples

Vous pouvez utiliser ces gabarits comme base de vos mises en pages, ou tout simplement étudier leur construction pour progresser en HTML et CSS.

Utiliser les gabarits pour vos projets

Télécharger les gabarits

Vous pouvez récupérer les gabarits ici (archive ZIP).

Fichiers d'un gabarit

Chaque gabarit est organisé de la manière suivante:

modele##.html
styles/
    base.css
    modele##.css
    img/
        ##-une-image.jpg
        ##-une-autre-image.png

Les ## correspondent au numéro de gabarit.
Tout gabarit comprend un fichier HTML et un fichier CSS qui lui sont propres. Tous les gabarits utilisent également la même feuille de styles de base, nommée base.css.
Certains gabarits utilisent des images de fond, placées dans le répertoire styles/img/. Ce n'est pas le cas de tous les gabarits.

Adapter un gabarit

Voici quelques repères si vous souhaitez adapter un gabarit pour créer vos pages:

  1. Tout d'abord, il est indispensable de comprendre le fonctionnement du gabarit, du moins dans les grandes lignes. Pensez à lire les explications données sur la page du gabarit, ainsi que dans les fichiers CSS eux-mêmes.

  2. Ensuite, faites une copie des fichiers du gabarit choisi, et placez-les dans un répertoire de travail. En ouvrant le fichier HTML avec un navigateur, vérifiez que tout marche bien. Vous pouvez maintenant travaillez sur ces fichiers, en gardant la copie d'origine pour vérifier le fonctionnement du code de départ (pratique si vous «cassez» quelque chose).

  3. Modifiez l'en-tête, le pied de page (s'il existe), et le ou les menus de navigation, pour refléter l'identité et les contenus de votre site.

    Modifiez le code HTML dans div#contenu pour placer le contenu de votre page.

    Évitez de toucher aux balises qui ouvrent et ferment les principaux blocs de la mise en page, si vous n'êtes pas sûr de ce que vous faites! Ces balises ressemblent en général à ceci:

    <div id="un-identifiant">
	Ici le contenu de mon bloc.
</div><!-- #un-identifiant -->

  4. Pour modifier les polices de caractères et le rendu du texte pour tous les éléments de la page, modifiez base.css.

    Pour modifier les couleurs du texte et des principaux conteneurs, modifiez la première partie du fichier modele##.css.

    Pour modifier le positionnement des principaux conteneurs, modifiez la deuxième partie du fichier modele##.css.

Voir les pages Licence et Crédits.