Kurs Web Dizajn

Web Design-B.
Simeunović -1-
________________________________________________________________________________________
- K U R S -
Obrazovni centar“Sveti Sava“ Čačak
_____________________________________________________
WEB DIZAJN - I deo

Predavač:Mirjana Brković
____________________________________________________________________________
-WWW-Internet servis
-Skup hipertekstualnih elemenata
-Hiper tekst –omogućava 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 režim)
-Strukturu web stranice čine html elementi,a elementi se sastoje od tagova.
<html> ………………………………. </html>

Početni tag Završni tag
PR:Ovaj tekst je podebljan podebljan će biti ispisano bold slovima.

Web Design-B.Simeunović -2-
________________________________________________________________________________________
<html>
<head>
<html >
<head> -zaglavlje dokumenta
<title>
</head>
<body> -sadržaj dokumenta

</body>
</html>
Internet prezentacija
-Kreiranje web sajta:
-Sajt se sastoji od jedne ili više html strana,zajedno sa dodatnim sadržajima(slike,vizuelni
efekti...)
-Svaka internet prezentacija poseduje određenu organizacionu strukturu stranica:
-linearnu
-hujerarhijsku
-Za svaku od struktura treba obezbediti kvalitetnu navigaciju
-Sajt-folder sa sadržajem
-Prvo treba formirati folder u kome će se čuvati sadržaj 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 ponuđenim poljima popuniti ime

prezentacije i odabrati folder u kome će se sadržaj čuvati.
(local root folder)
-Odabrati SITE MAP LAYOT i u ponuđenom polju upisati naziv polazne strane.
-Panel ASSETS služi za pregledanje dodatnih sadržaja (slike,multimedija...)
PREGLED STRANICE U WEB ČITAČU

File meni Prewiev in browser,ili ikonica globusa na paleti sa alatima,ili funkcijski
taster F12.
-Podešavanja Dreamweavera:
-Meni –Edit-Preferences- Na kartici General isključiti zadnje 3 opcije(CSS...,Use Strong...)
________________________________________________________________________________________
(koristimo i tagove)

-isključujemo upotrebu stilova umesto tagova
-Na kartici prewiev in browser postavimo Internet Explorer kao osnovni čitač
-Postavljanje naslova dokumenta:

-Na liniji alata dokumenta-TITLE-(upišimo naziv)
-Podešavanje karakteristika strane:

-U prozoru Properties kliknimo na Page properties:
Klikom na aperance podešavamo izgled strane
-Koristimo RGB sistem boja(Cmik model koriste štampači)

PR: 0,0,0-crna boja
255,255,255-bela boja
-Pri označavanju boje koristi se heksadecimalni kod (cifre od 0-9 i slova A-F)
Ovde podešavamo:
-pozadinsku sliku
-osnovnu boju pozadine
-boju slova u tekstu
-margine
-Na kategoriji Title Encoding se podešava naslov dokumenta i odabira pismo(za prikaz naših
slova odabrati Central Europen windows)
-Podešavanje teksta
Osnovna struktura teksta se organizuje kroz paragrafe(tag ),čije karakteristike se
mogu podešavati, kao na primer:
-centralno poravnanje paragrafa
Na nivou taga karakteristike se podešavaju na nivou atributa,kojima se dodeljuje vrednost u
okvirtu početnog taga
….(sadrzaj)………
-Razdvajanje sadržaja može se izvršiti i upotrebom stilova za naslove (Heading1….7)
(Koristiti listu Format sa Properties linije)
……………………………………………………………………………
________________________________________________________________________________________
Formatiranje teksta
-Formatiranje tekstualnih sadržaja Web stranice može se vršiti selektovanjem dela teksta
i izborom željenog formata pomoću:
• Properties linije
• Insert linije(ispod glavnog menija – kartica text)
• Iz menija Text
-Podešavanje fonta na Web stranicama se vrši izborom“familije fontova“
-Mogu se podesiti veličina i boja fonta
Liste
-Postoje sledeće vrste lista:
• Numerisane (<OL>)
• Nenumerisane(buleti , <UL>)
• Definicione liste(<DL>)
-Podešavanje liste vrši se iz Meni linije –Text – List – Properties
Gde se može podesiti :

