Dimensionnement et positionnement des cadres

le positionnement des informations du site se fera dans des cadres ou boîtes.

Vis à vis du langage HTML, ce sont des blocs de type "header", "nav", "article", "aside", "footer", ou plus généralement "section" ou "div".

Un exemple de ces cadres/blocs est donné ici ou bien sur la figure ci-dessous. Survoler la pour l'agrandir.

Le dimensionnement des cadres

Le dimensionnement de ces cadres est défini par 4 propriétés, conformément à la figure ci-contre (survoler la pour voir les dimensions) :

la hauteur : height
la largeur : width
la marge intérieure : padding
la marge extérieure : margin

Attention, les dimensions de la propriété "border" se rajoute à la dimension du cadre.

Le positionnement des cadres

Le positionnement peut se faire de plusieurs manières.

La plus simple consiste à définir pour chaque bloc la propriété CSS : "display: inline-block;".

Dans ce cas, les "boites" se placent les unes à cotés des autres, tant qu'elles ont la place en largeur. S'il n'y a pas la place, elles se positionnent à la ligne.

En dimensionnant correctement les "boites", on organise aisement sa page Web.

Dans la plus part des navigateurs récents, vous pouvez accéder aux fonctions "outils de developpement" avec la touche F12. Ils permettent entre autres :

de voir la structure du site (oragnisation des balises HTML),
de voir les propriétés de style,
de connaitre les balises HTML et les propriétés CSS d'une partie, simplement en survolant cette partie,
de modifier/supprimer/ajouter des propriétés CSS. Le résultat est visible immédiatement.

Les changements ne sont pas enregistrer dans le fichier source, ce qui permet de faire des essais sans perdre le fichier original.

Durant le reste de la séance...

Lire le TP du site openclassrooms Mise en page du site, Structurer sa page..

Vous avez enfin tous les éléments pour finaliser votre page web.