Projet

Il s'agit de réaliser un petit site Web en respectant un certain nombre de directives énoncées ci-après. Il se décompose en deux parties :

• une partie libre dans laquelle vous écrirez quelques pages Web sur un sujet de votre choix ;
• une partie imposée dans laquelle il vous est demandé de respecter un cahier des charges précis.

Cette page est susceptible d'évoluer pendant le déroulement du projet. Nous vous conseillons de la consulter fréquemment.

Modalités

Le projet fera l'objet d'une évaluation lors de votre dernière séance de TP avant les vacances de Noël. Certaines séances de TP seront consacrées à l'avancement du projet, mais un temps considérable devra y être consacré en dehors de ces créneaux. Vous travaillerez seul ou en binômes dont la constitution sera figée pour la durée du projet.

Directives générales

1. Le site doit contenir au moins quatre pages. La page d'accueil et deux autres pages au moins sur un sujet libre, plus la page imposée.
2. Vous devez prévoir une feuille de style unique pour la page d'accueil et les pages libres.
3. Vos pages doivent comporter des images et notamment des images de fond (document, cellules de tableau, éléments de texte, liens...).
4. Une attention particulière sera portée à l'ergonomie et à l'esthétisme du site.

Votre feuille de style devra obligatoirement utiliser plusieurs éléments de styles portant sur différentes propriétés (par exemple : couleur, positionnement, couleurs et images d'arrière plan, formatage d'écriture, formatage de listes, etc...).

Directives d'organisation du site

L'arborescence du site doit être organisée de la façon suivante :

• Une page d'accueil située dans le répertoire racine, qui permettra l'accès à toutes les pages du site.
• Un sous-répertoire Partie_libre qui contient toutes les autres pages et les sous-répertoires :
  • Images : contient toutes les images,
  • Styles : contient la feuille de styles,
• L'arborescence de la page imposée se trouvera dans le sous-répertoire Partie_imposee.

Partie libre

Il vous est demandé dans cette partie de créer au moins 3 pages web (dont la page d'accueil du site) sur un sujet qui est laissé à votre libre choix.

Vous êtes toutefois soumis au respect de quelques contraintes décrites ci-dessous.

Structuration des pages

Pour structurer vos pages, vous utiliserez les balises <header>, <nav>, <article>, <section>, <aside>, <footer> et <div>. L'image ci-dessous montre comment ces différents blocs peuvent ensuite être positionnés dans la page à l'aide d'une feuille de style. Bien sûr, vous êtes libre de placer ces blocs aux endroits qui vont plairont.

Navigation entre les pages

Pour se déplacer dans votre site, vous devrez mettre en place plusieurs moyens de navigation qui permettront :

1. un accès aux pages :
   • relativement à la page affichée : "page suivante" / "page précédente" et contenu dans des balises <nav></nav>,
   • absolu à partir d'un menu (et sous-menus) accessible sur chaque page et contenu dans des balises <aside></aside>.
2. un accès à chaque partie des pages : chaque page doit avoir au moins 2 sections identifiées qui pourront être accédées séparément. (créer un lien vers une balise dont l'attribut id a été renseigné - voir explications dans la section "The id Attribute"). Ces liens seront aussi contenus dans des balises <aside></aside>.

Pour construire le système de navigation, inspirez-vous des tutoriaux suivants permettant de faire des menus :

• Menus horizontaux
• Menus verticaux
• Menus et sous-menus
• Menus + légende
• Menus et sous-menus déroulants (explications)

L'idéal serait d'intégrer un menu déroulant et sous-menu avec légendes (résumé de quelques mots sur le contenu) pour permettre d'accéder aux pages et à leurs sections.

Feuille de style

Le placement des différents blocs dans la page se fera à l'aide de la feuille de style.

En plus des propriétés qui vous seront nécessaires à la présentation de vos pages, il vous est demandé de trouver un moyen d'utiliser les propriétés suivantes à l'intérieur de votre feuille de style (sur les éléments de votre choix) :

• caption-side 
• counter-increment  
• resize 
• transform
• border-radius 

Partie imposée

Cette partie est en fait le contenu du "TP6 - Feuilles de styles" auquel vous aurez répondu à toutes les questions en faisant les 3 feuilles de style demandées.

Toute l'arborescence propre au TP sera recopiée dans le sous-répertoire Partie_imposee.