HTML Chapter 13 _ Making Layout

HTML Layouts – Using <div> 

Web page တစ္ခုစလုပ္ဖို. Layout plan ကို Step by step စဥ္းစားရေအာင္...

ပထမဆံုး view point အတြက္စဥ္းစားၾကည့္ပါမယ္။ Webpage မ်ားကို browser မွာၾကည့္တဲ့အခါမွာ horizontal scholl bar မထြက္ဖို. အလြန္ အေရးၾကီးပါတယ္။ ဒါေၾကာင့္ ယခုေခတ္ computers မ်ား၏ monitor resolution ကိုသံုးသပ္ၾကည့္ပါမယ္။ အနည္းဆံုး monitor resolution ကေတာ့ 1024x768 လို.ေယဘုယ် သတ္မွတ္ႏိုင္ပါတယ္။ ဥပမာ က်ေနာ္တို. Layout ခ်တဲ့အခါ Width ကို 1300 px နဲ.တာ layout လုပ္လိုက္မယ္ဆိုရင္ horizontal scholl bar ထြက္လာျပီး user ေတြသံုးရတာ အဆင္မေျပ ျဖစ္သြား ႏိုင္ပါတယ္။ ဒါေၾကာင့္ Web Designer ေတာ္ေတာ္မ်ားမ်ားက monitor အာလံုးႏွင့္ ကိုက္ညီေအာင္ Width ကို 960 px ျဖင့္ ဆြဲၾကပါတယ္။

Website ေတြမွာ ေယဘုယ် အားျဖင့္ Header, Content, Footer ပာူ၍ သံုးပိုင္းပါ၀င္ ပါတယ္။ Header တြင္ Logo, Navigation စသည္တို. ပါ၀င္ေလ့ရွိျပီး Content မွာေတာ့ အေၾကာင္းအရာမ်ားကို paragraphs, images, photos, videos တို.ျဖင့္ ေဖာ္ျပေလ့ရွိပါတယ္။ Footer တြင္ေတာ့ ပံုမွန္အားျဖင့္ website ရဲ့ copy right ကို ေရးသားထားေလ့ ရွိပါတယ္။

<div> ျဖင့္ layout မလုပ္ခင္ က်ေနာ္တို. Sketch layout ေလးလုပ္ၾကည့္ ရေအာင္...

အထက္ပါ structure အတိုင္ HTML document မွာ <div> tag ေတြနဲ.လုပ္ေဆာင္သြားပါမယ္။ <div> ဆိုတာ သီသန္.လုပ္ေဆာင္ေပးႏိုင္တာမရွိလို. CSS နဲ.တြဲျပီးလုပ္ေဆာင္ ရမွာပါ။ ပထမဆံုး external style sheet နဲ. စျပီးေရးျပပါမယ္။ Website တကယ္ ေရးတဲ့ အခါ မွာ အေလ့အက်င့္ေလး ျဖစ္ေစခ်င္လို.ပါ။ ျပီးလ်င္ internal style sheet ႏွင့္ inline style တို.ကို ေရးျပပါ့မယ္။

Web page interface အတြက္ layout style ကို CSS ျဖင့္ ေရးပါမယ္။ Layout ကို တစ္ဆင့္ ျခင္းစီ စဥ္းစားျပီး ေရးျပေပးပါမယ္။ ထံုးစံ အတိုင္း notepad++ ကိုဖြင့္ျပီး CSS file ကို စတင္လုပ္ေဆာင္ ရေအာင္....

1.Body

CSS စေရးတာနဲ့ Body အတြက္ CSS မွာ margin:0px; padding:0px; ကို အျမဲစေရးေပးရပါတယ္။ ဘာလို.လဲဆိုေတာ့ အဲဒါေတြမေရးထားရင္ website ကို browser မွာ ၾကည့္တဲ့ အခါမွာ အေပၚနဲ. ေအာက္ေျခ ေလးေတြမွာ လြတ္ေနတတ္ပါတယ္။ margin နဲ. Padding အေၾကာင္းကို ေတာ့ CSS မွာ ေသခ်ာေလ့လာႏိုင္ပါတယ္။ ေအာက္ပါအတိုင္း body အတြက္ စေရးလိုက္ပါ။

