Structure d’une page web

Cours du mardi 14 janvier 2014

Les bases de la construction d’une page Web

Il existe évidemment des tas de façons de construire une page web, mais on peut distinguer souvent une même structure générale en 3 parties.


Nous les commenterons dans le sens de la lecture (de haut en bas et de gauche à droite).

structure page web

structure page web LE HEADER : L’ENTETE

l’élément d’en-tête de la page, dissocié du corps du texte.
Le header, contrairement au corps de page qui change d’une page à l’autre, est un élément fixe qui reste le même quelque soit la page où l’on se trouve.

D’ailleurs lorsqu’on développe un site web, le header sera créé sur un fichier distinct ( header.php )
Le header se compose (le plus souvent) :

> du logo et de sa baseline ( repère identitaire de la marque )

la baseline étant le slogan ou la phrase qui anime la marque

, exemple pour Nike Just do it et pour SNCF : A nous de vous faire préférer le train

> d’une navigation web qui permet de se repérer et d’accéder aux différentes pages du site.

Elle est en général placée dans le header en haut de page ou à gauche du site afin que le visiteur puisque y avoir accès très facilement.

Le header est donc l’élément visuel le plus important de la structure d’une page web grâce à son positionnement dans la page (tout en haut) et par ce qui le constitue (le logo et la baseline : identité visuelle et textuelle de la marque ainsi que la navigation principale.)

structure page webLE CONTENT / CORPS DE PAGE :

C’est la partie où l’on intégrera tout le contenu, il sera constitué du titre, sous-titre (si nécessaire) et des paragraphes, images qui constituent la page sur laquelle on est.

A la différence du header, celui-ci varie d’une page à l’autre.

On veillera tout de même à préserver un style et une structure de contenu, homogène sur toutes les pages.

structure page webLE FOOTER :

Le pied de page qui se trouve en bas du site. Comme le header, il restera le même quelque soit la page du site que l’on visite.

Il sera constitué généralement de la signature du site web et aussi d’une navigation, beaucoup moins essentielle que celle du header mais qui présente l’avantage d’être présente sur toutes les pages (on y trouve principalement les mentions légales, les conditions générales de vente et le plan du site. )


arborescence internet

Cet article vous a plu ?

N’hésitez pas à partager notre page facebook pour suivre nos nouveaux posts et astuces…

[button url= »http://www.lecil.fr/fr/category/webdesign » size= »medium » arrow= »left »]retour aux articles web design[/button] [button url= »http://www.lecil.fr/fr/webdesign/page-d-accueil-site-internet » size= »medium » arrow= »right »]page d’accueil site internet[/button]