Laboratorijske vjebe iz Adobe Dreamweaver-a

Vjeba br. 2

Osnove editovanja stranice

Kreiranje strukture website-a
U Dreamweaver-u, imjesto rada najednoj po jednoj stranici kao kolekciji stranica, moete
raditi na stranicama kao cijelom site-u. Ovo vam omoguava da uspostavite veze izmeu
stranica, da napravite neke izmjene na cijelom site-u i da upload-ujete te izmjene odjedanput.
1. Otvorite Dreamweaver i na Welcome stranici u podruuju Create New odaberite
Dreamweaver Site.
2. Kada se pojavi prozor Site Definition, unesite Moje cvijee kao ime site-a.

3. Kliknite na Next. Server tehnologije koriste skripte kao to su ASP i PHP koje mogu
pruiti dodatne funkcionalnosti naem website-u. Za sada ih neemo koristiti, pa stoga
kliknite na No i zatim na Next.
4. Naredna opcija omoguava vam da moete editovati va website sa udaljene lokacije, kao
kad na primjer elite editovati site sa raunara koji se nalazi negdje drugdje u mrei. Za
sada izaberite opciju Edit local copies. Ovo znai da ete raditi na site-u samo na vaem
raunaru. A onda kada budete spremni, izmjene e biti uploadovane na web. U donjem
dijelu, specificirate lokaciju na kojoj e biti sauvan va website. Sve stranice vaeg
website-a e biti smjetene na tu lokaciju.
5. Kliknite na Next. Na narednom prozoru moete specificirati kakva e biti konekcija kada
budete eljeli uploadovati va site. Na primjer, ako e se website nalaziti na websiteu
vaeg internet service provider-a, onda vam on moe obezbijediti FTP (File Transfer
Protocol) podeenja koja se mogu korisititi za kopiranje vaih fajlova na web. Tada kada
1

napravite izmjene u Dreamweaver-u, moete jednostavno klikom na dugme uploadovati

izmjene fajlova uz primjenu ovih podeenja. U ovom sluaju kliknite na None i zatim na
Next.
6. Zadnji stepen e vam prikazati sumarne podatke o site-u. Pregledajte podeenja i kliknite
na Done.

Kreiranje poetne stranice

Kada smo kreirali site, potrebno je kreirati stranice.
1. Na desnoj strani prozora trebalo bi da vidite Files panel.
Ako ga ne vidite, izaberite opciju Files sa menija Window
ili pritisnite [F8].
2. Kliknite desnim dugmetom mia na prazan dio Files panela
i odaberite opciju New File. Kao ime fajla unesite
index.html.
Kod website-a, uvijek je dobra ideja nazvati glavnu stranicu sa
index, budui da je to univerzano koriteno kao ime za glavnu stranicu. Kada ljudi pristupe
vaem website-u, moi e odmah da odu na ovu stranicu, bez ukljuivanja imena fajla u
adresi. Meutim, ako se vapa glavna stranica zove drugaije, onda je neophodno da se na
kraju adrese vaeg site-a uvijek ukljui i ime fajla koji oznaava vau glavnu stranicu.
3. Kliknite desnim dugmetom mia na novi fajl i odaberite opciju Set as Home Page. Zatim
kliknite dvaput na fajli index.html da ga otvorite.
Editovanje stranice
Prazna poetna stranica bie otvorena u glavnom podruju za editovanje. Provjerite da li ste u
Design pogledu, ako niste podesite taj pogled.
1. Unesite tekst Moj cvjetni website. Pritisnite Enter da biste preli u novu liniju i pritisnite
ga ponovo da biste dobili jo jednu praznu liniju.
2. Unesite sljedei tekst:
Dobrodoli na Moj cvjetni website jedino mjesto na kom moete vidjeti najljepe
posude za cvijee. tagod vae cvijee treba, budite sigurni da ete to nai ovdje.
Pogledajte u naoj galeriji izbor posuda za cvijee
3. Pritisnite Enter i unesite sljedei tekst:
O nama Galerija Narudbe Kontakti - Linkovi
4. Kliknite na dugme Code u vrhu da biste vidjeli stranicu u HTML pogledu. Moete vidjeti
da je kreirano nekoliko paragrafa (koritenjem P taga). Drugi paragraf ima   u sebi.
Ovo je posebni HTML karakter koji kreira prazan prostor, jer prazni paragrafi i drugi
prazan prostor biva ignorisan od strane web browsera ako nisu ovi znakovi ukljueni.
5. Vratite se u Design pogled. Provjerite da li je na dnu ekrana prikazan Properties Panel.
Ako nije, moete ga ukljuiti pritiskom na dugmad [Ctrl] [F3] ili klikom na
dugme.
6. U Properties Palette, kliknite na dugme Page Properties.
7. Za Background Image, unesite back.jpg kao to je to prikazano ispod. Kliknite na OK.
8. Kliknite na Preview/Debug na Browser ikoni ili pritisnite [F12] da provjerite kako to
izgleda.
9. Snimite promjene na stranici.
Formatiranje stranice
2