• Tip liste(vrsta)
• Stil(1,2,3....;I,II,III....)
• Početni broj(za numeracione liste)
-Definicione liste omogućavaju kreiranje rečnika pojmova sa njihovim objašnjenjem.
Lista se uključuje pomoću ikone DL u Text Insert liniji.
Ili preko već opsanog: Meni-Text-List.

-Nakon uključivanja 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 vrši 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 može odrediti u pikselima ili procentima širine ekrana (što
je preporučljivo zbog različitih veličina monitora).Ovo se podešava 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 naše prezentacije,treba uraditi sledeće:
• Selektujemo tekst koji će predstavljati link i u propertis liniji u polje
link treba dati adresu na koju taj link vodi
• Izbor strane (resursa) vršimo pomoću ikone foldera -

pronalazimo dokument na koji link treba da vodi
• Možemo koristiti i pokazivač kojim možemo ukazati na sadržaj

u files(fajls) panelu
________________________________________________________________________________________
-Kada se radi link na neku spoljašnju stranicu,potrbno je upisati kompletnu

html adresu(URL).PR.: http://www.Google.com
-Otvaranje linka u novom prozoru čitača vrši 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 može dobiti i korišćenjem ikone E-mail iz pomoćnog 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
veličine 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 poželjno prethodno obraditi u nekom programu za obradu slika(podesiti

rezoluciju,veličinu...)pre ubacivanja u program.
-Podešavanje već ubačene slike:
Selektovanjem slike , u Properties liniji dobijamo karakteristike slike koje možemo
podešavati:
-Na gornjoj slici vidimo da je veličina 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
znači 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 neće imati okvir.
-Ako hoćemo da linkujemo sliku na istu sliku veće veličine,tada je potrebno:
• Ubaciti odabranu sliku u folder u kome radimo aplikaciju,naravno veću nego što je ovde
• Na prethodno neki opisani način linkovanja , povezati sliku sa njenim (dosta većim)
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 smeštenom na desnoj strani u Fajl ili Assets panelu)
(U polje link je upisana slika preko ikone foldera- ).

________________________________________________________________________________________
TABELE
-Tabele se koriste za pravilan razmeštaj sadržaja na strani.

-Dobija se iz menija Common(najčešći poslovi)—Table:
Širinu tabele je zgodnije postaviti u procentima,zbog mogućnosti da jednako bude vidljiva na

svim rezolucijama monitora.
-Cell padding-označava koliko je odmaknut sadržaj ćelije od ivice ćelije.
-Cell spacing-predstavlja razmak između dve susedne ćelije.
-Selektor tagova:-<table>-selektovana cela tabela

-<tr>-selektuje jedan red
-<td>-selektuje jednu celiju
-Tabele se mogu korigovati i sa strelica koje prate svaku tabelu:
I sa kartice layot mogu se vršiti promene nad tabelama.

Podešavanja tabela se vrše upotrebom različitih atributa,i to podešavanje se može vršiti na
nivou cele tabele,reda ili jedne ćelije.
-Podešavanje se vrši iz properties linije ili iz menija Modify-Table:
Web Design-B.Simeunović - 10 -
________________________________________________________________________________________
LISTE STILOVA
-CSS-Cascading Style Sheet (kaskadna lista stilova)

-CSS predstavlja skup pravila formatiranja kojima se podešava izgled web strane.Stil se može
definisati na nivou jednog dokumenta, ili kao poseban fajl sa stilom koji se može primenjivati
na više strana.
Stilom se može definisati izgled određenog taga(p,body,h1....),a postoje i tzv. „klase“
stilova,pri čemu se klasa može primeniti na bilo koji element strane.
Podešavanje stilova se vrši iz menija Text-CSS Styles.
--
Ili sa Properties linije-Style
-Iz dijaloškog prozora Edit Style Sheet možemo povezati dokument sa nekim
postojećim stilom koga ima u obliku fajla-Attach...
Možemo definisati novi stil(na nivou stranice),ili novi fajl sa stilom i možemo menjati
postojeće stilove.
FREJMOVI(OKVIRI)
-Frameset strana je strana koja služi za podešavanje razmeštaja više različitih web
stranica u okviru jednog prozora web čitača.Time je prozor čitača podeljen na više
pravougaonih oblasti , i u svakoj od tih oblasti prikazuje se različita 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 ponuđenih tipova podešavanja.Posle toga , dobijamo jednu novu

