jQuery slider တစ္ခု ဖန္တီးျခင္း (Create a jQuery slider)

jQuery slider တစ္ခု ဖန္တီးျခင္း (Create a jQuery slider)

မဂၤလာပါ ...

အရင္တစ္ပတ္ကေတာ့ ကြၽန္ေတာ္တုိ႔ Myanmar Web Designer ရဲ႕ main body အပုိင္းကုိ ခ်န္ထားခဲ့ၿပီး footer ကုိ အရင္ သင္ျပေပးခဲ့ပါတယ္၊ ဒီတစ္ပတ္မွာေတာ့ main body ထဲက content ေတြကုိ layout ခ် တာကုိ သင္ျပေပးမွာျဖစ္ပါတယ္။

အခု သင္ခန္းစာကုိ ဘယ္သူေတြ လုိက္ႏုိင္မလဲ ?

အခု ေျပာျပေပးမယ့္ သင္ခန္းစာကုိေတာ့ ေအာက္က အပုိင္း ၁၊ ၂၊ ၃၊ ၄ ေတြကုိ ဖတ္ၾကည့္ၿပီး လုိက္လုပ္ဖူးတဲ့ လူတုိင္း လုိက္ႏုိင္မွာ ျဖစ္ပါတယ္၊

အပုိင္း (၁) --- Analyzing a website (ဝဘ္ဆုိက္ တစ္ခုကုိ ခြဲျခမ္းစိတ္ျဖာျခင္း)
အပုိင္း (၂) --- Coding header of Myanmar Web Designer
အပုိင္း (၃) --- Coding main menu of Myanmar Web Designer
အပုိင္း (၄) --- Coding footer of Myanmar Web Designer

ဒါဆုိရင္ ကြၽန္ေတာ္တုိ႔ သင္ခန္းစာ စလိုက္ၾကရေအာင္ဗ်ာ ...

Analyzing a website (ဝဘ္ဆုိက္ တစ္ခုကုိ ခြဲျခမ္းစိတ္ျဖာျခင္း)

သင္ခန္းစာ အက်ဥ္း

ဒီ post ဟာ website ေရးျခင္းကုိ စိတ္ဝင္စားတဲ့ လူေတြအတြက္ ပထမဆုံး ေျခလွမ္းျဖစ္မယ္ထင္ပါတယ္။ အခု သင္ခန္းစာမွာ website တစ္ခုရဲ႕ တည္ေဆာက္ပုံကုိ ခြဲျခမ္းစိတ္ျဖာ ေလ့လာမွာ ျဖစ္ပါတယ္။

ဘယ္လိုလူေတြက ဒီသင္ခန္းစာကုိ လုိက္ႏုိင္မလဲ?

အခု သင္ခန္းစာကုိ website တစ္ခုကုိ ျမင္ဖူးတဲ့လူတုိင္း လုိက္ႏုိင္မွာ ျဖစ္ပါတယ္။

သင္ခန္းစာ အက်ယ္

ကၽြန္ေတာ္ ဒီ blog ကေနၿပီးေတာ့ တစ္ပတ္ တစ္ခါ အားတဲ့အခ်ိန္ေတြကုိ အသုံးျပဳၿပီး static website တစ္ခုေရးပုံကုိ အစအဆုံး လမ္းညႊန္သြားေပးဖုိ႔ စဥ္းစားထားပါတယ္။ static website ဆုိတာ ဘာလဲ မသိရင္ google မွာ “what is static website” လို႔ ရုိက္ရွာၾကည့္ပါ။ ကၽြန္ေတာ့္ post ထဲမွာ ထည့္မေရးတာက မလုိအပ္ပဲ post ရွည္သြားမွာ နဲ႔ လမ္းညႊန္မယ့္လူမရွိရင္ မလုပ္တတ္မွာစုိးလုိ႔ ထည့္မေရးရတာပါ။ ေနာက္ပုိင္းမွာလည္း မသိတဲ့ စကားလုံးမ်ား ပါခဲ့မယ္ဆုိရင္ ဒီလုိပဲ google မွာ ရွာၾကည့္ပါ၊ ရွာၾကည့္လို႔မွ နားမလည္ဘူးဆုိရင္ေတာ့ comment ခ်န္ၿပီး ေမးပါ။ ေနာက္ၿပီေးတာ့ ဒီ blog မွာ post အသစ္တင္လား မတင္လား ခဏခဏ လာဝင္ၾကည့္ဖုိ႔ မအားဘူးဆုိရင္ေတာ့ blog ရဲ႕ ညာဘက္အျခမ္းမွာ post အသစ္တင္တုိင္း ေမးလ္ပုိ႔ပါမည္ ဆုိတဲ့ ေဘာက္စ္ထဲမွာ e-mail ထည့္၊ subscribe ႏွိပ္ၿပီး က်န္တဲ့အဆင့္ေတြကုိ ဆက္လုပ္သြားမယ္ဆုိရင္ ဒီ blog မွာ post အသစ္တင္တုိင္း သူငယ္ခ်င္းတုိ႔ရဲ႕ inbox ထဲကုိ ေရာက္လာမွာ ျဖစ္ပါတယ္။ subscribe လုပ္နည္းမသိရင္ေတာ့ “how to subscribe post from a blog” မွာ သြားၾကည့္ႏုိင္ပါတယ္။

