You are on page 1of 106

Diplomski rad Poslovne Web prezentacije

Uvod

Oko 100 miliona ljudi iz oko 95 zemalja sveta ima pristup Internetu. Svaka 24 sata
se na Internetu sklopi oko 560 poslovnih ugovora. Mesečno 15.000 raznih kompanija na svetu
napravi svoj Home Page i postavi ga na Internet. Na svake četiri sekunde na Webu se pojavi
neka nova prezentacija. Broj računara se na Webu, po nekim statistikama, udvostručava
svakih pedeset dana. Od ukupnog broja surfera mrežom samo 15.5% su žene, prosečna
starost korisnika je 35 godina. Dve trećine korisnika su studenti, istraživači i profesori. Danas
ljudi u proseku provedu 10 sati i 28 minuta nedeljno na Internetu.
U početnim fazama razvoja Interneta korisnici su bili uglavnom iz akademskog
okruženja. Danas je Internet mreža otvorenog tipa, koriste je kako pojedinci tako i firme iz
gotovo svih grana privrede. Male firme nemaju velika sredstva da ulože u skup i veliki
marketing, ali postavljanjem svoje prezentacije na Internet mogu biti ravnopravni sa svim
svetskim firmama i korporacijama.
Internet marketing je nova oblast u savremenim sistemima komunikacije i
marketingu uopšte. Prvi korak u ostvarenju marketing nastupa na Internetu je posedovanje
prezentacije gde je moguće da se firma ili preduzeće predstave u svom najboljem svetlu.
Mogućnost da se firma predstavi na Internetu i mogućnost da se prezentacija nađe na svim
domaćim i svetskim pretraživačima i da prilikom pretraživanja Interneta po ključnim rečima ili
proizvodima pored svetskih kompanija postoji i ponuda određene firme, samim tim znači i
izlazak iz anonimnosti poslovanja u svojoj sredini.

1. Od samog početka
Da li je smelo nazvati sve vezano za Internet, World Wide Web, računarske mreže i
prodor računara u naše živote zvučnim imenom digitalna revolucija? Naša generacija je u
prilici da posmatra epohalne promene u društvu. Naklonost koju mediji pokazuju prema svemu
vezanom za digitalnu revoluciju uzrok je da o Internetu svi sve znaju. Došlo je vreme da priče
tog tipa izađu iz oblasti fenomenologije i postanu nešto praktično. Prvi korak u tom pravcu je
odgovor na ključno pitanje šta je to Internet?
Internet je praktična realizacija povezivanja stotina miliona računara u jedinstvenu
mrežu. Preko Interneta se prima i šalje elektronska pošta, razmenjuju elektronske datoteke,
posećuju Web strane, prilazi bibliotekama, naručuju proizvodi i komunicira u najširem smislu.
Kada se sve ogoli do krajnjih granica, jedino što mreža može je da sa jednog računara na
drugi “dobaci” maleni paketić podataka: paket se “spakuje” na jednom računaru, na njegov
početak se stavi adresa primaoca i onda se taj paket “preda” mreži, koja ga, pre ili kasnije, a
obično za svega par sekundi, isporuči primaocu, uz automatsku proveru ispravnosti prenosa.
Internet je informatička infrastruktura, a ono što ga je učinilo toliko popularnim jesu
sadržaji koji se na tom temelju grade. Ako je komunikacija dovoljno brza, ne mora da se
prenosi samo tekst, u njega mogu da se ugrade slike, zvukovi, pa čak i animacije. Prelomni
trenutak razvoja Interneta je upravo mogućnost slanja multimedijalnih sadržaja - kombinacije
teksta, slike i zvuka. Tada je mreža, prvobitno namenjena profesionalcima, prerasla u mrežu
koju svako, ne samo da može, nego i želi da koristi.

-1-
Diplomski rad Poslovne Web prezentacije

1.1. Kako je Internet nastao


Istorija multimedije i Interneta je mnogo prozaična, ali istovremeno i vrlo neobična.
Sve je počelo u noći 3. jula 1976. godine kada su specijalne jedinice izraelske vojske izvršile
munjevit i uspešan napad na teroriste u Entebeu u Ugandi. Pro-palestinski gerilci oteli su avion
sa 103 putnika i sleteli u Ugandu, gde su uživali gostoprimstvo ugandskog diktatora Idi
Amnina. Uspeh je toliko impresionirao američke vojne stručnjake da su naredili agenciji ARPA,
koja je vlasnik i inicijator preteče Interneta, ARPANET-a, da prouči kako je elektronska
tehnologija pomogla Izraelcima da se pripreme za akciju.
Predak Interneta je dakle mreža koja je nosila ime ARPANET, što je skraćenica od
Advenced Research Project Agency. To je agencija koju je 1969. godine osnovala američka
vlada u cilju razvoja strateških projekata iz oblasti komunikacija. ARPANET je bila pre svega
mreža koja je trebalo da obezbedi komunikaciju vojnih laboratorija, vladinih biroa i univerziteta
na kojima se realizuju brojni projekti od interesa za armiju. Tokom ranih sedamdesetih
ARPANET je postojano rastao, da bi ga 1975. u potpunosti preuzelo Ministarstvo odbrane,
pretvorivši ga u sadašnji Defense Data Network DDN.
Najvažniji rezultat razvoja ARPANET i DDN mreža jeste Transsmision Control
Protocol/Inetreface Protocol ili TCP/IP. Može se naći i druga interpretacija ove skraćenice, npr.
Transport Control Protocol/Internet Ptotocol, ali ime i nije toliko važno jer je TCP/IP reč za
sebe. TCP/IP je definisan 1983. godine i predstavlja način za razmenu informacija među
raznorodnim računarima i mrežama.
Godine 1980. Nacionalna naučna fondacija (NSF) je osnovala mrežu zvanu The
Internet, koja je sedam godina kasnije povezana sa ARPANET/DDN mrežama i tako je nastao
NSFNET. Ova mreža je u početku okupljala uglavnom akademske institucije širom Sjedinjenih
država, a priključila joj se NASA i druge državne agencije. Nekako u isto vreme širio se
Usenet, konferencijski sistem posredstvom koga su studenti i nastavnici američkih Univerziteta
razmenjivali mišljenja o raznim stručnim neoficijelnim temama. IBM je 1977. godine osnovao
BITNET mrežu, u koju je uključio najpre univerzitetske računare u Americi, a kasnije i u Evropi
(EARN) i drugim krajevima sveta.
Umrežavanje računara je bilo interesantno i za komercijalne organizacije, koje su se
tokom osamdesetih godina povezivale na razne načine. 1990. godine NSF je predstavila
projekat umrežavanja najpre na nacionalnom nivou, a potom i na globalnom. Trebalo je
povezati EARN koji je postojao u mnogim državama, JANET u Britaniji, NORDUnet u
Skandinavskim zemljama, FUNET u Finskoj itd. Tako je nastao Internet koji nam je i danas
poznat. Njega ne nazivaju uzalud mrežom svih mreža, jer sastavni delovi nisu bili pojedinačni
računari već kompletne računarske mreže organizovane na najrazličitije moguće načine.
Jedino zajedničko bio im je protocol za međusobnu komunikaciju TCP/IP.
Ovakav nastanak Interneta uslovio je upravljanje njim. Internet naime nema
vlasnika, tj. nijedna država niti privatna institucija nema vlast nad njegovom celinom. Pojedine
države i firme su vlasnici delova komunikacionih kanala ili opreme koja se koristi, ali na
Internetu postoji zapravo samo jedno vlasništvo: svako je vlasnik svog računara koji je
priključen na mrežu i ima neograničeno pravo da taj računar koristi kako želi i da na njemu drži
sadržaje koje on smatra potrebnim. To dalje znači da svaki vlasnik računara samostalno bira
kojim će se putem priključiti ne mrežu, koje će njene sadržaje prenositi i šta će slati drugima.
Jedina stvar koja se mora rešavati na centralizovan način jeste pitanje adresa, pošto
svaki računar u mreži mora da ima jedinstven identifikacioni broj. Time se bavi Internet Sociaty
(ISOC), a posebno njegova radna grupa koja nosi naziv Internet Architecture Board (IAB).
Njihova nadležnost se završava na dodeljivanju adresa i preporučivanju standarda. Oni
nemaju nikakvu dalju kontrolu nad Internetom niti sadržajima na njemu.

-2-
Diplomski rad Poslovne Web prezentacije

1.2. Organizacija mreže


Internet je mreža od više desetina miliona računara koji su povezani na različite
načine telefonskim vezama, satelitski, radio vezama, kablovima za lokalnu mrežu itd. Međutim,
bez obzira na način povezivanja, svaki računar na Internetu može razmenjivati poruke sa svim
ostalim, što je obezbeđeno korišćenjem jedinstvenog načina komunikacije između računara,
TCP/IP protokolom.
TCP/IP protokol, može se posmatrati kao poštanska služba koja prenosi pošiljke sa
jednog računara na adresu drugog. Da bi se tačno znalo kome je od miliona računara poruka
upućena, svaki računar mora da ima jedinstvenu adresu. Adrese računara se sastoje od četiri
broja, koji se nazivaju okteti, razdvojeni tačkama. Tako je 193.203.17.22 recimo jedna od
adresa. Ove adrese se nazivaju IP adrese, jer ih koristi IP protokol iz familije TCP/IP protokola
za pronalaženje tačnog odredišta za poslatu poruku. Numeričke adrese su pogodne za
korišćenje na računarima, jer su brojevi za njih prirodni. Međutim, za nas bi bilo izuzetno
naporno da adrese računara na Internetu pamtimo u brojnom obliku, jer bi se za, na primer
slanje pošte moralo pisati korisničko ime i adresa računara u brojnom obliku, na primer
ime@[195.250.103.59]. Iz tog razloga se svakoj IP adresi može dodeliti jedna ili više
simboličkih adresa. Tako da umesto da pišemo brojnu adresu, pisaćemo simboličku adresu
računara.

1.3. Simboličke i numeričke adrese


Veza između simboličkih i numeričkih adresa odvija se preko DNS servisa – Domain
Name Server. Na određenom broju računara u mreži instaliran je DNS servis koji kada
pošaljete poruku na određenu simboličku adresu, tu adresu prevodi u numeričku, na osnovu
koje se dati računar pronalazi. Tako je sa jedne strane omogućeno korišćenje simboličkih
adresa, a sa druge strane računar koristi numeričke adrese, pošto je to za njih prirodan način
komunikacije. Računar povezan na Internet koristi jedan ili više korisnika. Svaki od njih ima
svoje jedinstveno korisničko ime – username na tom računaru. Kao što svaki računar ima
svoju adresu, tako i svaki korisnik ima svoju adresu.
Adresa korisnika se sastoji od njegovog korisničkog imena i adrese računara
razdvojenih znakom @. Kao što jedan čovek može primati pisma na više adresa, tako i na
Internetu neko može imati više adresa tj. ako ima više korisničkih naloga. Adrese su podeljene
po državama. Svaka država ima svoju dvoslovnu oznaku kojom se završavaju simboličke
adrese računara iz te države. Tako, Jugoslavija ima oznaku yu, Britanija uk, Tajvan tw i slično.
Izuzetak su adrese u Sjedinjenim Američkim Državama koje nemaju očekivani sufiks us već se
završavaju sa edu ako je reč o akademskim institucijama, com ako je reč o komercijalnim
organizacijama, gov za vladine i mil za vojne organizacije, zatim net za organizacije koje se
bave davanjem Internet usluga, org za ostale organizacije. Vremenom su oznake net, com i
org počeli da dobijaju računari van granica SAD-a i koriste se širom sveta.

1.4. Domeni i poddomeni


Oznake yu, com, tw i sl. nazivaju se domenima adresa, dok se recimo ac.yu, co.yu i
sl. nazivaju poddmenima domena yu, kao sto su bg.ac.yu, kg.ac.yu, ni.ac.yu poddomeni ac.yu
domena. Tako, za adresu nekog računara na Internetu se kaže da se sastoji iz dva dela. Prvi
je ime tog računara, a drugi je njegov domen.

-3-
Diplomski rad Poslovne Web prezentacije

Onaj ko dobije administraciju nekog domena dalje deli taj domen na načina na koji
njemu odgovara. Domen 'yu' u okviru koga se nalaze računari locirani u Jugoslaviji, je podeljen
po Engleskom modelu. Akademske institucije su smeštene u poddomen 'ac.yu' (Academic)
dok su komercijalne i ostale institucije smeštene u domen 'co.yu' (Corporate). U nekim
zemljama su odvojeni domeni za komercijalne i ostale organizacije, pa se komercijalne
označavaju sa 'co' ili 'com', dok se ostale vode pod 'or' ili 'org'. U Jugoslaviji se nakon
priključivanja raznih vladinih i vojnih organizacija očekuje dodavanje novih poddomena.
U okviru ac.yu domena se nalaze adrese računara iz akademskog okruženja. Dalja
podela ovog domena ukazuje na grad gde se nalazi institucija u kojoj je smešten računar.
Tako, postoje poddomeni bg.ac.yu (Beograd), ni.ac.yu (Niš), kg.ac.yu (Kragujevac) i slično.
Dalje se adrese grade imenom institucije kao i eventualno nekim dodatnim informacijama
(laboratorija, sektor...). Računari Mašinskog fakulteta u Kragujevcu pripadaju domenu
mfkg.kg.ac.yu, Elektrotehničkog fakulteta u Beogradu propadaju domeni etf.bg.ac.yu i td.
Poddomen co.yu se dalje deli po organizacijama.

1.5. Servisi Interneta


Internet je stekao ogromnu popularnost dobrim delom zahvaljujući bogatstvu
sadržaja i usluga koje nudi korisnicima. Ove usluge se u Internet žargonu nazivaju servisi. Svi
servisi Interneta rade tako što negde u mreži postoje serveri na kojima su smešteni podaci, a
na našem računaru se izvršava klijent-program koji tim podacima pristupa preko mreže.
Precizna pravila koja računari poštuju u toku razgovora se nazivaju protokolom, a osnovni
protokol nosi ime TCP/IP. Vremenom su pronađene razne primene mreže i gotovo za svaku od
njih je napravljen odgovarajući protokol, odnosno servis. Servisi se dele u tri osnovne grupe:
osnovni, koji postoje na svakom računaru vezanom na mrežu, javni, namenjeni smeštanju i
pristupu svim dostupnim podacima i posebni, koji su namenjeni pretraživanju mreže.
Osnovni servisi su prisutni praktično na svakom računaru koji je povezan na
Internet. Da bi ste ih koristili morate imati korisničko ime na nekom od servera u mreži i
odgovarajuću lozinku za pristup, čime dobijate jednoznačnu adresu.
Javni servisi su instalirani na značajnijim serverima u mreži, da bi se svim
korisnicima obezbedio jednostavan pristup podacima.
Servisi za pretraživanje omogućuju pronalaženje odgovarajućih dokumenata na
javnim servisima. Bez njih bi krstarenje Internetom bilo znatno sporije i manje efikasno.
Siguronosni servisi su neophodni kada poželimo da pomoću Interneta prenosimo
podatke koji imaju posebnu važnost. Saobraćaj na mreži je u velikoj meri otvoren, pa se ne
može garantovati tajnost podataka.
Sistemski servisi su namenjeni uglavnom administratorima servera i mreže, a
ponekad mogu da budu od značaja i za korisnike, pre svega kako bi proverili da li je neki
računar trenutno priključen na mrežu ili postoje problemi na vezama [1].

1.6. World Wide Web


Kada se kaže Internet, veoma često se zapravo misli na World Wide Web ili
skraćeno WWW. To je hipermedijalni i za upotrebu veoma pogodan servis. WWW čini mreža
dokumenata koji međusobno ukazuju jedni na druge i omogućavaju brzo i lako pronalaženje
potrebnih informacija. Sve što treba uraditi jeste kliknuti mišem na podvučeni tekst ili deo slike
koji nas interesuje i automatski prelazimo na drugi sadržaj ko zna gde u globalnoj mreži.

-4-
Diplomski rad Poslovne Web prezentacije

WWW je jedan od najnovijih servisa na Internetu, a u poslednje vreme i ubedljivo


najpopularniji. Nastao je marta 1989. godine u CERN-u, Centar za visokoenergetsku fiziku u
Švajcarskoj. Ovaj sistem je osmišljen sa ciljem da fizičarima na lak način prezentira
mnogobrojne informacije dostupne na Internetu.
Pošto se radi o hipertekst sistemu to znači da se iz dokumenta mogu referencirati
drugi dokumenti, jednostavnim dodavanjem linka za taj dokument. Sistem je distribuiran, tj.
referencirani dokumenti mogu biti na istom, ali i na drugom računaru u mreži. Prateći linkove
krećemo se po mreži od servera do servera, pri tome ne primećujući nikakvu razliku među tim
računarima koji mogu biti i po konstrukciji i po operativnom sistemu veoma različiti. Za ovakvo
kretanje se popularno kaže Net Surfing-jedrenje ili Net Cruising-krstarenje po Internetu.
WWW ima elemente multimedije, jer se iz njega mogu prikazivati i tekstovi, slike,
zvuci, video zapisi i sl. Može se prikazati bilo koji tip dokumenta za koji imamo program za
prikazivanje na našem računaru. WWW protokol samo prenese datoteku, a onda se klijent
snalazi sa njom. Kao i ostali Internet servisi, WWW je organizovan na klijent-server principu.
To znači da se podaci nalaze na serverima na mreži gde se izvršava poseban serverski
program koji na zahtev, preko mreže, šalje dokumente klijentskom programu, koji se izvršava
na našem računaru. Protokol kojim WWW klijent i server komuniciraju naziva se HTTP –
Hyper Text Transfer Protocol.
Da bi ste pristupili nekom Web serveru, morate imati instaliran TCP/IP protokol i
odgovarajući program za pristup, browser, kao na primer Internet Explorer ili Netscape, kada
ga startujemo pristupamo Web serveru u mreži čiju adresu zadajemo:
http://www.mfkg.kg.ac.yu
Adrese poput gornjih se nazivaju URL adrese, Uniform Resource Locator i standardi
su na internetu. Prvo se navodi naziv protokola, zatim dvotačka, dve kose crte iza kojih je
mrežna adresa računara.
Ključna stvar u nastanku Weba je bio hipertekst. Tako je nazvan metod za
povezivanje blokova ili stranica podataka koji je prvi put smišljen u 60-tim. Međutim, tek 90-tih
godina primenjen je koncept hiperteksta na Internet, preko protokola koji je nazvan HTTP.
World Wide Web je rođen.

1.7. Hypertext Transpotr Protocol


World Wide Web Consortium, ista organizacija koja je razvila HTML specifikacije,
takođe izrađuje Hypertext Transpotr Protocol, koji se kao i većina specifikacija koje su vezane
za Internet, prati kao Request For Comment (RFC).
Prema ovoj specifikaciji, HTTP je »protokol na nivou aplikacije za distribuirane,
hipermedijalne informacione sisteme. To je generički protokol bez stanja koji se može koristiti
za mnoge zadatke, pored toga što se koristi za hipertekst, kao što su serveri imena i
distribuirani sitemi za upravljanje objektima, proširenjem metoda njihovih zahteva), kodova
grešaka i zaglavlja«. U praktičnim terminima to je mehanizam pomoću koga klijent i server
komuniciraju kada koriste Web.
HTTP protokol radi na principu zahtev/odgovor i definiše načine komunikacije
između klijenta i servera. Postoji nekoliko programa koji se ponašaju kao serveri i nekoliko njih
koji se ponašaju kao klijenti kada se Web stranice zahtevaju i obezbeđuju. HTTP definiše
uloge servera, proksija, keširanja i pretraživača. Na primer, proxy može biti klijent kada traži
stranicu sa Web servera, u isto vreme, može biti i server za pretraživače za koje upućuje
zahtev, dok im upućuje stranice koje prima sa Web servera. HTTP podržava keširanje, a to je
držanje skorih kopija stranice na nekoj bližoj lokaciji da bi se ta stranica brže dobila.
HTTP zaglavlja su bitan deo komunikacije između klijenta i servera. Nakon što klijent
kontaktira server i nakon što server pročita i interpretira zahtev, on izgrađuje poruku odgovora

-5-
Diplomski rad Poslovne Web prezentacije

koja se sastoji od statusne linje, zaglavlja i tela poruke. Telo poruke sadrži HTML od koga se
kreira strana koja se vraća kao odgovor, dok statusna linija ukazuje na status zahteva. Jedan
od najpoznatijih odgovora je »HTTP 404 – Not Found«. Statusni kod je kod od tri cifre i postoji
više kategorija statusnih kodova, koji se zasnivaju na prvoj cifri koda:
1xx Informational – zahtev je primljen, proces se nastavlja.
2xx Success – akcija je bila uspešno primljena,
3xx Redirection – moraju se preduzeti dalje akcije da bi se kompletirao zahtev,
4xx Client Error – zahtev sadrži lošu sintaksu ili se ne može ispuniti,
5xx Server Error – server nije uspeo da ispuni zahtev koji je validan.
Prema specifikaciji, poruke statusa su preporuke i mogu se menjati, a da pritom ne
utiču na rad protokola [2].

-6-
Diplomski rad Poslovne Web prezentacije

2. Web lokacije – sajtovi


Danas postoje milioni Web lokacija, možete pristupiti informacijama u širokom
opsegu tema, možete da poslujete preko Weba i možete čak da učite o Webu i njemu
pripadajućoj tehnologiji.
Web lokacija (site) je kolekcija srodnih međusobno povezanih Web stranica i drugih
datoteka. Web lokacija obično ima specifičnu namenu, bilo da je usmerena lično ili poslovno.
Na svakoj Web lokaciji jedna stranica je označena kao polazna stranica (Home Page). To je
stranica koju korisnici prvi put vide kada posete neku lokaciju. Na polaznoj stranici korisnici
mogu da mišem biraju hiperveze (hyperlink). To su delovi teksta ili slike koje kada ih izaberete
odmah vas prebacuju na drugu Web stranicu ili lokaciju.

2.1. Razvojno okruženje


Okruženje na kom je Web sajt konstruisan i izgrađen se zove razvojno okruženje.
Termin razvojno okruženje se odnosi na platformu, procese i alate koji su korišćeni za
dizajniranje, građenje, podešavanje i za održavanje svih fajlova/objekata/podataka, koji se
nalaze na Web sajtovima. Web sajt može da bude veoma prost i da sadrži samo nekoliko
HTML stranica ili da bude kompleksan kao kompletan aplikacijski sajt, sa velikim brojem
objekata, različitih tipova fajlova i komponenata koje skladno interaguju. Generalno gledano,
razvojna okruženja mogu da se podele u dva velike klase: ručna i automatska klasa.

Ručni razvoj
Ceo kod možete napisati sami, ručno, čak i veoma kompleksni sajtovi se mogu
razviti na taj način, korišćenjem jednostavnih alata kao što su Notepad ili WordPad. Međutim,
ovi alati se koriste za brzo editovanje već postojećih fajlova pre nego za kreiranje novih.
Notepad je prost tekst editor koji se dobija sa svim normalnim instalacijama
Windowsa i to kao deo grupe Accessories. Ima mogućnost kreiranja i snimanja tekstualnih
fajlova. Idealan je za editovanje HTML fajlova, uključujući skriptove kao što je ASP, VBScript i
Jscript. Ovo je popularan alat zato što je besplatan, mali i ne ostavlja formatirane karaktere u
fajlu.
WordPad takođe dobijate sa standardnom instalacijom Windowsa i on je smešten u
istoj grupi Accessories i on je nešto napredniji tekst editor. On omogućava snimanje teksta i u
drugim formatima, a ne samo kao plain ASCII tekst, ali ovo je, u stvari, mana kada se radi o
kreiranju Web strana. Koristan je zato što može da otvori velike fajlove. Međutim, potrebno je
proveriti da li su fajlovi snimljeni u ispravnom formatu, a ne u nekom drugom, kao što je Rich
Text Format, koji ima rtf ekstenziju fajlova, zato što pristup formatiranim karakterima može da
izazove veliku pometnju na Web strani. Preporučuje se oprezno korišćenje.

Automatizovani razvoj
Kao kontrast za tekst editore koji rade samo sa plain tekstom, automatizovani razvoj
omogućava bogat skup alata koji stvaraju HTML fajlove lakše, brže i sa manje grešaka,
obezbeđuju HTML editovanje, pregled koda označen raznim bojama radi preglednosti. Različiti
alati nude različite stepene automatizovanosti. Što je veća automatizovanost, to se manje
razume ono što se dešava u pozadini. Previše automatizacije može da vas stavi u milost i
nemilost programa kada se čini da stvari ne funkcionišu na željeni način, što opet zahteva
ručnu izmenu.

-7-
Diplomski rad Poslovne Web prezentacije

Microsoft Front Page se pojavio 1997. godine, a sledeća verzija 1998, da bi se na


kraju pojavila verzija 2000. Front Page sadrži veliki broj dobrih alata za kreiranje Web strana,
čarobnjaka za automatizaciju, pa čak i izgled celih sajtova. Osnovni nedostatak Front Pagea je
što koristi samo svoje, tj. Microsoftove nekompatibilne petlje i funkcije ograničavajući time
izbor pretraživača.
Jedan od glavnih konkurenata Microsoftu je firma Macromedia, sa skupom svojih
programa specijalizovanih za Web dizajn, kao što je na primer Dreamweaver, koji ima sva
klasična svojstva dobrih alatki, jednostavnost, sveobuhvatnost i eleganciju.

2.2. Uspešan sajt?


Postoje milioni Web sajtova koji se usredsređuju na svaku od tema. Pre nego što se
počne sa izgradnjom stranica, potrebno je osmisliti strukturu i izgled sajta, u zavisnosti od
ciljeva i namene sajta. Potrebno je znati šta sve čini jedan sajt uspešnim. Odvajanje dobrih od
loših sajtova je očigledno. Nedostatak bitnog sadržaja, sporo vreme učitavanja, zbunjujuća
navigacija, loša grafika, su karakteristike loše napravljenog sajta.

Dinamika Statičke stranice su dobile naziv po tome što se sadržaj na njima ne


menja, osim kada Web administrator ne unese izmene. Te stranice na isti način vide svi ljudi
koji im pristupaju. Mnoge Web prezentacije i dan danas funkcionišu na ovom principu. Za
razliku od statičkih Web sajtova, postoje i dinamički, koji različitim tehnikama dovode Web sajt
u život pomoću interaktivnosti. Dinamički sadržaji se generišu na osnovu smernica autora, ali i
na osnovu podataka koji pristižu od klijenta ili podataka do kojih server dođe na neki drugi
način. Postoje stranice koje se svaki put kada pritisnete refresh menjaju, stranice koje znaju
koji browser koristite, da li ste tu prvi put ili ne, stranice na kojima se nalaze ankete različitog
tipa i td.

Sažetost Materijali za pravljenje Web sajtova su uglavnom tekstovi i slike. Tekstovi


se mogu pisati čak nezavisno od prezentacije i u običnim tekst procesorima, a potom okititi
komandama za formatiranje. Web je takozvana kratka forma gde sa vrlo malo reči treba reći
najbitnije stvari. Ovo je posebno važno za uvodne strane prezenatcije, koje treba da
zainteresuju posetioca. Onaj ko bude zainteresovan za ono o čemu govorite, kasnije će rado
pročitati i nešto duži tekst.

Originalnost Pošto se na Webu nalazi zaista mnogo sajtova, dolazi se do zaključka


da su sve ideje već potrošene. Ideje za većinu Web sajtova su već implementirane, tako da i
ne postoji nešto što se već nije videlo, a ono što se najviše ceni i nije sama ideja već dobro
izvršavanje. U realnosti, uvek ima mesta za inovacijske dizajnere koji će razviti originalne
sajtove. Svaka nova tehnologija i svaka promena stava predstavlja mogućnost za nastanak
kreativnih sajtova.

Stabilnost i pouzdanost Ako je namena sajta, između ostalog, reklamiranje,


oglašavanje, prodaja i sl, potrebno je obezbediti i solidnu stabilnost i pouzdanost. Potrebno je
obezbediti da sajt bude uvek aktivan, kao i to da server na kome je postavljen sajt ne bude
preopterećen.

Slike Slike moraju da prate tekst – Web bez slika ne bi imao toliku popularnost, jer
je prazan tekst suv i dosadan. Slike ne smeju da budu prevelike pošto ih u konačnom vremenu
treba preneti često sporim komunikacionim kanalom. Ako prenos slike traje predugo, čitalac
može da odustane od čitave prezentacije. Poželjno je da veličina slike bude prilagođena

-8-
Diplomski rad Poslovne Web prezentacije

minimalnim standardnim karakteristikama ekrana korisnika Weba, a to je danas rezolucija od


800x600 piksela. Slike ne bi trebalo da prelaze veličinu od 50 KB. Dobra grafika je u svakom
slučaju poželjna, ali se ipak pravi kompromis između veličine fajla i kvaliteta slike, jer je Web
mnogo drugačiji medijum od, recimo, štampe.

Struktura Navigacija sajtom je vrlo bitna osobina. Ako ljudi ne mogu da nađu ono
što traže, oni jednostavno mogu da kliknu na neki od mnogih dostupnih sajtova. To ne znači da
je potrebno koristiti isti izgled sajta kao i svi drugi na Webu, već da bi trebalo obezbediti da sajt
bude prikazan na intuitivan način [2].

2.3. Organizacija Web sajtova


Jedan od ključnih elemenata koji određuje uspešnost Web sajta jeste njegov
navigacioni siStem. Navigacija je kritičan aspekt dizajna sajta i veoma važan. Bez obzira na
sadržaj i grafički interfejs, sajt ne može biti uspešan ukoliko nema logičan i lako razumljiv
navigacioni sistem, što je mnogo više od skupa linkova između strana.
Kako je Internet i ničiji i svačiji to znači da praktično svako može da objavi na njemu
bilo šta. Ovakva situacija prouzrokovala je postojanje ogromne količine informacija dostupnih
preko Interneta i najčešće vrlo teško pronalaženje potrebnih. Neka istraživanja pokazuju da se
na netu nalazi preko 500 miliona dokumenata, od kojih je moguće pretražiti manje od polovine.
Postojanje ovakvog obilja informacija logično je nametnulo pitanje njihove adekvatne
organizacije na postojećim Web sajtovima.
Pod navigacionim sistemom podrazumeva se organizaciona šema sajta koju
sačinjavaju svi linkovi u okviru njega. Navigacioni sistemi su se razvijali prilično sporo, što je
prouzrokovalo slab uspeh velikog broja sajtova. Oko 80% posetilaca odustaje od sajta, ako na
njemu ne mogu da se snađu. Kreiranje navigacionih sistema uglavnom je prepušteno Web
dizajnerima, tako da svaki sajt ima drugačiji navigacioni sistem. Generalno, postojeći
navigacioni sistemi imaju dosta nedostataka, pre svega u povezivanju svih strana sajta
međusobno, što dovodi do stvaranja sistema koji je nejasan korisniku jer mu nudi suviše
(nepotrebnih) opcija na jednoj strani.
Navigacioni sistem treba iskoristiti da se sadržaj sajta prezentuje na najbolji mogući
način, čime je korisnik oslobođen problema snalaženja i može da se usredsredi na sam
sadržaj. Formiranje navigacionog sistema se sastoji u odlučivanju šta je važno, odnosno
definisanju oraganizacione šeme sajta na osnovu njegovog sadržaja. Potrebno je napraviti
navigacioni sistem koji obezbeđuje brz pregled sadržaja i logične veze između kategorija.
Veoma dobro je obezbediti i to da posetilac lako razume i svoju poziciju u hijerarhiji sajta, tj. da
zna na kom mestu u okviru sajta se nalazi. Danas se nalazimo u situaciji da svaki sajt ima
svoj navigacioni sistem različit od drugih. Standardi u ovoj oblasti još nisu definisani mada se
pojedini elementi pojavljuju na većini sajtova i vremenom će možda i biti standardizovani.
Svaki Web sajt ima različitu organizaciju. Veliki broj sajtova organizovan je kao
portal, najpoznatiji je Yahoo.com, a na našim prostorima Krstarica.com, odnosno neka vrsta
oglasne table sa mnoštvom kategorija koje olakšavaju traganje za željenim informacijama.
Korisnici uglavnom retko čitaju dugačke tekstove i većina njih koji traže konkretnu informaciju
neće čitati ceo tekst zbog samo jedne konkretne informacije. Manje od 10% ljudi ikada i
pogleda Web stranu do kraja, tj. zadržavaju se praktično na vrhu početne srane. Informacije
koje se nalaze na vrhu strane imaju veliki uticaj na to kako će korisnik shvatiti sadržaj sajta i
kako će se snaći na njemu. Stoga informacije treba organizovati tako da se i većina
navigacionih elemenata na Web stranama nalazi na početku strane. Na ovaj način se najbolje
prezentuje sadržaj samog sajta.

-9-
Diplomski rad Poslovne Web prezentacije

Svi kompleksni sajtovi u svojoj osnovi imaju hijerarhijsku organizaciju. Na osnovu


uspostavljenih hijerarhijskih odnosa i veza između kategorija u okviru sajta izgrađuje se njegov
navigacioni sistem. Web dokumenti zahvaljujući HTML tagovima imaju jednu važnu
karakteristiku, a to je da se svi mogu povezati sa svima. Jedan dokument može biti vezan sa
bilo kojim drugim dokumentom na Webu. Na ovaj način stvorena je mreža veza između
dokumenata na Internetu. Zbog toga je jedan od najvećih izazova u prezentovanju informacija
kako logički povezati Web dokumente i kako kreirati interesantan i razumljiv Web sajt.

Sekvenca
Najjednostavniji način organizacije informacija je
sekvenca, gde se informacije prezentiraju logički, onako kako
slede jedna za drugom. To je u stvari jedna serija naslova od opštih
ka specifičnim. Ovakva organizacija primenljiva je samo na malim Sl. 2.1. Sekvencioni način
Web sajtovima koji nemaju mnogo informacija, a najbolje ga je primeniti kod organizacije
sajtova koji se
bave samo jednom specifičnom oblašću, što je pogodno za linearnu strukturu.

