Microsoft FrontPage

1. Microsoft FrontPage Microsoft FrontPage je aplikacija za izradu web stranica. 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.

2. Pojmovi: klijent, poslužitelj, HTTP, web preglednik Klijent je program ili računalo koje zahtijeva neke usluge. Primjer: vaše računalo pri pregledavanju web stranica je klijent. 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. Napomena: svi web preglednici ne prikazuju učitane stranice jednako i zato je za autora web stranica dobro da pogleda svoj uradak u barem dva preglednika. 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. Primjer: web stranice se učitavaju s nekog poslužitelja, na poslužitelj se i šalju podaci koje ste ispunili u nekom obrascu na web stranicama. HTTP (Hyper Text Transport Protocol) je protokol za komunikaciju između klijenta i web poslužitelja. Napomena: kraticu http napisanu malim slovima ste sigurno vidjeli u adresnoj traci web preglednika. Naime, kad upišete neku web adresu, web preglednik joj, smatrajući da želite gledati web stranice, sâm priključi ime protokola. .

3. HTML(HyperText Markup Language) jeopisni 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. Dokument pisan HTML-om zove se web stranica. Web stranice povezuju se hiperlinkovimau 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.  • Struktura web sjedišta: • linearna • hijerarhijska • mreža

4. Linearna struktura Najjednostavniji način organizacije web sjedišta je linearna organizacija. U tom je slučaju točno određen redoslijed kojim se trebaju posjetiti stranice.Kod ove organizacije je navigacija jednostavna - u strogom slučaju dozvoljen je samo prijelaz na sljedeću stranicu, no u praksi se često dodaju i gumbi za prethodnu i za početnu stranicu.

5. Hijerarhijska struktura 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.

6. Struktura mreže Web sjedišta organizirana poput mreže u biti slijede logiku samog weba. Mreže pružaju mnogo slobode u kreiranju, ali su i zahtjevne za korisnika. Bez jasne strukture, neiskusan korisnik će lako previdjeti dijelove sadržaja. Međutim kao rješenje za manju količinu sadržaja, pogotovo kod materije bez izražene hijerarhije ovakva organizacija može biti vrlo interesantna.

7. Struktura u praksi Pretežno linearna organizacija s dodatnim sadržajima u obliku stabala. Ravnopravni sadržaji s linearnom strukturom. Stablo sadržaja s mrežama.

8. Domaća zadaća: Nacrtajte organizaciju web sjedištawww.geologija.hr

9. Pomoć: F1 Sučelje programa:

10. Stvaranje novih web sjedišta i stranica Odaberite File > New. U desnom se dijelu ekrana otvara okno zadatka. 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.

11. Pri stvaranju novog web sjedišta (New Web site) nudi se 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. 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.

12. Stvaranje nove stranice • Nova stranica se stvara slično kao i web sjedište. • Odabere se File > New. U desnom se dijelu ekrana otvara okno zadatka. • Iz okna zadatka se odabere neka od opcija iz skupine New page. Može se odabrati prazna stranica (Blank page) ili jedan od predložaka za izradu stranice. 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. Web stranice se najčešće spremaju kao HTML dokumenti, s ekstenzijom .htm ili .html. Budući da FrontPage omogućuje i izradu različitih skripti, (npr. u jezicima JavaScript ili Visual Basic), HTML datoteka kojima se sadržaj dodaje na poslužitelj, CSS datoteka, te mnogih drugih tipova dokumenata za web, omogućeno je i spremanje s odgovarajućim ekstenzijama (.js, .asp, .shtml, .css,...).

17. oblikovanje odlomaka • Format > Paragraph • pobrojane (Numbered) i nepobrojane (Bulleted) natuknice • Format > Bullets and Numbering

18. Postavljanje slika Na web stranicama se mogu nalaziti slike iz raznih izvora. Slike je moguće skenirati iz tiskanih materijala, snimiti digitalnim fotoaparatom i prenijeti na računalo, pronaći na Internetu, preuzeti iz Clip Art galerije ili samostalno izraditi u nekom od grafičkih programa. Osim toga, na webu postoji čitav niz stranica koje nude besplatne slike ili ih nude uz određenu novčanu naknadu. Autorska prava Za materijale koji su objavljeni na webu vrijede isti običaji i zakoni kao i za ostali objavljeni autorski materijal. Potrebno je poštivati autorska prava svakog autora materijala na webu. Materijal koji je objavljen na webu javan je i lako se kopira. Sva ozbiljnija web sjedišta sadrže i uvjete korištenja objavljenog materijala i potrebno ih je poštovati. U principu autori za materijal koji se koristi u nekomercijalne svrhe ne traže naknade. www.panoramio.com

