Zadatci za vježbanje:

ZADATAK 1 - kreiranje web sjedišta i dodavanje web stranica

1. Pokreni program FrontPage 2003. Ukoliko se pri pokretanju programa otvorilo web sjedište koje je zadnje korišteno, zatvoriti web sjedište (File>Close Site).

2. Za kreiranje novog web sjedišta odaberi File>New… U oknu zadatka odaberi One Page Web site (web sjedište koje ima samo jednu stranicu). U sljedećem dijaloškom okviru odaberi lokaciju (mjesto) i naziv web sjedišta (na slici je web sjedište nazvano razred).

3. Kreirano web sjedište ima samo jednu stranicu (index.htm). Kreiraj nekoliko web stranica kao na slici.

Za kreiranje pojedinih stranica koristi desni klik na mišu (brzi izbornik) i naredbu New>Page.

4. Svaku stranicu nakon kreiranja preimenuj kako stranice ne bi imale nazive NewPage1, NewPage2 itd. Stranice preimenuj u odgovarajuće nazive (vijesti, o_nama, putovanja, druzenja, kontakt). Nemoj koristiti slova č,ć,ž,š,đ. Za preimenovanje koristi naredbu Rename.

5. Kreiranim stranicama dodijeli naslove kao u tablici:

Index.html Stranice mog razreda

vijesti.html Razredne novosti

o_nama.html Tko smo mi?

putovanja.html Gdje smo bili?

druzenja.html Kako provodimo vrijeme?

kontakt.html Pišite nam…

Naslov stranice koji se pojavljuje u traci naslova preglednika (npr. Internet Explorera) dodijeliti prilikom prvog spremanja stranica ili korištenjem izbornika File>Properties…kartica General. U polju Title upišemo naslov stranice.

Ukoliko pokrenemo naredbu Properties iz prikaza Navigation dijaloški okvir izgleda nešto drugačije

6. Svim stranicama podesi da ispravno prikazuju naša slova. U dijaloškom okviru Page Properties odaberemo karticu Language te postavimo parametre kao na slici (ISO 8859-2 sadrži sve potrebne znakove za hrvatski jezik, uz još desetak jezika).

7. Spremi promjene i zatvori program Front Page.

Svaku stranicu na koju smo unosili sadržaj ili promjene potrebno je spremiti. Stranicu možemo spremiti naredbom File>Save As….

Pored naziva stranice koja je mijenjana nalazi se *. Stranicu možemo spremiti i u brzom izborniku (desni klik mišem) odabirom naredbe Save.

ZADATCI ZA SAMOSTALAN RAD

1. Pokreni program FrontPage 2003.

2. Kreiraj novo web sjedište i nekoliko web stranica kao na slici.

3. Svaku stranicu nakon kreiranja preimenuj.

4. Kreiranim stranicama dodijeli naslove kao u tablici:

Index.html Stranice moje tvrtke

novosti.html Novosti

o_nama.html O nama

usluge.html Ponuda i usluge

cjenik.html Cjenik proizvoda i usluga

kontakt.html Pišite nam…

5. Spremi promjene i zatvori program Front Page.

ZADATAK 2 - unos i oblikovanje teksta i horizontalne linije

1. Pokreni program FrontPage i otvori web sjedište iz prethodnog zadataka (web sjedište razred).

2. Na početnu stranicu (index.htm) unesi tekst dobrodošlice.

Dobrodošli na moju prvu, jedinu i najdražu stranicu.

3. Tekst dobrodošlice oblikuj pomoću alatne trake i postavi vrijednosti kao na slici.

Nakon primijenjenog oblikovanja tekst izgleda ovako :

Dobrodošli na moju prvu, jedinu i najdražu stranicu.

4. Dopiši nekoliko rečenica i uredi ih po želji koristeći mogućnosti dijaloškog okvira Font.

5. Horizontalnu liniju umetni ispod teksta dobrodošlice na početnoj stranici koristeći naredbu Insert>Horizontal Line.

6. Desnim klikom na liniju i odabirom Horizontal Line Properties… možemo mijenjati izgled linije (debljinu, boju, širinu u % prozora ili u pikselima, poravnanje linije).

7. Postavite vrijednosti za horizontalnu liniju kao što prikazuje sljedeća slika!

