Web prezentacija – opis izrade

Autor: Ivan Ilić 58/05

 Prvo pristupamo kreiranju nove FrontPage
Web prezentacije. Biramo iz menija opciju
File/New, a zatim iz Task Pane okvira i
opciju More Web site templates, koja nam
otvara gotove šablone za Web prezenatcije.
Nećemo koristiti gotove šablone već ćemo
samo kreirati praznu Web prezentaciju,
pomoću šablona Empty Web Site.
Ovo je praktično iz razloga, što na taj
način, kreiramo potrebne prateće foldere za
sajt: _private i images, iako se ne kreira ni
jedna Web strana, pa ni index.
File/New
Biranje šablona
Empty Web Site,
kreiranje prazne Web
prezentacije!
Mišljenja o načinu kreiranja Web
prezentacija su podeljena:
 neki eksperti su za to da se prvo

formira struktura cele prezentacije, a

tek potom da se kreiraju sadržaji
strana,
 dok drugi zastupaju mišljenje da se

mogu prvo kreirati pojedinačne Web

strane, pa ih tek naknadno
ukomponovati u strukturu Web
prezentacije.
Odabrali smo prvi pristup – kreiranje
strukture Web prezentacije.
Naravno, prvo smo osmislili strukturu
same prezentacije (koje bi strane
trebalo da sadrži, kakve su veze
između njih i sl.), pa tek onda
pristupili njenom formiranju
 Kreiranje prezentacije se obavlja u
prikazu Navigation!
Dakle, prelazimo u prikaz Navigation:
Prvo ćemo kreirati početnu, tzv. Index
stranu naše Web prezentacije.
Dovoljno je da sa toolbara koji se
nalazi u vrhu navigacijskog prikaza
odaberemo alat za kreiranje nove
Web strane.
Time kreiramo prvu stranu, a sam
FrontPage je prepoznaje kao Index.
 Dalje je potrebno dodavati nove Web
stranice u strukturu prezentacije.
Potrebno je predvideti da li se te nove
stranice nalaze na istom navigacionom nivou
sa već napravljenom Web stranom ili su u
nivou ispod nje (child pages).
Ukoliko pravimo stranicu izvedenu od neke
napravljene Web strane, dovoljno je da
kliknemo na nju, pa na alat za kreiranje
nove Web strane.
Promena imena Web strana se
jednostavno obavlja iz
“priručnog” menija Web
strane, birajući opciju
Rename.
Ponavljajući opisani postupak, kreiran je
prvi child nivo Web stranica, za početnu
stranu naše Web prezentacije.
 Idemo korak dalje i
stvaramo drugi
navigacioni nivo – child
strane, već postojećih
child strana
prezentacije.

Dobijamo Web
prezentaciju
složenije strukture:
Ponavljajući navedeni postupak, a prateći osmišljeni plan
za prezentaciju, korak po korak, formiramo celu
prezentaciju.
Došli smo do pozicije kada faktički imamo
kreiranu Web prezentaciju, tj. njen
strukturalni kostur.
Sledeći korak jeste da joj napravimo i
sadržaj, tj. da svaku od Web strana
“popunimo” odgovarajućim sadržajem i
činjenicama (tekst, slike), kao i da
formiramo sistem za navigaciju u
prezentaciji (sistem hiperveza).

Pre svega toga možemo se pozabaviti

dizajnom strana, tj. odabrati određenu
temu za Web stranice.
 Tema Web strane predstavlja određenu
kombinaciju elemenata Web strane (boje
pozadine, pozadinske slike na Web strani,
vrste i stila fonta, bulita i lista, navigacionih
tastera i drugih elemenata Web strane),
koje možete birati iz već ponuđene liste
programa FrontPage.

Dakle, sledeći korak – odabir teme za Web

strane!
Dovoljno je da iz prikaza navigation otvorimo jednu
stranu, pa da iz njenog menija odaberemo opciju
Format/Theme.

U Task Pane okviru se otvara preview svih

ponudjenih tema, odaberemo jednu i primenimo na
sve odabrane strane (Apply to all selected pages).
 Sledeći korak jeste podešavanje zajedničkih
ivica strana.
Zajedničke ivice (Shared Borders) su entiteti
Web strana, koji se mogu pojavljivati na svim ili
samo nekim Web stranama jedne Web
prezentacije.
Nazivaju se zajedničkim iz razloga što su iste na
svim stranama istog navigacionog nivoa.
U njih se, najčešće, smeštaju navigacioni
elementi (dugmad za navigaciju, hiperlinkovi i
sl.).
Najčešće se postavljaju na gornjoj, levoj i/ili
donjoj ivici Web strane (iz razloga što desna ivica
Web strane u čitačima često nije vidljiva, nego se
mora Web strana skrolovati da bi se ona videla).
 Da bi
