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 :

Présentation

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

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

Attention : pour utiliser un thème, vous devez déjà avoir un espace Web disponible. Si ce n'est déjà fait, créez votre page sur le serveur des élèves de l'ENS.

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
A l'aide ! Quand vous essayez de visualiser votre page, vous voyez une erreur du serveur, genre « Internal Server Error ». C'est dû à une erreur dans le .htaccess. Relisez les fichiers pour voir si vous ne vous êtes pas trompé, sinon renommez le fichier (mv .htaccess .htaccess.orig) et contactez-nous.

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

Auteur : Marie-Lan Nguyen. Dernière modification : Mon May 17 19:35:59 2004 +0000 par Marie-Lan Nguyen.