28 novembre 2007 à 21:29

[PasàPas]Découpage

Let's go.
Bon on va pas attaquer la mise en page de suite. C'est pas que ca prenne spécialement de temps ou autre. Je l'ai sauvegarder sur mon disque dur le CSS pour l'installation. Mais c'est que je ne sais pas trop comment expliquer le truc encore...

Mais bon, hier j'ai pas eu le temps de venir (pis j'ai essayé de me coucher avant 1h du mat) et donc aujourd'hui, on passe à la suite.

Vous vous souvenez de l'image que j'ai faite. C'est a quelques petits détails prêt ce à quoi va ressembler le blog. Cette technique a comme bel avantage de certe prendre du temps à réaliser, mais une fois fait, c'est super rapide de le mettre en place (m'a fallut 1petite heure pour modifier le CSS).

Il ne faut pas perdre de vue le profil général du blog. En schématisant le truc, on obtient ceci:
plan
On va donc découper l'image en conséquence.

Sur mon ordi, j'ai tout fait par calque. je commence par enlever la feuille de houx, le titre et le texte et je sors la bannière. jpg ou png, pas d'importance vu qu'il n'ya pas de transparence (car je sauve avec le fond blanc. j'aime pas, mais vu que le png est encore mal supporté par IE...) en isolant la feuille de houx, et la canne de sucre je les sauvegarde cette fois en png. pis flute à IE!!! z'avez qu'a prendre firefox, na!

Ensuite et bien je relève également la couleur de fond du content (donc le bleu) et la couleur des bordures.

Ce qu'on va faire ensuite, c'est mettre l'image de bannière en bannière (logique, hein?) puis mettre les bordures à droite et à gauche du content. Car le menu, comme je l'ai dit dans le billet précédent sera intégrer à part. Rapport a ce que le menu ne s'étire pas sur toute la hauteur, et j'aime pas ça.
Les bordures de largeur 1px seront de la même couleur que celle de l'image, ce qui rendra la transition totalement invisible. De même pour la couleur du contenu, qui sera la même que dans la bannière. donc on ne saura pas vraiment ou se finit la bannière et ou commence le content. Bien sur dans l'exemple c'est très simple. car la finition de l'image coïncide avec la finition de la bannière. Mais pour le bamboo ou chez mamina, la tecnique est autre. on fini réellement l'image dans le content.

Donc maintenant, vous avez les images individuelles. il vous suffit de cliquer sur le liens, puis clic droit/enregistrer sous... pour que vous l'acquériez. Mais comme le CSS travail avec les adresses url, vous pourrez aussi bien les laisser sur mon ftp. c'est vous qui voyez.

fin!

Mais je vais faire encore un truc... je vais modifié mon blog pour que vous voyez bien ou se finissent les partis.
Ca n'a aucun rapport avec le tuto, c'est un bonus pour comprendre l'architecture. Je fais ça dans l'instant.

Tiens c'est marrant quand même... quand je fais un truc bien moche, avec pleins de couleurs et des bordures partout, on dirait un blog d'un gars lambda...

- Tuto - Commentaires [1] - Permalien [#]

Commentaires

    J'aime bien ta bannière ambiance Noël!!! Merci pour le schema du profil du blog... c'est plus compréhensible maintenant!

    Par Clairechen, 03 décembre 2007 à 09:36

Poster un commentaire