Dreamweaver ļauj viegli izveidot nolaižamās izvēlnes jūsu vietnei. Bet, tāpat kā visas HTML formas, tās var būt nedaudz sarežģītas. Šī apmācība palīdzēs jums izveidot Dreamweaver nolaižamās izvēlnes.
Dreamweaver Pārlēkt Izvēlnes
Dreamweaver 8 arī nodrošina vedni, lai izveidotu lēciena izvēlni navigācijai jūsu tīmekļa vietnē. Atšķirībā no pamata nolaižamajām izvēlnēm šī izvēlne faktiski kaut ko darīs, kad būsit pabeidzis. Jums nevajadzēs rakstīt nevienu JavaScript vai CGI, lai jūsu nolaižamā veidlapa darbotos. Šajā apmācībā arī izskaidrots, kā izmantot vedni Dreamweaver 8, lai izveidotu lēciena izvēlni.
01 no 20
Vispirms izveidojiet veidlapu
Svarīga piezīme par HTML formām un Dreamweaver:
Izņemot īpašos burvotājus, piemēram, lēciena izvēlni, Dreamweaver nepalīdz jums padarīt HTML formas "darbu". Tam jums nepieciešams CGI vai JavaScript. Lūdzu, skatiet manu pamācību Padarīt HTML veidlapu darbu, lai iegūtu plašāku informāciju.
Kad jūs savai vietnei pievienojat nolaižamo izvēlni, pirmā lieta, kas jums nepieciešams, ir veidlapa, kas to ieskauj. Programmā Dreamweaver atveriet izvēlni Ievietot un noklikšķiniet uz Form, tad izvēlieties "Form".
02 no 20
Veidlapa tiek parādīta dizaina skatā
Dreamweaver vizuāli attēlo jūsu formas atrašanās vietu dizaina skatījumā, tāpēc jūs zināt, kur ievietot formas elementus. Tas ir svarīgi, jo nolaižamā izvēlnes tagi nav derīgi (un nedarbosies) ārpus formas elementa. Kā redzat attēlā, forma ir sarkanā punktēta līnija dizaina skatā.
03 no 20
Izvēlieties sarakstu / izvēlni
Nolaižamās izvēlnes tiek sauktas par "saraksta" vai "izvēlnes" vienumiem Dreamweaver. Tātad, lai pievienotu savu veidlapu, jums jāieiet izvēlnes Veidne izvēlnē Ievietot un izvēlieties "Saraksts / izvēlne". Pārliecinieties, vai jūsu kursors atrodas jūsu veidlapas lodziņa sarkanajā punktētajā rindā.
04 no 20
Īpašo iespēju logs
Dreamweaver opcijās ir pieejamas pieejamības ekrāns. Es izvēlējos Dreamweaver parādīt man visus pieejamības atribūtus. Un šis ekrāns ir tā rezultāts. Veidlapas ir vieta, kur daudzās vietnēs tiek samazināta pieejamība, un, aizpildot šīs piecas iespējas, jūsu nolaižamās izvēlnes būs uzreiz pieejamas.
05 no 20
Veidlapas pieejamība
Pieejamības iespējas ir šādas:
Uzlīme
Tas ir lauka nosaukums. Tas parādīsies kā teksts blakus jūsu veidlapas elementam.
Uzrakstiet, ko vēlaties izsaukt no nolaižamās izvēlnes. Tas var būt jautājums vai īsa frāze, kuru atbildēs nolaižamā izvēlne.
Stils
HTML ietver marķējuma tagu, lai identificētu veidlapas etiķetes pārlūkprogrammā. Jūsu izvēle ir ietvert nolaižamo izvēlni un etiķetes tekstu ar atzīmi, lai marķējuma tagā izmantotu atribūtu "for", lai identificētu, uz kāda veida tagu tā atsaucas, vai arī nelietotu marķējuma tagu vispār.
Es gribētu izmantot atribūtu, jo tad, ja kāda iemesla dēļ man vajadzēs pārvietot marķējumu, tas joprojām tiks pievienots pareiza veidlapas laukam.
Amats
Jūs varat ievietot marķējumu pirms vai pēc nolaižamās izvēlnes.
Piekļuves atslēga
Šis ir atslēga, kuru var izmantot kopā ar Alt vai Option taustiņiem, lai nokļūtu tieši šīs veidlapas laukā. Tādējādi jūsu veidlapas ir ļoti viegli izmantot bez peles nepieciešamības. Kā iestatīt piekļuves atslēgu HTML
Cilnes indekss
Šis ir kārtojums, kādā, izmantojot tastatūru, vajadzētu piekļūt veidlapas laukam, lai atvērtu tīmekļa lapu. Izpratne par Tabindex
Kad esat atjauninājis pieejamības iespējas, noklikšķiniet uz Labi.
06 no 20
Izvēlieties Izvēlne
Kad jūsu nolaižamajā izvēlnē ir redzams dizaina skats, tam jāpievieno dažādi elementi. Vispirms izvēlieties nolaižamo izvēlni, noklikšķinot uz tā. Dreamweaver nodos vēl vienu punktinātu līniju ap nolaižamo izvēlni, lai parādītu, ka esat to izvēlējies.
07 no 20
Izvēlnes rekvizīti
Īpašuma izvēlne mainīsies uz nolaižamo izvēlni saraksta / izvēlnes rekvizītus. Tur jūs varat piešķirt savai izvēlnei ID (kur tas saka "izvēlieties"), izlemt, vai vēlaties, lai tas būtu lis vai izvēlne, piešķirtu tai stila klasi no jūsu stila lapas un piešķirtu nolaižamajā sarakstā vērtības.
Kāda ir atšķirība starp sarakstu un izvēlni?
Dreamweaver aicina izvēlnes nolaižamo izvēlni jebkurā nolaižamajā izvēlnē, kas ļauj veikt tikai vienu atlasi. "Saraksts" ļauj nolaižamajā izvēlnē veikt vairākas iespējas un var būt lielāks par vienu vienumu.
Ja vēlaties, lai nolaižamajā izvēlnē būtu vairākas līnijas, mainiet to uz "saraksta" veidu un atstājiet atzīmi no izvēles rūtiņas.
08 no 20
Pievienot jaunus saraksta vienumus
Lai izvēlnē pievienotu jaunus vienumus, noklikšķiniet uz pogas Saraksta vērtības .... Tas atvērs iepriekš minēto logu. Ievadiet savas preces marķējumu pirmajā lodziņā. Tas parādīsies lapā. Ja atstājat vērtību tukšu, tas ir arī tas, kas tiks nosūtīts formā.
09 no 20
Pievienot vairāk un pārkārtot
Lai pievienotu vairāk vienumu, noklikšķiniet uz pluszīmes ikonas. Ja vēlaties sarakstu atkārtoti pasūtīt, izmantojiet augšupvērsto un lejupvērsto bultiņu pa labi.
10 no 20
Piešķiriet visu vērtību vērtības
Kā es minēju 8. solī, ja atstājat vērtību tukšu, etiķete tiks nosūtīta uz veidlapu. Bet jūs varat norādīt visas savas preces vērtības - nosūtīt alternatīvu informāciju savai veidlapai. Jūs to izmantosiet daudz, piemēram, izlēkt izvēlnēs.
11 no 20
Izvēlieties noklusējumu
Tīmekļa vietnes noklusējums nozīmē, ka vispirms tiek parādīts viss nolaižamais vienums kā noklusējuma vienums. Bet, ja vēlaties atlasīt citu, atzīmējiet to izvēlnē Rekvizīti lodziņā "Sākotnēji izvēlēti".
12 no 20
Skatiet savu sarakstu dizaina skatā
Kad esat pabeidzis rediģēt rekvizītus, Dreamweaver parādīs jūsu nolaižamo sarakstu ar noklusējuma vērtību.
13 no 20
Skatiet savu sarakstu kodu skatā
Ja pārejat uz koda skatu, jūs varat redzēt, ka Dreamweaver pievieno jūsu nolaižamo izvēlni ar ļoti tīru kodu. Vienīgie papildu atribūti ir tie, kurus mēs pievienojām ar pieejamības iespējām. Kods ir izliekts un ļoti viegli lasāms un saprotams. Tas pat iezīmē atlasītā = "selected" atribūtu, jo es teicu Dreamweaver, ka es noklusēju rakstīt XHTML.
14 no 20
Saglabājiet un skata pārlūkprogrammā
Ja jūs saglabājat dokumentu un apskatāt to tīmekļa pārlūkprogrammā, varat redzēt, ka jūsu nolaižamā izvēlne izskatās tā, kā jūs to sagaidāt.
15 no 20
Bet tas neko nedara
Iepriekš izveidotā izvēlne izskatās labi, taču tā neko nedara. Lai to paveiktu, jums ir jāizveido formas darbība, kas ir pati pilnā forma, kas ir pilnīgi cita apmācība.
Par laimi, Dreamweaver ir iebūvēta nolaižamā izvēlne, kuru varat izmantot nekavējoties savā vietnē, bez nepieciešamības uzzināt par veidlapām, CGI vai skriptiem. To sauc par Jump Menu.
Dreamweaver Jump izvēlne izveido nolaižamo izvēlni ar nosaukumiem un URL. Tad jūs varat izvēlēties vienumu izvēlnē, un Web lapa pārvietosies uz šo vietu, tāpat, ja jūs būtu noklikšķinājis uz saites.
Atveriet izvēlni Ievietot un izvēlieties formu un pēc tam izvēlni Pārlēkt.
16 no 20
Pārlēkt izvēlnes logu
Atšķirībā no standarta nolaižamās izvēlnes, Jump izvēlnē tiek atvērts jauns logs, kurā varat norādīt izvēlnes vienumus un pievienot detalizētu informāciju par formas darbību.
Pirmajam vienumam mainiet tekstu "untitled1" uz to, ko vēlaties lasīt, un pievienojiet URL, uz kuru šai saitei vajadzētu iet.
17 no 20
Pievienot vienumus jūsu Jump izvēlnē
Noklikšķiniet uz pievienošanas vienuma, lai pievienotu jaunu vienumu jūsu izlēkt izvēlnē. Pievienojiet tik daudz priekšmetu, cik vēlaties.
18 no 20
Pārlēkt izvēlnes opcijas
Kad esat pievienojis visas vajadzīgās saites, jums vajadzētu izvēlēties savas opcijas:
Atvērt URL
Ja jums ir frameset, varat atvērt saites citā rūtī. Vai arī jūs varat mainīt galvenā loga opciju uz īpašu mērķi, lai URL atvērtu tajā jaunā logā vai citur.
Izvēlnes nosaukums
Piešķiriet savai izvēlnei unikālu lapas kodu. Tas ir vajadzīgs, lai skripts darbotos pareizi. Tas arī ļauj jums izveidot vairākas izvēlnes lēciena vienā veidā - vienkārši dodiet viņiem visus dažādus vārdus.
Ievietot pogas Go pēc izvēlnes
Man patīk to izvēlēties, jo reizēm skice nedarbojas, kad izvēlne mainās. Tas ir arī pieejamāks.
Izvēlieties pirmo vienumu pēc URL maiņas
Izvēlieties šo opciju, ja pirmajā izvēlnes vienībā ir tāda uzvedne kā "Izvēlieties vienu". Tas nodrošinās, ka šis vienums lapā paliek nemainīgs.
19 no 20
Pārlēkt izvēlnes dizaina skatu
Tāpat kā ar savu pirmo izvēlni, Dreamweaver izveido lēcienu izvēlni dizaina skatījumā, izmantojot noklusējuma elementu. Pēc tam varat rediģēt nolaižamo izvēlni, piemēram, jebkuru citu.
Ja to rediģējat, noteikti neaizstājiet nevienu elementu ID, pretējā gadījumā skripts var nedarboties.
20 no 20
Pārlēkt izvēlni pārlūkprogrammā
Saglabājot failu un sasniedzot F12, tiks parādīta jūsu vēlamā pārlūkprogramma. Tur jūs varat izvēlēties opciju, noklikšķiniet uz "Iet" un izvēlnē "Pārlēkt" darbojas!