Mreža
Da bi se uspešno koristio ovaj način organizacije
pojedine jedinice u mreži moraju da imaju strogo istu strukturu
naslova i podnaslova. Naslovi najčešće nemaju uspostavljenu
neku određenu hijerarhiju važnosti, dok podnaslovi moraju biti isti.
Ovaj oblik organizacije često se primenjuje kod kompleksnih
sajtova, jer omogućava vertikalno i horizontalno kretanje po njemu,
čime se dobija potpun pregled sadržaja. Sl. 2.2. Način organizacije u vidu
mreže
Hijerarhija
Hijerarhijska organizacija je jedna od najboljih načina
organizacije, naročito ako se radi o velikoj količini informacija. Na
sajtovima sa ovakvom organizacijom informacija snalaženje je vrlo
jednostavno. Međutim hijerarhijska organizacija se ipak ne može
upotrebiti kao jedini vid organizacije. Najčešće je u kombinaciji sa još
nekim oblikom organizacija kako bi se omogućila vertikalna i
horizontalna kretanja po sajtu.
Sl. 2.3. Hijerarhijski način
organizacije
Web
Ovaj način organizacije je čest kod kompleksnih sajtova sa
obimnim sadržajem. Kategorije i podkategorije sajta su povezane na
složen način stvarajući nešto poput mreže veza između strana. Iako
na prvi pogled ovaj tip organizacije izgleda težak za razumevanje, on
to nije jer se veze između strana zasnivaju na njihovoj logičkoj
povezanosti. Kod veće količine informacija ovaj način je neophodan.
Sl. 2.4. Složeni način
organizacije – Web

Kompleksni način

- 10 -
Diplomski rad Poslovne Web prezentacije

Većina kompleksnih sajtova objedinjuje sve navedene tipove organizacije


informacija. Na taj način eliminišu se nedostaci pojedinih tipova i stvara se dobra osnova za
izgradnju navigacionog sistema.

Sl. 2.5. Način organizacije sajta u zavisnosti od njegove složenosti

U zavisnosti od kompleksnosti sajta menja se njegova organizaciona struktura. Kod


malo složenih sajtova preovladava linearna struktura i sekvencijalni način organizacije, dok se
kod kompleksnih sajtova u osnovi nalazi hijerarhijska struktura, koja se kombinuje sa još
nekim tipom organizacije u zavisnosti od sadržaja sajta.

Od svih navedenih tipova organizacije hijerarhija je jedini koji je zastupljen na


svakom sajtu, bez obzira na njegovu složenost i to je osnovni način organizacije na kom
počivaju svi složeniji. Bez obzira kakav sajt je u pitanju, informacije koje se prezentuju moraju
biti hijerarhijski organizovane.

Hijerarhija je moćan način organizovanja podataka na kompleksnim sajtovima.


Međutim ona može biti limitirajući faktor u navigacionom sistemu. Ukoliko se informacije
organizuju hijerarhijski to znači da je moguće samo vertikalno kretanje u okviru strukture sajta.
Ova karakteristika svakako nije dobra za sisteme koji moraju da obezbede bočnu navigaciju
(lateral navigation) između različitih oblasti sajta koje su u istom nivou, kao i vertikalnu
navigaciju (vertical navigation) između oblasti sajta koje nisu u istom nivou.
Kompleksni Web sajtovi moraju imati navigacioni sistem koji će objediniti sve tipove
navigacije, pa u ovom slučaju hijerarhijska organizacija mora biti samo osnov navigacionog
sistema, jer bez ostalih navigacionih elemenata neće dobro funkcionisati [7].

3. Jezici kojima govori Web

- 11 -
Diplomski rad Poslovne Web prezentacije

Web sajtovi su mešavina HTML fajlova, grafičkih fajlova, skriptova, baza podataka i
drugih tipova fajlova, programa i komponenti.
HTML ili Hyper Text Markup Language je jezik koji je definisan pomoću Standard
Generalized Markup Language – SGML. HTML specifikacija je formalno definisana pomoću
SGML Document Type Definition. DTD definiše dozvoljene HTML oznake i atribute.
VBScript je podskup Visual Basic programskog jezika, koji je kreirao Microsoft.
Umesto da se kompajlira on se interpretira, što znači da se konvertuje u mašinski jezik dok ga
pretraživač ili server čita. Ovo čini da se on izvršava mnogo sporije nego predhodno
kompajlirani program (kao i bilo koji inretpretirani jezik). Ipak, programi su uglavnom kratki i
brzo se izvršavaju tako da se razlika i ne primećuje.
Active Server Pages je viša tehnologija nego programski jezik i obezbeđuje
ugrađene objekte koji proširuju mogućnost programera da lako radi sa HTML jezikom.
JavaScript je vrsta skript jezika koju je razvila firma Netscape Communications. Java
je programski jezik namenjen internet programiranju, a njegovim pojednostavljenjem,
saradnjom Netscapea i Suna, dobijen je JavaScript kao podskup Jave.
JScript je verzija JavaScripta kompanije Microsoft i nazivaju ga moćnim jezikom za
pisanje skriptova koji je posebno namenjen za Internet.
SQL označava Structured Query Language ili Standard Query Language. Specijalno
je razvijen za interakciju sa relacionim bazama podataka. SQL je univerzalni jezik za pristup
bazama podataka i koristi se u svim popularnim DBMS ( ili RDBMS, Relational DataBase
Menagement System, odnosno sistem za upravljanje relacionim bazama podataka)
proizvodima.
HTML jeste osnovni alat za konstrukciju Web stranica. Jezici za pisanje skriptova
dodaju programabilnu funkcionalnost na Web stranice. Ne mora se biti stručnjak za
programiranje na svakom od ovih jezika. Postoji veliki broj dostupnih alata koji olakšavaju rad
sa njima. Veoma mali broj ljudi danas piše HTML kodove ručno. Umesto toga, koriste se
FrontPage ili Dreamweaver koji obavljaju veliki deo posla. Ipak treba poznavati svaki od ovih
jezika i znati njihove jake i slabe tačke, a posao koji ostaje je naterati ih da rade zajedno.

3.1. Ratovi pretraživača


HTML (Hyper Text Markup Language) je danas jako dobro poznata skraćenica.
HTML je dostigao veliku popularnost kao osnovni jezik za kreiranje Web stranica, prvenstveno
zbog svoje lakoće i jednostavnosti. Međutim, svi popularni WWW čitači, kao što su Internet
Explorer i Netscape Navigator pre svih, uvodili su svoje ekstenzije HTML-a, koje su trebale da
ih dovedu u položaj monopliste na mreži. HTML ekstenzije su ustvari nesaglasne HTML
oznake koje mogu odgovarajuće da se interpretiraju jedino od strane pretraživača
proizvođača, osim ako drugi proizvođač pretraživača ne ugradi podršku za ove oznake u svoj
proizvod. U ratu za dominaciju na tržištu, veliki igrači retko prihvataju ekstenzije jedni od
drugih. Da bi konfuzija bila još veća različite verzije pretraživača se takođe razlikuju u svojoj
sposobnosti da interpretiraju oznake, i ponekad oznake postaju zastarele i zamenjuju se
efikasnijim oznakama. Upravo iz razloga sto se specifikacija HTML jezika nije baš mnogo
poštovala, korisno je znati kako najpopularniji pretraživači interpretiraju oznake i kako Web
stranica izgleda u njihovom prikazu, ili se može desiti da veliki broj korisnika i posetilaca sajta
bude odbijen [2].

4. Uvod u HTML

- 12 -
Diplomski rad Poslovne Web prezentacije

HTML dokument je satavljen od HTML elemenata, tagova ili direktiva i teksta. Ovi
elementi su u stvari instrukcije koje govore Web čitaču šta treba da preduzme i kako da
prikaže tekst ili grafiku. HTML tagovi se pišu između matematičkog simbola 'manje' (<) sa leve
strane i simbola 'veće' (>) sa desne strane. Većina tagova, direktiva, je uparena, tj. ima svoj
zatvarajući ekvivalent koji kazuje čitaču na kraj teksta na koji se određena instrukcija odnosi.
Zatvarajući tag ima istu oznaku kao i početni s tom razlikom što se ispred direktive nalazi i
kosa crta (/). Na primer:
<element> tekst </element> dalji tekst za koji ova direktiva ne važi

Svi elementi mogu imati atribute kojima se opisuju dodatni zahtevi. Atributi se pišu
unutar prve oznake elementa.
<element atribut1=”vrednost” atribut2=”vrednost”> tekst </element> dalji tekst.

HTML tagovi su 'case insesitive' tj. svejedno je da li ih pišete velikim ili malim
slovima. Ipak, uobičajeno je da se poštuje konvencija i da se tagovi pišu velikim slovima. Već
je rečeno da svi Web čitači ne podržavaju sve elemente. Element koji nije podržan
jednostavno će od strane takvog browsera biti ignorisan. Osim toga, ignorišu se svi dodatni
razmaci i prazni redovi. Komentari se pišu unutar oznaka “<!-“ i “->”. Sve između ovih oznaka
browser neće prikazati. U HTML-u je dozvoljeno ugnježdavanje direktiva, ali ne i preklapanje.

ispravno: <element1><element2> tekst </element2></element1> (ugnježdavanje)


neispravno: <element1><element2> tekst </element1></element2> (preklapanje)

HTML jeste osnovni jezik za kreiranje Web stranica, međutim to nije njegova jedina
primena. Gotovo svi HELP sistemi danas kao osnovu koriste HTML fajlove. Microsoftov HTML
Help Workshop je jedan od programa za pravljenje helpova i pomoću njegovog vrlo
jednostavnog korisničkog interfejsa. HTML Help Workshop dozvoljava povezivanje različitih
vrsta fajlova i njihovo spajanje u jedinstven help sistem. Primer ovakve upotrebe HTML
dokumenata je i Help za programski paket PAK. Više o ovom programu i izradi helpa možete
naći u seminarskom radu Izrada Help dokumenata uz pomoć programa HTML Help Workshop
iz predmeta Metode razvoja inženjerskog softvera, rađen decembra 2000.

Sl. 4.1. Help for PAK-S. Primer offline upotrebe HTML dokumenata.

- 13 -
Diplomski rad Poslovne Web prezentacije

4.1. Struktura HTML dokumenta


HTML dokument zahteva jasnu podelu na zaglavlje i telo dokumenta. To su jedini
elementi koji se eksplicitno zahtevaju da bi dokument odgovarao standardu. Svaki HTLM
dokument mora da ima sledeću osnovu:

<HTML>
<HEAD>
<TITLE> zaglavlje
naziv dokumenta dokumenta
</TITLE>

</HEAD>

<BODY> telo
dokumenta
sve ono što čini stranicu

</BODY>

</HTML>
Sl. 4.2. Struktura HTML dokumenta.

4.2. Osnovni elementi


<HTML>…</HTML>
Svaki HTML dokument po standardu počinje oznakom <HTML> i obavezno se
završava sa </HTML>. Prva oznaka ukazuje WWW čitaču na početak HTML dokumenta, a
druga na njegov kraj, posle koje ne treba da bude nikakvog teksta. Unutar para oznaka HTML
treba da se nađu samo parovi oznaka HEAD i BODY koji označavaju zaglavlje i telo
dokumenta.

<HEAD>...</HEAD>
Zaglavlje svakog HTML dokumenta je skup informacija o dokumentu, koje se ne
moraju navoditi redom. One direktno ne utiču na prikaz sadržaja HTML dokumenta, ali daju
važne informacije WWW čitaču. Unutar njega mogu se naći sledeći elementi:

<BASE> dozvoljava da se tačno specificira bazna adresa HTML dokumenta. Ovaj


element se ne javlja u paru i ako se koristi mora se javiti unutar granica elementa Head. Kada
bazna adresa nije specificirana, WWW čitači koriste URL koji je iskorišćen za pristup
dokumentu. Element Base ima jedan atribut HREF koji identifikuje URL:
<BASE HREF=”http://www.mfkg.kg.ac.yu/index.htm”>

<ISINDEX> dozvoljava pretraživanje dokumenta po ključnoj reči. Ovaj element


saopštava WWW čitaču da je dokument indeksni dokument, što znači da korisnik osim čitanja
može da pretražuje dokument po ključnim rečima. Isindex je ranije imao veću upotrebu, danas
se najčešće koriste forme za prosleđivanje zahteva za pretraživanje HTTP serverima.
<LINK> ukazuje na veze između dokumenata.

- 14 -
Diplomski rad Poslovne Web prezentacije

<LINK REL=”home” HREF=” http://www.mfkg.kg.ac.yu/index.htm”> Ova direktiva


govori da je matični dokument prezentacije naveden iza HREF. Nema zatvarajući tag.
<LINK HREF="echowebcss.css" type=text/css REL=stylesheet > Omogućava
upotrebu stilova čija se definicija nalazi u drugom fajlu.

<TITLE> određuje naslov dokumenta. Svaki HTML dokument mora da ima element
Title. Koristi se za identifikovanje sadržaja dokumenta i najčešće se ispisuje u naslovnoj liniji
browsera koji se koristi. One se ne prikazuje u tekstu samog dokumenta. Element Title se
mora nalaziti u zaglavlju dokumenta i ne sadrži ništa osim teksta. Za jedan dokument
dozvoljen je samo jedan naslov. Naslov je jedini element koji se traži standardom HTML-a dok
su ostali opcioni.
Dužina naslova nije ograničena, ali kod nekih WWW čitača se on neće prikazati u
celosti. Da bi izbegli tu mogućnost, naslovi bi trebali da budu kraći od 64 karaktera. Takođe,
treba voditi računa i da suviše kratak naslov može biti potpuno van konteksta samog
dokumenta.

<META> daje specifične informacije o dokumentu koje može koristiti server ili WWW
klijent. Element Meta se koristi unutar elementa Head da bi se uključile Meta-informacije o
dokumentu koje se ne definišu drugim HTML elementima. Takve informacije se mogu izdvojiti
od servera za korišćenje i identifikovanje, indeksiranje i prosleđivanje u kataloge posebnih
informacija. Element ima tri atributa:
HTTP-EQUIV povezuje element sa HTTP serverom,
NAME definiše naziv Meta-informacije,
CONTENT definiše sadržaj Meta-informacije.

Nikako se ne sme koristiti Meta element da bi se definisale informacije koje su već


povezane sa postojećim HTML elementima.
Na primer: <META NAME=”title” CONTENT=”naslov dokumenta”>.
Generatori WWW prezentacija kao što je Front Page, koriste Meta element za
davanje informacije kojim je alatom kreirana prezentacija:
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">.
Meta elementom mogu biti definisane i ključne reči, sledećom sintaksom:
<meta name="keywords" content="Mašinski; Fakultet; Kragujevac">

<BODY>…</BODY>
Telo HTML dokumenta sadrži sav tekst i putanje do slika koje čine stranu, zajedno
sa svim HTML tagovima koji kontrolišu izgled stranice. Element Body ne utiče direktno na
prikaz dokumenta u prozoru browsera, ali se u specifikaciji standarda zahteva njegovo
prisustvo. Unutar ovog elementa može se postaviti više atributa.

BACKGROUND je jedan od najznačajnijih atributa elementa Body. Njegova svrha je


da specificira URL adresu slike koja će se iskoristiti kao pozadina dokumenta. Zahvaljujući
ovom elementu Web stranice su značajno dobile na kvalitetu prikaza. U slučaju da slika ne
može da pokrije celu površinu stranice, ona se ponavlja, tako se pomoću malih slika mogu
dobiti veoma interesantne pozadine.
<BODY BACKGROGUND=”ime_slike.jpg”>

BGPROPERTIES je atribut specifičan za Microsoft IE. On omogućava da se doda


vodeni žig HTML dokumentu, time što će se fiksirati pozadinska slika tako da se ne skroluje
kako je to uobičajeno. To se postiže dodeljivanjem vrednosti Fixed atributu Bgpropreties u
elementu Body:

- 15 -
Diplomski rad Poslovne Web prezentacije

<BODY BCKGROUND=”Ime_slike.jpg” BGPROPERTIES=”FIXED”>

Netscape Navigator ignoriše ovaj element i skroluje sliku bez obzira na njegovo
prisustvo. Ako pozadinska slika ne može da se učita iz ma kog razloga, boja pozadine će biti
postavljena na boju specificiranu atributom bgcolor.

BGCOLOR menja boju pozadine dokumenta prilikom prikaza, bez potrebe za


korišćenjem posebnih slika i atributa Background. Kao vrednost atributa Bgcolor koristi se
heksadecimalna kombinacija crvene, zelene i plave boje. Microsoft Internet Explorer podržava
16 boja koje se mogu referencirati po imenu, Netscape podržava 140 pojedinačnih imena boja.
Međutim, oni su podržani samo od strane Netscape Navigatora, dok drugi WWW čitači neće
umeti da prikažu odgovarajuću boju, ukoliko nije navedena korišćenjem odgovarajućeg koda u
obliku #rrggbb.
<BODY BGCOLOR=”#rrggbb”>

Kada se jednom postavi boja pozadine, potrebno je boju teksta uskladiti sa njom,
kako bi se uspostavio odgovarajući kontrast, da bi se tekst video. Obzirom na to da su kontrole
boje atributi elementa Body, oni mogu da se postave samo jednom za ceo dokument.

TEXT se koristi za kontrolu boje normalnog teksta u dokumentu. To se u principu


odnosi na sav tekst koji nije specijalno obojen da ukaže na link. Format atributa Text je isti kao
i za atribut Bgcolor.
<BODY TEXT=”#rrggbb”>

LINK, VLINK i ALINK kontrolišu boju linkova. VLINK kontroliše boju posećenog
linka, ALINK označava aktivan link. Osnove boje su za LINK plava, za VLINK purpurna i za
ALINK crvena. Korišćenjem ovih atributa boje se mogu promeniti, format je isti kao i za
predhodna dva atributa.
<BODY LINK=”#rrggbb” ALINK=”#rrggbb” VLINK=”#rrggbb”>

LEFTMARGIN omogućava da se podesi leva margina dokumenta. Kao vrednost


atributa stavlja se broj piksela za koji će se dokument odvojiti od leve strane prozora u kom je
prikazan dokument:
<BODY LEFTMARGIN=”50”>

TOPMATGIN omogućava podešavanje gornje margine dokumenta. Vrednost


atributa ima isto značenje kao i u prethodnom atributu, a sintaksa je ista:
<BODY TOPMARGIN=”50”>

Oba ova atributa su specifična za Microsoftov Internet Explorer. Najčeće se obe


vrednosti specificiraju na nultu vrednost. Da biste Netcsape Navigator nagovorili da ove
vrednosti postavi na nulu, morate dodati još dva atributa: MARGIHWIDTH i MARGINHEIGHT i
njima dati vredost nula, ili već po želji. Tako, ako želite da oba pretraživača pravilno prikažu
vašu stranicu morate dodati sva četiri atributa:
<BODY TOPMARGIN=”0” LEFTMARGIN=”0” MARGINWIDTH=”0” MARGINHEIGHT=”0”>

4.3. Elementi za formatiranje teksta

- 16 -
Diplomski rad Poslovne Web prezentacije

Elementi za formatiranje blokova teksta koriste se za formatiranje čitavih pasusa


teksta u HTML dokumentu, pre nego pojedinačnih karaktera. Koriste se u telu dokumenta,
između oznaka Body.

<Hi>…</Hi> gde i uzima vrednost od 1 od 6, formatira šest nivoa naslova. Element


naslova implicira promenu fonta, veličine, pozicije naslova, novi paragraf pre i posle naslova.
Svaki nivo naslova se drugačije prikazuje u Web čitačima i mogu se koristiti proizvoljnim
redom. Naslovi imaju pozicioni atribut ALIGN sa parametrima left, rihgt i center, koji
pozicioniraju naslov uz levu ili desnu marginu, ili ga centriraju, respektivno.

<HR> prikazuje horizontalnu liniju (Horizontal Rule) na strani i ona deli sekcije
teksta. Ovaj element nema zatvarajuću oznaku. Ima više opcionih atributa koji detaljno
specificiraju kako liniju treba prikazati.

SIZE omogućava autoru da označi koliko debela treba da bude linija. Atribut može
uzeti neku celobrojnu vrednost: <HR SIZE=”2”>.

WIDTH specificira širinu linije. Standardno, linija se prikazuje preko cele stranice.
Vrednost atributa može se zadati u pikselima (apsolutno) ili u procentima u odnosu na širinu
strane (relativno): <HR WIDTH=”broj/procenat”>.

ALIGN pozicionira liniju uz levu ili desnu marginu ili je pak postavlja na centar
stranice, zavisno od parametra koji se dodeli ovom atributu, left, right ili center.

NOSHADE se koristi kada se želi da linija ne bude osenčena, ovaj atribut nema
parametre.
COLOR dozvoljva da se dodeli boja liniji. To se postiže postavljanjem parametra koji
može biti logičko ime koje podržava MS IE ili heksadecimalni rrggbb triplet.
Ovaj artibut je specifičan za IE i nije podržan od strane Netscapea, koji liniju
prikazuje u osnovnoj sivoj boji.

<BR> ukazuje da se tekst koji sledi prebacuje u novi red. Nova linija se pozicionira
kao i ona koju smo prekinuli. Ovaj element nema zatvarajuću oznaku.

<P>…</P> označava da se tekst posmatra kao poseban paragraf i određuje


njegovo pozicioniranje. Tačan stil se ne postavlja ovim elementom, već definicijom stilova.
Tipično paragraf je okružen prostorom od jedne ili pola linije. Pozicioniranje paragrafa postiže
se atributom ALIGN koji može imati već ranije pomenute vrednosti, left, right i center:
<P ALIGN=”left”>sav tekst u paragrafu biće poravnat uz levu stranu prikaza</P>

Ukoliko se ne navede vrednost atributa Align podrazumeva se da je ona Left, osim


toga nekadašnji način prikaza paragrafa sa samo početnim tagom <P> bez zatvarajuće
oznake </P> i dalje podržavaju svi WWW čitači.

<PRE>…</PRE> prikazuje već preformatiran tekst. Ovaj element ukazuje na to da


se tekst koji se nalazi između njegovih granica prikazuje kao blok teksta sa neproporcijalnim
fontom i pogodan je za prikaz teksta koji je već ranije formatiran.

WIDTH je opcioni atribut koji specificira maksimalni broj karaktera u liniji i


dozvoljava browseru da za prikaz tog bloka teksta koristi font potrebne veličine. Ako ovaj
atribut nije prisutan 80 karaktera u redu se pretpostavlja.

- 17 -
Diplomski rad Poslovne Web prezentacije

Prekid reda unutar bloka prikazuje se kao početak novog reda. Element <P> ne
treba koristiti unutar bloka, a ako se koristi prikazuje se kao početak novog reda. Može se
postaviti hipertekst link, a elementi koji definišu formatiranje paragrafa, kao što su naslovi, ne
smeju da se koriste, ne preporučuje se ni korišćenje horizontalnih tab karaktera.

<NOBR>…</NOBR> specificira da se reči ne mogu prelomiti i znači No Break,


nema prekida. To znači da se u tekst unutar ovih oznaka ne može postaviti znak za prelom
teksta <BR>. Ovaj tag je neophodan za one nizove karaktera koje ne želimo da prekidamo, ali
se preporučuje njegova veoma pažljiva upotreba.

<WBR> specificira da se reč može prelomiti u novi red i znači Word Break.
Upotrebljava se u slučajevima kada se unutar sekcije <NOBR> zahteva prelom u novi red ali
na tačno određenom mestu. Za razliku od elementa <BR> on ne forsira prelom.

<BASEFONT> određuje osnovnu veličinu fonta za ceo dokument. Raspon između


koga se može postaviti veličina fonta je od 1 do 7. Ovaj element ima opcione atribute:
<BASEFONT SIZE=”3” FONT=”Arial” COLOR=”#336699”>

FACE atribut dozvoljava primenu tačno određenog tipa fonta za osnovni prikaz
teksta u dokumentu.

COLOR postavlja osnovnu boju karaktera. Boja se može postaviti korišćenjem


rezervisanih reči ili preko heksadecimalnog rrggbb koda.

<BASEFONT SIZE=…> je podržan od strane Netscate Navigatora, dok su atributi


Face i Color specifični za Internet Explorer.

Ovim elementom se definiše font, veličina i boja svih karaktera dokumenta, Međutim
ako je to potrebno, pojedinim delovima teksta se svi ovi parametri mogu promeniti korišćenjem
elementa FONT.

<FONT…>…</FONT> postavlja veličinu tip ili boju fonta i odnosi se samo na prikaz
teksta koji je unutar njegovih granica. Ima iste atribute kao i Basefont.

SIZE određuje veličinu fonta kojim će se tekst prikazati. Može uzeti vrednost od 1
do 7. Osnovna veličina fonta je 3, ako nije promenjena sa Basefont Size elementom. Vrednost
koja se dodeljuje veličini fonta može ispred imati karakter '+' ili '-', što ukazuje na to da se
postavlja relativno u odnosu na Basefont Size dokumenta.
<FONT SIZE=”5”> menja veličinu fonta na 5 </FONT>
<FONT SIZE=”+2”> menja veličinu fonta na osnovnu +2 </FONT>

COLOR atribut kojim se definiše boja teksta između FONT tagova može se zadati
preko heksadecimalnog koda ili alternativno, dodelom naziva jedne od 16 predefinisanih boja:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver,
Yellow, Aqua.

Netscape podržava 140 pojedinačnih naziva boja. Upotrebu svih tih naziva podržava
samo Netscape, dok ostali čitači neće umeti da prikažu tekst odgovarajućom bojom. Umesto
naziva ipak je pogodnije koristiti njegov ekvivalent u obliku heksadecimalnog koda.

- 18 -
Diplomski rad Poslovne Web prezentacije

FACE postavlja tip fonta koji treba da se koristi da bi se prikazao tekst između
granica elementa Font. Da bi se navedeni font upotrebio za prikaz, isti treba da je instaliran na
računaru korisnika. Najčešće se definiše više fontova, tako da se, ako korisnik nema prvi font
iz liste, tekst prikazuje u drugom po redu na listi itd.
<FONT FACE=”Arial”, “Times New Roman”, “Vedrana”>tekst</FONT>

<DIV>…</DIV> dozvoljava centriranje ili levo/desno poravnanje teksta. Prema


specifikaciji HTLM-a on se koristi sa atributom CLASS, da bi se imenovao deo teksta na koji
se primenjuje određeni stil.

<MARQUEE>…</MARQUEE> element koji skroluje tekst koji se nalazi između


njegovih tagova. Ima veliki broj atributa koji služe za definisanje i precizniju kontrolu ove
opcije.

ALIGN atribut koji može biti postavljen na Top, Midle ili Bottom i precizira da li tekst
oko pokretne trake treba da bude postavljen pri vrhu, na sredini ili na donjem delu trake.

BEHAVIOR može biti postavljen na Scroll, Slide ili Alternate. Određuje kako će se
tekst pometati. Ako nije naveden podrazumeva se Scroll što znači da će se tekst krenuti sa
jedne strane na drugu dok potpuno ne nestane, a zatim se ponavlja isto. Prilikom
podešavanja na Slide tekst se pomera sa jedne na drugu stranu i zaustavlja se čim dotakne
drugu stranicu. Alternate znači da će se tekst neprekidno pomerati sa jedne na drugu stranu,
napred-nazad.

BGCOLOR određuje pozadinsku boju trake, definiše se na isti način kao kod ostalih
elemenata.

DIRECTION određuje na koju stranu će se skrolovati tekst. Ako nije definisan


podrazumeva se vrednost Left, što znači da će se tekst skrolovati sa desne na levu stranu.
Ovaj atribut može biti postavljen i na Right i u tom slučaju tekst će ići sa leve na desnu stranu.

HEIGHT određuje visinu trake sa porukom, i zadaje se u pikselima ili relativno u


procentima u odnosu na širinu ekrana.

WIDTH određuje širinu trake i takođe, može se zadati u pikselima ili procentima.

HSPACE određuje levu i desnu marginu između trake i okolnog teksta ili slika.
Zadaje se u pikselima.

VSPACE određuje gornju i donju marginu, vrednost se zadaje u pikselima.

LOOP određuje broj pojavljivanja teksta, ako nije definisan, podrazumeva se infinite,
što znači da će se tekst neprekidno pojavljivati.

SCROLLAMOUNT određuje razmak između dve pojave skrolujućeg teksta i zadaje


se vrednost u pikselima.

SCROLLDELAY određuje broj milisekundi između pojavljivanja teksta, odnosno,


definiše brzinu trake.

- 19 -
Diplomski rad Poslovne Web prezentacije

Ovaj element je podržan samo od strane Internet Eksplorera. Kao alternativa za


korisnike Netscapea može se koristiti element BLINK.

<BLINK>…</BLINK> prikazuje tekst koji treperi, naizmenično se 'pali' i 'gasi'.


Ovaje element podržava Netscape, Internet Explorer ga ignoriše.

Da bi ste bili sigurni da ce se u oba browsera tekst koji želite biti istaknut, možete
koristiti oba ova elementa za isti deo teksta, a kako će se on prikazati zavisiće od Web čitača.
<MARQUEE><BLINK> tekst </BLINK></MARQUEE>

4.4. Hipertekst veze - linkovi


Osnovna snaga HTML-a nalazi se u sposobnosti povezivanja delova teksta ili slike,
sa drugim dokumentom, ili slikom, animacijom i td. Taj deo teksta je obično označen od strane
čitača da bi se sugerisalo da tu postoji hipertekst veza.
Uslovno rečeno postoje tri vrste linkova u HTML dokumentu. Prvu vrstu bi činili
linkovi kojima možemo 'skočiti' do nekog drugog dela iste te stranice u kojoj se link i nalazi
(npr. kad dođete do kraja stranice možete napraviti link koji će vas vratiti na vrh stranice).
Drugu vrstu bi činili linkovi do neke druge stranice u okviru iste te prezentacije. Treću vrstu bi
činili linkovi do stranica u nekoj sasvim drugoj prezentaciji koja može biti postavljena na
serveru koji se nalazi na drugoj strani sveta.

<A>…</A> je jedan od najznačajnijih elemenata HTML-a. Predstavlja oznaku


hipertekst veze i označava da će tekst unutar njegovih granica biti označen kao veza ka
drugom dokumentu. Obavezno ide sa zatvarajućim tagom koji označava kraj teksta veze. Sam
za sebe bez atributa ovaj element ne predstavlja ništa. Opcionih atributa ima više, a obavezno
se mora pojaviti jedan od dva najvažnija Href ili Name.

HREF označava vezu ka drugom dokumentu ili mestima u istom ili drugom
dokumentu, odnosno tekst postaje hipertekst.
<A HREF=”ime_dokumenta.htm”>tekst veze</A> običan tekst...

Ovo je najjednostavniji slučaj kada je dokument u istom direktorijumu. Datoteka koju


pozivamo može se nalaziti i u nekom drugom katalogu, pa se u zavisnosti od tog zadaje
relativna ili apsolutna adresa. Pri tome se koristi sintaksa sa desnim kosim crtama / i treba
voditi računa o velikim i malim slovima. Preporuka je da kada je god to moguće navoditi
relativne adrese:
<A HREF=”poddirektorijum/ime_dokumenta.htm”>
<A HREF=”../drugi_direktorijum/ime_dokumenta.htm”>

Varijacija na temu je pozivanje dokumenata sa slikama. Ako je referencirana


datoteka zapravo slika, klik na link će prikazati tu sliku u praznom prozoru.
<A HREF=”slika.jpg”>

Sledeći korak je referenciranje dokumenata na drugim računarima, uz korišćenje


raznih mrežnih protokola. Tada se navodi kompletna URL adresa, koja sadrži naziv protokola,
adresu servera i putanju do dokumenta:
<A HREF=”http://zmaj.etf.bg.ac.yu/Etf/Rc/index.html”>

- 20 -
Diplomski rad Poslovne Web prezentacije

U mnogim slučajevima se ime datoteke izostavlja, a putanja se završava imenom


kataloga iza koga je kosa crta /. Tada se učitava fajl sa podrazumevanim nazivom koji se
nalazi u tom katalogu. Na većini servera podrazumevani naziv je index. htm ili default.htm, što
treba imati u vidu pri kreiranju dokumenta.
Kako se često referenciraju adrese pojedinačnih korisnika na serveru, da bi se
naglasilo da se radi o korisničkom imenu, iza mrežne adrese se stavlja znak tilda ‘~'.

NAME atribut koji omogućava da se napravi oznaka na nekom mestu u dokumentu


na koje želimo da pređemo kad kliknemo na odgovarajući link. Oznaka se dobija stavljanjem
atributa Name u <A> tag.
<A NAME=”ime”>ulaz</A>

Između početnog <A NAME="ime"> i završnog </A> taga može stajati bilo koji
element stranice (tekst, slika), a ne mora stajati ništa. Ovaj tag ne proizvodi nikakav vidljiv
efekat u HTML dokumentu - on deluje u pozadini dokumenta i služi browseru da se lakše
orijentiše.

Dakle, ako želimo da povežemo neko mesto u jednom dokumentu sa tačno


određenim mestom u drugom, a ne sa njegovim početkom, moramo da imenujemo vezu. U
tom drugom dokumentu ćemo na mestu na koje želimo da se prebacimo postaviti 'ulaz'
korišćenjem atributa Name: <A NAME=”skok iz prvog”>mesto ulaza</A>.

Ako pravimo vezu u prvom dokumentu, pored imena HTML dokumenta na koji se
prebacujemo, pišemo i ime ulaza u drugom. Ako ovo ime ulaza ne navedemo, link se ponaša
uobičajeno, prebacuje nas na početak dokumenta. Potrebno je napisati:
<A HREF=”ime drugog dokumenta.htm#skok iz prvog”>veza</A>.

Ako sada kliknemo na reč veza u prvom dokumenatu prebacujemo se na 'mesto


ulaza' u drugom dokumentu, a ne na njegov početak. Isti postupak važi i za prebacivanje sa
jednog kraja stranice na drugi, s tim što se na mestu imena HTML dokumenta piše ime istog
tog dokumenta.

Na kraju, ovaj tag možemo iskoristiti kao link za pokretanje nove poruke u programu
za elektronsku poštu (npr. Outlook Express ili Netscape Messenger) u kojem će već biti
upisana željena adresa, a posetiocu prezentacije preostaje samo da otkuca tekst poruke i da
je pošalje. Ako je neka adresa recimo ime@ptt.yu odgovarajući kod bi glasio:
<a href="mailto:ime@ptt.yu"> pišite nam </a>

