Ajout d'une page sur les thèmes (CSS prêts à l'emploi), avec les
fichiers qui vont avec.
This commit is contained in:
mlnguyen
parent
7b01407ce8
commit
11bd7dbdf7
10 changed files with 799 additions and 0 deletions
175
internet/web/html/iceberg.css
Normal file
175
internet/web/html/iceberg.css
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
/*********************************************/
|
||||
/* Feuille de style pour le thème "Iceberg" */
|
||||
/* Fichier dans le domaine public */
|
||||
/*********************************************/
|
||||
|
||||
#theme {
|
||||
background-color: #bdf;
|
||||
color: black;
|
||||
font-family: Verdana, Charcoal, Geneva, "Luxi Sans", sans-serif;
|
||||
font-size: 12px;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Contenant */
|
||||
|
||||
#tout {
|
||||
background: white;
|
||||
border: solid 4px silver;
|
||||
margin: 10px auto;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 650px;
|
||||
}
|
||||
|
||||
/***********************/
|
||||
/* Barre de navigation */
|
||||
/***********************/
|
||||
|
||||
#nav {
|
||||
background-color: #bdf;
|
||||
border-bottom: solid 5x silver;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#nav ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0.5em 1em 0.5em 1em;
|
||||
}
|
||||
|
||||
#nav li {
|
||||
display: inline;
|
||||
font: bold 1.2em "Trebuchet MS", sans-serif;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
#nav a:link { color: black; }
|
||||
|
||||
#nav a:visited { color: #343536; }
|
||||
|
||||
#nav a.actif { color: white; }
|
||||
|
||||
/******************/
|
||||
/* Corps du texte */
|
||||
/******************/
|
||||
|
||||
#corps {
|
||||
background: white;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
/**************/
|
||||
/* Généralités*/
|
||||
/**************/
|
||||
|
||||
/* Liens */
|
||||
|
||||
a { text-decoration: none; }
|
||||
|
||||
a:link { color: blue; } /* lien non encore visité */
|
||||
|
||||
a:visited { color: #2727a3; } /* lien visité */
|
||||
|
||||
a:hover { text-decoration: underline; } /* lien survolé par le curseur de la souris */
|
||||
|
||||
/* Hiérarchisation : titres, sous-titres */
|
||||
|
||||
h1 {
|
||||
color: #80bbff;
|
||||
font: normal 200% "Trebuchet MS" Verdana, sans-serif;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
background-color: white;
|
||||
font: normal 160% "Trebuchet MS" Verdana, sans-serif;
|
||||
margin-left: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font: bold 140% "Trebuchet MS" Verdana, sans-serif;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font: bold 120% "Trebuchet MS" Verdana, sans-serif;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font: italic 110% "Trebuchet MS" Verdana, sans-serif;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-variant: small-caps;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
/* Texte */
|
||||
|
||||
p {
|
||||
margin-right: 0;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
blockquote p {
|
||||
color: #40aaff;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: monospace; /* code informatique */
|
||||
}
|
||||
|
||||
/* Images */
|
||||
|
||||
img {
|
||||
border-width: 0; /* pas de bordure sur les images */
|
||||
}
|
||||
|
||||
/* Tableaux */
|
||||
|
||||
table {
|
||||
border: solid 1px;
|
||||
border-collapse: collapse;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
table td, table th {
|
||||
border: solid 1px black;
|
||||
margin: 0;
|
||||
padding: 0.7em;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
caption {
|
||||
font-size: 120%;
|
||||
font-weight: bold;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
/* Lexiques */
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
padding-bottom: .5em;
|
||||
}
|
||||
|
||||
dd {
|
||||
padding-bottom: 1.5em;
|
||||
}
|
||||
BIN
internet/web/html/iceberg.png
Normal file
BIN
internet/web/html/iceberg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
internet/web/html/iceberg.zip
Normal file
BIN
internet/web/html/iceberg.zip
Normal file
Binary file not shown.
172
internet/web/html/ocean.css
Normal file
172
internet/web/html/ocean.css
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
/******************************************/
|
||||
/* Feuille de style pour le thème "Océan" */
|
||||
/* Fichier dans le domaine public */
|
||||
/******************************************/
|
||||
|
||||
#theme {
|
||||
color: #333333;
|
||||
font-family: Verdana, Charcoal, Geneva, "Luxi Sans", sans-serif;
|
||||
font-size: 12px;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#tout {
|
||||
background-color: #1e1e7f;
|
||||
}
|
||||
|
||||
/***********************/
|
||||
/* Barre de navigation */
|
||||
/***********************/
|
||||
|
||||
#nav {
|
||||
background-color: #1e1e7f;
|
||||
float: left;
|
||||
height: 100%;
|
||||
padding: 25px 10px 0 0;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
#nav ul {
|
||||
background-color: #1e1e7f;
|
||||
list-style-type: none;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
#nav li {
|
||||
background-color: #55ccbb;
|
||||
font-weight: bold;
|
||||
margin-bottom: .5em;
|
||||
padding: 0 0 0 .5em;
|
||||
}
|
||||
|
||||
#nav a:link { color: black; }
|
||||
|
||||
#nav a:visited { color: #343536; }
|
||||
|
||||
#nav a.actif { color: white; }
|
||||
|
||||
/******************/
|
||||
/* Corps du texte */
|
||||
/******************/
|
||||
|
||||
#corps {
|
||||
background-color: white;
|
||||
border-left: solid 5px #55ccbb;
|
||||
margin-left: 160px;
|
||||
min-height: 300px;
|
||||
padding: 15px;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
/**************/
|
||||
/* Généralités*/
|
||||
/**************/
|
||||
|
||||
/* Liens */
|
||||
|
||||
a { text-decoration: none; }
|
||||
|
||||
a:link { color: blue; } /* lien non encore visité */
|
||||
|
||||
a:visited { color: #2727a3; } /* lien visité */
|
||||
|
||||
a:hover { text-decoration: underline; } /* lien survolé par le curseur de la souris */
|
||||
|
||||
/* Hiérarchisation : titres, sous-titres */
|
||||
|
||||
h1 {
|
||||
color: #1e1e7f;
|
||||
font: normal 200% "Trebuchet MS" Verdana, sans-serif;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
background-color: white;
|
||||
font: normal 160% "Trebuchet MS" Verdana, sans-serif;
|
||||
margin-left: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font: bold 140% "Trebuchet MS" Verdana, sans-serif;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font: bold 120% "Trebuchet MS" Verdana, sans-serif;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font: italic 110% "Trebuchet MS" Verdana, sans-serif;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-variant: small-caps;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
/* Texte */
|
||||
|
||||
p {
|
||||
margin-right: 0;
|
||||
padding-left: 10px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
blockquote p {
|
||||
color: #1e1e7f;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: monospace; /* code informatique */
|
||||
}
|
||||
|
||||
/* Images */
|
||||
|
||||
img {
|
||||
border-width: 0; /* pas de bordure sur les images */
|
||||
}
|
||||
|
||||
/* Tableaux */
|
||||
|
||||
table {
|
||||
border: solid 1px;
|
||||
border-collapse: collapse;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
table td, table th {
|
||||
border: solid 1px black;
|
||||
margin: 0;
|
||||
padding: 0.7em;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
caption {
|
||||
font-size: 120%;
|
||||
font-weight: bold;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
/* Lexiques */
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
padding-bottom: .5em;
|
||||
}
|
||||
|
||||
dd {
|
||||
padding-bottom: 1.5em;
|
||||
}
|
||||
BIN
internet/web/html/ocean.png
Normal file
BIN
internet/web/html/ocean.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
internet/web/html/ocean.zip
Normal file
BIN
internet/web/html/ocean.zip
Normal file
Binary file not shown.
190
internet/web/html/orange.css
Normal file
190
internet/web/html/orange.css
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
/*********************************************/
|
||||
/* Feuille de style pour le thème "Orange" */
|
||||
/* Ce fichier est dans le domaine public. */
|
||||
/*********************************************/
|
||||
|
||||
#theme {
|
||||
color: #333;
|
||||
font-family: Verdana, Charcoal, Geneva, "Luxi Sans", sans-serif;
|
||||
font-size: 12px;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Barre de navigation
|
||||
*/
|
||||
|
||||
#nav {
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
#nav ul {
|
||||
background: #ffefd5;
|
||||
border-bottom: solid 2px #fa0;
|
||||
list-style-type: none;
|
||||
margin-right: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#nav li {
|
||||
border-color: #fa0;
|
||||
border-style: solid;
|
||||
border-width: 2px 2px 0 2px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#nav a {
|
||||
color: #4682b4;
|
||||
display: block;
|
||||
font-family: "Trebuchet MS" Verdana, sans-serif;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
padding: 0 5px 0 5px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Liens de la barre de navigation */
|
||||
|
||||
#nav a:hover {
|
||||
background-color: #4682b4;
|
||||
color: #ffefd5;
|
||||
}
|
||||
|
||||
#nav a.linkOn {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#nav a.linkOn:hover{
|
||||
color: white; }
|
||||
|
||||
/*
|
||||
* Corps du texte
|
||||
*/
|
||||
|
||||
#corps {
|
||||
background-color: white;
|
||||
border-left: solid 4px #fa0;
|
||||
margin-left: 160px;
|
||||
min-height: 300px;
|
||||
padding: 15px;
|
||||
position: absolute;
|
||||
width: 600px; /* largeur du texte limitée à 600px, supprimer si ça ne convient pas */
|
||||
}
|
||||
|
||||
/*
|
||||
* Généralités
|
||||
*/
|
||||
|
||||
/* Liens */
|
||||
|
||||
a { text-decoration: none; }
|
||||
|
||||
a:link { color: blue; } /* lien non encore visité */
|
||||
|
||||
a:visited { color: #2727a3; } /* lien visité */
|
||||
|
||||
a:hover { text-decoration: underline; } /* lien survolé par le curseur de la souris */
|
||||
|
||||
/* Hiérarchisation : titres, sous-titres */
|
||||
|
||||
h1 {
|
||||
color: #fa0;
|
||||
font: normal 200% "Trebuchet MS" Verdana, sans-serif;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
background-color: white;
|
||||
font: normal 160% "Trebuchet MS" Verdana, sans-serif;
|
||||
margin-left: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font: bold 140% "Trebuchet MS" Verdana, sans-serif;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font: bold 120% "Trebuchet MS" Verdana, sans-serif;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font: italic 110% "Trebuchet MS" Verdana, sans-serif;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-variant: small-caps;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
/* Texte */
|
||||
|
||||
p {
|
||||
margin-right: 0;
|
||||
padding-left: 10px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
blockquote p {
|
||||
color: #cd853f;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: monospace; /* code informatique */
|
||||
}
|
||||
|
||||
/* Images */
|
||||
|
||||
img {
|
||||
border-width: 0; /* pas de bordure sur les images */
|
||||
}
|
||||
|
||||
/* Tableaux */
|
||||
|
||||
table {
|
||||
border: solid 1px;
|
||||
border-collapse: collapse;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
table td, table th {
|
||||
border: solid 1px black;
|
||||
margin: 0;
|
||||
padding: 0.7em;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
caption {
|
||||
font-size: 120%;
|
||||
font-weight: bold;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
/* Lexiques */
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
padding-bottom: .5em;
|
||||
}
|
||||
|
||||
dd {
|
||||
padding-bottom: 1.5em;
|
||||
}
|
||||
BIN
internet/web/html/orange.png
Normal file
BIN
internet/web/html/orange.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
internet/web/html/orange.zip
Normal file
BIN
internet/web/html/orange.zip
Normal file
Binary file not shown.
262
internet/web/html/themes.tml
Normal file
262
internet/web/html/themes.tml
Normal file
|
|
@ -0,0 +1,262 @@
|
|||
<?xml version="1.0" encoding="ISO-8859-1"?>
|
||||
<!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.css"><code>orange.css</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"><u>accueil</u></a></li>
|
||||
<li> <a href="<em>alpha</em>.html"><u>alpha</u></a></li>
|
||||
<li> <a href="<em>beta</em>.html"><u>bêta</u></a></li>
|
||||
<li> <a href="<em>gamma</em>.html"><u>gamma</u></a></li>
|
||||
<li> <a href="<em>delta</em>.html"><u>delta</u></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 <u>comme cela</u> 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: 2004-03-12 16:38:03 $" />.
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!-- LocalWords: inflating
|
||||
-->
|
||||
Loading…
Reference in a new issue