Vodič je stariji od 2 godine i možda nije u potpunosti aktualan. Za provjeru, koristite “pitaj učitelja”.

Kako pretvoriti PSD u XHTML i CSS?

Kako pretvoriti PSD u XHTML i CSS?
Autor članka: Igor Kovačić
Kategorije: Programiranje
Teme: , ,
Datum objave: 27.12.2009

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.

Krećemo od pretpostavke da imamo sljedeći predložak:

PSD u XHTML i CSS 01

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”.

PSD u XHTML i CSS 02

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:

PSD u XHTML i CSS 03

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.

PSD u XHTML i CSS 04

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”).

PSD u XHTML i CSS 05

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”:

PSD u XHTML i CSS 06

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.

PSD u XHTML i CSS 07

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.

PSD u XHTML i CSS 08

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:

PSD u XHTML i CSS 09

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).

PSD u XHTML i CSS 10

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:

PSD u XHTML i CSS 11

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.

  1. Stanislav
    15.07.2010 u 00:17h

    Fenomenalno! Svaka Vam čast!
    Pozdrav iz Bosanske Gradiške!

  2. Sado
    04.11.2010 u 13:49h

    Odlicno, stvarno ste dali truda ovo napraviti.

  3. johny
    06.02.2011 u 13:00h

    Hvala..Super je

  4. Andjelka
    24.01.2012 u 12:53h

    Genijalni ste hvala vam ♥

Ostavite komentar na ovaj članak

Uvredljivi i spam komentari biti će obrisani. Ukoliko se Vaš komentar ne pojavi odmah, pričekajte da ga odobrimo ;-). Odgovore na pitanje brže ćete dobiti ukoliko nas kontaktirate putem forme pitajte učitelja.