Bonjour,

En pleine refonte de mon FTP, j'ai décidé de lui donner l'apparence d'un site web.
Ayant lu pas mal d'articles sur le net, une question me vient à l'esprit.

D'un coté, on fait un beau design photoshop qu'on découpe ( comme ici par exemple ) et on met tout ca dans Notepad++.

Inconvénient:
On se retrouve bien sûr avec un tas de <tr> <td></td> </tr> et, comme j'ai lu le post-it Tableau Vs. CSS cette méthode ne m'enchante pas trop. Je voudrais en effet un code le plus léger possible.

De l'autre côté, on a la méthode Alsacreations ( ), que l'on peut trouver ici qui aparemment, ne fait appel à aucun design "pré-établi" mais est un assemblage d'image.

1ere question : quelle méthode privilégier ? (je suis tenté de dire la seconde)
2ème question : peut-on adapter un design photoshop en remplacant les <tr> <td> par des <div>, ce qui nous donnerait une autre méthode : un design photoshop adapté en CSS et non plus organisé sous forme de tableau.

J'ai déja commencé et ca donne ce résultat. Le resultat est obtenu avec la méthode Alsacreations c'est à dire que des images et des <div>. Au passage cela me donne un .htm de 2 ko et un .CSS de 5ko (ca me parait beaucoup pour le peu d'affichage à l'écran non ?)

Merci de m'avoir lu jusqu'ici

Hello !

Personnellement, je ne vois pas bien le rapport entre la façon dont le design est créé et celle dont il est affiché. Je m'explique : tu le crées sous photoshop en entier et tu le découpes, tu te retrouves avec plein d'images. Tu le crées image par image, tu te retrouves avec plein d'images ;-) La découpe n'a vraiment d'intérêt que quand le design est "compact".

Ensuite que tu assembles tout ça avec des tableaux ou avec du CSS, le résultat visuel est le même. MAIS le code est plus facile à faire (surtout les sites dynamiques ou tu as un <table> ouvert dans une page et fermé dans une autre, bonjour le bordel). Je ne vais pas te refaire la liste des avantages et inconvénients des deux méthodes mais la principe est simple : un tableau ça sert à mettre des DONNEES. En clair, si tu peux pas afficher le contenu de ton tableau dans Excel, alors c'est pas un vrai tableau. Le reste en découle : facilité de codage, facilité de maintenance, facilité de changement de design, accessibilité, légèreté, compatibilité, lisibilité (essaye de modifier un site en tableaux après 3 mois, tu verras !!!), etc...

Quant à la taille des fichiers. Ce que tu as fait est encore très incomplet. Termine ta page et tu verras que ton .html aura grossi de quelques ko à peine, et ton CSS pareil, voire PAS DU TOUT. Refais la en tableau et compare :-)

Le CSS c'est un truc de faignants :p, t'as pas à réécrire 50.000 fois la même chose. Tes liens seront verts soulignés en rose partout mais tu n'aura pas eu à le réécrire à chaque lien !

Hello,

Pour faire un design je te conseille cette méthode. Je trouve que c’est la plus efficace et tu peux, grâce au CSS, changer les images, couleurs et autres décorations de toutes les pages de ton site rapidement . Je serais toi, je lirais le TP de M@teo21 qui te guide pas à pas pour faire le design de ton site.
Je dois dire que dans un design, je ne regarde pas en premier les images mais la créativité qu’il y a derrière. En gros : M@teo21 te donne les bases, c’est à toi d’apporter ta touche personnelle, ce qui donnera envie de visiter ton site. Pas la peine donc d’essayer de faire des designs tape à l’œil car c’est ce qu’on trouve souvent dans les premiers designs de débutant. Avec la technique de M@ateo21 (maniement des balises <div></div>) et les idées que t’apporteront le site alsacreations, je pense que tu arriveras à quelque chose de sympa.

Au plaisir

Merci pour ces réponses.
A la réflexion, ma question était un peu bête
Je me suis donc lancé dans les <div> </div> pour refaire le FTP.
Pour l'instant ca donne ca mais il n'y a pas grand chose d'opérationnel.
La "banierre" qui n'en est pas une et le "footer"...ben pareil en fait

Juste une question, qui touche au .xxx:before { content : ....; }.
J'ai utilisé cette méthode pour mettre les icones devant les noms de fichiers ( comme ici par exemple ). Mon problème, en utilisant " a:hover " pour souligner le lien au pasage de la souris, l'icone est également soulignée et j'aimerais qu'elle ne le soit pas.

Voila le code, tout simple :



Et le hmtl qui va avec :



Les &nbsp sont la pour espacer l'icone du nom.

J'ai essayé de mettre un "display:block" couplé avec un "border:none" sur le "content" mais sans succès, si qqun a une idée...


EDIT : Sous IE le design n'apparait pas correctement, la partie centrale se trouve en dessous des 2 dégradés latéraux. Je reglerai ce probleme plus tard ( d'ailleurs si qqun avait une idée, je poste le code si qqun veut bien m'aider ).

Salut.
tu ne peux pas enlever le soulignement puisque l'image fait partie integrante du lien avec le pseudo format before ,mets la plutot en background si ca ne pose pas de probleme

Salut
Tu veux dire avec un
"list-style-image: url(" "); " avec une icone différente pour chaque classe ?

Ou alors un "display:block" sur le lien couplé avec "image-background:url();" en "float:left" ?

De toute maniere je vais essayer tout ca des que possible. Merci du conseil