glava
     

Cilji vaje:

  • izdelati spletni album z uporabo orodja v Adobe Dreamweaverju,
  • izdelati spletni album s Flashovim pregledovalnikom slik.

Izdelava spletnega foto albuma

Adobe Dreamweaver nam omogoča, da izdelamo spletni foto album. To storimo z menijskim ukazom Create Web Photo Album v meniju Commands.

s

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.

s

Č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:

  • Photo album title - vpišemo naslov spletnega foto albuma,
  • Subheading info - podnaslov spletnega foto albuma,
  • Other info -  informacije o spletnem albumu,
  • Source images folder - mesto izvora fotografij,
  • Destination folder - ciljna lokacija spletnega foto albuma v spletišču,
  • Thumbnail size - izbor velikosti sličic,
  • Show filename - prikaz imen datotek pod sličicami,
  • Columns- število kolon prikaza sličic,
  • Tumbnail format -  izbor kvalitete prikaza sličic,
  • Photo format - izbor kvalitete prikaza fotografij,
  • Scale - določitev velikost fotografij v odstotkih,
  • Create navigation page for each photo - za vsako fotografijo zgradimo spletno stran z navigacijo.

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.

s

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.

s

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.

s

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.

s

s

Izdelava spletnega albuma s Flashevim pregledovalnikom slik

Spletni album v Adobe Dreamweaverju izdelamo tudi z vgrajenim orodjem Image Viwer. Najdemo ga v meniju Insert v izbiri Media.

s

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.

s

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.

s

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.

s

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.

s s

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

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
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