Transcript frontpage1

Nastavna cjelina:
5. Web






Web stranica je pojedinačni HTML ili hipertekstualni dokument. Kako
uz tekst često sadrži slike, animacije, zvučne i videozapise možemo ju
nazvati i hipermedijskim (multimedijskim) dokumentom.
HTML ili Hyper Text Markup Language je prezentacijski, opisni jezik
namijenjen izradi web stranica pomoću HTML oznaka (eng. tag).
Poveznice su posebno oblikovane riječi, slike i područja kojima
povezujemo web stranice. Klikom na poveznicu otvara se stranica
naznačena poveznicom.
Web mjesto (Web site) ili web sjedište je mjesto na lokalnom ili
udaljenom računalu (web poslužitelju) koje obuhvaća više povezanih
web stranica. To je zapravo mapa koja obuhvaća sve povezane
sadržaje.
Svako web mjesto ima početnu stranicu koja opisuje osnovnu namjenu
web mjesta te sadrži poveznice prema ostalim stranicama web mjesta.
Početna stranica najčešće ima naziv index.html.
WWW (World Wide Web) je multimedijskih informacijski servis
Interneta koji sadrži mnogo objavljenih sjedišta.

Tim čini mala skupina ljudi (najčešće stručnjaka u
svojim područjima) čije se vještine i znanja
nadopunjuju, a umjereni su na rješavanje određenog
zadatka ili postizanje zajedničkog cilja.

Prvi korak u timskom radu je formiranje timova odnosno
okupljanje učenika koji će zajedno raditi na izradi razrednih
web stranica. Kako okupiti učenike tima?
◦ Razgovarajte s kolegama u razredu i utvrdite njihove sklonosti
prema sadržajima potrebnim za izradu web stranica: pisanje, crtanje
ili prikupljanje slika, prikupljanje podataka i istraživanje, izrada
navigacije, odabir poslužitelja za objavu stranice i sl.
◦ Uz pomoć predmetnog nastavnika prikupljeni popis prikažite
pomoću projektora ili napiše na ploči.
◦ Formirajte timove 4 do 5 učenika tako da se u jednom timu nalaze
učenici različitih sklonosti.
◦ Odredite voditelja tima. Voditelj tima zadužen je za koordinaciju
svih članova tima, vođenje bilješki, provjeru uspješnosti i ispravaka.
◦ Svi članovi tima ravnopravno sudjeluju i odlučuju u rješavanju
postavljenog zadataka.

Bilješke ili evidenciju o timskom radu možete voditi u Wordovom
dokumentu ili u bilježnici. Bilješke trebaju biti jednostavne i
pregledne te omogućiti uvid u izvršavanje postavljenog zadatka.
Sve bilješke čuvajte do završetka zadatka. Naknadno analizirajte
pozitivna i negativna iskustva timskog rada kako bi ubuduće
postigli bolje rezultate. Bilješke bi trebale sadržavati:
◦ Temu ili područje koje ćete obraditi. To mogu biti web stranice razreda,
sportskog kluba, ekološke grupe itd.
◦ Što želite postići, koji je vaš cilj: informirati, potaknuti promjene,
zabaviti i sl.
◦ Kome je sjedište namijenjeno: roditeljima, učenicima, široj zajednici i
sl.
◦ Popis članova tima uz kratki opis zaduženja svakog člana (sklonosti).
◦ Datum prezentacije web sjedišta.
◦ Popis pojedinačnih zaduženja (zadataka) svakog člana tima. Vodite
evidenciju jesu li članovi tima dosljedni u izvršavanju preuzetih obaveza.
Ako primijetite da se zaduženja ne ostvaruju razmotrite moguće akcije s
nastavnikom.
◦ Plan izrade budućeg web mjesta.

