Tim Berners-Lee - otac web-a - kako je sve pocelo - hypertext koncept organizacije dokumenata. Kratak osvrt na to sta je http - protokol, html, sgml, xml, xhtml, dhtml, css, javascript, gif slika, animirani gif, jpg slika, flash animacija, tree (drvo) struktura sajta, ftp upload sajta - postavljanje prezentacije na server hostinga, vazniji browser-i, pretrazivaci i prijava sajta na iste, software koji se koristi za prethodno navedeno.
Sta je dreamweaver, sta sve moze da se uradi u njemu a za sta je potrebno angazovati dodatne programe za grafiku i animaciju. Radno okruzenje, osnovna podesavanja, dreamweaver-a, podesavanja za novi dokument, Code, Split i Design pogled na dokument, koncept odvajanja sadrzaja prezentacije od dizajna, i zasto je to dobro, CSS metodologija rada u dreamweaver-u, struktura web strane, zaglavlje i standardi (DOCTYPE i html), tagovi, <head> </head> sekcija, <body> </body> sekcija. Index struktura sajta i prva stranica (Hello World), snimanje stranice negde na hard disk u folderu za konkretni projekat koji se radi i provera iz sva 3 bitna browser-a IE, Firefox i Opera.
Postavljanje pocetnh parametara stranice preko Page Properties, boja pozadine stranice, dodavanje pozadinske slike po potrebi, osnovni fontovi na stranici, kako ce izgledati linkovi, naslovi ... Sadrzaj stranice, text, naslovi, paragrafi, linkovi (apsolutni i relativni URI), slike (osvrt na pripremu slika u Adobe Photoshopu - odnosi se na slike koje spadaju u sadrzaj sajta a ne u dizajn, uglavnom jpg i gif; kada se koristi jpg a kada gif i koju optimizaciju koristiti).
Kratak osvrt na kod koji lezi u osnovi svake internet stranice. Sta je to HTML (XHTML) osnovni tagovi, CSS koncepcija sadrzaj - dizajn, naglasak na <div> tag-u kao kontejneru za podatke, pointview (pocetna tacka pogleda iz browser-a), tree (drvo) struktura stranice. Sintaksa i semantika. Potencirati pravilnu upotrebu semantike, sintaksu (html tagove) resava sam program Dreamweaver a dizajn ide preko CSS-a, znaci kao u stara dobra vremana kad je vrhunac dizajna bio horizontalni lenjir i kad su stranice bile potpuno semanticki orjentisane na sadrzaj (naslov, podnaslov, paragrafi, tabele za tabelarni prikaz, linkovi ...) sve dok se neko nije dosetio da koristi tabele za dizajn jer drugog nacina nije bilo. Posto sad imamo CSS za dizajn stranice treba ga koristiti u tu svrhu, kasnije se dizajn celog sajta menja samo promenom CSS fajla a ostaje nam isto semanticki lepo struktuiran sadrzaj koji je ujedno lako svarljiv i za pretrazivace. Liste i primena. Tabele i njihova pravilna upotreba. Napomena o frejmovima i da li ih danas uopste treba koristiti.
Forme za unos podataka i prosledjivanje serveru, drop down meni, text box, check box-ovi ... Javascript - ubacivanje na stranicu i upotreba. Za primer cemo uzeti kontakt formu gde cemo ujedno i upotrebiti javascript na klijent strani za proveru tacnosti unesenih podataka.
Sta je CSS pojednostavljeno. Uporedjenje izrade dizajna koriscenjem tabela - stari nacin i koriscenjem stilova (CSS) - novi nacin. Vrste stilova - inline, ugradjen u stranicu (samo za jednu stranicu) i spoljni ulinkovani stil kao posebna datoteka koji moze da se koristi za vise stranica. Dodavanje jedinstvenog identifikatora svakom elementu stranice radi lakseg dodavanja stilova tim elementima kasnije (id atribut)
Type selektori koji menjaju dizajn osnovnih tagova, id selektori za stilizovanje div-ova i class selektori koji mogu da se upotrebljavaju za stilizovanje bilo kog elementa, specijalni pseudo selektori za stilizovanje linkova. CSS box model, margine, padding, border.
Stilizovanje listi, pravljenje navigacije preko liste a koriscenjem CSS-a. Div umesto tabele kao osnova sadrzaja sajta (tabele i dalje koristimo za tabelarni prikaz podataka sto im je i osnovna semanticka namena). Stilizovanje tabela koriscenjem CSS-a. Rad sa bojama i pozadinskim slikama koriscenjem CSS-a, Dizajniranje div-a upotrebom CSS-a, dizajn stranice koriscenjem CSS-a.
Pozicioniranja div-ova (layer-a), absolute, relative, static, fixed, sta se najcesce koristi i problem kompatibilnosti browser-a. Normalni tok podataka u browser-u, browser viewport, floating elementi - kako se sadrzaj stilizuje da izgleda kako mi hocemo iako je on u kodu a takodje i u Design pogledu Dreamweaver-a poredjan jedan za drugim, Z-index (dubinsko redjenje layer-a) sta je ispred a sta iza.
Header, glavni deo stranice, footer. Fiksirani layout na odredjenu sirinu, dvo i trokolonski. Tecni layout - procentualne sirine kolona. Centrirani dizajn. Ugnjezdeni layer-i. Kompleksni layout. Na kraju 10.-og casa bi trebalo da se sistematizuje svo znanje u izradu jedne tipicne stranice sajta, koja se polako formira u toku celog kursa gradacijski sa uvodjenem materije koja se obradjuje i plus recimo link od te strane na stranu za kontakt koju smo prethodno uradili u lekciji 5. Uz svaku lekciju po nesto za domaci eventualno za vezbanje kod kuce predjenog gradiva, uspostaviti koncept da se ucenik zainteresuje a da se malo angazuje i kod kuce da bi se sve preslo.
Upoznavanje sa ovim programima, cemu oni sluze, kratak osvrt na radno okruzenje, integracija i prenos podataka izmedju ova dva programa, objasnjenje sta je to vektor a sta bitmapa, i za sta se koriste jedno i drugo. RGB i CMYK color model i kad koji treba da se koristi, dpi 300 za print i 72 za ekranski prikaz. Upoznavanje sa gradacijskim konceptom dizajna, osnovni elementi u Ilustratoru kao vektori koje se prenose u Photoshop za konacni dizajn.
Izrada vektorskih slika i delova koji ce se kasnije koristiti u konacnom dizajnu bitmape za dizajn tipicne stranice sajta. Tipicna upotreba Ilustratora za dizajn logotipa firme, upotreba fontova, osnovnh oblika, pravougaonik, kvadrat, krug, elipsa, zvezda, spirala. Vektorski objekat, neogranicena mogucnost povecanja dimenzija bez gubitka kvaliteta, nodovi i kako ih menjati, preklapanje objekata i seckanje potrebnih oblika od datih. Boje i prelivi. Priprema vektorskih objekata za uvoz u Photoshop.
Adobe Photoshop osnove, otvaranje novog dokumenta za dizajn tipicne stranice sajta. Objasnjenje RGB modela ekranskog prikaza u 72 dpi i zasto je to dovoljno za web dizajn. Uvoz vektorskih objekata iz Ilustratora i kako da oni i dalje ostanu vektori ili kako uvesti slozeni vektorski objekat a da ne izgubi na kvalitetu. Koriscenje postojecih vektorskih objekata, tzv shape-ova u Photoshopu. Koncept layer-a u Photoshop-u, preklapanje layer-a, i mesanje sadrzaja layer-a radi postizanja dodatnih efekata.
Osnovne alatke Photoshop-a, sredjivanje slika, ciscenje pozadine slike (izvlacenje lika iz fotografije sa nekom pozadinom i ubacivanje iste u dizajn stranice. Koriscenje sto veceg broja layer-a radi efikasnijeg dizajna - lako promenjlivog - svaki moguci objekat poseban layer kad god je to moguce. Vodjice (guides) kao pomocno sredstvo za precizno pozicioniranje delova dizajna (tj layer-a - pozicioniranje na zeljeni layer i njegovo pomeranje). Crtanje slobodnom rukom (vrlo malo se ipak koristi u dizajnu znaci samo napomena). Crtanje osnovnih primitiva u Photoshopu, elipsa (krug), pravougaonik (kvadrat), to su takodje vektori.
Bojenje delova dizajna po layer-ima, upotreba grafickih stilova, senka, ispupcenje, udubljenje, upotreba gotovih stilova u Photoshopu i pravljenje svojih; stil se uvek odnosi na jedan layer, zato treba insistirati na sto vecu podelu po layer-ima. Grupisanje layer-a u logicke celine radi lakseg manipulisanja u dokumentu, recimo dizajn menija sadrzi nekoliko dugmeta. Par korisnih efekata koji se najcesce koriste u dizajnu tipicne stranice sajta, senka, ogledalo ...
Osnovno o izradi banera. Osnovno o animaciji u Photoshop-u, pravljenje animiranog gif-a za koriscenje u dizajnu stranice sajta, recimo text banera kome se menja boja u nekom ritmu. Priprema dizajna za isecanje na potrebne dimenzije i optimzacija slike za web. Umetanje pripremljenog dizajna u CSS osnovni dizajn sajta.