8. Isprobaj različite prikaze i poglede web sjedišta! Za mijenjanje prikaza web stranice koristi traku prikaza koja se nalazi se na dnu prozora i nije vidljiva jedino ako smo u prikazu Page.

Za mijenjanje pogleda koristi traku pogleda.

9. Ispod umetnute horizontalne linije načini sljedeći popis:

vijesti

o nama

putovanja

druženja

kontakt

10.Za prelazak u novi red koristi tipku Enter (novi odlomak)

11.Označi popis i aktiviraj alat Bullets

Grafičke oznake možemo oblikovati (promijeniti) pomoću izbornika Format>Bullets and Numbering…kartica Plain Bullets

Na slici vidimo razliku nakon primjene alata Bullets.

12.Spremi promjene i zatvori program FrontPage.

ZADATCI ZA SAMOSTALAN RAD

1. Na početnu stranicu unesi tekst dobrodošlice.

2. Tekst dobrodošlice oblikuj pomoću alatne trake.

3. Dopiši tekst i uredi po želji koristeći dijaloški okvir Font.

4. Horizontalnu liniju umetni ispod teksta dobrodošlice na početnoj stranici. Promijeni vrijednosti za horizontalnu liniju po želji.

5. Isprobaj različite prikaze i poglede web sjedišta!

6. Ispod linije načini sljedeći popis:

novosti

o nama

usluge

cjenik

kontakt

ZADATAK 3-oblikovanje odlomka i stranice, pregledavanje stranice

1. Pokreni program FrontPage i otvori web sjedište o razredu.

2. Napiši nekoliko odlomaka o svom razredu. Isprobaj različita poravnanja u pojedinim odlomcima koristeći alate .

3. Početnoj web stranici postavi neku boju podloge. Boju podloge određujemo pomoću izbornika Format>Background…

Iz palete boja odaberemo boju. Ukoliko nam ne odgovaraju ponuđene boje odaberemo gumb More Colors…

4. Pregledaj svoj web site pomoću preglednika koji je instaliran na računalu (File>Preview in Browse…)

5. Postavi sliku podloga1.jpg u pozadinu. Za postavljanje slike u pozadinu stranice u dijaloškom okviru Page Properties na kartici Formatting uključimo opciju Background picture, a zatim odaberemo gumb Browse… Pronađemo sliku koju želimo postaviti u pozadinu.

6. Spremi promjene i pogledaj kako izgleda web stranica u pregledniku.

7. Sliku podloga1.jpg spremi u mapu images

8. Postavi u pozadinu web stranice sliku koja se nalazi na tvom računalu.

9. Nakon pregledavanja stranice izbriši slike iz pozadine.

10.Spremi promjene i zatvori web sjedište.

ZADATCI ZA SAMOSTALAN RAD

1. Napiši jedan odlomak o svojoj tvrtci. Isprobaj različita poravnanja.

2. Početnoj web stranici postavi plavu boju podloge

3. Pregledaj svoj web site pomoću preglednika koji je instaliran na računalu.

4. Postavi sliku podloga1.jpg u pozadinu. Pogledaj kako izgleda web stranica.

5. Postavi sliku koja se nalazi na tvom računalu. Izbriši pozadinske slike.

ZADATAK 4-linkovi

1. Otvori web sjedište o razredu.

2. Od elemenata popisa načini linkove na pojedine stranice web sjedišta (riječ vijesti neka bude link na stranicu vijesti.html). Odaberi tekst (npr. riječ vijesti) koji će biti link i pokreni naredbu Insert>Hyperlink...

3. Nakon što su sve riječi u popisu postale linkovi na odgovarajuće stranice dopiši rečenicu Pošalji mi pismo i načini od nje link za slanje e-maila.

4. U polje Address: upiši svoju e-mail adresu

