Kā izveidot nolaižamo izvēlni programmā Dreamweaver

Satura rādītājs:

Kā izveidot nolaižamo izvēlni programmā Dreamweaver
Kā izveidot nolaižamo izvēlni programmā Dreamweaver
Anonim

Kas jāzina

  • Dodieties uz Ievietot > Veidlapa > Veidlapa. Noklikšķiniet uz veidlapas sarkanās punktētās līnijas un dodieties uz Ievietot > Veidlapa > Saraksts/Izvēlne. Izvēlieties pieejamības opcijas.
  • Noklikšķiniet uz izvēlnes un atlasiet tās rekvizītus, pēc tam atlasiet Vērtību saraksts, lai pievienotu jaunus izvēlnes vienumus. Noklikšķiniet uz plus zīmes, lai pievienotu citus vienumus.
  • Pievienojiet vienumu vērtības un izvēlieties noklusējuma vienumu. Lai pievienotu darbības, dodieties uz Ievietot > Veidlapa > Pārlēkšanas izvēlne. Pievienojiet vienumus izvēlnei Pārlēkt un saglabājiet.

Dreamweaver ļauj ērti izveidot nolaižamās izvēlnes jūsu vietnei. Bet tāpat kā visas HTML formas, tās var būt nedaudz sarežģītas. Šajā pamācībā tiks parādītas darbības, kas jāveic, lai pakalpojumā Dreamweaver izveidotu nolaižamo izvēlni.

Dreamweaver Jump Menus

Dreamweaver 8 nodrošina arī vedni, lai izveidotu pārejas izvēlni navigācijai jūsu vietnē. Atšķirībā no pamata nolaižamajām izvēlnēm, šī izvēlne kaut ko darīs, kad esat pabeidzis. Lai nolaižamā veidlapa darbotos, jums nav jāraksta JavaScript vai CGI. Šajā apmācībā ir arī paskaidrots, kā izmantot Dreamweaver 8 vedni, lai izveidotu pārejas izvēlni.

Vispirms izveidojiet veidlapu

Image
Image

Izņemot īpašus vedņus, piemēram, izvēlni, Dreamweaver nepalīdz jums padarīt HTML veidlapas "darbīgu". Šim nolūkam ir nepieciešams CGI vai JavaScript.

Kad savai vietnei pievienojat nolaižamo izvēlni, vispirms ir nepieciešama veidlapa, kas to ieskauj. Programmā Dreamweaver atveriet izvēlni Ievietot un noklikšķiniet uz Veidlapa, pēc tam izvēlieties "Veidlapa".

Veidlapu displeji dizaina skatā

Image
Image

Dreamweaver vizuāli parāda jūsu veidlapas atrašanās vietu noformējuma skatā, lai jūs zinātu, kur ievietot veidlapas elementus, jo nolaižamās izvēlnes tagi nav derīgi (un nedarbosies) ārpus veidlapas elementa. Kā redzat attēlā, forma ir sarkana punktēta līnija dizaina skatā.

Izvēlēties sarakstu/izvēlni

Image
Image

Dreamweaver nolaižamās izvēlnes sauc par "saraksta" vai "izvēlnes" vienumiem. Tātad, lai to pievienotu savai veidlapai, izvēlnē Ievietot atveriet izvēlni Veidlapa un izvēlieties "Saraksts/izvēlne". Pārliecinieties, vai kursors atrodas veidlapas lodziņa sarkanajā punktētajā līnijā.

Īpašo opciju logs

Image
Image

Dreamweaver opcijās ir pieejamības ekrāns. Ja aizpildīsit šīs piecas opcijas, jūsu nolaižamās izvēlnes būs uzreiz vieglāk pieejamas nekā citas vietnes.

Veidlapu pieejamība

Image
Image

Pieejamības opcijas ir:

Etiķete

Etiķetes lauks tiek parādīts kā teksts blakus veidlapas elementam. Ievadiet nolaižamās izvēlnes nosaukumu. Tas var būt jautājums vai īsa frāze, uz kuru atbildēs nolaižamajā izvēlnē.

Stils