Plan sadrži:
◦ Strukturu mjesta s naznačenim popisom stranica i poveznicama između
stranica. Prije nego započnemo s izradom web sjedišta u FrontPageu, web
mjesto ćemo skicirati na papiru ili rabeći organizacijski grafikon PowerPointa. Na
ovaj način možemo vrlo jednostavno izgraditi strukturu rješenja, uočiti i ispraviti
nedostatke te pratiti napredak u izradi rješenja u FrontPageu.
◦ Kratki opis sadržaja svake stranice.
◦ Na osnovnu sadržaja svaki član tima preuzima zaduženja. Popis pojedinačnih
zaduženja obavezno upišite u evidenciju kako bi mogli pratiti napredak izrade
web mjesta.
◦ Dogovorite osnovni izgled (raspored elemenata) web stranice i oblik navigacije.
Dizajn web sjedišta (fontove, boje, pozadine) odredite naknadno u FrontPageu.
Jedinstveni dizajn primijenite na sve stranice web mjesta.
◦ Izbjegavajte složene zamisli kako bi timski rad uspio te kako bi rješenje mogli
privesti kraju u predviđenom roku.
◦ Nakon izrade web mjesta, web mjesto testirajte, ispravite pogrješke, a zatim ga
objavite na dostupnom web poslužitelju.
◦ Nakon početne objave, web mjesto redovito osvježavajte novim sadržajima.
Odredite tko će i koliko dugo biti zadužen za osvježavanje web mjesta.




Struktura web mjesta prikazuje hijerarhijski odnos između
web stranica.
Stranica index.html nalazi se na prvoj razini strukture.
Za nju kažemo da je nadređena ili roditelj (Parent) stranicama
druge razine (oRazredu.html, ekskurzije.html, itd.).
Stranice druge razine podređene su ili potomci (Child)
stranice index.html.

Nakon što pokrenete FrontPage zatvorite početnu praznu
stranicu koja neće biti dio web mjesta koje izrađujemo.
◦ Kliknite na izbornik File (Datoteka) → New (Novo)
◦ Iz okna zadatka odaberite naredbu One Page Web site kojom
započinjete izradu web sjedišta s jednom praznom stranicom ili
naredbu More Web site Templates kojom započinjete izradu web
mjesta odabirom predloška. I jedna i druga naredba otvaraju
dijaloški okvir s popisom predložaka Web Site Templates.
◦ Odaberite predložak One Page Web site.
◦ Klikom na gumb Browse odredite postojeću ili stvorite novu mapu u
kojoj će biti pohranjeno vaše web mjesto.
◦ Odabir potvrdite klikom na gumb OK ili odustanite klikom na gumb
Cancel.



Nakon stvaranja novog web mjesta prozor FrontPagea
prikazuje dva okna.
U lijevom oknu prikazan je Folder List odnosno popis
mapa i datoteka vašeg web mjesta, a u desnom kartica
WebSite koja prikazuje web mjesto u nekom od
dostupnih pogleda (Folders, Remote Web site, Reports,
Navigation, Hyperlinks, Tasks).
Desni okvir prikazuje otvorene web stranice.





Mapa Images namijenjena je za pohranu ilustracija koje se
prikazuju na web stranicama. Naziv mape možete izmijeniti
u Slike ili Ilustracije.
Stranica index.htm početna je stranica web mjesta.
Izmijenite proširenje web stranice u .html.
To ćete najlakše učiniti na kartici Web Site iz skočnog
izbornika odabrane web stranice odabirom naredbe
Rename.
Na sličan način možete izmijeniti i naslov stranice Title u
Početna stranica.
Za izmjenu naslova stranice pritisnite tipku Tab nakon što
prikažete okvir izmjene naziva stranice.

Iz izbornika Tools (Alati) → Site Settings (Postavke web
mjesta) pokrećete istoimeni dijaloški okvir u kojem
možete izmijeniti postavke sjedišta.

