Pinapadali ng Dreamweaver ang mga drop-down menu para sa iyong Web site. Ngunit tulad ng lahat ng mga form sa HTML maaari silang maging isang bit nakakalito. Tutulungan ka ng tutorial na ito sa mga hakbang sa paglikha ng isang drop-down na menu sa Dreamweaver.
Mga Jump Jump ng Dreamweaver
Nagbibigay din ang Dreamweaver 8 ng isang wizard upang lumikha ng jump menu para sa nabigasyon sa iyong Web site. Hindi tulad ng mga pangunahing drop-down na menu, ang menu na ito ay gagawin ang isang bagay kapag natapos ka na. Hindi mo na kailangang magsulat ng anumang JavaScript o CGIs upang makuha ang iyong drop-down na form upang gumana. Ipinapaliwanag din ng tutorial na ito kung paano gamitin ang wizard ng Dreamweaver 8 upang lumikha ng jump menu.
01 ng 20
Una Lumikha ng Form
Mahalagang Paalala Tungkol sa Mga Form ng HTML at Dreamweaver:
Maliban sa mga espesyal na wizard tulad ng jump menu, ang Dreamweaver ay hindi nakatutulong sa iyo na gumawa ng mga form na "work" sa HTML. Para sa mga ito kailangan mo ng isang CGI o JavaScript. Pakitingnan ang aking tutorial Paggawa ng Mga Form ng Trabaho sa HTML para sa higit pang impormasyon.
Kapag nagdadagdag ka ng isang 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".
02 ng 20
Form Ipinapakita ang Disenyo sa Disenyo
Ipinapakita ng Dreamweaver ang lokasyon ng iyong form sa view ng disenyo, kaya alam mo kung saan ilalagay ang iyong mga elemento ng form. Mahalaga ito, dahil ang mga tag ng drop-down menu ay hindi wasto (at hindi gagana) sa labas ng elemento ng form. Gaya ng makikita mo sa larawan, ang form ay ang pulang tuldok na linya sa pagtingin sa disenyo.
03 ng 20
Pumili ng Listahan / Menu
Ang mga drop-down na menu ay tinatawag na "listahan" o "menu" na mga item sa Dreamweaver. Kaya upang magdagdag ng isa sa iyong form, kailangan mong pumunta sa Form menu sa Insert menu at piliin ang "List / Menu". Tiyaking ang iyong cursor ay nasa loob ng pulang tuldok na linya ng iyong kahon ng form.
04 ng 20
Espesyal na Window ng Mga Pagpipilian
Sa Mga Pagpipilian sa Dreamweaver mayroong isang screen sa Accessibility. Pinipili ko na ipakita sa Dreamweaver sa akin ang lahat ng mga attribute sa accessibility. At ang screen na ito ay ang resulta nito. Ang mga form ay isang lugar kung saan maraming mga Web site na bumagsak sa pagkarating at sa pamamagitan ng pagpuno ng limang mga pagpipilian na ito ang iyong mga drop-down na menu ay agad na magiging mas madaling ma-access.
05 ng 20
Form Accessibility
Ang Mga Pagpipilian sa accessibility ay:
Tatak
Ito ang pangalan para sa larangan. Ito ay lalabas bilang teksto sa tabi ng iyong elemento ng form.
Isulat kung ano ang nais mong tawagan ang iyong drop-down na menu. Maaari itong maging isang tanong o maikling parirala na sasagutin ng drop-down na menu.
Estilo
Kasama sa HTML ang label ng label upang matukoy ang iyong mga label ng form sa browser. Ang iyong mga pagpipilian ay upang i-wrap ang drop-down na menu at ang label na teksto gamit ang tag, upang gamitin ang "para sa" na katangian sa tag ng label upang matukoy kung anong form ang tumutukoy sa tag, o upang hindi gamitin ang tag ng label sa lahat.
Mas gusto kong gamitin ang para sa katangian, tulad noon kung kailangan ko upang ilipat ang label para sa ilang mga dahilan na ito ay naka-attach pa rin sa tamang field ng form.
Posisyon
Maaari mong ilagay ang iyong label bago o pagkatapos ng drop-down na menu.
Access Key
Ito ang susi na maaaring magamit kasama ng Alt o Pagpipilian key upang makakuha ng direkta sa field na form na iyon. Ginagawa nitong napakadaling gamitin ang iyong mga form nang hindi nangangailangan ng isang mouse. Paano Mag-set Up ng Access Key sa HTML
Tab Index
Ito ang pagkakasunud-sunod kung saan dapat ma-access ang field ng form kapag ginagamit ang tab na keyboard sa pamamagitan ng Web page. Pag-unawa sa Tabindex
Kapag na-update mo ang iyong mga opsyon sa pag-access, i-click ang OK.
06 ng 20
Piliin ang Menu
Sa sandaling mayroon kang drop-down na menu na nagpapakita sa view ng disenyo, kailangan mong idagdag ang iba't ibang elemento dito. Piliin muna ang drop-down na menu sa pamamagitan ng pag-click dito. Maglalagay ng isa pang tuldok na linya sa Dreamweaver sa drop-down na menu lamang, upang ipakita na napili mo ito.
07 ng 20
Mga Katangian ng Menu
Ang mga menu ng properties ay magbabago sa mga katangian ng listahan / menu para sa drop-down na menu. Mayroong maaari mong bigyan ang iyong menu ng ID (kung saan sinasabi nito na "piliin"), magpasya kung gusto mo itong maging isang lis o isang menu, bigyan ito ng estilo ng klase mula sa iyong style sheet, at magtalaga ng mga halaga sa drop-down.
Ano ang Pagkakaiba sa Pagitan ng Listahan at Menu?
Tinatawag ng Dreamweaver ang drop-down na menu ng anumang drop-down na nagbibigay-daan lamang sa isang pagpipilian. Ang isang "listahan" ay nagbibigay-daan sa maraming mga pagpipilian sa drop-down at maaaring maging higit sa isang item na mataas.
Kung nais mo ang isang drop-down na menu na maging maramihang mga linya mataas, baguhin ito sa isang "listahan" uri at iwanan ang "seleksyon" kahon walang check.
08 ng 20
Magdagdag ng Mga Bagong List Item
Upang magdagdag ng mga bagong item sa iyong menu, mag-click sa pindutan ng "Listahan ng mga halaga ...". Magbubukas ito sa window sa itaas. I-type ang iyong label ng item sa unang kahon. Ito ang ipapakita sa pahina. Kung iniiwan mo ang halaga ng blangko, iyon rin ang ipapadala sa form.
09 ng 20
Magdagdag ng Higit pa at Mag-order muli
Mag-click sa plus icon upang magdagdag ng higit pang mga item. Kung nais mong muling i-order ang mga ito sa kahon ng listahan, gamitin ang pataas at pababang mga arrow sa kanan.
10 ng 20
Bigyan ang Lahat ng Mga Halaga ng Mga Item
Tulad ng nabanggit ko sa hakbang 8, kung iniwan mo ang halaga ng blangko, ang label ay ipapadala 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 ng maraming para sa mga bagay tulad ng mga jump na menu.
11 ng 20
Pumili ng Default
Ang default na mga pahina ng web sa pagpapakita ng alinmang drop-down item ay unang nakalista bilang default na item. Ngunit kung gusto mo ng ibang pinili, i-highlight ito sa "Initially selected" na kahon sa menu ng Properties.
12 ng 20
Tingnan ang Iyong Listahan sa Disenyo sa Disenyo
Sa sandaling tapos ka na sa pag-edit ng mga katangian, ipapakita ng Dreamweaver ang iyong drop-down na listahan gamit ang napiling default na halaga.
13 ng 20
Tingnan ang Iyong Listahan sa Code View
Kung lumipat ka sa view ng code, maaari mong makita na ang Dreamweaver ay nagdaragdag ng iyong drop-down na menu na may napakalinaw na code. Ang tanging dagdag na mga katangian ang mga idinagdag namin sa mga opsyon sa pag-access. Ang code ay naka-indent at napakadaling basahin at maunawaan. Kahit na inilalagay ito sa napiling = "napiling" attribute dahil sinabi ko sa Dreamweaver na ako ay default sa pagsusulat ng XHTML.
14 ng 20
I-save at Tingnan sa Browser
Kung i-save mo ang dokumento at tingnan ito sa isang Web browser, maaari mong makita na ang iyong drop-down na menu ay mukhang tulad ng iyong inaasahan.
15 ng 20
Ngunit Hindi NINYO GAWIN
Ang menu na nilikha namin sa itaas ay mukhang maganda, ngunit hindi ito ginagawa. Upang magawa ito upang magawa ang isang bagay, kailangan mong mag-set up ng isang action form sa form mismo, kung saan ay isang ganap na iba pang tutorial.
Sa kabutihang-palad, ang Dreamweaver ay may built-in na drop-down na form ng menu na maaari mong gamitin kaagad sa iyong site nang hindi nangangailangan na malaman ang tungkol sa mga form, CGIs, o scripting. Ito ay tinatawag na Jump Jump.
Ang Dreamweaver Jump Menu ay nagtatakda ng isang drop-down na menu na may mga pangalan at URL. Pagkatapos ay maaari kang pumili ng isang item sa menu at ang pahina ng Web ay lilipat sa lugar na iyon, tulad ng kung nag-click ka ng isang link.
Pumunta sa menu ng Insert at piliin ang Form at pagkatapos Tumalon sa Menu.
16 ng 20
Tumalon sa Window ng Menu
Hindi tulad ng karaniwang drop-down na menu, ang Jump menu ay magbubukas ng isang bagong window para sa iyo na pangalanan ang iyong mga item sa menu at magdagdag ng mga detalye kung paano gumagana ang form.
Para sa unang item, palitan ang tekstong "untitled1" sa kung ano ang gusto mong basahin at magdagdag ng isang URL na dapat magamit sa link na iyon.
17 ng 20
Magdagdag ng Mga Item sa iyong Jump Menu
Mag-click sa add item upang magdagdag ng bagong item sa iyong jump menu. Magdagdag ng maraming mga item hangga't gusto mo.
18 ng 20
Tumalon sa Mga Pagpipilian sa Menu
Sa sandaling naidagdag mo ang lahat ng mga link na gusto mo, dapat mong piliin ang iyong mga pagpipilian:
Buksan ang Mga URL
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 upang ang URL ay magbubukas sa sa isang bagong window o sa ibang lugar.
Pangalan ng Menu
Bigyan ang iyong menu ng isang natatanging ID para sa pahina. Kinakailangan ito upang ang script ay gagana nang wasto. Pinapayagan din nito na magkaroon ng maraming mga menu ng jump sa isang form - bigyan lamang ang mga ito ng lahat ng iba't ibang mga pangalan.
Ipasok ang Pindutan ng Pindutan Pagkatapos ng Menu
Gusto kong piliin ito dahil kung minsan ang script ay hindi gumagana kapag nagbabago ang menu. Ito ay mas madaling ma-access.
Piliin ang Unang Item Pagkatapos Baguhin ang URL
Piliin ito kung mayroon kang isang prompt tulad ng "Pumili ng isa" bilang unang item ng menu. Ito ay siguraduhin na ang item na iyon ay mananatiling default sa pahina.
19 ng 20
Tumungo sa View Design ng Menu
Tulad ng sa iyong unang menu, itinatakda ng Dreamweaver ang iyong jump menu sa view ng disenyo nang nakikita ang default na item. Pagkatapos ay maaari mong i-edit ang drop-down na menu tulad ng gagawin mo sa iba.
Kung gagawin mo itong i-edit, tiyaking huwag baguhin ang anumang mga ID sa mga item, kung hindi man ang script ay maaaring hindi gumana.
20 ng 20
Tumalon sa Menu sa Browser
Ang pag-save ng file at pagpindot sa F12 ay magpapakita ng pahina sa iyong ginustong browser. Mayroong maaari kang pumili ng isang pagpipilian, i-click ang "Go" at gumagana ang jump menu!