Accueil > Développement web > La structure d’une page web
419 visites

La structure d’une page web

dimanche 15 avril 2012

Version imprimable de cet article Version imprimable

Il s’agit bien ici de la structure d’une page web, et non d’un fichier html (fût il généré par du php ou autre langage).
Il sera donc question de design et d’ergonomie, et non de codage et de technique, qui sont l’objet d’autres articles et rubriques.

Les éléments d’une page web

Sur une page web, et par extension sur un site web, plusieurs éléments sont susceptibles d’apparaître :

  • entête
    • comme son nom l’indique, cet élément sera situé en haut.
    • aligné à gauche, centré, aligné à droite...avec ou sans logo
    • utile pour savoir sur quel site on est, quelle que soit la page.
    • Peu courant sur les sites flash, car on y arrive toujours par le sommaire, on sait donc forcément sur quel site on se trouve..
    • Or, sur un site "normal" on peut accéder à n’importe quelle page directement.
    • Ce qui, par ailleurs, permet d’avoir plus facilement des visites via moteurs de recherche (Google ou autre).
  • menu de navigation par rubriques principales
    • sous forme de liste sur un côté de la page (gauche ou droite), aligné en haut, en bas ou à mi hauteur de la page
    • ou sous forme de menus, parfois déroulants, en dessous ou à la place de l’entête
    • permet un accès rapide aux différentes rubriques. Certains sites ne proposent qu’un retour à la page de garde, à partir de laquelle on peut aller dans une autre rubrique.
  • champ de recherche
    • permet de rechercher un contenu dans le site, pratique pour aller directement à la page voulue
    • peut être placé avec la liste des rubriques principales si celle-ci est sur un côté de page
    • peut être placé dans l’entête, si l’entête est aligné à droite, le champ recherche sera à gauche, et vice-versa.
  • contenu
    • le contenu de la page, c’est à dire le texte, les images...qui ne sont pas communs à toutes les pages
    • généralement sur la droite
    • pour que les autres blocs restent visibles en permanence, on fixera la position de chaque bloc et on n’aura donc plus un "ascenseur" sur toute la page mais seulement sur le bloc du contenu (voir ici).
    • cette technique n’est pas obligatoire, mais au final la page est plus ergonomique
  • données supplémentaires (mots clés, "nuage de tags"...)
    • sous la liste des rubriques principales, ou sur le bord droite de la page si la liste est à gauche
    • éventuellement dans un bloc dépliant, pour gagner de la place pour le contenu
  • pied de page
    • peut contenir les liens de contact direct (webmaster ou autres), un lien vers le plan du site, un lien vers le flux rss, le logo du développeur....
    • le lien contact du pied de page ouvrira directement un mail.
    • plus facile que s’il fallait revenir à la page de garde, aller dans la rubrique contenant l’article "contact" pour lancer le lien mail qu’il contiendrait.

La disposition des éléments

  • Disposition classique "carrée" : liste des rubriques sue le côté gauche (ou droite), entête, pied de page et données supplémentaires

variante : bloc dépliant sur le bord droite affiche les infos supplémentaires

Exemple concret :

  • Disposition "large" : entête, menu des rubriques, pied de page

Ne pas oublier que les écrans modernes sont beaucoup plus larges que haut...

exemple concret :

  • Disposition en "C" : entête avec champ recherche, pied de page et liste des rubriques + extra sur un côté.

Exemple concret :

La taille de la page est d’origine.
Un bloc a simplement été édité pour enlever des lignes vides, afin de rendre le pied de page visible.

autre exemple, en mettant les rubriques à droite :

même remarque pour la taille du site.

  • Disposition en "P" : idem que "C" mais sans pied de page.

variante avec champ de recherche dans le bloc gauche

exemple "concret" :

C’est le même exemple que pour la disposition en "C", sauf que le pied de page n’est pas visible.

  • Disposition en "L" : menu de navigation et pied de page. Pas d’entête.

exemple :

Il existe des tas de variantes, mais globalement basées sur ces structures.

La disposition du contenu

la liste des sous-rubriques ou des articles peut prendre différentes formes :

  • une liste classique

  • des vignettes

Répondre à cet article

Total 118936 visites depuis 2107 jours | Site réalisé par Vader[FR] | SPIP | | Plan du site | Suivre la vie du site RSS 2.0 | contact mail