1. Kliknite na Title box na vrhu dokumenta i unesite tekst Moj cvjetni website.
2. Kliknite na prvu liniju na stranici (Moj cvjetni website). Sada emo promijeniti paragraf
u heading. Budui da se promjena odnosi na cijeli paragraf, nije neophodno cijelog ga
selektovati.
3. Za Format izaberite Heading 1.
4. Centrirajte tekst klikanjem na ikonicu
tipki [Ctrl] [Alt] [Shift] [C].

u Properties Palette ili pritiskom kombinacije

5. U narednom paragrafu selektujte ime paragrafa kao to je to prikazano ispod.

6. Formatirajte ovaj tekst kao Italik klikanjem na ikonu

pritiskom kombinacije tipki [Ctrl] [I].

u Properties Palette ili

7. Kliknite na zadnju liniju i centrirajte je. Zatim je selektujte, u Properties Palette

izaberite opciju Size i onda izaberite Smaller.
8. Pogledajte kako sada izgleda vaa stranica. Snimite izmjene.
Umetanje slika
1. Kliknite na praznu liniju izmeu headinga i uvodnog paragrafa.
2. Sa menija Insert odaberite opciju Image. Takoe, moete kliknuti na ikonu
alatnoj traci ili pritisnuti [Ctrl] [Alt] [I].

na

3. U dialog box-u Select Image Source, odaberite sliku main_links.gif. Kliknite na OK da

insertujete sliku. Centrirajte je.
Kada je slika selektovana, moete vidjeti razliite opcije u panelu Properties. Ove opcije
e ovisiti od toga ta ste selektovali na slici.
4. Izbriite tekst u headingu, tako da ostane samo prazna linija. Umjesto njega emo staviti
sliku.
5. Insertujte sliku main_title.gif. Vaa stranica bi trebala izgledati slino kao na slici.

6. Selektujte insertovanu sliku. Pogledajte u Properties i primijetit ete jednu pod nazivom
ALT. Ovo e specificirati alternativni tekst koji e biti prikazan u sluaju da slika ne bude
uitana u browser. Za slike koje se koriste za vane elemente kao to je heading, ovo
predstavlja dobru ideju. Unesite Moj cvjetni website u Alt box.
7. Takoe, ovo moete uiniti za sve ostale slike.
8. Prebacite se u Code pogled i pogledajte HTML kod. esta provjera koda predstavlja
kreativan nain da se poblie upoznate sa HTML-om i identificirate sa potencijalnim
problemima. Vratite se u Design pogled.
9. Snimite i pregledajte stranicu.
Kreiranje dodatnih stranica
1. Kliknite desnim dugmetom mia na index.html u File Panel.
2. Odaberite New File i unesite about.html kao ime.
3. Ponovite ovaj postupa i kreirajte jo etiri fajla sa imenima gallery.html, ordering.html,
contact.html i links.html.
Kreiranje linkova na nove stranice
Linkovi u HTML-u kreiraju se koritenjem Anchor tag-a. Na naoj glavnoj stranici, kreirat
emo linkove na druge fajlove na site-u. Tekst na dnu predstavlja mjesto gdje e se ti linkovi
nalaziti.
1. Provjerite da li je fajl index.htnl jo uvijek otvoren u prozoru za editovanje. Na donjoj
liniji selektujte tekst O nama.
2. Dreamweaver osigurava nekoliko naina za kreiranje linkova(pored kreiranja anchor taga u HTML-u). Ako kreirate link na drugi site, moete ukucati adresu na koju kreirate link
u Link box-u u panelu Properties. Ako kreirate link na fajl u okviru vapeg site-a, moete
ukucati ime fajla direktno u link box. Moete kliknuti na
ikonu desno od link box-a i
potraiti fajl na koji elite kreirati link. Jedan od najjednostavnijih naina jeste koristiti
Point to File ikonu
File Panel-a.

pored link box-a. To vam omoguava da selektujete fajl iz vaeg

