Les Gabarits/Layout de pages

  la structure LayoutGala générique pour les pages d’un site Web


Depuis le siècle dernier, l’ergonomie des sites Web respecte assez naturellement certains principes d’organisation.

Pour visualiser ceux-ci, une sytématisation est reconnue : celle des Layout Gala, visible sur cette page http://blog.html.it/layoutgala/.

Les squelettes de la dist reprennent cette organisation, avec une évolution marquée,encore plus systématique dans Zpip.


 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.

JPEG - 35.3 ko

Merci de nous signaler les coquilles ou erreurs qui figureraient dans cette page.


Liens visibles seulement pour les inscrits.

Article publié le 26 décembre 2012, et actualisé en mars 2013 .

Répondre à cet article