Potom, napravili
iz dijalog zajedničke
prozora ivice
Shared na Webbiramo
Borders, stranama,
koje
dovoljno je
zajedničke da želimo
ivice sa proizvoljne Web strane
(leve, desne...), kaobiramo
i to daopciju
li će
menija:
biti vidljive na svim ili samo na tekućoj strani (All pages ili
Current pages). Format/Shared Borders.
Odabraćemo da su zajedničke ivice vidljive na svim Web
stranama prezentacije.

Moguće je i podesiti zajedničku ivicu klikom na taster

Border Properties.
 Krajnji rezultat jeste Web strana koja ima prazne
zajedničke ivice (u našem slučaju levu, gornju i donju), a
koje treba modifikovati prema potrebama Web
prezentacije.

Zajedničke ivice
 Sledeći korak, jeste podešavanje sadržaja
zajedničkih ivica.
Moja zamisao jeste da u gornju ivicu
stavim neki logo ili sliku, koja će se
provlačiti kroz celu prezentaciju i na taj
način tematski i logički povezivati sve
njene Web strane u jednu celinu.
Leva ivica je rezervisana za navigacione
elemente.
Da bi postavili sliku u gornju ivicu, potrebno je da
selektujemo tu ivicu, a zatim da odaberemo opciju iz
menija
Insert/Picture/From File
Što nam otvara dijalog prozor za odabir slika sa
određenog memorijskog medija.
 Pošto odaberemo željenu sliku i to
potvrdimo, ako se vratimo u prikaz Page,
videćemo da je ta slika postavljena na
gornju ivicu naše Web strane.

Sledeći korak jeste dodavanje

navigacionih komandi u levu zajedničku
ivicu.
 Komande za navigaciju možemo postaviti kao
već pripremljene Web komponente koje se nalaze
pod opcijom:
Insert/web Component

Odakle biramo opciju:

Link Bars/Bar based on navigation
structure
(daje nam navigacione komande zasnovane na
navigacionoj strukturi prezentacije, koju smo već
kreirali u prvom koraku)
Zatim sledi podešavanje navigacionih komandi:
Biranje stila komandi
Biranje orijentacije
navigacionih komandi

Biranje koje su sve

strane uključene u
navigacione komande
Na kraju zajednička ivica sa navigacionim komandama
izgleda ovako:
Na početnu – index stranu smo ubacili i sliku Nikole Tesle,
pa sada ta strana izgleda ovako:
 Ostalo je još da se podese donje
zajedničke ivice.
Zamisao je da u njima budu postavljene
“reklame”, tj. slike sa linkovima na
određene institucije koje se bave sličnim
sadržajima opisanim u našoj prezentaciji
(ovde je to Teslin muzej i fond).
Postavljanje hiperlinka na sliku je isto kao
i postavljanje hiperlinka na ma koji drugi
entitet.
Donje zajedničke ivice ćemo postaviti sa početne strane
prezentacije
 Sada treba da sačuvamo uređenu Web
stranicu i prilikom njenog snimanja,
dobićemo i poruku da treba da sačuvamo i
dodate elemente – slike.
Njih čuvamo u automatski generisanom
folderu Images.
Snimanje Web strane

Snimanje slika
 Pošto smo kreirali zajedničke ivice, to
ćemo, pri otvaranju svake Web strane,
uočiti da se one već nalaze na njima.
Preko zajedničkih ivica smo rešili problem
komandi za navigaciju, pa sada možemo
da pristupimo kreiranju sadržaja samih
Web strana.
Unos teksta nije komplikovan, jer podleže
sličnim pravilima kao i u Wordu.
Unos slika smo već videli kako izgleda.
 Videćemo kako možemo napraviti galeriju
slika na našoj Web strani predviđenoj za
to.
U ovoj prezentaciji smo predvideli dve
galerije.
Opisaćemo kreiranje samo jedne, a druga
se kreira na isti način.
 Potrebno je da stranu na kojoj kreiramo
galeriju otvorimo u prikazu Page.
Galerija slika nije ništa drugo do Web
komponenta.
Dakle, unosimo je kao Web komponentu:
Insert/Web component/Photo Galery

