Dizajniranje bez tablica za početnike #2 - Izbornici

Evo kao što sam obećao napravio sam video tutorial za izbornike i CSS. Ispričavam se odmah na kvaliteti zvuka i možda na još nekim problemima unutar videa. Imajte razumjevanja, ipak mi je ovo prvi ovakav tutorial.

Pošto ovdje kvaliteta i nije baš neka, možete ovaj video skinuti tako da odete na http://www.keepvid.com i zalijepite ovu adresu http://video.google.com/videoplay?docid=1425392176111052062&hl=en i tamo ćete moći izbirati dali ga želite skinuti u .flv .avi ili ipod formatu. Ja preporučujem .avi pošto ćete onda imati najbolju kvalitetu slike.

Nekoliko napomena na početku. Ovaj tutorial će biti malo kraći od onog prijašnjeg. Zašto? Zato što će uz njega ići i video tutorial, kojeg ću pokušati napraviti i postaviti još danas. Video tutorial ću raditi zato da bi vam bilo lakše shvatiti neke stvari, a i isto tako da mogu objasniti neke povezanosti i pravila puno brže i efikasnije nego da to radim u pisanom obliku. Ako prijem takvog tutoriala bude dobar nastavit ću raditi samo video tutoriale, pogledao sam i 74% ljudi koji su došli na prijašnji tutorial imaju neku vrstu brze veze na internet tako da mislim da to neće biti problem. Isto tako video tutoriali će se moći i skinuti da ga možete kasnije lakše ponovno pregledati. Ajmo sad na tutorial.

Početak

Ovaj tutorial je nastavak na prvi tableless tutorial koji sam napravio. Znači ako niste odradili prvi tutorial, odradite ga ili skinite gotovo dijelo.

Za ovaj tutorial će nam trebati još neke dodatne, većinom, grafičke datoteke koje ćete moći skinuti kada dođemo do tog dijela.

Ja sam preimenovao datoteke tableless.css i tableless.html u izbornik.css i izbornik.html. Naravno, čim napravite neku takvu promjenu morate promijeniti i pozive na datoteke, u ovom slučaju poziv na css datoteku u html datoteci, inače nam ova vježba neće uspjeti. Dakle promjenite ovu liniju koda koja vam se nalazi pri početku .html datoteke:

u ovo:

Naravno ako nećete promjeniti imena datoteka iz prošlog tutoriala, ovaj gornji korak vam je nepotreban.

Napraviti ćemo 3 izbornika. Jedan će biti horizontalni, jedan vertikalni a na jednom ćemo pokazati kako koristiti slike kao pozadine vaših izbora i kako te slike mjenjati kada miš pređe preko njih.

Izbornik #1 - Vertikalni

Sada na našoj prvoj stranici već imamo jedan vertikalni izbornik, ali on je malo prejednostavan, znači čisti tekst koji se podvuče kada kada pređemo preko njega mišem. Ono šro ćemo napraviti sada, je da ga malo uljepšamo. Da bi izbornik mogli pravilno pozivati dodat ćemo još jedan DIV u naš .html dokument. Ali tako da “omotamo” već postojeće elemente na stranici. Ti elementi su ul i li tagovi. Napravite ovako dodajte ovu liniju ispred < ul > taga:

i naravno ispod < / ul > taga. Sada bi to trebalo izgledati ovako:

Ovo smo napravili da bi lakše i smisleno mogli pozivati elemente izbornika u CSS-u. Sada ćemo otići u .css dokument (izbornik.css u mom slučaju) i definirati neka svojstva DIV elementa izbornik. Pošto nam se u .html dokumentu DIV izbornik nalazi unutar elementa lijevo, bilo bi dobro da i u .css dokumentu počnemo pisati ispod selektora za lijevi DIV:

Znači samo smo odredili da će nam širina biti 200px i da izbornik pluta lijevo. Sada ćemo dodati sljedeći selektor. Pazite, ovo NE dodajete selektoru gore nego pravite novi, koji mora izgledati ovako:

Ovo je sada jedna nova stvar. Šta nam znači linija #izbornik ul? Ova linija govori pregledniku da se svojstva u ovom selektoru primjenjuju na ul tag koji se nalazi u DIV tagu izbornik. Ovakav način pisanja je vrlo koristan ako ćete imati još ul i li tagova koji će se nalaziti u drugom DIV tagu i koji neće služiti kao izbornik. Da smo napisali samo ul{… to bi značilo da će se svojstva primjenjivati na sve ul tagove koji postoje u dokumentu. Znači mi smo ga sad izdvojili i reki da se ovakva svojstva koriste samo na ul tagove unutar izbornik DIVa. Ostala svojstva su vam nadam se jasna, širina:200px, padding 0 i margin 0. Ovaj selektor nam u osnovi i nije toliko bitan ali sam ga iskoristio da bih vas uveo u ovaj način pisanja. Ajmo dalje. Sada opet ovo NEMOJTE dodavati već postojećem selektoru nego napravite novi koji će izgledati ovako:

