suaŠ ljubljana – srednja upravno administrativna šola … · web viewanimacija se bo videla...

69
Uvod Svoje znanje, vtise, dogodke in opažanja ljudje predstavljamo na različne načine: s pripovedovanjem v ustni ali pisni obliki, s slikovnimi albumi, z diapozitivi, video posnetki, glasbo, slikanjem… V dobi elektronike, informatike in komunikacij različnih vrst je predstavitev v medmrežju ali internetu oziroma predstavitev na zgoščenki zelo pogosta. Napravimo jo lahko v obliki spletne strani z enim od novejših urejevalnikov spletnih strani kot so Microsoft Front Page 2000 Macromedia Flash 5 Macromedia Dreamweawer in Fireworks Corel Websuite in podobnimi. Obstaja namreč še veliko dobrih in slabših urejevalnikov spletnih strani. Z urejevalnikom spletnih strani pripravljamo besedila, slike, animacije, video posnetke, jih združujemo v celoto, urejamo njihov videz, izdelujemo hiperpovezave na slike, besedilo in animacije ter uporabljamo še mnogo ukazov, ki nam na preprost način omogočajo lažje delo. Ker ste na medmrežju preživeli verjetno že kar precej časa in poznate pojem hiperpovezav že iz drugega letnika, tudi veste, da je spletnih strani že po izgledu precej različnih vrst, seveda pa tudi po vsebini. Omejili se bomo na najbolj tipične spletne predstavitve. Napravili jih bomo v urejevalniku Microsoft Front Page 2000, ki prihaja skupaj s paketom MS Office 2000. Seveda bi lahko uporabili tudi novejšo različico MS Front Page XP, ki pa zahteva veliko bolj zmogljiv računalnik, kot ga ima na voljo navaden uporabnik. MS FP 2000 omogoča napredno, a hkrati preprosto delo z gradniki spletnih strani, uporabljamo lahko tudi čarovnike, kar je pri težjih postavitvah strani nepogrešljiv pripomoček. MS FP 2000 je združljiv z ostalimi programi iz paketa MS Office 2000, predvsem kar se tiče pretvarjanja besedil, tabel in prezentacij iz MS Word 2000, MS Excel in MS Access 2000 ter MS

Upload: others

Post on 22-Jan-2021

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

Uvod

Svoje znanje, vtise, dogodke in opažanja ljudje predstavljamo na različne načine: s pripovedovanjem v ustni ali pisni obliki, s slikovnimi albumi, z diapozitivi, video posnetki, glasbo, slikanjem…

V dobi elektronike, informatike in komunikacij različnih vrst je predstavitev v medmrežju ali internetu oziroma predstavitev na zgoščenki zelo pogosta. Napravimo jo lahko v obliki spletne strani z enim od novejših urejevalnikov spletnih strani kot so

Microsoft Front Page 2000 Macromedia Flash 5 Macromedia Dreamweawer in Fireworks Corel Websuite

in podobnimi.Obstaja namreč še veliko dobrih in slabših urejevalnikov spletnih strani.

Z urejevalnikom spletnih strani pripravljamo besedila, slike, animacije, video posnetke, jih združujemo v celoto, urejamo njihov videz, izdelujemo hiperpovezave na slike, besedilo in animacije ter uporabljamo še mnogo ukazov, ki nam na preprost način omogočajo lažje delo.

Ker ste na medmrežju preživeli verjetno že kar precej časa in poznate pojem hiperpovezav že iz drugega letnika, tudi veste, da je spletnih strani že po izgledu precej različnih vrst, seveda pa tudi po vsebini. Omejili se bomo na najbolj tipične spletne predstavitve. Napravili jih bomo v urejevalniku Microsoft Front Page 2000, ki prihaja skupaj s paketom MS Office 2000. Seveda bi lahko uporabili tudi novejšo različico MS Front Page XP, ki pa zahteva veliko bolj zmogljiv računalnik, kot ga ima na voljo navaden uporabnik. MS FP 2000 omogoča napredno, a hkrati preprosto delo z gradniki spletnih strani, uporabljamo lahko tudi čarovnike, kar je pri težjih postavitvah strani nepogrešljiv pripomoček.

MS FP 2000 je združljiv z ostalimi programi iz paketa MS Office 2000, predvsem kar se tiče pretvarjanja besedil, tabel in prezentacij iz MS Word 2000, MS Excel in MS Access 2000 ter MS Power Point 2000 v format html, ki je primeren za ogled v brskalniku za internet MS Internet Explorer 5 ali več.

Prehod iz sestavljalnega načina (normal) v predogledni način (prewiev) je v MS FP 2000 zelo preprost. Predogledni način nam pokaže takšno sliko, kot bi jo videli v MS Internet Explorerju 5 ali več. Za bolj napredne sestavljalce je omogočen tudi vpogled v programsko kodo (html), kar je priročno predvsem pri kopiranju ponavljajočih se elementov na posameznih straneh ali pa dodajanju težjih animacij iz programskega jezika Java.

MS FP 2000 omogoča tudi takojšnjo objavo narejenih strani na enem od spletnih strežnikov, ki jih je po svetu zelo veliko. Do plačljivega strežnika dobite dostop z uporabniškim imenom in geslom, plačate naročnino in

Page 2: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

Vašo stran “objavite”, to je, datoteke iz svojega računalnika shranite na oddaljen računalnik – spletni strežnik, ki skrbi za stalen dostop do vaših strani.Obstaja pa veliko brezplačnih ponudnikov spletnih stražnikov (Web hosting), kjer je seveda količina podatkov za objavo omejena. Taka sta recimo www.geocities.com in www.msn.com v tujini (poleg mnogih ostalih) ter www2.arnes.si pri nas. Objavo Vaših strani urejajo administratorji strežnikov, plačljivi strežniki pa večinoma omogočajo uporabo dodatkov k MS FP 2000, kot so sestava baz in brskanje po bazah, iskanje ter še mnogo drugega.

Danes je pojem spletne trgovine (trgovine preko interneta), virtualnih knjižnic, spletnih imenikov in elektronskega bančništva najpogostejši resen način uporabe interneta poleg seveda že znanih predstavitev podjetij in dejavnosti.

V mnogih podjetjih imajo tudi interne dnevne novice, obvestila ter pošta elktronsko obliko predstavitve, čemur rečemo intranet.

Ker je veliko gradiva predstavljenega tudi na zgoščenkah, na primer atlasi, zgodovinski atlasi, enciklopedije in slovarji, je znanje o zgradbi in izdelavi spletnih strani še kako dobrodošlo.

Prednost predstavitve gradiva v obliki spletnih strani je tudi ta, da za branje vsebine ne potrebujete programa ali urejevalnika, v katerem je bila stran narejena, temveč samo MS IE 5 ali več.

Vsekakor pa take predstavitve lahko doživljate popolnoma drugače kot pisne informacije, saj nas že ob bežnem pogledu na zanimivo sestavljeno stran prične zanimati, kaj se skriva za posameznimi sličicami in besedilom.

Olajšana je tudi vizualna in abstraktna predstava pojmov, ki si jih sicer težko predstavljamo. To nam omogoča predvsem vključevanje 3d posnetkov in video posnetkov v izdelek. Dosežena je navidezna resničnost ali virtualna resničnost, ki je po podobi zelo blizu dejanski. Tako si včasih predstavljamo, kot da smo kar sami stopili v računalnik.

