Projet HTML/CSS - Page personnelle

NFA 074
06 - Projet HTML-CSS
06 - Projet HTML-CSS
Le plus grand soin a été apporté à la réalisation de ce support pédagogique afin de vous fournir une information
complète et fiable. Cependant, le Cnam Champagne-Ardenne n'assume de responsabilités, ni pour son utilisation,
ni pour les contrefaçons de brevets ou atteintes aux droits de tierces personnes qui pourraient résulter de cette
utilisation.
Les exemples ou programmes présents dans cet ouvrage sont fournis pour illustrer les descriptions théoriques. Ils
ne sont en aucun cas destinés à une utilisation commerciale ou professionnelle.
Le Cnam ne pourra en aucun cas être tenu pour responsable des préjudices ou dommages de quelque nature que
ce soit pouvant résulter de l'utilisation de ces exemples ou programmes.
Tous les noms de produits ou autres marques cités dans ce support sont des marques déposées par leurs
propriétaires respectifs.
Ce support pédagogique a été rédigé par Arnaud RENARD, enseignant vacataire au Cnam Champagne-Ardenne.
Copyright  2010-2011 - Cnam Champagne-Ardenne.
Tous droits réservés.
L'utilisation du support pédagogique est réservée aux formations du Cnam Champagne-Ardenne. Tout autre usage
suppose l'autorisation préalable écrite du Cnam Champagne-Ardenne.
Toute utilisation, diffusion ou reproduction du support, même partielle, par quelque procédé que ce soit, est
interdite sans autorisation préalable écrite du Cnam Champagne-Ardenne. Une copie par xérographie,
photographie, film, support magnétique ou autre, constitue une contrefaçon passible des peines prévues par la loi,
du 11 mars 1957 et du 3 juillet 1995, sur la protection des droits d'auteur.
10 décembre 2012
Regroupement 1
1. Avant de commencer
Le but de ce regroupement est de réaliser un sujet d’examen blanc et ainsi de s’exercer avec les contraintes liées
à un examen. En effet, les consignes qui vont suivre seront les mêmes que le jour de l’examen. Il est donc
primordial de les respecter, surtout si vous réalisez ce regroupement de chez vous.
Vous avez deux heures pour réaliser un site web répondant aux consignes qui vont suivre en respectant la charte
graphique et en créant l’arborescence de fichier décrite.
Prenez bien le temps de lire le sujet complet afin d’avoir l’ensemble des demandes en tête.
Tous documents en ligne autorisés (cours Plei@d, web, …) a l’exception de vos documents personnels (notes
prises lors des cours, penses bêtes, …).
Au bout des 2H chronométrées par vos soins, vous arrêterez tout, vous constaterez votre état d’avancement et en
ferez part à l’enseignant. Ce sujet n’est pas forcément faisable en 2H, à vous de voir les éléments ou les parties
du sujet qui vous ont fait perdre du temps afin de les approfondir par la suite. Une fois un point fait sur les 2H de
travail, si le sujet n’est pas terminé, vous pouvez le continuer afin de voir le temps nécessaire à sa réalisation
complète.
Tous les codes devront être validés par le W3C validator à l’aide d’un lien présent sur chacune de vos pages. Le
lien s’ouvre par défaut dans une nouvelle page.
Les logiciels autorisés sont :
•
notepad++ (avec le plugin NppFTP disponible dans la section « ressources »)
•
Top Style
•
Gimp
•
IEtester
•
Internet Explorer
•
Google Chrome
•
Firefox (avec les extensions webDeveleper, FontFinder, ColorZilla et MeasureIt)
Les images de votre site seront situées dans le dossier images (certaines sont déjà disponibles)
Les fichiers CSS seront situés dans le dossier style.
Vos créations devront fonctionner avec les principaux navigateurs (au moins Firefox, IE et Chrome)
2. Sujet
Vous êtes webmaster du site Plei@te et vous devez réaliser un site de démo
3. Structure de la page
Créer une première page (index.html, fond gris clair) qui respecte la structure imposée (cf copie d’écran).
•
L’entête occupe toute la largeur de la page, et a 90px de haut, avec une couleur de fond, et l’image est
centrée.
•
La partie principale de la page (800px de large, centré sur la page)
o Une zone de 80px de haut et contenant le menu écrit sous forme d’une liste (ul, li) mise en forme
en CSS (utilisez des couleurs sobres). Une des options du menu est affichée de manière différente
(c’est l’option actuellement active).
o Une zone contenant 2 colonnes (séparées entre elles et des bords de 20px) :

Une colonne de 200px de large qui contient une pub de type skycraper et qui envoie vers
la page http://skyscraper.com/.

Une colonne de 600px de large appelée zone de contenu (fond blanc)
•
Un bandeau de lien partenaires propos des images en vrac sur toute la largeur de la page (quelle que soit
cette largeur). Lors du passage de la souris au-dessus d’une image, elle disparait et l’image située en
dessous (z-index) apparait.
•
Un pied de page contenant le lien vers le validateur W3C (qui s’ouvre dans une nouvelle page) ainsi que
les mentions légales du site web.
NFA074 – 06 - Projet HTML-CSS
1/6
3.1. Aperçu de la page
Cet aperçu vous donne une idée de la structure de la page … mais il ne respecte pas toutes les consignes.
NFA074 – 06 - Projet HTML-CSS
2/6
3.2. Contenu de la page principale
La zone de contenu de la page principale contient les mêmes informations que le menu sous forme d’image
cliquable ainsi qu’une citation de film intégrée automatiquement en suivant la méthode JavaScript décrite sur ce
site : http://www.kaakook.fr/partenariat/explications-partenariat.php. Vous créerez aussi les éléments de feuille
de style correspondant.
NFA074 – 06 - Projet HTML-CSS
3/6
4. Pages secondaires
Une fois la page principale créée, vous prouver copier le fichier en page1.html, page2.html, page3.html et
page4.html et modifier ces 4 dernières pages (l’option active et le contenu doivent mises à jour)
4.1. Aperçu du contenu de page1.html
C’est la page la plus importante du site, vous montrerez dans cette page votre maitrise de CSS sur des balises
texte, selon la copie d’écran suivante :
NFA074 – 06 - Projet HTML-CSS
4/6
4.1. Aperçu du contenu de page2.html
Sur cette page, un certain nombre de blocs flottant sont présents. Ils contiennent une image et du texte, pour
former des vignettes, selon la copie d’écran suivante :
NFA074 – 06 - Projet HTML-CSS
5/6
4.2. Aperçu de page3.html
Elle inclura une vidéo youtube intégrée en recopiant dans votre code HTML la balise « intégrer la vidéo sur un site
» que vous trouverez en visualisant une vidéo.
4.3. Aperçu de page4.html
Elle contiendra un beau tableau, avec un rendu CSS avancé, ainsi que tout autre élément montrant votre maitrise
du domaine.
NFA074 – 06 - Projet HTML-CSS
6/6