Repartir de zéro

Un graphiste crée une "maquette", une image d'une page du site dans un programme vectoriel. Si plusieurs pages ont des présentations différentes, il crée alors plusieurs maquettes. L'aspect graphique d'une maquette doit être validé rapidement (surtout si vous faites ce travail pour un client). Il est toujours possible de changer un logo à la fin, mais passer une colonne de l'autre coté de la page, ou transformer par exemple un style "à taille fixe 800x600" en un style "ajusté à la taille de la fenêtre du navigateur" demande beaucoup de travail supplémentaire.

Vous demandez au graphiste des simplifications en fonction de ce que vous pouvez ou ne pouvez pas faire en CSS. Certains navigateurs comme internet explorer ont des défauts qui transforment des "idées évidentes" en "casse tête d'intégration" sous certaines circonstances (objets alignés par rapport au bas de la page, hauteurs des colonnes homogène). Ne soyez pas trop ambitieux. L'aspect technique doit être validé par vous même, vous devez avoir en tête les différents blocs qui composeront l'image finale. Faites valider aussi les changements graphiques de ces simplifications.

Créez ou modifiez les template correspondants, ainsi que les fichiers CSS avec les différents blocs, sans y mettre les images pour l'instant. Retournez à l'étape précédente si vous n'arrivez pas à positionner les éléments correctement. Testez la compatibilité avec différents navigateurs, rajoutez des bordures "de debug" pour voir les limites des blocs.

Vous spécifiez au graphiste la résolution des images "maquette finale" qu'il fournit, des versions différentes pour bien faire apparaître toute partie d'image que vous allez récupérer (par exemple, sans le texte, sans les "puces du menu", tout ce qui recouvre l'espace)... Précisez lui le format de l'image et sa résolution (png ou jpeg très haute qualité, vous allez devoir le recompresser après).

Tracez sur papier les blocs à taille fixe de la page, et isolez les avec un outil de traitement d'image (par exemple The Gimp, outil "crop"), tout en notant leurs coordonnées sur papier, pour que vous puissiez reproduire le même découpage ou découper d'autres blocs de même hauteur / largeur. Pour les blocs de taille variable, votre image de fond doit être répétable, ou à défaut avoir une taille maximale et apparaître correctement même tronquée. Souvent, on découpe une ligne de 1 pixel de large qui va être étirée. Ou alors, le plus simple reste juste les blocs avec une couleur de fond sans image. Enregistrez chaque "image de bloc".

Il vous reste à découper et intégrer les puces et autres images "flottantes" du contenu.

Pour chaque div devant accueillir une image découpée, à vous de régler au moins les propriétés en lien avec l'image de fond, par exemple :

background-position: top left;

background-repeat: no-repeat;

background-image: url(../../img/topleft.png);

Pour les noms de fichiers images, repérez vous bien dans l'arborescence des fichiers du site web HTML généré, chaque ".." représente un répertoire parent.

Pour les blocs fixes, je vous recommande de donner des id de classe et des noms de fichiers en fonction de la position, ce qui rend votre layout réutilisable. Par exemple, si vous appellez "topleft.png" le bloc des étoiles, c'est peut être moins évocateur que "etoile.png" mais vous pouvez facilement remplacer l'image par une autre complètement différente si vous devez décliner votre modèle pour traiter un autre sujet.

Exemple avec le bloc "topleft" : les étoiles en haut à gauche :

Vous devriez obtenir quelque chose qui ressemble à l'écran ci dessous, tout à fait conforme à ce que nous avons prévu :