Što treba znati
- Idite na Insert > Form > Form. Pritisnite isprekidanu crvenu liniju na obrascu i idite na Insert > Form > List/Menu. Odaberite opcije pristupačnosti.
- Kliknite izbornik i odaberite njegova svojstva, zatim odaberite Popis vrijednosti za dodavanje novih stavki izbornika. Pritisnite znak plus za dodavanje više stavki.
- Dodajte vrijednosti stavke i odaberite zadanu stavku. Za dodavanje radnji idite Insert > Form > Jump Menu. Dodajte stavke u izbornik Skoči i spremite.
Dreamweaver olakšava stvaranje padajućih izbornika za vaše web mjesto. Ali kao i svi HTML obrasci, oni mogu biti malo nezgodni. Ovaj vodič će vas provesti kroz korake za stvaranje padajućeg izbornika u Dreamweaveru.
Dreamweaver Jump Menus
Dreamweaver 8 također nudi čarobnjaka za stvaranje skočnog izbornika za navigaciju na vašoj web stranici. Za razliku od osnovnih padajućih izbornika, ovaj će izbornik učiniti nešto kada završite. Nećete morati pisati JavaScript ili CGI kako bi vaš padajući obrazac radio. Ovaj vodič također objašnjava kako koristiti čarobnjaka Dreamweaver 8 za stvaranje izbornika za skok.
Prvo, izradite obrazac
Osim posebnih čarobnjaka poput skočnog izbornika, Dreamweaver vam ne pomaže da HTML obrasci "rade". Za ovo vam je potreban CGI ili JavaScript.
Kada dodajete padajući izbornik na svoje web mjesto, prvo što trebate je obrazac koji će ga okružiti. U Dreamweaveru idite na izbornik Umetanje i kliknite Obrazac, zatim odaberite "Obrazac".
Prikazi obrazaca u prikazu dizajna
Dreamweaver vizualno prikazuje lokaciju vašeg obrasca u prikazu dizajna, tako da znate gdje staviti svoje elemente obrasca jer oznake padajućeg izbornika nisu važeće (i neće raditi) izvan elementa obrasca. Kao što možete vidjeti na slici, obrazac je crvena točkasta linija u prikazu dizajna.
Odaberite popis/izbornik
Padajući izbornici nazivaju se stavke "popis" ili "izbornik" u Dreamweaveru. Dakle, da biste ga dodali svom obrascu, trebate otići u izbornik Obrazac na izborniku Umetanje i odabrati "Popis/Izbornik". Provjerite je li vaš kursor bio unutar crvene točkaste linije okvira obrasca.
Prozor posebnih opcija
U opcijama Dreamweavera postoji zaslon na Pristupačnosti. Vaši će padajući izbornici odmah biti dostupniji od ostalih web stranica ako ispunite ovih pet opcija.
Pristupačnost obrazaca
Opcije pristupačnosti su:
Oznaka
Polje oznake prikazuje se kao tekst pored vašeg elementa obrasca. Upišite naziv za svoj padajući izbornik. To može biti pitanje ili kratka fraza na koju će odgovoriti padajući izbornik.
Stil
HTML uključuje oznaku oznake za prepoznavanje vaših oznaka obrasca web pregledniku. Vaš izbor je da omotate padajući izbornik i tekst oznake s oznakom, da koristite atribut "za" na oznaci oznake da identificirate na koju oznaku obrasca upućuje ili da uopće ne koristite oznaku oznake.
Pozicija
Možete postaviti svoju oznaku prije ili iza padajućeg izbornika.
Pristupni ključ
Posjetitelji mogu koristiti pristupni ključ sa "Slika" ili Opcijskim tipkama kako bi izravno došli do tog polja obrasca. Ovaj tipkovnički prečac čini vaše obrasce vrlo jednostavnim za korištenje bez miša. alt="
Indeks kartica
Indeks kartica je način na koji bi korisnici trebali pristupiti poljima obrasca kada koriste tipkovnicu za tabulatore kroz web stranicu.
Kada ažurirate opcije pristupačnosti, kliknite OK.
Odaberite izbornik
Kada se vaš padajući izbornik prikaže u prikazu dizajna Dreamweavera, trebate dodati razne elemente. Najprije odaberite padajući izbornik klikom na njega. Dreamweaver će oko padajućeg izbornika staviti još jednu točkastu crtu kako bi pokazao da ste ga odabrali.
Svojstva izbornika
Izbornik svojstava promijenit će se u svojstva popisa/izbornika za taj padajući izbornik. Tamo svom izborniku možete dati ID (gdje piše "odaberi"), odlučiti želite li da to bude popis ili izbornik, dati mu klasu stila iz vaše tablice stilova i dodijeliti vrijednosti padajućem izborniku.
Koja je razlika između popisa i izbornika?
Dreamweaver padajući izbornik naziva bilo koji padajući izbornik koji dopušta samo jedan odabir. "Popis" omogućuje više izbora u padajućem izborniku i može biti visok više od jedne stavke.
Ako želite da padajući izbornik bude visok više redaka, promijenite ga u vrstu "popis" i ostavite okvir "odabiri" neoznačen.
Dodaj nove stavke popisa
Da biste dodali nove stavke u svoj izbornik, kliknite na gumb "Popis vrijednosti…", koji otvara gornji prozor. Zatim u prvi okvir upišite oznaku artikla. Prikazat će se na stranici.
Dodaj više i promijeni redoslijed
Kliknite na ikonu plus za dodavanje više stavki. Ako ih želite promijeniti u redoslijedu u okviru s popisom, koristite strelice gore i dolje s desne strane.
Dajte vrijednosti svim stavkama
Ako ostavite vrijednost praznom, oznaka će ići u obrazac. Ali svim svojim stavkama možete dati vrijednosti - kako biste poslali alternativne informacije u svoj obrazac. Ovo ćete često koristiti za stvari kao što su skočni izbornici i hiperveze.
Odaberite zadano
Web stranice prema zadanim postavkama prikazuju bilo koju stavku padajućeg izbornika koja je prva navedena kao zadana stavka. Ali ako želite da odaberete neki drugi, označite ga u okviru "Inicijalno odabrano" u izborniku Svojstva.
Pogledajte svoj popis u prikazu dizajna
Kada završite s uređivanjem svojstava, Dreamweaver će prikazati vaš padajući popis s odabranom zadanom vrijednošću.
Pogledajte svoj popis u prikazu koda
Ako se prebacite na prikaz koda, možete vidjeti da Dreamweaver dodaje vaš padajući izbornik s čistim kodom. Jedini dodatni atributi su opcije pristupačnosti. Kod je sav uvučen i vrlo ga je lako čitati i razumjeti.
Spremi i pogledaj u pregledniku
Ako spremite dokument i pogledate ga u web pregledniku, možete vidjeti da vaš padajući izbornik izgleda baš onako kako biste očekivali.
Ali ne radi ništa…
Izbornik koji smo napravili iznad izgleda dobro, ali ne radi ništa. Da biste ga natjerali da nešto učini, trebate postaviti radnju obrasca na samom obrascu.
Srećom, Dreamweaver ima ugrađeni obrazac padajućeg izbornika koji možete odmah koristiti na svojoj web stranici bez potrebe da učite o obrascima, CGI-jima ili skriptiranju. Zove se skočni izbornik.
Dreamweaver Jump Menu postavlja padajući izbornik s imenima i URL-ovima. Zatim možete odabrati stavku u izborniku, a web stranica će se pomaknuti na to mjesto, baš kao da ste kliknuli na poveznicu.
Idite na izbornik Umetanje i odaberite Obrazac, a zatim Skočni izbornik.
Prozor skočnog izbornika
Za razliku od standardnog padajućeg izbornika, izbornik Skok otvara novi prozor za imenovanje stavki izbornika i dodavanje pojedinosti o tome kako obrazac treba raditi.
Za prvu stavku promijenite tekst "un titled1" u ono što želite da čita i dodajte URL.
Dodajte stavke u svoj skočni izbornik
Kliknite na dodaj stavku da biste dodali novu stavku u svoj skočni izbornik. Dodajte onoliko stavki koliko želite.
Opcije skočnog izbornika
Nakon što ste dodali sve veze koje želite, trebali biste odabrati svoje opcije:
Otvori URL-ove u
Ako imate skup okvira, možete otvoriti veze u drugom okviru. Ili možete promijeniti opciju glavnog prozora na poseban cilj tako da se URL otvara u novom prozoru ili negdje drugdje.
Naziv jelovnika
Dajte svom jelovniku jedinstveni ID za stranicu. Potrebno je kako bi skripta radila ispravno. Također vam omogućuje da imate više skočnih izbornika u jednom obliku - dajte im svima različita imena.
Umetni gumb Idi nakon izbornika
Volim odabrati ovo jer ponekad skripta ne radi kada se izbornik promijeni. Također je pristupačniji.
Odaberi prvu stavku nakon promjene URL-a
Odaberite ovo ako imate upit kao što je "Odaberi jedan" kao prvu stavku izbornika. Ovo će osigurati da ta stavka ostane zadana na stranici.
Prikaz dizajna skočnog izbornika
Baš kao s vašim prvim izbornikom, Dreamweaver postavlja vaš skočni izbornik u prikazu dizajna s vidljivom zadanom stavkom. Zatim možete uređivati padajući izbornik kao i svaki drugi.
Ako ga uređujete, pazite da ne promijenite nijedan ID na stavkama; inače skripta možda neće raditi.
Skočni izbornik u pregledniku
Spremanjem datoteke i pritiskom na F12 prikazat će se stranica u vašem željenom pregledniku. Tamo možete odabrati opciju, kliknuti "Idi, " i skočni izbornik radi.
