Dizajn: Dan treći - Kodiranje

Ovom postu prethodi Dan drugi - Grafički dizajn pa ako ga niste još pročitali, svakako to učinite.

Ne trebate biti programer da biste shvatili kodiranje web stranica. Kao što sam mnogo puta naglašavala, web stranice rade i djeca. Ne kažem da sva djeca to rade dobro, no ako rano počnu, do 17-18 godine već imaju iza sebe mnogo iskustva i prošli su sve početničke greške koje vas tek čekaju.

Da biste napravili dobar template, trebate biti vrlo dobro upoznati sa osnovama HTML-a i CSS-a. Ako ne znate sve ono što sam ranije na blogu pisala (pogled na Arhivu tutoriala sa strane, molim) nemojte se ni nadati da će vam išta od ovoga biti jasno. Dakle, krećemo dalje sa pretpostavkom da ste pročitali i razumjeli sve prijašnje postove i da imate nešto iskustva s time.

Ovaj korak sastoji se u tome da razrežete slike na logičke cjeline i pomoću CSS-a ih dodijelite kao pozadine elementima HTML-a. Na taj način crno-bijeli HTML kostur postaje vizualno privlačna stranica.

U svom editoru slika trebate izrezati header (zaglavlje) i spremiti ga kao zasebnu sliku. Isto učinite i s footerom (podnožjem), ako ga vaš dizajn ima. Ako imate slikovnu pozadinu, spremite i nju, no ako je ona jednobojna (solid color) to neće biti potrebno.
Za slikovne elemente kao header i footer obično koristim pozadine, jer tako osiguravam da se sadržaj učita prije svih slika. Neki više vole sliceati sliku na manje dijelove i ubaciti ih u HTML kao IMG elemente jer tvrde da je to optimiziranije, no ako se radi o malim slikama npr. ispod 25KB bolje je postaviti ih kao pozadinu. Koji god način odaberete neće biti pogrešan dok god je header u pristojnim dimenzijama.
Kada ste sve slike spremili u radni folder, možete kreirati prazni HTML dokument koji ćete oblikovati. Neću u detalje objašnjavati postupak kako kodirati koji layout, jer bi to oduzelo previše vremena. Umjesto toga, za neke najčešće korištene načine dati ću vam gotov kod s kojim se možete igrati.

Tablični layout-i

Nerijetko početnici počinju s njima, jer ih je pomoću editora kao Dreamweaver i FrontPage jako lako kreirati. Iako su tablice kompleksni elementi te ih nije pametno koristiti za layout, pošto je pomoću njih jednostavnije napraviti neke stvari objasnit ću vam kako.

Najprije je tu najklasičniji od svih klasičnih layouta, trostupčani layout gdje lijevi i desni stupac imaju fiksnu širinu, a centralni se širi po potrebi. Header i footer zauzimaju cijelu širinu prozora. Da biste dobili kostur koji odgovara ovom razmještaju, kopirajte kod iz textbox-a. Dakako, kod koji sam ja napravila nije jedini mogući da bi se dobio isti rezultat, ali je jedan od najboljih jer iskorištava mogućnosti CSS-a kako bi HTML bio što čistiji i jednostavniji.

Iz ovoga se lako može dobiti trostupčani layout fiksne širine, npr. 770px tako da se width: 100%; zamijeni sa width: 770px; i doda align="center" u prvi redak tablice, tako da on sada izgleda < table class="layout" cellspacing="0" align="center" >. Može se centrirati i sa CSS-om, no ovako je kraće za objašnjavati :p

Slijedeći standardni layout je dvostupčani layout.

Ako iste preinake kao u gornjem primjeru napravite ovdje, on može postati centrirani layout fiksne širine. Ako zamijenite mjesta ćelija da sadržaj bude iznad stupca, tada će stupac biti sdesna.

S ovime su strogo tablični layouti prilično iscrpljeni (osim što možete dodavati stupce u nedogled), jer je ostalo bolje učiniti pomoću drugih metoda.

Layer (div) layout-i

Divider ili layer je blok u koji smještamo tekst/slike i onda taj blok pozicioniramo kako god nam odgovara. Fleksibilni su i s njima možete sve, pa i preklapati jedan preko drugog.

Najjednostavniji tip je apsolutno pozicioniran layout. Na taj način određujete gdje će se koji div smjestiti kao u koordinatnom sustavu.

U ovom primjeru vidimo da je header pozicioniran u gornjem lijevom uglu, a sadržaj i stupac su pomaknuti od vrha i lijevog ruba. Pozadina dokumenta se ponavlja vertikalno, a pozadina headera se ne ponavlja. Svaki element ima svoj z-index, što označava poredak po koordinati z, dubini - elementi sa nižim indeksom z bit će nam dalje, a oni s višom bliže i tako preklapati ostale elemente - sadržaj i stupac preklopiti će header, pa će njihov tekst biti vidljiv. Mijenjanjem left u right ovaj isti layout može postati pozicioniran desno. I još jedna zanimljivost, kod apsolutnog pozicioniranja poredak u HTML-u je nebitan - header smo stavili na samo dno, a ipak se pojavljuje na vrhu. No, to znači da će se sadržaj i stupac učitati prije headera i tako će posjetioci vidjeti sadržaj prije nego slika bude prikazana.

Ako ste gledali moje besplatne predloške, primijetili ste da moji CSS layouti uglavnom nisu apsolutno pozicionirani, već centrirani. To je malo kompleksnija tehnika, no ako vam se ovo ostalo čini jednostavno, evo kako to ide.

Gledajući ovaj kod čini se jednostavno, no s njim niste ni izbliza gotovi - tu još treba u pixel podesiti margine da sve izgleda kako spada. Meni je ovo omiljeni layout i koristim ga skoro stalno. Efekt je isti kao i kod tablice, no sa marginama se sve da još ušminkati i iskoristiti mogućnost preklapanja.

Za malene stranice za koje nije potrebno mnogo prostora može poslužiti i maleni frame-like layout, gdje se sadržaj scrolla u malenom prozorčiću. Ovo ne koristi i-frame, no izgleda baš tako.

Prozorčić je pozicioniran apsolutno, no može ga se i centrirati vertikalno i horizontalno, uz malo truda.

Ovi predstavljeni primjeri su samo najčešće kombinacije. Još više različitih layouta možete naći OVDJE i OVDJE. Slike (njihova estetska vrijednost je potpuno nebitna) ugrubo prikazuju u kojem je slučaju najbolje koristiti koju metodu, no ne morate se toga slijepo držati. Mijenjajte kostur koda po želji i dodajte vlastite boje i slike, te elemente koje ja nisam dodala npr. doctype i meta-tagove. Na kraju, da biste prilagodili svoj novi predložak Blog.Hr-u, pročitate ovaj tutorial u kojem je to općenito opisano.

S ovom cjelinom završili smo Tri dana do dizajna. Jeste li uspjeli štogod?