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.
8/19/2019 Izrada Web Stranica OVO
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.
8/19/2019 Izrada Web Stranica OVO
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:
8/19/2019 Izrada Web Stranica OVO
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.
8/19/2019 Izrada Web Stranica OVO
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
8/19/2019 Izrada Web Stranica OVO
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/
8/19/2019 Izrada Web Stranica OVO
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/19/2019 Izrada Web Stranica OVO
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.
ZADA+; ZA ,AE0,TA@A 9AD
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.
8/19/2019 Izrada Web Stranica OVO
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/
8/19/2019 Izrada Web Stranica OVO
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.
8/19/2019 Izrada Web Stranica OVO
11/16
ZADA+; ZA ,AE0,TA@A 9AD
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
8/19/2019 Izrada Web Stranica OVO
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'.
8/19/2019 Izrada Web Stranica OVO
13/16
1". Zatvori web sjedište.
ZADA+; ZA ,AE0,TA@A 9AD
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/
8/19/2019 Izrada Web Stranica OVO
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.
8/19/2019 Izrada Web Stranica OVO
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.
8/19/2019 Izrada Web Stranica OVO
16/16
11. Prijeni raz&i7ite po&ožaje s&ike ' odnos' na tekst.
ZADA+; ZA ,AE0,TA@A 9AD
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