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/AVvXsEgF2I9oGUNB74-LVvulj0S8qVuRE0tAH7ZvpJzaLpOY44BDPDRsMoUllX-5X5wJvpqv2vzgCcmoyM0m1ai6BUEZ4ZX-A4GYaSWCKWkItsDqtBEjWZ4r-fKH0LK-S40FvsRNs5Ew5cs3ZFw/s640/atomic_colorful_love-1280x1024.jpg





https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHjAhhd4Q6rjyGVvQ7NujbVPPHWuFQ5j4FPSLSuAOPrksnmk-i8VbAtjp7UiqSc_p8kzWIjtXJzw-cMtzfQ-gVueH4OeUkUbBCLoppkyQdnWoklLj2KoMUpqU9MBKrEkwxgutdplN_nSSJ/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/AVvXsEgF2I9oGUNB74-LVvulj0S8qVuRE0tAH7ZvpJzaLpOY44BDPDRsMoUllX-5X5wJvpqv2vzgCcmoyM0m1ai6BUEZ4ZX-A4GYaSWCKWkItsDqtBEjWZ4r-fKH0LK-S40FvsRNs5Ew5cs3ZFw/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;
}

---

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

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