ဒီတစ္ပတ္ ကၽြန္ေတာ္တုိ႔ရဲ႕ ပထမဆုံး ေျခလွမ္းက code ေရးတာေတြ ဘာေတြ လုံးဝ မဟုတ္ေသးပါဘူး၊ သူမ်ားေတြ ေရးထားၿပီးသား website ကုိ ဝင္ၾကည့္တဲ့အခါမွာ အဲဒီ website ေတြရဲ႕ တည္ေဆာက္ပုံကုိ ေလ့လာျခင္းပဲျဖစ္ပါတယ္။ ကၽြန္ေတာ္တုိ႔ အခုေလ့လာမယ့္ website ကေတာ့ “Myanmar Web Designer” website ပဲ ျဖစ္ပါတယ္၊ အခု post မွာလဲ ပုံနဲ႔တကြ ရွင္းျပေပးမွာျဖစ္ပါတယ္၊ ဒါေပမယ့္ website ကုိ သြားၿပီးေတာ့ အေသးစိတ္ လိုက္ေလ့လာမယ္ဆုိရင္ေတာ့ ဒီသင္ခန္းစာကုိ အေကာင္းဆုံး နားလည္မွာ ျဖစ္ပါတယ္။

static website တစ္ခုေရးဖုိ႔ဆုိရင္ ကၽြန္ေတာ္တုိ႔ တတ္ထားရမွာက html နဲ႔ css ဆုိရင္ ရပါၿပီ၊ ဟုိးအရင္တုန္းကေတာ့ css မေပၚေသးေတာ့ html တစ္ခုနဲ႔ပဲ ေရးခဲ့ၾကရတာ ျဖစ္ပါတယ္၊ html language ထဲက  table ကုိ အသုံးျပဳၿပီးေတာ့ ေရးခဲ့ၾကရတာျဖစ္ပါတယ္၊ table နဲ႔ ေရးတဲ့အခါမွာ ေရးရတာမ်ားတဲ့အတြက္ေၾကာင့္ ေရးခ်ိန္ၾကာျခင္း၊ code မ်ားျခင္း၊ အရင္တုန္းက ဆုိေတာ့ internet connection ေႏွးျခင္း၊ browsers မ်ား version နိမ့္ျခင္း စတဲ့အခ်က္ေတြေၾကာင့္ website ကုိ online ေပၚတင္လုိက္တဲ့အခါမွာ website အတက္ေႏွးျခင္း (slow website download speed) ဆုိတဲ့ ျပႆနာကုိ ေတြ႕ႀကဳံရတဲ့အခါမွာ အဲဒီအတြက္ အေျဖရွာရင္း css ဆုိတဲ့ language အသစ္ကုိ တီထြင္လိုက္ၾကပါတယ္၊ တစ္ဘက္ကလည္း browser ေတြကုိ version ျမွင့္လာၾကပါတယ္၊ connection ကေတာ့ အခုအခ်ိန္ထိ သားစုိး သီခ်င္းလုိပဲ “လိမ္ဖယ္၊ လိမ္ဖယ္” ေပါ့ဗ်ာ … :P

အဲဒီေတာ့ ကၽြန္ေတာ္တုိ႔ တတ္ရမယ့္ဟာကုိေတာ့ သိပါၿပီ၊ တတ္ရမယ့္ language ေတြကုိ မေလ့လာခင္ website တည္ေဆာက္ပုံကုိ ေလ့လာၾကတာေပါ့၊ website ေရးတဲ့အခါမွာ menu အပုိင္း၊ banner (facebook မွာဆုိရင္ေတာ့ cover photo) အပုိင္း၊ body အပုိင္း စသည္ျဖင့္ အပုိင္း အပုိင္းေတြ ခြဲၿပီး ေရးၾကပါတယ္။ အဲဒီ အပုိင္းေတြကုိ အဂၤလိပ္လို “division” လို႔ ေခၚပါတယ္၊ html မွာေတာ့ အဲဒီ division ကုိ အတုိေကာက္ “div” လုိ႔ သုံးပါတယ္။ ေအာက္က ပုံကုိၾကည့္ပါ။ (ကလစ္ႏွိပ္ၾကည့္ပါက ပုံကုိ အႀကီး ျမင္ရပါမည္)

ပုံအရဆုိရင္ ကၽြန္ေတာ္တုိ႔ ေလးေထာင့္က်က် အကြက္မ်ဳိးဆုိရင္ div တစ္ခုလုိ႔ေတာင္ အၾကမ္းဖ်င္း သတ္မွတ္လို႔ ရပါတယ္။ ဒါကေတာ့ “Myanmar Web Designer” website ရဲ႕ home page ကုိ analysis လုပ္ၾကည့္တာပါ။ div တည္ေဆာက္ပုံကုိ coding အေနနဲ႔ပါ ေလာ့လာခ်င္တယ္ဆုိရင္ေတာ့ “firebug” ဆုိတဲ့ addon ေလးကုိ firefox မွာ တင္ရပါမယ္၊ firebug ကုိ တင္ခ်င္တယ္ဆုိရင္ေတာ့ “firebug addonfor firefox” မွာ သြားတင္လိုက္ပါ။ ၿပီးရင္ေတာ့ home menu ေပၚမွာ right click ႏွိပ္ၿပီးေတာ့ “Inspect element with firebug” ဆုိတာကုိ ႏွိပ္လိုက္ပါ။ 

အဲဒီလုိ ႏွိပ္လိုက္မယ္ဆုိရင္ေတာ့ browser ရဲ႕ ေအာက္ေျခနားမွာ ေအာက္က ပုံအတုိင္း ေပၚလာမွာ ျဖစ္ပါတယ္။

ေပၚလာတဲ့ပုံမွာ အကန္႔ႏွစ္ကန္႔ ပါပါတယ္၊ ဘယ္ဘက္အျခမ္းက html code ေတြကုိ ေဖာ္ျပတဲ့ဘက္ျဖစ္ၿပီးေတာ့၊ ညာဘက္ အကန္႔ကေတာ့ css code ေတြကုိ ေဖာ္ျပတဲ့ အျခမ္းျဖစ္ပါတယ္၊ css ေတြကုိ အစီအစဥ္မက် ျပေပးတာ မဟုတ္ပါဘူး၊ ဘယ္ဘက္ အျခမ္း html code ေတြထဲက ကၽြန္ေတာ္တုိ႔ ႏွိပ္လိုက္တဲ့ html code နဲ႔ ဆုိင္တဲ့ css code ေတြကုိပဲ ျပေပးတာ ျဖစ္ပါတယ္ ( html နဲ႔ css က တြဲသုံးရတာပါ)၊ ဘယ္ဘက္က html code နဲ႔ ဆုိင္တဲ့ css ေတြ ေပၚလာေအာင္ ဘယ္လို လုပ္ရလဲဆုိေတာ့ <div, <ul, <li, <a, … စသည္ျဖင့္ ရွိၾကတဲ့ထဲမွာ ေထာင့္ကြင္း “<” ေနာက္ကပ္ရပ္က စာလုံးကုိ ကလစ္ႏွိပ္လိုက္တာနဲ႔ ညာဘက္မွာ သူနဲ႔ဆုိင္တဲ့ css ကုိ ျပေပးမွာ ျဖစ္ပါတယ္။ css ဘက္အျခမ္းမွာေတာ့ css တစ္ခ်ဳိ႕ကုိ css စာေၾကာင္း ေရွ႕က stop icon ကုိ ပိတ္လိုက္ ဖြင့္လုိက္ လုပ္ၿပီး error ရွာတာတုိ႔ ဘာတုိ႔ လုပ္ၾကည့္လို႔ရပါေသးတယ္၊ အခုကေတာ့ error ရွာစရာ ကုိယ္တုိင္ေရးထားတဲ့ code မရွိေတာ့ css အပိတ္ အဖြင့္ လုပ္ၿပီး ေလ့လာၾကည့္ၾကေပါ့ဗ်ာ၊ ကၽြန္ေတာ္ကေတာ့ firebug ကုိ အခ်ိန္နည္းနည္းပုိေပးၿပီး ေလွ်ာက္စမ္းၾကည့္ေစခ်င္တယ္ဗ်၊ တစ္ျခား site ေတြကုိ ဝင္ၾကည့္တဲ့အခါမွာလဲ သူတုိ႔ site ေတြကုိ firebug နဲ႔ ဝင္ကလိၾကည့္ေပါ့ဗ်ာ၊ ဒါမွ မ်ားမ်ားတတ္မွာဗ်။ firebug က အရမ္းအသုံးဝင္တဲ့ tool တစ္ခုျဖစ္လာတဲ့ေနာက္ပုိင္းမွာ browser တုိင္းလိုလုိက firebug လုိ element ေတြကုိ inspect လုပ္လို႔ရတဲ့ tool ေတြကုိ default အေနနဲ႔ ထည့္သြင္းလာၾကပါတယ္၊

firefox မွာဆုိ ctrl+shift+i

google chrome နဲ႔ IE မွာဆုိ f12 နဲ႔

opera မွာဆုိ right click ႏွိပ္ၿပီး inspect element ကုိ ေရြးၿပီးေတာ့ default inspect tool ေတြကုိ အသုံးျပဳႏုိင္ပါတယ္၊ ကၽြန္ေတာ္ကေတာ့ firebug ကုိ အႀကိဳက္ဆုံးပါပဲ။

ကဲ … website analyzing ကေတာ့ ဒီေလာက္ပါပဲဗ်ာ၊ ေနာက္လာမယ့္ သင္ခန္းစာမွာေတာ့ html, css code ေတြကုိ စေရးသားပါေတာ့မယ္၊ ေနာက္တစ္ပတ္ေလာက္မွ ေရးျဖစ္မယ္ ထင္တယ္ဗ်၊ အဲဒါေၾကာင့္ subscribe လုပ္ၿပီးေတာ့ ေအးေအးေဆးေဆး ေစာင့္ၾကပါဦး၊ ေက်းဇူးတင္ပါတယ္။

 

Create header of Myanmar Web Designer

မဂၤလာပါ …

ဒီတစ္ပါတ္ေတာ့ ကၽြန္ေတာ္တုိ႔ html နဲ႔ css code ေတြကုိ စေရးရပါေတာ့မယ္။ မေရးခင္ ဘယ္ language က ဘာအတြက္ သုံးတယ္ဆုိတာေလး ေျပာခ်င္ပါတယ္။ html ဆုိတာကေတာ့ “Hyper Text Markup Language” ရဲ႕ အတုိေကာက္ျဖစ္ၿပီးေတာ့ website မွာ content (စာ, ဓာတ္ပုံ, ..) ေတြထည့္ဖုိ႔ သုံးရတဲ့ language ျဖစ္ၿပီးေတာ့၊ css (Cascading Style Sheet) ကေတာ့ style sheet ဆုိတဲ့အတုိင္း html က ထည့္ထားတဲ့ content ေတြကုိ ပုံစံေျပာင္းျခင္း၊ အလွဆင္ျခင္း အစရွိတာေတြကုိ လုပ္ႏုိင္တဲ့ language ျဖစ္ပါတယ္။

ဒီသင္ခန္းစာကုိ ဘယ္လိုလူေတြ လုိက္ႏုိင္မလဲ?

ဒီသင္ခန္းစာကုိ “Analyzing a website” ကုိ ဖတ္ဖူးတဲ့လူေတြ လုိက္ႏုိင္မွာ ျဖစ္ပါတယ္။

သင္ခန္းစာ အက်ယ္
အေျခခံ static website တစ္ခုျဖစ္ဖုိ႔အတြက္ ဆုိရင္ေတာ့ Photoshop, HTML, CSS အစရွိတာေတြကုိေတာ့ အနည္းဆုံး တတ္ေျမာက္ထားရမွာ ျဖစ္ပါတယ္၊ ဒါေပမယ့္ အခု ကၽြန္ေတာ္တုိ႔က online ကေနသင္ၾကားေနတာက တစ္ခ်က္၊ ဘာမွမသိေသးတဲ့လူေတြပါ လုိက္လုပ္ႏုိင္ေစခ်င္တာက တစ္ခ်က္ စတဲ့အခ်က္ေတြေၾကာင့္ Photoshop နဲ႔ design ဆြဲတဲ့အပုိင္းကုိ ကၽြန္ေတာ္ ခ်န္ထားခဲ့ပါရေစ။ ပုံမွန္အတုိင္းဆုိရင္ေတာ့ design ဆြဲ customer သုိ႔မဟုတ္ website လာအပ္တဲ့သူကုိျပ၊ သူတုိ႔က ႀကိဳက္တယ္၊ အုိေခ ဆုိမွ က်န္တဲ့ html, css နဲ႔ တစ္ျခားဟာေတြကုိ ဆက္ေရးရတာ ျဖစ္ပါတယ္။ အဲဒီေတာ့ ကၽြန္ေတာ္တုိ႔မွာ ၾကည့္ဆြဲရမယ့္ design ဆြဲထားတာ မရွိပါဘူး။ ဆြဲထားတာ မရွိေတာ့ ရွိၿပီးသား ဒီဇုိင္းတစ္ခုကုိ ၾကည့္ဆြဲမွာ ျဖစ္ပါတယ္။ ကၽြန္ေတာ္တုိ႔ ၾကည့္ဆြဲမယ့္ design ကေတာ့ online ေပၚမွာ ရွိၿပီးသားျဖစ္တဲ့ “Myanmar Web Designer” website ျဖစ္ပါတယ္။ ဒီတစ္ေခါက္ သင္ခန္းစာမွာေတာ့ Myanmar Web Designer ရဲ႕ header div အထိကုိ ၿပီးေအာင္ ေရးမွာ ျဖစ္ပါတယ္။ ကၽြန္ေတာ္တုိ စ မေရးခင္ Myanmar Web Designer ရဲ႕ header div ကုိ အေသးစိတ္ analysis လုပ္မွာျဖစ္ပါတယ္။ ေအာက္ကပုံကုိ ၾကည့္ပါ။ အေပၚပုိင္းက header div တစ္ခုလုံးကုိ ျပထားတာပါ၊ ေအာက္ပုိင္းကေတာ့ header div ကုိ အေသးစိတ္ ျပထားတာပါ၊ တစ္နည္းအားျဖင့္ ေအာက္က div ေတြ အကုန္လုံးက header div ထဲမွာ ပါရွိမွာ ျဖစ္ပါတယ္။ 

ဒါဆုိရင္ ကၽြန္ေတာ္တုိ႔ စေရးလို႔ရပါၿပီ၊ code စေရးတဲ့အခါမွာ ေရးဖို႔ software (text editor လို႔ ေခၚပါတယ္) လိုပါတယ္၊ အခုအခ်ိန္မွာေတာ့ open source text editor ျဖစ္တဲ့ “notepad++” ကုိ download လုပ္ၿပီး သုံးပါ။ ဒီ သင္ခန္းစာ အစအဆုံး ၿပီးသြားၿပီဆုိရင္ေတာ့ notepad++ ထက္ ပုိေကာင္းတဲ့ text editor ေတြသုံးပါ၊ ကဲ .. ကၽြန္ေတာ္တုိ႔မွာ text editor လည္းရွိေနၿပီဆုိေတာ့ coding စေရးၾကတာေပါ့။ notepad++ မွာ ေအာက္က code ေတြကုိ လုိက္ေရးပါ။

<!DOCTYPE html>

<html>

<head></head>

<body></body>

</html>

