Kod otvaranja programa DREAMWEAVER 4 pokazuje nam se osnovni prozor s dva

gornja i jednim donjim Toolbar-om.

U drugom gornjem Toolbar-u imamo prikazana tri glavna gumba koji nam svojim
otvaranjem prikazuju stranicu na kojoj trenutno radimo i to u sljedeća tri modela :

 prvi gumb – kodni zapis stranice

 drugi gumb – grafički i kodni zapis stranice
 treći gumb – grafički zapis stranice

Prilikom izrade prve stranice potrebno je prvo definirati istu.Definiranje stranice

vršimo na način da u prvom Toolbar-u otvorimo izbornik SITE i u njemu otvorimo
prozor s nazivom DEFINE SITES.Unutar toga prozora vršimo definiciju stranice
upisivanjem njezinih imena i root direktorija gdje će biti spremljena.

Da bismo odredili osnovne parametre stranice kao što su ime, boja pozadine i ostalo,
moramo na gornjem layer-u otvoriti izbornik MODIFY.Unutar toga izbornika nalazi
se podizbornik s nazivom PAGE PROPERTIES.U njemu namještamo sve spomenute
parametre stranice.
Važno je da prije početka rada stranice otvorimo prozore OBJECTS i PROPERTIES
koji se nalaze unutar izbornika WINDOW.Oni služe za otvaranje daljnih alata za rad
na stranicama i za definiranje istih.
 OBJECTS
PROPERTIES

PODEŠAVANJE FRAMESET-ova

Kod početka rada na osmišljavanju neke stranice potrebno je prvo postaviti

FRAMESET-ove.Postavljanje istih izvodi se unutar prozora OBJECTS.Na vrhu tog
prozora nalazi se crna strelica koja pritiskom otvara meni sa sedam ponuđenih
prozora.Klikom na FRAMES otvaramo prozor za određivanje FRAME-ova na našoj
početnoj stranici.Odabirom jedne od ponuđenih postavki FRAME-ova postavljamo
isti na našu stranicu.Također imamo mogućnost da postavljamo FRAME-ove unutar
njih samih.Možemo i kopirati graničnik pojedinih FRAME-ova na taj način da
dobijemo neki novi FRAME.To radimo tako da strelicu miša postavimo na graničnik
FRAME-a i stisnemo (držimo) ALT na tastaturi te mišem vućemo isti graničnik na
poziciju koju želimo.

KONTROLNI PROPERTIES PROZOR S

PROZOR FRAMESET-ovima
FRAME-ova
(FRAMES)

Da bismo mogli kontrolirati FRAME-ove moramo otvoriti u izborniku WINDOW

prozor FRAMES.Unutar toga prozora možemo vidjeti položaj FRAME-ova i
određivanjem FRAME-a pritiskom na isti unutar prozora raditi na njemu.

Primjećujemo da se u prozoru Properties mijenjaju podaci o samim FRAME-ovima

ovisno o tome kojeg odredimo unutar prozora FRAMES.
Svakom od FRAME-ova možemo mijenjati njegova svojstva unutar prozora
PROPERTIES : ime (dobro je odmah na početku odrediti imena), source (stranicu
koju učitava), scroll, no resize (zabrana promjene veličine i širine), borders i border
color (vidljivost graničnika i njegova boja), te visina i širina Margina.

Pritiskom na zajednički okvir svih FRAME-ova (unutar prozora FRAMES) možemo

mijenjati samo njihova određena svojstva : borders i border color (vidljivost
graničnika i njegova boja), border width (širina graničnika), value (column)
(vrijednost-širina Frame-a), units (mjere u pixelima, postotcima ili relativna (Frame
se širi ovisno o sadražaju)).Na desnoj strani prozora imamo mogučnost određivanja
Frame-a na kojem radimo (unutar prozora)

Upisom nekog teksta u sami Frame (tabelu,layer itd) moguće je mijenjati vrijednosti
tog istog teksta prema sljedećim parametrima : format (biranje formata teksta i
promjena fonta), size (veličina), boja (bold,italic centriranje),link (određivanje
stranice koja se poziva – postavljenje teksta u link funkciju), target (pozicija gdje će se
pozvana stranica otvoriti), buleting itd.

Veličina FRAME-a se može namještati i ručno ali se to ne preporuča.

Relativna veličina FRAME-ova ovisi o rezoluciji monitora i o radu (tj.sadržaju)
stranice.
Glavni FRAME je većinom fiksni, a okolni su relativni.
FRAMESET-ovi se uvijek posebno snimaju.

Pogledati :

