Comment convertir un fichier PSD en XHTML

Je continue d’être émerveillé par la façon dont le tutoriel «Construire un site portfolio élégant à partir de rien» de Collis continue de fonctionner. Cela fait des mois, et pourtant, il affiche toujours de bons chiffres chaque semaine. Compte tenu de ce fait, j'ai décidé de créer un screencast qui montre exactement comment convertir un fichier PSD en XHTML / CSS parfait..




Partie 1: Découper le PSD et créer le XHTML

Partie 2: CSS

Je ne vais pas vous mentir. Cette vidéo est un peu ennuyeuse. Ce n'est pas amusant de regarder quelqu'un entrer les valeurs de la marge pendant trente minutes. :) Mais c'est essentiel.

Partie 3: Implémenter un peu de Javascript

Partie 4: Donner un coup de pied au cul d'IE6

Pouvons-nous vraiment nous appeler des développeurs Web si nous n'avions pas à nous battre avec IE6? Et est-ce une coïncidence que "6" soit aussi le nombre associé au diable? Qui sait.

La plupart du temps, le site semble très bien dans IE6, mais nous devrions changer quelques bizarreries. Créez une nouvelle feuille de style et appelez-la "ie6.css". Placez-le dans votre dossier CSS. Puis coller dans le suivant.

#container #mainContent # tier2 margin-bottom: 273px! important;  # tier3 #news position: relative; à gauche: .56em;  #header height: 158px;  #header #login top: 1em; à droite: 1,5em; 

Il n'y a rien que nous devons vraiment aller au-dessus. Généralement, j'ajuste le positionnement de quelques éléments.

La dernière étape consiste à référencer notre nouvelle feuille de style dans la balise head de notre document.

 

Le PSD

Le site Web: 100% XHTML et CSS

J'espère que cela vous a aidé. Chacun a sa propre façon de faire les choses; Je serais donc intéressé d'entendre vos pensées. Ce tutoriel était une entreprise énorme. J'apprécierais un Digg si vous le trouviez bénéfique.

  • Abonnez-vous au flux RSS NETTUTS pour plus de commentaires et d'articles sur le développement Web au quotidien.