Ano ang Dapat Malaman
- Pumunta sa Insert > Form > Form. I-click ang may tuldok na pulang linya sa form at pumunta sa Insert > Form > List/Menu. Pumili ng mga opsyon sa pagiging naa-access.
- I-click ang menu at piliin ang mga property nito, pagkatapos ay piliin ang List values upang magdagdag ng mga bagong item sa menu. I-click ang plus sign upang magdagdag ng higit pang mga item.
- Magdagdag ng mga value ng item at pumili ng default na item. Para magdagdag ng mga aksyon, pumunta sa Insert > Form > Jump Menu. Magdagdag ng mga item sa Jump menu at i-save.
Pinapadali ng Dreamweaver ang paggawa ng mga drop-down na menu para sa iyong website. Ngunit tulad ng lahat ng mga form ng HTML, maaari silang maging medyo nakakalito. Gagabayan ka ng tutorial na ito sa mga hakbang sa paggawa ng drop-down na menu sa Dreamweaver.
Dreamweaver Jump Menus
Ang Dreamweaver 8 ay nagbibigay din ng wizard upang lumikha ng jump menu para sa nabigasyon sa iyong Web site. Hindi tulad ng mga pangunahing drop-down na menu, may gagawin ang menu na ito kapag tapos ka na. Hindi mo na kailangang magsulat ng anumang JavaScript o CGI para gumana ang iyong drop-down na form. Ipinapaliwanag din ng tutorial na ito kung paano gamitin ang Dreamweaver 8 wizard para gumawa ng jump menu.
Una, Gumawa ng Form
Maliban sa mga espesyal na wizard tulad ng jump menu, hindi ka tinutulungan ng Dreamweaver na gawing "gumana" ang mga HTML form. Para dito, kailangan mo ng CGI o JavaScript.
Kapag nagdadagdag ka ng drop-down na menu sa iyong Web site, ang unang bagay na kailangan mo ay isang form upang palibutan ito. Sa Dreamweaver, pumunta sa Insert menu at i-click ang Form, pagkatapos ay piliin ang "Form."
Mga Pagpapakita ng Form sa Design View
Ang Dreamweaver ay nagpapakita ng lokasyon ng iyong form nang biswal sa view ng disenyo, para malaman mo kung saan ilalagay ang iyong mga elemento ng form dahil ang mga tag ng drop-down na menu ay hindi wasto (at hindi gagana) sa labas ng elemento ng form. Gaya ng nakikita mo sa larawan, ang form ay ang pulang tuldok-tuldok na linya sa view ng disenyo.
Pumili ng Listahan/Menu
Ang mga drop-down na menu ay tinatawag na "listahan" o "menu" na mga item sa Dreamweaver. Kaya para magdagdag ng isa sa iyong form, kailangan mong pumunta sa Form menu sa Insert menu at piliin ang "List/Menu." Tiyaking nasa loob ng pulang tuldok-tuldok na linya ng iyong form box ang iyong cursor.
Special Options Window
Sa Dreamweaver Options, mayroong screen sa Accessibility. Ang iyong mga drop-down na menu ay agad na magiging mas madaling ma-access kaysa sa iba pang mga website kung pupunan mo ang limang opsyong ito.
Form Accessibility
Ang mga opsyon sa pagiging naa-access ay:
Label
Lalabas ang field ng label bilang text sa tabi ng iyong elemento ng form. Mag-type ng pangalan para sa iyong drop-down na menu. Maaari itong isang tanong o maikling parirala na sasagutin ng drop-down na menu.
Estilo
Ang HTML ay may kasamang tag ng label upang matukoy ang iyong mga label ng form sa web browser. Ang iyong mga pagpipilian ay i-wrap ang drop-down na menu at ang text ng label na may tag, upang gamitin ang attribute na "for" sa tag ng label upang matukoy kung aling form na tag ang tinutukoy nito, o hindi gamitin ang tag ng label.
Posisyon
Maaari mong ilagay ang iyong label bago o pagkatapos ng drop-down na menu.
Access Key
Maaaring gumamit ang mga bisita ng access key na may "Larawan" o Option key upang direktang makapunta sa field ng form na iyon. Ginagawang napakadaling gamitin ng keyboard shortcut na ito ang iyong mga form nang walang mouse. alt="
Tab Index
Ang index ng tab ay kung paano dapat i-access ng mga user ang mga field ng form kapag ginagamit ang keyboard upang mag-tab sa web page.
Kapag na-update mo ang iyong mga opsyon sa pagiging naa-access, i-click ang OK.
Piliin ang Menu
Kapag naipakita mo na ang iyong drop-down na menu sa view ng disenyo ng Dreamweaver, kailangan mong idagdag ang iba't ibang elemento. Una, piliin ang drop-down na menu sa pamamagitan ng pag-click dito. Ang Dreamweaver ay maglalagay ng isa pang tuldok na linya sa paligid lamang ng drop-down na menu upang ipakita na pinili mo ito.
Menu Properties
Ang menu ng mga property ay lilipat sa listahan/mga katangian ng menu para sa drop-down na menu na iyon. Doon ay maaari mong bigyan ang iyong menu ng ID (kung saan nakasulat ang "piliin"), magpasya kung gusto mo itong maging isang listahan o isang menu, bigyan ito ng klase ng istilo mula sa iyong style sheet, at magtalaga ng mga halaga sa drop-down.
Ano ang Pagkakaiba sa pagitan ng Listahan at Menu?
Dreamweaver ay tumatawag sa drop-down na menu ng menu sa anumang drop-down na nagbibigay-daan lamang sa isang pagpipilian. Ang isang "listahan" ay nagbibigay-daan sa maraming pagpipilian sa drop-down at maaaring higit sa isang item ang mataas.
Kung gusto mong maging maraming linya ang drop-down na menu, palitan ito ng uri ng "listahan" at iwanang walang check ang kahon ng "mga pagpipilian."
Magdagdag ng Bagong Listahan ng Mga Item
Upang magdagdag ng mga bagong item sa iyong menu, mag-click sa button na "List values…", na magbubukas sa window sa itaas. Pagkatapos, i-type ang iyong label ng item sa unang kahon. Ipapakita ito sa page.
Magdagdag ng Higit Pa at Muling Isaayos
Mag-click sa icon na plus upang magdagdag ng higit pang mga item. Kung gusto mong muling ayusin ang mga ito sa list box, gamitin ang pataas at pababang mga arrow sa kanan.
Ibigay ang Lahat ng Mga Halaga ng Item
Kung iiwan mong blangko ang value, mapupunta ang label sa form. Ngunit maaari mong ibigay ang lahat ng iyong mga halaga ng item - upang magpadala ng kahaliling impormasyon sa iyong form. Gagamitin mo ito nang husto para sa mga bagay tulad ng mga jump menu at hyperlinking.
Pumili ng Default
Mga web page ang default sa pagpapakita ng alinmang drop-down na item ang unang nakalista bilang default na item. Ngunit kung gusto mong pumili ng iba, i-highlight ito sa kahon na "Initially selected" sa Properties menu.
Tingnan ang Iyong Listahan sa Design View
Kapag tapos mo nang i-edit ang mga property, ipapakita ng Dreamweaver ang iyong drop-down list na may napiling default na value.
Tingnan ang Iyong Listahan sa Code View
Kung lilipat ka sa view ng code, makikita mong idinaragdag ng Dreamweaver ang iyong drop-down na menu na may malinis na code. Ang tanging mga karagdagang katangian ay ang mga opsyon sa pagiging naa-access. Ang code ay naka-indent at napakadaling basahin at maunawaan.
I-save at Tingnan sa Browser
Kung ise-save mo ang dokumento at titingnan ito sa isang web browser, makikita mo na ang iyong drop-down na menu ay mukhang tulad ng inaasahan mo.
Ngunit Wala itong Nagagawa…
Mukhang maayos ang menu na ginawa namin sa itaas, ngunit wala itong ginagawa. Para magawa ito, kailangan mong mag-set up ng pagkilos sa form sa mismong form.
Sa kabutihang-palad, ang Dreamweaver ay may built-in na drop-down na form ng menu na magagamit mo kaagad sa iyong site nang hindi kinakailangang matuto tungkol sa mga form, CGI, o scripting. Ito ay tinatawag na Jump Menu.
Ang Dreamweaver Jump Menu ay nagse-set up ng drop-down na menu na may mga pangalan at URL. Pagkatapos ay maaari kang pumili ng isang item sa menu, at lilipat ang Web page sa lokasyong iyon, tulad ng kung nag-click ka sa isang link.
Pumunta sa Insert menu at piliin ang Form at pagkatapos ay Jump Menu.
Jump Menu Window
Hindi tulad ng karaniwang drop-down na menu, ang Jump menu ay nagbubukas ng bagong window para pangalanan mo ang iyong mga item sa menu at magdagdag ng mga detalye tungkol sa kung paano dapat gumana ang form.
Para sa unang item, baguhin ang text na "un titled1" sa kung ano ang gusto mong basahin nito at magdagdag ng URL.
Magdagdag ng Mga Item sa Iyong Jump Menu
Mag-click sa magdagdag ng item upang magdagdag ng bagong item sa iyong jump menu. Magdagdag ng maraming item hangga't gusto mo.
Jump Menu Options
Kapag naidagdag mo na ang lahat ng link na gusto mo, dapat mong piliin ang iyong mga opsyon:
Buksan ang mga URL Sa
Kung mayroon kang frameset, maaari mong buksan ang mga link sa ibang frame. O maaari mong baguhin ang opsyon ng Main Window sa isang espesyal na target para mabuksan ang URL sa isang bagong window o sa ibang lugar.
Pangalan ng Menu
Bigyan ang iyong menu ng natatanging ID para sa page. Kinakailangan ito upang gumana nang tama ang script. Nagbibigay-daan din ito sa iyo na magkaroon ng maraming jump menu sa isang form - bigyan sila ng iba't ibang pangalan.
Insert Go Button After Menu
Gusto kong piliin ito dahil minsan ay hindi gumagana ang script kapag nagbabago ang menu. Mas naa-access din ito.
Piliin ang Unang Item Pagkatapos ng Pagbabago ng URL
Piliin ito kung mayroon kang prompt gaya ng "Pumili ng isa" bilang unang item sa menu. Titiyakin nitong mananatiling default ang item na iyon sa page.
Jump Menu Design View
Tulad ng una mong menu, ise-set up ng Dreamweaver ang iyong jump menu sa view ng disenyo na nakikita ang default na item. Maaari mong i-edit ang drop-down na menu tulad ng gagawin mo sa iba.
Kung ie-edit mo ito, siguraduhing huwag magpalit ng anumang ID sa mga item; kung hindi, maaaring hindi gumana ang script.
Jump Menu sa Browser
Ang pag-save ng file at pagpindot sa F12 ay ipapakita ang pahina sa iyong gustong browser. Doon maaari kang pumili ng opsyon, i-click ang "Go," at gagana ang jump menu.
