 |
||
|---|---|---|
|
Cilji vaje:
Izdelava spletnega foto albumaAdobe Dreamweaver nam omogoča, da izdelamo spletni foto album. To storimo z menijskim ukazom Create Web Photo Album v meniju Commands.
Da pa lahko izdelamo album, moramo imeti poleg Adobe Dreamweaverja nameščen tudi program Fireworks. Pred izdelavo spletnega foto albuma z grafičnim programom pripravimo fotografije, ki so navadno v formatu JPEG. Velikost fotografij prilagodimo prikazovanju na zaslonu. Datoteke ne smejo biti prevelike, da poskrbimo za ustrezno pretočnost v spletu. V primeru, da nimamo nameščenega programa Fireworks, nas čarovnik na to opozori in nam ponudi namestitev preizkusne različice programa Fireworks.
Če programa nimamo nameščenega si namestimo preizkusno verzijo programa Adobe Fireworks CS3. Klik na gumb Download Fireworks trial nas popelje na spletno stran, s katere lahko namestimo program. Namestitev je podobna kot za program Dreamweaver, katero smo izvedli v Vaji 1. Odprimo nov prazen dokument HTML. Z menijskim ukazom Create Web Photo Album v meniju Commands začnimo izdelovati album. V oknu Create Web Photo Album nastavimo parametre spletnega albuma:
Za naš primer v okno Create Web Photo Album vpišemo parametre, ki jih prikazuje slika. Fotografije se nahajajo v gradivu med slikami in sicer v mapi slike>vaja12>foto>cvetovi. Album bomo shranili v novo mapo foto, ki jo kreiramo v korenskem imeniku spletišča.
Po kliku gumba OK se samodejno zažene program Adobe Fireworks CS3, ki izdela sličice in pomanjša fotografije, če smo v polju Scale to določili.
Adobe Dreamweaver je v mapi foto zgradil album. Izhodiščna datoteka albuma je index.htm. Poleg tega je ustvaril še tri nove mape in sicer images, v kateri so fotografije, pages, v kateri so spletne strani s posamezno fotografijo in povezavami, in mapo thumbnails, v kateri so sličice.
Datoteko index.htm odprimo v brskalniku in si oglejmo spletni album. Vsaka sličica ima povezavo do fotografije, posamezne fotografije pa imajo na strani tudi navigacijo, ki omogoča ogled naslednje oziroma prejšnje fotografije, lahko pa se vrnemo tudi na izhodiščno stran index.htm.
Izdelava spletnega albuma s Flashevim pregledovalnikom slikSpletni album v Adobe Dreamweaverju izdelamo tudi z vgrajenim orodjem Image Viwer. Najdemo ga v meniju Insert v izbiri Media.
Kreirajmo si prazno spletno stran povezano s predlogo, in jo shranimo z imenom fotografije.html v korenski imenik spletišča. Novo datoteko pa poimenujmo Spletni pregledovalnik slik. Pri vstavljanju pregledovalnika slik moramo najprej shraniti Flashevo datoteko. Mi jo poimenujmo fotografije.swf in jo shranimo v mapo slike>vaja12>foto>drevesa v našem spletišču.
Flasheva datoteka se vstavi v spletno stran fotografije.html. V oknu z lastnostmi nastavimo nastavitve vstavljene Flash animacije. Poleg tega se nam odpre tudi orodjarna Flash element, v kateri določimo nastavitve našega pregledovalnika slik.
V oknu z lastnostmi popravimo velikost animacije na velikost širine W 450 pik in višine H 550 pik. V orodjarni Flash element pa nastavimo nastavitve, kot jih prikazuje slika.
V izbiri imageURLs odpremo seznam, kot ga prikazuje slika. V oknu Edit 'imagesURLs' Array dodamo poti do slik, ki jih želimo prikazati v pregledovalniku slik. S klikom na - pobrišemo obstoječe povezave in s + dodamo svoje.
Datoteko fotografije.html shranimo in si oglejmo delovanje pregledovalnika slik v brskalniku. Med nastavitvami pregledovalnika slik smo nastavili opcijo slideAutoPlay, tako da se po 5 sekundah slike samodejno menjavajo. To pa smo nastavili v opciji slideDelay. S klikom na gumb Stop (kvadratni gumb) predvajanje ustavimo. Sedaj si lahko slike ogledujemo ročno ali pa ponovno zaženemo samodejno predvajanje.
S tem zaključujemo vajo o dodajanju večpredstavnih vsebin. V naslednji vaji pa si bomo ogledali oblikovanje spletnih strani z uporabo kaskadnih slogov CSS.
Navodila |
||
| na vrh | ||
