Izrada Internet prezentacije u FrontPage – uKreiranje Web Site-a

Nakon obavljenih pripremnih radnji pristupa se izradi Internet prezentacije. Kako seto radi bi e prikazano na primeru Internet prezentacije virtuelnog preduze a Aqua. Prvo jepotrebno kreirati zaseban folder u kojem e se nalaziti prezentacija. U programuFrontPage (u daljem tekstu FP) iz menija File izabrati New pa Page or Web ime seotvara Task Pane u kome biramo Empty Web.

Time se otvara prozor za dijalog kao na slici, pa dugmetom Browse prona i iizabrati pripremljeni folder.

Izborom pripremljenog foldera kreiramo Web sajt. Ikonica foldera se menja i imaizgled kao na slici. U folderu se kreira 4 nova podfoldera od kojih je nama veoma zna ajanfolder „images“. To je folder u kojem emo uvati sve slike koje se nalaze u prezentaciji.

Program FP nakon kreiranja Web sajta ima izgled kao na slici.

Paleta View slu i da bi se izabrao na in prikaza u najve em delu prozora. Poredpalete se nalazi polje u kojem je prikazana struktura Web sajta. Uklju ivanje/isklju ivanjeprikaza ovog polja se vr i izborom opcije Folder list iz View menija. Ostale elemente

2

prozora ne obja njavamo pod pretpostavkom da su svi ranije upoznati sa njima kroz Wordi Excel.Kreiranje Web strane u okviru Web Site-a

U polju Folder list izabrati folder u kome se nalazi prezentacija.

Iz Task Pane-a izabrati Blank Page. Time se u najve em polju pozora programaotvara nova Web strana. Na vrhu se nalazi jezi ak u kojem je napisano ime Web strane.Klikom na jezi ak se bira Web strana ukoliko ima vi e otvorenih strana.

U dnu strane se nalazi 3 dugmeta kojima se bira na in prikaza Web strane, asamim tim i na in kreiranja Web strane:

• Normal je grafi ki na in prikaza i kreiranja Web strane. To je na in koji emonaj e koristiti prilikom kreiranja Web site-a.

• HTML je na in prikaza koji predstavlja kreiranje Web strane pomo u HTMLkoda.

• Preview koje slu i da bi videli kako izgleda na a prezentacija.

Generalna pode avanja Web strane se vr e u prozoru Page Properties koji seotvara izborom opcije Properties iz menija File ili iz kontekstnog menija dobijenim nadtom Web stranom. U ovom prozoru se nalazi nekoliko kartica:

General – kartica na kojoj se defini e naziv (Title). Title je naziv koji se ispisuje unaslovnoj liniji programa za pregled Internet sadr aja (Web Browser). Pored naziva Titlesvaka Web strana ima i naziv koji se dodeljuje prilikom snimanja na hard disk. Ta dvanaziva mogu ali ne moraju biti ista.

3

Background – kartica na kojoj se pode avaju boje za pozadinu, tekst, linkove,otvorene linkove ili se bira slika za pozadinu Web strane. Ukoliko se izabere slika zapozadinu Web strane, treba imati u vidu da e se slika ponavljati dovoljan broj puta daprekrije celu stranu i po irini i po visini. Na Internetu postoji puno sli ica kreiranih ba zapozadinu Web strana. Za njih je karakteristi no da se prilikom spajanja sli ice sa njenomkopijom idealno uklapaju i ine jednu celinu.

Ukoliko je izabrana slika, nije mogu e postaviti boju za pozadinu Web strane. Usuprotnom, izbor boje je proizvoljan, kao i izbor boja za tekst. Boje za linkove i za otvorenelinkove su danas ve standardizovane, tako da ih nije po eljno menjati kako ne biposetioca dovodili u nedoumicu. Link se uobi ajeno boji plavom bojom, a otvoreni link (linkpremam Web stranici koja je ve pose ena) bordo.

4

link otvoreni linkPored ove dve kartice jo nam je zanimljiva kartica Language. Na njoj se defini e

kojim je jezikom Web strana napisana i koji skup karaktera je upotrebljen. Informacija oupotrebljenom skupu karaktera se koristi u Browser-u prilikom prikazivanja web stranekako bi se ona ispravno prikazala. Preporuka je da se prilikom izrade izabere skupkaraktera Unicode (UTF-8) ili Central European (ISO 8859-2) kako bi bila ispravnoprikazana sva na a slova.

Kreiranu Web stranu je potrebno sa uvati. Po etna strana prezentacije se morasa uvati pod nazivom index.html, a ostalim stranama se mogu nazivi mogu proizvoljnodavati. Sve Web strane koje se kreiraju uvaju se u folderu koji je pripremljen i progla enza Web Site.