Što ovo sad znači? Prva linija je slična kao iz prethodnog primjera. #izbornik ul li a:link, a:visited, znači da će se ova svojstva primjenjivati na a tagove (odnosno linkove) koji se nalaze u li tagu koji se nadalje nalaze u ul tagu i koji se nalaze u DIVu izbornik. Nadam se daće vam ova sličica malo razjasniti situaciju:

Pošto su nam a tagovi linkovi, vidjeli smo u prvom tutorialu da oni mogu imati određene načine ponašanja, zato smo ovdje odmah naveli kako želimo da se ponašaju obični linkovi (a:link) i posječeni linkovi (a:visited). Širinu sam stavio na 190px zato što sam kasnije dodao lijevi padding od 10px pa je 190px + 10px = 200px, background je naravno pozadina, koja je u ovom slučaju crne boje. Ono što nam je ovdje zanimljivo je svojstvo display:block - u doslovnom prijevodu znači prikaži blok, što je ujedno i najjednostavniji opis ovog svojstva. Znači rekli smo mu da nam link prikazuje kao blok koji će biti širine 200px i visine 20px. Ovo moramo napraviti pošto linkovi sami po sebi nisu blokovi.

Ok, ajmo dalje, sada ćemo pomoću css-a reći kako želimo da nam se linkovi ponašaju kada miš prijeđe preko istih. I to ćemo napraviti vrlo jednostavno pomoću - kako smo već u prvom tutorialu vidjeli - a:hover pseudo-selektora. Napišite novi selektor sa sljedećim svojstvima:

Ako smo sve napravili kako treba, sada kada pređemo mišem preko izbornika trebao bi promjeniti boju u bijelu. A slova da budu crne boje. Primjetit ćete da će vam se kada pređete mišem preko slova pojaviti crta ispod njih. To je zato što smo na početku .css dokumenta na a:hover odredili to svojstvo (text-decoration:underline) i sada je ovaj selektor naslijedo to svojstvo (o nasljeđivanju ću više pričati u video tutorialu). Ako ne želite da vam se pojavljuje ta crta onda samo poništite svojstvo text-decoration i to tako da u gornji selektor dodate liniju text-decoration:none;. Sada bi vam sav kod koji smo upisali trebao izgledati ovako:

A stranica bi vam trebala izgledati otprilike ovako (kliknite na sliku za veći prikaz):

Horizontalni izbornici

Sada ćemo izraditi horizontalni izbornik, i za njega ćemo koristiti isti kod koji smo do sad napisali, ali ćemo ga malo modificirati. Za početak ćemo morati izbornik premjestiti na drugu lokaciju, jednostavno zato što u DIVu lijevo nemamo mjesta da prikažemo cijeli izbornik. Zato ćete ovaj dio koda:

Kopirati i zatim obrisati te prebaciti u DIV desno pa če vam kod izgledati otprilike ovako: A stranica bi vam trebala izgledati otprilike ovako (kliknite na sliku za veći prikaz):

Ovo nam naravno nikako ne odgovara. Pošto, za početak, zapravo taj izbornik nije horiznotalan nego je samo premješten u drugi DIV. Sada da bi napravili pravi moramo se prebaciti u .css dokument i tamo doraditi CSS da nam prikazuje horizontalni izbornik. Prvo ćemo zakomentirati i promjeniti sljedeće linije: u selektoru #izbornik zakomentirajte width:200px, u selektoru #izbornik ul zakomentirajte isto width:200px - ovo smo napravili zato što nam je ovdje određena fiksna širina elemenata, a kada radimo horizontalne izbornike ne želimo da nam širina bude fiksna.

Nadalje u selektoru #izbornik ul li a:link, a:visited promjenite width:200px u width:100px. Ovo radimo zato što nam je DIV desno širok samo 480px i kad bi ostavili da nam širina bude 200px, ukupna širina bi nam bila 800px, pošto imamo 4 izbora, pa je 4 x 200 = 800px. Zato upišemo da nam širina bude 100 pa je onda 4 x 100 = 400 i na to dodamo još padding sa lijeve strane što je za svaki izbor 10px znači dobivamu ukupnu širinu od 440px. Znači kod bi vam nakon tih promjena trebao izgledati ovako:

I što se promjenilo? Pa ništa zapravo osim širine izbornika koji je sada 100px. Sada slijedi prava čarolija. Da bi nam sad izbornik postao horizontalan samo ubacimo bilo gdje u selektor #izbornik ul li a:link, a:visited ovu liniju:

pa će vam kod izgledati ovako:

I sad ako radite u Firefoxu sve izgleda ok….. No postoji tu jedan browser koji nama, web dizajnerima iz dana u dan zagorčava život. Govorim naravno o Internet Exploreru. Evo ovako bi sad naš izbornik trebao izgledati u Firefoxu (a i u većini drugih browsera koji nisu IE):