Seveda pa je s hitrim iskanjem, prejemanjem povratnih informacij preko spletnih vprašalnikov, branjem člankov, knjig in revij v elektronski obliki ter komuniciranjem preko klepetalnic ali elektronske pošte, omogočeno udobje, ki ga potrebujemo v vsakdanjem poslovnem, študijskem in privatnem življenju.

Razvoj mobilne telefonije je danes povezan z razvojem računalnikov in oba sta zelo hitra. Predstavitve spletnih strani za WAP odjemalce in v novejšem času za tiste, ki na svojih telefonih uporabljajo tehnologijo GPRS, so že zelo pogoste. Najdemo lahko dnevne novice in razne informacije v preprosti pomanjšani obliki, brskamo lahko po medmrežju ter uporabljamo komunikacije.

2

Page 3: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

Ni več daleč čas, ko bomo na ročni uri prenašali s seboj pravcate računalnike, spletne strani pa bodo postale še bolj pomemben način predstavitev.

3

Page 4: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

Navodila

Pred seboj imate: besedilo v skripti, ki sem mu dodala posnetke zaslonov za lažjo

orientacijo po pisnem gradivu izpis obeh obsežnejših primerov, ki Vas naučita osnov, pa tudi težjih

prijemov pri izdelavi spletnih strani zgoščenko z mapami, ki vsebujejo spletno grafiko na zgoščenki je tudi program ACD See 32, pregledovalnik slik in

animacij na zgoščenki sta tudi oba primera, shranjena v html formatu in ju je

možno gledati “v živo” preko MS IE 5 ali več

V besedilu se nahaja kar nekaj spletnih naslovov, ki nam ponujajo izbor grafičnih dodatkov in ostalih pripomočkov za izdelavo spletnih strani. Vsi naslovi obstajajo, so preverjeni, vendar se glede na hitrost sprememb na internetu lahko zgodi, da bodo spremenjeni. Tedaj se prosim obrnite name.

Vse datoteke na zgoščenki so samo za branje, lahko pa njihove dele uporabljate v izobraževalne namene in ne za javno objavo.

Za branje besedila v skripti iz zgoščenke Vam priporočam MS Word 2000 in dober računalnik.

Za pregledovanje map z grafiko si namestite ACD See 32, ki ni licenčni program.

Za branje spletnih strani potrebujete MS Internet Explorer 5, priporočljivo 5.5.

Uporabljeni programi

MS Word 2000 – pisanje besedila v skripti MS Front Page 2000 – izdelava spletnih strani MS Image Composer 1.5 – obdelava slik Jasc Animation Shop – animacija vlaka in gumba “domov” Agfa Scan Wise – skeniranje slik Win On CD – shranjevanje na zgoščenko Windows NT Explorer – priprava map na strežniku MS Internet Explorer 5.5 – iskanje spletnih mest in predogled

izdelkov

Kontakt

Vprašanja pošljite prosim na elektronski naslov [email protected]

4

Page 5: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

ali se oglasite osebno na šoli v učilnici 45 v času govorilnih ur za odrasle ob četrtkih od 18 40 do 19 30 v I. urniku.

Pri delu Vam želim veliko užitka, novih idej in motivacije, da bi tudi Vaše vsakdanje delo postalo bolj pestro in sodobno.

5

Page 6: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

Kaj je pomembno na spletni strani

Na spletni strani so pomembni:

jasnost sporočila avtorska vsebina, potrjena z viri pridobitve informacij, ki jih na

spletni strani ponujamo nepolitična in nepornografska vsebina spletne strani če gre za predstavitev podjetja ali dejavnosti, tudi logotip podjetja preglednost preprosta navigacija oziroma pomikanje med posameznimi gradniki

spletne strani dobro razvidne in predvsem delujoče povezave med datotekami ali

spletnimi stranmi na internetu enakomerna grafična obdelava, to je ozadja in pomični gumbi enake

vrste, obdelava slik na podoben način, na primer podobni okvirji in osvetlitve ter seveda barvna usklajenost z upoštevanjem logotipa oziroma celostne podobe podjetja pri predstavitvah podjetij in dejavnosti

enakomerna postavitev strani, na primer enostolpčna, dvo ali večstolpčna, usklajeni robovi in ne preveč razširjeno bralno polje

prilagoditev pogleda na različne resolucije zaslona, na primer 800x600 ali več točk, kar zahteva še dodatne nastavitve

pisava, ki je standardna na večini računalnikov pisava, ki omogoča uporabo šumnikov poudarki s preprostimi animacijami ali dinamičnimi učinki, ki

pritegnejo pozornost gledalca zgleden čas odpiranja ali nalaganja strani, kar dosežemo z obdelavo

slik na manjšo resolucijo vidni podatki o izdelovalcu ali izdelovalcih spletne strani z možnostjo

postavljanja vprašanj

Prvi primer

Elektronske čestitke

Naučili se bomo: osnov uporabe MS Front Pagea 2000 shranjevanja spletne strani izdelave in vstavljanja animiranega naslova določanja ozadja strani izdelave pomikajočega napisa izdelave tabele in urejanja tabele iskanja in shranjevanja vizualnih podob elektronskih čestitk ali

razglednic na različnih spletnih straneh na medmrežju ter vstavljanja slik v tabelo

vstavljanja in uporabe radijskih gumbov in vnosnih polj, ki jih lahko izpolnimo

uporabe hiperpovezave na spletno mesto

6

Page 7: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

predogleda strani v Internet Explorerju

Elektronska čestitka je slika, risba, fotografija, animacija, video posnetek, film, glasbeni posnetek, ki jo skupaj s spremljajočim besedilom pošljemo prejemniku po elektronski pošti.

Obstaja veliko spletnih mest v medmrežju, kjer so elektronske čestitke zbrane v zbirke, odvisno od priložnosti, za katero jih potrebujemo. Naštejmo nekaj takih mest:

www.ohmygoodness.com (animirane in glasbene čestitke)www.blab.com (animirane čestitke, za ogled je potreben flash player) v tujini in recimowww.najdi.si (fotografije)www.feliks-te-gleda.com (podobe razglednic, ki jih brezplačno ponujajo tudi po lokalih)pri nas.

Skoraj vsaka resnejša spletna stran ima danes poleg ostalih storitev tudi ponudbo elektronskih čestitk, saj je ta način razveselevanja prijateljev, družinskih članov in znancev zelo priljubljen.

stran 6,7,8,9Najprej bomo poiskali možnost izdelave animiranega naslova. Za tako izdelavo ni potrebno znanje nobenega programa. Podajmo se na internet s tem da odpremo Internet Explorer in sicer na naslov www.3dtextmaker.com.V enem od začetnih izbirnih menijev izberemo pisavo, ki jih je resnično veliko.Sama sem se odločila za pisavo BallTack iz skupine Decorative.Nato izberemo barvo pisave, na primer eno od rdečih barv.Določimo učinek pomikanja črk, na primer Swing Single v razdelku Effect.Napišemo naslov “Elektronske čestitke” v vnosnem polju tik pred koncem strani.Kliknemo napis Make 3d Text in počakamo na predogled.Ko se predogled pojavi, označimo naš animiran napis z desnim gumbom na miški, ter ga shranimo z ukazom Save Picture As (Shrani sliko kot) v že pripravljeno mapo na računalniku. Pri nas shranjujemo na disk D, mapa, ki sem jo sama uporabljala, se imenuje D:/saska/skripte.V polje File name (Ime datoteke) vpišemo na primer “napis” in rečemo Save (Shrani).Internet Explorer pustimo odprt. slika 1,2,3