Primjer 1 – U primjeru 1 možemo vidjet Frameset s gornjim i donjim Frame-om.U

gornjem Frame-u smještena su tri tekstualna linka gdje pritiskom na svaki od tih
linkova pozivamo određenu stranicu koja se prikazuje u donjem Frame-u.

Vježba 1 : Prema prikazanom primjeru složiti FRAMESET s četiri Frame-a.

RAD S TABLICAMA i SLIKAMA (Image)

U prozoru OBJECTS nalazi se prozor COMMON unutar koje se nalazi ikona INSERT
TABLE pomoću koje ubacujemo tablice u stranicu koju radimo.Pritiskom na ikonu
INSERT TABLE otvara nam se prozor Insert table u kojemu možemo određivati
stupce (COLUMNS) i redove (ROWS) u tablici koju kreiramo.Također određujemo :
cell padding i cell spacing -(razmak između čelija,udaljenost sadržaja čelije od
njenog lijevog i gornjeg ruba), border (veličinu graničnika), width (širinu tablice-u
postocima ili pixelima).

 Vrijednosti tablice se određuju unutar prozora PROPERTIES.Kada tablicu

obuhvatimo u cjelini onda u Properties prozoru određujemo parametre za
cijelu tablicu.Table name (ime tablice), rows i cols (broj redova i stupaca),
width (širina), height (visina), cell spacing (razmak između čelija u
pixelima), cell padding (udaljenost sadržaja čelije od njenog lijevog i gornjeg
ruba), align (razmještaj u odnosu na stranicu), border (debljina graničnika),
bg color (boja pozadine), brdr color (boja graničnika), bg image (mogučnost
smještanja određenog lika unutar tablice).Također tu nalazimo četiri gumbića
koji redosljedom označuju : brisanje visine reda, brisanje širine stupca,
prebacivanje širine tablice u pixele prebacivanje širine tablice u postotke.
  Pritiskom na određenu čeliju tablice obrađujemo tekst i samu tablicu. Sve se
to radi unutar novog PROPERTIES prozora koji ima dva dijela. Gornji dio. :
format (biranje formata teksta i promjena fonta), size (veličina), boja
(bold,italic centriranje),link (određivanje stranice koja se poziva – postavljenje
teksta u link funkciju), target (pozicija gdje će se pozvana stranica otvoriti),
buleting .Donji dio : prva dva gumbića imaju funkciju spajanja i rastavljanja
čelija po redovima, horz i vert (određivanje pozicije sadržaja tablice –
osnovno,lijevo,centar i desno) W i H (širina i visina selektiranih tablica), bg
(mogučnost smještanja određenog lika unutar tablice), bg color (boja pozadine
selektirane tablice) i brdr (graničnik).

Kod tablica također imamo mogučnost ubacivati slike različitih formata.Jedan od

najraširenijih je JPG,a upotrebljavaju se još GIF i PNG formati.

 U PROPERTIES prozoru također imamo mogučnost promjene svih

parametara i funkcija slike unutar tablice.Značenja prozora su sljedeća : prvi
prazan red je ime slike, W i H (širina i visina slike), src (adresa od kuda je slika
učitana), link (slici se daje svojstvo linka-u prazno područje se upisuje ili
ubacuje pomoću browse to file/point to file (ti gumbići su prisutni skoro u svim
PROPERTIES prozorima) gumbića stranica koja se otvara ako pritisnemo na
sliku), align (poravnanje slike i slova unutar tablice), ALT (tekst koji upišemo
u ovo polje biti će vidljiv kao alternativni tekst kada stavimo pokazivać miša
na bilo koji dio slike).Donji dio Properties prozora namijenjen je radu s
ImageMap funkcijama.ImageMap se koristi za isjecanje pojedinih dijelova
«slike»(objekta) pomoču Hotspot Tool-a.Obkekt se rascijepa na željeni broj
dijelova i svakom dijelu se daje mogučnost da bude link.Map (ime mape), V
Space (okomita pozicija slike (objekta) unutar tablice u odnosu na gornji i
doljnji rub tablice), H Space ( vodoravna pozicija slike (objekta) unutar tablice
u odnosu na ljevi i desni rub tablice), target (funkcija se koristi za određivanje
pozicije gdje će se upisati pozvana(link)stranica-link slike (objekta) mora biti
definiran), Low Src (definira image koji će biti upisan prije glavog image-a),
border (širina graničnika oko objekta), edit (otvara image editor definiran u
 External Editor Preferences), reset size (resetira visinu i širinu objekta u
početne vrijednosti).

 Tri simbola (gumbića) koji se nalaze na donjem dijelu prozora služe za

