ဝဘ္စာမ်က္ႏွာ ၾကည့္လုိ႔ေကာင္းဖုိ႔အတြက္ layout ကအေရးအရမ္းၾကီးပါတယ္။
သင့္ ဝဘ္စာမ်က္ႏွာ ကုိ layout Design ေသခ်ာခ်ပါ။
ဝဘ္ဆုိဒ္ Layout မ်ား
ဝဘ္ဆုိဒ္ အမ်ားစုက ၎မွာပါတဲ့ Content ေတြကုိ Column ေတြခြဲျပီး ထားၾကတယ္။ မဂၢဇင္းတုိ႔ သတင္းစာတုိ႔ နဲ႔ တူတယ္။
Column ေတြကုိ <div> သုိ႔ မဟုတ္ <table> element ေတြသုံးျပီး Layout ခ်ၾကတယ္။ CSS ကုိ element ေတြ ေနရာခ်ဖုိ႔သုံးၾကတယ္။ ဒါမွ မဟုတ္ ဝဘ္စာမ်က္ႏွာ ေနာက္ခံအေရာင္အတြက္သုံးၾကတယ္။
မွတ္ခ်က္ — HTML ဇယားေတြကုိသုံးျပီး Layout ေကာင္းေကာင္းခ်လုိ႔ရေပမယ့္ ဇယားေတြက ဒီအတြက္ တီထြင္ထားတာ မဟုတ္ ပါဘူး။ သူတုိ႔က tabular data အတြက္ပဲျဖစ္ပါတယ္။ layout tool မဟုတ္ ပါဘူး။
HTML Layout မ်ား - <div> Element မ်ားအသုံးျပဳျခင္း
div element ဆုိတာက block level element ျဖစ္ပါတယ္။ HTML element ေတြ Group လုပ္ဖုိ႔သုံးပါတယ္။
ေအာက္ကဥပမာေတြက div element ၅ ခုကုိသုံးျပီး column ေတြအမ်ားၾကီးကုိ layout ခ်ထားတာကုိျပထားပါတယ္။ အထက္က ဥပမာေတြအတုိင္းပါပဲ။
ဥပမာမ်ား
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id=“title” style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">ဝဘ္စာမ်က္ႏွာ ရဲ့အဓိကေခါင္းစဥ္</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content" style="background- color:#EEEEEE;height:200px;width :400px;float :left;">
Content ေတြဒီေနရာမွာ ဝင္ပါမယ္</div>
<div id="footer" style="background- color:#FFA500;clear:both;text-align:center;">
Copyright © Soemoeaung.com</div>
</div>
</body>
</html>
အေပၚက HTML code ေတြက ေအာက္က result ကုိေပးပါလိမ့္မယ္။
HTML Layout မ်ား - ဇယားမ်ားအသုံးျပဳျခင္း
layouts ခ်ဖုိ႔ အရွင္းဆုံးနည္းကေတာ့ HTML <table> tag ေတြသုံးတာပါပဲ။
Column ေတြကုိ <div> သုိ႔ မဟုတ္ <table> element ေတြသုံးျပီး Layout ခ်လုိ႔ရပါတယ္။ CSS ဟာ element ေတြ Group လုပ္ဖုိ႔ျဖစ္ျပီး စာမ်က္ႏွာရဲ့ ေနာက္ခံအေရာင္ကုိ စုံစုံလင္လင္သုံးခ်င္ရင္လည္း သုံးပါတယ္။
မွတ္ခ်က္ — ေအာက္ကဥပမာေတြက Row ၃ ခုနဲ႔ Column ၂ ခုပါတဲ့ ဇယားသုံးျပီး Layout ခ်ထားပါတယ္။ ပထမဆုံးနဲ႔ေနာက္ဆုံး Row ေတြက colspan attribute ကုိသုံျပီး Column ေတြကုိ span လုပ္ထားပါတယ္။
ဥပမာမ်ား
<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color :#FFA500;">
<h1> ဝဘ္စာမ်က္ႏွာရဲ့ အဓိကေခါင္းစဥ္</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width :400px;text-align:top;">
Content ေတြဒီေနရာမွာဝင္ပါမယ္။ </td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © soemoeaung.com</td>
</tr>
</table>
</body>
</html>
အေပၚက HTML code ေတြက ေအာက္က result ကုိေပးပါလိမ့္မယ္
ဝဘ္စာမ်က္ႏွာရဲ့ အဓိကေခါင္းစဥ္ |
Menu
HTML
CSS
JavaScript | Content ေတြဒီေနရာမွာဝင္ပါမယ္။ |
Copyright © soemoeaung.com |
HTML Layout - အသုံးဝင္ေသာ မွတ္စုမ်ား
မွတ္ခ်က္ — CSS သုံးရတာရဲ့ အဓိကအားသာခ်က္ကဒါပါပဲ။ တကယ္လုိ႔ CSS code ေတြကုိ external style sheet တစ္ခုထဲမွာထားခဲ့ရင္ သင့္ရဲ့ site ကုိပုိျပီး ထိန္းရသိမ္းရလြယ္လိမ့္မယ္။ အဲဒီ့ ဖိုင္ တစ္ခုတည္းကုိျပင္ျပီး Layout ေတြအားလုံးကုိလည္း ေျပာင္းလုိ႔ရတယ္။
မွတ္ခ်က္ — တကယ္လွတဲ့ ၾကည့္ေကာင္းတ့ဲ layout ေတြကုိဖန္တီးရင္ အခ်ိန္ေပးရတာေၾကာင့္ အဆင္ေျပမယ့္ နည္းလမ္းကေတာ့ template ေတြသုံးဖုိ႔ပါပဲ။ Google မွာလည္း free ဝဘ္ဆုိဒ္ template ေတြရွာၾကည့္ပါ။ (အဲဒါေတြက အဆင္သင့္ Layout ခ်ျပီးသားျဖစ္ျပီး ဒီတုိင္းပဲသုံးသုံး ကုိယ့္စိတ္ၾကိဳက္ျပန္ျပင္ျပီး သုံးသုံး ရပါတယ္)။
HTML Layout Tag မ်ား
| Tag | အေၾကာင္းအရာ |
| <div> | Document ရဲ့အပုိင္းတစ္ပုိင္းလုိ႔ သတ္မွတ္ပါတယ္။ |
| <span> | Document ရဲ့အပုိင္းတစ္ပုိင္းလုိ႔ သတ္မွတ္ပါတယ္။ |
http://www.soemoeaung.com/
ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါေၾကာင္း ေျပာၾကားပါရေစ..ဘေလာ့ခရီးသည္မွ နည္းပညာမ်ားအား မည္သူမဆို လြတ္လပ္စြာ ကူးယူသုံးစြဲနိဳင္ပါတယ္.. ကြ်န္ေတာ္ ပိုင္ဆိုင္ေသာေနရာေလးမ်ားအား ဆက္လက္ လည္ပါတ္လိုပါက ***************************************
