NFA Projet HTML-CSS

Transcription

1 NFA Projet HTML-CSS 06 - Projet HTML-CSS

2 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 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

3 1. Avant de commencer Regroupement 1 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 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. NFA Projet HTML-CSS 1 / 6

4 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. NFA Projet HTML-CSS 2 / 6

5 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 : Vous créerez aussi les éléments de feuille de style correspondant. NFA Projet HTML-CSS 3 / 6

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 : NFA Projet HTML-CSS 4 / 6

7 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 : NFA Projet HTML-CSS 5 / 6

8 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 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. NFA Projet HTML-CSS 6 / 6