frameset stranu(možemo promeniti veličine frejmova),kao i nove dokumente u svakom od
frejmova.
Ukoliko u dizajn režimu nije vidljiva granica između frejmova(okvira),uključujemo je iz
menija View -Visual Aids-Frame borders:
Nakon unosa sadržaja u svaki od frejmova,potrebno je snimiti celu frameset stranu(glavna)

kao i pojedinačne stranice u frejmovima(meni.dobro došli...)
-AKTIVIRANJE LINKA U ODREĐENOM FREJMU
U svakom framesetu svaki freim ima svoj naziv.Postavljanjem linka u neki od

frejmova,nije određeno u kom frejmu se taj link otvara.Potrebno je linku,pomoću atributa
Target definisati frejm u kome se linkovana stranica prikazuje(„ciljni frejm“).
Vrednosti target atributa ,mogu biti:
• Blank-aktivira link u novom prozoru čitača.
• Parent-aktiviranje linka u roditeljskom frejmu
• Self-otvara se u frejmu u kome se trenutno nalazimo
• Top-otvara se u najvišem frejmu
Podešavanje ciljnog frejma može se vršiti na nivou čitave strane-u kom frejmu će se otvoriti
svi linkovi.To se vrši pomoću taga base u hed delu stranice:
Insert-HTML-Head Tags-Base:(Ovo se radi na stranici sa menijem)
________________________________________________________________________________________
-U dijalog prozoru href ne upisujemo ništa,a za Target izaberemo Main frame
LINK NA DEO STRANE

Ako želimo da se krećemo kroz jednu web stranicu , potrebno je na toj stranici definisati
označena mesta(Insert-Named Anchor,ili ikona sidra u Common kartici)
Na ovako označena mesta moguće je praviti linkove(Insert-Hiperlink),ili na ikonicu
Ako smo napravili označena 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 obične slike podeljene na više oblasti,od kojih svaka oblast predstavlja
link na različite stranice.Oblasti mogu biti:
• Kružne
• Pravougaone
• Poligonalne
________________________________________________________________________________________
Oblast se dodaje selektovanjem slike i izborom vrste oblasti iz Properties linije,nakon
čega izabrani oblik prevučemo preko određenog dela slike
Tom delu mape se dodeljuje link (+ target,+Alt...)
...........................................................................................
HTML FORME
-Formular služi za unos podataka od strane korisnika .Uneti podaci se mogu obraditi na
više načina ,čuvati u bazama podataka na serveru,slati na određenu e-mail adresu.
Formular sadrži različite 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 obrađuje formu(Action) i način

prosleđivanja podataka(metod Get ili Post).
TEMPLATES (ŠABLONI)
Šabloni služe za upotrebu zajedničkih elemenata na svim stranama sajta.Templates se

kreira iz HTML stranice čiji dizajn i razmeštaj prihvatamo za osnovni na našem
sajtu.Kreiranje Templatea vrši se iz File-Save As Template,u trenutku kada smo već kreirali
stranicu željenog dizajna.
________________________________________________________________________________________
Templates se pridružuje nekom sajtu,daje mu se neko ime,i tada je u okviru sajta napravljen
novi folder Templates , koji sadrži fajl Templ.dwt.
U svakom šablonu se definušu oblasti koje će moći da se menjaju u stranicama zasnovanim na

šablonu.Na primer,selektujemo ćelije tabele u kojoj će moći da se vrše 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 sadržaji samo u definisanim-izmenjivim regionima,apromene

ostalih delova se mogu vršiti samo na šablonu.(dwt.fajl).Svaka izmena na šablonu inicira
ažuriranje stranica koje primenjuju taj šablon.
.........................................................................
Kontrola ispravnosti podataka u formularu:
Selektujemo Formu i iz panela Tag inspector ,na kartici Behaviors(ponašanja),izaberemo
Validate Form.Za polja formulara , ovde možemo 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 umnožimo više puta :Edit-Duplicate...i svakom od primeraka dugmeta

promenimo u properties liniji :tekst,link,target...
Izmena postojećeg simbola,vrši se dvoklikom na primerak

simbola.U simbolu se može menjati:Up,Over,Down....
Kada smo završili kreiranje svih dugmića , izvozimo slike (ili celu HTML stranicu) iz:
File-Export ....
..........................................................................................................................................
ZAVRŠNI 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 sledeće linkove:
home kontakt linkovi
koji vode na strane :

