Pretvaranje grafičkog dizajna iz Photoshop (PSD) formata u funkcionalan web kod temeljni je korak u procesu izrade web stranica. Iako danas postoje brojni vizualni uređivači i napredni sustavi za upravljanje sadržajem, ručno kodiranje i pretvorba dizajna u XHTML i CSS pružaju developerima potpunu kontrolu nad strukturom, brzinom učitavanja i optimizacijom web stranice. Ovaj praktični vodič detaljno objašnjava kako korak-po-korak pretvoriti pripremljeni PSD predložak u čist, semantički ispravan XHTML kod stiliziran modernim CSS-om.
Priprema radnog okruženja i strukture datoteka
Priprema radnog prostora ključna je za uspješan rad. Za pisanje koda možete koristiti bilo koji tekstualni uređivač. Iako su napredni alati poput VS Code-a ili Sublime Texta iznimno popularni, običan Notepad (Bilježnica) odličan je izbor za početnike jer ne nudi automatsko dovršavanje koda, što vas prisiljava da u potpunosti razumijete svaki napisani redak.
Prvi korak u izradi stranice je definiranje osnovne XHTML strukture. Svaki standardni XHTML dokument započinje s definicijom tipa dokumenta (DOCTYPE). U našem primjeru koristit ćemo XHTML 1.0 Transitional, koji predstavlja izvrstan balans između strogoće i kompatibilnosti sa starijim elementima.
<!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" />
<meta name="keywords" content="predlozak, css, xhtml, psd, kodiranje, web dizajn" />
<meta name="author" content="Igor Kovacic" />
<title>Kodiranje predloška - Vodič</title>
<link rel="stylesheet" type="text/css" href="stil.css" />
</head>
<body>
</body>
</html>U zaglavlju (<head>) definiramo metapodatke, ključne riječi za tražilice, autora te postavljamo kodiranje znakova na utf-8 kako bismo osigurali ispravan prikaz hrvatskih dijakritičkih znakova (č, ć, ž, š, đ). Na kraju povezujemo našu HTML datoteku s vanjskim CSS stilskim listom pod nazivom stil.css. Spremite ovu datoteku kao index.html, pazeći da u dijaloškom okviru odaberete opciju “Sve datoteke” (All Files).
Anatomija web stranice i podjela na logičke cjeline
Kako bismo uspješno prenijeli dizajn iz Photoshopa u kod, moramo vizualizirati strukturu stranice. Svaki profesionalni dizajn može se podijeliti na nekoliko ključnih, logičkih cjelina. U našem slučaju struktura se sastoji od sljedećih elemenata:
- Kontejner (Container): Glavni omotač koji drži sve ostale elemente centriranima na ekranu.
- Zaglavlje (Header): Gornji dio stranice namijenjen logotipu, nazivu stranice ili glavnoj navigaciji.
- Sadržaj (Content): Središnji dio u kojem se prikazuju tekstovi, vijesti i glavni materijali.
- Podnožje (Footer): Donji dio stranice rezerviran za autorska prava, dodatne linkove i kontakt informacije.
Ove strukturne elemente definiramo unutar <body> oznaka pomoću <div> elemenata s jedinstvenim identifikatorima (id). Identifikatore koristimo isključivo za elemente koji se na stranici pojavljuju samo jednom.
<div id="kontejner"> <div id="zaglavlje"></div> <div id="sadrzaj"></div> <div id="podnozje"></div>
</div>Osnovno stiliziranje i postavljanje CSS pravila
Nakon što smo definirali HTML kostur, kreiramo novu datoteku pod nazivom stil.css u istom direktoriju. CSS (Cascading Style Sheets) omogućuje nam potpuno odvajanje dizajna od strukture dokumenta. Na samom početku CSS datoteke preporučuje se dodavanje komentara s osnovnim informacijama o projektu.
Kako bismo izbjegli nejednakosti u prikazu stranice u različitim web preglednicima, primijenit ćemo takozvani CSS reset pomoću univerzalnog selektora (zvjezdice). Ovaj korak uklanja zadane margine i unutarnje razmake (padding) svih elemenata:
* { padding: 0; margin: 0; }Zatim definiramo pozadinu cijele web stranice i osnovna pravila za naš glavni kontejner:
body { background-color: #111214;
} div#kontejner { width: 734px; margin: 24px auto; font-family: Verdana, Arial, Helvetica, sans-serif;
}Korištenjem vrijednosti auto za lijevu i desnu marginu, naš se kontejner automatski centrira na sredinu ekrana, bez obzira na rezoluciju monitora korisnika. Širina od 734 piksela odgovara dimenzijama našeg grafičkog predloška.
Rezanje grafičkih elemenata u Photoshopu
Sljedeći korak zahtijeva rad u Photoshopu kako bismo izrezali slikovne elemente dizajna. Pozicionirajte se na sloj (layer) zaglavlja i pritisnite kombinaciju tipki Ctrl+T. U gornjoj traci promijenite prikaz dimenzija iz postotaka u piksele (desni klik i odaberite “pixels”). Izmjerite točne dimenzije – u našem slučaju to je 734×123 piksela.
Kreirajte novi dokument u Photoshopu (Ctrl+N) s izmjerenim dimenzijama. Obojite pozadinu novog dokumenta u boju #111214 pomoću alata Paint Bucket. Vratite se na izvorni PSD predložak, desnim klikom na sloj zaglavlja odaberite “Duplicate Layer” i kopirajte ga u novostvoreni prozor. Centrirajte sliku pomoću Move alata (tipka V) i spremite je kao zaglavlje.png u isti direktorij gdje se nalaze vaše HTML i CSS datoteke.
CSS pravilo za prikaz ovog zaglavlja glasi:
div#zaglavlje { height: 123px; background: url(zaglavlje.png) no-repeat;
}Fleksibilan dizajn i rastezanje sadržaja (Sliding Doors)
Sadržaj stranice mora biti fleksibilan jer količina teksta varira od stranice do stranice. Ako bismo koristili fiksnu pozadinsku sliku za cijeli sadržaj, tekst bi brzo prešao preko njezinih rubova. Rješenje ovog problema je podjela prostora za sadržaj na tri dijela:
- Gornji dio (gore): Sadrži gornji zaobljeni rub dizajna (visina 14px, slika
g_sadrzaj.png). - Srednji dio (sredina): Sadrži pozadinsku sliku od 1px visine koja se ponavlja po okomitoj osi (slika
s_sadrzaj.png). - Donji dio (dolje): Sadrži donji zaobljeni rub dizajna (visina 14px, slika
d_sadrzaj.png).
U HTML-u unutar diva sadrzaj dodajemo ove tri podcjeline:
<div id="sadrzaj"> <div id="gore"></div> <div id="sredina"> <!-- Ovdje dolazi tekst --> </div> <div id="dolje"></div>
</div>CSS stilovi za ove elemente osiguravaju da se srednji dio rasteže u skladu s količinom teksta, dok gornji i donji dio zadržavaju svoje fiksne visine:
div#sadrzaj div#gore { height: 14px; background: url(g_sadrzaj.png) no-repeat;
}
div#sadrzaj div#sredina { background: url(s_sadrzaj.png) repeat-y; color: #DDDDDD; padding: 0px 12px;
}
div#sadrzaj div#dolje { height: 14px; background: url(d_sadrzaj.png) no-repeat;
}Stiliziranje vijesti, linkova i podnožja
Unutar središnjeg dijela (sredina) možemo prikazati jednu ili više vijesti. Budući da se vijesti ponavljaju, za njih koristimo CSS klase (class) umjesto identifikatora. Definirat ćemo klasu .vijest te stilizirati njezine unutarnje elemente poput naslova (h1), odlomaka (p), vodoravne linije (hr) i bloka s informacijama o objavi (.info):
.vijest h1 { font-weight: normal; font-size: 18pt;
}
.vijest p { margin: 5px 0px; font-size: 10pt; text-align: justify;
}
.vijest hr { height: 1px;
}
.info { text-align: right; color: #8f8f8f; font-size: 7pt; margin-top: 3px;
}Za interaktivnost web stranice ključno je pravilno stilizirati poveznice (linkove). Definiramo različite stilove za standardne linkove, posjećene linkove te efekt prelaska mišem (hover):
div#sadrzaj a, a:visited { color: #FFFFFF; text-decoration: underline;
}
div#sadrzaj a:hover, div#podnozje a:hover { color: #FA00A7; text-decoration: underline;
}
div#podnozje a, a:visited { color: #B4B4B4; text-decoration: none;
}Na kraju, podnožje stranice oblikujemo tako da tekst bude centriran, manje veličine i diskretne sive boje:
div#podnozje { padding-top: 5px; text-align: center; color: #8f8f8f; font-size: 7pt;
}Kompatibilnost s preglednicima i validacija koda
Jedan od najvećih izazova u web dizajnu je osigurati da stranica izgleda identično u svim web preglednicima. Starije verzije preglednika, poput legendarnog Internet Explorera 6, često zahtijevaju posebne CSS popravke (tzv. bug fixes). Najčišća metoda za rješavanje ovih problema, koja ujedno zadržava valjanost koda, jesu uvjetni komentari (Conditional Comments) u zaglavlju HTML-a:
<!--[if lt IE 7.0]>
<style type="text/css">
div#sadrzaj div#sredina { margin-top: -4px; }
</style>
<![endif]-->Također, važno je razlikovati apsolutne i relativne staze prilikom povezivanja resursa. Relativne staze (npr. slike/zaglavlje.png) odnose se na lokaciju unutar vašeg projekta i idealne su za lokalni razvoj, dok apsolutne staze sadrže punu URL adresu (npr. https://www.ucionica.net/slike/zaglavlje.png).
Nakon što završite s pisanjem koda, obavezno provjerite njegovu ispravnost putem službenih W3C validatora. Validacija pomaže u otkrivanju skrivenih sintaktičkih pogrešaka i osigurava dugoročnu stabilnost vaše web stranice. Također, izbjegavajte korištenje tablica za cjelokupni izgled stranice; tablice služe isključivo za tablične podatke, dok se za raspored elemenata koriste CSS i divovi.
Često postavljana pitanja (FAQ)
- Zašto se preporučuje korištenje PNG formata umjesto JPG-a?
- PNG format podržava prozirnost (transparency) i pruža visoku kvalitetu bez gubitaka pri kompresiji, što je ključno za oštre rubove grafičkih elemenata i logotipa na webu.
- Koja je ključna razlika između ID-a i klase (class)?
- ID se koristi za jedinstvene elemente na stranici koji se pojavljuju samo jednom (npr. zaglavlje, kontejner), dok se klase koriste za elemente koji se mogu ponavljati više puta (npr. stilovi za vijesti, gumbe ili istaknute odlomke).
- Zašto bismo trebali izbjegavati tablice za izradu izgleda stranice?
- Tablice su namijenjene isključivo za prikaz tabličnih (strukturiranih) podataka. Korištenje tablica za cjelokupni izgled stranice usporava učitavanje, otežava održavanje i negativno utječe na SEO optimizaciju.
Zaključak
Pretvaranje PSD predloška u XHTML i CSS zahtijeva strpljenje, preciznost i razumijevanje osnovnih principa web dizajna. Kroz ovaj proces naučili ste kako strukturirati dokument, primijeniti CSS stilove, izrezati grafičke elemente te osigurati fleksibilnost i kompatibilnost stranice. Savladavanje ovih temelja pružit će vam čvrst oslonac za prelazak na moderne tehnologije poput HTML5, CSS3 i responzivnog dizajna.