Nastavna jedinica: 5.1. Timska izrada Web stranica

1. Nastavna jedinica: 5.1. Timska izrada Web stranica Nastavna cjelina: 5. Web

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

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

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

5. 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. • Planizrade budućeg web mjesta.

6. Primjer bilješki

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

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

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

10. Prozor FrontPagea • Nakon stvaranja novog web mjesta prozor FrontPagea prikazuje dva okna. • U lijevom oknu prikazan je Folder Listodnosno 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.

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

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

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

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

15. Izgled web stranice • Izgled web stranice možete jednostavno odrediti uporabom alataLayoutTablesandCells. 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 LayoutTablesandCells. • 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 CellFormating unutar kategorije LayoutTablesandCells. Objašnjenje pogledajte na DVD-u.

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

17. Navigacijska traka • Za umetanje navigacijske trake: • Kliknite redom na Insert → Web Component. • U dijaloškom okviru Insert Web Componentodaberite kategoriju Link Bars ili umetanje navigacijske trake. Navigacijsku traku možete stvoriti zasebno (Bar withcustomlinks), kao traku s navigacijskim gumbima naprijed nazad (Bar withbackandnextlinks) ili na temelju navigacijske strukture (Bar based on navigationstructure). • Odaberite Bar based on navigationstructure. 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 Verticalili okomito usmjerenje navigacijske trake. Usmjerenje navigacijske trake prilagodite prostoru u kojem se traka prikazuje.

18. Navigacijska traka • U idućem koraku otvara se dijaloški okvir Link Bar Properties u kojem moramo odrediti popis gumba navigacijske trake. • Childlevel - 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 (Parentpage). • Odaberite Childlevel. • Odabir potvrdite klikom na OK, ili odustanite klikom na Cancel.

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

20. 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 [Edittheproperties for this link bar to displayhyperlinkshere]. • U dijaloškom okviru Link Bar Properties odaberite prikaz navigacijskih gumba prema stranicama iste razine Same level i mogućnost povratka na roditeljsku razinu Parentpage. • Spremite promjene i izmijenite naslov stranice Page Title koji se pojavljuje u naslovnoj traci web preglednika.

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

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

23. 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 pagefromthenavigationstructure 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 Deletethispagefrom web site.

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

25. 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 → PageOptions. U istoimenom dijaloškom okviru prikažite karticu Authoring i uključite potvrdni okvir SharedBorders. • Prikažite web stranicu, a zatim postavite točku unosa na mjesto gdje želite umetnuti zajednički rub. • Kliknite redom na Format → SharedBorders. • U istoimenom dijaloškom okviru odaberite sve stranice AllPages, 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.

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