U ovom tutorijalu pokazati ćemo kako pretvoriti predložak nacrtan photoshop-om (PSD) u XHTML i CSS. Vjerujemo da je ovo tutorijal koji ste dugo čekali i da će Vam pomoći.
- Pogledajte gotovi predložak: Online predložak
- Downloadajte gotovi predložak: Download
- Downloadajte predložak u psd formatu: Download
Krećemo od pretpostavke da imamo sljedeći predložak:
U kojem ćemo programu pisati kod?
Možemo u bilo čemu. Naš prijedlog je Notepad kako biste naučili i razumjeli kod koji tipkate.
Kako se notepad pokreće?
Najlakši način za XP / Vista korisnike je:
Pritisnuti i držati tipku na tipkovnici sa znakom Windows i pritisnuti slovo “R”
Upisati “Notepad”
Pritisnuti tipku “Enter”
Otvorili smo Notepad i sada slijedi tipkanje:
1. korak
Svaki XHTML započeti ćemo sljedećim kodom:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kodiranje predloška - www.ucionica.net</title>
</head>
<body>
</body>
</html>
DOCTYPE može biti Transitional (kao u našem slučaju – najčešći slučaj), Strict (najčešće se ne koristi jer je većina prezentacijskih mogućnosti isključena), Frameset (za stranice rađene u frame-ovima (okvirima) koji se sve više i više ne koriste).
<html> tag označava početak html dokumenta
<head> označava početak zaglavlja. Ovo zaglavlje ne vidi se na stranici već samo u kodu. U zaglavlju se mogu definirati ključne riječi stranice (pomaže tražilicama poput googlea da pronađu Vašu stranicu), encoding (uzmimo charset=utf-8 kao pravilo za namještanje encodinga jer će nam kad-tad zatrebati specijalni znakovi podržani od utf-8), autora stranice, title (naslov stranice), javascript-ove poveznicu prema css dokumentu, pa čak i cijeli css dokument, …
Naš head izgledati će ovako:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="kljucne, rijeci, predlozak, css, xhtml, psd, kodiranje" />
<meta name="author" content="Igor Kovacic - igor@ucionica.net" />
<title>Kodiranje predloška - www.ucionica.net</title>
<link rel="stylesheet" type="text/css" href="stil.css" />
2. korak
Spremimo naš html dokument u novi direktorij.
Bitno je “Save as type:” postaviti na “All files” i ručno upisati ekstenziju “html”.
3. korak
Otvorimo novi notepad, stari neka također bude otvoren.
Novi spremimo na isti način u isti folder, ali sa ekstenzijom “css”, a naziva “stil”.
4. korak
Zamislimo sljedeću podjelu stranice:
Sada ćemo te dijelove napisati unutar <body> i </body> tagova u html dokumentu.
<div id="kontejner">
<div id="zaglavlje">
</div>
<div id="sadrzaj">
</div>
<div id="podnozje">
</div>
</div>
“id” koristimo isključivo za dijelove koji se ponavljaju samo jednom!
5. korak
Paralelno pišimo CSS (Cascading Style Sheets) dokument. CSS opisuje izgled, objedinjuje zajedničke dijelove stranice, omogućuje nam izuzetno lijepo formatiranje svakog pojedinog dijela htmla.
Na vrh dodajmo komentar (npr. autor CSS-a).
/* by Igor Kovacic [igor@ucionica.net] – www.ucionica.net */
/* Tutorijal: PSD -> XHTML & CSS */
Zbog različitosti u prikazivanju nekih dijelova u različitim browserima napišimo sljedeći redak:
* { padding: 0; margin: 0; } /* zvjezdica se odnosi na sve elemente html-a */
Odredimo boju glavne pozadine, pozadine cijele web stranice. Ona je u našem slučaju #111214.
Dodajmo sljedeći redak u CSS dokument:
body { background-color: #111214; }
Napravimo save CSS-a i HTML-a i provjerimo kako izgleda naša stranica u browseru (dupli klik na html file).
6. korak
Odredimo širinu stranice, poravnanje i font
div#kontejner {
width: 734px; /* sirina stranice */
margin: 24px auto; /* centrirajmo stranicu pomocu "auto", a pomocu 24px ju odmaknimo od dolje i gore za 20 piksela */
font-family: Verdana, Arial, Helvetica, sans-serif; /* odredimo font za cijelu stranicu (ovo ne radimo ukoliko imamo vise razlicitih fontova za razlicite dijelove - tada definiramo za svaki dio posebno) */
}
Za “id” pišemo uvijek “#” prije naziva, kod “class” se stavlja “.”.
Prefiks div stavljamo kako bismo točno specificirali da se radi o div elementu (nije nužno!).
7. korak
Izrežimo zaglavlje (header).
Pozicionirajmo se na layer zaglavlje
Pritisnimo Ctrl+T kombinaciju tipaka na tipkovnici
U gornjoj traci dimenzije su u postotcima. Prebacimo ih u piksele (desni klik i odaberimo “pixels”).
Isti postupak ponavljamo za visinu i pročitajmo dimenzije te dodajmo po 2 piksela i na širinu i na visinu.
Sada možemo vidjeti da se radi o dimenzijama 734×123 piksela.
Pritisnimo tipku “Escape” (Esc).
Pritisnimo Ctrl+N.
Namjestite sljedeće parametre i pritisnite “OK”:
Obojimo pozadinu u #111214 pomoću alata “Paint Bucket Tool”.
Ako smo trenutno na alatu gradient tool kliknimo lijevim klikom na njega. Ne zaboravite odabrati boju.
Prebacimo se na prozor s predloškom i pozicionirajmo se na layer zaglavlje.
Pritisnimo desni klik na layer i odaberite “Duplicate layer…”.
Namjestite sljedeće postavke.
Prebacite se u prozor sa zaglavljem i centrirajte zaglavlje uz pomoć “Move Tool”-a (pritisnite “V” kako bi se pozicionirali na taj alat).
Centrirano otprilike izgleda ovako:
Pritisnite “Ctrl+S” kako bi spremili sliku. U ovoj stranici sve ćemo spremati u png format kako bi optimizirali stranicu za brže učitavanje na internetu (nije greška spremati u jpg, ali pritom valja paziti na veličinu slike).
Spremimo sliku u isti direktorij u kojem se nalaze html i css file. Ovo se inače ne radi, slike se spremaju u direktorij naziva “images”, ali u tom slučaju putanje bi izgledale drugačije.
CSS za zaglavlje glasi:
div#zaglavlje {
height: 123px; /* definiramo visinu, a sirina se nasljeduje od roditelja - diva "kontejner" (734px) */
background: url(zaglavlje.png) no-repeat; /* lokacija slike zaglavlja (mogli smo ucitati u html kao sliku, ali prakticnije je iz CSS-a takoder smo definirali da se ne ponavlja */
}
8. korak
Napišimo CSS za div “sadrzaj”.
Bitno je jedino odmaknuti sadržaj od zaglavlja kako sve ne bi izgledalo previše zbijeno.
div#sadrzaj {
margin-top: 20px; /* odmicemo sadrzaj (prostor u kojem se nalazi tekst) od zaglavlja (da ne bude previse zbijeno) */
}
Zamislite sljedeću podjelu sadržaja:
9. korak
Izrežimo gornji dio sadržaja (prostor gdje ide tekst).
Veličina je 734×14 piksela.
Radi se na isti način kao i izrezivanje zaglavlja. Ovaj put koristimo layer “sredina”
Naziv pri stvaranju (Ctrl+N) je “g_sadrzaj”
10. korak
Izrežimo srednji dio sadržaja (prostor gdje ide tekst).
Veličina je 734×14 piksela. Radi se na isti način kao i izrezivanje zaglavlja. Ovaj put koristimo layer “sredina”
Naziv pri stvaranju (Ctrl+N) je “s_sadrzaj”
11. korak
Izrežimo donji dio sadržaja (prostor gdje ide tekst).
Veličina je 734×14 piksela.
Radi se na isti način kao i izrezivanje zaglavlja. Ovaj put koristimo layer “sredina”
Naziv pri stvaranju (Ctrl+N) je “d_sadrzaj”
12. korak
Unutar div-a “sadrzaj” dodajmo sljedece:
<div id="gore"></div>
<div id="sredina"></div>
<div id="dolje"></div>
U divu naziva gore nalaziti će se slika koju smo izrezali u koraku 7.
U divu naziva dolje nalaziti će se slika koju smo izrezali u koraku 9.
Div “sredina” malo je složeniji. U njega dolazi sav sadržaj, tekstovi, objave, …, a njegova visina određuje se na osnovu količine sadržaja.
CSS za ova tri diva izgledati će ovako:
div#sadrzaj div#gore {
height: 14px; /* visina zaobljenog dijela - vidi sliku 33 */
background: url(g_sadrzaj.png) no-repeat; /* odredujemo putanju i da se ne ponavlja */
}
div#sadrzaj div#sredina {
background: url(s_sadrzaj.png) repeat-y; /* putanja slike. Ovaj dio se mora ponavljati jer visina ovisi o kolicini sadrzaja */
color: #DDDDDD; /* boja fonta */
padding: 0px 12px; /* odmicemo sadrzaj (tekst, slike, …) za 12 piksela sa lijeve i desne strane */
}
div#sadrzaj div#dolje {
height: 14px; /* ista situacija kao i div naziva “gore” – vidu sliku 34 */
background: url(d_sadrzaj.png) no-repeat;
}
div#sadrzaj div#gore – ovime smo točno specificirali da se radi o divu naziva “gore” koji se nalazi u divu naziva “sadrzaj”.
13. korak
Definirajmo div “podnozje”. Ono sto bismo trebali reći je: centriraj tekst, odredi boju teksta, odredi veličinu teksta i odmakni ga od sadržaja.
CSS bi glasio ovako:
div#podnozje {
padding-top: 5px; /* odmicemo podnozje (footer) od diva naziva "sadrzaj" za 5px */
text-align: center; /* definiramo poravnanje teksta */
color: #8f8f8f; /* ... boju teksta */
font-size: 7pt; /* ... i velicinu teksta */
}
Sada glavnije dijelove imamo definirane. Ono što je ostalo su linkovi, stilovi naslova, glavnog teksta, …
14. korak
Dodajmo u html u div sredina div naziva “vijest”.
<div id="sredina">
<div class="vijest">
...
</div>
</div>
Kao što smo već rekli, class možemo koristiti više puta. Potreban nam je class zato što možemo imati više vijesti.
15. korak
Definirajmo naslov vijesti.
.vijest h1 { /* oblikujemo naslov1 (heading1) u divu vijest */
font-weight: normal; /* po defaultu je bold pa ga moramo staviti na normal */
font-size: 18pt; /* velicina fonta */
}
h1 do h6 označavaju naslove od većeg prema manjem. Mi ćemo u našem slučaju iskoristiti h1 (ovdje je to sasvim nebitno).
U html-u to za sada izgleda ovako:
<div class="vijest">
<h1>Ovo je uvodni naslov</h1>
</div>
16. korak
Definirajmo stil paragrafa vijesti.
.vijest p { /* oblikujemo paragraf u divu vijest */
margin: 5px 0px; /* odmicemo paragraf za 5 piksela od dolje i od gore */
font-size: 10pt;
text-align: justify; /* justify znaci poravnanje od ruba do ruba */
}
U html-u to za sada izgleda ovako:
<div class="vijest">
<h1>Ovo je uvodni naslov</h1>
<p>Ovo je paragraf.</p>
</div>
17. korak
Definirajmo stil horizontalne crte za vijest.
.vijest hr { height: 1px; } /* debljina horizontalne linije */
18. korak
Definirajmo div u kojem će pisati informacije o objavi vijesti.
.info {
text-align: right;
color: #8f8f8f;
font-size: 7pt;
margin-top: 3px;
}
Naš html sada izgleda ovako:
<div class="vijest">
<h1>Ovo je uvodni naslov</h1>
<p>Ovo je paragraf.</p>
<hr />
<div class="info"> Objavio: admin, 12.7.2008. 13:14h</div>
</div>
19. korak
Preostali su nam još linkovi.
/*
a - link
a:visited - vec posjeceni link
a:hover - kursor se trenutno nalazi iznad linka
text-decoration: none - tekst nema dekoraciju
text-decoration: underline - tekst je podcrtan
*/
div#podnozje a, a:visited { color: #B4B4B4; text-decoration: none; }
div#podnozje a:hover, div#sadrzaj a:hover { color: #FA00A7; text-decoration: underline; }
div#sadrzaj a, a:visited { color: #FFFFFF; text-decoration: underline; }
Dijelovi koji su zajednički za više elemenata možemo pisati samo jednom, a nazive ćemo odvojiti zarezom. Npr:
div#prvi, div#drugi { color: #FFFFFF;}
div#prvi { font-size: 15pt; }
div#drugi { font-size: 11pt; }
Što bi značilo da div naziva prvi i div naziva drugi imaju bijelu boju slova, samo prvi ima veličinu slova 15 point-a, a drugi 11 point-a.
CSS možemo pisati u odvojenom fileu kao što je to bilo u našem primjeru, u html fileu (između <head> i </head> tabova) i u samom elementu kao npr <p style=”text-align: right;”></p> (ovo se ne preporuča).
Prilagodba za različite browsere… Ovo je česti problem jer svi browseri nisu isti. Internet explorer 6 najčešće zna stvarati probleme. U našem slučaju također nam je zatrebalo korištenje “fix-a”. Najlakši način za izvesti to, a da kod ostane validan je sljedeće:
<head>
...
<!--[if lt IE 7.0]>
<style type="text/css">
div#sadrzaj div#sredina { margin-top: -4px; }
</style>
<![endif]-->
</head>
Gore navedeni kod čita isključivo Internet Explorer 6 ili stariji.
Dodavanje slike radi se na sljedeći način:
<img src="ovdje_ide_putanja_do_slike.ekstenzija" alt="alternativni_tekst" />
Obavezno dodajte alternativni tekst kako bi Vaš kod bio validan.
Pregled cijelog HTML-a:
Pogledaj!
Pregled cijelog CSS-a:
Pogledaj!
Staze
Postoje apsolutne i relativne staze.
Apsolutne su one koje se pišu od root-a kao npr. https://www.ucionica.net/tutorijal/zaglavlje.png
Relativna staza bi bila npr. tutorijal/zaglavlje.png ili samo zaglavlje.png
Validacija
Stranice koje su pohranjene lokalno možete provjeravati na sljedećim adresama:
HTML: http://validator.w3.org/#validate_by_upload
CSS: http://jigsaw.w3.org/css-validator/#validate_by_upload
Na svoju stranicu (koja se nalazi na internetu) možete postaviti linkove:
HTML: <a href=http://validator.w3.org/check?uri=referer”>XHTML</a>
CSS: <a href=”http://jigsaw.w3.org/css-validator/check/referer”>CSS</a>
Izbjegavajte tablice pri izradi izgleda stranica. Tablice se koriste isključivo za prikaz tabličnih podataka, a za izgled koristimo “div”-ove.
Pregled (x)HTML elemenata možete pregledati ovdje:
Cookwood
Pregled CSS atributa možete pregledati ovdje:
Html Help
Nadamo se da je ovaj tutorijal koristio. ;-)
U slučaju dodatnih pitanja, slobodno nas kontaktirajte i putem rubrike “Pitajte učitelja”.
4 komentara na članak 'Kako pretvoriti PSD u XHTML i CSS?'
Pratite komentare na članak 'Kako pretvoriti PSD u XHTML i CSS?' putem RSS feeda.
Fenomenalno! Svaka Vam čast!
Pozdrav iz Bosanske Gradiške!
Odlicno, stvarno ste dali truda ovo napraviti.
Hvala..Super je
Genijalni ste hvala vam ♥