- Veba 7 -

UVOD U MACROMEDIA DREAMWEAVER 8

OTVARANJE NOVOG WEB DOKUMENTA
PODEAVANJE SVOJSTAVA WEB STRANICE
UBACIVANJE TABELA NA WEB STRANICU
PODEAVANJE SVOJSTAVA TABELE
RAD SA TEKSTOM
 1

Uvod u Macromedia Dreamweaver 8

Da biste mogli napraviti Web sajt, kao i u svemu, najbolje je koristiti odgovarajui alat. U
ovom sluaju to su tzv. Web editori, koji se dele u dve osnovne grupe i to: Editori kda
namenjeni su onima koji poznaju HTML jezik, i mogu Web stranicu praktino napisati
upisivanjem jednog po jednog taga. Za veinu ostalih korisnika interesantniji e biti vizuelni
Web editori kao to su Microsoft FrontPage, Macromedia Dreamweaver, Cute SiteBuilder i
drugi. Ovi programi pojednostavljuju pravljenje Web stranica tako to pisanje kda
preuzimaju na sebe, a rad na stranici pribliavaju radu u nekom od grafikih programa. U
njima ete po telu stranice pomerati razliite objekte i ureivati njihov izgled, a program e na
osnovu toga generisati HTML kd.
Ako prvi put pokreete Dreamweaver, pojavie se prozor dobrodolice sa informacijama za
nove korisnike, kao i skup novih mogunosti za one koji ve poznaju program. Otvaranje
novog HTML dokumenta vri se preko opcije HTML iz opcije Create New.

Kada prvi put pokrenete novi dokument u Dreamweaveru videete glavni prozor, koji se zove
Document, i nekoliko panela (slika 1).

Slika 1.

Najvei deo posla obavlja se u prozoru dokumenta, gde moete ubaciti, promeniti i izbrisati
elemente od kojih se sastoji Web strana. Nova strana se podrazumevano zove Untitled
Document , to se moe videti u naslovnoj traci dokumenta (polje Title).

U Dreamweaveru postoje tri naina prikaza :

Design View - Pogled Design je dizajnersko okruenje za vizuelni raspored strane,

vizuelno editovanje i brzi aplikacioni razvoj,
Code View - Pogled Code je runo kodirajue okruenje za pisanje i editovanje
HTML-a, JavaScript-a, jezika servera i bilo kog drugog kda,

2
 1

Split Design i Code - Pogled Split omoguava da se vidi i dizajn i kd istog dokumenta
u istom prozoru.

.
Code Design

Split

Prozor Properties se koristi za pregled i menjanje atributa (svojstva) izabranog (selektovanog)

elementa stranice odnosno teksta, slika, tabela. Njegov sadraj se menja u zavisnosti od
izabranog elementa u prozoru dokumenta.

Otvaranje novog Web dokumenta

1. Izaberite iz fajl menija opciju File / New.

2. Sa kartice General dijaloga prozora New Document, u listi Category izaberite opciju
Basic Page.
3. Nakon prikaza liste Basic Page, izaberite prvu opciju odnosno HTML i kliknite na
dugme Create.
4. Iz File menija izaberite File / Save As.

3
 1

5. U dijalog prozoru Save As sauvajte stranicu pod nazivom proba.html.

6. U tekst polju Title na vrhu dokumenta upiite naslov stranice (npr.proba)-slika 2.

Slika 2.

Podeavanje svojstva Web stranice (Page Properties)

Naslov stranice, boja pozadine, pozadinska slika, tekst, boje linkova, margine su osnovna
svojstva svakog web dokumenta. Podeavanje ili promenu ovih svojstava moete izvriti
preko opcije Page Properties u prozoru Properties. Drugi nain je otvaranjem odgovarajue
komande iz File menija.

1. Izaberite komandu Modify / Page Properties iz File menija, ili klikinite na Page
Properties dugme u prozoru Properties.
2. Otvorie se dijalog prozor Page Properties (slika 3)

Slika 3.

3. Iz liste Category izaberite opciju Appearance.

4. U opciji Page font, Size, Color moete podesiti vrstu, veliinu i boju fonta.
5. U opciji Background color birate boju pozadine.
6. U opciji Background image birate pozadinsku sliku. Ako je za pozadinu izabarana
slika onda ona treba da predstavlja mali grafiki objekat, ijim kopiranjem se
popunjava cela strana. Strana moe imati definisanu boju i sliku za pozadinu. Ako je

