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 .
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
Merci pour vos conseils
ps: la nouvelle version du site est vraiment bien
bravo DrNaBl
Dernière modification par Rock Lee (12-08-2009 17:57:23)
Hors ligne
Posté le 12-08-2009 17:55:15
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:
<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):
#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 , mais il faudrait avoir un site d'exemple en main pour pouvoir mieux
appréhender le design .
Hors ligne
Posté le 13-08-2009 14:32:23
ok merci c comme je pensais faire
je vais essayer la semaine prochaine 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
Hors ligne
Posté le 18-08-2009 16:46:40
D'accord,
Je reste à ton écoute ^^.
Hors ligne
Posté le 18-08-2009 16:54:09
hello
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
Hors ligne
Posté le 23-08-2009 18:53:23
Rock Lee a écrit:
hello
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
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:
J'ai donc découpé le site comme sur l'image. La disposition des blocs en xHTML ressemblera grosso-modo à ça:
<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:
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à
Hors ligne
Posté le 24-08-2009 20:13:15
salut
merci pour l'analyse c'est ce qui me manque
je vais essayer en milieu de semaine
Hors ligne
Posté le 30-08-2009 11:08:19
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 , il y a bcp de chose à modifier
Hors ligne
Posté le 31-08-2009 20:37:28
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
Hors ligne
Posté le 31-08-2009 20:43:33
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
Hors ligne
Posté le 01-09-2009 13:41:35
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
Hors ligne
Posté le 02-09-2009 13:03:25
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
Merci
Hors ligne
Posté le 03-09-2009 14:48:29
ok merci
c'est clair , net et précis
je n'ai pas encore suffisamment de temps , je vais attendre un peu avant de continuer mon site web .
à plus
Hors ligne
Posté le 07-09-2009 11:07:17
Pas de soucis
Hors ligne
Posté le 07-09-2009 19:39:59