Web projekti 2 razred Oblikovanje navigacije i slika

Web projekti (2. razred) Oblikovanje navigacije i slika Obrazovni sektor: GRAFIČKA TEHNOLOGIJA I AV OBLIKOVANJE Strukovna WEB DIZAJNER – 2. GODINA kvalifikacija/zanimanje: Nastavni predmet: WEB PROJEKTI Nastavna jedinica: Oblikovanje navigacije CSS-om Oblikovanje slika (prozirnost i spriteovi) Predviđeno vrijeme: 3 školska sata Za pregled i čitanje uputa: računalo, tablet ili mobitel Za vježbu i izradu zadataka: računalo s tekstualnim Potrebni materijal i pribor za editorom (Brackets ili neki drugi program koji učenici izradu: koriste u nastavi i za izradu domaćih zadaća), program za obradu slika MATERIJALE PRIPREMIO: Krešimir Varga, mag. educ. inf. , kresimir. varga@skole. hr

Uvod § Drage učenice i dragi učenici! § Kako bismo vam olakšali učenje za vas smo pripremili materijale za samostalni rad. § Ova prezentacija vodi vas kroz oblikovanje navigacije CSS-om i oblikovanje slika (prozirnost i spriteovi). § U prezentaciji se nalaze interaktivni sadržaji koje možete otvoriti pritiskom na sljedeće gumbiće: GUMBIĆ KOJI VODI NA VANJSKE IZVORE, POPUT WEB STRANICA, KVIZOVA ILI MOTIVACIJSKIH PRIMJERA GUMBIĆ KOJI VODI NA PREUZIMANJE MATERIJALA ZA VJEŽBU I/ILI ZADATKA GUMBIĆ KOJI VODI NA VIDEO TUTORIALE (VOĐENE VJEŽBE POPRAĆENE UPUTAMA) § Vaši nastavnici će vam također pružati podršku u učenju na daljinu. Želimo vam sretno i ugodno učenje!

Pseudoklase § Pseudoklase su selektori koji se koriste za oblikovanje elementa na temelju nekog drugog kriterija (poput stanja poveznica/linkova ili elementa obrasca), a ne strukture samog HTML dokumenta. § Za promjenu stanja poveznica koriste se sljedeće pseudoklase – : link, : visited, : hover i : active koje se dodaju na selektor za poveznicu. § Njihov redoslijed je bitan prilikom pozivanja u CSS-u pa ih možemo zapamtiti pomoću mnemotehnike Lo. Ve: HAte. § Prisjetite se čemu služi koja pseudoklasa jer ćemo neke od njih koristiti u ovim nastavnim sadržajima.

Navigacija 1/4 § Vertikalna navigacija – video demonstracija § Pogledajte demonstraciju Video 1 – vertikalna navigacija u trajanju od 11 minuta. § Kroz demonstraciju će biti objašnjeno kako se izrađuje i oblikuje vertikalna navigacija korištenjem liste i linkova te kako promijeniti stanja pojedinačnim elementima navigacije. VIDEO 1. VERTIKALNA NAVIGACIJA PRIMJER 1. Vertikalna navigacija

Navigacija 2/4 § Vertikalna navigacija – samostalni zadatak § Nakon što ste pogledali videozapis, kreirajte projektnu mapu te u njoj datoteku nav-1. html. Korištenjem liste kreirajte vertikalnu navigaciju na početnu te još četiri stranice po izboru. § U unutarnjem CSS-u oblikujte navigaciju korištenjem fontova, boja i obruba po izboru. Gumbu promijenite stanje prilikom prelaska preko njega te oblikujte stanje gumba trenutno otvorene stranice. § Navigacija treba biti oblikovana po vlastitom izboru tako da ne izgleda identično onoj na videu. Pazite na kombinaciju boja.

Navigacija 3/4 § Horizontalna navigacija – video demonstracija § Pogledajte demonstraciju Video 2 – horizontalna navigacija u trajanju od 6 minuta. § Kroz demonstraciju će biti objašnjeno kako se izrađuje i oblikuje horizontalna navigacija korištenjem liste i linkova. PRIMJER 2. Horizontalna navigacija VIDEO 2. HORIZONTALNA NAVIGACIJA

Navigacija 4/4 § Horizontalna navigacija – samostalni zadatak § Nakon što ste pogledali videozapis, u projektnoj mapi kreirajte datoteku nav-2. html. Korištenjem liste kreirajte horizontalnu navigaciju na početnu te još četiri stranice po izboru. § U unutarnjem CSS-u oblikujte navigaciju korištenjem fontova, boja i obruba po izboru. Gumbu promijenite stanje prilikom prelaska preko njega te oblikujte stanje gumba trenutno otvorene stranice. § Navigacija treba biti oblikovana po vlastitom izboru tako da ne izgleda identično onoj na videu. Pazite na kombinaciju boja.

PRIMJER 3. Prozirnost DIV elementa

Prozirnost 1/2 § Oblikovanje slika (prozirnost) – video demonstracija § Pogledajte demonstraciju Video 3 – fotogalerija u trajanju od 8 minuta. § Kroz demonstraciju će biti objašnjeno kako možemo dodati prozirnost na elemente i na što sve trebamo paziti prilikom dodavanja svojstva opacity. Isto tako, bit će prikazano kako je moguće kreirati fotogaleriju s poluprozirnim hover efektom. PRIMJER 4. Prozirnost slika u galeriji VIDEO 3. FOTOGALERIJA

Prozirnost 2/2 § Oblikovanje slika (prozirnost) – samostalni zadatak § Nakon što ste pogledali videozapis, u projektnoj mapi kreirajte datoteku foto. html te u njoj kreirajte fotogaleriju od najmanje 9 slika po izboru prema vođenoj vježbi iz videa. § Za svaku sliku kreirajte manju i veću verziju i pohranite ih u podmapu slike. Ukoliko se bavite fotografijom ili crtanjem, to mogu biti i vaši radovi, a ukoliko ne, koristite besplatne stock servise za odabir slika (‘Free. Pik’, ‘Unsplash’ i sl. ). Odabir slika tematski ujednačite.

Spriteovi § Oblikovanje slika (spriteovi) – za one koji žele znati više… § Sprite je kombinacija više slika pohranjenih u jednu slikovnu datoteku (npr. jedna do druge ili jedna ispod druge). Koriste se kako bi se poboljšale performanse web stranice prilikom učitavanja. § Ovaj zadatak je za one koji žele znati više. Proučite tutorial na stranici https: //www. w 3 schools. com/css_image_sprites. asp te u vašoj projektnoj mapi u datoteci sprite. html izradite sprite po izboru. POVEZNICA NA TUTORIAL ZA SPRITEOVE

Ponovimo! § U nastavku su pitanja za ponavljanje: § Što su pseudoklase i čemu služe? Navedi nekoliko pseudoklasa i objasni ih na primjerima. § Objasnite kako se može kreirati vertikalna navigacija. § Objasnite kako se može kreirati horizontalna navigacija. § Čemu služi opacity? Opišite ga na primjerima. § Koji problem se može pojaviti kada koristimo opacity i kako ga možete riješiti? § Što su spriteovi i koja je njihova svrha? Uspješno ste došli do kraja lekcije, bravo!