Cum se convertesc un PSD la XHTML

Continuam sa fim uimiti de cat de bine continua sa apara si tutorialul "Construieste un site elegant al portofoliului de site-uri de la zero" al lui Collis. Au trecut luni, dar totuși se înregistrează numere puternice în fiecare săptămână. Având în vedere acest fapt, am decis să creez un screencast care să vă arate exact cum să convertiți un PSD în XHTML / CSS perfect.




Partea 1: Slicing PSD și Crearea XHTML

Partea 2: CSS

Nu te voi minți. Acest videoclip este un pic plictisitor. Nu este deloc distractiv să observați că cineva introduce valori de marjă timp de treizeci de minute. :) Dar este esențial.

Partea 3: Implementarea unui pic de Javascript

Partea 4: Lovitura de la capul lui IE6

Ne-ar putea chiar să ne numim dezvoltatori web dacă nu ar trebui să luptăm cu IE6? Și este o coincidență că "6" este și numărul asociat diavolului? Cine știe.

În mare parte, site-ul arată foarte bine în IE6, dar ar trebui să schimbăm câteva ciudățenii. Creați o foaie de stil nouă și denumiți-o "ie6.css". Puneți-o în dosarul CSS. Apoi lipiți în următoarele.

#container #mainContent # tier2 margin-bottom: 273px! important;  # tier3 #news poziție: relativă; stânga: .56em;  #header height: 158px;  #header #login top: 1em; drept: 1.5em; 

Nu trebuie să trecem cu adevărat nimic. De cele mai multe ori, reglez poziționarea câtorva elemente.

Ultimul pas este să ne referim noua foaie de stil în eticheta capului documentului nostru.

 

PSD

Site-ul Web: 100% XHTML și CSS

Sper că v-ați ajutat. Toată lumea are propriul mod de a face lucrurile; Aș fi interesat să vă aud gândurile. Acest tutorial a fost o mare angajament. Aș aprecia un Digg dacă ați descoperit că este benefic.

  • Abonați-vă la fluxul RSS NETTUTS pentru mai multe tutori și articole zilnice de dezvoltare web.
Cod