[2 étape] Découper son site web

[boulledogue]

Bonjour tout le monde,

Totalité du tuto

[1 étape] Créer son design web
[2 étape] Découper son site web
[3/derniere etape] Codons notre design

Nous allons désormais apprendre à

Découper son design web en vue de le coder

Commençons dès maintenant

Enregistrez vos images dans un dossier appelé images pour aller plus vite

Pour ce tuto, aucun screenshot. C'est vous qui devez vous en sortir. Je vous explique la procédure.

Pour le background (le fond):

Venez sur l'arrière plan, et sélectionnez rectangulairement le fond, copiez (Ctrl+C), ouvrez un nouveau document (Ctrl+N), cliquez directement sur OK, puis collez (Ctrl+V), enregistrez (Ctrl+S) sous un nom facile.. J'ai obtenu ceci:
http://desopilo.olympe-network.com/cree ... ground.jpg

Pour le header:

Fusionnez le calque où se trouve le reflet avec l'arriere plan et avec le rectangle blanc, celui où on a dit qu'on mettrait le texte plus tard ;)
Avec l'outil sélection rectangulaire, sélectionnez un carré du header, copiez (Ctrl+C), ouvrez un nouveau document (Ctrl+N), cliquez directement sur OK, puis collez (Ctrl+V), enregistrez (Ctrl+S) sous un nom facile.
Voilà ce que j'ai pour moi:
http://desopilo.olympe-network.com/cree ... header.jpg

Pour l'onglet

, fusionnez le calque où se trouve l'onglet avec l'arrière plan, sélectionnez rectangulairement l'onglet, et même démarche qu'avec le header/background. J'ai eu ca moi:
http://desopilo.olympe-network.com/cree ... onglet.jpg

Attention: Pour l'onglet, vous devrez peut-être modifier la largeur. Image=>Taille de l'image=>Décocher la case "Garder les proportions"=>Rentrer les nouvelles données

Pour le footer

, sélectionnez le avec l'outil de sélection rectangulaire, et même démarche pour l'enregistrement. Voilà ce que j'ai:
http://desopilo.olympe-network.com/cree ... footer.jpg

Vous avez maintenant 4 images dans un dossier appelé images.
On se revoit bientôt pour la 3eme et dernière étape de mon grand tutoriel, [3 étape] Coder son design!
@+
Boulledogue

[Gaara]

Salut boulledogue !

C'est très courageux de te lancer dans un si gros tuto !
J'interviens juste pour dire aux utilisateurs de The Gimp (par exemple ) qu'ils peuvent aussi suivre ton tuto, ça marche de la même façon !

D'ailleurs j'avais fait un mini-tuto pour les utilisateurs de The Gimp [ici].

Voilà voilà, bonne chance !

Gaara

[boulledogue]

Salut Gaara

ALors tu vas rire, mais en fait, j'ai un probleme avec Gimp, il ne fonctionne plus oO. En fait, il suffit de redémarrer le pc, mais j'avais des téléchargements en cours cette journée ... xD

Alors en fait, ca serait bien que tu me joignes car tu vas rire, mais j'arrive pas à coder le design (xD) aide-moi s'il te plait^^
Boulledogue

[Gaara]

Alors en fait, ca serait bien que tu me joignes car tu vas rire, mais j'arrive pas à coder le design (xD) aide-moi s'il te plait^^

Où est-ce que tu bloques ? ^^'

Remarques :

• Tu as fait un arrière plan en dégradé mais 80% est caché par la partie centrale en blanc.
• Il n'est pas extensible en hauteur vu que c'est un dégradé
• Pourquoi tu ne coupes pas le haut et le bas du background et tu les met respectivement en arrière plan du header et du pied de page ?
  -> Le design serait extensible en hauteur et ça te facilitera vraiment la tâche !
• Ton code se présenterait de cette manière (bon les balises n'existent pas hein) :
  
  <header>
  ton header avec le haut de ton image background en arrière plan (repeat-x) comme je t'ai dit plus haut et tu peux placer cette imagetout simplement dans la div (tu peux la couper au milieu d'ailleurs)
  <menu>ton menu </menu>
  </header>
  
  <milieu>
  Là c'est la partie blanche avec ton texte
  </milieu>
  
  <footer>
  ton pied de page avec le bas de ton image background en arrière plan (repeat-x).
  </footer>

Voilà je sais pas si tu as compris mais c'est pas évident à expliquer Et puis je connais pas trop ton niveau en xhtml/css
Sinon envoie moi ton design en taille réelle et je m'en occupe . (mais faut que je sache si il doit être extensible en largeur, en hauteur, etc...)

[boulledogue]

Salut Gaara,
J'ai du modifier quelques détails donc devrai modifier les premières étapes du tuto
Voici ce que ca donne:
http://guillaumenormand.fr.tc/creer_sit ... _site_web/

Voilà, je ferai la partie 3 du tuto demain ou après demain
Dites moi ce que vous en pensez
@+
Boulledogue
Edit: comment faire pour centrer le site sans mettre une marge?

[ferrol]

je ne conprent rien

[Black]

je ne conprent rien

Pourrais-tu développer un peu plus ?

[MultiUser]

Salut @ tous,

belle initiative et merci aussi à Gaara pour ses précisions

par contre les liens de redirection des images sont morts ...

Code: Tout sélectionner

http://desopilo.olympe-network.com/creer_site_web/creer_site_web/images/background.jpg
http://desopilo.olympe-network.com/creer_site_web/creer_site_web/images/background_header.jpg
http://desopilo.olympe-network.com/creer_site_web/creer_site_web/images/background_header.jpg
http://desopilo.olympe-network.com/creer_site_web/images/footer.jpg

Bonne journée

[yajuve]

thanks