FrontPage 2003 - Arneskurank/inf/01_FP_FrontPage2003.pdf · 2007. 5. 13. · Ekonomska šola Kranj FrontPage 2003 Stran 1 1. Osnovni pojmi FrontPage je eno od najbolj priljubljenih

Ekonomska šola

Kidričeva 65

4000 Kranj

FrontPage 2003 ZA INTERNO UPORABO

Pripravil: Tomo Grahek

Kranj, maj 07

KAZALO 1. Osnovni pojmi .................................................................................................................... 1

1.1. O izdelavi spleta ......................................................................................................... 1

1.2. Najbolj pogosto uporabljeni gumbi v orodni vrstici .................................................. 2

1.3. Vrstica pogledov ........................................................................................................ 2

2. Uporaba čarovnika za izdelavo spleta ................................................................................ 3

3. Preurejanje spleta ............................................................................................................... 9

3.1. Brisanje strani............................................................................................................. 9

3.2. Dodajanje strani.......................................................................................................... 9

3.3. Preimenovanje strani in datotek ............................................................................... 10

3.4. Poslovenimo povezave............................................................................................. 10

4. Oblikovanje besedila ........................................................................................................ 10

4.1. Oblikovanje s slogi................................................................................................... 10

4.2. Sprememba pisave.................................................................................................... 11

4.3. Sprememba velikosti pisave..................................................................................... 11

5. Dodajmo nadpovezave v našo spletno stran .................................................................... 11

5.1. Nadpovezava na novo stran...................................................................................... 12

5.2. Izdelava nadpovezav na obstoječe strani ................................................................. 13

5.3. E-mail nadpovezava ................................................................................................. 13

5.4. Izdelava nadpovezave na zaznamek......................................................................... 14

6. Izdelava spleta brez pomoči čarovnika ............................................................................ 15

6.1. Določitev lokacije in odpiranje spletnih strani......................................................... 15

6.2. Struktura spletnih strani ........................................................................................... 16

6.2.1. Struktura strani v oknu Folder List .................................................................. 16

6.2.2. Izdelava uvodne strani...................................................................................... 16

6.2.3. Vstavljanje naslova strani................................................................................. 18

6.2.4. Vstavljanje usmerjevalnega pasu - gumbov za povezavo................................ 18

6.2.5. Ozadje............................................................................................................... 18

6.2.6. Vstavljanje in nameščanje slik, besedila… ...................................................... 20

6.2.7. Vstavljanje okvirja za pošiljanje sporočil ........................................................ 21

6.2.8. Vstavljanje števca obiskov in datuma spremembe........................................... 21

6.3. Shranjevanje strani ................................................................................................... 22

6.4. Preizkus delovanja spleta ......................................................................................... 22

6.5. Interaktivni gumbi .................................................................................................... 22

6.5.1. Usmerjevalni pas .............................................................................................. 23

6.5.2. Prikaz galerije fotografij................................................................................... 23

6.6. Vstavljanje video posnetkov .................................................................................... 24

6.7. Izdelovanje strani z okvirji ....................................................................................... 24

6.7.1. Shranimo spletno stran ..................................................................................... 26

6.8. Vrinjeni okvirji ......................................................................................................... 27

6.9. Kako vstaviti tabelo na spletno stran........................................................................ 27

6.9.1. Kako oblikovati tabelo ..................................................................................... 28

6.10. Dodajmo spletu sliko............................................................................................ 29

6.11. Dodajanje posebnih učinkov ................................................................................ 30

6.11.1. Izdelava vročih mest......................................................................................... 30

6.12. Izdelava potujočih napisov................................................................................... 31

6.12.1. Prehodi med stranmi......................................................................................... 32

6.13. Preglejmo nadpovezave........................................................................................ 32

6.14. Vaja ...................................................................................................................... 33

Ekonomska šola Kranj FrontPage 2003

Stran 1

1. Osnovni pojmi FrontPage je eno od najbolj priljubljenih orodij za izdelavo spletnih strani. Delo temelji na

standardnih postopkih oblikovanja, kot so vam poznani iz ostalih Microsoftovih programov

(Word, Excel…).

SPLET - web, je zbirka med seboj povezanih strani. Ko ga shranimo v spletni strežnik,

postane to SPLETNO MESTO.

1.1. O izdelavi spleta

Splet je sestavljen iz glavne (uvodne) strani in več podstrani, na katerih je vsebina razvrščena

po temah.

Pred pričetkom izdelave spleta moramo razmisliti, kaj naj se prikaže na vsaki strani. To ne

pomeni, da moramo načrtovati vsako podrobnost, vedeti pa moramo katere podatke bomo

predstavili in na kateri strani. Delo si bomo močno olajšali, če se že na začetku odločimo,

kako bomo posamezne strani med seboj povezali.

Pri tem moramo paziti na naslednje zahteve:

• Opredelitev vsebine

• Kateri podatki so nujni

• Kateri podatki naj bodo najbolj dostopni - informacija, ki je najbolj zanimiva ne sme

biti dalj kot en klik od domače strani

• Kakšna grafika je najustreznejša

Ko zaženemo program FrontPage, vidimo na zaslonu naslednjo sliko:


Stran 2

JEZIČEK DESIGN- v tem pogledu pišemo besedilo spletne strani, ga oblikujemo, vstavljamo

slike, tabele, vnosne obrazce,..

JEZIČEK PREVIEW- vnaprejšnji pogled, tu vidimo svojo stran takšno kakršna bo videti s

spletnim brskalnikom.

JEZIČEK CODE- svojo spletno stran vidimo zapisano s kodo HTML jezika.

1.2. Najbolj pogosto uporabljeni gumbi v orodni vrstici

