Izrada Web Stranica OVO

8/19/2019 Izrada Web Stranica OVO

1/16

Zadaci za vežbanje:

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

1. Pokreni progra !rontPage "##$. %ko&iko se pri pokretanj' prograa otvori&o

web sjedište koje je zadnje korišteno( zatvoriti web sjedište )!i&e*+&ose ,ite.

". Za kreiranje novog web sjedišta odaberi !i&e*ew/ % okn' zadatka odaberi0ne Page eb site )web sjedište koje ia sao jedn' stranic'. % s&jede2edija&oško okvir' odaberi &okacij' )jesto i naziv web sjedišta )na s&ici je websjedište nazvano razred.

$. Kreirano web sjedište ia sao jedn' stranic' )inde3.4t. Kreiraj neko&ikoweb stranica kao na s&ici.

Za kreiranje pojedini4 stranica koristi desni k&ik na iš' )brzi izbornik i naredb'ew*Page.

5. ,vak' stranic' nakon kreiranja preien'j kako stranice ne bi ia&e naziveewPage1( ewPage" itd. ,tranice preien'j ' odgovaraj'2e nazive )vijesti(o6naa( p'tovanja( dr'zenja( kontakt. eoj koristiti s&ova 7(2(ž(š(8. Zapreienovanje koristi naredb' 9enae.


2/16

. Kreirani stranicaa dodije&i nas&ove kao ' tab&ici:

;nde3.4t& ,tranice og razreda

vijesti.4t& 9azredne novosti

o6naa.4t& Tko so i<

p'tovanja.4t& =dje so bi&i<

dr'zenja.4t& Kako provodio vrijee<kontakt.4t& Pišite na/

as&ov stranice koji se pojav&j'je ' traci nas&ova preg&ednika )npr. ;nternet >3p&oreradodije&iti pri&iko prvog spreanja stranica i&i korištenje izbornika !i&e*Properties/kartica =enera&. % po&j' Tit&e 'pišeo nas&ov stranice.

%ko&iko pokreneo naredb' Properties iz prikaza avigation dija&oški okvir izg&edanešto dr'ga7ije

?. ,vi stranicaa podesi da ispravno prikaz'j' naša s&ova. % dija&oško okvir'Page Properties odabereo kartic' @ang'age te postavio paraetre kao nas&ici );,0 B-" sadrži sve potrebne znakove za 4rvatski jezik( 'z još desetak jezika.


3/16

C. ,prei projene i zatvori progra !ront Page.

,vak' stranic' na koj' so 'nosi&i sadržaj i&i projene potrebno je spreiti. ,tranic'ožeo spreiti naredbo !i&e*,ave As/.

Pored naziva stranice koja je ijenjana na&azi se . ,tranic' ožeo spreiti i 'brzo izbornik' )desni k&ik iše odabiro naredbe ,ave.

ZADA+; ZA ,AE0,TA@A 9AD

1. Pokreni progra !rontPage "##$.

". Kreiraj novo web sjedište i neko&iko web stranica kao na s&ici.

$. ,vak' stranic' nakon kreiranja preien'j.

5. Kreirani stranicaa dodije&i nas&ove kao ' tab&ici:


4/16

;nde3.4t& ,tranice oje tvrtke

novosti.4t& ovosti

o6naa.4t& 0 naa

's&'ge.4t& Pon'da i 's&'ge

cjenik.4t& +jenik proizvoda i 's&'ga

kontakt.4t& Pišite na/

. ,prei projene i zatvori progra !ront Page.

ZADATAK " - 'nos i ob&ikovanje teksta i 4orizonta&ne &inije

1. Pokreni progra !rontPage i otvori web sjedište iz pret4odnog zadataka )websjedište razred.

". a po7etn' stranic' )inde3.4t 'nesi tekst dobrodoš&ice.

Dobrodoš&i na oj' prv'( jedin' i najdraž' stranic'.

$. Tekst dobrodoš&ice ob&ik'j poo2' a&atne trake i postavi vrijednosti kao nas&ici.

akon priijenjenog ob&ikovanja tekst izg&eda ovako :

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

5. Dopiši neko&iko re7enica i 'redi i4 po že&ji koriste2i og'2nosti dija&oškogokvira !ont.

. Forizonta&n' &inij' 'etni ispod teksta dobrodoš&ice na po7etnoj stranicikoriste2i naredb' ;nsert*Forizonta& @ine.

?. Desni k&iko na &inij' i odabiro Forizonta& @ine Properties… ožeoijenjati izg&ed &inije )deb&jin'( boj'( širin' ' G prozora i&i ' pikse&ia(poravnanje &inije.

C. Postavite vrijednosti za 4orizonta&n' &inij' kao što prikaz'je s&jede2a s&ikaH

. ;sprobaj raz&i7ite prikaze i pog&ede web sjedištaH Za ijenjanje prikaza webstranice koristi trak' prikaza koja se na&azi se na dn' prozora i nije vid&jiva

jedino ako so ' prikaz' Page.


5/16

Za ijenjanje pog&eda koristi trak' pog&eda.

B. ;spod 'etn'te 4orizonta&ne &inije na7ini s&jede2i popis:

vijesti

o naa

p'tovanja

dr'ženja

kontakt

1#.Za pre&azak ' novi red koristi tipk' >nter )novi od&oak

11. 0zna7i popis i aktiviraj a&at I'&&ets

=raJi7ke oznake ožeo ob&ikovati )proijeniti poo2' izbornika!orat*I'&&ets and 'bering/kartica P&ain I'&&ets

a s&ici vidio raz&ik' nakon prijene a&ata I'&&ets.

1".,prei projene i zatvori progra !rontPage.

ZADAT+; ZA ,AE0,TA@A 9AD

1. a po7etn' stranic' 'nesi tekst dobrodoš&ice.

". Tekst dobrodoš&ice ob&ik'j poo2' a&atne trake.

$. Dopiši tekst i 'redi po že&ji koriste2i dija&oški okvir Font .

5. Forizonta&n' &inij' 'etni ispod teksta dobrodoš&ice na po7etnoj stranici.Proijeni vrijednosti za 4orizonta&n' &inij' po že&ji.

. ;sprobaj raz&i7ite prikaze i pog&ede web sjedištaH

?. ;spod &inije na7ini s&jede2i popis:

• novosti

• o naa

• 's&'ge

• cjenik

• kontakt


6/16

ZADATAK $-ob&ikovanje od&oka i stranice( preg&edavanje stranice

1. Pokreni progra !rontPage i otvori web sjedište o razred'.

". apiši neko&iko od&oaka o svo razred'. ;sprobaj raz&i7ita poravnanja 'pojedini od&ocia koriste2i a&ate .

$. Po7etnoj web stranici postavi nek' boj' pod&oge. Ioj' pod&oge odre8'jeopoo2' izbornika !orat*Iackgro'nd/


7/16

;z pa&ete boja odabereo boj'. %ko&iko na ne odgovaraj' pon'8ene bojeodabereo g'b Eore +o&ors/

5. Preg&edaj svoj web site poo2' preg&ednika koji je insta&iran na ra7'na&')!i&e*Preview in Irowse/

. Postavi s&ik' podloga1.jpg ' pozadin'. Za postav&janje s&ike ' pozadin'

stranice ' dija&oško okvir' Page Properties na kartici !oratting 'k&j'7ioopcij' Iackgro'nd pict're( a zati odabereo g'b Irowse/ Prona8eos&ik' koj' že&io postaviti ' pozadin'.

?. ,prei projene i pog&edaj kako izg&eda web stranica ' preg&ednik'.

C. ,&ik' podloga1.jpg sprei ' ap' iages


8/16

. Postavi ' pozadin' web stranice s&ik' koja se na&azi na tvo ra7'na&'.

B. akon preg&edavanja stranice izbriši s&ike iz pozadine.

1#.,prei projene i zatvori web sjedište.


1. apiši jedan od&oak o svojoj tvrtci. ;sprobaj raz&i7ita poravnanja.

". Po7etnoj web stranici postavi p&av' boj' pod&oge

$. Preg&edaj svoj web site poo2' preg&ednika koji je insta&iran na ra7'na&'.

5. Postavi s&ik' podloga1.jpg ' pozadin'. Pog&edaj kako izg&eda web stranica.

. Postavi s&ik' koja se na&azi na tvo ra7'na&'. ;zbriši pozadinske s&ike.

ZADATAK 5-&inkovi1. 0tvori web sjedište o razred'.

2. 0d e&eenata popisa na7ini &inkove na pojedine stranice web sjedišta )rije7vijesti neka b'de &ink na stranic' vijesti.4t&. 0daberi tekst )npr. rije7 vijestikoji 2e biti &ink i pokreni naredb' ;nsert*Fper&ink...

3. akon što s' sve rije7i ' popis' posta&e &inkovi na odgovaraj'2e stranicedopiši re7enic' Pošalji mi pismo i na7ini od nje &ink za s&anje e-ai&a.


9/16

4. % po&je Address: 'piši svoj' e-ai& adres'

5. a7ini neko&iko &inkova na web stranice koje nis' dio web sjedišta koje're8'ješ. %piši tekst: Zani&jive stranice o: sport'( prirodi( g&azbi( ... 9ije7 prirodi neka b'de &ink na web stranic' P P&itvi7ka jezera. % po&je Address:'piši odgovaraj'2i %9@ )4ttp:LLwww.np-p&itvicka-jezera.4r

6.

7. %etni s&ik' i od nje na7ini &ink na nek' web stranic'. Post'pak je isti kao zatekst.

8. %k&j'7i prikaz Fper&ink.

http://www.np-plitvicka-jezera.hr/hrv/http://www.np-plitvicka-jezera.hr/http://www.np-plitvicka-jezera.hr/hrv/http://www.np-plitvicka-jezera.hr/


10/16

9. Postavi pokaziva7 iša na po7etak web stranice te 'etni oznak');nsert*Iookark/. 0znak' nazovi pocetak.

a jest' gdje je postav&jen Iookark pojavi&a se zastavica koja ne2e biti vid&jiva 'preg&ednik'.

10.a dn' web stranice 'piši rije7 Vrh te od nje na7ini &ink prea oznacipocetak. % dija&oško okvir' ;nsert Fper&ink odaberi g'b Iookark/

11.,prei projene i preg&edaj web stranic' ' preg&ednik'. Provjeri kako rade

&inkovi.

12.Zatvori web sjedište.


11/16


1. 0d e&eenata popisa na7ini &inkove na pojedine stranice web sjedišta.

". Dopiši re7enic' Pišite nam na stranic' kontakt.4t& i na7ini od nje &ink za

s&anje e-ai&a.

$. %etni s&ik' i od nje na7ini &ink.

5. %piši %9@ neke web stranice.

. %k&j'7i prikaz Fper&ink. Preg&edaj stranice.

ZADATAK - tab&ice

1. 0tvori web sjedište o razred'.

". ;znad teksta 'etni dva prazna retka. %etni tab&ic' širine ## pikse&a( kojaia " retka i ? st'paca( centra&no poravnanje( vrijednost ce&& spacing postavina #. Pokreni naredb' Tab&e*;nsert*Tab&e.. % dija&oško okvir' Tab&eProperties odaberi opcije za kreiran' tab&ic'.

$. ,poji pojedine 2e&ije. 0zna7i 2e&ije prvog retka i ' brzo izbornik' odaberinaredb' Eerge +e&&s. a isti na7in 'redi ostatak tab&ice. Proijeni visin'redcia kao na s&ici


12/16

5. Postavi siv' boj' pod&oge ' odgovaraj'2' 2e&ij' )kao na s&ici.

. % prv' 2e&ij' dr'gog retka 'etnite nov' tab&ic' koja ia redaka i jedanst'pac )širina tab&ice 1## G( bez obr'ba.

?. % pojedine 2e&ije nove tab&ice sjestite tekst iz popisa.

C. % 2e&ij' sa sivo pozadino prejestite tekst i 4orizonta&n' &inij'.

. %ko&iko se tekst pojav&j'je na sredini 2e&ije podesite okoito poravnanje ' 2e&iji

na vr4 )Top

B. ;sprobajte raz&i7ite vrijednosti paraetara +e&& spacing i +e&& padding.

1#. Eijenjajte paraetre ' dija&oški okviria +e&& Properties i Tab&e Properties.

11. Preg&edajte web stranic' ' neko preg&ednik'.


13/16

1". Zatvori web sjedište.


1. %etni tab&ic' širine ## pikse&a( koja ia $ retka i st'paca( centra&noporavnanje( vrijednost ce&& spacing postavi na #.

". ,poji pojedine 2e&ije i proijeni visin' redcia kao na s&ici.

$. % 2e&ije dr'gog retka 'etni tekst iz popisa

ZADATAK ?- s&ike

1. 0tvori web sjedište o razred'.

". % prv' 2e&ij' 'etni s&ik' &ogo-razred.jpg

$. %jesto &inkova na &ijevoj strani 'etni odgovaraj'2e s&ike )s&ika1.jpg(s&ika".jpg/


14/16

5. ,vaka s&i7ica neka b'de &ink na odgovaraj'2' stranic'.

. ;z 2e&ije ' kojoj 2e se prikazivati sadržaj izbriši 4orizonta&n' &inij'.

?. ;spod teksta dobrodoš&ice 'etni s&ik' svog razreda.

C. %ko&iko je s&ika preve&ika sanji joj dienzije. Dvok&iko na s&ici pojav&j'je sedija&oški okvir za ob&ikovanje s&ike Pict're Properties.


15/16

. ,&ici razreda dodje&i a&ternativni tekst. % dija&oško okvir' Pict're Propertiesna kartici =enera& 'k&j'7i opcij' Te3t i 'piši tekst koji 2e se prikazivati kad sepokaziva7 iša na8e iznad s&ike.

B. Preg&edaj stranic'.

1#.Pop'ni osta&e stranice sa sadržaje. eka sve stranice iaj' isti dizajn kaopo7etna stranica.


16/16

11. Prijeni raz&i7ite po&ožaje s&ike ' odnos' na tekst.


1. % prv' 2e&ij' 'etni s&ik' &ogo-tvrtka.jpg

". %jesto &inkova na &ijevoj strani 'etni odgovaraj'2e s&ike )s&ika1a.jpg(s&ika"a.jpg/. ,vaka s&i7ica neka b'de &ink na odgovaraj'2' stranic'.

$. % 2e&ij' ' kojoj 2e se prikazivati sadržaj 'etni s&ik' po že&ji.

5. astavi s 're8ivanje stranice i 'etanje sadržaja

Documents

Izrada Web Stranica OVO