HTML5 နဲ့ CSS3 သုံးပြီး Website ဆောက်ကြမယ် (၂)
ထုံးစံအတိုင်း အရင်အပိုင်းကို ပြန်ညွှန်းပါ့မယ်။ ခုမှာ စဖတ်မယ့်သူတွေ အနေန HTML5 နဲ့ CSS3 သုံးပြီး Website ဆောက်ကြမယ် (၁) ကို ဖတ်ပြီး လိုက်လုပ်ထားမှ ခုအပိုင်းကို ဆက်လုပ်လို့ ရမှာ ဖြစ်ပါတယ်။ ပထမပိုင်းမှာတုန်းကတော့ HTML5 ရိုးရိုးအနေနဲ့ပဲ ရေးခဲ့ပါတယ်။ ခုရှေ့ဆက်ပြီး CSS3 နဲ့ ပုံဖော်တဲ့အပိုင်း ဆက်ပါ့မယ်။ အရင်အပိုင်းမှာ ပြီးခဲ့တဲ့ ပုံကတော့
Part I
ကျွန်တော်တို့ ဒီ Tutorial ပြီးသွားရင်တော့ အောက်မှာ ပြထားတဲ့ ပုံစံဖြစ်လာမှာ ဖြစ်ပါတယ်။
Final Result
ကျွန်တော်တို့ CSS ထည့်တော့မယ်ဆိုတော့ ထုံးစံအတိုင်း style.css ဆိုတဲ့ဖိုင်တစ်ခုကို ဆောက်လိုက်ပါ။ index.html ရှိတဲ့ နေရာမှာ ပဲပေါ့။ ဒါဆို ဖိုင်တွေက
- index.html
- style.css
- images folder -> html5-image.jpg
ဆိုတဲ့ ဖိုင်သုံးဖိုင်ရလာပါမယ်။
အရင်ဆုံး index.html ထဲမှာ style.css ကို ညွှန်ပေးရပါမယ်။ အဲဒီအတွက် <head> … </head> ထဲမှာ အောက်မှာ ပေးထားတဲ့ code ကို ထည့်ပါ။
<link rel="stylesheet" href="style.css" media="screen" charset="utf8" />
အဲဒီလို CSS ကို ညွှန်းပြီးရင်တော့ style.css ကိုNotepad++ မှာ ဖွင့်လိုက်ပါ။ CSS စရေးလိုက်ရအောင် .. Body ရဲ့ Background ကို သတ်မှတ်ဖို့အတွက်
body {
background-color: #eeeeee;
}
body ဆိုတဲ့ tag အတွက် Background Color (နောက်ခံအရောင်) ကိုသတ်မှတ် ပေးလိုက်တာပါ။ CSS ရဲ့ သဘောကို အနည်းငယ် သဘောပေါက်အောင် ရှင်းပြရမယ်ဆိုရင်
CSS Explanation
body ဆိုတာက HTML Tag ဖြစ်တဲ့ <body> ကို ညွှန်းပါတယ်။ background-color ကတော့ CSS Property ပါ။ နောက်ကတော့ တန်ဖိုးပါ။ အသေးစိတ်တွေကတော့ Website ရေးကြမယ်ထဲမှာ တော်တော်များများ ရှင်းပြီး ဖြစ်တဲ့အတွက် မရှင်းတော့ပါဘူး။ ဒီတစ်ခါထပ်ပြီး ထည့်မှာက color, font-family နဲ့ font-size တွေပေါ့။ body ရဲ့ property မှာပဲ ထပ်ပေါင်းထည့်မှာပါ။
body {
background-color: #eeeeee;
color: #111111;
font-family: "Georgia", "Times New Roman", serif;
font-size: 13px;
}
Result ကိုကြည့်မယ်ဆိုရင်
Font-Properties
ဒီတစ်ခါ Image ရဲ့ Property ကို ပြင်ကြည့်မှာ ဖြစ်ပါတယ်။ ဒီနေရာမှာ Image ကို Box တစ်ခုတည်းမှာ ထည့်ထားမှာဆိုတော့ Box property ကို နားလည်အောင် ပုံလေး ပြန်တင်ပေးလိုက်ပါတယ်။
Box Model
style.css မှာ အောက်မှာ ပေးထားတဲ့ Code ကို ထပ်ဖြည့်လိုက်ပါ။
img {
padding: 3px;
border: 3px solid #dddddd;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
}
Result ကတော့ ပုံမှာပဲ ထူးခြားမှာ ဖြစ်ပါတယ်။
Image with border
ကဲ ဒီတစ်ခါတော့ div တွေထည့်ဖို့ လိုလာပါပြီ။ container ဆိုတဲ့ div တစ်ခု ထည့်မှာပါ။ အဓိက ရည်ရွယ်ချက်ကတော့ နယ်ပယ် ဧရိယာ သတ်မှတ်ဖို့ပါ။ <body> ဆိုတဲ့ tag နောက်မှာ <div id = “container”> ဆိုပြီး ထည့်လိုက်ပါ။ ပြီးရင် </body> ရဲ့ ရှေ့မှာ </div> အပိတ် tag လေးထည့်လိုက်ပါ။ ပြီးရင် css ဖိုင်မှာ သွားပြီး
#container {
width: 950px;
}
ဆိုပြီ ထည့်လိုက်ပါ။ id နဲ့ class ဘာကွာလဲဆိုတာ သိချင်ရင်တော့ ဒီနေရာမှာ ရေးခဲ့ပြီး ဖြစ်ပါတယ်။ အဲဒီလို ထည့်ပြီး Browser မှာ ခေါ်ကြည့်ရင် ညာဖက်ကို ကပ်နေပါလိမ့်မယ်။ အဲဒီလိုဆိုရင် သိပ်ပြီး ကြည့်လို့ မကောင်းပါဘူး။ ဒါကြောင့် အလယ်ကို ပို့ရပါမယ်။
#container {
width: 960px;
margin: 0 auto;
}
ဒီတစ်ခါ Browser မှာ ခေါ်ကြည့်ရင်တော့ အလယ်ကို ရောက်သွားပါပြီ။ ရှေ့ဆက်ပြီး header အတွက် css ကို ရေးမှာ ဖြစ်ပါတယ်။ header ထဲမှာ <h1> … </h1> ဆိုပြီး ရေးခဲ့တဲ့ <h1> tag တစ်ခုရှိပါတယ်။ အဲဒီအတွက် သတ်မှတ်ပေးရအောင်
header h1 {
text-align: center;
text-shadow: 1px 1px 1px #999999;
}
text-shadow ဆိုတဲ့ CSS propery က CSS3 ရဲ့ Feature တစ်ခုပါ Text ကို အရိပ်ချတဲ့ နေရာမှာ သုံးပါတယ်။
text-shadow: 1px 1px 1px #999999;
ဆိုတဲ့ နေရာမှာ ရှေ့ဆုံးက 1px ကတော့ ညာဖက်အတွက် အရိပ်ချမယ့် pixel ပါ။ ဒုတိယ 1px ကတော့ အောက်ဖက် အတွက်ပါ။ တတိယမြောက် 1px ကတော့ blur လို့ခေါ်တဲ့ ဘယ်လောက် မှုန်ရမလဲဆိုတဲ့ အတွက်ပါ။ နောက်ဆုံးကတော့ အရိပ်ရဲ့ အရောင်ပေါ့။ result အရတော့
H1 with text shadow
Header တွေ ပြီးပါပြီ ရှေ့ဆက်ရမှာက nav အတွက်ပါ။ CSS ကတော့
nav ul {
list-style: none;
padding: 0px;
text-align: center;
}
nav ul li {
display: inline;
font-variant: small-caps;
letter-spacing: 2px;
border-right: 1px solid #999999;
margin-right: 10px;
padding-right: 10px;
}
nav ul li:last-child {
border: none;
margin: 0;
padding: 0;
}
nav a {
color: #111;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
Property အားလုံးကို သိပြီး ဖြစ်မယ်ထင်ပါတယ်။ တစ်ခုပဲ ရှင်းပြချင်ပါတယ်။ အဲဒါကတော့ last-child ဆိုတဲ့ property ပါ။ သူကတော့ နောက်ဆုံးက navigation item ကို ညွှန်းပါတယ်။ အဓိက ထည့်ရခြင်း အကြောင်းကတော့ အောက်မှာ ယှဉ်ပြထားတဲ့ ပုံကိုကြည့်ရင် သိမယ်ထင်ပါတယ်။
Navigation without last-child
နောက်ဆုံးမှာ Border ပါနေပါတယ်။ အဲဒီတော့ ကြည့်မကောင်ဘူးပေါ့။ အောက်မှာ ပြထားတဲ့ပုံကတော့ last-child ထည့်ပြီးတဲ့ ပုံပါ။
With Last-child
ကဲ ဒီတစ်ခါ section နဲ့ aside ကို နေရာကြအောင် ချကြပါစို့။ တစ်ဖက်တစ်ချက်စီမှာ ရှိရမှာ ဖြစ်တဲ့အတွက် တစ်ခုက Left တစ်ခုက Right ပေါ့။ CSS Code ကတော
section {
float: left;
width: 600px;
}
aside {
float: right;
width: 280px;
}
ဒီလိုဆိုရင်တော့ တစ်ဖက်စီကပ်သွားပြီပေါ။
Image with floating
ဒါပေမယ့် တစ်ခုဆိုးတာက footer ကြီးက ကြားမှာ ရှုပ်နေပါတယ်။ ကျွန်တော် footer အတွက် ဆက်ရေးရအောင် ..
footer {
clear: both;
display: block;
font-size: 90%;
font-style: italic;
font-variant: small-caps;
padding-top: 10px;
}
footer a{
color: #111111;
}
clear: both ကတော့ ဘယ်ဖက်ကိုမှ မကပ်ဘူးဆိုတဲ့ အဓိပ္ပါယ်ပါ။ display: block ဆိုတာကတော့ inline တစ်ခုမှ မရှိဘူးလို့ အဓိပ္ပါယ်ရပါတယ်။ Firefox အတွက်လိုပါတယ်။ ကဲဒီအဆင့်ပြီးရင်တော့ HTML5 နဲ့ CSS3 အဆင့် တစ်ဆင့်ပြီးပါပြီ။
Final Result
Complete CSS ကတော့ ဒီမှာပါ။
body {
background-color: #eeeeee;
color: #111111;
font-family: "Georgia", "Times New Roman", serif;
font-size: 13px;
}
img {
padding: 3px;
border: 3px solid #dddddd;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
}
#container {
width: 960px;
margin: 0 auto;
}
header h1 {
text-align: center;
text-shadow: 1px 1px 1px #999999;
}
nav ul {
list-style: none;
padding: 0px;
text-align: center;
}
nav ul li {
display: inline;
font-variant: small-caps;
letter-spacing: 2px;
border-right: 1px solid #999999;
margin-right: 10px;
padding-right: 10px;
}
nav ul li:last-child {
border: none;
margin: 0;
padding: 0;
}
nav a {
color: #111;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
section {
float: left;
width: 600px;
}
aside {
float: right;
width: 280px;
}
footer {
clear: both;
display: block;
font-size: 90%;
font-style: italic;
font-variant: small-caps;
padding-top: 10px;
}
footer a{
color: #111111;
}
ရွှင်လမ်းချမ်းမြေ့ပါစေ …
Facebook comments:
5 Responses
Leave a comment
About the Author
Thiha
စာမရေးရ မနေနိုင်သူ၊ ဒီဇိုင်းဆွဲခြင်း၊ ပရိုဂရမ်ရေးခြင်း၊ အင်တာနက်တွင် သင်ယူခြင်းတို့ အမြဲမပြတ် ပြုလုပ်နေသူ၊ နည်းပညာနှင့် ပတ်သက်လျှင် အကုန် စိတ်ဝင်စားသူ၊ ကလေး တစ်ယောက် အဖေ၊ နည်းပညာသမားအပေါ် နားလည်မှု အပြည့်ပေးနိုင်သော ဇနီးတစ်ယောက်၏ ခင်ပွန်း၊ Myanmar Links မှာ နည်းပညာ အကြောင်း သောင်းပြောင်းထွေလာ သင်တဲ့ဆရာ ... လောလောဆယ် လေ့လာနေတာက iOS
Ads
အခုလို ဝေမျှတဲ့ အတွက် ကျေးဇူးပါဗျာ. . . ဆက်ပြီးတော့ လက်တွေ့သင်ခန်းစာလေးတွေ ရေးပေးပါဦး။
အခြေခံအချက်လေးတွေက တော်တော်လေး အရေးကြီးပါတယ်ဗျာ . . .
ကျေးဇူးတင်ပါတယ် အစ်ကိုသီဟ.. mmtus ဒီ့ထက်မကပိုအောင်မြင်ပါစေလို ့တောင်းဆုပြုပါတယ်..
ပေးတဲ့ဆုနဲ့ ပြည့်ပါစေဗျာ …
share လုပ်ပေးတဲ့အတွက်အများကြီးကျေးဇူးတင်ပါတယ်။
[...] HTML5 နဲ့ CSS3 သုံးၿပီး Website ေတြေလ့လာၾကမယ္ အပိုင္း (၂) [...]