Laboratorijske vjebe iz Adobe Dreamweaver-a

Vjeba br. 6

Stilovi na website-u
Cascading Stylesheets (CSS) omoguavaju precizniju kontrolu izgleda teksta, fonta, boje,
pozadine i drugih tipografskih efekata. Zatim CSS predstavlja nain za auriranje izgleda i
formatiranje neogranienog broja stranica jednostavno promjenom samo jednog dokumenta.
Increased compatibility across browsers and platforms. On poveava kompatibilnost, osigurava
manje koda, manje stranice i bri download.
Kreiranje CSS fajla
U ovoj vjebi kreirat emo CSS fajl kako bi dodali jo dodatnog formatiranja naoj stranici.
1. Otvorite Moje cvijee site u Dreamweaver-u. Otvorite bilo koji HTML dokument unutar
site-a, npr. about.html.
2. Kliknite na Heading podruje
. U properties panelu podesite Format na
Heading 1 (ako ve niste). Prebacite se u Design panel pritiskom na njegovo zaglavlje.

3. Kliknite na New CSS Style ikonu

na dnu CSS Styles panela.
4. Za Selector Type izaberite Tag. Selektujte h1 sa liste tagova. Podesite Define in na New
Style Sheet File. Provjerite da li opcije izgledaju kao u primjeru ispod i kliknite OK.
5. U nastavku je potrebno dati ime CSS fajlu koji smo kreirali. Snimite ga pod imenom
site_styles.css. Provjerite samo da li je snimljen u istom folderu gdje i vai html fajlovi.

6. U nastavku ete vidjeti styles dijalog. Ovo vam omoguava da kreirate deklaraciju za stil
za H1 tag. Selektujte Type sa liste Categories sa lijeve strane i podesite opcije kao na
slici. Ovo e podesiti da font za prvi nivo headinga bude Arial. Naslovi e biti veliine 35
piksela, boldovani i prvo slovo svake rijei e biti veliko i boje dark maroon.
7. Selektujte Block sa liste kategorija na lijevoj strani. Podesite da poravnanje teksta buce
center.
8. Kliknite na OK da kompletirate pravilo za H1 naslov.

9. Naredni korak je da poveete HTML fajlove sa novim CSS fajlom. Otvorite jedan od
vaih HTML fajlova. Provjerite da li je naslov stranice podeen na Heading 1, ako nije
podesite.
10. U CSS Styles panelu kliknite na Attach Style Sheet ikonu
na dnu panela.

11. Provjerite da li je opcija Link selektovana i zatim kliknite na Browse dugme. Izaberite
site_styles.css i kliknite na OK.
12. Kliknite ponovo na OK da zatvorite dijalog Attach Style Sheet. Heading e sada biti
auriran prema H1 pravilu podeenom u CSS fajlu.
13. Ponovite korake od 9. do 12. za preostale HTML fajlove tako da svi budu povezani sa
novim CSS fajlom. Snimite sve fajlove.
S obzirom da su sada svi fajlovi povezani sa site_styles.css, bilo koja promjena u pravilima stilova
e biti primijenjena i na HTML fajlove.
14. Sa otvorenim HTML dokumentom, prebacite se u Code View. Skoro na vrhu e se nalaziti
linija kao na slici koja povezuje HTML fajl sa vaim CSS fajlom.
15. Vratite se u Design View. Na listi Files kliknite dvaput na site_styles.css fajl da ga otvorite.
fajl e sadravati samo jedno pravilo sa H1 selektorom i nekoliko grupisanih deklaracija.

Dodatni selektori stilova

1. Kliknite na dvaput na site_styles.css fajl da ga otvorite. Kliknite na ikonu Edit Style
Sheet
na dnu panela. Sada e biti prikazana lista svih pravila za stilove koja se nalaze u
CSS fajlu.
2. Kliknite na dugme New kako biste kreirali novo pravilo za stil. Podesite Selector type na
P i kliknite na OK. Ovo e kreirati pravilo koje definie tekst paragrafa website-a.

3. Provjerite da li je Type selektovan na listi kategorija na lijevoj strani prozora. Kliknite na

Font listu. Moete primijetiti da su neke opcije ograniene. Zbog jednostavnosti,
Dreamweaver obino prikazuje najee koritene fontove za website. Ako elite font koji
nije prikazan na listi, izaberite opciju Edit Font List.
4. Skrolujte listu Available fonts sve dok ne naete Comic Sans MS (ili neki drugi font).
Selektujte taj font i kliknite na dugme kako biste ga dodali u vau listu izabranih fontova
Chosen Fonts.
5. Takoe, moete specificirati alternativne fontove u sluaju da ako neko ko posjeti va site
nema taj font. Dodajte Arial i zatim dodajte sans-serif. Ova opcija e izgledati kao na
slici. Kliknite na OK.

6. Zatim odaberite va novi font sa liste Fontova. Podesite ga kao na slici. Kliknite na OK.

