Kurs Web Dizajn

Web Design-B.Simeunovi - 1 - ________________________________________________________________________________________

Obrazovni centarSveti Sava aak - K U R S - _____________________________________________________

WEB DIZAJN - I deo Predava:Mirjana Brkovi ____________________________________________________________________________

-WWW-Internet servis -Skup hipertekstualnih elemenata -Hiper tekst omoguava nelinearno kretanje kroz dokument -HTML-Hyper Tekst Markup Language Web stranica-jedan dokument pisan HTML jezikom. -Web ita(browser)-program za pregled web strana

http://www.cacak.co.yu http-protokol(pravilo)-hiper tekst transfer protocol

-cacak.co.yu DOMEN(Ime servera)

Index.htm-stranica -Internet adresa:URL(Uniform Resource Location)

HTML EDITORI -Tekst editori -Vizuelni editori(WYSIWYG) What you see is what get

-Najpoznatiji HTML editori su: -MS Front Page (2003) -Macromedia Dreamwiver(Macromedia Studio-2004,8)

Macromedia Dreamwiver

-Pogledi na dokument u Dreamwiveru mogu biti:

1.CODE(Kodni prikaz-HTML elementi) 2.SPLIT(Podeljeni prikaz) 3.DESIGN(Vizuelni reim)

-Strukturu web stranice ine html elementi,a elementi se sastoje od tagova.

. Poetni tag Zavrni tag

PR:Ovaj tekst je podebljan podebljan e biti ispisano bold slovima.


-zaglavlje dokumenta

-sadraj dokumenta

Internet prezentacija

-Kreiranje web sajta: -Sajt se sastoji od jedne ili vie html strana,zajedno sa dodatnim sadrajima(slike,vizuelni efekti...) -Svaka internet prezentacija poseduje odreenu organizacionu strukturu stranica: -linearnu

-hujerarhijsku

-Za svaku od struktura treba obezbediti kvalitetnu navigaciju

-Sajt-folder sa sadrajem -Prvo treba formirati folder u kome e se uvati sadraj prezentacije -Sa linije menija odabrati SITES

Menage sites...ili, Sa fajl panela odabrati iz liste opcija Menage sites.


-Odabrati opciju NEW,zatim posle potvrde DONE iz dobijenog obrasca odabrati karticu ADVANCED

-Odabrati sa liste(levo)-LOCAL INFO , i u ponuenim poljima popuniti ime prezentacije i odabrati folder u kome e se sadraj uvati. (local root folder) -Odabrati SITE MAP LAYOT i u ponuenom polju upisati naziv polazne strane. -Panel ASSETS slui za pregledanje dodatnih sadraja (slike,multimedija...)

PREGLED STRANICE U WEB ITAU File meni Prewiev in browser,ili ikonica globusa na paleti sa alatima,ili funkcijski taster F12.

-Podeavanja Dreamweavera: -Meni Edit-Preferences- Na kartici General iskljuiti zadnje 3 opcije(CSS...,Use Strong...)


(koristimo i tagove) -iskljuujemo upotrebu stilova umesto tagova -Na kartici prewiev in browser postavimo Internet Explorer kao osnovni ita

-Postavljanje naslova dokumenta: -Na liniji alata dokumenta-TITLE-(upiimo naziv)

-Podeavanje karakteristika strane: -U prozoru Properties kliknimo na Page properties: Klikom na aperance podeavamo izgled strane

-Koristimo RGB sistem boja(Cmik model koriste tampai) PR: 0,0,0-crna boja 255,255,255-bela boja -Pri oznaavanju boje koristi se heksadecimalni kod (cifre od 0-9 i slova A-F) Ovde podeavamo: -pozadinsku sliku -osnovnu boju pozadine -boju slova u tekstu -margine -Na kategoriji Title Encoding se podeava naslov dokumenta i odabira pismo(za prikaz naih slova odabrati Central Europen windows)

-Podeavanje teksta Osnovna struktura teksta se organizuje kroz paragrafe(tag ),ije karakteristike se mogu podeavati, kao na primer: -centralno poravnanje paragrafa Na nivou taga karakteristike se podeavaju na nivou atributa,kojima se dodeljuje vrednost u okvirtu poetnog taga .(sadrzaj) -Razdvajanje sadraja moe se izvriti i upotrebom stilova za naslove (Heading1.7)

(Koristiti listu Format sa Properties linije)


Formatiranje teksta -Formatiranje tekstualnih sadraja Web stranice moe se vriti selektovanjem dela teksta i izborom eljenog formata pomou:

Properties linije Insert linije(ispod glavnog menija kartica text)

Iz menija Text -Podeavanje fonta na Web stranicama se vri izboromfamilije fontova -Mogu se podesiti veliina i boja fonta

Liste -Postoje sledee vrste lista:

Numerisane () Nenumerisane(buleti , ) Definicione liste()

-Podeavanje liste vri se iz Meni linije Text List Properties

Gde se moe podesiti : Tip liste(vrsta) Stil(1,2,3....;I,II,III....) Poetni broj(za numeracione liste)

-Definicione liste omoguavaju kreiranje renika pojmova sa njihovim objanjenjem. Lista se ukljuuje pomou ikone DL u Text Insert liniji.

Ili preko ve opsanog: Meni-Text-List. -Nakon ukljuivanja liste unose se parovi : -Pojam

Njegova definicija -Pojam


Njegova definicija -Unos preloma reda: se koristi za prelom u okviru paragrafa,a dodaje se iz Insert linije-kartica Tekst-poslednja ikona sa specijalnim karakteristikama. -Umetanje razmaka kao specijalnog karaktera se vri iz tekst kartice(specijalni karakteri).Sa tastature : Shift+Enter.

-Horizontalna linija-element koji se koristi za vizuelno razdvajanje celina stranice. Dobija se iz glavnog menija-Insert-HTML-Horizontal Rule

irina horizontalne linije se moe odrediti u pikselima ili procentima irine ekrana (to je preporuljivo zbog razliitih veliina monitora).Ovo se podeava prethodnim selektovanjem horizontalne linije , pa sa properties linije unosimo podatke za W(irina)i H(debljina)-(pikazano na gornjoj desnoj slici).

Linkovi

-Linkovi se mogu praviti ka stranicama trenutne prezentacije ili ka nekoj drugoj prezentaciji.Ako kreiramo link na stranu nae prezentacije,treba uraditi sledee:

Selektujemo tekst koji e predstavljati link i u propertis liniji u polje link treba dati adresu na koju taj link vodi

Izbor strane (resursa) vrimo pomou ikone foldera -pronalazimo dokument na koji link treba da vodi

Moemo koristiti i pokaziva kojim moemo ukazati na sadraj u files(fajls) panelu


-Kada se radi link na neku spoljanju stranicu,potrbno je upisati kompletnu html adresu(URL).PR.: http://www.Google.com

-Otvaranje linka u novom prozoru itaa vri se postavljanjem target(ciljni prozor)tog linka na vrednost blank.

-Kreiranje E-mail linka: Insert meni-E-mail link-upisati tekst i adresu

-Isto se moe dobiti i korienjem ikone E-mail iz pomonog menija Common

Web grafika-rad sa slikama

-Za internet prezentacije se mogu koristiti tri formata slika: 1. JPG-kompresovani format,16 miliona boja.Odabrati rezoluciju do 72(zbog manje

veliine fajla).Nema transparentnost. 2. GIF-radi sa 256 boja,pogodan za animirane slike,logotipe.Ima transparentnost-

(providnost). 3. PNG-Veliki broj boja,transparentan.Radi u vektorskom formatu.


-Ubacivanje slike:Common meni-ikona za slike-image:

...ili,Meni Insert-Image...

-Sliku je poeljno prethodno obraditi u nekom programu za obradu slika(podesiti rezoluciju,veliinu...)pre ubacivanja u program. -Podeavanje ve ubaene slike: Selektovanjem slike , u Properties liniji dobijamo karakteristike slike koje moemo podeavati:

-Na gornjoj slici vidimo da je veliina fajla za sliku 118 kb , to je postignuto umanjenjem dimenzija(u rubrici W-irina , vidi se da stoji -100,a H-visina bez vrednosti,to znai da e visina slike proporcionalno biti umanjena prema ovoj irini). -U rubriku Border upisujemo vrednost za debljinu okvira slike.Ako je bez vrednosti,ili 0,slika nee imati okvir. -Ako hoemo da linkujemo sliku na istu sliku vee veliine,tada je potrebno:

Ubaciti odabranu sliku u folder u kome radimo aplikaciju,naravno veu nego to je ovde Na prethodno neki opisani nain linkovanja , povezati sliku sa njenim (dosta veim)

originalom(u properties liniji,kada je selektovana slika,imamo rubriku Link u koju treba upisati naziv slike ,ili je odabrati preko ikone foldera,ili ikonom koja e strelicom povezati ovaj link sa slikom smetenom na desnoj strani u Fajl ili Assets panelu)