4
 1

veza korisnika sa Internetom spora, prvo e biti prikazana boja pozadine a zatim se
uitava slika koja prekriva boju pozadine. Ako se ne snimi datoteka odmah po
otvaranju dokumenta, u polju Background image se prikazuje cela putanja izabrane
slike na disku. Zato se treba voditi rauna da se datoteka snimi pre uvoenja bilo
kakvog sadraja strane, ak i slike za pozadinu.
7. Opcija Repeat omoguava podeavanje naina ponavljanja pozadinske slike.
8. Pri otvaranju novog dokumenta u Design modu poloaj kursora je po default-u
podeen na 10 pixela od vrha, odnosno leve strane prozora dokumenta. Da bi se
izvrilo podeavanje poloaja kursora na web dokumentu u poljima za margine Left
margin, Right margin, Top margin, Bottom margin upisuje se odgovarajua vrednost.
Ukoliko elimo da poetak web stranice bude u koordinatnom poetku (gornji levi
ugao) potrebno je margine podesiti na vrednost 0.
9. U okviru dijalog prozora Page Properties vri se i podeavanje kodnog rasporeda Web
stranice.
10. Iz liste Category izaberite opciju Title/Encoding. (slika 4)

Slika 4.

11. U polju Title moemo upisati naslov stranice ukoliko to nije uraeno u okviru Title
tekstualnog polja koji se nalazi na vrhu Document prozora (slika 2) .
12. Za kodni latinini raspored koristimo Central European (Windows). Ako elimo da ne
zavisimo od klijentskog raunara i njegovog kodnog rasporeda onda biramo Unicode
(UTF-8) koji omoguava itanje bilo kog pisma (irilice, glagoljice, kineskog i dr).

5
 1

Ubacivanje tabela na web stranicu

Jednostavne Web strane brzo se prave smetanjem teksta i slika neposredno na stranu.
Meutim, tabele pruaju vie mogunosti za razmetanje elemenata na strani. One
omoguavaju predstavljanje informacija na organizovan nain, jer sadre redove i kolone
elija u koje se smeta sadraj. Vie elija moe se objediniti u velike elije. U poetku su
tabele koriene za jednostavniji prikaz tabelarnih podataka, kao to su razni izvetaji i
slino, ali su mudri dizajneri ubrzo shvatili da bi tabele mogli da iskoriste i za poveanje
mogunosti dizajniranja, kako bi se obezbedio vei stepen kontrole nad rasporeivanjem
elemenata i razmaka meu njima. Tabele su podeljene na redove, koji prolaze horizontalno
kroz tabelu i kolone koje se proteu vertikalno kroz tabelu

1. Iz File menija izaberite komandu Insert / Table.

2. Otvara se dijalog prozor Table (slika 5).
3. U okviru dijalog prozora Table treba izvriti sledea podeavanja:
o Rows broj redova.
o Columns broj kolona tabele.
o Width irina tabele u pikselima ili procentima irine prozora browsera.
o Border debljina ivice tabele. Podrazumevana vrednost je 1.
o Cell Padding razmak izmeu sadraja tabele i njenih ivica. Ako uopte
neete razmak izmeu sadraja elija tabele i njenih ivica upiite 0 u ovo polje.
o Cell Spacing razmak izmeu elija tabele, ne raunajui ivice. Ako uopte
neete razmak izmeu elija tabele upiite 0 u ovo polje.

Slika 5.

4. Nakon upisavanja vrednosti kao na slici 5 kliknite Ok u Design prikazu dobiete

tabelu kao na slici 6.

6
 1

Slika 6.

5. Da biste odselektovali tabelu klikinite miem sa strane.

6. Pozicionirajte se ispod prve tabele i ubacite drugu tabelu postavljajui iste parametre
kao i kod prve.
7. Na kraju ubacite i zadnju tabelu-treu koja treba da ima jedan red, jednu kolonu ,
irina je 960 px , cellpadding i cellspacing = 0.
8. Nakon ubacivanja sve tri tabele vaa stranica e da izgleda kao na slici 7.

Slika 7.

