Unsaon Paghimo sa usa ka Drop-Down Menu sa Dreamweaver

Ang Dreamweaver naghimong sayon ​​sa paghimo sa mga drop-down menu alang sa imong Web site. Apan sama sa tanan nga mga porma sa HTML sila mahimo nga usa ka gamay nga malisud. Kini nga panudlo maglakaw kanimo sa mga lakang sa paghimo sa usa ka drop-down nga menu sa Dreamweaver.

Ang Dreamweaver Jump Menus

Naghatag usab ang Dreamweaver 8 og wizard sa paghimo og jump menu alang sa pag-navigate sa imong Web site. Dili sama sa mga base nga mga drop-down menu, kini nga menu sa aktwal nga buhaton sa usa ka butang kon mahuman ka. Dili ka kinahanglan nga magsulat sa bisan unsang JavaScript o CGIs aron makuha ang imong porma sa drop-down aron magtrabaho. Gihubit usab niini nga panudlo kon unsaon paggamit ang wizard sa Dreamweaver 8 aron makahimo og jump menu.

01 sa 20

Una Paghimo sa Porma

Unsaon Paghimo sa usa ka Drop-Down Menu sa Dreamweaver Una Paghimo sa Form. Screen shot ni J Kyrnin

Importante nga Mubo nga Sulat Bahin sa Mga Porma sa HTML ug Dreamweaver:

Gawas sa mga espesyal nga mga wizard sama sa jump menu, ang Dreamweaver dili makatabang kanimo paghimo sa HTML nga mga porma nga "buhat". Tungod niini nagkinahanglan ka og CGI o JavaScript. Palihug tan-awa ang akong tutorial nga Paghimo sa Mga Porma sa HTML nga Buhat alang sa dugang impormasyon.

Kon nagdugang ka sa usa ka drop-down menu sa imong Web site, ang unang butang nga imong gikinahanglan mao ang usa ka porma nga palibuton kini. Sa Dreamweaver, adto sa Insert menu ug i-klik ang Form, dayon pilia ang "Form".

02 sa 20

Porma Nagpakita sa Disenyo sa Disenyo

Unsaon Paghimo sa usa ka Drop-Down Menu sa Dreamweaver Form Nagpakita sa Design View. Screen shot ni J Kyrnin

Gipakita sa Dreamweaver ang lokasyon sa imong dagway diha sa pagtan-aw sa disenyo, busa nahibal-an mo kung asa ibutang ang imong mga elemento sa porma. Importante kini, tungod kay ang mga tag sa drop-down menu dili balido (ug dili magtrabaho) sa gawas sa porma nga elemento. Sama sa imong makita sa larawan, ang porma mao ang pulang tul-id nga linya sa pagtan-aw sa disenyo.

03 sa 20

Pilia ang List / Menu

Unsaon Paghimo sa usa ka Drop-Down Menu sa Dreamweaver Pilia ang List / Menu. Screen shot ni J Kyrnin

Ang drop-down nga mga menu gitawag nga lista o "menu" nga mga butang sa Dreamweaver. Busa aron makadugang sa usa sa imong porma, kinahanglan ka nga moadto sa Form menu sa Insert menu ug pilion ang "List / Menu". Siguroha nga ang imong cursor anaa sa sulod sa pula nga tuldok nga linya sa imong kahon sa porma.

04 sa 20

Special Options Window

Unsaon Paghimo sa usa ka Drop-Down Menu sa Dreamweaver Special Options Window. Screen shot ni J Kyrnin

Sa Dreamweaver Options dunay screen sa Accessibility. Gipili nako nga ipahibalo sa Dreamweaver kanako ang tanang mga kinaiya sa accessibility. Ug kini nga screen mao ang resulta niana. Ang mga porma usa ka dapit diin daghang mga Web site nga nahulog sa accessibility ug pinaagi sa pagpuno niining lima ka mga kapilian ang imong mga drop-down menu nga diha-diha dayon mahimong mas daling maakses.

05 sa 20

Porma ang Accessibility