Odpremo MS Front Page 2000.Pomen ikon in ukazov bomo spoznavali sproti, razporeditev na zaslonu pa je zelo prilagodljiva.Vstavimo animiran naslov. V menijski vrstici na vrhu označimo ukaz Insert, Picture, From File (Vstavi sliko iz datoteke) ter s klikom na lupo v desnem kotu okna, ki se je pojavilo, poiščemo D disk ter mapo, ki smo jo prej

7

Page 8: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

omenili. Seveda so lahko naši izdelki spravljeni tudi v kakšni drugi mapi, pomembno je le to, da uporabljamo vedno isto mapo.V mapi označimo ime slike oziroma v tem primeru animacije in sicer “napis” ter izbiro potrdimo s klikom na OK. slika 4,5Velikost slike prilagodimo tako, da jo označimo. Ko se pojavijo kvadratki na robu slike, se z miško peljemo do enega od kvadratkov, da se pojavijo dvosmerne puščice, držimo levi gumb in potegnemo v ustrezni smeri. Če želimo, lahko nad naslovom napravimo tudi eno ali več praznih vrst.

Sedaj je na vrsti shranjevanje naše spletne strani. Shranili jo bomo v isto mapo kot prej sliko, temu načinu shranjevamja rečemo lokalno shranjevanje. Ta način shranjevanja uporabljamo, dokler našo stran še ne želimo dati na voljo gledalcem oziroma jo objaviti. Možno je namreč tudi shranjevanje na daljavo, torej na spletni strežnik, kar si bomo ogledali kasneje.Kliknemo na disketko v zgornji vrsti, kar je bližnjica do ukaza File, Save (Datoteka, Shrani). Poiščemo D disk in svojo mapo ter v polje File Name (Ime datoteke) vpišemo “elektronske”. Preverimo še vrsto datoteke, ki se nahaja v polju pod imenom datoteke. Vrsta mora biti Web Pages (Spletne strani) in shranjevanje potrdimo s klikom na Save (Shrani).

slika 6,7

slika 1

8

Page 9: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 2

slika 3

9

Page 10: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 4

slika 5

10

Page 11: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 6

slika 7

11

Page 12: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

stran 11,12,13Določimo ozadje strani.Izbiramo lahko več različnih vrst ozadij. Lahko je enobarvno, sestavljeno iz večjih fotografijj ali slik, ki zasedejo celotno širino strani, sestavljeno iz manjših slik, ki so razporejene v vrstice in stolpce, lahko je celo animirano.Vrsta ozadja je odvisna od namena in sporočila strani. Če želimo doseči umirjen učinek, izbiramo enobarvna ali celo bela ozadja pastelnih barv, lahko tudi ozadja s poudarjenim levim navpičnim robom, ki vsebuje ponavljajoč vzorec. Če delamo stran, kjer je potreben učinek globine, uporabljamo temne barve, lahko tudi črno. Ozadja z logotipom podjetja imajo dober učinek, če je logotip zelo posvetljen ali celo transparenten, kar dosežemo z obdelavo slike v Image Composerju. Na zgoščenki najdete precej map, v katerih so tako ozadja kot ostali grafični dodatki za spletne strani. Te mape so tudi na računalniku, na katerem sem pripravljala skripto, sicer pa so dosegljive iz celotne omrežne soseščine v učilnici 45. Vse datoteke v njih so samo za branje.Na naši strani bomo uporabili ozadje, sestavljeno iz kock, ki se barvno ujema z ostalimi gradniki spletne strani, razen tega ponazarja sestavljanko, saj je izdelovanje in pošiljanje elektronskih čestitk neke vrste sestavljanka.Predogled slik in animacij nam omogoča programček ACD See 32, ki ga bomo startali. Na levi strani izbiramo pogone ali mesta, kjer želimo slike pregledati. Na desni imamo njihove opise ali pa pomanjšane ikone, ki jih dobimo tako, da v meniju View (Pogled) na vrhu izberemo ukaz Thumbnails (Ikone). Tako lahko nemotemo brskamo po mapah in sliko, če jo želimo, tudi pogledamo v večjem formatu.Nekaj časa bomo preskakovali iz okna programa ACD See 32 v okno programa Front Page 2000, ki morata biti prisotni, dokler ju ne zapremo, v statusni vrstici na zaslonu.V Front Pageovem oknu označimo ukaz Format, Background (Oblikuj, Ozadje), kjer se bomo omejili na drugi zavihek Background. Označili bomo Background Picture (Slikovno ozadje) ter s klikom na Browse (Preišči) skočili do računalnika z imenom Glavni v omrežni soseščini. Celotna pot je vidna v drevesu na sliki 9 in 10.Če boste uporabljali ACD See 32 na Vašem računalniku, boste seveda pogledali na CD pogon (ponavadi E ali F). Zanima nas mapa z imenom Clipart/Photos/Backgrounds, v kateri bomo izbrali sliko z imenom Blocks. Kliknemo še na OK in ozadje je narejeno.

slika 8,9,10,11,12,13

12

Page 13: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 8

slika 9

13

Page 14: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 10

slika 11

14

Page 15: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 12

slika 13

15

Page 16: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

stran 17,18Na naši strani bomo uporabili tudi pomikajoče napise.Tak napis se lahko pomika na različne načine, na primer drseče iz ene strani na drugo, menjajoče, to je, enkrat z ene strani, drugič z druge ter še na kakšen način.Poiščemo ukaz Insert, Component, Marquee (Vstavi pomikajoč napis) ter napišemo vsebino napisa “Presenetite prijatelje”. Besedilo se bo pomikalo z ene strani zaslona na drugo, zato bomo označili način pomikanja Scroll. Določili bomo ozadje napisa Background Color, na primer rumeno. Če potrdimo izbiro, se napis pojavi na zaslonu. V normalnem pogledu se še ne pomika, tako kot se ni pomikal animiran naslov.

Med snovanjem spletne strani lahko prehajamo iz normalnega načina, ki mu včasih rečemo tudi sestavljalni, kar smo že omenili, v predogledni način. To storimo tako, da kliknemo na zavihek Prewiev v spodnjem delu okna programa MS FP 2000. Ko končamo s predogledom, se vrnemo v sestavljalni način.

Širino in višino ozadja pomikajočega napisa spreminjamo tako, da napis označimo in uporabljamo ukaze za spreminjanje velikosti ozadja kot pri slikah (povleci in spusti na enem od črnih kvadratkov, ki se pojavijo kot oznake).Lastnosti pisave, predvsem vrsto, način in barvo, določamo z ikonami iz orodne vrstice za oblikovanje, ki se ponavadi nahaja pri vrhu zaslona. Pred spreminjanjem lastnosti se prav tako prepričamo, da je pomikajoč napis označen.

slika 14,15,16

Pod pomikajočim napisom bomo napisali še preprosto uvodno besedilo z ustrezno barvo (barvo lahko določamo tudi za posamezne dele besedila) in velikostjo katerekoli prijazne pisave, ki ima vse šumnike. Če bomo spletno stran gledali samo na svojem računalniku, vrsta pisave ni pomembna. Če pa jo bomo objavili na internetu, izberemo standardno pisavo (Arial, Times New Roman).Vsebino uvodnega besedila najdete v prilogi na koncu prvega primera.Pri pisanju določimo sredinsko poravnavo, ne uporabljamo odvečnih presledkov ali zamikanja s tabulatorji. Če bi želeli odstavke postaviti z zamiki, uporabimo ikone za zamike v orodni vrstici za oblikovanje.

