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/