Layout div element Nastavni predmet Web projekti Nastavni

+ Layout (div element( Nastavni predmet: Web projekti Nastavni plan i program/Kurikulum: Web dizajner, 1. razred Trajanje: 2 sata Prezentaciju pripremila: Kristina Erlić, dipl. ing. graf. teh. Prirodoslovno-grafička škola Zadar

+ Dragi učenici i drage učenice, kako bismo vam olakšali učenje za vas smo pripremili materijale za samostalni rad. U ovoj prezentaciji su sadržaji koji se odnose na nastavni predmet: Web projekti, 1. razred Prezentacija sadrži i poveznice na https: //www. w 3 schools. com. Također prezentacija sadrži i zadatak za vježbu. Na kraju prezentacije nalaze se pitanja za ponavljanje gradiva. Vaši nastavnici će vam također pružati podršku u učenju na daljinu. Želimo vam sretno i ugodno učenje.

+ Sadržaj prezentacije n što je layout n dobar i loš layout web stranice n osnovna struktura web stranice n div tagovi

+ Ponovimo n Nabroji faze izrade web stranice! n Što je User experience? n Što se nalazi u head dijelu html dokumenta? n Koji elementi se mogu nalaziti unutar body tagova html dokumenta?

+ Layout n Promotrite layout ove web stranice! n Što mislite o ovakvom layoutu web stranice?

+ Layout n layout web stranice na prethodnom slajdu bio je primjer lošeg layouta n dizajn za web stranicu mora imati stabilnu strukturu koja će se moći lako ukodirati

+ Layout n layout je dio grafičkog ili web dizajna koji određuje raspored elemenata) na stranici n određuje se broj kolona n gdje će se nalaziti tražilica n gdje izbornik itd…

+ Osnovna struktura web stranice n dok nije bilo hmtl 5 -ice cjelokupna struktura web stranice se radila pomoću div tagova n danas koristimo html 5 gdje se osnovna struktura web stranice radi pomoću tagova n >header></header< n >footer></footer< n >article></article< n >aside></aside< n >section></section< n >nav></nav<

+ Osnovna struktura web stranice n raspored html 5 elemenata

+ Osnovna struktura web stranice n osnovnu strukturu web stranice čine: n body zauzima površinu cijelog našeg monitora, bez obzira na njegovu širinu n pozadina bodya može biti jednobojna, tekstura, slika ili kombinacija toga

+ Osnovna struktura web stranice n n header n na samom vrhu web stranice nalazi se header n u headeru, obično na lijevoj strani ili na sredini , nalazi se logotip navigacija )nav( n ispod (a može i iznad) headera obično dolazi navigacija n korisniku mora omogućiti jednostavno snalaženje na web stranici

+ Osnovna struktura web stranice n article n aside n section n definiraju dio web stranice unutar kojeg se nalazi sav sadržaj web stranice

+ Osnovna struktura web stranice n footer n ispod sadržaja web stranice dolazi footer iste širine kao i header odnosno navigacija n najčešće sadrži podatke poput kontakta i sl.

+ Osnovna struktura web stranice n naravno da postoje razigrani, neobični i netipični dizajni web stranica n za početnike u web dizajnu je ipak bolje da se drže ovih osnovnih pravila n odstupanje od njih bolje je prepustiti iskusnim web dizajnerima koji dobro razumiju način na koji stranica funkcionira

+ Div tagovi n div tagovi su tagovi unutar kojih se nalaze pojedini dijelovi web stranice n u slijedećem primjeru imamo prikaz jednog div taga u web pregledniku n sadržaj div taga je unutar svijetloplavog pravokutnika

+ Div tagovi

+ Div tagovi n kod za prethodni primjer je:

+ Div tagovi n Primjer možete pogledati na stranici n https: //www. w 3 schools. com/tags/tryit. asp? filename=tryhtml_div_test

+ Div tagovi n objašnjenje koda n kod započinje DOCTYPE deklaracijom koja nam služi da web preglednik prikaže ispravno web stranicu ovisno o verziji html-a n slijedi tag html (uočite da je ovaj puta izostavljen head dio html-a(

+ Div tagovi n objašnjenje koda n unutar body tagova imamo n naslov h 1 n n div tag koji je uređen uz pomoć inline css-a (pomoću njega je sadržaj unutar div taga obojan u svijetloplavu boju( n n <h 1>The div element</h 1> <div style=“background-color: lightblue; ”< nakon div taga dodan je i red običnog teksta n <p>This is some text in a p element. </p>

+ Zaključak n n danas zahvaljujući html 5 -ici strukturu web stranice radimo pomoću tagova n >header></header< n >footer></footer< n >article></article< n >aside></aside< n >section></section< n >nav></nav< div tagovi se koriste za pojedine dijelove web stranica, kako bi ih mogli lakše urediti pomoću css-a

+ Ponovimo n Što je layout web stranice? n Navedi elemente html 5 -ice koji čine osnovnu strukturu web stranice! n Koja je uloga div tagova u html-u?

+ Zadatak n koristeći html, inline css i div tagove u notepadu napravite kod tako da u web pregledniku dobijete slijedeći prikaz

+ Upute za zadatak n Napomena: zadatak radite tako da na radnoj površini otvorite folder imena “layout”, a u toj mapi morate imati “img” folder u koji ćete staviti Urbanovu sliku. U folderu layout morate imati i html dokument. n U gornjem dijelu nalazi se navigacija za web stranicu napravljena pomoću neuređene liste. n Navigacija se nalazi unutar div taga koji je uz pomoć inline css-a obojan u sivu boju. n Ispod navigacije nalazi se slika Damira Urbana (potražite ju na netu. ( n Slika je pomoću atributa “width” stavljena na 100% širine web preglednika. n Ispod slike nalazi se još jedan div tag koji je pomoću inline css-a obojan u sivu. n Unutar tog div taga nalazi se običan tekst o Damiru Urbanu koji je također pomoću inline css-a obojan u sivo. n Tekst o Damiru Urbanu možete kopirati s Wikipedije. n I na kraju u posljednjem div tagu nalazi se običan tekst (kontakt podaci) i link na facebook

+ n materijali preuzeti s n www. kroativ. net n www. w 3 schools. com

+ Hvala na pažnji! kristina_lujic 11@yahoo. com