Découpe design

La découpe de design est un sujet qui revient fréquemment et sur lequel on trouve assez rarement de réponses satisfaisantes.
On retrouve souvent comment faire du découpage rapide grâce à photoshop.

Petite précision avant de commencer, il n’y aura pas d‘apprentissage CSS, en effet l’objectif de l’article est d’apprendre à découper un design.

Premiere etape : determination des blocs principaux

La première étape consiste à déterminer les grands blocs principaux ; ce sont ces derniers qui structurent votre site.

A première vue on distingue assez facilement trois grands blocs :

• le header
• la sidebar de gauche
• le contenu central

Ceci est vrai, mais en css, la notion de bloc conteneur est omniprésente.Les blocs conteneurs composent une hiérarchie d’imbrication.
Dans notre exemple on voit bien que j’ai déterminé 4 bloc principaux. Le bloc conteneur global, appelé aussi « parent » contient deux blocs « fils » qui sont la sidebar de gauche et le contenu central.

Pourquoi avoir choisi d’englober ces deux blocs dans un bloc global ?
Tout simplement pour leur appliquer des restrictions.

En effet nous ne voulons pas que les deux calques « fils » puissent prendre une taille supérieure à leur « parent » si le contenu devient trop long par exemple.
La propriété de taille que nous appliquerons au calque « parent » fera que les deux calques « fils » ne pourront être plus large que leur « parent ». (attention à la propriété position bien évidemment)

On voit donc bien que la notion de bloc conteneur est importante , et permet de composer la hiérarchie d’imbrication.

Deuxième étape : codage xHTML/CSS de ces blocs

Comme nous l’avons vu dans notre première étape le fait d’avoir déterminé 4 blocs principaux fait que dans notre code xHTML nous avons 4 <div></div>dont la structure respectera celle déterminée dans la première étape.

Le code met bien en relief le fait que le div appelé « conteneur-central » qui est le bloc conteneur, comprend bien deux autres blocs « fils ».
Vous pouvez essayer d’augmenter width pour contenu-central et sidebar-gauche et vous verrez que le bloc ne dépassera jamais le conteneur « parent », cela vous permet de voir concrètement le rôle des blocs conteneurs.
Vous pouvez télécharger le design actuel sur le lien suivant design bloc global

Troisième étape : fractionner chaque bloc et codage

Maintenant que l’on a nos gros blocs, on va les fractionner à leur tour.

1) fractionnement du header

On distingue trois parties pour notre bloc header :

• un bloc affichant le logo
• un bloc pour le menu
• un bloc pour le champ de recherche

Cela va donc induire l’introduction de trois nouvelles balises <div></div> et de leur code css pour le bloc « header ».

Vous pouvez télécharger le design actuel sur le lien suivant Bloc + header.

2) fractionnement de la sidebar de gauche

On distingue trois blocs de structures identiques, chacun composés de deux blocs comme on le voit sur l’image :

• un bloc que j’appellerai « l’arrondi grisé »
• un bloc que j’appellerai « sous l’arrondi grisé »

3) Fractionnement du contenu central

Si vous voulez vous exercez à découper en bloc le contenu-central, joignez en commentaire votre image bien départagé et cela permettra d’en discuter.

Décomposez vos blocs parties par parties, et documentez vous sur le CSS et vous verrez que dès que vous avez la logique, le codage n’est pas le plus compliqué, bien au contraire.

P .S : pour le fractionnement 2) et 3) il vous suffit d’afficher le code source de mon site, si cela peux vous aider à avancer.