Thèmes

Vous voulez faire une page Web, mais vous n'avez pas le temps ou pas envie de consacrer beaucoup de temps à l'apprentissage technique. Ou alors, vous connaissez un peu de HTML mais vous n'avez pas envie de chercher un joli design pour vos pages. Nos thèmes sont faits pour vous! Les seules connaissances techniques pour utiliser les thèmes sont :

• savoir utiliser un éditeur de texte, de préférence qui fasse de la colorisation syntaxique. Si vous travaillez dans une salle info, nous vous conseillons NEdit, sinon, au pire même le Bloc-Notes de Windows suffit.
• savoir que le HTML fonctionne avec des balises. Jetez un bref coup d'œil à notre tutoriel HTML si besoin est. Si vous avez fait un peu de LaTeX, vous n'aurez aucun mal à comprendre comment ça marche.

Présentation

Ce que nous appelons un thème, c'est un paquet comprenant 4 fichiers :

• 2 feuilles de style (en CSS) qui gèrent le design de la page : une feuille principale, et une spéciale pour Netscape 4, qui ne gère pas bien les styles
• un fichier-type (en HTML) qui gère le contenu de la page (texte, structure, etc.)
• un fichier de configuration du serveur (.htaccess), qui gère l'affichage par les vieux navigateurs comme Netscape 4 ou Internet Explorer 4.

Le tout est prêt à l'emploi ou presque — il suffit de télécharger les bons fichiers, de les mettre dans votre répertoire www/ et d'insérer vos propres informations dans le fichier-type (ça, on ne peut pas le faire à votre place). Vous obtiendrez ainsi une page jolie (on l'espère !) et respectueuse des standards (CSS 2.1 et HTML 4.01).

Mode d'emploi

Choisir un thème

Pour l'instant vous pouvez choisir parmi trois thèmes, plus viendront par la suite. Vous pouvez aussi nous envoyer vos propres thèmes. Les captures d'écran vous montrent à quoi ressemble chaque thème avec Mozilla 1.6.

Nom du thème	Couleurs	Capture d'écran	Télécharger le thème
Iceberg	bleu, gris, blanc	iceberg.png	iceberg.zip
Océan	bleu marine, vert	ocean.png	ocean.zip
Orange	orange et bleu clair	orange.png	orange.zip

Les thèmes ont été testés avec Mozilla 1.6, Firefox 0.8 et Internet Explorer 6 — le thème simple a bien sûr été testé avec Netscape 4. Nous espérons qu'ils marchent bien avec tous les navigateurs, si ce n'était pas le cas, merci de nous prévenir.

Décompacter le thème

Le thème se présente sous la forme d'une archive au format zip. Il faut la décompacter dans votre répertoire www/. Sous Unix, utilisez la commande unzip :

brick ~/www $ unzip orange.zip
Archive:  orange.zip
  inflating: simple.css              
  inflating: modele.html             
  inflating: .htaccess               
  inflating: orange.css 

Sous Windows, utilisez par exemple WinZip ou Power Archiver, et sous Mac OS, MacZip.

Personnalisations obligatoires

Maintenant, il faut personnaliser les fichiers. Vous n'avez pas besoin de toucher aux feuilles de style (les fichiers en .css), mais il faut absolument modifier le fichier-type (modele.html) et le fichier de configuration (.htaccess).

Modifier le fichier .htaccess

Éditez le fichier, par exemple en utilisant NEdit :

brick ~/www $ nedit .htaccess

Modifiez ensuite les lignes suivantes suivant les instructions dans le fichier :

# Remplacez ici 'monlogin' par votre propre login
RewriteBase /home/monlogin/
(...)
# Remplacez ici 'mafeuille.css' par la feuille que vous avez choisie
RewriteRule mafeuille.css simple.css

Modifier le fichier-type

D'abord, commençons par renommer le fichier. La page d'accueil s'appelle obligatoirement index.html. Pour les autres pages, vous pouvez choisir le nom que vous voulez, du moment qu'il n'y a pas d'espaces et que le nom soit évocateur du contenu : si vous mettez votre TIPE en ligne, appelez-le tipe.html, par exemple. Sous Unix, on utilise la commande mv pour renommer un fichier :

brick ~/www $ mv modele.html index.html

Le fichier-type a en gros deux parties :

• la navigation : dès que vous avez 3 ou 4 pages distinctes, il faut une navigation simple pour permettre au visiteur de circuler facilement entre les différentes pages ;
• le corps de la page : c'est le contenu de la page à proprement parler.

La partie « navigation » revêt la forme d'une liste avec des liens vers les fichiers concernés. Dans le fichier-type, ça ressemble a ceci :

<!-- Barre de navigation -->

<div id="nav">
<ul>
<li> <a href="accueil.html" class="actif">accueil</a></li>
<li> <a href="alpha.html">alpha</a></li>
<li> <a href="beta.html">bêta</a></li>
<li> <a href="gamma.html">gamma</a></li>
<li> <a href="delta.html">delta</a></li>
</ul>
</div>

<!-- Fin barre de navigation -->

Ici, nous indiquons comme ceci les noms de fichiers à modifier, et comme cela les titres de vos pages. Remplacez les alpha, bêta, etc., par le nom de vos fichiers et le titre de vos pages. Pour supprimer un item de la liste, effacez une ligne commençant par <li>. Si vous n'avez qu'une seule page en tout et pour tout, vous pouvez effacez tout simplement le bloc « barre de navigation ». Pour le récupérer par la suite, il vous suffira de copier-coller l'exemple ci-dessus.

Pour la partie du corps du texte, le modèle vous montre comment faire des paragraphes ou des titres. Vous pouvez effacer tout ça et le remplacer par votre propre texte. Pour savoir comment mettre en forme votre texte, parcourez notre tutoriel HTML.

Valider votre fichier

Pour être sûr que vous n'avez pas oublié quelque chose dans votre code HTML, passez la version finale de votre page au validateur du W3C. Il vous dira si tout est en ordre ou s'il faut encore jeter un petit coup d'œil au code.