slika 17

stran 19,20,21Pod uvodno besedilo vstavimo tabelo, kamor bomo posadili sličice naših čestitk, ki jih bo možno izbirati s klikom na gumb krožne oblike, ki mu rečemo radijski gumb.V prvo vrsto tabele bomo napisali imena čestitk, v drugo bomo dali slike, v tretjo pa radijske gumbe.Tabele so primerne takrat, ko uporabljamo zahtevno postavitev besedila in slik na strani in bi imeli z zamikanjem in oblikovanjem precejšne težave.

16

Page 17: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

Tabelo vstavimo z ukazom Insert, Table (Vstavi tabelo), ki nas vpraša, koliko vrstic (3) in stolpcev (5) bomo imeli. Rows naj bo torej 3, ker pa bomo dali na voljo 5 podob čestitk, damo Columns na 5.Alignement (Poravnava) naj bo Center (Sredinska), tabelo pa pustimo brez obrob, Border (Obroba) je torej 0. Ko rečemo OK, se tabela vstavi.

slika 18Določili bomo še barvo vseh celic v tabeli. Table, Properties (Lastnosti tabele) nam omogoča izbiro barv obrob, enobarvnega ozadja celic v tabeli ali pa slikovnega ozadja ter natnčnejše določitve poravnave.Za posamezne celice določamo lastnosti raje z ukazom Cell Properties (Lastnosti celice). Določimo Background Color (Barva ozadja) na belo.

slika 19 stran 22,23,24,25V prvo vrstico tabele vpišemo imena podob čestitk. Če še ne vemo točno, kako bomo podobe poimenovali, lahko to napišemo kasneje.

slika 20

Po podobe čestitk se odpravimo v okno Internet Explorerja ter pogledamo na naslov www.feliks-te-gleda.com. To je slovenska stran, kjer poleg podob najdemo tudi možnost pošiljanja čestitk, razne zbirke ter podatke o podjetju, ki se ukvarja s trženjem čestitk v elektronski in papirnati obliki.

slika 21Poiščemo povezavo Najbolj f-kartice, shranimo vseh pet slik z desnim gumbom na miški in in ukazom Save Picture As (Shrani sliko kot) v isto mapo na D kot prej. Slikam damo na primer imena “pes”, “365dni”, “peugeot”, “vega”, “smajli”.

slika 22

Skočimo spet v MS FP 2000 in se postavimo v prvo celico druge vrstice v tabeli. Vstavimo sliko psa z ukazom Insert, Picture, From File (Vstavi sliko iz datoteke), ki jo najdemo z lupo na D v svoji mapi. Enak postopek napravimo z ostalimi štirimi slikami. Širina tabele se prilagaja na širino strani in s tem se spreminja tudi velikost slik.

slika 23

Postavimo se še v prvo celico tretje vrstice ter se pomaknimo do ukaza Insert, Form, Radio Button (Vstavi radijski gumb). Enako storimo tudi v preostalih štirih celicah. Povsod pobrišemo gumba Submit in Reset, ki bi ju uporabljali, če bi zbirali rezultate klikanja na gumbe na naši spletni strani v posebni datoteki.Če je potrebno, uredimo še poravnavo.Kliknemo z desnim gimbom na miški na prvi radijski gumb in označimo ukaz Form Field Properties (Lastnosti radijskega gumba). V prvo vrstico vpišemo ime, s katerim smo poimenovali sliko, torej pes. Začetno stanje pustimo na Selected (izbran) in rečemo OK.Označimo še ostale gumbe, določimo lastnosti, torej vpišemo ustrezno ime in damo za vse štiri začetno vrednost na Not Selected (neizbran).

slika 23,24,25

17

Page 18: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

Pod tabelo vpišemo še opise vnosnih polj za ime, elektronski naslov prejemnika ter vsebino sporočila.Ko končamo z opisi, z ukazom Insert, Form, On line Text Box (Vstavi vnosno polje), vstavimo okence, kamor lahko kasnje gledalec spletne strani vpiše podatke. Vnosno polje po potrebi povečamo.

slika 26,27Če predvidevamo, da bo vnosno polje zahtevalo več vrstic, kot recimo polje pri vsebini sporočila, vstavimo raje pomično vnosno polje z ukazom Insert, Form, Scrolling Text Box.Na koncu vstavimo še dva gumba, enega za pošiljanje čestitk in enega za brisanje vnosov zadnjega uporabnika.Gremo na Insert, Form, Push Button (Vstavi gumb) ter jima z desnim gumbom na miški spremenimo lastnosti in sicer pri prvem:v polje Value (Vrednost) vpišemo Pošlji ter označimo Submit (Potrdi)in pri drugem:v polje Value vpišemo Zbriši ter označimo Reset (Pobriši).

slika 28

Pod oba gumba zapišemo še zaključno besedilo. Vanj vključimo tudi povezavo na feliksovo stran.

slika 29

Ko končamo z oblikovanjem spletne strani, jo shranimo s klikom na disketko, kar je pametno storiti tudi pri vmesnih korakih. Vedno tudi kontroliramo podobo strani v predoglednem načinu.

Sledi še odpiranje naše spletne strani v oknu MS Internet Explorerja, ki ga imamo še prisotnega v statusni vrstici. Gremo na File, Open (Datoteka, Odpri) ter z ukazom Browse (Preišči) poiščemo svojo datoteko “elektronske” iz naše mape na D disku. Prikaže se njena dejanska podoba, tako kot prej v predoglednem načinu. V vsa polja lahko tudi vpisujemo podatke, prav tako lahko označujemo radijske gumbe.Izpis podobe spletne strani “elektronske” vidite v prilogi na strani 25 in 26.

Če želimo prilagajati kvaliteto podobe na zaslonu, določimo resolucijo ali ločljivost zaslona v kontrolni plošči z ikono Display (Zaslon) ali pa z desnim klikom na namizje z ukazom Properties (Lastnosti) ter izberemo Settings (Nastavitve).Sama sem stran sestavljala na resoluciji 800x600, kar da še kar dobre rezultate. Boljšo sliko dobimo pri resoluciji 1024x768, seveda če naš zaslon to prenese.

18

Page 19: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 14

slika 15

19

Page 20: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 16

slika 17

20

Page 21: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 18

slika 19

21

Page 22: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 20

slika 21

22

Page 23: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 22

slika 23

23

Page 24: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 24

slika 25

24

Page 25: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 26

slika 27

25

Page 26: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 28

slika 29

26

Page 27: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

27

Page 28: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

28

Page 29: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

Nečesa še nismo napravili, to je, določili datoteke, kamor se shranjujejo vpisi v polja, prav tako nismo določili, kaj dejansko pomeni gumb “Pošlji”.Oboje lahko določimo tako, da si ogledamo lastnosti polj in gumbov. Sam MS FP 2000 nam ponuja več možnosti, shranjevanje odgovorov, vpisov ali povratne informacije lokalno na naš disk v besedni obliki ali v obliki baze podatkov pa je najbolj pogosto.

