Projet Web
Mise en ligne d'une page
Essayez tout d'abord de mettre en ligne votre page web.
Ouvrez FileZilla et rentrez les informations suivantes :
Hôte : linserv3.iutnice.unice.fr
Login : numero@iutnice.unice.fr (où numero est votre numéro d'étudiant)
Mot de passe : votre mot de passe
Port : 22
Créez un répertoire www et uploadez une page index.html dedans.
Vérifiez que vous avez accès à votre page en allant à l'adresse : https://linserv3.iutnice.unice.fr/~xyz en remplaçant xyz par votre numéro étudiant.
Objectif
L'objectif de ce projet est de rendre un site web complet.
Votre site devra contenir au minimum :
un menu “dynamique” tel que vu au précédent TP
différentes feuilles de styles (pas uniquement un changement dans les couleurs mais également dans la structure)
une structure commune à toutes les pages pour un style donné
votre CV au format html
différentes pages sur les sujets qui vous intéressent comprenant images, formulaires, vidéos, inclusion de cartes etc
Votre site sera évalué en fonction :
de la séparation des éléments de contenu et de mise en forme,
de la qualité de la mise en forme (utilisation des sélecteurs, des éléments de mise en forme etc)
de la complexité de la mise en forme (transition
CSS, transformations, etc)
de la conformité du site (n'oubliez pas les validateurs du
W3C !)
de l'originalité du contenu
C'est le moment de vous faire plaisir !
Faites un site qui vous plait !
Au besoin reprenez des éléments de votre exposé si vous manquez d'imagination.
N'hésitez pas à piocher dans les TP précédents
Attention à la taille de votre site ! Votre archive zip doit faire moins de 20 mo ! Prenez garde à la taille des images / vidéos.
Feuille de style dynamique
Vous pouvez récupérer ce code contenant un exemple de changement dynamique de feuille de style : code_projet.zip
Pour l'utiliser dans vos propres codes suivez les règles suivantes :
copiez collez tout le code (balises incluses) de <script type=“text/javascript”> jusqu'à </script> dans votre propre head
Créez une balise <select> possédant l'identifiant choixCSS et possédant l'attribut : onchange=“changeCSS()”
Créez les différentes
<option> du select en précisant comme
value le chemin du fichier
CSS
Si vous le souhaitez vous pouvez utiliser des liens au lieu d'un select, à vous de chercher comment !