Pogled na web mjesto možete izmijeniti iz izbornika
View ili rabeći istoimene gumbe dostupne na kartici
WebSite.
◦ Folders – prikazuje popis mapa i datoteka otvorenog sjedišta.
◦ Remote web site – je pogled koji rabimo prilikom objavljivanja
ili prijenosa web sjedišta na udaljeno računalo ili web
poslužitelj.
◦ Navigation – je slikovni prikaz hijerarhijskih odnosa web
stranica u web mjestu.

Postojeće web mjesto otvaramo iz izbornika File
odabirom naredbom Open Site, a zatvaramo
naredbom Close Site iz istog izbornika.

Izgled web stranice možete jednostavno odrediti uporabom
alata Layout Tables and Cells. Radi se o posebnoj vrsti tablice
namijenjenoj izradi strukture web stranice.
◦ Prikažite web stranicu index.html.
◦ U oknu zadataka (View → TaskPane) prikažite kategoriju Layout Tables
and Cells.
◦ Odaberite i oblikujte tablicu prema skici web stranice. Tablicu rasporeda
elemenata kao i ćelije tablice oblikujemo uobičajenim postupcima
oblikovanja tablice.
◦ Uredite zaglavlje web stranice: logotip i naslov web mjesta. Sve stranice
web mjesta imati će isto zaglavlje. Sadržaj ćemo dodati naknadno kako
ga ne bi kopirali na ostale stranice.
◦ Umetnite navigacijsku traku.
◦ Za dodatno oblikovanje web stranica kliknite na poveznicu Cell
Formating unutar kategorije Layout Tables and Cells. Objašnjenje
pogledajte na DVD-u.

Prošle godine upoznali ste navigaciju kao mogućnost
kretanja korisnika kroz sustav web stranica ili web
mjesto.

Za umetanje navigacijske trake:
◦ Kliknite redom na Insert → Web Component.
◦ U dijaloškom okviru Insert Web Component odaberite kategoriju
Link Bars ili umetanje navigacijske trake. Navigacijsku traku možete
stvoriti zasebno (Bar with custom links), kao traku s navigacijskim
gumbima naprijed nazad (Bar with back and next links) ili na temelju
navigacijske strukture (Bar based on navigation structure).
◦ Odaberite Bar based on navigation structure. Navigacijsku
strukturu postupno ćemo izraditi nakon što dodamo sve web
stranice. Kliknite na gumb Next (Dalje).
◦ Odaberite grafički stil ili temu navigacijskih gumba, kliknite na gumb
Next.
◦ Odaberite Vertical ili okomito usmjerenje navigacijske trake.
Usmjerenje navigacijske trake prilagodite prostoru u kojem se traka
prikazuje.

U idućem koraku otvara se dijaloški okvir Link Bar
Properties u kojem moramo odrediti popis gumba
navigacijske trake.
◦ Child level - dodaje navigacijske gumbe samo prema potomcima.
◦ Same level – dodaje navigacijske gumbe prema web stranicama
istog hijerarhijskog nivoa.
◦ Dodatno možete postaviti gumbe prema početnoj web stranici
(Home page) te prema roditeljskoj stranici (Parent page).


Odaberite Child level.
Odabir potvrdite klikom na OK, ili odustanite klikom na
Cancel.


Preostale web stranice predviđene strukturom web mjesta
stvorit ćemo na temelju prethodno stvorenih stranica. Na
taj način zadržat ćemo jedinstveni izgled i oblikovanje u
cijelom web mjestu. Web stranicu možemo dodati (i
kopirati na različite načine).
Kako su strukturom web mjesta predviđeni hijerarhijski
odnosi u dodavanju stranica poslužit ćemo se pogledom
Navigation.
◦ Na kartici WebSite prikažite pogled Navigation.
◦ Desnom tipkom miša prikažite skočni izbornika na stranici
index.html.
◦ Iz skočnog izbornika odaberite naredbu New From Existing Page.
Dodana stranica prikazat će se u desnom okviru prozora FrontPagea.
U sadržaj stranice upišite naslov stranice npr. u stranicu
oRazredu.html upišite O razredu.




