Gimnazija u Kuršumliji. Maturski rad iz Računarstva i informatike. МS FrontPage. Kuršumlija, Мај 2011.

Transcription

1 Gimnazija u Kuršumliji Maturski rad iz Računarstva i informatike МS FrontPage Mentor: Milomir Ilić Učenik: Ivona Jovanović Kuršumlija, Мај 2011.

2 Sadržaj Sadržaj Uvod Struktura sajta (web prezentacije) Header (zaglavlje) Content (sadršžaj strane) Footer (podnožje) Banner (baner) Sidebar Backgorund (pozadina) Projektovanje Web prezentacije MS FrontPage Radno okruženje FrontPage-a Pregled menija i osnovnih linija sa alatkama Pokretanje MS FrontPage-a Izrada prezentacije u MS FrontPage-u Osnovna podešavanja Rad sa tabelama Rad sa tekstom Rad sa slikama Web komponente Umetanje novih stranica Snimanje (čuvanje) prezentacije Povezivanje Web stranica Postavljanje Web prezentacije na server Zaključak Literatura

3 1. Uvod Web (www-world wide web) je najznačajniji internet servis. Nastao je 1991 godine u CERN-u. Namenjen je za razmenu multimedijalnih informacija posredstvom sajtova ili web prezentacija. Web prezentacije omogućavaju pristup informacijama na daljinu, trgovinu, bankarstvo, komunikaciju, zabavu, itd. Za izradu web prezentacija postoji veliki broj različitih programa (Java, CSS, Dreamviewer, FrontPage...). MS FrontPage je jedan od najčešće korišćenih programa za izradu web prezentacija od strane osoba koje imaju malo računarsko znanje i koje poznaju samo osnovne elemente web prezentacije. Web prezentacija se sastoji od stranica koje su medjusobno povezane hiperlinkovima. U FrontPage-u stranice su pisane u jeziku za opis dokumenata HTML (Hyper Text Markup Language). HTML je jezik kojim se definiše struktura i sadržaj web dokumenata i pomoću kojega se izrađuju web stranice. Dakle, HTML nije programski niti skriptni jezik, već je on jezik za oblikovanje prikaza web dokumenta koji govori web browseru (internet pregledniku) kako prikazati sadržaje na web stranici slike, tekst, tabele, formulare i ostale multimedijalne dokumente. HTML omogućava web dokumentima međusobno povezivanje putem hipertekstualnih veza tj. linkova. URL (Universal Resource Locator) - adresa koja služi za identifikaciju lokacije dokumenata na Internetu. Reč univerzalno znači da se koristi u različitim vrstama internets servisa kao što su: web stranice, ftp stranice ili

4 2. Struktura sajta (web prezentacije) Sajt (web prezentacija) se sastoji od jedne ili više web stranica. Web stranice se međusobno povezuju hiperlinkovima. Hiperlinkovi si najčešće tekstovi, dugmad, slike ili grafika. Web stranica je elektronski (digitalni) sinonim ili ekvivalent klasičnom papiru, a obično sadrži sledeće elemente: Header (zaglavlje) Navigacija (meni, menu) Content (sadržaj strane) Footer (podnožje strane) Baner (banner) Sidebar Backgorund (pozadina) 2.1. Header (zaglavlje) Header sajta je zaglavlje tj. vrh web stranice. Poželjno je da sadrži logo koji se nalazi uvek na istoj poziciji unutar headera. Takođe, poželjno je da je header uvek na istoj poziciji na web stranicama unutar jednog sajta jer se na taj način pokazuje posetiocima da su stranice koje posećuju deo jedne iste web prezentacije.logotip, odnosno skraćeno logo je spoj grafičkih elemenata, simbola, ilustracija ili ikona koji označava proizvod, uslugu, preduzeće, događaj, osobu, predmet ili ideju. To je karakterističan simbol koji se može sastojati od slova (različitih tipografskih stilova), grafike i drugih kombinacija (dodatak slogana). Oblici, boje, fontovi i ilustracije (slike) se uglavnom razlikuju od ostalih na sličnom tržištu