4.5. Rad sa slikama


Ono što WWW čini tako popularnim je kreiranje multimedijalnih prezentacija, a jedan
od najvažnijih delova čine upravo slike. Slike se ne kodiraju u HTML dokumentima, već se
navodi samo putanja do slike.
Skoro sve slike na Internetu se nalaze u GIF ili JPG (ili JPEG) formatu. U JPG
formatu se obično čuvaju kvalitetnije fotografije jer ovaj format podržava 16 miliona boja, a
fajlovi su dobro komprimovani, tako da se fotografije relativno brzo učitavaju. Sa druge strane
GIF format ima samo 256 boja, ali on ima tu prednost da mu se može zadati transparentnost
(providnost) i da se može animirati.

- 21 -
Diplomski rad Poslovne Web prezentacije

Netscape i Mosaic (kao i većina ostalih WWW čitača) podržavaju samo upotrebu
GIF i JPG slika unutar HTML dokumenta. Intrenet Explorer osim ovih podržava i PNG
(Portable Network Graphics) format kao i BMP slike omogućavajući veći izbor.
WWW čitači koji ne mogu da prikažu slike ignorišu element IMG, osim ako nije
naveden atribut ALT, koji se u tom slučaju prikazuje.

<IMG …> element pomoću koga se ubacuju slike u HTML dokument. Ima više
opcionih atributa, koji mogu a i ne moraju biti definisani, a atribut SRC mora biti prisutan.

SRC je atribut koji definiše naziv (i eventualno lokaciju) grafičkog fajla koji želimo da
ubacimo u dokument. Ako smo grafički fajl presnimili u isti direktorijum u kome se nalazi i
odgovarajući HTML fajl, dovoljno je da kao vrednost Src atributa stavimo samo naziv
odgovarajućeg fajla, ukoliko nije u istom direktorijumu, potrebno je navesti i putanju do njega.
<IMG SRC="naziv_slike.gif">

ALT ovaj atribut će u slučaju da browser posetioca iz bilo kog razloga ne učita sliku,
na onom mestu gde bi trebalo da stoji slika prikazati tekst koji napišete kao vrednost ovog
atributa. Ovo je korisno naročito ako se slika postavi kao link, jer će onda i u slučaju ne
učitavanja slike posetilac znati gde vodi taj link. Internet Explorer prikazuje ovaj tekst u malom
prozoru iznad slike ako se mišem zadržimo na slici. Preporučuje se da se uvek koristi ovaj
atribut i da se u njega upisuje tekst koji ukratko opisuje datu sliku. Na primer:
<IMG SRC="mfk.gif" ALT="Mašinski fakultet">

ALIGN atribut koji može imati veliki broj vrednosti koje određuju na koji način će se
prikazati slika i tekst koji sledi iza slike. Po defaultu slike su poravnate sa tekstom uz donju
ivicu.
left postavlja sliku uz levu marginu,
right postavlja sliku uz desnu marginu,
top poravnava sliku sa vrhom slova, sledeća linija teksta počinje ispod slike,
bottom poravnava sliku sa donjom ivicom slova (default),
middle postavlja sliku tako je donja ivica slova na sredini slike (sledeća linija teksta
počinje ispod slike),
absmiddle postavlja sliku tako da se sredina slike i sredina slova poklapaju (sledeća
linija teksta počinje ispod slike).

WIDTH i HEIGHT su atributi koji omogućavaju da ako nismo zadovoljni originalnom


veličinom slike da je možemo promeniti, a novu veličinu slike ćemo definisati pomoću ova dva
atributa. Vrednost širine i visine stranice se može zadati ili u piksekima ili u procentima. Ako
želim da slika zauzima 50% širine prozora i 30% visine prozora browsera, napisaću:
<img src="mfk.gif" height="50%" width="30%">

HSPACE i VSPACE atributi koji definišu prazan prostor između slike i okolnog teksta
(ili nekih drugih elemenata stranice). Vrednost ova dva atributa se zadaje u pikselima. Ako
želimo da širina margina oko slike bude 50 piksela, napisaćemo:
<img src="mfk.gif" hspace="50" vspace="50">

BORDER definiše debljinu okvira slike, a vrednost se zadaje u pikselima. Ako ne


želimo da slika ima okvir vrednost ovog atributa treba podesiti na 0.

- 22 -
Diplomski rad Poslovne Web prezentacije

LOWSCR atribut omogućava korišćenje dve slike na istom mestu. Čitači koji ne
prepoznaju ovaj atribut jednostavno će ga ignorisati. Browser prvo učitava sliku koja se navodi
kao vrednost ovog atributa, a pravu sliku će prikazati tek nakon što učita sve elemente strane.
<IMG SRC=”slika_druga.gif” LOWSRC=”slika_prva.jpg”>
Ovaj atribut je specifičan za Netscape, Internet Explorer ga ne podržava.

Mapiranje slika
Prvo rešenje problema implementacije slika osetljivih na dodir zahtevalo je
komunikaciju sa HTTP serverom da bi se obradile informacije o koordinatama slike koja je
odabrana i da bi se na osnovu toga generisao novi URL. Mapirane slike su podeljene na
područja i svakom području pridodat je neki URL. Mapa slike u kojoj su definisana područja i
sa njima povezani URL-ovi nalaze se na serveru. Kliktanjem na različita područja, biće pozvani
različiti dokumenti, a postupak se zasniva na aktivnoj pomoći servera kome se prenose
koordinate, na osnovu čega on vraća traženi dokument i poznat je kao mapiranje slika na
strani servera. Ovakav način implementacije opterećuje server dok korisnik ne vidi tačnu
adresu (URL) koji želi da dohvati. Microsoft Internet Explorer i Netscape Navigator
omogućavaju jednostavnije formu mapiranja slika, odnosno mapiranje slika na strani klijenta.
Ovakvim načinom rasterećuje se server, a mape slika su uključene u sam HTML dokument, čiji
je format jedinstven i nezavisan od servera.

USAMAP atribut koji ukazuje da se radi o mapiranju slike na strani klijenta. Vrednost
koja se dodeljuje argumentu određuje koja će se mapa koristiti za mapiranje slike, u formatu
sličnom atributu HREF kod hipertekst veze. Ako počinje se '#', podrazumeva se da se mapa
nalazi u istom HTML dokumentu kao i element IMG.
<IMG SRC=”slika.gif” USEMAP=”#ime_mape”>
Pored elementa IMG, potrebno je koristiti još dva elementa, MAP i AREA.

<MAP>…</MAP> definicija elementa Map može da se nalazi u istom dokumentu


kao i element slike uz koju se nalazi poziv za mapu (usemap).

NAME atribut koji definiše ime mape i mora strogo odgovarati nazivu unutar
elementa IMG.

<AREA> element koji definiše područja i nema zatvarajući tag. Ima više atributa,
HREF, NOHREF i opcioni SHAPE atribut koji određuje oblik područja i može biti:
Rect – pravougaonik, navode se koordinate levog gornjeg i desnog donjeg temena.
Circle – krug, navodimo koordinate centra kruga i poluprečnik.
Poly – mnogougaonik, navode se koordinate svih temena.
Default – van navedenih područja, ne navode se koordinate.
Ukoliko atribut Shape nije definisan podrazumeva se vrednost rect.

HREF atribur određuje url dokumenta koji treba da bude učitan ako se izabere to
područje. Ako se koristi relativno adresiranje, potrebno je voditi računa da se adresa odredi na
osnovu URL-a mape slike, a ne na osnovu dokumenta iz kojeg je pozvana mapa.

NOHREF atribut koji ukazuje da izbor tog područja neće izazvati nikakvu akciju.
Njegova upotreba je praktično nepotrebna.
Broj korišćenih elemenata Area je proizvoljan. U slučaju da se područja preklapaju
prednost će imati onaj koji je prvi definisan.

- 23 -
Diplomski rad Poslovne Web prezentacije

<MAP name="ime_mape">
<AREA HREF="dokument1.htm" SHAPE="rect" COORDS="153, 152, 299, 222">
<AREA HREF="dokument2.htm" SHAPE="circle" COORDS ="36, 58, 36">
</MAP>
<IMG SRC="ime_slike.jpg" USEMAP="#ime_mape">

DYNSRC (Dynamic Source) je još jedan od atributa elementa IMG i omogućava


uključivanje AVI (Audio Video Interleave) video klipova u HTML dokumente.
<IMG DYNSRC=”video_klip.avi” >
Ovaj atribut nije podržan od strane Netscapea.

WWW čitači koji ne mogu da prikažu video klip, mogu na tom mestu prikazati sliku,
definisanu atributom Src.
<IMG SRC=”slika.jpg” DYNSRC=”video_klip.avi” >

START atribut za video klipove određuje kada će se fajl prikazati. Njegove vrednosti
su Fileopen i Muoseover.

CONTROL atribut, ako je prisutan, biće prikazane kontrole ispod video klipa, nema
nikakve parametre.

LOOP određuje koliko puta će se video klip prikazati kada se aktivira. Ako je njegova
vrednost –1 ili infinite video će se prikazivati neprekidno.

4.6. Rad sa tabelama


Tabele se danas nalaze u standardu HTLM jezika i podržavaju ih sve novije verzije
čitača. Nametnuo ih je Netscape, a Inetrnat Explorer ima najpotpuniju podršku za njih. HTML
model tabela je jednostavan i fleksibilan. Ako se drugačije ne odredi, veličina tabela se
automatski određuje na osnovu sadržaja ćelija tabele i veličine prozora u kom treba da se
prikaže.
Tabele predstavljaju veoma zgodnu alatku za predstavljanje podataka na Web
stranicama. Pored klasičnog načina upotrebe tabela, u HTML-u se tabele koriste i da bi se
lakše kontrolisao razmeštaj teksta i slika na stranici. Ma koliko se trudili da poravnate tekst i
slike na stranici, uvek se može desiti da nekako izmiču kontroli, naročito kad se prelazi u neku
drugu rezoluciju od one u kojoj se prvobitno izradi stranica. Smeštanje elemenata stranice u
ćelije tabele predstavlja klasičan trik Web dizajnera. U ćelije tabele može se smestiti bilo šta:
tekst, slike, linkovi, druge tabele (dozvoljeno je ugnježdavanje tabela).

<TABLE>…</TABLE> osnovni element između čijih se tagova nalazi sav sadržaj


tabele. Po defaultu tabele nemaju graničnu liniju (border).

BORDER element koji služi da bismo dodelili tabeli graničnu liniju odgovarajuće
debljine, vrednost debljine linije se zadaje u pikselima:
<TABLE BOREDR=”n”>.

<TD>...</TD> sadržaj ćelije se stavlja unutar taga kojim se definiše jedna ćelija
tabele: <TD> sadržaj ćelije </TD>

- 24 -
Diplomski rad Poslovne Web prezentacije

<TH>...</TH> tag koji je sličan prethodnom, a služi za definisanje naslovnih ćelija


tabele: <TH> sadržaj ćelije </TH>. Tabela ne mora da sadrži <TH> tag, ali mora da sadrži bar
jedan <TD> tag, u koji ćete staviti sadržaj tabele.

<TR>...</TR> tag pomoću koga se definišu redovi tabele.


<TR> <TD> sadržaj ćelije </TD> <TD> sadržaj ćelije </TD> ... </TR>,
Unutar ovog taga se umeću <td> ili <th> tagovi koji definišu ćelije tabele sa
odgovarajućim sadržajem.

Ako se u tekstu van tabele upotrebom <font> taga dodeli neki font različit od default
fonta, u Internet Exploreru će se ovaj tag odnositi i na tekst u ćelijama tabele. U Netscape
Navigatoru ce tekst u tabeli biti prikazan u default fontu. Da bi i Netscape Navigator tekst u
tabeli prikazao u željenom fontu moraćete u svaku ćeliju posebno da ubacite <font> tag.

Primer1. Tabela sa ćelijama zaglavlja i običnim ćelijama.

Sl. 4.3. Izgled tabele u Browseru. Ilustracija razlike između TH i TD direktiva.

Odgovarajući HTML kod glasi:

<table border="1">

<tr>
<th><font face="arial" size="2">zaglavlje</font></th>
<th><font face="arial" size="2">zaglavlje</font></th>
<th><font face="arial" size=2>zaglavlje</font></th>
</tr>

<tr>
<td><font face="arial" size="2">tekst</font></td>
<td><font face="arial" size="2">tekst</font></td>
<td><font face="arial" size="2">tekst</font></td>

</tr></table>

Kao što se vidi, osnovna razlika između teksta koji se nalazi unutar <th> i <td>
tagova je u tome sto je tekst u prvom slučaju podebljan (bold) i centriran unutar ćelije, a u
drugom slučaju tekst nije podebljan i poravnat je uz levu ivicu ćelije. Širina kolona je određena
prvom ćelijom u svakoj koloni.

Treba napomenuti da tabela uopšte ne mora da bude uniformno formatirana, tj. da


se svakoj ćeliji može dodeliti neko drugo svojstvo pomoću atributa koji se umeću u njen <td>
tag.

HEIGHT i WIDTH atributi koje koristimo da bismo tabeli dodelili odgovarajuće


dimenzije. Vrednost ovih atributa se kao i kod <img> taga može zadati ili u pikselima ili u
procentima veličine prozora HTML browser-a. Ovaj drugi način definisanja je preporučljiv jer
onda ne morate da razmišljate o rezoluciji ekrana.

- 25 -
Diplomski rad Poslovne Web prezentacije

CELLPADDING atribut pomoću koga možemo definisati rastojanje između sadržaja


ćelije i njene granične linije, vrednost ovog atributa se zadaje u pikselima, a po default-u je 1.

CELLSPACING pomoću ovog atributa se može odrediti rastojanje između pojedinih


ćelija tabele, tj. debljina linije između ćelija u pikselima, po default-u je 1.

Primer2. Tabela sa međusobno pomerenim ćelijama i tekstom odvojenim od ivice


tabele.

Sl. 4.4. Izgled tabele u Browseru. Primer upotrebe Cellspacing i Cellpadding atributa.

Odgovarajući HTML kod:

<table border="1" cellspacing="5" cellpadding="10" >

<tr>
<td><font face="Arial">tekst</font></td>
<td><font face="Arial">tekst</font></td>
</tr>

<tr>
<td><font face="Arial"> tekst </font></td>
<td><font face="Arial"> tekst </font></td>
</tr>

</table>

Ćelije tabele su pomerene jedan u odnosu na drugu za 5 pikesla, dok se tekst (kao
što je po defaultu) ne 'lepi' uz levu stranu ćelije već je pomeren, ovde samo ilustrativno, za 10
piksela.

COLSPAN i ROWSPAN Često se dešava da pojedine ćelije tabele treba da se


protežu duž više redova ili kolona tabele. Ovo se moze postići pomoću ovih atributa koji se
ubacuju u <td> ili <th> tag one ćelije koju želimo posebno da formatiramo. Vrednost ovih
atributa se zadaje brojem kolona ili redova tabele duž kojih treba da se prostire data ćelija.

Primer3. Tabela sa ne uniformnim rasporedom kolona i vrsta.


Colspan=4
Rowspan=3

Sl. 4.5. Izgled tabele u Browseru. Upotreba Rowspan i Colspan atributa.

- 26 -
Diplomski rad Poslovne Web prezentacije

Odgovarajući HTML kod:

<table border="1" cellspacing="1" cellpadding="5">

<tr>
<td colspan="4" >&nbsp;</td>
</tr>

<tr>
<td rowspan="3" >&nbsp;</ td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>

<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>

<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Specijalni karakter '&nbsp;' je u stvari prazan prostor (space ili razmak) koji se mora
ubaciti u ćeliju jer svaka ćelija tabele mora imati neki sadržaj, inače je browser neće prikazati.
U okviru taga <td> izostavljeni su svi atributi koji definišu tip i veličinu fonta, kao i
atributi za određivanje veličine ćelija, radi preglednosti kod. U ćelije koje želimo da budu
prazne možemo ubaciti i male providne gifove.

Ono sto je posebno zanimljivo kod tabela je to što cela tabela kao i svaka ćelija
posebno može da ima različitu boju pozadine od ostatka stranice. Ovo se postiže umetanjem
atributa BGCOLOR u sledeće tagove: <table>, <td> ili <th>. Vrednost se zadaje
heksadecimalnim kodom boje ili njenim imenom, isto kao i kod boje pozadine stranice u
<body> tagu. Atribut bgcolor koji zadate u <th> ili <td> tagu će "pregaziti" onu boju koja se
zadaje u <table> tagu.

Ako niste zadovoljni sivim okvirom tabele njegovu boju možete promeniti pomoću
BORDERCOLOR atributa u <table> tagu.

- 27 -
Diplomski rad Poslovne Web prezentacije

4.7. Okviri – frames


Okviri proširuju mogućnosti prikaza na jednoj Web strani, omogućavajući da vidljivo
područje bude podeljeno na nekoliko delova. Svako područje, ili okvir može da učita sopstveni
dokument sa različitim URL-om nezavisno od drugih okvira. Može mu biti dodeljeno ime,
omogućavajući okviru da bude meta drugih URL-ova i može da se predimenzioniše dinamički,
odgovarajući na veličinu vidljivog prostora za prikaz. Takođe, može se izabrati mogućnost da
sam korisnik može, a i ne mora, da okviru promeni veličinu.
Dokument sa definicijom okvira ima osnovnu strukturu veoma sličnu onoj kod
običnog HTML dokument, osim korišćenja elementa Body koji se menja elementom Frameset.
Po specifikaciji HTML-a Body zapravo može biti prisutan u dokumentu definicije okvira, ali
Netscape Navigator u tom slučaju neće umeti da prikaže okvire, za razliku od Internet
Explorera kome to ne smeta.

<FRAMESET>…</FRAMESET> je glavni element za definiciju okvira. Nijedan


element ne sme da se pojavi pre oznake Frameset ili će u protivnom Frameset biti ignorisan.
Unutar elementa Frameset mogu biti ugnježdeni drugi elementi kao što su Frame, Noframe, ili
novi Frameset.

ROWS=”lista visina vrsta” atribut koji određuje okvire kao vrste u okviru strane,
definicijom visine vrste. Kao vrednost atributa javlja se lista vrednosti odvojenih zarezima.
Vrednosti mogu biti date u pikselima, procentima ili u relativnoj skali i predstavljaju visinu vrste.
Broj redova se određuje na osnovu broja članova liste. Ukupan broj visina vrsta mora biti
jednak visini prozora, ili će se izvršiti normalizacija da bi se ostvario ovaj cilj.

Ako se u listi članova navede vrednost *, to znači da je vrednost tog polja opciona.
Zvezdica (*) označava 'relativan' okvir i interpretiraće se kao zahtev da se tom okviru dodeli
sav preostali prostor. Ako postoji više relativnih okvira, preostali prostor biće ravnopravno
raspodeljen između njih. Ako slučajno postoji vrednost ispred zvezdice, tada će tom okviru biti
dodeljeno više prostora. Na primer, ako je lista sledeća: ROWS=“2*,*” ovo znači da će se
prvom okviru dodeliti 2/3, a drugom 1/3 raspoloživog prostora.
<FRAMESET ROWS=”20%, 40%,40%>

COLS=”lista širina kolona” ja atribut koji određuje okvire kao kolone u okviru strane
definišući širine kolona. Atribut Cols uzima vrednosti širine kolona iz liste čija su polja odvojena
zarezima i ima istu sintaksu kao i artibut Rows.
<FRAMESET ROWS=”60%, 20%,20%>

Element FRAMESET može biti ugnježden unutar druge FRAMESET oznake. U tom
slučaju će kompletan podokvir biti smešten unutar prostora dodeljenog okviru unutar koga su
definisani podokviri.

<FRAME> element koji definiše pojedinačne okvire unutar definicije okvira. Nema
zatvarajuću oznaku i ima šest atributa koji ga precizno definišu.

SRC specificira URL dokumenta koji će biti prikazan u tom okviru. Frame bez
atributa Src prikazuje se kao prazan prostor.
<FRAME SRC=”ime_dokumenta.htm”>

NAME je atribut koji se koristi da bi se okviru dodelio naziv, tako može da bude meta
linkova iz drugih dokumenata, obično iz drugog okvira unutar istog dokumenat. Atribut name je

- 28 -
Diplomski rad Poslovne Web prezentacije

opcioni, svi okviri su neimenovani u startu, a nazivi moraju da počnu alfanumeričkim


karakterom.
<FRAME NAME=”ime_okvira”>

Postoji nekoliko rezervisanih naziva i oni počinju donjom crtom.


_blank (New Window) uvek učitava link u nov neimenovan prozor,
_self (Same Frame) učita stranicu preko trenutnog dokumenta,
_parent (Parent Frame) učitava link preko prethodnika
_top (Whole Page) učitava link prako top nivoa, cele strane.

MARGINWIDTH se koristi kada autor želi kontrolu nad levom i desnom marginom
okvira. Ako se koristi vrednost se zadaje u pikselima.
<FRAME MARGINWIDTH=”broj”>

MARGINHEIGHT atribut je sličan prethodnom i kontroliše gornju i donju marginu


okvira. Sintaksa je potpuno ista.

SCROLLING se koristi da bi se naznačilo da li okvir treba da ima klizače ili ne. Ovo
je opcioni atribut i ako nije naveden podrazumeva se vrednost auto, što znači po potrebi.
<FRAME SCROLLING=”no” ili “yes” ili “auto”>

NORESIZE je indikator koji kazuje da okvir ne može da se redimenzioniše u


browseru od strane samog korisnika. Ovaj atribut nema vrednost i ako nije naveden
podrazumeva se da se veličina okvira može promeniti.

FRAMEBORDER omogućava kontrolu izgleda granica okvira. Ako nije naveden


podrazumeva se da se granice okvira prikazuju.
<FRAME FRAMEBORDER=”yes” ili “no”>

FRAMESPACING daje dodatni prostor oko okvira, dajući efekat pokretnih okvira, a
vrednost mu se zadaje u pikselima.
<FRAME FRAMESPACING=”broj”>

<NOFRAMES>…</NOFRAMES> element koji pruža alternativni sadržaj ako se


dokument pregleda od strane Web čitača koji ne podržava okvire. Čitači koji prikazuju okvire
će ovaj element jednostavno ignorisati [5].

NAPOMENE
Veći problemi mogu da nastanu prilikom uklapanja okvira, tako da se strogo mora
voditi računa i proveriti izgled stranice bar u dva najpopularnija browsera, u Exsploreru i
Netscapeu.

Kod dokumenta koji sadrži definiciju frejmova:

<frameset rows="100,*">
<frame name="banner" frameborder="0" scrolling="no" noresize src="plavo.htm">
<frameset cols="150,*">
<frame name="contents" frameborder="0" src="crveno.htm">
<frame name="main" frameborder="0" src="zuto.htm"></frameset>
<noframes>
<body>

- 29 -
Diplomski rad Poslovne Web prezentacije

<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>

Izgled ovog dokumenta nije zadovoljavajući:

Sl. 4.6. Izgled stranice u Internet Exploreru.

Sl. 4.7. Izgled iste stranice u Netscape Navigatoru.

- 30 -
Diplomski rad Poslovne Web prezentacije

Primećuje se da se u oba čitača okviri ne uklapaju. Stranice koje se pozivaju, u tagu


Body sadrže samo definiciju boje pozadine i nijedan drugi element niti atribut nisu definisani i
nemaju nikakav sadržaj, prazne su.
Da bi se ovakve stranice 'uklopile', potrebno je u element FRAMESET dodati i atribut
BORDER i njemu dodeliti vrednost nula.

<frameset rows="100,*" border="0">


<frame name="banner" scrolling="no" noresize src="plavo.htm">
<frameset cols="150,*" border="0">
<frame name="contents" src="crveno.htm" scrolling="no">
<frame name="main" src="zuto.htm" scrolling="no">
</frameset>
</frameset>

Međutim, ni ovo nije dovoljno dobro. Stranice se uklapaju, ali ako je potrebno da se
sadržaj na stranicama, na primer slike, uklope tako da se uopšte ne primećuju okviri, čak i ako
je boja pozadine svih stranca koje se učitavaju ista, moraju se podesiti i sve stranice posebno.
U BODY tag svake stranice se tada moraju dodati atributi:

marginheight="0" marginwidth="0" leftmargin="0" topmargin="0"

Prva dva atributa pročitaće Netscape Navigator, a druga dva Internet Explorer.

Najčešće i najlakše je sadržaj cele stranice smestiti u odgovarajuću tabelu, u


pojedinačne ćelije. Tekst i slike se tako najpreciznije i najsigurnije pozicioniraju na ekranu.
Da bi se sve uklopilo, tabele treba podesiti tako da nemaju okvir i da je razmak
između ćelija jedank nuli, kao i to da se sadržaj 'lepi' uz ivicu ćelije (ako se radi o slikama). To
se postiže na već opisan način:
<table border="0" cellspacing="0" cellpadding="0">

Pretpostavimo da neku sliku treba postaviti na tačno određeno mesto na ekranu.


Pretpostavimo dalje da je pozicija takva da slika mora pripadati različitim okvirima. U tom
slučaju, sliku treba izdeliti precizno i svaki deo slike smestiti na posebnu stranicu.

Sl. 4.8. Fotografija hotela u Novom Pazaru, slika koju treba pozicionirati na mestu preklapanja okvira.

- 31 -
Diplomski rad Poslovne Web prezentacije

Svaka stranica učitava po jedan deo slike koji se smešta u ćelije tabele.
Kod stranice sa plavom bojim pozadine:

<body bgcolor="#000080" marginheight="0"


marginwidth="0" leftmargin="0" topmargin="0">
<div align="left">
<table border="0" cellspacing="0" height="100%"
cellpadding="0" width="383">
<tr>
<td height="100%" width="83">&nbsp;</td>
<td width="300" height="100%" valign="bottom">
Sl. 4.9. Izgled stranice koja se učitava u <img border="0" src="gore.jpg" width="300"
gornji frejm. height="82"></td>
</tr></table></div></body>

Kod stranice sa crvenom bojom pozadine:

<body bgcolor="#FF0000" marginheight="0"


marginwidth="0" rightmargin="0" leftmargin="0"
topmargin="0">
<div align="right">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33" height="58">&nbsp;</td>
<td width="54" height="58"><img border="0"
Sl. 4.10. Izgled stranice koja se poziva u src="dolelevo.jpg" width="117"
donjem levom frejmu. height="134"></td>
</tr></table></div></body>

Kod stranice sa žutom bojom pozadine:

<body bgcolor="#FFFF00" marginheight="0"


marginwidth="0" leftmargin="0" topmargin="0">
<div align="left">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="108" height="58"><img border="0"
src="doledesno.jpg" width="183" height="134"></td>
</tr></table></div></body>
Sl. 4.11. Izgled stranice koja se učitava u
donji desni frejm

Kod stranice koja sadrži definicije okvira:


<frameset rows="150,*" border="0" frameborder="0" framespacing="0">
<frame name="banner" scrolling="no" noresize src="plavo.htm">
<frameset cols="200,*" border="0" frameborder="0" framespacing="0">
<frame name="contents" src="crveno.htm" scrolling="no">
<frame name="main" src="zuto.htm" scrolling="no"></frameset>
<noframes>
<body><p>This page uses frames, but your browser doesn't support them.</p>
</body></noframes></frameset>

- 32 -
Diplomski rad Poslovne Web prezentacije

Kao rezultat dobijaju se potpuno uklopljeni okviri i sastavljena slika u oba Web
čitača. Ovo je samo ilustrativni primer, jer naravno da nema potrebe isticati pojedine okvire
drugom bojom pozadine.

Sl. 4.12. Izgled stranice sa tri okvira u Internet Exploreru.

Sl. 4.13. Izgled iste stranica u Netscape Navigatoru.

- 33 -
Diplomski rad Poslovne Web prezentacije

4.8. Forme
HTML raspolaže jednostavnim načinom prenošenja podataka serveru, a to su forme.
Te podatke najčešće obrađuju CGI skriptovi. CGI ili Common Gateway Interface skript je
program koji izvršava WWW server i koji može da vrati neki rezultat korisniku, u vidu
generisanog HTLM dokumenta. Taj rezultat može biti stalno isti ili može varirati, zavisno od
unosa korisnika.
Upotreba forme je jednostavna, korisnik je popunjava i šalje. Obično se prosleđuje
HTTP serveru i CGI skriptu na interaktivnu obradu. Sadržaj forme se može proslediti i mailom
radi kasnije obrade. Formulari se formiraju smeštanjem ulaznih polja unutar paragrafa, lista li
tabela. To omogućava veliku fleksibilnost u dizajniranju spoljašnjeg izgleda formulara.

<FORM>…</FORM> unutar para oznaka elementa Form smešta se sve ono što čini
jedan formular. Forme se ne mogu međusobno ugnježdavati. U okviru elementa Form
specificira se tip akcije, koji sadrži URL do lokacije kojoj se predaju parovi
ulazno_polje/vrdnost, kao i metod, odnosno način slanja podataka.

<FORM METHOD=post ACTION=”ime_fajla.asp”>

ACTION atributu Form taga kao vrednost treba zadati relativnu ili apsolutnu putanju
do Web aplikacije koja će da primi podatke iz formulara.

METHOD atributom se definiše način slanja podataka i on može biti GET ili POST.
Ove metode su osnovni načini da se podaci prikupljeni formularom HTTP – om pošalju Web
aplikaciji. Ukoliko se formular i dokument gde se šalju podaci nalaze u istom folderu, koristi se
POST metod. GET metod podatke iz formulara šalje kroz Web adresu (URL) i vrlo je nezgodno
passworde slati ovom metodom jer se jer se mogu videti, dok POST metodom podaci putuju
skrivenije.

Unutar formulara ulazna polja mogu biti različitog tipa. INPUT je oznaka za polje
opšteg tipa, a tip polja se definiše atributom TYPE.

Jednolinijska tekst polja koja služe za unos kratkih stringova su tipa text. Atributom
NAME definisano je ime ulaznog polja i prilikom predaje formulara šalje se zajedno sa unetom
vrednošću. Atribut SIZE određuje veličinu polja koja se prikazuje na ekranu i ima celobrojnu
vrednost.
<INPUT TYPE=”text” NAME=”ime_polja” SIZE=”n”>

Unos lozinki je sličan kao kod jednolinijskih tekst polja, s tom razlikom što se sadržaj
ispisa ne vidi na ekranu. Podaci koji se prosleđuju naravno nisu zvezdice već tačno uneta
vrednost, a odgovarajuća sintaksa je:
<INPUT TYPE=”password” NAME=”ime_polja” SIZE=”n”>

Radio dugmad se koriste u kombinaciji sa listom izbora, listom unapred zadatih


vrednosti. Sva radio dugmad u okviru iste grupe imaju isto ime, ali su međusobno isključiva i
samo izabrano radio dugme generiše par ime/vrednost koji se prosleđuje. Parametar
Checked postavlja jedno od dugmadi kao aktivno.
<input type="radio" name="R1" value="V1" checked >
<input type="radio" name="R1" value="V2">
<input type="radio" name="R1" value="V3">

- 34 -
Diplomski rad Poslovne Web prezentacije

Kućice za označavanje imaju dva stanja, selektovano i ne selektovano. Par


ime/vrednost se prosleđuje jedino kada je kućica selektovana. Ukoliko je selektovana onda uz
ime ide vrednost ON, ukoliko nije čekirana ne šalje se ništa, ni ime ni bilo kakva vrednost. Kao
i kod radio dugmadi moguće je postaviti predefinisanu vrednost korišćenjem parametra
Checked.
<input type="checkbox" name="C1" value="ON">
<input type="checkbox" name="C2" value="ON">
<input type="checkbox" name="C3" value="ON">

Oznaka Input koristi se i za običnu dugmad, za dugmad za slanje vrednosti


formulara kao i za poništavanje unetih vrednosti. U kolekciji poslatih podataka pojavljuje se i
tekst (value atribut) koji se ispisuje na submit dugmetu. Ukoliko ima više submit dugmadi šalje
se par ime/vrednost onog na kog se kliknulo, a ostala kao i da ne postoje. Reset i obično
dugme ne šalju nikakve vrednosti.
<input type="button" value="Button" name="B3">
<input type="submit" value="Submit" name="B1">
<input type="reset" value="Reset" name="B2">

Za menije sa jednostrukim ili višestrukim izborom koristi se oznaka SELECT. Za


dodavanje mogućnosti višestrukog izbora koristi se parametar MULTIPLE, a atribut SIZE
određuje broj opcija koje se istovremeno prikazuju na ekranu.
<select size="1" name="D1">
<option> izbor1</option>
<option> izbor2</option>
<option> izbor3</option>
</select>

Za unos posebnih tipova podataka mogu se koristiti višelinijska tekstualna polja, i


ona su tipa textarea. Atributi Rows i Cols određuju broj redova i kolona koji će se videti na
ekranu [5].
<textarea rows="2" name="S1" cols="20">
(opcioni tekst)
</textarea>

- 35 -
Diplomski rad Poslovne Web prezentacije

5. JavaScript

JavaScript je vrsta skript jezika kog je razvila firma Netscape Communicatios radi
povećanja interaktivnosti Web strana. Kako je nastao JavaScript? Java je programski jezik
namenjen Internet i intranet programiranju, ali je zbog prilične sporosti vršeno
pojednostavljivanje Jave u vidu JavaScripta. Originalno ime je prvobitno bilo LiveScript. Tako je
JavaScript u saradnji Suna i Netscapea postao podskup Jave. JavaScript još uvek nije
standardizovan, a postoje i određene nekompatibilnosti između dva najpopularnija Web čitača,
Netscapea i Explorera.
Skript jezici su programski jezici koji se koriste radi upravljanja, podešavanja i
automatizovanja mogućnosti jednog postojećeg sistema. Skript jezik je mehanizam za
proširenje funkcionalnosti dotičnog interfejsa programskom kontrolom.
Sadašnji browseri predstavljaju sa programske tačke gledišta aplikacioni iterfejs. Na
strani klijenta opremljenog Web čitačem obezbeđeni su skript jezici za proračune na strani
klijenta, različitih objekata koji predstavljaju elemente korisničkog interfejsa JavaScripta, poput
prozora, menija, dijalog boksova, tekst polja, frejmova, linkova itd. Ovo okruženje obezbeđuje
pridruživanje određenog programskog koda određenim događajima, kao što su promena
fokusa, akcija mišem i sl. Kod skript jezika pridružen je HTML strani. Kao takav on predstavlja
reakciju na korisničke akcije.
Osim na klijentskoj strani i na serveru se mogu postaviti skript kodovi, koji uključuju
proračune, manipulaciju objektima, klijentima i datotekama, deljenje i zaključavanje podataka.
Korišćenjem Web čitača na klijentskoj strani i skriptova na serverskoj strani moguće je razviti
distribuirane aplikacije, obezbeđujući pri tome fleksibilan korisnički interfejs.

