Den ultimate guiden til å lage et design og konvertere det til HTML og CSS

Denne skjermbildet vil fungere som den endelige oppføringen i en serie med flere deler på tvers av TUTS-nettstedene som viser hvordan man bygger en vakker hjemmeside for en fiktiv virksomhet. Vi lærte å lage wireframe på Vectortuts +; Vi la til farge, teksturer og effekter på Psdtuts +; Nå tar vi vår fullførte PSD og konverterer den til et pent kodet HTML- og CSS-nettsted.

Vær oppmerksom på at selv om du ikke har lest de to første veiledningene, vil du kunne følge med denne videoen ganske enkelt.


Oppdater

Vær oppmerksom på at denne opplæringsserien opprinnelig ble publisert på Nettuts + om tretti dager siden. Men det er nylig kommet til min oppmerksomhet at mange av dere hadde problemer med å se screencast for seksjon 3. Dette har nå blitt løst. Nyt!



Del 1: Bygg et salgsfremmende iPhone App Nettsted Wireframe i fyrverkeri




Del 2: Opprett et salgsfremmende iPhone App-område i Photoshop




Del 3: Konvertere vårt design til et pent kodet HTML- og CSS-nettsted

  • Seksjon 1: Slicing PSD - 00:00
  • Seksjon 2: Koding av Markup - 18:43
  • Seksjon 3: Legge til CSS - 47:11

Andre visningsalternativer

  • iTunes / Nedlastbar versjon

Serie Fullført!

Hvis du fulgte etter for hele denne serien, er gratulasjoner i orden! Hvis du liker ideen om opplæringsserier 'som spenner over flere TUTS-nettsteder, vær høyt og gi oss beskjed! Jeg håper du lærte litt fra denne tredje oppføringen; og takk igjen til Sean Hodge (Psdtuts + / Vectortuts + redaktør) for å skrive de to første opplæringene i denne serien.

  • Følg oss på Twitter, eller abonner på Nettuts + RSS-feed for de beste webutviklingsopplæringene på nettet.