5 To je deo vizuelnog identiteta kompanije i njegova uloga je stvaranje drugačije, jedinstvene slike na tržištu tj. diferenciranje od ostalih. Prvi cilj logotipa je trenutno prepoznavanje onoga što on označava (proizvod, uslugu, preduzeće, događaj, osobu, predmet ili ideju). Krajnji cilj logotipa je njegov doprinos jačanju brenda Navigacija Navigacija je jedan od najvažnijih elemenata web stranice jer omogućava korisnicima kretanje stranicom i pronalaženje sadržaja. Sadrži linkove (veze) za stranice sajta. Poželjno je da navigacija bude konzistentno prikazana, jednostavna, intuitivna i prikladno nazvana. Pojedini autori navigaciju definišu kao umeće i veštinu organizacije i prezentacije koja se primenjuje na sajtovima ne bi li posetiocima što više olakšala kretanje kroz sadržaj i stranice sajta. Najčešće vrste navigacije su (navigacija je predstavljena zelenom bojom, a header narandžastom): Leva bočna (desna bočna se mnogo ređe pojavljuje) Horizontalna Vertikalna i horizontalna Navigacija se obično nalazi u levoj koloni stranice (sidebar-u) ili pri samom vrhu Content (sadršžaj strane) Content (sadržaj) je svakako najvažniji deo web stranice i zauzima njen najveći deo. Osnova, svrha i smisao postojanja web stranice. Ako se ne može pronaći određeni sadržaj ili je sadržaj nedovoljno interesantan ili relevantan posetilac vrlo brzo odlazi na neku drugu web stranicu. Trebalo bi da sadržaj bude jasno i kvalitetno prezentovan Footer (podnožje) Donji deo web stranice koji sadrži obično dodatne i manje važne sadržaje ili linkove, npr. informacije o privatnosti, autorskim pravima, odricanju od odgovornosti, uslovima korišćenja stranice, izjavi o zaštiti podataka, linkove na glavne celine stranice i sl. U ovom delu web stranice se najčešće nalazi i potpis dizajnera (autora) stranice

6 2.5. Banner (baner) Prostor na sajtu (vizuelno uočljiv) rezervisan najčešće za reklamiranje ili linkovanje (povezivanje) na neki drugi sajt. Grafička slika, animacija ili drugi grafičko - tekstualni objekat koji se upotrebljava kao oglasno sredstvo na web stranicama, newsletterima i slično. Analogno postavljanju reklama u novinama ili na bilbordu, tako i na sajtu postoji mogućnost postavljanja reklame (banera) i reklamiranja svog internet sajta, usluge, firme... Ta usluga se najčešće plaća oglašivaču tj. onome na čijem sajtu je postavljen baner. Takođe, postoji i mogućnost razmene (baner za baner). Namenjen je da privuče što više posetilaca sa sajta na kome je postavljen. Klikom na baner otvara se Vaša internet strana ili neka druga strana koju Vi izaberete i na taj način možete dobiti potencijalne klijente. Baner je najčešće slika (formati JPEG, GIF, PNG), a može biti i multimedijalni sadržaj kao što je flash. Flash baner često sadrži audio ili video animacije kako bi posetiocu sajta na kome je baner postavljen bio zanimljiviji i time povećava mogućnost posete. Svrha banera je da privuče pažnju i mnogi oglašivači pokušavaju da dobiju što više poseta postavljanjem zanimljivih banera na udarnim mestima na stranici. Udarne pozicije su najčešće na vrhu stranice, koja je ujedno i najskuplja. Spuštanjem na dole (scroll - skrolovanje) cena postavljenja banera srazmerno opada Sidebar Bočna kolona sajta (leva ili desna) najčešće sadrži navigaciju (deo sa linkovima na stranice sajta) i banere Backgorund (pozadina) Deo sajta koji se nalazi van tzv. containera (okvira u kome se nalaze header, navigacija, content i footer). Najčešće je to fotografija sastavljena iz jednog ili više delova koji se ponavljaju (seamless pattern - ponavljanje se koristi da bi se sajt brže otvorio - "učitao", tj. da pozadina ne bi bila memorijski velika - "teška"). Pozadina najčešće ne sadrži tekstuane sadržaje

