- Veba 10 UBACIVANJE ROLLOVER SLIKA

POVEZIVANJE STRANICA
FORMATIRANJE LINKOVA
POMOU CSS STILOVA

Izrada rollover slika (slika sa prelazom)

Kada pogledate stranicu vidite da je leva kolona u tabeli za sadraj prazna jer smo tu planirali
da ubacimo sliku sa prelazom koja se menja kada posetilac dovede pokaziva mia iznad nje.
Videete kako da napravite jednu takvu sliku a da pri tome ne znate HTML i JavaScript.
U Dreamweaver-u moete upotrebiti posebne skriptove koji se zovu 'ponaanja', (behaviors),
za pravljenje slika sa prelazima, novih prozora i iskauih menija. Skript kombinuje odreeni
dogaaj koji je izazvao korisnik (npr. dovoenje pokazivaa mia iznad nekog dugmeta u
itau) sa jednom ili vie akcija koje su posledica tog dogaaja. U pozadini 'ponaanja' lei
gotov JavaScript kd.
Pre nego to krenete u izradu slike sa prelazom neophodno je da pripremite dve slike istih
dimenzija koje e se menjati. Pripremu slika uradite u Photoshop- u.
Otvorite stranicu index.htm. i pozicionirajte se u prvu kolonu petog reda tabele za
sadraj. Podesite vertikalno poravnanje elije na Top.
Iz linije menija izaberite Insert / Image Objects / Rollover Image.
Otvorie se dijalog prozor Insert Rollover Image koji zahteva orignalnu sliku i sliku za
prelaz.
Koristei sliku telefona Samsung kreirajte u Photoshop- u, dve slike za rollover efekat
podeavajui da im je irina po 96 piksela.
Skinite boju sa pozadinskog sloja za obe slike i postavite ga da bude providan.
Snimite prvu sliku u direktorijum images u okviru sajta Mobilni Telefoni pod nazivom
samsung_osnovna.jpg.
Sada kreirajte drugu sliku koja e se pojaviti kada se pree miem preko nje.
Upotrebom stilova za sloj dodajte efekat spoljnog sjaja na sloj gde se nalazi slika
telefona bez pozadine,Outer Glow, sa sledeim parametrima (Opacity: 30%, Boja:
#1A03F7, Size: 10px).
Drugu sliku snimite kao i prethodnu u direktorijum images u okviru sajta Mobilni
Telefoni pod nazivom samsung _prelaz.jpg.
Na ovaj nain dobili ste potrebne slike koje ete koristiti za izradu rollover objekta.
U dijalog prozoru Insert Rollover Image podesete parametre kao to je prikazano na
slici 1.

Slika 1.

Poeljno je da date ime slici (ako to ne uradite Dreamweaver automatski dodaje svoja imena
npr. Image1, Image2, ...). Ta imena moraju biti smislena i ukazivati na namenu slika, kao to
je u naem sluaju (samsung). U imenima ne sme biti razmaka i specijalnih znaka. Prvo treba
da unesete sliku koja e biti original, tj. sliku koja e biti na strani pre nego to posetilac
dovede pokaziva mia iznad nje (dugme Browse do polja Orginal Image).Zatim morate da
unesete sliku koja e se pojaviti kada posetilac pree pokazivaem preko originalne slike
(dugme Browse do polja Rollover Image). Slika sa prelazom koja se pojavljuje na poetku i
ona koja je zamenjuje treba da imaju iste dimenzije, inae e druga slika biti smanjena ili
uveana u skladu s dimenzijama prve slike i zato izobliena.
Takoe, odmah moete napraviti grafiku hipervezu unosei u polje 'When Click, Go To
URL' adresu ili putanju do povezane strane. Ako ne upiete nita u ovo polje, Dreamweaver
e upisati znak #, u polje link na prozoru Properties. Taj znak saoptava browseru da
pokaziva mia pretvori u aku kada ga korisnik dovede iznad slike, ali i da ga ostavi na toj
strani kada klikne na nju. Ovde moete zameniti ovaj znak proizvoljnom hipervezom ka
drugoj strani istog sajta, ili bilo kakvom URL adresom, ali ne smete ovo polje ostaviti prazno
jer ete tako ukloniti JavaScript kd koji izvrava prelaz sa jedne slike na drugu. Ova metoda
je dobra ako prethodno niste uneli sliku, jer omoguava da istovremeno unesete sliku i da je
definiete kao sliku s prelazom.
Istim postupkom napravite rollover sliku koju ete ubaciti u prvu kolonu treeg reda a odnosi
se na telefon Sony Ericsson (po izboru). Nakon toga stranica index.htm treba da vam izgleda
kao na slici 2.

Slika 2.

Rad sa vezama
Mo HTML-a potie od njegove ugraene mogunosti da povee tekstualna i grafika
podruja sa drugim dokumentima. Browser obino istie ta podruja (bojom ili
podvlaenjem) kako bi ukazao korisniku da su to hipertekstualne veze. Hiperveza u HTML -u
ima dva dela: ime (ili URL adresu) datoteke s kojom se povezuje i tekst ili grafiku koja slui
kao podruje na koje se moe kliknuti i ono se naziva aktivno podruje (hotspot) na strani.
Kada posetilac klikne na aktivno podruje, browser koristi putanju hiperveze za skok do
povezanog dokumenta.
Najznaajniji elemenat lei u nazivu protokola za prenos hiperteksta _ (Hipertext Transfer
Protocol) _ odnosno, u onom http na poetku URL adrese, a to je upravo hipertekst.
Postoje etiri razliite vrste veza koje moete koristiti:
Apsolutna putanja (http://www.prezentacija.com/direktorijum1/strana.htm) pokazuje na
mesto na Internetu izvan prezentacije na kojoj se nalazi trenutno otvorena stranica.U
putanji http://www.prezentacija.com/
o direktorijum1/strana.htm) dokument strana.htm nalazi se u direktorijumu
o direktorijum1 koji se nalazi u korenu prezentacije www.prezentacija.com
Putanja koja se odnosi na dokument pokazuje od trenutno otvorene stranice do drugog
dokumenta u istoj prezentaciji, a take i kose crte koriste se da bi pretraiva znao kada
treba da pogleda u drugi direktorijum da bi pronaao stranicu.
Putanja u odnosu na koren prezentacije takoe pokazuje od trenutno otvorene stranice
do drugog dokumenta u istoj prezentaciji. Umesto da se sa takama i kosim crtama
pokae kretanje od direktorijuma do direktorijuma, pretraiva poinje da trai stranicu
od matinog direktorijuma.
Imenovana sidra su veze do mesta unutar same stranice, tj. to su veze od jednog do
drugog mesta na istoj stranici ili veze od jedne stranice do odreenog mesta na drugoj
stranici.
Podrazumevana boja linka u browseru je plava. Poseene hiperveze (Visited Links)
predstavljaju stanje linkova kada ih je korisnik posetio. Standardna boja za ovo stanje linkova
browser-ima je ljubiasta. Aktivne hiperveze (Active Links) predstavljaju linkove koje
korisnik aktivira miem i zadri taster mia pritisnut. Podrazumevana boja je crvena.
Kako je ve reeno, hiperveze vode posetioca do drugih dokumenata unutar tekue Web
strane ili do strana na drugim lokacijama. Postoje dva opta pristupa kreiranja hiperveza
(links):
napraviti set praznih strana, zatim ih povezati, i na kraju stavljati sadraj u njih;
napraviti link ka strani koja jo ne postoji pa tek kasnije kreirati stranicu i dati joj
ime koje ste ve naveli pri izradi linka.
Napraviti hipertekstualnu vezu veoma je jednostavno. Treba oznaiti odreen deo teksta (1),
na prozoru Properties pritisnuti drugu ikonicu desno od polja link (2).
Select File (3).

 1
Pritisnemo OK (4) i ime te strane pojavie se u polju Link, a tekst koji smo izabrali bie
oznaen kao hiperveza (5) i imae boju koju smo mu odredili u Page Properties-u ili stilom
koji primenimo na link. (slika 3)
Postoji jo jedan, jednostavniji, nain za kreiranje linka. Kao i pre oznaite eljeni tekst (1), a
zatim na prozoru Properties pritisnite prvu ikonicu (2) do polja Link (Point to File), zadrite
taster mia pritisnut i prevucite pokaziva do Site Panela (3). Pustite taster tano iznad strane
sa kojom elite da napravite link (4). I link je napravljen (5). (slika 4)

Slika 3.

Slika 4.

Ako znate imena strana sa kojima se povezujete moete ih upisati neposredno u polje link.
Ukoliko iste hiperveze koristite vie puta utedeete vreme ako u padajuoj listi desno od
polja Link (u prozoru Properties) izaberete neku od nedavno korienih hiperveza. Kada ste
napravili hipervezu(e) obavezno je proverite (da li vodi do eljene strane) u vaem browser-u.
Ovako napravljen link primer je relativne putanje (u prozoru Select File izaberite Document
za opciju Relative Tool) to je najbolja varijanta za lokalne hiperveze na veini sajtova.
5

 1
Relativna putanja izostavlja deo apsolutne URL adrese koji je isti za tekuu stranu i za stranu
povezanu sa njom, a ostavlja onaj deo koji se razlikuje.
Za povezivanje sa stranama unutar sajta, kao i sa drugim Web lokacijama, moete da
upotrebite i slike. Postupak kreiranja grafike hiperveze je isti kao i postupak kreiranja
tekstualne veze. Jedina razlika je u tome to sada biramo odreenu sliku a ne tekst. Da bismo
napravili link koji e biti apsolutna putanja (koji e sadrati celokupnu URL adresu
povezanog dokumenta), potrebno je selektovati neku sliku ili tekst i u polju Link na prozoru
Properties upisati celokupnu URL adresu, npr. http://www.vets.edu.yu. Kada u browser-u
pokazivaem preete iznad slike on se pretvara u aku koja pokazuje da je slika povezana
hipervezom. Ako slika ima okvir boja okvira e biti jednaka podrazumevanoj boji hiperveze,
koju ste zadali u panelu Page Properties.
Sada emo postaviti linkove na stranicu index.html. Putanja koja se zadaje mora da bude
relativna jer se sve veze postavljaju unutar korenskog direktorijuma sajta.

:
Otvorite stranicu index.html.
Selektujte predvien tekst O nama ili Poetna za link ka stranici index.html.
U polje Link prozora Properties pomou alatke Point to File poveite selektovani tekst
sa odgovarajuom stranicom.
Na ovaj nain napravili ste link (hipervezu) od teksta O nama.
Na isti nain napravite linkove za tekst Proizvodi i Kontakt ka stranama proizvodi.html,
kontakt.html upisujui relativnu putanju do tih stranica, koje e se posle kreiranja
nalaziti u korenskom direktorijumu sajta.
Isti postupak ponovite i u tabeli za dno stranice, gde je smetena donja navigacija.
Kada postavite linkove na tekst predvien za njih dobiete plavu boju koja je po
default-u podeena u panelu Page Properties. Za sada ostavite tu boju jer ete kasnije
primenom CSS stilova da ih formatirate.
Pored ovih linkova za povezivanje sa stranicama veoma je znaajno i pravljenje hiperveza za
slanje elektronske pote, jer na taj nain olakavate posetiocima da se poveu sa vama.
Oznaite mesto na strani gde elite da umetnete hipervezu za slanje E-mail. Izborom opcije iz
File menija Insert / E-mail Link pojavie se prozor E-mail Link (slika 5), gde unosite tekst
(koji e se prikazati na strani kao hiperveza) i E-mail adresu. Ako prethodno izaberete tekst
koji se ve nalazi na strani i zatim otvorite prozor E-mail Link izabrani tekst e se pojaviti u
polju tekst.

Slika 5.

Definisanje CSS stilova za tekst koji predstavlja link

Samo kreiranje stilova vrlo je lako, a temu smo radi lakeg praenja podelili u tri dela:
upoznavanje i razumevanje CSS link stilova
kreiranje podrazumevanih link selektora
kreiranje viestrukih CSS link stilova
Da krenemo od prvog dela i upoznavanja sa stilovima koji e se upotrebiti za stilizaciju
linkova na HTML stranicama. Va podrazumevani stil za linkove moe da izgleda ovako:

a:link { color: #333333}

a:visited { color: #FFFFFF}
a:hover { color: #CCCCCC; background-color: #333333; text-decoration: none}
a:active { color: #333333}
Kod stilova, u CSS argonu, ova definicija naziva se i norma ili pravilo (rule). Svaka norma
sastoji se iz nekoliko komponenti. Pa, da krenemo od pregleda delova prvog podrazumevanog
link stila.
U naem sluaju selektor a:link { color: #333333} moemo slobodno prevesti u znaenje:
"Browser-u, sve linkove na stranici oboji u #333333 (nijansa sive) boju". Zapazite da za naa
etiri stila linkova (link, visited, hover, i active) nisu deklarisani fontovi, niti veliina fontova.
Ovo deklarisanje odnosi se na ono to nazivamo efikasnost i nasleivanje. Vae stranice e
mnogo bolje izgledati ukoliko za linkove (hiperlinkove) koristite isti font i veliinu fonta kao
to je kod okruujueg teksta. Rekli smo u proloj vebi da linkovi (tekst, slike...)
predstavljaju veze ka drugim sadrajima zato to su ubaeni unutar anchor (sidro) taga - <a>.
Nestilizovani linkovi podrazumevano su obojeni u plavu boju, a ve poseeni linkovi su
ljubiasti. Aktivni link predstavlja se crvenom bojom. Upravo nam kaskadni stilovi (CSS)
dozvoljavaju da preskoimo i unapredimo prikaz browser-ovih podrazumevanih link stilova u
neto veoma kreativno i estetski istanano.
CSS specifikacija definie link stilove kao tzv. pseudoklase, tj. specijalne klase koje opisuju
stilove za elemente koji se primenjuju samo pod odreenim uslovima. Moda ovo na prvi
pogled izgleda komplikovano, ali u stvari veoma je jednostavno:
a:link opisuje bilo koji link koji nije poseen od strane korisnikovog browser -a.
Drugim reima, sadraj koji je linkovan jo se ne nalazi u browser -ovoj lokalnoj
memoriji,
7

 1
a:visited opisuje bilo koji link koji je poseen i koji se nalazi u browser -ovoj
lokalnoj memoriji,
a:hover opisuje izgled hiperlinkova kada korisnik pree pokazivaem mia iznad
njih. Svi browser-i od verzije 4, prepoznaju i interpretiraju ovu klasu,
a:active opisuje izgled linka na koji je kliknuto ali jo nije otputen taster mia.
Nakon upoznavanja sa linkovima i pseudoklasama prelazimo na kreiranje selektora, tj. stilova
za linkove, i to u programu Dreamweaver . Prvi selektor koji emo kreirati je a:link, selektor
za hiperlinkove koji jo nisu poseeni od strane korisnikog browser-a.
Otvorite dijalog prozor New CSS Style za kreiranje novog stila.
U opcijama Selector Type izaberite opciju Advanced.
U padajuoj listi Selector izaberite a:link i upiite a.LevaNavigacija:link (slika 6).

Slika 6.

U opciji Define In iz padajue liste izaberite fajl stilovi.css u kome e se uvati svi
stilovi za sve selektore.
Kliknite OK.
Otvorie se dijalog prozor za definisanje selektora a.LevaNavigacija:link sa
kategorijom Type.
U kategoriji Type podesite sledee parametre: font: Arial, Helvetica, sans-serif,
size: 12 pixels, font-weight: bold, color: #092189, text-decoration: none;
Kliknite OK.
Da biste dodali i stilove za ostale selektore (pseudoklase), kliknite ponovo na dugme New
CSS Style u okviru palete Designe. Nakon ovoga otvorie vam se ve poznati dijalog prozor,
gde ete u polju Selector redom birati: a:visited, a:active, a:hover ali svakom od njih dodati
naziv LevaNavigacija (a.LevaNacvigacija: visted,...).Neka za sve selektore u polju Define In
stoji va prethodno kreirani CSS fajl-stilovi.css. Za svaki selektor u dijalogu Style Definition
odrediti potrebne osobine (uglavnom je re o boji i osobini da li je tekst podvuen ili ne).
a.LevaNavigacija:link { font: Arial, Helvetica, sans-serif; size: 12 pixels; font-weight: bold; color: #092189;
text-decoration: none; }
a.LevaNavigacija:visited { font: Arial, Helvetica, sans-serif; size: 12 pixels; font-weight: bold; color: #092189;
text-decoration: none; }
a.LevaNavigacija:active{ font: arial, helvetica, sans-serif; size: 12 pixels;
font-weight: bold; color: #092189; text-decoration: underline; }
a.LevaNavigacija:hover { font: arial, helvetica, sans-serif; size: 12 pixels;
font-weight: bold; color: #FFB13E; text-decoration: underline; }

 1
Stil koji ste kreirali za linkove primenite na svim stranica vaeg sajta. Da biste to uradili treba
da fajl stilovi.css u kom ste sauvali sve kreirane klase stilova veete za svaku stranicu. tj. da
stranici pokaete putanju do traenog fajla. HTML kd kojim se odreena klasa stila vee za
stranicu postavlja se u oviru taga <head>...</head> i pie na sledei nain:
<link href="CSS/stilovi.css" rel="stylesheet" type="text/css">.

Postupak vezivanja stila za stranicu

Iz File menija izaberite opciju Window / CSS Styles.
Otvorie se panel Design sa desne strane prozora Document sa izabranim tabom CSS
Styles.
Otvorie se dijalog prozor Attach External Style Sheet (slika 7).

Slika 7.

Pomou dugmeta Browse u polju File / URL pronaite fajl stilovi.css.

U opcijama Add as izaberite opciju Link.
Kliknite na OK.
Nakon prethodno izvrenog postupka vezivanja fajla stilovi.css za ovaj fajl moete da izvrite
formatiranje istih. Oznaite tekst koji predstavlja link (O nama) i primenite stil
levaNavigacija. Postupak ponovite i za linkove Proizvodi i Kontakt. Ostalo je jo da
formatiramo sadraj tabele za donju navigaciju za koju ete napraviti stilove. Za linkove
donje navigacije napravite novi stil sa sledeim parametrima:
a.dnoTabele:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FF9900;}
a.dnoTabele:visited {
font-size: 11px;
color: #FF9900;}
a.dnoTabele:active {
color: #FF9900;
text-decoration: underline;}
a.dnoTabele:hover {
color: #6699FF;
text-decoration: underline;}

 1
Za tekst i uspravne linije izmeu linkova napravite novi stil sa sledeim parametrima:
.tekstMali {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #6699FF;}

ZADATAK ZA SAMOSTALAN RAD:

NAPOMENA: DA BI SE ZADATAK UZEO U RAZMATRANJE ZA DOBIJANJE
ODREENOG BROJA BODOVA MORA DA BUDE URAENO SLEDEE:
NAPRAVLJENA STRUKTURA SAJTA (DIREKTORIJUM ZA SAJT,
PODIREKTORIJUMI ZA SLIKE I STILOVE)
IZVRENO DEFINISANJE SAJTA KROZ DREAMWEAVER
PODEENA OSNOVNA SVOJSTVA STRANICA (ENCODING, MARGINE,
TITLE).
Ukoliko nisu prvo ispunjene navedene tri stavke, zadatak se nee uzimati u
razamatranje!!!!!!!!!!!
1. Napravite direktorijum na lokalnom raunaru pod nazivom mobilni_telefoni. U
okviru njega napravite poddirektorijum images za slike i podirektorijum css za
stilove. Definiite sajt mobilni telefoni pomou Dreamweaver-a.
2. Napravite
stranici
index.html.
Podesite
osnovna
svojstva
stranice
(naslov: MOBILNI SVET, kodni raspored na latinini)
3. Stranicu index.html organizujete da izgleda kao na slici i formatirati kompletan
sadraj koristei CSS stilove (PRAKTIKUM ZA VEBE strana 106 do 120).
4. Napraviti rollover efekat od slika samasung_osnovna.jpg i samsung_prelazna.jpg i
postaviti da je link ka stranici http://www.mobilnisvet.com

index.html

10

 1
5. Na osnovu stranice index.html napraviti stranice proizvodi.html i kontakt.html
prikazane kao na slikama dole. Linkovati stranice na sledei nain:
Tekst Poetna link ka index.html
Tekst Proizvodi- link ka proizvodi.html
Tekst Kontakt-link ka kontakt.html
6. Napraviti stilove za sve linkove (leva navigacija i donja navigacija) kao to je opisano
u vebi i primeniti ih na linkove.

Napomena: Linkove postaviti na sve tri stranice!!!!

Prilikom formatiranja stranice proizvodi.html napraviti stil za formatiranje naziva telefona sa
sledeim parametrima:
background-color: #E1E1E1;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #990000;
Napravljeni stil primeniti kao na slici.

proizvodi.html

11

 1
Prilikom formatiranja stranice kontakt.html napraviti stil za formatiranje teksta koji se odnosi
na adrese, sa sledeim parametrima:
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #333333;
Napravljeni stil primeniti kao na slici.

kontakt.html

12