Economie
Au terme de ce travail, l’étudiant sera capable :
- d’utiliser les balises XHTML usuelles afin de constituer un mini site Web statique
- de réaliser une mise en page simple via un fichier CSS
- d’améliorer la convivialité de son site par du javascript de base
Etapes
Etape 1 : Etablir le plan de base
Avant de commencer à développer la première page d’un site web, il faut faire l’inventaire des informations et des fonctionnalités que l’on veut y mettre. A partir de cette liste, on peut opérer des groupements logiques et organiser le site.
Le plan du site peut être présenté sous la forme d’une arborescence ou d’une liste.
[pic]
EXEMPLE DE PLAN DE SITE (Organigramme)
Ressources o http://ergonomie-web.studiovitamine.com/arborescence-site-web-structure-de-l-info,350,fr.html o Exemple : http://www.freqelec.com/sitemap.html
Travail
Chaque groupe d’étudiants a le choix du thème qu’il présentera dans son site. Il en fixera le contenu et l’arborescence sur feuille de papier ou via un éditeur quelconque. Etant donné le temps octroyé pour ce travail, le site pourra être constitué de 3 pages seulement (page d’accueil = index.html + 2 autres pages)
Etape 2 : Organisation de la page
L’organisation d’une page web détermine le positionnement des différentes sous - sections de la page : bannière, menu(s), pied-de-page (footer), corps, etc… Les pages d’un même site web ont généralement une organisation visuelle similaire afin que le visiteur soit rapidement familiarisé avec le site. Il est toutefois fréquent que certaines pages (ex. : la page d’accueil) soient organisées de manière légèrement différente.
[pic]
Exemple d'organisation visuelle (source : http://ergonomie-web.studiovitamine.com)
Travail
L’organisation visuelle des pages est à réaliser sur feuille de papier ou via un éditeur quelconque.
Etape 3 : Première maquette
Maintenant que les idées se mettent en place quant à la structure du travail, il est