kreiranje image mapa.Pritiskom na jedan od simbola dobivamo mogučnost da
na objektu (slici) označimo područje koje želimo pretvoriti u ImageMap.Kada
to učinimo pojavljuje na se prozor za rad s ImageMap-ama.

 Tu nam se nudi novi Properties prozor koji u sebi sadržava : link (adresa File-
a koji se poziva pritiskom na selektirano ImageMap područje na slici), target
(pozicija na kojoj se taj File otvara), alt (tekst koji upišemo u ovo polje biti će
vidljiv kao alternativni tekst kada stavimo pokazivać miša na dio slike
selektiran ImageMap funkcijom).
 Map (ime mape), strelica (alat za selektiranje).

Prilikom ubacivanja dokumenta izrađenog u Flash programu pokazuje nam se

sljedeći prozor (prozor se pojavljuje kod selektiranja Flash dokumenta unutar
Dreamweaver-a).

 Sadržaj Properties prozora : prva prazna kućica (ime flash dokumenta (filma)),
W i H (visina i širina filma u pixelima-također se može staviti mjera u pc
(picas), pt (points), in (inches), mm (millimeters), cm (centimeters), ili %
(percentage of the parent object's value)), file (ime file-a koji je selektiran),
align (smještaj filma na starnici), bg (boja pozadine), ID (definira opcionalne
ActiveX ID parametre), V i H space (određuje širinu bijelog prostora (u
 pixelima) koji okružuje film), quality (određivanje parametara kvalitete filma),
scale (namještanje parametara skale za selektirani film), autoplay (pokreće
film odmah po učitavanju stranice), loop (ponavljanje filma uzastopce), reset
size (postavljanje filma u početne mjere), play (pokretanje filma), parameters
(upisivanje posebnih parametara za Flash dokumenat).

Ne preporuča se mijenjati vrijednosti tablica ručno (pomoću miša).

Tablice nam odlično služe za ubacivanje slika napravljenih u npr.Photoshopu.Kod
takvog ubacivanja slika se u Photoshopu rastavi na nekoliko dijelova i tako se stavlja
u tablice na stranici koju radimo.Sve se to radi zbog bržeg učitavanja stranice jer
učitava se dio po dio slike (u tablici).

Pogledati :

Primjer 2
Primjer 2a
Primjer 2b
U primjeru 2 možemo vidjeti jedan običan primjer tablice s nekoliko redova i
stupaca.U primjeru 2a vidimo početnu stranicu Vašeg obrazovnog centra s
elementima tablice u koju se umeću slike JPG formata.Primjer 2b nam pokazuje
izvedbu stranice s upotrebom ImageMap-a.

Vježba 2 : Prema prikazanom primjeru složiti istu stranicu

Vježba 2a: Prema prikazanom primjeru složiti istu stranicu

CSS (Cascade,Style,Sheets)

Dio DREAMWEAVER-a koji služi za obradu teksta.

Djelimo ga na :
a) Interni CSS- podaci o fontovima i bojama nalaze se u <HEAD> naredbi
b) Externi CSS – podaci o fontovima spremljeni su u file-u s .CSS
nastavkom (pozivanje na externi CSS vrši se iz HTML-ova koji su
definirani da se pozivaju)

CSS djelimo po tipu na :

 1) CUSTOM STYLE – služi za definiranje izgleda pasivnog texta u HTNL
dokumentu (tekst na kojem se ništa ne radi)
2) CSS Selector – služi za definiranje izgleda tekstualnog linka na stranici, a
sadrži sljedeće naredbe :

ACTIVE – izgled aktivnog linka

HOVER – izgled linka kada je miš iznad njega
LINK – izgled neposjećenog linka
VISITED – izgled posjećenog linka

Da bi smo radili na samom tekstu moramo unutar izbornika WINDOW otvoriti

prozor CSS STYLES.U tom prozoru imamo tri najvažnija gumbića koji se nalaze na
njegovom dnu.
 Edit Style
New Style Sheet

Attach
Style
Sheet

Prvi gumb je Attach Style Sheet i služi za stavljanje novo definiranog CSS-a u već
postojeći CSS file.Drugi gumb je New Style i služi za stvaranje nove definicije CSS-a
(novog CSS file-a).Treći gumb je Edit Style Sheet i služi za editiranje (uređivanje)
određenog CSS file-a.

VAŽNO!!! – Moguć je samo jedan izgled linka po stranici

Pogledati :