body{margin:0px; padding:0px;}

2.Wrapper

က်ေနာ္တို. Web Page ကို Monitor အားလံုးမွာ အဆင္ေျပေျပ နဲ. Center တည့္တည့္မွာေပၚဖို. လုပ္ေဆာင္ရ မွာပါ။ ဒါဆို သူ.အတြက္ 2 ခ်က္ လုပ္ေဆာင္ေပးရမွာပါ။

1. Monitor အားလံုးျဖင့္ အစဥ္ေျပေစမည့္ ျမင္ကြင္းအက်ယ္အ၀န္း
2. Browser ၏ center မွာေဖာ္ျပေပးႏိုင္ဖို.

Ok ဒါဆို CSS မွာေရးဖို.စျပီး စဥ္းစားပါမယ္။ အက်ယ္ ဆိုေတာ့ width ျဖစ္ျပီး၊ ၄င္းကို သတ္မွတ္ခ်င္တာက 960px ၊ ဒီလိုဆိုေတာ့ width:960px; ပါ။ center မွာေဖာ္ျပခ်င္ တဲ့အတြက္ margin:0 auto; လို.ေရးရပါတယ္။ margin: 0 auto; တြင္ zero ဆိုတာက browser ၏ အေပၚ ႏွင့္ ေအာက္ေျခ ကပ္လ်က္ ထိစပ္ဖို. သတ္မွတ္တာပါ။ တန္ဖို.တစ္ခုခုေပးလိုက္ရင္ ပာသြားပါတယ္။ auto ဆိုတာက monitor resolution ဘယ္ေလာက္နဲ.ပဲ ၾကည့္ၾကည့္ အလယ္တည့္တည့္မွာပဲ ရွိေနဖို. auto လို.ေရးသားျခင္းျဖစ္ပါတယ္။ CSS အေၾကာင္းမွာ ေသခ်ာရွင္းျပ ပါမယ္။ ထို.ေၾကာင့္ CSS document မွာေရးရမွာက ေအာက္ပါအတိုင္းျဖစ္ပါတယ္။

#wrapper {width:960px; margin:0 auto; }

3.Header

Width ကေတာ့ 960 px သာ ျဖစ္ျပီးေတာ့ Height ကိုေတာ့ 150 px ထားပါမယ္။ design ေပၚမူတည္ျပီး website တစ္ခုႏွင့္ တစ္ခု height ေတြမတူညီႏိုင္ပါဘူး။ ယခုက်ေနာ္တို.က sample ေလ့က်င့္ ေနတာဆိုေတာ့ 150px လို.သတ္မွန္လိုက္တာပါ။ ဒါဆို header ၏ CSS မွာ ေရးလိုက္ပါမယ္...

#header{ width:960px; height:150 px; background-color:#aaaaaa;}

3.Content

Content မွာ width ကိုလဲ 960 px ပဲထားပါမယ္။ height ကိုေတာ့ 450px လို.ထားလိုက္ပါ။ အမွန္တကယ္ website ေရးတဲ့အခါမွာ ေတာ့ content အပိုင္းကို height သတ္မွတ္ေပးလို.မရပါဘူး။ website ရဲ့ content မွာ ပါမယ့္ informations ေတြ ပါ၀င္သေလာက္ height က ေျပာင္းလဲႏိုင္ပါတယ္။ သူ.ကို အရွင္ dynamic ျဖစ္ေအာင္ CSS မွာ height ကို မသတ္မွတ္ပါဘူး။ ဒါေၾကာင့္ တကယ္ website creative လုပ္တဲ့အခါမွာ ထည့္မေရးပါဘူး။ အခု height ကို သတ္မွတ္တာက browser မွာ ျမင္ရေအာင္လို.ပါ။ ဒါေၾကာင့္ CSS မွာ ေအာက္ပါအတိုင္း ေရးလိုက္ပါ။