(U polje link je upisana slika preko ikone foldera- ).


TABELE

-Tabele se koriste za pravilan razmetaj sadraja na strani. -Dobija se iz menija Common(najei poslovi)Table:

irinu tabele je zgodnije postaviti u procentima,zbog mogunosti da jednako bude vidljiva na svim rezolucijama monitora. -Cell padding-oznaava koliko je odmaknut sadraj elije od ivice elije. -Cell spacing-predstavlja razmak izmeu dve susedne elije.

-Selektor tagova:--selektovana cela tabela --selektuje jedan red --selektuje jednu celiju -Tabele se mogu korigovati i sa strelica koje prate svaku tabelu:

I sa kartice layot mogu se vriti promene nad tabelama. Podeavanja tabela se vre upotrebom razliitih atributa,i to podeavanje se moe vriti na nivou cele tabele,reda ili jedne elije. -Podeavanje se vri iz properties linije ili iz menija Modify-Table:


LISTE STILOVA

-CSS-Cascading Style Sheet (kaskadna lista stilova) -CSS predstavlja skup pravila formatiranja kojima se podeava izgled web strane.Stil se moe definisati na nivou jednog dokumenta, ili kao poseban fajl sa stilom koji se moe primenjivati na vie strana. Stilom se moe definisati izgled odreenog taga(p,body,h1....),a postoje i tzv. klase stilova,pri emu se klasa moe primeniti na bilo koji element strane. Podeavanje stilova se vri iz menija Text-CSS Styles.

--

Ili sa Properties linije-Style

-Iz dijalokog prozora Edit Style Sheet moemo povezati dokument sa nekim postojeim stilom koga ima u obliku fajla-Attach... Moemo definisati novi stil(na nivou stranice),ili novi fajl sa stilom i moemo menjati postojee stilove.

FREJMOVI(OKVIRI)

-Frameset strana je strana koja slui za podeavanje razmetaja vie razliitih web stranica u okviru jednog prozora web itaa.Time je prozor itaa podeljen na vie pravougaonih oblasti , i u svakoj od tih oblasti prikazuje se razliita strana.


-Jedna pravougaona oblast predstavlja frame/freim/-okvir u kome se nalazi jedan HTML dokument. -Kreiranje framest dokumenta:File-New-Category-Framesets

-Izaberemo jedan od ponuenih tipova podeavanja.Posle toga , dobijamo jednu novu frameset stranu(moemo promeniti veliine frejmova),kao i nove dokumente u svakom od frejmova. Ukoliko u dizajn reimu nije vidljiva granica izmeu frejmova(okvira),ukljuujemo je iz menija View -Visual Aids-Frame borders:

Nakon unosa sadraja u svaki od frejmova,potrebno je snimiti celu frameset stranu(glavna) kao i pojedinane stranice u frejmovima(meni.dobro doli...)

-AKTIVIRANJE LINKA U ODREENOM FREJMU

U svakom framesetu svaki freim ima svoj naziv.Postavljanjem linka u neki od frejmova,nije odreeno u kom frejmu se taj link otvara.Potrebno je linku,pomou atributa Target definisati frejm u kome se linkovana stranica prikazuje(ciljni frejm). Vrednosti target atributa ,mogu biti:

Blank-aktivira link u novom prozoru itaa. Parent-aktiviranje linka u roditeljskom frejmu Self-otvara se u frejmu u kome se trenutno nalazimo Top-otvara se u najviem frejmu

Podeavanje ciljnog frejma moe se vriti na nivou itave strane-u kom frejmu e se otvoriti svi linkovi.To se vri pomou taga base u hed delu stranice: Insert-HTML-Head Tags-Base:(Ovo se radi na stranici sa menijem)


-U dijalog prozoru href ne upisujemo nita,a za Target izaberemo Main frame

LINK NA DEO STRANE Ako elimo da se kreemo kroz jednu web stranicu , potrebno je na toj stranici definisati oznaena mesta(Insert-Named Anchor,ili ikona sidra u Common kartici)

Na ovako oznaena mesta mogue je praviti linkove(Insert-Hiperlink),ili na ikonicu