Poleg menijske vrstice, nam je na voljo za izbiranje ukazov še orodna vrstica. V orodni vrstici

so razvrščeni gumbi v dve glavni vrstici: v Standard in Formatting vrstico.

Spodaj so na kratko opisani najpomembnejši gumbi iz orodne vrstice Standard:

Seznam map

Novo spletno mesto ali nova stran Shrani stran

Odpri obstoječ splet ali stran

1.3. Vrstica pogledov

Vrstica pogledov se nahaja na dnu ekrana in nam omogoča hitri preklop na želeni pogled (npr.

v pogled Navigation vidimo organizacijo spleta v grafični obliki, v tem pogledu pa lahko

organizacijo spremenimo, brišemo in dodajamo strani…).

Seznam map in datotek v spletu Prikaz spleta v obliki grafa Seznam opravil

Poročila o spletu Prikaz povezav


Stran 3

Pogled Navigation

2. Uporaba čarovnika za izdelavo spleta

Splet lahko izdelamo s pomočjo čarovnika, ki ga aktiviramo z ukazom File/New in izbiro

More Web site templates.

V desnem delu okna Web Site Template vpišite v okvirček lokacijo vaše spletnih strani

naslov oz. lokacijo določite po kliku na gumb Browse.

Kliknite ikono Corporate Presence Wizard - namenjena je predstavitvi podjetij. Čarovnik

nam predlaga sam lokacijo našega spleta ( c:\moji dokumenti\my web\myweb). Pri tem je

treba vedeti, da bo vse strani spleta v tem primeru shranil v mapo Myweb ali novo mapo

Moj prvi splet.


Stran 4

• Odpre se nam prvo pogovorno okno čarovnika. S klikom v polje pritrdimo ali

zanikamo posamezne zahteve. S tem izbiramo kakšne oblike hočemo imeti na strani,

oziroma če hočemo imeti kazalo, iskalni obrazec, ali gumb za domačo stran. Ko smo

zadovoljni z izbiro, kliknemo gumb Next (naprej).

• V tem pogovornem oknu izbiramo, ali hočemo imeti predstavitev podjetja, uvod in

ostale informacije. Ko se odločimo, kliknemo Next(naprej).

• V tem pogovornem oknu izbiramo, katere glavne strani želimo imeti v našem

spletnem mestu. Ko izberemo ustrezne strani, kliknemo Next.


Stran 5

• V polje Products vnesemo število izdelkov in v Services število storitev, ki jih bomo

opisali. Kliknemo Next.


Stran 6

• Odkljukamo polje Information request form. Kliknemo Next.

• Določimo vsebino obrazca, v katerega bodo obiskovalci našega spleta vpisovali

predloge, pripombe…


Stran 7

• Tu odkljukamo polja katera želimo imeti na vrhu ali na dnu naše strani.

• V tem koraku vnesemo ustrezne podatke, polno ime podjetja/šole, skrajšano ime

podjetja/šole in naslov podjetja/šole. Kliknemo Next.


Stran 8

• V naslednjem koraku vnesemo telefonsko številko podjetja/šole, faks podjetja/šole,

skrbnikov e-mail in e-mail podjetja/šole. Kliknemo Next.

• Prispeli smo do zadnjega pogovornega okna. Če smo zadovoljni z našim delom, lahko

kliknemo Finish.


Stran 9

• Čarovnik za izdelavo spleta se zapre, znajdemo se v drugem pogledu in sicer v Tasks

view (pregled opravil).

Če kliknemo ikono Navigation v vrstici Views za prikaz spleta, dobimo prikaz spleta v obliki

grafikona.

3. Preurejanje spleta

Če hočemo preurejati splet moramo v pogled Navigation. To storimo tako, da kliknemo ikono

Navigation.

V tem pogledu vidimo naš splet v obliki grafikona. Na levi strani se

nam odpre seznam map. Listki z zavihki na desni strani predstavljajo

strani spleta. Domača stran je označena s hišico.

3.1. Brisanje strani

Z miško označimo listek, ki ga hočemo zbrisati in pritisneš tipko Delete na tipkovnici.

3.2. Dodajanje strani

Izberemo listek Home, v orodni vrstici Standard kliknemo na gumb za novo stran. Domači

strani se tako doda podstran New page 1.

Če pa želimo dodati New page 1 še eno podstran, moramo izbrati listek te strani in v meniju

File izbereno New in Page.


Stran 10

3.3. Preimenovanje strani in datotek

Z desnim klikom na izbranem listku z zavihkom lahko z ukazom Rename (ali klikom v imenu

listka) strani določimo novo ime, ki se bo izpisalo tudi na vrhu te strani na mestu, ki je

predvideno za naslov. S tem pa ne preimenujemo datotek, ki jih moramo preimenovati na

podoben način. Pri tem moramo paziti, da:

• bo ime datoteke uvodne strani ostalo nespremenjeno (index.htm),

• da bodo imela vsa imena končnico .htm,

• da v imenih datotek ne uporabljamo šumnikov, matematičnih znakov…, ki bi

povzročali težave na spletnem strežniku,

• ne prekinemo obstoječih nadpovezav, zato na vprašanje o »update« odgovorimo z Yes.

3.4. Poslovenimo povezave

Napisi na navigacijskih gumbkih so v angleščini (Up, Home…), zato jih moramo posloveniti.

V meniju Tools izberemo Site Settings, nato pa kliknite na jeziček kartice Navigation. V

okvirčku Parent page pobrišemo Up in napišemo Navzgor itd…. ter potrdimo z OK. 3.

4. Oblikovanje besedila

Ko zapišemo stvari, katere želimo imeti na spletni strani, se

posvetimo še obliki besedila. Način oblikovanja besedila je