7 3. Projektovanje Web prezentacije Proces izrade prezentacije je potrebno pažljivo planirati kako bi se osigurali odgovarajući kvalitet i brzina izrade prezentacije. Proces projektovanja obuhvata: Definisanje cilja prezentacije, Pretpostavku o posetiocima prezentacije, Izbor modela organizacije sadržaja i izradu šeme prezentacije, Izbor modela navigacije kroz prezentaciju, Definisanje strana prezentacije i njihovog sadžaja, Prikupljanje dokumenata kreiranih drugim računarskim programima i njihovo prebacivanje u HTML, Izradu detaljnog rešenja za izgled i način funkcionisanja strana dokumenata, Vrednovanje dokumenta i njegovo prikazivanje u užem krugu i Postavljanje prezentacije na Web server. 4. MS FrontPage 4.1. Radno okruženje FrontPage-a Linija padajućih menija Linija standardnih alata Linija za formatiranje - 7 -

8 Različiti pogledi na web prezentaciju: - 8 -

9 4.2. Pregled menija i osnovnih linija sa alatkama Neki od najznačajnijih menija i komandi u FrontPage-u su: File - U ovom meniju nalaze se uobičajene naredbe menija File za započinjanje Nove prezentacije ili strane (New), za otvaranje (Open) i zatvaranje datoteke (Close), za otvaranje prezentacije (Open Web) I zatvaranje prezentacije (Close Web), za snimanje datoteke pod istim (Save) ili drugim imenom (Save As), za postavljanje prezentacije na server (Publish Web), za unošenje sa drugih lokacija u prezentaciju (Import), za prethodni pregled prezentacije (Preview in Browser), za podešavanje strane (Page Setup), za prethodni pregled pre štampanja (Print Preview), za štampanje (Print), za poslednje otvaranje datoteke (Recent Files) i prezentacije (Recent Webs) itd. View U ovom meniju nalaze se komande za prikaz strane prezentacije na radnoj površini (Page), za prikaz folderske structure na ekranu (Folders) i za prikaz na radnoj površini: različitih izveštaja o stanju prezentacije (Reports), šeme navigacije (Navigation), veze koje dolaze i izlaze sa strane prezentacije (Hyperlinks) i vođenje beleški (Tasks). Pored toga, u ovom meniju nalazi se i komanda za uključivanje i isključivanje linije sa alatkama Views u kojoj se nalaze alatke za sve navedene komande. Tu je i komanda Folder List, kojom se otvara i zatvara polje na ekranu u kojem se nalaze folderi i datoteke koje pripadaju prezentaciji. Komandom Toolbars, kao i kod svih Windows programa, postavljaju se na ekran ostale linije sa alatkama

10 Insert U ovom meniju nalaze se komande za umetanje prekida (Break), horizontalne linije (Horizontal Line), datuma i vremena (Date and Time), simbola (Symbol), navigacione trake ( Navigation Bar), naslova strane (Page Banner), različitih komponenata (Component), podataka iz bazepodataka (Database), za pravljenje formulara (Form), za korišćenje naprednih dodataka u prezentaciji (Advanced), slika (Picture), datoteka (File), veza unutar strane (Bookmark) i veza na druge strane (Hyperlink). U podmeniju komande Component, između pstalih, nalaze se i komande za umetanje tabela (Office Spreadsheet), i grafikona (Office Chart), za podešavanje naslova stane (Banner Ad Manager), za umetanje brojača poseta strani (Hit Counter), za umetanje pokretnog teksta na strani (Marquee) itd. U podmeniju komande Form nalaze se komande za pravljenje formulara i umetanje elemenata formulara, kao, na primer, kružni prekidači, kvadratni prekidači, različita dugmad itd. Format U ovom meniju, između ostalih, nalaze se i komande za oblikovanje slova (Fonts), paragrafa (Paragraph), liste nabrajanja (Bullets and Numbering), za pravljenje okvira i zasenčenja (Borders and Shading), za pozicioniranje (Position), za određivanje teme prezentacije (Theme), za efekte prelaza strana (Page Transition), za promenu pozadine (Background) i za postavljanje osobina strane (Properties)

