Comment créer un site web en partant de rien ?

1-Introduction

Tout au long de cet exercice, nous allons utiliser deux fichiers :

index.html : contiendra tout notre code HTML.
style_div.css : contiendra toutes les informations relatives au positionnement de nos différents blocs.

Pour inclure notre CSS dans notre page HTML, rien de plus simple, il nous suffit d’insérer le code suivant entre les balises <head> et </head> :

<link rel="stylesheet" type="text/css" href="style_div.css">

Définissons tout d’abord les propriétés de base de nos blocs. Dans notre fichier CSS :

div {
    text-align:center;
}

Ce petit bout de code définit simplement que pour tous les éléments de type div, le texte sera centré (text-align).

2- créer 3 blocs : bandeau, contenu, pied de page

Nous allons commencer par créer un modèle de page tout bête, comprenant un bandeau, une zone de contenu, et un pied de page
Nous alons définir (parfaitement arbitrairement) des couleurs (uniquement pour bien se représenter les positions) ainsi que les dimensions de nos différents blocs :

Bandeau : 600 x 50 px – couleur : #00CCFF
Contenu : 600 x 400 px – couleur : #FFCC00
Pied de page : 600 x 50 px – couleur : #33FF99

Ce qui va se transcrire dans notre fichier CSS par :

div#mon_bandeau {
    width:600px;
    height:50px;
    background-color:#00CCFF;
}

div#mon_contenu {
    width:600px;
    height:400px;
    background-color:#FFCC00;
}

div#mon_piedpage {
    width:600px;
    height:50px;
    background-color:#33FF99;
}

Vous remarquerez le signe ‘#’ placé après ‘div‘, et suivi d’un descriptif. Il va permettre de définir un identifiant (unique), auquel s’appliquera le style.
Ici, nous avons donc défini 3 identifiants : ‘mon_bandeau’, ‘mon_contenu’, et ‘mon_piedpage’.

Les noms sont assez explicites pour ne pas avoir besoin d’en rajouter !

Pour chacun des identifiants, nous avons défini trois propriétés :

width : la largeur de notre bloc
height : la hauteur du bloc
background-color : la couleur de fond du bloc

Certains éléments sont redondants, mais laissons les tel quels, ils ne le seront plus dans les exemples suivants.

Une fois les propriétés de ces trois éléments définies, il ne nous reste plus qu’à demander à notre HTML de nous les afficher.
Le code suivant est à placer entre les balises <body> et </body> de notre page :

<div id="mon_bandeau">Ceci est le bandeau</div> 
<div id="mon_contenu">Ceci est le contenu</div> 
<div id="mon_piedpage">Ceci est le pied de page</div>

Ceci est le bandeau

Ceci est le contenu

Ceci est le pied de page

3 Ajouter une barre de menu à gauche du contenu

C’est bien joli tout ça, mais des sites sans menus, il n’y en a plus des masses. Qu’à cela ne tienne, nous allons en rajouter un…

Vous aurez sans doute remarqué dans l’exemple précédent que, lorsqu’on met dans notre fichier HTML des divs les uns à la suite des autres, ils s’affichent les uns sous les autres.
Pour afficher deux div l’un à coté de l’autre, il va donc nous falloir utiliser une autre propriété. C’est la propriété float qui va s’en charger.

Nous allons commencer par rajouter les propriétés du nouveau bloc de menus que nous allons créer :

div#mon_menu {
    float:left;
    width:100px;
    height:400px;
    background-color:#FF6699;
}

Vous remarquerez que nous avons rajouter la propriété float aux éléments ‘mon_menu‘ et ‘mon_contenu‘, sinon celui-ci va se ‘glisser’ sous le bloc mon_contenu :

 float:left;

Ne pas oublier de réduire la largeur du bloc ‘mon_contenu’ a 500px !

Intercalons maintenant notre menu dans la page HTML entre le bandeau et le contenu :

<div id="mon_menu">Ceci est le menu</div>

Ceci est le bandeau

Ceci est le menu

Ceci est le contenu

Ceci est le pied de page

Mais, mais, mais !!! Qu’est devenu notre beau pied de page ? Et bien il s’est tout simplement glissé sous le menu et le contenu. Vous pouvez le vérifier simplement en modifiant la largeur de celui-ci, et vous verrez alors apparaitre un petit bout de barre vert qui dépasse.

Pour éviter ce fâcheux problème, il existe là encore une propriété qui va permettre de dire qu’on veut que notre élément se remette à se comporter normalement (qu’il se positionne en dessous du reste quoi !). C’est la propriété clear.

