Naziv jedinice: Ubacivanje flash fajlova i video fajlova Materijali vezani uz ovu lekciju: - Test ubacivanje flash fajlova i video fajlova - Ubacivanje flash fajlova i video fajlova (PDF dokument)

Dreamweaver olakava posao unosa Flash fajlova, muzikih i video fajlova, usklauje atribute koji odreuju kako e ti medija fajlovi biti prikazani na Web stranici i tamo gdje je primjenljivo, Dreamweaver daje mogunost promjene naina na koji korisnik i komunicira sa tim fajlovima. Flash fajlovi Postoji nekoliko tipova Flash fajlova koje moete ubaciti na Web stranicu: .fla (Flash fajlovi ili Flash filmovi) - Ovo su originalni, editabilni izvorni Flash fajlovi za kreiranje .swf fajlova. .swf fajlovi - Ovo su kompresirane, prenosive verzije .fla fajlova koje se mogu prikazati u Dreamweaveru i pustiti u rad u Web itaima. Flash buttons i Flash text isto koriste .swf fajlove. Ovi fajlovi nemaju mogunost editovanja kao originalni .fla fajlovi. .swt fajlovi - Ovo su Flash Template-i koji vam omoguavaju da promenite informacije u .swf fajlovima. Na primer, dugme koje je kreirano u Flash-u moe koristiti .swt fajl koji e vam omoguiti da generiete vie dugmadi sa razliitim tekstom. .swc fajlovi - Ovo su specijalni SWF fajlovi koji se koriste za Rich Internet Applications. .flv fajlovi (Flash video fajlovi) - Ovi fajlovi sadre enkodirane audio i video podatke koji omoguavaju da ih besplatni Flash Player puta na Web stranicama. Ubacivanje Flash filmova Prije nego to ubacite Flash fajlove u Dreamweaver, morate ih prvo kreirati u Flash aplikaciji i snimiti sa swf ekstenzijom. Ubacivanje Flash filmova je jako slino kao i ubacivanje slika. Meutim pratei kod se dosta razlikuje. Da biste ubacili swf fajl u Dreamweaver, postavite kursor na mjesto gdje elite da ubacite fajl, zatim kliknite na Insert dugme u meniju aplikacije, zatim Media pa SWF.

Otvorie se Object Tag Accessibility Attributes dijalog boks gdje moete da ubacite naslov filma, Acces key i Tab index. Sva tri atributa su po elji, ali je dobra praksa da date bar ime filmu. Ako kliknete na Cancel, film e se ipak insertovati na stranicu za razliku od Image fajlova, gde kada kliknete Cancel, slika se ne ubacuje na stranicu.

Po defaultu Dreamweaver prikazuje Placeholder za SWF fajl:

Da biste vidjeli kako izgleda film zajedno sa sadrajem stranice, kliknite na Placeholder u dizajn prikazu. U Property Inspector-u kliknite naPlay dugme.

Flash film e se pokrenuti u dizajn prikazu:

Takoer, moete kliknuti i na Live view da vidite kako e stranica izgledati u Web itau. Obavezno kliknite na dugme Stop u Property Inspector-u kada zavrite sa pregledom swf fajlova jer taj pregled troi resurse raunara. Kao to vidite Property Inspector ima dosta opcija gde moete kontrolirati podeavanje Flash filmova. U lijevom gornjem uglu prikazuje se tip fajla i veliina, odmah ispod je polje u kome se nalazi ID atribut Tag-a. Dreamweaver automatski dodjeljuje vrednost FlashID za prvi ubaeni swf objekat. Svi naredni objekti koji se ubacuju dobijaju FlashID2, FlashID3 itd.. Ovo polje je editabilno tako da moete da upiete va ID. Ostale opcije u Property Insspector-u: Weight i Hight - irina i visina filma u pikselima. Ova polja se automatski popunjavaju kada ubacite swf objekat, mada ih vi moete promeniti ubacivanjem drugih vrijednosti. File - Ovo polje prikazuje punu putanju do swf objekta. Metica vam omoguava da prevuete objekat iz Files panela, a folder ikonica da selektirate objekat putem Select swf Object dijalog boksa. Src - Ovo polje specificira lokaciju originalnog .fla fajla koji je koriten u kreiranju swf objekta. Bg - Ova opcija unosi parametar u Tag i setuje pozadinsku boju swf objekta (boja koja se prikazuje u pozadini filma). Edit - Ova opcija otvara .fla fajl za editovanje, ali da bi radila, src polje mora biti popunjeno. Class - Omogua vam da primjenite CSS klasu na Tag. Loop - Ova opcija je automatski potvrena, deselektujte je ako ne elite da se film prikazuje u kontinuitetu. Autoplay - Ova opcije je takoer automatski potvrena, deselektirate je ako ne elite da se film automatski pokrene kada se Web stranica prvi put prikazuje. V Space i H space - Ova opcija ubacuje neodobravane (nisu XHTML standard) atribute u Tag. Postavljaju vertikalan i horizontalan prostor oko filma. Najbolje je ove atribute dodeliti preko CSS-a. Quality - Ova opcija kontroliraizgled filma za vrijeme playbacka. Postoje slijedea podeavanja: o High - Postavlja najbolji kvalitet filma, ali zahtjeva dosta procesorske snage. o Low - Selektirajte ovu opciju ako vam je mnogo bitnija brzina prikazivanja nego kvaliteta filma. o AutoHigh - Ova opcija daje jednak prioritet u izgledu i brzini, ali rtvuje izgled ako je potrebno vie brzine. o AutoLow - Prioritet je na brzini, ali kad god je mogue popravlja kvalitet filma. Scale - Odreuje kako se film prikazuje u ve odreenim H i W dimenzijama. o Default (Show All) Cijeli film se prikazuje sa svojih 100%. o No Border - Bilo koji dijelovi filma koji se pruaju preko podeenih W i H dimenzija su isjeeni. o Exact Fit - Sabija film u specificirane dimenzije bez obzira na originalnu veliinu filma. Align - Postavlja poravnanje filma relativno u odnosu na stranicu. Wmode - Ova opcija postavlja Wmode filma u prozoru itaa, to onemoguuje konflikte sa DHTML elementima kao to su Spry Widgets. Postoje sledee opcije: o Window - Forsira swf iznad svih elemenata stranice. o Opaque - Difoltna opcija, dozvoljava DHTML objektima kao to su na primjer padajui meniji da se korektno prikazuju preko filma. o Transparent - Forsira DHTML elemente da se prikazuju ispod filma. Parameters - Otvara dijalog boks sa nizom parametara koje moete postaviti samo ako je film kreiran

tako da prihvata te parametre. Dreamweaver postavlja svjetlo plavi Tab iznad swf objekta u dizajn prikazu sa ikonicom otvorenog oka u desnom uglu Tab-a. Kada kliknete na tu ikonicu, otvara se alternativni sadraj koji e se prikazati ako korisnik nema najnoviju verziju Flash Player-a. Moete ili editirati ili obrisati ovaj sadraj.

Da biste zatvorili ovaj prikaz, kliknite na ikonicu sada zatvorenog oka. Ubacivanje Flash video fajlova Flash video fajl je drugaiji od regularnog swif objekta jer ima .flv ekstenziju to vam omoguava da dodate ve gotov film na Web stranicu. Potrebno je samo da enkodirate druge formate video fajlova u .flv format i ubacite ga tako to ete kliknuti na Insert stavku u meniju aplikacije, zatim na Media, zatim na FLV opciju. Ova opcija vam omoguava da unesete .flv fajl bez koritenja Flash aplikacije i omoguava da Web itai pokrenu uneeni video sa prikazanim playback kontrolama. Otvorie se Insert FLV dijalog boks sa malo drugaijim opcijama u zavisnosti da li za Video Type birate Progressive Download ili Streaming Video.