Če bi našo spletno stran shranili na daljavo na enega od spletnih strežnikov, bi uporabili ukaz File, Save As, My Network Places (Datoteka, Shrani kot, V moja spletna mesta) ali pa File, Save As, FTP Locations (Datoteka, Shrani kot, Prenos datotek). V prvem primeru, ki je tudi bolj pogost, moramo samo določiti naslov naše spletne strani v obliki

www.spletnomesto.domenain podobno. Ime spletnega mesta je prilagojeno vsebini naše predstavitve, ime domene pa je com, si in podobno. Seveda si tako mesto prej rezerviramo pri ponudniku spletnih storitev.S tem bi tudi povratno informacijo prestavili iz D diska na spletni strežnik, po katerem lahko z razširjenim FTP dostopom (Front Page Extensions) tudi brskamo, delamo nove mape in si nasplošno organiziramo pametno razporeditev svojih datotek. Kot ste verjetno opazili, smo mi tako besedila kot slike shranjevali vse v eno mapo. Včasih je seveda pametneje, da datoteke ločimo po formatu in namembnosti ter napravimo mape, npr. besedila, slike, video, animacije, spletne strani…Tako lahko tudi povratno informacijo beremo iz datoteke na spletnem strežniku, brskamo po poljih v bazi in podobno. Zelo pogost način je tudi ta, da nam spletni strežnik povratno informacijo pošlje na naš elektronski naslov.Bistvo shranjevanja na daljavo je, da bralcu naših strani ni potrebno vedeti, na katerem spletnem strežniku se naša predstavitev nahaja. Pomembno je samo, da pozna naslov naše spletne strani kot smo ga navedli zgoraj.

Spletnih strani, ki uporabljajo vprašalnike z vnosnimi polji, pomičnimi vnosnimi polji, izbirnimi meniji, radijskimi gumbi in podobno, je na medmrežju veliko.Primeri takih strani se na primer najdejo v spletni trgovini, ki zelo hitro zamenjuje kataloško prodajo, v turistični dejavnosti za oddajo rezervacij, v bančništvu za poslovanje s tekočim računom ali s podjetji, v šolstvu pri uporabi elektronske redovalnice, v navideznih knjižnicah za branje člankov, pregledovanje vsebine knjig, preverjanja zalog knjig po knjižnicah in rezervacij knjig.Našteli bi lahko še veliko možnosti. Seveda pa so take spletne strani veliko bolj komplicirane kot naša, večina uporablja tudi dostop do svojih storitev s pomočjo gesla ter seveda zelo hud način zaščite podatkov.

29

Page 30: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

Drugi primer

Predstavljam se

Naučili se bomo: naprednejše uporabe Ms Front Pagea 2000 izdelave več med seboj povezanih strani uporabe dinamičnih učinkov na spletni strani in to na slikah in

besedilu določanja enobarvnega ozadja strani izdelave zahtevnejših tabel, predvsem določanja zanimivih obrob

tabel vstavljanja slik, določanja njihovega položaja na strani urejanja podobe slik znotraj MS FP 2000 vstavljanja animacij vstavljanja video posnetkov določanja zvočnega ozadja strani uporabe delilnih črt za označevanje konca strani ali poglavja izdelave in uporabe hiperpovezav na slike, ki nam bodo omogočale

hiter prehod med stranmi

Sestavili bomo pet strani in sicer: PredstavitevZivljenjepis

DruzinaDelo

Prosticas

Osnovna stran bo imela ime Predstavitev, na njej bomo našteli ostala štiri poglavja ter omogočili gledalcu, da prehaja na poglavja s klikom na zanimive ikone. Iz vsakega od poglavij bo možno priti nazaj na osnovno stran. Imena ostalih poglavij pa nam povedo, o čem bomo govorili. Seveda bi lahko strukturo poglavij poljubno spremenili, prav tako število.

Namen predstavitve je, da povemo nekaj o sebi, o svojem življenju, družini, delu ali študiju, prostem času, vključimo pa čimveč zanimivosti, ki jih je možno poudariti s slikami, filmi, animacijami ali preprosto z zanimivo razporejenim besedilom.Ker so danes predstavitve v elektronski obliki zelo pogoste, kot smo že omenili, moramo ves čas biti pozorni na to, da ostanemo diskretni, saj objava na medmrežju prinese za seboj gledalce različnih vrst. Objavimo samo podatke in slike, ki nam niso v škodo ali posmeh.Sicer pa sploh ni nujno, da boste take strani objavili. Pomembno je, da elektronsko predstavitev obvladate.Predno začnemo, si predstavljajte, da nekdo z Vami dela intervju. Kaj mu boste povedali o sebi? Katere življenjske točke boste izpostavili? Katere slike mu boste pokazali? Kakšen jezik boste uporabili? Boste govorili bolj hudomušno ali resno? Vse to Vam naj bo v neke vrste oporo, ko boste sestavljali svojo predstavitev.

30

Page 31: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

Ni pa pomembna samo vsebina, zelo velik pomen ima tudi oblikovni pristop. Ker gre za več povezanih strani, izberemo podobna ozadja, naslove enake oblike, podobne ikone za prehod med stranmi, po možnosti povsod enako pisavo za vezno besedilo, podobno organizirane tabele, enako oblikovanje slik…

Branje moje predstavitve ni namenjeno samo učenju novih ukazov temveč tudi temu, da me bolje spoznate.

Če boste uporabljali fotografije iz svojih albumov, v kar ne dvomim, potrebujete še skener, ki vam sliko spremeni v digitalno obliko. Sama sem pri skeniranju uporabila shranjevanje slik v tiff formatu, kar pa bistveno poveča velikost slike v bajtih. Če želite sliko skenirati za objavo na internetu, boste verjetno uporabili skeniranje na format jpeg (priporočljivo za fotografije) ali gif (priporočljivo za risbe, ikone). Sicer pa Vam nekateri skenerji ponujajo še veliko drugih možnosti.Sama sem skenirala 14 fotografij oziroma slik. Vse sem tudi shranila v isto mapo na D disk kot že v prejšnjem primeru. Pri tem sem uporabljala program Agfa Scan Wise.

V kolikor imate digitalni fotoaparat ali video kamero, je seveda proces digitalizacije že vključen v posnetek.

Za izdelavo lastne predstavitve uporabite čimveč svojih idej. Pa veliko uspeha!

stran 34, 35, 36, 37V kolikor imate v oknu programa MS FP 2000 še prisoten prejšnji izdelek, označite File, New (Datoteka, Nova), da se stran izprazni.Najprej bomo shranili prvo stran naše predstavitve. Shranjujemo tako, kot smo se že naučili, datoteko bomo imenivali Predstavitev.Spremenili ji bomo tudi naslov, da bomo lahko v vrstici na vrhu kontrolirali, v kateri datoteki smo. Zato kliknemo z desnim gumbom na miški nekam v prazen list in označimo Page Properties (Lastnosti strani). V zavihku General (Splošno) vpišemo v vrstico Title (Naslov strani) ime Predstavitev.

slika 30

V zavihku Background (Ozadje strani) določimo enobarvno ozadje in sicer v vrstici Colors, Background (Barva ozadja) poiščemo eno od možnih barv. Sama sem se odločila za pastelno rumeno. Tudi ozadja na ostalih straneh bodo pastelnih barv.

slika 31