Sadr aj kreirane Web stranice mo e biti tekst, slika, animacija, video, zvuk…Tekst se ubacuje i formatira u Web stranici isto kao i u programu za obradu teksta

MS Word.

5

Prilikom formatiranja teksta treba koristiti neke od standardnih fontova, jer se nara unar posetioca Web prezentacije prosle uje zasebno tekst a zasebno informacije oformatiranju. Ovako izgleda HTML kod poslednjeg reda na prethodnoj slici.

Ukoliko posetilac Web prezentacije nema font koji ste vi koristili prlikom izrade webstranice, njegov browser e tekst prikazati nekim drugim fontom to mo e zna ajno dapromeni izgled va e prezentacije.

Ubacivanje slike na Web stranu se vr i na identi an na in kao i ubacivenje slika uMS Word-u. Mora se voditi ra una prilikom objavljivanja Web prezentacije da se svakaslika koja je kori ena tako e prebaci na server. Da bi olak ali rad, sve slike treba stavljatiu podfolder Images u folderu u kome je Web prezentacija. Druga stvar o kojoj se moravoditi ra una kada su slike u pitanju je njihova veli ina. FrontPage dozvoljava promenuveli ine slike prevla enjem, ali se time smanjuje odnosno pove ava samo prikaz slike naWeb stranici a ne i njena fizi ka veli ina. Pove anje slike na ovaj na in e dovesti do padakvaliteta slike dok e smanjivanjem slike na ovaj na in kvalitet ostati zadovoljavaju i ali evreme potrebno za u itavanje Web stranice biti znatno du e nego to bi bilo da je slikastvarno smanjena. Priprema slika se mo e vr iti u bilo kom programu za obradu slika.

Ubacivanje slike

6

Formatiranje slika u FrontPagu se malo razlikuje od MS Worda zbog specifi nostiHTML jezika. Mogu e je pode avati odnos slike i teksta po horizontali na tri na ina: slika uliniji sa tekstom, slika levo i slika desno.

Pode avanje odnosa slike i teksta po horizontali

Tako e je mogu e pode avati odnos slike i teksta po vertikali na osam na ina odkojih neki izgledaju veoma sli no: Top, Texttop, Middle, Absmiddle, Center, Baseline,Bottom i Absbottom.

Pode avanje odnosa slike i teksta po vertikali

Veoma korisna opcija za formatiranje slika je rastojanje izme u slike i teksta(Horizontal spacing i Vertical spacing) koja dodaje odre eni broj piksela iznad i ispod slikeodnosno levo i desno od slike.

Rastojanje slike od teksta

7

Kreiranje hiperlinkovaHiperlinkovi su tekst ili slika iza kojih se krije URL adresa. Da bi objasnili kreiranje

hiperlinkova, napravili smo jo jednu Web stranu u okviru prezentacije pod nazivomkontakt. Sa po etne Web strane index.html emo napraviti link prema Web stranikontakt.html i obrnuto - ime emo zadovoljiti pravilo da se omogu i lako kretanje krozWeb prezentaciju. Da bi kreirali hiperlink potrebno je uneti tekst ili sliku koji e predstavljativezu prema nekoj drugoj strani.

Na slici se vidi tekst Kontakt kojem smo pridru ili hiperlink. Potrebno je ozna itiuneti tekst i iz menija Insert izabrati Hyperlink. Iz dijalo kog prozora se bira strana premakojoj e biti kreiran hiperlink.

Kreiranje linkova

Hiperlink mo e da se kreira tako da otvara:- Web stranu u okviru iste Web prezentacije- Web stranu iz neke druge prezentacije- Odre eno mesto (sidro ili Bookmark) na istoj ili nekoj drugoj Web strani

Da bi se otvorila Web strana u okviru iste Web prezentacije dovoljno je izabratistranu u dijalo kom prozoru na na in kako je prethodno opisano.

Za Web stranu iz druge Web prezentacije potrebno je upisati apsolutnu adresuodnosno ceo URL. Primer celog URL-a je http://www.ets-becej.edu.yu/biroi.html

8

Kreiranje linka sa apsolutnom adresom

Hiperlinkovi koji postavljaju otvorenu stranu na odre enom mestu se naj esre u kod duga kih strana kako bi se izbeglo skrolovanje stranice pa se klikom na linkpresko i na eljeni deo strane ili na primer na vrh. Da bi mogli kreirati ovakav hiperlinkpotrebno je prethodno definisati koja su to mesta na koja elimo da se otvorena Webstrana postavi. Ta mesta se nazivaju sidra (Bookmark). Definisanje sidra se vr i tako tose pozicionira kursor na eljeno mesto pa se iz Insert menija izabere Bookmarks. Uotvorenom dijalo kom prozoru se u polju Bookmark name upisuje naziv sidra. Na mestugde je postavljeno sidro pojavljuje se zastavica.

