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:
Ekonomska šola Kranj FrontPage 2003
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
Ekonomska šola Kranj FrontPage 2003
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.
Ekonomska šola Kranj FrontPage 2003
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.
Ekonomska šola Kranj FrontPage 2003
Stran 5
• V polje Products vnesemo število izdelkov in v Services število storitev, ki jih bomo
opisali. Kliknemo Next.
Ekonomska šola Kranj FrontPage 2003
Stran 6
• Odkljukamo polje Information request form. Kliknemo Next.
• Določimo vsebino obrazca, v katerega bodo obiskovalci našega spleta vpisovali
predloge, pripombe…
Ekonomska šola Kranj FrontPage 2003
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.
Ekonomska šola Kranj FrontPage 2003
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.
Ekonomska šola Kranj FrontPage 2003
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.
Ekonomska šola Kranj FrontPage 2003
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.
Ekonomska šola Kranj FrontPage 2003
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).
Ekonomska šola Kranj FrontPage 2003
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.
Ekonomska šola Kranj FrontPage 2003
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.
Ekonomska šola Kranj FrontPage 2003
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.
Ekonomska šola Kranj FrontPage 2003
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).
Ekonomska šola Kranj FrontPage 2003
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«.
Ekonomska šola Kranj FrontPage 2003
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.
Ekonomska šola Kranj FrontPage 2003
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).
Ekonomska šola Kranj FrontPage 2003
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…
Ekonomska šola Kranj FrontPage 2003
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).
Ekonomska šola Kranj FrontPage 2003
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.
•
Ekonomska šola Kranj FrontPage 2003
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.
Ekonomska šola Kranj FrontPage 2003
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).
Ekonomska šola Kranj FrontPage 2003
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.
Ekonomska šola Kranj FrontPage 2003
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:
Ekonomska šola Kranj FrontPage 2003
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.
Ekonomska šola Kranj FrontPage 2003
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.
Ekonomska šola Kranj FrontPage 2003
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.
Ekonomska šola Kranj FrontPage 2003
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.
Ekonomska šola Kranj FrontPage 2003
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).
Ekonomska šola Kranj FrontPage 2003
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.
Ekonomska šola Kranj FrontPage 2003
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.
Ekonomska šola Kranj FrontPage 2003
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).
Top Related