Professional Documents
Culture Documents
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
-2-
Diplomski rad Poslovne Web prezentacije
-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.
-4-
Diplomski rad Poslovne Web prezentacije
-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
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
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
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].
-9-
Diplomski rad Poslovne Web prezentacije
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
- 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.
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.
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
<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.
<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:
- 14 -
Diplomski rad Poslovne Web prezentacije
<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.
<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.
- 15 -
Diplomski rad Poslovne Web prezentacije
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.
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.
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”>
- 16 -
Diplomski rad Poslovne Web prezentacije
<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.
- 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.
<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.
FACE atribut dozvoljava primenu tačno određenog tipa fonta za osnovni prikaz
teksta u dokumentu.
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>
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.
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.
LOOP određuje broj pojavljivanja teksta, ako nije definisan, podrazumeva se infinite,
što znači da će se tekst neprekidno pojavljivati.
- 19 -
Diplomski rad Poslovne Web prezentacije
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>
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...
- 20 -
Diplomski rad Poslovne Web prezentacije
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.
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>.
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>
- 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).
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">
- 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.
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">
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.
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
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.
<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.
- 25 -
Diplomski rad Poslovne Web prezentacije
Sl. 4.4. Izgled tabele u Browseru. Primer upotrebe Cellspacing i Cellpadding atributa.
<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.
- 26 -
Diplomski rad Poslovne Web prezentacije
<tr>
<td colspan="4" > </td>
</tr>
<tr>
<td rowspan="3" > </ td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Specijalni karakter ' ' 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
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
MARGINWIDTH se koristi kada autor želi kontrolu nad levom i desnom marginom
okvira. Ako se koristi vrednost se zadaje u pikselima.
<FRAME MARGINWIDTH=”broj”>
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”>
FRAMESPACING daje dodatni prostor oko okvira, dajući efekat pokretnih okvira, a
vrednost mu se zadaje u pikselima.
<FRAME FRAMESPACING=”broj”>
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.
<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>
- 30 -
Diplomski rad Poslovne Web prezentacije
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:
Prva dva atributa pročitaće Netscape Navigator, a druga dva Internet Explorer.
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:
- 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.
- 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.
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”>
- 34 -
Diplomski rad Poslovne Web prezentacije
- 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.
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
<SCRIPT language=”JavaScript”>
<!- skrivanje od starih Web pretraživača
document.write(“tekst koji se ispisuje”)
//->
</SCRIPT>
<script language="JavaScript">
<!--
function tekst(txt) { window.status = txt; }
defaultStatus = "Msinski fakultet u Kragujevcu"
// -->
</script>
- 37 -
Diplomski rad Poslovne Web prezentacije
- 38 -
Diplomski rad Poslovne Web prezentacije
- 39 -
Diplomski rad Poslovne Web prezentacije
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”)
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.
- 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.
Response.Write Request.Form(“ime_polja”)
Redirect(“url”) Metod koji kazuje pretraživaču da učita stranicu, ili navedeni URL.
Sintaksa je opet veoma jednostavna:
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
- 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.
- 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.
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.
- 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.
- 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.
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:
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:
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; 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
%% 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.
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.
- 50 -
Diplomski rad Poslovne Web prezentacije
- 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
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”)
- 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
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.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:
- 55 -
Diplomski rad Poslovne Web prezentacije
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
Sl. 7.4. Izgled dijalog boks Add Directory. Dodavanje novih virtualnih direkorijuma.
- 57 -
Diplomski rad Poslovne Web prezentacije
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.
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
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
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
- 60 -
Diplomski rad Poslovne Web prezentacije
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:
- 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.
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
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.
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.
- 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.
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.
- 64 -
Diplomski rad Poslovne Web prezentacije
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:
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.
- 66 -
Diplomski rad Poslovne Web prezentacije
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.
- 67 -
Diplomski rad Poslovne Web prezentacije
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.
- 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.
- 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.
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.
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.
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.
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
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.
- 72 -
Diplomski rad Poslovne Web prezentacije
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.
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.
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.
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
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
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:
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
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:
- 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:
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
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.
- 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.
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.
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.
- 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.
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.
- 81 -
Diplomski rad Poslovne Web prezentacije
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.
Form
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
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.
- 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.
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.
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.
- 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.
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
- 87 -
Diplomski rad Poslovne Web prezentacije
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.
- 88 -
Diplomski rad Poslovne Web prezentacije
9. Adobe Photoshop
- 89 -
Diplomski rad Poslovne Web prezentacije
- 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.
- 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.
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.
- 92 -
Diplomski rad Poslovne Web prezentacije
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
Iz polja Use, možete odabrati opciju Pattern, što znači popunjavanje šarom, pa
zatim iz polja Costum Pattern odaberite šaru.
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.
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.
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).
- 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.
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.
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.
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.
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.
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.
- 99 -
Diplomski rad Poslovne Web prezentacije
- 100 -
Diplomski rad Poslovne Web prezentacije
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.
- 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
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
- 106 -