BAZA ZNANJA

Kurs: Web dizajn

Modul: FrontPage

Autor: spec. Olga Mirkovic

Naziv jedinice: Animacija elemenata strana

---

Materijali vezani uz ovu lekciju:

- Test animacija elemenata strana

---

DHTML- Dynamic HTML je metod za dodavanje animacija i drugih vizelnih efekata web strani. Da bi prikazali paletu DHTML Effects, izaberite opciju View/Toolbars/DHTML Effects.

 

Osnovni koraci za pravljenje DHTML efekta su:

 

·          Izabrati događaj – On

·          Izabrati efekat – Apply

·          Podesiti vrednosti (svojstva efekata)

 

Na paleti se pored  tri glavne opcije, nalaze i dve funkcije:

 

·          Remove Effects - opcija je aktivna kad se napravi efekat

·          Highlight DHTML Effects je vizuelni podsetnik da je na stranici napravljen DHTML efekat

 

 

DHTML DOGAÐAJI

 

Da biste napravili DHTML efekat, najpre morate da odaberete jednu od opcija za DHTML događaj. Događaj je akcija koja aktivira efekat. Kreirajte novu stranicu. Unesite na stranicu sliku iz ClipArta. Postavite kursor miša iza sličice i na paleti DHTML Effects će se aktivirati  padajuća lista On.

 

U listi postoje četiri vrste događaja:

 

·               Click koji se aktivira kada korisnik pritisne bilo kojim tasterom miša element.

·               Double-click koji se aktivira kada korisnik dva puta uzastopno pritisne mišem element.

·               Mouseover se aktivira kada korisnik pređe pokazivačem miša preko elementa.

·               Page load se aktivira automatski kada se stranica učita po prvi put.

 

 

DHTML EFEKTI I SVOJSTVA EFEKATA

 

Svakom DHTML događaju pridružuju se određeni efekti.

Ako izaberete događaj Click, Double-click ili Mouseover postoji mogućnost izbora efekta Formatting. Formatting omogućava da promenite izgled elemenata kada se odigra događaj. Automatski se aktivira opcija Choose Settings gde možete birati između Choose Font  za promene na fontu i Choose Border za promenu izgleda okvira.

 

Ako izaberete događaj Mouseover i označite sliku, možete izabrati efekat Swap Pictures koji zamenjuje originalnu sliku drugom slikom, dajući efekat dva stanja elementa.

 

Kod izbora događaja Click i Doubleclick aktivira se efekat Fly out koji dovodi do nestanka elementa sa stranice u smeru zadatom pomoću Choose Settings gde postoji sledeći izbor: to left (ulevo), to top (nagore), to bottom left (u levi donji ugao), to bottom right (u desni donji ugao), to top right (u desni gornji ugao), to top left (u levi gornji ugao), to top right by word (u desni gornji ugao, reč po reč) i to top left by word (u levi gornji ugao, reč po reč).

 

Ako izaberete događaj  Page Load možete birati sledeće efekte:

 

·          Drop by word prikazuje tekst reč po reč.

·          Elastic - tekst ili slika leti i kreće se gore-dole pre nego što stane na svoje mesto. Možete u Choose Settings izabrati da li će tekst da uzleće sa dna stranice (from botton) ili da doleće sa desne strane (from right).

 

·          Fly in dovodi do pojavljivanja slike ili teksta na stranicu. Kod ovog efekta Choose Settings je isti kao i kod Fly out uz dodatak opcije Along corner pomoću koje se tekst/slika podiže sa dna strane i pravi desni zaokret pod pravim uglom da bi došao na svoje mesto.

·          Hop čini da se tekstualni niz pojavljuje reč po reč, tako da svaka reč iskače preko prethodne.

·          Spiral - element se pojavljuje u brišućem luku iz gornjeg desnog ugla stranice.

·          Wave je sličan efektu Hop osim što svaka reč pravi akrobatske petlje prilikom pojavljivanja na ekranu.

·          Wipe - tekst se pojavljuje red po red i moguće opcije u Choose Settings su sleva udesno (left to right), odozgo nadole (top to bottom) i iz sredine (from middle)

·          Zoom čini da element raste ili se smanjuje do svoje konačne veličine. Moguće opcije u Choose Settings su in gde element raste i  out gde se smanjuje.

 

 

ANIMACIJA PRILIKOM UČITAVANJA STRANE

 

Postavite kursor miša iza slike. Aktivira se paleta DHTML Effects. Izaberite događaj Page load. U opciji Apply izaberite Fly in a svojstvo efekta From right. Snimite promene i pogledajte u Preview   kako se slika pojavljuje na stranici sa desne strane.

 

 

ANIMACIJA OBJEKATA KAO ODGOVOR NA POKAZIVAČ MIŠA

 

Postavite kursor miša iza slike. Aktivira se paleta DHTML Effects. Izaberite događaj Click. U opciji Apply izaberite Fly out a svojstvo efekta to bottom right. Snimite promene i pogledajte u Preview,  kako kada kliknete na  sliku ona odlazi sa stranice u desni donji ugao.

 

 

FORMATIRANJE TEKSTA PRILIKOM ANIMACIJE

 

Upišite neku reč na stranicu. Zatim postavite kursor miša na kraj te reči. Aktivira se paleta DHTML Effects. Izaberite događaj Mouseover. U opciji Apply izabrati Formatting. Iz liste Choose Settings možemo izabrati Choose Font ili Choose Border. Prvo izaberite Choose Font i otvoriće se prozor Font u kome menjate osobine fonta. Izaberite Font style bold, size 24pt, Color roze. Kliknite na OK. Snimite promene i pogledajte u Preview, da kada postavite kursor miša na  reč, ona se povećava, postaje bold i roze boje.

---

Smatrate da je ova lekcija korisna?  Preporučite je.

Broj preporuka: 1