U 9 koraka pretvorite PSD predložak u funkcionalan HTML i CSS kod

Ovaj vodič primjeren je početnicima u korištenju divova i css-a. U devet jednostavnih koraka

objasniti ćemo kako iz vrlo jednostavnog dizajna koji je napravljen pomoću photoshopa ili nekog drugog vama omiljenog grafičkog alata napraviti funkcionalan html i css kod.

Kao html editor koristiti ćemo Adobe Dreamweaver. Naravno sve ovo možete raditi i u običnom notepadu ili bilo kojem drugom tekst ili code editoru.

Ovo je jednostavan dizajn koji ćemo iskoristiti za "rezanje" (slice) u HTML:

Korak 1: Postavljanje potrebnih mapa i dokumenata

Organizacija datoteka i mapa bitna je stavka. Dobra organizacija znači veliku uštedu vremena. Umjesto da sve slike, html, css, flash i ostali dokumenti budu smješteni u root, bolje ih je organizirati u odgovarajuće podmape.

Tako je sve .css datoteke dobro staviti u css mapu. Slike koje se koriste za dizajn u images mapu, flash datoteke u flash mapu, itd. U root-u bi trebali imati samo potrebne .html, .php, .asp i slične datoteke.

Za ovaj projekt napraviti ćemo organizaciju kao na slici:

Korak 2: Izrada početne index.html te style.css datoteke

Otvorite novi dokument te ga spremite u root sa index.html nazivom. Ukoliko radite sa Dreamweaverom, automatski će biti postavljeni svi osnovni html tagovi kao doctype, head, body i slično. Dio vezan uz osnove html-a nisu pokrivene ovim člankom pa ćemo ih ovdje preskočiti.

Napravite još jedan novi dokument te ga spremite u css mapu pod nazivom style.css. U njega ćemo spremati sve potrebne css klase.

U head index.html dokumenta "linkajte" css dokument.

<link href="css/style.css" rel="stylesheet" type="text/css" />

Kako su izrezane slike koje su dio dizajna možete pogledati u mapi images.

Korak 3: Poništavanje zadanih vrijednosti web preglednika

Svaki web preglednik ima svoje zadane (default) vrijednost. Npr h1 tag ili margina paragrafa na Internet Exploreru nije jednaka kao i na Firefoxu. Da bi takve stvari poništili i osigurali jednak prikaz na svim preglednicima otvorite style.css datoteku te upišite:

* {
 margin: 0px;
 padding: 0px;
}

Korak 4: Podešavanje boje pozadine te zadanog fonta

U istoj style.css datoteci također ćemo definirati i izgled body selectora. Definirati ćemo boju pozadine, veličinu i vrstu fonta, razmak između redova teksta te odmak dizajna od gornjeg i donjeg ruba prozora. Ukoliko za neki dio sajta nije definirano drugačije koristit će se ove postavke.

body {
 background: #2b2b2b;
 font: 12px/18px Arial, Helvetica, sans-serif;
 color: #000;
 padding: 20px 0px;
}

Korak 5: Glavni kontejner

Otvorite index.html te unutar body taga definirajte div koji će imati id wrapper. Nazive možete davati kako god želite. Osnovno pravilo je da ID smijete koristiti samo jednom unutar cijelog html-a dok class koliko puta želite. Unutar tog diva smjestit ćemo sve ostale elemente stranice. On će biti kao jedan glavni kontejner.

<div id="wrapper">

</div>

Nakon toga ponovo otvorite style.css. Podesiti ćemo izgled glavnog wrapper kontejnera. Ukoliko definirate stil za element koji imaju definiran ID, ispred naziva stavljate znak #. Ukoliko je riječ u elementu koji umjesto ID ima class (...div class="clear"...) ispred naziva css klase dolazi točka.

#wrapper {
 background: #FFF;
 width: 620px;
 padding: 5px;
 margin: auto;
}

Za početak smo definirali bijelu pozadinu. Širina dizajna sveukupno je 630px. Pošto unutar wrappera imamo i padding 5px sa svake strane, smanjit ćemo širinu za 10px jer se padding uračunava u širinu. I za kraj stavljamo margin:auto kako bi se wrapper automatski horizontalno uvijek nalazio na sredini prozora.