#content{width:960px; height:450px; background-color:#333333;}

4.Footer

Footer အတြက္ လည္း CSS မွာ ေအာက္ပါအတိုင္း ေရးလိုက္ပါ။

#footer{width:960px; height:50px; background-color:#777777;}

ကဲဒါဆိုအားလံုးျပီးပါ ျပီး။ တဆင့္ျခင္းစီ ေရးသြားလ်င္ ေအာက္ပါအတိုင္း ျဖစ္သြားမွာပါ။ style.css နာမည္ျဖင့္ သိမ္းလိုက္ပါ။

body{margin:0px; padding:0px;}

#wrapper{width:960px;margin:0 auto;}

#header{width:960px;height:150px;background-color:#aaaaaa;}

#content{width:960px;height:450px;background-color:#333333;}

#footer{width:960px; height:50px; background-color:#777777;}

က်ေနာ္ # ႏွင့္ တြဲေရးထားတဲ့ wrapper, header, content အမည္ေတြေနရာမွာ ၾကိဳက္တာေပးလုိ. ရပါတယ္။ # ဆိုတာက html ေရးတဲ့ အခါမွာ link ခ်ိတ္ဖို.ပါ။ သူ.ကို HTML tag ကေန id နဲ. ခ်ိတ္ရပါတယ္။ CSS basic မွာ အေသးစိတ္ေလ့လာ ၾကည့္ပါ။ ေအာက္မွာ HTML အတြက္ ေရးျပထားပါတယ္။ id ျဖင့္ ခ်ိတ္ဆက္မွဳကို သေဘာေပါက္သြားမွာပါ။

ေအာက္ပါတို.ကို လိုက္ေရးျပီး index.html နာမည္နဲ. သိမ္းလိုက္ျပီး Browser မွာ run ၾကည့္ပါ။

<!DOCTYPE html>

<html>

<head>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="wrapper"> 

<div id="header"> This is header </div>

<div id="content"> This is content </div>

<div id="footer"> This is footer </div>

</div>

</body>

</html>

Browser မွာ ေအာက္ပါအတိုင္း layout ကိုေဖာ္ျပေပးပါတယ္။

External Style Sheet ႏွင့္ ေရးျပျပီး ျပီ ဆိုေတာ့ Internal Style Sheet နဲ. Inline style တို.ကို ထပ္ျပီး ေရးျပထားပါတယ္။ ေလ့လာၾကည့္ပါ။

HTML Layouts – Using <div> with Internal Style Sheet

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

body{margin:0px; padding:0px;}

#wrapper{width:960px; margin:0 auto;}

#header{width:960px; height:150px; background-color:#aaaaaa;}

#content{width:960px; height:450px; background-color:#333333;}

#footer{width:960px; height:50px; background-color:#777777;}

</style>

</head>

<body>

<div id="wrapper">

<div id="header"> This is header </div>

<div id="content"> This is content </div>

<div id="footer"> This is footer </div>

</div>

</body>

</html>

HTML Layouts – Using <div> with Inline Style

<!DOCTYPE html>

<html>

<body style="margin:0px; padding:0px;">

<div style="width:960px; margin:0 auto;">

<div style="width:960px; height:150px; background-color:#aaaaaa;">

This is header

</div>

<div style="width:960px; height:450px; background-color:#333333;">

This is content

</div>

<div style="width:960px; height:50px; background-color:#777777;">

This is footer

</div>

</div>

</body>

</html>

Layout အေၾကာင္းနားလည္မယ္လို. ေမ်ွာ္လင့္ပါတယ္ ဗ်ား...