Izrada i objavljivanje web stranica pomoću FrontPagea

Microsoft FrontPage

Alma

Microsoft FrontPage • Microsoft FrontPage 2003 je aplikacija za izradu

web sjedišta. Njena je velika prednost jednostavnost sučelja i sličnost s aplikacijama Microsoft Office paketa, što većini korisnika znatno olakšava rad i smanjuje vrijeme potrebno za učenje korištenja programa.

Osim Microsoft FrontPagea, za izradu i objavljivanje web sjedišta potrebni su nam i web preglednik (npr. Internet Explorer) te program za uređivanje slika (npr. Photoshop).

Alma

Osnovni pojmovi

• Klijent je program ili računalo koje zahtijeva neke usluge.

• Web preglednik je klijentski program koji s poslužitelja dohvaća i prikazuje web stranice i slične sadržaje. Trenutačno najpoznatiji web preglednici su Internet Explorer, Firefox, Opera, Netscape.

Alma

Osnovni pojmovi• Poslužitelj je program ili računalo koje upravlja

podacima. Komunikacija između poslužitelja i klijenta obavlja se prema točno određenim protokolima.

• HTTP (Hyper Text Transport Protocol) je protokol za komunikaciju između klijenta i web poslužitelja.

• Pri objavljivanju web stranica koristit ćete protokol namijenjen prijenosu datoteka, FTP (File Transfer Protocol).

Alma

HTML• HTML je kratica za HyperText Markup

Language, opisni jezik za dokumente korištene na World Wide Webu. Definiraju se elementi web stranice, te se određuje kako stranica treba izgledati i kako se pojedini elementi moraju na stranici ponašati.

• FrontPage omogućuje izradu web sjedišta bez neposrednog pisanja HTML kôda.

Alma

Struktura web sjedišta • Dokument pisan HTML-om zove se web

stranica. Vlasnik ili autor skupine web stranica koje pokrivaju isto područje povezuje svoje stranice u hiperlinkovima u web sjedište. Na taj način se omogućava posjetiteljima upoznavanje sa cjelokupnim sadržajem. Početna stranica web sjedišta ima obično najjednostavniju adresu među svim stranicama sjedišta (npr. www.carnet.hr) i zove se homepage.

Alma

Struktura web sjedišta • Hijerarhijske strukture su

se pokazale najpogodnijima za organizaciju složenih web sjedišta. S početne stranice je dostupan manji broj stranica, ali posjetom bilo kojoj od njih se otvara mogućnost posjete sljedećima.

Alma

Sučelje programa Microsoft FrontPage

• Ulazak u program:FrontPage se otvara iz

izbornika Start, zatim Programs, te potom iz grupe Microsoft Office treba izabrati Microsoft FrontPage.

• Sučelje FrontPagea slično je sučeljima Worda i Excela.

Alma

Stvaranje novih web sjedišta i stranica

• FrontPage omogućuje jednostavno stvaranje novih web sjedišta te dodavanje novih stranica u već stvorena web sjedišta.

• Stvaranje novih web sjedišta obavlja se na sljedeći način:

1. Odabere se File > New. U desnom se dijelu ekrana otvara okno zadatka.

Alma

Stvaranje novih web sjedišta i stranica

U oknu zadatka je moguće odabrati jednu od sljedećih opcija:

• otvaranje nove stranice (New page)

• otvaranje novog web sjedišta (New Web site)

• otvaranje postojećih predložaka za stranicu koje je moguće pronaći na Internetu.

Alma

Stvaranje novih web sjedišta i stranica

Pri stvaranju novog web sjedišta (New Web site) se nudi paleta predložaka web sjedišta.

• izaberemo  One Page Web site. Time se stvara datoteka index.htm. Ime je izabrano tako, da većina web poslužitelja, kad se u adresi ne upiše ime datoteke, otvara upravo tu datoteku.

• .

Alma

Stvaranje novih web sjedišta i stranica

• zatim treba u polju Specify the location of the new web site upisati ili izabrati mapu u kojoj će se nalaziti buduće web sjedište. Najbolje je da je to prazna mapa.Poslije će se ime mape vidjeti na naslovnoj traci FrontPagea.

Alma

Spremanje stranica

• Svaka pojedina stranica se može pohraniti putem izbornika File > Save (Save As). U oba će se slučaja otvoriti prozor koji omogućuje:

• izbor mape spremanja dokumenta • izbor imena dokumenta • izbor tipa dokumenta.

Alma

Otvaranje stranica

• Stranice se mogu otvoriti korištenjem izbornika, File > Open, ali i dvostrukim klikom na datoteku u popisu Folder List na lijevoj strani radnog prostora. Prikaz popisa datoteka se uključuje i isključuje s View > Folder List.

Alma

Otvaranje web sjedišta • Za nastavak rada na ranije stvorenom web

sjedištu postupak je sljedeći:

1. Iz glavnog izbornika odabere se File > Open Site.