11 4.3. Pokretanje MS FrontPage-a Progarm MS FrontPage, kao i svi Windows programi, pokreće se iz menija /PROGRAMS ili klikom na njegovu ikonu. Prilikom pokretanja programa dobija se radni ekran prikazan prikazan na slici 1. U programu može da se pravi nova prezentacija od početka ili da se prerađuje ili dorađuje već postojeća prezentacija. U polju sa leve strane prozora za dijalog ponuđeno je osam mogućnosti za kreiranje Web prezentacije. One Page Web kreira Web prezentaciju koja se sastoji samo od jedne strane. Empty Web kreira praznu Web prezentaciju. Import Web Wizard omogućava preuzimanje bilo koje već postojeće prezentacije sa Web-a ili sa diska korisnika i njeno prerađivanje. Personal Web kreira strukturu lične prezentacije sa četiri strane sa naznačenim mestima koja korisnik treba da popuni ili modifikuje da bi napravio vlastitu prezentaciju. Ostale četiri mogućnosti, Corporate Presentation, Customer Support Web, Discussion Web Wizard i Project Web, omogućavaju korišćenje čarobnjaka za kreiranje prezentacija: za kompanije, za podršku korisnicima, za diskusione grupe i predstavljanje projekta. Nova strana se kreira zadavanjem potkomande Page u kaskadnom meniju komande File/New. SLIKA

12 5. Izrada prezentacije u MS FrontPage-u Kada je prezentacija već projektovana moze se pristupiti njenoj izradi u FrontPage-u. Najbolje je započeti prezentaciju sa jednom stranom (One Page Web), a zatim prezentaciji dodavati nove strane. Svaka strana prezentacije snima se u posebnu datoteku u okviru foldera i folderske structure kreirane prilikom pokretanja programa FrontPage. Ime datoteke u koju je snimljena početna strana (Home Page) obično je index.html. Kada su napravljene sve strane prezentacije, treba ih povezati vezama. Kada je prezentacija napravljena i organizovana pomoću veza, treba proveriti sve veze u prezentaciji Osnovna podešavanja Kada se prezentacija pravi na našem jeziku, potrebno je izvesti i odgovarajuće podešavanje kako bi bila podržana slova našeg jezika. Komandom Tools/Web Settings otvara se prozor za dijalog Web Settings u kojem treba odabrati karticu Language. U polju Default page encoding ove kartice treba izabrati Central European, a zatim kliknuti na dugme. Boje pozadine, teksta i veza definišu se u prozoru za dijalog koji se dobija komandom File/Properties. U ovom prozoru treba izabrati karticu Background i u njoj odrediti podrazumevane boje. Pozadina strane može biti u odabranoj boji ili slika umetnuta iz neke datoteke. Komandom Format/Themes dobija se prozor za dijalog Themes. U ovom prozoru određuje se da li se tema primenjuje (Apply Theme to) na sve strane (All pages) ili samo na izabrane strane prezentacije (Selected page(s)). Klikom na dugme Modify dobijaju se u prozoru tri nova dugmeta za promenu boje (Colors), grafike (Graphics) i teksta (Text). Klikom na dugme

13 5.2. Rad sa tabelama Tabela se u Web stranu umeće na isti način kao i u Word-u, komandom Table/Insert/Table. U tom prozoru za dijalog nalaze se podešavanja za tabele (Number of columns, Number of rows)

14 Tabele su veoma značajne zbog toga sto dele stranu na nekoliko manjih delova u okviru kojih se ubacuje sadrzaj sa tekstom ili slikama. One mogu biti i nevidljive Rad sa tekstom Za rad sa stranicama Web prezentacije koristi se FrontPage editor. Da bi se radilo na strani dovoljno je dva puta kliknuti na njeno ime u listi foldera ili na njenu sliku u šemi navigacije. U prozoru za rad sa stranama treba izabrati prikaz Normal. Prikaz strane u obliku Preview koristi se za pregled strane bez pomoćnih elemenata i dinamičkih efekata. Jedini merodavan prikaz strane može se videti pritiskom na komandu Preview in Browser u standardnoj liniji sa alatkama. U FrontPage-u postoji nekoliko unapred definisanih stilova za pisanje teksta. Način na koji HTML formatizuje paragrafe ponekad može da zasmeta. Jedan od načina za rešavanje ovog problema je deljenje teksta u segmente ubacivanjem horizontalnih linija sa trodimenzionalnim izgledom (Insert/Horizontal Line). Tekst u naslovu menja se tako što se dvostrukim klikom na naslov aktivira prozor za dijalog Page Banner Properties. U ovom prozoru aktivira se opcija Text, a zatim u polju Page banner text postojeći tekst (Home page) zameni novim

