- Vežba 10 - UBACIVANJE ROLLOVER SLIKA POVEZIVANJE

- Vežba 10 -

UBACIVANJE ROLLOVER SLIKAPOVEZIVANJE STRANICA

FORMATIRANJE LINKOVA POMOĆU CSS STILOVA

Дигиталне мултимедије 1

2

Izrada rollover slika (slika sa prelazom)

Kada pogledate stranicu vidite da je leva kolona u tabeli za sadržaj prazna jer smo tu planirali da ubacimo sliku sa prelazom koja se menja kada posetilac dovede pokazivač miša iznad nje. Videćete kako da napravite jednu takvu sliku a da pri tome ne znate HTML i JavaScript. U Dreamweaver-u možete upotrebiti posebne skriptove koji se zovu 'ponašanja', (behaviors), za pravljenje slika sa prelazima, novih prozora i iskačućih menija. Skript kombinuje određeni događaj koji je izazvao korisnik (npr. dovođenje pokazivača miša iznad nekog dugmeta u čitaču) sa jednom ili više akcija koje su posledica tog događaja. U pozadini 'ponašanja' leži gotov JavaScript kôd. 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

sadržaj. Podesite vertikalno poravnanje ćelije na Top.

• Iz linije menija izaberite Insert / Image Objects / Rollover Image.

• Otvoriće se dijalog prozor Insert Rollover Image koji zahteva orignalnu sliku i sliku za prelaz.

• Koristeći sliku telefona Samsung kreirajte u Photoshop- u, dve slike za rollover efekat podešavajući 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 pređe mišem preko nje.

• Upotrebom stilova za sloj dodajte efekat spoljnog sjaja na sloj gde se nalazi slika telefona bez pozadine,Outer Glow, sa sledećim 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 način 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.


3

Slika 1.