Pri kreiranju JavaScripta može se koristiti pomoć različitih generatora ili pak pisati
skriptove u najobičnijem ASCII editoru. Kod JavaScripta se uključuje u HTML datoteke, a Web
čitači koji ga podržavaju interpretiraju kod i obezbeđuju širok raspon interaktivnosti i efekata na
Web stranama. Kada Web čitač kompatibilan sa JavaScriptom, otvara Web stranu, on čita
skript i izvršava instrukcje. JavaScript se izvršava veoma brzo i namenjen je manjim
zahtevima.

Pošto se kod skripta uključuje direktno u HTML datoteke, neophodno je odvojiti ga


od ostatka HTML dokumenta. Celokupan kod skripta se smešta između tagova:
<SCRIPT>…</SCRIPT>

Prema načinu procesiranja skripta, ukoliko je uključen tag <SCRIPT> unutar HTML
dokumenta, razlikuju se tri načina izvršenja skripta:
 Ako je skript uključen i zaglavlje dokumenta, ignorisan je od poziva.
 Ako je uključen direktno u telo HTML dokumenta, rezultat izvršenja biće prikazan
na Web strani.
 Ako je skript rukovodilac događaja, skript će biti izvršen jedino kada se dotični
događaj desi.

Pošto JavaScript nije jedini skript jezik čiji se kodovi mogu ubacivati u HTML
potrebno je u tagu koji odvaja skript od ostalog html sadržaja navesti i da se radi baš o
JavaScriptu. U principu u isti HTML dokument se mogu ubacivati i VBScript i JScript kodovi [6].

<SCRIPT language=”JavaScript”>…</SCRIPT>

- 36 -
Diplomski rad Poslovne Web prezentacije

Da bismo JavaScript kod učinili nevidljivim za čitače nekompatibilne sa njim, kod se


smešta između oznaka za komentar:

<SCRIPT language=”JavaScript”>
<!- skrivanje od starih Web pretraživača
document.write(“tekst koji se ispisuje”)
//->
</SCRIPT>

Jedan veoma jednostavan i zanimljiv primer upotreba JavaScript koda je ispisivanje


teksta po statusnoj liniji browsera:

<script language="JavaScript">
<!--
function tekst(txt) { window.status = txt; }
defaultStatus = "Msinski fakultet u Kragujevcu"
// -->
</script>

- 37 -
Diplomski rad Poslovne Web prezentacije

6. Active Srever Pages – ASP


HTML stranice i JavaScript programi mogu da budu efektni, ali im je glavni
nedostatak statičnost. Bez obzira na animacije i specijalne efekte, stranice su onakve kakve ih
je autor generisao i ne mogu se menjati same od sebe. Te stranice na isti način vide svi
korisnici koji im pristupaju, dok se dinamički sadržaji generišu prema smernicama autora ali i
na osnovu podataka koji pristižu od klijenta ili podataka do kojih server dođe na neki drugi
način. Postoji više rešenja za dinamičko generisanje Web strana. Prva tehnologija koja je
omogućila dvosmerni interfejs i interakciju između klijenta i servera bila je CGI ili Common
Gateway Interface (zajednička veza). CGI programi obrađuju podatke koje dobijaju od
korisnika, što doprinosi povećanju dinamičnosti strane. Problem kod ovakvog pristupa je u
tome što su programi relativno teški za održavanje i izradu, pored toga pristup imaju samo
službena lica Internet provajdera, a ne i sami korisnici.
Active Server Pages je Microsoftova tehnologija koja omogućava efikasnu izradu
dinamičkih Web strana i kompleksnih Web aplikacija. Uticaj ASP-a na Web sajtove ogleda se u
obezbeđivanju visokog stepena interaktivnosti. Ovo znači da se stvari dešavaju u realnom
vremenu, dok posetilac koristi sajt, a sa svakom razmenom informacija između korisnika i Web
sajta, odgovori se modifikuju u zavisnosti od razmene. Najjednostavniji oblik interakcije sa
korisnikom kroz aktivne strane svodi se na prikupljanje podataka pomoću HTML obrazaca i
prilagođavanje Web strane tim podacima. Jedan od veoma čestih poslova za koje se ASP
koristi je i pristup bazama podataka.

6.1. Iza kulisa


ASP strane predstavljaju najobičnije tekstualne HTML datoteke u koje su dodate
linije sa ASP kodom i koje imaju ekstenziju asp. Međutim, ako u browseru pogledate izvorni
kod strane videćete samo čist HTML. Šta se zapravo dešava kada korisnik unese željeni URL
sajta u svoj pretraživač? Zahtev prvobitno odlazi Web serveru. U zavisnosti od ekstenzije fajla,
htm ili asp, vraća se sadržaj fajla korisniku ili ga ASP ili pretprocesor za pisanje skriptova
obrađuje. Fajl koji sadrži samo HTML, uključujući i skriptove na strani klijenta, uzima Web
server i vraća ga klijentu, gde se i vrši završna obrada. ASP fajl, uključujući i HTML i ASP i
eventualno SQL, uzima Web server, šalje ASP-u i drugim endžinima za pisanje skriptova na
obradu, obavljaju se funkcije za baze podataka, završnu obradu obavljaju ASP i drugi
pretprocesori za pisanje skriptova, a klijentu se vraća generisan čist HTML.
ASP nije zamena za JavaScript ili bilo koji drugi skript jezik. ASP treba koristiti za
ono za šta je i namenjen, a to je da zameni CGI programe i da omogući automatizaciju Web
stranice. Sve što se može uraditi pomoću JavaScript-a treba uraditi pomoću njega, a ne u
ASP-u. Na ovaj način se štede uvek ograničeni resursi servera. Čist html dokument, bez
ijedne ASP naredbe, treba snimiti sa ekstenzijom htm. Snimanje ovakvog fajla sa asp
ekstenzijom je nepotrebno jer u tom slučaju server ovaj fajl tretira kao ASP program i od njega
generiše potpuno isti HTML, što je sasvim bespotrebna šetnja na relaciji klijent-server-klijent.
ASP nije jezik za programiranje. On je kao lepak koji povezuje zajedno i skriptove, objekte i
komponente, ASP je tehnologija za interakciju sa korisnikom.
Sintaksa ASP-a je vrlo jednostavna i neobična, praktično je i nema. ASP se od
ostalog HTML koda odvaja tagovima “<%” i “%>”. Unutar otvarajućih i zatvarajućih tagova
nalazi se programski kod. Na ASP stranama se može koristiti proizvoljan skript jezik, a sve što
je potrebno jeste odgovarajući engine. U startu je obezbeđen engine za VBScript i JScript.
Tehnički ASP je napravljen od objekata koji se skript jezicima pozivaju da obave korisne

- 38 -
Diplomski rad Poslovne Web prezentacije

funkcije, kao što je prihvatanje podataka od korisnika, odgovaranje na zahtev korisnika,


upravljanje aplikacijama i sesijama i manipulisanje serverom.

6.2. Komunikacije koje se zasnivaju na Webu


Pomoću statičkog HTML–a mogu se konstruisati Web stranice koje prikazuju tekst i
grafiku i formulari koji omogućavaju korisniku da pošalje podatke nazad serveru. Tradicionalno
pisanje Common Gateway Interface skriptova omogućava preuzimanje podataka koji su
vraćeni na server i njihovu obradu. Ta obrada može uključivati podatke i HTML oznake koje se
vraćaju korisniku, tj. »razgovor« sa korisnikom.
Ipak, ovi »razgovori« mogu biti teški za konstruisanje i održavanje pomoću statičkog
HTML jezika i CGI programa. Active Server Pages obezbeđuje nekoliko ugrađenih objekata
koji Web razgovore čine mnogo lakšim.
Jedna od najvažnijih karakteristika Web komunikacije je mogućnost da se obezbedi
interaktivnost ili dvosmerna komunikacija u realnom vremenu. Browseri komuniciraju sa Web
serverima korišćenjem HTTP protokola i korisničke komunikacije se obavljaju preko istog tog
protokola. ASP olakšava uspostavljanje i održavanje komunikacije pomoću HTTP protokola,
pomoću dva ugrađena objekta koji se nazivaju Response i Request objekti.
Korišćenje pretraživača je prilično lako, potrebno je samo kliknuti na neki link ili
popuniti formular i pritisnuti Submit dugme da bi se informacije prosledile dalje. Iza lakoće i
jednostavnosti se krije relativno složena transakcija, dvosmerna komunikacija između Web
servera i klijenta.
Kada korisnik u svom pretraživaču unese ime domena u adress polje, pretraživač
uspostavlja vezu sa Web serverom preko mreže i zahteva default stranicu (pod pretpostavkom
da ime fajla nije uneto nakon imena domena). Dok prolazi Web sajtom, njegov pretraživač
zahteva svaku stranicu na koju on klikne po njenoj potpunoj putanji i imenu fajla. Korišćenje
potpune putanje i imena fajla je obavezno jer Web ne poseduje stanje, što znači da Web
server ne održava stalnu vezu sa svakim klijentom i ne razlikuje jedan zahtev za stranicom od
sledećeg.
Sam zahtev može sadržati više informacija nego što je sama putanja i ime fajla. Na
primer, zahtev može uključivati vreme, datum, kolačiće, IP adrese hostova, tip pretraživača, tip
veze i sl.
Ako je zahtevana stranica dostupna anonimno, što znači da nije potrebno korisničko
ime i lozinka da bi se pristupilo stranici, server će odgovoriti sa sličnim informacijama i plus
HTML sadržajem stranice. Vraćene informacije mogu sadržati vreme, datum, tip servera, tip
veze, kolačiće i tako dalje. Ovaj odgovor takođe predstavlja izvor čestih poruka kao što je
»HTTP1.1 404 Not Found«. Ako je zahtev validan, stranica će biti prikazana, ako nije, korisnik
će videti HTTP verziju i odgovarajuću poruku greške.

Zadatak Request objekta je da uzme podatke koji dolaze od korisnika i da ih učini


dostupnim, dok Response objekat obezbeđuje sredstva za pružanje odgovora korisniku
pomoću običnog teksta ili podataka koji su kodirani pomoću HTML jezika. Zbog načina na koji
ovi objekti rade svoj posao i zbog jednostavne sintakse koja se koristi za pristup tokovima
podataka i za njihovo kreiranje, korišćenje ovih objekata je lako i uobičajeno [2], [7].

- 39 -
Diplomski rad Poslovne Web prezentacije

6.3. Request objekat


Request objekat predstavlja kolekcije (kolekcija je skup vrednosti pridružen nekom
objektu) koje uzimaju podatke dok putuju od pretraživača preko hipertekst linka ili predatog
formulara. Kada se klikne na link ili kada se preda formular, Request objekat uzima sve
podatke u okviru zaglavlja, uključujući i HTTP promenljive, kolačiće, stringove upita, sertifikate
sigurnosti i određene osobine zahteva koji se mogu koristiti za upravljanje komunikacijama.
Svi ovi podaci postaju odmah dostupni za aktivirani ASP skript.
Request objekat uključuje pet ugrađenih kolekcija i svaka od njih uzima određenu
vrstu podataka. Request objekat uzima sve ove podatke u ovim kolekcijama i onda ih čini lako
dostupnim za skriptove radi obrade:
Query string Parovi ime/vrednost koji su povezani za kraj zahtevane URL adrese,
ili ime/vrednost parovi koji nastaju kao rezultat predaje formulara gde je metod jednak GET
( <FORM ACTION=”nekaakcija.asp” METHOD=”GET”>).
Form Ime/vrednost parovi koji nastaju kao rezultat predaje formulara gde je metod
jednak POST (<FORM ACTION=”nekaakcija.asp” METHOD=”POST”>).
Server varijables Imena i vrednosti HTTP zaglavlja i imena i vrednosti nekoliko
promenljivih okruženja sa Web servera.
Cookies Vrednosti svih kolačića koji se šalju uz korisnički zahtev. Po defaultu šalju
se samo oni kolačići koji su validni za domen Web servera.
Client certificate Vrednosti polja/unos u sertifikatu klijenta koji se nudi serveru.

Pristup vrednostima iz formulara i URL adresa


Ako se napravi prost formular za unos i prosleđivanje podataka pomoću
jednostavnih HTML oznaka, kao na primer:

<FORM ACTION=”imefajla.asp” METHOD=”post”>


vrednost 1: <INPUT TYPE=”text” SIZE=”n” NAME=”ime_polja1”><BR>
vrednost 2: <INPUT TYPE=”text” SIZE=”n” NAME=”ime_polja2”><BR>
vrednost 3: <INPUT TYPE=”text” SIZE=”n” NAME=”ime_polja3”><BR>
<INPUT TYPE=”submit” VALUE=”prosledi”><BR>
<INPUT TYPE=”reset” VALUE=”poništi”><BR>
</FORM>

Svako polje koje je generisano pomoću INPUT TYPE oznake ima jedinstveno, ali
opisno ime polja koje je uključeno u oznaku. Referenca na ASP fajl nalazi se u prvoj liniji kao
vrednost atributa ACTION. Ova imena polja pozivaju se u ASP skriptu, varijablama se
dodeljuju vrednosti na sledeći način:
var1=Request.Form(“ime_polja1”)
var2=Request.Form(“ime_polja2”) (ili Request.Form(i))
var3=Request.Form(“ime_polja3”)

Na ovaj način promenljive var1, var2 i var3 sadrže vrednosti koje su dobijene iz
predatog formulara i dalje se može manipulisati sa tim vrednostima u okviru skripta. Drugi
način za pristup ovim vrednostima je da se odredi celobrojni indeks svakog polja, ali ukoliko se
raspored polja na stranici promeni, biće preuzete pogrešne vrednosti, zato je bolje koristiti data
imena polja.

QueryString kolekcija sadrži imena i vrednosti nakon URL-a na koji ukazuje. Može
se kreirati pomoću oznake za link hiperteksta:
< A HREF=”www.naziv_domena/ime_fajla.asp? ime_podatka=podatak>link</A>

- 40 -
Diplomski rad Poslovne Web prezentacije

Ime fajla pokazuje ciljni skript koji je potreban, a podaci koji slede iza upitnika
predstavljaju ime podatka i njegovu vrednost i odvojeni su znakom jednakosti. U aplikaciji se
taj podatak može jednostavno očitati, vrednost se može dodeliti nekoj promenljivoj i biti
dostupna za dalju obradu: Request.QueryString(“ime_podatka”)

6.4. Response objekat


Response objekat je pomoćni alat za obezbeđivanje odgovora na korisničke
zahteve, ali takođe služi za druge korisne funkcije. Mogu se selektivno preusmeravati korisnici
na druge URL adrese ili stranice pomoću Redirect metoda. On takođe radi sa funkcijom za
baferovanje, koja pamti sadržaj povratne stranice dok se ne završi celokupna obrada, tako se
mogu slati individualni kompletirani delovi dok korisnik čeka da se završi druga obrada.
Postoji samo jedna kolekcija u Response objektu, kolekcija sa kolačićima, koja
sadrži vrednosti svih kolačića koji treba da se pošalju pretraživaču u tekućem odgovoru.
Vrednosti kolačića se moraju kreirati pre nego što postanu deo odgovora. Jednom kada
postanu deo odgovora oni su wite-only, samo se mogu upisivati, što znači da se mogu utvrditi
samo njihova imena iz Response objekta, ali ne i njihove vrednosti.
Response objekat ima devet osobina i većina njih se može čitati i editovati. Njih
kreira server ali se mogu izmeniti tako da odgovaraju potrebama.

Buffer Ova osobina može biti True ili False, i određuje da li će se izlaz koji se
obrađuje držati u baferu dok ceo izlaz ne bude spreman za dostavljanje. Pošto se mora
podesiti ova osobina pre nego se pošalje bilo koji drugi izlaz, ona obično predstavlja prvu liniju
na ASP stranici. Baferovanje je True po defaultu u ASP 3.0 i False po defaultu u ranijim
verzijama.
IsClientConnected Ova osobina je takođe True ili False, u zavisnosti od toga da li
je pretraživač dalje povezan i da li učitava stranicu. Korisna je za iniciranje akcije kada korisnik
ode na drugu stranicu pre nego što se završi obrada tekuće stranice.
Expires Vrednost ove osobine je broj koji predstavlja vreme u minutima za koje je
stranica validna. Ako korisnik ima ovu stranicu u keš memoriji za kraće vreme od Expires
vrednosti, keširana stranica će biti prikazana, u suprotnom će biti prikazana druga stranica.
ExpiresAbsolute Ova osobina predstavlja određeni datum i vreme kada stranica
treba da istekne, nezavisno od toga koliko je stara. Predstavljena je kao vrednost za
datum/vreme sa znakom za funtu ispred i iza vrednosti.
Status Ova osobina sadrži vrednost statusa i poruku koja će biti poslata
pretraživaču u slučaju nastanka greške i takođe se može koristiti da ukaže na uspešnu
obradu. Koristi string kao vrednost za poruku.
CasheControl Ova osobina kontroliše ili bi bar trebalo da kontroliše da li proxy
serveri keširaju stranicu. Ne pridržavaju se svi proxy serveri ove osobine. Ako je potrebno
omogućiti keširanje treba je podesiti na Pubilc, a ako keširanje treba isključiti treba je podesiti
na Private. I ova osobina ima vrednosti u obliku stringa.
Charset Ova osobina dodaje ime karakter seta koji se koristi u HTTP Content-Type
zaglavlju i predstavlja string.
ContentType Ova osobina se može koristiti za podešavanje tipa HTTP sadržaja za
odgovor. I ona ima string vrednost.
PICS PICS vrednost, takođe string, dodaje podatke u zaglavlje i ukazuje na to da li
odgovor sadrži teme za odrasle, nasilje i tako dalje.

Response objekat je vrlo bitan i uključuje veliki broj korisnih metoda.

- 41 -
Diplomski rad Poslovne Web prezentacije

Write(“string ili neka druga vrednost”) Ovaj metod se koristi za upis stringa ili
druge vrednosti u sveukupni odgovor i obično se umeće u HTML kod na lokaciji na kojoj se želi
da string odgovora postane deo stranice.

Upis podataka u pretraživač vrši se metodom Write, sintaksa je jednostavna:

<% Response.Write”tekst koji treba ispisati” %> <BR>


<% Response.Write”tekst u drugoj liniji” %>

Umesto ovakvog prelaska sa ASP koda na HTLM, direktiva BR koja označava


prelazak u novi red može se jednostavno smestiti između znakova navoda i time se izbegava
naizmenično prelaženje se ASP-a na HTML i ubrzava rad:

<% Response.Write”tekst koji se ispisuje <BR> tekst u drugoj liniji” %>

Ispis podatak prikupljenih formularom:

Response.Write Request.Form(“ime_polja”)

Kako je Response.Write jedna od najčešće korišćenih metoda, zbog lakšeg i bržeg


pisanja koda ova metoda se može pozvati navodeći znak jednakosti:

<% = “tekst koji se ispisuje”%> ili <%=Request.Form(“polje”)%>

Redirect(“url”) Metod koji kazuje pretraživaču da učita stranicu, ili navedeni URL.
Sintaksa je opet veoma jednostavna:

<% IF Request.Form(“polje”)=uslov1 THEN


Response.Redirect(“ime_fajla1.htm”)
ELSE
IF Request.Form(“polje”)=uslov2 THEN
Response.Redirect(“ime_fajla2.htm”)
ELSE
Response.Redirect(“default.htm”)
END IF
END IF %>

Flush() Ovaj metod prouzrokuje pražnjenje bafera u trenutnoj fazi obrade. Koristan
je za obezbeđivanje delimičnog odgovora za korisnike, posebno kada preostala obrada može
trajati prilično dugo, tako da oni nastavljaju da čekaju na ostatak stranice.
End() Ovaj metod završava obradu i vraća onoliko koliko je do tog trenutka
završeno. Koristan je kada neki proces zahteva mnogo vremena ili kada se ne može
kompletirati normalno.
Clear() Ovaj metod jednostavno briše sadržaj bafera za odgovor, ali ne i HTTP
zaglavlja.
AddHeader(“ime”, “sadržaj”) Ovaj metod dodaje namensko zaglavlje u odgovor,
sa vrednostima za ime i sadržaj i mora se odabrati pre nego što se pošalje bilo kakav sadržaj
stranice.
AppendToLog(“unosulog”) Metod koji dodaje string u unos u log Web servera za
odgovor kada se koristi W3C Extended Log File Format.

- 42 -
Diplomski rad Poslovne Web prezentacije

BinaryWrite(SafeArray) Ovaj metod se koristi za upis podataka koji su sadržani u


varijant tipu SafeArray u izlazni tok konverzije karaktera. Koristan je za upis binarnih podataka
kao što su oni podaci koji sačinjavaju fajlove slika.

6.5. Cookies – kolačići


Kolačići su mali stringovi koje Web server može poslati pretraživačima i zatim ih po
potrebi ponovo pročitati. Kolačići imaju atribute koji određuju njihovo vreme trajanja,
dostupnost i sl, što se može podesiti pomoću Response objekta. Vrednost kolačića može biti
podešena prema bilo kojoj izabranoj šemi, obično je to jedinstveni identifikator kojim se može
razlikovati jedan pretraživač od drugog. Među uobičajenim vrednostima koje se podešavaju u
kolačićima su datum isticanja, domen i putanja, korisnička imena i lozinke, ili bilo šta drugo što
je potrebno pročitati sledeći put kada se neki pretraživač poveže. Jedna od osobina kukija je i
da ih klijent može odbiti. Ovu osobinu klijenti podešavaju u svom browseru, međutim statistike
govore da negde oko 90% surfera nije zabranila prijem kukija.
Primena kukija je vrlo široka, naročito u čisto komercijalnim Web aplikacijama.
Postoje sajtovi koji putem formulara anketiraju posetioce, taj izbor se zapisuje u bazu
podataka na serveru, a klijent kao 'dosije' dobije kuki. Kada posle određenog vremena ponovo
pristupi sajtu, server ga na osnovu kukija prepoznaje i na osnovu podataka iz baze kreira
stranicu prilagođenu korisnikovim interesovanjima. Perfidnijim algoritmima se mogu na osnovu
samog listanja stranica na jednom sajtu, bez posebne ankete, formirati podaci koji se upisuju u
kolačiće. Jedna od zanimljivih primena kolačića je i praćenje broja poseta svakog pojedinčnog
posetioca. Na osnovu upisa u kukije, server zna, kada i koliko puta je neko posetio sajt. U
rizičnu primenu kukija spadaju logovanja. Web aplikacije, nakon prvog logovanja, unosa
usernama i passworda, ove podatke smešta u kukije. Kada se sledeći put pristupi sajtu, podaci
iz kukija se očitavaju i ponovno logovanje je nepotrebno. Pošto su kolačići po svojoj prirodi
tekstualni fajlovi postoji mogućnost da neko pristupi tim podacima i vrednosti postavi u svoje
kukije i na taj način obezbedi pristup.
Kolačići se očitavaju preko Request objekta, dok se njihov upis vrši Response
objektom. Jednostavan kod kojim se u kukije beleži broj poseta nekoj stranici:
<% IF Request.Cookies(“poseta”) <> ”bila” THEN
Response.Cookies(“poseta”)=”bila”
Response.Cookies(“broj_poseta”)=1
ELSE
Response.Cookies(“broj_poseta”)=Request.Cookies(“broj_poseta”)+1
END IF %>

6.6. Server objekat


Web server igra centralnu ulogu u ASP aplikacijama, pa ASP ima ugrađen Server
objekat koji čini da upravljanje karakteristikama servera bude pogodno. Server objekat ima
ispravljačku ulogu. On pomaže kod ispravljanja grešaka, instanciranja komponenti, prevođenja
HTLM oznaka u njihove odgovarajuće kodove za prikaz, preusmeravanje kontrole i drugim
zadacima.
Server objekat je neophodan pošto se mora imati neki objekat ili program koji je
sposoban da obavlja akcije koje direktno utiču na server i njegovo operativno okruženje. Ima
jednu osobinu i sedam metoda koje su dizajnirane tako da daju kontrolu koja je potrebna na
strani servera.

- 43 -
Diplomski rad Poslovne Web prezentacije

ScriptTimeOut osobina Podešava ili vraća broj sekundi za koje stranica može biti
obrađivana pre nego što se generiše greška.
CreateObject(“identifikator”) metod Kreira istancu objekta, koja može biti
aplikacija, objekat za skript ili komponenta.
Execute(“url”) metod Prekida izvršenje tekuće stranice i izvršava drugu stranicu,
nakon čega se rezimira izvršenje tekuće stranice.
Transver(“url”) metod Radi kao i prethodni metod, ali ne vraća kontrolu na tekuću
stranicu nakon što se nova stranica izvrši.
MapPath(“url”) metod Vraća fizičku putanju i ime fajla za fajl ili resurs.
HTMLEncode(“string”) metod Konvertuje string HTML karaktera iz običnih
karaktera u specijalne karaktere, na primer konvertuje “<” u “&It”.
URLEncode(“string”) metod Konvertuje string karaktera koji sačinjavaju URL iz
nelegalnih karaktera, kao što je konverzija “?” u legalni karakter “%3F”.
GetLastError() metod Vraća detalje poslednje greške koja se desila, preko
ASPError objekta.

Include fajlovi na strani servera


Include fajlovi na strani servera, Server Side Include – SSI nude dobar niz
mogućnosti. Include fajlovi na strani servera su direktive koje kazuju serveru da obavi
određene akcije dok obrađuje skriptove. Kada se pišu prilično veliki i složeni skriptovi i kada je
teško obezbediti da uslovni iskazi odgovaraju jedni drugima, da bi kod bio lakši za čitanje i
debagovanje, jednostavno neki delovi skripta mogu se prebaciti u sopstvene tekstualne
fajlove. Umetanjem Include direktive na njihovo originalno mesto mogu se naknadno uključiti u
kod. Takvi segmenti skripta pored toga što olakšavaju čitanje, mogu se ponovo koristiti bilo
gde, a time je i ažuriranje pojednostavljeno.

6.7. Application objekat


Nakon Request i Response objekta, sledeća dva najvažnija objekta u ASP-u su
Application i Session objekti. Oni obavljaju veliki deo posla koji omogućava da Web sajt bude
realan program u aplikacionom stilu, a ne da predstavlja samo dinamičke stranice.
Ovi objekti su vezani sa stanje. U osnovi postoje dva stanja važna za praćenje u bilo
kom trenutku. Jedno je stanje posete individualnog korisnika, a drugo je stanje poseta svih
tekućih korisnika. Na primer, ako se korisnik nalazi na sajtu i popunjava anketu i predaje
odgovore, treba obezbediti da i drugi korisnici koji popunjavaju isti formular proslede odgovore.
Potrebno je znati i individualne i sveukupne odgovore. Kada se prva stranica ASP Web
aplikacije zahteva po prvi put, kreira se Application objekat, a kada individualni korisnik po prvi
put zatraži stranicu, kreira se Session objekat.
Kada posetilac prvi put zatraži stranicu, ASP pokušava da postavi kolačić koji traje
samo onoliko dugo koliko traje i poseta, dok posetilac ne ode na neki drugi sajt ili dok ne
zatvori svoj pretraživač. Ovaj kolačić, koji se naziva Aspsessionid, traje za vreme tekuće sesije
i nije vidljiv u Request Response Cookies kolekciji. ASP generiše ovaj kolačić automatski da bi
održao stanje u okviru aplikacije za svaku korisničku sesiju. U slučaju da pretraživač korisnika
ne dozvoljava kolačiće ne postoji mogućnost za praćenje interakcije sa njim.
Web aplikacijama su potrebni dostupni podaci koji obuhvataju sve tekuće korisnike,
kao i individualne korisnike. Podaci koji se nalaze u Application objektu su dostupni duž cele
Web aplikacije, dok su podaci koji se nalaze u Session objektu dostupni samo za tu
individualnu sesiju. Application objekat se kreira jednom čim prvi korisnik zatraži stranicu. I
Session objekti se kreiraju za prvog, ali i za svakog narednog korisnika. Session objekti se

- 44 -
Diplomski rad Poslovne Web prezentacije

zatvaraju kada korisnici napuste sajt, dok se Application objekti zatvaraju samo nakon što se
svi aktivni Session objekti zatvore ili kada se server isključi.

Application objekat nema osobine, ali ima kolekcije, metode i događaje. On


obezbeđuje globalni memorijski prostor za promenljive, sve su tipa Variant, sa podtipovima za
svaki tip podataka koji može da obuhvati tekst, brojeve, datume, nizove i pokazivače.

Događaji su kao okidači. Oni su jednostavno način za definisanje stvari koje se


mogu desiti objektima. Na primer, onClick događaj za dugmad u mnogim programskim
okruženjima dešava se svaki put kada se klikne na dugme. Application objekat je vezan za dva
događaja, koji obezbeđuju sredstvo za istanciranje akcija svaki put kada se aplikacija startuje
ili zatvori.

onStart Ovaj događaj se dešava kada se aplikacija startuje, pre nego što se izvrši
prva zahtevana stranica i pre nego što se kreiraju bilo kakve sesije.
onEnd Ovaj događaj se dešava kada se aplikacija završi i nakon što se sve sesije
završe.

Application objekat nudi dve kolekcije:

Contents Ova kolekcija se sastoji od promenljivih u Application objektu koje nisu


određene korišćenjem OBJECT oznake.
StaticObject Ova kolekcija se sastoji od promenljivih u Application objektu koje su
određene pomoću OBJECT oznake.
Application objekat uključuje nekoliko metoda koje su pogodne za upravljanje
Contents kolekcijom. Pitanje koje se javlja u vezi Application promenljivih, zbog njihove
globalne strukture, je ko ima kontrolu. Ako korisnik 1 pristupi vrednosti promenljive i nakon
neke obrade pokuša da je resetuje, šta se dešava ako korisnik 2 pokušava da uradi to isto u
isto vreme? Apllication objekat ima dve metode koje omogućavaju upravljanje konkuretnošću
na jednostavan i efikasan način.

Contents.Remove(“imepromenljive”) Ovaj metod omogućava uklanjanje


određene promenljive.
Contents.RemoveAll() Metod koji omogućava uklanjanje svih promenljivih u
Contents kolekciji.
Lock() Metoda koja omogućava zaključavanje Application objekta tako da samo
tekuća stranica može pristupiti Contents kolekciji.
Unlock() Metod koji otključava Application objekat.

6.8. ASP sesije


Kao i Application objekat i Session objekat postoji da bi promenljive učinio lako
dostupnim i da obavlja funkcije kao što su inicijalizacija tih promenljivih kada se sesija startuje.
Glavna razlika između aplikacije i sesije je da je aplikacija globalna, dok je sesija lokalna za
svakog korisnika. Promenljivama koje se nalaze u sesiji može pristupiti samo onaj korisnik koji
je startovao sesiju.
ASP kreira sesije po defaultu svaki put kada korisnik prvi put zatraži stranicu, i to
radi automatski za svakog korisnika koji zahteva stranicu, tako da server može identifikovati
svakog individualnog korisnika i razlikovati ga od ostalih. Ako kolačići nisu omogućeni ne može
se startovati sesija.

- 45 -
Diplomski rad Poslovne Web prezentacije

Kao i Application objekat i Session ima nekoliko događaja koji su vezani za njega i
koji omogućavaju iniciranje akcije kada se startuje sesija ili kada se završi. Sesije počinju
prvom stranom koja se zatraži a završavaju se pod sledećim okolnostima: sesija ističe pre
nego što se stranica učita, korišćenjem timeout osobine sesije, ili pozivom abandon metode
sesije.
Session objekat uključuje četiri osobine:
CodePage Ova osobina podešava stranicu koda kao broj koji predstavlja niz
karaktera koji će se koristiti u pretraživaču kod prikazivanja stranice. Na primer ANSI stranica
koda 1252 se koristi za prikazivanje stranica na američkom engleskom jeziku.
LCID Ova osobina postavlja lokalni identifikator. Svaki lokal ima jedinstveni broj za
identifikaciju koji se odnosi na takve stvari kao što je tip tekućeg simbola koji se koristi na
stranici.
SessionID Osobina koja sadrži broj za identifikaciju sesije, tipa long, koji generiše
server nakon kreiranja sesije. Svi SessionID brojevi su jedinstveni u okviru instance
Application objekta, ali se mogu nanovo koristiti u sledećim instancama aplikacije.
Timeout Osobina koja se može koristiti za podešavanje i dobijanje vremena za
koje će sesija trajati pre nego što automatski istekne ako nijedna akcija nije obavljena.

Kao i appication objekat i Session objekat ima dve kolekcije:


Contetns Kolekcija sadrži sve promenljive i njihove vrednosti koje su generisane u
datoj sesiji, ali nisu definisane pomoću OBJECT oznaka.
StaticObject Kolekcija sadrži sve promenljive koje su definisane pomoću OBJECT
oznake. Vrednosti u Contets kolekciji se mogu menjati dok vrednosti u staticObjects kolekciji
ostataju statičke.

Session objekat takođe ima metode za uklanjanje promenljivih i za završetak sesije.


To su:
Contents.Remove(“imepromenljive”) Ovaj metod uklanja promenljivu čije je ime
navedeno.
Contents.RemoveAll() Ovaj metod uklanja sve promenljive iz Contets kolekcije.
Abandon() Metod koji završava tekuću korisničku sesiju i uništava Session objekat
kada se završi sa izvršavanjem stranice.

6.9. Komponente aktivnog servera


