Myanmar Techs: Web Page တစ်ခုကို ပြင်ဆင်မယ်ဆိုရင်...

ဒီပို့စ်လေးကို ရေးလိုက်တာဟာ ကျွန်တော်တော်လွန်း တတ်လွန်းလို့ မဟုတ်ကြောင်းနဲ့ လေ့လာမိသမျှတွေထဲက

Web Page နဲ့ ပက်သက်တဲ့ အခြေခံကျတဲ့ အဓိက လိုအပ်မယ့်အရာလေးတွေကို ပြန်လည်မျှဝေပေးတဲ့

သဘောဖြစ်ပါတယ်..။ Web Page တစ်ခုကို ပြင်ဆင်မယ်ဆိုရင် HTML , CSS ကုတ်တွေကို နားလည်ဖို့

လိုမယ်လို့ ထင်ပါတယ်။ လောလောဆယ်တော့ ကျွန်တော် သိသလောက်လေးပဲ တင်ပြပေးသွားပါမယ်။

ခု ဒီနေ့တင်ပေးမယ့် ကုတ်တွေကတော့ CSS ကုတ်တွေပါ။ Blogger ဆိုဒ်တွေ၊ Ning ဆိုဒ်တွေနဲ့

တစ်ခြား Css ကုတ် အလုပ်လုပ်တဲ့ ဆိုဒ်တိုင်းမှာ အသုံးပြုနိုင်ပါတယ်။

[1 ]ပထမဦးဆုံး ဆိုဒ် နောက်ခံ[background]ကို ပြင်ဖို့ လိုပါမယ်။

ကိုယ်နှစ်သက်ရာ အရောင် [သို့] ပုံများ အသုံးပြုနိုင်ပါတယ်။ ပုံအသုံးပြုတဲ့နေရာမှာလည်း ပုံဆိုဒ် အကြီးလား?

ပုံဆိုဒ် အသေးလေးတွေ သုံးမှာလား? ကိုယ် အသုံးပြုချင်တဲ့အပေါ်မူတည်ပြီး ကုတ်တွေကို ပြင်ပေးရပါတယ်။

ဆိုဒ်နောက်ခံကို အရောင်ချည်းပဲ သုံးမယ်ဆိုရင် အသုံးပြုရမယ့်ကုတ်က အောက်ပါအတိုင်း ဖြစ်ပါတယ်။

body {
background-color:#000000;
}

အဲဒီကုတ်ကို ထည့်လိုက်မယ်ဆိုရင် ဆိုဒ်တစ်ခုလုံးရဲ့ နောက်ခံဟာ အနက်ရောင် ဖြစ်သွားပါမယ်။#000000 က

နောက်ခံအရောင်ပါ။ ကိုယ်ကြိုက်တဲ့ အရောင် ကုတ် [သို့] အရောင်နာမည် ပြောင်းရေးနိုင်ပါတယ်။

HTML Colour Code တွေ ယူဖို့ Flash ဖိုင် ၂ ခုကို ဒီနေရာလေးမှာ သွားကြည့်နိုင်ပါတယ်။ နောက်ထပ်

ဒီမှာလည်း ရှိပါတယ်။ ပုံ Size အသေးတွေ အသုံးပြုမယ်ဆိုရင် အောက်က ကုတ်ကို အသုံးပြုနိုင်ပါတယ်။

body{
background: url( ပုံလင့်ထည့်ပါ ) repeat fixed top center;
background-color: #000000;
}

ပုံ Size အကြီးတွေ အသုံးပြုမယ်ဆိုရင်တော့ ဒီအောက်က ကုတ်လေးကို ယူပါ။

body{
background: url( ပုံလင့်ထည့်ပါ ) no-repeat fixed top center;
background-color: #000000;
}

ဒီကုတ် ၂ ခုမှာ ကွာသွားတာဆိုလို့ repeat နဲ့ no-repeat ဆိုတဲ့ စာလုံးလေးပါပဲ။ ပထမ ကုတ်မှာတော့

repeat လို့ ရေးထားတယ်နော်။အဲဒါက ကိုယ်သုံးမယ့်ပုံက အသေးလေးဆိုတော့ ဆိုဒ်တစ်ခုလုံးရဲ့ နောက်ခံ

