12 novembre 2007 à 22:14

[Tuto4]L'architecture du blog grace au code

Pour pouvoir modifier le design d'un blog, il faut regarder comment celui-ci est architecturé. Pour le blog, c'est facile. En règle général, il suit certaines normes sans lesquels les utilisateurs deviennent vite perdu. Néanmoins, pour ceux qui aiment sortir du lot, cela peut être un véritable bonheur...

Le blog se divise en 6grosses parties.

Le container: <div id="container">...</div>
Il contient tout le site. Vous constaterez alors qu'il porte bien son nom.

Deux petites choses a signaler:
Le fait de donner une id a notre div, c'est du CSS. J'en parle depuis le début, il fallait bien qu'il arrive.
On a deux possibilités en CSS, les classes (class) et les identifiants (id) La grande différence est qu'un id est UNIQUE sur la page, et une classe peut être affichée plusieurs fois. On les distingues dans la feuilles de style par un point (.) pour les classes et un dièse (#) pour les id.
Ca c'était pour la premiere petite chose, maintenant la seconde: si vous travailez votre site et rajoutez des classes ou id, veillez à toujours leur mettre un nom cohérant et simple. Cela permettra a n'importe qui de ne pas se perdre dans le code par la suite.


Pour en revenir au container, il permet de définir où se placera le blog. A savoir par défaut au centre, avec une largeur de 800px. On peut après facilement le déplacer, le mettre plus ou moins large, lui mettre une bordure ou pas, changer sa couleur etc, etc...

La bannière: <div id="topbar-logo">...</div> et <div id="topbar"> ...</div>
Oui, pour la bannière, il y'a 2 div. C'est pour simplifier la vie. topbar-logo est active quand vous mettez une image dans la bannière. Sinon, c'est topbar qui est actif. On peut après bien sur décider d'afficher les deux. Pratique pour avoir une image qui peut changer souvent sans avoir a devoir se casser trop la tête avec un logiciel de retouche.

Le menu gauche: <div id="leftbar">... </div>
Il contient les "blocs" comme les appelle CB. A part ça, rien de spécial à dire. Elle est positionné à gauche... Et si vous touchez le CSS, faites que ce soit toujours le cas. Sinon, hé bien créez un nouvel id spécifique.

Le contenu: <div id="content">...</div>
Hé bien c'est dans cette div que s'affichent tous vos billets tout simplement.

Le menu de droite: <div id="rightbar">...</div>
Comme pour leftbar, mais à droite. même remarque sur l'importance du nom/position.

Le pied de page: <div class="clear">&nbsp;</div>
Un blog n'en a pas... Mais la classe clear au final a cette fonction... Si vous voulez en rajoutez un, retravaillez cette classe.  Je n'en sais pas beaucoup plus sur le pourquoi du comment de sa présence ici... Mais c'est comme ça que je l'expliquerai en tout cas...

Voila, vous avez les 6 grosses boites du blog. C'est avec ça qu'on va s'amuser maintenant.
La chose et maintenant clair entre nous.
Prochaine étape:
header et bannière à la loupe

- Tuto - Commentaires [0] - Permalien [#]

Commentaires

Poster un commentaire