2de SNT / Projet - Site Web

1. Projet d'entraînement : Site web Batman

Récupération des fichiers

Récupérer l'archive Projet-Batman-Initial.7z contenant les fichiers du mini-site web.
Déplacer le fichier .7z dans votre espace de travail et décompresser-le.
Renommer le dossier obtenu Projet-Batman-VOTRENOM-Version1 en remplaçant la partie VOTRENOM par votre nom de famille.

L'objectif du projet d'entrainement est de compléter un mini-site web sur Batman.

Pour cela, il faut modifier ses deux fichiers .html à l'aide d'un éditeur de texte proposant la coloration syntaxique pour plus de lisibilité, par exemple : Notepad++ ou Geany (ils sont probablement déjà installés sur votre ordinateur dans MCNL.

Remarques importantes :

Pour faciliter votre travail, partager votre écran en deux :
- Pour visualiser vos pages HTML dans un navigateur (double-clic sur le fichier).
- Pour modifier vos fichiers, avec un éditeur texte (clic-droit et ouvrir avec ou par glisser-déposer).
Pour visualiser le résultat de vos modifications, pensez à :
- sauvegarder votre fichier dans l'éditeur de texte,
- rafraîchir la page dans le navigateur.
Pour les chemins vers les fichiers images, utiliser un adressage relatif et pas absolu.
Exemple : <img src="images/nuit.jpg"/> si votre images est dans le dossier images situé dans le même dossier que vos fichiers HTML.
Ne recopiez pas le chemin d'accès complet (aussi appelé adresse absolue). En effet, si on change le mini-site de place dans l'ordinateur, les adresses absolues ne fonctionneront plus, contrairement aux adresses relatives !

Complétion du site

Modifier la page interieur.html pour qu'elle contienne au moins une image et du texte. VOus pouvez vous servir de la première page garage.html comme exemple. Servez-vous des images déjà présentes dans le dossier images du mini-site.
Ajouter un hyperlien sur chacune des deux pages afin de pouvoir passer de l'une à l'autre en un clic.
Vérifiez que votre code HTML ne comporte pas d'erreurs en le copiant-collant sur le validateur HTML que propose la W3C.
Ajouter la balise <link> sur les deux pages HTML pour les lier au fichier style.css déjà existant.
Observer les modifications de style sur vos deux pages HTML d'après le contenu de la feuille de style style.css.
Faire valider par le professeur.

3. Projet : Votre propre site web

Individuellement, vous devez réaliser votre propre site web pour illustrer une des citations de la page d'accueil de Chocolatine.
Vous pouvez télécharger l'archive du site web Batman pour reprendre son architecture de base (pages .html, feuille de style css et dossier images).

Avant de commencer la conception numérique, vous devrez proposer en classe une version papier de votre site web sur une feuille. Cette version papier devra comporter une ébauche (dessin à la main) des principales pages et de leur disposition, en indiquant les éléments de navigation (liens entre les pages), les zones de texte, les images et/ou vidéos prévus.

Cahier des charges :

4 pages web comportant chacune au moins une image et du texte,
des hyperliens pour passer de l'une à l'autre des pages sans jamais être bloqué sur l'une d'elle,
les images devront toutes être rangés dans un dossier images,
les 4 pages web devront être liées à une seule feuille de style comportant au moins deux styles (sélecteurs + propriétés),
l'esthétique du site comptera,
intégrer un élément d'un autre site web via une balise iframe (carte Google Map, Vidéo Youtube ...),
le dossier de votre site (avec les quatre fichiers HTML, la feuille de style CSS et le dossier images) devra être compressé et rendu au professeur,
ce dossier ne devra pas être trop lourd (max 10 Mo),
nommer le dossier rendu avec votre prénom et nom.