Slik konverterer du en PSD til XHTML

Jeg fortsetter å bli overrasket over hvor bra Collis '"Build a Sleek Portfolio Site From Scratch" fortsetter å utføre. Det har vært måneder, men det legger fortsatt inn sterke numre hver uke. Med tanke på det faktum bestemte jeg meg for å lage en screencast som viser deg nøyaktig hvordan du konverterer en PSD til perfekt XHTML / CSS.




Del 1: Skarver PSD og oppretter XHTML

Del 2: CSS

Jeg vil ikke lyve for deg. Denne videoen er litt kjedelig. Det er bare ikke morsomt å se noen angi marginverdier i tretti minutter. :) Men det er viktig.

Del 3: Implementere litt av Javascript

Del 4: Kicking IE6's Butt

Kan vi virkelig ringe oss selv webutviklere hvis vi ikke måtte kjempe med IE6? Og er det et tilfeldighet at "6" også er nummeret forbundet med djevelen? Hvem vet.

For det meste ser nettstedet fint ut i IE6, men vi bør endre noen få quirks. Opprett et nytt stilark og ring det "ie6.css". Plasser den i CSS-mappen din. Lim deretter inn følgende.

#container #mainContent # tier2 margin-bottom: 273px! viktig;  # tier3 #news posisjon: relative; igjen: .56em;  #header height: 158px;  #header #login top: 1em; høyre: 1.5em; 

Det er ingenting vi virkelig trenger å gå over. For det meste justerer jeg plasseringen av noen få elementer.

Det siste trinnet er å referere til vårt nye stilark i hovedetiketten til dokumentet vårt.

 

PSD

Nettstedet: 100% XHTML og CSS

Jeg håper dette hjalp deg. Alle har sin egen måte å gjøre ting på; Så jeg ville være interessert i å høre tankene dine. Denne opplæringen var et stort oppdrag. Jeg vil sette pris på en Digg hvis du synes det er gunstig.

  • Abonner på NETTUTS RSS-feed for flere daglige webutviklinger og artikler.