Den ultimata guiden för att skapa en design och konvertera den till HTML och CSS

Denna skärmdump kommer att fungera som den slutliga posten i en serie med flera delar på TUTS-sidorna som visar hur man bygger en vacker hemsida för ett fiktivt företag. Vi lärde oss hur man skapar wireframe på Vectortuts +; Vi lade till färg, texturer och effekter på Psdtuts +; nu tar vi vår färdiga PSD och konverterar den till en snyggkodad HTML- och CSS-webbplats.

Observera att även om du inte har läst de två första handledningarna kommer du att kunna följa med den här videon ganska enkelt.


Uppdatering

Observera att denna handledningsserie ursprungligen publicerades på Nettuts + ungefär trettio dagar sedan. Men det har nyligen kommit till min uppmärksamhet att många av er hade problem med att titta på skärmen för avsnitt 3. Detta har nu lösts. Njut av!



Del 1: Bygg en reklam iPhone App Website Wireframe i fyrverkerier




Del 2: Skapa en iPhone-appwebbplats i Photoshop




Del 3: Konvertera vår design till en snyggkodad HTML- och CSS-webbplats

  • Sektion 1: Skärning av PSD - 00:00
  • Sektion 2: Kodning av Markup - 18:43
  • Avsnitt 3: Lägga till CSS - 47:11

Andra visningsalternativ

  • iTunes / Nedladdningsbar version

Serie Komplett!

Om du följde för hela serien så gratulerar vi till! Om du tycker om idén om tutorial-serien "som spänner över flera TUTS-webbplatser, var hög och låt oss veta! Jag hoppas att du lärt dig lite från denna tredje posten; och tack igen till Sean Hodge (Psdtuts + / Vectortuts + redaktör) för att skriva de två första handledningarna i denna serie.

  • Följ oss på Twitter, eller prenumerera på Nettuts + RSS-flödet för de bästa webbutvecklingsstudierna på webben.