KAKO NAPRAVITI "SPRY MENU"

U većini slučajeva, kod prelaska mišem preko menija prikazaće se pod-meniji u padajućoj listi.

Uredićemo meni prema našim potrebama pomoću CSS pravila. Nakon umetanja menija, naša stranica izgledaće ovako (slika 1):

 

SLIKA 1

 

Dreamweaver ima na raspolaganju dvije vrste menija: vertikalni i horizontalni. U našoj lekciji ćemo koristiti horizontalni meni.

1. Otvorite "index.html"2. Kliknite "banner" div da biste postavili tačku umetanja u banner.3. Kliknite "Split" view da biste se uverili da li je tačka umetanja na pravom mestu (slika 2).

 

SLIKA 2

 

4. Kliknite Insert > Spry > Spry Menu Bar.5. U dijaloškom prozoru ostavite opciju "Horizontal" odabranom, te kliknite OK.

Meni će se pojaviti u banneru, sa početno zadanom šemom boja (slika 3).

 

SLIKA 3

 

U "Code" view možete vidjeti kod menija. To je zapravo samo jedna "ul" lista (unordered list), te nekoliko "li" i "ul" tagova, koje ćemo urediti pomoću CSS pravila. Glavni "ul" tag zove se "MenuBarHorizontal".

6. U Property Inspector umesto početne "MenuBar1" ID oznake upišite "check_menu", te pritisnite Enter.

Videćete promene i u "Code" view.

7. Kliknite "Design" view.8. Snimite promene na stranici.

Pojaviće se informacija o kopiranju dodatnih elemenata u vaš "root" folder. To su elementi potrebni za rad menija. Na primer, "SpryMenuBar.js" dokument sadrži sve informacije o ponašanju menija, dok "SpryMenuBarHorizontal.css" dokument sadrži sva CSS pravila za formatiranje menija.

9. Kliknite OK i zatvorite dijaloški okvir.

Dreamweaver će dodati "SpryAssets" folder, u kojem se nalazi sve neophodno za rad menija. Taj folder je takođe potrebno kopirati na web, zajedno sa ostalim dokumentima koje smo napravili.

OBLIKOVANJE IZGLEDA MENIJA (PRVI DEO)

Izgled menija definisaćemo u "SpryMenuBarHorizontal.css" dokumentu koji nam je Dreamweaver dodao u "SpryAssets" mapu (slika 4).

 

SLIKA 4

 

Ovo nije "naš" CSS dokument, odgovoran za izgled stranice, već poseban dokument, vezan samo za izgled menija. Moguće je pridružiti više CSS dokumenata na istu html stranicu.

Ako otvorite "SpryMenuBarHorizontal.css" dokument, videćete da je lista CSS pravila vrlo duga, i maksimalno složena. Nažalost, jednostavnije od toga ne može biti. Jedino što će vam olakšati rad je mogućnost rada na CSS pravilima u CSS Styles panelu. Ako ste bili u prikazu CSS dokumenta, vratite se u "index.html".

1. Uz otvoren "index.html", uključite prikaz CSS Styles panela (ako već nije uključen).2. Kliknite "Current" ikonu.3. Na stranici selektujte "Menu Bar" (dođite mišem iznad menija, da se pojavi tab sa nazivom).