HTML ietver etiķetes tagu, lai tīmekļa pārlūkprogrammā identificētu jūsu veidlapu etiķetes. Varat izvēlēties ietīt nolaižamo izvēlni un etiķetes tekstu ar tagu, izmantot etiķetes taga atribūtu "for", lai noteiktu, uz kuru formas tagu tas attiecas, vai arī neizmantot etiķetes tagu vispār.

Amats

Varat ievietot iezīmi pirms vai pēc nolaižamās izvēlnes.

Piekļuves atslēga

Apmeklētāji var izmantot piekļuves atslēgu ar "Attēls" vai Opciju taustiņiem, lai tieši nokļūtu šajā veidlapas laukā. Šis īsinājumtaustiņš padara jūsu veidlapas ļoti viegli lietojamas bez peles. alt="

Cilņu rādītājs

Ciļņu rādītājs ir veids, kā lietotājiem vajadzētu piekļūt veidlapas laukiem, izmantojot tastatūru, lai tabulētu tīmekļa lapā.

Kad esat atjauninājis pieejamības opcijas, noklikšķiniet uz Labi.

Atlasiet izvēlni

Image
Image

Kad Dreamweaver dizaina skatā ir parādīta nolaižamā izvēlne, jums jāpievieno dažādi elementi. Vispirms atlasiet nolaižamo izvēlni, noklikšķinot uz tās. Dreamweaver ap nolaižamo izvēlni ievietos vēl vienu punktētu līniju, lai parādītu, ka esat to izvēlējies.

Izvēlnes rekvizīti

Image
Image

Rekvizītu izvēlne mainīsies uz šīs nolaižamās izvēlnes sarakstu/izvēlnes rekvizītus. Šeit varat piešķirt savai izvēlnei ID (kur ir rakstīts “atlasīt”), izlemt, vai vēlaties, lai tā būtu saraksts vai izvēlne, piešķirt tai stila klasi no savas stila lapas un piešķirt vērtības nolaižamajai izvēlnei.

Kāda ir atšķirība starp sarakstu un izvēlni?

Dreamweaver izsauc izvēlnes nolaižamo izvēlni jebkuru nolaižamo izvēlni, kas ļauj atlasīt tikai vienu. “Saraksts” ļauj nolaižamajā izvēlnē izvēlēties vairākas izvēles iespējas, un tā augstums var būt vairāk nekā viens vienums.

Ja vēlaties, lai nolaižamā izvēlne būtu vairākas rindiņas augsta, mainiet to uz saraksta veidu un atstājiet neatzīmētu izvēles rūtiņu.

Pievienot jaunus saraksta vienumus

Image
Image

Lai savai izvēlnei pievienotu jaunus vienumus, noklikšķiniet uz pogas Vērtību saraksts…, kas atver iepriekš minēto logu. Pēc tam pirmajā lodziņā ierakstiet preces etiķeti. Tas tiks parādīts lapā.

Pievienot vairāk un pārkārtot

Image
Image

Noklikšķiniet uz pluszīmes ikonas, lai pievienotu citus vienumus. Ja vēlaties tos pārkārtot saraksta lodziņā, izmantojiet labajā pusē esošās augšup un lejup vērstās bultiņas.

Piešķiriet visu vienumu vērtības

Image
Image

Ja atstāsiet vērtību tukšu, etiķete tiks novirzīta uz veidlapu. Bet jūs varat norādīt visu savu vienumu vērtības - lai nosūtītu alternatīvu informāciju uz jūsu veidlapu. Jūs to bieži izmantosit, piemēram, izvēlnēm un hipersaišu veidošanai.

Izvēlieties noklusējumu

Image
Image

Tīmekļa lapās pēc noklusējuma tiek rādīts pirmais nolaižamās izvēlnes vienums kā noklusējuma vienums. Bet, ja vēlaties atlasīt citu, iezīmējiet to izvēlnes Rekvizīti lodziņā "Sākotnēji atlasīts".

Skatiet savu sarakstu dizaina skatā

Image
Image

Kad esat pabeidzis rekvizītu rediģēšanu, Dreamweaver parādīs jūsu nolaižamo sarakstu ar atlasīto noklusējuma vērtību.

Skatiet savu sarakstu koda skatā

Image
Image

