Découper un design (partie 1)

Voici comment réaliser une interface pour le web. Attention ! C'est une méthode parmi d'autres ... J'utilise ici des tableaux mais sachez qu'il vaut mieux désormais coder en css/xhtml pour etre en conformité avec les recommandations du W3C Consortium. Bref, sortez les thermos et demandez une RTT: y en a pour un petit moment.....

Voici exactement ce à quoi nous voulons arriver :....

Première étape

Je ne vais pas m'étendre sur la construction de l'image de départ. En fait, il s'agit de créer le design completement sous The Gimp ou Photoshop, puis de le découper pour enfin le mettre en page. A vous de jouer pour cette partie là : tous les tutos du monde ne remplaceraient pas votre imagination ...

Donc, commencez par créer une image de ce que vous souhaitez comme design, incluant les boutons, barre de menu, footer etc ..... Pensez bien à ne pas réaliser un design trop large, l'important étant qu'il soit vu par toutes les résolutions à partir de 800*600 (les 640*480 sont désormais presque disparus). Pour cela, travaillez sur une image de 780 pixels de large au maximum (surtout si vous prévoyez un fond de page graphique: il sera dans ce cas légerement visible en 800*600)

Une fois que votre image est faite, aplatissez les calques de manière à pouvoir exporter au format jpeg. Cette étape n'est pas obligatoire puisque vous pouvez exporter pour le web (ALT+F+W) depuis un .psd.

Deuxième étape

fichier > enregistrer pour le web

La palette "enregistrer pour le web" permet de définir le taux de compression de l'image, donc son poids final. Or, afin d'avoir une page optimale niveau graphique, il est ici nécessaire d'exporter en jpeg maximum et en qualité 100.

Il sera possible, après la découpe d'optimiser les images, voir de supprimer celles qui ne servent à rien (le fond gris de la page par exemple qui sera en fait transformé en un fond de couleurs identique).

• une fois vos paramètres définis, validez.
• enregistrez l'image là où vous le souhaitez en la nommant index

Nota : pour la bonne gestion du projet, organisez vos dossiers comme suit sur votre disque dur :

Cette organisation permet de ne pas se mélanger les pinceaux lors de la mise en ligne, les fichiers natifs étant séparés des fichiers du site..... C'est toujours dommage de laisser trainer des psd sur le net ...

Les fichiers html sont à mettre dans le root du projet en question (site truk pour cet exemple)

Troisième étape

Passons maintenant à la découpe. Image ready est simple à utiliser mais beaucoup moins fonctionnel que Fireworks (c'est un avis personnel). La version demo de fireworks permet de tester le découpage en tranche. Ouvrez fireworks et importez le fichier (la découpe a été faite avec une version démo, il se peut que votre interface ne soit pas tout à fait identique à l'image ci-dessous)

Par défaut, l'image s'affiche en bitmap avec des calques prédéfinis. Ne modifiez aucun paramètre. Observez la palette d'outil et sélectionnez l'outil découpe

Quatrième étape

Sans relacher la souris, délimitez la zone que vous souhaitez découper. Aidez vous des repères de règle au besoin. Une fois le point de découpe final atteint, lachez le bouton de la souris.
Nota : les découpe sont ensuite redimensionnables, si besoin est.

Une fois la premiere découpe réalisée, une zone verte apparait, délimitant la "parcelle".

Observez la palette des calques : par défaut, FW a attribué à cette première découpe le nom "découpe". Modifiez le afin de vous y retrouver lorsque vous monterez vos pages(double-cliquez sur le calque)

Cinquième étape

Continuez vos découpes. N'hésitez pas à zoomer pour vérifier que les tranches sont bien bord à bord.... Au final, vous devriez obtenir ceci :

Sixième étape

Enregistrez votre image avec les tranches (CTRL+Maj+S) dans le dossier projet ouaibe > sitetruk. Le cas échéant, cela vous permettra de revenir et modifier vos tranches si vous en avez besoin ...

Septième étape

Ce fichier étant enregistré, exportons notre découpe au format HTML, puisque nous voulons construire une page web a partir de cette image.

Pour cela, allez dans Fichier > Exporter

La boite de dialogue suivante s'ouvre :

Votre image s'appelant index.png, par défaut le fichier html s'appelle index, ce qui tombe plutot bien puisque c'est l'index du site .... Choisissez ensuite les paramètres comme indiqués ci-dessus.

