<!-- Introduction -->
Les sites internet peuvent être fait à partir de différent type de logiciel donc tout simplement un logiciel de retouche d'image comme par exemple Adobe Photoshop ou son équivalent libre: The Gimp.

Pour cela, il suffit de créer entièrement la page en tant qu'image. Photoshop dispose d'un outil pour placer des liens à certains endroit de celle-ci (outil tranche) et ensuite de l'exporter en html. Il suffit de voir le code html pour remarquer que celui-ci est relativement lourd, puisque former en tableau avec une image morcelé en de nombreux morceaux.
Une telle création de page est également problématique pour toute modification ultérieur.

Heureusement pour nous, CSS pourra nous faciliter grandement la tâche.

<!-- Création d'une page web -->
Nous allons voir un cas simple où nous aurions un menu à gauche du contenu comme on trouve assez souvent.
Structure de la page:
- un entête
- une zone pour le contenu
- un menu
- un pied

Voici ce que celà donnera au final pour cet exemple.


Pour réaliser cette page, nous allons découper l'image de la page complète en trois fichiers.

1/ Nous recadrons l'entête et en faisons un premier fichier.
2/ nous faisons de même pour le pied.
3/ Pour le menu et la zone du contenu nous allons faire un fichier pour les deux. Pour cette partie, il est conseillé d'utiliser un aplat (couleur uniforme) pour rendre le contenu du contenu variable en hauteur. Ainsi, le fond ne sera que de 1 ou 2 pixel en hauteur et répété grace à CSS.
Nous aurons donc trois fichiers, tous de largeur identique.

Voici donc les trois fichiers de notre exemple:

Premier fichier ici en 750x30px,

Le fond en 750x1px,

et le pied en 750x30px.

Pour le fichier html, il pourra être fait à partir de n'importe quel éditeur de texte.
Le code sera simple et très léger:

<
<div id="container">
<div id="entete"></entete>
<div id="menu"></div>
<div id="contenu"></div>
<div id="pied"></div>
</div>
>

Il ne restera plus qu'à tout placer en CSS.
Exemple:

<
body{
background:#94d0c8; /*Couleur de fond*/}
div#container{
width:750px; /*Largeur du container*/
margin:10px auto 0px auto; /*Positionnement centré avec 10px en haut*/}
div#entete{
background:#11d724; /*Couleur de fond*/
height:100px; /*Hauteur de l'entête*/
border:1px solid #000; /*Bordure de l'entete à 1px d'épaisseur*/
margin-bottom:10px; /*marge de 10px sous l'entete*/}
div#contenu{
margin:0px 0px 0px 160px; /*Marge gauche de 160px pour le menu*/
width:580px; /*Largeur de 580px*/
padding:5px; /*Marge de 5px autour du texte*/
background:#d7cb11;}
div#menu{
float:left; /*positionnement du menu à gauche*/
width:140px; /*Largeur de 140px*/
background:#1198d7;
padding:5px; /*Marge de 5px autour du texte*/}
div#pied{
height:20px; /*Hauteur de 20px*/
background:#ff0000;
margin-top:10px; /*Marge de 10px en haut du pied*/}
>

Dans un tel cas, l'image de fond du contenu est à mettre sur le <div id="container"> avec ce CSS:

<
div#container { background-image: url(url de l'image);}
>

On pourra alors placer l'entête et le pied en plaçant cette balise:

<
<img src="" alt="" />
>

dans les div entete et pied.
L'image de l'entête de cette exemple est très simple mais on peux imaginer d'avoir à la place une bannière.
Par exemple:


Tester le script: cliquer ici - Avec bannière: cliquer ici
Télécharger le script: