glava
     

Cilji vaje:

  • spletnim stranem dodati animirane GIFe,
  • spletnim stranem dodati Flash animacije,
  • povezovati spletne strani z datotekami PDF.

 

Dodajanje večpredstavnih vsebin

Pri izdelovanju spletnih strani nismo omejeni le na besedilo in grafiko. Dodamo lahko tudi filme, zvoke in dokumente.

V tej vaji bomo v spletne strani vstavili večpredstavne vsebine.

Vstavljanje animiranih GIFov v spletne strani

Najpreprostejše animacije, ki jih vstavljamo v spletne strani, so animirani GIFi. To so dejansko slike formata GIF. Animirani GIF se od navadnega formata GIF razlikuje v tem, da je v njem sestavljenih več posameznih slik, ki se menjavajo druga za drugo po vrstnem redu. Ko se predvajanje slik izteče, se ponovno začne predvajanje na začetku. S tem dobimo preprosto animacijo.

Izdelajmo novo spletno stran povezano s predlogo, gif_flash.html in jo poimenujmo Animirani GIFi in Flash animacije. Vstavimo naslovni tekst Animirani GIFi, mu določimo slog Heading 4 in nabor pisav Arial, Helvetica, sans-serif ter ga obarvajmo modro #0000FF. Pod naslov pa vstavimo sliki noge.gif in vrtec_tekst.gif, ki se nahajata med slikami v gradivu v mapi vaja11.

s

Adobe Dreamweaver nam vstavljene animirane GIFe prikazuje kot navadne GIF slike in sicer se prikaže prva slika v animiranem GIFu. Animirani GIF se v celoti prikaže v brskalniku. Torej shranimo dokument in si ga oglejmo v brskalniku.

s

Predvajalniki za prikazovanje večpredstavnih vsebin

Vsaka večpredstavna datoteka zahteva program neodvisnega izdelovalca, da bi jo lahko predvajali v brskalniku. Predvajalniki so v obliki vtičnikov (Plugin) ali pa v obliki kontrolnikov ActiveX. Le te moramo namestiti, da si lahko ogledujemo večpredstavne vsebine.

Adobe Dreamweaver ima več lastnosti, ki izboljšajo zmožnost uspešnega dodajanja večpredstavnih datotek spletni strani. Kodi doda atribute, ki uporabniku omogočajo, da doda predvajalnike, največkrat pa kar poskrbi, da se le ti samodejno namestijo.

Dodajanje Flashevih datotek

Flash je namenjen izdelavi interaktivnih spletnih animacij. Uporablja vektorsko grafiko, ki zasede malo prostora in jo lahko zvezno raztegujemo brez poslabšanja kakovosti. Flash animacije izdelujemo s programom Flash, nekatere preproste animacije pa lahko izdelamo kar v Adobe Dreamweaverju. Flash animacije imajo pripono .swf.

V našem dokument gif_flash.html za vstavljenimi animiranimi GIFi dodajmo naslov Flash video animacije in mu določimo slog Heading 4 in nabor pisav Arial, Helvetica, sans-serif ter ga obarvajmo modro #0000FF. Za naslovom pa bomo vstavili dve Flash animaciji.

Flash animacijo v Adobe Dreamweaver vstavimo z menijskim ukazom Insert>Media>Flash ali pa z gumbom Flash v vrstici za vstavljanje v zavihku Common.

s

s

Vstavili bomo Flash animaciji krogli.swf in potek.swf, ki se nahajata v mapi vaja11 med slikami v gradivu. Ob vstavljanju nas okno Object Tag Accessibility Attributes pozove k vpisu atributov. Za prvo animacijo vpišimo naslov (Title) Krogli, za drugo pa Potek.

s

Pri označeni animaciji v oknu z lastnostmi nastavljamo parametre animacije, npr. velikost, kvaliteto, merilo, samodejni začetek predvajanja, brezkončno predvajanje, poravnavo in urejanje v programu Flash, če je ta nameščen. Animacijo si s klikom na gumb Play v oknu z lastnostmi lahko ogledamo tudi v Adobe Dreamweaverju. Animacijam  nastavimo parametre, kot jih prikazuje slika.

s

s

Dokument gif_flash.html shranimo in si ga oglejmo v brskalniku.

s

Tudi z Adobe Dreamweaverjem lahko izdelamo nekatere Flash animacije:

  1. prikazovalnik slik,
  2. besedilne predmete,
  3. gumbe,
  4. video.

Poleg tega pa lahko v spletne strani vključimo še različne zvočne in video zapise, kot npr. Shockwave, RealPlayer, Windows Media Video, QuickTime. Te zapise vključimo kot vključke (Plugin-e). V spletne strani vključujemo tudi javanske programčke (Applet-e).

Dodajanje povezave do PDF datoteke

Spletne strani lahko povezujemo tudi z vsebino, ki se pojavlja sama od sebe. Te vsebine povezujemo na enak način, kot povezujemo druge spletne strani. Za vsebine znotraj spletišča uporabljamo relativne naslove, za oddaljene vsebine pa absolutne poti.

Adobov Acrobat Reader je brezplačen predvajalnik, ki je postal standard za pregledovanje oblikovanih besedilnih datotek v spletu. Oblika zapisa PDF (Portable Document Format) uporabniku omogoča, da vidi datoteko tako, kot je bila narejena. PDF datoteke izdelujemo s programom Adobe Acrobat Distiller, pa tudi mnogi drugi urejevalniki besedil omogočajo izvoz dokumentov v PDF obliki. PDF dokumente pregledujemo s predvajalnikom Adobe Acrobat  Reader, učinkovit, majhen in hiter pa je brezplačen pregledovalnik Foxit Reader. Vtičnik Acrobat Reader se običajno namesti ob namestitvi brskalnika.

Da bi prikazali PDF datoteko v spletu, izdelamo povezavo, ki kaže na to datoteko. Če je nameščen vtičnik, se datoteka prikaže kar v brskalniku, drugače pa se datoteka odpre v pregledovalniku PDF datotek, če je ta nameščen. Če pregledovalnika nimamo, si ga lahko brezplačno  prenesemo s splet.

V našem dokumentu gif_flash.html na koncu dodamo še povezavo na stran PDF. Dodamo tekst:
Datoteke PDF

V spletno stran vključujemo tudi datoteke PDF (Portal Dokument File), ki si jih ogledamo kar v spletnem brskalniku ali pa ustreznem pregledovalniku, ki si ga brezplačno namestimo s spleta:

Adobe Acrobat Reader

Foxit Reader.

Naslov Datoteke PDF oblikujemo kot vse naslove v tem dokumentu (Heading 4, Arial, modra barva pisave). Zadnji dve vrstici pa oblikujemo v neurejen seznam in na teksta postavimo povezave:

Na tekst PDF pa postavimo povezavo na datoteko povezave_PDF.pdf, ki se nahaja v mapi vaje11 med slikami v gradivih.

s

Datoteko gif_flash.html shranimo in v brskalniku preverimo delovanje povezav.

s

 

Navodila
Uvod v svetovni splet
Dreamweaver - 01 - Spoznavanje programa
Dreamweaver - 02 - Izdelava osnovne spletne strani z besedilom
Dreamweaver - 03 - Dodajanje slik
Dreamweaver - 04 - Tabele
Dreamweaver - 05 - Ogled in spreminjanje kode HTML
Dreamweaver - 06 - Definiranje spletišča
Dreamweaver - 07 - Postavitev strani
Dreamweaver - 08 - Priprava in uporaba predloge
Dreamweaver - 09 - Povezave
Dreamweaver - 10 - Izdelava slikovnih kart in navigacijskih vrstic
Dreamweaver - 11 - Dodajanje večpredstavnostnih datotek
Dreamweaver - 12 - Izdelava spletnega foto albuma
Dreamweaver - 13 - CSS
Dreamweaver - 14 - Prenos spletišča na strežnik
NVU - 01 - Spoznavanje programa
NVU - 02 - Izdelava osnovne spletne strani z besedilom
NVU - 03 - Dodajanje slik
NVU - 04 - Tabele
NVU - 05 - Povezave
NVU - 06 - CSS
NVU - 07 - Spletišče
NVU - 08 - Objava spletišča

Izhod

 

na vrh