[HTM+CSS] Faire un site web "propre"

Bonjour,

Depuis quelques années, je galère lorsque je doit “découper” un site web fait au préalable sous photoshop. En effet, comme pas mal de personnes j’utilise Fireworks de Macromédia, qui me fait une découpe automatique assez dégeulasse avec des cadres dans tous les sens, et ça devient vraiment bordélique dès que le visuel du site est assez détaillé.

Cette année, je doit faire un site web en projet de fin d’année, et j’aimerai en profiter pour apprendre a faire quelque chose de propre.

J’ai commencé a lire “CSS2 : pratique du design web” fait par ce monsieur, et j’aimerai savoir si vous connaissez d’autres bouquins sur le CSS/HTML qui seraient succeptibles de m’aider a passer proprement d’un .PSD a un .htm.

J’ai bien sur fait un tour dans une grande librairie du coin, mais je n’ai pas trop trouvé ce que je recherchait, la majeure partie des livres étant consacrés a l’utilisation de logiciels comme Frontpage ou Dream.

Merci d’avance,

Osh.

[quote=“Oshimura, post:1, topic: 30852”]Bonjour,

Depuis quelques années, je galère lorsque je doit “découper” un site web fait au préalable sous photoshop. En effet, comme pas mal de personnes j’utilise Fireworks de Macromédia, qui me fait une découpe automatique assez dégeulasse avec des cadres dans tous les sens, et ça devient vraiment bordélique dès que le visuel du site est assez détaillé.

Cette année, je doit faire un site web en projet de fin d’année, et j’aimerai en profiter pour apprendre a faire quelque chose de propre.

J’ai commencé a lire “CSS2 : pratique du design web” fait par ce monsieur, et j’aimerai savoir si vous connaissez d’autres bouquins sur le CSS/HTML qui seraient succeptibles de m’aider a passer proprement d’un .PSD a un .htm.

J’ai bien sur fait un tour dans une grande librairie du coin, mais je n’ai pas trop trouvé ce que je recherchait, la majeure partie des livres étant consacrés a l’utilisation de logiciels comme Frontpage ou Dream.

Merci d’avance,

Osh.[/quote]

Je vais répondre un peu à côté de la plaque. Je sais pas si ca vaux le coup de prendre un bouquin. Avec un peu de jugeotte ca devrait faire l’affaire. Enfin, moi je fais ca comme ca depuis des années et ca marche :

1/ Enregistrer une version de travail avec tous les calques sous un nom temporaire (histoire d’avoir une référence).
2/ Identification de quels morceaux vont où (par exemple, le logo et le fond du logo, associés ou pas ?)
3/ Découpe, à la main (outil recadrage), d’un des element (par exemple le logo (ou le logo et son fond))
4/ Enregistrement et optimisation
5/ Intégration dans ton éditeur HTML préféré.
6/ Eventuellement, enregistrement d’un fichier intermédiaire (si par exemple tu fusionne deux calques pour obtenir un effet particulier en plus, que tu risque de devoir reproduire dans le futur)
7/ Retour à 3.

En gros, avant de faire ta découpe, tu dois savoir quel morceau va comment. Pour reprendre l’exemple du logo, est-ce que tu le met dans un , en background d’un , etc. et ce que ca implique au niveau de ton découpage. Après, ca peut aussi être du trial & error si t’a pas encore assez de recul à ce niveau là. Tu tente différent trucs (de l’importance des fichiers intermédiaires) et tu regarde ce qui marche le mieux, les problemes que ca pose, les avantages que ca présente, etc. Tu en apprendra infiniment plus comme ca qu’en lisant un guide didactique dans un bouquin.

My two cents.

Ce bouquin est ce qui ce fait de mieux sur le sujet (en français), que veux-tu de plus ? Tu peux peut-être aller voir du côté d’O’Reilly, pour avoir des gros bouquins plus détaillés sur XHTML et CSS.

Voilà en gros comment je bosse, pour un site en 3 colonnes :
un div container qui englobe tout et permet de centrer la page (avec margin: 0 auto)
un h1 pour le logo (avec un a en display: block)
un ul navigation (avec une classe clearfix et des li en float: left)
un div main qui engloble les 3 colonnes (avec une classe clearfix)
un div left pour la colonne de gauche (float: left)
un div content pour le contenu (float: left)
un div right pour la colonne de droite (float: left)
un ul footer

Merci pour vos réponses, je vais finir de lire le livre sur le CSS et j’essayerai de tenir compte de vos conseils !