Kako kreirati Drop-Down meni u Dreamweaver-u

Dreamweaver olakšava kreiranje padajućih menija za vašu Web lokaciju. Ali kao i svi oblici HTML-a, oni mogu biti malo komplikovani. Ovaj tutorijal će vas provesti kroz korake za kreiranje padajućeg menija u Dreamweaver-u.

Dreamweaver Jump Menus

Dreamweaver 8 takođe pruža čarobnjaka da kreira skok meni za navigaciju na vašoj web lokaciji. Za razliku od osnovnih padajućih menija, ovaj meni će zapravo učiniti nešto kada završite. Nećete morati da pišete bilo koji JavaScript ili CGI da biste dobili svoj padajući obrazac za rad. Ovaj tutorijal takođe objašnjava kako da koristite Dreamweaver 8 čarobnjaka da biste kreirali skok meni.

01 od 20

Prvo kreirajte obrazac

Kako kreirati drop-down meni u Dreamweaveru Prvo napravite obrazac. Snimak ekrana J Kyrnin

Važna napomena o HTML formulama i Dreamweaver-u:

Osim specijalnih čarobnjaka kao što je skok meni, Dreamweaver ne pomaže da napravite HTML obrasce "rad". Za ovo vam je potreban CGI ili JavaScript. Molimo pogledajte moj tutorijal Izrada HTML formulara za više informacija.

Kada dodate padajući meni na vašu Web lokaciju, prvo što vam treba je oblik koji ga okružuje. U Dreamweaver-u, idite u meni Insert i kliknite Form, a zatim odaberite "Form".

02 od 20

Obrasci prikazani u dizajnerskom prikazu

Kako kreirati drop-down meni u obliku Dreamweaver prikaza u dizajnerskom prikazu. Snimak ekrana J Kyrnin

Dreamweaver vizuelno prikazuje vizuelnu lokaciju u dizajnerskom prikazu, tako da znate gde možete staviti elemente obrazaca. Ovo je važno jer tagovi padajućeg menija nisu važeći (i neće raditi) van elementa obrasca. Kao što vidite na slici, oblik je crvena tačkasta linija u prikazu dizajna.

03 od 20

Izaberite listu / meni

Kako kreirati drop-down meni u Dreamweaver-u Odaberite listu / meni. Snimak ekrana J Kyrnin

Meniji sa padajućim imenom se nazivaju stavke "list" ili "menu" u Dreamweaver-u. Da biste dodali jedan u svoj obrazac, potrebno je da pređete u meni Obrazac na meniju Insert i odaberite "List / Menu". Uverite se da je vaš kursor bio u crvenoj tački linije polja za obrasce.

04 od 20

Prozor sa posebnim mogućnostima

Kako kreirati drop-down meni u Dreamweaver-u za posebne opcije. Snimak ekrana J Kyrnin

U Dreamweaver opcijama postoji ekran za pristupačnost. Odlučim da mi Dreamweaver pokaže sve atribute pristupa. I ovaj ekran je rezultat toga. Obrasci su mesto gde mnoge Web lokacije pada na pristupačnost i ispunjavanjem ovih pet opcija vaši padajući meni će odmah biti pristupačniji.

05 od 20

Obrazac Pristupačnost

Kako kreirati drop-down meni u Dreamweaver obrazac pristupačnosti. Snimak ekrana J Kyrnin

Opcije pristupačnosti su:

Label

Ovo je ime za polje. Pojavit će se kao tekst pored elementa obrasca.
Napišite ono što želite da pozovete svoj padajući meni. Ovo može biti pitanje ili kratka fraza da će padajući meni odgovoriti.

Stil

HTML sadrži oznaku oznake za identifikaciju oznaka obrasca u pregledaču. Vaši izbori su da obrišete padajući meni i tekst oznake sa oznakom, da koristite atribu "za" na oznaci oznake da biste identifikovali koji oblik oznake označava, ili da uopšte ne koristite oznaku oznake.
Više volim da koristim atribu, jer ako je potrebno za pomjeranje etikete iz nekog razloga, i dalje će biti priključeno na ispravno polje formulara.

Pozicija

Možete postaviti oznaku pre ili nakon padajućeg menija.

Pristupni ključ

