ဝဘ္စာမ်က္ႏွာ ၾကည့္လုိ႔ေကာင္းဖုိ႔အတြက္ layout ကအေရးအရမ္းၾကီးပါတယ္။
သင့္ ဝဘ္စာမ်က္ႏွာ ကုိ layout Design ေသခ်ာခ်ပါ။
သင့္ ဝဘ္စာမ်က္ႏွာ ကုိ layout Design ေသခ်ာခ်ပါ။
ဝဘ္ဆုိဒ္ Layout မ်ား
ဝဘ္ဆုိဒ္ အမ်ားစုက ၎မွာပါတဲ့ Content ေတြကုိ Column ေတြခြဲျပီး ထားၾကတယ္။ မဂၢဇင္းတုိ႔ သတင္းစာတုိ႔ နဲ႔ တူတယ္။
Column ေတြကုိ <div> သုိ႔ မဟုတ္ <table> element ေတြသုံးျပီး Layout ခ်ၾကတယ္။ CSS ကုိ element ေတြ ေနရာခ်ဖုိ႔သုံးၾကတယ္။ ဒါမွ မဟုတ္ ဝဘ္စာမ်က္ႏွာ ေနာက္ခံအေရာင္အတြက္သုံးၾကတယ္။
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 ခ်ထားတာကုိျပထားပါတယ္။ အထက္က ဥပမာေတြအတုိင္းပါပဲ။
ေအာက္ကဥပမာေတြက 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>
<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 လုပ္ဖုိ႔ျဖစ္ျပီး စာမ်က္ႏွာရဲ့ ေနာက္ခံအေရာင္ကုိ စုံစုံလင္လင္သုံးခ်င္ရင္လည္း သုံးပါတယ္။
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>
<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/
ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါေၾကာင္း ေျပာၾကားပါရေစ..ဘေလာ့ခရီးသည္မွ နည္းပညာမ်ားအား မည္သူမဆို လြတ္လပ္စြာ ကူးယူသုံးစြဲနိဳင္ပါတယ္.. ကြ်န္ေတာ္ ပိုင္ဆိုင္ေသာေနရာေလးမ်ားအား ဆက္လက္ လည္ပါတ္လိုပါက ***************************************
0 comments:
Post a Comment