Latest forum activity...
various Kannada baby names
Forum: DTP i print dizajn
(0 Replies) View latest post
Arunakila
prije 50min:28sec
picking perfect name for your baby
Forum: DTP i print dizajn
(0 Replies) View latest post
Arunakila
prije 54min:56sec
various Hindu baby names
Forum: DTP i print dizajn
(0 Replies) View latest post
Arunakila
prije 59min:59sec
nike air max 2017 damen
Forum: 3d
(0 Replies) View latest post
berylgarcia
prije 9h:2min
adidas superstar 80s rose
Forum: DTP i print dizajn
(0 Replies) View latest post
berylgarcia
prije 9h:10min
adidas superstar junior
Forum: Plagijati
(0 Replies) View latest post
berylgarcia
prije 9h:17min
adidas zx 700 dames
Forum: Web stranice
(0 Replies) View latest post
berylgarcia
prije 9h:44min
preparation for neet exam
Forum: DTP i print dizajn
(1 Reply) View latest post
Arunakila
prije 7 dana, 1h
 
 To the forum... 
Pošalji ovu stranicu prijatelju


Flash (2)
Freehand (4)
HTML (4)
Photoshop (7)
Programiranje - PHP (3)


 
» Username:
» Password:
Autologin?

 
» Registrirajte se!
» Zaboravili ste password?
210 korisnika je trenutno online
 
17 @ 0.074842
x



Poboljšanje sitea uz pomoć CSS-a
Jedna od glavnih prednosti CSS-a je definitvno to što omogućuje da razdvajanje dizajna od sadržaja. Ono što nam CSS još pruža je mogućnost da logički strukturiramo podatke na stranici. U ovom tutorialu ću navesti neke načine kako se CSS može korisno iskoristiti i u slučaju da još uvijek želite raditi layout s tablicama. Večina onoga što će se naći u tekstu se može naći po drugim siteovima (npr. ALA), tako da će se ispod svake cjeline naći i linkovi na kojima se može pročitati više o određenoj temi.
HTML
19.12.2003 14:05 19.12.2003 14:05 4    


printer friendly version

Poboljšanje sitea uz pomoć CSS-a

Jedna od glavnih prednosti CSS-a je definitvno to što omogućuje da razdvajanje dizajna od sadržaja. Ono što nam CSS još pruža je mogućnost da logički strukturiramo podatke na stranici. U ovom tutorialu ću navesti neke načine kako se CSS može korisno iskoristiti i u slučaju da još uvijek želite raditi layout s tablicama. Večina onoga što će se naći u tekstu se može naći po drugim siteovima (npr. http://www.alistapart.com), tako da će se ispod svake cjeline naći i linkovi na kojima se može pročitati više o određenoj temi.

1. Navigacija

Bez obzira koristite li za navigaciju slike ili tekst navigacija se u većini slučajeva može definirati kao lista vrijednosti. Recimo da je navigacija strukturirana u 3 cjeline od kojih svaka ima svoje linkove. Tagovi koje ćemo koristit za navigaciju: <dl>, <dt>, <dd>, <ul> i <li>. HTML kod će izgledati ovako (kraj svakog taga će se naći obješnjenje zašto i kako se koristi):

<dl> //otvaramo definition listu

<dt>Naslov prve grupe linkova</dt> //<dt> koristimo za definiranje naslova
<dd><ul> //otvaramo unordered listu 
<li><a href=#>Prvi link</a></li>  //sve linkove ćemo držat u <li> elementu
<li><a href=#>Drugi link</a></li>
</ul></dd>  //zatvaramo unordered listu za prvu grupu linkova

<dt>Naslov druge grupe linkova</dt>
<dd><ul>
<li><a href=#>Prvi link</a></li>
<li><a href=#>Drugi link</a></li>
</ul></dd>

<dt>Naslov treće grupe linkova</dt>
<dd><ul>
<li><a href=#>Prvi link</a></li>
<li><a href=#>Drugi link</a></li>
</ul></dd>

</dl> //zatvaramo definition listu

U browseru izgleda ovako:


Naslov prve grupe linkova
Naslov druge grupe linkova
Naslov treće grupe linkova

Istina, ružno je, ali ono što je najbitinije strukturirano je! Uz malo rada to možemo pretvoriti u ovako nešto (u <dl> element smo dodali id="navigacija1"):

Ok sve je to lijepo, radi super i tako, ali onda se jedan dan klijent sjeti da više ne želi imati naslove grupa, a i da bi linkovi mogli biti postavljeni u jednom redu, horizontalno. Nema problema CSS opet spašava stvar i dobivamo ovo (html kod je i dalje isti, ali smo naslove sakrili sa "display: none"):

Note: svi stilovi koji su korišteni u ovom dokumentu nalaze se u fajl tut_sheet.css koju možete skinut odavde.

Linkovi na članke koji pobliže obrađuju ovu temu:

http://www.alistapart.com/articles/taminglists/

2. Strukturiranje sadržaja

Uzmimo za primjer vijesti. Recimo da u vijestima imamo polja: naslov, podnaslov, datum i tekst. Primjetio sam da dosta ljudi određuje izgleda tako da definira css klasu za naslov, datum...itd i onda ih primjenjuje pomoću <span> elementa, što nije dobar način. Ispravan način je definirat ih poput <h#> elementa, <h1> za naslov i datum, <h2> za podnaslov i definirati izgled za <p> element. Zašto? Prije svega zato što je to ispravan način ;), a uz to search robotima je važna struktura html dokumenta i ako to dobro napravite, veće su šanse da će te biti više pozicionirani na listi. Još jedna od stvari koju dosta ljudi nema na umu je da će njihove stranice možda posjećivati i slabovdini tj. slijepi ljudi kojima nije važan izgled nego struktura. Ako želite imati dobro strukturiran dokument, ali opet zadržati fleksibilan izgled, znači imati više različitih izgeda za <h1>, <h2> ili neki treći element, postoji više načina na koje to možete postići. Jedan je svakom <h#> elementu definirati klasu(u html-u: <h1 class="nekaKlasa">text</h1>), ili možete koristiti child selektore u css-u. CSS bi onda izgledao ovako:

#id_elementa h1 {
	definiranje izgleda
}

