Nastavna jedinica:

5.1. Timska izrada Web stranicaNastavna 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.

Osnovni pojmovi

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.

Što je timski rad i zašto ga primjenjujemo?

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.

Formiranje timova

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.

Bilješke

Primjer bilješki

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.

Planiranje izrade budućeg 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.

Struktura web mjesta

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.

Izrada sjedišta u FrontPageu

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.

Prozor FrontPagea

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.

Izmjena stranica

Iz izbornika Tools (Alati) → Site Settings (Postavke web mjesta) pokrećete istoimeni dijaloški okvir u kojem možete izmijeniti postavke sjedišta.

Postavke web mjesta

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.

Pogledi na web mjesto

Postojeće web mjesto otvaramo iz izbornika File odabirom naredbom Open Site, a zatvaramo naredbom Close Site iz istog izbornika.

Kako otvaramo i zatvaramo web mjesto?

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.

Izgled web stranice

Prošle godine upoznali ste navigaciju kao mogućnost kretanja korisnika kroz sustav web stranica ili web mjesto.

Navigacija

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.

Navigacijska traka

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.

Dodavanje web stranica

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.

Izmjena prikaza navigacijske trake

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.

Preostale stranice

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.

Navigacijska struktura

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.

Brisanje web stranica

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.

Teme

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.

Zajednički rub

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.

Pojmovi