15 5.4. Rad sa slikama Komandom Insert/Picture umeće se slika iz datoteke ili kliparta. Posle umetanja u stranu na ekranu se pojavljuje linija sa alatkama za rad sa slikom, a slika ostane označena sa osam kvadratića tako da joj se dimenzije mogu menjati na uobičajen način povlačenjem ovih kvadratića. Prve tri alatke služe za unošenje ili zamenu slike, za upis teksta na sliku i za pravljenje male sličice Auto Thumbnail. Druge tri alatke služe za precizno pozicioniranje slike, za postavljanje slike ispred ostalih objekata i za postavljanje slike iza ostalih objekata. Sledeće četiri alatke za rotaciju slike u oba smera, za simetrično preslikavanje oko vertikalne i horizontalne ose. Sledeće četiri alatke služe za povećavanje kontrasta na slici, smanjivanje kontrasta, povećavanje osvetljenosti slike i smanjenje osvetljenosti slike. Sledećih pet alatki redom služe: za isecanje delova slike, za pravljenje transparentne slike, za pravljenje crno-bele slike, za pravljenje izgleda isprane slike, za pravljenje izgleda trodimenzionalne slike i za promenu dimenzija slike. Sledeće četiri alatke služe za izbor slike. Prve tri služe za izbor delova slike, a četvrta za markiranje označenih delova slike. Poslednja alatka poništava sve učinjene promene i vraća originalnu sliku Web komponente Program FrontPage nudi različite mogućnosti uređivanja Web strana u cilju postizanja veće atraktivnosti i funkcionalnosti Web prezentacije. Neke od njih su: Marquee (Pokretni tekst), Page Transitions (Efekti prelaza) i Hit Counter (Unošenje brojača poseta strani) i Search ( Pretraživač). Da bi se uveo pokretni tekst u stranu treba zadati komandu Insert/Component/Marquee. U prozoru za dijalog koji se pojavljuje Marquee Properties u polju Text upisuje se tekst koji treba da se pojavi na ekranu. U okviru Direction odredjuje se da li tekst ulazi u polje pokretnog teksta sa desne ili leve strane. U okviru Speed određuje se brzina izvođenja efekta. U okviru Behavior određuje se da li tekst kruži u polju, samo ulazi u polje ili menja smer kretanja. U okviru Size određuju se dimenzije polja na ekranu u kome kruži tekst. U okviru Repeat određuju se da li se tekst ponavlja kontinualno ili određen broj puta. U polju Background color određuje se boja pozadine polja sa tekstom

16 U FrontPage-u se mogu uvesti različiti efekti prilikom prelaza sa jedne strane na drugu unutar Web prezentacije. Komandom Format/Page Transition dobija se prozor za dijalog Page Transitions. U polju Event određuje se da li se efekat izvodi prilikom ulaska na stranu, izlaska sa strane, ulaska na Web mesto ili izlaska sa Web mesta. U polju Duration određuje se vreme trajanja efekta. U polju Transition effect određuje se vrsta efekta koji se primenjuje. Da bi se uneo brojač poseta strani treba zadati komandu Insert/Component/Hit Counter. U prozoru za dijalog u okviru Counter Style određuje se izgled brojača. Aktiviranjem prekidača Reset counter to postavlja se početna vrednost brojača na željenu vrednost. Aktiviranjem prekidača Fiwed number of digits određuje se broj cifara u brojaču. Sam brojač će se pojaviti u prezentaciji tek posle njenog postavljanja na Web server. Za komponentu pretrazivanja zadaje se komanda Insert/Component/Search Form. Preciznija podešavanja se mogu obaviti otvaranjem prozora za dijalog Search Form Properties. Label for input je tekst koji se pojavljuje pre tekst polja za traženje. Width in characters je širina tekst polja za pretrazivanje. Labels for Start Search and Clear buttons je tekst koji se pojavljuje na dugmadima koja označavaju akcije počni pretragu i izbriši sadržaj tekst prozora Umetanje novih stranica Nova strana se kreira potkomandom Page u kaskadnom neniju komande File/New. Pored kreiranja strane u programu FrontPage, u prezentaciju se mogu preuzeti i datoteke kreirane drugim programima. Komandom File/Import dobija se prozor za dijalog Import u kojem se biraju folderi ili datoteke koji se uvoze u prezentaciju. Uvezene datoteke pojavljuju se u okviru Folder List