Kreiranje sidra

Kreiranje hiperlinka koji otvara stranicu na mestu sidra se vr i tako to se ozna itekst i iz menija Insert izabere Hyperlink. U dijalo kom prozoru se izabere dugmeBookmarks ime se otvara novi dijalo ki prozor iz kojeg se bira neko od definisanih sidra.Ukoliko se eli otvoriti neka druga Web strana na odre enom mestu, potrebno je prvoizabrati eljenu stranu pa tek onda listu sidra. Ako na izabranoj Web strani nemadefinisanih sidra, program ne e otvoriti listu.

Kreiranje slikovnih hiperlinkova se vr i na identi an na in kao i kreiranje tekstualnihlinkova, s tom razlikom to se umesto ozna avanja teksta izabere slika.

9

Danas postoji sve vi e korisnika koji koristi irokopojasni pristup Internetu, to jeuzrokovalo kreiranje Web strana sa puno grafi kih elemenata i sa puno animacija idinami kih elemenata. Po tuju i pravila o kreiranju Web strana koja su navedena ranije itrenutno stanje u Srbiji to se ti e kori enja Interneta, trebalo bi izbegavati kreiranjetakvih Web strana. Me utim, kako je cilj da na a Web prezentacija pose ena, ubaci emopo koju sliku i po koji dinami ki element.Kreiranje dinami kih elemenata

Dinami ki elementi su delovi teksta ili slike koji reaguju na akcije koje posetilac Webprezentacije vr i prilikom posete. Naj e kori eni dinami ki elemenat je zamena slikeprilikom prelaza mi em preko nje. Takvi elementi se sre u kod menija ili kod hiperlinkovakako bi dodatno ukazali posetiocu da je mogu e klikom na takav element otvoriti nekudrugu stranu.

Da bi napravili dinami ki element zamenjuju e slike potrebno je imati dve slike.Prva slika je ona koja se uvek vidi a druga je ona koja se pojavi kad posetilac pre e mi empreko nje.

Elementi za dinami ko dugme

Prvo se na poziciju ubacuje slika koja se uvek vidi. Ozna i se slika i izabereDinamic HTML Effects iz menija Format. Time se otvara Toolbar kao na slici.

Kreiranje dinami kog dugmeta

U polju On izabere se jedna od akcija posetioca sajta, u polju Apply se bira efekatkoji e se dogoditi, a u polju desno od polja Apply se defini u detalji efekta. Kod kreiranjazamenljive slike potrebno je izabrati u polju On – Mouse over, u polju Apply – Swappicture i otvaranjem polja Choose pictures izabere se druga slika.

1. Objavljivanje Web sajtaTokom kreiranja Web sajta sve Web strane i sve slike koje se nalaze u Web sajtu

se uvaju na lokalnom disku. Nakon zavr enog kreiranja Web prezentaciju treba „podi i“na Internet, onosno treba kopiju kreiranog Web sajta postaviti na server. Kako prilikomkreiranja Web sajta treba voditi ra una o mnogim razli itim stvarima, veoma se lako mo epotkrasti gre ka. Pre objavljivanja Web sajta treba izvr ti proveru. Provera se mo e vr itina razne na ine a jedan od njih je dat kroz Check listu u nastavku.

10

Tabela: Check lista za proveru Web sajta

DA LI SADR I SVE POTREBNE INFORMACIJE?Podaci za kontakt: naziv, adresa, telefon, fax, e-mail, radno vreme, kontaktosobePodaci o proizvodima ili uslugama: proizvodi, usluge, cene, op ti usloviposlovanja, narud benicaIdeja vodilja preduze a (na ela, vrednosti, vizije, opho enje...)Poslovni uspeh u prethodnom perioduOrganizacija preduze a, struktura, tim (eventualno slike zaposlenih)Spisak referenci (kupci, klijenti)Aktuelne informacije, novosti o Virtuelnom preduze uIstorijat Virtuelnog preduze aLogoAutor i copyrightDA LI JE SAJT PRIVLA ANDizajn je upadljivJasan je kontrast izme u grafike, teksta i pozadineRazmak izme u redova je dovoljno velikRedovi su dovoljno kratki da bi se mogli lako itatiInformacije se mogu pro itati bez pomeranja slikeTekst je dobro struktuiranSlova su itkaGrafike i fotografije ostavljaju utisak dobrog tehni kog kvalitetaDA LI JE SAJT HOMOGENLogo je na svim stranicama postavljen na isto mestoKlikom na logo se mo e vratiti na po etnu stranuNavigacioni elementi se na svim stranicama nalaze na istom mestuMo e se prepoznati na kojoj se stranici nalaziteStranice su grafi ki dizajnirane na isti na inDA LI SAJT NUDI NAVIGACIONU SIGURNOSTNavigaciono podru je je uvek dostupno i preglednoMo e se „skinuti“ softver neophodan za pregledavanje ili postoji link kojiupu uje na stranicu sa koje se to mo e uraditiPostoje tekstovi obja njenja tj. funkcija za pomoNavigacioni elementi obja njavaju sve sami po sebiLinkovi su prepoznatljivi, npr. tako to su podvu eniLinkovi koji su ve pozivani su u drugoj bojiLinkove je lako pogoditi mi emPokazuje se za koje je ita e (browser) optimizovanoSvi linkovi rade

