Izrada i objavljivanje web stranica pomoću FrontPagea

1. Izrada i objavljivanje web stranica pomoću FrontPagea Microsoft FrontPage

2. 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

3. 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

4. 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

5. HTML • HTML je kraticaza 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

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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

12. Stvaranje novih web sjedišta i stranica • zatim treba u polju Specify the location of the new web siteupisati 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

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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

19. 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

20. 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

21. 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

22. Postavljanje obojane pozadine • Za postavljanje boje pozadine potrebno je:1. Odabrati Format > Background.2. Unutar polja Background odabrati željenu boju.3. Kliknuti OK. Alma

23. 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

24. 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

25. 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

26. 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

27. 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

28. 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

29. Umetanje i brisanje tablica Za umetanje tablica na stranicu potrebno je: • Kliknuti na mjesto na stranici na koje se želi unijeti tablica. • Odabrati Table > Insert > Table. Otvara se dijaloški okvir Insert Table. • 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

30. 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

31. 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

32. 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

33. 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

34. 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

35. 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

36. 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

37. KRAJ Alma