Napomena: Nakon ubacivanja tabela moete videti Table selektor (zelena linija). Klikom
van tabele moete postii da Table selektor nestane. Takoe moete da onemoguite prikaz
Table selektora (zelena linija) izborom komande View/Visual Aids/ Table Widths.

Pratei pravila efikasnog i dobrog dizajna, stranicu treba podelili na logike celine (slika 8).
Prva tabela je tabela u koju se uobiajno ubacuje slika koja predstavlja baner i slika koja
predstavlja logo tako da u ovom sluaju ova tabela ima jedan red i jednu kolonu. irina tabele
je podeena na 960 piksela jer monitori sada dostiu rezoluciju i do 1024x768 piksela. Visinu
tabela nemojte podeavati povlaenjem ivica. Kada se ubaci bilo koji objekat, tabela e sama
da podesi svoju visinu prema visini tog objekta. Jedino terna da imate na umu da zaglavlje
stranice (prva tabela) treba da ima visinu do 80 piskela.

Slika 8.

7
 1

Podeavanje parametara tabele

Pre nego to ponete sa podeavanjem svojstava tabele, ukljuite tzv. Expanded Tables mde,
karakteristiku koja privremeno doddaje cell padding i spacing tabeli i poveava bordere kako
bi se lake pozicionirali u pravu eliju.

1. Iz File menija izaberite opciju View / Table Mode / Expanded Table Mode. (Slika 9.)
Expanded Table Mode nije WYSIWYG (ono to vidi je ono to dobije) okruenje,
tako da posle podeavanja parametara tabele treba da se vratite u Standardni mod.

Slika 9.

Podeavanje irine i visinu kolone ili reda tabele

1. Postavite kursor u eliju tabele ije dimenzije elite da podesite.

2. U donjem levom uglu prozora Document nalazi se bira HTML oznaka Tag
Selector. U njemu se hijerarhijski prikazuju HTML oznake koje pripadaju trenutno
izabranom elementu. Ova alatka omoguuje brzo kretanje kroz kod strane, elemente sa
kojima radite i lako biranje ostalih elemenata. Poetna HTML oznaka je uvek tag za
telo stranice - <body>.

3. Pomou selektora tagova izvriti selekciju kolone iju irinu elite da podesite
4. U Properties prozoru u polje W upiite odgovarajuu vrednost.
5. Ukoliko elite da podesite visinu reda ili kolone postupak je isti samo to vrednost
upisujete u polje H u Properties prozoru. (Slika 10.)

8
 1

Polja za podeavanje visine i irine (H, W)

Slika 10.

Podeavanje pozadinske boje kolone ili reda tabele

1. Postavite kursor u eliju iju pozadinsku boju elite da podesite.

2. Pomou tag selektora selektujete red ili kolonu koju podeavate.
3. U Properties prozoru kliknite na ikonu za podeavanje pozadinske boje (Slika 11)

Slika 11.

4. Podeavanje pozadinske boje se moe vriti i upisivanjem heksadecimalnog koda u

tekstualnom polju pored opcije Background Color.

Rad sa tekstom
Tekst se moe dodati kopiranjem i prenoenjem iz drugog dokumenta. Na primer,
Dreamweaver moe da otvori Microsoft Word dokument, ako je bio snimljen kao tekstualna
datoteka (sa ekstenzijom .txt) ili kao HTML dokument. Tekst u Microsoft Word dokumentu
moete sauvati kao HTML izborom opcije Save as Web page iz padajueg menija File. Kada
otvorite tekstualnu datoteku u Dreamweaveru, tekst moete kopirati i preneti na vaim
stranicama.

Ukoliko elite da posetioci itaju va sadraj stranica, obezbedite razdvajanje pasusa i