11

Ukoliko je na sve stavke iz Check liste pozitivno odgovoreno, mo e se pristupiti“podizanju” Web sajta. Program FrontPage ima alatku za “podizanje”. Pored ovakvih alatkiu okviru programa za izradu Web prezentacija postoje programi koji su namenjeniisklju ivo za operaciju objavljivanja Web prezentacija na Internetu. Kori enjem takvihprograma se omog ava bolja kontrola nad prenosom fajlova sa lokalnog ra unara naserver. Jedan od takvih programa je i FileZilla koji se nalazi na prate em disku. Programnije potrebno instalirati ve je dovoljno samo ga prekopirati na hard disk. Na slici jeprikazan izgled programa FileZilla.

FileZilla

Prozor programa je podeljen na dva dela za rad (Lokalni disk i Server) i dva dela zakontrolu toka prebacivanja (Status i Fajlovi na ekanju). Definisanje korisni kog naloga uprogramu FileZilla se vr i prema uputstvima davaoca usluge Hostinga. Preporuka je da tajdeo urade u enici na Informatici ili da to uradi Sistem ili Network Administrator ukolikopostoji u koli.

Uspostavljanje konekcije sa serverom se vr i izborom servera iz liste (ukoliko ih imavi e). Nakon uspostavljanja konekcije u delu pozora u kojem se prikazuje sadr aj diska naserveru koji je do tad bio prazan bi e prikazan sadr aj.

12

Uspostavljanje konekcije

U delu koji prikazuje sadr aj lokalnog diska prona i i prikazati sve fajlove koje jepotrebno prekopirati na server. U delu koji prikazuje sadr aj diska na serveru prona ifolder u koji treba postaviti kopiju fajlova sa lokalnog diska. Fajlove koje treba kopiratiozna iti i desnim klikom otvoriti kontekstni meni iz kojeg treba izabrati Add to Queue.

Prebacivanje fajlova na ekanje

Time se fajlovi koje je potrebno kopirati prebacuju u polje za ekanje. Ukoliko treba„podi i“ fajlove koji se raspore uju u razli ite ve postoje e foldere (npr. kod a uriranjaWeb sajta) potrebno je za svaki folder zasebno uraditi pronala enje i ozna avanje fajlovana lokalnom disku i ozna avanje foldera u koji e biti sme teni na disku servera nakonega e se izabrati Add to Queue. Operaciju ponoviti za svaki folder u koji se sme taju

fajlovi.

13

Fajlovi na ekanju

Kada se pripreme fajlovi koji e se kopirati i mesto na koje e se kopirati iz menijaQueue izabrati Proces Queue ili iz linije alatki izabrati dugme sa strelicom i slovom Q.Ovim se zapo inje prenos fajlova sa lokalnog diska na server.

Kod a uriranja Web sajta se obi no postoje a Web strana prepravi i ponovo kopirana server. Ako fajl (Web strana) ve postoji na serveru, program e ponuduti nekolikoakcija:

Overwrite – program e zameniti postoje i fajl novimOverwrite if newer – program e uporediti datume kreiranja fajlova i zameniti

postoje i fajl novimResume – program e ponovo proveriti poklapanje imenaRename – program e dozvoliti promenu imena novom fajlu pre nego to ga kopira

na serverSkip – program e odustati od prebacivanja fajla na server

Prepisivanje postoje ih fajlova

Na istom prozoru postoji polje Always use this action when a file already existskojim se pamti izabrana akcija. Ukoliko se prilikom prvog a uriranja izabere i zapamtiakcija za svaki fajl, a uriranje se mo e vr iti i tako to se ponovo kompletan sadr aj Websajta ozna i i „podigne“ a program e prekopirati samo one fajlove za koje je takva akcijazapam ena.