glava
     

Cilji vaje:

  • izdelati slikovno karto in postaviti povezave na slikovni karti,
  • izdelati in uporabiti vrtljive slike,
  • izdelati navigacijsko vrstico z uporabo vrtljivih slik.

 

Izdelovanje slikovnih kart in navigacijskih vrstic

Slikovna karta in definiranje vročih povezav

Slikovna karta je slika, v kateri določimo področja s povezavami. Ta področja na sliki imenujemo ''vroča mesta'' ali ''mesta , občutljiva za dotik''. Ko kliknemo tako mesto, se povezava obnaša kot vsaka druga povezava. Razlika je le v tem, da namesto, da bi celotni sliki dodali le eno povezavo, postavimo na eni sliki več povezav, ki kažejo na različne dele slike. ''Vroča mesta'' so lahko različnih oblik:

  1. kvadratna oz. pravokotna,
  2. okrogla oz. elipsoidna,
  3. poljubne oblike.

s

Slikovne karte so primerne za izdelavo grafičnih menijev, ki jih obiskovalec klikne in izbira različna področja na sliki.

Izdelava slikovne karte

Izdelajmo novo prazno stran zlozenke.html, ki je povezana s predlogo. Shranimo jo v mapo povezane in jo poimenujmo Zloženke. Na vrhu spletne strani vstavimo naslov Izobraževalni programi na TŠC Kranj in mu dodajmo lastnosti:

  1. nastavimo slog Heading 4,
  2. priredimo tip pisav Arial, Helvetica, sans-serif,
  3. določimo modro barvo #0000FF.

Pod tekst vstavimo sliko zlozenke.gif, ki se nahaja med gradivom v mapi vaja10 in jo horizontalno poravnajmo sredinsko, kot kaže slika.

s

Postavitev ''vročih mest'' in povezav na slikovni karti

Ob izbrani sliki v dokumentu, se v oknu z lastnostmi v spodnjem levem robu pojavijo orodja, za določevanje ''vročih mest'' na sliki. Izberemo pravokotno orodje Rectangular Hotspot Tool za določanje ''vročih mest'' in na sliki označimo ''mesto, občutljivo na dotik'', kot kaže slika. Ob tem nas Adobe Dreamweaver opozori, da v polje Alt vpišemo opis  ''mesta, občutljivega na dotik'', saj se bodo uporabniki na slikovni karti tako lažje znašli. V našem primeru vpišemo v polje Alt izobraževanje odraslih.

s

''Vročemu mestu'' v polje Link v oknu z lastnostmi vpišemo povezavo na spletno stran http://www.tsckr.si/iod/index.asp in dodamo lastnost odpiranja v novem oknu Target _blank.

s

Za dodelitev naslednjega vročega mesta izberemo orodje za določanje poljubne oblike Polygon Hotspot Tool v oknu z lastnostmi. Označimo vogale druge zloženke z desne. Pri tem pazimo, da se ''vroča mesta'' ne prekrivajo. Za opis v polje Alt vpišimo elektronika in postavimo povezavo v polje Link http://www.tsckr.si/sps/programi/elektronika.htm. Povezava naj se odpre v novem oknu.

s

Za postavitev naslednjega ''vročega mesta'' moramo najprej odznačiti prejšnje ''vroče mesto''. To storimo tako, da izberemo označevalno puščico Pointer Hotspot Tool in kliknemo v sliko izven ''vročega mesta''. Sedaj lahko določimo naslednje ''vroče mesto'', podobno kot smo to storili pri predhodnem. Za opis v polje Alt vpišimo elektroenergetika, postavimo povezavo http://www.tsckr.si/sps/programi/energetika.htm, ki naj se odpre v novem oknu.

s

Po enakem postopku dodajmo še ostala ''vroča mesta''. Za naslednje v opis vpišemo višješolski strokovni študij in postavimo povezavo http://www.tsckr.si/vss/index.htm, ki se odpre v novem oknu.

s

Naslednji dodamo opis strokovna gimnazija in postavimo povezavo http://www.tsckr.si/sg/index.htm, ki se odpre v novem oknu.

s