enak kakor pri vseh drugih Microsoftovih programih.

4.1. Oblikovanje s slogi

Če za oblikovanje naše strani uporabimo že pripravljeno temo,

oblikovanje besedila nadzoruje določena vrsta sloga. Slog je

kombinacija oblikovanja (pisava, velikost, barve, razmik med

znaki), ki velja le za posamezen element strani.

Če želimo zamenjati slog pisave kliknemo na puščico ob

besedi Normal in izberemo ustrezni slog.


Stran 11

4.2. Sprememba pisave

Če želimo zamenjati vrsto pisave, kliknemo puščico na desni strani seznama s pisavami in

izberemo ustrezno pisavo.

4.3. Sprememba velikosti pisave

Če želimo povečati ali zmanjšati velikost pisave, kliknemo puščico na desni strani seznama

velikosti in izberemo ustrezno velikost ali gumba za povečevanje oz. zmanjševanje pisave.

Krepko Ležeče Podčrtano

Velikost pisave

5. Dodajmo nadpovezave v našo spletno stran

Če se želimo hitro premikati iz ene spletne strani na drugo in nazaj moramo uporabiti

nadpovezave. Nadpovezave nam omogočijo hitri skok na drugo spletno mesto, ki je lahko tudi

v drugem spletu, ali pa pridemo do slike, zvoka ter animacij. Nadpovezave so lahko: na novo

stran, na že obstoječo stran, na naš e-mail naslov, na začetek strani ali še kam drugam.

Če želimo dodati katerokoli nadpovezavo, izberemo objekt oz. besedilo kliknemo

Insert/Hyperlink (ali desni klik ter.Hyperlink oz gumb).


Stran 12

Prikaže se okno za izdelavo nadpovezav

5.1. Nadpovezava na novo stran

Če želimo narediti nadpovezavo na novo stran, si moramo najprej izbrati besedilo ali

objekt, ki bo predstavljala nadpovezavo na novo stran.

• Iz menija Insert kliknimo izbiro Hyperlink. Odpre se pogovorno okno Insert

Hyperlink.

• V pogovornem oknu Insert Hyperlink izberemo ikono za novo stran Create New

Document.

• Na novo stran, ki se prikaže, vnesemo tekst, ki ga želimo na tej strani predstaviti.

• Novo stran shranimo.

Torej, če smo pravilno shranili stran, se nam mora, če kliknemo na nadpovezavo v kazalu, v

desnem delu - okvirju odpreti nova stran, na katero smo naredili nadpovezavo.


Stran 13

5.2. Izdelava nadpovezav na obstoječe strani

Če želimo narediti nadpovezavo na obstoječo stran, si moramo najprej izbrati besedo ali

objekt, ki bo predstavljal nadpovezavo na obstoječo stran.

• Iz menija Insert kliknimo izbiro Hyperlink (ali desni klik in Hyperlink). Odpre se

pogovorno okno Insert Hyperlink.

• V pogovornem oknu Create Hyperlink izberemo v okvirju s kazalom vsebine ime

datoteke, na katero delamo nadpovezavo.

• Dvakrat kliknemo datoteko, da naredimo nadpovezavo do nje.

• Postopek ponovimo za vse ostale nadpovezave.

5.3. E-mail nadpovezava

Če želimo, da bodo obiskovalci naše strani čim lažje vzpostavili stik z nami, je najprimernejše

narediti nadpovezavo na naš elektronski naslov. Takšna nadpovezava se naredi tako, da:

• na svoji spletni strani izberemo besedo, ki bo predstavljala nadpovezavo na e-mail.

• Iz menija Insert (oz. uporabo desnega klika) kliknemo izbiro Hyperlink. Odpre se

pogovorno okno Insert Hyperlink.

• Izberemo E-mail Address in nato v okno vnesemo potrebne podatke, ki jih kasneje

spremenimo tako, da na e-naslovu izvedemo desni klik in ukaz Hyperlink Properties.

Podatke nato popravimo v oknu Edit Hyperlink.

• Ko zaključimo z naslovom, shranimo spremembe, beseda, ki smo jo izbrali za

nadpovezavo, pa postane drugače obarvana in podčrtana.

Elektronski naslov lahko napišemo tudi kot običajen tekst, saj ga bo program Front Page (kot

tudi drugi Microsoft Office programi) prepoznal in izdelal v enaki obliki, kot po opisanem

postopku.


Stran 14

5.4. Izdelava nadpovezave na zaznamek

Z zaznamkom (Bookmark) označimo mesto, na katerega lahko nato naredimo nadpovezavo.

Če imamo zelo dolgo stran, je zelo neugodno da moramo dolgo potovati na začetek strani. Da

bi se temu dolgočasnemu potovanju navzgor izognili, uporabimo zaznamek (Bookmark), na

dnu strani pa si izberemo besedo, ki bo predstavljala nadpovezavo na vrh naše strani.

• Najprej moramo zaznamovati mesto, zato kliknemo tja, kamor nas bo nadpovezava

pripeljala – npr. na začetek besedila odprte strani.

• Iz menija Insert izberemo Bookmark in odpre se nam pogovorno okno, kamor

vpišemo ime zaznamka in kliknemo OK.

• Na mestu, kjer smo prej kliknili, se sedaj prikaže modra zastavica.

• Ko smo zaznamek naredili, moramo narediti še nadpovezavo nanj. Na dnu naše

spletne strani napišemo besedo, ki bo naša nadpovezava na zaznamek (v našem

primeru Na vrh strani). Omenjeno besedo izberemo in kliknemo gumb za

nadpovezave.


Stran 15

• S klikom na gumb Bookmark dobimo okno, v katerem izberemo naš zaznamek in

kliknemo OK.

