Izrada HTML predloška za blog-tutor

[MrMarin]

1.dio
Uvod u izradu predložaka
Za početak, moram reći da ćete ovdje (ako pročitate sve postove) naučiti napraviti najjednostavniji predložak, tj. onaj s dva stupca (za boxeve i postove).
Ovo je primjer predloška, tj. predložak čiji ćete kod skinuti i obrađivati.
HTML kod nećete morati sami pisati jer vam dajem manje-više gotov kod kojeg ćete naučiti preraditi.
Jedini uvjet je da ne mičete link do mojeg bloga iz HTML koda.
Da biste počeli, trebat će vam HTML kod
(U slučaju da prvi link ne radi: Link2; Link3).
Treba vam i neki program za obradu slika. Ako ste početnik, nikako ne preporučam PhotoShop jer je kompliciran, ali ni Paint jer doslovno uništi sliku.
PhotoFiltre je dosta dobar, jednostavan, brz i besplatan program.
Ako ste sve to skinuli, možemo početi.
Body dio se odnosi na cijelu stranicu, u ovom slučaju blog, tj. to su temeljne postavke izgleda bloga. U određenim dijelovima ih možete mijenjati i prilagoditi nekom dijelu (npr. povećati veličinu slova za naslove, mijenjati boju teksta, ukrašavati tekst).
Negdje na vrhu koda pronađite dio:

Font
font-family
Font (vrsta slova) označen je kao "font-family: Arial". Arial možete zamijeniti s bilo kojim osnovnim fontom (u to spadaju svi fontovi koje niste downloadali, nego su došli "u paketu" s računalom), npr. Century Gothic, Franklin Gothic Book, Georgia, Times New Roman...
Veličina slova
font-size
Veličina slova izražava se u pikselima (px). Ovdje je zadano 10px, što vi možete izmijeniti u bilo koju drugu brojku- 11px; 12px...
Boja slova
color
Sad će vam trebati PhotoFiltre ili ovo.
U HTML/CSS zapisu svaka boja ima svoje ime, i to u obliku heksidecimalnih kodova koji se sastoje od 6 brojki ili slova. Npr. crna je #000000, bijela #FFFFFF, crvena #FF0000 itd..
U ovom predlošku je zadana crna boja, #000000, a vi #000000 možete izmijeniti u bilo koju boju iz tablice s gornjeg linka ili u PhotoFiltre-u klikom na kapaljku pa na određeni dio slike.
U malom okviru desno od slike prikazat će se kod boje, kopirajte ga i zalijepite umjesto #000000.

Boja pozadine
background-color
Isti postupak kao i s bojom slova. Jednostavno zamijenite #000000 sa nekim drugim kodom za boju.
2. Linkovi
Pronađite ovaj dio:

"A" označava linkove kakve ih vidite na blogu, a "A:hover" linkove kad je na njima kursor.
Možete mijenjati boju slova, veličinu itd., zapravo gotovo sve kao i kod običnog teksta koji ste gore uređivali (body), osim što se kod linkova upotrebljava i text-decoration.
Text-decoration može biti:
text-decoration: none (normalan tekst)
text-decoration: underline (potcrtano)
text-decoration: overline (linija iznad teksta)
text-decoration: line-through (linija koja prolazi kroz tekst)
text-decoration: blink (tekst žmirka)
3. Naslovi
Za naslove boxeva i postova u predlošku je upotrijebljen sljedeći kod:

Opet možete sve mijenjati.
Tu se pojavljuje i font-weight. Primjer: ovo je font-weight: normal, a ovo font-weight: bold. Više saznajte ovdje. Font-weight možete kopirati i u ostale kodove, npr. u body, u linkove (A ili A:hover)...

[MrMarin]

2.DIO
4. Komentari

I u ovom dijelu možete sve mijenjati. Mislim da je očito da ovaj dio označava komentare koji se nalaze ispod posta.
5. Sadržaji ispod posta

Odnosi se na nešto kao "Komentari(16) | On/Off | Print | #" koje se nalazi ispod svakog posta.
6. Kalendar


Eto, piše vam je što je što pa mijenjajte što hoćete; boje, veličine, ukrašavanje teksta...
Sada ste završili sa style dijelom koji zapravo određuje temeljne dijelove HTML koda.
Ovo nije kod za sliku koja se ponavlja u pozadini. Taj kod ću vam dati malo kasnije. Ova slika će se pojaviti u pozadini u njezinoj "prirodnoj" veličini i neće se ponavljati.
Da biste dodali sliku, odmah nakon kopirajte i zalijepite sljedeći kod:
<div id="box" style="position:absolute; left:0px; top:0px; ><img src="adresa slike" border="0"/></div>
Svoju sliku možete možete uploadati na npr. TinyPic-u ili ImageShack-u.
Dakle, recimo da želite dodati ovu sliku u predložak.
Kao što vidite ako ste kliknuli na link, url (adresa) slike je http://i36.tinypic.com/zxa2s9.jpg. Kopirajte tu adresu i zalijepite je u gornji kod (kojeg ste, pretpostavljam, već zalijepili u HTML kod predloška) umjesto adresa slike.
Spremite HTML kod i pogledajte kako to izgleda na blogu. Trebalo bi izgledati otprilike ovako:

(Na blogu koji je na slici izmjenjene su boje pozadine i linkova)

Sad nastaje problem. Slika se ne vidi od stupca za boxeve, dakle treba pomaknuti stupac. Pronađite sljedeći kod (nalazi se iznad dijela ):


U kodu je položaj stupca određen kodovima left i top Točnije, piše: left:28px; top: 28px.
Left označava koliko piksela će stupac biti udaljen od lijevog ruba… ekrana (ako shvaćate što hoću reći), a top koliko će biti udaljen od vrha. Napominjem, duljine su izražene u pikselima.
Sada ćete te vrijednosti morati izmijeniti. Mislim da je u ovom slučaju mijenjati top.
28px, koliko iznosi udaljenost stupca od vrha zamijenite sa npr. 320px i spremite HTML kod. Sad se slika vidi, zar ne?
Slika koja se ponavlja u pozadini
Ponovno pronađite body dio negdje pri vrhu:

Izmijenite taj kod tako da izgleda ovako:

Dodali smo sliku http://i34.tinypic.com/30m23dd.jpg kao pozadinu koja se ponavlja, i to kodovima background-image: url(adresa slike); background-repeat: repeat koji se nalaze u gornjem kodu (na slici).
adresa slike možete zamijeniti s bilo kojom drugom adresom na kojoj se nalazi slika, preporučam da ta slika ne bude prevelika.
background-repeat: repeat označava da će se slika ponavljati preko cijelog ekrana. Da ste postavili background-repeat: repeat-x, slika bi se ponavljala samo prema dolje. Pokušajte i to.
Kako treba izgledati slika?
Potrudite se da slika koju obrađujete u nekom programu bude što manja. Ne kažem da mora biti mala, nego da ne pretjerujete s veličinom jer nije nimalo lijepo kad je slika šira od zaslona i kad morate scrollati 16 puta da biste vidjeli cijelu sliku, a da ne spominjem kako nije nimalo ugodno dugo čekati da se slika učita.
Na primjer, nemojte sliku spremite ovakvu: