Dreamweaver သင့်ရဲ့ web site ကိုများအတွက် Drop-down menus တွေကိုဖန်တီးရန်လွယ်ကူစေသည်။ သို့သော်အားလုံး HTML ကိုပုံစံအမျိုးမျိုးနဲ့တူသူတို့တစ်တွေနည်းနည်းလှည်နိုင်ပါတယ်။ ဒီသင်ခန်းစာ Dreamweaver အတွက် drop-down menu ကဖန်တီးအဆင့်အားဖြင့်သင်တို့လမ်းလျှောက်ပါလိမ့်မယ်။
Dreamweaver ဤနေရာသို့သွားရန်နူး
Dreamweaver 8 မှာလည်းသင့်ရဲ့ web site ကိုအတွက်အညွှန်းတစ်ခုခုန် menu ကိုဖန်တီးရန် wizard ကိုပေးပါသည်။ သငျသညျကိုလက်စသတ်သောအခါအခြေခံ Drop-down menus တွေမတူဘဲ, ဒီ menu ကိုအမှန်တကယ်တစ်ခုခုလုပ်ပါလိမ့်မယ်။ သငျသညျအလုပျဖို့သင့်ကို drop-down ပုံစံရဖို့ဆို JavaScript ကိုသို့မဟုတ် CGIs ရေးဖို့ရန်ရှိသည်လိမ့်မည်မဟုတ်ပါ။ ဒီသင်ခန်းစာကိုလည်းခုန် menu ကိုဖန်တီးရန် Dreamweaver 8 wizard ကိုမည်သို့အသုံးပြုရမည်ကိုရှင်းပြသည်။
20 01
ပထမဦးဆုံး Form ကို Create
HTML Form များနှင့် Dreamweaver အကြောင်းအရေးကြီးမှတ်ချက်:
အဆိုပါခုန် menu ကိုများကဲ့သို့အထူး wizards မှလွဲ. Dreamweaver သင်က HTML ပုံစံများ "အလုပ်" အောင်မကူညီဘူး။ ဒီအတှကျအသငျသညျ CGI သို့မဟုတ် JavaScript ကိုလိုအပ်ပါတယ်။ ငါ၏အသင်ခန်းစာ HTML Form များပိုမိုသောအချက်အလက်များအဘို့အလုပ် Making ဖတ်ရှုပါ။
သင်သည်သင်၏ web site ကိုမှ drop-down menu ကိုထည့်သွင်းဖွင့်တဲ့အခါမှာ, သင်လိုအပ်ပထမဦးဆုံးအရာကဝိုင်းတစ်ပုံစံဖြစ်ပါတယ်။ Dreamweaver ခုနှစ်တွင်, ထို့နောက် "Form ကို" ကိုရွေးချယ်ပါ, ထို Insert menu ကိုသွားပြီး Form ကို click လုပ်ပါ။
20 02
ဒီဇိုင်းကြည့်ရန်အတွက် Form ကိုပြရန်
Dreamweaver ဒီဇိုင်းအမြင်ထဲမှာအမြင်အာရုံသင့်ရဲ့ပုံစံတည်နေရာကိုပြသထားတယ်, ဒါကြောင့်သင်ဘယ်မှာသင့်ရဲ့ပုံစံဒြပ်စင်ထားရန်ငါသိ၏။ Drop-down menu ကို tags များတရားဝင်မဟုတ် (နှင့်အလုပ်လုပ်မည်မဟုတ်ပေ) ဘာဖြစ်လို့လဲဆိုတော့ဒါကပုံစံဒြပ်စင်၏အပြင်ဘက်တွင်, အရေးကြီးပါသည်။ သင်ပုံတွင်တွေ့မြင်နိုင်သည်နှင့်အမျှပုံစံဒီဇိုင်းအမြင်ထဲမှာအနီရောင်တွေက dotted line ကိုဖြစ်ပါတယ်။
20 03
စာရင်း / Menu ကိုရှေးခယျြပါ
drop-down menus တွေ "စာရင်း" သို့မဟုတ် Dreamweaver မှာ "menu ကို" ပစ္စည်းဟုခေါ်ကြသည်။ ဒါကြောင့်သင့်ရဲ့ပုံစံတစ်ခုပေါင်းထည့်ရန်, သင် Insert menu ကိုအပေါ် Form ကိုမီနူးသို့သွားနှင့် "စာရင်း / Menu ကို" ကိုရွေးချယ်ဖို့လိုအပ်ပါတယ်။ သင့်ရဲ့ cursor သင့်ရဲ့ပုံစံ box ရဲ့အနီတွေက dotted line ကိုအတွင်းခဲ့ကြောင်းသေချာအောင်လုပ်ပါ။
20 04
အထူး Options ကို Window
အဆိုပါ Dreamweaver Options ကိုခုနှစ်တွင်အသုံးပြုနိုင်မှုအပေါ်မျက်နှာပြင်ရှိသေး၏။ ငါ Dreamweaver ငါ့ကို All Access attribute တွေကိုပြသရှိသည်ဖို့ရွေးချယ်ပါ။ ဤရွေ့ကား, မျက်နှာပြင်ကြောင်း၏ရလဒ်ဖြစ်ပါသည်။ ပုံစံများအများအပြားက်ဘ်ဆိုဒ်များကိုအသုံးပြုနိုင်စွမ်းအတွက်နှင့်သင့်ကို drop-down menus တွေချက်ချင်းပိုပြီးသုံးစွဲနိုင်ပါလိမ့်မည်, ဤငါး options များဖြည့်စွက်ခြင်းဖြင့်ပြပ်နေရာရှိပါတယ်။
20 05
form ကိုအသုံးပြုနိုင်မှု
အဆိုပါအသုံးပြုနိုင်စွမ်း Options ကိုနေသောခေါင်းစဉ်:
တံဆိပ်
ဤသည်ကိုလယ်များအတွက်နာမည်ဖြစ်ပါတယ်။ ဒါဟာသင့်ရဲ့ပုံစံဒြပ်စင်ဘေးမှာစာသားကိုအဖြစ်ဖွင့်ပြပါလိမ့်မယ်။
သင်သည်သင်၏ Drop-down menu ကိုမခေါ်ချင်သောအရာကိုရေးပါ။ ဒါက drop-down menu ကိုဖြေဆိုလိမ့်မည်ဟုမေးခွန်းတစ်ခုသို့မဟုတ်အတိုကောက်ထားသောစာပိုဒ်တိုများရှိနိုင်ပါသည်။
စတိုင်
HTML ကို browser ကိုရန်သင့်ပုံစံတံဆိပ်များကိုသိရှိနိုင်ဖို့တစ်တံဆိပ် tag ကိုပါဝင်သည်။ သင့်ရဲ့ရွေးချယ်မှုဟာတံဆိပ် tag ကိုအပေါ် attribute ကိုကကိုးကား tag ကိုဖွဲ့စည်းရာကိုသိရှိနိုင်ဖို့, ဒါမှမဟုတ်အားလုံးမှာတံဆိပ် tag ကိုမသုံးဖို့ "အတွက်" သုံးစွဲဖို့, အ tag နဲ့ drop-down menu နဲ့တံဆိပ်စာသားမခြုံရကြမည်။
ငါကဆဲမှန်ကန်သောပုံစံကိုလယ်မှပူးတွဲပါလိမ့်မည်အချို့သောအကြောင်းပြချက်များအတွက်တံဆိပ်ရွှေ့ဖို့လိုအပ်တယ်ဆိုရင်ထို့နောက်အဖြစ် attribute ကိုများအတွက်သုံးစွဲဖို့လိုလားကြပါတယ်။
ရာထူး
သငျသညျ drop-down menu ကိုမတိုင်မှီသို့မဟုတ်အပြီးတွင်သင့်ရဲ့တံဆိပ်နေရာပေးနိုင်သည်။
access ကို Key ကို
ဒီအကြောင်းပုံစံအကွက်ကိုတိုက်ရိုက်ရရန် Alt သို့မဟုတ် Option ကိုသော့နှင့်အတူသုံးနိုငျသောသော့ချက်ဖြစ်ပါတယ်။ ဒါက mouse ကိုမလိုဘဲအသုံးပြုရန်သင်၏ပုံစံများကိုအလွန်လွယ်ကူစေသည်။ HTML မှာတစ်ဦး Access ကို Key ကို Set Up လုပ်နည်း
tab ကိုအညွှန်း
ဒါဟာ web page ကိုတဆင့် tab ကိုမှကီးဘုတ်တွေကိုအသုံးပြုတဲ့အခါပုံစံကိုလယ်ဝင်ရောက်ရပါမည်သည့်အမိန့်ဖြစ်ပါတယ်။ အဆိုပါ Tabindex နားလည်ခြင်း
သင်သည်သင်၏အသုံးပြုနိုင်စွမ်းရွေးချယ်စရာ updated င့်တဲ့အခါ, OK ကိုကလစ်နှိပ်ပါ။
20 06
အဆိုပါ Menu ကို Select လုပ်ပါ
သငျသညျဒီဇိုင်းအမြင်ထဲမှာပြသသင့်ရဲ့ Drop-down menu ကိုရှိပြီးတာနဲ့သင်ကရန်အမျိုးမျိုးသောဒြပ်စင်ပေါင်းထည့်ဖို့လိုအပ်ပါတယ်။ ပထမဦးဆုံးအပေါ်မှာနှိပ်ခြင်းအားဖြင့် drop-down menu ကိုရွေးပါ။ Dreamweaver သင်ကရွေးချယ်ထားသည့်င့်ကြောင်းပြသနိုင်ဖို့ပဲ drop-down menu ကိုလှည့်ပတ်သည်အခြားတွေက dotted line ကိုထည့်သွင်းပါလိမ့်မယ်။
20 07
menu ကို Properties ကို
အဆိုပါဂုဏ်သတ္တိများ menu ကိုကြောင်း Drop-down menu ကိုများအတွက်စာရင်း / menu ကိုဂုဏ်သတ္တိများမှပြောင်းလဲပစ်ပါလိမ့်မယ်။ ထိုပြည်၌သင်တို့သည်, (က "ကိုရွေးပါ" ပြောပါတယ်ရှိရာ) သင့် menu ကိုတစ်ဦး ID ကိုပေးသငျသညျက lis တစ်ခုသို့မဟုတ် menu ကိုဖြစ်လိုလျှင်, သင့် style sheet ကနေတစ်ဦးစတိုင်လူတန်းစားပေးဆုံးဖြတ်နှင့် drop-down ဖို့တန်ဖိုးများကိုသတ်မှတ်နိုင်ပါတယ်။
စာရင်းနှင့် Menu ကိုကြားခြားနားချက်ကဘာလဲ?
Dreamweaver ဆို Drop-down တစ်ဦးတည်းသာရွေးချယ်ရေးခွင့်ပြုမယ့် menu ကို Drop-down menu ကိုခေါ်ဆိုသည်။ တစ်ဦးက "စာရင်း" drop-down အတွက်မျိုးစုံရွေးချယ်မှုခွင့်ပြုနှင့်တစ်ဦးထက်ပိုတဲ့ item မြင့်မားစေနိုင်ပါတယ်။
သငျသညျ drop-down menu ကိုမြင့်မားတဲ့မျိုးစုံလိုင်းများဖြစ်လိုပါကတစ်ဦး "စာရင်း" အမျိုးအစားမှပြောင်းလဲနှင့်အမှတ်ကိုဖြုတ်လိုက်ပါက "ရွေးချယ်မှု" box ကိုစွန့်ခွာ။
20 08
နယူးစာရင်းပစ္စည်းများ Add
သင့်ရဲ့ menu ကိုအသစ်ပစ္စည်းများထည့်သွင်းရန်, "စာရင်းတန်ဖိုးများကို ... " button ကို click လုပ်ပါ။ ဒါကအထက် window ကိုဖွင့်လှစ်ပါလိမ့်မယ်။ ပထမဦးဆုံးအကွက်ထဲတွင်သင့်ကို item တံဆိပ်ကိုရိုက်ထည့်။ ဒါကစာမျက်နှာပေါ်တွင်ပြသပေးမှာဖြစ်ပါတယ်။ သငျသညျအလွတ်တန်ဖိုးကိုထွက်သွားလျှင်, ထိုပုံစံကိုစလှေတျပါလိမ့်မည်အဘယ်အရာကိုလည်းဖြစ်ပါတယ်။
20 09
နောက်ထပ်နှင့်ပြန်စီရန် Add
ပိုပြီးပစ္စည်းများထည့်သွင်းရန်အပေါင်းသင်္ကေတကိုနှိပ်ပါ။ သငျသညျစာရင်းကို box ထဲမှာသူတို့ကိုယူမှုကိုပြန်လည်ချင်လျှင်, တက်နှင့်လက်ျာအပေါ်မြှားဆင်းကိုအသုံးပြုပါ။
20 10
အားလုံးပစ္စည်းများတန်ဖိုးများ Give
ငါခြေလှမ်း 8 မှာဖော်ပြခဲ့တဲ့သကဲ့သို့သင်တို့အလွတ်တန်ဖိုးကိုစွန့်ခွာလျှင်, တံဆိပ်ပုံစံကိုစလှေတျပါလိမ့်မည်။ သို့သော်သင်တို့ရှိသမျှကိုသင့်ပစ္စည်းများတန်ဖိုးများကိုပေးနိုင်ပါသည် - သင့်ပုံစံမှအခြားသတင်းအချက်အလက်များပေးပို့ရန်။ သငျသညျခုန် menus တွေနဲ့တူသောအရာတို့ကိုအဘို့ဤတွေအများကြီးသုံးပါလိမ့်မယ်။
20 11
တစ်ပုံမှန် Choose
ဝက်ဘ်စာမျက်နှာများကို drop-down ကို item ကို default ကို item အဖြစ်ပထမဦးဆုံးစာရင်းဖြစ်ပါတယ်ကိုမဆိုပြသဖို့ default ။ သင်ရွေးချယ်ထားသောတစ်ဦးကွဲပြားခြားနားတစ်ဦးချင်လျှင်မူကား, ထို Properties ကို menu ပေါ်တွင်က "ကနဦးရှေးခယျြ" box ထဲမှာကမီးမောင်းထိုးပြ။
20 12
ဒီဇိုင်းကြည့်ရန်အတွက်သင့်ရဲ့စာရင်းကိုကြည့်ပါ
သင်ဂုဏ်သတ္တိများကိုတည်းဖြတ်ပြီးပါကပြီးတာနဲ့ Dreamweaver ကိုရှေးခယျြပုံသေတန်ဖိုးနှင့်သင်၏ drop-down စာရင်းကိုပြသပါလိမ့်မယ်။
20 13
Code ကိုကြည့်ရန်အတွက်သင့်ရဲ့စာရင်းကိုကြည့်ပါ
သငျသညျအမြင် code ပြောင်းရန်လျှင်, သင် Dreamweaver အလွန်စင်ကြယ်သောကုဒ်တွေနဲ့၌သင်တို့၏ Drop-down menu ကိုဖြည့်စွက်ကြောင်းတွေ့နိုင်ပါသည်။ တစ်ခုတည်းသောအပို attribute တွေကျနော်တို့အသုံးပြုနိုင်စွမ်းရွေးချယ်မှုများနှင့်အတူထည့်သွင်းကြောင်းသူများဖြစ်ကြ၏။ အဆိုပါ code တွေကိုအားလုံးပြီးအင်တင်းခဲ့သည်ဖတ်ခြင်းနှင့်နားလည်ရန်အလွန်လွယ်ကူသည်။ ဒါဟာမရွေး = "ရွေးချယ်ထားသည့်" attribute ကပင်ထီငါ XHTML ကရေးသားဖို့ default ကြောင်း Dreamweaver ကိုပြောသည်င့်လို့ပဲ။
20 14
Browser ကိုအတွက် Save နှင့် View
သငျသညျစာရွက်စာတမ်းကယ်တင်နှင့်တစ်ဦးကို Web browser ထဲမှာရှုမြင်နေလျှင်, သင်သည်သင်၏ Drop-down menu ကိုသင်ဖို့မျှော်လင့်ထားလိမ့်မယ်မယ့်တူကြောင်းတွေ့နိုင်ပါသည်။
20 15
ဒါပေမဲ့ဒါဟာဘာမှလုပ်မပေးပါသလား
ကျွန်တော်အထက်တွင် created the menu ကိုဒဏ်ငွေကြည့်ပေမယ့်ဘာမှလုပ်မထားဘူး။ ဒါကြောင့်တစ်ခုခုလုပ်ရနိုင်ရန်အတွက်, သင်ကလုံးဝကိုအခြားသင်ခန်းစာဖြစ်သည့်ပုံစံသူ့ဟာသူပေါ်တွင်ပုံစံ action ကိုထူထောင်ဖို့လိုအပ်ပါတယ်။
ကံကောင်းတာက, Dreamweaver သင်ပုံစံများ, CGIs, ဒါမှမဟုတ် scripting နည်းအကြောင်းကိုလေ့လာသင်ယူရန်မလိုဘဲသင့်ရဲ့ site ပေါ်တွင်ချက်ချင်းသုံးနိုငျတဲ့ built-in Drop-down menu ကိုပုံစံရှိပါတယ်။ ဒါဟာဤနေရာသို့သွားရန် Menu ကိုခေါ်တော်မူပါတယ်။
အဆိုပါ Dreamweaver ဤနေရာသို့သွားရန် Menu ကိုအမည်များနှင့် URL များကိုအတူ drop-down menu ကိုဖွင့်ထားသည်။ ထိုအခါသင်ကမီနူးထဲမှာတစ်ဦးကို item ကိုရွေးချယ်နိုင်ပါသည်နှင့်ဝက်ဘ်ဆိုဒ်စာမျက်နှာရုံသင်တစ်ဦး link ကိုနှိပ်လိုက်လျှင်လိုပဲကြောင်းတည်နေရာရွှေ့မည်။
အဆိုပါ Insert menu ကိုသွားပြီး Form ကိုရှေးခယျြပြီးတော့ Menu ကိုဤနေရာသို့သွားရန်။
20 16
Menu ကို Window ဤနေရာသို့သွားရန်
စံ Drop-down menu ကိုမတူဘဲ, အဤနေရာသို့သွားရန် menu ကသင်သည်သင်၏ menu ကိုပစ္စည်းများကိုအမည်နှင့်ပုံစံအလုပ်လုပ်သင့်တယ်ဘယ်လိုအကြောင်းအသေးစိတ်ထပ်ထည့်ရန်အဘို့အဝင်းဒိုးအသစ်တစ်ခုဖွင့်လှစ်။
ပထမဦးဆုံးကို item, သင်က link ကိုကိုသွားသင့်ကြောင်းတစ် URL ကိုဖတ်ပါနှင့် add ချင်သောအရာကိုမှစာသား "untitled1" ပြောင်းပေးပါ။
20 17
သင့်ရဲ့ဤနေရာသို့သွားရန် Menu ကိုမှပစ္စည်းများ Add
သင့်ရဲ့ခုန် menu ကိုမှအသစ်တခုကို item add ဖို့ add ကို item ပေါ်တွင်ကလစ်နှိပ်ပါ။ သင်ဆန္ဒရှိသကဲ့သို့အများအပြားပစ္စည်းများထည့်ပါ။
20 18
Menu ကို Options ကိုဤနေရာသို့သွားရန်
သင်ချင်တယ်အပေါငျးတို့သလင့်များဆက်ပြောသည်င့်ပြီးတာနဲ့, သင်သည်သင်၏ရွေးချယ်မှုများကိုရှေးခယျြသငျ့သညျ:
ခုနှစ်တွင်ဖွင့်ပါ URLs များကို
သင်တစ်ဦး frameset ရှိပါကသင်တစ်ဦးကွဲပြားခြားနားသောဘောင်အတွင်းလင့်များဖွင့်နိုင်ပါတယ်။ URL ကိုပုဝင်းဒိုးအသစ်တစ်ခုဒါမှမဟုတ်တခြားနေရာမှာဖွင့်လှစ်ပါလိမ့်မယ်ဒါကြောင့်ဒါမှမဟုတ်သင်အထူးပစ်မှတ်ရန်ပင်မ Window ၏ထို option ပြောင်းလဲနိုင်သည်။
menu ကိုအမည်
သင့်ရဲ့ menu ကစာမျက်နှာတစ်မူထူးခြားတဲ့ ID ကိုပေးပါ။ ဇာတ်ညွှန်းကိုမှန်ကန်စွာအလုပ်လုပ်ပါလိမ့်မယ်ဒါကြောင့်ဒီအလိုအပ်ပါသည်။ ကိုယ့်လူအပေါငျးတို့ကွဲပြားခြားနားသောအမည်များပေး - ဒါဟာအစသင်တဦးတည်း form မှာမျိုးစုံခုန် menus တွေရှိသည်ဖို့ခွင့်ပြုပါတယ်။
Menu ကိုပြီးတဲ့နောက် Go ကို Button လေးထည့်ပါ
ငါအခါ menu ကအပြောင်းအလဲများကိုတစ်ခါတစ်ရံ script ကိုအလုပ်မလုပ်ပါဘူးဘာဖြစ်လို့လဲဆိုတော့ဒီရွေးဖို့ကြိုက်တယ်။ ဒါဟာအစကိုပိုမိုသုံးစွဲနိုင်ပါတယ်။
URL ကိုပြောင်းလဲခြင်းပြီးနောက်ပထမဦးစွာပစ္စည်းကိုရွေးချယ်ပါ
သငျသညျထိုကဲ့သို့သောပထမဦးဆုံးမီနူးကို item အဖြစ် "ကို Select လုပ်ပါဦးတည်း" အဖြစ်တစ်ဦး prompt ကိုရှိပါကဒီရွေးချယ်ပါ။ ဒီအကြောင်းကို item စာမျက်နှာပေါ်က default အဲ့ဒီအချိန်မှာကြောင်းအာမခံထားပါလိမ့်မယ်။
20 19
Menu ကိုဒီဇိုင်းကြည့်ရန်ဤနေရာသို့သွားရန်
ကိုယ့်ပထမဦးဆုံး menu ကိုအတူတူ, Dreamweaver မြင်နိုင်ကို default item ကို select လုပ်ထားတဲ့ဒီဇိုင်းအမြင်၌သင်တို့၏ခုန် up menu ကိုသတ်မှတ်။ သင်သည်မည်သည့်အခြားအလိုတူ၏သို့ဖြစ်လျှင်သင်သည် drop-down menu ကိုတည်းဖြတ်နိုင်သည်။
သင်ကတည်းဖြတ်ပြုလျှင်မဟုတ်ရင် script ကိုအလုပ်မလုပ်စေခြင်းငှါ, ထိုပစ္စည်းများအပေါ်တစ်စုံတစ်ရာ၏ ID ကိုပြောင်းလဲဖို့မသေချာပါစေ။
20 20
Browser ကိုအတွက် Menu ကိုဤနေရာသို့သွားရန်
ဖိုင်ကိုသိမ်းဆည်းခြင်းနှင့် F12 နှိပ်သင်နှစ်သက်တဲ့ browser မှာစာမျက်နှာပြပေးလိမ့်မယ်။ ထိုပြည်၌သင်တို့သည်တစ်ဦး option ကို select လုပ်ပါ "Go" နှင့်ခုန် menu ကိုကျင့်သောအကျင့်ကိုကလစ်နှိပ်ပါနိုငျပါသညျ!