[Tuto] Comment découper son design ?

Salah · **Inscription:** 21 Oct 2002 14:40 **Messages:** 873

Introduction

Bienvenue dans ce tutorial qui j’espère vous apprendra à découper votre design tout seul comme un grand et sans utiliser un seul tableau, c’est pas super ça ?

Ce tutorial n’est surtout pas un cours XHTML / CSS, pour suivre ce tutorial vous devez posséder quelques bases dans ces deux langages.

Avant tout vous devez sortir le matos :

Bon, ça y'est vous avez tout ça, allez on peut commencer !

Le commencement

Alors surtout ne sautez pas tout de suite sur vos logiciels, il ne faut pas se jeter dessus mais prendre quelques minutes à examiner son design :

Il faut :

Ne vous éternisez pas non plus sur cette étape, elle ne devrait pas prendre plus de 5 - 10minutes.

La découpe

Alors nous voici à une autre étape qui a son importance.

Tout d'abord vous pouvez ouvrir votre design avec votre logiciel de création graphique : et voila votre design que vous allez massacrer à coups de ciseau :mad:

.

Le header
Repérez le header, sélectionnez le, coupez la sélection et collez la dans un nouveau document que vous enregistrerai en JPG ou PNG ( appelez le " header " de façon à ne pas s'embrouiller avec les noms des images ); n'hésitez pas à couper le header horizontalement en 2 parties s'il est trop grand afin de permettre aux bas débit d'avoir un chargement progressif.

Le Menu
Viens maintenant le tour du menu, celui-ci est souvent arrondi dans la partie du haut et du bas, le centre est quant à lui uniforme ( ce qui nous permettra de le rendre extensible ), donc sélectionnez la partie haute du menu, coupez et collez dans un nouveau document que vous enregistrerai sous le nom " menu_haut.jpg " ( ou png ).

Faites de même pour la partie bas du menu ( menu_bas.jpg/png ).
Pour la partie centrale, sélectionnez la sur toute la largeur et sur 1px de hauteur ( notez que la largeur de la partie centrale est la même que celle du haut et du bas ), enregistrez cette partie sous le nom " menu_fond.jpg ".

Le texte
A présent, occupons nous de la zone de texte qui est généralement de la même forme que le menu, pour cela enregistrez la partie haute du cadre du texte et la partie bas du cadre du texte sous les noms : " texte_haut " et " texte_bas ".

Enregistrez la partie centrale du cadre du texte sous le nom " texte_fond " en prenant toute la largeur sur 1px de hauteur.

Le footer
Sélectionnez le footer ( si vous voyez qu'il n'est qu'une duplication d'une bande comme le menu l'est verticalement ; sélectionnez uniquement cette partie qui sera dupliquée ou si il n'y pas de possibilité de duplication sélectionnez le footer entier ) puis enregistrez le sous le nom " footer ".

Remarque : n'hésitez pas à faire de gros zooms afin d'être le plus précis possible lors de vos sélections.

Remarque² : les noms aux images découpées que j'ai donné peuvent être changés, mais doivent rester clairs et significatifs de ce qu'ils contiennent.

Note : Certains logiciels ont des outils web qui permettent de sélectionner les parties qui vous intéressent sans avoir besoin de créer un nouveau document systématiquement pour coller la sélection, puis grâce à l'exportation WEB, cela crée un dossier contenant les images qui nous intéressent ainsi qu'une page WEB qui ne nous intéresse pas par contre. Cependant je ne me sert pas de ces outils mais vous êtes libre de choisir la technique que vous désirez.

Mise en forme XHTML / CSS

Bon voila, on a les images c'est bien beau mais elles vont pas s'assembler toutes seules; la mise en forme : c'est ce que nous allons faire dans cette partie.

Tout d'abord ne quittez pas votre logiciel de création graphique, et gardez le document contenant le design dont vous avez couper les parties que vous avez ensuite exporter en image JPG ou PNG, en effet si je vous ai demandé de couper et non de copier c'est pour pouvoir connaître les marges que nous allons utiliser ici.

Pages de base :
Voici une page XHTML " vide " ( j’entends par " vide" : qui n’affiche rien ) :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titre</title>
<link rel="stylesheet" href="./style.css" type="text/css" />
</head>

<body>

<div id="contenu">

</div>

</body>
</html>

J’ai volontairement ajouté un " div contenu " entre les balises " body " qui nous permettra d’y insérer tout le contenu du site et de centrer celui-ci.

Voici une page CSS que j’utilise pour chacune de mes découpes comportant plusieurs éléments ( que j'ai commenté ) qui servent et se réutilisent sur chacune de mes découpes :

Code:

body {
   background-color:#26333B; /*Couleur de fond de la page Web*/
   color:#ADABAC; /*Couleur du texte*/
   font-family:Verdana, Arial, Helvetica, sans-serif; /*Polices d’écriture*/
   font-size:11px; /*Taille d’écriture*/
   padding:0; /*Pour que la page n’ai aucune marge*/
   margin:0; /*Pour que la page n’ai aucune marge*/
   }
   
div#contenu {
   width:840px; /*Largeur du design*/
   margin:0 auto 0 -420px; /*Marges du design ( la 4eme marge représente la moitié de la largeur du div*/
   position:absolute;
   top:25px; /*25px entre le coin supérieur de l’écran et le design*/
   left:50%;/*50% de marge ( cela centrera le design )*/
   background-image:url('./images/background.jpg'); /*Motif si il y’en a un*/
   background-repeat:repeat; /*Duplication du motif sur les axes x et y*/
   border:1px solid #000000; /* Bordure encadrant le design */
   }
   
/* Reglages personnels : */
ul , li { margin:0; padding:0; list-style-type:none; } /* Pas de marges automatique dans les listes, ni de puces */

a { color:#2375BF; text-decoration:none; }/*Paramètres des liens*/
a:hover { color:#64A2EC; }/*Paramètres des liens quand le pointeur est sur ceux-ci*/

h1 { text-align:center; margin:0; }/*Le texte des balises h1 est centré ( car il est souvent utilisé pour les titres), et cette balise n’a plus de marge automatique */ 
p { margin:0; padding:0; }/*Pas de marges automatiques sur les <p> */

div.clear { clear:both; }/*Nous verrons ceci un peu plus tard. */
img { display:block ; border:0; }/*Aucune bordure sur les <img>*/

Vous devez modifier la largeur du " div contenu " ainsi que la marge se rapportant au même div afin que votre design soit centré.

Vous voilà à présent avec votre page HTML ainsi que votre page CSS : nous pouvons commencer à placer notre découpe.

Le header
Tout d’abord il y’a le header, ceci ne devrait pas poser de problème, insérez le en tant qu’image et le tour est joué, si vous avez divisé votre header en 2 parties il vous suffira juste de mettre 2 images ( notez l’utilité de la propriété " display:block ; " se rapportant aux images dans le CSS ; en effet cette propriété permet aux images de se superposer sans aucune marge entre elles et non d’être les unes a la suite des autres en ligne ).
Cela donne dans notre page HTML :

Code:

Le menu
Nous arrivons au menu de gauche, pour celui ci nous allons créer un div rien qu’à lui et l’identifier avec l’id " menu_gauche ":

Code:

<div class="menu_gauche">
</div>

Maintenant nous allons lui donner ses propriétés dans le CSS ; nous savons que le menu gauche possède un fond que nous avons enregistré ainsi que 2 parties ( celles du haut et du bas ).

Il faut également définir une largeur au menu, mais pas de hauteur étant donné que celui-ci est extensible.

Le menu gauche se trouve à gauche ( logique non ? :-)

), à droite il y’aura notre texte ; il faut donc faire " flotter " le menu à gauche sinon les divs menu et texte se superposeront.

Si dans votre design, le menu n’est pas collé au header et à la bordure gauche du design vous pouvez lui créer des marges :
Pour connaître les marges; dans votre logiciel utilisé pour la découpe ou se trouve votre design, vous pouvez créer un cadre de sélection entre le header et le menu ( la hauteur de cette sélection est donc la marge entre le header et le menu ) faites même avec la marge entre le bord gauche et le menu.

Code:

div.menu_gauche {
   background-image:url('./nom_du_repertoire/nom_de_limage.jpg') ;
   background-repeat:repeat-y ;
   width:XXpx; 
   float:left;
   margin-top:XXpx;
   margin-left:XXpx !important;
   margin-left:XXpx;
}

J’ai mis 2 valeur de " margin-left ", lorsqu’un div a une propriété float left ou float right, Internet Explorer a tendeance à doubler la valeur margin left ou right, pour cela le " !important " avant le " ; " fera en sorte que seul Mozilla liera cette propriété, la deuxième n’étant lue que par Internet Explorer.

Jusque la, cela ne devrait rien afficher.

Maintenant il nous manque la partie du haut et celle du bas :
On va aussi simplement que le header intégrer 2 <img> :

Code:

<div class="menu_gauche">
   <img src="./images/menu_haut.jpg" alt="" />
   <img src="./images/menu_bas.jpg" alt="" />
</div>

Vous devriez maintenant voir votre menu mais celui-ci est vide, c’est bien normal : le menu est extensible et vous n’avez rien mi à l’intérieur de celui-ci.

Code:

<div class="menu_gauche">
   <img src="./images/menu_haut.jpg" alt="" />
   <ul class="menus">
      <li>   <a href="#">Menu1</a>   </li>
      <li>   <a href="#">Menu2</a>   </li>
      <li>   <a href="#">Menu3</a>   </li>
      <li>   <a href="#">Menu4</a>   </li>
      <li>   <a href="#">Menu5</a>   </li>
   </ul>
   <img src="./images/menu_bas.jpg" alt="" />
</div>

Voilà votre menu commence à prendre forme, maintenant vous pouvez centrer le texte de votre <ul> grâce à la propriété " text-align:center; " que vous allez assigner à votre <ul>.

Question : Et si j’ai envie de mettre 2 menus à gauche ? Ha ha je t’en pose une colle :p

Reponse : Pas du tout :p Il suffit de simplement de copier :

Code:

   <img src="./images/menu_haut.jpg" alt="" />
   <ul class="menus">
      <li>   <a href="#">Menu1</a>   </li>
      <li>   <a href="#">Menu2</a>   </li>
      <li>   <a href="#">Menu3</a>   </li>
      <li>   <a href="#">Menu4</a>   </li>
      <li>   <a href="#">Menu5</a>   </li>
   </ul>
   <img src="./images/menu_bas.jpg" alt="" />

et de coller juste avant le " </div> ".

Mais ce n’est pas tout, entre les 2 copies il faut ajouter un " <div class= "separateur"></div> " auquel vous allez ajouter dans votre CSS :

Code:

div.separateur {
   height :XXpx ;
}

Sa hauteur définira la marge entre les 2 menus.

Voilà je crois que c’est à peu près tout pour le menu, les menus varient et ne sont pas tous de la même forme c’est pourquoi j’ai pris l’exemple le plus banal

.

Le texte
Comme je vous l’ai déjà dit, le cadre du texte est du même type que celui du menu de gauche.

On va donc créer un autre div :

Code:

<div id="texte">
</div>

Dans notre CSS nous y retrouverons la largeur de ce div, le float approprié ( ici « right » ) et les marges nécessaires :

Code:

div#texte {
   width :XXpx ;
   float :right ;
   margin-top :XXpx ;
   margin-right XXpx !important;
   margin-right:XXpx;
}

On retrouve notre fameux bug Internet Explorer ( j’ai comme l’impression que ceux qui n’étaient pas très fan de IE vont commencer à l’adorer

).
Cette fois on utilise un margin-right étant donné que le div flotte à droite.
Dans la partie HTML nous allons mettre les 2 parties ( haut et bas ) du cadre texte sous forme d'images :

Code:

<div id="texte">
   <img src="./images/texte_haut.jpg" alt="" />
   <img src="./images/texte_bas.jpg" alt="" />
</div>

A présent, nous allons y insérer du texte :

Code:

<div id= "texte">
   <img src="./images/texte_haut.jpg" alt="" />

   <h1>Titre</h1>
   <p>Blablabla…</p>
   <p>Blablabla…</p>
   <p>Blablabla…</p>
   <p>Blablabla…</p>

   <img src="./images/texte_bas.jpg" alt="" />
</div>

Voilà, le texte s’agrandie automatiquement en fonction de son contenu, reste à donner des espaces pour le texte car il est serré :

Code:

div#texte p {
   padding :15px ;
}