5. Načini nekoliko linkova na web stranice koje nisu dio web sjedišta koje uređuješ. Upiši tekst: Zanimljive stranice o: sportu, prirodi, glazbi, ... Riječ prirodi neka bude link na web stranicu NP Plitvička jezera. U polje Address: upiši odgovarajući URL (http://www.np-plitvicka-jezera.hr )

6.

7. Umetni sliku i od nje načini link na neku web stranicu. Postupak je isti kao za tekst.

8. Uključi prikaz Hyperlink.

9. Postavi pokazivač miša na početak web stranice te umetni oznaku (Insert>Bookmark…). Oznaku nazovi pocetak.

Na mjestu gdje je postavljen Bookmark pojavila se zastavica koja neće biti vidljiva u pregledniku.

10.Na dnu web stranice upiši riječ Vrh te od nje načini link prema oznaci pocetak. U dijaloškom okviru Insert Hyperlink odaberi gumb Bookmark…

11.Spremi promjene i pregledaj web stranicu u pregledniku. Provjeri kako rade linkovi.

12.Zatvori web sjedište.

ZADATCI ZA SAMOSTALAN RAD

1. Od elemenata popisa načini linkove na pojedine stranice web sjedišta.

2. Dopiši rečenicu Pišite nam na stranicu kontakt.html i načini od nje link za slanje e-maila.

3. Umetni sliku i od nje načini link.

4. Upiši URL neke web stranice.

5. Uključi prikaz Hyperlink. Pregledaj stranice.

ZADATAK 5- tablice

1. Otvori web sjedište o razredu.

2. Iznad teksta umetni dva prazna retka. Umetni tablicu širine 800 piksela, koja ima 2 retka i 6 stupaca, centralno poravnanje, vrijednost cell spacing postavi na 0. Pokreni naredbu Table>Insert>Table.. U dijaloškom okviru Table Properties odaberi opcije za kreiranu tablicu.

3. Spoji pojedine ćelije. Označi ćelije prvog retka i u brzom izborniku odaberi naredbu Merge Cells. Na isti način uredi ostatak tablice. Promijeni visinu redcima kao na slici

4. Postavi sivu boju podloge u odgovarajuću ćeliju (kao na slici).

5. U prvu ćeliju drugog retka umetnite novu tablicu koja ima 5 redaka i jedan stupac (širina tablice 100 %, bez obruba).

6. U pojedine ćelije nove tablice smjestite tekst iz popisa.

7. U ćeliju sa sivom pozadinom premjestite tekst i horizontalnu liniju.

8. Ukoliko se tekst pojavljuje na sredini ćelije podesite okomito poravnanje u ćeliji na vrh (Top)

9. Isprobajte različite vrijednosti parametara Cell spacing i Cell padding.

10.Mijenjajte parametre u dijaloškim okvirima Cell Properties i Table Properties.

11.Pregledajte web stranicu u nekom pregledniku.

12.Zatvori web sjedište.

ZADATCI ZA SAMOSTALAN RAD

1. Umetni tablicu širine 800 piksela, koja ima 3 retka i 5 stupaca, centralno poravnanje, vrijednost cell spacing postavi na 0.

2. Spoji pojedine ćelije i promijeni visinu redcima kao na slici.

3. U ćelije drugog retka umetni tekst iz popisa

ZADATAK 6- slike

1. Otvori web sjedište o razredu.

2. U prvu ćeliju umetni sliku logo-razred.jpg

3. Umjesto linkova na lijevoj strani umetni odgovarajuće slike (slika1.jpg, slika2.jpg…)

4. Svaka sličica neka bude link na odgovarajuću stranicu.

5. Iz ćelije u kojoj će se prikazivati sadržaj izbriši horizontalnu liniju.

6. Ispod teksta dobrodošlice umetni sliku svog razreda.

7. Ukoliko je slika prevelika smanji joj dimenzije. Dvoklikom na slici pojavljuje se dijaloški okvir za oblikovanje slike Picture Properties.

8. Slici razreda dodjeli alternativni tekst. U dijaloškom okviru Picture Properties na kartici General uključi opciju Text i upiši tekst koji će se prikazivati kad se pokazivač miša nađe iznad slike.

9. Pregledaj stranicu.

10.Popuni ostale stranice sa sadržajem. Neka sve stranice imaju isti dizajn kao početna stranica.

11.Primjeni različite položaje slike u odnosu na tekst.

ZADATCI ZA SAMOSTALAN RAD

1. U prvu ćeliju umetni sliku logo-tvrtka.jpg

2. Umjesto linkova na lijevoj strani umetni odgovarajuće slike (slika1a.jpg, slika2a.jpg…). Svaka sličica neka bude link na odgovarajuću stranicu.

3. U ćeliju u kojoj će se prikazivati sadržaj umetni sliku po želji.

4. Nastavi s uređivanjem stranice i umetanjem sadržaja