Unsaon Paghimo sa usa ka Drop-Down Menu sa Dreamweaver Form Accessibility. Screen shot ni J Kyrnin

Ang Accessibility Options mao ang:

Butangan

Kini ang ngalan sa uma. Kini magpakita ingon nga teksto tupad sa imong porma nga elemento.
Isulat ang gusto nimo nga tawagan ang imong drop-down menu. Mahimo kini nga usa ka pangutana o hamubo nga hugpong sa pulong nga ang tubag sa drop-down nga menu.

Estilo

Naglakip sa HTML ang usa ka label sa tag aron mahibal-an ang imong mga porma sa porma sa browser. Ang imong gipili mao ang pag-wrap sa drop-down menu ug ang label nga teksto sa tag, aron gamiton ang "para sa" nga kinaiya sa tag sa tag aron mahibal-an kung unsang porma ang tag kini nga mga reference, o dili paggamit sa tag sa tag.
Gipalabi nako nga gamiton ang alang sa hiyas, sama kaniadto kung kinahanglan ko nga ibalhin ang marka alang sa usa ka rason kini magpabilin pa sa tukmang porma nga natad.

Posisyon

Mahimo nimo ibutang ang imong marka sa wala pa o human sa drop-down menu.

Access Key

Kini ang yawe nga mahimong gamiton uban sa mga yawe sa Alt o Pagpili nga direkta nga moadto sa porma nga porma. Kini naghimo sa imong mga porma nga sayon ​​kaayo nga gamiton nga walay kinahanglan nga mouse. Unsaon Pag-andam sa Key Access sa HTML

Tab Index

Kini mao ang pagkasunod-sunod diin ang field form kinahanglan nga ma-access sa paggamit sa keyboard ngadto sa tab pinaagi sa Web page. Pagsabut sa Tabindex

Sa diha nga imong gi-update ang imong mga kapilian sa pag-access, i-klik ang OK.

06 sa 20

Pilia ang Menu

Unsaon Paghimo sa usa ka Drop-Down Menu sa Dreamweaver Pilia ang Menu. Screen shot ni J Kyrnin

Sa higayon nga anaa ang imong drop-down menu nga gipakita sa pagtan-aw sa disenyo, kinahanglan nimo nga idugang ang lainlaing elemento niini. Pilia una ang drop-down menu pinaagi sa pag-klik niini. Ang Dreamweaver magbutang sa laing dotted line palibot lang sa drop-down menu, aron ipakita nga imong gipili kini.

07 sa 20

Menu Properties

Unsaon Paghimo sa usa ka Drop-Down Menu sa Dreamweaver Menu Properties. Screen shot ni J Kyrnin

Ang mga kabtangan sa menu mag-usab sa listahan sa mga lista / menu alang sa drop-down nga menu. Diha nimo mahimo ang imong menu nga usa ka ID (diin kini nag-ingon "pagpili"), paghukom kon gusto nimo nga kini usa ka lis o usa ka menu, ihatag kini usa ka estilo nga klase gikan sa imong style sheet, ug ibutang ang mga bili sa drop-down.

Unsa ang kalainan tali sa lista ug Menu?

Ang Dreamweaver nagtawag sa usa ka drop-down menu nga bisan unsang drop-down nga nagtugot lamang sa usa ka pagpili. Ang usa ka "listahan" nagtugot sa daghang pagpili sa drop-down ug mahimong sobra sa usa ka butang nga taas.

Kon gusto nimo ang usa ka drop-down nga menu aron mahimong daghang linya, usba kini sa usa ka "lista" nga klase ug ibilin ang kahon nga "mga seleksyon" nga wala makita.

08 sa 20

Idugang ang Bag-ong Listahan nga mga Butang

Sa unsa nga paagi sa Paghimo sa usa ka Drop-Down Menu sa Dreamweaver Add Bag-ong List Item. Screen shot ni J Kyrnin

Aron makadugang sa bag-ong mga butang sa imong menu, i-klik ang button nga "List values ​​...". Magbukas kini sa bintana sa ibabaw. Isulat ang imong marka sa butang diha sa unang kahon. Mao kini ang ipakita sa panid. Kon ibilin nimo ang blangko nga bili, kana usab ang ipadala sa porma.