3. Pomjerite mi na Point File ikonu dok je tekst jo uvijek selektovan. Povucite ovu ikonu
na fajl about.html u File Panel-u. Link na ovaj fajl bie kreiran i njegovo ime bie
prikazano u link box-u. Ponovite isto za sljedee linkove:
Galerija - link na gallery.html
Narudbe link na ordering.html
Kontakti link na contact.html
Linkovi link na links.html
4. Dno stranice bi trebao izgledati kao na slici.

5. Ako elite da imate sliku na koju moete kliknuti za prelaza na narednu stranicu umjesto
teksta, samo selektujte tu sliku i ponovite isti postupak kao za tekst. Provjerite da li je
Border osobina slike podeena na 0, jer ete u suprotnom imati plavi okvir oko slike
slino kao plavu liniju za tekst sa linkom.
Kreiranje image map
Jedan od naina za kreiranje linkova koji moe biti prilino efektan na web stranici jeste
kreiranje tzv. slikovna mapa (image map). Obino, ako koristite sliku za link, destinacija e
biti ista bez obzira na koji dio slike kliknete. Image map, meutim, omoguava vam da
specificirate razliite link lokacije zavisno od toga na koji dio slike ste kliknuli. Ovaj efekat
je mogue postii koritenjem vie slika i podeavajui svaku od njih za drugi link. Meutim,
ovaj nain ogranien je na pravougaoni oblik linka i usporava uitavanje stranice, budui da
va browser mora uitati nekoliko slika umjesto samo jedne. U ovoj vjebi koristit emo
sliku na sredini nae glavne stranice da bismo kreirali image map sa linkovima na druge
stranice.
1. Selektujte sliku na glavnoj stranici. U donjem lijevom dijelu Properties Panel-a nalaze se
neki image map alati. Najprije je potrebno dati ime mapi, s obzirom da jedna stranica
moe imati vie slikovnih mapa, a browser mora znati za koju sliku su kreirani linkovi.

2. Ukucajte main_links pored opcije Map.

3. Slikovna mapa moe imati tri tipa tzv. hotspot-ova (podruja linkova). Prvi omoguava
kreiranje pravougaonih podruja za linkove na slici. Drugi omoguava kreiranje podruja
u obliku krugova na slici. A trei omoguava kreiranje poligona u sluaju da su vam
potreni manje simetrina podruja za linkove. Kliknite na Rectangular Hotspot Tool.
Povucite pravougaono podruje preko rijei About Us.
Hotspot e imati oblik kao na slici.
4.
Dok je hotspot jo uvijek selektovan, koristite Point to File
alat
iz Properties Panel-a da kreirate link na fajl
about.html. Ukucajte O nama u ALT opciju Properties panelu.
5.
Za Links koristit emo hotspot u obliku poligona, stoga kliknite
na Polygon Hotspot Tool. Kliknite tamo gdje elite da se nalazi prvi vrh vaeg hotspot
oblika, a zatim klinite na naredni vrh i tako sve dok ne dobijete oblik koji elite.
5

6. Poveite ovaj hotspot sa links.html sa Linkovi kao ALT tekstom.

7. Ostale hotspotove kreirajte sa bilo kojim alatom koji smatrate prikladnim, ujedno
dodajui i odgovarajui tekst u Alt opciju za svaki link.
8. Snimite i pogledajte website u browseru
.
9. Pomjerite mi preko Image Heading ili preko jedne od hotspot na srednjoj slici i vidjet
ete ALT tekst koji e se pojaviti u veini browsera.
Provjera mape
Jednom kada ste uspostavili neke linkove na vaem website-u, Dreamweaver posjeduje neke
alate koji vam omoguavaju da nadzirete cijeli site. Veina tih alata se nalazi u Files Panelu.
1. Kliknite na dugme Expand/Collapse
u desnom uglu File Panela. Ovo e promijeniti
pogled tako da File Panel ispunjava ekran. Ako ste podesili va site da ima opciju remote
server, tada e fajlovi na udaljenom serveru biti prikazani na lijevoj strani, dok e fajlovi
na vaem raunaru biti prikazani na desnoj strani. Ovo moete koristiti za sinhronizaciju
izmeu fajlova na vaem raunaru i onog to se nalazi na live verziji website-a.

2. Kliknite na Site Map ikonu

na alatnoj traci na vrhu. Sada moete vidjeti vizuelnu
predstavu veza izmeu stranica na vaem website-u. Klikom na ime fajla na desnoj strani
e ga selektovati na mapi site-ai obrnuto. index.html se nalazi na vrhu budui da je on
dizajniran kao poetna stranica.

3. Ponovo kliknite na dugme Expand/Collapse da se vratite u standardni pogled i sauvate

va rad.