Changez la valeur jusqu’à ce qu’elle vous convient et le tour est joué

.

Le footer
Vous devez penser que le footer c’est un peu une reproduction du header ( une image et c'es oké ) : faux

.
En effet, le footer il est pas la que pour faire joli comme le header; il y’a un petit copyright qu’il ne faut pas oublier.
Pour commencer, créons un div pour le footer :

Code:

<div id="footer">
</div> 

Mettez en background de ce div votre image footer ( si cette image est à dupliquer répétez la ). Donnez au div les bonnes dimensions :

Code:

div#footer {
   background-image:url('./images/footer.jpg');
   background-repeat:repeat-x; /* ici répétition horizontale mais c’est a changer ou enlever selon l’image que vous avez enregistrer */
   width:XXpx;
   height:XXpx;
}

Il est possible que l’affichage ne fonctionne pas très bien, cela est du aux divs flottant qui se trouvent au dessus du footer.
Pour cela au dessus du même div nous allons mettre notre div clear qui se trouve sur la page CSS ; celui ci permet en quelque sorte de faire abstraction de tout ce qu’il ya au dessus.

Code:

<div class="clear"></div>
<div id="footer">
</div>

Maintenant nous allons insérer le copyright :
Il s’agit en fait d’une simple balise " <p> </p> " :

Code:

<div id="footer">
   <p class="copyright">Copyright – Design by <a href="#">XXXX</a></p>
</div>

Dans le CSS il suffit de faire de simples réglages ( centrer le texte, changer la taille du texte, la police , la couleur ) :

Code:

p.copyright {
   text-align:center;
   color:#000066;
   font-size:XXpx;
   font-family:Verdana;
   }

p.copyright a {
   color:#666666;
   text-decoration:underline;
   font-weight:bold; /* texte en gras */
   }

p.copyright a:hover {
   color:#FFFFFF;
   }

Voila c'est fini, je ne pense pas que ce tuto vous permettera de réaliser la découpe de tous les designs, mais les éléments importants y sont.

J’espère que ça vous aura aider

A bientôt.