Nakon selekcije menija, videćete nekoliko promena: "ul.MenuBarHorizontal" pravilo pojaviće se u CSS panelu, zato jer je to pravilo vezano za rad selektiranog elementa na stranici. Ispod toga pojaviće se svojstva (Properties) "ul.MenuBarHorizontal" pravila. Biće vam korisno da povećate dimenzije CSS Styles panela, jer ovako se dosta toga ne vidi (povucite donji rub panela, na štetu "Files" panela (slika 5).

 

SLIKA 5

 

Ako se vidljivost poboljšala, krenut ćemo u uređivanje menija. VAŽAN DETALJ: negde u sredini panela, desno od reči "Rules" postoje "About" i "Cascade" ikone. Kliknite na desnu (Cascade) ikonu.

4. Kliknite "ul.MenuBarHorizontal" pravilo. Kad je pravilo selektovao, pojaviće se puno ime pravila u panelu.

5. Kliknite "Add Property" link.6. Iz menija odaberite "text-transform" opciju.7. Za "Value" odaberite "uppercase".8. Kliknite na ITEM2.

Pojaviće se tri nova pravila u CSS Styles panelu.

9. U "Rules" panelu kliknite na "ul.MenuBarHorizontal li" pravilo.10. Za "width" odaberite vrednost "7" umesto "8" (em), te pritisnite Enter (slika 6).

 

SLIKA 6

 

Širina elemenata menija smanjiće se na 7 em.

Napomena: neka pravila u panelu bit će precrtana - to znači da nemaju uticaja na trenutno odabrani element na stranici.

11. U "Rules" panelu kliknite na "ul.MenuBarHorizontal a" pravilo.12. Odaberite "padding" opciju, pa je obrišite klikom na kantu za smeće (slika 7).

 

SLIKA 7

 

Nakon brisanja "padding" opcije, meni bi trebao biti dosta manjih dimenzija.

OBLIKOVANJE IZGLEDA MENIJA (DRUGI DEO)

Nakon što ste smanjili dimenzije menija, uredićete i same elemente. Prvo proverite na koji način rade naši pod-meniji.

1. Kliknite "Live View".2. Pređite mišem preko menija. Videćete da "ITEM 1" i "ITEM 3" imaju pod-menije. Ako pređete mišem

preko "ITEM 3", videćete da pod-meni "ITEM 3.1" ima svoje pod-imenije (slika 8).

 

SLIKA 8

 

Pod-menije možete dodavati neograničeno - jedino što u "PROPERTIES" možete videti samo dva nivoa. Za tri ili više nivoa, potrebno je raditi u kodu.

U našem slučaju pod-meniji nisu ni potrebni, tako da ćemo ih obrisati.

3. Isključite "Live View".4. Selektujte meni na stranici.5. U Property inspector odaberite Item 1 u prvoj koloni.6. U drugoj koloni odaberite pod-meni Item 1.1, te kliknite " minus" ikonu (slika 9).

 

SLIKA 9

 

7. Obrišite i ostale pod-menije.8. Odaberite Item 3 u prvoj koloni.9. Odaberite Item 3.1 u drugoj koloni, te kliknite "minus" ikonu.

Dreamweaver će vas upozoriti da postoji još nivoa pod-menija. Kliknite OK.

10. Obrišite Item 3.2 i Item 3.3 takođe.

Sada smo se rešili svih pod-menija, te možemo urediti ono što je preostalo.

11. Odaberite Item 1, te upišite sledeće vrednosti:

u "Text" desno upišite Features, za "Link" upišite "news.html" (slika 10).

 

SLIKA 10

 

Izgled menija će se promeniti. Nije potrebno upisivati velika slova, jer smo to već definisaliu CSS pravilu ranije.

Sve linkove ćemo usmeriti na "news.html" stranicu. Naravno, na "pravoj" stranici svaki link će voditi na drugi dokument.

12. Odaberite Item 2, te upišite sledeće vrednosti:

u "Text" desno upišite Fashion, za "Link" upišite "news.html".

13. Odaberite Item 3, te upišite sledeće vrednosti:

u"Text" desno upišite Lifestyle, za "Link" upišite "news.html".

14. Odaberite Item 4, te upišite sledeće vrednosti:

u"Text" desno upišite Calendar, za "Link" upišite "news.html".

meni bi sada trebao izgledati ovako (slika 11):

 

SLIKA 11

 

15. Uz selektovani meni, kliknite "plus" ikonu iznad prve kolone (slika 12).

 

SLIKA 12

 

Dreamweaver će dodati još jedan element menija.

16. Uz selektovan "Untitled Item", upišite sledeće vrednosti:

u"Text" desno upišite News, za "Link" upišite "news.html".

17. Kliknite negde na stranicu da de-selektujete meni.18. Snimite promene na "index.html" stranici.19. Kliknite na "SpryMenuBarHorizontal.css", postavite tačku umetanja u CSS dokument, te snimite

promene i u tom dokumentu.20. Kliknite "Source Code" ikonu (NE "Code" view dokumenta). To nas vraća u normalni "Split" prikaz

stranice.21. Kliknite "Design" view.

POLOŽAJ MENIJA NA STRANICI

Meni je potrebno pozicionirati u donjem desnom ćošku bannera. To ćemo napraviti podešavajući "padding" opciju za banner.

1. Odaberite "banner" div tag na dnu prozora.2. Kliknite "Current" tab u CSS Styles panelu.3. U panelu odaberite "#banner" pravilo (slika 13).

 

SLIKA 13

 

Kad odaberete "#banner" pravilo, pojavit će se pravila za baner (npr. pozadinska slika, visina i širina). Sada ćemo dodati "padding".

4. Kliknite "Add Property" link.5. Potražite i odaberite "padding-top".6. Za vrednost upišite "75" (px), te pritisnite Enter.

Meni će se pomaknuti za 75 piksela prema dole. Ne brinite za prikaz u "Design" view! To ćemo popraviti kasnije.

7. Kliknite "Add Property" link.8. Potražite i odaberite "padding-left".9. Za vrednost upišite "405" (px), te pritisnite Enter.

Meni se pomerioo udesno, ali prikaz pozadinske slike se ponovo "odmetnuo" - zbog "padding" vrednosti dimenzije našeg banner div-a su sada prevelike. Moraćemo od ukupnih dimenzija odbiti "padding".

10. Kliknite na "width" (širina), smanjite vrednost na 563 (968 - 405 [padding] = 563).11. Kliknite na "height" (visina), smanjite vrednost na 25 (100 - 75 [padding] = 25).

Prikaz stranice će se vratiti u normalu. Sada će naš "Properties" panel izgledati ovako (slika 14):

 

SLIKA 14

 

Dreamweaver prikazuje "padding" područje dijagonalnim kosim crtama (slika 15).

 

SLIKA 15

 

12. Kliknite bilo gdje na stranicu da biste de-selektovali "banner" div.13. U "Files" panelu dva puta kliknite na "check_magazine.css", pogledajte promene u kodu, te odmah

zatvorite dokument.14. Kliknite "Live View" ikonu da proverite izgled stranice (slika 16).

 

SLIKA 16

 

15. Isključite "Live View" prikaz.

Stranica je skoro završena. Samo još nekoliko sitnica...

ZAVRŠNI DETALJI

1. Kliknite negde u meni(npr. u riječ "Fashion").2. U "Rules" panelu kliknite "ul.MenuBarHorizontal a" pravilo.3. Za boju odaberite belo (#FFF), kao na slici 17.

 

SLIKA 17

 

Boja teksta menija promeniće se u belu. Pravilo "ul.MenuBarHorizontal a" utiče na boju teksta u osnovnom stanju (tj. kad nismo mišem iznad menija).

4. Kliknite na "background-color", te kapaljkom odaberite crnu boju (#000).

Pozadina menija promeniće se u crnu boju.

5. Kliknite "Live View" ikonu, te pređite mišem iznad menija.

Pojaviće se plava pozadina. To je početna vrednost koju ćemo sada promeniti.

6. Isključite "Live View".7. Kliknite nege u meni (npr. u reč "Fashion").8. Kliknite na "ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus" pravilo.

9. U "Properties" kliknite na plavi kvadratić za "background-color" (boja pozadine), te kapaljkom odaberite crnu boju (#000).

10. Kliknite na beli kvadratić za "color" (boja teksta), upišite vrijednost "#00ADEF", te pritisnite Enter (slika 18).

 

SLIKA 18

 

Kao što vidite, #00ADEF je plava boja. To će biti boja teksta kad dođemo mišem nad meni.

Potrebno je podesiti još jednu vrednost, sakrivenu duboko u kodu CSS dokumenta. Prebacite se sa "Current" na "All" prikaz, da biste lakše pronašli pravilo.

11. U CSS Styles panelu kliknite na ikonu "All".

Sada vidimo sva pravila za stranicu, a ne samo ona vezana za element na kojem trenutno radimo.

12. Kliknite na "plus" pored "SpryMenuBarHorizontal.css" da biste otvorili prikaz svih pravila (ako već nisu prikazana na taj način).

13. Odaberite pravilo kao na slici dole (naslov je toliko dug da nećemo to ni čitati. Pogledajte sliku, te odaberite na isti način (slika 19).

 

SLIKA 19

 

Biće potrebno napraviti istu stvar kao i za "ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus" pravilo.

14. U "Properties" kliknite na plavi kvadratić za "background-color" (boja pozadine), te kapaljkom odaberite crnu boju (#000).

15. Kliknite na beli kvadratić za "color" (boja teksta), upišite vrednost "#00ADEF", te pritisnite Enter.

U "Design" view se ovog puta promjene neće odmah videti, zato jer menjamo vrednosti za "hover" i "focus" stanje menija. To ćemo videti tek kad pređemo mišem preko menija.

16. Kliknite na "SpryMenuBarHorizontal.css" link gore, postavite tačku umetanja u css dokument, te snimite promjene.

17. Kliknite "Source Code" ikonu gore, te se vratite u "Split" prikaz dokumenta.18. Kliknite na "Design" view.19. Kliknite na "Live View" ikonu, te pređite mišem preko menija.

Sada je sa bojama sve u redu: crna pozadina, plava slova.

O AUTORU

Jon Michael Varese je pisac u Adobe kompaniji, te glavni autor dokumentacije za Dreamweaver. Napisao je mnogo web i štampanih materijala za Dreamweaver, Fireworks, FreeHand, Flash i ColdFusion.