အားလံုးဘဲမဂၤလာပါခင္ဗ်
Lesson -3
႐ွ႕တစ္ပတ္ က web document တစ္ခုတည္ေဆာက္ၿပီီး ႐ွင္းျပေပးထားတာ ညီအစ္ကိုေတြဆင္ေျပမယ္လို႔ကြၽန္ေတာ္ထင္ပါတယ္ ၊ ဒီတစ္ပတ္မွာလည္း doumement တစ္ခုတည္ေဆာက္ၿပီး ႐ွင္းျပေပးသြားမယ္ခင္ဗ်
သင္ခန္းစာမစခင္ layout နဲပက္သက္တာ ကိုေျပာျပေပးသြားပါမယ္web page တစ္ခုမွာ layoutက ရမ္းေရးႀကီးပါတယ္၊ web page တစ္ခုျဖစ္ဖို႔ အေရးႀကီးတယ့္ layout 3 ခု႐ွိပါတယ္ 1 static 2 liquid 3 responsive တို႔ျဖစ္ပါတယ၊္ ဒီထဲမွ responsive ပံုစံနဲ႔ေရးႏိုင္ရင္ ပိုေကာင္းပါတယ္
Layout ဖန္တီးရင္္အေျခခံသေဘာတရားအေနျဖင အပိုင္းေလးပိုင္းနဲ႔ဖန္တီးေလ့႐ွိပါတယ္၊ header အပိုင္း navigation အပိုင္း content အပိုင္း footer အပိုင္းဆိုၿပီး တည္ေဆာက္ၾကပါတယ္ content ပိုင္းမွာcolumn ဘယ္ႏွယ္ခုခြဲမယ္ ပံုစံေနရာေတြကို ႀကိဳက္ သလိုေရးၾကပါတယ္၊
Layout တစ္ခု ပံုစံပါ
Layout ကို ဖန္တီးတယ့္ ခါ အရင္က table element နဲ႔ ဘဲ ဖန္တီးေလ့႐ွိပါတယ္ ခုေနာက္ပိုင္းမွာ table နဲ႔ဖန္တီးတာကို အားမေပးေတာ့ဘဲ div နဲ႔ ဖန္တီးလာပါတယ္၊ table element ကို table ပံုစံျပခ်င္တာေတြ စာရင္းဇယားေတြျပခ်င္တာေတြမွာဘဲ အသံုးျပဳၾကေတာ့တယ္
ခုေနာက္ပိုင္း layout တည္ေဆာက္မယ္ ဆို div element နဲ႔တည္ေဆာက္ၾကၿပီး layout ပံုစံ ႀကိဳက္သလို css or boostrap မွာ ျပင္ၾကပါတယ္
Boostrap ဆ္ိုတာ က css ရဲ႕ framework ပါ css ကိုထပ္ျမင့္ထားသလိုပါဘဲ Boostrap သံုးရင္ classေတြေသခ်ာသိတာနဲ႔သံုးလို႔ရပါၿပီ၊ css သိၿပီဆိုရင္ boostrap နဲ႔ေလ့က်င့္ဖို႔အၾကံဳျပဳခ်င္ပါတယ္ခင္ဗ်
ခုဆို layoutေဆာက္ရင္ table ဘာလို႔မသံုးေတာ့လည္း သိၿပီဆိုေတာ့ div သံုးၿပီး တည္ေဆာက္ၾကည့္ၾကရေအာင္ခင္ဗ်
အေပၚကပံုအတိုင္းlayout ခ် ျပပါမယ္
ပထမဆံုံုး header အတြက္ div tag တစ္ခုယူ ပါတယ္ ၿပီး႐င္း navigation bar အတြက္ div တစ္ခုယူ ပါတယ္ content အတြက္ div တစ္ခုယူပါတယ္ content div tag ထဲမွာ div element ႏွစ္ခု ျပန္ယူပါမယ္၊ ဘာလို႔လည္းဆိုေတာ့ content ထဲမွာ column ႏွစ္ခု ယူထားဆာမို္႔ပါ ခင္ဗ် ၊ ၿပီးရင္ footer အတြက္ div တစ္ခုယူပါမယ footer ရဲ့ div ထဲ မွာ footer element ထပ္ယူပါမယ္၊ ၿပီးရင္ အားလံုးကို div တစ္ခု ထဲ ထည့္လိုက္ပါ ခင္ဗ်
ခုဆိုရင္ layout အခြံႀကီးေတာ့ရသြားၿပီ ၊ layoutေလး လွ လွပပ ျဖစ္သြား ေအာင္ textေတြ imageေတြထည့္ၿပီးျပင္ၾက ရေအာင္၊
ပထမဆံုး header ထဲမွာ Lesson-3 လို႔ေရးလိုက္ပါမယ္ ညီအစ္ကို ေတြကလည္း မိမိႀကိဳက္သလို စာေရးလိုက္ပါ ခင္ဗ် ၊ ၿပီးရင္ navigation bar အတြက္ ထပ္ေရးၾကတာေပါ့ navigation barအတြက္ nav element သံုးပါမယ္ၿပီးရင္ nav tag ထဲမွာ ul tag သံုးမယ္ link အတြက a tagြသံုးၿပီးေရးၾကမယ၊္ ၿပီးရင္ content တြက္အပိုင္းမွာ စာပိုဒ္ေတြနဲ႔ ပံုေတြကို တြၿဲပီး ျပထားခ်င္တယ္ အဲ့မို႔ cotent ထဲမွာ img element ရယ္ p element ရယ္ သံုးပါမယ္၊ေနာက္ဆံုးေနျဖင့္ footerအတြက္ footer tag ထဲစာေရးပါမယ္၊ footer မွာ က facebook ,twitter,register ဘာညာေပါ့ထည့္ေရးေပးတာပါ ခုdocument မွာေတာ့ဒီတိုင္းစာေလးဘဲေရးထားပါတယ္
Layout ထဲမွာ ပါမယ့္ elementေတြေျပာၿပီးၿပီးဆိုေတာ့ codingေလးတိုင္းထည့္ေရးလိုက္ပါ
Designေလးလွလွပပ ျဖစ္သြားေအာင္ Boostrap ,cssနည္းနည္းသံုးထားပါတယ္ခင္ဗ် link tagမွာ boostrap ကို လမ္းခ်ိတ္ထားတာ Boostrap ကို သံုးရင္ design ကို ျပန္ေရးစရာမလိုေတာ့ဘဲ ႐ွိp သားကိုေခၚသံုးယံုပါဘဲဘယ္မွေခၚသံုးလည္းေတာ့ classမွာေခၚသံုးတာပါ၊ အခ်ိန္ကုန္လည္းသက္သာတယ္ design လည္းးပိုလွပါတယ္၊ေသခ်ာေလးသ္ိသြာေအာင္cssေျပာျပတယ့္ခါ တစ္ခါတည္းေျပာျပသြားမယ္ခင္ဗ်
အေပၚကcoding ကို run လိုက္ရင္ ခုလို layoutေလးထြက္လာမွာခင္ဗ်
ညီအစ္ကိုေတြစမ္းတယ့္ခါဆင္ေျပပါေစ
အားလံုးကိုေက်းဇူးတင္ပါတယ္
Author -@naythuya
Msc-169
Photo-credit
ေလ့လာခ်င္ေပမယ့္ ေလာေလာဆယ္မလုပ္ႏုိင္ေသးပါ ဖတ္ရတဲ့အတြက္ ပညာရပါတယ္ဗ်ာ
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ဟုတ္ကဲ့ ခင္ဗ် 😉
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
အားေပးေနပါတယ္ bro
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ဟုတ္ကဲ့ bro
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
အရမ္းေကာင္တဲ့စာသားေလးပါbro
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ဟုတ္ေက်ေက်း
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
အရမ္းေတာ္တယ္ဗ်ာ အားေပးေနပါတယ္
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ဟုတ္ကဲ့ေက်ေက်း အစ္ကို
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thanks for sharing bro.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ဟုတ္😉
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
နည္းပညာပိုင္းအားနည္းလို႔ကြ်န္ေတာ္ နားမလည္ေပမဲ႕ အားေပးပါတယ္ bro.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ဟုတ္ကဲ့ အစ္ကို
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ေဟးေဟး ကလိ့ေတာ့မယ္ေဝ့
ေက်းဇူး ဘဒို
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ၾကာသလားလို႔😉😁
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
နည္းပညာပိုင္းအားနည္းေပမယ့္လည္း
ကလိျကည့္ဦးမယ္ဗ်ာ
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ဟုတ္ကဲ့ ကလိၾကည့္ပါ 😁
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
နည္းပညာအတြက္ ေက်းဇူးပါ
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ဟုတ္ကဲ့ေက်းေက်း
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
အားေပးေနပါတယ္
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ဟုတ္ကဲ့ေက်းေက်း
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Kyar yin tot hair white mal htin tal naw bro 😁
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
😁ျဖဴေတာင္ျဖဴေနၿပီ😁😜
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Congratulations! This post has been upvoted from the communal account, @minnowsupport, by moekyaw from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews, and netuoso. The goal is to help Steemit grow by supporting Minnows. Please find us at the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.
If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: 50SP, 100SP, 250SP, 500SP, 1000SP, 5000SP.
Be sure to leave at least 50SP undelegated on your account.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Congratulations @naythuya! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here
If you no longer want to receive notifications, reply to this comment with the word
STOPDownvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
အကိုေတာ့ဖတ္ပဲဖတ္ခဲ့ၿပီညီေရ
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ဟုတ္ဟုတ္ အစ္ကို
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
i don't realize all ,thank u for sharing your knowledge
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you, I am sharing about programming.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Conputer ဝယ္ၿပီးရင္လိုက္လုပ္ဖို႔resteemထားလိုက္ၿပီ
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ဟုတ္ကဲ့ အဲ့က် software သြင္းတာေျပာျပေပးမယ္ခင္ဗ်
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Ty for sharing
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ခ်ျပတဲ့နည္းပညာေတြကေတာ့ ေလးစားစရာပဲဗ်ိဳ႕
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ဟုတ္ေက်းေက်း😉
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
တစ္ရက္ေလာက္ေတာ့ အခ်ိန္ေပးျပီး စမ္းၾကည့္အံုးမယ္ဗ်ာ ။ Nice Post ပါ Bro
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ဟုတ္ကဲ့ စမ္းၾကည့္လိုက္အစ္ကို😉
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ေလ့လာရဦးမည္ေပါ့ေနာ္
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ဟုတ္ကဲ့ေလ့လာပါခင္ဗ်
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
အားေပးလွ်က္ပါဗ်ာ
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ဟုတ္ကဲ့
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
မလိုက္ႏိုင္ေတာ့၀ူး ေခါင္းေတြပူေနပီ
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ဟုတ္😁 fighting
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ဗဟုသုတရပါတယ္..thanks for sharing..
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ဟုတ္ကဲ့
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit