Wednesday, August 29, 2012

key logger and key logger detector

အဆဲခံရမွာလဲ ေၾကာက္ရေသးဟီး အဲ့ေတာ့ ...crack ေတာ့ေပးေတာ့ဝူး ကလိသာၾကည့္ၾကေပ့ါ ...ကိုယ့္ေဘာ္ေဘာ္ေတရဲ႕  Gmail ေတကိုေလ...
                                                            ဒီမွာယူပါ

                ဒါကေျဖေဆး key logger detector ေပါ့ သတ္ေတာ့သတ္ဘူး ေနာ္ key logger ဘယ္ေနရာမွာရွိေနပါတယ္ ဆိုတာေလာက္ ကို ျပေပး.ႏိုင္တဲ့ portable ေလးပါ..အဲ့ဒါက
                                                            ဒီမွာေဒါင္းပါ    

Memory 1GB ကုိ 2 GB ေျပာင္ေပးတဲ႔ေဆာ႔လ္ဝဲေလးပါ

Memory 1GB ကုိ 2 GB ေျပာင္ေပးတဲ႔ေဆာ႔လ္ဝဲေလးပါ။ျပဳလုပ္ရတာလြယ္ပါတယ္...ကၽြန္ေတာ္စမ္းၾကည္႔ျပီးပါျပီ။
လုိခ်င္ရင္ေအာက္မွာယူလုိက္ပါ။
http://mir.cr/07WTIWK4

online video +TVၾကည္႔ခ်င္သူမ်ားအတြက္ပါ...

ရုပ္ရွင္ၾကဳိက္တဲ႔သူငယ္ခ်င္းေတြအတြက္ပါ....ေဆာ႔လ္ဝဲေလးကုိေဒါင္းျပီး အင္စေတာ လုပ္လုိက္ပါ...ရုပ္ရွင္ကာေတြစုံ
ပါတယ္....ကၽြန္ေတာ္ဆုိေန႔တုိင္ၾကည္႔တယ္...တရုပ္ဘာသာနဲ႔ပါ...ေျပာင္းတတ္တဲ႔သူေျပာင္းေပါ႔...ကၽြန္ေတာ္ေတာ႔မ
ေျပာင္းတတ္လုိ႔ဒီအတုိင္ဘဲၾကည္႔ပါတယ္...လုိခ်င္တဲ႔သူမ်ားအတြက္ပါ...တစ္ျခားလုပ္လုိ႔ရတာေတြအမ်ားၾကီးက်န္ပါေသ
တယ္...

http://www.mediafire.com/?e5dqx7f3nwdp6ax

ကုိယ္႔မ်က္ႏွာျမင္မွComputer ပြင္႔ေစမဲ႔ေဆာ႔လ္ဝဲ

ကုိယ္႔မ်က္ႏွာျမင္မွcomputer ပြင္႔ေစမဲ႔ေဆာ႔လ္ဝဲေလးပါ...ရွျိပီးတဲ႔သူမ်ားsorryပါေနာ္...မရွိေသတဲ႔သူေတြအတြက္ပါ..
လုိခ်င္ရင္ေအာက္မွာယူလုိက္ေနာ္....Destop ေတြမွာပါသုံးလုိ႔ရပါတယ္...

http://download.cnet.com/O2Face/3000-2144_4-10892514.html?part=dl-1...

Proxy Switcher PRO v3.9.0.4059

Proxy Switcher PRO v3.9.0.4059


ပိတ္ထားတဲ့ ဝက္ဆိုဒ္ေတြကို ေက်ာ္ခြခ်င္တဲ့ အခါက်ရင္ သံဳးတဲ့ Proxy Softwares တစ္မ်ဳိးပဲ။ ဒီ Proxy Switcher PRO v3.9.0.4059 မွာ သူကို အသံုးျပဳနည္းပါ flash Video နဲ႕ ေသေသခ်ာခ်ာ ရွင္းျပေပးထားပါတယ္။ အထဲမွာ Serial number ထည့္ထားပါတယ္။ 3.MB ေလာက္ပဲ ရွိပါတယ္။ လိုအပ္တယ္ ဆိုရင္' ဒီမွာ downloads  လုပ္လိုက္ပါ။
Key: VMTV2-5AXHQ-UNPHO-AN11Y-NP2XI
အမ်ိဳးအစား: Proxy

Mozilla Firefox ထက္ဆယ္ဆျမန္တဲ႔ Maxthon 3

Mozilla Firefox ထက္ဆယ္ဆျမန္တဲ႔ Maxthon 3 ပါ။သုံးရတာလြယ္ကူပါတယ္..ညယ add on မွထည္႔စရာမလုိပါဘူး...သူမွာအကုန္ပါျပီးသာပါ။ဒါေပမဲ႔သူက myanmar 3 ကို sport မလုပ္ပါဘူး။ေဇာ္ဂ်ီေတာပအလုပ္လုပ္ပါတယ္..ျမန္မာ 3 ေတာ႔မရပါဘူး...
စမ္းသုံးၾကည္႔လုိက္ပါ။ၾကဳိက္သြားေစရမယ္....ဟီးးးးးးး
http://www.maxthon.com/    မဴရင္းလင္႔မွာယူလဲရပါတယ္....

http://www.mediafire.com/?5neq2o1t32i47hb    ဒီမွာလဲယူလုိ႔ရပါတယ္...
မသိေသတဲ႔သူေတြအတြက္ပါ...

Latop မွတစ္ဆင့္ Wifi လြင့္ခ်င္သူမ်ား အတြက္


ကၽြန္ေတာ္ အခု Laptop အသံုးျပဳ သူေတြအေနနဲ႕ မိမိရဲ႕ Laptop မွာအသံုးျပဳေနတဲ့ Internet Connection ကို Connectify Pro  ဆိုတဲ့ ေကာင္ေလးကို အသံုးျပဳျပီး Wifi လြတ္ကာ တစ္ျခား အသံုးျပဳခ်င္သူမ်ားအား Internet Connectionအား Wifi မွတဆင့္ ျပန္ျပီး Share ေပးလို႕ရမဲ့ နည္းလမ္းေလးကို ေရးေပးသြားပါမယ္ .. အမ်ားစုကေတာ့ သိျပီးသား ျဖစ္ပါလိမ့္မယ္ .. မသိေသးတဲ့ သူမ်ားကို ရည္ရြယ္ပါတယ္ .. အခုလို Connectify Pro  ကိုအသံုးျပဳျပီး Share ေပးျခင္းျဖင့္ မိမိလြတ္ထားတဲ့ Wifi ကို Hotspot Password ကိုမသိပဲ ၀င္ေရာက္ အသံုးမျပဳႏိုင္ျခင္း မရွိတဲ့ အတြက္ .. မိမိတို႕ ေပးသံုးခ်င္တဲ့ သူမ်ားကိုသာ Client Users မ်ားအေနနဲ႕ အသံုးျပဳ ခိုင္းလို႕ရမွာ ျဖစ္ပါတယ္ .. ေနာက္ျပီး မိမိတို႕ Share ေပးထားတဲ့ Connection ထဲကို မိမိမသိပဲ ၀င္ေရာက္ အသံုးျပဳ ေနသူမ်ား ရွိမရွိကိုလည္း Clients မွာ ၾကည့္ျခင္းျဖင့္ အလြယ္တကူ သိရွိႏိုင္မွာ ျဖစ္ပါတယ္ ..

ကၽြန္ေတာ္ အရင္ဆံုး အခုတင္ေပးလိုက္တဲ့ Connectify Pro v3.25  ကို Full Version ေလးရေအာင္ ဘယ္လို လုပ္ရမယ္ ဆိုတာကို အရင္ ေျပာျပေပးပါမယ္ .. အရင္ဆံုး Connectify Pro v3.25 ကို မိမိတို႕ Share ေပးခ်င္တဲ့ လက္ေတာ့မွာ Install လုပ္လိုက္ပါ .. ျပီးရင္ Connectify Pro v3.25 ကိုမဖြင့္ ပါနဲ႕အံုး .. ကၽြန္ေတာ္ အထဲမွာ ထည့္ေပးလိုက္တဲ့ Patch File ေလးကို My Computer >> Local Disk ( :C ) >> Program ထဲမွာ ရွိတဲ့ Connectify ဆိုတဲ့ Folder ထဲမွာ ထည့္လိုက္ပါ .. ျပီးရင္ Patch File ေလးကို Right Click ေထာက္လိုက္ပါ .. ျပီးရင္ Run as administrator နဲ႕ ဖြင့္လိုက္ပါ .. ျပီးရင္ Patch ကိုႏွိပ္ျပီး Patch ခ်ိဳးေပးလိုက္ပါ .. ကၽြန္ေတာ္ ေအာက္မွာ ပံုေလးေတြနဲ႕လည္း ျပေပးထားပါတယ္ ..
အေပၚက အဆင့္အတိုင္း Full Version ေလးရေအာင္လုပ္ျပီးသြားျပီ ဆိုရင္ေတာ့ ေအာက္မွာ ဘယ္လို အသံုးျပဳရမယ္ ဆိုတာကို ေရးေပးပါမယ္ .. သံုးရတာ လြယ္ပါတယ္ ..အရင္ဆံုး Hotspot Name ေနရမွာ မိမိတုိ႕ ၾကိဳက္ႏွစ္သက္တဲ့ အမည္တစ္ခု ေပးလိုက္ပါ .. ျပီးရင္ Password တစ္ခုခု ေပးလိုက္ပါ ..
ေနာက္တစ္ဆင့္Internet မွာ မိမိတို႕ လက္ရွိသံုးေနတဲ့ Connection အမ်ိဳးအစားကို ေရြးေပးလိုက္ပါ .. ျပီးရင္ေတာ့ Start Hotspot ကိုႏွိပ္ျပီး စတင္ Sharing လုပ္လို႕ ရသြားပါျပီ .. 
တကယ္လို႕ မိမိတို႕ Sharing ေပးထားတဲ့ Network ထဲမွာ ဘယ္သူေတြ  Client Users မ်ားအျဖစ္နဲ႕ အသံုးျပဳ ေနလည္း ဆိုတာ သိခ်င္ယင္ ေအာက္က ပံုမွာ ျပထားတဲ့ အတိုင္း Clients မွာၾကည့္ရွုႏိုင္ပါတယ္..
ဒီေလာက္ဆိုရင္ေတာ့ Connectify Pro v3.25  ကိုအသံုးျပဳျပီး Latop မွ Internet Connection ကို ဘယ္လို Sharing လုပ္လို႕ရမလည္း ဆိုတာကို သိသြားမယ္လို႕ ထင္ပါတယ္ .. 

Windows 7 Desktop Context Menu မွာ ကိုယ္ပိုင္နာမည္ထည့္ရေအာင္




မဂၤလာပါဗ်ာ ကၽြန္ေတာ္တို့ Windows 7 Desktop Context Menu မွာ ကိုယ္ပိုင္နာမည္ေလးေတြထည့္ၾကည့္ရေအာင္ပါ.............အေပၚကပုံကေတာ့ Desktop Context Menu ထဲမွာ icon ေလးတခုနဲ့ Mintun
ဆိုတဲ့ နာမည္ေလးထည့္ထားတာပါ.............သယ္ခ်င္းတို့ စက္မွာလဲ စမ္းထည့္ၾကည့္ခ်င္ရင္ ကၽြန္ေတာ္နဲ့ အတူ လိုက္လုပ္ၾကည့္လိုက္ပါေနာ္...............

ပထမဆံုး RUN မွာ regedit လို့ေရးၿပီး enter ေခါက္လိုက္ပါ Registry editor  ေလးပြင့္လာပါလိမ့္မယ္ ၿပီးရင္
HKEY_CLA****_ROOT >> DesktopBackground >> Shell အထိအဆင့္ဆင့္ ၀င္သြားလိုက္ပါ............
aရာက္ၿပီဆိုရင္ေတာ့ Shell ေပၚမွာ Right Click ဖိၿပီး New >> Key ကိုကလစ္လိုက္ပါ.................



ကီးအသစ္ေလးရဲ့ နာမည္ကို စိတ္ၾကိဳက္မွတ္မိလြယ္သလို ေပးႏိုင္ပါတယ္............
ၿပီးရင္ ကီးအသစ္ေလးကို Select ေပးၿပီး တဘက္က ( Default ) ဆိုတာေလးကို ၂ ခ်က္ ကလစ္လိုက္ပါ..........
ပြင့္လာတဲ့ ေဘာက္ေလးထဲက Value data ဆိုတာကို ( ~~~Min Tun ~~~ ) ဆိုတာမ်ိဳးေလး ၿမင္ေစခ်င္တဲ့နာမည္ေလးေရးလိုက္ပါ.......

ၿပီးရင္ေတာ့ Default ေအာက္မွာ တခ်က္ကလစ္လိုက္ပါ...............New >> String Value တခုအသစ္ထည့္ပါမယ္



ႊအဲဒီ String Value အသစ္ေလးရဲ့ နာမည္ကိုေတာ့ icon ဆိုၿပီး ေပးလိုက္ပါ နာမည္ေရွ့က Icon ေလးအတြက္ၿဖစ္လို့ ေပးခ်င္သလို ေပးလို့မရပါဘူး icon ဆိုတာကိုမွားေရးလို့မရပါဘူး..........သူ့အေပၚမွာ ၂ ခ်က္ကလစ္ၿပီး သူရဲ့ Value ကိုေတာ့ ႏွစ္သက္လို့ ထည့္ခ်င္တဲ့ Icon ေလးရဲ့ Location name + Icon Name + .ico ဆိုၿပီးထည့္ရမွာပါ............Icon ေပၚမွာ Right Click ေပးၿပီး Properties ထဲက Security ရဲ့ ေအာက္မွာရွိတဲ့ object name ဆိုတာရဲ့ ေနာက္က နာမည္ေလးထည့္ေပးလိုက္လဲရပါတယ္............



ၿပီးရင္ေနာက္ String Value တခုထက္ဖြင့္ပါမယ္............တည္ေနရာအတြက္ပါ.........နာမည္ကို position လို့ေပးၿပီး Value ကိုေတာ့
အေပၚမွာေနေစခ်င္ရင္ top, ေအာက္မွာေနေစခ်င္ရင္ bottom လို့ ေပးလိုက္ပါ
ဒါဆို Windows 7 Desktop Context Menu မွာ ကိုယ္ပိုင္နာမည္နဲ့ ကိုယ္ပိုင္ အမွတ္သားေလးရသြားပါၿပီ............ေက်းဇူးပါဗ်ာ

YoUtuBe မွာသြားၾကည့္ခ်င္ရင္ေတာ့ >>>> http://www.youtube.com/watch?v=6MUgrrCUtb0&feature=plcp
မွာၾကည့္ရႈ့ႏိုင္ပါတယ္........

Monday, August 27, 2012

Blog အလွဆင္ရန္ Website မ်ား

   အင္တာနက္မွာ Blog ေရးသားသူေတြ၊ အခမဲ့အသင့္ Website ဖန္တီးသူေတြအတြက္ မိမိတို႔ရဲ႕ Website (or) Blog ကိုအလွဆင္ရန္ ေအာက္ပါ Website မ်ားကို ေဖာ္ျပေပးလိုက္
ပါတယ္။ အဲ့ဒီ Website ေတြထဲမွာ မိမိဖန္တီးလိုတာေတြ ေတာ္ေတာ္မ်ားမ်ားပါ၀င္ပါလိမ့္မယ္။
http://winkkk.com
http://www.wishafriend.com
http://www.funscrape.com
http://www.mynicespace.com
http://www.spicecomments.com
http://www.playcomments.com
http://www.thugtags.com
http://www.fodey.com
http://www.avatarsdb.com
http://www.glitter-graphics.com
http://www.mastergreetings.com
http://www.jellymuffin.com
http://www.crazyprofile.com
http://www.myspaceanimations.com
http://www.layoutcodez.net
http://www.zwani.com
http://www.myspacegraphicsandanimations.com
http://www.myspacedev.com
http://www.orkutuncle.com
http://www.alegoo.com
http://www.mudtrap.com
http://media.photobucket.com
http://www.superpimper.com
http://www.yourcommentcodes.com
http://www.bigoo.ws
http://www.myorkutglitter.com
http://www.wondericons.com
http://www.getgreatcodes.com
http://www.postpalace.com
http://www.myniceprofile.com
http://pimpmyspacelayouts.net
http://www.skamu.com
http://www.impimages.com
http://www.friends18.com
http://glitterbell.com
http://www.gifzona.com
http://www.pimpinup.com
http://www.animationlibrary.com
http://www.123friendster.com
http://www.heathersanimations.com
www.msprofiles.com
 www.pimp-my-profile.com
 www.blingyblob.com
 www.myflashfetish.com
www.slide.com
 www.freeweblayouts.net
 www.freecodesource.com
www.layoutjungle.com
 www.glittergraphics.us
www.myhtmlhelp.com
 www.sendmeimages.com
 www.htmldog.com

Webpage ကို PDF file ေျပာင္းမယ္

ကြ်န္ေတာ္အစက Webpage ကို PDF Flile နဲ႔ လုိခ်င္တုန္းက ဆုိ ေတာ္ေတာ္ေလးကို အလုပ္ရႈပ္ခဲ႔ရတယ္ ။ အဲဒီတုန္းက ဖုိတုိေရွာပ္ကို ေတာ္ေတာ္ေလးကုိ ေလ႔လာျဖစ္ခဲ႔ေသးတာကိုး ။ အဲဒါကို သူေပးတဲ႔ နည္းကို လုိခ်င္ရင္ ပုံေတြနဲ႔ ျပေပးေတာ႔ အဲဒီနည္းကို ၾကိဳက္တယ္ဆုိရင္ PDF file ဒါမွ မဟုတ္ ။ Capture Add-On ကို သုံးျပီး JPG ဓါတ္ပုံဖုိင္နဲ႔ သိမ္းထားတာ ။ အဲသလုိ... ေတာ္ေတာ္ေလးကို ဒုက္ခေရာက္ခဲ႔တာ ။ PDF File တစ္ခါတစ္ခါေျပာင္းတာနဲ႔ ေတာ္ေတာ္ကို ဟန္းသြားတာ Firefox က စိတ္ေတာ္ေတာ္ညစ္ဖုိ႔ ေကာင္းတာ ။
ခုေတာ႔ ကြ်န္ေတာ္ Webpage ေတြကို PDF file ေျပာင္းဖုိ႔ နည္းေတြေတာ္ေတာ္ေလးကို ရလာတယ္ ။ Gmail ကေန တစ္မိနစ္ေစာင္႔ျပီး လုပ္တာတုိ႔ေတြေပါ႔ဗ်ာ ။ ခုေရးစာကလည္း Add-On ပါပဲဗ်ာ ။ ပုိျမန္တာေပါ႔ ။ Gmail ကေန လုပ္တာက ခဏေစာင္႔ရဦးမယ္ ။
အလုပ္နည္းနည္းရႈပ္ဦးမယ္....ဒီေကာင္႔ေလးကို သုံးလုိက္ရင္ ျမန္ျမန္ဆန္ဆန္ပဲဗ်ာ ။အဲဒီဝက္ဆုိဒ္ရဲ႔ ေကာင္းမႈပါပဲဗ်ာ ဒီေကာင္က ။ ျပီးေတာ႔ သာတာ တစ္ခုရွိေသးတယ္ ။ ေဒါင္းလုပ္လုိ႔ရရုံတင္ မကဘူး ။တစ္ခါတည္း Google Doc ကို လည္းတစ္ခါတည္း ပို႔ႏုိင္သလုိ ။ သူငယ္ခ်င္းေတြကိုလည္း ပုိ႔ေပးလုိ႔ေအာင္လည္း လုပ္လုိ႔ရပါေသးတယ္ ။ ဒါေပမယ္႔ ျမန္မာဆုိဒ္ေတြေတာ႔ မရေၾကာင္းပါ ။
ေနာက္တစ္ခုေၾကညာဝင္ခ်င္ပါေသးတယ္ဗ်ာ ။ ခုကြ်န္ေတာ္ဆုိဒ္သစ္ကို အျပီးပုိင္ေျပာင္လုိက္ပါျပီ ။ ျပီးေတာ႔ ဆုိဒ္က ဓါတ္ပုံေတြ သီခ်င္းေတြ အလကား နည္းပညာနဲ႔မဆုိင္တာေတြကို အျပီးပုိင္ျဖဳတ္ေပးလုိက္ပါျပီ ။ ကြ်န္ေတာ္ဆုိဒ္က နည္းပညာတစ္ခုတည္းနဲ႔ပဲ ေရးသြားေတာ႔မွာပါ ။ ဆုိဒ္အသစ္ကိုလာလည္ၾကပါဦးလုိ႔ ။ နဂုိက Member ဝင္ထားတဲ႔သူေတြလည္း တတ္ႏုိင္ရင္ ျပန္ဝင္ေပးပါဦးလုိ႔ ။ အသစ္လည္း ထပ္ဝင္ေပးေပါ႔ဗ်ာ :) ေတာ္ပါျပီ ေတာ္ၾကာေန အျမင္ကတ္ခံေနရဦးမယ္..........
ေစာနက Add-On လုပ္နည္းကို ေရးေပးပါဦးမယ္ ။ Add-On လုပ္နည္းေတြကို ကြ်န္ေတာ္မၾကာခဏေရးေပးေနပါတယ္ ။ လုပ္တတ္ျပီးသားဆုိရင္ လည္း လင္ခ္႔အတုိင္းသြားျပီး ကိုယ္႔ဖာသာကိုယ္လုပ္လုိက္ရုံတင္ ။ ကြ်န္ေတာ္ေတာ႔ မလုပ္တတ္ေသးတဲ႔သူေတြအတြက္ ဆက္ေရးဦးမယ္ဗ်ာ...
ပထမဆုံး ဒီလင္႔အတုိင္းသြားလုိက္ပါဗ်ာ ။ Firefox တင္မကဘူး IE,Chrome မွာ လည္း လုပ္ႏုိင္ပါတယ္ ။ ကြ်န္ေတာ္ေတာ႔ Firefox ကိုပဲ သုံးျဖစ္ေနေတာ႔ တစ္နည္းပဲ ေရးေပးပါမယ္ ။ သုံးၾကာတဲ႔ဟာပဲ သုံးလြယ္လုိ႔ သုံးျဖစ္ေနတာဗ်ာ ။ IE, Chrome အတြက္လင္ခ္႔ပါ ။ အဲဒီလင္႔အတုိင္းသြားျပီးေတာ႔ ပုံအတုိင္းၾကည္႔လုိက္ပါ ။ အဆင္ေျပပါလိမ္႔မယ္ဗ်ာ ။
ကဲခု Firefox အတြက္ ျပန္စရေအာင္... အေပၚက လင္ခ္႔အတုိင္းသြားလုိက္ပါ ။ ျပီးရင္ Add to firefox လုိက္ပါ ။
ျပီးရင္ သင္႔ရဲ႔ Firefox အေပၚနားမွာ ေပၚလာလိမ္႔မယ္ Allow လုိ႔ နိပ္ေပးလုိက္ပါ ။ အဲဒီကို...
ျပီးရင္ ခဏေလးေစာင္႔ေပးလုိက္ပါ ။ သူ႔ဖာသာ ေဒါင္းေနလိမ္႔မယ္... ဘာမွလုပ္စရာမလုိပါ ။ ျပီးရင္ Install လုပ္ဖုိ႔ Box တက္လာလိမ္႔မယ္... Install လုိက္ပါ ။
ျပီးရင္ Allow လုိမ်ိဳး Restart ခ်ဖုိ႔ တက္လာမယ္... ခ်သာခ် ;)
Restart ျပီးလုိ႔ ျပန္တက္လာရင္ ေရြးစရာေလး ရွိမယ္ ။ ၾကိဳက္တာေရြးေပးလုိက္ရုံတင္..
ျပီးရင္ေတာ႔ သင္ရဲ႔ Firefox ဒီလုိ႔ အမွတ္သာေလး ေပၚလာပါလိမ္႔မယ္...
အဲဒါကို ဘယ္လုိသုံးရတာလဲ ဆုိေတာ႔ သင္ေရာက္ေနတဲ႔ စာမ်က္ႏွာကို ေျပာငး္ခ်င္ရင္ အဲဒီေနရာကို နိပ္ေပးလုိက္ရုံတင္ ။ ဥပမာ ခု ဖတ္ေနတဲ႔ စာမ်က္ႏွာကိုေပါ႔ဗ်ာ ။ အဲ... အဲဒါကို နိပ္လုိက္တာနဲ႔ New Tag ဖြင္႔လုိက္မည္... အဲဒီမွာ ေဒါင္းဖုိ႔ရယ္...ရွဲဖုိ႔ရယ္... သိမ္းဖုိ႔ရယ္ရွိမယ္... ၾကိဳက္တာလုပ္လုိက္ရုံတင္။

WiFi ကို နားလည္ၾကည့္ျခင္း

အင္တာနက္ရတဲ့ ေကာ္ဖီဆိုင္ေတြ ၿမိဳ႕ျပရဲ႕ ယဥ္ေက်းမႈ တစ္ခုသဖြယ္ ျဖစ္လာပါတယ္။  ေကာ္ဖီဆိုင္ကို ကြန္ပ်ဴတာေလး ကိုင္ဝင္လာ၊ ဆိုင္ရွင္ဆီမွာ password ေတာင္းၿပီး ေကာ္ဖီတစ္ခြက္ က်ပ္ ၅၀၀ နဲ႔ မွာေသာက္ကာ တစ္ေနကုန္နီးပါးေလာက္ အင္တာနက္ ထိုင္ၾကည့္ရတာ တြက္ေခ်ကိုက္တယ္လို႔ ယူဆတဲ့ လူငယ္ေတြၾကားမွာ ေကာ္ဖီဆိုင္ အင္တာနက္ဟာ ေရပန္းစားလာတယ္။ ေခတ္မီဖြံ႕ၿဖိဳး တိုးတက္တဲ့ ႏိုင္ငံႀကီးေတြရဲ႕ ေလဆိပ္၊ ေကာ္ဖီဆိုင္၊ စာၾကည့္တိုက္၊ ဟိုတယ္ တစ္ခုခုထဲကို ကိုယ္ေရာက္ေနၿပီဆိုရင္ ႀကိဳးမဲ့ကြန္ရက္ ဆက္သြယ္ေရးစနစ္ (wireless network) ထဲ ေရာက္ေနၿပီလို႔ သတ္မွတ္ႏိုင္ပါတယ္။

အဲဒီ ႀကိဳးမဲ့ကြန္ရက္ ဆက္သြယ္ေရးစနစ္ကိုပဲ Wi-Fi သို႔မဟုတ္ 802.11 networking လို႔ ေခၚၾကတယ္။ အိမ္မွ႐ံုး၊ ႐ံုးႏွင့္အိမ္ အျပန္အလွန္ ဆက္သြယ္ႏိုင္ဖို႔ အင္တာနက္ကို သံုးၾကတယ္။ ကြန္ရက္ေတြ တည္ေဆာက္ ၾကတယ္။ ေစ်းႏႈန္းေတြ ေလွ်ာ့ခ်လာၾကတယ္။ ယခင္ အင္တာနက္သံုးႏိုင္ဖို႔ ကြန္ပ်ဴတာနဲ႔ ႀကိဳးေတြ မ်က္စိေနာက္ေလာက္ေအာင္ ဆက္သြယ္ရာကေန ႀကိဳးမဲ့ကြန္ရက္ေၾကာင့္ ႀကိဳးမပါ ဆက္သြယ္လာႏိုင္ၾကတယ္။ အနာဂတ္မွာ အင္တာနက္ဆိုတာ အခ်ိန္မေရြး၊ ေနရာမေရြး၊ လူတန္းစားမေရြး သံုးႏိုင္မယ့္ စနစ္ႀကီးတစ္ခု ျဖစ္လာပါလိမ့္မယ္။

Wi-Fi ဆိုတာ ေခတ္သစ္မွာ အက်ဳိးတရားမ်ားတဲ့ နည္းပညာတစ္ခု ျဖစ္ပါတယ္။ ႀကိဳးမဲ့ အသံုးျပဳႏိုင္တာေၾကာင့္ တပ္ဆင္စရိတ္ က်ဥ္းတယ္။ လြယ္လည္း လြယ္တယ္။  အျမင္မွာ ႐ႈပ္ေထြးမေနတဲ့အျပင္ တပ္ဆင္ထားတယ္ဆိုတာေတာင္ သိႏိုင္မွာ မဟုတ္ဘူး။ Hotspot လို႔ ေခၚတဲ့ အင္တာနက္သံုးႏိုင္တဲ့ ဧရိယာအတြင္းကို ေရာက္ေနၿပီဆိုရင္ လက္ပ္ေတာ့ေလး ဖြင့္ၿပီး အလြယ္သံုးလိုက္လို႔ ရတယ္။

Wi-Fi ဆိုတာ ဘာလဲ

ႀကိဳးမဲ့ ဆက္သြယ္ေရးစနစ္တစ္ခု ျဖစ္ၿပီး ေရဒီယိုလႈိင္းကို အသံုးျပဳတဲ့ ကြန္ရက္စနစ္တစ္ခုလို႔လည္း ဆုိႏိုင္တယ္။ ခုေခတ္ သံုးေနၾကတဲ့ ဆဲလ္ဖုန္း၊ တယ္လီေဗးရွင္းနဲ႔ ေရဒီယိုေတြဟာ ေရဒီယိုလႈိင္း (radio wave) နဲ႔ အသံုးျပဳေနတယ္လို႔ ဆိုႏိုင္တယ္။ ဆက္သြယ္ေရးစနစ္မွာ ႀကိဳးမဲ့ ဝါယာလက္စနစ္ကို အသံုးျပဳျခင္းေၾကာင့္ ေရဒီယိုဆက္သြယ္ေရးမွာ ႏွစ္လိုင္း (two-way) စနစ္နဲ႔ ဆက္သြယ္လာႏိုင္တယ္။ ဘာေၾကာင့္ အဲဒီလို ဆက္သြယ္လာႏိုင္တာလဲဆိုေတာ့

၁။ ကြန္ပ်ဴတာမွာ သံုးတဲ့ ႀကိဳးမဲ့ adapter က data ေတြကို radio signal ေတြအျဖစ္ ေျပာင္းၿပီးေတာ့ အင္တီနာ (antenna) ကတစ္ဆင့္ ပို႔ေဆာင္ေပးႏိုင္တယ္။
၂။ ႀကိဳးမဲ့ router က ေပးပို႔လိုက္တဲ့ signal ေတြကို ဖမ္းၿပီးေတာ့ ကုတ္ေတြကို ျပန္ေဖာ္ေပးတယ္။  Router က အခ်က္အလက္ေတြကို အင္တာနက္ထဲ ႀကိဳးတပ္ထားတဲ့ Ethernet ဆက္သြယ္ေရးစက္က တစ္ဆင့္ ျပန္ပို႔ေပးတယ္။ အဲဒီျဖစ္စဥ္ကို ၾကည့္ရင္ router က အင္တာနက္ထဲက အခ်က္အလက္ေတြကို လက္ခံတယ္။ ေရဒီယို signal ေတြအျဖစ္ ေျပာင္းတယ္။ ကြန္ပ်ဴတာ ႀကိဳးမဲ့ adapter ဆီကို ျပန္ပို႔တယ္ဆိုတဲ့ သံုးရပ္ကို သြားေတြ႕ရမွာ ျဖစ္တယ္။ ေရဒီယိုေတြ အသံုးျပဳတဲ့ Wi-Fi ဆက္သြယ္ေရးဟာ walkie-talkies, cell phones နဲ႔ အျခားပစၥည္းေတြမွာ ဆက္သြယ္ ေျပာဆိုႏိုင္ဖို႔ ေရဒီယိုစနစ္နဲ႔ အတူတူပါပဲ။ ေရဒီယိုလႈိင္းေတြကို ပို႔လႊတ္ႏိုင္တယ္။ ျပန္ၿပီး လက္ခံႏိုင္တယ္။ ဒါေၾကာင့္လည္း two-way လို႔ ေျပာတာပါ။ ေရဒီယိုလႈိင္းေတြကို ပို႔လႊတ္မႈနဲ႔ လက္ခံမႈေတြမွာ လႈိင္းေတြကို 0 နဲ႔ 1 ေတြ အျဖစ္ ေျပာင္း၊ ၿပီးေတာ့ 0 နဲ႔ 1 ေတြကို လႈိင္းေတြအျဖစ္ ျပန္ေျပာင္းၿပီး ဆက္သြယ္မႈေတြ လုပ္ၾကတယ္။ Wi-Fi ေရဒီယိုေတြဟာ အျခား သာမန္ေရဒီယိုေတြနဲ႔ ကြာျခားမႈေတာ့ ရွိတယ္။
Wi-Fi ေရဒီယိုေတြက

- Frequency ေတြကို 2.4GHz သို႔မဟုတ္ 5 GHz နဲ႔ ပို႔လႊတ္ႏိုင္စြမ္း ရွိတယ္။ အဲဒီ ဖရီကြင္စီဟာ ဆဲလ္ဖုန္း၊ ေဝၚကီေတာ္ကီနဲ႔ တယ္လီေဗးရွင္းေတြမွာ သံုးတဲ့ ဖရီကြင္စီထက္ ပိုျမင့္တယ္။ ဖရီကြင္စီျမင့္ေလ signal ေတြက data ေတြကို ပိုၿပီး မ်ားမ်ား သယ္ေဆာင္ႏိုင္ေလ ျဖစ္တယ္။
-  802.11 ဆိုတဲ့ networking standard ကို Wi-Fi မွာ သတ္မွတ္သံုးစြဲျခင္းဟာ ေကာင္းက်ဳိးမ်ားစြာ ရရွိေစခဲ့ပါတယ္။ 802.11a စံႏႈန္းဟာ 5GHz အျမန္ႏႈန္းနဲ႔ တစ္စကၠန္႔ကို  54 megabits အထိ သယ္ေဆာင္ေပးႏိုင္စြမ္း ရွိတယ္။ OFDM (orthogonal frequency-division multiplexing) ကို အသံုးျပဳထားတဲ့အတြက္ ပိုၿပီး ထိေရာက္ စြမ္းေဆာင္ႏိုင္တဲ့ coding  စနစ္ကို ေဖာ္ေဆာင္ႏိုင္တယ္။ ေရဒီယို signal တစ္ခုထဲမွာ signal အခြဲေပါင္းမ်ားစြာကို ေရဒီယို  receiver ဆီ မေရာက္မခ်င္း အမ်ဳိးမ်ဳိး ခြဲထုတ္သြားႏိုင္စြမ္း ရွိတယ္။ အဲဒီလို signal အခြဲေပါင္းမ်ားစြာကို တစ္လိုင္းတည္းကေန သယ္ေဆာင္သြားရေပမယ့္ တစ္ခုနဲ႔တစ္ခု ေႏွာင့္ယွက္မႈလည္း မရွိႏိုင္ဘူး။

ဆိုလိုတာက အသံေတြ၊ ေဒတာေတြ ေရာေထြးမႈ မျဖစ္ႏိုင္ဘူး။ 802.11b ကေတာ့ အေႏွးဆံုးျဖစ္ၿပီး ေစ်းလည္း အသက္သာဆံုး standard တစ္ခု ျဖစ္တယ္။ ေစ်းသက္သာလို႔ လူႀကိဳက္မ်ားတယ္လို႔ ေျပာေပမယ့္ ေနာက္ပိုင္း သူ႔ထက္ျမန္တဲ့ စနစ္ေတြကို သံုးမယ္ဆိုရင္ ေစ်းက သိပ္မကြာတာေၾကာင့္ လူေတြက ျမန္ႏႈန္းျမင့္တာကိုပဲ ပိုၿပီးေတာ့ စိတ္ဝင္စားလာၾကတယ္။ 802.11b  ဟာ ေဒတာေတြကို အျမန္ႏႈန္း 2.4GHz ဖရီကြင္စီေလာက္နဲ႔ပဲ ေရဒီယိုလႈိင္းေတြကို ပို႔ေဆာင္ႏိုင္တယ္။ တစ္စကၠန္႔ကို ေဒတာေတြ သယ္ေဆာင္ရာမွာလည္း 11 megabits ေလာက္ပဲ သယ္ေဆာင္ႏိုင္တယ္။ ကုတ္ေတြကို ဖန္တီးရာမွာေတာ့ CCK (complementary code keying) စနစ္နဲ႔ ေျပာင္းလဲႏိုင္ၿပီး သူသယ္ေဆာင္ႏိုင္စြမ္း ရွိတဲ့ လိုက္ဖက္တဲ့ speed လို႔ ဆိုနိုင္တယ္။

802.11g  ကလည္း 802.11b လိုပဲ ေဒတာေတြကို ပို႔ေဆာင္တဲ့စနစ္ ျဖစ္ေပမယ့္ ပိုျမန္တယ္။ တစ္စကၠန္႔ကို 54 megabits အထိ ေဒတာေတြကို သယ္ပို႔ေပးႏိုင္တယ္။ 802.11g ဟာ ပိုျမန္ရတာက 802.11a မွာလိုပဲ OFDM ကုတ္စနစ္ကို အသံုးျပဳထားတာေၾကာင့္ ျဖစ္တယ္။ 802.11n ကေတာ့ ေနာက္ဆံုးေပၚ standard တစ္ခုျဖစ္ၿပီး က်ယ္ျပန္႔စြာ သံုးစြဲေနၾကၿပီ ျဖစ္တယ္။ ေနာက္ဆံုးေပၚလည္းျဖစ္ speed ကလည္း ပိုျမန္၊ သံုးႏိုင္တဲ့ခြင္ (range) ကလည္း ပိုက်ယ္ျပန္႔လာတာေၾကာင့္ လူႀကိဳက္ ပိုမ်ားတယ္။ ဥပမာ 802.11g ဟာ သီအိုရီအရ တစ္စကၠန္႔ကို  54 megabits ေဒတာေတြကို သယ္ေဆာင္ေပးႏိုင္တယ္ ဆိုေပမယ့္ တကယ္သံုးၾကည့္ေတာ့ 24 megabits ေလာက္ပဲ ရတာ ေတြ႕ရတယ္။ Networking အပိုင္းမွာ ပိတ္ဆို႔ ၾကပ္ညပ္ေနတဲ့အတြက္ ျဖစ္ပါတယ္။ 802.11n ဟာ ခုဆိုရင္ တစ္စကၠန္႔ကို 140 megabits speed နဲ႔ အျမန္ဆံုး သယ္ေဆာင္ႏိုင္စြမ္း ရွိေနၿပီ။

- အျခား 802.11 standard ေတြလည္း ႀကိဳးမဲ့ကြန္ရက္အတြက္ သံုးတာေတြ ရွိေသးတယ္။ ဥပမာ WAN (wide area networks) လိုမ်ဳိးေပါ့။ ကားေမာင္းေနရင္း သံုးႏိုင္သလို  တစ္ေယာက္နဲ႔တစ္ေယာက္ ဆက္သြယ္မႈ ျပတ္ေတာက္မသြားႏိုင္တဲ့ စနစ္မ်ဳိး ျဖစ္တယ္။
- Wi-Fi ေရဒီယိုေတြက frequency band သံုးမ်ဳိးနဲ႔ လႈိင္းေတြကို ပို႔လႊတ္ႏိုင္တယ္။ အျခား band ေတြကို frequency hop နည္းနဲ႔ အျမန္ဆံုး ဆက္သြယ္ႏိုင္တယ္။ ဖရီကြင္စီေတြ hop ျဖစ္ေနရင္ တစ္ခုနဲ႔တစ္ခု အေႏွာင့္အယွက္ကင္းသလို ပစၥည္းမ်ဳိးစံုနဲ႔လည္း ဆက္သြယ္မႈစနစ္ တစ္ခုတည္းမွာ တြဲသံုးႏိုင္တယ္။ တစ္ဦးနဲ႔တစ္ဦး ဆက္သြယ္ရာမွာ wireless adapter ေတြကို အသံုးျပဳၾကတဲ့အတြက္ router တစ္ခုမွာ အင္တာနက္ ခ်ိတ္လိုက္တာနဲ႔ အျခားပစၥည္းစံုမွာလည္း အင္တာနက္ သံုးႏိုင္လာတယ္။ ဒီလို ဆက္သြယ္ေရးစနစ္ဟာ ပိုၿပီးေတာ့ အဆင္ေျပေစတယ္။ႀကိဳးေတြလည္း မျမင္ရ၊ စရိတ္လည္း သက္သာေစတယ္။

ဒါေပမယ့္ router က အလုပ္မလုပ္ရင္ သို႔မဟုတ္ high-bandwidth application ေတြကို လူေတြ တစ္ၿပိဳင္တည္း တစ္ခ်ိန္တည္း ဝိုင္းသံုးေနမယ္ ဆိုရင္ေတာ့ ျပတ္ေတာက္တာမ်ဳိးေတြ ျဖစ္သြားႏိုင္တယ္။ Wi-Fi Hotspots အမ်ားျပည္သူသံုး အခမဲ့ အင္တာနက္ သို႔မဟုတ္ Wi-Fi Hotspot ေတြကို ဖြံ႕ၿဖိဳးတိုးတက္တဲ့ ႏိုင္ငံႀကီးေတြမွာ ပန္းၿခံ၊ ေလဆိပ္၊ စာၾကည့္တိုက္စတဲ့ ေနရာေတြမွာ စီစဥ္ေပးထားတယ္။ အဲဒီ hotspot နဲ႔ အင္တာနက္သံုးႏိုင္ဖို႔အတြက္ ကိုယ့္ကြန္ပ်ဴတာ သို႔မဟုတ္ laptop ဟာ အဆင့္ျမင့္ဖို႔ လိုတယ္။ ေနာက္ပိုင္းေပၚတဲ့ desktop နဲ႔ laptop ေတြမွာ wireless transmitter ေတြကို ထည့္ေပးလိုက္တဲ့အတြက္ အဲဒီ hotspot ေနရာေတြမွာ သံုးလာႏိုင္တယ္။ တကယ္လို႔ ကိုယ့္ကြန္ပ်ဴတာမွာ အဲဒီလို wireless adapter ပါမလာဘူးဆိုရင္ ကတ္တစ္ကတ္ သို႔မဟုတ္ USB နဲ႔ ခ်ိတ္သံုးရတဲ့ adapter တစ္လံုး ဝယ္ရမယ္။

ေနာက္ပိုင္းထြက္တဲ့ adapter ေတြကလည္း 802.11 standard ေတြ ျဖစ္တာေၾကာင့္ သံုးလို႔ ရႏိုင္တယ္။ ကြန္ပ်ဴတာေပၚမွာ အဲဒီ ႀကိဳးမဲ့ adapter ကို တပ္ဆင္ၿပီး driver ကိုပါ တင္ထားလိုက္ရင္ တစ္ႀကိမ္တည္းနဲ႔ ကိုယ့္ပတ္ဝန္းက်င္မွာ ရႏိုင္တဲ့  network ေတြကို သိႏိုင္တယ္။ ဆိုလိုတာက Wi-Fi hotspot ရတဲ့ ေနရာေတြမွာ ကြန္ပ်ဴတာကို ဖြင့္လိုက္တာနဲ႔ network နဲ႔ ခ်ိတ္ၿပီးသား ျဖစ္လိမ့္မယ္။ ကြန္ပ်ဴတာ အေဟာင္းေတြမွာေတာ့ အဲဒီလိုရဖို႔ သိပ္မေသခ်ာဘူး။ အမ်ားျပည္သူသံုး hotspot ေနရာေတြမွာ အင္တာနက္ သံုးခ်င္သူေတြက ခ်ိတ္ဆက္တဲ့ နည္းစနစ္ေလးေတြကိုေတာ့ သိဖို႔ လိုတယ္။ ႀကိဳးမပါဘဲ ကိုယ့္ပတ္ဝန္းက်င္က network ေတြ၊ ကြန္ပ်ဴတာေတြကို သိႏိုင္တာေၾကာင့္ သတိေတာ့ထားရတယ္။ အခ်ိန္မေရြး ကိုယ့္ကြန္ပ်ဴတာကို ကုိယ့္ပတ္ဝန္းက်င္က ဝင္ေရာက္ ထိုးေဖာက္ႏိုင္တယ္။

Wireless Network တစ္ခု တည္ေဆာက္ျခင္း

ကိုယ့္အိမ္ သို႔မဟုတ္ ႐ံုးမွာ ကြန္ပ်ဴတာေတြအမ်ားႀကီးနဲ႔ ခ်ိတ္ဆက္ထားတာဆိုရင္  wireless network အတြက္ wireless access point ကို သီးျခား သတ္မွတ္ေပးရမယ္။ လက္ရွိႀကိဳးေတြနဲ႔ Ethernet network စနစ္ကို သံုးေနဆဲဆိုရင္ သူ႔ေနရာမွာ wireless router တစ္လံုးကို ေျပာင္းသံုးဖို႔ လိုတယ္။ ပံုမွန္ router တစ္လံုးကို ဆင္မယ္ဆိုရင္ လိုအပ္တာေတြက

၁။ DSL modem သို႔မဟုတ္ ႀကိဳးတပ္ဖို႔ port လိုတယ္
၂။ Router တစ္လံုး လိုတယ္
၃။ Ethernet hub တစ္လံုး လိုတယ္
၄။ Wireless Access Point လိုတယ္

Wireless router က wireless signal  ေတြ ဖမ္းဖို႔ျဖစ္ၿပီး၊ Ethernet ႀကိဳးေတြက ကြန္ပ်ဴတာတစ္လံုးနဲ႔ တစ္လံုး သို႔မဟုတ္ ပရင္တာ သို႔မဟုတ္ အင္တာနက္ရေအာင္ ခ်ိတ္ဆက္ဖို႔ ျဖစ္တယ္။ ဒီေတာ့ ႀကိဳးနဲ႔လည္း သံုးလို႔ရတယ္၊ ႀကိဳးမဲ့လည္း သံုးႏိုင္တယ္လို႔ ေျပာခ်င္တာပါ။ Router ေတြဟာ ေပ ၁၀၀ (၃၀.၅မီတာ) ပတ္လည္ေလာက္ကို ဆက္သြယ္ႏိုင္စြမ္း ရွိတယ္။ ဒါေပမဲ့ ပတ္လည္မွာ နံရံေတြကာ၊ တံခါးေတြ ပိတ္ထားရင္ေတာ့ signal ေတြ ပိတ္ဆို႔ေနလိမ့္မယ္။ အိမ္ သို႔မဟုတ္ ႐ံုးက သိပ္က်ယ္ေနရင္ router ရဲ႕ range ခြင္ကို ပိုၿပီး က်ယ္ျပန္႔စြာ ရႏိုင္ေအာင္ range extender သို႔မဟုတ္ repeater လို ဟာမ်ဳိးေတြကို ထပ္ဆင့္ အပိုေဆာင္းၿပီး တပ္ဆင္ဖို႔ လိုတယ္။

ႀကိဳးမဲ့ adapter ေတြအေနနဲ႔ သံုးတဲ့ router ေတြဟာ 802.11 standard တစ္ခုခု ျဖစ္ဖို႔ေတာ့ လိုတယ္။ 802.11b router ေတြဟာ ေစ်းနည္းနည္း ပိုၿပီးေတာ့ သက္သာတယ္။ ဒါေပမဲ့ အဲဒီ standard က နည္းနည္း ေခတ္ေနာက္က်သြားၿပီ။ 802.11a, 802.11g နဲ႔ 802.11n router ေတြထက္ ပိုေႏွးတာေၾကာင့္ ဝယ္ရင္လည္း စဥ္းစားရမယ္။ အမ်ားစု အသံုးမ်ားတာကေတာ့ 802.11g ကိုပဲ သံုးေလ့ရွိၿပီး speed ကလည္း လက္ခံႏိုင္တဲ့ အေနအထားမွာ ရွိတယ္။ Router မွာ ခ်ိတ္လိုက္တာနဲ႔ သူ႔ default setting ေတြက စတင္ၿပီး အလုပ္လုပ္လိမ့္မယ္။ Router အမ်ားစုဟာ   Web interface ေတြကို သံုးၿပီး setting ေတြကို ေျပာင္းသြားလိမ့္မယ္။ ကိုယ္က ဘာေတြ ေရြးခ်ယ္ေပးႏိုင္သလဲ ဆိုရင္

- Network ရဲ႕ name, ကိုယ့္ကို ဝန္ေဆာင္မႈေပးေနတဲ့ ဌာနရဲ႕ SSID (Service Set Identifier) ေတြ လိုတယ္။ Default setting ဟာ မ်ားေသာအားျဖင့္ ထုတ္လုပ္တဲ့ ကုမၸဏီရဲ႕ အမည္ ျဖစ္ေလ့ရွိတယ္။
- Router အသံုးျပဳတဲ့ channel ဟာ မ်ားေသာအားျဖင့္ ၆ လိုင္းေလာက္ ရတတ္တယ္။ မသံုးခ်င္တဲ့ လိုင္းကိုလည္း ရွင္းထုတ္ထားလိုက္လို႔ ရတယ္။
- Router ရဲ႕ security နဲ႔ ပတ္သက္ၿပီး သူ႔ standard, sign-on ေတြ ရွိတတ္တယ္။ Username နဲ႔  password ေတြကို ထားျခင္းျဖင့္ ကာကြယ္မႈေတြ လုပ္ထားနိုင္တယ္။ Security ဟာ အေရးႀကီးပါတယ္။ အိမ္ သို႔မဟုတ္ ႐ံုးမွာ သံုးသည္ျဖစ္ေစ၊ Wi-Fi hotspot မွာသံုးသည္ျဖစ္ေစ security ကို ဂ႐ုစိုက္ရတယ္။ 

ကိုယ္ပိုင္ Webpage ေလးတစ္ခု ဖန္တီးျပခ်င္......

