Gabarits HTML et CSS simples (version 2008)

Utiliser les gabarits pour vos projets

• Conditions d’utilisation
• Télécharger les gabarits
• Fichiers d'un gabarit
• Adapter un gabarit

Conditions d’utilisation

Les gabarits HTML-CSS présentés ici peuvent être utilisés pour vos projets personnels ou professionnels, commerciaux ou non, selon les termes du contrat Creative Commons Attribution 2.0 FR.

Télécharger les gabarits

Vous pouvez explorer le code des gabarits sur GitHub, ou télécharger une archive zip directement.

Fichiers d'un gabarit

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

modele##.html
styles/
   base.css
   modele##.css
img/
   ##-une-image.png
   ##-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>
   

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.