#1 aide mise en page site web

Rock Lee
Modérateur
Date d'inscription: 03-05-2008
Messages: 89

aide mise en page site web

Bonjour tout le monde

alors voici mon soucis , je pense avoir un bon niveau en programmation php , mais il y a un hic , le plus important dans la conception d'un site web c'est la mise en page et je suis nulle dedans hmm  .

ce que je voudrais faire :

- créer un design de site web avec The Gimp par exemple
- et ensuite le découper et le coder avec les feuilles de styles css


c'est dommage je fait des choses sympa mais avec une mise en page horrible hmm

Merci pour vos conseils wink

ps: la nouvelle version du site est vraiment bien smile
bravo DrNaBl wink

Dernière modification par Rock Lee (12-08-2009 17:57:23)


http://xeelkorcx.free.fr/xeelkload/upload/rockleesign.png

Hors ligne

Posté le 12-08-2009 17:55:15

 

#2 aide mise en page site web

DrNaBl
Administrateur
Date d'inscription: 03-10-2007
Messages: 503

Re: aide mise en page site web

Salut Rock Lee,

En ce qui me concerne pour la mise en page du site, je l'imagine tout d'abord en entier, et je fais sous theGimp, comme si on voyait la totalité de la page, avec la résolution souhaitée, en quelque sorte je dessine le site tel qui va apparaitre dans le navigateur.

Ensuite je commence à découpé chaque partie, et les sauvegarde séparément à savoir:
- bannière
- fond du menu
- fond du site
- pied
- fond grand titre
- fond élément du menu
etc...

Et je retiens les éléments qui doivent être répétés (fond du site, et fond du menu).

Une fois les images réunies, je passe au codage, du coté d'xHTML, je met en place les divs:

Code:

<div id="banniere"></div>
<div id="menu">
...
</div>
<div id="contenu">
...
</div>
<div id="pied">...</div>

Coté CSS, je complète chaque div pas à pas (code non complet):

Code:

#banniere
{
background-image: url("banniere.png");
background-repeat: no-repeat;
height: hauteur de l'image;
width: largeur de l'image;
}

#menu
{
background-image:url("fond_menu.png");
background-repeat: repeat-y;
width: largeur de l'image;
float:left;
}

#menu h3
{
background-image:url("titre_menu.png");
}

#contenu
{
background-image:url("fond_menu.png");
background-repeat: repeat-y;
width: largeur de l'image;
}

#pied
{
background-image:url("pied.png");
background-repeat: no-repeat;
height: hauteur de l'image;
width: largeur de l'image;
}

Voici donc comment je m'y prend, ensuite maintenant reste à voir le graphique et là il faut savoir quel type de site tu souhaite faire, jeux vidéos, mangas, tutoriels...

J'espère t'avoir un peu plus aider wink, mais il faudrait avoir un site d'exemple en main pour pouvoir mieux
appréhender le design wink.


Hors ligne

Posté le 13-08-2009 14:32:23

 

#3 aide mise en page site web

Rock Lee
Modérateur
Date d'inscription: 03-05-2008
Messages: 89

Re: aide mise en page site web

ok merci c comme je pensais faire

je vais essayer la semaine prochaine smile et je te tiens au courant

je n'ai pas trop le temps je te rexpliquerais tout en details la semaine prochaine

merci et a plus


http://xeelkorcx.free.fr/xeelkload/upload/rockleesign.png

Hors ligne

Posté le 18-08-2009 16:46:40

 

#4 aide mise en page site web

DrNaBl
Administrateur
Date d'inscription: 03-10-2007
Messages: 503

Re: aide mise en page site web

D'accord,

Je reste à ton écoute ^^.


Hors ligne

Posté le 18-08-2009 16:54:09

 

#5 aide mise en page site web

Rock Lee
Modérateur
Date d'inscription: 03-05-2008
Messages: 89

Re: aide mise en page site web

hello wink

pour donner un petit aperçu du site que je veux réaliser (design et contunu compris) , voici un lien

http://www.memoclic.com/apprendre-informatique.html

par la même occasion , je trouve ce site très sympa big_smile


http://xeelkorcx.free.fr/xeelkload/upload/rockleesign.png

Hors ligne

Posté le 23-08-2009 18:53:23

 

#6 aide mise en page site web

DrNaBl
Administrateur
Date d'inscription: 03-10-2007
Messages: 503

Re: aide mise en page site web

Rock Lee a écrit:

hello wink

pour donner un petit aperçu du site que je veux réaliser (design et contunu compris) , voici un lien

http://www.memoclic.com/apprendre-informatique.html

par la même occasion , je trouve ce site très sympa big_smile

Coté design c'est sûr que c'est un site très bien foutu ^^. Bon je te donne ma perception du design, il n'est peut-être pas construit de cette manière mais je pense qu'il est possible de créer qquechose ressemblant:
http://img91.imageshack.us/img91/3366/aideu.th.png
J'ai donc découpé le site comme sur l'image. La disposition des blocs en xHTML ressemblera grosso-modo à ça:

Code:

<body>
  <div id="header">
    <img src="banniere.png" />
    <ul>
          <li>menu lien 1</li>
          <li>menu lien 2</li>
          <li>menu lien 3</li>
          <li>menu lien 4</li>
          <li>menu lien 5</li>
    </ul>
  </div>
  <div id="bloc_recherche">
     ...
  </div>

  <div id="corps">
       /* si c'est fait sous la forme d'un tableau */
       <table>
           ....
       </table>
       /*Autre méthode avec bloc/news la propriété float:right; ou position:relative */
       <div class="news"> ... </news>
       <div class="news"> ... </news>
  </div>

  <div id="pub">
    .....
  </div>

  <div id="barre_news">......</div>
