Transcript Nastavna cjelina: 1. Jezik računala Kataloška tema: 1.1

Timska izrada Web stranica
Nastavna cjelina:
Web
Osnovni pojmovi
 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.
Što je timski rad i zašto ga
primjenjujemo?
 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.
Formiranje timova
 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
 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.
Primjer bilješki
Planiranje 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
 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.
Izrada sjedišta u FrontPageu
 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.
Prozor FrontPagea
 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,
RemoteWeb site, Reports, Navigation, Hyperlinks,Tasks).
 Desni okvir prikazuje otvorene web stranice.
Izmjena stranica
 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.
Postavke web mjesta
 Iz izbornika Tools (Alati) → Site Settings (Postavke web
mjesta) pokrećete istoimeni dijaloški okvir u kojem možete
izmijeniti postavke sjedišta.
Pogledi na web mjesto
 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.
Kako otvaramo i zatvaramo web
mjesto?
 Postojeće web mjesto otvaramo iz izbornika File odabirom
naredbom Open Site, a zatvaramo naredbom Close Site iz
istog izbornika.
Izgled web stranice
 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 LayoutTables




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 LayoutTables and Cells. Objašnjenje pogledajte na DVDu.
Navigacija
 Prošle godine upoznali ste navigaciju kao mogućnost kretanja
korisnika kroz sustav web stranica ili web mjesto.
Navigacijska traka
 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.
Navigacijska traka
 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.
Dodavanje web stranica
 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.
Izmjena prikaza navigacijske trake
 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.
Preostale stranice
 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.
Navigacijska struktura
 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.
Brisanje web stranica
 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
 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
 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.