Cas pratique : mise en page à 2 ou 3 colonnes
La mise en page est généralement la préoccupation majeure des débutants. Nous allons voir dans ce chapitre comment créer une mise en page simple et fonctionnelle sur 2 ou 3 colonnes.
Structurer un site à l'aide d'un tableau
Construire la structure d'un site internet avec un tableau est certainement la méthode la plus simple, ou en tout cas la plus intuitive pour les novices.
Schématiquement, la structure recherchée pour une mise en page sur 2 colonnes :
|
Logo + image + slogan |
|
|
Colonne du menu |
Colonne du contenu |
|
Mentions légales + liens vers des partenaires |
|
Voici la structure type d'un site (seule la balise <body> est présentée) :
<body>
<table>
<tr><td colspan=''2''>Logo + image + slogan</td></tr>
<tr><td>Colonne du menu</td><td>Colonne du contenu</td></tr>
<tr><td colspan=''2''>Mentions légales + liens vers des partenaires</td></tr>
</table>
</body>
Notez au passage le code colspan=''2'' dans la ligne de la bannière, et celle du bas de page. Cette commande permet de fusionner des cellules, sur plusieurs colonnes.
La commande équivalente pour fusionner des cellules sur plusieurs lignes est rowspan.
Ce code XHTML, doit être couplé avec un code CSS qui gèrera les dimensions de chacune des cellules. Comme nous l'avons évoqué en tout début de chapitre, il est possible d'attribuer un nom unique (un « identifiant ») à une balise, pour pouvoir la manipuler séparément et lui appliquer des règles CSS spécifiques.
Rappel : le choix des noms des identifiants est laissé à l'appréciation du webmaster, sous certaines conditions : ce nom ne doit pas commencer par un chiffre, ne pas contenir d'espaces et seul le caractère spécial « _ » est autorisé. Bien évidemment, il est interdit d'utiliser le nom d'une balise existante pour nommer une balise. De plus, le nom choisi est généralement écrit en minuscules, bien que ce ne soit pas une obligation.
Il est par exemple possible de nommer les cellules du tableau avec les identifiants suivants :
<body>
<table>
<tr><td colspan=''2'' id=''banniere'' >Logo + image + slogan</td></tr>
<tr>
<td id=''menu'' >Colonne du menu</td>
<td id=''contenu'' >Colonne du contenu</td>
</tr>
<tr><td colspan=''2'' id=''bas_de_page'' >Mentions légales + liens</td></tr>
</table>
</body>
Ensuite, si vous voulez modifier les dimensions de la bannière, il vous suffit de créer une règle CSS pour l'identifiant #banniere. Par exemple, pour lui imposer une hauteur de 100px, et une bordure rouge de 3 px, vous écrirez :
#banniere {
height: 100px;
border: 3px solid red;
}
Toujours selon le même principe, il est possible de faire une mise en page avec 3 colonnes pour la ligne centrale :
<body>
<table>
<tr><td colspan=''3''>Logo + image + slogan</td></tr>
<tr><td>Menu</td><td>Colonne du contenu</td><td>Colonne de gauche</td></tr>
<tr><td colspan=''3''>Mentions légales + liens vers des partenaires</td></tr>
</table>
</body>
Remarquez que dans ce cas, il faut fusionner 3 cellules sur la première et la dernière ligne, d'où le colspan=''3''.
A l'intérieur de chacune des cellules du tableau (délimitées par les balises <td></td>), vous êtes libres d'ajouter ce que vous voulez : du texte bien sûr, mais aussi des images, des titres, des vidéos...
Cette méthode de mise en page avec des tableaux, bien que très pratique, n'est pas recommandée par le W3C (organisme mondial chargé de « normaliser » et surtout d'unifier les bonnes pratiques sur internet). En effet, le W3C part du principe que les tableaux servent à présenter des données de type tabulaire, et non pas l'intégralité d'un site. Nous allons donc voir une seconde méthode, plus conforme aux recommandations du W3C.
Seconde méthode : avec des blocs <div>
Les balises <div> permettent de créer des « cadres », parfois appelés « calques » ou « blocs ». Chacun de ces cadres pourra avoir des dimensions fixées et être placé où vous les souhaitez dans la page.
Par défaut, lorsqu'on utilise la balise <div> pour créer un cadre, ce cadre s'étale sur 100% de la largeur disponible.
Le grand intérêt de ces cadres est qu'ils sont « superposables » à volonté. Il est ainsi possible de placer un cadre au dessus d'un autre, ou d'afficher deux (ou trois, quatre...) cadres côte à côte. C'est cette propriété que nous allons exploiter pour créer une mise en page sur 2 ou 3 colonnes.
<body>
<div id=''banniere'' >Logo + image + slogan</div>
<div id=''menu'' >Colonne du menu</div>
<div id=''contenu'' >Colonne du contenu</div>
<div id=''bas_de_page'' >Mentions légales + liens</div>
</body>
La structure de la page est ainsi très épurée.
Si aucune règle CSS n'est associée au code XHTML, la page consultée dans le navigateur ressemblera à ceci :
Logo + image + slogan
Colonne du menu
Colonne du contenu
Mentions légales + liens
On est alors bien loin d'une mise en page de site internet... Cela s'explique parce que les cadres occupent 100% de la largeur de la page. Le reste du texte est donc à chaque fois rejeté sur une nouvelle ligne. D'autre part, par défaut, un cadre ne possède pas de bordures visibles.
Le temps du développement de votre site, je vous recommande d'afficher des bordures colorées à chacun des cadres, de couleur différente, pour bien voir leurs dimensions et vérifier que certains cadres ne se chevauchent pas. N'oubliez pas de tester l'affichage simultanément sur Firefox et Internet Explorer pour voir si le résultat obtenu est le même.
Pour remédier à ces inconvénients, nous allons utiliser les identifiants de chacun des cadres pour leur imposer une largeur, et forcer les cadres menu et contenu à cohabiter sur une même ligne. En CSS, cela s'obtient très facilement avec le code suivant :
#banniere {
border: 3px solid red;
}
#menu {
border: 3px solid blue;
float:left;
}
#contenu {
border: 3px solid lime;
float:left;
}
#bas_de page {
border: 3px solid yellow;
clear:both;
}
La commande CSS float:left; impose aux blocs de cohabiter sur une même ligne. Une fois que cette commande est appelée, elle s'applique à toutes les balises « block » suivantes, jusqu'à ce que la commande clear:both; ne viennent mettre un terme à cette règle.
Dans notre exemple, comme le bloc de bas de page doit rester sous le site, et s'étendre sur toute la largeur de la page, c'est à lui que nous appliquons la règle CSS clear:both;.
Une chose n'est pas conforme à la structure du site que nous essayons de mettre en place : la largeur des blocs menu et contenu s'est adaptée à la longueur du texte qu'ils contiennent respectivement. Ces deux blocs n'occupent donc pas toute la largeur de l'écran.
Voici 2 manières simples de résoudre ce problème :
-
soit vous imposer une dimension en % de la largeur de l'écran (le total faisant 100% pour que les 2 « colonnes » s'étalent sur toute la page)
-
soit vous imposer une dimension en pixels à chacun des blocs, et dans ce cas le site aura une largeur fixe (la somme des largeurs des blocs menu et contenu)
Quelle est la meilleure solution ? Quels sont les conséquences de chacune des 2 méthodes ?
Ce dilemme qui « hante » tous les webmasters mérite un sous-chapitre !
Que sont le XHTML et le CSS ?Structure d'une page HTMLLes balises d?entête, head, title, meta...Les balises de corps de page, entre les balises bodyAjouter une image dans la page : balise img (type inline ou block) Insérer des liens : balise a (type inline)Afficher une listeConstruire des tableaux - balise tableCréer des formulaires Les balises universelles : div et spanOù placer le code CSS ?Comment modifier une balise en particulier ?Modifier l'aspect du texteGestion de l'arrière-plan (coloré ou avec des images)Mise en forme du texte : word-spacing , letter-spacing, vertical-align, text-alignMise en forme des balises de type blockLes borduresMise en forme des listesPositionner des blocs HTML à l'écranDébordement d'un bloc HTML : overflowChanger l'aspect de la souris : cursorCas pratique : mise en page à 2 ou 3 colonnesLargeur de site fixe ou variable ?Insertion d'une animation flashInsertion d'une vidéoInsérer un fichier audio
Pour plus d'informations, vous pouvez nous contacter par mail.
Tutos et cours en ligne