Ovo je ključ koji se može koristiti zajedno sa Alt ili opcionim tasterima da biste došli direktno u to polje formi. To čini vaše forme veoma jednostavnim za upotrebu bez potrebe miša. Kako postaviti pristupni ključ u HTML-u

Tab Indeks

Ovo je red u kojem treba pristupiti polje za obrasce kada koristite tastaturu na kartici preko Web stranice. Razumevanje Tabindeksa

Kada ste ažurirali opcije pristupačnosti, kliknite na dugme U redu.

06 od 20

Izaberite meni

Kako kreirati drop-down meni u programu Dreamweaver Izaberite meni. Snimak ekrana J Kyrnin

Jednom kada imate padajući meni koji se prikazuje u dizajnerskom prikazu, morate dodati različite elemente. Prvo odaberite padajući meni klikom na njega. Dreamweaver će staviti još jednu tačku na samo padajući meni kako bi pokazao da ste ga izabrali.

07 od 20

Svojstva menija

Kako kreirati drop-down meni u Dreamweaver Menu Properties. Snimak ekrana J Kyrnin

Meni svojstava će se promeniti u listu osobina / menija za padajući meni. Tamo možete dati svoj meni ID (gdje piše "odaberite"), odlučite da li želite da bude lis ili meni, dajte mu stil klase iz liste stilova i dodijelite vrijednosti padajućem.

Koja je razlika između liste i menija?

Dreamweaver poziva spustni meni u meniju bilo koji padajući, koji dozvoljava samo jedan izbor. "Lista" dozvoljava više izbora u padajućem i može biti više od jedne stavke.

Ako želite da padajući meni bude višestruki, promenite ga na tip "liste" i ne ostavljajte polje "selekcije".

08 od 20

Dodajte nove stavke liste

Kako kreirati drop-down meni u Dreamweaver-u Dodaj nove stavke liste. Snimak ekrana J Kyrnin

Da biste dodali nove stavke u svoj meni, kliknite na dugme "Lista vrijednosti ...". Ovo će otvoriti gornji prozor. Unesite prvu etiketu u prvu kućicu. Ovo će biti prikazano na stranici. Ako ostavite praznu vrijednost, to će biti i ono što će biti poslato u obrascu.

09 od 20

Dodajte više i preuredite

Kako kreirati drop-down meni u Dreamweaver-u Dodaj više i preurediti. Snimak ekrana J Kyrnin

Kliknite na ikonu plus da biste dodali još stavki. Ako želite da ih ponovo naručite u polju za listu, koristite strelice nagore i nadole na desnoj strani.

10 od 20

Navedite vrijednosti svih stavki

Kako kreirati drop-down meni u Dreamweaver-u Daj sve vrijednosti vrijednosti. Snimak ekrana J Kyrnin

Kao što sam spomenuo u 8. koraku, ako ostavite praznu vrijednost, etiketa će biti poslata na obrazac. Ali možete dati sve svoje vrijednosti vrijednosti - da pošaljete alternativne informacije svom obrascu. Ovo ćete puno koristiti za stvari poput menija za skok.

11 od 20

Izaberite podrazumevanu

Kako kreirati drop-down meni u Dreamweaver-u Odaberite podrazumevanu. Snimak ekrana J Kyrnin

Web stranice koje podrazumevaju prikazivanje bez obzira na to koja je padajuća stavka najpre je navedena kao podrazumevana stavka. Ali ako želite drugačije izabrati, označite je u polju "Initially selected" u meniju Properties.

12 od 20

Pogledajte svoju listu u prikazu dizajna

Kako kreirati drop-down meni u Dreamweaver-u Pogledajte svoju listu u dizajnerskom prikazu. Snimak ekrana J Kyrnin

Kada završite sa uređivanjem svojstava, Dreamweaver će prikazati padajuću listu sa podrazumevanom vrijednošću.

13 od 20

Pogledajte svoju listu u prikazu koda

Kako kreirati drop-down meni u Dreamweaver-u Pogledajte vašu listu u prikazu koda. Snimak ekrana J Kyrnin