Korak 6: Zaglavlje

Unutar wrapper diva otvorite još jedan div te mu dajte ID head. Unutar head diva napravite jedan običan href tag koji će imati ID logo. On će kasnije sadržavati sliku logotipa te biti link na početnu stranicu.

<div id="head">
 <a href="#" id="logo"></a>
</div>

#head
Prvo dajemo izgled head divu. Postavljamo visinu od 149px koliko je visoka i slika u dizajnu, te dodajemo istu sliku u pozadinu kako bi iznad jednostavno stavili logo.

#head {
 height: 149px;
 background: url(../images/head.jpg) no-repeat;
}

#logo
Za logotip postavljamo sliku u pozadinu href taga. Prikaz elementa postavljamo na block. U protivnom se ništa ne bi prikazalo u pregledniku. Podešavano visinu i širinu prema dimenzijama grafike. Pozicioniranje postavljamo na absolute, te logo pomoću margina pozicioniramo na mjesto gdje želimo. 40px od gornjeg te 20px od lijevog ruba.

Apsolutno pozicioniranje računa se od gornjeg lijevog ruba elementa u kojem se taj elemente nalazi. Dobro ga je koristit jer se element može fino pozicionirati gdje želite bez da se poremete ostali elementi ukoliko ih ima. Naravno i oni moraju biti apsolutno pozicionirani.

#logo {
 background: url(../images/logo.jpg);
 display: block;
 height: 54px;
 width: 171px;
 position: absolute;
 margin: 40px 0px 0px 20px;
}

Korak 7: Navigacija

Navigacija bi se po standardu trebala raditi sa <ul> i <li> listama. Ispod head diva dodajte sljedeći HTML kod:

<ul id="nav">
 <li><a href="#">Početna</a></li>
 <li><a href="#">O nama</a></li>
 <li><a href="#">Galerija</a></li>
 <li><a href="#">Kontakt</a></li>
</ul>

#nav
Kao prvo, sredimo izgled samog <ul> elementa. Dodamo mu 1px marginu iznad kako bi dobili razmak kao na prijedlogu dizajna. Ukupna visina tog elementa treba biti 33px. Pošto smo gore stavili padding 4px kako bi se gumbi prikazali na sredini, smanjujemo visinu za 4px, pa ona iznosi 29px. Stavljamo pozadinsku sliku kao na dizajnu te mičemo prikaz bulleta sa list-style:none.

#nav {
 margin: 1px 0px 0px;
 padding: 4px 0px 0px 5px;
 background: url(../images/nav-bg.gif) repeat-x top;
 height: 29px;
 list-style: none;
}

#nav li
Definiramo prikaz stavki unutar <ul> elementa. Float:left koristimo kako bi se stavke prikazivale jedna do druge, te svakoj dodajemo 5px razmaka sa desne strane kako ne bi bile "priljepljene" jedna za drugu.

#nav li {
 float: left;
 margin-right: 5px;
}

#nav li a
Ovdje definiramo izgled samog gumba, odnosno linka navigacije. Za početak čitav element proglasimo kao block kako bi čitava njegova površina bila klikabilna. Za pozadinu stavljamo bijelu sliku sa zaobljenim rubovima kao u dizajnu. Visina i širina podese se prema dimenzijama same grafike gumba. Dalje postavljamo tekst unutar gumba u sredinu, mičemo podcrtu koja se prikazuje na linkovima, te određujemo crnu boju teksta. Line-height treba biti isti kao i visina gumba kako bi osigurali da se tekst vertikalno uvijek prikazuje na sredini.

#nav li a {
 display: block;
 background: url(../images/nav.gif) no-repeat;
 height: 24px;
 width: 69px;
 text-align: center;
 text-decoration: none;
 color: #000;
 line-height: 24px;
}

Korak 8: Dio za glavni sadržaj

