Proces pretvaranja grafičkog dizajna iz Adobe Photoshopa (PSD datoteka) u funkcionalnu web stranicu pomoću XHTML-a i CSS-a temelj je modernog web razvoja. Iako danas postoje napredni alati za dizajn, razumijevanje ovog procesa omogućuje programerima potpunu kontrolu nad izgledom, brzinom i validnošću koda. U ovom ćemo vodiču detaljno proći kroz korake koji će vam omogućiti da statičnu sliku pretvorite u interaktivnu web stranicu.
Sadržaj...
Priprema okruženja i osnovna struktura dokumenta
Za početak rada nije potreban kompleksan softver. Iako postoje napredni editori koda, za početnike je preporučljivo koristiti jednostavne tekstualne editore poput Notepada kako bi se bolje razumjela svaka linija koda. Prvi korak je kreiranje osnovnog XHTML dokumenta koji služi kao kostur vaše stranice.
Svaki XHTML dokument mora započeti ispravnom deklaracijom tipa dokumenta (DOCTYPE). Najčešće se koristi Transitional verzija jer nudi fleksibilnost u prezentacijskim mogućnostima. Osnovna struktura uključuje <html> tag, zaglavlje <head> i tijelo stranice <body>.
U zaglavlju (head) definiramo ključne metapodatke koji su važni za pretraživače i ispravan prikaz znakova. Obavezno postavite charset=utf-8 kako biste izbjegli probleme s hrvatskim dijakritikama. Također, ovdje povezujemo naš eksterni CSS dokument pomoću <link> taga, što omogućuje odvajanje sadržaja od dizajna.
Organizacija layouta pomoću DIV elemenata
Kada imamo osnovnu strukturu, potrebno je zamisliti stranicu kao skup blokova. U web dizajnu se za to najčešće koriste <div> elementi. Umjesto zastarjelih tablica, koje su namijenjene isključivo za prikaz podataka, za izgled stranice koristimo divove jer su fleksibilniji i bolje podržani od strane pretraživača.
Preporučena organizacija layouta uključuje sljedeće elemente:
- Kontejner (Container): Glavni omotač koji centriramo na stranici i određujemo mu fiksnu širinu.
- Zaglavlje (Header): Gornji dio stranice koji obično sadrži logotip i glavni naslov.
- Sadržaj (Content): Centralni dio gdje se nalazi glavni tekst, vijesti i slike.
- Podnožje (Footer): Donji dio s informacijama o autoru, autorskim pravima i linkovima.
Važno je razlikovati upotrebu id i class atributa. ID koristimo za elemente koji se pojavljuju samo jednom na stranici (npr. id="zaglavlje"), dok klase koristimo za elemente koji se ponavljaju, poput pojedinačnih vijesti ili članaka (npr. class="vijest").
Rad u Photoshopu: Izrezivanje elemenata (Slicing)
Nakon što je HTML struktura spremna, vraćamo se u PSD datoteku kako bismo izrezali grafičke elemente. Ovaj proces omogućuje nam da slike postavimo kao pozadine u CSS-u.
Za izrezivanje zaglavlja ili ukrasnih rubova sadržaja koristimo alat za selekciju. Preporučuje se precizno određivanje dimenzija u pikselima. Jedan od trikova je dodavanje 1-2 piksela na širinu i visinu kako bi se izbjegli prazni prostori pri renderiranju. Slike spremamo u PNG formatu zbog bolje optimizacije i podrške za prozirnost, što je ključno za zaobljene rubove ili složene pozadine.
Kada izrežete elemente, spremite ih u poseban direktorij (npr. /images), iako za manje projekte možete koristiti isti folder kao i za HTML/CSS datoteke. Putanje do tih slika potom definirate u CSS-u pomoću svojstva background: url(slika.png) no-repeat;.
Stilizacija pomoću CSS-a i finalno oblikovanje
CSS (Cascading Style Sheets) je alat koji našem HTML-u daje život. Prvi korak u CSS-u je resetiranje margina i paddinga za sve elemente pomoću selektora zvjezdice * { margin: 0; padding: 0; }, čime osiguravamo konzistentan prikaz u svim browserima.
Za centriranje stranice koristimo margin: 0 auto; unutar glavnog kontejnera. Zatim definiramo tipografiju (font-family), boje pozadine i stilove za tekst. Posebnu pažnju treba posvetiti linkovima, definirajući njihovo stanje u tri faze:
- Normalno stanje: Osnovna boja i dekoracija.
- Visited: Boja linka koji je korisnik već posjetio.
- Hover: Efekt koji se aktivira kada korisnik prijeđe mišem preko linka (npr. promjena boje ili dodavanje podcrtavanja).
Za elemente sadržaja, poput vijesti, koristimo kombinaciju naslova (h1-h6) i paragrafa (p). Paragrafe je preporučljivo poravnati pomoću text-align: justify; kako bi tekst izgledao uredno i profesionalno, slično kao u tiskanim publikacijama.
Validacija i kompatibilnost s preglednicima
Zadnji, ali jedan od najvažnijih koraka, jest validacija koda. Čak i male pogreške u sintaksi mogu uzrokovati nepredvidiv prikaz stranice na različitim uređajima. Preporučuje se korištenje službenih validatora kao što su W3C HTML Validator i W3C CSS Validator.
Također, treba biti svjestan da različiti preglednici (Chrome, Firefox, Safari, stariji Internet Explorer) različito interpretiraju kod. Ako primijetite razlike u prikazu, možete koristiti specifične “fix-ove” ili kondicionalne komentare koji će se izvršavati samo u određenom pregledniku, čime osiguravate maksimalnu kompatibilnost.
Zaključak
Pretvaranje PSD-a u XHTML i CSS zahtijeva preciznost i sistematičan pristup. Ključ uspjeha leži u pravilnom odvajanju strukture (HTML) od prezentacije (CSS) te pažljivom izrezivanju grafičkih elemenata. Pridržavanjem ovih pravila, vaša web stranica neće biti samo vizualno vjerna originalnom dizajnu, već će biti i brza, pristupačna i optimizirana za pretraživače.
Česta pitanja (FAQ)
Pitanje: Zašto koristiti divove umjesto tablica za layout?
Odgovor: Divovi omogućuju fleksibilniji, responzivniji i čišći kod koji je lakše održavati i koji je bolje prepoznat od strane pretraživača (SEO).
Pitanje: Koji je najbolji format za spremanje izrezanih slika?
Odgovor: PNG je idealan za elemente s prozirnošću i grafike s oštrim rubovima, dok je JPG bolji za fotografije zbog manje veličine datoteke.
Pitanje: Što je razlika između apsolutne i relativne putanje?
Odgovor: Apsolutna putanja vodi do točne URL adrese na internetu (npr. https://stranica.hr/slika.png), dok relativna putanja vodi do datoteke u odnosu na trenutnu lokaciju dokumenta (npr. images/slika.png).