CSS pozicioniranje: Box model, FloatsBox Model

Da biste razumjeli pozicioniranje elemenata na stranici pomou CSS-a, potrebno je prvo da razumijete Box Model. Da bi se lake predstavili, u ovoj lekciji svi elementi u dokumentu su dati kao pravokutni box iji je sadraj okruen: marginama, Padding i borderima (ivice)

Box Model se sastoji od pet osnovnih svojstava elemenata: Width, Height, Margin, Padding, Border i Background koji tehniki nije dio Box modela, ali se esto ukljuuje. Margine su uvijek transparentne i odvajaju element od drugih elemenata na stranici, okviri (Borders) mogu biti razliitih stilova i definiraju granice elementa. Padding odvaja sadraj elementa (Content) od njegovih okvira. Background podeavanja elementa se odnose na oblast unutar okvira zajedno sa Padding i Content dijelom. U cilju ilustrovanja Box Modela, Padding dio je prikazan u neto tamnijoj sivoj boji. Margins, Borders i Padding su opcije atributa, ali zbog raunanja pozicije i veliine, ako nije drugaije odreeno, svi imaju irinu 0 po defaultu. Za svaku stranicu (Top, Bottom, Left, Right) mogu biti postavljene razliite vrijednosti irine. Margine mogu imati i negativnu vrijednost. Box moe sadravati i vie drugih boxeva, kreirajui hijerarhiju bokseva to predstavlja ugnjeene elemente stranice. Prozor itaa u ovoj hijerarhiji predstavlja Root element. Postoje dva osnovna tipa bokseva: Block i Inline. P, DIV i TABLE elementi definiraju block bokseve dok B, I, SPAN Tag-ovi i konkretni sadraj (tekst i slike) definiraju Inline bokseve. Takoer, tip boksa moe biti odreen koritenjem svojstva Display. Ako na primjer, svojstvu Display Inline elementa dodijelimo vrijednost Block, tada e taj element biti tretiran kao Blok element. Boks nee biti kreiran ako svojstvu Display dodijelite vrijednost None. U tom sluaju, ita e se ponaati kao da element ne postoji. Takoer i bilo koji ugnjeeni elementi unutar tog elementa nee biti prikazani iako im je dodijeljena neka druga Display vrijednost. Postoje tri naina pozicioniranja ili tri sheme: Normal, Float i Absolute. Svaki nain ima svoj set pravila.

Normal Flow

Normal Flow je defaultni nain rada kod pozicioniranja. Primjenjuje se na bilo koji element koji nema specificiranu poziciju Absolute ili Fixed i koji nije Floated. Blok boksevi su pozicionirani jedan ispod drugog po vertikali dok su Inline boksevi pozicionirani po horizontali, s lieva na desno. Vertikalne margine se preklapaju u Normal Flow-u. To znai da se umjesto zbrajanja vrijednosti margina gornjeg i donjeg boksa rauna samo margina koja je vea - kao to je prikazani na slici ispod.

Horizontalne margine nikad se ne preklapaju.Floats

Floating se ostvaruje preko svojstva Flaot sa vrijednostima lijevo i desno. Kada se dodjeljuje Float svojstvo element je vertikalno pozicioniran isto kao to bi bio u Normal Flow-u, dok je horizontalno pozicioniran skroz na lijevu ili desnu stranu koliko je mogue unutar svog bloka u kome je sadran. Okolni Inline sadraj je tada pozicioniran na suprotnoj strani. Slijedei kod i slika prikazuju Floated element koji je definiran kao dio Inline teksta. content content content content content content content content