Primjer 3 – u primjeru 3 vidimo upotrebu CSS-a pri definiranju izgleda naslova i

samih linkova, gdje linkovi imaju četiri stanja (izgleda).Kada se stranica otvori oni su
zelene boje (određenog fonta).Prijelaskom strelice miša preko linka on se širi prema
određenoj veličini i mjenja boju (određenog fonta).Kada je taj link otvoren opet ima
drugu boju (određenog fonta).Kada se upotrebljava drugi link, upotrbljeni link je
opet druge boje (određenog fonta).

Vježba 3 : Prema prikazanom primjeru složiti istu stranicu

LAYER

Kod LAYER-a je bitno posebno svojstvo da se može pozicionirati točno u pixel na

ekranu.
Smješta se po principu x,y koordinata.Layer-i se na stranicu unose (iscrtavaju) tako
da se u prozoru OBJECT-COMMON klikne na ikonu DRAW LAYER i na stranici
pomoću miša iscrtaju okviri zamišljenog Layer-a.Kada je to učinjeno na ekranu će se
pojaviti okvir Layer-a koji na gornjem lijevom kutu ima mali kvadratić pomoću kojeg
se selektira taj Layer.
 Kvadratić za
selektiranje
Layera

Samim selektiranjem u prozoru PROPERTIES se pojavljuju parametri tog Layer-a.

PROPERTIES prozor sadržava

 naziv,
 koordinatni smještaj unutar stranice (L i T),
 visinu i širinu (W i H),
 Z-index (onaj Layer koji ima manji index taj je udaljeniji),
 vis (visibiliti - vidljivost Layera),
 bg image (pozadinski slika)
 bg color (pozadinska boja)
 TAG (definira HTML TAG-ove koji će se upotrebljavat)
 overflow - ako stavimo visible-Layer se širi prema količini sadržaja
-ako stavimo hidden – višak sadržaja koji dimenzijama širi
Layer biti će odrezan
-ako stavimo scroll – onda sa strane Layera dobivamo scroll
bar-ove za pomicanje
 clip – udaljenost sadržaja od ruba Layer-a ( vrijednosti L,T,R,B)

Unošenje teksta u Layer-e vrši se pritiskom miša na Layer i unošenjem istoga:Kada

kliknemo na Layer radi unošenje teksta automatski nam se pali Properties prozor za
tekst.

Pogledati :

Primjer 4
Primjer 4a
Primjer 4b – U primjerima 4 do 4b možemo vidjet pet različitih izvedbi Layera.Layer
na Layer-u; prelazak strelice miša preko slike uključuje Behaviours funkciju Layer-a;
pritiskom miša na sliku mijenja se Behaviours funkcija Layer-a.

Vježba 4 - Prema prikazanom primjeru složiti istu stranicu

BEHAVIORS

BEHAVIORS su različite već unaprijed definirane funkcije koje se rade u JAVI i

stavljaju u DREAMWEAVER.
Pokretanje funkcija se vrši otvaranjem izbornika WINDOW i odabirom prozora
BEHAVIORS.

U tom prozoru nalazimo dva važna gumbića + i - koji se koriste za ubacivanje

ponašanja nekog objekta.U ovom slučaju radimo s definiranjem ponašanja Layer-a.

 Ubacimo tablicu i unesemo npr.sliku u tablicu koju

selektiramo.Napravimo jedan Layer i damo mu naziv.Slika u tablici
mora biti selektirana.Pritisnemo li gumbić + otvara nam se izbornik u
kojem biramo prozor (funkciju) SHOW-HIDE LAYERS.
  Unutar tog prozora nalazimo ime Layera na kojeg se odnosi ponašanje
koje određujemo.Pritiskom na gumbić SHOW,HIDE ili DEFAULT
određujemo šta će se dogoditi s imenovanim Layer-om.Pritisnemo
OK.Sada unutar prozora BEHAVIORS u ACTIONS stupcu označimo
događaj i u lijevom stupcu EVENTS pritisnemo strelicu i dobivamo
izbornik s TRIGGER(EVENT) funkcijama.

Otvaranje izbornika s
TRIGGER (EVENT)
funkcijama

 Odabirom funkcije npr. ON MOUSE OVER, prelaskom strelice miša

preko slike u tabeli, na stranici se pojavljuje Layer.Važno je u
PROPERTIES prozoru od Layer-a funkciju vis staviti na vrijednost
hidden, da bi Layer bio nevidljiv kod otvaranja stranice.Istim
postupkom možemo postaviti da se Layer ugasi (nestane) kada strelica
miša izađe izvan okvira slike ON MOUSE UP.