Ugrađeni ASP objekti, kao što su na primer Request i Response objekti, nisu jedini
objekti ili komponente koji su dostupni u ASP-u. Postoji niz objekata koji se nazivaju ActiveX
Data Objects koji su korisni za rad sa bazama podataka. Drugi tip komponenti se nazivaju
jednostavno komponente servera i one se instaliraju kao deo osnovne instalacije ASP-a i IIS-a
u Windowsu 2000. Komponente servera su vrlo dobre za obavljanje funkcija koje bi inače
zahtevale prilično obimno programiranje pomoću ASP-a i koje se mnogo brže izvršavaju od
običnog skripta. Komponenta znatno manje troši procesorsko vreme Web servera jer se radi o
kompajliranom kodu, a ne o skriptu koji se interpretira. Komponente su mali kompajlirani
programi koji se izvršavaju na serveru i predhodno testirani i debagovani. Može se upotrebiti
onoliko komponenti koliko to sistemski resursi dozvoljavaju, što znači da jedino brzina
procesora i količina memorije predstavljaju ograničenje.

- 46 -
Diplomski rad Poslovne Web prezentacije

Ad Rotator komponenta
Jedna od zanimljivih funkcija je i rotiranje banera na Web stranama. Ad Rotaor
komponenta ima tu sposobnost da prikazuje različite banere svaki put kada neko poseti
stranicu. Može se koristiti da proizvede bilo koju vrstu rotacionog rasporeda koji se želi, za bilo
koju veličinu slike koja je potrebna.

Fajl za raspored
Ad Rotator komponenta zavisi od fajla koji se naziva fajl za raspored da bi mogla
znati koje slike oglasa treba da prikaže, koje linkove da prikači na njih i koliko često svaka od
njih treba da se pojavi. Fajl za raspored sadrži i podatke koji mogu slati informacije fajlu za
preusmeravanje da bi linkovi mogli biti odgovarajuće formatirani.

Primer fajla za raspored rotator.txt:

redirect Adrotator2.asp
width 140
height 60
border 0
*
katedreA1.gif
katedre/katedre.htm
katedre na fakultetu
50
katedreA2.gif
katedre/katedre.htm
katedre na fakultetu
50

Redirect komanda u prvoj liniji se koristi da preusmeri sadržaj fajla u drugi fajl (fajl
za preusmeravanje).
Width(pikseli) komanda podešava širinu prikazanog oglasa u pikselima i ako nije
navedena koristi se podrazumevana vrednost od 440 piksela.
Height(pikseli) komanda podešava visinu prikazanog oglasa u pikselima i ako nije
uključena koristi se podrazumevana vrednost od 60 piksela.
Border(pikseli) komanda podešava širinu granice oko slike u pikselima. Obično se
postavlja na 0 tako da se nikakva granica neće biti prikazana.

Nakon linija sa navedenim komandama postavlja se zvezdica (*) koja služi kao
separator pre nego što se unesu sledeće individualne osobine za svaki oglas:

ImageURL ova osobina ukazuje na lokaciju slike oglasa. Može biti na serveru ili na
potpuno drugoj lokaciji, na primer na Web sajtu oglašavača.
AdvertiserLink osobina koja ukazuje na mesto na koje se korisnik odvodi kada
klikne na sliku. Ako nije određen nikakav link treba umetnuti ctricu.
Text(string) ova osobina prikazuje tekst kao alternativu ako slika ne može iz ma kog
razloga da se učita.
ImpressionRatioNumber ova osobina jednostavno predstavlja procenat koliko će
se puta određeni oglas pojaviti na stranici. Ne postoji nikakav redosled u kom će se slike
prikazivati. Ad Rotator komponenta generiše slučajni proces selekcije, ali osigurava da se
svaki oglas pojavi određeni broj puta.

- 47 -
Diplomski rad Poslovne Web prezentacije

Fajl za preusmeravanje
Fajl za preusmeravanje može biti bilo koji validan skript, na primer ASP skript koji
koristi Response.Redirect metod za obavljanje akcije preusmeravanja adrotator2.asp, koji ima
samo jednu programsku liniju:

<% response.redirect (request.QueryString("url")) %>

Jedina funkcija ovog fajla je da uzme selektovani URL za preusmeravanje i URL


slike iz osobina oglasa fajla za raspored. Deo Response.Reditect vrši redirekciju na url koji je u
zagradi, a koristeći metodu QueriString Response objekta uzima se url.

Korišćenjem ASP skriptova ostaje očuvana struktura HTML dokumenta. Međutim,


prethodni program ima samo jednu liniju i struktura očigledno nije uopšte očuvana. To je iz
razloga što program AdRotator2.asp vrši samo redirekciju tako da se od njega ne serveru ne
generiše nikakav HTML fajl. Ako bi ovaj prigram imao zaglavlje, ili bilo kakav sadržaj koji vrši
ispis po browseru, tokom izvršavanja bi smo dobili poruku o grešći, jer zaglavlje već postoji.

GetAdvertisement (tekstualni fajl za raspored) je metod Ad Rotator komponete


koji uzima osobine slika i URL-ova iz tekstualnog fajla za raspored i u tom procesu kreira
odgovarajuće HTML oznake za dobijanje putanje i imena fajla slike i URL-a za
preusmeravanje.

Da bi sve ovo radilo potrebno je i u jednom asp fajlu kreirati objekat tipa AdRotator.
To se može postići pomoću asp koda od samo dve linije:

<% set objPromenaSlika=server.createObject("MSWC.AdRotator") %>


<% = objPromenaSlika.GetAdvertisement("rotator.txt") %>

U prvoj liniji kreira se objekat pod nazivom objPromenaSlika, korišćenjem


CreateObject metode Server objekta i taj objekat je tipa je AdRotator.
U drugoj liniji, već kreirani objekat objPromenaSlika koristi metodu
GetAdvertisement objekta AdRotator za pozivanje tekstualnog fajla rotator.txt.

Browser Capabilities komponenta


Vrlo korisna mogućnost koja se može dodati u aplikacije za Web sajt je sposobnost
da se detektuje tip pretraživača korisnika. U principu, Web i HTML ne zavise od platforme, ali u
realnosti svaka nova verzija pretraživača dodaje nove, nestandardne karakteristike koje drugi
tipovi pretraživača ne podržavaju. Nije neuobičajeno da se napiše kod za nekoliko verzija
stranice da bi bio saglasan sa većinom tipova pretraživača koji se trenutno koriste. Dodavanje
Browser Capabilities komponente znači da se može detektovati i odgovoriti sa odgovarajućom
Web stranicom za mnoge pretraživače koji postoje.
Na računarima (serveru) postoji fajl koji se naziva browscap.ini. Ovaj fajl sadrži
mogućnosti pretraživača za koje je bio najskorije ažuriran. Postoje Web sajtovi gde su
dostupne ažurirane verzije browscap.ini fajla. Ovo je trekstualni fajl koji ima specifičnu
sintaksu, a jedan deo fajla izgleda ovako:

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; IE 4.x
[IE 4.0]
browser=IE

- 48 -
Diplomski rad Poslovne Web prezentacije

Version=4.0
majorver=4
minorver=0
frames=TRUE
tables=TRUE
cookies=TRUE
backgroundsounds=TRUE
vbscript=TRUE
javascript=TRUE
javaapplets=TRUE
ActiveXControls=TRUE

Ime i verzija pretraživača su zatvoreni u zagrade. Svaka osobina koja je definisana u


ovom fajlu ima svoju sopstvenu liniju gde je ime osobine postavljeno tako da bude jednako
vrednosti osobine za ovaj pretraživač/verziju. Većina su jednostavno Boolean vrednosti True i
False.
ASP stranica može prikazati mogućnosti pretraživača korisnika korišćenjem
jednostavnog koda i pošto se mogućnosti pretraživača mogu detektovati, onda je lako
preusmeriti korisnika na odgovarajuću verziju fajla na koji se povezuje.

Content Linking komponenta


Tabela sadržaja predstavlja Meta podatke o sadržaju rada, koji obezbeđuje lak način
da se pronađu informacije od interesa. Cilj Content Linking komponente je da se stvori lak
način za pristup tabelama sa sadržajem, kao i da se obezbedi niz navigacionih linkova kroz taj
sadržaj. Komponenta ima niz metoda koje omogućavaju da se sazna količina sadržaja tj. broj
fajlova i vraća opis i link na svaki od tih fajlova, omogućavajući lako kretanje stranicama.
I Content Linking komponenta zavisi od spoljašnjeg fajla koji se čuva na serveru i
koji sadrži njenu listu sadržaja kojom se može navigirati. Svaka linija tog tekstualnog fajla
uključuje tri stvari: relativni URL za stranicu sa sadržajem koja je od interesa, tekst za prikaz i
komentar koji opisuje sadržaj.

Content Rotator komponenta


Content Rotator komponenta je slična Ad Rotator komponenti po tome što prikazuje
selektovani sadržaj u skladu sa tekućom srazmerom. Kao i Ad Rotator komponenta i ova
komponenta koristi fajl za raspored koji sadrži listu sadržaja koji treba da bude uključen u
rotaciju, ali jedina stvar koju možete podesiti, osim sadržaja koji se rotira, je razmera rotiranja.
Content Rotator komponenta ima dve metode:
GetAllContent(fajl_liste_sadržaja) metod koji prikazuje sve unose za sadržaj u
fajlu za sadržaj.
ChooseContent(fajl_liste_sadržaja) ovaj metod uzima sledeći selektovani listing
sadržaja iz fajla za raspored u skladu sa odabranom srazmerom.

Fajl za raspored Content Rotator komponente ne pokazuje sadržaj u rasporedu, već


prikazuje sadržaj u skladu sa srazmerom koja se podesi. Svaki element sadržaja započinje
znacima za procenat (%%) zatim brojem za srazmeru rasporeda. Iza slede komentari iza dve
kose crte pa nova linija sa sadržajem dok se ne naiđe na sledeći znak za procenat, na primer:

%% 1 // komentar
linija sa sadržajem

- 49 -
Diplomski rad Poslovne Web prezentacije

%% 3 // komentar
novi sadržaj....

Counters komponenta
Counter komponenta se lako može koristiti za kreiranje bilo kog broja individualnih
brojača. Svaki brojač koji se kreira čuva broj u tekstualnom fajlu, ali ovaj fajl se ne ažurira dok
se aplikacija ne završi ili dok se ne stopira server.
Counters komponenta ima metode za kreiranje brojača i dobijanje njihovih vrednosti,
kao i za njihovo inkrementiranje, podešavanje i uklanjanje brojača.

Page Counetr kompnenta


Page Counter je specijalna vrsta brojača koji je specijalno dizajniran da pomogne u
praćenju broja poseta stranici. Kao i counters komponenta ima metode za prćenje broja
posetioca za tekuću stranicu, inkrementiranje i resetovanje brojača.

Premission Checker komponenta


Ovo je nešto složenija komponenta za upotrebu i podešavanje i njena funkcija je da
pomogne u upravljanju zabranjenim oblastima u sistemu. Ima jedan metod koji proverava da li
tekući korisnik ima odgovarajuće dozvole da bi mogao da koristi određene resurse. Zabranjuje
se pristup anonimnim korisnicima i dozvoljava pristup autorizovanim korisnicima datom
zabranjenom fajlu.

Tools komponenta
Tools komponenta je vrsta višenamenske, sveobuhvatne komponente koja sadrži
nekoliko funkcija. Ona se može koristiti za proveru da li postoji određeni fajl, može generisati
slučajne brojeve i može se koristiti za kreiranje prilagođenih stranica. ProcessForm(izlaz,
template, tačkaumetanja) je metod koji uzima fajl koji je određen kao template, šablon, umeće
bilo kakve vrednosti koje prosleđuje inicijalna stranica u šablonski fajl od određene tačke
umetanja i upisuje fajl u izlaznu putanju i ime fajla na serveru.

Logging Utility komponenta


Logging Utility komponenta je novina koja se pojavila u ASP 3.0 i ona obezbeđuje
pogodan način za čitanje log fajlova i za upis u njih. Njena upotreba je ograničena na
administratore ili operatore na serveru na kom se izvršava IIS. Ako bilo ko drugi pokuša da
koristi ovu komponentu, skript koji instancira Logging Utility komponentu jednostavno neće
raditi. Jednom kada se otvori log fajl za čitanje, može se koristiti veoma širok spektar osobina
koje daju informacije o na primer, koliko bajtova je primljeno od pretraživača u zahtevu, koliko
je poslato kao odgovor, IP adrese klijenata, IP adresu servera, ime servera, sadržaje kolačića
i mnoge druge.

Komponente drugih proizvođača


Microsoft nije jedina kompanija koja proizvodi komponente koje rade sa ASP-om. U
stvari, Microsoft promoviše proizvodnju ovih komponenti od strane drugih proizvođača kao
sredstvo za popularizaciju ASP-a i IIS-a [2].

- 50 -
Diplomski rad Poslovne Web prezentacije

6.10. Baze podataka i SQL


U razvoju sadržaja savremenih Web sajtova koriste se razni jezici, kao što su HTML,
JavaScript, VBScript, itd. Jedan od njih je i SQL (Structured Query Languale ili Standard Query
Language) uobičajeni jezik za povezivanje sa bazama podataka. SQL izrazi se povezuju sa
bazama podataka putem ADO (Active Data Objects) objekata, koji se koristi za dalju obradu
izdvojenih slogova. Baze podataka su neophodan deo većine Web aplikacija zato što
omogućavaju skladištenje velike količine podataka, kao i njihovo efikasno korišćenje. Osnovna
jedinica smeštaja podataka u bazama podataka jeste tabela. Podaci u tabelama smešteni su u
slogove, a u okviru njih u pojedinačna polja. Pojedinačna tabela treba da sadrži podatke o
jednom entitetu realnog sveta. Svaki slog tabele sadrži podatke o jednom konkretnom objektu,
dok svako polje zapisa sadrži pojedinačni atribut konkretnog objekta. Za određenu bazu
podataka može se reći da je relaciona ukoliko podaci u svakom entitetu realnog sveta su
smešteni u posebnu tabelu. Podaci u pojedinačnom polju moraju biti elementarni, što znači da
ne predstavljaju mešavinu dva ili više podatka.
Baza podataka (Data Base DB) je grupa tabela podataka koje sadrže srodne
podatke. Baza podataka se može sastojati od samo jedne tabele ali to najčešće nije slučaj.
Tabele predstavljaju uskladištene podatke u vidu slogova, jedan red tabele
predstavalja slog. Svaki slog predstavlja podatke koji se odnose na pojedini subjekat. Slogovi
se sastoje od polja, a svako polje sadrži određeni tip podataka.
Slog (Record) jedinstveni zapis, vrsta u tabeli koji se sastoji od više polja sa
podacima, u opštem slučaju različitog tipa.
Polje (Filed) je pojedinačni podatak, stavka u slogu.
Upit (Query) predstavlja alat opšte namene, koji se koristi za izdvajanje određenog
skupa podataka, ali i za ostale zadatke kao što je ažuriranje ili brisanje pojedinih slogova.
Set slogova (Record Set) predstavlja grupu slogova, skup svih slogova jedne ili više
tabela kontrolisan i formiran uz pomoć upita.
Entitet (Entity) predstavlja svaku realnu činjenicu ili pojavu, bez obzira na suštinu.
Entitete razlikujemo na osnovu osobina Atributa.
Obrasci predstavljaju osnovni element korisničkog interfejsa baza podataka. Koriste
se za direktan pristup podacima u okviru neke tabele ili za jednostavnu navigaciju kroz
mnoštvo međusobno povezanih podataka. U Web aplikacijama koriste se HTML obrasci, kao
zamena za odgovarajuće obrasce u koji se koriste u odgovarajućim aplikacijama baza
podataka.
Izveštaji koriste se za prikaz određenih slogova iz baze podataka. U Web
aplikacijama se prikazuju putem Web stranica na monitorima.
Data Base Menagment System ili BDMS sistemi koji su namenjeni personalnim
računarima, kao što je Microsoft Access 2000, sadrže veliki broj alata za brzo i lako kreiranje
tabela i i veoma efikasnih baza podataka. Jedna od alatki koja je sastavni deo Accessa 2000
je namenjena za kreiranje upita. Ona koristi poseban interfejs QBE (Query By Exsample) ili
kreiranje upita na osnovu primera. QBE predstavlja vizuelni interfejs koji prikazuje kolone
(polja) tabele koje je potrebno izdvojiti i ujedno omogućava lako definisanje kriterijuma za
selekciju slogova.
Nakon izbora tabela i polja moguće je definisati i vrstu upita, upit izbora, upit
brisanja, upit dodavanja, upit ažuriranja, upit za kreiranje tabele. Access 2000 omogućava lako
kreiranje ovih upita, oni se u tom obliku mogu koristiti samo u njegovom okruženju. Pitanje je
kako te upite prilagoditi za upotrebu u okviru ASP skript aplikacija. Odgovor je SQL.
SQL se sastoji od izraza zasnovanih na engleskom jeziku koji definišu željeni upit.
Access 2000 pomoću QBE omogućava lako pretvaranje upita u SQL izraze. U suštini sistem u
pozadini kreira SQL izraz na osnovu upita na koji korisnik kreira grafički, na isti načina na koji
FrontPage kreira tekstualnu verziju HTML dokumenta na osnovu vizuelne predstave stranice

- 51 -
Diplomski rad Poslovne Web prezentacije

koju definiše korisnik. Na žalost, sintaksa i struktura SQL izraza koje kreira Microsoft Access
ne mogu se koristiti u ASP skriptovima, ali razlike su takve da zahtevaju samo manje izmene u
izrazima.
Jedna od najčešćih komandi SQL jezika je SELECT. Ova komanda pronalazi i
izdvaja podatke iz baze podataka, prihvatajući nazive pojedinih polja i tabela kao ulazne
parametre. Naredba FROM definiše tabele iz kojih se izdvajaju slogovi, zajedno sa njihovom
vezom, INNER JOIN definiše vezu između tabela, a naredba WHERE omogućava dodavanja
kriterijuma, na primer:
SELECT tab1.polje1, tab1.polje2, tab1 polje3, tab2.polje1, tab2.polje2
FROM tab1 INNER JOIN tab2 ON tab1.polje1=tab2.polje2
WHERE tab1.polje2='uslov1' AND tab1.polje1='uslov2'

Ako se traže sva polja u tabeli, kod se može pojednostaviti dodavanjem džoker
simbola (*) umesto naziva polja. Džoker znak zamenjuje nazive svih polja u tabeli:

SELECT nazivtabele.*
FROM nazivtabele

6.11. ADO objekti


ActiveX Data Objects – ADO objekti predstavljaju posebnu klasu ASP komponenti,
dizajniranu specijalno za rad sa bazama podataka. Oni omogućavaju rad sa bilo kojim tipom
baze podataka koja odgovara ODBC (Open Data Base Conectivity) standardu koji omogućava
pristup većini baza podataka. ADO sadrži veliki broj objekata za povezivanje i rad sa bazama
podataka.

Connection objekat
Objekat connection se koristi za uspostavljanje veze sa bazom podataka. Način
uspostavljanja veze i njeno održavanje je uslovljeno mnogobrojnim faktorima, uključujući i
mogućnosti servera, veličinu propusnog opsega, primenjeni softver i po pitanju servera i po
pitanju baze podataka. Čitav rad sa bazom podataka se odvija iza scene, ali će performanse
aplikacije znatno opasti ukoliko interakcija sa bazom nije optimalna. Proces uspostavljanja
veze troši dosta vremena, tako da ga treba startovati što ređe, odnosno samo onda kada je
neophodno.
Set Konekcija=Server.CreateObject(“ADODB.connection”)

Uspostavljanje veze sa izvorom podataka se može realizovati na više načina:


upotrebom stringa za uspostavljanje veze, upotrebom posebne datoteke sa parametrima ili
putem DSN – a (Data Surce Name).

String za uspostavu veze obično sadrži naziv i putanju do datoteke u kojoj je


smeštena baza podataka, korisnički ID i lozinku, kao i referencu na drajver koji će se koristiti
za konkretni tip baze podataka. Sintaksa stringa nije koplikovana, na primer:
StrKon=Driver={Microsoft Access Driver (*.mdb)}; DQB=”& Server.MapPach(imebaze)
Nakon čega je moguće uspostaviti vezu: Konekcija.Open StrKon

Datoteka sa parametrima veze je drugi način uspostavljanja veze sa bazom


podataka. U njoj se nalaze dodatni podaci o vezi, mada se uspostavljanje opet realizuje putem
stringa ili DSN-a, koji koriste podatke uskladištene u datoteci. Nakon kreiranja stringa ili DSN-

- 52 -
Diplomski rad Poslovne Web prezentacije

a, korisnik kreira praznu tekstualnu datoteku proizvoljnog naziva. Ekstenziju fajla je potrebno
preimenovati u .udl, a zatim desnim klikom miša otvoriti dijalog boks za podešavanje ODB
drajvera i načina povezivanja.
Konekcija.Open “File Name=putanja i ime fajla”

Uspostavljanje veze putem DSN ili putem naziva imena izvora podataka (Data
Source Name) se podešava izborom opcije ODBC Data Sources iz Control Panela i otvara se
dijalog boks ODBC Data Source Administrator. Izborom kartice System DSN, a zatim pritiskom
na Add... dobija se spisak drajvera za baze podataka. Nakom izbora i pritiskom na dugme
Finish dobija se dijalog boks u kome se navodi ime novokreirane veze i definiše se kompletna
putanja do nje, zajedno sa nazivom datoteke. Nakon podešavanja DSN-a, veza sa željenom
bazom podataka iz ASP skripta se poziva jednostavnim navođenjem imena DSN-a:
Konekcija.Open “imeDSN-a”

Command objekat
Objekat tipa Command takođe omogućava uspostavljanje veze (implicitno), ali
dodaje i mogućnost prosleđivanja parametara uskladištenim procedurama. Time je
omogućeno smeštanje dela koda aplikacije u uskladištenu proceduru, umesto u HTML
obrasce u obliku skripta. Uskladištene procedure predstavljaju sredstvo interakcije sa bazom
podataka, koji je mnogo brži od uobičajenog koda u okviru skripta, zato što su kompajlirane i
izvršavaju se na strani baze podataka.
Uspostavljanje veze je moguće izvršiti ne sledeći način:
Set Komanda=Server.CreateObject(“ADODB.Command”)
Komanda.ComandText=”naziv”
Set Slog=Komanda.ComandText
Vrednost svojstva CommandText sadrži naziv tabele koju je potrebno otvoriti, naziv
uskladištene procedure ili SQL izraz, čime se kreira objekat tipa Recordset i to samo u modu
čitanja.

Recordset Objekat
Objekat Recordset predstavlja još jedan korak u obradi podataka. Čitav proces rada
sa bazama podataka se sastoji od uspostavljanja veze putem objekata Connection i/ili
Command i prosleđivanja parametara koji definišu načine izdvajanja slogova. Zatim se
izvršavaju SQL naredbe (ili se pozivaju čitave tabele), kojima se definišu slogovi koje je
potrebno izdvojiti, odnosno komande koje je potrebno izvršiti ukoliko nije potrebno vraćanje
slogova. Nakon kreiranja objekta Recordset upotrebom njegovih svojstava i metoda realizuje
se konkretna obrada.
Metode objekta Recordset pružaju slične mogućnosti koje postoje i pri radu sa
tabelama, mogućnost kretanja od sloga do sloga, mogućnost njihovog dodavanja, ažuriranja i
brisanja. Kreiranje objekta Recordset je jednostavno:
Set Slog=Server.CreateObject(“ADODB.Recordset”)
Deo objekta Recordset je i kolekcija Fileds, koja sadrži podatke o svim raspoloživim
poljima. Sintaksa pristupa pojedinim poljima je određenog sloga je:
polje=Slog.Fileds(“ime_polja”)

- 53 -
Diplomski rad Poslovne Web prezentacije

Stream i Record objekti


Objekti Stream i Record dodaju nove mogućnosti sistemu ADO. Ranije ADO verzije
su omogućavale rad sa jednostavnim objektima tipa Recordest i njihovom poljima, ali nisu
podržavale rad sa izvorima podataka koji nisu bili struktuirani u obliku tabela.
Objekti tipa Record predstavlja pogodno sredstvo za prikaz hijerarhijskih struktura
podataka, kao što su datotečni sistemi, istovremeno obezbeđujući i kretanje kroz takve
strukture, a može se koristiti i za rad sa porukama u sistemu elektronske pošte.
Objekat Stream se koristi zajedno sa objektima Record ili Recordset radi pristupa
sadržaju neke datoteke, uključujući i binarne podatke. Koristi se za rad sa tekstualnim ali i sa
ostalim vrstama datoteka, računajući i one u kojima su smeštene slike.

6.12. Tehnologija grupnog rada i CDONTS


Mogućnost slanja elektronske pošte na osnovu sadržaja Web stranice je jedan od
poslova koje obavlja CGI skript na velikom broju Web servera. Slanje elektronske pošte iz
Web aplikacija otvara čitav spektar novih mogućnosti i ASP podržava takav način rada, a
tehnologija koja to omogućava nosi naziv Collaboration Data Objects – CDO ili objekti koji
omogućavaju grupni rad. CDO radi u sprezi sa Microsoft Exchange Serverom i obezbeđuje
razne tehnike grupnog rada. Smanjena verzija CDO sistema, namenjena Windowsu NT, nosi
naziv CDONTS (COD for Windows NT Server) i pruža podršku samo za rad sa elektronskom
poštom.

NewMail objekat
Objekat NewMail u suštini predstavlja običnu poruku elektronske pošte u
programskom obliku. Svojstva From (od), To (za) i Subject (tema) su sama po sebi jasna.
Vrednosti tih svojstava su ekvivalentne vrednostima koja se unose u odgovarajuća polja
obrasca za slanje novog pisma. Do tih vrednosti se može doći i putem unosa podataka od
strane korisnika, preko HTML obrasca u okviru Web stranice, nakon čega se one pridružuju
odgovarajućim svojstvima objekta.
Svojstvo Importance (prioritet) može imati vrednosti 0, 1 i 2 u koje odgovaraju
određenim vrednostima prioriteta. Ukoliko se vrednost prioriteta unosi interaktivno putem
HTML obrasca, mora se voditi računa da objekat prihvata isključivo numeričke vrednosti, a ne i
njihove tekstualne ekvivalente tipa Low, Normal i Hight.
Svojstvo Body (poruka) sadrži samu poruku, koja je standardno u obliku običnog
teksta. Ukoliko promenimo svojstva BodyFormat u HTML, upotrebom konstante
CdoBodyFormatHTML, poruka će biti poslata u HTML formatu. Interesantno je svojstvo
MailFormat koje standardno ukazuje da se pismom prenosi običan tekst. Međutim ukoliko se
vrednost tog svojstva promeni u MIME (Multipurpose Internet Mail Extension, dodaci sistemu
elektronske pošte koji omogućavaju slanje i drugih sadržaja, kao što su multimedijalni), sadržaj
pisama nije ograničen samo na tekst. Odgovarajuća konstanta koja omogućava prenos
različitih sadržaja je CdoMailFormatMIME.
Metod SEND objekta NewMail je zadužen za slanje poruke. Može se koristiti na dva
načina, nakon postavljanja željenih vrednosti odgovarajućih svojstava ili prosleđivanjem tih
vrednosti u obliku parametara prilikom poziva metode [2].

Set objEmail=CreateObject(“CDONTS.NewMail”)
objEmail.Send(From, To, Body, Importance).

- 54 -
Diplomski rad Poslovne Web prezentacije

7. Kako pokrenuti ASP?


Da bi ste pokrenuli ASP program, nije dovoljan samo browser, potreban je i jedan od
Web servera, na primer Microsoft Internet Information Server on Windows NT server ili
Microsoft Personal Web Server on Windows 98. Prvo rešenje se koristi kod Internet provajdera
ili kod zaista ozbiljnih sajtova, a drugo za sve one koji žele da pre nego svoje sajtove postave
na Internet pogledaju kako to ASP stranice izgleda u browseru. Microsoft je napravio
kompletan paket programa za opremanje sopstvenog Internet servera, sa svim potrebnim
servisima. Internet Information Server 5.0 dobija se sa Windowsom 2000, a ASP je ugrađen u
njega. IIS je poslednja inkarnacija Microsoftove snage na polju Web servera.

7.1. PWS
Personal Web server se isporučuje kao integralni deo Windowsa 98, a pošto je on
najzastupljeniji operativni sistem kod nas, nije suvišno reći nešto i o instalaciji Personal Web
Servera. Iz Control Panela treba odabrati Add/Remove Programs, pa zatim karticu Windows
Setup i kliknuti na Internet Tools, a zatim na Detales. U dijalog boksu koji se otvara potrebno je
uključiti opciju Personal Web Server:

Sl. 7.1. Izgled dijalog boksa Internet Tools.

Sistem traži CD sa instalacijom Windowsa, posle vremena koje je potrebno da se


Personal Web Server instalira, potrebno je u Run dijalog boxu iz start menija
upisati: E:/addons/pws/setup.exe. Ovim je instalacija Personal Web Servera
završena, nakon čega se na desktopu pojavljuje ikona sa nazivom Publish, a u
donjem desnom uglom pojavljuje se mala ikonica PWS-a, obično pored časovnika.

- 55 -
Diplomski rad Poslovne Web prezentacije

Podešavanje PWS-a može se vršiti desnim klikom na ikonicu Personal Web


Server, pa klikom na Properties ili levim dvoklikom na ikonu Publish. Pojavljuje se uvodni
prozor Personal Web Servera, Personal Web Menager:

Sl. 7.2. Osnovni prozor PWS-a, Personal Web Menager.

Personal Web Server je veoma lak za korišćenje. U levom frejmu nalazi se nekoliko ikonica
koje omogućavaju podešavanja, učenje, ili pak kreiranje prezentacije.

Ikonica Main vraća nas u početni prozor Personal Web Servera odakel ga je moguće
pokrenuti, klikom na Start ili kada više nije potreban isključiti ga. U ovom prikazu PWS
nudi i uvid u statističke podatke.

Klikom na ikonicu Publish otvarate prozor Publishing Wizard, gde se nudi mogućnost
objavljivanja Home Pagea. Ovu opciju je moguće aktivirati jedino ako je PWS
pokrenut.

Aktiviranjem ikonice Web Site otvara se prozor Home Page Wizard, gde se može
takođe uz pomoć čarobnjaka kreirati stranica. I ovaj prozor može biti aktivan jedino
ako se PWS pokrene.

Ikonica Tour će vam otvoriti prozor Product Tour i Personal Web Server će vas
pozdraviti i upoznati vas sa sobom i sa mogućnostima koje nudi.

Ikonica koju ćete najčešće koristiti, Advanced, otvara u desnom frejmu prozor
Advanced Options. U ovom prikazu možete da vršite podešavanja direktorijuma i
dokumenata.

- 56 -
Diplomski rad Poslovne Web prezentacije

Klikom na Start pokreće se Personal Web Server. Međutim, ba bi se pokrenuo ASP


program, potrebno je napraviti i virtualne direktorijume u kojima se asp fajlovi nalaze.
Klikom na ikonu u donjem levom uglu, Advenced, pojaviće se spisak svih virtuelnih
direktorijuma u koji treba dodati i direktorijum u kome se nalaze asp fajlovi koje treba
pokrenuti.

Sl. 7.3. Izgled PWS prozora u Advancad Options modu.

Virtualni direktorijum može se dodati na dva načina, desnim klikom na Home


direktorijum pojavljuje se padajući meni iz koga treba odabrati Add Virtual Directory, ili
jednostavno klikom na dugme Add... sa desne strane prozora.
U oba slučaja pojaviće se isti dijalog boks Add Directory u koji treba uneti ime
direktorijuma, ili to isto uraditi korišćenjem opcije Browse.
U polje Alias potrebno je upisati naziv virtualnog direktorijuma. Ono može biti isto
kao i ime direktorijuma u kome se nalaze asp fajlovi, a i ne mora, ali je važno zapamtiti ga jer
se taj naziv pojavljuje u adress polju.

Sl. 7.4. Izgled dijalog boks Add Directory. Dodavanje novih virtualnih direkorijuma.

Na ovaj način može se napraviti proizvoljan broj virtualnih direktorijuma, onoliko


koliko je to potrebno.

- 57 -
Diplomski rad Poslovne Web prezentacije

Potrebno je obratiti pažnju na ime računara koje je odabrano prilikom instalacije


Windowsa. Klikom na ikonicu Main na vrhu levog okvira i time se vraćate na uvodni prozor
Personal Web Menager.
Ovo ime može se pročitati kada je Personal Web Server pokrenut i nalazi se ispod
poruke »Web publishing is on. Your home page is available at:«

Sl. 7.5. Deo osnovnog prozora PWS-a nakon startovanja na kome se vidi ime računara i naziv osnovnog direktorijuma
(Home Directory).

U ovom primeru piše http://ana jer je ana ime računara koje je odabrano prilikom
instalacije Windowsa.
Da bi se konačno pokrenuo ASP program potrebno je u adress polju browsrea
upisati sledeće:

http://imer_računara/alias_virtualnog_direktorijuma/ime_fajla.asp

Na primer: http:ana/mfk/Index.htm

Dakle, ana je ime računara, mfk je alijas virtualnog direktorijuma, koje je isto kao i
ime direktorijuma u koji je smeštena prezentacija i asp fajlovi , a index.htm je naslovna
stranica.
U ovom slučaju stoji Index.htm, primećuje se da fajl nema asp ekstenziju. Ovo je iz
razloga što je Index.htm čist HTML dokument kojim su definisani okviri, a pošto se stranica
koja sadrži ASP kod učitava u jedan od frejmova PWS je neophodan da bi se njen izgled
mogao videti.

Potrebno je obratiti pažnju još na jednu stvar. Iza poruke »Your home directory« u
osnovnom prozoru PWS, piše:
C:\Interpub\wwwroot.

Home direktorijum se može promeniti i u mnogome olakšati rad. Potrebno je ponovo


se prebaciti na Advanced Opctions, klikom na ikonicu Advanced, markirati home direktorijum
na vrhu liste i kliknuti na dugme Edit Prpoerties, čime se dobija dijalog boks Edit Directory,
sličan dijalog boksu Add Directory.

Klikom na dugme Browse otvara se novi dijalog boks Browse for Folder, iz koga
jednostavno treba izabrati direktorijum koji je u stvari osnovni direktorijum sajta.

- 58 -
Diplomski rad Poslovne Web prezentacije

U ovom slučaju to je Mfk direktorijum u kome je smeštena prezentacija fakulteta.