20. Priprema slike Rezolucija (razlučivost) monitora je označena brojem elemenata slike u redu te brojem redaka iz kojih se sastoji slika. Npr. rezolucija 800 x 600 znači da se prikaz na zaslonu monitora sastoji iz 600 redaka od kojih svaki sadrži po 800 elemenata slike (pixel – picture element, točkica). Standardne vrijednosti rezolucije na zaslonima su 1024 x 768, 1280 x 1024 i sl. Kod dizajna web stranica treba povesti računa o tome da će pojedini korisnici imati različite rezolucije na svojim monitorima, pa će zbog toga npr. slika  zauzimati veći ili manji dio ekrana. Osim na ukupni broj točkica treba paziti i na razlučivost slike. Slike za web stranice treba smanjiti na razlučivost od 72 dpi (engl. dot per inch - elemenata slike po 25,4 mm) jer je to približna razlučivost ekrana, pa su slike na ekranu u veličini u kojoj bi bile i ispisane. Doduše, kvaliteta ispisa slike razlučivosti 72 dpi je niska. Premda Microsoft FrontPage ima neke mogućnosti za smanjenje slike, razlučivost slike je dobro  prethodno smanjiti u nekom od grafičkih programa. Najčešće korišteni programi za obradu slika su Adobe Photoshop, Corel PhotoPaint, PaintShop Pro i drugi. Može poslužiti i Microsoft Office Picture Manager, program koji je dobije u paketu Microsoft Office 2003.

23. Formati slika: Osim na ukupnom broju točkica i dubini boje vrijeme prijenosa slike se može skratiti i izborom odgovarajuće metode kompresije. Za uporabu slika na webu najpogodnija su tri formata – GIF, JPEG i PNG, od kojih se najčešće koriste prva dva. GIF format (engl. Graphic Interchange Format)- komprimirani format za slike koje sadrže malo boja (najviše 256).Najbolje komprimira slike s izrazitim plohama, pa je pogodan za naslove i gumbe. JPEG format (engl. Joint Photographic Experts Group)- komprimirani format kojim se gube neki podaci sa slika.Najbolje komprimira fotografije i slike s puno boja ili nijansi. PNG format (Portable Network Group) je nasljednik formata GIF, još uvijek relativno slabo rasprostranjen na webu. • Unos slike: • Copy - Paste • Insert

24. Hiperveze su važni elementi sjedišta. One upućuju na druge stranice sjedišta ili na drugo sjedište na Internetu. Veze mogu pokazivati: Na drugo sjedište – postavljanjem veza sa sjedišta na drugo web sjedište omogućuje se pristup nekom drugom web sjedištu sadržajno vezanom za sadržaj stranice s koje se postavlja veza. Klikom na postavljenu vezu otvara se stranica drugog web sjedišta. Na stranicu vlastitog sjedišta – postavlja se veza na stranicu unutar sjedišta, čime se ostvaruje povezanost između stranica jednog sjedišta. Klikom na vezu otvara se željena stranica koja je u sklopu istog sjedišta. Na adresu elektroničke pošte – postavljanjem veze na adresu elektroničke pošte olakšava se samo slanje pošte (pri njenom slanju pošiljatelj ne mora upisivati adresu, već se ona automatski ispisuje). Veze je moguće postaviti: - Na tekst - Na grafiku

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

27. Na kartici Languagesnajvažniji podatak je HTML encoding. To omogućava ispravnu detekciju tzv. kodne stranice web pregledniku posjetitelja stranica, a očituje se u ispravnom prikazivanju znakova koji nisu uobičajeni u engleskoj abedeci (u našem slučaju to su č, ć, ž, š i đ). FrontPage postavlja kodnu stranicu na Central European, što u stvarnosti znači Windows-1250. Ako se upotrijebi ta kodna stranica, posjetitelji s drugih operacijskih sustava bi mogli imati problema sa čitanjem. Trenutačno je uobičajeni izbor Central European (ISO 8859-2). . 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.

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