dovoljno belog prostora poto odmara oi. Tekst ne treba da bude ni predugaak ni preirok
(kratka forma), gde sa malo rei treba saoptiti najbitnije informacije. Istraivanja su
pokazala da ovek ita 25% sporija na monitoru, nego to to radi na papiru. Nikad ne
podvlaite rei, jer takvo formatiranje navodi na fontove. Pet vrsta fontova imaju najbolju
itljivost na ekranu i zastupljenost na raunarima, a to su: Arial, Verdana, Times New Roman,
Tahoma i Courier. Serif fontovi ( Times New Roman, Georgia,...) se uglavnom koriste za
naslove i vee natpise. Sans-Serif (Helvetica, Verdana, Arial,) koriste se za tekst sadraja.
Korienje vie razliitih fontova na stranicama pravi nered i konfuziju. Standard je da se
koriste najvie tri razliita fonta na stranici: jedan za naslove, jedan za navigaciju i podnaslove
i jo jedan za tekst sadraja. Veliina fonta osnovnog teksta ne bi trebalo da bude manja od 10
pixela. Duina reda teksta ne bi trebalo da bude vea od 11 rei.

9
 1

Web strane e biti zanimljivije i lake za itanje ako primenjujete font kojim se prikazuje
tekst. Da bi posetilac vaeg sajta video stranu onako kako ste je napravili, mora na svom
raunaru imati instaliran font koji ste koristili. Nemojte misliti da svi korisnici imaju sve
fontove. Kombinacije instaliranih fontova ine da browser prikazuje tekst u drugom fontu.
Ako prvi font u spisku fontova nije instaliran, browser e pokuati da upotrebi drugi, a na
kraju i rei. Ako nijednog od tih fontova nema na korisnikovom raunaru, tekst se prikazuje u
podrazumevanom fontu browsera. Kombinacije fontova (kao to su Arial, Helvatica, San-
serif) predstavljaju podrazumevane fontove koji savaki operativni sistem poseduje.

Kombinaciju fontova moete da promenite kada izaberete font sa padajue liste Font u
prozoru Properties (slika 12). Takoe u Properies prozoru moete promeniti i veliinu fontova
u polju Size. Da biste istakli odreene stavove, rei ili izraze, u Dreamweaveru moete na
tekst primeniti vie opcija formatiranja.

To su:
polucrni (podebljani) ispis - bold,
kurzivni ispis italic,
podvlaenje underline.

Slika 12.

Pri svakoj promeni teksta, Dreamweaver 8 automatski kreira stilove dodajui im imena
Style 1, Style 2, Style 3,...Na slici je prikazano kako se deo teksta NAZIV SAJTA nalazi
unutar oznaka <span class=Style 1> i </span>. (slika 13)

10
 1

Slika 13.

Ovu opciju Dreamweavera 8 da prilikom formatiranja teksta se automatski kreiraju CSS

stilovi moete da iskljuite pomou opcije Edit/Preferance/General-odselektovati opciju
Use CSS instead HTML tag (slika 14).

Slika 14.

Dreamweaver omoguuje pravljenje dve vrste spiskova (listi):

neureenu unorder list,
ureenu order list.

Ureena lista sadri stavke odvojene rednim brojevima ili slovima abecede, i poreene u
numerisanim, odnosno abecednim spisak. Mogu da se koriste arapski ili rimski brojevi,
odnosno velika ili mala slova abecede.

11
 1

U neureenoj listi ili listi nabrajanja svaka stavka poinje znakom za nabrajanje (bulletom).
Podrazumevani znak za nabrajanje je pun krug.

ZADATAK ZA SAMOSTALAN RAD:

Napraviti stranicu pod nazivom vezba7.html. Podesiti kodni raspored (latinini), boju
pozadine na #F4F4F4.

Stranica treba da izgleda kao na slici 15 sa sledeim podeavanjima:

Tabela za zaglavlje irine 960px, visine60px, boja #9966FF.
Unutar tabele dodati tekst NAZIV SAJTA ( veliina:7, font: Verdana, boja: bela)
Tabela za sadraj - irine 960px:
o prva kolona - irine 150px, boja #CCCCCC. Unutar elije dodati tekst
Link1,Link2 i Link3 kao neureenu listu.
o druga kolona irine 450 px,
o trea kolona - irine 100px, boja #333366
tabela za podnoje - irine 960px,visine30px, boja crna.

Tekst Naslov treba da bude formatiran kao Heading 2 a tekst podnaslov kao Heading 3.
Tekst za popunu sadraja moete preuzeti iz Word dokumenta materijal_za_vezbu7.doc.

VODITI RAUNA O NAINU ORGANIZACIJE DELA STRANICE U KOJEM SA

NALAZI SADRAJ!!!!!!!!

Slika 15.

12