Programming lesson:3

အားလံုးဘဲမဂၤလာပါခင္​ဗ်

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