29. Zvučne datoteke moguće je napraviti samostalno, pronaći u Clip Art biblioteci ili pronaći na Internetu. Pritom je potrebno paziti da datoteke nisu zaštićene autorskim pravima.Najčešći formati zvučnih datoteka su: Wave (.wav) - nekomprimirani format, IBM-ov i Microsoftov standard AIFF (.aiff) - razvijen u Apple Computer, podržava kompresiju AU (.au) - Sun-ov format, u upotrebi na Unix računalima, podržava kompresiju RealAudio (.ram) - format razvijen u RealNetworks, podržava kompresiju i streaming (početak reprodukcije prije nego što je učitana cijela datoteka) MP3 (.mp3) - format popularan zbog dobre kompresije uz većini ljudi nečujan gubitak kvalitete MIDI (.mid) - format koji umjesto snimljenog zvuka ima listu nota i njihovih svojstava. Reprodukcija ovisi o instrumentima raspoloživim na računalu slušatelja. 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.

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

32. Postavljanje videozapisa • Do video zapisa moguće je doći na nekoliko načina: • - izraditi ih u programima za animaciju (Flash, Shockwave, QuickTime) • - snimiti ih pomoću digitalne video kamere • pronaći ih na internetu. • Najčešći formati video datoteka su: • .avi - prvi Microsoftov format • .mpg (MPEG) - format nalik na JPG format za slike • .mov - Appleov format, zahtijeva QuickTime • .rv - RealVideo iz RealNetworks 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.

33. Dinamički, odnosno DHTML efekti koriste se za izradu specijalnih efekata, poboljšanje čitljivosti i pristupa informacijama. Doduše, neki preglednici ne podržavaju DHTML efekte, pa trud neće biti vidljiv. • DHTML efekte moguće je postaviti na tekst i slike, dodati prelaske stranicama, izraditi padajuće liste i još mnoge druge efekte. • Dodavanje efekata na tekst i slike: • Označiti tekst ili sliku na koje se želi dodati efekt • 2. Odabrati View > Toolbars > DHTML Effects 3. U traci DHTML Effects u prvom padajućem izborniku odabrati događaj koja će pokrenuti efekt: - klik (Click) - dvoklik (Double-click) - prelazak miša (Mouse over) - učitavanje stranice (Page load). 4. U drugom padajućem izborniku, izborniku Apply odabrati efekt (efekt ovisi o izabranom objektu: Formatting, Swap Picture Fly in, Hop, Wipe,...).5. U trećem padajućem izborniku Choose Settings odabrati način izvođenja efekta.6. Spremiti promjenu i zatvoriti alatnu traku.

34. Izrada obrazaca Obrasci na stranicama služe prikupljanju podataka od posjetitelja sjedišta. Za izradu obrazaca potrebno je učiniti sljedeće:1. Pozicionirati točku unosa na mjesto stranice na koje treba postaviti obrazac.2. Odabrati Insert > Form > Form.

35. Slanje podataka s obrasca Da bi se podaci mogli sakupiti, podaci s ispunjenog obrasca moraju biti proslijeđeni. To se zbiva pritiskom na gumb Submit. Podatke je moguće smjestiti u datoteku, bazu podataka ili poslati na definiranu adresu elektroničke pošte. Za definiranje odredišta podataka potrebno je:1. Kliknuti desnom tipkom miša na obrazac i odabrati Form Properties.2. U dijaloškom okviru Form Properties odabrati odredište.Za smještaj u tekstualnu datoteku na web poslužitelju potrebno je odabrati Send to, a zatim odrediti ime datoteke u polju File name. Jednostavno je i slanje na određenu adresu elektroničke pošte - potrebno je odabrati Send to te u polje E-mail address unijeti adresu elektroničke pošte.3. U svakom od slučajeva treba još dopisati potrebne opcije (Options). Potvrda o poslanom obrascu Nakon slanja obrasca  pošiljatelju se obično prikazuje stranica s porukom o primljenom obrascu. Adresa te stranice se upisuje na sljedeći način:1. U okviru za dijalog Form Properties kliknite na Options.2. U okviru za dijalog Saving Results kliknite na Confirmation Page, što omogućuje definiranje vlastite poruke.3. Klik na OK.

36. Predložak za web stranicu je unaprijed formatirana stranica koja može imati i upisani sadržaj kojeg treba samo prilagoditi svojim potrebama.Za odabir i primjenu pojedinog predloška potrebno je učiniti sljedeće:1. Odabrati iz glavnog izbornika File > New.2. U oknu zadatka odabrati More page templates. Otvara se dijaloški prozor Page Templates.

37. Postupak objave sjedišta