Utilisation des tableaux pour votre mise en page

Si vous connaissez le HTML, vous savez déjà que le texte ou tout autre contenu que vous ajoutez dans des pages Web sont insérés dans un "récipient », comme un calque (layer) ou un tableau (table).

Les tableaux HTML représente un excellent compromis pour créer des mises en page, parce qu’il est facile de les modifier et compatible avec la plupart des navigateurs. Vous pouvez utiliser des tableaux pour structurer la disposition des données tabulaires ou pour placer des éléments visuels (tels que des images, des animations ou du texte).

Dreamweaver MX 2004 possède plusieurs plans de travail dans lesquels vous pouvez concevoir vos pages Web :
- mode standard
- Mise en forme

 mode développé

Dans ce tutorial, vous apprendrez à travailler avec le mode standard. A vous de choisir selon vos besoins le mode qui vous convient. Vous apprendrez ici à utiliser les tableaux comme élément de mise en page.

Avant de commencer, vous devez entamer la procédure de création et de gestion d’un nouveau site dans Dreamweaver.

 

Créer et modifier un tableau en mode standard

Le mode standard est définit par défaut comme espace de travail de Dreamweaver. Pour créer un tableau, vous devez utiliser la commande insertion de tableaux. Dreamweaver crée un tableau basé sur des options que vous paramétrez dans une boîte de dialogue. Vous pouvez facilement modifier la structure initiale du tableau pour créer une conception plus complexe en fusionnant et en dédoublant des cellules, et en insérant des rangées et/ou des colonnes. Vous pouvez rendre les bordures des tableaux invisibles, ainsi les Internautes ne verront pas la structure de votre conception quand ils regardent la page dans un navigateur.

1 Dans Dreamweaver, choisissez Fichier > nouveau (ou tapez directement Ctrl N pour PC et Commande N pour Mac). Une nouvelle boîte de dialogue apparaît.
2 Dans l’onglet « Général », choisissez HTML dans le cadre de droite intitulé « Page de base ». Cliquez sur le bouton « Créer ».
3 Dans la barre de propriété du document, donnez un titre à votre nouveau fichier.
4 choisissez Fichier > Enregistrer, pour enregistrer le document dans votre dossier local. Nommez-le tableau1.html

 

Insérer un tableau

Maintenant vous êtes prêt à insérer un tableau dans votre document.
1 Dans la fenêtre de document, cliquez avec votre souris à l’endroit où vous souhaitez insérer le tableau, puis Choisissez Insertion > Tableau.
Vous pouvez aussi cliquez sur l’icône « Tableau » situé dans l’onglet « Commun » de la barre d’insertion. La boîte de dialogue apparaît.

 

 

2 Dans la boîte de dialogue, indiquez les options suivantes :
- Lignes : 2
- Colonnes : 2
- Largeur : 600 pixels
- Largeur de la bordure : 1
- Marge intérieure des cellules : 0

 Espacement entre les cellules : 0

 

 

3 Cliquez sur OK. Dreamweaver ferme la boîte de dialogue et revient sur le plan de travail. Un tableau de 2 lignes et 2 colonnes apparaît.

 

 

4 Enregistrez votre document (Ctrl + S pour PC et Command + S pour Mac) ou Fichier > Enregistrer.

 

Modifier le tableau

Pour modifier ce tableau, Vous pouvez ajouter des rangées et des colonnes ou fusionner et dédoubler des cellules pour créer la disposition de page désirée.

1 Cliquez dans la cellule en haut à gauche et sans relâcher le bouton de la souris, glissez votre curseur dans la cellule en dessous.

2 Choisissez Modifier > Tableau > Insérer une colonne. Le tableau contient maintenant trois colonnes.

3 Cliquez dans la cellule inférieure gauche et choisissez modifier > Tableau > Inserer des lignes ou des colonnes. Une boîte de dialogue apparaît.

 

 

4 Dans la boîte de dialogue, entrez les options suivantes :

- inserer : choisissez les lignes.
- Nombres de lignes : 2

 Où : choisissez au-dessous de la sélection.

5 Cliquez sur OK. Les modifications apportées au tableau sont prises en compte. Vous avez maintenant un tableau de 4 lignes et 3 colonnes.

6 Enregistrer vos changements (dossier > Enregistrer).

 

Fusion et cellules

En fusionnant et en dédoublant des cellules, vous pouvez adapter la conception de vos pages selon vos besoins.

 

 

1 Dans le document, choisissez les deux premières cellules dans la colonne gauche du tableau

2 Choisissez modifier > Tableau > Fusionner les cellules. Les deux cellules sont fusionnées en seule.

3 Cliquez dans la troisième rangée de la deuxième colonne et sélectionnez la cellule du dessous ainsi que les deux cellules à droite.

Dans l’inspecteur de propriété, cliquez sur le bouton de fusion pour combiner les cellules. Les cellules choisies fusionnent en une seule cellule.

4 Dédoubler une cellule ou une colonne.

5 Cliquez dans la cellule gauche supérieure.

6 Dans l’inspecteur de propriété, cliquez sur le bouton « Diviser la cellule en lignes ou en colonnes ». Une boîte de dialogue apparaît.

 

 

