Organisation d'une page web

Structure courante d'une page Web

Dans ce tutoriel, nous allons voir comment organiser son code XHTML pour réaliser une page Web agréable et pratique.

Pour commencer, arrêtons nous quelques instants sur la structure d'une page simple.

structure d'une page web

Vous avez certainement reconnu ce type de page car beaucoup de sites Internet utilisent cette structure simple.

Partie XHTML

Comme vous le voyez sur le schéma, votre code devra être décomposé en 4 grandes parties: le titre, le menu, le corps et le pied de page.
Ce découpage du code s'effectuera grâce à 4 blocks <div>Type Block. Pour repérer ces blocks, nous allons les nommés grâce à l'attribut id (vous pouvez utiliser l'attribut class si vous préférez mais comme dans notre cas il n'y a qu'un seul titre, un seul menu... nous utiliserons un id).

Voici donc le squelette de notre code:

Ajoutons un peu de contenu dans chacune de ces parties.
Tout d'abord le titre. En général il s'agit d'une bannière, c'est à dire une image que l'on charge donc deux possibilités s'offrent à vous, soit vous mettez votre image avec la balise <img/>, soit vous mettez votre image grâce au css en faisant un background.
Nous utiliserons la deuxième solution qui est plus pratique si vous souhaitez changer le design de votre site sans toucher au code XHTML.
Il n'y a donc rien à mettre dans le block titre qui sera entièrement géré avec le css.

Passons maintenant au menu. En général, un menu est décomposé en plusieurs sous-menus comme dans le schéma plus haut. Nous allons donc créer deux nouveaux blocks <div> qui vont nous permettre de réaliser deux sous-menus.
Les noms des sous-menus seront écris avec les balises <h4>Type Block et la liste des liens sera simplement des listes à puces.

Voici donc le contenu de notre block menu:

Il nous reste ensuite à s'occuper du corps.
C'est ici que vous allez mettre le contenu de votre site, enfin bref tout le bla bla que vous souhaitez. Nous passons donc très vite sur le contenu de ce block.

Pour finir, le pied de page. Ici sont généralement regroupées des informations sur le site comme par exemple un copyright, une liste de partenaires, le nom du ou des webmasters...

Nous allons faire simple en ne mettant qu'un copyright parce que c'est la classe...

<div class="pied">
<p>
<em>Copyright Ctamoa 2007-2054</em>
</p>
</div>

Et voila nous avons terminé la partie XHTML, pas très compliqué n'est-ce pas...
Voila donc le code que vous devez obtenir:

<body>
<div class="titre">
</div>

<div class="menu">
<div class="sous-menu">
<h4>Sous-menu 1</h4>
<ul>
<li><a href="lien1.html">Lien 1</a></li>
<li><a href="lien2.html">Lien 2</a></li>
<li><a href="lien3.html">Lien 3</a></li>
</ul>
</div>

<div class="sous-menu">
<h4>Sous-menu 2</h4>
<ul>
<li><a href="lien1.html">Lien 1</a></li>
<li><a href="lien2.html">Lien 2</a></li>
</ul>
</div>
</div>

<div class="corps">
Mettez ici tout ce que vous voulez. </div>

<div class="pied">
<p>
<em>Copyright Ctamoa 2007-2054</em>
</p>
</div>
</body>

Tester le code sans css

Le code CSS

Le plus dure reste à faire. Le XHTML c'est de la rigolade, reste maintenant le css...
Enfin en réalité c'est pas vraiment plus difficile que la partie précédente.

Nous allons dans un premier temps centrer tout notre contenu. Nous allons donc agir sur la balise <body>.
Tout le monde n'utilise pas la même résolution d'écran, il est donc nécessaire lorsque l'on fait un tel site que personne ne soit gêné par la taille de votre page. Une taille standard pour votre page serait 800px. Ainsi, seul ceux qui utilisent une résolution inférieur à 800px de largeur auront une barre de défilement horizontale.

Nous allons donc limiter la taille de la balise <body> à 800px, centrer le tout et pour finir, nous allons mettre une couleur de fond :

body
{
width: 800px;
margin: auto;
background: rgb(255, 250, 220);
}

Tester

Occupons nous maintenant du titre. Notre titre sera une image nommée baniere.png qui mesure 800px de large sur un peu moins de 130px de hauteur.
Nous allons fixer la hauteur du titre à 130px puis nous allons mettre l'image baniere.png en fond en faisant attention de ne l'afficher qu'une seule fois. De plus, comme nous vous l'avons dis plus haut, l'image mesure un peu moins de 130px de hauteur, il faut donc la centrer dans notre block <div>. Le résultat est le suivant:

#titre
{
height: 130px;
background: url("baniere.png") no-repeat 50% 50%;
}

Tester

Dans la suite logique des choses, nous allons maintenant nous attaquer au placement du menu. Celui-ci sera placé sous le titre, à gauche du corps de notre page.
Il existe plusieurs possibilités pour mettre le menu en place. Celle dont nous allons nous servir est très simple, le menu sera tout simplement un block flottant à gauche.
Nous limiterons aussi la largeur du menu à 150px.

#menu
{
width: 150px;
float: left;
}

Tester

L'inconvénient de cette méthode est que si le corps est plus haut que le menu alors une partie de celui-ci se mettra en dessous. Pour remédier à ce problème il suffira juste de mettre une marge à gauche de notre corps de la même taille (ou plus grande) que le menu.

D'ailleurs nous allons placer le corps avant de nous arrêter un peu plus longtemps sur les sous-menus.
Notre menu fait 150px de large, une marge de 155px pour le corps serai une bonne solution. De plus, nous avons vu plus haut que la largeur totale de notre site sera de 800px. Sachant que nous avons effectué une marge de 155px, la largeur de notre corps sera de 645px.
Rien ne vous empêche d'utiliser d'autres valeurs ou d'ajouter des marges, libre à vous de gérer la taille de vos parties.

Pour continuer dans le domaine des dimensions, je vous conseille de mettre une hauteur minimale à votre corps avec un min-height (400px marche très bien). Cela vous permettra d'avoir un site organisé de la même manière, même si votre corps est vide, essayez donc...
Dernière chose concernant le corps, la couleur de fond. Libre à vous de mettre une image et d'ajouter des bordures par exemple. Nous, nous allons rester simple et appliquer juste une couleur unie.

Le code css pour le corps est le suivant:

#corps
{
margin-left: 155px;
width: 645px;
min-height: 400px;
background-color: rgb(239, 217, 142);
}

Tester

Maintenant que le corps est correctement positionné, revenons sur les sous-menus. Si vous vous rappelez le schéma du menu, celui-ci se décompose en deux sous-menus. Nous allons donc placer ces sous-menus.

Pour commencer, nous allons fixer la taille des sous-menus à 130px et les centrer avec un margin: auto; .
Ici aussi je vous conseille de fixer une hauteur minimale...
Et enfin, la couleur de fond, nous prendrons la même que pour le corps:

.sous-menu
{
width: 130px;
margin: auto;
min-height: 75px;
background-color: rgb(239, 217, 142);
}

Tester

Pour terminer, le pied de page. C'est le plus simple à positionner puisse qu'il est placé en dessous de tout. Il n'ai pas nécessaire de fixer de taille limite mais pour faire les choses correctement, je vous conseil de préciser ses dimensions, ou au moins la hauteur. Ca ne prend qu'une seule ligne et ça vous évitera peut être des affichages bizarre.
La couleur de fond sera la même que pour le corps et les sous-menus.
Dernier petit élément de style, nous allons centrer le texte à l'intérieur de pied de page.

#pied
{
text-align: center;
height: 40px;
background-color: rgb(239, 217, 142);
}

Tester

Et voila le travail !! Vous avez la structure d'une page Web standard. Bon certes c'est un peu triste comme site mais le but était de vous montrer le principe du découpage du code XHTML et de l'organisation nécessaire pour le css. Libre à vous d'ajouter plusieurs chose comme par exemple des bordures autour des sous-menus, des images de fond pour remplacer la couleur unie, des marges intérieures pour éviter que le texte ne soit trop collé aux bords du cadre...

Un design extensible

Une amélioration très intéressante serai de rendre le site extensible, c'est à dire que la taille des blocks varierai en fonction de la taille de la fenêtre du navigateur internet. Ca évite par exemple d'avoir un grand espace non utiliser sur les bord de votre site si vous utilisez une grande résolution d'écran.

Le plus difficile dans les designs extensibles, c'est le titre. Une image ne se redimensionne pas toute seule. il faut donc soit utiliser plusieurs images qui se répètent, mais cette technique ne peut pas s'appliquer pour tout type de bannière, soit utiliser des images à fond transparents au format png ou gif disposées sur un block extensible qui lui contiendra la couleur de fond. C'est cette technique qui est utilisé sur trivial webz.

Pour ce qui est des autres parties du site, l'idée générale est de ne pas utiliser les pixels comme unité de mesures mais les pourcentages.
Nous n'allons pas nous étendre plus sur le sujet, vous avez l'idée principal, c'est à vous de jouer...