Uvod u proces pretvaranja dizajna u funkcionalnu web stranicu
U svijetu web dizajna, proces započinje vizualnom idejom koja se najčešće oblikuje u grafičkom alatu poput Adobe Photoshopa. Rezultat tog kreativnog procesa je PSD datoteka – statična slika koja prikazuje kako bi stranica trebala izgledati. Međutim, da bi ta slika postala stvarna, interaktivna web stranica koju preglednici mogu interpretirati, potrebno ju je pretvoriti u kôd. Ovaj proces, poznat kao konverzija PSD-a u XHTML i CSS, temelj je modernog web razvoja.
U ovom ćemo vodiču detaljno proći kroz korake potrebne za ručno kodiranje predloška. Iako danas postoje brojni automatizirani alati, razumijevanje ručnog pisanja kôda ključno je za svakog developera jer osigurava čistoću kôda, bolju optimizaciju za tražilice (SEO) i lakše održavanje stranice u budućnosti.
Priprema radnog okruženja i osnovna struktura
Prije nego što započnete s radom, važno je odabrati pravi alat. Iako možete koristiti napredne razvojne okoline poput Visual Studio Code-a, za početnike je ponekad najbolje početi s jednostavnim tekstualnim uređivačem poput Notepada ili Notepad++ kako bi u potpunosti razumjeli svaku liniju koju napišu.
Prvi korak je kreiranje osnovne HTML strukture. Svaki XHTML dokument mora započeti s ispravnim DOCTYPE-om. DOCTYPE (Document Type Declaration) govori pregledniku koju verziju HTML-a koristite. U našem primjeru koristit ćemo XHTML 1.0 Transitional, koji je fleksibilan i dopušta određene prezentacijske atribute.
Osnovni kostur vašeg HTML dokumenta izgledat će ovako:
- HTML tag: Označava početak i kraj dokumenta.
- Head sekcija: Sadrži metapodatke, naslov stranice i poveznicu na CSS datoteku. Ovdje definiramo i charset=utf-8 kako bismo osigurali ispravan prikaz hrvatskih dijakritičkih znakova (č, ć, ž, š, đ).
- Body sekcija: Ovdje se nalazi sav vidljivi sadržaj stranice.
Analiza dizajna i rezanje elemenata (Slicing)
Kada otvorite svoj PSD u Photoshopu, nemojte odmah početi s izvozom slika. Prvo analizirajte strukturu. Većina web stranica sastoji se od nekoliko ključnih dijelova:
- Kontejner: Glavni okvir koji drži sve ostale elemente na okupu.
- Zaglavlje (Header): Gornji dio gdje se obično nalazi logotip i navigacija.
- Sadržaj (Content): Središnji dio gdje se nalaze tekstovi i objave.
- Podnožje (Footer): Donji dio sa sitnim informacijama i autorskim pravima.
U Photoshopu koristite alat Move Tool i kombinaciju tipki Ctrl+T kako biste izmjerili točne dimenzije elemenata. U našem primjeru, širina stranice je 734 piksela. Slike poput zaglavlja i zaobljenih rubova sadržaja treba izrezati i spremiti u PNG formatu. PNG je izvrstan izbor jer nudi dobru kompresiju uz očuvanje kvalitete, što je ključno za brzo učitavanje stranice.
Pisanje CSS-a: Oblikovanje izgleda
CSS (Cascading Style Sheets) je jezik koji definira kako će vaša HTML struktura izgledati. On odvaja sadržaj od dizajna, što je zlatno pravilo modernog weba. Prva stvar koju svaki developer treba učiniti u CSS-u je takozvani “reset”. Različiti preglednici imaju različite zadane margine, pa ih postavljamo na nulu pomoću zvjezdice:
* { padding: 0; margin: 0; }
Nakon toga definiramo pozadinu cijele stranice (body). U našem slučaju koristimo tamnu boju #111214. Zatim definiramo kontejner. Postavljanjem margin: auto; osiguravamo da stranica bude horizontalno centrirana na svim ekranima, dok fiksna širina od 734px osigurava da dizajn ostane dosljedan onome što smo nacrtali u Photoshopu.
Složeni elementi i dinamička visina
Jedan od čestih izazova kod pretvaranja PSD-a je kako napraviti da se pozadina sadržaja širi ovisno o količini teksta. Ako bismo koristili jednu veliku sliku za pozadinu, ona bi bila fiksna. Umjesto toga, koristimo tehniku rezanja na tri dijela:
| Dio elementa | Funkcija | CSS svojstvo |
|---|---|---|
| Gornji dio (gore) | Prikazuje gornje zaobljene rubove. | no-repeat |
| Srednji dio (sredina) | Uzak dio slike koji se ponavlja vertikalno. | repeat-y |
| Donji dio (dolje) | Prikazuje donje zaobljene rubove. | no-repeat |
Ovim pristupom, bez obzira na to napišete li tri rečenice ili tri stranice teksta, pozadina će se automatski prilagoditi, a dizajn će ostati netaknut.
Stiliziranje teksta, naslova i poveznica
Nakon što smo postavili strukturu, vrijeme je za tipografiju. Koristimo standardne fontove poput Verbane ili Ariala koji su čitljivi na svim uređajima. Naslove definiramo pomoću h1 tagova, ali im u CSS-u smanjujemo težinu (font-weight) na normal ako dizajn to zahtijeva.
Posebnu pažnju treba posvetiti poveznicama (linkovima). Koristimo pseudo-klase poput :hover kako bismo dodali interaktivnost – npr. promjenu boje ili podcrtavanje kada korisnik prijeđe mišem preko linka. To poboljšava korisničko iskustvo (UX) jer daje jasnu povratnu informaciju o tome što se na stranici može kliknuti.
Kompatibilnost i validacija koda
Povijesno gledano, stariji preglednici poput Internet Explorera 6 zadavali su glavobolje developerima zbog pogrešnog interpretiranja CSS-a. Iako su ti dani uglavnom iza nas, dobra je praksa poznavati “conditional comments” – poseban kôd koji čitaju samo određene verzije preglednika kako bi se primijenili specifični popravci (fixevi).
Zadnji korak u procesu je validacija. W3C nudi besplatne alate za provjeru ispravnosti vašeg XHTML i CSS kôda. Validacija osigurava da vaša stranica nema sintaktičkih pogrešaka, što pomaže u bržem učitavanju i boljem rangiranju na tražilicama.
Često postavljana pitanja (FAQ)
Zašto koristiti DIV elemente umjesto tablica?
Tablice su namijenjene isključivo za prikaz tabličnih podataka (poput cjenika ili rasporeda). Korištenje tablica za cijeli layout stranice čini kôd nepreglednim, teškim za održavanje i neprilagođenim za mobilne uređaje. DIV elementi u kombinaciji s CSS-om nude potpunu slobodu i čišći kôd.
Koji je format slike najbolji za web?
Za fotografije s puno boja koristite JPG. Za elemente dizajna koji zahtijevaju oštre rubove, prozirnost ili jednostavne grafike, PNG je najbolji izbor. Uvijek pazite na veličinu datoteke kako ne biste usporili stranicu.
Mogu li koristiti Notepad za pisanje kôda?
Da, apsolutno. Notepad je izvrstan za učenje jer nema funkciju automatskog dopunjavanja, što vas prisiljava da naučite sintaksu napamet. Ipak, za profesionalni rad preporučuju se alati poput Visual Studio Code-a zbog preglednosti i brzine.
Zaključak
Pretvaranje PSD-a u XHTML i CSS je vještina koja zahtijeva strpljenje i preciznost. Od ispravnog postavljanja strukture u HTML-u do pažljivog rezanja slika i definiranja stilova u CSS-u, svaki korak igra važnu ulogu u finalnom proizvodu. Prateći ove korake, osiguravate da vaša stranica ne samo da izgleda identično originalnom dizajnu, već je i tehnički ispravna, brza i spremna za posjetitelje.