ထပ်ခါ ထပ်ခါ ပေါ်အောင်ပါ။ ပုံတစ်ပုံတည်းနဲ့နောက်ခံအပြည့် ယူမယ်ဆိုရင်တော့ ကိုယ်အသုံးပြုမယ့်ပုံက

width: 1270px; height: 600px လောက် ရှိရပါမယ်။ အဲလိုပုံမျိုးသုံးမယ်ဆိုရင် no-repeat ပါ။

အောက်က ပုံလေး နှစ်ပုံကို နှိပ်ကြည့်လိုက်ရင် တစ်ခါတည်း သဘောပေါက်မယ်လို့ ထင်ပါတယ်။

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTu1rj-dtp3spKsLvKKROEDgkgn93dJuhDQzTdcNqgkJZO6R_Y4xQ0_mTggQ7hXvilVRxpF-L_pWUojR6BGzNT86vS42jpX_WcAVYyaYE5wcEOZW7o75JWK3UjucRjWffzRP-0HY5JN0/s640/atomic_colorful_love-1280x1024.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjthC3RW1yeEkZhWkeG8jLi6GHSr4NPIosJO075xhyM6dUBSlhPLYJHUZEDxpkCqJ0f4BTi0DAValEpp_d9hLuvS5TKY5XYN8HaTNKjoarS9NCLM6ahG64TNAYlpjEdL03Lyhlsp_oxRD-1/s1600/mozilla_firefox_browser-1366x768.jpg

နောက်တနည်း.... ပုံနောက်ခံကို အရောင် [color]နဲ့ပဲ ထားပြီး...အဲဒီအရောက်နောက်ခံပေါ်မှာ

ကိုယ်တင်ထားချင်တဲ့ အဆင်ပြေမယ့် ပုံသေးသေးလေး တင်ထားလို့ ရတယ်လေ။

ခု ကျွန်တော့်ဆိုဒ် ဘယ်ဘက်အပေါ်ထောင့်မှာ ကောင်လေးက ကောင်မလေးကို စားစရာလေးတွေ ခွန့်ကွေျးနေတဲ့

ပုံလေးလို တင်ထားချင်ရင်တော့ အပေါ်က ဒုတိယ အသုံးပြုပြီး no-repeat [ top center ]နေရာက

ပြင်ယူရပါမယ်။ အဲဒီနေရာကနေ ကိုယ်က ပုံသေးသေးလေးကို ထပ်ခါထပ်ခါမပေါ်စေပဲ အပေါ်

ဘယ်ဘက်ထောင့်မှာ တပုံထဲ ထားချင်တယ်ဆိုရင်

[no-repeat fixed top left;]

**************************
ဘယ်ဘက်ဘေး အလယ်လောက်မှာ ထားချင်ရင်

[no-repeat fixed center left;]

**************************
ဘယ်ဘက်အောက်ခြေမှာ ထားချင်ရင်

[no-repeat fixed bottom left;]

**************************
ပုံသေးသေးလေးကို အပေါ် ညာဘက်ဒေါင့်မှာ တပုံထဲ ထားချင်တယ်ဆိုရင်

[no-repeat fixed top right;]

**************************
ညာဘက်ဘေး အလယ်မှာ ထားချင်ရင်

[no-repeat fixed center right;]

**************************
ညာဘက်ဘေး အောက်ခြေမှာ ထားချင်ရင်

[no-repeat fixed bottom right;]

**************************
ဥပမာ။----။ ကျွန်တော့်ဆိုဒ်က ပုံလေးလို အပေါ်ဘယ်ဘက်မှာ ထားမယ်ဆိုရင် ဆိုက် [body]နောက်ခံ

ပြင်ပေးရမယ့်နေရာက ကုတ်နေရာက... အောက်ကလို ဖြစ်ရပါမယ်။

body{
background: url( ပုံလင့်ထည့်ပါ ) no-repeat fixed top left;
background-color: #000000;
}

နောက်ခံအရောင် #000000 ကိုတော့ ကိုယ်ကြိုက်တဲ့အရောင် ပြောင်းသုံးပေါ့နော်။ လောလောဆယ် ကျွန်တော်

