Šta treba znati
- Idite na Insert > Form > Form. Kliknite na isprekidanu crvenu liniju na obrascu i idite na Insert > Form > Lista/Meni. Odaberite opcije pristupačnosti.
- Kliknite na meni i izaberite njegova svojstva, zatim izaberite Lista vrednosti da dodate nove stavke menija. Kliknite na znak plus da dodate još stavki.
- Dodajte vrijednosti stavke i odaberite zadanu stavku. Da dodate akcije, idite Insert > Form > Meni za skok. Dodajte stavke u meni za skok i sačuvajte.
Dreamweaver olakšava kreiranje padajućih menija za vašu web stranicu. Ali kao i svi HTML obrasci, oni mogu biti malo zeznuti. Ovaj vodič će vas provesti kroz korake za kreiranje padajućeg menija u Dreamweaveru.
Dreamweaver Jump Menus
Dreamweaver 8 takođe pruža čarobnjaka za kreiranje menija za preskakanje za navigaciju na vašoj web stranici. Za razliku od osnovnih padajućih menija, ovaj meni će uraditi nešto kada završite. Nećete morati da pišete JavaScript ili CGI da bi vaš padajući obrazac radio. Ovaj vodič takođe objašnjava kako koristiti čarobnjaka Dreamweaver 8 za kreiranje menija za skok.
Prvo kreirajte obrazac
Osim posebnih čarobnjaka kao što je meni za skokove, Dreamweaver vam ne pomaže da HTML forme "funkcionišu". Za ovo vam je potreban CGI ili JavaScript.
Kada dodajete padajući meni na svoju web stranicu, prva stvar koju trebate je obrazac koji će ga okružiti. U Dreamweaveru idite na meni Insert i kliknite na Obrazac, a zatim odaberite "Form."
Prikazuje formu u prikazu dizajna
Dreamweaver prikazuje vašu lokaciju obrasca vizuelno u prikazu dizajna, tako da znate gde da stavite svoje elemente obrasca jer oznake padajućeg menija nisu važeće (i neće raditi) izvan elementa obrasca. Kao što možete vidjeti na slici, forma je crvena tačkasta linija u prikazu dizajna.
Odaberite listu/meni
Padajući meniji se u Dreamweaveru nazivaju stavke "lista" ili "meni". Dakle, da biste ga dodali svom obrascu, morate ući u meni Obrazac na meniju Umetanje i odabrati "Lista/Izbornik". Provjerite da li je vaš kursor bio unutar crvene isprekidane linije vašeg obrasca.
Prozor posebnih opcija
U Dreamweaver opcijama, postoji ekran Pristupačnost. Vaši padajući meniji će odmah biti dostupniji od ostalih web stranica ako ispunite ovih pet opcija.
Pristupačnost obrasca
Opcije pristupačnosti su:
Etiketa
Polje oznake prikazuje se kao tekst pored vašeg elementa obrasca. Unesite naziv za svoj padajući meni. To može biti pitanje ili kratka fraza na koju će padajući meni odgovoriti.
Stil
HTML uključuje oznaku za identifikaciju oznaka vašeg obrasca u web pretraživaču. Vaš izbor je da omotate padajući meni i tekst naljepnice sa oznakom, da koristite atribut "for" na oznaci oznake da identifikujete na koju oznaku obrasca upućuje, ili da uopće ne koristite oznaku oznake.
Pozicija
Možete postaviti svoju etiketu prije ili poslije padajućeg menija.
Pristupni ključ
Posjetioci mogu koristiti pristupni ključ satipkama "Slika" ili opcijama da direktno dođu do tog polja obrasca. Ova prečica na tastaturi čini vaše obrasce veoma lakim za korištenje bez miša. alt="
Indeks kartica
Indeks kartica je način na koji korisnici treba da pristupe poljima obrasca kada koriste tastaturu za tab kroz web stranicu.
Kada ažurirate svoje opcije pristupačnosti, kliknite na OK.
Odaberite meni
Kada se vaš padajući meni prikaže u Dreamweaver prikazu dizajna, morate dodati različite elemente. Prvo odaberite padajući meni klikom na njega. Dreamweaver će staviti još jednu isprekidanu liniju oko padajućeg menija kako bi pokazao da ste ga odabrali.
Svojstva menija
Meni sa svojstvima će se promeniti u listu/osobine menija za taj padajući meni. Tamo možete svom meniju dati ID (gdje piše "odaberi"), odlučiti da li želite da bude lista ili meni, dati mu klasu stila iz vašeg stilskog lista i dodijeliti vrijednosti padajućem izborniku.
Koja je razlika između liste i menija?
Dreamweaver poziva padajući meni menija bilo koji padajući meni koji dozvoljava samo jedan izbor. "Lista" dozvoljava više izbora u padajućem izborniku i može imati više od jedne stavke.
Ako želite da padajući meni ima više redova, promijenite ga u tip "lista" i ostavite polje "odabir" nepotvrđenim.
Dodaj nove stavke na listi
Da dodate nove stavke u svoj meni, kliknite na dugme "Lista vrednosti…", koje otvara gornji prozor. Zatim unesite oznaku svoje stavke u prvo polje. Prikazaće se na stranici.
Dodajte još i naručite
Kliknite na ikonu plus da dodate još stavki. Ako ih želite preurediti u listi, koristite strelice gore i dolje na desnoj strani.
Daj vrijednosti svih stavki
Ako ostavite vrijednost praznu, oznaka će ići u obrazac. Ali svim svojim stavkama možete dati vrijednosti - da pošaljete alternativne informacije u vaš obrazac. Ovo ćete često koristiti za stvari kao što su meniji za preskakanje i hiperveze.
Odaberite zadano
Web stranice podrazumevano prikazuju bilo koju padajuću stavku koja je prva navedena kao podrazumevana stavka. Ali ako želite da se izabere neki drugi, označite ga u polju "Inicijalno odabrano" na meniju Svojstva.
Pogledajte svoju listu u prikazu dizajna
Kada završite sa uređivanjem svojstava, Dreamweaver će prikazati vašu padajuću listu sa odabranom zadanom vrijednošću.
Pogledajte svoju listu u prikazu koda
Ako pređete na prikaz koda, možete vidjeti da Dreamweaver dodaje vaš padajući meni sa čistim kodom. Jedini dodatni atributi su opcije pristupačnosti. Kod je sav uvučen i vrlo lak za čitanje i razumijevanje.
Sačuvaj i pogledaj u pretraživaču
Ako snimite dokument i pogledate ga u web pretraživaču, možete vidjeti da vaš padajući meni izgleda baš onako kako biste očekivali.
Ali ne radi ništa…
Meni koji smo kreirali iznad izgleda dobro, ali ne radi ništa. Da biste ga natjerali da nešto uradi, morate postaviti radnju obrasca na samom obrascu.
Srećom, Dreamweaver ima ugrađeni obrazac padajućeg menija koji možete odmah koristiti na svojoj web lokaciji bez potrebe da učite o obrascima, CGI-ovima ili skriptovima. Zove se meni za skok.
Dreamweaver Jump Menu postavlja padajući meni sa imenima i URL-ovima. Zatim možete odabrati stavku u meniju, a web stranica će se premjestiti na tu lokaciju, baš kao da ste kliknuli na link.
Idite na meni Insert i izaberite Form, a zatim Skoči meni.
Prozor menija za skok
Za razliku od standardnog padajućeg menija, meni za skok otvara novi prozor za imenovanje stavki menija i dodavanje detalja o tome kako obrazac treba da radi.
Za prvu stavku promijenite tekst "un titled1" u ono što želite da čita i dodajte URL.
Dodajte stavke u svoj meni za skok
Kliknite na dodaj stavku da dodate novu stavku u svoj meni za skok. Dodajte onoliko stavki koliko želite.
Opcije menija za skok
Kada dodate sve linkove koje želite, trebate odabrati svoje opcije:
Otvorite URL-ove u
Ako imate okvir, možete otvoriti veze u drugom okviru. Ili možete promijeniti opciju glavnog prozora na poseban cilj tako da se URL otvori u novom prozoru ili na drugom mjestu.
Naziv menija
Dajte svom meniju jedinstveni ID za stranicu. To je potrebno da bi skripta radila ispravno. Takođe vam omogućava da imate više menija za skok u jednom obliku - dajte im različita imena.
Umetanje dugmeta Go nakon menija
Volim da izaberem ovo jer ponekad skripta ne radi kada se meni promijeni. Također je pristupačnije.
Odaberite prvu stavku nakon promjene URL-a
Izaberite ovo ako imate prompt kao što je "Odaberi jedan" kao prvu stavku menija. Ovo će osigurati da ta stavka ostane zadana na stranici.
Prikaz dizajna menija za skok
Baš kao kod vašeg prvog menija, Dreamweaver postavlja vaš meni za skok u prikazu dizajna sa vidljivom zadanom stavkom. Zatim možete urediti padajući meni kao i svaki drugi.
Ako ga uređujete, pazite da ne mijenjate ID na stavkama; inače, skripta možda neće raditi.
Preskoči meni u pretraživaču
Sačuvanjem fajla i pritiskom na F12 prikazaće se stranica u željenom pretraživaču. Tamo možete odabrati opciju, kliknuti na "Idi", i meni za skok radi.
