Les frames :
Même si les frames peuvent être pratiques dans certains cas, elles sont à déconseiller pour plusieures raisons:
- Tout d'abord pour les petits écrans, la navigation est découragente à causes de multiples ascenseurs.
- Les moteurs de recherchent référencent difficilement un site composé de frames.
- etc...
Nous allons donc voir dans ce document l'utilisation des tables.

Disposition à l'aide de tables :
Il est possible de créer une page html qui occupera 100% de la largeur d'un écran quelque soit ses dimensions, la hauteur de la page variera alors inversement à la largeur de l'écran. Si cette méthode est pratique pour un document fait exclusivement du texte, ce n'est pas le cas pour la plupart des pages web qui sont composées d'autres éléments comme les images et doivent par conséquent garder la même apparence quelque soit le matériel dont dispose le visiteur du site. Pour celà nous allons utiliser des tables ayant une largeur fixe.

Comme la résolution graphique la plus répondue est 800x600 pixels, nous utiliserons des tables d'une largeur de 780 pixels. 20 pixels étant occupés par la barre de défilement verticale de l'écran ( ascenseur droit ).
Par ailleurs, comme bon nombre d'internautes utilisent encore de plus petits écrans de 14 ou 15 pouces et d'une résolution graphique de 640x400 pixels, nous allons diviser nos tables en 2 colonnes :
- Une colonne principale de 620 ou 640 pixels de largeur pour le contenu et
- Une colonne de 160 ou 140 pixels de largeur pour le menu de navigation, liens et/ou boutons publicitaires.
On obtient ainsi une page type comme on en trouve dans la plupart des sites internet, et qui est aussi le modèle le plus pratique et aisément consultable avec la plupart des configurations utilisées par les visiteurs.

Exemple :

Ici les bordures des tables sont dessinées à l'aide de l'attribut (border="1") pour mieux voir comment les tables, les cellules et leures attributs permettent le positionnement des éléments et les couleurs de fond...

Ci-dessous la même présentation sans les bordures des tables : (border="0")

Ici les bordures des tables sont supprimées et la deuxième ligne de la première table, du haut, est composée d'une seule cellule étendue sur les deux colonnes, à l'aide de l'attribut (colspan="2"). Le texte est centré au milieu.

Pour voir le listing du code html complet de cet exemple : cliquez-ici

Pour voir l'affichage grandeur nature sur votre écran : cliquez-ici