Ovo je centralni dio stranice u kojem se prikazuje sadržaj. On mora imati mogućnost vertikalnog "rastezanja" ovisno o tome koliko sadržaja se na stranicu unese.

Ispod navigacije otvorite div i dajte mu id container. To će biti kontejner koji će sadržavati lijevu i desnu kolonu središnjeg dijela te tekstove i ostale elemente koji će biti dio sadržaja.

Ispod lijeve i desne kolone primjetit ćete div koji ima klasu clear (...div class="clear"...). Ovaj div osigurati će nam ispravno prikazivanje središnjeg dijela u web preglednicima. Pošto lijeva i desna kolona u css-u imaju definiran float, dizajn bi se raspadao.

<div id="container">
 <div id="left">
  <p><strong>Lorem ipsum dolor sit</strong></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet diam. Suspendisse mollis purus at felis.</p>
 </div>
 <div id="right">
  <h1>Lorem ipsum dolor sit amet, consectetur adipis</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet diam. Suspendisse mollis purus at felis. Proin lac</p>
 </div>
 <div class="clear"></div>
</div>

#container
U pozadinu container diva stavljamo sliku preko koje se prikazuje tekst. Slika će se uvijek prikazivati na vrhu (top) te se neće ponavljati ni u jednom smjeru (no-repeat). Nakon toga definiramo padding 8px od gornjeg ruba kako ne bi sve bilo priljepljeno za navigaciju, te 13px od lijevog, desnog i donjeg ruba.

#container {
 background: url(../images/container-bg.gif) no-repeat top;
 padding: 8px 13px 13px;
}

#left
Float:left koristimo kako bi ovaj div postavili kao lijevu kolonu, te definiramo širinu od 170px kako bi se sadržaj prikazivao unutar bijelog dijela kao na predlošku dizajna.

#left {
 float: left;
 width: 170px;
}

#right
Float right koristimo kako bi ovaj div prikazali kao desnu kolonu te kako bi se prikazivao pokraj, umjesto ispod #left diva. Kao i za lijevu kolonu i ovdje definiramo širinu.

#right {
 float: right;
 width: 410px;
}

h1
Svaka stranica trebala bi sadržavati samo jedan glavni naslov kao h1. Za ostale naslove i podnaslove koriste se ostali h2, h3, h4... tagovi. Ovom h1 tagu definiramo veličinu fonta od 18px, debljinu postavljamo na normal kako bi se u svim preglednicima prikazalo jednako. Donju marginu postavljamo na 10px, te definiramo boju teksta kao u predlošku dizajna.

h1 {
 font-size: 18px;
 font-weight: normal;
 margin-bottom: 10px;
 color: #1884a1;
}

p
Paragrafu definiramo samo veličinu donje margine od 10px.

p {
 margin-bottom: 10px;
}

.clear
U ovom slučaju clear koristimo kako bi "izravnali" donji dio lijeve (#left) i desne (#right) kolone.Preglednik ne može odrediti dali da se ravna prema visine jedne ili druge kolone, pa se cijeli središnji dio "raspadne". Pokušajte pogledati dizajn u web pregledniku nakon što maknete ...div class="clear"... Trebalo bi vam biti jasnije gdje se javi problem.

.clear {
 clear: both;
}

Korak 9: Donji dio (footer)

Ispod container otvorite još jedan div i dajte mu id footer. U taj div staviti ćemo samo copyright tekst.

<div id="footer">
 copyright (c) loremipsum.com
</div>

#footer
U pozadinu postavljamo sliku koja se ponavlja po širini kao na prijedlogu dizajna. Visina #footer elementa je 30px kao i line-height 30px kako bi se tekst vertikalno prikazivao na sredini. Dalje definiramo boju teksta, veličinu te odmak 10px od lijevog ruba.

#footer {
 background: url(../images/footer.gif) repeat-x top;
 height: 30px;
 line-height: 30px;
 color: #666;
 font-size: 11px;
 padding-left: 10px;
}

Sve bi se trebalo prikazivati identično na svim web preglednicima.

Ovdje možete pogledati demo, ili sve zajedno preuzeti na računalo.