</body>

Côté CSS les propriétés importantes:

Code:

body
{
background-image:url(fond.jpg");
background-repeat:repeat-x;
}

header li
{
float:left;
}

#bloc_recherche
{
float:right;
}

#corps
{
width:500px;
}

.news
{
width:230px;
float:right;
}

#pub
{
float:right;
}

#barre_news
{
position:fixed;
bottom:0;
opacity:0.5;
}

Bon j'ai pas testé le code, il doit y avoir plein de trucs qui manque, mais j'ai mis les propriété particuliers dans le code CSS, il reste toutes lres propriétés en terme de margin, padding, width, height etc...

C'est juste que j'ai pas l'occasion de tout tester mais l'idée est là wink


Hors ligne

Posté le 24-08-2009 20:13:15

 

#7 aide mise en page site web

Rock Lee
Modérateur
Date d'inscription: 03-05-2008
Messages: 89

Re: aide mise en page site web

salut

merci pour l'analyse c'est ce qui me manque

je vais essayer en milieu de semaine


http://xeelkorcx.free.fr/xeelkload/upload/rockleesign.png

Hors ligne

Posté le 30-08-2009 11:08:19

 

#8 aide mise en page site web

DrNaBl
Administrateur
Date d'inscription: 03-10-2007
Messages: 503

Re: aide mise en page site web

OK, tiens moi au courant, le code que j'ai mis n'est vraiment pas sûr, j'ai pas l'occasion de le tester wink, il y a bcp de chose à modifier wink


Hors ligne

Posté le 31-08-2009 20:37:28

 

#9 aide mise en page site web

Rock Lee
Modérateur
Date d'inscription: 03-05-2008
Messages: 89

Re: aide mise en page site web

ok pas de soucis , la pour l'instant je suis en train de faire le design il a bien avancé mais c'est pas facile lol pour une première

je sais pas trop quelle dimension faire  pour l'image de tout le site (que je découperais après ) sachant que j'ai fait un design non extensible

une idée ?

merci wink


http://xeelkorcx.free.fr/xeelkload/upload/rockleesign.png

Hors ligne

Posté le 31-08-2009 20:43:33

 

#10 aide mise en page site web

DrNaBl
Administrateur
Date d'inscription: 03-10-2007
Messages: 503

Re: aide mise en page site web

Mmm, vu que c'est un design non extensible, mieux vaut choisir une taille le plus compatible avec laplupart des ordinateurs. Comme largeur je te conseillerai de mettre 800px pour être sûr que le site sera correctement lisible sur un Eee PC 7" ou tout autre netbook de cette taille offrant une résolution de 800x600, en sachant qu'en dessous de cette résolution c'est plutot les mobiles qui sont concernés wink


Hors ligne

Posté le 01-09-2009 13:41:35

 

#11 aide mise en page site web

Rock Lee
Modérateur
Date d'inscription: 03-05-2008
Messages: 89

Re: aide mise en page site web

et sur les pc fixe ou la résolution est souvent 1024 * 768  ou 1152*864 ou 1280 * 768

comment veront t'il le site ?

ps: quand tu me dit 800 px c'est la largeur , pour la hauteur je met ce qu'il me faut apres au decoupage ça sera adaptable ??

Merci wink


http://xeelkorcx.free.fr/xeelkload/upload/rockleesign.png

Hors ligne

Posté le 02-09-2009 13:03:25

 

#12 aide mise en page site web

DrNaBl
Administrateur
Date d'inscription: 03-10-2007
Messages: 503

Re: aide mise en page site web

Rock Lee a écrit:

et sur les pc fixe ou la résolution est souvent 1024 * 768  ou 1152*864 ou 1280 * 768

comment veront t'il le site ?
En fait le site sera centré, et donc les autres verrons toujours la même chose, sauf qu'ils auront des marges plus grandes dans les grandes résolutions, exemple:
Petite résolution:
http://img188.imageshack.us/img188/7643 … lution.png
Grande résolution:
http://img90.imageshack.us/img90/7286/g … lution.png

ps: quand tu me dit 800 px c'est la largeur , pour la hauteur je met ce qu'il me faut apres au decoupage ça sera adaptable ??
Tout a fait wink
Merci wink


Hors ligne

Posté le 03-09-2009 14:48:29

 

#13 aide mise en page site web

Rock Lee
Modérateur
Date d'inscription: 03-05-2008
Messages: 89

Re: aide mise en page site web

ok merci

c'est clair , net et précis smile

je n'ai pas encore suffisamment de temps , je vais attendre un peu avant de continuer mon site web .

à plus


http://xeelkorcx.free.fr/xeelkload/upload/rockleesign.png

Hors ligne

Posté le 07-09-2009 11:07:17

 

#14 aide mise en page site web

DrNaBl
Administrateur
Date d'inscription: 03-10-2007
Messages: 503

Re: aide mise en page site web

Pas de soucis wink


Hors ligne

Posté le 07-09-2009 19:39:59

 

Pied de page des forums

Propulsé par FluxBB
Traduction par fluxbb.fr