Web dizajn - ubrzani tečaj
Cilj tečaja je upoznati polaznike s procesom nastajanja web stranice od samog dizajna do implementacije na web server. Za početak se polaznici upoznaju s osnovama web dizajna i alatom Adobe Photoshop i njegovim osnovnim funkcijama. Polaznici usvajaju vještine pisanja HTML koda za izradu kostura web stranica, odnosno definiranja layouta, veza i postavljanja multimedijskih elemenata. Primjenjivanjem CSS stilova na određene dijelove HTML koda polaznici se upoznaju sa samom tehnologijom, a korištenjem Bootstrapa približava se polazniku pojam responzivnih web stranica kao i njihova važnost. Tečaj se završava implementacijom postojeće web stranice kao teme u WordPressu te upoznavanje s osnovnim funkcionalnostima te web aplikacije.
Program seminara
Photoshop
- razumjeti ulogu Photoshopa u grafičkoj pripremi
- upoznati se s osnovnim alatima koje Photoshop nudi
- razumjeti pojam slojeva
- spremiti Photoshop dokumente za web
HTML i CSS
- upoznati se i raditi s HTML-om
- upoznati se s pojmom tagova
- razumjeti globalnu strukturu HTML dokumenta
- dodavati multimedijske elemente u HTMLu
- upoznati se i raditi s CSS-om
- znati razlikovati class i id
- primjenjivati media upite
- oblikovati tekst i elemente u CSS-u
- pozicionirati elemente u CSS-u
- razumjeti pojam responzivnosti
- upoznati se s ulogom Bootstrapa u web developmentu
- razumjeti Bootstrap grid
- upoznati se s osnovnim klasama Bootstrapa
WordPress
- instalirati WordPress i prvi koraci
- razumjeti pojam content management system CMS-a
- dodavati i uređivati sadržaj
- razumjeti i implementirati WordPress teme
- znati razlikovati objave od stranica
- optimizacija za tražilice (SEO)
Trajanje
Predznanje
- Osnove korištenja računala
- Osnove korištenja operacijskog sustava Windows i web preglednika
HTML (XHTML/HTML5) - osnove
Cilj je seminara osposobiti polaznika za izradu web stranica koristeći se HTML i XHTML kodom. Polaznik usvaja vještine pisanja TAG-ova za kreiranje veza, tablica, oblikovanje teksta, izradu formi i layouta stranica. Polaznik također dobiva razumijevanje čitanja izvornog koda (source code) na već izrađenim web stranicama.
Program seminara
- Uvod u HTML: korištenje i objašnjenje osnovnih TAG-ova, pisanje sintakse
-
Uvod u XHTML: striktnija verzija HTML i definiranje TAG-ova prema standardu World Wide Web Consortiuma (W3)
- Rad s tekstom: promjena veličine, oblika i boje slova, rad s odlomcima, razmaci, stvaranje listi, unos komentara, promjena pozadine web stranice
- Veze: veze teksta i slike na web stranicu, veze za slanje elektroničke pošte, veze na određeno mjesto na web stranici, određivanje targeta
- Tablice: obrubi i poravnavanja, rad s ćelijama, oblikovanje ćelija, bojenje ćelija, rad sa stupcima i recima, umetanje sadržaja unutar tablice
- Forme: stvaranje formi za unos podataka, unos teksta, izbornici, potvrdni gumbi
- CSS stilovi: izrada stilova za uređivanje teksta i predefiniranih klasa (pseudo class) dodavanje stila kroz CSS dokument, postavljanje stila na zasebni dokument
- CSS3: upoznavanje s novom unaprijeđenom verzijom CSS-a, mogućnostima i konkretnom primjenom stila u praksi.
- Rad sa skriptama: implementacija PHP skripti unutar HTML-a
- Upload sadržaja: definiranje hosting servera i upload sadržaja FTP-om
- Uvod u HTML 5: korištenje standarda koji se sve više koristi u izradi web stranica i otvara nove horizonte u oblikovanju Weba
- HTML 5 semantički sadržaj: form element, header, footer, section, article, video, audio elementi
Trajanje
- 20 školskih sati (1 tjedan)
Predznanje
Seminar zahtijeva predznanje seminara: Osnove PC računala i Windows i Internet i mrežne komunikacije, ili odgovarajuće znanje
Nastavni materijal
- Softver: Notepad
- Priručnik za polaznike: "HTML (XHTML) - osnove", grupa
SEO - Optimizacija za pretraživače
Cilj seminara je naglašavanje važnosti promoviranja web stranice korištenjem ključnih riječi, ključnih pojmova, ali i kompletnog sadržaja. Polaznici stječu znanja kako primijeniti SEO (Search Engine Optimization) na stranicu kroz HTML kod te prikaz dizajna stranice na temelju principa "search engine friendly".
Program seminara
- Search Engine Optimization (SEO): kako funkcionira, prednosti i cijena
- Smisao postavljanja stranice na pretraživače: dodavanje ključnih riječi, ključnih pojmova
- Korištenje teksta kao vektora, prednosti postavljanja pojma ili karakteristične riječi u naslov (title)
- Potrebni parametri za prikazivanje na tražilici (posjeti stranice, starost domene...)
- Marketinški trikovi: kako povećati posjećenost stranice
Trajanje
Predznanje
Seminar zahtijeva predznanje seminara: Osnove PC računala i Windows i HTML-osnove ili odgovarajuće znanje
CSS stilovi
Cilj seminara je stjecanje znanja i vještina primjene CSS stila na određene dijelove stranice, kao i cjelokupni projekt. Polaznici se kroz vježbe na različitim projektima i razumijevanjem primjera gotovih projekata upoznaju s korištenjem CSS-a.
Program seminara
- Korištenje stila unutar određenog dokumenta kao i povezivanje dokumenta s vanjskom Style Sheet datotekom
- Korištenje vrsta Styla; Class, Tag, Advanced
- Definicije Fonta, veličine, boje i stila prikaza fonta
- Napredno korištenje prikaza pozadine unutar prostora, pozicija elementa unutar prostora pomoću margine i odmaka, stvaranje karakterističnog prikaza obruba u prostoru
- Dodavanja određenih, predefiniranih, filtera pomoću CSS-a
- Napredni rad s DIV elementima pomoću CSS-a i njihova optimizacija
- Postavljanje DIV elemenata u prostoru apsolutno i relativno
Trajanje
- 12 školskih sati (1 tjedan)
Predznanje
Seminar zahtijeva predznanje seminara: Osnove računala i Windowsi HTML-osnove ili odgovarajuće znanje
Nastavni materijal
- Softver: Notepad i Adobe Dreamweaver CS4
- Priručnik za polaznike: "Adobe Dreamweaver CS4 – izrada web stranica", grupa autora
Dodatne informacije
- Seminar je jedan od nastavnih cjelina za program obrazovanja "Web dizajner" - usavršavanje
Adobe Fireworks - obrada slike
Cilj je seminara osposobiti polaznika za obradu grafike korištenjem programa Adobe Fireworks. Polaznik uz vještine rasterske i vektorske obrade ovladava svim alatima za selekciju, rezanje i obradu slike. Usto polaznik stječe praktična saznanja kako kreirati gumbe za navigaciju, izraditi animirane gifove, spremiti određene dijelove slike za kasnije korištenje u ostalim Adobe programima i sl.
Program seminara
- Uvod: rasterska i vektorska grafika, rezolucija, modeli boja, radna površina, osnovni alati
- Slojevi: (Layers) – paleta Layers i njezina upotreba
- Vektori: vektorski alati, krivulje i ispune
- Transformacija i poravnanja
- Tekst: alati, postavke, izobličavanje
- Rasteri: ubacivanje slike, selekcija, izrezivanje, kopiranje, kist, olovka, Gradient alat, Paint Bucket alat
- Toniranje i fokusiranje: alati i njihova primjena
- Prilagodba boja i filtri: Levels, Curves, Hue/Saturation, Brightness/Contrast, sjena, svjetlina
- Maske i kombiniranje putanja: primjena maski, spajanje i rezanje putanja
- Web alati: Hotspot alat, Slice alat, stvaranje hiperveza, rezanje slike na dijelove, kreiranje gumba i njegova stanja
- Animacije i Behaviors: izrada animiranih .GIF slika, Pop-Up Menu, Swap Image
- Optimizacija: Optimize paleta, formati slike i kompresija
- Izrada logotipa
- Izrada Dizajna Web stranice: definicija prostora kod izrade stranice (Portalski prikaz sadržaja, Korporativne stranice te dizajnerski pristup)
Trajanje
Predznanje
- Osnove PC računala i Windows XP ili odgovarajuće znanje
Nastavni materijal
- Softver: Adobe Fireworks
- Priručnik za polaznike: "Adobe Fireworks – obrada slike", grupa autora
Adobe Dreamweaver - izrada web stranica
Cilj je seminara osposobiti polaznika za samostalnu izradu web stranica korištenjem programa Adobe Dreamweaver CS5. Polaznik upoznaje sve potrebne elemente za izradu web stranice: kako definirati site, izraditi layout stranice, umetnuti i urediti sadržaj te napraviti upload stranice na server. Kroz brojne primjere i praktične zadatke polaznik ovladava alatima i opcijama koje nudi Dreamweaver.
Program seminara
- Uvod: izbornici, trake s alatima, paleta Insert, opcije oblikovanja
- Kreiranje početne stranice: prikaz stranice, dodavanje i obrada teksta, mijenjanje boje podloge, oblikovanje margina, hrvatski znakovi, pomak teksta od ruba, stvaranje listi
- Veze: vrste, umetanje, prebacivanje, target, sidro
- HTML stilovi: kreiranje novih stilova, dodavanje na postojeći, rad s odlomcima, ubacivanje posebnih znakova, umetanje praznih mjesta, znakovi
- Umetanje slika: formati slika (.jpg, .gif…), umetanje, poravnanje, mijenjanje veličine, vraćanje originalne veličine, slika kao link, obrubljivanje slika
- Tablice: umetanje tablica, mijenjanje širine tablica, označavanje tablica, mijenjanje boje pozadine, umetanje slika u tablicu, tablica unutar tablice, horizontalno i vertikalno poravnanje, mijenjanje obruba tablice, spajanje ćelija tablice
- Flash animacije: dodavanje gumba, Flash tekst
- Behaviours i Rollover: dodavanje, stanja up, over, down
- Div-tagovi: stvaranje layouta web stranice uz pomoć Div tagova
- Predlošci: kreiranje, spremanje, određivanje editabilne zone, veze, Library Items
- Forme:vrste, umetanje
- CSS: paleta Design, vrste stilova (Class, Tag, Selection), dodavanje stilova, mijenjanje podloge odlomka, promjena stila linka, mijenjanje stanja linka, korištenje postojećih stilova, spremanje stilova
- Postavljanje stranice na server: postavljanje na server (FTP, LAN, WebDAV)
Trajanje
Predznanje
- Osnove PC računala i Windows XP ili odgovarajuće znanje
Nastavni materijal
- Softver: Adobe Dreamweaver CS5
- Priručnik za polaznike: "Adobe Dreamweaver CS5 – izrada web stranica", grupa autora