Klikom dva puta na Ok podešavanje je završeno.

Ako ponovo otvorim osnovni prozor Personal Web Menagera, videće se izmena:

Sl. 7.6. Deo osnovnog prozora PWS-a posle promene osnovnog direktorijuma.

Da bih pokrenula prvu stranu nije potrebno da sada u adress polju unosim sledeću
kompletnu putanju, jer je Mfk direktorijum koji je prvobitno proglašen virtualnim i alias je isti-
Mfk:
http:/ana/mfk/index.htm

već je sasvim dovoljno napisati:


http://ana

i browser učitava naslovnu stranu, jer je sada Mfk postavljen kao home direktorijum, a kao nije
potrebno pisati čak ni ime fajla, već se podrazumevaju standardna imena Index.htm, (.html i
.asp), kao i Default.htm,(.html i .asp).

Ukoliko ovo nije podešeno možete jednostavno u Advaced Opctions u polju Default
Document(s) upisati ove nazive, oni su deo standarda i treba ih poštovati.

Da bi ste videli home page u browseru možete prozoru u Advaced Opctions, kada je
već home direktorijum podešen, desnim klikom miša na home direktorijum na vrhu liste (ili na
onaj koje je definisan kao home direktorijum, svejedno) otvoriti padajući meni i iz njega izabrati
opciju browse, čime se automatski u browseru otvara Home Page.

Personal Web Server nudi još opcija među kojima je i generisanje prezentacije uz
pomoć čarobnjaka, ali to nije u ovom slučaju od primarnog značaja. PWS je neophodan da bi
se u browseru mogao videti izgled ASP stranice pre nego se sajt postavi na pravi server u
mreži. Pošto Personal Web server troši ograničene resurse računara potrebno ga je isključiti
kada više nije potreban [7].

- 59 -
Diplomski rad Poslovne Web prezentacije

8. Microsoft FrontPage 2000

Jedan od članova velike Microsoft Office porodice, predstavlja snažan alat za


globalno upravljanje prezentacijom i za dizajniranje HTML stranica. Izgled FrontPagea je
prilagođen izgledu ostalih programa, pa je korišćenje njegovih osnovnih standardnih menija i
toolbarova lako i uobičajeno.

8.1. Prvi pogled na ProntPage


Osnovni prozor FrontPagea je podeljen na dva dela. U levom frejmu nalaze se šest
ikonica koje obezbeđuju različite uvide u strukturu Weba i prikaz stranica. Desni frejm
predstavlja editor koji omogućava rad u Normal - vizuelnom i HTML modu, kao i Preview
pogled u kojem se mogu videti rezultati rada.

Sl. 8.1. Izgled osnovnog prozora FrontPagea.

Prelazak sa jednog u drugi mod vrši se jednostavnim izborom jezičaka u donjem


levom uglu editora. Na samom dnu u status baru prikazuje se informacija koja govori o brzini
prenošenja stranice preko modemske linije.

Ikonica Page je aktivna po defaultu i prikazuje stranicu za editovanje ili pregled.


Kada je ona aktivna, moguće je izabrati jedan od modova editora.

Izborom ikonice Folder prikazuju se direktorijumi i svi fajlovi u aktivnom


otvorenom Webu. Njenim aktiviranjem prozor FrontPagea dobija još jedan okvir
sa spiskom datoteka pružajući kompletniji uporedni prikaz strukture Weba.
Reports ikonica, prikazaće listu izveštaja o različitim aspektima Weba, broj
povezanih datoteka, raskinutih linkova, broj 'sporih' stranica, kao i o mnogim
drugim greškama koje se mogu javiti.

- 60 -
Diplomski rad Poslovne Web prezentacije

Ikonica Navigation otvara prozor u kome je prikazan dijagram strukture Weba.


Ovaj dijagram je lako napraviti jednostavnim izborom stranica i njihovim
hijerarhijskim povezivanjem.
Prikazuje dijagram linkova ka aktivnoj stranici i od nje, nakon izbora stranice iz
folder liste. Ovaj dijagram FrontPage automatski generiše.

Prikazuje listu poslova koji treba da se urade. Kada se za pravljenje sajta koriste
čarobnjaci FrontPage generiše listu sam. Poslove je moguće dodati i spostvenim
izborom.

Ako ste već osmislili izgled sajta i stranica, ostaje vam samo da ideju realizujete, da
na stranice ubacite tekst i slike, da ih međusobno povežete i obavite sva potrebna
formatiranja. Gotovo sve se može obaviti automatski, pa čak i ceo HTML kod FrontPage
generiše u pozadini. Kada pokrenete FrontPage po defaultu dobijate blanko stranicu u Normal
modu. Ovaj vizuelni način rada olakšava posao, a ceo generisani kod može se videti izborom
matrice HTML na dnu editora . U ovom prikazu kod se može
prepravljati i dodavati ručno, ukoliko je to potrebno. Jedna od pogodnosti ovakvog rada je i to
što FrontPage ceo kod odvaja različitim bojama radi preglednosti i lakšeg snalaženja. Po
defaultu, boja HTML tagova je plava, komentari su sivi, skriptovi crveni, dok je sav ostali,
normalni tekst koji čini sadržaj stranice u crnoj boji. Sve ovo se može podesiti po želji, iz
glavnog menija klikom na Tools otvara se padajući meni na kome treba odabrati opciju Page
Options. Na dijalog boksu koji se prikazuje odabrati karticu Color Coding.
No, mnogo je lakše koristiti Normal mod za kreiranje stranica. U startu vam je
dodeljena sasvim prazna i ne formatirana strana. Ukoliko želite što manje rada, možete koristiti
neke od unapred pripremljenih šablona. Izborom iz glavnog menija opcije File, pa zatim New i
klikom na Page otvara se dijalog boks New:

Sl. 8.2. Izgled dijalog boksa New, kartica General.

- 61 -
Diplomski rad Poslovne Web prezentacije

Na prvoj kartici General (sl. 8.2.), pored blanko strane, ponuđena vam je i lista
veoma različitih šablona koje možete videti u Preview oknu. Svi ovi šabloni su unapred
formatirani i vama ostaje samo da dodate svoj tekst i slike.

No ukoliko želite da sami date izgled svojim stranicama počevši od praznog belog
lista najjednostavniji način je da radite u vizuelnom Normal modu, a potrebne korekcije izvršite
prelaskom na HTML mod. Ono što napravite možete videti ako odaberete Preview katricu, ali
daleko bolji pregled imate ako u standard tulbaru kliknete na ikonicu Preview in Browser.
Ukoliko izmene nisu snimljene FrontPage vas upozorava o tome, posle snimanja stranica će
biti prikazana u vašem browseru.

8.2. Formatiranje stranice


Kada se nađete pred praznom stranom, možete je prvo popuniti nekim sadržajem, a
njeno formatiranje ostaviti za kasnije. Recimo da je bolje i lakše prvo se pozabaviti
pozadinskim elementima, pa tek onda dodati tekst i slike.
Desnim klikom miša, bilo gde na stranici, otvara se manji meni na kome je zanimljiva
opcija Page Properties. Levim klikom otvorićete istoimeni dijalog boks:

Sl. 8.3. Izgled dijalog boksa Page Properes, kartica General.

Na kartici General možete da vidite gde se stranica nalazi i njen naziv. Međutim,
ovde stoji unsaved, a ime i naslov stranice FrontPage daje po defaultu, nazivajući ih novim
stranicama. Možete podesiti i pozadinski zvuk, ukoliko ga želite izborom nekog audio fajla,
klikom na dugme browse.

- 62 -
Diplomski rad Poslovne Web prezentacije

Međutim, mnogo je zanimljivija kartica Background. Do nje možete doći i izborom


opcije Format iz glavnog menija, pa zatim Backgroung.

Sl. 8.4. Izgled dijalog boksa Page Properes, kartica Background.

Ako čekirate kućicu Background picture, pa unesete ime fajla ili sliku jednostavno
izaberete sa browse, FrontPage u kod dodaje u elemente Body atribut bacground i njemu kao
vrednost dodeljuje ime slike koju ste izabrali, zajedno sa njenom putanjom, ako nije u istom
folderu kao i stranica, a vi kao rezultat dobijate sliku koja će biti u pozadini vaše strane.

Čekiranjem kućice Watermark ekvivalentno je dodavanju još jednog atributa


bgproperties="fixed", čime se dobija fiksirana slika. Ovaj atribut Netscape jednostavno neće
uvažiti i slika će se u njemu skrolovati kao da niste ništa ni definisali.

Ako čekirate kućicu Enable hyperlink rollover effekts, pa zatim kliknete na dugme
Rollover style, dobićete novi dijalog boks u kome vam je omogućeno da definišete izgled
aktivnog linka izborom fonta, njegove boje i veličine. Na isti način će se ponašati svi linkovi na
toj stranici. U Head delu dokumenta generiše se novi element <style fprolloverstyle> iza čega
sledi definicija stila.

Boje linkova možete da menjate i u delu Colors iste kartice, što će odgovarati
umetanju atributa alink, vlink, i link u Body tag. Međutim, ako ste prethodno definisali Rolover
style, ovi atributi se ignorišu, vidljivi su u Normal modu, ali ih browswer neće pročitati. Boju
pozadine i teksta možete opet na sličan način definisati.

Ako sve ove parametre već jednom podesite, prilikom kreiranja druge stranice, ne
morate isti posao raditi dva puta. Dovoljno je da čekirate kućicu Get bacground information
from another page i da navedete ime te stranice. Time dobijate na brzini i uniformnosti izgleda
srodnih strana.

Izaberite karticu Margin. Na njoj imate opcije ze podešavanje margina stranice. Po


defaultu, stranica uvek ima određen broj piksela za koji odvaja tekst i ostale elemente od

- 63 -
Diplomski rad Poslovne Web prezentacije

svojih margina. Čekiranje ovih kućica postižete isto što i dodavanjem atributa topmargin="0"
leftmargin="0" u Body tag.

Sl. 8.5. Izgled dijalog boksa Page Properes, kartica Margins.

Ovakvim podešavanjem tekst, tabele ili slike se 'lepe' uz ivice stranice. Ovo je bitno
kada se radi sa okvirima. Međutim, potrebno je prebaciti se u HTML mod i u Body tagu ručno
dodati atribute marginwidth i marginheight, i podesiti ih na nultu vrednost, tako će i Netscape
razumeti.
Na kartici Costum, nalazi se par opcija koje služe za definisanje i dodavanje meta
informacija u head delu dokumenta, međutim ove informacije ne utiču direktno na prikaz
sadržaja stranice.

Još jedna od kartica koja je važna za izgled stranice je i kartica Language. Desiće
se da naše simbole, č, ć, ž, š i đ, browser jednostavno ne vidi. U delu HTML encoding, ispod
'Save the document as' po defaultu stoji US/Western European. Prebacite ovu vrednost na
Central European.

Sl. 8.6. Izgled dijalog boksa Page Properes, kartica Language.

- 64 -
Diplomski rad Poslovne Web prezentacije

8.3. Rad sa tabelama


Tabele predstavljaju jedan od veoma važnih elemenata. One su veoma pogodne za
precizno pozicioniranje teksta i slika na ekranu. Na sreću, tabele je veoma lako definisati u
vizuelnom modu, bez potrebe da brinete o mnogobrojnim TR i TD tagovima koje FrontPage
generiše na osnovu izgleda tabele koju jednostavno nacrtate.
Kako da ih nacrtate? Ako kliknete na ikonicu u standard tulbaru Insert Table,
dobićete mali panel na kome birate broj redova i kolona tabele. Ograničeni ste na tabelu
veličine 4x4, što je u nekim slučajevima zadovoljavajuće. Drugi način je da odaberete opciju
Table iz glavnog menija, pa zatim Insert. Dobićete nešto udobniji dijalog boks:

Sl. 8.7. Izgled dijalog boksa Insert Table.

U gornjem delu Size podesite broj kolona i redova. Maksimalne vrednosti koje
možete zadati su 25. U donjem delu definišite poziciju tabele na stranici izborom parametra za
atribut alihgment. Po defaultu tabela nema okvir, border=0, što je u većini sličajeva i potrebno.
Ovu vrednost je opet veoma lako izmeniti. Cell padding vrednošću podesite broj piksela od
ivice ćelije teksta ili slike koji će biti unutar ćelije. Podešavajući Cell spacing, definisali ste
razmak između dve ćelije tabele. Ove vrednosti koje budete definisali u ovom dijalog boksu
ostaće zapamćene i ako želite da tabelu dobijete i na treći način.
Treći način je da ih bukvalno nacrtate. Izborom opcije Table iz glavnog menija, pa
zatim klikom na Draw table dobićete tulbar koji i ne treba posebno objašnjavati. Ikonice na
njemu su dovoljno intuitivne:

Sl. 8.8. Izgled toolbara Tables.

Izaberite 'olovku' i njome jednostavno crtajte tabelu povlačeći linije onako kako vam
to odgovara. Višak linija uklonite 'gumicom'. Sledeće tri ikonice koristićete kada je potrebno
umetnuti ili izbaciti cele redove ili kolone. Slično je i ako želite da izbrišete određene ćelije ili
jednu da izdelite na više delova, sledeće dve ikone jasno govore čemu služe. Zatim dolazi
pozicioniranje sadržaja u ćelijama tabele, izjednačavanje kolona ili vrsta po njihovoj širini,
definisanje boje pozadine ćelija tabele i automatsko podešavanje ćelija na minimalnu potrebnu
vrednost.
Ćelije tabele i njenu veličinu možete da menjate jednostavnim 'povlačenjem' linija.
Ako pozicionirate miša na jednu od linija tabele, kursor će dobiti izgled vertikalne ili
horizontalne strelice. Levim klikom 'zadržite' strelicu i pomerite liniju.

- 65 -
Diplomski rad Poslovne Web prezentacije

Nacrtali ste tabelu. Kako da podesite njene parametre? Jednostavno, bilo gde na
tabeli kliknite desnim dugmetom miša i otvorićete meni sa koga odaberite opciju Table
Properties i dobićete istoimeni dijalog boks.
Za podešavanje svake pojedinačne ćelije, kliknite mišem na određenu ćeliju i sa
istog menija sada odaberite opciju Cell Properties. Sva podešavanja važiće samo za tu ćeliju.
Ukoliko više ćelija treba da formatirate isto, selektujete ih, čime će dobiti ctnu boju, pa na isti
način otvorite dijalog boks Cell Properties.

Sl. 8.9. Izgled dijalog boksa Cell Properties.

Podešavanjem parametara na ovom dijalog boksu, FrontPage ubacuje


odgovarajuće atribute u TD tagove. Iz prva dva padajuća menija možete izabrati način na koji
će se tekst unutar te ćelije pozicionirati. Po defaultu tekst se ispisuje po sredini ćelije i lepi se
uz levu ivicu. Ove vrednosti možete podesiti i ako koristite dugmiće za pozicioniranje iz table
tulbara i za poravnavanje teksta is formatting tulbara iznad editora, s tom razlikom što će
FrontPage generisati malo drugačiji kod, ali je efekat isti.
Kućice za definisanje veličine ćelija imaju isto značenje kao i kada se radi o celoj
tabeli. Mora se voditi računa da se zadate vrednosti usaglase. Ukoliko se u ćelije tabele
umeću slike, poželjno je da veličina ćelije odgovara slici.
Kućica Header cell, ako je čekirate, označiće ćeliju kao ćeliju zaglavlja, čime se
automatski TD tag menja u TH, a tekst unutar ćelije biće podebljan i ukoliko se drugačije ne
naglasi centriran.
Donji delovi kartice, Borders i Background, izmeniće okvir i pozadinu svake ćelije
ponaosob.
Table Properties dijalog boks nudi vam veliki broj opcija. U delu Layout definišete
veličinu i poziciju tabele. Alignment opcija pozicionira tabelu na stranici, ubacujući atribute u
div tag u koji je ugnježdena tabela. Float ubacuje isti atribut za pozicioniranje ali u table tagu.
Ovaj atribut ima veću vrednost i on će se poštovati osim ako nije zadata vrednost default, kada
se koristi vrednost iz div taga.

- 66 -
Diplomski rad Poslovne Web prezentacije

Sl. 8.10. Izgled dijalog boksa Table Properties.

Specify Width i Specify Height kućice, ubaciće u table tagu vrednosti koje zadate za
dimenzije tabele, koje mogu biti date u pikselima ili u procentima. Cel pading i sell Spacing
imaju isto značenje kao i u ranijim primerima.
Border je po difoultu nula. Promenom ove vrednosti dobićete standardni okvir sive
boje. Ostale opcije za promenu boje okvira nema potrebe objašnjavati. Treba napomenuti
samo da će ove zadate vrednosti biti ignorisane ukoliko se za neku od ćelija odredi drugačije.

Boja pozadine tabele je bela. Može se promeniti na dva načina, promenom boje ili
postavljanjem pozadinske slike, na sličan način kako i kada se radi o celoj stranici. Sva ova
podešavanja važe za celu tabelu i svi atributi ptipadaju table tagu. I u ovom slučaju važi da se
boja pozadine tabele neće poštovati ukoliko se zada boja pozadine ćelije. Boja pozadine će se
videti samo u delu koji razdvaja ćelije jedne od drugih, što se može iskoristiti za pravljenje
elegantnijih okvira tabela nego što su standardni.

8.4. Kako da uredite tekst?


Što se teksta tiče, njegovo uređivanje je izuzetno lako. FrontPage ima Formatting
toolbar, koji ima skoro sve što je potrebno da definišete i da tekst uredite po svojoj želji i ukusu.

Sl. 8.11. Izgled Formatting toolbara.

Ikonice toolbara su prepoznatljive i veoma se lako snaći. Bilo da tekst smeštate u


ćelije tabela ili ne, postupak je potpuno isti. Po defaultu FrontPage postavlja stil na Normal,
font je Times New Roman, a njegova veličina normal odgovara vrednosti 3.

- 67 -
Diplomski rad Poslovne Web prezentacije

Tekst ne morate uniformno uređivati. Svaki odeljak možete formatirati nezavisno


jedan od drugog. Desnim klikom na označeni paragraf dobićete meni na kome možete
odabrati opciju Paragraph i dobićete dijalog boks Paragrhf Properties. To isto možete uraditi i
klikom na Format u glavnom meniju, pa zatim izborom opcije Paragraph. Pod paragrafom se
podrazumeva deo teksta između P tagova, ili što je ekvivalentno između dva klika ne Enter.

Sl. 8.12. Izgled dijalog boksa Paragraf.

U prvom polju Alignment definišite kako će tekst biti poravnat, po levoj ili desnoj
margini ili će biti centriran. Ovo isto podešavanje možete da uradite i korišćenjem ikonica u
Formating toolbaru za poravnavanje teksta .
U sledećem delu kartice, Indentation u polju Before text unećete vrednost za koju će
paragraf biti odmaknut od leve margine stranice. Polje After tekst služi za zadavanje razmaka
teksta od desne margine stranice. Malo grublje podešavanje možete da izvršite i korišćenjem
ikonica , od kojih druga pomera ceo paragraf od leve i desne margine, a prva ima
obrnutu funkciju.
Uvučenost prve linije teksta možete da podesite u polju Ident first line.
Deo kartice Spacing služi za definisanje razmaka jednog paragrafa od drugog.
Before se odnosi na rastojanje od paragrafa iznad, a after na paragraf ispod onog čije
podešavanja vršimo. Ako se selektuju svi paragrafi i obe vrednosti podese na nultu, razmak
između njih se gubi.
U delu Line spacing možete da odaberete razmak između linija teksta. Ako ga
ostavite nedefinisanog, podrazumevaće se da razmaka nema, možete ga samo povećati
na1.5 liniju ili na 2 linije. Inače sva vrednosti po defaultu su nula, osim razmaka između
paragrafa koji postoji, a koga je obično potrebno podesiti na nulu.

Za podešavanje fonta, veličine slova, i njihove boje, možete da koristite ikonice iz


Formating toolbara, ali nešto udobniji način da to radite i sa većim brojem opcija možete dobiti
korišćenjem Font dijalog piksa. Označite deo teksta na koji će se formatiranje odnositi, pa
desnim klikom otvorite meni na kome izaberite opciju Font, ili u glavnom meniju kliknite na

- 68 -
Diplomski rad Poslovne Web prezentacije

Format, pa iz njegovog menija odaberite opciju Properties. U oba slučaja dobićete isti dijalog
boks – Font.

Sl. 8.13. Dijaog boks Font, kartica Font Sl. 8.14. Dijalog boks Font, kartica Character Spacing

Na Prvoj kartici imate veoma veliki broj opcija i mogućnosti kako da uredite tekst.
Pored izbora fonta, veličine i stila, možete da odaberete i veoma veliki broj efekata. Na drugoj
kartici možete da podesite i u polju Spacing razmak između karaktera, a u polju Position
rastojanje od osnovne linije teksta. U preview oknu vidi se efekat koji opcija proizvodi pa je
podešavanje olakšano.

Sekcije teksta, ili ma šta na stranici možete da odvojite umetanjem horizontalne


linije. Liniju ćete ubaciti klikom na Insetr u glavnom meniju, pa odmah ispod na Horizontal Line.
Po defaultu, dobijate sivu liniju, centriranu i razvučenu preko celog ekrana. Ukoliko želite nešto
da promenite, bilo položaj, veličinu, debljinu ili boju, kliknite desnim tasterom miša na liniju, pa
sa pomoćnog menija odaberite opciju Horizontal Line Properties i dobićete istoimeni dijalog
boks.

Sl. 8.15. Dijalog boks Horizontal Line Properties.

- 69 -
Diplomski rad Poslovne Web prezentacije

Širinu linije možete da fiksirate, zadavanjem broja piksela, ili da je postavite relativno
u odnosu na veličinu brosora browsera, što postižete zadavanjem vrednosti u procentima.
Debljina linije se sadaje u pikselima.
Ukoliko čekirate kućicu Solid line, dobićete liniju potpuno ispunjenu izabranom
bojom. Ovde se mora imati na umu da Netscape ne podržava boje za tag HR i da će liniju
uvek prikazati u osnovnoj sivoj boji.

8.5. Umetanje linkova


Deo teksta koji označite možete proglasiti za hiperlink na više načina. Iz glavnog
menija u polju Insert, pa klikom na Hyperlink, zatim desnim klikom miša na označeni tekst i iz
menija odabrati istu opciju, ali vam je najlakše da kliknete na ikonicu koja se nalazi u standard
toolbaru . Dobićete dijalog boks Create Hyperlink.

Sl. 8.16. Dijalog boks Create Hyperlink

U polje URL upisuje se putanja i ime fajla. Vodite računa da ne zadajete apsolutne
adrese kao na primer file:///D:/direktorijum/ ime_faila.htm. Ovo će raditi na računaru, ali ako
fajlove prebacite na neki drugi računar, doći će do problema.
Da bi vam bilo lakše, pre nego što kreirate link, snimite stranicu na kojoj pravite
vezu. Kliknite na ikonicu i dobićete dijalog boks Browse from folder, odakle samo treba da
odaberete željeni fajl ka kome pravite vezu. To može biti drugi htm fajl, slika, pdf, word
dokument ili bilo šta drugo.

Za pravljenje linkova ka drugim sajtovima, potrebno je obavezno navesti potpunu


adresu http://www.ime_domena.

Stranica koje se poziva, učitava se po defaultu uvek od vrha. Ukoliko na stranici koju
pozivate imate obeležena mesta ulaza, tako da vaš link ne vodi na početak stranice već na
tačno određeno mesto, ime ulaza u tom drugom fajlu korišćenjem Bookmark polja možete
definisati. Kliknite na strelicu i dobićete spisak svih markera koji na toj stranici postoje.

- 70 -
Diplomski rad Poslovne Web prezentacije

Target frame polje definiše kako će se strana za koju pravite link učitati u browseru.
Kliknite na ikonicu i dobićete dijalog boks Target Frame.

Sl. 8.17. Izgled dijalog boksa Target Frame.

Po defaultu link se učitava preko prethodne stranice, to isto radi i opcija Same
Frame. Opcia Whole Page, učitaće stranicu preko celog prozora browsera, a opcija New
Windov otvoriće novi prozor u kojm će se stranica prikazati. Ovo obavezno koristiti kada se
prave linkovi ka drugim sajtovima.
U slučaju da koristite okvire, u polje Target setting upišite naziv okvira u koji nova
stranica treba da se učita, a ukoliko je raspored frejmova prikazan u polju Curent frames page,
možete jednostavno da kliknete na odgovarajući okvir i rezultat će biti isti.

Ukoliko nemate unapred spremljenu stranicu na koju ćete pozvati klikom na kreirani
link, onda odaberite opciju 'create a page and link to the new page', što znači da treba kliknuti
na ikonicu koja predstavlja prazan list . Ovim ćete dobiti dijalog boks New, na kome možete
da izaberete blanko stranicu, postojeći šablon ili stranicu sa frejmovima. Dalji postupak je isti.

Link ne mora da uvek vodi ka nekom stranu. Možete ga iskoristiti i za slanje maila.
Kliknite na ikonicu označenu malom kovertom i dobićete dijalog boks u koji treba upisati e-
mail adresu primaoca.

Sl. 8.18. Dijalog boks Create E-mail Hyperlink.

Klikom na ovakav link, program za slanje pošte otvara New Mail sa već unetom
adresom. Sve što tada treba uraditi je napisati mail i kliknuti na send.

- 71 -
Diplomski rad Poslovne Web prezentacije

Kako da napravite markere na stranici? Veoma lako. Ponovo kliknite na Insert


opciju u glavnom meniju, pa sa otvorenog padajućeg menija odaberite Bookmark opciju.
Dobijate sledeći dijalog boks:

Sl. 8.19. Dijalog boks Bookmark.

U Bookmark name polje upisaćete naziv mesta na koje želite da se prebacite iz


nekog drugog dokumenta, a ne na početak stranice. Ukoliko je stranica duga, možete postaviti
više markera, a sva imena koja budete zadali biće prikazana u polju Other bokmarks on this
page.
Ove markere na morate da koristite samo za prelazak sa jedne na drugu stranu, već
se veoma lepo mogu iskoristiti za prelazak sa jednog mesta na drugo u okviru iste stranice, na
primer vraćanje na vrh i sl. U polju URL Create hyperlink dijalog boksa, upišete jednostavno
ime istog ovog dokumenta i odaberete marker na koji će se stranica pozicionirati.

Kao mesto ulaza može da služi određeni tekst, a i ne mora. U normal modu, mesto
na kome pozicionirate kursor će biti mesto ulaza. Kada postavite marker u FrontPage eriteru
ćete videti zastavicu koja vam označava mesto gde se marker nalazi. Ukoliko kao marker
služi deo teksta, zastavica se u normal modu neće videti ali će tekst biti podvučen
isprekidanim crticama, a u HTML modu editora, FrontPage će generisati potreban kod, tj. u
okviru taga A umetnuće atribut name i kao vrednost dodeliti mu ime koje ste odabrali, a
ponuđena vrednost vam je upravo taj deo teksta.

8.6. Rad sa slikama


Kako da ubacite sliku na stranicu? Veoma prosto, u standard tulbaru imate malu
ikonicu Insert Picture From File i dobićete dijalog boks Select File. Izaberite sliku i kliknite
na ok i to je sve.

- 72 -
Diplomski rad Poslovne Web prezentacije

Sl. 8.20. Dijalog boks Select File.

Ukoliko želite da koristite slike iz Clip Arta, kliknite na Cancel, pa zatim na Clip Art.
Dobićete Galeriju odakle opet lako možete izabrati ilustraciju koja će adekvatno propratiti vaš
tekst.

Sl. 8.21. Clip Art Gallery.

Odavde izaberite kategoriju koja vam odgovara. Kada kliknete na sliku koju želite da
ubacite na stranicu, dobijate mali meni na kome odaberite opciju Insetr Clip . Time je slika
već na vašoj stranici, ali putanja koji FrontPage generiše u tagu SRC vodi ka /WINDOWS
/TEMP /Front Page Temp Dir/ direktorijumu.

- 73 -
Diplomski rad Poslovne Web prezentacije

Kada snimite stranicu, FrontPage će promeniti putanju slike i ponuditi vam sledeći
dijalog Save Embedded Files koji vam nudi da promenite folder u koji će FrontPage snimiti
ovaj umetnuti fajl, a koji je uvek isti kao i onaj gde ste snimili stranicu, kao i naziv slike da bi ste
se kasnije lakše snašli. Ovi fajlovi se snimaju sa ekstenzijom wmf.
Sada kada imate sliku na stranici, kako da je pozicionirate na tačno određeno
mesto, kako da je ukolopite i tekst i da definišete razmak između teksta i slike, kako da je
uokvirite i sl? Najbolji i najlakši način pozicioniranja je pomoću tabela. Ako celu stranicu
organizujete kao jednu veliku tabelu, u koju možete da umećete druge tabele, lako vam je da
sliku smestite u jednu od ćelija.
Desnim tasterom miša kliknite na sliku, na meniju koji dobijete izaberite opciju
Picture Properties i dobićete istoimeni dijalog boks.

Sl. 8.22. Dijalog boks Picture Properties, kartica General

Na kartici General vidite putanju i ime slike. Sliku možete i na ovaj način da
promenite, ako želite, kliknite na browse i izaberite neku drugu. Sledeći segment vam govori o
formatu grafičkog fajla. Možete ga promeniti, ali mnogo je bolje da sve promene koje se tiču
samih slika radite u programima koji služe za njihovu obradu, pa tek onda da ih umetnete na
stranice. To isto važi i za promenu veličine slike i bilo koji drugi efekat.

Deo Alternative Representation služi za zadavanje slike koju će browser prikazati


umesto one koju ste izabrali, pa tek nakon što učita sve celu stranu, prikazaće pravu sliku. Ime
i putanju te slike upisaćete u polje Low-Res. Alternativni teks, koji se prikazuje u slučaju da
slika iz nekog razloga ne može da bude učitana upisaćete u polje Text. Ovaj tekst će se u
browseru prikazati na mestu ne učitane slike ili ako se učita kada se mišem pređe preko slike.
Poželjno je uvek zadati taj tekst koji služi i kao njen opis.

Ukoliko slika treba da posluži kao link, tada ćete popuniti i donji deo kartice. U polje
Location upišite putanju i ime fajla koji će se pozvati klikom na sliku, ili je odaberite pomoću
dugmeta browse. Target Frame poslužiće vam da odaberete način na koji će se nova stranica
učitati.

- 74 -
Diplomski rad Poslovne Web prezentacije

Kartica Appearance vam omogućava da sliku pozicionirate ili da joj promenite


veličinu. Iz Alignment padajućeg menija možete da odaberete jedan od većeg broja načina
kako će se slika postaviti na stranici i kako će se okolni tekst pozicionirati u odnosu na samu
sliku.

Sl. 8.23. Dijalog boks Picture Properties, kartica Aperance.

Po defaultu slika se umeće na mesto gde je pozicioniran kursor, a tekst koji sledi
'lepi' se iz ivicu slike i poravnat je sa njenom donjom ivicom, a sledeće linije idu ispod slike.
Left i Right pozicioniraju sliku levo ili desno na ekranu, dok će tekst biti neposredno oko slike.
Sve ostale opcije pozicioniraju samo prvu liniju teksta, na vrh slike, po sredini ili u dnu, dok
sledeći red ide ispod slike.

Dodavanjem neke vrednosti u polje Border, slika će dobiti okvir. Horizontal i Vertical
Spacing određuju broj pikesla oko slike za koji će tekst i ostali elementi biti pomereni. Deo koji
se odnosi na veličinu, Size, možete da redefinišete, ali se ne preporučuje.

Slike uvek prate tekst, Web stranica bez njih je jednostavno teško zamisliva.
Umetanjem nepokretnih slika mogu da se postignu sasvim zadovoljavajući efekti, ali je još
impresivnije mogu da deluju i video zapisi koje takođe veoma lako možete da dodate na
stranicu. U glavnom meniju kliknite na Insert, na padajućem meniju odaberite opciju Picture, a
zatim na sledećem meniju kliknite na Video.

Dobićete dijalog boks Select File, potpuno sličan onom za izbor slike, sa tom
razlikom što ćete ovog puta izabrati drugi format fajla, na primer avi. Da bi ste podesili neke
od parametara, desnim klikom otvorićete meni na kome opet odaberite opciju Picture
Priperties i dobićete karticu Video.

- 75 -
Diplomski rad Poslovne Web prezentacije

Sl. 8.24. Dijalog boks Picture Properties, kartica Video.

Opcija Show controls in Browser bi trebala da prikaže tulbar ispod slike sa osnovnim
kontrolama, međutim ova komanda ne radi. U donjem delu kartice, podesite broj ponavaljanja
video zapisa, kao i akciju na koju će se video pokrenuti, prilikom učitavanja stranice, ili tek
kada korisnik pređe mišem preko slike. Sva podešavanja na karticama General i Appearance
važe i u ovom slučaju.

Šta dalje? Sa slikama možete uraditi još mnogo toga. Iz glavnog menija odabetite
opciju View, pa zatim Toolbars, nakon čega čekirajte polje Pictures i dobićete toolbar sa većim
brojem opcija:

Sl. 8.25. Izgled toolbara Pictures.

Gotovo sve ikonice su jasne. Mali broj njih vam je u stvari potreban. Promenu oblika,
kontrast i osvetljenost slike bolje ćete obaviti u nekom drugom programu, kao i dodavanje
okvira. Ikonica označena slovom A služi za dodavanje teksta preko slike. Ikonica do nje, može
biti od koristi ako imate veliku sliku, FrontPage će je klikom na ovu ikonicu transformisati u
znatno manji format i na nju vezati link ka originalnoj slici.
Najzanimljivije i najpotrebnije su označene pravouganikom, elipsom i poligonom, na
desnoj strani tulbara. Već je rečeno da slika može poslužiti kao link. Medjutim jedna ista slika
može se izdeliti na više delova, od kojih svaki deo sadrži link ka drugoj stranici, tj slika će biti
osetljiva na 'dodir'. U zavisnosti od toga kakvog oblika želite da bude aktivno područje slike,
odabraćete pravougaonik, elipsu ili poligon. Preko slike jednostavno povucite mišem da
obuhvatite tačno onaj deo slike koji želite da služi kao link. Sve izvan ovog područja ponašaće
se uobičajeno i prelaskom miša preko takve slike u browseru, kursor će se promeniti u oblik
koji označava link samo na odabranom području. Nakon označavanja aktivnog područja,
automatski dobijate dijalog boks Create Hyperlink, unesite ime i putanju do fajla i sav posao
ste završili. Isti postupak je za bilo koje područje, a možete ih napraviti koliko vam je to
potrebno. Ukoliko se desi da se područja preklapaju, prednost će imati onaj link, tj područje
koje je prvo definisano. Ako celo jedno područje ubacite u drugo, nećete imati nikakav efekat,
kao da drugo umetnuto područje niste ni definisali.