Napišemo še naslov, ki ga sredinsko poravnamo, določimo velikost in vrsto pisave (Trebuchet MS, 36 točk, krepko) ter ga obarvamo modro. Modro barve pisave uporabimo tudi za vezno besedilo, ki pa naj bo levo poravnano (Trebuchet MS, 12 točk).

31

Page 32: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

Napišemo tudi imena ostalih štirih poglavij, ki jih lahko razporedimo krožno po zaslonu in pri tem uporabljamo zamikanje v desno z ikono iz vrstice za oblikovanje.Tudi na vseh ostalih straneh bomo uporabljali enako vrsto pisave tako za naslove kot za vezno besedilo.

Odpravimo se še po ikone, ki jih bomo uporabili za prehod med poglavji.Večinoma uporabljamo že pripravljene ikone oziroma grafične dodatke za spletne strani kot so ozadja, prehodni gumbi za hojo po straneh, delilne črte za delitev poglavij in razdelkov, oznake za elektronsko pošto, kontakte, novosti in podobno.

Kdor še obvlada Image Composer, lahko na primer ozadja napravi sam. Velikost slike nastavite na 200x200 (za ozadja, ki jih boste razporejali po zaslonu kot sestavljanko), 800x20 (za ozadja, ki jih nalagate enega pod drugim, ker so široka kot zaslon – spomnite se na resolucijo zaslona, taka ozadja imajo ponavadi prelivajoč učinek na levem robu zaslona) ter 800x600 (za velika ozadja čez ves zaslon, seveda še v odvisnosti od resolucije). Uporabljate lahko barvanje, različne učinke iz ukaza Effects, učinke iz Impressionista in podobno. Sliko shranite z gif formatom v svojo mapo in določite ozadje v lastnostih strani v MS FP 2000.Ravno tako bi lahko v Image Composerju napravili prehodne gumbe z ukazom Insert, Button (Vstavi gumb), kjer bi določili obliko, barvo in napise na gumbih. Gumbe shranite z ukazom Save Selection AS (Shrani izbiro) z gif formatom v svojo mapo. Kasneje jih vstavite v spletno stran z ukazom Insert, Picture, From File (Vstavljanje, Slika, Iz datoteke). Uredite njeno veliokost in položaj na strani.Z omenjenim programom se lahko pozabavate sami.

Mi bomo naše ikone našli s programom ACD See 32 v mapi web/graphics/buttons/set2, kjer bomo shranili vseh osem okvirčkov z imeni sq2… Trenutno ni videti, da potrebujemo vseh osem, vendar jih bomo kasneje uredili tako, da bo pri prehodu z miško čez okvirček le ta spremenil barvo. To bomo dosegli z dinamičnimi učinki znotraj MS FP 2000.Zatorej označimo enega od okvirčkov z desnim gumbom na miški in se peljemo do ukaza Copy to (Kopiraj v), kar pomeni, da bomo okvirček kopirali v našo mapo.Pojavi se novo okno, v katerem z ukazom Browse (Preišči) skočimo do D diska in v našo mapo. Rečemo Ok in sličica je skopirana.

slika 32, 33

Enako ponovimo za ostale okvirčke iz množice set2. Če Vam je bolj všeč kakšna druga ikona, lahko izbirate.Ostale ikone, pa naj bodo v statični ali animirani obliki, najdete v mapi web, predvsem icons (različne ikone), gifanim (animirane sličice), lines (delilne črte).Če pa potrebujete ozadja, se podajte v backgrounds.

32

Page 33: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

Veliko ozadij različnih vrst je tudi v mapi temp-ray in sicer 100x100, 70x70, 200x200 (ozadja, ki jih razporejamo), Bigsize (velika ozadja), Fullsize in Other (prelivajoča ozadja).Različne vzorce najdete tudi v mapi vzorci, če pa želite uporabiti fotografije kot ozadja ali posamezne slike, so zelo lepe na voljo v mapah clipart/photos, corelphotos ter temp-ray/tekmovanje/images. Nekatere fotografije so manjše, nekatere pa zelo velike, tako kot tiste v corelphotos.Različne risbe, ki so mnogokrat tudi uporabne, najdete predvsem še v mapah clipart, clipart1 in risanke. Nekatere se tudi transparentne, recimo tiste v clipart1. Na spletni strani izgledajo kot izrezane. Prepustite se iskanju.

33

Page 34: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

Vrnimo se v okno programa MS Front Page in pred imeni poglavij vstavimo okvirčke štirih različnih barv z ukazom Insert, Picture, From File (Vstavi slliko iz datoteke), kjer poiščemo imena okvirčkov v naši mapi na D. Katere barve bomo izbrali, ni pomembno.

slika 34

Označimo enega od okvirčkov. Nato se peljemo do ukaza Format, Dynamic HTML Effects (Uredi dinamične učinke). Ta ukaz nam omogoča, da se slika ali besedilo spremenita po barvi, velikosti in podobno, ko gremo z miško čez oziroma ko klinemo na sliko ali besedilo.Pojavi se novo okno s tremi razdelki. V prvem razdelku On (Z učinkom pri…) določimo On Mouse Over (Z učinkom pri prehodu z miško čez sliko).V drugem razdelku Apply(Uporabi) določimo Swap Picture (Spremeni sliko).V tretjem razdelku določimo Choose Picture (Izberi sliko, ki se bo pojavila, ko bomo z miško prešli preko okvirčka).

slika 34, 35

Sedaj se preselimo v svojo mapo in izberemo enega od tistih štirih okvirčkov, ki jih nismo vstavili pred imena poglavij. To je namreč pomembno, saj je sprememba barve bolj očitna, če se razlikuje od ostalih.Enako storimo za vse štiri okvirčke, rezultat prehajanja pa si ogledamo v predoglednem načinu (Prewiev). Nato se vrnemo v sestavljalni način.

Na koncu vstavimo še delilno črto z ukazom Insert, Horizontal Line (Vstavi vodoravno črto), ki v tem primeru pomeni konec poglavja. V to poglavje se bomo še vrnili.

slika 36, 37

stran 38, 39Poskrbimo za shranjevanje strani z imenom “Predstavitev”.Napravimo novo stran s klikom na prvo ikono v splošni orodni vrstici v obliki lista ali pa označimo File, New (Datoteka, Nova).Takoj shranimo stran z imenom “Zivljenjepis” in v lastnostih strani določimo naslov strani na Zivljenjepis ter ozadje na eno od pastelnih barv. Sama sem izbrala eno od modrih barv.Na tej strani napišemo naslov z enakimi določili kot na prvi strani.Vezno besedilo naj ima tudi enaka določila kot prej, vsebina pa naj se navezuje na splošne podatke iz življenejpisa.Sama sem dodala še animirano podobo vlaka z ukazom Insert, Picture, From File (Vstavi slike iz datoteke). Ta ukaz deluje, čeprav gre za animacijo.

Sliko vlaka sem našla na internetu, nato pa sem jo predelala v animacijo v programu Jasc Animation Shop, ki ima na voljo že mnogo predpripravljenih učinkov. Animacijo sem postavila na sredino strani tako, da sem sliko označila in uporabila ukaz za sredinsko poravnavo.

34

Page 35: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

Podobo animacije seveda vidimo samo v predoglednem načinu.Moramo pa poskrbeti še za to, da animacija ne bo prenehala delovati po nekaj sekundah, temveč da se bo ponavljala. To storimo tako, da označimo vlak, kliknemo nanj z desnim gumbom na miški in pogledamo v Picture Properties (Lastnosti slike) in sicer v zavihek Video. V predalček Forever (Vedno) damo kljukico. V predoglednem načinu sedaj izgleda, kot da se vlak venomer premika.

slika 38

Na koncu besedila sem napravila še tabelo s štirimi celicami, torej z dvema vrsticama in dvema stolpcema. Tabela je brez obrob. V prvo vrstico tabele sem napisala opisa obeh slik, v drugo pa sem vstavila dve sliki iz otroštva.Urejanje tabele poteka tako kot v izdelku “elektronske”.Sliki sem uredila po velikosti, razen tega pa sem jima poudarila robove v izbočeno prisekano obliko tako, da sem uporabila ukaz Bevel iz orodne vrstice za oblikovanje slik, ki se pojavi takoj, ko sliko označimo. Podobno sem uredila vse ostale slike iz vseh poglavij, predvsem fotografije.

slika 39

Na koncu besedila napravimo še delilno črto in shranimo “Zivljenjepis”.

Sestavili bomo še tri nove strani in sicer imeni “Druzina”, “Delo” in “Prosticas”. Napravimo jih lahko takoj, zaporedoma uporabimo ukaz za novo stran in shranjujemo v ustrezno mapo na D disku. Med posameznimi okni prehajamo z ukazom Window, kjer samo kliknemo na ustrezno ime datoteke in že smo v ustreznem oknu. To je dobrodošlo predvsem takrat, ko delamo z večimi stranmi naenkrat ali pa v predoglednem načinu preverjamo, če delujejo hiperpovezave.

Najprej se postavimo v okno z imenom “Druzina”. V datoteki “Druzina” opišemo svoje prednike in svojo družino, če jo imamo. Vse ostale nastavitve v zvezi s pisavo in barvami so enake kot prej. Slike vstavimo in uredimo kot prej. V tem primeru nisem uporabila tabele.Izdelek shranimo s klikom na disketko.

Odpravimo se v okno z imenom “Delo”.V datoteki “Delo” opišemo svoje delo, šolanje, študij in podobno. Edina posebnost, ki sem jo sama uporabila, je animacija diskete, ki sem jo našla na medmrežju na naslovu www.animfactory.com v razdelku computers/parts. Shranila sem jo v svojo mapo na D disku. Nato sem jo vstavila v datoteko “Delo” v programu MS Front Page 2000 nekje med dvema odstavkoma. Določila sem še poseben položaj animacije, tako da se le ta nahaja deloma pod besedilom. To storimo z ukazom Format, Position (Uredi položaj) in označimo v prvi vrsti None (Ni prostora okoli slike, postavim jo lahko kamorkoli, ne da bi se besedilo razprlo), v drugi vrsti pa Absolute (Sliko lahko postavim po svoje med, pod ali nad besedilo). Ostale možnosti nam

35

Page 36: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

omogočajo razpiranje oziroma oblivanje besedila okoli slike. V vrstici Z-Order (Vrstni red) napišemo številko –1, kar pomeni, da bo slika pod besedilom. Če pustimo 0, je slika na istem nivoju kot besedilo, to je, med besedilom. Pri vrednosti 1 je slika nad besedilom, torej ga pokriva. Animacijo vidimo v predoglednem načinu. Če bi se izkazalo, da je slika pretemna, jo lahko posvetlimo z ukazom za svetlost (sonček) iz orodne vrstice za urejanje slik in animacij. Druga možnost pa je seveda spreminjanje barve pisave, kar pa Vam ne priporočam, ker je to še odvisno od resolucije zaslona.

slika 40, 41

stran 40Shranimo poglavje “Delo” in se odpravimo v okno z imenom “Prosticas”.No, pa smo prispeli do zadnjega poglavja, ki pa je verjetno tako po vsebini kot po uporabljenih ukazih zahtevnejše od ostalih.Besedilo se navezuje na preživljanje Vašega prostega časa, hobije, prijatelje. Bodite čimbolj ustvarjalni.

Med besedilo, ki ga uredimo enako kot v vseh poglavjih, bomo vstavili dve tabeli. V eni bo galerija slik, v drugi pa nekaj lastnosti osebnosti.Slike in animacije lahko vstavljamo tudi med besedilo. Njihov položaj in nivo določamo kot v razdelku “Delo”. Sama sem uporabila izključno skenirane slike. Po izgledu sem jih uredila tako kot v ostalih poglavjih z ukazom Bevel (Prisekan rob), le akvarel sem pustila brez robov.

Na koncu poglavja sem uporabila tudi podvodni video posnetek, ki se navezuje na enega od mojih hobijev. Najdete ga s programčkom ACD See 32 ali pa z raziskovalcem na Vaši zgoščenki. Nahaja se v mapi temp-ray/tekmovanje/256-col/nr-5, imenuje pa se mv01150.avi. Seveda si lahko ogledate še ostale video posnetke, ki jih je predvsem v mapi tekmovanje precej. Če boste uporabili nalaganje video posnetkov z interneta, pazite, da boste pri začetku postopka Download (Nalaganje) označili Save (Shrani) ter določili svojo mapo.

Najprej si oglejmo nekaj posebnosti pri tabeli, ki je namenjena galeriji slik.Vstavimo tabelo s štirimi vrsticami in tremi stolpci. Tabela naj se razporedi na celotno širino zaslona, celice pa se bodo prilagajale z vstavljanjem naših slik.Uredili bomo obrobe tabele in sicer tako, da se bodo prelivale iz modre v belo barvo. Označimo ukaz Table, Properties, Table (Tabela, Lastnosti celotne tabele). V vrstici Border, Size (Debelina obrobe) damo številko 1, lahko tudi malce več, odvisno od želja, Color (Barva obrobe) pa postavimo na modro.Light Border (Levi zgornji del obrobe) postavimo na modro barvo, Dark Border (Desni spodnji del obrobe) pa na belo barvo. Ti dve postavitvi napravita neke vrste prelivanje obrob od en do druge barve, ponavadi od levega zgornjega kota tabele do diagonalno ležečega kota tabele kot osvetlitev ali potemnitev.

36

Page 37: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

Debelejši kot je rob, bolj očitno je prelivanje.V prvo in zadnjo vrtso tabele damo opise slik, v drugo in tretjo vrsto pa vstavimo slike (6 slik), jih uredimo na sredinsko poravnavo, po potrebi pomanjšamo in prisekamo robove.

slika 42, 43

37

Page 38: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 30

slika 31

38

Page 39: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 32

slika 33

39

Page 40: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 34

slika 35

40

Page 41: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 36

slika 37

41

Page 42: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 38

slika 39

42

Page 43: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 40

slika 41

43

Page 44: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 42

slika 43

44

Page 45: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

stran 42, 43, 44, 45, 46, 47V uvodnem poglavju smo že uporabili dinamične učinke na sličicah, sedaj pa bomo podobno storili še z vprašanjem “Ali uganete, katere?”, ki se nahaja nekje med veznim besedilom. Označimo torej zastavljeno vprašanje in pojdimo na ukaz Format, Dynamic HTML Effects (Oblikuj dinamične učinke) ter določimo po vrsti po razdelkih On Mouse Over (Pri prehajanju z miško), Formatting (Oblikovanje besedila) ter Choose Font (Izberi pisavo).V novem oknu skočimo na zavihek Character Spacing (Razmik med znaki) ter v predalčku Spacing določimo Expanded (Razširjen razmik), v predalčku By (Koliko znaša razmik) pa nastavimo 3 točke.V predoglednem načinu se peljemo z miško čez besedilo in opazujemo, kako se pri tem črke razmaknejo.Seveda bi lahko dinamični učinek popestrili še z drugačno barvo pisave ali celo z drugo pisavo ter seveda z obrobo. Vendar pretiravati ni treba.