Poželjno 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 našem slučaju (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č miša iznad nje (dugme Browse do polja Orginal Image).Zatim morate da unesete sliku koja će se pojaviti kada posetilac pređe pokazivačem preko originalne slike (dugme Browse do polja Rollover Image). Slika sa prelazom koja se pojavljuje na početku i ona koja je zamenjuje treba da imaju iste dimenzije, inače će druga slika biti smanjena ili uvećana u skladu s dimenzijama prve slike i zato izobličena. Takođe, odmah možete napraviti grafičku hipervezu unoseći u polje 'When Click, Go To URL' adresu ili putanju do povezane strane. Ako ne upišete ništa u ovo polje, Dreamweaver će upisati znak #, u polje link na prozoru Properties. Taj znak saopštava browseru da pokazivač miša pretvori u šaku kada ga korisnik dovede iznad slike, ali i da ga ostavi na toj strani kada klikne na nju. Ovde možete 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 kôd koji izvršava prelaz sa jedne slike na drugu. Ova metoda je dobra ako prethodno niste uneli sliku, jer omogućava da istovremeno unesete sliku i da je definišete kao sliku s prelazom. Istim postupkom napravite rollover sliku koju ćete ubaciti u prvu kolonu trećeg 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.


4

Rad sa vezama Moć HTML-a potiče od njegove ugrađene mogućnosti da poveže tekstualna i grafička područja sa drugim dokumentima. Browser obično ističe ta područja (bojom ili podvlačenjem) 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 služi kao područje na koje se može kliknuti i ono se naziva aktivno područje (hotspot) na strani. Kada posetilac klikne na aktivno područje, browser koristi putanju hiperveze za skok do povezanog dokumenta. Najznačajniji elemenat leži u nazivu protokola za prenos hiperteksta _ (Hipertext Transfer Protocol) _ odnosno, u onom http na početku URL adrese, a to je upravo hipertekst.

Postoje četiri različite vrste veza koje možete 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 tačke i kose crte koriste se da bi pretraživač znao kada treba da pogleda u drugi direktorijum da bi pronašao stranicu.

• Putanja u odnosu na koren prezentacije takođe pokazuje od trenutno otvorene stranice do drugog dokumenta u istoj prezentaciji. Umesto da se sa tačkama i kosim crtama pokaže kretanje od direktorijuma do direktorijuma, pretraživač počinje da traži stranicu od matičnog 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 određenog mesta na drugoj stranici.

Podrazumevana boja linka u browseru je plava. Posećene hiperveze (Visited Links) predstavljaju stanje linkova kada ih je korisnik posetio. Standardna boja za ovo stanje linkova browser-ima je ljubičasta. Aktivne hiperveze (Active Links) predstavljaju linkove koje korisnik aktivira mišem i zadrži taster miša pritisnut. Podrazumevana boja je crvena. Kako je već rečeno, hiperveze vode posetioca do drugih dokumenata unutar tekuće Web strane ili do strana na drugim lokacijama. Postoje dva opšta pristupa kreiranja hiperveza (links):

• napraviti set praznih strana, zatim ih povezati, i na kraju stavljati sadržaj 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 označiti određen deo teksta (1), na prozoru Properties pritisnuti drugu ikonicu desno od polja link (2). Отвориће се прозор Select File у коме треба изабрати страну са којом желимо да направимо везу (3).


5

Pritisnemo OK (4) i ime te strane pojaviće se u polju Link, a tekst koji smo izabrali biće označen kao hiperveza (5) i imaće boju koju smo mu odredili u Page Properties-u ili stilom koji primenimo na link. (slika 3) Postoji još jedan, jednostavniji, način za kreiranje linka. Kao i pre označite željeni tekst (1), a zatim na prozoru Properties pritisnite prvu ikonicu (2) do polja Link (Point to File), zadržite taster miša pritisnut i prevucite pokazivač do Site Panela (3). Pustite taster tačno 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 možete ih upisati neposredno u polje link. Ukoliko iste hiperveze koristite više puta uštedećete vreme ako u padajućoj listi desno od polja Link (u prozoru Properties) izaberete neku od nedavno korišćenih hiperveza. Kada ste napravili hipervezu(e) obavezno je proverite (da li vodi do željene strane) u vašem 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 većini sajtova.


6

Relativna putanja izostavlja deo apsolutne URL adrese koji je isti za tekuću 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, možete da upotrebite i slike. Postupak kreiranja grafičke hiperveze je isti kao i postupak kreiranja tekstualne veze. Jedina razlika je u tome što sada biramo određenu sliku a ne tekst. Da bismo napravili link koji će biti apsolutna putanja (koji će sadržati 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 pokazivačem pređete 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 predviđen tekst O nama ili Početna za link ka stranici index.html. • U polje Link prozora Properties pomoću alatke Point to File povežite selektovani tekst

sa odgovarajućom stranicom. • Na ovaj način napravili ste link (hipervezu) od teksta O nama. • Na isti način napravite linkove za tekst Proizvodi i Kontakt ka stranama proizvodi.html,

kontakt.html upisujući 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 smeštena donja navigacija. • Kada postavite linkove na tekst predviđen za njih dobićete plavu boju koja je po

default-u podešena 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 značajno i pravljenje hiperveza za slanje elektronske pošte, jer na taj način olakšavate posetiocima da se povežu sa vama. Označite mesto na strani gde želite da umetnete hipervezu za slanje E-mail. Izborom opcije iz File menija Insert / E-mail Link pojaviće 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.


7

Definisanje CSS stilova za tekst koji predstavlja link

Samo kreiranje stilova vrlo je lako, a temu smo radi lakšeg praćenja podelili u tri dela:

• upoznavanje i razumevanje CSS link stilova • kreiranje podrazumevanih link selektora • kreiranje višestrukih 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 može 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 našem slučaju selektor a:link { color: #333333} možemo slobodno prevesti u značenje: "Browser-u, sve linkove na stranici oboji u #333333 (nijansa sive) boju". Zapazite da za naša četiri stila linkova (link, visited, hover, i active) nisu deklarisani fontovi, niti veličina fontova. Ovo deklarisanje odnosi se na ono što nazivamo efikasnost i nasleđivanje. Vaše stranice će mnogo bolje izgledati ukoliko za linkove (hiperlinkove) koristite isti font i veličinu fonta kao što je kod okružujućeg teksta. Rekli smo u prošloj vežbi da linkovi (tekst, slike...) predstavljaju veze ka drugim sadržajima zato što su ubačeni unutar anchor (sidro) taga - <a>. Nestilizovani linkovi podrazumevano su obojeni u plavu boju, a već posećeni linkovi su ljubičasti. Aktivni link predstavlja se crvenom bojom. Upravo nam kaskadni stilovi (CSS) dozvoljavaju da preskočimo i unapredimo prikaz browser-ovih podrazumevanih link stilova u nešto veoma kreativno i estetski istančano. CSS specifikacija definiše link stilove kao tzv. pseudoklase, tj. specijalne klase koje opisuju stilove za elemente koji se primenjuju samo pod određenim uslovima. Možda ovo na prvi pogled izgleda komplikovano, ali u stvari veoma je jednostavno:

• a:link opisuje bilo koji link koji nije posećen od strane korisnikovog browser -a.

Drugim rečima, sadržaj koji je linkovan još se ne nalazi u browser -ovoj lokalnoj memoriji,


8

• a:visited opisuje bilo koji link koji je posećen i koji se nalazi u browser -ovoj lokalnoj memoriji,

• a:hover opisuje izgled hiperlinkova kada korisnik pređe pokazivačem miša 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 otpušten taster miša.

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 posećeni od strane korisničkog browser-a.

• Otvorite dijalog prozor New CSS Style za kreiranje novog stila. • U opcijama Selector Type izaberite opciju Advanced. • U padajućoj listi Selector izaberite a:link i upišite a.LevaNavigacija:link (slika 6).

Slika 6.

• U opciji Define In iz padajuće liste izaberite fajl stilovi.css u kome će se čuvati svi

stilovi za sve selektore. • Kliknite OK. • Otvoriće se dijalog prozor za definisanje selektora a.LevaNavigacija:link sa

kategorijom Type. • U kategoriji Type podesite sledeće 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 otvoriće 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 podvučen 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; }


9

Stil koji ste kreirali za linkove primenite na svim stranica vašeg sajta. Da biste to uradili treba da fajl stilovi.css u kom ste sačuvali sve kreirane klase stilova vežete za svaku stranicu. tj. da stranici pokažete putanju do traženog fajla. HTML kôd kojim se određena klasa stila veže za stranicu postavlja se u oviru taga <head>...</head> i piše na sledeći način: <link href="CSS/stilovi.css" rel="stylesheet" type="text/css">. Postupak vezivanja stila za stranicu

• Iz File menija izaberite opciju Window / CSS Styles. • Otvoriće se panel Design sa desne strane prozora Document sa izabranim tabom CSS

Styles. • Otvoriće se dijalog prozor Attach External Style Sheet (slika 7).

Slika 7.

• Pomoću dugmeta Browse u polju File / URL pronađite fajl stilovi.css. • U opcijama Add as izaberite opciju Link. • Kliknite na OK.

Nakon prethodno izvršenog postupka vezivanja fajla stilovi.css za ovaj fajl možete da izvršite formatiranje istih. Označite tekst koji predstavlja link (O nama) i primenite stil levaNavigacija. Postupak ponovite i za linkove Proizvodi i Kontakt. Ostalo je još da formatiramo sadržaj tabele za donju navigaciju za koju ćete napraviti stilove. Za linkove donje navigacije napravite novi stil sa sledećim 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;}


10

Za tekst i uspravne linije između linkova napravite novi stil sa sledećim 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 ODREĐENOG BROJA BODOVA MORA DA BUDE URAĐENO SLEDEĆE:

• NAPRAVLJENA STRUKTURA SAJTA (DIREKTORIJUM ZA SAJT, PODIREKTORIJUMI ZA SLIKE I STILOVE)

• IZVRŠENO DEFINISANJE SAJTA KROZ DREAMWEAVER • PODEŠENA OSNOVNA SVOJSTVA STRANICA (ENCODING, MARGINE,

TITLE). Ukoliko nisu prvo ispunjene navedene tri stavke, zadatak se neće uzimati u razamatranje!!!!!!!!!!!

1. Napravite direktorijum na lokalnom računaru pod nazivom mobilni_telefoni. U okviru njega napravite poddirektorijum images za slike i podirektorijum css za stilove. Definišite sajt mobilni telefoni pomoću Dreamweaver-a.

2. Napravite stranici index.html. Podesite osnovna svojstva stranice (naslov: MOBILNI SVET, kodni raspored na latinični)

3. Stranicu index.html organizujete da izgleda kao na slici i formatirati kompletan sadržaj koristeći CSS stilove (PRAKTIKUM ZA VEŽBE –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


11

5. Na osnovu stranice index.html napraviti stranice proizvodi.html i kontakt.html prikazane kao na slikama dole. Linkovati stranice na sledeći način:

• Tekst Početna – 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 vežbi i primeniti ih na linkove. Napomena: Linkove postaviti na sve tri stranice!!!! Prilikom formatiranja stranice proizvodi.html napraviti stil za formatiranje naziva telefona sa sledećim 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


12

Prilikom formatiranja stranice kontakt.html napraviti stil za formatiranje teksta koji se odnosi na adrese, sa sledećim parametrima:

font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #333333;

Napravljeni stil primeniti kao na slici.

kontakt.html

Documents

- Vežba 10 - UBACIVANJE ROLLOVER SLIKA POVEZIVANJE