Pour le dossier image, cochez la case "Placer les images dans des sous-dossiers" puis cliquez sur "parcourir" pour affecter le dossier "images" (que vous avez crée tout à l'heure en organisant votre projet ..)

Validez.

Huitième étape

Découper un design (partie 2)

Nous avons précedemment vu comment réaliser la découpe via FW. Les fichiers ont été exportés.

Voici comment ils se présentent sur votre disque dur:

L'export Fireworks a donc généré un fichier index.html, visible dans le root du dossier site truk.com. Toutes les images de la découpe ont été mises dans le dossier "images", comme nous l'avions décidé.

Nota: les images portent ici le nom par défaut attribué par Fireworks lors de la découpe (index_r1_c1). Comme conseillé dans la première partie, renommer les calques permet d'avoir des noms d'images clairs et non pas des abstractions comme ici ...

Première étape

Ouvrez votre éditeur html (ici DW) et ouvrez le fichier index.html de votre dossier site truk. Voici ce que vous devriez voir ....

Notez que tout est calé à gauche et qu'en cliquant sur une image on voit sa découpe ... Commençons par centrer le design ... Dans la balise <body> du code de la page se trouvent les spécifications du tableau généré par FW. Il suffit de lui ajouter une valeur align="center"

Mais il y a plus simple. Sélectionner le tableau global de votre design puis allez dans Modifier > Propriétés de la page (CTRL+Maj+J) . Regardez en bas de votre écran, un panel est apparu (si il n'était pas déjà présent ..)

Choisissez "centre" dans le menu déroulant "aligner". Voilà, votre design est centré

Deuxième étape

Interessons nous maintenant à la mise en page plus précise du projet. Le design est centré, cool. Mais les marges ? Modifier > Propriétés de la page (CRL+J)
Le tableau suivant apparait :

• Titre : c'est le titre de votre page qui apparaitra dans la barre bleue, en haut du navigateur.
• Img d'arrière plan : si vous souhaitez utiliser une img d'arrière plan, mettez la en place via ce champ
• Couleur d'arrière plan : n'apparait pas si vous utilisez une img d'arrière plan
• Couleur du texte : choisissez une couleurs
• Couleur du lien : choisissez une couleurs
• Couleur du lien visité: choisissez une couleurs
• Couleur du lien actif : choisissez une couleurs
• Marge gauche : mettez 0 si vous ne souhaitez pas de marge à gauche
• Marge haut : mettez 0 si vous ne souhaitez que votre design soit calé tout en haut de la fenêtre
• Largeur de marge : mettez 0 si vous ne souhaitez pas de largeur de marge
• Hauteur de marge : mettez 0 si vous ne souhaitez pas de hauteur de marge

Le reste des options est inutile (ne touchez pas à l'encodage, sauf si vous souhaitez publier un site en chinois ..)

Validez. Le design prend sa place définitive dans la page. F12 pour vérifier sous votre navigateur par défaut (ici Mozilla)

Damned, il y a encore un écart entre le haut de mon design et le bas de la barre de Mozilla. Comment se fait-il donk ? (voir loupe ci-dessous)

En fait, FW génère aussi des fichiers images appelés spacer.gif. Ces images servent à "consolider" le design, sorte de "poutre" pour maintenir le tout (inconvénient qui n'existe pas en css2). Pour supprimer ce petit espace, il faut aller dans le code et mettre tous les spacer du design (généralement regroupés) à la fin du code de la page, juste avant la balise </table>

Troisième étape

Mettons maintenant les images en background et supprimons les images superflues. Pour cela, prennons par exemple l'image qui constitue le fond de la rubrique news.

J'ai pris soin, lors de la découpe de prévoir cet espace afin d'y intégrer une partie texte. Il me suffit désormais de supprimer cette image et de mettre comme couleurs de fond de cette cellule, la couleurs de l'image et le tour est joué . Ainsi, c'est non seulement invisible mais surtout cela allège déjà le poids de la page ...

Nota : pour un fond qui se répète, il est tout à fait possible de créer une image de 1 px de hauteur et de mettre cette image en fond de cellule. Elle se répliquera alors autant de fois que nécessaire ....

Par exemple, pour la partie central du design, j'ai une image grise. Je la supprime car j'ai du texte et des images à mettre ici. Par défaut, la cellule prend la couleur du fond de la page (ici un blanc #FFFFFF - voir étape 2 sur cette page)

Allez dans > Modifier > Propriétés de la page (CTRL+Maj+J). Regardez en bas de votre écran, un panel est apparu (si il n'était pas déjà présent ..). Sélectionnez la case Ar-pl, sur la dernière ligne en bas (voir figure à la fin de l'étape 1 sur cette page) et choisissez la couleur de fond qui convient grace au panel de choix de couleurs.

Quatrième étape

Voilà.
A vous maintenant d'intégrer vos tableaux, textes & images pour rendre ce design vivant et complet. Bon courage !