အဲဒီလိုေရးၿပီးၿပီဆုိရင္ေတာ့ notepad++ မွာ flie>save ကုိ သြားၿပီးေတာ့ ေရးၿပီးသားကုိ သိမ္းလိုက္ပါ၊ file name ကုိေတာ့ index.html လို႔ ေပးလိုက္ပါ။ file name ကုိ အႀကီးမသုံးရပါ၊ space မျခားရပါ၊ space အစား “_” ကုိ သုံးပါတယ္။ online ေပၚတင္တဲ့အခါ server ေတြက linux server ေတြမ်ားပါတယ္၊ linux မွာက အေပၚက စည္းမ်ဥ္းေတြကုိ လုိက္နာေပးရပါတယ္၊ server အေၾကာင္းရွင္းျပတာ မဟုတ္လို႔ အက်ယ္ေျပာမေနေတာ့ပါဘူး၊ အဲဒီ စည္းမ်ဥ္းေတြကုိ လုိက္နာေပးပါ၊ အလ်ဥ္းသင့္ရင္ server အေၾကာင္း ေရးပါဦးမယ္။ ဒါဆုိ ကၽြန္ေတာ္တုိ႔ သိမ္းၿပီးၿပီဆုိရင္ code ကုိ ရွင္းျပေပးပါမယ္။

ပထမဆုံး တစ္ေၾကာင္းျဖစ္တဲ့ “<!DOCTYPE html>” ဆုိတာက browser ေတြကုိ ဒီ document အမ်ဳိးအစား (document type) က html အမ်ဳိးအစားျဖစ္တယ္လို႔ ေျပာလုိက္တာျဖစ္ပါတယ္။

ဒါဆုိ ကၽြန္ေတာ္တုိ႔လည္း အခုကၽြန္ေတာ္တုိ႔ ေရးေနတာ html ဖုိင္ဆုိတာ သိသြားၿပီေပါ့၊ html ဖုိင္ျဖစ္တဲ့အတြက္ “<html>” နဲ႔ ဖြင့္ၿပီေးတာ့ “</html>” နဲ႔ ျပန္ပိတ္ေပးရပါတယ္။ အဲဒီ html အထဲမွာမွ head နဲ႔ body ကုိလည္း အဖြင့္ tag, အပိတ္ tag ေတြနဲ႔ ထည့္ေပးရပါတယ္၊ ေခါင္းနဲ႔ ကုိယ္ တပ္ေပးလိုက္တာေပါ့ :) ။ tag ဆုိတာ ဘာႀကီးလဲ ဆုိေတာ့ ကၽြန္ေတာ္တုိ႔ ေထာင့္ကြင္း “<” နဲ႔ “>” ပါရင္ tag လုိ႔ ေခၚပါတယ္။ tag ေတြမွာမွ slash “/” မပါတာက အဖြင့္ျဖစ္ၿပီးေတာ့၊ ပါရင္ အပိတ္ tag ျဖစ္ပါတယ္၊ (ဥပမာ။        ။ <head> သည္ head အဖြင့္ tag ျဖစ္ၿပီး </head> သည္ head အပိတ္ tag ျဖစ္ပါသည္။)

ဒါဆုိရင္ ကၽြန္ေတာ္ဖုိင္ထဲမွာ head ပုိင္းနဲ႔ body ပုိင္း ဆုိၿပီး ႏွစ္ပုိင္းရပါၿပီ၊ အဲဒါေတြကုိ div ေတြနဲ႔ သြား မေရာပါနဲ႔၊ div တစ္ခုမွ မပါေသးပါဘူး၊ အဲဒီေတာ့ ကၽြန္ေတာ္တုိ႔ div ေတြကုိ body ထဲကုိ ထည့္ပါေတာ့မယ္၊ ေတာင္းပန္ပါတယ္၊ ေအာက္က ဗီဒီယုိကုိ ဆက္ၾကည့္လိုက္ပါ၊ စာေရးရတာ အရမ္းအခ်ိန္ၾကာၿပီး နားမလည္မွာစုိးလို႔ပါ။

ဗီဒီယုိ အပုိင္း ၁

ဗီဒီယုိ အပုိင္း ၂

ဗီဒီယုိ အပုိင္း ၃

ဗီဒီယုိ အပုိင္း ၄

ဗီဒီယုိ အပုိင္း ၅