ရှာထားတဲ့ ပုံလေးတွေ သုံးချင်တယ်ဆိုရင် အောက်မှာ ပေးထားပါတယ်။ ကိုယ်သုံးချင်တဲ့ ပုံပေါ်ကို Right Click>>

Copy Link Location လုပ်ပြီး ပုံလင့်ကို ယူနိုင်ပါတယ်။

Body Background အပိုင်းကတော့ အဲလောက်ဆို တော်တော်လေး ပြည့်စုံပြီလို့ ထင်ပါတယ်နော်..

နောက် Body Font ပိုင်းကို တစ်ခါတည်း ဆက်ရင် ပိုကောင်းမယ်လို့ ထင်တယ်။ အဲဒီတော့ ဝဘ်ဆိုဒ်

တစ်ခုလုံးမှာ ကိုယ်က ဘယ်လိုဖောင့်အရောင် သုံးချင်လဲ ဘယ်လိုဖောင့်မျိုး သုံးမှာလဲ??? ဆက်ဖတ်ပါ။

ခု body Font အရောင်နဲ့ ဆိုဒ် ဖောင့် တွေကို ဘယ်လို ကုတ်တွေနဲ့ ရေးလဲဆိုတာ လေ့လာရအောင်။

ဒီကုတ်တွေကို body { နောက်ခံအတွက် ကုတ်ကိုပဲ } အဲဒီအမှတ်အသားလေး ရှေ့ကနေ ထည့်ပေးပါ။

color: green;
font-size: 15px;
font-family:Zawgyi-One;

ပထမ ကုတ် တစ်ကြောင်းက ဖောင့်အရောင်ပါ။အစိမ်း ရောင်ပါ။ green ကို ပြောင်းသုံးနိုင်ပါတယ်။

ဒုတိယစာသားက ဖောင့်ဆိုဒ်အတွက်ပါ။ 15px ကို ကိုယ်အဆင်ပြေသလို အကြီး အသေးပြန်ပြောင်းပါ။

ဖောင့်ကိုတော့ ကျွန်တော် Zawgyi-One ဖောင့်ပဲ ထားပါတယ်။ ပြောင်းသုံးနိုင်ပါတယ်။ အောက်ပါအတိုင်း..

font-family:Arial;
font-family:Courier New;
font-family:Georgia;
font-family:Helvetica;
font-family:Times;
font-family:Trebuchet;
font-family:Verdana;

ဖောင့်စတိုင်လ် ပြောင်းသုံးချင်တဲ့ သူတွေအတွက် ပြောပြတာပါ။ Zawgyi-One ဖောင့်ကတော့ ရိုးရှင်းပြီး

ဖတ်ရတာ ပိုအဆင်ပြေဆုံးလို့ ထင်ပါတယ်။ နောက်ပြီးတော့ ခု Flash Song တွေမှာဆို စာသား ရှိတ်ခံတာ

တော်တော်များများ သဘောကျပြီး သုံးလာကြပါတယ်။ကိုယ့် Web Page မှာပါ အဲလို သုံးချင်တယ်ဆိုရင်

text-shadow: 5px 5px 5px green;

အဲဒီကုတ်လေး ထပ်ထည့်ပေးလိုက်ရုံပါပဲ။ green ဆိုတာကတော့ စာသား ရှိတ်ခံတဲ့ အရောင်ပါ။

5px 5px 5px ကိုတော့ အဆင်ပြေသလို ကိုယ့်စိတ်ကြိုက် ဂဏန်းများကို အတိုးအလျော့ လုပ်ပြီး

ပြင်သုံးနိုင်ပါတယ်။နမူနာကို ကျွန်တော့်ဆိုဒ် ခေါင်းစီးစာသားတွေမှာ ကြည့်နိုင်ပါတယ်။

နောက်တစ်ခုက ဆိုဒ်ကို ဘောင်ခတ်တဲ့ နည်းပါ။ အဲဒါလည်း အတော်များများ သဘောကျ ကြပါတယ်။

border:5px dashed green;

ဘောက်ခတ်တဲ့ ကုတ်လေးပါ။ 5px က ဘောင်ရဲ့ အထူအပါးပါ။ deshed ကတော့ ဘောင်စတိုင်လ်ပါ။