Float svojstvo moe biti postavljeno na: Left, Right,Nnone ili Inherit. Boks kome je dodijeljeno svojstvo trebalo bi da ima definiranu irinu, inae e popuniti svoj sadrajni blok horizontalno kao i da nema dodijeljeno svojstvo Float i nee ostaviti mjesta za drugi sadraj da se pozicionira okolo. Za razliku od bokseva u Normal Flow-u vertikalne margine Floated elemenata nikada se ne preklapaju sa marginama elemenata iznad ili ispod. Flaoted boks moe da preklopi susedne Block Level Boxes u Normal Flow-u. Slijedi primjer koda i slika gdje Flaoted element ima mnogo vie teksta nego njegov sadrajni blok. content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content

U ovom sluaju moete primjetiti da se Floated boks preklapa preko svog Parent boksa i boksa koji dolazi posle njega. Ovo se moe izbjei dodavanjem svojstva Clear. Postaviemo clear:right drugom boksu. Ovo pravilo e ga pomaknuti na dole odmah ispod Floated boksa. content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content

Floated boks i dalje se preklapa sa boksom na vrhu, ali tako je namjerno uraeno u cilju demonstracije. Ovo preklapanje bi bilo izbjegnuto kada bismo Floated element postavili izvan p taga. Time bismo dozvolili da oba paragrafa budu pozicionirana oko Floated elementa. content content content content content content content content content content content content content content content content content content content content content content content content content content

Assets panel Najjednostavniji nain za ubacivanje slika u Dreamweaver (ako pretpostavimo da je slika unutar vaeg sajta) jeste da prevuete sliku ili iz Files panela ili iz Assets panela. Da biste koristili Assets panel, morate smjestiti sve optimizovane slike za Web sajt u Images folder koji se nalazi u Root folderu vaeg sajta. Assets panel sortira elemente sajta u devet kategorija kojima se pristupa klikom na jednu od ikonica na levoj strani panela. Images - U ovoj kategoriji se nalaze svi jpg, png i gif fajlovi i prikazane su njihove dimenzije, veliina i putanja do njihovog mesta na raunaru. Colors - Ova kategorija prikazuje sve boje koje su specificirane na vaem sajtu ukljuujui i pozadinske boje, boju teksta i linkova. Links - Ovde su prikazani svi linkovi, ne samo eksterni http:// nego i email linkovi, FTP adrese i JavaScript linkovi. Multimedia - Flash, Shockwave i Movies - svaka kategorija prikazuje movie fajl sa odgovarajuom ekstenzijom .swf (Flash), .dcr (Shockwave) i .mpg ili .mov (Quick Time i MPEG) Scripts - Ova kategorija prikazuje JavaScript fajlove, i to eksterne skript fajlove ka kojima Web stranica ima linkove (na primer, JavaScript fajlovi koji su deo Spry Framework-a, koji su prikaeni za stranicu kada koristite Spry Widget-e ili efekte). U ovoj kategoriji nisu prikazani JavaScript fajlovi koji su ugnjeeni u Web stranicu (na primer kada koristite Dreamweaver Behaviors). Templates i Library - Poslednje dve kategorije bie objanjene u nekom od slijedeih modula. Moete se prebacivati iz Site u Favorites prikaz kategorije i obrnuto tako to ete kliknuti na radio dugme na vrhu panela. Site opcija prikazuje sve elemente izabrane kategorije koji se nalaze na Web sajtu. Favorites opcija vam daje mogunost da kreirate listu vaih najvanijih elemenata i elemenata koje najvie koristite.

Kada kliknete na neku sliku, u gornjem dijelu panela se prikazuje Tumbnail slike, zatim dimenzije slike, veliina, tip i cijela putanja do slike. Ako se odluite da editujete sliku prije nego to je ubacite na sajt, moete kliknuti na Edit dugme u donjem desnom uglu panela da bi vam se otvorila defaultna grafika aplikacija. Sliku moete ubaciti na Web stranicu iz Assets panela tako to postavite kursor na stranici gdje elite da ubacite sliku, zatim oznaite sliku i kliknete na dugme Insert. Ako importirate dodatni image fajl na Web sajt, da biste vidjeli i taj fajl u Assets panelu, morate da kliknete na Refresh Site List dugme u donjem desnom uglu panela.