• Index.htm
________________________________________________________________________________________
• Kontakt.htm
• Linkovi.htm
6. Za stranu „index.htm“napraviti stil u posebnom fajlu(still.css),sa podešavanjem za
tagove ,<td>,<body>,<a hover>,<a link>,<activate>, 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.
Ime i prezime
Postaviti svoju sliku
Web design
Obrazovni centar
„Sveti Sava“ stil“Moja slova“
Čačak
032/342-198
Stil“Sava“,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 natpis“web design“.
-Na osnovu ovako formiranog šablona,formirati dve nove strane:kontakt.htm i
linkovi.htm (prema kojima pravimo linkove iz prve tabele).
.......................................................................................................................................................
........................................................................................................

Kurs Web Dizajn

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Kurs Web Dizajn

Uploaded by

Copyright:

Available Formats

Web Design-B.

WEB DIZAJN - I deo

-cacak.co.yu DOMEN(Ime servera)

-Najpoznatiji HTML editori su:

1.CODE(Kodni prikaz-HTML elementi)

<html> ………………………………. </html>

PR:Ovaj tekst je <b>podebljan</b> podebljan će biti ispisano bold slovima.

<body> -sadržaj dokumenta

-Za svaku od struktura treba obezbediti kvalitetnu navigaciju

-Odabrati sa liste(levo)-LOCAL INFO , i u ponuđenim poljima popuniti ime

PREGLED STRANICE U WEB ČITAČU

(koristimo <b> i <i> tagove)

-Postavljanje naslova dokumenta:

-Podešavanje karakteristika strane:

-Koristimo RGB sistem boja(Cmik model koriste štampači)

Gde se može podesiti :

Ili preko već opsanog: Meni-Text-List.

-Horizontalna linija-element koji se koristi za vizuelno razdvajanje celina stranice.

-Linkovi se mogu praviti ka stranicama trenutne prezentacije ili ka nekoj drugoj

• Izbor strane (resursa) vršimo pomoću ikone foldera -

• Možemo koristiti i pokazivač kojim možemo ukazati na sadržaj

-Kada se radi link na neku spoljašnju stranicu,potrbno je upisati kompletnu

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

-Isto se može dobiti i korišćenjem ikone E-mail iz pomoćnog menija Common

Web grafika-rad sa slikama

-Sliku je poželjno prethodno obraditi u nekom programu za obradu slika(podesiti

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

-Tabele se koriste za pravilan razmeštaj sadržaja na strani.

Širinu tabele je zgodnije postaviti u procentima,zbog mogućnosti da jednako bude vidljiva na

-Selektor tagova:-<table>-selektovana cela tabela

I sa kartice layot mogu se vršiti promene nad tabelama.

-CSS-Cascading Style Sheet (kaskadna lista stilova)

-Izaberemo jedan od ponuđenih tipova podešavanja.Posle toga , dobijamo jednu novu

Nakon unosa sadržaja u svaki od frejmova,potrebno je snimiti celu frameset stranu(glavna)

-AKTIVIRANJE LINKA U ODREĐENOM FREJMU

U svakom framesetu svaki freim ima svoj naziv.Postavljanjem linka u neki od

-U dijalog prozoru href ne upisujemo ništa,a za Target izaberemo Main frame

LINK NA DEO STRANE

Na ovako označena mesta moguće je praviti linkove(Insert-Hiperlink),ili na ikonicu

Ako smo napravili označena mesta,tada se u listi sa linkovima pojavljuju ta mesta.Link na

-Forma ima svoje ime-form name,dokument koji obrađuje formu(Action) i način

Šabloni služe za upotrebu zajedničkih elemenata na svim stranama sajta.Templates se

U svakom šablonu se definušu oblasti koje će moći da se menjaju u stranicama zasnovanim na

Iz tog šablona kreiramo nove HTML strane: File-New – Templates(kartica)-odabrati

Na stranicama se mogu dodavati sadržaji samo u definisanim-izmenjivim regionima,apromene

-Nacrtamo objekte koji čine dugme(pravougaonik,krug....) i podesimo format tih

-Dobijeni simbol umnožimo više puta :Edit-Duplicate...i svakom od primeraka dugmeta

Izmena postojećeg simbola,vrši se dvoklikom na primerak

1. U folderu i-06 kreirati folder „test“

koji vode na strane :

You might also like