Kako se web stranica oRazredu.html nalazi na nižoj
hijerarhijskoj razini nego stranica index.html moramo
izmijeniti prikaz njezine navigacijske trake.
Dvokliknite na poruku [Edit the properties for this link bar
to display hyperlinks here].
U dijaloškom okviru Link Bar Properties odaberite prikaz
navigacijskih gumba prema stranicama iste razine Same
level i mogućnost povratka na roditeljsku razinu Parent
page.
Spremite promjene i izmijenite naslov stranice Page Title
koji se pojavljuje u naslovnoj traci web preglednika.



Sve preostale stranice stvorite na temelju stranice
oRazredu.html.
Sve stranice osim prve dijele isti izgled navigacijske
trake. Ovisno o hijerarhijskoj razini na kojoj se web
stranica nalaz navigacijska traka prikazat će različiti
popis navigacijskih gumba.
Naredbom File → Save All spremite sve promjene i
izmijenite naslov stranice Page Title.

U pogledu Navigation izgradite navigacijsku strukturu
koja će biti odraz prethodno izrađene strukture web
mjesta.
◦ Na kartici WebSite prikažite pogled Navigation.
◦ Iz okvira Folder List odvucite novo stvorene web stranice u
područje navigacije ispod web stranice kojoj su podređene.
◦ Pogledajte promjene u pojedinačnim web stranicama.

Iz pogleda Navigation web stranicu možete obrisati:
trajno ili samo iz navigacijske strukture.
◦ Desnom tipkom miša prikažite skočni izbornik web stranice
koju želite obrisati, a zatim odaberite naredbu Delete.
◦ Odaberite mogućnost Remove page from the navigation
structure ako želite web stranicu ukloniti samo iz navigacijske
strukture, a posljedično i iz navigacijske trake. Ako web
stranicu želite obrisati iz web mjesta odaberite mogućnost
Delete this page from web site.

Teme u FrontPageu slično kao u PoewrPointu sadrže
oblikovanje fonta, pozadine, navigacijske trake, popisa
itd. Za odabir teme:
◦ Iz izbornika Format odaberite naredbu Theme.
◦ U oknu zadataka prikazat će se popis dostupnih tema.
◦ Temu odabirete klikom miša na temu.

Zajednički rub poseban je dio web stranice u koji umećemo
sadržaj koji želimo prikazati na svim stranicama (navigacijske
trake, logotipa, naslova koji se pojavljuje na svim stranicama
web mjesta i sl.). Jedna web stranica može imati više zajedničkih
rubova.
◦ Prije prvog korištenja zajednički rub morate omogućiti. Kliknite redom
na Tools → Page Options. U istoimenom dijaloškom okviru prikažite
karticu Authoring i uključite potvrdni okvir Shared Borders.
◦ Prikažite web stranicu, a zatim postavite točku unosa na mjesto gdje
želite umetnuti zajednički rub.
◦ Kliknite redom na Format → Shared Borders.
◦ U istoimenom dijaloškom okviru odaberite sve stranice All Pages, a
zatim jedan ili više rubova web stranice uz koje želite postaviti
zajednički rub.
◦ Nakon umetanja, u zajedničkom rubu se nalazi komentar kojeg možete
zamijeniti vlastitim sadržajem.



Dogovor i podjela uloga u timu – prije početka izrade
web mjesta potrebno je formirati timove i planirati
izradu web mjesta.
Obrada sadržaja – Tim je sastavljen od 4 do 5 članova
različitih sklonosti. Obrada sadržaja (tekst, slike itd)
podijeljena je prema sklonostima članova tima.
Kontrola uspješnosti i korekcija – tijekom izrade web
mjesta potrebno je redovito voditi bilješke o
uspješnosti, ispravljati nedostatke te usmjeravati
prema cilju.