Predzadnjemu ''vročemu mestu'' dodamo opis računalništvo in postavimo povezavo http://www.tsckr.si/sps/programi/racunalnistvo.htm, ki se odpre v novem oknu.

s

Zadnjemu ''vročemu mestu'' pa dodamo opis mehatronika in postavimo povezavo  http://www.tsckr.si/sps/programi/mehatronika.htm, ki se odpre v novem oknu.

s

Dokument zlozenke.html shranimo, ga odprimo v brskalniku in preverimo delovanje povezav.

s

Izdelava vrtljive slike oziroma slike občutljive za prehod kazalca

V Adobe Dreamweaverju brez težav izdelamo slike, ki so občutljive za prehod kazalca. Slika, občutljiva za prehod kazalca, je slika, ki jo zamenja druga slika, ko obiskovalec spletne strani nanjo postavi kazalec. Ta učinek pa dosežemo z dvema enako velikima slikama.

Odprimo datoteko predloga.dwt za urejanje. V zgornji levi del bomo postavili vrtljivo sliko, ki bo imela tudi povezavo na domačo oziroma izhodiščno stran našega spletišča index.html. S kazalcem se postavimo v zgornjo levo celico tabele v predlogi. Ta ima že dodani lastnosti sredinske poravnave po vertikalni in horizontalni smeri. Vstavili bomo sliko erid_gor.png. Slika, ki bo zamenjala sliko erid_gor.png, ko bomo nanjo postavili kazalnik, pa je erid_dol.png. Obe sliki najdemo med gradivi v mapi vaja10.

V Adobe Dreamweaverju vstavimo sliko občutljivo za prehod z menijskim ukazom Insert > Image Objects > Rollover Image.

s

Vrtljivo sliko lahko vstavimo tudi z orodjem Image: Rollover Image v zavihku Common.

s

V oknu Insert Rollover Image vpišemo v posamezna polja podatke, kot kaže slika.

s

Vstavljena vrtljiva slika v dokumentu predloga.dwt. Shranimo predlogo in posodobimo strani povezane s predlogo.

s

Za ogled učinka vrtljivega gumba pa si odprimo enega od dokumentov, npr. prvi_p.html in si ga oglejmo v brskalniku.

s

s

Po kliku na sliko, nam brskalnik javi, da ne more odpreti strani. Razumljivo, saj stran ne obstaja. Zato kreirajmo novo s predlogo povezano stran. Datoteko poimenujmo index.html in jo shranimo v korenski imenik spletišča. Vsebino strani bomo dodali kasneje, zaenkrat na stran le vpišimo tekst Izhodišče, da bomo lahko testirali povezave.

s

s

Dodajanje navigacijske vrstice z vrtljivimi slikami in povezavami

Včasih želimo, da bi nam skupina vrtljivih slik služila kot navigacijska vrstica. Gumbe lahko simuliramo kar s slikami iste velikosti in nekoliko drugačno vsebino. Poleg spremenjenega stanja slike ob prehodu kazalca potrebujemo še stanje slike ob pritisnjenem gumbu. Dodamo lahko tudi možnost spremembe pritisnjenega gumba, ko se preko zapeljemo s kazalcem. Vse gumbe bi lahko izdelali posamezno, lahko pa ji zgradimo tudi vse naenkrat z Adobe Dreamweaverjevim ukazom Navigation Bar.

Privzeto stanje gumba je dvignjen (nepritisnjen) gumb. Pritisnjen gumb je takrat, ko ga obiskovalec klikne z miško.

Odprimo si dokument ure.html. V podobnem dokumentu, ki je povezan s predlogo smo v vaji 9 že izdelali navigacijo s pomočjo teksta in poimenovanih oznak. To pot pa navigacijo izdelajmo z vrtljivimi slikami. Ker imamo lahko na vsaki strani le eno navigacijsko vrstico, bomo naš dokument ure.html razdelili na več dokumentov. Uporabimo kar ukaz Save As. v meniju File in shranimo kopijo z imenom ure_soncne.html. V dokumentu izbrišimo drugo vrstico s tekstom Uro si lahko izdelamo tudi sami. in vsa ostala poglavja razen poglavja Sončna ura, kot kaže slika.

s

