Ultimul ghid pentru crearea unui design și conversia lui în HTML și CSS

Acest ecran va servi drept intrare finală într-o serie cu mai multe părți din site-urile TUTS, care demonstrează cum să construiți o pagină de start frumoasă pentru o afacere fictivă. Am învățat cum să creăm scheletul pe Vectortuts +; am adăugat culori, texturi și efecte pe Psdtuts +; acum, vom lua PSD-ul nostru completat și îl vom converti într-un site HTML și CSS frumos codificat.

Rețineți că, chiar dacă nu ați citit primele două tutoriale, veți putea urmări cu ușurință acest videoclip.


Actualizați

Rețineți că această serie de tutorial a fost publicată inițial pe Nettuts + cu aproximativ șaizeci de zile în urmă. Cu toate acestea, mi-a venit recent atenția că mulți dintre voi au avut probleme cu vizionarea ecranului pentru secțiunea 3. Acest lucru a fost rezolvat. se bucura!



Partea 1: Creați un site promoțional iPhone de tip Wireframe în focuri de artificii




Partea 2: Creați un site promoțional iPhone App în Photoshop




Partea 3: Conversia design-ului nostru la un site frumos codificat HTML și CSS

  • Sectiunea 1: Despicarea PSD - 0:00
  • Sectiunea 2: Codificarea marcajului - 18:43
  • Secțiunea 3: Adăugarea CSS - 47:11

Alte opțiuni de vizualizare

  • iTunes / versiune descărcabilă

Seria completa!

Dacă ați urmat de-a lungul întregii serii, felicitările sunt în ordine! Dacă vă bucurați de ideea unei serii de tutorial care să cuprindă mai multe site-uri TUTS, fiți tare și spuneți-ne! Sper că ați învățat puțin din această a treia intrare; și mulțumesc din nou lui Sean Hodge (Psdtuts + / Vectortuts + editor) pentru scrierea primelor două tutoriale din această serie.

  • Urmați-ne pe Twitter sau abonați la Nettuts + RSS Feed pentru cele mai bune tutoriale de dezvoltare web de pe web.


Cod