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