Boîte à outils |
Diviser facilement une page
|
|
Il existe trois méthodes principales pour diviser une page en plusieurs zones : les cadres (traités dans la section Générateur de cadres de ce site), les tableaux et le CSS. Cette page présente la méthode avec tableau, où chaque cellule représente une zone distincte, dans laquelle viendront s'insérer les différents éléments textuels et visuels.
Plutôt que de grandes explications, voici quelques exemples; dans un
premier temps, le code, puis, juste en dessous, le résultat obtenu avec ce code. Les séparations servent uniquement à distinguer les grandes sections du code. Les éléments en noir représentent des échantillons de contenu que vous remplacez par votre propre texte ou vos propres images :
|
|
| Déclaration du tableau |
<table
border="0" width="100%" cellspacing="0"
cellpadding="6"> |
| Ce code représente la rangée du haut (en bleu pâle). Pour obtenir un tableau sans cette rangée, il
suffit de supprimer tout ce code. Il peut également être placé juste avant le code
</table> de la fin pour avoir la même rangée mais en bas. |
<tr>
<td width="100%" bgcolor="#7599C1"
valign="top" colspan="2"><font color="#000000">Vous pouvez insérer ici du texte, des
images, des liens, un autre tableau, etc :</font>
<p>
<center>
<table border="1"
width="60%" cellpadding="4">
<tr>
<td
width="50%"><font color="#000000">Cellule1_Rangée1</font></td>
<td
width="50%"><font color="#000000">Cellule2_Rangée1</font></td>
</tr>
<tr>
<td
width="50%"><font color="#000000">Cellule1_Rangée2</font></td>
<td
width="50%"><font color="#000000">Cellule2_Rangée2</font></td>
</tr>
</table>
</center>
<p align="center"><img src="bou0598-8.gif"
width="150" height="55"></td>
</tr> |
| Ce code représente la cellule de gauche de la rangée du dessous (en
brun). |
<tr>
<td width="20%" bgcolor="#800000"
valign="top"><font color="#FFFFFF">Vous pouvez insérer ici du texte, des images, des liens, un autre
tableau, etc.</font>
<p>
<center>
<table border="1" width="60%"
cellpadding="4">
<tr>
<td
width="50%"><font color="#FFFFFF">C1_R1</font></td>
<td
width="50%"><font color="#FFFFFF">C2_R1</font></td>
</tr>
<tr>
<td
width="50%"><font color="#FFFFFF">C1_R2</font></td>
<td
width="50%"><font color="#FFFFFF">C2_R2</font></td>
</tr>
</table>
</center>
<p>
<img src="bou0598-8.gif"
width="150" height="55" alt="bou0598-8.gif"></td> |
| Ce code représente la cellule en jaune pâle |
<td width="80%" bgcolor="#DACEB1"
valign="middle"><font color="#000000">Vous pouvez insérer ici du texte, des images, des liens, un autre
tableau, etc.</font>
<p>
<center>
<table border="1" width="60%"
cellpadding="4">
<tr>
<td width="50%"><font
color="#000000">Cellule1_Rangée1</font></td>
<td width="50%"><font
color="#000000">Cellule2_Rangée1</font></td>
</tr>
<tr>
<td width="50%"><font
color="#000000">Cellule1_Rangée2</font></td>
<td width="50%"><font
color="#000000">Cellule2_Rangée2</font></td>
</tr>
</table>
</center>
<p align="center"><br><img src="bou0598-8.gif"
width="150" height="55" alt="bou0598-8.gif"></td>
</tr> |
| Fin du tableau |
</table> |
Voici ce qui devrait résulter de ce code. Les images n'apparaîtront que si vous les
téléchargez (bouton droit de la souris + Enregistrer l'image sous...)
| Vous
pouvez insérer ici du texte, des images, des liens, un autre tableau, etc.
| Cellule1_Rangée1 |
Cellule2_Rangée1 |
| Cellule1_Rangée2 |
Cellule2_Rangée2 |
|
| Vous pouvez insérer
ici du texte, des images, des liens, un autre tableau, etc.
|
Vous pouvez insérer ici du texte, des images, des liens, un autre tableau, etc.
| Cellule1_Rangée1 |
Cellule2_Rangée1 |
| Cellule1_Rangée2 |
Cellule2_Rangée2 |
|
Le même tableau avec des espaces entre les cellules. La seule différence de
codification réside dans la première ligne de code, dans laquelle le paramètre
"cellspacing" a été configuré à 6. Tout le reste est identique :
| <table
border="0" width="100%" cellspacing="6" cellpadding="6"> |
| Vous
pouvez insérer ici du texte, des images, des liens, un autre tableau, etc.
| Cellule1_Rangée1 |
Cellule2_Rangée1 |
| Cellule1_Rangée2 |
Cellule2_Rangée2 |
|
| Vous pouvez insérer
ici du texte, des images, des liens, un autre tableau, etc.
|
Vous pouvez
insérer ici du texte, des images, des liens, un autre tableau, etc.
| Cellule1_Rangée1 |
Cellule2_Rangée1 |
| Cellule1_Rangée2 |
Cellule2_Rangée2 |
|
Toujours le même tableau, mais avec des images comme fonds de cellules. Dans ce cas,
on attribue un paramètre "background" à chaque cellule, comme ceci (code de la
première rangée du tableau ci-dessous :
|
<td
width="100%" bgcolor="#7599C1" valign="top"
colspan="2" background="diviser_fds1.jpg">
|
Cellule1_Rangée1 |
Cellule1_Rangée2
|
Cellule2_Rangée2 |
Et si tout ceci vous a semblé un peu trop compliqué ou que vous préférez les
solutions "clé en main", j'ai préparé pour vous quelques
"modèles", que vous pouvez sauvegarder sur votre disque dur et utiliser comme
point de départ d'une page divisée selon ce mode :
En cliquant sur chaque modèle, vous tomberez dans la page .html correspondante. Pour
l'enregistrer sur votre disque dur, choisissez Fichier/Enregistrer sous... et
sélectionner le répertoire de votre choix. Il suffira ensuite de modifier les éléments
textuels déjà existants par votre propre contenu.
|
|
Signer le Registre des visiteurs
|
Les causes que je supporte :
|
| |
|