Ako pređete na prikaz koda, možete videti da Dreamweaver dodaje vaš padajući meni sa veoma čistim kodom. Jedini dodatni atributi su oni koji smo dodali sa opcijama pristupačnosti. Kôd je sve razdvojen i vrlo je lako pročitati i razumeti. Čak i stavlja izabrani = "izabrani" atribut jer sam rekao Dreamweaveru da podrazumevam pisanje XHTML-a.

14 od 20

Sačuvaj i pregledaj u pregledaču

Kako kreirati drop-down meni u Dreamweaver-u Sačuvaj i prikazati u pregledaču. Snimak ekrana J Kyrnin

Ako sačuvate dokument i pogledate ga u Web pregledaču, možete videti da vaš padajući meni izgleda baš kao što biste očekivali.

15 od 20

Ali ne radi ništa

Kako napraviti drop-down meni u Dreamweaver-u, ali to ne čini ništa. Snimak ekrana J Kyrnin

Meni koji smo napravili iznad izgleda dobro, ali ništa ne radi. Da biste je nešto učinili, potrebno je da postavite formu akciju na samu formu, što je potpuno drugi tutorijal.

Srećom, Dreamweaver ima ugrađeni padajući meni koji možete odmah da koristite na svojoj web lokaciji, bez potrebe za učenjem o oblicima, CGI-u ili skripti. Zove se Jump Menu.

Dreamweaver Jump meni postavlja padajući meni sa imenima i URL-ima. Tada možete odabrati stavku u meniju i Web stranica će se premjestiti na tu lokaciju, baš kao ako ste kliknuli na vezu.

Idite u meni Insert i odaberite Form, a zatim na Jump Menu.

16 od 20

Jump Menu Window

Kako kreirati drop-down meni u Dreamweaver Jump Menu Window-u. Snimak ekrana J Kyrnin

Za razliku od standardnog padajućeg menija, meni Jump otvara novi prozor da biste imenovali stavke menija i dodali detalje o tome kako obrazac treba da radi.

Za prvu stavku, promenite tekst "untitled1" na ono što želite da pročita i dodate URL adresu na koju bi ta veza trebalo da ide.

17 od 20

Dodajte stavke u svoj skok meni

Kako kreirati drop-down meni u Dreamweaveru Dodajte stavke u svoj Jump Menu. Snimak ekrana J Kyrnin

Kliknite na dodati stavku da biste dodali novu stavku u svoj skok meni. Dodajte što više stavki koliko želite.

18 od 20

Jump Menu Options

Kako kreirati drop-down meni u Dreamweaver skokom Opcije menija. Snimak ekrana J Kyrnin

Kada dodate sve linkove koje želite, trebalo bi da izaberete svoje opcije:

Otvorite URL adrese u

Ako imate frameeset, možete da otvorite linkove u drugom okviru. Ili možete da promenite opciju Main Window-a na poseban cilj tako da se URL otvori u novom prozoru ili drugde.

Ime menija

Dajte vašem meniju jedinstveni ID za stranicu. To je neophodno tako da skripta ispravno radi. Takođe vam omogućava da imate više menija za skok u jednoj formi - samo im dajte sva različita imena.

Uključite dugme Go nakon menija

Volim ovo da izaberem, jer ponekad skripta ne radi kada se meni menja. Takođe je pristupačniji.

Izaberite prvu stavku nakon promene URL-a

Odaberite ovo ako imate postavku kao što je "Izaberi jedan" kao prva stavka u meniju. Ovo će osigurati da ta stavka ostaje podrazumevana na stranici.

19 od 20

Jump Menu Design View

Kako kreirati drop-down meni u Dreamweaver-u Skokovi za pregled menija. Snimak ekrana J Kyrnin

Kao u prvom meniju, Dreamweaver postavlja svoj skok meni u dizajnerskom prikazu sa podrazumevanim elementom vidljivim. Tada možete urediti padajući meni kao i bilo koji drugi.

Ako ga uređujete, obavezno ne mijenjajte bilo koje ID-ove na stavke, u suprotnom skripta možda neće uspjeti.

20 od 20

Jump Menu u Browser

Kako kreirati drop-down meni u Dreamweaver Jump meni u pretraživaču. Snimak ekrana J Kyrnin

Čuvanje datoteke i udaranje F12 će prikazati stranicu u vašem omiljenom pregledaču. Tamo možete odabrati opciju, kliknuti na "Go", a meni za skokove radi!