A ovako će izgledati u Internet Exploreru:

Kao što vidite razlika je poprilično velika. Ako pogledate ovu stranicu u oba preglednika vidjet ćete da postoje neke sitne razlike u pozicioniranju elemenata. To nam i nije toliki problem. Ali ovo je, kada dizajniramo stranice trebali bi ih raditi tako da ih većina popularnih browsera može pravilno pročitati. Pošto većina ljudi još uvijek koristi IE ovu razliku moramo ispraviti. To ćemo napraviti dosta jednostavno. Ispod selektora #izbornik ul dodajte drugi selektor koji će se zvati #izbornik ul li i u njega upišite svojstvo float:left, znači ovako će to izledati:

I to bi trebalo riješiti taj problem, sada bi izbornik trebao izgledati isto i u IE i u FF. E, sad kada smo riješili to, ajmo pogledat što se desilo zapravo. Kako je vertikalni izbornik postao horizontalni. Znači uz one sitne promjene smo dodali, float:left u #izbornik ul li a:link, a:visited. Float:left je zapravo izvršio transformaciju izbornika iz vertikalnog u horizontalni. Zato što je link i li elementima rekao da plutaju i to na lijevu stranu, a kad neki element pluta to znači da se neće prebaciti u drugi red dok god ima mjesta u elementu u kojem se nalazi. Možda će vam ova sličica bolje razjasniti što se desilo:

Ok to bi bilo sve što se tiče horizontalnog izbornika. Naravno ima se tu još puno toga za reći ali ne želim sada duljiti. Sada prelazimo na tzv. fancy izbornike koji će se samo nastaviti na ovaj i poboljšati ga.

“Fancy” izbornici

Da bi ovaj izbornik napravili da bude “fancy” moramo dodati samo nekoliko linija koda, poslužiti se lukavošću i jednom vrlo jednostavnom sličicom. Sličicu možete desni klik -> Save image as… ispod:

Ovo je nekakav klasičan izbornik koji ima dva stanja, jedan dok je miš negdje okolo i drugo stanje kada se miš nalazi preko izbora. E sad, ako ste prije radili izbornike u dreamweaveru imali ste onu swap image funkciju, gdje odaberete jednu sliku za prvo stanje i jednu za drugo stanje i dobivate isti efekt koji ću vam ja sad tu pokazati s razliko što će vam DW još dodati gomilu JavaScripta i tako vam onečistit kod.

U čem je stvar sa gornjom sličicom? Nju ćemo koristiti kao pozadinu za naš izbornik, jedna polovica sličice predstavlja prvo stanje a druga polovica stanje kada pređemo mišem. Pošto smo definirali da su nam izbornici visoki 20px napravio sam ovu sličicu da bude visoka duplo - 40px. Kada stavimo da pozadina izbornika bude ova sličica mi ćemo moći vidjeti samo njezinih prvih 20px a ostatak će ostati sakriven pošto je izbornik visine samo 20px. Znači u selektor #izbornik ul li a:link, a:visited ćemo postaviti da na pozadina bude ova sličica (u mom slučaju se zove izbornik-bg.gif), samo ovom linijom zamjenite svojstvo background:

i sada kada pogledate stranicu vidjet ćete da je pozadina vaših izbora prvih 20px sličice. Kada pređete preko nekog izbora sve i dalje ostaje isto. Ok, ajmo sad to riješit u selektoru #izbornik ul li a:hover obrišite svojstvo background i umjesto njega dodajte ovu liniju: i VOILA! Sada kada pređete preko nekog izbora pozadina se pretvori u donji dio sličice. Ovo se dešava zato što smo sa background-position:bottom rekli da nam tu sličicu prikazuje od dna.

Sada bi vaš izbornik trebao izgledati ovako:

A kod bi vam trebao izgledati ovako:

Ovo je jako dobra praksa izrade izbornika, zato što imate samo jednu sličicu za oba stanja i preglednici je odmah učitavaju, tako da se neće dešavati da korisnik dođe na neki izbornik i onda treba pričekat da mu se učita sličica za drugo stanje, ovako je sličica odmah cijela učitana. I za razliku od DW-a imat ćete izbornik koji će raditi na većini browsera nove generacije a nećete imati ni liniju JavaScript koda.

Eto to bi bilo to što se tiče izbornika za ovj tutorial. Šaljite mi komentare za ovaj i prijedloge za iduće tutoriale.

Ovaj unos je postavljen 22.06.2007 u 10:09 i pohranjen je pod HTML i CSS, Tutoriali, Video tutorial. Možete pratiti odgovore kroz RSS 2.0 feed. Možete preskočiti do kraja stranice i ostaviti komentar. Pinganje trenutno nije dozvoljeno.