Så här konverterar du en PSD till XHTML

Jag fortsätter att bli förvånad över hur bra Collis '"Build a Sleek Portfolio Site From Scratch" fortsätter att utföra. Det har varit månader, men det lägger fortfarande in starka siffror varje vecka. Med tanke på det faktum bestämde jag mig för att skapa en skärmdump som visar dig exakt hur man konverterar en PSD till perfekt XHTML / CSS.




Del 1: Skärning av PSD och skapande av XHTML

Del 2: CSS

Jag ljuger inte för dig. Den här videon är lite tråkig. Det är bara inte kul att se någon ange marginalvärden i trettio minuter. :) Men det är viktigt.

Del 3: Implementera en bit av Javascript

Del 4: Kicking IE6's Butt

Kunde vi verkligen kalla oss webbutvecklare om vi inte behövde slåss med IE6? Och är det ett slump att "6" också är det som är associerat med djävulen? Vem vet.

För det mesta ser webbplatsen bara bra ut i IE6, men vi borde ändra ett par quirks. Skapa ett nytt stilark och kalla det "ie6.css". Placera den i din CSS-mapp. Klistra sedan in följande.

#container #mainContent # tier2 margin-bottom: 273px! viktigt;  # tier3 #news position: relative; vänster: .56em;  #header height: 158px;  #header #login top: 1em; höger: 1.5em; 

Det finns inget som vi verkligen behöver gå över. För det mesta justerar jag positioneringen av några element.

Det sista steget är att referera till vårt nya stilark i huvudetiketten för vårt dokument.

 

PSD

Webbplatsen: 100% XHTML och CSS

Jag hoppas det hjälpte dig. Alla har sitt eget sätt att göra saker; Så jag skulle vara intresserad att höra dina tankar. Denna handledning var ett stort företag. Jag skulle uppskatta en Digg om du tyckte att det var fördelaktigt.

  • Prenumerera på NETTUTS RSS-flödet för fler dagliga webbutvecklingstoppar och artiklar.