Pogledati :

Primjer 4c – pritiskom na sliku mjenjaju se Layer-i u koje su uneseni tekstualni

podaci n abijeloj podlozi.

Vježba 4a- Prema prikazanom primjeru složiti sličnu stranicu

TIMELINE
Timeline – animiranje objekata na HTML dokumentu u DREAMWEAVER-u uz
pomoć JAVA SCRIPT-a.
Putem Timeline-a obrađujemo (animiramo) isključivo LAYER-e.Kod animacije nekog
objekta prvo moramo odrediti početnu i krajnu poziciju tog istog objekta.

Bitan je vremenski raspon između objekata.Koristi se jedan Layer po jednome

TIMELINEU.Rasponi vidljivi u TIMELINEU (5-10-15 itd) su vremenske
crte.Animacija se definira tako da se Layer koji se želi animirati preseli u Timelines
prozor i smjesti u prvi red.Vremenska crta uvijek ima početnu i krajnu točku (ključne
točke).

VAŽNO!!! - Poziciju Layera u vremenskoj crti možemo definirati samo u ključnoj

točki.Prostor između dvije ključne točke su međuanimacije koje definira
Dreamweaver.

Unutar prozora Timeline nalazimo kućicu FPS-trajanje animacije, AUTOPLAY-

timeline počinje odmah po učitanju stranice , LOOP – neprestano trajanje animacije.

Pogledati :

Primjer 5 : u ovom primjeru vidimo tri Layera, svaki od njih ima svoju vremensku
crtu i giba se u svojem smjeru.
Vježba 5 : Prema prikazanom primjeru složiti istu stranicu

FORMS (Formulari)

U programu također možemo izraditi razne formulare koji se koriste za slanje naših
podataka na određeni server gdje se oni obrađuju.Za izradu tablica potrbno je u
prozoru Objects odrediti poglavlje FORMS i u njemu izabrati sljedeće:

 TEXT FIELD – polje namjenjeno za upisivanje podataka.Properties prozor

sadržava : textfield (unos imena), char width (broj simbola koji se unose a biti
će vidljivi unutar određenog okvira – širina okvira), max chars (konačan broj
simbola koji se mogu unijeti u određeni okvir – ako je više od char width onda
simboli postaju «nevidljivi»), type (vrsta polja za unos : single line (samo jedan
red za upis),multi line (mogučnost ispisa u više redova – nije određeno
naredbom CharWidth), password (upis u jedan red – upis zvjezdica koje
odrđuju određenu šifru (password) ), init Val (donosi vrijednosti prikazane u
polju prilikom učitavanja).

 LIST/MENU –meni-lista namijenjena za biranje ponuđenih podataka.Može

biti menu ili list.Properties prozor sadržava : list/menu (unos imena), type
(menu (oblik popup menija),list (oblik liste s mogučnošću pomicanja rulera)),
height (koliko će podataka biti odmah prikazano kod otvaranja stranice),
selection (allow multiple – mogućnost selektiranja više od jednog podatka).
  list values (izlistava (otvara novi prozor) sve ponuđene podatke s
mogučnošću izmjene istih), initially selected ( odabir podatka koji će biti
prvobitno selektiran).

RADIO BUTTON – gumb namijenjen za selektiranje ponuđenog pojma.Selektiranje

je moguće uvijek samo na jednom gumbu. Properties prozor sadržava : radiobutton
(unos imena), checked value (upisuje se vrijednost (naziv) koji želimo da se pošalje
na server kada se gumb selektira), initial state (checked-unchecked (biramo stanje
gumba koje će se prikazati kada se stranica učita))

CHECK BOX – kućica namjenjena za selektiranje ponuđenog pojma.Selektiranje je

moguće na više kućica odjednom.U Properties prozoru imamo : checkbox (unos
imena), checked value (upisuje se vrijednost (naziv) koji želimo da se pošalje na
server kada se kućica selektira), initial state (checked-unchecked (biramo stanje
gumba koje će se prikazati kada se stranica učita))
BUTTON – unošenje gumba na stranicu.Properties prozor sadržava : buttonname
(ime gumba), label (podatak napisan na samom gumbu), action (određujemo ukupno
tri stanja gumba (submit form (gumb služi za slanje podataka na server),reset form
(poništavanje svih podataka unesenih u prazna polja),none (gumb nema funkciju))).

Pogledati :

Primjer 6 : u ovom primjeru vidimo izvedbu formulara s

textfield,listmenu,radiobutton
,checkbox i button dijelovima

Vježba 6 : prema primjeru 6 napraviti formular