- 76 -
Diplomski rad Poslovne Web prezentacije

8.7. Rad sa frejmovima


Kako do okvira? Na dva načina, možete u html modu ručno napisati kod,
korišćenjem Fameset tagova ili kliknuti na karticu Frames Pages, u okviru New dijalog boksa i
odabrati jedan od već postojećih šablona, a u preview oknu vidi se raspored i veličina
frejmova.. Ukoliko je potrebno i ovaj kod može da se menja, ali ste u svakom slučaju
oslobođeni pisanja svih tagova i atributa.

Sl. 8.26. Izgled dijalog boksa New, kartica Frames Pages.

Ovim lakše dolazite do koda stranice koja sadrži samo definicije okvira. Stranice
koje će se učitati u pojedine frejmove su problem koji se rešava nezavisno. Posle izbora
odgovarajućeg šablona FrontPage vam nudi dve mogućnosti da to podesite:

Sl. 8.26. Izgled šablona okvira u FrontPage editoru u Normal modu.

- 77 -
Diplomski rad Poslovne Web prezentacije

Svaku od strana možete napraviti i definisati odmah, klikom na New Page. Međutim
mnogo je lakše ako imate već napravljene i gotove stranice koje ćete samo smestiti u okvire,
kliknite na Set Initijal Page i dobićete dijalog boks koji će vam pomoći da izaberete željenu
stranicu.
Da biste snimili sve stranice, kao i stranicu sa definicijom okvira, kliknite na već
prepoznatljivu ikonu Save u glavnom meniju. Dobićete dijalog boks Save As u kome vam
FrontPage omogućava da svakoj stranici dodelite ime i naziv (page title možete promeniti
klikom na dugme Change). Redom ćete zadavati imena stranica, a frejm u koji će se one
učitavati FrontPage vam naglašava plavom bojom:

Sl. 8.27. Izgled dijalog boksa Save As.

Ako se sada vratite na prikaz strane, u dnu editora se primećuju neke nove kartice.
U Normal modu videćete sadržaj svih strana, onako kako ste ih formatirali i moći ćete da ih
dorađujete. HTML mod, istovremeno će prikazati kodove svih stranica u odgovarajućim
frejmovima. Pošto okviri sužavaju vidljivo područje, desnim klikom otvorićete meni iz koga
izborom opcije Open Page In New Window otvarate aktivnu stranicu u celom prozoru editora,
čime imate daleko bolji pregled. Preview kartica, kao i obično, prikazuje rezultat rada.
Kartica No Frames prikazaće sve ono što zadate kao alternativu ukoliko se koristi
browser koji ne podržava okvire. FrontPage generiše tagove kojima se vrši definisanje i poruku
koja će se u tom slučaju prikazati: This page uses frames, but your browser doesn't support
them.
Kartica Frames Page HTML prikazuje HTML kod stranice koja definiše okvir. U ovom
prikazu možete izmeniti kod, veličine i svojstva okvira, kao i linkove ka stranicama koje se
učitavaju u frejmove.
Zavisno od okvira na koji ste kliknuli, na vrhu editora je označeno ime aktivne
stranice iza koga, razdvojeni crticom, stoji naziv stranice koja definiše i poziva okvire. Isti
raspored naziva biće prikazan i u Normal i u HTML modu, dok će klikom na ostale kartice u
vrhu pisati samo naziv osnovne stranice.
Ovako dobijeni okviri nisu bez dodatnog doterivanja zgodni za upotrebu ukoliko se
želi malo više preciznosti i elegancije. Korišćenjem šablona, po defaultu, okviri se prikazuju sa
borderom, uglavnom im se može promeniti veličina u browseru, pojavljuje se skrolbar, što
često i nije baš poželjno. Za bolje snalaženje i razumevanje potrebno je ipak poznavati osnove
HTML-a pa se kombinovanjem automatskog podešavanja i ručnog dodavanja određenih
elemenata u kod osnovne stranice može postići zadovoljavajući efekat.

- 78 -
Diplomski rad Poslovne Web prezentacije

Podešavanje frejmova, koje se inače vrši navođenjem atributa u Frameset tagovima


i zadavanjem njihovih vrednosti, može se izvršiti i prelaskom na vizuelni mod. Desnim klikom
bilo gde na polje okvira dobijate meni na kome treba izabrati opciju Frame Properties:

Sl. 8.28. Izgled dijalog boksa Frame Properties.

U Frame Properties dijalog boksu, možete da podesite ime okvira. Ovo ime je bitno
da bi okvir mogao biti meta drugih URL-ova. Ime stranice koja se učitava kada se osnovna
stranica pozove prvi put, definiše se u polju Initial page, ili klikom na dugme Browse čime
dobijate novi dijalog boks iz koga možete selektovati stranicu koju želite.

Veličinu okvira možete definisati u pikselima, procentima ili relativno u odnosu na


raspoloživi prostor. Ove vrednosti postaju vrednosti atributa u Frameset tagovima. Ovo je
primer šablona sa predhodne stranice, gde je stranica prvobitno podeljena na dva okvira koji
predstavljaju redove. Visina gornjeg reda je fiksirana brojem piksela dok se donjem redu
dodeljuje sav ostali prostor: <frameset rows="64,*">. Donji okvir je podeljen na dve kolone.
Desna kolona donjeg reda ima širinu 150 piksela, visina je relativna, a ostali prostor dodeljen
je trećem okviru <frameset cols="150,*">. Promenom ove vrednosti izmeniće se i parametri u
prvom Frameset tagu. Prilikom podešavanja ovih vrednosti treba biti pažljiv.

Marginwidth i Marginheight atribute elementa Frame, svakog pojedinačnog okvira,


možete takođe da podesite na nulu, sledećim ponuđenim opcijama u dijalog boksu, ali je bitno
kod uklapanja okvira da ovi atributi budu podešeni u Body tagu stranica koje se pozivaju.

Ukoliko ne želite da korisnici u svom browseru imaju mogućnost da promene


veličine okvira, čime imaju mogućnost da naruše izgled stranica, nemojte kućicu Resizable in
Browser ostaviti čekiranu, već je isključite. U kodu FrontPage dopisuje kao atribut elementa
Frame noresize.

Opcijom Show Scrollbars mošete dafinisati i pojavljivanje skrol bara na stranicama.


Po defaultu je if Needed, što odgovara vrednosti auto atributa scrolling elementa Frame. Ovu
vrednost je najčešće potrebno podesiti na to, što odgovara opciji Never.

- 79 -
Diplomski rad Poslovne Web prezentacije

Klikom na dugme Frames Page, dobićete dijalog boks Pages Propertis koji se
odnosi na stranicu sa definicijom okvira i aktivnom katicom Frames i koji se malo razlikuje od
dijalog boksa za podešavanje osobina ostalih stranica.

Sl. 8.29. Deo dijalog boksa Page Properties, katrica Frames.

Ako ne želite da okviri imaju vidljive granice isključite kućicu Show Borders, čime je
atribut Border u okviru Frameset taga automatski dobio vrednost nula. Veoma je pogodno i
razmak između okvira podesiti na nultu vrednost podešavanjem Frame Spacing vrednosti
takođe na nulu, što odgovara HTML atributu framespacing="0" u generisanom kodu.
Prelaskom na karticu Margins ovog istog dijalog boksa, i podešavanjem margina na
nultu vrednost, FrontPage generiše atribute topmargin="0" leftmargin="0" ali u Body tagu
između Noframes elemenata, koji služe kao alternativa za browsere koji ne prikazuju okvire.

8.8. DHTML efekti


Toolbar DHTML effect naćićete ako iz glavnog menija odaberete opciju View, pa
zatim toolbars i od ponuđenih kliknete na DHTML effects:

Sl. 8.30. Izgled DHTML Efrct toolbara.

FrontPage generiše JavaScript kod, koji se izvršava kada se izabrani događaj desi.
Imate više mogućnosti koje ćete izabrati iz padajućeg menija On: Click, Double click, Mouse
over ili Page load. U zavisnosti od ovog izbora, u polju Applay možete da odaberete efekat, a
podesićete ga u jednom od opcija u Chooise Settinga polju. Dinamičke efekte možete
primenjivati kako za slike tako i za delove teksta.

Senzorska dugmad
Senzorsko dugme ili Hover Button može da bude zanimljiv način da se napravi
hiperlink veza. U browseru, prilikom prelaska mišem preko ovih dugmadi menja se njihov
izgled. U standard tulbaru kliknite na ikonicu Insert component , pa zatim iz menija koji se
otvara Hover Button i dobićete dijalog boks Hover button properties.

Sl. 8.31. Dijalog boks Hover Button Properties.

- 80 -
Diplomski rad Poslovne Web prezentacije

Sve što treba uraditi je odabrati neku od ponuđenih opcija, odabrati boje i veličinu
dugmeta, tekst i naravno stranicu ka kojoj se kreira link. Senzorska dugmad predstavljaju Java
aplet napravljen pomoću FrontPagea.

Pokretne trake
Pokretne trake podržane su samo od strane Internet Explorera, Navigator ih ne
prepoznaje, pa njihova primena sužava izbor pretraživača. Ovaj dijalog boks nalazi se u istom
meniju kao i Hover button.

Sl. 8.32. Dijalog boks Marquee Properties.

Pomoću njega pravite traku sa tekstom koji se kreće sa jedne na drugu stranu
ekrana. Podešavanje svih parametara je lako i ne zahteva posebno razmatranje. Kao
alternativu, možete u HTML modu dopisati i BLINK element, tako će i Netscape istaći određeni
tekst.

8.9. Formulari
Postoje tri načina za pravljenje obrazaca: korišćenjem čarobnjaka Form Page,
korišćenjem šablona ili po sopstvenom planu. Da napravite obrazac korišćenjem čarobnjaka,
kliknite na File u glavnom meniju, pa zatim na opciju New i odaberite Page. Dobiće dijalog
boks New, na kome odaberite ikonicu Form Page Wizard.

Odabiranjem ove ikonice i klikom na Ok, pokrećete Form Page Wizard.


FrontPage će vam postavljati niz pitanja o tome šta sve želite na svom obrascu i
pravi formular na osnovu vaših odgovora. Posle toga možete da vršite promene
na obrascu radi tačnog prilagođavanja vašim potrebama.

Korišćenje šablona je nešto jednostavnije. Umesto postavljanja pitanja pomoću


Wizarda, FrontPage jednostavno ima unapred pripremljen formular za određenu
namenu, kao što je na primer knjiga posetilaca. Na istom dijalog boksu New, na
kome birate tip nove stranice, možete da odaberete i šablon za obrazac.
Formular dobijen na ovakav način ponovo se može prepravljati.

- 81 -
Diplomski rad Poslovne Web prezentacije

Kada želite da napravite obrazac po sopstvenom planu, kliknite na Insert u glavnom


meniju, pa sa dobijenog menija odaberite opciju Form, dobijate sledeći mali meni:

Sl. 8.33. Opcije menija Form.

Da ne biste morali stalno da otvarate ovaj meni, možete se prebaciti mišem na malo
sivo područje na vrhu menija, povucite ga ka stranici i dobićete toolbar sa manjim ikonicama
koje će vam biti dostupne u svakom trenutku.

Sl. 8.34. Izgled Form tollbara.

Prvo treba da napravite stranicu, pa zatim da na nju umetnete oblast za obrazac.


Forme se ne mogu ugnježdavati, ali na jednoj strani možete imati više njih.

Form

umećete oblast za formular na stranicu, a FrontPage i


automatski dodaje submit i reset dugmad. Ova oblast biće kreirana ako kliknete i na bilo koji
drugi element koji želite na obrascu. Dodavanjem ostalih elemenata FrontPage neće ponovo
kreirati submit i reset dugmad, oni su jedinstveni za celo formular, dok broj ostalih elemenata
nije ograničen. Push Buton ili dugme za pritiskanje, obično nije potrebno. U normal modu,
kliknite desnim dugmetom na polje, pa iz menija odaberite opciju Form Filed Properties, kako
biste podesili njegove osobine.

Sl. 8.35. Dijalog boks Push Button Properties.

Polje Name služi za dodeljivanje imena polju forme. Value vrednost će biti ispisana
na dugmetu. Tip dugmića menja se izborom jedne od tri opcije, submit, reset ili normal (push
button).

- 82 -
Diplomski rad Poslovne Web prezentacije

One – Line Text Box

Korisnici će u ovo polje moći da unesu samo određen


broj karaktera. Služi uglavnom za slanje imena, lozinki, e-mail adresa, i drugih kraćih
informacija.

Sl. 8.36. Dijalog boks Text Box Properties.

U Name polju upišite ime polja. Ovo ime je važno iz razloga da bi podaci koji se
šalju mogli biti pravilno preuzeti. Nemojte zadavati ista imena za ovakva polja. Izuzetak su
samo grupe radio dugmadi.
U polju Initial value, možete upisati neku vrednost koja će se videti kada browser
učita stranicu sa formularom, ali pored ovog polja obično se piše njegova namena, tako da je
zadavanje ove vrednosti suvišno.
Broj karaktera koje korisnik može da unese, definišite u polju Width in characters, a
možete polje jednostavno u vizuelnom modu mišem 'razvući' ili 'skupiti' koliko vam odgovara,
ali je to manje precizan način.
Password filed deo ovog dijaloga, nudi vam opciju da li će se tekst koji se šalje biti u
obliku lozinke ili ne. Ukoliko čekirate opciju Yes, u browseru će se prilikom unosa podataka
videti samo zvezdice.
Dugme Validate služi za određivanje tipa podataka koji se unose. Po defaultu nije
specificirano, a možete ih podesiti na samo tekst, celobrojne vrednosti ili brojeve čiji format
možete da definišete, a nude vam se i opcije zadavanja opsega u kome se uneta vrednost
može naći.

Scrolling Text Box


Ovo polje služi za unos veće količine teksta. Kliknite na polje u
normal modu, pa ponovo odaberite Form Filed Properties.
U polju Name, upisaćete ime polja, pa i kada je reč o
običnom tekst polju. Za razliku od prethodnog polja, ovde možete da podesite broj karaktera u
jednom redu, kao i broj redova koji će se videti na ekranu.

Sl. 8.37. Dijalog boks Scrolling Text Box Properties.

- 83 -
Diplomski rad Poslovne Web prezentacije

Tekst koji korisnici unesu može zauzeti i više redova od broja koji ste uneli i u tom
slučaju se pojavljuje skrolbar . Sve što se unese u ovo polje je vidljivo. Dugme validate ima isto
značenje kao i ranije.

Check Box
Kućice za potvrđivanje, u formularu služi kao polje za potvrdu.
Može ih biti više i nisu međusobno isključiva. Njihove osobine možete da podesite na sličan
način. FrontPage zadaje svakom polju različito ime koje možete da promenite. Dijalog boks za
podešavanje dobijate na isti način kod svih polja.

Sl. 8.38. Dijalog boks Check Box Properties.

U ovom dijalog boksu podesite ime polja i ostale vrednosti kao i kod ostalih polja.
Možete da podesite da kućica bude čekirana u startu kada browser učita stranicu ali i ne
morate, to ćete regulisati biranjem jedne od dve ponuđene opcije.

RadioButtons
služi kao dugme za izbor opcije. Takođe ih može biti više, ali
su međusobno isključiva i samo jedno u okviru određene grupe može biti selektovano.
Podešavanje parametara vršite u sledećem dijalogu.

Sl. 8.39. Dijalog boks Radio Button Properties.

Imena svih polja su ista. Formular će proslediti ime i vrednost samo selektovanog
dugmeta. Obično je jedno od dugmića uvek selektovano, ali ne mora. Ostala polja imaju istu
vrednost kao i ranije.

Drop – Down Menu

služi za dodavanje padajućeg menija, slično grupi radio dugmadi,


može se odabrati samo jedna opcija, ali ovaj element se može podesiti da bude omogućen

- 84 -
Diplomski rad Poslovne Web prezentacije

višestruki izbor. To ćete postići ako kliknete na Yes u donjem delu kartice Allow multiple
selections, a u polje Height unesite broj opcija koje će istovremeno biti vidljive na ekranu.
Da bi ste uneli opcije kliknite na dugme Add i dobićete dijalog boks Add Choice.

Sl. 8.39. Dijalog boks Drop-Down menu Properties. Sl.8.40. Dijalog boks Add Choice.

8.10. Pravljenje Web lokacije


Možete praviti stranu po stranu i njih povezivati međusobno, ali ako želite da vidite
zbirne informacije o svim fajlovima napravljenog sajta, izveštaje o greškama, linkovima i sl,
moraćete u FrontPageu da napravite i Web.
Iz glavnog menija izaberite opciju File, pa zarim opciju New i odaberite dalje Web,
kao na slici. Dobićete dijalog boks New, na kome imate više opcija.

Sl. 8.41. Dijalog boks New, kartica Web Sites

Izaberite opciju na primer One Page Web. FrontPage će kreirati Web sa samo
jednom praznom stranom, čiji naziv odgovara standardu – index.htm. U Page prikazu
videćete samo običnu stranicu.
Kada FrontPage formira Web, on pravi direktorijum pod imenom My Webs i
podrazumeva da ćete u taj direktorijum smeštati sve webove koje pravite. Ovo možete
jednostavno i da promenite ako vam ne odgovara.
Kliknite na ikonicu folder sa leve strane. Otvorićete novi frejm Folder List, koji vam
daje uvid u sve direktorijume koje imate u Webu. FrontPage automatski generiše dva
direktorijuma i home page.

- 85 -
Diplomski rad Poslovne Web prezentacije

Sl. 8.42. Igled FrontPage prozora sa prikazom liste direktorijuma u aktivnom Webu.

Direktorijum Images ako želite možete prebaciti slike i tako rasteretiti vaš glavni
direktorijum. Direktorijum _private služi FrontPageu da smešta datoteke koje se koriste za
organizovanje i upravljanje webom i po preporukama ne treba ga dirati. Na ove direktorijume
ne treba obraćati pažnju i možete ih jednostavno ignorisati.
Pored ovih podrazumevanih direktorijuma možete da napravite i sopstvene za ostale
specifične grupe podataka. Kada je u levom frejmu, u traci Views aktivna ikonica Folders,
kliknite na File, pa zatim na New i konacno na Folder. Ukoliko vam je aktivna ikona Pages ova
komanda vam neće biti dostupna.
Preporuka je da se fajlovi u direktorijume koje napravite prebacuju preko
FrontPagea, a ne preko Windows Explorera, zbog automatskog podešavanja hiper linkova.
Međutim, koristeći Windows commander nisam primetila pomenuti nedostatak.
Kada u svom Webu imate već nekoliko napravljenih ili prebačenih fajlova, možete da
vidite izveštaj. Kliknite na ikonicu Reports u levom frejmu.

Sl. 8.43. Izgled FrontPage prozora sa prikazom liste izveštaja aktivnog Weba.

- 86 -
Diplomski rad Poslovne Web prezentacije

Klikom na pojedina polja dobićete potpuniji izveštaj. Da bi ste se ponovo vratili na


Site Summary Reports, kliknite u glavnom meniju na View, pa na Reports i tako dobijate meni
na kome ćete odabrati tu ili neku drugu kategoriju.
Da bi ste ipak lakše i brže prelazili sa jednih izveštaja na druge, možete izbaciti mali
toolbar, koji ćete naći takođe u glavnom meniju u opciji View, pa Tools, pa zatim Reporting.

Sl. 8. 44. Reporting toolbar.

 Site Summary – zbirni prikaz svih raspoloživih izveštaja o Webu.


 All Files – sve datoteke u Webu, sa imenom, naslovom, lokacijom, veličinom,
vrstom datoteke i datumom.
 Slow Pages – datoteke kojima je potrebno duže vreme učitavanja od izabranog.
 Older Files – sve datoteke koje su starije od navedenog broja dana.
 Recently Added Files – sve datoteke koje su dodate u zadatom vremenskom.
opsegu.
 Recently Cfanged Files – fajlovi koji su promenjeni u zadatom vremenu.
 Broken Hyperlinks – sve hiperveze koje su pokidane ili nisu proverive.
 Unlinked Files – nepovezani fajlovi, datoteke za koje ne postoje veze ka ili od njih
u okviru posmatranog Weba.
 Component Errors – sve komponente u FrontPageu u kojima postoji greška.
 Review Status – stanje projekta pojedinačnih stranica u Webu.
 Assigned To – osobe kojima su dodeljene pojedine stranice za ažuriranje.
 Categories – kategorije Web stranica.
 Publish Status – da li su pojedine Web stranice objavljene na serveru.
 Uncompleted Tasks – poslovi koji su predviđeni,a nisu završeni.
 Unused Themes – stilski aranžmani uključeni u Web, ali nisu primenjeni ni u jednoj
datoteci.
Neke od ovih osobina bitne za izveštaj možete da podesite u posebnom dijalog
boksu. Iz glavnog menija odaberite Tools, pa zatim opciju Options, na dijalog boksu koji
dobijete odaberite karticu Reports View.

Sl. 8.45. Dijalog boks Options, kartica Reports View.

- 87 -
Diplomski rad Poslovne Web prezentacije

Ovde možete da podesite, vreme učitavanja iznad koga će FrontPage stranicu


proglasiti kao 'sporu' preko modemske veze od 28.8KB, što se takođe može podesiti. Zatim,
broj dana posle kojih su stranice označene kao 'stare' ili skorije pridodate.

Kada u Folder List frejmu markirate neki fajl, pa zatim kliknete na ikonicu Hyperlinks
u View traci na levoj strani, FrontPage će prikazati dijagram veza koje idu ka i od te stranice.

Sl. 8.46. Izgled FrontPage prozora sa prikazom dijagrama hiperveza ka aktivnoj strani.

Još jedna od zanimljivih i korisnih stvari je i pravljenje strukture Weba. Iz levog


okvira FrontPageovog prozora, View, odaberite ikonicu Navigate. Dobićete Floder list okvir i
Navigate prozor. Da bi ste napravili strukturu Weba, jednostavno mišem prevucite fajlove iz
folder liste u desni okvir. Umesto da pamtite kako su stranice međusobno povezane, možete
kasnije da pogledate dijagram [4].

Sl. 8.47. Izgled FrontPage prozora sa prikazom strukture aktvnog Weba.

- 88 -
Diplomski rad Poslovne Web prezentacije

9. Adobe Photoshop

Photoshop je program za obradu slika profesionalnog nivoa, koji radi na PC


računarima na bazi Pentiuma, opremljenim operativnim sistemom Windows 95, 98 ili njihovom
novijom verzijom. Pod terminom program za obradu slika, podrazumeva se da Photoshop
omogućava obrađivanje fotografija i likovnih radova koji su predhodno skenirani. Slike koje
nastaju na taj način mogu se objaviti na Internetu ili se štampati. Sliku možete da retuširate,
primenite specijalne efekte, razmenjujete detalje između fotografija, ubacujete tekst,
podešavate boje. Photoshop čak obezbeđuje i alatke koje su potrebne da sliku napravite od
početka i mogu se napraviti imitacije koje deluju kao akvareli ili uljane slike.

9.1. Programi za slikanje i programi za crtanje


Programi za obradu slika spadaju u širu kategoriju softvera pod nazivom programi
za slikanje. Kada u nekom programu za slikanje povučete liniju, ona se pretvara u sićušne
kvadratne tačke zvane piksele, a sama slika se naziva bitmapirana slika. Program kao što je
na primer CorelDraw, spada u drugu kategoriju programa, nazvanih programima za crtanje.
Crteži sadrže objekte koji su nezavisne matematički definisane linije i oblici. Iz ovog razloga
programi za crtanje se ponekad nazivaju i objektno orjentisani.
Jedna od jačih strana programa za slikanje je što oni pružaju izuzetno jednostavan
pristup pravljenju slika. Iako su mnoge od Photoshopovih mogućnosti izuzetno kompleksne,
njegovi osnovni alati za slikanje upotrebljavaju se jednostavno poput olovke. Nedostatak
programa za slikanje je u tome što oni ograničavaju rezoluciju. Pošto bitmapirane slike sadrže
određen broj piksela, rezolucija slike, ili broj piksela po inču, zavisi od veličine u kojoj se slika
štampa ili prikazuje na ekranu. Ako je slika u malom formatu, pikseli postaju sićušni što
povećava rezoluciju. Prikazivanjem slike u velikom formatu smanjuje se rezolucija i pikseli
rastu, tako da se mogu videti grubi prelazi i nazubljene ivice. Jedini način da se ovaj problem
reši je da se poveća broj piksela na slici, što značajno povećava veličinu datoteke na disku.
Programi za crtanje grade linije i objekte tačku po tačku, a svaki objekt može da se
obrađuje nezavisno, što je jedna od prednosti objektno orijentisanog pristupa. Pošto program
za crtanje definiše linije, objekte i tekst kao matematičke jednačine, ovi objekti se automatski
prilagođavaju punoj rezoluciji izlaznog uređaja, crtež izgleda glatko i izoštreno bez obzira na
veličinu. Druga prednost crteža je što oni zauzimaju relativno malo prostora na disku. Veličina
datoteke sa crtežom zavisi od broja i složenosti objekata koje crtež sadrži i nema skoro
nikakve veze sa veličinom slike, što je suprotno načinu rada bitmapiranih slika.

9.2. Radna površina Photoshopa


Mnogi od elemenata koji sačinjavaju radnu površinu Photoshopa dobro su poznati
svima koji su upoznati sa Windows okruženjem. Linija sa menijem vam omogućava pristup
komandama. Prozor sa slikom možete da pomerate po radnoj površini ekrana, a klizači služe
da vidite skrivene delove slike ukoliko je ona veća od prozora. Istovremeno možete otvoriti
više slika, a prelazak sa jedne na drugu možete koristiti ili miša ili pritiskom na Ctrl+Tab
tastere. Sa leve strane nalazi se osnovna paleta sa alatkama, a sa desne nekoliko od
plutajućih paleta koje su nezavisne od prozora sa slikom i mogu se pomerati po ekranu.

- 89 -
Diplomski rad Poslovne Web prezentacije

Sl. 9.1. Izgled radne površine Photoshopa.

U statusnoj liniji nalaze se informacije o aktivnoj alatki. U levom uglu nalazi se


podatak o uvećanju slike u procentima, zatim slede informacije o veličini dokumenta. Ovo polje
za prikaz standardno sadrži dva broja razdvojena kosom crtom. Prvi broj predstavlja veličinu
osnovne slike u memoriji, a drugi uzima u obzir sve dodatne slojeve na slici. Možete videti i
ostale informacije o otvorenom dokumentu, klikom na strelicu u statusnoj liniji otvara se mali
skriveni meni. Odaberite opciju Scratch Size, dobićete druge dve vrednosti od kojih prva
vrednost predstavlja veličinu prostora koji je potreban da bi trenutno otvorene slike stale u
radnu memoriju, druga vrednost predstavlja ukupnu veličinu RAM memorije koja je na
raspolaganje Photoshopu. U slučaju da je prvi broj manji od drugog program će raditi u
najvećoj mogućoj efikasnosti. Ukoliko to nije slučaj, Photoshop će koristiti virtualnu memoriju
na disku, što ga znatno usporava.
Kutija sa alatkama prikazuje samo neke od dostupnih alata dok su drugi u skrivenim
menijima. Svaka alatka koja sadrži mali trougao usmeren udesno sadrži skriveni meni sa
jednom ili više alternativnih alatki.

9.3. Alatke za pravljenje selekcija


Pre nego što počnete da menjate deo slike,
morate ga prvo izabrati. Da biste u programu za
slikanje izabrali deo slike morate ga okružiti
konturnom linijom za selekciju ili okvirom.
Konturna linija selekcije izgleda kao pokretna
šara sastavljena od crtica. Na selektovani deo
slike možete da primenite filtere, da radite sa njim kao sa posebnim slojem, da ga izmenite na
bilo koji način, a da pri tom ne oštetite i promenite ostali ne selektovani deo slike. Za izbor
selekcije stoji vam na raspolaganju još nekoliko atatki.

Pravougaona alatka za izbor. Pristupate joj izborom ikonice sa palete ili


pritiskom na taster M. Ovom alatkom povlačite da biste obuhvatili deo slike za izbor.

- 90 -
Diplomski rad Poslovne Web prezentacije

Eliptični okvir funkcioniše kao i pravougaonik, samo što bira eliptične ili
kružne delove slike, možete joj pristupiti sa tastature, pritiskom na M+Shift.
Okvir za izbor jednog reda bira ceo horizontalni red piksela koji se pruža preko
cele slike. Nema prečicu sa tastature kao ni sledeća alatka.
Okvir za izbor jedne kolone radi na sličan način kao i okvir za izbor jednog
reda, osim što ovaj okvir bira celu jednu kolonu piksela.
Okviri za izbor su prilagodljivi.
 Ako želite da selekcija ima oblik pravilnog kruga ili kvadrata, nakon što počnete da
povlačite mišem pritisnite taster Shift.
 Da biste nacrtali okvir od centra, a ne od ugla do ugla, pritisnite i držite taster Alt
nakon što počnete da povlačite pokazivač.
 Ukoliko u toku povlačenja pritisnete i držite razmaknicu, okvir ćete moći da
pomerite 'u letu' na željeno mesto . Kada postavite okvir na novu poziciju, otpustite
razmaknicu i nastavite sa povlačenjem i tako menjate dimenzije okvira.
 Ukoliko hoćete da napravite okvir sa tačno određenim odnosom širine i visine,
možete da odaberete opciju Constrained Aspect Ratio iz menija za opciju Style. U
polja Width i Height unesite vrednosti proporcija.

Sl. 9.2. Izgled toolbara Rectangle Marquee.

 Za numeričko zadavanje veličine okvira, odaberite opciju Fixed Size iz istog


menija i u polja Width i Height vrednosti u pikselima.
 Umekšati konturu selekcije znači zamagliti njene ivice više nego što to dopušta
automatsko ublažavanje nazubljenosti ivica. U polje za dijalog Feather unesite broj
piksela koji će biti obuhvaćeni ovim efektom. Ovim postupkom se konturna linija
selekcije postepeno osipa, dobijajući zamućenu ivicu. Umekšavanjem ivica
smanjuje se oštrina selekcije i sa unutrašnje i spoljašnje strane.
 Eliptične slelekcije imaju umekšane ivice. Ukoliko ih ne želite isključite opciju Anti
– aliased. Ova opcija je nedostupna kada koristite pravougaoni okvir zato što je
kod ove alatke automatsko smanjivanje nazubljenosti uvek uključeno.

Čarobni štapić koristite da biste izabrali kontinuirano područje piksela koji su


slično obojeni. Da biste izabrali nepovezane oblasti koristite taster Shift prilikom izbora.
Upotreba ove alatke je jednostavna, izaberete je sa palete, pritisnete taster miša i ona bira sve
susedne boje koje spadaju u izabrani deo spektra, ali je podešavanje štapića prilično
nezgodno i često nezadovoljavajuće.

Sl. 9.3. Izgled toolbara Magic Wand.

 Opcija Anti – aliased umekšava ivice selekcije, kao i u prethodnom slučaju.


 Vrednost Tolerance određuje opseg boja koje alatka bira kada njome pritisnete
neki deo slike.
 Use All Lazers opcija, omogućava da prilikom definisanja selekcije uzmete u obzir
sve vidljive slojeve.

- 91 -
Diplomski rad Poslovne Web prezentacije

 Opcijom Contiguous štapić izdvaja sa cele slike isti opseg boja bez obzira na
njihov međusobni položaj i razdvojenost.

Konturne linije slobodnog oblika možete da napravite


korišćenjem alatke Laso .
Da bi ste nacrtali selekciju sa pravim stranicama,
možete koristiti Višeugaoni laso . Svaki pritisak na
taster miša postavlja ugaonu tačku na selekciju.
Korišćenjem alatke Magnetni laso , konture selekcije automatski se lepe uz ivice slike u
prednjem planu. Dok povlačite alatkom, magnetni laso automatski postavlja tačke. Tačku koja
vam ne odgovara, možete da uklonite pritiskom na Delete ili Backspace.

Photoshopove alatke za putanje pružaju


najfleksibilnije i najpreciznije načine za definisanje
selekcija. Putanje se od normalnih selekcija razlikuju
po tome što one postoje na ekvivalentu drugačijeg,
objektno orijentisanog sloja, koji stoji ispred
bitmapirane slike. Nakon crtanja, dorađivanja i
snimanja putanje, možete je pretvoriti u selekciju i ona funkcioniše kao bilo koja druga kontura
selekcije.

9.4. Alatke za slikanje


Photoshop ima tri alatke za slikanje: olovku – Pencil, slikarsku četkicu – Paintbrush i
vazdušnu četkicu – Airbrush. Alatke za slikanje rade sa bojom prednjeg plana.

Za razliku od olovaka iz većine drugih programa za slikanje, koje povlače linije


debljine jednog piksela, olovka u Photoshopu povlači linije oštrih ivica bilo koje debljine.
Olovku izaberite sa palete ili pritisnite taster B. Da bi ste povukli pravu liniju pomoću bilo koje
alatke za slikanje ili obradu, pritisnite mišem jednu tačku na slici, zatim pritisnite Shift i najzad
drugu tačku, Photoshop povlači liniju između dve tačke alatkom koja je izabrana.
Slikarska četkica radi kao i olovka osim što crta linije sa umekšanim ivicama.
koje se stapaju sa pozadinom. Slikarska četkica nudi opciju Wet Edges – vlažne ivice. Kada je
ova opcija uključena slikarska četkica pravi prozračnu liniju sa zatamnjenim ivicama što je vrlo
slično slikanju vodenim bojama. Meki oblici četkice daju prirodnije efekte.
Vazdušna četkica može da se opiše kao mekša verzija slikarske četkice, pošto
po pravilu upotrebljava mekši oblik četkice. Ali, za razliku od slikarske četkice, koja nanosi
kontinualan trag boje i prekida sa bojom potom prestanete da povlačite, vazdušna četkica
koristi mlaz obojenih kapljica i nastavlja da ih nanosi sve dok pritiskate taster miša.

