Dreamweaver olakšava izradu padajućih izbornika za vaše web stranice. Ali, kao i svi HTML obrasci, mogu biti pomalo lukav. Ovaj vodič će vas provesti kroz korake za stvaranje padajućeg izbornika u Dreamweaveru.
Dreamweaver Skoči izbornici
Dreamweaver 8 također pruža čarobnjak za stvaranje skok izbornika za navigaciju na vašem web mjestu. Za razliku od osnovnih padajućih izbornika, ovaj izbornik zapravo će učiniti nešto kada završite. Nećete morati napisati bilo koji JavaScript ili CGI da biste dobili svoj obrazac s padom na rad. Ovaj vodič također objašnjava kako koristiti Čarobnjak za Dreamweaver 8 za stvaranje skok izbornika.
01 od 20
Prvo stvorite obrazac
Važna napomena o HTML obrascima i Dreamweaveru:
Osim posebnih čarobnjaka poput skočnog izbornika, Dreamweaver vam ne pomaže da HTML obrasci "rade". Za to vam je potrebna CGI ili JavaScript. Više informacija potražite u mojem vodiču izradu HTML obrazaca.
Kada dodajete padajući izbornik na svoje web stranice, prva stvar koju trebate jest obrazac koji ga okružuje. U Dreamweaveru idite na izbornik Umetanje i kliknite Obrazac, a zatim odaberite "Obrazac".
02 od 20
Prikazivanje obrasca u prikazu dizajna
Dreamweaver vizualno prikazuje svoj oblik lokacije u prikazu dizajna, tako da znate gdje staviti elemente obrasca. To je važno jer oznake s padajućim izbornicima nisu važeće (i neće funkcionirati) izvan elementa obrasca. Kao što možete vidjeti na slici, obrazac je crvena točkasta crta u izgledu dizajna.
03 od 20
Odaberite Popis / Izbornik
Padajući izbornici nazivaju se "popis" ili "izbornik" u programu Dreamweaver. Dakle, da biste je dodali u svoj obrazac, morate ući u izbornik Oblik na izborniku Umetanje i odabrati "Popis / Izbornik". Provjerite nalazi li se vaš pokazivač unutar crvene točkaste crte okvira za obrazac.
04 od 20
Prozor posebnih mogućnosti
U Dreamweaver Opcijama nalazi se zaslon Accessibility. Odlučio sam da mi Dreamweaver prikaže sve atribute pristupačnosti. I ovaj ekran je rezultat toga. Obrasci su mjesto na kojem mnoge web stranice padaju u dostupnosti i ispunjavajući ove pet opcija, vaši padajući izbornici odmah će biti dostupniji.
05 od 20
Pristupačnost obrasca
Mogućnosti pristupačnosti su:
Označiti
Ovo je naziv polja. Ona će se prikazati kao tekst pored vašeg elementa obrasca.
Napišite što želite nazvati vaš padajući izbornik. Ovo može biti pitanje ili kratki izraz koji će odgovarati padajućem izborniku.
Stil
HTML sadrži oznaku naljepnice za identifikaciju oznaka obrazaca pregledniku. Vaši su izbori zamotati padajuÄ ‡ i izbornik i tekst oznake oznakom da biste upotrebljavali atribut "za" na oznaci oznake da biste odredili koji obrazac oznaÄŤava reference ili da uopće ne upotrebljavate oznaku oznake.
Radije upotrebljavam za atribut, jer tada, ako moram premjestiti oznaku iz nekog razloga, i dalje će biti priključen na točan polje obrasca.
Položaj
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. Kako postaviti ključ za pristup u HTML
Indeks tabulatora
Ovo je redoslijed kojim se polje obrasca treba pristupiti prilikom korištenja tipkovnice na karticu putem web stranice. Razumijevanje Tabindexa
Kada ažurirate svoje mogućnosti pristupačnosti, kliknite U redu.
06 od 20
Odaberite Izbornik
Nakon što se na padajućem izborniku prikazuje u 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.
07 od 20
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.
08 od 20
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.
09 od 20
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.
10 od 20
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.
11 od 20
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.
12 od 20
Pogledajte svoj popis u prikazu dizajna
Kada dovršite uređivanje svojstava, Dreamweaver će prikazati vaš padajući popis s odabranom zadanom vrijednosti.
13 od 20
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.
14 od 20
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.
15 od 20
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, što je sasvim drugi vodič.
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.
16 od 20
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.
17 od 20
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.
18 od 20
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.
19 od 20
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.
20 od 20
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!