• Izbrano besedo, ki je naša nadpovezava na zaznamek, program podčrta.

• Vse spremembe shranimo in v pogledu Preview preverimo delovenje povezav.

6. Izdelava spleta brez pomoči čarovnika

6.1. Določitev lokacije in odpiranje spletnih strani

Spletu najprej določimo ime mape, v katero bomo shranjevali vse njegove elemente, ter

lokacijo te mape.

• Poženimo orodje FrontPage 2003 (kliknite Start, Programi, Microsoft Office…)

• Če FrontPage odpre strani, ki jih jo nekdo že izdeloval, jih zapremo z ukazoma File in

Close Site. Naslov odprtih spletnih strani se prikaže zgoraj v modri naslovni vrstici

FrontPage-a.

• V meniju File izberemo New, v podoknu opravil na desni strani pa kliknemo na

povezavo More Web site templates. Odprlo se je okno Web Site Templates, na kartici

General izberite One Page Web Site.

• V desnem delu okna Web Site Template vpišemo v okvirček lokacijo vaše spletnih

strani naslov oz. lokacijo določimo po kliku na gumb Browse.

• V meniju View izberemo pogled Navigation, in nato še pogled Folder List, ki se

prikaže na levem delu okna (če je kateri od omenjenih pogledov že vključen, ga ni

treba klikniti v meniju, ker ga bomo s tem zaprli).


Stran 16

V oknu Web Site, v pogledu Navigation bomo zgradili strukturo strani (glavna stran in

podstrani), kot jo vidimo na sliki.

6.2. Struktura spletnih strani

• V oknu Web Site naredimo desni klik, v priročnem meniju izberite ukaz New in nato

še Top Page. S tem dobimo novo prazno stran, ki se bo nahajala na vrhu strukture

vašega spleta (Home Page). Če ta stran že obstaja, delo začnemo na drugem koraku.

• Na ikono strani Home Page naredimo desni klik, v meniju izberite New in nato še

Page. S tem smo odprli novo stran, ki je podrejena glavni (index) strani.

• Podobno odpremo še ostale strani.

• V strukturi naredimo desni klik na stran Home page, v meniju izberemo Rename in jo

preimenujemo, po istem postopku pa preimenujemo še druge strani.

6.2.1. Struktura strani v oknu Folder List

V primeru, da se v oknu Folder List po izdanem ukazu Refresh (ali F5) katera od strani ni

preimenovala, jo lahko sami preimenujete enako kot v Raziskovalcu, torej desni klik na ime

strani v oknu Folder List, v meniju izberete ukaz Rename, vpišete pravo ime s piko in

podaljškom htm ter kliknete izven imena za potrditev vpisa. Ime strani mora imeti podaljšek

htm, sicer stran ne bo delovala. Pri tem seveda pazimo, da ne prekinemo narejene povezave.

6.2.2. Izdelava uvodne strani

Če stran začnemo izdelovat na prazni površini, je posamezne elemente strani najbolj

enostavno razporediti s pomočjo tabele, kateri naredimo črte »nevidne«.


Stran 17

• V meniju Table izberemo ukaz Insert in nato Table. V oknu Insert Table nastavimo

število vrstic in stolpcev (npr. na 2) in Border Size na 0 (črta tabele ne bo vidna).

• Meje tabele ustrezno premaknemo, nekatere celice lahko spojimo z ukazom Merge

Cells ali razdelimo z ukazom Split Cells.

Pri nadaljnjem delu s tabelo nam bo pomagala orodna vrstica Tables.


Stran 18

6.2.3. Vstavljanje naslova strani

Naslov vstavimo z ukazom Insert Banner. S tem ukazom pravzaprav na tem mestu izpišemo

besedilo, s kateri smo poimenovali zavihan list, ki predstavlja to stran v pogledu Navigation.

Napis moramo še oblikovati (velikost, oblika pisave, poravnava…)

6.2.4. Vstavljanje usmerjevalnega pasu - gumbov za povezavo

V vrstico pod naslovom bomo vstavili tri gumbe za odpiranje podstrani. V meniju Insert

kliknimo na Navigation ali Web Component, nato pa v levem okvirju izberemo Link bars, v

desnem pa Bar based on navigation structure; kliknite na gumb Next in v oknu izbermo

primerno obliko gumbov; izbor potrdite z gumbom Finish.

V kolikor z usmerjevalnim pasom nismo zadovoljni, na njem naredimo desni klik in

izvedemo ukaz Link Bar Properties. Odprlo se bo okno Link Bar Properties, v katerem

izberemo Child level in Parent page, lahko kliknemo na kartico Style ter izberemo izbor

Horizontal….

6.2.5. Ozadje

Če nimamo uporabljenega že v naprej pripravljenega ozadja - teme, spremenimo ozadje naši

spletni strani na naslednji način:

• Iz menija Format izberemo Background (ozadje).

• Odpre se pogovorno okno Page Properties (Lastnosti strani).


Stran 19

• Kliknemo zavihek Formating. Za ozadje si lahko izberemo :

o slikovno datoteko (Background Picture)

o barvo s seznama (Colors / Background)

Določimo barve nadpovezav (hyperlink), obiskanih nadpovezav (visited hyperlink) in

trenutno delujočih nadpovezav (active hyperlink).

• Če se odločimo za slikovno datoteko kot ozadje, jo moramo poiskati. To storimo tako,

da kliknemo na gumb Browse (preglej) še v istem pogovornem oknu Page Properties.

• Odpre se nam novo pogovorno okno Select Background Picture (izberi sliko za

ozadje). Tu izberemo ustrezno datoteko.

Spletno stran lahko opremimo tudi z zvokom, katerega vstavimo na kartici General.

Lokacijo zvočne datoteke določimo v rubriki Background Sound.

