De ultieme gids voor het maken van een ontwerp en het converteren naar HTML en CSS

Deze screencast zal dienen als het laatste item in een meerdelige serie op de TUTS-sites, die laat zien hoe je een prachtige startpagina kunt maken voor een fictief bedrijf. We hebben geleerd hoe je het draadframe op Vectortuts + kunt maken; we hebben kleur, texturen en effecten toegevoegd aan Psdtuts +; nu nemen we onze voltooide PSD en zetten deze om in een mooi gecodeerde HTML- en CSS-website.

Houd er rekening mee dat, zelfs als u de eerste twee zelfstudies niet hebt gelezen, u deze video gemakkelijk kunt volgen.


Bijwerken

Houd er rekening mee dat deze serie tutorials ongeveer zestig dagen geleden oorspronkelijk op Nettuts + werd geplaatst. Het is echter onlangs onder mijn aandacht gekomen dat velen van jullie problemen hadden met het bekijken van de screencast voor Sectie 3. Dit is nu opgelost. Genieten!



Deel 1: Bouw een promotionele iPhone-app Website wireframe in Fireworks




Deel 2: maak een promotionele iPhone-app-site in Photoshop




Deel 3: Ons ontwerp converteren naar een mooi gecodeerde HTML- en CSS-website

  • Sectie 1: De PSD snijden - 00:00
  • Sectie 2: Codering van de markup - 18:43
  • Sectie 3: De CSS toevoegen - 47:11

Andere weergaveopties

  • iTunes / downloadbare versie

Series voltooid!

Als je deze hele reeks hebt gevolgd, zijn de felicitaties in orde! Als u geniet van het idee van zelfstudieseries die meerdere TUTS-sites omvatten, wees dan luid en laat het ons weten! Ik hoop dat je iets hebt geleerd van deze derde inzending; en nogmaals bedankt aan Sean Hodge (Psdtuts + / Vectortuts + editor) voor het schrijven van de eerste twee tutorials in deze serie.

  • Volg ons op Twitter of abonneer je op de Nettuts + RSS Feed voor de beste tutorials voor webontwikkeling op internet.