Tako bi svaki <h1> elementa koji se nalazi unutar elementa sa id-em "id_elementa" imao jedan izgled, a oni koji se ne nalaze unutar tog elementa bi imali drugačiji izgled.

Linkovi na članke koji pobliže obrađuju ovu temu:

http://www.w3.org/TR/REC-CSS2/selector.html
http://www.w3.org/TR/WAI-WEBCONTENT/

3. Printanje html dokumenata

Za siteove koji podatke drže u bazi printanje je prilično jednostavno. Naprave poseban template za printanje i u njemu prikažu podatke koji se printaju. Ali što je sa static html siteovima? CSS opet spašava stvar :). Koristi ćemo mogućnost CSS-a da koristi različite style sheetove, ovisno o tome na kojem mediju se prikazuje. Za printanje ćemo koristit html kod kojim importamo style sheet koji će izgledati ovako:"<style type="text/css" media="print">@import "print.css";</style>". I to je to. Jednostavno definirajte poseban style sheet za printanje and you're ready to go :) Ako želite vidjeti kako to izgleda u praksi, probajte isprintati ovaj fajl.

Linkovi na članke koji pobliže obrađuju ovu temu:

http://www.alistapart.com/articles/goingtoprint
http://www.meyerweb.com/eric/articles/webrev/200001.html

S time završavamo ovaj tutorial. Naravno postoji još puno stvari o kojima se može napisati puno, ali moram nešto ostaviti i za drugi put :). Pozdrav i do čitanja :).

Autor: retro_one

« povratak

Komentari

re: Poboljšanje sitea uz pomoć CSS-a
e odlicno, samo bi bilo super da dodas jos jedan html u kojem je ispisan taj css koji koristis ili pak tamo di spominjes ime css fajla da stavis direkt link da se ne mora patit sa trazenjem i downloadanjem :)

gg!
 Komentar: che.UP 19.12.2003 19:47
re: Poboljšanje sitea uz pomoć CSS-a
mm...poslan vec mail da se to ispravi...trebo je bit direkt link...al sam zaboravio ;)
 Komentar: retro_one 19.12.2003 22:03
re: Poboljšanje sitea uz pomoć CSS-a
Morat cete se strpit do ponedjeljka na zalost, nije mi pri ruci, ali bit ce ispravljeno :I.
 Komentar: emptyhead 20.12.2003 18:07
re: Poboljšanje sitea uz pomoć CSS-a
super.
 Komentar: hans 21.12.2003 11:11
** Trenutno niste ulogirani pa ne možete ni dodavati komentare **