Vidimo da imamo 4 tipa galerija, pa

odaberemo jedan.
Kliknemo na Finish
 Otvara nam se dijalog prozor Photo Galery Properties,
preko koga vršimo dodavanje novih slika u galeriju
(klikom na Add), njihovo uređivanje (Move up/down), kao
i dodavanje tekstualnih objašnjenja uz slike (Caption).
Gotova Web strana sa galerijom izgleda ovako:
 Dalje ćemo kreirati Web stranu F. A. Q.
(najčešće postavljana pitanja posetioca).
Za tu stranu postoji gotov šablon, koji
nećemo koristiti (inače je veoma
praktičan).
Navešćemo par pitanja na vrhu strane, a
zatim dalje na strani i odgovore na ta
pitanja.
 Dalje je potrebno povezati pitanja i odgovore sistemom
hiperveza (hiperlinkova) i obeleživača (bookmark).

Na svaki odgovor ćemo uneti obeleživač – bookmark, a

to je jednostavno:
obeležimo odgovor/Insert/Bookmark.
Oznaka za bookmark u tekstu
Zatim na svako pitanje u vrhu strane postavimo
hipervezu na odgovarajući obeleživač:

Insert/Hyperlink/Place in This Document ili

Bookmark

odakle biramo željeni obeleživač iz ponuđene liste.

Odavde biramo obeleživač na
koji hiperveza ukazuje
 Pošto smo završili kreiranje F.A.Q. strane,
prelazimo na drugu Web stranu, koja je
bitna u prezentacijama složene strukture.
To je tzv. mapa sajta.

Za njeno formiranje koristićemo gotov

šablon, tj. komponentu:

Isert/Web Component/Table of
Contents/For This Web site
 Sledeći zadatak je da kreiramo kontakt
stranu.
Kontakt strana obično sadrži poštansku
adresu, ali i URL adresu Web prezentacije
organizacije, osobe i dr., kao i e-mail
kontakt adresu.
E-mail ne treba dati samo u “pisanoj”
formi, već treba kreirati i link koji
automatski generiše mejl adresiran na
elektronsku adresu, na koju link
ukazuje.
Na označeni simbol ćemo uneti link
koji automatski generiše mejl ka
određenoj
Ovde elektronskoj
upisujemo e-mail adresi
adresu
Klikom
A možemona ovaj
unetitaster možemo
i automatski
na koju će
odabrati
generisan biti upućena
poruku
subjectkoja se javlja u
te poruke
automatski generisana
polju ispod miša, poruka
kada zadržimo
pointer miša nad linkom
Poruka se ovde upisuje
 Pošto smo kreirali sadržaje svih strana,
pozabavićemo se naprednijim
podešavanjima nekih elemenata Web
strana.

Npr., u strani Biografija ćemo na

podnaslov “pronalazač koji je...” postaviti
link kojim se otvara video sadržaj.

Naravno video zapis ćemo prvo

prekopirati u folder Web prezentacije.
 Da bi posetiocu bilo uočljivo da tu nešto
postoji, podesićemo da naslov promeni
boju (boju pozadine) prilikom pomeranja
miša nad tom Web stranom.
Da bismo to uradili moramo sa strane
birati opciju iz menija:
Format/Behaviors

Sa leve strane nam se otvara okvir za

podešavanje, iz koga biramo koju vrstu
događaja želimo, kao i na koju akciju se
događaj odigrava.
 Promeniti boju pozadine

Biranje
vrste
događaja
Biranje akcije na
koju se startuje
promena
 Takođe, ukoliko su u prezentaciji
korišćena naša latinična slova ili ćirilični
font, potrebno je obezbediti da takav font
bude prepoznat od strane Web čitača.
Naravno, preduslov je da se koriste
unicode fontovi.
Na svakoj strani je potrebno iz njene
opcije:
Page properties/Languages
odabrati opciju
Unicode (UTF-8)
 U FrontPageu, slično kao i u PowerPointu
možemo podesiti tranziciju strana, tj.
efekte prilikom otvaranja Web strane,
njenog zatvaranja, prelaska na drugu i sl.

Sam postupak je sličan, potrebno je da iz

menija aktuelne strane podesimo opciju:

Format/Page Transition
 Biranje efekta
Biranje događaja
PO ZAVRŠETKU TO IZGLEDA OVAKO:
 Sav potreban materijal za sajt: dokumentarni podaci,
slike, video zapisi... su preuzeti sa on-line enciklopedija.
Sajt je optimizovan za Internet Explorer 6.