09 sa 20

Pagdugang ug Pag-ayo

Sa unsa nga paagi sa Paghimo sa usa ka Drop-Down Menu sa Dreamweaver Add More ug pag-ayo. Screen shot ni J Kyrnin

I-klik ang plus nga icon aron makadugang sa dugang nga mga butang. Kung gusto nimo ibutang pag-usab kini sa listahan sa kahon, gamita ang pataas ug sa ubos nga mga udyong sa tuo.

10 sa 20

Hatagi ang Tanan nga mga Butang

Sa unsa nga paagi sa Paghimo sa usa ka Drop-Down Menu sa Dreamweaver Hatagi ang tanan nga mga Butang Mga Butang. Screen shot ni J Kyrnin

Sama sa akong gihisgutan sa lakang 8, kon ibilin nimo ang blankong bili, ang marka ipadala sa porma. Apan mahimo nimong ihatag ang tanan nimong mga butang nga mga butang - aron magpadala sa alternatibong impormasyon sa imong porma. Mahimo nimo kining gamiton alang sa mga butang sama sa jump menu.

11 sa 20

Pagpili og Default

Unsaon Paghimo sa usa ka Drop-Down Menu sa Dreamweaver Pagpili og Default. Screen shot ni J Kyrnin

Ang mga web page default sa pagpakita sa bisan unsa nga drop-down item nga gilista sa una ingon nga default item. Apan kung gusto nimo nga lain ang gipili, i-highlight kini sa "Initially selected" nga kahon sa Properties menu.

12 sa 20

Tan-awa ang imong lista sa View sa Design

Sa unsa nga paagi sa Paghimo sa usa ka Drop-Down Menu sa Dreamweaver Tan-awa ang imong List sa Design View. Screen shot ni J Kyrnin

Sa higayon nga mahuman ka sa pag-edit sa mga kabtangan, ang Dreamweaver magpakita sa imong drop-down list uban ang default nga bili nga napili.

13 sa 20

Tan-awa ang imong List sa Code View

Unsaon Paghimo sa usa ka Drop-Down Menu sa Dreamweaver Tan-awa ang imong List sa Code View. Screen shot ni J Kyrnin

Kung ikaw molihok sa pagtan-aw sa code, mahimo nimong makita nga ang Dreamweaver nagdugang sa imong drop-down nga menu uban ang limpyo nga code. Ang bugtong sobra nga mga kinaiya mao ang among gidugang uban ang mga kapilian sa pagdali. Ang tanan nga mga lagda ug ang sayon ​​kaayo nga pagbasa ug pagsabut. Nagbutang pa gani kini sa piniling = "gipili" nga kinaiya tungod kay akong gisultihan ang Dreamweaver nga akong gipugos ang pagsulat sa XHTML.

14 sa 20

Luwasa ug Tan-awa sa Browser

Unsaon Paghimo sa usa ka Drop-Down Menu sa Dreamweaver Save and View sa Browser. Screen shot ni J Kyrnin

Kon imong i-save ang dokumento ug tan-awon kini sa usa ka Web browser, imong makita nga ang imong drop-down nga menu sama sa imong gipaabut.

15 sa 20

Apan Kini Wala NAGLAUM

Sa unsa nga paagi sa Paghimo sa usa ka Drop-Down Menu sa Dreamweaver Apan Kini Dili BISANON. Screen shot ni J Kyrnin

Ang menu nga among gibuhat sa ibabaw nindot tan-awon, apan wala kini'y gibuhat. Aron mahimo kini sa usa ka butang, kinahanglang maghimo ka usa ka porma nga aksyon sa porma mismo, nga mao ang usa ka bug-os nga laing panudlo.

Suwerte, ang Dreamweaver adunay usa ka built-in nga drop-down menu nga mahimo nimo gamiton diha-diha dayon sa imong site nga dili kinahanglan nga makat-on mahitungod sa mga porma, CGIs, o scripting. Gitawag kini nga Jump Menu.

