Creați un design web elegant, corporativ (seria HD Video Ziua 4)

În această serie de videoclipuri, vă vom ajuta să creați un design web elegant și profesional pentru un site web corporativ. Aceasta este o parte 4 dintr-o serie de 4 părți - vom finaliza, de asemenea, paginile de suport și codarea întregului lucru în HTML / CSS!


Despre această serie de tutoriale

Adi Purdila ne va trece printr-un întreg proiect - de la design la codificare - toate aici pe Webdesigntuts în această săptămână! În Ziua 1, ne-a arătat cum să setăm cadrul de bază pentru proiectare, precum și modul în care să prezentăm pagina de pornire. În Ziua 2, ne-a arătat cum să creați diferitele pagini de asistență (contact, galerie, etc.). În ziua a 3-a, a început procesul de codificare, arătându-ne cum să convertim întregul design Photoshop într-un site HTML / CSS pe deplin funcțional. Astăzi este Ziua 4, așa că vom finaliza proiectul și vom adăuga poloneza finală!

Doar pentru a vă oferi o foaie de parcurs generală pentru codificare, iată schema de bază a ceea ce vom face în ultimele două zile:

  • Ziua 3, Partea 1: Crearea marcajului pentru pagina de pornire
  • Ziua 3, Partea 2: Împărțirea PSD și scrierea fișierului CSS (am împărțit acest lucru în Hour1 și Hour2)
  • Ziua 3, Partea 3: (cont.) Slicing PSD și scrierea fișierului CSS (am împărțit acest lucru în Hour1 și Hour2)
  • Ziua 4, Partea 1: Slider instalare, personalizare și câteva funcții jQuery foarte de bază
  • Ziua 4, Partea 2: Crearea și modelarea paginilor secundare (Servicii, Galerie și Contact) + verificarea browserului

De asemenea, aș dori să împărtășesc câteva linkuri pentru unele dintre resursele pe care le voi folosi astăzi:

  • Slider plugin: http://www.gmarwaha.com/jquery/jcarousellite/
  • Cufon: http://cufon.shoqolate.com/generate/
  • CSS Browser Selector (pentru crearea de stiluri pentru diferite browsere în același fișier CSS): http://rafael.adm.br/css_browser_selector/
  • Resetați CSS: http://meyerweb.com/eric/tools/css/reset/

Să începem!


Ziua a patra: Conversia PSD la HTML

În următoarea serie de videoclipuri, Adi va trece prin procesul de conversie de la PSD la HTML / CSS. Asigurați-vă că treceți la vizualizarea HD dacă aveți lățime de bandă!

Ziua a patra: Partea 1

Ziua a Patra: Partea 2


Despre autor

"Fie că este vorba de site-uri, logo-uri sau materiale tipărite, filosofia mea de lucru este aceeași: nu luați niciodată comenzi rapide și întotdeauna mi-am pus inima și sufletul în fiecare proiect, deoarece în cele din urmă sunt detaliile mici și cele mai multe eforturi pe care le pun într- , cu atât mai bine mă reprezintă ca persoană și designer și, în același timp, reprezintă clientul meu într-o manieră adecvată nevoilor lui.

Dacă sunteți interesat de șabloanele HTML și paginile de destinație pe care le dezvolt, puteți să le verificați pe pagina mea de portofoliu de pe ThemeForest. "- Adi