7. Kliknite na Done da zatvorite sytle sheet opciju. Promjene moete uoiti kod svih svojih
dokumenata unutar website-a. Ove promjene utiu samo na tekst paragrafa u
dokumentima, dok drugi tipovi teksta kao to je npr. tekst u elijama tabele nee imati
takvo formatiranje.
8. Ponovo otvorite site_styles.css fajl. Promijenite ga tako da pored P selektora ukljuuje i
selektore za LI i TD tagove sa zarezima izmeu kao na slici.
9.
Snimite
izmjene
CSS
fajla.
Sada e
tekst, nepobrojane i pobrojane liste imati aurirane stilove iz CSS fajla.
10. Ponovite korake 1 i 2 kako biste editovali stylesheet.
11. Kliknite na New kako biste dodali novi selektor stila. Ovaj tip selektora e sada imati
body kao tag, a to e kreirati pravilo za stil koji e uticati na cijelu stranicu dokumenta.
12. Selektujte Background sa Category liste. Za Background image unesite back.jpg.
13. Zatim izaberite Box sa Category liste. Za opciju Margin provjerite da li je opcija Same
for all ukljuena i unesite vrijednost 0 za veliinu margina.
14. Kliknite na OK i zatim Done da se primijene izmjene.

Kreiranje CSS klasa

1. Kliknite na ikonu New CSS Style u CSS Styles panelu. Za Selector Type izaberite class i
provjerite da li je Define in podeeno na site_styles.css.
2. Unesite .cvijece za ime klase (ime klase mora poeti sa takom). Kliknite na OK da
kreirate novo pravilo za stil. U kategoriji Type izaberite tamno zelenu boju za tekst. U
kategoriji Background izaberite svijetlo zelenu boju za Background Colour.
3. Kliknite na OK kako biste zavrili dodavanje novog pravila za stil.
4. Otvorite about.html. Izaberite tekst Moje cvijee. Na Properties panelu na Style listi
izaberite .cvijece. Selektovani tekst e biti formatiran u skladu sa novom klasom.
Primijenite novu klasu za stil na ostale stranice website-a gdje se ovaj tekst pojavljuje.
Editovanje stila
1. Bilo koji stil moe biti editovan i sve izmjene u stilu e biti vidljive u dijelovima websitea gdje je primijenjen taj stil. Izaberite .cvijece klasu sa panela CSS Styles. Kliknite na
Edit Style ikonu na dnu palete.
2. Promijenite boju teksta u tamno braon i kliknite na OK. Svi dijelovi website koji koriste
ovu klasu e biti izmijenjeni.
Kreiranje stilova za hiperlinkove
CSS specifikacija ukljuuje nekoliko klasa za stilove koje su specijalno rezervisane za
hiperlinkove (A ili anchor tag).
a:link klasa omoguava kreiranje pravila za stilove za regularne hiperlinkove (obino
plave).
a:visited klasa omoguava kreiranje pravila za stilove za hiperlinkove koji pokazuju na
lokaciju koju je korisnik ve posjetio (obino purpurne boje)
a:active klasa omoguava kreiranje pravila za stilove za hiperlinkove koji su aktivni ili
linkove na koji je kliknuto (obino su crveni dok browser eka da se nova stranica
pone pojjavljivati.
a:hover klasa omoguava kreiranje pravila za stilove za hiperlinkove preko kojih je
korisnik preao miem.
1. Otvorite bilo koju stranicu vaeg site-a. Na CSS Styles panelu kliknite na New Style
Sheet ikonu.
2. Izaberite Advanced za Selector Type i zatim izaberite a:link za selektor. Podesite da je
Define in podeen na site_style.css. Kliknite na OK da kreirate novo pravilo za stil.

3. Podesite opciju Decoration na none (tako da link nije podvuen) i Color na blue. Kliknite
na OK da kreirate novo pravilo za stil.
4. Na CSS Styles panelu kliknite na New Style Sheet ikonu. Kreirajte sline klase za
a:visited (sa Color podeenom na purple) i a:active (sa Color podeenom na red).
5

5. Izaberite Advanced za Selector Type i zatim izaberite a:hover za selektor. Podesite da je

Define in podeen na site_style.css. U kategoriji Type, podesite Color na red i
Decoration na underline i overline.
6. U kategoriji Background, podesite da boja pozadine bude svijetlo uta.
7. Kliknite na OK da kreirate novo pravilo za stil.
8. Sa menija File odaberite Save All kako biste snimili sve dokumente ukljuujui i CSS fajl.
Dynamic HTML
DHTML ili Dynamic HTML predstavlja kombinaciju HTML, CSS i skripti kao to je
Javascript, kako bi se stranica nainila to je mogue vie interaktivnom. U nastavku emo
kreirati DHTML Mouse Over Effect.
1. Otvorite template Main Page.dwt. Kliknite na prvu linkovanu
sliku na navigacionoj traci (Home).
2. Prije nego to dodijelite neko ponaanje za tu sliku, potrebno
je dati neko ime umjesto generikog image1. U properties
panelu unesite nav_home kao ime selektovane slike.
3. Kliknite na Tag Inspector Panel na desnoj strani prozora Dreamweaver-a i zatim na
Behaviours tab.
4. Selektujte Home sliku i kliknite na Add Behaviour ikonu u Behaviours Panel-u. Pojavit
e se lista dostupnih ponaanja. Izaberite Swap Image.
5. Sa liste slika izaberite nav_home. Primijetit ete da druge slike nemaju imena.
6. Ukljuite opcije Preload Images i Restore Images onMouseOut. Kliknite na Browse
dugme i izaberite sliku nav_home_act.gif.
7. Kliknite na OK da dodate ponaanje. Drugo ponaanje koje vraa originalnu sliku kada se
mi pomjeri sa slike e takoe biti dodato.
8. Kreirajte slina ponaanja i za ostale slike na navigacionoj traci. Svakoj dajte
odgovarajue ime prije nego to kreirate ponaanje.
9. Kada zavrite sa svim izmjenama, snimite promjene na template-u i aurirajte sa njim
povezane dokumente.