7 Dans la boîte de dialogue, entrez les options suivantes :
- Fractionner la cellule en : colonnes

 Nombre de colonnes : 2

8 Cliquez sur OK. Le tableau est modifié.

 

Modifier la hauteur des lignes et la largeur des colonnes

1 Placez votre curseur sur une bordure du tableau jusqu’à ce qu’il change d’aspect. Cliquez et glissez votre souris vers le bas.

Utilisez cette méthode pour modifier la hauteur et la largeur des cellules.

2 Lorsque vous avez obtenu le résultat souhaité, enregistrez votre document.

 

Ajoutez de la couleur à un tableau

Vous pouvez ajouter une couleur à n’importe quelle partie d’un tableau. Nous commencerons par ajouter une couleur de fond au tableau, puis appliquer une couleur différente de fond aux cellules dans le tableau. Nous finirons en changeant la couleur de la bordure.

1 Dans votre document, cliquez sur n’importe quelle bordure du tableau afin qu’il soit en surbrillance.

2 Ouvrez l’inspecteur de propriétés (fenêtre > propriétés), s’il n’est pas déjà ouvert. Les propriétés du tableau sélectionné apparaissent dans l’inspecteur de propriétés.

 

 

3 Dans l’inspecteur de propriétés, précisez une couleur dans la partie « couleur d’ar. Pl. » soit en :
- Cliquant dans le petit carré, puis choisissez une couleur via la palette proposée.
- Entrant directement une couleur en utilisant une valeur hexadécimale, par exemple #99CC00.

 Entrez un nom de couleur, tel que « black, white… ».

Une couleur de fond s’applique au tableau.

 

 

4 De la même manière, vous pouvez appliquer une couleur de fond aux cellules du tableau. Cliquez dans la cellule gauche supérieure, puis dans l’inspecteur de propriété, choisissez une couleur différente dans la partie « ar-pl ».

5 Mettez de la couleur aux autres cellules si vous le désirez.

 

Ajoutez une couleur de bordure

Maintenant, nous allons donner une couleur à la bordure du tableau. La couleur de bordure s’applique aux bordures extérieures et intérieures d’un tableau.

1 Dans la fenêtre de document, sélectionnez le tableau.

2 Dans l’inspecteur de propriété, insérez une couleur dans la partie « Couleur contour ».

3 Enregistrez votre document.

4 Appuyez sur F12 (Windows seulement) ou Fichier > Aperçu dans le navigateur et choisissez un navigateur (Internet Explorer, Firefox, Netscape, Opera…).
Grâce à cette commande, vous aurez un rendu de votre document.

 

Donnez une valeur relative à un tableau

Si vous voulez créer des pages Web qui s’adaptent automatiquement à la taille de la fenêtre du navigateur, il faut utiliser les valeurs en pourcentage.

1 Dans Dreamweaver, choisissez Fichier > nouveau (ou tapez directement Ctrl N pour PC et Pomme N pour Mac). Une nouvelle boîte de dialogue apparaît.

2 Dans l’onglet « Général », choisissez HTML dans le cadre de droite intitulé « Page de base ». Cliquez sur le bouton « Créer ».

3 Dans la barre de propriété du document, donnez un titre à votre nouveau fichier.

4 choisissez Fichier > Enregistrer, pour enregistrer le document dans votre dossier local. Nommez-le tableau2.html.

5 Cliquez sur le bouton « Tableau »

6 dans la boîte de dialogue qui apparaît, entrez les options suivantes :
- Lignes : 2
- Colonnes : 3
- Largeur : 90 et choisissez « Poucent »

 Bordure : 1.

7 Cliquez sur OK. Le tableau apparaît dans le document.

8 Sélectionnez la colonne centrale en cliquant sur la bordure au dessus.

9 Dans l’inspecteur de propriété, donnez une couleur de fond à la colonne.

 

Donnez une valeur fixe à un tableau

Nous allons créer un nouveau tableau. Ce tableau aura une largeur de Pixel précise et une largeur spécifique qui ne s’ajuste pas selon la taille de fenêtre du navigateur.

1 Insérez un saut de ligne (touche entrée) après le tableau que vous avez créé précédemment.

2 Cliquez sur le bouton « Tableau »

3 dans la boîte de dialogue qui apparaît, entrez les options suivantes :
- Lignes : 2
- Colonnes : 3
- Largeur : 600 pixels

 Bordure : 1.

4 Cliquez sur OK. Le tableau apparaît dans le document.

5 Sélectionnez la colonne centrale en cliquant sur la bordure au dessus.

6 Dans l’inspecteur de propriété, donnez une couleur de fond à la colonne.

 

 

7 Appuyez sur F12 (Windows seulement) ou Fichier > Aperçu dans le navigateur et choisissez un navigateur (Internet Explorer, Firefox, Netscape, Opera...).
Grâce à cette commande, vous aurez un rendu de votre document et vous verrez la différence entre un tableau fixe et un tableau variable.

8 Lorsque vous changez la taille de la fenêtre du navigateur, le tableau fixe ne bouge pas alors que le tableau variable s’adapte à 90% (comme nous l’avons indiqué) de la taille de la fenêtre du navigateur.

9 Enregistrez votre document.