CODESIGN : Webdesigner Freelance, Intégrateur HTML Freelance, Développeur PHP Freelance

La dernière étape de réalisation consiste simplement à :
1- mettre des fonds de couleurs unies dans un premier temps, en prenant les couleurs correspondantes selon la source graphique et en modifiant au besoin la couleur de la police.
2- faire la découpe du visuel dans la source graphique, l'exporter en PNG32 et créer la règle CSS background:url(image.png)no-repeat 0 0...

Parfois l'image ne passe pas avec IE6, il suffit alors de mettre une règle position:relative... et parfois zoom:1 !

Pourquoi du PNG32, lourd et pesant ? Parceque je maquette, et je suis susceptible de faire des cartes pour sprites plus tard...

C'est quoi une carte pour sprite ? et ben ce sont plusieurs visuels regroupés dans la même image.



Quand toutes les règles ont été crées, que les règles éventuelles de la partie 1 ont été modifiées pour s'adapter aux contraintes de gestion des visuels, on peut alors retravailler chaque visuels pour gagner du poids...

Petite note sur les préfixes que j'utilise :
- bg- pour les fonds de blocs
- puce- pour les ... puces :)
- btn- pour les ... boutons :p

Un exemple pour le header de La Librairie des Ecoles

/*== BRAND */
#b-brand {background:url(images/bg-page.png) repeat-y 0 0;padding:0 10px 0 10px;width:960px;}
#b-brand .b-wrapper {height:101px;overflow:hidden;color:#fff;position:relative;background:#213E80 url(images/bg-brand.png) no-repeat 0 0;}
#b-brand hgroup {position:absolute;left:115px;top:15px;}
#b-brand hgroup h1 {font-weight:normal;margin:5px 0;font-family:GlyphaRoman,courier;font-size:35px;border:1px solid #fff;border-right:0;border-left:0;padding:5px 0;}
#b-brand hgroup h1 a {text-decoration: none;color:#fff;}
#b-brand hgroup h2 {font-weight:normal;margin:10px 0;font-family:courier;font-size:12px;}
#b-brand nav {padding:10px 5px;margin:0 5px 0 0;width:265px;float:right;text-align:center;font-size:12px;font-family:Arial,sans-serif;color:#1C305F;background:#DBDDE8;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
#b-brand nav a, #b-brand nav a:link, #b-brand nav a:visited {color:#1C305F}
#b-brand nav a:hover {color:#203d7f;text-decoration:none;}

Explications :
Le visuel bg-page ne pourra pas être inséré dans la carte de prites car il doit être répété... A l'inverse, bg-brand pourra être utilisé dans la carte de sprites.

#m-main ul li#m-lecture {background:url(images/bg-nav-lecture.png) repeat-y 0 0;}
#m-main ul li#m-francais {background:url(images/bg-nav-francais.png) repeat-y 0 0;}
#m-main ul li#m-mathematiques {background:url(images/bg-nav-maths.png) repeat-y 0 0;}
#m-main ul li#m-histoiregeo {background:url(images/bg-nav-histoire.png) repeat-y 0 0;}
#m-main ul li#m-sciences {background:url(images/bg-nav-default.png) repeat-y 0 0;}
#m-main ul li#m-morale {background:url(images/bg-nav-default.png) repeat-y 0 0;}
#m-main ul li#m-parniveau {background:url(images/bg-nav-niveaux.png) repeat-y 0 0;}

Classiquement, toutes ces images de fond peuvent être insérées dans la carte de sprites, mais elles se répètent en hauteur, donc elles devront être alignées en longueur dans la carte...

.b-livre nav li.b-feuilleter {background:url(images/puce-feuilleter.png) no-repeat 0 0;padding:3px 0 3px 20px;}
.b-livre nav li.b-conseiller {background:url(images/puce-email.png) no-repeat 0 0;padding:3px 0 3px 20px;}

Les puces, elles, c'est sûr, doivent être dans une carte, alignées plutôt de manières verticales, ou alors très éloignées les unes des autres...

Je n'ai pas encore monté les cartes, dès que c'est fait, je les pose ici.