Les Gabarits/Layout de pages

 La présentation générale des pages d’un site

Pour permettre une lecture agréable des pages d’un site Web, les concepteurs et ergonomes des sites Web ont généralement compris l’intérêt d’avoir une présentation assez homogène sur un site Internet, pour permettre au visiteur de s’intéresser au contenu de chaque page, en gardant une homogénéité entre pages successives, et en offrant un accès facile aux choix de navigation.

Le schéma général des pages d’un site reprend une architectures en blocs fonctionnels, que l’on pourrait comparer à l’organisation des pages d’un livre :
 toutes les pages comportent une pagination(numérotation), le plus souvent en bas : pied de page.
 souvent le titre du livre, ou du chapitre est répété en haut : entete de page.
 au sein de l’espace marqué par ces deux blocs permanents,
le contenu de la page dépend de la position, et donc de l’usage dans le livre, avec par exemple :

• les débuts de chapitre,
• les pages bien remplies,
• la dernière page de chaque chapitre
• et des pages spécialisées : la couverture,
  les pages de table des matière, les index, et bibliographie...

Cette modélisation est reprise dans la plupart des sites, avec une particularité propre au Web, la présence sur toutes les pages, d’un menu de navigation dans un bloc fixé ; cette présentation en blocs positionnés n’interdit pas d’appliquer à ces blocs telle localisation et dimentiosn dans la page, que voudra le designer, et le site ZenGarden est bien connu pour sa mise en évidence de multiples habillages d’apparence sur un meme contenu, par un simple changement de CSS !

 Une dénomination en blocs

La structuration avec les identifieurs de blocs
<div> permettra de définir les tailles, et surtout les positionnements relatifs de ces blocs, nommés conventionnellement en français selon le schéma ci-contre.

Vous retrouverez ces identificateurs dans les squelettes Zpip et la feuille de style habillage.css.

Les modifications de l’habillage graphique seront pilotées, d’une part par l’ajout de thèmes respectant cette normalisation, et prioritairement par les fichiers squelettes personnels, que vous pourrez enregistrer dans Le dossier ./squelettes, éventuellement avec le Skeleditor.

Quelques exemples de variations de LayoutGala.