e-learning Dreamweaver Initiation

2.2 Mise en page à l'aide de tableaux

Onglet Mise en forme

5.1 Création de pages simples en tableaux

Insérer un Tableau
Cet outil vous permet d'insérer un tableau qui pourra être utile pour la mise en forme de votre site ou pour par exemple la mise en forme de données

Cliquez sur l'icône 9 sur l'Onglet Mise en forme dans la barre d'outil Insertion

Exemple

Colonne 1	Colonne 2

CODE HTML
<table width="95%" border="1" align="left" cellpadding="1" cellspacing="1">
<tr>
<td width="50%">Colonne 1</td>
<td width="50%">Colonne 2</td>
</tr>
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
</table>

Insérer une ligne au dessus

Cliquez sur l'icône10 sur l'Onglet Mise en forme dans la barre d'outil Insertion

Exemple


Colonne 1	Colonne 2

CODE HTML
<table width="95%" border="1" cellspacing="1" cellpadding="1">
<tr>
<td class="Fond_rouge"> </td>
<td class="Fond_rouge"> </td>
</tr>
<tr>
<td width="50%">Colonne 1</td>
<td width="50%">Colonne 2</td>
</tr>
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
</table>

Insérer une ligne en dessous

Cliquez sur l'icône11 sur l'Onglet Mise en forme dans la barre d'outil Insertion

Exemple

Colonne 1	Colonne 2

CODE HTML
<table width="95%" border="1" cellspacing="1" cellpadding="1">
<tr>
<td width="50%">Colonne 1</td>
<td width="50%">Colonne 2</td>
</tr>
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
<tr>
<td class="Fond_rouge"> </td>
<td class="Fond_rouge"> </td>
</tr>
</table>

Insérer une colonne à gauche

Cliquez sur l'icône12 sur l'Onglet Mise en forme dans la barre d'outil Insertion

Exemple

Nouvelle colonne	Colonne 1	Colonne 2

CODE HTML
<table width="95%" border="1" cellspacing="1" cellpadding="1">
<tr>
<td width="33%" class="Fond_rouge">Nouvelle
colonne</td>
<td width="33%">Colonne 1</td>
<td width="33%">Colonne 2</td>
</tr>
<tr>
<td width="33%" class="Fond_rouge"> </td>
<td width="33%"> </td>
<td width="33%"> </td>
</tr>
<tr>
<td width="33%" class="Fond_rouge"> </td>
<td width="33%"> </td>
<td width="33%"> </td>
</tr>
</table>

Insérer une colonne à droite
Cliquez sur l'icône13 sur l'Onglet Mise en forme

Exemple

Colonne 1	Colonne 2	Nouvelle colonne

CODE HTML
<table width="95%" border="1" cellspacing="1" cellpadding="1">
<tr>
<td width="33%">Colonne 1</td>
<td width="33%">Colonne 2</td>
<td width="33%" class="Fond_rouge">Nouvelle colonne</td>
</tr>
<tr>
<td width="33%"> </td>
<td width="33%"> </td>
<td width="33%" class="Fond_rouge"> </td>
</tr>
<tr>
<td width="33%"> </td>
<td width="33%"> </td>
<td width="33%" class="Fond_rouge"> </td>
</tr>
</table>

5.2 Gestion de page web avec des tableaux

Dans l'exemple ci dessous, j'ai volontairement mis des bordures avec la valeur 2 pour que vous puissiez vous repérer
Dans le cas où vous reprenez le même exemple, mettez biensûr la taille des bordures à 0

HEADER DU SITE

Menu 1 | Menu 2 | Menu 3 | Menu 4 | Menu 5

Contenu de mon site : Partie 1

blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla,blabla, blabla, blabla, blabla, blabla

Contenu de mon site : Partie 1

blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla

Footer du site

Ce tableau est à insérer dans la balise body

CODE HTML
<table width="100%" border="2" cellspacing="0" cellpadding="0">
<tr>
<td height="120" bgcolor="#99CC00"><img src="../../../images/lc-formateur.png" alt="LC Formateur" width="122" height="74" align="absmiddle" /> HEADER DU SITE</td>
</tr>
<tr>
<td><table width="100%" border="2" cellspacing="10" cellpadding="0">
<tr>
<td colspan="2" align="left" valign="top"><a href="#">Menu 1</a> | <a href="#">Menu 2</a> | <a href="#">Menu 3</a> | <a href="#">Menu 4</a> | <a href="#">Menu 5</a></td>
</tr>
<tr>
<td width="50%" align="left" valign="top"><h3>Contenu de mon site : Partie 1</h3>
blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla,blabla, blabla, blabla, blabla, blabla<br /> </td>
<td width="50%" align="left" valign="top"><h3>Contenu de mon site : Partie 1</h3>
<table width="100%" border="2" cellspacing="10" cellpadding="0">
<tr>
<td width="25%" align="center" valign="middle"><img src="../../../images/ajouter_favoris.jpg" alt="Image Favoris" width="56" height="53" /></td>
<td width="75%">blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla, blabla</td>
</tr>
</table> </td>
</tr>
</table></td>
</tr>
<tr>
<td align="right" bgcolor="#000000" class="Texte_blanc">Footer du site</td>
</tr>
</table>

1-Se familiariser avec l'interface

1.1 Organisation de l'espace de travail
1.2 La barre d'outils Insertion
1.3 La gestion de sites avec Dreamweaver

2- Création de contenu texte

2.11 Le texte, les polices, le formatage
2.12 Les paragraphes
2.13 Les entêtes
2.14 Les puces, les listes numérotées
2.15 Les sauts de ligne, les espaces insécables, les caractères spéciaux

3- Insertion d’images

3.1 Généralités et utilisation
3.2 Insérer une image
3.3 Les images de fond
3.4 Les images survolées

4- Les hyperliens

4.1 Lien sur du texte
4.2 Lien sur une image
4.3 Lien de messagerie
4.4 Les ancres nommées
4.5 Les attributs

5- Mise en page à l’aide des tableaux

5.1 Création de pages simples en tableaux
5.2 Gestion de page web avec des tableaux

6- Mise en page à l'aide de calques

6.1 La balise DIV
6.2 Tracer la balise DIV