slika 44, 45

V naslednjem odstavku omenjam glasbo, zato sem določila tudi glasbeno ozadje strani. To pomeni, da se glasba, ki jo poiščemo na disku, na zgoščenki ali iz interneta, sliši takoj, ko stran odpremo v predoglednem načinu.Z ukazom Format, Background (Oblikuj ozadje strani) v zavihku General (Splošno) določimo lokacijo zvoka v predalčku Background Sound (Zvok v ozadju). Sama sem na C disku našla v mapi Winnt/Media, ki je sistemska mapa, datoteko In the Hall of the Mountain Hill.

slika 46, 47

Na koncu veznega besedila napravimo še tabelo z enim stolpcem in desetimi vrsticami, ki jo pustimo brez obrob.V vsako vrstico napišemo po izbiri, katera barva, cvet, drevo, kamen, letni čas, jed, šport, hobi,… so nam najljubši in besedilo poravnamo sredinsko.Nato po vrsti označujemo vrtice in se vsakokrat peljemo do ukaza za določanje dinamičnega učinka, kjer v razdelkih po vrsti izberemo On Mouse Over, Formatting, Choose Border (Pri prehodu z miško se naj spremeni obroba oziroma ozadje besedila). V zavihku Shading (Senčenje oziroma ozadje) določimo eno od možnih barv v predalčku Background Color (Barva ozadja).Ko bomo za vse vrstice spremenili barve ozadij, bomo pogledali še v predogledni način. Pri pomikanju z miško po vrsticah v tabeli se barve po vrsti spreminjajo. S tem popestrimo sicer dolgočasno postavitev v tabeli.

slika 48, 49

Na koncu tabele vstavimo še video posnetek iz mape tekmovanje na zgoščenki, ki sem ga že omenila z ukazom Insert, Picture, From File, Video (Vstavi video), ga sredinsko poravnamo in mu po potrebi uredimo velikost. Seveda povečevanje ne pride v poštev, ker s tem izgubimo kvaliteto posnetka.

slika 50

45

Page 46: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 44

slika 45

46

Page 47: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 46

slika 47

47

Page 48: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 48

slika 49

48

Page 49: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 50

Na koncu vsakega poglavja bomo vstavili še animacijo, ki bo omogočala prehod iz trenutnega poglavja na začetno stran “Predstavitev”. Včasih v ta namen uporabljamo ikono v obliki hiše (Home=Domov oziroma na začetno stran), mnogokrat pa tudi ikone drugačne oblike, ki so lahko tudi animirane.

Animacijo sem napravila v programu Jasc Animation Shop iz enega od kvadratov, ki sem ga našla na zgoščenki v mapi web. Seveda bi lahko za osnovo vzela katerokoli sliko. Določila sem učinek prehajanja iz ene barve v drugo, kar se nekako sklada z dinamičnimi učinki, ki smo jih uporabljali na sličicah in besedilu. Animacijo sem shranila v svojo mapo.

V oknu programa MS Front Page 2000 vstavimo animacijo na primer zaenkrat kar na koncu strani “Prosti čas”. Animacija se bo videla zgolj v predoglednem načinu.Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo tako, da označimo v splošni orodni vrstici ikono v obliki Zemlje z verigo. Z lupo poiščemo ime datoteke “predstavitev” iz naše mape na D disku. V predoglednem načinu bomo s klikom na animiran kvadratek prišli na začetno stran, od koder pa na ostala poglavja že imamo napravljene povezave s klikom na okvirčke.

slika 51

Enak postopek napravimo na koncu vsakega poglavja razen začetnega in si delovanje hiperpovezave ogledamo v predoglednem načinu .

slika 52, 53

49

Page 50: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 51

slika 52

50

Page 51: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

slika 53

Od strani 48 naprej imate prilogo z vsemi stranmi iz naloge Predstavim se. Predno pričnete z delom , si jih dobro oglejte.

Med samim delom si odprite stran “Predstavitev” v MS Internet Explorerju, najbolje 5.5 ter preizkusite vse učinke in hiperpovezave. Resolucijo uredite na ustrezno vrednost.Za ogled izdelka ne potrebujete samo MS Internet Explorer.

Če boste želeli izdelovati svoje spletne strani, morate kupiti licenčno verzijo programa MS Front Page 2000.

Zaključili smo z drugim primerom.Upam, da sem Vam v najkrajši možni obliki predstavila, kaj vse je možno delati s pomočjo urejevalnika spletnih strani MS Front Page 2000.

51

Page 52: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

52

Page 53: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

53

Page 54: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

54

Page 55: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

55

Page 56: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

56

Page 57: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

57

Page 58: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

58

Page 59: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

Na naslednji strani vidimo še vse datoteke iz mape na D disku, ki sem jih uporabljala pri izdelavi skripte in primerov in sicer v slikovnem pogledu v raziskovalcu.

Naloga za utrjevanje

Predstavitev podjetja

Napravite dve med seboj povezani spletni strani.

Na prvi predstavite podjetje po Vašem izboru, na primer trgovino z oblačili, igračami, avtomobili ali kakšno drugo podjetje.Uporabite:

ozadje strani po lastnem izboru pomikajoč naslov strani opis podjetja (dejavnosti, zaposleni, poslovanje in uspešnost, artikli,

poslovalnice in podobno) slike ali animacije za popestritev predstavitve lahko tudi zaščini znak, če gre za podjetje, ki obstaja in ima svojo

predstavitev na medmrežju če želite, lahko zaščitni znak napravite tudi v Image Composerju po

lastni zamisli hiperpovezavo na naslednjo stran v obliki slike ali besedila

Na drugi strani predstavite galerijo prodajnih artiklov.Uporabite:

ozadje strani naslov strani z dinamičnim učinkom uvodno besedilo tabelo s prelivajočimi obrobami, kamor boste vstavili slike in opise

artiklov hiperpovezavo na prvo stran v obliki slike ali besedila

Zaključek

Ko boste obvladali vsebino skripte, ste lahko ponosni nase.

Priporočam Vam, da si tudi sami izmislite kak primer spletne strani po zgledu tistih iz interneta. Nekaj namigov: jedilni list z recepti, horoskop, aktualni dogodki, Vaša potovanja s slikami, zemljevidi ….

Seveda morate paziti, da izbirate primere, ki jih je možno napraviti v MS Front Page 2000. Mnogo spletnih strani je namreč napravljenih v Flashu 5.0 ali manj, tam se lahko zgledujete le po vsebini.

Tisti, ki imate možnost objave na kakem spletnem strežniku, lahko to tudi napravite.

Uporabnost pojmov, ki ste se jih naučili, boste spoznali v četrtem letniku, ko boste naučene programe iz vseh let povezali s poslovnim svetom.

59

Page 60: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

60

Page 61: SUAŠ Ljubljana – Srednja upravno administrativna šola … · Web viewAnimacija se bo videla zgolj v predoglednem načinu. Nato jo označimo, sredinsko poravnamo in napravimo hiperpovezavo

61