Ako smo napravili oznaena mesta,tada se u listi sa linkovima pojavljuju ta mesta.Link na definisano mesto se razlikuje po tome to se ispred naziva pojavljuje simbol taraba(#)

MAPIRANE SLIKE Predstavljaju obine slike podeljene na vie oblasti,od kojih svaka oblast predstavlja link na razliite stranice.Oblasti mogu biti:

Krune Pravougaone Poligonalne


Oblast se dodaje selektovanjem slike i izborom vrste oblasti iz Properties linije,nakon ega izabrani oblik prevuemo preko odreenog dela slike Tom delu mape se dodeljuje link (+ target,+Alt...) ...........................................................................................

HTML FORME

-Formular slui za unos podataka od strane korisnika .Uneti podaci se mogu obraditi na vie naina ,uvati u bazama podataka na serveru,slati na odreenu e-mail adresu. Formular sadri razliite vrste polja za unos i jedan formular obuhvata sve podatke unete u polja formulara. Dodavanje forme:Insert-Form-Form,ili iz Insert menija-Forms:

-Forma ima svoje ime-form name,dokument koji obrauje formu(Action) i nain prosleivanja podataka(metod Get ili Post).

TEMPLATES (ABLONI)

abloni slue za upotrebu zajednikih elemenata na svim stranama sajta.Templates se kreira iz HTML stranice iji dizajn i razmetaj prihvatamo za osnovni na naem sajtu.Kreiranje Templatea vri se iz File-Save As Template,u trenutku kada smo ve kreirali stranicu eljenog dizajna.


Templates se pridruuje nekom sajtu,daje mu se neko ime,i tada je u okviru sajta napravljen novi folder Templates , koji sadri fajl Templ.dwt.

U svakom ablonu se definuu oblasti koje e moi da se menjaju u stranicama zasnovanim na ablonu.Na primer,selektujemo elije tabele u kojoj e moi da se vre izmene:Insert-Template objects-Editable region(izmenjiva oblast).

Iz tog ablona kreiramo nove HTML strane: File-New Templates(kartica)-odabrati sajt(site)koji nam odgovara.

Na stranicama se mogu dodavati sadraji samo u definisanim-izmenjivim regionima,apromene ostalih delova se mogu vriti samo na ablonu.(dwt.fajl).Svaka izmena na ablonu inicira auriranje stranica koje primenjuju taj ablon. .........................................................................

Kontrola ispravnosti podataka u formularu: Selektujemo Formu i iz panela Tag inspector ,na kartici Behaviors(ponaanja),izaberemo Validate Form.Za polja formulara , ovde moemo podesiti obavezne vrednosti.


KREIRANJE DUGMADI U MACROMEDIA FIREWORKSU

-Nacrtamo objekte koji ine dugme(pravougaonik,krug....) i podesimo format tih elemenata.Zatim selektujemo sve nacrtane elemente i kreiramo simbol dugmeta. Modify-Symbol-Convert to symbol...(ili F8-taster).

-Dobijeni simbol umnoimo vie puta :Edit-Duplicate...i svakom od primeraka dugmeta promenimo u properties liniji :tekst,link,target...

Izmena postojeeg simbola,vri se dvoklikom na primerak simbola.U simbolu se moe menjati:Up,Over,Down....

Kada smo zavrili kreiranje svih dugmia , izvozimo slike (ili celu HTML stranicu) iz: File-Export ....

..........................................................................................................................................

ZAVRNI TEST

1. U folderu i-06 kreirati folder test 2. Keirati sajt iji je osnovni folder test 3. Kreirati HTML stranu ,snimiti je pod imenom index.htm u folderu test 4. Na sredini strane index napraviti veliki naslov(h1):test za Web design 5. Ispod naslova napraviti tabelu sa tri kolone,irine 40%,poravnati ih centralno,i u njih

postaviti sledee linkove:

koji vode na strane : Index.htm

home kontakt linkovi


Kontakt.htm Linkovi.htm

6. Za stranu index.htmnapraviti stil u posebnom fajlu(still.css),sa podeavanjem za tagove ,,,,,, i definisati klasu stila Moja slova.

7. Ispod tabele sa linkovima formirati tabelu irine 95%(jedna kolona ,jedna vrsta),a unutar nje formirati novu tabelu(2x2),a u levom delu posle toga spojiti dve vrste u jednu.

Obrazovni centar Sveti Sava stilMoja slova

aak 032/342-198

StilSava,font-10,siva boja slova centralno pravnanje

-Na kraju ovu stranu snimiti.Zatim je snimiti kao ablon stranu pod imenom Sava.Za izmenjivu oblast u ablonu odabrati polje tabele u kome je natpisweb design. -Na osnovu ovako formiranog ablona,formirati dve nove strane:kontakt.htm i linkovi.htm (prema kojima pravimo linkove iz prve tabele).

.......................................................................................................................................................

........................................................................................................

Ime i prezime

Postaviti svoju sliku Web design

Documents

Kurs Web Dizajn