Ang Dreamweaver Jump Menu nagbutang sa usa ka drop-down nga menu nga adunay mga ngalan ug mga URL. Dayon makapili ka og usa ka butang diha sa menu ug ang Web page mobalhin ngadto niana nga dapit, sama ra kon nag-klik ka sa usa ka link.

Lakaw ngadto sa Insert menu ug pilia ang Form ug dayon Jump Menu.

16 sa 20

Lakaw Menu Window

Unsaon Paghimo sa usa ka Drop-Down Menu sa Dreamweaver Jump Menu Window. Screen shot ni J Kyrnin

Dili sama sa standard nga drop-down menu, ang Jump menu magbukas sa usa ka bag-o nga bintana aron imong mahibal-an ang imong mga butang nga menu ug idugang ang mga detalye kon unsaon nga ang porma kinahanglan nga magtrabaho.

Alang sa una nga butang, usba ang teksto nga "untitled1" sa unsay gusto nimo nga basahon ug idugang ang usa ka URL nga ang maong link kinahanglan moadto.

17 sa 20

Idugang ang mga Butang sa Imong Laktaw nga Menu

Sa unsa nga paagi sa Paghimo sa usa ka Drop-Down Menu sa Dreamweaver Add Item sa imong Jump Menu. Screen shot ni J Kyrnin

I-klik ang idugang nga butang aron makadugang sa bag-ong butang sa imong jump menu. Idugang ang daghang mga butang nga gusto nimo.

18 sa 20

Pag-opi sa Mga Menu sa Menu

Sa unsa nga paagi sa Paghimo sa usa ka Drop-Down Menu sa Dreamweaver Tumawag Menu Options. Screen shot ni J Kyrnin

Sa higayon nga imong idugang ang tanang mga link nga gusto nimo, kinahanglan nga imong pilion ang imong mga kapilian:

Buksan ang mga URL sa

Kung ikaw adunay frameset, mahimo ka mag-abli sa mga link sa laing frame. O mahimo nimo usbon ang opsyon sa Main Window ngadto sa usa ka espesyal nga target aron ang URL mag-abli sa usa ka bag-o nga bintana o bisan asa.

Pangalan sa Menu

Ihatag ang imong menu sa usa ka talagsaong ID alang sa panid. Gikinahanglan kini aron ang script magtrabaho sa husto. Kini usab nagtugot kanimo nga adunay multiple jump nga mga menu sa usa ka porma - hatagan lang sila sa tanan nga lainlaing ngalan.

Pagsulod sa Go Button Human sa Menu

Ganahan kong mopili niini tungod kay usahay ang script dili molihok kung ang kausaban sa menu. Kini mas sayon ​​usab.

Pagpili sa Unang Item Human sa Kausaban sa URL

Pilia kini kon ikaw adunay prompt sama sa "Pagpili usa" isip unang menu item. Kini makaseguro nga kana nga butang magpabilin nga default sa panid.

19 sa 20

Lakaw sa Disenyo sa Disenyo sa Menu

Unsaon Paghimo sa usa ka Drop-Down Menu sa Dreamweaver Jump Menu Design View. Screen shot ni J Kyrnin

Sama sa imong una nga menu, ang Dreamweaver nagbutang sa imong jump menu sa disenyo nga panglantaw uban sa default item nga makita. Mahimo nimong ma-edit ang drop-down menu sama sa imong gusto.

Kon usisaon mo kini, siguroha nga dili usbon ang bisan unsa nga mga ID sa mga butang, kung dili ang script dili mahimo.

20 sa 20

Lakaw nga Menu sa Browser

Sa unsa nga paagi sa Paghimo sa usa ka Drop-Down Menu sa Dreamweaver Jump Menu sa Browser. Screen shot ni J Kyrnin

Ang pagluwas sa file ug pag-igo sa F12 magpakita sa panid sa imong gusto nga browser. Didto makapili ka og usa ka kapilian, i-klik ang "Go" ug ang jump menu molihok!