Techniques de
Programmation pour Internet
Cours Année
Spéciale ENSIMAG 2006 - 2007
Séance 5 - 26
Février 2006 -
I. Création d'une fichier de style.
1) Allez au répertoire ~/www (cd ~/www) et
créez une répertoire nommée "include"
(mkdir include).
2) Démarrer votre éditeur de texte
préféré et créer
un nouveau fichier.
Copier les lignes suivant dans ce fichier.
body{
font-size:1em;
font-family: arial, helvetica,
sans-serif;
font-size: 14px;
}
h1{
margin:10px 0;
padding:5px 0 0 0;
text-align:center;
color:#ff0000;
border-bottom:1px solid #bbb;
}
h2{
color:#753;
}
h3{
color:#246;
}
Sauver ce fichier dans le repertoire "~/www/include" avec le
nom "~/www/include/style.css".
3) Ouvrir le fichier index.html que vous avez
crééz en séance 3. Trouver les lignes
:
<head>
<title>.... </title>
</head>
Ajouter les lignes suivant après la
ligne<title>.... </title>
<link rel="stylesheet" type="text/css"
href="include/style.css">
Sauvegardez le fichier dans votre
répertoire
"~/www" comme "~/www/index.html". Démarrer votre navigateur
préféré.
Aller à la page:
http://ensisun:80/**votre_login**/index.html, et regarder le
résultat.
Expérimenter avec les définitions de
<body>,
<h1>, <h2>, <h3> et regarder
le résultat.
II. Ajout d'un bar de navigation
1) Dans le fichier style.css, ajouter le ligne suivant
à
l'intérieur à la définition du style
"body" :
padding-left: 10em;
2) Immédiatement après la balise
<body>, ajouter la définition d'un navbar avec
la ligne :
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width:
8em }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;}
ul.navbar a { text-decoration: none }
a:link {color: blue }
a:visited {color: red }
Sauver votre fichier style.css
3) Dans votre fichier index.html, immédiatement
après la balise <body>, ajouter les
lignes.
<!-- Site navigation menu -->
<div id="navbar">
<ul class="navbar">
<li><a href="index.xhtml">Home
page</a> </li>
<li><a href="page1.xhtml">Page
1</a> </li>
<li><a href="page2.xhtml">Page
2</a> </li>
<li><a href="page3.xhtml">Page
3</a> </li>
</ul>
</div>
<!-- Main content -->
Sauver votre fichier. Créer les copies de votre fichier avec
les noms page1.xhtml, page2.xhtml, et page3.xhtml
Regarder votre fichier avec votre navigateur.
4) A vous de jouer : Experimenter avec les variations dans le fichier
style.css et index.html en regardant les
résultats.
Vous trouverez les idées dans:
http://www.w3.org/Style/CSS/