HTML ကို Edit လုပ္ေပးတဲ့ IDE ထဲမွာ လက္ရွိ လူသူအမ်ားဆံုးကေတာ့ Dreamwaver Software ပဲ ျဖစ္ပါတယ္။ Dreamwaver Software ကို HTML မေရးတက္တဲ့သူေတြကအစ အသံုးျပဳလို႔ရပါတယ္။
ဒီသင္ခန္းစာမွာ Beginner မ်ားအတြက္ Dreamwaver ကို သံုးၿပီး ကိုယ္ပိုင္ Webpage ေလးတစ္ခု ဖန္တီးျပမွာ ျဖစ္ပါတယ္။ `

ကၽြန္ေတာ္တို႔ ပထမဦးဆံုး Website တစ္ခု မဖန္တီးခင္ Mycomputer ထဲက D: မွာ Project အမည္နဲ႔ Folder တစ္ခုကို ၾကိဳတင္ျပဳလုပ္ထားလိုက္ပါ။ ထို႔ Project Folder ထဲတြင္ BusinessSite အမည္ျဖင့္ Folder အသစ္တစ္ခုထပ္ျပဳလုပ္ထားလိုက္ပါ။

၁။ Dreamwaver Software ကို ဖြင့္လိုက္ပါ။

ထို႔ေနာက္ ပံုမွာျပထားတဲ့အတိုင္း “Create New” ေအာက္မွာရွိတဲ့ “Dreamweaver Site” ကို Click ႏွိပ္လိုက္ပါ။

dreamweaver site

Site Definition Box က်လာပါက “BusinessSite” ဆိုၿပီး အမည္ေပးၿပီး Next ကို ႏွိပ္လိုက္ပါ။ ဒီေနရာမွ မိမိၾကိဳက္ႏွစ္သက္တဲ့အမည္ေပးလို႔လည္းရပါတယ္။

site defiinition

ပံုတြင္ျပထားသည့္အတိုင္း ေရြးခ်ယ္ၿပီး Next ကို ႏွိပ္လိုက္ပါ။
Define a New Site in Dreamweaver CS4


ကၽြန္ေတာ္တို႔ အခုနက ၾကိဳတင္တည္ေဆာက္ခဲ့တဲ့ Project Folder ထဲမွ BusinessSite ကို လမ္းေၾကာင္းေရြးခ်ယ္ေပးၿပီး Next ကို ႏွိပ္လိုက္ပါ။ Folder မေဆာက္ရေသးတဲ့သူေတြကေတာ့ ပံုမွာျပထားတဲ့အတိုင္း လမ္းေၾကာင္းေနရာမွာ ကၽြန္ေတာ္ျပထားတဲ့အတိုင္းေရးလိုက္ပါ။ ဒါဆို D: ေအာက္မွာ Project Folder ကို သူ႔ဘာသာသူတည္ေဆာက္ေပးပါလိမ့္မယ္။
site definition


None ကို ေရြးၿပီး Next ႏွိပ္လိုက္ပါ။
site definition

ထို႔ေနာက္ Done ကို ႏွိပ္လိုက္ပါက ပံုတြင္ျပထားသည့္အတိုင္း ျမင္ေတြရရမွာျဖစ္ပါတယ္။ ထို႔ေနာက္ ကၽြန္ေတာ္တို႔ ဓာတ္ပံုေတြသိမ္းဖို႔အတြက္ ညာဘက္ေထာင့္မွာရွိတဲ့ Site - BusinessSite ကို ႏွိပ္ၿပီး Right ClickNew Folder ကို ေရြးကာ images ဟုအမည္ေပးၿပီး Folder တစ္ခုကို BusinessSite Folder ေအာက္မွာ ေဆာက္လိုက္ပါတယ္။


Define a New Site in Dreamweaver CS4


အထက္ပါအဆင္မ်ားၿပီးဆံုးပါက ကၽြန္ေတာ္တို႔ Template တစ္ခုကို Create ျပဳလုပ္ဖို႔ File Menu ေအာက္က New ကို ႏွိပ္လိုက္ပါ။ ထို႔ေနာက္ ပံုတြင္ျပထားသည့္အတိုင္း ‘Blank Template’ > Template Type: ‘HTML Template’ > Layout: ‘none’ ကို အဆင့္ဆင့္ေရြးလိုက္ပါ။
Create a template in Dreamweaver CS4


ထို႔ေနာက္ template ကို သိမ္းရန္အတြက္ File ေအာက္မွ Save As ကို ႏွိပ္လိုက္ပါ။ ထို႔ေနာက္ template လို အမည္ေပးၿပီး Save မွတ္လိုက္ပါ။ ဒါဆိုလွ်င္ template ကို မိမိရဲ႕ BusinessSite ရဲ႕ေအာက္မွာ Template Folder တစ္ခုကို တည္ေဆာက္ၿပီး template.dwt ဆိုၿပီး Save မွတ္ေပးတာကို ေတြ႕ရမွာျဖစ္ပါတယ္။
Create a template in Dreamweaver CS4

Create a template in Dreamweaver CS4


ကၽြန္ေတာ္တို႔ရဲ႕ Template မွာ ဒီဇိုင္ျပဳလုပ္ရန္အတြက္ Layout သတ္မွန္ရန္အတြက္ Insert > Layout Objects > Div Tag ကိုေရြးခ်ယ္ကာ header ဟုအမည္ေပးၿပီး New CSS Rule ကို ႏွိပ္လိုက္ပါ။
Design your template in Dreamweaver CS4


Design your template in Dreamweaver CS4


New CSS Rule Box က်လာပါက #header လို႔အမည္ေပးပါ။ New Style Sheet File ကို ေရြးေပးၿပီး Ok ကို ႏွိပ္လိုက္ပါ။
Design your template in Dreamweaver CS4

styles လို႔အမည္ေပးၿပီး Save မွတ္လိုက္ပါ။
Design your template in Dreamweaver CS4


CSS Rule Box က်လာပါက ပံုမွာျပထားတဲ့အတိုင္း အဆင့္ဆင့္ျပဳုလုပ္လိုက္ပါ။ ဒီေနရာမွာေတာ့ ကၽြန္ေတာ္တို႔ Tutorials ျဖစ္တဲ့အတြက္ ကၽြန္ေတာ္လုပ္ျပထားတဲ့အတိုင္းပဲလိုက္လုပ္ပါ။ ပံုေတြကိုေတာ့
ဒီေနရာမွာ Download ျပဳုလုပ္ၿပီး ပံုေတြကို Copy ကူးကာ မိမိျပဳုလပ္ထားတဲ့ D:>Project>images ထဲမွာ Paste လုပ္ထားလိုက္ပါ။ ၿပီးရင္ေတာ့့ ေအာက္မွာျပထားတဲ့အတိုင္း လုပ္လိုက္ပါ။


Background ပံုထည့္ရန္အတြက္ Browser ကို ႏွိပ္ကာ D:>Project>images ထဲက ကၽြန္ေတာ္တို႔ သိမ္းထားတဲ့ header-bg ဆိုတဲ့ပံုကိုေရြးလိုက္ပါ။

Design the CSS Style Sheet in Dreamweaver CS4

header-css-box

ထို႔ေနာက္ Ok ကို ႏွိပ္လိုက္ပါက Insert Div tag Box က်လာပါက OK ကို ႏွိပ္လိုက္ပါ။ ၿပီးလွ်င္ Design ကို Click ႏွိပ္ၿပီးၾကည့္လိုက္ပါ။
Design the CSS Style Sheet in Dreamweaver CS4


ထို႔ေနာက္ ကၽြန္ေတာ္တို႔ Layer ေနာက္တစ္ခုလုပ္ရန္အတြက္ Window > CSS Styles ကို Click ႏွိပ္လိုက္ပါ။ ‘New CSS Rule’ icon ကို ႏွိပ္လိုက္ပါ။
Design the CSS Style Sheet in Dreamweaver CS4


ၿပီးလွ်င္ ေအာက္မွာျပထားတဲ့အတိုင္း ျဖည့္လိုက္ပါ။

- Selector type: Tag
- Selector Name: body
- Rule Definition: styles.css


OK
ကို Click ႏွိပ္လိုက္ပါ။
Design the CSS Style Sheet in Dreamweaver CS4


ၿပီးလွ်င္ေတာ့ ေအာက္ကပံုအတိုင္းေလူ လုပ္လိုက္ပါ။ 0 ပဲေပးလိုက္ပါ။ ဒါမွ ဘယ္ညာႏွစ္ဖက္လံုး အျပည့္ျဖစ္သြားမွာျဖစ္ပါတယ္။
Design the CSS Style Sheet in Dreamweaver CS4



ကၽြန္ေတာ္တို႔ ‘Content for id “header” Goes Here’ ဆိုတဲ့ေနရာမွာ Logo ထည့္မွာျဖစ္တဲ့အတြက္ အဲ့ဒီစာသားေတြကို Delete လုပ္လိုက္ပါ။ ထို႔ေနာက္ Insert > Image ကို ႏွိပ္ၿပီး Logo ပံုေလးကို ေရြးလိုက္ပါ။ ထို႔ေနာက္ alternate textၚတြင္ မိမိၾကိဳက္ႏွစ္သက္တဲ့အမည္ေပးလိုက္ပါ။ ကၽြန္ေတာ္ကေတာ့ BusinessSite Logo လို႔အမည္ေပးလိုက္ပါတယ္။ ၿပီးလွ်င္ OK ႏွိပ္လိုက္ပါ။
Insert Images in Dreamweaver CS4


ဒါဆို ကၽြန္ေတာ္တို႔ရဲ႕ Header မွာ ယခုလိုျမင္ရမွာျဖစ္ပါတယ္။
Insert Images in Dreamweaver CS4

ကၽြန္ေတာ္တို႔ ့Logo ထည့္ထားတဲ့ header ကို Select လုပ္လိုက္ပါ။ ေအာက္ဆံုးမွာ ဒီလိုေလးေတြရမွာျဖစ္ပါတယ္။ မေတြ႔တဲ့သူေတြကေတာ့ Select မွတ္တာမွားေနလို႔ပါ။ မေတြ႔ရင္လည္း Code ကို သြားၿပီး ေအာက္မွာေပးထားတဲ့ Code ကိုရွာလိုက္ပါ။
Creating the Menu in Dreamweaver CS4

Select မွတ္ၿပီးလွ်င္ Code ကို သြားပါ။ Header Code ကို Select မွတ္ေပးထားတာေတြ႔ရပါမယ္။ အေပၚက မေတြ႔တဲ့သူေတြကေတာ့ ဒီ Code ကို ရွာလိုက္ပါ။
Creating the Menu in Dreamweaver CS4

Creating the Menu in Dreamweaver CS4


ကၽြန္ေတာ္တို႔ အေပၚပံုမွာ ျပထားတဲ့အတိုင္း Code ရဲ႕ေနာက္ဆံုးမွာ cursor ေလး ခ်ၿပီး Insert > Layout Objects > Div Tag ကိုေရြးကိုေရြးခ်ယ္ကာ menu ဟုအမည္ေပးၿပီး New CSS Rule ကို ႏွိပ္လိုက္ပါ။
Design your template in Dreamweaver CS4


ၿပီးလွ်င္ေတာ့ ဟိုအေပၚအဆင့္မွာ ျပဳလုပ္ခဲ့တဲ့အဆင့္အတိုင္း ေအာက္မွာေပးထားတာေတြကို မွန္ေအာင္ျဖည့္လိုက္ပါ။
  • Selector Type: ID
  • Selector Name: #menu
  • Rule Definition: styles.css
ၿပီးလွ်င္ေတာ့ OK ကို ႏွိပ္လိုက္ပါ။

‘CSS Rule Definition for #menu’Box က်လာရင္ ေအာက္ကအတိုင္း ျဖည့္လိုက္ပါ။
  • Background> Background- image: images/menu-bg.jpg
  • Box > Width: 100%
  • Box > Height: 32px
  • Click OK
ထို႔ေနာက္ Insert Div Tag Box က်လာပါက OK ကို ႏွိပ္လိုက္ပါ။

ၿပီးလွ်င္ေတာ့ ကၽြန္ေတာ္တို႔ Design ကိုေရြးၿပီး ၾကည့္လိုက္ပါ။ အခုလုပ္သြားတဲ့အဆင့္က အေပၚက အဆင့္ေတြအတိုင္းျဖစ္တဲ့အတြက္ ပံုနဲ႔တကြမရွင္းျပေတာ့ဘူးေနာ္။ မလုပ္တက္ရင္ အေပၚအဆင့္ေတြကို ေသေသျခာျခာျပန္ၾကည့္ပါ။

ထို႔ေနာက္ Menu ျပဳုလုပ္ရန္အတြက္ Content for id "menu" Goes Here ကို ဖ်က္လိုက္ၿပီး Insert > Image ကို ႏွိပ္ၿပီး Home ပံုကိုေရြးၿပီး မိမိၾကိဳက္ႏွစ္သက္တဲ့အည္ကိုေပးၿပီး OK ႏွိပ္လိုက္ပါ။ ထို႔ေနာက္ Home ပံုေလးေဘးမွာ cursor ခ်ၿပီးအခုနကအတိုင္း Insert > Image ကို ႏွိပ္ၿပီး ပံုးေတြေရြးၿပီးအမည္ေတြေပးလိုက္ပါ။ အဲ့ဒီမွာ Menu အတြက္ about-us ၊ contact-us၊ services ေတြရွိပါတယ္။ တစ္ခုစီေရြးၿပီး လုပ္လိုက္ပါ။ ၿပီးရင္ေတာ့ ေအာက္ကပံုအတိုင္းျမင္ေတြ႔ရမွာ ျဖစ္ပါတယ္။
Creating the Menu in Dreamweaver CS4



ကၽြန္ေတာ္တို႔ Code ကို သြားလိုက္ပါ။
Creating the Menu in Dreamweaver CS4


ထို႔ေနာက္ မွာေရးထားတဲ့ ေအာက္မွာ ျပထားတဲ့ Code ကိုရွာၿပီး ရဲ႕ေနာက္မွာ cursor ခ်လိုက္ပါ။




ထို႔ေနာက္ အရင္အဆင့္ေတြအတိုင္း Insert > Layout Objects > Div Tag ကိုေရြးကိုေရြးခ်ယ္ကာ middle ဟုအမည္ေပးၿပီး New CSS Rule ကို ႏွိပ္လိုက္ပါ။
Design your template in Dreamweaver CS4
ၿပီးလွ်င္ေတာ့ ဟိုအေပၚအဆင့္မွာ ျပဳလုပ္ခဲ့တဲ့အဆင့္အတိုင္း ေအာက္မွာေပးထားတာေတြကို မွန္ေအာင္ျဖည့္လိုက္ပါ။
  • Selector Type: ID
  • Selector Name: #middle
  • Rule Definition: styles.css
ၿပီးလွ်င္ေတာ့ OK ကို ႏွိပ္လိုက္ပါ။

‘CSS Rule Definition for #middle’ Box က်လာရင္ ေအာက္ကအတိုင္း ျဖည့္လိုက္ပါ။
  • Box > Width: 100%
  • Click OK
ထို႔ေနာက္ Insert Div Tag Box က်လာပါက OK ကို ႏွိပ္လိုက္ပါ။

ထို႔ေနာက္ Content for id "middle" Goes Here ကို Select မွာကာ Delete လုပ္ၿပီး Insert > Layout Objects > Div Tag ကိုေရြးကာ submenu ဟုအမည္ေပးၿပီး New CSS Rule ကို ႏွိပ္လိုက္ပါ။

ေအာက္မွာေပးထားတာေတြကို မွန္ေအာင္ျဖည့္လိုက္ပါ။
  • Selector Type: ID
  • Selector Name: #submenu
  • Rule Definition: styles.css
ၿပီးလွ်င္ေတာ့ OK ကို ႏွိပ္လိုက္ပါ။

‘CSS Rule Definition for #submenu’ Box က်လာရင္ ေအာက္ကအတိုင္း ျဖည့္လိုက္ပါ။
  • Box > Width: 25%
  • Box > Float: left
  • Click OK
ထို႔ေနာက္ Insert Div Tag Box က်လာပါက OK ကို ႏွိပ္လိုက္ပါ။

ထို႔ေနာက္ မိမိရဲ႕ submenu div တြင္ Content for id "submenu" Goes Here ကိုေတြရပါမယ္။ ကၽြန္ေတာ္တို႔ Code ကို သြားၿပီး



ကိုရွာၿပီး ရဲ႕ေနာက္မွာ cursor ခ်ၿပီးရင္ေတာ့ အရင္ကအတိုင္းပါပဲ။ Insert > Layout Objects > Div Tag ကိုေရြးကာID တြင္ content ဟုအမည္ေပးၿပီး New CSS Rule ကို ႏွိပ္လိုက္ပါ။

ေအာက္မွာေပးထားတာေတြကို မွန္ေအာင္ျဖည့္လိုက္ပါ။
  • Selector Type: ID
  • Selector Name: #content
  • Rule Definition: styles.css
ၿပီးလွ်င္ေတာ့ OK ကို ႏွိပ္လိုက္ပါ။

‘CSS Rule Definition for #submenu’ Box က်လာရင္ ေအာက္ကအတိုင္း ျဖည့္လိုက္ပါ။
  • Box > Width: 75%
  • Box > Float: left
  • Click OK
ထို႔ေနာက္ Insert Div Tag Box က်လာပါက OK ကို ႏွိပ္လိုက္ပါ။ ဒီလိုမ်ိဳး ျမင္ေတြ႔ရမွာျဖစ္ပါတယ္။
Content in Dreamweaver CS4


ထို႔ေနာက္ ကၽြန္ေတာ္တို႔ CSS မွာ Body ကို ျပင္ရန္အတြက္ Window > CSS Styles ကို ႏွိပ္လိုက္ပါ။ ထို႔ေနာက္ Body ကိုေရြးၿပီး Right Click ႏွိပ္ၿပီး Edit ကို ေရြးလိုက္ပါ။
Content in Dreamweaver CS4



ပံုမွာ ျပထားတဲ့အတိုင္းျပင္ၿပီး Click ႏွိပ္လိုက္ပါ။
Content in Dreamweaver CS4


ၤFont ေျပာင္းသြားတာကို ေတြ႔ရပါမယ္။
Content in Dreamweaver CS4

ကၽြန္ေတာ္တို႔ footer အတြက္ Div တစ္ခုထပ္လုပ္ပါမယ္။ သိတဲ့အတိုင္းပဲ Code ကို သြား ရဲ႕ေနာက္ဆံုးမွာ cursor ခ်ၿပီးရင္ေတာ့ အရင္ကအတိုင္းပါပဲ။ Insert > Layout Objects > Div Tag ကိုေရြးကာID တြင္ footer ဟုအမည္ေပးၿပီး New CSS Rule ကို ႏွိပ္လိုက္ပါ။

ေအာက္မွာေပးထားတာေတြကို မွန္ေအာင္ျဖည့္လိုက္ပါ။
  • Selector Type: ID
  • Selector Name: #footer
  • Rule Definition: styles.css
ၿပီးလွ်င္ေတာ့ OK ကို ႏွိပ္လိုက္ပါ။

‘CSS Rule Definition for #footer Box က်လာရင္ ေအာက္ကအတိုင္း ျဖည့္လိုက္ပါ။
  • Box > Width: 100%
  • Box > Height: 33 px
  • Box > Clear: both
  • Block > Text align: Right
  • Background> Background-image: footer-bg.jpg
  • Type > Color: #FFF
  • Click OK
ထို႔ေနာက္ Insert Div Tag Box က်လာပါက OK ကို ႏွိပ္လိုက္ပါ။ ၿပီးရင္ Design Tag ကို ႏွိပ္ၿပီးၾကည့္လိုက္ပါ။ ထို႔ ေနာက္ ‘Content for id “footer” Goes Here’ ဆိုတဲ့ စာသားကို Select မွတ္ကာ မိမိၾကိဳက္တဲ့အမည္ေပးလိုက္။ ကၽြန္ေတာ္ကေတာ့ ‘© 2009 Company Name. All Rights Reserved.’ လို႔ေပးလိုက္ပါတယ္။ ဒီလိုမ်ိဳး ျမင္ေတြ႔ရမွာျဖစ္ပါတယ္။
Content in Dreamweaver CS4

အခုဆိုရင္ေတာ့ basic layout template လုပ္လို႔ၿပီးပါၿပီခင္ဗ်ာ။ File > Save All ကိုႏွိပ္ၿပီး Save မွတ္လိုက္ပါ။

ဟူးးးးးးးးးးး ဖတ္တဲ့သူေတြေတာ့နားလည္မလည္မသိဘူး။ ေရးတဲ့ကၽြန္ေတာ္ေတာ့ လက္ေတြ ေတာ္ေတာ္ေညာင္သြားၿပီ။ ဒါေၾကာင့္ ဒီမွာ ခဏနားမယ္။ ၿပီးလွ်င္ ဒုတိယပိုင္း သင္ခန္းစာ (၂) ကိုေရးၿပီး Dreamwaver CS4 နဲ႔ အေျခခံ Website ျပဳလုပ္နည္းကို ဆက္လက္ရွင္းျပပါမယ္။ Software မရွိေသးတဲ့သူေတြကေတာ့ Dreamweaver CS4 Portable ကို ဒီေနရာကေန Download လုပ္လိုက္ပါ။

Webpage အတြက္ ပံုေတြကို ဒီေနရာကေနရယူၿပီး rar ဖိုင္ေျဖၿပီး m51aimage ထဲက ပံုေတြကို Copy ကူးၿပီး images ေအာက္မွာ သိမ္းလိုက္ပါ။

‘content’ div ထဲက ‘Content for id “content” Goes Here’ ဆိုတဲ့ စာသားကို ဖ်က္ၿပီး Insert > Template Objects > Editable Region ကို ေရြးလိုက္ပါ။
Insert Editable Regions in the Dreamweaver Template

New Editable Region တြင္ content ဟု အမည္ေပးလိုက္ပါ။
Insert Editable Regions in the Dreamweaver Template


ယခုလိုမ်ိဳး ျမင္ေတြ႔ရမွာျဖစ္ပါတယ္။ ကၽြန္ေတာ္တို႔ လက္ရွိ Templete ကို Save မွတ္လိုက္ပါ။
Insert Editable Regions in the Dreamweaver Template

ကၽြန္ေတာ္တို႔ Page တစ္ခု ဖန္တီး၇န္အတြက္
  • File > New
  • Page From Template > BusinessSite > template
ကို ေရြးၿပီး Create ကို ႏွိပ္လိုက္ပါ။ ထို႔ေနာက္ File Name ကို index.html လို႔ အမည္ေပးၿပီး Save မွတ္လိုက္ပါ။

Dreamweaver CS4 Template Based Web Pages

Dreamweaver CS4 Template Based Web Pages


ထို႔ေနာက္ Title ရွိ ‘Untitled Doc**ent’ ေနရာတြင္ မိမိၾကိဳက္ႏွစ္သက္သည့္ အမည္တစ္ခုေပးလိုက္ပါ။ ကၽြန္ေတာ္ကေတာ့ ဒီမွာ BusinessSite Home Page လို႔ေပးလိုက္ပါတယ္။ ထို႔ေနာက္ အေပၚပံုတြင္ အမဲျဖင့္ျပထားေသာ Content ေနရာတြင္ စာမ်က္ႏွာတြင္ မိမိေရးခ်င္သည့္ မိမိၾကိဳက္ႏွစ္သက္သည့္ Post တစ္ခုကိုေရးလိုက္ပါ။ Post တြင္ ေခါင္းစဥ္ပါေအာင္ေတာ့ေရးပါ။ ထိုေရးထားေသာ စာမ်ားသည္ Browser ေပၚတြင္ ျမင္ေတြ႔ရမည့္စာမ်ားျဖစ္ပါသည္။
Dreamweaver CS4 Template Based Web Pages


ထို႔ေနာက္ မိမိေရးထားသည္ကို ျပန္ၾကည့္ရန္ File> Preview in Browser > ထဲမွ မိမိၾကိဳက္ႏွစ္သက္သည့္ Browser ကို ေရြးကာ Preview ၾကည့္လိုက္ပါ။

Dreamweaver CS4 Template Based Web Pages


ထို႔ေနာက္ ကၽြန္ေတာ္တို႔ေရးထားတဲ့ Post မွ ေခါင္းစဥ္ကို Select မွတ္ၿပီး Format > Paragraph format > Heading 1 ကိုေရြးလိုက္ပါၿပီး Preview ၾကည့္လိုက္ပါ။
Formatting Headings in Dreamweaver CS4
Formatting Headings in Dreamweaver CS4

ကၽြန္ေတာ္တို႔ အခုနကအတိုင္း မိမိတို႔ေရးထားတဲ့ Post ၇ဲ႕ေခါင္းစဥ္ကို Select မွတ္ကာ layout အသစ္တစ္ခုဖန္တီးရန္ Insert > Layout Objects > Div Tag ကိုေရြးကိုေရြးခ်ယ္ၿပီး New CSS Rule ကို ႏွိပ္လိုက္ပါ။
Design your template in Dreamweaver CS4


New CSS Rule Box က်လာပါက ေအာက္မွာေပးထားတာေတြကို မွန္ေအာင္ျဖည့္လိုက္ပါ။
  • Selector Type: ID
  • Selector Name: h1
  • Rule Definition: styles.css
ၿပီးလွ်င္ေတာ့ OK ကို ႏွိပ္လိုက္ပါ။

Formatting Headings in Dreamweaver CS4


‘CSS Rule Definition for h1’ Box က်လာရင္ ေအာက္ကအတိုင္း ျဖည့္လိုက္ပါ။
  • Type > Font-size: 18 px
  • Type > Color: #D6130A
  • Click OK
ထို႔ေနာက္ Insert Div Tag Box က်လာပါက OK ကို ႏွိပ္လိုက္ပါ။

Formatting Headings in Dreamweaver CS4

ယခုဆိုလွ်င္ေတာ့ ကၽြန္ေတာ္တို႔ေခါင္းစဥ္ဟာ အေရာင္ေျပာင္းသြားၿပီ ယခုလိုျမင္ေတြ႔ရမွာ ျဖစ္ပါတယ္။
Formatting Headings in Dreamweaver CS4

ထို႔ေနာက္ မိမိေရးထားတဲ့ Post မွာ ဓာတ္ပံုတင္ရန္အတြက္ မိမိဓာတ္ပံုထည့္လိုသည့္ေနရာတြင္ cursor ခ်ၿပီး Insert > Image ကိုႏွိပ္လိုက္ပါ။ထို႔ေနာက္ ကၽြန္ေတာ္တို႔ ပံုေတြသိမ္းထားတဲ့ images folder ထဲက picture.jpg ကို ေရြးလိုက္ပါ။ ထို႔ေနာက္ alternate text တြင္ မိမိၾကိဳက္ႏွစ္သက္တဲ့အမည္ေပးလိုက္ပါ။ ၿပီးလွ်င္ OK ႏွိပ္လိုက္ပါ။ ဒါဆို မိမိရဲ႕ Post မွာ ဓာတ္ပံုေလးေရာက္လာမွာ ျဖစ္ပါတယ္။ ထို ဓာတ္ပံု ကလစ္ႏွိပ္ၿပီး ‘Properties’ Panel မွာရွိတဲ့ ‘Align’ တြင္ Right ကို ေရြးေပးလိုက္ပါက မိမိရဲ႕ ဓာတ္ပံုဟာ စာသာေတြရဲ႕ ညာဘက္ကို ေရာက္ရွိသြားမွာ ျဖစ္ပါတယ္။
Formatting Images in Dreamweaver CS4
Formatting Images in Dreamweaver CS4


ဓာတ္ပံု ကလစ္ႏွိပ္ၿပီး ‘Properties’ Panel မွာရွိတဲ့ ‘H Space’မွာ 10 လို႔ရိုက္လိုက္ပါ။
Formatting Images in Dreamweaver CS4


ယခုဆိုလွ်င္ေတာ့ ကၽြန္ေတာ္တို႔ မႈလစာမ်က္ႏွာျဖစ္တဲ့ index.html ကို ဖန္တီးလို႔ၿပီးစီးပါၿပီ။ ထို႔ေၾကာင့္ Save မွတ္ၿပီး Preview ၾကည့္လိုက္ပါ။

အေပၚအဆင့္ေတြမွာ လုပ္ျပခဲ့တဲ့ index,html ဖန္တီးသလိုမ်ိဳး about-us.html ၊ contact-us.html၊ services.html တို႔ကို မိမိတို႔ စိတ္တိုင္းက်ဖန္တီးလိုက္ၾကပါ။ ဒါေပမယ့္ contact-us.html ကိုေတာ့ Page တစ္ခုသာ ဖန္တီးၿပီး ဒီအတိုင္းထားထားလိုက္ပါ။ Content ကို ဖ်က္ၿပီး Post မတင္ထားပါႏွင့္။
ကၽြန္ေတာ္တို႔ Page ေတြ ဖန္တီးၿပီးၿပီဆိုလွ်င္ Page ေတြကို Link ခ်ိတ္ရန္အတြက္ Window > Files ကိုေခၚလိုက္ပါ။ ဒါမွမဟုတ္လည္း ညာဘက္ျခမ္းက File ေအာက္မွာ ေတြ႔ရမွာ ျဖစ္ပါတယ္။
Linking pages in Dreamweaver CS4

‘Templates’ folder ထဲက template file (template.dwt) ကို Double Click ႏွိပ္ၿပီး ဖြင့္လိုက္ပါ။
‘Home’ menu button ကို Select မွတ္ၿပီး ‘Properties’ Panel ထဲက Link ေနရာတြင္ http://multiplygroups.multiply.com/index.html ဟုတ္ရိုက္လိုက္ၿပီး ‘Border’ field တြင္ 0 လို႔ေပးလိုက္ပါ။ Link တြင္ index.html ကို မရိုက္ခ်င္ပါက Link ေဘးမွာရွိတဲ့ နာရီလိုပံုေလးကို Click ႏွိပ္ၿပီး ညာဘက္ File ေအာက္မွာရွိတဲ့ index.html ဖိုင္ကို Drag ဆြဲးသြားလည္းရပါတယ္။
Linking pages in Dreamweaver CS4

က်န္တဲ့ menu icon ေတြကိုလည္း သက္ဆိုင္ရာ Page မ်ားႏွင့္ အေပၚအဆင့္ကအတိုင္း Link ခ်ိတ္လိုက္ပါ။
Link ခ်ိတ္ၿပီးလွ်င္ Save မွတ္လိုက္ပါ။ Box က်လာပါက Update ကို ေရြးလိုက္ပါ။
Linking pages in Dreamweaver CS4

ကၽြန္ေတာ္တို႔ contact-us.html ကို ဖြင့္လိုက္ပါ။
ထို႔ေနာက္ အမည္းနဲ႔ေရးထားတဲ့ content ကို Select မွတ္လိုက္ၿပီး Insert > Form > Form ကို သြားလိုက္ပါ။ ထိုအခါ Form tag အတြက္ေနရာကို အနီေရာင္ျဖင့္ ျမင့္ေတြ႔ရပါမယ္။
ထို႕ေနာက္ Insert Form > Text field ကို သြားၿပီး Name လို႔အမည္ေပးလိုက္ပါ။
Forms in Dreamweaver CS4

Text field ရပါက Email အမည္ျဖင့္ Field တစ္ခုထပ္လုပ္ရန္အတြက္ Text field ရဲ႕အေနာက္မွာ cursor ခ်ၿပီး Enter ၂ ခ်က္ေလာက္ေခါက္လိုက္ပါ။ ထို႔ေနာက္ ္ Insert Form > Text field ကို သြားၿပီး Email လို႔အမည္ေပးလိုက္ပါ။
Email field ရပါက Message အတြက္ Field ကို အထက္က အတိ္ုင္းဖန္တီးလိုက္ပါ။
ထို႔ေနာက္ Message Field ကို Click ႏွိပ္ၿပီး Properties ေအာက္မွာရွိတဲ့ Char Width တြင္ 45 Max Chars တြင္ 5 ႏွင့္ Multi line တို႔ကိုေရြးခ်ယ္ေပးလိုက္ပါ။
ေနာက္ဆံုးအေနနဲ႔ Message ရဲ႕ေအာက္မွာ Button ျပဳလုပ္ရန္ Insert > Form > Button ကိုေရြးၿပီး OK ကို ႏွိပ္လိုက္ပါ။ အားလံုးၿပီးဆံုလွ်င္ ယခုလိုမ်ိဳး ျမင္ေတြ႔ရမွာျဖစ္ပါတယ္။
Forms in Dreamweaver CS4

ၿပီးလွ်င္ Save မွတ္လိုက္ပါ။

ကၽြန္ေတာ္တို႔ template.dwt ကို ဖြင့္လိုက္ပါ။
ထို႔ေနာက္ ‘submenu’ div မွာ ရွိတဲ့ ‘Content for id “submenu” Goes Here’ ကို Select မွတ္ၿပီး ဖ်က္လိုက္ပါ။ nsert > Table ကို ေရြးၿပီး ပံုေတြင္ျပထားသည့္အတိုင္း ျပဳလုပ္ကာ OK ကို ႏွိပ္လိုက္ပါ။
Tables in Dreamweaver CS4
  • Select the table [Right click within the table > Select Table] and align it ‘Center’ in the ‘Properties’ Panel.
  • Click within the top row of the table and insert the image ‘submenu-top-bg.jpg’
  • Click within the bottom row of the table and insert the image ‘submenu-btm-bg.jpg’
To give the background image to the middle:
  • Click within the middle row
  • From the Properties panel, select and click the ‘Edit Rule’ button
  • Create a ‘class’ style called ‘.sub-bg’ within ‘styles.css’
  • ပုံတြင္ျပထားသည့္အတိုင္း အဆင့္ဆင့္ျပဳုလုပ္လိုက္ပါ။
    Tables in Dreamweaver CS4
    Tables in Dreamweaver CS4
    Tables in Dreamweaver CS4
  • Type in the submenu items
    Tables in Dreamweaver CS4

Save မွတ္လိုက္ပါ။ Box က်လာပါက Update ကို ေရြးလိုက္ပါ။

styles.css ကိုဖြင့္ပါ။ ထို႔ေနာက္ Window > CSS Styles ကို ဖြင့္လိုက္ပါ။ ထို႔ေနာက္ #menu style ကို Select လုပ္ၿပီး Right click ကိုႏွိပ္ကာ Edit ကိုေရြးၿပီး ေအာက္ပါအတိုင္း ျပဳလုပ္လိုက္ပါ။
Testing the Website in the Browser

ထို႔ေနာက္ #footer style တြင္လည္း Right click ကိုႏွိပ္ကာ Edit ကိုေရြးၿပီး Box > Margin > Top: 20 px လုပ္လိုက္ပါ။ styles.css ကို Save မွတ္လိုက္ပါ။

#middle style တြင္လည္း Right click ကိုႏွိပ္ကာ Edit ကိုေရြးၿပီး ေအာက္ပါအတိုင္း ျပဳလုပ္လိုက္ပါ။
Testing the Website in the Browser

ၿပီးရင္ေတာ့ File ေတြအားလံုးကို Save All မွတ္လိုက္ပါ။ Preview ၾကည့္လိုက္ပါ။ အားလံုး completed ျဖစ္သြားပါၿပီ။
Testing the Website in the Browser

ေနာက္ဆံုးအဆင့္အေနနဲ႔ File ေတြကို Upload လုပ္ပါမယ္။
ၤ ‘Files’ panel ထဲက ‘Expand to show local and remote sites’ icon ကို Click ႏွိပ္လိုက္ပါ။
Upload your site with Dreamweaver CS4
‘Connects to remote host’ icon ကို Click ႏွိပ္ပါ။
Upload your site with Dreamweaver CS4
FTP ကို ေရြးၿပီး ပံုတြင္ျပထားသည့္အတိုင္း ျပဳလုပ္ပါ။
Upload your site with Dreamweaver CS4
Upload your site with Dreamweaver CS4
‘Test Connection’ button ကို ႏွိပ္လိုက္ပါ။
Upload your site with Dreamweaver CS4
Next ကို ႏွိပ္ပါ။ No, do not enable check in and check out ကိုေရြးပါ။ Next ကို ႏွိပ္ပါ။
Upload your site with Dreamweaver CS4
Done ကို ႏွိပ္ပါ။ ၿပီးလွ်င္ေတာ့
  • You will be taken back to the Expanded ‘Files’ Panel again.
  • Click the ‘Connects to Remote host icon’ again.
ထို႔ေနာက္ ဖိုင္တစ္ခုျခင္းစီကို ‘Put Files’ icon ကို ႏွိပ္ေပးပါ။ ( template file မပါ)
Upload your site with Dreamweaver CS4
Congratulations! အားလံုးၿပီးဆံုးပါၿပီ။ သင္ခန္းစာအစက မိမိျပဳလုပ္ခဲ့တဲ့ D:> Project>BusinessSiter မွာ ရွိတဲ့ File ေတြကို စမ္းသပ္ၾကည့္ပါ။ အားလံုးအဆင္ေျပၾကပါေစ။ ယခုျပဳလုပ္ခဲ့ေသာ BusinessSite ကို လိူခ်င္ရင္ေတာ့ ဒီေနရာကေနရယူပါ။


Download the filesကိုခင္ေမာင္စိုး  ေရးသားျပဳစုထားတဲ့  နည္ေလးအားမွ်ေဝျခင္းပါ