Css Zen Garden : Conception dans le Jardin

En mai 2003, le monde CSS s’est lancé dans une ressource extraordinaire : le CSS Zen Garden. Le but de ce site était de fournir aux concepteurs web un document HTML qu’il pouvaient modifier de n’importe quelle manière pour les mettre au défi d’écrire une feuille de style qui présenterait le fichier avec dextérité dans l’apprentissage, look and feel et originalité.

A cette heure, il existe plus d’une centaine de propositions de design, chacune d’entre elles se défiant les autres, et toutes vraiment radicalement différentes.

L’objectif du site était de montrer que le design CSS pouvait être très élégant, et qu’une telle beauté pouvait être créer au-dessus de la structure d’un document HTML très simplement structuré et que ce même document pouvait se présenter sur une grande diversité

Ce site est vraiment un succès brillant dans le monde des CSS et commence à attirer quelques talents francophones.

Le défi proposé par Laurent Lunati aux graphistes des PagesJaunes est de :
•	d’appréhender la structure extrêmement simple du document de base HTML. Une structure polyvalente pouvant être aisément répliquée en production
•	les inviter à plonger simplement via un simple plugin du navigateur pour modifier et créer des modificaitons de la CSS à la volée.
•	Les amener à poursuivre ces travaux qui seront un cas pratique extrêmement clair de structure de site HTML pouvant s’adapter à tous les types de développements professionnels

Les objectifs du projet : 

Inviter les graphistes à rendre un design visuel et le convertir dans une mise en page fondée sur CSS. Ce simple objectif comprend un trio d’objectifs spécifiques :
1.	créer le gabarit sans modifier un simple caractère du contenu et du marquage HTML dans le document fourni. Seule la CSS est sous contrôle
2.	S’assurer que la mise en page s’affiche bien dans un navigateur comme IE5 et + ; IE5 pour Mac, Safari et les derniers navigateurs Gecko comme Mozilla et Firefox
3.	Faire que la conception tolère les modifications dans les changements de polices jusqu’à 150% de la taille de police utilisateur utilisée par défaut.

Les graphistes pourraient rapidement comprendre le devenir de leur métier…

Préparation : 
•	Téléchargement du document squelette HTML officiel
•	Compréhension de la structure et des divs conteneurs utilisées 
o	commentaire Laurent Lunati (non utilisation des extra div proposées par les designers pour adjoindre d’autres éléments de style si besoin)
o	Container
•	Intro
•	Page Header
•	Quick Summary
•	Préambule
•	Contenu
•	Explication…
•	Bénéfices
•	Exigences
•	Pied de Page
•	Liste de liens
•	Archives
•	Ressources
Créer la Conception
Pour démarrer nous regarderons de près quelques styles globaux : les règles qui s’appliquent au document. Ceci veut dire le déshabillage des marges de pages (ou zone de remplissage / padding), le réglage de l’arrière-plan et des couleurs d’arrière-plan, la suppression des bordures et des soulignés sur les acronymes et éléments liens

Planter les premières Graines :
•	Largeur et marge du conteneur
•	Alignement du texte 

En-tête de la page :

•	Ajout d’images dans la CSS
Ajout d’une touche Florale
•	Position absolue et z-index

Stylisme du Résumé
Stylisme du Contenu Principal
Travail sur le Pied de Page
Travail sur la Barre de Menu

Conclusion : 

Proposez vos propres design CSS sur Zen Garden !
Ils n'ont pas besoin d'être sublimes. Ce que nous attendons est une proposition innovante et intéressante.

Essayez différentes mises en page avec le balisage, les rendant de plus en plus complexes au fil de vos apprentissages. N'oubliez pas que le document HTML source ne doit pas être modifié. 
Tout ce que vous avez à faire est de modifier la CSS. 

Essayez des choses qui pourraient ne pas fonctionner. Si vous faites des erreurs, arrêtez avant de la défaire. Est-ce que le résultat correspond à vos attentes ?

Zen Garden attend les webdesigners francophones !