Oblik četkice predstavlja veličinu i oblik vrha kursora kada upotrebljavate alatku za
slikanje. Oblicima četkice možete da pristupite klikom na mali taster pored polja koje opisuje
trenutnu podešenost četkice Brush i dobijate ovakvu paletu.

Sl. 9.4. Oblici četkica. Deo toolbara svih alata


za slikanje, obradu, toniranje, kloniranje.
Nalazi se u meniju Brush

- 92 -
Diplomski rad Poslovne Web prezentacije

9.5. Alatke za obradu i toniranje


Alatke za obradu ne nanose boju, nego deluju na boje koje već postoje na slici.

Zamagljivanje – blur, povlačite ovom alatkom da biste smanjili kontrast između


susednih piksela čime se smanjuje oštrina slike.

Izoštravanje – Sharpen, koristite ovu alatku da biste povećali kontrast između


piksela i time povećali izoštrenost slike.

Razmazivanje – Smudge, ova alatka razmazuje boje na slici. Efekat je vrlo


sličan povlačenju prsta preko vlažne boje.

Posvetljavanje – Dodge, prva od tri alatke za toniranje, omogućava vam da


posvetlite deo slike povlačenjem preko nje.

Potamnjivanje – Burn, ova altka vam omogućava da potamnite deo slike.

Sunđer – Sponge, povlačenjem sunđera preko slike smanjujete zasićenost na


slici tako što boje postaju umrtvljenije i na kraju sive. Zasićenost boja možete i povećavati
izborom opcije Saturate, umesto Desaturate.

9.6. Alatke za popunjavanje bojom


Kantom sa bojom možete naneti boju prednjeg plana ili šaru koja se ponavlja,
pritiskom tastera miša u prozoru sa slikom i izborom jedne od opcija Foreground ili Pettern iz
polja Fill.

Sl. 9.5. Izgled toolbara Paint Bucket.

Podešavanjem vrednosti u polju Opaciti, podešavate prozračnost boje koja se


nanosi ovom alatkom. Da biste umekšali dejstvo odaberite opciju Anti-aliased, u tom slučaju
Photoshop između obojenih piksela i piksela na koje boja nije delovala, pravi ivicu od
prozračnih boja. Vrednost Tolerance možete da povećavate i smanjujete da biste povećali i
smanjili broj piksela na koje deluje kanta sa bojom. Ova vrednost predstavlja raspon vrednosti
svetloće meren u odnosu na piksel koji pritisnete.

Ako želite celu sliku ili izabranu selekciju da prekrijete jednom bojom ili šarom
možete da koristite komandu Fill. Naćićete je u glavnom meniju klikom na Edit, pa zatim na Fill
ili klikom na Shift+Backspace.

- 93 -
Diplomski rad Poslovne Web prezentacije

Sl. 9.6. Izgled dijalog boksa Fill.

Iz polja Use, možete odabrati opciju Pattern, što znači popunjavanje šarom, pa
zatim iz polja Costum Pattern odaberite šaru.

Alatku za prelive koristite kada hoćete da selekciju popunite višebojnim


prelivom. Photoshop vam nudi pet vrsta preliva koje možete da birate
kada je ova alatka aktivna.
Linearni preliv – povlačite ovom alatkom da biste sekciju ispunili postepenim
prelazom između boja.
Radijalni preliv – stvara prelaze tipa reflektorom osvetljene površine, koji započinju u
sredini i teku u koncentričnim krugovima ka periferiji selekcije.
Ugaoni preliv – pravi preliv koji izgleda kao da nešto obavija i ima izgled kupe
gledane odozgo. Najbolje deluje u prelivima koji započinju i završavaju se istom bojom.
Reflektovani preliv – pravi prelive koji počinju i završavaju se istom bojom i ima
izgled višebojne linije.
Romboidni preliv – liči na radijalni osim što se selekcija ne ispunjava koncentričnim
krugovima već koncentričnim rombovima.

9.7. Alatke za kloniranje


Alatka pečat vam omogućava da kopirate piksele sa
jednog dela slike na drugi. Pored običnog pečata kojim
uzimate uzorke sa već postojeće slike, Photoshop vam
nudi i pečat za šare kojim možete da slikate pomoću nekog drugog uzorka koji izaberete iz
polja Pettern.

Da biste klonirali deo slike odaberite alatku Clone Stamp Tool. Pritisnite taster Alt
zajedno sa tasterom miša u prozoru sa slikom da biste zadali referentnu tačku na onom delu
slike koji želite da klonirate. Zatim mišem pritisnite i povlačite alatku u nekom drugom području
slike da biste označeno područje naslikali.
Photoshop vam omogućava da klonirate ne samo sa slike na kojoj radite već i iz
potpuno odvojenog prozora sa slikom. Ova tehnika vam omogućava da spajate dve različite
slike. Da biste postigli ovaj efekat upotrebite taster Alt zajedno sa pritiskom miša na jednu

- 94 -
Diplomski rad Poslovne Web prezentacije

sliku, dovedite drugu sliku u prednji plan, a zatim povlačite alatkom da biste klonirali sa prve
slike.

9.8. Alatke za brisanje i vraćanje u predhodno stanje


Gumica za brisanje kada se koristi na jednoslojnoj slici, slika bojom pozadine.
Kada se koristi na sloju ona briše piksele i otkriva donje slojeve slike. Postoje četiri vrste
gumice za brisanje, četkica, vazdušna četkica, olovka i obična gumica za brisanje. Njih ćete
izabrati u polju Mode kada je ova alatka aktivna.

Magičnu gumicu možete da koristite da biste izbrisali sve isto ili slično obojene
piksele.

Istorijska četkica vam omogućava da vrlo lako ispravite nastale greške i sliku
vratite u prethodno stanje. Jednostavno, povlačite ovom alatkom preko dela slike koji hoćete
da ispravite i slika se vraća u prvobitno stanje.

Jedan od načina da poništite nešto što ste uradili je i korišćenje opcije Undo, ili još
bolje vraćanje korak po korak korićenjem palete History.

9.9. Alatke za pomeranje i uzimanje uzoraka boje


Alatka Hand vam omogućava da pomerate sliku unutar prozora. Za ovo
pomeranje možete da koristite i klizače sa strane prozora, ili najbrže i najpreciznije, pomerajte
crveni okvir na paleti Navigator, tako ne morate da menjate alatke.

Alatka za zumiranje uvećava sliku kako biste bolje mogli da vidite pojedinačne
piksele. Ni ovo nije naročito korisna alatka. Da biste bez promene alatki uvećali sliku kliknite
istovremeno na tastere Ctrl i +(plus), a da biste je umanjili na tastere Ctrl i – (minus).

Alatkom za uzorkovanje boje možete da procenite vrednosti boja sa četiri


odabrane tačke na slici. Ove vrednosti možete da očitate na paleti Info. Pošto postavite tačku,
možete je povlačenjem pomeriti na druge piksele.

Pritisnite pipetom boju u prozoru sa slikom da biste tu boju proglasili bojom


prednjeg dela. Ukoliko pritisnete taster Alt, odabrana boja će se postaviti kao boja pozadine.

Alatka za merenje omogućava vam da merite udaljenosti i pravce unutar prozora


sa slikom. Samo treba da povučete od jedne do druge tačke i da vrednosti očitate sa palete
Info. Da biste vršili druga merenja možete da pomerate već postojeće tačke ili da povučete
novu liniju.

9.10. Rad sa tekstom


U Photoshopu tekst predstavlja samo vrstu grafike. Slova nisu ništa drugo nego
biblioteka sličica kojoj se može pristupiti sa tastature i nije iznenađujuće što Photoshop slova
tretira kao i bilo koji drugi skup piksela zbog čega čitljivost teksta zavisi od veličine i rezolucije
slike.

- 95 -
Diplomski rad Poslovne Web prezentacije

kada koristite ovu alatku, Photoshop automatski kreira novi sloj i slova smešta u
njih. Slova možete da ispunite bojom, a ceo sloj možete da podesite tako da bude proziran,
podešavajući opciju Opaciti na paleti Layers i tako možete dobiti providna slova.
Kombinovanjem teksta i slike na ovaj način možete da dobijete zanimljive efekte.

tekst možete da koristite i za pravljenje konturnih linija selekcija u obliku slova.


To znači da tekst možete da upotrebite kako biste odabrali deo slike i zatim ga pomerali,
kopirali ili transformisali na bilo koji način.

Svi efekti sa slojevima u potpunosti su primenljivi na slojeve sa slovima. Iz glavnog


menija odaberite Layer, pa zatim Layer Stile. Odabiranjem efekta na primer Bavel And Emboss
možete da napravite tekst u obliku reljefastih jastučića.

9.11. Kontrole iz palete sa alatkama


Ispod dela sa osnovnim alatkama na istom panelu nalaze se i komande kojima
menjate boju prednjeg platna i pozadine.

Pritiskom na gornji kvadratić ove ikonice otvarate dijalog boks Color Picker ili
birač boja. Boju koju izaberete postaje boja prednjeg plana i nju koriste alatke za slikanje,
olovka, vazdušna i slikarska četkica, kao i alatke za preliv. Boju možete da promenite i na
paleti Color.
Boju pozadine možete da promenite pritiskom na donji kvadratić i opet otvarate isti
dijalog boks Color Picker. Boju pozadine Photoshop koristi za prelive i gumice za brisanje.

Pritiskom na ovu ikonicu menjate boje pozadine i prednjeg plana.


Ikonica u donjem uglu, vraća boje pozadine i prednjeg plana na standardne
vrednosti, boja prednjeg platna kao crna i boja pozadine kao bela.

Pritisnite tasterom miša da biste izašli iz Photoshopovog režima za brzo


maskiranje i konture selekcija biće vidljive kao pokretne isprekidane linije. Ovo je inače
standardni režim.

Pritiskom na ovu ikonu ulazite u režim za brzo maskiranje. Slika je prekrivena


poluprozračnim slojem, a samo odabrani selektovani deo slike nije maskiran. Slikanjem crnom
bojom u ovom režimu proširujete granice maskirane površine i time oduzimate od selekcije.
Slikanje belom bojom proširuje granice slekcije i brišete masku.

Ova ikona služi za prikazivanje slike u prednjem planu u standardnom prozoru.


Svaka slika kada je otvorite prikazuje se u standardnom prozoru.

Ako ne možete da vidite dovoljno veliku deo slike pritisnite ovu ikonicu. Nestaju
naslovna linija i trake za pometanje, kao i svi prozori u pozadini i Taskbar Windowsa, ali ostaju
palete i alatke.

Ako još uvek ne možete da vidite dovoljno veliki deo slike, pritisnite krajnju desnu
ikonicu da biste videli samo sliku postavljenu na crnoj pozadini. Nestaje linija menija što vam

- 96 -
Diplomski rad Poslovne Web prezentacije

ograničava pristup komandama, ali ako vam je potrebno da pristupite komandama koristite
tastere Shif +F da bi se pojavila i ponovo je na isti način sakrijte.

Ako vam elementi Photoshopa smetaju da vidite sliku, možete sve palete uključujući
i paletu sa osnovnim alatkama sakriti pritiskom na taster Tab. Da biste ih ponovo vratili ponovo
pritisnite taster Tab. Pritiskom na taster Tab + Shift sakrivate samo palete, a ostaje kutija sa
alatkama. Uradite isto da biste ih ponovo vratili na ekran. Pritisak na taster Tab kada se ne
vide palete sakriva i kutiju sa alatkama.

9.12. Veličina i rezolucija slike


Termin veličina slike odnosi se na fizičke dimenzije slike. Rezolucija je broj piksela
po dužnom inču, pošto se broj piksela meri duž prave linije. Ako je rezolucija slike 72 ppi (što
znači piksela po inču) dobijate 72x72=5184 piksela po kvadratnom inču (72 piksela širine x 72
piksela visine). Pod pretpostavkom da je broj pikesla na slici stalan, povećanje slike smanjuje
njenu rezoluciju i obrnuto. Kada se slika štampa, viša rezolucija znači oštriju i jasniju sliku.
Međutim, programi koji prikazuju ekranske slike, uključujući programe za multimediju,
programe za prezentacije i Web čitače, prikazuju jedan piksel slike za svaki ekranski piksel. To
znači da ako se pravi slika za ekran monitora, vrednost Resolution nema uticaja.

Veličinu slike i njenu rezoluciju možete da podesite u dijalog boksu Image Size.
Izaberite iz glavnog menija opciju Image, pa zatim Image Size.

Sl. 9.7. Dijalog boks Image Size.

U polje Rezolution unesite vrednost kao piksele po inču ili kao piksele po cm. Kada
se opcija Resample Image ostavi isključena, Photoshop piksele ostavlja netaknute i samo
menja njihov broj po inču. Ostavljanje uključene opcije Resample Image vrednost Resolution
je nezavisna od obe grupe vrednosi Width i Height. Jedina razlika između ove dve grupe
opcija je što gornje rade sa pikselima, a donje sa relativnim jedinicama mere.
Broj piksela na slici možete da povećate povećanjem bilo koje od pet vrednosti koje
se nalaze u okviru dijalog boksa. Photoshop rasteže ili skuplja sliku u skladu sa unetim
vrednostima. Da bi se izračunao broj piksela na novoj slici Photoshop će upotrebiti jedan od tri
načina interpolacije koje možete podesiti na padajućem meniju pored opcije Resample Image.

- 97 -
Diplomski rad Poslovne Web prezentacije

Ako odaberete opciju Nearest Neighbor, Photoshop jednostavno kada pravi novi
kopira susedni piksel. Ovo je najbrža opcija, ali neminovno dovodi do nazubljenih ivica. Druga
opcija Bilinear, glača prelaze između piksela stvaranjem međunijansi, usklađujući boju svakog
piksela sa njegova četiri suseda, ispod, iznad i sa, od bočne strane. Ova opcija zahteva više
vremena ali je efekat umekšanja bolji. Još više vremena zahteva standardno podešena opcija
Bicubic, koja usklađuje boju piksela sa njegovih osam najbližih suseda. Ova opcija pojačava
kontrast kako bi se nadoknadio efekat zamagljenja koji obično prati interpolaciju.
Ako želite da slika promeni svoje proporcije, da bude, uža ili šira, morate da
isključite opciju Constant Proportions. Ovo vam omogućava da promenite vrednosti Width i
Hwight potpuno nezavisno jednu od druge.

9.13. Promena veličine platna


Drugi način za promenu veličine slike i broja piksela je obrezivanje ili sečenje slike –
Cropping. Na ovaj način se odsecaju pikseli oko ivica slike, a da se ne naškodi ostalima. Jedini
izuzetak se javlja kada zarotirate odsečeni deo slike, jer tada Photoshop mora da interpolira
piksele izgubljene rotacijom. Obrezivanje omogućava da se odbace svi suvišni elementi sa
slike i pažnja usredsredi na bitne detalje.
Jedan od načina da se obreže slika je izbor opcije Canvas Size iz menija koji
dobijate klikom na opciju Image u glavnom meniju Photoshopa. Opcije u dijalog boksu koji
dobijate, vam omogućavaju da podesite veličinu zamišljenog platna na kome leži slika.

Sl. 9.8. Dijalog boks Canvas Size.

Ako povećate platno, Photoshop okružuje sliku belom pozadinom, ako smanjite
platno, obrezujete sliku. Pritiskom na mrežu Anchor zadajete položaj slike na novom platnu, a
njegovu veličinu podesite opcijama Width i Height. Strelice će pokazivati da li će se platno
smanjiti ili povećati u zavisnosti od unetih vrednosti.

Ako želite da obrežete veći deo slike preporučuje se korišćenje alatke Crop,
pritiskom na taster C ili izborom sa palete sa leve strane. Povlačenjem ove alatke preko slike
pravite pravougani okvir iz izbora onog dela slike koji želite da zadržite. Pritiskom na
razmaknicu možete da pomerate granice okvira. Okvir možete da pomerate i povlačenjem

- 98 -
Diplomski rad Poslovne Web prezentacije

unutar područja. Promenu veličine okvira možete izvršiti povlačenjem jedne og kvadratnih
kućica na ivici okvira. Pritiskom na tipku Shift možete proporcionalno da menjate veličinu
područja.
Kada pređete mišem van označenog područja, kursor dobija izgled polukružne
obostrane strelice i možete da rotirate označeni deo slike. Koordinatni početak oko koga
rotirate deo možete takođe da pomerite, jednostavno ga povucite mišem na željeno mesto.
Kada okvir za izbor okružuje tačno onaj deo slike koji želite, pritiskom na Enter ili
dvoklikom unutar područja Photoshop odseca određeni segment. Ako se predomislite, okvir za
obrezivanje poništava se pritiskom na taster Ecsape.
Ako pokušavate da rotirate sekciju i ne dobijete željeni efekat, koristite opciju Unod i
pokušajte ponovo. Nemojte nikako ponovo koristiti alatku Crop i pokušavati da rotirate već
rotiranu sliku. Photoshop tada vrši interpolaciju između već interpoliranih piksela i sve više se
udaljavate od prvobitne slike, uz sve veći gubitak informacija.
Treći način obrezivanja slike je pravljenje pravougaone selekcije, a zatim izbor
komande Crop iz menija koji dobijate pritiskom na Image. Kao i sa alatkom za obrezivanje
možete da pritisnete razmaknicu dok povlačite okvir za izbor da biste ga usput pomerali. Nije
problem da dobijete potpuno tačno položaj i veličinu slike, ali jedino što na ovaj način ne
možete da uradite je da je rotirate.

9.14. Bitmapirane slike i osnovni formati


Termin bit mapa u Photoshopu označava crno-belu sliku, podrazumevajući da se
svaki piksel odnosi na jedan bit podataka, mada se termin bit mapa može koristiti i šire, za
slike koje sadrže između 4 i 16 miliona boja, znači za svaku sliku koja se sastoji od utvrđenog
broja piksela, bez obzira na broj upotrebljenih boja. Bitmapirane slike mogu se zamisliti kao
mozaik napravljen od raznobojnih pločica. Slike su, dakle, obojeni pikseli, ako ih uvećate
izgledaju kao nepovezan skup obojenih kvadaratića, ako im smanjujete veličinu međusobno se
stapaju i formiraju sliku koja izgleda kao obična fotografija.
Formati datoteka predstavljaju različite načine da se slika snimi na disk. Neki formati
obezbeđuju jedinstvene sisteme kompresije slika, koji omogućavaju snimanje na takav način
da zauzima manje prostora na disku. Drugi formati omogućavaju Photoshopu da razmenjuje
slike sa različitim aplikacijama koje rade pod Windowsom ili nekim drugim operativnim
sistemom. Photoshop iz svojih okvira za dijalog Open i Save podržava više od 20 formata
datoteka.
Matični format Kao i većina programa Photoshop nudi sopstveni matični format,
format koji je optimizovan prema njegovim mogućnostima i funkcijama. Ovaj PSD format
snima svaki atribut koji primenite u Photoshopu. Mana Photoshopovog formata je što ga
podržava relativno malo aplikacija.
Windows Bitmap format BMP je matični format Microsoftovog Painta koji je
uključen u Windows i podržava ga veliki broj Windows i DOS aplikacija. Photoshop podržava
BMP slike sa do 16 miliona boja. Ovaj format najčešće se primenjuje pri pravljenju slika za
koje se koriste u datotekama za help ili za pravljenje pozadina. BMP format ima posebno
namenjen sistem kompresije – Run Lenght Encoding ili sistem kompresije bez gubitaka. Izraz
bez gubitaka označava sistem koji vam omogućava da štedite prostor na disku, a da pritom ne
žrtvujete podatke sa slike. Nedostatak ovakve kompresije je što ona usporava otvaranje i
snimanje slika.
TIFF format razvijen od strane firme Aldus da bi standardizovao populaciju
skeniranih slika koja se stalno uvećavala, Tag Image File Format – TIFF je najšire podržan
format za štampanje slika. Ovaj format koristi kompresiju bez gubitka ili LZW (Lempel Ziv
Welch) sistem kompresije.

- 99 -
Diplomski rad Poslovne Web prezentacije

CopmpuServe GIF format


Mrežna služba CompuServe promovisala je Graphics Intercange Format – format za
razmenu grafike, kao sredstvo za komprimovanje datoteka kako biste mogli brzo preko
modema da prenosite fotografije. GIF format koristi LZW kompresiju, kao i TIFF, ali podržava
samo 256 boja. Ovaj format nije najbolji izbor za slike sa finim razlikama u nijansama, kao što
su fotografije i umetničke slike. Postupak korišćenja međutonova pri kome se naročitim
razmeštanjem tačaka dve različite boje oko zavarava da vidi treću boju može u nekoliko da
nadoknadi ovaj nedostatak. Sa druge strane, format GIF nudi jedan od najlakših i
najpodržanijih načina za uvođenje animacije na Web stranu, pošto može da sadrži više slika
koje se uzastopno smenjuju. Ovaj format ima još jednu izvanrednu prednost što podržava
providnost.
Pre snimanja slike u boji u ovom formatu, morate da smanjite broj boja primenom
komande Indexed Color. Nju će te pronaći u meniju Image, pa zatim Mode i dobićete meni na
kome je ova opcija.

Sl. 9.9. Dijalog boks Indexed Color.

Ova komanda omogućuje da sa slike uklonite sve osim najosnovnijih boja.


Photoshop tada pravi tabelu za traženje boja (Look-up table), koja opisuje preostale boje sa
slike. Ova tabela služi kao indeks, pa se zato proces zove indeksiranje.
Posle prebacivanja slike u ovaj mod, sliku skoro da ne možete da obrađujete.
Većina Photoshopovih funkcija, uključujući prelive, filtre neće moći da se primene. Druge, kao
opcije za umekšavanje ivica, slikarske i vazdušne četkice neće davati zadovoljavajuće
rezultate.
Prva padajuća lista Palette nalaže Photoshopu kako da proračunava boje u tabeli za
traženje boja. Broj boja možete da smanjujete sve dok slika ne izgleda ružno. Ako je polje
Preview uključeno promene možete da pratite u prozoru sa slikom.
Ukoliko pravite sliku sa prozirnim delovima, njihovu providnost sačuvaćete
potvrđivanjem opcije Transparency. Ako ovu opciju ne potvrdite, providni delovi slike popuniće
se onako kako zadate u polju Matte. Možete izabrati boju prednjeg plana, boju pozadine, crnu,
belu, sivu i sl. Način na koji Photoshop raspodeljuje indeksirane boje po slici, podesićete u
meniju opcije Dither. Ako izaberete None Photoshop preslikava svaku boju na slici u njen
najbliži ekvivalent u tabeli za traženje boja. To daje najoštrije prelaze među bojama, ali je
najpoželjnija opcija.

- 100 -
Diplomski rad Poslovne Web prezentacije

Kada snimate sliku u GIF formatu, dobićete dijalog GIF Options.

Sl. 9.10. Dijalog boks GIF Options.

GIF format može se podesiti tako da se prilikom preuzimanja slike sa mreže ona
prikazuje uprošćeno, pri čemu tokom pristizanja podataka njen kvalitet raste sve dok se
potpuno ne učita. Ovo ćete postići izborom opcije Interlaced (preplitanje), čime se naizmenične
linije slike postepeno popunjavaju tačkama.

JPEG format
Format JPEG je nazvan po ljudima koji su ga izmislili, Joint Photographic Experts
Group (ekspertska grupa udruženih fotografa). JPEG je najefikasniji i najosnovniji sistem
kompresije koji trenutno postoji. JPEG je sistem kompresije sa gubitkom, što znači da žrtvuje
kvalitet slike da bi uštedeo prostor na disku, međutim tokom snimanja može se kontrolisati
količina podataka koja se gubi. Ovaj format je najbolje koristiti kada se radi sa slikama sa
kontinualnim tonovima. JPEG je kumulativni kompresioni sistem što znači da Photoshop
ponovo komprimuje sliku svaki put kada je snimite u JPEG formatu, iz tog razloga sliku bi
trebalo da snimite u ovom formatu, tek kada završite sav posao na njoj.
Što se tiče snimanja fotografije nijedan format ne daje manje datoteke od formata
JPEG. Unutar okvira za dijalog JPEG Option, možete da odaberete najmanju vrednost
patrametra Quality da biste maksimalno uštedeli na prostoru. Tom prilikom ćete takođe i
žrtvovati najviše detalja. Probajte da nađete optimalnu vrednost za konkretnu sliku koju
snimate.

Sl. 9.11. Dijalog boks JPEG Options.

- 101 -
Diplomski rad Poslovne Web prezentacije

Većina Web čitača podržava dve varijante JPEG formata. Takozvani format osnovne
linije Baseline ili sekvencijalan format koji prikazuje sliku na ekranu u prolazima, liniju po liniju.
Progresivan JPEG format prikazuje sliku na ekranu u višestrukim prolazima, omogućavajući
posetiocima stranice da odmah steknu predstavu o tome kako slika izgleda. Baseline
Optimized format dodatno smanjuje datoteku u odnosu na standardni Baseline format, obično
za 5 do 10 procenata.
Ako odaberete opciju Progressive, možete da odaberete broj prolazaka iz menija
Scans. Viša vrednost daje brži prikaz početne slike na ekranu, ali kompletan prikaz može da
traje duže usled ponovnog postepenog osvežavanja slike [3].

- 102 -
Diplomski rad Poslovne Web prezentacije

10. Zaključak

Brzina prodora Interneta u gotovo sve sfere života je fascinantna, informacija je


postala bitna i tražena, a mesto na kome ih je najlakše naći i plasirati jeste Web.
Web prezentacija Mašinskog fakulteta je praktični deo diplomskog rada, izgrađena je
korišćenjem programskih paketa i alata obrađenih u prethodnim poglavljima. Suština svake
prezentacije je ideja. Pre nego što se počne s radom potrebno je osmisliti šta je potrebno
prikazati i šta prezentacijom treba da se postigne. Sve ostalo je zanat, a praksa je jedan od
najboljih načina za usavršavanje.
Bez obzira na svu slobodu koju hipertekst pruža u pogledu načina povezivanja
dokumenata, da bi prezentacija bila upotrebljiva i svrsishodna informacije koje se nude
posetiocima treba podeliti u logičke celine i obezbediti da put do njih bude dovoljno
jednostavan i brz što je u ovom radu postignuto.

Prezentacija fakulteta objedinjuje informacije koje mogu biti zanimljive i korisne


studentima, nastavnom osoblju, poslovnim partnerima, potencijalnim novim polaznicima, kao
ljudima čija su interesovanja u sferi nauke.

Sl. 10.1. Prezentacija fakulteta, uvodna stranica.

Klasični informatori su još uvek u upotrebi, kao i oglasne table u holovima fakulteta.
Web prezentacija nema tendenciju da ih samo zameni, da na jedan neuporedivo brži i lakši
način učini te podatke dostupnim, već i da znatno proširujući njihov obim bude maksimalno na
usluzi studentima. Postojanje web prezentacije fakulteta nije samo korisno i potrebno u
pogledu informisanja studenata koji već pohađaju nastavu, već je jedan od najboljih načina da
velikom broju mladih ljudi omogući upoznavanje sa nastavom i uslovima upisa. Budućnost

- 103 -
Diplomski rad Poslovne Web prezentacije

svake obrazovne ustanove zavisi dobrim delom od interesovanja za njenu delatnost, odnosno
od novih upisnika, pa je i predstavljanje fakulteta upravo njima veoma bitno.

Ciljnu grupu posetilaca sajta ne čine samo studenti. Fakultet pored obrazovne i
naučno istraživačke delatnosti pruža usluge radnim organizacijama i fizičkim licima u okviru
delatnosti svojih centara. Na ovaj način, posredstvom web prezentacije, fakultet ima
mogućnost da svoje usluge reklamira. Prezentovanje naučno-istraživačkih radova čini još
jedan od bitnih odgovora na pitanje zašto Web. Pored popularizacije i mogućnosti da se jedan
broj ambicioznih i vrednih ljudi zainteresuje za bavljenje ovom delatnošću, pruža se i velika
mogućnost uspostavljanja kontakta sa novim poslovnim partnerima iz zemlje i sveta, a
istraživači i saradnici na projektima imaju mogućnost da budu zapaženi i angažovani na nekim
sličnim poslovima.

U ovom radu odrađen je najveći i najvažniji deo posla koji se sastoji u postavljanju
dobre koncepcije sajta i prezentovanju svih potrebnih informacija. Web prezentacije nikada ne
mogu biti dovršene i kompletno izgrađene. Uvek postoje sadržaji i informacije koje treba
ažurirati. Jedna od stvari koje je potrebno uraditi je i verzija sajta na engleskom jeziku čime će
stranim studentima, zainteresovanim za studije u našoj zemlji, biti dostupne i informacije o
našem fakultetu. Dalja nadogradnja sajta podrazumeva povećanje njegove interaktivnosti,
predviđeno je prijavljivanje na mailing liste i online prijavljivanje ispita.

- 104 -
Diplomski rad Poslovne Web prezentacije

Sadržaj

Uvod.......................................................................................................................................... 1
1. Od samog početka............................................................................................................... 1
1.1. Kako je Internet nastao................................................................................................... 2
1.2. Organizacija mreže......................................................................................................... 3
1.3. Simboličke i numeričke adrese........................................................................................3
1.4. Domeni i poddomeni....................................................................................................... 3
1.5. Servisi Interneta.............................................................................................................. 4
1.6. World Wide Web............................................................................................................. 4
1.7. Hypertext Transpotr Protocol........................................................................................... 5
2. Web lokacije – sajtovi.......................................................................................................... 7
2.1. Razvojno okruženje......................................................................................................... 7
Ručni razvoj....................................................................................................................... 7
Automatizovani razvoj........................................................................................................ 7
2.2. Uspešan sajt?................................................................................................................. 8
2.3. Organizacija Web sajtova................................................................................................ 9
Sekvenca......................................................................................................................... 10
Mreža............................................................................................................................... 10
Hijerarhija......................................................................................................................... 10
Web................................................................................................................................. 10
Kompleksni način............................................................................................................. 11
3. Jezici kojima govori Web.................................................................................................. 12
3.1. Ratovi pretraživača....................................................................................................... 12
4. Uvod u HTML...................................................................................................................... 13
4.1. Struktura HTML dokumenta.......................................................................................... 14
4.2. Osnovni elementi.......................................................................................................... 14
4.3. Elementi za formatiranje teksta.....................................................................................17
4.4. Hipertekst veze - linkovi................................................................................................ 20
4.5. Rad sa slikama.............................................................................................................. 21
4.6. Rad sa tabelama........................................................................................................... 24
4.7. Okviri – frames.............................................................................................................. 28
4.8. Forme............................................................................................................................ 34
5. JavaScript........................................................................................................................... 36
6. Active Srever Pages – ASP................................................................................................ 38
6.1. Iza kulisa....................................................................................................................... 38
6.2. Komunikacije koje se zasnivaju na Webu.....................................................................39
6.3. Request objekat............................................................................................................ 40
6.4. Response objekat......................................................................................................... 41
6.5. Cookies – kolačići......................................................................................................... 43
6.6. Server objekat............................................................................................................... 43
6.7. Application objekat........................................................................................................ 44
6.8. ASP sesije..................................................................................................................... 45
6.9. Komponente aktivnog servera.......................................................................................46
Ad Rotator komponenta................................................................................................... 47
Browser Capabilities komponenta...................................................................................48

- 105 -
Diplomski rad Poslovne Web prezentacije

Content Linking komponenta........................................................................................... 49


Content Rotator komponenta........................................................................................... 49
Counters komponenta...................................................................................................... 50
Page Counetr kompnenta................................................................................................ 50
Premission Checker komponenta....................................................................................50
Tools komponenta............................................................................................................ 50
Logging Utility komponenta.............................................................................................. 50
Komponente drugih proizvođača.....................................................................................50
6.10. Baze podataka i SQL.................................................................................................. 51
6.11. ADO objekti................................................................................................................. 52
Connection objekat.......................................................................................................... 52
Command objekat............................................................................................................ 53
Recordset Objekat........................................................................................................... 53
Stream i Record objekti.................................................................................................... 54
6.12. Tehnologija grupnog rada i CDONTS..........................................................................54
NewMail objekat.............................................................................................................. 54
7. Kako pokrenuti ASP?......................................................................................................... 55
7.1. PWS.............................................................................................................................. 55
8. Microsoft FrontPage 2000.................................................................................................. 60
8.1. Prvi pogled na ProntPage............................................................................................. 60
8.2. Formatiranje stranice.................................................................................................... 62
8.3. Rad sa tabelama........................................................................................................... 65
8.4. Kako da uredite tekst?.................................................................................................. 67
8.5. Umetanje linkova........................................................................................................... 70
8.6. Rad sa slikama.............................................................................................................. 72
8.7. Rad sa frejmovima........................................................................................................ 77
8.8. DHTML efekti................................................................................................................ 80
8.9. Formulari....................................................................................................................... 81
8.10. Pravljenje Web lokacije............................................................................................... 85
9. Adobe Photoshop............................................................................................................... 89
9.1. Programi za slikanje i programi za crtanje....................................................................89
9.2. Radna površina Photoshopa......................................................................................... 89
9.3. Alatke za pravljenje selekcija......................................................................................... 90
9.4. Alatke za slikanje........................................................................................................... 92
9.5. Alatke za obradu i toniranje........................................................................................... 93
9.6. Alatke za popunjavanje bojom.......................................................................................93
9.7. Alatke za kloniranje....................................................................................................... 94
9.8. Alatke za brisanje i vraćanje u predhodno stanje..........................................................95
9.9. Alatke za pomeranje i uzimanje uzoraka boje...............................................................95
9.10. Rad sa tekstom........................................................................................................... 95
9.11. Kontrole iz palete sa alatkama....................................................................................96
9.12. Veličina i rezolucija slike.............................................................................................. 97
9.13. Promena veličine platna.............................................................................................. 98
9.14. Bitmapirane slike i osnovni formati..............................................................................99
CopmpuServe GIF format.............................................................................................. 100
JPEG format.................................................................................................................. 101
10. Zaključak...........................................................................................................................................103

- 106 -

You might also like