green ကတော့ ဘောင်အရောင်ပဲ ဖြစ်ပါတယ်။ ဘောက်စတိုင်တွေကတော့ အများကြီး ရှိပါတယ်။

border:5px dotted green;

border:5px dashed green;

border:5px solid green;

border:5px double green;

border:5px groove green;

border:5px ridge green;

border:5px inset green;

border:5px outset green;

ကိုယ်ကြိုက်နှစ်သက်တဲ့ ဘောင်စတိုင်လ်ကို အသုံးပြုနိုင်ပါတယ်။ နောက်ထပ် ဆိုဒ် ရဲ့ အပေါ် အောက်

ဘယ် ညာ လေးဘက်ကို ဘောင်စတိုင်လ်လေးမျိုး အရောင် လေးရောင်နဲ့ သုံးချင်သေးရင်ပေါ့။ လန်းတယ်!

သုံးချင်တယ်ဆိုရင် အောက်က ကုတ်လေးတွေကို ယူသုံးနိုင်ပါတယ်။ ကိုယ့်စိတ်ကြိုက်ပြင်သုံးနိုင်ပါတယ်။

border-top:5px double red;
border-bottom:5px solid white;
border-left:5px dashed green;
border-right:5px dotted yellow;

[ 1 ] အပေါ်
[ 2 ] အောက်
[ 3 ] ဘယ်
[ 4 ] ညာ

နောက် Mouse Cursor လေးပါ ထည့်သုံးချင်ရင်ပေါ့။ သူငယ်ချင်းတို့ ကြိုက်ကြမယ်လို့ ထင်ပါတယ်။

သုံးချင်တယ်ဆို ကုတ်ကို အောက်မှာ ပေးထားပါတယ်။

body {
cursor : url(http://www.rw-designer.com/cursor-view/11317.png), default;
}

ကဲ ခု လောက်ဆိုရင်တော့ Body အတွက် ကုတ်လေးတွေ အတော်လေးကို စုံသွားပြီလို့ ထင်ပါတယ်နော်။

နားလည်ကြလားတော့ မသိဘူး။ တစ်ခုချင်းစီကို သေချာလေ့လာပြီး စမ်းသုံးကြည့်ပါ။ တစ်ဖြည်းဖြည်းနဲ့

သဘောပေါက်ပြီး အဆင်ပြေသွားလိမ့်မယ်လို့ ထင်ပါတယ်။ ခု ကျွန်တော် ပြတာတွေကို ပုံသေမမှတ်ပါနဲ့။

အကုန်လုံးကို ကိုယ့်စိတ်ကြိုက် ပြင်ယူလို့ ရတယ်ဆိုတာ သိထားစေချင်ပါတယ်။ ကြိုးစားကြည့်ပေါ့နော်..

လောလောဆယ်တော့ နမူနာ ကုတ်တစ်ခု ရေးပြလိုက်ပါတယ်...။ body အတွက်ပါ။

body{
background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTu1rj-dtp3spKsLvKKROEDgkgn93dJuhDQzTdcNqgkJZO6R_Y4xQ0_mTggQ7hXvilVRxpF-L_pWUojR6BGzNT86vS42jpX_WcAVYyaYE5wcEOZW7o75JWK3UjucRjWffzRP-0HY5JN0/s640/atomic_colorful_love-1280x1024.jpg ) repeat fixed bottom center;
background-color: #000000;
color: green;
font-size: 15px;
font-family:Zawgyi-One;
text-shadow: 2px 3px 5px green;
border:5px dashed green;
cursor : url(http://www.rw-designer.com/cursor-view/11317.png), default;
}

တစ်ခြား ကျန်နေသေးတာတွေကိုတော့ နောက်နေ့တွေမှာ ဆက်ပြီး ရေးတင်ပေးသွားပါမယ်။

ခုရေးပြထားတဲ့ ကုတ်တွေရဲ့ နမူနာ ကြည့်ချင်တယ်ဆိုရင်တော့ ဒီနေရာလေးကို နှိပ်ပြီး ကြည့်နိုင်ပါတယ်။

>_ Myanmar Techs

Web Page တစ်ခုကို ပြင်ဆင်မယ်ဆိုရင်...

// USER_COMMENTS

Comments