conception d`un design css zen garden

 CONCEPTIOND’UN
DESIGNCSSZEN
GARDEN
A2012 Programmation en environnement graphique Créer un design original pour le site CSS Zen
Garden en utilisant une CSS
(20% de la note finale)
TABLEDESMATIÈRES
TABLE DES MATIÈRES ................................................................................................... 2 DESCRIPTION GÉNÉRALE .............................................................................................. 3 Informations générales .................................................................................................... 3 Étapes à suivre… .............................................................................................................. 4 Détails .............................................................................................................................. 5 DESCRIPTIONGÉNÉRALE
CSS Zen Garden ( www.csszengarden.com ) est un site qui prône le découplage du CSS par rapport au HTML. C’est également un site où des créateurs soumettent leur design en ne modifiant que la CSS et en réutilisant le HTML disponible sur le site. Maintenant que vous êtes à jour dans l’intégration de pages Web, c’est à votre tout de créer une design CSS Zen Garden ! Informations générales Voici certaines informations utiles :  Andy Clarke a conçu un schéma résumant les différents div faisant partie de la page de départ; vous y avez accès sur notes‐de‐cours.com  Vous devez déterminer un thème et un design pour votre page. Regardez les nombreux exemples pour vous aider; bien entendu toute version trop inspirée d’un exemple existant sera refusée. Bien que regarder et/ou emprunter des bouts de code sur le web soit une pratique courante, je m’attends à ce que votre CSS soit une composition originale. *** le thème et les choix d’images doivent être de bon goût, en cas de doute vous pouvez me consulter ***  Les éléments que je ne regarderai pas : o La compatibilité avec Internet Explorer 9; Étapes à suivre… Voici les étapes à suivre pour compléter ce travail 1. Trouver votre design Votre design doit être documenté dans un fichier README.docx. Ce fichier contiendra donc : ‐ le pourquoi vous avez choisi ce design (qu’est‐ce qui vous a inspiré). ‐ Votre palette de couleur. Quelle est‐elle et pourquoi ? 2. Commencez à penser aux possibilités de logo/images Illustrator. Ce travail doit comporter au moins 1 image Illustrator, donc autant le(s) prévoir à l’avance (voir détails plus bas). 3. Vous devez télécharger le page HTML présente sur la page d’accueil du site; une version française existe mais elle contient plusieurs références de traduction qui alourdissent le code. Vous ne pouvez pas modifier la page HTML; la page contient un grand nombre de <div> permettant de varier à l’infini le positionnement des blocs et plusieurs <div> vides existent à la fin de la page afin de placer d’autres images de fond, entre autres. 4. Intégrer votre design et créez vos images CONSEIL : Le développement de votre CSS doit être fait étape par étape. Voici une démarche proposée : a. Travailler sur vos choix de police d’abord ( Google Font Library est très utile ) b. Travailler ensuite sur le padding et les marges c. Travailler sur vos images de background (Illustrator et sur Google images) d. Finalement, développer votre page en utilisant principalement la propriété float Détails Éléments obligatoires 1. Votre design doit comprendre au moins deux colonnes, réalisées avec la propriété float/clear. 2. La page HTML ne doit pas être modifiée. 3. Utiliser des techniques de replacement de texte par image pour toutes les entêtes (balises <h1>, <h2> et <h3>), tel que vu en classe. Autres techniques pour y arriver : http://www.mezzoblue.com/tests/revised‐image‐replacement/ 4. Au moins une image doit avoir été créée à l’aide d’Illustrator. Vous pouvez utiliser des textures trouvées sur Internet pour raffiner votre image. 5. Soumettez votre CSS au validateur CSS (http://jigsaw.w3.org/css‐validator/) 6. Votre CSS soit être bien fait, clair et bien indenté. 7. Pour les liens, utilisez des pseudo‐classes pour améliorer l’aspect de votre page. Exemple : a:hover Faites en sorte qu’ils soient suffisamment différents pour que le changement soit visible. Image Adobe Illlustrator Vous devez ajouter au moins une image créée en Illustrator dans votre design. Cette image doit être travaillée, donc pensez aux masques, effets, etc. !!! Ne pas oublier de remettre votre fichier .ai (document original Illlustrator) !!! Ce que vous devez remettre (les livrables et la structure de dossier) Dossier Doc ‐ Doit contenir vos documents bruts (.ai, .psd, …) Dossier Web ‐ Votre fichier HTML (css‐zen‐garden.html) ‐ Dossier css o Avec votre fichier CSS à l’intérieur ‐ Dossier images Ce travail est à remettre zippé (votre‐nom.zip) dans le dossier K:/Remise/B53.