Ja pārslēdzaties uz koda skatu, varat redzēt, ka Dreamweaver pievieno jūsu nolaižamo izvēlni ar tīru kodu. Vienīgie papildu atribūti ir pieejamības opcijas. Kods ir ar atkāpi, un tas ir ļoti viegli lasāms un saprotams.

Saglabāt un skatīt pārlūkprogrammā

Image
Image

Ja saglabājat dokumentu un skatāt to tīmekļa pārlūkprogrammā, varat redzēt, ka jūsu nolaižamā izvēlne izskatās tieši tā, kā jūs to gaidāt.

Bet tas neko nedod…

Image
Image

Iepriekš izveidotā izvēlne izskatās labi, taču tā neko nedara. Lai tas kaut ko darītu, veidlapā ir jāiestata veidlapas darbība.

Par laimi, Dreamweaver ir iebūvēta nolaižamās izvēlnes veidlapa, kuru varat nekavējoties izmantot savā vietnē, neapgūstot veidlapas, CGI vai skriptus. To sauc par pārejas izvēlni.

Dreamweaver Jump Menu izveido nolaižamo izvēlni ar nosaukumiem un URL. Pēc tam izvēlnē varat izvēlēties vienumu, un Web lapa tiks pārvietota uz šo vietu, tāpat kā tad, ja jūs būtu noklikšķinājis uz saites.

Atveriet izvēlni Ievietot un izvēlieties Veidlapa un pēc tam Pārlēkšanas izvēlni.

Pārlēkšanas izvēlnes logs

Image
Image

Atšķirībā no standarta nolaižamās izvēlnes, izvēlnē Pārlēkt tiek atvērts jauns logs, kurā varat nosaukt izvēlnes vienumus un pievienot informāciju par to, kā veidlapai vajadzētu darboties.

Pirmajam vienumam mainiet tekstu "un titled1" uz to, ko vēlaties lasīt, un pievienojiet URL.

Pievienojiet vienumus savai pārejas izvēlnei

Image
Image

Noklikšķiniet uz pievienošanas vienuma, lai pievienotu jaunu vienumu savai pārejas izvēlnei. Pievienojiet tik daudz vienumu, cik vēlaties.

Pārlēkšanas izvēlnes opcijas

Image
Image

Kad esat pievienojis visas vajadzīgās saites, izvēlieties savas opcijas:

Atvērt URL mapē

Ja jums ir rāmju kopa, varat atvērt saites citā rāmī. Vai arī varat mainīt galvenā loga opciju uz īpašu mērķi, lai URL tiktu atvērts jaunā logā vai citur.

Izvēlnes nosaukums

Piešķiriet savai izvēlnei unikālu lapas ID. Tas ir nepieciešams, lai skripts darbotos pareizi. Tas arī ļauj vienā formā izveidot vairākas pārejas izvēlnes - piešķiriet tām dažādus nosaukumus.

Ievietot pogu Iet aiz izvēlnes

Man patīk to atlasīt, jo dažreiz skripts nedarbojas, kad mainās izvēlne. Tas ir arī pieejamāks.

Atlasiet pirmo vienumu pēc URL maiņas

Atlasiet šo, ja kā pirmais izvēlnes vienums ir uzvedne, piemēram, "Atlasīt vienu". Tas nodrošinās, ka šis vienums lapā paliks pēc noklusējuma.

Pārlēkšanas izvēlnes noformējuma skats

Image
Image

Tāpat kā pirmajā izvēlnē, arī Dreamweaver iestata jūsu pārejas izvēlni noformējuma skatā ar redzamu noklusējuma vienumu. Pēc tam varat rediģēt nolaižamo izvēlni tāpat kā jebkuru citu.

Ja rediģējat to, noteikti nemainiet vienumu ID; pretējā gadījumā skripts var nedarboties.

Pārlēkšanas izvēlne pārlūkprogrammā

Image
Image

Saglabājot failu un nospiežot taustiņu F12, lapa tiks parādīta jūsu izvēlētajā pārlūkprogrammā. Tur varat atlasīt opciju, noklikšķināt uz "Aiziet", un lēkšanas izvēlne darbosies.

Ieteicams: