Un design à partir de rien

Vous avez maintenant de bonnes notions Css grâce aux cours que vous avez pris sur le site du zer0, vous naviguez sur Mozilla Firefox, vous possédez l'excellent outil Web-Developper en français, vous avez un blog-test et vous rêvez envie d'un nouveau design.

Je vous propose de vous lancer du haut de la falaise et de tout reconstruire.
L'angoisse de la page blanche.
L'imagination au pouvoir.

Prenez par exemple, un design standard (Modèle EasyBlog White).

Affichez les Css. Vous verrez que malgré la simplicité du design, le Css est fourni.
Justement, allez-y, dans le Css, et remplacez tout ce que vous avez par une ligne bidon body {} - eh oui, l'informatique n'aime pas le vide.

Résultat basique mais édifiant, tout est là, sauf la mise en page...

On active alors la Web-barre, ses éléments indispensables sont :
- Css/éditer les Css
- Entourer/entourer l'élément survolé
On se cale sur notre Css nommé "article.css" ou "home.css" si vous êtes en config avancé.

En premier, on s'attaque à la structure, avec des lignes de bases.

Ici, la largeur globale a été définie, ainsi que les largeurs des colonnes. J'ai mis une bordure colorée juste pour les différencier. J'ai aussi appliqué une couleur verte aux liens.
Certes, c'est pas abouti, mais c'est déjà moins moche qu'avant, avec juste quelques lignes de Css !

Avec quelques fonds à la place des bordures, c'est déjà un poil plus présentable.
Dans cet exemple, j'ai mis les liens en général en blanc, puis, pour chaque type plus précis de lien on peut mettre une autre couleur, ou pas...

Pour connaître le chemin exact de chaque élément, on survole la partie en question et la web-barre nous indique le chemin précis, que l'on peut "réduire" si rien avant ne contredit notre déclaration.
Par exemple, on peut écrire ".titreArticle" plutôt que "html body #global #ln_1 #cl_1_1 .articles .article .divTitreArticle h2 a .titreArticle". N'empêche, on peut voir là le nombre d'éléments imbriqués les uns dans les autres...

Malgré tout, une certaine chronologie est à suivre pour ne rien oublier lorsqu'on construit un design.

On travaille dans un premier temps,
- L'accueil du blog,
- Un article seul avec ses commentaires,
- La liste complète des articles,
- Les articles les plus commentés
- Une catégorie,
- Une page,
- Éventuellement, on travaille aussi les extraits d'articles.

Voilà la théorie, ne vous reste plus qu'à sauter le pas et vous entraîner !

Ah oui, on peut aussi sortir du cadre habituel des structures... (les images sont cliquables au fait, pour les voir plus grandes...)

Écrire un commentaire     Lire les commentaires