Cours HTML

Laurence Jacquenod

Création d'un mini site

Réalisation de la mise en page

Nous allons construire un mini site, pas à pas pour comprendre le principe de fonctionnement de la mise en page avec css sur un exemple réel. Au début du html, on réalisait la mise en page directement dans le HTML, puis la mise en page se réalisait avec des tableaux et tableaux imbriqués. Maintenant, on ne préconise plus ces méthodes.
Le HTML, nous l'avons vu dans les chapitres précédents doit être sérieusement hiérarchisé, avec un titre 1, des titres 2, 3... Mais pour faire un présentation soignée, avec des menus, nous garderons cette mise en forme en l'encadrant de div, pour créer des espacements, des colonnes, des onglets.
Dans l'exemple que nous allons voir, la page qui se répétera dans les différentes rubriques. Pour commencer nous écrivons le xhtml.

haut de page, illustration

menu (déroulant)

contenu

footer

HTML <body>
<div id="conteneur">
<div class="haut"> haut de page </div>
<div class="menu">menu déroulant</div>
<div class="contenu"> contenu</div>
<div class="footer">footer</div>
</div>
</body>

CSS body {background-color:#522501;margin:0;padding:0;}
div.conteneur {width:960px;background-color:#FFF;margin:auto;text-align:center;}
div.haut {background-image:url(images/choc.jpg);background-repeat:no-repeat;height:80px;min-height:80px;}
div.menu {height:22px; width:960px;}
div.contenu {min-height:400px;text-align:left;padding:10px;}
div.footer {color:#white; font-style:italic;}

Création d'un menu déroulant

Le menu que nous allons étudier pas à pas est inspiré d'un tutoriel trouvé sur le site du zéro, voir le lien.
Tout d'abord nous allons mettre en place le xhtml.

Pour créer le menu déroulant, nous allons utiliser des listes à puce. Que nous allons ensuite imbriquer, c'est à dire placer une liste à puce dans une liste à puce pour les sous menus. A chaque ligne, nous attribuons ensuite un hyperlien qui pointera sur chaque rubrique et sous rubrique du site. Dans l'exemple j'écris des dièse pour remplacer les pages qui n'existent pas encore.

HTML <div class="nav">
<ul class="menu">
<li><a href="#">Les desserts en chocolat</a>
<ul>
<li><a href="#">Les gâteaux</a></li>
<li><a href="#">Les entremets</a><a href="#"></a></li>
<li><a href="#">Les glaces</a></li>
</ul></li>
<li><a href="page01.html">Faire des chocolat maison</a>
<ul class="menu02">
<li><a href="#">Matériel</a></li>
<li><a href="#">Fournisseurs</a></li>
<li><a href="#">Les recettes</a></li>
</ul>
</li>
<li><a href="#">Histoire du chocolat</a>
<ul>
<li><a href="#">Comment il est né</a><a href="#"></a></li>
<li><a href="#">Musée du chocolat</a></li>
</ul>
</li>
<li><a href="#">Adresses</a>
<ul class="menu02">
<li><a href="#">Liste des super chocolatiers</a></li>
<li><a href="#">Où déguster du chocolat</a></li>
</ul>
</li>
</ul>
</div>

Les CSS

CSS

.nav{
background-color:#4082AE;
width:800px;
height:22px;
font-weight : bold;
font-family: Arial;
font-size : 12px;
}
.menu, .menu ul{
padding:0;
margin:0;
line-height:21px;
list-style : none;
text-align : center;
border-bottom:#006 1px solid;
}

.menu a {
display : block;
padding : 0;
color : #000;
text-decoration : none;
width : 200px;
}
.menu a:hover {
color : #FFF;
background:#2C5F82;
}
.menu li {
float : left;
border-right : 1px solid #FFF;
border-bottom:#006 1px solid;
}
.menu li ul {
position: absolute;
width: 200px;
background-color:#A8D6F4;
left: -999em;
}
.menu li:hover ul ul, .menu li.sfhover ul ul {
left: -999em;
}

.menu li:hover ul, .menu li li:hover ul, .menu li.sfhover ul, .menu li li.sfhover ul {
left: auto;
min-height: 0; }

Pui ajouter du javascript, créer un nouveau document avec l'éditeur de text et lui donner l'extension.js

sfHover = function() { var sfEls = document.getElementById("menu").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover);

Placer ce code entre les deux balises head :

<script type="text/javascript" src="menu.js"></script>

site Voici le résultat

Télécharger le fichier du menu