Rajoutons donc cette propriété à notre bloc ‘mon_pied de page‘ :

 clear : both;

Et hop, c’est encore magique, nous obtenons le résultat escompté :

Ceci est le bandeau

Ceci est le menu

Ceci est le contenu

Ceci est le pied de page

4- séparer verticalement mon menu en deux blocs égaux

Petit rappel : sans propriétés spécifiques, les blocs se positionnent les uns sous les autres.
En utilisant la propriété float, les blocs se positionnent les uns à coté des autres.

L’idée ici va donc être de créer un bloc ‘conteneur‘, qu’on positionnera à gauche du contenu (à l’aide de la propriété float donc). Et dans ce bloc, nous allons en placer deux autres, ‘mon_menuhaut‘ et ‘mon_menubas‘, qui eux vont se positionner l’un au dessus de l’autre.

Vous me suivez toujours ? Très bien, alors passons à la pratique… Nous allons utiliser le bloc ‘mon_menu‘ comme conteneur. Inutile donc de changer ses propriétés puisqu’il est déjà bien placé.

Propriétés des deux nouveaux blocs dans notre CSS :

div#mon_menuhaut {
    width:100px;
    height:200px;
    background-color:#66CC33;
} 

div#mon_menubas {
    width:100px;
    height:200px;
    background-color:#CC99CC;
}

Pas de propriétés float ici donc, puisque nous voulons que les deux blocs se superposent. Il ne reste plus qu’à demander à notre page de nous afficher ces deux nouveaux blocs, à l’endroit désiré :

<div id="mon_bandeau">Ceci est le bandeau</div>
<div id="mon_menu">Ceci est le menu</div>
          <div id="mon_menuhaut">Menu haut</div>
          <div id="mon_menubas">Menu bas</div>
<div id="mon_contenu">Ceci est le contenu</div>
<div id="mon_piedpage">Ceci est le pied de page</div>

Et voici le résultat c’est merveilleux non ?:

Bandeau

Menu haut

Menu bas

Contenu

Pied de page

5- Créer un bloc de News

Et oui !!! Décidément, le CSS, c’est surpuissant. Nous allons donc définir un nouveau bloc, appelé ‘blocnews’ (si c’est pas original ça …).

Cette fois encore, nous allons faire appel à la propriété float.

div#mon_blocnews {
    float:right;
    width:150px;
    height:150px;
    background-color:#FF3300;
}

Rien de nouveau sous le soleil dans la définition des propriétés de notre élément, tout est connu. Passons maintenant à son intégration à notre page :

<div id="mon_contenu">     
     <div id="mon_blocnews">Bloc News</div>
          Ceci est le contenu 
</div>

La seule chose à laquelle il faut faire attention, c’est l’imbrication des différents éléments, qui, si elle est mal faite, peut vous pourrir la mise en page.

Si vous remplacez le texte ‘Ceci est le contenu’ dans le bloc contenu par un texte très long, vous vous apercevrez que le texte se décale pour suivre le contour du bloc news…

Bandeau

Menu haut

Menu bas

Bloc News

Ceci est le contenu

Pied de page

Récapitulatif du code CSS (feuille de style) :

div#mon_bandeau {
   width:600px
   height:50px;
   background-color:#00CCFF;
}

div#mon_contenu {
   width:500px;         /* 600px au début de l'exo puis 500px ensuite */
   height:400px;
   background-color:#FFCC00;
}

div#mon_piedpage {
   width:600px;
   height:50px;
   background-color:#33FF99;
   clear : both;
}

div#mon_menu {
   float:left;
   width:100px;
   height:400px;
   background-color:#FF6699;
}

div#mon_menuhaut {
   width:100px;
   height:200px;
   background-color:#66CC33;
} 

div#mon_menubas {
   width:100px;
   height:200px;
   background-color:#CC99CC;
}

div#mon_blocnews {
   float:right;
   width:150px;
   height:150px;
   background-color:#FF3300;
}

Récapitulatif du code dans la page HTML :

<div id="mon_bandeau">Bandeau</div>
<div id="mon_menu">
   <div id="mon_menuhaut">Menu haut</div>
   <div id="mon_menubas">Menu bas</div>
</div>
<div id="mon_contenu">
   <div id="mon_blocnews">Bloc News</div>
   Ceci est le contenu
</div>
<div id="mon_piedpage">Pied de page</div>