Kako stvoriti padajući izbornik u Dreamweaveru

Možete postaviti svoju oznaku prije ili poslije padajućeg izbornika.

Pristupni ključ

To je ključ koji se može koristiti zajedno s tipkama Alt ili Option da biste izravno došli do tog polja obrasca. To čini vaše oblike vrlo jednostavan za korištenje bez potrebe za mišem.

Indeks tabulatora

Ovo je redoslijed kojim se polje obrasca treba pristupiti prilikom korištenja tipkovnice na karticu preko web stranice.

Kada ažurirate svoje mogućnosti pristupačnosti, kliknite U redu.

Odaberite Izbornik

Nakon što se na padajućem izborniku prikazuje u Dreamweaverovom prikazu dizajna, morate dodati različite elemente na njega. Prvo odaberite padajući izbornik klikom na nju. Dreamweaver će staviti drugu točkastu liniju oko samo padajućeg izbornika kako bi pokazalo da ste ga odabrali.

Svojstva izbornika

Izbornik Properties će se promijeniti na popis / svojstva izbornika za taj padajući izbornik. Tamo možete dati svoj izbornik ID (gdje piše "odaberite"), odlučite želite li biti lis ili izbornik, dati joj stil klase s vašeg stilskog lista i dodijeliti vrijednosti padajućem izborniku.

Koja je razlika između popisa i izbornika?

Dreamweaver poziva padajući izbornik bilo kojeg padajućeg izbornika koji omogućuje samo jedan odabir. "Popis" omogućuje više izbora u padajućem izborniku i može biti više od jedne stavke visoke.

Ako želite da padajući izbornik bude veći broj linija, promijenite ga u "popis" i ostavite okvir "odabira" neoznačenima.

Dodaj nove stavke popisa

Da biste dodali nove stavke na svoj izbornik, kliknite gumb "Popis vrijednosti …". To će otvoriti gornji prozor. Unesite oznaku stavke u prvom okviru. To će se prikazati na stranici. Ako vrijednost ostavite prazna, to će biti ono što će biti poslano u obrascu.

Dodajte više i ponovno naručite

Kliknite ikonu plus da biste dodali više stavki. Ako ih želite ponovno naručiti u okviru popisa, upotrijebite strelice gore i dolje s desne strane.

Dajte vrijednosti svih stavki

Kao što sam spomenuo u 8. koraku, ako ostavite praznu vrijednost, oznaka će biti poslana na obrazac. Ali možete dati sve stavke vrijednosti - za slanje alternativnih informacija u svoj obrazac. To ćete mnogo koristiti za stvari kao što su skočni izbornici i hipervezu.

Odaberite zadano

Web stranice zadane za prikazivanje bilo koje padajuće stavke navedeno je kao zadana stavka. Ali ako želite odabrati neki drugi, označite ga u okviru "Inicijalno odabran" na izborniku Svojstva.

Pogledajte svoj popis u prikazu dizajna

Kada dovršite uređivanje svojstava, Dreamweaver će prikazati vaš padajući popis s odabranom zadanom vrijednosti.

Pogledajte svoj popis u prikazu koda

Ako se prebacite na prikaz koda, možete vidjeti da Dreamweaver dodaje vaš padajući izbornik s vrlo čistim kodom. Jedini dodatni atributi su one koje smo dodali s opcijama pristupačnosti. Kôd je razveden i vrlo jednostavan za čitanje i razumijevanje. Čak i stavlja u odabrani = "odabrani" atribut jer sam rekao Dreamweaveru da sam zadano pisanje XHTML-a.

Spremi i pregledajte u pregledniku

Ako spremite dokument i pregledate ga u web pregledniku, možete vidjeti da vaš padajući izbornik izgleda baš kao što biste to očekivali.

Ali ne radi ništa …

Izbornik koji smo stvorili gore izgleda dobro, ali ništa ne čini. Da biste to učinili da nešto poduzmete, trebate postaviti obrazac na samom obrascu.

Srećom, Dreamweaver ima ugrađeni padajući izbornik koji možete odmah upotrebljavati na svojoj web-lokaciji bez potrebe da saznate više o obrascima, CGI-ovima ili skriptiranju. Zove se Skočni izbornik.

Dreamweaver Jump Menu postavlja padajući izbornik s imenima i URL-ovima. Tada možete odabrati stavku u izborniku i web stranica će se premjestiti na to mjesto, baš kao da ste kliknuli vezu.

Idite na izbornik Umetanje i odaberite Obrazac, a zatim Skoči izbornik.

Prozor izbornika Skoči

Za razliku od standardnog padajućeg izbornika, izbornik "Skoči" otvara novi prozor za unos stavki izbornika i dodavanje pojedinosti o načinu na koji bi obrazac trebao funkcionirati.

Za prvu stavku promijenite tekst "untitled1" na ono što želite da pročita i doda URL koji bi se trebao povezati.

Dodajte stavke u svoj skočni izbornik

Kliknite na dodaj stavku da biste dodali novu stavku u svoj izbornik skoka. Dodajte što više stavki koje želite.

Mogućnosti izbornika Skoči

Nakon što dodate sve željene veze, trebate odabrati svoje mogućnosti:

Otvori URL - ove u sustavu

Ako imate okvire, možete otvoriti veze u drugom okviru. Ili možete promijeniti opciju glavnog prozora posebnom cilju tako da se URL otvori u novom prozoru ili drugdje.

Naziv izbornika

Dajte izborniku jedinstveni ID stranice. To je potrebno kako bi skripta ispravno radila. Također vam omogućuje da na jednom obrascu imate više skočnih izbornika - samo im dajte sva druga imena.

Umetnite gumb Go nakon izbornika

Volim odabrati ovo jer ponekad skripta ne radi kada se izbornik mijenja. Također je dostupnija.

Odaberite prvu stavku nakon izmjene URL-a

Odaberite ovo ako imate prompt poput "Select one" kao prve stavke izbornika. To će osigurati da ta stavka ostaje zadana na stranici.

Izgled dizajna izbornika skoči

Baš kao i kod prvog izbornika, Dreamweaver postavlja vaš izbornik skočnog prozora u prikazu dizajna s prikazom zadane stavke. Zatim možete urediti padajući izbornik kao i bilo koji drugi.

Ako ga uredite, nemojte mijenjati nikakve ID-ove na stavkama, inače skript možda neće raditi.

Skoči izbornik u pregledniku

Spremanje datoteke i udaranje F12 prikazat će stranicu u željenom pregledniku. Tamo možete odabrati neku opciju, kliknuti "Idi" i raditi skočni izbornik!