2. U okviru prozora Open Site odabere se mapa koja sadrži željeno web sjedište.

3. Klikom na gumb Open se otvara web sjedište. Nakon toga se mogu otvarati njegove pojedinačne datoteke.

Alma

Prikazi u FrontPageu FrontPage nudi prikaze orijentirane na različite sadržaje web sjedišta:• Page – prikaz za uređivanje i pregled stranica • Folders – prikazuje mape i datoteke trenutnog sjedišta • Reports – omogućuje pregled informacija vezanih uz sjedište, kao

što su broj dokumenata, slika, hiperlinkova, stanja hiperlinkova i sl. • Navigation – daje hijerarhijski pregled svih stranica (ako je definiran) • Hyperlinks – prikazuje hiperveze od pojedine stranice sjedišta

prema drugim stranicama sjedišta i drugim sjedištima • Tasks – prikazuje zadatke (za nas ili za naše suradnike) zapisane

uz pojedine web stranice. • Promjena prikaza obavlja se iz izbornika View odabirom

odgovarajuće naredbe.

Alma

Prikaz stranice • Unutar prikaza Page jahačima na dnu stranice se za

potrebe većeg dijela ovog tečaja mogu izabrati prikazi:• Design – za rad na stranici • Preview – za prikaz stranice u obliku kao što će biti u

prikazana pregledniku.

Alma

Prikaz stranice

• U odnosu na Preview još je bolji izbor pogledati stranice u pravom web pregledniku. To je moguće postići s: File > Preview in Browser, te izborom preglednika i veličine prozora. Dobro je stranice pregledati u više raznih preglednika i više veličina prozora jer nikad ne znamo u kakvoj će okolini posjetitelji gledati naše stranice.

Alma

Unos i oblikovanje teksta

• Unos teksta u FrontPageu relativno je jednostavan i sličan unosu teksta u drugim tekst procesorima, primjerice u Microsoft Wordu.

Alma

Opća svojstva stranice i jezik Opća svojstva stranice i jezik

Svojstva stranice su dostupna iz izbornika File naredbom Properties.

• Opća svojstva stranice su dostupna na kartici General. Tu je najvažnije upisati naslov stranice, tekst koji će biti prikazan na naslovnoj traci web preglednika.

• Na istoj kartici su još i opis stranice, Page description, koji se prikazuje na listama rezultata tražilica, te ključne riječi, keywords, koje također služe tražilicama.

Alma

Opća svojstva stranice i jezik Opća svojstva stranice i jezik

• Na kartici Languages treba namjestiti i jezik. To utječe na provjeru pravopisa, ali se i prenosi kao podatak koji tražilicama ukazuje na upotrijebljeni jezik.

• Na kartici Languages najvažniji podatak je HTML encoding. To omogućava ispravno prikazivanje znakova koji nisu uobičajeni u engleskoj abedeci (u našem slučaju to su č, ć, ž, š i đ). Trenutačno je uobičajeni izbor Central European (ISO 8859-2).

Alma

Postavljanje obojane pozadine • Za postavljanje boje

pozadine potrebno je:

1. Odabrati Format > Background.

2. Unutar polja Background odabrati željenu boju.

3. Kliknuti OK.

Alma

Postavljanje pozadinske slike • Za postavljanje pozadinske

slike postupak je sljedeći:

1. Odabrati Format > Background.

2. Unutar okvira Page Properties označiti polje Background Picture.

3. Kliknuti gumb Browse i odabrati željenu sliku.

4. Za kraj kliknuti OK.

Alma

Hiperveze na stranice drugog web sjedišta

Hiperveze se na stranicu drugog web sjedišta postavljaju ovako:

1. Označi se tekst ili slika koji će poslužiti kao hiperveza.

2. Odabere se Insert > Hyperlink.

3. U okviru Insert Hyperlink, u polje Address upiše se adresa stranice s kojim se želi uspostaviti veza.

Treba paziti da se adresa napiše potpuno, s http:// na početku.

4. Za kraj se klikne na OK.

Alma

Hiperveze na stranice unutar web sjedišta

• Za postavljanje veza na stranicu unutar sjedišta, u prostor adrese je potrebno upisati naziv stranice sjedišta na koju se želi postaviti veza. Uz naziv treba eventualno dopisati i mapu u kojoj se nalazi.

Postupak se može pojednostavniti tako da se klikom iz ponuđenog popisa datoteka izabere željena.

Alma

Postavljanje hiperveza na element iste stranice

Prvo treba označiti mjesto na kojem će se stranica otvoriti:

1. Mjesto koje se treba otvoriti klikom na link se označava s Insert > Bookmark.

2. Unutar okvira Bookmark Name treba upisati ime označenog teksta i kliknuti OK.

Alma

Postavljanje hiperveza na element iste stranice

• Nakon označavanja mjesta treba postaviti hipervezu:

• 1. Izabrati tekst koji će biti hiperlink te odabrati Insert > Hyperlink.

2. Unutar okvira Hyperlink potrebno je kliknuti Bookmark, izabrati oznaku koja će postati odredište veze i kliknuti OK.

3. Za kraj se klikne OK.

Alma

Tablice na web stranicama • Tablice se u FrontPageu, kao i u drugim

aplikacijama, koriste za prikazivanje tabelarnih podataka.

Njihova još važnija funkcija na web stranicama se odnosi na dizajniranje. Tako se  tablice koriste za raspoređivanje elemenata na web stranici (teksta, grafike i drugih objekata). Organiziranjem sadržaja u tablice, web stranica poprima izgled sličan stranici tiskanog časopisa.

Alma

Umetanje i brisanje tablica Za umetanje tablica na stranicu potrebno je:1. Kliknuti na mjesto na stranici na koje se želi

unijeti tablica.

2. Odabrati Table > Insert > Table. Otvara se dijaloški okvir Insert Table.

3. U dijaloškom okviru Insert Table odabiru se sljedeće postavke:

• broj redaka (Rows) • broj stupaca (Colums) • poravnanje tablice (Aligment) • debljina okvira (Border size) • razmak od sadržaja do ruba ćelije (Cell

padding) • razmak između ćelija (Cell spacing) • širina u pikselima ili postocima. • Svojstva tablice se mogu mijenjati i

naknadno.4. Nakon izvršenog odabira potrebno je kliknuti

OK.

Alma

Umetanje redaka i stupaca • Umetanje novih redaka i stupaca

tablice radi se ovako:

1. Kursor se postavi na mjesto u tablici na koje se želi umetnuti novi redak ili stupac.

2. Odabere se Table > Insert > Rows or Columns.

3. Za umetanje novih redova označi se klikom miša polje uz naziv Rows, a zatim odredi broj redova koji se žele unijeti. Za umetanje novih stupaca označi se mišem polje uz naziv Columns te odredi broj željenih stupaca..

4. Na kraju se odabir potvrdi klikom na OK.

Alma

Zvuk na web stranicama • Preporučljivo je koristiti Wave, MP3 i MIDI

datoteke, jer će ih moći čuti većina posjetitelja stranica.

Zvuk na web stranci može biti postavljen na dva načina:

• kao pozadinski zvuk koji se uključuje prilikom pregleda stranice

• kao objekt na stranici.

Alma

Zvuk na web stranicama • Postavljanje pozadinskog zvuka radi

se na sljedeći način:

1. Odabere se File > Properties.

2. U okviru Page Properties klikne se na polje Location te potom Browse.

3. U okviru Background Sound odabere se željena zvučna datoteka i klikne Open.

4. Broj ponavljanja zvuka moguće je regulirati odabirom jedne od opcija:

• Forever - konstantno ponavljanje zvuka

• Loop - ograničeno ponavljanje, treba odrediti broj ponavljanja.

• 5. Za kraj se klikne gumb OK.

Alma

Zvuk na web stranicama • Ubacivanje zvuka vezivanjem za

gumb, koji se aktivira čim posjetitelj klikne na gumb, radi se na sljedeći način:

1. Na stranici je potrebno označiti mjesto na koje se želi postaviti gumb.

2. Zatim se odabere Insert > Interactive Button.

3. U okviru za dijalog Interactive Buttons se definira izgled gumba, tekst koji će se nalaziti na njemu i, najvažnije, link na datoteku sa zvučnim efektom.

Alma

Umetanje video zapisa • Postupak umetanja video zapisa je nalik na

umetanje statične slike:

1. Kliknuti na mjesto na stranici na koje se želi umetnuti video zapis.

2. Odabrati Insert > Picture > Video.

3. U dijaloškom okviru Video odabrati željenu datoteku a zatim kliknuti Open.

Alma

Teme • Teme u Microsoft FrontPageu

su idealne za usklađivanje shema boja, izgleda teksta i grafičkih elemenata na stranicama.

• Na izabrane web stranice teme se primjenjuju odabirom Format > Theme, čime se otvara okno zadatka Theme. Željena tema se odabire klikom na njen prikaz unutar liste Select a theme.

Alma

Prilagođavanje tema Ako postojeće teme svojim izgledom u

potpunosti ne udovoljavaju postavljenim zahtjevima, moguće je napraviti novu temu ili promijeniti postojeću:

1. Odabrati Format > Theme. Otvara se okno zadatka Theme.

2a. Za novu temu treba unutar okna zadatka Theme kliknuti na Create new theme. Otvara se okvir Customize Theme.

2b. Ako želite promijeniti postojeću temu, kliknite na strelicu pokraj te teme, te odaberite Customize.

3. Okvir nudi opcije modifikacije boje, grafike i teksta. Nakon učinjene promjene boje, grafike i teksta za potvrdu je potrebno kliknuti OK.

Alma

KRAJ