CSS ကို ေလ့လာရန္ ျပင္ဆင္ျခင္း
HTML နဲ႔ CSS ကို တြဲေလ့လာဖို႔ အေကာင္းဆံုး Environment တစ္ခု တည္ေဆာက္ပံုကို ေဝမွ်ခ်င္ပါတယ္။ ကၽြန္ေတာ္ အႀကိဳက္ဆံုးပံုစံပါ။ လူတစ္ကိုယ္ အႀကိဳက္ တစ္မ်ဳိးဆိုေတာ့ အႀကိဳက္ျခင္း တူခ်င္မွ တူပါလိမ့္မယ္။ ပထမဦးဆံုး Requirement ပိုင္းကို ေလ့လာၾကည့္ရေအာင္။
- Text Editor (ဒါကေတာ့ မရွိမျဖစ္လို႔ ဆိုရမွာပဲ။ အဲဒါမွမရွိရင္ CSS ကို ဘယ္လိုေရးမလဲေနာ)
- Explorer Working Environment (Live Editing လုပ္ႏိုင္ဖို႔ အတြက္ျပင္ဆင္ဖို႔ပါ)
ကၽြန္ေတာ္ အႀကိဳက္ဆံုး TextEditor ကေတာ့ Notepad ++ ပါပဲ။ ဒါေပမယ့္ e-TextEditor ကိုလည္း ႀကိဳက္တယ္။ သူက Mac သမားေတြသံုးတဲ့ TextMate လိုပဲ။ ေနာက္ Dreamweaver လည္း ေကာင္းပါတယ္။ e-TextEditor တို႔ TextMate တို႔ကေတာ့ AutoComplete ေတြမွာ ေတာ္ေတာ္ မိုက္ပါတယ္။ e-TextEditor မွ ာဆိုရင္ skel လို႔ေရးၿပီး Tab ႏွိပ္လိုက္တာနဲ႔ XHTML ေရးဖို႔ အသင့္ အေနအထားကို ေအာက္မွာ ျပထားတဲ့ ပံုအတုိင္း ေရာက္သြားေစပါတယ္။
ေနာက္ Test Page ေတြ စာနမူနာ ထည့္တဲ့ lorem ဆိုတာနဲ႔ စတဲ့စာေတြကို lorem လို႔ရိုက္ Tab ခုန္လိုက္တာနဲ႔ ေရးၿပီးသား ျဖစ္သြားေစပါတယ္။
doctype ဆိုရင္လည္း အဲဒီလိုပါပဲ။ doctype လို႔ရိုက္၊ ၿပီးရင္ Tab ႏွိပ္တာနဲ႔ ကိုယ္လိုခ်င္တာ ေရြးရံုပါပဲ။
ကဲ ဒီေလာက္ဆို TextMate တိုရ e-TextEditor တို႔ရဲ႕ အားသာခ်က္ေတြ သိေလာက္ပါၿပီ။ ကၽြန္ေတာ္ကေတာ့ e-TextEditor သံုးပါတယ္။
TextEditor အတြက္ အဆင္ေျပၿပီ ဆိုေတာ့ ေရွ႕ဆက္ၿပီး Firefox မွာ Live Editing လုပ္လို႔ရေအာင္ စီစဥ္ပါ့မယ္။ အဲဒီအတြက္ Firebug ကို သိၿပီး ျဖစ္ၾကမယ္ ထင္ပါတယ္။ Firefox Extension အေနနဲ႔ ဒီေနရာမွာ ရယူႏုိင္ပါတယ္။ ကိုယ့္စက္ထဲမွာ ထည့္ၿပီးၿပီ ဆိုတာနဲ႔ Web Page တစ္ခုခုကို ဖြင့္ Right Click ေခါက္လိုက္တာနဲ႔ Inspect Element ဆိုတာ ေပၚလာပါလိမ့္မယ္။
အဲဒီ Inspect Element ကို ကလစ္ေခါက္လိုက္တာနဲ႔ HTML နဲ႔ CSS အခ်ိတ္အဆက္ေတြ အကုန္လံုး ေအာက္မွ ျပထားတဲ့အတိုင္း ျပေပးပါလိမ့္မယ္။
အဲဒီလို ၾကည့္ျခင္း အားျဖင့္ ဘယ္ div က ဘယ္ CSS နဲ႔ ခ်ိတ္ထားတယ္ စသည္ျဖင့္ အကုန္ေလ့လာႏိုင္မွာ ျဖစ္ပါတယ္။ ေနာက္တစ္ခုက Developer Toolbar ပါ။ သူလည္း အင္မတန္ အသံုးဝင္ပါတယ္။ ဒီေနရာမွာ သြားၿပီး ယူႏိုင္ပါတယ္။ ကိုယ့္စက္ထဲမွာ ထည့္လိုက္ရင္ Firefox မွာ Toolbar တစ္ခု တိုးလာပါလိမ့္မယ္။
တကယ့္ကို ဘက္စံုသံုးလို႔ ေျပာလို႔ရေအာင္ စံုပါတယ္။ Right Click မွာလည္း ေအာက္မွာ ျပထားသလို တိုးလာပါလိမ့္မယ္။
ကၽြန္ေတာ္ကေတာ့ CSS အတြက္ သီးသန္႔ဆိုေတာ့ Toolbar မွာ ပါတဲ့ CSS ဆိုတာကို ကလစ္ေခါက္လိုက္ပါ။
CSS -> Edit CSS ကို ေရြးလိုက္ရင္
CSS ေတြ အားလံုး Select All လုပ္ၿပီး ဖ်က္လိုက္ရင္ WebSite မွာ ရွိတဲ့ စတိုင္ေတြ အကုန္ ပ်က္သြားပါလိမ့္မယ္။ အဲဒီလို ဖ်က္လိုက္လို႔ Website ထဲက CSS ေတြ ပ်က္မသြားပါဘူး။ ကိုယ့္ Explorer ထဲမွာ စမ္းသပ္တဲ့ အဆင့္သာ ျဖစ္ပါတယ္။ Refresh လုပ္တာနဲ႔ ပံုမွန္အတိုင္း ျပန္ျဖစ္သြား ပါလိမ့္မယ္။ ကိုယ္ႀကိဳက္သလို စမ္းသပ္လို႔ရပါတယ္။ ကိုယ္အဆင္ေျပတဲ့ အေျခအေန တစ္ခုေရာက္ၿပီ ဆိုတာနဲ႔ ကိုယ့္ Source Code ထဲ ကူးထည့္ရံုပါပဲ။ ေနာက္တစ္ခု Web Developer Toolbar မွာ CSS နဲ႔ ပတ္သက္ၿပီး အသံုးဝင္တာ တစ္ခု ရွိပါေသးတယ္။
Miscellaneous -> Display Ruler ဆိုတာပါ။
အဲဒီလို ေရြးလိုက္တာနဲ႔ Width ဘယ္ေလာက္ရွိတယ္ Height ဘယ္ေလာက္ရွိတယ္၊ စသည္ျဖင့္ ၾကည့္လို႔ရလာပါတယ္။ ကိုယ္က ဆိုက္ကို သိခ်င္ရင္လည္း ေအာက္မွာ ျပထားသလို Select လုပ္ၿပီး ၾကည့္ႏိုင္ပါေသးတယ္။
ကၽြန္ေတာ္အႀကိဳက္ဆံုး CSS ေရးဖို႔အတြက္ Environment ကို လုပ္လို႔ ၿပီးပါၿပီ။ အခက္အခဲရွိရင္လည္း ကၽြန္ေတာ့္ကို ေျပာပါ။ ရႊင္လန္း ခ်မ္းေျမ့ပါေစ။
Facebook comments:
14 Responses
Leave a comment
About the Author
Thiha
စာမရေးရ မနေနိုင်သူ၊ ဒီဇိုင်းဆွဲခြင်း၊ ပရိုဂရမ်ရေးခြင်း၊ အင်တာနက်တွင် သင်ယူခြင်းတို့ အမြဲမပြတ် ပြုလုပ်နေသူ၊ နည်းပညာနှင့် ပတ်သက်လျှင် အကုန် စိတ်ဝင်စားသူ၊ ကလေး တစ်ယောက် အဖေ၊ နည်းပညာသမားအပေါ် နားလည်မှု အပြည့်ပေးနိုင်သော ဇနီးတစ်ယောက်၏ ခင်ပွန်း၊ Myanmar Links မှာ နည်းပညာ အကြောင်း သောင်းပြောင်းထွေလာ သင်တဲ့ဆရာ ... လောလောဆယ် လေ့လာနေတာက iOS
Ads
ကိုသီဟရေ notepadd++ မှာလည်း quicktext ဆိုတဲ့ plugin သုံးပြီး auto completion ကို customize လုပ်ပြီး ထည့်လို့ ရတယ်။ http://sourceforge.net/projects/quicktext/
CI ရေးမယ်ဆိုလည်း CI syntax တွေကို ကိုယ်ဟာကို ထည့်လို့ရတယ်ဗျ။
http://codeigniter.com/forums/viewthread/65436
ဒါပေမယ့် notepad++ ထဲမှာ tab ခုန်တဲ့အခါ အလုပ်လုပ်မလုပ် ဖြစ်နေတယ်။ အကို အချိန်လေးရမယ်ဆိုရင် စမ်းကြည့် ပေးပါလား
ကျေးဇူးပဲ Zack ရေ ကျွန်တော် ခုမှ စမ်းကြည့်မိတယ်၊ html ပြီး tab ခုန်တာနဲ့ HTML အတွက် အသင့် ဖြစ်သွားတာပဲ။ တော်တော်ကောင်းတာပဲဗျ။
ကျွန်တော် စမ်းကြည့်တာ .html ဆိုရင် HTML အတွက် အကုန်ရပြီး .php ဆိုရင်တော့ php အတွက် အဆင်ပြေပါတယ်ဗျ။ ထပ်ဖြည့်ထားတာတွေလည်း အလုပ်ဖြစ်တယ်။
Okay, Bro.
Issue တစ်ခုရှိနေတယ်လို့ မထင်မိဘူးလား? Alignment ညှိချင်လို့ tab ခုန်တဲ့အခါ မရတော့ဘူးဗျ
ဟုတ်ပဗျာ Tab ခုန်တော့ အဆင်မပြေတော့ဘူး။ e-TextEditor မှာတော့ အဲဒါမျိုးတွေ မဖြစ်ဘူးဗျ။
Thanks for the tips, Ko Thiha and Ko Zack.
Btw, here’s HTML5 pack for adobe DW CS5 if you use DW and haven’t tried yet.
This helps us easier to use css3 and html5
http://labs.adobe.com/technologies/html5pack/
Chrome Developer Tool ကလည်း တော်တော်အသုံးဝင်ပါတယ်။ Firebug လောက်နီးနီးကို ကောင်းပါတယ်။
ဒါပေမယ့် တစ်ချို့Feature တွေမှာ သိပ်တော့မမှီသေးဘူး။
Chrome သုံးတဲ့သူတွေအတွက် ဖြည့်ပေးလိုက်ပါတယ်။
SAFARI FTW !!!!
SAFARI ရဲ့ Javascript Engine ကလည်း တအားနဲ့ မကောင်းလှဘူးဗျ။
CSS Properties တွေနဲ့ XHTML tag တွေကို အွန်လိုင်းမှာ တိုက်ရိုက်လေ့ကျင့်စမ်းသပ်လို့ရတဲ့ နေရာလေးတစ်ခုပါ… tag/property တစ်ခုချင်းစီအတွက် ရှင်းလင်းချက်တွေလည်း လုပ်ပေးထားပါတယ်.. ကိုယ်တိုင်လည်း ချက်ချင်းစမ်း ချက်ချင်း အဖြေထွက်ပါတယ်… “Example Code” ဆိုတဲ့နေရာမှာ မြင်နေရတဲ့ Tag နဲ့ Properties တွေကိုလည်း Cross Reference လုပ်ထားတာ မြင်ရမှာပါ… အစအဆုံးပြောရင် ဆောင်းပါးတစ်ပုဒ်စာလောက် ဖြစ်သွားနိုင်တာ ဖြစ်လို့ ကိုယ်တိုင် သွားကြည့်နိုင်အောင် ဝေမျှလိုက်ပါတယ်… Link – http://htmlplayground.com/
ကျေးဇူးပဲဗျ … တကယ် အသုံးဝင်တဲ့ နေရာပဲ …
ကျေးဇူး ကိုသီဟ
Lorem ရေးပြီး Tab နှိပ်ရင် တော့ရတယ် … ကျန်တာ တွေက မလုပ်ဘူး … ဘာလို့ပါ လိမ်
EtextEditor 1.0.43 version ပါ
အဲဒါ .html နဲ့ သိမ်းဖို့လိုတယ် ခင်ဗျ .. .html နဲ့ သိမ်းပြီး skel လို့ ရိုက်ကြည့် တစ်ခါတည်း ထွက်လာလိမ့်မယ်၊ ကိုယ့်စိတ်ကြိုက် Setting တွေလည်း ပေါင်းထည့်လို့ရသေးတယ်ဗျ။
အကိုရေ ပို့စ် တွေကိ ုမြန်မြန်လေး တင်ပေးပါဗျာ part (5) ကိုမြန်မြန်လေးတင်ပေးပါဗျာ
လုပ်ပါ အဲလိုကြီးမထားကောင်းဘူးလေ ကိုရာ
I cann’t read the words.
Could you tell me that is why?