Vodič za pretvaranje PSD dizajna u XHTML i CSS kod

Proces pretvaranja statičkog dizajna iz Adobe Photoshopa (PSD datoteka) u funkcionalnu web stranicu pomoću XHTML-a i CSS-a jedan je od temeljnih koraka u web razvoju. Iako su moderni alati za dizajn i razvoj evoluirali, razumijevanje ovog procesa omogućuje programerima potpunu kontrolu nad izgledom i ponašanjem stranice, osiguravajući da finalni proizvod točno odgovara viziji dizajnera.

U ovom sveobuhvatnom vodiču proći ćemo kroz korake koji će vam omogućiti da vizualni predložak pretvorite u čisti, validan i funkcionalan kod. Fokusirat ćemo se na strukturiranje dokumenta, precizno izrezivanje grafičkih elemenata i primjenu stilova koji će vašu stranicu učiniti profesionalnom i preglednom. Napomena: ovaj vodič se temelji na XHTML standardima; za moderne projekte preporučuje se korištenje HTML5 standarda, no principi strukture i stilizacije ostaju slični.

1. Priprema razvojnog okruženja i osnovna struktura

Za početak rada nije potreban kompleksan softver. Iako postoje napredni editori koda, za učenje i razumijevanje osnova dovoljno je koristiti jednostavan tekstualni editor poput Notepada. Ključno je razumjeti kako se datoteke spremaju i međusobno povezuju.

Svaki XHTML dokument mora započeti ispravnom deklaracijom tipa dokumenta (DOCTYPE), koja pregledniku govori koju verziju HTML-a koristimo. Najčešći izbor za kompatibilnost u ovom kontekstu je Transitional verzija. Osnovna struktura uključuje <head> sekciju, gdje definiramo metapodatke, naslov stranice i poveznicu prema CSS datoteci, te <body> sekciju u kojoj se nalazi vidljivi sadržaj.

Važni koraci pri spremanju:

HTML dokument spremite s ekstenzijom .html.
CSS dokument spremite s ekstenzijom .css (npr. stil.css).
Obje datoteke moraju se nalaziti u istom direktoriju kako bi poveznica u zaglavlju ispravno referencirala stilove.

2. Definiranje strukture stranice pomoću DIV elemenata

Umjesto korištenja zastarjelih tablica za izradu izgleda, moderna praksa nalaže korištenje <div> elemenata. Divovi služe kao kontejneri koji nam omogućuju logičku podjelu stranice na zasebne cjeline.

Standardna podjela stranice obično uključuje sljedeće elemente:

Kontejner: Glavni omotač koji centriramo na ekranu i kojem određujemo fiksnu širinu.
Zaglavlje (Header): Gornji dio stranice koji obično sadrži logotip i glavni naslov.
Sadržaj (Content): Središnji dio gdje se nalazi glavni tekst, vijesti ili članci.
Podnožje (Footer): Donji dio s informacijama o autoru, kontaktima i autorskim pravima.

Kod definiranja ovih elemenata, koristimo atribut id="naziv" za elemente koji se pojavljuju samo jednom na stranici (npr. id="zaglavlje") i atribut class="naziv" za elemente koji se ponavljaju (npr. class="vijest").

3. Izrezivanje grafike iz PSD-a i primjena CSS-a

Kada imamo definiranu strukturu u HTML-u, sljedeći korak je izrezivanje slika iz Photoshopovog predloška. Svrha je pretvoriti vizualne elemente u zasebne datoteke koje ćemo zatim referencirati putem CSS-a.

Detaljan postupak izrezivanja:

Pozicionirajte se na željeni sloj (layer) u Photoshopu.
Pritisnite kombinaciju tipki Ctrl+T za transformaciju i precizno određivanje dimenzija.
U gornjoj traci provjerite jesu li dimenzije u pikselima (desni klik na vrijednost i odabir “pixels”).
Nakon određivanja dimenzija, pritisnite Esc, a zatim Ctrl+N za kreiranje nove datoteke s točnim dimenzijama.
Kopirajte sadržaj sloja u novu datoteku i spremite je u PNG formatu kako biste zadržali kvalitetu i prozirnost pozadine.

Nakon izrezivanja, u CSS-u definiramo pozadinu za odgovarajući div. Na primjer, za zaglavlje koristimo background: url(zaglavlje.png) no-repeat;. Ovim pristupom odvajamo sadržaj od prezentacije, što olakšava kasnije izmjene dizajna bez potrebe za mijenjanjem HTML koda.

4. Detaljno oblikovanje sadržaja i tipografija

Kada su osnovni blokovi postavljeni, fokus se prebacuje na detalje: fontove, boje i razmake. Korištenjem CSS-a možemo precizno odrediti kako će izgledati naslovi (h1-h6) i paragrafi (p).

Za profesionalan izgled preporučuje se korištenje text-align: justify; za dugačke tekstove kako bi rubovi bili ravni, te definiranje padding-a kako tekst ne bi dodirivao rubove kontejnera. Također, važno je definirati stilove za poveznice (linkove) u različitim stanjima: običan link, posjećeni link i stanje kada kursor prelazi preko linka (:hover).

Česte pogreške koje treba izbjegavati:

Korištenje tablica za layout: Tablice služe isključivo za prikaz tabličnih podataka, ne za dizajn stranice.
Inline stilovi: Izbjegavajte pisanje stilova izravno u HTML tagovima (npr. style="color:red"). Svi stilovi trebaju biti u zasebnoj CSS datoteci.
Zaboravljanje alt teksta: Svaka slika mora imati alt atribut radi pristupačnosti i bolje vidljivosti u tražilicama.

5. Kompatibilnost s preglednicima i validacija

Različiti web preglednici ponekad različito interpretiraju CSS kod. Kako bismo osigurali konzistentan izgled, preporučuje se korištenje “reset CSS-a” (npr. * { margin: 0; padding: 0; }), čime se uklanjaju defaultni (zadani) razmaci koje preglednici sami dodaju elementima.

Za specifične probleme u starijim preglednicima, poput Internet Explorera, mogu se koristiti kondicionalni komentari u <head> sekciji koji primjenjuju stilove isključivo za te verzije.

Završni korak svakog projekta mora biti validacija. Postoje besplatni alati poput W3C Validatora koji provjeravaju postoji li sintaktička pogreška u vašem XHTML ili CSS kodu. Validan kod jamči brže učitavanje stranice i bolji rang u rezultatima pretraživanja.

Zaključak

Pretvaranje PSD-a u XHTML i CSS zahtijeva strpljenje i preciznost. Ključ uspjeha leži u pravilnoj organizaciji datoteka, logičkoj podjeli stranice pomoću divova i strogoj separaciji sadržaja od dizajna