262 lines
8.7 KiB
XML
262 lines
8.7 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
||
<!DOCTYPE html
|
||
PUBLIC "-//ENS/Tuteurs//DTD TML 1//EN"
|
||
"tuteurs://DTD/tml.dtd">
|
||
<html>
|
||
<head>
|
||
<title>Thèmes</title>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>Thèmes</h1>
|
||
|
||
<p>
|
||
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 :
|
||
</p>
|
||
|
||
<ul>
|
||
|
||
<li> savoir utiliser un <a href="&url.tuteurs;unix/editeurs/">éditeur
|
||
de texte</a>, de préférence qui fasse de la colorisation
|
||
syntaxique. Si vous travaillez dans une salle info, nous vous
|
||
conseillons <a href="&url.tuteurs;unix/editeurs/">NEdit</a>, sinon, au
|
||
pire même le Bloc-Notes de Windows suffit.</li>
|
||
|
||
<li> savoir que le <abbr lang="en" title="HyperText Mark-up
|
||
Language">HTML</abbr> fonctionne avec des <em>balises</em>. Jetez un
|
||
bref coup d'œil à notre <a href="bases.html">tutoriel HTML</a>
|
||
si besoin est. Si vous avez fait un peu de LaTeX, vous n'aurez aucun
|
||
mal à comprendre comment ça marche.</li>
|
||
|
||
</ul>
|
||
|
||
<h2>Présentation</h2>
|
||
|
||
<p>
|
||
Ce que nous appelons un <dfn>thème</dfn>, c'est un paquet comprenant 4
|
||
fichiers :
|
||
</p>
|
||
|
||
<ul>
|
||
|
||
<li> 2 <strong>feuilles de style</strong> (en <abbr lang="en"
|
||
title="Cascading Style Sheet">CSS</abbr>) 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</li>
|
||
|
||
<li> un <strong>fichier-type</strong> (en <abbr lang="en"
|
||
title="HyperText Mark-up Language">HTML</abbr>) qui gère le contenu de
|
||
la page (texte, structure, etc.)</li>
|
||
|
||
<li> un <strong>fichier de configuration du serveur</strong>
|
||
(<code>.htaccess</code>), qui gère l'affichage par les vieux
|
||
navigateurs comme Netscape 4 ou Internet Explorer 4.</li> </ul>
|
||
|
||
<p>
|
||
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
|
||
<code>www/</code> 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 (<a title="Spécifications de CSS2 [en]"
|
||
href="http://www.w3.org/TR/2004/CR-CSS21-20040225/">CSS 2.1</a> et <a
|
||
title="Spécifications de HTML4 [en]"
|
||
href="http://www.w3.org/TR/html4/">HTML 4.01</a>).
|
||
</p>
|
||
|
||
<h2>Mode d'emploi</h2>
|
||
|
||
<h3>Choisir un thème</h3>
|
||
|
||
<p>
|
||
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.
|
||
</p>
|
||
|
||
<table class="tableau">
|
||
<tr>
|
||
<th>Nom du thème</th><th>Couleurs</th><th>Capture d'écran</th><th>Télécharger le thème</th>
|
||
</tr><tr>
|
||
<td>Iceberg</td><td>bleu, gris,
|
||
blanc</td><td><a href="iceberg.png"><code>iceberg.png</code></a></td><td><a href="iceberg.zip"><code>iceberg.zip</code></a></td>
|
||
</tr><tr>
|
||
<td>Océan</td><td>bleu marine, vert</td><td><a
|
||
href="ocean.png"><code>ocean.png</code></a></td><td><a href="ocean.zip"><code>ocean.zip</code></a></td>
|
||
</tr><tr>
|
||
<td>Orange</td><td>orange et bleu clair</td><td><a href="orange.png">orange.png</a></td><td><a href="orange.zip"><code>orange.zip</code></a></td>
|
||
</tr>
|
||
</table>
|
||
|
||
<p>
|
||
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.
|
||
</p>
|
||
|
||
<h3>Décompacter le thème</h3>
|
||
|
||
<div class="encadre">
|
||
<strong>Attention</strong> : pour utiliser un thème, vous devez déjà
|
||
avoir un espace Web disponible. Si ce n'est déjà fait, <a
|
||
href="&url.tuteurs;internet/web/creer.html">créez votre page</a> sur le
|
||
serveur des élèves de l'ENS.
|
||
</div>
|
||
|
||
<p>
|
||
Le thème se présente sous la forme d'une archive au format zip. Il
|
||
faut la décompacter dans votre répertoire <code>www/</code>. Sous
|
||
Unix, utilisez la commande <code>unzip</code> :
|
||
</p>
|
||
|
||
<pre>
|
||
<span class="prompt">brick ~/www $</span> unzip orange.zip
|
||
Archive: orange.zip
|
||
inflating: simple.css
|
||
inflating: modele.html
|
||
inflating: .htaccess
|
||
inflating: orange.css
|
||
</pre>
|
||
|
||
<p>
|
||
Sous Windows, utilisez par exemple WinZip ou Power Archiver, et sous
|
||
Mac OS, MacZip.
|
||
</p>
|
||
|
||
<h3>Personnalisations obligatoires</h3>
|
||
|
||
<p>
|
||
Maintenant, il faut personnaliser les fichiers. Vous n'avez pas besoin
|
||
de toucher aux feuilles de style (les fichiers en <code>.css</code>),
|
||
mais il faut absolument modifier le fichier-type
|
||
(<code>modele.html</code>) et le fichier de configuration
|
||
(<code>.htaccess</code>).
|
||
</p>
|
||
|
||
<h4>Modifier le fichier <code>.htaccess</code></h4>
|
||
|
||
<p>
|
||
Éditez le fichier, par exemple en utilisant <a
|
||
href="&url.tuteurs;unix/editeurs/">NEdit</a> :
|
||
</p>
|
||
|
||
<pre>
|
||
<span class="prompt">brick ~/www $</span> nedit .htaccess
|
||
</pre>
|
||
|
||
<p class="continue">
|
||
Modifiez ensuite les lignes suivantes suivant les instructions dans le
|
||
fichier :
|
||
</p>
|
||
|
||
<pre>
|
||
# 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
|
||
</pre>
|
||
|
||
<div class="attention">
|
||
<strong>A l'aide !</strong> Quand vous essayez de visualiser votre
|
||
page, vous voyez une erreur du serveur, genre « Internal Server
|
||
Error ». C'est dû à une erreur dans le
|
||
<code>.htaccess</code>. Relisez les fichiers pour voir si vous ne vous
|
||
êtes pas trompé, sinon renommez le fichier (<code>mv .htaccess
|
||
.htaccess.orig</code>) et contactez-nous.
|
||
</div>
|
||
|
||
<h4>Modifier le fichier-type</h4>
|
||
|
||
<p>
|
||
D'abord, commençons par renommer le fichier. La page d'accueil
|
||
s'appelle obligatoirement <code>index.html</code>. 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
|
||
<acronym title="Travaux d'Initiative Personnelle Encadrés">TIPE</acronym>
|
||
en ligne, appelez-le <code>tipe.html</code>, par exemple. Sous Unix,
|
||
on utilise la commande <code>mv</code> pour renommer un fichier :
|
||
</p>
|
||
|
||
<pre>
|
||
<span class="prompt">brick ~/www $</span> mv modele.html index.html
|
||
</pre>
|
||
|
||
<p>
|
||
Le fichier-type a en gros deux parties :
|
||
</p>
|
||
|
||
<ul>
|
||
<li> la <strong>navigation</strong> : 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 ;</li>
|
||
<li> le <strong>corps de la page</strong> : c'est le contenu de la
|
||
page à proprement parler.</li>
|
||
</ul>
|
||
|
||
<p>
|
||
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 :
|
||
</p>
|
||
|
||
<pre>
|
||
<!-- Barre de navigation -->
|
||
|
||
<div id="nav">
|
||
<ul>
|
||
<li> <a href="<em>accueil</em>.html" class="actif"><strong>accueil</strong></a></li>
|
||
<li> <a href="<em>alpha</em>.html"><strong>alpha</strong></a></li>
|
||
<li> <a href="<em>beta</em>.html"><strong>bêta</strong></a></li>
|
||
<li> <a href="<em>gamma</em>.html"><strong>gamma</strong></a></li>
|
||
<li> <a href="<em>delta</em>.html"><strong>delta</strong></a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Fin barre de navigation -->
|
||
</pre>
|
||
|
||
<p class="continue">
|
||
Ici, nous indiquons <em>comme ceci</em> les noms de fichiers à
|
||
modifier, et <strong>comme cela</strong> 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 <code><li></code>. 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.
|
||
</p>
|
||
|
||
<p>
|
||
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 <a href="bases.html">tutoriel HTML</a>.
|
||
</p>
|
||
|
||
<h3>Valider votre fichier</h3>
|
||
|
||
<p>
|
||
Pour être sûr que vous n'avez pas oublié quelque chose dans votre code
|
||
HTML, passez la version finale de votre page au <a
|
||
href="http://validator.w3.org/">validateur du W3C</a>. Il vous dira si
|
||
tout est en ordre ou s'il faut encore jeter un petit coup d'œil
|
||
au code.
|
||
</p>
|
||
|
||
<div class="metainformation">Auteur : Marie-Lan Nguyen.
|
||
Dernière modification : le <date value="$Date: 2007-07-17 10:02:41 $" />.
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|
||
<!-- LocalWords: inflating
|
||
-->
|