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. Splet in spletno mesto... 1 1.2. O izdelavi spleta... 1 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... 11 4.1. Oblikovanje s slogi... 11 4.2. Sprememba pisave... 11 4.3. Sprememba velikosti pisave... 11 5. Dodajmo nadpovezave v našo spletno stran... 12 5.1. Nadpovezava na novo stran... 13 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... 16 6.1. Določitev lokacije in odpiranje spletnih strani... 16 6.2. Struktura spletnih strani... 17 6.2.1. Struktura strani v oknu Folder List... 17 6.2.2. Izdelava uvodne strani... 17 6.2.3. Vstavljanje naslova strani... 19 6.2.4. Vstavljanje usmerjevalnega pasu - gumbov za povezavo... 19 6.2.5. Ozadje... 19 6.2.6. Vstavljanje in nameščanje slik, besedila... 21 6.2.7. Vstavljanje okvirja za pošiljanje sporočil... 22 6.2.8. Vstavljanje števca obiskov in datuma spremembe... 22 6.3. Shranjevanje strani... 23 6.4. Preizkus delovanja spleta... 23 6.5. Interaktivni gumbi... 23 6.5.1. Usmerjevalni pas... 24 6.5.2. Prikaz galerije fotografij... 24 6.6. Vstavljanje video posnetkov... 25 6.7. Izdelovanje strani z okvirji... 25 6.7.1. Shranimo spletno stran... 27 6.8. Vrinjeni okvirji... 28 6.9. Kako vstaviti tabelo na spletno stran... 28 6.9.1. Kako oblikovati tabelo... 29 6.10. Dodajmo spletu sliko... 30 6.11. Dodajanje posebnih učinkov... 31 6.11.1. Izdelava vročih mest... 31 6.11.2. Izdelava potujočih napisov... 32 6.11.3. Vstavljanje zvočnih posnetkov... 33 6.11.4. Prehodi med stranmi... 33 7. Preglejmo nadpovezave... 33 7.1. Vaja... 34
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 ). 1.1. Splet in spletno mesto SPLET - web, je zbirka med seboj povezanih strani. Ko ga shranimo v spletni strežnik, postane to SPLETNO MESTO. 1.2. 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 Ko zaženemo program FrontPage, vidimo na zaslonu naslednjo sliko: Stran 1
V spodnjem levem delu okna imamo tri jezičke: DESIGN- v tem pogledu pišemo besedilo spletne strani, ga oblikujemo, vstavljamo slike, tabele, vnosne obrazce,.. PREVIEW- vnaprejšnji pogled, tu vidimo svojo stran takšno kakršna bo videti s spletnim brskalnikom. CODE- svojo spletno stran vidimo zapisano s kodo HTML jezika. 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 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 2
Pogled Navigation, v katerem so strani predstavljene kot»listki z zavihkom«(v nadaljevanju listki): 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šemo v okvirček lokacijo naše spletne strani naslov oz. lokacijo določimo po kliku na gumb Browse. Kliknimo ikono Corporate Presence Wizard, ki je namenjena predstavitvi podjetij. Čarovnik nam sam predlaga lokacijo našega spleta ( c:\moji dokumenti\my web\). Pri tem je treba vedeti, da bo vse strani spleta v tem primeru shranil v mapo Myweb. Lahko pa naredimo novo mapo, npr. Moj prvi splet. Stran 3
Odpre se nam prvo pogovorno okno čarovnika. S klikom v polje pritrdimo ali zanikamo posamezne zahteve. V tem pogovornem oknu izbiramo, katere glavne strani želimo imeti v našem spletnem mestu. Ko izberemo ustrezne strani, kliknemo Next. Stran 4
V naslednjem pogovornem oknu izbiramo, ali hočemo imeti predstavitev podjetja, uvod in ostale informacije. Ko se odločimo, kliknemo Next(naprej). V polje Products vnesemo število izdelkov in v Services število storitev, ki jih bomo opisali. Kliknemo Next. Stran 5
Določimo vsebino strani, ki bodo predstavljale naše storitve in kliknemo Next. Določimo vsebino obrazca, v katerega bodo obiskovalci našega spleta vpisovali predloge, pripombe Stran 6
V spodnjem oknu določimo vsebino, ki bo 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 7
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 8
Č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 preklopiti v pogled Navigation. To storimo tako, da izvedemo ukaz View/Navigation oz. kliknemo jeziček 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. Folder List vklopimo/izklopimo z gumbom standardne orodne vrstice Toggle pane. 3.1. Brisanje strani Z miško označimo listek, ki ga hočemo zbrisati in na tipkovnici pritisnemo tipko Delete ali pa na listku izvedemo desni klik in ukaz Delete. 3.2. Dodajanje strani Novo stran dodamo z desnim klikom na listku in ukazom New/page. Tako dobimo novo podrejeno stran (»podstran«) z imenom New page 1. Stran 9
Če pa v menuju File izbereno New /Page, lahko stran izdelamo s pomočjo predlog, ki jih bomo dobili z izbiro More Page Templates, ki jo bomo našli v oknu na desni strani ekrana. Če želimo v navigatorjevo strukturo vključiti že izdelano stran, na nadrejeni strani izvedemo desni klik in izvedemo ukaz Add Existing Page ter izberemo ime datoteke. 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. Stran 10
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. 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 Velikost pisave spremenimo tako, da kliknemo puščico na desni strani seznama velikosti in izberemo ustrezno velikost ali pa gumba za povečevanje oz. zmanjševanje pisave. Stran 11
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). Prikaže se okno za izdelavo nadpovezav Stran 12
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. 5.2. Izdelava nadpovezav na obstoječe strani Za izdelavo nadpovezave na obstoječo stran najprej izbremo 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 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: Stran 13
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. 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. Stran 14
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. 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. Stran 15
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 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 izberemo 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 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/Page 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 ), lahko pa mu določimo obliko tudi ob oblikovanju celotne strani z ukazom Format/Theme. 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 tako, da 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 pa jo 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 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 vstavimo z ukazom Insert/Interactive Button. V okvirju Interactive/Buttons nato pregledamo 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šemo naslov spletne strani, ki jo bomo poklicali s klikom na gumb. Na kartici Font lahko spremenimo pisavo, na kartici Image pa š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 želimo, da so slike razvrščene v preprosti postavitvi, kot v albumu, uporabimo 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) predstavimo svoje slike kot kolaž. Z uporabo diaprojekcije (Slide Show layout) lahko ustvarimo katalog menjajočih se slik. Ko izberemo 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. Posnetek vključimo tako, da 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 ukaz New. Nato v pogovornem oknu na desnem robu izberemo More Page Templates in kliknemo na zavihek Frames Pages. Med ikonami, ki predstavljajo različne vrste okvirjev, izberemo ustrezno. Če izberite ikono Banner and Contents in nato kliknemo OK, program razdelil novo stran na tri dele. Za vsak okvir lahko kliknemo Set Initial Page in izberemo že obstoječo stran, če pa kliknemo gumb New Page, pa izdelamo novo stran (novo datoteko). Stran 25
Levi okvir vedno prikazuje isto vsebino, in sicer vsebino spleta oz. povezave na druge strani. Prikaz vsebine vsebuje nadpovezave na druge strani. Zgornji okvir je namenjen naslovu, desni pa vsebini, katero menjamo s klikanjem na ustrezne povezave iz levega okvirja. Stran 26
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 datoteke 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, s klikom nanjo pa se ta 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, 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.11.2. 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. 6.11.3. Vstavljanje zvočnih posnetkov Zvočne posnetke lahko vstavimo z ukazom Insert/Picture/Video. 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.11.4. 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: v pogledu Hyperlinks in pogledu Reports. Kliknimo na ikono Hyperlinks v vrstici Views. Na ekranu bomo dobili sliko, ki prikazuje povezave strani v spletu in je seveda odvisna od sestave spletnih strani in nadpovezav med njimi. Puščice nam 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), Stran 34
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, 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). Stran 35