Accueil Images Boîte à outils Liens Contact
 

 

 

 

 

Bote outils

Diviser facilement une page

Il existe trois mthodes principales pour diviser une page en plusieurs zones : les cadres (traits dans la section Gnrateur de cadres de ce site), les tableaux et le CSS. Cette page prsente la mthode avec tableau, o chaque cellule reprsente une zone distincte, dans laquelle viendront s'insrer les diffrents lments textuels et visuels.

Plutt que de grandes explications, voici quelques exemples; dans un premier temps, le code, puis, juste en dessous, le rsultat obtenu avec ce code. Les sparations servent uniquement distinguer les grandes sections du code. Les lments en noir reprsentent des chantillons de contenu que vous remplacez par votre propre texte ou vos propres images :

 

 

Dclaration du tableau <table border="0" width="100%" cellspacing="0" cellpadding="6">
Ce code reprsente la range du haut (en bleu ple).

Pour obtenir un tableau sans cette range, il suffit de supprimer tout ce code. Il peut galement tre plac juste avant le code </table> de la fin pour avoir la mme range mais en bas.

<tr>
    <td width="100%" bgcolor="#7599C1" valign="top" colspan="2"><font color="#000000">
Vous pouvez insrer 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_Range1</font></td>
            <td width="50%"><font color="#000000">
Cellule2_Range1</font></td>
          </tr>
          <tr>
            <td width="50%"><font color="#000000">
Cellule1_Range2</font></td>
            <td width="50%"><font color="#000000">
Cellule2_Range2</font></td>
          </tr>
        </table>
        </center>
   <p align="center"><img src="
bou0598-8.gif" width="150" height="55"></td>
  </tr>
Ce code reprsente la cellule de gauche de la range du dessous (en brun).   <tr>
    <td width="20%" bgcolor="#800000" valign="top"><font color="#FFFFFF">
Vous pouvez insrer 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 reprsente la cellule en jaune ple    <td width="80%" bgcolor="#DACEB1" valign="middle"><font color="#000000">Vous pouvez insrer 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_Range1</font></td>
        <td width="50%"><font color="#000000">
Cellule2_Range1</font></td>
      </tr>
      <tr>
        <td width="50%"><font color="#000000">
Cellule1_Range2</font></td>
        <td width="50%"><font color="#000000">
Cellule2_Range2</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 rsulter de ce code. Les images n'apparatront que si vous les tlchargez (bouton droit de la souris + Enregistrer l'image sous...)

 

Vous pouvez insrer ici du texte, des images, des liens, un autre tableau, etc.

 

Cellule1_Range1 Cellule2_Range1
Cellule1_Range2 Cellule2_Range2


Vous pouvez insrer ici du texte, des images, des liens, un autre tableau, etc.

 

C1_R1 C2_R1
C1_R2 C2_R2


Vous pouvez insrer ici du texte, des images, des liens, un autre tableau, etc.

 

Cellule1_Range1 Cellule2_Range1
Cellule1_Range2 Cellule2_Range2


 

Le mme tableau avec des espaces entre les cellules. La seule diffrence de codification rside dans la premire ligne de code, dans laquelle le paramtre "cellspacing" a t configur 6. Tout le reste est identique :

 

<table border="0" width="100%" cellspacing="6" cellpadding="6">

 

Vous pouvez insrer ici du texte, des images, des liens, un autre tableau, etc.

 

Cellule1_Range1 Cellule2_Range1
Cellule1_Range2 Cellule2_Range2


Vous pouvez insrer ici du texte, des images, des liens, un autre tableau, etc.

 

C1_R1 C2_R1
C1_R2 C2_R2


Vous pouvez insrer ici du texte, des images, des liens, un autre tableau, etc.

 

Cellule1_Range1 Cellule2_Range1
Cellule1_Range2 Cellule2_Range2


 

Toujours le mme tableau, mais avec des images comme fonds de cellules. Dans ce cas, on attribue un paramtre "background" chaque cellule, comme ceci (code de la premire range du tableau ci-dessous :

 

<td width="100%" bgcolor="#7599C1" valign="top" colspan="2" background="diviser_fds1.jpg">

 

Cellule1_Range1

Cellule1_Range2

Cellule2_Range2

 

Et si tout ceci vous a sembl un peu trop compliqu ou que vous prfrez les solutions "cl en main", j'ai prpar pour vous quelques "modles", que vous pouvez sauvegarder sur votre disque dur et utiliser comme point de dpart d'une page divise selon ce mode :

 

mod_sec1.gif (355 octets) mod_sec2.gif (405 octets) mod_sec3.gif (289 octets) mod_sec4.gif (368 octets) mod_sec5.gif (412 octets)


En cliquant sur chaque modle, vous tomberez dans la page .html correspondante. Pour l'enregistrer sur votre disque dur, choisissez Fichier/Enregistrer sous... et slectionner le rpertoire de votre choix. Il suffira ensuite de modifier les lments textuels dj existants par votre propre contenu.

  
 

 

Accueil Images Boîte à outils Liens Contact

  Hit-Parade 

© Grenadine.net - 1998-2011