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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Č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!