Projet - Site Web

Projet d'entraînement : Site web Batman

Récupération des fichiers
1 - Dans votre espace de travail, aller dans votre dossier 2de-SNT/01-Web.
2 - Récupérer l'archive Projet-Batman-original.zip. Il s'agit des fichiers d'un mini-site web.
3 - Déplacer le fichier .zip dans votre dossier 2de-SNT/01-Web et décompresser-le.
4 - Renommer le dossier Projet-Batman-VOTRENOM-Version1 en remplaçant la partie VOTRENOM par votre nom de famille. Plus tard, il sera possible de dupliquer le dossier en changeant le numéro de version, au fur et à mesure du développement de votre site.

L'objectif du projet d'entrainement est de compléter le Site web Batman.
Pour cela, il faut éditer ses deux fichiers .html (ne pas toucher au fichier style.css pour l'instant), à l'aide d'un éditeur de texte proposant la coloration syntaxique pour plus de lisibilité, par exemple : Notepad++ ou Geany (ils sont probablemnt d'éjà installé sur votre ordinateur dans MCNL.
Attention : Selon l'éditeur de texte choisi, il faudra sélectionner, éventuellement, dans le menu, utf-8 comme encodage des caractères (la balise charset déjà présente ne suffit pas toujours).

Complétion du site
1 - Modifier chaque page pour qu'elles contiennent au moins une image et du texte. La première page garage.html doit être complétée et la seconde interieur.html est à construire intégralement en vous servant des fichiers images (au format .jpg) déjà présents dans le répertoire images.
2 - Il faut pouvoir passer d'une page à l'autre grâce à un hyperlien.
3 - Lorsque tout fonctionne parfaitement, vérifiez que votre code HTML ne comporte pas d'erreurs en le copiant-collant sur le validateur HTML que propose la W3C.
4 - Faire valider par le professeur et/ou déposer votre dossier Projet-Batman-VOTRENOM-VersionX sous la forme d'une archive (zip ou 7z).

Remarques importantes :

• Il va falloir travailler avec deux applications ouvertes :
  • Pour visualiser vos pages HTML, il faut les ouvrir dans un navigateur (double-clic sur le fichier).
  • Pour éditer le fichier, il faut l'ouvrir avec un éditeur texte (clic-droit et ouvrir avec).
  • Après avoir sauvegardé votre fichier, faites F5 dans votre navigateur pour rafraîchir la page et afficher les modifications.
• Utiliser un adressage relatif et pas absolu : Pour préciser le chemin d'un fichier image dans l'attribut src="..." de la balise ,
  • ne recopiez pas le chemin d'accès complet (appelé aussi adresse absolue
    par exemple : F:/2de-SNT/01-Web/Projet-Batman-VOTRENOM-Version1/images/batman-comics.jpg,
  • précisez le chemin du fichier image à partir de la position du fichier HTML qui l'utilise, on parle d'adresse relative par exemple : images/batman-comics.jpg.
  En effet, si on change le mini-site de place dans l'ordinateur, les adresses absolues ne fonctionneront plus, contrairement aux adresses relatives !
• Il est indispensable de faire des sauvegardes de votre travail.
  • Une fois par semaine ou à la suite d'un travail important, faites une copie de votre travail sur une clé USB ou sur votre ordinateur.
  • Il est aussi conseillé de sauvegarder en plus votre travail sur un cloud (dossier 2de-SNT/01-Web du porte document de l'ENT par exemple) pour pouvoir y accéder de n'importe où.

Site web Batman avec du style

1 - Reprendre le projet Batman précédent et utiliser la balise sur les deux pages HTML pour les lier au fichier style.css déjà présent.

Ajouter, dans ..., la balise en adaptant le nom de la feuille de style monstyle.css, ainsi que son chemin d'accès, si besoin.

2 - Observer les modifications sur les deux pages HTML.
3 - Faire valider par le professeur.

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, répertoires images ainsi que le fichier .css).

Avant de commencer la conception numérique, vous devrez proposer en classe une version papier de votre site web sur une feuille A3. 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 de votre site web :

• 4 pages web comportant chacune au moins une image et du texte,
• des hyperliens pour passer de l'une à l'autre de ses 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,
• il faudra 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 quatre fichiers HTML, un CSS et un dossier images) devra être compressé et rendu au professeur,
• ce dossier ne devra pas être trop lourd (max 10 Mo) et nommer avec votre prénom et nom.