Podobno si izdelajmo še kopije datoteke ure.html za ostale dokumente in v njih izbrišimo odvečno vsebino:

  1. ure_pescene.html - izbrišimo drugo vrstico in vse razen poglavja Peščena ura,
  2. ure_vodne.html - izbrišimo drugo vrstico in vse razen poglavja Vodna ura,
  3. ure_svecne.html - izbrišimo drugo vrstico in vse razen poglavja Svečna ura,
  4. ure_nihalne.html - izbrišimo drugo vrstico in vse razen poglavja Nihalna ura.

V dokumentu ure_soncne.html med naslov URE in podnaslov Sončna ura vstavimo tabelo z eno vrstico in enim stolpcem. Tabela je bo raztegnjena čez celo stran, Table width:100%, nima obrobe, Border:0 in ima svetlo sivo ozadje, Bg color:#CCCCCC.

s

Navigacijsko vrstico vstavimo z menijskim ukazom Insert > Image Objcts > Navigation Bar.

s

Navigacijsko vrstico lahko vstavimo tudi v vrstici za vstavljanje z orodjem Navigation Bar v zavihku Common.

s

V okno Insert Navigation Bar vnesemo podatke za prvi gumb Sončna ura, kot kaže slika. Slike za gumb se nahajajo v gradivih v mapi slike > vaja10 > gumbi. Označimo tudi potrditveno polje Show ''Down image'' initially, saj želimo, da je gumb ''pritisnjen'', ko se nahajamo na tej strani.

s

Po vnosu okna ne zapremo ampak s klikom na + dodamo nov gumb. Vpišemo podatke za gumb Peščena ura, kot kaže slika. Pazimo, da ne označimo potrditvenega polja Show ''Down image'' initially, saj ne želimo, da je gumb Peščena ura aktiven, ko se nahajamo na strani za sončno uro.

s

 

S klikom na + dodamo nov gumb, ki bo kazal na stran Vodna ura. Vnesemo podatke, kot kaže slika. Potrditvenega polja Show ''Down image'' initially ne označimo.

s

S + dodamo še gumb, ki bo kazal na stran Svečna ura. Vnesemo podatke, kot kaže slika. Potrditvenega polja Show ''Down image'' initially ne označimo.

s

S + dodamo še zadnji gumb, ki bo kazal na stran Nihalna ura. Vnesemo podatke, kot kaže slika. Potrditvenega polja Show ''Down image'' initially ne označimo.

s

Sedaj, ko smo dodali vse gumbe, zapremo okno za vstavljanje navigacijske vrstice.

s

V preostalih dokumentih ni potrebno ponovno graditi navigacijske vrstice, ampak jo lahko preprosto prekopiramo. V vrstici stanja v izbirniku značk označimo zunanjo (levo) značko <TABLE>  in jo kopiramo v odložišče. Odpremo si dokument ure_pescene.html in pod naslov URE vstavimo vsebino iz odložišča. Navigacijska vrstica se je ustrezno kopirala, a ima eno napako. Ima aktiven gumb Sončna ura, mi pa se nahajamo v dokumentu Peščena ura. Navigacijske gumbe popravimo z menijskim ukazom Modify > Navigation Bar. Odpre se nam okno Modify Navigation Bar v katerem v meniju izbire Nav bar elements izberemo soncna*. Zvezdica označuje, da je ta gumb aktiven. Odstranimo potrditveno kljukico pri izbiri Show ''Down image'' initially, kot kaže slika.

s

s

Sedaj pa v meniju Nav bar elements: izberemo pescena in potrdimo potrditveno polje Show ''Down image'' initially.

s

Podobno kopiramo navigacijsko vrstico še v preostale dokumente ure_vodne.html, ure_svecne.html in ure_nihalne.html. Pri vseh dokumentih v navigacijski vrstici popravimo še lastnost aktivnega, da bo le ta posamezni strani ustrezen.Vse dokumente shranimo.  Delovanje navigacijske vrstice preverimo z ogledom v brskalniku.

s

S tem zaključujemo vajo izdelovanja slikovnih kart, vrtljivih slik in navigacijskih vrstic. V naslednji vaji pa si bomo ogledali, kako v spletne strani vstavimo večpredstavne datoteke.

 

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