17 5.7. Snimanje (čuvanje) prezentacije Svaka Web strana prezentacije snima se u posebnu datoteku. Web strana se snima u datoteku zadavanjem komande Save ili Save As. Ime datoteke u kojoj je početna stana obično je index.html. Imena datoteka svih Web prezentacija prikazana su u okviru Folder List. Ako nekoj datoteci treba promeniti ime obično se to radi desnim klikom na ime datoteke i iz pomoćnog menija se odabere komanda Rename. Datoteka se briše tako sto se napravi desni klik na ime datoteke i odabere se komanda Delete. Treba voditi računa da se posle brisanja datoteke ukinu veze koje ukazuju na nju Povezivanje Web stranica Bitno je da Web strana bude snimljena pre pravljenja bilo kakve veze u njoj. Najjednostavniji način za pravljenje veze je da se tekst ili slika označi, a zatim zada komanda Insert/Hyperlink. Zadavanjem ove komande dobija se prozor za dijalog Create Hyperlink. Označavanjem datoteke u prozoru za dijalog na koju veza treba da ukazuje, a zatim klikom na dugme u prozoru se kreira veza. Ako veza treba da ukazuje na drugu adresu na Web-u, onda se u polju URL ukuca adresa na koju veza treba da ukazuje. Drugi način kreiranja veze je da se otvori strana na kojoj treba kreirati vezu, a zatim u okviru Folder List izabere datoteka na koju veza treba da ukazuje i ime datoteke mišem prevuče na mesto gde treba da bude veza. Veza dobija ime naslova strane u datoteci. Da bi se veza prepravila treba napraviti desni klik na tekst veze i izabrati komandu Hyperlink Properties, posle čega se otvara prozor za dijalog Edit Hyperlink. Veza se brise desnim klikom i komandom Delete. Umesto veze prema drugim stranama, mogu se napraviti i veze prema određenim mestima unutar iste ili drugih strana. Da bi se to uradilo, ta mesta treba prethodno obeleziti obelezivačima (Bookmarks). Da bi se postavio obelezivač, treba označiti mesto gde će on da se nalazi, a zatim zadati komandu Insert/Bookmark. Potom stranicu treba snimiti, a zatim postaviti vezu na obelezivač tako što se u polju URL prozora za dijalog Create Hyperlink postavi naziv datoteke, a u polju Bookmark naziv odgovarajućeg obeleživača

18 Postavljanje Web prezentacije na server Kada je prezentacija kompletno završena i kada su proverene sve veze, treba je postaviti na Web server kako bi bila javno dostupna. Po pravilu, postavljanje prezentacije na server obavlja administrator sistema. U slučaju da prezentaciju postavlja neki provajder treba zadati komandu File/Publish Web. U ovom prozoru za dijalog u polju Specify the location to publish zour web to: zadaje se lokacija na Web-u na kojoj se postavlja strana. Klikom na dugme Publish započinje proces postavljanja prezentacije na odabrani server. Tokom procesa postavljanja prezentacije server može da traži dodatne podatke, kao sto su user name i password. Po završetku prenosa datoteka sa računara dobija se poruka Web site publiched successfully!

19 7. Zaključak Web prezentacije su veoma bitne i korisne za svakog od nas jer omogućavaju pristup informacijama na daljinu, razmenu multimedijalnih informacija, komunikaciju, trgovinu, bankarstvo, zabavu itd. Sve sto nas zanima danas možemo naći na internetu putem Web stranica, pored zabave tu je i dosta poučnih i korisnih informacija o fakultetima, o zapošljavanju i mnoge druge stvari. Web nam omogućava i komunikaciju sa prijateljima i rođacima iz drugih delova sveta. Zato su Web prezentacije veoma bitne, a FrontPage je jednostavan program za izradu prezentacija koji zadovoljava zahteve velikog broja korisnika

20 8. Literatura 1. Računarstvo i informatika za II razred gimnazije, Nikola Klem, prvo izdanje, godina, Zavod za udžbenike i nastavna sredstva Beograd, Obilićev venac 5 2. Računarstvo i informatika za IV razred gimnazije društveno-jezičkog smera, Zorica Lakić, prvo izdanje, godina, Zavod za udžbenike, Beograd, Obilićev venac