Efekti sa linkovima i navigacija
multimediji i globalni mediji
Višestruki stilovi linkova pomoću selektora klasa
Još jedna fantastična opcija koja postoji u CSS-u je mogućnost da u dokumentu postoji više stilova za linkove. Ovo je posebno korisno kada na strani
postoji neka oblast koja je različita u odnosu na ostale. Sjajan primer je oblast za navigaciju sa plavom pozadinom, dok deo sa sadržajem treba da ima plavu
pozadinu. Ako Želite da na plavoj pozadini budu beli linkovi, te boje ne možete primeniti i na belu pozadinu, pošto se lnikovi ne bi videli.
Višestruke stilove za linkove možete dobiti na različite načine, uključujući i kreiranje posebnih klasa. Mogli biste da imate osnovne stilove za linkove za
podrazumevane vrednosti i sadržaj, a onda biste mogli da napravite specijalnu klasu za deo sa navigacijom (videti primer 10.4).
Primer
10.7
Upotreba
klasa za kreiranje višestrukih stilova
/* default link styles, appropriate for content area */
a {color: orange; text-decoration: none;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: #999;} a:active {color: red;}
/* classed link stvles, appropriate for navigation area */
a.nav {color: white; text-decoration: none;}
a.nav:link {color: white;}
a.nav:visited {color: yellow;}
a.nav:hover {color: orange;}
a.nav:active {color:#999;}
Nakon toga bi trebalo da primenite atribut class=’nav” na one linkove na koje ta klasa treba da se primeni:
<a class=”nav” href=”o nama.html”>O nama</a>
Napravio sam HTML datoteku sa dva dela koji predstavljaju sadržaj i navigaciju i na oblast za navigaciju primenio klasu link (videti sliku 10.7).
Slika 10.8 Primena višestrukih linkova uz pomoć klasa
dipl.ing. Aleksandar Rikalović M.Sc.
Efekti sa linkovima i navigacija
multimediji i globalni mediji
Slika 10.8 Primena višestrukih linkova uz pomoć klasa
dipl.ing. Aleksandar Rikalović M.Sc.
Efekti sa linkovima i navigacija
multimediji i globalni mediji
Stilovi za linkove pomoću nasleđivanje
Naravno da puno klasa znači ne samo pisanje više CSS koda, već i ubacivanje brojnih atributa class u HTML. Ako treba da definišete stilove za puno
sadržaja i ako koristite klase, to dovodi do onog što specijalisti nazivaju “ovo je klasa”, odnosno preterane uptorebe klasa. Ovo možete izbeći ako koristite
drugu vrstu selektora.
Elementi se mogu jednoznačno identifikovati pomoću tzv. ID selektora. Ovi selektori počinju tarabicom iza koje sledi korisničko ime. Ovo je slično
onome što ste radili kada ste pravili klase.
#id-ime
NAPOMENA
Razlika između selektora klasa i ID selektora je kritična. Selektori klasa mogu se u dokumentu koristiti koliko god puta želite, dok se ID može u dokumentu koristiti samo iednom. Prema tome, ID oznake su korisne kada se identifikuju jedinstveni delovi dokumenta, kao što su navigacija, sadržaj, deo sa
naslovima ili futer, U narednim poglavljima ćete videti da je ovo sjajna mogućnost, posebno kada budemo govorili o rasporedima pomoću CSS-a.
Nakon što je konkretan odeljak identifikovan, možete koristiti selektore za nasleđivanje. Ovo su selektori koji selektuju sadržaj na osnovu elementa
roditelja. Prvo treba postaviti selektor za roditelja, nakon toga blanko karakter, pa onda element kojem želite da prosledite stilove: #nav a. Ovom deklaracijom
se selektuje svaki element a, elementa roditelja definisanog sa nav. U primeru 10.5 se vidi kako ovo radi u kontekstu višestrukih linkova.
Primer
10.8
Višestruki
linkovi pomoću ID-a i selektora za nasleđivanje
<!DOCTYPE html PUBLIC ‘-//1N3C//DTD XHTML 1.8 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.cltd”>
<html xmlns-”http://www.w3.org/1999/xhtml”>
<head>
<title>working with style</title>
<style type=”text/css”>
body {font: 14px Georgia, Times, serif; color: white; background-color: black;}
h1 {font: 22px Arial, Helvetica, sans-serif; color: orange; text-decoration: underline;}
h2 {font: italic 20px Georgia, Times, serif; color: #ccc; background-color: black;
dipl.ing. Aleksandar Rikalović M.Sc.
Efekti sa linkovima i navigacija
multimediji i globalni mediji
/* link defaults */
a {color: orange; text-decoration: none;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: #999; text-decoration: underline;>
a:active {color: red;}
/* link styles for ali descendant links of the example2 division */
#example2 {background-color: white; color: black;}
#example2 a {color: lime;}
#example2 a:link {color: lime;}
#example2 a:visited {color: red;}
#example2 a:hover {color: aqua; text-decoration: underline;}
#example2 a:active {color: #999;}
</style>
<body>
<div id”example1”>
<p>I married early, and was happy to find in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no
opportunity of procuring those of the <a href=”http://www.prenftall.com/”>most</a> agreea Dlekind. We had birds, gold fish, a fine dog, nabbits, a small
monkey, and a cat.</p>
<div id=”example2”>
<p>This latter was a <a href=”http://wwwprenhall.com/”>remarkably</a> large and
beautiful animal, entirely black, and sagacious to an astonishing degree. In
speaking of his intelligence, my wife, who at heart was not a little tinctured
with superstition, made frequent allusion to the ancient popular notion, which
regarded ali black cats as witches in disguise.</p>
</body>
dipl.ing. Aleksandar Rikalović M.Sc.
Efekti sa linkovima i navigacija
multimediji i globalni mediji
Horizontalna lista za navigaciju
Pomoću osobine display: inline; liste možete da napravite u redu, što znači da se prikazuju horizontalno (videti primer 10.13).
Primer
10.9
Markup
i CSS za horizontalnu listu za navigaciju pomoću boja
<!DOCTYPE html PUBLIC “ -//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/XHTML1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>working with style</title>
<style type=”text/css”>
body {font: 14px Georgia, Times, serif; color: black; }
ul#navlist {margin-left: 0; padding-left: 0; white-space: nowrap;}
#navlist li {display: inline; list-style-type: none;}
#navlist a { padding: 3px 10px; }
#navlist a:link, #navlist a:visited {color: black; background-color: orange;text-decoration: none;}
#navlist a:hover {color: white; background-color:#999; text-decoration: none;}
</style>
</head>
<body>
<div id=”navcontainer”>
<ul id=”navlist”>
<li><a href=o nama.html”>O nama</a></li>
<li><a href=”proizvodi.html”>Proizvodi</a></li>
<li><a href=”partneri.html”>Partneri</a></li>
<li><a href=”galerija.html”>Galerija</a></li>
<li><a href=”kontakt.html”>Kontakt</a></li>
</body>
</html>
dipl.ing. Aleksandar Rikalović M.Sc.
Efekti sa linkovima i navigacija
multimediji i globalni mediji
Rezultat je vrlo lepa horizontalna lista za navigaciju (videti sliku 10.9).
Slika 10.9 Upotreba listi i boja za dobijanje horizontalne navigacije
dipl.ing. Aleksandar Rikalović M.Sc.
Efekti sa linkovima i navigacija
multimediji i globalni mediji
Horizontalna lista za navigaciju
Kao što slike možete da postavite u pozadinu vertikalnih listi, to možete uraditi i sa horizontalnim listama. U prethodnoj listi stilova sam napravio nekoliko izmena. Dodao sam link i slike u pozadini za stanje hover. Pored toga sam font podebljao i boju podesio na belu i to i za link , a za stanje hover crnu, što je
dobar kontrast za sliku koja se pojavljuje kada se miš postavi iznad linka (videti primer 10.10).
za navigaciju uz upotrebu slika u pozadini
Primer
10.10
Lista
<!DOCTYPE html PUBLIC “ -//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/XHTML1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>working with style</title>
<style type=”text/css”>
body {font: bold 14px Georgia, Times, serif; color: black; }
ul#navlist {margin-left: 0; padding-left: 0; white-space: nowrap;}
#navlist li {display: inline; list-style-type: none;}
#navlist a { padding: 3px 10px; }
#navlist a:link {color: white; background-image: url(dugme.gif); text-decoration: none;}
#navlist a:visited {color: black; background-image: url(dugmehover.gif); text-decoration: none;}
#navlist a:hover {color: black; background-image: url(dugmehover.gif); text-decoration: none;} none;}
</style>
</head>
<body>
<div id=”navcontainer”>
<ul id=”navlist”>
<li><a href=o nama.html”>O nama</a></li>
<li><a href=”proizvodi.html”>Proizvodi</a></li>
<li><a href=”partneri.html”>Partneri</a></li>
<li><a href=”galerija.html”>Galerija</a></li>
<li><a href=”kontakt.html”>Kontakt</a></li>
</body>
</html>
dipl.ing. Aleksandar Rikalović M.Sc.
Efekti sa linkovima i navigacija
multimediji i globalni mediji
Na slici 10.10 je prikazana elegantna šema za navigaciju.
Slika 10.10 Horizontalna navigacija sa listama i slikama
SKOK:
KVANTNI
Efekat hover i Internet Explorer
Prilikom rada sa listama za navigaciju, posebno kada budete koristili horizontalne liste, videćete da postoje dramatične razlike u tome kako Internet
Explorer radi sa stilovima u odnosu na Mozillu, Firefox, Operu, Safari... Internet Explorer već godinama nije ažuriran, a u verziji 6.0 za Windows je izostala
podrška za CSS. Rezultat je da morate da pravite posebne stilove da biste osigurali da će ono što ste uradili izgledati kako treba u više različitih pretraživača
(kao što su oni koje sam ovde pomenuo).
Jedna od značajnih stvari u vezi sa podrškom Internet Explorera je da on podržava selektor :hover samo za element a, dok u svim ostalim pretraž iva
cima postoji podrška za taj efekat za sve elemente. Ako bi u lE-u postojala takva podrška, bilo bi mnogo manje zbrke i konfuzije u radu sa navigacijom na bazi
listi, a da ne pominjemo niz dodatnih opcija koje se mogu koristiti za definisanje izgleda listi bez upotrebe JavaScripta. Objašnjenje nekih drugih stvari vezanih
za padajuće liste, kao što su navigacija sa padajućim menijima ili navigacija koja se pojavljuje u letu, a koje ne funkcionišu u lE-u, možete pronaći u članku
Erica Mevera, na adresi http://www.mey-erweb.com/eric/css/edge.
dipl.ing. Aleksandar Rikalović M.Sc.
Efekti sa linkovima i navigacija
multimediji i globalni mediji
Bogati linkovi, liste i navigacija
Vrlo je važno napomenuti da tehnike koje smo pomenuli u ovom poglavlju, posebno one koje se odnose na navigaciju pomoću listi, predstavljaju relativno nov koncept u web dizajnu. Sama činjenica da CSS omogućava da menjate način prikazivanja elementa ga čini povoljnim za upotrebu u slikovitom izlaganju kad god je to moguće.
NAPOMENA
O CSS listama možete više naučiti ako posetite Listamatic, tutORIAL i galeriju sjajnih navigacija baziranih na CSS-u, na adresi http://css.maxdesign.com.
au/listamatic. Ako vam je potreban alat koji bi neke od tih listi mogao da napravi onlajn, proverite List-O-Matic, na adresi http://www.accessify.com/tools-andwizards/list-o-matic/list-o-matic.asp.
Nadalje ćete se detaljnije upoznati sa kontrolom margina i rastojanja, što je važno kod preuzimanja kontrole na vizuelnim elementima na strani. Ovo će
omogućiti da kasnije nastavite sa složenijim elementima CSS-a, kao što je raspored na strani.
dipl.ing. Aleksandar Rikalović M.Sc.
Download

Vežba 10