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"):
- Naslov prve grupe linkova
- Naslov druge grupe linkova
- Naslov treće grupe linkova
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"):
- Naslov prve grupe linkova
- Naslov druge grupe linkova
- Naslov treće grupe linkova
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
19.12.2003 14:05