V FrontPagu pa imamo že izdelane grafične oblike (Theme), kjer ni izdelano samo ozadje,

ampak so določene tudi druge oblike grafičnih elementov, besedila, barvne kompozicije…


Stran 20

Do Theme pridemo v meniju Format. Pojavijo se nam ob desnem robu okna, kjer lahko

enostavno eno izberemo ali pa jo nekoliko predelamo, preden jo uporabimo. To naredimo z

desnim klikom na ustrezno grafični obliki in ukazom Customize.

V oknu Customize Theme lahko dodamo še dodatno pisanost s klikom v potrditveni

kvadratek Vivid color, spremenimo barvne kombinacije

(Colors), grafične nastavitve (Graphichs) in oblike pisav

(Text). S tem smo izdelali novo grafično obliko, ki jo lahko

shranimo s klikom na Save As….

Temo lahko uporabimo za izbrano stran (Apply to selected

page(s) ali cel splet (Apply as default theme).

6.2.6. Vstavljanje in nameščanje slik, besedila…

Z novo tabelo oz. delitvijo celic lahko razdelimo stran na dodatne celice, ki nam omogočijo

precizno postavljanje slik ali drugih predmetov ob besedilo.

Postavimo se na mesto vnosa pod usmerjevalni pas (pod črtkano črto) in v to celico tabele

vstavimo novo tabelo (Table/Insert dimenzije 2x2; Border Size nastavmo na 0, da bo tabela

brez okvirja) ali pa celico razdelimo z ukazom Split Cells. V meniju View kliknimo na

Toolbars in odpremo orodno vrstico Tables in s pomočjo gumba na orodni vrstici Table

določimo poravnavo na vrh celice (pri majhni višini celice se učinka poravnave ne vidi).

Sliko vstavimo po lastni izbiri iz Clip Organizerja v meniju Insert izberemo Picture in nato

Clip Art, zatem pa na desnem robu okna poiščemo izrezek in ga s klikom nanj vključimo na

izbrano mesto.

Poljubno sliko lahko vključimo iz drugih dokumentov ali Interneta z desnim klikom na sliki

in ukazom Kopiraj oz. Copy, nato naredimo desni klik v celici tabele in vstavimo sliko z

ukazom Paste. Sliko lahko pomanjšmo, povečamo, lahko jo pa tudi obrežemo s pomočjo

orodne vrstice Pictures (meni View /Toolbars).


Stran 21

6.2.7. Vstavljanje okvirja za pošiljanje sporočil

Izdelali bomo okvir, v katerega bodo obiskovalci neše spletne strani lahko vpisovali sporočila

in mnenja, ki se bodo zapisovala v datoteko form_results.csv v mapi _private na spletnem

strežniku. Sporočilo, ki je vpisano v okvirček, se pošlje v datoteko s klikom na gumb Pošlji,

če se pa pošiljatelj premisli, pa lahko prekliče pošiljanje s klikom na gumb Izniči. V sledeči

vaji bomo zgradili tak okvir s pripadajočima gumboma.

• Postavimo mesto vnosa v desno spodnjo celico tabele in v meniju Insert izberite

Form in nato Text Area; pritisnemo Shift+Enter, da se bo vrstica prelomila in se

bosta gumba pomaknila pod okvir.

• Naredimo desni klik v okvir za besedilo in v meniju izberemo Form Field Properties.

Ureditev lastnosti Okvirja za pošiljanje besedil

• V polje Width in Characters vpišite 40, kar pomeni da bo v okvirju v eni vrstici lahko

40 znakov, v polje Number of lines pa vpišite 5, kar pomeni, da bo v okvirju naenkrat

vidnih 5 vrstic.

• Kliknite na gumb Validate in v okvirčku Data type izberite Text; potrdite z OK.

• Na gumbih boste poslovenili napise › naredite desni klik na gumb Submit in izberite

Form Field Properties; v okvirju Value/label namesto Submit vpišite Pošlji.

• Lahko spremenite tudi obliko in velikost pisave z gumbom Style/Format/Font in

izberete pisavo na primer Arial 10pt.

• Podobno naredite z drugim gumbom; napis Reset zamenjajte z Izniči.

6.2.8. Vstavljanje števca obiskov in datuma spremembe

N strani bomo vstavili še števec obiskov in datum zadnje spremembe spletnih strani. Oba

podatka sta zanimiva za obiskovalce, zlasti pomemben je datum zadnje spremembe spletnih

strani, saj obiskovalec takoj vidi ali se strani dopolnjujejo in so tako zanj zanimive ter ga bodo

pritegnile k ogledu ali pa ga bo več mesecev ali celo več let star datum odvrnil od ogleda.

• Postavimo se na dno strani in v meniju Insert izberemo Web component, v oknu v

levem okvirju izberemo Hit Counter, v desnem pa izberemo obliko števca in potrdimo

z gumbom Finish.

• V naslednjem oknu Hit Counter Properties potrdimo izbor s kljukico, da se bo števec

postavil na nič in pa dolžino števca npr. 5 mest in potrdimo z OK.

• Vstavljenega števca še ne bosmo videli, ker bo viden šele, ko bosmo stran pogledali z

brskalnikom.

• Postavimo mesto vnosa pod števec in v meniju Insert izberemo Date and Time, v

oknu potrdimo Date this page was last edited izberemo Date format in potrdimo z

OK.

•


Stran 22

6.3. Shranjevanje strani

Pri prvem shranjevanju strani nas bo orodje vprašalo, kam naj shrani slike. Izbrali bomo

pripravljeno mapo images.

Kliknimo na gumb za shranjevanje strani, odprlo se bo okno za shranjevanje slik, in če ni

izbrana mapa images, kliknemo na gumb Change Folder, izberemo images in potrdimo z

OK.

6.4. Preizkus delovanja spleta

Popoln izgled in delovanje strani vidimo lahko, če jo pogledamo z brskalnikom. Brskalnik

lahko poženemo kar iz FrontPagea.

V meniju File izberite Preview/Browser/Microsoft Internet Explorer ali pa kliknemo v

orodni vrstici Standard na osmi gumb (Preview in Microsoft Internet Explorer).

V okvir za pošiljanje sporočil vpišimo neko sporočilo in kliknemo na gumb Izniči, da

preverimo brisanje, nato ponovno napišemo sporočilo in ga pošljemo z gumbom Pošlji.

Vpisano sporočilo lahko pogledate z Beležnico › v FrontPageu, v levem podoknu Folder List

odprite mapo _private, nato pa naredite desni klik na datoteko form_results.csv, izberite Open

With in še Notepad; v beležnici vidimo poleg sporočila tudi ime okvirja z besedilom in

gumbov.

6.5. Interaktivni gumbi

Interaktivne gumbe bomo vstavili na sledeč način v meniju Insert izberemo Interactive

Button, v okvirju Buttons preglejmo oblike gumbov in enega izberemo.


Stran 23

Na kartici Button sta spodaj dva okvirja, Text in Link. V okvir Text vpišemo besedilo, ki bo

na gumbu, v okvir Link pa vpišite naslov spletne strani, ki jo bomo poklicali s klikom na

gumb.

Na kartici Font lahko spremenimo pisavo izberemo, na kartici Image širino in višino gumba.

Izgotovljen gumb lahko kopiramo na ostala mesta ter jim spremenimo besedilo na gumbu in

hiperpovezavo (naredimo desni klik na gumb, v meniju izbermo Copy; prilepimo kopiran

gumb z desnim klikom in izborom ukaza Paste, nato na novem gumbu z ukazom Button

Properties spremenimo tekst in povezavo).

6.5.1. Usmerjevalni pas

1. Odprite stran Spletne strani, ji dodajte usmerjevalni pas (Format | Shared borders) zgoraj

(Top), potrjena naj bo izbira Current page, izberite ji ozadje (Format | Theme); pod

usmerjevalni pas vpišite, oblikujte in poravnajte naslov Spletne strani.

2. Nekje na strani naredite desni klik, v meniju izberite Page Properties, na kartici Advances

postavite vrednost Left Margin na 40 pik (odmik besedila od levega roba).

3. Pod naslov vstavite tabelo, ki naj ima 1 vrstico in 5 stolpcev oziroma celic.

4. Pod tabelo boste vstavili wordov dokument Namestitev.doc › v levem podoknu Folder List

(če je podokno zaprto, ga odprite v meniju View) odprite mapo seminarske, dvokliknite na

Namestitev.doc in počakajte, da se dokument odpre v Wordu.

6.5.2. Prikaz galerije fotografij

Na svojo spletno stran lahko dodamo zbirko fotografij ali drugih slik v obliki vizualnega

kataloga. Galerija fotografij je zelo uporabna za obiskovalce strani, ker jim omogoča, da hitro

preletijo zbirko slik, tako da pregledajo manjše sličice. Ko si obiskovalci v oknu brskalnika

ogledujejo galerijo fotografij, lahko izberejo, katere slike želijo videti, tako da kliknejo

sličico. Slika, ki jo sličica predstavlja, se bo prikazala v polni velikosti.

Z uporabo ukaza Web Component (meni Insert) lahko v programu FrontPage 2003 po potrebi

ustvarite galerijo fotografij, ki je sestavljena iz sličic s podnapisi in opisi. Privzeta velikost

sličic je 100 pik krat 100 pik (kvadrat, velikosti malo več kot 2,5 cm krat 2,5 cm).

Postavitve galerije fotografij V programu FrontPage 2003 so na voljo štiri različne vrste postavitev: vodoravna

(Horizontal), navpična (Vertical), sestavljena (Montage) in diaprojekcija (Slide Show).

Če želite, da so slike razvrščene v preprosti postavitvi, kot v

albumu, uporabite vodoravno postavitev (Horizontal

layout).


Stran 24

Navpična postavitev (Vertical layout) prav tako predstavi

slike v preprosti postavitvi, kot v albumu, le da si

uporabniki ogledujejo slike od zgoraj navzdol.

Z uporabo sestavljene postavitve (Montage layout)

predstavite svoje slike kot kolaž.

Z uporabo diaprojekcije (Slide Show layout) lahko ustvarite

katalog menjajočih se slik. Ko izberete sličico, se slika v

polni velikosti pojavi pod vrstico.

6.6. Vstavljanje video posnetkov

Z video posnetki lahko prikažemo obiskovalcu kratek film o kakšnem laboratorijskem

poiskusu, postopku v medicini, košarkaške igre ali dodamo kratko risanko. Tudi pri dodajanju

video datotek se moramo zavedati, da morajo imeti obiskovalci za ogled videa potrebno

opremo.

Če kljub vsemu želite vključiti video posnetek v spletno stran, vam predlagam, da naredite

naslednje:

• Iz menija Insert izberemo Picture (slika) in nato Video...

• Odpre se pogovorno okno Video, kjer naj bi izbrali ustrezno datoteko.

6.7. Izdelovanje strani z okvirji

Stran z okvirji uporabimo takrat, kadar hočemo prikazati na ekranu več različnih podatkov.

• Iz menija File izberemo New. V pogovornem na desnem robu izberemo More Page

Templates in v kliknemo na zavihek Frames Pages.

• Sedaj izberemo ustrezno ikono: ikone predstavljajo različne vrste okvirjev.

• Če izberite ikono Banner and Contents in nato kliknemo OK, program ProntPage je

razdelil novo stran na tri dele.

• Sedaj izberemo datoteko strani, ki naj se prikaže v posameznem okvirju ob prvem

prikazu.


Stran 25

• Za vsak okvir lahko kliknemo Set Initial Page in izberemo že obstoječo stran.

Če pa kliknemo gumb New Page, pa izdelamo novo stran.

Levi okvir prikazuje vedno isto stran, in sicer vsebino spleta. Prikaz vsebine vsebuje

nadpovezave na druge strani. Če želimo levi okvir pripraviti za kazalo vsebine moramo

narediti naslednje:


Stran 26

• Izberemo levi okvir - obdan je z modro črto in kliknemo na New Page.

• Kliknemo na novo stran in vnesemo tekst, ki bo naše kazalo

6.7.1. Shranimo spletno stran

• Izberemo novo stran in izberemo izbiro Save As iz menija File.

• Izberemo ime datoteke in kliknemo gumb OK.

• Kliknemo gumb Change. Prikaže se pogovorno okno Set Page Title. Tu napišemo

naslov, ki ga bodo naši obiskovalci strani videli v naslovni vrstici brskalnika.

• Spet se prikaže pogovorno okno Save As in zahteva da shranimo stran z okvirji. Za

celoten okvir izberemo novo ime in potrdimo z OK.

• Kliknemo gumb Save.


Stran 27

6.8. Vrinjeni okvirji

V spletno stran lahko vstavimo okvir (Inline Frame), ki nam bo prikazoval vsebino druge

spletne strani, vsebino neke druge datoteka ali pa strani iz Intreneta. To storimo z izvedbo

ukaza Insert/ Inline Frame. Po izvedbi ukaza s klikom na Set Initial Page naredimo ustrezno

povezavo ali pa z New Page izdelamo novo stran, ki se bo prikazovala v tem oknu.

6.9. Kako vstaviti tabelo na spletno stran

Včasih nam podatki, urejeni v tabeli veliko hitreje povedo kakšna so razmerja med njimi.

• Na svoji strani kliknimo na mesto, kjer želimo imeti tabelo

• V orodni vrstici kliknemo na gumb za vstavljanje tabele.

Program nam prikaže mrežo vrstic in stolpcev. Z miško kliknemo v zgornjo levo celico in

potegnemo navzdol ter desno, dokler ne potemnimo toliko celic kot želimo. Ko spustimo

miško, se tabela vstavi na našo stran.

Podatke, katere želimo imeti v tabeli, enostavno vnesemo. Med posameznimi celicami se

premikamo z miško ali s tipko TAB ali puščicami.


Stran 28

6.9.1. Kako oblikovati tabelo

Tabelo, ki smo jo vstavili in zapolnili s podatki, bi radi še malo preoblikovali. Radi bi dodali

še en stolpec ali vrstico, mogoče obarvali mrežo, ali pa samo poravnali besedilo znotraj celic.

Torej, če nam je zmanjkal en stolpec, bomo naredili naslednje, da ga vrinemo:

• Označimo stolpec, pred katerim želimo da se vrine novi stolpec.

• Iz menija Table izberemo ukaz Insert in potem Rows or Columns.

• Odpre se pogovorno okno Insert Rows or Columns, kjer lahko izbiramo ali naj se

vrine stolpec ali vrstica. Tu določimo tudi število stolpcev ali vrstic, ki jih želimo

vriniti v našo tabelo. Poleg tega pa moramo določiti prostor, kamor se bo stolpec ali

vrstica vrinil. Vrinemo jih lahko nad ali pod izbranimi celicami.

Z desnim klikom na izbranem mestu v tabeli pridemo do

priročnega menija, kjer bomo dobili večino pomembnejših ukazov.


Stran 29

Eden takih je tudi Table Properties, ki nam omogoča spremeniti obliko tabele. Pogovorno

okno Table properties izgleda tako:

V tem oknu določamo poravnavo besedila (alignment), debelino in barvo mreže tabele

(borders), barvo celic tabele (background color), velikost celic in tabele. Če želimo, da se

mreže tabele ne vidi, določimo vrednost debeline mreže 0 (border size 0).

Pri oblikovanju tabele lahko uporabljamo tudi orodno vrstico Tables.

Besedilo znotraj tabele oblikujemo tako kot navadno besedilo.

6.10. Dodajmo spletu sliko

Našo spletno stran želimo narediti privlačnejšo, zato bomo vstavili nekaj slik ali mogoče

animacijo. Slike, ki so primerne za vstavljanje najdemo lahko na internetu, v zbirki sličic (

Clip Art Gallery) ali pa naredimo digitalno fotografijo in potem fotografijo vstavimo na

spletno stran.


Stran 30

Slike vstavimo iz že pripravljene zbirke sličic Clip Art Gallery z

ukazom Insert/Picture (slika) in nato izberemo Clip Art. Na

desnem delu okna poiščemo ustrezno sliko, nanjo kliknemo in ta se

vključi na izbrano mesto.

Druga možnost vstavljanja slik je vstavljanje slik iz datotek. Iz

menija Insert izberemo Picture (slika) in nato From File (iz

datoteke). Odpre se nam pogovorno okno Picture, v katerem

izberemo grafično datoteko, katero želimo vstaviti.

6.11. Dodajanje posebnih učinkov

6.11.1. Izdelava vročih mest

Če želimo, da le del slike ali drugega grafičnega elementa predstavlja nadpovezavo,

uporabimo vroča mesta. Ta del slike, na katerega je narejena nadpovezava, se imenuje vroče

mesto. Obiskovalec takoj ne vidi vročega mesta, ko pa z miško potuje po sliki, se nad vročim

mestom oblika miške spremeni v belo roko z iztegnjenim kazalcem. To je znak za, da je na

tem mestu narejena nadpovezava. Če imamo več vročih mest na eni sliki, to poimenujemo

slikovna karta.

Gumb za izdelavo vročega mesta je v orodni vrstici Pictures (slike). Izberemo sliko in

kliknemo na gumb za vroče mesto (Hotspot).


Stran 31

Postavimo kazalec na izbrano mesto na sliki in ga povlečemo, da nastane pravokotnik, elipsa

ali pa po kliku na gumb Polygonal Hotspot področje na sliki obdamo z nepravilnim likom.

Ko spustimo gumb (pri Polygonal Hotspot pa po dvojnem kliku) se nam odpre pogovorno

okno Insert Hyperlink (naredimo nadpovezavo), kakor kaže naslednja slika.

6.12. Izdelava potujočih napisov

Potujoči napisi so premikajoče se besedilo, ki naj bi pritegnilo obiskovalčevo pozornost.

Takšni napisi so največkrat uporabljeni v propagandne namene, da opozarjajo na ugodne

nakupe, cene in podobno.

• Iz menija Insert izberemo Web Component in nato Marquee ( potujoči napis).

• Odpre se pogovorno okno Marquee Properties (Lastnosti potujočega napisa).

• V polje Text (besedilo) vpišimo besedilo, ki naj bi bilo potujoči napis.

• Določamo še hitrost in način potovanja napisa, velikost napisa, z gumbom Style pa

tudi obliko.

• Z gumbom OK potrdimo nastavitve, kliknemo na jeziček Preview in si ogledamo

učinek.


Stran 32

• Če nam hitrost ali način potujočega napisa ni všeč, kliknemo na

desni gumb miške, da se nam odpre priročni meni. Iz njega

izberemo Marquee Properties in tam spremenimo lastnosti

potujočega napisa.

Drugi način za vstavljanje zvočnih učinkov je še bolj enostaven, saj ga

poznamo že iz postopka vstavljanja grafike v spletno stran. Torej,

postopek je enak, le da v tem primeru iz Clip Art izbiramo Sounds -

zvočne datoteke.

6.12.1. Prehodi med stranmi

Z ukazom Format/Page Transition vsaki strani določimo način

(učinek), kako se bo le ta prikazala.

V oknu, ki se nam prikaže, nastavimo trenutek in čas izvedbe ter obliko učinka.

7. Preglejmo nadpovezave

Pregledati moramo ali nadpovezave vodijo na prava mesta. To lahko storimo v dveh pogledih

programa in sicer v pogledu Hyperlinks in pogledu Reports.

Torej, poglejmo kako izgledajo povezave znotraj našega spleta v pogledu Hyperlinks.

Kliknimo na ikono Hyperlinks v vrstici Views. Na ekranu bomo dobili podobno sliko kot je

spodaj, seveda je odvisna od sestave spletnih strani in nadpovezav med njimi.

• V levem oknu smo dobili seznam vseh strani, ki sestavljajo naš splet.

• Na desni strani pa je diagram z domačo stranjo. Puščice kažejo, kako so strani

povezane.


Stran 33

• Diagram lahko zmanjšamo, če kliknemo na znak -, ali pa ga razširimo z znakom +.

Naše nadpovezave pa lahko preverimo še v pogledu Reports. V tem pogledu preverjamo, ali

nadpovezave delujejo pravilno ali ne.

Če nam pogled na takšno poročilo ne zadošča in bi radi zares preverili pravilnost nadpovezav,

potem..

• Kliknimo na gumb Verify Hyperlinks, ki je v orodni vrstici.

• Kliknimo Start gumb in FrontPage preveri vse nadpovezave.

• Če imamo v stolpcu Status znak za Broken Links (nadpovezave, ki ne delujejo),

moramo nadpovezavo preveriti in urediti.

• Z desno tipko miške kliknemo na nadpovezavo, ki ne deluje. Iz priročnega menija

izberemo Edit Hyperlink.

• Odpre se pogovorno okno Edit Hyperlink, V polje Replace hyperlink with (zamenjaj

nadpovezavo z..), vpišemo ime datoteke, kamor naj bi nadpovezava peljala.

• Če kliknemo na gumb Edit Page (urejanje strani), lahko vidimo želeno stran in tako

preverimo ali je prava ali ne.

• V tem pogovornem oknu imate možnost določanja, ali naj bo povezava zamenjana na

vseh straneh ( Change in all pages) ali na samo izbranih ( Change in selected pages ).

7.1. Vaja

Naredimo spletno mesto in znotraj njega spletne strani, ki bodo vsebovale naslednje elemente:

• spletno mesto mora imeti najmanj 15 spletnih strani, od tega mora biti vsaj 5 strani z

okvirji,

• strani naj bodo vsaj v treh nivojih,

• vključeno mora biti najmanj 8 slik,

• uporabi vsaj 3 vrinjene okvirje (Inline Frame),

• vključeni naj bosta vsaj 2 animaciji in 2 zvočna posnetka,

• naredi nadpovezave na drugo spletno stran, na internet, na začetek strani, na začetno

(index stran) stra, na e-mail naslov,

• naredi nadpovezavo na sliko,

• izdelaj vsaj 3 vroča mesta,

• vstavi 1 tabelo, dimenzije 4 X 5 ali več,

• uporabi gumbe, povezave na zaznamke (bookmark).

Documents

FrontPage 2003 - Arneskurank/inf/01_FP_FrontPage2003.pdf · 2007. 5. 13. · Ekonomska šola Kranj FrontPage 2003 Stran 1 1. Osnovni pojmi FrontPage je eno od najbolj priljubljenih